/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* Add your custom styles here */
/* ========================================================================== */
/* FLUID SCALING SYSTEM - NATIVE ELEMENTOR INTEGRATION */
/* ========================================================================== */

:root {
    /* 1. Base de diseño */
    --size-unit: 22;
    --size-container-ideal: 1440;
    --size-container-min: 992px;
    --size-container-max: 1920px;

    /* El ancho de pantalla actual */
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));

    /* La variable maestra de escalado (define cuánto mide 1rem/1em) */
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

    /* Espaciados */
    --osmo-gap: 2em;
    --osmo-container-padding: 2em;
    --osmo-container-padding-block: 5em;
}

.container {
    max-width: var(--size-container);
    width: 100%;
    margin-inline: auto;
    position: relative;
}

/* Custom Easing */
:root {
    --osmo-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Se aplica a la raíz */
html {
    font-size: var(--size-font) !important;
    overflow-x: clip;
}

body {
    overflow-x: clip;
    transition: unset !important;

    &.is-loading {
        overflow: hidden !important;
        height: 100vh !important;
    }
}

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: #E9E9E9;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--e-global-color-accent);
    border-radius: 100vmax;
    border: 3px solid transparent;
}

/* ========================================================================== */
/* BREAKPOINTS (Flujo de escalado ininterrumpido) */
/* ========================================================================== */

/* Tablet */
@media (width<=991px) {
    :root {
        --size-container-ideal: 834;
        --size-container-min: 768px;
        --size-container-max: 991px;
        --osmo-container-padding: 1.5em;
    }
}

/* Móvil */
@media (width<=767px) {
    :root {
        --size-container-ideal: 390;
        --size-container-min: 320px;
        --size-container-max: 767px;
        --osmo-container-padding: 1em;
        --osmo-container-padding-block: 3em;
        --size-unit: 16;
    }
}

/* ========================================================================== */
/* ELEMENTOR CONTAINERS (Fluid Integration) */
/* ========================================================================== */

/* 1. Container padding */
body .e-con.e-parent {
    padding-left: var(--osmo-container-padding) !important;
    padding-right: var(--osmo-container-padding) !important;
    padding-block: var(--osmo-container-padding-block);
}

/* 2. Forzamos a que la caja interior (boxed) obedezca la medida fluida */
body .e-con-boxed>.e-con-inner {
    max-width: var(--size-container) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ========================================================================== */
/* HEADINGS FLUIDOS                                                            */
/* Especificidad intencionalmente BAJA (0,1,1) para que los tamaños definidos */
/* en Elementor (0,3-4,0) siempre tengan más peso. El sistema fluido actúa   */
/* solo como fallback cuando Elementor no define un tamaño explícito.         */
/* ========================================================================== */


h1.elementor-heading-title {
    font-size: 4em;
    /*4.985*/
    letter-spacing: -0.0448em;
    font-weight: 400;
    text-wrap: balance;

    @media (width <=768px) {
        font-size: 2.6em;
    }
}

h2.elementor-heading-title {
    font-size: 2.976em;
    letter-spacing: -0.0675em;
    font-weight: 400;
    text-wrap: balance;

    @media (width<=768px) {
        font-size: 1.85em;
    }
}

html[lang="ar"] h2.elementor-heading-title,
body.rtl h2.elementor-heading-title {
    max-width: 100%;
}


h3.elementor-heading-title {
    font-size: 1.711em;
    letter-spacing: -0.0326em;
    font-weight: 400;
}

h4.elementor-heading-title {
    font-size: 0.744em;
    letter-spacing: -0.035em;
    font-weight: 400;
}

h5.elementor-heading-title {
    font-size: 0.595em;
    letter-spacing: -0.0156em;
    font-weight: 400;
    text-transform: uppercase;
}

/* Párrafos: ritmo vertical basado en la unidad lh */
.elementor-text-editor,
.elementor-widget-text-editor p {
    font-size: 1em;
    line-height: 1.3;
    letter-spacing: -0.035em;
    font-weight: 300;
    font-family: "Gill Sans", sans-serif;
    text-wrap: pretty;
}

.elementor-widget-text-editor ul,
.elementor-widget-text-editor ul li {
    font-size: 0.9em;
    font-family: "Gill Sans", sans-serif;
    font-weight: 400 !important;
}


.elementor-widget-text-editor ul {
    margin-bottom: 1rem;
}

/* Clase de utilidad para cuerpo de texto grande */
.body-large {
    font-size: 1.19em;
    line-height: 1.1875;
    letter-spacing: -0.0156em;
    font-weight: 300;
}

/* ==========================================================================
   Preloader Styles
   ========================================================================== */

body.is-loading {
    overflow: hidden !important;
    height: 100vh !important;
}

#wpfooter {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 20px;
    color: #50575e;
    display: flex;
    flex-direction: column;
    place-content: start;

    & p {
        font-size: 16px;
        margin: 0;
        line-height: 1.55;
        display: flex;
        place-items: center;
        place-content: center;

        & img {
            max-width: 120px;
        }
    }
}


