/* ==========================================================================
   Colégio EK — tokens (Figma jDfgNvfheuJQWNAWPxkrwV, frames 47:2357 / 58:27)
   ========================================================================== */

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

:root {
  /* Layout */
  --frame: 1920px;
  --container: 1280px;
  --gutter: 20px;                       /* margem lateral no mobile (Figma 420 → 380) */

  /* Cores */
  --orange: #ff662c;
  --orange-light: #ff7b48;
  --peach: #ffb799;
  --navy: #003974;
  --navy-dark: #06376a;
  --ink: #001730;
  --text: rgba(0, 23, 48, 0.7);
  --white: #fff;
  --bg: #f4f7fa;
  --bg-soft: #f8fafc;
  --bg-hero-top: #f3f6f9;
  --footer: #071b32;
  --copyright: #021225;
  --border-card: #e8e8e8;
  --border-faq: #e3e9f0;
  --line-btn: rgba(255, 255, 255, 0.51);
  --icon-overlay: rgba(255, 255, 255, 0.28);
  --social-bg: rgba(255, 255, 255, 0.1);
  --photo-tint: rgba(0, 57, 116, 0.4);
  --photo-tint-soft: rgba(0, 57, 116, 0.06);
  --card-tint-top: rgba(0, 57, 116, 0.26);
  --card-tint-bottom: rgba(0, 57, 116, 0.44);

  --grad-orange: radial-gradient(closest-side, var(--orange-light) 45.747%, var(--orange) 100%);

  /* Tipografia */
  --font: "Montserrat", system-ui, sans-serif;
  --lh: normal;
  --lh-eyebrow: 19.2px;
  --ls-caps: 1.68px;

  --fs-display: 50px;     /* hero h1 */
  --fs-display-xl: 56px;  /* "É EK." */
  --fs-display-br: 56px;  /* quebra antes de "É EK." (define a altura da 2ª linha, como no Figma) */
  --fs-h2: 40px;
  --fs-h3: 24px;          /* títulos das etapas */
  --fs-lead: 20px;        /* parágrafos de seção, títulos de card */
  --fs-faq: 18px;
  --fs-body: 16px;
  --fs-nav-cta: 15px;
  --fs-small: 14px;
  --fs-label: 12px;       /* etiqueta das etapas, barra de topo */
  --fs-eyebrow: 11px;

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

  /* Espaçamentos */
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-13: 13px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-31: 31px;
  --sp-32: 32px;
  --sp-34: 34px;
  --sp-38: 38px;
  --sp-40: 40px;
  --sp-56: 56px;
  --sp-70: 70px;
  --sp-80: 80px;
  --section-y: 80px;

  /* Botão laranja (padding do Figma menos 1px da borda, que no Figma é interna) */
  --btn-pad: 10.6px 28.6px 10.6px 10.6px;
  --btn-icon: 30px;
  --btn-glyph: 15px;

  /* Raios */
  --r-badge: 2px;
  --r-card: 10px;
  --r-btn: 11px;          /* só canto superior direito */
  --r-highlight: 13px;
  --r-section: 26px;
  --r-pill: 999px;

  /* Sombras */
  --shadow-btn: drop-shadow(-82px 29px 12px rgba(0, 0, 0, 0)) drop-shadow(-52px 19px 11px rgba(0, 0, 0, 0.01))
    drop-shadow(-29px 11px 9.5px rgba(0, 0, 0, 0.03)) drop-shadow(-13px 5px 7px rgba(0, 0, 0, 0.04))
    drop-shadow(-3px 1px 4px rgba(0, 0, 0, 0.05));
  --shadow-card: -35px 35px 14px 0 rgba(0, 0, 0, 0), -22px 22px 13px 0 rgba(0, 0, 0, 0.01),
    -13px 13px 11px 0 rgba(0, 0, 0, 0.03), -6px 6px 8px 0 rgba(0, 0, 0, 0.04), -1px 1px 4px 0 rgba(0, 0, 0, 0.05);

  /* Fundo com padrão de losangos (shader "Pattern grid" do Figma, estático) */
  --pattern: url("assets/img/pattern.svg");
  --pattern-opacity: 0.2;

  /* Barra de topo + menu */
  --fs-topbar: 12px;
  --topbar-pad-y: 6px;
  --topbar-icon: 13px;
  --topbar-social: 15px;
  --topbar-social-gap: 12px;
  --topbar-social-opacity: 0.9;
  --nav-h: 72px;
  --nav-pad-y: 16px;
  --logo-w: 57.55px;
  --logo-h: 40px;
  --toggle: 32px;
  --toggle-bg: rgba(0, 0, 0, 0.08);
  --toggle-border: rgba(255, 255, 255, 0.09);
  --toggle-r: 8.229px;
  --toggle-bar-w: 20px;
  --toggle-bar-h: 3px;
  --topbar-gap-phone: 8px;
  --topbar-gap-address: 13px;
  --sp-2: 2px;
  --sp-8: 8px;

  /* Hero */
  --hero-bg: #001936;
  --hero-h: 771px;                 /* da barra laranja até o início da seção seguinte */
  --hero-pad-top: 190px;
  --hero-media-top: -33px;
  --hero-media-w: 2560px;
  --hero-media-h: 859px;
  --hero-img-w: 111.71%;
  --hero-img-left: -8.3%;
  --hero-img-top: 4.93%;
  --hero-shade: linear-gradient(180deg, rgba(0, 0, 0, 0) 79.051%, rgba(0, 0, 0, 0.24) 98.146%);
  --hero-decor-x: -596.7px;        /* a partir da borda esquerda do conteúdo */
  --hero-decor-y: 71px;
  --hero-decor-w: 706.4px;
  --fs-eyebrow-hero: 11px;
  --hero-title-w: 371px;
  --hero-lead-w: 454px;
  --hl-top: 118px;
  --hl-left: 0px;
  --hl-w: 174px;
  --hl-h: 69px;
  --hl-radius: 1px 21px 0 0;
  --avatar: 34px;
  --avatar-overlap: -11px;
  --scroll-w: 96px;
  --scroll-h: 32px;
  --scroll-over: 7px;              /* parte do recorte que entra na seção seguinte */

  /* Cabeçalho de seção */
  --head-w: 836px;

  /* Diferenciais */
  --diff-pad-top: 61px;
  --diff-gap: 40px;                /* cabeçalho → cards → botão */
  --diff-gap-row: 22px;
  --diff-gap-col: 20px;
  --diff-img-ratio: 413 / 165;
  --diff-img-h-wide: 165px;
  --diff-img-border: 6px;
  --diff-badge: 42px;
  --diff-badge-border: 4px;
  --diff-badge-icon: 20px;
  --diff-badge-overlap: -19px;
  --fs-card-title: 20px;
  --r-section-top: 4px;
}

