/* Tsanto Sazón — hoja de estilos
   Colores y tipografía según el Manual de Usos 2021:
   amarillo #FFDD00, rojo #F41B16, negro #222223, Rajdhani Bold. */

@font-face{
  font-family:"Rajdhani";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/rajdhani-bold.woff2") format("woff2");
}

:root{
  --yellow:#FFDD00;
  --red:#F41B16;
  --ghost:#F2CA03;
  --ink:#222223;
  --white:#fff;
  --muted:#57544f;
  --line:rgba(34,34,35,.16);
  --focus:var(--ink);

  --f-display:"Rajdhani","Arial Narrow","Roboto Condensed",sans-serif;
  --f-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --header-h:72px;
  --section-y:clamp(4rem,9vw,7.5rem);
  --r-sm:12px;--r-md:20px;--r-lg:32px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.65 var(--f-body);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:calc(var(--header-h) + 1rem)}

.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--yellow);color:var(--ink);padding:.7rem 1.1rem;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.skip:focus{top:1rem}
.icon{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Tipografía ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:700}
h1{font-size:clamp(3.25rem,8.4vw,7rem);line-height:.9;text-transform:uppercase}
h2{font-size:clamp(2.25rem,5vw,3.75rem);line-height:.98;text-transform:uppercase}
h3{font-size:1.75rem;line-height:1.05}
.lede{font-size:clamp(1.125rem,2vw,1.3rem);line-height:1.55;max-width:48ch}
.prose p+p{margin-top:1em}
.prose{max-width:60ch}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:700 1.2rem/1 var(--f-display);text-transform:uppercase;text-decoration:none;
  padding:.85em 1.5em;border:3px solid transparent;border-radius:999px;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn--red{background:var(--red);color:var(--white)}
.btn--red:hover{background:var(--ink)}
.btn--ink{background:var(--ink);color:var(--yellow)}
.btn--ink:hover{background:var(--red);color:var(--white)}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--yellow:hover{background:var(--white)}
.btn--line{border-color:var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--yellow)}
.btn--sm{font-size:1.05rem;padding:.7em 1.2em}

