/* ===================================================================
   Tratamento da Obesidade Infantil Guiado por Medicina de Precisão
   Nível 1, tomada única, ~400vh de hero
   =================================================================== */

:root{
  --canvas:#11181f;
  --panel:#1b2531;
  --accent:#c9a24a;
  --accent-hover:#dab562;
  --accent-muted:#c9a24a55;
  --text-secondary:#b9c2cf;
  --text-primary:#eee8dd;
  --navy-deep:#161f2c;

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

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

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{scroll-behavior:auto}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:"Poppins",system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{
  font-family:"Poppins",system-ui,sans-serif;
  font-weight:600;
  margin:0 0 .5em;
  line-height:1.18;
  letter-spacing:-.01em;
}

p{margin:0 0 1em; color:var(--text-secondary); max-width:60ch}

a{color:inherit}

.mono{font-family:"IBM Plex Mono",monospace}

/* -------------------- utilitários -------------------- */

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:var(--navy-deep);
  padding:.75em 1.2em; z-index:999; font-weight:600;
  border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.wrap.narrow{max-width:760px}
.wrap.center{text-align:center}

.kicker{
  font-family:"IBM Plex Mono",monospace;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .9em; font-weight:500;
}
.kicker.center{text-align:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9em 1.7em; border-radius:999px; font-weight:600;
  text-decoration:none; border:1px solid transparent;
  transition:transform .35s var(--ease), background-color .35s var(--ease-soft), border-color .35s var(--ease-soft), color .35s var(--ease-soft);
  text-shadow:none;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--accent); color:var(--navy-deep)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent; border-color:rgba(238,232,221,.35); color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-lg{padding:1.05em 2.2em; font-size:1.05rem}

@media (pointer:coarse){
  .btn{min-height:44px; display:inline-flex; align-items:center; justify-content:center}
}

/* -------------------- nav -------------------- */

.topnav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  background:linear-gradient(to bottom, rgba(17,24,31,.75), rgba(17,24,31,0));
  pointer-events:none;
}
.topnav > *{pointer-events:auto}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-primary)}
.brand-mark{width:30px; height:auto}
.brand-name{font-weight:600; font-size:.95rem; letter-spacing:-.01em}
@media (max-width:560px){.brand-name{display:none}}

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

.hero{
  position:relative;
  height:400vh;
}

.hero-stage{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:var(--navy-deep);
}

.poster{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  background-color:var(--navy-deep);
}

#heroVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s var(--ease-soft);
  will-change:transform;
  transform:translateZ(0);
}
.hero-stage.video-ready #heroVideo{opacity:1}

.scrim{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%, rgba(10,10,18,0) 35%, rgba(10,10,18,.62) 100%);
}

.ring{
  position:absolute; top:50%; left:50%; width:48px; height:48px;
  margin:-24px 0 0 -24px; color:var(--accent); z-index:5;
  transform:rotate(-90deg);
  transition:opacity .4s var(--ease-soft);
}
.ring circle{transition:stroke-dashoffset .2s linear}
.hero-stage.video-ready .ring,
.hero-stage.video-failed .ring{opacity:0; pointer-events:none}

.chevron{
  display:none;
  position:absolute; bottom:36px; left:50%; margin-left:-12px;
  width:24px; height:24px; color:var(--text-primary); z-index:5;
  animation:chevbounce 1.8s ease-in-out infinite;
}
.chevron.is-visible{display:block}
@keyframes chevbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

.hero-copy{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:0 24px;
}

.band{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:0 24px;
  opacity:0;
  pointer-events:none;
}
.band::before{
  content:"";
  position:absolute; inset:-4%;
  pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 50% 50%, rgba(5,5,10,.66) 0%, rgba(5,5,10,.44) 46%, rgba(5,5,10,0) 76%);
}
.band-title,.band-body,.final-title,.final-sub{
  position:relative; z-index:1;
  text-shadow:var(--tshadow);
}
.band .btn{text-shadow:none}

.band-title{
  font-size:clamp(1.6rem, 4.6vw, 3rem);
  max-width:18ch;
  margin:0;
}
.band-body{
  font-size:clamp(1.1rem, 2.8vw, 1.7rem);
  max-width:22ch;
  margin:0;
  color:var(--text-primary);
  font-weight:500;
}
.band-final{display:flex; flex-direction:column; align-items:center; gap:.9em}
.final-title{
  font-size:clamp(1.5rem, 4.2vw, 2.7rem);
  max-width:17ch;
  margin:0;
}
.final-sub{
  font-size:clamp(1rem, 2vw, 1.2rem);
  max-width:38ch;
  color:var(--text-primary);
  margin:0;
  text-shadow:var(--tshadow);
}
.final-cta{margin-top:.4em}