/* Fonts settings */
@font-face {
    font-family: 'GillSansCondC';
    src: url('/wp-content/uploads/2026/05/GillSansCondC-Bold.eot');
    src: url('/wp-content/uploads/2026/05/GillSansCondC-Bold.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/GillSansCondC-Bold.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/GillSansCondC-Bold.woff') format('woff'),
        url('/wp-content/uploads/2026/05/GillSansCondC-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GillSansCondBlackC';
    src: url('/wp-content/uploads/2026/05/GillSansCondBlackC.eot');
    src: url('/wp-content/uploads/2026/05/GillSansCondBlackC.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/GillSansCondBlackC.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/GillSansCondBlackC.woff') format('woff'),
        url('/wp-content/uploads/2026/05/GillSansCondBlackC.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GillSansCondC';
    src: url('/wp-content/uploads/2026/05/GillSansCondC.eot');
    src: url('/wp-content/uploads/2026/05/GillSansCondC.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/GillSansCondC.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/GillSansCondC.woff') format('woff'),
        url('/wp-content/uploads/2026/05/GillSansCondC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GillSansC';
    src: url('/wp-content/uploads/2026/05/GillSansC-Italic.eot');
    src: url('/wp-content/uploads/2026/05/GillSansC-Italic.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/GillSansC-Italic.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/GillSansC-Italic.woff') format('woff'),
        url('/wp-content/uploads/2026/05/GillSansC-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GillSansC';
    src: url('/wp-content/uploads/2026/05/GillSansC-BoldItalic.eot');
    src: url('/wp-content/uploads/2026/05/GillSansC-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/GillSansC-BoldItalic.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/GillSansC-BoldItalic.woff') format('woff'),
        url('/wp-content/uploads/2026/05/GillSansC-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GillSansC';
    src: url('/wp-content/uploads/2026/05/GillSansC.eot');
    src: url('/wp-content/uploads/2026/05/GillSansC.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/GillSansC.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/GillSansC.woff') format('woff'),
        url('/wp-content/uploads/2026/05/GillSansC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GillSansExtraBoldC';
    src: url('/wp-content/uploads/2026/05/GillSansExtraBoldC.eot');
    src: url('/wp-content/uploads/2026/05/GillSansExtraBoldC.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/GillSansExtraBoldC.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/GillSansExtraBoldC.woff') format('woff'),
        url('/wp-content/uploads/2026/05/GillSansExtraBoldC.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GillSansC';
    src: url('/wp-content/uploads/2026/05/GillSansC-Bold.eot');
    src: url('/wp-content/uploads/2026/05/GillSansC-Bold.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/GillSansC-Bold.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/GillSansC-Bold.woff') format('woff'),
        url('/wp-content/uploads/2026/05/GillSansC-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GillSansLightC';
    src: url('/wp-content/uploads/2026/05/GillSansLightC.eot');
    src: url('/wp-content/uploads/2026/05/GillSansLightC.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/GillSansLightC.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/GillSansLightC.woff') format('woff'),
        url('/wp-content/uploads/2026/05/GillSansLightC.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GillSansLightC';
    src: url('/wp-content/uploads/2026/05/GillSansLightC-Italic.eot');
    src: url('/wp-content/uploads/2026/05/GillSansLightC-Italic.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/GillSansLightC-Italic.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/GillSansLightC-Italic.woff') format('woff'),
        url('/wp-content/uploads/2026/05/GillSansLightC-Italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Adler';
    src: url('/wp-content/uploads/2026/05/Adler.eot');
    src: url('/wp-content/uploads/2026/05/Adler.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/uploads/2026/05/Adler.woff2') format('woff2'),
        url('/wp-content/uploads/2026/05/Adler.woff') format('woff'),
        url('/wp-content/uploads/2026/05/Adler.ttf') format('truetype'),
        url('/wp-content/uploads/2026/05/Adler.svg#Adler') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



#content {
    overflow-x: clip;
}

body {

    & h1.elementor-heading-title,
    & h3.e-n-accordion-item-title-text,
    & h2.elementor-heading-title,
    & h3.elementor-heading-title,
    & h4.elementor-heading-title,
    & h5.elementor-heading-title,
    & h6.elementor-heading-title {
        font-weight: 400;
        line-height: 1.2em;
        font-family: "Gill Sans", sans-serif !important;

    }
}

.text-xxl .elementor-heading-title {
    line-height: 1.2;
    font-size: 6.5em;

    @media (width <=768px) {
        font-size: 3.35em;
    }
}

.elementor-popup-modal .dialog-widget-content {
    background-color: unset;
}

/* Text Reveal Animation (Osmo Style) */
.elementor-heading-title .line,
h1 .line,
h2 .line,
h3 .line,
h4 .line,
h5 .line,
h6 .line {
    overflow: hidden;
    vertical-align: bottom;
}

.elementor-heading-title .letter,
h1 .letter,
h2 .letter,
h3 .letter,
h4 .letter,
h5 .letter,
h6 .letter {
    display: inline-block;
    will-change: transform;
}

/* Fonts settings. End */

/* Buttons settings */
:root {
    --btn-hover-color-1: #FFDA44;
    /* Primer color (amarillo cálido) */
    --btn-hover-color-2: #686868;
    /* Segundo color (azul claro cian) */
    --btn-hover-color-3: #00C7C0;
    /* Tercer color (teal oscuro final) */
}

.elementor-button {
    border-radius: 18px;
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    font-size: 1em;
    font-weight: 600 !important;
    letter-spacing: -0.0318em;
    font-family: "Gill Sans", sans-serif !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: none !important;
}

/* Mantener el fondo transparente en hover y desactivar transiciones nativas */
.elementor-button:hover {
    background: transparent !important;
    background-color: transparent !important;
}

/* Neutralizar cualquier pseudo-elemento que Elementor añada al hacer hover */
.elementor-button::before,
.elementor-button::after,
.elementor-button:hover::before,
.elementor-button:hover::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
}

/* Mantener el texto original por encima de las capas de fondo */
.elementor-button .elementor-button-content-wrapper {
    position: relative;
    z-index: 3 !important;
    place-items: center;
}

/* Contenedor de capas de color */
.btn-hover-layers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2 !important;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    display: block !important;
}

/* Capa de color de fondo (común) */
.bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: none !important;
    display: block !important;
}

/* Las capas que se animan parten desde abajo (100%) */
.bg-layer:not(.layer-default) {
    transform: translateY(100%);
}

/* Capa por defecto (fondo inicial del botón) */
.elementor-button .layer-default {
    background-color: #00C7C0;
    z-index: 1;
}

/* Botones tipo "Info" actúan como enlaces transparentes (sin fondo inicial) */
.elementor-button-info .elementor-button {
    background-color: transparent !important;
    color: inherit !important;
}

.elementor-button-info .elementor-button .layer-default {
    background-color: transparent !important;
}

.elementor-button-info .elementor-button .elementor-button-text {
    color: inherit !important;
}

.layer-1 {
    background-color: var(--btn-hover-color-1);
    z-index: 2;
}

.layer-2 {
    background-color: var(--btn-hover-color-2);
    z-index: 3;
}

.layer-3 {
    background-color: var(--btn-hover-color-3);
    z-index: 4;
}

.elementor-button-info .elementor-button-text {
    font-weight: 400;
}

/* Botones Success: Color inicial y final oscuros */
.elementor-button-success .elementor-button {
    background-color: #0D0D0D !important;
}

.elementor-button-success .elementor-button .layer-default,
.elementor-button-success .elementor-button .layer-3 {
    background-color: #0D0D0D !important;
}

/* Botones Warning: Color inicial y final #E9E9E9 */

.elementor-button-warning {
    max-height: 72px;

    & .elementor-button {
        background-color: #E9E9E9 !important;
        min-width: 100%;
        padding: 0.60888rem;

        & .elementor-button-text {
            font-size: 0.825em;
        }

        & .elementor-button-content-wrapper {
            place-content: space-between;
        }
    }
}


.elementor-button-warning .elementor-button .layer-default,
.elementor-button-warning .elementor-button .layer-3 {
    background-color: #E9E9E9 !important;
}

.elementor-button-icon svg {
    width: 100%;
    height: 100%;
}

/* Buttons settings. End*/

/* Links settings */
@property --hover-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {


    p a,
    .elementor-widget-text-editor a,
    .elementor-widget-heading a,
    .elementor-nav-menu a,
    .menu-item a,
    .elementor-item,
    .animated-link,
    .sahco-cat-badge,
    .sahco-categories-list-container a,
    .elementor-post__title a {
        color: inherit !important;
        transition: none !important;
        --hover-y: 0%;

        background-image: linear-gradient(to top,
                var(--btn-hover-color-3) 24.9%,
                var(--btn-hover-color-2) 25.1%,
                var(--btn-hover-color-2) 49.9%,
                var(--btn-hover-color-1) 50.1%,
                var(--btn-hover-color-1) 74.9%,
                var(--base-color, #686868) 75.1%);
        background-size: 100% 400%;
        background-position: 0% var(--hover-y);
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    .elementor-icon-list-item a .elementor-icon-list-text {
        transition: none !important;
        --hover-y: 0%;

        background-image: linear-gradient(to top,
                var(--btn-hover-color-3) 24.9%,
                var(--btn-hover-color-2) 25.1%,
                var(--btn-hover-color-2) 49.9%,
                var(--btn-hover-color-1) 50.1%,
                var(--btn-hover-color-1) 74.9%,
                var(--base-color, #686868) 75.1%);
        background-size: 100% 400%;
        background-position: 0% var(--hover-y);
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    .elementor-icon-list-item a {
        color: inherit !important;
    }
}

.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus {
    color: inherit;
    fill: inherit;
}

/* Links settings. End */

/* Color settings */

/* Color settings. End*/

/* Lennis settings */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* Lennis settings. End */

/* Utility for blocking scroll when popup is open */
body.is-popup-open {
    overflow: hidden !important;
}

/* Header settings*/
.language-switcher .sub-menu.elementor-nav-menu--dropdown {
    left: -35px;
    position: absolute;
}

html[lang="ar"] .language-switcher .sub-menu.elementor-nav-menu--dropdown,
body.rtl .language-switcher .sub-menu.elementor-nav-menu--dropdown {
    position: absolute;
    right: -55px !important;
    left: auto !important;
}

body .floating-nav {
    position: fixed;
    top: 76px;
    z-index: 100;
    height: fit-content;
    will-change: transform;
    padding-block: unset !important;

    &>.e-con-inner {
        padding-left: var(--osmo-container-padding);
        padding-right: var(--osmo-container-padding);
    }

    .logo,
    .elementor-button {
        box-shadow: 0 10px 7.7px 4px rgba(0, 0, 0, 0.04) !important;
    }

    .logo {
        border-radius: 18px;

        & img {
            width: 60px;
            height: 60px;
            max-width: 60px;
            aspect-ratio: 1 / 1;
            object-fit: contain;
        }
    }
}

.page-id-1364 .floating-nav {
    top: 24px;
}


.menu {
    background-color: #fff;
    border-radius: 18px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    box-shadow: 0 10px 7.7px 4px rgba(0, 0, 0, 0.04) !important;
}

/* full width menu (Mega Menu Dropdown) */

/* full width menu (Mega Menu Dropdown) Toggle */
html body .menu .elementor-menu-toggle {
    width: 100%;
    max-width: 160px;
    height: 70px;
    margin: 0;
    padding: 0;
    background-color: unset;
    border: none;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    @media (width<=768px) {
        max-width: 120px;
    }

}


html body .menu .elementor-menu-toggle span.elementor-menu-toggle__icon--open {
    width: 100%;
    height: 100%;
    display: block;
}

html body .menu .elementor-menu-toggle svg {
    width: 100%;
    height: 100%;
    display: block;
}

html body .menu .elementor-menu-toggle.elementor-active {
    width: 160px;
    height: 70px;
}

html body .menu .elementor-menu-toggle .elementor-menu-toggle__icon--close {
    width: 28px;
    height: 28px;
    fill: #111827;
    background: #FFFFFF;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: none;
}

/* Contenedor principal de la tarjeta blanca del Mega Menú */
html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none;
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important;
    width: calc(100% - 8em);
    max-width: 1494px;
    background-color: #FFFFFF;
    border-radius: 42px;
    padding: 34px 64px;
    box-shadow: 0 30px 60px rgba(17, 24, 39, 0.15);
    box-sizing: border-box;
    z-index: 100;
    transition: none !important;
    max-height: unset !important;
}


/* Logo superior centrado */
html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .mega-menu-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1.25rem;
}

html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .mega-menu-logo img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

/* Distribución en 5 columnas de las categorías principales */
html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;

    & .elementor-nav-menu>li a {
        font-size: 16px;
    }
}

/* Ocultamos las flechas sub-arrows de Elementor */
html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu .sub-arrow {
    display: none;
}

/* Título de la columna (Categoría principal) */
html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu>li {
    list-style: none;
}

html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu>li>a {
    font-family: "Gill Sans", sans-serif;
    font-size: 16px;
    /* 18px a base 22px */
    font-weight: 400;
    text-transform: uppercase;
    color: #111827;
    display: block;
    margin-bottom: 0;
    max-width: fit-content;
    /* Desactiva click en los títulos de columna */
}

/* Submenús (Lista de items en la columna) */
html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;

    & .elementor-nav-menu--dropdown {
        gap: 0.25rem;
    }
}

html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu .sub-menu li {
    list-style: none;
}

html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu .sub-menu a.elementor-sub-item {
    font-family: "Gill Sans", sans-serif;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 300;
    color: #4B5563;
    text-decoration: none;
    padding-block: 0;
    cursor: pointer !important;
    transition: color 0.25s ease;
}

/* En ESCRITORIO (ancho > 991px): Ocultar SIEMPRE .mobile-footer / .mobile-content en el menú */
@media (width > 991px) {

    html body .mobile-footer,
    html body .mobile-content,
    html body .floating-nav .mobile-footer,
    html body .floating-nav .mobile-content,
    html body .menu .mobile-footer,
    html body .menu .mobile-content,
    html body .elementor-nav-menu--dropdown .mobile-footer,
    html body .elementor-nav-menu--dropdown .mobile-content,
    html body .mega-menu-fullscreen-state .mobile-footer,
    html body .mega-menu-fullscreen-state .mobile-content {
        display: none !important;
    }
}

/* En MÓVIL Y TABLET (ancho <= 991px): Mostrar acordeón SOLO cuando el menú esté abierto */
@media (width <=991px) {

    /* Ocultar el grid de 6 columnas del menú de escritorio */
    html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu {
        display: none !important;
    }

    /* Ocultar acordeón por defecto cuando el menú está cerrado */
    html body .floating-nav .mobile-footer,
    html body .floating-nav .mobile-content,
    html body .menu .mobile-footer,
    html body .menu .mobile-content,
    html body .elementor-nav-menu--dropdown .mobile-footer,
    html body .elementor-nav-menu--dropdown .mobile-content {
        display: none !important;
    }

    /* Modal emergente del Mega Menú en móvil */
    html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        top: 20px !important;
        left: 50% !important;
        width: calc(100% - 2.5rem) !important;
        max-width: 440px !important;
        margin-inline: auto !important;
        padding: 2.25rem 1.5rem !important;
        background-color: #FFFFFF !important;
        border-radius: 36px !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2) !important;
    }

    /* Mostrar widget del acordeón móvil SOLO cuando mega-menu-fullscreen-state está abierto */
    html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container.mega-menu-fullscreen-state .mobile-footer,
    html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container.mega-menu-fullscreen-state .mobile-content {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Tarjeta gris claro idéntica a la imagen SCOPED a la caja del acordeón */
    html body .elementor-nav-menu--dropdown .mobile-footer .e-n-accordion,
    html body .elementor-nav-menu--dropdown .mobile-content .e-n-accordion {
        background-color: #EFEFEF !important;
        border-radius: 24px !important;
        padding: 0.5rem 1.25rem !important;
        margin-top: 1rem !important;
        margin-bottom: 1.5rem !important;
        box-sizing: border-box !important;
    }

    /* Estilos de los ítems de acordeón dentro de la tarjeta gris */
    html body .elementor-nav-menu--dropdown .mobile-footer .e-n-accordion-item,
    html body .elementor-nav-menu--dropdown .mobile-content .e-n-accordion-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        padding-block: 0 !important;
    }

    html body .elementor-nav-menu--dropdown .mobile-footer .e-n-accordion-item:last-child,
    html body .elementor-nav-menu--dropdown .mobile-content .e-n-accordion-item:last-child {
        border-bottom: none !important;
    }

    html body .elementor-nav-menu--dropdown .e-n-accordion-item-title {
        padding-block: 14px !important;
        justify-content: space-between !important;
        background: transparent !important;
    }

    /* Tipografía de los títulos de acordeón (Who we are, Services...) MÁS FINA */
    html body .elementor-nav-menu--dropdown .e-n-accordion-item-title-text {
        font-family: 'Gill Sans', sans-serif !important;
        font-size: 1.125em !important;
        font-weight: 400 !important;
        text-transform: uppercase !important;
        letter-spacing: -0.25px !important;
        color: #111827 !important;
    }

    /* Ocultar sub-items cuando la categoría del acordeón está cerrada */
    html body .elementor-nav-menu--dropdown details:not([open]) div[role="region"],
    html body .elementor-nav-menu--dropdown details:not([open]) .sub-item {
        display: none !important;
    }

    /* Mostrar sub-items desplegados SOLO cuando la categoría está abierta (<details open>) */
    html body .elementor-nav-menu--dropdown details[open] div[role="region"],
    html body .elementor-nav-menu--dropdown details[open] .sub-item {
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }

    html body .elementor-nav-menu--dropdown details[open] div[role="region"] *,
    html body .elementor-nav-menu--dropdown details[open] .sub-item * {
        opacity: 1 !important;
        visibility: visible !important;
        color: #4B5563 !important;
        font-family: 'Gill Sans', sans-serif !important;
        font-size: 1.125em !important;
        font-weight: 300 !important;
        text-decoration: none !important;
    }

    html body .elementor-nav-menu--dropdown details[open] .sub-item a {
        color: #4B5563 !important;
        display: inline-block !important;
        padding-block: 2px !important;
    }

    html body .elementor-nav-menu--dropdown details[open] .sub-item a:hover {
        color: #111827 !important;
    }

    /* Forzar visibilidad del botón Get in Touch si estaba oculto en móvil */
    html body .elementor-nav-menu--dropdown .elementor-widget-button,
    html body .elementor-nav-menu--dropdown .elementor-hidden-mobile {
        display: block !important;
    }

    /* Estilo del botón Get in Touch de color turquesa */
    html body .elementor-nav-menu--dropdown .elementor-button,
    html body .elementor-nav-menu--dropdown a.elementor-button {
        background-color: #00C7C0 !important;
        color: #FFFFFF !important;
        border-radius: 14px !important;
        padding: 13px 26px !important;
        font-family: 'Gill Sans', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border: none !important;
        box-shadow: none !important;
        display: inline-flex !important;
        width: auto !important;
        margin-top: 1rem !important;
    }
}

/* Evitar que transiciones de Elementor interfieran con GSAP */
html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container * {
    transition: none !important;
}

/* Capa de fondo oscura detrás del Mega Menú */
html body .mega-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.85);
    z-index: 9;
}

/* Desactivar puntero y animación en el título del item Language */
html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu>li.menu-item-3594>a {
    pointer-events: none !important;
    cursor: default !important;
    color: #111827 !important;

    & .btn-hover-layers,
    & .bg-layer {
        display: none !important;
    }
}

/* Ocultar enlace vacío o contenedor intermediario de Elementor en la columna de Language */
html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu li.menu-item-3594 ul.sub-menu>li.menu-item-3592>a.elementor-sub-item,
html body .menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu li.menu-item-3594 a.elementor-sub-item:empty {
    display: none !important;
}

/* Selector de banderas horizontal (Polylang Language Switcher) */
ul.polylang-flags-custom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.polylang-flags-custom li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

ul.polylang-flags-custom li a {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    line-height: 1 !important;
    max-width: 20px;
}

#content ul.polylang-flags-custom li a img {
    width: 20px !important;
    height: auto !important;
    display: block !important;
    border-radius: 2px !important;
    opacity: 0.6 !important;
    transition: opacity 0.3s ease !important;
}

/* Estado al pasar el ratón o idioma activo */
ul.polylang-flags-custom li.current-lang a img,
ul.polylang-flags-custom li a:hover img {
    opacity: 1 !important;
}

/* Fuerza el reemplazo visual de las banderas si Polylang o la caché mantienen las antiguas */
ul.polylang-flags-custom li.lang-item-ar img {
    content: url('/wp-content/polylang/ar.svg') !important;
}

ul.polylang-flags-custom li.lang-item-en img,
ul.polylang-flags-custom li.lang-item-en_US img,
ul.polylang-flags-custom li.lang-item-en-us img,
ul.polylang-flags-custom li.lang-item-us img {
    content: url('/wp-content/polylang/en_US.svg') !important;
}


/* GSAP Flip Open State */
html body .mega-menu-fullscreen-state {
    position: fixed !important;
    top: 0;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 8em);
    max-width: 1494px !important;
    height: auto;
    background-color: #FFFFFF !important;
    border-radius: 42px;
    overflow: hidden !important;
    box-shadow: 0px 30px 60px rgba(17, 24, 39, 0.15) !important;
    visibility: visible !important;
    z-index: 10 !important;
}


/* Newsletter Category List & Form Layout */
.e-con.e-parent.newsletter,
.newsletter.e-parent {
    padding-top: calc(var(--osmo-container-padding-block) * 0.3) !important;
}

/* Subtly separate the two columns in Newsletter page layout */
.newsletter .e-con-inner {
    gap: 3rem;
}

.newsletter .e-con-inner>.e-con:first-child {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    padding-right: 3rem;
}


@media (max-width: 768px) {
    .newsletter .e-con-inner>.e-con:first-child {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding-right: 0;
        padding-bottom: 2rem;
    }
}

.newsletter .sahco-categories-list-container,
.sahco-categories-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.sahco-categories-list-container a {
    font-size: 1.3em;
    letter-spacing: -0.03em;
    width: fit-content;
}

/* Newsletter Form Layout */
.contact-form.newsletter {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
    max-width: 600px;
}

.contact-form.newsletter .form-inputs-col {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.contact-form.newsletter .form-grid-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;
}

.contact-form.newsletter .form-inputs-col .form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.contact-form.newsletter .form-button-col {
    display: flex;
    align-items: flex-end;
}

.contact-form.newsletter label {
    display: none;
}

.contact-form.newsletter input[type="text"],
.contact-form.newsletter input[type="email"] {
    width: 100%;
    padding: 12px 20px;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    background-color: #FFFFFF !important;
    color: #111827 !important;
    font-size: 0.78em;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

.contact-form.newsletter input[type="text"]::placeholder,
.contact-form.newsletter input[type="email"]::placeholder {
    color: #9CA3AF !important;
    text-transform: uppercase;
    font-size: 0.72em;
    letter-spacing: 0.03em;
}

.contact-form.newsletter input[type="text"]:focus,
.contact-form.newsletter input[type="email"]:focus {
    border-color: #00C7C0 !important;
}

.contact-form.newsletter button.wpcf7-submit,
.contact-form.newsletter .button-row button {
    border-radius: 18px !important;
    padding: 12px 28px !important;
    white-space: nowrap;
    width: fit-content;
    height: fit-content;
}

@media (max-width: 768px) {
    .contact-form.newsletter {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-form.newsletter .form-button-col {
        width: 100%;
    }

    .contact-form.newsletter button.wpcf7-submit,
    .contact-form.newsletter .button-row button {
        width: 100%;
    }
}

/* Elementor Posts Widget - Custom Typography & Colors Override */
.elementor-widget-posts {
    width: 100% !important;
    height: 100% !important;
}

.elementor-widget-posts h3.elementor-post__title,
.elementor-widget-posts .elementor-post__title,
.elementor-widget-posts .elementor-post__title a {
    font-size: 1.15em;
    letter-spacing: -0.03em;
    font-weight: 300;
}

.elementor-widget-posts .elementor-post__meta-data,
.elementor-widget-posts .elementor-post__meta-data span {
    color: #686868 !important;
}

.elementor-widget-posts .elementor-post__read-more {
    color: #111827 !important;
    font-weight: 600;
    transition: color 0.3s ease;
}

.elementor-widget-posts .elementor-post__read-more:hover {
    color: #00C7C0 !important;
}

/* footer */
footer .e-con.e-parent {
    padding-block: unset !important;
}

.logo-footer {
    max-width: 500px !important;
    width: 100%;
}

.footer-menu {
    min-height: 100%;

    & .footer-menu-caption {
        flex-direction: column;

        & a {
            max-width: fit-content;
        }
    }

    & .elementor-nav-menu {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        align-items: start !important;
        gap: 2rem;
        width: 100%;

        &::after {
            display: none !important;
        }
    }

    /* Estilo del título de cada columna (elemento padre) */
    & .footer-menu-caption>a {
        text-transform: uppercase;
        font-size: 16px;
        letter-spacing: -0.25px;
        font-weight: 400;
        /* Para que el título no sea clickeable ni despliegue nada */
        padding: 0 !important;
        margin-bottom: .5rem;
    }

    /* Si el título de la columna del footer no tiene enlace real (#), desactivar interacción y animación */
    & .footer-menu-caption>a[href="#"],
    & .footer-menu-caption>a[href=""],
    & .footer-menu-caption>a:not([href]) {
        pointer-events: none !important;
        cursor: default !important;

        & .btn-hover-layers,
        & .bg-layer {
            display: none !important;
        }

        &:hover,
        &:focus,
        &:active {
            color: inherit !important;
            background: transparent !important;
            transform: none !important;
        }
    }

    /* Ocultar el menú móvil (hamburguesa) y el contenedor móvil para evitar duplicados */
    & nav.elementor-nav-menu--dropdown,
    & .elementor-menu-toggle {
        display: none !important;
    }

    /* Forzar que el menú principal (el grid) siempre sea visible en móvil y desktop */
    & nav.elementor-nav-menu--main {
        display: block !important;
    }

    /* Anular el dropdown de Elementor para convertirlo en una lista plana */
    & ul.elementor-nav-menu--dropdown,
    & .elementor-widget-nav-menu .elementor-nav-menu--main ul.elementor-nav-menu--dropdown {
        display: flex !important;
        flex-direction: column !important;
        gap: .25rem !important;
        position: relative !important;
        /* Debe ser relative para empujar el contenido hacia abajo y no superponerse */
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-width: 0 !important;
        box-shadow: none !important;
        background-color: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: visible !important;
    }

    /* Asegurar que los items de la lista (li) se expandan con su contenido */
    & ul.elementor-nav-menu--dropdown li.menu-item {
        display: block !important;
        position: relative !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-basis: auto !important;
        flex-shrink: 0 !important;
    }

    /* Sangría para los submenús de tercer nivel (ej. Port security dentro de Maritime) */
    & ul.sub-menu ul.sub-menu {
        margin-top: 0.25rem !important;
        margin-bottom: 0 !important;
        position: relative !important;
    }

    /* Ocultar las flechitas de despliegue */
    & .sub-arrow {
        display: none !important;
    }

    /* Estilo de los enlaces reales dentro de la columna */
    & a.elementor-sub-item {
        max-width: fit-content;
        font-size: 20px !important;
        line-height: 1.1;
        font-weight: 300 !important;
        letter-spacing: -0.3px !important;
        font-family: "Gill Sans", sans-serif !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        background-color: transparent !important;
        display: block !important;
        white-space: normal !important;
    }

    & a.elementor-sub-item:hover,
    & a.elementor-sub-item:focus,
    & a.elementor-sub-item:active {
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        background-color: transparent !important;
        font-weight: 300 !important;
    }

    @media (width<=1100px) {
        display: none !important;
    }
}

.copyright {
    & p {
        font-size: 14px;
        font-weight: 300 !important;
        letter-spacing: -0.25px;
        font-family: "Gill Sans", sans-serif !important;
        text-transform: uppercase;
    }

    & .signature .elementor-widget-html {
        margin-top: -5px;
    }

    @media (width<=768px) {
        text-align: center;
        gap: 0.5rem;

        & .signature {
            place-content: center;
        }
    }
}

.bottom-bar {
    max-width: fit-content;
    margin: auto;

    & .elementor-nav-menu {
        gap: 1em;

        &::after {
            display: none !important;
        }

        @media (width<=768px) {
            gap: 0.5em;
        }
    }

    & a {
        font-size: 14px;
        font-weight: 300 !important;
        letter-spacing: -0.25px;
        font-family: "Gill Sans", sans-serif !important;
        text-transform: uppercase;
        padding: 0 !important;
    }
}

.cta-footer {
    display: flex;
    flex-direction: column;

    & p {
        font-size: 3.654em;
        line-height: 0.8 !important;
        margin: 0;
        letter-spacing: -0.0675em;
        font-weight: 400;

        @media (width <=768px) {
            font-size: 1.854em;
        }
    }

    & p:nth-child(2) {
        font-family: Baskerville;
        font-style: italic;
        font-size: 4.5em;
        color: #00C7C0;

        @media (width<=768px) {
            font-size: 2.5em;
        }

        & span {
            margin-left: 0.5em !important;
        }
    }
}

.mobile-footer,
.mobile-content {

    & .e-n-accordion-item-title {
        padding-block: 16px;
        justify-content: space-between;
    }

    & .e-n-accordion-item-title-text {
        text-transform: uppercase;
        font-size: 1em;
        line-height: 1.2;
        letter-spacing: -0.25px;
        pointer-events: none !important;
        padding: 0;
        margin-bottom: 0;
        font-family: 'Gill Sans', sans-serif;
    }

    .e-n-accordion-item {
        border-bottom: 1px solid #E9E9E9;

        & .sub-item {
            gap: 0.15rem;
            padding: 0 0.75rem 1rem;

            & a {
                font-size: 1.1em;
                font-weight: 300;
                letter-spacing: -0.5px;
                font-family: "Gill Sans", sans-serif;
                padding: 0;
                margin: 0;
                transform: none;
                background-color: transparent;
                display: inline-block;
            }

            & .inner-level a {
                font-size: 0.95em;
                margin: 0 0.5rem 0.15rem;
            }
        }
    }

    @media (width>=1101px) {
        display: none;
    }

}

footer a,
[data-elementor-type="footer"] a,
footer a:hover,
[data-elementor-type="footer"] a:hover,
footer a:focus,
[data-elementor-type="footer"] a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

footer a::after,
footer a::before,
[data-elementor-type="footer"] a::after,
[data-elementor-type="footer"] a::before,
footer a:hover::after,
footer a:hover::before,
[data-elementor-type="footer"] a:hover::after,
[data-elementor-type="footer"] a:hover::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

@media (width <=1100px) {
    .links-wrapper {
        gap: 4rem;
    }
}


/* footer. end */

/* home */

/* Asegurar que el hero tape la línea de conexión ascendente */
.hero {
    position: relative;
    z-index: 2;
}

/* El contenido del hero debe estar estrictamente por encima de los contadores */
.hero>.e-con-inner>.e-child:nth-child(1) {
    position: relative !important;
    z-index: 2 !important;
}

.hero>.e-con-inner>.e-child:nth-child(2) {
    position: relative !important;
    z-index: 1 !important;
}

.blog .hero {
    padding-block: 0 !important;
    top: 1em;
}

#content .hero {
    margin: auto;
    top: 1em;
    padding-block: 0;
    transition: unset !important;

    &.home-hero {
        min-height: 92svh;
        max-height: 92svh;
        /*
        & h1.elementor-heading-title {
            text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
        }*/
    }

    & .e-con-inner>.elementor-element:not(.elementor-widget-html) {
        position: relative;
        height: 100%;
        z-index: 2;
    }

    & .hero-video-expanded-bg,
    & .elementor-background-video-container {
        position: absolute;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        height: 92svh;
        top: 0;
        max-height: none;
        z-index: 0;
        overflow: hidden;
        border-radius: 64px;
        background-color: #111827;

        html[lang="ar"] &,
        body.rtl & {
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
        }


        &.elementor-background-video-container::after,
        & .custom-hero-bg-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
            pointer-events: none;
            z-index: 1;
            border-radius: inherit;
        }

        & video {
            width: 100% !important;
            height: 100% !important;
            max-height: 100% !important;
            object-fit: cover !important;
            border-radius: 0 !important;
        }
    }

    @media (width>768px) {
        & h1.elementor-heading-title {
            color: #ffffff;
            /* Make it white to show over the video */
        }
    }

    @media (width<768px) {
        & h1.elementor-heading-title {
            color: #F1F5F9;
        }
    }

    & * {
        transition: unset !important;
    }

    & video {
        max-height: 92svh;
        width: 100vw;
        object-fit: cover;
        aspect-ratio: 16 / 9;
        border-radius: 64px;
    }


}


.typewritting-effect {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem;

    & p {
        font-size: 2em;
        text-align: center;
        max-width: 1040px;
        margin: auto;

        @media (width <=768px) {
            font-size: 1.5em;
        }
    }
}

.typewritting-effect p,
.typewritting-effect h1,
.typewritting-effect h2,
.typewritting-effect h3 {
    font-family: 'Adler', sans-serif;
}

.typewritting-effect p::after,
.typewritting-effect h1::after,
.typewritting-effect h2::after,
.typewritting-effect h3::after {
    content: '';
    display: inline-block;
    width: 0.08em;
    height: 1.1em;
    background-color: currentColor;
    vertical-align: text-bottom;
    animation: blink-cursor 0.75s step-end infinite;
    margin-left: 4px;
}

@keyframes blink-cursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Asegura que la sección anterior (banner) se renderice por encima de la línea de conexión */
html body .e-con:has(+ .counters-container),
html body .elementor-element:has(+ .counters-container) {
    position: relative;
    z-index: 2;
}

html body .counters-container {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    gap: 2.5rem 1rem;
    align-items: start;
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: auto;

    /* Posicionamiento en Grid manteniendo el orden de columnas original */
    @media (width>=768px) {
        &>div:nth-child(1) {
            grid-column: 1;
            grid-row: 1 / 3;
            align-self: center;
        }

        &>div:nth-child(2) {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
        }

        &>div:nth-child(3) {
            grid-column: 3;
            grid-row: 1;
            margin-top: 3rem;
        }

        &>div:nth-child(4) {
            grid-column: 2;
            grid-row: 2;
            margin-top: -4.5rem;
        }

        &>div:nth-child(5) {
            grid-column: 3;
            grid-row: 2;
            margin-top: -1.5rem;
            max-width: fit-content;
        }
    }

    @media (width >=768px) and (width <=991px) {
        &>div:nth-child(4) {
            margin-top: -7rem;
        }
    }

    @media (width >=768px) and (width <=991px) {
        &>div:nth-child(4) {
            margin-top: -7rem;
        }
    }

    @media (width <=768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;

        &>div:nth-child(1),
        &>div:nth-child(2),
        &>div:nth-child(5) {
            grid-column: span 2;
        }

        &>div:nth-child(1),
        &>div:nth-child(5) {
            max-width: 80%;
            margin: auto;
        }
    }

    @media (width <=425px) {
        grid-template-columns: 1fr;

    }

    /* Estilos base de las tarjetas */
    &>div {
        position: relative;
        border-radius: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
        height: auto;
        min-height: 0;
        align-self: start;
    }

    /* Línea de conexión teal hacia el banner superior */
    .connecting-line {
        position: absolute;
        bottom: 100%;
        left: 60%;
        width: 35px;
        height: 18rem;
        /* lo suficientemente alto para llegar al banner */
        background-color: #00C7C0;
        z-index: -1;
    }

    @media (width <=991px) {
        & .connecting-line {
            display: none;
        }
    }

    /* Colores de fondo de las tarjetas */
    &>div:nth-child(1) {
        background-color: #EBEBEB;
    }

    &>div:nth-child(2) {
        background-color: #00C7C0;
    }

    &>div:nth-child(3) {
        background-color: #EBEBEB;
    }

    &>div:nth-child(4) {
        background-color: #686868;
    }

    &>div:nth-child(5) {
        background-color: #FFDA44;
    }

    /* Alineación del encabezado de la tarjeta (icono + título) */
    &>div>div:first-child {
        position: relative;
        padding-bottom: 0.825rem;
        margin-bottom: 0.825rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.8rem;
    }

    /* Borde animado en movimiento con gradient, height 2px */
    &>div>div:first-child::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg,
                var(--neutral-text-primary, rgba(17, 24, 39, 0.50)) 0%,
                var(--brand-secondary, rgba(104, 104, 104, 0.50)) 86.54%,
                var(--neutral-text-primary, rgba(17, 24, 39, 0.50)) 100%);
        background-size: 200% 100%;
        animation: moveGradient 3s linear infinite;
    }

    /* Adaptación de contraste y fallback para la tarjeta oscura (Card 4) */
    &>div:nth-child(4)>div:first-child::after {
        background: linear-gradient(90deg,
                var(--neutral-text-primary, rgba(255, 255, 255, 0.40)) 0%,
                var(--brand-secondary, rgba(255, 255, 255, 0.15)) 86.54%,
                var(--neutral-text-primary, rgba(255, 255, 255, 0.40)) 100%);
    }

    /* Ajuste del tamaño del icono */
    &>div img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    /* Títulos de las tarjetas (SAHCO/Heading 4 — Tarjeta) */
    &>div h3.elementor-heading-title {
        line-height: 1;
        letter-spacing: -0.035em;
        font-weight: 400;
        margin: 0;
    }

    /* Números/valores principales (SAHCO/Heading 3 — Sub-sección) */
    &>div>div:nth-child(2) p {
        font-size: 2.091rem;
        /* 46px */
        line-height: 1.13;
        letter-spacing: -0.0326em;
        margin: 0;
        font-family: 'GillSansC', sans-serif;
        font-weight: 400;
        opacity: 0;
        will-change: opacity;
    }

    /* Colores de texto según contraste */
    &>div:nth-child(1) *,
    &>div:nth-child(2) *,
    &>div:nth-child(3) *,
    &>div:nth-child(5) * {
        color: #1A1A1A;
    }

    &>div:nth-child(4) * {
        color: #FFFFFF;
    }
}

/* Animación del degradado en movimiento para los bordes */
@keyframes moveGradient {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* pinned section */
#content .pinned-section {
    transition: unset !important;

    & .animacion-faro {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    & .text-highlight p {
        line-height: 1.2em;

        @media (width<=768px) {
            font-size: 1.35em;
        }
    }
}

/* rings */
.services-ring {
    max-width: 700px !important;
}

/* custom tabs */

#content .custom-tabs {

    @media (width<=1024px) {
        grid-column: span 2;
    }

    & .e-n-accordion {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    & .e-n-accordion details {
        background-color: #E9E9E9;
        border-radius: 32px;
        transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        will-change: transform, opacity, background-color;
        transform: translateZ(0);
        backface-visibility: hidden;
        padding-top: 34px;
        padding-left: 34px;
        padding-right: 34px;
        padding-bottom: 106px;

        @media (width <=768px) {
            padding-top: 24px;
            padding-left: 24px;
            padding-right: 24px;
        }

        &.active {
            background-color: var(--e-global-color-secondary);

            & * {
                color: #FFFFFF;
                font-weight: 400;
            }
        }
    }

    & .e-n-accordion-item-title {
        display: block;
        padding: 0;
        margin: 0;
    }

    & .e-n-accordion-item-title-header {
        margin: 0;

        & .e-n-accordion-item-title-text {
            font-size: 1.46em;
            line-height: 1.2;
            letter-spacing: -0.05em;

            @media (width<=768px) {
                font-size: 1em;
            }

        }
    }

    & .e-n-accordion-item>div[role="region"] {
        margin-top: 12px;
        margin-bottom: 0px;
        padding: 4px;
        will-change: height, opacity;
        transform: translateZ(0);
        backface-visibility: hidden;

        & ul {
            margin-bottom: 24px;
        }

        @media (width <=768px) {
            p {
                font-size: 1em;
            }
        }
    }

    /* Prevenir conflictos con animaciones y transiciones nativas de Elementor */
    & .e-n-accordion-item>div[role="region"],
    & .e-n-accordion-item-title,
    & .e-n-accordion-item-title-icon svg,
    & .e-n-accordion-item-title-icon {
        transition: none !important;
        animation: none !important;
    }

    /* Preparar iconos para animación cruzada fluida con GSAP y colocarlos fijos abajo */
    & .e-n-accordion-item-title-icon {
        position: absolute;
        bottom: 12px;
        left: 24px;
        margin: 0;
        width: 100%;
        max-width: 54px;
        max-width: 34px;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;


        @media (width <=425px) {
            & .e-n-accordion-item-title-icon {
                max-width: 34px;

            }
        }
    }

    & .e-n-accordion-item-title-icon .e-opened,
    & .e-n-accordion-item-title-icon .e-closed {
        display: flex !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    & .elementor-button-content-wrapper {
        place-items: start;
        place-content: space-between;
        width: 100%;
        text-align: left;
    }

    & .e-n-accordion details .e-con-inner {
        gap: 0;
    }

    & .elementor-button-info {
        min-height: 30px;
    }

    & .elementor-button-info a {
        border-radius: 0 !important;
        width: 100%;
        place-items: start;
        font-size: 1em;
        line-height: 1.2;
    }

    & .e-n-accordion-item .elementor-button-icon svg {
        height: 30px;
        width: 30px;
        border-radius: 12px;

        @media (width <=425px) {
            height: 24px;
            width: 24px;
            border-radius: 4px;
        }
    }

    /* Evitar que transiciones por defecto de Elementor rompan el GSAP clip-path */
    & .maritime,
    & .corporate,
    & .public {
        transition: none !important;
        animation: none !important;
    }
}

.tab-images {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 95vh;

    & .elementor-widget-image {
        height: 100%;

        & img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            display: block;
        }
    }

    @media (width<=1024px) {
        display: none;
    }
}


.marquee-container,
.first-row,
.second-row {
    overflow: hidden;
    flex-wrap: nowrap !important;
    display: flex;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;

    & .marquee-item .e-con-inner {
        display: flex;
        flex-wrap: nowrap;
        gap: 2em;
        align-items: center;
        width: max-content !important;
        max-width: none !important;

        & .elementor-widget-text-editor {
            white-space: nowrap;
            width: auto !important;
        }
    }

    & .marquee-item {
        &.baskerville p {
            font-family: "Baskerville", serif;
            font-weight: 300;
            font-style: italic;
        }
    }

    & .marquee-item,
    & .elementor-widget-image {
        flex-shrink: 0;
        width: max-content !important;
        max-width: none !important;
        margin-inline: 1rem;
        vertical-align: middle;
        /* espaciado entre bloques */

        & p {
            margin: 0;
            font-size: 4em;
            font-weight: 400;
            letter-spacing: -0.05em;
        }
    }
}

/* core principles */

.core-principles {
    min-height: 526px;
    transition: unset !important;
    display: block !important;

    & * {
        transition: unset !important;
    }
}

.core-principles .gsap-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    padding-block: 2rem;
    /* Espacio para sombras */
}

.core-principles .card {
    min-width: 536px;
    width: 536px;
    flex-shrink: 0 !important;
    height: auto;
    /* Mantener la altura intrínseca */

    @media (width <=768px) {
        min-width: 85vw;
        width: 85vw;
    }
}


/* form */
.fit-content {
    max-width: fit-content !important;
}

#content .contact-info {
    display: flex;
    place-content: center;
    gap: 1rem;

    & p {
        margin: 0;
    }

    @media (width<=768px) {
        flex-direction: column;
        text-align: center;
        gap: 0;
    }
}