/* ---------- Cabecera ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--white);--focus:var(--yellow)}
.site-header .wrap{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h)}
.brand{display:block;line-height:0}
.brand img{height:46px;width:auto}
.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:.25rem}
.nav a:not(.btn){display:block;font:700 1.2rem/1 var(--f-display);text-transform:uppercase;text-decoration:none;color:var(--white);padding:.6rem .85rem;border-bottom:3px solid transparent}
.nav a:not(.btn):hover{color:var(--yellow)}
.nav a[aria-current]:not(.btn){border-bottom-color:var(--yellow)}
.nav .nav-cta{margin-left:.75rem}
.menu-btn{display:none;margin-left:auto;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:2px solid var(--white);border-radius:50%;color:var(--white);cursor:pointer}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}

@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .nav{margin-left:0}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;background:var(--ink);padding:.5rem var(--gutter) 1.75rem;border-top:1px solid rgba(255,255,255,.18)}
  .js .nav[data-open="true"]{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a:not(.btn){padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:1.5rem}
  .nav .nav-cta{margin:1.25rem 0 0}
  .nav .nav-cta .btn{width:100%}
}

/* ---------- Portada ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--yellow);--focus:var(--ink)}
.ghost{position:absolute;z-index:-1;left:-4vw;top:50%;transform:translateY(-50%) rotate(-7deg);
  font:700 clamp(15rem,42vw,38rem)/.78 var(--f-display);color:var(--ghost);white-space:pre;pointer-events:none;user-select:none}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:clamp(2rem,6vw,5rem);padding-block:clamp(2.5rem,6vw,5.5rem)}
.hero h1 span{display:block}
.hero .lede{margin-top:1.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero-media{position:relative;justify-self:center;width:min(100%,340px)}
.frame{position:relative;aspect-ratio:9/16;border:10px solid var(--red);border-radius:36px;overflow:hidden;background:var(--ink);box-shadow:14px 14px 0 var(--ink)}
.frame video,.frame img{width:100%;height:100%;object-fit:cover}
.hero-media .frame{transform:rotate(2.5deg)}
.media-toggle{position:absolute;right:1rem;bottom:1rem;width:46px;height:46px;border-radius:50%;border:0;background:var(--yellow);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.media-toggle .i-play{display:none}
.media-toggle[data-state="paused"] .i-play{display:block}
.media-toggle[data-state="paused"] .i-pause{display:none}
.media-toggle .icon{fill:currentColor;stroke:none;width:1.15rem;height:1.15rem}

@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr}
  .hero-media{width:min(70%,300px);margin-top:1rem}
}
@media (prefers-reduced-motion:no-preference){
  .hero h1 span{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
  .hero h1 span:nth-child(2){animation-delay:.09s}
  .hero h1 span:nth-child(3){animation-delay:.18s}
  .hero .lede,.hero-actions{animation:rise .7s .3s cubic-bezier(.2,.8,.2,1) both}
  .hero-media .frame{animation:settle .9s .15s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:translateY(40px) rotate(8deg)}to{opacity:1;transform:rotate(2.5deg)}}

/* ---------- Secciones ---------- */
.section{padding-block:var(--section-y)}
.section--ink{background:var(--ink);color:var(--white);--focus:var(--yellow)}
.section--yellow{background:var(--yellow)}
.section--red{background:var(--red);color:var(--white);--focus:var(--white)}
.section-head{display:grid;gap:1rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-head .lede{color:var(--muted)}
.section--ink .section-head .lede{color:rgba(255,255,255,.82)}
.section--yellow .section-head .lede{color:var(--ink)}

/* ---------- Productos ---------- */
.featured{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.2vw,2rem)}
.prod figure{border-radius:var(--r-md);overflow:hidden;background:#efede8}
.prod img{width:100%;aspect-ratio:4/5;object-fit:cover}
.prod-body{padding-top:1rem}
.prod h3{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.prod h3 small{font:700 1.1rem/1 var(--f-display);color:var(--muted)}
.prod h3::before{content:"";align-self:center;flex:none;width:.9rem;height:.9rem;border-radius:50%;background:var(--tag,var(--ink));order:-1;margin-right:-.15rem}
.prod h3 span{margin-right:auto}
.prod p{margin-top:.45rem;font-size:1rem;line-height:1.5;color:var(--muted)}
.prod .more{display:inline-block;margin-top:.7rem;font-weight:700;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--red)}
.prod .more:hover{text-decoration-color:var(--ink)}
.pantry-title{margin:clamp(3rem,6vw,5rem) 0 1.25rem}
.pantry{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.6vw,1.25rem)}
.pantry figure{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1;background:#efede8}
.pantry img{width:100%;height:100%;object-fit:cover}
.pantry figcaption{position:absolute;left:0;right:0;bottom:0;padding:3rem 1rem .9rem;background:linear-gradient(to top,rgba(34,34,35,.88),rgba(34,34,35,0));color:var(--white);font:700 1.5rem/1.05 var(--f-display)}

@media (max-width:980px){.featured{grid-template-columns:repeat(2,1fr)}.pantry{grid-template-columns:repeat(2,1fr)}}
@media (max-width:359px){.featured{grid-template-columns:1fr}}

/* ---------- Recetas (avance) ---------- */
.teaser{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.teaser .lede{margin-top:1.25rem;color:rgba(255,255,255,.82)}
.teaser .btn{margin-top:2rem}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,2vw,1.5rem)}
.reel{display:block;text-decoration:none}
.reel .frame{border-width:6px;border-radius:24px;box-shadow:none;border-color:var(--white);transition:border-color .15s}
.reel:hover .frame{border-color:var(--yellow)}
.play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center}
.play .icon{fill:currentColor;stroke:none;margin-left:3px}
.reel h3{margin-top:.8rem;font-size:1.4rem}
.reel p{font-size:.95rem;color:rgba(255,255,255,.7);line-height:1.4}
@media (max-width:900px){.teaser{grid-template-columns:1fr}}
@media (max-width:520px){.reels{grid-template-columns:repeat(3,minmax(0,1fr))}.reel h3{font-size:1.1rem}.reel p{display:none}.play{width:42px;height:42px}}