/* Mobile (Figma 420) */
@media (max-width: 767px) {
  :root {
    --fs-display: 41px;
    --fs-display-xl: 46px;
    --fs-display-br: 43px;
    --fs-h2: 28px;
    --fs-lead: 18px;
    --section-y: 60px;

    --fs-topbar: 8px;
    --topbar-icon: 7.8px;
    --topbar-social: 9px;
    --topbar-social-gap: 7.2px;
    --topbar-gap-phone: 6px;
    --topbar-gap-address: 6px;
    --nav-h: 80px;
    --nav-pad-y: 20px;

    --fs-eyebrow-hero: 9px;
    --hl-top: 92px;
    --hl-left: -2px;
    --hl-w: 156px;
    --hl-h: 51px;
    --hl-radius: 0 13px 0 0;

    --diff-pad-top: 60px;
    --diff-gap: 36px;
    --diff-gap-row: 18px;
  }
}

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

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

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

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

h1, h2, h3, h4, p, ul, ol, figure { 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 { 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 de títulos e textos */
h1, h2, h3, p, li, figcaption, summary span { text-wrap: pretty; }

/* Foco visível para quem navega pelo teclado */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

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

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

/* ==========================================================================
   1. Barra de topo + menu
   ========================================================================== */

.topbar {
  background: var(--orange);
  color: var(--white);
  font-size: var(--fs-topbar);
  font-weight: var(--fw-regular);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--topbar-pad-y);
}

.topbar__info {
  display: flex;
  align-items: center;
  gap: var(--sp-22);
  min-width: 0;
}

.topbar__item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.topbar__item--phone { gap: var(--topbar-gap-phone); transition: opacity 0.2s; }
.topbar__item--phone:hover { opacity: 0.8; }
.topbar__item--address { gap: var(--topbar-gap-address); min-width: 0; }
.topbar__item--address span { overflow: hidden; text-overflow: ellipsis; }

.topbar__icon {
  flex: none;
  width: var(--topbar-icon);
  height: var(--topbar-icon);
}

.topbar__social {
  display: flex;
  align-items: center;
  gap: var(--topbar-social-gap);
}
.topbar__social a {
  display: block;
  opacity: var(--topbar-social-opacity);
  transition: opacity 0.2s;
}
.topbar__social a:hover { opacity: 1; }
.topbar__social svg {
  width: var(--topbar-social);
  height: var(--topbar-social);
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-radius: 0 0 var(--r-card) var(--r-card);
}

.navbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding-block: var(--nav-pad-y);
}

.navbar__logo img {
  width: var(--logo-w);
  height: var(--logo-h);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-31);
}

.nav__link {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--navy);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
  transition: color 0.2s;
}
.nav__link:hover { color: var(--orange); }

.nav__cta {
  display: block;
  padding: calc(var(--sp-10) - 1px); /* borda interna, como no Figma */
  border: 1px solid var(--navy);
  border-radius: var(--r-pill);
  font-size: var(--fs-nav-cta);
  font-weight: var(--fw-semibold);
  color: var(--navy);
  text-transform: uppercase;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
  transition: color 0.2s, border-color 0.2s;
}
.nav__cta:hover { color: var(--orange); border-color: var(--orange); }

.navbar__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: var(--toggle);
  height: var(--toggle);
  padding: 0;
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  border-radius: var(--toggle-r);
  cursor: pointer;
}
.navbar__toggle span {
  width: var(--toggle-bar-w);
  height: var(--toggle-bar-h);
  background: var(--navy);
  border-radius: 1px;
}

/* Menu recolhido (tablet e mobile) */
@media (max-width: 1023px) {
  .navbar__toggle { display: flex; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-24);
    padding: var(--sp-24) var(--gutter) var(--sp-32);
    background: var(--white);
    border-radius: 0 0 var(--r-card) var(--r-card);
    box-shadow: var(--shadow-card);
  }
  .nav.is-open { display: flex; }
}

@media (max-width: 767px) {
  .navbar { border-radius: 0; }
  .topbar__social { flex: none; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--btn-pad);
  border: 1px solid var(--line-btn);
  border-radius: 0 var(--r-btn) 0 0;
  background: var(--grad-orange);
  filter: var(--shadow-btn);
  color: var(--white);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  white-space: nowrap;
  transition: filter 0.2s;
}
.btn:hover { filter: var(--shadow-btn) brightness(0.93); }

