/* As mesmas duas famílias dos outros projetos da casa: Inter no corpo,
   como em clinicas, veiculos e no CRM, e Sora no título, como em veiculos. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #FBF9F7;
  --superficie: #FFFFFF;
  --superficie-2: #F5F1ED;
  --tinta: #201C1B;
  --tinta-2: #4A4342;
  --tinta-3: #6E6462;
  --linha: #E7E0DA;
  --linha-2: #CFC5BD;

  --bloco: #3A3737;
  --bloco-2: #2B2928;

  --acento: #D1180F;
  --acento-forte: #A81109;
  --acento-tenue: #FDECEA;
  --btn-tinta: #FFFFFF;

  --destaque: #FFC400;
  --destaque-tinta: #43350A;

  --sombra: 0 1px 2px rgba(32, 28, 27, .05), 0 6px 20px rgba(32, 28, 27, .07);
  --sombra-alta: 0 2px 8px rgba(32, 28, 27, .09), 0 18px 44px rgba(32, 28, 27, .13);

  --titulo: "Sora", system-ui, -apple-system, sans-serif;
  --corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --largura: 1200px;
  --raio: 14px;
  --raio-p: 8px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); }
a:hover { color: var(--acento-forte); }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- tipografia ---------- */

h1, h2, .titulo-secao {
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }

h3, h4, h5, h6 {
  font-family: var(--corpo);
  font-weight: 600;
  letter-spacing: -.011em;
  line-height: 1.32;
  margin: 0;
  text-wrap: balance;
}
h3 { font-size: 1.14rem; }
h4 { font-size: 1.03rem; }
h5 { font-size: .95rem; }
h6 { font-size: .89rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.olho {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 .6rem;
}
.olho--claro { color: var(--destaque); }

.texto-medio { max-width: 62ch; }

.chamada {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 46ch;
}

/* ---------- estrutura ---------- */

.interno {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.secao { padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.secao--clara { background: var(--superficie); }
.secao--escura { background: var(--bloco); color: #F2EDE9; }
.secao--escura h1, .secao--escura h2, .secao--escura h3 { color: #FFF; }
.secao--escura a { color: var(--destaque); }
.secao--tenue { background: var(--acento-tenue); }

/* Cabeçalho de seção é sempre centralizado. O limite de largura vive no
   parágrafo, não no bloco: preso no bloco, o título quebrava em duas linhas
   mesmo quando cabia numa. */
.secao__topo {
  margin: 0 auto 2.2rem;
  text-align: center;
  max-width: 60rem;
}
.secao__topo .chamada { margin-inline: auto; }

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento);
  color: #FFF;
  padding: .7rem 1.1rem;
  z-index: 200;
  border-radius: 0 0 var(--raio-p) 0;
}
.pular:focus { left: 0; color: #FFF; }

/* ---------- topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bloco);
  border-bottom: 4px solid var(--acento);
}

.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.marca { display: inline-flex; align-items: center; }

.menu__botao {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: transparent;
  color: #FFF;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--raio-p);
  padding: .5rem .8rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.menu__botao:hover { background: rgba(255, 255, 255, .1); }
.menu__traco { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu__traco::before, .menu__traco::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.menu__traco::before { top: -6px; }
.menu__traco::after { top: 6px; }

.menu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem;
}
.menu__lista a {
  display: block;
  color: #EFE9E5;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  padding: .5rem .65rem;
  border-radius: var(--raio-p);
}
.menu__lista a:hover { background: rgba(255, 255, 255, .12); color: #FFF; }
.menu__lista a[aria-current="page"] { color: var(--destaque); }
.menu__lista .menu__cta a { background: var(--acento); color: #FFF; padding-inline: 1rem; }
.menu__lista .menu__cta a:hover { background: var(--acento-forte); }

@media (max-width: 1019px) {
  .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bloco-2);
    border-bottom: 4px solid var(--acento);
    padding: .75rem 1.25rem 1.1rem;
  }
  .menu[data-aberto="sim"] { display: block; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lista a { padding: .75rem .4rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .menu__lista .menu__cta a { margin-top: .6rem; text-align: center; border-bottom: 0; }
}
@media (min-width: 1020px) {
  .menu__botao { display: none; }
  .menu { display: block !important; }
}

/* ---------- vitrine (topo da home) ---------- */

.vitrine { position: relative; background: var(--bloco-2); }
.vitrine__trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.vitrine__trilho::-webkit-scrollbar { display: none; }
.vitrine__slide { flex: 0 0 100%; scroll-snap-align: start; }
.vitrine__slide img { width: 100%; }

.vitrine__pontos {
  position: absolute;
  left: 0; right: 0; bottom: .9rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
}
.vitrine__ponto {
  width: 11px; height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #FFF;
  background: transparent;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.vitrine__ponto[aria-selected="true"] { background: #FFF; }

/* ---------- botoes ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--corpo);
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: .78rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--raio-p);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn--principal { background: var(--acento); color: var(--btn-tinta); }
.btn--principal:hover { background: var(--acento-forte); color: var(--btn-tinta); }
.btn--contorno { background: transparent; color: var(--acento); border-color: currentColor; }
.btn--contorno:hover { background: var(--acento-tenue); color: var(--acento-forte); }
.btn--claro { background: var(--destaque); color: var(--destaque-tinta); }
.btn--claro:hover { background: #E8B200; color: var(--destaque-tinta); }

.acoes { display: flex; flex-wrap: wrap; gap: .7rem; }
.acoes--centro { justify-content: center; }

/* ---------- grades ---------- */

.grade { display: grid; gap: 1.25rem; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* ---------- quem somos ---------- */
/* Foto grande de um lado, texto curto do outro. O texto longo mora em
   sobre.html: aqui a foto é que segura o bloco. */

.sobre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.sobre__foto {
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.sobre__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.sobre__texto { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.sobre__texto h2 { max-width: 16ch; }

.sobre__fatos { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sobre__fatos li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.35;
}
.sobre__fatos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--acento);
}

@media (max-width: 860px) {
  .sobre { grid-template-columns: 1fr; }
}

/* ---------- numeros ---------- */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
/* Número usa a fonte de corpo com algarismo de largura fixa: em Sora o
   numeral fica largo e desalinha entre as colunas. */
.numeros strong {
  display: block;
  font-family: var(--corpo);
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--acento);
}
.numeros span {
  display: block;
  font-size: .81rem;
  line-height: 1.4;
  color: var(--tinta-2);
  margin-top: .45rem;
  text-wrap: balance;
}

.faixa-numeros {
  background: var(--acento-tenue);
  border-radius: var(--raio);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.secao--escura .numeros strong { color: var(--destaque); }
.secao--escura .numeros span { color: #DCD4CF; }

/* ---------- diferenciais ---------- */
/* Grade de 4 por 2, colunas fixas em vez de auto-fit: com auto-fit a última
   linha ficava com órfão e a seção perdia a simetria.
   Fundo escuro porque sete das oito logos são brancas com transparência.
   A caixa da logo tem altura fixa, senão cada logo pousa numa altura e o
   rótulo de baixo desalinha. */

.diferenciais {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.diferencial {
  display: grid;
  grid-template-rows: 4.5rem auto;
  align-items: center;
  justify-items: center;
  gap: .9rem;
  text-align: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--raio);
  padding: 1.5rem 1.1rem 1.6rem;
  transition: background-color .15s ease, border-color .15s ease;
}
.diferencial:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .26); }

.diferencial__logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.diferencial__logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 4.5rem;
  object-fit: contain;
}

.diferencial p {
  font-size: .89rem;
  line-height: 1.4;
  margin: 0;
  max-width: 18ch;
  color: #EDE7E3;
}

@media (max-width: 900px) {
  .diferenciais { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .diferenciais { grid-template-columns: 1fr; }
  .diferencial { grid-template-columns: 4.5rem 1fr; grid-template-rows: auto; text-align: left; justify-items: start; padding: 1rem; }
  .diferencial p { max-width: none; }
}

/* ---------- carrossel de unidades ---------- */

.uni { position: relative; }

.uni__trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--raio);
}
.uni__trilho::-webkit-scrollbar { display: none; }

.uni__slide { flex: 0 0 100%; scroll-snap-align: start; }

.uni__cartao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  min-height: 24rem;
}

.uni__foto { margin: 0; background: var(--superficie-2); }
.uni__foto img { width: 100%; height: 100%; object-fit: cover; }

.uni__dados {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  padding: clamp(1.4rem, 3.2vw, 2.6rem);
  justify-content: center;
}

.uni__zona {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--acento);
  background: var(--acento-tenue);
  border-radius: 999px;
  padding: .32rem .8rem;
  margin: 0;
}

.uni__nome {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  letter-spacing: -.025em;
  line-height: 1.08;
}

/* Ícone no lugar do rótulo em caixa alta: a coluna de rótulo apertava o
   valor e deixava tudo com cara de formulário. */
.uni__lista { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .7rem; width: 100%; }
.uni__lista li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .75rem;
  align-items: start;
  font-size: .91rem;
  line-height: 1.45;
  color: var(--tinta-2);
}
.uni__lista svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--acento);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: .15rem;
}
.uni__lista a { color: var(--tinta-2); text-decoration: none; overflow-wrap: anywhere; }
.uni__lista a:hover { color: var(--acento); text-decoration: underline; }

