/* =========================================================
   Clínica Amor e Vida — Teste Ergométrico
   1. Tokens
   2. Base e tipografia
   3. Componentes
   4. Header / navegação / progresso
   5. Hero cinematográfico
   6. Seções editoriais
   7. Formulário
   8. Mapa / CTA final
   9. Footer / barra mobile
   10. Responsivo
   11. Movimento reduzido
   15. Rótulos longos de CTA
   16. Mídia pendente
   17. Smartphone da seção Localização
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --wine:#6B1F2A;
  --wine-deep:#491627;          /* mesmo vinho da logo oficial */
  --cream:#F5E9DD;
  --beige:#EFE0D2;
  --warm:#FAF7F3;
  --ink:#2B2422;
  --muted:#6E5E59;

  --rule:rgba(90,40,40,.14);
  --rule-soft:rgba(90,40,40,.08);

  --font-display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --font-body:"Manrope","Helvetica Neue",Arial,sans-serif;

  --container:1240px;
  --gutter:clamp(20px,5vw,44px);
  --space:clamp(72px,9vw,142px);

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

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--warm);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.68;
  font-weight:400;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (min-width:1024px){ body{font-size:1.125rem} }

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

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--wine);
  margin:0;
  font-weight:700;
  letter-spacing:-.032em;
}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
a{color:inherit}

section[id],footer[id],main[id]{scroll-margin-top:96px}

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

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--wine);color:var(--cream);
  padding:.75rem 1.25rem;font-size:.9rem;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.hero :focus-visible,.header:not(.is-stuck) :focus-visible,
.equip :focus-visible,.final-cta :focus-visible{outline-color:var(--cream)}

.h2{
  font-size:clamp(1.95rem,3.7vw,3.4rem);
  line-height:1.04;
  margin-bottom:.6em;
}
.h2--light{color:var(--cream)}

.lead{
  font-size:clamp(1.1rem,1.5vw,1.32rem);
  line-height:1.55;
  color:var(--ink);
  letter-spacing:-.012em;
}

/* Reveal — fallback sem GSAP usa .is-visible */
.js [data-reveal],.js [data-hero]{opacity:0;transform:translateY(16px)}
.js [data-hero].is-visible{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
/* CDN do GSAP lento: o hero aparece de qualquer jeito */
.hero-fallback [data-hero]{
  opacity:1!important;transform:none!important;
  transition:opacity .6s var(--ease-out);
}
.js [data-reveal].is-visible{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}

/* Máscaras de linha usadas no split dos títulos */
.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line-inner{display:block}

/* ---------- 3. Componentes ---------- */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-body);
  font-size:.7rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--wine);
  margin:0 0 1.35rem;
}
.eyebrow__dot{
  width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none;
}
.eyebrow--light{color:var(--cream)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);
  font-size:.775rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.05rem 1.7rem;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  line-height:1.2;
  text-align:left;
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn__arrow{
  display:inline-block;margin-left:auto;padding-left:2.5rem;
  font-size:1rem;line-height:1;
  transition:transform .4s var(--ease-out);
}
.btn:hover .btn__arrow{transform:translate(4px,-4px)}

