/* ============================================================
   DESIGN TOKENS - paleta e tipografia da marca
   ============================================================ */
:root{
  /* Paleta de cores */
  --azul-profundo:#0D2340;
  --azul-ardosia:#3D5166;
  --burgundy:#7B1F3D;
  --laranja:#E4572E;      /* cor punch */
  --cinza-claro:#E2E4E7;
  --cinza-suave:#F3F4F6;

  /* Tipografia */
  --font-titulo:"Lora", Georgia, "Times New Roman", serif;
  --font-texto:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --nav-h:88px;
  --maxw:1400px;
  --gutter:clamp(20px, 4vw, 64px);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-texto);
  font-weight:400;
  color:var(--azul-ardosia);
  background:var(--cinza-suave);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,p,figure{margin:0}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

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

.svg-defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  /* --mx/--my: deslocamento magnético (JS). --lift: elevação do hover/active.
     Os três compõem um único transform, para não se sobrescreverem. */
  --mx:0px;
  --my:0px;
  --lift:0px;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:.95em 1.6em;
  border-radius:999px;
  background:var(--burgundy);
  color:#fff;
  font-family:var(--font-texto);
  font-weight:500;
  font-size:.94rem;
  letter-spacing:.015em;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  transform:translate(var(--mx), calc(var(--my) + var(--lift)));
  transition:transform .28s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn__arrow{
  flex:none;
  width:1.05em;
  height:1.05em;
  transition:transform .4s var(--ease);
}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn:active{--lift:1px}

/* Shine sweep - brilho leve atravessando o botão no hover */
.btn::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-60%;
  width:45%;
  z-index:-1;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.38) 50%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  opacity:0;
}
.btn:hover::before{animation:shineSweep .85s var(--ease) forwards}
@keyframes shineSweep{
  0%{left:-60%;opacity:0}
  12%{opacity:1}
  100%{left:130%;opacity:0}
}

/* Botão da navbar */
.btn--nav{
  flex:none;
  padding:.85em 1.45em;
  font-size:1.06rem;
  box-shadow:0 8px 22px -12px rgba(123,31,61,.75);
}
.btn--nav:hover{
  background:#8F2447;
  box-shadow:0 12px 28px -12px rgba(123,31,61,.9);
  --lift:-1px;
}

/* Botão da hero - com glow pulsante */
.hero__cta{
  display:flex;
  align-items:flex-start;
  margin-top:clamp(28px,3.2vw,40px);
}
.btn--hero{
  padding:1.12em 2em;
  font-size:1rem;
  animation:glowPulse 3.2s ease-in-out infinite;
}
.btn--hero:hover{
  background:#8F2447;
  --lift:-2px;
  animation-play-state:paused;
  box-shadow:
    0 0 0 8px rgba(228,87,46,.12),
    0 20px 42px -16px rgba(123,31,61,.85);
}
@keyframes glowPulse{
  0%,100%{
    box-shadow:
      0 0 0 0 rgba(228,87,46,.42),
      0 14px 34px -18px rgba(13,35,64,.55);
  }
  55%{
    box-shadow:
      0 0 0 16px rgba(228,87,46,0),
      0 14px 34px -18px rgba(13,35,64,.55);
  }
}

/* ============================================================
   NAVBAR - transparente que vira sólida no scroll
   ============================================================ */
.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease);
}
.nav.is-solid{
  background:rgba(243,244,246,.86);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--cinza-claro);
  box-shadow:0 10px 34px -24px rgba(13,35,64,.55);
}

.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,3vw,48px);
  height:var(--nav-h);
  transition:height .45s var(--ease);
}
.nav.is-solid .nav__inner{height:74px}

/* Lockup horizontal: monograma + assinatura tipográfica */
.nav__logo{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.1vw,18px);
  flex:none;
}
.nav__logo img{
  height:62px;
  width:auto;
  transition:height .45s var(--ease);
}
.nav.is-solid .nav__logo img{height:53px}

.nav__wordmark{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-left:clamp(12px,1.1vw,18px);
  border-left:1px solid var(--cinza-claro);
}
.nav__name{
  font-family:var(--font-texto);
  font-size:1.03rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--azul-profundo);
  line-height:1;
}
.nav__role,
.nav__crp{
  font-family:var(--font-texto);
  font-size:.74rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--azul-ardosia);
  line-height:1;
}

.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.4vw,38px);
}
.nav__links a{
  position:relative;
  padding:6px 2px;
  font-size:1.04rem;
  font-weight:400;
  white-space:nowrap;
  letter-spacing:.02em;
  color:var(--azul-ardosia);
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1.5px;
  background:var(--burgundy);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{color:var(--azul-profundo)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__toggle{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:var(--azul-profundo);
}
.nav__toggle span{
  display:block;
  position:relative;
  width:22px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transition:transform .35s var(--ease), background-color .2s;
}
.nav__toggle span::before,
.nav__toggle span::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transition:transform .35s var(--ease), top .25s var(--ease);
}
.nav__toggle span::before{top:-7px}
.nav__toggle span::after{top:7px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(28px,5vh,64px));
  background:
    radial-gradient(120% 90% at 8% 0%, #FBFBFC 0%, rgba(251,251,252,0) 58%),
    radial-gradient(80% 70% at 100% 12%, rgba(226,228,231,.75) 0%, rgba(226,228,231,0) 60%),
    var(--cinza-suave);
  overflow:hidden;
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.76fr) minmax(0,.72fr);
  align-items:center;
  gap:clamp(24px,3.4vw,56px);
}

