/* ==========================================================================
   Colégio Santa Teresinha — LP Matrículas 2027
   Tokens (Figma 8BvejoIO0gV9sCe5IFO8of, desktop 6:152 / mobile 16:1469)
   Base comum. Cada seção tem seu arquivo em parts/css/NN-secao.css.
   ========================================================================== */

@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/raleway-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Layout */
  --container: 1280px;
  --gutter: 20px;

  /* Cores (Figma) */
  --navy: #1d244c;           /* títulos, botão contorno, fundos escuros */
  --navy-dark: #141a39;      /* fundo do rodapé / CTA */
  --navy-deep: #0e132a;      /* barra inferior do rodapé */
  --yellow: #f6bd00;         /* destaque */
  --yellow-light: #ffd983;
  --yellow-border: #e39a38;
  --red: #e2322b;            /* rabiscos */
  --white: #ffffff;
  --paper: #f5f3f0;          /* fundos claros (Segmentos/Diferenciais) */
  --stone: #e9e6e1;          /* fundo da Localização */
  --text: #4a4f6a;           /* texto corrido em fundo claro */
  --text-light: rgba(255, 255, 255, 0.85);

  --grad-yellow: linear-gradient(90deg, #f6bd00 0%, #ffd983 79.13%, #f6bd00 100%);

  /* Tipografia (Raleway em todo o site) */
  --font: "Raleway", system-ui, sans-serif;
  --fs-h1: 56px;
  --ls-h1: -1.12px;
  --fs-h2: 40px;
  --ls-h2: -0.8px;
  --lh-h2: 1.08;
  --fs-lead: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 13px;
  --ls-eyebrow: 2.08px;
  --fs-btn: 18px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --section-y: 80px;

  /* Animação de entrada (o site no ar usa fadeInUp / zoomIn) */
  --reveal-y: 24px;
  --reveal-dur: 0.7s;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 30px;             /* Figma mobile: Hero em 30px (o CTA final usa 28px no próprio CSS) */
    --ls-h1: -0.6px;
    --fs-h2: 30px;
    --ls-h2: -0.6px;
    --fs-lead: 16px;
    --section-y: 60px;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Corte vertical dos textos igual ao Figma (leading trim) */
h1, h2, h3, p, .trim { text-box: trim-both cap alphabetic; }
/* Evita palavra sozinha na última linha */
h1, h2, h3, p, li, figcaption { text-wrap: pretty; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Componentes comuns
   ========================================================================== */

/* Etiqueta acima dos títulos: .eyebrow (texto navy, fundo claro) / .eyebrow--yellow (amarela, fundo escuro).
   .eyebrow--dot acrescenta a bolinha amarela de 8px à esquerda (Hero, Conquistas, CTA final). */
.eyebrow {
  display: block;                     /* bloco: o corte vertical vale (com inline-flex sobravam 6px) */
  width: fit-content;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--navy);
  text-box: trim-both cap alphabetic;
}
.eyebrow--yellow { color: var(--yellow); }
.eyebrow--dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--yellow);
  vertical-align: 0.5px;              /* Figma: bolinha de 0,5 a 8,5px dentro da caixa de 9px */
}

/* Título de seção: "Parte regular <strong>parte em destaque</strong>" (Medium + Black, como no Figma) */
.title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--navy);
}
.title strong { font-weight: var(--fw-black); }
.title--light { color: var(--white); }

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--text);
}

/* Botão principal (amarelo com o ícone do WhatsApp num círculo navy).
   <a class="btn" href="https://api.whatsapp.com/send/..."><span class="btn__icon">SVG</span><span class="btn__label">Agendar uma visita</span></a> */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border: 2px solid var(--yellow-border);
  border-radius: 36px;
  background: var(--grad-yellow);
  background-size: 160% 100%;
  background-position: 0 0;
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--navy);
  transition: background-position 0.45s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  transition: transform 0.3s var(--ease);
}
.btn__icon svg { width: 20px; height: 20px; }   /* viewBox 0 0 20 20: o desenho ocupa 16,6px, como no Figma */
.btn__label { text-box: trim-both cap alphabetic; }

/* Botão contorno (ex.: "Conheça o nosso jeito"): <a class="btn-outline">Texto <svg seta/></a> */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--navy);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn-outline svg { width: 11.667px; height: 10px; transition: transform 0.3s var(--ease); }
.btn-outline--light { border-color: rgba(255, 255, 255, 0.4); color: var(--white); }

@media (hover: hover) {
  .btn:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(227, 154, 56, 0.9); }
  .btn:hover .btn__icon { transform: rotate(-10deg) scale(1.06); }
  .btn-outline:hover { background: var(--navy); color: var(--white); }
  .btn-outline:hover svg { transform: translateX(3px); }
  .btn-outline--light:hover { background: var(--white); color: var(--navy); }
}

/* Assinatura "Esse é o nosso jeito." (símbolo + texto com traço amarelo) */
.assinatura {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--white);
}
.assinatura img { width: 40px; height: 40px; }
.assinatura__texto {
  padding-left: 16px;
  border-left: 2px solid var(--yellow);
  font-size: 17px;
  font-weight: var(--fw-medium);
  line-height: 1.12;
}
.assinatura__texto strong { display: block; font-weight: var(--fw-extrabold); }
@media (max-width: 767px) {             /* Figma mobile: símbolo 34px e texto 14px */
  .assinatura img { width: 34px; height: 34px; }
  .assinatura__texto { font-size: 14px; }
}

/* Animação de entrada ao rolar: data-reveal="up" (padrão), "fade" ou "zoom".
   Atraso opcional: style="--reveal-delay: 120ms". Sem JavaScript, tudo aparece normalmente. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="zoom"] { transform: scale(0.85); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Menu (Figma 6:710 desktop / 16:1884 mobile) — faixa fixa translúcida sobre o hero
   ========================================================================== */

:root {
  --header-h: 82px;
  --header-bg: rgba(20, 26, 57, 0.7);
  --header-bg-scrolled: rgba(20, 26, 57, 0.92);
  --header-toggle: 35.906px;
}

.header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.header.is-scrolled { background: var(--header-bg-scrolled); box-shadow: 0 14px 30px -20px rgba(8, 11, 28, 0.8); }

