/* =========================================================================
   Componentes
   Regra: elementos interativos declaram os 8 estados —
   padrao, :hover, :focus-visible, :active, [disabled], .esta-carregando,
   .tem-erro, .deu-certo. Somente transform/opacity sao animados.
   ========================================================================= */

/* ------------------------------- Botoes ------------------------------- */
.botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-6);
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  font-family: var(--fonte-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--dur-rapida) var(--ease-saida),
              opacity var(--dur-rapida) var(--ease-padrao),
              box-shadow var(--dur-rapida) var(--ease-padrao),
              background-color var(--dur-rapida) var(--ease-padrao),
              border-color var(--dur-rapida) var(--ease-padrao),
              color var(--dur-rapida) var(--ease-padrao);
}
.botao:active { transform: translateY(1px) scale(0.985); }
.botao[disabled], .botao[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; pointer-events: none;
}
.botao.esta-carregando { color: transparent; pointer-events: none; }
.botao.esta-carregando::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: var(--raio-total);
  border: 2px solid var(--branco); border-top-color: transparent;
  animation: girar 720ms linear infinite;
}
.botao.tem-erro  { background: var(--cor-erro-fundo); color: var(--cor-erro); border-color: var(--cor-erro); }
.botao.deu-certo { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: var(--cor-sucesso); }

@keyframes girar { to { transform: rotate(360deg); } }

.botao--principal {
  background: var(--cor-acao);
  color: var(--branco);
  box-shadow: var(--sombra-md);
}
.botao--principal:hover { background: var(--cor-acao-hover); transform: translateY(-2px); box-shadow: var(--sombra-lg); }
.botao--principal:active { background: var(--cor-acao-ativa); }

.botao--ouro {
  background: var(--cor-destaque);
  color: var(--tinta-900);
  box-shadow: var(--sombra-md);
}
.botao--ouro:hover { background: var(--ouro-300); transform: translateY(-2px); box-shadow: var(--sombra-lg); }
.botao--ouro:active { background: var(--ouro-500); }

.botao--contorno {
  background: transparent;
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
}
.botao--contorno:hover { border-color: var(--cor-marca); color: var(--cor-marca-forte); transform: translateY(-2px); }
.botao--contorno:active { background: var(--rosa-50); }

.botao--claro { background: var(--branco); color: var(--tinta-900); box-shadow: var(--sombra-md); }
.botao--claro:hover { transform: translateY(-2px); box-shadow: var(--sombra-lg); }

.botao--fantasma { background: transparent; color: var(--cor-texto-suave); padding-inline: var(--e-4); }
.botao--fantasma:hover { color: var(--cor-acao); background: var(--rosa-50); }

.botao--grande { min-height: 58px; padding: var(--e-4) var(--e-7); font-size: var(--texto-base); }
.botao--bloco  { width: 100%; }

/* Ima: o wrapper e deslocado por JS (ReactBits "Magnet") */
.ima { display: inline-block; }

/* --------------------------- Cartao base --------------------------- */
.cartao {
  position: relative;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--e-6);
  box-shadow: var(--sombra-sm);
  transition: transform var(--dur-media) var(--ease-saida),
              box-shadow var(--dur-media) var(--ease-padrao),
              border-color var(--dur-media) var(--ease-padrao);
}
.cartao--interativo { cursor: pointer; }
.cartao--interativo:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); border-color: var(--rosa-200); }

/* Cartao-holofote (ReactBits "SpotlightCard"): gradiente radial segue o cursor */
.holofote { position: relative; overflow: hidden; }
.holofote::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    340px circle at var(--px, 50%) var(--py, 0%),
    var(--brilho-ouro),
    var(--brilho-rosa) 42%,
    transparent 68%
  );
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease-padrao);
  pointer-events: none;
  z-index: 0;
}
.holofote:hover::before, .holofote:focus-within::before { opacity: 1; }
.holofote > * { position: relative; z-index: 1; }

/* Cartao inclinado (ReactBits "TiltedCard") */
.inclina {
  transform-style: preserve-3d;
  transition: transform var(--dur-media) var(--ease-saida);
}
.inclina__profundidade { transform: translateZ(38px); }

