/* ============================================================
   ADELTE — Reconciliación visual tras actualizar a Total 6.7
   Este archivo se encola EL ÚLTIMO (ver functions.php) para ganar
   en la cascada a los CSS de Total 6.7, que con reglas nuevas
   (p.ej. .page-header...:not(.wpex-supports-mods) .page-header-title)
   pisan los estilos de marca del tema hijo.
   ============================================================ */

/* --- Menú principal: tipografía y altura como en producción ---
   Total 6.7 rompe el menú de cabecera de dos formas:
   (a) añade `.navbar-fixed-line-height .main-navigation-ul > .menu-item > a`
       con line-height/height = 50px (var --wpex-main-nav-height), MÁS específica
       que la regla de marca del hijo (.navbar-style-one .dropdown-menu>li>a{35px}),
       así que el enlace queda a 50px → menú más alto y descentrado en la barra.
   (b) NO emite el theme mod `menu_typography` (uppercase / peso 500 / 0.95em), así
       que los enlaces caen al defecto del body (Gotham 300, sin mayúsculas, 16px) y
       se ven "raros" (finos y en minúscula-real).
   Restauramos ambos con el ID #site-navigation para ganar en especificidad. */
#site-navigation .main-navigation-ul > .menu-item > a {
    height: 35px !important;
    line-height: 35px !important;
    font-weight: 500 !important;
    font-size: 0.95em !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

/* --- Botón del callout del footer ("Contacte ahora") ---
   Total 6.7 lo infla por dos vías: (a) el texto interno `.footer-callout-button-text`
   sale a 24px (line-height 39.6) en vez de heredar los ~19.7px del botón, como en
   producción; (b) el botón es flex dentro de una columna de ancho fijo (≈250px) y en
   mayúsculas el texto ENVOLVÍA a dos líneas. Resultado: ≈118px de alto vs ≈67px en
   prod. Normalizamos el tamaño del texto y evitamos el salto de línea. */
.footer-callout-button-link {
    white-space: nowrap !important;
}
.footer-callout-button-text {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* --- Cabecera de página: título en BOLD y a su tamaño original ---
   Total 6.7 fuerza .page-header-title a font-weight:400 y a un tamaño menor
   (~51.7px). El original lo mostraba en bold (Gotham 700) y a ~67.7px. */
.page-header.background-image-page-header .page-header-title,
.page-header.background-image-page-header .page-header-title span {
    font-weight: 700 !important;
}
/* Tamaño del título como en producción (fijo 67.7px en desktop). En móvil se
   deja el tamaño responsive de Total para que no desborde.
   NOTA: se excluyen las páginas de PROYECTO (portfolio single), cuyo título en
   producción va a 35.7px (ver bloque específico más abajo). */
@media (min-width: 991px) {
    body:not(.single-portfolio) .page-header.background-image-page-header .page-header-title,
    body:not(.single-portfolio) .page-header.background-image-page-header .page-header-title span {
        font-size: 67.696px !important;
        line-height: 1.1 !important;
    }
}

/* --- Cabecera de páginas de PROYECTO (portfolio single) ---
   En producción (Total 4.x) el título y la localización iban alineados a la
   IZQUIERDA y a tamaño normal (35.7px, el que da Total 6.7 por defecto). En 6.7
   la cabecera los CENTRA, y encima la regla global de arriba inflaba el <span>
   del título a 67.7px, dejándolo enorme y a dos líneas, descuadrado respecto a la
   localización (que sí quedaba a la izquierda). Restauramos izquierda + tamaño. */
body.single-portfolio .page-header.background-image-page-header .page-header-inner,
body.single-portfolio .page-header.background-image-page-header .page-header-title,
body.single-portfolio .page-header.background-image-page-header .page-header-title span,
body.single-portfolio .page-header.background-image-page-header .localizacion {
    text-align: left !important;
}

/* --- Subtítulo blanco bajo el título ---
   En 6.7 usa la clase wpex-text-3xl (demasiado grande). Restaurar tamaño. */
.page-header.background-image-page-header .page-subheading {
    font-size: 1.4em !important;
    font-weight: 400 !important;
}

/* --- Banners de cabecera incrustados en el contenido (bloques Raw HTML) ---
   Algunas páginas (p.ej. la ES de Servicios Globales: "Servicios Globales en
   España") tienen una cabecera-banner hardcodeada dentro de un bloque HTML del
   contenido, con el markup de tabla de Total 4.x (.page-header-table /
   .page-header-table-cell). En 6.7 esas clases no llevan estilos, así que el
   título/subtítulo/breadcrumb salían alineados a la izquierda (roto). Restauramos
   el centrado tipo cabecera que tenían en 4.x. */
.page-header-table {
    display: table;
    width: 100%;
    height: 100%;
}
.page-header-table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
/* Ese banner hardcodeado incluye además un SVG de corte diagonal (.svg.bottom)
   que en 4.x iba posicionado al fondo de la cabecera; en 6.7, sin esos estilos,
   queda suelto como una franja blanca en medio de la imagen. La cabecera REAL lo
   tiene comentado (no lo usa), así que solo molesta en estos banners. Lo ocultamos. */
.page-header .svg.bottom {
    display: none !important;
}

/* --- Cabecera de artículo/página: título por ENCIMA del gradiente ---
   El bloque del título (.page-header-inner) trae z-index:2 pero position:static,
   así que el z-index NO aplica y el `.overlay` con el gradiente (z-index:1,
   absolute) queda por delante, tapando el título (se lee apagado/detrás). Lo
   posicionamos para que su z-index surta efecto y el título quede legible encima. */
.page-header.background-image-page-header .page-header-inner {
    position: relative;
    z-index: 2;
}

/* --- Encabezados de icon-box: distinguir SECCIÓN vs FEATURE/PRODUCTO ---
   Total 6.7 ignora el `heading_size` (em/px) de los icon-box. Resulta que:
   · Los títulos de SECCIÓN (sin heading_size) reciben la clase `wpex-text-md`.
   · Los de FEATURE/PRODUCTO (tenían heading_size, ahora ignorado) NO llevan
     clase de tamaño.
   Así que damos a cada grupo el tamaño que tenía en el original. */

/* Títulos de sección (ADELTE is a leading…, Products & Services…, etc.): prominentes */
.vcex-icon-box .vcex-icon-box-heading.wpex-text-md {
    font-size: 1.55em !important;
    line-height: 1.3 !important;
}

/* (Antes había aquí una regla que forzaba a 20px todos los icon-box-heading sin
   clase de tamaño; pisaba el heading_size inline de cada elemento — features Y
   CTAs por igual. Eliminada: ahora cada título usa su heading_size original.) */

/* Títulos vcex_heading (nombres de producto, "Most common…", specs): en el
   original eran 20px (algunos 22px). Total 6.7 los mapeó a wpex-text-2xl (24px),
   agrandándolos. Los devolvemos a 20px para que coincidan con la web actual. */
.vcex-heading.wpex-text-2xl {
    font-size: 20px !important;
}

/* --- Bandas Seaports/Airports del home: títulos grandes (como el original) ---
   La regla del tema (.diagonal-derecha h2 {45px}) no casa con la clase real
   (diagonal-derecha-mobile), así que el título salía pequeño. Lo forzamos. */
body.home #airseaports .vcex-icon-box-heading,
body.home #airseaports .vcex-heading,
body.home #airseaports h2 {
    font-size: 60px !important;
    line-height: 1.1 !important;
}