.wpcf7 form .wpcf7-response-output {
    border-radius: 4px;
    color: #fff;
}

.contact-form.contacto {
    & .wpcf7-response-output {
        border-radius: 4px;
    }

    display: flex;
    flex-direction: column;
    gap: 0;

    & .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        @media (width<=768px) {
            display: flex;
            flex-direction: column;
        }
    }

    & .form-grid,
    & .form-row {
        gap: 1rem;
    }

    & .form-row {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;

        &.message {
            grid-column: span 2;
        }

        & label {
            font-weight: 500;
            color: #fff;
            letter-spacing: -0.035em;
            line-height: 1.6em;
        }

        & .wpcf7-list-item {
            margin: 0;
        }

        & .wpcf7-acceptance {
            font-size: 12px;
        }

        & .wpcf7-acceptance label {
            visibility: visible;
            height: auto;
            max-width: fit-content;

            & input[type="checkbox"] {
                max-width: fit-content;
                accent-color: #00C7C0;
                margin-right: 0.25rem;
                min-width: 18px;
                min-height: 18px;
                vertical-align: middle;
            }

            & a {
                color: #00C7C0;
                text-decoration: underline;
                text-underline-offset: 4px;
            }
        }

        & .wpcf7-submit {
            min-width: 100%;
            font-size: 1em;
            align-self: center;
            /* Centrado horizontal en flex column */
            margin-top: 1rem;
            max-width: 100%;

            & .layer-default {
                background-color: #0D0D0D;
            }
        }

        & textarea {
            height: auto;
            max-height: 160px;
        }

        & input:not([type="submit"]),
        & textarea,
        & select {
            background-color: #fff;
            color: #111827;
            border: none;
            padding: 12px;
            border-radius: 18px;
            width: 100%;
            font-size: 16px;
            letter-spacing: -0.25px;
            min-height: 54px;

            @media (width<=768px) {
                border-radius: 12px;
            }

            /* Placeholder styling */
            &::placeholder {
                color: #6B7280;
                opacity: 1;
            }

            &::-webkit-input-placeholder {
                color: #6B7280;
                opacity: 1;
            }

            &::-moz-placeholder {
                color: #6B7280;
                opacity: 1;
            }

            &:-ms-input-placeholder {
                color: #6B7280;
                opacity: 1;
            }

            &:focus {
                outline: none;
            }
        }

        /* Estilo para simular placeholder en elementos <select> cuando no hay opción elegida */
        & select:invalid,
        & select:has(option[value=""]:checked) {
            color: #6B7280;
        }

        & select option {
            color: #111827;
        }

        & select option[value=""] {
            color: #6B7280;
        }

    }
}

