/* =========================================================
   RESPONSIVIDADE
   Mobile  : 0    – 767px
   Tablet  : 768  – 1024px
   Desktop : 1025px +
   ========================================================= */

/* ---------- TABLET (768 – 1024) ---------- */
@media (max-width: 1024px) {
  :root {
    --fs-4xl: 2.75rem;
    --fs-3xl: 2.375rem;
    --fs-2xl: 2rem;
    --section-y: var(--s-8);
  }

  /* Hero em vídeo de fundo: uma coluna só em qualquer largura.
     No tablet/mobile, texto centralizado e overlay mais uniforme —
     o corte do vídeo (object-fit: cover) varia com a proporção da
     tela, então um gradiente 90° pensado para desktop não garante
     contraste igual nas bordas em telas estreitas. */
  .hero { min-height: 0; display: block; text-align: center; padding-block: var(--s-7) var(--s-8); }
  .hero__logo { margin-inline: auto; }
  .hero__grid { max-width: 620px; margin-inline: auto; }
  .hero__sub { margin-inline: auto; max-width: 40ch; }
  .hero__benefits { max-width: 300px; margin-inline: auto var(--s-6); text-align: left; }
  .hero__cta { align-items: center; }
  .hero .trust { margin-inline: auto; }
  .hero .tarja { margin-inline: auto; }
  .hero__guarantee { justify-content: center; }
  .hero__overlay {
    background: linear-gradient(180deg, rgba(6,55,51,.88) 0%, rgba(6,55,51,.74) 55%, rgba(6,55,51,.62) 100%);
  }

  /* Ofertas passam a 2 colunas: a principal continua destacada */
  .offers__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
  .offer--featured { transform: none; }
  .offer--featured:hover { transform: translateY(-6px); }


}

/* ---------- MOBILE (0 – 767) ---------- */
@media (max-width: 767px) {
  :root {
    --fs-4xl: 2.125rem;   /* 34px */
    --fs-3xl: 1.875rem;
    --fs-2xl: 1.625rem;   /* 26px */
    --fs-xl:  1.375rem;
    --fs-lg:  1.1875rem;
    --fs-md:  1.0625rem;
    --gutter: 18px;
    --section-y: var(--section-y-mobile);
  }

  /* ===== HERO: vídeo de fundo, texto centralizado, sem sangramento
     de imagem — a composição de uma coluna já vem do bloco <=1024px */
  .hero { padding-block: var(--s-6) var(--s-7); text-align: center; min-height: 0; display: block; }
  .hero__logo { height: 50px; width: auto; margin: 0 auto var(--s-6); }
  .hero__sub      { max-width: 34ch; }
  .hero__benefits { max-width: 26ch; }

  /* ===== Grids colapsam para 1 coluna ===== */
  .grid--3,
  .treat__grid,
  .footer__top { grid-template-columns: 1fr; }
  .footer__links { justify-self: start; text-align: left; }


  /* imagem acima do texto nas seções de duas colunas */
  .original__media { order: -1; }

  /* ===== Ofertas em coluna única ===== */
  .offers__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .offer { padding: var(--s-7) var(--s-5) var(--s-5); }
  .offer__kicker { min-height: 0; }
  .offer__img { max-width: 190px; }

  /* ===== Depoimentos empilhados ===== */
  .testimonial {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: var(--s-6) var(--s-5);
  }
  .testimonial__photo { width: 108px; height: 108px; }

  /* ===== Resultados ===== */
  .results__grid { grid-template-columns: 1fr; }

  /* ===== Botões ocupam a largura toda e mantêm alvo de toque ===== */
  .btn { width: 100%; min-height: 56px; padding-inline: var(--s-5); font-size: var(--fs-base); }
  .cta-block .btn { min-width: 0; }

  /* ===== FAQ ===== */
  .faq__trigger { font-size: var(--fs-base); gap: var(--s-4); }

  /* ===== Alerta ===== */
  .alertbar { font-size: var(--fs-xs); padding: 8px var(--gutter); }

  /* ===== WhatsApp ===== */
  .wa-float { width: 54px; height: 54px; right: 14px; bottom: 14px; }
  .wa-float svg { width: 28px; height: 28px; }

  .compo__img { width: 112px; height: 112px; }
  .guarantee__seal { width: 150px; }
}

/* ---------- TELAS MUITO ESTREITAS (≤ 360px) ---------- */
@media (max-width: 360px) {
  :root { --fs-4xl: 1.875rem; --gutter: 14px; }
  .btn { font-size: var(--fs-sm); letter-spacing: 0; }
}

/* ---------- DESKTOP LARGO ---------- */
@media (min-width: 1440px) {
  :root { --wrap: 1240px; }
}

/* ---------- SEÇÕES ADICIONADAS ---------- */
@media (max-width: 1024px) {
  .authority__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .authority__photo { max-width: 380px; margin-inline: auto; }
  .authority__sign { margin-inline: auto; }
  .treat__layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .treat__frasco { max-width: 320px; order: -1; }
}
@media (max-width: 767px) {
  .usage__cards { grid-template-columns: 1fr; }
  .footer__services { grid-template-columns: 1fr; gap: var(--s-5); }
  .formula-art img { border-radius: var(--r-md); }
  .offer__frete { max-width: 170px; }
}

@media (max-width: 1024px) {
  .footer__services { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .footer__copy { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .footer__services { grid-template-columns: 1fr; }
  .offer__img { height: 190px; }
  .offer__cta { font-size: var(--fs-sm); }
}

@media (max-width: 767px) {
  .trust { max-width: 300px; }
}


/* =========================================================
   TABLET (768–1024px) — blocos de três colunas
   Em três colunas o texto de cada card cai para ~29 caracteres
   por linha nessa faixa. Duas colunas sobem para ~34–49, que é
   onde a leitura fica confortável.
   ========================================================= */
@media (max-width: 1024px) and (min-width: 768px) {
  .grid--3,
  .usage__cards { grid-template-columns: repeat(2, 1fr); }

  /* o item ímpar ocupa a linha inteira em vez de ficar sozinho e estreito */
  .grid--3 > *:last-child:nth-child(odd),
  .usage__cards > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}