/* Piscinas Barquisimeto · estilos del sitio (home, catálogo y piezas comunes).
   Externo para que la CSP sea style-src 'self' sin 'unsafe-inline'.
   Se versiona con ?v=<hash> desde herramientas/catalogo.py: tras editarlo, correr ese script.
   Modos del home (los pone js/carga.js antes de pintar):
     sin clase / html.quieto → versión fija (sin JS, menos movimiento, Save-Data, 2G/3G o el celular acostado)
     html.mueve             → escenas ligadas al scroll (js/escenas.js)
   Solo se animan transform y opacity (más el clip del portal). Nada de blur animado ni variables CSS en bucle. */

/* ───────── Fuentes propias (solo latín) ───────── */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-v23-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/unbounded-v12-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jetbrainsmono-v24-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f7fbfc; --text:#13272c; --muted:#557277; --line:#e6edee; --card-border:#e7eef0;
  --tinta:#13272c; --tinta2:#0b1a1e; --turq:#14aeba; --turq2:#6bd9df; --turq3:#edf9fa; --turq-deep:#0f7f8a;
  /* acentos de la paleta «mar profundo» (la eligió Steven el 9-nov-2026; ya no hay amarillo ni paletas de prueba):
     sin acento cálido, azul de fondo con blanco (11:1) y aguamarina con tinta (9,4:1). Cada uno con el texto que va encima */
  --sol:#45e0c8; --sol-tx:#13272c;          /* aguamarina: botones de comprar, la cinta, «Pedir precio» del catálogo */
  --sol-claro:#45e0c8;                       /* el acento como texto sobre tinta */
  --bloque:#0d3f63; --bloque-tx:#fff;       /* azul de fondo: el índice y el bloque de constructoras */
  --coral:#bfe9ef; --coral-tx:#13272c;      /* el bloque de hoteles y clubes */
  --sello:#0d3f63;                           /* el sello de la guía, sobre papel (≥ 4,5:1) */
  --origen:#0d3f63;                          /* Barquisimeto en el mapa */
  --shadow:0 12px 40px rgba(28,72,78,.08); --shadow-sm:0 2px 10px rgba(28,72,78,.05);
  --radius:18px; --radius-sm:14px; --max:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:'Unbounded',system-ui,sans-serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;font-family:var(--font-body);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;background:var(--bg);min-height:100vh;overflow-x:hidden}
