/* =========================================================
   Vitor Bragança — Personal Trainer
   Paleta e tipografia conforme o manual de marca.
   Estrutura de seções escuras/claras alternadas.
   ========================================================= */

:root{
  --navy:      #001F3F;
  --navy-2:    #00152B;
  --azul:      #01548E;
  --verde:     #00804C;
  --verde-cl:  #74C365;
  --papel:     #F6F7F4;
  --branco:    #FFFFFF;
  --tinta:     #001F3F;
  --tinta-sub: #41566B;

  --fonte-tit: "Prata", Georgia, serif;
  --fonte-txt: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --larg: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --resp: clamp(4rem, 9vw, 7rem);
  --fio: 1px solid rgba(0,31,63,.14);
  --fio-claro: 1px solid rgba(255,255,255,.16);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:5rem; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--fonte-txt);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{
  font-family:var(--fonte-tit);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0;
}
h1{ font-size:clamp(2.6rem, 1.5rem + 4.4vw, 4.6rem); }
h2{ font-size:clamp(1.85rem, 1.25rem + 2.2vw, 2.9rem); }
h3{ font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }

p{ margin:0 0 1.1em; max-width:62ch; }
a{ color:var(--azul); }

:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; border-radius:2px; }
.escuro :focus-visible{ outline-color:var(--verde-cl); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy); color:#fff; padding:.85rem 1.25rem; }
.skip:focus{ left:0; }

/* ---------- blocos escuros ---------- */
.escuro{
  background:var(--navy);
  color:var(--branco);
}
.escuro p{ color:rgba(255,255,255,.8); }
.escuro h1,.escuro h2,.escuro h3{ color:var(--branco); }

.eyebrow{
  font-family:var(--fonte-txt);
  font-size:.76rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--verde-cl); margin:0 0 1.25rem;
}
.eyebrow--verde{ color:var(--verde); }