.btn--cta{
  justify-content:space-between;
  min-width:min(21rem,100%);
  padding:1.15rem 1.5rem 1.15rem 1.6rem;
  background:var(--wine);color:#fff;
}
.btn--cta:hover{background:var(--wine-deep)}
.btn--light{background:var(--cream);color:var(--wine-deep)}
.btn--light:hover{background:#fff}
.btn--sm{padding:.72rem 1.15rem;font-size:.68rem;min-width:0}
.btn--sm .btn__arrow{padding-left:1.1rem;font-size:.82rem}
.btn--block{width:100%}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

.link-arrow{
  display:inline-flex;align-items:baseline;gap:.5rem;
  font-size:.98rem;font-weight:600;
  color:var(--wine);
  text-decoration:none;
  position:relative;
  padding-bottom:3px;
}
.link-arrow::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.link-arrow:hover::after{transform:scaleX(0)}
.link-arrow span{transition:transform .4s var(--ease-out)}
.link-arrow:hover span{transform:translate(3px,-3px)}

/* ---------- 4. Header ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;pointer-events:none}
.progress__bar{
  display:block;height:100%;width:100%;
  background:var(--wine);
  transform:scaleX(0);transform-origin:0 50%;
}

.header{
  position:fixed;top:0;left:0;right:0;z-index:140;
  --h-fg:var(--cream);
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease),border-color .5s var(--ease);
}
.header.is-stuck,
.header.is-menu-open{--h-fg:var(--ink)}
.header.is-stuck{
  background:rgba(250,247,243,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--rule-soft);
}
.header__inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:1.15rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;
  transition:padding .5s var(--ease);
}
.header.is-stuck .header__inner{padding-block:.85rem}

.brand{display:block;line-height:0;text-decoration:none;position:relative;z-index:2}
.brand__logo{
  width:auto;height:26px;
  transition:filter .5s var(--ease),height .5s var(--ease);
}
.header:not(.is-stuck):not(.is-menu-open) .brand__logo{
  filter:brightness(0) invert(1) sepia(.18) saturate(.6) brightness(1.04);
}
.header.is-stuck .brand__logo{height:23px}

.nav{display:flex;align-items:center;gap:2.15rem}
.nav a{
  position:relative;
  text-decoration:none;
  font-size:.94rem;font-weight:500;
  color:var(--h-fg);
  padding-bottom:3px;
  transition:color .4s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.nav a:hover::after{transform:scaleX(1)}
.nav__cta{display:none}

.header__actions{display:flex;align-items:center;gap:1rem;position:relative;z-index:2}
.header__cta{background:transparent;color:var(--h-fg);border-color:rgba(245,233,221,.45)}
.header__cta:hover{background:var(--cream);color:var(--wine-deep);border-color:var(--cream)}
.header.is-stuck .header__cta{background:var(--wine);color:#fff;border-color:var(--wine)}
.header.is-stuck .header__cta:hover{background:var(--wine-deep);border-color:var(--wine-deep)}

.menu-toggle{
  display:none;
  width:34px;height:26px;padding:0;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;
}
.menu-toggle__bar{
  display:block;height:1.5px;background:var(--h-fg);
  transition:transform .45s var(--ease-out),width .45s var(--ease-out);
}
.menu-toggle__bar:first-child{width:28px}
.menu-toggle__bar:last-child{width:19px}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child{width:26px;transform:translateY(4.25px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child{width:26px;transform:translateY(-4.25px) rotate(-45deg)}

/* ---------- 5. Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;          /* fallback */
  min-height:100svh;         /* sem salto com a barra do navegador */
  display:flex;align-items:center;
  padding-top:clamp(7.5rem,13vw,10rem);   /* header sobreposto */
  padding-bottom:clamp(4rem,8vw,7rem);
  background:var(--wine-deep);
  overflow:hidden;
}
/* svh (e não dvh) evita que o hero mude de altura quando a barra
   do navegador some durante o scroll no mobile */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--wine-deep)}
.hero__bg video,
.hero__bg img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 50%;
  filter:blur(1.6px) saturate(.9) brightness(.9) contrast(.96);
  /* zoom + deslocamento: joga o equipamento para o centro-direita,
     deixando a área da copy visualmente limpa */
  transform:translateX(5%) scale(1.16);
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(41,11,17,.55) 0%,rgba(41,11,17,0) 26%),
    linear-gradient(0deg,rgba(41,11,17,.6) 0%,rgba(41,11,17,0) 42%),
    linear-gradient(90deg,rgba(55,17,23,.93) 0%,rgba(55,17,23,.76) 34%,rgba(55,17,23,.34) 66%,rgba(55,17,23,.08) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__copy{max-width:42rem;color:var(--cream)}
.hero__title{
  font-size:clamp(2.6rem,5vw,4.3rem);
  line-height:.99;
  letter-spacing:-.042em;
  font-weight:800;
  color:var(--cream);
  margin-bottom:1.35rem;
}
.hero__lead{
  font-size:clamp(1.05rem,1.35vw,1.2rem);
  line-height:1.6;
  color:rgba(245,233,221,.82);
  max-width:31rem;
  margin-bottom:2.35rem;
}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-bottom:2.4rem}
.hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(245,233,221,.18);
  font-size:.82rem;letter-spacing:.06em;
  color:rgba(245,233,221,.7);
  max-width:31rem;
}
.hero__meta i{font-style:normal;opacity:.5}

/* ---------- 6. Seções ---------- */
.section{padding-block:var(--space)}
.section--warm{background:var(--warm)}
.section--cream{background:var(--cream)}
.section--beige{background:var(--beige)}
.section--tight{padding-block:clamp(58px,7vw,104px)}

/* 6.1 Intro editorial */
.intro__grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2rem,6vw,6.5rem);
  align-items:end;
}
.intro__title{
  font-size:clamp(2.1rem,4.4vw,4.05rem);
  line-height:1.02;
  letter-spacing:-.038em;
  margin:0;
}
.intro__body{max-width:33rem}
.intro__body p{color:var(--muted)}
.intro__body p.lead{color:var(--ink);margin-bottom:1.25rem}

