/* Geomanist: ruta absoluta desde la raíz del sitio (Firefox resuelve bien así) */
/* Fuentes en: /assets/fonts/ */
/* NORMAL */
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Book.woff2') format('woff2'); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Medium.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

/* ITALIC */
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Thin-Italic.woff2') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Light-Italic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Light-Italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Book-Italic.woff2') format('woff2'); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Regular-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Medium-Italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Medium-Italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Bold-Italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('/assets/fonts/Geomanist-Black-Italic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

/* Base tipografía para Windows y Firefox (cuerpos consistentes) */
html { font-size: 16px; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Preloader: bloque de fondo + logos en pastilla */
#preloader.preloader--blocks-out .preloader-block {
    transform: translateY(120vh) scaleY(1.1);
}
.preloader-block {
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navegación interna: solo verde, sin logos */
#preloader.preloader--minimal .preloader-stage,
html.smk-minimal-preload .preloader-stage,
#preloader.preloader--minimal .preloader-progress,
html.smk-minimal-preload .preloader-progress {
    display: none !important;
}

#preloader.preloader--cover-in {
    display: flex !important;
}

#preloader.preloader--cover-in .preloader-block {
    transform: translateY(-110%);
    transition: none;
}

#preloader.preloader--cover-in.preloader--covering .preloader-block {
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

#preloader.preloader--minimal.preloader--blocks-out .preloader-block {
    transition-duration: 0.55s;
}

