/* ============================================================
   INTELIGÊNCIA X — v2
   Conceito: o X não é ornamento. É a grade.
   As diagonais da marca definem cortes, eixos e ritmo.

   DESIGN_VARIANCE 9 · MOTION 7 · DENSITY 3
   ============================================================ */

:root{
  /* Paleta oficial */
  --cacau:      #2A201C;
  --castanho:   #735247;
  --terracota:  #D97757;
  --pessego:    #E8A07A;
  --osso:       #F2F0E8;

  /* Base em cinza chumbo, neutro levemente frio.
     O terracota da marca fica sendo o único acento. */
  --n900: #131416;
  --n850: #17191C;
  --n800: #1D2023;
  --n700: #24272B;
  --n600: #2F3338;
  --n500: #3C4147;

  --terracota-fundo: #C85E40;
  --terracota-luz:   #F0AA88;

  /* Texto — pisos verificados para 4.5:1 sobre --n900 */
  --t1: #F2F0E8;
  --t2: rgba(242,240,232,.74);
  --t3: rgba(242,240,232,.58);
  --t4: rgba(242,240,232,.54);

  --fio:   rgba(242,240,232,.09);
  --fio-2: rgba(242,240,232,.17);

  --display: 'Sora', system-ui, -apple-system, sans-serif;
  --texto:   'Inter', system-ui, -apple-system, sans-serif;

  --max:  1320px;
  --lat:  clamp(20px, 4.5vw, 64px);
  /* Respiro entre seções: reduzido para eliminar os vãos mortos. */
  --resp: clamp(64px, 7vw, 104px);

  /* O ângulo do X governa todos os cortes diagonais */
  --ang: 8deg;

  --mola:  cubic-bezier(.34, 1.4, .5, 1);
  --saida: cubic-bezier(.16, 1, .3, 1);
}

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

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

body{
  margin:0;
  background:var(--n900);
  color:var(--t2);
  font-family:var(--texto);
  font-size:clamp(15.5px, .4vw + 14.7px, 17px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:200; color:var(--t1); letter-spacing:-.03em; line-height:1.06; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
strong{ color:var(--t1); font-weight:500; }
em{ font-style:normal; }
dl,dd{ margin:0; }

/* Grão fixo, fora do fluxo de rolagem */
body::after{
  content:'';
  position:fixed; inset:0;
  z-index:9;
  pointer-events:none;
  opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--terracota); color:var(--n900);
  padding:14px 22px; font-weight:600;
}
.pular:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--pessego);
  outline-offset:4px;
}

.int{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--lat);
  position:relative;
}

.secao{ padding-block:var(--resp); position:relative; }

/* ============================================================
   PROGRESSO DE LEITURA
   ============================================================ */
.progresso{
  position:fixed; inset:0 0 auto 0;
  height:2px; z-index:120;
  background:transparent;
  pointer-events:none;
}
.progresso span{
  display:block; height:100%;
  width:100%;
  background:linear-gradient(90deg,var(--terracota-fundo),var(--terracota),var(--pessego));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .1s linear;
}

/* ============================================================
   CABEÇALHO
   ============================================================ */
.topo{
  position:fixed; inset:2px 0 auto 0; z-index:110;
  background:rgba(19,20,22,.55);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--saida), border-color .5s var(--saida);
}
.topo.fixo{
  background:rgba(19,20,22,.93);
  border-bottom-color:var(--fio);
}
.topo-int{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding:0 var(--lat);
  min-height:78px;
  display:flex; align-items:center; gap:clamp(16px,3vw,48px);
}
.marca{ flex:0 0 auto; }
.marca img{ height:clamp(24px,2.3vw,30px); width:auto; }

