/* ==============================================================================================
   idealoweb-comunes.css — estilos de las piezas comunes (_partials/header.html, footer.html y el banner
   de cookies de cookie-consent.js). Complementa a idealoweb.css (que lleva marca, fondos que faltan,
   topbar, ticker, selector de periodo, pastillas, menú…): aquí sólo lo que necesitan los partials.
   Se carga el ÚLTIMO en _partials/head.html, después de idealoweb.css. Al tocarlo se sube ?v= en los HTML.
   ============================================================================================== */

/* ---------------------------------------------------------------------------------------------
   1. Cabecera
   --------------------------------------------------------------------------------------------- */
/* Botón «Área de cliente» (a[data-site="cta"].primary_btn): .primary_btn no trae relleno, cada sección
   pone el suyo; en la cabecera va como botón compacto a juego con «Contactar» (.register) */
.other_list .other_list_item .header-cta {
    height: 50px;
    padding: 17px 20px;
    border-radius: 5px;
    border: 1px solid var(--e-global-color-accent);
    white-space: nowrap;
    color: var(--e-global-color-white) !important;
}
.other_list .other_list_item .header-cta:hover {
    color: var(--e-global-color-white) !important;
    background-color: var(--e-global-color-light-blue);
    border-color: var(--e-global-color-light-blue);
}
/* Logo SVG de idealoweb (460×104): más apaisado que el PNG de la demo, un poco más estrecho */
.header .logo img,
.footer-con .copyright_text .footer-logo img {
    width: 170px;
    height: auto;
}
@media screen and (max-width: 991px) {
    /* En móvil el tema pone la hamburguesa a la izquierda y el logo desplazado 40 px; el CTA queda a la derecha */
    .other_list .other_list_item .header-cta {
        height: 45px;
        padding: 14px 14px;
    }
    .header .logo img {
        width: 150px;
    }
}
@media screen and (max-width: 575px) {
    .other_list .other_list_item .header-cta {
        font-size: 14px;
        padding: 14px 12px;
    }
    .header .logo img {
        width: 124px;
    }
    .navbar-brand {
        left: 36px;
    }
}

/* Menú principal (09-10-2026): centrado entre el logo y los botones, letra más grande y con más cuerpo, y una
   raya con el degradado del logo bajo la opción de la página en la que estás (o al pasar el ratón). El orden
   de las opciones no es de aquí: lo manda el panel (Admin → Web → Menú y pie). */
.header .navbar-nav > .nav-item > .nav-link {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -.1px;
}
/* La flecha de los desplegables: más fina y gira al abrirlo */
.header .navbar-nav > .dropdown > .dropdown-toggle::after {
    vertical-align: 3px;
    margin-left: 7px;
    border-top-width: 5px;
    border-left-width: 4px;
    border-right-width: 4px;
    transition: transform .2s ease;
}
.header .navbar-nav > .dropdown.show > .dropdown-toggle::after {
    transform: rotate(180deg);
}
@media screen and (min-width: 992px) {
    /* Con margen automático a los dos lados queda en el centro del hueco (el tema lo empujaba a la derecha) */
    .header ul.navbar-nav[data-menu="header"] {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .header .navbar-nav > .nav-item {
        margin: 0 6px;
    }
    /* Los colores, sólo en el ordenador: en el móvil el tema pinta la opción activa en blanco sobre azul */
    .header .navbar-nav > .nav-item > .nav-link {
        position: relative;
        line-height: 1;
        padding: 13px 14px !important;
        border-radius: 10px;
        color: #2e2f46 !important;
    }
    .header .navbar-nav > .nav-item > .nav-link:hover,
    .header .navbar-nav > .nav-item.active > .nav-link,
    .header .navbar-nav > .nav-item.show > .nav-link {
        color: #2475ff !important;
    }
    .header .navbar-nav > .nav-item > .nav-link::before {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 3px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, #2475ff, #9548f8);
        transform: scaleX(0);
        transition: transform .25s ease;
    }
    .header .navbar-nav > .nav-item > .nav-link:hover::before,
    .header .navbar-nav > .nav-item.active > .nav-link::before,
    .header .navbar-nav > .nav-item.show > .nav-link::before {
        transform: scaleX(1);
    }
    /* El desplegable, un poco más separado de su opción */
    .header .navbar-nav > .dropdown > .dropdown-menu {
        top: 52px;
    }
    /* Cabecera blanca con una línea fina debajo: separa el menú del contenido */
    .header {
        background-color: #fff;
        box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    /* Portátiles pequeños: un punto menos y menos aire, para que quepa todo en una línea */
    .header .navbar-nav > .nav-item { margin: 0 2px; }
    .header .navbar-nav > .nav-item > .nav-link { font-size: 16px; padding: 12px 10px !important; }
    .header .navbar-nav > .nav-item > .nav-link::before { left: 10px; right: 10px; }
}

/* ---------------------------------------------------------------------------------------------
   2. Pie
   --------------------------------------------------------------------------------------------- */
/* Descripción de la empresa (p[data-site="footer-description"]) encima de las columnas */
.footer-con .middle_portion .footer-intro {
    margin-bottom: 40px;
}
.footer-con .middle_portion .footer-intro p {
    font-size: 16px;
    line-height: 26px;
    color: var(--e-global-color-text);
}
/* La primera columna siempre pegada al margen (el loader regenera las columnas sin service_list, etc.) */
.footer-con .middle_portion [data-footer-columns] > div:first-child .links {
    padding-left: 0 !important;
}
/* Columna de contacto: icono Font Awesome (el tema sólo contempla <img>) y texto suelto */
.footer-con .middle_portion .links .text > i {
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    text-align: center;
    font-size: 15px;
    color: var(--e-global-color-accent);
}
.footer-con .middle_portion .links .text {
    font-size: 14px;
    line-height: 26px;
    color: var(--e-global-color-text);
}
/* Correo y teléfono del pie llevan data-topbar (el loader los rellena igual que la barra superior, §2), pero
   NO son la barra: se anula el estilo de contenedor que idealoweb.css da a cualquier [data-topbar] */
.footer-con a[data-topbar] {
    display: inline;
    padding: 0;
    border: 0;
    gap: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    line-height: 26px;
    font-weight: 400;
    color: var(--e-global-color-text);
}
.footer-con a[data-topbar]::before {
    content: none;
}
.footer-con a[data-topbar]:hover {
    color: var(--e-global-color-accent);
}
/* Enlaces legales bajo el copyright */
.footer-con .copyright .legal-links {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}
.footer-con .copyright .legal-links li {
    padding: 0;
    margin: 0;
}
.footer-con .copyright .legal-links a {
    font-size: 13px;
    line-height: 20px;
    color: var(--e-global-color-text);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}
.footer-con .copyright .legal-links a:hover {
    color: var(--e-global-color-accent);
}
/* Redes sin URL: las oculta el loader; si Supabase no responde, que al menos no recarguen la página */
.footer-con .social-icons a[href=""] {
    pointer-events: none;
    opacity: 0.45;
}
@media screen and (max-width: 767px) {
    .footer-con .copyright_text {
        flex-wrap: wrap;
        gap: 14px;
        justify-content: center;
        text-align: center;
    }
    .footer-con .copyright .legal-links {
        justify-content: center;
    }
    .footer-con .middle_portion {
        padding-top: 70px;
    }
}

/* ---------------------------------------------------------------------------------------------
   3. Banner de cookies (lo pinta assets/js/cookie-consent.js) — mismo aspecto que en la web vieja
   --------------------------------------------------------------------------------------------- */
#cookie-consent-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: #0b1233;
    color: #fff;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}
.cookie-consent-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.cookie-consent-inner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
    flex: 1 1 320px;
}
.cookie-consent-inner a {
    color: #8ea6ff;
    text-decoration: underline;
}
.cookie-consent-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}
.cookie-consent-btn {
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.cookie-consent-btn.accept {
    background: var(--e-global-color-accent);
    color: #fff;
}
.cookie-consent-btn.reject {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ---------------------------------------------------------------------------
   Fuentes de la plantilla, alojadas en la propia web (antes venían de Google
   Fonts, que veía la IP de cada visitante). Archivos en /assets/webfonts/:
   Plus Jakarta Sans e Inter en versión variable (todos los pesos en un archivo),
   Poppins en cuatro pesos. Licencia SIL Open Font License.
   --------------------------------------------------------------------------- */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../webfonts/PlusJakartaSans-variable.ttf) format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../webfonts/Inter-variable.ttf) format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(../webfonts/Poppins-Regular.ttf) format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(../webfonts/Poppins-Medium.ttf) format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(../webfonts/Poppins-SemiBold.ttf) format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(../webfonts/Poppins-Bold.ttf) format("truetype"); }