/* =====================================================================
   GREEN LUX — Portada (traducción del diseño de Claude Design)
   =====================================================================
   Esta hoja SOLO la carga inicio.php. El resto de la tienda —catálogo,
   ficha, carrito, pago, panel— se sigue sirviendo con style.css sin una
   línea de diferencia, y no descarga ni un byte de este archivo.

   Todo lo de aquí lleva prefijo `lp-` (landing page) por una razón práctica:
   nada de esto puede colarse en otra pantalla por accidente, y el día que la
   portada cambie otra vez se borra este archivo entero sin dejar reglas
   huérfanas en la hoja principal.

   NINGÚN color, radio, sombra ni curva se escribe a mano: todos salen de las
   variables de style.css. El diseño venía con los hexadecimales incrustados
   —#DBFE2D, #16161f, cubic-bezier(.22,.61,.36,1) repetido 21 veces— y así
   funciona, pero el día que la marca cambie de verde habría que buscar y
   reemplazar en dos sitios. Con var(--accent) se cambia en uno.

   Tampoco se repite la tipografía. style.css ya declara que h1-h4 van en
   Clash Display, 800, mayúsculas, con el word-spacing que necesita esa
   fuente; el diseño lo repetía en cada título porque su lienzo no tenía
   hoja de estilos. Aquí los títulos son <h1>/<h2> normales y heredan.
   ===================================================================== */

/* ── Cabecera en píldora flotante ─────────────────────────────────────
   Reemplaza a .site-header en esta página. Va pegada arriba pero
   "flotando": el envoltorio ocupa el ancho y no recibe el ratón
   (pointer-events:none), y solo la píldora de dentro lo recupera. Sin eso,
   una banda invisible de 60 px de alto taparía lo que hubiera debajo.   */
.lp-navwrap{
  position:sticky; top:0; z-index:60;
  display:flex; justify-content:center;
  padding:14px 16px 0; pointer-events:none;
}
.lp-nav{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:6px;
  max-width:100%; padding:8px;
  border-radius:100px; border:1px solid var(--border-2);
  background:rgba(16,16,23,.82); backdrop-filter:blur(14px);
  transition:box-shadow .25s var(--ease);
}
/* Al despegarse del inicio gana sombra y un filo lima. Lo pone el JS. */
.lp-nav.fijo{
  box-shadow:0 14px 40px -18px rgba(0,0,0,.9), 0 0 0 1px var(--accent-glow);
}
.lp-nav-brand{ display:flex; align-items:center; padding:0 10px 0 6px; flex:none; }
.lp-nav-brand img{ height:26px; width:auto; object-fit:contain; }
.lp-nav-sep{ width:1px; height:20px; background:var(--border-2); flex:none; }
.lp-nav-links{ display:flex; align-items:center; gap:2px; min-width:0; overflow-x:auto;
  scrollbar-width:none; }
.lp-nav-links::-webkit-scrollbar{ display:none; }
.lp-nav-links a{
  padding:8px 14px; border-radius:100px;
  font-size:.84rem; font-weight:500; color:var(--text2); white-space:nowrap;
  transition:color .18s, background .18s;
}
.lp-nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.lp-nav-links a.on{ color:var(--text); font-weight:600; background:rgba(255,255,255,.07); }
.lp-nav-cart{
  position:relative; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border-2); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:border-color .18s, color .18s;
}
.lp-nav-cart:hover{ border-color:var(--accent); color:var(--accent); }
/* El contador del carrito. El borde del color del fondo lo recorta contra el
   icono, que es lo que le da el aspecto de pegatina. */
.lp-nav-cart i{
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--accent); color:var(--bg);
  border:2px solid var(--bg); border-radius:100px;
  font-size:.66rem; font-weight:800; font-style:normal;
  display:grid; place-items:center;
}
.lp-nav-cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:100px;
  background:linear-gradient(180deg,var(--accent-light),var(--accent));
  color:var(--bg); font-size:.82rem; font-weight:700; text-transform:uppercase;
  white-space:nowrap; flex:none;
  box-shadow:0 0 24px -8px var(--accent-glow);
  transition:transform .18s var(--ease);
}
.lp-nav-cta:hover{ transform:translateY(-1px); }

