.elementor-kit-5{--e-global-color-primary:#F0EEEB;--e-global-color-secondary:#D6D2C8;--e-global-color-text:#202123;--e-global-color-accent:#FB382F;--e-global-color-867d0c6:#FFFFFF00;--e-global-color-6f4d906:#FFFFFF;--e-global-typography-primary-font-family:"Helvetica";--e-global-typography-primary-font-size:6rem;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:1em;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-size:4rem;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1em;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.4em;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-size:3.5rem;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1em;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:32px;}.elementor-element{--widgets-spacing:32px 32px;--widgets-spacing-row:32px;--widgets-spacing-column:32px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-primary-font-size:3.5rem;--e-global-typography-secondary-font-size:2.625rem;--e-global-typography-accent-font-size:2.25rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --e-gv-99a3741:#202123; --Negro:#202123; --Primario:#F0EEEB; --Secundario:#D6D2C8; --Enfasis:#FB382F; --Blanco-100:#ffffff; --Transparente:transparent; --e-gv-7eb2597:Helvetica Now; --e-gv-aa25ca9:6rem; --e-gv-64c2167:1em; --e-gv-90be6c3:-0.5px; --e-gv-412f79a:5rem; --e-gv-fa7f9fd:3rem; --e-gv-6c5aad4:1rem; --e-gv-39f26cc:1.4em; --e-gv-5d82047:0.875rem; --e-gv-c0456f3:Helvetica Now; --e-gv-01a5c8b:0.833rem; --HelveticaNow:Helvetica Now; --GeistMono:Geist Mono; --e-gv-86e9b47:clamp(4.17rem, 3.804rem + 1.83vw, 6rem); --e-gv-5e9239c:min(auto, 100% - 32px); --deleting-space:0px; --e-gv-f1a89fc:100px; --small:0.833rem; --p:1rem; --e-gv-f009f3a:1.4em; --space-2xs:0.25rem; --space-xs:0.5rem; --space-sm:0.75rem; --space-md:1rem; --space-lg:1.5rem; --e-gv-f6c8252:clamp(1.44rem, 1.382rem + 0.29vw, 1.728rem); --e-gv-3cfb02b:min(100% - 64px, 95vw); --Negro25:#20212340; --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem; --space-4xl:6rem; --space-5xl:8rem; --WidthContent:1440px; }
/* Start custom CSS *//* ==================================================
   RESPONSIVE VISIBILITY UTILITIES
   Breakpoints Elementor:
   Mobile: <= 767px
   Tablet: 768px - 1024px
   Desktop: >= 1025px
================================================== */


/* OCULTAR EN MÓVIL */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}


