/* =========================================================
   LA VIRAL — sitio v2 (hub multipágina) · 2026-10-05
   Tipografías oficiales: Fraunces (titulares) + Eina 03 (texto)
   Concepto: la etiqueta como sistema — campos de color por
   sabor, letra crema gruesa, cintilla naranja.
   ========================================================= */

/* Eina 03: copiar los .ttf/.woff2 de 03. Tipografias/Eina a /assets/fonts */
@font-face{font-family:"Eina 03";src:url("../fonts/Eina03-Light.woff2") format("woff2"),url("../fonts/Eina03-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Eina 03";src:url("../fonts/Eina03-Regular.woff2") format("woff2"),url("../fonts/Eina03-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Eina 03";src:url("../fonts/Eina03-SemiBold.woff2") format("woff2"),url("../fonts/Eina03-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}

:root{
  --chile:#B02A44;        /* carmesí de la etiqueta Serrano (provisional: oficial #BC0A3F) */
  --chile-hondo:#7E1A30;
  --limon:#2C7A55;        /* verde Limonosa (provisional: oficial #00AF7A) */
  --limon-hondo:#1B5239;
  --crema:#FFE6B5;
  --papel:#FFF4DE;
  --cintilla:#E6612B;
  --molcajete:#2A1A16;
  --blanco:#FFFFFF;
  --display:"Fraunces", Georgia, serif;
  --texto:"Eina 03", "Helvetica Neue", Arial, system-ui, sans-serif;
  --r-sm:10px; --r-lg:28px;
  --max:1180px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--texto);font-size:17px;line-height:1.55;color:var(--molcajete);background:var(--papel);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{text-wrap:balance}
:focus-visible{outline:3px solid var(--cintilla);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--max),100% - 32px);margin-inline:auto}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--texto);font-weight:600;font-size:1rem;line-height:1;text-decoration:none;padding:1em 1.5em;border-radius:999px;border:0;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-crema{background:var(--crema);color:var(--chile-hondo);box-shadow:0 4px 0 var(--chile-hondo)}
.btn-cintilla{background:var(--cintilla);color:#fff;box-shadow:0 4px 0 #9C3A12}
.btn-borde{background:transparent;color:var(--crema);box-shadow:inset 0 0 0 2px var(--crema)}
.btn-oscuro{background:var(--molcajete);color:var(--crema);box-shadow:0 4px 0 #000}
/* Botón de tienda con logo real */
.btn-tienda{background:var(--blanco);color:var(--molcajete);padding:.7em 1.1em;box-shadow:0 4px 0 #00000040;gap:.6em}
.btn-tienda{min-width:118px;height:46px}
.btn-tienda img{flex:none;height:22px;width:86px;object-fit:contain}
.btn-tienda.rappi img{height:22px;width:64px}

/* ---------- Franja superior ---------- */
.franja{background:var(--chile-hondo);color:var(--crema);text-align:center;font-size:.85rem;padding:.55em 16px}

/* ---------- Navegación ---------- */
.nav .tiene-sub{position:relative}
.nav .tiene-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.nav .tiene-sub > button{font-family:inherit;font-weight:600;color:inherit;background:none;border:0;cursor:pointer;opacity:.88;gap:7px;border-bottom:2px solid transparent}
.nav .tiene-sub > button[aria-current="page"]{opacity:1;border-bottom-color:var(--cintilla)}
.nav .tiene-sub > button::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.nav .submenu{position:absolute;top:calc(100% + 14px);left:-18px;min-width:280px;background:var(--papel);color:var(--molcajete);border-radius:18px;padding:10px;box-shadow:0 18px 40px -12px #00000066;display:none;list-style:none}
.nav .tiene-sub.abierto .submenu,.nav .tiene-sub:hover .submenu,.nav .tiene-sub:focus-within .submenu{display:grid;gap:4px}
.nav .submenu a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;text-decoration:none;opacity:1;border:0}
.nav .submenu a:hover{background:var(--crema)}
.submenu img{width:40px;height:50px;object-fit:cover;border-radius:8px;background:#000}
.submenu b{display:block;font-family:var(--display);font-size:1.1rem}
.submenu small{display:block;font-size:.8rem;opacity:.7;font-weight:400}
.nav .submenu .todas{justify-content:center;font-size:.9rem;border-top:1px solid #2A1A161f;border-radius:0 0 10px 10px;margin-top:4px}

.nav{background:var(--chile);color:var(--crema);position:sticky;top:env(safe-area-inset-top,0px);z-index:40}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.nav .marca{display:block;padding:6px 0;flex-shrink:0}
.nav .marca img{height:52px;width:auto}
.nav ul{display:flex;align-items:center;gap:28px;list-style:none;font-weight:600;font-size:1rem}
.nav #menu > li{display:flex;align-items:center}
.nav ul a{text-decoration:none;opacity:.88;padding:6px 0;border-bottom:2px solid transparent;line-height:1.2}
.nav #menu > li > a,.nav .tiene-sub > button{display:inline-flex;align-items:center;height:36px;padding:0;line-height:1.2;font-size:1rem;border-bottom:2px solid transparent}
.nav ul a:hover{opacity:1}
.nav ul a[aria-current="page"]{opacity:1;border-bottom-color:var(--cintilla)}
.nav .acciones-nav{display:flex;align-items:center;gap:10px}
.nav .btn{padding:.75em 1.2em;font-size:.95rem}
.menu-btn{display:none;background:transparent;border:2px solid var(--crema);color:var(--crema);border-radius:999px;font:inherit;font-weight:600;font-size:.9rem;padding:.55em 1em;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--chile-hondo);padding:8px 16px 16px}
  .nav ul a{display:block;padding:14px 4px;border-bottom:1px solid #FFE6B522;font-size:1.1rem}
  .nav.abierta ul{display:flex}
  .nav .acciones-nav .btn-crema{display:none}
  .nav .tiene-sub > button{display:none}
  .nav .submenu{display:grid!important;position:static;box-shadow:none;background:transparent;color:var(--crema);padding:0 0 8px;min-width:0}
  .nav .submenu a{padding:10px 4px;border-bottom:1px solid #FFE6B522;border-radius:0}
  .nav .submenu a:hover{background:transparent}
  .nav .submenu .todas{justify-content:flex-start;margin-top:0;font-size:1.1rem}
}

/* ---------- HERO ---------- */
.hero{background:var(--chile);color:var(--crema);overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:56px 0 88px}
.hero h1{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(3rem,7.4vw,6.6rem);line-height:.95;letter-spacing:-.025em}
.hero h1 span{display:block}
.hero h1 .l3{color:var(--cintilla);text-shadow:0 4px 0 var(--chile-hondo)}
.hero .firma{font-size:1.15rem;margin:28px 0 8px;max-width:34ch}
.hero .firma a{font-weight:600;text-decoration:none;border-bottom:2px solid var(--cintilla)}
/* Contador: número arriba y texto SIEMPRE debajo; ancho reservado para que nada se mueva */
.contador{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:28px 0 32px}
.contador b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums lining-nums;min-width:8.6ch;white-space:nowrap}
.contador span{font-size:1.05rem;line-height:1.3}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}

.reel{position:relative;justify-self:center;width:min(340px,100%);max-width:100%;aspect-ratio:9/18.5;border-radius:44px;background:#000;padding:12px;box-shadow:0 0 0 2px #00000033, 0 30px 60px -20px #000000aa;rotate:3deg}
.reel-pantalla{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#1a1a1a}
.reel video,.reel .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-ui{position:absolute;inset:auto 0 0 0;padding:18px 16px 20px;color:#fff;background:linear-gradient(transparent,#000000cc);font-family:system-ui,sans-serif;font-size:.85rem;line-height:1.35}
.reel-ui strong{display:block;font-size:.95rem;margin-bottom:4px}
.reel-lado{position:absolute;right:12px;bottom:110px;display:flex;flex-direction:column;gap:16px;align-items:center;color:#fff;font-family:system-ui,sans-serif;font-size:.75rem;font-weight:600;text-shadow:0 1px 3px #000}
.reel-lado svg{width:28px;height:28px;fill:#fff}
.reel-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:#ffffffe6;border:0;cursor:pointer;display:grid;place-items:center}
.reel-play svg{width:28px;height:28px;fill:var(--chile);margin-left:4px}
.reel.reproduciendo .reel-play{display:none}
.icono-flotante{position:absolute;width:120px;right:-40px;top:-58px;pointer-events:none}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding:36px 0 64px;gap:48px}
  .reel{width:min(300px,82%);rotate:0deg}
  .icono-flotante{width:84px;right:-18px;top:-44px}
}

/* ---------- Encabezado de páginas internas ---------- */
.cabecera{background:var(--chile);color:var(--crema);padding-block:64px 72px;position:relative;overflow:hidden}
.cabecera.verde{background:var(--limon)}
.cabecera.oscura{background:var(--molcajete)}
.cabecera .migas{font-size:.9rem;opacity:.8;margin-bottom:18px}
.cabecera .migas a{text-decoration:none}
.cabecera .migas a:hover{text-decoration:underline}
.cabecera h1{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(2.6rem,6vw,5rem);line-height:.98;letter-spacing:-.025em;max-width:16ch}
.cabecera p{font-size:1.15rem;max-width:52ch;margin-top:18px}
.cabecera .icono-fondo{position:absolute;right:-30px;bottom:-40px;width:min(280px,40vw);opacity:.9;pointer-events:none}

/* ---------- Dónde comprar (franja) ---------- */
.comprar{background:var(--molcajete);color:var(--crema)}
.comprar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:32px;flex-wrap:wrap}
.comprar p{font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1.1;letter-spacing:-.015em}

/* Tiles de marketplace con logos reales */
.tiendas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;flex:1 1 560px;max-width:720px}
.tienda{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:18px 16px;border-radius:16px;text-decoration:none;background:var(--blanco);color:var(--molcajete);box-shadow:0 6px 0 #00000055;transition:transform .15s ease, box-shadow .15s ease;text-align:center}
.tienda:hover{transform:translateY(-3px);box-shadow:0 9px 0 #00000055}
.tienda img{height:40px;width:auto;max-width:100%}
.tienda.amazon img{height:38px;margin-top:6px}
.tienda.mercado-libre{background:#FFE600}
.tienda.mercado-libre img{height:44px}
.tienda.rappi img{height:40px}
.tienda small{font-size:.82rem;line-height:1.25;opacity:.75}
@media (max-width:620px){.tiendas{grid-template-columns:1fr}.tienda{flex-direction:row;justify-content:space-between;min-height:76px;text-align:right}.tienda img{height:30px}.tienda.mercado-libre img{height:34px}}

/* ---------- Secciones ---------- */
.seccion{padding-block:104px}
.titulo{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(2.3rem,5vw,4rem);line-height:1;letter-spacing:-.02em;max-width:16ch}
.entrada{font-size:1.15rem;max-width:56ch;margin-top:18px}
.cabeza{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.ver-mas{font-weight:600;text-decoration:none;border-bottom:2px solid var(--cintilla);padding-bottom:2px;white-space:nowrap}
@media (max-width:860px){.seccion{padding-block:72px}}

/* ---------- Productos ---------- */
.duo-salsas{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.salsa{border-radius:var(--r-lg);color:var(--crema);padding:28px;display:grid;grid-template-rows:auto 1fr;gap:24px;overflow:hidden;min-width:0}
.salsa.serrano{background:var(--chile)}
.salsa.limonosa{background:var(--limon)}
.salsa figure{background:#000;border-radius:18px;overflow:hidden;aspect-ratio:4/5;max-width:100%}
.salsa figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.salsa:hover figure img{transform:scale(1.04)}
.salsa h3{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;letter-spacing:-.02em}
.salsa .alias{font-family:var(--display);font-weight:600;opacity:.9}
.salsa p{margin:10px 0 18px;max-width:38ch}
/* Picor con el chile oficial (como en la etiqueta) */
.picor{display:inline-flex;align-items:center;gap:12px;font-size:.9rem;font-weight:600;margin-bottom:22px;background:var(--crema);color:var(--molcajete);border-radius:999px;padding:6px 14px 6px 16px}
.picor .chiles{display:flex;gap:2px}
.picor i{display:block;width:21px;height:17px;background:url("../img/chilito.svg") center/contain no-repeat}
.picor i:not(.on){opacity:.22;filter:grayscale(1)}
.acciones{display:flex;flex-wrap:wrap;gap:10px}
.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 22px;font-size:.95rem}
.ficha dt{opacity:.75}
.ficha dd{font-weight:600}

.paquete{margin-top:20px;display:grid;grid-template-columns:.9fr 1.1fr;border-radius:var(--r-lg);overflow:hidden;background:var(--molcajete);color:var(--crema)}
.paquete img{width:100%;height:100%;object-fit:cover;min-height:320px}
.paquete div{padding:44px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.paquete h3{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;letter-spacing:-.02em}

.pronto{margin-top:20px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pronto article{border-radius:var(--r-lg);padding:28px;border:2.5px dashed #2A1A1640;display:flex;flex-direction:column;gap:6px}
.pronto h4{font-family:var(--display);font-weight:800;font-size:1.8rem;line-height:1.05;letter-spacing:-.015em}
.pronto .jalapeno h4{color:var(--limon)}
.pronto .habanero h4{color:var(--cintilla)}
.pronto p{max-width:40ch}
.pronto button{margin-top:12px;align-self:flex-start}
@media (max-width:860px){
  .duo-salsas,.pronto,.paquete{grid-template-columns:1fr}
  .paquete div{padding:28px}
}

/* ---------- Mercedes ---------- */
.mercedes{background:var(--crema)}
.mercedes .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.foto-mercedes{aspect-ratio:4/5;max-width:100%;border-radius:var(--r-lg);background:repeating-linear-gradient(-45deg,#B02A4418 0 14px,transparent 14px 28px),var(--papel);border:2.5px dashed var(--chile);display:grid;place-items:center;text-align:center;padding:24px;color:var(--chile);font-weight:600;rotate:-2deg}
.mercedes blockquote{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.12;letter-spacing:-.01em;color:var(--chile);margin:26px 0}
.historia{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px;counter-reset:paso}
.historia li{counter-increment:paso;font-size:.95rem;line-height:1.4;padding-top:44px;position:relative}
.historia li::before{content:counter(paso);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;background:var(--chile);color:var(--crema);font-family:var(--display);font-weight:700;display:grid;place-items:center;font-size:1rem}
.historia b{display:block;font-size:1.05rem}
.credenciales{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.credenciales span{background:var(--papel);border-radius:999px;padding:.45em 1em;font-size:.9rem;font-weight:600}
@media (max-width:860px){
  .mercedes .wrap{grid-template-columns:1fr;gap:40px}
  .foto-mercedes{max-width:360px;rotate:0deg}
  .historia{grid-template-columns:1fr 1fr}
}

/* Bloques de texto largo (página Mercedes, aviso) */
.prosa{max-width:68ch}
.prosa h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.05;letter-spacing:-.015em;margin:48px 0 14px}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-family:var(--display);font-weight:700;font-size:1.3rem;margin:28px 0 8px}
.prosa p,.prosa li{margin-bottom:12px}
.prosa ul{padding-left:1.2em}
.aviso-borrador{background:var(--crema);border-left:6px solid var(--cintilla);padding:16px 20px;border-radius:8px;margin-bottom:36px;font-size:.95rem}

.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:860px){.dos-col{grid-template-columns:1fr;gap:32px}}

/* ---------- Testimonios ---------- */
.testimonios{background:var(--limon);color:var(--crema)}
.chats{columns:3 260px;column-gap:20px;margin-top:48px}
.chat{break-inside:avoid;margin-bottom:20px;background:#ECE5DD;border-radius:16px;overflow:hidden;color:#111;font-family:system-ui,-apple-system,sans-serif;font-size:.95rem;box-shadow:0 8px 24px -12px #00000066}
.chat header{background:#075E54;color:#fff;display:flex;align-items:center;gap:10px;padding:10px 14px}
.chat header img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.chat header small{display:block;opacity:.75;font-size:.75rem}
.chat .burbuja{margin:14px;background:#fff;border-radius:0 10px 10px 10px;padding:8px 12px;max-width:85%;line-height:1.4}
.chat .burbuja time{display:block;text-align:right;font-size:.7rem;color:#667}
.chat .burbuja.mia{background:#DCF8C6;border-radius:10px 0 10px 10px;margin-left:auto}

/* ---------- Recetas ---------- */
.platos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
.plato{text-decoration:none;display:flex;flex-direction:column;gap:10px;min-width:0}
.plato figure{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1;max-width:100%;background:var(--crema)}
.plato img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.plato:hover img{transform:scale(1.05)}
.plato h3{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.05;letter-spacing:-.015em}
.plato .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem}
.con{font-size:.82rem;font-weight:600;padding:.3em .8em;border-radius:999px;color:#fff;white-space:nowrap}
.con.s{background:var(--chile)} .con.l{background:var(--limon)}
.tiempo{opacity:.7}
.plato[hidden]{display:none!important}
@media (max-width:980px){.platos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.platos{grid-template-columns:repeat(2,minmax(0,1fr))}.plato h3{font-size:1.15rem}}

.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.filtros button{font:inherit;font-weight:600;font-size:.95rem;padding:.6em 1.1em;border-radius:999px;border:2px solid var(--molcajete);background:transparent;color:var(--molcajete);cursor:pointer}
.filtros button[aria-pressed="true"]{background:var(--molcajete);color:var(--crema)}
.filtros .sep{width:1px;background:#2A1A1630;margin:0 4px}

/* Detalle de receta */
.receta-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.receta-hero figure{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1;max-width:100%}
.receta-hero img{width:100%;height:100%;object-fit:cover}
.receta-datos{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.receta-datos span{background:#ffffff26;border-radius:999px;padding:.45em 1em;font-size:.9rem;font-weight:600}
.credito{font-size:.8rem;opacity:.7;margin-top:8px}
.receta-cuerpo{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.receta-cuerpo h2{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.015em;margin-bottom:16px}
.ingredientes{list-style:none;display:grid;gap:10px}
.ingredientes li{display:flex;gap:12px;align-items:baseline;padding-bottom:10px;border-bottom:1px solid #2A1A161f}
.ingredientes li::before{content:"";flex:0 0 10px;height:10px;border-radius:50%;background:var(--cintilla);transform:translateY(-1px)}
.pasos{list-style:none;counter-reset:p;display:grid;gap:22px}
.pasos li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;gap:14px}
.pasos li::before{content:counter(p);width:40px;height:40px;border-radius:50%;background:var(--molcajete);color:var(--crema);font-family:var(--display);font-weight:700;display:grid;place-items:center}
.hecha-con{margin-top:56px;border-radius:var(--r-lg);padding:28px;display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;color:var(--crema)}
.hecha-con.s{background:var(--chile)} .hecha-con.l{background:var(--limon)}
.hecha-con > img{border-radius:14px;aspect-ratio:4/5;object-fit:cover;background:#000}
.hecha-con h3{font-family:var(--display);font-weight:800;font-size:1.8rem;letter-spacing:-.015em;margin-bottom:6px}
@media (max-width:860px){
  .receta-hero,.receta-cuerpo{grid-template-columns:1fr;gap:32px}
  .hecha-con{grid-template-columns:96px 1fr}
}

/* ---------- Lista de espera / correo ---------- */
.espera{background:var(--cintilla);color:#fff}
.espera .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.espera .titulo{max-width:14ch}
form.suscribir{display:grid;gap:12px}
.campo{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:600}
.campo input,.campo select{font:inherit;font-weight:400;font-size:1rem;padding:.85em 1em;border-radius:12px;border:2px solid transparent;background:#fff;color:var(--molcajete)}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--molcajete)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aviso{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;line-height:1.4}
.aviso input{margin-top:3px;width:18px;height:18px;accent-color:var(--molcajete)}
.aviso a{color:inherit}
.ok{display:none;font-weight:600;background:#ffffff26;border-radius:12px;padding:16px}
form.enviado .ok{display:block}
form.enviado > :not(.ok){display:none}
@media (max-width:860px){.espera .wrap{grid-template-columns:1fr}.fila{grid-template-columns:1fr}}

/* ---------- Preguntas frecuentes ---------- */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--blanco);border-radius:14px;padding:18px 22px}
.faq summary{font-weight:600;cursor:pointer;font-size:1.05rem}
.faq details p{margin-top:10px}

/* ---------- Cierre de marca ---------- */
.cierre{background:var(--molcajete);color:var(--crema);text-align:center;padding-block:112px 96px;overflow:hidden}
.cierre img.icono{width:min(220px,46vw);margin:0 auto 36px}
.cierre p{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.02em;max-width:18ch;margin-inline:auto}
.cierre + footer{border-top:1px solid #FFE6B51a}

/* ---------- Pie ---------- */
footer{background:var(--molcajete);color:var(--crema);padding-block:64px 104px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
footer .logo-pie{height:84px;width:auto;margin-bottom:18px}
footer h4{font-family:var(--display);font-weight:700;font-size:1.2rem;margin-bottom:10px}
footer ul{list-style:none;display:grid;gap:6px}
footer a{text-decoration:none;opacity:.85}
footer a:hover{opacity:1;text-decoration:underline}
footer .legal{grid-column:1/-1;font-size:.8rem;opacity:.6;border-top:1px solid #FFE6B522;padding-top:24px}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr 1fr}footer .wrap > div:first-child{grid-column:1/-1}}

/* ---------- Barra de compra fija (móvil) ---------- */
.barra-movil{display:none}
@media (max-width:860px){
  .barra-movil{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;background:var(--molcajete);border-radius:999px;padding:8px 8px 8px 20px;align-items:center;justify-content:space-between;color:var(--crema);font-weight:600;box-shadow:0 10px 30px -8px #000a;transform:translateY(160%);transition:transform .3s ease}
  .barra-movil.visible{transform:none}
  .barra-movil .btn{padding:.8em 1.2em}
}

/* ---------- Pop-up ---------- */
.popup{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:#2A1A16b3;opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s}
.popup.abierto{opacity:1;visibility:visible}
.popup-caja{width:min(860px,100%);max-height:calc(100vh - 32px);overflow:auto;display:grid;grid-template-columns:.9fr 1.1fr;border-radius:var(--r-lg);background:var(--chile);color:var(--crema);position:relative;transform:translateY(20px) scale(.98);transition:transform .3s ease}
.popup.abierto .popup-caja{transform:none}
.popup-caja > img{width:100%;height:100%;object-fit:cover;min-height:100%}
.popup-cuerpo{padding:40px 36px}
.popup-cuerpo .grande{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:clamp(2.4rem,5vw,3.6rem);line-height:.95;color:var(--crema)}
.popup-cuerpo .grande em{font-style:normal;color:var(--cintilla);text-shadow:0 3px 0 var(--chile-hondo)}
.popup-cuerpo p{margin:14px 0 22px}
.popup .campo{color:var(--crema)}
.popup .ok{background:#00000026}
.cerrar{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:#00000040;color:#fff;font-size:1.4rem;cursor:pointer;line-height:1}
.no-gracias{background:none;border:0;color:var(--crema);opacity:.75;text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem;margin-top:6px}
@media (max-width:700px){.popup-caja{grid-template-columns:1fr}.popup-caja > img{height:180px;min-height:0}.popup-cuerpo{padding:28px 22px}}
.pestana{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:44;background:var(--cintilla);color:#fff;border:0;border-radius:999px;padding:.75em 1.3em;font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;cursor:pointer;box-shadow:0 6px 18px -6px #000a}
@media (max-width:860px){.pestana{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}


/* =========== v3: estructura tipo Gran Malo =========== */
/* Hero de video horizontal a todo lo ancho */
.hero-video{position:relative;background:#120b09;color:var(--crema);overflow:hidden}
.hero-video .marco{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 110px);min-height:340px}
.hero-video video,.hero-video .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Overlay propuesta B: degradado inferior + mensaje corto + CTA */
.hero-video .velo{position:absolute;inset:0;background:linear-gradient(180deg,#120b0900 45%,#120b09cc 100%)}
.hero-video .mensaje{position:absolute;left:0;right:0;bottom:0;padding-block:0 48px}
.hero-video .mensaje .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero-video .mensaje p{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.02em;max-width:15ch}
.hero-video .controles{display:flex;gap:10px;align-items:center}
.boton-sonido{position:relative;display:grid;place-items:center;width:52px;height:52px;padding:0;color:var(--crema);background:#00000066;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1.5px solid #FFE6B580;border-radius:50%;cursor:pointer;transition:background .25s,border-color .25s,transform .2s}
.boton-sonido:hover{transform:scale(1.06);border-color:var(--crema)}
.boton-sonido svg{width:24px;height:24px}
.boton-sonido .ico-sonido{display:none}
.boton-sonido[aria-pressed=true] .ico-mute{display:none}
.boton-sonido[aria-pressed=true] .ico-sonido{display:block}
.boton-sonido[aria-pressed=true]{background:var(--cintilla);border-color:var(--cintilla)}
/* mientras está en silencio, una onda suave invita a picarle */
.boton-sonido[aria-pressed=false]::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #FFE6B5;opacity:0;animation:invita 2.4s ease-out infinite}
@keyframes invita{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.boton-sonido::after{animation:none!important}}
.pendiente-chip{position:absolute;top:16px;right:16px;background:#000000aa;color:#fff;font-size:.75rem;border-radius:999px;padding:.4em .9em}
@media (max-width:700px){.hero-video .marco{aspect-ratio:4/5;max-height:none}.hero-video .mensaje{padding-block:0 28px}}

/* Sección historia (antes hero) */
.historia-viral{background:var(--chile);color:var(--crema)}
.historia-viral .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-block:96px}
.historia-viral h2{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(3rem,7vw,6.2rem);line-height:.95;letter-spacing:-.025em}
.historia-viral h2 span{display:block}
.historia-viral h2 .l3{color:var(--cintilla);text-shadow:0 4px 0 var(--chile-hondo)}
.historia-viral .firma{font-size:1.15rem;margin:28px 0 8px;max-width:34ch}
.historia-viral .firma a{font-weight:600;text-decoration:none;border-bottom:2px solid var(--cintilla)}
@media (max-width:860px){.historia-viral .wrap{grid-template-columns:1fr;padding-block:64px;gap:56px}}

/* Franja de 3 fotos a sangre */
.tira-fotos{display:grid;grid-template-columns:repeat(3,1fr)}
.tira-fotos img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:620px){.tira-fotos{grid-template-columns:1fr 1fr}.tira-fotos img:nth-child(3){display:none}}

/* Franja de frase de marca */
.frase{background:var(--molcajete);color:var(--crema);text-align:center;padding-block:88px}
.frase p{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.12;letter-spacing:-.015em;max-width:24ch;margin-inline:auto}

/* Página de producto */
.producto-hero{background:var(--chile);color:var(--crema);overflow:hidden}
.producto-hero.limonosa{background:var(--limon)}
.producto-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:56px 80px}
.producto-hero figure{border-radius:var(--r-lg);overflow:hidden;background:#000;aspect-ratio:4/5;max-width:520px;width:100%;justify-self:center}
.producto-hero figure img{width:100%;height:100%;object-fit:cover}
.producto-hero h1{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(3rem,7vw,6rem);line-height:.95;letter-spacing:-.025em}
.producto-hero .alias{font-family:var(--display);font-weight:600;font-size:1.3rem;opacity:.9;margin-top:8px}
.producto-hero .desc{font-size:1.15rem;max-width:44ch;margin:22px 0}
.producto-hero .migas{font-size:.9rem;opacity:.8;margin-bottom:18px}
.producto-hero .migas a{text-decoration:none}
.formato{display:inline-block;border:2px solid var(--crema);border-radius:999px;padding:.55em 1.2em;font-weight:600;margin-bottom:24px}
@media (max-width:860px){.producto-hero .wrap{grid-template-columns:1fr;gap:36px;padding-block:36px 64px}}

.como-usarla{position:relative;color:var(--crema);overflow:hidden}
.como-usarla img{width:100%;height:clamp(320px,48vw,560px);object-fit:cover}
.como-usarla .texto{position:absolute;inset:0;background:linear-gradient(90deg,#120b09d9 0%,#120b0966 60%,#120b0900 100%);display:flex;align-items:center}
.como-usarla h2{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(2.6rem,6vw,5rem);line-height:.95;letter-spacing:-.025em}
.como-usarla p{font-size:1.2rem;max-width:34ch;margin-top:14px}

.fichas-receta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ficha-receta{display:flex;flex-direction:column;gap:14px;min-width:0}
.ficha-receta h3{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.02em;color:var(--chile)}
.ficha-receta.l h3{color:var(--limon)}
.ficha-receta figure{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/5;max-width:100%}
.ficha-receta figure img{width:100%;height:100%;object-fit:cover}
.ficha-receta ul{padding-left:1.1em;display:grid;gap:4px;font-size:.95rem}
.ficha-receta ul li::marker{color:var(--cintilla)}
@media (max-width:860px){.fichas-receta{grid-template-columns:1fr}}

.otra-salsa{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:center;border-radius:var(--r-lg);padding:28px;color:var(--crema)}
.otra-salsa.serrano{background:var(--chile)} .otra-salsa.limonosa{background:var(--limon)}
.otra-salsa > img{border-radius:16px;aspect-ratio:4/5;object-fit:cover;background:#000}
.otra-salsa h3{font-family:var(--display);font-weight:800;font-size:2.2rem;letter-spacing:-.02em}
@media (max-width:620px){.otra-salsa{grid-template-columns:110px 1fr;gap:18px}}

/* Testimonios */
.cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px;max-width:820px}
.cifras div{background:#ffffff1f;border-radius:18px;padding:18px 20px}
.cifras b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cifras span{font-size:.9rem;opacity:.85}
@media (max-width:620px){.cifras{grid-template-columns:1fr}}
.videos-fila{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,240px);gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.video-testimonio{scroll-snap-align:start;position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#000;color:#fff}
.video-testimonio img{width:100%;height:100%;object-fit:cover;opacity:.75}
.video-testimonio .play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:#ffffffe6;display:grid;place-items:center}
.video-testimonio .play svg{width:22px;height:22px;fill:var(--chile);margin-left:3px}
.video-testimonio .pie{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,#000c);font-size:.9rem;line-height:1.3}
.video-testimonio .pie b{display:block}
.muro{columns:4 240px;column-gap:18px}
.muro > *{break-inside:avoid;margin-bottom:18px}
.muro [hidden]{display:none!important}
.tarjeta-ig,.tarjeta-resena,.tarjeta-foto{background:var(--blanco);border-radius:16px;overflow:hidden;color:var(--molcajete)}
.tarjeta-ig{padding:16px;font-family:system-ui,-apple-system,sans-serif;font-size:.92rem;line-height:1.4}
.tarjeta-ig .quien{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-weight:600}
.tarjeta-ig .quien i{width:32px;height:32px;border-radius:50%;background:linear-gradient(45deg,#f9a12e,#d1286a,#7a3ab5);display:block}
.tarjeta-ig small{display:block;color:#888;margin-top:8px}
.tarjeta-resena{padding:18px}
.tarjeta-resena .estrellas{color:#F68B21;letter-spacing:2px;font-size:1.05rem}
.tarjeta-resena h4{font-weight:600;margin:6px 0}
.tarjeta-resena .fuente{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.8rem;opacity:.75}
.tarjeta-resena .fuente img{height:14px;width:auto}
.tarjeta-foto img{width:100%;aspect-ratio:1;object-fit:cover}
.tarjeta-foto p{padding:12px 14px;font-size:.9rem}
.muro .chat{margin-bottom:18px}
.ejemplo{display:inline-block;font-size:.72rem;font-weight:600;background:var(--crema);color:var(--molcajete);border-radius:999px;padding:.2em .7em;margin-bottom:6px}
.manda{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:860px){.manda{grid-template-columns:1fr}}
textarea{font:inherit;font-size:1rem;padding:.85em 1em;border-radius:12px;border:2px solid transparent;background:#fff;color:var(--molcajete);min-height:120px;resize:vertical}
.campo textarea:focus{outline:none;border-color:var(--molcajete)}
.manda > *,.espera .wrap > *,.dos-col > *{min-width:0}
.campo input[type=file]{max-width:100%;width:100%;background:#ffffff26;color:inherit}

/* v4: testimonios reales */
button.video-testimonio{border:0;padding:0;cursor:pointer;font:inherit;text-align:left;display:block;width:100%}
.video-testimonio img{opacity:.9}
.video-testimonio video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.video-testimonio.reproduciendo .play,.video-testimonio.reproduciendo .pie,.video-testimonio.reproduciendo img{display:none}
.video-testimonio .pie{display:block;color:#fff}
.captura{background:var(--blanco);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px -14px #00000055}
.captura img{width:100%;height:auto}
.testimonios .muro{columns:4 220px}

/* CTAs principales con la tipografía de títulos (Fraunces) */
.btn-cintilla,.nav .btn-crema,.popup .btn-crema,.btn-display{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 72,"SOFT" 50;letter-spacing:-.01em;font-size:1.08rem}
.nav .btn-crema{font-size:1.05rem}

/* ===================== v5: branding premium ===================== */
@media (max-width:900px){
  .nav #menu > li{display:block}
  .nav #menu > li > a{display:block;height:auto;padding:14px 4px}
}

/* Textura de grano sobre campos de color (evita el look plano de plantilla) */
.con-grano{position:relative;isolation:isolate}
.con-grano::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Patrón de chiles del brandbook, muy sutil */
.con-patron{position:relative;isolation:isolate;overflow:hidden}
.con-patron::after{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;opacity:.07;background:url("../img/chilito.svg") 0 0/86px 70px repeat;transform:rotate(-14deg)}

/* Cinta en movimiento */
.cinta{background:var(--cintilla);color:#fff;overflow:hidden;white-space:nowrap;padding-block:16px;border-block:3px solid var(--molcajete)}
.cinta .pista{display:inline-flex;gap:40px;align-items:center;animation:cinta 28s linear infinite;padding-left:40px}
.cinta span{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(1.4rem,2.6vw,2.1rem);letter-spacing:-.015em}
.cinta img{width:34px;height:28px}
@keyframes cinta{to{transform:translateX(-50%)}}

/* Ingredientes flotando (capa decorativa) */
.ingredientes-flotantes{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ingredientes-flotantes img{position:absolute;opacity:.95;filter:drop-shadow(0 12px 18px #0000004d);animation:flota 9s ease-in-out infinite alternate}
.ingredientes-flotantes img:nth-child(2n){animation-duration:11s;animation-delay:-3s}
.ingredientes-flotantes img:nth-child(3n){animation-duration:13s;animation-delay:-6s}
@keyframes flota{from{transform:translate3d(0,0,0) rotate(var(--r,0deg))}to{transform:translate3d(10px,-26px,0) rotate(calc(var(--r,0deg) + 18deg))}}
.historia-viral .wrap,.producto-hero .wrap{position:relative;z-index:1}

/* Animaciones ligadas al scroll (solo transform; el contenido siempre es visible) */
@supports (animation-timeline: view()){
  .entra{animation:entra linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
  @keyframes entra{from{transform:translateY(48px) scale(.97)}to{transform:none}}
  .botella-gira img{animation:gira linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes gira{from{transform:rotate(-9deg) translateY(30px) scale(.94)}50%{transform:rotate(0) translateY(0) scale(1.03)}to{transform:rotate(7deg) translateY(-24px) scale(.98)}}
  .parallax-lento{animation:par-l linear both;animation-timeline:scroll()}
  .parallax-rapido{animation:par-r linear both;animation-timeline:scroll()}
  @keyframes par-l{to{translate:0 -120px}}
  @keyframes par-r{to{translate:0 -320px}}
}

/* Packs */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pack{border-radius:var(--r-lg);overflow:hidden;color:var(--crema);display:flex;flex-direction:column;min-width:0}
.pack.serrano{background:var(--chile)} .pack.limonosa{background:var(--limon)} .pack.mixto{background:var(--molcajete)}
.pack figure{background:#000;aspect-ratio:1;overflow:hidden}
.pack figure img{width:100%;height:100%;object-fit:cover}
.pack .info{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.pack h3{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.02em}
.pack .precio{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.pack .precio small{font-family:var(--texto);font-weight:400;font-size:.85rem;opacity:.8;letter-spacing:0}
.pack .etiqueta{align-self:flex-start;background:var(--cintilla);color:#fff;font-weight:600;font-size:.8rem;border-radius:999px;padding:.35em .9em}
.pack .acciones{margin-top:auto}
.prueba-social{display:inline-flex;align-items:center;gap:10px;background:#ffffff1f;border-radius:999px;padding:.45em 1em;font-weight:600;font-size:.92rem}
.prueba-social b{font-family:var(--display);font-size:1.1rem}
@media (max-width:900px){.packs{grid-template-columns:1fr}}

/* Mercedes en la cocina (reels) */
.reels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,250px);gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.reel-card{scroll-snap-align:start;aspect-ratio:9/16;border-radius:20px;overflow:hidden;position:relative;background:var(--molcajete);color:var(--crema);text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.reel-card .vacio{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;font-size:.9rem;opacity:.8;border:2px dashed #FFE6B555;border-radius:20px}
.reel-card b{font-family:var(--display);font-size:1.2rem;position:relative}

/* ====== PROPUESTA NEÓN (opcional, se activa con el botón) ====== */
html.neon .frase,html.neon .cierre,html.neon .comprar,html.neon footer,html.neon .cinta{background:#0d0807}
html.neon .frase p,html.neon .cierre p{color:#FFE6B5;text-shadow:0 0 6px #F05238,0 0 18px #F05238,0 0 42px #F0523899;animation:parpadeo 6s infinite}
html.neon .titulo{text-shadow:0 0 18px #F0523866}
html.neon .historia-viral h2 .l3{text-shadow:0 0 8px #F05238,0 0 26px #F05238,0 0 60px #F05238aa}
html.neon .btn-cintilla{box-shadow:0 0 0 2px #FFE6B5,0 0 18px #F05238,0 0 40px #F0523880}
html.neon .cinta{border-color:#F05238;box-shadow:inset 0 0 22px #F0523855}
html.neon .cinta span{color:#F05238;text-shadow:0 0 8px #F05238,0 0 20px #F05238aa}
html.neon .cierre img.icono{filter:drop-shadow(0 0 12px #F05238) drop-shadow(0 0 30px #F05238)}
@keyframes parpadeo{0%,92%,100%{opacity:1}93%{opacity:.55}95%{opacity:1}97%{opacity:.7}}

@media (prefers-reduced-motion:reduce){
  .cinta .pista,.ingredientes-flotantes img{animation:none}
  .entra,.botella-gira img,.parallax-lento,.parallax-rapido{animation:none!important}
}

/* ===== Propuesta neón (v6): botón arriba + títulos que se encienden de arriba hacia abajo ===== */
.franja{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;position:relative}
.neon-toggle{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:800;font-size:.85rem;background:#120b09;color:#F05238;border:1.5px solid #F05238;border-radius:999px;padding:.3em .95em;cursor:pointer;box-shadow:0 0 10px #F0523870;transition:box-shadow .3s,color .3s}
.neon-toggle i{width:8px;height:8px;border-radius:50%;background:#5a3a36;transition:background .3s,box-shadow .3s}
.neon-toggle[aria-pressed=true]{color:#FFE6B5;box-shadow:0 0 8px #F05238,0 0 22px #F05238}
.neon-toggle[aria-pressed=true] i{background:#F05238;box-shadow:0 0 6px #F05238,0 0 14px #F05238}
@media (min-width:901px){.neon-toggle{position:absolute;right:16px;top:50%;transform:translateY(-50%)}}
html.neon .franja{background:#0d0807;box-shadow:0 1px 0 #F0523855,0 6px 24px #F0523833}
/* Títulos: tubo de neón. Claro sobre fondos oscuros, rojo viral sobre fondos claros */
html.neon{--brillo:#F05238;--halo:#F05238}
html.neon .neon-on{animation:encender .9s steps(1,end) var(--d,0s) both, parpadeo 7s 2s infinite}
html.neon .neon-on.claro{color:#FFF1D6;text-shadow:0 0 2px #fff8,0 0 8px var(--brillo),0 0 20px var(--brillo),0 0 44px var(--halo),0 0 80px #F0523866}
html.neon .neon-on.oscuro{color:#F05238;text-shadow:0 0 1px #fff6,0 0 10px #F0523899,0 0 26px #F0523866}
@keyframes encender{0%{text-shadow:none;opacity:.35}10%{opacity:1}18%{opacity:.4;text-shadow:none}26%{opacity:1}40%{opacity:.6}48%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion: reduce){html.neon .neon-on{animation:none}}

/* ===== Charla TEDx de Mercedes: escenario con reflector ===== */
.credenciales a{background:var(--chile);color:var(--crema);border-radius:999px;padding:.45em 1em;font-size:.9rem;font-weight:700;text-decoration:none;box-shadow:0 0 0 0 #F0523866;animation:latido 2.6s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 #F0523877}70%{box-shadow:0 0 0 12px #F0523800}100%{box-shadow:0 0 0 0 #F0523800}}
.escenario-ted{position:relative;overflow:hidden;background:radial-gradient(120% 70% at 50% 120%,#3a0f0d 0%,#120b09 55%),#120b09;color:var(--crema);padding:clamp(72px,10vw,128px) 0}
.escenario-ted .reflector{position:absolute;inset:-20% -10% auto;height:120%;background:conic-gradient(from 180deg at 50% -10%,transparent 168deg,#FFE6B51c 176deg,#FFE6B530 180deg,#FFE6B51c 184deg,transparent 192deg);filter:blur(6px);transform-origin:50% 0;animation:barrido 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes barrido{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.escenario-ted::after{content:"";position:absolute;left:50%;bottom:-140px;width:min(1100px,140vw);height:260px;transform:translateX(-50%);background:radial-gradient(closest-side,#F0523866,#F0523800);pointer-events:none}
.escenario-ted .wrap{position:relative;z-index:1}
.kicker-ted{display:inline-flex;align-items:center;gap:.6em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;color:#F05238;margin:0 0 28px}
.kicker-ted .punto{width:10px;height:10px;border-radius:50%;background:#F05238;box-shadow:0 0 0 0 #F05238aa;animation:grabando 1.6s infinite}
@keyframes grabando{0%{box-shadow:0 0 0 0 #F05238aa}80%,100%{box-shadow:0 0 0 10px #F0523800}}
.ted-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.ted-video{all:unset;cursor:pointer;display:block;border-radius:22px;padding:10px;background:linear-gradient(145deg,#F05238,#F05238 40%,#F05238);box-shadow:0 30px 80px #000a,0 0 60px #F0523833;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ted-video:hover{transform:translateY(-4px) rotate(-.4deg)}
.ted-video:focus-visible{outline:3px solid var(--crema);outline-offset:4px}
.ted-marco{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(135deg,#1d1210 0 14px,#24161300 14px 28px),#1a100e}
.ted-poster{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:18px;text-align:center;color:#ffe6b599;font-size:.95rem}
.ted-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ted-video .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#F05238;display:grid;place-items:center;box-shadow:0 0 0 10px #F0523833,0 10px 30px #0008;transition:transform .3s}
.ted-video:hover .play{transform:scale(1.08)}
.ted-video .play svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.ted-sello{position:absolute;left:14px;top:14px;background:#000c;color:#fff;font-family:var(--display);font-weight:800;font-size:.85rem;padding:.35em .8em;border-radius:6px;letter-spacing:.02em}
.ted-video.reproduciendo .play,.ted-video.reproduciendo .ted-sello,.ted-video.reproduciendo .ted-poster{display:none}
.ted-texto h2{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(2rem,4vw,3.3rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 18px;color:var(--crema)}
.ted-resumen{font-size:1.1rem;line-height:1.6;color:#ffe6b5d9;margin:0 0 24px}
.ted-ideas{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
.ted-ideas li{display:flex;gap:14px;align-items:baseline;padding:14px 16px;border-radius:14px;background:#ffffff0a;border:1px solid #ffe6b51f}
.ted-ideas span{font-family:var(--display);font-weight:800;color:#F05238;font-size:1.15rem;min-width:2ch}
.ted-datos{display:flex;flex-wrap:wrap;gap:28px}
.ted-datos div{display:grid}
.ted-datos b{font-family:var(--display);font-weight:800;font-size:1.8rem;line-height:1;color:var(--crema)}
.ted-datos small{color:#ffe6b5a6;font-size:.85rem;margin-top:4px}
.ted-cita{margin:clamp(56px,8vw,96px) auto 0;max-width:24ch;text-align:center;font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 50;font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.02em;color:var(--crema)}
.ted-cita cite{display:block;margin-top:18px;font-family:var(--texto);font-style:normal;font-weight:600;font-size:.95rem;letter-spacing:0;color:#F05238}
@media (max-width:860px){.ted-grid{grid-template-columns:1fr}.ted-video .play{width:64px;height:64px;margin:-32px 0 0 -32px}}
@media (prefers-reduced-motion: reduce){.escenario-ted .reflector,.kicker-ted .punto,.credenciales a{animation:none}}

/* ===== v8 · BENTO ===== */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:270px;gap:18px}
.b{position:relative;border-radius:26px;overflow:hidden;display:grid;place-items:center;text-decoration:none;color:inherit;min-height:220px}
.b>img,.b-foto img,.b-gente img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
a.b:hover img,.b-gente:hover img{transform:scale(1.06)}
.b-chip{position:absolute;left:14px;bottom:14px;background:#120b09d9;color:var(--crema);font-size:.82rem;font-weight:600;padding:.45em .9em;border-radius:999px;backdrop-filter:blur(6px)}
.b-logo{background:var(--chile)}
.b-logo img{position:static;width:62%;height:auto;object-fit:contain;animation:respira 5s ease-in-out infinite}
@keyframes respira{50%{transform:scale(1.04)}}
.b-producto{grid-column:3;grid-row:1 / span 2;background:var(--limon);padding:40px 28px;place-items:center}
.b-pila{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.b-pila i{position:absolute;width:min(78%,330px);height:72%;border-radius:22px;background:#FFF4DE;opacity:.55;transform:translateY(-34px) scale(.9)}
.b-pila i+i{opacity:.8;transform:translateY(-18px) scale(.95)}
.b-card{position:relative;z-index:1;width:min(100%,340px);background:var(--papel);border-radius:22px;padding:18px 18px 20px;box-shadow:0 24px 48px #0000004d;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.b-producto:hover .b-card{transform:translateY(-6px) rotate(-1deg)}
.b-card figure{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#120b09}
.b-card figure img{width:100%;height:100%;object-fit:cover}
.b-card h3{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.05;margin:16px 0 6px}
.b-card p{font-size:.95rem;color:#2a1a16bf;line-height:1.45}
.b-pie{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.b-mas{width:44px;height:44px;border-radius:12px;background:var(--molcajete);color:var(--crema);display:grid;place-items:center;font-size:1.5rem;text-decoration:none;transition:transform .2s}
.b-mas:hover{transform:rotate(90deg)}
.b-gente{grid-column:1 / span 2}
.b-gente img{object-position:50% 30%}
.b-palabras{background:var(--molcajete);display:grid;align-content:center;justify-items:center;gap:2px;font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.02em}
.b-palabras span:nth-child(1){color:var(--crema)}.b-palabras span:nth-child(2){color:var(--cintilla)}.b-palabras span:nth-child(3){color:#F05238}
.b-palabras span{animation:salta 3.6s ease-in-out infinite}
.b-palabras span:nth-child(2){animation-delay:.4s}.b-palabras span:nth-child(3){animation-delay:.8s}
@keyframes salta{0%,70%,100%{transform:none}78%{transform:translateY(-6px) rotate(-2deg)}86%{transform:none}}
.b-plato{background:var(--chile-hondo)}
.b-plato img{position:static;width:min(220px,68%);height:auto;height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 18px 40px #0004;animation:gira-plato 40s linear infinite}
@keyframes gira-plato{to{transform:rotate(360deg)}}
.b-stickers{background:var(--cintilla);min-height:240px}
.sticker{position:absolute;font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.05;text-align:center;color:var(--molcajete);display:grid;place-items:center;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.sticker:hover{transform:scale(1.12) rotate(0deg)!important}
.s1{left:9%;top:44%;width:130px;height:130px;background:var(--crema);transform:rotate(-14deg);clip-path:polygon(50% 0,61% 9%,75% 4%,80% 18%,95% 21%,92% 36%,100% 50%,92% 64%,95% 79%,80% 82%,75% 96%,61% 91%,50% 100%,39% 91%,25% 96%,20% 82%,5% 79%,8% 64%,0 50%,8% 36%,5% 21%,20% 18%,25% 4%,39% 9%)}
.s2{right:8%;top:12%;width:170px;height:84px;background:var(--papel);border-radius:50%;transform:rotate(10deg)}
.s3{left:42%;top:8%;padding:.55em .9em;background:var(--chile);color:var(--crema);border-radius:12px;transform:rotate(-4deg);font-size:1rem}
@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr}
  .b-producto{grid-column:1 / -1;grid-row:auto}
  .b-gente{grid-column:1 / -1}
  .b-stickers{grid-column:1 / -1}
}
@media (max-width:900px){.bento{grid-auto-rows:auto}.b{min-height:240px}.b-producto{padding:56px 22px 32px}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.b{min-height:220px}.b-palabras{padding:28px 0}}

/* ===== v8 · RUEDA "¿Con qué la comes?" ===== */
.rueda{display:grid;grid-template-columns:1fr 1fr;gap:18px;height:clamp(420px,52vw,560px)}
.rueda-fotos{position:relative;border-radius:26px;overflow:hidden;background:#120b09}
.rueda-foto{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .6s ease,transform 1.2s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.rueda-foto.activa{opacity:1;transform:none;pointer-events:auto}
.rueda-foto img{width:100%;height:100%;object-fit:cover}
.rueda-foto span{position:absolute;left:16px;bottom:16px;background:var(--papel);color:var(--molcajete);font-weight:700;font-size:.9rem;padding:.55em 1em;border-radius:999px}
.rueda-panel{position:relative;border-radius:26px;overflow:hidden;background:var(--cintilla)}
.rueda-lista{list-style:none;position:absolute;inset:0;margin:0;padding:0}
.rueda-lista li{position:absolute;left:50%;top:50%;transition:transform .55s cubic-bezier(.3,.9,.3,1),opacity .55s}
.rueda-lista button{all:unset;cursor:pointer;display:block;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,2vw,1.45rem);text-transform:uppercase;letter-spacing:.02em;color:#FFF4DE;padding:.45em 1.1em;border:2px solid #FFF4DE66;border-radius:999px;transition:background .3s,color .3s,border-color .3s}
.rueda-lista li.activa button{border-color:#FFF4DE;background:#FFF4DE1f}
.rueda-lista button:hover,.rueda-lista button:focus-visible{border-color:#FFF4DE}
@media (max-width:760px){.rueda{grid-template-columns:1fr;height:auto}.rueda-fotos{aspect-ratio:4/3}.rueda-panel{height:300px}}

/* ===== v8 · PASOS (carrusel infinito) ===== */
.pasos-sec{background:var(--chile);padding:clamp(64px,8vw,104px) 0;overflow:hidden}
.pasos-sec .titulo{color:var(--crema);margin-bottom:36px}
.pasos-ventana{overflow:hidden}
.pasos-pista{display:flex;gap:28px;padding-inline:calc(50vw - 170px);will-change:transform}
.paso{flex:0 0 340px;height:460px;position:relative;border-radius:24px;overflow:hidden;background:#120b09;color:#fff;transition:transform .6s cubic-bezier(.3,.9,.3,1),opacity .6s;opacity:.75;transform:scale(.92)}
.paso.centro{opacity:1;transform:none;box-shadow:0 30px 60px #0000004d}
.paso img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.paso::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#000d 100%)}
.paso-texto{position:absolute;left:20px;right:20px;bottom:20px;z-index:1}
.paso-n{display:inline-block;background:#fff;color:#120b09;font-size:.72rem;font-weight:700;padding:.3em .7em;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.paso h3{font-family:var(--display);font-weight:800;font-size:1.3rem;margin:10px 0 4px}
.paso p{font-size:.88rem;line-height:1.4;color:#ffffffd0}
.paso b{display:block;font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;margin-top:12px;letter-spacing:-.02em}
.paso.amarillo b{color:var(--crema)}.paso.rosa b{color:#F05238}.paso.verde b{color:var(--cintilla)}
@media (max-width:560px){.paso{flex-basis:270px;height:400px}.pasos-pista{padding-inline:calc(50vw - 135px);gap:18px}}
@media (prefers-reduced-motion: reduce){.b-logo img,.b-palabras span,.b-plato img{animation:none}}
.ted-marco .ted-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.ted-video.reproduciendo .ted-img{display:none}
.ted-texto .btn{margin-top:4px}
.b-gente img{object-position:50% 40%}

/* ===== v9 · SPOT antes / después ===== */
.spot-sec{background:var(--molcajete);color:var(--crema);padding:clamp(72px,9vw,120px) 0;position:relative;overflow:hidden}
.spot-sec .titulo{color:var(--crema)}
.spot-sec .entrada{color:#ffe6b5cc}
.antes-despues{position:relative;aspect-ratio:16/9;border-radius:26px;overflow:hidden;background:#000;box-shadow:0 30px 80px #0009;user-select:none;touch-action:pan-y}
.antes-despues img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.antes-despues .antes{clip-path:inset(0 calc(100% - var(--corte)) 0 0)}
.antes-despues .manija{position:absolute;top:0;bottom:0;left:var(--corte);width:3px;margin-left:-1.5px;background:var(--crema);pointer-events:none}
.antes-despues .manija i{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--cintilla);border:3px solid var(--crema);box-shadow:0 6px 20px #0007}
.antes-despues .manija i::before,.antes-despues .manija i::after{content:"";position:absolute;top:50%;width:0;height:0;border:7px solid transparent;margin-top:-7px}
.antes-despues .manija i::before{left:6px;border-right-color:var(--crema)}
.antes-despues .manija i::after{right:6px;border-left-color:var(--crema)}
.antes-despues input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.antes-despues .etq{position:absolute;top:18px;font-family:var(--display);font-weight:800;font-size:.95rem;padding:.4em .9em;border-radius:999px;pointer-events:none}
.etq-antes{left:18px;background:#000b;color:#fff}
.etq-despues{right:18px;background:var(--chile);color:var(--crema)}
.spot-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:none}
.antes-despues.reproduciendo .spot-video{display:block}
.antes-despues.reproduciendo .manija,.antes-despues.reproduciendo .etq,.antes-despues.reproduciendo input{display:none}
.spot-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.spot-sec .btn-borde{color:var(--crema);border-color:#ffe6b588}
@media (max-width:600px){.antes-despues{aspect-ratio:4/5}.antes-despues .antes,.antes-despues .despues{object-position:60% 50%}}

/* Recetas: cabecera con video del spot */
.cabecera-video{position:relative;overflow:hidden;min-height:clamp(380px,48vw,560px);display:flex;align-items:flex-end}
.cabecera-video .fondo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cabecera-video::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#120b09e6 0%,#120b0999 45%,#120b0900 80%),linear-gradient(0deg,#120b09aa,#120b0900 50%)}
.cabecera-video .wrap{position:relative;z-index:1}
.cabecera-video .icono-fondo{display:none}
.ted-texto p:has(.btn){margin-bottom:28px}

/* Recetas en páginas de salsa: filas alineadas entre tarjetas (título, foto, ingredientes, enlace) */
@media (min-width:861px){
  .fichas-receta{grid-template-rows:auto auto 1fr auto;row-gap:14px}
  .ficha-receta{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0}
  .ficha-receta h3{align-self:end;margin-bottom:14px;font-size:1.7rem}
  .ficha-receta ul{align-self:start;margin-top:16px}
  .ficha-receta .ver-mas{justify-self:start;margin-top:18px}
}

/* =========================================================
   PROPUESTA · VERSIÓN OSCURA (html.oscuro)
   Base negra como las fotos de producto y el hero; los colores
   oficiales quedan como acento (bandas, tarjetas de sabor, CTA).
   ========================================================= */
.propuestas{display:inline-flex;gap:8px;align-items:center}
@media (min-width:901px){.propuestas{position:absolute;right:16px;top:50%;transform:translateY(-50%)}.propuestas .neon-toggle{position:static;transform:none}}
.tema-toggle{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:800;font-size:.85rem;background:var(--crema);color:#0B0807;border:1.5px solid var(--crema);border-radius:999px;padding:.3em .95em;cursor:pointer}
.tema-toggle i{width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,#0B0807 50%,var(--crema) 50%);border:1.5px solid #0B0807}
html.oscuro .tema-toggle{background:#0B0807;color:var(--crema)}
html.oscuro .tema-toggle i{border-color:var(--crema)}

html.oscuro{--negro:#0B0807;--negro-2:#14100E;--negro-3:#1C1613;--linea:#FFE6B51a;background:var(--negro)}
html.oscuro body{background:var(--negro);color:var(--crema)}
/* navegación: negra con filo rojo */
html.oscuro .franja{background:var(--negro);border-bottom:1px solid var(--linea)}
html.oscuro .nav{background:#0B0807e8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 #F0523855}
html.oscuro .nav .btn-crema{background:var(--chile);color:var(--crema);box-shadow:0 4px 0 var(--chile-hondo)}
html.oscuro .nav .submenu{background:var(--negro-3);color:var(--crema);box-shadow:0 20px 50px #000c;border:1px solid var(--linea)}
html.oscuro .nav .submenu a:hover{background:#ffffff0d}
/* secciones de fondo claro → negro, alternando dos tonos para dar ritmo */
html.oscuro .mercedes{background:var(--negro-2)}
html.oscuro .historia-viral{background:radial-gradient(70% 90% at 85% 40%,#B02A4455,transparent 70%),var(--negro)}
html.oscuro .comprar{background:var(--chile)}
html.oscuro .spot-sec,html.oscuro .frase,html.oscuro .cierre,html.oscuro footer{background:var(--negro-2)}
html.oscuro .cabecera.verde,html.oscuro .cabecera.oscura{background:var(--negro-2)}
html.oscuro .testimonios{background:var(--negro-2);box-shadow:inset 0 1px 0 var(--linea),inset 0 -1px 0 var(--linea)}
html.oscuro .pasos-sec{background:radial-gradient(60% 80% at 50% 100%,#B02A4466,transparent 70%),var(--negro)}
html.oscuro .seccion.recetas,html.oscuro .rueda-sec{background:var(--negro-2)}
/* producto: halo rojo detrás de las botellas */
html.oscuro .salsa,html.oscuro .pack{box-shadow:0 0 0 1px var(--linea),0 30px 80px -30px #F0523866}
html.oscuro .producto-hero{background:radial-gradient(60% 70% at 30% 50%,#B02A4466,transparent 70%),var(--negro)}
/* textos y piezas que asumían fondo claro */
html.oscuro .ver-mas{color:var(--crema)}
html.oscuro .plato,html.oscuro .ficha-receta{color:var(--crema)}
html.oscuro .ficha-receta h3{color:#F05238}
html.oscuro .ficha-receta.l h3{color:#00AF7A}
html.oscuro .plato figure{background:var(--negro-3)}
html.oscuro .filtros button{border-color:#FFE6B566;color:var(--crema)}
html.oscuro .filtros button[aria-pressed=true]{background:var(--crema);color:var(--negro);border-color:var(--crema)}
html.oscuro .credenciales span{background:var(--negro-3);color:var(--crema)}
html.oscuro .foto-mercedes{background:var(--negro-3);color:#FFE6B599}
html.oscuro .faq details{background:var(--negro-3);color:var(--crema)}
html.oscuro .aviso-borrador{background:var(--negro-3)}
html.oscuro .b-card{background:var(--negro-3);color:var(--crema)}
html.oscuro .b-card p{color:#FFE6B5bf}
html.oscuro .b-mas{background:var(--chile)}
html.oscuro .b-logo{background:var(--negro-3);box-shadow:inset 0 0 0 1px var(--linea)}
html.oscuro .b-palabras{background:var(--chile-hondo)}
html.oscuro .reel-card{background:var(--negro-3);color:#FFE6B599}
html.oscuro .rueda-foto span{background:var(--negro);color:var(--crema)}
html.oscuro .seccion.espera{background:var(--cintilla)}
html.oscuro .seccion:not([class*=" "]),html.oscuro .seccion.productos,html.oscuro #packs,html.oscuro .bento-sec{background:var(--negro)}
html.oscuro .titulo,html.oscuro .entrada{color:var(--crema)}
/* transición suave al cambiar */
html.cambiando-tema *{transition:background-color .5s ease,color .5s ease,box-shadow .5s ease!important}

/* Sección clara dentro del tema oscuro (capturas de WhatsApp en Testimonios) */
html.oscuro .seccion-clara{background:var(--papel)!important;color:var(--molcajete)}
html.oscuro .seccion-clara .titulo,html.oscuro .seccion-clara .entrada{color:var(--molcajete)}
html.oscuro .seccion-clara .filtros button{border-color:var(--molcajete);color:var(--molcajete)}
html.oscuro .seccion-clara .filtros button[aria-pressed=true]{background:var(--molcajete);color:var(--crema)}
html.oscuro .seccion-clara .ver-mas{color:var(--molcajete)}

/* ===== Redes sociales (íconos) ===== */
.redes{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0}
.redes a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid #FFE6B566;color:var(--crema);opacity:1!important;text-decoration:none!important;transition:background .2s,border-color .2s,transform .2s}
.redes a:hover{background:var(--cintilla);border-color:var(--cintilla);transform:translateY(-2px)}
.redes svg{width:18px;height:18px}
.redes-grandes a{width:48px;height:48px}
.redes-grandes svg{width:22px;height:22px}
.redes-etq{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin:0 0 8px}
.mercedes .redes a{border-color:currentColor;color:inherit}
.redes-bloque{margin-top:28px}
html:not(.oscuro) .mercedes .redes a:hover{color:var(--crema)}

/* ===== Historia: línea de tiempo ===== */
.linea-tiempo{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.linea-tiempo::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:linear-gradient(90deg,var(--chile),var(--cintilla));opacity:.6}
.linea-tiempo li{position:relative;padding-top:72px}
.lt-n{position:absolute;top:0;left:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--chile);color:var(--crema);font-family:var(--display);font-weight:800;font-size:1.15rem;box-shadow:0 0 0 6px var(--papel)}
html.oscuro .lt-n{box-shadow:0 0 0 6px var(--negro)}
.linea-tiempo li:nth-child(3) .lt-n{background:var(--cintilla)}
.linea-tiempo h3{font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1.05;margin:0 0 8px}
.linea-tiempo p{font-size:1rem;line-height:1.5;opacity:.85}
.lt-cifra{font-family:var(--display);font-weight:800;color:var(--cintilla);font-size:1.2em}
@media (max-width:860px){.linea-tiempo{grid-template-columns:1fr;gap:28px}.linea-tiempo::before{left:27px;right:auto;top:0;bottom:0;width:2px;height:auto}.linea-tiempo li{padding:0 0 0 80px;min-height:56px}}

/* ===== Síguenos ===== */
.siguenos{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.siguenos-redes{display:grid;gap:22px}
@media (max-width:860px){.siguenos{grid-template-columns:1fr}}
html:not(.oscuro) .siguenos-sec .redes a{color:var(--molcajete);border-color:#2A1A1666}
html:not(.oscuro) .siguenos-sec .redes a:hover{color:var(--crema)}

/* ===== Reels reales de Instagram ===== */
.reels-ig{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,270px);gap:18px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.reel-ig{scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.reel-ig-poster{all:unset;cursor:pointer;position:relative;display:block;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#120b09;box-shadow:0 20px 50px -20px #000a}
.reel-ig-poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.reel-ig-poster:hover img{transform:scale(1.05)}
.reel-ig-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,#000c)}
.reel-ig-poster:focus-visible{outline:3px solid var(--cintilla);outline-offset:3px}
.reel-ig-badge{position:absolute;top:12px;left:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;background:#000a;color:#fff;font-size:.78rem;font-weight:700;padding:.35em .75em;border-radius:999px}
.reel-ig-badge svg{width:15px;height:15px}
.reel-ig-poster .play{position:absolute;left:50%;top:50%;z-index:1;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#ffffffd9;display:grid;place-items:center;transition:transform .25s}
.reel-ig-poster:hover .play{transform:scale(1.08)}
.reel-ig-poster .play svg{width:24px;height:24px;fill:#120b09;margin-left:3px}
.reel-ig-titulo{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;color:#fff;font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.05}
.reel-ig iframe{width:100%;aspect-ratio:9/16;min-height:560px;border:0;border-radius:18px;background:#fff}
.reel-ig-link{font-size:.85rem;font-weight:600;align-self:flex-start;text-decoration:none;border-bottom:2px solid var(--cintilla)}
@media (max-width:560px){.reels-ig{grid-auto-columns:86%}}

/* ===== Storytime (cómo nació La Viral, contado por Mercedes) ===== */
.story-sec{background:var(--chile);color:var(--crema)}
html.oscuro .story-sec{background:radial-gradient(70% 90% at 20% 50%,#B02A4466,transparent 70%),var(--negro-2)}
.story{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center}
.story .titulo,.story .entrada{color:var(--crema)}
.story-videos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.story-item p{font-size:.9rem;line-height:1.45;margin-top:10px;opacity:.85}
.story-item .reel-ig-link{color:var(--crema)}
@media (max-width:860px){.story{grid-template-columns:1fr}}
@media (max-width:480px){.story-videos{grid-template-columns:1fr 1fr;gap:12px}.story-item .reel-ig-titulo{font-size:1.05rem}}

/* Encabezado de producto: logo + cintilla de sabor como en la etiqueta */
.h1-etiqueta{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin:6px 0 4px}
.h1-etiqueta img{width:min(340px,70vw);height:auto}
.sabor-etq{display:inline-block;font-family:var(--display);font-weight:600;font-variation-settings:"opsz" 72;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:.06em;line-height:1;color:var(--crema);background:#E6612B;padding:.38em .9em .42em;border-radius:3px;box-shadow:inset 0 0 0 2px #F3A07A88}
.sabor-etq.limonosa{background:#6E4495;box-shadow:inset 0 0 0 2px #A98BD088}
@media (max-width:860px){.h1-etiqueta{gap:14px}.h1-etiqueta img{width:min(260px,64vw)}}
.h3-etiqueta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:10px 0 12px}
.h3-etiqueta img{width:min(200px,50vw);height:auto}
.h3-etiqueta .sabor-etq{font-size:1.15rem}
.salsa .h3-etiqueta img{width:min(190px,48vw)}

/* ===== v23 ===== */
.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}
/* Rappi: solo CDMX */
.btn-tienda.rappi{position:relative}
.solo-cdmx{position:absolute;top:-9px;right:-6px;background:var(--molcajete);color:var(--crema);font-family:var(--texto);font-weight:700;font-size:.62rem;letter-spacing:.06em;padding:.3em .55em;border-radius:999px;box-shadow:0 0 0 2px var(--crema)}
html.oscuro .solo-cdmx{background:var(--cintilla);box-shadow:0 0 0 2px #0B0807}
/* Packs con logo + cintilla */
.pack-etq img{width:min(130px,36vw)}
.pack-etq .tags{display:flex;flex-wrap:wrap;gap:6px}
.pack-etq .sabor-etq{font-size:.95rem}
.pack .info p b{font-weight:700}

/* Más formas de tenerla */
.formas{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.forma{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(28px,4vw,44px);border-radius:var(--r-lg);background:var(--crema);color:var(--molcajete);overflow:hidden}
.forma h3{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.02;letter-spacing:-.02em}
.forma p{font-size:1.02rem;line-height:1.55;max-width:44ch}
.forma-ico{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--chile);color:var(--crema);margin-bottom:6px}
.forma-ico svg{width:28px;height:28px}
.forma-kicker{font-size:.78rem!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--chile)}
.forma-pie{margin-top:auto;padding-top:14px;border-top:1px solid #2A1A1622;font-size:.9rem!important;font-weight:600;opacity:.75}
.forma-destacada{background:var(--chile);color:var(--crema)}
.forma-destacada .forma-ico{background:var(--crema);color:var(--chile)}
.forma-destacada .forma-kicker{color:var(--crema);opacity:.8}
.forma-destacada .forma-pie{border-color:#FFE6B533}
html.oscuro .forma{background:var(--negro-3);color:var(--crema);box-shadow:inset 0 0 0 1px var(--linea)}
html.oscuro .forma .forma-kicker{color:var(--cintilla)}
html.oscuro .forma-pie{border-color:var(--linea)}
html.oscuro .forma-destacada{background:var(--chile);box-shadow:0 30px 80px -30px #F0523888}
html.oscuro .forma-destacada .forma-kicker{color:var(--crema)}
@media (max-width:860px){.formas{grid-template-columns:1fr}}

/* Cierre con video de fondo */
.cierre-video-sec{position:relative;overflow:hidden;min-height:clamp(440px,60vh,640px);display:grid;place-items:center;padding-block:96px!important}
.cierre-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cierre-velo{position:absolute;inset:0;z-index:0;background:radial-gradient(55% 65% at 50% 50%,#0B080799,#0B0807bf 80%),linear-gradient(0deg,#0B0807,transparent 30%)}
.cierre-contenido{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.cierre-contenido p{margin:0}
html.oscuro .cierre-video-sec{background:#0B0807}

/* Chilitos decorativos */
.con-chiles{position:relative;overflow:hidden}
.con-chiles > .wrap{position:relative;z-index:1}
.chiles-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.chile-deco{position:absolute;height:auto;transform:rotate(var(--r));opacity:.9;filter:drop-shadow(0 6px 10px #0004);animation:chile-flota 7s ease-in-out var(--d) infinite}
@keyframes chile-flota{0%,100%{transform:rotate(var(--r)) translateY(0)}50%{transform:rotate(calc(var(--r) + 8deg)) translateY(-10px)}}
@media (max-width:860px){.chile-deco{width:56px!important;opacity:.6}.chile-deco:nth-child(3){display:none}}
@media (prefers-reduced-motion: reduce){.chile-deco{animation:none}}

/* Packs alineados: la etiqueta "Para probar las dos" va sobre la foto y las filas coinciden */
.pack{position:relative}
.pack .etiqueta{position:absolute;top:16px;left:16px;z-index:2;box-shadow:0 6px 16px #0006}
.pack .info{gap:0}
.pack .info .pack-etq{margin:0 0 14px}
.pack .info > p{min-height:3.2em;margin:0 0 18px;line-height:1.6}
@media (min-width:861px){
  .packs{grid-template-rows:auto}
  .pack{display:grid;grid-template-rows:auto 1fr}
}

/* ===== Bento: mazo de las dos salsas (la de enfrente se va hacia atrás) ===== */
.b-producto{transition:background-color .6s ease;flex-direction:column;gap:18px;display:flex!important;justify-content:center;align-items:center}
.b-producto[data-activo=serrano]{background:var(--chile)}
.b-producto[data-activo=limonosa]{background:var(--limon)}
.b-mazo{position:relative;width:min(100%,320px);display:grid;margin-top:26px}
.b-mazo .b-card{grid-area:1/1;width:100%;cursor:pointer;transition:transform .7s cubic-bezier(.3,.9,.3,1),opacity .5s,filter .5s;transform-origin:50% 100%}
.b-mazo .b-card.frente{z-index:2;transform:none}
.b-mazo .b-card.atras{z-index:1;transform:translateY(-26px) scale(.92);filter:brightness(.75)}
.b-mazo .b-card.sale{z-index:3;transform:translate(-115%,10px) rotate(-14deg);opacity:0}
.b-producto:hover .b-mazo .b-card.frente{transform:translateY(-6px) rotate(-1deg)}
.b-card .b-etq{margin:14px 0 8px;gap:8px}
.b-card .b-etq img{width:110px}
.b-card .b-etq .sabor-etq{font-size:.8rem}
.b-control{display:flex;align-items:center;gap:12px;position:relative;z-index:4}
.b-sig{all:unset;cursor:pointer;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#0006;color:var(--crema);border:1.5px solid #FFE6B588;transition:background .2s,transform .2s}
.b-sig:hover{background:#000a;transform:translateX(3px)}
.b-sig:focus-visible{outline:3px solid var(--crema);outline-offset:3px}
.b-sig svg{width:20px;height:20px}
.b-puntos{display:flex;gap:6px}
.b-puntos i{width:8px;height:8px;border-radius:50%;background:#FFE6B566;transition:background .3s,width .3s}
.b-producto[data-activo=serrano] .b-puntos i:first-child,.b-producto[data-activo=limonosa] .b-puntos i:last-child{background:var(--crema);width:22px;border-radius:99px}
@media (prefers-reduced-motion: reduce){.b-mazo .b-card{transition:none}}
.b-producto{padding:22px 22px 18px!important;gap:12px}
.b-mazo .b-card{padding:14px 14px 16px}
.b-mazo .b-card figure{aspect-ratio:16/11}
.b-mazo .b-card p{font-size:.88rem}
.b-card .b-etq{margin:10px 0 6px}
.b-card .b-etq img{width:92px}
.b-mazo .b-card.atras{transform:translateY(-22px) scale(.93);filter:brightness(.6)}
.reels-cta{display:flex;justify-content:center;margin-top:36px}
.franja[hidden]{display:none!important}
.foto-real{border:0!important;background:#000!important;overflow:hidden;padding:0;margin:0}
.foto-real img{width:100%;height:100%;object-fit:cover;object-position:40% 30%}
/* Recetas: overlay más marcado sobre el video para separar el texto */
.cabecera-video::before{background:linear-gradient(90deg,#0B0807f2 0%,#0B0807cc 42%,#0B080780 70%,#0B080759 100%),linear-gradient(0deg,#0B0807cc,#0B080700 55%)!important}

/* ===== Reseñas de Amazon ===== */
.amz-bloque{display:grid;gap:16px}
.amz-cabeza{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.amz-cabeza img{height:26px;width:auto;background:#fff;padding:6px 10px;border-radius:8px;box-sizing:content-box}
.amz-cabeza span{font-weight:600;font-size:.95rem}
.amz-cabeza b{font-family:var(--display);font-weight:800;color:#F68B21;font-size:1.15rem}
.amz-grid{columns:3 280px;column-gap:16px}
.resena-amz{break-inside:avoid;margin:0 0 16px;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 10px 28px -16px #0007}
.resena-amz img{width:100%;height:auto;display:block}
.clara-caja{background:var(--papel);color:var(--molcajete);border-radius:var(--r-lg);padding:clamp(18px,3vw,32px)}
html.oscuro .clara-caja{background:var(--papel);color:var(--molcajete)}

/* ===== Packs: que se entienda que son 2 botellas ===== */
.pack figure{position:relative}
.pack-dos{position:absolute;right:14px;bottom:14px;z-index:2;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:var(--crema);color:var(--molcajete);font-family:var(--display);font-weight:800;font-size:.72rem;line-height:1;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 8px 20px #0007;transform:rotate(-10deg)}
.pack-dos b{font-size:2rem;line-height:.8;display:block;text-align:center;margin-bottom:-14px}
.pack-etq .tags{align-items:center}
.pack-etq .mas{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--crema);margin:0 2px}
.sabor-etq .cant{font-family:var(--texto);font-weight:800;font-size:.8em;margin-left:.5em;padding:.05em .4em;border-radius:3px;background:#0003;letter-spacing:0}
.amz-grid{columns:auto!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.resena-amz{margin:0}
.resena-amz.ancha{grid-column:1/-1}
@media (max-width:860px){.amz-grid{grid-template-columns:1fr}.resena-amz.ancha{overflow-x:auto}.resena-amz.ancha img{min-width:640px}}
.pack-dos{width:88px;height:88px;font-size:.62rem;letter-spacing:.06em}
.pack-dos b{font-size:2.1rem;margin-bottom:-18px}
.resena-amz.ancha img{max-width:900px}
.amz-mas{justify-self:start;margin-top:4px;color:inherit}
.amz-grid{grid-auto-flow:dense}
.resena-amz.ancha{grid-column:span 2}
.resena-amz.ancha img{max-width:none}
@media (max-width:860px){.resena-amz.ancha{grid-column:auto}}

/* ===== v30 ===== */
/* Contenido 10% más ancho */
:root{--max:1300px}

/* Título y subtítulo de sección apilados */
.cabeza{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px}
.cabeza > div{display:flex;flex-direction:column;gap:12px}
.cabeza .entrada{margin:0!important;max-width:60ch}
.cabeza .ver-mas{margin-top:4px}

/* Franja de compra con más punch */
.franja-claim{display:flex;flex-direction:column;gap:6px;font-size:clamp(1.8rem,3vw,2.4rem)!important;font-weight:800!important}
.franja-claim small{font-family:var(--texto);font-weight:600;font-size:.95rem;letter-spacing:0;opacity:.85}

/* Pasos: mazo de 3 tarjetas */
.pasos-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:center}
.pasos-sec .entrada{color:#FFE6B5d9}
.pasos-control{display:flex;align-items:center;gap:14px;margin-top:28px}
.pasos-puntos{display:flex;gap:8px}
.pasos-puntos button{all:unset;cursor:pointer;width:10px;height:10px;border-radius:99px;background:#FFE6B566;transition:width .3s,background .3s}
.pasos-puntos button.activo{width:28px;background:var(--crema)}
.pasos-mazo{position:relative;display:grid;justify-items:center;padding-top:44px}
.pasos-mazo .paso{grid-area:1/1;flex:none;width:min(360px,82vw);height:480px;cursor:pointer;opacity:1;transition:transform .7s cubic-bezier(.3,.9,.3,1),filter .6s,opacity .5s}
.pasos-mazo .paso[data-pos="0"]{z-index:3;transform:none;filter:none;box-shadow:0 30px 60px #0007}
.pasos-mazo .paso[data-pos="1"]{z-index:2;transform:translate(26px,-22px) rotate(4deg) scale(.95);filter:brightness(.6)}
.pasos-mazo .paso[data-pos="2"]{z-index:1;transform:translate(50px,-44px) rotate(8deg) scale(.9);filter:brightness(.4)}
.pasos-mazo .paso.sale{z-index:4;transform:translate(-120%,20px) rotate(-16deg);opacity:0}
.pasos-mazo .paso:hover[data-pos="0"]{transform:translateY(-6px) rotate(-1deg)}
@media (max-width:860px){.pasos-wrap{grid-template-columns:1fr}.pasos-mazo .paso{height:420px}.pasos-mazo .paso[data-pos="1"]{transform:translate(14px,-18px) rotate(3deg) scale(.95)}.pasos-mazo .paso[data-pos="2"]{transform:translate(26px,-34px) rotate(6deg) scale(.9)}}

/* Tarjetas de salsa y packs: entrada que se amplía y se acomoda + inclinación 3D */
@supports (animation-timeline: view()){
  .salsa.entra,.pack.entra{animation-name:entra-pop}
  @keyframes entra-pop{0%{translate:0 70px;scale:.86}65%{translate:0 0;scale:1.035}100%{translate:none;scale:1}}
}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s;transform-style:preserve-3d;position:relative}
.tilt.tilt-activo{transition:transform .08s linear,box-shadow .4s;box-shadow:0 40px 80px -30px #000c,0 0 0 1px #FFE6B522}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#ffffff2e,transparent 45%);mix-blend-mode:soft-light;z-index:5}
.tilt.tilt-activo::after{opacity:1}
.tilt figure img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tilt.tilt-activo figure img{transform:scale(1.05) translateZ(0)}

/* Carruseles: desvanecido en las orillas para que no se vean cortados */
.videos-fila,.reels-ig,.reels{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 96px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 96px),transparent 100%);padding-inline:48px 96px;margin-inline:-48px;scroll-padding-inline:48px;scrollbar-width:none}
.videos-fila::-webkit-scrollbar,.reels-ig::-webkit-scrollbar,.reels::-webkit-scrollbar{display:none}
@media (max-width:860px){.videos-fila,.reels-ig,.reels{padding-inline:16px 56px;margin-inline:-16px;scroll-padding-inline:16px;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),transparent 100%)}}

/* Reseñas: caja oscura (no blanca), logo de Amazon en blanco */
html.oscuro .clara-caja{background:var(--negro-3);color:var(--crema);box-shadow:inset 0 0 0 1px var(--linea)}
html.oscuro .testimonios:not(.seccion-clara) .amz-cabeza img,html.oscuro .clara-caja .amz-cabeza img{background:none;padding:0;filter:brightness(0) invert(1);height:28px}
html.oscuro .testimonios:not(.seccion-clara) .amz-mas,html.oscuro .clara-caja .amz-mas{color:var(--crema)}
.amz-mas{color:var(--molcajete)}

/* Pestaña de descuento más llamativa */
.pestana{display:flex!important;align-items:center;gap:10px;padding:.45em 1.2em .45em .5em!important;background:linear-gradient(135deg,var(--chile),var(--cintilla))!important;box-shadow:0 10px 30px -6px #F05238aa,0 0 0 2px #FFE6B555!important;animation:pestana-late 3s ease-in-out infinite;text-align:left}
.pestana[hidden]{display:none!important}
.pestana img{width:40px;height:52px;object-fit:cover;object-position:50% 40%;border-radius:10px;background:#000;transform:rotate(-8deg);box-shadow:0 4px 10px #0006}
.pestana span{display:flex;flex-direction:column;line-height:1.1}
.pestana b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.pestana small{font-family:var(--texto);font-weight:600;font-size:.75rem;opacity:.9}
@keyframes pestana-late{0%,80%,100%{transform:none}86%{transform:translateY(-4px) rotate(-1deg)}92%{transform:translateY(0) rotate(1deg)}}
@media (max-width:860px){.pestana{padding:.35em .9em .35em .4em!important}.pestana img{width:30px;height:40px}.pestana b{font-size:.9rem}.pestana small{font-size:.66rem}}

/* Salsas: "Sin receta, en un minuto" */
.trucos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.truco{position:relative;padding:32px 28px 30px;border-radius:var(--r-lg);background:var(--negro-3,#1C1613);color:var(--crema);box-shadow:inset 0 0 0 1px #FFE6B51a;overflow:hidden}
.truco::before{content:"";position:absolute;inset:auto -30% -60% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,#F0523855,transparent);pointer-events:none}
.truco.limonosa::before{background:radial-gradient(closest-side,#00AF7A44,transparent)}
.truco-n{display:block;font-family:var(--display);font-weight:800;font-size:3rem;line-height:1;color:#F05238;margin-bottom:18px}
.truco.limonosa .truco-n{color:#2FBF8A}
.truco h3{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.05;margin-bottom:10px}
.truco p{font-size:1rem;line-height:1.5;color:#FFE6B5cc}
@media (max-width:860px){.trucos{grid-template-columns:1fr}}

/* Tilt más suave */
.tilt{transition:transform .9s cubic-bezier(.16,1,.3,1),box-shadow .6s}
.tilt.tilt-activo{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .6s}
.tilt.tilt-activo figure img{transform:scale(1.03)}
/* Pestaña: solo un saludo al aparecer */
.pestana{animation:pestana-entra .9s cubic-bezier(.3,1.4,.5,1) 1 both!important}
@keyframes pestana-entra{0%{transform:translateY(30px) scale(.8);opacity:0}60%{transform:translateY(-6px) scale(1.04);opacity:1}100%{transform:none}}

/* ===== v33 ===== */
/* ¿Ya probaste la otra? — columna derecha */
.otra-salsa{grid-template-columns:200px 1fr 1fr!important;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.otra-salsa:hover{transform:translateY(-4px)}
.otra-uso{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-left:32px;border-left:1px solid #FFE6B533}
.otra-para{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.15;max-width:22ch}
.otra-uso .picor{margin:0}
.otra-cta{font-weight:700;border-bottom:2px solid var(--crema);padding-bottom:2px}
@media (max-width:860px){.otra-salsa{grid-template-columns:110px 1fr!important}.otra-uso{grid-column:1/-1;padding-left:0;border-left:0;border-top:1px solid #FFE6B533;padding-top:16px}}

/* Recetas: overlay más oscuro */
.cabecera-video::before{background:linear-gradient(90deg,#0B0807 0%,#0B0807e6 38%,#0B0807b3 62%,#0B080780 100%),linear-gradient(0deg,#0B0807e6,#0B080700 60%)!important}

/* Logo real dentro de títulos */
.titulo-logo .logo-titulo{display:inline-block;height:1.15em;width:auto;vertical-align:-.28em;margin-left:.15em}

/* ¿Con qué la comes? integrado al fondo */
.rueda-panel{background:transparent!important;box-shadow:inset 0 0 0 1px #FFE6B51f}
.rueda-panel::before{content:"";position:absolute;left:0;right:0;top:50%;height:58px;margin-top:-29px;background:linear-gradient(90deg,transparent,#F052381f,transparent);pointer-events:none}
.rueda-lista button{color:var(--crema);border-color:#FFE6B533}
.rueda-lista li.activa button{background:var(--chile);border-color:var(--chile);color:var(--crema)}

/* Historia viral: entrada animada */
[data-anima] h2 span{opacity:0;transform:translateY(60%) rotate(-2deg);filter:blur(6px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s}
[data-anima] h2 span:nth-child(2){transition-delay:.18s}
[data-anima] h2 span:nth-child(3){transition-delay:.36s}
[data-anima] .firma,[data-anima] .contador,[data-anima] .hero-ctas,[data-anima] .prueba-social{opacity:0;transform:translateY(24px);transition:opacity .8s ease .6s,transform .8s cubic-bezier(.16,1,.3,1) .6s}
[data-anima] .contador{transition-delay:.75s}[data-anima] .hero-ctas{transition-delay:.9s}[data-anima] .prueba-social{transition-delay:1.05s}
[data-anima] .reel{opacity:0;transform:translateY(80px) rotate(10deg) scale(.9);transition:opacity 1s ease .3s,transform 1.2s cubic-bezier(.16,1,.3,1) .3s}
[data-anima].visible h2 span,[data-anima].visible .firma,[data-anima].visible .contador,[data-anima].visible .hero-ctas,[data-anima].visible .prueba-social{opacity:1;transform:none;filter:none}
[data-anima].visible .reel{opacity:1;transform:rotate(3deg)}
[data-anima].visible .reel:hover{transform:rotate(0) scale(1.02);transition-delay:0s}
[data-anima].visible h2 .l3{animation:fenomeno 1.2s cubic-bezier(.3,1.5,.5,1) 1s both}
@keyframes fenomeno{0%{transform:scale(1)}40%{transform:scale(1.08) rotate(-2deg)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){[data-anima] *{opacity:1!important;transform:none!important;filter:none!important}}
.tilt,.tilt.tilt-activo{transition:box-shadow .8s ease!important}
.tilt.tilt-activo figure img{transform:scale(1.025)}
.tilt figure img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.cabecera-video::before{z-index:1!important}
.cabecera-video .wrap{z-index:2!important}
.cabecera-video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0B0807 0%,#0B0807eb 36%,#0B0807b8 62%,#0B080780 100%),linear-gradient(0deg,#0B0807e6,#0B080700 60%)}
.cabecera-video .icono-fondo{display:none}
.cabecera-video::after{background:linear-gradient(90deg,#0B0807f0 0%,#0B0807cc 38%,#0B080780 65%,#0B080733 100%),linear-gradient(0deg,#0B0807d9,#0B080700 55%)}

/* ===== v34 ===== */
.rueda-panel{box-shadow:none!important}
.cifras span{display:block;line-height:1.35;margin-top:8px}
.foto-real img{object-position:50% 25%}
/* Línea de tiempo animada */
[data-anima] .linea-tiempo::before{transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.65,0,.35,1) .2s}
[data-anima].visible .linea-tiempo::before{transform:none}
[data-anima] .linea-tiempo li{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);animation:none!important}
[data-anima] .linea-tiempo li:nth-child(1){transition-delay:.3s}[data-anima] .linea-tiempo li:nth-child(2){transition-delay:.65s}
[data-anima] .linea-tiempo li:nth-child(3){transition-delay:1s}[data-anima] .linea-tiempo li:nth-child(4){transition-delay:1.35s}
[data-anima].visible .linea-tiempo li{opacity:1;transform:none}
[data-anima] .lt-n{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
[data-anima].visible .lt-n{transform:none}
[data-anima].visible .linea-tiempo li:nth-child(3) .lt-n{animation:late-n 1.4s ease 2s 2}
@keyframes late-n{0%,100%{box-shadow:0 0 0 6px var(--negro,#0B0807)}50%{box-shadow:0 0 0 6px var(--negro,#0B0807),0 0 0 14px #E6612B55}}
@media (max-width:860px){[data-anima] .linea-tiempo::before{transform:scaleY(0);transform-origin:top}[data-anima].visible .linea-tiempo::before{transform:none}}
[data-anima] .linea-tiempo li:nth-child(1) .lt-n{transition-delay:.3s}[data-anima] .linea-tiempo li:nth-child(2) .lt-n{transition-delay:.65s}
[data-anima] .linea-tiempo li:nth-child(3) .lt-n{transition-delay:1s}[data-anima] .linea-tiempo li:nth-child(4) .lt-n{transition-delay:1.35s}
/* Videos de degustación más grandes: llenan el ancho y desbordan para que se vea el desvanecido */
.videos-fila{grid-auto-columns:clamp(250px,24vw,330px)}
.video-testimonio .pie{font-size:1rem}
@media (max-width:560px){.videos-fila{grid-auto-columns:72%}}
/* Reels de Instagram más grandes */
.reels-ig{grid-auto-columns:clamp(260px,25vw,340px)}
.reel-ig-titulo{font-size:1.5rem}
@media (max-width:560px){.reels-ig{grid-auto-columns:74%}}
/* Navbar: un solo camino de compra + acceso directo a Mercedes */
@media (min-width:901px){.nav #menu > li.solo-movil{display:none}}
.nav-mercedes{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-right:10px;box-shadow:0 0 0 2px var(--crema);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav-mercedes img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 20%}
.nav-mercedes svg{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--chile);color:var(--crema);box-sizing:border-box}
.nav-mercedes:hover{transform:scale(1.08) rotate(-4deg)}
@media (max-width:900px){.nav-mercedes{width:38px;height:38px;margin-right:6px}}

/* Tarjetas de salsa individual: imagen a sangre (sin marco) y más compacta, como los packs */
.salsa{padding:0;gap:0}
.salsa > a{display:block}
.salsa figure{border-radius:0;aspect-ratio:16/11}
.salsa figure img{object-position:50% 45%}
.salsa > div{padding:24px 28px 28px}
.salsa p{margin:8px 0 16px}
@media (max-width:860px){.salsa figure{aspect-ratio:4/3}.salsa > div{padding:20px 20px 24px}}
.salsa figure{aspect-ratio:4/3;background:#0d0b0a}
.salsa figure img{object-fit:contain;object-position:50% 50%}
.salsa figure{aspect-ratio:16/10}
.salsa .h3-etiqueta{gap:8px;margin:0 0 6px}
.salsa .h3-etiqueta img{width:150px}
.salsa > div{padding:20px 28px 24px}

/* Tarjetas de salsa en horizontal: botella completa a la izquierda, info a la derecha */
.duo-salsas{grid-template-columns:1fr 1fr}
.salsa{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:none;align-items:stretch}
.salsa > a{height:100%}
.salsa figure{aspect-ratio:auto;height:100%;min-height:100%}
.salsa figure img{object-fit:cover;object-position:50% 50%}
.salsa > div{padding:24px 24px 24px;display:flex;flex-direction:column;justify-content:center}
.salsa .h3-etiqueta img{width:130px}
.salsa .acciones{flex-wrap:wrap}
@media (max-width:1100px){.duo-salsas{grid-template-columns:1fr}}
@media (max-width:560px){.salsa{grid-template-columns:1fr}.salsa figure{aspect-ratio:4/3;height:auto}.salsa figure img{object-fit:contain;background:#0d0b0a}}
.salsa .picor{align-self:flex-start}
.salsa figure{background:#0d0b0a}
.salsa figure img{object-fit:contain}
/* Formularios conectados */
form.suscribir .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.error-form{display:none;font-weight:600;background:#00000033;border-radius:12px;padding:14px}
form.fallo .error-form{display:block}
form.enviado .error-form{display:none}
.nota-form{font-size:.9rem;opacity:.8;margin:0}