/* En pantallas estrechas la píldora se queda sin sitio: el botón de ofertas se
   va y los enlaces se deslizan. Ojo: desde que se quitó la barra inferior,
   esta píldora ES la navegación del celular en la portada —los tres enlaces y
   el carrito no tienen otro sitio donde salir—, así que nada más de aquí
   dentro se puede ocultar sin dejar la página sin salidas. */
@media (max-width:720px){
  .lp-navwrap{ padding:10px 10px 0; }
  .lp-nav{ width:100%; justify-content:space-between; }
  .lp-nav-brand img{ height:22px; }
  .lp-nav-cta{ display:none; }
  .lp-nav-sep{ display:none; }

  /* 44px de alto para el dedo. Medidos, daban 38: por debajo de eso el
     toque falla y activa el enlace de al lado, y aquí los tres van
     pegados. El ancho se deja como está —el texto ya los separa— y el
     alto crece hacia adentro, así que la píldora no cambia de tamaño. */
  .lp-nav-links a{ min-height:44px; display:inline-flex; align-items:center; }
  .lp-nav-cart{ width:44px; height:44px; }
}


/* ── Rótulo de sección con su rayita ──────────────────────────────────
   Es el .eyebrow de siempre más una línea de 32 px. El diseño la repetía
   como un <span> con estilos en línea en cada sección; aquí es ::before. */
.lp-rotulo{ display:inline-flex; align-items:center; gap:12px; }
.lp-rotulo::before{
  content:""; width:32px; height:1px; background:var(--accent); opacity:.6; flex:none;
}

.lp-seccion{ padding:clamp(48px,7vw,88px) 22px 0; }
.lp-ancho{ max-width:var(--maxw); margin-inline:auto; }
.lp-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:28px;
}
.lp-head h2{ margin-top:10px; }

/* ── 1 · Hero ─────────────────────────────────────────────────────────
   Una caja con borde lima encendido. El fondo es la misma foto que ya usa
   el hero actual (assets/img/hero-poster.jpg), muy apagada, con un velo
   encima para que el texto tenga contraste suficiente.                  */
.lp-hero{ padding:clamp(20px,3vw,40px) 22px clamp(36px,5vw,64px); }
.lp-hero-caja{
  position:relative; overflow:hidden;
  border:2px solid rgba(219,254,45,.55); border-radius:26px;
  padding:clamp(32px,4vw,56px) clamp(24px,4vw,56px);
  box-shadow:0 0 0 1px rgba(219,254,45,.18),
             0 0 60px -10px rgba(219,254,45,.30),
             inset 0 0 60px -20px rgba(219,254,45,.22);
}
.lp-hero-fondo{
  position:absolute; inset:0; opacity:.22;
  background-size:cover; background-position:center;
  transform:translate3d(0,var(--lp-y,0px),0) scale(1.06);
  transition:opacity .8s var(--ease);
}
/* Con el video en marcha el fondo sube de .22 a .34: al 22 % el movimiento
   apenas se distingue debajo del velo, y un video que no se percibe son
   819 KB tirados. El texto no pierde contraste porque .lp-hero-velo tapa
   su lado con negro al 94 %; lo que se aclara es la mitad derecha, donde
   solo flota la foto del producto. */
.lp-hero-fondo.con-video{ opacity:.34; }
/* El póster sigue debajo, sin quitarse: es lo que se ve mientras el video
   llega, y lo que queda si el archivo falla a mitad de la reproducción. */
.lp-hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity .8s var(--ease);
}
.lp-hero-fondo.con-video .lp-hero-video{ opacity:1; }
.lp-hero-velo{
  position:absolute; inset:0;
  background:radial-gradient(700px 420px at 78% 55%, rgba(167,37,252,.30), transparent 62%),
             linear-gradient(90deg, rgba(10,10,15,.94) 0%, rgba(10,10,15,.70) 52%, rgba(10,10,15,.35) 100%);
}
/* auto-fit con minmax: en cuanto no caben dos columnas de 340 px se apilan
   solas, sin necesidad de una media query. */
