/* =========================================================================
   OGG FAMILY — hoja de estilo unica.

   DE DONDE SALE EL COLOR (de su material, no de una plantilla)
   - El casi-negro NO es #000: es el negro con verde dentro del fondo de sus
     fotos de cultivo bajo LED.
   - El purpura sale de las hojas de sus mejores cogollos. Los seis bancos de
     referencia (Royal Queen, Sweet Seeds, Genehtik, Barneys, Dinafem, Sensi)
     van TODOS de verde y blanco: es la carta que nadie juega.
   - El oro sale de SU logo de OGG y solo aparece donde manda OGG.

   TIPOGRAFIA: Schibsted Grotesk, una sola familia (10-sep-2026, lo pidio
   Rober: la serif de display anterior le parecia «la de siempre»). Es una
   grotesca de prensa: aguanta igual un titular de 62 px y una etiqueta de
   11 px, y en negro se lee firme sin ponerse decorativa. La jerarquia la dan
   el PESO y el TAMANO, no un cambio de tipo de letra.
   Alojada aqui por GDPR. Prohibidas a proposito: Poppins y Open Sans (las de
   sus competidores), Cormorant (es de Elysium), Fraunces (mi reflejo, y ya
   rechazada) e Inter/Roboto (genericas).
   Los titulares NUNCA por debajo de line-height 1.05 ni de -.012em de
   tracking: «aplastada» es lo primero que ve Rober.
   ========================================================================= */

/* FUENTES:INICIO */
@font-face{
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fuentes/SchibstedGrotesk-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fuentes/SchibstedGrotesk-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fuentes/SchibstedGrotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fuentes/SchibstedGrotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* FUENTES:FIN */

:root{
  --noche:#05090A; --humus:#0B1310; --musgo:#132019;
  --purpura:#2A1526; --purpura-vivo:#C07FB0;
  --verde:#8FBF63; --verde-vivo:#A8E06E; --verde-hondo:#3D5E33;
  --oro:#C6A02C; --oro-claro:#E5C86A;
  --tricoma:#EAF0E6;
  --t70:rgba(234,240,230,.70); --t50:rgba(234,240,230,.50); --t32:rgba(234,240,230,.32);
  --linea:rgba(234,240,230,.13);
  /* UNA sola familia, y grotesca. Fuera la serif de display: era mi reflejo
     por defecto y Rober la senalo dos veces. La jerarquia la dan el peso, el
     tamano y el tracking, no un cambio de tipo de letra.
       --display  titulares y cifras, siempre en 700/800
       --texto    cuerpo e interfaz, en 400/500 */
  --display:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --texto:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ancho:min(1600px,93vw);
  --curva:cubic-bezier(.16,1,.3,1);
  /* Alto real de la cabecera. Lo REESCRIBE el JS al cargar y al redimensionar
     (ver ajustarJefe): 126 era una cuenta a ojo y la de verdad son 145, asi
     que la portada se quedaba 19 px corta y el contenido se salia por abajo
     en pantallas bajas. Este valor es solo el de partida. */
  --jefe:145px;
}
@media(max-width:1099px){:root{--jefe:64px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--jefe) + 16px)}
html,body{margin:0;padding:0;overflow-x:clip;background:var(--noche)}
body{font-family:var(--texto);font-size:17px;line-height:1.6;color:var(--tricoma);
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 70% at 50% 0%,#0E1A15 0%,transparent 60%),var(--noche)}
/* height:auto es OBLIGATORIO aqui. Sin esto, un <img> con atributo height y un
   ancho puesto por CSS se ESTIRA — asi salia deformado el logo de Girl Kush. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;
  line-height:1.06;letter-spacing:-.011em}
p{margin:0}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--verde-vivo);outline-offset:3px;border-radius:3px}
::selection{background:var(--verde);color:var(--noche)}

.tira{width:var(--ancho);margin:0 auto}
.rotulo{display:flex;align-items:center;gap:14px;margin-bottom:24px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--t32)}
.rotulo::before{content:'';width:34px;height:1px;background:currentColor;opacity:.6}
.titular{font-size:clamp(2.4rem,6.2vw,5.4rem);max-width:19ch}
.entradilla{margin-top:22px;max-width:58ch;color:var(--t70);font-size:17px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;
  text-decoration:none;transition:transform .5s var(--curva),background .3s,border-color .3s}
.btn--si{background:var(--tricoma);color:var(--noche)}
.btn--si:hover{transform:translateY(-2px)}
.btn--no{border:1px solid var(--linea);color:var(--t70)}
.btn--no:hover{border-color:var(--t50)}

/* =========================================================================
   PUERTA DE EDAD
   ========================================================================= */
.edad{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:var(--noche);padding:24px;text-align:center}
.edad[hidden]{display:none}
.edad__caja{max-width:540px}
.edad__caja>img{width:112px;margin:0 auto 26px}
.edad h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:16px}
.edad p{color:var(--t50);font-size:15px;margin-bottom:26px}
.edad__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* =========================================================================
   LA BARRA DE PROGRESO — verde, encima de todo. Se rellena al bajar.
   ========================================================================= */
.progreso{position:fixed;top:0;left:0;width:100%;height:3px;z-index:150;
  background:rgba(234,240,230,.07);pointer-events:none}
.progreso i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--verde-hondo),var(--verde) 45%,var(--verde-vivo));
  box-shadow:0 0 14px rgba(168,224,110,.75),0 0 34px rgba(168,224,110,.35)}

/* =========================================================================
   CABECERA — tres pisos, todo a la vista. Sin menu escondido.
   ========================================================================= */
.jefe{position:fixed;top:0;left:0;width:100%;z-index:120;
  background:rgba(5,9,10,.72);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--linea);
  transition:background .45s var(--curva)}
.jefe.pegada{background:rgba(5,9,10,.94)}

/* piso 1: la cinta de arriba */
.cinta{border-bottom:1px solid var(--linea);font-size:12px;color:var(--t50)}
.cinta__in{width:var(--ancho);margin:0 auto;height:34px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;overflow:hidden}
.cinta ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;white-space:nowrap}
.cinta li{display:flex;align-items:center;gap:8px}
.cinta svg{width:15px;height:15px;flex:none;color:var(--verde);opacity:.9}
.cinta__der{display:none;gap:18px;white-space:nowrap}
@media(min-width:1100px){.cinta__der{display:flex}}
@media(max-width:1099px){.cinta{display:none}}

/* piso 2: logo, buscador y acciones */
.marca{width:var(--ancho);margin:0 auto;height:64px;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
@media(min-width:1100px){.marca{height:56px}}
.marca__logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
/* el logotipo es un lockup APAISADO: en un cuadro de 38x38 se lee como un borron */
/* El logo de la casa manda en la cabecera: subio de 62x38 a 88x53 (Rober,
   10-sep). Es un lockup APAISADO, asi que crece a lo ancho, no en un cuadro. */
.marca__logo img{width:88px;height:53px;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.9))}
.marca__logo b{font-family:var(--display);font-size:21px;font-weight:800;display:block;
  line-height:1.05;letter-spacing:-.005em}
.marca__logo span{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t32);font-weight:600}
/* EN MOVIL EL ROTULO SE CORTABA: salia «LOS LICENCIADOS DEL KU». Es el nombre
   del cliente, asi que manda que se lea entero: baja de cuerpo, se queda sin el
   «tres sellos» —que en la portada ya se dice— y el logo cede unos pixeles. */
@media(max-width:1099px){
  .marca__logo img{width:52px;height:32px}
  .marca__logo b{font-size:14.5px;letter-spacing:-.004em}
  .marca__logo b + span{display:none}
}
/* A 390 px el nombre entero + tres botones de 44 no caben en una linea (medido:
   el boton del menu quedaba en x=410, fuera de pantalla). El nombre pasa a dos
   lineas y los botones bajan a 40 px, que sigue siendo area tactil valida. */
@media(max-width:559px){
  .marca{gap:10px}
  .marca__logo{gap:8px}
  .marca__logo img{width:46px;height:28px}
  .marca__logo b{font-size:12.5px;max-width:142px;line-height:1.08}
  .marca__acc{gap:0}
  .marca__acc a,.marca__acc button{min-width:40px;height:40px}
}
.buscador{display:none;flex:1;max-width:520px;position:relative}
@media(min-width:1100px){.buscador{display:block}}
.buscador input{width:100%;height:42px;padding:0 44px 0 16px;border-radius:999px;
  border:1px solid var(--linea);background:rgba(234,240,230,.05);color:var(--tricoma);
  font-size:14px;transition:border-color .3s,background .3s}
.buscador input::placeholder{color:var(--t32)}
.buscador input:focus{border-color:var(--verde);background:rgba(234,240,230,.08);outline:none}
.buscador button{position:absolute;right:4px;top:4px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--t50)}
.buscador svg{width:17px;height:17px}
.marca__acc{display:flex;align-items:center;gap:6px;flex:none}
.marca__acc a,.marca__acc button{min-width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;color:var(--t70);transition:color .3s,background .3s;text-decoration:none}
.marca__acc a:hover,.marca__acc button:hover{color:var(--tricoma);background:rgba(234,240,230,.07)}
.marca__acc svg{width:20px;height:20px}
.abrir-menu{display:grid}
@media(min-width:1100px){.abrir-menu{display:none}}

/* piso 3: las categorias, todas visibles */
.nav{border-top:1px solid var(--linea);display:none}
@media(min-width:1100px){.nav{display:block}}
.nav__in{width:var(--ancho);margin:0 auto;height:52px;display:flex;align-items:stretch;gap:2px}
.nav a{display:flex;align-items:center;padding:0 15px;text-decoration:none;font-size:14.5px;
  color:var(--t70);position:relative;transition:color .3s;white-space:nowrap}