/* --------------------------- Cartao de acao --------------------------- */
.acao-cartao { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0; }
.acao-cartao__midia { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rosa-100); }
.acao-cartao__midia img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-cinema) var(--ease-saida);
}
.acao-cartao:hover .acao-cartao__midia img { transform: scale(1.06); }
.acao-cartao__corpo { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-3); flex: 1; }
.acao-cartao__num {
  position: absolute; left: var(--e-4); top: var(--e-4);
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--raio-total);
  background: var(--branco);
  color: var(--cor-acao);
  font-family: var(--fonte-display);
  font-weight: var(--peso-forte);
  font-size: var(--texto-sm);
  box-shadow: var(--sombra-md);
}
.acao-cartao h3 { margin: 0; font-size: var(--texto-lg); }
.acao-cartao p { color: var(--cor-texto-suave); font-size: var(--texto-sm); line-height: var(--altura-media); }

/* ------------------------------ Etiquetas ------------------------------ */
.etiqueta {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--raio-sm);
  background: var(--rosa-100);
  color: var(--cor-marca-forte);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.02em;
}
.etiqueta--ouro   { background: var(--ouro-100); color: var(--cor-destaque-forte); }
.etiqueta--alerta { background: var(--cor-erro-fundo); color: var(--cor-erro); }

/* ------------------------------ Cabecalho ------------------------------ */
.cabecalho {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-cabecalho);
  height: var(--altura-cabecalho);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--papel) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: transform var(--dur-media) var(--ease-saida),
              background-color var(--dur-media) var(--ease-padrao),
              border-color var(--dur-media) var(--ease-padrao),
              box-shadow var(--dur-media) var(--ease-padrao);
  will-change: transform;
}
.cabecalho.esta-fixo {
  background: color-mix(in srgb, var(--papel) 95%, transparent);
  border-bottom-color: var(--cor-borda);
  box-shadow: var(--sombra-sm);
  backdrop-filter: saturate(1.4) blur(10px);
}
.cabecalho.esta-oculto { transform: translateY(-100%); }
.cabecalho__interno { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); width: 100%; }

.marca-link { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--cor-texto); }
.marca-link img, .marca-link svg { width: 46px; height: 46px; flex: none; object-fit: contain; }
.marca-link__texto { display: flex; flex-direction: column; line-height: 1.12; }
.marca-link__nome {
  font-family: var(--fonte-display);
  font-weight: var(--peso-forte);
  font-size: var(--texto-md);
  letter-spacing: var(--espaco-letra-titulo);
}
.marca-link__lema {
  font-size: 0.66rem;
  letter-spacing: var(--espaco-letra-olho);
  text-transform: uppercase;
  color: var(--cor-marca);
  font-weight: var(--peso-semi);
}

.nav { display: flex; align-items: center; gap: var(--e-1); }
.nav__link {
  position: relative;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-sm);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-padrao);
}
.nav__link::after {
  content: ""; position: absolute;
  left: var(--e-3); right: var(--e-3); bottom: 4px; height: 2px;
  border-radius: var(--raio-total);
  background: var(--cor-acao);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-media) var(--ease-saida);
}
.nav__link:hover { color: var(--cor-texto); }
.nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { color: var(--cor-texto); font-weight: var(--peso-semi); }

