/* 16-tokens.css  |  Gestor de Aluguel (gestordealuguel.com)  |  Etapa 16
   Fonte da verdade: 16-guia-de-estilo.md. Valores idênticos aos do guia.
   Sem emoji, sem sombra em botão, sem borda lateral colorida em card. */

:root {
  /* ===== COR: marca ===== */
  --cor-marinho-900: #071A33;
  --cor-marinho: #0B2545;
  --cor-turquesa-800: #0A5A54;
  --cor-turquesa-700: #0F766E;
  --cor-turquesa-300: #5EEAD4;
  --cor-turquesa-50: #E3F3F1;
  --cor-branco: #FFFFFF;
  --cor-neutro-50: #F4F7FA;
  --cor-neutro-100: #E8EEF4;
  --cor-neutro-200: #C9D6E4;
  --cor-neutro-300: #C9D2DC;
  --cor-neutro-500: #6B7B8C;
  --cor-neutro-700: #455566;
  --cor-neutro-900: #1B2733;
  --cor-link: #0B5CAD;
  --cor-link-hover: #083F7A;
  --cor-link-visitado: #5B3E8F;
  --cor-link-escuro: #9CC8F5;
  --cor-foco: #0B2545;
  --cor-foco-escuro: #5EEAD4;
  --cor-desabilitado-fundo: #E8EEF4;
  --cor-desabilitado-texto: #5E6B79;
  --cor-desabilitado-borda: #A8B4C0;
  --cor-erro: #8A1C4A;
  --cor-erro-fundo: #FBEEF3;
  --cor-sucesso: #0A5A54;
  --cor-sucesso-fundo: #E3F3F1;
  --cor-info: #0B5CAD;
  --cor-info-fundo: #EAF2FB;

  /* ===== COR: apelidos semânticos (referem-se aos tokens acima) ===== */
  --cor-fundo-pagina: var(--cor-branco);
  --cor-fundo-secao-clara: var(--cor-neutro-50);
  --cor-fundo-secao-apoio: var(--cor-neutro-100);
  --cor-fundo-secao-escura: var(--cor-marinho);
  --cor-fundo-rodape: var(--cor-marinho-900);
  --cor-texto: var(--cor-neutro-900);
  --cor-texto-suave: var(--cor-neutro-700);
  --cor-titulo: var(--cor-marinho);
  --cor-borda-campo: var(--cor-neutro-500);
  --cor-borda-decorativa: var(--cor-neutro-300);
  --cor-botao-a: var(--cor-turquesa-700);
  --cor-botao-a-hover: var(--cor-turquesa-800);
  --cor-botao-b: var(--cor-marinho);
  --cor-botao-b-hover: var(--cor-marinho-900);

  /* ===== TIPOGRAFIA: famílias (pilhas com fallback de sistema) ===== */
  --fonte-titulo: "Manrope", "Manrope Fallback", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fonte-texto: "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* ===== TIPOGRAFIA: pesos ===== */
  --peso-texto: 400;
  --peso-destaque: 600;   /* Inter: negrito do corpo, rótulos, botões */
  --peso-titulo: 700;     /* Manrope: todos os títulos */

  /* ===== TIPOGRAFIA: tamanhos fluidos (320 px a 1280 px de tela) ===== */
  --tam-micro: 0.875rem;  /* 14 px fixo: só legenda e selo, nunca texto corrido */
  --tam-corpo: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --tam-destaque: clamp(1.125rem, 1.06rem + 0.33vw, 1.3125rem);
  --tam-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --tam-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --tam-h2: clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);
  --tam-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);

  /* ===== TIPOGRAFIA: entrelinhas, espaçamento de letras e medida ===== */
  --entrelinha-corpo: 1.6;
  --entrelinha-destaque: 1.5;
  --entrelinha-titulo: 1.2;
  --entrelinha-h1: 1.12;
  --tracking-titulo: -0.01em;
  --medida-texto: 65ch;   /* 45 a 75 caracteres por linha */
  --medida-curta: 45ch;

  /* ===== ESPAÇAMENTO (base de 4 px; 1rem = 16 px) ===== */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --esp-secao: clamp(3rem, 2.2rem + 3.5vw, 6rem);

  /* ===== FORMA E INTERAÇÃO ===== */
  --raio-sm: 0.5rem;
  --raio-md: 0.75rem;
  --raio-botao: 0.5rem;
  --raio-credito: 5px;     /* regra do crédito PMTurbo */
  --borda-fina: 1px;
  --borda-campo: 2px;
  --foco-largura: 3px;
  --foco-afastamento: 2px;
  --alvo-min: 2.75rem;     /* 44 px, área mínima de toque */
  --largura-conteudo: 72rem;
  --duracao-transicao: 150ms;
}