/* --- Bandas Seaports/Airports: imágenes a sangre completa (sin margen lateral) --- */
body.home #airseaports.wpex-vc-full-width-section,
body.home #airseaports .vc_row.airports,
body.home #airseaports .vc_row.seaports {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.home #airseaports .vc_row.airports,
body.home #airseaports .vc_row.seaports {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* --- Banda SEAPORTS (home, columna .diagonal-derecha): mostrar el gradiente azul ---
   El gradiente vive en `.diagonal-derecha::before` (z-index:-1) y es idéntico al de
   producción. En el original la columna llevaba `z-index:2`, lo que eleva su contexto
   de apilado por encima de la imagen de fondo de la fila y deja ver el gradiente.
   Total 6.7 perdió ese z-index, así que el ::before quedaba DETRÁS de la foto y el
   gradiente no se veía. Lo reponemos. (Airports usa el gradiente en el fondo del
   propio elemento, por eso allí sí se ve sin necesidad de z-index.) */
@media (min-width: 1024px) {
    body.home #airseaports .diagonal-derecha {
        z-index: 2 !important;
    }
    /* El contenido de SEAPORTS trae un <p>&nbsp;</p> sobrante que en Total 6.7 abre
       un hueco mayor que el original entre el texto y el botón (50px vs 20px). Lo
       colapsamos para dejar el espacio compacto de Airports/producción. */
    /* OJO: usar `p + p` (2º párrafo en adelante), NO `p:last-child`. En EN el
       contenido es <p>texto</p><p>&nbsp;</p> y queremos colapsar solo el vacío;
       en ES/FR solo hay UN <p> (el texto real) y `p:last-child` lo ocultaba por
       error. `p + p` no casa cuando hay un único párrafo, así que ES/FR se respetan. */
    body.home #airseaports .diagonal-derecha .vcex-icon-box-content p + p {
        display: none !important;
    }
    /* El botón de SEAPORTS lleva margin-top:20px propio que, sumado al margen de
       30px de su contenedor, abría 50px de hueco (vs 30 en Airports). Lo quitamos
       para igualar el espaciado compacto de Airports/producción. */
    body.home #airseaports .diagonal-derecha .vcex-button {
        margin-top: 0 !important;
    }
    /* Alinear título, subtítulo y botón al mismo borde izquierdo.
       El icon-box "two" (sin icono) indentaba el texto; lo quitamos para que
       título y subtítulo queden al borde, igual que el botón. */
    body.home #airseaports .diagonal-derecha,
    body.home #airseaports .diagonal-izquierda {
        text-align: left !important;
    }
    /* La banda derecha ("Seaports") flota su icon-box a la derecha (float:right),
       lo que dejaba el TÍTULO 33px a la derecha del BOTÓN (que va al borde
       natural de la columna). Quitamos el float para que título y botón compartan
       el mismo borde izquierdo. La banda izquierda ya estaba alineada. */
    body.home #airseaports .vcex-icon-box,
    body.home #airseaports .vcex-icon-box-two {
        display: block !important;
        float: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    body.home #airseaports .vcex-button {
        margin-left: 0 !important;
        float: none !important;
    }
}