.facts{
  list-style:none;margin:clamp(3.25rem,6vw,5.5rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0 clamp(1.5rem,3vw,3.25rem);
}
.facts li{padding-top:1.15rem;border-top:1px solid var(--rule)}
.facts b{
  display:block;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wine);font-weight:700;margin-bottom:.5rem;
}
.facts span{display:block;font-size:.94rem;line-height:1.55;color:var(--muted)}

/* 6.2 Fotografia full bleed (atendimento) */
.fullshot{
  position:relative;
  width:100%;
  min-height:80vh;
  min-height:80svh;
  display:flex;align-items:flex-end;
  background:var(--warm);
  overflow:hidden;
}
.fullshot__media{position:absolute;inset:0;overflow:hidden}
.fullshot__media img{
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 56%;
}
/* escurece só a faixa onde o texto vive — o resto da foto fica limpo */
.fullshot__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg,
      rgba(41,11,17,.93) 0%,
      rgba(41,11,17,.82) 18%,
      rgba(41,11,17,.63) 38%,
      rgba(41,11,17,.26) 58%,
      rgba(41,11,17,0) 74%),
    linear-gradient(90deg,rgba(41,11,17,.34) 0%,rgba(41,11,17,0) 58%);
}
.fullshot__inner{
  position:relative;z-index:2;width:100%;
  padding-block:clamp(2rem,4vw,3.4rem);
  color:var(--cream);
}
.fullshot__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.25rem,4vw,4rem);
  align-items:end;
}
.fullshot__title{
  font-size:clamp(2rem,4.2vw,3.7rem);
  line-height:1.02;letter-spacing:-.036em;
  color:var(--cream);
  max-width:14ch;margin:0;
}
.fullshot__text p{
  color:rgba(245,233,221,.84);
  font-size:1rem;line-height:1.6;
  max-width:34rem;
}
.fullshot__text p + p{margin-top:.9rem;color:rgba(245,233,221,.7)}


/* 6.4 Equipamento — faixa vinho */
.equip{background:var(--wine-deep);color:var(--cream);padding-block:clamp(56px,7vw,96px) clamp(64px,8vw,120px);overflow:hidden}
.equip__media{--h:clamp(320px,50vw,660px);margin:0;overflow:hidden}
.equip__media img{
  width:100%;height:var(--h);
  object-fit:cover;object-position:50% 52%;
}

/* folga vertical para o parallax não abrir vão na borda */
@media (min-width:1024px){
  [data-parallax] img{height:calc(var(--h,100%) * 1.12)}
}
.equip__panelwrap{
  max-width:var(--container);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;justify-content:flex-end;
}
.equip__panel{
  position:relative;
  background:var(--wine-deep);
  max-width:36rem;
  margin-top:clamp(-150px,-9vw,-72px);
  padding:clamp(2rem,3.4vw,3rem) 0 0 clamp(2rem,3.4vw,3.25rem);
}
/* o plano vinho segue até a borda direita da tela, sem sobra da foto */
@media (min-width:1025px){
  .equip__panel::after{
    content:"";position:absolute;
    top:0;bottom:0;left:100%;width:50vw;
    background:var(--wine-deep);
  }
}
.equip__panel p{color:rgba(245,233,221,.76);margin-bottom:2rem;max-width:30rem}

/* 6.5 Processo — fundo infinito + timeline vertical */
.processo{
  --p-bg:#F7F0E7;               /* creme muito claro */
  --p-ink:var(--wine);          /* títulos em vinho */
  --p-muted:#635650;            /* descrições em marrom quente */
  position:relative;
  background:var(--p-bg);
  color:var(--p-ink);
  padding-block:clamp(90px,11vw,168px);
  /* sem overflow:hidden — quebraria o sticky do fundo e do título */
}

/* camada 1: partículas do símbolo do infinito */
.processo__fundo{position:absolute;inset:0;z-index:0}
.processo__sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  width:100%;
}
.processo__sticky canvas{display:block;width:100%;height:100%;pointer-events:none}

/* camada 2: véu creme — limpa a coluna do título e deixa o
   infinito respirar no centro/direita */
.processo__vinheta{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(247,240,231,.97) 0%,
      rgba(247,240,231,.88) 26%,
      rgba(247,240,231,.3) 44%,
      rgba(247,240,231,.16) 56%,
      rgba(247,240,231,.46) 72%,
      rgba(247,240,231,.6) 100%),
    linear-gradient(180deg,rgba(247,240,231,.6) 0%,rgba(247,240,231,0) 18%,rgba(247,240,231,0) 82%,rgba(247,240,231,.6) 100%);
}