.nav{
  display:flex; align-items:center; gap:clamp(14px,2vw,30px);
  margin-left:auto;
}
.nav a{
  display:inline-flex; align-items:baseline; gap:7px;
  font-size:13.5px;
  color:var(--t3);
  text-decoration:none;
  padding-block:8px;
  position:relative;
  transition:color .35s var(--saida);
}
.nav-idx{
  font-family:var(--display);
  font-size:9.5px; font-weight:400;
  letter-spacing:.1em;
  color:var(--terracota);
  opacity:.55;
  font-variant-numeric:tabular-nums;
  transition:opacity .35s var(--saida);
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--terracota);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--saida);
}
.nav a:hover, .nav a.atual{ color:var(--t1); }
.nav a:hover .nav-idx, .nav a.atual .nav-idx{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav a.atual::after{ transform:scaleX(1); opacity:.45; }

.btn-nav{ flex:0 0 auto; padding:11px 22px; font-size:13px; }

.menu-btn{
  display:none;
  width:46px; height:46px;
  margin-left:auto;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px;
  padding:0;
}
.menu-btn span{
  display:block; height:1.5px; width:24px; margin-inline:auto;
  background:var(--t1);
  transition:transform .45s var(--mola), opacity .25s var(--saida);
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }

/* Menu em tela cheia.
   [hidden] precisa vencer o display:flex, senão o menu cobre
   a página inteira permanentemente. */
.menu-mob{
  position:fixed; inset:0; z-index:105;
  background:var(--n850);
  display:flex; flex-direction:column; justify-content:center;
  padding:100px var(--lat) 48px;
}
.menu-mob[hidden]{ display:none; }
.menu-mob nav{ display:flex; flex-direction:column; }
.menu-mob nav a{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--display);
  font-size:clamp(26px,8vw,40px);
  font-weight:200;
  letter-spacing:-.03em;
  color:var(--t1);
  text-decoration:none;
  padding:14px 0;
  border-bottom:1px solid var(--fio);
}
.menu-mob nav a span{
  font-size:11px; font-weight:400;
  color:var(--terracota);
  font-variant-numeric:tabular-nums;
  letter-spacing:.12em;
}
.menu-rodape{
  margin-top:auto; padding-top:36px;
  display:flex; justify-content:space-between;
  font-size:13px; color:var(--t3);
  letter-spacing:.04em;
}
.menu-rodape span{ color:var(--terracota); }

/* ============================================================
   BOTÕES — preenchimento diagonal, no ângulo do X
   ============================================================ */
.btn{
  /* --mx/--my: posição do cursor, escritas pelo JS.
     --px/--py: deslocamento magnético do botão inteiro. */
  --mx:50%; --my:50%;
  --px:0px; --py:0px;

  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(145deg, var(--terracota) 0%, var(--terracota-fundo) 100%);
  color:#17110F;
  font-family:var(--texto);
  font-weight:600;
  font-size:14px;
  letter-spacing:.015em;
  /* Mais estreito na altura, cantos suaves. */
  padding:13px 30px;
  text-decoration:none;
  border:0;
  border-radius:999px;
  cursor:pointer;
  /* Borda interna clara = refração; sombra tingida do próprio matiz. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 6px -2px rgba(0,0,0,.4),
    0 14px 30px -16px rgba(200,94,64,.8);
  transform:translate3d(var(--px), var(--py), 0);
  transition:transform .45s var(--mola),
             box-shadow .45s var(--saida);
  will-change:transform;
}
.btn > span{
  position:relative; z-index:3;
  display:inline-block;
  transition:transform .45s var(--mola);
}

/* Luz que segue o cursor */
.btn::before{
  content:'';
  position:absolute; inset:0;
  z-index:1;
  background:radial-gradient(circle 130px at var(--mx) var(--my),
    rgba(255,232,214,.55), transparent 62%);
  opacity:0;
  transition:opacity .45s var(--saida);
}
/* Varredura diagonal, no ângulo do X */
.btn::after{
  content:'';
  position:absolute; inset:-40%;
  z-index:2;
  background:linear-gradient(100deg,
    transparent 34%,
    rgba(255,255,255,.42) 50%,
    transparent 66%);
  transform:translate3d(-130%,0,0) rotate(var(--ang));
  transition:transform .85s var(--saida);
  pointer-events:none;
}

.btn:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 4px 10px -3px rgba(0,0,0,.45),
    0 26px 52px -20px rgba(232,160,122,.9);
}
.btn:hover::before{ opacity:1; }
.btn:hover::after{ transform:translate3d(130%,0,0) rotate(var(--ang)); }
/* O texto resiste um pouco ao movimento: sensação de massa. */
.btn:hover > span{ transform:translate3d(calc(var(--px) * -.28), calc(var(--py) * -.28), 0); }

.btn:active{
  transform:translate3d(var(--px), var(--py), 0) scale(.975);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.22),
    0 6px 16px -8px rgba(200,94,64,.6);
}

.btn-g{ padding:16px 40px; font-size:15px; }
.btn-cheio{ display:flex; width:100%; }

/* Variante em vidro: usada sobre a foto do hero, onde um bloco
   sólido pesa demais. Refração real com borda interna dupla. */
