/* ============================================================================
   OCACENTRO — responsive.css
   Media queries móviles primero por punto de quiebre.
   Breakpoints cubiertos: 320 / 375 / 425 / 768 / 1024 / 1440 / 4K.
   ========================================================================== */

/* ===================== ≤ 1024px — Tablet horizontal / laptop pequeña ===== */
@media (max-width: 1024px) {
  .contact { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide { grid-column: span 2; }
}

/* ===================== ≤ 900px — Navbar colapsa a menú móvil ============= */
@media (max-width: 900px) {
  .nav__cta { display: none; }
  .nav__toggle { display: flex; position: relative; z-index: 1001; }

  /* Fondo oscuro detrás del panel para separarlo del contenido de la página */
  .nav__scrim {
    display: block; position: fixed; inset: 0; background: rgba(10,17,31,.55);
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
    z-index: 998;
  }
  .nav__scrim.is-open { opacity: 1; visibility: visible; }

  /* Menú móvil: panel deslizante desde la derecha, sólido para que no se transparente el fondo */
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: .3rem; padding: calc(var(--nav-h) + 1rem) 1.6rem 2rem; overflow-y: auto;
    background: #fff; box-shadow: -20px 0 60px rgba(10,37,64,.25);
    transform: translateX(100%); transition: transform .35s var(--ease); z-index: 999;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a { width: 100%; padding: .95rem .2rem; font-size: 1.05rem; color: var(--c-navy) !important; border-bottom: 1px solid var(--c-line); }
  .nav__links a::after { display: none; }

  /* El botón hamburguesa/X siempre debe verse oscuro cuando el menú está abierto,
     sin importar si el nav está transparente sobre el hero */
  .nav__toggle[aria-expanded="true"] span { background: var(--c-navy) !important; }

  body.menu-open { overflow: hidden; }

  /* Bloque de contacto (tarjeta + formulario + mapa) visible solo en móvil, al final del inicio */
  .mobile-only-contact { display: block; }

  /* En el inicio, solo en móvil: se quita Cobertura (el mapa queda duplicado con el
     bloque de contacto de arriba) y la franja CTA de WhatsApp (ya está el formulario) */
  body[data-page="inicio"] #cobertura,
  body[data-page="inicio"] .cta-band { display: none; }
}

/* ===================== ≤ 768px — Tablet vertical ======================== */
@media (max-width: 768px) {
  :root { --space-section: clamp(3.5rem, 10vw, 5rem); }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__img { aspect-ratio: 4/5; }

  .floating-card--tl { left: 4%; top: 4%; }
  .floating-card--br { right: 4%; bottom: 4%; }

  .form__row { grid-template-columns: 1fr; gap: 0; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom-inner { justify-content: center; text-align: center; }
}

/* ===================== ≤ 560px — Móvil grande ========================== */
@media (max-width: 560px) {
  .hero { min-height: 78svh; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__badges { gap: 1rem 1.6rem; }

  .grid-cards { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__item, .gallery__item--wide { grid-column: auto; aspect-ratio: 16/10; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__col { padding-top: .4rem; }

  .floating-actions { right: 1rem; bottom: 1rem; }
  .fab { width: 52px; height: 52px; }
}

/* ===================== ≤ 425px — Móvil estándar ======================== */
@media (max-width: 425px) {
  .brand__text { font-size: .74rem; }
  .brand__text strong { font-size: .9rem; }
  .card { padding: 1.6rem 1.4rem; }
  .stat__num { font-size: 2.6rem; }
}

/* ===================== ≤ 375px — iPhone SE / mini ====================== */
@media (max-width: 375px) {
  :root { --nav-h: 66px; }
  .btn--xl { padding: 1rem 1.4rem; font-size: 1rem; }
  .section__title { font-size: clamp(1.6rem, 8vw, 2rem); }
}

/* ===================== ≤ 320px — Mínimo soportado ===================== */
@media (max-width: 320px) {
  .container { padding-inline: 1rem; }
  .brand__mark { width: 34px; height: 34px; }
  .hero__badge-num { font-size: 1.3rem; }
}

/* ===================== ≥ 1440px — Monitores grandes =================== */
@media (min-width: 1440px) {
  :root { --maxw: 1320px; }
  .section__lead { font-size: 1.24rem; }
}

/* ===================== ≥ 2000px — 4K / pantallas ultra ================ */
@media (min-width: 2000px) {
  :root { --maxw: 1560px; }
  html { font-size: 18px; }
  .hero__inner { max-width: 1040px; }
}

/* ===================== Orientación horizontal en móviles ============== */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 2rem) 3rem; }
}

/* ===================== Modo oscuro del sistema (respeto sutil) ========
   No forzamos dark mode completo (la marca es clara), pero ajustamos el
   color de la barra del navegador y evitamos blancos puros deslumbrantes
   en la carga inicial. Mantener identidad clara. ====================== */
@media (prefers-color-scheme: dark) {
  /* Se conserva el diseño claro por decisión de marca (confianza/limpieza). */
  /* Punto de extensión disponible si en el futuro se desea un tema oscuro. */
}