/* Foco visível em todos os controles (WCAG 2.2: 2.4.7 e 2.4.11) */
:focus-visible {
  outline: var(--foco-largura) solid var(--cor-foco);
  outline-offset: var(--foco-afastamento);
}
.fundo-escuro :focus-visible {
  outline-color: var(--cor-foco-escuro);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duracao-transicao: 0ms; }
}

/* ==========================================================================
   FONTES AUTOHOSPEDADAS (OFL). Arquivos variáveis WOFF2, subconjunto latin.
   Faixa de peso para as fontes variáveis. Latin-ext: ver 18-decisoes-da-home.md.
   ========================================================================== */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/Manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fallback do Inter com os valores de partida do guia (confirmar medindo).
   O Manrope Fallback depende de medição e fica pendente (sem número inventado). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cor-fundo-pagina);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--tam-corpo);
  font-weight: var(--peso-texto);
  line-height: var(--entrelinha-corpo);
}
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  color: var(--cor-titulo);
  line-height: var(--entrelinha-titulo);
}
h1 { font-size: var(--tam-h1); line-height: var(--entrelinha-h1); letter-spacing: var(--tracking-titulo); }
h2 { font-size: var(--tam-h2); letter-spacing: var(--tracking-titulo); }
h3 { font-size: var(--tam-h4); }

/* Links de texto (especificidade zero: classes de componente sempre vencem) */
:where(a) {
  color: var(--cor-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
:where(a:visited) { color: var(--cor-link-visitado); }
:where(a:hover) { color: var(--cor-link-hover); }

.container { width: min(100% - 2 * var(--esp-4), var(--largura-conteudo)); margin-inline: auto; }
.container-estreito { max-width: 48rem; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: var(--esp-4); top: -4rem; z-index: 100;
  background: var(--cor-marinho); color: var(--cor-branco);
  padding: var(--esp-3) var(--esp-5); border-radius: var(--raio-botao);
  min-height: var(--alvo-min); display: inline-flex; align-items: center;
  font-weight: var(--peso-destaque);
}
.pular:visited { color: var(--cor-branco); }
.pular:focus { top: var(--esp-2); }

/* ==========================================================================
   BOTÕES (sem sombra; funil A turquesa, funil B marinho, secundário contorno)
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--alvo-min);
  padding: 0.625rem 1.25rem;
  border: var(--borda-campo) solid transparent;
  border-radius: var(--raio-botao);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: var(--peso-destaque);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracao-transicao), color var(--duracao-transicao), border-color var(--duracao-transicao);
}
.btn-grande { padding: 0.875rem 1.5rem; font-size: var(--tam-corpo); }
.btn-cheio { width: 100%; }
.btn-a, .btn-a:link, .btn-a:visited { background: var(--cor-botao-a); color: var(--cor-branco); }
.btn-a:hover { background: var(--cor-botao-a-hover); color: var(--cor-branco); }
.btn-b, .btn-b:link, .btn-b:visited { background: var(--cor-botao-b); color: var(--cor-branco); }
.btn-b:hover { background: var(--cor-botao-b-hover); color: var(--cor-branco); }
.btn-sec, .btn-sec:link, .btn-sec:visited { background: var(--cor-branco); color: var(--cor-marinho); border-color: var(--cor-marinho); }
.btn-sec:hover { background: var(--cor-neutro-100); color: var(--cor-marinho); }

.link-card, .link-card:visited {
  display: inline-flex; align-items: center; min-height: var(--alvo-min);
  font-weight: var(--peso-destaque);
}
.link-card:visited { color: var(--cor-link-visitado); }
.link-card:link { color: var(--cor-link); }
.link-card:hover { color: var(--cor-link-hover); }

/* ==========================================================================
   CABEÇALHO E MENU (mobile first)
   Sem JavaScript: lista aberta no celular, hover e foco no desktop.
   Com JavaScript (classe .js): menu recolhido no celular.
   ========================================================================== */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: var(--cor-branco);
  border-bottom: var(--borda-fina) solid var(--cor-borda-decorativa);
}
.cabecalho-miolo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
  padding-block: var(--esp-2);
}
.logo { display: inline-flex; align-items: center; min-height: var(--alvo-min); }
.logo img { width: 11.5rem; height: auto; display: block; }

.menu-toggle {
  display: none;
  align-items: center; gap: var(--esp-2);
  min-height: var(--alvo-min); padding: 0 var(--esp-4);
  background: var(--cor-branco); color: var(--cor-marinho);
  border: var(--borda-campo) solid var(--cor-marinho); border-radius: var(--raio-botao);
  font-family: var(--fonte-texto); font-size: 1rem; font-weight: var(--peso-destaque);
  cursor: pointer;
}
.menu-toggle:hover { background: var(--cor-neutro-100); }
.js .menu-toggle { display: inline-flex; }

.nav { flex: 1 1 100%; }
.nav-lista { display: flex; flex-direction: column; padding-bottom: var(--esp-3); }
.js .nav-lista { display: none; }
.js .menu-aberto .nav-lista { display: flex; }

.nav-item { position: relative; border-top: var(--borda-fina) solid var(--cor-neutro-100); }
.nav-link, .nav-link:visited {
  display: flex; align-items: center; gap: var(--esp-2); width: 100%;
  min-height: var(--alvo-min); padding: var(--esp-2) var(--esp-3);
  background: transparent; color: var(--cor-marinho);
  border: 0; border-radius: var(--raio-sm);
  font-family: var(--fonte-texto); font-size: 1rem; font-weight: var(--peso-destaque);
  text-align: left; text-decoration: none; cursor: pointer;
}
.nav-link:hover { background: var(--cor-neutro-100); color: var(--cor-marinho); }
.nav-link[aria-current="page"] span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--cor-turquesa-700); }
.nav-link .ico { color: var(--cor-turquesa-700); }
.ico-seta { margin-left: auto; width: 1.25rem; height: 1.25rem; transition: transform var(--duracao-transicao); }
.sub-toggle[aria-expanded="true"] .ico-seta { transform: rotate(180deg); }

.sub { display: block; padding: 0 0 var(--esp-2) var(--esp-6); }
.js .sub { display: none; }
.js .has-sub.is-open > .sub { display: block; }
.sub a, .sub a:visited {
  display: flex; align-items: center; min-height: var(--alvo-min);
  padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-sm);
  color: var(--cor-neutro-900); text-decoration: none;
}
.sub a:hover { background: var(--cor-neutro-100); color: var(--cor-marinho); }
.nav-destaque { padding-top: var(--esp-3); }
.btn-menu { width: 100%; }

@media (min-width: 1024px) {
  .cabecalho-miolo { flex-wrap: nowrap; gap: var(--esp-3); }
  .menu-toggle, .js .menu-toggle { display: none; }
  .nav { flex: 1 1 auto; }
  .nav-lista, .js .nav-lista, .js .menu-aberto .nav-lista {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
    gap: 0; padding: 0;
  }
  .nav-item { border-top: 0; }
  .nav-link, .nav-link:visited { width: auto; padding: var(--esp-2) 0.5rem; font-size: 0.875rem; gap: 0.375rem; white-space: nowrap; }
  .nav-link .ico { width: 1.125rem; height: 1.125rem; }
  .ico-seta { margin-left: 0; width: 1rem; height: 1rem; }
  .nav-link[aria-current="page"] span { text-underline-offset: 8px; }
  .sub, .js .sub {
    display: none; position: absolute; top: 100%; left: 0; z-index: 60;
    min-width: 17rem; padding: var(--esp-2);
    background: var(--cor-branco);
    border: var(--borda-fina) solid var(--cor-borda-decorativa);
    border-radius: var(--raio-md);
  }
  .has-sub:hover > .sub,
  .has-sub:focus-within > .sub,
  .js .has-sub.is-open > .sub { display: block; }
  .nav-destaque { padding: 0 0 0 var(--esp-2); }
  .btn-menu { width: auto; max-width: 9.75rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.2; }
}
@media (min-width: 1280px) {
  .logo img { width: 13rem; }
  .nav-link, .nav-link:visited { padding-inline: 0.75rem; font-size: 0.9375rem; gap: 0.5rem; }
  .nav-link .ico { width: 1.25rem; height: 1.25rem; }
  .btn-menu { max-width: none; padding: 0.625rem 1.125rem; font-size: 0.9375rem; line-height: 1.3; }
}

/* ==========================================================================
   V3 EDITORIAL: variáveis locais (único token novo de cor: areia-50)
   ========================================================================== */
:root {
  --cor-areia-50: #F6F1E9;            /* neutro quente; texto neutro-900 e neutro-700 passam 4,5:1 */
  --cor-fundo-secao-areia: var(--cor-areia-50);
  --gut: 1rem;                        /* margem lateral da página */
  --W: 72rem;                         /* largura do conteúdo */
  --tam-corpo-ed: 1.125rem;
  --tam-h1-ed: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  --tam-h2-ed: clamp(1.875rem, 1.3rem + 2.2vw, 3.5rem);
  --tam-numero: clamp(3.5rem, 2.4rem + 4vw, 5.5rem);
  --esp-ed: clamp(4rem, 2.6rem + 5.5vw, 7.5rem);
  --filete: rgba(11, 37, 69, 0.3);
  --filete-escuro: rgba(255, 255, 255, 0.34);
  --raio-foto: 3px;
}
@media (min-width: 768px) { :root { --gut: 2rem; } }
@media (min-width: 1440px) { :root { --W: 76rem; } }

body { font-size: var(--tam-corpo-ed); overflow-x: clip; }
.container { width: min(100% - 2 * var(--gut), var(--W)); }

/* ==========================================================================
   SEÇÕES: ritmo editorial, sem eyebrow, sem faixa divisória
   Fundos: branco, areia, marinho (uma faixa grande) e marinho-900 (cadastro).
   ========================================================================== */
.secao, .hero, .secao-marinho {
  position: relative; scroll-margin-top: 5rem;
  container-type: inline-size;
  --borda: calc((100cqw - min(100cqw - 2 * var(--gut), var(--W))) / 2);
}
.secao { padding-block: var(--esp-ed); }
.secao-areia { background: var(--cor-fundo-secao-areia); }
.secao h2, .secao-marinho h2 {
  font-size: var(--tam-h2-ed); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
}
.secao-intro { max-width: 62ch; color: var(--cor-texto-suave); }
.secao-rodape { margin-top: var(--esp-7); }

.fundo-escuro h2, .fundo-escuro h3 { color: var(--cor-branco); }
.secao-escura { background: var(--cor-marinho-900); color: var(--cor-neutro-200); }
.secao-marinho { background: var(--cor-marinho); color: var(--cor-neutro-200); padding-bottom: var(--esp-ed); }

/* Fotos: cantos de 3 px, recorte por object-position definido em cada <img> */
.foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--raio-foto); background: var(--cor-neutro-100); }
.foto picture { position: absolute; inset: 0; display: block; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Numeração tipográfica e listas com filete */
.lista-filete { border-top: var(--borda-fina) solid var(--filete); }
.lista-filete li { padding-block: 0.9rem; border-bottom: var(--borda-fina) solid var(--filete); }
.lista-filete-escura { border-color: var(--filete-escuro); }
.lista-filete-escura li { border-color: var(--filete-escuro); }

/* ==========================================================================
   1. HERO: texto à esquerda, foto sangrando para a borda direita
   ========================================================================== */
.hero { padding: 0; }
.hero-grade { display: grid; }
.hero-foto { order: -1; aspect-ratio: 4 / 3; border-radius: 0; }
.hero-texto { padding: var(--esp-7) var(--gut) var(--esp-8); }
.hero h1 {
  font-size: var(--tam-h1-ed); line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance;
}
.hero-apoio {
  margin-top: var(--esp-5); max-width: 58ch;
  font-size: 1.1875rem; line-height: 1.6; color: var(--cor-texto-suave);
}
.hero-acoes { margin-top: var(--esp-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3); }
.hero-acoes .btn { max-width: 100%; }
.hero-micro { color: var(--cor-texto-suave); max-width: 40ch; font-size: 1rem; }
.hero-dono {
  margin-top: var(--esp-6); padding-top: var(--esp-4);
  border-top: var(--borda-fina) solid var(--filete);
  display: flex; flex-direction: column; max-width: 34rem;
}
.hero-dono a { display: inline-flex; align-items: center; min-height: var(--alvo-min); font-weight: var(--peso-destaque); }
@media (min-width: 768px) {
  .hero-foto { aspect-ratio: 16 / 9; }
  .hero-texto { padding-inline: var(--gut); }
  .hero-acoes { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--esp-5); }
}
@media (min-width: 1024px) {
  .hero-grade { grid-template-columns: 1fr 1fr; min-height: min(46rem, calc(100vh - 5rem)); }
  .hero-foto { order: 0; aspect-ratio: auto; border-radius: var(--raio-foto) 0 0 var(--raio-foto); margin-block: 0; }
  .hero-texto {
    align-self: center; padding: var(--esp-8) var(--esp-7) var(--esp-8) var(--borda);
  }
}

/* ==========================================================================
   2. CICLO DA RESERVA: lista editorial numerada, foto vertical sticky
   ========================================================================== */
.ciclo-grade { display: grid; gap: var(--esp-6); }
.ciclo-corpo { display: grid; gap: var(--esp-5); align-content: start; }
.ciclo-foto { aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--gut)); border-radius: 0; }
.ciclo { margin-top: var(--esp-6); border-top: 2px solid var(--cor-marinho); }
.passo {
  display: grid; grid-template-columns: 3.75rem 1fr; column-gap: var(--esp-4);
  padding-block: var(--esp-5); border-bottom: var(--borda-fina) solid var(--filete);
}
.passo .num {
  font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: 2.5rem; line-height: 1;
  letter-spacing: -0.03em; color: var(--cor-turquesa-700);
}
.passo h3 { font-size: var(--tam-h3); line-height: 1.2; }
.passo p { margin-top: var(--esp-2); max-width: 52ch; color: var(--cor-texto-suave); }
.passo .link-card { margin-top: var(--esp-1); }
@media (min-width: 768px) {
  .ciclo-foto { margin-inline: 0; border-radius: var(--raio-foto); aspect-ratio: 16 / 9; }
  .passo { grid-template-columns: 5.5rem 1fr; }
  .passo .num { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .ciclo-grade { grid-template-columns: 5fr 7fr; column-gap: 5rem; align-items: start; }
  .ciclo-foto { position: sticky; top: 6.5rem; aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   3. CAMINHO EM 4 PASSOS: texto estreito + foto larga sangrando; faixa tipográfica
   ========================================================================== */
.caminho-topo { display: grid; gap: var(--esp-6); }
.caminho-texto { display: grid; gap: var(--esp-5); align-content: start; }
.caminho-foto { aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--gut)); border-radius: 0; }
.faixa-passos { margin-top: var(--esp-8); display: grid; gap: var(--esp-6); }
.faixa-passo { border-top: 2px solid var(--cor-marinho); padding-top: var(--esp-3); }
.num-g {
  display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: var(--tam-numero);
  line-height: 1; letter-spacing: -0.04em; color: var(--cor-marinho);
}
.faixa-passo h3 { margin-top: var(--esp-4); font-size: var(--tam-h4); line-height: 1.22; }
.faixa-passo .link-card { margin-top: var(--esp-2); }
.faixa-passo p { margin-top: var(--esp-2); color: var(--cor-texto-suave); max-width: 34ch; }
@media (min-width: 768px) {
  .caminho-foto { margin-inline: 0; border-radius: var(--raio-foto); aspect-ratio: 16 / 8; }
  .faixa-passos { grid-template-columns: repeat(2, 1fr); gap: var(--esp-7) var(--esp-6); }
}
@media (min-width: 1024px) {
  .caminho-topo { grid-template-columns: 5fr 7fr; column-gap: 5rem; align-items: center; }
  .caminho-foto {
    aspect-ratio: 16 / 10; margin-right: calc(-1 * var(--borda));
    border-radius: var(--raio-foto) 0 0 var(--raio-foto);
  }
  .faixa-passos { grid-template-columns: repeat(4, 1fr); gap: 0 var(--esp-6); align-items: start; }
}

/* ==========================================================================
   4. PROPRIETÁRIO: foto vertical sangrando à esquerda; comparativo com filetes
   ========================================================================== */
.prop-topo { display: grid; gap: var(--esp-6); }
.prop-foto { aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--gut)); border-radius: 0; }
.prop-texto { display: grid; gap: var(--esp-5); align-content: center; }
.prop-texto > p { max-width: 58ch; }
.prop-texto .lista-filete { margin-top: var(--esp-3); font-weight: var(--peso-destaque); color: var(--cor-titulo); }
@media (min-width: 768px) {
  .prop-foto { margin-inline: 0; border-radius: var(--raio-foto); aspect-ratio: 16 / 8; }
}
@media (min-width: 1024px) {
  .prop-topo { grid-template-columns: 5fr 6fr; column-gap: 6rem; align-items: stretch; }
  .prop-foto {
    aspect-ratio: 1 / 1; margin-left: calc(-1 * var(--borda));
    border-radius: 0 var(--raio-foto) var(--raio-foto) 0;
  }
}

