/* Fontes auto-hospedadas (Google Fonts, subconjunto latin) */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/comfortaa-latin-1.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: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/comfortaa-latin-1.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: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/nunito-latin-1.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: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/nunito-latin-1.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: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/nunito-latin-1.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: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/nunito-latin-1.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;
}

/* =========================================================
   Dinâmica Bilingual School · LP Matrículas 2027
   Identidade: KV "Infinito de possibilidades"
   ========================================================= */

:root {
  /* Marca */
  --azul: #0054A6;
  --navy: #2E3180;
  --navy-escuro: #1F2160;
  --navy-faixa: #0A3280;
  --laranja: #F37021;
  --laranja-escuro: #D07302;
  --amarelo: #FFCB04;
  --vermelho: #F2141C;
  --verde: #2E7D32;

  /* Neutros do KV */
  --fundo: #F2F2F4;
  --fundo-borda: #D9DADE;
  --branco: #FFFFFF;
  --texto: #3F4262;
  --texto-suave: #6F7390;
  --linha: #E3E4EA;

  /* Degradê arco-íris do KV (da esquerda para a direita) */
  --arco-iris: linear-gradient(90deg, #FF0E1D 0%, #FF602B 14%, #FF9132 26%, #F9AD33 36%, #928821 50%, #2E7D32 62%, #0B4A2E 72%, #092E48 86%, #2A3173 100%);

  /* Tipografia */
  --fonte-titulo: 'Comfortaa', 'Quicksand', sans-serif;
  --fonte-texto: 'Nunito', 'Segoe UI', sans-serif;

  /* Sistema */
  --raio: 24px;
  --raio-sm: 14px;
  --sombra: 0 14px 40px rgba(46, 49, 128, 0.10);
  --secao-y: clamp(72px, 8vw, 140px);
  --header-h: 80px;
  --transicao: 220ms ease;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 18px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco);
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fonte-titulo); font-weight: 700; color: var(--navy); }

.container { width: min(100% - 40px, 1280px); margin-inline: auto; }

