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

:root {
    --visual-white: #FFFFFF;
    --visual-black: #161513;
    --visual-soft-black: #1E1D1B;
    --visual-gray: #747474;
    --visual-light-gray: #F3F3F1;
    --visual-gold: #EAA736;
    --visual-border: rgba(22, 21, 19, 0.14);

    --visual-ease:
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================
   BASE
========================================= */

.visual-page {
    margin: 0;
    overflow-x: hidden;

    background-color:
        var(--visual-white);

    color:
        var(--visual-black);
}


.visual-container {
    width:
        min(1240px, 88%);

    margin:
        0 auto;
}


/* =========================================
   ENTRADA
========================================= */

.visual-page main,
.visual-page .footer {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 0.85s ease,
        transform 0.85s
        var(--visual-ease);
}


.visual-page.is-loading main,
.visual-page.is-loading .footer {
    opacity: 0;

    transform:
        translateY(18px);
}


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

.visual-hero {
    width: 100%;
    height:
        calc(
            100svh -
            var(--header-height)
        );

    min-height: 680px;

    position: relative;
    overflow: hidden;

    background-color:
        var(--visual-black);

    color:
        var(--visual-white);
}


.visual-hero-media,
.visual-hero-shade {
    position: absolute;
    inset: 0;
}


.visual-hero-image {
    width: 100%;
    height: 100%;

    display: block;

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

    filter:
        grayscale(20%)
        brightness(0.70)
        contrast(1.08);

    transform:
        scale(1.035);

    animation:
        visual-hero-zoom
        10s
        ease
        forwards;
}


@keyframes visual-hero-zoom {

    from {
        transform:
            scale(1.035);
    }

    to {
        transform:
            scale(1.09);
    }

}


.visual-hero-shade {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.80) 0%,
            rgba(0, 0, 0, 0.52) 45%,
            rgba(0, 0, 0, 0.18) 100%
        );
}


.visual-hero-content {
    width:
        min(760px, 78%);

    position: absolute;
    left: 7%;
    top: 50%;
    z-index: 2;

    transform:
        translateY(-50%);
}


