/**
 * CRIBAL — Responsive / Media Queries
 */

/* ============================================================
   Tablet — hasta 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .nav-phone-text { display: none; }

  /* Hero: panel colapsa debajo del contenido */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
  }

  .hero-content { text-align: center; }
  .hero-actions  { justify-content: center; }
  .hero-panel    { max-width: 100%; }

  .hero-stats { gap: var(--sp-lg); }
}

/* ============================================================
   Tablet pequeña — hasta 768px
   ============================================================ */
@media (max-width: 768px) {

  /* Navbar móvil */
  .mobile-menu-toggle { display: flex; }

  .nav-menu {
    position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
    background: var(--bg-white); flex-direction: column; justify-content: flex-start;
    padding: var(--sp-xl); gap: 0; overflow-y: auto;
    transform: translateX(-100%); transition: transform var(--t-normal);
    z-index: 1050; box-shadow: var(--shadow-xl);
  }

  .nav-menu.open { transform: translateX(0); }

  .nav-menu li { width: 100%; }

  .nav-menu a {
    min-height: unset; padding: var(--sp-lg) var(--sp-md);
    border-bottom: 1px solid var(--gray-100); font-size: var(--fs-base);
    justify-content: flex-start;
  }

  .nav-menu a::after { display: none; }

  .nav-phone { display: none; }

  /* Hero */
  .hero { padding: var(--sp-3xl) 0; }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 3rem); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
  .hero-stat-number { font-size: var(--fs-3xl); }
  .hero-panel { max-width: 100%; }

  /* Secciones */
  .section { padding: var(--sp-3xl) 0; }

  /* Grids */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Trust bar */
  .trust-bar-inner { gap: var(--sp-lg); }
  .trust-divider   { display: none; }

  /* Page hero */
  .page-hero h1 { font-size: var(--fs-4xl); }

  /* Programas detalle */
  .programa-info-grid { grid-template-columns: 1fr; }

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

  /* CTA */
  .cta-actions { flex-direction: column; align-items: center; }
  .contact-quick-info { grid-template-columns: 1fr; }

  /* Footer */
  .footer-content { grid-template-columns: 1fr; }
  .footer-bottom-content { flex-direction: column; align-items: flex-start; gap: var(--sp-md); }

  /* WhatsApp flotante — solo icono en móvil */
  .whatsapp-float-text { display: none; }
  .whatsapp-float-link { padding: var(--sp-md); border-radius: 50%; max-width: unset; }
}

/* ============================================================
   Móvil pequeño — hasta 480px
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 var(--sp-md); }

  .hero { padding: var(--sp-2xl) 0; }
  .hero h1 { font-size: clamp(1.6rem, 7vw, 2.5rem); }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }

  .btn-lg { padding: 0.875rem 1.5rem; }

  .nav-cta-btn { display: none; }

  .section-header h2 { font-size: var(--fs-3xl); }

  /* Cards */
  .pcard-img { height: 130px; }
  .pcard-body { padding: var(--sp-lg); }
  .card-plain { padding: var(--sp-xl); }

  /* Programas */
  .programa-info-grid { gap: var(--sp-sm); }

  /* Formulario */
  .form-input, .form-select, .form-textarea { padding: 0.75rem var(--sp-md); }

  /* Footer */
  .footer-links { flex-direction: column; gap: var(--sp-sm); }
  .footer-links .separator { display: none; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .site-header,
  .whatsapp-float,
  .back-to-top,
  .page-loader,
  .flash-message,
  .cta-section { display: none !important; }

  body { background: white; color: #000; }
  a { color: #000; }
}