/* ===========================
   LISTADO HOTELES (AISLADO)
   =========================== */

.pagina-listado-hoteles{
  max-width:1100px;
  margin:auto;
  padding:40px 20px;
  font-family:Arial, sans-serif;
  line-height:1.6;
  /* Neutraliza el text-align:center del .container global */
  text-align:left;
}

/* TITULOS */
.pagina-listado-hoteles h1{
  font-size:38px;
  margin:0 0 20px 0;
  line-height:1.3;
}
.pagina-listado-hoteles h2{
  font-size:26px;
  margin:0 0 10px 0;
  line-height:1.3;
  padding:0;
}

/* TEXTO (base) */
.pagina-listado-hoteles p{
  margin:0 0 10px 0;
  line-height:1.5;
  padding:0;
  color:#444;
}

/* TARJETA HOTEL (fila en desktop) */
.pagina-listado-hoteles .hotel-card{
  display:flex;
  /* separación solo horizontal en desktop */
  column-gap:25px;
  row-gap:0;

  border:1px solid #eee;
  border-radius:10px;
  padding:20px;
  margin-bottom:35px;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  align-items:stretch;
  transition:transform .3s, box-shadow .3s;
}
.pagina-listado-hoteles .hotel-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
}

/* IMAGEN (desktop: ancho fijo de 380px) */
.pagina-listado-hoteles .hotel-img{
  flex:0 0 380px;  /* en desktop controla el ancho de la columna */
  margin:0;
  padding:0;
  line-height:0;
  font-size:0;
}
.pagina-listado-hoteles .hotel-img img{
  width:380px;
  height:247px;
  object-fit:cover;
  border-radius:8px;
  display:block;
  margin:0;
}

/* INFO */
.pagina-listado-hoteles .hotel-info{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:247px; /* solo desktop */
  margin:0;
  padding:0;
}
.pagina-listado-hoteles .hotel-info > *{
  margin-top:0;
  padding-top:0;
}

/* BOTON */
.pagina-listado-hoteles .btn-book{
  display:inline-block;
  width:100%;
  text-align:center;
  margin-top:15px;
  background:#c43ca3;
  color:white;
  padding:12px 22px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:background .3s;
}
.pagina-listado-hoteles .btn-book:hover{
  background:#a82c8a;
}

/* FAQ (base) */
.pagina-listado-hoteles .faq{
  margin-top:50px;
  padding-top:30px;
  border-top:1px solid #eee;
}

/* ===========================
   TABLET / MÓVIL
   =========================== */
@media (max-width: 1024px){
  /* Columna sin hueco vertical por gap */
  .pagina-listado-hoteles .hotel-card{
    flex-direction:column;
    column-gap:0;
    row-gap:0;
    padding:16px;
  }

  /* Clave: anular el alto impuesto por el flex-basis de desktop */
  .pagina-listado-hoteles .hotel-img{
    /* Quita el 0 0 380px (en columna se convertía en altura) */
    flex: 0 0 auto;       /* o flex: unset; */
    flex-basis: auto;     /* asegura que la altura la marque el contenido */
    width: 100%;
    margin:0;
    padding:0;
    line-height:0;
    font-size:0;
    min-height: 0;        /* por si algún reset mete mínimos */
  }

  .pagina-listado-hoteles .hotel-img img{
    width:100%;
    height:auto;
    display:block;
    margin:0;
    /* opcional: si quieres mantener un ratio fijo, usa aspect-ratio */
    /* aspect-ratio: 16 / 10; object-fit: cover; */
  }

  .pagina-listado-hoteles .hotel-info{
    min-height:0;
    display:block;
    /* Única fuente de separación vertical entre imagen y texto */
    margin-top: 14px;   /* ajusta 12–18px a tu gusto */
    padding-top:0;
  }

  .pagina-listado-hoteles .hotel-info > *{ margin-top:0; }
  .pagina-listado-hoteles .hotel-info h2:first-child{ margin-top:0; }
}

/* Afinado opcional iPad ~820px si lo ves demasiado pegado/espaciado */
@media (min-width: 768px) and (max-width: 910px){
  .pagina-listado-hoteles .hotel-info{ margin-top: 16px; }
}

/* Afinado opcional móviles muy estrechos */
@media (max-width: 400px){
  .pagina-listado-hoteles .hotel-info{ margin-top: 12px; }
}

/* ===========================
   ESPACIO INTRO → PRIMERA FICHA
   =========================== */

/* Aumenta el margen superior SOLO de la primera tarjeta de hotel
   para separar más la introducción del listado */
.pagina-listado-hoteles .hotel-card:first-of-type{
  margin-top: clamp(20px, 3vw, 28px); /* ~20–28px según viewport */
}

/* Si prefieres controlar por el párrafo de introducción en lugar de la tarjeta,
   descomenta este bloque y comenta el de arriba:
.pagina-listado-hoteles h1 + p + p{
  margin-bottom: clamp(20px, 3vw, 28px);
}
*/

/* ===========================
   TÍTULO FAQ → LÍNEA SUPERIOR (BORDER)
   =========================== */

/* Estructura: <h2>Preguntas frecuentes…</h2> + <div class="faq">…</div> */

/* Reduce la separación encima de la línea: */
.pagina-listado-hoteles h2 + .faq{
  padding-top: 10px;           /* antes: 30px */
}

/* Reduce el margen inferior del h2 cuando justo después viene .faq (si el navegador soporta :has) */
.pagina-listado-hoteles h2:has(+ .faq){
  margin-bottom: 6px;          /* antes: 10px */
}

/* Fallback sin :has(): micro-ajuste para compensar */
.pagina-listado-hoteles h2 + .faq{
  margin-top: -4px;
}

/* Ajuste general del bloque FAQ (menos aire arriba) */
.pagina-listado-hoteles .faq{
  margin-top: 22px;            /* antes: 50px */
  border-top: 1px solid #eee;  /* lo mantenemos tal cual */
  /* padding-top ya lo controlamos con h2 + .faq */
}

/* ===========================
   PÁRRAFOS JUSTIFICADOS
   =========================== */

/* Justifica solo el texto (no afecta a h1/h2/h3 ni a botones) */
.pagina-listado-hoteles p,
.pagina-listado-hoteles li {
  text-align: justify;
  text-justify: inter-word; /* soporte en algunos navegadores */
  hyphens: auto;            /* cortes automáticos de palabras */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  widows: 2;                /* mejora legibilidad */
  orphans: 2;
}