.lp-hero-grid{
  position:relative;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:44px; align-items:center;
}
.lp-hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px; border-radius:100px;
  border:1px solid rgba(219,254,45,.55); color:var(--accent);
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  box-shadow:0 0 20px -4px rgba(219,254,45,.45), inset 0 0 14px -6px rgba(219,254,45,.6);
}
.lp-hero h1{
  font-size:clamp(2.6rem,4.6vw,4.6rem); line-height:.95; letter-spacing:-.015em;
  margin:20px 0 0;
}
/* La altura de la línea que rota NO se reserva aquí. Llegó a poner
   `min-height:1.05em` —una línea— y era falso: con el ancho de un celular
   "comestibles thc." ocupa dos y "cbd." una, así que el titular seguía
   saltando 38 px cada 2.2 s. El número correcto depende del ancho de la
   pantalla y de la fuente cargada, y eso solo se sabe midiendo: lo hace
   landing.js con las palabras reales, tras document.fonts.ready.

   Sin JavaScript no hay rotación, así que tampoco hay nada que reservar. */
.lp-hero h1 .lp-linea{ display:block; }
.lp-palabra{
  display:inline-block; color:var(--accent);
  text-shadow:0 0 6px rgba(255,255,255,.55),
              0 0 22px rgba(219,254,45,.9),
              0 0 60px rgba(219,254,45,.55);
}
.lp-palabra.entra{ animation:lpPalabra .45s var(--ease) both; }
@keyframes lpPalabra{
  from{ opacity:0; transform:translateY(10px); filter:blur(6px); }
  to  { opacity:1; transform:none;             filter:blur(0);  }
}
.lp-hero-lead{ font-size:1.08rem; color:#c8c8d8; max-width:40ch; margin:20px 0 0; }
.lp-hero-cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
/* Los datos de confianza bajo el hero. Sin borde ni caja: una línea fina
   arriba y aire, para que no compitan con los botones. */
.lp-hero-datos{
  display:flex; gap:26px; margin-top:34px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--border-2);
}
.lp-hero-datos b{
  display:block; font-family:var(--font-head); font-size:1.5rem; color:var(--text);
}
/* El lima queda reservado para el regalo, que es lo único de esta fila que es
   una promoción y no un dato permanente. Estuvo un rato sin usarse —lo llevaba
   el precio "Desde", que se quitó por repetir la píldora de al lado— y en ese
   hueco la regla se borró: una regla que no alcanza a ningún elemento hace que
   quien lea el archivo diseñe alrededor de un fantasma. Vuelve ahora que hay
   algo que pintar. */
.lp-hero-datos .lp-destaca{ color:var(--accent); }
.lp-hero-datos span{
  font-size:.78rem; color:var(--text2); letter-spacing:.06em; text-transform:uppercase;
}
.lp-hero-visual{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; }
.lp-hero-halo{
  position:absolute; inset:12%; border-radius:50%; filter:blur(6px);
  background:radial-gradient(circle at 40% 35%, rgba(167,37,252,.55), rgba(167,37,252,.10) 62%, transparent 72%);
}
.lp-hero-img{
  position:relative; width:82%; object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(219,254,45,.25));
  animation:lpFlota 7s var(--ease) infinite;
  translate:0 var(--lp-yn,0px);
  rotate:y var(--lp-rot,0deg);
}
@keyframes lpFlota{
  0%,100%{ transform:translateY(0)     rotate(-1deg); }
  50%    { transform:translateY(-16px) rotate(1deg);  }
}
/* La píldora del producto. Dejó de ser solo un precio: ahora dice también
   QUÉ producto se está viendo, porque la foto va rotando. Sin el nombre, el
   visitante ata la foto al titular de al lado —que rota categorías por su
   cuenta— y entiende que la foto ilustra la palabra. No la ilustra.

   Va en columna y con el texto a la izquierda, no en línea de base como
   antes: dos datos de tamaños muy distintos alineados por la base se leen
   como una sola frase rota. */