.visual-eyebrow {
    margin:
        0
        0
        22px;

    color:
        var(--visual-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.visual-hero h1 {
    margin:
        0
        0
        27px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(64px, 10vw, 145px);

    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -5px;
    text-transform: uppercase;
}


.visual-hero h1 span {
    display: block;

    color:
        transparent;

    -webkit-text-stroke:
        1px
        rgba(255, 255, 255, 0.82);
}


.visual-hero-statement {
    max-width: 590px;

    margin:
        0
        0
        14px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(23px, 3vw, 38px);

    line-height: 1.2;
}


.visual-hero-description {
    max-width: 520px;

    margin:
        0
        0
        31px;

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

    font-size: 12px;
    line-height: 1.8;
}


.visual-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    position: relative;

    color:
        var(--visual-white);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-hero-link::after {
    content: "";

    width: calc(100% - 22px);
    height: 1px;

    position: absolute;
    left: 0;
    bottom: -8px;

    background-color:
        var(--visual-gold);
}


.visual-hero-index {
    position: absolute;
    right: 4%;
    bottom: 30px;
    z-index: 2;

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

    font-size: 9px;
    letter-spacing: 2px;
}


/* =========================================
   REVEAL
========================================= */

.reveal-section {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.85s ease,
        transform 0.85s
        var(--visual-ease);
}


.reveal-section.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   MANIFIESTO
========================================= */

.visual-manifesto {
    padding:
        115px
        0;

    position: relative;
    overflow: hidden;

    background-color:
        var(--visual-black);

    color:
        var(--visual-white);
}


.visual-manifesto-grid {
    display: grid;

    grid-template-columns:
        170px
        minmax(0, 1.4fr)
        minmax(300px, 0.6fr);

    align-items: start;
    gap: 55px;
}


.visual-section-intro {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* NÚMERO 01 */

.visual-section-number {
    color:
        var(--visual-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* RAYA DEBAJO DEL 01 */

.visual-section-rule {
    width: 52px;
    height: 3px;

    background-color:
        var(--visual-gold);
}


/* TEXTO "EL CONCEPTO" */

.visual-section-intro p {
    margin: 0;

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

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* FRASE GRANDE CENTRAL */

.visual-manifesto-title h2 {
    margin: 0;

    color:
        var(--visual-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5vw, 72px);

    font-weight: 400;
    line-height: 1.05;
}


/* BLOQUE DERECHO */

.visual-manifesto-copy {
    position: relative;

    padding-top: 7px;
}


/* PEQUEÑA RAYA DORADA SOBRE LOS PÁRRAFOS */

.visual-manifesto-copy::before {
    content: "";

    width: 34px;
    height: 2px;

    margin-bottom: 22px;

    display: block;

    background-color:
        var(--visual-gold);
}


/* PÁRRAFOS GENERALES */

.visual-manifesto-copy p {
    margin:
        0
        0
        18px;

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

    font-size: 13px;
    line-height: 1.85;
}


/* PRIMER PÁRRAFO MÁS DESTACADO */

.visual-manifesto-copy p:first-of-type {
    color:
        rgba(255, 255, 255, 0.82);
}


/* =========================================
   SISTEMA
========================================= */

.visual-system-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.visual-system-card {
    min-height: 430px;

    padding:
        70px
        8%;

    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

    z-index: 1;

    transition:
        transform 0.45s var(--visual-ease),
        box-shadow 0.45s ease;
}

@media (hover: hover) and (pointer: fine) {

    .visual-system-card.is-visible:hover {
        z-index: 10;

        transform:
            scale(1.055);

        box-shadow:
            0 22px 55px
            rgba(0, 0, 0, 0.20);
    }

}


.visual-system-card-light {
    background-color:
        var(--visual-white);

    color:
        var(--visual-black);
}


.visual-system-card-dark {
    background-color:
        var(--visual-black);

    color:
        var(--visual-white);
}


.visual-system-number {
    margin-bottom: 20px;

    color:
        var(--visual-gold);

    font-size: 12px;
    font-weight: 700;
}


.visual-system-accent {
    width: 52px;
    height: 3px;

    margin-bottom: 24px;

    display: block;

    background-color:
        var(--visual-gold);
}


.visual-system-card h2 {
    margin:
        0
        0
        27px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(37px, 5vw, 66px);

    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}


.visual-system-card p {
    max-width: 660px;

    margin: 0;

    color:
        var(--visual-gray);

    font-size: 12px;
    line-height: 1.75;
}


.visual-system-card-dark p {
    color:
        rgba(255, 255, 255, 0.66);
}


.visual-system-card-image > img,
.visual-system-card-image-light > img {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;
}


.visual-system-card-image > img {
    filter:
        grayscale(100%)
        brightness(0.43);
}


.visual-system-card-image-light > img {
    opacity: 0.09;

    filter:
        grayscale(100%);
}


.visual-system-card-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.87),
            rgba(0, 0, 0, 0.36)
        );
}


.visual-system-card-content {
    position: relative;
    z-index: 2;
}


/* =========================================
   CAPAS
========================================= */

.visual-layers {
    background-color:
        var(--visual-black);

    color:
        var(--visual-white);
}


.visual-layers-heading {
    width:
        min(1240px, 88%);

    margin:
        0 auto;

    padding:
        110px
        0
        65px;
}


.visual-layers-heading > p {
    margin:
        0
        0
        18px;

    color:
        var(--visual-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-layers-heading h2 {
    max-width: 900px;

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(43px, 6vw, 78px);

    font-weight: 400;
    line-height: 1.03;
}


.visual-layers-list {
    border-top:
        1px solid
        rgba(255, 255, 255, 0.16);
}


.visual-layer-item {
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.16);
}


.visual-layer-trigger {
    width: 88%;
    min-height: 110px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        70px
        minmax(190px, 0.6fr)
        minmax(300px, 1fr)
        40px;

    align-items: center;
    gap: 25px;

    border: 0;
    background: transparent;
    color: inherit;

    text-align: left;
    cursor: pointer;
}


.visual-layer-number {
    color:
        var(--visual-gold);

    font-size: 10px;
}


.visual-layer-name {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(22px, 2.5vw, 34px);
}


.visual-layer-summary {
    color:
        rgba(255, 255, 255, 0.52);

    font-size: 12px;
}


.visual-layer-symbol {
    justify-self: end;

    color:
        var(--visual-gold);

    font-size: 26px;
}


.visual-layer-panel {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows
        0.7s
        var(--visual-ease);
}


.visual-layer-item.is-open
.visual-layer-panel {
    grid-template-rows: 1fr;
}


.visual-layer-inner {
    min-height: 0;
    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(350px, 0.85fr);
}


.visual-layer-media {
    min-height: 0;
}


.visual-layer-media img {
    width: 100%;
    height: 520px;

    display: block;

    object-fit: cover;
}


.visual-layer-copy {
    padding:
        65px
        9%;

    background-color:
        var(--visual-soft-black);
}


.visual-layer-label {
    margin:
        0
        0
        17px;

    color:
        var(--visual-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-layer-copy h3 {
    margin:
        0
        0
        24px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(29px, 4vw, 48px);

    font-weight: 400;
    line-height: 1.08;
}


.visual-layer-copy > p:not(
    .visual-layer-label
) {
    margin:
        0
        0
        30px;

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

    font-size: 13px;
    line-height: 1.8;
}


.visual-layer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.visual-layer-tags span {
    padding:
        9px
        12px;

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

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

    font-size: 9px;
}


/* =========================================
   CASO INTERACTIVO
========================================= */

.visual-case {
    padding:
        110px
        0;

    overflow: hidden;

    background-color:
        var(--visual-white);
}


.visual-case-header {
    width:
        min(1240px, 88%);

    margin:
        0 auto
        60px;
}


.visual-case-header p {
    margin:
        0
        0
        15px;

    color:
        var(--visual-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-case-header h2 {
    max-width: 800px;

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(45px, 6vw, 82px);

    font-weight: 400;
    line-height: 1;
}


.visual-case-stage {
    position: relative;
}


.visual-case-track {
    width: 100%;

    display: grid;

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

    align-items: center;
    gap: 3%;
}


.visual-case-main,
.visual-case-side {
    overflow: hidden;
}


.visual-case-main {
    height: 590px;
}


.visual-case-side {
    height: 450px;

    opacity: 0.25;

    transform:
        scale(0.91);
}


.visual-case-main img,
.visual-case-side img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        opacity 0.4s ease,
        transform 0.7s
        var(--visual-ease);
}


.visual-case-arrow {
    width: 40px;
    height: 48px;

    position: absolute;
    top: 50%;
    z-index: 5;

    border: 0;

    background-color:
        var(--visual-black);

    color:
        var(--visual-white);

    font-size: 25px;

    cursor: pointer;

    transform:
        translateY(-50%);
}


.visual-case-arrow-left {
    left: 12px;
}


.visual-case-arrow-right {
    right: 12px;
}


.visual-case-info {
    width:
        min(760px, 88%);

    margin:
        35px auto
        0;

    text-align: center;
}


.visual-case-info > p:first-child {
    margin:
        0
        0
        10px;

    color:
        var(--visual-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-case-info h3 {
    margin:
        0
        0
        12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 4vw, 50px);

    font-weight: 400;
}


#visualCaseDescription {
    margin:
        0
        auto
        24px;

    color:
        var(--visual-gray);

    font-size: 12px;
    line-height: 1.7;
}


.visual-case-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}


.visual-case-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border:
        1px solid
        var(--visual-black);

    border-radius: 50%;

    background: transparent;

    cursor: pointer;
}


.visual-case-dot.is-active {
    background-color:
        var(--visual-gold);

    border-color:
        var(--visual-gold);
}


/* =========================================
   LABORATORIO DE FORMATOS
========================================= */

.visual-format-lab {
    width: 100%;

    padding:
        clamp(55px, 6vw, 85px)
        0
        clamp(65px, 7vw, 100px);

    overflow: hidden;

    background-color:
        var(--visual-bone);

    color:
        var(--visual-black);
}


.visual-format-lab-container {
    width:
        min(1380px, 88%);

    margin:
        0 auto;
}


/* =========================================
   ENCABEZADO
========================================= */

.visual-format-lab-heading {
    display: grid;

    grid-template-columns:
        180px
        minmax(0, 1fr)
        minmax(260px, 340px);

    align-items: start;

    gap:
        clamp(25px, 4vw, 60px);

    margin-bottom:
        clamp(38px, 4vw, 58px);
}


.visual-format-lab-eyebrow {
    margin:
        8px
        0
        0;

    color:
        var(--visual-gold);

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:
        0.19em;

    text-transform:
        uppercase;
}


.visual-format-lab-eyebrow::after {
    content: "";

    width: 48px;
    height: 2px;

    margin-top: 16px;

    display: block;

    background-color:
        var(--visual-gold);
}


.visual-format-lab-heading h2 {
    max-width: 800px;

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5vw, 72px);

    font-weight:
        400;

    line-height:
        0.96;

    letter-spacing:
        -0.045em;
}


.visual-format-lab-heading h2 span {
    color:
        var(--visual-gold);
}


.visual-format-lab-intro {
    max-width: 330px;

    margin:
        8px
        0
        0;

    color:
        rgba(22, 21, 19, 0.58);

    font-size:
        12px;

    line-height:
        1.8;
}


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

.visual-format-stage {
    min-height: 600px;

    position: relative;

    display: grid;

    grid-template-columns:
        1.65fr
        0.88fr
        0.88fr
        0.72fr;

    align-items: end;

    gap:
        clamp(18px, 2vw, 32px);

    padding:
        clamp(35px, 4vw, 60px);

    border-top:
        1px solid
        rgba(22, 21, 19, 0.16);

    border-bottom:
        1px solid
        rgba(22, 21, 19, 0.16);

    background-color:
        #ECECE9;
}


.visual-format-stage::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background-color:
        rgba(22, 21, 19, 0.08);

    pointer-events: none;
}


/* =========================================
   PIEZAS
========================================= */

.visual-format-piece {
    min-width: 0;

    position: relative;

    z-index: 1;

    transition:
        transform 0.55s var(--visual-ease),
        opacity 0.4s ease;
}


.visual-format-piece-media {
    width: 100%;

    position: relative;

    overflow: hidden;

    background-color:
        var(--visual-black);

    box-shadow:
        0 18px 45px
        rgba(22, 21, 19, 0.08);

    transition:
        box-shadow 0.55s ease;
}


.visual-format-piece-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        grayscale(100%)
        brightness(0.58)
        contrast(1.05);

    transform:
        scale(1.02);

    transition:
        transform 0.8s var(--visual-ease),
        filter 0.55s ease;
}


/* PROPORCIONES */

.visual-format-piece--wide
.visual-format-piece-media {
    aspect-ratio: 16 / 9;
}


.visual-format-piece--portrait
.visual-format-piece-media {
    aspect-ratio: 4 / 5;
}


.visual-format-piece--square
.visual-format-piece-media {
    aspect-ratio: 1 / 1;
}


.visual-format-piece--story
.visual-format-piece-media {
    aspect-ratio: 9 / 16;
}


/* PROPORCIÓN */

.visual-format-ratio {
    position: absolute;

    left: 16px;
    top: 16px;

    z-index: 2;

    padding:
        7px 9px;

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

    color:
        #FFFFFF;

    background-color:
        rgba(22, 21, 19, 0.28);

    backdrop-filter:
        blur(8px);

    font-size: 9px;

    font-weight: 700;

    letter-spacing:
        0.1em;
}


/* INFORMACIÓN */

.visual-format-piece-copy {
    padding-top:
        22px;
}


.visual-format-piece-copy > span {
    display: block;

    margin-bottom:
        10px;

    color:
        var(--visual-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.visual-format-piece-copy h3 {
    margin:
        0
        0
        10px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(22px, 2vw, 32px);

    font-weight:
        400;

    line-height:
        1.05;
}


.visual-format-piece-copy p {
    max-width:
        310px;

    margin:
        0;

    color:
        rgba(22, 21, 19, 0.55);

    font-size:
        10px;

    line-height:
        1.65;
}


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

@media (hover: hover) and (pointer: fine) {

    .visual-format-stage:hover
    .visual-format-piece {
        opacity:
            0.48;
    }


    .visual-format-stage
    .visual-format-piece:hover {
        z-index:
            8;

        opacity:
            1;

        transform:
            translateY(-12px)
            scale(1.035);
    }


    .visual-format-piece:hover
    .visual-format-piece-media {
        box-shadow:
            0
            28px
            65px
            rgba(22, 21, 19, 0.22);
    }


    .visual-format-piece:hover
    .visual-format-piece-media img {
        filter:
            grayscale(0%)
            brightness(0.82)
            contrast(1.03)
            saturate(1.03);

        transform:
            scale(1.075);
    }

}


/* =========================================
   PIE INFERIOR
========================================= */

.visual-format-footer {
    margin-top:
        35px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        25px;
}


.visual-format-footer > span {
    color:
        rgba(22, 21, 19, 0.52);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.visual-format-footer-line {
    height:
        1px;

    position:
        relative;

    background-color:
        rgba(22, 21, 19, 0.15);
}


.visual-format-footer-line::after {
    content: "";

    width:
        16%;

    height:
        2px;

    position:
        absolute;

    left:
        0;

    top:
        50%;

    background-color:
        var(--visual-gold);

    transform:
        translateY(-50%);
}


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

@media (max-width: 1000px) {

    .visual-format-lab-heading {
        grid-template-columns:
            150px
            1fr;
    }


    .visual-format-lab-intro {
        grid-column:
            2;
    }


    .visual-format-stage {
        min-height:
            0;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        align-items:
            start;
    }

}


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

@media (max-width: 700px) {

    .visual-format-lab {
        padding:
            70px
            0;
    }


    .visual-format-lab-heading {
        display:
            block;

        margin-bottom:
            45px;
    }


    .visual-format-lab-eyebrow {
        margin-bottom:
            26px;
    }


    .visual-format-lab-heading h2 {
        font-size:
            clamp(43px, 13vw, 64px);
    }


    .visual-format-lab-intro {
        margin-top:
            25px;
    }


    .visual-format-stage {
        display:
            flex;

        gap:
            14px;

        padding:
            28px
            7%;

        overflow-x:
            auto;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;
    }


    .visual-format-stage::-webkit-scrollbar {
        display:
            none;
    }


    .visual-format-piece {
        width:
            76vw;

        min-width:
            76vw;

        scroll-snap-align:
            center;
    }


    .visual-format-footer {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }

}

/* =========================================
   MÉTODO
========================================= */

.visual-method {
    min-height: 780px;

    position: relative;
    overflow: hidden;

    background-color:
        var(--visual-black);

    color:
        var(--visual-white);
}


.visual-method-background,
.visual-method-overlay {
    position: absolute;
    inset: 0;
}


.visual-method-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        grayscale(100%)
        brightness(0.45);
}


.visual-method-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.93),
            rgba(0, 0, 0, 0.50)
        );
}


.visual-method-content {
    width:
        min(1240px, 88%);

    min-height: 780px;

    margin:
        0 auto;

    padding:
        100px
        0;

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.visual-method-heading {
    max-width: 760px;

    margin-bottom: 70px;
}


.visual-method-heading p {
    margin:
        0
        0
        17px;

    color:
        var(--visual-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-method-heading h2 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(45px, 6vw, 80px);

    font-weight: 400;
    line-height: 1;
}


.visual-method-list {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(255, 255, 255, 0.22);
}


.visual-method-step {
    min-height: 220px;

    padding:
        30px
        22px;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.18);
}


.visual-method-step span {
    color:
        var(--visual-gold);

    font-size: 9px;
}


.visual-method-step h3 {
    margin:
        28px
        0
        13px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;
    font-weight: 400;
}


.visual-method-step p {
    margin: 0;

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

    font-size: 11px;
    line-height: 1.65;
}


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

.visual-projects {
    padding:
        110px
        0
        0;

    background-color:
        var(--visual-white);
}


.visual-projects-heading {
    width:
        min(1240px, 88%);

    margin:
        0 auto
        60px;
}


.visual-projects-heading p {
    margin:
        0
        0
        16px;

    color:
        var(--visual-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-projects-heading h2 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(46px, 6vw, 82px);

    font-weight: 400;
}


.visual-projects-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.visual-project-card {
    height: 650px;

    position: relative;
    overflow: hidden;

    color:
        var(--visual-white);
}


.visual-project-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.85s
        var(--visual-ease);
}


.visual-project-card:hover img {
    transform:
        scale(1.05);
}


.visual-project-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.10),
            rgba(0, 0, 0, 0.77)
        );
}