.processo__grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.processo__head{position:sticky;top:clamp(6rem,11vh,8.5rem)}
.processo__title{
  font-size:clamp(2.6rem,4.4vw,4.6rem);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:800;
  color:var(--p-ink);
  margin:0;
}
.processo__lead{
  margin:1.6rem 0 0;
  font-size:clamp(1.05rem,1.2vw,1.2rem);
  line-height:1.55;font-weight:500;
  color:var(--p-muted);
  max-width:26rem;
}

/* timeline */
.timeline-wrap{
  --tl-dot:58px;
  --tl-col:88px;
  position:relative;
}
.timeline{list-style:none;margin:0;padding:0}
.tl-step{
  display:grid;
  grid-template-columns:var(--tl-col) minmax(0,1fr);
  gap:clamp(1rem,2vw,1.75rem);
  align-items:start;
  min-height:32vh;
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
}
.tl-step:last-child{min-height:0;padding-bottom:0}

.timeline__track{
  position:absolute;
  left:calc(var(--tl-dot) / 2 - 1px);
  top:calc(var(--tl-dot) / 2);
  width:2px;height:0;
  background:rgba(107,31,42,.16);
  overflow:hidden;
}
.timeline__progress{
  display:block;width:100%;height:100%;
  background:var(--wine);
  transform:scaleY(0);transform-origin:top center;
}

.tl-marker{
  position:relative;z-index:1;
  width:var(--tl-dot);height:var(--tl-dot);
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--p-bg);
  border:1px solid rgba(107,31,42,.3);
  color:rgba(107,31,42,.55);
  font-family:var(--font-body);
  font-size:.95rem;font-weight:700;letter-spacing:.06em;
  transform:scale(.92);
  transition:background-color .5s var(--ease),border-color .5s var(--ease),
             color .5s var(--ease),transform .5s var(--ease-out),box-shadow .5s var(--ease);
}
.tl-body{
  padding-top:.55rem;
  transform:translateX(8px);
  transition:transform .6s var(--ease-out);
}
.tl-step h3{
  font-size:clamp(1.55rem,2.3vw,2.25rem);
  line-height:1.1;letter-spacing:-.03em;font-weight:700;
  color:var(--p-ink);
  opacity:.48;
  margin-bottom:.55rem;
  transition:opacity .5s var(--ease);
}
.tl-step p{
  font-size:clamp(1.05rem,1.25vw,1.28rem);
  line-height:1.55;font-weight:500;
  color:var(--p-muted);
  opacity:.45;
  margin:0;max-width:34rem;
  transition:opacity .5s var(--ease);
}

/* percorrido */
.tl-step.is-done .tl-marker{
  background:rgba(107,31,42,.55);
  border-color:transparent;
  color:var(--cream);
}
.tl-step.is-done h3{opacity:.7}
.tl-step.is-done p{opacity:.62}
.tl-step.is-done .tl-body{transform:none}

/* ativo */
.tl-step.is-active .tl-marker{
  background:var(--wine);
  border-color:var(--wine);
  color:#fff;
  transform:scale(1);
  box-shadow:0 0 0 5px rgba(107,31,42,.09);
}
.tl-step.is-active h3{opacity:1}
.tl-step.is-active p{opacity:1}
.tl-step.is-active .tl-body{transform:none}

/* 6.6 Indicações */
.indications{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:start;
}
.indications__intro p{color:var(--muted);max-width:32rem}
.indications__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.indications__list li{
  padding:.95rem 0;
  border-bottom:1px solid var(--rule-soft);
  font-size:1.02rem;
  display:flex;align-items:baseline;gap:.9rem;
}
.indications__list li::before{
  content:"";width:14px;height:1px;background:var(--wine);
  flex:none;transform:translateY(-4px);opacity:.55;
}
.indications__note{
  grid-column:1/-1;font-size:.9rem;color:var(--muted);
  border-left:1px solid var(--rule);padding-left:1.15rem;max-width:44rem;
}

/* 6.7 FAQ */
.faq-wrap{
  display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,5rem);align-items:start;
}
.faq{border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule-soft)}
.faq__item summary{
  cursor:pointer;list-style:none;
  padding:1.4rem 2.5rem 1.4rem 0;
  position:relative;
  font-family:var(--font-display);
  font-size:1.06rem;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);
  transition:color .35s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--wine)}
