/* ============================================================
   Dr. Átila Barros — Landing page
   Referência de design: 1920 × 1080 (escala fluida em vw)
   ============================================================ */

:root{
  /* paleta extraída dos SVGs do projeto */
  --teal:        #5FA8A0;
  --teal-deep:   #204F52;
  --teal-mid:    #4E9089;
  --teal-ink:    #2E8B82;   /* teal legível sobre fundo claro */
  --terra:       #C1502E;
  --terra-light: #CF9170;
  --white:       #F2F5F4;
  --muted:       #BCC8C6;
  --muted-dim:   #97A6A4;

  --ink:         #0F1B21;   /* fundo das seções escuras */
  --ink-deep:    #0A141A;
  --paper:       #F2F5F4;   /* fundo das seções claras */
  --paper-alt:   #F7F8F7;
  --ink-text:    #16232B;
  --body-light:  #4C5C61;

  --line-dark:   rgba(120, 176, 172, .22);
  --line-light:  rgba(22, 35, 43, .12);

  /* margem lateral: 16,5% (317px em 1920) */
  --gutter: clamp(20px, 16.5vw, 320px);

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

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ display:block; max-width:100%; }

/* ============================================================
   ANIMAÇÃO DE ENTRADA
   ============================================================ */

.intro{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:var(--ink-deep);
  animation:introCurtain 1.95s cubic-bezier(.76,0,.24,1) 1.72s forwards;
}
.intro__stage{
  display:grid;
  justify-items:center;
  gap:clamp(14px, 1.4vw, 24px);
  animation:introStageOut .5s var(--ease) 1.5s forwards;
}

/* o traçado: entra agitado e se acalma numa linha */
.intro__wave{
  width:clamp(200px, 22vw, 340px);
  height:auto;
  overflow:visible;
}
.intro__trace{
  stroke-dasharray:640;
  stroke-dashoffset:640;
  transform-box:fill-box;
  transform-origin:50% 50%;
  animation:
    introDraw 1.05s cubic-bezier(.5,.1,.25,1) .12s forwards,
    introCalm .62s cubic-bezier(.6,0,.2,1) 1.02s forwards;
  filter:drop-shadow(0 0 10px rgba(95,168,160,.45));
}

.intro__name,
.intro__role{
  margin:0;
  opacity:0;
  transform:translateY(10px);
  animation:introText .8s var(--ease) forwards;
}
.intro__name{
  color:var(--white);
  font-size:clamp(15px, 1.05vw, 20px);
  font-weight:600;
  letter-spacing:.02em;
  animation-delay:1.05s;
}
.intro__role{
  color:var(--teal);
  font-size:clamp(9.5px, .7vw, 13px);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  animation-delay:1.2s;
}

@keyframes introDraw{
  from{ stroke-dashoffset:640; }
  to  { stroke-dashoffset:0; }
}
@keyframes introCalm{
  from{ transform:scaleY(1); }
  to  { transform:scaleY(.035); }
}
@keyframes introText{
  to{ opacity:1; transform:none; }
}
@keyframes introStageOut{
  to{ opacity:0; transform:translateY(-8px); }
}
@keyframes introCurtain{
  to{ transform:translateY(-101%); visibility:hidden; }
}

/* o conteúdo do hero entra sozinho, sem depender de JS */
.intro-el{
  opacity:0;
  animation:introEl .9s var(--ease) forwards;
  animation-delay:calc(1.95s + var(--d, 0s));
}
@keyframes introEl{
  from{ opacity:0; transform:translateY(16px); filter:blur(6px); }
  to  { opacity:1; transform:none;             filter:none; }
}

/* elementos revelados no scroll */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d, 0s);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--ink-deep) url("assets/Desktop%201.png") center / cover no-repeat;
  animation:heroZoom 3s var(--ease) 1.6s both;
}
@keyframes heroZoom{
  from{ background-size:108% auto; }
  to  { background-size:cover; }
}

.hero__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg, rgba(8,18,20,.38) 0%, rgba(8,18,20,.10) 45%, rgba(8,18,20,0) 70%);
}

.hero__edge{
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg,
    rgba(42,124,134,0) 0%, #2E8B95 18%, #4FB6BC 52%, #2E8B95 82%, rgba(42,124,134,0) 100%);
  opacity:.9;
}