.menu-botao {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md); cursor: pointer;
}
.menu-botao__barras {
  position: relative; width: 20px; height: 2px;
  background: var(--cor-texto); border-radius: var(--raio-total);
  transition: opacity var(--dur-instantanea) linear;
}
.menu-botao__barras::before, .menu-botao__barras::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--cor-texto); border-radius: var(--raio-total);
  transition: transform var(--dur-rapida) var(--ease-saida);
}
.menu-botao__barras::before { transform: translateY(-6px); }
.menu-botao__barras::after  { transform: translateY(6px); }
.menu-botao[aria-expanded="true"] .menu-botao__barras { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__barras::before { transform: rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__barras::after  { transform: rotate(-45deg); }

.menu-movel {
  position: fixed; inset: var(--altura-cabecalho) 0 0 0;
  z-index: var(--z-menu);
  background: var(--papel);
  padding: var(--e-6) var(--gutter) var(--e-9);
  display: flex; flex-direction: column; gap: var(--e-2);
  overflow-y: auto;
  opacity: 0; transform: translateY(-10px);
  pointer-events: none;
  transition: opacity var(--dur-media) var(--ease-padrao), transform var(--dur-media) var(--ease-saida);
}
.menu-movel.esta-aberto { opacity: 1; transform: translateY(0); pointer-events: auto; }
.menu-movel a {
  padding: var(--e-4) var(--e-2);
  border-bottom: 1px solid var(--cor-borda);
  font-family: var(--fonte-display);
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  text-decoration: none;
}

@media (max-width: 980px) {
  .nav--principal { display: none; }
  .menu-botao { display: inline-flex; }
  .cabecalho .botao--principal { display: none; }
}

/* ------------------------ Texto em revelacao ------------------------ */
/* SplitText (ReactBits): cada caractere sobe com atraso escalonado */
.split { display: inline; }
.split__linha { display: inline; }
/* a palavra inteira é indivisível — a quebra de linha só acontece nos
   espaços reais entre palavras, nunca entre dois caracteres */
.split__palavra { display: inline-block; white-space: nowrap; }
.split__ch {
  display: inline-block;
  transform: translateY(0.42em) rotate(1.5deg);
  opacity: 0;
}
.split.esta-visivel .split__ch {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
  transition: transform var(--dur-lenta) var(--ease-saida), opacity var(--dur-media) var(--ease-padrao);
  transition-delay: var(--atraso, 0ms);
}

/* BlurText (ReactBits): palavras desfocam para dentro */
.borrado__p {
  display: inline-block;
  opacity: 0; filter: blur(10px); transform: translateY(14px);
}
.borrado.esta-visivel .borrado__p {
  opacity: 1; filter: blur(0); transform: translateY(0);
  transition: opacity var(--dur-lenta) var(--ease-padrao),
              filter var(--dur-lenta) var(--ease-padrao),
              transform var(--dur-lenta) var(--ease-saida);
  transition-delay: var(--atraso, 0ms);
}

/* Revelacao generica ao entrar na viewport.
   Sem will-change de proposito: sao dezenas de elementos na pagina e promover
   todos a camadas de composicao permanentes trava o navegador. A transicao de
   transform/opacity ja e acelerada sem essa dica. */
.revela { opacity: 0; transform: translateY(28px); }
.revela.esta-visivel {
  opacity: 1; transform: none;
  transition: opacity var(--dur-lenta) var(--ease-padrao), transform var(--dur-lenta) var(--ease-saida);
  transition-delay: var(--atraso, 0ms);
}
.revela--esq { transform: translateX(-34px); }
.revela--dir { transform: translateX(34px); }
.revela--zoom { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .split__ch, .borrado__p, .revela { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* --------------------------- Letreiro infinito --------------------------- */
.letreiro {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--branco) 9%, var(--branco) 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--branco) 9%, var(--branco) 91%, transparent);
}
.letreiro__trilha {
  display: flex; flex: none; align-items: center; gap: var(--e-6);
  padding-inline: var(--e-3);
  animation: correr var(--letreiro-dur, 42s) linear infinite;
  will-change: transform;
}
.letreiro:hover .letreiro__trilha { animation-play-state: paused; }
.letreiro--reverso .letreiro__trilha { animation-direction: reverse; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .letreiro__trilha { animation: none; } }

.letreiro__item {
  display: inline-flex; align-items: center; gap: var(--e-4);
  font-family: var(--fonte-display);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 3.4rem);
  font-weight: var(--peso-semi);
  white-space: nowrap;
  color: var(--cor-texto);
}
.letreiro__item--vazado {
  color: transparent;
  -webkit-text-stroke: 1px var(--rosa-400);
}
.letreiro__estrela { color: var(--cor-destaque); flex: none; }

/* ------------------------------ Contador ------------------------------ */
.contador {
  font-family: var(--fonte-display);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-forte);
  line-height: 1;
  color: var(--cor-acao);
  font-variant-numeric: tabular-nums;
}
.estatistica { text-align: center; padding: var(--e-5) var(--e-3); }
.estatistica__rotulo { display: block; margin-top: var(--e-3); font-size: var(--texto-sm); color: var(--cor-texto-suave); line-height: var(--altura-media); }
.secao--escura .contador { color: var(--ouro-300); }
.secao--escura .estatistica__rotulo { color: var(--tinta-200); }

