/*
 Theme Name:   Idento Child
 Description:  Child theme del tema base Idento
 Author:       Idento
 Author URI:   https://idento.es
 Template:     idento-base-theme
 Version:      1.0.0
 Text Domain:  idento-child
*/

/* =============================================================================
   PALETA DE COLORES DEL PROYECTO
   Redefine aquí las variables del tema padre
============================================================================= */

:root {
    /* Colores principales */
    --primary: #1E4691;
    --primary-hover: #163370;
    --secondary: #4F8839;
    --secondary-hover: #3A6629;
    --thirty: #C2001F;
    --thirty-hover: #910016;

    /* Degradado */
    --degradado: linear-gradient(90deg, rgba(10, 15, 84, 0.20) 0%, rgba(10, 15, 84, 1) 97%);
    --degradado-hover: linear-gradient(90deg, rgba(10, 15, 84, 1) 0%, rgba(10, 15, 84, 0.20) 97%);

    /* Neutros del proyecto — ajustar si el diseño los cambia */
    --black-color: #222222;
    --light-color: #ffffff;
    --grey-color: #646464;
    --grey-light-color: #929090;

    /* Header de este proyecto */
    --header-bg: #ffffff;
    --header-topbar-bg: var(--primary);
    --header-topbar-color: #ffffff;
    --header-nav-bg: #ffffff;
    --header-nav-color: var(--primary);
    --header-nav-hover: var(--secondary);
    --header-logo-h: 60px;
    /* altura máxima del logo */
    --header-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}


/* =============================================================================
   FUENTE BASE
============================================================================= */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* HEADER */



/* =============================================================================
   HEADER — TOPBAR (Fila 1)
============================================================================= */