.btn-vidro{
  background:rgba(217,119,87,.16);
  backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  color:var(--t1);
  border:1px solid rgba(240,170,136,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 10px 30px -14px rgba(0,0,0,.6);
}
.btn-vidro::before{
  background:radial-gradient(circle 150px at var(--mx) var(--my),
    rgba(240,170,136,.42), transparent 64%);
}
.btn-vidro::after{
  background:linear-gradient(100deg,
    transparent 36%, rgba(255,255,255,.24) 50%, transparent 64%);
}
.btn-vidro:hover{
  background:rgba(217,119,87,.26);
  border-color:rgba(240,170,136,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 16px 40px -16px rgba(0,0,0,.65);
}

.micro{
  margin-top:15px;
  font-size:13px;
  color:var(--t3);
}

/* Link com seta */
.link-seta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:500;
  color:var(--terracota);
  text-decoration:none;
  padding:12px 0;
  transition:gap .4s var(--saida), color .3s var(--saida);
}
.link-seta svg{ width:16px; height:16px; }
.link-seta:hover{ gap:16px; color:var(--pessego); }

/* ============================================================
   CABEÇALHO DE SEÇÃO
   ============================================================ */
/* Rótulo de seção: número e nome, sem risco intermediário. */
.cab{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:clamp(22px,2.6vw,34px);
  padding-bottom:14px;
  border-bottom:1px solid var(--fio);
}
.cab-num{
  font-family:var(--display);
  font-size:11px; font-weight:400;
  color:var(--terracota);
  font-variant-numeric:tabular-nums;
  letter-spacing:.12em;
}
.cab-rot{
  font-size:10.5px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--t3);
}
.cab-claro .cab-rot{ color:var(--t2); }

.manchete{
  font-size:clamp(30px,5.4vw,68px);
  max-width:17ch;
  line-height:1.04;
}
.manchete em{ color:var(--terracota); }
.manchete-md{ font-size:clamp(27px,3.9vw,50px); max-width:19ch; }

/* Nome da marca com o X em terracota, como na assinatura oficial. */
.marca-nome{
  font-family:var(--display);
  font-weight:300;
  color:var(--t1);
  letter-spacing:.01em;
  white-space:nowrap;
}
.marca-nome em{
  color:var(--terracota);
  font-weight:400;
}
.manchete .marca-nome{
  font-weight:inherit;
  letter-spacing:inherit;
}

/* Selo em linha */
.selo-linha{
  margin-top:clamp(38px,5vw,62px);
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(16px,1.7vw,21px);
  font-weight:300;
  color:var(--t1);
  padding:18px 0 18px 26px;
  border-left:2px solid var(--terracota);
  text-wrap:balance;
}

/* ============================================================
   01 · ABERTURA
   ============================================================ */
.abertura{
  position:relative;
  min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(130px,17vh,180px);
  padding-bottom:0;
  overflow:hidden;
  background:var(--n900);
}
.abertura-fundo{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
}
.abertura-fundo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center right;
  animation:respirar 20s ease-in-out infinite;
  will-change:transform;
}
@keyframes respirar{
  0%,100%{ transform:scale(1.01); }
  50%    { transform:scale(1.05); }
}
/* Véu: protege o texto à esquerda, poupa o brilho do X */
.abertura-fundo::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(97deg,
      rgba(19,20,22,.97) 0%,
      rgba(19,20,22,.95) 30%,
      rgba(19,20,22,.84) 47%,
      rgba(19,20,22,.44) 63%,
      rgba(19,20,22,.10) 79%,
      rgba(19,20,22,0)   92%),
    linear-gradient(180deg,
      rgba(19,20,22,.62) 0%,
      rgba(19,20,22,0)   24%,
      rgba(19,20,22,0)   58%,
      var(--n900)        99%);
}

.abertura-int{
  position:relative; z-index:2;
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--lat);
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(30px,5vh,60px);
}

/* Título com revelação por linha (máscara) */
.titulo-mor{
  font-size:clamp(35px,6.4vw,86px);
  font-weight:100;
  line-height:1.02;
  letter-spacing:-.042em;
  max-width:15ch;
}
.titulo-mor em{ color:var(--terracota); font-weight:200; }
.titulo-mor .linha{
  display:block;
  overflow:hidden;
}
.titulo-mor .linha > span{
  display:block;
}
/* A animação parte do estado final: sem JS, o texto está visível. */
.js .titulo-mor .linha > span{
  animation:subir-linha 1.05s var(--saida) both;
  animation-delay:calc(var(--i,0) * 90ms + 120ms);
}
@keyframes subir-linha{
  from{ transform:translate3d(0,102%,0); }
  to  { transform:translate3d(0,0,0); }
}

.abertura-base{
  margin-top:clamp(30px,5vh,54px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,5vw,72px);
  align-items:end;
}
.abertura-texto{
  max-width:50ch;
  font-size:clamp(15.5px,1.15vw,17.5px);
  color:var(--t2);
}
.abertura-acao{ flex:0 0 auto; }

/* Faixa de dados: cortada pela diagonal */
.faixa-dados{
  position:relative; z-index:2;
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding:0 var(--lat);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--fio-2);
}
/* Respiro simétrico dos dois lados da divisória: o texto nunca
   encosta no fio. A primeira coluna alinha com a margem. */
