@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Italiana&display=swap');


/* =========================================
   1. CONFIGURACIÓN GENERAL
========================================= */

:root {

    --color-white: #FFFFFF;
    --color-black: #161513;
    --color-gold: #EAA736;
    --color-bone: #F3F3F1;
    --color-text: #202020;

    --font-primary: "Figtree", Arial, sans-serif;
    --font-editorial: "Italiana", Georgia, serif;

    --header-height: 54px;
    --header-height-scrolled: 54px;

    --side-panel-offset: 50px;

    --slider-duration: 0.9s;
    --slider-easing: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-black);
    color: var(--color-text);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}


/* =========================================
   2. ENCABEZADO
========================================= */

.header {

    width: 100%;
    height: var(--header-height);

    position: sticky;
    top: 0;
    left: 0;

    z-index: 9999;

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

    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    transition:
        height .35s ease,
        background-color .35s ease,
        box-shadow .35s ease;

}

.navbar {
    width: min(1100px, 94%);
    height: 100%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.nav-left {
    justify-content: flex-start;
}

.nav-right {
    justify-content: flex-end;
}

.nav-group {
    display: flex;
    align-items: center;
    gap: 24px;

    transition:gap .35s ease;
}

.nav-group a {
    position: relative;

    color: var(--color-black);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    transition:
        font-size .35s ease,
        letter-spacing .35s ease;
}

.nav-group a::after {
    content: "";

    width: 0;
    height: 1px;

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

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

    transition: width 0.3s ease;
}

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


/* =========================================
   3. LOGO
========================================= */

.logo {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 18px;
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: none;

    transition:
    font-size .35s ease,
    gap .35s ease,
    letter-spacing .35s ease;
}

.logo span {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 400;
    transition:font-size .35s ease;
}
.logo-image {
    display: block;
    width: auto;
    height: 31px;
}

/* =========================================
   4. BOTÓN DEL MENÚ MÓVIL
========================================= */

.menu-button {
    display: none;

    justify-self: end;

    border: 0;
    background-color: transparent;

    font-size: 26px;

    cursor: pointer;
}


/* =========================================
   5. SECCIÓN PRINCIPAL
========================================= */

.hero {
    width: 100%;
    height: calc(100vh - var(--header-height));
    min-height: 600px;

    
    display: grid;
    grid-template-columns: 22% 56% 22%;

    overflow: hidden;

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

.hero-panel {
    position: relative;
    overflow: hidden;
}


/* =========================================
   6. POSICIÓN DE LOS PANELES LATERALES
========================================= */

.side-panel {
    margin-top: var(--side-panel-offset);
    margin-bottom: var(--side-panel-offset);
}


/* =========================================
   7. CAPAS FOTOGRÁFICAS DEL CARRUSEL
========================================= */

.panel-photo {

    position: absolute;
    inset: 0;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    transform: translateX(0);

    will-change: transform;

    filter:
        brightness(.62)
        contrast(1.08)
        saturate(.92);

}
.panel-photo-current {
    z-index: 1;
}

.panel-photo-next {
    z-index: 2;

    transform: translateX(100%);
}


/* =========================================
   8. MOVIMIENTO HACIA ADELANTE
========================================= */

.hero-panel.slide-forward .panel-photo-current {
    animation:
        current-photo-forward
        var(--slider-duration)
        var(--slider-easing)
        forwards;
}

.hero-panel.slide-forward .panel-photo-next {
    animation:
        next-photo-forward
        var(--slider-duration)
        var(--slider-easing)
        forwards;
}

@keyframes current-photo-forward {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes next-photo-forward {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}


/* =========================================
   9. MOVIMIENTO HACIA ATRÁS
========================================= */

.hero-panel.slide-backward .panel-photo-current {
    animation:
        current-photo-backward
        var(--slider-duration)
        var(--slider-easing)
        forwards;
}

.hero-panel.slide-backward .panel-photo-next {
    animation:
        next-photo-backward
        var(--slider-duration)
        var(--slider-easing)
        forwards;
}

@keyframes current-photo-backward {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes next-photo-backward {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}


/* =========================================
   10. VELO OSCURO DE LOS LATERALES
========================================= */

.panel-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;

    background-color: rgba(0, 0, 0, 0.418);

    pointer-events: none;
}


/* =========================================
   11. SOMBRA SUAVE DE LA IMAGEN CENTRAL
========================================= */

.main-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.08),
            rgba(0, 0, 0, 0.548)
        );

    pointer-events: none;
}


/* =========================================
   12. PANEL CENTRAL
========================================= */

.main-panel {

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

}

.main-panel .panel-photo {

    filter:
        brightness(.72)
        contrast(1.08)
        saturate(.95);

}

/* =========================================
   13. CONTENIDO CENTRAL
========================================= */

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

    position: relative;
    z-index: 4;

    color: var(--color-white);
    text-align: center;
}


/* =========================================
   14. ANIMACIONES DEL CONTENIDO
========================================= */

.animate-from-top {
    animation: content-from-top 0.65s ease both;
}

.hero-content h1.animate-from-top {
    animation-delay: 0.07s;
}

.animate-from-bottom {
    animation: content-from-bottom 0.65s ease both;
    animation-delay: 0.14s;
}