/* OCULTAR EN TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}


/* OCULTAR EN ESCRITORIO */
@media (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

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


.section-sticky {
    position: sticky;
    top: 0;
    min-height: 100vh;
    z-index: 1;
}

/* Todas las secciones que vienen después */
.section-sticky ~ * {
    position: relative;
    z-index: 2;
}

/* =========================================
   HEADER DINÁMICO
   Por defecto: var(--Negro)
   Sobre .header-light: blanco
========================================= */


/* =========================================
   1. COLOR POR DEFECTO
========================================= */

.header-custom {
    --header-color: var(--Negro);
}


/* =========================================
   2. COLOR SOBRE SECCIONES OSCURAS
========================================= */

.header-custom.is-light {
    --header-color: #fff;
}


/* =========================================
   3. TEXTOS
========================================= */

.header-custom,
.header-custom a,
.header-custom p,
.header-custom span,
.header-custom .elementor-heading-title,
.header-custom .elementor-heading-title a,
.header-custom .elementor-widget-text-editor,
.header-custom .elementor-widget-text-editor p,
.header-custom .elementor-widget-text-editor a {
    color: var(--header-color) !important;

    transition:
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================
   4. SVG
========================================= */

.header-custom svg,
.header-custom svg path,
.header-custom svg circle,
.header-custom svg rect,
.header-custom svg polygon,
.header-custom svg ellipse {
    fill: var(--header-color) !important;

    transition:
        fill 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        stroke 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================
   5. SVG CON STROKE
========================================= */

.header-custom svg [stroke] {
    stroke: var(--header-color) !important;
}


/* =========================================
   6. ICONOS ELEMENTOR
========================================= */

.header-custom .elementor-icon {
    color: var(--header-color) !important;
    fill: var(--header-color) !important;

    transition:
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        fill 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================
   7. BOTONES / LINKS
========================================= */

.header-custom .elementor-button,
.header-custom .elementor-button-text {
    color: var(--header-color) !important;

    transition:
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ========================================
   ANIMACIÓN REVEAL
======================================== */


.element-reveal {
    overflow: hidden;

    /* La altura/tamaño final lo configuras en Elementor */
    clip-path: inset(0 0 100% 0);

    will-change: clip-path;
}

/* En el editor de Elementor siempre visible */
.elementor-editor-active .element-reveal {
    clip-path: inset(0 0 0 0);
}


/* ========================================
   ANIMACIÓN PROYECTOS
======================================== */


.proyecto {
    position: relative;
    overflow: hidden;

    /* Estado inicial */
    transform: scale(0.78);

    /* El escalado nace desde el centro */
    transform-origin: center center;

    /* Optimización para la animación */
    will-change: transform;

    /* IMPORTANTE:
       No añadir transition al transform.
       El movimiento lo controla el scroll. */
}


.proyecto-img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
}

.proyecto-contenido {
    position: relative;
    z-index: 2;
}


/* =========================================
   MÓVIL
   ========================================= */

@media (max-width: 767px) {

    .proyecto {
        transform: scale(1);
    }

}


/* =========================================================
   BRANDS MARQUEE
========================================================= */

.brands-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   TRACK
========================================================= */

.brands-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: max-content !important;
    min-width: max-content !important;

    gap: 32px !important;

    animation: brands-scroll 20s linear infinite !important;

    will-change: transform;
}


/* =========================================================
   CADA MARCA
========================================================= */

.brand-item {
    position: relative !important;

    flex: 0 0 320px !important;
    width: 320px !important;
    height: 80px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 32px !important;

    box-sizing: border-box !important;
    color: var(--e-global-color-text);
}

.brand-item svg {
    fill: currentColor !important;
}

.brand-item svg path {
    fill: currentColor !important;
}


/* =========================================================
   CORCHETE IZQUIERDO [
========================================================= */

.brand-item::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 8px;
    height: 48px;

    border-left: 1px solid currentColor;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    box-sizing: border-box;

    pointer-events: none;
}


/* =========================================================
   CORCHETE DERECHO ]
========================================================= */

.brand-item::after {
    content: "";

    position: absolute;
    right: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 8px;
    height: 48px;

    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    box-sizing: border-box;

    pointer-events: none;
}


/* =========================================================
   WIDGET SVG ATÓMICO
   Sobrescribe:
   .elementor .e-svg-base {
       width: 65px;
       height: 65px;
       display: inline-block;
   }
========================================================= */

.brand-item .e-svg-base {
    width: auto !important;
    height: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 0 !important;
}


/* =========================================================
   WIDGET / WRAPPER ELEMENTOR
========================================================= */

.brand-item > .elementor-element,
.brand-item .elementor-widget-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 0 !important;
}


/* =========================================================
   SVG INTERNO
========================================================= */

.brand-item .e-svg-base svg,
.brand-item svg {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 180px !important;
    max-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    vertical-align: middle !important;
}


/* =========================================================
   IMAGEN, POR SI ALGUNA MARCA NO ES SVG
========================================================= */

.brand-item img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 180px !important;
    max-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;
}


/* =========================================================
   ANIMACIÓN
========================================================= */

@keyframes brands-scroll {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }

}


/* =========================================================
   DEGRADADOS LATERALES
========================================================= */

.brands-marquee::before,
.brands-marquee::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: 64px;

    z-index: 20;

    pointer-events: none;
}


/* Izquierda */

.brands-marquee::before {
    left: 0;

    background: linear-gradient(
        to right,
        #ffffff 0%,
        rgba(255, 255, 255, 0.85) 25%,
        rgba(255, 255, 255, 0) 100%
    );
}


/* Derecha */