#areas-of-interest {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("/wp-content/uploads/2026/05/keyboard_arrow_down.svg");
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: 24px auto;
    cursor: pointer;
}


/* team row */
.core-principles.logos {
    min-height: unset;

    & .gsap-slider-track {
        gap: 6rem;
    }

    & .card {
        min-width: unset;
        width: fit-content;
        place-content: center;

        & img {
            min-width: 100%;
            max-width: 150px;
            object-fit: contain;
            vertical-align: middle;
        }
    }
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    place-items: center;

    @media (width <=1024px) {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-item {
        cursor: pointer;
        align-self: start;
        padding: 0;
        border-radius: 32px;

        & .text-container {
            display: block;

            & h3 {
                font-size: 1.425em;
            }

            & p {
                margin: 0;
                text-wrap: initial;
            }
        }

        & .background {
            transition: background 0.3s ease;
        }

        & .img {
            overflow: visible;
            margin: 0;
            bottom: -4px;
            transition: background 0.3s ease;

            & img {
                object-fit: contain;
                max-height: 280px;

                @media (width <=768px) {
                    max-width: 120px;
                }
            }
        }

        & .inner-content {
            transition: margin-top 0.3s ease;
        }

        &.active .inner-content {
            margin-top: 0.5rem;
        }
    }
}

/* ==========================================================================
   SAHCO ONE-TIME PRELOADER
   ========================================================================== */

body:has(.sahco-preloader:not(.is--hidden)) {
    overflow: hidden !important;
}

body:has(.sahco-preloader:not(.is--hidden)) .custom-cursor,
body:has(.sahco-preloader:not(.is--hidden)) .sahco-drag-cursor,
body:has(.sahco-preloader:not(.is--hidden)) .sahco-scroll-cursor,
body:has(.sahco-preloader:not(.is--hidden)) .sahco-slider-core-cursor,
body:has(.sahco-preloader:not(.is--hidden)) [class*="-cursor"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.sahco-preloader {
    background-color: #f4f4f4;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100dvh;
    font-size: 1vw;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .sahco-preloader {
        font-size: 2.5vw;
    }
}

.sahco-preloader.is--hidden {
    display: none;
}

.sahco-preloader__wrap {
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Logo ── */
.sahco-preloader__logo {
    position: absolute;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;

    & svg {
        max-width: 400px;
    }
}

.sahco-preloader__logo img {
    width: 100%;
    height: auto;
}

/* ── Grupos de Imágenes ── */
.sahco-preloader__groups {
    position: relative;
    overflow: visible;
    /* we can hide overflow in the parent wrap */
    display: flex;
    flex-wrap: nowrap;
}

.sahco-preloader__group {
    border-radius: .5em;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    flex-shrink: 0;
    transform: translateX(150vw);
}

.sahco-preloader__single {
    padding-left: 1em;
    padding-right: 1em;
    position: relative;
}

.sahco-preloader__media {
    border-radius: .5em;
    justify-content: center;
    align-items: center;
    width: 17vw;
    min-width: 160px;
    height: 30vh;
    max-height: 45vh;
    display: flex;
    position: relative;
}

.sahco-preloader__media.is--scaling {
    will-change: transform;
    border-radius: 0;
    transition-property: border-radius;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(1, 0, 0, 1);
    display: flex;
}

.sahco-preloader__media.is--scaling.is--radius {
    border-radius: .5em;
}

.sahco-preloader__cover-img {
    object-fit: cover;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    position: absolute;
}

.sahco-preloader__group.is--relative {
    /* No longer needed special positioning */
}

.sahco-preloader__group.is--duplicate {
    /* No longer needed special positioning */
}

.sahco-preloader__cover-img.is--scale-down {
    will-change: transform;
}

/* ── Fades laterales ── */
.sahco-preloader__fade {
    pointer-events: none;
    background-image: linear-gradient(90deg, #f4f4f4 20%, transparent);
    width: 5em;
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    left: -1px;
}

.sahco-preloader__fade.is--duplicate {
    left: auto;
    right: -1px;
    transform: scaleX(-1);
}

/* ── Contenido Inferior (Texto + Barra) ── */
.sahco-preloader__bottom {
    position: absolute;
    bottom: max(1em, calc(env(safe-area-inset-bottom) + 1.5em));
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
}

.sahco-preloader__title {
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-size: clamp(1.75rem, 6vw, 7rem);
    font-weight: 400;
    color: #111827;
    text-align: center;
    letter-spacing: -0.04em;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
    padding-inline: 1rem;
}

.sahco-preloader__title .highlight {
    font-family: "Baskerville", serif;
    font-style: italic;
    color: #00C7C0;
    font-weight: 300;
}

.sahco-preloader__progress {
    width: 98%;
    max-width: var(--size-container);
    height: 24px;
    background-color: #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.sahco-preloader__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #00C7C0;
    border-radius: 4px;
}


/* Transiciones para suavizar los cambios de color */
.service-bg,
.service-block text,
.service-text text {
    transition: fill 0.3s ease-out, stroke 0.3s ease-out;
}

/* Estilos base para el texto (estado inactivo) */
.service-block text,
.service-text text {
    fill: #000000;
    /* Fuerza el color negro por defecto */
    font-size: 20px;
    letter-spacing: 1px;
    font-family: var(--e-global-typography-primary-font-family), "Arial", sans-serif;
}


/* Estilos para el bloque ACTIVO */
.service-block.active .service-bg,
.service-block-bg.active .service-bg {
    fill: #00C7C0 !important;
    stroke: #00C7C0 !important;
}

.service-block.active text,
.service-text.active text {
    fill: #ffffff !important;
}

/* Efecto hover opcional */
.service-block:hover:not(.active) .service-bg,
.service-block-bg:hover:not(.active) .service-bg {
    fill: #f0f0f0;
}

/* Custom Drag Cursor */
.sahco-drag-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: max-content;
    height: max-content;
    display: grid;
    grid-template-areas:
        ". up ."
        "left text right"
        ". down .";
    gap: 6px;
    justify-content: center;
    align-items: center;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    will-change: transform;

    & span,
    & svg {
        background-color: #aaaaaa40;
        color: #2a2a2a;
        backdrop-filter: blur(10px);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & svg {
        width: 34px;
        height: 34px;
        stroke: #2a2a2a;
        stroke-width: 1.5;
        fill: none;
        border-radius: 12px;
    }

    & span {
        grid-area: text;
        min-width: 64px;
        min-height: 64px;
        text-align: center;
        border-radius: 18px;
        padding-inline: 0.25rem;
    }

    & .chevron-up {
        grid-area: up;
        justify-self: center;
    }

    & .chevron-down {
        grid-area: down;
        justify-self: center;
    }

    & .chevron-left {
        grid-area: left;
    }

    & .chevron-right {
        grid-area: right;
    }
}

/* Custom Scroll Cursor */
.sahco-scroll-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 64px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    will-change: transform;
    gap: 8px;

    & span,
    & svg {
        background-color: #aaaaaa40;
        color: #2a2a2a;
        border-radius: 100vmax;
        backdrop-filter: blur(10px);
    }

    & svg {
        width: 34px;
        height: 34px;
        stroke: #2a2a2a;
        stroke-width: 1.5;
        fill: none;
        border-radius: 12px;
    }

    & span {
        min-width: 64px;
        min-height: 64px;
        place-content: center;
        text-align: center;
        border-radius: 18px;
        padding-inline: 0.25rem;
    }
}

/* Custom Drag Core Cursor */
.sahco-slider-core-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: max-content;
    padding-inline: 8px;
    height: 64px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    will-change: transform;
    gap: 8px;

    & span,
    & svg {
        background-color: #aaaaaa40;
        color: #2a2a2a;
        border-radius: 100vmax;
        backdrop-filter: blur(10px);
    }

    & svg {
        width: 34px;
        height: 34px;
        stroke: #2a2a2a;
        stroke-width: 1.5;
        fill: none;
        border-radius: 12px;
    }

    & span {
        min-width: 64px;
        min-height: 64px;
        place-content: center;
        text-align: center;
        border-radius: 18px;
        padding-inline: 0.25rem;
    }
}

/* Flair Custom Cursor */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    scale: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform, opacity;
}

.custom-cursor .cursor-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    will-change: transform;
    pointer-events: none;
}