/* nada se sale de lado; clip no crea contenedor de scroll ni rompe el sticky */
section{overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:600;color:#2f8a92}
.eyebrow.light{color:#bdf5f8}

/* ───────── Botones ───────── */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:.95rem;
  border-radius:10px;padding:13px 20px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn:hover{transform:translateY(-2px)}
/* comprar es siempre esta tecla: aguamarina plana con texto tinta (≈ 9,4:1) y un canto de 2 px que se hunde al tocarla */
.btn-compra{background:var(--sol);color:var(--sol-tx);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.btn-compra:active{transform:translateY(1px);box-shadow:none}
.btn-primary{background:var(--turq-deep);color:#fff}
.btn-ghost{background:#fff;color:var(--text);border-color:var(--card-border)}
.btn-sol{background:var(--sol);color:var(--sol-tx)}
.btn-tinta{background:var(--tinta);color:#fff}
.btn-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-claro:hover{background:rgba(255,255,255,.12)}

/* ───────── Menú (fijo, tinta) ───────── */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:12px 0;pointer-events:none}
.nav-inner{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px 8px 12px;border-radius:18px;
  background:#0f2226;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.16);transition:box-shadow .3s var(--ease)}
header.nav.scrolled .nav-inner{box-shadow:0 14px 34px rgba(0,0,0,.3)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:800;letter-spacing:-.02em;color:#fff}
.brand img{width:40px;height:40px;border-radius:11px;background:#fff;padding:3px}
.brand .bn{display:flex;flex-direction:column;line-height:1.05}
.brand .bn b{font-size:.98rem}
.brand .bn span{font-size:.7rem;font-weight:700;color:var(--turq2);letter-spacing:.08em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:9px 12px;border-radius:11px;font-weight:600;font-size:.9rem;color:#d4e6e9;white-space:nowrap;transition:background .15s ease,color .15s ease}
.nav-links a:hover,.nav-links a[aria-current]{background:rgba(255,255,255,.08);color:#fff}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-cta .btn{padding:10px 16px;font-size:.88rem}
.hamb{display:none;background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:12px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.hamb svg{width:22px;height:22px}
@media(max-width:900px){
  .nav-links{display:none}
  .hamb{display:flex}
  .nav-links.open{display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;padding:10px;border-radius:16px;gap:2px;background:#0f2226;box-shadow:0 20px 40px rgba(0,0,0,.3)}
  .nav-links.open a{padding:13px 14px}
}
@media(max-width:520px){.nav-cta .btn-compra{display:none}.brand .bn b{font-size:.9rem}}

/* ───────── Pantalla de carga (solo con html.con-carga): la aguja aprueba y la cortina sube con borde de ola.
   Una sola animación que termina siempre a los 0,95 s, sin depender de la red (antes había dos y se pisaban). ───────── */
.carga{display:none}
.con-carga .carga{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--tinta2);animation:carga-va .45s .5s cubic-bezier(.7,0,.3,1) forwards}
.con-carga .carga::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:28px;background:url(/img/ola-v1.svg) repeat-x 0 0/160px 28px;transform:scaleY(-1)}
.carga-in{display:grid;justify-items:center;gap:12px}
.manometro{width:136px;height:136px}
.con-carga #aguja{animation:barrer .48s both}
.con-carga .zona-verde{animation:aprueba .2s .22s both}
.carga-logo{width:52px;height:52px;border-radius:14px;background:#fff;padding:4px;opacity:0;animation:aparece .25s .2s var(--ease) forwards}
.carga-lema{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--turq2);opacity:0;animation:aparece .25s .26s var(--ease) forwards}
@keyframes barrer{0%{transform:rotate(-90deg);animation-timing-function:cubic-bezier(.3,.6,.4,1)}45%{transform:rotate(9deg)}62%{transform:rotate(-4deg)}78%{transform:rotate(2deg)}to{transform:rotate(0)}}
@keyframes aprueba{from{opacity:.35}to{opacity:1}}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes carga-va{to{transform:translateY(calc(-100% - 28px));visibility:hidden}}

/* ───────── Escenas: versión fija por defecto; html.mueve las fija con sticky ───────── */
.escena>.fijo{position:relative;overflow:hidden}
.mueve .escena>.fijo{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.mueve .hero{height:210vh}
.mueve .explotada{height:300vh}
.mueve .portal{height:230vh}
.mueve .collage{height:190vh}
@media(max-width:720px){.mueve .hero{height:170vh}.mueve .explotada{height:250vh}.mueve .portal{height:200vh}.mueve .collage{height:150vh}}
.mueve .eco,.mueve .titulo-xl span,.mueve .pieza,.mueve .col-foto,.mueve .hero-medio,.mueve .exp-bomba,.mueve .exp-fondo{will-change:transform}

/* ───────── 1 · Hero: una piscina real (el póster es el LCP; el video entra encima solo cuando ya corre) ───────── */
.hero{position:relative;background:var(--tinta2);color:#fff}
.hero .fijo{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.hero-medio{position:absolute;inset:0;transform-origin:50% 40%}
.hero-poster,.hero-poster img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video{opacity:0}
/* tableta parada: del video ancho se ve una franja; se corre a la derecha, donde nada el nadador */
@media (orientation:portrait) and (min-width:721px){.hero-poster img,.hero-video{object-position:78% 50%}}
.hero-video.corre{opacity:1}
/* la línea de agua: sube desde abajo (escenas.js) hasta tapar el inicio; arriba lleva la ola con su cresta turquesa */
.hero-agua{display:none}
.mueve .hero-agua{display:block;position:absolute;left:0;right:0;top:calc(100% + 12vh);height:100%;z-index:4;background:var(--tinta2);will-change:transform}
.hero-agua .ola{position:absolute;left:0;bottom:calc(100% - 1px);width:200%;height:12vh;background:url(/img/ola-v1.svg) repeat-x 0 100%/auto 100%;will-change:transform}
.hero-capa{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,26,30,.6) 0%,rgba(11,26,30,.1) 28%,rgba(11,26,30,.2) 52%,rgba(11,26,30,.92) 100%),linear-gradient(90deg,rgba(11,26,30,.5),rgba(11,26,30,0) 65%)}
.hero-in{position:relative;z-index:3;padding-top:120px;padding-bottom:max(48px,9vh)}
.hero-titulo{position:relative;font-size:clamp(2.4rem,7.2vw,7.4rem);margin:calc(.9em + 6px) 0 calc(.9em + 16px)}
.titulo-xl,.eco{font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.045em}
.titulo-xl{font-size:1em;color:#fff}
.titulo-xl span{display:block}
/* ecos en relleno translúcido: el contorno de trazo sobre Unbounded mostraba rayas dentro de las letras (E, M, A, R, S) */
.eco{position:absolute;left:0;font-size:1em;color:rgba(107,217,223,.2);white-space:nowrap;pointer-events:none}
.eco-a{top:-.9em}
.eco-b{top:100%}
/* las frases son la cinta de embalaje de PB: plana, extremos dentados, inclinada y con el lema impreso en el borde */
.frases{display:flex;flex-wrap:wrap;gap:10px 8px;margin-bottom:18px;font-size:clamp(1rem,2.6vw,1.65rem)}
.frase{display:inline-block;position:relative;margin:0;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1em;line-height:1.15;letter-spacing:-.01em;
  padding:.22em .9em .5em;border-radius:0;color:var(--sol-tx);rotate:-2deg;
  background:linear-gradient(180deg,transparent 42%,rgba(255,255,255,.22) 42% 50%,transparent 50%) var(--sol);
  clip-path:polygon(0 0,100% 0,98.6% 20%,100% 40%,98.6% 60%,100% 80%,98.6% 100%,0 100%,1.4% 80%,0 60%,1.4% 40%,0 20%)}
.frase::after{content:"PB · EL MAYOR DE PISCINAS · PB · EL MAYOR DE PISCINAS";content:"PB · EL MAYOR DE PISCINAS · PB · EL MAYOR DE PISCINAS"/"";position:absolute;left:.9em;right:.9em;bottom:.12em;
  font:600 max(7px,.3em)/1 var(--font-mono);letter-spacing:.2em;opacity:.45;white-space:nowrap;overflow:hidden}
.mueve .frases{position:relative;display:block;height:2.4em;overflow:hidden}
.mueve .frase{position:absolute;left:0;top:0;bottom:0;height:max-content;margin:auto 0;transform:translateY(150%);transition:transform .55s var(--ease)}
.mueve .frase.activa{transform:none}
.mueve .frase.sale{transform:translateY(-150%)}
.hero-lead{max-width:36ch;color:#d9eef0;font-size:1.02rem;margin-bottom:22px}
.hero-lead b{color:#fff}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:720px){
  .hero-titulo{font-size:10.6vw}
  .hero-cta .btn{flex:1 1 auto}
}

/* ───────── Franja de marcas: oscura (el oscuro sigue sin cortes del inicio a la bomba) y con los logos en blanco.
   Pasan solos (34 s, CSS) y además el scroll los empuja: escenas.js mueve .marcas-vel (más rápido al bajar, hacia
   atrás al subir). Se detiene con el cursor o el dedo. Los SVG son de un solo color: el filtro los deja blancos
   sin perder la forma; PB es un webp y va en su disco blanco. ───────── */
.marcas{background:var(--tinta2);padding:clamp(18px,3vw,30px) 0}
/* con escenas, la franja se monta 20vh sobre el final del inicio: llega sobre el agua que sube (sin pantalla vacía) */
.mueve .marcas{position:relative;z-index:5;margin-top:-20vh}
.marcas-ventana{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marcas-pista{display:flex;width:max-content}
.mueve .marcas-vel{will-change:transform}
.marcas-fila{list-style:none;margin:0;padding:0 clamp(56px,8vw,120px) 0 0;display:flex;align-items:center;gap:clamp(56px,8vw,120px)}
.marcas-fila li{flex:0 0 auto;display:flex;align-items:center}
/* ANPOW y PB con sus colores; Pacelli (letras azul marino) sobre una placa clara discreta; Cloro King y King en blanco */
.marcas-fila img{width:auto;height:64px}
.marcas-fila .m-color img{height:60px}
.marcas-fila .m-placa{padding:9px 16px;border-radius:12px;background:#eef4f4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.marcas-fila .m-placa img{height:46px}
.marcas-fila .m-blanco img{height:68px;filter:brightness(0) invert(1);opacity:.92}
.marcas-fila .m-pb img{width:64px;height:64px;border-radius:50%;background:#fff}
@media (prefers-reduced-motion:no-preference){
  .marcas-pista{animation:marcas 34s linear infinite}
  .marcas:hover .marcas-pista,.marcas:active .marcas-pista,.marcas:focus-within .marcas-pista{animation-play-state:paused}
}
@keyframes marcas{to{transform:translateX(-25%)}}
.quieto .marcas-pista{animation:none}
@media (prefers-reduced-motion:reduce){.marcas-pista{width:auto;justify-content:center}.marcas-fila[aria-hidden]{display:none}.marcas-fila{flex-wrap:wrap;justify-content:center;padding:0 20px;row-gap:18px}}
.quieto .marcas-pista{width:auto;justify-content:center}
.quieto .marcas-fila[aria-hidden]{display:none}
.quieto .marcas-fila{flex-wrap:wrap;justify-content:center;padding:0 20px;row-gap:18px}
@media(max-width:720px){.marcas-fila img{height:50px}.marcas-fila .m-color img{height:46px}.marcas-fila .m-placa{padding:7px 12px}.marcas-fila .m-placa img{height:34px}.marcas-fila .m-blanco img{height:52px}.marcas-fila .m-pb img{width:50px;height:50px}}

/* ───────── 2 · Vista explotada: la ANPOW KP Magnum se desarma en sus 12 repuestos del catálogo. La zona tiene proporción
   fija (1000×650; 1000×1500 en celular) y las líneas guía las dibuja js/escenas.js con las medidas reales. Las piezas
   van detrás de la carcasa (z-index) y salen de su ancla. Sin escenas se ve todo abierto, con las líneas completas.
   Arriba, la placa y el título apilados y con aire antes de los rótulos. ───────── */
.explotada{background:radial-gradient(ellipse 70% 60% at 50% 55%,#2b5c64 0%,var(--tinta2) 72%);color:#fff}
.explotada .fijo{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:84px 0 20px}
.exp-fondo{position:absolute;left:50%;top:52%;translate:-50% -50%;font:800 18vw/1 var(--font-display);letter-spacing:-.04em;color:rgba(107,217,223,.08);white-space:nowrap;pointer-events:none;user-select:none}
.exp-cab{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(94vw,1180px);margin:0 auto 52px;text-align:center}
.exp-cab h2{font-size:clamp(1.6rem,2.6vw,2.8rem);letter-spacing:-.03em;white-space:nowrap}
.exp-cab h2 em{font-style:normal;color:var(--turq2)}
/* la placa del motor: datos reales de la KP2003 */
.placa{position:relative;flex:0 0 auto;display:grid;gap:1px;margin:0;padding:6px 22px;border-radius:3px;background:#cfd8da;color:#22363b;font:600 .7rem/1.3 var(--font-mono);letter-spacing:.05em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.2)}
.placa::before,.placa::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8a979a,#5d6a6d)}
.placa::before{left:8px}.placa::after{right:8px}
.exp-cuerpo{position:relative;width:min(94vw,1180px,calc((100svh - 360px) * 1000 / 650));margin:0 auto;flex:0 0 auto;container-type:inline-size}
.exp-zona{position:relative;width:100%;aspect-ratio:1000/650}
.exp-bomba{position:absolute;z-index:2;left:30%;top:27%;width:40%;transform-origin:50% 60%}
.exp-bomba img{width:100%;height:auto}
/* el video de la bomba (js/escenas.js): cuadros sin fondo en un canvas, más ancho que la foto porque desarmada ocupa
   todo el cuadro. Entra cuando bajó la bomba armada (.con-video); hasta entonces, y sin escenas, la foto de siempre */
.exp-video{display:none}
.con-video .exp-bomba{display:none}
.con-video .exp-video{display:block;position:absolute;z-index:2;left:22%;top:24%;width:56%;height:auto}
/* con el video, cada pieza en el lugar que deja su línea sin cruzarse con las otras: arriba las que se ven en la parte
   de arriba de la bomba (o-ring del visor, rosca del visor, tapa visor, canasta, o-ring de la tapa, capacitor) y abajo
   las del frente (conexiones, difusor, impulsor, sello, porta sello, rosca de bloqueo), cada fila en el orden en que
   aparecen de izquierda a derecha */
.con-video .pz6{top:6%;left:3.5%}.con-video .pz2{top:6%;left:19.9%}.con-video .pz4{top:6%;left:36.3%}
.con-video .pz3{top:6%;left:52.7%}.con-video .pz5{top:6%;left:69.1%}.con-video .pz12{top:6%;left:85.5%}
.con-video .pz7{top:75%;left:3.5%}.con-video .pz8{top:75%;left:19.9%}.con-video .pz9{top:75%;left:36.3%}
.con-video .pz11{top:75%;left:52.7%}.con-video .pz10{top:75%;left:69.1%}.con-video .pz1{top:75%;left:85.5%}
.con-video .pz12 .pz-cap{top:auto;bottom:calc(100% + 6px)}
.con-video .pz1 .pz-cap{top:calc(100% + 6px);bottom:auto}
.exp-bomba img,.pieza img{filter:drop-shadow(0 0 1px rgba(189,245,248,.55)) drop-shadow(0 14px 18px rgba(0,0,0,.5))}
.exp-lineas{position:absolute;z-index:3;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.exp-lineas line{stroke:rgba(107,217,223,.8);stroke-width:1.4}
.exp-lineas circle{fill:var(--tinta2);stroke:var(--turq2);stroke-width:2}
.exp-lineas .ext{fill:var(--turq2);stroke:none}
/* 6 piezas arriba (las de la tapa) y 6 abajo (las del motor), cada una sobre la vertical de su lugar en la bomba */
.pieza{position:absolute;z-index:1;display:block;margin:0;width:11%;height:16.92%;color:inherit}
.pieza img{width:100%;height:100%;object-fit:contain;transition:transform .25s var(--ease)}
.pieza:hover img,.pieza:focus-visible img{transform:scale(1.12)}
.pz-cap{position:absolute;left:-24%;right:-24%;top:calc(100% + 6px);text-align:center;line-height:1.2;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--turq2)}
.pz-cap>b{display:block;font-family:var(--font-body);font-size:.84rem;letter-spacing:0;color:#fff;margin-bottom:2px}
.pz-cap>span{display:block;white-space:nowrap}
.pieza:hover .pz-cap::after,.pieza:focus-visible .pz-cap::after{content:"Pedir ›";content:"Pedir ›"/"";display:block;margin-top:3px;font:700 .8rem/1 var(--font-body);letter-spacing:0;color:var(--sol-claro)}
.pz1,.pz2,.pz3,.pz4,.pz5,.pz6{top:6%}
.pz7,.pz8,.pz9,.pz10,.pz11,.pz12{top:75%}
.pz1 .pz-cap,.pz2 .pz-cap,.pz3 .pz-cap,.pz4 .pz-cap,.pz5 .pz-cap,.pz6 .pz-cap{top:auto;bottom:calc(100% + 6px)}
.pz1,.pz7{left:3.5%}.pz2,.pz8{left:19.9%}.pz3,.pz9{left:36.3%}.pz4,.pz10{left:52.7%}.pz5,.pz11{left:69.1%}.pz6,.pz12{left:85.5%}
.exp-pie{position:relative;z-index:3;margin-top:34px;display:flex;align-items:center;justify-content:center;gap:14px 24px;flex-wrap:wrap}
.exp-pie p{color:#cfe6e9;font-size:.95rem;max-width:46ch}
@media(max-width:900px){
  .exp-cab{gap:10px;width:min(94vw,560px);margin-bottom:40px}
  .exp-cab h2{font-size:clamp(1.45rem,6.6vw,2rem);white-space:normal}
  .explotada .fijo{justify-content:flex-start}
  .exp-cuerpo{width:min(94vw,560px,calc((100svh - 350px) * 1000 / 1500))}
  .exp-zona{aspect-ratio:1000/1500}
  .exp-bomba{left:26%;top:31%;width:48%}
  /* con el video: la bomba a lo ancho entre una fila de 4 piezas arriba y dos abajo (en la columna del medio no cabía) */
  .con-video .exp-video{left:3%;top:22%;width:94%}
  .con-video .pieza{height:13%}
  .con-video .pz2{top:7%;left:1.5%}.con-video .pz4{top:7%;left:26.5%}.con-video .pz3{top:7%;left:51.5%}.con-video .pz12{top:7%;left:76.5%}
  .con-video .pz7{top:60%;left:1.5%}.con-video .pz6{top:60%;left:26.5%}.con-video .pz9{top:60%;left:51.5%}.con-video .pz8{top:60%;left:76.5%}
  .con-video .pz5{top:80%;left:1.5%}.con-video .pz11{top:80%;left:26.5%}.con-video .pz10{top:80%;left:51.5%}.con-video .pz1{top:80%;left:76.5%}
  .con-video .pieza .pz-cap{top:calc(100% + 4px);bottom:auto}
  .con-video .pz2 .pz-cap,.con-video .pz3 .pz-cap,.con-video .pz4 .pz-cap,.con-video .pz12 .pz-cap{top:auto;bottom:calc(100% + 4px)}
  /* 4 arriba, 2 a cada lado de la bomba y 4 abajo */
  .pieza{width:22%;height:14.67%}
  .pz1,.pz2,.pz4,.pz6{top:6%}
  .pz3,.pz5{top:27%}
  .pz7,.pz12{top:52%}
  .pz8,.pz9,.pz10,.pz11{top:78%}
  .pz1,.pz3,.pz7,.pz8{left:1.5%}.pz2,.pz9{left:26.5%}.pz4,.pz10{left:51.5%}.pz6,.pz5,.pz12,.pz11{left:76.5%}
  .pz-cap{left:-6%;right:-6%;top:calc(100% + 4px);bottom:auto;font-size:.7rem;letter-spacing:0}
  .pz3 .pz-cap,.pz5 .pz-cap{top:calc(100% + 4px);bottom:auto}
  .pz1 .pz-cap,.pz2 .pz-cap,.pz4 .pz-cap,.pz6 .pz-cap{top:auto;bottom:calc(100% + 4px)}
  .pz-cap>b{font-size:.74rem;line-height:1.15}
  .exp-pie{margin-top:24px}
  .exp-pie p{display:none}
}

/* celulares chicos y bajos (SE, Android chicos): la bomba y «Ver los repuestos» caben enteros */
/* bajo cada pieza, lo que quepa a su ancho: «Cód.» solo con la bomba de 720 px o más; el código solo si cabe
   (en el celular, con la bomba de 320 px o más; en escritorio, de 500 px o más); el nombre siempre */
@container (max-width:719px){.cod-pre{display:none}}
@container (max-width:319px){.pz-cap>span{display:none}}
@media(min-width:901px){@container (max-width:499px){.pz-cap>span{display:none}}@container (max-width:599px){.pz-cap>b{font-size:.74rem}}}
@media(max-width:400px){.cod-pre{display:none}.exp-cab{margin-bottom:56px}.exp-cuerpo{width:min(94vw,560px,calc((100svh - 370px) * 1000 / 1500))}}
@media (max-width:900px) and (max-height:700px){
  .explotada .fijo{padding-top:72px}
  .exp-cab .placa{display:none}
  .exp-cuerpo{width:min(94vw,560px,calc((100svh - 310px) * 1000 / 1500))}
}

/* portátil bajo (≤ 680 px de alto): sin la placa ni la frase de abajo, para que la bomba quepa entera y más grande */
@media (min-width:901px) and (max-height:680px){
  .exp-cab .placa,.exp-pie p{display:none}
  .exp-cab{margin-bottom:50px}
  .exp-cuerpo{width:min(94vw,1180px,calc((100svh - 310px) * 1000 / 650))}
}

/* celular acostado (versión quieta): la bomba a lo ancho que cabe, sin depender del alto de la pantalla */
@media (orientation:landscape) and (max-height:520px){.exp-cuerpo,.exp-cab{width:min(94vw,520px)}}

/* ───────── 2b · Garantía: al terminar de armarse la bomba, dos sellos de acero (el mismo metal de la placa del motor)
   con el número en aguamarina. Solo lo que dijo Steven: ANPOW 2 años y Pacelli 1 año, sin preguntas. ───────── */
.garantia{background:var(--tinta2);color:#fff;padding:clamp(56px,8vw,96px) 0;border-top:1px solid rgba(107,217,223,.12)}
.garantia-in{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,64px)}
.g-sellos{flex:0 0 auto;display:flex;align-items:center;gap:clamp(8px,1.6vw,20px)}
.sello-g{display:block;width:clamp(128px,15vw,188px);height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.sello-g+.sello-g{width:clamp(96px,11vw,140px)}
.sg-filo{fill:none;stroke:#4c5b5f;stroke-width:1.6}
.sg-arco{font:600 15px var(--font-mono);fill:#22363b}
.sg-centro{fill:#13272c;stroke:#0b1a1e;stroke-width:2}
.sg-num{font:800 66px var(--font-display);fill:var(--sol);text-anchor:middle}
.sg-ud{font:600 17px var(--font-mono);letter-spacing:.18em;fill:#fff;text-anchor:middle}
.g-texto{max-width:34rem}
.g-texto h2{font-size:clamp(1.6rem,3.4vw,2.8rem);letter-spacing:-.03em;line-height:1.02;margin-bottom:14px}
.g-texto h2 em{font-style:normal;color:var(--sol-claro)}
.g-linea{color:#cfe6e9;font-size:clamp(1rem,1.3vw,1.12rem);margin:0 0 8px}
.g-linea b{color:#fff}
@media(max-width:720px){.garantia-in{flex-direction:column;text-align:center;gap:22px}}

/* ───────── 3 · Despacho: sobre la pared oscura, un aro blanco deja ver el mapa; crece igual en los dos ejes hasta llenar
   la pantalla y desde Barquisimeto se dibujan las rutas (stroke-dashoffset, en su propia capa). Sin escenas: el mapa
   completo, sin aro. ───────── */
.portal{color:var(--tinta);background:var(--tinta2)}
.portal .fijo{min-height:100vh;min-height:100svh;background:radial-gradient(circle at 50% 50%,rgba(20,174,186,.35),transparent 45%) var(--tinta2)}
.portal-mapa{position:absolute;inset:0;background:var(--turq);overflow:hidden}
/* el mapa (el país entero, 1000×852) entre el título (una línea en escritorio) y la frase de abajo; es contenedor: los
   nombres de los estados y sus líneas guía salen solo si el mapa mide 650 px o más (así nunca quedan por debajo de 11 px) */
.mapa-lienzo{position:absolute;left:50%;top:calc(50% + 24px);width:min(100vw,calc((100svh - 270px) * 1000 / 852));aspect-ratio:1000/852;translate:-50% -50%;container-type:inline-size}
.mapa-tierra{position:absolute;inset:0;width:100%;height:100%}
.mapa-rutas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mueve .mapa-lienzo,.mueve .mapa-rutas{will-change:transform}
.ruta{fill:none;stroke:var(--tinta);stroke-width:2.5;stroke-linecap:round}
.destino{fill:var(--tinta)}
.bqto{fill:var(--origen);stroke:#fff;stroke-width:3}
.ciudad{font:700 19px var(--font-body);fill:var(--tinta);paint-order:stroke;stroke:#e9f6f7;stroke-width:5px;stroke-linejoin:round}
/* el nombre de cada estado, con un halo del color de la tierra para que las rutas no lo tapen; los del centro, afuera
   y con su línea guía. Siempre a la vista (antes dependían de un @container y Safari no lo aplica dentro del SVG:
   Steven no veía ninguno). El tamaño va en unidades del mapa: en celular más grandes porque el mapa es más chico */
.estado{font:600 17px var(--font-body);fill:var(--tinta);paint-order:stroke;stroke:#e9f6f7;stroke-width:4px;stroke-linejoin:round}
.guia{stroke:var(--tinta);stroke-width:1.3;stroke-linecap:round}
@media (min-width:721px) and (max-height:800px){.estado{font-size:20px}}
@media (max-height:600px){.mapa-lienzo{top:50%;width:min(100vw,115svh)}}
.portal-boca,.portal-antes{display:none}
.mueve .portal-boca{display:block;position:absolute;left:50%;top:50%;z-index:2;width:min(62vw,420px);aspect-ratio:1;translate:-50% -50%;
  border:clamp(8px,1.2vw,14px) solid #eef6f6;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.18),0 24px 60px rgba(0,0,0,.35)}
.mueve .portal-antes{display:block;position:absolute;left:0;right:0;top:calc(50% + min(31vw,210px) + 22px);z-index:2;text-align:center;
  font-family:var(--font-body);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.8rem;color:#bdf5f8}
.portal-texto h2{position:absolute;left:0;right:0;top:calc(84px + 2vh);z-index:3;padding:0 20px;text-align:center;text-transform:uppercase;
  font-size:clamp(1.5rem,3.7vw,3.6rem);letter-spacing:-.035em;line-height:.98;color:var(--tinta)}
.portal-texto p{position:absolute;left:0;right:0;bottom:7%;z-index:3;margin:0 auto;padding:0 20px;max-width:40ch;text-align:center;color:var(--tinta);font-weight:700;font-size:clamp(1rem,1.4vw,1.25rem)}
@media(max-width:720px){
  .mapa-lienzo{top:50%;width:100vw}
  .ruta{stroke-width:5}
  .bqto{stroke-width:5;r:18px}
  .destino{r:9px}
  .ciudad{font-size:34px;stroke-width:9px}
  .estado{font-size:25px;stroke-width:6px}
  .guia{stroke-width:2.4}
}

/* ───────── Bloques de color ───────── */
.bloque{padding:clamp(64px,10vw,120px) 0}
.sol{background:var(--bloque);color:var(--bloque-tx)}
.sol .sec-head p{color:inherit}
.tinta{background:var(--tinta);color:#fff}
.turq{background:var(--turq);color:var(--tinta)}
.sec-head{max-width:720px;margin:0 0 34px}
.sec-head h2{font-size:clamp(1.7rem,4.2vw,3.2rem);margin:14px 0 12px;letter-spacing:-.03em}
.sec-head p{font-size:1.05rem;color:#45646a;max-width:56ch}
.turq .sec-head p{color:var(--tinta)}

/* 4 · ¿Qué te toca reponer? — una categoría por línea; al pasar el cursor la línea se llena de tinta desde la izquierda */
#categorias{padding:clamp(56px,8vw,96px) 0}
#categorias .sec-head{margin-bottom:22px}
.indice{list-style:none;margin:0;padding:0;border-top:2px solid var(--bloque-tx)}
.indice a{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:16px;padding:14px 6px 12px;border-bottom:2px solid var(--bloque-tx);color:var(--bloque-tx);transition:color .3s var(--ease)}
.indice a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tinta);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.indice a:hover::before,.indice a:focus-visible::before{transform:none}
.indice a:hover,.indice a:focus-visible{color:var(--sol-claro)}
.ix-nom{min-width:0;font:800 clamp(2.2rem,7vw,6.4rem)/.95 var(--font-display);text-transform:uppercase;letter-spacing:-.04em}
.ix-dato{grid-column:1;margin-top:8px;font:600 .74rem/1.4 var(--font-mono);letter-spacing:.03em}
.ix-n{grid-row:1;grid-column:2;font:800 clamp(1.1rem,2.6vw,2.2rem)/1 var(--font-display);font-variant-numeric:tabular-nums}
@media(max-width:720px){.ix-nom{font-size:8.6vw}}   /* «ACCESORIOS» entra entero en 360 px */

/* 5 · para quién vendemos */
.mayoristas{padding-bottom:0}
.aud-bloques{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.aud{position:relative;overflow:hidden;isolation:isolate;padding:clamp(28px,4vw,46px) clamp(22px,2.6vw,34px);min-height:clamp(260px,28vw,360px);display:flex;flex-direction:column;gap:12px;justify-content:flex-start}
/* el producto se sale por la esquina y se endereza al entrar */
.aud-foto{position:absolute;z-index:-1;right:-6%;bottom:-8%;width:40%;height:auto;transform:rotate(-4deg);transition:transform .9s var(--ease) .15s;pointer-events:none;filter:drop-shadow(0 14px 16px rgba(0,0,0,.28))}
.aud:hover .aud-foto,.aud:focus-visible .aud-foto,html.js .aud.reveal.in:hover .aud-foto{transform:rotate(-2deg) translateY(-6px)}
.aud h3{font-size:clamp(1.25rem,2.1vw,1.8rem);text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.aud p{font-size:.95rem;max-width:min(22ch,55%)}
.b-turq{background:var(--turq);color:var(--tinta)}
.b-tinta{background:var(--tinta);color:#fff}
.b-tinta p{color:#cfe6e9}
.b-sol{background:var(--bloque);color:var(--bloque-tx)}
.b-coral{background:var(--coral);color:var(--coral-tx)}
@media(max-width:1100px){.aud-bloques{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.aud-bloques{grid-template-columns:1fr}.aud{min-height:220px}.aud-foto{width:34%}}

/* 6 · la guía de despacho: papel hueso un poco inclinado, borde troquelado arriba y el sello que cae al final */
#como .sec-head{text-align:center;margin:0 auto 30px}
.guia{position:relative;max-width:720px;margin:0 auto;background:#fbf7ee;color:var(--tinta);padding:44px clamp(20px,4vw,44px) 120px;rotate:-1deg;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.guia::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;background:radial-gradient(circle at 8px 6px,var(--tinta) 5px,transparent 5.5px) 0 0/16px 12px repeat-x}
.guia-tit{font:800 clamp(1.1rem,2.4vw,1.5rem)/1 var(--font-display);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:14px}
.guia dl{margin:0}
.g-fila{display:grid;grid-template-columns:11em 1fr;gap:12px;padding:12px 0;border-top:1px dashed rgba(19,39,44,.25)}
.g-fila dt{font:600 .72rem/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#4c6a70;padding-top:2px}
.g-fila dd{margin:0;font-weight:600;font-size:1rem;line-height:1.45}
.sello{position:absolute;right:7%;bottom:18px;display:grid;justify-items:center;padding:8px 14px;border:3px double var(--sello);border-radius:6px;color:var(--sello);
  font:800 1rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em;rotate:-9deg;pointer-events:none;mix-blend-mode:multiply}
.sello span{font:600 .62rem/1.4 var(--font-mono);letter-spacing:.2em;margin-top:4px}
.guia-accion{display:flex;justify-content:center;margin-top:34px}
@media(max-width:720px){.g-fila{grid-template-columns:1fr;gap:2px}}
@keyframes sellar{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}

/* ───────── 8 · Vitrina sobre el pedestal ───────── */
.vitrina-sec{background:radial-gradient(ellipse 70% 55% at 50% 52%,#1f454c 0%,var(--tinta2) 70%);color:#fff;padding:clamp(70px,10vw,120px) 0}
.vitrina-sec .sec-head p{color:#cfe6e9}
.vitrina{display:grid;gap:18px;justify-items:center;text-align:center}
.vit-escenario{position:relative;width:100%;height:clamp(300px,46vw,470px)}
/* sin JS: tira con scroll lateral */
.vit-lista{list-style:none;margin:0;padding:0 0 10px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;height:100%}
.vit-item{flex:0 0 min(64vw,360px);scroll-snap-align:center;display:flex;align-items:flex-end;justify-content:center}
.vit-item img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.45))}
.pedestal{display:none}
/* con JS: escenario con pedestal de azulejo. El escenario es un contenedor (cqh = 1 % de su alto). El pedestal mide 28 %
   de alto y su cara de arriba (la elipse) el 52 % de eso: 14,56 %, con el centro a 20,72 % del piso y 7,28 % de medio
   alto. La lista termina en ese centro y cada foto (recortada sin margen abajo) baja --baja × 7,28 % (0 = centro,
   1 = borde de adelante): así la huella de su base queda centrada en la cara de arriba, sin salirse por delante del
   borde ni flotar. Su sombra de contacto va justo bajo el pie, del ancho de lo que toca el piso (--pc y --pw: centro y
   ancho en fracción del ancho de la foto, que mide --iw) y --esc achica la foto desde el pie si no cabe (tumbonas).
   Los datos salen de data-pie (herramientas/catalogo.py). */
.vit-js .vit-escenario{touch-action:pan-y;container-type:size}
.vit-js .vit-lista{display:block;overflow:visible;position:absolute;inset:0 0 20.72% 0;height:auto;padding:0}
.vit-js .vit-item{--ancho:min(62vw,420px);--iw:min(var(--ancho),79.28cqh * var(--ar,1));--pie:calc(var(--baja,.35) * 7.28cqh);
  position:absolute;left:50%;bottom:0;width:var(--ancho);height:100%;margin-left:calc(var(--ancho) / -2);transition:transform .7s var(--ease),opacity .5s var(--ease)}
.vit-js .vit-item img{translate:0 var(--pie);scale:var(--esc,1);transform-origin:50% 100%;filter:drop-shadow(0 4px 5px rgba(0,0,0,.35))}
/* foco fijo desde arriba y la sombra donde el producto se apoya */
.vit-escenario::before{content:"";position:absolute;inset:-12% 0 0;pointer-events:none;background:conic-gradient(from 180deg at 50% -10%,transparent 160deg,rgba(189,245,248,.14) 175deg 185deg,transparent 200deg)}
.vit-js .vit-item::after{content:"";position:absolute;z-index:-1;left:calc(50% + (var(--pc,.5) - .5) * var(--iw) * var(--esc,1));bottom:calc(-1 * var(--pie));
  width:calc(var(--pw,.6) * var(--iw) * var(--esc,1) * 1.1);height:calc(var(--pw,.6) * var(--iw) * var(--esc,1) * .16 + 8px);translate:-50% 50%;
  background:radial-gradient(closest-side,rgba(3,14,17,.72),rgba(3,14,17,.3) 55%,transparent)}
.vit-js .pedestal{display:block;position:absolute;left:50%;bottom:0;width:min(80vw,500px);height:28%;translate:-50% 0}
.ped-top{position:absolute;left:0;right:0;top:0;height:52%;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#a6f0f3 0%,#1c9aa4 55%,#0f6a73 100%);box-shadow:0 0 70px rgba(107,217,223,.28)}
.ped-cara{position:absolute;left:0;right:0;top:26%;bottom:0;border-radius:0 0 50% 50% / 0 0 35% 35%;background-color:#0f7480;
  background-image:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5)),url(/img/mosaico-v1.svg);background-size:100% 100%,30px 30px}
.vit-flecha{position:absolute;top:40%;z-index:20;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(11,26,30,.7);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s ease}
.vit-flecha:hover{background:var(--turq-deep)}
.vit-flecha svg{width:20px;height:20px;stroke:currentColor}
.vit-flecha[hidden]{display:none}
.vit-prev{left:0}.vit-next{right:0}
.vit-info{display:grid;gap:6px;justify-items:center;min-height:120px;align-content:start}
.vit-cat{font-family:var(--font-body);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--turq2)}
.vit-nombre{font-size:clamp(1.2rem,3.4vw,2.3rem);letter-spacing:-.02em;max-width:24ch;line-height:1.08;overflow-wrap:anywhere}
.vit-cod{font-family:var(--font-mono);font-size:.78rem;color:#bdd7da}
.vit-cod b{color:#fff}
/* la garantía de la marca (Pacelli 1 año, ANPOW 2 años, sin preguntas): una plaquita de acero como la del motor */
.vit-gar{margin:4px 0 0;padding:4px 14px;border-radius:3px;background:#cfd8da;color:#22363b;font:600 .72rem/1.4 var(--font-mono);letter-spacing:.05em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.2)}
.vit-gar[hidden]{display:none}
.vit-acciones{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.vit-ver{display:inline-flex;align-items:center;min-height:44px;color:#bdf5f8;font-weight:700;text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion:no-preference){.vit-nombre.cambia{animation:sube .5s var(--ease)}}
@media (prefers-reduced-motion:reduce){.vit-js .vit-item{transition:none}}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ───────── 9 · Collage ───────── */
.collage{background:#e9f6f7;color:var(--tinta)}
.collage .fijo{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:100px 0 60px}
.col-fotos{position:absolute;inset:0}
/* mercancía recortada, sin tarjeta, con la sombra de la vitrina; tres profundidades */
.col-foto{position:absolute;width:clamp(96px,14vw,200px);aspect-ratio:1}
.col-foto img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(19,39,44,.28));transition:transform .3s var(--ease)}
.col-foto:hover img,.col-foto:focus-visible img{transform:scale(1.06)}
.z-cerca{width:clamp(130px,19vw,270px);z-index:1}
.z-lejos{width:clamp(70px,10vw,140px);opacity:.85}
.cf1{left:5%;top:16%;rotate:-7deg}.cf2{left:23%;top:9%;rotate:5deg}.cf3{right:24%;top:11%;rotate:-4deg}.cf4{right:5%;top:18%;rotate:8deg}
.cf5{left:4%;bottom:12%;rotate:6deg}.cf6{left:21%;bottom:4%;rotate:-6deg}.cf7{right:22%;bottom:5%;rotate:5deg}.cf8{right:4%;bottom:13%;rotate:-8deg}.cf9{left:44%;bottom:2%;rotate:3deg}
.col-centro{position:relative;z-index:2;text-align:center;max-width:640px;padding:0 20px;display:grid;gap:16px;justify-items:center}
.col-centro h2{font-size:clamp(1.7rem,4.6vw,3.4rem);letter-spacing:-.03em}
.col-num{display:block;font-size:2.3em;line-height:.9;color:var(--turq-deep);letter-spacing:-.05em}
@media(max-width:720px){
  .col-foto{width:30vw}.z-cerca{width:36vw}.z-lejos{width:22vw}
  .cf1{left:3%;top:calc(84px + 2%)}.cf2{left:39%;top:calc(84px + 2%)}.cf3{right:3%;top:calc(84px + 4%)}
  .cf5{left:3%;bottom:9%}.cf6{left:37.5%;bottom:4%}.cf7{right:3%;bottom:10%}
  .cf4,.cf8,.cf9{display:none}
}

/* ───────── 10 · Cierre ───────── */
.cierre{position:relative;color:#fff;padding:clamp(90px,14vw,170px) 0;text-align:center}
.cierre-in{position:relative;z-index:2;display:grid;gap:22px;justify-items:center}
.apilado{font-size:clamp(1.9rem,8vw,7rem);text-transform:uppercase;line-height:.92;letter-spacing:-.045em}
.apilado span{display:block}
.mueve .apilado span{will-change:transform}
.apilado .eco{position:static;color:rgba(255,255,255,.2)}
.cierre p{max-width:46ch;color:#e3f6f7;font-size:1.05rem}
.cierre .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cierre .cierre-horario{font-size:.9rem;font-weight:600;color:#e3f6f7;margin:0}

/* ───────── Videos de fondo (los monta app.js al acercarse) ───────── */
/* clip y no hidden: hidden vuelve la sección contenedor de scroll y el sticky del portal deja de pegarse */
.vsec{position:relative;overflow:clip;isolation:isolate}
.vfondo{position:absolute;inset:0;z-index:0;background:#0d3a40}
.vfondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcapa{position:absolute;inset:0;z-index:1;pointer-events:none}
.vcapa-turq{background:linear-gradient(160deg,rgba(8,62,69,.72),rgba(12,100,110,.6))}
.vpausa{position:absolute;left:16px;bottom:16px;z-index:4;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(10,32,37,.45);color:#fff;display:grid;place-items:center;cursor:pointer}
.vpausa[hidden]{display:none}
.vpausa svg{width:15px;height:15px;fill:currentColor}
.vpausa .i-play,.vpausa[aria-pressed="true"] .i-pausa{display:none}
.vpausa[aria-pressed="true"] .i-play{display:block}
@media (prefers-reduced-motion:no-preference){
  html.js .vfondo video{opacity:0;transform:scale(1.06);transition:opacity 1.1s var(--ease),transform 1.6s var(--ease)}
  html.js .vsec.visto .vfondo video{opacity:1;transform:none}
}

/* ───────── Banda final (página del catálogo) ───────── */
.cta-band{position:relative;padding:48px 40px;border-radius:32px;text-align:center;overflow:hidden;background:var(--tinta);color:#fff}
.cta-band h2{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.03em;margin-bottom:12px}
.cta-band p{color:#e6feff;font-size:1.08rem;max-width:560px;margin:0 auto 26px}
.cta-band .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-band .btn-ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}

/* ───────── Pie ───────── */
footer{padding:50px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.foot-brand img{width:52px;height:52px;border-radius:14px;background:#fff;padding:4px;box-shadow:var(--shadow-sm);margin-bottom:12px}
.foot-brand b{font-size:1.1rem}
.foot-brand p{color:var(--muted);font-size:.92rem;max-width:300px;margin-top:6px}
.foot-col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:#2f8a92;margin:0 0 14px;font-weight:800}
.foot-col a,.foot-col p{display:flex;align-items:center;gap:9px;color:#45646a;font-size:.93rem;margin-bottom:11px;font-weight:500}
.foot-col a:hover{color:var(--turq-deep)}
.foot-col svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--turq)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:20px;color:var(--muted);font-size:.85rem}
.foot-legal a{color:var(--turq-deep);font-weight:600}
.foot-col svg.g-wa{fill:var(--turq);stroke:none}
.pie{background:var(--tinta2);color:#cfe3e6;padding:64px 0 0;overflow:hidden}
.pie .foot-grid{border-bottom-color:rgba(255,255,255,.12)}
.pie .foot-col h4{color:var(--turq2)}
.pie .foot-col a,.pie .foot-col p{color:#cfe3e6}
.pie .foot-col a:hover{color:#fff}
.pie .foot-brand p,.pie .foot-bottom{color:#a9c5c9}
.pie .foot-legal a{color:var(--turq2)}
.pie .foot-col svg.g-wa{fill:var(--turq2)}
.pie .foot-bottom{padding-bottom:26px}
/* firma del pie: el logo real de PB en su disco blanco, con tres ondas de agua alrededor, y las reseñas en Google */
.pie-firma{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px clamp(24px,4vw,56px);padding:clamp(20px,3vw,36px) 0;border-bottom:1px solid rgba(255,255,255,.12)}
.pf-logo{width:clamp(112px,12vw,156px);height:auto;aspect-ratio:1;margin:30px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 7px rgba(107,217,223,.16),0 0 0 16px rgba(107,217,223,.07),0 0 0 28px rgba(107,217,223,.03)}
.pf-ojo{font:600 .74rem/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--turq2)}
.pf-tit{margin-top:8px;max-width:22ch;font:800 clamp(1.25rem,2.3vw,2rem)/1.08 var(--font-display);text-transform:uppercase;letter-spacing:-.02em;color:#fff}
.pf-acc{display:flex;flex-direction:column;gap:10px}
@media(max-width:900px){.pie-firma{grid-template-columns:auto minmax(0,1fr)}.pf-acc{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;margin-bottom:24px}}
@media(max-width:560px){.pie-firma{grid-template-columns:1fr;justify-items:center;text-align:center}.pf-tit{margin-inline:auto}.pf-acc{width:100%}.pf-acc .btn{flex:1 1 100%}}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr}}
/* toques de 44 px en celular y tablet; la pausa del video sale de la zona del pulgar */
@media (max-width:720px), (pointer:coarse){
  .foot-col a{min-height:44px;margin:0}
  .foot-legal a{display:inline-block;padding:12px 4px}
  .vpausa{width:44px;height:44px}
}
@media(max-width:720px){.vpausa{left:auto;bottom:auto;top:84px;right:16px}}

/* ───────── WhatsApp flotante y aviso de cookies ───────── */
/* el verde queda solo aquí; se esconde cuando ya hay un botón de compra a la vista (body.wa-oculto, app.js) */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.28);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px;fill:var(--tinta2)}
.wa-oculto .wa-float{transform:translateY(140%);opacity:0;pointer-events:none}
/* Sin número de WhatsApp (WA vacío en app.js) no se ofrece WhatsApp en ningún lado: los botones de compra caen a
   #contacto sin su glifo y el flotante no sale. html.hay-wa la pone app.js solo si hay número. */
html:not(.hay-wa) .solo-wa,html:not(.hay-wa) .g-wa,html:not(.hay-wa) .wa-float,.hay-wa .sin-wa{display:none}
/* aviso de cookies: una sola línea (≤ 64 px), sale al llegar a las marcas; en celular va encima del flotante */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;padding:9px 12px;border-radius:14px;background:#fff;border:1px solid var(--card-border);box-shadow:var(--shadow)}
.cookie-banner[hidden]{display:none}
.cookie-banner p{font-size:.8rem;line-height:1.35;color:#3f5e63;flex:1 1 auto;margin:0}
.cookie-banner a{color:var(--turq-deep);font-weight:700;text-decoration:underline}
.cookie-actions{display:flex;gap:8px;flex:0 0 auto}
.cookie-actions .btn{min-height:44px;padding:0 13px;font-size:.84rem}
.cookie-actions .btn-primary{background:var(--turq-deep);box-shadow:none}
@media(max-width:720px){.hay-wa .cookie-banner{bottom:88px}}

/* ───────── Revelado al hacer scroll (app.js; el ocultado solo aplica con html.js) ───────── */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease) var(--rd,0s),transform .9s var(--ease) var(--rd,0s)}
  html.js .reveal.in{opacity:1;transform:none}
  html.js .sello.reveal{opacity:0;transform:scale(1.6)}
  html.js .sello.reveal.in{animation:sellar .32s cubic-bezier(.3,1.5,.5,1) .5s both}
  html.js .aud.reveal .aud-foto{transform:translateY(30%) rotate(-12deg)}
  html.js .aud.reveal.in .aud-foto{transform:rotate(-4deg)}
  /* las líneas del índice entran desde lados alternos */
  html.js .indice .reveal{transform:translateX(-6vw)}
  html.js .indice li:nth-child(even).reveal{transform:translateX(6vw)}
  html.js .indice li.reveal.in{transform:none}
  /* los títulos salen del agua: una máscara que se abre desde la línea de abajo; una sola vez, sin tocar la opacidad */
  html.js .sec-head h2.reveal{opacity:1;clip-path:inset(-.2em -.1em 100% -.1em);transform:translateY(.4em);
    transition:clip-path .65s cubic-bezier(.22,1,.36,1) var(--rd,0s),transform .65s cubic-bezier(.22,1,.36,1) var(--rd,0s)}
  html.js .sec-head h2.reveal.in{clip-path:inset(-.2em -.1em -.2em -.1em);transform:none}
}

/* ───────── Página /catalogo/ ───────── */
.cat-hero{background:var(--tinta);color:#fff;padding:128px 0 48px}
.cat-hero h1{font-size:clamp(1.9rem,4.8vw,3.4rem);letter-spacing:-.03em;margin:16px 0 14px;max-width:18ch}
.cat-hero .lead{font-size:1.05rem;color:#cfe6e9;max-width:60ch;margin-bottom:22px}
.cat-zona{padding:34px 0 30px}
.cat-barra{display:grid;gap:14px;margin-bottom:30px}
.buscador{position:relative;max-width:560px}
.buscador svg{position:absolute;left:15px;top:50%;width:19px;height:19px;transform:translateY(-50%);stroke:#557277;pointer-events:none}
.buscador input{width:100%;font:inherit;font-size:1rem;color:var(--text);background:#fff;border:1px solid var(--card-border);border-radius:14px;padding:13px 16px 13px 44px;box-shadow:var(--shadow-sm);-webkit-appearance:none;appearance:none}
.buscador input:focus{outline:none;border-color:var(--turq);box-shadow:0 0 0 4px rgba(20,174,186,.18)}
.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtro{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 14px;border-radius:12px;border:1px solid var(--card-border);background:#fff;color:#3a5a60;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.filtro span{font-family:var(--font-mono);font-size:.7rem;color:#557277;font-variant-numeric:tabular-nums}
.filtro:hover{border-color:rgba(20,174,186,.45)}
.filtro[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:#fff}
.filtro[aria-pressed="true"] span{color:#9fe3e8}
.cat-estado{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#557277}
.cat-grupo{margin-bottom:46px;scroll-margin-top:100px}
.cat-grupo[hidden],.pcard[hidden]{display:none}
.cat-grupo-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;font-size:clamp(1.25rem,2.4vw,1.6rem);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cat-grupo-t span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#557277}
/* fichas parejas: el mismo recuadro de foto (1:1, la foto entera y centrada, sin depender de su tamaño original),
   la misma altura en cada fila y «Pedir precio» alineado abajo */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.pcard{background:#fff;border:1px solid var(--card-border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column}
.pcard-foto{position:relative;flex:0 0 auto;aspect-ratio:1;min-height:0;overflow:hidden;display:grid;place-items:center;background:#fff;border-bottom:1px solid var(--line)}
.pcard-foto img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain}
.pcard-foto.sin-foto{background:var(--turq3);color:#557277;text-align:center;align-content:center;gap:10px}
.sin-foto .sin-wa{font-family:var(--font-mono);font-weight:600;font-size:clamp(.9rem,3vw,1.15rem);letter-spacing:.06em;color:#8fb0b4;overflow-wrap:anywhere}
.pcard-pidefoto{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--turq);color:var(--turq-deep);font-weight:700;font-size:.82rem}
.pcard-body{flex:1 1 auto;padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px}
.pcard h3{font-family:var(--font-body);font-size:.88rem;font-weight:800;letter-spacing:0;line-height:1.3;overflow-wrap:anywhere}
.pcard-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.74rem;color:#557277}
.pcard-meta b{font-family:var(--font-mono);font-weight:600;color:var(--text);overflow-wrap:anywhere}
.pcard summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--turq-deep);font-size:.82rem;padding:4px 0}
.pcard summary::-webkit-details-marker{display:none}
.pcard summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.pcard details[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.pcard .menos,.pcard details[open] .mas{display:none}
.pcard details[open] .menos{display:inline}
.pcard details p{white-space:pre-line;color:#45646a;font-size:.84rem;line-height:1.55;margin-top:6px}
.pcard-wa{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;min-height:44px;font-size:.82rem;font-weight:700;color:var(--sol-tx);background:var(--sol);border-radius:10px;padding:0 14px;box-shadow:0 2px 0 rgba(0,0,0,.28)}
.pcard-wa:active{transform:translateY(1px);box-shadow:none}
.cat-vacio{padding:40px 20px;text-align:center;border:1px dashed var(--card-border);border-radius:var(--radius);color:#45646a;background:#fff;display:grid;gap:14px;justify-items:center}
.cat-vacio[hidden]{display:none}
.cat-zona+section{padding:20px 0 60px}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .filtros::-webkit-scrollbar{display:none}
  .filtro{flex:0 0 auto}
  .pcard-body{padding:12px}
  .pcard h3{font-size:.82rem}
  .cta-band{padding:36px 22px}
  .cta-band .btn{flex:1 1 100%}
}