.faixa-dados > div{
  padding:24px clamp(24px,2.6vw,40px) 28px;
  border-right:1px solid var(--fio);
}
.faixa-dados > div:first-child{ padding-left:0; }
.faixa-dados > div:last-child{ border-right:0; }
.faixa-dados dt{
  font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--terracota);
  margin-bottom:10px;
}
.faixa-dados dd{
  font-family:var(--display);
  font-size:clamp(16px,1.6vw,21px);
  font-weight:300;
  color:var(--t1);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.faixa-dados .dia{
  display:block;
  margin-top:5px;
  font-family:var(--texto);
  font-size:12px;
  font-weight:400;
  letter-spacing:.05em;
  color:var(--t3);
}

/* ============================================================
   02 · MÉTODO — corte diagonal no topo
   ============================================================ */
.secao-metodo{
  background:var(--n850);
  border-top:1px solid var(--fio);
}
.metodo-corpo{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,6vw,90px);
  align-items:start;
  margin-top:clamp(34px,5vw,58px);
}
.metodo-texto{ display:grid; gap:22px; font-size:1.02em; }

.antitese{
  padding-left:clamp(22px,3vw,40px);
  border-left:1px solid var(--fio-2);
}
.antitese-nao{
  font-size:15.5px;
  color:var(--t3);
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid var(--fio);
}
/* O risco acompanha só o texto, não a largura da coluna. */
.antitese-nao > span{
  text-decoration:line-through;
  text-decoration-color:var(--castanho);
  text-decoration-thickness:1px;
}
.antitese-sim{
  font-family:var(--display);
  font-size:clamp(21px,2.5vw,33px);
  font-weight:200;
  line-height:1.22;
  letter-spacing:-.028em;
  color:var(--t1);
}
.antitese-sim em{ color:var(--terracota); }

/* ============================================================
   03 · PÚBLICO — lista numerada com deslocamento progressivo
   ============================================================ */
/* Lista alinhada em coluna fixa: número e texto sempre no mesmo
   eixo. O movimento fica na interação, não no layout. */
.perfis{
  margin-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--fio);
}
.perfis li{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:clamp(14px,2vw,28px);
  align-items:baseline;
  padding:clamp(17px,1.9vw,23px) 18px;
  border-bottom:1px solid var(--fio);
  overflow:hidden;
  transition:background-color .45s var(--saida);
}
/* Preenchimento que entra pela esquerda, no lugar do salto de padding */
.perfis li::before{
  content:'';
  position:absolute; inset:0 auto 0 0;
  width:100%;
  background:linear-gradient(90deg, rgba(217,119,87,.09), transparent 72%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--saida);
}
/* Fio terracota que cresce na borda esquerda */
.perfis li::after{
  content:'';
  position:absolute; inset:0 auto 0 0;
  width:2px;
  background:var(--terracota);
  transform:scaleY(0); transform-origin:center;
  transition:transform .45s var(--saida);
}
.perfis li:hover::before{ transform:scaleX(1); }
.perfis li:hover::after{ transform:scaleY(1); }
.perfis li:hover .perfil-n{ opacity:1; }
.perfis li:hover p{ color:var(--t1); }

.perfil-n{
  font-family:var(--display);
  font-size:12px; font-weight:400;
  color:var(--terracota);
  font-variant-numeric:tabular-nums;
  letter-spacing:.1em;
  opacity:.72;
  position:relative; z-index:1;
  transition:opacity .4s var(--saida);
}
.perfis p{
  font-size:clamp(15.5px,1.45vw,19px);
  color:var(--t2);
  max-width:56ch;
  line-height:1.55;
  position:relative; z-index:1;
  transition:color .4s var(--saida);
}

/* ============================================================
   04 · EIXOS — grade de conteúdo
   ============================================================ */
.secao-eixos{
  background:var(--n850);
  border-block:1px solid var(--fio);
}
.eixos-intro{
  max-width:54ch;
  margin-top:-6px;
  margin-bottom:clamp(28px,3.4vw,44px);
  color:var(--t3);
}

/* Tudo à vista de uma vez: o conteúdo é o argumento central
   da página e não pode depender de arrastar para aparecer. */
.eixos-grade{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--fio);
  border:1px solid var(--fio);
}
.eixo{
  --spot-x:50%; --spot-y:50%;
  position:relative;
  background:var(--n850);
  padding:clamp(24px,2.4vw,32px) clamp(20px,2vw,28px) clamp(28px,2.8vw,36px);
  display:flex; flex-direction:column;
  gap:11px;
  overflow:hidden;
  transition:background-color .5s var(--saida);
}
/* Holofote que segue o cursor pela grade inteira */
.eixo::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(circle 240px at var(--spot-x) var(--spot-y),
    rgba(217,119,87,.10), transparent 70%);
  opacity:0;
  transition:opacity .45s var(--saida);
}
.eixo::before{
  content:'';
  position:absolute; left:0; top:0; right:0;
  height:2px;
  background:linear-gradient(90deg,var(--terracota),var(--terracota-fundo));
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--saida);
}
.eixo:hover{ background:var(--n800); }
.eixo:hover::before{ transform:scaleX(1); }
.eixo:hover::after{ opacity:1; }