.nav a:hover{color:var(--tricoma)}
.nav a::after{content:'';position:absolute;left:15px;right:15px;bottom:0;height:2px;
  background:var(--c,var(--verde));transform:scaleX(0);transform-origin:50%;
  transition:transform .45s var(--curva)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a b{font-weight:400;color:var(--t32);margin-left:7px;font-size:12px}
.nav__sep{width:1px;background:var(--linea);margin:14px 12px}
/* Entre 1100 y 1499 px la nav de 13 entradas no cabe a 14,5 px (a 1366 se cortaba en
   «Therapy S…»): letra y aire mas justos, y si aun asi no cabe, se desliza sin barra. */
@media(min-width:1100px) and (max-width:1499px){
  .nav__in{overflow-x:auto;scrollbar-width:none}
  .nav__in::-webkit-scrollbar{display:none}
  .nav a{padding:0 10px;font-size:13.5px}
  .nav a::after{left:10px;right:10px}
  .nav a b{margin-left:5px;font-size:11px}
  .nav__sep{margin:14px 6px}
}

/* menu de movil */
.velo{position:fixed;inset:0;z-index:140;background:var(--noche);
  display:flex;flex-direction:column;padding:22px 22px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .5s var(--curva),visibility .5s}
.velo.abierto{opacity:1;visibility:visible}
.velo__cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.velo nav{display:flex;flex-direction:column}
.velo nav a{padding:15px 0;border-bottom:1px solid var(--linea);text-decoration:none;
  font-family:var(--display);font-size:1.55rem;font-weight:800;display:flex;
  justify-content:space-between;align-items:baseline;gap:12px}
.velo nav a span{font-family:var(--texto);font-size:13px;font-weight:400;color:var(--t32)}
.velo .buscador{display:block;max-width:none;margin-bottom:22px}
.cerrar{width:44px;height:44px;display:grid;place-items:center;font-size:26px;line-height:1}

/* =========================================================================
   PORTADA — el mosaico vivo.

   No es un fondo decorativo: CADA baldosa es una genetica de verdad, con su
   nombre y su tipo, y lleva a su ficha. El raton lo mueve por capas, la
   oferta que rota ilumina su baldosa, y al bajar el mosaico se abre.
   ========================================================================= */
/* La portada ocupa exactamente lo que queda bajo la cabecera. `min-height` con
   `svh` y no `vh`: en movil la barra del navegador entra y sale, y con vh la
   portada se cortaba. */
.portada{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:clip;isolation:isolate;padding-top:var(--jefe)}
/* EMPIEZA JUSTO DEBAJO DE LA CABECERA, no detras. Antes el mosaico ocupaba
   toda la portada y la cabecera cortaba la primera fila de fotos por la mitad.
   `overflow:clip` aqui ademas garantiza que ninguna baldosa asome por arriba
   cuando el motor mueve las columnas. */
.mosaico{position:absolute;top:var(--jefe);left:-4%;right:-4%;bottom:-14%;
  overflow:clip;z-index:-2;display:grid;gap:9px;
  grid-template-columns:repeat(3,1fr);perspective:1400px}
@media(min-width:760px){.mosaico{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.mosaico{grid-template-columns:repeat(6,1fr)}}
.mosaico__col{display:flex;flex-direction:column;gap:9px;will-change:transform}
/* Las fotos de arriba quedan ALINEADAS y enteras. Para que las costuras de
   dentro no formen una linea recta de lado a lado, cada columna lleva una
   proporcion distinta — antes eso se conseguia desplazando la columna hacia
   arriba, que es justo lo que cortaba la primera fila. */
.mosaico__col:nth-child(2) .tesela img{aspect-ratio:4/5}
.mosaico__col:nth-child(3) .tesela img{aspect-ratio:2/3}
.mosaico__col:nth-child(4) .tesela img{aspect-ratio:5/7}
.mosaico__col:nth-child(5) .tesela img{aspect-ratio:9/13}
.mosaico__col:nth-child(6) .tesela img{aspect-ratio:7/9}
.tesela{position:relative;display:block;overflow:hidden;border-radius:2px;
  text-decoration:none;background:#0A100D;will-change:transform,filter}
.tesela img{width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:saturate(1.06) contrast(1.10) brightness(.60);
  transition:filter .6s var(--curva),transform 1.1s var(--curva)}
.tesela__nom{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;
  background:linear-gradient(to top,rgba(4,7,8,.95),transparent);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--curva),transform .45s var(--curva)}
.tesela__nom b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:800;
  line-height:1.05}
.tesela__nom span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t50);margin-top:3px}
.tesela:hover img,.tesela:focus-visible img{filter:saturate(1.15) contrast(1.05) brightness(1.05);
  transform:scale(1.05)}
.tesela:hover .tesela__nom,.tesela:focus-visible .tesela__nom{opacity:1;transform:none}
/* la baldosa que la oferta esta enseñando */
.tesela.viva img{filter:saturate(1.2) contrast(1.04) brightness(1.12)}
.tesela.viva{box-shadow:0 0 0 1px rgba(168,224,110,.55),0 0 42px rgba(168,224,110,.28)}
.tesela.viva .tesela__nom{opacity:1;transform:none}

.mosaico::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(74% 58% at 5% 88%,rgba(4,7,8,.96) 0%,rgba(4,7,8,.70) 44%,transparent 76%),
    linear-gradient(to bottom,rgba(4,7,8,.30) 0%,rgba(4,7,8,.14) 14%,rgba(4,7,8,.18) 58%,var(--noche) 99%)}
@media(max-width:759px){
  .tesela img{filter:saturate(1.02) contrast(1.06) brightness(.44)}
  .mosaico::after{background:linear-gradient(to bottom,rgba(4,7,8,.9) 0%,rgba(4,7,8,.6) 24%,rgba(4,7,8,.66) 64%,var(--noche) 99%)}
}

.portada__in{position:relative;width:var(--ancho);margin:0 auto;
  padding:clamp(16px,3svh,40px) 0 clamp(20px,4svh,56px);display:grid;
  gap:clamp(16px,3svh,30px)}
@media(min-width:1100px){.portada__in{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:54px}}
/* portatil bajo: el subtitulo sobra antes que el titular o la tarjeta */
@media(max-height:700px){
  .portada__pie{display:none}
  .oferta__cab,.oferta__pun{display:none}
}
/* El tamano lo manda el menor de los dos: el ancho Y el alto disponibles. Solo
   con vw, a 1366x660 el titular medía 221 px de alto y empujaba la tarjeta y los
   botones fuera de la pantalla. */
.portada h1{font-size:clamp(2.4rem,min(7.2vw,12.6svh),7.6rem);letter-spacing:-.012em;
  line-height:1.05;text-shadow:0 6px 70px rgba(4,7,8,.94),0 2px 14px rgba(4,7,8,.75)}
.portada h1 em{font-style:normal;font-weight:800;color:var(--verde);
  letter-spacing:-.012em}
.portada__pie{margin-top:clamp(10px,2svh,18px);max-width:46ch;color:var(--t70);
  font-size:clamp(14.5px,1.7svh,16px);text-shadow:0 2px 18px rgba(4,7,8,.9)}
/* La firma de la CASA en el hero. Antes aqui iban los tres sellos en fila, y
   era lo primero que se leia: la casa no aparecia hasta el pie. */
.marchamo{display:block;margin-bottom:clamp(10px,2svh,18px);
  text-shadow:0 2px 14px rgba(4,7,8,.9)}
.marchamo b{display:block;font-size:clamp(13px,1.5vw,15px);letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;color:var(--oro-claro)}
.marchamo span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--t50);margin-top:5px}
.portada__abajo{display:flex;gap:12px;margin-top:clamp(14px,2.6svh,26px);flex-wrap:wrap}

/* la tarjeta de ofertas */
.oferta{position:relative;display:block;text-decoration:none;width:min(370px,88vw);
  border-radius:6px;overflow:hidden;background:rgba(11,19,16,.74);backdrop-filter:blur(20px);
  border:1px solid var(--linea);box-shadow:0 30px 90px rgba(0,0,0,.62);
  transition:transform .6s var(--curva),border-color .4s}
.oferta:hover{transform:translateY(-4px);border-color:var(--t32)}
.oferta__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 17px;border-bottom:1px solid var(--linea);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t32);
  white-space:nowrap}
.oferta__vis{position:relative;height:clamp(118px,19svh,190px);overflow:hidden}
.oferta__vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.09);transition:opacity 1.1s var(--curva),transform 6s linear}
.oferta__vis img.on{opacity:1;transform:scale(1)}
.oferta__cuerpo{padding:clamp(12px,2svh,17px) 17px}
.oferta__sello{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.oferta__nom{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.2rem);font-weight:800;
  margin:4px 0 3px;line-height:1}
.oferta__meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.oferta__precios{display:flex;align-items:baseline;gap:12px}
.oferta__antes{text-decoration:line-through;color:var(--t32);font-size:15px}
.oferta__ahora{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--verde)}
.oferta__barra{height:2px;background:var(--linea);position:relative;overflow:hidden}
.oferta__barra i{position:absolute;inset:0;background:var(--verde);transform-origin:left;transform:scaleX(0)}
.oferta__pun{display:flex;gap:2px;padding:4px 13px 8px}
.oferta__pun button{width:44px;height:38px;display:grid;place-items:center}
.oferta__pun span{display:block;width:100%;height:2px;background:var(--linea);transition:background .4s}
.oferta__pun button[aria-current="true"] span{background:var(--verde)}

/* pastillas de dato, se usan en toda la web */
.pil{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--linea);font-size:11px;letter-spacing:.05em;color:var(--t70);
  white-space:nowrap}
.pil--indica{border-color:rgba(192,127,176,.4);color:#DDA9CE}
.pil--hibrida{border-color:rgba(198,160,44,.4);color:var(--oro-claro)}
.pil--sativa{border-color:rgba(143,191,99,.4);color:var(--verde-vivo)}

/* =========================================================================
   LOS TRES SELLOS
   ========================================================================= */
/* =========================================================================
   LA CASA — Los Licenciados del Kush

   Rober, 10-sep-2026: «que se note que las 3 estan dentro de LDK, que son de la
   familia, no protagonistas; el prota es LDK». Antes de esto la portada
   presentaba tres bancos con su propio color a pantalla completa y la casa solo
   salia, pequena, en la cabecera y en el pie.

   POR QUE ESTA SECCION VA EN BLANCO Y SIN ACENTO: cada sello tiene su color
   (oro para OGG, purpura para Girl Kush, verde para Therapy) y el oro es de
   OGG por decision anterior. La casa no compite con ninguno: va en el hueso de
   la marca, en grande y con espacio. Los colores son de los hijos.
   ========================================================================= */
.casa{background:linear-gradient(180deg,var(--noche),var(--humus));
  border-top:1px solid var(--linea);padding:clamp(64px,10vh,132px) 0;position:relative;
  overflow:clip}
.casa::before{content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--linea)}
.casa__in{display:grid;gap:clamp(34px,5vw,64px);align-items:center}
@media(min-width:920px){.casa__in{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}}
.casa__marca img{width:min(420px,100%);height:auto;display:block;margin-inline:auto;
  filter:drop-shadow(0 18px 60px rgba(0,0,0,.85))}