.brands-marquee::after {
    right: 0;

    background: linear-gradient(
        to left,
        #ffffff 0%,
        rgba(255, 255, 255, 0.85) 25%,
        rgba(255, 255, 255, 0) 100%
    );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .brands-track {
        gap: 32px !important;
    }

    .brand-item {
        flex: 0 0 256px !important;
        width: 256px !important;
        height: 80px !important;

        padding: 0 32px !important;
    }

    .brand-item .e-svg-base svg,
    .brand-item svg,
    .brand-item img {
        max-width: 144px !important;
        max-height: 48px !important;
    }

    .brands-marquee::before,
    .brands-marquee::after {
        width: 48px;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 767px) {

    .brands-track {
        gap: 16px !important;
    }

    .brand-item {
        flex: 0 0 192px !important;
        width: 192px !important;
        height: 64px !important;

        padding: 0 16px !important;
    }

    .brand-item::before,
    .brand-item::after {
        width: 8px;
        height: 40px;
    }

    .brand-item .e-svg-base svg,
    .brand-item svg,
    .brand-item img {
        max-width: 128px !important;
        max-height: 40px !important;
    }

    .brands-marquee::before,
    .brands-marquee::after {
        width: 32px;
    }

}




/* =========================================
   BORDER SCROLL
========================================= */

.border-top,
.border-bottom {
    position: relative;
    border: 0;
}


/* ==============================
   BORDER TOP
============================== */

.border-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: .5px;

    background: currentColor;

    transform: scaleX(var(--border-progress, 0));
    transform-origin: left center;
}


/* ==============================
   BORDER BOTTOM
============================== */

.border-bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: .5px;

    background: currentColor;

    transform: scaleX(var(--border-progress, 0));
    transform-origin: left center;
}



/* =========================================
   SECCIÓN
========================================= */

.closing-section {
    --closing-bg: 255;
    --closing-text: 0;

    position: relative;
    min-height: 220vh;

    background: rgb(
        var(--closing-bg),
        var(--closing-bg),
        var(--closing-bg)
    );

    color: rgb(
        var(--closing-text),
        var(--closing-text),
        var(--closing-text)
    );

    overflow: clip;
}


/* =========================================
   STICKY
========================================= */

.closing-inner {
    position: sticky;
    top: 0;

    height: 100vh;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: 0;

    padding: clamp(2rem, 4vw, 5rem);

    overflow: hidden;
}


/* =========================================
   ESCENARIO PRINCIPAL
========================================= */

.reel-reveal {
    position: relative;

    z-index: 1;

    width: clamp(
        260px,
        28vw,
        480px
    );

    aspect-ratio: 4 / 5;

    overflow: hidden;

    margin-left: auto;
    margin-right: auto;

    transform-origin: center center;

    will-change: transform;
}


/* =========================================
   REEL
========================================= */

.reel-reveal {
    position: relative;

    width: clamp(
        260px,
        28vw,
        480px
    );

    aspect-ratio: 4 / 5;

    overflow: hidden;

    margin-left: auto;
    margin-right: auto;

    transform-origin: center center;

    will-change: transform;
}

.reel-reveal video,
.reel-reveal img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================
   CONTENEDOR DEL TITULAR
========================================= */

.headline-reveal {
    position: absolute;

    top: 50%;
    left: 50%;

    width: max-content;

    transform: translate(-50%, -50%);

    z-index: 3;

    pointer-events: none;
}


/* =========================================
   CREEMOS / JUNTOS
========================================= */

.marquee-left,
.marquee-right {
    position: absolute;

    margin: 0;

    width: max-content;

    font-size:
        clamp(
            5rem,
            10vw,
            11rem
        );

    line-height: 0.82;

    letter-spacing: -0.06em;

    white-space: nowrap;

    color: inherit;

    will-change: transform;

    backface-visibility: hidden;
}


/*
 * Los dos están centrados.
 * JS hace el desplazamiento.
 */

.marquee-left {
    right: 50%;
}


.marquee-right {
    left: 50%;
}


/* =========================================
   DESCRIPCIÓN
========================================= */

.description-reveal {
    position: relative;

    z-index: 2;

    width: min(
        100%,
        620px
    );

    margin-top: clamp(1rem, 1.5vw, 1.5rem);

    text-align: center;

    font-size:
        clamp(
            0.95rem,
            1.15vw,
            1.15rem
        );

    line-height: 1.45;

    color: inherit;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Helvetica Now';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://crear.stagingcrear.com/wp-content/uploads/2026/09/HelveticaNowDisplay.ttf') format('truetype');
}
@font-face {
	font-family: 'Helvetica Now';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://crear.stagingcrear.com/wp-content/uploads/2026/09/HelveticaNowDisplayMedium.ttf') format('truetype');
}
@font-face {
	font-family: 'Helvetica Now';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://crear.stagingcrear.com/wp-content/uploads/2026/09/HelveticaNowDisplayLight.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Geist Mono';
	font-display: auto;
	src: url('https://crear.stagingcrear.com/wp-content/uploads/2026/09/GeistMono-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */