/* ==========================================================================
   Dual Sport Nutrition — responsividade
   Referências: layout-desktop.pdf (1440) e layout-mobile.pdf (414)
   Breakpoints: 1180 / 980 / 768 / 520
   ========================================================================== */

/* ---------- < 1180px : desktop menor / notebook ---------- */
@media (max-width: 1180px){
  :root{ --section-y:96px; --gutter:28px; }

  .split{ gap:56px; }
  .hero__inner{ gap:56px; }
  .nav{ gap:28px; }
  .nav__list{ gap:26px; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .brands{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- < 980px : tablet ---------- */
@media (max-width: 980px){
  :root{ --section-y:80px; }
  body{ font-size:16px; }

  /* Menu mobile */
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:88px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:8px 28px 32px;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 18px 32px rgba(0,0,0,.12);
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    max-height:calc(100vh - 88px); overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__list a{
    display:block; padding:18px 4px; font-size:17px;
    border-bottom:1px solid var(--line);
  }
  .nav__list a::after{ display:none; }
  .nav__cta{ margin-top:22px; width:100%; padding:17px 26px; }

  /* Blocos de duas colunas viram uma */
  .hero{ padding-top:56px; }
  .hero__inner{ grid-template-columns:1fr; gap:44px; padding-bottom:64px; }
  .split{ grid-template-columns:1fr; gap:44px; }
  .split--reverse .split__media{ order:0; }
  .split--sticky .split__media,
  .split--sticky-content .split__content{ position:static; }
  .split--tight{ margin-top:56px; }
  .split + .grid,.split + .container{ margin-top:56px; }

  .section__head{ margin-bottom:44px; }
  .section__cta{ margin-top:40px; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }

  .mosaic__item--tall img{ min-height:340px; }
  .mosaic__item:not(.mosaic__item--tall) img{ height:162px; }

  .cta-final{ padding-block:64px; }
  .cta-final__inner{ gap:32px; }
}

/* ---------- < 768px : celular grande ---------- */
@media (max-width: 768px){
  :root{ --section-y:64px; --gutter:20px; }

  .header__inner{ height:76px; }
  .nav{ inset:76px 0 auto 0; padding-inline:20px; max-height:calc(100vh - 76px); }
  section[id],#hero{ scroll-margin-top:78px; }
  .brand__mark{ width:44px; height:44px; }
  .brand__text strong{ font-size:19px; }
  .brand__text em{ font-size:9px; letter-spacing:.2em; }

  h3{ font-size:19px; }
  .lead{ font-size:17px; }
  .section__intro{ font-size:17px; }
  .rule{ width:120px; margin-block:22px; }

  .btn{ padding:16px 26px; font-size:15px; }
  .btn--lg{ padding:18px 32px; font-size:16px; }
  .btn-row{ gap:12px; margin-top:28px; }
  .btn-row .btn{ flex:1 1 100%; }

  .strip__inner{ gap:12px; font-size:12px; letter-spacing:.16em; padding-block:16px; }

  .grid{ gap:16px; }
  .grid--3,.grid--4{ grid-template-columns:1fr; }
  .cards .card{ padding:28px 24px; }
  .card__icon{ width:46px; height:46px; margin-bottom:18px; }
  .card__icon svg{ width:23px; height:23px; }

  .brands{ grid-template-columns:repeat(2,1fr); gap:14px; }

  .features{ gap:22px; }
  .steps{ gap:20px; }
  .steps li{ gap:16px; }
  .steps__num{ width:40px; height:40px; font-size:16px; }

  .mosaic{ gap:12px; }
  .mosaic__item--tall img{ min-height:260px; }
  .mosaic__item:not(.mosaic__item--tall) img{ height:124px; }

  .unit__media{ height:200px; }
  .unit__body{ padding:26px 22px 24px; }

  .faq{ margin-top:36px; }
  .faq__q{ gap:12px; padding:22px 2px; font-size:16.5px; }
  .faq__chevron{ width:20px; height:20px; }
  .faq__a > p{ padding:0 2px 24px 40px; font-size:16px; }

  .cta-final__inner{ flex-direction:column; align-items:flex-start; }
  .cta-final .btn{ width:100%; }

  .footer{ padding-top:48px; }
  .footer__top{ gap:28px; }
  .footer__nav{ gap:18px 24px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:10px; text-align:left; }

  /* Botão flutuante encolhe para ícone */
  .float-wpp{ right:16px; bottom:16px; padding:15px; border-radius:50%; }
  .float-wpp span{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }

  .ph-img--hero{ aspect-ratio:4/3; }
  .ph-img__label{ font-size:11px; padding:12px 16px; }
}

/* ---------- < 520px : celular pequeno ---------- */
@media (max-width: 520px){
  :root{ --gutter:18px; }

  h1{ font-size:32px; }
  h2{ font-size:26px; }

  .cities{ font-size:12px; margin-top:26px; }
  .strip__inner{ gap:10px; font-size:11px; }
  .brands{ grid-template-columns:1fr; }
  .mosaic{ grid-template-columns:1fr; }
  .mosaic__item--tall{ grid-row:auto; }
  .mosaic__item img,
  .mosaic__item--tall img,
  .mosaic__item:not(.mosaic__item--tall) img{ height:210px; min-height:0; }
}

/* ---------- Impressão ---------- */
@media print{
  .header,.float-wpp,.burger,.nav{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .section--dark,.cta-final,.footer{ background:#fff !important; color:#000 !important; }
  .section--dark h2,.section--dark h3,.cta-final h2{ color:#000 !important; }
  .faq__a{ display:block !important; }
}