/* ==========================================================
   PARTE 1 — BASE
   ========================================================== */

/* ----------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
    /* --- Palette --- */
    --color-blue-dark: #162773;
    --color-blue-mid: #0d2f66;
    /* ex --light-blue   */
    --color-blue-soft: #2e4c7b;
    /* ex --lighter-blue */
    --color-blue-primary: #0090ff;
    --color-gray: #656565;
    --color-white: #ffffff;

    /* --- Aliases semánticos --- */
    --color-text-base: var(--color-blue-dark);
    --color-text-muted: var(--color-gray);
    --color-text-invert: var(--color-white);
    --color-accent: var(--color-blue-primary);
    --color-surface: var(--color-white);

    /* --- Tipografía --- */
    --font-sans: "Poppins", sans-serif;

    /* --- Sección --- */
    --section-padding-y-mobile: 20px;
    --section-padding-y-desktop: 60px;

    /* --- Componente Aliados --- */
    --aliado-w: 260px;
    --aliado-speed: 30s;

    /* --- Transiciones --- */
    --transition-fast: 0.2s ease;
    --transition-base: 0.25s ease;
    --transition-medium: 0.35s ease;
    --transition-slow: 0.4s ease;

    /* --- Sombras --- */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 8px 28px rgba(0, 41, 112, 0.13);
    --shadow-header: 0 0 60px rgba(0, 0, 0, 0.5);
    --shadow-scrolled: 0 4px 24px rgba(0, 41, 112, 0.1);

    /* --- Radios --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 15px;
    --radius-pill: 25px;
}

/* Clase base con tus transiciones */
.btn-rhombus {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    /* Es importante que sea inline-block o block para que el transform funcione */
    display: inline-block;
}

/* Efecto al pasar el cursor (se achica al 95% de su tamaño) */
.btn-rhombus:hover {
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95);
}

/* Efecto al hacer clic (se achica al 90% dando la sensación de ser presionado) */
.btn-rhombus:active {
    -webkit-transform: scale(0.90);
    -moz-transform: scale(0.90);
    -ms-transform: scale(0.90);
    -o-transform: scale(0.90);
    transform: scale(0.90);
}

/* ----------------------------------------------------------
   2. FONTS — @font-face
   ---------------------------------------------------------- */