.header-topbar {
    background-color: var(--header-topbar-bg);
    color: var(--header-topbar-color);
    font-size: 0.85rem;
    padding: 0.45rem 0;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Teléfono en topbar */
.header-topbar .header-phone {
    color: var(--header-topbar-color);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.header-topbar .header-phone:hover {
    opacity: 0.8;
}

/* Menú topbar */
.topbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.topbar-nav .nav-item>a {
    color: var(--header-topbar-color);
    text-decoration: none;
    padding: 0.2rem 0.6rem;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.topbar-nav .nav-item>a:hover {
    opacity: 0.75;
}


/* =============================================================================
   HEADER — MAIN (Fila 2)
============================================================================= */

.header-main {
    background-color: var(--header-bg);
    padding: 0.65rem 0;
    border-bottom: 1px solid #e9ecef;
}

.header-main-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* El buscador ocupa todo el espacio disponible */
.header-search-wrap {
    flex: 1;
    min-width: 0;
}

/* Logo */
.header-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.header-logo .logo-img {
    max-height: var(--header-logo-h);
    width: auto;
    display: block;
    transition: max-height 0.3s ease;
}

.header-logo .site-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
}

/* Acciones (buscador + carrito) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Buscador */
.header-search {
    width: 100%;
}

.header-search .form-control {
    border-radius: 999px 0 0 999px;
    border: 1px solid #dee2e6;
    font-size: 0.9rem;
    padding: 0.4rem 1rem;
}

.header-search .btn-search {
    border-radius: 0 999px 999px 0;
    background-color: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    padding: 0.4rem 0.85rem;
    transition: background-color 0.2s;
}

.header-search .btn-search:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Carrito + Mi cuenta */
.header-cart,
.header-account {
    position: relative;
    color: var(--primary);
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s;
}

.header-cart:hover,
.header-account:hover {
    color: var(--primary-hover);
}

.header-cart .cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--thirty);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* Cesta de cotización (plugin Request a Quote) — usa el mismo look que .header-cart */
.header-quote-cart {
    display: inline-flex;
}

.header-quote-cart .quote-li {
    list-style: none;
    display: inline-flex;
}

/* Catálogo de socios: el botón "Añadir al presupuesto" solo para usuarios logueados.
   El invitado ve el producto y el precio, pero sin botón de presupuesto ni cesta.
   (.afrfqbt = listado/catálogo, .afrfqbt_single_page = ficha de producto) */
body:not(.logged-in) .afrfqbt,
body:not(.logged-in) .afrfqbt_single_page {
    display: none !important;
}

/* Toggler mobile */
.navbar-toggler {
    border: none;
    padding: 0.4rem;
    color: var(--primary);
    font-size: 1.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231E4691' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* =============================================================================
   HEADER — BOTÓN CTA (menú 'header-cta')
   Cada ítem del menú se renderiza como un botón con borde
============================================================================= */

.header-cta-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-cta-nav .nav-item>a {
    display: inline-block;
    padding: 0.45rem 1.25rem;
    border: 2px solid var(--thirty);
    border-radius: 999px;
    color: var(--thirty);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.4;
}

.header-cta-nav .nav-item>a:hover {
    background-color: var(--thirty);
    color: #ffffff;
}

/* En mobile, dentro del menú colapsado */
.mobile-actions .header-cta-nav .nav-item>a {
    border-color: var(--thirty);
    color: var(--thirty);
}


/* =============================================================================
   HEADER — NAV (Fila 3 — menú principal)
============================================================================= */

.header-nav {
    background-color: var(--header-nav-bg);
}

/* Navbar Bootstrap reset */
.header-nav .navbar {
    padding: 0;
}

.header-nav .navbar-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    justify-content: center;
}

/* Ítems de primer nivel */
.header-nav .navbar-nav>.nav-item>.nav-link {
    color: var(--header-nav-color);
    font-size: 16px;
    font-weight: 600;
    padding: 0.85rem 1rem;
    position: relative;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: color 0.2s;
}

/* Barra de subrayado animada — solo en ítems SIN submenu */
.header-nav .navbar-nav>.nav-item:not(.dropdown)>.nav-link::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 3px;
    background: var(--secondary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.header-nav .navbar-nav>.nav-item>.nav-link:hover,
.header-nav .navbar-nav>.nav-item.active>.nav-link,
.header-nav .navbar-nav>.nav-item.current-menu-item>.nav-link,
.header-nav .navbar-nav>.nav-item.current-menu-ancestor>.nav-link {
    color: var(--secondary);
}

.header-nav .navbar-nav>.nav-item:not(.dropdown)>.nav-link:hover::after,
.header-nav .navbar-nav>.nav-item:not(.dropdown).current-menu-item>.nav-link::after,
.header-nav .navbar-nav>.nav-item:not(.dropdown).current-menu-ancestor>.nav-link::after {
    transform: scaleX(1);
}

/* ─── Botón toggle submenú ─── */
/*
 * El Walker lo coloca INMEDIATAMENTE antes del <ul class="dropdown-menu">.
 * En desktop está oculto — los dropdowns se abren con :hover en CSS puro.
 * En mobile es visible con ancho fijo y separador izquierdo (ver bloque mobile).
 */
.submenu-toggle-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--header-nav-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background-color 0.2s;
}

.submenu-toggle-btn:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* Dropdown estándar */
.header-nav .dropdown-menu {
    background: var(--header-bg);
    border: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 220px;
    margin-top: 0;
}

.header-nav .dropdown-menu .dropdown-item {
    color: var(--black-color);
    font-size: 18px;
    padding: 12px 16px;
    transition: background-color 0.15s, color 0.15s;
    white-space: normal;
}

.header-nav .dropdown-menu .dropdown-item:hover,
.header-nav .dropdown-menu .dropdown-item:focus,
.header-nav .dropdown-menu .nav-item.active>.dropdown-item {
    background-color: var(--primary);
    color: #fff;
}

/* ─── Desktop: hover abre dropdowns (CSS puro, sin JS) ─── */
@media (min-width: 992px) {

    /* Indicador visual: chevron en los enlaces de nivel 1 que tienen submenu.
     * El botón .submenu-toggle-btn está oculto — usamos ::after en el <a>.
     */
    .header-nav .navbar-nav>.nav-item.dropdown>.nav-link::after {
        content: '\f107';
        /* fa-chevron-down */
        font-family: 'Font Awesome 7 Free';
        font-weight: 900;
        display: inline-block;
        margin-left: 0.35em;
        font-size: 0.7em;
        vertical-align: middle;
        transition: transform 0.2s ease;
        /* Quitar el ::after animado de la línea inferior (definido más arriba) */
        position: static;
        height: auto;
        background: none;
        transform: none;
    }

    /* Indicador en ítems de nivel 2 que tienen sub-submenu */
    .header-nav .dropdown-menu .nav-item.dropdown-submenu>.dropdown-item::after {
        content: '\f105';
        /* fa-chevron-right */
        font-family: 'Font Awesome 7 Free';
        font-weight: 900;
        float: right;
        font-size: 0.75em;
        line-height: 1.6;
        color: var(--grey-color);
    }

    /* Posicionamiento explícito del dropdown de nivel 1.
     * Sin Popper.js el navegador no infiere top/left, hay que forzarlo.
     */
    .header-nav .navbar-nav>.nav-item.dropdown {
        position: relative;
    }

    .header-nav .navbar-nav>.nav-item.dropdown>.dropdown-menu {
        top: 100%;
        left: 0;
    }

    /* Nivel 1: abre al hover */
    .header-nav .navbar-nav>.nav-item.dropdown:hover>.dropdown-menu {
        display: block;
    }

    /* Nivel 2: sale a la derecha */
    .header-nav .dropdown-menu .nav-item.dropdown-submenu {
        position: relative;
    }

    .header-nav .dropdown-menu .nav-item.dropdown-submenu>.dropdown-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        margin-top: 0;

        min-width: 200px;
    }

    .header-nav .dropdown-menu .nav-item.dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }

    /* Botón .submenu-toggle-btn oculto en desktop */
    .submenu-toggle-btn {
        display: none;
    }
}