/* ---------- Nosotros ---------- */
.about{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.about figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg)}
.about h2{margin-bottom:1.5rem}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;margin-top:2.5rem}
.pillars div{border-top:4px solid var(--red);padding-top:.9rem}
.pillars h3{color:var(--red);margin-bottom:.4rem}
.pillars p{font-size:1rem;line-height:1.55}
@media (max-width:860px){.about{grid-template-columns:1fr}.about figure{max-width:460px}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}

/* ---------- Historieta ---------- */
.comic{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.75rem)}
.comic img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--white);box-shadow:6px 6px 0 var(--ink)}
.swipe-hint{display:none;margin-top:1rem;font-weight:700}
@media (max-width:720px){
  .comic{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding:0 var(--gutter) 14px;margin-inline:calc(-1*var(--gutter));scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch}
  .comic li{flex:0 0 82%;scroll-snap-align:start}
  .swipe-hint{display:block}
}

/* ---------- PedidosYa ---------- */
.order{display:grid;grid-template-columns:1fr minmax(0,380px);gap:clamp(2rem,6vw,5rem);align-items:center}
.order h2{margin-bottom:1.25rem}
.order .lede{color:var(--white);font-size:1.5rem;font-weight:700;line-height:1.35}
.order .btn{margin-top:2rem}
.order img{width:100%;border-radius:var(--r-lg);box-shadow:12px 12px 0 var(--ink)}
@media (max-width:760px){.order{grid-template-columns:1fr}.order figure{max-width:340px}}

/* ---------- Instagram ---------- */
.insta-box{min-height:220px}
.insta-link{display:inline-block;margin-top:1.5rem;font-weight:700;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--red)}

/* ---------- Contacto ---------- */
.contact-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.contact-list li{display:flex;gap:1rem;align-items:flex-start}
.contact-list .ico{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--yellow);color:var(--ink)}
.contact-list h3{font-size:1.5rem;margin-bottom:.2rem}
.contact-list a{text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--red)}
.contact-list address{font-style:normal}
.contact-list .alt{display:block;margin-top:.35rem}
.map{margin-top:clamp(2.5rem,5vw,4rem);height:clamp(300px,50vh,460px);background:#e9e7e2}
.map iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:900px){.contact-list{grid-template-columns:1fr}}

/* ---------- Pie ---------- */
.site-footer{background:var(--ink);color:var(--white);padding-block:clamp(3rem,6vw,4.5rem) 2rem;--focus:var(--yellow)}
.footer-top{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.footer-top img{width:min(260px,70vw);height:auto}
.tagline{margin-top:1rem;font:700 1.5rem/1.1 var(--f-display);color:var(--yellow);text-transform:uppercase}
.social{display:flex;gap:.75rem}
.social a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--white);color:var(--white);transition:background-color .15s,color .15s,border-color .15s}
.social a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;font-size:.95rem;color:rgba(255,255,255,.78)}
.legal a{text-underline-offset:3px}
@media (max-width:640px){.footer-top{grid-template-columns:1fr}}