@font-face {
    font-family: "Poppins";
    src:
        url("../../fonts/Poppins/Poppins-Thin.ttf") format("truetype"),
        url("../../fonts/Poppins/Poppins-Thin.woff2") format("woff2"),
        url("../../fonts/Poppins/Poppins-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:
        url("../../fonts/Poppins/Poppins-ExtraLight.ttf") format("truetype"),
        url("../../fonts/Poppins/Poppins-ExtraLight.woff2") format("woff2"),
        url("../../fonts/Poppins/Poppins-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:
        url("../../fonts/Poppins/Poppins-Light.ttf") format("truetype"),
        url("../../fonts/Poppins/Poppins-Light.woff2") format("woff2"),
        url("../../fonts/Poppins/Poppins-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:
        url("../../fonts/Poppins/Poppins-Regular.ttf") format("truetype"),
        url("../../fonts/Poppins/Poppins-Regular.woff2") format("woff2"),
        url("../../fonts/Poppins/Poppins-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:
        url("../../fonts/Poppins/Poppins-Medium.ttf") format("truetype"),
        url("../../fonts/Poppins/Poppins-Medium.woff2") format("woff2"),
        url("../../fonts/Poppins/Poppins-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:
        url("../../fonts/Poppins/Poppins-SemiBold.ttf") format("truetype"),
        url("../../fonts/Poppins/Poppins-SemiBold.woff2") format("woff2"),
        url("../../fonts/Poppins/Poppins-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:
        url("../../fonts/Poppins/Poppins-Bold.ttf") format("truetype"),
        url("../../fonts/Poppins/Poppins-Bold.woff2") format("woff2"),
        url("../../fonts/Poppins/Poppins-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:
        url("../../fonts/Poppins/Poppins-ExtraBold.ttf") format("truetype"),
        url("../../fonts/Poppins/Poppins-ExtraBold.woff2") format("woff2"),
        url("../../fonts/Poppins/Poppins-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:
        url("../../fonts/Poppins/Poppins-ExtraBoldItalic.ttf") format("truetype"),
        url("../../fonts/Poppins/Poppins-ExtraBoldItalic.woff2") format("woff2"),
        url("../../fonts/Poppins/Poppins-ExtraBoldItalic.woff") format("woff");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:
        url("../../fonts/Poppins/Poppins-Black.ttf") format("truetype"),
        url("../../fonts/Poppins/Poppins-Black.woff2") format("woff2"),
        url("../../fonts/Poppins/Poppins-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------
   3. BASE / RESET
   ---------------------------------------------------------- */
body {
    color: var(--color-text-base);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 14px;
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

#app .container {
    max-width: 1460px;
}

/* ----------------------------------------------------------
   4. LAYOUT
   ---------------------------------------------------------- */
.section-padding {
    padding: var(--section-padding-y-mobile) 0;
}

/* ----------------------------------------------------------
   5. COMPONENT — Header
   ---------------------------------------------------------- */
#header-26 {
    transition: box-shadow var(--transition-base);
}

#header-26.h_fixed {
    position: fixed;
    top: 0;
    background-color: var(--color-blue-dark);
    box-shadow: var(--shadow-header);
    animation: smoothScroll 1s forwards;
}

#header-26.scrolled {
    box-shadow: var(--shadow-scrolled) !important;
}

.header-blue-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 22%;
    height: 100%;
    background-color: var(--color-blue-dark);
    -webkit-mask-image:
        linear-gradient(#000, #000),
        url("../img/valtx-26/home/polg-header2.png");
    mask-image:
        linear-gradient(#000, #000),
        url("../img/valtx-26/home/polg-header2.png");
    -webkit-mask-size:
        calc(100% - 30px) 100%,
        60px 100%;
    mask-size:
        calc(100% - 30px) 100%,
        60px 100%;
    -webkit-mask-position:
        left center,
        right center;
    mask-position:
        left center,
        right center;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    z-index: 0;
}

.mask {
    position: fixed;
    display: none;
    inset: 0;
    height: 150vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1002;
}

#header_menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1003;
    min-height: 510px;
    background-color: var(--color-blue-dark);
    border-radius: 0 0 0 60px;
    transform: translateX(100%);
    transition: transform var(--transition-fast);
}

#header_menu.active {
    width: 290px;
    transform: translateX(0);
}

#header_menu img {
    height: 28px;
}

#menu-header-close {
    top: 0;
    right: 0;
    border-radius: 0 0 0 25px;
}

.btn_open_submenu {
    position: absolute;
    right: 0;
    top: 11px;
    width: 40px;
    padding: 0 10px;
    text-align: center;
    transform: none;
    transition: transform var(--transition-fast);
}

.btn_open_submenu.opened {
    transform: rotate(180deg);
}

button.navbar-toggler {
    display: flex;
    align-items: end;
    flex-direction: column;
    gap: 3px;
}

button.navbar-toggler:focus {
    outline: none;
}

.linea {
    height: 4px;
    background-color: var(--color-blue-primary);
    border-radius: 2px;
}

.linea-1 {
    width: 30px;
}

.linea-2 {
    width: 20px;
}

.linea-3 {
    width: 25px;
}

nav.navbar .logo {
    height: 28px;
}

.navbar-nav>li {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: var(--radius-pill);
}

.navbar-nav>li:hover,
.navbar-nav>li.active {
    color: var(--color-blue-dark);
}

.navbar-nav>li.has-submenu {
    background-color: var(--color-blue-soft);
}

.navbar-nav>li.has-submenu.active {
    background-color: var(--color-blue-mid);
}

.navbar-nav>li>a,
.navbar-nav>li>span {
    position: relative;
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    background-color: var(--color-blue-mid);
    border-radius: var(--radius-pill);
    transition: color var(--transition-fast);
}

.navbar-nav>li>a.active,
.navbar-nav>li>span.active {
    background-color: var(--color-blue-soft);
}

.navbar-nav>li>a~.submenu,
.navbar-nav>li>span~.submenu {
    position: static;
    visibility: hidden;
    opacity: 0;
    height: 0;
    top: calc(100% + 18px);
    left: 50%;
    margin: 0;
    min-width: 100%;
    overflow: hidden;
    transition:
        transform var(--transition-fast),
        visibility 0.5s;
}

.navbar-nav>li:hover .submenu {
    visibility: visible;
    opacity: 1;
}

.navbar-nav>li .submenu ul {
    padding: 10px 0 5px;
    list-style-type: none;
}

.navbar-nav>li .submenu li {
    position: relative;
    padding: 0 20px;
}

.navbar-nav>li .submenu li a {
    padding: 5px 0;
    position: relative;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--transition-fast);
}

.navbar-nav>li .submenu li:hover a,
.navbar-nav>li .submenu li.active a {
    color: var(--color-blue-primary);
}

/* ----------------------------------------------------------
   6. COMPONENT — Hero Slider
   ---------------------------------------------------------- */
.hero-slider {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.hero-slide {
    min-height: 96vh;
    outline: none;
}

.hero-bg-media,
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-bg-media {
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    background: rgba(0, 41, 112, 0.6);
    z-index: 1;
}


.hero-slider .slick-dots {
    position: absolute;
    bottom: 30px;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0;
    list-style: none;
}

.hero-slider .slick-dots li {
    margin: 0 5px;
}

.hero-slider .slick-dots li button {
    display: block;
    width: 12px;
    height: 12px;
    padding: 5px;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
    background: transparent;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    outline: none;
    transition: all var(--transition-base);
}

.hero-slider .slick-dots li button::before {
    content: none;
}

.hero-slider .slick-dots li.slick-active button {
    background: var(--color-blue-primary);
    border-color: var(--color-blue-primary);
}

/* ----------------------------------------------------------
   7. COMPONENT — Buttons
   ---------------------------------------------------------- */
.btn-rhombus {
    -webkit-mask-image: url("../img/valtx-26/home/button.png");
    mask-image: url("../img/valtx-26/home/button.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    border-radius: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.slick-prev,
.slick-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    z-index: 10;
}

.btn-slider-prev,
.btn-slider-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background var(--transition-base);
}

.btn-slider-prev {
    background: var(--color-gray);
}

.btn-slider-next {
    background: var(--color-blue-dark);
}

.btn-slider-prev:hover,
.btn-slider-next:hover {
    background: var(--color-blue-primary);
}

.btn-slider-prev:focus,
.btn-slider-next:focus {
    outline: none;
}

.btn-slider-prev.slick-disabled,
.btn-slider-next.slick-disabled,
.btn-slider-prev.blog-disabled,
.btn-slider-next.blog-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.btn-conoce {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-blue-primary);
    background: rgba(0, 144, 255, 0.08);
    border: none;
    border-radius: 20px;
    text-decoration: none;
    transition:
        background var(--transition-base),
        color var(--transition-base);
}

.btn-conoce i {
    font-size: 11px;
}

.slick-current .services-card .btn-conoce,
.services-card:hover .btn-conoce,
.btn-conoce:hover {
    background: var(--color-blue-primary);
    color: var(--color-white);
    text-decoration: none;
}

/* ----------------------------------------------------------
   8. COMPONENT — Services
   ---------------------------------------------------------- */
.line-title-bottom {
    border-bottom: 1px solid rgb(0 0 0 / 10%);
    padding-bottom: 2.5rem;
}

.services-slider .slick-prev,
.services-slider .slick-next {
    display: none !important;
}

.service-img-wrap {
    position: relative;
    aspect-ratio: 8 / 4;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.service-img-wrap img,
.service-img-wrap .service-number {
    position: absolute;
    inset: 0;
    transition:
        opacity var(--transition-medium),
        transform var(--transition-medium);
}

.service-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    border-radius: var(--radius-md);
}

.service-img-wrap .service-number {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    font-size: 9.5rem;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--color-white);
    text-shadow:
        -1px -1px 0 var(--color-blue-primary),
        1px -1px 0 var(--color-blue-primary),
        -1px 1px 0 var(--color-blue-primary),
        1px 1px 0 var(--color-blue-primary);
    user-select: none;
}

.slick-current .service-img-wrap img,
.services-card:hover .service-img-wrap img {
    opacity: 1;
    transform: scale(1);
}

.slick-current .service-img-wrap .service-number,
.services-card:hover .service-img-wrap .service-number {
    opacity: 0;
}

.services-card {
    transition:
        background var(--transition-base),
        color var(--transition-base);
}

.slick-current .services-card {
    background-color: transparent;
    transition: background-color var(--transition-medium);
}

.slick-current .services-card,
.services-card:hover {
    background-color: color-mix(in oklab,
            var(--color-blue-dark) 10%,
            transparent);
}

.services-card p {
    height: 120px;
}

.service-title {
    height: 70px;
}

.services-card:hover .service-title {
    color: var(--color-blue-dark) !important;
}

/* ----------------------------------------------------------
   9. COMPONENT — Aliados (Infinite Marquee)
   ---------------------------------------------------------- */
.aliados-marquee-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-width: 1660px;
    margin: 0 auto;
}

.aliados-marquee-wrap::before,
.aliados-marquee-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.aliados-marquee-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--color-white), transparent);
}

