/* ===========================================================
   EL PATIO DE LGM — RESPONSIVE.CSS
   Mobile first. Los estilos base (en style.css) están pensados
   para celular. Aquí se amplía la experiencia progresivamente.
=========================================================== */

/* ---- Menú móvil (hasta 860px) ---- */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    background: var(--color-cream);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease), visibility var(--dur-med);
    z-index: 105;
  }

  .nav-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-menu .nav-link {
    color: var(--color-black) !important;
    font-size: 1.1rem;
  }

  .nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-toggle.is-open span { background: var(--color-black); }
}

/* ---- Tablet (≥ 640px) ---- */
@media (min-width: 640px) {
  .bio-grid {
    grid-template-columns: 1fr 1.4fr;
    align-items: start;
  }
  .historia-grid,
  .contacto-grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid { columns: 2; }
}

/* ---- Escritorio pequeño (≥ 900px) ---- */
@media (min-width: 900px) {
  :root { --header-h: 84px; }

  .historia-grid,
  .contacto-grid {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
    gap: var(--space-xl);
  }

  .gallery-grid { columns: 3; }

  .lightbox-prev { left: 2rem; }
  .lightbox-next { right: 2rem; }
}

/* ---- Escritorio grande (≥ 1200px) ---- */
@media (min-width: 1200px) {
  .section { padding-block: var(--space-2xl); }
  .bio-grid { gap: var(--space-2xl); }
  .gallery-grid { columns: 3; }
}

/* ---- Pantallas muy grandes (≥ 1600px) ---- */
@media (min-width: 1600px) {
  :root { --container-w: 1320px; }
}

/* ---- Altura reducida (celulares en horizontal) ---- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { height: 100vh; min-height: 420px; }
  .hero-content { padding-bottom: var(--space-md); }
}