.btn__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--btn-icon);
  height: var(--btn-icon);
  border-radius: 50%;
  background: var(--icon-overlay);
  color: var(--white);
}
.btn__icon svg { width: var(--btn-glyph); height: var(--btn-glyph); }
.btn--light .btn__icon { background: var(--white); color: var(--navy); }

.btn__label { text-box: trim-both cap alphabetic; }

/* ==========================================================================
   2. Hero
   ========================================================================== */

.hero {
  position: relative;
  margin-top: calc(-1 * var(--nav-h));
  min-height: var(--hero-h);
  padding-top: var(--hero-pad-top);
  background: var(--hero-bg);
  color: var(--white);
}

.hero__media {
  position: absolute;
  top: var(--hero-media-top);
  left: 50%;
  width: var(--hero-media-w);
  height: var(--hero-media-h);
  transform: translateX(-50%);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-shade);
}
.hero > .hero__media,
.hero > .hero__decor { pointer-events: none; }
.hero { overflow-x: clip; }
.hero__media {
  overflow: hidden;
  /* corta o que passa da barra laranja e do início da seção seguinte, como no Figma */
  clip-path: inset(calc(-1 * var(--hero-media-top)) 0 calc(var(--hero-media-h) + var(--hero-media-top) - var(--hero-h)) 0);
}

.hero__img {
  position: absolute;
  top: var(--hero-img-top);
  left: var(--hero-img-left);
  width: var(--hero-img-w);
  max-width: none;
  height: auto;
}

.hero__decor {
  position: absolute;
  top: var(--hero-decor-y);
  left: calc(50% - var(--container) / 2 + var(--hero-decor-x));
  width: var(--hero-decor-w);
  max-width: none;
  height: auto;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-32);
}

.hero__eyebrow {
  margin-bottom: calc(var(--sp-24) - var(--sp-32));   /* 24 entre etiqueta e título */
  font-size: var(--fs-eyebrow-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--peach);
}

.hero__title {
  position: relative;
  isolation: isolate;
  max-width: var(--hero-title-w);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  color: var(--white);
}
.hero__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--hl-top);
  left: var(--hl-left);
  width: var(--hl-w);
  height: var(--hl-h);
  background: var(--orange);
  border-radius: var(--hl-radius);
}
.hero__title-br { font-size: var(--fs-display-br); }
.hero__title-xl { font-size: var(--fs-display-xl); }

.hero__lead {
  max-width: var(--hero-lead-w);
  font-size: var(--fs-lead);
}

.hero__review {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}
.hero__avatars { display: flex; }
.hero__avatars img {
  width: var(--avatar);
  height: var(--avatar);
}
.hero__avatars img + img { margin-left: var(--avatar-overlap); }
.hero__review-text { font-size: var(--fs-small); white-space: nowrap; }
.hero__review-text strong { font-weight: var(--fw-semibold); color: var(--orange); }

.hero__scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(-1 * var(--scroll-over));
  width: var(--scroll-w);
  height: var(--scroll-h);
  transform: translateX(-50%);
}
.hero__scroll svg { width: 100%; height: 100%; }

/* Telas maiores que a foto: funde as laterais da foto com o fundo */
@media (min-width: 2561px) {
  .hero__img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
}

/* Mobile e tablet: foto em cima, texto embaixo (Figma 420) */
@media (max-width: 1023px) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--hero-m-top) + var(--hero-m-text) * 100vw);
    padding-bottom: var(--hero-m-bottom);
  }
  .hero__media {
    top: var(--hero-m-top);
    left: 0;
    width: 100%;
    height: auto;
    transform: none;
    clip-path: none;
  }
  .hero__media::after { background: var(--hero-m-shade); }
  .hero__img {
    position: static;
    width: 100%;
  }
  .hero__decor { display: none; }
  .hero__eyebrow-brand { display: none; }
}

:root {
  /* Hero mobile: foto a 54px do topo, texto começa em 73,33% da largura, 80px abaixo */
  --hero-m-top: 54px;
  --hero-m-text: 0.7333;
  --hero-m-bottom: 80px;
  --hero-m-shade: linear-gradient(180deg, rgba(0, 25, 54, 0) 47.4%, rgba(0, 25, 54, 0.69) 66.9%, var(--hero-bg) 87.6%);
}

/* Cabeçalho de seção (etiqueta + título + texto) */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}
.section-head__titles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.section-head--center {
  max-width: var(--head-w);
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--orange);
}

.title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--ink);
}

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

/* ==========================================================================
   3. Diferenciais
   ========================================================================== */

.diff {
  padding: var(--diff-pad-top) 0 var(--section-y);
  background: var(--bg-hero-top);
  border-radius: var(--r-section-top) var(--r-section-top) 0 0;
}

.diff__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--diff-gap);
}

.diff__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--diff-gap-row) var(--diff-gap-col);
  width: 100%;
}

.diff-card {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.diff-card::after {             /* borda interna, como no Figma (não soma na altura) */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-card);
  pointer-events: none;
}
.diff-card--wide { grid-column: span 3; }

.diff-card__media {
  position: relative;
  overflow: hidden;            /* sem isso a foto empurra a altura além da proporção */
  aspect-ratio: var(--diff-img-ratio);
  margin-bottom: var(--diff-badge-overlap);
  border-bottom: var(--diff-img-border) solid var(--navy-dark);
}
.diff-card--wide .diff-card__media {
  aspect-ratio: auto;
  height: var(--diff-img-h-wide);
}
.diff-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.diff-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-tint-soft);
  mix-blend-mode: color;
}

.diff-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding: 0 var(--sp-20) var(--sp-32);
}

