/* ============================================================
   ESCOLA THEMELIOS — Formação Prática em Teologia
   Sistema visual extraído de "Esquema de cores Themelios.pptx"
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* paleta amostrada dos PNGs originais do pptx */
  --orange:        #E37A50;
  --orange-deep:   #C9613A;
  --orange-soft:   #EFB399;
  --taupe:         #6F6661;
  --taupe-deep:    #574F4B;
  --black:         #000000;
  --ink:           #1E1E1E;
  --ink-soft:      #2A2724;
  --light:         #ECEAEB;
  --white:         #FFFFFF;
  --olive:         #696647;

  /* tipografia */
  --f-display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
  --f-serif:   "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* escala */
  /* o vh no min() faz o título encolher em telas baixas, para o hero caber em 100vh */
  --t-hero:  clamp(2.4rem, min(7.5vw, 10.5vh), 5.75rem);
  --t-h2:    clamp(2rem, 5.2vw, 3.75rem);
  --t-h3:    clamp(1.5rem, 3vw, 2.1rem);
  --t-lead:  clamp(1.05rem, 1.7vw, 1.3rem);
  --t-body:  clamp(0.98rem, 1.15vw, 1.06rem);
  --t-small: 0.82rem;

  /* layout */
  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --pad-section: clamp(72px, 11vw, 140px);
  --nav-h: 72px;

  --echo: 6px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.68;
  color:var(--ink);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto é obrigatório: os atributos width/height do HTML (que reservam espaço
   e evitam layout shift) senão fixam a altura e anulam width:100% / aspect-ratio */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
h1,h2,h3,h4{ margin:0; font-weight:400; text-wrap:balance; }
button{ font:inherit; }

:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:2px;
}

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

/* ---------- 3. UTILITÁRIOS DE TEXTO ---------- */

/* headline "eco": branca, contorno preto + cópia deslocada — assinatura do pptx */
.echo{
  font-family:var(--f-display);
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
  color:var(--white);
  -webkit-text-stroke:2px var(--black);
  paint-order:stroke fill;
  text-shadow:var(--echo) var(--echo) 0 var(--black);
}
.echo--sm{ --echo:4px; -webkit-text-stroke-width:1.5px; }

/* headline plana, para fundos pretos onde o eco não aparece */
.display{
  font-family:var(--f-display);
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:.01em;
}

.serif-it{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:500;
}