.aliados-marquee-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--color-white), transparent);
}

.aliados-marquee-move {
    display: flex;
    width: max-content;
    animation: aliados-scroll var(--aliado-speed) linear infinite;
}

.aliados-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    padding: 12px 0;
}

.aliados-marquee-wrap:hover .aliados-marquee-move {
    animation-play-state: paused;
}

.aliado-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--aliado-w);
    flex-shrink: 0;
}

.aliado-logo {
    display: block;
    width: 100%;
    object-fit: contain;
    filter: grayscale(1) opacity(0.65);
    transition:
        filter var(--transition-medium),
        transform var(--transition-medium);
}

.aliado-item:hover .aliado-logo {
    filter: grayscale(0) opacity(1);
    transform: scale(1.06);
}

/* ----------------------------------------------------------
   10. COMPONENT — Certificados
   ---------------------------------------------------------- */
.section-certificado .row {
    height: 760px;
}

.section-certificado picture>img {
    object-fit: cover;
    object-position: center;
}

/* ----------------------------------------------------------
   11. COMPONENT — Blog
   ---------------------------------------------------------- */
.blog-viewport {
    position: relative;
    overflow: hidden;
}

.blog-track {
    display: flex;
    gap: 8px;
    will-change: transform;
}

.blog-slide-item {
    flex: 0 0 calc((100% - 16px) * 0.3);
    min-width: 0;
    /* Sin "transform" aquí: el fade/slide de entrada-salida por scroll
       (clase .gsap-fade-up) anima el transform de este mismo elemento vía
       GSAP; si además hubiera una transición CSS sobre transform, cada
       frame que GSAP escribe reiniciaría esa transición y se vería con tirones. */
    transition: background var(--transition-base);
}



