/* ===================== DESIGN SYSTEM — DESPENSA VITAL ===================== */
:root{
  --aguamarina:#45C6C1;
  --coral:#F4745F;
  --mostaza:#D8A528;
  --verde-palma:#5E8F62;
  --crema:#F6F0E6;
  --azul:#1F5B63;
  --oro:#A67C52;
  --carbon:#1C1917;
  --piedra:#F2E8D5;
  --tinta:#243033;
  --tinta-suave:#5a6a6d;
  --linea:rgba(31,91,99,.14);
  --blanco:#FFFEFB;
  --sombra:0 18px 50px -22px rgba(31,91,99,.45);
  --sombra-sutil:0 6px 22px -14px rgba(31,91,99,.4);
  --radio:18px;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip en html Y body. En iOS, ponerlo solo en el body no
   siempre impide el deslizamiento lateral; y "clip" (a diferencia de
   "hidden") no rompe el position:sticky del header. La línea "hidden"
   queda de respaldo para navegadores viejos que no entiendan clip. */
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--tinta);background:var(--crema);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:1.04;letter-spacing:.2px}
img{display:block;max-width:100%}
/* SPRINT-14-WEBP · Desde el Sprint 14 cada foto va envuelta en un
   <picture> que ofrece WebP y deja el JPG/PNG como respaldo. El
   display:contents hace que el <picture> desaparezca de la maqueta:
   la <img> queda colgando directamente del contenedor de siempre
   (.card-media, .r-media, .esp-media, .band…), así que TODAS las
   reglas de tamaño y object-fit siguen aplicando sin tocarlas.
   Si algún día esto da guerra, basta con quitar esta línea y las
   fotos vuelven a comportarse como bloques normales. */
picture{display:contents}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:var(--azul);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--oro);display:inline-block}

/* ===================== BOTONES ===================== */
.btn{display:inline-flex;align-items:center;gap:.55em;justify-content:center;font-family:'Manrope';font-weight:700;font-size:.95rem;letter-spacing:.01em;padding:.85em 1.5em;border-radius:100px;border:1.6px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .2s ease}
.btn svg{width:1.05em;height:1.05em}
.btn .ico-wa{width:1.45em;height:1.45em;margin-left:-.15em}
.btn--wa{background:var(--coral);color:#fff;box-shadow:var(--sombra-sutil)}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(244,116,95,.8)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.65);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--sm{font-size:.82rem;padding:.7em 1.15em}

/* ===================== BARRA DE DOMICILIO ===================== */
.topbar{background:var(--azul);color:var(--crema);font-size:.8rem;font-weight:600;letter-spacing:.01em}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:.6em;padding:.62rem clamp(20px,5vw,40px);text-align:center}
.topbar b{color:var(--aguamarina);font-weight:800}
.topbar svg{width:1.15em;height:1.15em;flex:0 0 auto;color:var(--aguamarina)}
@media(max-width:520px){.topbar{font-size:.72rem}}

/* ===================== NOTA DE DOMICILIO EN FICHA ===================== */
.envio{display:flex;align-items:flex-start;gap:.5em;background:rgba(94,143,98,.10);border:1px solid rgba(94,143,98,.28);border-radius:12px;padding:.6em .75em;margin:.1rem 0 .9rem;font-size:.76rem;font-weight:600;color:#3f6b45;line-height:1.4}
.envio svg{width:1.05em;height:1.05em;flex:0 0 auto;margin-top:.1em}
.envio b{color:#2f5a36;font-weight:800}

/* ===================== HEADER ===================== */
header{position:sticky;top:0;z-index:50;background:rgba(246,240,230,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
/* OJO: esta regla va DESPUÉS de .wrap, así que el padding lateral hay que
   repetirlo aquí o el logo y el botón quedan pegados al borde en celular. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:.9rem;padding:.85rem clamp(18px,5vw,40px)}
.brand{display:flex;flex-direction:column;line-height:1;min-width:0;flex:0 1 auto}
.nav-links .btn{flex:0 0 auto;white-space:nowrap}
.brand b{font-family:'Instrument Serif';font-weight:400;font-size:1.5rem;color:var(--azul);letter-spacing:.3px}
.brand span{font-family:'Manrope';font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--oro);font-weight:700;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-menu{display:flex;align-items:center;gap:1.8rem}
.nav-links a{font-size:.86rem;font-weight:600;color:var(--tinta);transition:color .2s}
.nav-links a:hover{color:var(--coral)}

/* ---- Hamburguesa (solo móvil) ----
   Antes de agosto de 2026, por debajo de 860px los 6 enlaces simplemente se
   ocultaban y no había forma de navegar la página en celular. */
.nav-toggle{display:none;background:transparent;border:0;cursor:pointer;width:44px;height:44px;border-radius:12px;place-items:center;align-content:center;gap:5px;flex:0 0 auto;order:-1}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--azul);border-radius:2px;transition:transform .25s ease,opacity .18s ease}
.nav-toggle:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .nav-toggle{display:grid}
  .nav-links{gap:.7rem}
  /* El panel cuelga del header (que es sticky, o sea contenedor de posición) */
  .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--crema);border-bottom:1px solid var(--linea);box-shadow:0 20px 44px -26px rgba(31,91,99,.7);padding:.3rem clamp(18px,5vw,40px) .8rem}
  .nav-menu.open{display:flex}
  .nav-menu a{font-size:1rem;padding:.9rem .2rem;border-bottom:1px solid var(--linea)}
  .nav-menu a:last-child{border-bottom:0}
}

/* ===================== HERO ===================== */
.hero{position:relative;min-height:min(88vh,720px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,91,99,.30) 0%,rgba(31,91,99,.20) 35%,rgba(20,40,44,.86) 100%);z-index:1}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-inner{position:relative;z-index:2;padding-bottom:clamp(40px,7vw,80px);padding-top:60px;max-width:760px}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:var(--mostaza)}
.hero h1{font-size:clamp(3rem,8.5vw,6rem);margin:.28em 0 .12em;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero h1 em{font-style:italic;color:var(--mostaza)}
.hero p{font-size:clamp(1.05rem,2.4vw,1.3rem);max-width:46ch;color:rgba(255,255,255,.92);font-weight:400}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.endoso{display:flex;align-items:center;gap:.7rem;margin-top:2.2rem;font-size:.8rem;letter-spacing:.04em;color:rgba(255,255,255,.85)}
.endoso .seal{font-family:'Cormorant Garamond';font-weight:600;border:1.5px solid rgba(255,255,255,.7);width:42px;height:42px;display:grid;place-items:center;border-radius:6px;font-size:1.05rem;letter-spacing:1px}
.endoso .seal--ne{position:static;border:0;background:transparent;width:54px;height:54px;border-radius:0;padding:0;object-fit:contain;z-index:auto}
/* Hero tipográfico (sin foto) */
.hero--type{align-items:center;min-height:min(92vh,760px);
  background:
    radial-gradient(130% 105% at 88% -12%, rgba(69,198,193,.42), transparent 56%),
    radial-gradient(95% 85% at -8% 112%, rgba(216,165,40,.22), transparent 58%),
    linear-gradient(158deg,#226069 0%,#16464d 55%,#0f2f34 100%);}
.hero--type::after{display:none}
.hero--type .hero-inner{padding-top:clamp(70px,10vw,110px);padding-bottom:clamp(60px,9vw,100px);max-width:820px}
.hero--type h1{font-size:clamp(3.2rem,9.5vw,6.6rem)}
.hero-frame{position:absolute;inset:clamp(14px,2.2vw,26px);border:1px solid rgba(242,232,213,.20);z-index:2;pointer-events:none}
.hero-frame::before,.hero-frame::after{content:"";position:absolute;width:16px;height:16px;border:1.5px solid var(--mostaza)}
.hero-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hero-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hero-deco{position:absolute;z-index:1;top:50%;right:-4%;transform:translateY(-50%);width:min(48vw,540px);opacity:.16;color:#F2E8D5;pointer-events:none}
.hero-deco svg{width:100%;height:auto;display:block}
.hero--type .endoso{margin-top:2.4rem}
@media(max-width:768px){.hero-deco{display:none}.hero--type h1{font-size:clamp(2.8rem,11vw,4.2rem)}.hero--type .hero-inner{padding-top:clamp(86px,16vw,120px)}}

/* ===================== MANIFIESTO ===================== */
.manifest{background:var(--azul);color:var(--crema);text-align:center;padding:clamp(54px,8vw,90px) 0}
.manifest .frase{font-family:'Instrument Serif';font-size:clamp(1.8rem,4.5vw,3rem);line-height:1.12;max-width:18ch;margin:.4em auto 0}
.manifest .frase em{font-style:italic;color:var(--aguamarina)}
.manifest p.sub{max-width:60ch;margin:1.6rem auto 0;color:rgba(246,240,230,.78);font-size:1.02rem}
.pills{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
.pill{font-size:.74rem;font-weight:700;letter-spacing:.04em;border:1px solid rgba(246,240,230,.32);color:var(--crema);padding:.5em 1em;border-radius:100px}
.manifest-foto{position:relative;max-width:820px;margin:clamp(34px,5vw,54px) auto 0;padding:clamp(8px,1.1vw,12px);border:1px solid rgba(216,165,40,.42);border-radius:calc(var(--radio) + 6px)}
.manifest-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio);box-shadow:0 24px 60px -26px rgba(0,0,0,.6)}
.manifest-foto figcaption{margin-top:.95rem;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.05rem;color:rgba(246,240,230,.82)}

/* ===================== SECCIONES ===================== */
.section{padding:clamp(56px,8vw,100px) 0}
.section-head{max-width:640px;margin-bottom:clamp(34px,5vw,52px)}
.section-head h2{font-size:clamp(2.2rem,5.5vw,3.4rem);color:var(--azul);margin:.3em 0 .35em}
.section-head p{color:var(--tinta-suave);font-size:1.05rem}

/* El min() es obligatorio: sin él, minmax(290px,1fr) obliga a la columna
   a medir 290px aunque la pantalla sea más angosta, y las tarjetas se
   salen por el lado derecho en iPhone. Con min(...,100%) la columna
   nunca supera el ancho disponible. Misma regla para las demás grillas. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:clamp(20px,2.4vw,30px)}
.card{background:var(--blanco);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra-sutil);border:1px solid var(--linea);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
/* 4/5 = proporción nativa de las infografías (1441x1800) → se ven completas, sin cortar el logo ni el pie */
.card-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--piedra)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .card-media img{transform:scale(1.05)}
/* Tarjeta de marca premium (mockup de frasco) */
.ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.28),transparent 60%),radial-gradient(80% 60% at 80% 120%,rgba(0,0,0,.18),transparent 60%)}
.ph .jar{position:relative;z-index:1;width:96px;height:120px;margin-bottom:16px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.22))}
.ph .ph-name{position:relative;z-index:1;font-family:'Instrument Serif';font-size:1.85rem;line-height:1.05;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.18)}
.ph .ph-tag{position:relative;z-index:1;font-family:'Manrope';font-weight:700;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.92);margin-bottom:.7em}
.ph .ph-foot{position:relative;z-index:1;margin-top:12px;font-family:'Manrope';font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.45);padding:.35em .8em;border-radius:100px}
.badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--mostaza);color:var(--carbon);font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.45em .85em;border-radius:100px}
.badge--out{background:#71716e;color:#fff}
/* SPRINT-16-SRCSET · Distintivo "Más pedido". Va arriba a la DERECHA para
   no chocar nunca con el badge de temporada o de agotado, que viven a la
   izquierda. Azul profundo con texto blanco: 7,6:1 de contraste (AAA).
   Se probó coral, pero coral con blanco da 2,8:1 y no pasa AA. */
.badge--top{left:auto;right:14px;background:var(--azul);color:#fff;display:inline-flex;align-items:center;gap:.4em}
.badge--top svg{width:12px;height:12px;flex:none}
.card--out .card-media img,.card--out .card-media .ph{filter:grayscale(.65) opacity(.9)}
.card--out .price .amt{color:var(--tinta-suave)}
.card--out .btn--wa{background:var(--tinta-suave)}
.price .amt.amt--tbd{font-size:1.35rem;color:var(--coral)}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-kicker{font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--coral)}
.card h3{font-size:1.75rem;color:var(--azul);margin:.2em 0 .4em}
.card .desc{font-size:.93rem;color:var(--tinta-suave);margin-bottom:1rem}
.card .pres{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--azul);margin-bottom:.9rem;display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.card .pres span{background:var(--piedra);border-radius:100px;padding:.25em .7em;color:var(--tinta)}
.card details{margin-bottom:.6rem;border-top:1px solid var(--linea);padding-top:.7rem}
.card summary{font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--azul);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.card summary::-webkit-details-marker{display:none}
.card summary::after{content:"+";font-size:1.1rem;color:var(--coral)}
.card details[open] summary::after{content:"–"}
.card .ingr{font-size:.82rem;color:var(--tinta-suave);margin-top:.6rem;line-height:1.5}
.card .uso{font-size:.82rem;margin-top:.6rem;color:#46704A;font-weight:600} /* verde oscurecido para cumplir contraste AA */
.card .uso b{color:var(--azul);font-weight:700}
.card .card-foot{margin-top:auto;padding-top:1rem}
.card .btn--wa{width:100%}
/* Precio + selector de presentación */
.price-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.5rem}
.price{display:flex;flex-direction:column;line-height:1.05}
.price .amt{font-family:'Instrument Serif',Georgia,serif;font-size:2rem;color:var(--azul)}
.price .per{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);margin-top:.15em}
.size-toggle{display:inline-flex;background:var(--piedra);border-radius:100px;padding:3px;gap:2px}
.size-btn{font-family:'Manrope';font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--tinta-suave);background:transparent;border:0;cursor:pointer;padding:.42em .85em;border-radius:100px;transition:background .18s ease,color .18s ease}
.size-btn.is-active{background:var(--blanco);color:var(--azul);box-shadow:0 2px 8px -4px rgba(31,91,99,.5)}
.size-btn:hover:not(.is-active){color:var(--azul)}