.eyebrow{
  font-family:var(--f-body);
  font-size:var(--t-small);
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.lead{
  font-size:var(--t-lead);
  line-height:1.6;
  max-width:56ch;
}

.measure{ max-width:64ch; }

/* ---------- 4. LAYOUT DE SEÇÃO ---------- */
.section{
  position:relative;
  padding:var(--pad-section) 0;
  overflow:hidden;
  scroll-margin-top:var(--nav-h);
}
.wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* fundos — a rotação de cor por seção vem direto do pptx */
.s-taupe { background:var(--taupe);  color:var(--white); }
.s-light { background:var(--light);  color:var(--ink); }
.s-black { background:var(--black);  color:var(--white); }
.s-white { background:var(--white);  color:var(--ink); }
.s-ink   { background:var(--ink);    color:var(--white); }
.s-orange{ background:var(--orange); color:#241E1A; }

.section__head{ margin-bottom:clamp(36px,5vw,60px); }
.section__title{ font-size:var(--t-h2); margin-bottom:.5em; }
.section__title:last-child{ margin-bottom:0; }

/* ---------- 5. MOTIVOS GRÁFICOS (pptx) ---------- */

/* arco / meia-lua — eco da forma do logotipo */
.arc{
  position:absolute;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  pointer-events:none;
  z-index:1;
}
.arc--orange{ background:var(--orange); }
.arc--taupe { background:var(--taupe); }
.arc--olive { background:var(--olive); }
.arc--ink   { background:var(--ink); }

/* asterisco de 8 pontas */
.aster{
  position:absolute;
  pointer-events:none;
  z-index:1;
  opacity:.9;
}
.aster svg{ width:100%; height:100%; display:block; }

/* carimbo rotacionado "THEMELIOS" */
.stamp{
  position:absolute;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.35em .7em;
  border:2.5px solid currentColor;
  font-family:var(--f-display);
  font-size:clamp(.8rem,1.5vw,1.15rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  transform:rotate(-8deg);
  pointer-events:none;
  white-space:nowrap;
}

/* chama — ícone assinatura */
.flame{
  position:absolute;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 0 0 transparent);
}
.flame svg{ width:100%; height:100%; display:block; }

/* ---------- 6. BOTÕES ---------- */
/* Botão "3D": mesma lógica da headline em eco — contorno sólido + cópia deslocada.
   No hover o botão anda até a própria sombra e ela zera, virando o clique. */
.btn{
  --btn-ink:var(--black);   /* cor do contorno + da sombra */
  --btn-off:5px;            /* deslocamento da sombra */

  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.65em;
  padding:1.05em 2.2em;
  border:2.5px solid var(--btn-ink);
  border-radius:999px;
  background:var(--orange);
  color:var(--white);
  font-family:var(--f-body);
  font-size:clamp(.9rem,1.25vw,1.02rem);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  line-height:1.15;
  text-align:center;
  box-shadow:var(--btn-off) var(--btn-off) 0 var(--btn-ink);
  transition:transform .14s ease, box-shadow .14s ease, background .2s ease;
}
.btn:hover,
.btn:focus-visible{
  background:var(--orange-deep);
  transform:translate(var(--btn-off), var(--btn-off));
  box-shadow:0 0 0 var(--btn-ink);
}
.btn:active{
  transform:translate(var(--btn-off), var(--btn-off));
  box-shadow:0 0 0 var(--btn-ink);
}
.btn:focus-visible{ outline:3px solid var(--white); outline-offset:4px; }
.btn svg{ flex:none; transition:transform .2s ease; }
.btn:hover svg{ transform:translateX(4px); }

/* em fundo preto a sombra preta sumiria: inverte para branco,
   igual ao carimbo e aos ícones contornados do pptx */
.s-black .btn,
.s-ink .btn,
.nav .btn{ --btn-ink:var(--white); }

.nav .btn{ --btn-off:3px; }

.btn--lg{ --btn-off:6px; padding:1.25em 2.8em; font-size:clamp(.95rem,1.4vw,1.12rem); }
.btn--ink{ background:var(--ink); }
.btn--ink:hover{ background:var(--black); }

.btn-note{
  display:block;
  margin-top:1.1em;
  font-size:var(--t-small);
  letter-spacing:.03em;
  opacity:.72;
}

/* ---------- 7. NAV ---------- */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:rgba(10,9,8,.0);
  border-bottom:1px solid transparent;
  transform:translateY(-100%);
  transition:transform .35s ease, background .35s ease, border-color .35s ease;
}
.nav.is-visible{
  transform:translateY(0);
  background:rgba(12,11,10,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:rgba(255,255,255,.1);
}
.nav__inner{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.nav__logo img{ height:34px; width:auto; }
.nav .btn{ padding:.8em 1.6em; font-size:.78rem; }

/* ---------- 8. HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:calc(var(--nav-h) + clamp(12px,2.6vh,48px)) 0 clamp(36px,5.5vh,110px);
  background:var(--taupe);
  color:var(--white);
  overflow:hidden;
}
/* arcos laranja saindo pela direita — layout do slide de capa */
.hero__arc-1{
  width:min(58vw,720px); height:min(58vw,720px);
  right:-14vw; top:12%;
  background:var(--orange);
}
.hero__arc-2{
  width:min(42vw,520px); height:min(42vw,520px);
  right:-6vw; bottom:-16%;
  background:var(--orange-deep);
  opacity:.55;
}
.hero__logo{
  display:block;
  width:clamp(146px, min(17vw,11vh), 215px);
  margin:0 auto clamp(14px,3.4vh,68px);
}
.hero__eyebrow{
  color:var(--white);
  opacity:.9;
  margin-bottom:clamp(.7em,2vh,1.4em);
}
.hero__title{
  position:relative;
  font-size:var(--t-hero);
  /* 18ch deixa "FORMAÇÃO PRÁTICA" inteiro na 1ª linha: 2 linhas em vez de 3,
     o que sozinho devolve quase uma linha inteira de altura ao hero */
  max-width:18ch;
  margin-bottom:clamp(.25em,1.8vh,.42em);
}
.hero__tagline{
  font-size:clamp(1.25rem, min(3vw,3.4vh), 2.1rem);
  color:var(--white);
  margin-bottom:clamp(.45em,1.8vh,.75em);
  line-height:1.25;
}
.hero__text{
  max-width:52ch;
  margin-bottom:clamp(1.1em,3vh,2.4em);
  color:rgba(255,255,255,.94);
}
.hero__stamp{
  right:var(--gutter);
  bottom:clamp(26px,5vw,52px);
  color:var(--white);
}
.hero__scroll{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:3;
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(255,255,255,.75);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.hero__scroll span{ display:block; width:1px; height:34px; background:currentColor; opacity:.6; animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse{ 0%,100%{ transform:scaleY(.4); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } }

/* em telas baixas o indicador "role" disputa espaço com o botão */
@media (max-height:800px){ .hero__scroll{ display:none; } }

/* ---------- 9. "POR QUE ESTUDAR" ---------- */
.why__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,2.4vw,28px);
  margin:clamp(38px,5vw,56px) 0;
}
.why__card{
  position:relative;
  padding:clamp(28px,3.4vw,40px);
  background:var(--white);
  border-radius:4px;
  overflow:hidden;
}
.why__card-label{
  display:block;
  color:var(--orange-deep);
  margin-bottom:1em;
}
.why__card-text{
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.55;
  font-weight:600;
  margin:0;
}
.why__card .arc{
  width:150px; height:150px;
  right:-52px; bottom:-84px;
  background:var(--orange);
  opacity:.14;
  transform:rotate(18deg);
}
.why__close{
  font-size:clamp(1.1rem,1.9vw,1.42rem);
  line-height:1.5;
  font-weight:600;
  max-width:52ch;
  margin:0;
}
.why__aster{
  width:clamp(180px,26vw,320px);
  height:clamp(180px,26vw,320px);
  right:-6%; top:-8%;
  color:var(--orange);
  opacity:.16;
}

/* ---------- 10. "PARA QUEM É" ---------- */
.who__list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:clamp(34px,4.5vw,50px) 0;
}
/* o item mais longo ocupa a linha inteira: mantém todas as cápsulas em 1 linha */
.who__item:last-child{ grid-column:1 / -1; }
.who__item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  font-weight:600;
}
.who__check{
  flex:none;
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--orange);
  color:var(--white);
}
.who__check svg{ width:14px; height:14px; }
.who__notes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,3vw,44px);
  padding-top:clamp(20px,3vw,32px);
  border-top:1px solid rgba(255,255,255,.14);
}
.who__notes p{ color:rgba(255,255,255,.82); margin:0; }
.who__arc{
  width:min(46vw,540px); height:min(46vw,540px);
  left:-16vw; bottom:-24%;
  background:var(--orange);
  opacity:.13;
}