/* Título em degradê arco-íris, sempre em caixa alta (como no KV) */
.titulo-kv {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  background: var(--arco-iris);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Variante para fundo navy: mesmas cores, mais claras */
.titulo-kv--claro {
  background-image: linear-gradient(90deg, #FF5A5F 0%, #FF8C42 18%, #FFC94D 36%, #BFE06A 52%, #7FD6A0 66%, #5CC8FF 84%, #C7CCFF 100%);
}

.eyebrow {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laranja-escuro);
}
.eyebrow--claro { color: var(--amarelo); }

.lead {
  font-weight: 700;
  font-size: clamp(20px, 1.2vw + 8px, 26px);
  line-height: 1.35;
  color: var(--navy);
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  color: var(--laranja-escuro);
  transition: gap var(--transicao), color var(--transicao);
}
.link-seta::after { content: "→"; font-size: 1.1em; line-height: 1; }
.link-seta:hover { gap: 14px; color: var(--laranja); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-family: var(--fonte-texto);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
/* CTA principal, animado (mesma receita do botão da NeuroPey, nas cores da Dinâmica):
   3 círculos que enchem o botão em camadas, texto que rola para cima, seta redonda que
   desliza e inverte as cores, partículas subindo enquanto o botão está na tela. */
.btn--primary {
  --l1: var(--amarelo);
  --l2: var(--laranja-escuro);
  --l3: var(--navy);
  --ease-botao: cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;                      /* sem anel: o preenchimento do hover cobre o botão inteiro */
  background: radial-gradient(70% 90% at 50% 120%, rgba(255, 220, 150, 0.55), transparent), var(--laranja);
  color: var(--branco);
  transform: translateZ(0);
  transition: color 500ms ease;
}
.btn--primary:active { transform: scale(0.965); }
.btn__bg, .btn__pts { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.btn__bg i {
  position: absolute;
  left: 50%;
  top: -60%;
  width: max(200%, 10rem);
  aspect-ratio: 1;
  margin-left: calc(max(200%, 10rem) / -2);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
.btn__bg i:nth-child(1) { background: var(--l1); transition-delay: 0.2s; }
.btn__bg i:nth-child(2) { background: var(--l2); transition-delay: 0.1s; }
.btn__bg i:nth-child(3) { background: var(--l3); transition-delay: 0s; }
.btn__pts i {
  position: absolute;
  bottom: -6px;
  left: var(--x);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--branco);
  opacity: var(--o);
  animation: btn-pt var(--t) ease-in-out var(--d) infinite;
  animation-play-state: paused;
}
.btn--primary.is-live .btn__pts i { animation-play-state: running; }
@keyframes btn-pt { 0% { transform: translateY(0); } 85% { opacity: 0; } 100% { transform: translateY(-58px); opacity: 0; } }
.btn__label { position: relative; z-index: 1; display: inline-grid; overflow: hidden; padding: 2px 0; }
.btn__label > span { grid-area: 1 / 1; padding: 4px 0; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms linear; }
.btn__label > span + span { opacity: 0; transform: translateY(70%); }
.btn__seta {
  position: relative;
  z-index: 1;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--branco);
  color: var(--laranja);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), background-color 500ms ease, color 500ms ease;
}
.btn__seta svg { width: 17px; height: 17px; }
@media (hover: hover) {
  .btn--primary:hover .btn__bg i { transform: scale(1); transition: transform 1.3s var(--ease-botao); }
  .btn--primary:hover .btn__bg i:nth-child(1) { transition-delay: 0s; }
  .btn--primary:hover .btn__bg i:nth-child(2) { transition-delay: 0.1s; }
  .btn--primary:hover .btn__bg i:nth-child(3) { transition-delay: 0.2s; }
  .btn--primary:hover .btn__label > span:first-child { opacity: 0; transform: translateY(-70%); transition: transform 1.4s var(--ease-botao), opacity 300ms linear; }
  .btn--primary:hover .btn__label > span + span { opacity: 1; transform: none; transition: transform 1.4s var(--ease-botao), opacity 1.4s var(--ease-botao); }
  .btn--primary:hover .btn__seta { transform: translateX(5px); background: var(--amarelo); color: var(--navy); }
}
/* Botão discreto (header): contorno, sem seta, não compete com os CTAs principais */
.btn--ghost { background: transparent; color: var(--navy); border-color: rgba(46, 49, 128, 0.35); }
.btn--ghost:hover { background: var(--navy); color: var(--branco); border-color: var(--navy); }
.btn--ghost.btn--sm { font-size: 14px; font-weight: 700; padding: 10px 20px; }
.btn--sm { font-size: 15px; padding: 8px 8px 8px 22px; gap: 12px; }
.btn--lg { font-size: 18px; padding: 14px 14px 14px 34px; gap: 16px; }
.btn--lg .btn__seta { width: 40px; height: 40px; }
.btn:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

/* ---------- Seções: base ---------- */
.secao { padding-block: var(--secao-y); }
h2 { font-size: clamp(28px, 2.2vw + 8px, 44px); }
.eyebrow + h2 { margin-top: 14px; }
h2 + p { margin-top: 22px; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .btn--play { left: 50%; transform: translateX(-50%); }
  .btn--play:hover { transform: translateX(-50%) translateY(-2px); }
  .btn--play { bottom: 16px; font-size: 14px; }
}
@media (max-width: 480px) {
  :root { --header-h: 68px; }
  body { font-size: 16px; }
  .btn--ghost.btn--sm { font-size: 13px; padding: 9px 16px; }
  .btn--lg { font-size: 16px; padding: 12px 12px 12px 28px; }
  .btn--lg .btn__seta { width: 36px; height: 36px; }
}

/* ---------- Header ---------- */
/* Header flutuante: ao rolar gruda no alto e a cápsula ganha fundo */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  margin-bottom: calc(-1 * var(--header-h)); /* o hero começa por baixo dele */
  padding-top: 8px;                           /* padding, não margem no filho: evita o colapso que abria um vão branco */
  background: transparent;
}
/* Ao rolar, só a cápsula do conteúdo ganha preenchimento (não a largura toda) */
.header__inner {
  height: calc(var(--header-h) - 16px);
  padding: 0 10px 0 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 32px;
  transition: background-color var(--transicao), box-shadow var(--transicao);
}
.header.is-scrolled .header__inner {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(46, 49, 128, 0.14);
}
.header__logo img { width: 192px; height: auto; }
.header__nav { display: flex; gap: 32px; margin-left: auto; }
.header__nav a:not(.btn) {
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.header__nav a:not(.btn):hover { color: var(--laranja-escuro); border-bottom-color: var(--laranja); }
.header__nav-cta, .header__menu { display: none; }
.header__cta { margin-left: 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .header__nav { gap: 22px; }
}
@media (max-width: 960px) {
  .header__logo img { width: 160px; }
  .header__inner { position: relative; }
  .header__cta { margin-left: auto; }
  .header__menu {
      display: grid;
      place-items: center;
      flex: none;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: none;
      cursor: pointer;
    }
  .header__menu:focus-visible { outline: 3px solid var(--amarelo); }
  .header__menu span, .header__menu span::before, .header__menu span::after {
      content: "";
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 2px;
      background: var(--navy);
      transition: transform 220ms ease, opacity 220ms ease;
    }
  .header__menu span { position: relative; }
  .header__menu span::before { position: absolute; top: -7px; }
  .header__menu span::after { position: absolute; top: 7px; }
  .menu-aberto .header__menu span { background: transparent; }
  .menu-aberto .header__menu span::before { transform: translateY(7px) rotate(45deg); }
  .menu-aberto .header__menu span::after { transform: translateY(-7px) rotate(-45deg); }
  .header__nav {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 2px;
      margin: 0;
      padding: 12px;
      background: var(--branco);
      border-radius: 24px;
      box-shadow: 0 20px 50px rgba(46, 49, 128, 0.18);
    }
  .menu-aberto .header__nav { display: flex; }
  .header__nav a:not(.btn) { padding: 13px 16px; border-radius: 12px; border-bottom: 0; font-size: 16px; }
  .header__nav a:not(.btn):hover { background: var(--fundo); color: var(--navy); }
  .header__nav-cta { display: inline-flex; justify-content: center; margin: 8px 4px 4px; }
  .menu-aberto .header__inner { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(46, 49, 128, 0.14); }
}
@media (max-width: 600px) {
  .header__cta { display: none; }
  .header__menu { margin-left: auto; }
}
@media (max-width: 480px) {
  .header__logo img { width: 136px; }
}

/* ---------- Hero (KV) ---------- */
.hero {
  position: relative;
  min-height: 90svh;   /* svh: no celular conta só a área visível (sem as barras do navegador) */
  padding-top: var(--header-h); /* o header flutua por cima; o conteúdo começa abaixo dele */
  display: flex;
  flex-direction: column;
  isolation: isolate;
  /* Fundo de estúdio do KV: cinza com brilho branco; ∞ à direita; reflexo arco-íris no "chão" */
  --inf-w: min(1000px, 50vw);
  background:
    url("assets/img/hero-reflexo.webp") no-repeat calc(50% + var(--inf-w) * 0.44) bottom / calc(var(--inf-w) * 1.35) auto,
    url("assets/img/hero-infinito.webp") no-repeat calc(50% + var(--inf-w) * 0.44) 48% / var(--inf-w) auto,
    radial-gradient(ellipse 65% 75% at 62% 45%, #FDFDFD 0%, #EFEFF1 48%, var(--fundo-borda) 100%);
}
.hero__inner {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 72px 0 120px;
}
.hero__texto {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.hero__titulo {
  font-size: clamp(34px, 2.6vw + 10px, 56px);
}
.hero__sub {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(18px, 1.1vw + 6px, 24px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}
.hero__texto .btn { margin-top: 12px; }
.hero__selo {
  position: absolute;
  top: 48px;
  right: 0;
  width: 112px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.08));
}
/* Faixa das unidades: carrossel de texto contínuo (4 cópias; anda 1/4 = uma cópia, loop sem emenda) */
.hero__faixa {
  position: relative;
  overflow: hidden;
  padding: 0 0 36px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hero__faixa-trilho { display: flex; width: max-content; animation: faixa-rolar 36s linear infinite; }
.hero__faixa:hover .hero__faixa-trilho { animation-play-state: paused; }
.hero__faixa-grupo { display: flex; white-space: nowrap; }
.hero__faixa-grupo span { color: var(--navy-faixa); }
.hero__faixa-grupo span:nth-child(odd) { color: var(--laranja-escuro); }
.hero__faixa-grupo span::after { content: "|"; margin: 0 28px; color: #B8BAC6; font-weight: 400; }
@keyframes faixa-rolar { to { transform: translateX(-25%); } }

/* ---------- Responsivo ---------- */
@media (max-width: 1400px) {
  .hero__texto { max-width: 540px; }
}
@media (max-width: 960px) {
  .hero {
      --inf-w: min(100vw - 40px, 620px);   /* respiro lateral: o ∞ não encosta nas bordas */
      background: radial-gradient(ellipse 80% 60% at 50% 40%, #FDFDFD 0%, #EFEFF1 55%, var(--fundo-borda) 100%);
    }
  .hero__inner {
      width: 100%;
      padding: 56px 20px calc(var(--inf-w) * 0.41 + 56px);
      align-items: flex-start;
      background:
        url("assets/img/hero-reflexo-m.webp") no-repeat center calc(100% + 10px) / 100% auto,
        url("assets/img/hero-infinito-m.webp") no-repeat center calc(100% - 8px) / var(--inf-w) auto;
    }
  .hero__texto { max-width: 640px; margin-inline: auto; align-items: center; text-align: center; }
  .hero__selo { top: auto; right: calc(50% - var(--inf-w) / 2); bottom: calc(8px + var(--inf-w) * 0.408 - 20px); width: clamp(60px, 10vw, 84px); }
  .hero__inner { flex-direction: column; justify-content: center; }
  .hero__faixa { padding-bottom: 28px; font-size: 12px; letter-spacing: 0.12em; }
  .hero__faixa-grupo span::after { margin: 0 16px; }
}
@media (max-width: 480px) {
  .hero { --inf-w: min(100vw - 40px, 620px, max(220px, (100svh - 470px) * 2.4)); }
  .hero__inner { padding-top: 36px; }
  .hero__texto { gap: 16px; }
  .hero__titulo { font-size: 32px; }
}

/* ---------- História ---------- */
.historia { padding-block: var(--secao-y); background: var(--branco); }
.historia__topo { text-align: center; max-width: 760px; margin-inline: auto; }

/* Linha do tempo vertical: eixo arco-íris no centro, foto de um lado e texto do outro, alternando */
.linha {
  --eixo: 88px;
  --dot: 16px;
  list-style: none;
  position: relative;
  margin: clamp(48px, 5vw, 80px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--eixo) minmax(0, 1fr);
  row-gap: clamp(40px, 5vw, 72px);
}
/* trilho sutil + preenchimento arco-íris que acompanha a rolagem (--progresso vem do JS) */
.linha::before, .linha::after {
  content: "";
  position: absolute;
  top: var(--linha-top, 0);        /* do centro do 1º ponto ao centro do último (JS mede) */
  left: 50%;
  z-index: 0;
  width: 2px;
  height: var(--linha-h, 100%);
  border-radius: 999px;
  transform: translateX(-50%);
}
.linha::before { background: var(--linha); }
.linha::after {
  transform-origin: top;
  transform: translateX(-50%) scaleY(var(--progresso, 0));
  background: linear-gradient(180deg, #FF0E1D 0%, #FF8A2E 22%, #F9AD33 42%, #2E7D32 64%, #1C4FA0 84%, #2A3173 100%);
  transition: transform 160ms linear;
}
.marco {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}
.marco::before {                 /* ponto sobre o eixo, acima da linha */
  content: "";
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--branco);
  box-shadow: 0 0 0 4px var(--branco), 0 0 0 6px var(--linha);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
.marco.is-on::before { background: var(--cor); box-shadow: 0 0 0 4px var(--branco), 0 0 0 6px var(--cor); }
.marco:nth-child(1) { --cor: #F2141C; }
.marco:nth-child(2) { --cor: #F9AD33; }
.marco:nth-child(3) { --cor: #2A3173; }
.marco__foto {
  grid-row: 1;
  margin: 0;
  width: min(100%, 500px);
  aspect-ratio: 3 / 2;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--fundo);
}
.marco__foto img { width: 100%; height: 100%; object-fit: cover; }
.marco__texto { grid-row: 1; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.marco__destaque {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(28px, 1.8vw + 10px, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--navy);
}
/* ímpar: foto à esquerda (encostada no eixo), texto à direita · par: espelhado */
.marco:nth-child(odd) .marco__foto { grid-column: 1; justify-self: end; }
.marco:nth-child(odd) .marco__texto { grid-column: 3; justify-self: start; text-align: left; align-items: flex-start; }
.marco:nth-child(even) .marco__foto { grid-column: 3; justify-self: start; }
.marco:nth-child(even) .marco__texto { grid-column: 1; justify-self: end; text-align: right; align-items: flex-end; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .linha { --eixo: 40px; grid-template-columns: var(--eixo) minmax(0, 1fr); row-gap: 40px; }
  .linha::before, .linha::after { left: calc(var(--eixo) / 2); }
  .marco { row-gap: 18px; align-items: start; }
  .marco::before { grid-column: 1; width: 14px; height: 14px; margin-top: 8px; }
  .marco:nth-child(n) .marco__foto, .marco:nth-child(n) .marco__texto { grid-column: 2; justify-self: start; text-align: left; align-items: flex-start; }
  .marco:nth-child(n) .marco__foto { width: 100%; }
  .marco:nth-child(n) .marco__texto { grid-row: 2; max-width: none; }
}

/* ---------- Galeria: carrossel contínuo, sem espaçamento ---------- */
.galeria { overflow: hidden; background: var(--fundo); }
.galeria__trilho { display: flex; width: max-content; animation: galeria-rolar 70s linear infinite; }
.galeria:hover .galeria__trilho { animation-play-state: paused; }
.galeria__faixa { display: flex; }
.galeria__faixa img { display: block; flex: none; height: clamp(200px, 20vw, 340px); width: auto; }
@keyframes galeria-rolar { to { transform: translateX(-50%); } }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .galeria__faixa img { height: 200px; }
}

/* ---------- Proposta pedagógica (fundo navy) ---------- */
.proposta {
  padding-block: var(--secao-y);
  background:
    radial-gradient(ellipse 60% 70% at 85% 0%, rgba(0, 114, 188, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(243, 112, 33, 0.18) 0%, transparent 60%),
    var(--navy-escuro);
  color: rgba(255, 255, 255, 0.82);
}
.proposta__topo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.proposta__topo h2 { max-width: 640px; }
.proposta__lead .lead { color: var(--branco); }
.proposta__lead p + p { margin-top: 16px; }

.cards {
  list-style: none;
  margin: clamp(48px, 5vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
/* Cards compactos e expansíveis: foto baixa com a tag por cima, título com botão "+",
   texto só quando aberto (details nativo; um aberto por vez via name) */
.card {
  display: flex;
  flex-direction: column;
  align-self: start;
  background: var(--branco);
  color: var(--texto);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.card__foto { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fundo); }
/* absoluta para a foto obedecer ao 16:9 do card e não à proporção do arquivo (alturas iguais) */
.card__foto img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(20, 25, 70, 0.55)); pointer-events: none; }
.card__tag {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 1;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laranja-escuro);
}
.card__selo {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 64px;
  height: auto;
  background: var(--branco);
  border-radius: 50%;
  padding: 5px;
}
.card__mais summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;              /* mesma altura em todos os cards, com título de 1 ou 2 linhas */
  padding: 16px 20px 16px 24px;
  list-style: none;
  cursor: pointer;
}
.card__mais summary::-webkit-details-marker { display: none; }
.card__mais summary:focus-visible { outline: 3px solid var(--amarelo); outline-offset: -3px; }
.card__mais summary::after {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform var(--transicao), background-color var(--transicao);
}
.card__mais summary:hover::after { background-color: var(--laranja-escuro); }
.card__mais[open] summary::after { transform: rotate(45deg); background-color: var(--navy); }
.card__titulo { font-size: 20px; line-height: 1.25; color: var(--navy); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card__corpo { display: flex; flex-direction: column; gap: 14px; padding: 0 24px 26px; }
.card__corpo p { font-size: 16px; line-height: 1.6; }

/* Abertura animada dos details (navegadores sem suporte abrem direto) */
:root { interpolate-size: allow-keywords; }
.card__mais::details-content, .faq__item::details-content {
  height: 0;
  overflow: clip;
  transition: height 450ms cubic-bezier(0.16, 1, 0.3, 1), content-visibility 450ms allow-discrete;
}
.card__mais[open]::details-content, .faq__item[open]::details-content { height: auto; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .proposta__topo { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .proposta__topo h2, .proposta__lead { margin-inline: auto; max-width: 560px; }
  .cards { grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin-inline: auto; }
  .card { align-self: stretch; }
}
@media (max-width: 600px) {
  .card__tag { font-size: 10px; letter-spacing: 0.1em; padding: 6px 10px; left: 14px; bottom: 12px; }
  .card__titulo { font-size: 18px; }
}

/* ---------- Unidades ---------- */
.unidades { padding-block: clamp(56px, 6vw, 104px); background: var(--branco); }
.unidades__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: stretch;
}
.unidades__col { display: flex; flex-direction: column; gap: 22px; }
.unidades__topo p:not(.eyebrow) { font-size: 17px; }
.unidades__lista { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.unidades__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 18px 10px 30px;
  border: 0;
  border-radius: var(--raio-sm);
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--transicao), box-shadow var(--transicao);
}
.unidades__tab::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 5px;
  border-radius: 999px;
  background: var(--arco-iris);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity var(--transicao), transform var(--transicao);
}
.unidades__tab:hover { background: var(--fundo); }
.unidades__tab[aria-selected="true"] { background: var(--branco); box-shadow: 0 10px 30px rgba(46, 49, 128, 0.12); }
.unidades__tab[aria-selected="true"]::before { opacity: 1; transform: none; }

/* Rodízio automático: a barra da unidade ativa enche em 6 s e, ao terminar, o JS passa para a próxima.
   Pausa com o mouse sobre a área; some quando a pessoa escolhe uma unidade. */
.unidades__lista.is-auto .unidades__tab[aria-selected="true"]::before {
  transform-origin: top;
  animation: unidade-progresso 6s linear forwards;
}
.unidades__grid:hover .unidades__lista.is-auto .unidades__tab[aria-selected="true"]::before,
.unidades__grid:focus-within .unidades__lista.is-auto .unidades__tab[aria-selected="true"]::before { animation-play-state: paused; }
@keyframes unidade-progresso { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.unidades__tab:focus-visible { outline: 3px solid var(--amarelo); outline-offset: -3px; }
.unidades__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: color var(--transicao);
}
.unidades__tab[aria-selected="true"] .unidades__nome { color: var(--navy); }
.unidades__seg { font-size: 14px; line-height: 1.4; color: var(--texto-suave); }

.unidades__paineis { display: grid; }
.unidade { display: flex; flex-direction: column; }
.unidade[hidden] { display: none; }
.unidade__foto {
  position: relative;
  margin: 0;
  flex: 1;
  min-height: 440px;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--fundo);
  box-shadow: var(--sombra);
}
.unidade__foto img { width: 100%; height: 100%; object-fit: cover; }
.unidade__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20, 25, 70, 0.55) 100%);
  pointer-events: none;
}
.btn--play {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 1;
  padding: 12px 22px 12px 12px;
  font-size: 15px;
  background: var(--branco);
  color: var(--navy);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.btn--play::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 18px no-repeat;
  flex: 0 0 auto;
}
.btn--play:hover { background: var(--amarelo); transform: translateY(-2px); }
.unidade__info { display: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .unidades__grid { grid-template-columns: 1fr; gap: 36px; }
  .unidades__lista { display: none; }
  .unidades__paineis { gap: 36px; }
  .unidade[hidden] { display: flex; }
  .unidade__foto { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
  .unidades__topo { text-align: center; margin-inline: auto; }
  .unidades__topo p:not(.eyebrow) { margin-inline: auto; }
  .unidade__info { display: block; margin-top: 16px; text-align: center; }
  .unidade__info h3 { font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; }
  .unidade__info p { margin-top: 4px; font-size: 15px; color: var(--texto-suave); }
}

/* ---------- Experiências (vídeos autohospedados) ---------- */
.reels { padding-block: var(--secao-y); background: var(--fundo); }
/* Grade: título centralizado · faixa · navegação (seta · pontos · seta) centralizada */
.reels .container { display: grid; grid-template-columns: 1fr auto auto auto 1fr; column-gap: 16px; align-items: center; }
.reels__topo { grid-column: 1 / -1; text-align: center; }
.reels__topo h2 { max-width: 760px; margin-inline: auto; }
.reels__setas { display: contents; }
.seta {
  grid-row: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: var(--branco);
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao), transform var(--transicao);
}
.seta[data-rolar="-1"] { grid-column: 2; }
.seta[data-rolar="1"] { grid-column: 4; }
.seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.seta:hover { background: var(--laranja); transform: translateY(-2px); }
.seta:active { transform: scale(0.95); }
.seta:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

/* Carrossel: sempre tiles inteiros (4 · 2 · 1 por tela), rolagem com snap */
.reels__faixa {
  --por-tela: 4;
  --vao: 20px;
  grid-column: 1 / -1;
  grid-row: 2;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  gap: var(--vao);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reels__faixa::-webkit-scrollbar { display: none; }
.reel {
  position: relative;
  flex: 0 0 calc((100% - var(--vao) * (var(--por-tela) - 1)) / var(--por-tela));
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-radius: var(--raio-sm);
  overflow: hidden;
  background: var(--navy-escuro);
  box-shadow: var(--sombra);
}
.reel video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.reel--paisagem video { object-position: 62% center; }   /* vídeo horizontal: mantém o grupo no quadro */
.reel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  translate: -50% -50%;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F37021' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 56% center / 28px no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: opacity var(--transicao), transform var(--transicao);
}
.reel__play:hover { transform: scale(1.06); }
.reel__play:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }
.reel.is-playing .reel__play { opacity: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F37021' d='M7 5h4v14H7zM13 5h4v14h-4z'/%3E%3C/svg%3E"); background-position: center; }
.reel.is-playing:hover .reel__play { opacity: 1; pointer-events: auto; }

.reels__pontos { grid-column: 3; grid-row: 3; display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 28px; }
.reels__pontos button {
  width: 24px;
  height: 24px;
  padding: 7px;
  background-clip: content-box;
  border: 0;
  border-radius: 999px;
  background: #C9CBD8;
  cursor: pointer;
  transition: width var(--transicao), background-color var(--transicao);
}
.reels__pontos button[aria-current="true"] { width: 42px; background: var(--arco-iris); }
.reels__pontos button:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .reels .container { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 12px; }
  .reels__topo, .reels__pontos { grid-column: 1 / -1; }
  .reels__pontos { grid-row: 3; }
  .seta { grid-row: 2; align-self: center; width: 44px; height: 44px; margin-top: 28px; background: var(--branco); color: var(--navy); box-shadow: 0 8px 22px rgba(46, 49, 128, 0.16); }
  .seta:hover { background: var(--navy); color: var(--branco); }
  .seta[data-rolar="-1"] { grid-column: 1; }
  .seta[data-rolar="1"] { grid-column: 3; }
  .reels__faixa { --por-tela: 2; --vao: 16px; grid-column: 2; grid-row: 2; margin-top: 28px; }
}
@media (max-width: 600px) {
  .reels__faixa { --por-tela: 1; }
}

/* ---------- Fechamento: foto dominante + card do formulário sobreposto ---------- */
.visita { background: var(--branco); color: rgba(255, 255, 255, 0.85); }
.visita__foto { position: relative; height: clamp(320px, 44vw, 640px); overflow: clip; } /* clip, não hidden: hidden viraria o contêiner de rolagem da animação */
/* Foto com zoom vinculado à rolagem (animação por scroll nativa; sem suporte, fica estática) */
.visita__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/cta-fundo.webp") center 32% / cover no-repeat;
  transform-origin: center 40%;
}
@supports (animation-timeline: view()) {
  .visita__foto::before {
    animation: foto-zoom linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}
@keyframes foto-zoom { from { transform: scale(1); } to { transform: scale(1.18); } }
/* O próprio bloco azul (largura total) tem os cantos superiores arredondados e sobe sobre a foto */
.visita__bloco {
  position: relative;
  margin-top: -72px;
  padding: 56px 0 var(--secao-y);
  border-radius: 40px 40px 0 0;
  background: var(--navy-escuro);
}
.visita__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.visita__texto { padding-top: 16px; }
.visita__texto h2 + p { margin-top: 24px; max-width: 540px; }

/* Quadro de convite para o chat da LeadStaker (no lugar do antigo formulário) */
.convite {
  margin-top: -110px;             /* sobe sobre a foto, cobrindo só o chão da varanda */
  background: var(--branco);
  color: var(--texto);
  border-radius: var(--raio);
  padding: 40px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-self: stretch;            /* desce até o fim do texto ao lado */
}
.convite__topo { display: flex; align-items: center; gap: 14px; }
.convite__topo p { display: flex; flex-direction: column; line-height: 1.25; }
.convite__avatar { width: 56px; height: 56px; border-radius: 50%; outline: 3px solid var(--fundo); }
.convite__nome { font-size: 18px; font-weight: 800; color: var(--navy); }
.convite__status { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--texto-suave); }
.convite__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #2FB463; }
.convite__balao {
  background: var(--fundo);
  border-radius: 6px 20px 20px 20px;
  padding: 16px 20px;
  font-size: 17px;
  line-height: 1.5;
}
.convite__btn { width: 100%; margin-top: auto; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .visita__bloco { margin-top: -44px; padding-top: 20px; border-radius: 28px 28px 0 0; }
  .visita__grid { grid-template-columns: 1fr; gap: 36px; }
  .convite { margin-top: 0; padding: 24px 20px; }
}
@media (max-width: 600px) {
  .visita__foto::before { background-image: url("assets/img/cta-fundo-m.webp"); }
}