.casa .titular{font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.05;margin:8px 0 14px}
.casa .entradilla{max-width:52ch}

/* los tres, presentados como familia: mismo tamano, misma fila, el color solo
   asoma al pasar por encima */
.casa__familia{display:grid;gap:10px;margin-top:clamp(26px,4vh,40px);
  grid-template-columns:1fr}
@media(min-width:620px){.casa__familia{grid-template-columns:repeat(3,minmax(0,1fr))}}
.casa__familia a{display:flex;align-items:center;gap:13px;padding:13px 15px;
  border:1px solid var(--linea);border-radius:6px;text-decoration:none;
  background:rgba(234,240,230,.02);transition:border-color .35s var(--curva),
  background .35s var(--curva),transform .35s var(--curva)}
.casa__familia a:hover,.casa__familia a:focus-visible{border-color:var(--c);
  background:rgba(234,240,230,.05);transform:translateY(-2px)}
.casa__familia img{width:auto;height:38px;flex:none;object-fit:contain}
.casa__familia span{display:block;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t32);font-weight:600;line-height:1.35;min-width:0}
.casa__familia b{display:block;font-family:var(--display);font-size:14.5px;font-weight:800;
  letter-spacing:0;text-transform:none;color:var(--tricoma);margin-bottom:2px}
.casa__familia a:hover b{color:var(--c)}

.sello{position:relative;padding:clamp(48px,7vh,88px) 0;overflow:clip;isolation:isolate}
.sello--ogg{background:radial-gradient(90% 100% at 82% 50%,rgba(198,160,44,.16),transparent 62%),#080B07}
.sello--gkg{background:radial-gradient(90% 100% at 18% 50%,rgba(192,127,176,.17),transparent 62%),var(--purpura)}
.sello--therapy{background:radial-gradient(90% 100% at 82% 50%,rgba(143,191,99,.16),transparent 62%),var(--musgo)}
.sello__in{width:var(--ancho);margin:0 auto;display:grid;gap:44px;align-items:center}
@media(min-width:960px){
  .sello__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:74px}
  .sello--gkg .sello__in{direction:rtl}
  .sello--gkg .sello__in>*{direction:ltr}
}
.sello__logo img{width:min(240px,58%);height:auto;margin-inline:auto;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.7))}
.sello--ogg .sello__logo img{width:min(280px,66%);border-radius:8px}
.sello h3{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:6px}
.sello__lema{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,2.1vw,1.45rem);margin-bottom:18px}
.sello--ogg .sello__lema{color:var(--oro-claro)}
.sello--gkg .sello__lema{color:var(--purpura-vivo)}
.sello--therapy .sello__lema{color:var(--verde)}
.sello p{color:var(--t70);max-width:52ch}
.sello__datos{display:flex;gap:32px;margin:28px 0;flex-wrap:wrap}
.sello__datos div{min-width:80px}
.sello__datos b{display:block;font-family:var(--display);font-size:2.3rem;font-weight:800;line-height:1}
.sello__datos span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t32)}

/* =========================================================================
   EL CRUCE — la seccion que ES la animacion.
   Se ancla la pantalla, las dos fotos se juntan y caen las semillas.
   ========================================================================= */
.cruce{background:radial-gradient(80% 60% at 50% 30%,rgba(192,127,176,.13),transparent 65%),var(--purpura);
  position:relative}
/* SIN ANCLAJE. Antes esto media 340svh y habia que scrollear para que salieran
   las semillas. Rober: «que salgan directamente flotando». Ahora la seccion es
   una seccion normal y las semillas se mueven solas en cuanto esta a la vista.
   El scroll ya no gobierna nada aqui. */
.cruce__larga{height:auto}
.cruce__lienzo{position:absolute;inset:0;z-index:3;touch-action:none;width:100%;height:100%}
.cruce__fijo{position:relative;display:grid;grid-template-rows:auto auto auto;
  gap:clamp(26px,4vh,48px);overflow:hidden;
  padding:clamp(70px,10vh,130px) 0 clamp(60px,9vh,110px)}
/* z-index 4: las semillas pasan POR DETRAS del texto. Sin esto tapaban el
   titular y no se leia nada. */
.cruce__cabeza{width:var(--ancho);margin:0 auto;text-align:center;position:relative;z-index:4}
.cruce__cabeza h2{font-size:clamp(1.9rem,4.4vw,3.6rem);max-width:17ch;margin-inline:auto}
.cruce__cabeza p{margin:14px auto 0;max-width:56ch;color:var(--t70);font-size:15.5px}
/* Las dos fotos se acercan como ENTRADA (una vez, al aparecer), no siguiendo el
   scroll. */
.cruce__lado{transition:transform 1.6s var(--curva)}
.cruce__fijo.dentro .cruce__lado--m{transform:translate3d(14%,0,0)}
.cruce__fijo.dentro .cruce__lado--h{transform:translate3d(-14%,0,0)}
.cruce__pista{position:relative;width:var(--ancho);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(12px,5vw,90px);align-items:center;
  place-content:center}
/* las fotos caben ENTERAS en pantalla: el alto lo manda el hueco, no el ancho */
.cruce__lado{position:relative;justify-self:center;width:auto;
  height:min(52svh,calc((var(--ancho) - 90px)/2 * 4/3));aspect-ratio:3/4;
  overflow:hidden;border-radius:3px;background:#150C13;will-change:transform}
.cruce__lado img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.07) saturate(1.05)}
.cruce__eti{position:absolute;top:12px;left:12px;padding:6px 12px;border-radius:999px;
  background:rgba(5,9,10,.74);backdrop-filter:blur(8px);z-index:2;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.cruce__eti--m{color:var(--verde-vivo)}
.cruce__eti--h{color:var(--purpura-vivo)}

.cruce__pie{width:var(--ancho);margin:0 auto;text-align:center;color:var(--t70);position:relative;z-index:4;
  max-width:64ch;font-size:15px}
.cruce__pie strong{color:var(--tricoma);font-weight:600}
.cruce__ayuda{display:block;margin-top:8px;font-size:12.5px;color:var(--t32)}
@media(max-width:759px){
  .cruce__lado{height:min(38svh,52vw)}
}

/* =========================================================================
   LA SALA
   ========================================================================= */
.sala{position:relative;padding:clamp(84px,13vh,168px) 0;overflow:clip;isolation:isolate}
.sala__fondo{position:absolute;inset:-10% 0;z-index:-2;display:grid;
  grid-template-columns:repeat(3,1fr);gap:8px;opacity:.62}
.sala__fondo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.18) brightness(.62) contrast(1.05)}
.sala::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 22% 42%,rgba(5,9,10,.55),transparent 72%),
    linear-gradient(to bottom,var(--noche) 0%,rgba(5,9,10,.30) 26%,rgba(5,9,10,.42) 74%,var(--noche) 100%)}
.cifras{display:grid;gap:2px;margin-top:48px;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
@media(min-width:900px){.cifras{--cols:4}}
.cifra{padding:30px 24px;background:rgba(11,19,16,.55);backdrop-filter:blur(10px);
  border:1px solid var(--linea)}
.cifra b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,4.8vw,4.2rem);line-height:1;color:var(--verde)}
.cifra span{display:block;margin-top:9px;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--t32)}

/* =========================================================================
   EL CATALOGO — buscador y filtros de verdad
   ========================================================================= */
.catalogo{padding:clamp(84px,13vh,168px) 0;background:var(--humus);scroll-margin-top:var(--jefe)}
.panel{display:grid;gap:20px;margin:34px 0 30px;padding:22px;border:1px solid var(--linea);
  border-radius:8px;background:rgba(5,9,10,.42)}
.panel__buscar{position:relative}
.panel__buscar input{width:100%;height:52px;padding:0 46px 0 18px;border-radius:999px;
  border:1px solid var(--linea);background:rgba(234,240,230,.05);color:var(--tricoma);font-size:16px}
.panel__buscar input:focus{border-color:var(--verde);outline:none}
.panel__buscar svg{position:absolute;right:18px;top:17px;width:18px;height:18px;color:var(--t32)}
.grupo{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.grupo>h4{margin:0;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t32);font-weight:600;width:100%}
@media(min-width:900px){.grupo>h4{width:82px}}
.filtro{min-height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--linea);
  font-size:13.5px;color:var(--t70);transition:all .3s var(--curva);display:inline-flex;
  align-items:center;gap:7px}
.filtro:hover{border-color:var(--t50);color:var(--tricoma)}
.filtro[aria-pressed="true"]{background:var(--tricoma);color:var(--noche);
  border-color:var(--tricoma);font-weight:600}
.filtro b{font-weight:400;opacity:.55;font-size:12px}
.panel__pie{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;border-top:1px solid var(--linea);padding-top:16px}
.panel__pie select{height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--linea);
  background:var(--musgo);color:var(--tricoma);font-size:13.5px}
.cuenta{font-size:14px;color:var(--t50)}
.cuenta b{color:var(--tricoma);font-weight:700}

