/* ========================================
   VARIABLES
======================================== */

:root {

    /* NEUTROS */

    --black: #080808;
    --charcoal: #242424;

    --gray-dark: #555555;
    --gray-medium: #8A8A8A;
    --gray-line: #D9D9D9;
    --gray-light: #EAEAEA;
    --gray-ice: #F5F5F5;

    --white: #FFFFFF;


    /* IDENTIDAD */

    --purple: #7C3AED;
    --yellow: #FBBF24;

    --pink: #EC4899;
    --cyan: #06B6D4;
    --green: #22C55E;
    --orange: #F97316;


    /* SUPERFICIES */

    --surface-main: #F5F5F5;
    --surface-secondary: #FFFFFF;
    --surface-projects: #ECECEC;


    /* TEXTO */

    --text-primary: #242424;
    --text-secondary: #666666;
    --text-muted: #8A8A8A;

}


/* ========================================
   RESET BÁSICO
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family: 'Regular', sans-serif;

    background: var(--surface-main);
    color: var(--text-primary);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


img {
    max-width: 100%;
}


/* ========================================
   FUENTES
======================================== */

@font-face {

    font-family: 'Regular';

    src:
        url('../fonts/Raleway-Regular.ttf')
        format('truetype');

    font-style: normal;
    font-weight: normal;

    font-display: swap;

}


@font-face {

    font-family: 'Medium';

    src:
        url('../fonts/Raleway-Medium.ttf')
        format('truetype');

    font-style: normal;
    font-weight: normal;

    font-display: swap;

}


@font-face {

    font-family: 'Bold';

    src:
        url('../fonts/Raleway-Bold.ttf')
        format('truetype');

    font-style: normal;
    font-weight: normal;

    font-display: swap;

}


@font-face {

    font-family: 'Black';

    src:
        url('../fonts/Raleway-Black.ttf')
        format('truetype');

    font-style: normal;
    font-weight: normal;

    font-display: swap;

}


/* ========================================
   TIPOGRAFÍA GENERAL
======================================== */

p,
li,
a {
    font-family: 'Regular', sans-serif;
}


.eyebrow,
.subtitle,
.subtitulo {
    font-family: 'Medium', sans-serif;
}


h1,
h2,
h3,
h4,
h5,
h6,
.title,
.titulo {
    font-family: 'Bold', sans-serif;
}


.highlight,
.title-highlight,
.text-black {
    font-family: 'Black', sans-serif;
}


/* ========================================
   ACCESIBILIDAD
======================================== */

a:focus-visible,
button:focus-visible {

    outline:
        2px solid var(--purple);

    outline-offset:
        4px;

}


/* ========================================
   HEADER
======================================== */

.site-header {

    width: 100%;

    padding: 1.5rem 0;

    background: transparent;

    z-index: 1100;

}


.header-inner {
    width: 100%;
}


/* ========================================
   BOTÓN / ESFERA
======================================== */

.menu-trigger {

    position: relative;

    width: 64px;
    height: 64px;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    z-index: 1200;

}


.menu-trigger img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition:
        transform 0.5s ease,
        opacity 0.3s ease;

}


.menu-trigger:hover img {

    transform:
        scale(1.1);

}


.menu-trigger.active img {

    transform:
        rotate(180deg)
        scale(0.9);

}


/* ========================================
   MENÚ FULLSCREEN
======================================== */

/*
Aquí SÍ conservamos el negro.

La idea es que abrir el menú
sea un momento de contraste.
*/

.fullscreen-menu {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    background: #424242;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    z-index: 1050;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;

}


.fullscreen-menu.active {

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

}


/* ========================================
   NAVEGACIÓN
======================================== */

.menu-nav {

    display: flex;

    flex-direction: column;

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

    gap: 0.4rem;

}


.menu-nav a {

    position: relative;

    font-family:
        'Bold',
        sans-serif;

    font-size: 4rem;
    line-height: 1.1;

    color: var(--white);

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;

}


.menu-nav a::after {

    content: '';

    position: absolute;

    left: 0;
    bottom: -0.1rem;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--pink),
            var(--yellow)
        );

    transition:
        width 0.3s ease;

}


.menu-nav a:hover {

    color: var(--yellow);

    transform:
        translateX(0.7rem);

}


.menu-nav a:hover::after {
    width: 100%;
}


/* ========================================
   BLOQUEAR SCROLL
======================================== */

body.menu-open {
    overflow: hidden;
}


/* ========================================
   HERO
======================================== */

.hero {

    position: relative;

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    overflow: hidden;

    background:
        var(--surface-main);

    color:
        var(--text-primary);

}


.hero .container-fluid,
.hero .row {

    min-height: 100vh;
    min-height: 100dvh;

}


/* ========================================
   ESTRUCTURA HERO
======================================== */

.hero-wrapper {

    position: relative;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;

    flex-direction: column;
    justify-content: space-between;

    padding:
        2rem
        0
        2.5rem;

}


/* ========================================
   LOGO HERO
======================================== */

.hero-top {

    position: relative;

    z-index: 5;

}


.hero-brand {

    display: inline-block;

}


.hero-brand img {

    width: 300px;
    height: auto;

    display: block;

    /*
    Tu archivo actual es blanco.

    Temporalmente lo convertimos
    en negro desde CSS.

    Cuando tengas logo negro,
    puedes eliminar filter.
    */

    filter:
        brightness(0);

}


/* ========================================
   CONTENIDO HERO
======================================== */

.hero-content {

    position: relative;

    max-width: 1100px;

    padding:
        4rem 0;

    z-index: 5;

}


/* ========================================
   EYEBROW HERO
======================================== */

.hero-eyebrow {

    margin:
        0
        0
        1.5rem;

    font-family:
        'Medium',
        sans-serif;

    font-size: 0.85rem;

    letter-spacing:
        0.18rem;

    color:
        var(--text-secondary);

}


/* ========================================
   TÍTULO HERO
======================================== */

.hero-title {

    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size: 6rem;

    line-height: 0.92;

    letter-spacing:
        -0.18rem;

    color:
        var(--text-primary);

}


.hero-title span {

    font-family:
        'Black',
        sans-serif;

    color:
        var(--yellow);

}


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

.hero-description {

    max-width: 560px;

    margin:
        2rem
        0
        0;

    font-family:
        'Regular',
        sans-serif;

    font-size: 1.15rem;

    line-height: 1.6;

    color:
        var(--text-secondary);

}


/* ========================================
   CTA HERO
======================================== */

.hero-cta {

    display: inline-flex;

    align-items: center;

    gap: 1rem;

    margin-top:
        2.5rem;

    font-family:
        'Medium',
        sans-serif;

    font-size: 0.82rem;

    letter-spacing:
        0.12rem;

    color:
        var(--text-primary);

    text-decoration: none;

    transition:
        color 0.3s ease,
        gap 0.3s ease;

}


.hero-cta-line {

    position: relative;

    display: block;

    width: 55px;
    height: 1px;

    background:
        var(--text-primary);

    transition:
        width 0.3s ease;

}


.hero-cta-line::after {

    content: '';

    position: absolute;

    right: 0;
    top: 50%;

    width: 7px;
    height: 7px;

    border-top:
        1px solid var(--text-primary);

    border-right:
        1px solid var(--text-primary);

    transform:
        translateY(-50%)
        rotate(45deg);

}


.hero-cta:hover {

    gap: 1.4rem;

    color:
        var(--purple);

}


.hero-cta:hover .hero-cta-line {
    width: 75px;
}


/* ========================================
   SCROLL / PROGRESS
======================================== */

.hero-scroll {

    position: relative;

    display: flex;

    align-items: center;

    gap: 1rem;

    z-index: 5;

}


.hero-scroll span {

    font-family:
        'Medium',
        sans-serif;

    font-size: 0.7rem;

    letter-spacing:
        0.15rem;

    color:
        var(--text-muted);

    transition:
        color 0.3s ease;

}


/* ========================================
   LÍNEA BASE
======================================== */

.hero-scroll-line {

    position: relative;

    width: 140px;
    height: 2px;

    overflow: visible;

    background:
        rgba(36, 36, 36, 0.16);

}


/* ========================================
   LÍNEA DE COLOR
======================================== */

.hero-scroll-line::after {

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width:
        var(
            --color-line-width,
            0px
        );

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--purple) 0%,
            var(--pink) 18%,
            var(--cyan) 38%,
            var(--green) 58%,
            var(--yellow) 78%,
            var(--orange) 100%
        );

    box-shadow:
        0 0 8px rgba(124, 58, 237, 0.18),
        0 0 14px rgba(236, 72, 153, 0.10);

    transition:
        width 0.08s linear;

}


.hero-scroll.is-scrolling span {

    color:
        var(--text-primary);

}


/* ========================================
   ÓRBITAS HERO
======================================== */

.hero-orbit {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0.82;

}


.hero-orbit-one {

    width: 720px;
    height: 720px;

    top: 5%;
    right: -18%;

    border:
        1px solid
        rgba(124, 58, 237, 0.52);

    transform:
        rotate(25deg);

    box-shadow:
        0 0 80px rgba(124, 58, 237, 0.08),
        inset 0 0 80px rgba(124, 58, 237, 0.035);

}


.hero-orbit-two {

    width: 520px;
    height: 520px;

    top: 18%;
    right: -4%;

    border-top:
        1px solid
        rgba(251, 191, 36, 0.70);

    border-right:
        1px solid
        rgba(236, 72, 153, 0.62);

    border-bottom:
        1px solid
        rgba(6, 182, 212, 0.58);

    border-left:
        1px solid
        rgba(124, 58, 237, 0.62);

    transform:
        rotate(-35deg);

    box-shadow:
        0 0 90px
        rgba(236, 72, 153, 0.07);

}


/* ========================================
   PRISMA HERO
======================================== */

.hero-prism {

    position: absolute;

    right: 11%;
    bottom: 12%;

    width: 180px;
    height: 240px;

    z-index: 2;

    transform:
        rotate(18deg);

}


.hero-prism span {

    position: absolute;

    display: block;

    border:
        1px solid
        rgba(36, 36, 36, 0.12);

}


.hero-prism span:nth-child(1) {

    inset: 0;

    border-color:
        rgba(124, 58, 237, 0.7);

}


.hero-prism span:nth-child(2) {

    width: 100%;
    height: 100%;

    top: 10px;
    left: -12px;

    border-color:
        rgba(251, 191, 36, 0.72);

}


.hero-prism span:nth-child(3) {

    width: 100%;
    height: 100%;

    top: -12px;
    left: 10px;

    border-color:
        rgba(6, 182, 212, 0.65);

}


.hero-prism span:nth-child(4) {

    width: 70%;
    height: 70%;

    top: 15%;
    left: 15%;

    transform:
        rotate(45deg);

    border-color:
        rgba(236, 72, 153, 0.62);

}


/* ========================================
   PROJECT PILE
======================================== */

/*
Este gris es importante.

Las hojas de video necesitan
contrastar contra el fondo para que
la pila sea visible.
*/

.project-pile {

    position: relative;

    width: 100%;

    height: 500vh;

    background:
        var(--surface-projects);

}


/* ========================================
   ESCENARIO PROYECTOS
======================================== */

.project-pile-stage {

    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    display: flex;

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

    perspective:
        1400px;

}


/* ========================================
   HOJAS
======================================== */
.project-sheet {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 84%;

    height: 82vh;
    height: 82dvh;

    overflow: hidden;

    border: 0;
    outline: 0;

    border-radius: 0.25rem;

    transform-origin: center center;

    box-shadow: none;

    backface-visibility: hidden;

    will-change: transform;
}


/* ========================================
   FALLBACK COLORES PROYECTOS
======================================== */



/* ========================================
   VIDEO
======================================== */

.project-video {
    position: absolute;

    /*
    En lugar de inset: 0;
    hacemos que el video sobresalga
    ligeramente del contenedor.
    */

    inset: -3px;

    width: calc(100% + 6px);
    height: calc(100% + 6px);

    overflow: hidden;

    z-index: 1;
}


.project-video iframe {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 177.77777778vh;
    min-width: 100%;

    height: 56.25vw;
    min-height: 100%;

    border: 0;

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

    pointer-events: none;
}


/* ========================================
   OVERLAY PROYECTOS
======================================== */

.project-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.04) 42%,
            rgba(0, 0, 0, 0.62) 100%
        );

}


/* ========================================
   CONTENIDO SOBRE VIDEO
======================================== */

.project-foreground {

    position: relative;

    z-index: 3;

    pointer-events: none;

}


.project-content {

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;
    justify-content: space-between;

    padding:
        2.5rem 0;

}


/* ========================================
   CABECERA PROYECTO
======================================== */

.project-top {

    display: flex;

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

}


.project-number,
.project-category {

    font-family:
        'Bold',
        sans-serif;

    font-size:
        0.75rem;

    letter-spacing:
        0.13rem;

    color:
        rgba(255, 255, 255, 0.84);

}


/* ========================================
   INFORMACIÓN PROYECTO
======================================== */

.project-info {
    padding-bottom: 1rem;
}


.project-title {

    margin: 0;

    font-family:
        'Black',
        sans-serif;

    font-size:
        7rem;

    line-height:
        0.88;

    letter-spacing:
        -0.2rem;

    color:
        var(--white);

}


.project-description {

    margin:
        1.4rem
        0
        0;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        1.1rem;

    color:
        rgba(255, 255, 255, 0.86);

}


/* ========================================
   FOOTER
======================================== */
.footer-description {
    max-width: 620px;

    margin: 2rem 0 0;

    font-family: 'Regular', sans-serif;

    font-size: 1.05rem;
    line-height: 1.65;

    color: var(--text-secondary);
}

.site-footer {

    position: relative;

    width: 100%;

    min-height: 90vh;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        var(--surface-secondary);

    color:
        var(--text-primary);

}


/* ========================================
   FOOTER PRINCIPAL
======================================== */

.footer-main {

    position: relative;

    flex: 1;

    display: flex;

    align-items: center;

    padding:
        7rem
        0
        6rem;

    z-index: 5;

}


.footer-content {

    position: relative;

    max-width:
        1050px;

}


/* ========================================
   FOOTER EYEBROW
======================================== */

.footer-eyebrow {

    margin:
        0
        0
        1.5rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.8rem;

    letter-spacing:
        0.18rem;

    color:
        var(--text-muted);

}


/* ========================================
   FOOTER TÍTULO
======================================== */

.footer-title {

    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        6rem;

    line-height:
        0.92;

    letter-spacing:
        -0.16rem;

    color:
        var(--text-primary);

}


.footer-title span {

    font-family:
        'Black',
        sans-serif;

    color:
        var(--yellow);

}


/* ========================================
   FOOTER ACCIONES
======================================== */

.footer-actions {

    display: flex;

    align-items: center;

    gap: 4rem;

    margin-top:
        3rem;

}


.footer-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 1rem;

    color:
        var(--text-primary);

    text-decoration: none;

    transition:
        gap 0.3s ease,
        color 0.3s ease;

}


.footer-link-text {

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.78rem;

    letter-spacing:
        0.12rem;

}


/* ========================================
   FOOTER CTA LINE
======================================== */

.footer-link-line {

    position: relative;

    display: block;

    width: 55px;
    height: 2px;

    overflow: hidden;

    background:
        rgba(36, 36, 36, 0.18);

}


.footer-link-line::after {

    content: '';

    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 0;

    background:
        linear-gradient(
            90deg,
            var(--purple) 0%,
            var(--pink) 20%,
            var(--cyan) 40%,
            var(--green) 60%,
            var(--yellow) 80%,
            var(--orange) 100%
        );

    transition:
        width 0.35s ease;

}


.footer-link:hover {

    gap: 1.4rem;

    color:
        var(--purple);

}


.footer-link:hover
.footer-link-line::after {

    width: 100%;

}


/* ========================================
   FOOTER ESFERA
======================================== */

.footer-sphere {

    position: absolute;

    right: 7%;
    bottom: 14%;

    width: 220px;
    height: 220px;

    opacity: 0.9;

    pointer-events: none;

    z-index: 3;

}


.footer-sphere img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

}


/* ========================================
   FOOTER ÓRBITAS
======================================== */

.footer-orbit {

    position: absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    z-index: 1;

}


.footer-orbit-one {

    width: 800px;
    height: 800px;

    right: -24%;
    bottom: -30%;

    border-top:
        1px solid
        rgba(124, 58, 237, 0.50);

    border-right:
        1px solid
        rgba(236, 72, 153, 0.46);

    border-bottom:
        1px solid
        rgba(6, 182, 212, 0.46);

    border-left:
        1px solid
        rgba(251, 191, 36, 0.52);

    transform:
        rotate(-25deg);

}


.footer-orbit-two {

    width: 520px;
    height: 520px;

    right: -5%;
    bottom: -18%;

    border:
        1px solid
        rgba(124, 58, 237, 0.34);

    transform:
        rotate(28deg);

}


/* ========================================
   FOOTER INFERIOR
======================================== */

.footer-bottom {

    position: relative;

    width: 100%;

    padding:
        1.8rem 0;

    border-top:
        1px solid
        rgba(36, 36, 36, 0.10);

    z-index: 6;

}


.footer-bottom-inner {

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 2rem;

}


.footer-copy {

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.7rem;

    letter-spacing:
        0.14rem;

    color:
        var(--text-muted);
    text-align: end;

}


.footer-legal {
    text-align: center;
}


.footer-legal a {

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.7rem;

    letter-spacing:
        0.12rem;

    color:
        var(--text-secondary);

    text-decoration:
        none;

    transition:
        color 0.3s ease;

}


.footer-legal a:hover {

    color:
        var(--text-primary);

}


/* ========================================
   REDES
======================================== */

.footer-social {

    display: flex;

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

    gap:
        0.7rem;

}


.footer-social a {

    width: 42px;
    height: 42px;

    display: flex;

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

    border:
        1px solid
        rgba(36, 36, 36, 0.18);

    border-radius:
        50%;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.65rem;

    color:
        var(--text-primary);

    text-decoration:
        none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.footer-social a:hover {

    background:
        var(--charcoal);

    color:
        var(--white);

    border-color:
        var(--charcoal);

    transform:
        translateY(-3px);

}


/* ========================================
   LOADER
======================================== */

.site-loader {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    display: flex;

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

    overflow: hidden;

    background:
        var(--white);

    z-index: 9999;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease,
        transform 0.9s
        cubic-bezier(
            0.76,
            0,
            0.24,
            1
        );

}


/* ========================================
   LOADER FINAL
======================================== */

.site-loader.loader-hidden {

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-100%);

}


/* ========================================
   LOADER CENTER
======================================== */

.loader-center {

    position: relative;

    display: flex;

    flex-direction: column;
    align-items: center;

    gap: 2rem;

    z-index: 10;

}


/* ========================================
   LOADER LOGO
======================================== */

.loader-logo {

    width: 110px;
    height: 110px;

    object-fit: contain;

    animation:
        loaderLogoFloat
        2.8s
        ease-in-out
        infinite;

}


/* ========================================
   LOADER PROGRESS
======================================== */

.loader-progress {

    position: relative;

    width: 220px;
    height: 2px;

    overflow: hidden;

    background:
        rgba(36, 36, 36, 0.10);

}


.loader-progress-bar {

    display: block;

    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--purple) 0%,
            var(--pink) 18%,
            var(--cyan) 38%,
            var(--green) 58%,
            var(--yellow) 78%,
            var(--orange) 100%
        );

    transition:
        width 0.2s ease;

}


/* ========================================
   LOADER GEOMETRÍAS
======================================== */

.loader-geometry {

    position: absolute;

    top: 50%;
    left: 50%;

    opacity: 0.12;

    pointer-events: none;

    transform-origin:
        center center;

}


.loader-geometry-one {

    width: 520px;
    height: 520px;

    margin-top:
        -260px;

    margin-left:
        -260px;

    border:
        1px solid
        rgba(124, 58, 237, 0.9);

    border-radius:
        42% 58% 63% 37%
        /
        38% 44% 56% 62%;

    animation:
        loaderRotateOne
        16s
        linear
        infinite;

}


.loader-geometry-two {

    width: 380px;
    height: 520px;

    margin-top:
        -260px;

    margin-left:
        -190px;

    border:
        1px solid
        rgba(251, 191, 36, 0.9);

    animation:
        loaderRotateTwo
        12s
        linear
        infinite
        reverse;

}


.loader-geometry-three {

    width: 280px;
    height: 280px;

    margin-top:
        -140px;

    margin-left:
        -140px;

    border:
        1px solid
        rgba(6, 182, 212, 0.9);

    animation:
        loaderRotateThree
        9s
        linear
        infinite;

}


/* ========================================
   KEYFRAMES
======================================== */

@keyframes loaderLogoFloat {

    0%,
    100% {

        transform:
            translateY(0)
            scale(1);

    }

    50% {

        transform:
            translateY(-8px)
            scale(1.03);

    }

}


@keyframes loaderRotateOne {

    from {

        transform:
            rotate(0deg)
            scale(1);

    }

    to {

        transform:
            rotate(360deg)
            scale(1);

    }

}


@keyframes loaderRotateTwo {

    from {

        transform:
            rotate(25deg)
            scale(1);

    }

    to {

        transform:
            rotate(385deg)
            scale(1);

    }

}


@keyframes loaderRotateThree {

    from {

        transform:
            rotate(45deg)
            scale(1);

    }

    to {

        transform:
            rotate(405deg)
            scale(1);

    }

}


/* ============================================================
   RESPONSIVE
   TODOS LOS BREAKPOINTS UNIFICADOS
============================================================ */


/* ========================================
   DESKTOP / LAPTOP
   <= 1199.98px
======================================== */

@media (max-width: 1199.98px) {

    /* HERO */

    .hero-title {
        font-size: 5rem;
    }


    .hero-orbit-one {

        width: 580px;
        height: 580px;

    }


    .hero-orbit-two {

        width: 420px;
        height: 420px;

    }


    /* PROYECTOS */

    .project-sheet {

        width: 86%;

        height: 80vh;
        height: 80dvh;

    }


    .project-title {
        font-size: 5.5rem;
    }


    /* FOOTER */

    .footer-title {
        font-size: 5rem;
    }


    .footer-sphere {

        width: 180px;
        height: 180px;

    }


    .footer-orbit-one {

        width: 650px;
        height: 650px;

    }

}


/* ========================================
   TABLET
   <= 991.98px
======================================== */

@media (max-width: 991.98px) {

    /* HEADER */

    .site-header {
        padding: 1.25rem 0;
    }


    .menu-trigger {

        width: 56px;
        height: 56px;

    }


    .menu-nav a {
        font-size: 3.2rem;
    }


    /* HERO */

    .hero-wrapper {

        padding:
            1.5rem
            0
            2rem;

    }


    .hero-brand img {
        width: 150px;
    }


    .hero-content {
        padding: 5rem 0;
    }


    .hero-title {

        font-size: 4.2rem;

        letter-spacing:
            -0.12rem;

    }


    .hero-description {

        max-width: 480px;

        font-size: 1rem;

    }


    .hero-scroll-line {
        width: 110px;
    }


    .hero-orbit-one {

        width: 480px;
        height: 480px;

        right: -30%;

    }


    .hero-orbit-two {

        width: 340px;
        height: 340px;

        right: -12%;

    }


    .hero-prism {

        width: 140px;
        height: 190px;

        right: 8%;
        bottom: 10%;

    }


    /* PROYECTOS */

    .project-sheet {

        width: 88%;

        height: 78vh;
        height: 78dvh;

    }


    .project-title {

        font-size: 4.4rem;

        letter-spacing:
            -0.12rem;

    }


    /* FOOTER */

    .site-footer {
        min-height: 85vh;
    }


    .footer-main {

        padding:
            6rem
            0
            5rem;

    }


    .footer-title {

        font-size: 4.2rem;

        letter-spacing:
            -0.11rem;

    }


    .footer-actions {
        gap: 2.5rem;
    }


    .footer-sphere {

        right: 5%;
        bottom: 18%;

        width: 150px;
        height: 150px;

    }


    /* LOADER */

    .loader-logo {

        width: 95px;
        height: 95px;

    }


    .loader-progress {
        width: 190px;
    }


    .loader-geometry-one {

        width: 430px;
        height: 430px;

        margin-top:
            -215px;

        margin-left:
            -215px;

    }


    .loader-geometry-two {

        width: 320px;
        height: 430px;

        margin-top:
            -215px;

        margin-left:
            -160px;

    }


    .loader-geometry-three {

        width: 240px;
        height: 240px;

        margin-top:
            -120px;

        margin-left:
            -120px;

    }

}


/* ========================================
   MÓVIL
   <= 767.98px
======================================== */

@media (max-width: 767.98px) {

    /* HEADER */

    .site-header {
        padding: 1rem 0;
    }


    .menu-trigger {

        width: 48px;
        height: 48px;

    }


    .menu-nav {
        gap: 0.7rem;
    }


    .menu-nav a {
        font-size: 2.4rem;
    }


    /* HERO */

    .hero-wrapper {

        padding:
            1.25rem
            0
            1.5rem;

    }


    .hero-brand img {
        width: 130px;
    }


    .hero-content {

        padding:
            4rem
            0
            3rem;

    }


    .hero-eyebrow {

        margin-bottom:
            1.2rem;

        font-size:
            0.7rem;

        letter-spacing:
            0.12rem;

    }


    .hero-title {

        font-size:
            3.25rem;

        line-height:
            0.95;

        letter-spacing:
            -0.08rem;

    }


    .hero-description {

        max-width:
            100%;

        margin-top:
            1.5rem;

        font-size:
            0.95rem;

    }


    .hero-cta {

        margin-top:
            2rem;

        font-size:
            0.72rem;

    }


    .hero-scroll {
        display: none;
    }


    .hero-orbit-one {

        width: 420px;
        height: 420px;

        top: 16%;
        right: -58%;

        opacity: 0.58;

    }


    .hero-orbit-two {

        width: 280px;
        height: 280px;

        top: 26%;
        right: -30%;

        opacity: 0.68;

    }


    .hero-prism {

        width: 100px;
        height: 140px;

        right: 4%;
        bottom: 6%;

        opacity: 0.55;

    }


    /* PROYECTOS */

    .project-pile {
        height: 450vh;
    }


    .project-sheet {

        width: 90%;

        height: 76vh;
        height: 76dvh;

    }


    .project-content {
        padding: 2rem 0;
    }


    .project-top {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            0.4rem;

    }


    .project-title {

        font-size:
            3.3rem;

        line-height:
            0.92;

        letter-spacing:
            -0.08rem;

    }


    .project-description {
        font-size: 0.95rem;
    }


    .project-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.10) 0%,
                rgba(0, 0, 0, 0.07) 40%,
                rgba(0, 0, 0, 0.72) 100%
            );

    }


    /* FOOTER */

    .site-footer {
        min-height: auto;
    }


    .footer-main {

        padding:
            5rem
            0
            7rem;

    }


    .footer-eyebrow {

        margin-bottom:
            1.2rem;

        font-size:
            0.68rem;

    }


    .footer-title {

        font-size:
            3.25rem;

        line-height:
            0.95;

        letter-spacing:
            -0.07rem;

    }


    .footer-actions {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            1.5rem;

        margin-top:
            2.5rem;

    }


    .footer-link-text {
        font-size: 0.7rem;
    }


    .footer-link-line {
        width: 45px;
    }


    .footer-sphere {

        width: 120px;
        height: 120px;

        right: -2%;
        bottom: 16%;

        opacity: 0.65;

    }


    .footer-orbit-one {

        width: 420px;
        height: 420px;

        right: -55%;
        bottom: -12%;

    }


    .footer-orbit-two {

        width: 280px;
        height: 280px;

        right: -22%;
        bottom: -3%;

    }


    .footer-bottom {
        padding: 1.5rem 0;
    }


    .footer-bottom-inner {

        grid-template-columns:
            1fr;

        gap:
            1.3rem;

    }


    .footer-copy,
    .footer-legal {

        text-align:
            left;

    }


    .footer-social {
        justify-content: flex-start;
    }


    /* LOADER */

    .loader-logo {

        width: 80px;
        height: 80px;

    }


    .loader-progress {
        width: 160px;
    }


    .loader-geometry-one {

        width: 340px;
        height: 340px;

        margin-top:
            -170px;

        margin-left:
            -170px;

    }


    .loader-geometry-two {

        width: 240px;
        height: 340px;

        margin-top:
            -170px;

        margin-left:
            -120px;

    }


    .loader-geometry-three {

        width: 190px;
        height: 190px;

        margin-top:
            -95px;

        margin-left:
            -95px;

    }

}