.comparativo { margin-top: var(--esp-8); }
.comp-titulo {
  display: block; caption-side: top; text-align: left; padding-bottom: var(--esp-5);
  font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-h3);
  line-height: 1.2; color: var(--cor-titulo);
}
.comp-tabela, .comp-tabela tbody, .comp-tabela tr, .comp-tabela th, .comp-tabela td { display: block; }
.comp-tabela thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.comp-tabela { width: 100%; }
.comp-tabela tbody tr { padding-block: var(--esp-5); border-top: var(--borda-fina) solid var(--filete); }
.comp-tabela tbody tr:last-child { border-bottom: var(--borda-fina) solid var(--filete); }
.comp-tarefa {
  text-align: left; font-family: var(--fonte-titulo); font-weight: var(--peso-titulo);
  font-size: var(--tam-destaque); line-height: 1.25; color: var(--cor-titulo); padding-bottom: var(--esp-2);
}
.comp-tabela td { padding-block: var(--esp-2); color: var(--cor-texto); }
.quem {
  display: block; margin-bottom: var(--esp-1); font-size: var(--tam-micro); font-weight: var(--peso-destaque);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-texto-suave);
}
.comp-decisao { border-top: 2px solid var(--cor-marinho) !important; border-bottom: 2px solid var(--cor-marinho) !important; }
.comp-decisao td { font-weight: var(--peso-destaque); color: var(--cor-marinho); }
.comp-nota { margin-top: var(--esp-4); color: var(--cor-texto-suave); max-width: 62ch; }

.prop-fim { display: grid; gap: var(--esp-5); margin-top: var(--esp-7); }
.nota-b { max-width: 58ch; color: var(--cor-texto-suave); }
.prop-fim .acoes { display: flex; flex-direction: column; gap: var(--esp-3); align-items: stretch; }
@media (min-width: 768px) {
  .comp-tabela { display: table; table-layout: fixed; border-collapse: collapse; }
  .comp-tabela thead { position: static; display: table-header-group; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .comp-tabela tbody { display: table-row-group; }
  .comp-tabela tr, .comp-tabela tbody tr { display: table-row; padding: 0; }
  .comp-tabela th, .comp-tabela td { display: table-cell; vertical-align: top; }
  .comp-titulo { display: table-caption; }
  .comp-cab-vazio { width: 26%; }
  .comp-cab {
    width: 37%; padding: var(--esp-3) var(--esp-5) var(--esp-3) 0; text-align: left;
    font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-destaque);
    line-height: 1.25; color: var(--cor-marinho); border-top: 4px solid var(--cor-neutro-500);
  }
  .comp-cab-pro { border-top-color: var(--cor-turquesa-700); }
  .comp-tabela tbody tr, .comp-tabela tbody tr:last-child { border: 0; }
  .comp-tabela tbody th, .comp-tabela tbody td {
    padding: var(--esp-5) var(--esp-5) var(--esp-5) 0; border-top: var(--borda-fina) solid var(--filete);
  }
  .comp-tabela tbody tr:last-child th, .comp-tabela tbody tr:last-child td { border-bottom: var(--borda-fina) solid var(--filete); }
  .comp-tarefa { padding-bottom: var(--esp-5); }
  .comp-decisao th, .comp-decisao td { border-top: 2px solid var(--cor-marinho) !important; border-bottom: 2px solid var(--cor-marinho) !important; }
  .comp-decisao { border: 0 !important; }
  .quem { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .prop-fim { grid-template-columns: 6fr 5fr; column-gap: 5rem; align-items: start; }
}

/* ==========================================================================
   5. O QUE É E O QUE NÃO É: faixa marinho, foto panorâmica no topo
   ========================================================================== */
.faixa-foto { height: clamp(13rem, 30vw, 27rem); border-radius: 0; }
.oque-grade { display: grid; gap: var(--esp-7); padding-top: var(--esp-ed); }
.oque-cab { display: grid; gap: var(--esp-5); align-content: start; }
.oque-intro { max-width: 44ch; color: var(--cor-neutro-200); }
.oque-listas { display: grid; gap: var(--esp-7); }
.oque-col h3 {
  font-size: var(--tam-h4); text-wrap: balance; line-height: 1.2; padding-bottom: var(--esp-3);
  border-bottom: 2px solid var(--cor-branco);
}
.lista-sinal li {
  display: flex; align-items: flex-start; gap: var(--esp-3);
  padding-block: 1rem; border-bottom: var(--borda-fina) solid var(--filete-escuro);
  color: var(--cor-branco);
}
.lista-sinal .ico { color: var(--cor-turquesa-300); margin-top: 0.125rem; }
.oque-col-n .ico { color: var(--cor-branco); }
@media (min-width: 768px) {
  .oque-listas { grid-template-columns: repeat(2, 1fr); column-gap: var(--esp-7); align-items: start; }
}
@media (min-width: 1024px) {
  .oque-grade { grid-template-columns: 4fr 8fr; column-gap: 6rem; align-items: start; }
  .oque-cab { position: sticky; top: 6.5rem; }
  .oque-col-n { margin-top: 3.5rem; }
  .oque-rodape { grid-column: 2; }
}

/* ==========================================================================
   6. GUIAS: a única faixa de cards (3), cada um com foto
   ========================================================================== */
.guias-cab { display: grid; gap: var(--esp-4); margin-bottom: var(--esp-7); }
.guias { display: grid; gap: var(--esp-5); align-items: stretch; }
.guia {
  display: flex; flex-direction: column; background: var(--cor-branco);
  border: var(--borda-fina) solid var(--filete); border-radius: var(--raio-foto); overflow: hidden;
}
.guia-foto { aspect-ratio: 3 / 2; border-radius: 0; }
.guia-corpo { padding: var(--esp-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
.guia-corpo h3 { font-size: var(--tam-h4); line-height: 1.22; }
.card-etiqueta { font-size: var(--tam-micro); font-weight: var(--peso-destaque); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-texto-suave); }
.guia-corpo p:not(.card-etiqueta) { color: var(--cor-texto-suave); }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .guia { flex-direction: row; }
  .guia-foto { width: 40%; aspect-ratio: auto; flex: none; min-height: 14rem; }
}
@media (min-width: 1024px) {
  .guias-cab { grid-template-columns: 7fr 5fr; column-gap: 5rem; align-items: end; }
  .guias { grid-template-columns: repeat(3, 1fr); gap: var(--esp-6); }
  .guia-1 .guia-foto { aspect-ratio: 4 / 5; }
  .guia-2 .guia-foto { aspect-ratio: 4 / 5; }
  .guia-3 .guia-foto { aspect-ratio: 4 / 5; }
  .guia-corpo { padding: var(--esp-5) var(--esp-5) var(--esp-4); }
}

/* ==========================================================================
   7. FAQ: filetes, foto vertical na lateral
   ========================================================================== */
.faq-grade { display: grid; gap: var(--esp-6); }
.faq-lateral { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); }
.faq-foto { margin-top: var(--esp-5); width: 100%; aspect-ratio: 3 / 2; }
.faq { align-content: start; border-top: 2px solid var(--cor-marinho); }
.faq details { border-bottom: var(--borda-fina) solid var(--filete); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4);
  min-height: var(--alvo-min); padding: var(--esp-5) 0;
  font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-destaque);
  line-height: 1.35; color: var(--cor-titulo); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duracao-transicao);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--cor-turquesa-800); }