/* --- 1. Coluna esquerda: headline + subtítulo + CTA --- */
.hero__text{position:relative;z-index:2;max-width:34ch}

.hero__h1{
  font-family:var(--font-titulo);
  font-weight:500;
  font-size:clamp(2.4rem,4.15vw,4.05rem);
  line-height:1.1;
  letter-spacing:-.018em;
  color:var(--azul-profundo);
  text-wrap:balance;
}
.hero__h1 .destaque{
  color:var(--burgundy);
  font-weight:600;
  font-style:italic;
  padding-inline:.02em;
}

.hero__sub,
.hero__desc{
  margin-top:clamp(20px,2.4vw,30px);
  max-width:46ch;
  font-family:var(--font-texto);
  font-size:clamp(.98rem,1.06vw,1.09rem);
  font-weight:400;
  line-height:1.72;
  color:var(--azul-ardosia);
}
.hero__desc{margin-top:clamp(14px,1.6vw,20px)}

/* --- 2. Coluna central: foto + accent decorativo --- */
.hero__media{position:relative;z-index:1}

/* Curva vermelha com ponto, separando os textos da foto */
.accent{
  position:absolute;
  top:50%;
  right:calc(100% + clamp(0px,.5vw,12px));
  transform:translateY(-50%);
  height:min(112%,660px);
  width:auto;
  overflow:visible;
  pointer-events:none;
  z-index:3;
}
.accent__line{
  fill:none;
  stroke:var(--burgundy);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}
.accent__line--soft{opacity:.3;stroke-width:1.1}
.accent__dot{fill:var(--burgundy)}
.accent__halo{fill:none;stroke:var(--laranja);stroke-width:1.1}

.portrait{
  position:relative;
  margin:0;
  aspect-ratio:3/4.05;
  border-radius:26px;
  overflow:hidden;
  background:var(--cinza-claro);
  box-shadow:
    0 2px 4px rgba(13,35,64,.04),
    0 34px 70px -32px rgba(13,35,64,.45);
}
.portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 18%;
  transform:scale(1.02);
  transition:transform 1.2s var(--ease);
}
.portrait:hover img{transform:scale(1.05)}

/* Véu sutil para integrar o retrato à paleta */
.portrait::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(13,35,64,.06) 0%, rgba(13,35,64,0) 34%, rgba(13,35,64,.22) 100%),
    linear-gradient(118deg, rgba(123,31,61,.08) 0%, rgba(123,31,61,0) 46%);
  pointer-events:none;
}

/* Moldura de linha deslocada */
.hero__media::after{
  content:"";
  position:absolute;
  inset:22px -18px -20px 24px;
  border:1px solid rgba(123,31,61,.32);
  border-radius:26px;
  z-index:-1;
}

/* --- 3. Coluna direita: frase lateral --- */
/* Painel curvo: o canto superior esquerdo recebe um raio elíptico enorme,
   criando a varredura orgânica; os demais cantos ficam discretos. */
/* Wrapper: carrega o posicionamento no grid e a sombra. */
.hero__quote-wrap{
  position:relative;
  z-index:2;
  /* Estica até a altura da linha do grid: sem altura, a curva não tem
     espaço para se desenvolver e o canto vira um arredondamento comum. */
  align-self:stretch;
  display:flex;
  filter:drop-shadow(0 22px 30px rgba(13,35,64,.30));
}
.hero__quote{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(88px,9.4vw,138px) clamp(26px,2.4vw,38px) clamp(38px,3.8vw,54px) clamp(40px,3.8vw,56px);
  background:var(--azul-profundo);
  clip-path:url(#curvaCitacao);
  color:var(--cinza-suave);
}
.quote__mark{
  display:block;
  font-family:var(--font-titulo);
  font-weight:600;
  font-size:clamp(3.8rem,5.2vw,5.2rem);
  line-height:.72;
  color:var(--burgundy);
  margin-bottom:.06em;
  user-select:none;
}
.quote__text{
  font-family:var(--font-titulo);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.12rem,1.42vw,1.44rem);
  line-height:1.6;
  color:var(--cinza-suave);
  text-wrap:pretty;
}
.quote__rule{
  display:block;
  width:52px;
  height:3px;
  border-radius:2px;
  margin:clamp(20px,2vw,26px) 0 0;
  background:var(--burgundy);
}

/* ============================================================
   4. FEATURE SECTION
   ============================================================ */
.features{
  position:relative;
  display:flex;
  align-items:center;
  margin-top:clamp(46px,6vw,84px);
  background:
    radial-gradient(120% 140% at 50% -10%, #123055 0%, rgba(18,48,85,0) 62%),
    var(--azul-profundo);
  color:var(--cinza-claro);
}

.features__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding-block:clamp(40px,4.4vw,64px);
}
.feature{
  position:relative;
  padding-inline:clamp(18px,2.4vw,42px);
  text-align:center;
}
.feature + .feature::before{
  content:"";
  position:absolute;
  left:0;
  top:6%;
  width:1px;
  height:88%;
  background:linear-gradient(180deg,
    rgba(226,228,231,0) 0%,
    rgba(226,228,231,.22) 26%,
    rgba(226,228,231,.22) 74%,
    rgba(226,228,231,0) 100%);
}
.feature__icon{
  width:clamp(46px,3.8vw,56px);
  height:clamp(46px,3.8vw,56px);
  margin:0 auto clamp(18px,1.9vw,26px);
  color:var(--cinza-claro);
  transition:transform .5s var(--ease);
}
.feature__icon svg{width:100%;height:100%;display:block}
.feature:hover .feature__icon{transform:translateY(-4px)}
.feature__title{
  font-family:var(--font-texto);
  font-size:clamp(.8rem,.92vw,.92rem);
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:#FFFFFF;
  margin-bottom:clamp(12px,1.3vw,18px);
}
.feature__desc{
  font-family:var(--font-texto);
  font-size:clamp(.82rem,.9vw,.92rem);
  font-weight:300;
  line-height:1.72;
  color:rgba(226,228,231,.82);
  max-width:26ch;
  margin-inline:auto;
  text-wrap:pretty;
}

