@font-face{font-family:'Fraunces';src:url(fonts/fraunces-latin-900-normal.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Nunito';src:url(fonts/nunito-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url(fonts/nunito-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Nunito';src:url(fonts/nunito-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Nunito';src:url(fonts/nunito-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Dancing';src:url(fonts/dancing-script-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --cream:#FBF5EC; --paper:#FFFFFF; --red:#B3202E; --redd:#8C1623; --green:#1F5A46; --greend:#17402A;
  --gold:#C9973F; --goldl:#F6D58E; --ink:#3A2622; --muted:#76605A; --line:#EADBC6; --tan:#F1E4D2; --lime:#5E9A24;
  --shadow:0 1px 0 var(--line),0 8px 22px rgba(80,35,20,.07);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.5 'Nunito',system-ui,sans-serif}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{padding:0 28px}}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(140,22,35,.96);backdrop-filter:saturate(1.2) blur(6px);color:#fff}
.top-in{display:flex;align-items:center;justify-content:space-between;height:52px}
.brand{font-weight:800;letter-spacing:.36em;font-size:14px}
.top-cta{font-weight:800;font-size:14px;text-decoration:none;background:#fff;color:var(--red);padding:7px 14px;border-radius:99px}

/* hero */
.hero{background:var(--red);color:#fff;overflow:hidden;position:relative;
  background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.35) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 12%,rgba(255,255,255,.3) 0 2.5px,transparent 3.5px),
    radial-gradient(circle at 42% 66%,rgba(255,255,255,.22) 0 2px,transparent 3px),
    radial-gradient(circle at 90% 70%,rgba(255,255,255,.3) 0 3px,transparent 4px),
    radial-gradient(circle at 25% 88%,rgba(255,255,255,.25) 0 2px,transparent 3px);
  background-size:220px 220px,260px 260px,190px 190px,300px 300px,240px 240px}
.hero-in{display:grid;gap:8px;padding-top:40px;padding-bottom:24px}
.hero-txt{text-align:center}
.hero-kit{font-family:'Dancing';font-size:48px;color:var(--goldl);line-height:1}
.hero h1{font-family:'Fraunces';font-weight:900;font-size:clamp(52px,13vw,88px);line-height:.95;letter-spacing:-.02em;margin:4px 0 14px}
.pill{display:inline-block;border:2px solid rgba(255,255,255,.7);border-radius:99px;padding:4px 14px;font-weight:800;letter-spacing:.22em;font-size:12px;text-transform:uppercase}
.hero-txt p{font-size:18px;line-height:1.5;color:#FFEDEA;margin:18px auto 22px;max-width:30em}
.hero-txt b{color:#fff;font-weight:800}
.hero-art{position:relative;height:330px;max-width:420px;width:100%;margin:0 auto}
.ha{position:absolute;box-shadow:0 14px 30px rgba(40,0,0,.35)}
.ha1,.ha2{border:5px solid #fff;border-radius:4px}
.ha1{width:46%;left:46%;top:8px;transform:rotate(7deg)}
.ha2{width:48%;left:16%;top:0;transform:rotate(-5deg)}
.ha3{width:46%;left:-2%;top:120px;transform:rotate(-9deg);box-shadow:none}
.ha4{width:30%;left:50%;top:190px;box-shadow:none;filter:drop-shadow(0 8px 12px rgba(40,0,0,.35))}
@media (min-width:860px){
  .hero-in{grid-template-columns:1.05fr 1fr;align-items:center;padding-top:56px;padding-bottom:56px}
  .hero-txt{text-align:left}
  .hero-txt p{margin-left:0}
  .hero-art{height:440px;max-width:none}
  .ha3{top:170px}.ha4{top:270px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:99px;font-weight:800;font-size:16px;padding:14px 26px;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.btn:active{transform:translateY(1px)}
.btn-light{background:#fff;color:var(--red);box-shadow:0 6px 18px rgba(60,0,0,.25)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 16px rgba(179,32,46,.28)}
.btn-red:disabled{opacity:.6;cursor:progress}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* section headings */
.kicker{font-family:'Dancing';font-size:28px;color:var(--red);line-height:1}
h2{font-family:'Fraunces';font-weight:900;font-size:clamp(32px,7vw,46px);line-height:1.04;color:var(--green);letter-spacing:-.01em;margin:6px 0 10px}
.lead{color:var(--muted);font-size:17px;max-width:38em;margin:0 0 22px}

/* includes */
.incluye{padding:48px 0 20px}
.inc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
@media (min-width:640px){.inc-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:980px){.inc-grid{grid-template-columns:repeat(7,1fr)}}
.inc{background:var(--paper);border-radius:14px;box-shadow:var(--shadow);padding:10px 10px 12px;text-align:center}
.inc .well{aspect-ratio:1/1}
.inc span{display:block;font-weight:800;font-size:13.5px;line-height:1.25;margin-top:8px}

/* image wells */
.well{display:flex;align-items:center;justify-content:center;background:var(--cream);border-radius:10px;overflow:hidden;aspect-ratio:4/5;position:relative}
.well img{max-width:86%;max-height:86%;object-fit:contain;box-shadow:0 3px 8px rgba(80,35,20,.16)}
.well img.sin-sombra,.well img[src$=".png"],.well img[src*="sobre"]{box-shadow:none}
.well img[src*="sobre"]{max-width:100%;max-height:100%}

/* order */
.pedido{padding:40px 0 64px}
.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow)}
.kit{padding:16px;margin-bottom:16px}
.kit-hd{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px}
.kit-hd h3{font-family:'Fraunces';font-weight:900;font-size:24px;color:var(--ink);margin:0;margin-right:auto;order:1}
.kit-hd .del{order:2}
.kit-ctl{order:3;flex-basis:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
.qty-w{display:flex;align-items:center;gap:8px}
@media (min-width:640px){.kit-ctl{order:2;flex-basis:auto;gap:18px}.kit-hd .del{order:3}}
.seg{display:inline-flex;background:var(--tan);border-radius:99px;padding:3px}
.seg button{border:0;background:transparent;border-radius:99px;padding:7px 14px;font-weight:800;font-size:14px;color:var(--muted)}
.seg button[aria-checked="true"]{background:var(--red);color:#fff}
.seg button[data-ed="grinch"][aria-checked="true"]{background:var(--lime)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:99px;overflow:hidden}
.qty button{border:0;background:transparent;width:36px;height:36px;font-size:20px;font-weight:800;color:var(--red)}
.qty button:disabled{color:#CDBBA6;cursor:default}
.qty output{min-width:28px;text-align:center;font-weight:800}
.qty-l{font-size:13px;font-weight:700;color:var(--muted)}
.del{border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;width:36px;height:36px;border-radius:50%}
.del:hover{background:var(--tan)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:640px){.slots{grid-template-columns:repeat(5,1fr);gap:14px}}
.slot{border:2px solid transparent;background:transparent;padding:0;text-align:left;border-radius:12px}
.slot .well{border:2px solid var(--line)}
.slot:hover .well{border-color:var(--gold)}
.slot.vacio .well{border:2px dashed #D8C3A6;background:#FFFCF7}
.slot.falta .well{border-color:var(--red);background:#FFF4F3}
.plus{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800}
.sl-n{display:block;font-weight:800;font-size:14px;margin-top:6px;color:var(--ink)}
.sl-v{display:block;font-size:13px;color:var(--muted);font-weight:600}
.slot.vacio .sl-v{color:var(--red);font-weight:800}
.kit-note{margin:12px 0 0;font-size:14px;color:var(--muted)}
.fijo{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (min-width:640px){.fijo{grid-template-columns:repeat(7,1fr)}}
.fijo figure{margin:0}
.fijo figcaption{font-size:12px;font-weight:700;line-height:1.2;margin-top:5px;color:var(--muted)}
.fijo .well{aspect-ratio:1/1;background:#F4F8EC}
.add{width:100%;border:2px dashed #D8C3A6;background:transparent;border-radius:var(--radius);padding:16px;font-weight:800;font-size:16px;color:var(--green);margin-bottom:24px}
.add:hover{background:#fff}
.add span{font-size:20px;margin-right:4px}

.datos{padding:18px}
.datos h3{font-family:'Fraunces';font-weight:900;font-size:24px;margin:0 0 12px}
.campos{display:grid;gap:12px}
@media (min-width:640px){.campos{grid-template-columns:1fr 1fr}}
label{display:block;font-weight:800;font-size:14px}
input{display:block;width:100%;margin-top:6px;font:600 17px 'Nunito',sans-serif;color:var(--ink);padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#FFFCF7}
input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,151,63,.25)}
input[aria-invalid="true"]{border-color:var(--red);background:#FFF4F3}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nota{margin:12px 0 0;font-size:14px;color:var(--muted)}
.error{background:#FFF0EE;color:var(--redd);border:1.5px solid #F2C4BE;border-radius:12px;padding:12px 14px;font-weight:700;margin:16px 0 0}
.enviar-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:16px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(251,245,236,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line)}
@media (min-width:700px){.enviar-bar{margin:16px 0 0;border:1px solid var(--line);border-radius:var(--radius);bottom:12px}}
.resumen{font-weight:800;font-size:15px;line-height:1.25}
.resumen small{display:block;font-weight:600;color:var(--muted);font-size:13px}
.aviso{background:#fff;border-left:5px solid var(--gold);padding:14px 16px;border-radius:10px;font-weight:700;margin-bottom:20px}

/* thanks */
.gracias{padding:28px 20px;text-align:center}
.gracias .s{font-family:'Dancing';font-size:34px;color:var(--red);line-height:1}
.gracias h3{font-family:'Fraunces';font-weight:900;font-size:30px;color:var(--green);margin:6px 0 6px}
.folio{display:inline-block;margin:10px 0 6px;background:var(--cream);border:2px dashed var(--gold);border-radius:12px;padding:10px 18px;font-weight:800;letter-spacing:.08em;font-size:22px}
.gracias ul{list-style:none;padding:0;margin:18px auto;max-width:460px;text-align:left}
.gracias li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.gracias li b{font-weight:800}
.gracias p{color:var(--muted);margin:10px auto;max-width:30em}
.btn-otro{margin-top:10px;background:var(--tan);color:var(--ink)}

.pie{text-align:center;padding:28px 16px 40px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}

/* picker */
.picker{border:0;padding:0;background:var(--cream);color:var(--ink);width:100%;max-width:100%;height:100%;max-height:100%;margin:0}
.picker::backdrop{background:rgba(40,15,10,.55)}
@media (min-width:760px){.picker{width:min(920px,calc(100% - 48px));height:fit-content;max-height:calc(100% - 64px);margin:auto;border-radius:20px}}
.pk-hd{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px;background:var(--cream);border-bottom:1px solid var(--line)}
.pk-kit{font-family:'Dancing';color:var(--red);font-size:22px;line-height:1}
.pk-hd h3{font-family:'Fraunces';font-weight:900;font-size:22px;margin:4px 0 0;line-height:1.15}
.pk-tools{display:flex;align-items:center;gap:8px;flex:none}
.chip-btn{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 12px;font-weight:800;font-size:13px}
.chip-btn[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.x{border:0;background:#fff;width:40px;height:40px;border-radius:50%;font-size:26px;line-height:1;box-shadow:0 1px 0 var(--line)}
.pk-grid{display:grid;gap:14px;padding:16px 16px 28px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pk-grid.h{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pk-grid.grande{grid-template-columns:1fr;max-width:560px;margin:0 auto}
.opt{border:0;background:#fff;border-radius:14px;padding:8px 8px 10px;box-shadow:var(--shadow);position:relative;text-align:center}
.opt .well{aspect-ratio:auto;background:var(--cream);padding:8px}
.opt .well img{max-width:100%;max-height:none}
.opt[aria-pressed="true"]{box-shadow:0 0 0 3px var(--red),var(--shadow)}
.opt[aria-pressed="true"]::after{content:"✓";position:absolute;top:-8px;right:-8px;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.opt .lbl{display:block;font-weight:800;font-size:14px;margin-top:8px}
.opt:disabled{cursor:not-allowed;opacity:.55}
.opt:disabled .lbl::after{content:" · Agotado";color:var(--red)}
.kit{scroll-margin-top:70px}
.kit-note.arriba{margin:0 0 12px}
.picker{overflow:auto;overscroll-behavior:contain}
.slot[data-fk]{scroll-margin:90px}

/* hero: acceso a la Edición Grinch */
.hero-acc{display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-grinch{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;font-size:15px;color:#FFEDEA;
  background:rgba(23,64,42,.55);border:1.5px solid rgba(181,224,122,.6);border-radius:99px;padding:7px 14px}
.hero-grinch b{color:#C8EC8F;font-weight:800}
.hero-grinch:hover{background:rgba(23,64,42,.8)}
@media (min-width:860px){.hero-acc{flex-direction:row;align-items:center;gap:18px}}

/* Edición Grinch */
.grinch{--glime:#B5E07A;background:#17402A;color:#fff;padding:52px 0 48px;margin-top:28px;overflow:hidden;scroll-margin-top:52px;
  background-image:radial-gradient(circle at 14% 22%,rgba(255,255,255,.28) 0 2px,transparent 3px),
    radial-gradient(circle at 80% 10%,rgba(255,255,255,.22) 0 2.5px,transparent 3.5px),
    radial-gradient(circle at 46% 70%,rgba(255,255,255,.18) 0 2px,transparent 3px),
    radial-gradient(circle at 92% 64%,rgba(255,255,255,.24) 0 3px,transparent 4px);
  background-size:230px 230px,270px 270px,200px 200px,310px 310px;
  border-top:6px solid var(--lime);border-bottom:6px solid var(--lime)}
.gr-in{display:grid;gap:10px}
.gr-txt{text-align:center}
.gr-kicker{font-family:'Dancing';font-size:30px;color:var(--glime);line-height:1}
.grinch h2{color:#fff;font-size:clamp(46px,12vw,80px);line-height:.95;margin:6px 0 14px}
.gr-txt p{font-size:18px;color:#E3EFE6;margin:0 auto 22px;max-width:28em}
.gr-txt b{color:#fff;font-weight:800}
.btn-lime{background:var(--glime);color:#17402A;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.gr-art{position:relative;height:320px;max-width:420px;width:100%;margin:8px auto 0}
.ga{position:absolute;box-shadow:0 14px 30px rgba(0,0,0,.4)}
.ga1,.ga2,.ga3{border:5px solid #fff;border-radius:4px}
.ga1{width:46%;left:10%;top:0;transform:rotate(-6deg)}
.ga2{width:44%;left:48%;top:16px;transform:rotate(6deg)}
.ga3{width:22%;left:74%;top:178px;transform:rotate(9deg)}
.ga4{width:30%;left:34%;top:196px;box-shadow:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.gr-h3{font-family:'Fraunces';font-weight:900;font-size:clamp(26px,5.5vw,34px);color:#fff;margin:34px 0 4px}
.gr-sub{color:#E3EFE6;font-size:16px;margin:0 0 4px;max-width:36em}
.grinch .inc span{color:var(--ink)}
@media (min-width:860px){
  .gr-in{grid-template-columns:1fr 1.05fr;align-items:center}
  .gr-txt{text-align:left;order:2}
  .gr-txt p{margin-left:0}
  .gr-art{order:1;height:420px;max-width:none;margin:0}
  .ga3{top:240px}.ga4{top:262px}
}

/* Edición Grinch incluida en cada kit */
.hero-grinch .mas,.inc-mas .mas{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#B5E07A;color:#17402A;font-weight:900;line-height:1}
.hero-grinch .mas{width:22px;height:22px;font-size:16px}
.inc-mas{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 18px;border-radius:14px;background:#17402A;color:#fff;text-decoration:none;border:3px solid var(--lime)}
.inc-mas .mas{flex:none;width:40px;height:40px;font-size:26px}
.inc-mas small{display:block;font-family:'Dancing';font-size:22px;color:#B5E07A;line-height:1.1}
.inc-mas b{display:block;font-family:'Fraunces';font-weight:900;font-size:clamp(20px,4.6vw,26px);line-height:1.1}
.inc-mas .ver{margin-left:auto;flex:none;font-weight:800;font-size:14px;color:#B5E07A}
@media (max-width:520px){.inc-mas .ver{display:none}}
.lead b{color:var(--green)}
.gr-inc{margin-top:14px;background:#F1F7E8;border:2px solid #CFE3B4;border-radius:14px;padding:12px}
.gr-inc-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#17402A}
.gr-inc-hd b{font-family:'Fraunces';font-weight:900;font-size:18px}
.gr-badge{background:var(--lime);color:#fff;font-weight:800;font-size:13px;padding:4px 10px;border-radius:99px}
.gr-inc .fijo .well{background:#fff}

/* ---------- animaciones (solo si anim.js activó html.anim) ---------- */
@keyframes subir{from{opacity:0;translate:0 28px}}
@keyframes entrar{from{opacity:0;translate:0 90px;scale:.86}}
@keyframes medalla{from{opacity:0;scale:.35;rotate:-35deg}}
@keyframes aparecer{from{opacity:0;translate:0 24px;scale:.97}}
@keyframes abrir{from{opacity:0;translate:0 24px;scale:.97}}
@keyframes fondo{from{opacity:0}}

/* héroe: entrada en cascada */
html.anim .hero-txt > *{animation:subir 1s cubic-bezier(.2,.7,.2,1) backwards}
html.anim .hero-txt > :nth-child(1){animation-delay:.05s}
html.anim .hero-txt > :nth-child(2){animation-delay:.15s}
html.anim .hero-txt > :nth-child(3){animation-delay:.3s}
html.anim .hero-txt > :nth-child(4){animation-delay:.4s}
html.anim .hero-txt > :nth-child(5){animation-delay:.52s}
html.anim .ha{animation:entrar 1.2s cubic-bezier(.2,.7,.2,1) backwards}
html.anim .ha2{animation-delay:.2s}
html.anim .ha1{animation-delay:.35s}
html.anim .ha3{animation-delay:.5s}
html.anim .ha4{animation:medalla 1s cubic-bezier(.3,1.45,.5,1) .85s backwards}

/* héroe: profundidad al hacer scroll (--p va de 0 a 1) */
html.anim .hero-txt{opacity:calc(1 - var(--p,0) * .85);scale:calc(1 - var(--p,0) * .07);translate:0 calc(var(--p,0) * 70px);transform-origin:50% 0}
html.anim .ha{translate:0 calc(var(--p,0) * var(--v,-80px))}
.ha1{--v:-150px}.ha2{--v:-100px}.ha3{--v:-40px}.ha4{--v:-230px}

/* Grinch: las piezas empiezan apiladas y se acomodan con el scroll (--g de 0 a 1) */
html.anim .ga{translate:calc((1 - var(--g,1)) * var(--dx,0px)) calc((1 - var(--g,1)) * var(--dy,0px));
  rotate:calc((1 - var(--g,1)) * var(--dr,0deg));scale:calc(1 - (1 - var(--g,1)) * var(--ds,.08));opacity:calc(.2 + var(--g,1) * .8)}
.ga1{--dx:80px;--dy:70px;--dr:6deg}
.ga2{--dx:-80px;--dy:60px;--dr:-6deg}
.ga3{--dx:-150px;--dy:-70px;--dr:-9deg}
.ga4{--dx:10px;--dy:-130px;--ds:.55}

/* revelar secciones */
html.anim .rv{opacity:0;translate:0 36px;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),filter .9s ease var(--d,0ms),transform .15s ease,box-shadow .15s ease}
html.anim .rv.in{opacity:1;translate:0 0}
html.anim h2.rv{filter:blur(10px)}
html.anim h2.rv.in{filter:none}

/* detalles */
.top{transition:box-shadow .3s ease,background-color .3s ease}
.top.scrolled{box-shadow:0 6px 22px rgba(60,0,0,.28)}
.btn:hover{transform:translateY(-2px)}
html.anim .kit.nuevo{animation:aparecer .55s cubic-bezier(.2,.7,.2,1)}
html.anim .picker[open]{animation:abrir .35s cubic-bezier(.2,.8,.2,1)}
html.anim .picker[open]::backdrop{animation:fondo .3s ease}
html.anim .gracias:not([hidden]){animation:aparecer .7s cubic-bezier(.2,.7,.2,1)}
html.anim .gracias:not([hidden]) .folio{animation:medalla .8s cubic-bezier(.3,1.45,.5,1) .25s backwards}