/* ========================================
   MÓVIL PEQUEÑO
   <= 575.98px
======================================== */

@media (max-width: 575.98px) {

    /* HEADER */

    .menu-trigger {

        width: 44px;
        height: 44px;

    }


    .menu-nav a {
        font-size: 2rem;
    }


    /* HERO */

    .hero-brand img {
        width: 115px;
    }


    .hero-title {

        font-size:
            2.65rem;

        line-height:
            0.98;

    }


    .hero-description {
        font-size: 0.9rem;
    }


    .hero-cta-line {
        width: 40px;
    }


    .hero-prism {
        display: none;
    }


    /* PROYECTOS */

    .project-sheet {

        width: 92%;

        height: 74vh;
        height: 74dvh;

    }


    .project-title {
        font-size: 2.7rem;
    }


    /* FOOTER */

    .footer-main {

        padding:
            4rem
            0
            6rem;

    }


    .footer-title {

        font-size:
            2.65rem;

        line-height:
            0.98;

    }


    .footer-sphere {

        width: 95px;
        height: 95px;

    }

}


/* ========================================
   REDUCIR MOVIMIENTO
======================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    .menu-trigger img,
    .menu-nav a,
    .menu-nav a::after,
    .hero-cta,
    .hero-cta-line,
    .hero-scroll-line::after,
    .footer-link,
    .footer-link-line::after,
    .footer-social a,
    .loader-progress-bar {

        transition: none;

    }


    .loader-logo,
    .loader-geometry-one,
    .loader-geometry-two,
    .loader-geometry-three {

        animation: none;

    }

}

/* ============================================================
   PROJECT SHEET 06
   ORDEN CREATIVO
============================================================ */

.project-sheet-06 {
    background: #000000;
    overflow: hidden;
}


/* ============================================================
   FONDO
============================================================ */

.project-sheet-06 .project-creative-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    background: #000000;

    pointer-events: none;
}


/* ============================================================
   FIGURA SUPERIOR
============================================================ */

.project-sheet-06 .project-creative-bg::before {
    content: '';

    position: absolute;

    width: 24rem;
    height: 24rem;

    top: -10rem;
    right: -7rem;

    border-radius:
        48% 52% 42% 58%;

    background:
        linear-gradient(
            135deg,
            #7C3AED 0%,
            #7C3AED 65%,
            #FBBF24 100%
        );

    transform:
        rotate(24deg);

    opacity: 0.9;

    pointer-events: none;
}


/* ============================================================
   FIGURA INFERIOR
============================================================ */

.project-sheet-06 .project-creative-bg::after {
    content: '';

    position: absolute;

    width: 16rem;
    height: 16rem;

    left: -8rem;
    bottom: -7rem;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    box-shadow:
        0 0 0 3rem rgba(124, 58, 237, 0.05),
        0 0 0 6rem rgba(251, 191, 36, 0.025);

    pointer-events: none;
}


/* ============================================================
   FOREGROUND
============================================================ */

.project-sheet-06 .project-foreground {
    position: relative;

    z-index: 10;

    pointer-events: auto;
}


/* ============================================================
   PROJECT CONTENT
============================================================ */

.project-sheet-06 .project-content {
    position: relative;

    z-index: 11;

    pointer-events: auto;
}


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

.project-sheet-06 .project-number,
.project-sheet-06 .project-category {
    color:
        rgba(255, 255, 255, 0.75);
}


/* ============================================================
   PROJECT INFO
============================================================ */

.project-sheet-06 .project-info-creative {
    position: relative;

    width: 100%;
    max-width: 70rem;

    transform:
        translateY(-4rem);

    z-index: 12;

    pointer-events: auto;
}


/* ============================================================
   LABEL
============================================================ */

.project-sheet-06 .creative-label {
    margin:
        0
        0
        1.25rem;

    font-family:
        'Medium',
        sans-serif;

    font-size: 0.7rem;

    line-height: 1;

    letter-spacing: 0.18rem;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.62);
}


/* ============================================================
   TITLE
============================================================ */

.project-sheet-06 .project-title-creative {
    width: 100%;
    max-width: 68rem;

    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size: 4.4rem;

    font-weight: 700;

    line-height: 0.92;

    letter-spacing: -0.13rem;

    color: #FFFFFF;
}


/* ============================================================
   TITLE DESTACADOS
============================================================ */

.project-sheet-06 .project-title-creative span {
    font-family:
        'Black',
        sans-serif;

    font-weight: 900;

    color: #FBBF24;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.project-sheet-06 .project-description-creative {
    width: 100%;
    max-width: 34rem;

    margin:
        1.5rem
        0
        0;

    font-family:
        'Regular',
        sans-serif;

    font-size: 0.95rem;

    line-height: 1.55;

    color:
        rgba(255, 255, 255, 0.72);
}


/* ============================================================
   CTA
   MISMA LÓGICA DE HOVER DEL FOOTER
============================================================ */

.project-sheet-06 .project-creative-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 1rem;

    margin-top: 1.8rem;

    color: #FFFFFF;

    text-decoration: none;

    cursor: pointer;

    z-index: 100;

    pointer-events: auto;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


/* ============================================================
   CTA TEXT
============================================================ */

.project-sheet-06 .project-creative-link-text {
    font-family:
        'Medium',
        sans-serif;

    font-size: 0.78rem;

    line-height: 1;

    letter-spacing: 0.12rem;

    color: inherit;

    pointer-events: none;
}


/* ============================================================
   CTA LINE
============================================================ */

.project-sheet-06 .project-creative-link-line {
    position: relative;

    display: block;

    flex-shrink: 0;

    width: 55px;
    height: 2px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.22);

    pointer-events: none;
}


/* ============================================================
   CTA LINE COLOR
============================================================ */

.project-sheet-06 .project-creative-link-line::after {
    content: '';

    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 0;

    background:
        linear-gradient(
            90deg,
            var(--purple) 0%,
            var(--pink) 20%,
            var(--cyan) 40%,
            var(--green) 60%,
            var(--yellow) 80%,
            var(--orange) 100%
        );

    transition:
        width 0.35s ease;
}


/* ============================================================
   CTA HOVER
============================================================ */

.project-sheet-06 .project-creative-link:hover,
.project-sheet-06 .project-creative-link:focus-visible {
    gap: 1.4rem;

    color:
        var(--purple);
}


/* LÍNEA MULTICOLOR */

.project-sheet-06
.project-creative-link:hover
.project-creative-link-line::after,
.project-sheet-06
.project-creative-link:focus-visible
.project-creative-link-line::after {
    width: 100%;
}


/* ============================================================
   CTA FOCUS
============================================================ */

.project-sheet-06 .project-creative-link:focus-visible {
    outline:
        1px solid
        var(--purple);

    outline-offset:
        0.5rem;
}


/* ============================================================
   DESKTOP GRANDE
============================================================ */

@media (min-width: 1400px) {

    .project-sheet-06 .project-info-creative {
        max-width: 74rem;
    }


    .project-sheet-06 .project-title-creative {
        max-width: 72rem;

        font-size: 4rem;

        line-height: 0.9;

        letter-spacing: -0.15rem;
    }


    .project-sheet-06 .project-description-creative {
        max-width: 36rem;

        font-size: 1rem;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1199.98px) {

    .project-sheet-06 .project-title-creative {
        max-width: 58rem;

        font-size: 3.8rem;

        line-height: 0.94;

        letter-spacing: -0.1rem;
    }


    .project-sheet-06 .project-creative-bg::before {
        width: 20rem;
        height: 20rem;

        top: -8rem;
        right: -7rem;
    }

}


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

@media (max-width: 991.98px) {

    .project-sheet-06 .project-info-creative {
        max-width: 48rem;
    }


    .project-sheet-06 .project-title-creative {
        max-width: 46rem;

        font-size: 3.2rem;

        line-height: 0.95;

        letter-spacing: -0.08rem;
    }


    .project-sheet-06 .project-description-creative {
        max-width: 29rem;

        font-size: 0.9rem;
    }


    .project-sheet-06 .project-creative-bg::before {
        width: 17rem;
        height: 17rem;

        top: -7rem;
        right: -7rem;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .project-sheet-06 .project-info-creative {
        transform:
            translateY(-1rem);
    }


    .project-sheet-06 .creative-label {
        margin-bottom: 0.85rem;

        font-size: 0.58rem;

        letter-spacing: 0.13rem;
    }


    .project-sheet-06 .project-title-creative {
        max-width: 100%;

        font-size: 2.3rem;

        line-height: 0.98;

        letter-spacing: -0.05rem;
    }


    .project-sheet-06 .project-description-creative {
        max-width: 25rem;

        margin-top: 1rem;

        font-size: 0.82rem;

        line-height: 1.45;
    }


    .project-sheet-06 .project-creative-link {
        gap: 0.75rem;

        margin-top: 1.3rem;
    }


    .project-sheet-06 .project-creative-link:hover,
    .project-sheet-06 .project-creative-link:focus-visible {
        gap: 1rem;
    }


    .project-sheet-06 .project-creative-link-text {
        font-size: 0.65rem;

        letter-spacing: 0.09rem;
    }


    .project-sheet-06 .project-creative-link-line {
        width: 40px;
    }


    .project-sheet-06 .project-creative-bg::before {
        width: 13rem;
        height: 13rem;

        top: -5rem;
        right: -6rem;

        opacity: 0.7;
    }


    .project-sheet-06 .project-creative-bg::after {
        width: 11rem;
        height: 11rem;

        left: -6rem;
        bottom: -5rem;
    }

}


/* ============================================================
   MOBILE PEQUEÑO
============================================================ */

@media (max-width: 575.98px) {

    .project-sheet-06 .project-title-creative {
        font-size: 1.9rem;

        line-height: 1;
    }


    .project-sheet-06 .project-description-creative {
        font-size: 0.78rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .project-sheet-06 .project-creative-link,
    .project-sheet-06 .project-creative-link-line::after {
        transition: none;
    }

}

/* ============================================================
   HERO
   ORDEN CREATIVO
============================================================ */

.creative-hero {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height:35.28rem;

    overflow: hidden;

    background:
        #f2f2f2;

    color:
        #111111;
}


/* ============================================================
   BACKGROUND
============================================================ */

.creative-hero-background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}


/* ============================================================
   GRID
============================================================ */

.creative-hero-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.045) 1px,
            transparent 1px
        );

    background-size:
        5rem 5rem;

    opacity:
        0.45;
}


/* ============================================================
   LÍNEAS DECORATIVAS
============================================================ */

.creative-path {
    position: absolute;

    display: block;

    height: 1px;

    transform-origin:
        left center;

    opacity:
        0.32;
}


/* LÍNEA 01 */

.creative-path-01 {
    width:
        28rem;

    top:
        25%;

    right:
        -8rem;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #7C3AED 30%,
            #E432ED 55%,
            transparent 100%
        );

    transform:
        rotate(-18deg);
}


/* LÍNEA 02 */

.creative-path-02 {
    width:
        23rem;

    left:
        -6rem;

    bottom:
        22%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #3DCAD4 25%,
            #7C3AED 60%,
            transparent 100%
        );

    transform:
        rotate(14deg);
}


/* LÍNEA 03 */

.creative-path-03 {
    width:
        18rem;

    right:
        8%;

    bottom:
        12%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #7C3AED 20%,
            #FBBF24 65%,
            transparent 100%
        );

    opacity:
        0.2;

    transform:
        rotate(-8deg);
}


/* ============================================================
   FOREGROUND
============================================================ */

.creative-hero-foreground {
    position: relative;

    z-index: 2;
}


/* ============================================================
   CONTENT
============================================================ */

.creative-hero-content {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 100%;
    height: 100%;

    padding:5.88rem
        0
        2.1rem;
}


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

.creative-hero-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.creative-hero-label,
.creative-hero-number {
    margin: 0;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.571rem;

    line-height:
        1;

    letter-spacing:0.147rem;

    color:
        #888888;
}


.creative-hero-label {
    text-transform:
        uppercase;
}


/* ============================================================
   MAIN
============================================================ */

.creative-hero-main {
    position: relative;

    width: 100%;

    margin:
        auto
        0;
}


/* ============================================================
   TITLE
============================================================ */

.creative-hero-title {
    display: flex;

    flex-direction: column;

    width: 100%;

    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:4.452rem;

    font-weight:
        700;

    line-height:
        0.9;

    letter-spacing:-0.18rem;
}


/* ============================================================
   ROWS
============================================================ */

.creative-title-row {
    display: flex;

    align-items:
        baseline;

    flex-wrap:
        nowrap;

    width:
        max-content;

    max-width:
        100%;

    gap:
        0.35em;
}


/* PRIMERA LÍNEA */

.creative-title-row-01 {
    align-self:
        flex-start;
}


/* SEGUNDA LÍNEA */

.creative-title-row-02 {
    align-self:
        flex-start;

    margin-top:0.506rem;

    margin-left:
        32%;
}


/* ============================================================
   WORDS
============================================================ */

.creative-title-word {
    display: inline-block;

    color:
        #b8b8b8;

    transition:
        color 0.55s ease,
        opacity 0.55s ease,
        transform 0.55s ease;

    opacity:
        0.72;

    transform:
        translateY(0.05em);
}


.creative-title-black {
    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;
}


/* PALABRA ACTIVA */

.creative-title-word.is-active {
    color:
        #111111;

    opacity:
        1;

    transform:
        translateY(0);
}


/* ============================================================
   PROGRESS CONNECTOR
============================================================ */

.creative-progress-line {
    position: relative;

    display: block;

    width:
        28%;

    height:
        2px;

    margin:1.092rem
        0
        0
        32%;

    overflow: hidden;

    background:
        rgba(0, 0, 0, 0.08);
}


/* COLOR */

.creative-progress-fill {
    position: absolute;

    inset:
        0
        auto
        0
        0;

    display: block;

    width:
        0;

    background:
        linear-gradient(
            90deg,
            #7C3AED 0%,
            #E432ED 28%,
            #3DCAD4 55%,
            #FBBF24 82%,
            #FF7A00 100%
        );

    transition:
        width 0.8s ease;
}


/* ACTIVA */

.creative-progress-line.is-active
.creative-progress-fill {
    width:
        100%;
}


/* ============================================================
   INTRO
============================================================ */

.creative-hero-intro {
    display: flex;

    align-items:
        flex-start;

    gap:1.05rem;

    width:
        fit-content;

    max-width:26.88rem;

    margin:2.1rem
        7%
        0
        auto;
}


/* INTRO LINE */

.creative-hero-intro-line {
    display: block;

    flex-shrink: 0;

    width:2.94rem;

    height:
        1px;

    margin-top:0.598rem;

    background:
        #bcbcbc;
}


/* INTRO TEXT */

.creative-hero-intro p {
    margin: 0;

    font-family:
        'Regular',
        sans-serif;

    font-size:0.798rem;

    line-height:
        1.55;

    color:
        #6f6f6f;
}


.creative-hero-intro p strong {
    font-family:
        'Bold',
        sans-serif;

    font-weight:
        700;

    color:
        #111111;
}


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

.creative-hero-bottom {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:1.68rem;
}


/* ============================================================
   CTA
============================================================ */

.creative-hero-scroll {
    display: inline-flex;

    align-items:
        center;

    gap:0.84rem;

    color:
        #111111;

    text-decoration:
        none;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


/* CTA TEXT */

.creative-hero-scroll > span:last-child {
    font-family:
        'Medium',
        sans-serif;

    font-size:0.571rem;

    line-height:
        1;

    letter-spacing:0.11rem;
}


/* CTA LINE */

.creative-hero-scroll-line {
    position: relative;

    display: block;

    flex-shrink: 0;

    width:
        3.5rem;

    height:
        2px;

    overflow: hidden;

    background:
        #c9c9c9;
}


/* CTA COLOR */

.creative-hero-scroll-line::after {
    content: '';

    position: absolute;

    inset:
        0
        auto
        0
        0;

    width:
        0;

    background:
        linear-gradient(
            90deg,
            #7C3AED 0%,
            #E432ED 25%,
            #3DCAD4 50%,
            #FBBF24 75%,
            #FF7A00 100%
        );

    transition:
        width 0.35s ease;
}


/* CTA HOVER */

.creative-hero-scroll:hover,
.creative-hero-scroll:focus-visible {
    gap:1.176rem;

    color:
        #7C3AED;
}


.creative-hero-scroll:hover
.creative-hero-scroll-line::after,
.creative-hero-scroll:focus-visible
.creative-hero-scroll-line::after {
    width:
        100%;
}


/* ============================================================
   SIGNATURE
============================================================ */

.creative-hero-signature {
    margin: 0;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.534rem;

    line-height:
        1;

    letter-spacing:0.129rem;

    color:
        #9c9c9c;
}


/* ============================================================
   DESKTOP GRANDE
============================================================ */

@media (min-width: 1400px) {

    .creative-hero-title {
        font-size:5.208rem;

        letter-spacing:-0.21rem;
    }


    .creative-title-row-02 {
        margin-left:
            34%;
    }


    .creative-progress-line {
        margin-left:
            34%;
    }


    .creative-hero-intro {
        max-width:28.56rem;
    }


    .creative-hero-intro p {
        font-size:0.84rem;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1199.98px) {

    .creative-hero-title {
        font-size:3.696rem;

        letter-spacing:-0.14rem;
    }


    .creative-title-row-02 {
        margin-left:
            25%;
    }


    .creative-progress-line {
        margin-left:
            25%;
    }

}


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

@media (max-width: 991.98px) {

    .creative-hero {
        min-height:33.6rem;
    }


    .creative-hero-content {
        padding:5.04rem
            0
            1.68rem;
    }


    .creative-hero-title {
        font-size:2.856rem;

        line-height:
            0.94;

        letter-spacing:-0.09rem;
    }


    .creative-title-row {
        flex-wrap:
            wrap;
    }


    .creative-title-row-02 {
        margin-left:
            12%;
    }


    .creative-progress-line {
        width:
            35%;

        margin-left:
            12%;
    }


    .creative-hero-intro {
        max-width:24.36rem;

        margin:1.68rem
            0
            0
            12%;
    }


    .creative-hero-signature {
        display:
            none;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .creative-hero {
        min-height:31.92rem;
    }


    .creative-hero-content {
        padding:4.62rem
            0
            1.26rem;
    }


    .creative-hero-title {
        font-size:1.932rem;

        line-height:
            0.98;

        letter-spacing:-0.05rem;
    }


    .creative-title-row {
        display: block;

        width:
            100%;
    }


    .creative-title-row-02 {
        margin:0.368rem
            0
            0
            0;
    }


    .creative-progress-line {
        width:
            38%;

        margin:0.84rem
            0
            0.672rem;
    }


    .creative-title-word {
        display:
            inline;
    }


    .creative-hero-intro {
        width:
            100%;

        max-width:20.16rem;

        margin:1.47rem
            0
            0;
    }


    .creative-hero-intro-line {
        width:1.68rem;
    }


    .creative-hero-intro p {
        font-size:0.689rem;

        line-height:
            1.5;
    }


    .creative-hero-label,
    .creative-hero-number {
        font-size:0.534rem;

        letter-spacing:0.101rem;
    }


    .creative-hero-scroll {
        gap:0.63rem;
    }


    .creative-hero-scroll-line {
        width:
            2.5rem;
    }


    .creative-hero-scroll > span:last-child {
        font-size:0.534rem;

        letter-spacing:0.083rem;
    }


    .creative-path-01 {
        width:
            16rem;

        right:
            -8rem;
    }


    .creative-path-02 {
        width:
            14rem;

        left:
            -7rem;
    }


    .creative-path-03 {
        display:
            none;
    }

}


/* ============================================================
   MOBILE PEQUEÑO
============================================================ */

@media (max-width: 575.98px) {

    .creative-hero-title {
        font-size:1.638rem;

        line-height:
            1;
    }


    .creative-hero-intro {
        max-width:17.64rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .creative-title-word {
        color:
            #111111;

        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }


    .creative-progress-fill {
        width:
            100%;

        transition:
            none;
    }


    .creative-hero-scroll,
    .creative-hero-scroll-line::after {
        transition:
            none;
    }

}

/* ============================================================
   HERO
   ORDEN CREATIVO
============================================================ */

.creative-hero {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height:35.28rem;

    overflow: hidden;

    background: #f2f2f2;

    color: #111111;
}


/* ============================================================
   BACKGROUND
============================================================ */

.creative-hero-background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}


/* ============================================================
   GRID
============================================================ */

.creative-hero-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.04) 1px,
            transparent 1px
        );

    background-size: 5rem 5rem;

    opacity: 0.42;
}


/* ============================================================
   LÍNEAS DECORATIVAS
============================================================ */

.creative-path {
    position: absolute;

    display: block;

    height: 1px;

    transform-origin: left center;

    pointer-events: none;
}


.creative-path-01 {
    width: 34rem;

    top: 24%;
    right: -7rem;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(124, 58, 237, 0.12) 20%,
            rgba(124, 58, 237, 0.5) 55%,
            rgba(227, 50, 237, 0.2) 80%,
            transparent 100%
        );

    transform: rotate(-17deg);
}


.creative-path-02 {
    width: 30rem;

    left: -9rem;
    bottom: 18%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(61, 202, 212, 0.22) 25%,
            rgba(124, 58, 237, 0.4) 58%,
            rgba(227, 50, 237, 0.12) 82%,
            transparent 100%
        );

    transform: rotate(14deg);
}


.creative-path-03 {
    width: 25rem;

    right: -3rem;
    bottom: 13%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(124, 58, 237, 0.16) 22%,
            rgba(251, 191, 36, 0.38) 68%,
            transparent 100%
        );

    transform: rotate(-7deg);
}


/* ============================================================
   FOREGROUND
============================================================ */

.creative-hero-foreground {
    position: relative;

    z-index: 2;
}


/* ============================================================
   CONTENT
============================================================ */

.creative-hero-content {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 100%;
    height: 100%;

    min-width: 0;

    padding:5.88rem
        0
        2.1rem;
}


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

.creative-hero-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;
}


.creative-hero-label,
.creative-hero-number {
    margin: 0;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.571rem;

    line-height: 1;

    letter-spacing:0.147rem;

    color: #888888;
}


.creative-hero-label {
    text-transform: uppercase;
}


/* ============================================================
   MAIN
============================================================ */

.creative-hero-main {
    position: relative;

    width: 100%;

    min-width: 0;

    margin:
        auto
        0;
}


/* ============================================================
   TITLE
============================================================ */

.creative-hero-title {
    display: flex;

    flex-direction: column;

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:3.864rem;

    line-height: 0.94;

    letter-spacing:-0.14rem;

    color: #111111;
}


/* ============================================================
   GRUPOS DEL TÍTULO
============================================================ */

.creative-title-group {
    display: flex;

    flex-direction: column;

    width: fit-content;

    max-width: 100%;

    margin-top: 0;
    margin-bottom: 0;

    padding: 0;
}


/* ============================================================
   BLOQUE 01
============================================================ */

.creative-title-group-01 {
    align-self: flex-start;

    margin-left: 0;
}


/* ============================================================
   BLOQUE 02
============================================================ */

.creative-title-group-02 {
    align-self: flex-start;

    margin-left: 30%;
    margin-top:0.322rem;
}


/* ============================================================
   PALABRAS
   IMPORTANTE:
   NO EXISTE MOVIMIENTO NI TRANSFORMACIÓN
============================================================ */

.creative-title-word {
    position: static;

    display: block;

    width: fit-content;

    max-width: 100%;

    margin: 0;

    padding: 0;

    top: auto;
    left: auto;

    opacity: 1;

    /*
    Forzamos que ninguna regla anterior
    pueda desplazar las palabras.
    */

    transform: none !important;

    translate: none !important;

    animation: none !important;

    transition:
        color 0.55s ease;
}


/* ============================================================
   BOLD
   PRIMERO / DESPUÉS
============================================================ */

.creative-title-bold {
    font-family:
        'Bold',
        sans-serif;

    font-weight: 700;

    color: #b3b3b3;

    transform: none !important;
}


/* ============================================================
   BLACK + AMARILLO
   ENTENDEMOS / RECOMENDAMOS
============================================================ */

.creative-title-highlight {
    font-family:
        'Black',
        sans-serif;

    font-weight: 900;

    color:
        rgba(251, 191, 36, 0.25);

    transform: none !important;
}


/* ============================================================
   ESTADOS ACTIVOS
   ÚNICAMENTE CAMBIA EL COLOR
============================================================ */

.creative-title-bold.is-active {
    color: #111111;

    opacity: 1;

    transform: none !important;

    translate: none !important;
}


.creative-title-highlight.is-active {
    color: #FBBF24;

    opacity: 1;

    transform: none !important;

    translate: none !important;
}


/* ============================================================
   PROGRESS LINE
============================================================ */

.creative-progress-line {
    position: relative;

    display: block;

    width: 26%;
    height: 2px;

    margin:0.924rem
        0
        0.588rem
        30%;

    overflow: hidden;

    background:
        rgba(0, 0, 0, 0.07);
}


.creative-progress-fill {
    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #7C3AED 0%,
            #E432ED 25%,
            #3DCAD4 50%,
            #FBBF24 75%,
            #FF7A00 100%
        );

    transition:
        width 0.8s ease;
}


.creative-progress-line.is-active
.creative-progress-fill {
    width: 100%;
}