/* --------------------------- NAV --------------------------- */

.nav{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(16px, 2vw, 40px);
  padding:clamp(20px, 3vw, 58px) var(--gutter) 0;
}

.nav__logo{
  justify-self:start;
  color:var(--teal);
  font-size:clamp(14px, 1.02vw, 19.5px);
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
}

.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(18px, 3.65vw, 70px);
  margin:0; padding:0;
  list-style:none;
}
.nav__links a{
  position:relative;
  color:#DCE5E3;
  font-size:clamp(13px, .98vw, 18.5px);
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s ease;
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:1px;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--white); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__end{ justify-self:end; display:flex; align-items:center; gap:14px; }

.nav__toggle{
  display:none;
  width:42px; height:42px;
  padding:11px 9px;
  border:1px solid rgba(220,229,227,.28);
  border-radius:6px;
  background:rgba(8,18,20,.35);
  cursor:pointer;
}
.nav__toggle span{ display:block; height:1.5px; background:var(--white); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.nav__toggle span + span{ margin-top:5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* --------------------------- BOTÕES --------------------------- */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:clamp(7px, .55vw, 11px);
  border-radius:6px;
  font-size:clamp(13px, .92vw, 17.5px);
  font-weight:500;
  line-height:1.25;
  text-decoration:none;
  color:var(--white);
  white-space:nowrap;
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease), border-color .3s var(--ease);
}
.btn img{ width:clamp(17px, 1.2vw, 23px); height:auto; }
.btn > *{ position:relative; z-index:1; }
.btn:hover{ transform:translateY(-2px); }

/* brilho que atravessa o botão no hover */
.btn::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-60%;
  width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-18deg);
  transition:left .6s var(--ease);
}
.btn:hover::after{ left:120%; }

.btn--teal{
  padding:clamp(11px, .95vw, 18px) clamp(20px, 2.4vw, 46px);
  background:linear-gradient(100deg, var(--teal-deep) 0%, var(--teal-mid) 100%);
  box-shadow:0 10px 28px -14px rgba(32,79,82,.9);
}
.btn--teal:hover{ box-shadow:0 14px 32px -12px rgba(95,168,160,.55); }