.header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.header__logo img { width: 139px; height: 50px; }

.header__nav { display: flex; align-items: center; gap: 24px; }
.header__link {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--white);
  transition: color 0.25s var(--ease);
}
.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;                  /* Figma: 32px entre os links e o botão (24 do gap + 8) */
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 20px;
  white-space: nowrap;
  color: var(--white);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.header__cta svg { width: 20px; height: 20px; transition: transform 0.25s var(--ease); }

@media (hover: hover) {
  .header__link:hover { color: var(--yellow); }
  .header__cta:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
  .header__cta:hover svg { transform: rotate(-10deg) scale(1.08); }
}

.header__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: var(--header-toggle);
  height: var(--header-toggle);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--yellow);
  cursor: pointer;
}
.header__toggle span {
  width: 19.948px;
  height: 2.992px;
  border-radius: 1px;
  background: var(--navy);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.99px) rotate(45deg); }
.header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.99px) rotate(-45deg); }

/* Menu recolhido (site no ar: painel marinho abaixo da faixa) */
@media (max-width: 1023px) {
  .header__toggle { display: flex; }
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--navy-dark);
    box-shadow: 0 24px 40px -24px rgba(8, 11, 28, 0.9);
  }
  .header__nav.is-open { display: flex; }
  .header__link { padding: 14px 0; font-size: 16px; }
  .header__cta { justify-content: center; margin: 12px 0 0; }
}

/* ==========================================================================
   Hero (Figma 13:743 conteúdo + 58:167 "Degradê do KV" / mobile 16:1868 + 16:1867).
   A foto do site no ar já traz o degradê do KV aplicado (st-hero-fundo-dupla).
   ========================================================================== */

:root {
  --hero-h: 844px;
  --hero-pad-top: 252px;
  --hero-bg: #151a35;
}
@media (max-width: 767px) {
  :root {
    --hero-h: 826px;
    --hero-pad-top: 424px;
  }
}

.hero {
  position: relative;
  height: var(--hero-h);
  overflow-x: clip;                  /* o giz vermelho passa da borda direita */
  background: var(--hero-bg);
  color: var(--white);
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img { object-fit: cover; object-position: 50% 0; }

.hero__inner {
  position: relative;
  padding-top: var(--hero-pad-top);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__title {
  margin-top: 37px;
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-h1);
  color: var(--white);
}
.hero__title strong { display: block; font-weight: var(--fw-extrabold); }
.hero__sub {
  margin-top: 40px;
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--text-light);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 40px;
}

/* Rabiscos (posições do site no ar) */
.hero__doodle {
  position: absolute;
  z-index: 3;                        /* acima do topo arredondado da seção Segmentos (o giz passa por cima dela) */
  height: auto;
  pointer-events: none;
}
.hero__doodle--globo { top: max(339px, 17.66vw); left: max(calc(50% + 531px), 77.66%); width: 133px; }   /* preso à foto: acima de 1920 ela cresce com a largura */
.hero__doodle--giz { top: 635px; right: 0; width: 110px; }
.hero__doodle--estrela { top: 590px; left: 23px; width: 115px; }
.hero__doodle { animation: hero-float 7s ease-in-out 1.2s infinite; }   /* translate/rotate: não briga com o transform da entrada */
.hero__doodle--giz { animation-duration: 8s; }

@keyframes hero-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -8px; rotate: 3deg; }
}

/* Notebooks (1024–1279): texto um pouco menor e a foto ancorada para os alunos começarem depois do texto */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --fs-h1: 48px; --ls-h1: -0.96px; }
  .hero__media img { object-position: max(-416px, calc(100vw - 1598px)) 0; }   /* na foto de 1920px os alunos ocupam x 1056–1574 */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(21, 26, 53, 0.92) 0%, rgba(21, 26, 53, 0.75) 40%, rgba(21, 26, 53, 0) 66%);
  }
  .hero__doodle--globo { top: 100px; left: auto; right: 2%; width: 110px; }
}

/* Tablets e celulares: foto em cima, conteúdo centralizado embaixo (layout mobile do Figma) */
@media (max-width: 1023px) {
  .hero__content { align-items: center; text-align: center; }
  .hero__actions { flex-direction: column; gap: 17px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --hero-h: 944px; --hero-pad-top: 500px; --fs-h1: 40px; --ls-h1: -0.8px; }
  .hero__media {                     /* foto vertical com as laterais esfumadas no fundo marinho */
    left: 50%;
    width: 480px;
    translate: -50% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  }
  .hero__doodle--globo { top: 150px; left: calc(50% + 150px); width: 80px; }
  .hero__doodle--giz { top: 840px; width: 80px; }
  .hero__doodle--estrela { top: 760px; left: calc(50% - 330px); width: 110px; }
}
@media (max-width: 767px) {
  .hero__title { font-size: min(var(--fs-h1), calc((100vw - 2 * var(--gutter)) / 12.6)); }   /* telas < 420: cada frase segue numa linha só */
  .hero__sub { margin-top: 36px; font-size: 18px; }
  .hero__actions { margin-top: 36px; }
  .hero__doodle--globo { top: 142px; left: auto; right: 30px; width: 65px; }
  .hero__doodle--giz { top: 761px; right: 1px; width: 69px; }
  .hero__doodle--estrela { top: 694px; left: -35px; width: 101px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__doodle { animation: none !important; }
}

/* ==========================================================================
   Segmentos (Figma 6:741 fundo + 13:755 cabeçalho + cards 13:1219/13:1212/13:1205/13:1185;
   mobile 16:1903 + 16:1948). Computador: 4 cards em degraus (0/47/0/56 px), como no Figma e no ar.
   Abaixo de 1200px: carrossel com arraste e troca automática; no celular o botão vai para baixo dos cards.
   O "giz amarelo" do canto inferior direito do Figma (16:1452) não está no site no ar (aprovado): ficou de fora.
   ========================================================================== */

:root {
  --segmentos-overlap: 61px;          /* sobe sobre o fim do hero (no ar: margin-top -61px); o hero pode usar esta variável */
  --segmentos-r: 44px;
  --segmentos-pad: 80px 0 86px;
  --segmentos-bg: linear-gradient(180deg, var(--white) 11.058%, #f4f2ef 100%);
  --segmentos-gap: 56px;              /* cabeçalho → cards */
  --segmentos-head-w: 630px;
  --segmentos-head-gap: 37px;         /* etiqueta → título */
  --segmentos-title-fs: 40px;
  --segmentos-card-w: 305px;
  --segmentos-cards-gap: 20px;
  --segmentos-foto-h: 398px;
  --segmentos-foto-bg: #a8a7a5;
  --segmentos-card-r: 6px;
  --segmentos-painel-pad: 32px;
  --segmentos-painel-gap: 24px;
  --segmentos-frase-fs: 20px;
  --segmentos-sombra: 0 26px 40px -26px rgba(29, 36, 76, 0.55);
}

@media (max-width: 767px) {
  :root {
    --segmentos-overlap: 10px;        /* no ar: margin-top -10px, sem cantos arredondados */
    --segmentos-r: 0px;
    --segmentos-pad: 60px 0;
    --segmentos-gap: 40px;
    --segmentos-head-w: 275px;
    --segmentos-head-gap: 20px;
    --segmentos-title-fs: 36px;       /* Figma e no ar: 36px (não os 30px dos outros títulos) */
    --segmentos-painel-pad: 26px;
    --segmentos-painel-gap: 20px;
    --segmentos-frase-fs: 16px;
  }
}

.segmentos {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--segmentos-overlap));
  padding: var(--segmentos-pad);
  border-radius: var(--segmentos-r);
  background: var(--segmentos-bg);
}