/* ===================== PÁGINA LEGAL (Sprint 16) =====================
   Solo se usa en legal.html. Es texto largo: la única regla que importa
   es una medida de línea cómoda (66ch) y jerarquía clara entre los tres
   bloques. Nada de cuerpo 12 px ni gris claro: la letra chica ilegible
   es justo lo que esta página NO quiere ser. */
.legal{max-width:66ch;font-size:1rem;color:var(--tinta)}
.legal h3{font-size:clamp(1.6rem,3.4vw,2.1rem);color:var(--azul);margin:2.6rem 0 .2em;padding-top:1.6rem;border-top:1px solid var(--linea)}
.legal h3:first-child{margin-top:.6rem;padding-top:0;border-top:0}
.legal h4{font-family:'Manrope',system-ui,sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin:1.9rem 0 .5em}
.legal p{margin-bottom:.9rem;color:var(--tinta-suave)}
.legal p b{color:var(--tinta)}
.legal ul{margin:0 0 1rem 1.1rem;color:var(--tinta-suave)}
.legal li{margin-bottom:.45rem}
.legal a{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--coral)}
.legal .btn--wa{color:#fff;text-decoration:none}
.legal-cierre{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--linea);font-style:italic;font-size:.9rem}

/* ===================== REGALOS Y CORPORATIVO (Sprint 16) =====================
   Dos tarjetas, sin foto: no había fotos de regalos y montar una imagen
   genérica de banco habría desentonado con el resto del sitio, que es
   todo producto real. El ícono grande hace el trabajo visual.
   El mínimo de la grilla va con min(360px,100%) — nunca un valor pelado,
   o a 320 px de viewport la tarjeta se sale de la pantalla. */