.eixo-n{
  font-family:var(--display);
  font-size:11px; font-weight:400;
  color:var(--terracota);
  letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
  opacity:.8;
}
.eixo h3{
  font-size:clamp(17px,1.45vw,19.5px);
  font-weight:300;
  line-height:1.24;
  letter-spacing:-.022em;
  position:relative; z-index:1;
}
.eixo p{
  font-size:14px;
  line-height:1.62;
  color:var(--t3);
  position:relative; z-index:1;
}
.eixo-forte{
  background:linear-gradient(155deg, rgba(217,119,87,.15), rgba(217,119,87,.04));
}
.eixo-forte:hover{ background:linear-gradient(155deg, rgba(217,119,87,.21), rgba(217,119,87,.07)); }
.eixo-forte h3{ color:var(--pessego); }

/* ============================================================
   PREPARO — cards com ícone
   ============================================================ */
.cards-preparo{
  margin-top:clamp(26px,3vw,40px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1px;
  background:var(--fio);
  border:1px solid var(--fio);
}
.cartao{
  --spot-x:50%; --spot-y:50%;
  position:relative;
  background:var(--n900);
  padding:clamp(26px,2.6vw,34px) clamp(22px,2.2vw,28px) clamp(28px,2.8vw,36px);
  display:flex; flex-direction:column; gap:12px;
  overflow:hidden;
  transition:background-color .45s var(--saida);
}
.cartao::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(circle 200px at var(--spot-x) var(--spot-y),
    rgba(217,119,87,.10), transparent 70%);
  opacity:0;
  transition:opacity .45s var(--saida);
}
.cartao:hover{ background:var(--n800); }
.cartao:hover::after{ opacity:1; }
.cartao-ico{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid rgba(217,119,87,.30);
  border-radius:50%;
  color:var(--terracota);
  margin-bottom:4px;
  transition:border-color .45s var(--saida), transform .5s var(--mola),
             background-color .45s var(--saida);
}
.cartao-ico svg{ width:20px; height:20px; }
.cartao:hover .cartao-ico{
  border-color:rgba(217,119,87,.6);
  background:rgba(217,119,87,.10);
  transform:translateY(-2px);
}
.cartao h3{
  font-size:clamp(16.5px,1.35vw,18.5px);
  font-weight:300;
  line-height:1.26;
  letter-spacing:-.02em;
  position:relative; z-index:1;
}
.cartao p{
  font-size:14px;
  line-height:1.62;
  color:var(--t3);
  position:relative; z-index:1;
}

/* ============================================================
   05 · SAÍDA
   ============================================================ */
.saida-grade{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,6vw,88px);
  align-items:start;
}
.saidas{ display:grid; }
.saidas li{
  display:flex; align-items:baseline; gap:16px;
  padding:17px 0;
  border-bottom:1px solid var(--fio);
  font-size:clamp(15.5px,1.4vw,18px);
  color:var(--t2);
}
.saidas li:first-child{ border-top:1px solid var(--fio); }
.saidas li::before{
  content:'';
  flex:0 0 auto;
  width:9px; height:9px;
  /* Micro-X: a marca reduzida ao seu mínimo */
  background:
    linear-gradient(45deg,transparent 43%,var(--terracota) 43%,var(--terracota) 57%,transparent 57%),
    linear-gradient(-45deg,transparent 43%,var(--terracota) 43%,var(--terracota) 57%,transparent 57%);
  transform:translateY(-1px);
}

/* ============================================================
   06 · O DIA — eixo temporal
   ============================================================ */
.secao-dia{
  background:var(--n850);
  border-block:1px solid var(--fio);
}
.agenda{
  margin-top:clamp(34px,5vw,58px);
  position:relative;
}
.agenda::before{
  content:'';
  position:absolute;
  left:clamp(52px,6.2vw,86px); top:14px; bottom:14px;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--fio-2) 6%,var(--fio-2) 94%,transparent);
}
.ag{
  position:relative;
  display:grid;
  grid-template-columns:clamp(52px,6.2vw,86px) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);
  padding:clamp(20px,2.3vw,30px) 0;
  align-items:start;
}
.ag::after{
  content:'';
  position:absolute;
  left:clamp(52px,6.2vw,86px); top:calc(clamp(20px,2.3vw,30px) + 11px);
  width:7px; height:7px;
  margin-left:-3px;
  background:var(--n850);
  border:1.5px solid var(--terracota);
  border-radius:50%;
  transition:background-color .4s var(--saida), transform .45s var(--mola);
}
.ag:hover::after{ background:var(--terracota); transform:scale(1.35); }