.segmentos__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head link" "lista lista";
  align-items: end;
  gap: var(--segmentos-gap) 24px;
}

.segmentos__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--segmentos-head-gap);
  max-width: var(--segmentos-head-w);
}
.segmentos__head .eyebrow { display: block; }   /* inline-flex da base não aplica o corte do texto (sobravam 6px) */
.segmentos .title {
  font-size: var(--segmentos-title-fs);
  letter-spacing: -0.02em;
}

.segmentos__link { grid-area: link; }

/* Cards */
.segmentos__lista {
  grid-area: lista;
  display: flex;
  align-items: flex-start;
  gap: var(--segmentos-cards-gap);
}

.seg-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--segmentos-card-w);
  display: flex;
  flex-direction: column;
  border-radius: var(--segmentos-card-r);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.seg-card--iniciais { margin-top: 47px; }
.seg-card--medio { margin-top: 56px; }

.seg-card__foto {
  position: relative;
  height: var(--segmentos-foto-h);
  overflow: hidden;
  border-radius: var(--segmentos-card-r) var(--segmentos-card-r) 0 0;
  background: var(--segmentos-foto-bg);
}
.seg-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.seg-card__moldura {               /* moldura de giz já recortada no tamanho da foto */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Rabiscos: posição do Figma/no ar; os da direita presos à borda direita */
.seg-card__doodle {
  position: absolute;
  max-width: none;
  height: auto;
  transition: transform 0.5s var(--ease);
}
.seg-card__doodle--arco-iris { left: -4px; top: 306px; width: 131px; }
.seg-card__doodle--laco { right: -11px; top: 120px; width: 107px; }
.seg-card__doodle--triangulos { left: -7px; top: 304px; width: 89px; }
.seg-card__doodle--estrela-branca { right: 0; top: -11px; width: 95px; }
.seg-card__doodle--sorriso { left: 0; top: 295px; width: 39px; }
.seg-card__doodle--estrela-amarela { left: -19px; top: 296px; width: 119px; }
.seg-card__doodle--globo { right: -25px; top: -11px; width: 107px; }

.seg-card__giz {                   /* fora da foto, sobre o canto do 1º card (só computador, como no ar) */
  position: absolute;
  right: 0;
  top: -9px;
  width: 83px;
  height: auto;
  pointer-events: none;
}

.seg-card__painel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--segmentos-painel-gap);
  padding: var(--segmentos-painel-pad);
  border-radius: 0 0 var(--segmentos-card-r) var(--segmentos-card-r);
  background: var(--navy);
  color: var(--white);
}
.seg-card__titulo {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-extrabold);
  letter-spacing: 1.82px;
  text-transform: uppercase;
  color: var(--yellow);
}
.seg-card__frase {
  font-size: var(--segmentos-frase-fs);
  font-weight: var(--fw-medium);
  line-height: 1.35;
}
.seg-card__frase strong { font-weight: var(--fw-black); }

/* Entrada em sequência (no ar: fadeInUp a cada 90 ms) — só no computador, onde os 4 aparecem juntos */
@media (min-width: 1200px) {
  .seg-card:nth-child(2) { --reveal-delay: 90ms; }
  .seg-card:nth-child(3) { --reveal-delay: 180ms; }
  .seg-card:nth-child(4) { --reveal-delay: 270ms; }
}

@media (hover: hover) {
  .seg-card:hover { transform: translateY(-6px); box-shadow: var(--segmentos-sombra); }
  .seg-card:hover .seg-card__img { transform: scale(1.05); }
  .seg-card:hover .seg-card__doodle { transform: rotate(-6deg) scale(1.06); }
}

/* Tablet e celular: carrossel (cards de 305px, o próximo aparece cortado) */
@media (max-width: 1199px) {
  .segmentos__lista {
    align-items: stretch;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .segmentos__lista::-webkit-scrollbar { display: none; }
  .seg-card { flex: 0 0 var(--segmentos-card-w); scroll-snap-align: start; }
  .seg-card--iniciais,
  .seg-card--medio { margin-top: 0; }
  .seg-card__giz { display: none; }
}

@media (max-width: 767px) {
  .segmentos__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "lista" "link";
    justify-items: start;
  }
  .segmentos__lista { justify-self: stretch; }
}

/* ==========================================================================
   Diferenciais (Figma 13:788 fundo, 13:987 galeria, 13:980 conteúdo;
   mobile 16:2085 + 16:2032). Fotos, selo girando, espiral e giz seguem o site no ar.
   ========================================================================== */

