/* Base comum dos modelos OBZON. Cada modelo define suas cores e fontes em :root
   (--c1 principal, --c2 destaque, --ink texto, --bg fundo, --font-h títulos, --font-b texto). */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-b,system-ui,sans-serif);color:var(--ink,#111);background:var(--bg,#fff);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-h,inherit);line-height:1.08;margin:0;letter-spacing:-.02em}
p{margin:0}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:1.25em;line-height:1;display:inline-block;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 1,"wght" 500;vertical-align:middle}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cover{width:100%;height:100%;object-fit:cover}
.stars{color:#f5b301;letter-spacing:2px}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;background:var(--c1);flex:none}
.avatars{display:flex}.avatars .avatar{border:2px solid #fff;margin-left:-10px;width:36px;height:36px;font-size:12px}.avatars .avatar:first-child{margin-left:0}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marq 32s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.logo-fake{display:flex;align-items:center;gap:8px;font-weight:700;font-size:20px;opacity:.55;white-space:nowrap}
.scroller{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.scroller::-webkit-scrollbar{display:none}
.scroller>*{scroll-snap-align:start;flex:none}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
.obzon-note{text-align:center;font:12px/1.5 system-ui,sans-serif;color:#888;padding:16px}
.obzon-note a{text-decoration:underline}

/* ---------- Movimento (scroll) ---------- */
.js [data-anim]{transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),filter .9s ease var(--d,0ms),clip-path 1.1s cubic-bezier(.7,0,.2,1) var(--d,0ms);will-change:transform,opacity}
.js [data-anim]:not(.in){opacity:0}
.js [data-anim=up]:not(.in),.js [data-anim].out-down[data-anim=up]{transform:translateY(46px)}
.js [data-anim=up].out-up{transform:translateY(-46px)}
.js [data-anim=down]:not(.in){transform:translateY(-40px)}
.js [data-anim=left]:not(.in){transform:translateX(-60px)}
.js [data-anim=right]:not(.in){transform:translateX(60px)}
.js [data-anim=zoom]:not(.in){transform:scale(.88)}
.js [data-anim=blur]:not(.in){filter:blur(14px);transform:translateY(24px)}
.js [data-anim=clip]{clip-path:inset(0 0 0 0 round var(--r,24px))}
.js [data-anim=clip]:not(.in){opacity:1;clip-path:inset(18% 10% 18% 10% round var(--r,24px))}
.js [data-anim=clip] img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js [data-anim=clip]:not(.in) img{transform:scale(1.25)}
[data-scrub=scale]{transform:scale(calc(.9 + var(--p,1) * .1));transform-origin:center top}
[data-scrub=reveal]{clip-path:inset(0 calc((1 - var(--p,1)) * 12%) round var(--r,28px))}
.split-word{display:inline-block;overflow:hidden;vertical-align:top}
.hover-lift{transition:transform .35s ease,box-shadow .35s ease}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(0,0,0,.25)}
.img-zoom{overflow:hidden}.img-zoom img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}.img-zoom:hover img{transform:scale(1.07)}
@keyframes floaty{50%{transform:translateY(-10px)}}
.floaty{animation:floaty 5s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c2,#fc0) 60%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
.pulse{animation:pulse-ring 1.8s ease-out infinite}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Menu do celular (todos os modelos usam .nav-links e [data-menu-toggle]) */
.menu-btn{display:none;background:none;border:0;cursor:pointer;font-size:28px}
@media (max-width:900px){
  .menu-btn{display:inline-grid}
  .nav-links{display:none!important}
  body.menu-open .nav-links{display:flex!important;position:fixed;inset:70px 16px auto;flex-direction:column;gap:6px;padding:18px;background:#fff;color:#111;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);z-index:60}
  .wrap{width:calc(100% - 32px)}
}

/* Celular: títulos cabem na tela e o cabeçalho fica só com logo + menu (os botões continuam no corpo da página). */
@media (max-width:600px){
  h1{font-size:clamp(32px,9.6vw,44px)!important;line-height:1.05!important;overflow-wrap:break-word}
  header .btn,.bar>.btn,.nav>.btn,.top>.btn,.top-r .btn{display:none!important}
  .brand,.logo{font-size:18px!important;max-width:70vw}
}