/* ------------------------------ Linha do tempo ------------------------------ */
.tempo { position: relative; padding-left: var(--e-8); }
.tempo__trilho {
  position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
  background: var(--cor-borda-forte); border-radius: var(--raio-total);
}
/* TracingBeam (Aceternity): o feixe cresce conforme a rolagem */
.tempo__feixe {
  position: absolute; left: 11px; top: 6px; width: 2px;
  height: var(--feixe, 0%);
  background: linear-gradient(180deg, var(--cor-destaque), var(--cor-acao), var(--cor-marca));
  border-radius: var(--raio-total);
  box-shadow: 0 0 14px var(--brilho-feixe);
}
.tempo__item { position: relative; padding-bottom: var(--e-8); }
.tempo__item:last-child { padding-bottom: 0; }
.tempo__ponto {
  position: absolute; left: calc(-1 * var(--e-8) + 4px); top: 4px;
  width: 18px; height: 18px; border-radius: var(--raio-total);
  background: var(--branco);
  border: 3px solid var(--cor-borda-forte);
  transition: transform var(--dur-media) var(--ease-saida), border-color var(--dur-media) var(--ease-padrao);
}
.tempo__item.esta-visivel .tempo__ponto { border-color: var(--cor-acao); transform: scale(1.18); }
.tempo__ano {
  font-family: var(--fonte-display);
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  color: var(--cor-acao);
  margin-bottom: var(--e-1);
}
.tempo__item h3 { font-size: var(--texto-md); margin-bottom: var(--e-2); }
.tempo__item p { color: var(--cor-texto-suave); font-size: var(--texto-sm); line-height: var(--altura-media); }

/* ------------------------------ Galeria ------------------------------ */
.galeria-circular {
  position: relative;
  height: clamp(340px, 46vw, 520px);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.galeria-circular:active { cursor: grabbing; }
.galeria-circular__palco { position: absolute; inset: 0; transform-style: preserve-3d; perspective: 1100px; }
.galeria-circular__slide {
  position: absolute; top: 50%; left: 50%;
  width: clamp(210px, 24vw, 320px);
  aspect-ratio: 3 / 4;
  margin-left: calc(clamp(210px, 24vw, 320px) / -2);
  margin-top: calc(clamp(210px, 24vw, 320px) * 4 / 3 / -2);
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  background: var(--rosa-100);
  user-select: none;
}
.galeria-circular__slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.galeria-circular__legenda {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--e-6) var(--e-4) var(--e-3);
  background: linear-gradient(180deg, transparent, var(--veu-legenda));
  color: var(--papel);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
}
.galeria-dicas { margin-top: var(--e-4); text-align: center; font-size: var(--texto-xs); color: var(--cor-texto-tenue); }

.mosaico { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e-3); }
.mosaico__item {
  position: relative; overflow: hidden;
  border-radius: var(--raio-md);
  aspect-ratio: 1;
  border: 0; padding: 0; cursor: pointer;
  background: var(--rosa-100);
}
.mosaico__item:nth-child(4n + 1) { grid-row: span 2; aspect-ratio: 1 / 2.06; }
.mosaico__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-cinema) var(--ease-saida); }
.mosaico__item:hover img, .mosaico__item:focus-visible img { transform: scale(1.07); }
.mosaico__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--veu-foto));
  opacity: 0; transition: opacity var(--dur-media) var(--ease-padrao);
}
.mosaico__item:hover::after, .mosaico__item:focus-visible::after { opacity: 1; }

/* ------------------------------ Lightbox ------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--gutter);
  background: var(--veu-modal);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-media) var(--ease-padrao);
}
.lightbox.esta-aberto { opacity: 1; pointer-events: auto; }
.lightbox__figura { max-width: min(1100px, 100%); max-height: 100%; margin: 0; }
.lightbox__figura img { max-height: 78vh; width: auto; border-radius: var(--raio-md); box-shadow: var(--sombra-xl); }
.lightbox__legenda { color: var(--papel-2); font-size: var(--texto-sm); text-align: center; margin-top: var(--e-4); }
.lightbox__fechar, .lightbox__nav {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--raio-total);
  background: var(--sup-vidro-forte); border: 1px solid var(--sup-vidro-ativo);
  color: var(--papel); cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-saida), background-color var(--dur-rapida) var(--ease-padrao);
}
.lightbox__fechar:hover, .lightbox__nav:hover { background: var(--sup-vidro-ativo); transform: scale(1.08); }
.lightbox__fechar { top: var(--e-5); right: var(--e-5); }
.lightbox__nav--ant { left: var(--e-4); top: 50%; }
.lightbox__nav--prox { right: var(--e-4); top: 50%; }

/* ------------------------------ Sanfona ------------------------------ */
.sanfona__item { border-bottom: 1px solid var(--cor-borda); }
.sanfona__gatilho {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-5) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--fonte-display);
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  transition: color var(--dur-rapida) var(--ease-padrao);
}
.sanfona__gatilho:hover { color: var(--cor-acao); }
.sanfona__sinal { flex: none; width: 26px; height: 26px; position: relative; }
.sanfona__sinal::before, .sanfona__sinal::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; border-radius: var(--raio-total);
  transition: transform var(--dur-media) var(--ease-saida);
}
.sanfona__sinal::before { width: 14px; height: 2px; }
.sanfona__sinal::after  { width: 2px; height: 14px; }
.sanfona__gatilho[aria-expanded="true"] .sanfona__sinal::after { transform: scaleY(0); }
.sanfona__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-media) var(--ease-saida); }
.sanfona__painel.esta-aberto { grid-template-rows: 1fr; }
.sanfona__painel > div { overflow: hidden; }
.sanfona__painel p { padding-bottom: var(--e-5); color: var(--cor-texto-suave); font-size: var(--texto-sm); line-height: var(--altura-media); }