.faq__item summary::after{
  content:"";position:absolute;right:0;top:50%;
  width:13px;height:1px;background:var(--wine);
  transform:translateY(-50%);
}
.faq__item summary::before{
  content:"";position:absolute;right:6px;top:50%;
  width:1px;height:13px;background:var(--wine);
  transform:translateY(-50%);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.faq__item[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq__answer{padding:0 3rem 1.6rem 0}
.faq__answer p{color:var(--muted);font-size:.98rem}

/* ---------- 7. Formulário ---------- */
.booking{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,7vw,7rem);align-items:start;
}
.booking__text .lead{color:var(--muted);max-width:27rem}
.booking__points{
  list-style:none;margin:2.25rem 0 0;padding:0;
  border-top:1px solid var(--rule);max-width:25rem;
}
.booking__points li{
  padding:.85rem 0;border-bottom:1px solid var(--rule-soft);
  font-size:.95rem;color:var(--muted);
}
.booking__direct{margin-top:2.25rem;font-size:.95rem;color:var(--muted)}

.form{padding-top:.35rem}
.field{position:relative;margin-bottom:2.1rem}
.field input{
  width:100%;
  font-family:var(--font-body);font-size:1.05rem;color:var(--ink);
  background:transparent;
  border:0;border-bottom:1px solid var(--rule);
  border-radius:0;
  padding:1.65rem 0 .65rem;
  transition:border-color .35s var(--ease);
}
.field input:focus{outline:none}
.field label{
  position:absolute;left:0;top:1.5rem;
  font-size:1.02rem;color:var(--muted);
  pointer-events:none;
  transform-origin:0 50%;
  transition:transform .4s var(--ease-out),color .4s var(--ease),letter-spacing .4s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform:translateY(-1.6rem) scale(.66);
  color:var(--wine);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}
.field__line{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--wine);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.field input:focus ~ .field__line{transform:scaleX(1)}
.field__hint{margin:.5rem 0 0;font-size:.8rem;color:var(--muted);opacity:.8}
.field__error{
  margin:.5rem 0 0;font-size:.83rem;color:#9d2f2f;
  opacity:0;transform:translateY(-4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.field__error:not(:empty){opacity:1;transform:none}
.field input[aria-invalid="true"]{border-bottom-color:#9d2f2f}
.field input[aria-invalid="true"] ~ .field__line{background:#9d2f2f}

.check{display:flex;gap:.75rem;align-items:flex-start;margin:0 0 2rem}
.check input{margin-top:.3rem;width:16px;height:16px;flex:none;accent-color:var(--wine);cursor:pointer}
.check label{font-size:.9rem;color:var(--muted);line-height:1.5;cursor:pointer}
.form__note{margin:1.1rem 0 0;font-size:.83rem;color:var(--muted)}
.form__note--error{color:#9d2f2f}

/* ---------- 8. Localização — Google Maps full bleed ---------- */
.local{background:var(--warm);padding-top:var(--space)}
.local__head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.75rem,5vw,4.5rem);
  align-items:end;
  padding-bottom:clamp(2.25rem,4vw,3.25rem);
}
.local__head .h2{margin-bottom:0;max-width:16ch}
.local__address{
  font-style:normal;color:var(--muted);
  line-height:1.65;margin:0 0 1.75rem;font-size:1rem;
}
.local__address strong{
  display:block;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wine);font-weight:700;margin-bottom:.6rem;
}
.local__address b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2vw,1.75rem);
  line-height:1.15;letter-spacing:-.028em;font-weight:700;
  color:var(--ink);margin-bottom:.35rem;
}
.local__actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}

/* o mapa é a composição: sem card, sem raio, sem sombra */
.local__mapa{
  position:relative;
  width:100%;
  height:clamp(550px,58vw,660px);
  border-top:1px solid var(--rule);
  background:var(--beige);
}
.local__mapa iframe{
  display:block;width:100%;height:100%;border:0;
}

.final-cta{background:var(--wine);color:var(--cream);padding-block:clamp(3.5rem,6.5vw,6rem)}
.final-cta__inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.75rem,4vw,4rem);align-items:end;
}
.final-cta .h2{margin-bottom:.35em;max-width:18ch}
.final-cta p{color:rgba(245,233,221,.78);margin:0;max-width:34rem}
.final-cta__actions{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}

/* ---------- 9. Footer ---------- */
.footer{background:var(--cream);color:var(--ink);padding-top:clamp(3.5rem,6vw,6rem)}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,6rem);
  padding-bottom:clamp(3rem,5vw,4.5rem);
}
.footer__logo{height:30px;width:auto;margin-bottom:1.75rem}
.footer__about{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,1.9vw,1.55rem);
  line-height:1.35;letter-spacing:-.022em;
  color:var(--wine);
  max-width:24ch;margin:0 0 1.9rem;font-weight:500;
}
.footer__title{
  font-family:var(--font-body);
  font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--wine);font-weight:700;margin:0 0 2rem;
}
.footer__cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.75rem,3vw,2.75rem) clamp(1.5rem,3vw,3rem);
}
.footer__label{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wine);font-weight:700;margin:0 0 .45rem;opacity:.75;
}
.footer__value{margin:0;font-size:1rem;color:var(--ink);line-height:1.5}
.footer__value a{
  text-decoration:none;
  background-image:linear-gradient(var(--wine),var(--wine));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:2px;
  transition:background-size .45s var(--ease-out),color .35s var(--ease);
}
.footer__value a:hover{color:var(--wine);background-size:100% 1px}
.footer__bottom{
  border-top:1px solid var(--rule-soft);
  padding-block:1.6rem 1.9rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted);
}
.footer__bottom p{margin:0}