/* ============================================================
   02 - MINHA ABORDAGEM
   ============================================================ */
/* Âncoras do menu param abaixo da navbar fixa */
section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

.abordagem{
  position:relative;
  background:var(--cinza-suave);
}

/* Rótulo de seção, reutilizável nas próximas dobras */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-texto);
  font-size:.91rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--burgundy);
}
.eyebrow::before{
  content:"";
  flex:none;
  width:34px;
  height:2px;   /* pixel inteiro: sem antialiasing, o traço rende igual em todas as dobras */
  background:var(--burgundy);
}

/* --- A. Intro: texto à esquerda, imagem à direita.
   Grid de 4 colunas: as externas são as calhas, as internas somam a largura
   do .shell; a imagem ocupa só a 3ª coluna, deixando a calha direita livre. --- */
.abordagem__intro{
  display:grid;
  grid-template-columns:
    minmax(var(--gutter),1fr)
    minmax(0,calc((var(--maxw) - 2*var(--gutter)) / 2))
    minmax(0,calc((var(--maxw) - 2*var(--gutter)) / 2))
    minmax(var(--gutter),1fr);
  align-items:stretch;
}
.abordagem__text{
  grid-column:2;
  max-width:56ch;
  padding:clamp(56px,7vw,110px) clamp(28px,4.4vw,80px) clamp(56px,7vw,110px) 0;
}
.abordagem__h2{
  margin-top:clamp(18px,2vw,26px);
  font-family:var(--font-titulo);
  font-weight:500;
  font-size:clamp(2rem,3.2vw,3rem);
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--azul-profundo);
  text-wrap:balance;
}
.abordagem__p{
  margin-top:clamp(18px,2vw,26px);
  font-size:clamp(.96rem,1.02vw,1.04rem);
  line-height:1.75;
  color:var(--azul-ardosia);
  text-wrap:pretty;
}
.abordagem__media{
  grid-column:3;
  position:relative;
  margin:0;
  min-height:clamp(320px,40vw,560px);
  overflow:hidden;
  background:var(--cinza-claro);
}
.abordagem__media picture{position:absolute;inset:0}
.abordagem__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 58%;
}

/* --- B. O que você pode esperar: faixa escura com cinco ícones --- */
/* Altura sincronizada com a faixa da Hero pelo JS (min-height inline);
   o flex centraliza o conteúdo no espaço que sobrar. */
.esperar{
  display:flex;
  align-items:center;
  background:
    radial-gradient(120% 140% at 50% -10%, #123055 0%, rgba(18,48,85,0) 62%),
    var(--azul-profundo);
  color:var(--cinza-claro);
  padding-block:clamp(40px,4.4vw,64px);
}
.esperar .shell{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,4.2fr);
  gap:clamp(20px,2.6vw,40px);
  align-items:center;
}
.esperar__h3{
  max-width:14ch;
  font-family:var(--font-titulo);
  font-weight:500;
  font-size:clamp(1.35rem,1.9vw,1.85rem);
  line-height:1.2;
  color:#FFFFFF;
  text-wrap:balance;
}
.esperar__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
}
.esperar__item{
  position:relative;
  padding:0 clamp(14px,1.8vw,30px);
  text-align:center;
}
.esperar__item + .esperar__item::before{
  content:"";
  position:absolute;
  left:0;
  top:8%;
  width:1px;
  height:84%;
  background:linear-gradient(180deg,
    rgba(226,228,231,0) 0%,
    rgba(226,228,231,.22) 30%,
    rgba(226,228,231,.22) 70%,
    rgba(226,228,231,0) 100%);
}
.esperar__icon{
  width:clamp(46px,3.8vw,56px);
  height:clamp(46px,3.8vw,56px);
  margin:0 auto clamp(16px,1.8vw,24px);
  color:var(--cinza-claro);
  transition:transform .5s var(--ease);
}
.esperar__icon svg{width:100%;height:100%;display:block}
.esperar__item:hover .esperar__icon{transform:translateY(-4px)}
.esperar__label{
  max-width:16ch;
  margin-inline:auto;
  font-family:var(--font-texto);
  font-size:clamp(.92rem,1vw,1.02rem);
  line-height:1.5;
  color:#FFFFFF;
  text-wrap:balance;
}

/* ============================================================
   03 - DEMANDAS ATENDIDAS
   ============================================================ */
.demandas{
  background:var(--cinza-suave);
  padding-block:clamp(56px,7vw,110px) clamp(64px,7.6vw,120px);
}
.demandas__h2{
  margin-top:clamp(18px,2vw,26px);
  font-family:var(--font-titulo);
  font-weight:500;
  font-size:clamp(2rem,3.2vw,3rem);
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--azul-profundo);
}
.demandas__lead{
  margin-top:clamp(14px,1.6vw,20px);
  max-width:52ch;
  font-size:clamp(.98rem,1.06vw,1.09rem);
  line-height:1.72;
  color:var(--azul-ardosia);
  text-wrap:pretty;
}