:root {
  --diferenciais-bg: linear-gradient(180deg, #f4f2ef 0%, #fff 100%);
  --diferenciais-pad: 80px 0 150px;           /* a seção vai até 2382; Conquistas sobe 70px por cima */
  --diferenciais-gap: 84px;
  --diferenciais-galeria-w: 566px;
  --diferenciais-galeria-gap: 20px;
  --diferenciais-foto-h: 217px;               /* 2 × 217 + 20 = 454 */
  --diferenciais-selo: 163px;
  --diferenciais-conteudo-w: 630px;
  --diferenciais-h2-fs: 40px;
  --diferenciais-h2-ls: -0.8px;
  --diferenciais-desc: #565d78;
  --diferenciais-icone-bg: rgba(246, 189, 0, 0.16);
}

@media (max-width: 1279px) {
  :root { --diferenciais-gap: 48px; }
}

@media (max-width: 767px) {
  :root {
    --diferenciais-pad: 58px 0 60px;
    --diferenciais-gap: 36px;
    --diferenciais-galeria-gap: 13px;
    --diferenciais-foto-h: 146px;
    --diferenciais-selo: 110px;
    --diferenciais-h2-fs: 32px;
    --diferenciais-h2-ls: -0.64px;
  }
}

.diferenciais {
  position: relative;
  padding: var(--diferenciais-pad);
  background: var(--diferenciais-bg);
  overflow-x: clip;
}

.diferenciais__giz {                  /* giz vermelho na borda esquerda (só desktop, como no ar) */
  position: absolute;
  top: 490px;
  left: 0;
  z-index: 0;                         /* fica atrás do cartão de Conquistas quando a tela é estreita */
  width: 123px;
  height: 221px;
  pointer-events: none;
}

.diferenciais__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--diferenciais-gap);
}

/* Galeria: foto alta à esquerda + duas à direita, selo no centro */
.diferenciais__galeria {
  position: relative;
  flex: 0 1 var(--diferenciais-galeria-w);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: var(--diferenciais-foto-h) var(--diferenciais-foto-h);
  gap: var(--diferenciais-galeria-gap);
}
.diferenciais__foto {
  overflow: hidden;
  border-radius: 6px;
}
.diferenciais__foto--alta { grid-row: span 2; }
.diferenciais__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.diferenciais__selo {
  position: absolute;
  top: calc(50% + 0.5px);
  left: calc(50% + 0.5px);
  z-index: 1;
  width: var(--diferenciais-selo);
  height: var(--diferenciais-selo);
  translate: -50% -50%;
}
.diferenciais__selo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.diferenciais__selo-anel { animation: diferenciais-gira 26s linear infinite; }

@keyframes diferenciais-gira {
  to { rotate: 360deg; }
}

.diferenciais__espiral {
  position: absolute;
  top: -24px;
  left: -45px;
  z-index: 2;
  width: 90px;
  height: 170px;
  pointer-events: none;
}

/* Conteúdo */
.diferenciais__conteudo {
  flex: 0 1 var(--diferenciais-conteudo-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 13px;
}
.diferenciais__titulo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.diferenciais__h2 {
  font-size: var(--diferenciais-h2-fs);
  line-height: 1.2;
  letter-spacing: var(--diferenciais-h2-ls);
}

.diferenciais__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.diferenciais__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}
.diferenciais__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--diferenciais-icone-bg);
  color: var(--navy);
  transition: background 0.3s var(--ease);
}
.diferenciais__icone svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}
.diferenciais__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  line-height: 1.2;
}
.diferenciais__texto h3 {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--navy);
}
.diferenciais__texto p {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--diferenciais-desc);
  text-wrap: wrap;                    /* quebra igual ao Figma ("Criatividade para aprender / fazendo.") */
}

@media (hover: hover) {
  .diferenciais__foto:hover img { transform: scale(1.05); }
  .diferenciais__item:hover .diferenciais__icone { background: var(--yellow); }
  .diferenciais__item:hover .diferenciais__icone svg { transform: rotate(-10deg); }
}

/* Tablet: galeria em cima, lista embaixo (como no ar até 1024px) */
@media (max-width: 1023px) {
  .diferenciais__giz { display: none; }
  .diferenciais__inner { flex-direction: column; }
  .diferenciais__galeria { flex: none; width: min(100%, var(--diferenciais-galeria-w)); }
  .diferenciais__espiral { left: -20px; }
  .diferenciais__conteudo { flex: none; width: 100%; margin-top: 0; }
}

@media (max-width: 767px) {
  .diferenciais__galeria { width: 100%; }
  .diferenciais__espiral { top: -17px; width: 56px; height: 106px; }
  .diferenciais__grade { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ==========================================================================
   Conquistas (Figma 13:982 cartão, 13:1012 texto, 13:1034/13:1035 foto, 13:1045 controles;
   mobile 16:2033 + 16:2067). Carrossel de 2 cartões como no ar: navy (Canguru) e amarelo (GPTS).
   ========================================================================== */

:root {
  --conquistas-overlap: 70px;                 /* o cartão sobe por cima do fim dos Diferenciais */
  --conquistas-radius: 47px;
  --conquistas-h: 569px;
  --conquistas-pad: 80px 0 0 106px;
  --conquistas-gap: 61px;
  --conquistas-texto-w: 522px;
  --conquistas-midia: 500px;
  --conquistas-midia-m: -38px 0 0 -12.5px;
  --conquistas-h2-fs: 48px;
  --conquistas-h2-ls: -0.96px;
  --conquistas-h2-w: 483px;
  --conquistas-sub-fs: var(--fs-lead);
  --conquistas-ctrl-x: 114px;                 /* 434 − 320 */
  --conquistas-ctrl-bottom: 29px;
  --conquistas-seta: 48px;
  --conquistas-setas-gap: 8px;
  --conquistas-tempo: 7s;                     /* troca automática (igual ao site no ar) */
}

/* Notebook (1024–1279): menos recuo, foto e título menores para caber lado a lado */
@media (max-width: 1279px) {
  :root {
    --conquistas-pad: 80px 40px 0 60px;
    --conquistas-gap: 40px;
    --conquistas-midia: min(500px, 44vw);
    --conquistas-h2-fs: 40px;
    --conquistas-ctrl-x: 60px;
  }
}

@media (max-width: 1023px) {
  :root {
    --conquistas-midia: 500px;
    --conquistas-h2-fs: 48px;
    --conquistas-pad: 60px 40px 120px;
    --conquistas-gap: 36px;
    --conquistas-midia-m: -25px 0 -25px -9px;
    --conquistas-ctrl-x: 40px;
    --conquistas-ctrl-bottom: 45px;
  }
}

@media (max-width: 767px) {
  :root {
    --conquistas-overlap: 0px;
    --conquistas-radius: 0px;
    --conquistas-h: 749px;
    --conquistas-pad: 60px 20px 0;
    --conquistas-midia: min(399px, calc(100% + 19px));
    --conquistas-midia-m: -9px 0;
    --conquistas-h2-fs: 28px;
    --conquistas-h2-ls: -0.56px;
    --conquistas-h2-w: none;
    --conquistas-sub-fs: 16px;
    --conquistas-ctrl-x: 20px;
    --conquistas-ctrl-bottom: 61.6px;
    --conquistas-seta: 31.4px;
    --conquistas-setas-gap: 5.23px;
  }
}

.conquistas {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--conquistas-overlap));
}

