/* ═══════════════════════════════════════════
   mobile-fixes.css — Correcciones móvil
   Escuela México Valdivia
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Barra superior: ocultar redes sociales, mostrar solo teléfono ── */
  .topbar-social { display: none !important; }
  .topbar { justify-content: center !important; padding: 6px 16px !important; }

  /* ── Esencia: título no se corta ── */
  .esencia-titulo {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    padding-right: 16px !important;
  }

  /* ── Sección esencia: padding lateral ── */
  .esencia .sec-inner,
  .esencia { padding-left: 20px !important; padding-right: 20px !important; }

  /* ── Contacto: email no se corta ── */
  #ubicacion a[href^="mailto"] {
    word-break: break-all !important;
    font-size: .68rem !important;
  }
  #ubicacion .ac-info {
    font-size: .72rem !important;
    word-break: break-word !important;
  }

  /* ── KPIs del sobre: 3 columnas que caben ── */
  .sobre-kpis, .esencia-kpis {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .sobre-kpi, .esencia-kpi {
    padding: 12px 6px !important;
    min-width: 0 !important;
  }
  .sobre-kpi .kpi-n, .esencia-kpi .kpi-n {
    font-size: 1.4rem !important;
  }
  .sobre-kpi .kpi-l, .esencia-kpi .kpi-l {
    font-size: .62rem !important;
  }

  /* ── Hero: botones apilados ── */
  .hero-btns {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .hbtn {
    width: 100% !important;
    text-align: center !important;
    padding: 12px 16px !important;
  }

  /* ── Hero KPIs: 3 columnas compactas ── */
  .hero-kpis {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .hkpi { padding: 10px 6px !important; }
  .hkpi-n { font-size: 1.3rem !important; }
  .hkpi-l { font-size: .6rem !important; }

  /* ── Formulario contacto: columnas en mobile ── */
  #contacto-form > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Noticias: cards full width ── */
  .noticias-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Beneficios: 2 columnas en móvil ── */
  .benef-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .benef-card { padding: 16px 10px !important; }
  .benef-card h3 { font-size: .85rem !important; }

  /* ── Galería: 2 columnas ── */
  .galeria-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* ── Secciones: padding lateral ── */
  .sec { padding: 48px 16px !important; }
  .sec-titulo { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }

  /* ── Sobre: layout vertical ── */
  .sobre-inner, .sobre-content {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* ── Ubicación: mapa full width ── */
  .ub-map { height: 220px !important; }
  .ub-inner { flex-direction: column !important; gap: 24px !important; }

  /* ── Footer: texto centrado ── */
  footer, .footer { text-align: center !important; }
  .footer-cols { flex-direction: column !important; gap: 16px !important; }

  /* ── Scroll arrow hero ── */
  .hero-scroll { display: none !important; }

  /* ── Accesibilidad botón: no choque con idioma ── */
  #acc-btn { bottom: 80px !important; right: 16px !important; }
}

@media (max-width: 480px) {

  /* ── Barra superior muy chica: solo teléfono ── */
  .topbar span:not(:first-child) { display: none !important; }

  /* ── Esencia título más pequeño ── */
  .esencia-titulo { font-size: clamp(1.3rem, 6vw, 1.8rem) !important; }

  /* ── Beneficios: 1 columna en pantallas muy chicas ── */
  .benef-grid { grid-template-columns: 1fr !important; }

  /* ── Contacto info: columna ── */
  .ac-row { flex-direction: column !important; gap: 8px !important; }
}

/* ── Botón accesibilidad: no tapar formulario ── */
@media (max-width: 768px) {
  #acc-btn {
    bottom: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
  }
}