.diff-card__badge {
  display: grid;
  place-items: center;
  width: var(--diff-badge);
  height: var(--diff-badge);
  border: var(--diff-badge-border) solid var(--white);
  border-radius: var(--r-badge);
  background: var(--grad-orange);
  color: var(--white);
}
.diff-card__badge svg { width: var(--diff-badge-icon); height: var(--diff-badge-icon); }

.diff-card__title {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.diff-card__text { font-size: var(--fs-body); }

@media (max-width: 1023px) {
  .diff__grid { grid-template-columns: repeat(2, 1fr); }
  .diff-card { grid-column: span 1; }
  .diff-card:last-child { grid-column: span 2; }
}

/* Tablet: o 4º card divide a linha com o 3º, então usa a mesma proporção de foto */
@media (min-width: 768px) and (max-width: 1023px) {
  .diff-card--wide:not(:last-child) .diff-card__media {
    aspect-ratio: var(--diff-img-ratio);
    height: auto;
  }
}

@media (max-width: 767px) {
  .diff__grid { grid-template-columns: 1fr; }
  .diff-card,
  .diff-card:last-child { grid-column: auto; }
}

/* ==========================================================================
   Tokens das seções 4 a 10
   ========================================================================== */

:root {
  --sp-36: 36px;
  --sp-74: 74px;

  /* Botão de navegação (setas) */
  --nav-btn: 44.522px;
  --nav-btn-border: 1.391px;
  --nav-btn-arrow: 20.87px;
  --nav-btn-gap: 6.957px;
  --shadow-nav: drop-shadow(-4.17px 1.39px 11.13px rgba(0, 0, 0, 0.05)) drop-shadow(-18.09px 6.96px 19.48px rgba(0, 0, 0, 0.04))
    drop-shadow(-40.35px 15.3px 26.43px rgba(0, 0, 0, 0.03)) drop-shadow(-72.35px 26.43px 30.61px rgba(0, 0, 0, 0.01));

  /* Jornada */
  --jornada-bg: linear-gradient(180deg, var(--bg-hero-top) 0%, rgba(244, 247, 250, 0) 100%), var(--bg);
  --jornada-media-w: 580px;
  --jornada-text-w: 630px;
  --jornada-gap: 70px;
  --jornada-cols: minmax(0, 580fr) minmax(0, 630fr);   /* 580 / 630 em 1280; encolhem juntas em telas menores */
  --jornada-ratio: 580 / 725;
  /* recorte da foto (forma do Figma 50:2880), embutido para funcionar até abrindo o arquivo direto */
  --jornada-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 725' preserveAspectRatio='none'%3E%3Cpath d='M22.5 0H490L580 156V702.5A22.5 22.5 0 0 1 557.5 725H88.5L0 571V22.5A22.5 22.5 0 0 1 22.5 0Z'/%3E%3C/svg%3E");
  --jornada-shape-left: 2.069%;   /* 12 / 580 */
  --jornada-shape-top: 2.069%;    /* 15 / 725 */
  --jornada-shape-w: 95.862%;     /* 556 / 580 */
  --jornada-shape-h: 95.862%;     /* 695 / 725 */
  --jornada-photo-pos: center;
  --step-bullet: 17px;
  --step-dot: 11px;
  --step-space: 50px;
  --step-gap: 34px;
  --fs-step-label: 12px;
  --fs-step-title: 24px;
  --fs-step-desc: 20px;

  /* Estrutura */
  --est-row: 280px;
  --est-pad: 32px;
  --est-icon: 32px;
  --fs-est-label: 20px;
  --est-tint: var(--photo-tint);
  --est-gap: 20px;

  /* Depoimentos */
  --depo-pad-bottom: 113px;
  --depo-text-w: 413px;
  --depo-text-offset: 24px;
  --video-w: 253px;
  --video-h: 337px;
  --video-gap: 16.773px;
  --video-bg: #f0f0f0;
  --video-shadow: 0 8.386px 25.159px -13.418px rgba(0, 57, 116, 0.28);
  --video-shade: linear-gradient(0deg, rgba(0, 25, 54, 0.75) 0%, rgba(0, 25, 54, 0.05) 55%);
  --fs-video-label: 10.064px;
  --ls-video-label: 0.3019px;
  --video-label-pad: 11.741px 13.418px;
  --stars-w: 102px;
  --stars-h: 12.75px;

  /* Agende uma visita */
  --visita-pad-bottom: 100px;
  --visita-h: 661px;
  --visita-media: 643fr;
  --visita-body: 651fr;
  --visita-pad: 80px;
  --visita-pad-md: 64px;
  --visita-border: 5px;
  --visita-tint: linear-gradient(180deg, var(--card-tint-top) 0%, var(--card-tint-bottom) 100%);
  --visita-logo-w: 237px;
  --visita-logo-left: 56px;
  --visita-logo-bottom: 55px;
  --visita-bg: var(--navy);
  --input-h: 51px;
  --submit-h: 53px;

  /* Localização */
  --local-text-w: 500px;
  --local-map-w: 630px;
  --local-map-h: 414px;
  --local-text-offset: 24px;
  --local-icon-w: 11.25px;
  --local-icon-h: 13.125px;
  --fs-local-value: 20px;

  /* FAQ */
  --faq-w: 845px;
  --faq-pad-top: 80px;
  --faq-border: 0.8px;
  --faq-pad-y: 19.8px;
  --faq-pad-x: 20.8px;
  --faq-icon: 14px;

  /* Rodapé */
  --footer-pad-top: 80px;
  --footer-pad-bottom: 80px;
  --footer-brand-w: 413px;
  --footer-col-w: 305px;
  --footer-logo-w: 106px;
  --footer-logo-h: 74px;
  --fs-footer-heading: 20px;
  --fs-footer-slogan: 18px;
  --social: 34px;
  --social-icon: 16px;
  --copyright-pad: 45px 0 35px;
  --footer-gap-m: 30px;
  --est-rows-m: 168px 168px 198px;
  --visita-media-h-m: 258px;
  --visita-pad-m: 40px 20px 60px;
  --nedu-w: 59px;
  --nedu-h: 25px;
  --copyright-line: 10px;

  /* WhatsApp flutuante (não existe no Figma; mantido do site no ar) */
  --wa-green: #25d366;
  --wa-size: 56px;
  --wa-icon: 28px;
  --wa-offset: 20px;
}

@media (max-width: 767px) {
  :root {
    --step-space: 25px;
    --fs-step-label: 10px;
    --fs-step-title: 20px;
    --fs-step-desc: 16px;

    --est-pad: 20px;
    --fs-est-label: 14px;
    --est-gap: 10px;
    --est-tint: linear-gradient(180deg, rgba(0, 57, 116, 0.15) 0%, rgba(0, 57, 116, 0.75) 100%);

    --depo-pad-bottom: 60px;
    --video-w: 280px;
    --video-h: 373.333px;
    --video-gap: 24px;
    --video-shadow: 0 10px 30px -16px rgba(0, 57, 116, 0.28);
    --fs-video-label: 12px;
    --ls-video-label: 0.36px;
    --video-label-pad: 14px 16px;

    --visita-pad-bottom: 60px;
    --visita-bg: #053366;          /* azul + padrão escuro a 20% do Figma mobile, que resulta nesta cor */

    --fs-local-value: 16px;
    --faq-pad-top: 61px;
    --footer-pad-top: 61px;
    --footer-pad-bottom: 60px;
    --copyright-pad: 40px 0;
  }
  /* No mobile alguns títulos e textos de seção têm tamanhos próprios no Figma */
  .estrutura, .depo, .visita, .local, .faq { --fs-lead: 16px; }
  .depo, .visita, .local, .faq { --fs-h2: 32px; }
}

/* Utilitário */
.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;
}