/* ============================================================
   INTRO
============================================================ */

.creative-hero-intro {
    display: flex;

    align-items: flex-start;

    gap:1.05rem;

    width: 100%;
    max-width:28.56rem;

    margin:1.68rem
        5%
        0
        auto;
}


.creative-hero-intro-line {
    display: block;

    flex-shrink: 0;

    width:2.94rem;
    height: 1px;

    margin-top:0.598rem;

    background: #bcbcbc;
}


.creative-hero-intro p {
    margin: 0;

    font-family:
        'Regular',
        sans-serif;

    font-size:0.798rem;

    line-height: 1.55;

    color: #707070;
}


.creative-hero-intro p strong {
    font-family:
        'Bold',
        sans-serif;

    font-weight: 700;

    color: #111111;
}


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

.creative-hero-bottom {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    width: 100%;

    gap:1.68rem;
}


/* ============================================================
   CTA
============================================================ */

.creative-hero-scroll {
    display: inline-flex;

    align-items: center;

    gap:0.84rem;

    color: #111111;

    text-decoration: none;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.creative-hero-scroll > span:last-child {
    font-family:
        'Medium',
        sans-serif;

    font-size:0.571rem;

    line-height: 1;

    letter-spacing:0.11rem;
}


/* ============================================================
   CTA LINE
============================================================ */

.creative-hero-scroll-line {
    position: relative;

    display: block;

    flex-shrink: 0;

    width: 3.5rem;
    height: 2px;

    overflow: hidden;

    background: #c9c9c9;
}


.creative-hero-scroll-line::after {
    content: '';

    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 0;

    background:
        linear-gradient(
            90deg,
            #7C3AED 0%,
            #E432ED 25%,
            #3DCAD4 50%,
            #FBBF24 75%,
            #FF7A00 100%
        );

    transition:
        width 0.35s ease;
}


.creative-hero-scroll:hover,
.creative-hero-scroll:focus-visible {
    gap:1.176rem;

    color: #7C3AED;
}


.creative-hero-scroll:hover
.creative-hero-scroll-line::after,
.creative-hero-scroll:focus-visible
.creative-hero-scroll-line::after {
    width: 100%;
}


/* ============================================================
   SIGNATURE
============================================================ */

.creative-hero-signature {
    margin: 0;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.534rem;

    line-height: 1;

    letter-spacing:0.129rem;

    color: #9c9c9c;
}


/* ============================================================
   DESKTOP GRANDE
============================================================ */

@media (min-width: 1400px) {

    .creative-hero-title {
        font-size:4.368rem;

        letter-spacing:-0.17rem;
    }


    .creative-title-group-02 {
        margin-left: 32%;
    }


    .creative-progress-line {
        margin-left: 32%;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1199.98px) {

    .creative-hero-title {
        font-size:3.36rem;

        letter-spacing:-0.11rem;
    }


    .creative-title-group-02 {
        margin-left: 25%;
    }


    .creative-progress-line {
        margin-left: 25%;
    }

}


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

@media (max-width: 991.98px) {

    .creative-hero {
        min-height:33.6rem;
    }


    .creative-hero-content {
        padding:5.04rem
            0
            1.68rem;
    }


    .creative-hero-title {
        font-size:2.688rem;

        line-height: 0.96;

        letter-spacing:-0.08rem;
    }


    .creative-title-group-02 {
        margin-left: 16%;
    }


    .creative-progress-line {
        width: 30%;

        margin-left: 16%;
    }


    .creative-hero-intro {
        max-width:24.36rem;

        margin:1.47rem
            0
            0
            16%;
    }


    .creative-hero-signature {
        display: none;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .creative-hero {
        min-height:31.92rem;
    }


    .creative-hero-content {
        padding:4.62rem
            0
            1.26rem;
    }


    .creative-hero-title {
        font-size:1.89rem;

        line-height: 0.98;

        letter-spacing:-0.045rem;
    }


    .creative-title-group-02 {
        margin-left: 8%;

        margin-top:0.322rem;
    }


    .creative-progress-line {
        width: 30%;

        margin:0.714rem
            0
            0.588rem
            8%;
    }


    .creative-hero-intro {
        max-width:20.16rem;

        margin:1.176rem
            0
            0
            8%;
    }


    .creative-hero-intro-line {
        width:1.68rem;
    }


    .creative-hero-intro p {
        font-size:0.689rem;

        line-height: 1.5;
    }


    .creative-hero-label,
    .creative-hero-number {
        font-size:0.534rem;

        letter-spacing:0.101rem;
    }


    .creative-hero-scroll {
        gap:0.63rem;
    }


    .creative-hero-scroll-line {
        width: 2.5rem;
    }


    .creative-hero-scroll > span:last-child {
        font-size:0.534rem;

        letter-spacing:0.083rem;
    }


    .creative-path-03 {
        display: none;
    }

}


/* ============================================================
   MOBILE PEQUEÑO
============================================================ */

@media (max-width: 575.98px) {

    .creative-hero-title {
        font-size:1.596rem;

        line-height: 1;
    }


    .creative-title-group-02 {
        margin-left: 5%;
    }


    .creative-progress-line {
        margin-left: 5%;
    }


    .creative-hero-intro {
        margin-left: 5%;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .creative-title-word,
    .creative-title-bold,
    .creative-title-highlight,
    .creative-title-word.is-active,
    .creative-title-bold.is-active,
    .creative-title-highlight.is-active {
        transform: none !important;

        translate: none !important;

        animation: none !important;

        transition: none;
    }


    .creative-title-bold {
        color: #111111;

        opacity: 1;
    }


    .creative-title-highlight {
        color: #FBBF24;

        opacity: 1;
    }


    .creative-progress-fill {
        width: 100%;

        transition: none;
    }


    .creative-hero-scroll,
    .creative-hero-scroll-line::after {
        transition: none;
    }

}

/* ============================================================
   SECTION 02
   EL CUESTIONAMIENTO
============================================================ */

.question-index-section {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #f7f7f7;

    color: #111111;
}


/* ============================================================
   CONTENT
============================================================ */

.question-index-content {
    width: 100%;

    padding:5.88rem
        0
        5.04rem;
}


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

.question-index-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin-bottom:3.78rem;
}


.question-index-top-left {
    display: flex;

    align-items: center;

    gap:0.84rem;
}


.question-index-number,
.question-index-label {
    font-family:
        'Medium',
        sans-serif;

    font-size:0.554rem;

    line-height:
        1;

    letter-spacing:0.129rem;

    color:
        #8b8b8b;
}


.question-index-number {
    color:
        #111111;
}


.question-index-label {
    margin:
        0;

    text-transform:
        uppercase;
}


/* ============================================================
   TOP LINE
============================================================ */

.question-index-line {
    position: relative;

    display: block;

    width:2.52rem;

    height:
        1px;

    background:
        #c9c9c9;
}


.question-index-line::after {
    content:
        '';

    position:
        absolute;

    inset:
        0 auto 0 0;

    width:
        38%;

    background:
        linear-gradient(
            90deg,
            #7C3AED,
            #E432ED,
            #FBBF24
        );
}


/* ============================================================
   HEADING
============================================================ */

.question-index-heading {
    width:
        100%;

    max-width:55.44rem;
}


.question-index-eyebrow {
    margin:0
        0
        0.924rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.554rem;

    line-height:
        1;

    letter-spacing:0.129rem;

    color:
        #909090;
}


/* ============================================================
   TITLE
============================================================ */

.question-index-title {
    margin:
        0;

    font-family:
        'Bold',
        sans-serif;

    font-size:4.032rem;

    font-weight:
        700;

    line-height:
        0.92;

    letter-spacing:-0.14rem;

    color:
        #111111;
}


.question-index-title strong {
    display:
        block;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        #FBBF24;
}


/* ============================================================
   INTRO
============================================================ */

.question-index-intro {
    max-width:28.56rem;

    margin:1.68rem
        0
        0;

    font-family:
        'Regular',
        sans-serif;

    font-size:0.798rem;

    line-height:
        1.55;

    color:
        #747474;
}


/* ============================================================
   GRID 7 / 5
============================================================ */

.question-index-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        1px
        minmax(0, 1fr);

    gap:3.36rem;

    align-items:
        stretch;

    width:
        100%;

    margin-top:4.2rem;

    padding:3.36rem
        0;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.08);
}


/* ============================================================
   DISPLAY
============================================================ */

.question-index-display {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width:
        0;
}


/* ============================================================
   LABELS
============================================================ */

.question-index-display-label,
.question-index-options-label {
    margin:0
        0
        1.428rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.552rem;

    line-height:
        1;

    letter-spacing:0.12rem;

    color:
        #929292;
}


/* ============================================================
   DISPLAY STAGE
============================================================ */

.question-index-display-stage {
    display: flex;

    align-items: center;

    width:
        100%;

    min-height:25.2rem;

    overflow:
        hidden;
}


/* ============================================================
   DISPLAY CONTENT
============================================================ */

.question-index-display-content {
    width:
        100%;

    max-width:39.48rem;

    opacity:
        1;

    transition:
        opacity 0.2s ease;
}


.question-index-display-content.is-changing {
    opacity:
        0;
}


/* ============================================================
   PREGUNTA PRINCIPAL
============================================================ */

.question-index-display-title {
    display: flex;

    flex-direction: column;

    width:
        100%;

    margin:
        0;

    font-family:
        'Bold',
        sans-serif;

    font-size:3.78rem;

    font-weight:
        700;

    line-height:
        0.92;

    letter-spacing:-0.12rem;

    color:
        #111111;
}


.question-index-display-title span {
    display:
        block;

    font-family:
        'Bold',
        sans-serif;

    font-weight:
        700;
}


/* BLACK + AMARILLO */

.question-index-display-title strong {
    display:
        block;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        #FBBF24;
}


/* ============================================================
   ANSWER
============================================================ */

.question-index-answer-highlight {
    max-width:35.28rem;

    margin:0
        0
        1.344rem;

    font-family:
        'Black',
        sans-serif;

    font-size:2.436rem;

    font-weight:
        900;

    line-height:
        0.98;

    letter-spacing:-0.07rem;

    color:
        #FBBF24;
}


.question-index-answer-copy {
    width:
        100%;

    max-width:33.6rem;

    margin:
        0;

    font-family:
        'Bold',
        sans-serif;

    font-size:1.218rem;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:-0.015rem;

    color:
        #222222;
}


/* ============================================================
   META
============================================================ */

.question-index-display-meta {
    display: flex;

    align-items: center;

    gap:0.84rem;

    margin-top:1.68rem;
}


.question-index-display-meta-line {
    display:
        block;

    width:3.36rem;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #7C3AED,
            #E432ED,
            #3DCAD4,
            #FBBF24
        );
}


.question-index-display-meta-number {
    font-family:
        'Medium',
        sans-serif;

    font-size:0.515rem;

    line-height:
        1;

    letter-spacing:0.11rem;

    color:
        #9b9b9b;
}


/* ============================================================
   DIVIDER
============================================================ */

.question-index-divider {
    position:
        relative;

    width:
        1px;

    background:
        rgba(0, 0, 0, 0.08);
}


.question-index-divider span {
    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        1px;

    height:
        18%;

    background:
        linear-gradient(
            180deg,
            #7C3AED,
            #E432ED,
            #FBBF24
        );
}


/* ============================================================
   OPTIONS
============================================================ */

.question-index-options {
    min-width:
        0;
}


.question-index-list {
    display:
        flex;

    flex-direction:
        column;

    width:
        100%;
}


/* ============================================================
   ITEM
============================================================ */

.question-index-item {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        2.75rem
        minmax(0, 1fr);

    align-items:
        center;

    gap:0.756rem;

    width:
        100%;

    padding:0.966rem
        0;

    border:
        0;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.07);

    background:
        transparent;

    appearance:
        none;

    text-align:
        left;

    cursor:
        pointer;

    color:
        #8a8a8a;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}


/* COLOR BAR */

.question-index-item::before {
    content:
        '';

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        2px;

    height:
        100%;

    background:
        linear-gradient(
            180deg,
            #7C3AED,
            #E432ED,
            #FBBF24
        );

    transform:
        scaleY(0);

    transform-origin:
        center;

    transition:
        transform 0.3s ease;
}


.question-index-item-number {
    font-family:
        'Medium',
        sans-serif;

    font-size:0.534rem;

    line-height:
        1;

    letter-spacing:0.092rem;

    color:
        #a2a2a2;
}


.question-index-item-text {
    font-family:
        'Bold',
        sans-serif;

    font-size:0.84rem;

    font-weight:
        700;

    line-height:
        1.25;
}


/* ACTIVE */

.question-index-item:hover,
.question-index-item:focus-visible,
.question-index-item.is-active {
    color:
        #111111;

    padding-left:0.63rem;
}


.question-index-item:hover::before,
.question-index-item:focus-visible::before,
.question-index-item.is-active::before {
    transform:
        scaleY(1);
}


.question-index-item.is-active
.question-index-item-number {
    color:
        #7C3AED;
}


/* ============================================================
   CONTACT
============================================================ */

.question-contact {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(20rem, 0.8fr);


    gap:4.2rem;

    width:
        100%;

    padding-top:4.2rem;
    justify-content: center;
    align-items: center;
}


/* ============================================================
   CONTACT COPY
============================================================ */

.question-contact-copy {
    max-width:100%;
}


.question-contact-eyebrow {
    margin:0
        0
        0.84rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.57rem;

    line-height:
        1;

    letter-spacing:0.12rem;

    color:
        #909090;
}


.question-contact-title {
    margin:
        0;

    font-family:
        'Bold',
        sans-serif;

    font-size:2.856rem;

    font-weight:
        700;

    line-height:
        0.95;

    letter-spacing:-0.08rem;

    color:
        #111111;
}


.question-contact-title strong {
    display:
        inline;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        #FBBF24;
}


.question-contact-description {
    max-width:26.04rem;

    margin:1.26rem
        0
        0;

    font-family:
        'Regular',
        sans-serif;

    font-size:0.773rem;

    line-height:
        1.55;

    color:
        #727272;
}


/* ============================================================
   CONTACT ACTIONS
============================================================ */

.question-contact-actions {
    display:
        flex;
    gap:0.84rem;

    width:
        100%;
        flex-direction: column;
}


/* ============================================================
   PILL BUTTON
============================================================ */

.question-contact-button {
    position:
        relative;

    width:
        100%;

    padding:
        2px;

    overflow:
        hidden;

    border:
        0;

    border-radius:
        999px;

    background:
        #d3d3d3;

    appearance:
        none;

    cursor:
        pointer;

    isolation:
        isolate;
}


/* COLORES DEL LOGO */

.question-contact-button::before {
    content:
        '';

    position:
        absolute;

    inset:
        -100%;

    z-index:
        -2;

    background:
        conic-gradient(
            from 0deg,
            #7C3AED,
            #E432ED,
            #3DCAD4,
            #34C759,
            #FBBF24,
            #FF7A00,
            #7C3AED
        );

    opacity:
        0;

    animation:
        questionButtonRotate
        3s
        linear
        infinite;

    animation-play-state:
        paused;

    transition:
        opacity 0.3s ease;
}


.question-contact-button-inner {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:1.68rem;

    width:
        100%;

    min-height:3.864rem;

    padding:0
        1.428rem;

    border-radius:
        999px;

    background:
        #f7f7f7;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}


.question-contact-button-text {
    font-family:
        'Bold',
        sans-serif;

    font-size:0.605rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:0.092rem;

    color:
        #111111;

    transition:
        transform 0.3s ease;
}


.question-contact-button-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:1.848rem;

    height:1.848rem;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #ededed;

    font-size:0.798rem;

    color:
        #777777;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}


/* BUTTON HOVER */

.question-contact-button:hover::before,
.question-contact-button:focus-visible::before {
    opacity:
        1;

    animation-play-state:
        running;
}


.question-contact-button:hover
.question-contact-button-text,
.question-contact-button:focus-visible
.question-contact-button-text {
    transform:
        translateX(0.3rem);
}


.question-contact-button:hover
.question-contact-button-icon,
.question-contact-button:focus-visible
.question-contact-button-icon {
    background:
        #111111;

    color:
        #ffffff;

    transform:
        rotate(45deg);
}


@keyframes questionButtonRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   DESKTOP GRANDE
============================================================ */

@media (min-width: 1400px) {

    .question-index-title {
        font-size:4.536rem;
    }


    .question-index-display-stage {
        min-height:26.88rem;
    }


    .question-index-display-title {
        font-size:4.2rem;
    }


    .question-index-answer-highlight {
        font-size:2.688rem;
    }


    .question-index-answer-copy {
        font-size:1.302rem;
    }


    .question-contact-title {
        font-size:3.192rem;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1199.98px) {

    .question-index-title {
        font-size:3.36rem;
    }


    .question-index-grid {
        grid-template-columns:
            minmax(0, 1.3fr)
            1px
            minmax(0, 1fr);

        gap:2.52rem;
    }


    .question-index-display-stage {
        min-height:22.68rem;
    }


    .question-index-display-title {
        font-size:3.192rem;
    }


    .question-index-answer-highlight {
        font-size:2.1rem;
    }


    .question-index-answer-copy {
        font-size:1.05rem;
    }

}


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

@media (max-width: 991.98px) {

    .question-index-content {
        padding:5.04rem
            0
            4.2rem;
    }


    .question-index-title {
        font-size:2.688rem;
    }


    .question-index-grid {
        grid-template-columns:
            1fr;

        gap:2.52rem;
    }


    .question-index-divider {
        width:
            100%;

        height:
            1px;
    }


    .question-index-divider span {
        width:
            18%;

        height:
            1px;
    }


    .question-index-display-stage {
        min-height:17.64rem;
    }


    .question-index-display-title {
        font-size:2.688rem;
    }


    .question-contact {
        grid-template-columns:
            1fr;

        gap:2.52rem;
    }


    .question-contact-actions {
        max-width:28.56rem;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .question-index-content {
        padding:4.62rem
            0
            3.36rem;
    }


    .question-index-title {
        font-size:1.932rem;

        line-height:
            0.98;
    }


    .question-index-intro {
        font-size:0.689rem;
    }


    .question-index-grid {
        margin-top:2.94rem;

        padding:2.1rem
            0;
    }


    .question-index-display-stage {
        min-height:15.12rem;
    }


    .question-index-display-title {
        font-size:1.974rem;
    }


    .question-index-answer-highlight {
        margin-bottom:0.924rem;

        font-size:1.428rem;

        line-height:
            1;
    }


    .question-index-answer-copy {
        font-size:0.798rem;

        line-height:
            1.5;
    }


    .question-index-item {
        grid-template-columns:
            2rem
            minmax(0, 1fr);

        gap:0.552rem;
    }


    .question-index-item-text {
        font-size:0.773rem;
    }


    .question-contact {
        margin-top:3.36rem;

        padding-top:3.36rem;
    }


    .question-contact-title {
        font-size:1.848rem;
    }


    .question-contact-description {
        font-size:0.689rem;
    }


    .question-contact-button-inner {
        min-height:3.696rem;

        padding:0
            1.05rem;
    }


    .question-contact-button-text {
        font-size:0.554rem;
    }

}


/* ============================================================
   MOBILE PEQUEÑO
============================================================ */

@media (max-width: 575.98px) {

    .question-index-title {
        font-size:1.68rem;
    }


    .question-index-display-title {
        font-size:1.68rem;
    }


    .question-contact-title {
        font-size:1.596rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .question-index-display-content,
    .question-index-item,
    .question-index-item::before,
    .question-contact-button::before,
    .question-contact-button-inner,
    .question-contact-button-text,
    .question-contact-button-icon {
        animation:
            none;

        transition:
            none;
    }

}

/* ============================================================
   SECTION 03
   ORDEN CREATIVO
============================================================ */

.creative-system-section {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #f2f2f2;

    color: #111111;
}


/* ============================================================
   CONTENT
============================================================ */

.creative-system-content {
    width: 100%;

    padding:5.88rem
        0
        5.04rem;
}


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

.creative-system-top {
    display: flex;

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

    width: 100%;

    margin-bottom:3.78rem;
}


.creative-system-top-left {
    display: flex;

    align-items: center;

    gap:0.84rem;
}


.creative-system-number,
.creative-system-label {
    font-family:
        'Medium',
        sans-serif;

    font-size:0.554rem;

    line-height:
        1;

    letter-spacing:0.129rem;

    color:
        #8b8b8b;
}


.creative-system-number {
    color:
        #111111;
}


.creative-system-label {
    margin:
        0;

    text-transform:
        uppercase;
}


/* ============================================================
   TOP LINE
============================================================ */

.creative-system-top-line {
    position:
        relative;

    display:
        block;

    width:
        3rem;

    height:
        1px;

    background:
        #c9c9c9;
}


.creative-system-top-line::after {
    content:
        '';

    position:
        absolute;

    inset:
        0
        auto
        0
        0;

    width:
        55%;

    background:
        linear-gradient(
            90deg,
            #7C3AED,
            #EC4899,
            #FBBF24
        );
}


/* ============================================================
   HEADING
============================================================ */

.creative-system-heading {
    width:
        100%;

    max-width:57.12rem;
}


.creative-system-eyebrow {
    margin:0
        0
        0.924rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.554rem;

    line-height:
        1;

    letter-spacing:0.129rem;

    color:
        #909090;
}


.creative-system-title {
    margin:
        0;

    font-family:
        'Bold',
        sans-serif;

    font-size:4.032rem;

    font-weight:
        700;

    line-height:
        0.92;

    letter-spacing:-0.14rem;

    color:
        #111111;
}


.creative-system-title strong {
    display:
        block;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        #FBBF24;
}


.creative-system-intro {
    width:
        100%;

    max-width:31.92rem;

    margin:1.68rem
        0
        0;

    font-family:
        'Regular',
        sans-serif;

    font-size:0.798rem;

    line-height:
        1.6;

    color:
        #747474;
}


/* ============================================================
   MAP
============================================================ */

.creative-system-map {
    position:
        relative;

    width:
        100%;

    height:43.68rem;

    margin-top:3.36rem;

    overflow:
        hidden;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.08);

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.025) 1px,
            transparent 1px
        );

    background-size:
        5rem
        5rem;

    isolation:
        isolate;
}


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

.creative-system-lines {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        1;

    overflow:
        visible;

    pointer-events:
        none;
}


/* ============================================================
   TODAS LAS LÍNEAS
   EXACTAMENTE IGUALES
============================================================ */

.creative-system-path {
    fill:
        none;

    stroke:
        url(#creativeSystemGradient);

    stroke-width:
        1.5px;

    stroke-linecap:
        round;

    stroke-dasharray:
        2px
        10px;

    stroke-dashoffset:
        0;

    vector-effect:
        non-scaling-stroke;

    opacity:
        0.9;

    filter:
        none;

    shape-rendering:
        geometricPrecision;

    animation:
        creativeSystemFlow
        1.1s
        linear
        infinite;
}


/* ============================================================
   MOVIMIENTO
============================================================ */

@keyframes creativeSystemFlow {

    from {
        stroke-dashoffset:
            0;
    }

    to {
        stroke-dashoffset:
            -24px;
    }

}


/* ============================================================
   CORE
============================================================ */

.creative-system-core {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:11.34rem;

    height:11.34rem;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border-radius:
        50%;

    background:
        #111111;

    color:
        #ffffff;

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

    z-index:
        5;

    box-shadow:
        0
        1.5rem
        4rem
        rgba(0, 0, 0, 0.10);

    animation:
        creativeSystemCorePulse
        3s
        ease-in-out
        infinite;
}


/* ============================================================
   CORE RINGS
============================================================ */

.creative-system-core-ring {
    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;
}


.creative-system-core-ring-01 {
    inset:
        -1rem;

    border:
        1px solid
        rgba(124, 58, 237, 0.18);

    animation:
        creativeSystemRing
        3s
        ease-out
        infinite;
}


.creative-system-core-ring-02 {
    inset:
        -2.25rem;

    border:
        1px solid
        rgba(251, 191, 36, 0.20);

    animation:
        creativeSystemRing
        3s
        ease-out
        1.5s
        infinite;
}


/* ============================================================
   CORE TEXT
============================================================ */

.creative-system-core-label {
    font-family:
        'Medium',
        sans-serif;

    font-size:0.571rem;

    line-height:
        1;

    letter-spacing:0.166rem;

    color:
        rgba(255, 255, 255, 0.66);
}


.creative-system-core-title {
    margin-top:0.322rem;

    font-family:
        'Black',
        sans-serif;

    font-size:1.428rem;

    font-weight:
        900;

    line-height:
        1;

    color:
        #FBBF24;
}


.creative-system-core-caption {
    margin-top:0.714rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.386rem;

    line-height:
        1;

    letter-spacing:0.092rem;

    color:
        rgba(255, 255, 255, 0.42);
}


/* ============================================================
   CORE ANIMATION
============================================================ */

@keyframes creativeSystemCorePulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.035);
    }

}


@keyframes creativeSystemRing {

    0% {
        opacity:
            0;

        transform:
            scale(0.90);
    }

    35% {
        opacity:
            0.8;
    }

    100% {
        opacity:
            0;

        transform:
            scale(1.16);
    }

}


/* ============================================================
   NODOS
============================================================ */