.faq details p { padding: 0 var(--esp-6) var(--esp-5) 0; max-width: 62ch; color: var(--cor-texto); }
@media (min-width: 1024px) {
  .faq-grade { grid-template-columns: 5fr 7fr; column-gap: 6rem; align-items: start; }
  .faq-lateral { position: sticky; top: 6.5rem; }
}

/* ==========================================================================
   8. CADASTRO (marinho-900) e formulário do funil A
   ========================================================================== */
.cta-grade { display: grid; gap: var(--esp-7); align-items: start; }
.cta-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); }
.cta-texto > p { max-width: 58ch; }
.cta-foto { width: 100%; aspect-ratio: 16 / 10; margin-block: var(--esp-3); }
.cta-texto .lista-filete { width: 100%; color: var(--cor-branco); }
.cta-subtitulo { margin-top: var(--esp-5); color: var(--cor-branco); }
.cta-subtitulo strong { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-h4); }
.lista-passos { width: 100%; display: grid; counter-reset: passo; border-top: var(--borda-fina) solid var(--filete-escuro); }
.lista-passos li {
  display: grid; grid-template-columns: 4rem 1fr; align-items: baseline; counter-increment: passo;
  padding-block: 1rem; border-bottom: var(--borda-fina) solid var(--filete-escuro); color: var(--cor-branco);
}
.lista-passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -0.03em;
  color: var(--cor-turquesa-300);
}
@media (min-width: 1024px) {
  .cta-grade { grid-template-columns: 5fr 6fr; column-gap: 6rem; }
}