/* Botão de navegação (setas laranjas do Figma) */
.nav-btn {
  display: grid;
  place-items: center;
  width: var(--nav-btn);
  height: var(--nav-btn);
  padding: 0;
  border: var(--nav-btn-border) solid var(--line-btn);
  border-radius: var(--r-card) 0 0 var(--r-card);
  background: var(--grad-orange);
  filter: var(--shadow-nav);
  color: var(--white);
  cursor: pointer;
  transition: filter 0.2s;
}
.nav-btn:hover { filter: var(--shadow-nav) brightness(0.93); }
.nav-btn svg { width: var(--nav-btn-arrow); height: auto; }
.nav-btn--next { border-radius: 0 var(--r-card) var(--r-card) 0; }
.nav-btn--next svg { transform: scaleX(-1); }

/* ==========================================================================
   4. Jornada
   ========================================================================== */

.jornada {
  padding-block: var(--section-y);
  background: var(--jornada-bg);
}

.jornada__inner {
  display: grid;
  grid-template-columns: var(--jornada-cols);
  column-gap: var(--jornada-gap);
  align-items: center;
}

.jornada__media {
  position: relative;
  aspect-ratio: var(--jornada-ratio);
}
.jornada__media::before {            /* forma laranja atrás da foto */
  content: "";
  position: absolute;
  left: var(--jornada-shape-left);
  top: var(--jornada-shape-top);
  width: var(--jornada-shape-w);
  height: var(--jornada-shape-h);
  background: var(--orange);
}

.slider { position: absolute; inset: 0; }
.slider__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-mask: var(--jornada-mask) center / 100% 100% no-repeat;
  mask: var(--jornada-mask) center / 100% 100% no-repeat;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--jornada-photo-pos);
  scroll-snap-align: start;
}
.slider .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.slider__prev { left: var(--sp-20); }
.slider__next { right: var(--sp-20); }

.jornada__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-32);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--step-bullet) 1fr;
  column-gap: var(--step-gap);
  padding-bottom: var(--step-space);     /* 139 − 89 no desktop, 107 − 82 no mobile (Figma) */
}
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::after {      /* linha da trilha */
  content: "";
  position: absolute;
  left: calc(var(--step-bullet) / 2 - 0.5px);
  top: var(--step-bullet);
  bottom: 0;
  width: 1px;
  background: var(--navy);
}
.step__bullet {
  display: grid;
  place-items: center;
  width: var(--step-bullet);
  height: var(--step-bullet);
  border: 1px solid var(--navy);
  border-radius: 50%;
  background: var(--white);
}
.step__bullet::after {
  content: "";
  width: var(--step-dot);
  height: var(--step-dot);
  border-radius: 50%;
  background: var(--orange);
}
.step__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding-top: var(--sp-10);
}
.step__label {
  font-size: var(--fs-step-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.step__title {
  font-size: var(--fs-step-title);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.step__desc { font-size: var(--fs-step-desc); }

@media (max-width: 1023px) {
  .jornada__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-36);
  }
  .jornada__media {
    --jornada-photo-pos: center 25%;
    --jornada-ratio: 381 / 287;
    --jornada-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 381 287' preserveAspectRatio='none'%3E%3Cpath d='M22.5 0H332.5L381 83V264.5A22.5 22.5 0 0 1 358.5 287H58.5L0 186V22.5A22.5 22.5 0 0 1 22.5 0Z'/%3E%3C/svg%3E");
    --jornada-shape-left: 2.1%;     /* 8 / 381 */
    --jornada-shape-top: 3.833%;    /* 11 / 287 */
    --jornada-shape-w: 95.801%;     /* 365 / 381 */
    --jornada-shape-h: 92.683%;     /* 266 / 287 */
  }
  .jornada__content { max-width: var(--jornada-text-w); }
}

/* ==========================================================================
   5. Estrutura  (fundo com padrão de losangos, igual nas seções 5, 6 e 7)
   ========================================================================== */

.pattern-zone {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}
.pattern-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pattern);
  opacity: var(--pattern-opacity);
}

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

.estrutura__inner {
  display: flex;
  flex-direction: column;
  gap: var(--diff-gap);
}

.estrutura__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: var(--est-row);
  gap: var(--est-gap);
}

.est-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--sp-13);
  padding: var(--est-pad);
  overflow: hidden;
}
.est-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.est-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--est-tint);
}
.est-card__icon,
.est-card__label { position: relative; z-index: 2; }
.est-card__icon svg {
  width: var(--est-icon);
  height: var(--est-icon);
  color: var(--navy);
}
.est-card__label {
  font-size: var(--fs-est-label);
  font-weight: var(--fw-semibold);
  color: var(--white);
  text-box: trim-both cap alphabetic;
}

@media (max-width: 1023px) {
  .estrutura__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .estrutura__grid { grid-auto-rows: auto; grid-template-rows: var(--est-rows-m); }
}

/* ==========================================================================
   6. Depoimentos
   ========================================================================== */

.depo { padding: var(--section-y) 0 var(--depo-pad-bottom); }

.depo__inner {
  display: grid;
  grid-template-columns: var(--depo-text-w) 1fr;
  column-gap: var(--sp-74);
  align-items: start;
}

.depo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-38);
  padding-top: var(--depo-text-offset);
}
.depo__rating {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
}
.depo__stars {
  width: var(--stars-w);
  height: var(--stars-h);
  fill: var(--orange);
}
.depo__nav {
  display: flex;
  gap: var(--nav-btn-gap);
}

.depo__track {
  display: flex;
  gap: var(--video-gap);
  min-width: 0;
  /* folga para o card subir no hover e para a sombra, sem mudar a posição */
  padding-block: var(--track-room);
  margin-block: calc(-1 * var(--track-room));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.depo__track::-webkit-scrollbar { display: none; }

.video-card {
  position: relative;
  flex: none;
  width: var(--video-w);
  height: var(--video-h);
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--video-bg);
  box-shadow: var(--video-shadow);
  scroll-snap-align: start;
  cursor: pointer;
}
.video-card__poster,
.video-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--video-shade);
  transition: opacity 0.2s;
}
.video-card:hover::before { opacity: 0.7; }
.video-card__label {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--video-label-pad);
  font-size: var(--fs-video-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-video-label);
  text-align: left;
  text-transform: uppercase;
  color: var(--white);
}
.video-card.is-playing { cursor: default; }
.video-card.is-playing::before,
.video-card.is-playing .video-card__label { display: none; }

.depo__btn { display: none; }

@media (max-width: 767px) {
  .depo__stars { display: none; }   /* o Figma mobile não tem as estrelas */
}

@media (max-width: 1023px) {
  .depo__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-32);
  }
  .depo__text { padding-top: 0; }
  .depo__nav { display: none; }
  .depo__track { align-self: stretch; }
  .depo__btn { display: inline-flex; }
}

/* ==========================================================================
   7. Agende uma visita
   ========================================================================== */

.visita { padding-bottom: var(--visita-pad-bottom); }

.visita__card {
  display: grid;
  grid-template-columns: var(--visita-media) var(--visita-body);
  min-height: var(--visita-h);
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--visita-bg);
}

.visita__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 0 var(--visita-logo-bottom) var(--visita-logo-left);
  border-right: var(--visita-border) solid var(--orange);
}
.visita__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visita__media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--visita-tint);
}
.visita__logo {
  position: relative;
  z-index: 2;
  width: var(--visita-logo-w);
  height: auto;
}

.visita__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-32);
  padding: var(--visita-pad);
}
.visita__title,
.visita .lead { color: var(--white); }
.visita__title strong { font-weight: var(--fw-black); }

.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}
.form__input {
  width: 100%;
  height: var(--input-h);
  padding: 0 var(--sp-20);
  border: 0;
  border-radius: 0;
  background: var(--white);
  font-size: var(--fs-body);
  color: var(--ink);
}
.form__input::placeholder { color: var(--text); opacity: 1; }
.form__input:focus-visible { outline: 2px solid var(--orange); outline-offset: 0; }
.form__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--orange); }

.form__submit {
  height: var(--submit-h);
  border: 1px solid var(--line-btn);
  background: var(--grad-orange);
  filter: var(--shadow-btn);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  transition: filter 0.2s;
}
.form__submit:hover { filter: var(--shadow-btn) brightness(0.93); }
.form__msg:empty { display: none; }
.form__msg { font-size: var(--fs-small); color: var(--white); }

/* Notebooks menores (1024–1279): foto mais estreita para o título caber em 2 linhas */
@media (min-width: 1024px) and (max-width: 1279px) {
  .visita__card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .visita__body { padding: var(--visita-pad-md); }
  .visita__media { --visita-logo-w: 180px; --visita-logo-left: 40px; --visita-logo-bottom: 40px; }
}

