:root{
  --rojo:#ab0006;--rojo-osc:#8e0005;--amarillo:#ffc94a;--crema:#fff6ec;--crema2:#ffe9d6;--tinta:#1c0f0c;
  --verde-wa:#1fa855;--azul:#1f5fc4;
  --f-disp:'Bricolage Grotesque',system-ui,sans-serif;--f-txt:'DM Sans',system-ui,sans-serif;
  --pad:56px;--max:1328px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--f-txt);font-size:17px;line-height:1.5;overflow-x:hidden;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font-family:inherit}
.disp{font-family:var(--f-disp);font-variation-settings:'wdth' 75;font-weight:800;text-transform:uppercase;line-height:.88;letter-spacing:-.005em}
.wrap{max-width:var(--max);margin:0 auto}
.sec{padding:120px var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:16px 30px;border-radius:999px;font-weight:800;font-size:18px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;line-height:1.1;text-align:center}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn svg{flex:0 0 auto}
.btn-wa{background:var(--verde-wa);color:#fff}
.btn-azul{background:var(--azul);color:#fff}
.btn-amarillo{background:var(--amarillo);color:var(--tinta)}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-tinta{background:var(--tinta);color:#fff}
.btn-linea{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn-linea-claro{background:transparent;color:var(--crema);border-color:var(--crema)}
.btn-sm{min-height:48px;padding:12px 22px;font-size:16px}

/* Header */
.top{position:sticky;top:0;z-index:40;background:var(--rojo);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--pad)}
.top .logo img{height:40px;width:auto}
.nav{display:flex;gap:32px;align-items:center}
.nav a{color:var(--crema);text-decoration:none;font-weight:700;font-size:16px}
.nav a:hover{text-decoration:underline}
.top .btn{background:var(--crema);color:var(--rojo);min-height:48px;padding:12px 22px;font-size:16px}
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:2px solid var(--crema);background:transparent;color:var(--crema);align-items:center;justify-content:center;cursor:pointer}
.menu-movil{display:none;background:var(--rojo-osc);padding:6px 20px 16px;position:sticky;top:80px;z-index:39}
.menu-movil a{display:block;color:var(--crema);text-decoration:none;font-weight:700;font-size:18px;padding:13px 0;border-bottom:1px solid rgba(255,246,236,.2)}
.menu-movil a:last-child{border-bottom:0}
.menu-movil.abierto{display:block}

/* Hero */
.hero{background:var(--rojo);color:var(--crema);padding:56px var(--pad) 140px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(76px,11.5vw,168px)}
.hero h1 span{color:var(--amarillo)}
.hero p{font-size:clamp(17px,1.9vw,26px);line-height:1.5;color:#ffe6dc;max-width:610px;margin-top:28px}
.hero-video{justify-self:center;width:100%;max-width:460px;aspect-ratio:9/16;border-radius:40px;overflow:hidden;border:6px solid var(--crema);box-shadow:0 30px 60px rgba(40,0,0,.45);transform:rotate(2deg);background:#5a0003}
.hero-video video{width:100%;height:100%;object-fit:cover}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}

/* Cintas */
.cinta{overflow:hidden;border-top:3px solid var(--tinta);border-bottom:3px solid var(--tinta)}
.cinta-track{display:flex;gap:40px;white-space:nowrap;width:max-content;font-size:44px}
.cinta-track span{padding-right:40px}
.cinta-amarilla{background:var(--amarillo);transform:rotate(-2deg);margin:-44px -20px 0;padding:18px 0;position:relative;z-index:3}
.cinta-amarilla .cinta-track{animation:cinta 28s linear infinite}
.cinta-super{background:var(--crema);color:var(--tinta);border-bottom:0;margin:72px calc(var(--pad)*-1) -120px;padding:22px 0}
.cinta-super .cinta-track{animation:cinta-r 60s linear infinite;font-size:48px}
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cinta-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Productos */
.productos{margin-top:-30px;padding-top:130px;padding-bottom:72px;transition:background-color .6s ease,color .6s ease}
.prod-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.prod-head h2{font-size:clamp(52px,6.7vw,96px)}
.ctrl{display:flex;align-items:center;gap:14px}
.ctrl .contador{font-size:36px}
.flecha{width:56px;height:56px;border-radius:50%;border:2px solid currentColor;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer}
.flecha.llena{background:currentColor}
.flecha.llena svg{color:var(--flecha-fg,#fff)}
.slider{overflow:hidden;touch-action:pan-y}
.track{display:flex;transition:transform .7s cubic-bezier(.65,0,.25,1)}
.slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.escena{position:relative;display:flex;justify-content:center;align-items:center;height:720px}
.escena::before{content:"";position:absolute;width:min(500px,92%);aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.14)}
.escena img.prod{position:relative;width:auto;height:auto;filter:drop-shadow(0 30px 34px rgba(0,0,0,.38));animation:flota 6s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-14px) rotate(10deg)}}
.burbuja{position:absolute;right:24px;top:30px;width:140px;height:140px;border-radius:50%;background:var(--crema);color:var(--tinta);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(10deg);box-shadow:0 12px 24px rgba(0,0,0,.2)}
.burbuja b{font-family:var(--f-disp);font-variation-settings:'wdth' 75;font-weight:800;font-size:58px;line-height:.9}
.burbuja span{font-size:13px;font-weight:700}
.info{display:flex;flex-direction:column;gap:22px}
.info .logo-linea{align-self:flex-start;width:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.info h3{font-size:clamp(60px,7.8vw,112px)}
.info p{font-size:20px;line-height:1.5;max-width:520px}
.etiquetas{display:flex;gap:10px;flex-wrap:wrap}
.etiquetas li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:700;font-size:15px}
.et-gluten{background:var(--crema);color:var(--tinta)}
.et-lactosa{background:var(--tinta);color:var(--crema)}
.et-prot{background:var(--amarillo);color:var(--tinta)}
.info .btn{align-self:flex-start;font-size:22px;min-height:64px;padding:20px 40px;box-shadow:0 14px 30px rgba(0,0,0,.25)}
.miniaturas{display:flex;gap:12px;overflow-x:auto;padding:24px 2px 10px;scrollbar-width:none}
.miniaturas::-webkit-scrollbar{display:none}
.mini{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:700;border:2px solid currentColor;background:transparent;color:inherit;opacity:.8;transition:all .3s ease}
.mini .dot{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mini .dot img{max-width:34px;max-height:38px;width:auto;height:auto}
.mini[aria-selected="true"]{opacity:1}

/* Recetas */
.recetas{background:var(--crema2)}
.rec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.rec-head h2{font-size:clamp(56px,7.2vw,104px)}
.rec-ctrl{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.filtro{min-height:44px;padding:12px 22px;border-radius:999px;font-size:16px;font-weight:700;cursor:pointer;border:2px solid var(--tinta);background:transparent;color:var(--tinta)}
.filtro[aria-selected="true"]{background:var(--rojo);border-color:var(--rojo);color:var(--crema)}
.rec-flechas{display:flex;gap:10px}
.rec-flechas .flecha{color:var(--tinta);width:52px;height:52px}
.rec-flechas .flecha.llena svg{color:var(--crema)}
.carril{display:flex;gap:20px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.carril::-webkit-scrollbar{display:none}
.tarjeta{position:relative;flex:0 0 300px;height:460px;border-radius:26px;overflow:hidden;color:var(--crema);background:var(--tinta);text-decoration:none;display:block}
.tarjeta img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tarjeta:hover img{transform:scale(1.06)}
.tarjeta .pie{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(to top,rgba(20,6,4,.92),rgba(20,6,4,0));display:flex;flex-direction:column;gap:8px}
.tag{align-self:flex-start;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px}
.tag-reb{background:var(--amarillo);color:var(--tinta)}
.tag-kuk{background:#f7d9e6;color:#5a0f30}
.tarjeta .nombre{font-size:40px}
.tarjeta .ver{font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:6px;opacity:.9}

/* Modal receta */
.modal{position:fixed;inset:0;z-index:60;background:rgba(28,15,12,.72);display:none;align-items:center;justify-content:center;padding:24px}
.modal.abierto{display:flex}
.modal-caja{position:relative;width:100%;max-width:1120px;max-height:calc(100vh - 48px);overflow-y:auto;background:var(--crema);border-radius:32px;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:entra .45s cubic-bezier(.2,.8,.2,1)}
@keyframes entra{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.cerrar{position:absolute;top:18px;right:18px;z-index:2;width:52px;height:52px;border-radius:50%;border:0;background:var(--tinta);color:var(--crema);display:flex;align-items:center;justify-content:center;cursor:pointer}

/* Receta (modal y página) */
.receta{display:grid;grid-template-columns:.8fr 1.2fr}
.receta .foto{min-height:520px;background:var(--tinta)}
.receta .foto img{width:100%;height:100%;object-fit:cover}
.receta .cuerpo{padding:48px 44px;display:flex;flex-direction:column;gap:24px}
.receta h1,.receta h2.titulo{font-size:clamp(56px,6vw,84px);color:var(--rojo)}
.receta .intro{font-size:18px;line-height:1.55}
.receta h3,.receta h4{font-size:36px}
.ingredientes{display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.45}
.ingredientes li{display:flex;gap:10px;padding-bottom:8px;border-bottom:1px dashed #d8b8aa}
.ingredientes li::before{content:"";flex:0 0 8px;height:8px;margin-top:7px;border-radius:50%;background:var(--rojo)}
.pasos{display:flex;flex-direction:column;gap:14px;counter-reset:paso}
.pasos li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.5;counter-increment:paso}
.pasos li::before{content:counter(paso);flex:0 0 40px;height:40px;border-radius:50%;background:var(--rojo);color:var(--crema);display:flex;align-items:center;justify-content:center;font-family:var(--f-disp);font-variation-settings:'wdth' 75;font-weight:800;font-size:24px}
.pasos li span{padding-top:8px}
.receta-btns{display:flex;gap:12px;flex-wrap:wrap}
.pagina-receta{padding:56px var(--pad) 96px}
.pagina-receta .receta{max-width:var(--max);margin:0 auto;border-radius:32px;overflow:hidden;background:var(--crema);box-shadow:0 24px 50px rgba(0,0,0,.12)}
.volver{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;margin-bottom:28px;color:var(--rojo)}
.mas-recetas{background:var(--crema2);padding:80px var(--pad)}
.mas-recetas h2{font-size:72px;margin-bottom:32px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid4 .tarjeta{flex:none;height:380px}

/* Dónde comprar */
.comprar{background:var(--rojo);color:var(--crema)}
.comprar h2{font-size:clamp(60px,8.4vw,120px);margin-bottom:48px}
.cajas{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.caja{border-radius:28px;padding:40px;display:flex;flex-direction:column;gap:20px}
.caja h3{font-size:52px}
.caja .btn{margin-top:auto;align-self:flex-start}
.caja-crema{background:var(--crema);color:var(--tinta)}
.caja-crema h3{color:var(--rojo)}
.caja-crema p{font-size:23px;line-height:1.5}
.caja-osc{background:rgba(0,0,0,.2)}
.caja-osc h3{color:var(--amarillo)}
.caja-osc .num{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.caja-osc .num b{font-family:var(--f-disp);font-variation-settings:'wdth' 75;font-weight:800;font-size:96px;line-height:.85}
.caja-osc .num span{font-size:20px;font-weight:700}
.caja-osc p{font-size:18px;color:#ffe0d6}

/* Contacto */
.contacto{background:var(--crema);border-top:3px solid var(--tinta);padding:88px var(--pad) 40px}
.contacto-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}
.contacto .logo-pie{height:56px;width:auto}
.contacto h2{font-size:clamp(40px,4.2vw,60px);max-width:680px;margin:32px 0 24px}
.contacto .btns{display:flex;gap:12px;flex-wrap:wrap}
.etiq{font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.col-der{display:flex;flex-direction:column;gap:32px;padding-top:8px}
.col-der > div{display:flex;flex-direction:column;gap:12px}
.redes{display:flex;gap:12px}
.redes a{width:60px;height:60px;border-radius:50%;background:var(--rojo);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
.redes a:hover{transform:translateY(-2px)}
.direccion{font-size:22px;line-height:1.5}
.copy{font-size:14px;margin-top:56px}

/* Animación de aparición */
.aparece{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.aparece.visible{opacity:1;transform:none}

@media (max-width:1100px){
  .nav{gap:20px}
}
@media (max-width:900px){
  :root{--pad:20px}
  .sec{padding:56px var(--pad)}
  .nav,.top .btn{display:none}
  .menu-btn{display:flex}
  .top{padding:14px var(--pad)}
  .top .logo img{height:32px}
  .menu-movil{top:76px}
  .hero{padding:28px var(--pad) 80px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero p{margin-top:18px}
  .hero-video{max-width:none;transform:none;border-radius:28px;border-width:5px}
  .hero-btns{margin-top:0}
  .hero-btns .btn{flex:1;min-height:52px;font-size:16px;padding:12px 16px}
  .cinta-amarilla{margin-top:-30px;padding:12px 0}
  .cinta-track{font-size:28px;gap:24px}
  .cinta-track span{padding-right:24px}
  .productos{padding-top:72px;padding-bottom:40px;margin-top:-20px}
  .prod-head{margin-bottom:16px}
  .ctrl .flecha{display:none}
  .ctrl .contador{font-size:26px}
  .slide{grid-template-columns:1fr;gap:14px}
  .escena{height:400px}
  .escena::before{width:290px}
  .burbuja{width:92px;height:92px;right:0;top:0}
  .burbuja b{font-size:36px}
  .burbuja span{font-size:10px}
  .info{gap:14px}
  .info p{font-size:15px}
  .etiquetas li{font-size:13px;padding:8px 12px}
  .info .btn{align-self:stretch;font-size:19px;min-height:60px;padding:16px}
  .miniaturas{padding-top:16px}
  .mini{font-size:13px}
  .rec-head{margin-bottom:20px}
  .rec-flechas .flecha{width:48px;height:48px}
  .tarjeta{flex-basis:220px;height:330px}
  .tarjeta .nombre{font-size:30px}
  .receta{grid-template-columns:1fr}
  .receta .foto{min-height:0;height:340px}
  .receta .cuerpo{padding:24px 20px 40px;gap:18px}
  .receta h3,.receta h4{font-size:30px}
  .receta-btns .btn{flex:1 1 100%}
  .modal{padding:0}
  .modal-caja{max-height:100vh;height:100%;border-radius:0}
  .pagina-receta{padding:24px var(--pad) 56px}
  .mas-recetas{padding:56px var(--pad)}
  .mas-recetas h2{font-size:48px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid4 .tarjeta{height:280px}
  .comprar h2{margin-bottom:24px}
  .cajas{grid-template-columns:1fr}
  .caja{padding:26px 22px;gap:14px}
  .caja h3{font-size:40px}
  .caja-crema p{font-size:16px}
  .caja-osc .num b{font-size:84px}
  .caja .btn{align-self:stretch}
  .cinta-super{margin:40px calc(var(--pad)*-1) -56px;padding:14px 0}
  .cinta-super .cinta-track{font-size:32px}
  .contacto{padding:44px var(--pad) 32px}
  .contacto-grid{grid-template-columns:1fr;gap:28px}
  .contacto .logo-pie{height:40px}
  .contacto h2{margin:14px 0 20px}
  .contacto .btns .btn{flex:1 1 100%}
  .direccion{font-size:18px}
  .copy{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .aparece{opacity:1;transform:none}
}