/* ------------------------------ Formulario ------------------------------ */
.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo__rotulo { font-size: var(--texto-sm); font-weight: var(--peso-semi); color: var(--cor-texto); }
.campo__dica { font-size: var(--texto-xs); color: var(--cor-texto-tenue); }
.campo input, .campo textarea, .campo select {
  padding: var(--e-3) var(--e-4);
  min-height: 48px;
  background: var(--branco);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  transition: border-color var(--dur-rapida) var(--ease-padrao), box-shadow var(--dur-rapida) var(--ease-padrao);
}
.campo textarea { min-height: 132px; resize: vertical; line-height: var(--altura-media); }
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--rosa-300); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-300); }
.campo.tem-erro input, .campo.tem-erro textarea { border-color: var(--cor-erro); background: var(--cor-erro-fundo); }
.campo__erro { font-size: var(--texto-xs); color: var(--cor-erro); font-weight: var(--peso-semi); }
.campo input[disabled], .campo textarea[disabled] { opacity: 0.55; cursor: not-allowed; }

.aviso {
  display: flex; gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--raio-md);
  border: 1px dashed var(--cor-borda-forte);
  background: var(--ouro-100);
  color: var(--tinta-700);
  font-size: var(--texto-sm);
  line-height: var(--altura-media);
}
.aviso--sucesso { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso); color: var(--cor-sucesso); border-style: solid; }
.aviso__icone { flex: none; color: var(--cor-destaque-forte); }
.aviso--sucesso .aviso__icone { color: var(--cor-sucesso); }

/* ------------------------------ Abertura ------------------------------ */
.abertura {
  position: fixed; inset: 0; z-index: var(--z-preload);
  display: grid; place-items: center; align-content: center; gap: var(--e-5);
  background: var(--papel);
  transition: opacity var(--dur-abertura) var(--ease-padrao), visibility var(--dur-abertura);
}
.abertura.esta-pronta { opacity: 0; visibility: hidden; }
.abertura__marca { width: 112px; height: 112px; animation: pulsar 1900ms var(--ease-suave) infinite; }
@keyframes pulsar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.abertura__lema {
  font-family: var(--fonte-display);
  font-size: var(--texto-md);
  color: var(--cor-marca-forte);
  letter-spacing: var(--espaco-letra-titulo);
}
@media (prefers-reduced-motion: reduce) { .abertura__marca { animation: none; } }

/* ------------------------------ Voltar ao topo ------------------------------ */
.ao-topo {
  position: fixed; right: var(--gutter); bottom: var(--gutter);
  z-index: var(--z-flutuante);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--raio-total);
  background: var(--cor-acao); color: var(--branco);
  border: 0; cursor: pointer;
  box-shadow: var(--sombra-lg);
  opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none;
  transition: opacity var(--dur-media) var(--ease-padrao), transform var(--dur-media) var(--ease-saida);
}
.ao-topo.esta-visivel { opacity: 1; transform: none; pointer-events: auto; }
.ao-topo:hover { transform: translateY(-3px); }

/* ------------------------------ Barra de progresso ------------------------------ */
.progresso {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 3px; z-index: var(--z-menu);
  background: linear-gradient(90deg, var(--cor-destaque), var(--cor-acao), var(--cor-marca));
  transform: scaleX(var(--p, 0)); transform-origin: left;
  will-change: transform;
}