/* ---------- 11. MÓDULOS ---------- */
.journey__intro{ max-width:58ch; }
.mods{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(30px,4vw,58px) clamp(30px,5vw,72px);
  margin-top:clamp(46px,6vw,74px);
}
.mod{ position:relative; }

/* gravura em arco com o arco laranja deslocado atrás — composição dos posts */
.mod__art{
  position:relative;
  width:min(300px,72%);
  aspect-ratio:4/5;
  margin-bottom:clamp(24px,3vw,34px);
}
.mod__art::before{
  content:"";
  position:absolute;
  inset:18px -18px -18px 18px;
  border-radius:50% 50% 0 0 / 42% 42% 0 0;
  background:var(--orange);
  z-index:0;
}
.mod__art img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50% 50% 0 0 / 42% 42% 0 0;
  filter:grayscale(1) contrast(1.04);
  background:var(--light);
}

.mod__num{
  display:inline-block;
  padding:.42em 1.05em;
  margin-bottom:1.1em;
  border-radius:999px;
  background:var(--orange);
  color:var(--white);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.mod__title{
  font-family:var(--f-serif);
  font-weight:700;
  font-size:var(--t-h3);
  line-height:1.05;
  margin-bottom:.12em;
}
.mod__sub{
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(1rem,1.5vw,1.2rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:1.1em;
}
.mod__hook{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.45;
  color:var(--orange-deep);
  margin-bottom:1.2em;
}
.mod__body{
  text-align:justify;
  hyphens:auto;
  /* evita separações feias tipo "a-inda": mínimo de letras por fragmento */
  hyphenate-limit-chars:7 4 3;
  color:#463F3A;
  font-size:.97rem;
}
.mod__rule{
  width:52px; height:3px;
  background:var(--ink);
  margin-bottom:1.5em;
}
.journey__aster{
  width:clamp(200px,24vw,340px);
  height:clamp(200px,24vw,340px);
  left:-8%; bottom:4%;
  color:var(--taupe);
  opacity:.1;
}

/* ---------- 12. "O QUE VOCÊ TERÁ ACESSO" ---------- */
.access__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(30px,4vw,52px);
  margin:clamp(44px,5.5vw,66px) 0;
}
.access__item{ display:flex; flex-direction:column; gap:16px; }
.access__icon{
  width:56px; height:56px;
  color:var(--white);
}
.access__icon svg{ width:100%; height:100%; display:block; }
.access__name{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:1.18rem;
  letter-spacing:.03em;
  line-height:1.1;
}
.access__desc{ color:rgba(255,255,255,.72); font-size:.95rem; margin:0; }
.access__close{
  text-align:center;
  padding-top:clamp(22px,3vw,36px);
  border-top:1px solid rgba(255,255,255,.14);
}
.access__close p{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(1.1rem,2vw,1.5rem);
  line-height:1.45;
  max-width:40ch;
  margin:0 auto 1.8em;
  color:rgba(255,255,255,.94);
}
.access__arc{
  width:min(50vw,600px); height:min(50vw,600px);
  right:-18vw; top:-22%;
  background:var(--orange);
  opacity:.1;
}

/* ---------- 13. DIFERENCIAL ---------- */
.diff__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(34px,5vw,70px);
  align-items:start;
}
.diff__body p{ color:rgba(255,255,255,.9); }
.diff__quote{
  position:relative;
  padding:clamp(30px,4vw,44px);
  background:rgba(0,0,0,.3);
  border-radius:4px;
}
.diff__mark{
  font-family:var(--f-serif);
  font-weight:700;
  font-size:5.5rem;
  line-height:.75;
  color:var(--orange);
  display:block;
  margin-bottom:.12em;
}
.diff__quote p{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(1.25rem,2.3vw,1.75rem);
  line-height:1.4;
  color:var(--white);
  margin:0;
}
.diff__arc{
  width:min(40vw,470px); height:min(40vw,470px);
  right:-14vw; bottom:-30%;
  background:var(--ink);
  opacity:.28;
}

