/* ==========================================================================
   MARMORARIA NOVA ALIANÇA — Base
   Reset enxuto, tipografia e inversão de tema por seção.
   Depende de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa o cabeçalho fixo (68px + 1px de borda) quando se clica numa
     âncora. Nada além disso: o respiro extra sai do scroll-margin das
     próprias seções, mais abaixo. */
  scroll-padding-top: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--fs-base);
  line-height: var(--altura-linha-texto);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* --------------------------------------------------------------------------
   INVERSÃO DE TEMA POR SEÇÃO
   Qualquer bloco com .tema-claro troca os papéis semânticos.
   Botões, cartões e links lá dentro se adaptam sozinhos — sem CSS duplicado.
   -------------------------------------------------------------------------- */
.tema-claro {
  --fundo:         var(--c-pedra-50);
  --fundo-elevado: #ffffff;
  --borda:         var(--c-pedra-200);
  --acento:        var(--c-ouro-800);   /* o 500 é ilegível aqui — ver tokens */
  --acento-forte:  var(--c-ouro-900);
  --texto:         var(--c-texto-escuro);
  --texto-sutil:   var(--c-texto-escuro-sutil);

  background: var(--fundo);
  color: var(--texto);
}

.tema-claro--alt { --fundo: var(--c-pedra-100); }

.tema-escuro {
  --fundo:         var(--c-noite-800);
  --fundo-elevado: var(--c-noite-700);
  --borda:         var(--c-noite-600);
  --acento:        var(--c-ouro-500);
  --acento-forte:  var(--c-ouro-300);
  --texto:         var(--c-texto-claro);
  --texto-sutil:   var(--c-texto-claro-sutil);

  background: var(--fundo);
  color: var(--texto);
}

.tema-escuro--profundo { --fundo: var(--c-noite-900); }

/* --------------------------------------------------------------------------
   TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 400;              /* Cormorant pede peso leve em tamanho grande */
  line-height: var(--altura-linha-titulo);
  letter-spacing: var(--entreletra-titulo);
  text-wrap: balance;            /* evita a palavra órfã na última linha */
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { text-wrap: pretty; }

/* Rótulo em caixa alta com entreletra larga — o tratamento da logo.
   Usado em "olho" de seção, navegação e botões. */
.marca-rotulo {
  font-family: var(--fonte-marca);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--entreletra-marca);
  text-transform: uppercase;
  color: var(--acento);
}

/* Olho de seção: rótulo dourado com um filete, como nas referências */
.olho {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--fonte-marca);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--entreletra-marca);
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--e-4);
}

.olho::before {
  content: "";
  inline-size: clamp(1.5rem, 4vw, 3rem);
  block-size: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}

.olho--centro { justify-content: center; }
.olho--centro::after {
  content: "";
  inline-size: clamp(1.5rem, 4vw, 3rem);
  block-size: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}

/* Texto de apoio sob um título */
.subtitulo {
  font-size: var(--fs-md);
  color: var(--texto-sutil);
  max-inline-size: var(--largura-texto);
}

/* Ênfase dourada dentro de um título */
.destaque { color: var(--acento); font-style: italic; }

/* --------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--acento-forte); }

/* --------------------------------------------------------------------------
   FOCO VISÍVEL
   Nunca remover: é como quem navega por teclado se localiza.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--raio-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   ESTRUTURA
   -------------------------------------------------------------------------- */
.container {
  inline-size: min(100% - var(--gutter) * 2, var(--largura-conteudo));
  margin-inline: auto;
}

.container--estreito { --largura-conteudo: 860px; }

.secao { padding-block: var(--secao-y); }

/* Onde a âncora para.

   Sem isto, duas folgas se somavam: a compensação do cabeçalho fixo mais
   o respiro de topo da própria seção (--secao-y, até 120px). O título
   parava 147px abaixo do cabeçalho num monitor grande e 86px num celular
   — longe demais, e diferente em cada tela.

   O scroll-margin negativo cancela o respiro da seção e devolve 40px
   fixos, para o salto parar igual em qualquer largura. */
main section[id] {
  scroll-margin-top: calc(2.5rem - var(--secao-y));
}

/* Pula para o conteúdo — primeiro item do Tab, escondido até receber foco */
.pular-link {
  position: absolute;
  inset-block-start: var(--e-3);
  inset-inline-start: var(--e-3);
  z-index: var(--z-modal);
  padding: var(--e-3) var(--e-5);
  background: var(--c-ouro-500);
  color: var(--c-noite-900);
  font-weight: 600;
  border-radius: var(--raio);
  transform: translateY(-150%);
  transition: transform var(--t);
}

.pular-link:focus { transform: translateY(0); }

/* Visível só para leitor de tela */
.so-leitor {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   BOTÕES
   Herdam --acento e --texto, então funcionam no claro e no escuro.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-6);
  min-block-size: 48px;              /* alvo de toque confortável no celular */
  font-family: var(--fonte-marca);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-rapido);
}

.btn:active { transform: translateY(1px); }

/* Principal: dourado sólido com texto escuro — 9.08:1 */
.btn--principal {
  background: var(--c-ouro-500);
  color: var(--c-noite-900);
}
.btn--principal:hover { background: var(--c-ouro-300); color: var(--c-noite-900); }

/* Secundário: contorno, herda a cor do contexto */
.btn--contorno {
  background: transparent;
  color: var(--texto);
  border-color: color-mix(in srgb, var(--texto) 35%, transparent);
}
.btn--contorno:hover {
  border-color: var(--acento);
  color: var(--acento);
}

/* WhatsApp: verde reconhecível + texto escuro — 9.89:1 */
.btn--whatsapp {
  background: var(--c-whatsapp);
  color: var(--c-whatsapp-texto);
}
.btn--whatsapp:hover { background: var(--c-whatsapp-escuro); color: var(--c-whatsapp-texto); }

.btn--bloco { inline-size: 100%; }

/* --------------------------------------------------------------------------
   CARTÃO
   -------------------------------------------------------------------------- */
.cartao {
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.cartao:hover {
  border-color: color-mix(in srgb, var(--acento) 55%, transparent);
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}

/* --------------------------------------------------------------------------
   UTILITÁRIOS
   -------------------------------------------------------------------------- */
.grade { display: grid; gap: var(--e-5); }
.centro { text-align: center; }
.centro .subtitulo { margin-inline: auto; }

/* Fio dourado de 1px — divisor discreto */
.fio {
  block-size: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--acento) 50%, transparent),
    transparent
  );
  border: 0;
}