/* ==========================================================================
   Jooy Atlas — base: reset, tipografia, container, botões, tabela, formulário
   Depende de tokens.css.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;           /* a página nunca rola na horizontal (§3, comp. 8) */
}

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

/* [hidden] tem que vencer o display do componente. O `[hidden]{display:none}` do
   navegador tem especificidade 0-1-0 e perde para qualquer `.card { display:flex }`
   — sem esta linha, o card que o filtro esconde continua na tela. */
[hidden] { display: none !important; }

/* Não definir fill em `svg` aqui: CSS vence atributo de apresentação, e um
   `svg { fill: currentColor }` global preenche os ícones de traço, que declaram
   fill="none" no próprio arquivo. Quem precisa de preenchimento pede por classe. */
.svg-preenchido { fill: currentColor; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* ----- Tipografia ------------------------------------------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
  /* Michroma é muito larga: "RESERVATÓRIOS" a 2rem estoura 390 px de tela.
     Sem isto a palavra empurra o layout e a página rola na horizontal.
     A hifenização fica só na tela estreita — no desktop ela partia palavra
     no meio sem necessidade ("RESERVATÓ-RIOS"), e em caixa-alta isso é feio. */
  overflow-wrap: break-word;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.4; font-weight: 600; }

.overline {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  line-height: 1.2;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}

.numero {
  font-family: var(--font-display);
  font-size: var(--fs-numero);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.texto-pequeno { font-size: var(--fs-small); line-height: var(--lh-small); }

/* Medida de leitura — parágrafo institucional longo não passa de 72ch (§1.3) */
.medida { max-width: var(--medida); }

p + p { margin-top: var(--e-5); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--gold); }

strong, b { font-weight: 600; }

/* ----- Foco visível — obrigatório (§9) ---------------------------------- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ----- Container e seção ------------------------------------------------ */
.container {
  width: 100%;
  max-width: calc(var(--largura-conteudo) + var(--margem-lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

/* Legado: as seções largas nasceram com uma largura própria; hoje toda seção
   usa a mesma do cabeçalho. A classe fica porque está espalhada nos templates. */
.container--larga { max-width: calc(var(--largura-conteudo) + var(--margem-lateral) * 2); }

.secao { padding-block: var(--secao-y); }
.secao--navy   { background: var(--navy);      color: var(--white); }
.secao--escura { background: var(--navy-900);  color: var(--white); }
.secao--cinza  { background: var(--gray-100); }

.secao__titulo + * { margin-top: var(--titulo-gap); }

/* Sobre navy o texto de apoio é prata; nunca gold em corpo sobre branco (§1.1) */
.secao--navy .apoio, .secao--escura .apoio { color: var(--silver); }
.apoio { color: var(--gray-500); }

/* ----- Filete de assinatura (gold) ------------------------------------- */
.filete {
  display: block;
  width: 64px;
  height: 3px;
  border: 0;
  background: var(--gold-grad);
  margin: 0;
}

/* ----- Motivo do arco — no máximo 2 usos por página (§1.5) -------------- */
.arco { border-radius: var(--arco); overflow: hidden; }

/* ----- Botões ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: var(--e-3) var(--e-5);
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease),
              filter var(--dur-rapida) var(--ease),
              background-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

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

.btn--primario {
  background: var(--gold-grad);
  color: var(--navy);            /* gold sobre navy: 7,6:1 — livre */
  border-color: transparent;
}
.btn--primario:hover { filter: brightness(1.06); }

.btn--contorno {
  background: transparent;
  color: var(--white);
  border-color: var(--white-a70);
}
.btn--contorno:hover { border-color: var(--white); background: var(--white-a10); }

.btn--contorno-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy-a16);
}
.btn--contorno-navy:hover { border-color: var(--navy); background: var(--gray-100); }

.btn--whatsapp { background: var(--whatsapp); color: #06331A; }
.btn--whatsapp:hover { filter: brightness(1.06); }

@media (max-width: 640px) { .btn--bloco-mobile { flex: 1 1 100%; width: 100%; } }

/* ----- Card ------------------------------------------------------------ */
.card {
  background: var(--white);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.secao--navy .card, .secao--escura .card {
  background: var(--navy-700);
  box-shadow: none;
  border: 1px solid var(--white-a10);
}

/* ----- Grade ----------------------------------------------------------- */
.grade { display: grid; gap: var(--gutter); }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grade--3, .grade--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grade--2, .grade--3, .grade--4 { grid-template-columns: 1fr; } }

/* ----- Tabela técnica (§3, comp. 8) ------------------------------------ */
.tabela-envelope { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  border-radius: var(--raio-tabela);
  overflow: hidden;
}
.tabela thead th {
  background: var(--navy);
  color: var(--white);
  text-align: left;
  font-weight: 600;
  padding: var(--e-3) var(--e-4);
  white-space: nowrap;
}
.tabela td, .tabela tbody th {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--navy-a08);
  text-align: left;
}
.tabela tbody tr:nth-child(even) { background: var(--gray-100); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ----- Formulário ------------------------------------------------------ */
.campo { display: block; margin-bottom: var(--e-5); }
.campo__rotulo {                     /* rótulo acima, nunca placeholder como rótulo */
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--e-2);
}
.campo__controle {
  width: 100%;
  min-height: 48px;
  padding: var(--e-3) var(--e-4);
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--navy-a16);
  border-radius: var(--raio);
}
.campo__controle:focus-visible { border-color: var(--gold); }
textarea.campo__controle { min-height: 140px; resize: vertical; }

/* ----- Utilitários ----------------------------------------------------- */
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular-para-conteudo {
  position: absolute;
  left: var(--e-4);
  top: -60px;
  z-index: 999;
  padding: var(--e-3) var(--e-4);
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  border-radius: var(--raio);
  transition: top var(--dur-rapida) var(--ease);
}
.pular-para-conteudo:focus { top: var(--e-4); }

.lista-limpa { list-style: none; }

/* ----- Entrada em cena (padrão Jooy) ----------------------------------- */
/* O JS adiciona .esta-visivel quando o elemento entra na viewport.
   Sem JS o conteúdo já está visível — a animação nunca esconde conteúdo. */
[data-anima] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-anima] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-lenta) var(--ease), transform var(--dur-lenta) var(--ease);
  }
  .js [data-anima].esta-visivel {
    opacity: 1;
    transform: none;
  }
  .js [data-anima][data-anima-atraso="1"] { transition-delay: 80ms; }
  .js [data-anima][data-anima-atraso="2"] { transition-delay: 160ms; }
  .js [data-anima][data-anima-atraso="3"] { transition-delay: 240ms; }
  .js [data-anima][data-anima-atraso="4"] { transition-delay: 320ms; }
}

/* ----- Ícones de traço (§1.7) ------------------------------------------ */
.icone {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  vertical-align: middle;
}

/* Hifenização apenas onde a largura realmente aperta. */
@media (max-width: 560px) {
  h1, .h1, h2, .h2 { hyphens: auto; }
}