/* Barra CTA mobile */
.mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(250,247,243,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--rule-soft);
  transform:translateY(105%);
  transition:transform .45s var(--ease-out);
}
.mobile-bar.is-visible{transform:none}

/* ---------- 10. Responsivo ---------- */
@media (max-width:1180px){
  /* "Teste ergométrico" é mais longo que os rótulos anteriores: um pouco
     menos de respiro entre os links evita aperto entre 901px e 1180px */
  .nav{gap:1.5rem}
  .hero__title{font-size:clamp(2.5rem,5.4vw,4rem)}
  .footer__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

@media (max-width:1024px){
  .intro__grid{grid-template-columns:1fr;gap:2rem;align-items:start}
  .facts{grid-template-columns:repeat(2,1fr);gap:0 2rem}
  .facts li:nth-child(n+3){margin-top:1.75rem}
  .fullshot__grid{grid-template-columns:1fr;gap:1.25rem;align-items:start}
  .fullshot__title{max-width:18ch}
  /* processo: título deixa de ser sticky e vira bloco acima da timeline */
  .processo__grid{grid-template-columns:1fr;gap:clamp(2.25rem,5vw,3.5rem)}
  .processo__head{position:static}
  .processo__lead{max-width:34rem}
  .timeline-wrap{--tl-dot:52px;--tl-col:74px}
  .tl-step{min-height:26vh}
  .indications{grid-template-columns:1fr}
  .faq-wrap{grid-template-columns:1fr;gap:1.5rem}
  .booking{grid-template-columns:1fr;gap:3rem}
  .local__head{grid-template-columns:1fr;gap:1.75rem;align-items:start}
  .local__head .h2{max-width:20ch}
  .final-cta__inner{grid-template-columns:1fr;align-items:start}
  /* painel ocupa toda a largura: nenhuma sobra da foto nas laterais */
  .equip__panelwrap{justify-content:flex-start;padding-inline:0}
  .equip__panel{
    margin-top:-56px;max-width:none;width:100%;
    padding:clamp(1.75rem,4vw,2.5rem) var(--gutter) 0;
  }
}

@media (max-width:900px){
  .header__cta{display:none}
  .menu-toggle{display:flex}
  .nav{
    position:fixed;inset:0;z-index:-1;
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:0;
    background:var(--cream);
    padding:6.5rem var(--gutter) 3rem;
    opacity:0;visibility:hidden;
    transition:opacity .5s var(--ease),visibility .5s;
  }
  .nav.is-open{opacity:1;visibility:visible}
  .nav a{
    width:100%;
    font-family:var(--font-display);
    font-size:clamp(1.55rem,7vw,2.15rem);
    font-weight:600;letter-spacing:-.03em;
    color:var(--wine);
    padding:.95rem 0;
    border-bottom:1px solid var(--rule-soft);
    opacity:0;transform:translateY(14px);
    transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
  }
  .nav.is-open a{opacity:1;transform:none}
  .nav.is-open a:nth-child(1){transition-delay:.08s}
  .nav.is-open a:nth-child(2){transition-delay:.14s}
  .nav.is-open a:nth-child(3){transition-delay:.2s}
  .nav.is-open a:nth-child(4){transition-delay:.26s}
  .nav a::after{display:none}
  /* precisa vencer a especificidade de `.nav a` */
  .nav a.nav__cta{
    display:inline-flex;width:100%;
    margin-top:2.5rem;
    padding:1.15rem 1.4rem;
    background:var(--wine);color:#fff;
    font-family:var(--font-body);font-size:.75rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    border-bottom:0;
  }
  .nav a.nav__cta:hover{background:var(--wine-deep)}
  .nav.is-open .nav__cta{transition-delay:.32s}
  body.is-locked{overflow:hidden}

  .hero{min-height:100vh;min-height:100svh;padding-top:clamp(6.5rem,22vw,8rem);padding-bottom:clamp(3rem,8vw,4.5rem)}
  .hero__scrim{
    background:
      linear-gradient(180deg,rgba(41,11,17,.6) 0%,rgba(41,11,17,.12) 34%),
      linear-gradient(0deg,rgba(45,12,18,.92) 6%,rgba(45,12,18,.55) 46%,rgba(45,12,18,.18) 100%);
  }
  .equip__media{--h:clamp(300px,62vw,420px)}
}

@media (max-width:640px){
  .hero__actions{align-items:stretch}
  .hero__actions .btn{width:100%}
  .hero__lead{font-size:1.04rem}
  .hero__meta{font-size:.78rem}

  .h2{font-size:clamp(1.7rem,7vw,2.2rem)}
  .intro__title{font-size:clamp(1.85rem,7.6vw,2.5rem)}
  .section{padding-block:clamp(60px,13vw,84px)}

  .facts{grid-template-columns:1fr}
  .facts li:nth-child(n+2){margin-top:1.4rem}

  /* timeline continua timeline no mobile — só encolhe */
  .timeline-wrap{--tl-dot:44px;--tl-col:60px}
  .tl-step{min-height:0;padding-bottom:3.1rem;gap:1rem}
  /* no mobile o texto passa por cima do símbolo: véu creme uniforme e leve,
     suficiente para o contraste sem apagar a animação */
  .processo__vinheta{
    background:linear-gradient(180deg,rgba(247,240,231,.62) 0%,rgba(247,240,231,.34) 22%,rgba(247,240,231,.34) 74%,rgba(247,240,231,.6) 100%);
  }
  .tl-marker{font-size:.82rem}
  .tl-step h3{font-size:clamp(1.5rem,6vw,1.85rem)}
  .tl-step p{font-size:1.02rem}
  .processo__title{font-size:clamp(2.4rem,9vw,3rem)}
  .processo{padding-block:clamp(72px,14vw,110px)}
  .local__mapa{height:clamp(420px,80vw,500px)}

  .fullshot{min-height:75vh;min-height:75svh}
  .fullshot__media img{object-position:42% 58%}
  .fullshot__scrim{
    background:linear-gradient(0deg,rgba(41,11,17,.92) 0%,rgba(41,11,17,.7) 30%,rgba(41,11,17,.18) 62%,rgba(41,11,17,0) 82%);
  }

  .faq__item summary{font-size:1rem;padding-right:2rem}
  .faq__answer{padding-right:.5rem}

  .equip__panel .btn,.final-cta__actions .btn{width:100%}
  .final-cta__actions{align-items:stretch}

  .footer__top{grid-template-columns:1fr;gap:2.75rem}
  .footer__cols{gap:1.6rem}
  .footer__bottom{flex-direction:column;gap:.4rem}

  .mobile-bar{display:block}
  body.has-mobile-bar{padding-bottom:78px}
}

@media (max-width:400px){
  .btn{padding:1rem 1.25rem;font-size:.72rem;letter-spacing:.11em}
  .btn--cta{padding-inline:1.25rem}
  .brand__logo{height:22px}
}

/* ---------- 11. Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .hero__bg video,.hero__bg img{transform:scale(1.08)}
  .progress{display:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ---------- 12. Ajustes finos do hero ---------- */
@media (max-width:900px){
  /* recorte vertical: traz o equipamento para o centro do enquadramento */
  .hero__bg video,.hero__bg img{
    object-position:34% 50%;
    transform:translateX(0) scale(1.1);
  }
  /* quando o vídeo já é 9:16 (MIDIA.heroVideoMobile), o enquadramento veio
     pronto da filmagem: nada de deslocar nem ampliar */
  .hero__bg--vertical video{
    object-position:50% 50%;
    transform:none;
  }
}
@media (max-width:640px){
  .hero__meta{flex-direction:column;align-items:flex-start;gap:.35rem}
  .hero__meta i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg video,.hero__bg img{transform:translateX(5%) scale(1.16)}
  .hero__bg--vertical video{transform:none}
}

/* ---------- 13. Movimento reduzido — novos blocos ---------- */
@media (prefers-reduced-motion:reduce){
  .fullshot__media{clip-path:none!important}
  .fullshot__media img{transform:none!important}
  [data-fs]{opacity:1!important;transform:none!important}
  .timeline__progress{transform:scaleY(1)!important}
  [data-map-reveal]{clip-path:none!important;opacity:1!important}
  .processo__sticky{position:absolute;top:0;bottom:0;height:100%}
  .tl-body{transform:none!important}
}

/* ---------- 14. Telas baixas (notebooks 768px de altura) ---------- */
@media (min-width:901px) and (max-height:820px){
  .hero{
    padding-top:clamp(6rem,10vh,7.5rem);
    padding-bottom:clamp(2.5rem,5vh,3.5rem);
  }
  .hero__title{font-size:clamp(2.4rem,4.4vw,3.5rem)}
  .hero__lead{margin-bottom:1.8rem}
  .hero__actions{margin-bottom:1.8rem}
  .tl-step{min-height:34vh}
}

/* ---------- 15. Rótulos longos de CTA ----------
   "Agendar meu teste ergométrico" é mais longo que o CTA anterior. No mobile
   o "meu" sai e o nome do exame permanece — o botão nunca quebra em duas
   linhas e nunca perde a especificidade. */
.btn__compact{display:none}

@media (max-width:640px){
  .btn__lg{display:none}
  .btn__compact{display:inline}
  /* devolve ~20px ao rótulo sem encostar na seta */
  .btn--cta .btn__arrow{padding-left:1.25rem}
}
@media (max-width:400px){
  .btn--cta .btn__arrow{padding-left:.9rem}
}

/* ---------- 16. Mídia pendente ----------
   Estado dos blocos de imagem/vídeo enquanto a mídia de teste ergométrico
   não é fornecida (URLs vazias em MIDIA, no topo de assets/js/main.js).
   Mantém a caixa, o gradiente da marca e o clip-path do GSAP intactos —
   assim que a URL chega, o JS remove esta classe e nada mais muda. */
/* dupla classe de propósito: precisa vencer o `background` que
   .hero__bg / .equip já declaram mais acima no arquivo */
.hero__bg.midia-pendente,
.fullshot__media.midia-pendente,
.equip__media.midia-pendente{
  background:
    radial-gradient(120% 90% at 72% 18%,rgba(224,201,139,.20) 0%,rgba(224,201,139,0) 58%),
    radial-gradient(100% 80% at 12% 96%,rgba(107,31,42,.55) 0%,rgba(107,31,42,0) 62%),
    linear-gradient(158deg,#5C1E2C 0%,#491627 46%,#3A1120 100%);
}
/* a figura da seção Estrutura tira a altura da <img>: sem mídia,
   ela assume a mesma altura para a faixa não colapsar */
.equip__media.midia-pendente{height:var(--h)}
/* a <img> sem src não deve reservar caixa nem exibir ícone de quebra */
.midia-pendente>img:not([src]){display:none}

/* ---------- 17. Smartphone da seção Localização ----------
   Aparelho à esquerda, Google Maps à direita. No desktop o smartphone é uma
   camada absoluta sobre a borda esquerda do mapa — o mapa continua full bleed,
   com o mesmo embed, o mesmo pin e a atribuição do Google sempre visível
   (o aparelho é centralizado na vertical e nunca alcança a faixa inferior).
   Abaixo de 1024px ele sai da sobreposição e sobe para cima do mapa. */
.local__palco{position:relative}

.fone{
  margin:0 auto clamp(2.25rem,6vw,3rem);
  width:clamp(196px,54vw,236px);
}
.fone__moldura{
  aspect-ratio:9 / 19.5;
  padding:clamp(8px,1.5vw,11px);
  border-radius:clamp(30px,6.4vw,42px);
  background:linear-gradient(158deg,#5C1E2C 0%,var(--wine-deep) 52%,#2C0D16 100%);
  box-shadow:
    inset 0 1px 0 rgba(224,201,139,.30),
    inset 0 0 0 1px rgba(224,201,139,.12),
    0 34px 64px -26px rgba(41,11,17,.62),
    0 10px 24px -12px rgba(41,11,17,.40);
}
.fone__tela{
  position:relative;
  width:100%;height:100%;
  border-radius:clamp(22px,4.9vw,32px);
  overflow:hidden;
  background:var(--wine-deep);
}
.fone__tela video{width:100%;height:100%;object-fit:cover}
/* ilha central, no mesmo tom do corpo do aparelho */
.fone__ilha{
  position:absolute;z-index:2;
  top:clamp(7px,1.4vw,10px);left:50%;transform:translateX(-50%);
  width:34%;height:clamp(14px,2.5vw,19px);
  border-radius:99px;
  background:#230A11;
}

@media (min-width:1024px){
  /* a largura e o 52% mantêm o aparelho entre o card de endereço do Google
     (topo à esquerda) e a faixa de atribuição do mapa (rodapé) — nenhum dos
     dois pode ficar coberto */
  .fone{
    position:absolute;z-index:2;
    left:clamp(28px,5.5vw,88px);
    top:52%;transform:translateY(-50%);
    margin:0;
    width:clamp(196px,16vw,240px);
  }
}

/* movimento reduzido: o vídeo do aparelho fica parado no primeiro quadro */
@media (prefers-reduced-motion:reduce){
  .fone__moldura{opacity:1!important;transform:none!important}
}