/* coreografia de texto: --k comanda tudo via transform/opacity */
.visual-text{display:inline; white-space:normal}
.w{display:inline-block; will-change:transform,opacity}
.c{display:inline-block; will-change:transform,opacity}

[data-split="word-up"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}
[data-split="scatter"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)), calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}

.hero-static-fallback{display:none}

/* -------------------- portão do hero estático (5 condições) -------------------- */
/* precisam bater EXATAMENTE com os matchMedia() do script.js */

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){

  .hero{height:100vh; min-height:560px}
  .hero-stage{position:relative; height:100vh; min-height:560px}
  .ring,.chevron{display:none}
  .poster{
    background-image:url('hero-ending.jpg');
    background-position:center 30%;
    filter:brightness(.72) saturate(.9);
  }
  #heroVideo{filter:brightness(.8) saturate(.92)}
  .scrim{
    background:linear-gradient(to top, rgba(8,10,16,.95) 0%, rgba(8,10,16,.86) 38%, rgba(8,10,16,.55) 62%, rgba(8,10,16,.18) 100%);
  }
  .band{position:static; opacity:1 !important; pointer-events:auto; display:none}
  .hero-copy{display:none}
  .hero-static-fallback{
    display:flex; flex-direction:column; align-items:center;
    position:absolute; inset:0; z-index:1;
    justify-content:flex-end;
    padding:0 24px 64px;
    text-align:center; max-width:34ch; margin:0 auto;
  }
  .hero-static-fallback::before{
    content:"";
    position:absolute;
    left:-24px; right:-24px; bottom:-4px; top:28%;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(to top, rgba(6,8,13,.92) 0%, rgba(6,8,13,.78) 45%, rgba(6,8,13,0) 100%);
  }
  .hero-static-fallback .fs-title{
    font-size:clamp(1.5rem,6vw,2.2rem);
    font-weight:600; margin:0 0 .5em; text-shadow:var(--tshadow);
  }
  .hero-static-fallback .fs-sub{
    font-size:1rem; color:var(--text-primary); text-shadow:var(--tshadow); margin:0 0 1.2em;
  }
  .w,.c{opacity:1 !important; transform:none !important}
}

@media (max-height:560px){
  .chevron{display:none}
}

/* ===================================================================
   ABAIXO DA DOBRA
   =================================================================== */

.section{
  position:relative;
  padding:120px 0;
  background:var(--canvas);
}
.section-alt{background:var(--navy-deep)}

.section-img{
  width:100%; height:auto; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.section-img.portrait{aspect-ratio:2/3; object-fit:cover; height:100%}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.two-col.reverse .col-media{order:2}
.two-col.reverse .col-text{order:1}

@media (max-width:860px){
  .two-col{grid-template-columns:1fr; gap:36px}
  .two-col.reverse .col-media,.two-col.reverse .col-text{order:0}
}

.col-text h2{font-size:clamp(1.5rem,3.2vw,2.2rem); max-width:16ch}
.col-text p{max-width:52ch}

/* -------------------- seções de fundo em vídeo, tela cheia -------------------- */

.section-full{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--navy-deep);
}

.section-media-bg{position:absolute; inset:0; z-index:0}
.section-media-poster,
.section-media-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.section-media-video{
  opacity:0;
  transition:opacity 1.1s var(--ease-soft);
  will-change:transform;
  transform:translateZ(0);
}
.section-media-video.is-playing{opacity:1}

.section-scrim{
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(10,14,22,.5) 0%, rgba(10,14,22,.68) 100%);
}

