/* ============================
   RESPONSIVE GENERAL (MÓVIL)
   ============================ */
@media (max-width: 900px) {

  /* --- TARJETAS WHITE-INNER --- */

  /* Todas las tarjetas pasan a columna */
  .white-inner,
  .white-inner.reverse {
    display: flex !important;
    flex-direction: column !important;
    text-align: center;
  }

  /* Imagen ARRIBA en la tarjeta invertida */
  .white-inner.reverse .big-image {
    order: -1 !important;
  }

  /* Texto debajo */
  .white-inner.reverse .white-text {
    order: 0 !important;
  }

  /* Ajuste de padding interno */
  .white-inner .white-text {
    padding: 0 !important;
    gap: 12px !important;
  }

  .white-inner .white-text h2 {
    margin-bottom: 8px !important;
  }

  .white-inner .white-text p {
    margin-bottom: 10px !important;
  }

  .white-inner .buttons-row {
    margin-top: 8px !important;
  }


  /* ============================
     SECCIÓN CONÓCENOS
     ============================ */

  .team-widget {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 10px !important;
    text-align: center;
  }

  .team-text {
    padding: 0 !important;
    align-items: center !important;
  }

  .team-text h2 {
    margin-bottom: 8px !important;
  }

  .team-text p {
    margin-bottom: 10px !important;
  }

  .team-text button {
    margin-top: 8px !important;
  }

  /* ============================
     INMERSIONES
     ============================ */



  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 0 10px;
  }

  .gallery-item {
    text-align: center !important;
  }

  .gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .gallery-item h3 {
    margin-bottom: 10px !important;
  }

  .gallery-item p {
    margin-bottom: 12px !important;
    line-height: 1.5;
  }

  .gallery-item .cta-small {
    margin-top: 10px !important;
  }

  
/* ============================
   DIVE SECTION RESPONSIVE
   ============================ */


  /* Hace que dive-text "desaparezca" como contenedor */
  .dive-text {
    display: contents !important;
  }

  /* Orden correcto */
  .dive-item h2 {
    order: -3 !important; /* Título primero */
    width: 100%;
    text-align: center !important;
  }

  .dive-item .dive-image {
    order: -2 !important; /* Foto después del título */
  }

  /* Los párrafos quedan al final */
  .dive-item p {
    order: -1 !important;
    margin-bottom: 12px !important;
    line-height: 1.5;
    text-align: center !important;
  }

  /* Ajustes visuales */
  .dive-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .dive-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
  }


/* ============================
   Margen de botones en CURSOS
   ============================ */

  .course-card { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 15px !important; /* ESTE ES EL QUE FUNCIONA SIEMPRE */ }
  }

  /* Centrar la imagen redondeada en las tarjetas de cursos */
  .course-card .course-img {
    display: block !important;
    margin: 0 auto !important;
  }

  /* Asegurar que el contenedor no la empuja */
  .course-card {
    text-align: center !important;
    align-items: center !important;
  }

  /* ============================
   SOBRE NOSOTROS — RESPONSIVE
   ============================ */


  /* Todas las secciones internas en columna */
  .mission-inner,
  .instructors-inner,
  .equipment-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
  }

  /* Hacer que el contenedor de texto desaparezca como bloque */
  .mission-text,
  .instructors-text,
  .equipment-text {
    display: contents !important;
  }

  /* ORDEN: TÍTULO → FOTO → TEXTO */

  /* Título siempre primero */
  .mission-text h2,
  .instructors-text h2,
  .equipment-text h2 {
    order: -3 !important;
    width: 100%;
    text-align: center !important;
  }

  /* Imagen siempre después del título */
  .mission-image,
  .instructors-image,
  .equipment-image {
    order: -2 !important;
  }

  /* Párrafos siempre al final */
  .mission-text p,
  .instructors-text p,
  .equipment-text p {
    order: -1 !important;
    margin-bottom: 12px !important;
    line-height: 1.5;
    text-align: center !important;
  }

  /* Ajustes visuales de imágenes */
  .mission-image img,
  .instructors-image img,
  .equipment-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
  }






@media (max-width: 768px) {

  /* Footer en columna */
  .footer-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important; /* separación limpia entre bloques */
  }

  /* Cada columna ocupa todo el ancho pero centrada */
  .footer-col {
    width: 100%;
    max-width: 300px;
  }

  /* Logo PADI centrado y con tamaño correcto */
  .padi-logo {
    height: 60px !important;
    margin: 0 auto 10px !important;
    display: block;
  }

  /* Texto del resort */
  .footer-col h4 {
    margin-bottom: 6px !important;
    font-size: 1.2rem;
  }

  /* Contacto */
  .footer-col p {
    margin-bottom: 4px !important;
    font-size: 0.95rem;
  }
  /* Centrar el botón en hotel.html */
#habitaciones .buttons-row {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
}

}