.lp-hero-precio{
  position:absolute; bottom:6%; left:0; max-width:min(100%,300px);
  display:flex; flex-direction:column; gap:2px;
  padding:11px 20px; border-radius:22px;
  background:var(--surface); border:1px solid var(--border-2); box-shadow:var(--shadow);
}
/* El nombre se recorta a dos líneas. Los nombres reales del catálogo llegan
   a "Sleep Gummies CBD + Melatonina · Cereza": sin tope, la píldora crece
   hasta tapar el producto que está anunciando. */
.lp-hero-nombre{
  font-size:.78rem; line-height:1.25; color:var(--text2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lp-hero-precio small{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text2);
}
.lp-hero-precio b{
  font-family:var(--font-head); font-size:1.4rem; color:var(--accent); line-height:1.1;
}
/* El cambio de foto: se apaga y se encoge un punto, se cambia, y vuelve.
   Solo opacidad y escala, que las compone la tarjeta gráfica y no obligan al
   navegador a recalcular la página en cada vuelta.

   Se usa `scale` y NO `transform:scale()`, y esa distinción es la diferencia
   entre que funcione y que no. La imagen ya tiene una animación de flotación
   corriendo sobre `transform`, y una animación en curso gana a cualquier
   regla normal sobre la misma propiedad: el encogido no se habría visto
   jamás. `scale` es una propiedad aparte —como el `translate` y el `rotate`
   del parallax, unas líneas más arriba— y se compone con la animación en vez
   de pelearse con ella. */
.lp-hero-carrusel .lp-hero-img{ transition:opacity .28s var(--ease), scale .28s var(--ease); }
.lp-hero-carrusel .lp-hero-precio{ transition:opacity .28s var(--ease); }
.lp-hero-carrusel.cambiando .lp-hero-img{ opacity:0; scale:.96; }
.lp-hero-carrusel.cambiando .lp-hero-precio{ opacity:0; }

.lp-desliza{
  display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:26px;
}
.lp-desliza span{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text3);
}
.lp-desliza i{
  position:relative; display:block; width:1px; height:40px;
  background:var(--border-2); overflow:hidden;
}
.lp-desliza i::after{
  content:""; position:absolute; inset:0; background:var(--accent);
  animation:lpBaja 1.6s ease-in-out infinite;
}
@keyframes lpBaja{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(200%); } }

/* ── 2 · Oferta de la semana ──────────────────────────────────────────
   Solo se pinta si HAY una oferta real en la base. El bloque es morado
   porque es lo único de la página que no es lima: destaca por contraste
   de color, no por tamaño.                                              */
