:root {
  --coral: #cf0719;
  --yellow: #ffdc00;
  --cream: #fff4dc;
  --ink: #3a160d;
  --green: #34653b;
  --orange: #f28a2d;
  --blue: #5ec0cf;
  --purple: #5c2a8f;
  --charcoal: #23201f;
  --flavor-bg: var(--yellow);
  --flavor-emphasis: var(--coral);
  --flavor-button: var(--ink);
  --flavor-button-text: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.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; }
.skip-link { position: fixed; z-index: 200; top: 1rem; left: 1rem; padding: .8rem 1rem; background: white; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 112px; padding: 24px clamp(24px,5vw,76px); display: flex; align-items: center; justify-content: space-between; color: white; transition: .35s ease; }
.site-header.scrolled { height: 82px; background: rgba(54,18,14,.92); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; color: white; }
.brand > img { display:block; width:clamp(118px,11vw,168px); height:78px; object-fit:contain; filter:drop-shadow(0 3px 7px rgba(0,0,0,.24)); }
.desktop-nav { display: flex; gap: 34px; font-size: .86rem; font-weight: 700; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content:""; position:absolute; left:0; bottom:-7px; width:100%; height:2px; background:white; transform:scaleX(0); transition:.25s; }
.desktop-nav a:hover::after { transform:scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 0 23px; border: 2px solid currentColor; border-radius: 999px; font-weight: 800; transition: transform .25s, box-shadow .25s, background .25s; }
.pill:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 rgba(54,18,14,.18); }
.pill-light { min-height: 42px; }
.pill-coral { background: var(--coral); color: white; border-color: var(--coral); }
.pill-dark { background: var(--ink); color: white; border-color: var(--ink); }
.menu-toggle { position: relative; z-index: 3; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--coral); display: grid; place-content: center; gap: 4px; cursor: pointer; }
.menu-toggle span:not(.sr-only) { display: block; width: 19px; height: 2px; background: white; transition: .3s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-panel { position: fixed; top: 0; right: 0; width: min(520px,100%); height: 100vh; padding: 125px clamp(28px,8vw,68px) 38px; background: var(--ink); display: flex; flex-direction: column; gap: 0; transform: translateX(102%); transition: .55s cubic-bezier(.22,.8,.2,1); overflow-y:auto; }
.menu-panel.open { transform: none; }
.menu-panel a { position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 8px; border-bottom:1px solid rgba(255,255,255,.2); font:clamp(1.55rem,5vw,2.35rem)/1 "Paytone One"; transition:color .25s, padding .25s, background .25s; }
.menu-panel a::after { content:"→"; flex:0 0 auto; width:36px; height:36px; display:grid; place-items:center; border:2px solid var(--yellow); border-radius:50%; color:var(--yellow); font:1.05rem/1 "DM Sans",sans-serif; }
.menu-panel a:hover { padding-left:18px; color:var(--yellow); background:rgba(255,255,255,.04); }
.menu-panel p { margin-top: auto; color: #eabbb3; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: white; overflow: hidden; }
.hero-media { position: absolute; inset: -5%; background: url("assets/la-sabrosa-hero.png") 50% center/cover no-repeat; transform: scale(1.06); animation: hero-in 1.8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(26,5,3,.73) 0%,rgba(26,5,3,.18) 55%,transparent 75%); }
.hero-copy { position: relative; z-index: 2; width: min(690px,90%); margin-left: clamp(24px,8vw,130px); padding-top: 70px; }
.eyebrow { margin: 0 0 18px; text-transform: uppercase; letter-spacing: .18em; font-weight: 800; font-size: .72rem; }
h1,h2,h3 { font-family: "Paytone One", sans-serif; font-weight: 400; letter-spacing: -.055em; margin: 0; }
h1 { font-size: clamp(4.2rem,8vw,8.6rem); line-height: .82; text-transform: uppercase; }
h1 em,h2 em { color: var(--yellow); font-style: normal; }
.hero-text { max-width: 500px; margin: 28px 0; font-size: clamp(1rem,1.5vw,1.25rem); line-height: 1.5; }
.scroll-cue { position: absolute; z-index: 2; right: clamp(24px,4vw,60px); bottom: 40px; display: flex; align-items: center; gap: 12px; font-size: .65rem; letter-spacing: .18em; writing-mode: vertical-rl; }
.scroll-cue span { width: 1px; height: 52px; background: white; animation: scroll-pulse 1.8s infinite; }

.flavors { position: relative; width:100vw; min-width:100vw; margin-left:calc(50% - 50vw); min-height: 970px; padding: 140px clamp(24px,7vw,110px) 100px; background: var(--flavor-bg); box-shadow:0 0 0 100vmax var(--flavor-bg); clip-path:inset(0 -100vmax); overflow: hidden; transition: background .45s ease, box-shadow .45s ease; }
.section-curve::before { content:""; position:absolute; top:-68px; left:-5%; width:110%; height:130px; background:var(--flavor-bg); border-radius:50% 50% 0 0; transition: background .45s ease; }
.section-heading { position: relative; z-index:1; }
.flavors .section-heading h2 { color:#fff4dc; }
.eyebrow.dark { color: var(--flavor-emphasis); transition: color .3s ease; }
h2 { font-size: clamp(4rem,8vw,8.4rem); line-height: .84; text-transform: uppercase; }
.flavors h2 em,.story h2 em,.find h2 em { color: var(--flavor-emphasis); transition: color .3s ease; }
.flavor-stage { position: relative; z-index:2; width:min(1200px,calc(100vw - 48px)); min-height: 540px; display:grid; grid-template-columns: 1fr 1.2fr .15fr; align-items:center; margin: 10px auto 0; }
.flavor-copy { max-width: 340px; padding-top: 70px; }
.flavor-number { font-weight:800; font-size:.75rem; letter-spacing:.15em; }
.flavor-kicker { margin:35px 0 5px; text-transform:uppercase; color:var(--flavor-emphasis); font-weight:800; font-size:.76rem; letter-spacing:.15em; transition: color .3s ease; }
.flavor-copy h3 { font-size:clamp(4rem,7vw,7rem); line-height:.78; text-transform:uppercase; }
.flavor-description { line-height:1.6; }
.text-link { display:inline-flex; gap:25px; padding-bottom:7px; border-bottom:2px solid; color:var(--flavor-button); font-weight:800; transition: color .3s ease; }
.bag-wrap { position:relative; justify-self:center; width:min(620px,100%); height:570px; display:grid; place-items:center; isolation:isolate; }
.product-splash { position:absolute; z-index:1; left:50%; top:50%; width:min(760px,118%); height:auto; opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.18); transform-origin:center; filter:drop-shadow(0 20px 24px rgba(0,0,0,.3)); }
.splash-fire { width:min(790px,124%); filter:saturate(1.25) contrast(1.08) drop-shadow(0 22px 28px rgba(255,75,0,.32)); mix-blend-mode:multiply; }
.bag-wrap.accent-black .splash-black,
.bag-wrap.accent-fire .splash-fire { opacity:.95; animation:splash-bloom .7s cubic-bezier(.15,.8,.2,1) both; }
.bag { position:relative; z-index:2; width:290px; height:420px; padding:78px 28px 30px; color:var(--ink); text-align:center; background:linear-gradient(105deg,#d82725 0%,#fb5a4e 38%,#e23a32 72%,#b81f20 100%); clip-path:polygon(3% 2%,97% 0,100% 100%,0 98%); filter:drop-shadow(0 28px 24px rgba(54,18,14,.28)); transform:rotate(2deg); transition:.5s cubic-bezier(.2,.8,.2,1); }
.bag-yellow { background:linear-gradient(105deg,#e2a500 0%,#ffdc00 32%,#ffc514 70%,#d89500 100%); }
.bag-photo { width:min(420px,92%); aspect-ratio:1122 / 1402; height:auto; padding:0; background:none; clip-path:none; filter:drop-shadow(0 30px 28px rgba(54,18,14,.24)); transform:rotate(-2deg); }
.bag-photo img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; pointer-events:none; }
.bag::before,.bag::after { content:""; position:absolute; left:0; width:100%; height:19px; background:repeating-linear-gradient(0deg,rgba(70,0,0,.25) 0 2px,transparent 2px 5px); }
.bag::before { top:8px; } .bag::after { bottom:8px; }
.bag-photo::before,.bag-photo::after { display:none; }
.bag-seal { position:absolute; top:47px; left:50%; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; border:3px solid rgba(207,7,25,.22); }
.bag small { font-weight:800; letter-spacing:.16em; }
.bag strong { display:flex; align-items:center; justify-content:center; margin:18px -5px 12px; min-height:145px; padding:10px; background:rgba(255,255,255,.92); border-radius:50% 50% 24% 24%; }
.bag strong img { width:100%; max-height:125px; object-fit:contain; }
.bag i { display:block; width:70px; height:2px; margin:0 auto 12px; background:var(--coral); }
.bag b { display:block; color:var(--coral); font-size:.72rem; letter-spacing:.08em; }
.bag-chip,.orbit-chip { position:absolute; width:92px; height:82px; border-radius:12px; clip-path:polygon(50% 0,100% 100%,0 100%); background:repeating-linear-gradient(105deg,#e9ae2f 0 3px,#f8d460 3px 8px); border:0; box-shadow:inset -8px -8px 12px rgba(156,96,15,.2),0 8px 14px rgba(54,18,14,.2); }
.bag-shadow { position:absolute; bottom:35px; width:310px; height:45px; border-radius:50%; background:rgba(54,18,14,.25); filter:blur(14px); }
.orbit-chip { z-index:3; }
.chip-one { left:10%; top:24%; transform:rotate(25deg); animation:float 4s ease-in-out infinite; }
.chip-two { right:8%; top:16%; transform:rotate(-18deg) scale(.7); animation:float 3.6s .4s ease-in-out infinite; }
.chip-three { right:10%; bottom:18%; transform:rotate(32deg) scale(.6); animation:float 4.4s .8s ease-in-out infinite; }
.flavor-accent { position:absolute; z-index:3; display:block; width:150px; height:auto; opacity:0; pointer-events:none; filter:drop-shadow(0 18px 16px rgba(0,0,0,.22)); transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.accent-salsa { left:5%; bottom:1%; z-index:6; width:193px; transform:rotate(-28deg) scale(.88); transform-origin:center; }
.accent-lime { left:4%; top:8%; z-index:5; transform:rotate(-22deg) scale(.78); filter:saturate(1.2) drop-shadow(0 18px 16px rgba(0,0,0,.22)); }
.accent-chile { right:5%; bottom:12%; z-index:5; transform:rotate(18deg) scale(.84); }
.accent-chile-top { left:1%; top:3%; right:auto; bottom:auto; z-index:6; width:118px; transform:rotate(-16deg) scale(.62); }
.accent-totopo { z-index:5; width:110px; border-radius:50%; transform-origin:center; }
.accent-totopo-one { left:18%; top:5%; transform:rotate(-18deg) scale(.72); }
.accent-totopo-two { right:13%; top:8%; width:88px; transform:rotate(22deg) scale(.58); }
.accent-totopo-three { left:29%; bottom:9%; width:78px; transform:rotate(36deg) scale(.5); }
.accent-green-tomatillo { left:31%; top:58%; z-index:4; width:126px; transform:translate(-50%,-50%) rotate(-8deg); filter:saturate(1.08) drop-shadow(0 16px 14px rgba(0,0,0,.18)); }
.accent-green-molcajete { left:2%; bottom:2%; z-index:5; width:247px; transform:rotate(-8deg) scale(.86); }
.accent-green-cilantro { right:1%; top:5%; z-index:5; width:148px; transform:rotate(18deg) scale(.74); filter:saturate(1.12) drop-shadow(0 18px 16px rgba(0,0,0,.22)); }
.accent-green-ajo { left:4%; top:10%; z-index:5; width:118px; transform:rotate(-18deg) scale(.68); }
.accent-green-jalapeno { z-index:5; width:112px; transform-origin:center; filter:saturate(1.08) drop-shadow(0 18px 16px rgba(0,0,0,.22)); }
.accent-green-jalapeno-one { right:8%; bottom:14%; transform:rotate(18deg) scale(.72); }
.accent-green-jalapeno-two { left:24%; top:1%; width:146px; transform:rotate(-16deg) scale(.54); }
.accent-green-jalapeno-three { right:18%; top:4%; width:146px; transform:rotate(10deg) scale(.48); }
.accent-fire-lime { left:2%; top:8%; z-index:5; width:170px; transform:rotate(-21deg) scale(.76); filter:saturate(1.18) drop-shadow(0 18px 16px rgba(0,0,0,.24)); }
.accent-fire-chile-long { right:0; top:1%; z-index:5; width:145px; transform:rotate(25deg) scale(.82); }
.accent-fire-chile-a { left:12%; bottom:8%; z-index:5; width:112px; transform:rotate(-18deg) scale(.65); }
.accent-fire-chile-b { right:12%; bottom:7%; z-index:5; width:92px; transform:rotate(18deg) scale(.58); }
.accent-fire-chile-c { left:29%; top:0; z-index:5; width:82px; transform:rotate(8deg) scale(.52); }
.accent-churritos-chile { z-index:5; width:132px; transform-origin:center; filter:saturate(1.12) drop-shadow(0 18px 16px rgba(0,0,0,.22)); }
.accent-churritos-chile-one { left:4%; top:12%; transform:rotate(-24deg) scale(.78); }
.accent-churritos-chile-two { right:4%; bottom:13%; transform:rotate(24deg) scale(.68); }
.accent-churritos-lime { left:10%; bottom:10%; z-index:5; width:165px; transform:rotate(-18deg) scale(.72); filter:saturate(1.2) drop-shadow(0 18px 16px rgba(0,0,0,.22)); }
.bag-wrap.has-image-accents .orbit-chip { opacity:0; }
.bag-wrap.accent-green .accent-green-molcajete,
.bag-wrap.accent-green .accent-green-cilantro,
.bag-wrap.accent-green .accent-green-ajo,
.bag-wrap.accent-green .accent-green-tomatillo,
.bag-wrap.accent-green .accent-green-jalapeno { opacity:1; }
.bag-wrap.accent-black .accent-salsa,
.bag-wrap.accent-black .accent-lime,
.bag-wrap.accent-black .accent-chile,
.bag-wrap.accent-black .accent-chile-top,
.bag-wrap.accent-black .accent-totopo { opacity:1; }
.bag-wrap.accent-fire .accent-fire-lime,
.bag-wrap.accent-fire .accent-fire-chile-long,
.bag-wrap.accent-fire .accent-fire-chile-a,
.bag-wrap.accent-fire .accent-fire-chile-b,
.bag-wrap.accent-fire .accent-fire-chile-c { opacity:1; }
.bag-wrap.accent-churritos .accent-churritos-chile,
.bag-wrap.accent-churritos .accent-churritos-lime { opacity:1; }
.bag-wrap.accent-black .accent-salsa { animation:float 5.9s .1s ease-in-out infinite; }
.bag-wrap.accent-black .accent-lime { animation:float 7.2s ease-in-out infinite; }
.bag-wrap.accent-black .accent-chile { animation:float 3.4s .2s ease-in-out infinite; }
.bag-wrap.accent-black .accent-chile-top { animation:float 4.8s .35s ease-in-out infinite; }
.bag-wrap.accent-black .accent-totopo-one { animation:float 6.4s .15s ease-in-out infinite; }
.bag-wrap.accent-black .accent-totopo-two { animation:float 4.2s .55s ease-in-out infinite; }
.bag-wrap.accent-black .accent-totopo-three { animation:float 8.1s .3s ease-in-out infinite; }
.bag-wrap.accent-green .accent-green-molcajete { animation:float 6.2s .2s ease-in-out infinite; }
.bag-wrap.accent-green .accent-green-cilantro { animation:float 7.5s .1s ease-in-out infinite; }
.bag-wrap.accent-green .accent-green-ajo { animation:float 4.4s .35s ease-in-out infinite; }
.bag-wrap.accent-green .accent-green-tomatillo { animation:float 5.8s .25s ease-in-out infinite; }
.bag-wrap.accent-green .accent-green-jalapeno-one { animation:float 5.2s .2s ease-in-out infinite; }
.bag-wrap.accent-green .accent-green-jalapeno-two { animation:float 6.9s .45s ease-in-out infinite; }
.bag-wrap.accent-green .accent-green-jalapeno-three { animation:float 3.9s .15s ease-in-out infinite; }
.bag-wrap.accent-fire .accent-fire-lime { animation:float 6.8s ease-in-out infinite; }
.bag-wrap.accent-fire .accent-fire-chile-long { animation:float 4.7s .2s ease-in-out infinite; }
.bag-wrap.accent-fire .accent-fire-chile-a { animation:float 5.4s .35s ease-in-out infinite; }
.bag-wrap.accent-fire .accent-fire-chile-b { animation:float 3.9s .15s ease-in-out infinite; }
.bag-wrap.accent-fire .accent-fire-chile-c { animation:float 7.5s .5s ease-in-out infinite; }
.bag-wrap.accent-churritos .accent-churritos-chile-one { animation:float 4.8s .15s ease-in-out infinite; }
.bag-wrap.accent-churritos .accent-churritos-chile-two { animation:float 6.4s .45s ease-in-out infinite; }
.bag-wrap.accent-churritos .accent-churritos-lime { animation:float 7.2s .25s ease-in-out infinite; }
.flavor-palette { display:flex; flex-direction:column; gap:13px; align-items:center; }
.flavor-palette span { width:13px; height:13px; border-radius:50%; background:var(--coral); border:2px solid transparent; }
.flavor-palette span:nth-child(2){background:var(--green)} .flavor-palette span:nth-child(3){background:var(--orange)} .flavor-palette span:nth-child(4){background:var(--blue)}
.flavor-palette .active { outline:2px solid var(--ink); outline-offset:4px; }
.circle-button { position:absolute; z-index:5; top:50%; width:58px; height:58px; border:0; border-radius:50%; background:var(--flavor-button); color:var(--flavor-button-text); font-size:1.5rem; cursor:pointer; transition:.25s; }
.circle-button:hover { transform:scale(1.1); background:var(--flavor-emphasis); }
.prev { left:-65px; } .next { right:-65px; }

.ticker { overflow:hidden; padding:20px 0; background:var(--ink); color:var(--yellow); transform:rotate(-1deg) scale(1.02); }
.ticker div { display:flex; width:max-content; align-items:center; gap:32px; animation:marquee 22s linear infinite; }
.ticker span { font:2rem "Paytone One"; white-space:nowrap; }

.product-line { padding:130px clamp(24px,4vw,70px); background:#f3f0e4; color:var(--ink); }
.product-line .section-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:40px; max-width:1500px; margin:0 auto 55px; }
.product-line .section-heading .eyebrow { grid-column:1/-1; margin-bottom:-20px; color:var(--coral); }
.product-line .section-heading h2 { color:var(--ink); font-size:clamp(4rem,7vw,8rem); }
.product-line-intro { max-width:520px; margin:0 0 8px; font-size:1.15rem; line-height:1.65; }
.product-mosaic { display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr; grid-template-rows:360px 360px; gap:20px; max-width:1500px; margin:auto; }
.product-tile { position:relative; min-width:0; padding:0; overflow:hidden; border:0; border-radius:3px; color:white; background:var(--coral); text-align:left; cursor:pointer; isolation:isolate; }
.product-tile::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(42,10,5,.82) 100%); transition:.35s ease; }
.product-tile:hover::after { background:linear-gradient(180deg,rgba(255,220,0,.08),rgba(42,10,5,.9)); }
.product-tile img { position:absolute; inset:0; width:100%; height:100%; padding:24px; object-fit:contain; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.product-tile:hover img { transform:scale(1.06) rotate(-1deg); }
.product-tile > span { position:absolute; z-index:2; left:28px; right:90px; bottom:25px; }
.product-tile small { display:block; margin-bottom:7px; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:800; }
.product-tile strong { display:block; font:clamp(2rem,3vw,3.6rem)/.88 "Paytone One",sans-serif; text-transform:uppercase; letter-spacing:-.04em; }
.product-tile b { position:absolute; z-index:2; right:24px; bottom:25px; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:var(--yellow); font-size:1.5rem; transition:transform .3s; }
.product-tile:hover b { transform:translateX(5px); }
.product-tile-tostadas { grid-row:1/3; background:#e8a735; }
.product-tile-tostadas-10 { grid-column:2; grid-row:1; background:#e4a22d; }
.product-tile-tostadas-25 { grid-column:2; grid-row:2; background:#f07b25; }
.product-tile-totopos { grid-column:3; grid-row:1; background:#cf0719; }
.product-tile-tortillas { grid-column:3; grid-row:2; background:#436c39; }
.product-tile-totopitos { grid-column:4; grid-row:1; background:#ef6c31; }
.product-tile-kilo { grid-column:4; grid-row:2; background:#312724; }
.product-modal { width:min(1050px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:30px; color:var(--ink); background:#fff8e8; box-shadow:0 35px 90px rgba(35,10,5,.45); overflow:hidden; }
.product-modal[open] { display:grid; grid-template-columns:.9fr 1.1fr; animation:modal-in .38s cubic-bezier(.2,.8,.2,1); }
.product-modal::backdrop { background:rgba(35,10,5,.72); backdrop-filter:blur(8px); }
.product-modal-close { position:absolute; z-index:3; top:18px; right:18px; width:46px; height:46px; border:0; border-radius:50%; color:white; background:var(--coral); font-size:1.8rem; line-height:1; cursor:pointer; }
.product-modal-visual { min-height:590px; display:grid; place-items:center; padding:45px; background:var(--yellow); }
.product-modal-visual img { width:100%; height:500px; object-fit:contain; filter:drop-shadow(0 24px 22px rgba(58,22,13,.2)); }
.product-modal-copy { align-self:center; padding:70px 60px; }
.product-modal-copy .eyebrow { color:var(--coral); }
.product-modal-copy h2 { margin-bottom:22px; font-size:clamp(3rem,5vw,5.5rem); color:var(--ink); }
.product-modal-copy > p:not(.eyebrow) { font-size:1.08rem; line-height:1.65; }
.product-specs { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 36px; }
.product-specs span { padding:12px 16px; border:2px solid var(--coral); border-radius:999px; color:var(--coral); font-weight:800; }
@keyframes modal-in { from { opacity:0; transform:translateY(24px) scale(.97); } }

.story { position:relative; padding:140px clamp(24px,8vw,130px); background:
  radial-gradient(circle at 12% 18%, rgba(255,220,0,.45), transparent 20%),
  linear-gradient(180deg, #fff7e8 0%, #fff1cf 100%);
}
.story::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 46px, rgba(207,7,25,.035) 46px 47px); pointer-events:none; }
.story-intro { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; align-items:end; gap:22px 40px; }
.story-intro .eyebrow { grid-column:1 / -1; margin-bottom:-5px; }
.story-toggle { align-self:end; width:84px; height:84px; display:grid; place-items:center; border:0; border-radius:50%; color:white; background:var(--coral); font:3.2rem/1 "DM Sans",sans-serif; cursor:pointer; box-shadow:0 14px 0 rgba(58,22,13,.12); transition:transform .3s, background .3s, box-shadow .3s; }
.story-toggle:hover { transform:translateY(-4px) rotate(3deg); background:var(--ink); box-shadow:0 18px 0 rgba(58,22,13,.1); }
.story-toggle span[aria-hidden="true"] { transform:translateY(-2px); transition:transform .4s ease; }
.story-toggle[aria-expanded="true"] span[aria-hidden="true"] { transform:translateY(-2px) rotate(180deg); }
.story-content { position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,90px); align-items:start; max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .75s cubic-bezier(.2,.8,.2,1), opacity .45s ease, margin-top .6s ease; }
.story-content.is-open { opacity:1; margin-top:70px; }
.story-content[hidden] { display:none; }
.story-copy,
.story-aside { position:relative; z-index:1; }
.story-copy > p:not(.eyebrow) { max-width:760px; font-size:1.08rem; line-height:1.78; margin:0 0 18px; }
.story-close { font-weight:700; color:var(--coral); }
.story-aside { display:grid; gap:26px; }
.founder-card { padding:32px; background:linear-gradient(160deg, var(--coral), #9f0312); color:white; border-radius:28px; box-shadow:18px 18px 0 rgba(58,22,13,.12); }
.founder-card span { display:block; margin-bottom:10px; text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; font-weight:800; color:#ffd866; }
.founder-card h3 { font-size:clamp(2.3rem,4vw,3.6rem); line-height:.88; text-transform:uppercase; margin-bottom:12px; }
.founder-card p { margin:0; line-height:1.65; color:#fff2cf; }
.story-timeline { display:grid; gap:16px; }
.story-timeline div { padding:22px 24px; background:rgba(255,255,255,.78); border:1px solid rgba(58,22,13,.08); border-radius:22px; box-shadow:0 10px 30px rgba(58,22,13,.06); }
.story-timeline strong { display:block; margin-bottom:8px; color:var(--coral); font:1.65rem/.95 "Paytone One", sans-serif; letter-spacing:-.03em; text-transform:uppercase; }
.story-timeline p { margin:0; line-height:1.6; }
.story-character { justify-self:end; width:min(360px,68%); margin-top:10px; overflow:visible; filter:drop-shadow(0 24px 24px rgba(58,22,13,.18)); }
.story-character img { display:block; width:100%; max-width:none; transform:none; }

.moments { padding:130px clamp(24px,5vw,80px); color:white; background:var(--coral); }
.moments-title { text-align:center; margin-bottom:70px; }
.moments-title h2 em { color:var(--yellow); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1380px; margin:auto; }
.moment-card { position:relative; min-height:560px; padding:25px; overflow:hidden; border-radius:18px; color:var(--ink); transition:transform .35s; }
.moment-card:hover { transform:translateY(-12px) rotate(.6deg); }
.moment-card > span { font-weight:800; }
.moment-card h3 { position:absolute; left:28px; bottom:28px; font-size:3.5rem; line-height:.83; text-transform:uppercase; }
.moment-card a { position:absolute; right:25px; bottom:25px; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; border:2px solid; font-size:1.4rem; }
.card-game { background:var(--yellow); } .card-road { background:var(--blue); } .card-party { background:#f6a1af; }
.card-art { position:absolute; inset:90px 10% 170px; }
.card-art i { position:absolute; display:block; }
.card-game i { width:130px; height:180px; background:var(--cream); border:8px solid var(--ink); border-radius:16px; box-shadow:12px 12px 0 var(--coral); }
.card-game i:nth-child(1){left:5%;transform:rotate(-16deg)} .card-game i:nth-child(2){left:34%;top:15%;transform:rotate(6deg)} .card-game i:nth-child(3){right:0;transform:rotate(18deg)}
.card-road i { width:110px; height:110px; border-radius:50%; background:#f5d072; box-shadow:inset 0 0 0 12px #e2ae43; }
.card-road i:nth-child(1){left:10%;top:30%}.card-road i:nth-child(2){right:8%;top:5%;transform:scale(.7)}.card-road i:nth-child(3){right:22%;bottom:0;transform:scale(1.25)}
.card-party i { width:18px; height:160px; background:var(--yellow); border-radius:10px; transform-origin:bottom; left:50%; bottom:10%; }
.card-party i:nth-child(1){transform:rotate(-42deg)}.card-party i:nth-child(2){transform:rotate(0)}.card-party i:nth-child(3){transform:rotate(42deg)}

.find { position:relative; min-height:780px; padding:100px clamp(24px,7vw,110px); display:grid; grid-template-columns:minmax(520px,1.15fr) minmax(360px,.85fr); align-items:center; gap:clamp(45px,7vw,110px); background:var(--yellow); overflow:hidden; }
.find-products { position:relative; width:min(720px,100%); height:600px; justify-self:center; isolation:isolate; }
.find-product { position:absolute; display:block; width:220px; height:360px; object-fit:contain; filter:drop-shadow(0 22px 18px rgba(58,22,13,.24)); transform-origin:center bottom; animation:product-float 5.8s ease-in-out infinite; }
.find-product-totopos { z-index:5; left:50%; bottom:20px; width:280px; height:500px; transform:translateX(-50%); }
.find-product-fuego { z-index:4; left:8%; bottom:45px; width:245px; height:435px; transform:rotate(-8deg); animation-delay:-1.4s; }
.find-product-totopitos { z-index:4; right:6%; bottom:48px; width:245px; height:410px; transform:rotate(7deg); animation-delay:-2.7s; }
.find-product-tortillas { z-index:2; left:0; top:12px; width:205px; height:340px; transform:rotate(-11deg); animation-delay:-3.3s; }
.find-product-tostadas { z-index:3; left:25%; top:0; width:205px; height:345px; transform:rotate(-4deg); animation-delay:-.8s; }
.find-product-churritos { z-index:3; right:22%; top:4px; width:205px; height:350px; transform:rotate(5deg); animation-delay:-4.1s; }
.find-product-kilo { z-index:2; right:0; top:18px; width:205px; height:350px; transform:rotate(11deg); animation-delay:-2s; }
.find > div:last-child { position:relative; z-index:2; }
.find h2 { font-size:clamp(3.8rem,6vw,6.8rem); }
.find-copy { max-width:420px; margin:26px 0 34px; font-size:1.08rem; line-height:1.7; }
.find-button { min-width:260px; }

.stores { padding:120px clamp(24px,7vw,90px); background:#fff9ef; }
.stores-header { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:end; margin-bottom:42px; }
.stores-header h2 { color:var(--coral); }
.stores-header p { margin:0; color:#b42422; font-size:1.15rem; line-height:1.6; }
.stores-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:30px; }
.stores-grid .store-card { width:min(860px,100%); }
.store-card { padding:42px; background:linear-gradient(180deg,#fff4c2 0%, #fff0b1 100%); border-radius:22px; box-shadow:0 18px 36px rgba(58,22,13,.08); }
.store-card h3 { margin-bottom:26px; color:var(--coral); font-size:clamp(2.2rem,4vw,3.4rem); text-transform:uppercase; }
.store-card p { margin:0 0 34px; font-size:1.08rem; line-height:1.7; }
.store-link { color:var(--coral); border-color:var(--coral); background:white; }

.contact { padding:120px clamp(24px,7vw,90px); display:grid; grid-template-columns:.8fr 1.2fr; gap:34px; background:linear-gradient(180deg,#fffaf2 0%, #fff4e7 100%); }
.contact-card { padding:40px; background:white; border:1px solid rgba(207,7,25,.16); border-radius:22px; box-shadow:0 18px 36px rgba(58,22,13,.08); }
.contact-info h2 { margin-bottom:42px; color:var(--coral); font-size:clamp(3rem,5vw,5rem); text-transform:uppercase; }
.contact-item { margin-bottom:34px; }
.contact-item strong { display:block; margin-bottom:10px; color:var(--coral); font-size:1.3rem; font-weight:800; }
.contact-item p { margin:0; font-size:1.1rem; line-height:1.7; }
.contact-item a:hover { text-decoration:underline; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px 26px; }
.contact-grid label { display:flex; flex-direction:column; gap:12px; }
.contact-grid span { color:#5b3c34; font-size:1.2rem; font-weight:800; }
.contact-grid input,
.contact-grid textarea { width:100%; padding:22px 24px; border:2px solid rgba(58,22,13,.12); border-radius:18px; background:#fffdf7; color:var(--ink); font-size:1rem; }
.contact-grid input:focus,
.contact-grid textarea:focus { outline:none; border-color:rgba(207,7,25,.45); box-shadow:0 0 0 4px rgba(207,7,25,.08); }
.contact-comments { grid-column:1 / -1; }
.contact-comments textarea { min-height:220px; resize:vertical; }
.contact-submit { width:100%; margin-top:28px; min-height:86px; border:0; border-radius:999px; background:#e2141f; color:white; font:800 1.35rem/1 "DM Sans", sans-serif; cursor:pointer; box-shadow:0 18px 30px rgba(226,20,31,.22); transition:transform .25s ease, box-shadow .25s ease; }
.contact-submit:hover { transform:translateY(-3px); box-shadow:0 22px 34px rgba(226,20,31,.3); }

.floating-actions { position:fixed; z-index:90; right:18px; top:50%; display:flex; flex-direction:column; gap:10px; transform:translateY(-50%); }
.floating-actions a { width:48px; height:48px; display:grid; place-items:center; border:2px solid white; border-radius:50%; color:white; background:var(--coral); box-shadow:0 10px 24px rgba(58,22,13,.22); transition:transform .25s, background .25s; }
.floating-actions a:hover { transform:translateX(-4px); background:var(--ink); }
.floating-actions svg { width:21px; height:21px; fill:currentColor; }
.floating-actions .back-to-top { color:var(--ink); background:var(--yellow); font-size:1.45rem; font-weight:900; }
.floating-actions .back-to-top:hover,
.floating-actions .back-to-top:focus,
.floating-actions .back-to-top:active { color:var(--ink); background:var(--yellow); }

footer { padding:90px clamp(24px,7vw,110px) 30px; background:var(--ink); color:white; display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; align-items:start; }
.footer-brand > img { width:220px; height:125px; }
footer > p { margin:0; color:var(--yellow); font:clamp(2.4rem,5vw,5rem)/.9 "Paytone One"; text-transform:uppercase; }
.footer-links { display:grid; gap:13px; font-weight:700; }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; padding-top:40px; margin-top:40px; border-top:1px solid rgba(255,255,255,.2); color:#d9aaa3; font-size:.8rem; }
.footer-bottom a { color:inherit; text-decoration:none; transition:opacity .25s ease; }
.footer-bottom a:hover { opacity:.82; }

.reveal { opacity:0; transform:translateY(35px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:none; }
@keyframes hero-in { to { transform:scale(1); } }
@keyframes scroll-pulse { 0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1)} }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { 0%,100%{translate:0 0}50%{translate:0 -18px} }
@keyframes product-float { 0%,100%{translate:0 0}50%{translate:0 -12px} }
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes splash-bloom {
  0% { transform:translate(-50%,-50%) scale(.12); opacity:0; }
  72% { transform:translate(-50%,-50%) scale(1.06); opacity:.98; }
  100% { transform:translate(-50%,-50%) scale(1); opacity:.95; }
}

@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .site-header { height:88px; padding:18px 22px; }
  .brand > img { width:120px; height:64px; }
  .pill-light { display:none; }
  .hero { min-height:100svh; align-items:center; padding:120px 0 72px; }
  .hero-copy { width:min(620px,calc(100% - 48px)); margin-left:24px; padding-top:0; }
  .hero-media { inset:0; transform:scale(1.02); background-position:66% center; }
  .hero-shade { background:linear-gradient(180deg,rgba(26,5,3,.2) 0%,rgba(26,5,3,.42) 48%,rgba(26,5,3,.82) 100%), linear-gradient(90deg,rgba(26,5,3,.72),rgba(26,5,3,.18) 62%,transparent 88%); }
  .flavors { padding:100px 24px; }
  .flavor-stage { grid-template-columns:1fr; }
  .flavor-copy { order:2; padding-top:0; text-align:center; margin:auto; }
  .bag-wrap { height:500px; }
  .bag-photo { width:min(360px,88vw); }
  .product-line .section-heading { grid-template-columns:1fr; }
  .product-line .section-heading .eyebrow { grid-column:1; margin-bottom:-10px; }
  .product-mosaic { grid-template-columns:1fr 1fr; grid-template-rows:repeat(4,340px); }
  .product-tile-tostadas { grid-column:1; grid-row:1/3; }
  .product-tile-tostadas-10 { grid-column:2; grid-row:1; }
  .product-tile-tostadas-25 { grid-column:2; grid-row:2; }
  .product-tile-totopos { grid-column:1; grid-row:3; }
  .product-tile-tortillas { grid-column:2; grid-row:3; }
  .product-tile-totopitos { grid-column:1; grid-row:4; }
  .product-tile-kilo { grid-column:2; grid-row:4; }
  .product-modal[open] { grid-template-columns:1fr; overflow:auto; }
  .product-modal-visual { min-height:330px; padding:30px; }
  .product-modal-visual img { height:290px; }
  .product-modal-copy { padding:45px 32px; }
  .product-splash { width:min(650px,112vw); }
  .splash-fire { width:min(680px,118vw); }
  .flavor-accent { width:120px; }
  .accent-salsa { left:10%; bottom:7%; width:157px; transform:rotate(-24deg) scale(.88); }
  .accent-lime { left:6%; top:10%; }
  .accent-chile { right:8%; bottom:14%; }
  .accent-chile-top { left:2%; top:6%; width:92px; }
  .accent-totopo-one { left:18%; top:11%; width:86px; }
  .accent-totopo-two { right:15%; top:8%; width:70px; }
  .accent-totopo-three { left:31%; bottom:13%; width:66px; }
  .accent-green-tomatillo { width:108px; }
  .accent-green-molcajete { left:5%; bottom:8%; width:195px; }
  .accent-green-cilantro { right:4%; top:10%; width:112px; }
  .accent-green-ajo { left:6%; top:14%; width:88px; }
  .accent-green-jalapeno-one { right:8%; bottom:17%; width:86px; }
  .accent-green-jalapeno-two { left:27%; top:7%; width:88px; }
  .accent-green-jalapeno-three { right:21%; top:8%; width:81px; }
  .accent-fire-lime { left:3%; top:9%; width:132px; }
  .accent-fire-chile-long { right:3%; top:2%; width:114px; }
  .accent-fire-chile-a { left:13%; bottom:15%; width:86px; }
  .accent-fire-chile-b { right:13%; bottom:12%; width:74px; }
  .accent-fire-chile-c { left:29%; top:4%; width:68px; }
  .accent-churritos-chile-one { left:5%; top:14%; width:104px; }
  .accent-churritos-chile-two { right:5%; bottom:17%; width:94px; }
  .accent-churritos-lime { left:8%; bottom:14%; width:132px; }
  .flavor-palette { flex-direction:row; margin:35px auto; }
  .circle-button { top:48%; }
  .prev { left:0; }.next { right:0; }
  .story { padding:100px 24px; }
  .story-content { grid-template-columns:1fr; }
  .story-character { justify-self:center; width:min(280px,76vw); }
  .story-character img { width:100%; transform:none; }
  .stores-header,
  .stores-grid,
  .contact { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .cards { grid-template-columns:1fr; }
  .moment-card { min-height:500px; }
  .find { grid-template-columns:1fr; padding:90px 24px; text-align:center; }
  .find-products { width:min(680px,100%); height:520px; }
  .find > div:last-child { justify-self:center; }
  footer { grid-template-columns:1fr; }
  .footer-bottom { grid-column:1; flex-direction:column; gap:12px; }
  .floating-actions { right:10px; top:auto; bottom:16px; flex-direction:column; transform:none; }
  .floating-actions a { width:43px; height:43px; }
}

@media (max-width: 560px) {
  h1 { font-size:3.7rem; }
  h2 { font-size:3.5rem; }
  .hero { min-height:max(720px,100svh); align-items:center; padding:118px 0 40px; }
  .hero-copy { width:calc(100% - 40px); margin-left:20px; }
  .hero-media { inset:0; transform:none; background-position:72% center; }
  .hero-shade { background:linear-gradient(180deg,rgba(26,5,3,.12) 0%,rgba(26,5,3,.28) 34%,rgba(26,5,3,.7) 66%,rgba(26,5,3,.92) 100%); }
  .scroll-cue { display:none; }
  .hero-text { max-width:340px; }
  .bag { width:245px; height:360px; padding-top:68px; }
  .product-line { padding:90px 20px; }
  .product-mosaic { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:12px; overflow:visible; margin:0; padding:0; }
  .product-tile,
  .product-tile-tostadas,
  .product-tile-tostadas-10,
  .product-tile-tostadas-25,
  .product-tile-totopos,
  .product-tile-tortillas,
  .product-tile-totopitos,
  .product-tile-kilo { grid-column:auto; grid-row:auto; width:100%; height:300px; }
  .product-tile-tostadas { grid-column:1 / -1; height:390px; }
  .product-tile > span { left:18px; right:58px; bottom:18px; }
  .product-tile strong { font-size:clamp(1.45rem,7vw,2.15rem); }
  .product-tile b { right:14px; bottom:16px; width:40px; height:40px; }
  .find { min-height:auto; padding:80px 18px; }
  .find-products { width:100%; height:410px; }
  .find-product { width:126px; height:230px; }
  .find-product-totopos { width:174px; height:340px; bottom:4px; }
  .find-product-fuego { left:0; bottom:18px; width:150px; height:285px; }
  .find-product-totopitos { right:0; bottom:20px; width:148px; height:278px; }
  .find-product-tortillas { left:-2%; top:8px; width:118px; height:195px; }
  .find-product-tostadas { left:23%; top:0; width:118px; height:205px; }
  .find-product-churritos { right:22%; top:0; width:118px; height:205px; }
  .find-product-kilo { right:-2%; top:10px; width:118px; height:200px; }
  .flavors { min-height:1040px; padding:82px 18px 76px; }
  .flavor-stage { width:100%; min-height:730px; }
  .bag-wrap { width:100%; height:430px; }
  .bag-photo { width:min(300px,80vw); }
  .flavor-copy { min-height:330px; display:flex; flex-direction:column; align-items:center; }
  .flavor-copy .text-link { margin-top:auto; }
  .product-splash { width:min(440px,110vw); max-height:420px; object-fit:contain; }
  .splash-fire { width:min(430px,108vw); max-height:410px; }
  .bag-wrap.accent-fire .bag-photo { width:min(300px,80vw); }
  .flavor-accent { width:92px; }
  .accent-salsa { left:10%; bottom:14%; width:126px; transform:rotate(-22deg) scale(.9); }
  .accent-lime { left:1%; top:12%; transform:rotate(-18deg) scale(.78); }
  .accent-chile { right:3%; bottom:20%; transform:rotate(16deg) scale(.84); }
  .accent-chile-top { left:0; top:8%; width:70px; transform:rotate(-16deg) scale(.62); }
  .accent-totopo-one { left:15%; top:16%; width:64px; }
  .accent-totopo-two { right:12%; top:13%; width:56px; }
  .accent-totopo-three { left:33%; bottom:18%; width:50px; }
  .accent-green-tomatillo { width:88px; }
  .accent-green-molcajete { left:3%; bottom:16%; width:151px; transform:rotate(-8deg) scale(.86); }
  .accent-green-cilantro { right:12%; top:18%; width:78px; transform:rotate(18deg) scale(.74); }
  .accent-green-ajo { left:13%; top:22%; width:66px; transform:rotate(-18deg) scale(.68); }
  .accent-green-jalapeno-one { right:14%; bottom:19%; width:64px; }
  .accent-green-jalapeno-two { left:34%; top:13%; width:64px; }
  .accent-green-jalapeno-three { right:29%; top:14%; width:60px; }
  .accent-fire-lime { left:10%; top:17%; width:88px; transform:rotate(-18deg) scale(.76); }
  .accent-fire-chile-long { right:10%; top:12%; width:80px; transform:rotate(25deg) scale(.82); }
  .accent-fire-chile-a { left:16%; bottom:18%; width:66px; }
  .accent-fire-chile-b { right:15%; bottom:18%; width:56px; }
  .accent-fire-chile-c { left:36%; top:13%; width:50px; }
  .accent-churritos-chile-one { left:13%; top:20%; width:74px; }
  .accent-churritos-chile-two { right:13%; bottom:20%; width:68px; }
  .accent-churritos-lime { left:12%; bottom:18%; width:94px; }
  .floating-actions a:hover { transform:none; }
  .bag strong { font-size:2.7rem; }
  .moment-card h3 { font-size:3rem; }
  .contact-card,
  .store-card { padding:28px; }
  .contact-info h2,
  .stores-header h2 { font-size:3.1rem; }
  .contact-submit { min-height:72px; font-size:1.1rem; }
  .story-intro { grid-template-columns:1fr auto; gap:18px; }
  .story-intro h2 { font-size:clamp(3rem,14vw,4.4rem); }
  .story-toggle { width:62px; height:62px; font-size:2.5rem; }
  .story-content.is-open { margin-top:48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}