/* ==========================================================================
   1. BLOQUEO RAÍZ DE SEGURIDAD CONTRA EL HUECO LATERAL Y LIBERACIÓN DE ANCHO
   ========================================================================== */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* Anulamos los floats, anchos fijos y flex conflictivos del tema Vintage */
.site-main-full,
.bloque-planifica-viaje-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Forzamos al contenedor padre principal del tema a liberar el ancho */
.site-content,
#content,
.main-content-inner,
.container,
.wrapper,
.page-template-default .container,
.page .container,
#primary,
#main {
    overflow: visible !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   2. TRANSPARENCIA RADICAL DEL MENÚ SUPERIOR Y TOP BAR
   ========================================================================== */
header,
.site-header,
.header-v1,
.header-wrapper,
.navigation-bar,
.main-header,
#top-bar,
.top-bar,
.top-header,
.header-top,
#masthead,
.header-container {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* ==========================================================================
   3. HERO CONVENTION - DISEÑO PANTALLA COMPLETA (PROPIEDADES FUSIONADAS)
   ========================================================================== */
.hero-convention-section {
    position: relative !important;
    display: flex !important;
    align-items: center !important;

    /* Truco de pantalla completa sin descuadres */
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    transform: none !important;

    /* Fusión de márgenes: Absorbe la barra superior oscura */
    margin-top: -220px !important;
    padding-top: 260px !important;
    padding-bottom: 120px !important;
    min-height: 60vh !important;

    /* Propiedades del fondo */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
}

/* Capa oscura degradada */
.hero-convention-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background:
        /* Degradado horizontal: Oscuro izquierda (35%) -> Transparente centro -> Oscuro derecha (35%) */
        linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.35) 100%),
        /* Degradado vertical sutil: Un toque arriba para el menú y un toque abajo para separar contenido */
        linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.2) 100%) !important;
    z-index: 1 !important;
}

/* Contenedor del contenido limitado a 1200px (Alineado con el logo) */
.hero-convention-container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    /* Cambia de left a center */
}

.hero-convention-content {
    max-width: 850px !important;
    /* Lo hacemos un poco más ancho (de 680px a 850px) para que el título centrado respire mejor */
    margin: 0 auto !important;
    /* Truco clave: márgenes automáticos a los lados para centrar el bloque */
    text-align: center !important;
}

/* Tipografías y textos */
.hero-convention-section .hero-tag {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #e0e0e0 !important;
    margin-bottom: 25px !important;
}