/* ---------- FAQ (centralizado, acordeão nativo) ---------- */
.faq { padding-block: var(--secao-y); background: var(--branco); }
.faq__inner { max-width: 820px; }
.faq__topo { text-align: center; }
.faq__lista { margin-top: clamp(36px, 4vw, 56px); display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  background: var(--fundo);
  border-radius: var(--raio-sm);
  transition: background-color var(--transicao), box-shadow var(--transicao);
}
.faq__item[open] { background: var(--branco); box-shadow: var(--sombra); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.35;
  color: var(--navy);
  transition: color var(--transicao);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--azul); }
.faq__item summary:focus-visible { outline: 3px solid var(--amarelo); outline-offset: -3px; border-radius: var(--raio-sm); }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232E3180' stroke-width='2.4' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform var(--transicao), background-color var(--transicao);
}
.faq__item[open] summary::after { transform: rotate(45deg); background-color: var(--amarelo); }
.faq__item p { padding: 0 80px 26px 24px; font-size: 17px; color: var(--texto); }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .faq__item summary { font-size: 16px; padding: 18px 18px; }
  .faq__item p { padding: 0 18px 20px; font-size: 16px; }
}

/* ---------- Rodapé ---------- */
.rodape {
  position: relative;
  padding: 72px 0 36px;
  background: var(--navy-escuro);
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}
.rodape::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--arco-iris); }
.rodape a, .rodape__cookies { transition: color var(--transicao); }
.rodape a:hover, .rodape__cookies:hover { color: var(--amarelo); }
.rodape__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.rodape__marca img { width: 240px; height: auto; }
.rodape__tagline { margin-top: 18px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amarelo); }
.rodape__direita { display: flex; align-items: center; gap: 28px; }
.rodape__selo { width: 72px; height: auto; opacity: 0.9; }
.redes { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: var(--branco);
  transition: border-color var(--transicao), color var(--transicao), background-color var(--transicao);
}
.redes a:hover { border-color: var(--amarelo); color: var(--amarelo); }

