/**
 * ========================================================================
 * ARCHIVO: layout.css
 * PROYECTO: MOTELWEB.VIP
 * VERSIÓN: 1.1.0 (limpieza de reglas duplicadas)
 * FECHA DE PRODUCCIÓN: 2026-09-16
 * DESCRIPCIÓN: Estructura base de módulos y contenedores.
 * ========================================================================
 */

.modulo-general {
    background-color: #fff;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding-bottom: 50px;
}

.modulo-info {
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    color: white;
    background-color: var(--mw-color-bg);
}

.parallax {
    background-image: var(--parallax-image);
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-content {
    min-height: 100vh;
    display: grid;
    align-items: center;
    position: relative;
    color: #fff;
    text-align: center;
}

.align-middle {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.align-self-middle {
    -ms-flex-item-align: center;
    align-self: center;
}

.contenedor-header-pegajoso {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

.container-btn-derecha {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 1000;
}

.modulo-general,
.modulo-info,
.parallax,
.hero-content,
.cover,
.contenedorVideoFondo {
    position: relative;
}

@media (max-width: 768px) {
    .container-btn-derecha {
        right: 5px;
        top: 10px;
    }
}

/* ============================================================
   PORTADA (HERO) — Layout configurable
   ============================================================ */

/* Wrapper del cover (el div que envuelve al módulo en index.php) */
.cover-section {
    position: relative;
    display: block;
    width: 100%;
}

/* El cover ocupa el ancho completo y su altura depende de la opción.
   IMPORTANTE: usamos min-height, NUNCA height, para que las opciones
   de altura pequeña/mediana/completa funcionen correctamente. */
.cover {
    display: grid;
    position: relative;
    width: 100%;
    align-items: center;
    min-height: calc(100vh - 100px);
}

/* === ALTURA === */
.cover.cover-height-auto,
.cover.cover-height-full {
    min-height: calc(100vh - 100px);
}

.cover.cover-height-medium {
    min-height: 75vh;
}

.cover.cover-height-small {
    min-height: 50vh;
}

/* === POSICIÓN VERTICAL === */
.cover.vertical-auto,
.cover.vertical-center {
    align-items: center;
}

.cover.vertical-top {
    align-items: flex-start;
    padding-top: 100px;
}

.cover.vertical-bottom {
    align-items: flex-end;
    padding-bottom: 100px;
}

/* === ALINEACIÓN HORIZONTAL DEL TEXTO === */
.cover.align-auto h1,
.cover.align-auto .texto-modulo,
.cover.align-center h1,
.cover.align-center .texto-modulo {
    text-align: center;
}

.cover.align-left h1,
.cover.align-left .texto-modulo {
    text-align: left;
}

.cover.align-right h1,
.cover.align-right .texto-modulo {
    text-align: right;
}

/* === RESERVA EXPRESS: alineación === */
.cover .nxs-reserva-contenedor {
    max-width: 650px;
}

.cover.reserva-align-auto .nxs-reserva-contenedor,
.cover.reserva-align-center .nxs-reserva-contenedor {
    margin-left: auto;
    margin-right: auto;
}

.cover.reserva-align-left .nxs-reserva-contenedor {
    margin-left: 0;
    margin-right: auto;
}

.cover.reserva-align-right .nxs-reserva-contenedor {
    margin-left: auto;
    margin-right: 0;
}

/* === RESERVA EXPRESS: ocultar === */
.cover.reserva-hidden .nxs-reserva-contenedor {
    display: none !important;
}

/* === ESTILOS BASE DEL HERO === */
.cover-titulo {
    font-family: var(--mw-font-primary);
    font-weight: var(--mw-font-weight-bold);
    color: var(--mw-color-text);
    text-shadow: 2px 2px 4px #000000;
}

.cover-subtitulo {
    color: var(--mw-color-text);
    text-shadow: 1px 1px 3px #000000;
}

/* ============================================================
   SISTEMA GENÉRICO DE OVERLAYS PARA MÓDULOS
   ============================================================ */

.module-has-overlay {
    position: relative;
    overflow: hidden;
}

/* El overlay del sistema: capa intermedia entre fondo y contenido */
.module-has-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transition: background 0.3s ease;
}

/* Fondos internos (video/imagen) van por debajo del overlay */
.module-has-overlay>.video-fondo-celebraciones,
.module-has-overlay>.imagen-fondo-celebraciones,
.module-has-overlay>.contenedorVideoFondo {
    z-index: 1;
}

/* Contenido va por encima del overlay */
.module-has-overlay>.grid-container,
.module-has-overlay>.row {
    position: relative;
    z-index: 3;
}

/* === Variantes === */
.module-overlay-auto::before,
.module-overlay-none::before {
    background: transparent;
}

.module-overlay-white-10::before {
    background: rgba(255, 255, 255, 0.10);
}

.module-overlay-white-25::before {
    background: rgba(255, 255, 255, 0.25);
}

.module-overlay-white-50::before {
    background: rgba(255, 255, 255, 0.50);
}

.module-overlay-white-75::before {
    background: rgba(255, 255, 255, 0.75);
}

.module-overlay-black-10::before {
    background: rgba(0, 0, 0, 0.10);
}

.module-overlay-black-25::before {
    background: rgba(0, 0, 0, 0.25);
}

.module-overlay-black-50::before {
    background: rgba(0, 0, 0, 0.50);
}

.module-overlay-black-75::before {
    background: rgba(0, 0, 0, 0.75);
}

/* ============================================================
   TÍTULOS DE SECCIÓN SOBRE FONDOS CON IMAGEN/VIDEO
   Regla universal. Aplica a Servicios, Habitaciones,
   Celebraciones y Ubicación. Cada template puede sobrescribir.
   ============================================================ */

.parallax .subtitulo h2,
.modulo-general .subtitulo h2,
.modulo-info .subtitulo h2 {
    color: #F7F6F1 !important;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.75);
}

/* ============================================================
      ALINEACIÓN DE TÍTULOS DE SECCIÓN (configurable por el motel)
      La clase se aplica al <body> según config_json.layout.titulos_align
      ============================================================ */

.titulos-align-auto .parallax .subtitulo h2,
.titulos-align-auto .modulo-general .subtitulo h2,
.titulos-align-auto .modulo-info .subtitulo h2,
.titulos-align-center .parallax .subtitulo h2,
.titulos-align-center .modulo-general .subtitulo h2,
.titulos-align-center .modulo-info .subtitulo h2 {
    text-align: center;
}

.titulos-align-left .parallax .subtitulo h2,
.titulos-align-left .modulo-general .subtitulo h2,
.titulos-align-left .modulo-info .subtitulo h2 {
    text-align: left;
}

.titulos-align-right .parallax .subtitulo h2,
.titulos-align-right .modulo-general .subtitulo h2,
.titulos-align-right .modulo-info .subtitulo h2 {
    text-align: right;
}

/* === Cuando los títulos van alineados a un lado, el contenedor
      necesita adaptarse para que se vean bien. === */
.titulos-align-left .parallax .subtitulo,
.titulos-align-left .modulo-general .subtitulo,
.titulos-align-left .modulo-info .subtitulo,
.titulos-align-right .parallax .subtitulo,
.titulos-align-right .modulo-general .subtitulo,
.titulos-align-right .modulo-info .subtitulo {
    padding-left: 5%;
    padding-right: 5%;
}