/* HERO (dobra 01) — preservada como aprovada */
:root {
  --white: #FFFFFF;
  --off-white: #F5F9FC;
  --sky: #72C3F5;
  --navy: #073B78;
  --deep: #17283A;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--off-white);
  color: var(--deep);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* =====================================================================
   HERO — cartão fixo (céu com margem e cantos arredondados).
   A atleta fica dentro do cartão; só o tênis da frente sai pela borda.
   ===================================================================== */
.hero {
  --g: clamp(12px, 1.4vw, 24px);                        /* margem do cartão */
  --pad: clamp(20px, 3.4vw, 56px);                      /* respiro interno */
  --r: clamp(18px, 2vw, 32px);                          /* raio dos cantos */
  --hb: clamp(560px, calc(100svh - 150px), 900px);      /* altura-base: define o tamanho da atleta */
  --hc: calc(var(--hb) * 1.08);                         /* altura do cartão: o céu cresce para baixo */
  padding-bottom: calc(var(--hb) * .08);                /* espaço para o tênis que sai do cartão */
  overflow-x: clip;
}
.stage {
  position: relative;
  height: calc(var(--g) + var(--hc));
  container-type: inline-size;
  color: var(--white);
  isolation: isolate;
  /* geometria do cartão e da atleta (em coordenadas do cartão) */
  --cw: calc(100cqw - var(--g) * 2);
  --fsa: min(calc(var(--cw) * .125), calc(var(--hb) * .21));  /* referência de posição da atleta (não muda com a headline) */
  --wta: clamp(96px, calc(var(--hb) * .15), 140px);
  /* headline: as duas linhas têm a mesma largura (--tw); cada divisor é a largura da linha em "em" */
  --tw: min(calc(var(--ax) + var(--aw) * .08 - var(--pad) - 24px), calc(var(--hb) * .9));
  --f1: calc(var(--tw) / 5.1695);
  --f2: calc(var(--tw) / 2.7164);
  --h1h: calc(var(--f1) * .92 + var(--f2) * .94);
  --lf: max(14px, calc(var(--tw) / 35.24));                   /* frase: na largura do título */
  /* título + frase + botões centralizados entre o menu e a base do cartão */
  --gh: calc(var(--h1h) + 14px + var(--lf) * 1.4 + 18px + 50px);
  --wt: calc((86px + var(--hc)) / 2 - var(--gh) / 2 - var(--f1) * .08);
  --aw: min(calc(var(--hb) * 1.34), calc(var(--cw) * .68));   /* largura da atleta */
  --ah: calc(var(--aw) / 1.163);                              /* altura da atleta */
  --ar: calc(var(--aw) * .045 + 16px);                        /* distância da borda direita */
  --ax: calc(var(--cw) - var(--ar) - var(--aw));              /* left da atleta */
  --ay: calc(var(--wta) + var(--fsa) * .15 - var(--ah) * .092); /* top da atleta */
  --skyx: 0px;                                                /* a atleta e a headline são filhas do céu */
  --skyy: 0px;
}

/* céu = o cartão */
.sky {
  position: absolute; z-index: 0; overflow: hidden;
  top: var(--g); left: var(--g); right: var(--g);
  height: var(--hc);
  border-radius: var(--r);
  background:
    radial-gradient(60% 70% at 78% 92%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%),
    radial-gradient(45% 55% at 66% 48%, rgba(114,195,245,.35), rgba(114,195,245,0) 70%),
    linear-gradient(180deg, #093C7B 0%, #21599C 25%, #4B8ED1 52%, #75BAF8 78%, #8FCEFF 100%);
}

/* palavra gigante atrás da atleta */
.word {
  position: absolute; z-index: 0;
  left: calc(var(--skyx) + var(--pad));
  top: calc(var(--skyy) + var(--wt));
  margin: 0;
  font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800;
  text-transform: uppercase; white-space: nowrap;
}
.word span { display: block; font-size: var(--f2); line-height: .94; letter-spacing: -.01em; margin-left: -.0156em; }
.word .accent { color: var(--sky); font-size: var(--f1); line-height: .92; margin-left: -.031em; }

/* atleta: inclinada 10° para frente, como numa largada */
.athlete {
  position: absolute; display: block;
  width: var(--aw); max-width: none; height: auto;   /* as duas camadas precisam ter sempre o mesmo tamanho */
  rotate: -10deg;
  pointer-events: none;
  user-select: none;
}
/* camada 1: dentro do céu (a perna de trás fica contida pelo cartão) */
.athlete--in {
  z-index: 1;
  left: calc(var(--skyx) + var(--ax));
  top: calc(var(--skyy) + var(--ay));
}
/* camada 2: só a perna da frente, por cima de tudo, para sair do cartão.
   A sombra fica no invólucro para não ser cortada junto com o recorte. */
.front-leg {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 26px 30px rgba(7, 40, 90, .25));
}
.athlete--out {
  left: calc(var(--g) + var(--ax));
  top: calc(var(--g) + var(--ay));
  clip-path: polygon(0 58%, 47% 58%, 47% 100%, 0 100%);
}

/* nav */
.nav {
  position: absolute; z-index: 3;
  top: var(--g); left: var(--g); right: var(--g);
  display: flex; align-items: center; gap: clamp(28px, 3.6vw, 60px);
  padding: clamp(16px, 2vw, 26px) var(--pad);
}
.nav__logo img { height: 60px; width: auto; display: block; }
.nav__links {
  display: flex; gap: clamp(18px, 2.2vw, 34px);
  list-style: none; margin: 0; padding: 0;
  font-size: 15px; font-weight: 500;
}
.nav__links a { opacity: .9; position: relative; padding: 6px 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--white);
  cursor: pointer; transition: background .2s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.16); }