.preloader-stage {
    pointer-events: none;
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

.preloader-module {
    --preloader-module-size: 6.5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--preloader-module-size);
    height: var(--preloader-module-size);
    padding: 1.15rem;
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.preloader-logo-slot {
    position: relative;
    width: 100%;
    height: 100%;
}

.preloader-logo {
    position: absolute;
    inset: 0;
    margin: auto;
    display: block;
    width: auto;
    height: 62%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

.preloader-logo.is-active {
    opacity: 1;
    transform: scale(1);
}

.preloader-logo--brand {
    height: 42%;
    max-width: 76%;
}

.preloader-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    height: 3px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
    pointer-events: none;
}

.preloader-progress-bar {
    height: 100%;
    width: 0%;
    background: #fff;
    transform-origin: left center;
    transition: width 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: width;
}

#preloader.preloader--content-out .preloader-module {
    opacity: 0;
    transform: translateY(-12vh);
    transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

#preloader.preloader--content-out .preloader-progress {
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (min-width: 640px) {
    .preloader-module {
        --preloader-module-size: 8rem;
        padding: 1.35rem;
        border-radius: 1.85rem;
    }

    .preloader-progress {
        height: 4px;
    }
}

/* Cursor global: círculo pequeño que al crecer pasa a rectángulo con bordes redondeados (pill) */
.global-cursor {
    display: none;
    border-radius: 50%;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease-out;
}
.global-cursor.global-cursor--hidden {
    opacity: 0;
    pointer-events: none;
}
/* Fusión con play: cursor se reduce y se “pega” al círculo del play (animación pegajosa) */
.global-cursor.global-cursor--fusing {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}
.global-cursor.global-cursor--grown {
    width: 6.5rem !important;
    height: 6.5rem !important;
    min-width: unset;
    padding: 1.25rem 1.5rem;
    border-radius: 50%;
}
.global-cursor.global-cursor--grown .global-cursor-text {
    opacity: 1;
    font-size: 0.9375rem; /* un poco más pequeño para que quepa en el círculo */
    font-weight: 700;
}
.global-cursor.global-cursor--link {
    width: 1rem !important;
    height: 1rem !important;
    border-radius: 50%;
}
.global-cursor-text {
    font-size: 1.2rem;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
/* Flecha diagonal derecha-arriba por defecto */
.global-cursor-text::after {
    content: '↗';
    font-weight: 300;
    font-size: 1.25em;
    line-height: 1;
}
.global-cursor-text:empty::after,
.global-cursor:not(.global-cursor--grown) .global-cursor-text::after {
    content: none;
}
/* Arrastrar: dos flechas ← texto → */
.global-cursor--double-arrow .global-cursor-text::before {
    content: '← ';
    font-weight: 300;
    font-size: 1em;
    line-height: 1;
}
.global-cursor--double-arrow .global-cursor-text::after {
    content: ' →';
    font-weight: 300;
    font-size: 1em;
    line-height: 1;
}
.global-cursor--double-arrow .global-cursor-text:empty::before,
.global-cursor:not(.global-cursor--grown).global-cursor--double-arrow .global-cursor-text::before {
    content: none;
}
@media (pointer: fine) {
    body {
        cursor: none;
    }
    a,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    summary {
        cursor: none !important;
    }
    .global-cursor {
        display: flex !important;
    }
}
@media (pointer: coarse) {
    .global-cursor {
        display: none !important;
    }
}
/* Ocultar el círculo duplicado en cada imagen; el cursor global es el que crece y muestra el texto */
.image-hover-circle .cursor-vermas-spot {
    display: none !important;
}

/* Un solo cursor en toda la página: ocultar burbujas separadas de CTA, Nav y Noticias */
.cta-cursor-bubble,
.nav-git-bubble,
.news-cursor-arrastrar {
    display: none !important;
}

/* Cursor circular accent: círculo dentro del botón, detrás del texto, sigue el ratón */
.cursor-accent-circle-spot {
    width: 6rem;
    height: 6rem;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    z-index: 0;
}
.cursor-accent-circle-spot.is-visible {
    opacity: 1;
}

/* Word list: título centrado por sí solo (grid 1fr auto 1fr), imagen a la derecha sin afectar centro */
.word-list-row {
    min-height: 0;
}
.word-list-word {
    line-height: 1; /* evita altura extra del titular y acerca la descripción */
}
.word-list-item {
    opacity: 0;
    transform: scale(0.96);
    overflow: visible; /* que no corte la imagen ni el título al animar */
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.word-list-img {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.word-list-img-wrap {
    overflow: visible; /* que no corte la imagen por abajo */
    flex-shrink: 0;
    max-height: none;
    max-width: 0;
    transition: max-width 0.55s cubic-bezier(0.32, 0.72, 0, 1),
                max-height 0.55s cubic-bezier(0.32, 0.72, 0, 1),
                margin 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}
.word-list-item--center .word-list-img-wrap {
    max-height: 9rem;  /* sm:h-36 */
    max-width: 9rem;
}
/* Ítems con varias palabras: hueco de la imagen cerrado por defecto; JS lo abre al centrarse */
.word-list-item--multi .word-list-img-wrap {
    max-width: 0;
    margin-left: -24px;
    margin-right: -24px;
}

/* Descripción del servicio: no ocupa espacio hasta que el ítem está centrado; animación muy suave */
.word-list-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0.15rem; /* aún más pegado al titular */
    transform: translateY(4px); /* arranca casi pegado al titular */
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                max-height 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.word-list-item--center .word-list-desc {
    opacity: 1;
    max-height: 20em;
    transform: translateY(0);
}

/* Celda de imagen: un pequeño margen respecto al titular, pero manteniendo la imagen a la derecha */
.word-list-img-cell {
    padding-left: 1.25rem; /* más separación respecto al titular */
    display: flex;
    align-items: center; /* centra verticalmente la imagen respecto al titular */
}

/* ========== Animación de aparición para imágenes (estilo preloader) ========== */
.reveal-image {
    overflow: hidden;
    position: relative;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); /* Oculto desde abajo */
    transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: clip-path, opacity;
    opacity: 0;
}

.reveal-image.reveal-image--visible {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Visible completo */
    opacity: 1;
}

/* Al cerrar: se cierra de abajo a arriba (la imagen “sale” hacia arriba). La siguiente se abre de abajo a arriba. */
.reveal-image.reveal-image--closing {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); /* Se cierra hacia arriba */
    opacity: 1;
}

/* Cursor "ver más": círculo accent con texto, DENTRO de cada imagen; por delante del cursor global */
.cursor-vermas-spot {
    position: absolute;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: #CED424;
    color: #2E3B4B;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease-out;
    z-index: 1000000; /* por delante del cursor global (z-[999999]) */
}
.cursor-vermas-spot.is-visible {
    opacity: 1;
}
.cursor-vermas-spot .cursor-vermas-text {
    font-size: 1.2rem;
    white-space: nowrap;
}
.image-hover-circle {
    cursor: none;
}

/* Services: círculo sigue el cursor (igual que antes) y anima scale 0→1 al entrar, 1→0 al salir */
.image-hover-circle--expand .cursor-vermas-spot {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.image-hover-circle--expand .cursor-vermas-spot.is-visible {
    transform: translate(-50%, -50%) scale(1);
}

/* Para imágenes dentro de contenedores reveal - la imagen no se deforma */
.reveal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: none;
}

/* Hero parallax: scale se aplica desde el centro (alejándose) */
.hero-image-parallax-img {
    will-change: transform;
    transform-origin: center center;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hero-logo-bar {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ========== Animación de aparición para textos (línea por línea) ========== */
.reveal-text {
    overflow: hidden;
    display: block;
    visibility: hidden; /* Oculto hasta que se procese */
}

.reveal-text.reveal-text--processed {
    visibility: visible; /* Visible una vez procesado */
}

/* Textos grandes (ej. nombre de servicio): no recortar altura */
.reveal-text.reveal-text--no-clip {
    overflow: visible;
}

.reveal-line {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.reveal-text.reveal-text--visible .reveal-line {
    transform: translateY(0);
    opacity: 1;
}

/* Delays escalonados para cada línea */
.reveal-text.reveal-text--visible .reveal-line:nth-child(1) { transition-delay: 0s; }
.reveal-text.reveal-text--visible .reveal-line:nth-child(2) { transition-delay: 0.1s; }
.reveal-text.reveal-text--visible .reveal-line:nth-child(3) { transition-delay: 0.2s; }
.reveal-text.reveal-text--visible .reveal-line:nth-child(4) { transition-delay: 0.3s; }
.reveal-text.reveal-text--visible .reveal-line:nth-child(5) { transition-delay: 0.4s; }
.reveal-text.reveal-text--visible .reveal-line:nth-child(6) { transition-delay: 0.5s; }
.reveal-text.reveal-text--visible .reveal-line:nth-child(7) { transition-delay: 0.6s; }
.reveal-text.reveal-text--visible .reveal-line:nth-child(8) { transition-delay: 0.7s; }
.reveal-text.reveal-text--visible .reveal-line:nth-child(9) { transition-delay: 0.8s; }
.reveal-text.reveal-text--visible .reveal-line:nth-child(10) { transition-delay: 0.9s; }

/* Nav/menu visual states moved to utilities in Blade */

/* Primera palabra tabulada (solo esa palabra) */
.first-word-indent {
    margin-left: 10vw;
    display: inline-block;
}

/* ========== Clients logos: 3 filas en scroll horizontal infinito ========== */
.clients-logos-section .client-logo img {
    filter: grayscale(100%);
    opacity: 0.7;
}
.clients-logos-section .clients-row {
    margin-bottom: 4px;
}
.clients-logos-section .clients-row:last-child {
    margin-bottom: 0;
}
.clients-logos-section .clients-row:last-child .clients-row-inner {
    margin-left: 18rem;
}
.clients-row-inner {
    gap: 4px;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.clients-row--left .clients-row-inner {
    animation-name: clients-scroll-left;
}
.clients-row--right .clients-row-inner {
    animation-name: clients-scroll-right;
}
@keyframes clients-scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes clients-scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* About: scroll vertical mueve la sección horizontalmente (4 bloques) */
.about-horizontal {
    position: relative;
}
.about-horizontal-sticky {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
}
.about-horizontal-strip {
    width: max-content;
    align-items: center;
    gap: 1rem;
}
.about-horizontal-strip .about-block {
    margin-right: 0;
}
.about-horizontal-strip .about-block--image,
.about-horizontal-strip .about-block--text {
    border-radius: 10rem;
    overflow: hidden;
    margin-top: 3rem;
    margin-bottom: 3rem;
    height: calc(100% - 6rem);
    min-height: 0;
}
.about-image-loop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.about-image-loop img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.9s ease, transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.about-image-loop img.is-active {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
}
/* Bloque ecosistema: sin transición para que siga el scroll sin retrasos ni saltos */
#about-block-ecosistema {
    transition: none;
    will-change: transform;
}

/* Título ecosistema: desaparece hacia arriba cuando el primer bloque texto llega a mitad de pantalla */
.about-ecosistema-title {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.about-ecosistema-title.about-ecosistema-title--hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}
.about-horizontal-strip .about-block:last-child {
    margin-right: 0;
}
.about-horizontal-spacer {
    height: 0; /* altura real: script.js según ancho del strip (1:1 con scroll Lenis) */
    pointer-events: none;
}

/* Mobile / tablet (< lg = 1024px): bloques apilados verticalmente con scroll normal */
@media (max-width: 1023.98px) {
    #about-horizontal-section {
        height: auto !important;
    }
    .about-horizontal-sticky {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        overflow: visible !important;
    }
    .about-horizontal-strip {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        align-items: stretch !important;
        gap: 1rem;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        transform: none !important;
        will-change: auto;
    }
    .about-horizontal-strip .about-block {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex-shrink: 0;
        flex-basis: auto;
    }
    .about-horizontal-strip .about-block--image {
        aspect-ratio: 4 / 3;
        border-radius: 1.25rem;
        margin: 0;
        min-height: 0;
    }
    .about-horizontal-strip .about-block--image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .about-horizontal-strip .about-block--text {
        border-radius: 1.25rem;
        margin: 0;
        min-height: 0;
        gap: 1.5rem;
    }
    /* Ecosistema fijo: en mobile no se contra-traslada */
    #about-block-ecosistema {
        transform: none !important;
    }
    .about-ecosistema-title.about-ecosistema-title--hidden {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }
    .about-horizontal-spacer {
        display: none !important;
        height: 0 !important;
    }
}

/* ========== Lenis smooth scroll (estilo Widelab) ========== */
html.lenis,
html.lenis body {
    height: auto;
}

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

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

.lenis.lenis-dragging {
    pointer-events: none;
}

.lenis.lenis-dragging [data-lenis-prevent] {
    pointer-events: auto;
}

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

.lenis.lenis-smooth iframe {
    pointer-events: none;
}


/* Nav móvil fullscreen: el drawer con .is-open debe crecer dentro del flex (no expresa bien en utilidades solas) */
@media (max-width: 1023px) {
    .nav-burger-dropdown {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nav-burger-dropdown::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
        background: transparent;
    }

    .nav-menu-block {
        will-change: transform, border-radius, top, right, bottom, left, padding;
    }

    .nav-menu-block.nav-menu-block--fullscreen #nav-burger-drawer.is-open {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow: hidden;
    }

    .nav-menu-block.nav-menu-block--fullscreen #nav-burger-drawer.is-open {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nav-menu-block.nav-menu-block--fullscreen #nav-burger-drawer.is-open::-webkit-scrollbar {
        display: none;
    }

    .nav-menu-block.nav-menu-block--fullscreen #nav-burger-drawer .nav-burger-links {
        max-height: calc(100dvh - 7.5rem);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nav-menu-block.nav-menu-block--fullscreen #nav-burger-drawer .nav-burger-links::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
        background: transparent;
    }

    .nav-menu-block.nav-menu-block--fullscreen #nav-burger-drawer .nav-burger-scroll-fade {
        opacity: 0;
        background: linear-gradient(to bottom, rgba(42, 42, 45, 0), rgba(42, 42, 45, 0.96) 58%, rgba(42, 42, 45, 1));
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        transition: opacity 0.28s ease;
    }

    .nav-menu-block.nav-menu-block--fullscreen #nav-burger-drawer.is-open .nav-burger-scroll-fade {
        opacity: 1;
    }

    /* Capa de fondo que “sube” como líquido; logo + botón quedan en capa superior sin moverse */
    .nav-menu-block .nav-menu-fill-surface {
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        pointer-events: none;
        background: #2a2a2d;
        transform: translate3d(0, 112%, 0) skewY(7deg) scale(1.05, 1.02);
        transform-origin: 50% 0%;
        opacity: 0;
        visibility: hidden;
        transition:
            transform 0.68s cubic-bezier(0.4, 0.05, 0.15, 1),
            opacity 0.34s ease,
            visibility 0s linear 0.65s;
    }

    .nav-menu-block.nav-menu-block--fullscreen .nav-menu-fill-surface {
        visibility: visible;
        opacity: 1;
        transform: translate3d(0, 0, 0) skewY(0deg) scale(1, 1);
        transition:
            transform 1.02s cubic-bezier(0.16, 1, 0.22, 1),
            opacity 0.28s ease,
            visibility 0s;
    }

}

