/* base.css — mecânica invisível da página (base do estúdio; não editar por cliente).
   Nenhuma cor, fonte, tamanho ou espaçamento mora aqui: isso é do styles.css de cada cliente.
   Linkar ANTES do styles.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100svh; -webkit-font-smoothing: antialiased; }
img, video, picture, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* link "pular para o conteúdo": invisível até receber foco; nunca contribui para a largura da página */
.pular { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 14px; transform: translateY(-200%); transition: transform 150ms ease-out; }
.pular:focus { transform: none; outline: 2px solid currentColor; outline-offset: 2px; }

/* foco visível só no teclado */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ===================== KIT DE MOTION (20/10/2026 — regra do Daniel: todo site tem motion) =====================
   Tudo que esconde só existe sob html.js (main.js só adiciona a classe com IntersectionObserver e sem reduced-motion),
   com rede de segurança: .rv revelado 1,2 s depois do load; hero liberada por html.m-pronto 2,6 s depois do load.
   Sem JS, com reduced-motion ou depois da rede, tudo nasce visível. Nenhuma cor aqui. */
:root { --m-ease: cubic-bezier(0.22, 1, 0.36, 1); --m-dur: 760ms; }

/* --- reveal ao rolar: .rv (+ data-rv="up|down|left|right|zoom|blur|clip|clip-up"), atraso por --atraso --- */
html.js .rv { opacity: 0; transform: translateY(36px); transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease), filter var(--m-dur) var(--m-ease), clip-path 1000ms var(--m-ease); transition-delay: var(--atraso, 0ms); }
html.js .rv[data-rv="down"] { transform: translateY(-36px); }
html.js .rv[data-rv="left"] { transform: translateX(-56px); }
html.js .rv[data-rv="right"] { transform: translateX(56px); }
html.js .rv[data-rv="zoom"] { transform: scale(0.9); }
html.js .rv[data-rv="blur"] { transform: translateY(18px); filter: blur(10px); }
/* cortina: a foto já está lá (opacity 1) e é descoberta da esquerda (clip) ou de baixo (clip-up); a imagem dentro faz um zoom-out */
html.js .rv[data-rv="clip"], html.js .rv[data-rv="clip-up"] { opacity: 1; transform: none; }
html.js .rv[data-rv="clip"] { clip-path: inset(0 100% 0 0); }
html.js .rv[data-rv="clip-up"] { clip-path: inset(100% 0 0 0); }
html.js .rv[data-rv="clip"] > img, html.js .rv[data-rv="clip-up"] > img, html.js .rv[data-rv="clip"] > picture img, html.js .rv[data-rv="clip-up"] > picture img { transform: scale(1.12); transition: transform 1300ms var(--m-ease); transition-delay: var(--atraso, 0ms); }
html.js .rv.rv--on { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
html.js .rv.rv--on > img, html.js .rv.rv--on > picture img { transform: none; }
html:not(.js) .rv { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
/* palavras do título entram uma a uma (main.js divide o texto em .m-palavra; --i = posição) */
html.js .rv .m-palavra { display: inline-block; opacity: 0; transform: translateY(0.55em) rotate(1.5deg); transition: opacity 600ms var(--m-ease), transform 600ms var(--m-ease); transition-delay: calc(var(--atraso, 0ms) + var(--i, 0) * 55ms); }
html.js .rv.rv--on .m-palavra { opacity: 1; transform: none; }

/* --- hero coreografada no load: [data-hero] [data-m="foto|foto-cima|zoom|cima|titulo|palavras|texto|pop|linha|esq|dir"], ordem por --ordem (0,1,2…) --- */
html.js [data-hero] [data-m] { opacity: 0; }
html.js [data-hero] [data-m="foto"], html.js [data-hero] [data-m="foto-cima"], html.js [data-hero] [data-m="linha"] { opacity: 1; }
html.js [data-hero] [data-m="foto"] { clip-path: inset(0 100% 0 0); }
html.js [data-hero] [data-m="foto-cima"] { clip-path: inset(100% 0 0 0); }
html.js [data-hero] [data-m="linha"] { transform: scaleX(0); transform-origin: left center; }
html.js.m-entra [data-hero] [data-m] { animation-duration: 900ms; animation-timing-function: var(--m-ease); animation-fill-mode: both; animation-delay: calc(var(--ordem, 0) * 110ms + 60ms); }
html.js.m-entra [data-hero] [data-m="foto"] { animation-name: m-cortina; animation-duration: 1100ms; }
html.js.m-entra [data-hero] [data-m="foto-cima"] { animation-name: m-cortina-cima; animation-duration: 1100ms; }
html.js.m-entra [data-hero] [data-m="foto"] img, html.js.m-entra [data-hero] [data-m="foto-cima"] img, html.js.m-entra [data-hero] [data-m="zoom"] img { animation: m-zoom-out 1500ms var(--m-ease) both; animation-delay: calc(var(--ordem, 0) * 110ms + 60ms); }
html.js.m-entra [data-hero] [data-m="zoom"] { animation-name: m-aparece; }
html.js.m-entra [data-hero] [data-m="cima"] { animation-name: m-de-cima; }
html.js.m-entra [data-hero] [data-m="titulo"] { animation-name: m-titulo; }
html.js.m-entra [data-hero] [data-m="texto"] { animation-name: m-de-baixo; }
html.js.m-entra [data-hero] [data-m="pop"] { animation-name: m-pop; animation-duration: 700ms; }
html.js.m-entra [data-hero] [data-m="linha"] { animation-name: m-linha; }
html.js.m-entra [data-hero] [data-m="esq"] { animation-name: m-da-esquerda; }
html.js.m-entra [data-hero] [data-m="dir"] { animation-name: m-da-direita; }
html.js.m-entra [data-hero] [data-m="palavras"] { opacity: 1; animation: none; }
html.js [data-hero] [data-m="palavras"] .m-palavra { display: inline-block; opacity: 0; }
html.js.m-entra [data-hero] [data-m="palavras"] .m-palavra { animation: m-palavra 700ms var(--m-ease) both; animation-delay: calc(var(--ordem, 0) * 110ms + 60ms + var(--i, 0) * 60ms); }
/* rede de segurança da hero: 2,6 s depois do load, tudo visível aconteça o que acontecer */
html.m-pronto [data-hero] [data-m], html.m-pronto [data-hero] [data-m] img, html.m-pronto [data-hero] [data-m] .m-palavra { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
@keyframes m-cortina { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes m-cortina-cima { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes m-zoom-out { from { transform: scale(1.14); } to { transform: none; } }
@keyframes m-aparece { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes m-de-cima { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes m-de-baixo { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes m-titulo { from { opacity: 0; transform: translateY(44px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes m-pop { from { opacity: 0; transform: scale(0.84); } 70% { transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes m-linha { from { transform: scaleX(0); } to { transform: none; } }
@keyframes m-da-esquerda { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes m-da-direita { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes m-palavra { from { opacity: 0; transform: translateY(0.6em) rotate(2deg); } to { opacity: 1; transform: none; } }

/* --- assinaturas contínuas (uma por site) --- */
/* faixa rolante: [data-marquee] (main.js duplica o conteúdo); velocidade em --m-vel (segundos por volta) */
[data-marquee] { overflow: hidden; display: flex; white-space: nowrap; }
[data-marquee] > .m-faixa { display: flex; flex: none; align-items: center; min-width: 100%; }
html.js [data-marquee] > .m-faixa { animation: m-marquee var(--m-vel, 28s) linear infinite; }
html.js [data-marquee="inversa"] > .m-faixa { animation-direction: reverse; }
[data-marquee]:hover > .m-faixa { animation-play-state: paused; }
@keyframes m-marquee { to { transform: translateX(-100%); } }
/* flutuação leve (selo, carimbo, ícone): [data-flutua-leve] */
html.js [data-flutua-leve] { animation: m-flutua 5.5s ease-in-out infinite; }
@keyframes m-flutua { 50% { transform: translateY(-9px) rotate(-1deg); } }
/* parallax leve da foto (só desktop, main.js move em transform): [data-parallax] — o pai precisa de overflow hidden */
html.js [data-parallax] { will-change: transform; }
/* hover: [data-hover="lift"] sobe 5px; [data-hover="zoom"] aproxima a imagem de dentro */
html.js [data-hover="lift"] { transition: transform 280ms var(--m-ease); }
html.js [data-hover="lift"]:hover { transform: translateY(-5px); }
html.js [data-hover="zoom"] { overflow: hidden; }
html.js [data-hover="zoom"] img { transition: transform 700ms var(--m-ease); }
html.js [data-hover="zoom"]:hover img { transform: scale(1.05); }

/* botão flutuante do celular (.flutua): escondido até 60% de rolagem (main.js) e sempre fora do desktop */
.flutua { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 900; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 200ms ease-out, transform 200ms ease-out; }
.flutua.is-ativo { opacity: 1; pointer-events: auto; transform: none; }
@media (min-width: 900px) { .flutua { display: none; } }

/* vídeo nunca alto: card quadrado por padrão (styles.css pode ajustar o tamanho, não a proporção) */
video { object-fit: cover; aspect-ratio: 1 / 1; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html.js .rv, html.js .rv .m-palavra, html.js [data-hero] [data-m], html.js [data-hero] [data-m] .m-palavra { opacity: 1; transform: none; filter: none; clip-path: none; animation: none; }
  html.js .rv > img, html.js .rv > picture img { transform: none; }
}