.regalos{background:var(--piedra)}
.regalo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:clamp(20px,2.6vw,30px);margin-top:10px}
.regalo-card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(26px,3vw,34px);display:flex;flex-direction:column;box-shadow:var(--sombra-sutil);transition:transform .25s ease,box-shadow .25s ease}
.regalo-card:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
.regalo-ico{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:var(--crema);color:var(--azul);border:1px solid var(--linea);margin-bottom:16px}
/* Los dos SVG traen además width="28" height="28" escritos en el HTML.
   Es cinturón y tirantes: un SVG con viewBox y SIN medidas se estira al ancho
   disponible si por lo que sea este CSS no llega (caché viejo, red lenta).
   Pasó el 10 de agosto de 2026: el celular de Mema tenía el CSS anterior
   guardado y los íconos salieron del tamaño de la pantalla. */
.regalo-ico svg{width:28px;height:28px}
.regalo-card h3{font-size:1.55rem;color:var(--azul);margin-bottom:.45em}
.regalo-card p{font-size:.94rem;color:var(--tinta-suave);margin-bottom:.9rem}
.regalo-nota{border-left:3px solid var(--aguamarina);padding-left:.9rem;font-size:.88rem!important;color:var(--tinta)!important;margin-bottom:1.4rem!important}
.regalo-card .btn--wa{margin-top:auto;align-self:flex-start}
@media(max-width:420px){.regalo-card .btn--wa{align-self:stretch;justify-content:center}}