.lp-oferta{ padding:0 22px; }
.lp-oferta-caja{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:linear-gradient(100deg, var(--surface) 0%, #1b1226 46%, #2a0f3d 100%);
  border:1px solid rgba(167,37,252,.45);
  box-shadow:0 0 50px -18px rgba(167,37,252,.55);
}
.lp-oferta-caja::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(560px 300px at 12% 120%, rgba(219,254,45,.16), transparent 60%);
}
.lp-oferta-grid{
  position:relative;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:40px; align-items:center;
  padding:clamp(24px,4vw,40px) clamp(22px,4vw,44px);
}
.lp-oferta-foto{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  background:radial-gradient(circle at 50% 46%, rgba(167,37,252,.35), transparent 64%), var(--bg-2);
}
.lp-oferta-foto img{ width:100%; height:100%; object-fit:cover; }
.lp-oferta h2{ font-size:clamp(2rem,3.4vw,3rem); line-height:.97; margin:18px 0 0; }
.lp-oferta p{ color:#c8c8d8; max-width:42ch; margin:14px 0 0; }
.lp-etiqueta-oferta{
  display:inline-flex; align-items:center;
  padding:7px 16px; border-radius:100px;
  border:1px solid rgba(255,122,122,.7); color:#ff8b9c;
  font-size:.7rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  box-shadow:0 0 22px -6px rgba(255,47,82,.7), inset 0 0 14px -6px rgba(255,47,82,.7);
}
.lp-oferta-precios{
  display:flex; align-items:baseline; gap:14px; margin-top:24px; flex-wrap:wrap;
}
.lp-oferta-precios b{
  font-family:var(--font-head); font-size:clamp(2.4rem,4vw,3.4rem); line-height:1;
  color:var(--accent);
  text-shadow:0 0 8px rgba(255,255,255,.4), 0 0 30px rgba(219,254,45,.8);
}
.lp-oferta-precios .lp-antes{ font-size:1rem; color:var(--text3); text-decoration:line-through; }
.lp-oferta-precios .lp-baja{
  padding:4px 12px; border-radius:100px;
  background:rgba(255,47,82,.14); border:1px solid rgba(255,47,82,.42);
  color:#ff8b9c; font-size:.82rem; font-weight:800;
}

/* ── 3 · Marquesina de garantías ──────────────────────────────────────
   Dos copias idénticas del mismo texto, y la animación desplaza la mitad
   exacta: así el bucle no tiene costura. La segunda copia va con
   aria-hidden para que un lector de pantalla no lea la lista dos veces. */
.lp-marquesina{
  margin-top:clamp(36px,5vw,60px);
  border-block:1px solid rgba(219,254,45,.22);
  background:rgba(0,0,0,.35); overflow:hidden; padding-block:14px;
}
.lp-marquesina-track{ display:flex; width:max-content; animation:lpRueda 34s linear infinite; }
.lp-marquesina-track span{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.06em;
  color:var(--text2); display:flex; align-items:center; gap:34px; padding-right:34px;
}
.lp-marquesina-track b{ color:var(--accent); }
@keyframes lpRueda{ to{ transform:translateX(-50%); } }

/* ── 4 · Categorías en rejilla bento ──────────────────────────────────
   Dos anchas y dos estrechas alternadas. Es flex y no grid a propósito:
   las proporciones (56 % / 38 %) se reparten solas al envolverse en
   pantallas medianas, sin definir puntos de corte a mano.                */
.lp-bento{ display:flex; flex-wrap:wrap; gap:20px; perspective:1400px; }
.lp-bento-card{
  position:relative; display:block; overflow:hidden;
  flex:1 1 min(100%,38%); aspect-ratio:16/10;
  border-radius:var(--radius-lg); border:1px solid var(--border);
  color:var(--text); transition:.25s var(--ease);
}
.lp-bento-card--ancha{ flex-basis:min(100%,56%); }
.lp-bento-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* El velo de abajo. Sin él, el nombre de la categoría cae sobre la parte
   clara de la foto y deja de leerse en la mitad de las fotos. */
.lp-bento-card .lp-velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,15,.06) 0%, rgba(10,10,15,.58) 56%, rgba(10,10,15,.94) 100%);
}
.lp-bento-card .lp-pie{
  position:absolute; left:24px; right:24px; bottom:22px;
  display:flex; flex-direction:column; gap:6px;
}
.lp-bento-card .lp-kicker{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:#c084fc; font-weight:700;
}
.lp-bento-card b{
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  word-spacing:.08em; font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.02;
  text-shadow:0 0 22px rgba(219,254,45,.35);
}
.lp-bento-card .lp-meta{ font-size:.84rem; color:var(--text2); }
.lp-bento-card .lp-meta b{
  color:var(--accent); font-size:1.05rem; text-shadow:none;
}
@media (hover:hover){
  .lp-bento-card:hover{
    border-color:rgba(219,254,45,.7);
    box-shadow:0 0 40px -12px var(--accent-glow);
    transform:perspective(1400px) rotateX(4deg) translate3d(0,-8px,40px);
  }
}

/* ── 5 · Destacados ───────────────────────────────────────────────────
   Las tarjetas NO se redibujan aquí: son las .card de siempre, pintadas
   por renderCard(). Lo único que añade esta portada es la profundidad al
   pasar el ratón, y se consigue con este bloque de nueve líneas.

   Reimplementar la tarjeta habría significado reescribir la lógica de
   precios —"Desde", precio tachado, el porcentaje de ahorro, agotado,
   "precio por definir"—, que es exactamente donde vivían los errores que
   costaron cinco commits de dinero. La tarjeta se hereda; solo cambia
   cómo se levanta.                                                       */