.uni__acoes { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .5rem; }
.uni__acoes .btn { font-size: .86rem; padding: .65rem 1.1rem; }

.uni__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}

.uni__seta {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie);
  color: var(--tinta-2);
  border: 1px solid var(--linha-2);
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
  flex: 0 0 auto;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.uni__seta:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-tenue); }
.uni__seta svg { width: 18px; height: 18px; fill: currentColor; }

.uni__abas { display: flex; gap: .35rem; margin-inline: .4rem; }
.uni__aba {
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--tinta-3);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: .48rem 1.05rem;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.uni__aba:hover { color: var(--acento); border-color: var(--linha-2); }
.uni__aba[aria-selected="true"] {
  color: #FFF;
  background: var(--acento);
  border-color: var(--acento);
}

@media (max-width: 820px) {
  .uni__cartao { grid-template-columns: 1fr; min-height: 0; }
  .uni__foto img { height: 12rem; }
  /* As abas ficam, só encolhem. Escondê-las deixava as setas sem dizer
     em qual das três unidades você está. */
  .uni__abas { margin-inline: .2rem; gap: .25rem; }
  .uni__aba { font-size: .76rem; padding: .42rem .7rem; }
}

@media (max-width: 460px) {
  .uni__controles { gap: .35rem; }
  .uni__seta { width: 38px; height: 38px; }
  .uni__aba { font-size: .72rem; padding: .4rem .55rem; }
}

/* ---------- cartoes ---------- */

.cartao {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.cartao__figura { margin: 0; background: var(--superficie-2); }
.cartao__figura img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cartao__corpo { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem; flex: 1; }
.cartao__data {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--acento);
  margin: 0;
}
.cartao__titulo { font-size: 1.02rem; }
.cartao__titulo a { color: var(--tinta); text-decoration: none; }
.cartao__titulo a:hover { color: var(--acento); }
.cartao__resumo { font-size: .9rem; color: var(--tinta-2); margin: 0; flex: 1; }
.cartao__link { font-size: .86rem; font-weight: 700; text-decoration: none; align-self: flex-start; }
.cartao__link:hover { text-decoration: underline; }

/* ---------- segmentos ---------- */
/* Cartão inteiro clicável, com a faixa de idade em destaque: é a primeira
   coisa que um pai procura para saber se o segmento é o do filho dele. */

.segmentos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Duas colunas só em tela larga o bastante para o cartão continuar retrato.
   No celular vira uma coluna: em 2x2 o cartão fica baixo e o véu do texto
   come quase a foto inteira. */
@media (max-width: 1080px) { .segmentos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) { .segmentos { grid-template-columns: 1fr; gap: .9rem; } }

/* Cartão alto com a foto ocupando tudo e o rótulo ancorado embaixo, como no
   site atual deles. A foto é o conteúdo: o texto só pousa por cima. */

.segmento {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .2s ease, box-shadow .2s ease;
}
.segmento:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.segmento:focus-within { outline: 3px solid var(--acento); outline-offset: 3px; }