.section-copy{
  position:relative; z-index:1;
  max-width:640px;
  margin:0 auto;
  padding:140px 24px;
  text-align:center;
}
.section-copy::before{
  content:"";
  position:absolute; inset:-10% -6%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 78% 70% at 50% 50%, rgba(5,7,12,.6) 0%, rgba(5,7,12,.38) 48%, rgba(5,7,12,0) 78%);
}
.section-copy .kicker{justify-content:center}
.section-copy h2{
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  max-width:18ch; margin:0 auto .5em;
  text-shadow:var(--tshadow);
}
.section-copy p{
  max-width:52ch; margin:0 auto 1em;
  color:var(--text-primary);
  text-shadow:0 1px 2px rgba(5,5,10,.85), 0 3px 14px rgba(5,5,10,.6);
  text-align:left;
}
.section-copy p:last-child{margin-bottom:0}

@media (max-width:720px){
  .section-full{min-height:78vh}
  .section-copy{padding:96px 24px}
}

.thread-line{
  position:absolute; left:50%; bottom:-1px; width:2px; height:80px;
  color:var(--accent-muted);
  stroke:currentColor; stroke-width:2; fill:none;
  transform:translateX(-1px);
}

/* steps */

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:56px;
}
@media (max-width:860px){.steps{grid-template-columns:1fr; gap:28px}}

.step{
  background:var(--panel);
  border-radius:16px;
  padding:32px 28px;
  border:1px solid rgba(238,232,221,.06);
}
.step-num{
  font-family:"IBM Plex Mono",monospace;
  color:var(--accent);
  font-size:.85rem;
  letter-spacing:.06em;
  display:block;
  margin-bottom:.7em;
}
.step h3{font-size:1.15rem; margin-bottom:.5em}
.step p{margin:0; max-width:none}

/* faq */

.faq{margin-top:44px; display:flex; flex-direction:column; gap:12px}
.faq-item{
  background:var(--panel);
  border-radius:12px;
  padding:20px 24px;
  border:1px solid rgba(238,232,221,.06);
}
.faq-item summary{
  cursor:pointer;
  font-weight:600;
  font-size:1.05rem;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  font-family:"IBM Plex Mono",monospace;
  color:var(--accent);
  font-size:1.3rem;
  flex:none;
  transition:transform .3s var(--ease-soft);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:.9em 0 0; max-width:none}

/* crm / quem cuida */

.crm{
  font-family:"IBM Plex Mono",monospace;
  color:var(--text-secondary);
  font-size:.85rem;
  letter-spacing:.04em;
  margin-bottom:1em;
}

/* cta final */

.section-cta{
  text-align:center;
  padding:140px 0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,162,74,.08), transparent 60%), var(--navy-deep);
}
.cta-mark{width:56px; margin:0 auto 28px}
.cta-portrait{
  width:120px; height:120px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 28px;
  border:2px solid var(--accent-muted);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.section-cta h2{font-size:clamp(1.7rem,3.6vw,2.6rem); max-width:16ch; margin:0 auto .5em}
.section-cta p{max-width:44ch; margin:0 auto 2em}
.cta-note{font-size:.85rem; color:var(--text-secondary); margin-top:1.4em}

/* footer */

.footer{
  padding:56px 0 40px;
  background:var(--navy-deep);
  border-top:1px solid rgba(238,232,221,.08);
  text-align:center;
}
.footer-logo{width:180px; margin:0 auto 20px}
.disclaimer{
  font-size:.78rem;
  color:var(--text-secondary);
  max-width:52ch;
  margin:0 auto;
  line-height:1.7;
}

/* -------------------- reveal (entradas) -------------------- */

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{opacity:1; transform:none}

.steps .step{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.steps .step.in{opacity:1; transform:none}
.steps .step:nth-child(1).in{transition-delay:0ms}
.steps .step:nth-child(2).in{transition-delay:90ms}
.steps .step:nth-child(3).in{transition-delay:180ms}
.steps.retired .step{transition-delay:0ms !important}

.faq-item{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.faq-item.in{opacity:1; transform:none}
.faq-item:nth-child(1).in{transition-delay:0ms}
.faq-item:nth-child(2).in{transition-delay:70ms}
.faq-item:nth-child(3).in{transition-delay:140ms}
.faq-item:nth-child(4).in{transition-delay:210ms}
.faq.retired .faq-item{transition-delay:0ms !important}

/* -------------------- movimento reduzido -------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.steps .step,.faq-item{opacity:1 !important; transform:none !important; transition-delay:0ms !important}
  .chevbounce,.chevron{animation:none !important}
}

body.reduced-motion .reveal,
body.reduced-motion .steps .step,
body.reduced-motion .faq-item{
  opacity:1 !important; transform:none !important; transition:none !important;
}