.custom-cursor .cursor-default,
.custom-cursor .cursor-hover,
.custom-cursor .cursor-svg {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Pad Hero - Video Expand matching exact hero background size & styles */
.pad.hero {
    position: relative;
}

.pad.hero,
.pad.hero * {
    cursor: none !important;
}

header,
header * {
    cursor: auto !important;
}

/* Ocultar elementos de título cuando el vídeo esté desplegado */
.pad.hero.video-active h1.elementor-heading-title,
.pad.hero.video-active .elementor-widget-heading,
.pad.hero.video-active .mask-line {
    pointer-events: none !important;
}

/* El vídeo real ocupa la misma posición y dimensiones exactas que el hero background */
.pad.hero .elementor-widget-video {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden !important;
}

/* ANULAR EL PADDING 16:9 DE ELEMENTOR Y RELLENAR TODO EL HERO BACKGROUND */
.pad.hero .elementor-widget-video .e-hosted-video,
.pad.hero .elementor-widget-video .elementor-wrapper,
.pad.hero .elementor-widget-video .elementor-video-wrapper,
.pad.hero .elementor-widget-video .elementor-open-inline {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: inherit !important;
    overflow: hidden !important;
}

.pad.hero .elementor-widget-video video,
.pad.hero .elementor-widget-video video.elementor-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    display: block !important;
}