/* Cartões separados por linhas de 1px: o gap deixa o fundo do grid aparecer */
.demandas__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:clamp(36px,4.2vw,60px) 0 0;
  padding:0;
  list-style:none;
  background:rgba(61,81,102,.38);
  border:1px solid rgba(61,81,102,.38);
}
.demanda{
  position:relative;
  padding:clamp(28px,2.8vw,42px) clamp(22px,2.4vw,36px) clamp(30px,3vw,44px);
  background:var(--cinza-claro);
  text-align:center;
  transition:background-color .4s var(--ease);
}
.demanda:hover{background:#E9EBEE}
.demanda__icon{
  width:clamp(58px,4.6vw,69px);
  height:clamp(58px,4.6vw,69px);
  margin:0 auto clamp(20px,2.2vw,30px);
  color:var(--burgundy);
  transition:transform .5s var(--ease);
}
.demanda__icon svg{width:100%;height:100%;display:block}
.demanda:hover .demanda__icon{transform:translateY(-4px)}
.demanda__h3{
  font-family:var(--font-titulo);
  font-weight:600;
  font-size:clamp(1.02rem,1.22vw,1.22rem);
  line-height:1.35;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--burgundy);
  text-wrap:balance;
}
.demanda__p{
  margin:12px auto 0;
  max-width:34ch;
  font-size:clamp(.93rem,.98vw,1rem);
  line-height:1.72;
  color:var(--azul-ardosia);
  text-wrap:pretty;
}

/* ============================================================
   04 - COMO FUNCIONA
   ============================================================ */
.processo{
  position:relative;
  background:var(--cinza-suave);
  border-top:1px solid rgba(61,81,102,.14);
  padding-block:clamp(56px,7vw,110px) 0;
}

/* Cabeçalho e passos dividem o mesmo grid de 2 colunas: o cabeçalho ocupa
   a 1ª coluna da 1ª linha e o passo 01 fica ao lado dele, como no layout de
   referência. A lista usa subgrid para herdar as colunas e linhas. */
.processo__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(32px,5vw,96px);
  row-gap:clamp(80px,8.4vw,128px);
}
.processo__head{
  grid-column:1;
  grid-row:1;
  max-width:46ch;
}
.processo__h2{
  margin-top:clamp(18px,2vw,26px);
  font-family:var(--font-titulo);
  font-weight:500;
  font-size:clamp(2rem,3.2vw,3rem);
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--azul-profundo);
}
.processo__lead{
  margin-top:clamp(14px,1.6vw,20px);
  font-size:clamp(.98rem,1.06vw,1.09rem);
  line-height:1.72;
  color:var(--azul-ardosia);
  text-wrap:pretty;
}

.passos{
  grid-column:1 / -1;
  grid-row:1 / 5;
  display:grid;
  grid-template-columns:subgrid;
  grid-template-rows:subgrid;
  margin:0;
  padding:0;
  list-style:none;
}
.passo{
  position:relative;
  z-index:1;
  align-self:start;   /* sem esticar: o fim do passo é o fim do texto */
  display:flex;
  align-items:flex-start;
  gap:clamp(16px,1.6vw,24px);
  max-width:520px;
}
/* Ziguezague: 01 e 03 à direita, 02 e 04 à esquerda com recuos diferentes */
.passo:nth-child(1){grid-column:2;grid-row:1}
.passo:nth-child(2){grid-column:1;grid-row:2;padding-left:clamp(0px,7vw,120px)}
.passo:nth-child(3){grid-column:2;grid-row:3}
.passo:nth-child(4){grid-column:1;grid-row:4;padding-left:clamp(0px,3.4vw,56px)}

.passo__num{
  flex:none;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:50%;
  border:1.5px solid var(--azul-profundo);
  background:var(--azul-profundo);
  /* anel na cor do fundo: a trilha "respira" ao encontrar o círculo */
  box-shadow:0 0 0 7px var(--cinza-suave);
  font-family:var(--font-texto);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.04em;
  color:#FFFFFF;
  transition:background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
/* Com JS, os círculos começam vazados e se preenchem quando a trilha chega */
.js .passo:not(.is-ativo) .passo__num{
  background:var(--cinza-suave);
  color:var(--azul-profundo);
  border-color:rgba(13,35,64,.32);
}
.passo.is-ativo .passo__num{
  box-shadow:0 0 0 7px var(--cinza-suave), 0 0 0 8.5px rgba(123,31,61,.5);
}
.passo__body{padding-top:9px}
.passo__h3{
  font-family:var(--font-titulo);
  font-weight:600;
  font-size:clamp(1.12rem,1.4vw,1.38rem);
  line-height:1.3;
  color:var(--azul-profundo);
  text-wrap:balance;
}
.passo__p{
  margin-top:10px;
  max-width:36ch;
  font-size:clamp(.95rem,1vw,1.02rem);
  line-height:1.72;
  color:var(--azul-ardosia);
  text-wrap:pretty;
}

/* Trilha: o "d" dos paths é calculado pelo JS a partir dos círculos */
.trilha{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:0;
}
.trilha__guia{
  fill:none;
  stroke:rgba(61,81,102,.32);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:1 7;
}
.trilha__linha{
  fill:none;
  stroke:var(--burgundy);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:1000 1000;
  stroke-dashoffset:1000;
}
.trilha__ponto{fill:var(--burgundy)}
.trilha__halo{
  fill:none;
  stroke:var(--laranja);
  stroke-width:1.2;
  transform-box:fill-box;
  transform-origin:center;
  animation:haloTrilha 2.4s ease-out infinite;
}
@keyframes haloTrilha{
  0%{opacity:.6;transform:scale(.5)}
  70%{opacity:0;transform:scale(1.9)}
  100%{opacity:0;transform:scale(1.9)}
}
html:not(.js) .trilha{display:none}

/* Informações práticas: faixa de largura total que encerra a seção. A saída
   da trilha passa no vão claro logo acima dela. */
.processo__faixa{
  margin-top:clamp(110px,10vw,150px);
  padding-block:clamp(40px,4.4vw,64px);
  /* Cinza fora da paleta, só nesta faixa: azul profundo a 9,9:1 e ardósia a 5,1:1 */
  background:#C9CDD3;
}
.processo__info{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,2.6vw,40px);
  margin:0;
  padding:0;
  list-style:none;
}
.info{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.info__icon{
  flex:none;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--cinza-suave);   /* destaca o círculo sobre o cinza da faixa */
  color:var(--burgundy);
}
.info__icon svg{width:26px;height:26px;display:block}
.info__txt{
  padding-top:4px;
  font-size:clamp(.9rem,.95vw,.96rem);
  line-height:1.6;
  color:var(--azul-ardosia);
  text-wrap:pretty;
}
.info__txt strong{
  display:block;
  margin-bottom:2px;
  font-family:var(--font-titulo);
  font-weight:600;
  font-size:clamp(1rem,1.1vw,1.08rem);
  line-height:1.35;
  color:var(--azul-profundo);
}