.creative-system-node {
    position:
        absolute;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    width:10.5rem;

    height:6.048rem;

    padding:0.84rem
        1.008rem;

    background:
        rgba(255, 255, 255, 0.97);

    border:
        1px solid
        rgba(124, 58, 237, 0.28);

    z-index:
        4;

    box-shadow:
        0
        1rem
        2.6rem
        rgba(0, 0, 0, 0.045);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* ============================================================
   NODE HOVER
============================================================ */

.creative-system-node:hover {
    border-color:
        rgba(124, 58, 237, 0.48);

    box-shadow:
        0
        1.4rem
        3.2rem
        rgba(124, 58, 237, 0.08);

    transform:
        translateY(-3px);
}


/* ============================================================
   NODE DOT
============================================================ */

.creative-system-node-dot {
    position:
        absolute;

    top:
        -0.36rem;

    left:
        -0.36rem;

    width:0.605rem;

    height:0.605rem;

    border-radius:
        50%;

    background:
        #FBBF24;

    box-shadow:
        0
        0
        0
        0.36rem
        rgba(251, 191, 36, 0.14);

    animation:
        creativeNodePulse
        2.4s
        ease-in-out
        infinite;
}


@keyframes creativeNodePulse {

    0%,
    100% {
        box-shadow:
            0
            0
            0
            0.32rem
            rgba(251, 191, 36, 0.10);
    }

    50% {
        box-shadow:
            0
            0
            0
            0.48rem
            rgba(251, 191, 36, 0.18);
    }

}


/* ============================================================
   NODE TYPO
============================================================ */

.creative-system-node-number {
    margin-bottom:0.506rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.46rem;

    line-height:
        1;

    letter-spacing:0.11rem;

    color:
        #999999;
}


.creative-system-node strong {
    font-family:
        'Black',
        sans-serif;

    font-size:0.773rem;

    font-weight:
        900;

    line-height:
        1.05;

    letter-spacing:0.041rem;

    color:
        #111111;
}


.creative-system-node small {
    margin-top:0.46rem;

    font-family:
        'Regular',
        sans-serif;

    font-size:0.563rem;

    line-height:
        1.35;

    color:
        #7c7c7c;
}


/* ============================================================
   POSICIONES
   RADIAL Y SIMÉTRICO
============================================================ */


/* NEGOCIO */

.creative-system-node-negocio {
    top:
        50%;

    left:
        2%;

    transform:
        translateY(-50%);
}


.creative-system-node-negocio:hover {
    transform:
        translateY(
            calc(-50% - 3px)
        );
}


/* MARCA */

.creative-system-node-marca {
    top:
        16%;

    left:
        17%;
}


/* AUDIENCIAS */

.creative-system-node-audiencias {
    top:
        3%;

    left:
        50%;

    transform:
        translateX(-50%);
}


.creative-system-node-audiencias:hover {
    transform:
        translateX(-50%)
        translateY(-3px);
}


/* COMUNICACIÓN */

.creative-system-node-comunicacion {
    top:
        16%;

    right:
        17%;
}


/* VENTAS */

.creative-system-node-ventas {
    top:
        50%;

    right:
        2%;

    transform:
        translateY(-50%);
}


.creative-system-node-ventas:hover {
    transform:
        translateY(
            calc(-50% - 3px)
        );
}


/* CREATIVIDAD */

.creative-system-node-creatividad {
    bottom:
        10%;

    left:
        17%;
}


/* TECNOLOGÍA */

.creative-system-node-tecnologia {
    bottom:
        10%;

    right:
        17%;
}


/* ============================================================
   RESULTADO
============================================================ */

.creative-system-goal {
    left:
        50%;

    bottom:
        1%;

    width:12.18rem;

    height:6.048rem;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    transform:
        translateX(-50%);

    border-color:
        rgba(251, 191, 36, 0.45);

    background:
        #ffffff;
}


.creative-system-goal:hover {
    transform:
        translateX(-50%)
        translateY(-3px);

    border-color:
        rgba(251, 191, 36, 0.68);
}


.creative-system-goal
.creative-system-node-dot {
    left:
        50%;

    transform:
        translateX(-50%);
}


.creative-system-goal
.creative-system-node-number {
    color:
        #999999;
}


.creative-system-goal strong {
    max-width:10.08rem;

    font-size:0.84rem;

    line-height:
        1.05;
}


/* ============================================================
   CLOSING
============================================================ */

.creative-system-closing {
    display:
        flex;

    align-items:
        flex-start;

    gap:1.05rem;

    width:
        100%;

    max-width:28.56rem;

    margin:2.52rem
        0
        0
        auto;
}


.creative-system-closing-line {
    display:
        block;

    flex-shrink:
        0;

    width:2.94rem;

    height:
        1px;

    margin-top:0.588rem;

    background:
        linear-gradient(
            90deg,
            #7C3AED,
            #EC4899,
            #FBBF24
        );
}


.creative-system-closing p {
    margin:
        0;

    font-family:
        'Regular',
        sans-serif;

    font-size:0.773rem;

    line-height:
        1.55;

    color:
        #747474;
}


.creative-system-closing p strong {
    font-family:
        'Bold',
        sans-serif;

    color:
        #111111;
}


/* ============================================================
   DESKTOP GRANDE
============================================================ */

@media (min-width: 1400px) {

    .creative-system-title {
        font-size:4.536rem;
    }


    .creative-system-map {
        height:45.36rem;
    }


    .creative-system-core {
        width:11.76rem;

        height:11.76rem;
    }


    .creative-system-core-title {
        font-size:1.554rem;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1199.98px) {

    .creative-system-title {
        font-size:3.36rem;
    }


    .creative-system-map {
        height:40.32rem;
    }


    .creative-system-node {
        width:9.24rem;

        height:5.628rem;
    }


    .creative-system-node-marca {
        left:
            13%;
    }


    .creative-system-node-comunicacion {
        right:
            13%;
    }


    .creative-system-node-creatividad {
        left:
            13%;
    }


    .creative-system-node-tecnologia {
        right:
            13%;
    }


    .creative-system-goal {
        width:11.34rem;
    }

}


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

@media (max-width: 991.98px) {

    .creative-system-content {
        padding:5.04rem
            0
            4.2rem;
    }


    .creative-system-title {
        font-size:2.688rem;
    }


    .creative-system-map {
        height:36.96rem;
    }


    .creative-system-core {
        width:9.24rem;

        height:9.24rem;
    }


    .creative-system-core-title {
        font-size:1.176rem;
    }


    .creative-system-core-caption {
        display:
            none;
    }


    .creative-system-node {
        width:8.148rem;

        height:5.04rem;

        padding:0.672rem
            0.756rem;
    }


    .creative-system-node small {
        font-size:0.543rem;
    }


    .creative-system-node-marca {
        left:
            8%;
    }


    .creative-system-node-comunicacion {
        right:
            8%;
    }


    .creative-system-node-creatividad {
        left:
            8%;
    }


    .creative-system-node-tecnologia {
        right:
            8%;
    }


    .creative-system-goal {
        width:10.08rem;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .creative-system-content {
        padding:4.62rem
            0
            3.36rem;
    }


    .creative-system-title {
        font-size:1.932rem;

        line-height:
            0.98;

        letter-spacing:-0.05rem;
    }


    .creative-system-intro {
        font-size:0.689rem;
    }


    .creative-system-map {
        display:
            flex;

        flex-direction:
            column;

        gap:0.756rem;

        height:
            auto;

        margin-top:2.94rem;

        padding:2.52rem
            0;

        overflow:
            visible;

        background-size:
            3rem
            3rem;
    }


    .creative-system-lines {
        display:
            none;
    }


    .creative-system-core {
        position:
            relative;

        top:
            auto;

        left:
            auto;

        width:8.4rem;

        height:8.4rem;

        margin:0
            auto
            2.52rem;

        transform:
            none;

        animation:
            creativeSystemCorePulseMobile
            3s
            ease-in-out
            infinite;
    }


    .creative-system-node,
    .creative-system-node-negocio,
    .creative-system-node-marca,
    .creative-system-node-audiencias,
    .creative-system-node-comunicacion,
    .creative-system-node-ventas,
    .creative-system-node-creatividad,
    .creative-system-node-tecnologia,
    .creative-system-goal {
        position:
            relative;

        top:
            auto;

        right:
            auto;

        bottom:
            auto;

        left:
            auto;

        width:
            100%;

        height:
            auto;

        min-height:4.536rem;

        transform:
            none;

        text-align:
            left;

        align-items:
            flex-start;
    }


    .creative-system-node:hover,
    .creative-system-node-negocio:hover,
    .creative-system-node-audiencias:hover,
    .creative-system-node-ventas:hover,
    .creative-system-goal:hover {
        transform:
            translateY(-2px);
    }


    .creative-system-goal {
        margin-top:1.26rem;

        text-align:
            center;

        align-items:
            center;
    }


    .creative-system-goal
    .creative-system-node-dot {
        left:
            50%;

        transform:
            translateX(-50%);
    }


    .creative-system-closing {
        max-width:21rem;

        margin:2.1rem
            0
            0;
    }


    .creative-system-closing-line {
        width:1.68rem;
    }


    .creative-system-closing p {
        font-size:0.689rem;
    }

}


/* ============================================================
   MOBILE CORE
============================================================ */

@keyframes creativeSystemCorePulseMobile {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.035);
    }

}


/* ============================================================
   MOBILE PEQUEÑO
============================================================ */

@media (max-width: 575.98px) {

    .creative-system-title {
        font-size:1.68rem;
    }


    .creative-system-core {
        width:7.56rem;

        height:7.56rem;
    }


    .creative-system-core-title {
        font-size:1.05rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .creative-system-path,
    .creative-system-core,
    .creative-system-core-ring,
    .creative-system-node-dot {
        animation:
            none;
    }

}

/* ============================================================
   SECTION 04
============================================================ */

.creative-validation-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    color: #111111;
}


/* ============================================================
   CONTENT
============================================================ */

.creative-validation-content {
    width: 100%;
    padding:5.88rem 0 4.62rem;
}


/* ============================================================
   HEADER
============================================================ */

.creative-validation-top {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom:3.36rem;
}


.creative-validation-top-left {
    display: flex;
    align-items: center;
    gap:0.84rem;
}


.creative-validation-number,
.creative-validation-label {
    font-family: 'Medium', sans-serif;
    font-size:0.554rem;
    line-height: 1;
    letter-spacing:0.129rem;
}


.creative-validation-number {
    color: #111111;
}


.creative-validation-label {
    margin: 0;
    color: #8b8b8b;
}


.creative-validation-top-line {
    position: relative;
    display: block;
    width: 3rem;
    height: 1px;
    background: #cccccc;
}


.creative-validation-top-line::after {
    content: '';

    position: absolute;
    inset: 0 auto 0 0;

    width: 55%;

    background:
        linear-gradient(
            90deg,
            #7C3AED,
            #E432ED,
            #FBBF24
        );
}


/* ============================================================
   HEADING
============================================================ */

.creative-validation-heading {
    width: 100%;
    max-width:58.8rem;
}


.creative-validation-eyebrow {
    margin:0 0 0.84rem;

    font-family: 'Medium', sans-serif;
    font-size:0.554rem;
    line-height: 1;

    letter-spacing:0.129rem;

    color: #909090;
}


.creative-validation-title {
    margin: 0;

    font-family: 'Bold', sans-serif;

    font-size:3.864rem;
    font-weight: 700;

    line-height: 0.93;

    letter-spacing:-0.13rem;

    color: #111111;
}


.creative-validation-title strong {
    display: block;

    font-family: 'Black', sans-serif;

    font-weight: 900;

    color: #FBBF24;
}


.creative-validation-intro {
    width: 100%;
    max-width:28.56rem;

    margin:1.428rem 0 0;

    font-family: 'Regular', sans-serif;

    font-size:0.773rem;
    line-height: 1.55;

    color: #747474;
}


/* ============================================================
   STAGE
============================================================ */

.creative-validation-stage {
    width: 100%;
    margin-top:3.36rem;
}


/* ============================================================
   GRID
============================================================ */

.creative-validation-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:0.84rem;
}


/* ============================================================
   CARD
============================================================ */

.creative-validation-card {
    position: relative;

    min-height:14.28rem;

    padding:1.512rem
        1.68rem
        1.68rem;

    overflow: hidden;

    background: #f3f3f3;

    border:
        1px solid
        rgba(0, 0, 0, 0.045);

    transition:
        background-color 0.45s ease,
        border-color 0.45s ease,
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


/* ============================================================
   ACTIVE INDICATOR
============================================================ */

.creative-validation-card::before {
    content: '';

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    background:
        linear-gradient(
            180deg,
            #7C3AED 0%,
            #E432ED 25%,
            #3DCAD4 50%,
            #FBBF24 75%,
            #FF7A00 100%
        );

    transform: scaleY(0);

    transform-origin: bottom;

    transition:
        transform 0.5s ease;
}


.creative-validation-card.is-active {
    background: #f7f7f7;

    border-color:
        rgba(0, 0, 0, 0.08);

    transform:
        translateY(-5px);

    box-shadow:
        0
        1.5rem
        3rem
        rgba(0, 0, 0, 0.045);
}


.creative-validation-card.is-active::before {
    transform: scaleY(1);
}


/* ============================================================
   CARD TOP
============================================================ */

.creative-validation-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.creative-validation-card-number {
    font-family: 'Medium', sans-serif;

    font-size:0.506rem;

    line-height: 1;

    letter-spacing:0.129rem;

    color: #999999;
}


.creative-validation-card-category {
    font-family: 'Medium', sans-serif;

    font-size:0.506rem;

    line-height: 1;

    letter-spacing:0.129rem;

    color: #111111;
}


/* ============================================================
   CARD CONTENT
============================================================ */

.creative-validation-card-content {
    margin-top:2.268rem;
}


.creative-validation-card-kicker {
    margin:0 0 0.588rem;

    font-family: 'Medium', sans-serif;

    font-size:0.506rem;

    line-height: 1;

    letter-spacing:0.147rem;

    color: #999999;
}


.creative-validation-card h3 {
    width: 100%;
    max-width:19.32rem;

    margin: 0;

    font-family: 'Bold', sans-serif;

    font-size:1.386rem;

    font-weight: 700;

    line-height: 1.06;

    color: #111111;
}


.creative-validation-card h3 strong {
    display: block;

    font-family: 'Black', sans-serif;

    font-weight: 900;
}


/* ============================================================
   ANSWER
============================================================ */

.creative-validation-card-answer {
    width: 100%;
    max-width:22.68rem;

    margin-top:1.176rem;

    opacity: 0.25;

    transform:
        translateY(6px);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}


.creative-validation-card.is-active
.creative-validation-card-answer {
    opacity: 1;

    transform:
        translateY(0);
}


.creative-validation-card-answer-label {
    display: block;

    margin-bottom:0.414rem;

    font-family: 'Bold', sans-serif;

    font-size:0.534rem;

    line-height: 1;

    letter-spacing:0.11rem;

    color: #FBBF24;
}


.creative-validation-card-answer p {
    margin: 0;

    font-family: 'Regular', sans-serif;

    font-size:0.638rem;

    line-height: 1.5;

    color: #757575;
}


/* ============================================================
   CARD PROGRESS
============================================================ */

.creative-validation-progress {
    position: absolute;

    right: 2rem;
    bottom: 1.5rem;
    left: 2rem;

    height: 1px;

    overflow: hidden;

    background:
        rgba(0, 0, 0, 0.08);
}


.creative-validation-progress span {
    display: block;

    width: 0;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #7C3AED 0%,
            #E432ED 25%,
            #3DCAD4 50%,
            #FBBF24 75%,
            #FF7A00 100%
        );
}


.creative-validation-card.is-active
.creative-validation-progress span {
    animation:
        creativeValidationProgress
        2.5s
        linear
        forwards;
}


@keyframes creativeValidationProgress {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }

}


/* ============================================================
   RESULT
============================================================ */

.creative-validation-result {
    display: flex;

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

    gap:1.68rem;

    width: 100%;

    padding:1.134rem
        0;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.08);

    opacity: 0.35;

    transition:
        opacity 0.45s ease;
}


.creative-validation-result.is-active {
    opacity: 1;
}


.creative-validation-result-label {
    font-family: 'Medium', sans-serif;

    font-size:0.506rem;

    line-height: 1;

    letter-spacing:0.12rem;

    color: #999999;
}


.creative-validation-result strong {
    font-family: 'Black', sans-serif;

    font-size:0.798rem;

    line-height: 1;

    letter-spacing:0.028rem;

    color: #111111;
}


/* ============================================================
   CONTACT
============================================================ */

.creative-validation-contact {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap:3.36rem;

    width: 100%;

    margin-top:3.36rem;

    padding:2.73rem
        0;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.08);
}


/* ============================================================
   CONTACT COPY
============================================================ */

.creative-validation-contact-copy {
    width: 100%;
    max-width:40.32rem;
}


.creative-validation-contact-eyebrow {
    margin:0
        0
        0.714rem;

    font-family: 'Medium', sans-serif;

    font-size:0.552rem;

    line-height: 1;

    letter-spacing:0.129rem;

    color: #999999;
}


.creative-validation-contact-title {
    margin: 0;

    font-family: 'Bold', sans-serif;

    font-size:2.52rem;

    font-weight: 700;

    line-height: 0.96;

    letter-spacing:-0.07rem;

    color: #111111;
}


.creative-validation-contact-title strong {
    display: block;

    font-family: 'Black', sans-serif;

    font-weight: 900;

    color: #FBBF24;
}


/* ============================================================
   CTA ACTIONS
============================================================ */

.creative-validation-contact-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap:0.714rem;

    flex-wrap: nowrap;
}


/* ============================================================
   CTA
============================================================ */

.creative-validation-cta {
    position: relative;

    display: inline-block;

    flex: 0 0 auto;

    padding: 2px;

    overflow: hidden;

    border-radius: 999px;

    background: #d3d3d3;

    text-decoration: none;

    isolation: isolate;

    transition:
        transform 0.3s ease;
}


/* ============================================================
   CTA GRADIENT BORDER
============================================================ */

.creative-validation-cta::before {
    content: '';

    position: absolute;

    inset: -110%;

    z-index: -2;

    background:
        conic-gradient(
            from 0deg,
            #7C3AED,
            #E432ED,
            #3DCAD4,
            #34C759,
            #FBBF24,
            #FF7A00,
            #7C3AED
        );

    opacity: 0;

    animation:
        creativeValidationCtaRotate
        3s
        linear
        infinite;

    animation-play-state: paused;

    transition:
        opacity 0.3s ease;
}


/* ============================================================
   CTA INNER
============================================================ */

.creative-validation-cta-inner {
    position: relative;

    z-index: 2;

    display: flex;

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

    gap:0.924rem;

    min-height:3.192rem;

    padding:0
        0.756rem
        0
        1.218rem;

    border-radius: 999px;

    background: #f5f5f5;

    transition:
        background-color 0.3s ease;
}


/* EMAIL */

.creative-validation-cta:first-child
.creative-validation-cta-inner {
    min-width:11.34rem;
}


/* WHATSAPP */

.creative-validation-cta-whatsapp
.creative-validation-cta-inner {
    min-width:14.28rem;
}


/* ============================================================
   CTA TEXT
============================================================ */

.creative-validation-cta-text {
    font-family: 'Bold', sans-serif;

    font-size:0.58rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing:0.074rem;

    color: #111111;

    white-space: nowrap;

    transition:
        transform 0.3s ease;
}


/* ============================================================
   CTA ICON
============================================================ */

.creative-validation-cta-icon {
    display: flex;

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

    width:1.722rem;
    height:1.722rem;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #ebebeb;

    font-family: 'Regular', sans-serif;

    font-size:0.714rem;

    color: #777777;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/* ============================================================
   CTA HOVER
============================================================ */

.creative-validation-cta:hover,
.creative-validation-cta:focus-visible {
    transform:
        translateY(-2px);
}


.creative-validation-cta:hover::before,
.creative-validation-cta:focus-visible::before {
    opacity: 1;

    animation-play-state:
        running;
}


.creative-validation-cta:hover
.creative-validation-cta-inner,
.creative-validation-cta:focus-visible
.creative-validation-cta-inner {
    background: #ffffff;
}


.creative-validation-cta:hover
.creative-validation-cta-icon,
.creative-validation-cta:focus-visible
.creative-validation-cta-icon {
    background: #111111;

    color: #ffffff;

    transform:
        rotate(45deg);
}


.creative-validation-cta:hover
.creative-validation-cta-text {
    transform:
        translateX(0.15rem);
}


@keyframes creativeValidationCtaRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   LARGE
============================================================ */

@media (min-width: 1400px) {

    .creative-validation-title {
        font-size:4.2rem;
    }


    .creative-validation-card {
        min-height:15.12rem;
    }


    .creative-validation-contact-title {
        font-size:2.772rem;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1199.98px) {

    .creative-validation-title {
        font-size:3.192rem;
    }


    .creative-validation-contact {
        grid-template-columns: 1fr;

        gap:1.848rem;
    }


    .creative-validation-contact-actions {
        justify-content: flex-start;
    }

}


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

@media (max-width: 991.98px) {

    .creative-validation-content {
        padding:5.04rem
            0
            4.2rem;
    }


    .creative-validation-title {
        font-size:2.52rem;
    }


    .creative-validation-card {
        min-height:13.44rem;

        padding:1.26rem;
    }


    .creative-validation-card h3 {
        font-size:1.134rem;
    }


    .creative-validation-progress {
        right: 1.5rem;
        left: 1.5rem;
    }


    .creative-validation-contact-title {
        font-size:2.184rem;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .creative-validation-content {
        padding:4.2rem
            0
            3.36rem;
    }


    .creative-validation-title {
        font-size:1.848rem;

        line-height: 0.98;

        letter-spacing:-0.05rem;
    }


    .creative-validation-grid {
        grid-template-columns: 1fr;
    }


    .creative-validation-card {
        min-height:11.76rem;
    }


    .creative-validation-result {
        flex-direction: column;

        align-items: flex-start;

        gap:0.46rem;
    }


    .creative-validation-contact {
        gap:1.512rem;

        margin-top:2.52rem;

        padding:2.1rem
            0;
    }


    .creative-validation-contact-title {
        font-size:1.806rem;
    }


    .creative-validation-contact-actions {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }


    .creative-validation-cta {
        width: 100%;
    }


    .creative-validation-cta:first-child
    .creative-validation-cta-inner,
    .creative-validation-cta-whatsapp
    .creative-validation-cta-inner {
        width: 100%;

        min-width: 0;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .creative-validation-title {
        font-size:1.638rem;
    }


    .creative-validation-contact-title {
        font-size:1.596rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .creative-validation-card,
    .creative-validation-card-answer,
    .creative-validation-progress span,
    .creative-validation-result,
    .creative-validation-cta,
    .creative-validation-cta::before,
    .creative-validation-cta-inner,
    .creative-validation-cta-text,
    .creative-validation-cta-icon {
        animation: none !important;

        transition: none !important;
    }

}

/* ============================================================
   SECTION 05
   HACER QUE SUCEDA
============================================================ */

.creative-closing-section {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #0d0d0d;

    color: #ffffff;
}


/* ============================================================
   SUBTLE BACKGROUND
============================================================ */

.creative-closing-section::before {
    content: '';

    position: absolute;

    top: -25rem;
    right: -20rem;

    width:43.68rem;
    height:43.68rem;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.07) 0%,
            rgba(228, 50, 237, 0.025) 35%,
            rgba(0, 0, 0, 0) 70%
        );

    pointer-events: none;
}


/* ============================================================
   CONTENT
============================================================ */

.creative-closing-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding:5.46rem
        0
        3.36rem;
}


/* ============================================================
   HEADER
============================================================ */

.creative-closing-top {
    display: flex;

    align-items: center;

    width: 100%;

    margin-bottom:4.2rem;
}


.creative-closing-top-left {
    display: flex;

    align-items: center;

    gap:0.84rem;
}


.creative-closing-number,
.creative-closing-label {
    font-family:
        'Medium',
        sans-serif;

    font-size:0.554rem;

    line-height:
        1;

    letter-spacing:0.129rem;
}


.creative-closing-number {
    color:
        #ffffff;
}


.creative-closing-label {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.45);
}


/* ============================================================
   TOP LINE
============================================================ */

.creative-closing-top-line {
    position: relative;

    display: block;

    width: 3rem;
    height: 1px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.15);
}


.creative-closing-top-line::after {
    content: '';

    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 55%;

    background:
        linear-gradient(
            90deg,
            #7C3AED,
            #E432ED,
            #3DCAD4,
            #FBBF24
        );
}


/* ============================================================
   MAIN
============================================================ */

.creative-closing-main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(18rem, 0.6fr);

    align-items: end;

    gap:4.2rem;

    width: 100%;
}


/* ============================================================
   EYEBROW
============================================================ */

.creative-closing-eyebrow {
    margin:0
        0
        0.84rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.57rem;

    line-height:
        1;

    letter-spacing:0.129rem;

    color:
        rgba(255, 255, 255, 0.38);
}


/* ============================================================
   TITLE
============================================================ */

.creative-closing-title {
    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:4.536rem;

    font-weight:
        700;

    line-height:
        0.9;

    letter-spacing:-0.15rem;

    color:
        #ffffff;
}


.creative-closing-title strong {
    display: block;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        #FBBF24;
}


/* ============================================================
   SUPPORT
============================================================ */

.creative-closing-support {
    display: flex;

    align-items: flex-start;

    gap:0.756rem;

    padding-bottom:0.46rem;
}


.creative-closing-support-dot {
    display: block;

    width:0.442rem;
    height:0.442rem;

    flex: 0 0 auto;

    margin-top:0.322rem;

    border-radius:
        50%;

    background:
        #FBBF24;

    box-shadow:
        0
        0
        0
        0
        rgba(251, 191, 36, 0.3);

    animation:
        creativeClosingPulse
        2.8s
        ease-out
        infinite;
}


.creative-closing-support p {
    max-width:16.8rem;

    margin: 0;

    font-family:
        'Regular',
        sans-serif;

    font-size:0.773rem;

    line-height:
        1.55;

    color:
        rgba(255, 255, 255, 0.58);
}


/* ============================================================
   DOT ANIMATION
============================================================ */

@keyframes creativeClosingPulse {

    0% {
        box-shadow:
            0
            0
            0
            0
            rgba(251, 191, 36, 0.28);
    }

    70% {
        box-shadow:
            0
            0
            0
            0.75rem
            rgba(251, 191, 36, 0);
    }

    100% {
        box-shadow:
            0
            0
            0
            0
            rgba(251, 191, 36, 0);
    }

}


/* ============================================================
   DIVIDER
============================================================ */

.creative-closing-divider {
    position: relative;

    width: 100%;

    height: 1px;

    margin:4.2rem
        0;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.10);
}


.creative-closing-divider span {
    position: absolute;

    top: 0;
    left: -30%;

    width: 30%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(124, 58, 237, 0),
            #7C3AED,
            #E432ED,
            #3DCAD4,
            #FBBF24,
            rgba(251, 191, 36, 0)
        );

    animation:
        creativeClosingLine
        7s
        linear
        infinite;
}


@keyframes creativeClosingLine {

    from {
        left: -30%;
    }

    to {
        left: 100%;
    }

}


/* ============================================================
   FINAL
============================================================ */

.creative-closing-final {
    width: 100%;

    max-width:62.16rem;
}


.creative-closing-final-small {
    margin:0
        0
        0.924rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:0.534rem;

    line-height:
        1;

    letter-spacing:0.138rem;

    color:
        rgba(255, 255, 255, 0.32);
}


/* ============================================================
   FINAL TITLE
============================================================ */

.creative-closing-final-title {
    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:2.982rem;

    font-weight:
        700;

    line-height:
        0.98;

    letter-spacing:-0.08rem;

    color:
        rgba(255, 255, 255, 0.52);
}


.creative-closing-final-title span {
    color:
        #ffffff;
}


.creative-closing-final-title strong {
    display: block;

    margin-top:0.138rem;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        #ffffff;
}


/* ============================================================
   GRADIENT WORD ACCENT
============================================================ */

.creative-closing-final-title strong::after {
    content: '';

    display: inline-block;

    width:0.442rem;
    height:0.442rem;

    margin-left:0.588rem;

    border-radius:
        50%;

    vertical-align:
        middle;

    background:
        linear-gradient(
            135deg,
            #7C3AED,
            #E432ED,
            #3DCAD4,
            #FBBF24
        );
}


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