.lp-destacados .product-grid{ perspective:1200px; }
@media (hover:hover){
  .lp-destacados .card:hover{
    transform:perspective(1000px) rotateX(5deg) translate3d(0,-8px,30px);
    border-color:rgba(219,254,45,.4);
    box-shadow:0 30px 70px -26px rgba(0,0,0,.85), 0 0 30px -14px rgba(219,254,45,.45);
  }
}

/* ── 6 · Cifras ───────────────────────────────────────────────────────*/
.lp-cifras{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:20px;
}
.lp-cifra{
  padding:32px 28px; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
}
.lp-cifra b{
  display:block; font-family:var(--font-head);
  font-size:clamp(2.6rem,4vw,3.4rem); line-height:1; color:var(--text);
}
.lp-cifra .lp-destaca{ color:var(--accent); text-shadow:0 0 26px rgba(219,254,45,.45); }
.lp-cifra span{
  display:block; margin-top:10px;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text2);
}

/* ── 7 · Proceso de compra ────────────────────────────────────────────
   Aquí vivían `.lp-pedido-grid` —dos columnas: pasos a la izquierda, foto a
   la derecha— y `.lp-foto-pendiente`, el hueco rayado que anunciaba una foto
   que nunca llegó. Los dos se fueron con ella: sin la foto, la rejilla dejaba
   media sección vacía, y una regla que no alcanza a ningún elemento hace que
   quien lea el archivo diseñe alrededor de un fantasma.                     */
/* grid-template-columns explícito con mínimo 0. Sin él, la única columna
   que crea la rejilla se dimensiona `auto`, y `auto` no baja del ancho
   mínimo del contenido: las tarjetas medían 319px dentro de 276 y se
   salían 21px por la derecha en pantallas de 320. */
.lp-pasos{ list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:minmax(0,1fr); }
/* Los cuatro pasos repartiéndose el ancho. Los cortes van escritos a mano y no
   con el `auto-fit` de siempre, y es a propósito: son CUATRO tarjetas, y
   auto-fit da la cuenta que quepa —medido, tres a 956 px— dejando la cuarta
   sola en una fila para ella. Con 4, 2 y 1 nunca sobra ninguna: o están las
   cuatro en fila, o en dos filas de dos, o una debajo de otra. */
