/* ==========================================================================
   Dual Sport Nutrition — landing page
   Design system herdado do template padrão Air Mídia Digital
   (grid 1240, tipografia, cards, botões, acordeão) com a paleta da Dual.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Marca.
     #FE0000 é o vermelho exato do logotipo e é usado em elementos gráficos
     (régua, ícones, bullets), onde a exigência de contraste é 3:1.
     Onde há TEXTO BRANCO sobre vermelho, usamos --red-btn: o vermelho puro
     dá 4,03:1 com branco e reprova no mínimo AA de 4,5:1. */
  --red:        #FE0000;   /* vermelho do logotipo — elementos gráficos */
  --red-btn:    #E00000;   /* fundo de botão com texto branco — 5,0:1 */
  --red-ink:    #C40000;   /* texto vermelho sobre fundo claro — 5,9:1 */
  --red-dark:   #C00000;   /* hover */
  --black:      #0A0A0A;
  --ink:        #111111;
  --body:       #4A4A4A;
  --muted:      #717171;
  --line:       #E4E4E4;
  --line-dark:  #2A2A2A;
  --bg:         #FFFFFF;
  --bg-soft:    #F6F6F6;

  /* Layout */
  --container:  1240px;
  --gutter:     32px;
  --radius:     4px;
  --section-y:  104px;

  /* Tipografia */
  --font-head:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow:     0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 18px 40px rgba(0,0,0,.10);
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,dl,dd{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

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

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--black); color:#fff; padding:14px 22px; font-weight:600;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Tipografia ---------- */
h1,h2,h3{ font-family:var(--font-head); color:var(--ink); line-height:1.18; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:clamp(34px, 3.4vw, 50px); }
h2{ font-size:clamp(28px, 2.8vw, 42px); }
h3{ font-size:20px; line-height:1.3; }
.h3-lg{ font-size:clamp(22px,2vw,28px); margin-bottom:14px; }

.eyebrow{
  font-family:var(--font-body);
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-ink); margin-bottom:16px;
}
.lead{ font-size:18px; color:var(--body); }
p + p{ margin-top:16px; }

.rule{ display:block; width:150px; height:3px; background:var(--red); margin:26px 0; }
.rule--center{ margin:22px auto 0; width:110px; }