.rejilla{display:grid;gap:clamp(10px,1.1vw,16px);
  grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
@media(min-width:640px){.rejilla{grid-template-columns:repeat(var(--cols-sm,3),minmax(0,1fr))}}
@media(min-width:1100px){.rejilla{grid-template-columns:repeat(var(--cols-lg,5),minmax(0,1fr))}}

.var{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:3px;
  background:var(--musgo);isolation:isolate}
.var__foto{position:relative;aspect-ratio:3/4;overflow:hidden}
.var__foto img{width:100%;height:100%;object-fit:cover;filter:brightness(.86);
  transition:transform 1.2s var(--curva),filter .6s}
.var:hover .var__foto img,.var:focus-visible .var__foto img{transform:scale(1.06);filter:brightness(1)}
.var__alto{position:absolute;top:9px;right:9px;z-index:2;padding:3px 9px;border-radius:999px;
  background:rgba(5,9,10,.75);backdrop-filter:blur(6px);font-size:10px;color:var(--t70)}
.var__cuerpo{position:absolute;left:0;right:0;bottom:0;padding:34px 13px 13px;
  background:linear-gradient(to top,rgba(5,9,10,.95),rgba(5,9,10,.72) 52%,transparent)}
.var__sello{font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.var__nom{font-family:var(--display);font-size:1.18rem;font-weight:800;line-height:1.14;margin:3px 0 5px}
.var__meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.var__precio{display:flex;align-items:baseline;gap:2px 8px;flex-wrap:wrap;font-size:12.5px;color:var(--t50)}
.var__precio>*{white-space:nowrap}
.var__precio b{font-size:1.02rem;color:var(--tricoma);font-weight:700}
.vacio{padding:60px 20px;text-align:center;color:var(--t50);grid-column:1/-1}
.vacio b{display:block;font-family:var(--display);font-size:1.6rem;color:var(--tricoma);margin-bottom:8px}

.aviso-precio{margin-top:28px;padding:15px 19px;border:1px dashed var(--linea);border-radius:4px;
  font-size:14px;color:var(--t70)}
.aviso-precio b{color:var(--oro-claro)}

/* =========================================================================
   PIE
   ========================================================================= */
.pie{background:var(--noche);border-top:1px solid var(--linea);padding:clamp(56px,8vh,96px) 0 36px}
.pie__in{width:var(--ancho);margin:0 auto;display:grid;gap:36px}
@media(min-width:900px){.pie__in{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.pie h4{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--t32);
  margin:0 0 15px;font-weight:600}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pie a{color:var(--t70);text-decoration:none;font-size:14.5px;transition:color .3s}
.pie a:hover{color:var(--tricoma)}
.pie__legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--linea);
  font-size:13px;color:var(--t32);display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}
.pie__aviso{max-width:74ch;font-size:13px;color:var(--t32);line-height:1.65;margin-top:36px}

/* =========================================================================
   ENTRADAS.
   POR QUE NO LAS LLEVA EL MOTOR: el motor mide la lista de elementos UNA vez,
   y el catalogo se vuelve a pintar cada vez que tocas un filtro. Las tarjetas
   nuevas no estaban en esa lista y se quedaban invisibles para siempre. Con un
   IntersectionObserver da igual cuando nazcan.
   ========================================================================= */
.sube{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .85s var(--curva),transform .85s var(--curva)}
.sube.visto{opacity:1;transform:none}
.motor-off .sube{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sube{opacity:1!important;transform:none!important}
  .cruce__fijo.dentro .cruce__lado--m,
  .cruce__fijo.dentro .cruce__lado--h{transform:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =========================================================================
   LA COMPRA — selector de formato, cesta y avisos
   ========================================================================= */
.comprar{margin:26px 0 8px;padding:22px;border:1px solid var(--linea);border-radius:8px;
  background:rgba(234,240,230,.035)}
.comprar h4{margin:0 0 12px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t32);font-weight:600}
.formatos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.formato{min-height:56px;padding:8px 16px;border-radius:6px;border:1px solid var(--linea);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:all .3s var(--curva);min-width:78px}
.formato b{font-family:var(--display);font-size:1.15rem;font-weight:800;line-height:1}
.formato span{font-size:11px;color:var(--t32)}
.formato:hover{border-color:var(--t50)}
.formato[aria-pressed="true"]{background:var(--tricoma);color:var(--noche);border-color:var(--tricoma)}
.formato[aria-pressed="true"] span{color:rgba(5,9,10,.6)}
.comprar__unidad{font-size:13px;color:var(--t50);margin-bottom:16px}
.comprar__fila{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.contador{display:flex;align-items:center;border:1px solid var(--linea);border-radius:999px;
  overflow:hidden;flex:none}
.contador button{width:46px;height:46px;font-size:20px;line-height:1;color:var(--t70);
  transition:background .3s,color .3s}
.contador button:hover:not(:disabled){background:rgba(234,240,230,.08);color:var(--tricoma)}
.contador button:disabled{color:var(--t32);cursor:not-allowed}
.contador input{width:52px;height:46px;text-align:center;border:0;background:none;
  font-size:16px;font-weight:600;-moz-appearance:textfield}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.comprar__total{margin-left:auto;text-align:right}
.comprar__total span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t32)}
.comprar__total b{font-family:var(--display);font-size:2rem;font-weight:800;line-height:1;
  color:var(--verde)}
.comprar .btn{width:100%;margin-top:16px}

/* la chapa del numero en la cesta de la cabecera */
.marca__acc a{position:relative}
.chapa{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--verde-vivo);color:var(--noche);
  font-size:11px;font-weight:700;line-height:18px;text-align:center}
.chapa[hidden]{display:none}

/* el aviso flotante */
.tostada{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:200;max-width:min(560px,92vw);
  padding:15px 20px;border-radius:8px;background:rgba(11,19,16,.96);backdrop-filter:blur(14px);
  border:1px solid var(--linea);box-shadow:0 20px 60px rgba(0,0,0,.6);font-size:14.5px;
  color:var(--t70);opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s var(--curva),transform .45s var(--curva)}
.tostada.on{opacity:1;transform:none;pointer-events:auto}
.tostada b{color:var(--tricoma)}
.tostada a{color:var(--verde-vivo);margin-left:8px;white-space:nowrap}

/* La barra fija de la ficha en móvil: precio y botón abajo cuando el bloque de
   compra se ha ido de la vista (ui.js pone body.comprar-fuera). Solo por debajo
   de 720 px. z-index 130: por encima de la cabecera (120) y por DEBAJO del menú
   de móvil (140), la puerta de edad (300), el aviso (200) y el cajón (220). */
.comprar__fija{display:none}
@media(max-width:719px){
  body.comprar-fuera .comprar__fija{display:flex;position:fixed;left:0;right:0;bottom:0;
    z-index:130;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
    background:var(--noche);border-top:1px solid var(--linea);
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .comprar__fija p{margin:0;display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .comprar__fija b{font-family:var(--display);font-size:1.4rem;font-weight:800;color:var(--verde)}
  .comprar__fija span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t32)}
  .comprar__fija .btn{margin:0;height:46px;padding:0 20px;flex:none}
  /* el aviso flotante sube para no quedar detrás de la barra */
  body.comprar-fuera .tostada{bottom:calc(24px + 72px)}
}

/* =========================================================================
   LA PAGINA DE LA CESTA

   Montada como una tienda de verdad: dos columnas con el resumen fijo al
   scroll, cada linea con su formato y su precio unitario, guardar para
   despues, un bloque para completar el pedido y —en movil— una barra fija
   abajo con el total, para no tener que subir a ver cuanto llevas.
   ========================================================================= */
.cesta{display:grid;gap:30px;align-items:start;padding-bottom:96px}
@media(min-width:960px){
  .cesta{grid-template-columns:minmax(0,1fr) 350px;gap:44px;padding-bottom:0}
}
.cesta__col{min-width:0}

.oculto{position:absolute;left:-9999px}

/* la cabecera de la lista: cuantos llevas y el vaciar */
.cesta__cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--linea)}
.cesta__cab h2{font-size:1.15rem;font-family:var(--texto);font-weight:600;margin:0}
.cesta__vaciar{font-size:13px;color:var(--t50);text-decoration:underline;
  text-underline-offset:3px;transition:color .3s}
.cesta__vaciar:hover{color:var(--tricoma)}

/* el aviso de que algo se ha agotado mientras la cesta esperaba */
.cesta__alerta{border:1px solid rgba(224,138,110,.45);background:rgba(224,138,110,.08);
  border-radius:6px;padding:14px 16px;font-size:14px;color:var(--t70);margin:0 0 16px}