/* Ocultar cursores personalizados en dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {

    .sahco-drag-cursor,
    .sahco-scroll-cursor,
    .sahco-slider-core-cursor,
    .custom-cursor {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}


/* ── Botón Scroll To Top ── */
.sahco-scroll-top {
    padding: 0 !important;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 2rem;
    height: 2rem;
    background-color: #00C7C0;
    color: #fff;
    border: none;
    border-radius: 18px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sahco-scroll-top.is--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sahco-scroll-top:hover {
    background-color: #111827;
}

@media (max-width: 768px) {
    .sahco-scroll-top {
        bottom: 1.5rem;
        right: 1.5rem;
    }
}

/* ========================================================================== */
/* PAGE TRANSITION LAYERS (PREVENTS FLASH) */
/* ========================================================================== */
.page-transition-layers {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.pt-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    will-change: transform !important;
}

.pt-layer-1 {
    background-color: #FFDA44 !important;
}

.pt-layer-2 {
    background-color: #686868 !important;
}

.pt-layer-3 {
    background-color: #00C7C0 !important;
}


/* service pages */
#content .hero-services {
    transition: unset !important;
    min-height: 92vh;

    & .e-con-inner>.elementor-element {
        position: relative;
        height: 100%;
        z-index: 2;
        /* Para que el texto quede sobre el background animado */
    }

    @media (width>768px) {
        & h1.elementor-heading-title {
            background-image: linear-gradient(to right, #000000 var(--reveal-pos, 100%), #ffffff var(--reveal-pos, 100%));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }
    }

    @media (width<768px) {
        & h1.elementor-heading-title {
            color: #F1F5F9;
        }
    }


    & * {
        transition: unset !important;
    }
}

.object-fit {
    &>div {
        min-height: 100%;
    }


    & img {
        object-fit: cover;
    }
}


body:not(.elementor-editor-active) #content .slider-container {
    position: relative;
    left: 0;
    overflow: hidden;

    &>div {
        position: relative;
        width: 100%;
        height: 70vh;

        @media (width<768px) {
            height: 90vh;
        }
    }

    .service-item {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        overflow: hidden;
        place-content: end;
        border-radius: 24px;
        cursor: pointer;
        margin-right: 2vw;
        transition: opacity 0.4s ease !important;

        @media (width<1024px) {
            place-content: center;
        }

        &>div,
        &>a {
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            text-decoration: none;
            opacity: 0;
            visibility: hidden;
            color: #111827;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }
    }

    .service-item.is--active {

        &>div,
        &>a {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.4s ease 0.5s, visibility 0s ease 0.5s;
        }
    }

    /* Arrow Controls */
    .slider-arrow {
        position: absolute;
        padding: 0;
        top: 50%;
        width: 64px;
        height: 64px;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111827;
        cursor: pointer;
        z-index: 2;
        transform: translateY(-50%);
        transition: background 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);

        & img {
            display: block;
            width: 100%;
            height: 100%;
        }

        &.is--left {
            left: 2.8em;

            @media (width<1024px) {
                left: 12px;
            }

        }

        &.is--right {
            right: 2.8em;

            @media (width<1024px) {
                right: 12px;
            }
        }
    }
}

/* ==========================================================================
   404 Page Prism Container
   ========================================================================== */

.error404 {

    & header,
    & footer {
        display: none;
    }

    & .prism-container {
        position: relative;
        width: 100vw;
        height: 100vh;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        display: block;
        background-color: #111827;
    }

    /* Ensure the HTML widget wrapper spans full width in Elementor Flex Containers */
    & .elementor-widget-html:has(.prism-container),
    & .elementor-widget-html:has(.prism-container) .elementor-widget-container {
        width: 100% !important;
        display: block;
    }

    .canvas-404 {
        padding: 0 !important;

        & .text-block {
            position: absolute;
            z-index: 100;
        }
    }
}



/* WebGL Ferrofluid Container */
#content .liquid {
    padding: 0 !important;
}

.ferrofluid-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #000;
}

/* cookies settings */
.cky-btn-revisit-wrapper {
    border: 1px solid;
    box-shadow: 0 0px 4px 0px #656565;
    background-color: var(--e-global-color-62c1be7) !important;
}

.cmplz-buttons button,
.cky-btn {
    min-height: 56px;
    height: 100% !important;
    border-radius: 18px !important;
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    font-size: 1em !important;
    letter-spacing: -0.0318em !important;
    font-family: 'GillSansC' !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: none !important;
    color: #ffffff !important;
}

.cmplz-buttons button::before,
.cmplz-buttons button::after,
.cmplz-buttons button:hover::before,
.cmplz-buttons button:hover::after,
.cky-btn::before,
.cky-btn::after,
.cky-btn:hover::before,
.cky-btn:hover::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
}

.cmplz-buttons button .bg-layer:not(.layer-default),
.cky-btn .bg-layer:not(.layer-default) {
    transform: translateY(100%);
}

.cmplz-buttons button .layer-default,
.cmplz-buttons button .layer-3,
.cky-btn .layer-default,
.cky-btn .layer-3 {
    background-color: #0D0D0D !important;
}

.cmplz-buttons button .layer-1,
.cky-btn .layer-1 {
    background-color: var(--btn-hover-color-1) !important;
}

.cmplz-buttons button .layer-2,
.cky-btn .layer-2 {
    background-color: var(--btn-hover-color-2) !important;
}

.cky-notice-btn-wrapper {
    gap: 0.5rem;
}

/*
#cmplz-cookiebanner-container::before {
    content: '';
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    z-index: 10;
    background-color: #00000063;
}
*/
.cmplz-cookiebanner {
    background-color: #ffffff !important;
    border: 1px solid #38434621 !important;
    padding-block: 0 !important;
    /*
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    max-width: 600px !important;
    height: fit-content !important;
    display: flex !important;
    flex-direction: column !important;
    */
}

#cmplz-manage-consent .cmplz-manage-consent {
    border: 1px solid #38434621 !important;
    border-bottom: 0;
}

.cmplz-logo {
    grid-column: span 3;
    margin: auto;
}

.cmplz-cookiebanner .cmplz-links .cmplz-link {
    color: inherit !important;
}

.cmplz-title {
    font-size: 1.25rem !important;
    margin-top: 1rem;
}

.cmplz-message {
    text-align: center;
    margin: auto;
}

/* legal pages */
#content.post-2161,
#content.post-2157,
#content.post-2159,
#content.post-2251,
.page-id-1486 main#content,
.page-id-4548 main#content,
.page-id-4551 main#content,
.page-id-4554 main#content {
    padding-block: 5rem;
}

#content.post-2161 h1 {
    font-family: initial;
    color: var(--e-global-color-secondary);
}

div#cmplz-document {
    max-width: 100%;
}