.visual-project-info {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 33px;
}


.visual-project-info span {
    color:
        var(--visual-gold);

    font-size: 9px;
}


.visual-project-info p {
    margin:
        14px
        0
        9px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-project-info h3 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(28px, 3vw, 42px);

    font-weight: 400;
}


/* =========================================
   LABORATORIO
========================================= */

.visual-lab {
    padding:
        110px
        0;

    background-color:
        var(--visual-black);

    color:
        var(--visual-white);
}


.visual-lab-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, 0.6fr);

    align-items: end;
    gap: 70px;

    margin-bottom: 70px;
}


.visual-lab-heading > div > p {
    margin:
        0
        0
        16px;

    color:
        var(--visual-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-lab-heading h2 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(45px, 6vw, 78px);

    font-weight: 400;
    line-height: 1;
}


.visual-lab-heading > p {
    margin: 0;

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

    font-size: 12px;
    line-height: 1.75;
}


.visual-lab-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 25px;
}


.visual-lab-card {
    min-height: 360px;

    padding:
        40px
        32px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);
}


.visual-lab-card > span {
    color:
        var(--visual-gold);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-lab-card h3 {
    margin:
        27px
        0
        24px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(29px, 3vw, 42px);

    font-weight: 400;
    line-height: 1.12;
}


.visual-lab-card p {
    margin:
        0
        0
        auto;

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

    font-size: 11px;
    line-height: 1.7;
}


.visual-lab-progress {
    height: 1px;

    margin-top: 38px;

    background-color:
        rgba(255, 255, 255, 0.22);
}


.visual-lab-progress span {
    height: 100%;

    display: block;

    background-color:
        var(--visual-gold);

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform
        1.2s
        var(--visual-ease);
}


.visual-lab-card.is-visible
.visual-lab-progress span {
    transform:
        scaleX(1);
}


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

.visual-cta {
    padding:
        130px
        6%;

    background-color:
        var(--visual-light-gray);

    text-align: center;
}


.visual-cta-content {
    max-width: 970px;

    margin:
        0 auto;
}


.visual-cta-content > p:first-child {
    margin:
        0
        0
        20px;

    color:
        var(--visual-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.visual-cta h2 {
    margin:
        0
        0
        27px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(48px, 7vw, 91px);

    font-weight: 400;
    line-height: 0.98;
}


.visual-cta-description {
    max-width: 600px;

    margin:
        0 auto
        35px;

    color:
        var(--visual-gray);

    font-size: 13px;
    line-height: 1.75;
}


.visual-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}


.visual-cta-actions a {
    min-width: 195px;

    padding:
        15px
        24px;

    border:
        1px solid
        var(--visual-black);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

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


.visual-cta-actions a:first-child {
    background-color:
        var(--visual-black);

    color:
        var(--visual-white);
}


.visual-cta-actions a:hover {
    background-color:
        var(--visual-gold);

    border-color:
        var(--visual-gold);

    color:
        var(--visual-black);
}


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

.visual-page .footer {
    background-color:
        var(--visual-black);
}


.visual-page .footer-container {
    width:
        min(1200px, 90%);

    min-height: 74px;

    margin:
        0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.visual-page .footer-logo-image {
    width: auto;
    height: 20px;

    display: block;
}


.visual-page .footer-copy {
    margin: 0;

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

    font-size: 9px;
}


.visual-page .footer-social {
    display: flex;
    align-items: center;
    gap: 22px;
}


.visual-page .footer-social a {
    width: 22px;
    height: 22px;

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

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


.visual-page .footer-social svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.visual-page
.footer-social
.tiktok-icon {
    fill: currentColor;
    stroke: none;
}


/* =========================================
   WHATSAPP
========================================= */

.floating-whatsapp {
    width: 58px;
    height: 58px;

    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 19000;

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

    background-color:
        var(--visual-black);

    color:
        var(--visual-gold);

    box-shadow:
        0
        12px
        35px
        rgba(0, 0, 0, 0.27);

    opacity: 0;

    transform:
        translateY(18px)
        scale(0.92);

    animation:
        visual-whatsapp-entry
        0.75s
        var(--visual-ease)
        0.8s
        forwards;
}


@keyframes visual-whatsapp-entry {

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


.floating-whatsapp svg {
    width: 34px;
    height: 34px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.floating-whatsapp:hover {
    background-color:
        var(--visual-white);
}


.floating-whatsapp-tooltip {
    min-width: max-content;

    padding:
        8px
        11px;

    position: absolute;
    right:
        calc(100% + 12px);

    background-color:
        var(--visual-black);

    color:
        var(--visual-white);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(7px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


.floating-whatsapp:hover
.floating-whatsapp-tooltip {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(0);
}


/* =========================================
   MENÚ MÓVIL
========================================= */

@media (max-width: 1000px) {

    .visual-page
    .mobile-menu {
        width: 100vw;

        min-height:
            calc(
                100svh -
                var(--header-height)
            );

        padding:
            52px
            8%
            60px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        position: fixed;
        top:
            var(--header-height);
        left: 0;
        z-index: 10000;

        background-color:
            rgba(255, 255, 255, 0.98);

        opacity: 0;
        visibility: hidden;

        transform:
            translateY(-14px);

        transition:
            opacity 0.35s ease,
            visibility 0.35s ease,
            transform 0.35s
            var(--visual-ease);
    }


    .visual-page
    .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;

        transform:
            translateY(0);
    }


    .visual-page
    .mobile-menu a {
        width:
            min(420px, 100%);

        padding:
            20px
            0;

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

        color:
            var(--visual-black);

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 19px;
        text-align: center;
        text-transform: none;
    }


    .visual-page
    .mobile-menu
    .nav-active {
        color:
            var(--visual-gold);
    }


    .visual-page
    .mobile-menu
    .nav-active::after {
        display: none;
    }

}


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

@media (max-width: 950px) {

    .visual-manifesto-grid {
        grid-template-columns:
            120px
            1fr;

        gap: 40px;
    }


    .visual-manifesto-copy {
        grid-column: 2;
    }


    .visual-layer-trigger {
        grid-template-columns:
            45px
            1fr
            35px;
    }


    .visual-layer-summary {
        display: none;
    }


    .visual-layer-inner {
        grid-template-columns:
            1fr;
    }


    .visual-layer-media img {
        height: 500px;
    }


    .visual-formats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .visual-method-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .visual-method-step {
        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.18);
    }


    .visual-lab-heading {
        grid-template-columns:
            1fr;

        gap: 30px;
    }

}


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

@media (max-width: 700px) {

    .visual-hero {
        min-height: 720px;
    }


    .visual-hero-shade {
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.26),
                rgba(0, 0, 0, 0.92)
            );
    }


    .visual-hero-content {
        width: 86%;

        left: 7%;
        top: auto;
        bottom: 65px;

        transform: none;
    }


    .visual-hero h1 {
        font-size:
            clamp(57px, 18vw, 90px);

        letter-spacing: -3px;
    }


    .visual-hero-statement {
        font-size: 25px;
    }


    .visual-manifesto {
        padding:
            80px
            0;
    }


    .visual-manifesto-grid {
        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .visual-manifesto-copy {
        grid-column: auto;
    }


    .visual-system-grid {
        grid-template-columns:
            1fr;
    }


    .visual-system-card {
        min-height: 400px;

        padding:
            60px
            8%;
    }


    .visual-layers-heading {
        padding:
            80px
            0
            50px;
    }


    .visual-layer-trigger {
        width: 90%;
        min-height: 94px;

        grid-template-columns:
            35px
            1fr
            28px;

        gap: 10px;
    }


    .visual-layer-name {
        font-size: 22px;
    }


    .visual-layer-media img {
        height: 380px;
    }


    .visual-layer-copy {
        padding:
            45px
            7%;
    }


    .visual-case {
        padding:
            80px
            0;
    }


    .visual-case-track {
        grid-template-columns:
            12%
            76%
            12%;

        gap: 2%;
    }


    .visual-case-main {
        height: 500px;
    }


    .visual-case-side {
        height: 380px;
    }


    .visual-formats {
        padding:
            80px
            0;
    }


    .visual-formats-heading {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .visual-formats-grid {
        grid-template-columns:
            1fr;
    }


    .visual-method-content {
        padding:
            80px
            0;
    }


    .visual-method-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .visual-projects {
        padding-top: 80px;
    }


    .visual-projects-grid {
        grid-template-columns:
            1fr;
    }


    .visual-project-card {
        height: 540px;
    }


    .visual-lab {
        padding:
            80px
            0;
    }


    .visual-lab-grid {
        grid-template-columns:
            1fr;
    }


    .visual-cta {
        padding:
            90px
            6%;
    }


    .visual-cta-actions {
        flex-direction: column;
    }


    .visual-cta-actions a {
        width: 100%;
    }


    .visual-page
    .footer-container {
        min-height: 215px;

        padding:
            42px
            0;

        flex-direction: column;
        justify-content: center;
        gap: 25px;

        text-align: center;
    }


    .floating-whatsapp {
        width: 52px;
        height: 52px;

        right: 16px;

        bottom:
            calc(
                16px +
                env(safe-area-inset-bottom)
            );
    }


    .floating-whatsapp svg {
        width: 30px;
        height: 30px;
    }


    .floating-whatsapp-tooltip {
        display: none;
    }

}


/* =========================================
   TELÉFONOS PEQUEÑOS
========================================= */

@media (max-width: 390px) {

    .visual-method-list {
        grid-template-columns:
            1fr;
    }


    .visual-case-main {
        height: 440px;
    }


    .floating-whatsapp {
        width: 49px;
        height: 49px;

        right: 13px;
        bottom: 13px;
    }

}


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

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

    .visual-page main,
    .visual-page .footer,
    .reveal-section,
    .visual-hero-image,
    .floating-whatsapp {
        opacity: 1;

        transform: none;

        animation: none;
        transition: none;
    }

}


/* =========================================
   HERO EDITORIAL DINÁMICO
========================================= */

.visual-page .visual-hero {
    height:
        calc(
            100svh -
            var(--header-height)
        );

    min-height: 700px;
    max-height: 940px;

    isolation: isolate;
}


.visual-hero-media {
    overflow: hidden;
}


.visual-hero-slide {
    margin: 0;

    position: absolute;
    inset: 0;

    opacity: 0;

    clip-path:
        inset(
            0
            7%
            0
            7%
        );

    transition:
        opacity 0.75s ease,
        clip-path 1.05s
        var(--visual-ease);
}


.visual-hero-slide.is-active {
    opacity: 1;

    clip-path:
        inset(0);
}


.visual-hero-slide
.visual-hero-image {
    filter:
        saturate(0.84)
        brightness(0.72)
        contrast(1.05);

    transform:
        scale(1.065);

    animation: none;

    transition:
        transform 7s ease,
        filter 0.75s ease;
}


.visual-hero-slide.is-active
.visual-hero-image {
    transform:
        scale(1);
}


.visual-page
.visual-hero-shade {
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(22, 21, 19, 0.91) 0%,
            rgba(22, 21, 19, 0.70) 34%,
            rgba(22, 21, 19, 0.25) 72%,
            rgba(22, 21, 19, 0.17) 100%
        ),
        linear-gradient(
            0deg,
            rgba(22, 21, 19, 0.67) 0%,
            transparent 42%
        );
}


.visual-hero-layout {
    width:
        min(1500px, 88%);

    height:
        calc(100% - 112px);

    margin:
        0 auto;

    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 330px);

    align-items: center;
    gap:
        clamp(48px, 7vw, 120px);
}


.visual-page
.visual-hero-content {
    width: auto;
    max-width: 760px;

    position: relative;
    top: auto;
    left: auto;

    transform: none;
}


.visual-page
.visual-eyebrow {
    margin:
        0
        0
        21px;

    display: flex;
    align-items: center;
    gap: 14px;

    color:
        var(--visual-white);

    font-size: 8px;
    letter-spacing: 2.2px;
}


.visual-eyebrow::before {
    content: "";

    width: 38px;
    height: 2px;

    background-color:
        var(--visual-gold);
}


.visual-eyebrow span {
    color:
        var(--visual-gold);
}


.visual-page
.visual-hero h1 {
    max-width: 9ch;

    margin:
        0
        0
        26px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(68px, 7.7vw, 126px);

    font-weight: 900;
    line-height: 0.78;
    letter-spacing:
        clamp(-6px, -0.3vw, -3px);
    text-transform: uppercase;
}


.visual-page
.visual-hero h1 span {
    display: block;

    margin-top: 16px;

    color:
        var(--visual-gold);

    -webkit-text-stroke: 0;
}


.visual-page
.visual-hero-statement {
    max-width: 550px;

    margin:
        0
        0
        10px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(18px, 1.7vw, 27px);

    font-weight: 700;
    line-height: 1.15;
}


.visual-page
.visual-hero-description {
    max-width: 480px;

    margin:
        0
        0
        27px;

    font-size: 11px;
    line-height: 1.65;
}


.visual-page
.visual-hero-link {
    min-width: 184px;

    padding:
        14px
        17px;

    justify-content: space-between;

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

    background-color:
        rgba(22, 21, 19, 0.24);
}


.visual-page
.visual-hero-link::after {
    display: none;
}


.visual-page
.visual-hero-link:hover,
.visual-page
.visual-hero-link:focus-visible {
    border-color:
        var(--visual-gold);

    background-color:
        var(--visual-gold);

    color:
        var(--visual-black);
}


.visual-hero-detail {
    align-self: end;

    margin-bottom:
        clamp(66px, 8vh, 110px);

    padding:
        20px
        0
        20px
        24px;

    border-left:
        2px solid
        var(--visual-gold);

    background:
        linear-gradient(
            90deg,
            rgba(22, 21, 19, 0.52),
            transparent
        );
}


.visual-hero-detail p {
    margin:
        0
        0
        10px;

    color:
        var(--visual-gold);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}


.visual-hero-detail strong {
    max-width: 15ch;

    display: block;

    margin-bottom: 12px;

    color:
        var(--visual-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(24px, 2.1vw, 34px);

    font-weight: 400;
    line-height: 1.05;
}


.visual-hero-detail > span {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 8px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}


.visual-hero-controls {
    min-height: 112px;

    padding:
        0
        6%;

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;

    display: grid;
    grid-template-columns:
        86px
        minmax(100px, 0.38fr)
        minmax(220px, 1fr)
        auto;

    align-items: center;
    gap:
        clamp(18px, 3vw, 48px);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.16);

    background-color:
        rgba(22, 21, 19, 0.94);

    backdrop-filter:
        blur(12px);
}


.visual-hero-counter {
    display: flex;
    align-items: baseline;
    gap: 7px;
}


.visual-hero-counter strong {
    color:
        var(--visual-gold);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 24px;
    font-weight: 900;
}


.visual-hero-counter span {
    color:
        rgba(255, 255, 255, 0.45);

    font-size: 9px;
    letter-spacing: 1px;
}


.visual-hero-progress {
    height: 1px;

    overflow: hidden;

    background-color:
        rgba(255, 255, 255, 0.20);
}


.visual-hero-progress span {
    width: 100%;
    height: 100%;

    display: block;

    background-color:
        var(--visual-gold);

    transform-origin: left;
}


.visual-hero-progress span.is-running {
    animation:
        visual-hero-progress
        6.5s
        linear
        forwards;
}


@keyframes visual-hero-progress {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


.visual-hero-controls > p {
    margin: 0;

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

    font-size: 9px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}


.visual-hero-arrows {
    display: flex;
    gap: 9px;
}


.visual-hero-arrows button {
    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    background: transparent;
    color:
        var(--visual-white);

    font-size: 16px;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s
        var(--visual-ease);
}


.visual-hero-arrows button:hover,
.visual-hero-arrows button:focus-visible {
    border-color:
        var(--visual-gold);

    background-color:
        var(--visual-gold);

    color:
        var(--visual-black);

    transform:
        scale(1.06);
}


.visual-hero-arrows button:focus-visible {
    outline:
        2px solid
        var(--visual-gold);
    outline-offset:
        3px;
}


@media (max-width: 1000px) {

    .visual-hero-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 270px);

        gap: 36px;
    }


    .visual-page
    .visual-hero h1 {
        font-size:
            clamp(62px, 9vw, 92px);
    }


    .visual-hero-controls {
        grid-template-columns:
            70px
            minmax(80px, 0.35fr)
            1fr
            auto;
    }

}


@media (max-width: 700px) {

    .visual-page .visual-hero {
        height:
            calc(
                100svh -
                var(--header-height)
            );

        min-height: 720px;
        max-height: none;
    }


    .visual-page
    .visual-hero-shade {
        background:
            linear-gradient(
                0deg,
                rgba(22, 21, 19, 0.94) 0%,
                rgba(22, 21, 19, 0.62) 48%,
                rgba(22, 21, 19, 0.20) 100%
            );
    }


    .visual-hero-slide
    .visual-hero-image {
        object-position: 55% center;
    }


    .visual-hero-layout {
        width: 90%;
        height: 100%;

        display: flex;
        align-items: flex-end;

        padding-bottom: 116px;
    }


    .visual-page
    .visual-hero-content {
        width: 100%;

        padding-bottom: 24px;
    }


    .visual-page
    .visual-eyebrow {
        margin-bottom: 14px;

        font-size: 7px;
        letter-spacing: 1.5px;
    }


    .visual-eyebrow::before {
        width: 28px;
    }


    .visual-page
    .visual-hero h1 {
        margin-bottom: 20px;

        font-size:
            clamp(50px, 15vw, 76px);

        line-height: 0.81;
        letter-spacing: -3px;
    }


    .visual-page
    .visual-hero h1 span {
        margin-top: 10px;
    }


    .visual-page
    .visual-hero-statement {
        max-width: 25ch;

        font-size: 18px;
    }


    .visual-page
    .visual-hero-description {
        max-width: 36ch;

        margin-bottom: 20px;

        font-size: 10px;
        line-height: 1.55;
    }


    .visual-page
    .visual-hero-link {
        min-width: 166px;

        padding:
            12px
            14px;
    }


    .visual-hero-detail {
        display: none;
    }


    .visual-hero-controls {
        min-height: 92px;

        padding:
            0
            5%;

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

        gap: 13px;
    }


    .visual-hero-counter strong {
        font-size: 18px;
    }


    .visual-hero-controls > p {
        display: none;
    }


    .visual-hero-arrows {
        gap: 6px;
    }


    .visual-hero-arrows button {
        width: 38px;
        height: 38px;

        font-size: 14px;
    }

}


@media (max-width: 390px) {

    .visual-page
    .visual-hero h1 {
        font-size:
            clamp(47px, 14.5vw, 60px);
    }


    .visual-page
    .visual-hero-statement {
        font-size: 16px;
    }

}


/* ESCALA DE REFERENCIA: RETRATOS */

.visual-page .visual-hero-content {
    max-width: 980px;
}

.visual-page .visual-eyebrow {
    margin-bottom: 18px;
    gap: 14px;
    font-size: 8px;
    letter-spacing: 2px;
}

.visual-eyebrow::before {
    width: 40px;
    height: 1px;
}

.visual-page .visual-hero h1 {
    margin-bottom: 22px;
    font-size: clamp(66px, 10.2vw, 156px);
    line-height: 0.78;
    letter-spacing: -7px;
}

.visual-page .visual-hero h1 span {
    margin-top: 13px;
}

.visual-page .visual-hero-statement {
    max-width: 620px;
    margin-bottom: 10px;
    font-size: clamp(24px, 3.3vw, 54px);
    line-height: 0.96;
}

.visual-page .visual-hero-description {
    max-width: 520px;
    margin-bottom: 26px;
    font-size: 11px;
    line-height: 1.72;
}

.visual-page .visual-hero-link {
    min-width: 210px;
    min-height: 46px;
    padding: 0 17px;
    font-size: 7px;
    letter-spacing: 1.4px;
}

.visual-hero-detail {
    max-width: 320px;
    padding: 18px 0 18px 22px;
}

.visual-hero-detail p {
    margin-bottom: 10px;
    font-size: 8px;
    letter-spacing: 2px;
}

.visual-hero-detail strong {
    margin-bottom: 12px;
    font-size: clamp(24px, 2.2vw, 36px);
    line-height: 1.05;
}

.visual-hero-detail > span {
    font-size: 8px;
    letter-spacing: 1.1px;
}

.visual-hero-counter strong {
    font-size: 24px;
}

.visual-hero-counter span {
    font-size: 9px;
}

.visual-hero-controls > p {
    font-size: 9px;
    letter-spacing: 1.1px;
}


@media (max-width: 1000px) {

    .visual-page .visual-hero h1 {
        font-size: clamp(60px, 9vw, 110px);
    }

    .visual-page .visual-hero-statement {
        font-size: clamp(22px, 3.5vw, 42px);
    }

}


@media (max-width: 700px) {

    .visual-page .visual-hero-content {
        max-width: 560px;
    }

    .visual-page .visual-eyebrow {
        margin-bottom: 16px;
        font-size: 7px;
        letter-spacing: 1.4px;
    }

    .visual-page .visual-hero h1 {
        margin-bottom: 18px;
        font-size: clamp(50px, 18vw, 76px);
        letter-spacing: -3.8px;
    }

    .visual-page .visual-hero h1 span {
        margin-top: 9px;
    }

    .visual-page .visual-hero-statement {
        max-width: 420px;
        font-size: clamp(24px, 8.5vw, 36px);
    }

    .visual-page .visual-hero-description {
        max-width: 92%;
        margin-bottom: 22px;
        font-size: 10px;
    }

    .visual-page .visual-hero-link {
        min-width: 210px;
        min-height: 46px;
        padding: 0 17px;
        font-size: 7px;
    }

    .visual-hero-counter strong {
        font-size: 18px;
    }

}


@media (max-width: 390px) {

    .visual-page .visual-hero h1 {
        font-size: clamp(50px, 18vw, 68px);
    }

    .visual-page .visual-hero-statement {
        font-size: clamp(22px, 8vw, 32px);
    }

}


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

    .visual-hero-slide,
    .visual-hero-slide
    .visual-hero-image {
        transition: none;
    }


    .visual-hero-progress span {
        animation: none;
        transform: none;
    }

}


/* =========================================
   NAVEGACIÓN Y MOVIMIENTO REFINADOS
========================================= */

html {
    scroll-behavior: smooth;
    scroll-padding-top:
        calc(
            var(--header-height) +
            18px
        );
}


.visual-page.visual-menu-open {
    overflow: hidden;
}


.visual-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20000;

    padding:
        11px
        15px;

    background-color:
        var(--visual-black);

    color:
        var(--visual-white);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    transform:
        translateY(-150%);

    transition:
        transform
        0.25s
        var(--visual-ease);
}


.visual-skip-link:focus {
    transform:
        translateY(0);
}


.visual-hero-link,
.visual-layer-trigger,
.visual-case-arrow,
.visual-project-card,
.visual-page .menu-button {
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        opacity 0.25s ease,
        transform 0.45s
        var(--visual-ease);
}


.visual-hero-link:hover,
.visual-hero-link:focus-visible {
    color:
        var(--visual-gold);
}


.visual-hero-link:hover span,
.visual-hero-link:focus-visible span {
    transform:
        translateY(4px);
}


.visual-hero-link span {
    transition:
        transform 0.25s
        var(--visual-ease);
}


.visual-layer-trigger:hover,
.visual-layer-trigger:focus-visible {
    background-color:
        rgba(255, 255, 255, 0.045);
}


.visual-layer-trigger:hover
.visual-layer-name,
.visual-layer-trigger:focus-visible
.visual-layer-name {
    color:
        var(--visual-gold);
}


.visual-layer-name {
    transition:
        color 0.25s ease;
}


.visual-layer-panel {
    visibility: hidden;

    transition:
        grid-template-rows
        0.7s
        var(--visual-ease),
        visibility 0s 0.7s;
}


.visual-layer-item.is-open
.visual-layer-panel {
    visibility: visible;

    transition:
        grid-template-rows
        0.7s
        var(--visual-ease),
        visibility 0s;
}


.visual-case-stage {
    touch-action: pan-y;
}


.visual-case-stage:focus-visible {
    outline:
        2px solid
        var(--visual-gold);
    outline-offset:
        5px;
}


.visual-case-main,
.visual-case-side {
    transition:
        opacity 0.34s ease,
        transform 0.56s
        var(--visual-ease);
}


.visual-case-track.is-changing
.visual-case-main {
    opacity: 0.16;

    transform:
        scale(0.88);
}


.visual-case-track.is-changing.is-next
.visual-case-main {
    transform:
        translateX(-3%)
        scale(0.88);
}


.visual-case-track.is-changing.is-previous
.visual-case-main {
    transform:
        translateX(3%)
        scale(0.88);
}


.visual-case-track.is-changing
.visual-case-side {
    opacity: 0.08;
}


.visual-case-arrow:hover,
.visual-case-arrow:focus-visible {
    background-color:
        var(--visual-gold);

    color:
        var(--visual-black);

    transform:
        translateY(-50%)
        scale(1.06);
}


.visual-case-dot {
    width: 28px;
    height: 24px;

    position: relative;

    border: 0;
    border-radius: 0;
    background: transparent;
}


.visual-case-dot::after {
    content: "";

    width: 7px;
    height: 7px;

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

    border:
        1px solid
        var(--visual-black);
    border-radius: 50%;

    background: transparent;

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

    transition:
        width 0.25s
        var(--visual-ease),
        background-color 0.25s ease,
        border-color 0.25s ease;
}


.visual-case-dot.is-active {
    background: transparent;
}


.visual-case-dot.is-active::after {
    width: 18px;

    border-radius: 8px;
    border-color:
        var(--visual-gold);
    background-color:
        var(--visual-gold);
}


.visual-case-dot:focus-visible {
    outline:
        2px solid
        var(--visual-gold);
    outline-offset:
        1px;
}


.visual-project-card:focus-visible {
    outline:
        3px solid
        var(--visual-gold);
    outline-offset:
        -3px;
}


.visual-layer-trigger:focus-visible,
.visual-case-arrow:focus-visible,
.visual-hero-link:focus-visible,
.visual-page .menu-button:focus-visible,
.floating-whatsapp:focus-visible {
    outline:
        2px solid
        var(--visual-gold);
    outline-offset:
        4px;
}


/* =========================================
   CTA COMPACTO DE WHATSAPP
========================================= */

.visual-page .visual-cta {
    min-height: 0;
    padding:
        clamp(38px, 4vw, 58px)
        0;

    display: block;

    background-color:
        var(--visual-white);

    color:
        var(--visual-black);

    text-align: left;
}


.visual-cta__inner {
    width:
        min(1240px, 88%);

    margin:
        0 auto;

    padding:
        18px
        0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(330px, 430px);

    align-items: center;

    gap:
        clamp(34px, 6vw, 92px);

    border-top:
        3px solid
        var(--visual-gold);

    border-bottom:
        1px solid
        var(--visual-border);
}


.visual-cta__copy {
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(150px, 0.34fr)
        minmax(260px, 1fr);

    align-items: start;

    column-gap:
        clamp(22px, 3vw, 48px);
}


.visual-cta__eyebrow {
    margin:
        3px
        0
        0;

    color:
        rgba(22, 21, 19, 0.58);

    font-size: 8px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.65px;
    text-transform: uppercase;
}


.visual-cta__copy h2 {
    max-width: 20ch;

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(25px, 2.6vw, 43px);

    font-weight: 900;
    line-height: 0.93;
    letter-spacing: -1.5px;
    text-transform: uppercase;
}


.visual-cta__copy h2 span {
    display: block;

    color:
        var(--visual-gold);
}


.visual-cta__description {
    grid-column:
        1 / -1;

    margin:
        13px
        0
        0;

    color:
        rgba(22, 21, 19, 0.62);

    font-size: 10px;
    line-height: 1.55;
}


.visual-cta__link {
    min-height: 82px;

    padding:
        15px
        22px;

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

    align-items: center;
    gap: 22px;

    border:
        1px solid
        var(--visual-black);

    background-color:
        var(--visual-black);

    color:
        var(--visual-white);

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s
        var(--visual-ease);
}


.visual-cta__link-copy {
    display: grid;
    gap: 2px;
}


.visual-cta__link-copy small {
    color:
        var(--visual-gold);

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}


.visual-cta__link-copy strong {
    font-size: 12px;
    line-height: 1.25;
}


.visual-cta__link-copy > span {
    color:
        rgba(255, 255, 255, 0.72);

    font-size: 9px;
    letter-spacing: 0.35px;
}


.visual-cta__arrow {
    color:
        var(--visual-gold);

    font-size: 22px;
    line-height: 1;

    transition:
        color 0.25s ease,
        transform 0.25s
        var(--visual-ease);
}


.visual-cta__link:hover,
.visual-cta__link:focus-visible {
    border-color:
        var(--visual-gold);

    background-color:
        var(--visual-gold);

    color:
        var(--visual-black);

    transform:
        translateY(-2px);
}


.visual-cta__link:hover
.visual-cta__link-copy small,
.visual-cta__link:hover
.visual-cta__link-copy > span,
.visual-cta__link:hover
.visual-cta__arrow,
.visual-cta__link:focus-visible
.visual-cta__link-copy small,
.visual-cta__link:focus-visible
.visual-cta__link-copy > span,
.visual-cta__link:focus-visible
.visual-cta__arrow {
    color:
        var(--visual-black);
}


.visual-cta__link:hover
.visual-cta__arrow,
.visual-cta__link:focus-visible
.visual-cta__arrow {
    transform:
        translateX(4px);
}


.visual-cta__link:focus-visible {
    outline:
        2px solid
        var(--visual-gold);
    outline-offset:
        4px;
}


@media (max-width: 900px) {

    .visual-cta__inner {
        grid-template-columns:
            1fr;

        gap: 24px;
    }


    .visual-cta__link {
        width: 100%;
    }

}


@media (max-width: 700px) {

    .visual-page .visual-cta {
        padding:
            30px
            0;
    }


    .visual-cta__inner {
        width: 90%;

        padding:
            16px
            0;
    }


    .visual-cta__copy {
        grid-template-columns:
            1fr;

        gap: 8px;
    }


    .visual-cta__eyebrow {
        margin: 0;
    }


    .visual-cta__copy h2 {
        max-width: 17ch;

        font-size:
            clamp(24px, 8.3vw, 34px);
    }


    .visual-cta__description {
        grid-column: auto;
        margin-top: 2px;
    }


    .visual-cta__link {
        min-height: 74px;

        padding:
            13px
            17px;
    }

}


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

    html {
        scroll-behavior: auto;
    }


    .visual-case-main,
    .visual-case-side,
    .visual-case-track.is-changing
    .visual-case-main,
    .visual-case-track.is-changing
    .visual-case-side {
        opacity: 1;
        transform: none;
        transition: none;
    }

}