.conquistas__carrossel {
  position: relative;
  overflow: hidden;
  border-radius: var(--conquistas-radius);
  color: var(--white);
  transition: color 0.3s var(--ease);
}

.conquistas__trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.conquistas__trilho::-webkit-scrollbar { display: none; }

.conquistas__slide {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--conquistas-gap);
  min-height: var(--conquistas-h);
  padding: var(--conquistas-pad);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--navy);
  isolation: isolate;
}
.conquistas__slide::before {          /* marca d'água do símbolo (Figma 13:1033) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/img/conquistas-marca-branca.webp") -368px 0 / 645px auto no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
.conquistas__slide--claro { background: var(--yellow); }
.conquistas__slide--claro::before {
  background-image: url("assets/img/conquistas-marca-preta.webp");
  opacity: 0.06;
}

/* Texto */
.conquistas__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 var(--conquistas-texto-w);
  min-width: 0;
}
.conquistas__h2 {
  max-width: var(--conquistas-h2-w);
  margin: 37px 0 40px;
  font-size: var(--conquistas-h2-fs);
  line-height: 1.2;
  letter-spacing: var(--conquistas-h2-ls);
}
.conquistas__sub {
  font-size: var(--conquistas-sub-fs);
  font-weight: var(--fw-bold);
  color: var(--text-light);
}

.conquistas__slide--claro .conquistas__texto { gap: 24px; }
.conquistas__slide--claro .conquistas__h2 { margin: 0; color: var(--navy); }
.conquistas__slide--claro .conquistas__sub { color: var(--navy); }
.conquistas__selo { width: 120px; height: auto; }
.conquistas__tag {                    /* pílula "Zona de Excelência" (site no ar) */
  padding: 6px 14px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  font-size: 13px;
  font-weight: var(--fw-extrabold);
  line-height: 13px;
  letter-spacing: 1.82px;
  text-transform: uppercase;
  color: var(--navy);
  text-box: none;
}