/* ===================== BOTÕES ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:1rem 1.8rem;
  font-family:var(--fonte-txt); font-size:.95rem; font-weight:700; line-height:1.2;
  text-decoration:none; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid transparent; border-radius:999px; cursor:pointer;
  transition:background-color .18s ease, transform .18s ease;
}
.btn svg{ width:22px; height:22px; flex:none; }
.btn--forte{ background:var(--verde); color:var(--branco); }
.btn--forte:hover{ background:#00693e; transform:translateY(-1px); }
.btn--grande{ padding:1.15rem 2.2rem; font-size:1rem; }

/* ===================== TOPO ===================== */
.topo{
  position:sticky; top:0; z-index:100;
  background:rgba(0,31,63,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:var(--fio-claro);
}
.topo__in{
  max-width:var(--larg); margin-inline:auto;
  padding:.8rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
}
.topo__logo{ display:block; line-height:0; }
.topo__logo img{ width:clamp(160px, 22vw, 208px); height:auto; }

.topo__nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); }
.topo__nav a{
  color:rgba(255,255,255,.88); text-decoration:none;
  font-size:.9rem; font-weight:600;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.topo__nav a:hover{ color:#fff; border-bottom-color:var(--verde-cl); }
.topo__nav .topo__cta{
  display:inline-flex; align-items:center; gap:.55rem;
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.45); border-radius:999px;
  padding:.65rem 1.2rem; font-size:.85rem;
}
.topo__nav .topo__cta svg{ width:18px; height:18px; color:var(--verde-cl); }
.topo__nav .topo__cta:hover{ border-color:var(--verde-cl); background:rgba(116,195,101,.1); }
.topo__btn{ display:none; }

/* ===================== HERO ===================== */
.hero{
  background:
    radial-gradient(900px 520px at 82% 30%, rgba(1,84,142,.55), rgba(1,84,142,0) 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  overflow:hidden;
}
.hero__in{
  max-width:var(--larg); margin-inline:auto;
  padding:clamp(2.5rem,6vw,5rem) var(--gutter) clamp(3rem,6vw,5rem);
  display:grid; grid-template-columns:1.05fr .8fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.hero h1{ margin-bottom:1.5rem; }
.hero h1 span{ display:block; color:var(--verde-cl); }
.hero__lide{
  font-family:var(--fonte-tit); font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  line-height:1.35; color:#fff !important; max-width:30ch; margin-bottom:1.5rem;
}
.hero__sub{ max-width:50ch; font-size:1rem; }
.hero .btn{ margin-top:.9rem; }

.hero__itens{
  list-style:none; margin:2.5rem 0 0; padding:1.6rem 0 0;
  border-top:var(--fio-claro);
  display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:clamp(1rem,2.4vw,2rem);
}
.hero__itens li{ display:flex; flex-direction:column; gap:.6rem; font-size:.8rem; line-height:1.35; color:rgba(255,255,255,.82); }
.hero__itens svg{ width:28px; height:28px; color:var(--verde-cl); }

.hero__foto{ position:relative; justify-self:center; width:100%; max-width:470px; }
.hero__foto::before{
  content:""; position:absolute; inset:-14px -14px 14px 14px;
  border:1px solid rgba(116,195,101,.5);
  border-radius:240px 240px 14px 14px;
}
.hero__foto img{
  position:relative; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:57% 16%;
  border-radius:240px 240px 14px 14px;
}

/* ===================== CREDENCIAIS ===================== */
.credenciais{ background:var(--branco); border-bottom:var(--fio); }
.credenciais ul{
  max-width:var(--larg); margin-inline:auto; padding:0 var(--gutter);
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
}
.credenciais li{
  padding:1.8rem 1.4rem 1.8rem 0; border-right:var(--fio);
  display:flex; flex-direction:column; gap:.15rem;
}
.credenciais li:last-child{ border-right:0; }
.credenciais li:not(:first-child){ padding-left:1.6rem; }
.credenciais strong{ font-size:1rem; font-weight:600; }
.credenciais span{ font-size:.85rem; color:var(--tinta-sub); }

/* ===================== SEÇÕES ===================== */
.secao{ padding:var(--resp) 0; }
.secao__in{ max-width:var(--larg); margin-inline:auto; padding:0 var(--gutter); }
.secao__cabeca{ margin-bottom:clamp(2rem,4vw,3.25rem); }
.secao__cabeca h2{ max-width:20ch; }

/* ---- objetivos ---- */
.objetivos{
  background:
    radial-gradient(700px 360px at 8% 0%, rgba(1,84,142,.35), rgba(1,84,142,0) 70%),
    var(--navy);
}
.cartoes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.cartao{
  border:var(--fio-claro); border-radius:14px;
  background:rgba(255,255,255,.04);
  padding:clamp(1.5rem,3vw,2.1rem);
}
.cartao__icone{ width:34px; height:34px; color:var(--verde-cl); margin-bottom:1.25rem; }
.cartao h3{ margin-bottom:.75rem; }
.cartao p{ margin:0; font-size:.97rem; }

/* ---- como funciona ---- */
.como__grade{
  display:grid; grid-template-columns:.9fr 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.como__texto h2{ margin-bottom:2.25rem; max-width:14ch; }

.app{
  position:relative; border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  padding:clamp(2rem,5vw,3.5rem) 1rem;
  display:grid; place-items:center; min-height:440px;
}
.app__brilho{
  position:absolute; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(116,195,101,.28), rgba(116,195,101,0));
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.fone{
  position:relative; width:min(232px,62%); aspect-ratio:9/18.5;
  background:#0A121C; border:7px solid #1A2533; border-radius:34px;
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  transform:rotate(-5deg);
}
.fone__tela{ position:absolute; inset:0; padding:1.1rem .85rem .9rem; display:flex; flex-direction:column; gap:.75rem; border-radius:26px; overflow:hidden; }
.fone__topo small{ display:block; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.fone__topo b{ font-family:var(--fonte-tit); font-weight:400; font-size:1.05rem; color:#fff; }
.fone__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.fone__lista li{
  display:flex; align-items:center; gap:.55rem;
  background:rgba(255,255,255,.06); border-radius:9px; padding:.5rem .55rem;
}
.fone__lista i{ width:26px; height:26px; border-radius:6px; background:linear-gradient(135deg,var(--azul),var(--navy)); flex:none; }
.fone__lista div{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.fone__lista b{ font-size:.62rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fone__lista span{ font-size:.55rem; color:rgba(255,255,255,.55); }
.fone__lista em{ width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); flex:none; }
.fone__lista em.ok{ background:var(--verde-cl); border-color:var(--verde-cl); }
.fone__rodape{ margin-top:auto; height:5px; border-radius:3px; background:rgba(255,255,255,.12); }
.fone__rodape span{ display:block; width:60%; height:100%; border-radius:3px; background:var(--verde-cl); }

.etapas{ list-style:none; margin:0; padding:0; counter-reset:etapa; position:relative; }
.etapas::before{
  content:""; position:absolute; left:21px; top:22px; bottom:22px; width:1px;
  background:linear-gradient(180deg,var(--verde-cl),var(--verde));
}
.etapas li{ counter-increment:etapa; position:relative; padding:0 0 2.1rem 4.25rem; }
.etapas li:last-child{ padding-bottom:0; }
.etapas li::before{
  content:"0" counter(etapa);
  position:absolute; left:0; top:-2px;
  width:44px; height:44px; border-radius:50%;
  background:var(--navy); color:#fff;
  font-size:.9rem; font-weight:600;
  display:grid; place-items:center;
}
.etapas h3{ margin-bottom:.45rem; font-size:clamp(1.1rem,1rem + .4vw,1.3rem); }
.etapas p{ margin:0; color:var(--tinta-sub); max-width:52ch; font-size:.97rem; }

/* ---- sobre ---- */
.sobre__grade{
  display:grid; grid-template-columns:.7fr 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.sobre__foto img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 50%;
  border-radius:14px 14px 200px 200px;
}
.sobre__texto h2{ margin-bottom:1.5rem; }
.sobre__frase{
  font-family:var(--fonte-tit); font-size:clamp(1.25rem,1.1rem + .7vw,1.7rem);
  line-height:1.35; color:var(--verde-cl) !important; margin-top:1.75rem;
}
.sobre__cref{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; margin:2rem 0 0; color:rgba(255,255,255,.6) !important;
}

/* ---- depoimentos (desativado no HTML até haver conteúdo real) ---- */
.depoimentos__grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,2rem); }
.depoimentos blockquote{
  margin:0; padding:2rem 1.75rem; background:var(--branco);
  border:var(--fio); border-radius:14px; display:flex; flex-direction:column;
}
.depoimentos blockquote p{ font-size:1rem; color:var(--tinta-sub); flex:1; }
.depoimentos cite{ font-style:normal; font-weight:600; font-size:.95rem; display:flex; flex-direction:column; padding-top:1rem; border-top:var(--fio); }
.depoimentos cite span{ font-weight:400; font-size:.85rem; color:var(--tinta-sub); }

/* ===================== CTA FINAL ===================== */
.cta{
  position:relative; overflow:hidden; text-align:center;
  padding:var(--resp) var(--gutter);
  background:
    radial-gradient(800px 380px at 50% 0%, rgba(1,84,142,.5), rgba(1,84,142,0) 70%),
    var(--navy-2);
  border-top:var(--fio-claro);
}
.cta__marca{
  position:absolute; width:min(420px,70vw); height:auto; opacity:.06;
  right:-60px; bottom:-90px; pointer-events:none;
}
.cta__in{ position:relative; max-width:760px; margin-inline:auto; }
.cta h2{ margin-bottom:1.25rem; }
.cta p{ margin-inline:auto; }
.cta__lide{ font-size:1.05rem; max-width:52ch; }
.cta__nome{
  font-family:var(--fonte-tit); font-size:1.25rem; color:#fff !important;
  margin:2rem auto .25rem;
}
.cta__nome span{
  display:block; font-family:var(--fonte-txt); font-size:.72rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--verde-cl); margin-top:.2rem;
}
.cta__sub{ font-size:.95rem; margin-bottom:2rem; }

/* ===================== RODAPÉ ===================== */
.rodape{ background:var(--navy-2); padding:clamp(3rem,6vw,4.5rem) 0 2.25rem; border-top:var(--fio-claro); }
.rodape__in{
  max-width:var(--larg); margin-inline:auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,4vw,3.5rem);
}
.rodape__marca img{ width:210px; margin-bottom:1.1rem; }
.rodape__marca p{ font-family:var(--fonte-tit); font-size:1.1rem; line-height:1.4; color:#fff; max-width:22ch; }
.rodape__col h2{
  font-family:var(--fonte-txt); font-size:.76rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--verde-cl); margin-bottom:1rem;
}
.rodape__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.95rem; color:rgba(255,255,255,.82); }
.rodape__col a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); }
.rodape__col a:hover{ border-bottom-color:var(--verde-cl); }
.rodape__fim{
  width:calc(100% - 2 * var(--gutter)); max-width:calc(var(--larg) - 2 * var(--gutter));
  margin:3rem auto 0; padding:1.5rem 0 0;
  border-top:var(--fio-claro); font-size:.82rem; color:rgba(255,255,255,.55) !important;
}