/* ---------- 14. PROFESSORES ---------- */
/* mesmo motivo do result__list: 5 professores nunca fecham a última linha,
   então flex centralizado em vez de grid */
.profs__grid{
  --cols:5;
  --gap:clamp(14px,1.8vw,22px);
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap);
  margin-top:clamp(40px,5vw,58px);
}
.prof{
  flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
/* faixa laranja atrás das fotos — layout do slide de equipe */
.profs__grid::before{
  content:"";
  position:absolute;
  left:calc(var(--gutter) * -1);
  right:calc(var(--gutter) * -1);
  top:24%;
  height:46%;
  background:var(--orange);
  z-index:0;
}
.prof{ position:relative; z-index:1; }
.prof__photo{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  background:var(--ink-soft);
}
.prof__name{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(.95rem,1.5vw,1.15rem);
  letter-spacing:.02em;
  line-height:1.08;
  margin:14px 0 5px;
}
.prof__role{
  font-family:var(--f-serif);
  font-size:.82rem;
  line-height:1.35;
  color:rgba(255,255,255,.72);
  margin:0;
}

/* ---------- 15. POR QUE A ESCOLA ---------- */
.school__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(26px,3.4vw,44px);
  margin-top:clamp(34px,4.4vw,52px);
}
.school__card{
  padding:clamp(26px,3.2vw,36px);
  /* clareia em vez de escurecer: texto escuro sobre laranja escurecido não atinge 4.5:1 */
  background:rgba(255,255,255,.2);
  border-radius:4px;
}
.school__card p{ margin:0; font-weight:500; }
.school__arc{
  width:min(46vw,540px); height:min(46vw,540px);
  left:-16vw; top:-30%;
  background:var(--taupe);
  opacity:.4;
}
.school__aster{
  width:clamp(150px,18vw,240px);
  height:clamp(150px,18vw,240px);
  right:4%; bottom:-6%;
  color:var(--ink);
  opacity:.12;
}

