/* =========================================
   responsive.css  —  overrides para pantallas pequeñas
   Cárgalo con:
   <link rel="stylesheet" href="responsive.css" media="(max-width: 1024px)">
   ========================================= */

/* ====== Tablet (≤1024px) ====== */
@media (max-width: 1024px) {
  /* Contenedor de páginas secundarias un poco más respirado */
  body.secundaria .contenido {
    padding: 24px;
  }

  /* Servicios: separación cómoda en 2 columnas */
  .servicios { gap: 16px; }
  .servicio  { width: 280px; }
}

/* ====== Móvil (≤768px) ====== */
@media (max-width: 768px) {
  /* Evita parpadeos del fondo fijo y que se recorte raro */
  body { background-attachment: scroll; background-size: 120%; }

  /* Header secundario apilado y táctil */
  body.secundaria header {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 14px 16px;
  }
  body.secundaria nav a {
    display: inline-block;
    padding: 8px 10px;          /* mejor zona táctil */
    margin-left: 10px;
  }

  /* Contenido principal más compacto */
  body.secundaria .contenido {
    margin: 24px auto;
    padding: 18px;
    border-radius: 12px;
  }
  body.secundaria .contenido h2 { font-size: 1.6rem; }
  body.secundaria .contenido h3 { font-size: 1.05rem; }

  /* Hero más bajo */
  .hero { padding: 36px 14px 12px; }

  /* ====== IMÁGENES ====== */
  /* Galería: 1 columna y SIN recortes */
  body.secundaria .galeria {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  body.secundaria .galeria img {
    width: 100%;
    height: auto !important;         /* quita altura fija (evita corte) */
    object-fit: contain !important;   /* mantiene proporción */
  }

  /* Equipo: foto centrada y sin recorte */
  body.secundaria .equipo-grid {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }
  body.secundaria .equipo .miembro img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Foto de la página de láser: sin altura fija */
  body.secundaria .foto_laser {
    width: 100% !important;
    height: auto !important;
    max-height: 80vh;                 /* opcional: no más alta que la pantalla */
    object-fit: contain !important;
  }

  /* Servicios: tarjetas a una columna */
  .servicios { justify-content: center; }
  .servicio  { width: 100%; max-width: 420px; }

  /* ====== CONTACTO ====== */
  /* Título arriba y grid debajo, en 1 columna */
  body.secundaria .contenido.contacto > h2 {
    display: block;
    text-align: center;
    margin: 0 0 18px 0;
    clear: both;
  }
  body.secundaria .contenido.contacto > .contacto-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
    margin: 0 auto;
    clear: both;
  }
  body.secundaria .contacto-card {
    grid-template-columns: 40px 1fr;
    padding: 14px;
  }
  body.secundaria .contacto-card .icon { font-size: 24px; }
  body.secundaria .cta-cita, .btn-enviar { width: 100%; text-align: center; }

  /* Mapa más bajo en móvil */
  body.secundaria .mapa-wrap iframe { height: 260px; }
}

/* ====== Móvil pequeño (≤480px) ====== */
@media (max-width: 480px) {
  .sacramento-titulo { font-size: 40px; }
  header .logo       { font-size: 24px; }
  .boton             { padding: 10px 14px; }

  body.secundaria .contenido      { padding: 16px; }
  body.secundaria .contenido p    { font-size: 0.97rem; }

  /* Galería aún más compacta si hace falta */
  body.secundaria .galeria img    { max-height: 70vh; }
}

/* ===== Accesibilidad: menos movimiento si el usuario lo pide ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}