.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--color-white);
    color: inherit;
    text-decoration: none;
    box-shadow: none;
    transition: box-shadow var(--transition-medium);
}

.blog-card:hover {
    color: inherit;
    text-decoration: none;
    box-shadow: none;
}

.blog-card-img {
    flex-shrink: 0;
    width: 100%;
    height: 330px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    transition: aspect-ratio 0.9s cubic-bezier(0.45, 0, 0.15, 1);
}

.blog-slide-item:hover .blog-card-img {
    aspect-ratio: 2 / 1;
}

.blog-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-img img {
    transform: scale(1.02);
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 18px 22px;
}

.blog-card-title {
    height: 80px;
    max-width: 320px;
}

.blog-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    max-width: 250px;
    min-height: 120px;
}

.blog-read-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 14px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-blue-primary);
    border-radius: var(--radius-sm);
    transition:
        background var(--transition-base),
        transform var(--transition-base);
}

.blog-card:hover .blog-read-link {
    background: var(--color-blue-dark);
    transform: translateX(3px);
}

.blog-featured-card,
.blog-small-card {
    overflow: hidden;
}

.blog-featured-card img,
.blog-small-card img {
    transition: transform var(--transition-slow);
}

.blog-featured-card:hover img,
.blog-small-card:hover img {
    transform: scale(1.05);
}

