/* =========================================================
   responsive.css — Breakpoints
   ========================================================= */

/* ---------- Tablet ---------- */
@media (max-width: 992px){
  .hero__inner{
    grid-template-columns:1fr;
    gap:56px;
    text-align:center;
  }
  .hero__badges{ justify-content:center; }
  .hero__features{ justify-content:center; }
  .hero__media{ max-width:420px; margin-inline:auto; margin-bottom:40px; }
  .hero__card{ left:50%; transform:translateX(-50%); bottom:-20px; }
  .section__text{ margin-inline:auto; }
}

/* ---------- Mobile nav ---------- */
@media (max-width: 960px){
  .nav{
    position:fixed;
    top:0; right:0;
    width:max-content;
    max-width:80vw;
    height:100vh;
    background:var(--petrol);
    box-shadow:-10px 0 40px rgba(0,0,0,0.3);
    transform:translateX(100%);
    transition:var(--transition);
    z-index:99;
    padding:100px 32px 32px;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__list{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
  }
  .header .nav__list a{ color:var(--off-white); }
  .nav-toggle{ display:flex; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 560px){
  .hero{ padding-top:110px; }
  .hero__title{ font-size:1.6rem; }
  .btn{ padding:14px 24px; font-size:.9rem; }
  .section{ padding-block:80px; }
  .hero__subtitle-line{ display:block; }
}

/* ---------- Cabeçalho apertado (pill "Atendimento Individual" vira ícone) ---------- */
@media (max-width: 600px){
  .header__inner{ gap:12px; }
  .nav__atendimento{ padding:10px; gap:0; }
  .nav__atendimento-text{ display:none; }
}

/* ---------- Para quem é / O que é TFT responsivo ---------- */
@media (max-width: 900px){
  .publico-tft__grid{ grid-template-columns:1fr; gap:56px; }
}

/* ---------- O que você vai aprender responsivo ---------- */
@media (max-width: 992px){
  .conteudo__grid{
    grid-template-columns:1fr;
    gap:56px;
  }
  .conteudo__resultados{ order:-1; }
}

/* ---------- Você Receberá / Bônus responsivo ---------- */
@media (max-width: 992px){
  .voce-recebera__grid{ grid-template-columns:1fr; gap:56px; }
}

@media (max-width: 560px){
  .bonus__grid{ grid-template-columns:1fr; }
  .bonus__card--wide{ grid-column:auto; }
}

/* ---------- Sua Professora responsivo ---------- */
@media (max-width: 992px){
  .professora__inner{ grid-template-columns:1fr; gap:48px; }
  .professora__profile{ flex-direction:column; text-align:center; }
  .professora__bio{ margin-inline:auto; }
  .professora__credenciais{ align-items:center; }
  .professora__quote{
    border-left:none;
    border-top:2px solid var(--gold);
    padding-left:0;
    padding-top:24px;
    text-align:center;
  }
}

/* ---------- Depoimentos responsivo ---------- */
@media (max-width: 992px){
  .depoimentos__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .depoimentos__grid{ grid-template-columns:1fr; }
}

/* ---------- Garantia + FAQ responsivo ---------- */
@media (max-width: 900px){
  .garantia-faq__grid{ grid-template-columns:1fr; gap:56px; }
  .garantia__badge{ margin-inline:auto; }
  .garantia__col{ text-align:center; }
  .garantia__col .section__title,
  .garantia__col .section__text{ text-align:center; margin-inline:auto; }
}

@media (max-width: 560px){
  .faq__question{ padding:18px 20px; font-size:.9rem; }
  .faq__answer{ padding-inline:20px; }
  .faq__note{ flex-direction:column; }
}

/* ---------- CTA Final com preço responsivo ---------- */
@media (max-width: 992px){
  .cta-final__grid{
    grid-template-columns:1fr;
    gap:44px;
    text-align:center;
  }
  .cta-final__features{ align-items:center; }
  .cta-final__badge-col{ align-items:center; text-align:center; }
  .cta-final__pricing{ max-width:400px; margin-inline:auto; }
}

@media (max-width: 560px){
  .cta-final{ padding-block:80px; }
  .cta-final__pricing{ padding:32px 24px; }
}

/* ---------- Footer responsivo ---------- */
@media (max-width: 860px){
  .footer__inner{
    grid-template-columns:1fr;
    gap:36px;
    text-align:center;
  }
  .footer__tagline{ margin-inline:auto; }
  .footer__social{ justify-content:center; }
  .footer__nav{ justify-content:center; }
}

/* ---------- Problema responsivo ---------- */
@media (max-width: 860px){
  .problema__grid{ grid-template-columns:1fr; gap:36px; }
}

/* ---------- Solução + Transformação responsivo ---------- */
@media (max-width: 900px){
  .solucao__grid{ grid-template-columns:1fr; gap:56px; }
}

/* ---------- Benefícios (cards) + Público responsivo ---------- */
@media (max-width: 860px){
  .beneficios-cards__grid{ grid-template-columns:1fr 1fr; }
  .publico__wrap{ padding:32px 24px; }
  .publico__list--inline{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .beneficios-cards__grid{ grid-template-columns:1fr; }
}

/* ---------- Como Funciona (timeline do curso) responsivo ---------- */
@media (max-width: 860px){
  .timeline-curso{
    grid-template-columns:1fr;
    gap:36px;
    padding-left:28px;
  }
  .timeline-curso__line{
    top:0; bottom:0; left:21px; right:auto;
    width:2px; height:auto;
    background:linear-gradient(180deg, var(--sage), var(--gold), var(--petrol));
  }
  .timeline-curso__step{
    text-align:left;
    padding-inline:0;
    padding-left:36px;
    position:relative;
  }
  .timeline-curso__number{
    position:absolute;
    left:-28px; top:0;
    margin:0;
  }
  .timeline-curso__text{ margin-inline:0; max-width:100%; }
}

/* ---------- Reconhecimento MEC responsivo ---------- */
@media (max-width: 860px){
  .mec__grid{ grid-template-columns:1fr; }
}

/* ---------- Resultados responsivo ---------- */
@media (max-width: 640px){
  .resultados__stats{ grid-template-columns:1fr; gap:32px; }
}

/* ---------- Diferenciais responsivo ---------- */
@media (max-width: 640px){
  .diferenciais-item{ grid-template-columns:1fr; gap:8px; }
}

/* ---------- CTA Final 2 colunas responsivo ---------- */
@media (max-width: 992px){
  .cta-final__grid--2col{ grid-template-columns:1fr; }
}

/* ---------- Última Chamada responsivo ---------- */
@media (max-width: 560px){
  .ultima-chamada__features{ flex-direction:column; gap:12px; }
}

/* ---------- Footer 3 colunas responsivo ---------- */
@media (max-width: 900px){
  .footer__inner{ grid-template-columns:1fr; text-align:center; }
  .footer__legal{ align-items:center; }
}