/* Em coluna única o cartão fica largo, então precisa de altura para a foto
   respirar embaixo do rótulo. */
@media (max-width: 1080px) { .segmento { aspect-ratio: 1 / 1; } }
@media (max-width: 780px) { .segmento { aspect-ratio: 5 / 4; } }
@media (max-width: 420px) { .segmento { aspect-ratio: 4 / 3; } }

.segmento img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.segmento:hover img { transform: scale(1.05); }

/* Véu escuro só na base, para o texto ter contraste sem tapar a foto.
   O degradê é curto de propósito: quanto mais alto ele sobe, menos foto
   sobra, que foi o defeito da versão anterior no celular. */
.segmento__rotulo {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: 2.4rem 1.15rem 1.1rem;
  color: #FFF;
  background: linear-gradient(to top,
    rgba(18, 15, 14, .94) 0%,
    rgba(18, 15, 14, .72) 55%,
    rgba(18, 15, 14, 0) 100%);
}

/* Em coluna única sobra largura: nome e etapa cabem lado a lado, e o véu
   fica ainda mais baixo. */
@media (max-width: 780px) {
  .segmento__rotulo { padding: 2rem 1.1rem 1rem; }
  .segmento__etapa { font-size: .8rem; }
}

.segmento__idade {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--destaque-tinta);
  background: var(--destaque);
  border-radius: 999px;
  padding: .26rem .68rem;
}

.segmento h3 { font-size: 1.14rem; color: #FFF; line-height: 1.2; }
.segmento h3 a { color: inherit; text-decoration: none; }
/* Estende o alvo do link ao cartão todo, sem aninhar <a> dentro de <a>. */
.segmento h3 a::after { content: ""; position: absolute; inset: 0; }

.segmento__etapa { font-size: .84rem; color: #D9D1CC; margin: 0; }

/* ---------- pagina de ensino ---------- */

.atalhos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.atalhos a {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: none;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.atalhos a:hover { color: var(--acento); border-color: var(--acento); background: var(--acento-tenue); }

.etapa { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
@media (max-width: 900px) { .etapa { grid-template-columns: 1fr; } }

.etapa__capa { margin: 0 0 1.4rem; border-radius: var(--raio); overflow: hidden; }
.etapa__capa img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }

.etapa__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.etapa__idade {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento);
  background: var(--acento-tenue);
  border-radius: 999px;
  padding: .3rem .75rem;
}
.etapa__texto p { font-size: .97rem; color: var(--tinta-2); }

/* Abertura curta em destaque; o resto do texto institucional fica atrás de
   um botão. Nada some, mas a página deixa de ser um paredão. */
.etapa__lead {
  font-size: 1.06rem !important;
  line-height: 1.55;
  color: var(--tinta) !important;
  font-weight: 500;
}

.mais { margin-top: 1rem; }
.mais summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--acento);
  cursor: pointer;
  list-style: none;
  padding: .4rem 0;
}
.mais summary::-webkit-details-marker { display: none; }
.mais summary::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.mais[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.mais summary:hover { color: var(--acento-forte); }
.mais p { margin-top: .5rem; }

/* Ficha lateral: o que o site deles enterrava no meio do parágrafo vira
   dado consultável. Gruda no topo enquanto o texto ao lado rola. */
.ficha-etapa {
  position: sticky;
  top: 5.5rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.3rem;
  box-shadow: var(--sombra);
}
@media (max-width: 900px) { .ficha-etapa { position: static; } }

.ficha-etapa__linha { display: grid; gap: .2rem; padding-block: .7rem; border-bottom: 1px solid var(--linha); }
.ficha-etapa__linha:first-of-type { padding-top: 0; }
.ficha-etapa dt {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.ficha-etapa dd { margin: 0; font-size: .92rem; font-weight: 600; }

.ficha-etapa h3 { font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin: 1rem 0 .6rem; font-weight: 700; }
.coordenacao { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.coordenacao li { display: grid; gap: .1rem; font-size: .88rem; }
.coordenacao b { font-weight: 600; }
.coordenacao span { color: var(--tinta-3); font-size: .78rem; }
.coordenacao a { color: var(--tinta-2); text-decoration: none; font-size: .81rem; overflow-wrap: anywhere; }
.coordenacao a:hover { color: var(--acento); text-decoration: underline; }

/* ---------- linha do tempo ---------- */

.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }

.marco { display: grid; grid-template-columns: 7rem 1fr; gap: 1.6rem; position: relative; padding-bottom: 2.2rem; }
.marco:last-child { padding-bottom: 0; }

/* Fio vertical ligando os marcos, ancorado no centro do ponto. */
.marco::before {
  content: "";
  position: absolute;
  left: calc(7rem + .8rem - 1px);
  top: 1.5rem;
  bottom: -.4rem;
  width: 2px;
  background: var(--linha);
}
.marco:last-child::before { display: none; }

.marco__ano {
  font-family: var(--corpo);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--acento);
  text-align: right;
  line-height: 1.3;
}

.marco__corpo { position: relative; padding-left: 2.4rem; }
.marco__corpo::before {
  content: "";
  position: absolute;
  left: -.8rem;
  top: .55rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--superficie);
  border: 3px solid var(--acento);
}
.marco__corpo h3 { margin-bottom: .35rem; }
.marco__corpo p { font-size: .94rem; color: var(--tinta-2); margin: 0; }