.btn--terra{
  padding:clamp(13px, 1.18vw, 23px) clamp(17px, 1.75vw, 37px);
  background:linear-gradient(100deg, var(--terra) 0%, #D9743F 100%);
  box-shadow:0 12px 30px -16px rgba(193,80,46,.95);
}
.btn--terra:hover{ box-shadow:0 16px 34px -14px rgba(217,116,63,.6); }

.btn--outline{
  padding:clamp(13px, 1.18vw, 23px) clamp(17px, 1.75vw, 37px);
  background:transparent;
  border:1px solid var(--terra);
}
.btn--outline:hover{ background:rgba(193,80,46,.14); border-color:#D9743F; }

.btn--on-light{ color:var(--terra); }
.btn--on-light:hover{ color:#A63F22; }
.btn--on-light::after{ background:linear-gradient(100deg, transparent, rgba(193,80,46,.14), transparent); }

/* --------------------------- CONTEÚDO DO HERO --------------------------- */

.hero__inner{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(32px, 5vw, 90px);
  padding:clamp(40px, 5vw, 80px) var(--gutter) clamp(48px, 6vw, 96px);
}

.eyebrow{
  margin:0;
  color:#D3DDDB;
  font-size:clamp(12px, .9vw, 17px);
  font-weight:400;
  letter-spacing:.02em;
}
.eyebrow--caps{
  text-transform:uppercase;
  letter-spacing:.32em;
  color:var(--teal);
  font-size:clamp(10.5px, .78vw, 15px);
  font-weight:500;
}
.section--light .eyebrow--caps,
.section--paper .eyebrow--caps{ color:var(--teal-ink); }

.rule{
  width:clamp(58px, 4.75vw, 91px);
  height:1px;
  margin:clamp(14px, 1.5vw, 28px) 0 clamp(20px, 2.1vw, 40px);
}
.rule--center{ margin-inline:auto; }

.title{
  margin:0;
  font-size:clamp(30px, 2.86vw, 55px);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.015em;
}
.title__soft,
.title__strong{ display:block; }
.title__soft{
  font-weight:600;
  background:linear-gradient(118deg, #5FA8A0 0%, #AEC5C1 48%, #64ADA4 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.title__strong{ color:var(--white); }

.lede{
  max-width:clamp(320px, 25.4vw, 488px);
  margin:clamp(20px, 2.2vw, 43px) 0 0;
  color:var(--muted);
  font-size:clamp(13.5px, .87vw, 16.7px);
  line-height:1.62;
  text-wrap:pretty;
}

.actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(10px, .85vw, 16px);
  margin-top:clamp(16px, 1.75vw, 33px);
}
.actions--row{
  flex-direction:row;
  align-items:stretch;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:clamp(32px, 3.4vw, 64px);
}
.actions--center{ align-items:center; margin-top:clamp(24px, 2.6vw, 48px); }

.creds{
  display:flex;
  gap:clamp(16px, 1.55vw, 30px);
  margin:clamp(20px, 2.2vw, 42px) 0 0;
  color:var(--muted-dim);
  font-size:clamp(12px, .84vw, 16px);
}

/* --------------------------- CITAÇÃO (micro-interação) --------------------------- */

.quote{
  --mx:50%; --my:50%;
  position:relative;
  flex:0 0 auto;
  width:clamp(240px, 15.75vw, 302px);
  margin:0;
  padding:clamp(18px, 1.5vw, 28px) clamp(18px, 1.6vw, 30px) clamp(20px, 1.7vw, 32px);
  border:1px solid rgba(163,196,192,.42);
  border-left:0;
  background:linear-gradient(105deg, rgba(12,28,30,.18), rgba(12,28,30,.04));
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transform-style:preserve-3d;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease),
             transform .45s var(--ease), background-color .45s var(--ease);
  will-change:transform;
}
/* holofote que segue o cursor */
.quote::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(95,168,160,.20), transparent 68%);
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.quote:hover{
  border-color:rgba(95,168,160,.85);
  background:linear-gradient(105deg, rgba(14,38,40,.42), rgba(12,28,30,.12));
  box-shadow:0 24px 60px -34px rgba(95,168,160,.75);
}
.quote:hover::before{ opacity:1; }

.quote__mark{
  position:relative;
  width:clamp(24px, 1.8vw, 34px);
  height:auto;
  margin-bottom:clamp(12px, 1.15vw, 22px);
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.quote:hover .quote__mark{
  transform:translateY(-3px) scale(1.12);
  filter:drop-shadow(0 6px 14px rgba(95,168,160,.55));
}

.quote blockquote{
  position:relative;
  margin:0;
  color:#CBD6D4;
  font-size:clamp(11.5px, .79vw, 15.2px);
  line-height:1.62;
  transition:color .45s var(--ease);
}
.quote:hover blockquote{ color:var(--white); }

/* ============================================================
   BLOCOS COMPARTILHADOS
   ============================================================ */

.wrap{ padding-inline:var(--gutter); }
/* para blocos com borda/fundo próprios: recuo por margem, não por padding */
.inset{ margin-inline:var(--gutter); }

.center-col{ text-align:center; }

.section{ padding-block:clamp(56px, 6.6vw, 122px); }
.section--dark { background:var(--ink);  color:var(--white); }
.section--light{ background:var(--paper); color:var(--ink-text); }
.section--paper{ background:var(--paper-alt); color:var(--ink-text); }

.h2{
  margin:0;
  font-size:clamp(21px, 1.85vw, 36px);
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.section--light .h2,
.section--paper .h2{ color:var(--ink-text); }

.lead{
  max-width:clamp(320px, 41vw, 790px);
  margin:clamp(18px, 1.9vw, 36px) auto 0;
  color:var(--muted);
  font-size:clamp(13px, .88vw, 17px);
  line-height:1.72;
  text-wrap:balance;
}
.lead--narrow{ max-width:clamp(320px, 36vw, 690px); }
.section--light .lead,
.section--paper .lead{ color:var(--body-light); }
.lead em{ font-style:normal; color:var(--teal); }
.lead + .lead{ margin-top:clamp(14px, 1.4vw, 26px); }

/* ============================================================
   2. SOBRE — fundo em vídeo
   ============================================================ */

.sobre{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding:clamp(80px, 12vw, 200px) var(--gutter) clamp(56px, 6.5vw, 110px);
}
.sobre__media{ position:absolute; inset:0; z-index:-1; }
.sobre__video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
}
.sobre__veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(10,20,26,.30) 0%, rgba(10,20,26,.05) 22%, rgba(11,22,28,.72) 52%, rgba(12,24,30,.96) 78%, var(--ink) 100%);
}
.sobre__inner{ width:100%; }

/* ============================================================
   3. COMO FUNCIONA — timeline
   ============================================================ */

.timeline{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 1.15vw, 22px);
  margin:clamp(40px, 4.4vw, 84px) 0 0;
  padding-block:0;
  list-style:none;
  text-align:left;
}