/* Foto redonda dentro do círculo rabiscado (posições em % valem para 500px e 399px) */
.conquistas__midia {
  position: relative;
  flex: none;
  width: var(--conquistas-midia);
  aspect-ratio: 1;
  margin: var(--conquistas-midia-m);
}
.conquistas__midia::before {        /* círculo rabiscado: arte 238×260 esticada no quadrado, como no ar (fundo, não <img>) */
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/conquistas-circulo.webp") 0 0 / 100% 100% no-repeat;
}
.conquistas__slide--claro .conquistas__midia::before { background-image: url("assets/img/conquistas-circulo-azul.webp"); }
.conquistas__midia img { position: absolute; }
.conquistas__foto {
  top: 9%;
  left: 9%;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.conquistas__asterisco { top: 7.4%; left: 5.8%; width: 16.4%; height: auto; }
.conquistas__nuvem { top: 5.8%; right: -0.8%; width: 27.8%; height: auto; }

/* Controles: contador, indicadores com progresso e setas */
.conquistas__controles {
  position: absolute;
  right: var(--conquistas-ctrl-x);
  bottom: var(--conquistas-ctrl-bottom);
  left: var(--conquistas-ctrl-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.conquistas__controles > * { pointer-events: auto; }
.conquistas__paginacao {
  display: flex;
  align-items: center;
  gap: 32px;
}
.conquistas__contador {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 16px;
  letter-spacing: 1.68px;
  white-space: nowrap;
  text-box: none;
}
.conquistas__pontos { display: flex; gap: 8px; }
.conquistas__ponto {
  position: relative;
  width: 28px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 28%, transparent);
  cursor: pointer;
  transition: width 0.35s var(--ease);
}
.conquistas__ponto::before {          /* área de toque maior sem mudar o desenho */
  content: "";
  position: absolute;
  inset: -12px -4px;
}
.conquistas__ponto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}
.conquistas__ponto[aria-current="true"] { width: 64px; }
.conquistas__ponto[aria-current="true"]::after { transform: scaleX(1); }
.conquistas.is-tocando .conquistas__ponto[aria-current="true"]::after {
  animation: conquistas-enche var(--conquistas-tempo) linear both;
}
/* Pausa fora da tela, com foco de teclado dentro e (no mouse) com o cursor em cima */
.conquistas:not(.is-na-tela) .conquistas__ponto::after,
.conquistas:has(:focus-visible) .conquistas__ponto::after { animation-play-state: paused !important; }

@keyframes conquistas-enche {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.conquistas__setas { display: flex; gap: var(--conquistas-setas-gap); }
.conquistas__seta {
  display: block;
  width: var(--conquistas-seta);
  height: var(--conquistas-seta);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.conquistas__seta svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cartão amarelo: controles em navy */
.conquistas.is-claro .conquistas__carrossel { color: var(--navy); }

@media (hover: hover) {
  .conquistas:hover .conquistas__ponto::after { animation-play-state: paused !important; }
  .conquistas__midia:hover .conquistas__foto { transform: scale(1.03); }
  .conquistas__ponto:not([aria-current="true"]):hover { background: color-mix(in srgb, currentColor 55%, transparent); }
  .conquistas__seta:hover { background: var(--white); color: var(--navy); }
  .conquistas.is-claro .conquistas__seta:hover { background: var(--navy); color: var(--yellow); }
}

/* Tablet: foto em cima, texto embaixo (como no ar até 1024px) */
@media (max-width: 1023px) {
  .conquistas__slide { flex-direction: column-reverse; justify-content: flex-end; }
  .conquistas__texto { flex: none; width: 100%; }
}

@media (max-width: 767px) {
  .conquistas .container { padding-inline: 0; }
  .conquistas__slide::before { background-position: -179px 499px; background-size: 501px auto; }
  .conquistas__slide--claro .conquistas__texto { gap: 20px; }
  .conquistas__h2 { margin: 37px 0 32px; }
  .conquistas__selo { display: none; }
}

/* ==========================================================================
   Depoimentos (Figma 13:1046 fundo, 13:1124 cabeçalho, 13:1057 card; mobile 16:2147)
   No ar a seção sobe 72px por baixo do card de Conquistas (margin-top: -72px);
   aqui ela começa onde o card termina, com esses 72px descontados do padding e do degradê.
   ========================================================================== */

:root {
  --depo-bg: linear-gradient(180deg, #fff 3.89%, #f6f4f0 57.19%);   /* = Figma 12.094% / 60.848% em 844px, sem os 72px de cima */
  --depo-pad: 80px 0 81px;
  --depo-muted: #565d78;
  --depo-card-w: 241px;
  --depo-card-h: 428px;
  --depo-stagger: 32px;
  --depo-shade: linear-gradient(180deg, rgba(20, 26, 57, 0) 45%, rgba(20, 26, 57, 0.88) 100%);
  --depo-shadow: 0 28px 48px -28px rgba(29, 36, 76, 0.6);
}

@media (max-width: 767px) {
  :root {
    --depo-bg: linear-gradient(180deg, #fff 12.094%, #f6f4f0 60.848%);
    --depo-pad: 60px 0;
  }
}

.depo {
  position: relative;
  z-index: 2;                         /* os triângulos passam por cima da Localização */
  padding: var(--depo-pad);
  background: var(--depo-bg);
  overflow-x: clip;
}

.depo__doodle {                       /* tamanhos do Figma (a imagem estica na caixa, como no ar) */
  position: absolute;
  z-index: 1;
  max-width: none;
  pointer-events: none;
}
.depo__doodle--nuvem { top: -29px; right: -37px; width: 195px; height: 137px; }
.depo__doodle--triangulos { top: 658px; left: -76px; width: 165px; height: 178px; }

.depo__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 50px 24px;
}

.depo__heading { display: flex; flex-direction: column; gap: 16px; }
.depo__eyebrow { color: var(--depo-muted); }
.depo__title { line-height: 1.2; }
.depo__title strong { font-weight: var(--fw-extrabold); }

/* Link "Mais no @colegiostmj_" (sublinhado amarelo) */
.depo__link {
  grid-row: 1;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--yellow);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  line-height: 20px;
  white-space: nowrap;
  color: var(--navy);
  transition: border-color 0.3s var(--ease);
}
.depo__link svg { flex: none; width: 20px; height: 20px; transition: transform 0.3s var(--ease); }

/* Cards de vídeo */
.depo__track {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.depo__card {
  position: relative;
  flex: 0 1 var(--depo-card-w);
  aspect-ratio: 241 / 428;
  overflow: hidden;
  border-radius: 10px;
  background: var(--navy);
  transition: box-shadow 0.4s var(--ease);
}
.depo__card:nth-child(even) { margin-top: var(--depo-stagger); }

.depo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--navy);
}

.depo__cover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.depo__cover:focus-visible { outline-offset: -4px; }
.depo__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--depo-shade);
}
.depo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.depo__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  color: var(--yellow);
  transition: transform 0.35s var(--ease);
}

.depo__caption {
  position: absolute;
  right: 16px;
  bottom: 18px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.depo__cat,
.depo__name { text-box: none; }
.depo__cat {
  font-size: 11px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--yellow);
}
.depo__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--white);
}

/* Tocando: some a capa e a legenda, ficam os controles nativos do vídeo */
.depo__card.is-playing .depo__cover { visibility: hidden; opacity: 0; }
.depo__card.is-playing .depo__caption { opacity: 0; }

@media (hover: hover) {
  .depo__link:hover { border-color: var(--navy); }
  .depo__link:hover svg { transform: rotate(-8deg) scale(1.08); }
  .depo__card:hover { box-shadow: var(--depo-shadow); }
  .depo__card:hover .depo__img { transform: scale(1.04); }
  .depo__card:hover .depo__play { transform: scale(1.08); }
}

/* Tablet e celular: carrossel com arraste (scroll-snap), cards no tamanho do Figma, sem degraus */
/* Rabiscos só onde há margem livre ao lado do conteúdo (abaixo disso cobririam cards e títulos) */
@media (max-width: 1439px) {
  .depo__doodle { display: none; }
}

@media (max-width: 1023px) {
  .depo__track {
    justify-content: flex-start;
    gap: 19px;
    margin: -10px calc(-1 * var(--gutter)) -30px;
    padding: 10px var(--gutter) 30px;            /* espaço para a sombra do hover sem mexer no layout */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .depo__track::-webkit-scrollbar { display: none; }
  .depo__card {
    flex: none;
    width: var(--depo-card-w);
    height: var(--depo-card-h);
    aspect-ratio: auto;
    scroll-snap-align: start;
  }
  .depo__card:nth-child(even) { margin-top: 0; }
}

/* Celular (Figma 16:2147 / site no ar): tudo centralizado, link do Instagram depois dos vídeos */
@media (max-width: 767px) {
  .depo__inner { grid-template-columns: 1fr; justify-items: center; row-gap: 36px; }
  .depo__heading { align-items: center; text-align: center; }
  .depo__title { font-size: 32px; letter-spacing: -0.64px; }
  .depo__track { justify-self: stretch; }
  .depo__link { grid-row: auto; grid-column: auto; }
}

/* ==========================================================================
   Localização (Figma 13:1125 fundo, 16:1244 conteúdo, 16:1246 divisor; mobile 16:2154).
   Segue o site no ar: mapa do Google em iframe no painel, endereço sem corte vertical (48px).
   ========================================================================== */

:root {
  --local-muted: #565d78;
  --local-pad: 81px 0 80px;
  --local-gap: 50px;
  --local-head-gap: 50px;
  --local-media-h: 331px;
  --local-photo-h: 331px;
  --local-pin: 48px;
  --local-pin-icon: 22px;
  --local-addr-fs: 20px;
  --local-addr-ls: -0.4px;
  --local-addr-gap: 20px;
  --local-map-bg: #e5e3df;
  --local-btn-hover: #2b3566;
}

@media (max-width: 1023px) {
  :root {
    --local-media-gap: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --local-pad: 60px 0;
    --local-gap: 36px;
    --local-head-gap: 32px;
    --local-photo-h: 143px;
    --local-media-gap: 20px;
    --local-pin: 37px;
    --local-pin-icon: 17px;
    --local-addr-fs: 16px;
    --local-addr-ls: -0.32px;
    --local-addr-gap: 16px;
  }
}

.local {
  position: relative;
  z-index: 1;                         /* o asterisco passa por cima do CTA final */
  padding: var(--local-pad);
  background: var(--stone);
  overflow-x: clip;
}

.local__divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 92.69px;
  height: 28px;
  translate: -50% 0;
  color: var(--yellow);
}

.local__doodle {
  position: absolute;
  top: 476px;
  right: -139px;
  z-index: 1;
  width: 266px;
  height: 251px;
  max-width: none;
  pointer-events: none;
}

.local__inner { display: flex; flex-direction: column; gap: var(--local-gap); }

.local__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--local-head-gap) 24px;
}
.local__heading { display: flex; flex-direction: column; gap: 24px; }
.local__eyebrow { color: var(--local-muted); }

.local__addr {
  display: flex;
  align-items: center;
  gap: var(--local-addr-gap);
  font-style: normal;
}
.local__pin {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--local-pin);
  height: var(--local-pin);
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
}
.local__pin svg { width: var(--local-pin-icon); height: var(--local-pin-icon); }
.local__addr-text {
  font-size: var(--local-addr-fs);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--local-addr-ls);
  color: var(--navy);
  text-box: none;
}
.local__addr-text strong { font-weight: var(--fw-black); }

/* Foto da fachada + painel do mapa (503 + 727 com 50 de espaço no desktop) */
.local__media {
  display: grid;
  grid-template-columns: 503fr 727fr;
  gap: 50px;
}
.local__photo {
  width: 100%;
  height: var(--local-photo-h);
  object-fit: cover;
  border-radius: 10px;
}

.local__map {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: var(--local-media-h);
  padding: 20px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--local-map-bg);
}
.local__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.local__actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
}

/* Botão azul "Como chegar" */
.local__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--navy);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 20px;
  white-space: nowrap;
  color: var(--white);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.local__btn svg { flex: none; width: 20px; height: 20px; transition: transform 0.25s var(--ease); }

/* Telefone/WhatsApp com sublinhado amarelo */
.local__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--yellow);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  line-height: 20px;
  white-space: nowrap;
  color: var(--navy);
  transition: border-color 0.3s var(--ease);
}
.local__wa svg { flex: none; width: 20px; height: 20px; transition: transform 0.3s var(--ease); }

@media (hover: hover) {
  .local__btn:hover { background: var(--local-btn-hover); transform: translateY(-2px); }
  .local__btn:hover svg { transform: translateX(3px); }
  .local__wa:hover { border-color: var(--navy); }
  .local__wa:hover svg { transform: rotate(-8deg) scale(1.08); }
}

/* Tablet e celular: foto e mapa empilhados */
@media (max-width: 1439px) {
  .local__doodle { display: none; }           /* sem margem livre o asterisco cobriria o mapa */
}

@media (max-width: 1023px) {
  .local__media { grid-template-columns: 1fr; gap: var(--local-media-gap); }
}

/* Celular (site no ar): título 32px e só o botão "Como chegar" no mapa */
@media (max-width: 767px) {
  .local__heading .title { font-size: 32px; letter-spacing: -0.64px; }
  .local__wa { display: none; }
}

/* ==========================================================================
   CTA final (Figma 16:1262 conteúdo + 16:1279 fundo / mobile 16:2177 + 16:2193).
   A foto do site no ar já traz o degradê aplicado (st-cta-fundo / st-cta-fundo-mobile).
   ========================================================================== */

:root {
  --cta-h: 566px;
  --cta-pad-top: 121px;
  --cta-pad-bottom: 110px;
  --cta-fs: 48px;
  --cta-gap: 40px;
}
@media (max-width: 767px) {
  :root {
    --cta-h: 565px;
    --cta-pad-top: 241px;
    --cta-pad-bottom: 58px;
    --cta-fs: 28px;
    --cta-gap: 32px;
  }
}

.cta {
  position: relative;
  color: var(--white);
}

.cta__panel {
  position: relative;
  min-height: var(--cta-h);
  padding: var(--cta-pad-top) 0 var(--cta-pad-bottom);
  background: var(--navy-dark) url("assets/img/cta-fundo.webp") 50% 50% / cover no-repeat;
}

.cta__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cta-gap);
}
.cta__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 37px;
}
.cta__title {
  max-width: 643px;
  font-size: var(--cta-fs);
  letter-spacing: -0.02em;
}
.cta__sub {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--text-light);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 17px 28px;
}

/* Rabiscos (posições do site no ar; lá eles somem no tablet e no celular).
   O asterisco amarelo que desce da Localização é dessa seção (70-localizacao), como no site no ar. */
.cta__doodle {
  position: absolute;
  z-index: 3;                        /* a estrela desce sobre o rodapé */
  height: auto;
  pointer-events: none;
}
.cta__doodle--traco { top: 492px; left: calc(50% + 380px); width: 230px; }
.cta__doodle--estrela { top: 446px; left: 0; width: 144px; }

/* Abaixo de 1440 o texto encosta na esquerda: a estrela desce para não cobrir o botão */
@media (max-width: 1439px) {
  .cta__doodle--estrela { top: 466px; }
}