/* ─── Megamenú (ítems con clase CSS 'megamenu') ─── */
.header-nav .nav-item.megamenu {
    position: static;
    /* el dropdown se abre relativo al .header-nav */
}

.header-nav .nav-item.megamenu>.dropdown-menu {
    width: 100%;
    left: 0;
    right: 0;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.header-nav .nav-item.megamenu .dropdown-menu>li>a {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.9rem;
    padding: 0.3rem 0;
    display: block;
    text-decoration: none;
    border-bottom: 2px solid var(--secondary);
    margin-bottom: 0.5rem;
}

.header-nav .nav-item.megamenu .dropdown-menu>li>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.header-nav .nav-item.megamenu .dropdown-menu>li>ul>li>a {
    display: block;
    font-size: 0.875rem;
    color: var(--black-color);
    padding: 0.3rem 0;
    text-decoration: none;
    transition: color 0.15s;
}

.header-nav .nav-item.megamenu .dropdown-menu>li>ul>li>a:hover {
    color: var(--primary);
}


/* =============================================================================
   HEADER — STICKY
   Se añade la clase .is-sticky con JS al hacer scroll
============================================================================= */

.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Sombra solo cuando el usuario ha bajado — sin cambios de tamaño en el logo */
.site-header.has-scrolled .header-main {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}


/* =============================================================================
   HEADER — MOBILE (< lg)
============================================================================= */

@media (max-width: 991.98px) {

    /* Topbar oculta en mobile — aparece dentro del panel */
    .header-topbar {
        display: none;
    }

    /* ── PANEL MOBILE: overlay fijo que cubre toda la pantalla ──────────────
     * Bootstrap añade .show cuando está abierto.
     * Usamos transform para la animación de entrada/salida.
     * El panel tiene su propio scroll interno (overflow-y: auto).
     */
    .header-nav .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: min(320px, 100vw);
        /* panel lateral, no ocupa todo el ancho */
        height: 100dvh;
        /* toda la altura, incluyendo safe area */
        z-index: 1050;
        background-color: #ffffff;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);

        /* Estado inicial: fuera de pantalla a la izquierda */
        transform: translateX(-100%);
        transition: transform 0.3s ease;

        /* Desactiva el display:none de Bootstrap para usar la animación */
        display: block !important;
        visibility: hidden;
    }

    .header-nav .navbar-collapse.show {
        transform: translateX(0);
        visibility: visible;
    }

    /* Backdrop oscuro detrás del panel */
    .header-nav .navbar-collapse::before {
        content: '';
        position: fixed;
        inset: 0;

        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .header-nav .navbar-collapse.show::before {
        opacity: 1;
        pointer-events: auto;
        /* El click en el backdrop cierra el panel — ver JS */
        cursor: pointer;
    }

    /* Cabecera del panel: logo + X */
    .mobile-panel-header {
        padding: 1rem 1rem 0.75rem;
        border-bottom: 1px solid #e9ecef;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 1;
        flex-shrink: 0;
    }

    .mobile-panel-header .header-logo .logo-img {
        max-height: 40px;
    }

    .mobile-panel-close {
        background: transparent;
        border: none;
        font-size: 1.4rem;
        color: var(--primary);
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        line-height: 1;
        transition: color 0.2s;
    }

    .mobile-panel-close:hover {
        color: var(--thirty);
    }

    /* Contenido del panel con padding */
    .header-nav .navbar-collapse>*:not(.mobile-panel-header) {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Ítems en columna */
    .header-nav .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        padding-top: 0.5rem;
    }

    .header-nav .navbar-nav>.nav-item>.nav-link {
        padding: 0.7rem 0.5rem;
    }

    .header-nav .navbar-nav>.nav-item>.nav-link::after {
        display: none;
    }

    /* ── PATRÓN FLEX PARA DROPDOWN EN MOBILE ──
     * <li> es flex-wrap → <a> ocupa el espacio, botón tiene ancho fijo,
     * <ul class="dropdown-menu"> tiene flex-basis:100% y cae a la fila siguiente.
     */
    .header-nav .nav-item.dropdown,
    .header-nav .nav-item.dropdown-submenu {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    /* El link ocupa todo el espacio horizontal disponible */
    .header-nav .nav-item.dropdown>.nav-link,
    .header-nav .nav-item.dropdown-submenu>.dropdown-item {
        flex: 1;
        min-width: 0;
    }

    /* Botón toggle: visible, ancho fijo, separador izquierdo */
    .submenu-toggle-btn {
        display: flex;
        width: 48px;
        padding: 0;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--header-nav-color);
    }

    .submenu-toggle-btn:hover {
        background-color: rgba(0, 0, 0, 0.04);
        color: var(--secondary);
    }

    .submenu-toggle-btn[aria-expanded="true"] {
        background-color: rgba(0, 0, 0, 0.04);
        color: var(--secondary);
    }

    /* Rota el chevron al estar abierto:
     * Todos los botones usan fa-chevron-right → cerrado: →  abierto: ↓ (90°)
     */
    .submenu-toggle-btn i {
        transition: transform 0.2s ease;
    }

    .submenu-toggle-btn[aria-expanded="true"] i {
        transform: rotate(90deg);
    }

    /* El <ul class="dropdown-menu"> ocupa toda la siguiente fila (flex-wrap) */
    .header-nav .nav-item.dropdown>.dropdown-menu,
    .header-nav .nav-item.dropdown-submenu>.dropdown-menu {
        flex-basis: 100%;
    }

    /* Dropdown dentro del collapse: posición estática (fluye en el documento) */
    .header-nav .navbar-collapse .dropdown-menu {
        position: static;
        float: none;
        box-shadow: none;
        border-top: none;
        border-left: 3px solid var(--secondary);
        background: rgba(0, 0, 0, 0.03);
        padding: 0.25rem 0;
        min-width: unset;
        margin-left: 0.5rem;
    }

    .header-nav .navbar-collapse .dropdown-item {
        color: var(--header-nav-color);
        font-size: 16px;
        padding: 8px 16px;
    }

    .header-nav .navbar-collapse .dropdown-item:hover {
        background-color: rgba(0, 0, 0, 0.06);
        color: var(--secondary);
    }

    /* Megamenú mobile — lista simple */
    .header-nav .nav-item.megamenu>.dropdown-menu {
        display: block;
        grid-template-columns: unset;
    }

    /* Topbar dentro del collapse (mobile) */
    .mobile-topbar-nav {
        padding: 0.5rem 0;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .mobile-topbar-phone {
        margin-bottom: 0.4rem;
    }

    .mobile-topbar-nav .mobile-topbar-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        flex-flow: column;
    }

    .mobile-topbar-nav .mobile-topbar-menu .nav-item>a {
        color: var(--header-nav-color);
        font-size: 16px;
        text-decoration: none;
        padding: 8px 16px;
        opacity: 0.75;
    }

    .mobile-topbar-nav .mobile-topbar-menu .nav-item>a:hover {
        opacity: 1;
    }

    /* Acciones mobile dentro del menú */
    .mobile-actions .header-search {
        max-width: 100%;
    }

    .mobile-actions .header-search .form-control {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    .mobile-actions .header-search .form-control::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .mobile-actions .header-cart {
        color: #fff;
    }
}


/* =============================================================================
   FOOTER — Variables del proyecto
============================================================================= */

:root {
    --footer-bg: var(--primary);
    --footer-bottom-bg: #122d5e;
    /* primario más oscuro */
    --footer-color: rgba(255, 255, 255, 0.75);
    --footer-title-color: #ffffff;
    --footer-link-color: rgba(255, 255, 255, 0.75);
    --footer-link-hover: #ffffff;
    --footer-logo-h: 100px;
}


/* =============================================================================
   FOOTER — Layout
============================================================================= */

/* - Firma Idento - */

.wrapper-idento {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.firma-idento {
    background: url(img/idento.svg);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 53px;
    margin: 0;
    transition: width 0.3s;
    margin-top: 0px;
}


.firma-idento:hover {
    width: 53px;
}

.site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-color);
}

/* ─── Fila 1 — Columnas ─── */
.footer-main {
    padding: 4rem 0 3rem;
}

/* Logo */
.footer-logo-link {
    display: inline-block;
    margin-bottom: 1.25rem;
    text-decoration: none;
}

.footer-logo-img {
    max-height: var(--footer-logo-h);
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    /* hace el logo blanco */
}

.footer-logo-link .site-name {
    color: var(--footer-title-color);
    font-size: 1.3rem;
    font-weight: 700;
}

/* Slogan */
.footer-slogan {
    color: var(--footer-color);
    font-size: 0.9rem;
    margin-top: 0;
    line-height: 1.6;
}

/* Títulos de columna */
.footer-nav-title {
    color: var(--footer-title-color);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid white;
}

/* Listas de menú */
.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: column;
    gap: 12px;
}



.footer-nav-list li a {
    color: var(--footer-link-color);
    text-decoration: none;
    font-size: 18px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-nav-list li a::before {
    content: '\f054';
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    font-size: 12px;
    color: white;
}

.footer-nav-list li a:hover {
    color: var(--footer-link-hover);
}

/* Redes sociales */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s;
}

.footer-social a:hover {
    background-color: var(--secondary);
}

/* Contacto */
.footer-address {
    color: var(--footer-color);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 8px;
    font-size: 18px;
    color: var(--footer-color);
}

.footer-contact-list li a {
    color: var(--footer-link-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.footer-contact-list li a:hover {
    color: var(--footer-link-hover);
}

.footer-contact-list li i {
    color: white;
    min-width: 16px;
    margin-top: 3px;
}

/* ─── Fila 2 — Copyright ─── */
.footer-bottom {
    background-color: var(--footer-bottom-bg);
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-copyright {
    color: var(--footer-color);
    font-size: 0.82rem;
    margin: 0;
}

/* Copyright alineado a la derecha en desktop */
@media (min-width: 768px) {
    .footer-bottom .ms-md-auto .footer-copyright {
        text-align: right;
    }
}

.footer-copyright a {
    color: var(--footer-link-color);
    text-decoration: none;
}

.footer-copyright a:hover {
    color: #fff;
}

/* Menú legal */
.footer-legal-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.footer-legal-nav li a {
    color: var(--footer-color);
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal-nav li a:hover {
    color: #fff;
}


/* =============================================================================
   CONTENT-CARD — Tarjetas de blog/archivo
============================================================================= */

.card {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.card-img-wrap {
    position: relative;
    overflow: hidden;
}

.card-img-wrap .card-img-top {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.card:hover .card-img-top {
    transform: scale(1.04);
}

/* Fecha sobre la imagen */
.card-img-wrap .date {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--primary);
    color: #fff;
    text-align: center;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    line-height: 1.1;
    font-size: 0.75rem;
}

.card-img-wrap .date .dia {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}

.card-img-wrap .date .mes {
    display: block;
    text-transform: uppercase;
    font-size: 0.7rem;
}

/* Body */
.card-body {
    padding: 1.25rem;
}

.card-categories {
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.card-cat-link {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary);
    text-decoration: none;
}

.card-cat-link:hover {
    text-decoration: underline;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.6rem;
}

.card-title a {
    color: var(--black-color);
    text-decoration: none;
    transition: color 0.2s;
}

.card-title a:hover {
    color: var(--primary);
}

.card-text {
    font-size: 0.9rem;
    color: var(--grey-color);
    line-height: 1.6;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: gap 0.2s, color 0.2s;
}

.read-more:hover {
    gap: 0.65rem;
    color: var(--primary-hover);
}


/* =============================================================================
   SINGLE — Entrada de blog
============================================================================= */

/* Cabecera */
.cabecera-page {
    background-color: var(--primary);
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 5rem 0;
    color: #fff;
}

.cabecera-page::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 84, 0.55);
    z-index: 0;
}

.cabecera-page .container {
    position: relative;
    z-index: 1;
}

.cabecera-page__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0.5rem 0 0;
}

/* Breadcrumbs */
.breadcrumbs,
.breadcrumbs * {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

.breadcrumbs a {
    color: #fff;
    text-decoration: underline;
}

/* Contenido del post */
.content-single {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

.single-thumbnail {
    position: relative;
    margin-bottom: 2rem;
}

.single-thumbnail img {
    width: 100%;
    aspect-ratio: 16/7;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.single-thumbnail .date {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: var(--primary);
    color: #fff;
    text-align: center;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    line-height: 1.1;
}

.single-thumbnail .date .dia {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.single-thumbnail .date .mes {
    display: block;
    text-transform: uppercase;
    font-size: 0.72rem;
}

/* Meta */
.single-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.single-author {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--grey-color);
}

.single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.single-tags .badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3em 0.7em;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.single-tags .badge:hover {
    background: var(--primary-hover);
}

/* Cuerpo */
.the-content {
    line-height: 1.85;
}

.the-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.the-content a {
    color: var(--primary);
}

.the-content a:hover {
    color: var(--primary-hover);
}

.the-content h2,
.the-content h3,
.the-content h4 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* Navegación siguiente/anterior */
.post-navigation {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
}

.post-navigation a:hover {
    color: var(--primary-hover);
}

/* Posts relacionados */
.related-posts {
    background-color: var(--grey-light-color);
    padding: 3.5rem 0;
    margin-top: 3rem;
}

.related-posts__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--primary);
}


/* =============================================================================
   ARCHIVE — Listado de entradas
============================================================================= */

.archive-header {
    background: var(--primary);
    color: #fff;
    padding: 3rem 0;
    margin-bottom: 3rem;
}

.archive-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.archive-description {
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
}

.archive-content {
    padding-bottom: 4rem;
}

.archive-pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--primary);
    background: #fff;
    border: 1px solid #dee2e6;
    transition: background-color 0.2s, color 0.2s;
    margin: 0 2px;
}

.archive-pagination .page-numbers.current,
.archive-pagination .page-numbers:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}


