/* ═══════════════════════════════════════════════════════════════════════════
   Vitalia Medical Center — Responsive Stylesheet
   Tablet ≤ 1024px | Mobile ≤ 768px | Small ≤ 480px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --text-4xl: 2.5rem;
    --text-3xl: 2rem;
  }

  /* Header */
  .menu-toggle   { display: flex; }
  .header__actions .btn--outline { display: none; }

  .main-nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: white;
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-md);
    padding: var(--sp-4) var(--pad-x) var(--sp-6);
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow);
  }

  .main-nav.nav--open { max-height: 360px; }

  .main-nav a {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--text-base);
  }

  .main-nav a:last-child { border-bottom: none; }
  .main-nav a::after { display: none; }

  /* Hero */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__subtitle { margin-inline: auto; }
  .hero__actions  { justify-content: center; }
  .hero__trust    { justify-content: center; }
  .hero__rings    { display: none; }

  .hero__card-group { display: none; }

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

  /* Trust */
  .trust-inner { grid-template-columns: 1fr; gap: var(--sp-10); }

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

  /* Process */
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
  .process-grid::before { display: none; }

  .process-step {
    display: flex;
    align-items: flex-start;
    text-align: left;
    gap: var(--sp-4);
  }

  .process-step__num { margin: 0; flex-shrink: 0; }
  .process-step__body { flex: 1; }

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

  /* Location */
  .location-inner { grid-template-columns: 1fr; }
  .map-placeholder { height: 240px; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }

  /* Stats */
  .stats-inner { gap: var(--sp-10); }
}

/* ── Mobile (≤ 768px) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-4xl:  2rem;
    --text-3xl:  1.75rem;
    --text-2xl:  1.5rem;
    --pad-x:     1rem;
  }

  /* Hero */
  #hero { padding: var(--sp-16) 0 var(--sp-12); }

  .hero__trust {
    flex-wrap: wrap;
    gap: var(--sp-5);
  }

  .hero__badge { font-size: 0.65rem; }

  /* Stats */
  .stats-inner { gap: var(--sp-8); }

  /* Treatments */
  #tratamientos { padding: var(--sp-16) 0; }
  .treatments-grid { grid-template-columns: 1fr; gap: var(--sp-4); }

  /* Confianza */
  #confianza { padding: var(--sp-16) 0; }

  /* Whom */
  #para-quien { padding: var(--sp-16) 0; }
  .whom-grid  { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* Process */
  #proceso { padding: var(--sp-16) 0; }
  .process-grid { grid-template-columns: 1fr; gap: var(--sp-5); }

  /* Team */
  #equipo { padding: var(--sp-16) 0; }
  .team-grid { grid-template-columns: 1fr; gap: var(--sp-5); }

  /* Location */
  #ubicacion { padding: var(--sp-16) 0; }

  /* FAQ */
  #preguntas { padding: var(--sp-16) 0; }

  /* CTA */
  #cta { padding: var(--sp-16) 0; }

  .cta__actions {
    flex-direction: column;
    align-items: center;
  }

  .cta__actions .btn {
    width: 100%;
    max-width: 320px;
  }

  /* Footer */
  #site-footer { padding: var(--sp-12) 0 var(--sp-6); }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Section header spacing */
  .section-header { margin-bottom: var(--sp-8); }

  /* FAB */
  .whatsapp-fab {
    bottom: var(--sp-4);
    right: var(--sp-4);
    width: 52px;
    height: 52px;
  }
}

/* ── Small Mobile (≤ 480px) ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
  }

  /* Hero actions stacked */
  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 300px;
  }

  /* Stats horizontal scroll */
  .stats-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--sp-2);
    scrollbar-width: none;
    gap: var(--sp-8);
    padding-inline: var(--pad-x);
  }
  .stats-inner::-webkit-scrollbar { display: none; }
  .stat-item { flex-shrink: 0; }

  /* Treatments full width */
  .treatment-card { padding: var(--sp-5); }

  /* Process steps */
  .process-step { gap: var(--sp-3); }
  .process-step__num { width: 44px; height: 44px; font-size: var(--text-lg); }

  /* FAQ */
  .faq-question { padding: var(--sp-4) var(--sp-4); font-size: var(--text-sm); }
  .faq-answer-inner { padding: 0 var(--sp-4) var(--sp-4); }

  /* Location item */
  .location-item { gap: var(--sp-3); }
}