.step__head{
  display:flex;
  align-items:center;
  gap:clamp(12px, 1.15vw, 22px);
  margin-bottom:clamp(14px, 1.3vw, 25px);
}
.step__icon{
  flex:none;
  width:clamp(36px, 2.7vw, 52px);
  height:auto;
  opacity:0;
  transform:translateY(10px) scale(.9);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(.1s + var(--i) * .42s);
}
.step__link{ flex:1; display:flex; align-items:center; min-width:0; }
.step__line{
  flex:1;
  height:1px;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s cubic-bezier(.65,0,.35,1);
  transition-delay:calc(.28s + var(--i) * .42s);
}
.step__arrow{
  flex:none;
  opacity:0;
  transition:opacity .35s var(--ease);
  transition-delay:calc(1.05s + var(--i) * .42s);
}
.step__title,
.step__text{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.step__title{ transition-delay:calc(.42s + var(--i) * .42s); }
.step__text { transition-delay:calc(.52s + var(--i) * .42s); }

.timeline.is-in .step__icon { opacity:1; transform:none; }
.timeline.is-in .step__line { transform:scaleX(1); }
.timeline.is-in .step__arrow{ opacity:1; }
.timeline.is-in .step__title,
.timeline.is-in .step__text { opacity:1; transform:none; }

.step__title{
  margin:0 0 clamp(8px, .75vw, 14px);
  color:var(--teal-ink);
  font-size:clamp(13.5px, .93vw, 18px);
  font-weight:600;
  line-height:1.35;
}
.step__text{
  margin:0;
  color:var(--body-light);
  font-size:clamp(12.5px, .86vw, 16.5px);
  line-height:1.62;
  padding-right:clamp(8px, 1vw, 20px);
  text-wrap:pretty;
}

/* ============================================================
   4. INTERVENÇÕES
   ============================================================ */

.cards{
  display:grid;
  padding:0;
  grid-template-columns:repeat(6, 1fr);
  margin-top:clamp(36px, 4vw, 74px);
  list-style:none;
  border:1px solid var(--line-dark);
  background:
    radial-gradient(58% 55% at 0% 24%, rgba(95,168,160,.17), transparent 72%),
    radial-gradient(58% 55% at 0% 76%, rgba(95,168,160,.15), transparent 72%);
}
.card{
  position:relative;
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(14px, 1.35vw, 26px);
  min-height:clamp(150px, 13.2vw, 254px);
  padding:clamp(24px, 2.3vw, 44px) clamp(16px, 1.6vw, 30px);
  border-right:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  text-align:center;
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease),
             background-color .45s var(--ease);
  transition-delay:calc(var(--i) * .12s);
}
.card--wide{ grid-column:span 3; }
.card:nth-child(3),
.card:nth-child(5){ border-right:0; }
.card:nth-child(4),
.card:nth-child(5){ border-bottom:0; }

.cards.is-in .card{ opacity:1; transform:none; }

.card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:radial-gradient(80% 90% at 50% 100%, rgba(95,168,160,.20), transparent 70%);
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.card:hover::before{ opacity:1; }
.card:hover{ background-color:rgba(95,168,160,.05); }