/* =========================================
   HERO: ESCALA TIPOGRÁFICA REDUCIDA
========================================= */

.visual-page
.visual-hero-content {
    max-width: 520px;
}


.visual-page
.visual-eyebrow {
    margin-bottom: 11px;

    gap: 9px;

    font-size: 6px;
    letter-spacing: 1.2px;
}


.visual-eyebrow::before {
    width: 24px;
    height: 1px;
}


.visual-page
.visual-hero h1 {
    margin-bottom: 13px;

    font-size:
        clamp(34px, 3.85vw, 63px);

    line-height: 0.82;
    letter-spacing:
        clamp(-3px, -0.15vw, -1.5px);
}


.visual-page
.visual-hero h1 span {
    margin-top: 8px;
}


.visual-page
.visual-hero-statement {
    max-width: 350px;

    margin-bottom: 6px;

    font-size:
        clamp(9px, 0.85vw, 14px);

    line-height: 1.22;
}


.visual-page
.visual-hero-description {
    max-width: 340px;

    margin-bottom: 15px;

    font-size: 8px;
    line-height: 1.55;
}


.visual-page
.visual-hero-link {
    min-width: 142px;

    padding:
        10px
        12px;

    font-size: 6px;
    letter-spacing: 1px;
}


.visual-hero-detail {
    max-width: 240px;

    padding:
        12px
        0
        12px
        16px;
}