.icon-btn svg { width: 21px; height: 21px; }
.nav__cta {
  display: inline-flex; align-items: center; margin-left: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px;
  background: var(--white); color: var(--navy);
  font-size: 14px; font-weight: 600; transition: background .2s ease;
}
.nav__cta:hover { background: var(--sky); color: var(--deep); }
.nav__menu { display: none; }

/* frase e botões logo abaixo do título */
.panel {
  position: absolute; z-index: 3;
  left: calc(var(--g) + var(--pad));
  top: calc(var(--g) + var(--wt) + var(--h1h) + 14px);
}
.panel .lead {
  margin: 0 0 18px; max-width: calc(var(--tw) + 8px);
  font-size: var(--lf); font-weight: 500; line-height: 1.4; color: rgba(255,255,255,.95);
  text-wrap: balance;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn svg { width: 17px; height: 17px; transition: transform .2s ease; }
.btn--primary { background: var(--white); color: var(--navy); }
.btn--primary:hover { background: var(--sky); color: var(--deep); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--ghost { border: 1.5px solid rgba(255,255,255,.7); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.14); }
.btn:active { transform: scale(.98); }

/* faixa abaixo da hero */
.strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 48px);
  max-width: 58%;
  padding: 8px calc(clamp(20px, 3.4vw, 56px) + clamp(12px, 1.4vw, 24px)) clamp(48px, 6vw, 96px);
}
.feat { border-top: 1px solid rgba(23,40,58,.16); padding-top: 16px; }
.feat b {
  display: block; margin-bottom: 6px;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--navy);
}
.feat span { font-size: 14px; line-height: 1.5; color: rgba(23,40,58,.72); }

/* entrada */
.reveal { opacity: 0; animation: in .9s cubic-bezier(.2,.7,.2,1) forwards; }
.word.reveal { translate: 0 30px; animation-delay: .05s; }
.athlete.reveal { translate: 40px 0; animation-delay: .15s; }
.panel.reveal { translate: 0 16px; animation-delay: .3s; }
@keyframes in { to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; translate: none; } }

/* menu centralizado no cartão (logo à esquerda, ícones à direita).
   Em telas menores ele recua só o necessário para não encostar na ponta do cabelo. */