.cesta__alerta b{color:#E9A98F;display:block;margin-bottom:2px}

/* ---------- una linea de la cesta ---------- */
.cesta__lista{display:grid;gap:10px}
.linea{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start;
  padding:14px;border:1px solid var(--linea);border-radius:6px;
  background:rgba(234,240,230,.025)}
@media(min-width:680px){
  .linea{grid-template-columns:88px minmax(0,1fr) auto auto;gap:18px;padding:16px;
    align-items:center}
}
.linea--agotada{opacity:.72;border-color:rgba(224,138,110,.35)}
.linea__foto{border-radius:4px;overflow:hidden;display:block}
.linea__foto img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.linea__cuerpo{min-width:0}
.linea__cuerpo h3{font-size:1.15rem;margin:3px 0 5px;line-height:1.15}
.linea__cuerpo h3 a{text-decoration:none}
.linea__cuerpo h3 a:hover{color:var(--verde-vivo)}
.linea__fmt{font-size:13px;color:var(--t50);margin:0}
.linea__fmt s{color:var(--t32);margin-left:5px}
.linea__agotada{font-size:12.5px;color:#E9A98F;margin:6px 0 0}
.linea__nocobra{font-family:var(--texto);font-size:12px;font-weight:500;color:var(--t32);
  letter-spacing:.1em;text-transform:uppercase}
.linea__acc{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px}
.linea__acc button{font-size:12.5px;color:var(--t50);text-decoration:underline;
  text-underline-offset:3px;transition:color .3s;min-height:24px}
.linea__acc button:hover{color:var(--tricoma)}

.linea__cant{display:flex;align-items:center;border:1px solid var(--linea);
  border-radius:999px;justify-self:start;grid-column:2/3}
@media(min-width:680px){.linea__cant{grid-column:auto}}
.linea__cant button{width:42px;height:42px;font-size:18px;color:var(--t70);
  transition:background .3s,color .3s}
.linea__cant button:hover:not(:disabled){background:rgba(234,240,230,.08);color:var(--tricoma)}
.linea__cant button:disabled{color:var(--t32);cursor:not-allowed}
.linea__cant input{width:46px;height:42px;text-align:center;border:0;background:none;
  font-weight:600;color:var(--tricoma);-moz-appearance:textfield;font-size:15px}
.linea__cant input:disabled{color:var(--t32);cursor:not-allowed}
.linea__cant input::-webkit-outer-spin-button,
.linea__cant input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.linea__total{font-family:var(--display);font-size:1.3rem;font-weight:800;white-space:nowrap;
  margin:0;justify-self:end;grid-column:2/3;text-align:right}
@media(min-width:680px){.linea__total{grid-column:auto;min-width:96px}}

/* ---------- guardado para despues ---------- */
.guardado{margin-top:34px;padding-top:26px;border-top:1px solid var(--linea)}
.guardado h2{font-size:1.05rem;font-family:var(--texto);font-weight:600;
  letter-spacing:.02em;margin:0 0 14px;display:flex;align-items:center;gap:9px}
.guardado h2 span{font-size:12px;color:var(--t32);border:1px solid var(--linea);
  border-radius:999px;padding:1px 8px;font-weight:500}

/* ---------- completa el pedido ---------- */
.completa{margin-top:38px;padding-top:28px;border-top:1px solid var(--linea)}
.completa h2{font-family:var(--display);font-size:1.5rem;font-weight:800;margin:0 0 4px}
.completa__p{font-size:14px;color:var(--t50);margin:0 0 20px}
.completa__rej{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.completa__rej{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sug{border:1px solid var(--linea);border-radius:6px;overflow:hidden;
  background:rgba(234,240,230,.025);display:flex;flex-direction:column}
.sug__foto{display:block}
.sug__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sug__cuerpo{padding:14px;display:flex;flex-direction:column;gap:7px;flex:1}
.sug__cuerpo h3{font-size:1.05rem;margin:0;line-height:1.2}
.sug__cuerpo h3 a{text-decoration:none}
.sug__cuerpo h3 a:hover{color:var(--verde-vivo)}
.sug__precio{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:0;
  font-size:12.5px;color:var(--t50)}
.sug__precio b{font-size:1.05rem;color:var(--tricoma);font-weight:700}
.sug__precio s{color:var(--t32)}
.sug .btn{margin-top:auto;height:40px;font-size:14px}

/* ---------- el resumen ---------- */
.cesta__resumen{padding:24px;border:1px solid var(--linea);border-radius:8px;
  background:rgba(234,240,230,.035)}
@media(min-width:960px){
  .cesta__resumen{position:sticky;top:calc(var(--jefe) + 18px)}
}
.cesta__resumen h2{font-size:1.4rem;margin:0 0 18px}
.cesta__resumen dl{display:grid;grid-template-columns:1fr auto;gap:10px 12px;margin:0 0 16px;
  font-size:14.5px}
.cesta__resumen dt{color:var(--t50)}
.cesta__resumen dd{margin:0;text-align:right}
.cesta__menos{color:var(--verde)}
.cesta__total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:16px;border-top:1px solid var(--linea);margin:0 0 6px}
.cesta__total span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t32)}
.cesta__total b{font-family:var(--display);font-size:2.2rem;font-weight:800;color:var(--verde);
  line-height:1}
.cesta__ahorro{font-size:13.5px;color:var(--verde);margin:0 0 16px;text-align:right}
.cesta__resumen .btn{width:100%;margin-bottom:10px}
.cesta__resumen .btn:disabled{opacity:.45;cursor:not-allowed}
.cesta__nota{font-size:12.5px;color:var(--t32);margin:12px 0 0;line-height:1.5}

/* el codigo, plegado hasta que hace falta */
.cesta__cod{margin:4px 0 16px;border:1px dashed var(--linea);border-radius:6px;
  padding:12px 14px}
.cesta__cod summary{font-size:13.5px;color:var(--t70);cursor:pointer;list-style:none}
.cesta__cod summary::-webkit-details-marker{display:none}
.cesta__cod summary::before{content:'+ ';color:var(--verde)}
.cesta__cod[open] summary::before{content:'− '}
.cesta__cod summary:hover{color:var(--tricoma)}
.cesta__cod form{margin-top:12px}
.cesta__cod div{display:flex;gap:8px}
.cesta__cod input{flex:1;min-width:0;height:42px;padding:0 13px;border-radius:6px;
  border:1px solid var(--linea);background:rgba(234,240,230,.05);color:var(--tricoma);
  font-family:var(--texto);font-size:14.5px;letter-spacing:.06em;text-transform:uppercase}
.cesta__cod input:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.cesta__cod .btn{width:auto;flex:none;height:42px;padding:0 16px;margin:0}
.cesta__cod p{font-size:12.5px;color:var(--t50);margin:10px 0 0}

/* los tres motivos para confiar, sin inventarse ninguno */
.cesta__confia{list-style:none;margin:16px 0 0;padding:16px 0 0;
  border-top:1px solid var(--linea);display:grid;gap:8px}
.cesta__confia li{font-size:12.5px;color:var(--t50);display:flex;gap:8px;align-items:flex-start}
.cesta__confia li::before{content:'';flex:none;width:14px;height:14px;margin-top:2px;
  background:var(--verde);opacity:.75;
  clip-path:polygon(41% 84%,0 45%,13% 32%,41% 59%,87% 13%,100% 26%)}

/* ---------- la barra fija de movil ---------- */
.cesta__movil{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;
  align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(11,19,16,.97);backdrop-filter:blur(14px);
  border-top:1px solid var(--linea)}
@media(min-width:960px){.cesta__movil{display:none}}
.cesta__movil div{display:flex;flex-direction:column;line-height:1.15}
.cesta__movil span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t32)}
.cesta__movil b{font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--verde)}
.cesta__movil .btn{margin:0;height:46px;padding:0 22px;flex:none}
.cesta__movil .btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- la cesta vacia ---------- */
.cesta__vacia{grid-column:1/-1;text-align:center;padding:70px 20px}
.cesta__vacia b{display:block;font-family:var(--display);font-size:2rem;margin-bottom:8px}
.cesta__vacia p{color:var(--t50);margin-bottom:22px}
.cesta__vacia__enlaces{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* el boton de deshacer del aviso flotante */
.tostada__accion{margin-left:14px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--linea);color:var(--verde-vivo);font-size:13px;font-weight:600;
  transition:background .3s}
.tostada__accion:hover{background:rgba(234,240,230,.08)}

/* =========================================================================
   LAS PUERTAS — la entrada al catalogo desde la portada.
   El catalogo COMPLETO ya vive en /catalogo/ y en las paginas de categoria;
   repetirlo aqui alargaba la portada sin aportar nada.
   ========================================================================= */
.puertas{padding:clamp(84px,13vh,168px) 0;background:var(--humus)}
.puertas__rejilla{display:grid;gap:clamp(10px,1.1vw,16px);margin-top:40px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.puertas__rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}}
.puerta{position:relative;display:block;overflow:hidden;border-radius:4px;
  text-decoration:none;background:var(--musgo);aspect-ratio:4/3}
.puerta img{width:100%;height:100%;object-fit:cover;filter:brightness(.6);
  transition:transform 1.2s var(--curva),filter .6s}
.puerta:hover img,.puerta:focus-visible img{transform:scale(1.06);filter:brightness(.82)}
.puerta__txt{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 16px;
  background:linear-gradient(to top,rgba(5,9,10,.94),transparent)}
.puerta__txt b{display:block;font-family:var(--display);font-size:1.55rem;font-weight:800;
  line-height:1.05}
.puerta__txt span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t50);margin-top:3px}
.puerta--todo{display:grid;place-items:center;background:
  linear-gradient(135deg,rgba(143,191,99,.16),transparent 62%),var(--musgo);
  border:1px solid var(--linea);transition:border-color .4s,background .4s}
.puerta--todo:hover{border-color:var(--verde);background:
  linear-gradient(135deg,rgba(143,191,99,.26),transparent 62%),var(--musgo)}
.puerta--todo .puerta__txt{position:static;padding:0;background:none;text-align:center}
.puerta--todo .puerta__txt b{font-size:1.9rem}

.sellos-fila{display:grid;gap:2px;margin-top:26px;grid-template-columns:1fr}
@media(min-width:760px){.sellos-fila{grid-template-columns:repeat(3,1fr)}}
.sello-caja{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:34px 22px;text-decoration:none;border:1px solid var(--linea);
  background:rgba(234,240,230,.03);transition:background .4s,border-color .4s}
.sello-caja:hover{background:rgba(234,240,230,.06);border-color:var(--c)}
.sello-caja img{height:96px;width:auto;object-fit:contain;margin-bottom:10px;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.7))}
.sello-caja b{font-family:var(--display);font-size:1.3rem;font-weight:800;color:var(--c)}
.sello-caja span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t32)}

/* =========================================================================
   EXISTENCIAS
   ========================================================================= */
.marchamo-stock{position:absolute;top:9px;left:9px;z-index:3;padding:4px 10px;border-radius:999px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  backdrop-filter:blur(6px)}
.marchamo-stock--agotado{background:rgba(5,9,10,.86);color:var(--t70);
  border:1px solid rgba(234,240,230,.25)}
.marchamo-stock--pocas{background:rgba(198,160,44,.92);color:#1A1403}
.var--agotado .var__foto img{filter:grayscale(.75) brightness(.5)}
.var--agotado .var__nom,.var--agotado .var__precio b{color:var(--t50)}
.var--agotado:hover .var__foto img{filter:grayscale(.55) brightness(.62)}

.ficha__stock{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:8px;
  font-size:14px;margin-bottom:6px}
.ficha__stock--agotado{background:rgba(234,240,230,.06);border:1px solid var(--linea);color:var(--t70)}
.ficha__stock--pocas{background:rgba(198,160,44,.14);border:1px solid rgba(198,160,44,.4);
  color:var(--oro-claro)}
.ficha__stock b{color:var(--tricoma)}
.comprar--agotado{opacity:.55;pointer-events:none;filter:grayscale(.5)}
.aviso-agotado{padding:20px 22px;border:1px solid var(--linea);border-radius:8px;
  background:rgba(234,240,230,.035);margin:26px 0 8px}
.aviso-agotado b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:800;
  margin-bottom:6px}
.aviso-agotado p{color:var(--t70);font-size:14.5px;margin-bottom:14px}

/* =========================================================================
   LOS PRECIOS DE VERDAD Y LA PROMOCIÓN (10-sep-2026)

   Todo lo que hay debajo entra con los precios que mandó Jhosep: la tarifa
   tachada al lado del precio con el 50 %, la banda de la promoción en la
   portada, el precio dentro de cada botón de formato, la página de kits y el
   campo del código en la cesta.
   ========================================================================= */