@media (max-width: 640px) {
  .marco { grid-template-columns: 1fr; gap: .3rem; }
  .marco::before { left: .8rem; top: 3.2rem; }
  .marco__ano { text-align: left; padding-left: 2.4rem; }
}

/* ---------- fecho: avaliacoes e matricula lado a lado ---------- */

.fecho {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .fecho { grid-template-columns: 1fr; } }

/* Carrossel das avaliações: passa sozinho, para no hover, no foco e com
   "reduzir movimento" ligado. */
.aval { margin-top: 1.4rem; }

.aval__trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.aval__trilho::-webkit-scrollbar { display: none; }
.aval__slide { flex: 0 0 100%; scroll-snap-align: start; }

.aval__pontos { display: flex; gap: .4rem; margin-top: 1rem; }
.aval__ponto {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background-color .15s ease, width .15s ease;
}
.aval__ponto[aria-selected="true"] { background: var(--destaque); width: 22px; border-radius: 999px; }

.avaliacao {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--raio);
  padding: 1.15rem 1.25rem;
}

.avaliacao__estrelas { display: flex; gap: .15rem; margin-bottom: .6rem; }
.avaliacao__estrelas svg { width: 15px; height: 15px; fill: var(--destaque); }

.avaliacao blockquote {
  margin: 0;
  font-size: .93rem;
  line-height: 1.55;
  color: #EDE7E3;
}

.avaliacao figcaption {
  margin-top: .7rem;
  font-size: .78rem;
  color: #A79C96;
}
.avaliacao figcaption b { color: #FFF; font-weight: 600; }

/* Convite da matrícula: centralizado e sem cartão, como estava antes. */
.convite {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding-block: 1rem;
}
.convite p { font-size: .96rem; max-width: 40ch; margin: 0; }
@media (max-width: 900px) { .convite { padding-top: 0; } }

/* ---------- ficha simples (missao, valor, historia) ---------- */

.ficha {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-top: 4px solid var(--acento);
  border-radius: var(--raio);
  padding: 1.3rem;
  box-shadow: var(--sombra);
}
.ficha h3 { margin-bottom: .4rem; }
.ficha p { font-size: .93rem; color: var(--tinta-2); }

/* ---------- formulario ---------- */

.formulario {
  display: grid;
  gap: 1rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: var(--sombra);
}
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-size: .84rem; font-weight: 700; }
.campo__dica { font-size: .78rem; color: var(--tinta-3); }
.campo input, .campo select, .campo textarea {
  font: inherit;
  font-size: .95rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-p);
  padding: .65rem .75rem;
  width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento); }
.campo--par { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }

.aviso-lgpd {
  background: var(--superficie-2);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  padding: .9rem 1rem;
  font-size: .85rem;
  color: var(--tinta-2);
}
.consentimento { display: flex; gap: .6rem; align-items: flex-start; font-size: .87rem; }
.consentimento input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: .18rem; }