@keyframes content-from-top {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes content-from-bottom {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   15. CATEGORÍA CENTRAL
========================================= */

.hero-category {
    margin-bottom: 17px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}


/* =========================================
   16. TÍTULO CENTRAL
========================================= */

.hero-content h1 {
    margin-bottom: 20px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 5vw, 46px);
    line-height: 1.05;
    letter-spacing: 1px;
    text-transform: uppercase;

    text-shadow:
        0 3px 20px rgba(0, 0, 0, 0.4);
}


/* =========================================
   17. BOTÓN CENTRAL
========================================= */

.hero-button {
    min-width: 30px;
    min-height: 20px;
    padding: 10px 18px;

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

    border: 2px solid var(--color-white);
    border-radius: 999px;

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

    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

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

.hero-button:hover {
    background-color: transparent;
    color: var(--color-white);

    transform: translateY(-3px);
}


/* =========================================
   18. FLECHAS DEL CARRUSEL
========================================= */

.slider-arrow {
    width: 25px;
    height: 70px;

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

    border: 0;

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

    font-size: 25px;
    font-weight: 300;

    cursor: pointer;

    transform: translateY(-50%);

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

.slider-arrow:hover {
    opacity: 0.45;
}

.arrow-left {
    left: 20px;
}

.arrow-left:hover {
    transform: translate(-5px, -50%);
}

.arrow-right {
    right: 20px;
}

.arrow-right:hover {
    transform: translate(5px, -50%);
}


/* =========================================
   19. PUNTOS DEL CARRUSEL
========================================= */

.slider-dots {
    display: flex;
    gap: 11px;

    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 4;

    transform: translateX(-50%);
}

.dot {
    width: 12px;
    height: 12px;

    border: 2px solid var(--color-white);
    border-radius: 50%;

    background-color: transparent;

    cursor: pointer;

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

.dot:hover {
    transform: scale(1.2);
}

.dot.active {
    background-color: var(--color-white);
}


/* =========================================
   20. ADAPTACIÓN A TABLETS
========================================= */

@media (max-width: 1000px) {

    .nav-group {
        display: none;
    }

    .menu-button {
        display: block;
    }

    .hero {
        grid-template-columns: 15% 70% 15%;
    }

}


/* =========================================
   21. ADAPTACIÓN A CELULARES
========================================= */

@media (max-width: 700px) {

    .hero {
        display: block;
        min-height: 560px;
    }

    .side-panel {
        display: none;
        margin: 0;
    }

    .main-panel {
        width: 100%;
        height: 100%;
    }

    .hero-content h1 {
        font-size: clamp(30px, 9vw, 44px);
    }

    .hero-category {
        font-size: 11px;
        letter-spacing: 3px;
    }

}
/* =========================================
   22. CONTENEDOR DE NUEVAS SECCIONES
========================================= */

.section-container {
    width: min(1180px, 90%);
    margin: 0 auto;
}


/* =========================================
   26. TRES CUENTAS DE INSTAGRAM
========================================= */

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

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

.instagram-card {
    min-width: 0;
    min-height: 180px;
    padding: 28px 20px;

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

    position: relative;

    text-align: center;

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

.instagram-card:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.instagram-card:hover {
    background-color: #202020;
    transform: translateY(-5px);
}

.instagram-card-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 14px;

    color: #EAA736;

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

.instagram-card:hover .instagram-card-icon {
    color: #EAA736;
    transform: scale(1.08);
}

.instagram-card-icon svg {
    width: 100%;
    height: 100%;

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

.instagram-label {
    margin-bottom: 9px;

    color: #EAA736;

    font-size: 8px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.instagram-card h3 {
    max-width: 100%;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(16px, 1.6vw, 21px);
    font-weight: 400;

    overflow-wrap: anywhere;
}

.instagram-link-text {
    margin-top: 14px;

    position: relative;

    color: var(--color-white);

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

.instagram-link-text::after {
    content: "";

    width: 100%;
    height: 1px;

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

    background-color: #EAA736;

    transform: scaleX(0);
    transform-origin: right;

    transition: transform 0.3s ease;
}

.instagram-card:hover .instagram-link-text::after {
    transform: scaleX(1);
    transform-origin: left;
}



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

.footer {

    background: #161513;

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

}

.footer-container{

    width:min(1200px,90%);
    margin:auto;

    min-height:45px;

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

}

.footer-logo-image {
    display: block;
    width: auto;
    height: 20px;
}

.footer-copy{

    font-size:10px;

    color: rgba(255,255,255,.70);

}

.footer-social{

    display:flex;
    gap:22px;

}

.footer-social a{

    width:22px;
    height:22px;

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

    color:rgba(255,255,255,.70);

    transition:
        transform .35s,
        color .35s,
        opacity .35s;

}

.footer-social svg{

    width:20px;
    height:20px;

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

}

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

.footer-social a:hover{

    color:#ffffff;

    transform:translateY(-4px);

}

/* =========================================
   HEADER REDUCIDO AL HACER SCROLL
========================================= */

.header.header-scrolled {
    height: var(--header-height-scrolled);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08);

    animation:
        header-settle
        0.45s
        cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes header-settle {
    from {
        transform: translateY(-8px);
    }

    to {
        transform: translateY(0);
    }
}

.header.header-scrolled .logo-image {
    height: 31px;
}

.header.header-scrolled .logo span{

    font-size:17px;

}

.header.header-scrolled .nav-group{

    gap:24px;

}

.header.header-scrolled .nav-group a{

    font-size:10px;

    letter-spacing:.8px;

}

/* =========================================
   ANIMACIÓN DE ENTRADA DE LA PÁGINA PRINCIPAL
========================================= */

/*
   Los paneles del carrusel tendrán una transición
   suave cuando la página termine de cargar.
*/

.home-page .hero-panel {
    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Estado inicial de las fotografías */

.home-page.is-loading .hero-panel {
    opacity: 0;
    transform: translateY(18px) scale(1.025);
}


/* Estado final de las fotografías */

.home-page.is-ready .hero-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* Entrada escalonada de los tres paneles */

.home-page.is-ready .left-panel {
    transition-delay: 0.05s;
}

.home-page.is-ready .main-panel {
    transition-delay: 0.17s;
}

.home-page.is-ready .right-panel {
    transition-delay: 0.29s;
}


/* =========================================
   ENTRADA DEL CONTENIDO CENTRAL
========================================= */

.home-page .hero-content {
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page.is-loading .hero-content {
    opacity: 0;
    transform: translateY(20px);
}

.home-page.is-ready .hero-content {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.42s;
}


/* =========================================
   ENTRADA DE LOS PUNTOS DEL CARRUSEL
========================================= */

.home-page .slider-dots {
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page.is-loading .slider-dots {
    opacity: 0;

    transform:
        translateX(-50%)
        translateY(12px);
}

.home-page.is-ready .slider-dots {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);

    transition-delay: 0.6s;
}


/* =========================================
   SECCIONES QUE APARECEN AL HACER SCROLL
========================================= */

/*
   El fondo de cada sección permanece visible.
   Solo aparece suavemente su contenido interno.
*/

.reveal-section > .section-container {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-section.section-visible > .section-container {
    opacity: 1;
    transform: translateY(0);
}



/* =========================================
   ENTRADA ESCALONADA DE INSTAGRAM
========================================= */

.reveal-section .instagram-card {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.35s ease;
}

.reveal-section.section-visible .instagram-card {
    opacity: 1;
    transform: translateY(0);
}

.reveal-section.section-visible .instagram-card:nth-child(1) {
    transition-delay: 0.12s;
}

.reveal-section.section-visible .instagram-card:nth-child(2) {
    transition-delay: 0.24s;
}

.reveal-section.section-visible .instagram-card:nth-child(3) {
    transition-delay: 0.36s;
}


/* =========================================
   PERSONAS QUE PREFIEREN MENOS ANIMACIONES
========================================= */

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

    .home-page .hero-panel,
    .home-page .hero-content,
    .home-page .slider-dots,
    .reveal-section > .section-container,
    .reveal-section .instagram-card {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

}

.mobile-menu {
    display: none;
}

@media (max-width: 1000px) {
    .navbar {
        position: relative;
    }

    .mobile-menu {
        width: 100vw;
        padding: 26px 0;

        display: none;
        flex-direction: column;
        align-items: center;
        gap: 18px;

        position: absolute;
        top: var(--header-height);
        left: 50%;

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

        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);

        transform: translateX(-50%);
    }

    .mobile-menu.is-open {
        display: flex;
    }

    .mobile-menu a {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
}

/* =========================================
   RESPONSIVE DEFINITIVO — PÁGINA PRINCIPAL
   Este bloque debe permanecer al final
========================================= */


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

@media (max-width: 1000px) {

    /*
       El header mantiene tres columnas:
       espacio vacío, logo centrado y botón.
    */

    .navbar {
        width: 92%;

        grid-template-columns:
            44px
            1fr
            44px;
    }

    .nav-group {
        display: none;
    }

    .logo {
        grid-column: 2;

        justify-self: center;
    }

    .menu-button {
        width: 44px;
        height: 44px;

        padding: 0;

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

        grid-column: 3;
        justify-self: end;

        position: relative;
        z-index: 10002;

        color: var(--color-black);

        font-size: 24px;
        line-height: 1;
    }


    /* Menú desplegable */

    .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;
        gap: 0;

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

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

        color: var(--color-black);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-14px);

        transition:
            opacity 0.35s ease,
            visibility 0.35s ease,
            transform 0.35s
            cubic-bezier(0.22, 1, 0.36, 1);
    }

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

        transform: translateY(0);
    }

    .mobile-menu a {
        width: min(420px, 100%);
        padding: 20px 0;

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

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

        font-size: 19px;
        font-weight: 400;
        letter-spacing: 1px;
        text-align: center;
        text-transform: none;
    }

    .mobile-menu a:first-child {
        border-top:
            1px solid rgba(0, 0, 0, 0.10);
    }


    /* Hero en tablet */

    .hero {
        grid-template-columns:
            12%
            76%
            12%;
    }

    .side-panel {
        margin-top: 32px;
        margin-bottom: 32px;
    }

}

    
/* =========================================
   CELULARES
========================================= */

@media (max-width: 700px) {

    :root {
        --header-height: 60px;
        --header-height-scrolled: 54px;
    }

    /* Header */

    .header {
        height: var(--header-height);
    }

    .navbar {
        width: 92%;

        grid-template-columns:
            40px
            1fr
            40px;
    }

    .logo {
        gap: 7px;

        font-size: 18px;
        letter-spacing: -0.7px;
    }

    .logo-image {
    height: 34px;
    }

    .logo span {
        font-size: 20px;
    }

    .menu-button {
        width: 40px;
        height: 40px;

        font-size: 22px;
    }

    .mobile-menu {
        top: var(--header-height);

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


    /* Hero */

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

        min-height: 540px;

        display: block;
    }

    .side-panel {
        display: none;
    }

    .main-panel {
        width: 100%;
        height: 100%;
    }

    .main-panel .panel-photo {
        background-position: center;
    }

    .main-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.14),
                rgba(0, 0, 0, 0.62)
            );
    }

    .hero-content {
        width: 86%;
    }

    .hero-category {
        margin-bottom: 14px;

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

    .hero-content h1 {
        margin-bottom: 18px;

        font-size:
            clamp(31px, 10vw, 43px);

        line-height: 1.08;
    }

    .hero-button {
        min-height: 42px;
        padding: 11px 21px;

        font-size: 10px;
    }

    .slider-dots {
        bottom: 19px;
        gap: 10px;
    }

    .dot {
        width: 10px;
        height: 10px;
    }


    /*
       Las flechas laterales estaban dentro
       de paneles que ahora están ocultos.
       En móvil utilizaremos los puntos.
    */

    .slider-arrow {
        display: none;
    }


    /* Contenedores */

    .section-container {
        width: 88%;
    }


    
    /* Instagram */

    .instagram-section {
        padding: 54px 0 58px;
    }

    .instagram-grid {
        grid-template-columns: 1fr;
    }

    .instagram-card {
        min-height: 190px;
        padding: 35px 18px;
    }

    .instagram-card:not(:last-child) {
        border-right: 0;

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

    .instagram-card:hover {
        transform: none;
    }

    .instagram-card h3 {
        font-size: 21px;
    }

    .instagram-label,
    .instagram-link-text {
        font-size: 10px;
    }


    /* Footer */

    .footer-container {
        width: 88%;
        min-height: 210px;
        padding: 42px 0;

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

        text-align: center;
    }

    .footer-logo {
        font-size: 13px;
        letter-spacing: 3px;
    }

    .footer-copy {
        font-size: 11px;
        line-height: 1.6;
    }

    .footer-social {
        gap: 25px;
    }

    .footer-social a {
        width: 28px;
        height: 28px;
    }

    .footer-social svg {
        width: 22px;
        height: 22px;
    }

}


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

@media (max-width: 390px) {

    .contact-entry-media {
        min-height:
            min(135vw, 530px);
    }


    .contact-entry-panel {
        padding:
            42px
            17px
            47px;
    }


    .contact-entry-content h2 {
        font-size:
            clamp(27px, 9.2vw, 36px);

        letter-spacing: -1.3px;
    }


    .contact-entry-whatsapp {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            auto;

        gap: 10px;

        padding:
            13px
            12px;
    }


    .contact-entry-whatsapp-icon {
        width: 34px;
        height: 34px;
    }


    .contact-entry-whatsapp-label {
        font-size: 6px;
        letter-spacing: 1.1px;
    }


    .contact-entry-whatsapp-copy strong {
        font-size: 11px;
    }


    .contact-entry-whatsapp-arrow {
        font-size: 18px;
    }

}

/* =========================================
   PORTADA PRINCIPAL
========================================= */

.home-cover {
    width: 100%;

    height:
        calc(100vh - var(--header-height));

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

    min-height: 610px;

    position: relative;

    overflow: hidden;

    background-color: #161513;
    color: #FFFFFF;
}


/* =========================================
   FOTOGRAFÍAS
========================================= */

.home-cover-media {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;

    background-color: #161513;
}


.home-cover-photo {
    position: absolute;
    inset: -2%;

    z-index: 1;

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0;

    filter: none;

    transform:
        scale(1.015)
        translate3d(0, 0, 0);

    will-change:
        opacity,
        transform;

    transition:
        opacity 2.2s
        cubic-bezier(0.45, 0, 0.25, 1);
}


/* Fotografía que está entrando */

.home-cover-photo.is-entering {
    z-index: 3;
}


/* Fotografía que está saliendo */

.home-cover-photo.is-leaving {
    z-index: 2;
}


/* Estado visible */

.home-cover-photo.is-visible {
    opacity: 1;
}


/* Movimiento interno de la fotografía */

.home-cover-photo.is-moving {
    animation:
        home-cover-photo-motion
        6.8s
        cubic-bezier(0.25, 0, 0.25, 1)
        forwards;
}


@keyframes home-cover-photo-motion {

    0% {
        transform:
            scale(1.015)
            translate3d(0, 0, 0);
    }

    100% {
        transform:
            scale(1.06)
            translate3d(-0.25%, -0.12%, 0);
    }

}

/* =========================================
   SOMBRA
========================================= */

.home-cover-shade {
    position: absolute;
    inset: 0;
    z-index: 3;

    background:
    linear-gradient(
        90deg,
        rgba(10, 18, 18, 0.74) 0%,
        rgba(10, 18, 18, 0.48) 28%,
        rgba(10, 18, 18, 0.12) 58%,
        rgba(10, 18, 18, 0.02) 100%
    ),
    linear-gradient(
        to top,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.03) 45%
    );

    pointer-events: none;
}


/* =========================================
   INFORMACIÓN INFERIOR IZQUIERDA
========================================= */

.home-cover-content {
    width:
        min(660px, 52%);

    position:
        absolute;

    left:
        7vw;

    top:
        50%;

    bottom:
        auto;

    z-index:
        5;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    padding-left:
        22px;

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

    color:
        #FFFFFF;

    transform:
        translateY(-50%);
}



/* =========================================
   TÍTULO PEQUEÑO
========================================= */

.home-cover-eyebrow {
    margin:
        0
        0
        18px;

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

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

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.home-cover-eyebrow::after {
    content:
        "";

    width:
        38px;

    height:
        2px;

    margin-top:
        10px;

    display:
        block;

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

.home-cover-content h1 {
    max-width:
        510px;

    margin:
        0
        0
        20px;

    color:
        #FFFFFF;

    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;

    text-shadow:
        0 3px 22px
        rgba(0, 0, 0, 0.34);
}

.home-cover-content h1 span {
    display:
        block;

    margin-top:
        6px;

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

    font-size:
        0.55em;

    letter-spacing:
        -0.035em;
}



/* =========================================
   LÍNEA DORADA
========================================= */

.home-cover-accent {
    width: 38px;
    height: 2px;

    margin:
        8px
        0
        7px;

    display: block;

    background-color: #EAA736;
}


/* =========================================
   CONCEPTOS PEQUEÑOS Y JUNTOS
========================================= */

.home-cover-concepts {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        4px;

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

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

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        1.35;

    letter-spacing:
        0;
}


.home-cover-concepts span {
    display: block;
}


/* =========================================
   FLECHAS LATERALES
========================================= */

.home-cover-arrow {
    min-width: 78px;
    height: 44px;

    padding: 0;

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

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

    border: 0;

    background-color: transparent;
    color: #FFFFFF;

    cursor: pointer;

    transform:
        translateY(-50%);

    opacity: 0.9;

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


.home-cover-arrow:hover {
    opacity: 0.55;
}


.home-cover-arrow-left {
    left: 20px;
}


.home-cover-arrow-left:hover {
    transform:
        translate(-4px, -50%);
}


.home-cover-arrow-right {
    right: 20px;

    justify-content: flex-end;
}


.home-cover-arrow-right:hover {
    transform:
        translate(4px, -50%);
}


.home-cover-arrow-symbol {
    font-size: 29px;
    font-weight: 300;
    line-height: 1;
}


.home-cover-arrow-count {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}


/* =========================================
   CONTADOR INFERIOR DERECHO
========================================= */

.home-cover-progress {
    position: absolute;
    right: 27px;
    bottom: 29px;
    z-index: 5;

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

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

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}


.home-cover-progress span:first-child {
    color: #EAA736;
}


/* =========================================
   APARICIÓN DEL TEXTO
========================================= */

.home-page.is-loading
.home-cover-content,
.home-page.is-loading
.home-cover-progress,
.home-page.is-loading
.home-cover-arrow {
    opacity: 0;
}


.home-page.is-ready
.home-cover-content,
.home-page.is-ready
.home-cover-progress,
.home-page.is-ready
.home-cover-arrow {
    opacity: 1;

    transition:
        opacity 0.8s ease 0.25s;
}


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

@media (max-width: 1000px) {

    .home-cover-content {
        width:
            min(580px, 62%);

        left:
            6vw;

        top:
            50%;

        bottom:
            auto;

        padding-left:
            19px;

        transform:
            translateY(-50%);
    }


    .home-cover-eyebrow {
        margin-bottom:
            16px;

        font-size:
            9px;
    }


    .home-cover-content h1 {
        max-width:
            560px;

        margin-bottom:
            18px;

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

        line-height:
            0.82;

        letter-spacing:
            -0.05em;
    }

    
    .home-cover-content h1 span {
        margin-top:
            5px;

        font-size:
            0.55em;
    }


    .home-cover-concepts {
        gap:
            3px;

        font-size:
            12px;

        line-height:
            1.32;
    }


    .home-cover-arrow-left {
        left:
            16px;
    }


    .home-cover-arrow-right {
        right:
            16px;
    }

}

/* =========================================
   CELULAR — PORTADA PRINCIPAL
========================================= */

@media (max-width: 700px) {

    .home-cover {
        min-height:
            560px;
    }


    .home-cover-photo {
        inset:
            -3%;

        background-position:
            58% center;
    }


    .home-cover-shade {
        background:
            linear-gradient(
                to top,
                rgba(0, 0, 0, 0.75) 0%,
                rgba(0, 0, 0, 0.30) 38%,
                rgba(0, 0, 0, 0.03) 70%,
                rgba(0, 0, 0, 0.05) 100%
            );
    }


    .home-cover-content {
        width:
            calc(100% - 44px);

        left:
            22px;

        top:
            auto;

        bottom:
            72px;

        padding-left:
            15px;

        transform:
            none;
    }


    .home-cover-eyebrow {
        margin-bottom:
            13px;

        font-size:
            8px;

        letter-spacing:
            0.14em;
    }


    .home-cover-eyebrow::after {
        width:
            32px;

        height:
            1px;

        margin-top:
            8px;
    }


    .home-cover-content h1 {
        max-width:
            100%;

        margin-bottom:
            16px;

        font-size:
            clamp(42px, 13vw, 62px);

        line-height:
            0.83;

        letter-spacing:
            -0.05em;
    }


    .home-cover-content h1 span {
        margin-top:
            5px;

        font-size:
            0.55em;
    }


    .home-cover-accent {
        width:
            32px;

        height:
            1px;

        margin:
            7px
            0
            6px;
    }


    .home-cover-concepts {
        gap:
            3px;

        font-size:
            11px;

        line-height:
            1.3;
    }


    .home-cover-arrow {
        min-width:
            44px;

        height:
            48px;
    }


    .home-cover-arrow-left {
        left:
            12px;
    }


    .home-cover-arrow-right {
        right:
            12px;
    }


    .home-cover-arrow-count {
        display:
            none;
    }


    .home-cover-arrow-symbol {
        font-size:
            26px;
    }


    .home-cover-progress {
        right:
            22px;

        bottom:
            28px;

        font-size:
            10px;
    }

}

/* =========================================
   DECLARACIÓN DE MARCA
========================================= */

.brand-statement {
    width: 100%;

    padding:
        46px
        0
        42px;

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

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

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


.brand-statement-container {
    width: min(1240px, 92%);
    margin: 0 auto;
}


/* =========================================
   ETIQUETA SUPERIOR
========================================= */

.brand-statement-label {
    width: fit-content;
    margin: 0 auto 34px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}


.brand-statement-number,
.brand-statement-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}


.brand-statement-number {
    color: #EAA736;
}


.brand-statement-name {
    color: rgba(22, 21, 19, 0.72);
}


.brand-statement-line {
    width: 68px;
    height: 1px;

    display: block;

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


/* =========================================
   MENSAJE PRINCIPAL
========================================= */

.brand-statement-copy {
    text-align: center;
}


.brand-statement-copy h2 {
    max-width: 920px;
    margin: 0 auto;

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

    font-size:
        clamp(31px, 3.7vw, 56px);

    font-weight: 900;
    line-height: 0.97;
    letter-spacing: -2.4px;

    text-transform: uppercase;
}


.brand-statement-copy p {
    max-width: 780px;

    margin:
        28px
        auto
        0;

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

    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.2px;
}


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

@media (max-width: 1000px) {

    .brand-statement {
        padding:
            58px
            0
            54px;
    }


    .brand-statement-label {
        margin-bottom: 44px;
    }


    .brand-statement-copy h2 {
        max-width: 800px;

        font-size:
            clamp(32px, 6vw, 52px);

        letter-spacing: -2px;
    }

    .brand-statement-copy p {
        max-width: 700px;

        margin-top: 34px;
    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    .brand-statement {
        padding:
            46px
            0
            44px;
    }


    .brand-statement-container {
        width: 88%;
    }


    .brand-statement-label {
        margin-bottom: 34px;

        gap: 14px;
    }


    .brand-statement-line {
        width: 42px;
    }


    .brand-statement-number,
    .brand-statement-name {
        font-size: 8px;
    }


    .brand-statement-copy h2 {
        font-size:
            clamp(27px, 8.5vw, 38px);

        line-height: 1;
        letter-spacing: -1.2px;
    }

    .brand-statement-copy p {
        margin-top: 26px;

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

}


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

@media (max-width: 1000px) {

    .brand-connection {
        padding:
            42px
            0
            46px;
    }


    .brand-connection-container {
        width: 92%;

        grid-template-columns: 1fr;
        gap: 30px;
    }


    .brand-connection-message h2 {
        max-width: 760px;

        font-size:
            clamp(30px, 6vw, 48px);
    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    .brand-connection {
        padding:
            38px
            0
            42px;
    }


    .brand-connection-container {
        width: 88%;
        gap: 26px;
    }


    .brand-connection-label {
        gap: 13px;
    }


    .brand-connection-rule {
        width: 38px;
    }


    .brand-connection-number,
    .brand-connection-name {
        font-size: 8px;
    }


    .brand-connection-message h2 {
        font-size:
            clamp(29px, 9vw, 42px);

        line-height: 1;
        letter-spacing: -1.4px;
    }


    .brand-connection-message p {
        margin-top: 20px;

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

}

/* =========================================
   PROYECTOS — FULL WIDTH EDITORIAL
========================================= */

.projects-section {
    width: 100%;

    padding:
        clamp(72px, 6vw, 96px)
        0
        clamp(76px, 6vw, 100px);

    position: relative;

    overflow: hidden;

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

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


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

.projects-heading {
    width:
        calc(100% - 72px);

    margin:
        0
        auto
        clamp(42px, 4vw, 62px);
}


.projects-heading-top {
    margin-bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}


.projects-eyebrow {
    color:
        var(--color-gold);

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

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.projects-heading-line {
    width:
        54px;

    height:
        1px;

    display:
        block;

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


.projects-heading h2 {
    margin:
        0;

    color:
        var(--color-white);

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

    font-size:
        clamp(42px, 4.6vw, 74px);

    font-weight:
        800;

    line-height:
        0.92;

    letter-spacing:
        -0.055em;

    text-transform:
        uppercase;
}


.projects-heading h2::after {
    content:
        ".";

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


/* =========================================
   CARRUSEL
========================================= */

.projects-carousel {
    --projects-visible-items:
        3;

    --projects-gap:
        clamp(18px, 1.25vw, 26px);

    width:
        100%;

    position:
        relative;

    overflow:
        hidden;
}


/* =========================================
   VIEWPORT CASI A TODO EL ANCHO
========================================= */

.projects-carousel-viewport {
    width:
        calc(100% - 56px);

    margin:
        0 auto;

    padding:
        0;

    overflow:
        hidden;
}


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

.projects-carousel-track {
    width:
        100%;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        var(--projects-gap);

    transform:
        translate3d(0, 0, 0);

    will-change:
        transform;

    transition:
        transform
        1s
        cubic-bezier(0.65, 0, 0.35, 1);
}


.projects-carousel-track.is-resetting {
    transition:
        none;
}


/* =========================================
   TARJETAS
========================================= */

.project-card {
    min-width:
        0;

    flex:
        0
        0
        calc(
            (
                100% -
                (
                    var(--projects-gap) *
                    (
                        var(--projects-visible-items) - 1
                    )
                )
            ) /
            var(--projects-visible-items)
        );
}


.project-card-link {
    width:
        100%;

    display:
        block;

    color:
        inherit;
}


/* =========================================
   IMÁGENES
========================================= */

.project-card-image-wrapper {
    width:
        100%;

    height:
        clamp(560px, 49vw, 780px);

    position:
        relative;

    overflow:
        hidden;

    background-color:
        #0e0e0d;
}


.project-card-image {
    position:
        absolute;

    inset:
        0;

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    transform:
        scale(1.025)
        translate3d(0, 0, 0);

    filter:
        brightness(0.92)
        saturate(0.94);

    will-change:
        transform,
        filter;

    transition:
        transform
        1.2s
        cubic-bezier(0.22, 1, 0.36, 1),
        filter
        0.5s
        ease;
}


.project-card-image-wrapper::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.24) 0%,
            rgba(0, 0, 0, 0.02) 34%,
            rgba(0, 0, 0, 0.02) 100%
        );

    pointer-events:
        none;
}


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

.project-card-link:hover
.project-card-image {
    transform:
        scale(1.06)
        translate3d(0, 0, 0);

    filter:
        brightness(1)
        saturate(1);
}


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

.project-card-info {
    min-height:
        104px;

    padding:
        18px
        2px
        14px;
}


.project-card-title {
    margin:
        0;

    color:
        var(--color-white);

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

    font-size:
        clamp(19px, 1.35vw, 25px);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.035em;

    text-transform:
        uppercase;

    transition:
        color
        0.35s
        ease,
        transform
        0.4s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.project-card-link:hover
.project-card-title {
    color:
        var(--color-gold);

    transform:
        translateX(4px);
}


.project-card-category {
    margin:
        7px
        0
        0;

    color:
        rgba(243, 243, 241, 0.58);

    font-size:
        8px;

    font-weight:
        600;

    line-height:
        1.3;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.project-card-rule {
    width:
        32px;

    height:
        1px;

    margin-top:
        13px;

    display:
        block;

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

    transform:
        scaleX(0.55);

    transform-origin:
        left center;

    transition:
        width
        0.45s
        cubic-bezier(0.22, 1, 0.36, 1),
        transform
        0.45s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.project-card-link:hover
.project-card-rule {
    width:
        60px;

    transform:
        scaleX(1);
}


/* =========================================
   FLECHAS
========================================= */

.projects-carousel-arrow {
    width:
        46px;

    height:
        46px;

    padding:
        0;

    position:
        absolute;

    top:
        47%;

    z-index:
        6;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

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

    color:
        var(--color-white);

    cursor:
        pointer;

    transform:
        translateY(-50%);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        background-color
        0.3s
        ease,
        border-color
        0.3s
        ease,
        color
        0.3s
        ease,
        transform
        0.35s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.projects-carousel-arrow span {
    display:
        block;

    font-size:
        22px;

    font-weight:
        300;

    line-height:
        1;
}


.projects-carousel-arrow-left {
    left:
        8px;
}


.projects-carousel-arrow-right {
    right:
        8px;
}


.projects-carousel-arrow:hover {
    border-color:
        var(--color-gold);

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

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


.projects-carousel-arrow-left:hover {
    transform:
        translate(-4px, -50%);
}


.projects-carousel-arrow-right:hover {
    transform:
        translate(4px, -50%);
}


/* =========================================
   ANIMACIÓN DE ENTRADA
========================================= */

.projects-section
.projects-heading {
    opacity:
        0;

    transform:
        translate3d(-34px, 0, 0);

    transition:
        opacity
        0.8s
        ease,
        transform
        1s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.projects-section
.project-card {
    opacity:
        0;

    transform:
        translate3d(0, 44px, 0)
        scale(0.985);

    transition:
        opacity
        0.8s
        ease,
        transform
        1s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.projects-section
.project-card-image {
    transform:
        scale(1.085)
        translate3d(0, 18px, 0);
}


.projects-section.is-projects-visible
.projects-heading {
    opacity:
        1;

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


.projects-section.is-projects-visible
.project-card {
    opacity:
        1;

    transform:
        translate3d(0, 0, 0)
        scale(1);
}


.projects-section.is-projects-visible
.project-card-image {
    transform:
        scale(1.025)
        translate3d(0, 0, 0);

    transition:
        transform
        1.35s
        cubic-bezier(0.22, 1, 0.36, 1),
        filter
        0.55s
        ease;
}


.projects-section.is-projects-visible
.project-card:nth-child(1) {
    transition-delay:
        0.10s;
}


.projects-section.is-projects-visible
.project-card:nth-child(2) {
    transition-delay:
        0.22s;
}


.projects-section.is-projects-visible
.project-card:nth-child(3) {
    transition-delay:
        0.34s;
}


.projects-section.is-projects-visible
.project-card:nth-child(n + 4) {
    transition-delay:
        0.40s;
}


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

@media (max-width: 1000px) {

    .projects-section {
        padding:
            62px
            0
            74px;
    }


    .projects-heading {
        width:
            calc(100% - 44px);

        margin-bottom:
            36px;
    }


    .projects-carousel {
        --projects-visible-items:
            2;

        --projects-gap:
            18px;
    }


    .projects-carousel-viewport {
        width:
            calc(100% - 32px);
    }


    .project-card-image-wrapper {
        height:
            clamp(520px, 62vw, 700px);
    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    .projects-section {
        padding:
            50px
            0
            64px;
    }


    .projects-heading {
        width:
            calc(100% - 36px);

        margin-bottom:
            28px;
    }


    .projects-heading h2 {
        font-size:
            clamp(34px, 11vw, 48px);
    }


    .projects-carousel {
        --projects-visible-items:
            1;

        --projects-gap:
            0px;
    }


    .projects-carousel-viewport {
        width:
            100%;

        padding:
            0
            16px;
    }


    .project-card-image-wrapper {
        height:
            min(125vw, 610px);
    }


    .project-card-info {
        min-height:
            94px;

        padding:
            15px
            2px
            12px;
    }


    .project-card-title {
        font-size:
            20px;
    }


    .projects-carousel-arrow {
        width:
            40px;

        height:
            40px;
    }


    .projects-carousel-arrow-left {
        left:
            6px;
    }


    .projects-carousel-arrow-right {
        right:
            6px;
    }

}


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

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

    .projects-section
    .projects-heading,

    .projects-section
    .project-card,

    .projects-section
    .project-card-image,

    .projects-carousel-track {
        opacity:
            1;

        transform:
            none;

        transition:
            none;

        animation:
            none;
    }

}

/* =========================================
   MENSAJE DE DIRECCIÓN DE CONTENIDO
========================================= */

.creative-message {
    width: 100%;

    padding: 0;

    position: relative;

    overflow: hidden;

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

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


/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */

.creative-message-container {
    width: 100%;

    height:
        clamp(520px, 66vh, 650px);

    min-height: 0;
    margin: 0;

    position: relative;

    display: block;

    overflow: hidden;
}


/* =========================================
   BLOQUE FOTOGRÁFICO
========================================= */

.creative-message-media {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;

    background-color:
        transparent;
}

/* Fotografía */

.creative-message-image {
    width: 100%;
    height: 100%;

    display: block;

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

    transform:
        scale(1.025);

    transition:
        transform 1.4s
        cubic-bezier(0.22, 1, 0.36, 1);

    will-change:
        transform;
}


/* Acercamiento sutil */

.creative-message:hover
.creative-message-image {
    transform:
        scale(1.055);
}


/* Oscurecimiento editorial */

.creative-message-image-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.08) 58%,
            rgba(0, 0, 0, 0.32) 100%
        );

    pointer-events: none;
}


/* Etiqueta dentro de la fotografía */

.creative-message-photo-label {
    position: absolute;
    left: 28px;
    bottom: 25px;
    z-index: 2;

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

    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2.1px;

    text-transform: uppercase;
}


/* =========================================
   PANEL BLANCO SUPERPUESTO
========================================= */

.creative-message-panel {
    width:
        min(43%, 660px);

    min-height:
        clamp(360px, 45vh, 450px);

    padding:
        clamp(42px, 4vw, 68px);

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

    translate:
        0
        -50%;

    display: flex;
    align-items: center;

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

    color:
        var(--color-black);

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


/* =========================================
   CONTENIDO DEL PANEL
========================================= */

.creative-message-content {
    width: 100%;
    max-width: 570px;
    margin: 0 auto;
}


/* =========================================
   ETIQUETA SUPERIOR
========================================= */

.creative-message-heading {
    margin-bottom: 31px;

    display: flex;
    align-items: center;
    gap: 15px;
}


.creative-message-eyebrow {
    color:
        rgba(22, 21, 19, 0.72);

    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.creative-message-rule {
    width: 39px;
    height: 1px;

    display: block;

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


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

.creative-message-content h2 {
    max-width: 520px;
    margin:
        0
        0
        29px;

    color:
        var(--color-black);

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

    font-size:
        clamp(31px, 3.3vw, 54px);

    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -2.4px;

    text-transform: uppercase;
}


/* =========================================
   TEXTO
========================================= */

.creative-message-content p {
    max-width: 540px;
    margin:
        0
        0
        36px;

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

    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.1px;
}


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

.creative-message-button {
    min-height: 43px;
    padding:
        0
        0
        8px;

    display: inline-flex;
    align-items: center;
    gap: 18px;

    position: relative;

    color:
        var(--color-black);

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.1px;

    text-transform: uppercase;
}


.creative-message-button::after {
    content: "";

    width: 100%;
    height: 1px;

    position: absolute;
    left: 0;
    bottom: 0;

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

    transition:
        background-color 0.35s ease;
}


.creative-message-button::before {
    content: "";

    width: 0;
    height: 2px;

    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;

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

    transition:
        width 0.45s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.creative-message-button:hover::before {
    width: 100%;
}


.creative-message-button-arrow {
    font-size: 16px;
    line-height: 1;

    transition:
        transform 0.35s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.creative-message-button:hover
.creative-message-button-arrow {
    transform:
        translateX(5px);
}


/* =========================================
   ANIMACIÓN INICIAL AL HACER SCROLL
========================================= */

.creative-message
.creative-message-media {
    opacity: 0;

    transform:
        translate3d(-22px, 0, 0);

    transition:
        opacity 0.9s ease,
        transform 1s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.creative-message
.creative-message-panel {
    opacity: 0;

    transform:
        translate3d(24px, 0, 0);

    transition:
        opacity 0.9s ease 0.14s,
        transform 1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.14s;
}


.creative-message
.creative-message-eyebrow,

.creative-message
.creative-message-content h2,

.creative-message
.creative-message-content p,

.creative-message
.creative-message-button {
    opacity: 0;

    transform:
        translate3d(0, 12px, 0);

    transition:
        opacity 0.65s ease,
        transform 0.75s
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* Estado visible */

.creative-message.is-creative-visible
.creative-message-media,

.creative-message.is-creative-visible
.creative-message-panel {
    opacity: 1;

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


.creative-message.is-creative-visible
.creative-message-eyebrow,

.creative-message.is-creative-visible
.creative-message-content h2,

.creative-message.is-creative-visible
.creative-message-content p,

.creative-message.is-creative-visible
.creative-message-button {
    opacity: 1;

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


/* Aparición escalonada */

.creative-message.is-creative-visible
.creative-message-eyebrow {
    transition-delay: 0.32s;
}


.creative-message.is-creative-visible
.creative-message-content h2 {
    transition-delay: 0.41s;
}


.creative-message.is-creative-visible
.creative-message-content p {
    transition-delay: 0.50s;
}


.creative-message.is-creative-visible
.creative-message-button {
    transition-delay: 0.59s;
}

/* =========================================
   DIRECCIÓN DE CONTENIDO — TABLET
========================================= */

@media (min-width: 701px) and (max-width: 1000px) {

    .creative-message {
        width: 100%;
        padding: 0;

        overflow: hidden;

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


    .creative-message-container {
        width: 100%;

        height:
            clamp(500px, 68vh, 610px);

        min-height: 0;
        margin: 0;

        position: relative;

        display: block;

        overflow: hidden;
    }


    .creative-message-media {
        width: 100%;
        height: 100%;

        position: absolute;
        inset: 0;
        z-index: 1;

        overflow: hidden;
    }


    .creative-message-image {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;
        object-position:
            40%
            center;
    }


    .creative-message-panel {
        width: 54%;

        min-height:
            clamp(340px, 45vh, 405px);

        padding:
            38px
            32px;

        position: absolute;
        top: 50%;
        right: 3%;
        z-index: 3;

        translate:
            0
            -50%;

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

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


    .creative-message-heading {
        margin-bottom: 18px;
    }


    .creative-message-content h2 {
        margin-bottom: 18px;

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

        line-height: 0.95;
        letter-spacing: -1.5px;
    }


    .creative-message-content p {
        margin-bottom: 23px;

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


    .creative-message-button {
        min-height: 39px;
    }

}


/* =========================================
   DIRECCIÓN DE CONTENIDO — CELULAR
========================================= */

@media (max-width: 700px) {

    .creative-message {
        width: 100%;

        padding:
            0
            0
            20px;

        overflow: hidden;

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

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


    .creative-message-container {
        width: 100%;

        height: auto;
        min-height: 0;
        margin: 0;

        position: relative;

        display: block;

        overflow: visible;
    }


    /*
       La foto ocupa todo el ancho.
       Ya no queda como fondo absoluto.
    */

    .creative-message-media {
        width: 100%;

        height:
            clamp(360px, 108vw, 500px);

        position: relative;
        inset: auto;
        z-index: 1;

        overflow: hidden;
    }


    .creative-message-image {
        width: 100%;
        height: 100%;

        display: block;

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


    /*
       Oscurecimiento leve en la zona inferior
       para leer la etiqueta.
    */

    .creative-message-image-shade {
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.02) 0%,
                rgba(0, 0, 0, 0.04) 68%,
                rgba(0, 0, 0, 0.28) 100%
            );
    }


    .creative-message-photo-label {
        left: 16px;
        right: 16px;
        bottom: 15px;

        font-size: 6.5px;
        line-height: 1.25;
        letter-spacing: 1.35px;
    }


    /*
       La caja blanca sube ligeramente
       encima de la fotografía.
    */

    .creative-message-panel {
        width:
            calc(100% - 24px);

        min-height: 0;

        margin:
            -28px
            auto
            0;

        padding:
            30px
            22px
            27px;

        position: relative;
        top: auto;
        right: auto;
        z-index: 3;

        translate: none;

        display: block;

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

        color:
            var(--color-black);

        box-shadow:
            0 16px 38px
            rgba(0, 0, 0, 0.14);
    }


    .creative-message-content {
        width: 100%;
        max-width: none;
        margin: 0;
    }


    .creative-message-heading {
        margin-bottom: 16px;

        gap: 11px;
    }


    .creative-message-eyebrow {
        font-size: 7px;
        letter-spacing: 1px;
    }


    .creative-message-rule {
        width: 28px;
    }


    .creative-message-content h2 {
        max-width: none;

        margin:
            0
            0
            16px;

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

        line-height: 0.98;
        letter-spacing: -1px;
    }


    .creative-message-content p {
        max-width: none;

        margin:
            0
            0
            21px;

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


    .creative-message-button {
        min-height: 38px;

        padding-bottom: 7px;

        gap: 13px;

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


    .creative-message-button-arrow {
        font-size: 14px;
    }

}


/* =========================================
   DIRECCIÓN DE CONTENIDO — CELULAR PEQUEÑO
========================================= */

@media (max-width: 390px) {

    .creative-message-media {
        height:
            clamp(335px, 112vw, 450px);
    }


    .creative-message-panel {
        width:
            calc(100% - 18px);

        margin-top: -22px;

        padding:
            26px
            18px
            24px;
    }


    .creative-message-content h2 {
        font-size:
            clamp(22px, 8.4vw, 30px);
    }


    .creative-message-content p {
        font-size: 12px;
    }


    .creative-message-photo-label {
        left: 13px;
        right: 13px;

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

}


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

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

    .creative-message
    .creative-message-media,

    .creative-message
    .creative-message-panel,

    .creative-message
    .creative-message-eyebrow,

    .creative-message
    .creative-message-content h2,

    .creative-message
    .creative-message-content p,

    .creative-message
    .creative-message-button {
        opacity: 1;

        transform: none;

        transition: none;
    }

}

/* =========================================
   FILMMAKING
========================================= */

.filmmaking-section {
    width: 100%;
    height:
        clamp(560px, 74vh, 760px);

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

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

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


/* =========================================
   VIDEO DE FONDO
========================================= */

.filmmaking-background-video {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;

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

    transform:
        scale(1.015);

    pointer-events: none;
}


/* =========================================
   SOMBRA DEL VIDEO
========================================= */

.filmmaking-shade {
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.64) 30%,
            rgba(0, 0, 0, 0.29) 63%,
            rgba(0, 0, 0, 0.36) 100%
        );

    pointer-events: none;
}


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

.filmmaking-content {
    width:
        min(620px, calc(100% - 64px));

    margin-left:
        clamp(30px, 6vw, 110px);

    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* Línea superior */

.filmmaking-accent {
    width: 150px;
    height: 4px;

    margin-bottom: 15px;

    display: block;

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


/* Texto pequeño */

.filmmaking-eyebrow {
    margin-bottom: 13px;

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

    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2.1px;

    text-transform: uppercase;
}


/* Título */

.filmmaking-content h2 {
    margin:
        0
        0
        15px;

    color:
        var(--color-white);

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

    font-size:
        clamp(26px, 3.8vw, 58px);

    font-weight: 1000;
    line-height: 0.88;
    letter-spacing: -3px;

    text-transform: uppercase;

    text-shadow:
        0 5px 30px
        rgba(0, 0, 0, 0.34);
}


/* =========================================
   BOTÓN DE REPRODUCCIÓN
========================================= */

.filmmaking-play-button {
    min-height: 46px;

    padding:
        0
        3px;

    display: inline-flex;
    align-items: center;
    gap: 18px;

    border: 0;

    background-color:
        transparent;

    color:
        var(--color-gold);

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.5px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 0.3s ease,
        transform 0.35s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.filmmaking-button-bracket {
    font-size: 41px;
    font-weight: 200;
    line-height: 0.6;

    transition:
        transform 0.35s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.filmmaking-button-icon {
    font-size: 8px;

    transition:
        transform 0.35s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.filmmaking-play-button:hover {
    color:
        var(--color-white);

    transform:
        translateX(4px);
}


.filmmaking-play-button:hover
.filmmaking-button-bracket:first-child {
    transform:
        translateX(-4px);
}


.filmmaking-play-button:hover
.filmmaking-button-bracket:last-child {
    transform:
        translateX(4px);
}


.filmmaking-play-button:hover
.filmmaking-button-icon {
    transform:
        scale(1.25);
}


/* =========================================
   MODAL DEL VIDEO
========================================= */

.filmmaking-modal {
    width: 100%;
    height: 100%;

    position: fixed;
    inset: 0;
    z-index: 20000;

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

    padding:
        38px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

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


/* Estado abierto */

.filmmaking-modal.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* Fondo oscuro */

.filmmaking-modal-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;

    border: 0;

    background-color:
        rgba(8, 8, 8, 0.94);

    cursor: pointer;

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}


/* Caja del reproductor */

.filmmaking-modal-dialog {
    width:
        min(1280px, 94vw);

    position: relative;
    z-index: 2;

    background-color:
        #080808;

    opacity: 0;

    transform:
        translateY(30px)
        scale(0.965);

    transition:
        opacity 0.4s ease 0.08s,
        transform 0.55s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.08s;

    box-shadow:
        0 40px 110px
        rgba(0, 0, 0, 0.65);
}


.filmmaking-modal.is-open
.filmmaking-modal-dialog {
    opacity: 1;

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


/* Cabecera del modal */

.filmmaking-modal-header {
    min-height: 48px;

    padding:
        0
        4px
        0
        15px;

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

    background-color:
        #080808;

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


.filmmaking-modal-header p {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;

    text-transform: uppercase;
}


/* Botón de cerrar */

.filmmaking-modal-close {
    width: 44px;
    height: 44px;

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

    border: 0;

    background-color:
        transparent;

    color:
        var(--color-white);

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

    font-size: 29px;
    font-weight: 200;
    line-height: 1;

    cursor: pointer;

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


.filmmaking-modal-close:hover {
    color:
        var(--color-gold);

    transform:
        rotate(90deg);
}


/* Video principal */

.filmmaking-modal-video-wrapper {
    width: 100%;

    aspect-ratio:
        16
        /
        9;

    overflow: hidden;

    background-color:
        #000000;
}


.filmmaking-modal-video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background-color:
        #000000;
}


/* Evita mover la página con el modal abierto */

body.filmmaking-modal-open {
    overflow: hidden;
}


/* =========================================
   FILMMAKING — TABLET
========================================= */

@media (max-width: 1000px) {

    .filmmaking-section {
        height:
            clamp(510px, 69vh, 650px);
    }


    .filmmaking-content {
        width:
            min(550px, calc(100% - 48px));

        margin-left:
            34px;
    }


    .filmmaking-content h2 {
    margin-bottom: 15px;

    font-size:
        clamp(25px, 4.8vw, 46px);

    line-height: 0.9;
    letter-spacing: -2.2px;
    }


    .filmmaking-shade {
        background:
            linear-gradient(
                to right,
                rgba(0, 0, 0, 0.80) 0%,
                rgba(0, 0, 0, 0.55) 48%,
                rgba(0, 0, 0, 0.34) 100%
            );
    }

}


/* =========================================
   FILMMAKING — CELULAR
========================================= */

@media (max-width: 700px) {

    .filmmaking-section {
        height:
            min(138vw, 620px);

        min-height: 470px;

        align-items: flex-end;
    }


    .filmmaking-background-video {
        object-position:
            58%
            center;
    }


    .filmmaking-shade {
        background:
            linear-gradient(
                to top,
                rgba(0, 0, 0, 0.84) 0%,
                rgba(0, 0, 0, 0.48) 49%,
                rgba(0, 0, 0, 0.14) 100%
            );
    }


    .filmmaking-content {
        width:
            calc(100% - 38px);

        margin:
            0
            19px
            46px;
    }


    .filmmaking-accent {
        width: 62px;
        height: 5px;

        margin-bottom: 20px;
    }


    .filmmaking-eyebrow {
        margin-bottom: 11px;

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


    .filmmaking-content h2 {
    margin-bottom: 15px;

    font-size:
        clamp(24px, 8.5vw, 36px);

    line-height: 0.92;
    letter-spacing: -1.5px;
    }


    .filmmaking-play-button {
        min-height: 43px;

        gap: 14px;

        font-size: 8px;
    }


    .filmmaking-button-bracket {
        font-size: 35px;
    }


    .filmmaking-modal {
        padding:
            14px;
    }


    .filmmaking-modal-dialog {
        width: 100%;
    }


    .filmmaking-modal-header {
        min-height: 44px;
    }


    .filmmaking-modal-video-wrapper {
        aspect-ratio:
            16
            /
            9;
    }

}


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

@media (max-width: 390px) {

    .filmmaking-section {
        min-height: 440px;
    }


    .filmmaking-content {
        width:
            calc(100% - 30px);

        margin:
            0
            15px
            37px;
    }


    .filmmaking-content h2 {
    font-size:
        clamp(22px, 8vw, 30px);

    letter-spacing: -1.2px;
    }

}

/* =========================================
   FILMMAKING — ANIMACIÓN DE PRESENTACIÓN
========================================= */

/*
   El video empieza ligeramente ampliado
   y con menor visibilidad.
*/

.filmmaking-section
.filmmaking-background-video {
    opacity: 0.35;

    transform:
        scale(1.09);

    transition:
        opacity 1.15s ease,
        transform 1.8s
        cubic-bezier(0.16, 1, 0.3, 1);
}


/*
   La sombra aparece de forma gradual.
*/

.filmmaking-section
.filmmaking-shade {
    opacity: 0;

    transition:
        opacity 1.05s ease 0.15s;
}


/*
   Estado inicial de la línea dorada.
*/

.filmmaking-section
.filmmaking-accent {
    opacity: 0;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        opacity 0.55s ease 0.28s,
        transform 0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.28s;
}


/*
   Estado inicial del texto pequeño.
*/

.filmmaking-section
.filmmaking-eyebrow {
    opacity: 0;

    transform:
        translate3d(0, 16px, 0);

    transition:
        opacity 0.65s ease 0.38s,
        transform 0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.38s;
}


/*
   Estado inicial del título FILMMAKING.
*/

.filmmaking-section
.filmmaking-content h2 {
    opacity: 0;

    transform:
        translate3d(0, 24px, 0);

    transition:
        opacity 0.75s ease 0.48s,
        transform 0.95s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.48s;
}


/*
   Estado inicial del botón.
*/

.filmmaking-section
.filmmaking-play-button {
    opacity: 0;

    transform:
        translate3d(0, 18px, 0);

    transition:
        opacity 0.65s ease 0.62s,
        transform 0.85s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.62s,
        color 0.3s ease;
}


/* =========================================
   ESTADO VISIBLE
========================================= */

.filmmaking-section.is-filmmaking-visible
.filmmaking-background-video {
    opacity: 1;

    transform:
        scale(1.015);
}


.filmmaking-section.is-filmmaking-visible
.filmmaking-shade {
    opacity: 1;
}


.filmmaking-section.is-filmmaking-visible
.filmmaking-accent {
    opacity: 1;

    transform:
        scaleX(1);
}


.filmmaking-section.is-filmmaking-visible
.filmmaking-eyebrow {
    opacity: 1;

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


.filmmaking-section.is-filmmaking-visible
.filmmaking-content h2 {
    opacity: 1;

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


.filmmaking-section.is-filmmaking-visible
.filmmaking-play-button {
    opacity: 1;

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


/* =========================================
   CONSERVAR EL MOVIMIENTO DEL BOTÓN
========================================= */

.filmmaking-section.is-filmmaking-visible
.filmmaking-play-button:hover {
    transform:
        translateX(4px);
}


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

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

    .filmmaking-section
    .filmmaking-background-video,

    .filmmaking-section
    .filmmaking-shade,

    .filmmaking-section
    .filmmaking-accent,

    .filmmaking-section
    .filmmaking-eyebrow,

    .filmmaking-section
    .filmmaking-content h2,

    .filmmaking-section
    .filmmaking-play-button {
        opacity: 1;

        transform: none;

        transition: none;
        animation: none;
    }

}

/* =========================================
   ESTUDIO — PRESENTACIÓN
========================================= */

.studio-presentation {
    width: 100%;

    min-height: 680px;

    padding:
        82px
        0;

    display: flex;
    align-items: center;

    overflow: hidden;

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

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


/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */

.studio-presentation-container {
    width:
        min(1240px, 92%);

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(440px, 1.12fr);

    align-items: center;

    gap:
        clamp(65px, 8vw, 145px);
}


/* =========================================
   COLUMNA IZQUIERDA
========================================= */

.studio-presentation-intro {
    max-width: 480px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* Número editorial */

.studio-presentation-number {
    margin-bottom: 19px;

    color:
        var(--color-gold);

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.2px;
}


/* Línea dorada */

.studio-presentation-accent {
    width: 74px;
    height: 3px;

    margin-bottom: 22px;

    display: block;

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


/* Etiqueta */

.studio-presentation-eyebrow {
    margin-bottom: 15px;

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

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 2.2px;

    text-transform: uppercase;
}


/* Título principal */

.studio-presentation-intro h2 {
    margin:
        0
        0
        25px;

    color:
        var(--color-black);

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

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

    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -3.8px;

    text-transform: uppercase;
}


.studio-presentation-intro h2 span {
    display: block;

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


/* Descripción */

.studio-presentation-description {
    max-width: 420px;

    margin-bottom: 31px;

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

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


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

.studio-presentation-button {
    min-height: 45px;

    padding:
        0
        19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

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

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

    color:
        var(--color-white);

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.studio-presentation-button-arrow {
    color:
        var(--color-gold);

    font-size: 15px;

    transition:
        transform 0.35s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.studio-presentation-button:hover {
    border-color:
        var(--color-gold);

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

    color:
        var(--color-black);

    transform:
        translateY(-3px);
}


.studio-presentation-button:hover
.studio-presentation-button-arrow {
    color:
        var(--color-black);

    transform:
        translateX(4px);
}


/* =========================================
   COLUMNA DERECHA
========================================= */

.studio-presentation-benefits {
    width: 100%;
}


/* Encabezado */

.studio-benefits-heading {
    margin-bottom: 29px;
}


.studio-benefits-heading > p {
    margin-bottom: 8px;

    color:
        var(--color-gold);

    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 2px;

    text-transform: uppercase;
}


.studio-benefits-heading h3 {
    max-width: 400px;

    margin: 0;

    color:
        var(--color-black);

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

    font-size:
        clamp(27px, 2.6vw, 42px);

    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -1.8px;
}


/* =========================================
   LISTA DE BENEFICIOS
========================================= */

.studio-benefits-list {
    border-top:
        1px solid rgba(22, 21, 19, 0.16);
}


/* Beneficio individual */

.studio-benefit {
    width: 100%;

    padding:
        17px
        0;

    display: grid;

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

    align-items: flex-start;

    gap: 16px;

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

    transition:
        padding-left 0.4s
        cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.35s ease;
}


.studio-benefit:hover {
    padding-left: 11px;

    background-color:
        rgba(234, 167, 54, 0.055);
}


/* Número */

.studio-benefit-number {
    padding-top: 3px;

    color:
        var(--color-gold);

    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.8px;
}


/* Contenido */

.studio-benefit-content h4 {
    margin:
        0
        0
        6px;

    color:
        var(--color-black);

    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.studio-benefit-content p {
    max-width: 530px;

    margin: 0;

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

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


/* =========================================
   ESTUDIO — TABLET
========================================= */

@media (max-width: 1000px) {

    .studio-presentation {
        min-height: auto;

        padding:
            70px
            0;
    }


    .studio-presentation-container {
        width: 90%;

        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(380px, 1.2fr);

        gap: 55px;
    }


    .studio-presentation-intro h2 {
        font-size:
            clamp(36px, 5.6vw, 54px);

        letter-spacing: -2.8px;
    }


    .studio-presentation-description {
        font-size: 12.5px;
    }


    .studio-benefits-heading h3 {
        font-size:
            clamp(25px, 3.6vw, 35px);
    }


    .studio-benefit {
        padding:
            15px
            0;

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

        gap: 13px;
    }


    .studio-benefit-content p {
        font-size: 11px;
    }

}


/* =========================================
   ESTUDIO — CELULAR
========================================= */

@media (max-width: 700px) {

    .studio-presentation {
        padding:
            57px
            0
            61px;
    }


    .studio-presentation-container {
        width: 88%;

        grid-template-columns:
            1fr;

        gap: 58px;
    }


    .studio-presentation-intro {
        max-width: 100%;
    }


    .studio-presentation-number {
        margin-bottom: 16px;

        font-size: 8px;
    }


    .studio-presentation-accent {
        width: 57px;
        height: 2px;

        margin-bottom: 18px;
    }


    .studio-presentation-eyebrow {
        margin-bottom: 12px;

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


    .studio-presentation-intro h2 {
        margin-bottom: 21px;

        font-size:
            clamp(35px, 12vw, 51px);

        line-height: 0.94;
        letter-spacing: -2.5px;
    }


    .studio-presentation-description {
        max-width: 500px;

        margin-bottom: 27px;

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


    .studio-presentation-button {
        min-height: 45px;

        padding:
            0
            17px;
    }


    .studio-benefits-heading {
        margin-bottom: 23px;
    }


    .studio-benefits-heading h3 {
        max-width: 320px;

        font-size:
            clamp(27px, 8vw, 36px);

        line-height: 1;
    }


    .studio-benefit {
        padding:
            19px
            0;

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

        gap: 11px;
    }


    .studio-benefit:hover {
        padding-left: 0;

        background-color:
            transparent;
    }


    .studio-benefit-content h4 {
        font-size: 10px;
        letter-spacing: 1.1px;
    }


    .studio-benefit-content p {
        font-size: 12px;
        line-height: 1.58;
    }

}


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

@media (max-width: 390px) {

    .studio-presentation {
        padding:
            50px
            0
            54px;
    }


    .studio-presentation-container {
        width: 90%;

        gap: 50px;
    }


    .studio-presentation-intro h2 {
        font-size:
            clamp(32px, 11.5vw, 43px);

        letter-spacing: -2px;
    }


    .studio-benefit {
        grid-template-columns:
            27px
            minmax(0, 1fr);
    }


    .studio-benefit-content p {
        font-size: 11.5px;
    }

}

/* =========================================
   ESTUDIO — ANIMACIÓN DE PRESENTACIÓN
========================================= */

/* Columna izquierda */

.studio-presentation
.studio-presentation-number,

.studio-presentation
.studio-presentation-accent,

.studio-presentation
.studio-presentation-eyebrow,

.studio-presentation
.studio-presentation-intro h2,

.studio-presentation
.studio-presentation-description,

.studio-presentation
.studio-presentation-button {
    opacity: 0;

    transform:
        translate3d(0, 22px, 0);

    transition:
        opacity 0.7s ease,
        transform 0.85s
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* Línea dorada */

.studio-presentation
.studio-presentation-accent {
    transform:
        scaleX(0);

    transform-origin:
        left center;
}


/* Encabezado derecho */

.studio-presentation
.studio-benefits-heading {
    opacity: 0;

    transform:
        translate3d(24px, 0, 0);

    transition:
        opacity 0.75s ease,
        transform 0.9s
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* Beneficios */

.studio-presentation
.studio-benefit {
    opacity: 0;

    transform:
        translate3d(28px, 0, 0);

    transition:
        opacity 0.65s ease,
        transform 0.82s
        cubic-bezier(0.22, 1, 0.36, 1),
        padding-left 0.4s
        cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.35s ease;
}


/* =========================================
   ESTADO VISIBLE
========================================= */

.studio-presentation.is-studio-visible
.studio-presentation-number,

.studio-presentation.is-studio-visible
.studio-presentation-eyebrow,

.studio-presentation.is-studio-visible
.studio-presentation-intro h2,

.studio-presentation.is-studio-visible
.studio-presentation-description,

.studio-presentation.is-studio-visible
.studio-presentation-button {
    opacity: 1;

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


.studio-presentation.is-studio-visible
.studio-presentation-accent {
    opacity: 1;

    transform:
        scaleX(1);
}


.studio-presentation.is-studio-visible
.studio-benefits-heading {
    opacity: 1;

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


.studio-presentation.is-studio-visible
.studio-benefit {
    opacity: 1;

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


/* =========================================
   RETARDOS DE LA COLUMNA IZQUIERDA
========================================= */

.studio-presentation.is-studio-visible
.studio-presentation-number {
    transition-delay: 0.05s;
}


.studio-presentation.is-studio-visible
.studio-presentation-accent {
    transition-delay: 0.12s;
}


.studio-presentation.is-studio-visible
.studio-presentation-eyebrow {
    transition-delay: 0.19s;
}


.studio-presentation.is-studio-visible
.studio-presentation-intro h2 {
    transition-delay: 0.27s;
}


.studio-presentation.is-studio-visible
.studio-presentation-description {
    transition-delay: 0.36s;
}


.studio-presentation.is-studio-visible
.studio-presentation-button {
    transition-delay: 0.44s;
}


/* =========================================
   RETARDOS DE LOS BENEFICIOS
========================================= */

.studio-presentation.is-studio-visible
.studio-benefits-heading {
    transition-delay: 0.13s;
}


.studio-presentation.is-studio-visible
.studio-benefit:nth-child(1) {
    transition-delay: 0.22s;
}


.studio-presentation.is-studio-visible
.studio-benefit:nth-child(2) {
    transition-delay: 0.30s;
}


.studio-presentation.is-studio-visible
.studio-benefit:nth-child(3) {
    transition-delay: 0.38s;
}


.studio-presentation.is-studio-visible
.studio-benefit:nth-child(4) {
    transition-delay: 0.46s;
}


.studio-presentation.is-studio-visible
.studio-benefit:nth-child(5) {
    transition-delay: 0.54s;
}


.studio-presentation.is-studio-visible
.studio-benefit:nth-child(6) {
    transition-delay: 0.62s;
}


/* El hover debe seguir funcionando */

.studio-presentation.is-studio-visible
.studio-presentation-button:hover {
    transform:
        translateY(-3px);
}


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

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

    .studio-presentation
    .studio-presentation-number,

    .studio-presentation
    .studio-presentation-accent,

    .studio-presentation
    .studio-presentation-eyebrow,

    .studio-presentation
    .studio-presentation-intro h2,

    .studio-presentation
    .studio-presentation-description,

    .studio-presentation
    .studio-presentation-button,

    .studio-presentation
    .studio-benefits-heading,

    .studio-presentation
    .studio-benefit {
        opacity: 1;

        transform: none;

        transition: none;
        animation: none;
    }

}

/* =========================================
   CTA EDITORIAL — ESTUDIO
========================================= */

.booking-cta-section {
    width: 100%;
    min-height: 760px;
    padding: 70px 0 0;
    overflow: hidden;
    background-color: var(--color-black);
    position: relative;
    color: var(--color-white);
}

.booking-cta-container {
    width: min(1440px, 94%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(320px, 42%) minmax(0, 58%);
    align-items: stretch;
    gap: 42px;
}

/* =========================
   COLUMNA IZQUIERDA
========================= */

.booking-cta-left {
    padding: 48px 0 48px 8px;

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

    
}

.booking-cta-accent {
    width: 90px;
    height: 6px;
    margin-bottom: 34px;
    display: block;
    background-color: var(--color-gold);
}

.booking-cta-eyebrow {
    margin: 0 0 14px;
    color: var(--color-gold);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}

.booking-cta-title {
    margin:
        0
        0
        24px;

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

    font-size:
        clamp(42px, 4.2vw, 64px);

    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -2.8px;

    text-transform: uppercase;
}

.booking-cta-title-white {
    display: block;

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

.booking-cta-title-gold {
    display: block;

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

.booking-cta-title-white + .booking-cta-title-gold {
    margin-top: 3px;
}

.booking-cta-description {
    max-width: 420px;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.2px;
}

.booking-cta-button {
    min-width: 132px;
    min-height: 42px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 0;
    border: 1px solid var(--color-gold);
    background-color: var(--color-gold);
    color: var(--color-black);

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}

.booking-cta-button-arrow {
    font-size: 18px;
    line-height: 1;
    color: var(--color-gold);
    transition: transform 0.35s ease;
}

.booking-cta-button:hover {
    transform: translateY(-3px);
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.booking-cta-button:hover .booking-cta-button-arrow {
    transform: translateX(4px);
    color: var(--color-gold);
}

/* =========================
   COLUMNA DERECHA / FOTO
========================= */

.booking-cta-image-wrap {
    position: relative;
    min-height: 690px;
    overflow: hidden;
    z-index: 1;
    background-color: var(--color-black);
}

.booking-cta-image {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    display: block;

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

    transform:
        scale(1.01);

    transition:
        transform 1.2s
        cubic-bezier(0.22, 1, 0.36, 1);

    user-select: none;
    pointer-events: none;
}


.booking-cta-section:hover
.booking-cta-image {
    transform:
        scale(1.045);
}

.booking-cta-image-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.28) 0%,
            rgba(0, 0, 0, 0.06) 42%,
            rgba(0, 0, 0, 0.00) 80%
        );
    pointer-events: none;
}

.booking-cta-image-label {
    position: absolute;
    left: 28px;
    bottom: 26px;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: rgba(255, 255, 255, 0.92);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.booking-cta-image-label-line {
    width: 28px;
    height: 1px;
    background-color: var(--color-gold);
    display: block;
}

/* =========================
   ESTADO VISIBLE
========================= */

.booking-cta-section.is-booking-visible .booking-cta-left {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.booking-cta-section.is-booking-visible .booking-cta-image-wrap {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

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

@media (max-width: 1100px) {

    .booking-cta-section {
        padding: 58px 0;
    }

    .booking-cta-container {
        width: 92%;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .booking-cta-left {
        padding: 0;
        max-width: 680px;
    }

    .booking-cta-accent {
        width: 74px;
        height: 5px;
        margin-bottom: 28px;
    }

    .booking-cta-title {
    margin-bottom: 22px;

    font-size:
        clamp(34px, 5.8vw, 54px);

    line-height: 0.93;
    letter-spacing: -2.3px;
    }

    .booking-cta-title-white +
    .booking-cta-title-gold {
        margin-top: 3px;
    }

    .booking-cta-description {
        max-width: 620px;
        font-size: 15px;
        line-height: 1.65;
    }

    .booking-cta-image-wrap {
        min-height: 520px;
    }
}

/* =========================
   CELULAR
========================= */

@media (max-width: 700px) {

    .booking-cta-section {
        padding: 44px 0;
    }

    .booking-cta-container {
        width: 90%;
        gap: 18px;
    }

    .booking-cta-left {
        padding: 0;
    }

    .booking-cta-accent {
        width: 58px;
        height: 4px;
        margin-bottom: 22px;
    }

    .booking-cta-eyebrow {
        margin-bottom: 12px;
        font-size: 9px;
        letter-spacing: 2px;
    }

    .booking-cta-title {
    margin-bottom: 20px;

    font-size:
        clamp(30px, 10vw, 43px);

    line-height: 0.94;
    letter-spacing: -1.6px;
    }

    .booking-cta-title-white +
    .booking-cta-title-gold {
        margin-top: 2px;
    }

    .booking-cta-description {
        max-width: 100%;
        margin-bottom: 24px;
        font-size: 14px;
        line-height: 1.6;
    }

    .booking-cta-button {
        min-height: 40px;
        padding: 0 16px;
        gap: 12px;
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .booking-cta-image-wrap {
        min-height: 360px;
    }

    .booking-cta-image-label {
        left: 18px;
        bottom: 18px;
        gap: 8px;
        font-size: 7px;
        letter-spacing: 1.4px;
    }

    .booking-cta-image-label-line {
        width: 20px;
    }
}

/* =========================================
   CTA ESTUDIO — PRESENTACIÓN COMPLETA
========================================= */

/*
   El contenedor completo aparece primero.
*/

.booking-cta-section
.booking-cta-container {
    opacity: 0;

    transform:
        translate3d(0, 26px, 0);

    transition:
        opacity 0.75s ease,
        transform 1s
        cubic-bezier(0.22, 1, 0.36, 1);
}


/*
   Estado inicial del cuadro de texto.
*/

.booking-cta-section
.booking-cta-left {
    opacity: 0;

    transform:
        translate3d(-38px, 0, 0);

    transition:
        opacity 0.85s ease 0.08s,
        transform 1.05s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.08s;
}


/*
   Línea dorada.
*/

.booking-cta-section
.booking-cta-accent {
    opacity: 0;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        opacity 0.45s ease 0.24s,
        transform 0.85s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.24s;
}


/*
   Texto superior.
*/

.booking-cta-section
.booking-cta-eyebrow {
    opacity: 0;

    transform:
        translate3d(0, 15px, 0);

    transition:
        opacity 0.6s ease 0.34s,
        transform 0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.34s;
}


/*
   Primera línea: ESTUDIO /
*/

.booking-cta-section
.booking-cta-title-white {
    opacity: 0;

    transform:
        translate3d(0, 24px, 0);

    transition:
        opacity 0.68s ease 0.43s,
        transform 0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.43s;
}


/*
   Segunda línea: PRODUCCIÓN
*/

.booking-cta-section
.booking-cta-title-gold {
    opacity: 0;

    transform:
        translate3d(0, 24px, 0);

    transition:
        opacity 0.68s ease 0.52s,
        transform 0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.52s;
}


/*
   Descripción.
*/

.booking-cta-section
.booking-cta-description {
    opacity: 0;

    transform:
        translate3d(0, 18px, 0);

    transition:
        opacity 0.65s ease 0.62s,
        transform 0.85s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.62s;
}


/*
   Botón.
*/

.booking-cta-section
.booking-cta-button {
    opacity: 0;

    transform:
        translate3d(0, 18px, 0);

    transition:
        opacity 0.65s ease 0.72s,
        transform 0.85s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.72s,
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}


/*
   Cuadro que contiene la fotografía.
*/

.booking-cta-section
.booking-cta-image-wrap {
    opacity: 0;

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

    transform:
        translate3d(38px, 0, 0);

    transition:
        opacity 0.8s ease 0.17s,
        clip-path 1.2s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.17s,
        transform 1.1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.17s;
}


/*
   La fotografía inicia ampliada.
*/

.booking-cta-section
.booking-cta-image {
    transform:
        scale(1.10);

    transition:
        transform 1.65s
        cubic-bezier(0.16, 1, 0.3, 1);
}


/*
   Sombra de la fotografía.
*/

.booking-cta-section
.booking-cta-image-shade {
    opacity: 0;

    transition:
        opacity 0.9s ease 0.65s;
}


/*
   Etiqueta inferior de la imagen.
*/

.booking-cta-section
.booking-cta-image-label {
    opacity: 0;

    transform:
        translate3d(0, 13px, 0);

    transition:
        opacity 0.65s ease 0.75s,
        transform 0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.75s;
}


/* =========================================
   ESTADO VISIBLE
========================================= */

.booking-cta-section.is-booking-visible
.booking-cta-container {
    opacity: 1;

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


.booking-cta-section.is-booking-visible
.booking-cta-left {
    opacity: 1;

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


.booking-cta-section.is-booking-visible
.booking-cta-accent {
    opacity: 1;

    transform:
        scaleX(1);
}


.booking-cta-section.is-booking-visible
.booking-cta-eyebrow,

.booking-cta-section.is-booking-visible
.booking-cta-title-white,

.booking-cta-section.is-booking-visible
.booking-cta-title-gold,

.booking-cta-section.is-booking-visible
.booking-cta-description,

.booking-cta-section.is-booking-visible
.booking-cta-button,

.booking-cta-section.is-booking-visible
.booking-cta-image-label {
    opacity: 1;

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


.booking-cta-section.is-booking-visible
.booking-cta-image-wrap {
    opacity: 1;

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

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


.booking-cta-section.is-booking-visible
.booking-cta-image {
    transform:
        scale(1.01);
}


.booking-cta-section.is-booking-visible
.booking-cta-image-shade {
    opacity: 1;
}


/* =========================================
   CONSERVAR INTERACCIONES
========================================= */

.booking-cta-section.is-booking-visible
.booking-cta-button:hover {
    transform:
        translateY(-3px);
}


.booking-cta-section.is-booking-visible:hover
.booking-cta-image {
    transform:
        scale(1.045);
}


/* =========================================
   TABLET Y CELULAR
========================================= */

@media (max-width: 1100px) {

    .booking-cta-section
    .booking-cta-image-wrap {
        clip-path:
            inset(0 0 100% 0);

        transform:
            translate3d(0, 30px, 0);
    }


    .booking-cta-section.is-booking-visible
    .booking-cta-image-wrap {
        clip-path:
            inset(0 0 0 0);

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

}


@media (max-width: 700px) {

    .booking-cta-section
    .booking-cta-left {
        transform:
            translate3d(0, 25px, 0);
    }


    .booking-cta-section.is-booking-visible
    .booking-cta-left {
        transform:
            translate3d(0, 0, 0);
    }


    .booking-cta-section
    .booking-cta-image-wrap {
        transform:
            translate3d(0, 25px, 0);
    }


    .booking-cta-section.is-booking-visible
    .booking-cta-image-wrap {
        transform:
            translate3d(0, 0, 0);
    }

}


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

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

    .booking-cta-section
    .booking-cta-container,

    .booking-cta-section
    .booking-cta-left,

    .booking-cta-section
    .booking-cta-accent,

    .booking-cta-section
    .booking-cta-eyebrow,

    .booking-cta-section
    .booking-cta-title-white,

    .booking-cta-section
    .booking-cta-title-gold,

    .booking-cta-section
    .booking-cta-description,

    .booking-cta-section
    .booking-cta-button,

    .booking-cta-section
    .booking-cta-image-wrap,

    .booking-cta-section
    .booking-cta-image,

    .booking-cta-section
    .booking-cta-image-shade,

    .booking-cta-section
    .booking-cta-image-label {
        opacity: 1;

        clip-path: none;

        transform: none;

        transition: none;
        animation: none;
    }

}

/* =========================================
   CONTACTO — WHATSAPP Y CORREO
========================================= */

.contact-entry {
    width: 100%;

    overflow: hidden;

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

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


.contact-entry-container {
    width: 100%;

    min-height:
        clamp(690px, 88vh, 880px);

    display: grid;

    grid-template-columns:
        minmax(360px, 36%)
        minmax(0, 64%);

    align-items: stretch;
}


/* =========================================
   IMAGEN
========================================= */

.contact-entry-media {
    min-height: inherit;

    position: relative;

    overflow: hidden;

    background-color:
        #0f0f0e;
}


.contact-entry-video {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    display: block;

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

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

    transform:
        scale(1.03);

    transition:
        transform 1.5s
        cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events: none;
}

.contact-entry:hover
.contact-entry-video {
    transform:
        scale(1.065);
}


.contact-entry-image-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.60) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.05) 100%
        );

    pointer-events: none;
}


.contact-entry-image-label {
    position: absolute;
    left: 27px;
    bottom: 27px;

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

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

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.6px;

    text-transform: uppercase;
}


.contact-entry-image-rule {
    width: 33px;
    height: 1px;

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


/* =========================================
   PANEL DERECHO
========================================= */

.contact-entry-panel {
    min-height: inherit;

    padding:
        clamp(55px, 6vw, 88px)
        clamp(42px, 7vw, 115px);

    display: flex;
    align-items: center;

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

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


.contact-entry-content {
    width:
        min(680px, 100%);

    margin:
        0
        auto;
}


.contact-entry-accent {
    width: 74px;
    height: 4px;

    margin-bottom: 24px;

    display: block;

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


.contact-entry-eyebrow {
    margin:
        0
        0
        15px;

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

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.2px;

    text-transform: uppercase;
}


.contact-entry-content h2 {
    max-width: 610px;

    margin:
        0
        0
        22px;

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

    font-size:
        clamp(38px, 4vw, 62px);

    font-weight: 900;
    line-height: 0.93;
    letter-spacing: -3px;

    text-transform: uppercase;
}


.contact-entry-content h2 span {
    display: block;

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


.contact-entry-description {
    max-width: 600px;

    margin:
        0
        0
        28px;

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

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


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

.contact-entry-whatsapp {
    width: 100%;

    min-height: 88px;

    padding:
        17px
        20px;

    display: grid;

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

    align-items: center;
    gap: 15px;

    border:
        1px solid rgba(22, 21, 19, 0.13);

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

    color:
        var(--color-white);

    transition:
        transform 0.35s
        cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease;
}


.contact-entry-whatsapp:hover {
    transform:
        translateY(-3px);

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


.contact-entry-whatsapp-icon {
    width: 43px;
    height: 43px;

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

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


.contact-entry-whatsapp-icon svg {
    width: 100%;
    height: 100%;

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


.contact-entry-whatsapp-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.contact-entry-whatsapp-label {
    color:
        var(--color-gold);

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.contact-entry-whatsapp-copy strong {
    font-size: 13px;
    letter-spacing: 0.3px;
}


.contact-entry-whatsapp-number {
    color:
        rgba(255, 255, 255, 0.64);

    font-size: 10px;
}


.contact-entry-whatsapp-arrow {
    color:
        var(--color-gold);

    font-size: 21px;

    transition:
        transform 0.35s ease;
}


.contact-entry-whatsapp:hover
.contact-entry-whatsapp-arrow {
    transform:
        translateX(5px);
}


/* =========================================
   SEPARADOR
========================================= */

.contact-entry-separator {
    margin:
        24px
        0;

    display: grid;

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

    align-items: center;
    gap: 14px;
}


.contact-entry-separator span {
    height: 1px;

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


.contact-entry-separator p {
    color:
        rgba(22, 21, 19, 0.48);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* =========================================
   FORMULARIO
========================================= */

.contact-entry-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.contact-entry-form-row {
    display: grid;

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

    gap: 20px;
}


.contact-entry-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.contact-entry-field > span {
    color:
        rgba(22, 21, 19, 0.58);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.contact-entry-field input,
.contact-entry-field select,
.contact-entry-field textarea {
    width: 100%;

    padding:
        10px
        0;

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

    border-radius: 0;

    outline: none;

    background-color:
        transparent;

    color:
        var(--color-black);

    font: inherit;

    font-size: 12px;

    transition:
        border-color 0.3s ease;
}


.contact-entry-field textarea {
    min-height: 82px;

    resize: vertical;
}


.contact-entry-field input:focus,
.contact-entry-field select:focus,
.contact-entry-field textarea:focus {
    border-color:
        var(--color-gold);
}


.contact-entry-submit {
    width: fit-content;

    min-height: 43px;

    padding:
        0
        19px;

    display: inline-flex;
    align-items: center;
    gap: 15px;

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

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

    color:
        var(--color-white);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


.contact-entry-submit:hover {
    border-color:
        var(--color-gold);

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

    color:
        var(--color-black);

    transform:
        translateY(-3px);
}


.contact-entry-email {
    margin-top: 21px;

    display: inline-block;

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

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================
   CONTACTO — TABLET
========================================= */

@media (min-width: 701px) and (max-width: 1000px) {

    .contact-entry-container {
        min-height: auto;

        grid-template-columns:
            minmax(280px, 38%)
            minmax(0, 62%);
    }


    .contact-entry-media {
        min-height:
            760px;
    }


    .contact-entry-video {
        object-fit: cover;

        object-position:
            center
            center;
    }


    .contact-entry-panel {
        min-height:
            760px;

        padding:
            46px
            32px;
    }


    .contact-entry-content {
        width: 100%;
    }


    .contact-entry-content h2 {
        font-size:
            clamp(31px, 4.8vw, 44px);

        line-height: 0.95;
        letter-spacing: -2px;
    }


    .contact-entry-description {
        font-size: 12px;
        line-height: 1.62;
    }


    .contact-entry-whatsapp {
        min-height: 82px;

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

        padding:
            15px;
    }


    .contact-entry-whatsapp-icon {
        width: 39px;
        height: 39px;
    }


    .contact-entry-form-row {
        grid-template-columns:
            1fr;

        gap: 18px;
    }

}


/* =========================================
   CONTACTO — CELULAR
========================================= */

@media (max-width: 700px) {

    .contact-entry-container {
        min-height: 0;

        grid-template-columns:
            1fr;
    }


    .contact-entry-media {
        min-height:
            min(128vw, 610px);
    }


    .contact-entry-video {
        object-fit: cover;

        object-position:
            center
            center;
    }


    .contact-entry-image-label {
        left: 18px;
        bottom: 18px;

        gap: 8px;

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


    .contact-entry-image-rule {
        width: 24px;
    }


    .contact-entry-panel {
        min-height: 0;

        padding:
            46px
            20px
            52px;
    }


    .contact-entry-accent {
        width: 58px;
        height: 3px;

        margin-bottom: 20px;
    }


    .contact-entry-eyebrow {
        margin-bottom: 12px;

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


    .contact-entry-content h2 {
        margin-bottom: 19px;

        font-size:
            clamp(29px, 9.5vw, 41px);

        line-height: 0.96;
        letter-spacing: -1.6px;
    }


    .contact-entry-description {
        margin-bottom: 24px;

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


    .contact-entry-whatsapp {
        min-height: 80px;

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

        gap: 12px;

        padding:
            14px;
    }


    .contact-entry-whatsapp-icon {
        width: 37px;
        height: 37px;
    }


    .contact-entry-whatsapp-copy strong {
        font-size: 12px;
    }


    .contact-entry-whatsapp-number {
        font-size: 9px;
    }


    .contact-entry-form-row {
        grid-template-columns:
            1fr;

        gap: 17px;
    }


    .contact-entry-form {
        gap: 17px;
    }


    .contact-entry-submit {
        width: 100%;

        justify-content: center;
    }


    .contact-entry-email {
        width: 100%;

        text-align: center;
    }

}

/* =========================================
   CONTACTO — ANIMACIÓN DE ENTRADA
========================================= */

.contact-entry
.contact-entry-media {
    opacity: 0;

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

    transform:
        translate3d(-30px, 0, 0);

    transition:
        opacity 0.8s ease,
        clip-path 1.15s
        cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.contact-entry
.contact-entry-panel {
    opacity: 0;

    transform:
        translate3d(30px, 0, 0);

    transition:
        opacity 0.85s ease 0.12s,
        transform 1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.12s;
}


.contact-entry
.contact-entry-accent {
    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.30s;
}


.contact-entry
.contact-entry-eyebrow,

.contact-entry
.contact-entry-content h2,

.contact-entry
.contact-entry-description,

.contact-entry
.contact-entry-whatsapp,

.contact-entry
.contact-entry-separator,

.contact-entry
.contact-entry-form,

.contact-entry
.contact-entry-email {
    opacity: 0;

    transform:
        translate3d(0, 18px, 0);

    transition:
        opacity 0.65s ease,
        transform 0.85s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.contact-entry.is-contact-visible
.contact-entry-media {
    opacity: 1;

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

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


.contact-entry.is-contact-visible
.contact-entry-panel {
    opacity: 1;

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


.contact-entry.is-contact-visible
.contact-entry-accent {
    transform:
        scaleX(1);
}


.contact-entry.is-contact-visible
.contact-entry-eyebrow,

.contact-entry.is-contact-visible
.contact-entry-content h2,

.contact-entry.is-contact-visible
.contact-entry-description,

.contact-entry.is-contact-visible
.contact-entry-whatsapp,

.contact-entry.is-contact-visible
.contact-entry-separator,

.contact-entry.is-contact-visible
.contact-entry-form,

.contact-entry.is-contact-visible
.contact-entry-email {
    opacity: 1;

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


.contact-entry.is-contact-visible
.contact-entry-eyebrow {
    transition-delay: 0.34s;
}


.contact-entry.is-contact-visible
.contact-entry-content h2 {
    transition-delay: 0.42s;
}


.contact-entry.is-contact-visible
.contact-entry-description {
    transition-delay: 0.50s;
}


.contact-entry.is-contact-visible
.contact-entry-whatsapp {
    transition-delay: 0.58s;
}


.contact-entry.is-contact-visible
.contact-entry-separator {
    transition-delay: 0.66s;
}


.contact-entry.is-contact-visible
.contact-entry-form {
    transition-delay: 0.74s;
}


.contact-entry.is-contact-visible
.contact-entry-email {
    transition-delay: 0.82s;
}

/* =========================================
   CONTACTO — ENTRADA INTERNA DEL VIDEO
========================================= */

.contact-entry
.contact-entry-video {
    opacity: 0;

    transform:
        scale(1.12);

    transition:
        opacity 1s ease 0.18s,
        transform 1.7s
        cubic-bezier(0.16, 1, 0.3, 1)
        0.18s;
}


.contact-entry.is-contact-visible
.contact-entry-video {
    opacity: 1;

    transform:
        scale(1.03);
}


/* Mantiene el acercamiento al pasar el cursor */

.contact-entry.is-contact-visible:hover
.contact-entry-video {
    transform:
        scale(1.065);
}


/* Movimiento reducido */

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

    .contact-entry
    .contact-entry-video {
        opacity: 1;

        transform: none;

        transition: none;
    }

}

/* =========================================
   BOTÓN FLOTANTE DE WHATSAPP
========================================= */

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

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

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

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

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

    color:
    var(--color-gold);

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

    cursor: pointer;

    opacity: 0;

    transform:
        translate3d(0, 18px, 0)
        scale(0.92);

    animation:
        floating-whatsapp-entry
        0.75s
        cubic-bezier(0.22, 1, 0.36, 1)
        1.1s
        forwards;

    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.35s
        cubic-bezier(0.22, 1, 0.36, 1);
}


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

    display: block;

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


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


    box-shadow:
        0 16px 42px
        rgba(0, 0, 0, 0.28);

    transform:
        translate3d(0, -4px, 0)
        scale(1.04);
}


.floating-whatsapp:active {
    transform:
        translate3d(0, -1px, 0)
        scale(0.97);
}


/* Texto que aparece al pasar el cursor */

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

    padding:
        8px
        11px;

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

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

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

    color:
        var(--color-white);

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;

    text-transform: uppercase;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(7px);

    pointer-events: none;

    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);
}


/* Animación inicial */

@keyframes floating-whatsapp-entry {

    from {
        opacity: 0;

        transform:
            translate3d(0, 18px, 0)
            scale(0.92);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

}


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

@media (max-width: 1000px) {

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

        right: 20px;
        bottom: 20px;
    }


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

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

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

        right: 16px;

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


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


    /*
       En celular no mostramos el texto lateral
       para que no cubra el contenido.
    */

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

}


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

@media (max-width: 390px) {

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

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


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

}


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

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

    .floating-whatsapp {
        opacity: 1;

        transform: none;

        animation: none;
        transition: none;
    }

}
/* =========================================
   MENÚ COMPARTIDO DE PROYECTOS
========================================= */

.projects-menu {
    position:
        relative;

    display:
        flex;

    align-items:
        center;
}


.projects-menu__trigger {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--color-black);

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

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        1px;

    line-height:
        1;

    text-transform:
        uppercase;

    cursor:
        pointer;
}


.projects-menu__trigger::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        1px;

    background:
        #EAA736;

    transition:
        width 0.3s ease;
}


.projects-menu__trigger:hover::after,
.projects-menu__trigger:focus-visible::after,
.projects-menu.is-open
.projects-menu__trigger::after,
.projects-menu.is-current
.projects-menu__trigger::after {
    width:
        calc(100% - 15px);
}


.header.header-scrolled
.projects-menu__trigger {
    font-size:
        10px;
}


.projects-menu__chevron {
    color:
        #EAA736;

    font-family:
        Arial,
        sans-serif;

    font-size:
        0.85rem;

    line-height:
        0.7;

    transform:
        translateY(-1px)
        rotate(0);

    transition:
        transform 0.28s ease;
}


.projects-menu.is-open
.projects-menu__chevron {
    transform:
        translateY(2px)
        rotate(180deg);
}


.projects-menu__panel {
    position:
        absolute;

    left:
        -24px;

    top:
        calc(100% + 22px);

    z-index:
        10050;

    width:
        238px;

    padding:
        9px;

    border:
        1px solid
        rgba(22, 21, 19, 0.1);

    border-top:
        3px solid
        #EAA736;

    background:
        #FFFFFF;

    box-shadow:
        0 24px 50px
        rgba(22, 21, 19, 0.17);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-9px);

    transition:
        opacity 0.24s ease,
        visibility 0.24s ease,
        transform 0.32s
        cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events:
        none;
}


.projects-menu.is-open
.projects-menu__panel {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

    pointer-events:
        auto;
}


.projects-menu__item {
    display:
        grid;

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

    align-items:
        center;

    gap:
        8px;

    min-height:
        42px;

    padding:
        7px 10px;

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

    color:
        #161513;

    text-decoration:
        none;

    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        padding-left 0.25s ease;
}


.projects-menu__item:last-child {
    border-bottom:
        0;
}


.projects-menu__number {
    color:
        #EAA736;

    font-family:
        Arial,
        sans-serif;

    font-size:
        0.56rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;
}


.projects-menu__label {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        0.68rem;

    font-weight:
        500;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    color:
        #161513;
}


.projects-menu__item:hover,
.projects-menu__item.is-active {
    background:
        rgba(234, 167, 54, 0.09);

    color:
        #161513;

    padding-left:
        14px;
}


.projects-menu__item:hover
.projects-menu__label,
.projects-menu__item.is-active
.projects-menu__label {
    color:
        #EAA736;
}


@media (max-width: 1000px) {

    .projects-menu--mobile {
        width:
            min(340px, 100%);

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .projects-menu--mobile
    .projects-menu__trigger {
        justify-content:
            center;

        width:
            100%;

        font-size:
            11px;

        font-weight:
            700;

        letter-spacing:
            2px;
    }


    .projects-menu--mobile
    .projects-menu__trigger::after {
        left:
            50%;

        transform:
            translateX(-50%);
    }


    .projects-menu--mobile.is-open
    .projects-menu__trigger::after,
    .projects-menu--mobile.is-current
    .projects-menu__trigger::after {
        width:
            62px;
    }


    .projects-menu--mobile
    .projects-menu__panel {
        position:
            static;

        width:
            100%;

        max-height:
            0;

        margin:
            0;

        padding:
            0 9px;

        border-top-width:
            0;

        opacity:
            0;

        visibility:
            hidden;

        overflow:
            hidden;

        transform:
            none;

        transition:
            max-height 0.38s ease,
            margin-top 0.28s ease,
            padding 0.28s ease,
            opacity 0.24s ease,
            visibility 0.24s ease;
    }


    .projects-menu--mobile.is-open
    .projects-menu__panel {
        max-height:
            290px;

        margin-top:
            16px;

        padding:
            9px;

        border-top-width:
            3px;

        opacity:
            1;

        visibility:
            visible;
    }


    .projects-menu--mobile
    .projects-menu__item {
        min-height:
            40px;
    }

}


/* =========================================
   HEADER UNIFICADO — TODAS LAS PÁGINAS
========================================= */

.header {
    width: 100%;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: var(--color-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition:
        height 0.35s ease,
        box-shadow 0.35s ease;
}

.navbar {
    width: min(1100px, 94%);
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.nav-group {
    display: flex;
    align-items: center;
}

.nav-left {
    justify-content: flex-start;
}

.nav-right {
    justify-content: flex-end;
}

.nav-group a,
.projects-menu__trigger {
    font-family: var(--font-primary);
    font-weight: 500;
    text-transform: uppercase;
}

.logo {
    display: flex;
    align-items: center;
    justify-self: center;
}

.logo-image {
    display: block;
    width: auto;
}

.nav-group a[aria-current="page"]::after {
    width: 100%;
}

@media (min-width: 1001px) {

    :root {
        --header-height: 48px;
        --header-height-scrolled: 48px;
    }

    .header,
    .header.header-scrolled {
        height: 48px;
    }

    .navbar {
        height: 48px;
    }

    .nav-group,
    .header.header-scrolled .nav-group {
        gap: 20px;
    }

    .nav-group a,
    .projects-menu__trigger,
    .header.header-scrolled .nav-group a,
    .header.header-scrolled .projects-menu__trigger {
        font-size: 9px;
        letter-spacing: 0.7px;
        line-height: 1;
    }

    .logo-image,
    .header.header-scrolled .logo-image {
        height: 27px;
    }

}

@media (max-width: 1000px) {

    :root {
        --header-height: 54px;
        --header-height-scrolled: 54px;
    }

    .header,
    .header.header-scrolled {
        height: 54px;
    }

    .navbar {
        width: 92%;
        height: 54px;
        grid-template-columns: 44px 1fr 44px;
    }

    .nav-group {
        display: none;
    }

    .logo {
        grid-column: 2;
    }

    .logo-image,
    .header.header-scrolled .logo-image {
        height: 31px;
    }

    .menu-button {
        width: 44px;
        height: 44px;
        grid-column: 3;
        justify-self: end;
        font-size: 24px;
        line-height: 1;
    }

    .mobile-menu a,
    .projects-menu--mobile .projects-menu__trigger {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 19px;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 1.2;
        text-align: center;
        text-transform: none;
    }

}


/* =========================================
   MENÚ PROYECTOS — EXTRA COMPACTO
========================================= */

@media (min-width: 1001px) {

    .projects-menu__panel {
        left: -8px;

        top:
            calc(100% + 13px);

        width:
            150px;

        padding:
            3px 5px;

        border:
            1px solid
            rgba(22, 21, 19, 0.08);

        border-top:
            2px solid
            #EAA736;

        box-shadow:
            0 10px 24px
            rgba(22, 21, 19, 0.10);
    }


    .projects-menu__item {
        grid-template-columns:
            18px
            minmax(0, 1fr);

        gap:
            5px;

        min-height:
            25px;

        padding:
            3px 5px;

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


    .projects-menu__number {
        font-size:
            0.40rem;

        letter-spacing:
            0.04em;
    }


    .projects-menu__label {
        font-size:
            0.49rem;

        letter-spacing:
            0.09em;
    }


    .projects-menu__item:hover,
    .projects-menu__item.is-active {
        padding-left:
            7px;

        background:
            rgba(234, 167, 54, 0.06);
    }

}

/* =========================================
   SISTEMA TIPOGRÁFICO GLOBAL — ANDYMCARRI
========================================= */


/* FUENTE PRINCIPAL
   Navegación, interfaz, párrafos y elementos pequeños */

body,
p,
a,
button,
input,
textarea,
select,
label {
    font-family:
        var(--font-primary) !important;
}


/* FUENTE EDITORIAL
   Títulos principales de la web */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        var(--font-editorial) !important;
}


/* =========================================
   EXCEPCIONES
   Títulos que queremos conservar modernos
========================================= */


/* =========================================
   CABECERAS PRINCIPALES
   Figtree — misma familia visual
========================================= */

.ld-hero__title,
.visual-hero h1,
.experiences-heading h1,
.brand-statement-copy h2 {
    font-family:
        var(--font-primary) !important;
}

.brand-statement-copy h2 {
    font-weight:
        800 !important;

    letter-spacing:
        -0.05em !important;

    line-height:
        0.96 !important;
}

/* EXPERIENCIAS — CABECERA PRINCIPAL */

.experiences-heading h1 {
    font-weight:
        700 !important;

    letter-spacing:
        -0.05em !important;

    line-height:
        0.90 !important;
}

/* MENÚ PRINCIPAL */

.nav-group a,
.projects-menu__trigger,
.projects-menu__item,
.mobile-menu a {
    font-family:
        var(--font-primary) !important;
}


/* BOTONES */

.ld-btn,
.sample-actions a,
button {
    font-family:
        var(--font-primary) !important;
}


/* TEXTOS PEQUEÑOS / ETIQUETAS */

.project-section-heading__eyebrow,
.direction-workflow__eyebrow,
.direction-method__eyebrow,
.direction-experiences-intro p,
.direction-clients-heading > p {
    font-family:
        var(--font-primary) !important;
}