/* ============================================================
   05 - SOBRE MIM
   ============================================================ */
.sobre{
  position:relative;
  padding-block:clamp(64px,8vw,120px);
  background:
    radial-gradient(55% 50% at 20% 34%, rgba(226,228,231,.9) 0%, rgba(226,228,231,0) 70%),
    var(--cinza-suave);
  overflow:hidden;
}
.sobre__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(40px,6vw,110px);
  align-items:center;
}

/* --- Retrato circular com órbita, selo giratório e credenciais --- */
.sobre__media{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(40px,4.4vw,60px);
}
.retrato{
  position:relative;
  width:min(100%, clamp(260px,30vw,420px));
  aspect-ratio:1;
  margin:0;
}
.retrato__foto{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  background:var(--cinza-claro);
  box-shadow:0 30px 60px -30px rgba(13,35,64,.5);
}
.retrato__foto picture,
.retrato__foto img{width:100%;height:100%;object-fit:cover}

/* Órbita: anel pontilhado girando devagar + arco burgundy que se desenha */
.orbita{
  position:absolute;
  inset:-10%;
  width:120%;
  height:120%;
  overflow:visible;
  pointer-events:none;
}
.orbita__pontilhado{
  fill:none;
  stroke:rgba(61,81,102,.5);
  stroke-width:.34;
  stroke-linecap:round;
  stroke-dasharray:.01 1.7;
  transform-box:view-box;
  transform-origin:50% 50%;
  animation:girar 90s linear infinite;
}
.orbita__arco{
  fill:none;
  stroke:var(--burgundy);
  stroke-width:.42;
  stroke-linecap:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 2.2s var(--ease) .5s;
}
.orbita__ponto{
  fill:var(--burgundy);
  opacity:0;
  transition:opacity .4s var(--ease) 2.5s;
}
.orbita__halo{
  fill:none;
  stroke:var(--laranja);
  stroke-width:.3;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.sobre__media.is-in .orbita__arco{stroke-dashoffset:0}
.sobre__media.is-in .orbita__ponto{opacity:1}
.sobre__media.is-in .orbita__halo{animation:haloTrilha 2.4s ease-out 2.7s infinite}

/* Selo com texto circular girando em volta do monograma */
.selo{
  position:absolute;
  z-index:2;
  left:-3%;
  bottom:3%;
  display:grid;
  place-items:center;
  width:clamp(98px,9.4vw,134px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--cinza-suave);
  box-shadow:0 16px 32px -18px rgba(13,35,64,.55);
}
.selo__texto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.selo__texto text{
  font-family:var(--font-texto);
  font-size:9.2px;
  font-weight:500;
  letter-spacing:.1em;
  fill:var(--azul-profundo);
}
.selo img{
  position:relative;
  width:44%;
  height:auto;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* Credenciais em cápsulas */
.credenciais{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  max-width:520px;
  margin:0;
  padding:0;
  list-style:none;
}
.credencial{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 16px 8px 12px;
  border-radius:999px;
  border:1px solid rgba(123,31,61,.28);
  background:rgba(255,255,255,.6);
  font-size:.84rem;
  line-height:1.3;
  color:var(--azul-profundo);
}
.credencial::before{
  content:"";
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--burgundy);
}
.credencial b{font-weight:600;color:var(--burgundy)}

/* --- Texto --- */
.sobre__text{max-width:58ch}
.sobre__h2{
  margin-top:clamp(18px,2vw,26px);
  font-family:var(--font-titulo);
  font-weight:500;
  font-size:clamp(2rem,3.2vw,3rem);
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--azul-profundo);
  text-wrap:balance;
}
.sobre__h2 .destaque{
  color:var(--burgundy);
  font-weight:600;
  font-style:italic;
}
.sobre__lead{
  margin-top:clamp(20px,2.2vw,28px);
  font-family:var(--font-titulo);
  font-size:clamp(1.12rem,1.4vw,1.34rem);
  line-height:1.55;
  color:var(--azul-profundo);
  text-wrap:pretty;
}
.sobre__p{
  margin-top:clamp(16px,1.8vw,22px);
  font-size:clamp(.96rem,1.02vw,1.04rem);
  line-height:1.75;
  color:var(--azul-ardosia);
  text-wrap:pretty;
}