/* ===================== CÓMO PEDIR ===================== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:24px;margin-top:10px}
.step{background:var(--blanco);border-radius:var(--radio);padding:30px 26px;border:1px solid var(--linea)}
.step .num{font-family:'Instrument Serif';font-size:2.6rem;color:var(--aguamarina);line-height:1}
.step h3{font-size:1.4rem;color:var(--azul);margin:.35em 0 .3em}
.step p{font-size:.92rem;color:var(--tinta-suave)}

/* ===================== BANDA ===================== */
.band{position:relative;min-height:340px;display:flex;align-items:center;color:#fff;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,40,44,.82),rgba(20,40,44,.2))}
.band .band-in{position:relative;z-index:2;max-width:540px;padding:50px 0}
.band h2{font-size:clamp(1.9rem,4.5vw,2.8rem);margin-bottom:.4em}
.band p{color:rgba(255,255,255,.9)}

/* ===================== LA CHEF ===================== */
.chef{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.chef-photo{position:relative}
.chef-photo img{border-radius:var(--radio);box-shadow:var(--sombra);width:100%;aspect-ratio:4/4.4;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.chef-photo .seal{position:absolute;bottom:-22px;right:-12px;background:var(--crema);border:1.5px solid var(--oro);border-radius:10px;padding:14px 18px;font-family:'Cormorant Garamond';text-align:center;box-shadow:var(--sombra-sutil)}
.chef-photo .seal b{display:block;font-size:1.6rem;letter-spacing:2px;color:var(--carbon)}
.chef-photo .seal span{font-family:'Manrope';font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);font-weight:700}
.chef-text h2{font-size:clamp(2rem,4.5vw,3rem);color:var(--azul);margin:.3em 0 .5em}
.chef-text .firma-frase{font-family:'Cormorant Garamond';font-style:italic;font-size:1.5rem;color:var(--carbon);border-left:3px solid var(--oro);padding-left:1rem;margin:1.4rem 0}
.chef-text p{color:var(--tinta-suave);margin-bottom:1rem}
.chef-text .firma{font-family:'Cormorant Garamond';font-size:1.7rem;color:var(--carbon);margin-top:1rem}
/* Bio de la chef: la historia larga vive plegada para no romper el ritmo de la página */
.bio-detalle{margin:.4rem 0 1.2rem;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.bio-detalle summary{padding:.9rem 0;font-family:'Manrope';font-size:.82rem;font-weight:700;letter-spacing:.05em;color:var(--azul);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.bio-detalle summary::-webkit-details-marker{display:none}
.bio-detalle summary::after{content:"+";font-size:1.25rem;line-height:1;color:var(--coral)}
.bio-detalle[open] summary::after{content:"–"}
.bio-detalle summary:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}
.bio-cuerpo{padding-bottom:.5rem}
.bio-cuerpo p{font-size:.95rem;line-height:1.75}
.bio-cuerpo p:last-child{margin-bottom:.4rem}
/* El propósito: bloque editorial de la marca madre, ancho completo bajo la foto */
.proposito{margin-top:clamp(34px,5vw,58px);background:var(--crema);border:1px solid var(--linea);border-left:3px solid var(--oro);border-radius:var(--radio);padding-block:clamp(26px,3.4vw,38px);padding-inline:clamp(22px,3.4vw,44px)}
.proposito-intro{font-family:'Cormorant Garamond';font-size:clamp(1.15rem,2.1vw,1.45rem);line-height:1.55;color:var(--carbon);margin:.9rem 0 1.6rem;max-width:62ch}
.proposito-lista{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:clamp(18px,2.4vw,30px)}
.proposito-lista li{position:relative;padding-top:1rem;border-top:1px solid var(--oro)}
.proposito-lista b{display:block;font-family:'Cormorant Garamond';font-size:1.3rem;color:var(--azul);margin-bottom:.35rem}
.proposito-lista span{display:block;font-size:.9rem;line-height:1.7;color:var(--tinta-suave)}

/* ===================== FAQ ===================== */
.faq-wrap{max-width:760px;margin:0 auto}
.faq{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;margin-bottom:12px;overflow:hidden}
.faq summary{padding:18px 22px;font-weight:700;color:var(--azul);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--coral);font-size:1.3rem}
.faq[open] summary::after{content:"–"}
.faq .faq-body{padding:0 22px 20px;color:var(--tinta-suave);font-size:.95rem}

/* ===================== CIERRE ===================== */
.closer{background:radial-gradient(120% 140% at 80% 0%,var(--aguamarina) 0%,var(--azul) 55%);color:#fff;text-align:center;border-radius:var(--radio);padding:clamp(46px,7vw,80px) 24px;box-shadow:var(--sombra)}
.closer h2{font-size:clamp(2.2rem,5.5vw,3.6rem);margin-bottom:.3em}
.closer p{max-width:48ch;margin:0 auto 2rem;color:rgba(255,255,255,.92)}

/* ===================== FOOTER ===================== */
footer{background:var(--carbon);color:rgba(246,240,230,.74);padding:56px 0 30px;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;margin-bottom:34px}
footer .brand b{color:var(--crema)}
footer h4{font-family:'Manrope';font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mostaza);margin-bottom:1rem;font-weight:800}
footer a{display:block;margin-bottom:.5rem;transition:color .2s}
footer a:hover{color:var(--aguamarina)}
.foot-bottom{border-top:1px solid rgba(246,240,230,.14);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;font-size:.78rem;color:rgba(246,240,230,.5)}
/* El dato de contacto debajo del nombre del canal (número, arroba) */
.foot-dato{display:block;font-size:.8rem;color:rgba(246,240,230,.6);letter-spacing:.01em}
footer a:hover .foot-dato{color:var(--aguamarina)}
/* ============================================================
   CRÉDITO DE NAVA LAT — visible, con su propia caja y llamado.
   ============================================================ */
.credito-nava{display:inline-flex;align-items:center;gap:14px;margin:0;padding:.75em 1.15em;border:1px solid rgba(216,165,40,.55);border-radius:14px;background:var(--crema);box-shadow:0 10px 26px -18px rgba(0,0,0,.8);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.credito-nava:hover{border-color:var(--mostaza);transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(0,0,0,.9)}
.nava-logo{height:50px;width:auto;display:block;flex:0 0 auto}
.nava-txt{display:flex;flex-direction:column;line-height:1.3}
.nava-eyebrow{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);font-weight:800}
.nava-cta{font-size:.82rem;font-weight:800;color:var(--azul)}
.nava-dom{font-size:.72rem;font-weight:700;color:var(--oro)}
.credito-nava:hover .nava-dom{color:#8a6440}
@media(max-width:620px){
  .foot-bottom{justify-content:flex-start}
  .credito-nava{width:100%}
}

/* ===================== WA FLOTANTE ===================== */
.wa-float{position:fixed;bottom:22px;right:22px;z-index:60;background:transparent;color:#fff;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.65);transition:transform .25s ease,opacity .25s ease}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:60px;height:60px}

@media(max-width:760px){
  .chef{grid-template-columns:1fr}
  .chef-photo{max-width:420px;margin:0 auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr}
  .hero-cta .btn{flex:1}
}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* Respeta a quien pide menos movimiento en su sistema (accesibilidad) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .card:hover,.recipe:hover,.esp:hover,.btn:hover,.wa-float:hover{transform:none}
  .card:hover .card-media img,.recipe:hover .r-media img,.esp:hover .esp-media img{transform:none}
}

/* ===================== LOGOS DE MARCA ===================== */
.brand-logo{height:80px;width:auto;max-width:100%;display:block}
@media(max-width:860px){.brand-logo{height:60px}}
@media(max-width:560px){
  .brand-logo{height:46px}
  .nav{gap:.55rem;padding:.7rem 16px}
  .nav-links .btn--sm{font-size:.78rem;padding:.62em .95em}
  .nav-links .btn .ico-wa{width:1.3em;height:1.3em}
}
@media(max-width:400px){
  .brand-logo{height:40px}
  .nav-links .btn--sm{font-size:.72rem;padding:.58em .8em}
}
.foot-logo{height:54px;width:auto;display:block;margin-bottom:16px}
.chef-photo .seal--img{padding:0;border:0;background:transparent;box-shadow:var(--sombra-sutil);width:96px;height:96px;border-radius:12px}
.ref-note{margin:clamp(22px,3.4vw,34px) auto 0;max-width:62ch;text-align:center;font-size:.82rem;font-style:italic;color:var(--tinta-suave);opacity:.9}

/* ===================== IDEA DE USO EN TARJETA ===================== */
.card .receta{font-size:.82rem;margin-top:.45rem;color:var(--tinta-suave);line-height:1.5}
.card .receta b{color:var(--coral);font-weight:700}

/* ===================== BOTÓN PAGAR EN LÍNEA ===================== */
.btn--pay{background:transparent;color:var(--azul);border:1.6px solid var(--azul);width:100%;margin-top:.55rem}
.btn--pay:hover{background:var(--azul);color:#fff;transform:translateY(-2px)}
.pay-note{font-size:.7rem;color:var(--tinta-suave);text-align:center;margin-top:.5rem;letter-spacing:.02em}

/* ===================== GALERÍA / ZOOM EN TARJETA ===================== */
.card-media.has-gallery{cursor:zoom-in}
.media-zoom{position:absolute;bottom:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:.4em;background:rgba(28,25,23,.62);color:#fff;font-family:'Manrope';font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:.4em .7em;border-radius:100px;backdrop-filter:blur(4px);transition:background .2s,transform .2s;pointer-events:none}
.card-media.has-gallery:hover .media-zoom{background:var(--coral);transform:translateY(-2px)}
.media-zoom svg{width:1em;height:1em}

/* ===================== LIGHTBOX ===================== */
.lbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(15,30,33,.92);backdrop-filter:blur(6px);padding:clamp(10px,3.5vw,48px)}
.lbox.open{display:flex}
.lbox-inner{position:relative;width:min(920px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
/* El escenario se adapta a la forma de la imagen: las infografías son
   verticales y antes quedaban encajadas en un cuadrado, o sea MÁS
   PEQUEÑAS que la tarjeta. Ahora crecen hasta 82vh de alto. */
.lbox-stage{position:relative;display:grid;place-items:center;background:#0d2226;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);max-width:100%}
.lbox-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:82vh;object-fit:contain}
@media(max-width:560px){.lbox-stage img{max-height:76vh}}
.lbox-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;background:linear-gradient(transparent,rgba(13,34,38,.85));color:#fff}
.lbox-cat{font-family:'Manrope';font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mostaza)}
.lbox-cap p{font-family:'Instrument Serif';font-size:1.35rem;line-height:1.1;margin-top:.15em}
.lbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lbox-nav:hover{background:var(--coral)}
.lbox-prev{left:14px}.lbox-next{right:14px}
.lbox-close{position:absolute;top:-6px;right:0;transform:translateY(-100%);background:transparent;border:0;color:#fff;font-size:1.9rem;cursor:pointer;line-height:1;padding:6px}
.lbox-thumbs{display:flex;gap:10px;overflow-x:auto;padding:2px}
.lbox-thumbs img{width:66px;height:66px;object-fit:cover;border-radius:10px;cursor:pointer;opacity:.5;border:2px solid transparent;transition:opacity .2s,border-color .2s;flex:0 0 auto}
.lbox-thumbs img.is-active{opacity:1;border-color:var(--mostaza)}
.lbox-head{color:#fff;font-family:'Instrument Serif';font-size:1.5rem}
.lbox-single .lbox-nav,.lbox-single .lbox-thumbs{display:none}
/* Con una sola imagen (la infografía) el título ya dice el producto y la
   pieza trae su propio texto: el pie encima solo tapaba la ficha. */
.lbox-single .lbox-cap{display:none}

/* ===================== RECETAS ===================== */
.recipes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:clamp(20px,2.4vw,28px)}
.recipe{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:28px 26px 26px;display:flex;flex-direction:column;box-shadow:var(--sombra-sutil);transition:transform .25s ease,box-shadow .25s ease}
.recipe:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
.recipe .r-kicker{font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--coral)}
.recipe h3{font-size:1.55rem;color:var(--azul);margin:.25em 0 .5em}
.recipe .r-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.recipe .r-meta span{font-size:.68rem;font-weight:700;letter-spacing:.03em;color:var(--tinta);background:var(--piedra);border-radius:100px;padding:.35em .8em}
.recipe ol{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.2rem}
.recipe ol li{counter-increment:step;position:relative;padding-left:2rem;font-size:.9rem;color:var(--tinta-suave);line-height:1.5}
.recipe ol li::before{content:counter(step);position:absolute;left:0;top:-1px;width:1.4rem;height:1.4rem;background:var(--aguamarina);color:#fff;font-family:'Manrope';font-size:.72rem;font-weight:800;border-radius:50%;display:grid;place-items:center}
.recipe .r-foot{margin-top:auto}
.recipe .btn--wa{width:100%}
.recipes-note{margin:clamp(22px,3.4vw,34px) auto 0;max-width:64ch;text-align:center;font-size:.82rem;font-style:italic;color:var(--tinta-suave);opacity:.9}
.recipe .r-media{margin:-28px -26px 18px;aspect-ratio:16/10;overflow:hidden;background:var(--piedra);border-radius:calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0}
.recipe .r-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.recipe:hover .r-media img{transform:scale(1.04)}

/* ===================== ESPECIALES DE TEMPORADA ===================== */
.especiales{background:var(--piedra)}
.esp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(20px,2.6vw,30px)}
.esp{position:relative;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra-sutil);transition:transform .25s ease,box-shadow .25s ease}
.esp:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.esp-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--piedra)}
.esp-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.esp:hover .esp-media img{transform:scale(1.04)}
.esp-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.esp-kicker{font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--coral)}
.esp h3{font-size:clamp(1.7rem,3vw,2.1rem);color:var(--azul);margin:.2em 0 .4em}
.esp .esp-desc{font-size:.95rem;color:var(--tinta-suave);margin-bottom:1rem}
.esp-price{display:flex;flex-direction:column;line-height:1.05;margin-bottom:.8rem}
.esp-price .amt{font-family:'Instrument Serif',Georgia,serif;font-size:2.1rem;color:var(--azul)}
.esp-price .per{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);margin-top:.2em}
.esp-opts{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.esp-opt{font-family:'Manrope';font-size:.8rem;font-weight:700;letter-spacing:.02em;border:1.6px solid var(--linea);background:var(--blanco);color:var(--tinta-suave);border-radius:100px;padding:.5em 1.05em;cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}
.esp-opt.is-active{border-color:var(--azul);color:var(--azul);background:var(--piedra)}
.esp-opt:hover:not(.is-active){border-color:var(--aguamarina);color:var(--azul)}
.esp-note{font-size:.78rem;font-style:italic;color:var(--tinta-suave);margin:.2rem 0 .9rem}
.esp-foot{margin-top:auto}
.esp-foot .btn--wa{width:100%}
.esp-sub{margin-top:1rem;border-top:1px dashed var(--linea);padding-top:1rem}
.esp-sub h4{font-family:'Manrope';font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde-palma);font-weight:800;margin-bottom:.4rem}
.esp-sub p{font-size:.86rem;color:var(--tinta-suave);margin-bottom:.8rem}
.btn--sub{background:transparent;color:var(--verde-palma);border:1.6px solid var(--verde-palma);width:100%}
.btn--sub:hover{background:var(--verde-palma);color:#fff;transform:translateY(-2px)}

/* ===================== ARMA TU PEDIDO =====================
   Permite juntar varios productos y enviarlos en UN solo mensaje de
   WhatsApp. Todo vive en memoria: no hay backend ni base de datos. */
.btn--add{background:transparent;color:var(--azul);border:1.6px dashed rgba(31,91,99,.45);width:100%;margin-top:.55rem;font-size:.88rem}
.btn--add:hover{background:var(--piedra);border-style:solid;border-color:var(--azul);transform:translateY(-2px)}
.btn--add.is-ok{background:var(--verde-palma);border-color:var(--verde-palma);border-style:solid;color:#fff}
.btn--add svg{width:1.05em;height:1.05em}

.pedido-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--azul);color:var(--crema);box-shadow:0 -14px 40px -20px rgba(15,30,33,.75);transform:translateY(110%);visibility:hidden;transition:transform .32s cubic-bezier(.22,.75,.3,1),visibility 0s linear .32s}
/* visibility evita que los botones de la barra vacía sean enfocables con Tab */
.pedido-bar.open{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.22,.75,.3,1)}
.pedido-bar .wrap{display:flex;align-items:center;gap:clamp(10px,2vw,20px);padding:.85rem clamp(18px,5vw,40px)}
.pedido-resumen{background:transparent;border:0;color:inherit;font-family:'Manrope';cursor:pointer;text-align:left;display:flex;flex-direction:column;line-height:1.15;flex:1 1 auto;min-width:0;padding:.2rem 0}
.pedido-resumen:focus-visible{outline:2px solid var(--mostaza);outline-offset:3px}
.pedido-count{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--aguamarina);display:flex;align-items:center;gap:.45em}
.pedido-count::after{content:"▾";font-size:.9rem;letter-spacing:0;transition:transform .25s ease}
.pedido-bar.expandido .pedido-count::after{transform:rotate(180deg)}
.pedido-total{font-family:'Instrument Serif',Georgia,serif;font-size:1.7rem;color:#fff}
.pedido-bar .btn--wa{flex:0 0 auto;white-space:nowrap}
.pedido-panel{display:none;border-top:1px solid rgba(246,240,230,.18);max-height:min(46vh,380px);overflow-y:auto}
.pedido-bar.expandido .pedido-panel{display:block}
.pedido-panel .wrap{display:block;padding-top:.7rem;padding-bottom:.9rem}
.pedido-item{display:flex;align-items:center;gap:.8rem;padding:.6rem 0;border-bottom:1px solid rgba(246,240,230,.12)}
.pedido-item:last-child{border-bottom:0}
.pedido-item-txt{flex:1 1 auto;min-width:0}
.pedido-item-nom{font-size:.86rem;font-weight:700;color:#fff;line-height:1.25}
.pedido-item-det{font-size:.72rem;color:rgba(246,240,230,.68);margin-top:.1em}
.pedido-qty{display:inline-flex;align-items:center;background:rgba(246,240,230,.12);border-radius:100px;flex:0 0 auto}
.pedido-qty button{width:30px;height:30px;border:0;background:transparent;color:var(--crema);font-family:'Manrope';font-size:1rem;font-weight:800;cursor:pointer;border-radius:50%;line-height:1}
.pedido-qty button:hover{background:rgba(246,240,230,.2)}
.pedido-qty span{min-width:1.6em;text-align:center;font-size:.86rem;font-weight:800}
.pedido-item-sub{font-size:.86rem;font-weight:700;color:var(--aguamarina);min-width:5.4em;text-align:right;flex:0 0 auto}
.pedido-quitar{background:transparent;border:0;color:rgba(246,240,230,.55);font-size:1.15rem;cursor:pointer;line-height:1;padding:.2em .3em;flex:0 0 auto}
.pedido-quitar:hover{color:var(--coral)}
.pedido-nota{font-size:.74rem;color:rgba(246,240,230,.66);margin-top:.7rem;line-height:1.45}
.pedido-vaciar{background:transparent;border:0;color:rgba(246,240,230,.6);font-family:'Manrope';font-size:.74rem;font-weight:700;text-decoration:underline;cursor:pointer;margin-top:.5rem;padding:0}
.pedido-vaciar:hover{color:var(--coral)}
/* Con la barra de pedido abajo, el botón flotante de WhatsApp estorba:
   la barra ya trae su propio CTA verde. */
body.con-pedido .wa-float{opacity:0;pointer-events:none;transform:translateY(20px)}
/* Espacio para que la barra no tape el final del footer */
body.con-pedido{padding-bottom:78px}
@media(max-width:620px){body.con-pedido{padding-bottom:70px}}
@media(max-width:620px){
  .pedido-bar .wrap{gap:.7rem;padding:.7rem 16px}
  .pedido-total{font-size:1.4rem}
  .pedido-bar .btn--wa{font-size:.82rem;padding:.75em 1.05em}
  .pedido-bar .btn--wa .rotulo-largo{display:none}
  .pedido-item-sub{min-width:4.6em;font-size:.8rem}
}

/* ============================================================
   ACCESIBILIDAD — saltar al contenido y avisos invisibles
   ============================================================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--azul);color:var(--crema);padding:.8em 1.2em;border-radius:0 0 12px 0;font-weight:700;font-size:.9rem}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   FILTROS DEL CATÁLOGO
   ============================================================ */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(24px,3vw,34px)}
.filtro{display:inline-flex;align-items:center;gap:.55em;background:var(--blanco);border:1px solid var(--linea);color:var(--azul);font-family:inherit;font-size:.86rem;font-weight:700;letter-spacing:.01em;padding:.62em 1.1em;border-radius:100px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.filtro:hover{transform:translateY(-2px);border-color:var(--aguamarina)}
.filtro:focus-visible{outline:2px solid var(--aguamarina);outline-offset:3px}
.filtro-n{font-size:.7rem;font-weight:800;background:var(--piedra);color:var(--tinta-suave);border-radius:100px;padding:.15em .6em;transition:background .2s ease,color .2s ease}
.filtro.is-active{background:var(--azul);border-color:var(--azul);color:var(--crema)}
.filtro.is-active .filtro-n{background:rgba(246,240,230,.22);color:var(--crema)}
.card[hidden]{display:none}
.filtro-vacio{margin-top:26px;text-align:center;color:var(--tinta-suave);font-size:.95rem}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--azul);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:520px){
  .filtros{gap:8px}
  .filtro{font-size:.79rem;padding:.55em .9em}
}

