*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:#FBE3F6;color:#2C2C2A;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* clip mata el paneo lateral en iOS sin crear un contexto de scroll nuevo */
@supports (overflow:clip){ html,body{overflow-x:clip} }
a{color:#78024D;text-decoration:none}
a:hover{color:#C42B78}
::selection{background:#78024D;color:#FE95F6}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#FBE3F6}
::-webkit-scrollbar-thumb{background:#FE95F6;border:3px solid #78024D;border-radius:999px}
img{-webkit-user-drag:none;user-select:none}
[id]{scroll-margin-top:100px}
@keyframes revoltMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes rvStamp { 0%{transform:scale(0.2) rotate(-8deg);opacity:0} 60%{transform:scale(1.12) rotate(1.5deg);opacity:1} 100%{transform:scale(1) rotate(-2deg);opacity:1} }
@keyframes rvMenuPop { 0%{transform:scale(0.4);opacity:0} 70%{transform:scale(1.08);opacity:1} 100%{transform:scale(1);opacity:1} }
@media (prefers-reduced-motion: reduce){ *{transition-duration:1ms!important;animation-duration:1ms!important} }
/* sticker buttons: hover lift + press. Shadows via CSS vars per element */
.lift{transition:transform 180ms cubic-bezier(0.34,1.35,0.64,1),box-shadow 180ms cubic-bezier(0.34,1.35,0.64,1);box-shadow:var(--sh)}
.lift:hover{transform:var(--th,rotate(-1.2deg) translateY(-3px));box-shadow:var(--shh,var(--sh))}
.press:active{transform:translate(3px,3px) !important;box-shadow:var(--sha,var(--sh)) !important}
/* ── HEADER · la tapa del frasco ── */
.hdr-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
height:78px;padding:0 clamp(14px,4vw,44px);
background:#C42B78;box-shadow:inset 0 5px 0 #D9509A;
transition:height 260ms cubic-bezier(0.4,0,0.2,1)}
#site-header.scrolled .hdr-bar{height:60px}
@media (max-width:859px){ .hdr-bar{height:70px} #site-header.scrolled .hdr-bar{height:56px} }
.logo-jar{display:flex;align-items:center;transform:rotate(-2deg);transition:transform 180ms cubic-bezier(0.34,1.35,0.64,1)}
.logo-jar:hover{transform:rotate(1deg) scale(1.04)}
.logo-jar img{height:60px;width:auto;display:block;transition:height 260ms cubic-bezier(0.4,0,0.2,1)}
#site-header.scrolled .logo-jar img{height:44px}
@media (max-width:859px){ .logo-jar img{height:48px} #site-header.scrolled .logo-jar img{height:38px} .hdr-bar{height:70px} #site-header.scrolled .hdr-bar{height:56px} }
@media (max-width:380px){ .logo-jar img{height:40px} }
.navlink{position:relative;font-family:'DM Sans',sans-serif;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:0.12em;color:#FFFFFF;padding:9px 13px;border-radius:8px;transition:transform 180ms cubic-bezier(0.34,1.35,0.64,1),background 180ms ease,color 180ms ease}
.navlink:hover{transform:rotate(var(--rot,-3deg)) scale(1.06);background:#FE95F6;color:#78024D}
/* sección activa: subrayado de crema, como un trazo de glaseado */
.navlink::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:3px;border-radius:999px;background:#FE95F6;transform:scaleX(0);transform-origin:left;transition:transform 240ms cubic-bezier(0.34,1.35,0.64,1)}
.navlink[aria-current]::after{transform:scaleX(1)}
.navlink[aria-current]{color:#FE95F6}
.navlink[aria-current]:hover{color:#78024D}
.navlink[aria-current]:hover::after{background:#78024D}
.header-cta{display:inline-flex;align-items:center;gap:9px;margin-left:8px;background:#FE95F6;color:#78024D;font-family:'Anton',sans-serif;font-size:16px;letter-spacing:0.01em;padding:8px 8px 9px 18px;border-radius:999px;box-shadow:3px 3px 0 #78024D;transition:transform 180ms cubic-bezier(0.34,1.35,0.64,1),box-shadow 180ms cubic-bezier(0.34,1.35,0.64,1)}
.cta-price{background:#78024D;color:#FBE3F6;border-radius:999px;padding:4px 12px 5px;font-size:0.86em}
.header-cta:hover{transform:rotate(-1.5deg) translateY(-2px);box-shadow:5px 5px 0 #78024D;color:#78024D}
.header-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #78024D}
.navbtn{width:40px;height:40px;border-radius:999px;background:transparent;border:3px solid #78024D;color:#78024D;display:flex;align-items:center;justify-content:center;transition:transform 300ms cubic-bezier(0.34,1.35,0.64,1);cursor:pointer}
.navbtn:hover{transform:scale(1.08)}
.menu-item{font-family:'Anton',sans-serif;font-size:34px;letter-spacing:0.01em;background:#FE95F6;color:#78024D;padding:8px 30px 12px;border-radius:10px;box-shadow:4px 4px 0 #C42B78;animation:rvMenuPop 420ms cubic-bezier(0.34,1.35,0.64,1) both}
.marquee-track{display:flex;width:max-content;animation:revoltMarquee 26s linear infinite;will-change:transform;transform:translateZ(0)}
/* el separador va como margin-right en cada pieza, no como gap:
gap no se aplica tras el último elemento y el bucle de -50% saltaría */
.marquee-track.slow{animation-duration:32s}
.marquee-track.slow img{margin-right:clamp(30px,5vw,70px)}
/* pausar al pasar el mouse — solo donde hay hover de verdad: en táctil el primer
toque dejaba el :hover pegado y el carrusel de mascotas se congelaba */
@media (hover:hover) and (pointer:fine){ .marquee-track.slow:hover{animation-play-state:paused} }
.desktop-only{display:block}
.mobile-only{display:none}
.main-nav{display:flex;align-items:center;gap:clamp(6px,1.2vw,18px)}
@media (max-width:859px){
.desktop-only{display:none}
.mobile-only{display:flex}
.main-nav{display:none}
}
/* hero en teléfono: tarjeta a lo ancho, CTA como barra inferior, personajes por encima.
la tarjeta va a 110px pa' que el bloque del CTA (botón + nota, ~92px) nunca la tape */
@media (max-width:639px){
#ring{top:calc(100% - 178px) !important}
#hero-shadow{bottom:184px !important;height:34px !important}
#cast-card{left:12px !important;right:12px !important;bottom:calc(110px + env(safe-area-inset-bottom)) !important;max-width:none !important;box-shadow:3px 3px 0 #78024D !important;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}
#cast-card > div:nth-child(2){grid-column:1}
#cast-card > div:nth-child(3){grid-column:2;grid-row:1 / span 2;margin-top:0 !important}
#cast-card .navbtn{width:44px;height:44px}
#hero-cta-wrap{left:12px !important;right:12px !important;bottom:calc(10px + env(safe-area-inset-bottom)) !important;align-items:stretch !important;gap:6px !important}
#hero-cta{justify-content:center;font-size:19px !important;padding:10px 14px 12px !important}
#hero-cta-wrap > span{align-self:center;font-size:10.5px !important}
}
/* juego atrápelos: capa propia por imagen para que el clip redondeado no cueste en iOS,
y salida/entrada un pelo más rápida pa' que se sienta vivo */
[data-hole] img{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition-duration:170ms !important}
.hidden{display:none !important}
/* visible para lectores de pantalla y buscadores, no para la vista */
.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}
/* campos del pedido */
.campo{width:100%;box-sizing:border-box;min-height:46px;background:#FFFFFF;border:3px solid #78024D;border-radius:10px;
padding:10px 14px;font-family:'DM Sans',sans-serif;font-size:15px;color:#2C2C2A;transition:box-shadow 150ms ease}
.campo::placeholder{color:#8A8A87}
.campo:focus{outline:none;box-shadow:3px 3px 0 #C42B78}
.campo:focus-visible{outline:3px solid #C42B78 !important;outline-offset:2px !important}
/* CTA fijo inferior (solo teléfono) */
#sticky-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:66;display:none;align-items:center;justify-content:space-between;gap:10px;
background:#78024D;color:#FBE3F6;border:3px solid #78024D;border-radius:999px;box-shadow:4px 4px 0 #C42B78;
padding:9px 9px 10px 20px;font-family:'Anton',sans-serif;font-size:20px;letter-spacing:-0.01em;
transform:translateY(140%);transition:transform 320ms cubic-bezier(0.34,1.35,0.64,1)}
#sticky-cta:active{transform:translateY(0) scale(0.98)}
#sticky-cta.show{transform:translateY(0)}
#sticky-cta:hover{color:#FBE3F6}
.sticky-left{display:inline-flex;align-items:center;gap:9px}
.sticky-price{background:#FE95F6;color:#78024D;border-radius:999px;padding:6px 14px 7px;font-size:0.85em}
@media (max-width:859px){ #sticky-cta{display:flex} }
@media (prefers-reduced-motion: reduce){ #sticky-cta{transition:none} }
/* foco visible para teclado (el cursor:none global no debe dejar al teclado a ciegas) */
:focus-visible{outline:3px solid #C42B78 !important;outline-offset:3px !important;border-radius:6px}
#mobile-menu :focus-visible, #parche :focus-visible, #juego :focus-visible, [data-hole]:focus-visible{outline-color:#FE95F6 !important}
/* áreas táctiles mínimas de 44px en móvil */
@media (max-width:639px){
#pepas-badge{right:6px !important;top:-12px !important;padding:9px 14px 11px !important}
.navbtn{width:44px;height:44px}
#qty-dec, #qty-inc{width:44px !important;height:44px !important}
#wheel-close{width:46px !important;height:46px !important}
/* los personajes sticker no deben pegarse al borde */
.sticker-card img{right:-8px !important}
}
/* ── páginas internas ── */
.page-main{max-width:760px;margin:0 auto;padding:clamp(120px,18vh,150px) clamp(16px,5vw,40px) 60px}
.eyebrow{font-family:'DM Sans',sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.18em;color:#C42B78}
.faq-list{display:flex;flex-direction:column;gap:14px;margin-top:36px}
.faq-item{background:#FFFFFF;border:3px solid #78024D;border-radius:12px;overflow:hidden}
.faq-q{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;min-height:44px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:16px;color:#78024D;cursor:pointer}
.faq-q .plus{flex:none;transition:transform 200ms ease}
.faq-item.open .faq-q .plus{transform:rotate(45deg)}
.faq-panel{overflow:hidden;height:0;transition:height 260ms cubic-bezier(0.4,0,0.2,1)}
.faq-a{font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;color:#2C2C2A;margin:0;padding:0 20px 18px}
@media (prefers-reduced-motion: reduce){ .faq-panel{transition:none} }
.footer-nav a[aria-current]{color:#C42B78;text-decoration:underline;text-underline-offset:4px}