/* ============================================================
   RESPONSIVE v2 — Desktop First
   Dr. Elci Júnior Landing Page
   ============================================================ */

/* ---- 1280px ---- */
@media (max-width: 1280px) {
  .tcu-number { font-size: clamp(5rem, 8vw, 8rem); }
}

/* ---- 1100px ---- */
@media (max-width: 1100px) {
  .hero-visual { height: 460px; }
  .hero-diagram--tl { width: 88px; height: 88px; }

  .tcu-bento { grid-template-columns: 1fr 1fr; }
  .tcu-cell--large { grid-row: span 1; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .audience-wrap { gap: var(--sp-8); }
}

/* ---- 992px ---- */
@media (max-width: 992px) {
  /* Navbar — drawer */
  .navbar-nav {
    position: fixed;
    top: 0; right: -100%;
    width: 300px; height: 100vh;
    background: var(--color-bg-white);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-8);
    gap: var(--sp-5);
    box-shadow: var(--shadow-xl);
    transition: right var(--dur-slow) var(--ease-out);
    z-index: var(--z-modal);
  }
  .navbar-nav.is-open { right: 0; }
  .navbar-toggle { display: flex; z-index: calc(var(--z-modal) + 1); }
  .navbar-link { font-size: var(--text-md); }
  .navbar-cta  { width: 100%; justify-content: center; padding: 14px 24px; }

  /* Hero */
  .hero { min-height: auto; padding-top: 90px; padding-bottom: var(--sp-10); }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    text-align: center;
  }
  .hero-content { max-width: 600px; margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }

  /* Mobile hero photo — simple block image below the title */
  .hero-mobile-photo {
    display: block;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-6);
    border-radius: var(--r-xl);
    overflow: hidden;
  }
  .hero-mobile-photo-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: top center;
    display: block;
  }
  /* Hide complex desktop visual */
  .hero-visual { display: none; }

  /* Reality */
  .reality-layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .reality-big-quote { font-size: var(--text-2xl); }

  /* Flow */
  .prep-flow { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .prep-flow::before { display: none; }
  .flow-insight { grid-template-columns: 1fr; }

  /* Cost */
  .cost-header-2col { grid-template-columns: 1fr; gap: var(--sp-3); }
  .cost-cards { grid-template-columns: repeat(6, 1fr); }
  .cost-card:nth-child(n) { grid-column: span 3; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Comparison */
  .comparison-wrap { grid-template-columns: 1fr; }

  /* Diff */
  .diff-bento { grid-template-columns: repeat(2, 1fr); }


  /* Audience */
  .audience-wrap { grid-template-columns: 1fr; gap: var(--sp-8); }
  .aud-blocks-grid { grid-template-columns: repeat(2, 1fr); }


  /* Timeline */
  .process-timeline {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--sp-6);
  }
  .process-timeline::before { display: none; }

  /* About */
  .about-layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .about-photo-box { max-width: 380px; margin-inline: auto; }
  .about-chip { right: 20px; }

  /* FAQ */
  .faq-wrap { grid-template-columns: 1fr; gap: var(--sp-6); }
  .faq-left { position: static; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

  /* TCU */
  .tcu-header-row { flex-direction: column; gap: var(--sp-4); }
  .tcu-header-quote { padding-left: 0; border-left: none; padding-top: var(--sp-4); border-top: 1px solid rgba(250,250,248,0.1); align-self: auto; }
}

/* ---- 768px ---- */
@media (max-width: 768px) {
  .hero-visual { height: auto; max-width: 100%; }
  .hero-bg-rect { height: 300px; }
  .hero-diagram--tl { display: none; }

  .tcu-bento { grid-template-columns: 1fr; }
  .tcu-number { font-size: clamp(4rem, 14vw, 7rem); }

  .services-grid { grid-template-columns: 1fr; }
  .diff-bento    { grid-template-columns: 1fr; }

  .process-timeline { grid-template-columns: 1fr 1fr; }

  .cost-cards { grid-template-columns: 1fr; }
  .cost-card:nth-child(n) { grid-column: span 1; }

  .testimonials-grid { max-width: none; }
}

/* ---- 560px ---- */
@media (max-width: 560px) {
  .hero-grid { text-align: left; }
  .hero-actions { justify-content: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-lead { margin-inline: 0; }
  .hero-visual { max-width: 100%; }
  .hero-bg-rect { height: 260px; }

  .process-timeline { grid-template-columns: 1fr; }

  .cta-title { font-size: var(--text-3xl); }

  .footer-inner { flex-direction: column; gap: var(--sp-2); text-align: center; }

  .navbar-nav { width: 100%; }
}
}

/* ---- Nav open body overlay ---- */
body.nav-open { overflow: hidden; }
body.nav-open::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: calc(var(--z-modal) - 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}