/* ============================================================
   TESTIMONIOS — solo aparece si hay testimonios reales en datos.js
   ============================================================ */
.testimonios{background:var(--crema)}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(20px,2.4vw,30px)}
.testi{margin:0;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-sutil);padding:clamp(24px,3vw,32px);position:relative}
.testi::before{content:"“";position:absolute;top:6px;left:20px;font-family:'Instrument Serif',Georgia,serif;font-size:4.4rem;line-height:1;color:var(--oro);opacity:.5}
.testi blockquote{margin:14px 0 18px;font-size:1.02rem;line-height:1.65;color:var(--tinta);font-style:italic}
.testi figcaption{display:flex;flex-direction:column;gap:.2em;border-top:1px solid var(--linea);padding-top:.9rem}
.testi-nom{font-weight:800;color:var(--azul)}
.testi-det{font-size:.82rem;color:var(--tinta-suave)}
.testi-prod{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-top:.3em}

/* ============================================================
   ALÉRGENOS Y CUIDADO DEL PRODUCTO
   El aviso de alérgenos va VISIBLE (no plegado): quien es alérgico
   no debería tener que abrir nada para enterarse.
   ============================================================ */
.alerg{display:flex;align-items:flex-start;gap:.5em;font-size:.78rem;line-height:1.45;color:#8a4b1f;background:rgba(216,165,40,.12);border:1px solid rgba(216,165,40,.4);border-radius:12px;padding:.6em .75em;margin:0 0 .6rem}
.alerg svg{width:15px;height:15px;flex:0 0 15px;margin-top:.12em}
.alerg b{color:#7a3f18}
.det-cuidado summary{color:var(--tinta-suave)}
.det-cuidado[open] summary{color:var(--azul)}

/* ============================================================
   MÓVIL — el sello de la chef sobresale 12px a la derecha de la
   foto. En escritorio cae sobre la columna vecina y se ve lindo;
   en celular la foto ocupa todo el ancho y ese sobresalto empuja
   la página hacia los lados. Lo metemos adentro.
   ============================================================ */
@media(max-width:860px){
  .chef-photo .seal{right:0;bottom:-14px}
}