/* Destaque "Na área clínica..." na Parte 1 */
.sobre__destaque{
  margin-top:clamp(26px,2.8vw,36px);
  font-family:var(--font-titulo);
  font-size:clamp(1.12rem,1.4vw,1.34rem);
  line-height:1.55;
  color:var(--azul-profundo);
  text-wrap:pretty;
}
.sobre__destaque em{
  font-style:italic;
  font-weight:500;
  color:var(--burgundy);
}

/* --- Parte 2: painel escuro em forma de folha. Dois cantos opostos com raio
   grande, ecoando a curva do painel da frase lateral da Hero. --- */
.clinica{
  position:relative;
  margin-top:clamp(64px,7vw,110px);
  padding:clamp(56px,6vw,96px) clamp(28px,6vw,110px);
  background:
    radial-gradient(80% 90% at 0% 0%, #163762 0%, rgba(22,55,98,0) 60%),
    var(--azul-profundo);
  border-radius:clamp(72px,11vw,180px) 28px clamp(72px,11vw,180px) 28px;
  box-shadow:0 40px 80px -48px rgba(13,35,64,.6);
  color:var(--cinza-claro);
  text-align:center;
}
.clinica__p{
  max-width:56ch;
  margin:clamp(18px,2vw,26px) auto 0;
  font-size:clamp(1.13rem,1.22vw,1.24rem);
  line-height:1.75;
  color:rgba(226,228,231,.86);
  text-wrap:pretty;
}

/* Traço que nasce emaranhado e termina em linha reta: confusão -> direção */
.mudanca{
  max-width:1000px;
  margin:0 auto clamp(40px,4.4vw,64px);
}
.mudanca__svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
.mudanca__traco{
  fill:none;
  stroke:var(--cinza-claro);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 2.8s cubic-bezier(.45,.05,.2,1) .3s;
}
.mudanca__ponto{
  fill:var(--laranja);
  opacity:0;
  transition:opacity .4s var(--ease) 3s;
}
.mudanca__halo{
  fill:none;
  stroke:var(--laranja);
  stroke-width:1.4;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.mudanca__rotulos{
  position:relative;
  height:1.6em;
  margin-top:clamp(8px,1.2vw,16px);
}
.mudanca__rotulo{
  position:absolute;
  top:0;
  font-family:var(--font-texto);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(226,228,231,.7);
  opacity:0;
  transition:opacity .6s var(--ease);
}
.mudanca__rotulo:nth-child(1){left:17%;transform:translateX(-50%);transition-delay:.7s}
.mudanca__rotulo:nth-child(2){left:50%;transform:translateX(-50%);transition-delay:1.9s}
.mudanca__rotulo:nth-child(3){right:0;color:#FFFFFF;transition-delay:3.1s}
.mudanca.is-in .mudanca__traco{stroke-dashoffset:0}
.mudanca.is-in .mudanca__ponto,
.mudanca.is-in .mudanca__rotulo{opacity:1}
.mudanca.is-in .mudanca__halo{animation:haloTrilha 2.4s ease-out 3.2s infinite}
.mudanca__legenda{
  max-width:46ch;
  margin:clamp(28px,3vw,40px) auto 0;
  font-family:var(--font-titulo);
  font-size:clamp(1.21rem,1.5vw,1.43rem);
  line-height:1.6;
  color:#FFFFFF;
  text-wrap:pretty;
}
.clinica__fecho{
  max-width:40ch;
  margin:clamp(36px,4vw,56px) auto 0;
  font-family:var(--font-titulo);
  font-style:italic;
  font-size:clamp(1.21rem,1.5vw,1.43rem);
  line-height:1.6;
  color:var(--cinza-claro);
  text-wrap:balance;
}
/* Sem JavaScript, tudo aparece já desenhado */
html:not(.js) .orbita__arco,
html:not(.js) .mudanca__traco{stroke-dashoffset:0}
html:not(.js) .orbita__ponto,
html:not(.js) .mudanca__ponto,
html:not(.js) .mudanca__rotulo{opacity:1}

/* ============================================================
   06 - VAMOS CONVERSAR?
   ============================================================ */
.contato{
  position:relative;
  padding-block:clamp(96px,11vw,170px);
  background:
    radial-gradient(45% 55% at 50% 52%, rgba(226,228,231,.95) 0%, rgba(226,228,231,0) 70%),
    var(--cinza-suave);
  text-align:center;
  overflow:hidden;
}
.contato__palco{
  position:relative;
  max-width:680px;
  margin-inline:auto;
}

/* Ondas concêntricas que se expandem como uma conversa que se propaga */
.ondas{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  pointer-events:none;
}
.ondas span{
  position:absolute;
  left:0;
  top:0;
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  border:1px solid rgba(123,31,61,.22);
  transform:translate(-50%,-50%) scale(.7);
  opacity:0;
  animation:onda 9s cubic-bezier(.25,.6,.35,1) infinite;
}
.ondas span:nth-child(1){--s:min(92vw,460px);animation-delay:0s}
.ondas span:nth-child(2){--s:min(118vw,700px);animation-delay:3s}
.ondas span:nth-child(3){--s:min(144vw,940px);animation-delay:6s}
@keyframes onda{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  25%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}
}

.contato__conteudo{position:relative;z-index:1}
.contato__h2{
  margin-top:clamp(18px,2vw,26px);
  font-family:var(--font-titulo);
  font-weight:500;
  font-size:clamp(2.4rem,4.6vw,4.2rem);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--azul-profundo);
}
.contato__h2 .destaque{
  color:var(--burgundy);
  font-weight:600;
  font-style:italic;
}
.contato__lead{
  max-width:36ch;
  margin:clamp(18px,2vw,26px) auto 0;
  font-family:var(--font-titulo);
  font-size:clamp(1.12rem,1.5vw,1.38rem);
  line-height:1.55;
  color:var(--azul-ardosia);
  text-wrap:balance;
}

/* O reveal fica no wrapper: no próprio botão, o transform dele brigaria com o magnético */
.contato__cta{
  display:flex;
  justify-content:center;
  margin-top:clamp(32px,3.6vw,48px);
}
.btn--whats{
  gap:.8em;
  padding:1.2em 2.2em;
  font-size:1.06rem;
  animation:glowPulse 3.2s ease-in-out infinite;
}
.btn--whats:hover{
  background:#8F2447;
  --lift:-2px;
  animation-play-state:paused;
  box-shadow:
    0 0 0 8px rgba(228,87,46,.12),
    0 20px 42px -16px rgba(123,31,61,.85);
}
.btn__whats{
  flex:none;
  width:1.4em;
  height:1.4em;
}

.contato__info{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 28px;
  margin:clamp(26px,2.8vw,36px) 0 0;
  padding:0;
  list-style:none;
  font-size:clamp(.92rem,1vw,1rem);
  color:var(--azul-ardosia);
}
.contato__info li{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.contato__info svg{
  flex:none;
  width:18px;
  height:18px;
  color:var(--burgundy);
}
.contato__info a{
  color:var(--azul-profundo);
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:rgba(123,31,61,.35);
  text-underline-offset:4px;
  transition:text-decoration-color .3s var(--ease);
}
.contato__info a:hover{text-decoration-color:var(--burgundy)}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{
  background:
    radial-gradient(70% 120% at 0% 0%, #143259 0%, rgba(20,50,89,0) 60%),
    var(--azul-profundo);
  color:var(--cinza-claro);
  padding-block:clamp(64px,7vw,100px) clamp(28px,3vw,40px);
}
.rodape__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,5vw,80px);
  align-items:start;
}
.rodape__marca{
  display:flex;
  align-items:center;
  gap:clamp(16px,1.8vw,24px);
}
.rodape__marca img{
  flex:none;
  width:clamp(72px,6.4vw,92px);
  height:auto;
  filter:brightness(0) invert(1);   /* monograma em branco sobre o azul */
  opacity:.92;
}
.rodape__dados{
  padding-left:clamp(16px,1.8vw,24px);
  border-left:1px solid rgba(226,228,231,.18);
}
.rodape__nome{
  font-family:var(--font-texto);
  font-size:clamp(.98rem,1.1vw,1.08rem);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#FFFFFF;
}
.rodape__cargo,
.rodape__crp{
  margin-top:7px;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(226,228,231,.75);
}
.rodape__local{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  font-size:.92rem;
  color:rgba(226,228,231,.85);
}
.rodape__local svg{width:16px;height:16px;color:var(--laranja)}

.rodape__lista{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.rodape__lista li{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(226,228,231,.88);
}
.rodape__icone{
  flex:none;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(226,228,231,.22);
  color:var(--cinza-claro);
}
.rodape__icone svg{width:22px;height:22px}

.rodape__aviso{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-top:clamp(44px,5vw,64px);
  padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,32px);
  border-radius:28px;
  border:1px solid rgba(226,228,231,.16);
  background:rgba(255,255,255,.04);
}
.rodape__aviso-icone{
  flex:none;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(228,87,46,.16);
  color:var(--laranja);
  font-family:var(--font-titulo);
  font-weight:700;
}
.rodape__aviso p{
  font-size:clamp(.86rem,.92vw,.92rem);
  line-height:1.7;
  color:rgba(226,228,231,.86);
  text-wrap:pretty;
}
.rodape__aviso strong{color:#FFFFFF;font-weight:600}
.rodape__aviso a{
  color:#FFFFFF;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(228,87,46,.6);
}
.rodape__aviso a:hover{text-decoration-color:var(--laranja)}

.rodape__base{
  margin-top:clamp(32px,3.4vw,44px);
  padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid rgba(226,228,231,.12);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(226,228,231,.6);
  text-align:center;
}

/* ============================================================
   EFEITO DE SURGIMENTO
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d,0s);
}
[data-reveal="left"]{transform:translateX(-26px) translateY(10px)}
[data-reveal="right"]{transform:translateX(26px) translateY(10px)}
[data-reveal="zoom"]{transform:translateY(30px) scale(.965)}
[data-reveal].is-in{opacity:1;transform:none}

.accent__line.is-in{
  animation:drawLine 1.9s var(--ease) .45s forwards;
}
@keyframes drawLine{to{stroke-dashoffset:0}}

.accent__dot,.accent__halo{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(.2);
}
.accent__dot.is-in{animation:popDot .7s var(--ease) 1.55s forwards}
.accent__halo.is-in{animation:popHalo 2.6s ease-out 1.85s infinite}
/* Fallback sem JavaScript - nada fica invisível */
html:not(.js) [data-reveal]{opacity:1;transform:none}
html:not(.js) .accent__line{stroke-dashoffset:0}
html:not(.js) .accent__dot,
html:not(.js) .accent__halo{opacity:1;transform:none}

@keyframes popDot{to{opacity:1;transform:scale(1)}}
@keyframes popHalo{
  0%{opacity:.55;transform:scale(.45)}
  70%{opacity:0;transform:scale(1.9)}
  100%{opacity:0;transform:scale(1.9)}
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
/* Faixa em que os links maiores ainda cabem, mas sem folga */
@media (max-width:1240px){
  .nav__inner{gap:clamp(14px,2vw,28px)}
  .nav__links{gap:clamp(12px,1.6vw,22px)}
  .nav__links a{font-size:.96rem}
  .btn--nav{font-size:.98rem}
}

@media (max-width:1180px){
  .hero__grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
    row-gap:clamp(30px,4vw,46px);
  }
  .hero__text{max-width:38ch}
  /* Posicionamento no grid vai no wrapper; a forma e o respiro, no painel. */
  .hero__quote-wrap{
    grid-column:1 / -1;
    max-width:70ch;
  }
  .hero__quote{
    padding:clamp(64px,7vw,92px) clamp(30px,3.4vw,44px) clamp(36px,3.6vw,48px) clamp(46px,4.8vw,66px);
    clip-path:url(#curvaCitacaoLarga);
  }
  .accent{height:min(104%,560px)}
  .esperar .shell{grid-template-columns:minmax(0,1fr);gap:clamp(24px,2.6vw,36px)}
  .esperar__h3{max-width:20ch}
  .demandas__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .processo__info{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Navbar: com os textos maiores, o menu compacto entra antes do resto do layout mobile */
@media (max-width:1100px){
  :root{--nav-h:74px}

  .nav__links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px var(--gutter) 22px;
    background:rgba(243,244,246,.97);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--cinza-claro);
    box-shadow:0 22px 40px -28px rgba(13,35,64,.6);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:none}
  .nav__links a{
    width:100%;
    padding:15px 0;
    font-size:1.08rem;
    border-bottom:1px solid var(--cinza-claro);
  }
  .nav__links a::after{display:none}
  .nav__toggle{display:inline-flex}
  .btn--nav{display:none}
  .nav__logo img{height:58px}
  .nav.is-solid .nav__logo img{height:53px}
}

@media (max-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__text{max-width:100%}
  .hero__media{max-width:440px;margin-inline:auto;width:100%}
  .hero__media::after{inset:18px -12px -16px 18px}
  /* Sem a coluna de texto ao lado, a curva perde a função de divisor */
  .accent{display:none}
  .hero__quote{max-width:100%}

  .features__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(34px,5vw,48px) 0;
  }
  .feature + .feature::before{display:none}
  .feature:nth-child(even)::after{
    content:"";
    position:absolute;
    left:0;
    top:8%;
    width:1px;
    height:84%;
    background:rgba(226,228,231,.2);
  }

  /* 02 - Abordagem: intro empilhada */
  .abordagem__intro{display:block}
  .abordagem__text{
    max-width:none;
    padding:clamp(48px,7vw,72px) var(--gutter);
  }
  .abordagem__media{
    min-height:0;
    height:clamp(240px,52vw,400px);
    margin-top:0;
  }
  .esperar__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(30px,4vw,42px) 0;
  }
  .esperar__item + .esperar__item::before{display:none}
  .esperar__item:last-child{grid-column:1 / -1}

  /* 04 - Como funciona: passos empilhados, trilha vertical */
  .processo__grid{display:block}
  .processo__head{max-width:none;margin-bottom:clamp(40px,7vw,56px)}
  .passos{display:flex;flex-direction:column;gap:clamp(40px,7vw,56px)}
  .passo:nth-child(n){padding-left:0;max-width:none}

  /* 05 - Sobre mim: retrato acima do texto */
  .sobre__grid{grid-template-columns:minmax(0,1fr)}
  .sobre__text{max-width:none}

  /* Rodapé: marca e "Ciência e evidências" empilhados */
  .rodape__grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:560px){
  .hero__media::after{display:none}
  .features__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .feature:nth-child(even)::after{display:none}
  .feature{padding-inline:0}
  .feature__desc{max-width:32ch}

  .demandas__grid{grid-template-columns:minmax(0,1fr)}
  .processo__info{grid-template-columns:minmax(0,1fr)}
  .passo__num{width:50px;height:50px}
  .credencial{font-size:.8rem;padding:7px 14px 7px 11px}
  .mudanca__rotulo{font-size:.64rem;letter-spacing:.14em}
  .mudanca__rotulo:nth-child(1){left:15%}
  .btn--whats{padding:1.1em 1.7em;font-size:1rem}
  .contato__info{flex-direction:column;align-items:center}
  .rodape__aviso{flex-direction:column;gap:12px}
  .rodape__lista li{letter-spacing:.1em}

  /* 02 - Abordagem: os cinco itens viram uma lista com ícone à esquerda */
  .esperar__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .esperar__item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 0;
    text-align:left;
    border-bottom:1px solid rgba(226,228,231,.16);
  }
  .esperar__item:last-child{border-bottom:0}
  .esperar__icon{flex:none;width:42px;height:42px;margin:0}
  .esperar__label{max-width:none;margin:0}
}

/* Acessibilidade - movimento reduzido */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .orbita__arco,.mudanca__traco{stroke-dashoffset:0}
  .ondas span{animation:none;opacity:.6;transform:translate(-50%,-50%)}
  .orbita__ponto,.mudanca__ponto,.mudanca__rotulo{opacity:1;transition-delay:0s}
  .accent__line{stroke-dashoffset:0}
  .accent__dot,.accent__halo{opacity:1;transform:none}
}