/* La tarifa tachada. Va SIEMPRE detrás del precio bueno, nunca delante: lo
   primero que tiene que leerse es lo que se paga. */
.var__precio s{color:var(--t32);font-size:12px}
.linea__fmt s{color:var(--t32)}

/* La chapa «−50 %» detrás de la tarifa tachada: solo letras verdes, sin caja
   ni fondo. La escriben igual ops/paginas.py y ui.js. */
.var__promo{font-style:normal;font-size:11.5px;font-weight:700;color:var(--verde);
  letter-spacing:.02em;white-space:nowrap}
.var--agotado .var__promo{color:var(--t50)}

/* El precio dentro del botón de formato: el pack de 16 y el de 100 no se
   eligen por el número de semillas, se eligen por lo que cuestan. */
.formato em{font-style:normal;font-size:12px;color:var(--verde);font-weight:600}
.formato[aria-pressed="true"] em{color:rgba(5,9,10,.72)}
/* y su tarifa tachada, en gris y pequeña, debajo del precio */
.formato s{font-size:11px;color:var(--t32)}
.formato[aria-pressed="true"] s{color:rgba(5,9,10,.5)}

/* El precio de referencia al abrir la ficha: el pack más pequeño, en grande,
   con la tarifa tachada al lado y el pack en gris. */
.comprar__precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  margin:0 0 18px;color:var(--t50);font-size:13.5px}
.comprar__precio b{font-family:var(--display);font-size:1.6rem;font-weight:800;line-height:1;
  color:var(--tricoma)}
.comprar__precio s{color:var(--t32);font-size:14px}
.comprar__precio s:empty{display:none}
.comprar__precio span{color:var(--t50)}

/* La línea de la promoción bajo el total: letras pequeñas, sin caja. */
.comprar__promo{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--t50)}
.comprar__promo:empty{display:none}

/* La etiqueta sobre la foto de la ficha: solo letras, abajo a la izquierda,
   sin fondo ni velo. */
.foto__pie{position:absolute;left:14px;bottom:12px;z-index:2;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--t70);
  text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}

/* Las ediciones limitadas no están clasificadas: no se sabe si son índicas,
   híbridas o sativas, y la píldora lo dice en vez de inventarlo. */
.pil--sd{border-style:dashed;color:var(--t50)}

/* La chapa de la promoción en la tarjeta de oferta de la portada. */
.oferta__promo{color:var(--verde-vivo);font-weight:600}

/* ---------- la banda de la promoción, debajo de la portada ---------- */
.promo{background:var(--humus);border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);padding:clamp(48px,7vh,84px) 0}
.promo__in{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.promo__in{grid-template-columns:1.15fr .85fr;gap:64px}}
.promo__t{font-family:var(--display);font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;
  line-height:1.06;margin:10px 0 14px}
.promo__p{color:var(--t70);margin:0;max-width:56ch}
.promo__cod{border:1px solid var(--linea);border-radius:8px;padding:26px 26px 24px;
  background:rgba(234,240,230,.03)}
.promo__cod__eti{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t32);margin:0 0 8px;font-weight:600}
.promo__cod__n{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.6rem);
  font-weight:800;line-height:1;margin:0 0 12px;color:var(--oro-claro);
  letter-spacing:.04em}
.promo__cod__p{font-size:14.5px;color:var(--t70);margin:0 0 20px}
.promo__cod .btn{width:100%}

/* Las puertas del catálogo pasan de seis a ocho, así que la rejilla va a
   CUATRO columnas: con tres quedaba un renglón de dos a medias. */
@media(min-width:760px){.puertas__rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.puertas__rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* =========================================================================
   ARQUITECTURA DEL CATALOGO (10-sep-2026)

   Lo que se trajo de los diez catalogos estudiados: chips de lo aplicado,
   tandas con «ver mas», filtros plegados en movil, corazon en cada tarjeta,
   cajon de guardadas y tira de vistos recientemente.
   ========================================================================= */

/* ---------- la tarjeta: ahora es un <article> con el enlace dentro ----------
   El corazon no puede ir dentro del <a>: no es HTML valido y con el teclado se
   vuelve inalcanzable. Asi que la caja pasa a article y el enlace cubre la
   foto y el cuerpo. */
.var__go{display:block;text-decoration:none;color:inherit}
.var:focus-within{outline:2px solid var(--verde);outline-offset:2px}
.var__go:focus-visible{outline:none}

.var__fav{position:absolute;top:8px;right:8px;z-index:4;width:34px;height:34px;
  display:grid;place-items:center;border-radius:999px;
  background:rgba(5,9,10,.62);backdrop-filter:blur(8px);
  border:1px solid rgba(234,240,230,.16);transition:background .3s,border-color .3s}
.var__fav svg{width:17px;height:17px;fill:none;stroke:var(--tricoma);stroke-width:1.7;
  transition:fill .3s,stroke .3s,transform .3s var(--curva)}
.var__fav:hover{background:rgba(5,9,10,.85);border-color:var(--t50)}
.var__fav:hover svg{transform:scale(1.12)}
.var__fav.on svg{fill:var(--verde-vivo);stroke:var(--verde-vivo)}
/* Va sobria a proposito: sale en 33 de las 104 y no es un aviso urgente como
   «agotada» o «ultimos packs». En verde solido, saturaba la rejilla entera. */
.marchamo-stock--serie{background:rgba(5,9,10,.78);color:var(--verde-vivo);
  border:1px solid rgba(143,191,99,.5);font-weight:600}

/* el boton de guardar de la ficha, con su texto */
.btn--fav{display:inline-flex;align-items:center;gap:9px}
.btn--fav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.btn--fav.on svg{fill:var(--verde-vivo);stroke:var(--verde-vivo)}

/* ---------- el panel: plegable en movil ---------- */
.panel__abrir{display:none;width:100%;align-items:center;gap:10px;padding:13px 15px;
  border:1px solid var(--linea);border-radius:8px;background:rgba(234,240,230,.04);
  color:var(--t70);font-family:var(--texto);font-size:14.5px;font-weight:600;
  margin-top:12px}
.panel__abrir svg{width:18px;height:18px;flex:none}
.panel__abrir b{margin-left:auto;min-width:22px;height:22px;border-radius:999px;
  background:var(--verde-vivo);color:var(--noche);font-size:12px;line-height:22px;
  text-align:center;font-weight:700}
@media(max-width:759px){.panel__abrir{display:flex}}

/* ---------- los chips de lo que hay puesto ---------- */
.aplicados{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid rgba(143,191,99,.45);background:rgba(143,191,99,.12);
  color:var(--tricoma);font-family:var(--texto);font-size:13px;font-weight:600;
  transition:background .3s,border-color .3s}
.chip span[aria-hidden]{color:var(--verde);font-size:15px;line-height:1}
.chip:hover{background:rgba(143,191,99,.22);border-color:var(--verde)}
.chip--todo{border-style:dashed;border-color:var(--linea);background:none;color:var(--t50);
  font-weight:500}
.chip--todo:hover{color:var(--tricoma);border-color:var(--t50);background:none}

/* ---------- ver mas ---------- */
.vermas{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:34px 0 0;text-align:center}
.vermas__n{font-size:13px;color:var(--t32);margin:0}
.vermas__n b{color:var(--t70);font-weight:700}
.vermas .btn{min-width:210px}

/* ---------- vistos recientemente ---------- */
.vistos{margin-top:clamp(52px,8vh,88px);padding-top:30px;border-top:1px solid var(--linea)}
.vistos h2{font-family:var(--display);font-size:1.4rem;font-weight:800;margin:0 0 18px}
.vistos__tira{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:560px){.vistos__tira{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.vistos__tira{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* OJO CON EL NOMBRE: esta clase se llamaba `.visto` y **rompio la web entera**.
   `revelar()` marca con la clase `visto` CADA bloque que entra en pantalla, asi
   que todos los titulares, entradillas y cifras del sitio se pintaron con este
   fondo y este borde: la home y el catalogo aparecian llenos de recuadros.
   Cualquier clase nueva se comprueba antes contra las que ya usa el JS. */
.recien{display:block;text-decoration:none;border:1px solid var(--linea);border-radius:5px;
  overflow:hidden;background:var(--musgo);transition:border-color .3s}
.recien:hover{border-color:var(--t50)}
.recien img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;filter:brightness(.9)}
.recien span{display:block;padding:9px 10px;font-size:11.5px;color:var(--t50)}
.recien b{display:block;font-size:13px;color:var(--tricoma);font-weight:700;
  margin-bottom:2px;line-height:1.2}

/* ---------- el cajon de guardadas ---------- */
.chapa--fav{background:var(--verde-vivo)}
body.sin-scroll{overflow:hidden}
.cajon{position:fixed;top:0;right:0;bottom:0;z-index:220;width:min(420px,100%);
  display:flex;flex-direction:column;gap:14px;padding:20px;overflow-y:auto;
  background:rgba(11,19,16,.98);backdrop-filter:blur(16px);
  border-left:1px solid var(--linea);box-shadow:-30px 0 80px rgba(0,0,0,.6);
  transform:translateX(102%);transition:transform .34s var(--curva)}
.cajon.on{transform:none}
.cajon__cab{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid var(--linea)}
.cajon__cab h2{font-family:var(--display);font-size:1.4rem;font-weight:800;margin:0;
  display:flex;align-items:center;gap:9px}
.cajon__cab span{font-size:12px;color:var(--t32);border:1px solid var(--linea);
  border-radius:999px;padding:1px 9px;font-family:var(--texto);font-weight:600}
.cajon__x{width:38px;height:38px;font-size:24px;line-height:1;color:var(--t50);
  border-radius:999px;transition:background .3s,color .3s}
.cajon__x:hover{background:rgba(234,240,230,.08);color:var(--tricoma)}
.cajon__vacio{padding:40px 6px;text-align:center}
.cajon__vacio b{display:block;font-family:var(--display);font-size:1.3rem;margin-bottom:8px}
.cajon__vacio p{color:var(--t50);font-size:14.5px;margin-bottom:20px}
.cajon__lista{display:grid;gap:9px}
.guardada{display:grid;grid-template-columns:56px minmax(0,1fr) 32px;gap:12px;
  align-items:center;padding:9px;border:1px solid var(--linea);border-radius:6px;
  background:rgba(234,240,230,.025)}
.guardada__foto{display:block;border-radius:4px;overflow:hidden}
.guardada__foto img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.guardada__cuerpo{min-width:0}
.guardada__cuerpo h3{font-size:1rem;margin:2px 0 3px;line-height:1.2}
.guardada__cuerpo h3 a{text-decoration:none}
.guardada__cuerpo h3 a:hover{color:var(--verde-vivo)}
.guardada__cuerpo p{font-size:12.5px;color:var(--t50);margin:0}
.guardada__cuerpo em{color:#E9A98F;font-style:normal}
.guardada__x{width:32px;height:32px;font-size:20px;line-height:1;color:var(--t32);
  border-radius:999px;transition:background .3s,color .3s}
.guardada__x:hover{background:rgba(234,240,230,.08);color:var(--tricoma)}

/* =========================================================================
   LA PORTADA DE TIENDA (10-sep-2026) — ops/portada.py la escribe

   Bloques nuevos: cinta con la cuenta de disponibles, megamenu de familias,
   carrusel de ofertas, rejilla de 12 comprables (la tarjeta ES el sobre),
   tres razones con objeto, asistente, colecciones, familias en abanico,
   los padres de la casa, el recibo del codigo, avisos y pie de seis columnas.
   ========================================================================= */

/* ---------- la cinta: el 49 es lo primero que se lee ---------- */
.cinta__hay{color:var(--verde);font-weight:800;font-size:13px;margin-right:5px}
.cinta__promo{color:var(--oro-claro);font-weight:600}
@media(max-width:1099px){.cinta li:nth-child(3){display:none}}

/* ---------- el megamenu de familias ---------- */
.nav__fam{position:relative}
.nav__fam>button{font:inherit;color:inherit;height:100%;padding:0 4px;display:flex;
  align-items:center;gap:6px;background:none;border:0;cursor:pointer}
.nav__fam>button::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav__fam__menu{position:absolute;top:100%;left:0;z-index:130;display:none;
  grid-template-columns:repeat(4,minmax(150px,1fr));gap:2px;padding:12px;
  background:#0a1011;border:1px solid var(--linea);border-radius:8px;
  box-shadow:0 30px 60px rgba(0,0,0,.6)}
.nav__fam:hover .nav__fam__menu,.nav__fam:focus-within .nav__fam__menu{display:grid}
.nav__fam__menu a{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;
  border-radius:5px;text-decoration:none;font-size:14px;color:var(--t70)}
.nav__fam__menu a:hover{background:rgba(234,240,230,.06);color:var(--tricoma)}
.nav__fam__menu a b{color:var(--verde);font-weight:800}

/* ---------- 3 · el carrusel ---------- */
.ofertas{position:relative;margin-top:var(--jefe);min-height:min(88vh,760px);overflow:clip;
  background:var(--noche)}
.diapo{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--curva);pointer-events:none}
.diapo.on{opacity:1;pointer-events:auto;position:relative}
.diapo__foto{position:absolute;top:0;right:0;bottom:0;width:56%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 34%,#000 100%)}
.diapo__foto img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;display:block}
.diapo__foto--velo img{filter:brightness(.42) saturate(.9)}
.diapo__in{position:relative;z-index:2;min-height:min(88vh,760px);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(56px,9vh,110px) 0 clamp(80px,12vh,130px);max-width:640px}
.diapo__t{font-size:clamp(2.4rem,6vw,5.4rem);line-height:1.02;letter-spacing:-.012em;margin:10px 0 18px}
.diapo__p{font-size:clamp(1rem,1.4vw,1.2rem);color:var(--t70);max-width:52ch;margin:0 0 26px}
.diapo__p b{color:var(--tricoma);font-size:1.25em}
.diapo__p s{color:var(--t32);margin-left:4px}
.diapo__lista{list-style:none;margin:6px 0 26px;padding:0;display:grid;gap:8px;max-width:420px}
.diapo__lista li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--linea);font-size:15px;color:var(--t70)}
.diapo__lista b{font-size:20px;color:var(--tricoma)}
.diapo__lista s{color:var(--t32);font-size:13px;margin-left:8px}
.diapo__btns{display:flex;gap:12px;flex-wrap:wrap}
.cruces{width:100%;max-width:640px;height:auto;margin:6px 0 20px;overflow:visible}
.cruces__lineas line{stroke:var(--verde);stroke-width:1;opacity:.55}
.cruces__puntos circle{fill:var(--verde-vivo)}
.cruces__padres circle{fill:var(--tricoma)}
.cruces__padres text{fill:var(--t70);font-size:14px;font-weight:600}
.ofertas__mando{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;
  justify-content:center;align-items:center;gap:14px}
.ofertas__mando>button{width:42px;height:42px;border-radius:999px;border:1px solid var(--linea);
  color:var(--t70);background:rgba(5,9,10,.5);font-size:18px;transition:color .3s,border-color .3s}
.ofertas__mando>button:hover{color:var(--tricoma);border-color:var(--t50)}
.ofertas__pun{display:flex;gap:8px}
.ofertas__pun button{width:34px;height:4px;border-radius:2px;background:rgba(234,240,230,.22);
  transition:background .4s}
.ofertas__pun button[aria-current="true"]{background:var(--verde-vivo)}
@media(max-width:759px){
  .ofertas{min-height:0}
  .diapo__foto{position:relative;width:100%;height:46vh;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 60%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 60%,transparent 100%)}
  .diapo__in{min-height:0;padding:0 0 84px;margin-top:-60px}
  .diapo{display:none}
  .diapo.on{display:block}
}

