/* =====================================================
   QUIÉNES SOMOS
   SOLO ESTILOS ESPECÍFICOS DE ESTA PÁGINA
===================================================== */


/* =====================================================
   MENÚ ACTIVO
===================================================== */

.desktop-nav a.active {
    color: var(--gold-light);
}

.desktop-nav a.active::after {
    width: 100%;
}


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

.about-hero {
    padding-top: 78px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(232, 173, 50, 0.08),
            transparent 35%
        ),
        #090909;

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


.about-hero-grid {
    min-height: 690px;

    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    align-items: stretch;

    gap: 70px;
}


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

.about-hero-copy {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        80px
        0;
}


.about-hero-copy .eyebrow {
    margin-bottom: 24px;
}


.about-hero-copy h1 { 
    margin: 
        0 
        0 
        28px; 
 
    font-size: 
        clamp( 
            3.6rem, 
            6.3vw, 
            5.9rem 
        ); 
 
    letter-spacing: 
        -0.04em; 
}


.about-hero-copy h1 span {
    display: block;
}


.about-hero-accent {
    color:
        var(--gold-light);
}


.about-hero-description { 
    max-width: 580px; 
 
    margin: 
        0 
        0 
        34px; 
 
    color: 
        #dedad2; 
 
    font-size: 
        1.08rem; 
}


.about-hero-copy .button {
    align-self: flex-start;

    width: auto;

    min-width: 250px;
}


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

.about-hero-media {
    position: relative;

    overflow: hidden;

    min-height: 690px;
}


.about-hero-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    object-position:
        center center;
}


/* =====================================================
   ESSENZA
===================================================== */

.about-essence {
    background:
        #0b0b0b;
}


.about-split {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 80px;

    align-items: center;
}


.about-section-copy {
    max-width: 620px;
}


.about-section-copy h2 {
    margin-bottom: 24px;
}


.about-section-copy p {
    margin:
        0
        0
        20px;

    color:
        var(--muted);

    font-size:
        1.05rem;
}


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

.about-image {
    overflow: hidden;

    margin: 0;

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

    border-radius:
        var(--radius);

    background:
        #111;
}


.about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.about-image-tall {
    aspect-ratio:
        4 / 5;
}


.about-image-wide {
    aspect-ratio:
        16 / 10;
}


/* =====================================================
   IL FUOCO
===================================================== */

.about-fire {
    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    overflow: hidden;
}


.about-fire-image {
    position: absolute;

    inset: -8%;

    overflow: hidden;
}


.about-fire-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center center;

    transform:
        scale(1.08);

    animation:
        fenixFireZoomOut 14s ease-out infinite alternate;

    will-change:
        transform;
}

@keyframes fenixFireZoomOut {

    from {
        transform:
            scale(1.08);
    }

    to {
        transform:
            scale(1);
    }

}


.about-fire-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.74) 42%,
            rgba(0, 0, 0, 0.25) 75%,
            rgba(0, 0, 0, 0.10) 100%
        );
}


.about-fire-content {
    position: relative;

    z-index: 2;
}


.about-fire-content h2 {
    max-width: 700px;

    margin-bottom: 24px;
}


.about-fire-content p {
    max-width: 600px;

    margin: 0;

    color:
        #dedad2;

    font-size:
        1.08rem;
}


/* =====================================================
   FATTO A MANO
===================================================== */

.about-craft {
    background:
        #0b0b0b;
}


.about-craft-grid {
    display: grid;

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

    gap: 18px;
}


.about-craft-card {
    position: relative;

    min-height: 280px;

    perspective: 1200px;
}