.visual-hero-detail p {
    margin-bottom: 6px;

    font-size: 6px;
    letter-spacing: 1.1px;
}


.visual-hero-detail strong {
    margin-bottom: 7px;

    font-size:
        clamp(12px, 1.05vw, 17px);

    line-height: 1.12;
}


.visual-hero-detail > span {
    font-size: 6px;
    letter-spacing: 0.7px;
}


.visual-hero-counter strong {
    font-size: 12px;
}


.visual-hero-counter span {
    font-size: 6px;
}


.visual-hero-controls > p {
    font-size: 6px;
    letter-spacing: 0.7px;
}


@media (max-width: 1000px) {

    .visual-page
    .visual-hero h1 {
        font-size:
            clamp(31px, 4.5vw, 46px);
    }


    .visual-page
    .visual-hero-statement {
        font-size:
            clamp(9px, 1.1vw, 12px);
    }

}


@media (max-width: 700px) {

    .visual-page
    .visual-hero-content {
        max-width: 330px;
    }


    .visual-page
    .visual-eyebrow {
        margin-bottom: 8px;

        font-size: 6px;
        letter-spacing: 1px;
    }


    .visual-page
    .visual-hero h1 {
        margin-bottom: 11px;

        font-size:
            clamp(25px, 7.5vw, 38px);

        letter-spacing: -1.5px;
    }


    .visual-page
    .visual-hero h1 span {
        margin-top: 5px;
    }


    .visual-page
    .visual-hero-statement {
        max-width: 230px;

        font-size: 9px;
    }


    .visual-page
    .visual-hero-description {
        max-width: 280px;

        margin-bottom: 12px;

        font-size: 7.5px;
    }


    .visual-page
    .visual-hero-link {
        min-width: 132px;

        padding:
            9px
            11px;

        font-size: 6px;
    }


    .visual-hero-counter strong {
        font-size: 10px;
    }

}