.card__icon{
  width:clamp(56px, 4.7vw, 91px);
  height:auto;
  transition:transform .45s var(--ease), filter .45s var(--ease);
}
.card:hover .card__icon{
  transform:translateY(-4px) scale(1.06);
  filter:drop-shadow(0 12px 26px rgba(95,168,160,.45));
}
.card__title{
  position:relative;
  margin:0;
  color:#E4EBE9;
  font-size:clamp(14px, .96vw, 18.5px);
  font-weight:400;
  line-height:1.4;
  transition:color .35s var(--ease);
}
.card:hover .card__title{ color:#fff; }

/* ============================================================
   5. ATENDIMENTOS
   ============================================================ */

.frame{
  margin-top:clamp(34px, 3.6vw, 68px);
  padding:clamp(8px, .9vw, 17px) 0 0 clamp(6px, .55vw, 10px);
  border-top:1px solid rgba(95,168,160,.5);
  border-left:1px solid rgba(95,168,160,.5);
}
.frame img{ width:100%; height:auto; }

.modes{
  display:grid;
  padding:0;
  grid-template-columns:1fr 1fr;
  margin-top:clamp(20px, 2.1vw, 40px);
  list-style:none;
  border:1px solid rgba(95,168,160,.3);
}
.mode{
  padding:clamp(18px, 1.6vw, 30px) clamp(18px, 1.7vw, 32px) clamp(20px, 1.8vw, 34px);
  background:radial-gradient(90% 130% at 0% 50%, rgba(95,168,160,.16), transparent 72%);
}
.mode + .mode{ border-left:1px solid rgba(95,168,160,.3); }
.mode img{ width:clamp(22px, 1.55vw, 30px); height:auto; margin-bottom:clamp(10px, .95vw, 18px); }
.mode h3{
  margin:0 0 clamp(8px, .7vw, 13px);
  color:var(--teal);
  font-size:clamp(14px, .96vw, 18.5px);
  font-weight:500;
}
.mode p{
  margin:0;
  color:var(--muted);
  font-size:clamp(12.5px, .84vw, 16px);
  line-height:1.6;
  text-wrap:pretty;
}

/* ============================================================
   6. DEPOIMENTOS
   ============================================================ */

.reviews__note{
  margin:clamp(18px, 1.9vw, 34px) 0 0;
  color:var(--body-light);
  font-size:clamp(12.5px, .86vw, 16.5px);
}
.reviews__note strong{ color:var(--ink-text); font-weight:600; }

.reviews{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-items:start;
  gap:clamp(16px, 1.75vw, 34px);
  margin:clamp(30px, 3.2vw, 60px) 0 0;
  padding-block:0;
  list-style:none;
}
.reviews li{
  overflow:hidden;
  border-radius:4px;
  background:#fff;
  box-shadow:0 14px 34px -24px rgba(20,35,43,.55);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.reviews li:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 48px -26px rgba(20,35,43,.45);
}
.reviews img{ width:100%; height:auto; }

/* ============================================================
   7. VAMOS CONVERSAR
   ============================================================ */

.cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:clamp(430px, 37.7vw, 725px);
  background:var(--ink-deep) url("assets/desktop%20conversar.png") center / cover no-repeat;
}
.cta__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(8,16,20,0) 40%, rgba(8,16,20,.35) 70%, rgba(8,16,20,.55) 100%);
}
.cta__inner{ width:100%; padding-inline:var(--gutter); }
.cta__copy{
  max-width:clamp(300px, 27.5vw, 500px);
  margin-left:auto;
}

/* ============================================================
   8. RODAPÉ
   ============================================================ */

.footer{
  background:#101C22;
  padding-block:clamp(44px, 4.6vw, 88px) clamp(22px, 2.4vw, 42px);
  border-top:1px solid rgba(120,176,172,.14);
}
.footer__brand{
  margin:0 0 clamp(26px, 2.8vw, 52px);
  color:var(--white);
  font-size:clamp(13px, .9vw, 17px);
  font-weight:700;
}
.footer__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.3fr;
  gap:clamp(22px, 2.6vw, 50px);
  align-items:start;
}
.footer__col h3{
  margin:0;
  color:var(--teal);
  font-size:clamp(10px, .72vw, 14px);
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.footer__rule{
  display:block;
  width:clamp(34px, 2.5vw, 48px);
  height:1px;
  margin:clamp(10px, 1vw, 18px) 0 clamp(14px, 1.3vw, 24px);
  background:rgba(120,176,172,.45);
}
.footer__col p{
  margin:0;
  color:#C4CFCD;
  font-size:clamp(12px, .82vw, 15.5px);
  line-height:1.75;
}
.footer__list{ margin:0; padding:0; list-style:none; display:grid; gap:clamp(8px, .75vw, 14px); }
.footer__list li{ display:flex; align-items:center; gap:10px; }
.footer__list img{ width:clamp(15px, 1.05vw, 20px); height:auto; }
.footer__list a{
  color:#C4CFCD;
  font-size:clamp(12px, .82vw, 15.5px);
  text-decoration:none;
  transition:color .25s ease;
}
.footer__list a:hover{ color:var(--teal); }

.footer__map{
  overflow:hidden;
  border-radius:3px;
  border:1px solid rgba(120,176,172,.2);
  aspect-ratio:16 / 9;
}
.footer__map iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.92); }

