/* Slide del banner de este sitio: pisa la banda-banner del tema para usar la foto propia y su
   encuadre. El alto (740px) lo define el tema. Se carga después del tema, así que le gana por orden.
   Breakpoint en 1200px, igual que el tema. */

@media only screen and (min-width: 1201px) {
    body {
        background-image:
            linear-gradient(rgba(10, 22, 45, 0.45), rgba(10, 22, 45, 0.45)),
            var(--hero-img);
        background-repeat: no-repeat, no-repeat;
        background-position: center top, center -150px;
        background-size: 100% 740px, 100% auto;
    }

    body::before {
        background-image:
            linear-gradient(rgba(10, 22, 45, 0.45), rgba(10, 22, 45, 0.45)),
            url('/img/slider.webp');
        background-position: center, center 45%;
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
        background-color: #162E55;
    }
}

@media only screen and (max-width: 1200px) {
    .hero {
        background-image:
            linear-gradient(rgba(10, 22, 45, 0.45), rgba(10, 22, 45, 0.45)),
            var(--hero-img-mobile);
        background-size: cover, cover;
        background-position: center, center 45%;
        background-repeat: no-repeat, no-repeat;
        background-color: #162E55;
    }

    /* Inerte: en mobile nadie define content para body::before, así que no se genera. */
    body::before {
        background-image:
            linear-gradient(rgba(10, 22, 45, 0.45), rgba(10, 22, 45, 0.45)),
            url('/img/slider.webp');
        background-position: center, center 45%;
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
        background-color: #162E55;
    }
}

/* ---- Tabla de protección de datos del formulario de contacto (solo este sitio) ---- */

.seccion-formulario .form-info {
    margin: 10px 0 20px 0;
    overflow-x: auto;
}

.seccion-formulario .form-info .tabla-proteccion {
    width: 100%;
    border-collapse: collapse;
    font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    color: #162E55;
}

.seccion-formulario .form-info .tabla-proteccion caption {
    caption-side: top;
    text-align: left;
    font-size: 1.1rem;
    font-weight: bold;
    color: #162E55;
    margin-bottom: 8px;
}

.seccion-formulario a {
    color: #266187;
    text-decoration: underline;
}

.seccion-formulario a:hover {
    color: #162E55;
}

/* Mensaje de error del checkbox de consentimiento: en su propio renglón, separado del texto.
   Solo el del checkbox va pegado al label; en los demás campos entre medio está el input. El
   script de validación lo muestra/oculta con style.display, así que cuando está visible manda
   este display. */
.seccion-formulario label.control-label + .field-validation-error {
    display: block;
    margin-top: 12px;
}

.seccion-formulario .form-info .tabla-proteccion th,
.seccion-formulario .form-info .tabla-proteccion td {
    border: 1px solid #c9d4e0;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

.seccion-formulario .form-info .tabla-proteccion th {
    width: 30%;
    background: #f0f4f8;
    font-weight: bold;
}

/* ---- Aviso de cookies de la home ----
   Es una sección "Texto libre (HTML)" de la landing, la última, que se carga desde el Backoffice
   (módulo Landing). Su contenido es un <div class="aviso-cookies"> con el texto y el botón: acá solo
   se lo ubica fijo abajo. Arranca oculto: una imagen de 1px del mismo contenido, en su onload,
   marca <html> con la clase cookies-pendientes si todavía no se aceptó, y eso lo muestra. Al
   aceptar, el botón guarda bna_cookies_aceptadas en localStorage y saca la clase. Se marca <html> y
   no el aviso porque Alpine vuelve a pintar el contenido de la sección y perdería cualquier cambio
   hecho adentro.
   OJO: el contenido no puede llevar un <script>. El editor de Landing del Backoffice mete la
   estructura dentro de un <script>, y un "</script>" en el contenido lo corta y deja el editor sin
   secciones. Por eso el chequeo va en el onload de la imagen.
   Queda por debajo del aviso modal (z-index 1070/1080). */

/* La sección que lo contiene no ocupa lugar al final de la página. */
section.seccion-texto-libre:has(.aviso-cookies) {
    padding: 0;
}

.aviso-cookies {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    padding: 20px 24px;
    background: #0c2c57;
    color: #fff;
    text-align: left;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
}

html.cookies-pendientes .aviso-cookies {
    display: block;
}

/* Medidas tomadas del aviso del sitio anterior: bloque de 1410px centrado, texto de ~880px y el
   botón (280px) a continuación, no contra el borde derecho. */
.aviso-cookies-contenido {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 70px;
    max-width: 1410px;
    margin: 0 auto;
    padding: 0 10px;
}

.aviso-cookies-contenido p {
    flex: 0 1 880px;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15.6px;
    line-height: 24px;
    color: inherit;
}

.aviso-cookies-aceptar {
    flex: 0 0 280px;
    padding: 6px 16px;
    border: 0;
    border-radius: 4px;
    background: #0d6efd;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    line-height: 26px;
    cursor: pointer;
}

.aviso-cookies-aceptar:hover,
.aviso-cookies-aceptar:focus-visible {
    background: #0b5ed7;
}

/* Mientras está visible, que no tape el final de la página. */
html.cookies-pendientes body {
    padding-bottom: 90px;
}

@media only screen and (max-width: 768px) {
    .aviso-cookies-contenido {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .aviso-cookies-contenido p,
    .aviso-cookies-aceptar {
        flex-basis: auto;
    }

    html.cookies-pendientes body {
        padding-bottom: 200px;
    }
}