@media (max-width: 1023px) {
  .visita__card { grid-template-columns: 1fr; min-height: 0; }
  .visita__media {
    --visita-tint: linear-gradient(180deg, var(--card-tint-top) 0%, rgba(0, 57, 116, 0.29) 100%);
    --visita-logo-w: 94px;
    --visita-logo-left: 32px;
    --visita-logo-bottom: 32px;
    height: var(--visita-media-h-m);
    border-right: 0;
    border-bottom: var(--visita-border) solid var(--orange);
  }
  .visita__body { padding: var(--visita-pad-m); }
}
@media (max-width: 767px) {
  .visita > .container { padding-inline: 0; }
}

/* ==========================================================================
   8. Localização
   ========================================================================== */

.local {
  padding-bottom: var(--section-y);
  background: var(--bg-soft);
}

.local__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.local__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-32);
  flex: 0 1 var(--local-text-w);
  margin-right: var(--sp-40);
  padding-top: var(--local-text-offset);
}

.local__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.local__label {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--orange);
}
.local__label svg {
  flex: none;
  width: var(--local-icon-w);
  height: var(--local-icon-h);
}
.local__value { font-size: var(--fs-local-value); }
.local__value a:hover { color: var(--orange); }

.local__map {
  flex: 0 1 var(--local-map-w);
  min-width: 0;
  width: var(--local-map-w);
  height: var(--local-map-h);
  border: 1px solid var(--border-faq);
}

@media (max-width: 1023px) {
  .local__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-32);
  }
  .local__text { display: contents; }
  .local__text > .btn { order: 2; align-self: flex-start; margin-top: var(--sp-4); }
  .local__map {
    order: 1;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 380 / 249.714;
    margin-top: var(--sp-4);
  }
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */

.faq {
  position: relative;
  z-index: 1;
  padding: var(--faq-pad-top) 0 var(--section-y);
  background: var(--bg-soft);
  border-radius: 0 0 var(--r-section) var(--r-section);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--diff-gap);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  width: 100%;
  max-width: var(--faq-w);
}

.faq__item {
  background: var(--white);
  border: var(--faq-border) solid var(--border-faq);
  border-radius: var(--r-card);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  /* borda interna no Figma: desconta a espessura da borda do padding */
  padding: calc(var(--faq-pad-y) - var(--faq-border)) calc(var(--faq-pad-x) - var(--faq-border));
  font-size: var(--fs-faq);
  font-weight: var(--fw-semibold);
  color: var(--navy);
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q > span:first-child { text-box: trim-both cap alphabetic; }
.faq__q:hover { color: var(--orange); }
.faq__icon {
  position: relative;
  flex: none;
  width: var(--faq-icon);
  height: var(--faq-icon);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--orange);
  transition: transform 0.2s;
}
.faq__icon::before { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.faq__icon::after { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__a {
  padding: 0 var(--faq-pad-x) var(--faq-pad-y);
  font-size: var(--fs-body);
  line-height: 1.5;
  text-box: none;
}

@media (max-width: 767px) {
  :root { --fs-faq: 14px; }
}

/* ==========================================================================
   10. Rodapé
   ========================================================================== */

.footer {
  margin-top: calc(-1 * var(--r-section));      /* passa por baixo dos cantos arredondados do FAQ */
  background: var(--footer);
  color: var(--white);
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: calc(var(--footer-pad-top) + var(--r-section));
  padding-bottom: var(--footer-pad-bottom);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-32);
  flex: 0 1 var(--footer-brand-w);
}
.footer__brand > img {
  width: var(--footer-logo-w);
  height: var(--footer-logo-h);
  object-fit: contain;
}
.footer__motto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}
.footer__slogan { font-size: var(--fs-footer-slogan); font-weight: var(--fw-semibold); }
.footer__desc { font-size: var(--fs-small); }

.footer__social { display: flex; gap: var(--sp-12); }
.footer__social a {
  display: grid;
  place-items: center;
  width: var(--social);
  height: var(--social);
  border-radius: 50%;
  background: var(--social-bg);
  transition: background 0.2s;
}
.footer__social a:hover { background: var(--orange); }
.footer__social svg { width: var(--social-icon); height: var(--social-icon); }

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-32);
  flex: 0 1 var(--footer-col-w);
}
.footer__heading { font-size: var(--fs-footer-heading); font-weight: var(--fw-semibold); }
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
  font-size: var(--fs-body);
}
.footer__links li { text-box: trim-both cap alphabetic; }
.footer__links a { transition: color 0.2s; }
.footer__links a:hover { color: var(--orange); }

.copyright { background: var(--copyright); }
.copyright__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small);
}
.copyright { padding: var(--copyright-pad); }
.copyright__dev {
  display: flex;
  align-items: center;
  gap: var(--sp-20);
}
.copyright__dev img { width: var(--nedu-w); height: var(--nedu-h); }
/* no Figma o logo (25px) fica centrado numa linha de 10px e não aumenta a faixa */
@media (min-width: 768px) {
  .copyright__dev { margin-block: calc((var(--copyright-line) - var(--nedu-h)) / 2); }
}

@media (max-width: 1023px) {
  .footer__inner {
    flex-direction: column;
    gap: var(--footer-gap-m);
  }
  .footer__brand,
  .footer__col { flex: none; width: 100%; }
}
@media (max-width: 767px) {
  .copyright__inner {
    flex-direction: column;
    gap: var(--sp-32);
    text-align: center;
  }
}

/* WhatsApp flutuante */
.wa-float {
  position: fixed;
  z-index: 40;
  right: var(--wa-offset);
  bottom: var(--wa-offset);
  display: grid;
  place-items: center;
  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 50%;
  background: var(--wa-green);
  color: var(--white);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: var(--wa-icon); height: var(--wa-icon); }