/* Hora com hh/mm empilhados */
.ag-h{
  display:flex; align-items:baseline; gap:3px;
  font-family:var(--display);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;
  line-height:1;
  justify-content:flex-end;
  padding-right:clamp(14px,1.6vw,22px);
}
.ag-hh{
  font-size:clamp(25px,2.8vw,38px);
  font-weight:200;
  color:var(--terracota);
}
.ag-mm{
  font-size:clamp(12px,1.1vw,15px);
  font-weight:400;
  color:var(--t3);
}
.ag-txt h3{
  font-size:clamp(17.5px,1.6vw,21px);
  font-weight:300;
  letter-spacing:-.022em;
  margin-bottom:8px;
}
.ag-txt p{
  font-size:15px;
  color:var(--t3);
  line-height:1.66;
  max-width:56ch;
}
/* Pausa e encerramento recuam pela cor, nunca por opacity */
.ag-pausa .ag-hh, .ag-fim .ag-hh{ color:var(--castanho); }
.ag-pausa::after, .ag-fim::after{ border-color:var(--castanho); }
.ag-pausa .ag-txt h3, .ag-fim .ag-txt h3{ color:var(--t2); }

.rodape-nota{
  margin-top:clamp(30px,4vw,46px);
  padding-left:calc(clamp(52px,6.2vw,86px) + clamp(24px,3.4vw,52px));
  font-size:13.5px;
  color:var(--t4);
  max-width:60ch;
}

/* ============================================================
   07 · PREPARO
   ============================================================ */

/* ============================================================
   08 · LOGÍSTICA — números grandes
   ============================================================ */
.log-grade{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--fio);
  border:1px solid var(--fio);
}
.log-bloco{
  background:var(--n900);
  padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,34px) clamp(30px,3.4vw,44px);
}
.log-bloco-largo{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px clamp(24px,4vw,64px);
  align-items:end;
}
.log-rot{
  display:block;
  font-size:10px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--terracota);
  margin-bottom:16px;
}
.log-val{
  font-family:var(--display);
  font-size:clamp(19px,1.9vw,24px);
  font-weight:300;
  color:var(--t1);
  letter-spacing:-.02em;
}
.log-val-g{
  font-size:clamp(40px,5.4vw,76px);
  font-weight:100;
  line-height:.92;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}
.log-val-g span{ color:var(--terracota); font-weight:200; }
/* Unidade em escala menor, para não competir com o número. */
.log-un{
  font-size:.42em;
  font-weight:200;
  letter-spacing:0;
  margin-left:.06em;
}
/* Turma não é número: entra como palavra, na mesma altura óptica. */
.log-val-m{
  font-size:clamp(30px,3.6vw,50px);
  font-weight:100;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--t1);
}
.log-sub{
  margin-top:12px;
  font-size:13px;
  color:var(--t3);
  letter-spacing:.02em;
}
.log-end{
  margin-top:10px;
  font-size:15px;
  color:var(--t3);
  line-height:1.6;
}
.log-bloco-largo .link-seta{ justify-self:end; }

/* ============================================================
   09 · OFERTA — split screen invertido
   ============================================================ */