@media (max-width: 390px) {

    .visual-page
    .visual-hero h1 {
        font-size:
            clamp(24px, 7.2vw, 30px);
    }


    .visual-page
    .visual-hero-statement {
        font-size: 8.5px;
    }

}


/* ARQUITECTURA VISUAL: ESCALA COMPACTA */

.visual-page .visual-hero-content {
    max-width: 460px;
}

.visual-page .visual-eyebrow {
    margin-bottom: 8px;
    font-size: 6px;
    letter-spacing: 1.1px;
}

.visual-page .visual-hero h1 {
    margin-bottom: 10px;
    font-size: clamp(22px, 2.4vw, 38px);
    line-height: 0.88;
    letter-spacing: -1.5px;
}

.visual-page .visual-hero h1 span {
    margin-top: 4px;
}

.visual-page .visual-hero-statement {
    max-width: 330px;
    margin-bottom: 5px;
    font-size: clamp(9px, 0.9vw, 14px);
    line-height: 1.15;
}

.visual-page .visual-hero-description {
    max-width: 330px;
    margin-bottom: 13px;
    font-size: 8px;
    line-height: 1.55;
}

.visual-page .visual-hero-link {
    min-width: 140px;
    min-height: 34px;
    padding: 0 11px;
    font-size: 6px;
}

.visual-hero-detail {
    max-width: 220px;
    padding: 10px 0 10px 14px;
}

.visual-hero-detail p {
    margin-bottom: 5px;
    font-size: 6px;
    letter-spacing: 1px;
}

.visual-hero-detail strong {
    margin-bottom: 6px;
    font-size: clamp(10px, 0.8vw, 13px);
    line-height: 1.12;
}

.visual-hero-detail > span {
    font-size: 6px;
    letter-spacing: 0.6px;
}

.visual-hero-counter strong {
    font-size: 10px;
}

.visual-hero-counter span,
.visual-hero-controls > p {
    font-size: 6px;
}


@media (max-width: 1000px) {

    .visual-page .visual-hero h1 {
        font-size: clamp(22px, 2.8vw, 34px);
    }

    .visual-page .visual-hero-statement {
        font-size: clamp(9px, 1.1vw, 12px);
    }

}


@media (max-width: 700px) {

    .visual-page .visual-hero-content {
        max-width: 300px;
    }

    .visual-page .visual-hero h1 {
        margin-bottom: 9px;
        font-size: clamp(20px, 6vw, 28px);
        letter-spacing: -1.2px;
    }

    .visual-page .visual-hero-statement {
        max-width: 250px;
        font-size: clamp(9px, 2.6vw, 11px);
    }

    .visual-page .visual-hero-description {
        max-width: 260px;
        margin-bottom: 12px;
        font-size: 8px;
    }

    .visual-page .visual-hero-link {
        min-width: 140px;
        min-height: 34px;
        font-size: 6px;
    }

}


@media (max-width: 390px) {

    .visual-page .visual-hero h1 {
        font-size: clamp(19px, 5.8vw, 25px);
    }

    .visual-page .visual-hero-statement {
        font-size: clamp(8px, 2.5vw, 10px);
    }

}


/* POSICIÓN DEL DETALLE EN EL HERO */

.visual-hero-controls {
    overflow: visible;
}


.visual-hero-controls .visual-hero-detail {
    width: min(220px, 24vw);

    margin-bottom: 0;

    position: absolute;
    right: 6%;
    bottom: calc(100% + 18px);

    align-self: auto;
    justify-self: auto;
}


@media (max-width: 1000px) {

    .visual-hero-controls .visual-hero-detail {
        width: 210px;
        right: 6%;
        bottom: calc(100% + 14px);
    }

}


@media (max-width: 700px) {

    .visual-hero-controls .visual-hero-detail {
        display: none;
    }

}


/* =========================================
   HERO ARQUITECTURA VISUAL — ESCALA DEFINITIVA
   Basada en la portada principal
========================================= */


/* CONTENEDOR GENERAL */

.visual-page .visual-hero-content {
    width:
        min(660px, 52%);

    padding-left:
        22px;

    border-left:
        1px solid
        var(--visual-gold);
}


/* ETIQUETA SUPERIOR */

.visual-page .visual-eyebrow {
    margin:
        0
        0
        18px;

    color:
        #FFFFFF;

    font-family:
        var(--font-primary);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.visual-eyebrow::after {
    content:
        "";

    width:
        38px;

    height:
        2px;

    margin-top:
        10px;

    display:
        block;

    background-color:
        var(--visual-gold);
}


/* TÍTULO PRINCIPAL */

.visual-page .visual-hero h1 {
    margin:
        0
        0
        20px;

    font-family:
        var(--font-primary) !important;

    font-size:
        clamp(62px, 6.8vw, 112px);

    font-weight:
        800;

    line-height:
        0.82;

    letter-spacing:
        -0.055em;

    text-transform:
        uppercase;
}


/* SEGUNDA LÍNEA DORADA */

.visual-page .visual-hero h1 span {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--visual-gold) !important;

    -webkit-text-stroke:
        0 !important;
    
    font-size:
        0.55em;

    letter-spacing:
        -0.035em;
}


/* FRASE PRINCIPAL */

.visual-page .visual-hero-statement {
    max-width:
        520px;

    margin:
        0
        0
        12px;

    color:
        #FFFFFF;

    font-family:
        var(--font-primary);

    font-size:
        clamp(20px, 1.8vw, 30px);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.035em;
}


/* DESCRIPCIÓN */

.visual-page .visual-hero-description {
    max-width:
        520px;

    margin:
        0
        0
        24px;

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

    font-family:
        var(--font-primary);

    font-size:
        13px;

    line-height:
        1.45;
}


/* LINK */

.visual-page .visual-hero-link {
    gap:
        12px;

    font-family:
        var(--font-primary);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.16em;
}


.visual-hero-link::after {
    width:
        calc(100% - 22px);

    background-color:
        var(--visual-gold);
}

/* =========================================
   ARQUITECTURA VISUAL — TABLET
========================================= */

@media (max-width: 1024px) {

    .visual-page .visual-hero-content {
        width:
            min(580px, 62%);

        padding-left:
            19px;
    }


    .visual-page .visual-eyebrow {
        margin-bottom:
            16px;

        font-size:
            9px;
    }


    .visual-page .visual-hero h1 {
        margin-bottom:
            18px;

        font-size:
            clamp(54px, 7.5vw, 82px);
    }


    .visual-page .visual-hero h1 span {
        margin-top:
            5px;

        font-size:
            0.55em;
    }


    .visual-page .visual-hero-statement {
        font-size:
            clamp(18px, 2.6vw, 25px);
    }


    .visual-page .visual-hero-description {
        font-size:
            12px;
    }

}

/* =========================================
   ARQUITECTURA VISUAL — MÓVIL
========================================= */

@media (max-width: 700px) {

    .visual-page .visual-hero-content {
        width:
            calc(100% - 24px);

        max-width:
            520px;

        left:
            22px;

        top:
            auto;

        bottom:
            0px;

        padding-left:
            15px;

        transform:
            none;
    }


    .visual-page .visual-eyebrow {
        margin-bottom:
            13px;

        font-size:
            8px;

        letter-spacing:
            0.14em;
    }


    .visual-eyebrow::after {
        width:
            32px;

        height:
            1px;

        margin-top:
            8px;
    }


    .visual-page .visual-hero h1 {
        max-width:
            100%;

        margin-bottom:
            16px;

        font-size:
            clamp(42px, 13vw, 62px);

        line-height:
            0.83;

        letter-spacing:
            -0.05em;
    }


    .visual-page .visual-hero h1 span {
        margin-top:
            5px;

        font-size:
            0.55em;
    }


    .visual-page .visual-hero-statement {
        max-width:
            390px;

        margin-bottom:
            10px;

        font-size:
            clamp(17px, 5vw, 22px);
    }


    .visual-page .visual-hero-description {
        max-width:
            390px;

        margin-bottom:
            20px;

        font-size:
            11px;

        line-height:
            1.35;
    }


    .visual-page .visual-hero-link {
        font-size:
            8px;
    }

}

/* =========================================
   DETALLE LATERAL HERO — SOLO ESCRITORIO
========================================= */

@media (min-width: 1001px) {

    .visual-hero-detail {
        max-width:
            290px;

        margin-bottom:
            clamp(66px, 8vh, 110px);

        padding:
            18px
            0
            18px
            20px;

        border-left:
            2px solid
            var(--visual-gold);
    }


    .visual-hero-detail p {
        margin-bottom:
            9px;

        font-size:
            8px;

        letter-spacing:
            1.6px;
    }


    .visual-hero-detail strong {
        max-width:
            15ch;

        margin-bottom:
            11px;

        font-family:
            var(--font-editorial);

        font-size:
            clamp(25px, 2vw, 33px);

        line-height:
            1.04;
    }


    .visual-hero-detail > span {
        font-size:
            8px;

        letter-spacing:
            1px;
    }

}