/* ==========================================================================
   Hover (o Figma não define; padrão aplicado em todo o site)
   Só em aparelhos com mouse, para não "grudar" o hover no toque do celular.
   ========================================================================== */

:root {
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.3s;
  --lift-btn: -2px;
  --lift-card: -6px;
  --track-room: 16px;
  --zoom: 1.06;
  --shadow-card-hover: -35px 35px 30px 0 rgba(0, 57, 116, 0.04), -16px 20px 24px 0 rgba(0, 57, 116, 0.08),
    -4px 6px 10px 0 rgba(0, 57, 116, 0.08);
}

.btn,
.form__submit,
.nav-btn,
.diff-card,
.video-card,
.faq__item,
.wa-float { transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn__icon { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.diff-card__media img,
.est-card__img,
.video-card__poster { transition: transform 0.6s var(--ease); }
.est-card::before { transition: opacity var(--dur) var(--ease); }
.est-card__label,
.est-card__icon { transition: transform var(--dur) var(--ease); }

@media (hover: hover) {
  /* Botões laranjas: sobem um pouco, escurecem e o círculo do ícone fica branco */
  .btn:hover,
  .form__submit:hover,
  .nav-btn:hover { transform: translateY(var(--lift-btn)); }
  .btn:hover .btn__icon { background: var(--white); color: var(--orange); }
  .btn:active,
  .form__submit:active,
  .nav-btn:active { transform: translateY(0); }

  /* Cards de diferenciais: sobem, sombra mais forte e a foto aproxima */
  .diff-card:hover { transform: translateY(var(--lift-card)); box-shadow: var(--shadow-card-hover); }
  .diff-card:hover .diff-card__media img { transform: scale(var(--zoom)); }

  /* Fotos da estrutura: aproximam, clareiam e o texto sobe */
  .est-card:hover .est-card__img { transform: scale(var(--zoom)); }
  .est-card:hover::before { opacity: 0.6; }
  .est-card:hover .est-card__label,
  .est-card:hover .est-card__icon { transform: translateY(-4px); }

  /* Vídeos: sobem e a capa aproxima */
  .video-card:not(.is-playing):hover { transform: translateY(var(--lift-card)); }
  .video-card:not(.is-playing):hover .video-card__poster { transform: scale(var(--zoom)); }

  /* Perguntas: borda e texto laranjas */
  .faq__item:hover { border-color: var(--orange); }
}

/* Página 404 */
.not-found { background: var(--bg-hero-top); }
.not-found__inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-24);
  text-align: center;
}
.not-found .btn { padding: var(--sp-16) var(--sp-32); }

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

.consent {
  position: fixed;
  z-index: 60;
  left: var(--sp-20);
  right: var(--sp-20);
  bottom: var(--sp-20);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent[hidden] { display: none; }
.consent__box {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  width: 100%;
  max-width: var(--faq-w);
  padding: var(--sp-24);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--border-faq);
  color: var(--text);
}
.consent__title { font-size: var(--fs-faq); font-weight: var(--fw-bold); color: var(--ink); }
.consent__text { font-size: var(--fs-small); line-height: 1.5; text-box: none; }
.consent__text a { color: var(--navy); text-decoration: underline; }
.consent__prefs { display: flex; flex-direction: column; gap: var(--sp-10); }
.consent__prefs[hidden] { display: none; }
.consent__opt {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
  font-size: var(--fs-small);
  line-height: 1.4;
  cursor: pointer;
}
.consent__opt input { margin-top: 2px; accent-color: var(--orange); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); }
.consent__btn {
  min-height: 44px;
  padding: 0 var(--sp-20);
  border: 1px solid var(--navy);
  border-radius: 0 var(--r-btn) 0 0;
  background: var(--white);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
}
.consent__btn[hidden] { display: none; }
.consent__btn--primary { border-color: transparent; background: var(--grad-orange); color: var(--white); }
.consent__btn--link {
  border-color: transparent;
  padding-inline: var(--sp-4);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-transform: none;
}

/* O WhatsApp flutuante sobe enquanto o aviso estiver aberto */
.wa-float { bottom: calc(var(--wa-offset) + var(--consent-h, 0px)); }

.copyright__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-8) var(--sp-20);
}
.copyright__links a,
.copyright__links button {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-small);
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.copyright__links a:hover,
.copyright__links button:hover { color: var(--orange); }

/* Página da política de privacidade */
.policy { background: var(--bg-soft); }
.policy__header { background: var(--white); }
.policy__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.policy__back { font-weight: var(--fw-semibold); color: var(--navy); }
.policy__back:hover { color: var(--orange); }
.policy__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  max-width: calc(var(--head-w) + 2 * var(--gutter));
  padding-block: var(--section-y);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.policy__content p,
.policy__content li { text-box: none; }
.policy__content h1 { margin-bottom: var(--sp-8); }
.policy__content h2 {
  margin-top: var(--sp-24);
  font-size: var(--fs-faq);
  color: var(--ink);
  text-box: none;
}
.policy__content ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-left: var(--sp-20);
  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: var(--fs-small); }
.policy__table { overflow-x: auto; }
.policy__table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: var(--fs-small);
}
.policy__table th,
.policy__table td {
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--border-faq);
  text-align: left;
}
.policy__table th { color: var(--ink); }

/* Área de toque maior nos ícones das redes do topo (acessibilidade), sem mudar o desenho */
.topbar__social a {
  padding: calc((24px - var(--topbar-social)) / 2);
  margin: calc((24px - var(--topbar-social)) / -2);
}
@media (max-width: 767px) {
  .topbar__social { gap: calc(24px - var(--topbar-social)); }
}