.rodape__unidades {
  list-style: none;
  margin: 48px 0 0;
  padding: 40px;
  border-radius: var(--raio);
  background: rgba(255, 255, 255, 0.05);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 24px;
}
.rodape__unidades li { display: flex; flex-direction: column; gap: 8px; }
.rodape__unidades h3 { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--branco); margin-bottom: 4px; }
.rodape__unidades p { line-height: 1.5; }
.rodape__unidades a { color: rgba(255, 255, 255, 0.9); font-weight: 700; }

.rodape__legal {
  margin-top: 36px;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  font-size: 14px;
}
.rodape__legal nav { display: flex; gap: 24px; flex-wrap: wrap; }
.rodape__cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

/* Lightbox */
.video {
  width: min(92vw, 1120px);
  padding: 0;
  border: 0;
  border-radius: var(--raio-sm);
  background: #000;
  overflow: visible;
}
.video::backdrop { background: rgba(10, 12, 40, 0.85); backdrop-filter: blur(4px); }
.video__quadro { aspect-ratio: 16 / 9; border-radius: inherit; overflow: hidden; }
.video__quadro iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__fechar {
  position: absolute;
  top: -48px;
  right: -8px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--branco);
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .video__fechar { top: -52px; right: 0; }
  .rodape { padding-top: 56px; }
  .rodape__topo { flex-direction: column; gap: 28px; }
  .rodape__marca img { width: 200px; }
  .rodape__unidades { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; padding: 28px 24px; }
  .rodape__legal { flex-direction: column; }
}
@media (max-width: 480px) {
  .rodape__unidades { grid-template-columns: 1fr; }
  .rodape__direita { flex-wrap: wrap; gap: 20px; }
}

