/* ============================================================
   NATANE GONÇALVES — responsive.css
   Tipografia + layout responsivo — mobile-first refinado
   Referência de escala: styles.css (Jost/Playfair, azul)
============================================================ */

/* ══════════════════════════════════════════════════
   1024px — tablet landscape
══════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Layout */
  .hero__layout       { gap: 3rem; }
  .areas__grid        { grid-template-columns: repeat(2, 1fr); }
  .process__steps     { grid-template-columns: repeat(2, 1fr); }
  .process__steps::before { display: none; }

  /* Tipografia */
  .hero__title        { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
  .section-title      { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
  .cta-section__title { font-size: clamp(2rem, 4vw, 3rem); }
}

/* ══════════════════════════════════════════════════
   800px — tablet portrait / mobile grande
══════════════════════════════════════════════════ */
@media (max-width: 800px) {

  /* Nav */
  .nav__links  { display: none; }
  .nav__cta    { display: none; }
  .nav__burger { display: flex; }

  /* Hero */
  .hero__layout {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .hero__title  { font-size: clamp(2rem, 7vw, 3rem); }
  .hero__desc   {
    font-size: .95rem;
    line-height: 1.65;
    margin-inline: auto;
  }
  .hero__btns   { justify-content: center; }
  .hero__visual { order: -1; }
  .hero__card   { max-width: 340px; margin-inline: auto; }

  /* Section titles */
  .section-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .section-sub   { font-size: .9rem; line-height: 1.6; }
  .overline      { font-size: .58rem; letter-spacing: .2em; }

  /* About */
  .about__layout      { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__image-col   { max-width: 340px; margin-inline: auto; }
  .about__cta         { flex-direction: column; align-items: flex-start; }
  .about__text        { font-size: .93rem; line-height: 1.7; }
  .about__quote       { font-size: 1.05rem; }

  /* Process */
  .process__formats   { grid-template-columns: 1fr; }
  .process__step h3   { font-size: .95rem; }
  .process__step p    { font-size: .82rem; }
  .format-card h3     { font-size: 1.1rem; }
  .format-card p      { font-size: .85rem; }

  /* FAQ */
  .faq__layout  { grid-template-columns: 1fr; gap: 2.5rem; }
  .faq__desc    { font-size: .92rem; line-height: 1.65; }
  .faq__q       { font-size: .97rem; }
  .faq__a p     { font-size: .88rem; line-height: 1.7; }

  /* Contact */
  .contact__grid        { grid-template-columns: 1fr; gap: 2rem; }
  .contact__right       { position: static; }
  .contact__map-frame   { height: 240px; }
  .contact__map-title   { font-size: 1rem; }
  .contact__map-address { font-size: .85rem; }
  .contact__card-val    { font-size: .88rem; }

  /* CTA */
  .cta-section__title { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .cta-section__sub   { font-size: .93rem; line-height: 1.65; }

  /* Footer */
  .footer__layout  { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__bottom  { flex-direction: column; text-align: center; }
  .footer__name    { font-size: 1.1rem; }
  .footer__desc    { font-size: .83rem; }
  .footer__nav a   { font-size: .83rem; }

  /* Botões */
  .btn {
    font-size: .66rem;
    letter-spacing: .12em;
    padding: .85rem 1.8rem;
  }
}

/* ══════════════════════════════════════════════════
   560px — mobile padrão
══════════════════════════════════════════════════ */
@media (max-width: 560px) {

  :root { --wrap: min(1180px, 100% - 2rem); }

  /* Base */
  html { font-size: 15px; }

  body { line-height: 1.6; }

  /* Hero */
 
  .hero__title {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
    line-height: 1.15;
    margin-bottom: 1rem;
  }
  .hero__desc {
    font-size: .88rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  .hero__btns           { flex-direction: column; align-items: center; }
  .hero__btns .btn      { width: 100%; justify-content: center; }
  .hero__badge strong   { font-size: .85rem; }
  .hero__badge span     { font-size: .6rem; }

  /* Tipografia geral */
  .section-title  { font-size: clamp(1.45rem, 6.5vw, 1.9rem); line-height: 1.2; }
  .section-sub    { font-size: .85rem; line-height: 1.6; margin-top: .5rem; }
  .overline       { font-size: .55rem; letter-spacing: .18em; margin-bottom: .75rem; }
  .section-head   { margin-bottom: clamp(2rem, 6vw, 3rem); }

  /* Areas */
  .areas__grid    { grid-template-columns: 1fr; }
  .area-card h3   { font-size: .9rem; }
  .area-card p    { font-size: .8rem; }

  /* Process */
  .process__steps { grid-template-columns: 1fr; }
  .process__num   { font-size: .68rem; }
  .process__step h3 { font-size: .92rem; }
  .process__step p  { font-size: .8rem; }
  .format-card    { padding: 1.8rem 1.4rem; }
  .format-card h3 { font-size: 1rem; }
  .format-card p  { font-size: .82rem; }

  /* Signals */
  .signals__note              { font-size: .92rem; }
  .signals-transition__text   { font-size: clamp(.95rem, 3.5vw, 1.1rem); }
  .signal-card h3             { font-size: .82rem; }

  /* FAQ */
  .faq__q   { font-size: .92rem; padding: 1.1rem 0; }
  .faq__a p { font-size: .84rem; }

  /* CTA */
  .cta-section__title   { font-size: clamp(1.55rem, 7vw, 2.2rem); line-height: 1.2; }
  .cta-section__sub     { font-size: .86rem; line-height: 1.6; }
  .cta-section__note    { font-size: .55rem; letter-spacing: .14em; }
  .cta-card__quote      { font-size: 1rem; line-height: 1.55; }
  .cta-card__name       { font-size: .68rem; }
  .cta-card__role       { font-size: .6rem; }

  /* Contact */
  .contact__map-title   { font-size: .95rem; }
  .contact__map-address { font-size: .82rem; }
  .contact__map-note    { font-size: .7rem; }
  .contact__card-label  { font-size: .58rem; }
  .contact__card-val    { font-size: .85rem; }

  /* Footer */
  .footer__name    { font-size: 1rem; }
  .footer__tag     { font-size: .55rem; letter-spacing: .16em; }
  .footer__desc    { font-size: .8rem; line-height: 1.65; }
  .footer__nav-title { font-size: .55rem; letter-spacing: .16em; }
  .footer__nav a   { font-size: .8rem; }
  .footer__areas li { font-size: .78rem; }
  .footer__bottom p { font-size: .72rem; }
  .footer__motto    { font-size: .62rem; letter-spacing: .12em; }

  /* Floats */
  .whatsapp-float { right: 1.25rem; bottom: 1.25rem; }
  .to-top         { right: calc(1.25rem + 5px); bottom: calc(1.25rem + 54px + 12px); }

  /* Botões */
  .btn {
    font-size: .63rem;
    letter-spacing: .1em;
    padding: .8rem 1.5rem;
  }
}

/* ══════════════════════════════════════════════════
   380px — mobile pequeno (iPhone SE, Galaxy A)
══════════════════════════════════════════════════ */
@media (max-width: 380px) {

  html { font-size: 14px; }

  .hero__title    { font-size: clamp(1.6rem, 9vw, 2rem); }
  .section-title  { font-size: clamp(1.3rem, 7.5vw, 1.7rem); }
  .cta-section__title { font-size: clamp(1.4rem, 8vw, 1.9rem); }

  .hero__desc     { font-size: .84rem; }
  .section-sub    { font-size: .82rem; }
  .about__text    { font-size: .84rem; }
  .faq__q         { font-size: .88rem; }

  .btn {
    font-size: .6rem;
    padding: .75rem 1.3rem;
  }
}