/* ---------- Página de recetas ---------- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--yellow);padding-block:clamp(3rem,7vw,5.5rem)}
.page-hero .ghost{font-size:clamp(12rem,32vw,28rem);left:auto;right:-6vw}
.page-hero .lede{margin-top:1.25rem}
.page-hero .jump{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.recipe{padding-block:clamp(3rem,7vw,5.5rem)}
.recipe+.recipe{border-top:1px solid var(--line)}
.recipe-grid{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.recipe--flip .recipe-grid{grid-template-columns:1fr minmax(260px,360px)}
.recipe--flip .recipe-media{order:2}
.recipe-media .frame video{background:var(--ink)}
.recipe h2{margin-bottom:1.1rem}
.recipe .duration{margin-top:.9rem;font-weight:700;color:var(--muted);font-size:.98rem}
.uses{display:flex;align-items:center;gap:1rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.uses img{width:84px;height:105px;object-fit:cover;border-radius:var(--r-sm);background:#efede8}
.uses p{font-weight:700;line-height:1.35}
.uses small{display:block;font-weight:400;color:var(--muted)}
.recipe .btn{margin-top:1.5rem}
@media (max-width:820px){
  .recipe-grid,.recipe--flip .recipe-grid{grid-template-columns:1fr}
  .recipe--flip .recipe-media{order:0}
  .recipe-media{max-width:320px}
}

/* ---------- 404 ---------- */
.notfound{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:4rem;background:var(--yellow)}
.notfound img{margin-inline:auto;width:min(320px,70vw);margin-bottom:2rem}
.notfound p{margin:1rem auto 2rem;max-width:36ch}

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

/* =====================================================================
   Capa de relieve y movimiento
   ===================================================================== */

/* Botones tipo sticker */
.btn{--bs:var(--ink);box-shadow:4px 4px 0 var(--bs);transition:transform .15s,box-shadow .15s,background-color .15s,color .15s,border-color .15s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--bs)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--bs)}
.btn--line{box-shadow:none}
.btn--line:hover{transform:none;box-shadow:none}
.site-header .btn,.section--ink .btn{--bs:var(--red)}
.section--red .btn{--bs:var(--ink)}

/* Barra de avance de lectura */
.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.12)}
.progress span{display:block;height:100%;background:var(--yellow);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* Portada: sticker y parallax */
.hero .ghost{transform:translateY(-50%) rotate(-7deg) translateX(calc(var(--sy,0)*-.09px))}
.sticker{position:absolute;z-index:3;width:92px;height:auto;left:-38px;top:-34px;filter:drop-shadow(4px 4px 0 var(--ink));animation:wobble 4.5s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(9deg) translateY(-10px)}}

/* Cintas con el lema */
.tapes{position:relative;z-index:5;overflow:hidden;height:clamp(130px,17vw,200px);margin-top:calc(clamp(130px,17vw,200px)/-2);pointer-events:none}
.tape{position:absolute;left:-6vw;width:112vw;display:flex;overflow:hidden;white-space:nowrap;color:var(--yellow);font:700 clamp(1.5rem,3.2vw,2.5rem)/1 var(--f-display);text-transform:uppercase;padding-block:.5em}
.tape--ink{top:30%;background:var(--ink);transform:rotate(1.8deg)}
.tape--red{top:30%;background:var(--red);transform:rotate(-1.8deg);z-index:2;box-shadow:0 6px 0 rgba(34,34,35,.9)}
.tape-track{display:flex;flex:none;align-items:center;animation:tape 32s linear infinite}
.tape--ink .tape-track{animation-direction:reverse;animation-duration:40s}
.tape-track span{display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem}
.tape-track img{height:1.15em;width:auto}
@keyframes tape{to{transform:translateX(-50%)}}
.section--after-tapes{padding-top:calc(var(--section-y) - clamp(40px,6vw,70px))}

/* Entradas al hacer scroll */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(36px) rotate(var(--rv,0deg));transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*90ms)}
  .js .reveal.in{opacity:1;transform:none}
}