.oferta{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  border-top:1px solid var(--fio);
  overflow:hidden;
}
.oferta-grade{
  display:contents;
}
.oferta-esq{
  background:var(--n850);
  padding:var(--resp) clamp(30px,5vw,80px) var(--resp) max(var(--lat), calc((100vw - var(--max)) / 2 + var(--lat)));
  position:relative;
  overflow:hidden;
}
/* Diagonal da marca, quase imperceptível */
.oferta-esq::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(45deg, transparent 48%, rgba(217,119,87,.05) 48%, rgba(217,119,87,.05) 52%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(217,119,87,.05) 48%, rgba(217,119,87,.05) 52%, transparent 52%);
  background-size:180px 180px;
  opacity:.55;
}
.oferta-tit{
  font-size:clamp(26px,3.4vw,44px);
  font-weight:200;
  letter-spacing:-.032em;
  line-height:1.1;
  max-width:16ch;
  position:relative; z-index:1;
}
.oferta-lista{
  margin-top:clamp(32px,4vw,52px);
  position:relative; z-index:1;
}
.oferta-lista li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:baseline;
  padding:18px 0;
  border-bottom:1px solid var(--fio);
  font-size:15px;
  color:var(--t3);
  max-width:44ch;
}
.oferta-lista li:first-child{ border-top:1px solid var(--fio); }
.oferta-lista li span{
  font-family:var(--display);
  font-size:clamp(18px,1.8vw,24px);
  font-weight:200;
  color:var(--terracota);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

.oferta-dir{
  background:var(--n700);
  padding:var(--resp) max(var(--lat), calc((100vw - var(--max)) / 2 + var(--lat))) var(--resp) clamp(30px,5vw,80px);
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
}
.oferta-dir::before{
  content:'';
  position:absolute; inset:0 auto 0 0;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--terracota),transparent);
  opacity:.4;
}
.valor-rot{
  font-size:10.5px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--terracota);
  margin-bottom:14px;
}
.valor-num{
  font-family:var(--display);
  font-size:clamp(76px,11vw,152px);
  font-weight:100;
  line-height:.82;
  letter-spacing:-.06em;
  color:var(--t1);
  font-variant-numeric:tabular-nums;
  display:flex; align-items:flex-start; gap:8px;
}
.cifra{
  font-size:clamp(19px,2vw,30px);
  font-weight:200;
  color:var(--terracota);
  transform:translateY(.55em);
}
.valor-alt{
  margin-top:20px;
  font-family:var(--display);
  font-size:clamp(17px,1.7vw,22px);
  font-weight:200;
  color:var(--t2);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.valor-alt strong{ color:var(--pessego); font-weight:300; }
.valor-nota{
  margin:clamp(26px,3vw,38px) 0 clamp(28px,3.4vw,40px);
  padding-top:clamp(24px,2.6vw,32px);
  border-top:1px solid var(--fio-2);
  font-size:14.5px;
  color:var(--t3);
  line-height:1.66;
  max-width:44ch;
}

/* ============================================================
   10 · FECHO
   ============================================================ */
.fecho{
  padding-block:var(--resp);
  background:
    radial-gradient(78% 58% at 50% 108%, rgba(217,119,87,.13), transparent 66%),
    var(--n900);
  border-top:1px solid var(--fio);
}
/* Citação centralizada, com aspas da marca em terracota. */
.citacao{
  margin:0;
  /* Citação longa (~168 caracteres): faixa de leitura, não de manchete.
     Medida em px, não em ch: na Sora de peso 100 o glifo '0' é estreito,
     então 24ch rendia ~2 palavras por linha e virava uma coluna vertical. */
  max-width:min(100%, 820px);
  margin-inline:auto;
  text-align:center;
  position:relative;
  padding-top:clamp(34px,4vw,54px);
}
.citacao::before{
  content:'“';
  position:absolute; top:-.06em; left:50%;
  transform:translateX(-50%);
  font-family:var(--display);
  font-size:clamp(60px,7vw,104px);
  font-weight:200;
  line-height:1;
  color:var(--terracota);
  opacity:.5;
}
.citacao p{
  font-family:var(--display);
  font-size:clamp(23px,1.05rem + 1.5vw,40px);
  font-weight:100;
  line-height:1.24;
  letter-spacing:-.036em;
  color:var(--t1);
  text-wrap:balance;
}
.citacao em{ color:var(--terracota); font-weight:200; }

.fecho-base{
  margin-top:clamp(34px,4.4vw,58px);
  padding-top:clamp(28px,3.4vw,44px);
  border-top:1px solid var(--fio);
  display:flex; flex-direction:column; align-items:center;
  gap:22px;
  text-align:center;
}
.fecho-txt{ max-width:46ch; font-size:1.02em; }
.fecho-meta{
  font-family:var(--display);
  font-size:13.5px;
  letter-spacing:.05em;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
}
.fecho-meta span{ color:var(--terracota); margin-inline:6px; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{
  background:var(--n850);
  border-top:1px solid var(--fio);
}
.rodape-int{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding:clamp(46px,5vw,68px) var(--lat) clamp(34px,4vw,46px);
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:36px; flex-wrap:wrap;
}
.rodape-marca img{ height:clamp(26px,2.4vw,32px); width:auto; }
.rodape-marca p{
  margin-top:16px;
  font-size:13.5px;
  color:var(--t3);
  letter-spacing:.03em;
}
.rodape-marca span{ color:var(--terracota); margin-inline:5px; }
.rodape-links{ display:flex; flex-direction:column; gap:12px; text-align:right; font-size:13.5px; }
.rodape-links a{
  color:var(--t3); text-decoration:none;
  transition:color .3s var(--saida);
}
.rodape-links a:hover{ color:var(--terracota); }
.rodape-base{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding:20px var(--lat) 26px;
  border-top:1px solid var(--fio);
  font-size:12.5px;
  color:var(--t4);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 28px; flex-wrap:wrap;
}
.rodape-empresa span{ margin-inline:6px; opacity:.6; }

/* ============================================================
   BARRA FIXA (celular)
   ============================================================ */
.barra-fixa{
  position:fixed; inset:auto 0 0 0; z-index:100;
  display:none; align-items:center; justify-content:space-between;
  gap:16px;
  padding:12px var(--lat);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(19,20,22,.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--fio-2);
  transform:translate3d(0,110%,0);
  transition:transform .55s var(--saida);
  will-change:transform;
}
.barra-fixa.ativa{ transform:translate3d(0,0,0); }
.barra-info{ display:flex; flex-direction:column; gap:1px; line-height:1.32; }
.barra-preco{
  font-family:var(--display);
  font-size:16px; font-weight:300;
  color:var(--t1);
  font-variant-numeric:tabular-nums;
}
.barra-preco span{ font-size:12px; color:var(--t3); }
.barra-vagas{
  font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--terracota);
}
.barra-fixa .btn{ padding:13px 24px; font-size:13.5px; }

/* ============================================================
   REVELAÇÃO
   Aditiva: o conteúdo nasce visível. A classe .oculto só é
   aplicada pelo JS, e sempre com caminho garantido de saída.
   ============================================================ */
.js .oculto{
  opacity:0;
  transform:translate3d(0,30px,0);
}
.js .oculto.dentro{
  opacity:1;
  transform:none;
  transition:opacity .9s var(--saida), transform .9s var(--saida);
}

/* Nos navegadores com scroll-driven animation, a rolagem
   comanda diretamente — o JS vira reforço, não requisito. */
@supports (animation-timeline: view()){
  .js .oculto{
    animation:entrar linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 16%;
  }
  .js .oculto.dentro{ animation:none; opacity:1; transform:none; }
}
@keyframes entrar{
  from{ opacity:0; transform:translate3d(0,30px,0); }
  to  { opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1180px){
  .eixos-grade{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:1100px){
  .metodo-corpo,
  .saida-grade{ grid-template-columns:1fr; }
  .antitese{ padding-left:0; border-left:0; padding-top:26px; border-top:1px solid var(--fio-2); }
  .oferta{ grid-template-columns:1fr; }
  .oferta-esq, .oferta-dir{
    padding-inline:var(--lat);
    padding-block:clamp(64px,10vw,96px);
  }
  .oferta-dir::before{ inset:0 0 auto 0; width:auto; height:1px;
    background:linear-gradient(90deg,transparent,var(--terracota),transparent); }
  .log-grade{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
  .nav{ display:none; }
  .btn-nav{ display:none; }
  .menu-btn{ display:flex; }

  .abertura-fundo img{ object-position:74% center; }
  .abertura-fundo::after{
    background:linear-gradient(180deg,
      rgba(19,20,22,.93) 0%,
      rgba(19,20,22,.76) 32%,
      rgba(19,20,22,.84) 64%,
      var(--n900) 100%);
  }
  .abertura-base{ grid-template-columns:1fr; align-items:start; }
  /* Duas colunas: quem abre linha alinha à margem, não a regra
     de :first-child (que só valeria para o primeiro item). */
  .faixa-dados{ grid-template-columns:repeat(2,1fr); }
  .faixa-dados > div{ padding:20px 18px 22px; }
  .faixa-dados > div:nth-child(odd){ padding-left:0; }
  .faixa-dados > div:nth-child(2){ border-right:0; }
  .faixa-dados > div:nth-child(1),
  .faixa-dados > div:nth-child(2){ border-bottom:1px solid var(--fio); }

  .fecho-base{ grid-template-columns:1fr; align-items:start; }
  .log-bloco-largo{ grid-template-columns:1fr; align-items:start; }
  .log-bloco-largo .link-seta{ justify-self:start; }

  .barra-fixa{ display:flex; }
  .rodape{ padding-bottom:84px; }

  .link-seta{ min-height:44px; }
  .rodape-links a{ display:inline-flex; align-items:center; min-height:44px; }
  .rodape-links{ gap:0; text-align:left; }
  .marca{ display:inline-flex; align-items:center; min-height:44px; }
}

@media (max-width:620px){
  .manchete, .manchete-md, .titulo-mor, .citacao, .oferta-tit{ max-width:none; }
  .agenda::before{ display:none; }
  .ag{ grid-template-columns:1fr; gap:6px; }
  .ag::after{ display:none; }
  .ag-h{ justify-content:flex-start; padding-right:0; }
  .ag-hh{ font-size:22px; }
  .rodape-nota{ padding-left:0; }
  .log-grade{ grid-template-columns:1fr; }
  .btn-g{ width:100%; }
  .abertura-acao{ width:100%; }
  .rodape-int{ flex-direction:column; gap:26px; }
  .eixos-grade{ grid-template-columns:1fr; }
  .cards-preparo{ grid-template-columns:1fr; }
  .perfis li{ grid-template-columns:34px minmax(0,1fr); padding-inline:12px; }
  .rodape-base{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .oculto{ opacity:1 !important; transform:none !important; animation:none !important; }
  .js .titulo-mor .linha > span{ animation:none; }
  .abertura-fundo img{ animation:none; }
}

/* ============================================================
   IMPRESSÃO
   ============================================================ */
@media print{
  .topo,.barra-fixa,.abertura-fundo,.progresso,.menu-mob,
  body::after{ display:none !important; }
  body{ background:#fff; color:#000; }
  h1,h2,h3,strong{ color:#000; }
  .secao{ padding-block:22px; page-break-inside:avoid; }
}