/* ---------- rodape ---------- */
/* Três colunas de unidade e uma de links. O e-mail tem 45 caracteres:
   sem overflow-wrap ele invade a coluna vizinha. */

.rodape {
  background: var(--bloco);
  color: #DCD4CF;
  padding-block: clamp(2.2rem, 5vw, 3rem) 1.4rem;
  border-top: 4px solid var(--acento);
}
.rodape h2, .rodape h3 { color: #FFF; }
.rodape a { color: #EFE9E5; text-decoration: none; overflow-wrap: anywhere; }
.rodape a:hover { color: var(--destaque); text-decoration: underline; }

/* Duas faixas: marca e navegação em cima, as três unidades embaixo.
   Antes eram quatro colunas de texto miúdo do mesmo tamanho, sem hierarquia
   nenhuma, e o olho não sabia onde pousar. */

.rodape__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
@media (max-width: 860px) { .rodape__cabeca { grid-template-columns: 1fr; gap: 1.6rem; } }

.rodape__marca { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.rodape__marca p { font-size: .89rem; color: #B7ADA7; max-width: 34ch; margin: 0; }

.rodape__redes { display: flex; flex-wrap: wrap; gap: .45rem; }
.rodape__redes a {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: .38rem .9rem;
  font-size: .81rem;
  font-weight: 600;
}
.rodape__redes a:hover { text-decoration: none; border-color: var(--destaque); }

.rodape__navegacao {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1rem;
  font-size: .88rem;
}
.rodape__navegacao a:hover { text-decoration: underline; }

.rodape__unidades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  padding-top: 1.8rem;
}

.rodape__unidade { min-width: 0; }
.rodape__unidade h3 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--destaque);
  margin-bottom: .55rem;
}

.rodape__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .3rem;
  font-size: .85rem;
  line-height: 1.5;
  min-width: 0;
  color: #C6BDB7;
}
.rodape__lista li { min-width: 0; overflow-wrap: anywhere; }

.rodape__fim {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  font-size: .78rem;
  color: #9C918B;
}

/* ---------- rodape no celular ---------- */
/* Empilhado, tudo em uma coluna, com um fio separando cada unidade: sem
   isso os três blocos viram um bloco só de texto miúdo. */

@media (max-width: 700px) {
  .rodape { padding-block: 2rem 1.2rem; }

  .rodape__marca { align-items: flex-start; gap: .8rem; }
  .rodape__marca p { max-width: none; }

  .rodape__navegacao { grid-template-columns: 1fr; gap: 0; }
  .rodape__navegacao li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .rodape__navegacao a { display: block; padding: .7rem 0; }
  .rodape__navegacao li:last-child { border-bottom: 0; }

  .rodape__unidades { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .rodape__unidade { padding-block: 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .rodape__unidade:last-child { border-bottom: 0; }

  .rodape__fim {
    margin-top: 1.2rem;
    flex-direction: column;
    gap: .35rem;
    text-align: left;
  }
}

/* ---------- migalhas ---------- */

.migalhas { font-size: .8rem; color: var(--tinta-3); padding-top: 1.1rem; }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.migalhas li:not(:last-child)::after { content: "›"; margin-left: .4rem; color: var(--linha-2); }
.migalhas a { text-decoration: none; color: var(--tinta-3); }
.migalhas a:hover { color: var(--acento); }

/* ---------- capa de pagina interna ---------- */

.capa { background: var(--bloco); color: #FFF; padding-block: clamp(2.2rem, 5vw, 3.2rem); }
.capa h1 { color: #FFF; }
.capa p { color: #DCD4CF; margin-top: .7rem; }

/* ---------- atalho flutuante ---------- */

.zap {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #1EA94D;
  color: #FFF;
  text-decoration: none;
  font-size: .87rem;
  font-weight: 700;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
}
.zap:hover { background: #178C3F; color: #FFF; }
.zap svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

@media (max-width: 520px) {
  .zap span { display: none; }
  .zap { padding: .85rem; }
}

/* ---------- utilitarios ---------- */

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

.pilha { display: grid; gap: 1rem; }
.centro { text-align: center; }