@font-face{font-family:"Beautiful Freak";src:url("../fonts/beautiful-freak-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Heavitas";src:url("../fonts/heavitas.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alte Haas Grotesk";src:url("../fonts/alte-haas-grotesk-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alte Haas Grotesk";src:url("../fonts/alte-haas-grotesk-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Rasta Script";src:url("../fonts/rasta-script.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid #E94B4C;outline-offset:2px}
::selection{background:#FFDB46;color:#222222}
.caso{margin:0;font-family:"Rasta Script",cursive;font-size:clamp(30px,4vw,56px);line-height:1.05;color:#E9E4D6}
body{margin:0;background:#E9E4D6}
a{color:#222222}a:hover{color:#E94B4C}
.btn{transition:filter 100ms linear, box-shadow 100ms linear, transform 80ms linear}
.btn:hover{filter:brightness(0.94);box-shadow:0 4px 4px rgba(0,0,0,0.25)}
.btn:active{transform:translateY(2px)}
.hero-img{background-image:url(../img/hero-centrado.jpg);background-size:cover;background-position:center}
.tex{background-image:url(../img/rasta-textura.webp);background-size:cover;background-position:center}
.cosquin-bg{background-image:url(../img/fondo-cosquin.jpg);background-size:cover;background-position:center top}
.navlink{color:#E9E4D6;text-decoration:none;padding:12px 0}
.navlink:hover{color:#FFDB46}
.letra{transition:transform 120ms linear}
.letra:hover{transform:translate(var(--dx),var(--dy)) rotate(var(--r))}
/* cursores */
html,body,body *{cursor:url(../img/cursor-flecha.png) 2 0, auto}
.productos,.productos *{cursor:url(../img/cursor-ilustrado.png) 24 24, auto}
.art-negro,.art-negro *{cursor:url(../img/cursor-ilustrado.png) 24 24, auto}
.art-blanco,.art-blanco *{cursor:url(../img/cursor-blanco.png) 24 24, auto}
section[aria-label="Trico y Trico Maicena"],section[aria-label="Trico y Trico Maicena"] *{cursor:url(../img/cursor-trico.png) 24 24, auto}
section[aria-label="Rasta Mini"],section[aria-label="Rasta Mini"] *{cursor:url(../img/cursor-mini.png) 23 23, auto}
a,a *,button,button *,.btn,.btn *{cursor:url(../img/cursor-mano.png) 11 0, pointer !important}
.half{transition:flex-grow 200ms linear}
.half:hover{flex-grow:1.7}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{display:flex;width:max-content;animation:marquee 40s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
.bob{animation:bob 4s ease-in-out infinite}
@keyframes pop{0%{transform:scale(0.6) rotate(-8deg);opacity:0}70%{transform:scale(1.08) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(-2deg);opacity:1}}
.pop{animation:pop 320ms linear both}
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-4px,2px) rotate(-1deg)}40%{transform:translate(4px,-2px) rotate(1deg)}60%{transform:translate(-3px,-2px) rotate(-1deg)}80%{transform:translate(3px,2px) rotate(1deg)}}
.shake{animation:shake 300ms linear}
.mordida{-webkit-mask-image:radial-gradient(circle at 70% 0, transparent 0 78px, #000 79px),radial-gradient(circle at 60% 48px, transparent 0 34px, #000 35px),radial-gradient(circle at 70% 62px, transparent 0 32px, #000 33px),radial-gradient(circle at 80% 48px, transparent 0 34px, #000 35px),radial-gradient(circle at 54% 18px, transparent 0 28px, #000 29px),radial-gradient(circle at 86% 18px, transparent 0 28px, #000 29px);-webkit-mask-composite:source-in;mask-image:radial-gradient(circle at 70% 0, transparent 0 78px, #000 79px),radial-gradient(circle at 60% 48px, transparent 0 34px, #000 35px),radial-gradient(circle at 70% 62px, transparent 0 32px, #000 33px),radial-gradient(circle at 80% 48px, transparent 0 34px, #000 35px),radial-gradient(circle at 54% 18px, transparent 0 28px, #000 29px),radial-gradient(circle at 86% 18px, transparent 0 28px, #000 29px);mask-composite:intersect}
.rayas{background:repeating-linear-gradient(-45deg,#FFDB46 0 18px,#222222 18px 36px)}
@keyframes reveal{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@supports (animation-timeline: view()){ .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 35%} }
.story{transition:transform 120ms linear}
.story:hover{transform:scale(1.06) rotate(-3deg)}
@keyframes ring{0%,100%{box-shadow:0 0 0 4px #E9E4D6,0 0 0 8px #6FB962}33%{box-shadow:0 0 0 4px #E9E4D6,0 0 0 8px #FFDB46}66%{box-shadow:0 0 0 4px #E9E4D6,0 0 0 8px #E94B4C}}
.ring{animation:ring 3s steps(1,end) infinite}
.tile img{transition:transform 160ms linear}
.tile{-webkit-mask-image:none;mask-image:none}
.tile:hover{-webkit-mask-image:radial-gradient(circle at 100% 0%, transparent 0 110px, #000 111px),radial-gradient(circle at 88% 0%, transparent 0 46px, #000 47px),radial-gradient(circle at 76% 2%, transparent 0 34px, #000 35px),radial-gradient(circle at 100% 14%, transparent 0 46px, #000 47px),radial-gradient(circle at 99% 26%, transparent 0 34px, #000 35px);-webkit-mask-composite:source-in;mask-image:radial-gradient(circle at 100% 0%, transparent 0 110px, #000 111px),radial-gradient(circle at 88% 0%, transparent 0 46px, #000 47px),radial-gradient(circle at 76% 2%, transparent 0 34px, #000 35px),radial-gradient(circle at 100% 14%, transparent 0 46px, #000 47px),radial-gradient(circle at 99% 26%, transparent 0 34px, #000 35px);mask-composite:intersect}
.tilewrap:nth-child(2) .tile:hover{-webkit-mask-image:radial-gradient(circle at 0% 0%, transparent 0 110px, #000 111px),radial-gradient(circle at 12% 0%, transparent 0 46px, #000 47px),radial-gradient(circle at 24% 2%, transparent 0 34px, #000 35px),radial-gradient(circle at 0% 14%, transparent 0 46px, #000 47px),radial-gradient(circle at 1% 26%, transparent 0 34px, #000 35px);-webkit-mask-composite:source-in;mask-image:radial-gradient(circle at 0% 0%, transparent 0 110px, #000 111px),radial-gradient(circle at 12% 0%, transparent 0 46px, #000 47px),radial-gradient(circle at 24% 2%, transparent 0 34px, #000 35px),radial-gradient(circle at 0% 14%, transparent 0 46px, #000 47px),radial-gradient(circle at 1% 26%, transparent 0 34px, #000 35px);mask-composite:intersect}
.migas{opacity:0;transition:opacity 120ms linear}
.tilewrap:hover .migas{opacity:1}
.tile:hover img{transform:scale(1.05) rotate(1.5deg)}
.tile .tag{transition:transform 120ms linear}
.tile:hover .tag{transform:rotate(0deg) scale(1.08)}

@media (prefers-reduced-motion: reduce){.marquee,.bob,.pop,.shake,.reveal,.ring{animation:none}}

/* menú de celular */
.menu-btn{position:relative;display:none;width:48px;height:48px;border:0;background:#FFDB46;box-shadow:inset 0 0 0 3px #222222;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0}
.menu-btn img{display:block;width:30px;height:auto}
.menu-btn .x{display:none;position:relative;width:22px;height:22px;background:none}
.menu-btn[aria-expanded="true"] img{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn .x span{display:block;position:absolute;left:0;top:9.5px;width:22px;height:3px;background:#222222}
.menu-btn .x span:nth-child(1){transform:rotate(45deg)}
.menu-btn .x span:nth-child(2){transform:rotate(-45deg)}
@media (max-width: 860px){
  .menu-btn{display:flex}
  .nav{display:none !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch !important;gap:0 !important;background:#222222;padding:8px clamp(16px,4vw,50px) 20px;box-shadow:0 4px 4px rgba(0,0,0,0.35)}
  .nav.open{display:flex !important}
  .nav .navlink{font-size:20px;padding:16px 0;border-bottom:2px solid #333333}
  .nav .btn{margin-top:16px;text-align:center;font-size:18px}
  .etb{display:none !important}
  .cara{display:none}
  .cara-fija{display:none !important}
}



/* cara del hero que viaja al rincón y queda fija como botón de inicio (solo compu) */
.solo-movil{display:none}
.cara-fija{display:none;position:fixed;left:0;top:0;z-index:50;line-height:0;transform-origin:0 0;will-change:transform}
.cara-fija img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 4px rgba(0,0,0,0.3))}
.nav{margin-left:auto}
@media (min-width: 861px){
  .logo-header{display:none !important}
  .js-cara .cara{visibility:hidden}
  .js-cara .cara-fija{display:block}
}
@media (max-width: 860px){
  .solo-web{display:none}
  .solo-movil{display:block}
}