/* ---------- 16. RESULTADOS ---------- */
/* flex em vez de grid: são 5 itens em 3 colunas, e o grid deixaria os 2 da
   última linha encostados à esquerda. Com flex + justify-content:center a
   linha incompleta centraliza sozinha. */
.result__list{
  --cols:3;
  --gap:clamp(16px,2.2vw,26px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap);
  margin-top:clamp(38px,5vw,54px);
}
.result__item{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:clamp(22px,2.6vw,28px);
  background:var(--white);
  border-radius:4px;
  flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
.result__aster{
  flex:none;
  width:26px; height:26px;
  color:var(--orange);
  margin-top:2px;
}
.result__aster svg{ width:100%; height:100%; display:block; }
.result__item p{
  margin:0;
  font-weight:600;
  font-size:1.02rem;
  line-height:1.45;
  text-wrap:pretty;
}

/* ---------- 17. CTA FINAL ---------- */
.final{ text-align:center; }
.final__logo{
  width:clamp(150px,15vw,190px);
  margin:0 auto clamp(36px,5vw,52px);
}
.final__title{
  font-size:clamp(2.3rem,7vw,5rem);
  max-width:16ch;
  margin:0 auto .6em;
}
.final__text{
  font-size:var(--t-lead);
  max-width:50ch;
  margin:0 auto 1.1em;
  color:rgba(255,255,255,.88);
}
.final__kicker{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(1.25rem,2.6vw,1.85rem);
  color:var(--orange);
  margin:0 auto 2.4em;
}
.final__arc-1{
  width:min(56vw,660px); height:min(56vw,660px);
  left:50%; transform:translateX(-50%);
  bottom:-38%;
  background:var(--orange);
  opacity:.18;
}
.final__flame{
  position:relative;
  width:clamp(44px,6vw,64px);
  height:clamp(44px,6vw,64px);
  margin:0 auto clamp(22px,3vw,30px);
  color:var(--orange);
}
.final__flame svg{ width:100%; height:100%; display:block; }
.final__stamp{
  left:var(--gutter);
  top:clamp(30px,6vw,64px);
  color:rgba(255,255,255,.4);
}

/* ---------- 18. RODAPÉ ---------- */
.footer{
  background:var(--black);
  color:rgba(255,255,255,.55);
  padding:clamp(40px,5vw,58px) 0;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--t-small);
}
.footer__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.footer__logo{ width:150px; opacity:.85; }
.footer p{ margin:0; }