/* =========================================================
   Página 404 e Política de Privacidade (não existem na LP; seguem os tokens)
   ========================================================= */

.not-found { background: var(--navy); color: var(--branco); }
.not-found__inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
}
.not-found .eyebrow { color: var(--amarelo); }
.not-found__title { font-family: var(--fonte-titulo); font-size: clamp(32px, 5vw, 48px); line-height: 1.15; }
.not-found__text { color: rgba(255, 255, 255, 0.8); font-size: 18px; }
.not-found__btn { border-color: rgba(255, 255, 255, 0.6); color: var(--branco); }

.policy { background: var(--fundo); }
.policy__header { background: var(--branco); box-shadow: var(--sombra); }
.policy__bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.policy__back { font-weight: 700; color: var(--navy); }
.policy__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: calc(860px + 48px);
  padding-block: var(--secao-y);
  line-height: 1.6;
  color: var(--texto);
}
.policy__title { font-family: var(--fonte-titulo); font-size: clamp(30px, 4vw, 44px); line-height: 1.15; color: var(--navy); }
.policy__content h2 { margin-top: 24px; font-family: var(--fonte-titulo); font-size: 22px; color: var(--navy); }
.policy__content ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }
.policy__content a,
.policy__link { color: var(--azul); text-decoration: underline; }
.policy__link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.policy__updated { font-size: 14px; color: var(--texto-suave); }
.policy__table { overflow-x: auto; }
.policy__table table { width: 100%; border-collapse: collapse; background: var(--branco); font-size: 14px; }
.policy__table th,
.policy__table td { padding: 10px 12px; border: 1px solid var(--linha); text-align: left; }
.rodape--simples { padding-block: 8px 32px; }
@media (hover: hover) {
  .policy__back:hover { color: var(--laranja); }
}