.footer__divider{
  margin:clamp(34px, 3.6vw, 68px) 0 clamp(16px, 1.6vw, 30px);
  border:0;
  border-top:1px solid rgba(255,255,255,.10);
}
.footer__legal{
  margin:0;
  color:var(--muted-dim);
  font-size:clamp(11.5px, .78vw, 14.5px);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width:1180px){
  :root{ --gutter:clamp(20px, 7vw, 96px); }

  .title      { font-size:clamp(30px, 4.4vw, 46px); }
  .lede       { max-width:44ch; font-size:clamp(13.5px, 1.35vw, 16px); }
  .nav__links { gap:clamp(16px, 2.6vw, 34px); }
  .nav__links a,
  .nav__logo,
  .btn        { font-size:clamp(13px, 1.4vw, 16px); }
  .quote      { width:clamp(230px, 24vw, 290px); }
  .quote blockquote{ font-size:clamp(12px, 1.2vw, 14.5px); }

  .h2         { font-size:clamp(21px, 2.9vw, 32px); }
  .lead       { max-width:62ch; font-size:clamp(13px, 1.4vw, 16px); }
  .eyebrow--caps{ font-size:clamp(10.5px, 1.15vw, 13px); }
  .step__title{ font-size:clamp(13.5px, 1.45vw, 16px); }
  .step__text { font-size:clamp(12.5px, 1.35vw, 15px); }
  .card__title{ font-size:clamp(14px, 1.5vw, 16.5px); }
  .cta__copy  { max-width:clamp(300px, 36vw, 430px); }
}

