/* Estilos de las páginas de primaxgasdelivery.com.
   Vivían incrustados en el <style> de la portada. Al salir a su propio
   archivo: se cachean, y una página nueva cuesta un <link>, no copiar y
   pegar 300 líneas —que es como se desincronizan los sitios—. */
:root{
  --naranja:#F86500; --brasa:#FF8A2B; --fuego:#D34E00; --naranja-t:#C2410C;
  --nata:#F1F4F8; --crema:#FFFFFF;
  --azul:#011536; --azul-2:#0a2148; --humo:#5A677A;
  --display:"Archivo",system-ui,sans-serif;
  --texto:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
/* El grano va en el fondo de la página Y en las bandas de color: si solo
   estuviera en el body, cada banda lo taparía y la textura desaparecería justo
   donde más se nota. Un tile de 160 px, se cachea una vez. */
/* Sobre el BLANCO el grano va suave. Es donde más se ve —el ruido oscuro sobre
   fondo claro salta mucho más que sobre el azul— y donde vive el texto largo de
   la página. En el azul se queda el grano fuerte, que es donde da el papel. */
body{margin:0;background:var(--crema);color:var(--azul);
  font-family:var(--texto);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  line-height:.95;margin:0;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:3px solid var(--brasa);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- cabecera ----------
   Flota SOBRE el héroe en vez de robarle una franja azul antes de empezar. Esa
   franja era lo primero que se veía al abrir el sitio y, hasta que uno deslizaba,
   ocupaba pantalla sin decir nada. Ahora el héroe arranca en el píxel cero y la
   cabecera va encima, sostenida por un velo oscuro —no por un fondo— para que el
   logo se lea igual aunque debajo pase la parte clara de la foto.
   Al deslizar se vuelve sólida: ahí ya no hay foto detrás y sí hace falta. */
.cab{position:fixed;top:0;left:0;right:0;z-index:30;color:#fff;
  background-color:transparent;
  background-image:linear-gradient(180deg,rgba(1,21,54,.62) 0%,
    rgba(1,21,54,.34) 55%,rgba(1,21,54,0) 100%);
  transition:background-color .28s ease,box-shadow .28s ease}
.cab--solida{background-color:var(--azul);background-image:url("/textura-film.png");
  box-shadow:0 2px 18px rgba(1,21,54,.28)}
.cab .logo .chispa{background:var(--brasa)}
/* Una sola fila. Con `flex-wrap` la cabecera se partía en tres líneas en el
   móvil y el azul se comía media pantalla antes de que apareciera el héroe. */
.cab-in{max-width:74rem;margin:0 auto;padding:.55rem 1rem;
  display:flex;align-items:center;gap:.7rem;flex-wrap:nowrap}
.logo{font-family:var(--display);font-weight:800;font-size:1.05rem;
  letter-spacing:-.03em;display:flex;align-items:center;gap:.45rem;flex:none;
  min-height:2.5rem;text-decoration:none}
.logo .chispa{width:.6rem;height:.6rem;border-radius:50%;background:var(--naranja);
  box-shadow:0 0 0 .24rem rgba(248,101,0,.22);flex:none}
/* El logotipo PGD del dueño. Su disco blanco es justo lo que lo hace legible
   sobre la cabecera transparente del héroe (naranja) y sobre la cabecera sólida
   de las demás páginas, sin tener que servir dos versiones. */
.logo-pgd{width:2.5rem;height:2.5rem;flex:none;object-fit:contain}
/* El contenedor ya NO recorta: recortaba el control de distrito entero y se
   llevaba por delante la parte pulsable. Lo que se encoge es el nombre, dentro
   del botón. */
.cab .zona{margin-left:auto;font-size:.8rem;color:#c3cee0;min-width:0;
  display:flex;justify-content:flex-end}
.cab-carrito{display:inline-flex;align-items:center;gap:.45rem;border:0;flex:none;
  background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:.85rem;
  font-weight:600;padding:.55rem .85rem;min-height:2.5rem;border-radius:999px;
  cursor:pointer;transition:background .15s}
.cab-carrito:hover{background:rgba(255,255,255,.22)}
/* Entrar va al lado del carrito, con su misma forma: un solo tipo de botón en la cabecera. */
.cab-entrar{margin-right:.4rem}
.cab-entrar span{max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-carrito b[hidden]{display:none}
.cab-carrito b{background:var(--naranja);color:var(--azul);border-radius:999px;
  min-width:1.3rem;height:1.3rem;display:inline-flex;align-items:center;
  justify-content:center;font-size:.75rem;font-weight:800;padding:0 .35rem}
/* En pantalla chica el nombre de la marca CEDE el ancho, y lo cede al control
   de distrito. Antes `.logo` era `flex:none`: entre «Primax Gas Delivery» y el
   carrito no quedaban ni 110 px, y el botón de distrito —que necesita unos
   140— se recortaba a «Eli…». Se veía así en el móvil a 390.
   Importa más desde que el diálogo de distrito ya no salta al entrar: este
   botón pasó de ser un atajo a ser LA forma de elegir distrito sin agregar
   nada, y un control ilegible no es un control. La marca no se pierde: el
   logotipo sigue entero y sigue llevando a la portada. */
@media (max-width:34rem){
  .cab-carrito span{display:none}
  .logo{flex:0 1 auto;min-width:2.5rem}
  .logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cab .zona{flex:none;margin-left:auto}
}

/* Botón de distrito: área táctil completa, nunca menos de 44 px de alto. */
.gc-zona-btn{display:inline-flex;align-items:center;gap:.3rem;min-width:0;
  max-width:min(52vw,14rem);border:0;background:rgba(255,255,255,.1);
  color:#dbe4f0;font:inherit;font-size:.8rem;font-weight:600;
  padding:.55rem .75rem;min-height:2.5rem;border-radius:999px;cursor:pointer;
  transition:background .15s,color .15s}
.gc-zona-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.gc-zona-btn svg{width:.95em;height:.95em;flex:none}
.gc-zona-pin{color:var(--brasa)}
/* El chevron es lo que convierte el texto en control. Va algo tenue para no
   competir con el nombre del distrito, pero presente. */
.gc-zona-abre{width:.8em;height:.8em;opacity:.75;margin-left:-.05rem}
.gc-zona-btn--pide .gc-zona-pin{color:var(--azul)}
.gc-zona-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Sin distrito elegido pasa a naranja: es la única acción pendiente en la
   cabecera y tiene que leerse como tal, no como una etiqueta apagada. */
.gc-zona-btn--pide{background:var(--naranja);color:var(--azul)}
.gc-zona-btn--pide:hover{background:var(--brasa);color:var(--azul)}

/* ---------- héroe ----------
   El degradado va VERTICAL, no en diagonal. En diagonal el borde inferior del
   héroe no es un color plano: a la izquierda llega más claro que a la derecha, y
   donde empalmaba con la siguiente capa —que sí es plana— aparecía una raya
   horizontal a media pantalla. Vertical, el pie del héroe es un solo tono y el
   empalme deja de existir. */
.hero{background:linear-gradient(180deg,#F86500 0%,#F86500 44%,#E15400 100%);
  color:var(--azul);position:relative;overflow:hidden}
/* El padding superior reserva el alto de la cabecera flotante. En el móvil no
   hace falta —ahí el héroe es la foto a sangre y la cabecera pasa por encima
   sin tapar texto— y por eso la regla de móvil lo vuelve a poner en cero. */
.hero-in{max-width:74rem;margin:0 auto;padding:2.5rem 1.25rem 3rem;
  display:grid;gap:2.5rem}
@media (min-width:56rem){
  /* Una sola columna con el texto a la izquierda: la segunda columna era la
     tarjeta de la foto, que ahora es el fondo. `min-height` para que la escena
     tenga sitio donde verse — un héroe del alto del texto recorta la foto a una
     franja y no se entiende qué pasa en ella. */
  .hero-in{grid-template-columns:minmax(0,34rem);align-content:center;
    min-height:min(42rem,82vh);padding:7rem 1.25rem calc(5.5rem + 1.5rem);gap:0}
  .hero-texto{grid-column:1;align-self:center}
}
/* «Nuestro propósito» es la entradilla de la nota del dueño: va pequeña y en
   versalitas, para que anuncie la promesa sin competir con ella. */
/* El texto va SIEMPRE por encima del fondo: `.hero-fondo` viene después en el
   DOM y, sin esto, se pintaba encima del titular y el héroe salía sin una sola
   palabra. */
.hero-texto{position:relative;z-index:2}
.hero-proposito{margin:0 0 .5rem;font-size:.82rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--azul)}
/* El tope por ALTO (9vh): en una laptop de 720 px el titular a 4.8 rem
   ocupaba tres líneas y empujaba el precio fuera de la primera pantalla. */
.hero h1{font-size:clamp(2.6rem,min(7.5vw,9vh),4.8rem);color:var(--azul);
  text-shadow:0 2px 30px rgba(120,40,0,.18)}
.hero .bajada{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--azul);
  margin:1.1rem 0 0;max-width:34ch}
/* «Haz tu pedido» va subrayado en la nota y es pulsable: el subrayado no es
   decoración, es lo que dice que ahí se toca. Área de toque generosa sin
   sacarlo de la línea de texto (padding vertical + interlineado holgado). */
.hero-pedido{color:var(--azul);font-weight:800;text-decoration:underline;
  text-decoration-thickness:.12em;text-underline-offset:.18em;
  padding:.15em .05em;border-radius:6px}
.hero-pedido:hover{background:rgba(255,255,255,.16);text-decoration-color:var(--azul)}
.hero .bajada{line-height:1.5}
.hero-p10{font-weight:800;white-space:nowrap}

/* El recuadro de la nota: el botón manda y debajo va lo que te llevas. Fondo
   apenas más oscuro que el héroe para que se lea como una caja sin meter otro
   color —naranja y azul no se funden— y borde blanco translúcido. */
.hero-premium{margin-top:1.6rem;padding:1.05rem 1.15rem;border-radius:16px;
  background:rgba(120,40,0,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  max-width:34rem}
.hero-premium .btn-premium{font-size:1.05rem;letter-spacing:.02em}
.hero-premium-total{margin:.6rem 0 0;font-size:1rem;color:var(--azul)}
.hero-premium-total b{font-size:1.8rem;font-weight:800;color:var(--azul);margin-right:.25rem}
.hero-premium-suma{margin:.1rem 0 .2rem;font-size:.95rem;font-weight:700;color:var(--azul)}
.hero-premium-txt{margin:.75rem 0 0;font-size:1rem;line-height:1.45;
  color:var(--azul)}
.hero-premium-txt b{font-weight:800}
.hero-premium-txt small{display:block;margin-top:.35rem;font-size:.82rem;
  color:var(--azul)}
.acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.btn{border:0;border-radius:12px;padding:.95rem 1.5rem;font:inherit;
  font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;transition:transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn-naranja{background:var(--azul);color:#fff}
.btn-premium{background:var(--azul);color:#fff}
.btn-premium:hover{background:var(--azul-2)}
.btn-naranja:hover{background:var(--azul-2)}
.btn-linea{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn-linea:hover{background:rgba(255,255,255,.14)}
/* Sobre el azul del tótem el naranja es el que actúa: ahí ya viste el precio. */
.btn-wa{background:var(--naranja);color:var(--azul);padding:1rem 1.7rem;font-size:1.05rem}
.btn-wa:hover{background:var(--brasa)}
/* Sobre el naranja del héroe el botón naranja se perdía: ahí va azul, como «Ver planes». */
.hero .btn-wa,.hoja-cab .btn-wa{background:var(--azul);color:#fff}.hero .btn-wa:hover,.hoja-cab .btn-wa:hover{background:var(--azul-2)}
/* La segunda opción sobre fondo claro. `.btn-linea` es la de encima del
   naranja —borde blanco— y ahí desaparecería. */
.btn-borde{background:transparent;color:var(--azul);padding:1rem 1.7rem;
  font-size:1.05rem;box-shadow:inset 0 0 0 2px var(--linea)}
.btn-borde:hover{background:var(--nata)}
.btn svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}

/* Los dos checks de la nota del dueño, debajo de los botones: son las dos
   objeciones que frenan el pedido («¿me cobran el envío?», «¿sale más caro a
   domicilio?») y van respondidas antes de que las pregunte. */
.hero-checks{display:flex;flex-wrap:wrap;gap:.35rem 1.15rem;margin:1.15rem 0 0;
  padding:0;font-size:.95rem;color:var(--azul);font-weight:600}
.hero-checks span{display:inline-flex;align-items:center;gap:.4rem}
.hero-checks span::before{content:"";width:1.05rem;height:1.05rem;flex:none;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' \
stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/></svg>")}

/* Las cuatro pastillas azules («Delivery gratis», «Peso exacto»…) vivían acá,
   bajo los botones. Apretaban el héroe contra el borde y repetían palabra por
   palabra lo que ya dice la tira en movimiento de la línea siguiente. Se
   quedan solo en la tira: se leen igual y el héroe respira. */

/* El repartidor con el balón: la promesa con cara. Fondo desaturado y
   sujeto a color, que es la firma visual de Primax. */
/* ---------- «hay más abajo» ----------
   Un doble chevron que respira. Aparece a los pocos segundos, no de entrada: si
   está desde el primer fotograma es un adorno más del héroe y el ojo lo
   descarta; si aparece cuando la persona lleva un rato quieta, se lee como una
   respuesta a que no sabe qué hacer.

   Va FLOTANTE (`fixed`), no clavado al héroe. Dentro del héroe tenía que
   reservar su propia franja de alto, y esa franja se la quitaba a la foto —que
   es lo que vende—; además desaparecía de golpe al deslizar un dedo. Flotando
   acompaña mientras se baja y se apaga solo según se acerca el catálogo.
   `z-index` por debajo de la barra del pedido (40): si las dos coinciden, manda
   la que cierra la venta.

   Fondo AZUL MACIZO con anillo blanco, no un velo translúcido. Al flotar pasa
   por los tres suelos de la página —naranja, la tira azul y el blanco del
   catálogo— y el blanco translúcido que servía dentro del héroe se volvía
   invisible en cuanto tenía el catálogo detrás. El azul contrasta con el
   naranja y con el blanco, y sobre la tira azul lo recorta el anillo. */
.baja{position:fixed;left:50%;bottom:1.5rem;translate:-50% 0;z-index:35;
  width:3rem;height:3rem;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--azul);color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 6px 18px rgba(1,21,54,.34);
  opacity:0;pointer-events:none;transition:opacity .45s ease,bottom .25s ease}
/* Con pedido empezado la barra ocupa el pie: el chevron se sube para no
   quedarle encima. */
body:has(.gc-barra[data-abierta="1"]) .baja{bottom:4.6rem}
.baja svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* El segundo chevron va más tenue: sugiere continuidad hacia abajo en vez de
   pintar dos flechas del mismo peso. */
.baja svg path:last-child{opacity:.45}
/* La opacidad la lleva el scroll, no una clase: se va apagando según se acerca
   el catálogo en vez de irse de golpe. `--o` la escribe el JavaScript. */
.baja[data-visible="1"]{opacity:var(--o,1);pointer-events:auto;
  transition:opacity .16s linear,bottom .25s ease;
  animation:gc-baja 2.1s ease-in-out infinite}
.baja:hover{background:rgba(255,255,255,.3)}
/* Encima de texto no se muestra: lo decide `tapaAlgo()` en carrito.js. */
.baja[data-tapa="1"]{opacity:0!important;pointer-events:none}
@keyframes gc-baja{
  0%,58%,100%{translate:-50% 0}
  72%{translate:-50% 6px}
  85%{translate:-50% 2px}
}
@media (prefers-reduced-motion:reduce){ .baja[data-visible="1"]{animation:none} }

/* ---------- el fondo del héroe ----------
   La foto dejó de ser una tarjeta al costado: ocupa el héroe entero, a sangre,
   y las escenas se van turnando. En el escritorio, una foto de 26 rem metida en
   media pantalla naranja se veía como un cromo pegado; a sangre, la escena ES
   el fondo y el texto vive encima.

   Cuatro capas apiladas con la misma animación y el arranque desplazado por
   `--i`. Sin JavaScript: si algo falla, la primera queda puesta y el héroe se
   ve igual de bien. */
.hero-fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Orden de capas: foto (0) · velo de color (1) · texto (2). */
.hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 45%;opacity:0;
  animation:hero-rota 28s ease-in-out infinite;
  animation-delay:calc(var(--i) * 7s)}
/* La primera se pinta ya, sin esperar a que arranque el ciclo. Con la
   animación común arrancaba en opacidad 0 y el contenido principal tardaba
   1,5 s más en verse (medido: LCP 2,36 s con la foto ya descargada a 0,6 s).
   Su ciclo empieza visible y se apaga donde le toca a la segunda. */
.hero-foto[style*="--i:0"]{opacity:1;animation-name:hero-rota-primera}
@keyframes hero-rota-primera{
  0%{opacity:1}
  23%{opacity:1}
  27%{opacity:0}
  98%{opacity:0}
  100%{opacity:1}
}
@keyframes hero-rota{
  0%{opacity:0}
  2%{opacity:1}
  23%{opacity:1}
  27%{opacity:0}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-foto{animation:none;opacity:0}
  .hero-foto[style*="--i:0"]{opacity:1}
}
/* El velo: naranja macizo donde va el texto y transparente sobre la escena. No
   es un negro al 40% encima de todo —eso apaga la foto y ensucia el naranja—,
   es el propio color de marca abriéndose paso. */
.hero-in{position:relative;z-index:2}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,#E15400 0%,rgba(225,84,0,.95) 26%,
    rgba(226,88,4,.62) 42%,rgba(228,95,10,.2) 56%,rgba(232,110,24,0) 68%)}


/* ---------- móvil: el héroe es un cuadro con el texto ENCIMA de la foto ----
   Antes el titular se comía la pantalla y la foto quedaba fuera del primer
   vistazo. Ahora la foto entra completa y el texto va sobre ella. */
@media (max-width:56rem){
  .hero-in{grid-template-columns:1fr;gap:0;padding:0;min-height:0}
  /* 4/5 y no cuadrado: en 1:1 se veía la cara pero el balón quedaba cortado,
     y el balón es el producto. */
  /* 3/4 y no 4/5: la foto gana alto y con el texto más abajo entra el balón
     entero, con su logotipo PRIMAX, que es lo que vende. En 4/5 el titular
     empezaba justo encima del balón y lo dejaba a media asta. */
  /* En vertical el fondo se mira desde abajo: ahí está el balón, que es el
     producto. Y el héroe reserva alto propio, porque ya no hay una <img> en el
     flujo que se lo dé. */
  .hero{min-height:min(41rem,90vh)}
  .hero-foto{object-position:50% 62%}
  /* El velo del móvil es VERTICAL y sube desde abajo; el diagonal del
     escritorio dejaría el texto sobre la parte clara de la foto. */
  /* El velo vertical se queda ABAJO: subiéndolo hasta media pantalla tapaba el
     balón, que es el producto. Sólido solo en el pie, donde va el recuadro. */
  .hero::before{background:linear-gradient(to top,#E15400 0%,rgba(225,84,0,.96) 22%,
    rgba(226,88,4,.66) 36%,rgba(228,95,10,.24) 50%,rgba(232,110,24,0) 62%)}
  /* El velo termina en `transparent`, no en el naranja final: así el color de
     abajo es el del propio héroe y no hay dos naranjas distintos pegados. El
     primer tramo es largo y de opacidad baja para que el degradado se sienta
     soplado, no cortado. */
  /* El velo arranca más abajo (9 rem contra 5.5): el titular baja y descubre el
     balón que sostiene el repartidor. La foto ES el argumento del héroe, y
     taparle el producto con el texto es tapar lo que se vende. */
  /* Sin franja reservada abajo: el indicador de deslizar ahora flota sobre la
     ventana, así que ese alto vuelve a ser foto. */
  /* Abajo se reserva el alto de la curva del héroe, que va ABSOLUTA encima
     del pie: con 1.5 rem la ola se comía el borde del recuadro del Premium. */
  .hero-texto{grid-area:1/1/2/2;position:relative;z-index:2;align-self:end;
    padding:10rem 1.15rem calc(clamp(3.4rem,7vw,5.5rem) + 1rem)}
  .hero h1{font-size:clamp(1.9rem,8.2vw,2.7rem);line-height:.98}
  .hero .bajada{font-size:.98rem;margin-top:.6rem;max-width:32ch}
  .acciones{margin-top:1.1rem;gap:.55rem}
  .btn{padding:.8rem 1.15rem;font-size:.95rem;border-radius:11px}
}


/* ---------- tira en movimiento ----------
   Corre sola para que la página respire y se sienta viva (referencia: Temu).
   Es UN gesto continuo, no animaciones sueltas por sección. */
.tira{background:var(--azul);color:#fff;overflow:hidden;padding:1.6rem 0}
.tira-pista{display:flex;align-items:center;width:max-content;gap:4.2rem;
  animation:tira 40s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tira:hover .tira-pista{animation-play-state:paused}
/* Estas frases son la única prueba que el cliente lee antes de tocar «Pedir», y
   a .82rem se leían como pie de página. Ahora pesan lo que pesa la promesa —y
   por eso la tira corre más lenta: texto grande pasando rápido no se alcanza a
   leer, que es peor que no ponerlo. */
/* La frase NO puede ser un contenedor flex. En flex cada hijo es una caja, y los
   espacios de texto que hay entre ellas se descartan: «Balón <b>sellado</b> de
   planta» salía como «Balónselladode planta». Con letras chicas casi no se veía;
   al agrandarlas quedó a la vista. Va en línea, como el texto que es, y el punto
   naranja se centra con `vertical-align` en vez de con `align-items`. */
/* Tracking en 0: el negativo apretaba las palabras unas contra otras y a este
   tamaño se leía como texto mal espaciado. La Archivo del <b> aguanta un pelo
   de negativo porque es la de titulares; la de texto, no. */
.tira span{display:inline-block;white-space:nowrap;
  font-size:clamp(1.3rem,4.2vw,1.75rem);font-weight:500;color:#ccd8e8;
  letter-spacing:0;line-height:1.25;word-spacing:.06em}
.tira b{color:#fff;font-weight:800;letter-spacing:-.015em;
  font-family:var(--display)}
.tira i{display:inline-block;vertical-align:.2em;width:.46rem;height:.46rem;
  border-radius:50%;background:var(--brasa);font-style:normal;margin-right:.7rem}
@keyframes tira{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .tira-pista{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
}

/* ---------- la espina: la curva de Primax ----------
   El isotipo de Primax es un bumerán y su promesa es el movimiento. Esa curva
   ya separaba héroe y tienda; acá pasa a ser la costura de TODA la página:
   cada cambio de fondo entra por una curva, y alternan de sentido. Es lo que
   hace que la página se lea como una pieza y no como cinco secciones apiladas.

   El corte se veía porque el fondo del SVG era un color plano y el trazo, otro:
   dos planos pegados con una frontera dura de un píxel. Ahora el fondo de la
   curva es el DEGRADADO entre los dos suelos, así que el color ya llega casi
   fundido cuando el trazo lo remata; el trazo deja de ser una frontera y pasa a
   ser la forma dentro del fundido. Por eso la curva también creció: un
   degradado de 2 rem se sigue leyendo como una raya. */
.curva{display:block;width:100%;height:clamp(3.4rem,7vw,5.5rem);
  position:relative;margin-block:-1px;overflow:hidden}
/* El SVG se pasa 4 px por abajo y el contenedor lo recorta. Es el seguro contra
   la línea del borde inferior: la altura de la curva es fraccionaria (54.39 px)
   y la última fila de píxeles caía a medio camino entre el trazo y el fondo del
   contenedor, dibujando un filo del color de ORIGEN sobre el suelo de destino.
   Pasándose de largo, esa fila conflictiva queda fuera de vista. */
.curva svg{display:block;width:100%;height:calc(100% + 4px)}
.curva path{fill:currentColor}
/* El grano, por encima del fondo Y del trazo. Sin esto la curva era la única
   franja lisa de la página, entre dos zonas con textura, y se veía cortada
   justo en la transición, que es donde más se nota.
   Va en la versión suave: la curva toca blanco o naranja en una de sus dos
   mitades, y ahí el grano fuerte se nota de más. */

/* Fondo MACIZO del color de origen. El degradado de naranja a azul marino
   pasaba por marrón y gris sucio —cualquier interpolación RGB entre dos colores
   opuestos lo hace— y eso es la «sombra» que se veía. Los dos colores ahora se
   encuentran solo en el borde desenfocado del trazo: sin color intermedio
   inventado y sin corte. */
/* La del héroe va encima de la foto: sin fondo propio y pegada al pie. */
.curva--naranja-azul{color:var(--azul);background:transparent;
  position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0}
.curva--azul-crema{color:var(--crema);background:var(--azul)}
.curva--crema-azul{color:var(--azul);background:var(--crema)}
/* La costura bajo la cabecera naranja de las páginas interiores (/productos/,
   /nosotros/, el 404). Existe porque ahí se estaba usando `naranja-azul`, que
   es la del héroe: lleva `position:absolute; bottom:0` para pegarse al pie de
   la FOTO, y fuera de `.hero` —que es lo único posicionado— se anclaba al
   bloque inicial del documento y desaparecía. El resultado era un corte recto
   de naranja a blanco en esas páginas y una ola en la portada: la misma
   costura contada de dos maneras.
   El fondo es el final del degradado de `.hoja-cab` (#E15400), no el naranja
   base: cualquier otro valor deja una línea donde se tocan. */
.curva--naranja-crema{color:var(--crema);background:#E15400}
.curva--volteada{transform:scaleX(-1)}

/* ---------- bandas ----------
   Dos suelos que se turnan, crema y azul. El problema no era la paleta: era
   que el 95% de la página era un solo crema. */
.banda{max-width:74rem;margin:0 auto;padding:clamp(2.6rem,5vw,4.2rem) 1.25rem}

/* ---------- /pedido/ ----------
   Más angosta que el resto: es un trámite de arriba abajo, no una página de
   lectura. A 74rem el formulario quedaba con líneas de campo enormes y el
   carrito perdido a un lado. */
.banda.pedido{max-width:48rem}
.banda-azul{background:var(--azul);color:#c8d3e2}

/* Una sola escala de títulos para toda la página. Antes los de abajo eran
   casi la mitad que el del héroe y por eso se perdían. */
.cabeza h2{font-size:clamp(2.1rem,5.4vw,3.4rem);max-width:24ch}
.cabeza p{color:#5A6676;margin:.9rem 0 0;font-size:1.05rem;max-width:46ch}
/* Cuándo llega: el dato que decide si alguien pide acá o llama a otro. Iba
   dentro del párrafo gris, al final de una frase larga, y ahí no se lee.
   Sale del gris y se pone en la tinta del sitio. */
.cabeza-cuando{color:var(--azul)!important;font-weight:600}
.cabeza-cuando b{font-weight:800}
.banda-azul .cabeza p{color:#9fb0c6}
.aviso{background:var(--nata);border-left:4px solid var(--naranja);
  border-radius:0 12px 12px 0;padding:.9rem 1.1rem;font-size:.88rem;
  line-height:1.5;margin:0 0 2rem;color:#6b4a12}

/* ---------- plan Premium ----------
   La promesa de la marca convertida en producto. Va sobre nata y no sobre azul
   para no pelearle el grito al tablero de precios, que es el único momento
   gritado de la página; el naranja aparece solo en el sello y en el botón, que
   es la acción. */
.premium-in{background:var(--nata);border-radius:26px;
  padding:clamp(1.8rem,4vw,3rem);display:grid;gap:2rem;align-items:center;
  grid-template-columns:1fr}
.premium-sello{display:inline-block;margin:0 0 .9rem;padding:.3rem .8rem;
  background:var(--naranja);color:var(--azul);border-radius:999px;
  font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.premium .btn-wa{background:var(--azul);color:#fff}.premium .btn-wa:hover{background:var(--azul-2)}
.premium h2{font-size:clamp(1.9rem,4.4vw,2.9rem);max-width:18ch;margin:0}
.premium-bajada{color:#5A6676;margin:.9rem 0 0;font-size:1.05rem;max-width:44ch}
.premium-lista{list-style:none;margin:1.5rem 0 1.9rem;padding:0;display:grid;gap:.7rem}
.premium-lista li{position:relative;padding-left:1.7rem;font-size:1rem;
  line-height:1.5;color:#3d4756}
.premium-lista li::before{content:"";position:absolute;left:0;top:.35em;
  width:1.05rem;height:1.05rem;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='none' stroke='%23F86500' stroke-width='3.2' stroke-linecap='round' \
stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/></svg>")}
.premium-lista b{color:var(--azul);font-weight:800}
.premium-foto{margin:0;display:flex;justify-content:center}
/* Antes era un recorte de balón sin fondo y por eso llevaba `drop-shadow`.
   Ahora es una escena con su propio fondo: va en una tarjeta con esquinas
   redondeadas y sombra de caja, como el resto de la página. */
.premium-foto img{width:100%;max-width:26rem;object-fit:contain;
  height:auto;display:block;border-radius:20px;
  box-shadow:0 22px 44px rgba(120,50,10,.22)}
@media (min-width:52rem){
  .premium-in{grid-template-columns:1.1fr .9fr;align-items:center}
}

/* ---------- el tablero: donde se gasta la audacia ----------
   Ningún competidor publica precios (Solgas, el líder, tampoco). Así que el
   precio es el argumento, y se muestra como lo que es en este rubro: el tótem
   de un grifo. Es el único momento gritado de la página. */
.tablero{background:var(--azul);color:#fff;position:relative;overflow:hidden}
.tablero-in{max-width:74rem;margin:0 auto;padding:clamp(2.6rem,5vw,4rem) 1.25rem;
  display:grid;gap:2rem;position:relative}
@media (min-width:52rem){
  .tablero-in{grid-template-columns:minmax(0,15rem) minmax(0,1fr);
    gap:0 3.5rem;align-items:center}
}
.tablero h2{font-size:clamp(2.1rem,5.4vw,3.4rem);color:#fff}
.tablero-bajada{color:#9fb0c6;margin:.9rem 0 0;max-width:44ch}
.tablero-nota{color:#7e90a8;font-size:.86rem;margin:1.2rem 0 1.4rem;max-width:52ch}

/* La tabla va servida en HTML: es contenido indexable sin depender del JS del
   carrito, y Google exige que lo marcado en schema esté visible. */
.precios{width:100%;border-collapse:collapse;margin-top:1.8rem}
.precios caption{text-align:left;color:#9fb0c6;font-size:.9rem;
  padding-bottom:.9rem}
.precios th,.precios td{text-align:left;padding:.85rem .6rem;
  border-bottom:1px solid rgba(255,255,255,.12)}
.precios thead th{font-size:.8rem;color:#7e90a8;font-weight:700;
  padding-bottom:.5rem}
.precios tbody th{font-weight:700;color:#fff;font-size:1rem}
.precios td:last-child,.precios th:last-child{text-align:right;white-space:nowrap}
.precios .p{font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2rem);color:var(--brasa);
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;display:inline-block}
.precios small{display:block;color:#7e90a8;font-size:.8rem;font-weight:400;
  letter-spacing:0}
@media (max-width:40rem){
  .precios th,.precios td{padding:.7rem .25rem}
  .precios th:nth-child(2),.precios td:nth-child(2){display:none}
}

/* ---------- faq ---------- */
.faq{margin-top:2rem;max-width:56rem;background:var(--nata);
  border-radius:20px;padding:.4rem clamp(1rem,3vw,1.8rem)}
.faq details{border-bottom:1px solid #E3E8EF}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:1.1rem 0;font-weight:700;
  font-size:clamp(1rem,2.2vw,1.1rem);
  list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--naranja);font-family:var(--display);
  font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:-.2rem 0 1.2rem;color:#5A6676;font-size:.97rem;max-width:62ch}

/* ---------- pie ----------
   Cuatro columnas con un trabajo cada una y lo legal abajo, aparte. En el
   móvil: la marca y el WhatsApp arriba a lo ancho, productos y ayuda lado a
   lado (son listas cortas) y la dirección debajo. */
.pie{background:var(--azul);color:#aebdd0;padding:3.2rem 1.25rem 7rem;
  font-size:.92rem;line-height:1.6}
.pie-in{max-width:74rem;margin:0 auto;display:grid;gap:2.2rem 2rem;
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr))}
.pie h2{font-size:.78rem;color:#fff;font-family:var(--texto);font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;margin:0 0 .8rem}
.pie .pie-h-2{margin-top:1.4rem}
.pie p{margin:0}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.pie a{color:#dbe4f0;text-decoration:none;display:inline-block;padding:.3rem 0}
.pie a:hover{color:#fff;text-decoration:underline}
.pie-col > a{color:var(--brasa);font-weight:700}
.pie-logo{display:flex!important;align-items:center;gap:.6rem;margin-bottom:.8rem}
.pie-logo img{width:2.75rem;height:2.75rem;border-radius:50%}
.pie-logo span{font-family:var(--display);font-weight:800;font-size:1.25rem;
  color:#fff;letter-spacing:-.03em}
.pie-marca p{max-width:30ch}
.pie-wa{display:flex!important;align-items:center;gap:.7rem;margin-top:1.2rem;
  background:#13773D;color:#fff!important;border-radius:14px;
  padding:.7rem 1.1rem!important;width:max-content;max-width:100%}
.pie-wa:hover{background:#0f6634;text-decoration:none!important}
.pie-wa svg{width:1.6rem;height:1.6rem;fill:currentColor;flex:none}
.pie-wa span{display:flex;flex-direction:column;font-weight:800;line-height:1.2}
.pie-wa small{font-weight:500;opacity:.9}
.pie-seguir{margin-top:.6rem;color:var(--brasa)!important;font-weight:700}
.pie-base{max-width:74rem;margin:2.6rem auto 0;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.12);display:flex;gap:1.4rem 2rem;
  align-items:flex-start;font-size:.8rem;color:#8193ab}
.pie-base p{max-width:70ch}
.pie-base p a{color:#aebdd0;text-decoration:underline;padding:0}
.pie .pie-libro{flex:none;display:flex;flex-direction:column;gap:.1rem;
  border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:.7rem .9rem;
  color:#fff;max-width:17rem}
.pie-libro b{font-size:.88rem}
.pie-libro small{color:#aebdd0;line-height:1.35}
@media (max-width:60rem){
  .pie-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-marca{grid-column:1/-1}
  .pie-marca p{max-width:40ch}
}
@media (max-width:30rem){
  .pie{padding:2.6rem 1.25rem 7rem}
  .pie-in > .pie-col:last-child{grid-column:1/-1}
  .pie-base{flex-direction:column}
}

/* ---------- páginas de texto (nosotros) ----------
   Medida corta y tipografía grande: son páginas para leer, no para escanear. */
.hoja-cab{background:linear-gradient(180deg,#F86500 0%,#F86500 50%,#E15400 100%);
  color:var(--azul)}
/* Reserva el alto de la cabecera flotante: sin esto la miga de pan («Inicio ·
   Productos · …») nace debajo del logo y no se puede tocar. */
.hoja-cab-in{max-width:74rem;margin:0 auto;padding:5.4rem 1.25rem 3.2rem}
.hoja-cab h1{font-size:clamp(2.2rem,6.5vw,4rem);color:var(--azul);max-width:16ch}
.hoja-cab .bajada{margin:1.1rem 0 0;max-width:52ch;font-size:1.05rem;
  color:var(--azul)}
.miga{margin:0 0 1.1rem;font-size:.85rem;color:var(--azul)}
.miga a{font-weight:700;display:inline-block;padding:.35rem .1rem;
  margin:-.35rem -.1rem}

.prosa{max-width:44rem}
.prosa h2{font-size:clamp(1.6rem,3.6vw,2.2rem);margin:2.6rem 0 .8rem}
.prosa h2:first-child{margin-top:0}
.prosa p{margin:0 0 1rem;color:#5A6676;max-width:62ch}
.prosa .grande{font-size:1.2rem;color:var(--azul);line-height:1.5;max-width:54ch}
.prosa b{color:var(--azul)}
.valores{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.valores li{background:var(--nata);border-radius:16px;padding:1.1rem 1.2rem}
.valores b{display:block;font-family:var(--display);font-weight:800;
  letter-spacing:-.02em;font-size:1.05rem;margin-bottom:.25rem}
.valores span{font-size:.93rem;color:#5A6676;line-height:1.5}
.volver{margin-top:2.4rem}
.volver a{display:inline-block;padding:.6rem 0;min-height:2.5rem}

/* ---------- ficha de producto ----------
   Dos columnas en escritorio: las fotos mandan a la izquierda y la decisión
   —precio, envío, botones— queda a la derecha sin que haya que desplazar. En el
   móvil se apilan en ese mismo orden, que es el orden en que se mira. */
.ficha{display:grid;gap:2rem}
@media (min-width:52rem){
  .ficha{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;
    align-items:start}
}
.ficha-fotos{min-width:0}
.ficha-galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  gap:.6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-radius:20px}
.ficha-galeria::-webkit-scrollbar{display:none}
.ficha-galeria figure{margin:0;flex:0 0 100%;scroll-snap-align:start;
  background:var(--crema);border:1px solid #E3E8EF;border-radius:20px;
  overflow:hidden}
.ficha-galeria img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  display:block;padding:1rem}
.ficha-galeria img.cubre{object-fit:contain;padding:0}
/* Foto grande + columna de miniaturas. Las miniaturas marcan cuál se ve: si no
   se nota en qué foto va, un carrusel que se mueve solo desorienta. */
.ficha-galeria-caja{display:grid;grid-template-columns:4.25rem minmax(0,1fr);
  gap:.6rem;align-items:stretch}
.ficha-galeria-caja .ficha-galeria{grid-column:2;grid-row:1}
.ficha-miniaturas{grid-column:1;grid-row:1;display:flex;flex-direction:column;
  gap:.5rem;height:0;min-height:100%;overflow-y:auto;scrollbar-width:none}
.ficha-miniaturas::-webkit-scrollbar{display:none}
.ficha-miniaturas button{flex:0 0 auto;width:100%;aspect-ratio:1;padding:0;
  border:2px solid #E3E8EF;border-radius:12px;overflow:hidden;cursor:pointer;
  background:var(--crema);transition:border-color .15s,opacity .15s;opacity:.7}
.ficha-miniaturas button img{width:100%;height:100%;object-fit:contain;display:block}
.ficha-miniaturas button[aria-current="true"]{border-color:var(--naranja);opacity:1}
@media (max-width:30rem){
  .ficha-galeria-caja{grid-template-columns:minmax(0,1fr);gap:.65rem}
  .ficha-galeria-caja .ficha-galeria{grid-column:1;grid-row:1}
  .ficha-miniaturas{grid-column:1;grid-row:2;flex-direction:row;
    height:auto;min-height:0;overflow-x:auto;gap:.4rem}
  .ficha-miniaturas button{width:3.4rem}
}

/* La caja de compra: qué es en una línea, cómo lo compras, el precio y el
   botón. Los sellos de confianza van debajo del botón, donde se duda. */
.hoja-cab--ficha .hoja-cab-in{padding-bottom:1.6rem}
.ficha-banda{padding-top:1.2rem}
.ficha-compra{display:grid;gap:1rem;align-content:start}
.ficha-lema{margin:0;font-size:1.08rem;color:#3d4d66;max-width:44ch;line-height:1.5}
.ficha-modo{max-width:26rem}
.ficha-precio{display:flex;align-items:baseline;gap:.5rem;margin:0;flex-wrap:wrap}
.ficha-precio b{font-family:var(--display);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(2.6rem,7vw,3.6rem);color:var(--fuego);
  font-variant-numeric:tabular-nums;line-height:1}
.ficha-precio span{color:#4a5c78;font-size:.95rem}
.ficha-precio--consulta{font-weight:700;color:#B84300;max-width:32ch}
.ficha-compra .plan-desglose{margin-top:.6rem;color:var(--azul)}
.ficha-agregar{width:100%;max-width:26rem;justify-content:center;font-size:1.05rem;
  min-height:3.3rem}
.ficha-sellos{list-style:none;margin:.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .8rem;max-width:30rem}
.ficha-sellos li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;
  font-weight:600;color:var(--azul)}
.ficha-sellos svg{width:1.35rem;height:1.35rem;color:var(--fuego);flex:none}
.ficha-wa{margin:0;font-size:.92rem;color:#4a5c78}
.ficha-wa-link{display:inline-flex;align-items:center;gap:.35rem;min-height:2.75rem;
  color:#13773D;font-weight:700;text-decoration:none}
.ficha-wa-link svg{width:1.1rem;height:1.1rem;fill:currentColor}
.ficha-wa-link:hover{text-decoration:underline}

/* La escena: la foto del producto en uso, grande, con una línea encima. Es lo
   que el packshot no cuenta — dónde vive el producto y cómo llega. */
.ficha-escena{max-width:74rem;margin:0 auto;padding:0 1.25rem}
.ficha-escena figure{margin:0;position:relative;border-radius:24px;overflow:hidden;
  background:var(--nata)}
/* Cada escena con SU proporción: una horizontal recortada a vertical perdía el balón. */
.ficha-escena img{width:100%;height:auto;display:block}
/* Volantes de la ficha: se ven como una historia de Instagram, lado a lado. */
.ficha-flyers{max-width:74rem;margin:0 auto;padding:2.5rem 1.25rem 0;text-align:center}
/* Siempre dos en fila, uno a cada lado, también en el celular: apilados eran
   dos pantallas de volante y el segundo quedaba debajo de la barra fija. */
.ficha-flyers-lista{display:grid;grid-template-columns:repeat(2,minmax(0,300px));
  gap:clamp(.75rem,3vw,1.5rem);justify-content:center;margin-top:1.25rem}
.ficha-flyers figure{margin:0;min-width:0}
.ficha-flyers video{width:100%;height:auto;display:block;border-radius:18px;aspect-ratio:9/16;background:#011536}
.ficha-flyers img{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 18px 40px -18px rgba(1,21,54,.45);transition:transform .2s ease}
.ficha-flyers a:hover img{transform:translateY(-4px)}
.ficha-flyers-lista:has(> figure:only-child){grid-template-columns:minmax(0,300px)}
.compartir{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin-top:.7rem}
.compartir-btn{width:100%;justify-content:center}
.compartir-btn{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:.6rem 1.2rem;border:0;border-radius:999px;background:var(--azul);color:#fff;
  font:inherit;font-weight:700;cursor:pointer}
.compartir-btn svg{width:1.15rem;height:1.15rem}
.compartir-red{display:inline-flex;align-items:center;min-height:40px;padding:.4rem .8rem;
  border:1px solid #E3E8EF;border-radius:999px;background:#fff;color:var(--azul);
  font:inherit;font-size:.8rem;font-weight:600;text-decoration:none;cursor:pointer}
/* Con menú nativo del teléfono basta el botón principal. */
.compartir.nativo .compartir-red{display:none}
.ficha-flyers-cta{margin:1.5rem 0 0}
.ficha-escena figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:3.5rem 1.4rem 1.3rem;color:#fff;font-family:var(--display);font-weight:800;
  font-size:clamp(1.2rem,3vw,1.9rem);letter-spacing:-.02em;line-height:1.15;
  background:linear-gradient(to top,rgba(1,21,54,.85),rgba(1,21,54,0))}

.ficha-info .titulo-seccion,.ficha-mas .titulo-seccion{max-width:74rem;margin:0 auto}
.ficha-tarjetas{max-width:74rem;margin:1.4rem auto 0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.ficha-tarjeta{background:var(--nata);border-radius:20px;padding:1.3rem 1.3rem 1.4rem}
.ficha-tarjeta-ico{width:2.75rem;height:2.75rem;border-radius:50%;background:#fff;
  color:var(--fuego);display:flex;align-items:center;justify-content:center}
.ficha-tarjeta-ico svg{width:1.4rem;height:1.4rem}
.ficha-tarjeta h3{margin:.9rem 0 .35rem;font-size:1.15rem;color:var(--azul)}
.ficha-tarjeta p{margin:0;color:#3d4d66;font-size:.97rem;line-height:1.5}

.ficha-mas-lista{max-width:74rem;margin:1.4rem auto 0;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.mini{display:grid;grid-template-columns:4.5rem 1fr;grid-template-rows:auto auto;
  column-gap:.9rem;align-items:center;padding:.7rem;border-radius:18px;
  border:1px solid #E3E8EF;text-decoration:none;color:var(--azul);background:#fff;
  transition:border-color .15s,box-shadow .15s}
.mini:hover{border-color:var(--naranja);box-shadow:0 6px 18px rgba(1,21,54,.08)}
.mini-foto{grid-row:1/3;width:4.5rem;height:4.5rem;border-radius:12px;overflow:hidden;
  background:radial-gradient(circle at 50% 62%,#FFE8D6 0%,#FFF4EC 46%,#fff 74%)}
.mini-foto img{width:100%;height:100%;object-fit:contain}
.mini b{font-size:.98rem;align-self:end}
.mini > span:last-child{align-self:start;color:#B84300;font-weight:800}
.mini small{color:#4a5c78;font-weight:500}
.ficha-mas .volver{max-width:74rem;margin:1.6rem auto 0}

/* ---------- índice de productos ----------
   Una lista y no una rejilla de tarjetas: acá se compara precio contra precio, y
   en filas el ojo baja por una sola columna de cifras. */
.lista-productos{list-style:none;margin:1.4rem 0 0;padding:0;
  border-top:1px solid #E3E8EF}
.lista-productos li{border-bottom:1px solid #E3E8EF}
.lista-productos a{display:flex;align-items:center;gap:1rem;padding:1rem .2rem;
  text-decoration:none;transition:background .14s}
.lista-productos a:hover{background:var(--nata)}
.lista-foto{flex:none;width:4.5rem;height:4.5rem;background:var(--crema);
  border:1px solid #E3E8EF;border-radius:14px;overflow:hidden;display:block}
.lista-foto img{width:100%;height:100%;object-fit:contain;display:block;
  padding:.35rem}
.lista-datos{flex:1;min-width:0}
.lista-datos b{display:block;font-family:var(--display);font-weight:800;
  letter-spacing:-.03em;font-size:clamp(1.05rem,2.6vw,1.3rem);color:var(--azul)}
.lista-datos small{display:block;color:var(--humo);font-size:.86rem;
  line-height:1.45;margin-top:.15rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.lista-precio{flex:none;text-align:right;font-family:var(--display);
  font-weight:800;letter-spacing:-.04em;font-size:clamp(1.1rem,3vw,1.5rem);
  color:var(--fuego);font-variant-numeric:tabular-nums}
.lista-precio small{display:block;font-family:var(--texto);font-weight:400;
  letter-spacing:0;font-size:.75rem;color:var(--humo)}
@media (max-width:30rem){ .lista-datos small{display:none} }


/* ---------- el grano, UNA sola capa para toda la web ----------
   Antes cada zona pintaba su propio mosaico de grano: el cuerpo, la cabecera,
   la tira, el tótem, el pie, el héroe y cada curva. El mosaico de cada capa
   arranca en el origen de SU elemento, así que dos zonas contiguas nunca
   casaban el patrón y en cada juntura se veía un salto —el dueño lo describió
   como que la página «se ve rota», y era exactamente eso: no faltaba grano,
   faltaba que fuera el MISMO grano.

   Ahora es una única capa fija sobre la ventana. Un solo mosaico continuo, sin
   junturas posibles, y además no se mueve al deslizar: el grano queda en el
   cristal y el contenido pasa por debajo, que es como se comporta el grano de
   una película.

   ⚠️ VA `absolute` SOBRE EL DOCUMENTO, **NO `fixed` sobre la ventana**. Se
   probó fija —quedaba más bonita, el grano se queda en el cristal y el
   contenido pasa por debajo— y en el iPhone del dueño aparecieron restos de
   contenido dibujados encima de la cabecera. Una capa fija a pantalla completa
   con z-index alto obliga a Safari a componer toda la página en una capa
   aparte, y durante el desplazamiento no la repinta entera: quedan pedazos del
   fotograma anterior. Absoluta se desplaza con el documento, no crea esa capa y
   el mosaico sigue siendo uno solo, que era el objetivo.

   `pointer-events:none` es obligatorio: cubre la página entera y sin eso se
   comería todos los toques. */
body{position:relative}
/* Auditoría de imágenes: el film superpuesto ensuciaba incluso las fotos
   aprobadas. La textura queda en el fondo, nunca encima del producto. */
body{background-image:url("/textura-suave.png")}
.tras-faq{margin:1.6rem 0 0;color:#5A6676}
.tras-faq a{font-weight:700;color:#B84300;
  display:inline-block;padding:.35rem 0}
/* `.tras-faq a` pesa más que `.btn-borde` y le quitaba el relleno lateral: el
   texto quedaba pegado al borde de la píldora. */
.tras-faq .btn{padding:1rem 1.7rem}

/* Contacto y acceso permanente al Libro de Reclamaciones. */
.pie-in>*{min-width:0}.pie a[href^="mailto:"]{overflow-wrap:anywhere}

/* ---------- volver desde /pedido/ ----------
   La miga de pan no es un botón de volver: es una ruta. En el móvil, «Inicio»
   son ocho píxeles de texto que nadie lee como «salir de acá», y quien entra
   al carrito y se arrepiente se queda dando vueltas. La flecha sí se reconoce,
   y tiene el área táctil que hace falta para acertarle con el dedo. */
/* Con `.miga` delante: `.miga a` pesa más que una clase sola y le ponía
   `inline-block` y su relleno, así que el texto quedaba arriba de una caja de
   44 px en vez de centrado. */
.miga:has(.volver-atras){display:flex;align-items:center;flex-wrap:wrap}
.miga .volver-atras{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;
  padding:.5rem .7rem .5rem .45rem;margin-left:-.45rem;border-radius:10px;
  min-height:2.75rem;background:rgba(255,255,255,.14)}
.volver-atras:hover{background:rgba(255,255,255,.26)}
.volver-atras svg{width:1.05em;height:1.05em;flex:none}
.miga-sep{opacity:.5;margin:0 .15rem}

/* ==================== catálogo ====================
   Antes eran siete tarjetas idénticas en una rejilla: el Plan Premium pesaba
   lo mismo que una abrazadera de S/ 1.50, y el cliente tenía que leerlo todo
   para decidir. Con la cocina apagada, nadie lee siete cosas.

   El tamaño ahora ES la jerarquía: el plan a lo ancho, los balones grandes y
   los repuestos en fila pequeña. Y las fotos van SIN caja — un balón es un
   objeto que se apoya, no una miniatura dentro de un borde. */
.catalogo{display:grid;gap:clamp(3rem,7vw,5.5rem);max-width:70rem}

/* ---------- el plan, a lo ancho ---------- */
.plan{display:grid;gap:1.5rem;background:#fff;
  border-radius:24px;padding:clamp(1.4rem,4vw,2.6rem);
  box-shadow:inset 0 0 0 2px rgba(248,101,0,.3),0 18px 40px rgba(248,101,0,.1)}
@media (min-width:52rem){
  .plan{grid-template-columns:minmax(0,22rem) minmax(0,1fr);
    gap:clamp(2rem,4vw,3.5rem);align-items:center}
}
.plan-foto picture{display:block}
.plan-foto img{width:100%;height:auto;display:block;border-radius:16px}
.plan-texto h2{font-size:clamp(1.9rem,4.6vw,2.9rem);color:var(--azul);
  max-width:15ch}
.plan-texto > p{margin:.9rem 0 0;color:#5A6676;font-size:1.02rem;max-width:44ch;
  line-height:1.55}
.plan-precio{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin:1.4rem 0 0!important}
.plan-precio b{font-family:var(--display);font-weight:800;font-size:2.6rem;
  letter-spacing:-.05em;color:var(--fuego);line-height:1;
  font-variant-numeric:tabular-nums}
.plan-precio span{font-size:.9rem;color:#5A6676;max-width:18ch;line-height:1.35}
.plan-cta{display:inline-block;margin-top:1.3rem;background:var(--naranja);
  color:var(--azul);border-radius:14px;padding:1rem 2.2rem;text-decoration:none;
  font-weight:800;font-size:1.05rem}
.plan-cta:hover{background:var(--brasa)}
.plan-nota{margin:.9rem 0 0!important;font-size:.85rem;color:#6B7789;
  max-width:42ch}

/* ---------- los dos balones ---------- */
.titulo-seccion{font-size:clamp(1.6rem,3.6vw,2.2rem);color:var(--azul)}
.balones-fila{display:grid;gap:1.6rem;margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.balon{position:relative;display:grid;gap:1rem;padding:1.4rem 1.2rem 1.5rem;
  border-radius:20px;background:#fff;
  box-shadow:0 1px 2px rgba(1,21,54,.05),0 12px 28px rgba(1,21,54,.07)}
/* El que más se vende manda: fondo cálido y el sello. La diferencia la hace el
   peso visual, no una etiqueta más. */
/* Las fotos del catálogo vienen con FONDO BLANCO, no recortadas. Cualquier
   color detrás —un degradado cálido, un gris— dibuja el cuadrado de la foto
   sobre la tarjeta. Así que el fondo es blanco y lo que distingue al balón que
   más se vende es el borde naranja y el sello, no un tinte. */
.balon--principal{background:#fff;
  box-shadow:inset 0 0 0 2px rgba(248,101,0,.42),
    0 1px 2px rgba(1,21,54,.05),0 16px 34px rgba(248,101,0,.14)}
.balon-sello{position:absolute;top:1rem;left:1.2rem;background:var(--naranja);
  color:var(--azul);font-size:.72rem;font-weight:800;letter-spacing:.02em;
  padding:.3rem .7rem;border-radius:999px}
.balon-foto{display:block;padding:1.2rem 0 .4rem}
.balon-foto img{width:100%;height:auto;max-height:15rem;object-fit:contain;
  display:block;filter:drop-shadow(0 16px 22px rgba(120,50,10,.2))}
.balon-datos h3{font-size:1.25rem;color:var(--azul)}
.balon-datos h3 a{text-decoration:none;color:inherit}
.balon-datos h3 a:hover{text-decoration:underline;
  text-decoration-color:var(--naranja);text-decoration-thickness:3px;
  text-underline-offset:3px}
.balon-precio{display:flex;align-items:baseline;gap:.45rem;margin:.5rem 0 1rem;
  font-family:var(--display);font-weight:800;font-size:2.15rem;
  letter-spacing:-.05em;color:var(--fuego);line-height:1;
  font-variant-numeric:tabular-nums}
.balon-precio span{font-family:var(--texto);font-weight:500;font-size:.82rem;
  color:#6B7789;letter-spacing:0}
.balon-add{width:100%;border:0;border-radius:12px;background:var(--naranja);
  color:var(--azul);font:inherit;font-weight:800;font-size:1rem;padding:.95rem;
  cursor:pointer;min-height:3rem}
.balon-add:hover{background:var(--brasa)}

/* ---------- repuestos: fila chica ---------- */
.accesorios-sub{margin:.5rem 0 0;color:#5A6676}
.accesorios-fila{display:grid;gap:1.1rem;margin-top:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.acc{display:grid;gap:.4rem;text-align:center;padding:1rem .8rem 1.1rem;
  border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--linea)}
.acc-foto{display:block}
.acc-foto img{width:100%;height:7rem;object-fit:contain;display:block;
  filter:drop-shadow(0 8px 12px rgba(120,50,10,.16))}
.acc h3{font-size:.95rem;color:var(--azul);line-height:1.2}
.acc h3 a{text-decoration:none;color:inherit}
.acc h3 a:hover{text-decoration:underline}
.acc-precio{margin:0;font-family:var(--display);font-weight:800;
  font-size:1.25rem;color:var(--fuego);letter-spacing:-.03em}
.acc-add{border:0;border-radius:10px;background:var(--nata);color:var(--azul);
  font:inherit;font-weight:700;font-size:.88rem;padding:.6rem;cursor:pointer;
  min-height:2.5rem}
.acc-add:hover{background:var(--azul);color:#fff;box-shadow:none}

/* ==================== folleto del Plan Premium ====================
   Flota sobre el catálogo, con el fondo desenfocado para que lo de atrás siga
   ahí —el cliente no ha salido de ninguna parte— pero deje de competir. */
.folleto-capa{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:1.25rem;background:rgba(1,21,54,.55);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .22s ease}
.folleto-capa[data-visible="1"]{opacity:1}
.folleto-capa[data-cerrando="1"]{opacity:0}
.folleto{position:relative;width:min(24rem,100%);max-height:92vh;overflow:auto;
  background:#fff;border-radius:22px;overflow-x:hidden;
  box-shadow:0 30px 70px rgba(1,21,54,.4);
  transform:translateY(14px) scale(.98);transition:transform .26s cubic-bezier(.2,.9,.3,1)}
.folleto-capa[data-visible="1"] .folleto{transform:none}
@media (prefers-reduced-motion:reduce){
  .folleto,.folleto-capa{transition:none}
  .folleto{transform:none}
}
/* La equis: 44 px de área táctil. La de la pasarela medía 28 y por eso la
   ventana se sentía bloqueante — ese error no se repite acá. */
.folleto-x{position:absolute;top:.6rem;right:.6rem;z-index:2;
  width:44px;height:44px;display:grid;place-items:center;border:0;
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--azul);
  cursor:pointer;box-shadow:0 2px 8px rgba(1,21,54,.2)}
.folleto-x:hover{background:#fff}
.folleto-x svg{width:20px;height:20px}
.folleto-cab{background:var(--naranja);color:var(--azul);padding:1.6rem 1.4rem 1.4rem}
.folleto-cab h2{font-size:1.75rem;color:#fff;max-width:13ch;line-height:1}
.folleto-cab p{margin:.7rem 0 0;font-size:.95rem;line-height:1.45;
  color:rgba(255,255,255,.94);max-width:30ch}
.folleto-foto{width:100%;height:13rem;object-fit:cover;display:block}
.folleto-pie{padding:1.3rem 1.4rem 1.5rem;display:grid;gap:.5rem}
.folleto-precio{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  margin:0 0 .4rem}
.folleto-precio b{font-family:var(--display);font-weight:800;font-size:2.2rem;
  letter-spacing:-.05em;color:var(--fuego);line-height:1;
  font-variant-numeric:tabular-nums}
.folleto-precio span{font-size:.82rem;color:#5A6676;max-width:17ch;line-height:1.3}
.folleto-cta{display:block;text-align:center;background:var(--naranja);color:var(--azul);
  border-radius:13px;padding:1rem;text-decoration:none;font-weight:800;
  font-size:1.02rem}
.folleto-cta:hover{background:var(--brasa)}
.folleto-no{border:0;background:none;color:#6B7789;font:inherit;font-size:.9rem;
  font-weight:600;padding:.7rem;cursor:pointer;min-height:2.75rem;border-radius:10px}
.folleto-no:hover{background:var(--nata);color:var(--azul)}

/* ---------- la página de preguntas ----------
   Acá el objetivo es LEER, no decidir: medida corta, aire entre preguntas y
   nada compitiendo al costado. En la portada quedan cuatro; acá están todas. */
.faq-todas{max-width:46rem}
.faq-cierre{max-width:46rem;margin-top:3rem;padding-top:2rem;
  border-top:1px solid var(--linea)}
.faq-cierre h2{font-size:1.5rem;color:var(--azul)}
.faq-cierre p{margin:.6rem 0 0;color:#5A6676}

/* ---------- el precio del Plan Premium, por partes ----------
   Uno solo para todo el sitio (plantilla.desglose_plan). Hereda el color del
   fondo en el que caiga: naranja del héroe, azul del tablero, blanco de la
   ficha. La suscripción arriba con su devolución al lado —lo que baja el
   miedo a pagarla—, el balón debajo, y el total separado por una raya: es
   el número que el cliente va a ver en su pedido, y verlo antes evita la
   sorpresa que hace abandonar el carrito. */
.plan-desglose{display:grid;gap:.2rem;margin:.75rem 0 0;font-size:1rem;
  line-height:1.35;max-width:26rem}
.plan-desglose > span{display:block}
.plan-desglose b{font-weight:800;font-variant-numeric:tabular-nums}
.plan-desglose small{display:block;font-size:.8em;opacity:.85}
.plan-desglose .plan-total{margin-top:.35rem;padding-top:.45rem;
  border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 35%,transparent)}
.plan-desglose .plan-total b{font-size:1.35em;letter-spacing:-.02em}
.precios th small .plan-desglose{font-size:inherit;margin-top:.3rem}
/* En la tabla el total ya es la columna del precio: no se repite. */
.precios .plan-total{display:none}
.precios .plan-desglose small{font-size:.95em}

/* ---------- el precio de hoy, en el héroe (7-oct-2026) ----------
   Tarjeta blanca sobre la foto: una fila por balón con su precio y su botón
   de WhatsApp. En el teléfono, el nombre arriba y precio + botón debajo. */
.hero-precio{background:#fff;color:var(--azul);border-radius:20px;padding:.2rem 1.1rem .3rem;
  max-width:30rem;box-sizing:border-box;margin:1.2rem 0 .3rem;box-shadow:0 18px 40px -18px rgba(1,21,54,.6)}
.hp-tit{margin:.8rem 0 0;font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#6B7789}
.hp-fila{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"que" "precio" "wa";
  align-items:center;gap:.45rem .9rem;padding:.85rem 0}
.hp-fila+.hp-fila{border-top:1px solid #e7ebf2}
.hp-que{grid-area:que;margin:0;font-weight:700;font-size:1rem;color:var(--azul)}
.hp-que b{font-weight:900;letter-spacing:-.01em}
.hp-que i{font-style:normal;font-weight:800;color:var(--naranja-t)}
.hp-precio{grid-area:precio;margin:0;font-family:var(--display);font-weight:800;font-size:2.1rem;
  letter-spacing:-.03em;line-height:1;color:var(--azul);white-space:nowrap}
.hp-precio small{font-family:inherit;font-size:.8rem;font-weight:600;letter-spacing:0;color:#6B7789;margin-left:.45rem}
.hp-wa{grid-area:wa;display:inline-flex;align-items:center;gap:.45rem;min-height:2.9rem;padding:.6rem 1.05rem;
  border-radius:999px;background:#15803D;color:#fff;font-weight:800;font-size:.95rem;text-decoration:none;white-space:nowrap}
.hp-wa svg{width:1.2rem;height:1.2rem;fill:currentColor;flex:none}
.hp-wa:hover{background:#116B33}
.hp-wa{justify-content:center}
@media (min-width:30rem){.hp-fila{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"que que" "precio wa"}}

/* ---------- cómo llega tu balón ----------
   A lo ancho: el título a un lado, los tres pasos al otro unidos por una
   línea. En el móvil, la línea baja por la izquierda y el texto va al lado. */
.llega-in{max-width:74rem;margin:0 auto;display:grid;gap:2rem 3rem}
.llega-cab h2{font-size:clamp(2rem,5vw,3.2rem)}
.llega-lema{margin:.9rem 0 0;font-size:1.05rem;color:#4a5c78;font-weight:600}
.llega-lema span{display:block}
.llega-pasos{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;position:relative}
.llega-pasos li{display:grid;grid-template-columns:3.4rem 1fr;gap:1rem;position:relative}
.llega-ico{width:3.4rem;height:3.4rem;border-radius:50%;background:#FFF1E6;color:var(--fuego);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  box-shadow:0 0 0 6px var(--crema)}
.llega-ico svg{width:1.6rem;height:1.6rem}
.llega-pasos li:not(:last-child)::before{content:"";position:absolute;left:1.7rem;top:3.4rem;
  bottom:-1.4rem;border-left:2px dashed #F5C39A}
.llega-cuando{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--azul);border-radius:999px;
  padding:.18rem .6rem}
.llega-pasos h3{margin:.45rem 0 .25rem;font-size:1.25rem;color:var(--azul)}
.llega-pasos p{margin:0;color:#4a5c78;font-size:.97rem;max-width:30ch}
@media (min-width:56rem){
  .llega-in{grid-template-columns:minmax(0,18rem) minmax(0,1fr);align-items:center}
  .llega-pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
  .llega-pasos li{grid-template-columns:1fr;gap:.8rem}
  .llega-pasos li:not(:last-child)::before{left:3.4rem;right:-1.6rem;top:1.7rem;bottom:auto;
    border-left:0;border-top:2px dashed #F5C39A}
}

/* ---------- dónde llevamos: el mapa ---------- */
.donde-in{max-width:74rem;margin:0 auto;display:grid;gap:2rem 3rem;align-items:center}
@media (min-width:56rem){.donde-in{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
.donde-texto h2{font-size:clamp(2rem,5vw,3.2rem)}
.donde-texto > p{margin:.9rem 0 0;color:#4a5c78;max-width:44ch}
.donde-lista{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.donde-lista a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .95rem;
  border-radius:999px;background:var(--nata);color:var(--azul);font-weight:700;
  font-size:.92rem;text-decoration:none;transition:background .15s,color .15s}
.donde-lista a:hover,.donde-lista a:focus-visible{background:var(--naranja);color:var(--azul)}
.donde-otro{margin:1.2rem 0 0!important;font-size:.92rem}
.donde-otro a{color:#B84300;font-weight:700}
.donde-mapa{margin:0;background:#E4EEF8;border-radius:22px;padding:.6rem;overflow:hidden}
.mapa-lima{display:block;width:100%;height:auto}
.mapa-otro{fill:#F6F8FB;stroke:#D5DEE9;stroke-width:1}
.mapa-zona path{fill:var(--naranja);stroke:#fff;stroke-width:1.6;transition:fill .15s}
.mapa-zona:hover path,.mapa-zona:focus-visible path,.mapa-zona--aqui path{fill:var(--azul)}
.mapa-zona:focus-visible{outline:none}
.mapa-rotulos text{font:700 11.5px var(--texto);fill:#fff;text-anchor:middle;
  pointer-events:none;paint-order:stroke;stroke:rgba(150,50,0,.35);stroke-width:2px}

/* ---------- lo que nos preguntan: globos ---------- */
.charla{max-width:74rem;margin:1.6rem auto 0}
.charla-pestanas{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;
  margin:0 0 1.4rem;padding:.1rem}
.charla-pestanas::-webkit-scrollbar{display:none}
.charla-pestanas button{position:relative;overflow:hidden;flex:none;min-height:2.75rem;
  padding:0 1.15rem;border:0;border-radius:999px;background:var(--nata);color:var(--azul);
  font:inherit;font-weight:700;font-size:.92rem;cursor:pointer}
.charla-pestanas button[aria-selected="true"]{background:var(--azul);color:#fff}
/* La barra ES el reloj del carrusel: cuando se llena, pasa de hoja. */
.charla-barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brasa);
  transform:scaleX(0);transform-origin:left}
[aria-selected="true"] .charla-barra{animation:charla-avanza var(--dur,20s) linear forwards}
.charla:not([data-corre="1"]) [aria-selected="true"] .charla-barra{animation-play-state:paused}
@keyframes charla-avanza{to{transform:scaleX(1)}}
.charla-pista{display:flex;gap:2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain}
.charla-pista::-webkit-scrollbar{display:none}
.charla-hoja{flex:0 0 100%;scroll-snap-align:start;display:grid;gap:1.4rem 2.4rem;
  align-content:start}
@media (min-width:56rem){.charla-hoja{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.charla-barra{display:none}}
.charla-par{display:grid;gap:.55rem}
.globo{position:relative;max-width:88%;border-radius:18px;padding:.75rem 1rem .85rem}
.globo p{margin:.2rem 0 0;line-height:1.45}
.globo-quien{display:flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700}
.globo--cliente{justify-self:start;background:var(--nata);color:var(--azul);
  border-bottom-left-radius:4px}
.globo--cliente .globo-quien{color:#4a5c78}
.globo--cliente .globo-quien::before{content:"";width:1.35rem;height:1.35rem;border-radius:50%;
  background:#C9D3E0 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='9' r='4' fill='white'/><path d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6' fill='white'/></svg>") center/80% no-repeat}
.globo--nos{justify-self:end;background:var(--azul);color:#fff;border-bottom-right-radius:4px}
.globo--nos .globo-quien{color:#FFB27A}
.globo--nos .globo-quien img{border-radius:50%;background:#fff}
.globo--nos i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  width:1rem;height:1rem;border-radius:50%;background:#13773D;color:#fff;font-size:.62rem}
.charla-banda .tras-faq{max-width:74rem;margin:2rem auto 0}
.mapa-rotulos .mapa-vecino{font-size:10px;font-weight:600;fill:#8796AB;stroke:none}
.mapa-rotulos .mapa-chico{font-size:9.5px}
@media (max-width:40rem){
  .mapa-rotulos text{font-size:17px}
  .mapa-rotulos .mapa-chico,.mapa-rotulos .mapa-vecino{display:none}
}

/* ---------- el flyer de la portada ----------
   Un volante en tarjeta: la foto de la entrega arriba, la promesa, los tres
   precios del día en fila y una sola acción grande. El Premium va como enlace
   secundario, no como segundo botón: una decisión por pantalla. */
.flyer{width:min(25rem,100%)}
.flyer-foto{position:relative;height:clamp(12rem,34vh,16rem);overflow:hidden}
.flyer-foto img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.flyer-sello{position:absolute;left:1rem;bottom:1rem;margin:0;background:var(--naranja);
  color:var(--azul);font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:.35rem .8rem}
.flyer-cuerpo{padding:1.2rem 1.3rem 1.2rem;display:grid;gap:.75rem}
.flyer-kicker{margin:0;font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#B84300}
.flyer h2{font-size:1.5rem;line-height:1.05;color:var(--azul);margin:0}
.flyer-precios{list-style:none;margin:.2rem 0 .2rem;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.flyer-precios li{background:var(--nata);border-radius:14px;padding:.6rem .5rem;
  display:grid;gap:.1rem;text-align:center}
.flyer-precios span{font-size:.74rem;color:#4a5c78;font-weight:600}
.flyer-precios b{font-family:var(--display);font-weight:800;font-size:1.15rem;
  color:var(--fuego);letter-spacing:-.02em}
.flyer-plan{font-size:.88rem;font-weight:700;color:var(--azul);text-align:center;
  min-height:2.75rem;display:flex;align-items:center;justify-content:center}
.flyer .folleto-no{justify-self:center}
.folleto-cta[aria-busy]{opacity:.85;cursor:progress}
/* Volante Premium (sep-2026): mismo lenguaje que las historias — el total en
   naranja, el desglose en una línea chica y una burbuja azul de acento. */
.flyer-texto{margin:0;color:#4a5c78;font-size:.95rem;line-height:1.35}
.flyer-precios li:last-child{background:var(--naranja)}
.flyer-precios li:last-child span,.flyer-precios li:last-child b{color:#fff}
.flyer-nota{margin:-.2rem 0 0;font-size:.74rem;line-height:1.35;color:#6b7789}
.flyer-foto::after{content:"";position:absolute;right:1.1rem;bottom:1.1rem;width:.9rem;
  height:.9rem;border-radius:50%;background:var(--azul);box-shadow:-1.6rem -.9rem 0 -.2rem var(--azul)}
.flyer-precios b{white-space:nowrap;font-size:clamp(.98rem,4.2vw,1.15rem)}
/* Teléfonos bajos: la foto cede alto para que «Ahora no» quede a la vista. */
@media (max-height:700px){
  .flyer-foto{height:9.5rem}
  .flyer-cuerpo{gap:.55rem;padding-top:.9rem}
  .flyer h2{font-size:1.3rem}
}
body:has(.folleto-capa) .baja{display:none}
/* Escritorio: las escenas son verticales; en 16:9 se cortaban las caras.
   Foto entera a un lado, la frase al otro, sobre el gris de las tarjetas. */
@media (min-width:56rem){
  .ficha-escena figure{aspect-ratio:auto;display:grid;align-items:center;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3rem;padding:1.4rem}
  .ficha-escena img{border-radius:18px;max-height:34rem;width:auto;max-width:100%;justify-self:center}
  .ficha-escena figcaption{position:static;background:none;padding:0 2rem 0 0;
    color:var(--azul);font-size:clamp(1.8rem,3vw,2.6rem);max-width:18ch}
}
/* En el móvil, sobre una foto apaisada la frase taparía media escena: va debajo. */
@media (max-width:55.99rem){
  .ficha-escena--ancha figcaption{position:static;background:none;color:var(--azul);
    padding:1rem 1.2rem 1.2rem}
}

/* ------------------------------------------------------------ Mi cuenta */
.cuenta-banda{max-width:44rem}
.cuenta-cargando{color:var(--gris)}
.cuenta-tarjeta{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:1.3rem 1.3rem 1.1rem;margin-bottom:1rem}
.cuenta-h{font-family:var(--display, "Archivo"),sans-serif;font-weight:800;font-size:1.15rem;margin:0 0 .8rem;letter-spacing:-.02em}
.cuenta-texto{margin:0 0 .9rem;line-height:1.5}
.cuenta-pedir{background:var(--nata);border-color:transparent}
.cuenta-premium{border-color:var(--naranja)}
.cuenta-acciones{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.cuenta-sec{border:1px solid var(--naranja);background:#fff;color:var(--naranja-t);border-radius:10px;
  padding:.75rem 1.1rem;font:inherit;font-weight:700;cursor:pointer;min-height:2.75rem}
.cuenta-sec:hover{background:var(--nata)}
.cuenta-link{border:0;background:none;padding:.4rem 0;font:inherit;font-weight:700;color:var(--naranja-t);cursor:pointer}
.cuenta-peligro{color:#c0392b}
.cuenta-select{width:100%;border:1px solid var(--linea);border-radius:11px;padding:.75rem .8rem;font:inherit;background:#fff}
.cuenta-modelos{display:flex;gap:.5rem}
.cuenta-modelo{flex:1;display:flex;align-items:center;gap:.5rem;border:1px solid var(--linea);border-radius:11px;padding:.7rem .8rem;cursor:pointer}
.cuenta-modelo:has(input:checked){border-color:var(--naranja);background:#FFF4EC;font-weight:700}
.gc-campo .cuenta-modelo input{width:auto;margin:0;padding:0;accent-color:var(--naranja)}
.cuenta-chips{display:flex;gap:.4rem;margin-top:.45rem;flex-wrap:wrap}
.cuenta-chip{border:1px solid var(--linea);background:#fff;border-radius:999px;padding:.3rem .8rem;font:inherit;font-size:.85rem;cursor:pointer}
.cuenta-error{color:#c0392b;font-size:.9rem;margin:.2rem 0 .8rem}
.cuenta-error:empty{display:none}
.cuenta-dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:0 0 .6rem}
.cuenta-dl dt{color:var(--gris);font-size:.9rem}
.cuenta-dl dd{margin:0;font-weight:600}
.cuenta-dirs,.cuenta-pedidos{list-style:none;margin:0 0 .8rem;padding:0}
.cuenta-dir,.cuenta-pedido{border-top:1px solid var(--linea);padding:.8rem 0}
.cuenta-dir:first-child,.cuenta-pedido:first-child{border-top:0;padding-top:0}
.cuenta-dir p{margin:.1rem 0}
.cuenta-dir-cab{display:flex;align-items:center;gap:.5rem;margin:0 0 .2rem}
.cuenta-badge{background:var(--naranja);color:var(--azul);border-radius:999px;padding:.05rem .55rem;font-size:.72rem;font-weight:800}
.cuenta-dir-acc{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.3rem}
.cuenta-pedido{display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem}
.cuenta-pedido .gc-ayuda{grid-column:1;margin:0}
.cuenta-total{grid-column:2;grid-row:1 / span 2;align-self:center;font-variant-numeric:tabular-nums}
.cuenta-pedido-cod{font-weight:800;color:var(--azul)}
.cuenta-estado{font-size:.75rem;font-weight:700;border-radius:999px;padding:.08rem .55rem;background:var(--nata);color:var(--naranja-t)}
.cuenta-estado.e-pagado,.cuenta-estado.e-entregado{background:#E6F7ED;color:#127a42}
.cuenta-estado.e-anulado{background:#FBE9E9;color:#b12a2a}
.cuenta-salir{text-align:center;margin-top:1.5rem}
/* Checkout: las direcciones guardadas, un toque y quedan puestas. */
.gc-mis-dirs{margin:0 0 .9rem}
.gc-mis-dirs-t{font-size:.82rem;font-weight:700;margin:0 0 .4rem}
.gc-mi-dir{display:block;width:100%;text-align:left;border:1px solid var(--linea);background:#fff;border-radius:11px;
  padding:.6rem .8rem;margin-bottom:.4rem;font:inherit;cursor:pointer}
.gc-mi-dir b{display:block;font-size:.85rem}
.gc-mi-dir span{display:block;font-size:.85rem;color:var(--gris)}
.gc-mi-dir[aria-pressed="true"]{border-color:var(--naranja);background:#FFF4EC}
.cuenta-numero{margin:0 0 1rem;font-size:.95rem}
.cuenta-numero .cuenta-link{padding:0}

/* Vistas aprobadas: el producto completo no puede quedar detrás del precio.
   Contain conserva su proporción; en móvil la imagen tiene su propio espacio. */
.hero-producto .hero-fondo{left:52%;top:5rem;bottom:auto;right:2rem;
  height:min(48vw,46rem);border-radius:1.2rem;background:#e6e6e6}
.hero-producto .hero-foto{object-fit:contain;object-position:center}
.hero-producto::before{background:linear-gradient(90deg,#E15400 0%,#E15400 50%,transparent 52%)}
@media(max-width:56rem){
  .hero-producto .hero-fondo{position:relative;inset:auto;width:100%;height:auto;
    aspect-ratio:1;padding-top:3rem;box-sizing:content-box;border-radius:0}
  .hero-producto .hero-foto{top:3rem;height:calc(100% - 3rem)}
  .hero-producto::before{display:none}
  .hero-producto .hero-texto{padding-top:1.5rem}
}

/* Una decisión por bloque: planes, luego recargas y accesorios. */
.planes-home .cabeza{max-width:48rem;margin:0 auto 2rem;text-align:center}
.planes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;max-width:72rem;margin:auto}
.plan-home{display:grid;grid-template-columns:40% minmax(0,1fr);gap:1rem;align-items:center;background:white;border:1px solid #e3e8ef;border-radius:24px;padding:1.5rem}
.plan-home img{width:100%;height:18rem;object-fit:contain;border-radius:12px}
.plan-home h3{font-size:1.65rem;margin:.2rem 0 .7rem}
.plan-peso{color:var(--naranja-t);font-weight:800;margin:0}
.plan-importe{font-weight:800;font-size:1.65rem;margin:.5rem 0}
.plan-importe small{display:block;font-size:.85rem;font-weight:400}
.plan-home .btn{margin-top:.75rem;padding:.8rem 1rem;text-align:center}
.plan-detalle{display:block;margin-top:.8rem;font-weight:700}
.ayuda-home{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;padding:1.5rem;background:var(--crema)}
.ayuda-home a{font-weight:700}
@media(max-width:60rem){.planes-grid{grid-template-columns:1fr}.plan-home{max-width:36rem;width:100%;margin:auto}}
@media(max-width:30rem){.plan-home{padding:1rem;grid-template-columns:34% minmax(0,1fr)}.plan-home img{height:16rem}.plan-home h3{font-size:1.35rem}.plan-home .btn{font-size:.85rem}}

@media(max-width:30rem){
 .plan-home{grid-template-columns:1fr;text-align:center}
 .plan-home img{height:13rem}
 .plan-home h3{font-size:1.5rem}
 .plan-home .btn{font-size:1rem}
}

#premium,#tienda{scroll-margin-top:6rem}
.pagina-precios #precios{margin-top:3rem}
.pagina-precios .precios tbody th{color:var(--azul)}
.pagina-precios .precios caption,.pagina-precios .precios small,.pagina-precios .precios thead th{color:#4a5c78}
.pagina-precios .precios th,.pagina-precios .precios td{border-bottom:1px solid #dce3ec}
.pagina-precios .precios .p{color:#a43d00}

/* Zonas de toque de 44 px (auditoría 15-oct-2026): cabecera, «Ver detalles»,
   enlaces de ayuda y del pie medían 21–40 px en el celular. */
.cab .logo,.cab-carrito,.gc-zona-btn{min-height:44px}
.plan-detalle{display:flex;align-items:center;min-height:44px;margin-top:.3rem}
.ayuda-home a,.pie-seguir,.pie li a,.pie-col > a{display:inline-flex;align-items:center;min-height:44px}
.ficha-google a{display:inline-block;padding:12px 0;margin:-12px 0}
/* A 390 px la marca se cortaba en «Pri…»: mejor solo el logotipo que un nombre
   mutilado. El nombre sigue leyéndose por lectores de pantalla (aria-label). */
@media (max-width:26.5rem){.cab .logo span{display:none}}