/* ==========================================================================
   Aviso de cookies (LGPD) — não existe no Figma; segue os tokens do site
   ========================================================================== */

.consent {
  position: fixed;
  z-index: 60;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent[hidden] { display: none; }
.consent__box {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 860px;
  padding: 24px;
  border-radius: 20px;
  background: var(--branco);
  box-shadow: 0 20px 50px -20px rgba(31, 33, 96, 0.45), 0 0 0 1px var(--linha);
  color: var(--texto);
}
.consent__title { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; color: var(--navy); }
.consent__text { font-size: 14px; line-height: 1.5; text-box: none; }
.consent__text a { color: var(--navy); text-decoration: underline; }
.consent__prefs { display: flex; flex-direction: column; gap: 10px; }
.consent__prefs[hidden] { display: none; }
.consent__opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.consent__opt input { margin-top: 2px; accent-color: var(--navy); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.consent__btn {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--branco);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.consent__btn[hidden] { display: none; }
.consent__btn--primary { border-color: transparent; background: var(--navy); color: var(--branco); }
.consent__btn--link {
  border-color: transparent;
  padding-inline: 4px;
  font-weight: 600;
  text-decoration: underline;
  text-transform: none;
}

@media (hover: hover) {
  .consent__btn:hover { background: var(--navy); color: var(--branco); }
  .consent__btn--primary:hover { background: var(--navy-escuro); color: var(--branco); }
  .consent__btn--link:hover { background: none; color: var(--navy); text-decoration-thickness: 2px; }
}

/* ---------- Entrada em cascata (reexecuta ao voltar para a seção) ----------
   O bloco [data-reveal] não anima: animam os filhos diretos, em sequência (--i vem do JS).
   Títulos entram com um "wipe" de baixo para cima; fotos assentam com um leve zoom. */
[data-reveal] { --curva: cubic-bezier(0.16, 1, 0.3, 1); }
[data-reveal] > * {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 900ms var(--curva) calc(var(--i, 0) * 110ms), transform 900ms var(--curva) calc(var(--i, 0) * 110ms), translate 500ms var(--curva), box-shadow 500ms var(--curva);
}
[data-reveal].is-visible > * { opacity: 1; transform: none; }
[data-reveal] .titulo-kv {
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.35em);
  transition: clip-path 1000ms var(--curva) calc(var(--i, 0) * 110ms + 60ms), transform 1000ms var(--curva) calc(var(--i, 0) * 110ms + 60ms);
}
[data-reveal].is-visible .titulo-kv { clip-path: inset(-0.2em 0 -0.2em 0); transform: none; }
[data-reveal] > figure img, [data-reveal] > .card .card__foto img, [data-reveal] > .unidade .unidade__foto img {
  transform: scale(1.12);
  transition: transform 1400ms var(--curva) calc(var(--i, 0) * 110ms), scale 900ms var(--curva);
}
[data-reveal].is-visible > figure img, [data-reveal].is-visible > .card .card__foto img, [data-reveal].is-visible > .unidade .unidade__foto img { transform: none; }
/* O hero já vem com .is-visible no HTML: a entrada roda por animação CSS, sem esperar o JS (LCP).
   "backwards" só segura o estado inicial durante o atraso; depois valem as regras acima (e a repetição ao voltar). */
.hero [data-reveal].is-visible > * { animation: hero-entra 900ms var(--curva) calc(var(--i, 0) * 110ms) backwards; }
.hero [data-reveal].is-visible .titulo-kv { animation: hero-wipe 1000ms var(--curva) calc(var(--i, 0) * 110ms + 60ms) backwards; }
@keyframes hero-entra { from { opacity: 0; transform: translateY(36px); } }
@keyframes hero-wipe { from { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] > *, [data-reveal] .titulo-kv, .hero [data-reveal].is-visible > *, .hero [data-reveal].is-visible .titulo-kv { animation: none; }
  [data-reveal] > *, [data-reveal] .titulo-kv, [data-reveal] > figure img, [data-reveal] > .card .card__foto img, [data-reveal] > .unidade .unidade__foto img { opacity: 1; transform: none; clip-path: none; transition: none; }
  .btn, .header__nav a { transition: none; }
  .btn__pts { display: none; }
  .btn__bg i, .btn__label > span, .btn__seta { transition: none; }
  .linha::after, .marco::before { transition: none; }
  .galeria__trilho, .hero__faixa-trilho { animation: none; }
  .visita__foto::before { animation: none; }
}


/* ---------- Hover sutil (só em dispositivos com mouse) ----------
   Usa `translate`/`scale` (propriedades separadas) para não conflitar com o `transform` da entrada. */
@media (hover: hover) {
  .marco__foto, .unidade__foto, .card, .reel, .faq__item, .galeria__faixa img, .rodape__unidades li { transition: translate 500ms var(--curva, ease), box-shadow 500ms var(--curva, ease), background-color var(--transicao), filter 500ms ease; }
  .marco__foto img, .unidade__foto img, .card__foto img:first-child { transition: scale 900ms cubic-bezier(0.16, 1, 0.3, 1); }

  /* fotos: zoom leve + leve elevação */
  .marco__foto:hover, .unidade__foto:hover { translate: 0 -4px; box-shadow: 0 24px 50px rgba(46, 49, 128, 0.18); }
  .marco__foto:hover img, .unidade__foto:hover img, .card:hover .card__foto img:first-child { scale: 1.05; }

  /* cards da proposta e tiles de vídeo: sobem um pouco, sombra mais funda */
  .card:hover { translate: 0 -5px; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.32); }
  .reel:hover { translate: 0 -4px; box-shadow: 0 24px 50px rgba(46, 49, 128, 0.22); }
  .reel:hover .reel__play { transform: scale(1.06); }

  /* FAQ fechado: fundo um tom mais escuro */
  .faq__item:not([open]):hover { background: #E8E9F0; }

  /* galeria contínua: a foto sob o mouse ganha um pouco de vida (já pausa a faixa) */
  .galeria__faixa img:hover { filter: saturate(1.12) brightness(1.04); }

  /* rodapé: o bloco da unidade sobe de leve */
  .rodape__unidades li:hover { translate: 0 -3px; }
}