/* ---------- 4 · las 12 comprables: la tarjeta ES el sobre ---------- */
.comprables{padding:clamp(56px,8vh,96px) 0 clamp(48px,7vh,84px);border-top:1px solid var(--linea)}
.comprables__cab{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-bottom:26px}
.comprables__n{font-size:14px;color:var(--t50);margin:0}
.comprables__n b{color:var(--tricoma)}
.comprables__n a{color:var(--verde-vivo)}
.comprables__rej{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:720px){.comprables__rej{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.comprables__rej{grid-template-columns:repeat(4,minmax(0,1fr))}}
.prod{position:relative;display:flex;flex-direction:column;border:1px solid var(--linea);
  border-radius:8px;background:rgba(234,240,230,.02);overflow:hidden;
  transition:border-color .35s var(--curva),transform .35s var(--curva)}
.prod:hover{border-color:var(--c);transform:translateY(-3px)}
.prod:focus-within{outline:2px solid var(--verde);outline-offset:2px}
.prod__go{display:block;text-decoration:none;color:inherit;padding:14px 14px 8px}
/* El sobre: un envase construido. Lleva impreso el sello arriba y el pack
   abajo, porque un rectangulo con tres semillas en medio se leia como «vacio». */
.prod__sobre{position:relative;aspect-ratio:5/4;border-radius:6px;overflow:hidden;
  background:linear-gradient(170deg,#0e1512 0%,#070b0a 60%,#05090A 100%);
  border:1px solid rgba(234,240,230,.10);border-top:4px solid var(--c);margin-bottom:12px;
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 -30px 40px rgba(0,0,0,.35)}
.prod__sobre__sello{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--c);text-align:center;padding:12px 10px 0;opacity:.9}
.prod__sobre__pie{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t32);
  text-align:center;padding:0 10px 11px;display:flex;justify-content:center;gap:5px;flex-wrap:wrap;line-height:1.5}
.prod__sobre__pie i{font-style:normal;color:var(--t50);font-weight:600}
.prod__sobre__pie span::before{content:'· '}
/* en tarjetas de 174 px el pie parte en dos lineas: el punto medio no abre linea */
@media(max-width:719px){.prod__sobre__pie span::before{content:none}}
.prod__semillas{display:grid;gap:4px;padding:6px 16px;width:100%;
  grid-template-columns:repeat(4,1fr);justify-items:center;align-content:center;align-self:center}
.prod__semillas[data-n="3"]{grid-template-columns:repeat(3,1fr);padding:6px 20%}
.prod__semillas[data-n="7"]{grid-template-columns:repeat(4,1fr);padding:6px 14%}
.prod__semillas[data-n="16"]{padding:6px 12%}
.prod__semillas img{width:100%;max-width:72px;height:auto;transform:rotate(var(--r,0deg));
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.75))}
.prod__semillas img[hidden]{display:none}
.prod__nom{font-size:1.15rem;line-height:1.14;margin:3px 0 6px}
.prod__meta{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.prod__padres{font-size:12px;color:var(--t32);margin:0}
.prod__compra{margin-top:auto;padding:0 14px 14px;display:grid;gap:10px}
.prod__packs{display:flex;gap:6px}
.prod__packs button{flex:1;height:34px;border:1px solid var(--linea);border-radius:6px;
  font-size:13px;font-weight:700;color:var(--t70);transition:all .25s}
.prod__packs button[aria-pressed="true"]{background:var(--tricoma);color:var(--noche);border-color:var(--tricoma)}
.prod__precio{display:flex;align-items:baseline;gap:8px;margin:0;font-size:12.5px;color:var(--t50)}
.prod__precio b{font-size:1.35rem;color:var(--tricoma);font-weight:800}
.prod__precio s{color:var(--t32)}
.prod__compra .btn{height:42px;font-size:14px}
.comprables__nota{font-size:13px;color:var(--t32);margin:22px 0 0;max-width:70ch}

/* ---------- 5 · tres razones ---------- */
.razones{padding:clamp(48px,7vh,84px) 0;background:var(--humus)}
.razones__rej{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:900px){.razones__rej{grid-template-columns:repeat(3,minmax(0,1fr))}}
.razon{border:1px solid var(--linea);border-radius:8px;padding:22px;background:rgba(234,240,230,.02);
  display:flex;flex-direction:column;gap:12px;min-height:360px}
.razon h3{font-size:1.25rem;line-height:1.15;margin:auto 0 0}
.razon p{font-size:14.5px;color:var(--t70);margin:0}
.razon--foto{position:relative;overflow:hidden;justify-content:flex-end}
.razon--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.5)}
.razon--foto::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(5,9,10,.95) 30%,transparent 80%)}
.razon--foto h3,.razon--foto p{position:relative;z-index:2}
.arbol{width:100%;height:auto;max-height:180px}
.arbol text{fill:var(--tricoma);font-size:13px;font-weight:600}
.arbol .arbol__hija{fill:var(--verde-vivo);font-size:15px;font-weight:800}
.arbol path{fill:none;stroke:var(--verde);stroke-width:1.5}
.arbol circle{fill:var(--verde-vivo)}
.flor{width:100%;height:auto}
.flor line{stroke:var(--linea);stroke-width:1}
.flor__marcas rect{fill:var(--verde)}
.flor__rot text{fill:var(--t50);font-size:12px;font-weight:600}