@media (min-width: 1101px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav__logo { justify-self: start; }
  .nav__right { justify-self: end; margin-left: 0; }
  .nav__links {
    --lw: calc(336px + clamp(18px, 2.2vw, 34px) * 4);
    translate: max(-90px, min(0px, calc(var(--ax) + var(--aw) * .539 - 56px - var(--cw) / 2 - var(--lw) / 2)));
  }
}
/* frase em uma linha só quando há espaço ao lado do braço da atleta */
@media (min-width: 1301px) {
  .panel .lead { white-space: nowrap; max-width: none; }
}

/* ======================= TABLET ======================= */
@media (max-width: 1100px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: grid; }
  .strip { max-width: none; }
}

/* ======================= TABLET (768–1100): texto abaixo do cartão para não cobrir o tênis ======================= */
@media (min-width: 768px) and (max-width: 1100px) {
  .hero { padding-bottom: 0; }
  .stage {
    height: auto; padding-top: calc(var(--g) + var(--hc));
    /* headline na largura do cartão e atleta apoiada na base, como no celular */
    --tw: min(calc(var(--cw) - var(--pad) * 2), calc(var(--hc) * .5));
    --wt: clamp(100px, calc(var(--hb) * .16), 150px);
    --aw: min(calc(var(--cw) * .9), calc(var(--hc) * .78));
    --ay: calc(var(--hc) - 2px - var(--ah) * .895);
  }
  .panel {
    position: relative; left: auto; top: auto; max-width: 560px;
    margin: calc(var(--ah) * .105 + 28px) var(--pad) 0; color: var(--deep);
  }
  .panel .lead { max-width: none; margin-bottom: 22px; font-size: 17px; font-weight: 400; line-height: 1.5; color: rgba(23,40,58,.8); }
  .btn--primary { background: var(--navy); color: var(--white); }
  .btn--ghost { border-color: rgba(7,59,120,.5); color: var(--navy); }
  .strip { padding-top: 40px; }
}

/* ======================= MOBILE ======================= */
@media (max-width: 767px) {
  .hero { --g: 10px; --pad: 20px; --r: 22px; --hb: 510px; padding-bottom: 0; }
  .stage {
    position: relative; height: auto; padding: var(--g) var(--g) 0;
    /* atleta maior e centralizada; o cartão vai até o fim da tela e a frase só aparece ao rolar */
    --tw: calc(var(--cw) - var(--pad) * 2);
    --sk: calc(var(--cw) + var(--g) * 2);                      /* largura real do cartão no celular */
    --aw: min(calc(var(--sk) * 1.05), calc((100svh - 286px) * 1.237));
    --ax: calc(var(--sk) / 2 - var(--aw) * .5504 + 4px);       /* tênis da frente inteiro na tela; a ponta do pé de trás é recortada pelo cartão */
    --hc: calc(100svh - 18px - var(--ah) * .105);
    --ay: calc(var(--hc) - 2px - var(--ah) * .895);
    --skyx: 0px; --skyy: 0px;
  }
  .sky { position: relative; inset: auto; height: var(--hc); border-radius: var(--r); clip-path: none; }
  .nav { padding: 14px var(--pad); }
  .nav__logo img { height: 44px; }
  .nav__right .icon-btn:not(.nav__menu):not(.bag) { display: none; }
  .word { top: 84px; }
  .panel { position: relative; left: auto; top: auto; margin: calc(var(--ah) * .105 + 28px) 0 0; padding: 0 10px; color: var(--deep); }
  .panel .lead { max-width: none; margin-bottom: 22px; font-size: 16px; font-weight: 400; line-height: 1.5; color: rgba(23,40,58,.8); }
  .btn--primary { background: var(--navy); color: var(--white); }
  .btn--ghost { border-color: rgba(7,59,120,.5); color: var(--navy); }
  .strip { grid-template-columns: 1fr; padding: 32px 30px 48px; gap: 18px; }
}