/* Estilo divertido con los personajes. Se carga después de styles.css (y shop.css en la tienda). */
@view-transition{navigation:auto}
:root{--slab:'Alfa Slab One',Rockwell,Georgia,serif;--label:'Montserrat','DM Sans',Arial,sans-serif;--wine-2:#6b1428;--wine-3:#3e0817;--rose:#a63a45;--bounce:cubic-bezier(.34,1.56,.64,1)}
body.fun{overflow-x:hidden}
.fun h1,.fun h2{font-family:var(--slab);letter-spacing:-.5px;line-height:1.04}
.fun h1 em,.fun h2 em{font-family:var(--slab);font-style:normal;color:var(--rose)}
.fun .eyebrow{font-family:var(--label);font-weight:800;letter-spacing:2.5px;font-size:12px}
.fun .product-title h3,.fun .contact-details h3,.fun .shop-card h2,.fun .cart-item h3,.fun .sidebar-note strong,.fun .shop-sidebar h2,.fun .empty-cart h3,.fun #confirmation h3{font-family:var(--slab);letter-spacing:0}
.fun .button{border-radius:999px;font-family:var(--label);font-weight:700;letter-spacing:.3px;box-shadow:0 4px 0 var(--wine-3);transition:transform .25s var(--bounce),box-shadow .25s,background .2s}
.fun .button:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 7px 0 var(--wine-3)}
.fun .button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--wine-3)}
.fun .button.cream{box-shadow:0 4px 0 #2a0610}
.fun .button.outline{box-shadow:0 4px 0 var(--wine)}

/* Cinta de avisos y marquesina */
.ticker{overflow:hidden;padding:9px 0;white-space:nowrap}
.ticker-track,.marquee-track{display:inline-flex;align-items:center;gap:28px;padding-left:28px;animation:slide 38s linear infinite;font-family:var(--label);font-weight:700}
.ticker-track img{display:inline-block;width:22px;height:auto;vertical-align:middle;margin-right:10px}
.ticker-track span{display:inline-flex;align-items:center}
.ticker:hover .ticker-track,.marquee:hover .marquee-track{animation-play-state:paused}
.marquee{overflow:hidden;display:block;padding:20px 0;white-space:nowrap}
.marquee-track{gap:40px;padding-left:40px;font-size:15px;animation-duration:26s}
.marquee-track span{font-family:var(--slab);font-weight:400;letter-spacing:1.5px;font-size:20px}
.marquee-track i{display:inline-block;animation:spin 6s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Portada con escenario */
.fun .hero{min-height:680px}
.fun .hero-copy{display:flex;flex-direction:column;justify-content:center}
.bouncy-title>span,.bouncy-title>em{display:block;animation:drop .8s var(--bounce) both}
.bouncy-title>span:nth-child(2){animation-delay:.12s}.bouncy-title>em{animation-delay:.24s}
@keyframes drop{from{opacity:0;transform:translateY(-40px) rotate(-3deg)}to{opacity:1;transform:none}}
.fun h1{font-size:clamp(50px,5.4vw,84px);margin-bottom:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.stage{position:relative;overflow:hidden;overflow:clip;background:var(--wine);min-height:680px;isolation:isolate;--px:0;--py:0}
.sunburst{position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg,#ffffff0d 0 7.5deg,transparent 7.5deg 15deg);animation:spin 80s linear infinite;z-index:-1}
.sunburst.small{inset:-90%;background:repeating-conic-gradient(from 0deg,#500d2014 0 7.5deg,transparent 7.5deg 15deg);animation-duration:50s}
.stage:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,transparent 30%,#2a0610aa 100%);z-index:-1}
.stage-stamp{position:absolute;top:28px;right:28px;width:118px;height:118px;border-radius:50%;background:var(--peach);color:var(--wine);border:2px dashed var(--wine);outline:5px solid var(--peach);display:flex;align-items:center;justify-content:center;flex-direction:column;font:800 6.5px/1.5 var(--label);letter-spacing:.8px;text-align:center;padding:0 10px;animation:wobble 7s ease-in-out infinite}
.stage-stamp span{font:48px/1.15 var(--slab)}
@keyframes wobble{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-6deg) scale(1.04)}}
.star{all:unset;cursor:pointer;display:block;position:relative;-webkit-tap-highlight-color:transparent}
.star:focus-visible{outline:3px dashed var(--peach);outline-offset:6px;border-radius:20px}
.star img{width:100%;height:auto;filter:drop-shadow(0 10px 0 #0000002e);transition:transform .35s var(--bounce)}
.star:hover img{transform:rotate(-4deg) scale(1.05)}
.main-star{position:absolute;left:50%;top:50%;width:min(44%,270px);transform:translate(calc(-50% + var(--px) * 26px),calc(-52% + var(--py) * 18px));transition:transform .4s ease-out;animation:enter 1s .3s var(--bounce) both}
.main-star img{animation:bob 3.2s ease-in-out infinite}
@keyframes enter{from{opacity:0;translate:0 120px;scale:.6}to{opacity:1}}
@keyframes bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -10px;rotate:1.5deg}}
.crowd{position:absolute;inset:auto 0 0;height:0}
.peek{position:absolute;bottom:-110px;width:min(30%,190px);transition:bottom .45s var(--bounce),transform .4s ease-out;transform:translate(calc(var(--px) * -18px),0)}
.peek img{animation:bob 3.6s ease-in-out infinite}
.peek.p1{left:-2%;rotate:12deg;animation:peekin .8s 1s var(--bounce) both}
.peek.p2{right:-3%;rotate:-14deg;animation:peekin .8s 1.15s var(--bounce) both}
.peek.p3{left:28%;width:min(17%,110px);bottom:-60px;animation:peekin .8s 1.3s var(--bounce) both}
.peek.p3 img{animation-delay:-1s}
.peek:hover,.peek:focus-visible,.peek.speaking{bottom:-40px}
.peek.p3:hover,.peek.p3:focus-visible,.peek.p3.speaking{bottom:-10px}
@keyframes peekin{from{opacity:0;translate:0 140px}to{opacity:1;translate:0 0}}
.star.hop img,img.hop,.gossip-button.hop img{animation:hop .6s var(--bounce)}
@keyframes hop{0%{transform:translateY(0) scale(1,1)}25%{transform:translateY(4px) scale(1.08,.9)}55%{transform:translateY(-26px) scale(.95,1.06) rotate(-4deg)}80%{transform:translateY(0) scale(1.04,.96)}100%{transform:none}}

/* Globos de diálogo */
.bubble{position:relative;background:var(--cream);color:var(--wine);border:3px solid var(--wine);border-radius:22px;padding:13px 17px;font-size:15px;line-height:1.45;box-shadow:5px 5px 0 var(--wine-3)}
.bubble strong{display:block;font:800 11px var(--label);letter-spacing:2px;text-transform:uppercase;margin-bottom:3px;color:var(--rose)}
.bubble:after{content:'';position:absolute;left:38px;bottom:-15px;width:22px;height:22px;background:var(--cream);border:solid var(--wine);border-width:0 3px 3px 0;transform:rotate(45deg) skew(12deg,12deg)}
.bubble.pop{animation:pop .45s var(--bounce)}
.speech{transition:opacity .2s,transform .3s var(--bounce),visibility 0s}
.speech:not(.visible){opacity:0;transform:scale(.7);visibility:hidden;pointer-events:none;animation:none;transition:opacity .18s,transform .18s,visibility 0s .18s}
@keyframes pop{from{transform:scale(.6) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.stage-bubble{position:absolute;top:44px;left:8%;max-width:min(330px,62%);z-index:2;transform-origin:bottom left;animation:pop .5s 1.4s var(--bounce) both}

/* Elenco */
.cast{display:grid;grid-template-columns:1fr;background:var(--cream)}
.cast-heading{padding:90px 7% 40px;display:grid;grid-template-columns:auto 1fr;gap:20px 60px;align-items:end}
.cast-heading .eyebrow{grid-column:1/-1;margin:0}
.cast-heading h2{font-size:clamp(44px,4.6vw,70px)}
.cast-heading>p{max-width:340px;color:var(--muted);justify-self:end;margin:0}
.cast-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.cast-card{position:relative;background:#f4e6d2;color:var(--wine);text-align:center;padding:130px 18px 40px;display:flex;flex-direction:column;align-items:center}
.cast-card.dark{background:var(--wine);color:var(--cream)}
.cast-card .star{width:min(100%,190px);height:200px;display:flex;align-items:flex-end;justify-content:center}
.cast-card .star img{max-height:200px;width:auto;max-width:100%;animation:bob 3.4s ease-in-out infinite}
.cast-card:nth-child(2n) .star img{animation-delay:-1.2s}.cast-card:nth-child(3n) .star img{animation-delay:-2.1s}
.cast-card h3{font:clamp(26px,2.3vw,36px)/1 var(--slab);margin:22px 0 6px}
.cast-card>p{font:800 11px var(--label);letter-spacing:2.2px;margin:0}
.cast-bubble{position:absolute;top:18px;left:10px;right:10px;font-size:13px;padding:10px 12px;transform-origin:bottom center;z-index:2;text-align:left}
.cast-bubble:after{left:50%;margin-left:-11px}
.cast-card.dark .bubble{border-color:var(--cream);box-shadow:5px 5px 0 var(--wine-3)}
.cast-card.dark .bubble:after{border-color:var(--cream)}

/* Mostrador */
.fun .product-card{position:relative}
.fun .product-photo{border-radius:26px 26px 0 0;border:3px solid var(--wine)}
.fun .product-photo>span{font:800 11px var(--label);letter-spacing:1.4px;border-radius:999px;padding:6px 11px}
.fun .host{position:absolute;right:-10px;top:150px;width:120px;height:auto;z-index:2;rotate:8deg;filter:drop-shadow(0 6px 0 #0002);transition:transform .45s var(--bounce)}
.fun .product-card:hover .host,.fun .product-card:focus-visible .host{transform:translateY(-40px) rotate(-10deg) scale(1.1)}
.fun .illustrated{overflow:hidden}
.duo{position:absolute;bottom:34px;width:auto;height:72%;filter:drop-shadow(0 6px 0 #500d2025);transition:transform .45s var(--bounce)}
.duo.d1{left:12%;rotate:-6deg}.duo.d2{right:12%;height:66%;rotate:7deg}
.product-card:hover .duo.d1{transform:translateY(-12px) rotate(-6deg)}.product-card:hover .duo.d2{transform:translateY(-18px) rotate(6deg)}
.fun .product-title>span{transition:transform .35s var(--bounce),background .2s,color .2s}
.fun .product-card:hover .product-title>span{transform:rotate(45deg) scale(1.15)}

/* Calculadora de picadas */
.calc{position:relative}
.calc-stage{position:relative;overflow:hidden;overflow:clip;min-height:600px;display:flex;align-items:flex-end;justify-content:center;background:var(--wine-2);isolation:isolate}
.calc-host{width:min(62%,330px);height:auto;margin-bottom:60px;transform:scale(var(--grow,1));transition:transform .4s var(--bounce);filter:drop-shadow(0 12px 0 #0003)}
.calc-host:not(.hop){animation:bob 3s ease-in-out infinite}
.calc-bubble{position:absolute;top:50px;left:10%;right:14%;z-index:2}
.calculator{margin:24px 0 18px;padding:22px;border:2px dashed #efd5bb66;border-radius:24px;max-width:430px}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;border:0;padding:0;flex-wrap:wrap}
.calc-label{font:800 12px var(--label);letter-spacing:1.5px;text-transform:uppercase;color:var(--peach);padding:0}
.stepper{display:flex;align-items:center;background:var(--peach);border-radius:999px;padding:4px}
.stepper button{width:40px;height:40px;border-radius:50%;border:0;background:var(--wine);color:var(--cream);font-size:22px;cursor:pointer;transition:transform .2s var(--bounce)}
.stepper button:hover:not(:disabled){transform:scale(1.12)}
.stepper button:active:not(:disabled){transform:scale(.9)}
.stepper output{min-width:52px;text-align:center;font:26px var(--slab);color:var(--wine)}
.toggle{display:flex;background:#00000033;border-radius:999px;padding:4px}
.toggle label{cursor:pointer}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle span{display:block;padding:9px 15px;border-radius:999px;font:700 13px var(--label);color:var(--peach);transition:background .25s,color .25s}
.toggle input:checked+span{background:var(--peach);color:var(--wine)}
.toggle input:focus-visible+span{outline:2px solid var(--peach);outline-offset:2px}
.calc-result{background:var(--cream);color:var(--wine);border-radius:18px;padding:16px 18px}
.calc-result strong{display:block;font:34px/1.1 var(--slab)}
.calc-result span{display:block;font-size:13px;color:var(--ink);margin-top:6px}
.calc-result.flash{animation:flash .5s var(--bounce)}
@keyframes flash{40%{transform:scale(1.04) rotate(-1deg)}}
.fun .picada-copy .calc-note{font-size:12px;color:#e2bdad;margin:12px 0 0;max-width:none}
.fun .picada-copy{padding-top:60px;padding-bottom:60px}
.fun .picada-copy h2{font-size:clamp(50px,5vw,74px)}

/* Experto */
.expert{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center;background:#eee3d5;max-width:none}
.expert-host{position:relative;aspect-ratio:1;max-width:400px;width:100%;justify-self:center;display:grid;place-items:center;border-radius:50%;background:var(--wine);overflow:hidden;border:6px solid var(--wine);outline:3px dashed var(--wine);outline-offset:8px}
.expert-host:before{content:'';position:absolute;inset:-40%;background:repeating-conic-gradient(#ffffff10 0 7.5deg,transparent 7.5deg 15deg);animation:spin 60s linear infinite}
.expert-host img{position:relative;width:62%;height:auto;filter:drop-shadow(0 10px 0 #0004)}
.expert-copy h2{font-size:clamp(40px,4.2vw,64px);margin-bottom:18px}
.expert-copy>p:not(.eyebrow){color:var(--muted);max-width:420px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.chip{border:2px solid var(--wine);background:transparent;color:var(--wine);border-radius:999px;padding:9px 16px;font:700 13px var(--label);cursor:pointer;transition:transform .25s var(--bounce),background .2s,color .2s}
.chip:hover{transform:translateY(-3px) rotate(-2deg)}
.chip.active{background:var(--wine);color:var(--cream)}
.expert-bubble{max-width:520px;font-size:16px}

/* Contacto y FAQ */
.contact-host{width:90px;height:auto;rotate:-8deg;animation:bob 3s ease-in-out infinite;filter:drop-shadow(0 6px 0 #0002)}
.faq-host{display:flex;align-items:flex-end;gap:10px;margin-top:30px}
.faq-host img{width:150px;height:auto;flex-shrink:0;filter:drop-shadow(0 8px 0 #0002)}
.faq-host img:not(.hop){animation:bob 3.5s ease-in-out infinite}
.faq-bubble{flex:1;max-width:280px;font-size:14px;margin-bottom:110px}
.faq-bubble:after{left:auto;right:-4px;bottom:22px;transform:rotate(-45deg) skew(12deg,12deg)}
.fun .questions summary{font-weight:600;font-size:15px}
.fun .questions summary>span{transition:transform .3s var(--bounce)}
.fun .questions details[open]>p{animation:pop .35s ease-out}

/* Desfile final */
.parade{overflow:hidden;background:var(--cream);padding:30px 0 0;border-top:1px solid var(--line)}
.parade-track{display:flex;gap:70px;width:max-content;animation:march 30s linear infinite;align-items:flex-end}
.parade img{height:90px;width:auto;animation:waddle .5s ease-in-out infinite alternate}
.parade img:nth-child(2n){animation-delay:-.25s}
@keyframes march{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
@keyframes waddle{from{transform:rotate(-5deg) translateY(0)}to{transform:rotate(5deg) translateY(-6px)}}

/* Oli flotante */
.gossip{position:fixed;left:16px;bottom:-140px;z-index:13;transition:bottom .6s var(--bounce);display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.gossip.peeking{bottom:-28px}
.gossip:hover,.gossip:focus-within{bottom:-6px}
.gossip-button{all:unset;cursor:pointer;width:84px;pointer-events:auto}
.gossip-button img{width:100%;height:auto;filter:drop-shadow(0 6px 10px #0004);rotate:8deg}
.gossip-button:focus-visible{outline:3px dashed var(--wine);outline-offset:4px;border-radius:12px}
.gossip-bubble{order:2;margin-bottom:90px;width:min(270px,calc(100vw - 130px));font-size:13px;pointer-events:auto}
.gossip-bubble:after{left:-4px;bottom:20px;transform:rotate(135deg) skew(12deg,12deg)}

/* Aparición al hacer scroll */
.can-reveal [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .7s ease-out var(--delay,0ms),transform .8s var(--bounce) var(--delay,0ms)}
.can-reveal [data-reveal=pop]{transform:scale(.8) rotate(-3deg)}
.can-reveal [data-reveal].in{opacity:1;transform:none}

/* Tienda */
.shop-host-wrap{position:relative;display:flex;align-items:flex-end;gap:14px;margin-right:4%}
.shop-host{width:130px;height:auto;filter:drop-shadow(0 8px 0 #0002)}
.shop-host:not(.hop){animation:bob 3.2s ease-in-out infinite}
.shop-bubble{width:240px;font-size:14px;margin-bottom:120px}
.shop-bubble:after{left:auto;right:-4px;bottom:22px;transform:rotate(-45deg) skew(12deg,12deg)}
.fun .shop-card{border-radius:22px;overflow:hidden;border:2px solid var(--line);transition:transform .3s var(--bounce),box-shadow .3s,border-color .3s}
.fun .shop-card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 10px 0 #500d2018;border-color:var(--wine)}
.fun .category-button{border-radius:999px;font-family:var(--label);font-weight:700;font-size:13px;transition:transform .2s var(--bounce),background .2s}
.fun .category-button:hover{transform:translateX(4px)}
.fun input,.fun select{border-radius:14px}
.fun .demo-notice,.fun .cart-demo{border-radius:0}
.fun .cart-demo{border-radius:14px}
.fun .no-results{border-radius:26px}
.char-icon{display:block;margin:0 auto;height:auto;filter:drop-shadow(0 6px 0 #0002)}
.char-icon:not(.hop){animation:bob 3s ease-in-out infinite}
.fun .toast{border-radius:999px;font-family:var(--label);font-weight:700}
.fun .cart-trigger #cart-count{transition:transform .3s var(--bounce)}
.fun .cart-trigger.bump #cart-count{animation:hop .5s var(--bounce)}

@media(max-width:1050px){
  .cast-grid{grid-template-columns:repeat(3,1fr)}
  .expert{gap:40px}
  .fun .host{width:96px;top:120px}
}
@media(max-width:850px){
  .fun .hero,.stage{min-height:580px}
  .cast-heading{grid-template-columns:1fr}.cast-heading>p{justify-self:start}
  .calc-stage{min-height:520px}
  .fun .host{display:none}
  .faq-host img{width:120px}
  .shop-bubble{display:none}
}
@media(max-width:600px){
  .fun .hero h1{font-size:50px;line-height:1.02;letter-spacing:-.5px}
  .fun .hero-copy{padding-bottom:40px}
  .hero-actions .button{width:100%}
  .stage{min-height:480px}
  .stage-stamp{width:88px;height:88px;font-size:5px;letter-spacing:.5px;top:18px;right:18px}.stage-stamp span{font-size:34px}
  .stage-bubble{top:24px;left:5%;max-width:62%;font-size:13px}
  .main-star{width:min(48%,210px);top:54%}
  .peek{width:34%;bottom:-80px}
  .peek:hover,.peek:focus-visible,.peek.speaking{bottom:-30px}
  .marquee-track span{font-size:16px}
  .duo.d1{height:58%;left:4%}.duo.d2{height:54%;right:4%}
  .cast-heading{padding:60px 7% 30px}
  .cast-grid{grid-template-columns:repeat(2,1fr)}
  .cast-card{padding:120px 12px 30px}
  .cast-card:nth-child(3){background:var(--wine);color:var(--cream)}
  .cast-card:nth-child(4){background:#f4e6d2;color:var(--wine)}
  .cast-card:nth-child(3) .bubble{border-color:var(--cream)}.cast-card:nth-child(3) .bubble:after{border-color:var(--cream)}
  .cast-card:nth-child(4) .bubble{border-color:var(--wine)}.cast-card:nth-child(4) .bubble:after{border-color:var(--wine)}
  .cast-card .star{height:150px}.cast-card .star img{max-height:150px}
  .cast-bubble{font-size:12px;left:6px;right:6px}
  .calc-stage{min-height:400px}
  .calc-host{width:min(58%,230px);margin-bottom:30px}
  .calc-bubble{top:24px;left:6%;right:6%;font-size:14px}
  .calculator{padding:16px}
  .toggle span{padding:8px 12px}
  .expert{grid-template-columns:1fr;gap:40px}
  .expert-host{max-width:260px}
  .faq-host{margin-top:20px}.faq-host img{width:100px}.faq-bubble{margin-bottom:70px;font-size:13px}
  .parade img{height:64px}.parade-track{gap:40px}
  .gossip-button{width:64px}.gossip.peeking{bottom:-22px}.gossip-bubble{margin-bottom:70px}
  .shop-host-wrap{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ticker-track,.marquee-track,.parade-track{animation:none!important}
  .can-reveal [data-reveal]{opacity:1;transform:none}
  @view-transition{navigation:none}
}
.no-results .char-icon{width:96px}.empty-cart .char-icon{width:130px}#confirmation .char-icon{width:120px;margin:0}

/* Armador de picadas */
.picada-copy .button+.button{margin-left:8px}
.button.outline-cream{background:transparent;color:var(--peach);border-color:var(--peach);margin-top:15px;box-shadow:0 4px 0 #2a0610}
.button.outline-cream:hover{background:var(--peach);color:var(--wine)}
.builder{max-width:none;background:var(--cream)}
.builder .section-heading{max-width:1400px;margin-inline:auto}
.builder-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:50px;align-items:start;max-width:1400px;margin:0 auto}
.board-wrap{position:relative;padding:90px 0 96px}
.builder-bubble{position:absolute;top:0;left:4%;max-width:min(400px,80%);z-index:3;font-size:14px}
.board{position:relative;overflow:hidden;border-radius:0}
.board-surface{position:absolute;left:0;top:0;transform-origin:0 0}
.board-shadow{position:absolute;inset:0;filter:drop-shadow(0 5px 0 #8a5a2f) drop-shadow(0 16px 14px #3a1c0a59)}
.board-wood{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 42% 38%,#fff4,#fff0 70%),linear-gradient(165deg,#fff2,#fff0 42%,#2c130626),url(assets/picada/madera.webp) center/1400px auto;transition:clip-path .3s cubic-bezier(.23,1,.32,1)}
.board-handle{position:absolute;left:0;top:0;width:46px;height:92px;border-radius:24px 0 0 24px;background:url(assets/picada/madera.webp) 40% 30%/1400px auto;-webkit-mask:radial-gradient(circle 8px at 18px 46px,#0000 98%,#000);mask:radial-gradient(circle 8px at 18px 46px,#0000 98%,#000);transition:transform .3s cubic-bezier(.23,1,.32,1)}
.board-handle.top{width:92px;height:40px;border-radius:24px 24px 0 0;-webkit-mask:radial-gradient(circle 7px at 46px 16px,#0000 98%,#000);mask:radial-gradient(circle 7px at 46px 16px,#0000 98%,#000)}
.board-group{position:absolute;left:0;top:0;width:0;height:0;cursor:pointer;transition:transform .26s cubic-bezier(.77,0,.175,1),opacity .16s ease}
.board-group.out{opacity:0;pointer-events:none}
.board-portion{position:absolute;left:0;top:0;transition:transform .24s cubic-bezier(.23,1,.32,1)}
.board-portion img{display:block;width:100%;height:auto;filter:drop-shadow(0 1.5px 1px #2c1306b0) drop-shadow(0 6px 7px #2c13064d);-webkit-user-drag:none;user-select:none}
.board-bowl{position:absolute;border-radius:50%;background:radial-gradient(circle at 42% 36%,#fbf5ea 0 60%,#ddcdb4 76%,#ad9673 100%);box-shadow:0 2px 2px #2c130666,0 9px 14px #2c130659}
.board-bowl+.board-portion img{filter:none}
.board-item{all:unset;box-sizing:border-box;position:absolute;left:0;top:0;z-index:50;cursor:pointer;white-space:nowrap;font:800 var(--tag-size,13px)/1.2 var(--label);color:var(--wine);background:var(--cream);border:2px solid var(--wine);border-radius:999px;padding:3px 10px;opacity:0;pointer-events:none;transition:transform .26s cubic-bezier(.77,0,.175,1),background-color .16s ease,color .16s ease,opacity .16s ease}
/* En una picada real no hay carteles: el nombre aparece al tocar, al pasar el mouse o al llegar con el teclado. */
.board-item:focus-visible,.board-group.selected .board-item{opacity:1;pointer-events:auto}
.board-item b,.board-item i{font:inherit}.board-item i{font-weight:600}
.board-item b:after{content:' ·'}
.board-item.stack{white-space:normal;text-align:center;border-radius:12px;padding:3px 4px;line-height:1.15}.board-item.stack b,.board-item.stack i{display:block}.board-item.stack b:after{content:''}
.board-item:focus-visible{outline:3px dashed var(--cream);outline-offset:2px}
.board-group.selected .board-item{background:var(--wine);color:var(--cream)}
.board-empty{position:absolute;margin:0;text-align:center;font:22px/1.3 var(--slab);color:#fff6e9;text-shadow:0 1px 3px #3a1c0a;pointer-events:none;transition:opacity .16s ease}
.board-loader{position:absolute;left:0;top:0;width:var(--seal,184px);height:var(--seal,184px);background:var(--cream);border-radius:50%;box-shadow:0 8px 18px #2c130655;opacity:0;visibility:hidden;z-index:60}
.board-loader svg{display:block;width:100%;height:100%}
.board-loader .line,.board-loader .line *{fill:none;stroke:var(--wine);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.board-loader .line .dot{fill:var(--wine);stroke:none}
.board-loader span{position:absolute;left:10%;right:10%;top:64%;text-align:center;text-wrap:balance;font:800 var(--tag-size,13px)/1.2 var(--label);color:var(--wine)}
.line-cut{grid-column:1/-1;margin-top:-6px;font-size:13px;color:var(--muted)}
.line-cuts{grid-column:1/-1;display:flex;border:2px solid var(--wine);border-radius:999px;padding:2px}
.line-cuts button{flex:1;min-height:32px;border:0;border-radius:999px;background:none;color:var(--wine);font:700 13px var(--label);cursor:pointer;transition:background-color .16s ease,color .16s ease}
.line-cuts button[aria-pressed=true]{background:var(--wine);color:var(--cream)}
@media(hover:hover) and (pointer:fine){.board-group:hover .board-item{opacity:1}.line-cuts button:hover:not([aria-pressed=true]){background:#f4e6d2}}
@media(prefers-reduced-motion:reduce){.board-wood,.board-handle,.board-group,.board-portion,.board-item{transition:none}}
@keyframes plop{0%{opacity:0;transform:translateY(-36px) scale(.3)}70%{opacity:1;transform:scale(1.12)}100%{transform:none}}
@keyframes poof{to{opacity:0;transform:scale(.2) rotate(20deg)}}
.builder-host{position:absolute;right:-18px;bottom:-6px;width:120px;height:auto;rotate:8deg;filter:drop-shadow(0 8px 0 #0002);z-index:2}
.builder-host:not(.hop){animation:bob 3.2s ease-in-out infinite}
.board-note{font-size:13px;color:var(--muted);margin:14px 130px 0 0}
.builder-panel{background:#fffaf3;border:3px solid var(--wine);border-radius:28px;padding:24px;box-shadow:8px 8px 0 #500d201f}
.builder-status{background:#f4e6d2;border-radius:18px;padding:16px 18px;margin-bottom:8px}
#builder-reset{width:100%;margin:0 0 10px;justify-content:center;cursor:pointer}
.builder-status p{margin:0;font-size:14px}
.meter{position:relative;height:16px;border-radius:999px;background:#e5d3bd;margin:12px 0 10px;overflow:hidden}
.meter-zone{position:absolute;top:0;bottom:0;left:var(--zone-left,40%);width:var(--zone-width,20%);background:repeating-linear-gradient(45deg,#7d9a4a55 0 6px,#7d9a4a88 6px 12px)}
.meter-fill{position:absolute;left:0;top:4px;bottom:4px;width:var(--fill,0);border-radius:999px;background:var(--wine);transition:width .5s var(--bounce)}
.meter[data-state=ok] .meter-fill{background:#556b2f}
.builder-verdict strong{color:var(--wine)}
.builder-hints{margin:8px 0 0;padding:0;list-style:none;font-size:13px;color:var(--wine)}
.builder-hints li:before{content:'✦ ';color:var(--rose)}
.builder-list{list-style:none;margin:0;padding:0}
.builder-list li{display:grid;grid-template-columns:minmax(0,1fr) auto 86px 30px;align-items:center;gap:10px;padding:12px 6px;border-bottom:1px solid var(--line);border-radius:12px;transition:background .25s}
.builder-list li.selected{background:#f4e6d2}
.line-name strong{display:block;font:17px/1.15 var(--slab);color:var(--wine)}
.line-name small{font:700 11px var(--label);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.mini-stepper{display:flex;align-items:center;border:2px solid var(--wine);border-radius:999px;padding:2px}
.mini-stepper button{width:28px;height:28px;border-radius:50%;border:0;background:none;color:var(--wine);font-size:18px;cursor:pointer;transition:background .2s,color .2s}
.mini-stepper button:hover:not(:disabled){background:var(--wine);color:var(--cream)}
.mini-stepper output{min-width:76px;text-align:center;font:700 13px var(--label);color:var(--wine)}
.line-price{text-align:right;font-weight:600;font-size:14px;color:var(--ink)}
.line-remove{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:none;color:var(--wine);font-size:18px;cursor:pointer;transition:transform .25s var(--bounce),border-color .2s}
.line-remove:hover{transform:rotate(90deg);border-color:var(--wine)}
.builder-add{margin:18px 0 6px}
.builder-add label{display:block;font:800 11px var(--label);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.builder-add>div{display:flex;gap:10px}
.builder-add select{flex:1;font:14px 'DM Sans',Arial,sans-serif;color:var(--ink);border:2px solid var(--line);border-radius:14px;background:#fff;min-height:44px;padding:8px 12px;min-width:0}
.builder-add .button{cursor:pointer;gap:12px}
.builder-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px dashed var(--line);margin-top:16px;padding-top:14px}
.builder-total strong{font:30px var(--slab);color:var(--wine)}
.builder-note{font-size:12px;color:var(--muted);margin:6px 0 16px}
.builder-actions{display:flex;flex-wrap:wrap;gap:10px}
.builder-actions .button{cursor:pointer;flex:1 1 200px}
@media(max-width:1050px){.builder-layout{grid-template-columns:1fr;gap:30px}.board-wrap{max-width:760px}}
@media(max-width:600px){
  .picada-copy .button+.button{margin-left:0}
  .picada-copy .button{width:100%}
  .board-wrap{padding-top:100px}
  .builder-host{width:84px;right:-8px}
  .board-wrap{padding-bottom:84px}
  .board-note{margin-right:96px}
  .builder-panel{padding:16px;border-radius:22px}
  .builder-list li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name remove' 'step price';row-gap:8px}
  .line-name{grid-area:name}.line-remove{grid-area:remove}.mini-stepper{grid-area:step;justify-self:start}.line-price{grid-area:price}
  .builder-add>div{flex-direction:column}
}
@media(min-width:1051px){.board-wrap{position:sticky;top:10px}}
.customer-fields{display:grid;gap:10px;margin-top:18px}.customer-fields[hidden]{display:none}
.customer-fields label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}.customer-fields small{font-size:12px}
.customer-fields input{width:100%;font-size:15px}

/* Legibilidad: texto corrido de 16 px en un tono más oscuro y etiquetas de 13 px como mínimo. */
:root{--muted:#564a41}
.fun .intro,.fun .section-heading>p,.fun .cast-heading>p,.fun .product-card p,.fun .picada-copy>p:not(.eyebrow),.fun .expert-copy>p:not(.eyebrow),.fun .about-bottom>p,.fun .contact p:not(.eyebrow),.fun .questions summary,.fun .questions details>p,.fun .shop-heading p:not(.eyebrow):not(.breadcrumb),.fun .card-description,.fun .sidebar-note p{font-size:16px}
.fun .eyebrow,.fun .announcement,.fun .ticker-track span,.fun .brand small,.fun .bubble strong,.fun .cast-card>p,.fun .product-photo>span,.fun .product-photo>small,.fun .line-name small,.fun .builder-add label,.fun .calc-label,.fun .picada-copy .calc-note,.fun .builder-note,.fun .about-place,.fun .hero-note,.fun .footer-bottom,.fun .footer-top>a:not(.brand),.fun .shop-card-image small,.fun .card-category,.fun .price-line span,.fun .shop-card form label,.fun .shop-footnote,.fun .customer-fields small{font-size:13px}
.fun .board-item.stack span{text-wrap:balance}
.fun .builder-status p,.fun .builder-hints,.fun .calc-result span,.fun .text-link,.fun .catalog-note,.fun .board-note{font-size:14px}
/* El sello es decorativo: en celular su texto no se puede leer, así que queda solo la F. */
@media(max-width:600px){.fun .stage-stamp{font-size:0}}
/* Oli es un extra: en pantallas chicas taparía textos y competiría con el botón de WhatsApp. */
@media(max-width:850px){.gossip{display:none}}

/* Menos movimiento: queda una sola cinta y, en la portada, Salamín y los rayos. Los demás personajes se mueven al hablar. */
.ticker-track{animation:none;display:flex;justify-content:center;padding-left:0;width:100%}
.ticker-track [aria-hidden],.ticker-track>span:first-child,.ticker-track>span:first-child+i,.ticker-track>span:nth-of-type(3)+i{display:none}
.marquee-track i{animation:none}
.offscreen,.offscreen *,.offscreen:before,.offscreen *:before{animation-play-state:paused!important}
.sunburst{animation:none}.stage .sunburst{animation:spin 80s linear infinite}
.expert-host:before,.stage-stamp{animation:none}
.stage-stamp{transform:rotate(8deg)}
.peek:not(.hop) img,.cast-card .star:not(.hop) img,.calc-host:not(.hop),.contact-host:not(.hop),.faq-host img:not(.hop),.shop-host:not(.hop),.char-icon:not(.hop),.builder-host:not(.hop){animation:none}
.parade-track{animation:none;width:auto;justify-content:center;transform:none}
.parade img{animation:none}.parade img:nth-child(n+7){display:none}
@media(max-width:850px){
  .parade{display:none}
  .ticker{white-space:normal;padding:9px 16px;text-align:center}
  .ticker-track>span:not(:nth-of-type(2)),.ticker-track>i{display:none}
}

/* Barra de pedido: en pantallas chicas el pedido y WhatsApp siempre quedan a mano. */
.order-bar{display:none}
@media(max-width:850px){
  body:has(.order-bar){padding-bottom:84px}
  body:has(.order-bar) .whatsapp-float{display:none}
  .order-bar{display:flex;align-items:center;gap:8px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:14;padding:7px;background:var(--wine);color:var(--cream);border-radius:18px;box-shadow:0 8px 20px #0004}
  #order-bar-open{all:unset;box-sizing:border-box;flex:1;min-width:0;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;cursor:pointer;font:600 15px/1.2 'DM Sans',Arial,sans-serif}
  #order-bar-open:focus-visible,#order-bar-whatsapp:focus-visible{outline:3px solid var(--peach);outline-offset:2px;border-radius:12px}
  #order-bar-cta{flex-shrink:0;background:var(--peach);color:var(--wine);border-radius:999px;padding:8px 13px;font:800 13px/1 var(--label)}
  #order-bar-cta[hidden]{display:none}
  #order-bar-whatsapp{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#1f7a4a;color:#fff}
  #order-bar-whatsapp[hidden]{display:none}
  body:has(.order-bar) .toast{bottom:84px}
}

/* Celular: títulos más cortos en pantalla, catálogo compacto y categorías visibles. */
@media(max-width:600px){
  .fun .hero h1{font-size:clamp(34px,11.4vw,46px)}
  .fun .section-heading h2,.fun .cast-heading h2,.fun .picada-copy h2,.fun .expert-copy h2,.fun .about h2,.fun .contact h2,.fun .faq h2{font-size:clamp(30px,9.2vw,36px);letter-spacing:-.3px}
  .fun .shop-heading h1{font-size:clamp(26px,8.2vw,32px);margin-bottom:12px}
  .fun footer{padding-bottom:84px}
  .fun .categories{flex-wrap:wrap;overflow:visible;padding-right:0;-webkit-mask-image:none;mask-image:none}
  .fun .catalog-grid{gap:12px}
  .fun .about h2{font-size:clamp(25px,7.4vw,29px);line-height:1.14}.fun .about h2 br{display:none}
  .fun .shop-card:hover{transform:none;box-shadow:none}
  .fun .shop-card{display:grid;grid-template-columns:104px minmax(0,1fr);border-radius:18px}
  .fun .shop-card-image{height:auto;min-height:100%}
  .fun .shop-card-image>img{position:absolute;inset:0;height:100%}
  .fun .shop-card-image>small,.fun .card-category{display:none}
  .fun .shop-card-body{padding:12px}
  .fun .shop-card h2{font-size:21px;line-height:1.1;margin-bottom:4px}
  .fun .card-description{font-size:14px;line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .fun .price-line{margin-bottom:8px}
  .fun .shop-card form{display:grid;gap:8px}
  .fun .shop-card form label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .fun .shop-card select,.fun .shop-card input{min-height:44px;margin:0}
  .fun .add-button{min-height:44px;font-size:14px;padding-block:8px;margin:0}
}
@media(max-width:360px){.fun .shop-card{grid-template-columns:82px minmax(0,1fr)}}