.hero-convention-section .hero-title {
    font-family: 'Georgia', 'Playfair Display', serif !important;
    font-size: 58px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin: 0 0 25px 0 !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.hero-convention-section .hero-subtitle {
    font-size: 24px !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Aseguramos el centrado directo de los textos */
.hero-convention-section .hero-title,
.hero-convention-section .hero-subtitle {
    text-align: center !important;
}

/* Adaptación para pantallas de teléfonos */
@media (max-width: 768px) {
    .hero-convention-section {
        margin-top: -120px !important;
        /* Ajustado para móvil */
        padding-top: 160px !important;
        padding-bottom: 80px !important;
        min-height: 400px !important;
        width: 100vw !important;
        left: 50% !important;
        margin-left: -50vw !important;
    }

    .hero-convention-section .hero-title {
        font-size: 36px !important;
    }

    .hero-convention-section .hero-subtitle {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   SECCIÓN SUB CABECERA
   ========================================================================== */

/* Contenedor exterior: Forzamos a la fila a abrirse de lado a lado del monitor */
.row-caracteristicas-container {
    position: relative !important;

    /* TRUCO DE PANTALLA COMPLETA ABSOLUTA */
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    transform: none !important;

    /* APLICAMOS TU VARIABLE DE COLOR GLOBAL */
    background-color: var(--color-secundario-hex) !important;

    padding: 60px 0 !important;
    box-sizing: border-box !important;
}

/* Contenedor interior: Mantiene los textos centrados y alineados a 1200px */
.row-caracteristicas-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    gap: 40px !important;
}

/* Formato individual de cada columna */
.col-caracteristica {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Contenedor del Icono: Mantiene el espacio pero eliminamos el círculo */
.col-caracteristica .icon-wrapper {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 25px !important;
}

/* SOLUCIÓN AL TAPADO: Eliminamos por completo el círculo gris falso de fondo */
.col-caracteristica .icon-wrapper::before {
    display: none !important;
    content: none !important;
}

/* Escalado y visibilidad limpia de tus imágenes SVG */
.col-caracteristica .icon-wrapper .icono-bureau-svg {
    position: relative !important;
    z-index: 10 !important;
    width: 115px !important;
    /* Tamaño ampliado del SVG */
    height: 115px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Estilos de los bloques de texto */
.col-caracteristica .text-caracteristica {
    color: #FFFFFF !important;
    font-size: 18px !important;
    line-height: 1.6 !important;

    /* CAMBIO CLAVE: Cambiado de 400 a 500 con !important para forzar el cambio */
    font-weight: 600 !important;

    margin: 0 !important;
    max-width: 290px !important;
}

/* ==========================================================================
   RESPONSIVE: Adaptación para Tablets y Dispositivos Móviles
   ========================================================================== */
@media (max-width: 992px) {
    .row-caracteristicas-inner {
        padding: 0 20px !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .row-caracteristicas-container {
        /* Ajustamos el ancho completo también en pantallas móviles */
        width: 100vw !important;
        left: 50% !important;
        margin-left: -50vw !important;
    }

    .row-caracteristicas-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 50px !important;
    }
}

/* ==========================================================================
   ROW DESCRIPCION
   ========================================================================== */

/* Contenedor global con fondo blanco limpio */
.seccion-informacion-container {
    width: 100% !important;
    background-color: #FFFFFF !important;
    padding: 80px 0 !important;
    /* Espaciado vertical generoso */
    box-sizing: border-box !important;
}

/* Caja interna adaptada a la rejilla estándar de 1200px de tu web */
.seccion-informacion-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    gap: 80px !important;
    /* Separación exacta entre las dos columnas principales */
}

/* Formato base de las dos columnas */
.col-informacion {
    flex: 1 !important;
    /* Distribución del 50% exacto para cada lado */
    display: flex !important;
    flex-direction: column !important;
}

/* ==========================================================================
   TIPOGRAFÍAS, JERARQUÍAS Y MÁRGENES
   ========================================================================== */

/* Títulos principales negros de la sección */
.col-informacion .titulo-seccion {
    font-family: var(--font-family-normal) !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    margin: 0 0 25px 0 !important;
    letter-spacing: -0.5px !important;
}

/* Párrafos descriptivos gris corporativo */
.col-informacion .parrafo-seccion {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    font-weight: 400 !important;
    margin: 0 0 25px 0 !important;
}

/* ==========================================================================
   BLOQUE IZQUIERDO: LISTA CON ICONO PERSONALIZADO
   ========================================================================== */

.bloque-lista-check {
    margin-top: 35px !important;
}

.bloque-lista-check .subtitulo-lista {
    font-size: 24px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    margin: 0 0 25px 0 !important;
}

.lista-check-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.lista-check-items li {
    position: relative !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    color: #333333 !important;
    font-weight: 600 !important;
    padding-left: 30px !important;
    /* Espacio para el icono circular */
    margin-bottom: 12px !important;
}

/* Construcción nativa del icono azul con punto central blanco */
.lista-check-items li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    /* Lo nivela a la altura de la primera línea de texto */

    width: 14px !important;
    height: 14px !important;
    background-color: var(--color-secundario-hex) !important;
    /* Hereda el tono azul de la web */
    border-radius: 50% !important;
    box-sizing: border-box !important;

    /* Pequeño truco de borde doble para generar el punto blanco central */
    border: 3px solid var(--color-secundario-hex) !important;
    box-shadow: inset 0 0 0 2px #FFFFFF !important;
}

/* ==========================================================================
   BLOQUE DERECHO: TÍTULO GIGANTE INFERIOR
   ========================================================================== */

.bloque-texto-gigante {
    margin-top: auto !important;
    /* Empuja el bloque al fondo de la columna */
    padding-top: 60px !important;
}

/* El texto gigante azul/morado de la parte inferior derecha */
.texto-gigante-destacado {
    font-family: var(--font-family-rowdies) !important;
    /* Serif elegante idéntico al modelo */
    font-size: 52px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;

    /* Puedes usar var(--color-secundario-hex) o este tono directo de la captura */
    color: var(--color-secundario-hex) !important;

    margin: 0 !important;
    letter-spacing: -1px !important;
}

/* ==========================================================================
   RESPONSIVE: Control para Pantallas de Tablets y Teléfonos Móviles
   ========================================================================== */
@media (max-width: 992px) {
    .seccion-informacion-inner {
        gap: 40px !important;
        padding: 0 20px !important;
    }

    .texto-gigante-destacado {
        font-size: 42px !important;
    }
}

@media (max-width: 768px) {

    /* Rompe la estructura de dos columnas para que se lea en vertical en móviles */
    .seccion-informacion-inner {
        flex-direction: column !important;
        gap: 50px !important;
    }

    .bloque-texto-gigante {
        padding-top: 30px !important;
    }

    .texto-gigante-destacado {
        font-size: 36px !important;
    }
}

/* ==========================================================================
   ROW FORMULARIO CONTACTO
   ========================================================================== */
.row-contacto-form-container {
    position: relative !important;
    width: 100% !important;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    transform: none !important;
    background-color: #FFFFFF !important;
    padding: 80px 0 !important;
    box-sizing: border-box !important;
}

.row-contacto-form-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

.titulo-contacto-form {
    font-family: var(--font-family-normal) !important;
    font-size: 38px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #222222 !important;
    margin: 0 0 15px 0 !important;
    text-align: center !important;
    letter-spacing: -0.5px !important;
}

.subtitulo-contacto-form {
    font-size: 16px !important;
    color: #555555 !important;
    margin: 0 0 40px 0 !important;
    text-align: center !important;
}

.formulario-convention {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.form-group-convention {
    width: 100% !important;
}

.form-group-row-convention {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    width: 100% !important;
}

.form-group-convention.half {
    flex: 1 !important;
}

.formulario-convention input,
.formulario-convention textarea {
    width: 100% !important;
    padding: 16px 20px !important;
    font-family: var(--font-family-normal) !important;
    font-size: 15px !important;
    color: #333333 !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.formulario-convention input:focus,
.formulario-convention textarea:focus {
    outline: none !important;
    border-color: var(--color-secundario-hex) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}

.formulario-convention textarea {
    resize: vertical !important;
    min-height: 120px !important;
}

.form-submit-convention {
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.btn-enviar-form {
    background-color: var(--color-boton-hex) !important;
    color: black !important;
    font-family: var(--font-family-normal) !important;
    font-size: 16.5px !important;
    font-weight: 600 !important;
    padding: 16px 40px !important;
    border: none !important;
    border-radius: 25px !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    letter-spacing: 0.3px !important;
}

.btn-enviar-form:hover {
    opacity: 0.9 !important;
}

@media (max-width: 768px) {
    .row-contacto-form-container {
        padding: 50px 0 !important;
    }

    .titulo-contacto-form {
        font-size: 28px !important;
    }

    .form-group-row-convention {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .btn-enviar-form {
        width: 100% !important;
    }
}

/* ==========================================================================
   MAPA CONVENTION
   ========================================================================== */
#rowConventionMapa {
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    position: relative !important;
    margin-top: 60px;
    isolation: isolate;
}

.divConventionMapa {
    width: 100%;
    height: 500px;
    background-color: #2a2a2a;
    /* Usa la variable global si está definida (en style-single-common o :root), sino fallback */
    background-image: var(--bg-mapa-placeholder, url('../images/map-placeholder.png'));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.divConventionMapa.map-active {
    background-image: none !important;
    background-color: #2a2a2a !important;
    display: block;
    padding: 0;
}

.divConventionMapa::before,
.divConventionMapa::after {
    display: none !important;
}

.divConventionMapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    margin: 0;
    padding: 0;
    filter: brightness(0.92) contrast(1.05);
}

.map-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-btn {
    position: relative;
    z-index: 2;
    background: var(--color-boton-hex, #f49333) !important;
    color: #FFFFFF !important;
    padding: 15px 60px;
    font-weight: 700;
    font-size: 18px;
    border: none;
    border-radius: 5px 25px 5px 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(244, 147, 51, 0.3) !important;
}

.map-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 35px rgba(244, 147, 51, 0.5) !important;
    opacity: 0.9;
}

/* ==========================================================================
   CHECKBOX POLÍTICA DE PRIVACIDAD - FIX ALINEACIÓN
   ========================================================================== */
.form-check-convention {
    width: 100% !important;
    margin-bottom: 1rem !important;
}

.check-label-convention {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    /* Alinea todo a la izquierda */
    gap: 10px !important;
    font-size: 14px !important;
    color: #555555 !important;
    cursor: pointer !important;
    white-space: normal !important;
    /* Evita que el texto se rompa raro */
    width: 100% !important;
}

.check-label-convention input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    /* Evita que el checkbox se encoja */
    flex-shrink: 0 !important;
    cursor: pointer !important;
    accent-color: var(--color-boton-hex) !important;
    margin: 0 !important;
    /* Elimina márgenes por defecto del navegador */
}

.check-label-convention a {
    color: var(--color-secundario-hex) !important;
    text-decoration: underline !important;
}

.check-label-convention span {
    flex: 1 !important;
    line-height: 1.5 !important;
}

.check-label-convention a {
    color: var(--color-secundario-hex) !important;
    text-decoration: underline !important;
    display: inline !important;
    /* Asegura que fluye dentro del párrafo */
}