/*---------------------------------------
  HERO
  Cabecera de página compartida por casi todas
  las vistas (imagen o video de fondo + título).
-----------------------------------------*/
.hero-section {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    height: 70vh;
}

.hero-section small {
    color: var(--white-color);
    text-transform: uppercase;
}

.hero-section .section-overlay {
    z-index: 2;
}

.hero-section .container {
    position: relative;
    z-index: 2;
    height: 100%;
    padding-bottom: 50px;
}

.hero-section .container .row {
    height: 100%;
}

/* Segunda cabecera dentro de una misma página (p.ej. "Lo que incluye" en tours).
   display:block (antes inline-block, que deja un hueco fantasma de unos
   px debajo por su alineación de línea base, visible como franja blanca
   entre esta sección y la siguiente). */
.hero-section_2 {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    width: 100%;
    display: block;
}

.hero-section_2 .section-overlay {
    z-index: 2;
}

.hero-section_2 .container {
    position: relative;
    z-index: 2;
    height: 100%;
    padding-bottom: 50px;
}

.hero-section_2 .container .row {
    height: 100%;
}

.hero-title {
    font-size: var(--h1-font-size);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    font-weight: var(--font-weight-light);
}

/* Título de hero más grande, usado en playas y contacto */
.hero-title-lg {
    font-size: 74px;
}

/* "Lo que incluye" (4 columnas de ícono + texto): al apilarse en móvil
   necesitan separación vertical propia, ya que Bootstrap no agrega
   espacio entre columnas de ancho completo por sí solo. */
@media (max-width: 991px) {
    .hero-section_2 .row .col-lg-3 {
        margin-bottom: 2.5rem;
    }

    .hero-section_2 .row .col-lg-3:last-child {
        margin-bottom: 0;
    }
}