/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */
.form {
  background: var(--cor-branco); color: var(--cor-texto);
  border-radius: var(--raio-md); padding: var(--esp-5);
  display: grid; gap: var(--esp-5);
}
.form :focus-visible { outline-color: var(--cor-foco); }
.form-titulo { font-family: var(--fonte-titulo); font-size: var(--tam-h4); line-height: var(--entrelinha-titulo); color: var(--cor-titulo); }
.form-aviso { color: var(--cor-texto-suave); }
.form-grade { display: grid; gap: var(--esp-5); }
.campo { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.campo label, .check label { font-weight: var(--peso-destaque); color: var(--cor-texto); }
.campo input, .campo select {
  width: 100%; min-height: var(--alvo-min); padding: 0.5rem var(--esp-3);
  background: var(--cor-branco); color: var(--cor-texto);
  border: var(--borda-campo) solid var(--cor-borda-campo); border-radius: var(--raio-sm);
  font-family: var(--fonte-texto); font-size: 1rem;
}
.campo input:hover, .campo select:hover { border-color: var(--cor-neutro-700); }
.campo input:focus-visible, .campo select:focus-visible, .check input:focus-visible {
  outline: var(--foco-largura) solid var(--cor-foco); outline-offset: var(--foco-afastamento);
}
.ajuda { font-size: var(--tam-micro); line-height: 1.5; color: var(--cor-texto-suave); }
.consentimentos { display: grid; gap: var(--esp-4); }
.check { display: flex; align-items: flex-start; gap: var(--esp-3); }
.check input {
  flex: none; width: 1.5rem; height: 1.5rem; margin: 0.625rem 0 0;
  accent-color: var(--cor-turquesa-700);
}
.check label { font-weight: var(--peso-texto); padding-block: 0.5rem; }
.form-lgpd { color: var(--cor-texto-suave); }


/* RODAPÉ */
/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape { background: var(--cor-fundo-rodape); color: var(--cor-neutro-200); padding-block: var(--esp-8) var(--esp-6); }
.rodape-grade { display: grid; gap: var(--esp-6); }
.rodape-marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); }
.rodape-marca a { display: inline-flex; min-height: var(--alvo-min); align-items: center; }
.rodape-marca img { width: 10.5rem; height: auto; display: block; }
.rodape-aviso { max-width: 34rem; }
.rodape-aviso strong { color: var(--cor-branco); }
.rodape-titulo { margin-bottom: var(--esp-2); color: var(--cor-branco); }
.rodape-titulo strong { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--tam-destaque); }
.rodape a, .rodape a:visited {
  display: block; padding-block: 0.65rem; line-height: 1.35;
  color: var(--cor-link-escuro);
}
.rodape ul, .rodape li { margin: 0; padding: 0; list-style: none; }
.rodape-marca a { display: inline-flex; align-items: center; padding-block: 0; }
.rodape a:hover { color: var(--cor-branco); }
.rodape-dados {
  display: grid; gap: var(--esp-2);
  margin-top: var(--esp-7); padding-top: var(--esp-5);
  border-top: var(--borda-fina) solid var(--cor-neutro-700);
}
.rodape-legal { margin-top: var(--esp-5); max-width: 52rem; }
.rodape-credito { margin-top: var(--esp-5); color: var(--cor-neutro-200); }

/* Crédito PMTurbo: seletor mais forte que .rodape a:hover do tema */
.rodape .rodape-credito a.pmturbo-link,
.rodape .rodape-credito a.pmturbo-link:visited {
  display: inline-flex; align-items: center; min-height: var(--alvo-min);
  padding: 0.25rem 0.75rem;
  background: var(--cor-branco); color: var(--cor-marinho-900);
  border: var(--borda-fina) solid var(--cor-branco);
  border-radius: var(--raio-credito);
  font-weight: var(--peso-destaque); text-decoration: none;
  transition: background-color var(--duracao-transicao), color var(--duracao-transicao);
}
.rodape .rodape-credito a.pmturbo-link:hover,
.rodape .rodape-credito a.pmturbo-link:focus-visible {
  background: var(--cor-marinho-900); color: var(--cor-branco);
  border: var(--borda-fina) solid var(--cor-branco);
}

/* ==========================================================================
   FORMULÁRIO E RODAPÉ: pontos de quebra
   ========================================================================== */
.rodape { border-top: var(--borda-fina) solid var(--filete-escuro); }
@media (min-width: 768px) {
  .form-grade { grid-template-columns: repeat(2, 1fr); }
  .form { padding: var(--esp-6); }
  .rodape-grade { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .rodape-grade { grid-template-columns: repeat(5, 1fr); }
  .rodape-marca { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .logo img { width: 12rem; }
  .nav-destaque { flex: none; }
  .btn-menu { max-width: 11.5rem; }
  .nav-link, .nav-link:visited { padding-inline: 0.5rem; }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}