/* --- Tarjetas de proyecto (vcex_portfolio_grid): restaurar el gradiente ---
   El título es blanco y va sobre la imagen; el render 4.x ponía un gradiente
   de marca para legibilidad que TTC 2.7 ya no aplica. Lo reponemos. */
.vcex-portfolio-grid .portfolio-entry-media {
    position: relative;
    overflow: hidden;
}
.vcex-portfolio-grid .portfolio-entry-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: linear-gradient(to top, rgba(48,86,150,0.92) 0%, rgba(48,86,150,0.35) 38%, rgba(48,86,150,0) 65%);
    pointer-events: none;
    z-index: 1;
}
.vcex-portfolio-grid .portfolio-entry-details {
    z-index: 2;
}

/* Hover: zoom de la fotografía (como producción, que escala el media a ~1.14 en
   0.9s). La media ya lleva overflow:hidden, así que escalamos la imagen y el zoom
   queda recortado al marco de la tarjeta; el título (details) no escala. */
.portfolio-entry .portfolio-entry-img {
    transition: transform 0.9s ease !important;
    transform-origin: center center;
}
.portfolio-entry:hover .portfolio-entry-img {
    transform: scale(1.14357) !important;
}

/* --- Banda azul de servicios (Adapted/24·7/Experienced/Spare Parts): centrar
   verticalmente el contenido en la banda ---
   La sección (id="technology") tiene ~50px de padding-bottom pero una regla
   `#technology{padding-top:0!important}` la deja pegada ARRIBA con un hueco abajo.
   Hay que ganar esa regla de ID con otra de ID, así que usamos #technology para
   reponer el padding-top y dejar el bloque centrado en el espacio azul. */
#technology {
    padding-top: 50px !important;
}

/* --- Footer: botones sociales blancos (como el original) ---
   En el original son cuadrados BLANCOS con el icono oscuro; el estilo "flat"
   de Total 6.7 los deja oscuros. Restauramos fondo blanco + icono oscuro. */
#footer .wpex-fa-social-widget .wpex-social-btn {
    background-color: #fff !important;
    color: #2b2b2b !important;
}
#footer .wpex-fa-social-widget .wpex-social-btn:hover {
    background-color: #3d6abd !important;
    color: #fff !important;
}

/* --- Icon-box: ocultar iconos FontAwesome migrados que el original no mostraba ---
   En Total 4.x estos icon-box de tipo "icono" (no imagen) no renderizaban glyph
   alguno (ni siquiera el contenedor del símbolo). Al migrar a FontAwesome 6,
   Total 6.7 los pinta como SVG, añadiendo ~56px sobre el título y descentrando
   el contenido en las bandas azules (p.ej. "HIGH ENERGY EFFICIENCY" en PCA,
   "THE FUTURE IS HERE" en PBB). Comprobado: producción no muestra NINGÚN icono
   FA en icon-boxes, solo imágenes. Ocultamos solo los de tipo --icon; las
   imágenes (--image, p.ej. co2.png) se mantienen intactas. */
.vcex-icon-box-symbol--icon {
    display: none !important;
}

/* --- Iconos de viñeta verdes (vcex_bullets, p.ej. QHSE): círculo redondo ---
   El original fijaba el wrapper del icono a 40x40 (círculo perfecto). Total 6.7
   dejó la ANCHURA en auto (la altura sigue siendo 40), así que el círculo se
   deformaba en óvalo, sobre todo junto a texto de 2 líneas. Restauramos el
   tamaño cuadrado fijo y el centrado del glyph. */