.about-craft-card-inner {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

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


.about-craft-card.is-flipped .about-craft-card-inner {
    transform:
        rotateY(180deg);
}


.about-craft-face {
    position: absolute;

    inset: 0;

    padding:
        34px;

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

    border-radius:
        var(--radius);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


.about-craft-front {
    background:
        linear-gradient(
            145deg,
            #151515,
            #0e0e0e
        );
}


.about-craft-back {
    display: flex;

    flex-direction: column;

    justify-content: center;

    transform:
        rotateY(180deg);

    background:
        radial-gradient(
            circle at top right,
            rgba(232, 173, 50, 0.12),
            transparent 45%
        ),
        #111;
}

.about-craft-flip {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    display: flex;

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

    padding: 0;

    color:
        var(--gold-light);

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

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, 0.45);

    font-size:
        1.15rem;

    cursor:
        pointer;
}


.about-chef-label {
    margin-bottom:
        18px;

    color:
        var(--gold);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.about-craft-back blockquote {
    margin:
        0
        0
        22px;

    color:
        #f1eee8;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        1.35rem;

    line-height:
        1.45;
}


.about-chef-signature {
    color:
        var(--muted);

    font-size:
        0.78rem;
}

.about-craft-number {
    margin-bottom: 55px;

    color:
        var(--gold);

    font-size:
        0.8rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;
}


.about-craft-card h3 {
    margin-bottom: 12px;

    font-size:
        1.7rem;
}


.about-craft-card p {
    margin: 0;

    color:
        var(--muted);
}


/* =====================================================
   MEDELLÍN
===================================================== */

.about-medellin {
    background:
        #090909;
}


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

.about-final {
    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    text-align: center;
}


.about-final-image {
    position: absolute;

    inset: 0;
}


.about-final-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center center;

    transform:
        scale(1.08);

    animation:
        fenixFinalZoomOut 16s ease-out infinite alternate;

    will-change:
        transform;
}

@keyframes fenixFinalZoomOut {

    from {
        transform:
            scale(1.08);
    }

    to {
        transform:
            scale(1);
    }

}


.about-final-overlay {
    position: absolute;

    inset: 0;

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


.about-final-content {
    position: relative;

    z-index: 2;
}


.about-final-content h2 {
    margin-bottom: 20px;
}


.about-final-content p {
    margin:
        0
        0
        30px;

    color:
        #dedad2;

    font-size:
        1.05rem;
}


.about-final-buttons {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}


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

@media (max-width: 980px) {

    .about-hero-grid {
        min-height: auto;

        grid-template-columns:
            1fr;

        gap: 0;
    }


    .about-hero-copy {
        padding:
            90px
            0
            55px;
    }


    .about-hero-media {
        min-height: auto;
    }


    .about-hero-media img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }


    .about-split {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .about-craft-grid {
        grid-template-columns:
            1fr;
    }


    .about-craft-card {
        min-height: 220px;
    }


    .about-craft-number {
        margin-bottom: 35px;
    }

}


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

@media (max-width: 680px) {

    .about-hero {
        padding-top: 70px;
    }


    .about-hero-copy {
        padding:
            70px
            0
            40px;
    }


    .about-hero-copy h1 {
        font-size:
            clamp(
                3.1rem,
                14vw,
                4.8rem
            );
    }


    .about-hero-description {
        max-width: 100%;
    }


    .about-hero-copy .button {
        width: 100%;

        min-width: 0;

        align-self: stretch;

        justify-content: center;
    }


    .about-hero-media {
        width:
            calc(100% + 30px);

        min-height:
            0;

        margin-left:
            -15px;

        height:
            100%;
    }


    .about-hero-media img {
        width:
            100%;

        height:
            100%;

        object-fit:
            cover;

        object-position:
            center top;
    }


    .about-image-tall,
    .about-image-wide {
        aspect-ratio:
            auto;
    }


    .about-image img {
        height: auto;
    }


    .about-fire {
        min-height: 540px;
    }


    .about-fire-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.35) 0%,
                rgba(0, 0, 0, 0.88) 100%
            );
    }


    .about-final {
        min-height: 500px;
    }


    .about-final-buttons {
        width: 100%;
    }


    .about-final-buttons .button {
        flex: 1;
    }
    
        .about-craft-card {
        min-height: 250px;
    }


    .about-craft-face {
        padding:
            22px
            18px;
    }


    .about-craft-back {
        padding:
            22px
            18px;
    }


    .about-chef-label {
        margin-bottom:
            12px;

        font-size:
            0.62rem;

        letter-spacing:
            0.13em;
    }


    .about-craft-back blockquote {
        margin:
            0
            0
            14px;

        font-size:
            1rem;

        line-height:
            1.42;
    }


    .about-chef-signature {
        font-size:
            0.7rem;
    }


    .about-craft-flip {
        top: 12px;
        right: 12px;

        width: 32px;
        height: 32px;

        font-size:
            0.95rem;
    }
    
    .about-hero-media::after {
        content: "";

        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        height: 4px;

        z-index: 3;

        background:
            linear-gradient(
                90deg,
                #009246 0%,
                #009246 33.333%,
                #ffffff 33.333%,
                #ffffff 66.666%,
                #ce2b37 66.666%,
                #ce2b37 100%
            );
    }
    
    .about-hero {
        padding-top: 70px;
    }


    .about-hero-copy {
        padding:
            70px
            0
            40px;
    }

}

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

    .about-fire-image img {
        animation: none;

        transform:
            scale(1);
    }
    
    .about-final-image img {
        animation: none;
    
        transform:
            scale(1);
    }

}