/**
 * ========================================================================
 * 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 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mw-color-text);
    padding-bottom: 50px;
}
.modulo-general > .grid-container {
    width: 100%;
}
.modulo-info {
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    color: var(--mw-color-text);
    /* sin background-color — hereda el gradiente del body */
}

.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: fixed;
    top: var(--header-sticky-top, 0px);
    left: 0;
    right: 0;
    z-index: 900;
    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
   ============================================================ */

.cover-section,
.cover-section-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.cover {
    display: grid;
    position: relative;
    width: 100%;
    align-items: center;
    align-content: center;
    /* ← FIX: centrado vertical real */
    min-height: 100vh;
}

/* Neutralizar grid-container de Foundation cuando se aplica al cover.
      Sin esto, el cover queda limitado a 1200px y empuja 30px al siguiente
      elemento por su margin-bottom. */
.cover.grid-container {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-left: 5%;      /* ← NUEVO */
    padding-right: 5%;     /* ← NUEVO */
}

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

.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;
    align-content: center;
}

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

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

/* Mobile: 100dvh evita que la barra del navegador móvil
   (Safari iOS / Chrome Android) corte el hero. */
@media (max-width: 767px) {

    .cover.cover-height-auto,
    .cover.cover-height-full {
        min-height: 100dvh;
    }
}

/* === 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;
}

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

.cover .cover-subtitulo,
.cover .texto-modulo.cover-subtitulo {
    color: var(--mw-color-cover-title, var(--mw-color-text)) !important;
    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.
   ============================================================ */

/* Títulos SOLO cuando hay fondo subido (imagen/video) */
.has-bg-custom .subtitulo h2 {
    color: var(--mw-color-title-on-media, #F7F6F1) !important;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.75);
}

/* Sin fondo subido: el título hereda del template */
.parallax .subtitulo h2,
.modulo-general .subtitulo h2,
.modulo-info .subtitulo h2,
.module-has-overlay .subtitulo h2 {
    text-shadow: none;
}

/* ============================================================
      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-auto .module-has-overlay .subtitulo h2,
.titulos-align-center .parallax .subtitulo h2,
.titulos-align-center .modulo-general .subtitulo h2,
.titulos-align-center .modulo-info .subtitulo h2,
.titulos-align-center .module-has-overlay .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,
.titulos-align-left .module-has-overlay .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,
.titulos-align-right .module-has-overlay .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-left .module-has-overlay .subtitulo,
.titulos-align-right .parallax .subtitulo,
.titulos-align-right .modulo-general .subtitulo,
.titulos-align-right .modulo-info .subtitulo,
.titulos-align-right .module-has-overlay .subtitulo {
    padding-left: 5%;
    padding-right: 5%;
}