/* ==========================================================================
   COMPAC - Correcciones de responsividad y contraste
   Se carga desde mod/header.php despues del resto de hojas del tema
   (style.css / style-responsive.css / style-custom.css / event-style.css),
   por lo que las sobreescribe sin tener que tocarlas.

   Casi todo va dentro de media queries: el escritorio queda como estaba.
   Las pocas reglas globales son arreglos de contraste que estaban mal en
   todos los tamanos (texto gris del tema sobre los fondos oscuros del evento).
   ========================================================================== */

:root {
    /* texto legible sobre el verde azulado del evento (#326160) */
    --compac-on-dark: #eaf3f2;
    --compac-on-dark-soft: #bcd4d2;
}

/* ==========================================================================
   1. CONTRASTE (todos los tamanos)
   ========================================================================== */

/* El tema pinta el cuerpo en #8b8b8b y los titulos en #454545. Eso funciona
   sobre blanco, pero las secciones del evento van sobre #326160, donde el gris
   queda casi ilegible. Donde el fondo oscuro se aplica en linea, se fija de
   una vez el color de texto que heredan los hijos. */
[style*="background-color: #326160"],
[style*="background-color:#326160"],
[style*="background-color: #010103"],
[style*="background-color:#010103"] {
    color: var(--compac-on-dark);
}

/* Rotulo de agrupacion de la grilla de conferencistas: no tenia ninguna regla
   de estilo, asi que heredaba el gris del cuerpo (o el #212529 de bootstrap)
   sobre fondo oscuro. */
.conferencistas-title {
    margin: 40px 0 22px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
}

/* Tarjetas de conferencista: el nombre usaba el #454545 de los h1-h6. */
.gdlr-speaker-item .gdlr-speaker-item-title,
.gdlr-speaker-item .gdlr-speaker-item-title a,
.gdlr-speaker-item .gdlr-speaker-item-title.gdlr-skin-title {
    color: #ffffff;
}

.gdlr-speaker-item .gdlr-speaker-item-position {
    color: var(--compac-on-dark-soft);
}

/* Los titulos con degradado van siempre sobre el verde oscuro del evento, y
   el extremo azul del degradado (#059cbc) queda en 2:1 de contraste: cuando el
   titulo ocupa dos o tres lineas, las ultimas casi no se leen. Se sube el
   brillo de los dos extremos manteniendo el mismo salto de color. */
.text-gradient {
    color: #2de0cd;
    background-image: linear-gradient(to right top, #2de0cd, #2de0cd, #4bc8e8, #4bc8e8);
}

/* Los <hr> del tema quedaban invisibles sobre fondo oscuro. */
[style*="background-color: #326160"] hr,
[style*="background-color:#326160"] hr,
[style*="background-color: #010103"] hr,
[style*="background-color:#010103"] hr {
    border-top-color: rgba(255, 255, 255, .22);
}

/* En las paginas que cargan bootstrap, su .row aporta margenes negativos que
   el pie no compensa con ningun padding: la linea de copyright se salia unos
   pixeles por la izquierda. */
footer .row {
    margin-left: 0;
    margin-right: 0;
}

/* Boton flotante de WhatsApp: era un rectangulo de 70x63 con la imagen
   desplazada con position:relative en linea. Ademas tapaba el contenido. */
.float {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    right: 16px;
    bottom: 22px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

.float img {
    position: static !important;
    top: auto !important;
    max-width: 30px !important;
    margin: 0;
}

/* ==========================================================================
   2. TABLET Y MOVIL (<= 959px)
   ========================================================================== */

@media only screen and (max-width: 959px) {

    /* --- modelo de caja -------------------------------------------------
       El tema es content-box y combina anchos en % con paddings en px, asi
       que cualquier caja con padding se sale de la pantalla. */
    .container,
    .container-fluid,
    .section-container,
    .gdlr-content,
    .content-wrapper,
    .column,
    .columns,
    .gdlr-item,
    .with-sidebar-container,
    .with-sidebar-left,
    .with-sidebar-content,
    .gdlr-color-wrapper,
    .gdlr-full-size-wrapper {
        box-sizing: border-box;
    }

    html,
    body {
        overflow-x: hidden;
    }

    body img,
    body iframe {
        max-width: 100%;
    }

    /* --- grilla ---------------------------------------------------------
       La grilla del tema son floats. Al pasar todas las columnas a 100%
       siguen flotadas, y los contenedores que no son a su vez float (los
       bloques de patrocinadores, por ejemplo) colapsan a cero: los logos se
       montaban unos sobre otros. Sin float se apilan como bloques normales.
       No se toca el ancho aqui para no pisar utilidades como .fix48. */
    .column,
    .columns {
        float: none;
    }

    /* --- tipografia -----------------------------------------------------
       style.css fija p / ul / ol en 22px con interlineado de 42px. En una
       columna de 390px eso son 4 o 5 palabras por linea. */
    p {
        font-size: 17px;
        line-height: 1.75;
        margin-bottom: 24px;
    }

    ul,
    ol {
        font-size: 17px;
        line-height: 1.75;
    }

    /* --- titulos --------------------------------------------------------
       36-37px en mayusculas y 800 de peso no caben: "CONFERENCISTAS" se
       salia de la pantalla. */
    .gdlr-item-title-wrapper .gdlr-item-title,
    .gdlr-title-item .gdlr-item-title-wrapper .gdlr-item-title {
        font-size: 30px;
        line-height: 1.15;
        letter-spacing: 0;
        overflow-wrap: break-word;
    }

    .gdlr-page-title-wrapper {
        padding: 55px 0 50px;
    }

    .gdlr-page-title-wrapper .gdlr-page-title,
    .gdlr-page-title-wrapper.gdlr-title-large-center .gdlr-page-title {
        font-size: 32px;
        line-height: 1.15;
        letter-spacing: 2px;
        overflow-wrap: break-word;
    }

    .gdlr-page-title-wrapper .gdlr-page-caption {
        font-size: 16px;
        line-height: 26px;
    }

    /* --- banda de titulo de cada pagina ---------------------------------
       Las paginas suben el contenido con margin-top negativo para que el
       header transparente quede encima de la foto, y compensan con
       padding-top: 170px. Con el header movil (mas bajo y con el logo a la
       izquierda) eso deja el titulo tapado por el logo. En movil se apila:
       header arriba, banda debajo. */
    .content-wrapper[style*="margin-top: -"],
    .gdlr-full-size-wrapper[style*="margin-top: -"] {
        margin-top: 0 !important;
    }

    #gdlr-parallax-wrapper-2 {
        padding-top: 46px !important;
        padding-bottom: 46px !important;
        background-attachment: scroll !important;
    }

    #gdlr-parallax-wrapper-2 .gdlr-title-item {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Al dejar de ir sobre la foto, el header necesita fondo propio. */
    header .gdlr-header-inner {
        background-image: linear-gradient(180deg, #0a3b43 0%, #0d4a49 100%);
    }

    .gdlr-header-container::before {
        display: none;
    }

    /* --- slider de portada ----------------------------------------------
       Los layers de MasterSlider no escalan con el slider: master-custom.css
       los deja en 55px y algunos <strong> traen 42-52px en linea. */
    .master-slider .ms-layer,
    .master-slider .msp-cn-1-1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        padding-top: 0 !important;
    }

    .master-slider .ms-layer strong {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .master-slider .ms-layer img {
        width: 170px !important;
        max-width: 55vw !important;
        height: auto;
    }

    /* --- filas que no se pueden partir ----------------------------------
       inversion.php arma las tarjetas de precio con flex-wrap: nowrap, asi
       que las tres se comprimen y se salen de la pantalla. */
    .row[style*="nowrap"] {
        flex-wrap: wrap !important;
    }

    .row[style*="nowrap"] > .columns,
    .row[style*="nowrap"] > .column {
        margin: 0 0 20px !important;
    }

    /* Separaciones pensadas para escritorio. */
    [style*="margin-top: 225px"] {
        margin-top: 40px !important;
    }

    /* La rana de la bienvenida es decorativa y ocupa una columna estrecha en
       escritorio; al pasar a 100% de ancho se comia una pantalla entera. */
    .bienvenida-rana {
        display: block !important;
        text-align: center;
        margin-bottom: 6px;
    }

    .bienvenida-rana img {
        width: 96px;
    }

    /* Bloques de patrocinadores y organizadores (mod/organizadores.php): al
       apilarse, los logos quedaban pegados uno sobre otro y las columnas
       vacias que en escritorio sirven de margen lateral se convertian en
       huecos verticales. */
    .hoverimg {
        margin-bottom: 26px;
        text-align: center;
    }

    .column.one.hoverimg,
    .column.two.hoverimg {
        display: none;
    }

    /* Pie de pagina: .pie es un flex de tres columnas que no envuelve, asi que
       los tres datos de contacto se apretaban en una sola linea. */
    footer .pie {
        display: block;
        text-align: center;
    }

    footer .pie > .columns {
        width: 100%;
        margin-bottom: 22px;
        overflow-wrap: break-word;
    }

    footer .pie > .columns:last-child {
        margin-bottom: 0;
    }

    /* Tablas de programa / talleres: se desplazan en su propia caja en vez de
       empujar toda la pagina a lo ancho. */
    .gdlr-content table,
    .section-container table,
    .container table {
        display: block;
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- menu -----------------------------------------------------------
       El tema centra el logo y deja el boton flotando; navbar.css ya arma la
       fila, pero style-responsive.css le devuelve el ancho de 250px. */
    body .gdlr-logo {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   2b. TABLET EN VERTICAL (768px - 959px)

   style-responsive.css solo apila las columnas a partir de 767px. Entre 768 y
   959 el menu ya es el de movil pero la grilla sigue en cuatro columnas: los
   cuatro ejes tematicos quedaban en 190px cada uno, con los titulos partidos
   y el texto encimado. Se apila igual que en movil.
   Sin !important, para que utilidades como .fix48 sigan mandando.
   ========================================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {

    .one-ninth,
    .one-eighth,
    .one-seventh,
    .one-fifth,
    .two-fifth,
    .three-fifth,
    .four-fifth,
    .one,
    .two,
    .three,
    .four,
    .five,
    .six,
    .seven,
    .eight,
    .nine,
    .ten,
    .eleven,
    .twelve {
        width: 100%;
    }
}

/* ==========================================================================
   3. MOVIL (<= 767px)
   ========================================================================== */

@media only screen and (max-width: 767px) {

    p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    ul,
    ol {
        font-size: 16px;
        line-height: 1.7;
        margin-left: 22px;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 23px;
    }

    h3 {
        font-size: 20px;
    }

    h4,
    h5,
    h6 {
        font-size: 17px;
    }

    /* Justificado en una columna angosta = rios de espacio entre palabras
       (se ve en la bienvenida, ponencias, viaje...). */
    [style*="text-align: justify"],
    [style*="text-align:justify"],
    .text-justify {
        text-align: left !important;
    }

    .gdlr-item-title-wrapper .gdlr-item-title,
    .gdlr-title-item .gdlr-item-title-wrapper .gdlr-item-title {
        font-size: 25px;
        padding: 0 10px;
    }

    .gdlr-page-title-wrapper .gdlr-page-title,
    .gdlr-page-title-wrapper.gdlr-title-large-center .gdlr-page-title {
        font-size: 27px;
        letter-spacing: 1px;
        margin: 0 14px;
    }

    /* Secciones con 130-190px de aire arriba y abajo: en movil son pantallas
       enteras en blanco. */
    section.big-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    section.extra-big-section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .gdlr-color-wrapper,
    .gdlr-parallax-wrapper,
    .section-container,
    .gdlr-item-start-content {
        padding-top: 40px;
    }

    /* Los .gdlr-item llevan 15px de margen a cada lado y el .container otros
       15px de padding: 60px de los 390 disponibles. */
    .gdlr-item {
        margin-left: 0;
        margin-right: 0;
    }

    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Fondos con parallax: en movil el fixed provoca saltos y recortes. */
    [data-parallax-background-ratio] {
        background-attachment: scroll !important;
    }

    /* Titulos de seccion con el tamano puesto en linea. A 390px de ancho,
       42px parte cada titulo en tres o cuatro renglones. */
    [style*="font-size: 52px"],
    [style*="font-size: 44px"],
    [style*="font-size: 42px"] {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    [style*="font-size: 38px"],
    [style*="font-size: 36px"] {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    [style*="font-size: 30px"] {
        font-size: 23px !important;
        line-height: 1.25 !important;
    }

    /* El icono de la molecula acompana a esos titulos en la misma linea y con
       20px de margen: en movil empuja el texto y descuadra el centrado. */
    img[src$="images/icon.png"] {
        display: block;
        margin: 0 auto 10px !important;
    }

    /* Aire pensado para pantallas de 1140px, puesto en linea seccion por
       seccion. En movil son pantallas enteras vacias. */
    [style*="padding-top: 90px"],
    [style*="padding-top: 100px"],
    [style*="padding-top: 120px"],
    [style*="padding-top: 190px"] {
        padding-top: 45px !important;
    }

    [style*="padding-bottom: 90px"],
    [style*="padding-bottom: 120px"],
    [style*="padding-bottom: 190px"] {
        padding-bottom: 45px !important;
    }

    /* Sangrias laterales que en escritorio separan dos columnas y en movil,
       con una sola columna, solo descentran el contenido. */
    div[style*="padding-left: 40px"] {
        padding-left: 0 !important;
    }

    /* Con la forma corta el aire tambien va a los lados: en hotel.php dejaba la
       columna de texto en 170px de ancho. */
    [style*="padding: 90px"],
    [style*="padding:90px"],
    [style*="padding: 80px"],
    [style*="padding:80px"],
    [style*="padding: 60px"],
    [style*="padding:60px"] {
        padding: 45px 16px !important;
    }

    /* El formulario de Zoho no cabe en los 400px fijos del iframe cuando los
       campos se apilan: el boton de enviar quedaba cortado. */
    iframe[src*="forms.zohopublic.com"] {
        height: 540px !important;
        width: 100% !important;
    }

    /* Formularios: 16px evita que iOS haga zoom al enfocar el campo. */
    input:not([type=radio]):not([type=checkbox]),
    textarea,
    select {
        font-size: 16px;
    }

    /* Areas tactiles minimas en los enlaces del menu movil y botones. */
    .gdlr-button,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
    }

    /* Los botones de accion son enlaces en linea con el padding puesto a mano:
       cuando hay dos seguidos (VER BROCHURE / VER CROQUIS) el segundo se parte
       a la mitad y se sale de la pantalla. En movil van uno debajo del otro. */
    a.bg-gradient-blue-green {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 320px;
        margin: 12px auto 0;
        padding: 14px 18px !important;
        text-align: center;
    }

    .float {
        width: 52px;
        height: 52px;
        right: 12px;
        bottom: 16px;
    }
}

/* ==========================================================================
   4. MOVIL ANGOSTO (<= 419px)
   ========================================================================== */

@media only screen and (max-width: 419px) {

    .gdlr-item-title-wrapper .gdlr-item-title,
    .gdlr-title-item .gdlr-item-title-wrapper .gdlr-item-title {
        font-size: 22px;
    }

    .gdlr-page-title-wrapper .gdlr-page-title,
    .gdlr-page-title-wrapper.gdlr-title-large-center .gdlr-page-title {
        font-size: 23px;
    }

    .master-slider .ms-layer,
    .master-slider .msp-cn-1-1 {
        font-size: 19px !important;
    }

    .master-slider .ms-layer strong {
        font-size: 18px !important;
    }
}