/* ===================== WHATSAPP FLUTUANTE ===================== */
.zap{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem); z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:var(--verde); color:#fff; display:grid; place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:background-color .18s ease, transform .18s ease;
}
.zap svg{ width:30px; height:30px; }
.zap:hover{ background:#00693e; transform:translateY(-2px); }

/* ===================== RESPONSIVO ===================== */
@media (max-width:1000px){
  .credenciais ul{ grid-template-columns:repeat(2,1fr); }
  .credenciais li:nth-child(2){ border-right:0; }
  .credenciais li:nth-child(1),.credenciais li:nth-child(2){ border-bottom:var(--fio); }
  .credenciais li:nth-child(3){ padding-left:0; }
  .cartoes,.depoimentos__grade{ grid-template-columns:1fr; }
  .hero__itens{ grid-template-columns:repeat(2,auto); }
}

@media (max-width:860px){
  .topo__btn{
    display:grid; place-items:center; margin-left:auto;
    width:46px; height:46px; padding:0; background:transparent;
    border:1px solid rgba(255,255,255,.35); border-radius:50%; cursor:pointer;
  }
  .topo__btnTraco,.topo__btnTraco::before,.topo__btnTraco::after{
    display:block; width:18px; height:1.5px; background:#fff; content:"";
  }
  .topo__btnTraco{ position:relative; }
  .topo__btnTraco::before{ position:absolute; top:-6px; }
  .topo__btnTraco::after{ position:absolute; top:6px; }
  .topo__btn[aria-expanded="true"] .topo__btnTraco{ background:transparent; }
  .topo__btn[aria-expanded="true"] .topo__btnTraco::before{ top:0; transform:rotate(45deg); }
  .topo__btn[aria-expanded="true"] .topo__btnTraco::after{ top:0; transform:rotate(-45deg); }

  .topo__in{ flex-wrap:wrap; }
  .topo__nav{ display:none; width:100%; order:3; flex-direction:column; align-items:stretch; gap:0; margin:.5rem 0 .35rem; }
  .topo__nav[data-aberto="sim"]{ display:flex; }
  .topo__nav a{ padding:.95rem .25rem; border-bottom:var(--fio-claro); }
  .topo__nav .topo__cta{ margin-top:.9rem; justify-content:center; padding:.9rem 1.25rem; }

  .hero__in{ grid-template-columns:1fr; }
  .hero__foto{ order:-1; max-width:380px; margin-bottom:.5rem; }
  .hero__foto::before{ inset:-10px -10px 10px 10px; }
  .hero .btn{ width:100%; }
  .hero__itens{ grid-template-columns:repeat(2,1fr); }

  .como__grade,.sobre__grade,.rodape__in{ grid-template-columns:1fr; }
  .como__texto h2{ max-width:none; }
  .app{ min-height:380px; }
  .sobre__foto{ max-width:400px; }
  .cta .btn{ width:100%; }
}

@media (max-width:520px){
  .credenciais ul{ grid-template-columns:1fr; }
  .credenciais li{ border-right:0; border-bottom:var(--fio); padding:1.15rem 0; }
  .credenciais li:last-child{ border-bottom:0; }
  .credenciais li:not(:first-child){ padding-left:0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}