/* Burger mobile */
body.nav-burger-open {
    overflow: hidden;
}
.getintouch-open {
    overflow: hidden; /* bloquear scroll cuando el modal Get in touch está abierto */
}

/* Mega menú: estilos movidos a utilities en HTML */

/* Formulario Get in touch: card lima, inputs solo subrayado, checkboxes cuadrados, botón oscuro */
.getintouch-form-wrap {
    -webkit-overflow-scrolling: touch;
}
.getintouch-input {
    transition: border-color 0.2s ease;
}
.getintouch-input::placeholder {
    color: rgba(26, 26, 26, 0.6);
}
.getintouch-textarea {
    min-height: 4rem;
}
.getintouch-checkbox {
    flex-shrink: 0;
    accent-color: #fff;
}
.getintouch-checkbox:checked {
    background-color: #fff;
}
.getintouch-submit {
    box-shadow: 0 2px 12px rgba(26, 26, 26, 0.25);
}

/* Noticias: scroll horizontal tipo móvil, sin barra de scroll visible */
.news-mobile-scroll::-webkit-scrollbar {
    display: none;
}
.news-card-overlay {
    backdrop-filter: none;
}

/* Nav desktop: botón "Tiendas" + órbita vertical de tiendas */
.nav-stores-wrap {
    z-index: 30;
}

.nav-stores-orbit {
    pointer-events: none;
    z-index: 1;
}

.nav-stores-orbit::before {
    content: "";
    position: absolute;
    top: -1.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5.2rem;
    height: 1.2rem;
    pointer-events: auto;
}

.nav-stores-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    padding: 0.32rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 28px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translate3d(0, -14px, 0) scale(0.78) rotate(-6deg);
    transform-origin: 50% 50%;
    transition:
        transform 0.64s cubic-bezier(0.2, 0.9, 0.24, 1),
        opacity 0.34s ease,
        box-shadow 0.28s ease;
}

.nav-stores-item:hover {
    transform: translate3d(0, 0, 0) scale(1.14) rotate(0deg) !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.14), 0 10px 36px rgba(0, 0, 0, 0.1);
}

.nav-stores-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-stores-wrap > button:hover + .nav-stores-orbit,
.nav-stores-wrap > button:focus-visible + .nav-stores-orbit,
.nav-stores-wrap > .nav-stores-orbit:hover,
.nav-stores-wrap > .nav-stores-orbit:focus-within {
    pointer-events: auto;
}

.nav-stores-wrap > button:hover + .nav-stores-orbit .nav-stores-item,
.nav-stores-wrap > button:focus-visible + .nav-stores-orbit .nav-stores-item,
.nav-stores-wrap > .nav-stores-orbit:hover .nav-stores-item,
.nav-stores-wrap > .nav-stores-orbit:focus-within .nav-stores-item {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

.nav-stores-wrap .nav-stores-item:nth-child(1) { transition-delay: 0ms; }
.nav-stores-wrap .nav-stores-item:nth-child(2) { transition-delay: 28ms; }
.nav-stores-wrap .nav-stores-item:nth-child(3) { transition-delay: 56ms; }
.nav-stores-wrap .nav-stores-item:nth-child(4) { transition-delay: 84ms; }
.nav-stores-wrap .nav-stores-item:nth-child(5) { transition-delay: 112ms; }
.nav-stores-wrap .nav-stores-item:nth-child(6) { transition-delay: 140ms; }
.nav-stores-wrap .nav-stores-item:nth-child(7) { transition-delay: 168ms; }
.nav-stores-wrap .nav-stores-item:nth-child(8) { transition-delay: 196ms; }
.news-play-btn {
    transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.news-play-btn.is-bubble-fused {
    width: 5.5rem;
    height: 5.5rem;
    background: #CED424;
    color: #2E3B4B;
    border-color: transparent;
}
.news-play-btn.is-bubble-fused svg {
    width: 1.5rem;
    height: 1.5rem;
}
.news-cursor-arrastrar {
    position: absolute;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: #CED424;
    color: #2E3B4B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 350;
    white-space: nowrap;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    z-index: 10;
    pointer-events: none;
}
.news-cursor-arrastrar .cursor-vermas-text {
    font-size: 1.4rem;
}
.news-cursor-arrastrar.is-visible {
    transform: translate(-50%, -50%) scale(1);
}
.news-cursor-arrastrar.is-pressed {
    transform: translate(-50%, -50%) scale(0.75);
}
.news-carrusel-wrap.is-dragging .news-cursor-arrastrar {
    transform: translate(-50%, -50%) scale(0.75);
}
.news-cursor-arrastrar.is-over-play {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}
/* Ocultar cursor del sistema cuando la burbuja está visible */
.news-carrusel-wrap.bubble-cursor-active,
.news-carrusel-wrap.bubble-cursor-active * {
    cursor: none !important;
}

/* CTA Get in touch: círculo que sigue cursor y se fusiona con el botón */
.cta-getintouch-module {
    min-height: 12rem;
}
.cta-cursor-bubble {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #CED424;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.2s ease-out;
    z-index: 5;
    pointer-events: none;
}
.cta-getintouch-module.bubble-active .cta-cursor-bubble.is-visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.cta-cursor-bubble.is-over-btn {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}
.cta-git-circle-wrap {
    overflow: visible;
    width: 3.5rem;
    height: 3.5rem;
}
.cta-git-circle {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5rem;
    height: 3.5rem;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease-out, height 0.3s ease-out, background 0.3s ease-out, border-color 0.3s ease-out;
}
.cta-git-circle.is-fused {
    width: 5.5rem;
    height: 5.5rem;
    transform: translateY(-50%);
    background: #CED424;
    border-color: #CED424;
}
.cta-git-circle.is-fused svg {
    color: #2E3B4B;
}
.cta-git-btn.is-fused .cta-git-btn-text {
    color: #CED424;
}
.cta-getintouch-module.bubble-active,
.cta-getintouch-module.bubble-active * {
    cursor: none !important;
}

/* Nav Get in touch: mismo efecto burbuja + círculo que crece al acercarse */
.nav-git-bubble {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #CED424;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.2s ease-out;
    z-index: 10;
    pointer-events: none;
}
.nav-getintouch-trigger.bubble-active .nav-git-bubble.is-visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.nav-git-bubble.is-over-btn {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}
.nav-git-circle-wrap {
    overflow: visible;
    width: 3.5rem;
    height: 3.5rem;
}
.nav-git-circle {
    width: 3.5rem;
    height: 3.5rem;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease-out, height 0.3s ease-out, background 0.3s ease-out, border-color 0.3s ease-out;
}
.nav-git-circle.is-fused {
    width: 5.5rem;
    height: 5.5rem;
    transform: translateY(-50%);
    background: #CED424;
    border-color: #CED424;
}
.nav-git-circle.is-fused svg {
    color: #2E3B4B;
}
.nav-git-btn.is-fused .nav-git-btn-text {
    color: #CED424;
}
.nav-getintouch-trigger.bubble-active,
.nav-getintouch-trigger.bubble-active * {
    cursor: none !important;
}

/* Zona de fondo rojo desde Intro: transición suave por scroll (--scroll-bg-progress 0→1 en JS) */
.scroll-bg-zone {
    --scroll-bg-progress: 0;
    background: color-mix(in srgb, #fff calc(100% - 100% * var(--scroll-bg-progress, 0)), #CED424);
    transition: background 0.1s ease-out;
}
.scroll-bg-zone .intro-scroll-title {
    color: color-mix(in srgb, #000 calc(100% - 100% * var(--scroll-bg-progress, 0)), #2E3B4B);
    transition: color 0.2s ease-out;
}
.scroll-bg-zone .intro-scroll-accent {
    color: color-mix(in srgb, #a1a1aa calc(100% - 100% * var(--scroll-bg-progress, 0)), #fff);
    transition: color 0.2s ease-out;
}

/* Variante dark: fondo blanco → dark, texto dark → light (services) */
.scroll-bg-zone--dark {
    background: color-mix(in srgb, #fff calc(100% - 100% * var(--scroll-bg-progress, 0)), #2E3B4B);
}
.scroll-bg-zone--dark h1,
.scroll-bg-zone--dark h2,
.scroll-bg-zone--dark h3,
.scroll-bg-zone--dark p,
.scroll-bg-zone--dark .nav-git-btn-text,
.scroll-bg-zone--dark .reveal-text,
.scroll-bg-zone--dark a.getintouch-btn {
    color: color-mix(in srgb, #2E3B4B calc(100% - 100% * var(--scroll-bg-progress, 0)), #fff) !important;
    transition: color 0.2s ease-out;
}
.scroll-bg-zone--dark .text-zinc-300 {
    color: color-mix(in srgb, #a1a1aa calc(100% - 100% * var(--scroll-bg-progress, 0)), rgba(255,255,255,0.9)) !important;
    transition: color 0.2s ease-out;
}

/* Services: masonry → scroll horizontal (blanco → zinc-900, mismo tono que about-horizontal) */
.scroll-bg-zone--zinc-900 {
    background: color-mix(in srgb, #fff calc(100% - 100% * var(--scroll-bg-progress, 0)), #18181b);
    transition: background 0.1s ease-out;
}
.scroll-bg-zone--zinc-900 h2 {
    color: color-mix(in srgb, #2A2A2D calc(100% - 100% * var(--scroll-bg-progress, 0)), #fff) !important;
    transition: color 0.2s ease-out;
}

/* Bloques de servicio: transición encadenada por scroll (--bg-from, --bg-to, --text-from, --text-to por bloque) */
.service-block-bg {
    --scroll-bg-progress: 0;
    --bg-from: #fff;
    --bg-to: #2E3B4B;
    --text-from: #2E3B4B;
    --text-to: #fff;
    background: color-mix(in srgb, var(--bg-from) calc(100% - 100% * var(--scroll-bg-progress, 0)), var(--bg-to));
    transition: background 0.1s ease-out;
}
.service-block-bg h1,
.service-block-bg h2,
.service-block-bg h3,
.service-block-bg p,
.service-block-bg .reveal-text {
    color: color-mix(in srgb, var(--text-from) calc(100% - 100% * var(--scroll-bg-progress, 0)), var(--text-to)) !important;
    transition: color 0.2s ease-out;
}
.service-block-bg .text-zinc-300,
.service-block-bg .text-white\/50 {
    color: color-mix(in srgb, var(--text-from) calc(80% - 80% * var(--scroll-bg-progress, 0)), rgba(255,255,255,0.9)) !important;
    transition: color 0.2s ease-out;
}

/* Footer: oculto durante el preloader, visible solo cuando termina la carga */
.footer-back {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
}
.footer-back.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Announcement bar: cerrada con X (oculta con transición) */
.announcement-bar.announcement-bar--closed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}