/* ====== Ficha de producto · Serigrafía Utopía (editorial) ====== */
:root{
  --bg:#F7F3EA;--ink:#1B1813;--paper:#FDFBF6;--accent:#2C7A4E;--accent-rgb:44,122,78;
  --muted:#7a7264;--line:1px solid #C9C2B2;--soft:1px solid #DDD6C6;
  --font-display:'Fraunces',serif;--font-body:'Inter',sans-serif;
  --shadow:0 12px 30px rgba(27,24,19,.08);--shadow-sm:0 4px 14px rgba(27,24,19,.07);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
/* La cabecera compartida del sitio es position:fixed (76px de alto) → se deja hueco
   para que no se solape con el contenido de la ficha. */
body{padding-top:76px}
h1,h2{font-family:var(--font-display);font-weight:560;letter-spacing:-.01em;line-height:1.05}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.fp-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:12px clamp(16px,4vw,44px);background:rgba(247,243,234,.9);backdrop-filter:blur(8px);border-bottom:var(--soft)}
.fp-brand img{height:clamp(42px,4.4vw,58px)}
.fp-nav{display:flex;gap:20px;font-size:13.5px;font-weight:600;color:var(--muted)}
.fp-nav a:hover{color:var(--accent)}

.fp{max-width:1160px;margin:0 auto;padding:clamp(20px,4vw,44px) clamp(16px,4vw,44px) 60px}

/* Hero */
.fp-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,54px);align-items:start}
.fp-stage{display:flex;align-items:center;gap:8px}
.fp-arrow{flex:none;width:38px;height:38px;border-radius:50%;background:var(--paper);border:var(--line);box-shadow:var(--shadow-sm);font-size:21px;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,transform .12s}
.fp-arrow:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.08)}
.fp-main{position:relative;flex:1 1 auto;min-width:0;background:#fff;border:var(--line);border-radius:16px;box-shadow:var(--shadow);aspect-ratio:1/1;overflow:hidden}
/* img y video superpuestos (absolute) para que nunca salgan lado a lado */
.fp-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fp-main video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.fp-counter{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:2;font-size:11px;font-weight:600;background:rgba(253,251,246,.9);border:var(--soft);padding:2px 9px;border-radius:999px}
.fp-thumbs{display:flex;gap:9px;flex-wrap:nowrap;overflow-x:auto;margin-top:12px;padding-bottom:2px}
.fp-th{flex:none}
.fp-th{width:66px;height:66px;border:var(--line);border-radius:11px;background:#fff;overflow:hidden;padding:4px;cursor:pointer;transition:border-color .15s}
.fp-th.on,.fp-th:hover{border-color:var(--accent)}
.fp-th img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fp-th-v{display:flex;align-items:center;justify-content:center;background:var(--ink);border-color:var(--ink);color:#fff;font-size:14px}
.fp-th-v.on{border-color:var(--accent)}
.fp-th-360{position:relative}
.fp-badge360{position:absolute;bottom:2px;right:2px;font-size:8px;font-weight:700;letter-spacing:.02em;background:var(--ink);color:#fff;padding:1px 4px;border-radius:6px;line-height:1.3}
/* Vídeo de YouTube incrustado en la ficha (mismo hueco que la imagen). */
.fp-yt{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
/* Póster de YouTube (Sol's/NEOBLU sin incrustación): botón que abre el vídeo. */
.f1-yt-badge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-decoration:none;cursor:pointer;z-index:3}
.f1-yt-badge[hidden]{display:none} /* la clase display:flex ganaba a [hidden] → el póster se quedaba pegado en las fotos */
.f1-yt-badge .f1-yt-play{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(220,32,32,.95);color:#fff;font-size:1.5rem;padding-left:5px;box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .15s,background .15s}
.f1-yt-badge:hover .f1-yt-play{transform:scale(1.08);background:#e30000}
.f1-yt-badge .f1-yt-txt{background:rgba(0,0,0,.72);color:#fff;font-size:.82rem;font-weight:600;padding:.32rem .7rem;border-radius:999px}
/* Aviso de giro sobre la imagen 360°. */
.fp-giro-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;font-size:11px;font-weight:600;color:#fff;background:rgba(20,20,20,.72);padding:4px 12px;border-radius:999px;pointer-events:none;white-space:nowrap}
.fp-main img[style*="ew-resize"]{cursor:ew-resize}

.fp-info{position:sticky;top:96px}
.fp-infotop{display:flex;align-items:center;justify-content:space-between;gap:14px}
.fp-eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.fp-provlogo{height:30px;max-width:130px;object-fit:contain;object-position:right center;opacity:.9}
.fp-info h1{font-size:clamp(30px,4vw,50px);margin-top:8px}
.fp-ref{font-size:13px;color:var(--muted);font-weight:500;margin-top:8px}
.fp-desc{margin-top:16px;font-size:15px;max-width:52ch}
.fp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chip{font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--paper);border:var(--soft)}
.fp-price{margin-top:20px;font-family:var(--font-display);font-size:20px;color:var(--accent)}
.fp-price b{font-size:30px}
.fp-price span,.fp-price small{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.fp-cta{display:inline-block;margin-top:20px;padding:14px 26px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;border-radius:12px;box-shadow:0 8px 22px rgba(var(--accent-rgb),.32);transition:transform .12s}
.fp-cta:hover{transform:translateY(-1px)}

/* Selector de color (pequeño, bajo el CTA) */
.fp-colorsel{margin-top:18px}
.fp-colorname{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:8px}
.fp-colorname b{color:var(--ink)}
.fp-swrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:7px;max-width:420px}
.fp-sw{aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,0,0,.14);cursor:pointer;transition:transform .12s}
.fp-sw:hover{transform:scale(1.15)}
.fp-sw.on{transform:scale(1.08);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent)}

/* Productos relacionados */
.fp-related{margin-top:clamp(30px,5vw,54px)}
.fp-related>h2{font-size:24px;margin-bottom:16px}
.fp-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fp-rel{background:var(--paper);border:var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .15s}
.fp-rel:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.fp-rel-img{background:#fff;border-radius:12px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:10px}
.fp-rel-img img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.fp-rel-nm{font-weight:700;font-size:14px}
.fp-rel-mt{font-size:12px;color:var(--muted);margin-top:2px}
@media(max-width:560px){.fp-rel-grid{grid-template-columns:1fr}}

/* Secciones */
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(30px,5vw,60px)}
.fp-card{background:var(--paper);border:var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.fp-card h2{font-size:20px;margin-bottom:14px;display:flex;align-items:baseline;gap:8px}
.fp-card h2 span{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--muted)}
.fp-colores{grid-column:1/-1}

.fp-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.fp-specs>div{display:flex;flex-direction:column;gap:1px;padding-bottom:8px;border-bottom:1px dashed var(--soft)}
.fp-specs dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fp-specs dd{font-size:14px;font-weight:500}

.fp-tables{display:flex;gap:22px;flex-wrap:wrap}
.sizes{border-collapse:collapse;font-size:13px;min-width:180px}
.sizes caption{text-align:left;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding-bottom:8px}
.sizes th,.sizes td{text-align:left;padding:6px 14px 6px 0;border-bottom:1px solid #eadfce}
.sizes th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

.fp-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:12px}
.fp-sw{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.fp-sw span{width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.14)}
.fp-sw small{font-size:10px;color:var(--muted);line-height:1.15}

.fp-care{display:flex;flex-wrap:wrap;gap:16px}
.fp-cert{margin-top:14px;padding-top:14px;border-top:1px dashed var(--soft)}
.fp-care-i{display:flex;flex-direction:column;align-items:center;gap:5px;width:76px;text-align:center}
.fp-care-i img{width:40px;height:40px;object-fit:contain}
.fp-care-i span{font-size:10px;color:var(--muted);line-height:1.2}

.fp-obs{font-size:13.5px;color:var(--muted);white-space:pre-line;line-height:1.6}
.fp-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.fp-area{border:var(--line);border-radius:12px;padding:10px;background:var(--paper)}
.fp-area img{width:100%;height:88px;object-fit:contain;background:#fff;border-radius:8px}
.fp-area-txt{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.fp-area-txt b{font-size:13px}
.fp-area-txt span{font-size:12px;color:var(--muted);line-height:1.45}
.fp-areas-tec{margin-top:14px;padding-top:12px;border-top:var(--line-soft);font-size:13px;line-height:1.5}
.fp-areas-tec b{display:block;margin-bottom:2px}
.fp-areas-tec span{color:var(--accent);font-weight:600}
.fp-datasheet{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:9px 16px;border-radius:10px;background:var(--accent,#2f6f4e);color:#fff;font-weight:700;font-size:13.5px;text-decoration:none;transition:opacity .15s}
.fp-datasheet:hover{opacity:.88}

.fp-cta-band{grid-column:1/-1;margin-top:34px;background:var(--ink);color:var(--bg);border-radius:18px;
  padding:30px clamp(22px,4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fp-cta-band h2{color:var(--bg);font-size:26px}
.fp-cta-band p{color:#d9d2c4;font-size:14px;margin-top:4px}

.fp-foot{border-top:var(--soft);padding:22px clamp(16px,4vw,44px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--muted)}
.fp-foot a:hover{color:var(--accent)}

@media(max-width:820px){
  .fp-hero{grid-template-columns:1fr}
  .fp-info{position:static}
  .fp-grid{grid-template-columns:1fr}
}

/* Chips de técnica enlazando a /tecnicas#tec-<slug> */
.fp-chips .chip-link{text-decoration:none;cursor:pointer}
.fp-chips .chip-link:hover{filter:brightness(.95)}