.vcex-bullets .vcex-bullets-icon-wrap,
.vcex-bullets .vcex-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* --- Tarjetas de producto (vcex_image_banner): gradiente + hover azul ---
   El original (4.x) tenía DOS capas sobre la imagen:
     · <div class="overlay">  → gradiente azul diagonal SIEMPRE visible (da el
       look de marca y legibilidad al título en reposo).
     · <span class="vcex-ib-overlay" style="background:#466bb7"> → azul sólido que
       aparece al hacer hover (clase vcex-soh).
   Total 6.7 perdió la capa del gradiente y dejó solo un overlay negro fijo al 30%.
   Restauramos AMBAS capas con los colores/gradiente exactos de producción. */

/* Capa 1 — gradiente azul diagonal en REPOSO (equivale al <div class="overlay">). */
.vcex-image-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(30deg, rgb(48, 86, 150) 0%, rgba(48, 86, 150, 0) 75%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* Capa 2 — overlay azul sólido que aparece (fade) en HOVER (equivale a vcex-soh). */
.vcex-image-banner .vcex-ib-overlay-bg {
    background-color: #466bb7 !important;
    opacity: 0 !important;
    transition: opacity .5s ease !important;
}
.vcex-image-banner:hover .vcex-ib-overlay-bg,
.vcex-image-banner:focus-within .vcex-ib-overlay-bg {
    opacity: 1 !important;
}

/* Apilado: imagen < gradiente(::before=1) < overlay hover(2) < contenido(3),
   para que el contenido quede legible sobre el azul y el azul tape el gradiente. */
.vcex-image-banner .vcex-ib-overlay {
    z-index: 2 !important;
}
.vcex-image-banner .vcex-ib-content-wrap {
    position: relative;
    z-index: 3 !important;
}

/* Al hacer hover en la tarjeta, ocultar el título DUPLICADO que va debajo
   (el .vcex-heading hermano): en hover ya se muestra el título dentro del overlay
   azul, así que el de abajo sobra. Son hermanos en el mismo .wpb_wrapper, por eso
   funciona el combinador `~`. */
.vcex-image-banner:hover ~ .vcex-heading,
.vcex-image-banner:focus-within ~ .vcex-heading {
    opacity: 0;
    transition: opacity .3s ease;
}

/* --- Viñetas sobrantes (menú lateral y contenido de lightbox) ---
   Total 4.x quitaba globalmente las viñetas de <ul>; Total 6.7 ya no, así que
   aparecían discos en el menú lateral y en las listas de los lightbox de
   producto. Las quitamos SOLO en esos componentes (sin tocar el contenido
   editorial, que sí debe llevar viñetas). */
#iw-side-menu ul,
#iw-side-menu ol {
    list-style: none !important;
    margin: 0;
    padding: 0;
}
#iw-side-menu li {
    list-style: none !important;
}
.iw-ilightbox-content-list,
.iw-ilightbox-content-info ul,
.system-component ul {
    list-style: none !important;
    padding-left: 0 !important;
}
.iw-ilightbox-content-list li,
.iw-ilightbox-content-info ul li {
    list-style: none !important;
}

/* --- Lightbox de componentes: quitar la sombra/marco oscuro del holder ---
   El skin 'dark' de iLightBox pinta en `.ilightbox-holder`: (a) un
   `box-shadow: 0 0 15px rgba(0,0,0,.8)` (halo), y (b) un `padding:5px` sobre
   `background:#000`, que deja un MARCO NEGRO de 5px alrededor del panel del
   componente (el contenido queda incrustado 5px hacia dentro). Eso es la "sombra"
   que se veía detrás. Producción no lo tiene → quitamos halo, fondo y padding
   para dejar el panel a ras, limpio sobre el overlay. */
.ilightbox-holder.dark {
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* --- Lightbox de componentes: centrado vertical estable ---
   iLightBox posiciona el holder (position:fixed) con un `top` fijo a ~10% de la
   altura de ventana y una altura fija de 660px (del data-options de los pines).
   En ventanas más bajas que ~730px el holder se sale por abajo, y como el `top`
   se calcula al abrir (a veces antes de que cargue la imagen) hay componentes —
   típicamente "Estructuras", que tiene foto grande + lista larga — que aparecen
   descuadrados hacia arriba de forma intermitente. Forzamos centrado vertical
   real y limitamos la altura al viewport para que SIEMPRE quepa y quede centrado.
   El centrado horizontal lo hace iLightBox con `left` (no con transform), así que
   sobreescribir transform no lo afecta. Excluimos los holders clon prev/next que
   iLightBox mantiene fuera de pantalla. */
.ilightbox-holder:not(.ilightbox-prev):not(.ilightbox-next) {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    max-height: calc(100vh - 30px) !important;
}