/* GENERADO por tools/construir-css.py a partir de raw/css/ — no editar:
   los cambios se pierden en la siguiente pasada. */
/* ============================================================
   PIPPA JUGOSITO — Sistema de diseño "Trópico"
   Rebranding inspirado en el lenguaje editorial de Mana Yerba Mate,
   con la identidad, tipografía (Archivo) y paleta de Pippa GT.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marca Pippa */
  --rojo:#e32402;
  --rojo-hondo:#a81208;
  --amarillo:#fdc656;
  --crema:#fcf4e4;
  --crema-alta:#fffaf0;
  --salvia:#c3cca6;
  --tinta:#151210;
  --tinta-suave:rgb(21 18 16 / .58);

  /* Sabores tropicales */
  --coco:#7ecfc9;
  --guanabana:#7fb069;
  --mango:#f58220;
  --maracuya:#c8438a;
  --pina:#f2b705;
  --melocoton:#f28f6b;
  --sandia:#e8556d;
  --limon:#a8cf3a;
  --chocolate:#8a5a3b;
  --melon:#bcd97a;
  --punch:#ef6a5a;

  /* Tema dinámico (lo cambia el scroll) */
  --tema-fondo:var(--crema);
  --tema-tinta:var(--tinta);
  --tema-acento:var(--rojo);

  /* Retícula de 12 columnas, al estilo de la referencia */
  --marco:94.6vw;
  --canal:2.7vw;
  --col:calc((var(--marco) - 11 * var(--canal)) / 12);
  --col-4:calc(var(--col) * 4 + 3 * var(--canal));
  --col-5:calc(var(--col) * 5 + 4 * var(--canal));
  --col-6:calc(var(--col) * 6 + 5 * var(--canal));
  --col-8:calc(var(--col) * 8 + 7 * var(--canal));
  --col-10:calc(var(--col) * 10 + 9 * var(--canal));

  --radio:24px;
  --radio-l:44px;
  --nav-h:76px;
  --anuncio-h:38px;
  --techo-h:calc(var(--anuncio-h) + var(--nav-h));
  --easing:cubic-bezier(.22,1,.36,1);
}
@media (max-width:860px){
  :root{ --marco:calc(100vw - 40px); --canal:20px; --nav-h:60px; --anuncio-h:34px; --radio-l:28px; }
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html.js-suave{ scroll-behavior:auto; }

body{
  font:400 clamp(15px,1.02vw,19px)/1.5 'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--tema-fondo);
  color:var(--tema-tinta);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background-color .7s var(--easing), color .7s var(--easing);
}
img,svg,canvas{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
ul{ list-style:none; }
input{ font:inherit; color:inherit; background:none; border:0; appearance:none; }
::selection{ background:var(--tema-acento); color:#fff; }

:focus-visible{ outline:3px solid var(--tema-acento); outline-offset:3px; border-radius:6px; }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3. Escala tipográfica ---------- */
.titulo{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:clamp(26px,3vw,46px);
  line-height:.98; letter-spacing:-.03em; text-transform:uppercase;
}
.titulo-2{
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(24px,2.5vw,40px);
  line-height:1.05; letter-spacing:-.025em; text-transform:uppercase;
}
.titulo-3{
  font-weight:800; font-size:clamp(19px,1.35vw,24px);
  line-height:1.08; letter-spacing:-.015em;
}
.cursiva{ font-style:italic; font-weight:900; letter-spacing:-.02em; text-transform:none; }
.parrafo{ font-size:clamp(16px,1.08vw,20px); line-height:1.5; }
.micro{
  font-size:clamp(11px,.78vw,14px); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}

/* ---------- 4. Estructura ---------- */
.marco{ width:var(--marco); margin-inline:auto; }
.seccion{ position:relative; padding-block:clamp(64px,7vw,128px); }
.seccion--compacta{ padding-block:clamp(44px,4.2vw,76px); }
/* Ahorra pintado en secciones fuera de pantalla */
.difiere{ content-visibility:auto; contain-intrinsic-size:auto 900px; }

/* ---------- 5. Botones ---------- */
.btn{
  --btn-fondo:var(--tinta); --btn-tinta:var(--crema);
  position:relative; display:inline-flex; align-items:center; gap:.7em;
  padding:1.05em 1.9em; border-radius:999px;
  background:var(--btn-fondo); color:var(--btn-tinta);
  font-weight:800; font-size:clamp(13px,.92vw,16px);
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  transition:transform .5s var(--easing), background-color .35s, color .35s;
  will-change:transform;
}
.btn:hover{ --btn-fondo:var(--tema-acento); --btn-tinta:#fff; }
.btn:active{ transform:scale(.96); }
.btn--acento{ --btn-fondo:var(--rojo); --btn-tinta:#fff; }
.btn--acento:hover{ --btn-fondo:var(--tinta); --btn-tinta:var(--amarillo); }
.btn--linea{
  --btn-fondo:transparent; --btn-tinta:currentColor;
  box-shadow:inset 0 0 0 2px currentColor;
}
.btn--linea:hover{ --btn-fondo:var(--tinta); --btn-tinta:var(--crema); box-shadow:none; }
.btn svg{ width:1em; height:1em; flex:none; }

/* ---------- 6. Cabecera ---------- */
.techo{
  position:fixed; inset:0 0 auto; z-index:60;
  /* will-change:transform la convertía en bloque contenedor de los fixed hijos
     (el menú móvil no cubría la pantalla). La cabecera ya no se mueve, así que fuera. */
}

/* Barra de anuncios: se pliega al bajar para dejar la navegación compacta */
.anuncio{
  height:var(--anuncio-h); overflow:hidden;
  background:var(--tinta); color:var(--crema);
  transition:height .45s var(--easing);
}
.techo--fijo .anuncio{ height:0; }
.anuncio__caja{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:var(--anuncio-h);
  font-size:clamp(11px,.78vw,13px); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.anuncio__tel{ display:flex; gap:18px; }
.anuncio__tel a:hover{ color:var(--amarillo); }
@media (max-width:760px){
  .anuncio__caja > span:first-child{ display:none; }
  .anuncio__caja{ justify-content:center; }
  .anuncio__tel{ gap:14px; font-size:10.5px; }
}

.cabecera{
  height:var(--nav-h); display:flex; align-items:center;
  transition:background-color .4s, box-shadow .4s;
}
.techo--fijo .cabecera{
  background:rgb(252 244 228 / .84);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 rgb(21 18 16 / .1);
}
.cabecera__caja{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.marca{ display:flex; align-items:center; gap:10px; flex:none; }
.marca img{ width:auto; height:clamp(26px,2.3vw,36px); }
.nav{ display:flex; align-items:center; gap:clamp(16px,2vw,38px); }
.nav a{
  position:relative; font-weight:700; font-size:clamp(12px,.86vw,15px);
  letter-spacing:.1em; text-transform:uppercase; padding-block:6px;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--easing);
}
.nav a:hover::after,.nav a[aria-current]::after{ transform:scaleX(1); transform-origin:left; }
.nav__grupo{ position:relative; }
.nav__abre{
  display:inline-flex; align-items:center; gap:.35em; padding-block:6px;
  font-weight:700; font-size:clamp(12px,.86vw,15px); letter-spacing:.1em; text-transform:uppercase;
}
.nav__abre svg{ width:1em; height:1em; transition:rotate .3s var(--easing); }
.nav__abre[aria-expanded="true"] svg{ rotate:180deg; }
.submenu{
  position:absolute; top:calc(100% + 14px); left:50%; translate:-50% 0;
  min-width:206px; padding:10px; border-radius:18px;
  background:var(--crema-alta); color:var(--tinta);
  box-shadow:0 18px 40px rgb(21 18 16 / .18), inset 0 0 0 1.5px rgb(21 18 16 / .1);
  opacity:0; visibility:hidden; translate:-50% 8px;
  transition:opacity .28s, translate .35s var(--easing), visibility 0s .3s;
}
.nav__grupo:hover .submenu,
.nav__grupo:focus-within .submenu,
.nav__abre[aria-expanded="true"] + .submenu{
  opacity:1; visibility:visible; translate:-50% 0; transition-delay:0s;
}
.submenu a{
  display:block; padding:.62em .9em; border-radius:11px;
  font-size:14px; font-weight:600; letter-spacing:0; text-transform:none;
  transition:background-color .22s;
}
.submenu a::after{ display:none; }
.submenu a:hover{ background:var(--amarillo); }

.cabecera__fin{ display:flex; align-items:center; gap:6px; flex:none; }
/* Sin carrito (el sitio no vende en línea): el hueco de la cabecera lo llenan
   las redes, el enlace que de verdad tiene algo que hacer ahí. */
.redes{ display:flex; align-items:center; gap:2px; }
.redes a{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  transition:background-color .3s, color .3s;
}
.redes a:hover{ background:rgb(21 18 16 / .08); }
.redes a svg{ width:18px; height:18px; }

/* Botón hamburguesa */
/* Los tres trazos se apilan en el mismo centro y se separan con translate:
   así al cerrar giran sobre el mismo punto y forman una X exacta. */
.menu-btn{ display:none; position:relative; width:44px; height:44px; }
.menu-btn i{
  position:absolute; left:10px; top:21px; width:24px; height:2px;
  background:currentColor; border-radius:2px;
  transition:transform .4s var(--easing), opacity .25s;
}
.menu-btn i:nth-child(1){ transform:translateY(-7px); }
.menu-btn i:nth-child(3){ transform:translateY(7px); }
[aria-expanded="true"].menu-btn i:nth-child(1){ transform:rotate(45deg); }
[aria-expanded="true"].menu-btn i:nth-child(2){ opacity:0; }
[aria-expanded="true"].menu-btn i:nth-child(3){ transform:rotate(-45deg); }

@media (max-width:900px){
  .menu-btn{ display:block; }
  .nav{
    position:fixed; inset:0; width:100vw; height:100dvh; z-index:-1;
    flex-direction:column; justify-content:center; gap:8px;
    background:var(--crema); padding:var(--nav-h) 24px 24px;
    clip-path:circle(0% at calc(100% - 44px) 34px);
    transition:clip-path .7s var(--easing);
    pointer-events:none;
  }
  .nav a{ font-size:clamp(24px,7vw,42px); letter-spacing:-.02em; font-weight:900;
          font-family:'Archivo Black',sans-serif; padding-block:2px;
          text-align:center; text-wrap:balance; }
  .nav a::after{ display:none; }
  .nav--abierta{ clip-path:circle(145% at calc(100% - 44px) 34px); pointer-events:auto; }

  /* En móvil el submenú se despliega en línea: no hay hover ni sitio para un desplegable */
  .nav__grupo{ width:100%; text-align:center; }
  .nav__abre{ display:none; }
  .submenu{
    position:static; translate:none; opacity:1; visibility:visible;
    min-width:0; padding:0; margin-top:2px; background:none; box-shadow:none;
  }
  .submenu li + li{ margin-top:2px; }
  .submenu a{
    font-family:'Archivo',sans-serif; font-size:clamp(14px,3.9vw,18px);
    font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:.2em; opacity:.6;
  }
  .submenu a:hover{ background:none; opacity:1; }
}

/* ---------- 8. Portada ---------- */
.portada{
  position:relative; min-height:100svh; overflow:hidden;
  display:grid; place-items:center;
  padding-top:var(--nav-h); padding-bottom:clamp(70px,10vh,120px);
  background:linear-gradient(178deg,#ffe9a8 0%,var(--amarillo) 42%,#ffb35c 78%,#ff8f4d 100%);
  color:var(--tinta);
}
.portada__capas{ position:absolute; inset:-8% -4%; z-index:0; pointer-events:none; }
.portada__capas span{
  position:absolute; border-radius:50%; will-change:transform;
  filter:blur(.5px); opacity:.55; mix-blend-mode:multiply;
}
.sol{ inset:auto auto 4% 50%; width:min(120vw,1500px); aspect-ratio:1;
      translate:-50% 0; background:radial-gradient(circle,#fff7dd 0 38%,rgb(255 247 221 / 0) 66%);
      opacity:.85; mix-blend-mode:normal; }
.b1{ top:6%; left:4%;  width:20vw; min-width:150px; aspect-ratio:1; background:#ff8f4d; }
.b2{ top:58%; left:-4%; width:26vw; min-width:180px; aspect-ratio:1; background:#f2b705; }
.b3{ top:12%; right:2%; width:24vw; min-width:170px; aspect-ratio:1; background:#ffb35c; }
.b4{ top:66%; right:6%; width:16vw; min-width:120px; aspect-ratio:1; background:#7fb069; opacity:.4; }

/* Ilustraciones planas animadas: el <span> lleva el paralaje (lo escribe el JS)
   y el <svg> interior el balanceo, para que un transform no pise al otro. */
.portada__ilustraciones{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.il{ position:absolute; display:block; will-change:transform; }
.il svg{ width:100%; height:auto; display:block; animation:flota var(--dur,7s) ease-in-out var(--esp,0s) infinite; }
.il--lento svg{ animation-name:gira; }
@keyframes flota{
  0%,100%{ transform:translateY(0) rotate(var(--gi,0deg)); }
  50%    { transform:translateY(-22px) rotate(calc(var(--gi,0deg) + 5deg)); }
}
@keyframes gira{
  0%,100%{ transform:translateY(0) rotate(var(--gi,0deg)); }
  50%    { transform:translateY(-14px) rotate(calc(var(--gi,0deg) - 7deg)); }
}
.i1 { width:clamp(78px,10.6vw,172px); left:4%;  top:21%; --dur:7.5s; --gi:-8deg; }
.i2 { width:clamp(72px,9.6vw,156px);  right:5%; top:17%; --dur:8.5s; --esp:-1.2s; --gi:10deg; }
.i3 { width:clamp(82px,11vw,180px);   left:8%;  top:60%; --dur:9s;   --esp:-2.4s; --gi:6deg; }
.i4 { width:clamp(74px,9.9vw,162px);  right:7%; top:58%; --dur:7.8s; --esp:-.8s;  --gi:-9deg; }
.i5 { width:clamp(60px,7.8vw,128px);  left:2%;  top:42%; --dur:8.2s; --esp:-3s;   --gi:12deg; }
.i6 { width:clamp(66px,8.8vw,144px);  right:2%; top:36%; --dur:10s;  --esp:-1.6s; --gi:-16deg; }
.i7 { width:clamp(62px,8.2vw,136px);  left:20%; top:80%; --dur:11s;  --esp:-4s;   --gi:24deg; }
.i8 { width:clamp(30px,3.6vw,58px);   left:25%; top:12%; --dur:6.4s; --esp:-2s;   --gi:-6deg; }
.i9 { width:clamp(28px,3.2vw,52px);   right:24%;top:76%; --dur:6.8s; --esp:-3.4s; --gi:8deg; }
.i10{ width:clamp(64px,8.4vw,134px);  right:15%;top:10%; --dur:14s;  --esp:-2s;   --gi:0deg; }
.i10 svg{ animation-name:gira; }
@media (max-width:860px){
  .i5,.i8,.i9{ display:none; }
  .i1 { width:clamp(74px,13vw,120px); left:1%;  top:16%; }
  .i2 { width:clamp(66px,11.5vw,108px); right:1%; top:13%; }
  .i3 { width:clamp(80px,14vw,128px); left:3%;  top:70%; }
  .i4 { width:clamp(72px,12.5vw,116px); right:2%; top:68%; }
  .i6 { width:clamp(52px,9vw,84px);  right:4%; top:44%; }
  .i7 { width:clamp(56px,10vw,92px); left:20%; top:87%; }
  .i10{ width:clamp(56px,10vw,92px); right:12%; top:6%; }
}
/* Muy estrecho: el texto va centrado y ocupa casi todo el alto, así que las cuatro
   frutas que quedan se anclan al zócalo con `bottom` en vez de a un `top` en % —
   así no dependen del alto de la pantalla y nunca alcanzan a los botones. */
@media (max-width:520px){
  .i6,.i7,.i10{ display:none; }
  /* en arco, de esquina a esquina, sin llegar a rozar el borde */
  .i1 { width:clamp(58px,17vw,72px); left:3%;   top:auto; bottom:3%; }
  .i3 { width:clamp(50px,14vw,62px); left:27%;  top:auto; bottom:11%; }
  .i4 { width:clamp(52px,15vw,66px); right:26%; top:auto; bottom:12%; }
  .i2 { width:clamp(54px,16vw,68px); right:3%;  top:auto; bottom:2%; }
}
/* Pantalla baja: el texto centrado deja un zócalo de ~120 px, y `flota` sube las piezas
   hasta 22 px, así que las cuatro se pegan al suelo o acabarían rozando los botones. */
@media (max-width:520px) and (max-height:720px){
  .i1{ bottom:2%; } .i2{ bottom:1%; }
  .i3{ width:clamp(46px,13vw,56px); bottom:4%; }
  .i4{ width:clamp(48px,14vw,60px); bottom:3%; }
}
/* Si la pantalla da de sí, el hueco entre la cabecera y el titular se llena */
@media (max-width:520px) and (min-height:720px){
  .i10{ display:block; width:clamp(46px,13vw,62px);
        right:6%; top:calc(var(--techo-h) + 10px); bottom:auto; }
  .i7 { display:block; width:clamp(40px,11vw,54px);
        left:7%;  top:calc(var(--techo-h) + 26px); bottom:auto; }
}

.portada__contenido{
  position:relative; z-index:2;
  text-align:center; padding-block:clamp(16px,3vh,48px) 0;
}
.portada__marca{ display:block; }
/* Se limita también por altura: si no, en portátiles bajos el logotipo desborda */
.portada__marca img{
  width:min(42vw,34vh,440px); height:auto; margin-inline:auto;
  filter:drop-shadow(0 16px 26px rgb(150 45 0 / .26));
}
@media (max-width:700px){ .portada__marca img{ width:min(72vw,32vh); } }
.portada__eyebrow{ display:inline-flex; align-items:center; gap:.7em; margin-bottom:clamp(14px,2vh,26px); }
.portada__eyebrow em{
  font-style:normal; padding:.5em 1em; border-radius:999px;
  background:var(--rojo); color:#fff; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; font-size:clamp(10px,.72vw,13px);
}
.portada__lema{
  display:block; margin-top:.3em;
  font-size:clamp(20px,2.35vw,38px); font-weight:900; font-style:italic;
  letter-spacing:-.02em; line-height:.98; color:var(--tinta); text-transform:none;
}
.portada__bajada{
  max-width:52ch; margin:clamp(20px,3vh,34px) auto 0;
  font-size:clamp(15px,1.05vw,19px); line-height:1.5; color:rgb(21 18 16 / .78);
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
                    margin-top:clamp(22px,3.4vh,40px); }
/* El botón de línea es transparente, y al desplazar las ilustraciones pasan por detrás y se
   ven a través de él. Un velo claro lo asienta sin renunciar al trazo. */
.portada__acciones .btn--linea{ --btn-fondo:rgb(255 255 255 / .68);
                                backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.portada__acciones .btn--linea:hover{ --btn-fondo:var(--tinta); --btn-tinta:var(--crema); }
.portada__pie{
  position:absolute; z-index:3; inset:auto 0 0; padding:0 0 20px;
  display:flex; justify-content:space-between; align-items:flex-end;
  width:var(--marco); margin-inline:auto; gap:20px;
}
.raton{ display:flex; align-items:center; gap:10px; font-weight:700;
        font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.raton::before{
  content:''; width:22px; height:34px; border-radius:12px;
  box-shadow:inset 0 0 0 2px currentColor; position:relative;
  background:radial-gradient(circle at 50% 22%, currentColor 0 2.5px, transparent 3px);
  animation:rueda 1.9s var(--easing) infinite;
}
@keyframes rueda{ 0%,100%{ background-position:50% 0; } 50%{ background-position:50% 9px; } }
@media (max-width:700px){
  .portada__pie{ display:none; }
}
/* Móviles pequeños y apaisados */
@media (max-width:700px) and (max-height:700px){
  .portada__marca img{ width:min(66vw,26vh); }
  .portada__bajada{ font-size:15px; }
}
/* Portátiles anchos pero bajos: la tipografía escala con el ancho y desbordaba la altura */
@media (min-width:701px) and (max-height:820px){
  .portada{ --nav-h:60px; --anuncio-h:32px; }
  .portada__lema{ font-size:clamp(20px,2.1vw,33px); }
  .portada__bajada{ font-size:16px; margin-top:16px; }
  .portada__acciones{ margin-top:20px; }
  .portada__eyebrow{ margin-bottom:12px; }
}

/* Cabecera de subpágina: la misma portada, comprimida a una franja en vez de a
   toda la altura — para páginas propias (como el blog) que no son la de inicio. */
.portada--pagina{
  min-height:0; padding-top:calc(var(--nav-h) + clamp(30px,5.4vh,64px));
  padding-bottom:clamp(46px,6.4vh,84px);
}
.portada--pagina .portada__contenido{ max-width:62ch; margin-inline:auto; }
@media (max-width:760px){
  .portada--pagina{ padding-top:calc(var(--nav-h) + 20px); padding-bottom:40px; }
  /* La franja es mucho más baja que la portada completa: a este ancho las
     ilustraciones caen encima de la bajada en vez de flotar alrededor. */
  .portada--pagina .portada__ilustraciones{ display:none; }
}

/* ---------- 9. Sobre nosotros ---------- */
.sabores-nat{ background:var(--crema); }

/* Texto a la izquierda y una pieza de producto a la derecha, como los `media_with_content`
   de su portada: la versión anterior era texto centrado sobre crema y se caía del resto. */
.nosotros{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(32px,var(--canal),64px); align-items:center;
}
@media (max-width:900px){ .nosotros{ grid-template-columns:1fr; gap:36px; } }

.nosotros__texto{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(18px,2vw,30px); }
.nosotros__texto .btn{ margin-top:4px; }

/* El titular y la bajada de esta sección son los suyos, palabra por palabra:
   «Sabores naturales» es su <h2> y la frase de debajo su texto de apoyo. */
.nosotros__texto .titulo{ max-width:11em; }
.nosotros__texto .parrafo{ max-width:34ch; color:var(--tinta-suave); }
.palabra{ display:inline-block; overflow:hidden; vertical-align:top; }
.palabra > span{
  display:inline-block; translate:0 105%;
  transition:translate .85s var(--easing);
  transition-delay:calc(var(--i) * 26ms);
}
.visible .palabra > span{ translate:0 0; }

/* Misión y visión: dos bloques con filete de color en vez de dos columnas de texto suelto.
   Apilados dejaban medio ancho de columna en blanco, así que en pantalla ancha van a la par. */
.credo{ display:grid; gap:clamp(16px,1.6vw,24px); width:100%; }
@media (min-width:1100px){ .credo{ grid-template-columns:1fr 1fr; gap:clamp(20px,2vw,34px); } }
.credo__item{ padding-left:clamp(16px,1.4vw,22px); border-left:3px solid var(--pilar,var(--rojo)); }
.credo dt{
  font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pilar,var(--rojo)); margin-bottom:6px;
}
.credo dd{ font-size:clamp(14px,.95vw,16px); line-height:1.55; color:var(--tinta-suave); max-width:42ch; }

/* La pieza: mancha de color, producto encima y dos ilustraciones asomando */
.nosotros__pieza{
  position:relative; display:grid; place-items:center;
  aspect-ratio:1; border-radius:var(--radio-l); overflow:hidden;
  background:linear-gradient(155deg,#eef3e2 0%,var(--salvia) 100%);
}
.nosotros__mancha{
  position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:rgb(255 255 255 / .5); filter:blur(2px);
  animation:latido 9s var(--easing) infinite;
}
@keyframes latido{ 0%,100%{ scale:1; } 50%{ scale:1.07; } }
.nosotros__pieza img{
  position:relative; width:74%; height:auto;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 56%, transparent 78%);
          mask-image:radial-gradient(circle at 50% 50%, #000 56%, transparent 78%);
  filter:drop-shadow(0 22px 38px rgb(60 70 30 / .26));
}
.nosotros__il{ position:absolute; display:block; pointer-events:none; }
.nosotros__il svg{ width:100%; height:auto; display:block;
                   animation:flota var(--dur,8s) ease-in-out var(--esp,0s) infinite; }
.nosotros__il--a{ width:clamp(52px,7vw,96px);  left:5%;  top:11%; --dur:9s;   --gi:-14deg; }
.nosotros__il--b{ width:clamp(48px,6.4vw,88px); right:6%; bottom:9%; --dur:7.6s; --esp:-2s; --gi:10deg; }
.nosotros__pieza figcaption{
  position:absolute; inset:auto 0 0; padding:clamp(14px,1.4vw,20px) clamp(16px,1.8vw,26px);
  background:linear-gradient(to top, rgb(252 244 228 / .96) 62%, rgb(252 244 228 / 0));
  font-size:clamp(13px,.9vw,15px); line-height:1.45; text-align:center; color:var(--tinta);
}
.nosotros__pieza figcaption b{ font-weight:800; }

/* Los tres valores, en un panel de color en vez de tres columnas sobre el fondo */
.valores{ margin-top:clamp(44px,5vw,88px); }
.valores__rotulo{ color:var(--tinta-suave); margin-bottom:clamp(14px,1.6vw,22px); }
.valores__rejilla{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.4vw,22px);
  padding:clamp(20px,2.2vw,34px); border-radius:var(--radio-l);
  background:var(--salvia);
}
.valor{
  padding:clamp(20px,2vw,30px); border-radius:var(--radio);
  background:var(--crema-alta);
  transition:transform .5s var(--easing), box-shadow .5s var(--easing);
}
.valor:hover{ transform:translateY(-6px); box-shadow:0 16px 34px rgb(40 50 20 / .16); }
.valor h3{ font-weight:800; font-size:clamp(18px,1.32vw,24px); line-height:1.1;
           letter-spacing:-.015em; margin-bottom:8px; }
.valor p{ font-size:clamp(14px,.92vw,16px); line-height:1.5; color:var(--tinta-suave); }
@media (max-width:820px){
  .valores__rejilla{ grid-template-columns:1fr; gap:12px; }
}

/* ---------- 10. Pilares ---------- */
.pilar__icono{
  width:clamp(52px,4.4vw,78px); height:clamp(52px,4.4vw,78px); margin-bottom:16px;
  border-radius:50%; display:grid; place-items:center; color:var(--tinta);
  background:var(--pilar,var(--amarillo));
  transition:transform .6s var(--easing);
}
.valor:hover .pilar__icono{ transform:rotate(-10deg) scale(1.08); }
.pilar__icono svg{ width:52%; height:52%; }

/* ---------- 11. Carrusel de sabores ---------- */
.sabores{
  position:relative; overflow:hidden;
  --sabor-fondo:var(--guanabana); --sabor-tinta:#fff;
  background:var(--sabor-fondo);
  color:var(--sabor-tinta);
  transition:background-color .8s var(--easing), color .8s var(--easing);
}
.sabores__cabeza{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sabores__pista{
  display:flex; gap:var(--canal); margin-top:clamp(30px,4vw,60px);
  padding-inline:calc((100vw - var(--marco)) / 2);
  /* sin scroll-padding, el anclaje 'start' pega la primera tarjeta al borde de la pantalla */
  scroll-padding-inline:calc((100vw - var(--marco)) / 2);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; overscroll-behavior-x:contain;
}
.sabores__pista::-webkit-scrollbar{ display:none; }
.sabores__pista.arrastrando{ cursor:grabbing; scroll-snap-type:none; }
.sabor{
  flex:none; width:min(76vw,var(--col-4)); scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.sabor__figura{
  position:relative; width:100%; aspect-ratio:1; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit;
  display:grid; place-items:center; border-radius:var(--radio-l);
  background:rgb(255 255 255 / .18); overflow:hidden;
  transition:transform .7s var(--easing), background-color .5s;
}
.sabor:hover .sabor__figura{ transform:translateY(-10px) scale(1.02); background:rgb(255 255 255 / .3); }
.sabor__figura img{ width:100%; height:100%; object-fit:contain; }
.sabor__nombre{ margin-top:18px; font-family:'Archivo Black',sans-serif;
                font-size:clamp(20px,1.55vw,27px); line-height:1.06; letter-spacing:-.02em; text-transform:uppercase; }
.sabor__meta{ margin-top:8px; font-weight:700; letter-spacing:.1em;
              text-transform:uppercase; font-size:12px; opacity:.85; }
@media (max-width:980px){ .sabor{ width:min(76vw,320px); } }
.sabores__mando{ display:flex; gap:10px; }
.flecha{
  width:clamp(46px,3.4vw,58px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  box-shadow:inset 0 0 0 2px currentColor; transition:background-color .3s,color .3s,transform .3s;
}
.flecha:hover{ background:currentColor; transform:scale(1.06); }
.flecha:hover svg{ color:var(--sabor-fondo); }
.flecha svg{ width:38%; height:38%; }

/* ---------- 12. Catálogo ---------- */
.filtros{ display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(26px,3vw,44px); }
.chip{
  padding:.72em 1.25em; border-radius:999px; font-weight:800;
  font-size:clamp(11px,.8vw,14px); letter-spacing:.09em; text-transform:uppercase;
  box-shadow:inset 0 0 0 2px rgb(21 18 16 / .22);
  transition:background-color .3s, color .3s, box-shadow .3s;
}
.chip:hover{ box-shadow:inset 0 0 0 2px var(--tinta); }
.chip[aria-pressed="true"]{ background:var(--tinta); color:var(--crema); box-shadow:none; }

.filtros__cuenta{
  margin-left:auto; align-self:center;
  font-size:clamp(11px,.8vw,13px); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave);
  font-variant-numeric:tabular-nums;
}
@media (max-width:700px){ .filtros__cuenta{ margin:6px 0 0; width:100%; } }

.rejilla{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--canal) var(--canal);
  margin-top:clamp(30px,3.4vw,56px);
}
.rejilla--4{ margin-top:clamp(34px,4vw,64px); }
@media (max-width:1080px){ .rejilla{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .rejilla{ grid-template-columns:repeat(2,1fr); gap:26px 16px; } }

.producto{ display:flex; flex-direction:column; transition:opacity .45s, transform .45s var(--easing); }
.producto[hidden]{ display:none; }
.producto__figura{
  position:relative; border-radius:var(--radio-l); overflow:hidden;
  aspect-ratio:1; background:var(--tono,var(--salvia));
  background-size:cover; background-position:center;
  transition:transform .6s var(--easing);
}
.producto:hover .producto__figura{ transform:translateY(-8px); }
.producto__figura img{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain;
  transition:transform .8s var(--easing), opacity .5s;
}
.producto:hover .producto__figura img{ transform:scale(1.07) rotate(-1.5deg); }
.producto__etiqueta{
  position:absolute; z-index:2; top:12px; left:12px;
  padding:.45em .85em; border-radius:999px; background:var(--crema-alta); color:var(--tinta);
  font-weight:800; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
}
.producto__ver{
  position:absolute; z-index:2; inset:auto 12px 12px; padding:.8em;
  border-radius:999px; background:var(--tinta); color:var(--crema);
  font-weight:800; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; text-align:center;
  translate:0 calc(100% + 14px); opacity:0;
  transition:translate .5s var(--easing), opacity .35s;
}
.producto:hover .producto__ver,.producto:focus-within .producto__ver{ translate:0 0; opacity:1; }
.producto__pie{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:15px; }
.producto__pie h3{ font-weight:800; font-size:clamp(14px,1.02vw,19px); line-height:1.16; letter-spacing:-.01em; }
.producto__precio{ font-weight:800; font-size:clamp(14px,1.02vw,19px); white-space:nowrap; font-variant-numeric:tabular-nums; }
.producto__vol{ margin-top:4px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); }

/* La portada muestra sólo dos filas; «Ver el catálogo completo» lleva a catalogo.html
   en vez de desplegar el resto aquí, así la portada no termina en un muro de 19 tarjetas. */
.catalogo__mas{ display:flex; justify-content:center; margin-top:clamp(34px,4vw,56px); }

/* ---------- 14. Contacto ---------- */
/* Ya no es una franja oscura de ancho completo: es una tarjeta compacta flotando sobre
   el fondo claro normal de la página, como pidió Marco en la segunda vuelta («recuadro
   pequeño, flotante»). El titular va centrado encima, fuera de la tarjeta, y el color
   oscuro se queda sólo dentro de ella — el resto de la sección es una sección clara más. */
.contacto{ position:relative; overflow:hidden; }
.contacto .marco{ position:relative; z-index:1; }

.contacto__entrada{ max-width:52ch; margin-inline:auto; text-align:center; }
.contacto__entrada .titulo{ max-width:16em; margin-inline:auto; }
.contacto__entrada .parrafo{ margin:18px auto 0; max-width:46ch; color:var(--tinta-suave); }

/* Dos frutas grandes en el fondo claro, no ya apretadas contra el formulario: con la
   tarjeta angosta sobra sitio a los lados y aguantan un tamaño mayor sin rozar nada. */
.contacto__il{ position:absolute; z-index:0; pointer-events:none; display:block; opacity:.5; }
.contacto__il svg{ width:100%; height:auto; display:block; animation:flota var(--dur,9s) ease-in-out var(--esp,0s) infinite; }
.contacto__il--pina{ width:clamp(64px,7.4vw,124px); left:3%; top:6%; --dur:8.5s; --esp:-1.2s; }
.contacto__il--hoja{ width:clamp(56px,6.4vw,108px); right:4%; bottom:8%; --dur:10s; --esp:-2s; --gi:-10deg; }
.contacto__il--hoja svg{ animation-name:gira; }
@media (max-width:900px){ .contacto__il{ display:none; } }

/* La tarjeta: el mismo oscuro cálido que llevaba toda la sección antes, ahora contenido
   en un panel redondeado con sombra en vez de ocupar el ancho entero. */
.tarjeta-contacto{
  position:relative; overflow:hidden; z-index:1;
  max-width:640px; margin:clamp(36px,4.4vw,60px) auto 0;
  padding:clamp(30px,4vw,52px);
  border-radius:var(--radio-l);
  background:var(--tinta); color:var(--crema);
  box-shadow:0 30px 60px -20px rgb(21 18 16 / .35), 0 10px 24px -8px rgb(21 18 16 / .2);
}
.tarjeta-contacto__brillo{
  position:absolute; inset:-40% -20% auto; height:130%; pointer-events:none; z-index:0;
  background:radial-gradient(65% 60% at 18% 20%, rgb(227 36 2 / .4) 0, rgb(227 36 2 / 0) 70%),
             radial-gradient(50% 50% at 92% 84%, rgb(253 198 86 / .24) 0, rgb(253 198 86 / 0) 72%);
}
.tarjeta-contacto__il{
  position:absolute; z-index:0; width:clamp(48px,6vw,76px); right:6%; top:6%;
  pointer-events:none; opacity:.45;
}
.tarjeta-contacto__il svg{ width:100%; height:auto; display:block; animation:gira 16s ease-in-out infinite; }
.tarjeta-contacto > form, .tarjeta-contacto__raya, .tarjeta-contacto__bodega{ position:relative; z-index:1; }
.tarjeta-contacto .titulo em{ color:var(--amarillo); }

.rotulo-oscuro{
  font-weight:800; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgb(252 244 228 / .5);
}

/* Formulario en filetes, no en cajas: el sitio ya estructura con reglas finas
   (los bloques de misión y visión, la lista de la bodega) y el formulario habla ese idioma.
   La etiqueta va SIEMPRE visible encima; un marcador de posición desaparece al escribir.
   Una sola columna: la tarjeta ya es angosta, dos columnas la apretarían de más. */
.tarjeta-contacto form{ display:grid; gap:clamp(20px,2.4vw,26px); }
.tarjeta-contacto .rotulo-oscuro{ margin-bottom:-8px; }

/* «¿Quién eres?»: dos chips que deciden si el campo de negocio hace falta y qué
   dice el rótulo del comentario. Reutiliza el `.chip` de los filtros del catálogo,
   pero sobre fondo oscuro el filete y el relleno de acierto tienen que invertirse. */
.forma__quien{ display:flex; flex-wrap:wrap; gap:10px; margin:-6px 0 2px; }
.chip--oscuro{ color:var(--crema); box-shadow:inset 0 0 0 1.5px rgb(252 244 228 / .32); }
.chip--oscuro:hover{ box-shadow:inset 0 0 0 1.5px rgb(252 244 228 / .6); }
.chip--oscuro[aria-pressed="true"]{ background:var(--amarillo); color:var(--tinta); box-shadow:none; }

/* El campo de negocio aparece y desaparece con el chip activo; un asomo breve
   avisa de que algo cambió en vez de que el campo salte sin más. */
@keyframes campoAsoma{ from{ opacity:0; translate:0 6px; } to{ opacity:1; translate:0 0; } }
.campo--asoma{ animation:campoAsoma .4s var(--easing); }

.campo{ position:relative; }
.campo label{
  display:block; margin-bottom:9px;
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgb(252 244 228 / .52); transition:color .3s;
}
.campo abbr{ text-decoration:none; color:var(--amarillo); }
.campo input{
  width:100%; padding:0 0 .55em; border-radius:0;
  background:none; color:var(--crema);
  font-family:'Archivo',sans-serif; font-size:clamp(16px,1.15vw,20px);
  /* sólo el filete inferior: el borde de los otros tres lados lo pone el navegador */
  border:0; border-bottom:1.5px solid rgb(252 244 228 / .26);
  transition:border-color .35s;
}
.campo input::placeholder{ color:rgb(252 244 228 / .26); }
.campo input:focus{ outline:none; border-bottom-color:rgb(252 244 228 / .5); }
/* El filete ámbar crece desde la izquierda al enfocar */
.campo::after{
  content:''; position:absolute; inset:auto 0 0; height:2px; background:var(--amarillo);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--easing);
}
.campo:focus-within::after{ transform:scaleX(1); }
.campo:focus-within label{ color:var(--amarillo); }
.campo input[aria-invalid="true"]{ border-bottom-color:#ff9d8f; }
.campo:has(input[aria-invalid="true"]) label{ color:#ff9d8f; }

.forma__pie{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 24px; margin-top:clamp(4px,.8vw,10px);
}
.tarjeta-contacto .btn{ --btn-fondo:var(--amarillo); --btn-tinta:var(--tinta); }
.tarjeta-contacto .btn:hover{ --btn-fondo:#fff; }
.tarjeta-contacto .btn span{ transition:translate .35s var(--easing); }
.tarjeta-contacto .btn:hover span{ translate:4px 0; }
.forma__aviso{ flex:1 1 16ch; font-size:13px; line-height:1.45; color:rgb(252 244 228 / .6); }
/* El aviso cambia de texto al enviar; un asomo breve marca que respondió al clic
   en vez de que el mensaje mude sin aviso. */
@keyframes avisoSalta{ from{ opacity:0; translate:0 4px; } to{ opacity:1; translate:0 0; } }
.forma__aviso--salta{ animation:avisoSalta .4s var(--easing); }

/* La bodega, dentro de la misma tarjeta: una regla fina la separa del formulario,
   como el resto del sitio separa bloques con filetes en vez de con cajas nuevas. */
.tarjeta-contacto__raya{
  display:block; height:1px; margin-block:clamp(26px,3vw,38px);
  background:rgb(252 244 228 / .16);
}
.tarjeta-contacto__bodega > p{ margin-top:14px; font-size:14px; line-height:1.55;
                               color:rgb(252 244 228 / .78); }

/* Estado en vivo: calcula la hora de Guatemala en el navegador (contacto.js) y muestra
   si la bodega está abierta ahora mismo. Dos clases de especificidad para ganarle a la
   regla genérica de arriba, que si no le impondría su tamaño y color de párrafo normal. */
.tarjeta-contacto__bodega .bodega__estado{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:rgb(252 244 228 / .68);
}
.bodega__punto{ width:8px; height:8px; border-radius:50%; background:rgb(252 244 228 / .4); flex:none; }
.bodega__estado--abierto{ color:var(--guanabana); }
.bodega__estado--abierto .bodega__punto{ background:var(--guanabana); animation:latido 2.2s ease-in-out infinite; }
.bodega__estado--cerrado{ color:rgb(252 244 228 / .5); }
.bodega__estado--cerrado .bodega__punto{ background:var(--melocoton); }

.tarjeta-contacto__tel{
  display:flex; flex-wrap:wrap; gap:6px 20px; margin:16px 0 22px;
  font-family:'Archivo Black',sans-serif; font-size:clamp(15px,1.1vw,18px); color:var(--amarillo);
}
.tarjeta-contacto__tel a:hover{ color:#fff; }
.tarjeta-contacto .btn--linea:hover{ --btn-fondo:var(--amarillo); --btn-tinta:var(--tinta); }

/* ---------- 15. Bitácora ---------- */
.notas{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--canal); margin-top:clamp(30px,3.4vw,56px); }
.nota__figura{ border-radius:var(--radio); overflow:hidden; aspect-ratio:16/11;
                background:var(--salvia) center/cover; }
.nota__figura img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--easing); }
.nota:hover .nota__figura img{ transform:scale(1.06); }
.nota h3{ margin-top:16px; font-weight:800; font-size:clamp(17px,1.2vw,21px); line-height:1.14; letter-spacing:-.015em; }
.nota time{ display:block; margin-top:10px; font-size:12px; font-weight:700;
            letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave); }
@media (max-width:1100px){ .notas{ grid-template-columns:repeat(2,1fr); gap:32px var(--canal); } }
@media (max-width:620px){ .notas{ grid-template-columns:1fr; gap:34px; } }

/* ---------- 16. Pie ---------- */
.pie{ background:var(--tinta); color:var(--crema); padding-top:clamp(56px,6vw,110px); overflow:hidden; }
.pie__rejilla{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(28px,3vw,54px); }
.pie h4{ font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
         color:rgb(252 244 228 / .5); margin-bottom:16px; }
.pie li + li{ margin-top:9px; }
.pie li a{ font-size:clamp(14px,.95vw,17px); font-weight:500; opacity:.86; transition:opacity .25s, translate .35s var(--easing); display:inline-block; }
.pie li a:hover{ opacity:1; translate:5px 0; color:var(--amarillo); }
.pie__intro p{ margin-top:16px; max-width:34ch; font-size:clamp(14px,.95vw,17px);
               line-height:1.45; color:rgb(252 244 228 / .68); }
.pie__legal{
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
  margin-top:clamp(30px,3.4vw,52px);
  padding-block:20px; border-top:1px solid rgb(252 244 228 / .16);
  font-size:12.5px; color:rgb(252 244 228 / .55);
}
.pie__legal a:hover{ color:var(--crema); }
.pie__arriba{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:50%; font-size:17px; color:var(--crema);
  box-shadow:inset 0 0 0 1.5px rgb(252 244 228 / .3);
  transition:background-color .3s, color .3s, translate .35s var(--easing);
}
.pie__arriba:hover{ background:var(--amarillo); color:var(--tinta); translate:0 -3px; }
@media (max-width:900px){ .pie__rejilla{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pie__rejilla{ grid-template-columns:1fr; } }

html.qa .difiere{ content-visibility:visible; }

/* ---------- 17. Revelados en scroll ---------- */
html.con-js .revela{ opacity:0; translate:0 30px; transition:opacity .8s var(--easing), translate .9s var(--easing); }
html.con-js .revela.visible{ opacity:1; translate:0 0; }
[data-retraso="1"]{ transition-delay:.08s; }
[data-retraso="2"]{ transition-delay:.16s; }
[data-retraso="3"]{ transition-delay:.24s; }
[data-parallax]{ will-change:transform; }

/* ---------- 18. Preloader ---------- */
/* Sólo se pinta si hay JS: si no, quien lo esconde nunca se ejecutaría */
.telon{ display:none; }
html.con-js .telon{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:var(--rojo); color:#fff;
  transition:clip-path 1s var(--easing), visibility 0s 1s;
  clip-path:inset(0 0 0 0);
}
.telon--fuera{ clip-path:inset(0 0 100% 0); visibility:hidden; }
.telon__marca{ width:min(56vw,340px); height:auto; }
.telon__barra{ width:min(60vw,320px); height:3px; margin-top:22px; background:rgb(255 255 255 / .28); border-radius:3px; overflow:hidden; }
.telon__barra i{ display:block; height:100%; width:0; background:#fff; transition:width .3s linear; }

/* ---------- 19. Ventana de producto ---------- */
/* El color de cada producto entra por --tono, que escribe el JS al abrirla. */
.ficha{ position:fixed; inset:0; z-index:130; --tono:var(--amarillo); }
.ficha[hidden]{ display:none; }
.ficha__velo{
  position:absolute; inset:0; background:rgb(18 12 6 / .58);
  backdrop-filter:blur(9px) saturate(1.2); -webkit-backdrop-filter:blur(9px) saturate(1.2);
  opacity:0; transition:opacity .4s var(--easing);
}
.ficha--abierta .ficha__velo{ opacity:1; }

.ficha__panel{
  position:absolute; inset:auto 0 0; margin-inline:auto;
  width:min(var(--marco),1060px); max-height:min(92svh,860px);
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  background:var(--crema); color:var(--tinta);
  border-radius:var(--radio-l) var(--radio-l) 0 0;
  box-shadow:0 -20px 70px rgb(40 16 0 / .32);
  overflow:hidden;
  translate:0 26px; opacity:0;
  transition:translate .5s var(--easing), opacity .35s var(--easing);
}
@media (min-width:861px){
  .ficha__panel{
    inset:0; align-self:center; height:min(84svh,690px);
    border-radius:var(--radio-l);
    translate:0 34px;
  }
  .ficha{ display:grid; place-items:center; }
}
.ficha--abierta .ficha__panel{ translate:0 0; opacity:1; }

/* La mitad de la imagen: mancha de color que crece al abrir, como los blobs de la portada */
.ficha__figura{
  position:relative; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, var(--tono) 34%, #fff) 0%,
                                     color-mix(in srgb, var(--tono) 62%, #fff) 100%);
}
.ficha__mancha{
  position:absolute; width:118%; aspect-ratio:1; border-radius:50%;
  background:color-mix(in srgb, var(--tono) 78%, #fff);
  scale:.2; opacity:0; transition:scale .8s var(--easing), opacity .5s;
}
.ficha--abierta .ficha__mancha{ scale:1; opacity:.85; }
.ficha__foto{ position:relative; width:82%; max-width:340px; }
.ficha__foto img{
  width:100%; height:auto; display:block;
  -webkit-mask-image:radial-gradient(circle at 50% 48%, #000 54%, transparent 78%);
          mask-image:radial-gradient(circle at 50% 48%, #000 54%, transparent 78%);
  filter:drop-shadow(0 24px 40px rgb(80 40 0 / .3));
  scale:.86; opacity:0;
  transition:scale .7s var(--easing) .1s, opacity .45s .1s;
}
.ficha--abierta .ficha__foto img{ scale:1; opacity:1; }

.ficha__cuerpo{
  display:flex; flex-direction:column; gap:clamp(12px,1.6vh,20px);
  padding:clamp(26px,3.4vw,46px) clamp(24px,3vw,44px) clamp(80px,7vh,96px);
  overflow-y:auto; overscroll-behavior:contain;
}
.ficha__cat{
  align-self:flex-start; padding:.5em 1em; border-radius:999px;
  background:var(--tono); color:var(--tinta);
  font-weight:800; font-size:clamp(10px,.7vw,12px); letter-spacing:.12em; text-transform:uppercase;
  box-shadow:inset 0 0 0 1.5px rgb(21 18 16 / .14);
}
.ficha__nombre{
  font-family:'Archivo Black','Archivo',sans-serif; text-transform:uppercase;
  font-size:clamp(25px,2.15vw,35px); line-height:1; letter-spacing:-.03em;
}
.ficha__lema{ font-size:clamp(15px,1.15vw,20px); font-weight:700; font-style:italic;
              color:var(--rojo); margin-top:-.4em; }
.ficha__lema:empty{ display:none; }
.ficha__datos{ display:flex; flex-wrap:wrap; gap:10px 34px; padding-block:clamp(6px,1vh,12px);
               border-block:1.5px solid rgb(21 18 16 / .14); }
.ficha__datos dt{ font-size:11px; font-weight:700; letter-spacing:.12em;
                  text-transform:uppercase; color:var(--tinta-suave); }
.ficha__datos dd{ font-family:'Archivo Black',sans-serif; font-size:clamp(18px,1.5vw,26px); }
.ficha__ing h3{ font-size:11px; font-weight:700; letter-spacing:.12em;
                text-transform:uppercase; color:var(--tinta-suave); margin-bottom:6px; }
.ficha__ing p{ font-size:clamp(14px,.98vw,17px); line-height:1.55; color:var(--tinta-suave); }
.ficha__acciones{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:8px; }

/* Paso al anterior / siguiente, anclado al pie del panel */
.ficha__pasos{
  position:absolute; inset:auto 0 0 auto; z-index:2;
  display:flex; align-items:center; gap:6px;
  padding:14px clamp(24px,3vw,44px) 18px;
  font-weight:800; font-size:12px; letter-spacing:.1em;
  background:linear-gradient(to top, var(--crema) 62%, rgb(252 244 228 / 0));
}
.ficha__pasos button{
  width:38px; height:38px; border-radius:50%; font-size:15px;
  box-shadow:inset 0 0 0 2px rgb(21 18 16 / .2);
  transition:background-color .25s, color .25s, box-shadow .25s;
}
.ficha__pasos button:hover{ background:var(--tinta); color:var(--crema); box-shadow:none; }
.ficha__pasos span{ min-width:5.5em; text-align:center; font-variant-numeric:tabular-nums; }

.ficha__cerrar{
  position:absolute; top:14px; right:14px; z-index:3;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:rgb(252 244 228 / .9); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 2px rgb(21 18 16 / .16);
  transition:background-color .25s, rotate .4s var(--easing);
}
.ficha__cerrar:hover{ background:var(--rojo); rotate:90deg; }
.ficha__cerrar:hover span{ background:#fff; }
.ficha__cerrar span{
  position:absolute; width:17px; height:2px; border-radius:2px; background:var(--tinta);
  transition:background-color .25s;
}
.ficha__cerrar span:nth-child(1){ rotate:45deg; }
.ficha__cerrar span:nth-child(2){ rotate:-45deg; }

@media (max-width:860px){
  .ficha__panel{ grid-template-columns:1fr; grid-template-rows:minmax(0,34svh) minmax(0,1fr); }
  .ficha__foto{ width:58%; max-width:230px; }
  /* a lo ancho la barra deja de ser un degradado: encima se leía media palabra del botón */
  .ficha__pasos{ inset:auto 0 0; justify-content:space-between;
                 background:var(--crema); box-shadow:0 -1.5px 0 rgb(21 18 16 / .12); }
  .ficha__cuerpo{ padding-bottom:86px; }
}
@media (max-width:520px){
  .ficha__panel{ max-height:94svh; }
}
/* Pantalla baja: la foto cede alto para que se lea la ficha sin desplazar tanto */
@media (max-width:520px) and (max-height:680px){
  .ficha__panel{ grid-template-rows:minmax(0,23svh) minmax(0,1fr); }
  .ficha__foto{ width:44%; }
  .ficha__cuerpo{ gap:10px; padding-top:20px; }
}

/* ---------- 20. Accesibilidad / movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  /* `html.con-js .revela` pisa a `.revela` por especificidad: sin repetirla, el
     contenido se quedaba invisible hasta que el observador lo alcanzase. */
  html.con-js .revela{ opacity:1; translate:none; }
  .palabra > span{ translate:0 0; }
}