div#cmplz-document p,
div#cmplz-document li {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    letter-spacing: var(--e-global-typography-text-letter-spacing);
    color: var(--e-global-color-text);
}

#cmplz-document h2 {
    font-family: var(--e-global-typography-463fc2d-font-family), Sans-serif;
    font-weight: var(--e-global-typography-463fc2d-font-weight);
    color: var(--e-global-color-secondary);
}

#cmplz-document h3 {
    font-family: var(--e-global-typography-463fc2d-font-family), Sans-serif;
}

/* Reducir tamaño de headings en páginas legales y documentos de cookies */
.legal h1,
#cmplz-document h1 {
    font-size: 2em !important;
    line-height: 1.2;
    margin-bottom: 0.8em;
}

.legal h2,
#cmplz-document h2 {
    font-size: 1.4em !important;
    line-height: 1.3;
}

.legal h3,
#cmplz-document h3 {
    font-size: 1.15em !important;
    line-height: 1.3;
}

.legal h4,
.legal h5,
.legal h6,
#cmplz-document h4,
#cmplz-document h5,
#cmplz-document h6 {
    font-size: 1em !important;
    line-height: 1.3;
}

/* ==========================================================================
   PINNED CARDS HORIZONTAL SCROLL (SIDE-SCROLL ROW)
   ========================================================================== */
#pinned-cards-row,
.pinned-cards-row {
    min-height: 100vh;
    height: auto;
    display: flex;
    align-items: center;
    transition: unset;

    * {
        transition: unset;
    }

    .e-con-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        max-width: 100%;
    }

    .pinned-cards {
        flex-grow: 1;
        overflow: hidden;
        display: flex;
        align-items: center;
        width: auto;
        max-width: none;
    }

    /* Cards Track */
    .pinned-cards>.e-con {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: max-content;
        height: auto;
        align-items: stretch;
        overflow: hidden;
        position: relative;
        z-index: 1;
        background-color: #fff;
        /* Fondo gris claro base del slider */
        border-radius: 24px;
    }

    /* Cortina única (slider-bg-overlay) que se desplaza horizontalmente detrás de las tarjetas */
    .slides-container .slider-bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #686868;
        /* El color de fondo gris de la cortina */
        z-index: 1;
        /* Por detrás de las tarjetas (z-index 2) */
        pointer-events: none;
        border-radius: 24px;
        will-change: transform, width;
    }

    /* Cards Track Inner */
    .slides-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: max-content;
        height: auto;
        align-items: stretch;
        padding-left: 1rem;
        position: relative;
        z-index: 1;
    }

    .slides-container::after {
        content: '';
        display: block;
        width: 0.5rem;
        flex-shrink: 0;
    }

    /* Individual Cards */
    .slides-container>.e-con {
        display: flex;
        flex-direction: column;
        width: 42vw;
        min-width: 42vw;
        max-width: 42vw;
        height: 100%;
        flex-shrink: 0;
        flex-grow: 0;
        justify-content: space-between;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, background-color 0.4s ease;
        will-change: transform;
        position: relative;
        z-index: 2;
        /* Por encima de la cortina (z-index 1) */
        background-color: #ffffff !important;
        /* Fondo original blanco de la tarjeta */
    }

    /* Al activarse la tarjeta, su fondo se vuelve transparente para revelar la cortina gris */
    .slides-container>.e-con.active-card {
        background-color: transparent !important;
    }

    /* Forzar que el contenido de las tarjetas esté por encima de la barra gris */
    .slides-container>.e-con>* {
        position: relative;
        z-index: 3;
    }

    /* Transición de textos a color blanco al activarse la tarjeta */
    .slides-container>.e-con .elementor-heading-title,
    .slides-container>.e-con p,
    .slides-container>.e-con span {
        color: #010101 !important;
        -webkit-text-fill-color: #010101 !important;
        text-wrap: initial;
        transition: color 0.4s ease, -webkit-text-fill-color 0.4s ease !important;
    }

    .slides-container>.e-con.active-card .elementor-heading-title,
    .slides-container>.e-con.active-card p,
    .slides-container>.e-con.active-card span {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

/* Responsive para Pinned Cards Slider */
@media (width<=1023px) {

    #pinned-cards-row,
    .pinned-cards-row {
        padding-block: 4rem !important;

        .e-con-inner {
            flex-direction: column !important;
            align-items: stretch !important;
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
        }

        .pinned-cards {
            width: 100% !important;
            overflow: hidden !important;
            display: flex !important;
        }

        .pinned-cards>.elementor-element {
            width: max-content !important;
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            padding-left: 0 !important;
        }

        .slides-container {
            width: max-content !important;
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            padding-left: 1rem !important;
            gap: 1.5rem !important;
        }

        .slides-container::after {
            content: '' !important;
            display: block !important;
            width: 1rem !important;
            margin-left: -1.5rem !important;
            flex-shrink: 0 !important;
        }

        .slides-container>.e-con {
            width: 50vw !important;
            min-width: 50vw !important;
            max-width: 50vw !important;
            min-height: 480px !important;
            height: auto !important;
            margin: 0 !important;
        }
    }
}

@media (width<=768px) {

    #pinned-cards-row,
    .pinned-cards-row {
        .slides-container>.e-con {
            width: 78vw !important;
            min-width: 78vw !important;
            max-width: 78vw !important;
        }
    }
}


/* map styles */
@keyframes dot-blink {
    from {
        transform: scale(0);
        opacity: 1;
    }

    to {
        transform: scale(2);
        opacity: 0;
    }
}

.global-presence-map {
    & .counter-item {
        flex-direction: column;
        place-items: center;
        place-content: center;
        text-align: center;

        &>div {
            max-width: fit-content;

            & p {
                margin: 0;
            }
        }
    }

    & .elementor-widget-html {
        min-width: 100%;

        & .map {
            position: relative;
            width: 1000px;
            max-width: 100%;
            margin: 0 auto;

            & .background {
                display: block;
                width: 100%;
                height: auto;
            }

            & .dots {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

        }
    }
}

.dot {
    animation: dot-blink 1s linear infinite;
    transition: opacity 0.3s ease;
    pointer-events: none !important;
}

.dot-inner {
    pointer-events: auto !important;
}

@for $i from 1 through 30 {
    @if $i % 2 !=0 {
        .dot:nth-child(#{$i}) {
            animation: dot-blink unquote(random(5) + "s") linear infinite;
        }
    }
}

/* Map dot hover animations */
.map-dot-group {
    cursor: pointer;
    outline: none;
}

.map-dot-group:hover .dot,
.map-dot-group:focus .dot {
    animation: none !important;
    opacity: 0 !important;
}

.map-dot-group .dot-label {
    opacity: 0;
    visibility: hidden;
    font-family: "GillSans", sans-serif;
    font-size: 16px;
    fill: #111827;
    text-anchor: middle;
    transform: translateY(10px);
    pointer-events: none;
    font-weight: 400;
    max-width: 350px;
    white-space: pre-wrap;
}

/* Sticky titles layout for Sectors Steps */
.sectors-steps {
    position: relative;
    width: 100%;
}

.steps-titles {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    /* Spacing between rows */
    position: relative;
    width: 100%;
}

/* Each row container (containing Title + Text) */
.steps-titles>.elementor-element {
    display: grid !important;
    grid-template-columns: 1fr 1.5fr;
    /* 2-column layout: title on left, text on right */
    gap: 4rem;
    position: relative;
}

/* Connecting line centered between the two grid columns */
.sectors-steps .connecting-line {
    position: absolute;
    top: -32px;
    left: 33%;
    width: 35px;
    height: calc(100% + 64px);
    /* Sumamos los 32px que desplazamos arriba para llegar justo al borde inferior */
    background-color: #eaeaea;
    /* Equivalente sólido sin transparencia de #aaaaaa40 sobre fondo blanco */
    transform-origin: 50% 0%;
    transform: translate(-50%, 0%) scaleY(0);
    z-index: 5;
    pointer-events: none;
    will-change: transform;
}

body.rtl .sectors-steps .connecting-line {
    left: auto;
    right: 33%;
    transform: translate(50%, 0%) scaleY(0);
}

/* Make the title widget sticky inside its row box */
.steps-titles>.elementor-element .elementor-widget-heading {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 150px;
    /* Vertical position when sticky */
    align-self: start;
    /* Prevents stretching, allowing sticky to work */
}

/* Remove all previous text-editor clipping or absolute positions */
.sectors-steps .steps-titles .elementor-heading-title {
    font-size: 2em;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: var(--e-global-color-primary, #111827) !important;
}

.sectors-steps .steps-titles p {
    text-wrap: initial;
    font-size: 1.1em;
}

/* SplitText Mask classes for paragraph animations */
.split-line-outer {
    overflow: hidden !important;
    display: block !important;
}

li .split-line-outer {
    display: inline-block !important;
    vertical-align: top;
}

.split-line-inner {
    display: inline-block !important;
}

/* Rolling Text / Odometer CSS */
.rolling-digit {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    height: 1.15em;
    line-height: 1.15em;
    position: relative;
}

.rolling-strip {
    display: block;
    transform: translateY(0);
}

.rolling-strip>div {
    height: 1.15em;
    line-height: 1.15em;
    text-align: center;
    display: block;
}


/* BLOG */
/* single post */
.single-post {

    & .single-post-container .elementor-widget-theme-post-content {
        display: flex;
        flex-direction: column;
    }

    & .single-post-container {
        padding-top: 10em !important;

        &>div {
            gap: 4em;
        }

        & h1 {
            font-size: 2em;
            letter-spacing: -0.0448em;
        }

        & h2 {
            letter-spacing: -0.0675em;
        }

        & h3 {
            letter-spacing: -0.0326em;
        }

        & h4 {
            letter-spacing: -0.035em;
        }

        & h5,
        & h6 {
            letter-spacing: -0.0156em;
        }

        & img {
            border-radius: 42px;
        }

        & p,
        & .elementor-toc__list-item-text-wrapper {
            font-size: 0.9em;
            line-height: 1.3;
            letter-spacing: -0.035em;
            font-weight: 300;
            font-family: "Gill Sans", sans-serif;
        }

        @media (height <=800px) {
            & .table-content {
                position: sticky;
                top: 50%;
                height: 100%;
                transform: translateY(-50%);
            }
        }

        & .table-content {
            max-height: fit-content;

            & .elementor-toc__body,
            & .elementor-toc__header {
                padding: 0;
            }

            & .elementor-toc__body {
                padding-left: 0.5rem;
                overflow: hidden;
            }

            & .elementor-toc__header-title {
                margin-bottom: 1rem;
            }

            & .elementor-toc__list-item-text-wrapper {
                font-size: 0.75em;
                line-height: 1.1;
                place-items: start;
            }

            /* Subnivel del TOC (aplicado al wrapper div del subnivel, no al <a>) */
            & .elementor-toc__list-wrapper .elementor-toc__list-wrapper .elementor-toc__list-item-text-wrapper {
                font-size: 0.65em;
            }

            & .elementor-toc__list-item:last-child {
                margin-bottom: 0 !important;
            }
        }

    }
}

/* Disable default text-decoration underline on hover for elements with animated underlines */
.elementor-nav-menu--main a.elementor-item:hover,
.elementor-nav-menu--main a.elementor-item:hover .elementor-item-title,
.sahco-next-course-highlight .highlight-title:hover,
.sahco-training-card .card-title a:hover,
.sahco-post-title a:hover,
.sahco-view-all:hover,
.elementor-toc__list-item-text-wrapper a:hover,
a.elementor-toc__list-item-text:hover,
.elementor-toc__list-item-text:hover {
    text-decoration: none !important;
}

/* ==========================================================================
   BLOG CATEGORIES GRID
   ========================================================================== */
/* Quitar el estilo de negrita extra a las etiquetas <b> dentro de los encabezados */
.elementor-widget-theme-post-content h1 b,
.elementor-widget-theme-post-content h2 b,
.elementor-widget-theme-post-content h3 b,
.elementor-widget-theme-post-content h4 b {
    font-weight: inherit;
}

.sahco-blog-categories-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.sahco-category-block {
    margin-bottom: 2rem;
}

.sahco-category-header {
    margin-bottom: 3rem;
}

.sahco-category-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    width: 100%;
}

.sahco-category-title-row .sahco-category-title {
    margin: 0;
    /* Remove bottom margin since the row handles it or keep it tight */
}

.sahco-view-all {
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    white-space: nowrap;
    margin-left: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.sahco-view-all svg {
    width: 1em;
    height: 1em;
    stroke-width: 2.5;
    transition: transform 0.3s ease;
}

.sahco-view-all:hover svg {
    transform: translateX(3px);
}


.sahco-category-desc {
    font-size: 1.25rem;
    color: #50575e;
    line-height: 1.4;
    font-weight: 300;
    text-wrap: balance;
    max-width: 900px;
}

.sahco-post-card {
    position: relative;
    background: #ffffff;
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    height: 100%;
    min-height: 480px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    /* opacity: 0 removed so clearProps doesn't revert card to hidden */
}

.sahco-post-thumbnail-link {
    display: block;
    margin-bottom: 0;
    overflow: hidden;
    /* rounded borders removed from here, since parent has them */
}

.sahco-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    max-height: 185px;
}

.sahco-post-card .card-body {
    padding: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.sahco-post-card .card-badges-row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.125rem;
    margin-bottom: 0.25rem;
    max-width: fit-content;
    place-items: start;
}

.sahco-post-card .card-date-badge {
    display: inline-flex;
    align-items: center;
    place-content: center;
    background: transparent;
    color: #686868;
    padding: 0;
    font-family: "Gill Sans", sans-serif;
    font-size: 0.75rem;
    border-radius: 100vmax;
    text-transform: uppercase;
    letter-spacing: -0.0156em;
    font-weight: 400;
}

.sahco-post-card .card-title {
    font-family: "Gill Sans", sans-serif;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 0.5rem;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 4.2em;
    letter-spacing: -0.0326em;
}

.sahco-post-card .card-title a {
    color: var(--e-global-color-primary, #111827);
    text-decoration: none;
    transition: color 0.2s;
    display: inline !important;
}

.sahco-post-card .card-excerpt {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #4b5563;
    flex-grow: 1;
    letter-spacing: -0.035em;
    text-wrap: initial;
    margin-bottom: 1rem;
}

.sahco-post-card .card-button-wrapper {
    margin-top: auto;
}

.sahco-post-card .card-button-wrapper .elementor-button {
    width: 100%;
    display: flex;
    justify-content: center;
}

.sahco-category-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Responsive básico */
@media (max-width: 1024px) {
    .sahco-category-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sahco-category-posts-grid {
        grid-template-columns: 1fr;
    }

    .sahco-category-block {
        padding: 2rem 1.5rem;
    }

}

/* Post Navigation Custom Arrows */
.elementor-post-navigation-borders-yes {
    padding: 32px;
    border-radius: 42px;
    background-color: #AAAAAA40;
}

.elementor-post-navigation {
    padding: 34px;
    border-radius: 32px;
    background: #FFF;
    gap: 1rem;
}

.elementor-post-navigation .post-navigation__arrow-wrapper svg {
    display: none !important;
}

.elementor-post-navigation .post-navigation__arrow-prev::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('/wp-content/uploads/2026/05/arrow_left_alt.svg') no-repeat center / contain;
    mask: url('/wp-content/uploads/2026/05/arrow_left_alt.svg') no-repeat center / contain;
    margin-right: 8px;
    vertical-align: middle;
}

.elementor-post-navigation .post-navigation__arrow-next::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('/wp-content/uploads/2026/05/arrow_right_alt.svg') no-repeat center / contain;
    mask: url('/wp-content/uploads/2026/05/arrow_right_alt.svg') no-repeat center / contain;
    margin-left: 8px;
    vertical-align: middle;
}

p#breadcrumbs {
    font-weight: 400;
}