/* Notebooks e tablets: véu escuro atrás do texto (a foto fica mais estreita) */
@media (max-width: 1279px) {
  .cta__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 26, 57, 0.85) 0%, rgba(20, 26, 57, 0.45) 55%, rgba(20, 26, 57, 0) 78%);
  }
  .cta__doodle--traco { left: auto; right: 4%; }
}
@media (max-width: 1023px) {
  .cta__doodle { display: none; }
}

/* Celular: foto em cima com cantos arredondados, conteúdo centralizado */
@media (max-width: 767px) {
  .cta { background: var(--stone); }  /* aparece nos cantos arredondados, emendando com a Localização */
  .cta__panel {
    border-radius: 20px 20px 0 0;
    background-image: url("assets/img/cta-fundo-mobile.webp");
    background-position: 50% 0;
  }
  .cta__panel::before { content: none; }
  .cta__content { align-items: center; text-align: center; }
  .cta__eyebrow { display: none; }
  .cta__title { max-width: none; }
  .cta__actions { flex-direction: column; }
}

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

.not-found { background: var(--navy); color: var(--white); }
.not-found .title { color: var(--white); }
.not-found .lead { color: var(--text-light); }
.not-found__inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
}

.policy { background: var(--paper); }
.policy__header { background: var(--white); border-bottom: 1px solid rgba(29, 36, 76, 0.12); }
.policy__bar { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.policy__back { font-weight: var(--fw-semibold); color: var(--navy); }
.policy__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: calc(860px + 2 * var(--gutter));
  padding-block: var(--section-y);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--navy);
}
.policy__content p,
.policy__content li { text-box: none; }
.policy__content h2 { margin-top: 24px; font-family: var(--font); font-size: 22px; text-box: none; }
.policy__content ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }
.policy__content a,
.policy__link { color: var(--navy); text-decoration: underline; }
.policy__link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.policy__updated { font-size: 14px; color: var(--text); }
.policy__table { overflow-x: auto; }
.policy__table table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 14px; }
.policy__table th,
.policy__table td { padding: 10px 12px; border: 1px solid rgba(29, 36, 76, 0.12); text-align: left; }
@media (hover: hover) {
  .policy__back:hover { color: var(--yellow-border); }
}


/* ==========================================================================
   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(--white);
  box-shadow: 0 20px 50px -20px rgba(14, 19, 42, 0.45), 0 0 0 1px rgba(29, 36, 76, 0.12);
  color: var(--text);
}
.consent__title { 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(--white);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.consent__btn[hidden] { display: none; }
.consent__btn--primary { border-color: var(--yellow-border); background: var(--grad-yellow); color: var(--navy); }
.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(--white); }
  .consent__btn--primary:hover { background: var(--yellow); color: var(--navy); }
  .consent__btn--link:hover { background: none; color: var(--navy); text-decoration-thickness: 2px; }
}

/* ==========================================================================
   Rodapé (Figma 16:1439 / mobile 16:2205). Textos sem corte vertical, como no Figma.
   ========================================================================== */

:root {
  --footer-text: rgba(255, 255, 255, 0.8);
  --footer-muted: rgba(255, 255, 255, 0.6);
}

.footer {
  background: var(--navy-dark);
  color: var(--white);
}
.footer :is(h2, p) { text-box: none; }

.footer__main {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}
.footer__main::before {             /* marca d'água: símbolo branco a 5% */
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/footer-marca-dagua.webp") 104.75% 9px / 447px auto no-repeat;
  opacity: 0.05;
  pointer-events: none;
}

.footer__cols {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__marca {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 425px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer__logo { width: 190px; height: 68px; }
.footer__selo { width: 76px; height: 73px; }
.footer__segmentos {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.footer__col--nav { width: 95px; }
.footer__col--visite { width: 187px; }
.footer__col--contato { width: 155px; }

.footer__title {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-extrabold);
  letter-spacing: 1.82px;
  text-transform: uppercase;
  color: var(--yellow);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--footer-text);
}
.footer__links a { transition: color 0.25s var(--ease); }

.footer__address {
  font-size: 15px;
  font-style: normal;
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: var(--footer-text);
}

.footer__link-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.footer__link-icon svg { flex: none; transition: transform 0.3s var(--ease); }
.footer__map { font-size: 15px; }
.footer__map svg { width: 18px; height: 18px; }
.footer__phone { font-size: 17px; }
.footer__phone svg { width: 20px; height: 20px; }

.footer__social {
  display: flex;
  gap: 10px;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer__social svg { width: 20px; height: 20px; }

.footer__handle {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--footer-muted);
}

/* Barra inferior */
.footer__bar {
  padding: 50px 0;
  background: var(--navy-deep);
}
.copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  color: var(--footer-muted);
}
.copyright__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}
.copyright__links a,
.copyright__links button {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-eyebrow);
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.copyright__dev {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}
.copyright__dev img { width: 64px; height: 27px; transition: transform 0.3s var(--ease); }

@media (hover: hover) {
  .footer__links a:hover,
  .footer__link-icon:hover { color: var(--yellow); }
  .footer__map:hover svg { transform: translateX(3px); }
  .footer__social a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); transform: translateY(-2px); }
  .copyright__links a:hover,
  .copyright__links button:hover { color: var(--yellow); }
  .copyright__dev:hover img { transform: translateY(-2px); }
}

/* Notebooks: a barra inferior quebra em duas linhas centralizadas */
@media (max-width: 1279px) {
  .copyright { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* Tablet: marca em cima, as três colunas embaixo */
@media (max-width: 1023px) {
  .footer__cols { flex-wrap: wrap; row-gap: 48px; }
  .footer__marca { width: 100%; }
}

/* Celular: tudo empilhado e centralizado (Figma 420) */
@media (max-width: 767px) {
  .footer__main { padding: 60px 0; }
  .footer__main::before { content: none; }
  .footer__cols { flex-direction: column; align-items: center; gap: 60px; text-align: center; }
  .footer__marca { align-items: center; }
  .footer__logo { width: 124px; height: 45px; }
  .footer__selo { width: 50px; height: 47px; }
  .footer__col { align-items: center; width: auto; }
  .footer__bar { padding: 40px 0; }
  .copyright { flex-direction: column; gap: 20px; }
  .copyright__dev { gap: 18px; }
}