@media (max-width:900px){
  /* ---- nav enxuta: marca + CTA ---- */
  .nav{ grid-template-columns:1fr auto; }
  .nav__links,
  .nav__toggle{ display:none; }

  /* ---- HERO: retrato limpo no topo, texto abaixo ---- */
  .hero{
    min-height:auto;
    background-image:none;
    background-color:var(--ink-deep);
    animation:none;
  }
  /* a faixa da foto: recorte vertical dedicado, retrato centralizado,
     altura amarrada ao próprio formato da imagem (880 × 1080) */
  .hero{ --band:min(122.7vw, 54vh); }
  .hero__scrim{
    inset:0 0 auto 0;
    height:var(--band);
    background:url("assets/hero-mobile.png") center top / cover no-repeat;
  }
  .hero__scrim::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:20%;
    background:linear-gradient(180deg, rgba(10,20,26,0), var(--ink-deep) 92%);
  }
  .hero__inner{
    position:relative;
    z-index:1;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:clamp(26px, 5vw, 42px);
    padding-top:calc(var(--band, 46vh) - clamp(80px, 22vw, 150px) - 20px);
    padding-bottom:clamp(40px, 8vw, 72px);
  }
  .title{ font-size:clamp(28px, 6.4vw, 44px); }
  .quote{
    width:100%;
    max-width:440px;
    border-left:1px solid rgba(163,196,192,.42);
  }

  /* ---- SOBRE: vídeo inteiro (16:9) no topo, texto abaixo ---- */
  .sobre{
    display:block;
    min-height:auto;
    padding-top:calc(56.25vw + clamp(18px, 4.5vw, 38px));
    padding-bottom:clamp(48px, 9vw, 80px);
  }
  .sobre__media{
    inset:0 0 auto 0;
    height:auto;
    aspect-ratio:16 / 9;
  }
  .sobre__video{
    height:100%;
    object-fit:contain;      /* mostra o quadro inteiro, sem zoom */
    object-position:center;
    background:#000;
  }
  .sobre__veil{
    background:linear-gradient(180deg, rgba(10,20,26,0) 78%, var(--ink) 100%);
  }

  /* ---- timeline: trilho vertical ---- */
  .timeline{
    grid-template-columns:1fr;
    gap:0;
    margin-top:clamp(34px, 7vw, 56px);
  }
  .step{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:clamp(14px, 3.6vw, 22px);
  }
  .step__head{
    grid-row:1 / span 2;
    flex-direction:column;
    align-items:center;
    height:100%;
    margin-bottom:0;
    gap:clamp(10px, 2.4vw, 16px);
  }
  .step__link{ flex:1; flex-direction:column; width:auto; }
  .step__line{
    flex:1;
    width:1px;
    height:auto;
    transform:scaleY(0);
    transform-origin:top;
  }
  .timeline.is-in .step__line{ transform:scaleY(1); }
  .step__arrow{ transform:rotate(90deg); margin-top:1px; }

  .step__title{ margin-top:clamp(10px, 2.2vw, 15px); }
  .step__text{
    padding-right:0;
    padding-bottom:clamp(26px, 6vw, 42px);
  }
  .step--last .step__link{ display:none; }
  .step--last .step__text{ padding-bottom:0; }

  /* ---- cards: duas colunas compactas ---- */
  .cards{ grid-template-columns:1fr 1fr; }
  .card,
  .card--wide{
    grid-column:span 1;
    min-height:clamp(132px, 26vw, 190px);
    gap:clamp(12px, 3vw, 20px);
    padding:clamp(20px, 4.6vw, 34px) clamp(12px, 3vw, 22px);
  }
  .card__icon{ width:clamp(50px, 12.5vw, 74px); }
  .card__title{ font-size:clamp(13px, 3.3vw, 16px); }
  .card:nth-child(odd) { border-right:1px solid var(--line-dark); }
  .card:nth-child(even){ border-right:0; }
  .card:nth-child(4)   { border-bottom:1px solid var(--line-dark); }
  .card:nth-child(5)   { grid-column:span 2; border-right:0; border-bottom:0; }
  .card--wide .card__title br{ display:none; }

  .modes{ grid-template-columns:1fr; }
  .mode + .mode{ border-left:0; border-top:1px solid rgba(95,168,160,.3); }

  .reviews{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }

  /* ---- CTA final: retrato limpo no topo, texto abaixo ---- */
  .cta{
    --band:46vh;
    display:block;
    min-height:auto;
    background-image:none;
    background-color:var(--ink-deep);
    padding-block:calc(var(--band, 46vh) + clamp(20px, 5vw, 40px)) clamp(48px, 9vw, 80px);
  }
  .cta__scrim{
    inset:0 0 auto 0;
    height:var(--band, 46vh);
    background:url("assets/desktop%20conversar.png") 24% top / cover no-repeat;
  }
  .cta__scrim::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:20%;
    background:linear-gradient(180deg, rgba(8,16,20,0), var(--ink-deep) 92%);
  }
  .cta__inner{ position:relative; z-index:1; }
  .cta__copy{ max-width:none; margin-inline:auto; }
  .actions--center .btn{ width:100%; max-width:340px; }

  /* botões laranja (sólido e contorno): +5px de respiro em cima e embaixo */
  .btn--terra,
  .btn--outline{ padding-block:calc(clamp(13px, 1.18vw, 23px) + 5px); }

  /* ---- rodapé ---- */
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__map{ grid-column:span 2; max-width:420px; }
}

@media (max-width:560px){

  .actions{ align-self:stretch; width:100%; }
  .actions--row{ flex-direction:column; align-items:stretch; }
  .btn--terra,
  .btn--outline{ width:100%; padding-inline:16px; }
  .btn--terra span,
  .btn--outline span{ white-space:normal; }

  .title{ font-size:clamp(26px, 7.6vw, 34px); }
  .title__soft br,
  .title__strong br{ display:none; }
  .h2 br,
  .lead br{ display:none; }
  .step__title{ font-size:14px; }
  .creds{ font-size:12.5px; }

  .footer__grid{ grid-template-columns:1fr; }
  .footer__map{ grid-column:span 1; }
}

/* ============================================================
   ACESSIBILIDADE
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .intro{ display:none; }
  .intro-el{ animation:none; opacity:1; }
  .intro-el,
  [data-reveal],
  .step__icon,
  .step__title,
  .step__text,
  .card{ opacity:1 !important; transform:none !important; filter:none !important; }
  .step__line{ transform:scaleX(1) !important; }
  .step__arrow{ opacity:1 !important; }
}

:where(a, button):focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}