.lp-pasos--fila{ margin-top:28px; }
@media (min-width:640px){
  .lp-pasos--fila{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1080px){
  .lp-pasos--fila{ grid-template-columns:repeat(4,1fr); }
}
.lp-paso{
  display:flex; gap:18px; padding:22px 24px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
}
/* El resplandor lima se queda en "llega a tu puerta", que es el final que el
   cliente quiere. El cuarto paso es la salida de emergencia, no la meta: si
   le pusiera el mismo acento, la vista se iría al "¿tienes dudas?" en vez de
   a la entrega. */
.lp-paso--fin{ border-color:rgba(219,254,45,.30); box-shadow:0 0 30px -14px var(--accent-glow); }
.lp-paso > b{
  font-family:var(--font-head); font-size:1.6rem; color:var(--accent);
  line-height:1; flex:none; width:38px;
}
.lp-paso h3{ font-size:1.05rem; margin:0; }
.lp-paso p{ font-size:.92rem; color:var(--text2); margin:4px 0 0; }
.lp-paso-cta{ margin-top:14px; }

/* ── 8 · Reseñas: tres a la vez ───────────────────────────────────────
   Sustituye a .lp-resena*, que pintaba una sola cita enorme con media
   tarjeta ocupada por una foto decorativa. Se borraron esas reglas en vez
   de dejarlas: CSS que ya no usa nadie se convierte en la siguiente
   pregunta de "¿esto se puede tocar?".

   Sin salto intermedio de dos columnas: con tres tarjetas, dos por fila
   dejan la tercera sola y descolgada —el mismo hueco que salió en los
   pasos del pedido—. De tres se pasa directo a una.

   --voces lo escribe el PHP con las que haya de verdad. Con repeat(3,...)
   fijo, una tienda con una o dos reseñas mostraría la fila con huecos. */
.lp-voces{ display:grid; gap:16px; margin-top:28px; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){
  .lp-voces{ grid-template-columns:repeat(var(--voces,3),minmax(0,1fr)); }
}
/* El hover mueve con `translate`, no con `transform`: el estado de entrada
   ([data-lp-reveal]) ya ocupa `transform`, y la propiedad individual
   compone con él en lugar de pisarlo. */
.lp-voz{
  margin:0; display:flex; flex-direction:column;
  padding:clamp(22px,2.6vw,30px);
  border:1px solid rgba(167,37,252,.28); border-radius:var(--radius-lg);
  background:linear-gradient(150deg, var(--surface) 0%, #1b1226 100%);
  box-shadow:0 0 44px -26px rgba(167,37,252,.6);
  transition:border-color .25s var(--ease), translate .25s var(--ease);
}
.lp-voz:hover{ border-color:rgba(167,37,252,.55); translate:0 -3px; }
.lp-voz-puntos{ color:var(--accent); letter-spacing:3px; font-size:1.05rem; line-height:1; }
.lp-voz-puntos i{ opacity:.25; font-style:normal; }
/* Ni versales ni la tipografía de titular: la cita ya no ocupa media
   pantalla, y en una columna de ~290px un bloque en mayúsculas se lee
   como un muro. */
.lp-voz blockquote{
  margin:16px 0 0; font-size:1rem; line-height:1.5; color:var(--text);
  text-wrap:pretty;
}
/* margin-top:auto pega la firma al fondo: las tres tarjetas miden lo mismo
   aunque los textos no, así que los nombres quedan alineados entre sí en
   vez de flotar cada uno a una altura. */
.lp-voz figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:22px; }
.lp-voz-avatar{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--bg); font-weight:800; font-family:var(--font-head); flex:none;
}
.lp-voz figcaption b{ display:block; font-size:.92rem; }
.lp-voz figcaption small{ display:block; color:var(--text3); font-size:.78rem; }

/* ── 9 · Cierre: marquesina calada + correo ───────────────────────────
   El texto va hueco (-webkit-text-stroke) y a tamaño enorme. Es
   decoración: lleva aria-hidden y el mensaje real está en el párrafo.   */
.lp-cierre{
  position:relative; overflow:hidden;
  margin-top:clamp(56px,7vw,96px); border-top:1px solid var(--border);
}
.lp-cierre-fondo{
  position:absolute; inset:0; opacity:.18;
  background-size:cover; background-position:center;
  transform:scaleY(-1);          /* la misma foto, del revés */
}
.lp-cierre-velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,15,.86), rgba(10,10,15,.96));
}
.lp-cierre-inner{ position:relative; padding:clamp(44px,6vw,76px) 0; }
.lp-calada{ overflow:hidden; padding-block:6px; }
.lp-calada-track{ display:flex; width:max-content; animation:lpRueda 40s linear infinite; }
.lp-calada-track span{
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; word-spacing:.08em;
  font-size:clamp(2.6rem,7vw,6rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(219,254,45,.55);
  display:flex; gap:40px; padding-right:40px;
}
.lp-calada-track i{ -webkit-text-stroke:0; color:var(--accent); font-style:normal; }
.lp-news{
  max-width:var(--maxw); margin:clamp(32px,4vw,52px) auto 0; padding-inline:22px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.lp-news p{ margin:0; font-size:1.02rem; color:var(--text); max-width:46ch; }
.lp-news p b{
  font-family:var(--font-head); text-transform:uppercase; word-spacing:.08em; color:var(--accent);
}
.lp-news form{ display:flex; gap:10px; flex-wrap:wrap; flex:1; min-width:min(100%,320px); max-width:480px; }
/* 16px, no el heredado. Este campo daba 13.3px y era el unico del bloque:
   en iPhone, tocarlo ampliaba la pagina entera y la dejaba corrida, justo
   en el gesto que se le pide a alguien que ya termino de leer la portada.
   Nadie vuelve a colocar la vista para apuntarse a un boletin. */
.lp-news input[type=email]{
  flex:1; min-width:180px; padding:15px 20px; border-radius:100px;
  border:1px solid var(--border-2); background:rgba(10,10,15,.6);
  color:var(--text); font-family:inherit; font-size:16px;
}
.lp-news .btn{ padding:15px 28px; }
.lp-news-estado{ width:100%; margin:10px 0 0; font-size:.86rem; min-height:1.2em; }
.lp-news-estado.ok{ color:var(--accent); }
.lp-news-estado.mal{ color:#ff8f8f; }

/* ── Entrada al hacer scroll ──────────────────────────────────────────
   Los bloques suben, se desenfocan menos y aparecen. Lo enciende el JS
   marcando [data-lp-shown]; si el JS no corre, la regla de abajo no llega
   a aplicarse nunca y todo se ve normal desde el principio. Esa es la
   razón de que la clase la ponga el guion y no venga puesta del servidor:
   sin JavaScript, una página que empieza invisible se queda invisible.  */
[data-lp-reveal]{
  opacity:0; transform:translateY(22px); filter:blur(5px);
  will-change:opacity,transform,filter;
  transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
[data-lp-reveal][data-lp-shown]{ opacity:1; transform:none; filter:blur(0); }

/* ── Menos movimiento ─────────────────────────────────────────────────
   style.css ya apaga TODAS las animaciones y transiciones del sitio con
   prefers-reduced-motion. Aquí solo hay que deshacer los estados iniciales
   que dejarían contenido invisible o desplazado: sin animación que los
   resuelva, un opacity:0 se queda en cero para siempre.                  */
@media (prefers-reduced-motion: reduce){
  [data-lp-reveal]{ opacity:1; transform:none; filter:none; }
  .lp-hero-fondo{ transform:none; }
  .lp-hero-img{ translate:none; rotate:none; }
}

/* ── Pantallas de 320px (VA AL FINAL a propósito) ─────────────────────
   El titular tiene un suelo fijo de 2.6rem (41.6px): el 4.6vw del medio
   del clamp nunca lo alcanza en un celular, así que por debajo de ~890px
   el tamaño es constante. A 41.6px, "comestibles thc." mide 303px contra
   250 de caja, y .lp-hero-caja recorta con overflow:hidden — la palabra
   que ROTA, lo primero que se lee de la tienda, salía cortada por la
   derecha en un iPhone SE y en buena parte de la gama baja de Android.

   Va al FINAL del archivo, y esto no es cosmética: un @media no añade
   especificidad, así que entre dos reglas iguales gana la última escrita.
   Colocada antes de `.lp-hero h1` (línea 174) no hacía absolutamente
   nada, y el tamaño seguía siendo 41.6px. Se comprobó midiendo.

   min() y no un clamp nuevo: a 480px devuelve exactamente 2.6rem, así que
   por encima de este ancho no cambia nada en absoluto. */
@media (max-width:480px){
  .lp-hero h1{ font-size:min(9vw, 2.6rem); }
}

/* ── La rejilla bento se apila en el celular ──────────────────────────
   `flex:1 1 min(100%,38%)` no hace lo que promete: min(100%,38%) es
   SIEMPRE 38%, porque 38 nunca supera a 100. La intención se lee sola
   —que en pantalla estrecha la tarjeta pase a ancho completo— y no
   ocurría nunca: las dos categorías estrechas seguían lado a lado
   incluso a 320px.

   Lo que salía de ahí, medido a 320: tarjeta de 128x80px con 115px de
   contenido dentro. Con overflow:hidden recortando, se perdía el nombre
   de la categoría entero y quedaba un trozo suelto de "productos ·
   desde $149.00" flotando sobre una foto cortada por la mitad. Dos de
   las cuatro puertas de entrada al catálogo, ilegibles.

   A ancho completo la misma tarjeta mide 276x173 y su contenido 73: cabe
   con holgura, la foto se ve entera y las cuatro categorías se leen
   igual. Va al final del archivo porque un @media no añade
   especificidad y tiene que ganarle a --ancha, escrita más arriba. */
@media (max-width:720px){
  .lp-bento{ gap:14px; }
  .lp-bento-card,
  .lp-bento-card--ancha{ flex-basis:100%; }
}