/* Productos con color de línea */
.prod figure{background:var(--tile,#efede8);isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.prod img{mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.prod:hover figure{transform:translateY(-6px);box-shadow:8px 8px 0 var(--ink)}
.prod:hover img{transform:scale(1.07) rotate(-1.5deg)}
.pantry figure{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.pantry img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pantry figure:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:6px 6px 0 var(--ink)}
.pantry figure:hover img{transform:scale(1.08)}

/* Recetas: carátulas inclinadas */
.reel .frame{transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .15s}
.reel:nth-child(1) .frame{transform:rotate(-3deg)}
.reel:nth-child(2) .frame{transform:rotate(2deg) translateY(14px)}
.reel:nth-child(3) .frame{transform:rotate(-2deg)}
.reel:hover .frame{transform:rotate(0) translateY(-8px)}
.play::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--yellow);animation:ping 2.2s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}

/* Cortes diagonales */
.slant-a{--cut:clamp(1.5rem,4.5vw,4rem);clip-path:polygon(0 var(--cut),100% 0,100% calc(100% - var(--cut)),0 100%);padding-block:calc(var(--section-y) + var(--cut))}
.slant-top{--cut:clamp(1.5rem,4.5vw,4rem);clip-path:polygon(0 0,100% var(--cut),100% 100%,0 100%);margin-top:calc(var(--cut)*-1);padding-top:calc(var(--section-y) + var(--cut))}

/* Nosotros: bloque de color e insignia giratoria */
.about figure{position:relative;isolation:isolate}
.about figure::after{content:"";position:absolute;inset:16px -16px -16px 16px;border-radius:var(--r-lg);background:var(--yellow);z-index:-1}
.badge{position:absolute;right:-22px;bottom:-30px;width:clamp(104px,14vw,140px);height:auto;animation:spin 20s linear infinite;filter:drop-shadow(4px 4px 0 var(--ink))}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:860px){.badge{right:-8px;bottom:-20px}.about figure::after{inset:12px -10px -12px 10px}}

/* PedidosYa: imagen flotando */
.order img.float{animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}