/* ----------------------------------------------------------
   12. UTILITIES — Typography
   ---------------------------------------------------------- */
.font-poppins {
    font-family: var(--font-sans);
}

.font-thin {
    font-weight: 100 !important;
}

.font-extralight {
    font-weight: 200 !important;
}

.font-light {
    font-weight: 300 !important;
}

.font-normal {
    font-weight: 400 !important;
}

b,
.font-medium {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

strong,
.font-bold {
    font-weight: 700 !important;
}

.font-extrabold {
    font-weight: 800 !important;
}

.font-black {
    font-weight: 900 !important;
}

/* Font sizes — mobile (base) */
.text-vsmall {
    font-size: 10px;
}

.text-small {
    font-size: 12px;
}

.text-xsmall {
    font-size: 14px;
}

.text-vnormal {
    font-size: 15px;
}

.text-normal {
    font-size: 16px;
}

.text-xnormal {
    font-size: 17px;
}

.text-vmedium {
    font-size: 18px;
}

.text-medium {
    font-size: 20px;
}

.text-xmedium {
    font-size: 22px;
}

.text-vbig {
    font-size: 24px;
}

.text-big {
    font-size: 26px;
}

.text-xbig {
    font-size: 28px;
}

.text-vhuge {
    font-size: 32px;
}

.text-huge {
    font-size: 36px;
}

.text-xhuge {
    font-size: 40px;
}

.text-title {
    font-size: 24px;
}

.text-banner {
    font-size: 36px;
}

.text-display {
    font-size: 48px;
}

.text-hero {
    font-size: 60px;
}

/* Letter spacing */
.ls-05 {
    letter-spacing: 0.5px;
}

.ls-1 {
    letter-spacing: 1px;
}

.ls-2 {
    letter-spacing: 2px;
}

.ls-3 {
    letter-spacing: 3px;
}

.ls-4 {
    letter-spacing: 4px;
}

/* Line height */
.lh-10 {
    line-height: 1;
}

.lh-11 {
    line-height: 1.1;
}

.lh-12 {
    line-height: 1.2;
}

.lh-13 {
    line-height: 1.3;
}

.lh-14 {
    line-height: 1.4;
}

.lh-15 {
    line-height: 1.5;
}

.lh-16 {
    line-height: 1.6;
}

/* ----------------------------------------------------------
   13. UTILITIES — Color
   ---------------------------------------------------------- */
.text-blue-dark {
    color: var(--color-blue-dark) !important;
}

.text-blue {
    color: var(--color-blue-dark) !important;
}

.text-blue-primary {
    color: var(--color-blue-primary) !important;
}

.text-gray {
    color: var(--color-gray) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.bg-blue-dark {
    background-color: var(--color-blue-dark) !important;
}

.bg-blue-primary {
    background-color: var(--color-blue-primary) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-gray {
    background-color: var(--color-gray) !important;
}

/* ----------------------------------------------------------
   14. UTILITIES — Misc
   ---------------------------------------------------------- */
.transition-smooth {
    transition: all 0.3s ease-in-out;
}

/* ----------------------------------------------------------
   15. ANIMATIONS — Keyframes & delay helpers
   ---------------------------------------------------------- */
.animate__delay-200ms {
    animation-delay: 0.2s;
}

.animate__delay-400ms {
    animation-delay: 0.4s;
}

.animate__delay-600ms {
    animation-delay: 0.6s;
}

.animate__delay-800ms {
    animation-delay: 0.8s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes aliados-scroll {
    from {
        transform: translateX(0);
    }

    to {
        /* -50% porque .aliados-marquee-move contiene el track original + su clon:
           desplazar la mitad del ancho total equivale a un ciclo completo del track original. */
        transform: translateX(-50%);
    }
}

@keyframes smoothScroll {
    from {
        transform: translateY(-150px);
    }

    to {
        transform: translateY(0);
    }
}

/* ==========================================================
   PARTE 2 — MEDIA QUERIES
   Todas las queries juntas, ordenadas de menor a mayor.
   ========================================================== */
.bg-cta {
    background-image: url('../img/soluciones/soluciones-tecnologicas/bg-3-xs.jpg');
}

/* ----------------------------------------------------------
   MQ-1  max-width: 767px  (mobile)
   ---------------------------------------------------------- */
@media (max-width: 767px) {

    /* Tokens — Aliados */
    :root {
        --aliado-w: 180px;
        --aliado-speed: 20s;
    }

    /* Aliados */
    .aliados-marquee-wrap::before,
    .aliados-marquee-wrap::after {
        width: 48px;
    }

    /* Blog — mobile: 1 card a todo el ancho */
    .blog-track {
        gap: 0;
    }

    .blog-slide-item,
    .blog-slide-item.active {
        flex: 0 0 100%;
    }

    .blog-card-img,
    .blog-slide-item:hover .blog-card-img {
        aspect-ratio: 16 / 9 !important;
    }

    .blog-card-title {
        height: 60px;
    }

    .blog-card-desc {
        min-height: 100px;
    }
}

/* ----------------------------------------------------------
   MQ-2  max-width: 991px  (mobile + tablet)
   ---------------------------------------------------------- */
@media (max-width: 991px) {

    /* Header */
    .header-blue-shape {
        width: 220px;
    }

}

/* ----------------------------------------------------------
   MQ-2b  768px – 991px  (Blog: solo tablet, 2 cards)
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {

    /* Blog */
    .blog-track {
        gap: 12px;
    }

    .blog-slide-item {
        flex: 0 0 calc((100% - 12px) * 0.35);
    }


}

/* ----------------------------------------------------------
   MQ-3  min-width: 768px  (tablet y superior)
   ---------------------------------------------------------- */
@media screen and (min-width: 768px) {

    /* Certificados */
    .section-certificado .row {
        min-height: 460px;
    }

    .section-certificado picture>img {
        object-position: 65% center;
    }
}

/* ----------------------------------------------------------
   MQ-4  min-width: 768px and max-width: 991px  (tablet only)
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {

    /* Tokens — Aliados */
    :root {
        --aliado-w: 220px;
    }
}

/* ----------------------------------------------------------
   MQ-5  min-width: 992px  (desktop)
   ---------------------------------------------------------- */
@media screen and (min-width: 992px) {

    /* Layout */
    .section-padding {
        padding: var(--section-padding-y-desktop) 0;
    }

    /* Header — menú lateral pasa a ser inline */
    #header_menu {
        position: static;
        min-height: auto;
        background-color: transparent !important;
        background-image: none;
        border-radius: 0;
        transform: none;
    }

    .btn_open_submenu {
        right: -20p !important;
        color: #0090ff !important;
        top: 9px !important;
    }

    nav.navbar .logo {
        height: 28px;
    }

    .navbar-nav>li {
        flex-direction: row;
    }

    .navbar-nav>li>a,
    .navbar-nav>li>span,
    .navbar-nav>li.has-submenu,
    .navbar-nav>li.has-submenu.active {
        background-color: transparent;
    }

    .navbar-nav>li>a.active,
    .navbar-nav>li>span.active {
        background-color: transparent;
    }

    .navbar-nav>li>a:hover,
    .navbar-nav>li>span:hover {
        color: var(--color-blue-primary) !important;
    }

    .navbar-nav>li>a.btn-rhombus:hover {
        color: inherit !important;
    }

    /* Submenú flotante */
    .navbar-nav>li>a~.submenu,
    .navbar-nav>li>span~.submenu {
        position: absolute;
        height: auto;
        min-width: 310px;
        overflow: inherit;
        background-color: white !important;
        border-radius: var(--radius-lg);
        transform: translateX(-50%);
        z-index: 900;
    }

    /* Flecha del submenú */
    .navbar-nav>li>.submenu::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 15px 15px 15px;
        border-color: transparent transparent var(--color-blue-dark) transparent;
        transform: translateX(-50%) translateY(-100%);
    }

    /* Dot decorativo en links del submenú */
    .navbar-nav>li .submenu li a::before {
        content: "";
        position: absolute;
        left: -12px;
        top: 12px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: var(--color-blue-primary);
    }

    .submenu ul li.nav-item a.nav-link {
        color: var(--color-blue-dark) !important;
    }

    .submenu ul li.nav-item a.nav-link:hover {
        color: var(--color-blue-primary) !important;
    }

    .text-lg-blue {
        color: var(--color-blue-dark) !important;
    }

    .header_xs_mobile {
        width: auto;
    }

    /* Buttons */
    .btn-slider-prev,
    .btn-slider-next {
        width: 60px;
        height: 60px;
    }

    /* Typography — font sizes desktop */
    .text-vsmall {
        font-size: 12px;
    }

    .text-small {
        font-size: 14px;
    }

    .text-xsmall {
        font-size: 16px;
    }

    .text-vnormal {
        font-size: 16px;
    }

    .text-normal {
        font-size: 18px;
    }

    .text-xnormal {
        font-size: 20px;
    }

    .text-vmedium {
        font-size: 22px;
    }

    .text-medium {
        font-size: 24px;
    }

    .text-xmedium {
        font-size: 26px;
    }

    .text-vbig {
        font-size: 30px;
    }

    .text-big {
        font-size: 34px;
    }

    .text-xbig {
        font-size: 38px;
    }

    .text-vhuge {
        font-size: 45px;
    }

    .text-huge {
        font-size: 52px;
    }

    .text-xhuge {
        font-size: 60px;
    }

    .text-banner {
        font-size: 60px;
    }

    .text-title {
        font-size: 45px;
    }

    .text-display {
        font-size: 72px;
    }

    .text-hero {
        font-size: 80px;
    }

    .bg-cta {
        background-image: url('../img/soluciones/soluciones-tecnologicas/bg-3.jpg');
    }
}

/* ----------------------------------------------------------
   MQ-6  min-width: 1460px  (wide)
   ---------------------------------------------------------- */
@media (min-width: 1460px) {

    /* Header — ancla la forma azul al logo en pantallas anchas */
    .header-blue-shape {
        width: calc((100% - 1460px) / 2 + 320px);
    }
}

/* ----------------------------------------------------------
   15. COMPONENT — ScrollReveal Animations
   ---------------------------------------------------------- */
.scroll-anim-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

.scroll-anim-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-anim-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

.scroll-anim-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

label.error { display: block; width: 100%; text-align: left; color: red; margin: 0; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }