/* Pão de Alho do Julio — Biosite | estilos globais */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
html,body{margin:0;padding:0;background:#070606;overflow-x:clip;touch-action:pan-y;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
body{font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;color:#F5F1EA}
img{display:block;max-width:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,a{-webkit-touch-callout:none}
a{color:#D6121A;text-decoration:none}
a:hover{color:#ff3b41}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid #D6121A;outline-offset:2px}
::selection{background:#D6121A;color:#fff}

/* fundo do desktop: fixed só onde não custa (mobile usa scroll) */
.palco{position:relative;min-height:100dvh;display:flex;justify-content:center;background-color:#070606;background-image:radial-gradient(58% 42% at 50% 8%,rgba(214,18,26,.16),rgba(7,6,6,0) 70%),radial-gradient(46% 34% at 50% 92%,rgba(214,18,26,.1),rgba(7,6,6,0) 72%),url(../images/concreto.webp);background-size:auto,auto,190px 190px;background-repeat:no-repeat,no-repeat,repeat;background-attachment:scroll,scroll,scroll;background-blend-mode:normal,normal,soft-light}
@media (min-width:900px) and (hover:hover){.palco{background-attachment:fixed,fixed,fixed}}

/* animações — só transform/opacity */
@keyframes zoomIn{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes riseRot{from{opacity:0;transform:translateY(24px) rotate(-1.5deg)}to{opacity:1;transform:translateY(0) rotate(-1.5deg)}}
@keyframes dropIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes slam{0%{opacity:0;transform:translateY(34px) scale(.82)}58%{opacity:1;transform:translateY(-5px) scale(1.05)}78%{transform:translateY(2px) scale(.99)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes breathe{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(-2deg) scale(1.018)}}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes volta{from{transform:translate(-50%,-50%) rotate(0turn)}to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes shine{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes pulseCta{0%,100%{box-shadow:0 14px 34px rgba(214,18,26,.4),0 0 0 0 rgba(214,18,26,.34)}55%{box-shadow:0 16px 40px rgba(214,18,26,.5),0 0 0 12px rgba(214,18,26,0)}}
@keyframes pulseBar{0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 0 rgba(214,18,26,.4)}55%{box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 10px rgba(214,18,26,0)}}
@keyframes down{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

/* animações contínuas param quando saem da tela (economia de CPU) */
.fora [style*="infinite"],.fora *{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}