.creative-closing-bottom {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:0.756rem;

    width: 100%;

    margin-top:4.2rem;

    padding-top:1.344rem;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.creative-closing-bottom span:not(
    .creative-closing-bottom-dot
) {
    font-family:
        'Medium',
        sans-serif;

    font-size:0.46rem;

    line-height:
        1;

    letter-spacing:0.12rem;

    color:
        rgba(255, 255, 255, 0.30);
}


.creative-closing-bottom-dot {
    width:0.202rem;

    height:0.202rem;

    border-radius:
        50%;

    background:
        #FBBF24;

    opacity:
        0.7;
}


/* ============================================================
   LARGE
============================================================ */

@media (min-width: 1400px) {

    .creative-closing-title {
        font-size:5.04rem;
    }


    .creative-closing-final-title {
        font-size:3.276rem;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1199.98px) {

    .creative-closing-title {
        font-size:3.864rem;
    }


    .creative-closing-main {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(16rem, 0.8fr);

        gap:2.52rem;
    }


    .creative-closing-final-title {
        font-size:2.604rem;
    }

}


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

@media (max-width: 991.98px) {

    .creative-closing-content {
        padding:4.62rem
            0
            2.94rem;
    }


    .creative-closing-top {
        margin-bottom:2.94rem;
    }


    .creative-closing-main {
        grid-template-columns:
            1fr;

        gap:1.68rem;
    }


    .creative-closing-title {
        font-size:3.192rem;
    }


    .creative-closing-divider {
        margin:3.36rem
            0;
    }


    .creative-closing-final-title {
        font-size:2.268rem;
    }


    .creative-closing-bottom {
        margin-top:3.36rem;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .creative-closing-content {
        padding:4.2rem
            0
            2.52rem;
    }


    .creative-closing-top {
        margin-bottom:2.52rem;
    }


    .creative-closing-title {
        font-size:2.31rem;

        line-height:
            0.94;

        letter-spacing:-0.06rem;
    }


    .creative-closing-support p {
        font-size:0.689rem;
    }


    .creative-closing-divider {
        margin:2.94rem
            0;
    }


    .creative-closing-final-title {
        font-size:1.764rem;

        line-height:
            1;
    }


    .creative-closing-final-title strong::after {
        width:0.35rem;

        height:0.35rem;
    }


    .creative-closing-bottom {
        margin-top:2.94rem;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .creative-closing-title {
        font-size:1.974rem;
    }


    .creative-closing-final-title {
        font-size:1.554rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .creative-closing-support-dot,
    .creative-closing-divider span {
        animation:
            none !important;
    }

}

/* ============================================================
   ABOUT HERO
   Usa exclusivamente las variables de identidad del proyecto.
============================================================ */

.about-hero {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 42rem;

    overflow: hidden;

    background:
        var(--surface-main);

    color:
        var(--text-primary);
}


/* ============================================================
   BACKGROUND
============================================================ */

.about-hero-background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}


/* ============================================================
   GRID
   MISMO LENGUAJE DEL PROYECTO
============================================================ */

.about-hero-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(36, 36, 36, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(36, 36, 36, 0.035) 1px,
            transparent 1px
        );

    background-size:
        5rem 5rem;

    opacity:
        0.42;
}


/* ============================================================
   ELEMENTOS GRÁFICOS
============================================================ */

.about-hero-orbit,
.about-hero-blob,
.about-hero-cross,
.about-hero-dot {
    --about-parallax-y: 0px;

    pointer-events: none;

    will-change: transform;
}


/* ============================================================
   ORBIT GENERAL
============================================================ */

.about-hero-orbit {
    position: absolute;

    display: block;

    border-radius: 50%;
}


/* ============================================================
   ORBIT SUPERIOR IZQUIERDO
   PURPLE → CYAN
============================================================ */

.about-hero-orbit-one {
    width: 34rem;
    height: 34rem;

    top: -13rem;
    left: -12rem;

    padding: 1px;

    background:
        conic-gradient(
            from 180deg,

            transparent 0deg,

            var(--purple) 45deg,

            var(--cyan) 125deg,

            var(--purple) 220deg,

            transparent 310deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.58;

    transform:
        translate3d(
            0,
            var(--about-parallax-y),
            0
        );
}


/* ============================================================
   ORBIT INFERIOR DERECHO
   PURPLE → PINK → YELLOW
============================================================ */

.about-hero-orbit-two {
    width: 30rem;
    height: 30rem;

    right: -10rem;
    bottom: -11rem;

    padding: 1px;

    background:
        conic-gradient(
            from 225deg,

            transparent 0deg,

            var(--purple) 45deg,

            var(--pink) 110deg,

            var(--yellow) 190deg,

            var(--orange) 235deg,

            transparent 315deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.58;

    transform:
        translate3d(
            0,
            var(--about-parallax-y),
            0
        );
}


/* ============================================================
   FIGURA CENTRAL
   MUCHO MÁS SUTIL
============================================================ */

.about-hero-blob {
    position: absolute;

    width: 25rem;
    height: 25rem;

    top: 58%;
    left: 61%;

    padding: 1px;

    border-radius:
        50% 50% 45% 55%
        /
        44% 55% 45% 56%;

    background:
        conic-gradient(
            from 20deg,

            transparent 0deg,

            var(--pink) 65deg,

            var(--purple) 130deg,

            var(--cyan) 210deg,

            var(--yellow) 275deg,

            transparent 345deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.20;

    transform:
        translate3d(
            -50%,
            calc(
                -50% +
                var(--about-parallax-y)
            ),
            0
        )
        rotate(18deg);
}


/* ============================================================
   CROSSES
============================================================ */

.about-hero-cross {
    position: absolute;

    display: block;

    margin: 0;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.72rem;

    line-height:
        1;

    transform:
        translate3d(
            0,
            var(--about-parallax-y),
            0
        );
}


.about-hero-cross-one {
    left:
        12%;

    bottom:
        18%;

    color:
        var(--purple);

    opacity:
        0.45;
}


.about-hero-cross-two {
    right:
        14%;

    top:
        25%;

    color:
        var(--pink);

    opacity:
        0.45;
}


/* ============================================================
   DOTS
============================================================ */

.about-hero-dot {
    position: absolute;

    display: block;

    width:
        0.42rem;

    height:
        0.42rem;

    border-radius:
        50%;

    transform:
        translate3d(
            0,
            var(--about-parallax-y),
            0
        );
}


.about-hero-dot-one {
    left:
        20%;

    top:
        31%;

    background:
        var(--cyan);

    opacity:
        0.7;
}


.about-hero-dot-two {
    right:
        24%;

    bottom:
        15%;

    background:
        var(--yellow);

    opacity:
        0.8;
}


/* ============================================================
   BOOTSTRAP
============================================================ */

.about-hero .container-fluid,
.about-hero .row {
    position: relative;

    z-index: 2;

    height: 100%;
}


/* ============================================================
   INNER
   UN ÚNICO EJE VERTICAL
============================================================ */

.about-hero-inner {
    position: relative;

    display: flex;

    flex-direction: column;

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

    width: 100%;
    height: 100%;

    min-width: 0;

    padding:
        6.5rem
        0
        2.5rem;

    text-align: center;
}


/* ============================================================
   INDEX
   YA NO ES ABSOLUTO
============================================================ */

.about-hero-index {
    position: relative;

    top: auto;
    left: auto;

    display: flex;

    flex-shrink: 0;

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

    gap:
        0.75rem;

    width:
        100%;

    margin:
        0
        0
        5.5rem;

    padding:
        0;

    transform:
        none;

    color:
        var(--text-muted);
}


.about-hero-index span {
    margin: 0;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.58rem;

    font-weight:
        normal;

    line-height:
        1;

    letter-spacing:
        0.15rem;

    color:
        inherit;
}


.about-hero-index-line {
    display: block;

    width:
        2rem;

    height:
        1px;

    background:
        var(--gray-medium);
}


/* ============================================================
   CONTENT
============================================================ */

.about-hero-content {
    position: relative;

    display: flex;

    flex-direction: column;

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

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;

    transform:
        none;
}


/* ============================================================
   TITLE
============================================================ */

.about-hero-title {
    display: flex;

    flex-direction: column;

    align-items: center;

    width:
        100%;

    max-width:
        68rem;

    margin:
        0
        auto;

    padding:
        0;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        clamp(
            3rem,
            5vw,
            5.1rem
        );

    font-weight:
        700;

    line-height:
        0.94;

    letter-spacing:
        -0.14rem;

    text-align:
        center;

    color:
        var(--text-primary);
}


/* ============================================================
   TITLE LINES
============================================================ */

.about-hero-title-line {
    display: block;

    width:
        fit-content;

    max-width:
        100%;

    margin:
        0
        auto;

    padding:
        0;

    text-align:
        center;

    white-space:
        nowrap;
}


/* ============================================================
   PRIMERA LÍNEA
============================================================ */

.about-hero-title-line:first-child {
    font-family:
        'Bold',
        sans-serif;

    font-weight:
        700;

    color:
        var(--text-primary);
}


/* ============================================================
   SEGUNDA LÍNEA
   COLOR EXACTO DEL PROYECTO
============================================================ */

.about-hero-title-line:nth-child(2) {
    margin-top:
        0.4rem;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        var(--yellow);
}


/* ============================================================
   COPY
============================================================ */

.about-hero-copy {
    width:
        100%;

    max-width:
        30rem;

    margin:
        1.75rem
        auto
        0;

    padding:
        0;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        0.82rem;

    font-weight:
        normal;

    line-height:
        1.55;

    letter-spacing:
        0;

    text-align:
        center;

    color:
        var(--text-secondary);
}


/* ============================================================
   SCROLL
   YA NO ES ABSOLUTO
============================================================ */

.about-hero-scroll {
    position: relative;

    left: auto;
    bottom: auto;

    display: inline-flex;

    flex-direction: column;

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

    gap:
        0.55rem;

    width:
        fit-content;

    margin:
        4rem
        auto
        0;

    padding:
        0;

    transform:
        none;

    color:
        var(--text-primary);

    text-decoration:
        none;

    z-index:
        4;
}


/* ============================================================
   SCROLL LABEL
============================================================ */

.about-hero-scroll-label {
    margin: 0;

    padding: 0;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.55rem;

    font-weight:
        normal;

    line-height:
        1;

    letter-spacing:
        0.12rem;

    text-align:
        center;

    text-transform:
        uppercase;

    color:
        var(--text-muted);
}


/* ============================================================
   SCROLL LINE
============================================================ */

.about-hero-scroll-line {
    position: relative;

    display: block;

    width:
        1px;

    height:
        2.8rem;

    margin: 0;

    overflow:
        hidden;

    background:
        var(--gray-line);
}


/* ============================================================
   SCROLL PROGRESS
============================================================ */

.about-hero-scroll-progress {
    position: absolute;

    top:
        0;

    left:
        0;

    display:
        block;

    width:
        100%;

    height:
        0%;

    background:
        linear-gradient(
            180deg,

            var(--purple) 0%,

            var(--pink) 25%,

            var(--cyan) 50%,

            var(--yellow) 75%,

            var(--orange) 100%
        );

    transition:
        height
        0.08s
        linear;
}


/* ============================================================
   ARROW
============================================================ */

.about-hero-scroll-arrow {
    display: block;

    margin: 0;

    padding: 0;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        0.82rem;

    line-height:
        1;

    color:
        var(--text-primary);

    animation:
        aboutHeroArrow
        1.7s
        ease-in-out
        infinite;
}


/* ============================================================
   REVEAL
============================================================ */

[data-about-reveal] {
    opacity:
        0;

    transform:
        translateY(0.8rem);

    transition:
        opacity
        0.8s
        ease,

        transform
        0.8s
        ease;
}


[data-about-reveal].is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* ============================================================
   ARROW ANIMATION
============================================================ */

@keyframes aboutHeroArrow {

    0%,
    100% {

        transform:
            translateY(0);

    }


    50% {

        transform:
            translateY(0.3rem);

    }

}


/* ============================================================
   DESKTOP GRANDE
============================================================ */

@media (min-width: 1400px) {

    .about-hero-title {
        max-width:
            72rem;

        font-size:
            5.2rem;
    }


    .about-hero-index {
        margin-bottom:
            5.8rem;
    }


    .about-hero-scroll {
        margin-top:
            4.2rem;
    }


    .about-hero-orbit-one {
        width:
            38rem;

        height:
            38rem;
    }


    .about-hero-orbit-two {
        width:
            32rem;

        height:
            32rem;
    }

}


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

@media (max-width: 991.98px) {

    .about-hero-inner {
        padding:
            6rem
            0
            2rem;
    }


    .about-hero-index {
        margin-bottom:
            4rem;
    }


    .about-hero-title {
        max-width:
            48rem;

        font-size:
            clamp(
                2.7rem,
                7vw,
                4.2rem
            );

        letter-spacing:
            -0.1rem;
    }


    .about-hero-scroll {
        margin-top:
            3rem;
    }


    .about-hero-orbit-one {
        width:
            27rem;

        height:
            27rem;

        top:
            -9rem;

        left:
            -11rem;
    }


    .about-hero-orbit-two {
        width:
            23rem;

        height:
            23rem;

        right:
            -9rem;

        bottom:
            -7rem;
    }


    .about-hero-blob {
        width:
            19rem;

        height:
            19rem;

        left:
            65%;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .about-hero {
        min-height:
            42rem;
    }


    .about-hero-inner {
        padding:
            5.5rem
            0
            1.5rem;
    }


    .about-hero-index {
        margin-bottom:
            3rem;
    }


    .about-hero-index span {
        font-size:
            0.5rem;

        letter-spacing:
            0.1rem;
    }


    .about-hero-title {
        max-width:
            24rem;

        font-size:
            clamp(
                2.15rem,
                10vw,
                3.2rem
            );

        line-height:
            0.98;

        letter-spacing:
            -0.07rem;
    }


    .about-hero-title-line {
        white-space:
            normal;
    }


    .about-hero-copy {
        max-width:
            18rem;

        margin-top:
            1.25rem;

        font-size:
            0.72rem;
    }


    .about-hero-scroll {
        margin-top:
            2.8rem;
    }


    .about-hero-scroll-label {
        font-size:
            0.48rem;

        letter-spacing:
            0.08rem;
    }


    .about-hero-scroll-line {
        height:
            2.25rem;
    }


    .about-hero-grid {
        background-size:
            3rem 3rem;
    }


    .about-hero-orbit-one {
        width:
            20rem;

        height:
            20rem;

        top:
            -7rem;

        left:
            -13rem;
    }


    .about-hero-orbit-two {
        width:
            17rem;

        height:
            17rem;

        right:
            -10rem;

        bottom:
            -4rem;
    }


    .about-hero-blob {
        width:
            14rem;

        height:
            14rem;

        top:
            62%;

        left:
            68%;

        opacity:
            0.14;
    }


    .about-hero-cross-one {
        left:
            7%;

        bottom:
            23%;
    }


    .about-hero-cross-two {
        right:
            8%;

        top:
            25%;
    }


    .about-hero-dot-one {
        left:
            12%;

        top:
            31%;
    }


    .about-hero-dot-two {
        right:
            14%;

        bottom:
            18%;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    [data-about-reveal] {
        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }


    .about-hero-scroll-arrow {
        animation:
            none;
    }

}

/* ============================================================
   ABOUT / PILARES
   BUSINESS CARD PILE
============================================================ */

.pillar-pile {
    position: relative;

    width: 100%;
    height: 400vh;

    background:
        var(--surface-projects);
}


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

.pillar-pile-stage {
    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    display: flex;

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

    perspective:
        1400px;
}


/* ============================================================
   CARDS
============================================================ */

.pillar-card {
    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            68vw,
            67rem
        );

    aspect-ratio:
        1.75 / 1;

    overflow: hidden;

    border:
        0;

    outline:
        0;

    border-radius:
        0.35rem;

    transform-origin:
        center center;

    backface-visibility:
        hidden;

    will-change:
        transform;

    box-shadow:
        0 1.2rem 3.5rem
        rgba(8, 8, 8, 0.08);
}


/* ============================================================
   COLORES
============================================================ */

.pillar-card-01 {
    background:
        var(--purple);

    color:
        var(--white);
}


.pillar-card-02 {
    background:
        var(--yellow);

    color:
        var(--black);
}


.pillar-card-03 {
    background:
        var(--pink);

    color:
        var(--white);
}


.pillar-card-04 {
    background:
        var(--cyan);

    color:
        var(--black);
}


/* ============================================================
   CARD INNER
============================================================ */

.pillar-card-inner {
    position: relative;

    z-index: 3;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content:
        space-between;

    padding:
        2.3rem 3rem;
}


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

.pillar-card-top {
    display: flex;

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

    width: 100%;
}


/* ============================================================
   NUMBER / TYPE
============================================================ */

.pillar-card-number,
.pillar-card-type {
    font-family:
        'Bold',
        sans-serif;

    font-size:
        0.72rem;

    line-height:
        1;

    letter-spacing:
        0.13rem;

    text-transform:
        uppercase;
}


.pillar-card-01 .pillar-card-number,
.pillar-card-01 .pillar-card-type,
.pillar-card-03 .pillar-card-number,
.pillar-card-03 .pillar-card-type {
    color:
        rgba(255, 255, 255, 0.82);
}


.pillar-card-02 .pillar-card-number,
.pillar-card-02 .pillar-card-type,
.pillar-card-04 .pillar-card-number,
.pillar-card-04 .pillar-card-type {
    color:
        rgba(8, 8, 8, 0.70);
}


/* ============================================================
   INFORMATION
============================================================ */

.pillar-card-info {
    position: relative;

    z-index: 3;

    width:
        70%;

    margin-top:
        auto;

    margin-bottom:
        1.8rem;
}


/* ============================================================
   LABEL
============================================================ */

.pillar-card-label {
    display: block;

    margin-bottom:
        0.7rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.65rem;

    line-height:
        1;

    letter-spacing:
        0.15rem;

    text-transform:
        uppercase;

    opacity:
        0.70;
}


/* ============================================================
   TITLE
============================================================ */

.pillar-card-title {
    position: relative;

    z-index: 3;

    margin:
        0;

    font-family:
        'Black',
        sans-serif;

    font-size:
        clamp(
            3.3rem,
            5.4vw,
            6rem
        );

    font-weight:
        normal;

    line-height:
        0.88;

    letter-spacing:
        -0.18rem;

    text-transform:
        uppercase;

    color:
        inherit;
}


/* ============================================================
   TAGLINE
============================================================ */

.pillar-card-tagline {
    position: relative;

    z-index: 3;

    margin:
        0.85rem
        0
        0;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.98rem;

    line-height:
        1.35;

    color:
        inherit;

    opacity:
        0.90;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.pillar-card-description {
    position: relative;

    z-index: 3;

    width:
        100%;

    max-width:
        39rem;

    margin:
        0.8rem
        0
        0;

    font-family:
        'Regular',
        sans-serif;

    font-size:
1rem;

    font-weight:
        normal;

    line-height:
        1.5;

    color:
        inherit;

    opacity:
        0.80;
}


/* ============================================================
   FOOTER
============================================================ */

.pillar-card-footer {
    display: flex;

    align-items: center;

    gap:
        1.4rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.57rem;

    line-height:
        1;

    letter-spacing:
        0.11rem;

    text-transform:
        uppercase;

    opacity:
        0.60;
}


/* ============================================================
   GRAPHIC CONTAINER
============================================================ */

.pillar-card-graphics {
    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events:
        none;
}


/* ============================================================
   COMMON CIRCLE
============================================================ */

.pillar-card-circle {
    position: absolute;

    display:
        block;

    border-radius:
        50%;
}


/* ============================================================
   01 / CONTENIDO
============================================================ */

.pillar-content-frame {
    position: absolute;

    display:
        block;

    border:
        1px solid
        rgba(255, 255, 255, 0.35);
}


.pillar-content-frame-01 {
    width:
        11rem;

    height:
        15rem;

    right:
        12%;

    top:
        17%;

    transform:
        rotate(7deg);
}


.pillar-content-frame-02 {
    width:
        15rem;

    height:
        8.5rem;

    right:
        25%;

    top:
        30%;

    transform:
        rotate(-5deg);
}


.pillar-content-frame-03 {
    width:
        7rem;

    height:
        7rem;

    right:
        8%;

    bottom:
        10%;

    transform:
        rotate(12deg);
}


.pillar-content-play {
    position: absolute;

    top:
        21%;

    right:
        36%;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        1.5rem;

    color:
        rgba(255, 255, 255, 0.50);
}


.pillar-card-circle-01 {
    width:
        25rem;

    height:
        25rem;

    right:
        -13rem;

    top:
        -13rem;

    border:
        1px solid
        rgba(255, 255, 255, 0.30);
}


/* ============================================================
   02 / ESTRATEGIA
============================================================ */

.pillar-strategy-line {
    position: absolute;

    display:
        block;

    height:
        1px;

    transform-origin:
        left center;

    background:
        rgba(8, 8, 8, 0.24);
}


.pillar-strategy-line-01 {
    width:
        15rem;

    right:
        8%;

    top:
        31%;

    transform:
        rotate(20deg);
}


.pillar-strategy-line-02 {
    width:
        13rem;

    right:
        16%;

    top:
        52%;

    transform:
        rotate(-24deg);
}


.pillar-strategy-line-03 {
    width:
        11rem;

    right:
        6%;

    bottom:
        22%;

    transform:
        rotate(8deg);
}


.pillar-strategy-node {
    position: absolute;

    display:
        block;

    width:
        0.65rem;

    height:
        0.65rem;

    border-radius:
        50%;

    background:
        var(--black);

    opacity:
        0.46;
}


.pillar-strategy-node-01 {
    right:
        30%;

    top:
        25%;
}


.pillar-strategy-node-02 {
    right:
        10%;

    top:
        42%;
}


.pillar-strategy-node-03 {
    right:
        28%;

    bottom:
        24%;
}


.pillar-strategy-node-04 {
    right:
        8%;

    bottom:
        16%;
}


.pillar-card-circle-02 {
    width:
        21rem;

    height:
        21rem;

    right:
        -8rem;

    top:
        -8rem;

    border:
        1px solid
        rgba(8, 8, 8, 0.18);
}


/* ============================================================
   03 / EXPERIENCIA
============================================================ */

.pillar-experience-ring {
    position: absolute;

    display:
        block;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.30);
}


.pillar-experience-ring-01 {
    width:
        16rem;

    height:
        16rem;

    right:
        10%;

    top:
        12%;
}


.pillar-experience-ring-02 {
    width:
        9rem;

    height:
        9rem;

    right:
        27%;

    bottom:
        8%;
}


.pillar-experience-ring-03 {
    width:
        5rem;

    height:
        5rem;

    right:
        5%;

    bottom:
        14%;
}


.pillar-experience-word {
    position: absolute;

    display:
        block;

    font-family:
        'Black',
        sans-serif;

    line-height:
        1;

    color:
        rgba(255, 255, 255, 0.10);

    text-transform:
        uppercase;
}


.pillar-experience-word-01 {
    top:
        7%;

    right:
        16%;

    font-size:
        5rem;
}


.pillar-experience-word-02 {
    right:
        3%;

    bottom:
        2%;

    font-size:
        6rem;
}


/* ============================================================
   04 / CODING
============================================================ */

.pillar-code-module {
    position: absolute;

    display:
        block;

    border:
        1px solid
        rgba(8, 8, 8, 0.20);
}


.pillar-code-module-01 {
    width:
        19rem;

    height:
        10rem;

    top:
        16%;

    right:
        8%;
}


.pillar-code-module-02 {
    width:
        8rem;

    height:
        8rem;

    top:
        24%;

    right:
        28%;
}


.pillar-code-module-03 {
    width:
        14rem;

    height:
        6rem;

    right:
        17%;

    bottom:
        14%;
}


.pillar-code-module-04 {
    width:
        6rem;

    height:
        12rem;

    right:
        4%;

    bottom:
        10%;
}


.pillar-code-text {
    position: absolute;

    right:
        10%;

    top:
        36%;

    font-family:
        'Black',
        sans-serif;

    font-size:
        5.5rem;

    line-height:
        1;

    color:
        rgba(8, 8, 8, 0.10);
}


.pillar-card-circle-04 {
    width:
        24rem;

    height:
        24rem;

    left:
        -15rem;

    bottom:
        -15rem;

    border:
        1px solid
        rgba(8, 8, 8, 0.18);
}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1400px) {

    .pillar-card {
        width:
            min(
                68vw,
                70rem
            );
    }

}


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

@media (max-width: 991.98px) {

    .pillar-card {
        width:
            78vw;
    }


    .pillar-card-inner {
        padding:
            2rem
            2.2rem;
    }


    .pillar-card-info {
        width:
            74%;
    }


    .pillar-card-title {
        font-size:
            clamp(
                3rem,
                8vw,
                5.2rem
            );
    }


    .pillar-card-description {
        font-size:
            0.7rem;

        line-height:
            1.45;
    }


    .pillar-content-frame-01,
    .pillar-strategy-line,
    .pillar-experience-ring-01,
    .pillar-code-module-01 {
        opacity:
            0.65;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .pillar-pile {
        height:
            400vh;
    }


    .pillar-card {
        width:
            84vw;

        aspect-ratio:
            1.28 / 1;
    }


    .pillar-card-inner {
        padding:
            1.25rem
            1.4rem;
    }


    .pillar-card-number,
    .pillar-card-type {
        font-size:
            0.5rem;

        letter-spacing:
            0.07rem;
    }


    .pillar-card-info {
        width:
            88%;

        margin-bottom:
            1rem;
    }


    .pillar-card-label {
        margin-bottom:
            0.45rem;

        font-size:
            0.5rem;
    }


    .pillar-card-title {
        font-size:
            clamp(
                2.15rem,
                9vw,
                3.25rem
            );

        letter-spacing:
            -0.08rem;
    }


    .pillar-card-tagline {
        margin-top:
            0.55rem;

        font-size:
            0.72rem;
    }


    .pillar-card-description {
        max-width:
            100%;

        margin-top:
            0.55rem;

        font-size:
            0.56rem;

        line-height:
            1.4;
    }


    .pillar-card-footer {
        gap:
            0.65rem;

        font-size:
            0.39rem;

        letter-spacing:
            0.05rem;
    }


    .pillar-card-graphics {
        opacity:
            0.70;
    }

}


/* ============================================================
   MOBILE SMALL
============================================================ */

@media (max-width: 575.98px) {

    .pillar-card {
        width:
            88vw;

        aspect-ratio:
            1.15 / 1;
    }


    .pillar-card-inner {
        padding:
            1.1rem
            1.2rem;
    }


    .pillar-card-info {
        width:
            92%;
    }


    .pillar-card-description {
        font-size:
            0.53rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .pillar-card {
        will-change:
            auto;
    }

}

/* ============================================================
   BRANDS / PINTEREST MASONRY
============================================================ */

.brands-section {
    position: relative;

    width: 100%;

    padding:
        8rem 0;

    overflow: hidden;

    background:
        var(--surface-projects);

    color:
        var(--text-primary);
}


/* ============================================================
   HEADER
============================================================ */

.brands-header {
    position: relative;

    width: 100%;

    margin-bottom:
        6rem;
}


/* ============================================================
   INDEX
============================================================ */

.brands-index {
    display: flex;

    align-items: center;

    gap:
        0.8rem;

    margin-bottom:
        3rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.7rem;

    line-height:
        1;

    letter-spacing:
        0.12rem;

    color:
        var(--text-muted);

    text-transform:
        uppercase;
}


.brands-index-line {
    display: block;

    width:
        2.5rem;

    height:
        0.0625rem;

    background:
        var(--gray-medium);
}


/* ============================================================
   HEADING
============================================================ */

.brands-heading {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        4rem;

    width: 100%;
}


.brands-title {
    width:
        42rem;

    margin:
        0;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        4.5rem;

    font-weight:
        normal;

    line-height:
        0.92;

    letter-spacing:
        -0.18rem;

    color:
        var(--text-primary);

    text-transform:
        uppercase;
}


.brands-title span {
    display: block;

    font-family:
        'Black',
        sans-serif;

    color:
        var(--yellow);
}


.brands-intro {
    width:
        22rem;

    margin:
        0 0 0.4rem;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        0.85rem;

    line-height:
        1.6;

    color:
        var(--text-secondary);
}


/* ============================================================
   MASONRY
============================================================ */

.brands-masonry {
    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    grid-auto-rows:
        0.25rem;

    grid-auto-flow:
        row;

    column-gap:
        1.25rem;

    row-gap:
        1.25rem;

    align-items:
        start;
}


/* ============================================================
   BRAND ITEM
============================================================ */

.brand-item {
    --brand-accent:
        var(--purple);

    position: relative;

    width: 100%;

    margin:
        0;

    padding:
        1.5rem;

    overflow:
        hidden;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    align-self:
        start;

    background:
        var(--white);

    border:
        0.0625rem solid
        rgba(8, 8, 8, 0.025);

    border-radius:
        0.3rem;

    box-shadow:
        0 0.4rem 1.5rem
        rgba(8, 8, 8, 0.05);

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        opacity 0.35s ease;

    cursor:
        default;
}


/* ============================================================
   HEIGHTS
============================================================ */

.brand-item-small {
    min-height:
        11rem;
}


.brand-item-medium {
    min-height:
        15rem;
}


.brand-item-large {
    min-height:
        19rem;
}


/* ============================================================
   VIDEO
============================================================ */

.brand-item-video {
    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    background:
        var(--black);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity 0.45s
        cubic-bezier(.22, 1, .36, 1);
}


/*
 * El video NO tiene proporción propia dentro del layout.
 * Toma exactamente el tamaño de .brand-item.
 */

.brand-item-video video {
    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.04);

    transition:
        transform 1.2s
        cubic-bezier(.22, 1, .36, 1);
}


/* Sutil capa para mantener legibles número y flecha */

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

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.02) 45%,
            rgba(0, 0, 0, 0.18) 100%
        );

    pointer-events:
        none;
}


/* VIDEO VISIBLE */

.brand-item:hover
.brand-item-video,

.brand-item.is-active
.brand-item-video {
    opacity:
        1;
}


.brand-item:hover
.brand-item-video video,

.brand-item.is-active
.brand-item-video video {
    transform:
        scale(1);
}


/* ============================================================
   LOGO WRAPPER
============================================================ */

.brand-item-logo {
    position:
        relative;

    z-index:
        2;

    width:
        72%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    opacity:
        1;

    transform:
        scale(1);

    transition:
        opacity 0.3s ease,
        transform 0.4s
        cubic-bezier(.22, 1, .36, 1);
}


/* ============================================================
   LOGO IMAGE
============================================================ */

.brand-item-logo img {
    display:
        block;

    width:
        100%;

    max-width:
        11rem;

    max-height:
        5.5rem;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        grayscale(1)
        brightness(0);

    opacity:
        0.68;

    transform:
        scale(1);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


/*
 * Cuando aparece el video,
 * desaparece el logo.
 */

.brand-item:hover
.brand-item-logo,

.brand-item.is-active
.brand-item-logo {
    opacity:
        0;

    transform:
        scale(0.96);
}


/* ============================================================
   NUMBER
============================================================ */

.brand-item-meta {
    position:
        absolute;

    z-index:
        4;

    top:
        1.1rem;

    right:
        1.1rem;

    opacity:
        0;

    transform:
        translateY(0.35rem);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.brand-item-number {
    display:
        block;

    width:
        auto;

    white-space:
        nowrap;

    writing-mode:
        horizontal-tb;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.55rem;

    line-height:
        1;

    letter-spacing:
        0.08rem;

    color:
        var(--gray-medium);

    transition:
        color 0.3s ease;
}


/* ============================================================
   DOT
============================================================ */

.brand-item-dot {
    position:
        absolute;

    z-index:
        4;

    left:
        1.1rem;

    bottom:
        1.1rem;

    width:
        0.4rem;

    height:
        0.4rem;

    border-radius:
        50%;

    background:
        var(--brand-accent);

    opacity:
        0;

    transform:
        scale(0);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* ============================================================
   ARROW
============================================================ */

.brand-item-arrow {
    position:
        absolute;

    z-index:
        4;

    right:
        1.1rem;

    bottom:
        0.95rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        1rem;

    line-height:
        1;

    color:
        var(--text-primary);

    opacity:
        0;

    transform:
        translate(
            -0.3rem,
            0.3rem
        );

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        color 0.3s ease;
}


/* ============================================================
   ACCENT
============================================================ */

.brand-item-accent {
    position:
        absolute;

    z-index:
        5;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        0.15rem;

    background:
        var(--brand-accent);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 0.4s ease;
}


/* ============================================================
   HOVER / ACTIVE
============================================================ */

.brand-item:hover,
.brand-item.is-active {
    transform:
        translateY(-0.35rem);

    box-shadow:
        0 1rem 2.5rem
        rgba(8, 8, 8, 0.1);
}


.brand-item:hover
.brand-item-meta,

.brand-item.is-active
.brand-item-meta {
    opacity:
        1;

    transform:
        translateY(0);
}


.brand-item:hover
.brand-item-dot,

.brand-item.is-active
.brand-item-dot {
    opacity:
        1;

    transform:
        scale(1);
}


.brand-item:hover
.brand-item-arrow,

.brand-item.is-active
.brand-item-arrow {
    opacity:
        1;

    transform:
        translate(0, 0);
}


.brand-item:hover
.brand-item-accent,

.brand-item.is-active
.brand-item-accent {
    transform:
        scaleX(1);
}


/*
 * Elementos editoriales blancos sobre el video.
 */

.brand-item:hover
.brand-item-number,

.brand-item.is-active
.brand-item-number,

.brand-item:hover
.brand-item-arrow,

.brand-item.is-active
.brand-item-arrow {
    color:
        var(--white);
}


/* ============================================================
   DIM OTHER LOGOS
============================================================ */

.brands-masonry.has-active-brand
.brand-item:not(.is-active)
.brand-item-logo img {
    opacity:
        0.25;
}


.brands-masonry.has-active-brand
.brand-item.is-active
.brand-item-logo img {
    opacity:
        1;
}


/* ============================================================
   VIDEO POSITION PER BRAND

   Aquí puedes corregir el encuadre de cada video sin tocar
   su tamaño.
============================================================ */

.brand-item[data-brand-card="gusano-rojo"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="la-lupita"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="dare2"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="tp-link"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="kartell"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="coindissa"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="converfin"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="daclaf"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="frel"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="pchteca"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="mercusys"]
.brand-item-video video {
    object-position:
        50% 50%;
}


.brand-item[data-brand-card="omada"]
.brand-item-video video {
    object-position:
        50% 50%;
}


/* ============================================================
   EDITORIAL ITEMS
============================================================ */

.brand-editorial {
    position:
        relative;

    width:
        100%;

    min-height:
        19rem;

    margin:
        0;

    padding:
        1.6rem;

    overflow:
        hidden;

    display:
        inline-flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    align-self:
        start;

    border-radius:
        0.3rem;

    box-shadow:
        0 0.4rem 1.5rem
        rgba(8, 8, 8, 0.05);

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity 0.55s ease,
        transform 0.55s ease,
        box-shadow 0.35s ease;
}


.brand-editorial:hover {
    transform:
        translateY(-0.35rem);

    box-shadow:
        0 1rem 2.5rem
        rgba(8, 8, 8, 0.1);
}


/* ============================================================
   EDITORIAL DARK
============================================================ */

.brand-editorial-dark {
    background:
        var(--black);

    color:
        var(--white);
}


/* ============================================================
   EDITORIAL YELLOW
============================================================ */

.brand-editorial-yellow {
    background:
        var(--yellow);

    color:
        var(--black);
}


/* ============================================================
   EDITORIAL INDEX
============================================================ */

.brand-editorial-index {
    position:
        relative;

    z-index:
        2;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.55rem;

    line-height:
        1;

    letter-spacing:
        0.1rem;

    text-transform:
        uppercase;

    opacity:
        0.65;
}


/* ============================================================
   EDITORIAL COPY
============================================================ */

.brand-editorial-copy {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        2.3rem;

    line-height:
        0.92;

    letter-spacing:
        -0.07rem;

    text-transform:
        uppercase;
}


.brand-editorial-copy span,
.brand-editorial-copy strong {
    display:
        block;
}


.brand-editorial-copy strong {
    font-family:
        'Black',
        sans-serif;

    font-weight:
        normal;
}


/* ============================================================
   EDITORIAL SYMBOL
============================================================ */

.brand-editorial-symbol {
    position:
        absolute;

    z-index:
        1;

    right:
        1.2rem;

    bottom:
        0.7rem;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        4rem;

    line-height:
        1;

    opacity:
        0.18;
}


/* ============================================================
   JS REVEAL
============================================================ */

.brands-masonry.brands-ready
.brand-item:not(.is-visible),

.brands-masonry.brands-ready
.brand-editorial:not(.is-visible) {
    opacity:
        0;

    transform:
        translateY(1.5rem);
}


.brands-masonry.brands-ready
.brand-item.is-visible,

.brands-masonry.brands-ready
.brand-editorial.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* ============================================================
   HOVER PRIORITY
============================================================ */

.brands-masonry.brands-ready
.brand-item.is-visible:hover,

.brands-masonry.brands-ready
.brand-item.is-visible.is-active {
    transform:
        translateY(-0.35rem);
}


.brands-masonry.brands-ready
.brand-editorial.is-visible:hover {
    transform:
        translateY(-0.35rem);
}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 74rem) {

    .brands-masonry {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .brands-heading {
        gap:
            3rem;
    }


    .brands-title {
        width:
            35rem;

        font-size:
            3.8rem;
    }


    .brands-intro {
        width:
            19rem;
    }

}


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

@media (max-width: 60rem) {

    .brands-section {
        padding:
            6rem 0;
    }


    .brands-header {
        margin-bottom:
            4rem;
    }


    .brands-heading {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            2rem;
    }


    .brands-title {
        width:
            100%;

        font-size:
            3.4rem;
    }


    .brands-intro {
        width:
            28rem;

        max-width:
            100%;
    }


    .brands-masonry {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 48rem) {

    .brands-section {
        padding:
            5rem 0;
    }


    .brands-index {
        margin-bottom:
            2rem;
    }


    .brands-header {
        margin-bottom:
            3rem;
    }


    .brands-title {
        font-size:
            2.6rem;

        line-height:
            0.95;

        letter-spacing:
            -0.08rem;
    }


    .brands-intro {
        width:
            100%;

        font-size:
            0.78rem;
    }


    .brands-masonry {
        column-gap:
            0.8rem;

        row-gap:
            0.8rem;
    }


    .brand-item {
        padding:
            1rem;
    }


    .brand-item-small {
        min-height:
            8rem;
    }


    .brand-item-medium {
        min-height:
            10rem;
    }


    .brand-item-large {
        min-height:
            13rem;
    }


    .brand-item-logo {
        width:
            78%;
    }


    .brand-item-logo img {
        max-width:
            7rem;

        max-height:
            3.5rem;

        opacity:
            0.82;
    }


    .brand-editorial {
        min-height:
            13rem;

        padding:
            1.1rem;
    }


    .brand-editorial-copy {
        font-size:
            1.5rem;

        letter-spacing:
            -0.04rem;
    }


    .brand-editorial-symbol {
        font-size:
            2.8rem;
    }


    .brand-item-meta,
    .brand-item-arrow {
        display:
            none;
    }


    .brand-item-dot {
        left:
            0.8rem;

        bottom:
            0.8rem;

        opacity:
            1;

        transform:
            scale(1);
    }

}


/* ============================================================
   MOBILE SMALL
============================================================ */

@media (max-width: 34rem) {

    .brands-title {
        font-size:
            2.2rem;
    }


    .brands-masonry {
        grid-template-columns:
            1fr;
    }


    .brand-item-small {
        min-height:
            9rem;
    }


    .brand-item-medium {
        min-height:
            11rem;
    }


    .brand-item-large {
        min-height:
            14rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .brand-item,
    .brand-editorial,
    .brand-item-logo,
    .brand-item-logo img,
    .brand-item-meta,
    .brand-item-dot,
    .brand-item-arrow,
    .brand-item-accent,
    .brand-item-video,
    .brand-item-video video {
        transition:
            none;
    }


    /*
     * Si el usuario pide reducir movimiento,
     * conservamos las cards normales sin video animado.
     */

    .brand-item-video {
        display:
            none;
    }


    .brand-item:hover
    .brand-item-logo,

    .brand-item.is-active
    .brand-item-logo {
        opacity:
            1;

        transform:
            none;
    }


    .brands-masonry.brands-ready
    .brand-item,

    .brands-masonry.brands-ready
    .brand-editorial {
        opacity:
            1;

        transform:
            none;
    }

}

/* ============================================================
   CONTACT / EDITORIAL
============================================================ */

.contact-editorial {
    position: relative;

    width: 100%;

    padding:
        7rem 0 8rem;

    overflow: hidden;

    background:
        var(--surface-main);

    color:
        var(--text-primary);
}


/* ============================================================
   TOP META
============================================================ */

.contact-editorial-meta {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 4rem;

    width: 100%;

    margin-bottom: 3rem;
}


.contact-editorial-index {
    display: flex;

    align-items: center;

    gap: 0.8rem;

    font-family:
        'Medium',
        sans-serif;

    font-size: 0.7rem;

    line-height: 1;

    letter-spacing: 0.12rem;

    color:
        var(--text-muted);

    text-transform:
        uppercase;
}


.contact-editorial-index-line {
    display: block;

    width: 2.5rem;

    height: 0.0625rem;

    background:
        var(--gray-medium);
}


.contact-editorial-meta-copy {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    width: 16rem;

    padding-left: 1.5rem;

    border-left:
        0.0625rem solid
        var(--gray-line);

    font-family:
        'Medium',
        sans-serif;

    font-size: 0.72rem;

    line-height: 1.5;

    letter-spacing: 0.04rem;

    color:
        var(--text-secondary);
}


/* ============================================================
   TITLE
============================================================ */

.contact-editorial-header {
    position: relative;

    width: 100%;

    margin-bottom: 2.5rem;
}


.contact-editorial-title {
    position: relative;

    z-index: 5;

    margin: 0;

    font-family:
        'Black',
        sans-serif;

    font-size: 7.6rem;

    font-weight: normal;

    line-height: 0.82;

    letter-spacing: -0.35rem;

    color:
        var(--text-primary);

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


.contact-editorial-title span {
    color:
        var(--yellow);
}


/* ============================================================
   MAIN GRID
============================================================ */

.contact-editorial-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        1.35fr 0.85fr;

    gap: 4rem;

    align-items: stretch;

    width: 100%;
}


/* ============================================================
   VISUAL
============================================================ */

.contact-editorial-visual {
    position: relative;

    min-height: 25rem;

    overflow: hidden;

    background:
        var(--black);
}
.contact-editorial-visual img{
    width: 100%;
    height: auto;
}


/* ============================================================
   LOGO
============================================================ */

.contact-editorial-logo {
    position: absolute;

    z-index: 5;

    top: 50%;

    left: 50%;

    width: 18rem;

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


.contact-editorial-logo img {
    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;
}


/* ============================================================
   VISUAL META
============================================================ */

.contact-editorial-visual-meta {
    position: absolute;

    z-index: 6;

    left: 1.5rem;

    bottom: 1.5rem;

    display: flex;

    justify-content: space-between;

    width:
        calc(100% - 3rem);

    font-family:
        'Medium',
        sans-serif;

    font-size: 0.55rem;

    line-height: 1;

    letter-spacing: 0.1rem;

    color:
        rgba(255, 255, 255, 0.55);

    text-transform:
        uppercase;
}


/* ============================================================
   SHAPES
============================================================ */

.contact-editorial-shape {
    position: absolute;

    pointer-events: none;
}


/* ============================================================
   CIRCLES
============================================================ */

.contact-editorial-shape-circle {
    border-radius: 50%;

    border-style: solid;

    border-width: 0.12rem;
}


.contact-editorial-shape-circle-one {
    width: 20rem;

    height: 20rem;

    top: -6rem;

    right: -5rem;

    border-color:
        var(--purple);
}


.contact-editorial-shape-circle-two {
    width: 13rem;

    height: 13rem;

    left: -4rem;

    bottom: -4rem;

    border-color:
        var(--pink);
}


/* ============================================================
   LINES
============================================================ */

.contact-editorial-shape-line {
    height: 0.12rem;

    transform-origin:
        left center;
}


.contact-editorial-shape-line-one {
    width: 17rem;

    top: 9rem;

    right: -2rem;

    background:
        var(--yellow);

    transform:
        rotate(-42deg);
}


.contact-editorial-shape-line-two {
    width: 12rem;

    left: 4rem;

    bottom: 8rem;

    background:
        var(--cyan);

    transform:
        rotate(18deg);
}


/* ============================================================
   SQUARE
============================================================ */

.contact-editorial-shape-square {
    width: 8rem;

    height: 8rem;

    right: 2.5rem;

    bottom: 2rem;

    border:
        0.12rem solid
        var(--yellow);

    opacity: 0.8;

    transform:
        rotate(12deg);
}


/* ============================================================
   CROSS
============================================================ */

.contact-editorial-shape-cross {
    top: 4rem;

    left: 3rem;

    font-family:
        'Regular',
        sans-serif;

    font-size: 4rem;

    line-height: 1;

    color:
        var(--green);

    opacity: 0.8;
}


/* ============================================================
   INFORMATION
============================================================ */

.contact-editorial-info {
    display: flex;

    flex-direction: column;

    width: 100%;
}


/* ============================================================
   INTRO
============================================================ */

.contact-editorial-intro {
    padding:
        0 0 2rem;

    border-bottom:
        0.0625rem solid
        var(--gray-line);
}


.contact-editorial-label {
    display: block;

    margin-bottom: 1rem;

    font-family:
        'Bold',
        sans-serif;

    font-size: 1.1rem;

    line-height: 1;

    letter-spacing: 0.05rem;

    color:
        var(--text-primary);

    text-transform:
        uppercase;
}


.contact-editorial-intro p {
    width: 19rem;

    max-width: 100%;

    margin: 0;

    font-family:
        'Regular',
        sans-serif;

    font-size: 0.85rem;

    line-height: 1.6;

    color:
        var(--text-secondary);
}


/* ============================================================
   CONTACT ROW
============================================================ */

.contact-editorial-row {
    position: relative;

    display: grid;

    grid-template-columns:
        4.5rem 1fr 2rem;

    gap: 1rem;

    align-items: center;

    min-height: 8.5rem;

    padding:
        1.4rem 0;

    overflow: hidden;

    border-bottom:
        0.0625rem solid
        var(--gray-line);

    color:
        var(--text-primary);

    text-decoration: none;

    transition:
        padding-left 0.35s ease,
        color 0.35s ease;
}


/* ============================================================
   CONTACT NUMBER
============================================================ */

.contact-editorial-number {
    font-family:
        'Black',
        sans-serif;

    font-size: 2.8rem;

    line-height: 1;

    letter-spacing: -0.1rem;

    color:
        var(--text-primary);

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* ============================================================
   ROW CONTENT
============================================================ */

.contact-editorial-row-content {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 0.35rem;
}


.contact-editorial-row-title {
    font-family:
        'Bold',
        sans-serif;

    font-size: 0.78rem;

    line-height: 1;

    letter-spacing: 0.05rem;

    text-transform: uppercase;
}


.contact-editorial-row-text {
    font-family:
        'Regular',
        sans-serif;

    font-size: 0.78rem;

    line-height: 1.4;

    color:
        var(--text-secondary);
}


/* ============================================================
   ARROW
============================================================ */

.contact-editorial-arrow {
    position: relative;

    z-index: 2;

    justify-self: end;

    font-family:
        'Regular',
        sans-serif;

    font-size: 1.4rem;

    line-height: 1;

    transform:
        translate(0, 0);

    transition:
        transform 0.35s ease;
}


/* ============================================================
   ROW ACCENT
============================================================ */

.contact-editorial-row-accent {
    position: absolute;

    z-index: 1;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 0.12rem;

    background:
        var(--yellow);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 0.4s ease;
}


/* ============================================================
   ROW HOVER
============================================================ */

.contact-editorial-row:hover {
    padding-left: 0.5rem;
}


.contact-editorial-row:nth-of-type(2):hover
.contact-editorial-number {
    color:
        var(--purple);
}


.contact-editorial-row:nth-of-type(3):hover
.contact-editorial-number {
    color:
        var(--pink);
}


.contact-editorial-row:nth-of-type(4):hover
.contact-editorial-number {
    color:
        var(--cyan);
}


.contact-editorial-row:hover
.contact-editorial-arrow {
    transform:
        translate(0.3rem, -0.3rem);
}


.contact-editorial-row:hover
.contact-editorial-row-accent {
    transform:
        scaleX(1);
}


/* ============================================================
   LOWER EDITORIAL STRIP
============================================================ */

.contact-editorial-bottom {
    display: grid;

    grid-template-columns:
        1fr 1fr 2fr;

    gap: 3rem;

    width: 100%;

    margin-top: 5rem;

    padding-top: 2rem;

    border-top:
        0.0625rem solid
        var(--gray-line);
}


.contact-editorial-bottom-block {
    display: flex;

    flex-direction: column;

    gap: 0.3rem;

    font-family:
        'Medium',
        sans-serif;

    font-size: 0.55rem;

    line-height: 1.4;

    letter-spacing: 0.06rem;

    color:
        var(--text-secondary);

    text-transform:
        uppercase;
}


.contact-editorial-bottom-label {
    margin-bottom: 0.7rem;

    color:
        var(--text-primary);
}


/* ============================================================
   BOTTOM MESSAGE
============================================================ */

.contact-editorial-bottom-message {
    justify-self: end;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    font-family:
        'Bold',
        sans-serif;

    font-size: 2rem;

    line-height: 0.9;

    letter-spacing: -0.05rem;

    text-transform: uppercase;
}


.contact-editorial-bottom-message strong {
    font-family:
        'Black',
        sans-serif;

    font-weight: normal;

    color:
        var(--yellow);
}


/* ============================================================
   LOCATION
============================================================ */

.contact-editorial-location {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: end;

    min-height: 22rem;

    margin-top: 7rem;

    padding:
        3rem;

    overflow: hidden;

    background:
        var(--black);

    color:
        var(--white);
}


/* ============================================================
   LOCATION NUMBER
============================================================ */

.contact-editorial-location-number {
    position: relative;

    z-index: 3;

    align-self: start;

    font-family:
        'Black',
        sans-serif;

    font-size: 6rem;

    line-height: 0.85;

    letter-spacing: -0.25rem;
}


/* ============================================================
   LOCATION COPY
============================================================ */

.contact-editorial-location-copy {
    position: relative;

    z-index: 3;

    justify-self: end;

    width: 16rem;
}


.contact-editorial-location-copy span {
    display: block;

    margin-bottom: 1rem;

    font-family:
        'Bold',
        sans-serif;

    font-size: 0.8rem;

    letter-spacing: 0.08rem;

    text-transform: uppercase;
}


.contact-editorial-location-copy p {
    margin: 0;

    font-family:
        'Regular',
        sans-serif;

    font-size: 1rem;

    line-height: 1.45;

    color:
        rgba(255, 255, 255, 0.7);
}


/* ============================================================
   LOCATION GRAPHICS
============================================================ */

.contact-editorial-location-circle {
    position: absolute;

    width: 18rem;

    height: 18rem;

    right: -5rem;

    top: -5rem;

    border:
        0.12rem solid
        var(--purple);

    border-radius: 50%;
}


.contact-editorial-location-line {
    position: absolute;

    width: 30rem;

    height: 0.12rem;

    left: 35%;

    top: 50%;

    background:
        var(--yellow);

    transform:
        rotate(-25deg);
}


/* ============================================================
   REVEAL INITIAL
============================================================ */

.contact-editorial-title,
.contact-editorial-visual,
.contact-editorial-info,
.contact-editorial-bottom,
.contact-editorial-location {
    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   JS ENABLED
============================================================ */

.contact-editorial.contact-ready
.contact-editorial-title,

.contact-editorial.contact-ready
.contact-editorial-visual,

.contact-editorial.contact-ready
.contact-editorial-info,

.contact-editorial.contact-ready
.contact-editorial-bottom,

.contact-editorial.contact-ready
.contact-editorial-location {
    opacity: 0;

    transform:
        translateY(1.5rem);
}


/* ============================================================
   JS VISIBLE
============================================================ */

.contact-editorial.contact-ready
.contact-editorial-title.is-visible,

.contact-editorial.contact-ready
.contact-editorial-visual.is-visible,

.contact-editorial.contact-ready
.contact-editorial-info.is-visible,

.contact-editorial.contact-ready
.contact-editorial-bottom.is-visible,

.contact-editorial.contact-ready
.contact-editorial-location.is-visible {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 74rem) {

    .contact-editorial-title {
        font-size: 6.2rem;

        letter-spacing: -0.27rem;
    }


    .contact-editorial-grid {
        gap: 3rem;
    }


    .contact-editorial-logo {
        width: 15rem;
    }

}


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

@media (max-width: 60rem) {

    .contact-editorial {
        padding:
            6rem 0;
    }


    .contact-editorial-title {
        font-size: 5rem;

        letter-spacing: -0.2rem;
    }


    .contact-editorial-grid {
        grid-template-columns:
            1fr;
    }


    .contact-editorial-visual {
        min-height: 30rem;
    }


    .contact-editorial-info {
        margin-top: 1rem;
    }


    .contact-editorial-bottom {
        grid-template-columns:
            1fr 1fr;
    }


    .contact-editorial-bottom-message {
        grid-column:
            1 / -1;

        justify-self: start;

        align-items: flex-start;

        margin-top: 1rem;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 48rem) {

    .contact-editorial {
        padding:
            5rem 0;
    }


    .contact-editorial-meta {
        flex-direction: column;

        gap: 1.5rem;
    }


    .contact-editorial-meta-copy {
        width: 100%;
    }


    .contact-editorial-title {
        font-size: 3.6rem;

        line-height: 0.9;

        letter-spacing: -0.14rem;

        white-space: normal;
    }


    .contact-editorial-grid {
        gap: 2rem;
    }


    .contact-editorial-visual {
        min-height: 24rem;
    }


    .contact-editorial-logo {
        width: 11rem;
    }


    .contact-editorial-shape-circle-one {
        width: 14rem;

        height: 14rem;
    }


    .contact-editorial-shape-circle-two {
        width: 9rem;

        height: 9rem;
    }


    .contact-editorial-row {
        grid-template-columns:
            3.5rem 1fr 1.5rem;

        min-height: 7rem;
    }


    .contact-editorial-number {
        font-size: 2.2rem;
    }


    .contact-editorial-bottom {
        grid-template-columns:
            1fr;

        gap: 2rem;
    }


    .contact-editorial-bottom-message {
        grid-column:
            auto;

        font-size: 1.7rem;
    }


    .contact-editorial-location {
        grid-template-columns:
            1fr;

        gap: 4rem;

        min-height: 26rem;

        padding: 2rem;
    }


    .contact-editorial-location-number {
        font-size: 4.5rem;
    }


    .contact-editorial-location-copy {
        justify-self: start;

        width: 100%;
    }

}


/* ============================================================
   MOBILE SMALL
============================================================ */

@media (max-width: 34rem) {

    .contact-editorial-title {
        font-size: 3rem;

        letter-spacing: -0.1rem;
    }


    .contact-editorial-visual {
        min-height: 20rem;
    }


    .contact-editorial-logo {
        width: 9rem;
    }


    .contact-editorial-row {
        grid-template-columns:
            3rem 1fr;

        gap: 0.8rem;
    }


    .contact-editorial-arrow {
        display: none;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .contact-editorial-title,
    .contact-editorial-visual,
    .contact-editorial-info,
    .contact-editorial-bottom,
    .contact-editorial-location,
    .contact-editorial-row,
    .contact-editorial-number,
    .contact-editorial-arrow,
    .contact-editorial-row-accent {
        transition: none;
    }


    .contact-editorial.contact-ready
    .contact-editorial-title,

    .contact-editorial.contact-ready
    .contact-editorial-visual,

    .contact-editorial.contact-ready
    .contact-editorial-info,

    .contact-editorial.contact-ready
    .contact-editorial-bottom,

    .contact-editorial.contact-ready
    .contact-editorial-location {
        opacity: 1;

        transform: none;
    }

}

/* ============================================================
   CONTACT / LOCATION
============================================================ */

.contact-location {
    position: relative;

    width: 100%;

    height:
        34rem;

    margin-top:
        7rem;

    overflow: hidden;

    background:
        var(--gray-light);
}


/* ============================================================
   GOOGLE MAP
============================================================ */

.contact-location-map {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;
}


.contact-location-map iframe {
    display: block;

    width: 100%;

    height: 100%;

    border: 0;
}


/* ============================================================
   INFO CARD
============================================================ */

.contact-location-info {
    position: absolute;

    z-index: 5;

    left:
        2rem;

    bottom:
        2rem;

    width:
        20rem;

    padding:
        1.8rem;

    background:
        var(--white);

    box-shadow:
        0 1rem 3rem
        rgba(8, 8, 8, 0.14);
}


/* ============================================================
   INDEX
============================================================ */

.contact-location-index {
    display: block;

    margin-bottom:
        2.2rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.58rem;

    line-height:
        1;

    letter-spacing:
        0.1rem;

    color:
        var(--text-muted);

    text-transform:
        uppercase;
}


/* ============================================================
   TITLE
============================================================ */

.contact-location-title {
    margin:
        0 0 1rem;

    font-family:
        'Black',
        sans-serif;

    font-size:
        2.2rem;

    font-weight:
        normal;

    line-height:
        0.95;

    letter-spacing:
        -0.07rem;

    color:
        var(--text-primary);

    text-transform:
        uppercase;
}


/* ============================================================
   ADDRESS
============================================================ */

.contact-location-address {
    margin:
        0 0 2rem;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        0.78rem;

    line-height:
        1.6;

    color:
        var(--text-secondary);
}


/* ============================================================
   MAP LINK
============================================================ */

.contact-location-link {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        1rem;

    padding-top:
        1rem;

    border-top:
        0.0625rem solid
        var(--gray-line);

    font-family:
        'Bold',
        sans-serif;

    font-size:
        0.65rem;

    line-height:
        1;

    letter-spacing:
        0.06rem;

    color:
        var(--text-primary);

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:
        color 0.3s ease;
}


.contact-location-link span {
    font-size:
        1rem;

    transform:
        translate(0, 0);

    transition:
        transform 0.3s ease;
}


.contact-location-link:hover {
    color:
        var(--purple);
}


.contact-location-link:hover span {
    transform:
        translate(0.25rem, -0.25rem);
}


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

@media (max-width: 60rem) {

    .contact-location {
        height:
            30rem;

        margin-top:
            5rem;
    }


    .contact-location-info {
        left:
            1.5rem;

        bottom:
            1.5rem;

        width:
            18rem;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 48rem) {

    .contact-location {
        display: flex;

        flex-direction: column;

        height: auto;

        margin-top:
            4rem;
    }


    .contact-location-map {
        position: relative;

        inset: auto;

        width: 100%;

        height:
            23rem;
    }


    .contact-location-info {
        position: relative;

        left: auto;

        bottom: auto;

        width: 100%;

        padding:
            1.5rem;

        box-shadow:
            none;
    }


    .contact-location-title {
        font-size:
            1.8rem;
    }

}

/* ============================================================
   BLOG / EDITORIAL
   SINGLE FEATURE ARTICLE

   LENGUAJE:
   - FONDO BLANCO
   - BOLD PARA TÍTULOS
   - BLACK + YELLOW PARA DESTACADOS
   - MICROCOPY EN MEDIUM
   - GEOMETRÍAS DE CONTORNO
   - DEGRADADO ESTRATEGO
============================================================ */

.blog-editorial {
    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        var(--white);

    color:
        var(--text-primary);
}


/* ============================================================
   BACKGROUND
============================================================ */

.blog-editorial-background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events:
        none;
}


/* ============================================================
   SUBTLE GRID

   MISMA LÓGICA VISUAL DE ABOUT / ORDEN CREATIVO
============================================================ */

.blog-editorial-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(36, 36, 36, 0.022) 0.0625rem,
            transparent 0.0625rem
        ),
        linear-gradient(
            90deg,
            rgba(36, 36, 36, 0.022) 0.0625rem,
            transparent 0.0625rem
        );

    background-size:
        5rem
        5rem;

    opacity:
        0.55;
}


/* ============================================================
   COMMON GEOMETRY
============================================================ */

.blog-editorial-geometry {
    --blog-parallax-y:
        0rem;

    position: absolute;

    display: block;

    pointer-events:
        none;

    will-change:
        transform;
}


/* ============================================================
   ORBITS
============================================================ */

.blog-editorial-orbit {
    border-radius:
        50%;
}


/* ============================================================
   ORBIT 01
   PURPLE → PINK → CYAN

   MISMA TÉCNICA DE ABOUT:
   CONIC GRADIENT + MASK = SOLO CONTORNO
============================================================ */

.blog-editorial-orbit-one {
    width:
        31rem;

    height:
        31rem;

    top:
        8rem;

    right:
        -13rem;

    padding:
        0.0625rem;

    background:
        conic-gradient(
            from 190deg,

            transparent 0deg,

            var(--purple) 48deg,

            var(--pink) 112deg,

            var(--cyan) 195deg,

            var(--yellow) 252deg,

            transparent 326deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.32;

    transform:
        translate3d(
            0,
            var(--blog-parallax-y),
            0
        );
}


/* ============================================================
   ORBIT 02
============================================================ */

.blog-editorial-orbit-two {
    width:
        18rem;

    height:
        18rem;

    left:
        -8rem;

    top:
        38rem;

    padding:
        0.0625rem;

    background:
        conic-gradient(
            from 70deg,

            transparent 0deg,

            var(--cyan) 42deg,

            var(--purple) 108deg,

            var(--pink) 180deg,

            var(--yellow) 255deg,

            transparent 334deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.24;

    transform:
        translate3d(
            0,
            var(--blog-parallax-y),
            0
        );
}


/* ============================================================
   OUTLINE FRAME
============================================================ */

.blog-editorial-frame {
    width:
        8rem;

    height:
        8rem;

    top:
        27rem;

    right:
        15%;

    padding:
        0.0625rem;

    background:
        linear-gradient(
            135deg,

            var(--purple) 0%,

            var(--pink) 28%,

            var(--cyan) 55%,

            var(--yellow) 78%,

            var(--orange) 100%
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.26;

    transform:
        translate3d(
            0,
            var(--blog-parallax-y),
            0
        )
        rotate(16deg);
}


/* ============================================================
   DECORATIVE PATHS
============================================================ */

.blog-editorial-path {
    height:
        0.0625rem;

    transform-origin:
        left center;
}


/* PATH ONE */

.blog-editorial-path-one {
    width:
        24rem;

    top:
        31rem;

    right:
        -6rem;

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(124, 58, 237, 0.15) 18%,

            rgba(236, 72, 153, 0.48) 42%,

            rgba(6, 182, 212, 0.42) 68%,

            transparent 100%
        );

    opacity:
        0.60;

    transform:
        translate3d(
            0,
            var(--blog-parallax-y),
            0
        )
        rotate(-17deg);
}


/* PATH TWO */

.blog-editorial-path-two {
    width:
        19rem;

    left:
        -5rem;

    top:
        57rem;

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(6, 182, 212, 0.12) 18%,

            rgba(124, 58, 237, 0.46) 47%,

            rgba(251, 191, 36, 0.38) 74%,

            transparent 100%
        );

    opacity:
        0.55;

    transform:
        translate3d(
            0,
            var(--blog-parallax-y),
            0
        )
        rotate(12deg);
}


/* ============================================================
   BOOTSTRAP CONTENT
============================================================ */

.blog-editorial .container-fluid,
.blog-editorial .row {
    position: relative;

    z-index: 2;
}


/* ============================================================
   INNER
============================================================ */

.blog-editorial-inner {
    position: relative;

    width: 100%;

    padding:
        7rem
        0
        8rem;
}


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

.blog-editorial-top {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        2rem;

    width: 100%;

    padding-bottom:
        1rem;

    border-bottom:
        0.0625rem solid
        var(--gray-line);
}


/* ============================================================
   INDEX
============================================================ */

.blog-editorial-index {
    display: flex;

    align-items: center;

    gap:
        0.8rem;
}


.blog-editorial-index span,
.blog-editorial-edition {
    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.58rem;

    font-weight:
        normal;

    line-height:
        1;

    letter-spacing:
        0.12rem;

    color:
        var(--text-muted);

    text-transform:
        uppercase;
}


.blog-editorial-index-line {
    display: block;

    width:
        2.5rem;

    height:
        0.0625rem;

    background:
        var(--gray-medium);
}


/* ============================================================
   HEADER
============================================================ */

.blog-editorial-header {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(16rem, 0.65fr);

    align-items:
        end;

    gap:
        4rem;

    width: 100%;

    padding:
        4.5rem
        0
        5.5rem;
}


/* ============================================================
   MAIN TITLE

   COMO EL SISTEMA EXISTENTE:
   BOLD = TEXTO PRINCIPAL
============================================================ */

.blog-editorial-title {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items:
        flex-start;

    width: 100%;

    margin: 0;

    padding: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        4.5rem;

    font-weight:
        700;

    line-height:
        0.92;

    letter-spacing:
        -0.18rem;

    color:
        var(--text-primary);

    text-transform:
        uppercase;
}


/* ============================================================
   TITLE LINES
============================================================ */

.blog-editorial-title-line {
    display: block;

    width:
        fit-content;

    max-width:
        100%;
    font-family: 'Bold';
}


/* ============================================================
   HIGHLIGHT

   BLACK + YELLOW
   IGUAL QUE BRANDS / ABOUT / ORDEN CREATIVO
============================================================ */

.blog-editorial-title-highlight {
    margin-top:
        0.35rem;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        var(--yellow);
}


/* ============================================================
   HEADER META
============================================================ */

.blog-editorial-header-meta {
    display: flex;

    align-items:
        flex-start;

    gap:
        1rem;

    padding-bottom:
        0.4rem;
}


.blog-editorial-header-line {
    display: block;

    flex-shrink:
        0;

    width:
        2.9rem;

    height:
        0.0625rem;

    margin-top:
        0.55rem;

    background:
        linear-gradient(
            90deg,

            var(--purple),
            var(--pink),
            var(--cyan),
            var(--yellow)
        );
}


.blog-editorial-header-meta p {
    width:
        100%;

    max-width:
        17rem;

    margin:
        0;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        0.8rem;

    line-height:
        1.55;

    color:
        var(--text-secondary);
}


/* ============================================================
   ARTICLE
============================================================ */

.blog-editorial-article {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(19rem, 0.65fr);

    align-items:
        center;

    gap:
        4.5rem;

    width: 100%;

    padding:
        3.5rem
        0
        5rem;

    border-top:
        0.0625rem solid
        var(--gray-line);

    border-bottom:
        0.0625rem solid
        var(--gray-line);
}


/* ============================================================
   MEDIA
============================================================ */

.blog-editorial-media {
    position: relative;

    display: block;

    width: 100%;

    color:
        inherit;

    text-decoration:
        none;
}


/* ============================================================
   IMAGE
============================================================ */

.blog-editorial-image {
    position: relative;

    z-index: 3;

    width: 100%;

    height:
        32rem;

    overflow: hidden;

    background:
        var(--gray-light);
}


.blog-editorial-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1);

    transition:
        transform
        0.6s
        ease;
}


/* ============================================================
   MEDIA HOVER
============================================================ */

.blog-editorial-media:hover
.blog-editorial-image img {
    transform:
        scale(1.018);
}


/* ============================================================
   MEDIA GEOMETRY
============================================================ */

.blog-editorial-media-geometry {
    position: absolute;

    display: block;

    z-index: 4;

    pointer-events:
        none;
}


/* ============================================================
   IMAGE CIRCLE
============================================================ */

.blog-editorial-media-circle {
    width:
        7rem;

    height:
        7rem;

    top:
        -2.5rem;

    left:
        -2.5rem;

    padding:
        0.0625rem;

    border-radius:
        50%;

    background:
        conic-gradient(
            from 190deg,

            transparent 0deg,

            var(--purple) 55deg,

            var(--pink) 118deg,

            var(--cyan) 190deg,

            var(--yellow) 256deg,

            transparent 332deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.6;
}


/* ============================================================
   IMAGE SQUARE
============================================================ */

.blog-editorial-media-square {
    width:
        4.5rem;

    height:
        4.5rem;

    right:
        2rem;

    bottom:
        -1.7rem;

    padding:
        0.0625rem;

    background:
        linear-gradient(
            135deg,

            var(--purple),
            var(--pink),
            var(--cyan),
            var(--yellow)
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.55;

    transform:
        rotate(11deg);
}


/* ============================================================
   IMAGE LINE
============================================================ */

.blog-editorial-media-line {
    width:
        8rem;

    height:
        0.0625rem;

    top:
        6rem;

    right:
        -3rem;

    background:
        linear-gradient(
            90deg,

            var(--purple),
            var(--pink),
            var(--cyan),
            var(--yellow)
        );

    opacity:
        0.55;
}


/* ============================================================
   ARTICLE INFO
============================================================ */

.blog-editorial-info {
    position: relative;

    z-index: 4;

    width: 100%;
}


/* ============================================================
   ARTICLE META
============================================================ */

.blog-editorial-article-meta {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        2rem;

    width: 100%;

    margin-bottom:
        2.4rem;

    padding-bottom:
        1rem;

    border-bottom:
        0.0625rem solid
        var(--gray-line);
}


.blog-editorial-article-number {
    font-family:
        'Black',
        sans-serif;

    font-size:
        0.7rem;

    line-height:
        1;

    color:
        var(--text-primary);
}


.blog-editorial-article-category {
    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.55rem;

    line-height:
        1;

    letter-spacing:
        0.1rem;

    color:
        var(--text-muted);

    text-transform:
        uppercase;
}


/* ============================================================
   ARTICLE TITLE
============================================================ */

.blog-editorial-article-title {
    margin:
        0
        0
        1.7rem;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        2.25rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -0.065rem;

    text-transform:
        uppercase;
}


.blog-editorial-article-title a {
    display: flex;

    flex-direction:
        column;

    color:
        var(--text-primary);

    text-decoration:
        none;
}


.blog-editorial-article-title span {
    font-family:
        'Bold',
        sans-serif;
}


/* ============================================================
   ARTICLE HIGHLIGHT
============================================================ */

.blog-editorial-article-title strong {
    margin-top:
        0.18rem;

    font-family:
        'Bold',
        sans-serif;

    font-weight:
        900;

}


/* ============================================================
   EXCERPT
============================================================ */

.blog-editorial-excerpt {
    width: 100%;

    max-width:
        25rem;

    margin:
        0
        0
        2.8rem;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        0.82rem;

    line-height:
        1.6;

    color:
        var(--text-secondary);
}


/* ============================================================
   READ
   MISMA LÓGICA DE CTA DEL PROYECTO
============================================================ */

.blog-editorial-read {
    display: grid;

    grid-template-columns:
        auto
        minmax(3rem, 1fr)
        auto;

    align-items: center;

    gap:
        1rem;

    width: 100%;

    color:
        var(--text-primary);

    text-decoration:
        none;
}


/* ============================================================
   READ TEXT
============================================================ */

.blog-editorial-read-text {
    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.62rem;

    line-height:
        1;

    letter-spacing:
        0.1rem;

    text-transform:
        uppercase;
}


/* ============================================================
   READ LINE
============================================================ */

.blog-editorial-read-line {
    position: relative;

    display: block;

    width: 100%;

    height:
        0.0625rem;

    overflow: hidden;

    background:
        var(--gray-line);
}


.blog-editorial-read-line i {
    position: absolute;

    inset:
        0
        auto
        0
        0;

    display: block;

    width:
        0;

    background:
        linear-gradient(
            90deg,

            var(--purple) 0%,

            var(--pink) 20%,

            var(--cyan) 40%,

            var(--green) 60%,

            var(--yellow) 80%,

            var(--orange) 100%
        );

    transition:
        width
        0.4s
        ease;
}


/* ============================================================
   READ ARROW
============================================================ */

.blog-editorial-read-arrow {
    font-family:
        'Regular',
        sans-serif;

    font-size:
        1.15rem;

    line-height:
        1;

    transition:
        transform
        0.35s
        ease;
}


/* ============================================================
   READ HOVER
============================================================ */

.blog-editorial-read:hover
.blog-editorial-read-line i,
.blog-editorial-read:focus-visible
.blog-editorial-read-line i {
    width:
        100%;
}


.blog-editorial-read:hover
.blog-editorial-read-arrow,
.blog-editorial-read:focus-visible
.blog-editorial-read-arrow {
    transform:
        translate(
            0.25rem,
            -0.25rem
        );
}


/* ============================================================
   ARTICLE FOOT
============================================================ */

.blog-editorial-article-foot {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        1.5rem;

    width: 100%;

    margin-top:
        4rem;

    padding-top:
        1rem;

    border-top:
        0.0625rem solid
        var(--gray-line);
}


.blog-editorial-article-foot span {
    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.5rem;

    line-height:
        1;

    letter-spacing:
        0.09rem;

    color:
        var(--text-muted);

    text-transform:
        uppercase;
}


/* ============================================================
   REVEAL
============================================================ */

[data-blog-reveal] {
    opacity:
        0;

    transform:
        translateY(1rem);

    transition:
        opacity
        0.8s
        ease,

        transform
        0.8s
        ease;
}


[data-blog-reveal].is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 87.5rem) {

    .blog-editorial-inner {
        padding:
            7.5rem
            0
            2rem;
    }


    .blog-editorial-title {
        font-size:
            4.5rem;

        letter-spacing:
            -0.2rem;
    }


    .blog-editorial-image {
        height:
            34rem;
    }


    .blog-editorial-article-title {
        font-size:
            2rem;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 74rem) {

    .blog-editorial-inner {
        padding:
            6rem
            0
            7rem;
    }


    .blog-editorial-header {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(14rem, 0.75fr);

        gap:
            3rem;
    }


    .blog-editorial-title {
        font-size:
            3.8rem;

        letter-spacing:
            -0.14rem;
    }


    .blog-editorial-article {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(18rem, 0.85fr);

        gap:
            3rem;
    }


    .blog-editorial-image {
        height:
            29rem;
    }


    .blog-editorial-article-title {
        font-size:
            1.95rem;

        letter-spacing:
            -0.055rem;
    }

}


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

@media (max-width: 60rem) {

    .blog-editorial-inner {
        padding:
            5.5rem
            0
            6rem;
    }


    .blog-editorial-header {
        grid-template-columns:
            1fr;

        gap:
            2rem;

        padding:
            3.5rem
            0
            4rem;
    }


    .blog-editorial-title {
        max-width:
            40rem;

        font-size:
            3.25rem;

        letter-spacing:
            -0.1rem;
    }


    .blog-editorial-header-meta {
        max-width:
            25rem;

        margin-left:
            auto;
    }


    .blog-editorial-article {
        grid-template-columns:
            1fr;

        gap:
            4rem;
    }


    .blog-editorial-image {
        height:
            31rem;
    }


    .blog-editorial-info {
        width:
            75%;

        margin-left:
            auto;
    }


    .blog-editorial-orbit-one {
        width:
            25rem;

        height:
            25rem;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 48rem) {

    .blog-editorial-inner {
        padding:
            5rem
            0
            5rem;
    }


    .blog-editorial-top {
        gap:
            1rem;
    }


    .blog-editorial-index span,
    .blog-editorial-edition {
        font-size:
            0.5rem;

        letter-spacing:
            0.08rem;
    }


    .blog-editorial-index-line {
        width:
            1.7rem;
    }


    .blog-editorial-header {
        padding:
            3rem
            0
            3.5rem;
    }


    .blog-editorial-title {
        font-size:
            2.55rem;

        line-height:
            0.96;

        letter-spacing:
            -0.075rem;
    }


    .blog-editorial-header-meta {
        width: 100%;

        max-width:
            19rem;

        margin:
            0;
    }


    .blog-editorial-header-meta p {
        font-size:
            0.7rem;
    }


    .blog-editorial-header-line {
        width:
            2rem;
    }


    .blog-editorial-article {
        gap:
            3.5rem;

        padding:
            2.5rem
            0
            4rem;
    }


    .blog-editorial-image {
        height:
            25rem;
    }


    .blog-editorial-info {
        width:
            100%;

        margin-left:
            0;
    }


    .blog-editorial-article-meta {
        margin-bottom:
            2rem;
    }


    .blog-editorial-article-title {
        font-size:
            1.7rem;

        letter-spacing:
            -0.045rem;
    }


    .blog-editorial-excerpt {
        max-width:
            100%;

        font-size:
            0.74rem;
    }


    .blog-editorial-article-foot {
        margin-top:
            3rem;
    }


    .blog-editorial-media-circle {
        width:
            5rem;

        height:
            5rem;

        top:
            -1.8rem;

        left:
            -1.5rem;
    }


    .blog-editorial-media-square {
        width:
            3.5rem;

        height:
            3.5rem;

        right:
            1rem;

        bottom:
            -1.2rem;
    }


    .blog-editorial-media-line {
        width:
            5rem;

        right:
            -1rem;
    }


    .blog-editorial-orbit-one {
        width:
            18rem;

        height:
            18rem;

        right:
            -11rem;

        top:
            10rem;
    }


    .blog-editorial-orbit-two {
        width:
            13rem;

        height:
            13rem;

        left:
            -9rem;

        top:
            38rem;
    }


    .blog-editorial-frame {
        width:
            5rem;

        height:
            5rem;

        right:
            5%;

        top:
            24rem;
    }


    .blog-editorial-path-one {
        width:
            14rem;
    }


    .blog-editorial-path-two {
        width:
            12rem;
    }

}


/* ============================================================
   MOBILE SMALL
============================================================ */

@media (max-width: 34rem) {

    .blog-editorial-title {
        font-size:
            2.15rem;

        letter-spacing:
            -0.055rem;
    }


    .blog-editorial-image {
        height:
            21rem;
    }


    .blog-editorial-article-title {
        font-size:
            1.5rem;
    }


    .blog-editorial-article-foot {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.6rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    [data-blog-reveal] {
        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }


    .blog-editorial-image img,
    .blog-editorial-read-line i,
    .blog-editorial-read-arrow {
        transition:
            none;
    }


    .blog-editorial-geometry {
        transform:
            none;
    }

}

/* ============================================================
   BLOG ARTICLE
   EDITORIAL TEMPLATE
============================================================ */

.article-editorial {
    position: relative;

    width: 100%;

    overflow: hidden;

    background:whitesmoke;

    color:
        var(--text-primary);
}


/* ============================================================
   BACKGROUND
============================================================ */

.article-editorial-background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events:
        none;
}


/* ============================================================
   GRID
============================================================ */

.article-editorial-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(36, 36, 36, 0.018) 0.0625rem,
            transparent 0.0625rem
        ),
        linear-gradient(
            90deg,
            rgba(36, 36, 36, 0.018) 0.0625rem,
            transparent 0.0625rem
        );

    background-size:
        5rem
        5rem;

    opacity:
        0.45;
}


/* ============================================================
   COMMON GEOMETRY
============================================================ */

.article-editorial-geometry {
    --article-parallax-y:
        0rem;

    position: absolute;

    display: block;

    pointer-events:
        none;

    will-change:
        transform;
}


/* ============================================================
   ORBITS
============================================================ */

.article-editorial-orbit {
    border-radius:
        50%;
}


/* ============================================================
   ORBIT ONE
============================================================ */

.article-editorial-orbit-one {
    width:
        32rem;

    height:
        32rem;

    top:
        7rem;

    right:
        -15rem;

    padding:
        0.0625rem;

    background:
        conic-gradient(
            from 190deg,

            transparent 0deg,

            var(--purple) 48deg,

            var(--pink) 112deg,

            var(--cyan) 190deg,

            var(--yellow) 255deg,

            transparent 330deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.30;

    transform:
        translate3d(
            0,
            var(--article-parallax-y),
            0
        );
}


/* ============================================================
   ORBIT TWO
============================================================ */

.article-editorial-orbit-two {
    width:
        18rem;

    height:
        18rem;

    top:
        61rem;

    left:
        -10rem;

    padding:
        0.0625rem;

    background:
        conic-gradient(
            from 40deg,

            transparent 0deg,

            var(--cyan) 50deg,

            var(--purple) 120deg,

            var(--pink) 190deg,

            var(--yellow) 260deg,

            transparent 335deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.20;

    transform:
        translate3d(
            0,
            var(--article-parallax-y),
            0
        );
}


/* ============================================================
   FRAME
============================================================ */

.article-editorial-frame {
    width:
        7rem;

    height:
        7rem;

    top:
        30rem;

    right:
        13%;

    padding:
        0.0625rem;

    background:
        linear-gradient(
            135deg,

            var(--purple),
            var(--pink),
            var(--cyan),
            var(--yellow)
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.24;

    transform:
        translate3d(
            0,
            var(--article-parallax-y),
            0
        )
        rotate(14deg);
}


/* ============================================================
   HERO
============================================================ */

.article-hero {
    position: relative;

    z-index: 2;

    width: 100%;
}


.article-hero-inner {
    width: 100%;

    padding:
        7rem
        0
        5.5rem;
}


/* ============================================================
   HERO META
============================================================ */

.article-hero-meta {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        2rem;

    width: 100%;

    padding-bottom:
        1rem;

    border-bottom:
        0.0625rem solid
        var(--gray-line);
}


.article-hero-meta-left {
    display: flex;

    align-items: center;

    gap:
        0.8rem;
}


.article-hero-meta span {
    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.55rem;

    line-height:
        1;

    letter-spacing:
        0.11rem;

    color:
        var(--text-muted);

    text-transform:
        uppercase;
}


.article-hero-meta-line {
    display: block;

    width:
        2.5rem;

    height:
        0.0625rem;

    background:
        var(--gray-medium);
}


/* ============================================================
   HERO HEADING
============================================================ */

.article-hero-heading {
    width: 100%;

    max-width:
        64rem;

    padding-top:
        4rem;
}


/* ============================================================
   EYEBROW
============================================================ */

.article-hero-eyebrow {
    margin:
        0
        0
        1.25rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.6rem;

    line-height:
        1;

    letter-spacing:
        0.14rem;

    color:
        var(--text-muted);
}


/* ============================================================
   HERO TITLE
============================================================ */

.article-hero-title {
    display: flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    width: 100%;

    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        4.6rem;

    font-weight:
        700;

    line-height:
        0.92;

    letter-spacing:
        -0.17rem;

    color:
        var(--text-primary);

    text-transform:
        uppercase;
}
.article-hero-title span{
    font-family: 'Bold';
}

.article-hero-title span,
.article-hero-title strong {
    display: block;

}


.article-hero-title strong {
    margin-top:
        0.3rem;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        var(--yellow);
}


/* ============================================================
   HERO INTRO
============================================================ */

.article-hero-intro {
    display: flex;

    align-items:
        flex-start;

    gap:
        1rem;

    width:
        28rem;

    max-width:
        100%;

    margin:
        2.5rem
        0
        0
        auto;
}


.article-hero-intro-line {
    display: block;

    flex-shrink:
        0;

    width:
        3rem;

    height:
        0.0625rem;

    margin-top:
        0.55rem;

    background:
        linear-gradient(
            90deg,

            var(--purple),
            var(--pink),
            var(--cyan),
            var(--yellow)
        );
}


.article-hero-intro p {
    margin: 0;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        0.82rem;

    line-height:
        1.6;

    color:
        var(--text-secondary);
}


/* ============================================================
   HERO BOTTOM
============================================================ */

.article-hero-bottom {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-top:
        4rem;

    padding-top:
        1rem;

    border-top:
        0.0625rem solid
        var(--gray-line);
}


.article-hero-bottom span {
    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.5rem;

    line-height:
        1;

    letter-spacing:
        0.1rem;

    color:
        var(--text-muted);

    text-transform:
        uppercase;
}


/* ============================================================
   COVER
============================================================ */

.article-cover {
    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        0
        0
        7rem;
}


/* ============================================================
   COVER FIGURE
============================================================ */

.article-cover-figure {
    position: relative;

    width: 100%;

    margin: 0;
}


/* ============================================================
   COVER IMAGE
============================================================ */

.article-cover-image {
    position: relative;

    z-index: 3;

    width: 100%;

    height:
        38rem;

    overflow: hidden;

    background:
        var(--gray-light);
}


.article-cover-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit:
        cover;

    object-position:
        center;
}


/* ============================================================
   COVER CIRCLE
============================================================ */

.article-cover-circle {
    position: absolute;

    z-index: 1;

    width:
        8rem;

    height:
        8rem;

    top:
        -2.7rem;

    left:
        -2.7rem;

    padding:
        0.0625rem;

    border-radius:
        50%;

    background:
        conic-gradient(
            from 180deg,

            transparent,

            var(--purple),

            var(--pink),

            var(--cyan),

            var(--yellow),

            transparent
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.55;
}


/* ============================================================
   COVER LINE
============================================================ */

.article-cover-line {
    position: absolute;

    z-index: 4;

    width:
        10rem;

    height:
        0.0625rem;

    right:
        -3rem;

    top:
        7rem;

    background:
        linear-gradient(
            90deg,

            var(--purple),
            var(--pink),
            var(--cyan),
            var(--yellow)
        );

    opacity:
        0.55;
}


/* ============================================================
   COVER FRAME
============================================================ */

.article-cover-frame {
    position: absolute;

    z-index: 4;

    width:
        5rem;

    height:
        5rem;

    right:
        3rem;

    bottom:
        -2rem;

    padding:
        0.0625rem;

    background:
        linear-gradient(
            135deg,

            var(--purple),
            var(--pink),
            var(--cyan),
            var(--yellow)
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity:
        0.5;

    transform:
        rotate(12deg);
}


/* ============================================================
   BODY
============================================================ */

.article-body {
    position: relative;

    z-index: 2;

    width: 100%;
}


.article-body-inner {
    width: 100%;
}


/* ============================================================
   ARTICLE SECTION
============================================================ */

.article-section {
    width: 100%;

    padding:
        6rem
        0;

    border-top:
        0.0625rem solid
        var(--gray-line);
}


/* ============================================================
   SECTION INDEX
============================================================ */

.article-section-index {
    display: flex;

    align-items: center;

    gap:
        0.8rem;

    margin-bottom:
        3.5rem;
}


.article-section-index span {
    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.54rem;

    line-height:
        1;

    letter-spacing:
        0.11rem;

    color:
        var(--text-muted);

    text-transform:
        uppercase;
}


.article-section-index span:first-child {
    color:
        var(--text-primary);
}


.article-section-index-line {
    display: block;

    width:
        2.5rem;

    height:
        0.0625rem;

    background:
        var(--gray-medium);
}


/* ============================================================
   SECTION GRID
============================================================ */

.article-section-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(20rem, 1.2fr);

    gap:
        7rem;

    align-items:
        start;

    width: 100%;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.article-section-heading h2,
.article-section-subtitle {
    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        2.7rem;

    font-weight:
        700;

    line-height:
        0.96;

    letter-spacing:
        -0.08rem;

    color:
        var(--text-primary);

    text-transform:
        uppercase;
}


.article-section-heading h2 strong,
.article-section-subtitle strong {
    display: block;

    margin-top:
        0.15rem;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        var(--yellow);
}


/* ============================================================
   ARTICLE COPY
============================================================ */

.article-section-copy {
    width: 100%;

    max-width:
        34rem;
}


.article-section-copy p {
    margin:
        0
        0
        1.4rem;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        0.92rem;

    line-height:
        1.75;

    color:
        var(--text-secondary);
}


.article-section-copy p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   INSIGHT
============================================================ */

.article-insight {
    position: relative;

    width: 100%;

    padding:
        7rem
        7%;

    overflow: hidden;

    border-top:
        0.0625rem solid
        var(--gray-line);

    border-bottom:
        0.0625rem solid
        var(--gray-line);
}


/* ============================================================
   INSIGHT INDEX
============================================================ */

.article-insight-index {
    display: block;

    margin-bottom:
        1.5rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.52rem;

    line-height:
        1;

    letter-spacing:
        0.12rem;

    color:
        var(--text-muted);
}


/* ============================================================
   BLOCKQUOTE
============================================================ */

.article-insight blockquote {
    display: flex;

    flex-direction:
        column;

    width:
        44rem;

    max-width:
        100%;

    margin: 0;

    font-family:
        'Bold',
        sans-serif !important;

    font-size:
        3.2rem;

    font-weight:
        700;

    line-height:
        0.95;

    letter-spacing:
        -0.11rem;

    color:
        var(--text-primary);

    text-transform:
        uppercase;
}


.article-insight blockquote strong {
    margin-top:
        0.25rem;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        var(--yellow);
}


/* ============================================================
   INSIGHT LINE
============================================================ */

.article-insight-line {
    position: absolute;

    width:
        18rem;

    height:
        0.0625rem;

    right:
        7%;

    bottom:
        4rem;

    background:
        linear-gradient(
            90deg,

            transparent,

            var(--purple),
            var(--pink),
            var(--cyan),
            var(--yellow)
        );

    opacity:
        0.55;
}


/* ============================================================
   SECTION WITH MEDIA
============================================================ */

.article-section-media-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(20rem, 0.75fr);

    gap:
        5rem;

    align-items:
        center;

    width: 100%;
}


/* ============================================================
   INLINE MEDIA
============================================================ */

.article-inline-media {
    width: 100%;

    margin: 0;
}


.article-inline-image {
    width: 100%;

    height:
        31rem;

    overflow: hidden;

    background:
        var(--gray-light);
}


.article-inline-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit:
        cover;
}


.article-inline-media figcaption {
    margin-top:
        0.8rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.48rem;

    line-height:
        1;

    letter-spacing:
        0.1rem;

    color:
        var(--text-muted);

    text-transform:
        uppercase;
}


/* ============================================================
   MINI INSIGHT
============================================================ */

.article-mini-insight {
    margin-top:
        3rem;

    padding-top:
        1.5rem;

    border-top:
        0.0625rem solid
        var(--gray-line);
}


.article-mini-insight span {
    display: block;

    margin-bottom:
        0.8rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.5rem;

    line-height:
        1;

    letter-spacing:
        0.11rem;

    color:
        var(--text-muted);
}


.article-mini-insight strong {
    font-family:
        'Black',
        sans-serif;

    font-size:
        1.65rem;

    font-weight:
        900;

    line-height:
        1.05;

    color:
        var(--yellow);

    text-transform:
        uppercase;
}


/* ============================================================
   RECOMMENDATIONS
============================================================ */

.article-recommendations {
    width: 100%;

    padding:
        6rem
        0;

    border-top:
        0.0625rem solid
        var(--gray-line);
}


/* ============================================================
   RECOMMENDATIONS HEADING
============================================================ */

.article-recommendations-heading {
    width:
        35rem;

    max-width:
        100%;

    margin-bottom:
        4rem;
}


.article-recommendations-heading h2 {
    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        3rem;

    font-weight:
        700;

    line-height:
        0.95;

    letter-spacing:
        -0.1rem;

    color:
        var(--text-primary);

    text-transform:
        uppercase;
}


.article-recommendations-heading strong {
    display: block;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        var(--yellow);
}


/* ============================================================
   RECOMMENDATIONS LIST
============================================================ */

.article-recommendations-list {
    width: 100%;

    border-top:
        0.0625rem solid
        var(--gray-line);
}


/* ============================================================
   RECOMMENDATION ITEM
============================================================ */

.article-recommendation {
    display: grid;

    grid-template-columns:
        4rem
        minmax(14rem, 0.8fr)
        minmax(18rem, 1fr);

    align-items:
        center;

    gap:
        2rem;

    width: 100%;

    min-height:
        8rem;

    padding:
        1.5rem
        0;

    border-bottom:
        0.0625rem solid
        var(--gray-line);

    transition:
        padding-left
        0.35s
        ease;
}


.article-recommendation:hover {
    padding-left:
        0.7rem;
}


/* ============================================================
   NUMBER
============================================================ */

.article-recommendation-number {
    font-family:
        'Black',
        sans-serif;

    font-size:
        1.8rem;

    line-height:
        1;

    color:
        var(--gray-medium);
}


/* ============================================================
   TITLE
============================================================ */

.article-recommendation h3 {
    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        1.15rem;

    font-weight:
        700;

    line-height:
        1.1;

    color:
        var(--text-primary);

    text-transform:
        uppercase;
}


/* ============================================================
   COPY
============================================================ */

.article-recommendation p {
    width:
        24rem;

    max-width:
        100%;

    margin: 0;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        0.78rem;

    line-height:
        1.55;

    color:
        var(--text-secondary);
}


/* ============================================================
   CLOSING
============================================================ */

.article-closing {
    position: relative;

    width: 100%;

    padding:
        7rem
        0;

    border-top:
        0.0625rem solid
        var(--gray-line);
}


/* ============================================================
   CLOSING LABEL
============================================================ */

.article-closing-label {
    display: block;

    margin-bottom:
        1.4rem;

    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.52rem;

    line-height:
        1;

    letter-spacing:
        0.13rem;

    color:
        var(--text-muted);
}


/* ============================================================
   CLOSING TITLE
============================================================ */

.article-closing h2 {
    display: flex;

    flex-direction:
        column;

    width:
        50rem;

    max-width:
        100%;

    margin: 0;

    font-family:
        'Bold',
        sans-serif;

    font-size:
        4rem;

    font-weight:
        700;

    line-height:
        0.92;

    letter-spacing:
        -0.14rem;

    color:
        var(--text-primary);

    text-transform:
        uppercase;
}


.article-closing h2 strong {
    margin-top:
        0.25rem;

    font-family:
        'Black',
        sans-serif;

    font-weight:
        900;

    color:
        var(--yellow);
}


/* ============================================================
   CLOSING DESCRIPTION
============================================================ */

.article-closing p {
    width:
        25rem;

    max-width:
        100%;

    margin:
        2rem
        0
        0
        auto;

    font-family:
        'Regular',
        sans-serif;

    font-size:
        0.82rem;

    line-height:
        1.6;

    color:
        var(--text-secondary);
}


/* ============================================================
   CLOSING CTA
============================================================ */

.article-closing-cta {
    display: grid;

    grid-template-columns:
        auto
        minmax(4rem, 14rem)
        auto;

    align-items: center;

    gap:
        1rem;

    width:
        fit-content;

    margin:
        3rem
        0
        0
        auto;

    color:
        var(--text-primary);

    text-decoration:
        none;
}


.article-closing-cta > span:first-child {
    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.62rem;

    line-height:
        1;

    letter-spacing:
        0.1rem;
}


/* ============================================================
   CTA LINE
============================================================ */

.article-closing-cta-line {
    position: relative;

    display: block;

    width: 100%;

    height:
        0.0625rem;

    overflow: hidden;

    background:
        var(--gray-line);
}


.article-closing-cta-line i {
    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 0;

    background:
        linear-gradient(
            90deg,

            var(--purple),
            var(--pink),
            var(--cyan),
            var(--green),
            var(--yellow),
            var(--orange)
        );

    transition:
        width
        0.4s
        ease;
}


/* ============================================================
   CTA ARROW
============================================================ */

.article-closing-cta-arrow {
    font-family:
        'Regular',
        sans-serif;

    font-size:
        1.2rem;

    line-height:
        1;

    transition:
        transform
        0.35s
        ease;
}


/* ============================================================
   CTA HOVER
============================================================ */

.article-closing-cta:hover
.article-closing-cta-line i {
    width: 100%;
}


.article-closing-cta:hover
.article-closing-cta-arrow {
    transform:
        translate(
            0.25rem,
            -0.25rem
        );
}


/* ============================================================
   ARTICLE FOOTER
============================================================ */

.article-footer {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        2rem;

    width: 100%;

    padding:
        1.8rem
        0
        5rem;

    border-top:
        0.0625rem solid
        var(--gray-line);
}


/* ============================================================
   BACK
============================================================ */

.article-footer-back {
    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.58rem;

    line-height:
        1;

    letter-spacing:
        0.1rem;

    color:
        var(--text-primary);

    text-decoration:
        none;

    transition:
        color
        0.3s
        ease;
}


.article-footer-back:hover {
    color:
        var(--purple);
}


/* ============================================================
   FOOT META
============================================================ */

.article-footer-meta {
    display: flex;

    align-items: center;

    gap:
        1.5rem;
}


.article-footer-meta span {
    font-family:
        'Medium',
        sans-serif;

    font-size:
        0.5rem;

    line-height:
        1;

    letter-spacing:
        0.09rem;

    color:
        var(--text-muted);
}


/* ============================================================
   REVEAL
============================================================ */

[data-article-reveal] {
    opacity:
        0;

    transform:
        translateY(0.9rem);

    transition:
        opacity
        0.8s
        ease,

        transform
        0.8s
        ease;
}


[data-article-reveal].is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 87.5rem) {

    .article-hero-title {
        font-size:
            5rem;

        letter-spacing:
            -0.19rem;
    }


    .article-cover-image {
        height:
            41rem;
    }


    .article-section-heading h2,
    .article-section-subtitle {
        font-size:
            2.9rem;
    }


    .article-closing h2 {
        font-size:
            4.3rem;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 74rem) {

    .article-hero-inner {
        padding:
            6rem
            0
            5rem;
    }


    .article-hero-title {
        font-size:
            3.9rem;

        letter-spacing:
            -0.13rem;
    }


    .article-cover-image {
        height:
            33rem;
    }


    .article-section-grid {
        gap:
            4rem;
    }


    .article-section-heading h2,
    .article-section-subtitle {
        font-size:
            2.3rem;
    }


    .article-insight blockquote {
        font-size:
            2.7rem;
    }


    .article-section-media-grid {
        gap:
            3rem;
    }


    .article-inline-image {
        height:
            27rem;
    }


    .article-closing h2 {
        font-size:
            3.4rem;
    }

}


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

@media (max-width: 60rem) {

    .article-hero-title {
        font-size:
            3.25rem;

        letter-spacing:
            -0.1rem;
    }


    .article-cover {
        padding-bottom:
            5rem;
    }


    .article-cover-image {
        height:
            29rem;
    }


    .article-section {
        padding:
            5rem
            0;
    }


    .article-section-grid {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }


    .article-section-heading {
        width:
            28rem;

        max-width:
            100%;
    }


    .article-section-copy {
        margin-left:
            auto;
    }


    .article-insight {
        padding:
            5rem
            5%;
    }


    .article-insight blockquote {
        font-size:
            2.4rem;
    }


    .article-section-media-grid {
        grid-template-columns:
            1fr;

        gap:
            3rem;
    }


    .article-inline-media {
        width:
            80%;
    }


    .article-section-media-grid
    .article-section-copy {
        width:
            70%;

        margin-left:
            auto;
    }


    .article-recommendation {
        grid-template-columns:
            3rem
            minmax(12rem, 0.8fr)
            minmax(16rem, 1fr);
    }


    .article-closing h2 {
        font-size:
            3rem;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 48rem) {

    .article-hero-inner {
        padding:
            5rem
            0
            4rem;
    }


    .article-hero-meta span {
        font-size:
            0.48rem;

        letter-spacing:
            0.08rem;
    }


    .article-hero-heading {
        padding-top:
            3rem;
    }


    .article-hero-eyebrow {
        font-size:
            0.5rem;
    }


    .article-hero-title {
        font-size:
            2.45rem;

        line-height:
            0.96;

        letter-spacing:
            -0.065rem;
    }


    .article-hero-intro {
        width: 100%;

        margin-top:
            2rem;
    }


    .article-hero-intro p {
        font-size:
            0.72rem;
    }


    .article-hero-bottom {
        margin-top:
            3rem;
    }


    .article-cover {
        padding-bottom:
            4rem;
    }


    .article-cover-image {
        height:
            23rem;
    }


    .article-cover-circle {
        width:
            5rem;

        height:
            5rem;

        top:
            -1.7rem;

        left:
            -1.5rem;
    }


    .article-cover-line {
        width:
            5rem;

        right:
            -1rem;
    }


    .article-cover-frame {
        width:
            3.5rem;

        height:
            3.5rem;

        right:
            1rem;

        bottom:
            -1.3rem;
    }


    .article-section {
        padding:
            4rem
            0;
    }


    .article-section-index {
        margin-bottom:
            2.5rem;
    }


    .article-section-heading h2,
    .article-section-subtitle {
        font-size:
            1.85rem;

        letter-spacing:
            -0.05rem;
    }


    .article-section-copy {
        max-width:
            100%;

        margin-left:
            0;
    }


    .article-section-copy p {
        font-size:
            0.78rem;

        line-height:
            1.65;
    }


    .article-insight {
        padding:
            4rem
            0;
    }


    .article-insight blockquote {
        font-size:
            1.95rem;

        letter-spacing:
            -0.055rem;
    }


    .article-insight-line {
        width:
            10rem;

        right:
            0;

        bottom:
            2rem;
    }


    .article-inline-media {
        width:
            100%;
    }


    .article-inline-image {
        height:
            23rem;
    }


    .article-section-media-grid
    .article-section-copy {
        width:
            100%;

        margin-left:
            0;
    }


    .article-mini-insight strong {
        font-size:
            1.35rem;
    }


    .article-recommendations {
        padding:
            4rem
            0;
    }


    .article-recommendations-heading h2 {
        font-size:
            2rem;

        letter-spacing:
            -0.055rem;
    }


    .article-recommendation {
        grid-template-columns:
            2.5rem
            1fr;

        gap:
            1rem;

        min-height:
            0;

        padding:
            1.5rem
            0;
    }


    .article-recommendation-number {
        align-self:
            start;

        font-size:
            1.4rem;
    }


    .article-recommendation h3 {
        font-size:
            0.95rem;
    }


    .article-recommendation p {
        grid-column:
            2;

        width: 100%;

        font-size:
            0.7rem;
    }


    .article-closing {
        padding:
            5rem
            0;
    }


    .article-closing h2 {
        font-size:
            2.4rem;

        letter-spacing:
            -0.07rem;
    }


    .article-closing p {
        width: 100%;

        margin:
            1.5rem
            0
            0;
    }


    .article-closing-cta {
        width: 100%;

        margin:
            2.5rem
            0
            0;
    }


    .article-footer {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1.5rem;

        padding-bottom:
            4rem;
    }


    .article-editorial-orbit-one {
        width:
            19rem;

        height:
            19rem;

        right:
            -13rem;
    }


    .article-editorial-orbit-two {
        width:
            12rem;

        height:
            12rem;

        left:
            -8rem;
    }


    .article-editorial-frame {
        width:
            4rem;

        height:
            4rem;

        right:
            5%;

        top:
            26rem;
    }

}


/* ============================================================
   MOBILE SMALL
============================================================ */

@media (max-width: 34rem) {

    .article-hero-title {
        font-size:
            2.05rem;

        letter-spacing:
            -0.05rem;
    }


    .article-cover-image {
        height:
            20rem;
    }


    .article-section-heading h2,
    .article-section-subtitle {
        font-size:
            1.65rem;
    }


    .article-insight blockquote {
        font-size:
            1.7rem;
    }


    .article-recommendations-heading h2 {
        font-size:
            1.75rem;
    }


    .article-closing h2 {
        font-size:
            2rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    [data-article-reveal] {
        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }


    .article-editorial-geometry {
        transform:
            none;
    }


    .article-recommendation,
    .article-closing-cta-line i,
    .article-closing-cta-arrow {
        transition:
            none;
    }

}

/* =========================================================
   ESTRATEGO · MASCOTA CTA
========================================================= */

.mascot-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 900;

    width: 21rem;
    height: 20rem;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;
    transform: translateX(110%);

    transition:
        transform 0.7s cubic-bezier(.22, 1, .36, 1),
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.mascot-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}


/* =========================================================
   PERSONAJE
========================================================= */

.mascot-cta__character {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;

    display: block;
    width: 16rem;
    height: auto;

    user-select: none;
    pointer-events: none;
}


/* =========================================================
   GLOBO · WRAPPER
========================================================= */

.mascot-cta__bubble {
    position: absolute;
    right: 13rem;
    bottom: 10rem;
    z-index: 3;

    width: 13rem;

    opacity: 0;
    transform: translateY(0.5rem) scale(0.96);

    transition:
        opacity 0.3s ease 0.22s,
        transform 0.45s cubic-bezier(.22, 1, .36, 1) 0.22s;
}

.mascot-cta.is-visible .mascot-cta__bubble {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* =========================================================
   GLOBO NEGRO
========================================================= */

.mascot-cta__bubble-inner {
    position: relative;
    width: 100%;

    padding: 0.95rem 1rem 0.9rem;
    border-radius: 1rem;

    background: #000;
    color: #fff;

    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.2);

    animation: mascotBubbleFloat 3s ease-in-out infinite;
}

.mascot-cta__bubble-inner::after {
    content: "";
    position: absolute;
    right: -0.4rem;
    bottom: 1.2rem;

    width: 0.9rem;
    height: 0.9rem;

    background: #000;
    transform: rotate(45deg);
}


/* =========================================================
   ANIMACIÓN DEL GLOBO
========================================================= */

@keyframes mascotBubbleFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.22rem);
    }
}


/* =========================================================
   TEXTO
========================================================= */

.mascot-cta__text {
    margin: 0 1rem 0.4rem 0;

    font-family: "Black", sans-serif;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: -0.04em;

    color: #fff;
}


/* =========================================================
   LINK
========================================================= */

.mascot-cta__link {
    display: inline-block;

    font-family: "Bold", sans-serif;
    font-size: 0.72rem;
    line-height: 1.25;

    color: #fff;
    text-decoration: none;
    opacity: 0.8;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.mascot-cta__link:hover {
    opacity: 1;
    transform: translateX(0.2rem);
}


/* =========================================================
   CERRAR
========================================================= */

.mascot-cta__close {
    position: absolute;
    top: 0.35rem;
    right: 0.55rem;
    z-index: 4;

    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;

    color: #fff;
    font-size: 0.95rem;
    line-height: 1;

    cursor: pointer;
    opacity: 0.6;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.mascot-cta__close:hover {
    opacity: 1;
    transform: rotate(90deg);
}


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

@media (max-width: 64rem) {
    .mascot-cta {
        width: 19rem;
        height: 18rem;
    }

    .mascot-cta__character {
        width: 14.5rem;
    }

    .mascot-cta__bubble {
        right: 9.3rem;
        bottom: 8.7rem;
        width: 10rem;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 48rem) {
    .mascot-cta {
        width: 16.5rem;
        height: 15.5rem;
    }

    .mascot-cta__character {
        width: 12.5rem;
    }

    .mascot-cta__bubble {
        right: 10rem;
        bottom: 14rem;
        width: 9.25rem;
    }

    .mascot-cta__text {
        font-size: 1.05rem;
    }

    .mascot-cta__link {
        font-size: 0.68rem;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .mascot-cta,
    .mascot-cta__bubble,
    .mascot-cta__bubble-inner,
    .mascot-cta__link,
    .mascot-cta__close {
        transition: none !important;
        animation: none !important;
    }
}