/* =============================================================================
   BLOQUES ACF
   Solo estilos visuales — la maquetación (container/row/col) la hace Bootstrap
   en el render.php de cada bloque.
============================================================================= */

/* ─── Bloque: Hero ─── */
.idento-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--primary);
    padding: 6rem 0;
    color: #fff;
    overflow: hidden;
}

.idento-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 15, 84, 0.85) 0%, rgba(10, 15, 84, 0.45) 100%);
    z-index: 0;
}

.idento-hero .container {
    position: relative;
    z-index: 1;
}

.idento-hero__pretitle {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin: 0 0 0.75rem;
}

.idento-hero__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1.25rem;
    color: #fff;
}

.idento-hero__text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 2rem;
    opacity: 0.95;
}

.idento-hero__btn {
    display: inline-block;
    background-color: var(--secondary);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.idento-hero__btn:hover {
    background-color: var(--secondary-hover);
    color: #fff;
    transform: translateY(-2px);
}

/* Varios botones en fila */
.idento-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Variante secundaria (borde) */
.idento-hero__btn--outline {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}
.idento-hero__btn--outline:hover {
    background-color: #fff;
    color: var(--primary);
}

@media (max-width: 767.98px) {
    .idento-hero {
        padding: 3.5rem 0;
    }
}


/* ─── Bloque: Valores ─── */
.idento-valores {
    background-color: var(--primary);
    color: #fff;
    padding: 1.5rem 0;
}

.idento-valores__placeholder {
    opacity: 0.7;
}

.idento-valor {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.idento-valor__icon {
    flex-shrink: 0;
    line-height: 1;
}
.idento-valor__icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.idento-valor__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.idento-valor__main {
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.idento-valor__secondary {
    font-size: 0.82rem;
    opacity: 0.8;
}


/* ─── Bloque: Categorías ─── */
.idento-categorias {
    padding: 4rem 0;
}

.idento-categorias__head {
    margin: 0 auto 2.5rem;
}

.idento-categorias__heading {
    color: var(--primary);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.idento-categorias__intro {
    color: var(--grey-color);
    margin: 0;
    line-height: 1.6;
}

.idento-categorias__placeholder {
    color: var(--grey-color);
}

.idento-categoria-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 220px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--primary);
    border: 2px solid var(--primary);
    text-decoration: none;
}

.idento-categoria-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 15, 84, 0.75) 0%, rgba(10, 15, 84, 0.15) 60%, rgba(10, 15, 84, 0) 100%);
    z-index: 0;
    transition: background 0.3s ease;
}

.idento-categoria-card__title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
    padding: 1.25rem;
}

a.idento-categoria-card:hover .idento-categoria-card__overlay {
    background: linear-gradient(to top, rgba(10, 15, 84, 0.85) 0%, rgba(10, 15, 84, 0.35) 70%, rgba(10, 15, 84, 0.1) 100%);
}