/* ---------- Historieta paso a paso ---------- */
.story{background:var(--yellow);position:relative;padding-bottom:clamp(2rem,6vw,4rem)}
.story-track{position:relative;height:calc(var(--n,6)*55vh + 100svh)}
.story-stage{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));display:flex;align-items:center;overflow:hidden}
.story-grid{display:grid;grid-template-columns:5fr 6fr;grid-template-areas:"head deck" "beat deck";align-content:center;column-gap:clamp(2rem,5vw,4.5rem);row-gap:1.75rem;width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.story-head{grid-area:head;align-self:end}
.story-head h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.story-head .lede{margin-top:.8rem}
.deck{grid-area:deck;position:relative;justify-self:center;width:min(100%,calc(100svh - var(--header-h) - 4rem),560px);aspect-ratio:1}
.card{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s;will-change:transform;--r:-3deg}
.card:nth-child(2){--r:2.5deg}.card:nth-child(3){--r:-2deg}.card:nth-child(4){--r:3deg}.card:nth-child(5){--r:-1.5deg}.card:nth-child(6){--r:2deg}
.card img{width:100%;height:100%;object-fit:cover;border-radius:12px;background:var(--white);box-shadow:10px 10px 0 var(--ink)}
.card[data-state="future"]{transform:translateY(115%) rotate(9deg);opacity:0}
.card[data-state="active"]{transform:rotate(calc(var(--r)*.4));opacity:1}
.card[data-state="past"]{transform:translate(calc(var(--d)*-5%),calc(var(--d)*-4%)) rotate(var(--r)) scale(calc(1 - var(--d)*.045));opacity:calc(1.25 - var(--d)*.3)}
.story-beat{grid-area:beat;align-self:start}
.beat-count{font-weight:700}
.beat-body{margin-top:.5rem;min-height:7.5rem}
.beat-body h3{font-size:clamp(1.8rem,3.2vw,2.5rem);text-transform:uppercase;line-height:1}
.beat-body p{margin-top:.5rem;max-width:36ch}
.beat-body.beat-in{animation:beat .5s cubic-bezier(.2,.8,.2,1)}
@keyframes beat{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.story-ui{display:flex;align-items:center;gap:1rem;margin-top:1.25rem}
.round{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;border:3px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background-color .15s,color .15s}
.round:hover{background:var(--ink);color:var(--yellow)}
.story-progress{display:flex;gap:6px;flex:1;max-width:260px}
.story-progress li{flex:1}
.story-progress button{display:block;width:100%;height:14px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.story-progress button::before{content:"";position:absolute;left:0;right:0;top:4px;height:6px;border-radius:3px;background:rgba(34,34,35,.22);transition:background-color .3s}
.story-progress button[aria-current="true"]::before,.story-progress button[data-done]::before{background:var(--ink)}
.story-cta{margin-top:1.25rem;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s,transform .4s}
.story-cta.show{opacity:1;transform:none;pointer-events:auto}
@media (max-width:820px){
  .story-grid{grid-template-columns:1fr;grid-template-areas:"head" "deck" "beat";row-gap:1rem}
  .story-head .lede{display:none}
  .story-head h2{font-size:1.9rem}
  .deck{width:min(100%,42svh);justify-self:center}
  .beat-body{min-height:6.2rem}
  .beat-body h3{font-size:1.6rem}
  .beat-body p{font-size:1rem;line-height:1.45}
  .story-ui{margin-top:.5rem}
  .story-cta{margin-top:.75rem}
}
/* Sin JS o con movimiento reducido: todas las viñetas en cuadrícula */
html:not(.js) .story-track{height:auto}
html:not(.js) .story-stage{position:static;height:auto;padding-block:var(--section-y)}
html:not(.js) .deck,.no-story .deck{width:100%;aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
html:not(.js) .card,.no-story .card{position:static;transform:none;opacity:1}
html:not(.js) .story-grid,.no-story .story-grid{grid-template-columns:1fr;grid-template-areas:"head" "deck"}
html:not(.js) .story-beat,.no-story .story-beat{display:none}
.no-story .story-track{height:auto}
.no-story .story-stage{position:static;height:auto;padding-block:var(--section-y)}
.no-story .deck{width:100%;aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:720px){html:not(.js) .deck,.no-story .deck{grid-template-columns:1fr 1fr}}

/* ---------- Instagram ---------- */
.insta{padding-top:calc(var(--section-y) - 1rem)}
.insta-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem;margin-bottom:2rem}
.handle{margin-top:.6rem;font:700 clamp(1.8rem,4vw,2.8rem)/1 var(--f-display);color:var(--yellow)}
.insta .lede{margin-top:.6rem;color:rgba(255,255,255,.82)}
.insta-box{min-height:280px;background:var(--white);color:var(--ink);border-radius:var(--r-lg);padding:clamp(.75rem,2vw,1.25rem);box-shadow:10px 10px 0 var(--red)}
.ig-mock{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.4rem,1vw,.75rem)}
.ig-mock a{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r-sm)}
.ig-mock img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ig-mock a:hover img{transform:scale(1.07)}
.ig-mock .icon{position:absolute;right:.6rem;top:.6rem;color:#fff;width:1.3rem;height:1.3rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.ig-note{margin-top:.9rem;font-size:.9rem;color:var(--muted);text-align:center}

@media (prefers-reduced-motion:reduce){
  .tape-track,.sticker,.badge,.order img.float,.play::after{animation:none!important}
}

/* ===== Ajustes: productos con borde de color, historieta más limpia ===== */
.prod figure{background:#fff;border:5px solid var(--tag,var(--ink));box-shadow:none}
.prod img{mix-blend-mode:normal}
.prod:hover figure{transform:translateY(-6px);box-shadow:8px 8px 0 var(--tag,var(--ink))}

.story-track{height:calc(var(--n,6)*42vh + 100svh)}
.card[data-state="active"]{transform:none;opacity:1}
.card[data-state="past"]{transform:translate(calc(var(--d)*-4%),calc(var(--d)*-3%)) rotate(var(--r)) scale(calc(1 - var(--d)*.04));opacity:1}
.card img{box-shadow:8px 8px 0 var(--ink)}
.story-foot{display:grid;margin-top:1.25rem}
.story-foot>*{grid-area:1/1;align-self:start}
.story-foot .story-cta{margin-top:0;justify-self:start}
.story-hint{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;transition:opacity .3s}
.story-hint .icon{animation:nudge 1.4s ease-in-out infinite}
.story-hint.gone{opacity:0}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.story-hint .icon{animation:none}}

/* Productos sobre fondo blanco */
.prod figure{background:#fff}

/* ===== Página de recetas: distribución para QR y navegación ===== */
.page-hero{padding-block:clamp(2rem,5vw,3.5rem)}
.page-hero .lede{margin-top:1rem;max-width:56ch}
.recipe-tabs{position:sticky;top:var(--header-h);z-index:40;background:var(--white);border-bottom:3px solid var(--ink)}
.recipe-tabs ul{display:flex}
.recipe-tabs li{flex:1}
.recipe-tabs a{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;padding:.5rem .75rem;font:700 1.25rem/1 var(--f-display);text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:6px solid transparent;margin-bottom:-3px;transition:background-color .15s}
.recipe-tabs a i{width:.85rem;height:.85rem;border-radius:50%;background:var(--tag)}
.recipe-tabs a:hover{background:rgba(34,34,35,.06)}
.recipe-tabs a[aria-current="true"]{border-bottom-color:var(--tag)}
.recipe{--hdr:calc(var(--header-h) + 59px);scroll-margin-top:var(--hdr);min-height:calc(100svh - var(--hdr));display:grid;align-content:center;padding-block:clamp(2rem,5vw,4rem)}
.recipe .frame{border-color:var(--tag)}
.recipe-grid{grid-template-columns:minmax(260px,340px) 1fr;align-items:center}
.recipe--flip .recipe-grid{grid-template-columns:1fr minmax(260px,340px)}
.recipe h2{font-size:clamp(2rem,4.2vw,3.25rem)}
.needs{margin-top:1.5rem}
.needs h3{font-size:1.4rem;margin-bottom:.5rem}
.needs li{position:relative;padding-left:1.4rem;line-height:1.5}
.needs li+li{margin-top:.25rem}
.needs li::before{content:"";position:absolute;left:0;top:.6em;width:.6rem;height:.6rem;border-radius:50%;background:var(--tag)}
.uses{margin-top:1.25rem;padding-top:1.25rem}
.recipe-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.recipe-actions .btn{margin-top:0}
.recipe-actions .btn[hidden]{display:none}
.recipe-actions .icon{width:1.2rem;height:1.2rem}
.next-link{display:inline-block;margin-top:1.5rem;font-weight:700;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--tag)}
.recipe:target .frame{animation:arrive 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes arrive{0%{transform:translateY(24px) scale(.97)}60%{transform:translateY(-4px) scale(1.01)}100%{transform:none}}
@media (max-width:820px){
  .recipe{min-height:0}
  .recipe-grid,.recipe--flip .recipe-grid{grid-template-columns:1fr;gap:1.5rem}
  .recipe-media{max-width:min(100%,280px);margin-inline:auto}
  .recipe-tabs a{font-size:1.05rem;gap:.4rem;padding-inline:.25rem}
}
@media (prefers-reduced-motion:reduce){.recipe:target .frame{animation:none}}


/* Historieta: el movimiento sigue al scroll (sin transiciones por tiempo) */
.card{transition:none;will-change:transform,opacity}
.js .story:not(.ready):not(.no-story) .card:not(:first-child){opacity:0}


/* ===== Nosotros: composición con año, texto principal y tarjetas ===== */
.about-sec{position:relative;isolation:isolate;overflow:hidden}
.year{position:absolute;z-index:-1;right:-1vw;top:2%;font:700 clamp(10rem,30vw,26rem)/.8 var(--f-display);color:rgba(255,221,0,.28);pointer-events:none;user-select:none}
.about{align-items:start}
.about figure{position:relative;margin-bottom:1.5rem}
.about h2{font-size:clamp(2.4rem,5.2vw,4.25rem);margin-bottom:1.5rem}
.about-lead{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.5;font-weight:700;max-width:34ch}
.about-more{margin-top:1.25rem;max-width:52ch;color:var(--muted)}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2.25rem);margin-top:clamp(2rem,5vw,3.5rem)}
.vm-card{border:4px solid var(--ink);border-radius:var(--r-md);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:8px 8px 0 var(--ink)}
.vm-card h3{font-size:clamp(2rem,3.4vw,2.75rem);text-transform:uppercase;margin-bottom:.6rem}
.vm-card p{font-size:1.1rem;line-height:1.55}
.vm-card--mision{background:var(--yellow);color:var(--ink)}
.vm-card--vision{background:var(--red);color:var(--white)}
@media (max-width:760px){.vm{grid-template-columns:1fr}.year{font-size:11rem;top:0}}

/* ===== Contacto: bloque de WhatsApp con fuego ===== */
.wa{display:grid;grid-template-columns:1fr minmax(220px,280px);gap:clamp(1.5rem,5vw,4rem);align-items:center;margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.5rem,4vw,3rem);background:var(--ink);color:var(--white);border-radius:var(--r-lg);box-shadow:10px 10px 0 var(--red);--focus:var(--yellow)}
.wa h3{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:.98;text-transform:uppercase}
.wa-copy p{margin-top:.9rem;max-width:38ch;font-size:1.15rem;color:rgba(255,255,255,.88)}
.wa .btn{--bs:var(--red);margin-top:1.5rem}
.wa-num{margin-top:1rem!important;font:700 1.4rem/1 var(--f-display);color:var(--yellow)!important}
.wa-media{justify-self:center;width:100%}
.wa-media .frame{border-color:var(--red);box-shadow:none;background:#000}
@media (max-width:760px){
  .wa{grid-template-columns:1fr}
  .wa-media .frame{aspect-ratio:16/10}
  .wa-media video{object-position:50% 55%}
}

.about-text{position:relative}
.year{top:auto;bottom:-3rem;right:-2vw;font-size:clamp(9rem,24vw,20rem)}
@media (max-width:760px){.year{font-size:9rem;bottom:-1.5rem}}

/* Las viñetas emergen desde el borde inferior del mazo */
.deck{clip-path:inset(-40px -40px -14px -40px)}
.no-story .deck,html:not(.js) .deck{clip-path:none}


/* Carátulas del inicio: el clic lleva a la receta, y la tarjeta lo dice */
.reel .frame{position:relative}
.dur{position:absolute;left:.6rem;top:.6rem;padding:.2rem .55rem;border-radius:6px;background:rgba(34,34,35,.82);color:var(--white);font:700 .95rem/1.2 var(--f-display);letter-spacing:.02em}
.reel-cta{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;padding:.5rem .95rem;border-radius:999px;background:var(--yellow);color:var(--ink);font:700 1.1rem/1 var(--f-display);text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);transition:background-color .15s,color .15s,gap .2s}
.reel-cta .icon{width:1.05rem;height:1.05rem}
.reel:hover .reel-cta,.reel:focus-visible .reel-cta{background:var(--red);color:var(--white);gap:.65rem}
@media (max-width:520px){
  .dur{left:.35rem;top:.35rem;font-size:.8rem;padding:.15rem .4rem}
  .reel-cta{bottom:.5rem;padding:.4rem;box-shadow:2px 2px 0 var(--ink)}
  .reel-cta{font-size:0;gap:0}
  .reel-cta .icon{width:1.1rem;height:1.1rem}
}