/* Fix GSAP marquee in RTL */
html[lang="ar"] .marquee-container,
html[lang="ar"] .core-principles,
html[lang="ar"] .gsap-slider-track,
html[lang="ar"] .draggable-slider-wrapper,
html[lang="ar"] .carousel-marquee-wrapper,
body.rtl .marquee-container,
body.rtl .core-principles,
body.rtl .gsap-slider-track,
body.rtl .draggable-slider-wrapper,
body.rtl .carousel-marquee-wrapper {
    direction: ltr !important;
}

html[lang="ar"] .cta-footer p,
body.rtl .cta-footer p {
    line-height: 1 !important;
}

/* Universal LTR Direction for Phone Numbers, Emails & Contact Info in Arabic / RTL Pages */
html[lang^="ar"] a[href^="tel:"],
html[lang^="ar"] a[href^="mailto:"],
html[lang^="ar"] a[href*="@"],
html[lang^="ar"] .contact-info,
html[lang^="ar"] .contact-info *,
html[lang^="ar"] .contact-details,
html[lang^="ar"] .contact-details *,
html[lang^="ar"] .contact-layer-1 a,
html[lang^="ar"] .contact-layer-1 p,
html[lang^="ar"] .contact-layer-2 a,
html[lang^="ar"] .contact-layer-2 p,
html[lang^="ar"] .contact-layer-3 a,
html[lang^="ar"] .contact-layer-3 p,
html[lang^="ar"] [dir="ltr"],
html[lang^="ar"] [dir="ltr"] *,
html[lang^="ar"] input[type="tel"],
html[lang^="ar"] input[type="email"],
html[lang^="ar"] input[name*="email"],
html[lang^="ar"] input[name*="phone"],
html[lang^="ar"] input[name*="tel"],
html[lang^="ar"] input.wpcf7-email,
html[lang^="ar"] input.wpcf7-tel,
html[lang^="ar"] .wpcf7-form-control-wrap[data-name*="email"] input,
html[lang^="ar"] .wpcf7-form-control-wrap[data-name*="phone"] input,
html[lang^="ar"] .wpcf7-form-control-wrap[data-name*="business-email"] input,
body.rtl a[href^="tel:"],
body.rtl a[href^="mailto:"],
body.rtl a[href*="@"],
body.rtl .contact-info,
body.rtl .contact-info *,
body.rtl .contact-details,
body.rtl .contact-details *,
body.rtl .contact-layer-1 a,
body.rtl .contact-layer-1 p,
body.rtl .contact-layer-2 a,
body.rtl .contact-layer-2 p,
body.rtl .contact-layer-3 a,
body.rtl .contact-layer-3 p,
body.rtl [dir="ltr"],
body.rtl [dir="ltr"] *,
body.rtl input[type="tel"],
body.rtl input[type="email"],
body.rtl input[name*="email"],
body.rtl input[name*="phone"],
body.rtl input[name*="tel"],
body.rtl input.wpcf7-email,
body.rtl input.wpcf7-tel,
body.rtl .wpcf7-form-control-wrap[data-name*="email"] input,
body.rtl .wpcf7-form-control-wrap[data-name*="phone"] input,
body.rtl .wpcf7-form-control-wrap[data-name*="business-email"] input,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href*="@"],
html[dir="rtl"] .contact-info,
html[dir="rtl"] .contact-info *,
html[dir="rtl"] .contact-details,
html[dir="rtl"] .contact-details *,
html[dir="rtl"] .contact-layer-1 a,
html[dir="rtl"] .contact-layer-1 p,
html[dir="rtl"] .contact-layer-2 a,
html[dir="rtl"] .contact-layer-2 p,
html[dir="rtl"] .contact-layer-3 a,
html[dir="rtl"] .contact-layer-3 p,
html[dir="rtl"] [dir="ltr"],
html[dir="rtl"] [dir="ltr"] *,
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[name*="email"],
html[dir="rtl"] input[name*="phone"],
html[dir="rtl"] input[name*="tel"],
html[dir="rtl"] input.wpcf7-email,
html[dir="rtl"] input.wpcf7-tel,
html[dir="rtl"] .wpcf7-form-control-wrap[data-name*="email"] input,
html[dir="rtl"] .wpcf7-form-control-wrap[data-name*="phone"] input,
html[dir="rtl"] .wpcf7-form-control-wrap[data-name*="business-email"] input {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: left !important;
}

html[lang^="ar"] .contact-info,
body.rtl .contact-info,
html[dir="rtl"] .contact-info {
    flex-direction: row !important;
    direction: ltr !important;
    justify-content: center !important;
}

/* Controles de paginación universal con gap */
.sahco-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
    width: 100%;
}

/* Fix pagination layout and arrows direction in Arabic / RTL */
html[lang^="ar"] .sahco-pagination,
body.rtl .sahco-pagination,
html[dir="rtl"] .sahco-pagination {
    direction: ltr !important;
    flex-direction: row !important;
}

html[lang^="ar"] .sahco-pagination button svg,
body.rtl .sahco-pagination button svg,
html[dir="rtl"] .sahco-pagination button svg {
    transform: none !important;
}

html[lang^="ar"] .sahco-pagination .sahco-pagination-pages,
body.rtl .sahco-pagination .sahco-pagination-pages,
html[dir="rtl"] .sahco-pagination .sahco-pagination-pages {
    direction: ltr !important;
    flex-direction: row !important;
}

.sahco-pagination .sahco-pagination-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sahco-pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 12px;
    padding: 0;
    font-family: "Gill Sans", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    min-width: 44px;
}

.sahco-pagination button:hover:not(:disabled):not(.active) {
    background: #e5e7eb;
    color: #111827;
}

.sahco-pagination button.active {
    background: #686868;
    color: #ffffff;
    cursor: default;
}

.sahco-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sahco-pagination svg {
    pointer-events: none;
}

.sahco-pagination .sahco-pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: #4b5563;
    min-height: 44px;
    min-width: 24px;
    user-select: none;
}

/* Altura máxima de 185px para imágenes de post / widgets */
.elementor-posts .elementor-post__thumbnail,
.elementor-widget-posts .elementor-post__thumbnail {
    max-height: 185px !important;
    overflow: hidden;
}

.elementor-posts .elementor-post__thumbnail img,
.elementor-widget-posts .elementor-post__thumbnail img,
.elementor-post__thumbnail img {
    max-height: 185px !important;
    height: 185px !important;
    object-fit: cover !important;
    width: 100%;
}

/* Truncar títulos a máximo 3 líneas con ellipsis (...) */
.elementor-post__title,
.sahco-post-title,
.card-title,
.sahco-post-card .card-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: calc(1.35em * 3) !important;
    line-height: 1.35 !important;
    word-break: break-word;
}

.elementor-post__title a,
.sahco-post-title a,
.card-title a,
.sahco-post-card .card-title a {
    display: inline !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
}