.cities{
  margin-top:32px; font-size:14px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.cities span{ color:var(--red); margin:0 6px; }

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

/* Compensa a altura do header fixo quando o link de âncora leva à seção. */
section[id],
#hero{ scroll-margin-top:90px; }

.section{ padding-block:var(--section-y); }
.section--soft{ background:var(--bg-soft); }
.section--dark{ background:var(--black); color:#C9C9C9; }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }
.section--dark .lead{ color:#C9C9C9; }
.section--dark .eyebrow{ color:var(--red); }

.section__head{ max-width:760px; margin:0 auto 52px; text-align:center; }
.section__head--left{ margin-inline:0; text-align:left; }
.section__intro{ margin-top:22px; font-size:18px; }
.section__cta{ margin-top:56px; text-align:center; }

.grid{ display:grid; gap:24px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
/* Todas as imagens de seção ocupam o mesmo bloco 4:3. As montadas já vêm
   nessa proporção; a foto vertical da loja é enquadrada pelo object-position,
   para mostrar o balcão e as prateleiras, não o teto. */
.split__media > img{
  width:100%; aspect-ratio:4/3; height:auto;
  object-fit:cover; object-position:center 72%;
  border-radius:var(--radius);
}
.split--reverse .split__media{ order:2; }

/* Produtos recortados em camadas (mesmo tamanho de tela), empilhados e
   flutuando em ritmos diferentes. A creatina fica na frente do whey. */
.float-stack{ position:relative; aspect-ratio:844/614; }
.float-stack__item{
  position:absolute; inset:0; width:100%; height:100%;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.18));
  animation:float 5s ease-in-out infinite;
  will-change:transform;
}
.float-stack__item--1{ z-index:1; animation-duration:6s; }
.float-stack__item--2{ z-index:3; animation-duration:4.6s; animation-delay:-1.4s; }
.float-stack__item--3{ z-index:2; animation-duration:5.4s; animation-delay:-2.8s; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
@media (prefers-reduced-motion: reduce){
  .float-stack__item{ animation:none; }
}
.split--tight{ gap:56px; margin-top:72px; }
/* A imagem acompanha a rolagem enquanto o texto ao lado passa. */
.split--sticky{ align-items:start; }
.split--sticky .split__media{ position:sticky; top:120px; }
/* Variante inversa: o texto acompanha a rolagem ao lado da imagem. */
.split--sticky-content{ align-items:start; }
.split--sticky-content .split__content{ position:sticky; top:120px; }
/* Enquanto a faixa de logos das marcas está oculta, este bloco encosta direto
   no título da seção e não precisa do respiro extra. */
.split--sem-marcas{ margin-top:0; }
.split + .grid,.split + .container{ margin-top:72px; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 32px;
  font-family:var(--font-body); font-size:16px; font-weight:700; line-height:1;
  border:2px solid transparent; border-radius:var(--radius);
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--red-btn); color:#fff; border-color:var(--red-btn); }
.btn--primary:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--outline:hover{ background:var(--ink); color:#fff; }
.section--dark .btn--outline{ color:#fff; border-color:#fff; }
.section--dark .btn--outline:hover{ background:#fff; color:var(--ink); }
.btn--block{ width:100%; }
.btn--lg{ padding:20px 44px; font-size:17px; }
.btn__ico{ width:20px; height:20px; flex:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }

/* Respiro entre o texto e o botão que vem logo depois dele. */
p + .btn,
.lead + .btn,
.rule + .btn{ margin-top:36px; }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.header.is-stuck{ box-shadow:0 6px 24px rgba(0,0,0,.07); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; height:88px; }

.brand{ display:flex; align-items:center; flex:none; }
/* Lockup horizontal oficial, extraído do PDF vetorial do cliente. */
.brand__logo{ width:auto; height:46px; }
.brand--footer .brand__logo{ height:54px; }

.nav{ display:flex; align-items:center; gap:40px; margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:34px; }
.nav__list a{
  position:relative; font-size:15px; font-weight:600; color:var(--ink); padding-block:6px;
}
.nav__list a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--red); transition:width .25s var(--ease);
}
.nav__list a:hover::after,.nav__list a.is-active::after{ width:100%; }
.nav__cta{ padding:13px 26px; font-size:15px; }

.burger{ display:none; width:44px; height:44px; flex-direction:column; justify-content:center; gap:6px; }
.burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
.burger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ padding-top:96px; }
.hero__inner{ display:grid; grid-template-columns:1.05fr 1fr; gap:80px; align-items:center; padding-bottom:96px; }
.hero__media img,.hero__media .ph-img{ border-radius:var(--radius); }

.strip{ background:var(--black); }
.strip__inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px;
  padding-block:20px;
  font-size:14px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#fff;
}
.strip i{ width:6px; height:6px; background:var(--red); border-radius:50%; }

/* ---------- Cards ---------- */
.cards .card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px; box-shadow:var(--shadow);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.cards .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#D2D2D2; }
.card h3{ margin-bottom:12px; }
.card p{ font-size:16px; }

.card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-bottom:22px;
  background:var(--red); color:#fff; border-radius:var(--radius);
}
.card__icon svg{ width:26px; height:26px; }

.card__num{
  display:block; margin-bottom:16px;
  font-family:var(--font-head); font-size:15px; font-weight:700;
  letter-spacing:.1em; color:var(--red-ink);
}
.card--accent{ border-color:var(--red); }
.card--accent .card__num{ color:var(--red-ink); }

.cards--dark .card{ background:#151515; border-color:var(--line-dark); box-shadow:none; }
.cards--dark .card:hover{ border-color:#3D3D3D; box-shadow:none; }
.cards--dark .card p{ color:#B4B4B4; }

/* ---------- Listas de destaque ---------- */
.features{ margin:34px 0 0; display:grid; gap:26px; }
.features li{ padding-left:22px; border-left:3px solid var(--red); }
.features h3{ font-size:18px; margin-bottom:6px; }
.features p{ font-size:16px; }
.features + .btn{ margin-top:38px; }

.steps{ margin:34px 0 0; display:grid; gap:24px; }
.steps li{ display:flex; gap:20px; align-items:flex-start; }
.steps__num{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--black); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:17px;
}
.steps h3{ font-size:18px; margin-bottom:4px; }
.steps p{ font-size:16px; }
.steps + .btn{ margin-top:38px; }

/* ---------- Marcas ---------- */
.marcas__label{
  text-align:center; margin-bottom:28px;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.brands{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }

/* ---------- Mosaico "quem somos" ---------- */
.mosaic{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:16px; }
.mosaic__item{ position:relative; margin:0; overflow:hidden; border-radius:var(--radius); }
.mosaic__item--tall{ grid-row:span 2; }
.mosaic__item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.mosaic__item:hover img{ transform:scale(1.04); }
.mosaic__item--tall img{ min-height:420px; }
.mosaic__item:not(.mosaic__item--tall) img{ height:202px; }
.mosaic__item figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding:26px 16px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.78), transparent);
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

/* ---------- Unidades ---------- */
.units .unit{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.units .unit:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.unit__media{ height:230px; overflow:hidden; background:var(--bg-soft); }
.unit__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.unit:hover .unit__media img{ transform:scale(1.05); }
.unit__body{ display:flex; flex-direction:column; flex:1; padding:30px 28px 28px; }
.unit__body h3{ font-size:22px; }
.unit__name{ margin-top:6px; font-size:15px; color:var(--muted); }
.unit__info{ margin:22px 0 26px; flex:1; }
.unit__info dt{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-ink); margin-bottom:4px;
}
.unit__info dd{ margin:0 0 16px; font-size:16px; }
.unit__info dd:last-child{ margin-bottom:0; }
.unit__info dd a{ color:inherit; font-weight:600; }
.unit__info dd a:hover{ color:var(--red-ink); }

/* ---------- FAQ ---------- */
.faq__wrap{ max-width:900px; }
.faq{ margin-top:48px; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  display:flex; align-items:center; gap:18px; width:100%;
  padding:26px 4px; text-align:left;
  font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--ink);
  transition:color .2s var(--ease);
}
.faq__q:hover{ color:var(--red-ink); }
.faq__idx{
  flex:none; font-family:var(--font-body); font-size:13px; font-weight:700;
  letter-spacing:.06em; color:var(--red-ink);
}
.faq__title{ flex:1; }
.faq__chevron{ flex:none; width:22px; height:22px; color:var(--red); transition:transform .3s var(--ease); }
.faq__q[aria-expanded="true"] .faq__chevron{ transform:rotate(180deg); }
.faq__a{ overflow:hidden; }
.faq__a > p{ padding:0 4px 28px 55px; font-size:17px; }

/* ---------- CTA final ---------- */
.cta-final{ background:var(--black); color:#fff; padding-block:88px; }
.cta-final__inner{
  display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap;
}
.cta-final h2{ color:#fff; max-width:660px; }

/* ---------- Rodapé ---------- */
.footer{ background:var(--black); color:#9F9F9F; padding-top:64px; border-top:1px solid var(--line-dark); }
.footer__top{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.brand--footer .brand__text strong{ color:#fff; }
.brand--footer .brand__text em{ color:var(--red); }
.footer__nav{ display:flex; flex-wrap:wrap; gap:28px; }
.footer__nav a{ font-size:15px; font-weight:500; transition:color .2s var(--ease); }
.footer__nav a:hover{ color:#fff; }
.footer__social{ display:flex; flex-direction:column; gap:6px; }
/* Perfis do Instagram em texto, um abaixo do outro. */
.footer__social a{
  color:#9F9F9F; font-size:15px; font-weight:600;
  transition:color .2s var(--ease);
}
.footer__social a:hover{ color:#fff; }

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-block:48px 32px; font-size:14px;
}
.footer__bottom p{ margin:0; }
.footer__by strong{ color:#fff; font-weight:600; }

/* ---------- Botão flutuante ---------- */
.float-wpp{
  position:fixed; right:24px; bottom:24px; z-index:90;
  display:flex; align-items:center; gap:10px;
  padding:14px 22px 14px 18px; border-radius:999px;
  background:var(--red-btn); color:#fff;
  font-size:15px; font-weight:700; box-shadow:0 10px 28px rgba(0,0,0,.28);
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.float-wpp:hover{ background:var(--red-dark); transform:translateY(-2px); }
.float-wpp svg{ width:24px; height:24px; flex:none; }

/* ==========================================================================
   PLACEHOLDERS — tudo abaixo é provisório e deve sair antes da publicação.
   Para localizar as pendências: procure por "[PENDENTE]" no index.html
   ou consulte PENDENCIAS.md na raiz do projeto.
   ========================================================================== */
.ph-img{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; border:2px dashed #CBCBCB; border-radius:var(--radius);
  background-color:#FAFAFA;
  background-image:
    linear-gradient(45deg,#EDEDED 25%,transparent 25%,transparent 75%,#EDEDED 75%),
    linear-gradient(45deg,#EDEDED 25%,transparent 25%,transparent 75%,#EDEDED 75%);
  background-size:38px 38px;
  background-position:0 0,19px 19px;
}
.ph-img--hero{ aspect-ratio:1/1; }
.ph-img--dark{
  border-color:#3A3A3A; background-color:#151515;
  background-image:
    linear-gradient(45deg,#1E1E1E 25%,transparent 25%,transparent 75%,#1E1E1E 75%),
    linear-gradient(45deg,#1E1E1E 25%,transparent 25%,transparent 75%,#1E1E1E 75%);
}
.ph-img__label{
  padding:14px 20px; border-radius:var(--radius);
  background:rgba(255,255,255,.9);
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#5A5A5A; text-align:center; line-height:1.7;
}
.ph-img--dark .ph-img__label{ background:rgba(0,0,0,.72); color:#B0B0B0; }
.ph-img__label small{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:none; }

.ph-brand{
  display:flex; align-items:center; justify-content:center; min-height:104px;
  border:2px dashed #CBCBCB; border-radius:var(--radius); background:#FAFAFA;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#8A8A8A; text-align:center; line-height:1.8;
}
.ph-brand small{ font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:none; }

.ph-text{
  background:#FFF3CD; color:#6B5200;
  padding:1px 7px; border-radius:3px;
  border-bottom:2px dotted #C9A227;
  font-size:.94em; font-weight:600;
}

/* Ícones sociais pendentes: só a moldura tracejada, sem etiqueta (não cabe). */
.footer__social a.is-pending{
  background:transparent; border:2px dashed #C9A227; color:#C9A227;
}
.footer__social a.is-pending:hover{ background:transparent; }

.btn.is-pending{ position:relative; }
.btn.is-pending::after{
  content:'link pendente'; position:absolute; top:-9px; right:-6px;
  padding:2px 8px; border-radius:999px;
  background:#FFF3CD; color:#6B5200; border:1px solid #C9A227;
  font-family:var(--font-body); font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; pointer-events:none;
}

/* ---------- Animação de entrada ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-visible{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}