/* ---------- 19. REVEAL ----------
   Só esconde quando o JS está ativo (.js no <html>). Sem JS, ou se o script
   falhar, o conteúdo continua visível — a animação é enfeite, nunca requisito. */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
}

/* Trava: .reveal em cima de .btn sobrescrevia a transição do botão (box-shadow ficava
   sem transição = sombra sumia de supetão) e o transform:none do .is-in anulava o
   deslocamento do clique. Estas regras devolvem o controle ao botão. */
.js .btn.reveal{
  transition:transform .14s ease, box-shadow .14s ease, background .2s ease, opacity .6s ease;
}
.js .btn.reveal.is-in{ transform:none; }
.js .btn.reveal.is-in:hover,
.js .btn.reveal.is-in:focus-visible,
.js .btn.reveal.is-in:active{
  transform:translate(var(--btn-off), var(--btn-off));
  box-shadow:0 0 0 var(--btn-ink);
}

/* ---------- 20. RESPONSIVO ---------- */
@media (max-width:900px){
  :root{ --echo:5px; }
  .who__list{ grid-template-columns:repeat(2,1fr); }
  .diff__grid{ grid-template-columns:1fr; }
  .profs__grid{ --cols:3; }
  .result__list{ --cols:2; }
  /* a faixa laranja foi desenhada para uma única fileira de fotos;
     a partir daqui são duas, então ela sai */
  .profs__grid::before{ display:none; }
}

@media (max-width:640px){
  /* No celular o vh é generoso e o vw é apertado, então o título encolhia até o
     piso e sobrava folga nas pontas. Aqui ele passa a ser guiado pela largura
     (11.5vw ≈ 83%→97% da coluna) e o respiro vai para dentro do conteúdo. */
  :root{ --echo:4px; --nav-h:62px; --t-hero:clamp(2rem, 11.5vw, 3rem); }
  .echo{ -webkit-text-stroke-width:1.5px; }
  .hero__title{ max-width:none; margin-bottom:.34em; }
  .hero__arc-1{ right:-30vw; top:auto; bottom:-6%; opacity:.85; }
  .hero__arc-2{ display:none; }
  .hero__scroll{ display:none; }
  /* o botão é full-width no celular, então o carimbo não cabe ao lado dele:
     vai para a folga abaixo, encostado à direita */
  .hero__stamp{ left:auto; right:var(--gutter); bottom:clamp(12px,2.5vh,30px); font-size:.76rem; }
  .who__list{ grid-template-columns:1fr; }
  .btn{ width:100%; justify-content:center; padding-left:1.2em; padding-right:1.2em; }
  .btn--lg{ padding-top:1.15em; padding-bottom:1.15em; }
  .nav .btn{ width:auto; padding:.8em 1.3em; }
  .mod__body{ text-align:left; }
  .profs__grid{ --cols:2; }
  .result__list{ --cols:1; }
  .footer__inner{ flex-direction:column; text-align:center; }
}

/* Celular ALTO (iPhone padrão pra cima): sobra altura no hero, então o respiro
   vai para dentro do conteúdo em vez de virar vazio nas pontas. */
@media (max-width:640px) and (min-height:700px){
  .hero__logo{ width:172px; margin-bottom:clamp(28px,7vh,76px); }
  .hero__eyebrow{ margin-bottom:clamp(1.3em,2.6vh,2.2em); }
  .hero__tagline{ margin-bottom:clamp(.8em,2.4vh,1.4em); }
  .hero__text{ margin-bottom:clamp(1.7em,5.5vh,3.4em); }
}

/* Celular BAIXO: não há folga — o carimbo encostaria no botão. */
@media (max-width:640px) and (max-height:699px){
  .hero__stamp{ display:none; }
}