/* ---------- 6 · el asistente ---------- */
.asist{padding:clamp(56px,8vh,96px) 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.asist__in{display:grid;gap:36px;align-items:center}
@media(min-width:960px){.asist__in{grid-template-columns:1.2fr .8fr;gap:64px}}
.asist__grupos{display:grid;gap:18px;margin-top:22px}
.asist__g h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t32);
  font-weight:600;margin:0 0 8px}
.asist__g button{margin:0 6px 6px 0;padding:10px 16px;border:1px solid var(--linea);
  border-radius:999px;font-size:14.5px;color:var(--t70);transition:all .25s}
.asist__g button b{color:var(--t32);font-weight:600;margin-left:4px}
.asist__g button[aria-pressed="true"]{background:var(--tricoma);color:var(--noche);border-color:var(--tricoma)}
.asist__g button[aria-pressed="true"] b{color:rgba(5,9,10,.6)}
.asist__res{text-align:center;padding:30px 24px;border:1px solid var(--linea);border-radius:10px;
  background:rgba(234,240,230,.03)}
.asist__num{font-size:clamp(4rem,9vw,7rem);font-weight:800;line-height:1;color:var(--verde-vivo);
  margin:0;transition:opacity .2s}
.asist__num.cambia{opacity:.15}
.asist__eti{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--t32);margin:6px 0 10px}
.asist__disp{font-size:15px;color:var(--t70);margin:0 0 18px}
.asist__aviso{font-size:13.5px;color:#E9A98F;margin:0 0 16px}
.asist__res .btn{width:100%}

/* ---------- 7 · colecciones ---------- */
.colec{padding:clamp(48px,7vh,84px) 0}
.colec__rej{display:grid;gap:12px;grid-template-columns:1fr;margin-top:22px}
@media(min-width:640px){.colec__rej{grid-template-columns:repeat(2,minmax(0,1fr))}}
.colec__c{position:relative;display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;
  text-decoration:none;background:var(--musgo)}
.colec__c img{width:100%;height:100%;object-fit:cover;filter:brightness(.62);
  transition:transform 1.2s var(--curva),filter .6s}
.colec__c:hover img{transform:scale(1.05);filter:brightness(.8)}
.colec__c span{position:absolute;left:0;right:0;bottom:0;padding:60px 22px 20px;
  background:linear-gradient(to top,rgba(5,9,10,.96),transparent)}
.colec__c b{display:block;font-size:1.5rem;font-weight:800;line-height:1.05}
.colec__c em{display:block;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t50);margin-top:5px}
.colec__c i{display:block;font-style:normal;font-size:15px;color:var(--verde-vivo);font-weight:700;margin-top:8px}
.colec__c i s{color:var(--t32);font-weight:400;font-size:13px;margin-left:5px}
.colec__pie{font-size:12.5px;color:var(--t32);margin:14px 0 0}

/* ---------- 9 · familias en abanico ---------- */
.fams{padding:clamp(56px,8vh,96px) 0;background:var(--humus);border-top:1px solid var(--linea)}
.fams__rej{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:26px}
@media(min-width:640px){.fams__rej{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.fams__rej{grid-template-columns:repeat(4,minmax(0,1fr))}}
.famc{display:block;text-decoration:none;border:1px solid var(--linea);border-radius:8px;padding:14px 14px 12px;
  background:rgba(234,240,230,.02);transition:border-color .35s,transform .35s var(--curva)}
.famc:hover{border-color:var(--c);transform:translateY(-3px)}
.famc svg{width:100%;height:auto;display:block}
.famc__abanico line{stroke:var(--c);stroke-width:1;opacity:.75}
.famc span{display:block;font-size:12px;color:var(--t50);margin-top:8px}
.famc b{display:block;font-size:1.05rem;color:var(--tricoma);font-weight:800}

/* ---------- 10 · los padres ---------- */
.padres{padding:clamp(56px,8vh,96px) 0}
.padres__svg{width:100%;height:auto;margin-top:30px;overflow:visible}
.padres__lineas path{fill:none;stroke-width:1;opacity:.6}
.padres__nodos text{fill:var(--tricoma);font-size:15px;font-weight:800}
.padres__nodos tspan{fill:var(--t50);font-weight:600;font-size:13px}
.padres__hijas text{fill:var(--t70);font-size:13px}
.padres__hijas a:hover text{fill:var(--verde-vivo)}
@media(max-width:759px){.padres__svg{min-width:720px}.padres .tira{overflow-x:auto}}

/* el trazo que entra una vez */
.traza path,.traza line{stroke-dasharray:1200;stroke-dashoffset:1200}
.traza.trazado path,.traza.trazado line{animation:trazar .9s var(--curva) forwards}
@keyframes trazar{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.traza path,.traza line{stroke-dashoffset:0;animation:none}}

/* ---------- 12 · el recibo ---------- */
.recibo{padding:clamp(56px,8vh,96px) 0;background:var(--humus);border-top:1px solid var(--linea)}
.recibo__in{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.recibo__in{grid-template-columns:1fr 440px;gap:64px}}
.recibo__papel{border:1px solid var(--linea);border-radius:8px;padding:22px 24px;
  background:rgba(234,240,230,.03);font-variant-numeric:tabular-nums}
.recibo__l{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--linea);font-size:14.5px;color:var(--t70)}
.recibo__l s{color:var(--t32);font-size:13px}
.recibo__l b{color:var(--tricoma);font-weight:700;min-width:64px;text-align:right}
.recibo__l--sub{grid-template-columns:1fr auto;margin-top:8px}
.recibo__l--menos{grid-template-columns:1fr auto}
.recibo__l--menos b{color:var(--verde)}
.recibo__l--total{grid-template-columns:1fr auto;border-bottom:0;padding-top:14px}
.recibo__l--total b{font-size:1.8rem;font-weight:800;color:var(--verde-vivo)}
.recibo__ahorro{font-size:13.5px;color:var(--t50);margin:8px 0 0;text-align:right}
.recibo__ahorro b{color:var(--verde)}

/* ---------- 13 · la sala, en banda ---------- */
.sala .btn{margin-top:26px}

/* ---------- 14 · avisos (apagado) ---------- */
.avisos{padding:clamp(48px,7vh,84px) 0;border-top:1px solid var(--linea)}
.avisos__in{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.avisos__in{grid-template-columns:1fr 1fr}}
.avisos__puntos{display:grid;grid-template-columns:repeat(13,1fr);gap:6px}
.avisos__puntos i{aspect-ratio:1;border-radius:999px;background:rgba(234,240,230,.10)}
.avisos__puntos i.on{background:var(--verde)}
.avisos__form{display:grid;gap:10px;margin-top:18px;max-width:420px}
.avisos__form input[type="email"]{height:46px;padding:0 14px;border-radius:6px;border:1px solid var(--linea);
  background:rgba(234,240,230,.05);color:var(--tricoma);font-family:var(--texto);font-size:15px}
.avisos__ok{font-size:13px;color:var(--t50);display:flex;gap:8px;align-items:center}

/* ---------- 15 · pie de seis columnas ---------- */
.pie--seis .pie__in{grid-template-columns:1fr}
@media(min-width:640px){.pie--seis .pie__in{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.pie--seis .pie__in{grid-template-columns:1.3fr repeat(5,minmax(0,1fr))}}
.pie--seis ul a span{color:var(--t32);font-size:12px;margin-left:5px}
.pie__fam{columns:2;column-gap:14px}

/* =========================================================================
   LA GALERIA HORIZONTAL (10-sep): las hermanas de la ficha van en una fila
   de 6 que se pasa con flechas (o con el dedo). Nunca un renglon a medias:
   es una tira, no una rejilla.
   ========================================================================= */
.galeria{--g:clamp(10px,1.1vw,16px);position:relative}
.galeria__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.galeria__cab .rotulo{margin-bottom:0}
.galeria__flechas{display:flex;gap:8px}
.galeria__flechas button{width:42px;height:42px;border-radius:50%;border:1px solid var(--linea);
  display:grid;place-items:center;color:var(--t70);font-size:18px;
  transition:color .3s,border-color .3s,background .3s}
.galeria__flechas button:hover{color:var(--tricoma);border-color:var(--t50);background:rgba(234,240,230,.06)}
.galeria__flechas button:disabled{opacity:.3;pointer-events:none}
.galeria__tira{display:grid;grid-auto-flow:column;gap:var(--g);overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  padding-bottom:4px;grid-auto-columns:calc((100% - var(--g)) / 1.6)}
.galeria__tira::-webkit-scrollbar{display:none}
.galeria__tira>*{scroll-snap-align:start}
/* Escalonado: a 1100 con 6 la tarjeta se quedaba en 160 px y el cuerpo tapaba la foto.
   3 desde 640, 4 desde 900, 5 desde 1100 (como el catalogo) y 6 desde 1400. */
@media(min-width:640px){.galeria__tira{grid-auto-columns:calc((100% - 2*var(--g)) / 3)}}
@media(min-width:900px){.galeria__tira{grid-auto-columns:calc((100% - 3*var(--g)) / 4)}}
@media(min-width:1100px){.galeria__tira{grid-auto-columns:calc((100% - 4*var(--g)) / 5)}}
@media(min-width:1400px){.galeria__tira{grid-auto-columns:calc((100% - 5*var(--g)) / 6)}}
@media(max-width:639px){.galeria__flechas{display:none}}
.galeria--quieta .galeria__flechas{display:none}
/* el anillo de foco no se recorta contra el borde del scroller */
.galeria__tira .var:focus-within{outline-offset:-2px}