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


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    background: #171514;
    color: #ffffff;

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


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



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

.hero {

    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 650px;

    overflow: hidden;

    background: #26211e;
}



/* =========================================================
   FOTO DE FONDO
========================================================= */

.hero__image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;


    /*
        Fotografía genérica temporal.

        Después sustituimos esta URL
        por la fotografía real.
    */

    background-image:
        url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2400&q=90");


    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;


    transform: scale(1.01);

}



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

.hero__overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(18, 16, 15, 0.78) 0%,
            rgba(18, 16, 15, 0.48) 35%,
            rgba(18, 16, 15, 0.12) 72%,
            rgba(18, 16, 15, 0.20) 100%
        );


    z-index: 1;

}



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

.header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 110px;

    padding:

        0

        4.9%;


    display: flex;

    align-items: center;

    justify-content: space-between;


    z-index: 10;

}



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

.logo {

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


    font-size: 19px;

    font-weight: 400;

    letter-spacing: 7px;

    line-height: 1;

    white-space: nowrap;


    color: #ffffff;

}

/* =========================================================
   MENU HAMBURGUESA
========================================================= */

.menu-toggle {

    display: none;

    position: absolute;

    z-index: 30;

    top: 16px;

    right: 24px;

    width: 43px;

    height: 43px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.55);

    background: rgba(20,18,17,.18);

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    backdrop-filter: blur(4px);

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


.menu-toggle span {

    display: block;

    width: 17px;

    height: 1px;

    background: #fff;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


/* =========================================================
   ESTADO ABIERTO
========================================================= */

.menu-toggle.is-open span:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);
}


.menu-toggle.is-open span:nth-child(2) {

    opacity: 0;
}


.menu-toggle.is-open span:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);
}

/* =========================================================
   HAMBURGUESA — BODAS
========================================================= */

.bodas-header .menu-toggle {

    border-color:
        rgba(35,32,29,.55);

    background:
        rgba(255,255,255,.15);
}


.bodas-header .menu-toggle span {

    background:
        #24211f;
}

/* =========================================================
   MENU MOVIL
========================================================= */

.mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 25;

    width: 100%;
    height: 100%;

    background:
        rgba(17,16,15,.98);

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


/* =========================================================
   MENU ABIERTO
========================================================= */

.mobile-menu.is-open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


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

.mobile-menu__inner {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    padding:
        28px
        25px
        25px;
}


/* =========================================================
   PARTE SUPERIOR
========================================================= */

.mobile-menu__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 25px;

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


.mobile-menu__label {

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

    font-size: 18px;

    letter-spacing: 3.5px;

    color: #fff;
}


/* =========================================================
   CERRAR
========================================================= */

.mobile-menu__close {

    width: 40px;

    height: 40px;

    padding: 0;

    border: 1px solid
        rgba(255,255,255,.35);

    background: transparent;

    color: #fff;

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

    font-size: 27px;

    font-weight: 200;

    line-height: 1;

    cursor: pointer;
}


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

.mobile-menu__navigation {

    display: flex;

    flex-direction: column;

    margin-top: 48px;
}


.mobile-menu__navigation a {

    display: flex;

    align-items: center;

    min-height: 57px;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

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

    font-size: 34px;

    font-weight: 400;

    line-height: 1;

    color: #f5f2ec;

    text-decoration: none;

    transition:
        padding-left .3s ease,
        opacity .3s ease;
}


.mobile-menu__navigation a:hover {

    padding-left: 8px;

    opacity: .65;
}


.mobile-menu__navigation a.active {

    font-style: italic;
}


/* =========================================================
   PARTE INFERIOR
========================================================= */

.mobile-menu__bottom {

    margin-top: auto;

    padding-top: 25px;

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


.mobile-menu__bottom > span {

    display: block;

    margin-bottom: 18px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 18px;

    font-style: italic;

    color:
        rgba(255,255,255,.68);
}


.mobile-menu__bottom a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 47px;

    padding:
        0
        16px;

    border:
        1px solid
        rgba(255,255,255,.55);

    color: #fff;

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

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-decoration: none;
}


.mobile-menu__bottom i {

    font-size: 18px;

    font-style: normal;

    font-weight: 300;
}

/* =========================================================
   RESPONSIVE — MENU
========================================================= */

@media (max-width: 820px) {

    .menu-toggle {

        display: flex;
    }


    /* -----------------------------------------
       NAV DESKTOP — INDEX
    ----------------------------------------- */

    .navigation {

        display: none;
    }


    /* -----------------------------------------
       NAV DESKTOP — BODAS
    ----------------------------------------- */

    .bodas-header__navigation {

        display: none;
    }

}



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

.navigation {

    display: flex;

    align-items: center;

    gap: 31px;

    margin-left: auto;

    margin-right: 42px;

}


.navigation a {

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


    font-size: 11px;

    font-weight: 400;

    letter-spacing: 0.3px;

    text-transform: none;

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


    transition:
        opacity 0.3s ease;

}


.navigation a:hover {

    opacity: 0.55;

}



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

.header__button {

    display: flex;

    align-items: center;

    justify-content: center;


    height: 40px;

    min-width: 215px;

    padding: 0 24px;


    border:

        1px

        solid

        rgba(255,255,255,0.75);


    font-size: 9px;

    font-weight: 500;

    letter-spacing: 1.8px;

    white-space: nowrap;


    transition:

        background 0.3s ease,

        color 0.3s ease;

}


.header__button:hover {

    background: #ffffff;

    color: #211e1c;

}



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

.hero__content {

    position: absolute;

    z-index: 5;


    left: 6.1%;

    top: 50%;

    transform: translateY(-37%);


    width: 500px;

}



/* =========================================================
   FRASE SCRIPT
========================================================= */

.hero__script {

    margin-bottom: 20px;


    font-family:
        "Cormorant Garamond",
        Georgia,
        cursive;


    font-size: 25px;

    font-style: italic;

    font-weight: 400;


    line-height: 1.1;


    color: #ffffff;


    text-shadow:

        0 2px 12px rgba(0,0,0,0.35);

}



/* =========================================================
   H1
========================================================= */

.hero__title {

    margin: 0 0 25px;


    font-family:

        "Times New Roman",

        Times,

        serif;


    font-size: clamp(58px, 5vw, 82px);

    font-weight: 400;


    line-height: 0.96;


    letter-spacing: -2.5px;


    color: #ffffff;


    text-shadow:

        0 2px 15px rgba(0,0,0,0.30);

}



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

.hero__description {

    margin-bottom: 27px;


    font-family:

        Arial,

        Helvetica,

        sans-serif;


    font-size: 16px;

    font-weight: 400;


    line-height: 1.45;


    color:

        rgba(
            255,
            255,
            255,
            0.94
        );


}



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

.hero__cta {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;


    width: 160px;

    height: 42px;


    padding: 0 17px 0 25px;


    border:

        1px

        solid

        rgba(255,255,255,0.9);


    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.7px;


    color: #ffffff;


    transition:

        background 0.3s ease,

        color 0.3s ease;

}


.hero__cta:hover {

    background: #ffffff;

    color: #211e1c;

}


.hero__arrow {

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

    font-size: 22px;

    font-weight: 300;

    line-height: 1;

}



/* =========================================================
   INDICADOR LATERAL
========================================================= */

.hero__indicator {

    position: absolute;

    z-index: 5;


    right: 4.8%;

    top: 48%;


    width: 25px;

    height: 120px;


    display: flex;

    flex-direction: column;

    align-items: center;

}



/* =========================================================
   DOT SUPERIOR
========================================================= */

.hero__indicator-dot {

    width: 8px;

    height: 8px;


    border:

        1px

        solid

        rgba(255,255,255,0.9);


    border-radius: 50%;

}



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

.hero__indicator-line {

    width: 1px;

    height: 76px;

    margin: 5px 0;


    background:

        rgba(
            255,
            255,
            255,
            0.65
        );

}



/* =========================================================
   DOT INFERIOR
========================================================= */

.hero__indicator-dot--bottom {

    width: 12px;

    height: 12px;


    background:

        rgba(
            255,
            255,
            255,
            0.15
        );


    border:

        1px

        solid

        rgba(255,255,255,0.9);

}



/* =========================================================
   CONTADOR
========================================================= */

.hero__counter {

    position: absolute;

    z-index: 5;


    left: 6.1%;

    bottom: 38px;


    display: flex;

    align-items: center;


    gap: 5px;


    font-family:

        Arial,

        Helvetica,

        sans-serif;


    font-size: 9px;

    font-weight: 400;


    letter-spacing: 0.8px;


    color:

        rgba(
            255,
            255,
            255,
            0.95
        );

}



/* =========================================================
   LÍNEA DEL CONTADOR
========================================================= */

.hero__counter-line {

    width: 48px;

    height: 1px;


    margin-left: 7px;


    background:

        rgba(
            255,
            255,
            255,
            0.75
        );

}



/* =========================================================
   FIRMA
========================================================= */

.hero__signature {

    position: absolute;

    z-index: 5;


    right: 5.8%;

    bottom: 32px;


    display: flex;

    flex-direction: column;

    align-items: flex-start;


    font-family:
        "Cormorant Garamond",
        Georgia,
        cursive;


    font-size: 18px;

    font-style: italic;


    line-height: 1.1;


    color:

        rgba(
            255,
            255,
            255,
            0.95
        );


    text-shadow:

        0 2px 8px rgba(0,0,0,0.35);

}



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

@media (max-width: 1100px) {

    .navigation {

        gap: 18px;

        margin-right: 20px;

    }


    .navigation a {

        font-size: 10px;

    }


    .header__button {

        min-width: 190px;

        font-size: 8px;

    }


    .hero__content {

        left: 6%;

    }

}



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

@media (max-width: 800px) {

    .hero {

        min-height: 680px;

    }


    .header {

        height: 85px;

        padding: 0 25px;

    }


    .logo {

        font-size: 16px;

        letter-spacing: 5px;

    }


    .navigation {

        display: none;

    }


    .header__button {

        min-width: 0;

        height: 36px;

        padding: 0 15px;

        font-size: 8px;

        letter-spacing: 1.3px;

    }


    .hero__content {

        left: 25px;

        right: 25px;

        top: auto;

        bottom: 110px;

        transform: none;

        width: auto;

    }


    .hero__script {

        font-size: 22px;

        margin-bottom: 16px;

    }


    .hero__title {

        font-size: clamp(48px, 13vw, 70px);

        letter-spacing: -1.5px;

        margin-bottom: 20px;

    }


    .hero__description {

        font-size: 15px;

        line-height: 1.5;

        margin-bottom: 23px;

    }


    .hero__cta {

        width: 155px;

        height: 43px;

    }


    .hero__indicator {

        display: none;

    }


    .hero__counter {

        left: 25px;

        bottom: 30px;

    }


    .hero__signature {

        right: 25px;

        bottom: 27px;

        font-size: 15px;

    }

}



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

@media (max-width: 500px) {

    .header__button {

        display: none;

    }


    .hero__image {

        background-position: 58% center;

    }


    .hero__overlay {

        background:

            linear-gradient(
                180deg,
                rgba(18,16,15,0.25) 0%,
                rgba(18,16,15,0.32) 35%,
                rgba(18,16,15,0.75) 100%
            );

    }


    .hero__content {

        bottom: 100px;

    }


    .hero__script {

        font-size: 20px;

    }


    .hero__description {

        max-width: 330px;

    }


    .hero__signature {

        display: none;

    }

}

/* =========================================================
   BLOQUE 02
   PERFIL / FILOSOFÍA
========================================================= */


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

.profile {

    width: 100%;

    min-height: 560px;

    height: 560px;

    display: grid;

    grid-template-columns: 50% 50%;

    background: #f6f4f1;

    color: #24211f;

    overflow: hidden;

}



/* =========================================================
   IMAGEN
========================================================= */

.profile__image {

    width: 100%;

    height: 560px;

    min-height: 0;

    overflow: hidden;

}


.profile__image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

}



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

.profile__content {

    display: flex;

    flex-direction: column;

    justify-content: center;


    padding:

        50px

        7.2vw

        50px

        6.1vw;

}



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

.section-label {

    display: block;

    margin-bottom: 25px;


    font-family:

        Arial,

        Helvetica,

        sans-serif;


    font-size: 11px;

    font-weight: 500;

    letter-spacing: 4px;


    color: #77716c;

}



/* =========================================================
   TITULO
========================================================= */

.profile__title {

    margin: 0 0 18px;


    font-family:

        "Times New Roman",

        Times,

        serif;


    font-size: clamp(52px, 4.2vw, 74px);

    font-weight: 400;


    line-height: 0.91;


    letter-spacing: -2.5px;


    color: #24211f;

}



/* =========================================================
   FRASE SCRIPT
========================================================= */

.profile__script {

    margin: 0 0 30px;


    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;


    font-size: 26px;

    font-style: italic;

    font-weight: 400;


    line-height: 1.1;


    color: #77716c;

}



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

.profile__text {

    max-width: 650px;

}


.profile__text p {

    margin: 0 0 20px;


    font-family:

        Arial,

        Helvetica,

        sans-serif;


    font-size: 14px;

    font-weight: 400;


    line-height: 1.55;


    color: #77716c;

}


.profile__text p:last-child {

    margin-bottom: 0;

}



/* =========================================================
   FIRMA
========================================================= */

.profile__signature {

    display: flex;

    align-items: center;


    margin-top: 15px;

}


.profile__signature span {

    display: block;


    width: 2px;

    height: 24px;


    margin-right: 20px;


    background: #ddd8d2;

}


.profile__signature p {

    margin: 0;


    font-family:

        Arial,

        Helvetica,

        sans-serif;


    font-size: 13px;

    font-style: italic;

    font-weight: 400;


    color: #77716c;

}



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

@media (max-width: 1100px) {

    .profile {

        min-height: 520px;

        height: 520px;

    }


    .profile__image {

        height: 520px;

    }


    .profile__content {

        padding:

            45px

            5vw

            45px

            5vw;

    }


    .section-label {

        margin-bottom: 22px;

    }


    .profile__title {

        font-size: clamp(48px, 5vw, 65px);

    }


    .profile__script {

        font-size: 24px;

        margin-bottom: 25px;

    }


    .profile__text p {

        font-size: 13px;

        line-height: 1.55;

        margin-bottom: 16px;

    }


    .profile__signature {

        margin-top: 10px;

    }

}



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

@media (max-width: 800px) {

    .profile {

        display: flex;

        flex-direction: column;

        height: auto;

        min-height: auto;

        overflow: visible;

    }


    .profile__image {

        width: 100%;

        height: 430px;

        min-height: 0;

    }


    .profile__content {

        width: 100%;

        min-height: 0;


        padding:

            60px

            25px

            65px;

    }


    .section-label {

        margin-bottom: 27px;

        font-size: 10px;

        letter-spacing: 3.5px;

    }


    .profile__title {

        font-size: clamp(50px, 14vw, 70px);

        letter-spacing: -2px;

        margin-bottom: 18px;

    }


    .profile__script {

        font-size: 23px;

        margin-bottom: 32px;

    }


    .profile__text p {

        font-size: 15px;

        line-height: 1.7;

        margin-bottom: 22px;

    }


    .profile__signature {

        margin-top: 12px;

    }

}



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

@media (max-width: 500px) {

    .profile__image {

        height: 380px;

    }


    .profile__content {

        padding:

            55px

            24px

            60px;

    }


    .profile__title {

        font-size: 50px;

    }


    .profile__script {

        font-size: 21px;

    }

}



/* =========================================================
   BLOQUE 03
   BODAS
========================================================= */


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

.weddings {

    position: relative;

    width: 100%;

    min-height: 760px;

    background: #f6f4f1;

    color: #24211f;

    overflow: hidden;

}


.weddings__container {

    width: 100%;

    min-height: 760px;

    display: grid;

    grid-template-columns: 43% 57%;

    align-items: center;

}



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

.weddings__content {

    padding:

        80px

        5vw

        80px

        6.1vw;

}


.weddings__content .section-label {

    margin-bottom: 34px;

}



/* =========================================================
   TITULO
========================================================= */

.weddings__title {

    margin: 0 0 30px;


    font-family:

        "Times New Roman",

        Times,

        serif;


    font-size: clamp(54px, 4.1vw, 76px);

    font-weight: 400;


    line-height: 0.96;


    letter-spacing: -2.5px;


    color: #24211f;

}



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

.weddings__text {

    max-width: 470px;

    margin: 0 0 34px;


    font-family:

        Arial,

        Helvetica,

        sans-serif;


    font-size: 15px;

    font-weight: 400;


    line-height: 1.65;


    color: #77716c;

}



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

.weddings__cta {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;


    width: 168px;

    height: 42px;


    padding:

        0

        18px

        0

        25px;


    background: #24211f;

    border: 1px solid #24211f;


    color: #ffffff;


    font-family:

        Arial,

        Helvetica,

        sans-serif;


    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.7px;


    transition:

        background 0.35s ease,

        color 0.35s ease;

}


.weddings__cta:hover {

    background: transparent;

    color: #24211f;

}


.weddings__cta-arrow {

    font-size: 21px;

    font-weight: 300;

    line-height: 1;

}



/* =========================================================
   ÁREA VISUAL
========================================================= */

.weddings__visual {

    position: relative;

    width: 100%;

    height: 620px;

}



/* =========================================================
   FOTOS
========================================================= */

.weddings__photo {

    position: absolute;

    margin: 0;

    overflow: hidden;

}


.weddings__photo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* =========================================================
   FOTO PRINCIPAL
========================================================= */

.weddings__photo--main {

    top: 20px;

    left: 0;

    width: 64%;

    height: 580px;

    z-index: 2;


    animation:

        weddingMainReveal

        1.1s

        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )

        both;

}


@keyframes weddingMainReveal {

    from {

        opacity: 0;

        transform:
            translateY(35px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}



/* =========================================================
   FOTO SECUNDARIA
========================================================= */

.weddings__photo--secondary {

    top: 40px;

    right: 7%;

    width: 30%;

    height: 365px;

    z-index: 3;


    animation:

        weddingSecondaryReveal

        1.1s

        0.15s

        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )

        both;

}


@keyframes weddingSecondaryReveal {

    from {

        opacity: 0;

        transform:
            translateY(55px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}



/* =========================================================
   MICRO PARALLAX
========================================================= */

.weddings__photo--main {

    transition:
        transform 0.15s linear;

}


.weddings__photo--secondary {

    transition:
        transform 0.15s linear;

}



/* =========================================================
   CAPTION
========================================================= */

.weddings__caption {

    position: absolute;

    right: 8%;

    bottom: 105px;

    z-index: 5;


    display: flex;

    align-items: flex-start;

}


.weddings__caption-line {

    display: block;

    width: 1px;

    height: 64px;

    margin-right: 20px;


    background: #a9a39d;

}


.weddings__caption p {

    margin: 0;


    font-family:
        "Cormorant Garamond",
        Georgia,
        cursive;


    font-size: 20px;

    font-weight: bold;

    line-height: 1.5;




    color: #77716c;

}



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

@media (max-width: 1100px) {

    .weddings {

        min-height: 680px;

    }


    .weddings__container {

        min-height: 680px;

    }


    .weddings__content {

        padding:

            70px

            4vw

            70px

            5vw;

    }


    .weddings__title {

        font-size: clamp(48px, 5vw, 65px);

    }


    .weddings__text {

        font-size: 14px;

    }


    .weddings__visual {

        height: 550px;

    }


    .weddings__photo--main {

        height: 510px;

    }


    .weddings__photo--secondary {

        height: 245px;

    }


    .weddings__caption {

        bottom: 80px;

    }

}



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

@media (max-width: 800px) {

    .weddings {

        min-height: auto;

    }


    .weddings__container {

        display: flex;

        flex-direction: column;

        min-height: auto;

    }


    .weddings__content {

        width: 100%;

        padding:

            80px

            25px

            55px;

    }


    .weddings__title {

        font-size: clamp(50px, 13vw, 68px);

        letter-spacing: -2px;

    }


    .weddings__text {

        max-width: 600px;

        font-size: 15px;

        line-height: 1.7;

    }


    .weddings__visual {

        width: 100%;

        height: 620px;

        padding: 0 25px;

    }


    .weddings__photo--main {

        top: 0;

        left: 25px;

        width: calc(100% - 90px);

        height: 520px;

    }


    .weddings__photo--secondary {

        top: 70px;

        right: 25px;

        width: 32%;

        height: 220px;

    }


    .weddings__caption {

        right: 25px;

        bottom: 35px;

    }


    .weddings__caption-line {

        height: 45px;

        margin-right: 14px;

    }


    .weddings__caption p {

        font-size: 15px;

    }

}



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

@media (max-width: 500px) {

    .weddings__content {

        padding:

            65px

            24px

            45px;

    }


    .weddings__visual {

        height: 540px;

    }


    .weddings__photo--main {

        left: 24px;

        width: calc(100% - 65px);

        height: 450px;

    }


    .weddings__photo--secondary {

        right: 24px;

        width: 34%;

        height: 320px;

        top: 50px;

    }


    .weddings__caption {

        bottom: 25px;

        right: 24px;

    }

}



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

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

    .weddings__photo--main,
    .weddings__photo--secondary {

        animation: none;

        transition: none;

    }

}



/* =========================================================
   BLOQUE 03
   MANIFIESTO — CAMERA BACKGROUND
========================================================= */

.manifesto {
    position: relative;
    width: 100%;
    min-height: 460px;
    height: 460px;

    /*
       FOTOGRAFÍA DE FONDO
       La cámara queda centrada detrás
       del contenido.
    */

    background-image:
        linear-gradient(
            90deg,
            rgba(20,18,17,.82) 0%,
            rgba(20,18,17,.68) 28%,
            rgba(20,18,17,.52) 50%,
            rgba(20,18,17,.68) 72%,
            rgba(20,18,17,.84) 100%
        ),
        url("../img/camera-manifesto.jpg");

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

    color: #f1ede7;

    overflow: hidden;
}


/* =========================================================
   LÍNEA SUPERIOR
========================================================= */

.manifesto::before {
    content: "";

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

    width: 87.8%;
    height: 1px;

    background: rgba(255,255,255,.14);

    z-index: 1;
}


/* =========================================================
   LÍNEA CENTRAL DECORATIVA
========================================================= */

.manifesto::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 95px;

    width: 1px;
    height: 275px;

    background: rgba(255,255,255,.13);

    z-index: 1;
}


/* =========================================================
   PARTE SUPERIOR
========================================================= */

.manifesto__top {
    position: relative;
    z-index: 2;

    width: 87.8%;
    margin: 0 auto;

    padding-top: 30px;

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


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

.manifesto__label {
    display: block;

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

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 4px;

    color: rgba(255,255,255,.72);
}


/* =========================================================
   NÚMERO
========================================================= */

.manifesto__number {
    font-family:
        "Times New Roman",
        Times,
        serif;

    font-size: 11px;

    letter-spacing: 2px;

    color: rgba(255,255,255,.58);
}


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

.manifesto__main {
    position: relative;
    z-index: 2;

    width: 87.8%;
    max-width: 1350px;

    margin: 0 auto;

    height: 355px;

    display: grid;

    grid-template-columns: 50% 50%;

    align-items: center;
}


/* =========================================================
   TITULAR
========================================================= */

.manifesto__headline {
    padding-left: 5.5%;
}


.manifesto__headline h2 {
    margin: 0;

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

    font-size: clamp(62px, 6.5vw, 98px);

    font-weight: 400;

    line-height: .82;

    letter-spacing: -4px;

    color: #f4f0eb;

    text-shadow:
        0 2px 20px rgba(0,0,0,.45);
}


/* =========================================================
   PALABRA EN ITÁLICA
========================================================= */

.manifesto__headline h2 em {
    font-style: italic;
    font-weight: 400;

    color: #d4ccc4;
}


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

.manifesto__message {
    width: 72%;

    margin-left: 8%;

    padding-left: 9%;
}


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

.manifesto__intro {
    max-width: 430px;

    margin: 0;

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

    font-size: 14px;

    font-weight: 400;

    line-height: 1.65;

    color: rgba(239,235,229,.76);

    text-shadow:
        0 2px 12px rgba(0,0,0,.55);
}


/* =========================================================
   DIVISOR
========================================================= */

.manifesto__divider {
    width: 40px;
    height: 1px;

    margin: 27px 0 24px;

    background: rgba(255,255,255,.58);
}


/* =========================================================
   FRASE MANUSCRITA
========================================================= */

.manifesto__script {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        cursive;

    font-size: 25px;

    font-style: italic;
    font-weight: 400;

    line-height: 1.2;

    color: #ddd5cd;

    text-shadow:
        0 2px 15px rgba(0,0,0,.55);
}


/* =========================================================
   PARTE INFERIOR
========================================================= */

.manifesto__bottom {
    position: absolute;

    z-index: 3;

    left: 6.1%;
    right: 6.1%;

    bottom: 25px;

    display: flex;

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


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

.manifesto__bottom > span:first-child {
    font-family:
        "Times New Roman",
        Times,
        serif;

    font-size: 9px;

    letter-spacing: 5px;

    color: rgba(255,255,255,.48);
}


/* =========================================================
   CONTINÚA
========================================================= */

.manifesto__scroll {
    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 8px;

    letter-spacing: 2.5px;

    color: rgba(255,255,255,.55);
}


/* =========================================================
   LÍNEA DEL SCROLL
========================================================= */

.manifesto__scroll i {
    display: block;

    width: 30px;
    height: 1px;

    background: rgba(255,255,255,.55);

    position: relative;
}


/* =========================================================
   FLECHA
========================================================= */

.manifesto__scroll i::after {
    content: "";

    position: absolute;

    right: 0;
    top: -3px;

    width: 6px;
    height: 6px;

    border-right:
        1px solid
        rgba(255,255,255,.65);

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

    transform: rotate(45deg);
}


/* =========================================================
   FLASH FOTOGRÁFICO
========================================================= */

.manifesto__camera-flash {
    position: absolute;

    inset: 0;

    z-index: 10;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.92) 18%,
            rgba(255,255,255,.55) 38%,
            rgba(255,255,255,.18) 62%,
            rgba(255,255,255,0) 82%
        );

    transform: scale(.65);
}


/* =========================================================
   ACTIVAR AL PASAR EL MOUSE
========================================================= */

.manifesto:hover .manifesto__camera-flash {

    animation:
        photographicFlash
        .75s
        cubic-bezier(.15,.85,.25,1)
        both;
}


/* =========================================================
   FLASH DE CÁMARA
========================================================= */

@keyframes photographicFlash {

    /* reposo */
    0% {
        opacity: 0;
        transform: scale(.65);
    }

    /* comienza a cargar */
    18% {
        opacity: .08;
        transform: scale(.78);
    }

    /* DESTELLO */
    30% {
        opacity: 1;
        transform: scale(1);
    }

    /* caída */
    42% {
        opacity: .55;
        transform: scale(1.08);
    }

    /* rebote */
    53% {
        opacity: .16;
        transform: scale(1.15);
    }

    /* desaparece */
    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}


/* =========================================================
   ILUMINACIÓN DEL CONTENIDO DURANTE EL FLASH
========================================================= */

.manifesto:hover .manifesto__headline h2,
.manifesto:hover .manifesto__intro,
.manifesto:hover .manifesto__script,
.manifesto:hover .manifesto__label {
    animation:
        flashLight
        .75s
        ease-out
        both;
}


@keyframes flashLight {

    0% {
        filter: brightness(1);
    }

    30% {
        filter: brightness(1.35);
    }

    48% {
        filter: brightness(1.08);
    }

    100% {
        filter: brightness(1);
    }
}


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

@media (max-width: 1000px) {

    .manifesto {
        min-height: 430px;
        height: 430px;

        background-position: center center;
    }


    .manifesto::after {
        top: 90px;
        height: 250px;
    }


    .manifesto__top {
        padding-top: 28px;
    }


    .manifesto__main {
        height: 325px;
    }


    .manifesto__headline h2 {

        font-size:
            clamp(58px, 7.5vw, 78px);

        letter-spacing: -3px;
    }


    .manifesto__message {
        width: 80%;
    }


    .manifesto__intro {
        font-size: 13px;
        line-height: 1.65;
    }


    .manifesto__script {
        font-size: 24px;
    }
}


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

@media (max-width: 700px) {

    .manifesto {
        min-height: auto;
        height: auto;

        /*
           Mantiene la cámara centrada
           también en móvil.
        */

        background-position: center center;
    }


    /* Quitamos la línea central */

    .manifesto::after {
        display: none;
    }


    /* -----------------------------------------------------
       PARTE SUPERIOR
    ----------------------------------------------------- */

    .manifesto__top {

        width:
            calc(100% - 48px);

        padding-top: 26px;
    }


    .manifesto__label {

        font-size: 8px;

        letter-spacing: 3px;
    }


    .manifesto__number {

        font-size: 10px;
    }


    /* -----------------------------------------------------
       CONTENIDO
    ----------------------------------------------------- */

    .manifesto__main {

        width:
            calc(100% - 48px);

        height: auto;

        padding: 65px 0 75px;

        display: block;
    }


    /* -----------------------------------------------------
       TITULAR
    ----------------------------------------------------- */

    .manifesto__headline {

        padding-left: 0;

        margin-bottom: 50px;
    }


    .manifesto__headline h2 {

        font-size:
            clamp(55px, 15vw, 75px);

        line-height: .86;

        letter-spacing: -3px;
    }


    /* -----------------------------------------------------
       MENSAJE
    ----------------------------------------------------- */

    .manifesto__message {

        width: 100%;

        margin-left: 0;

        padding-left: 22px;

        border-left:
            1px solid
            rgba(255,255,255,.18);
    }


    .manifesto__intro {

        max-width: 390px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* -----------------------------------------------------
       DIVISOR
    ----------------------------------------------------- */

    .manifesto__divider {

        margin: 28px 0 25px;
    }


    /* -----------------------------------------------------
       FRASE
    ----------------------------------------------------- */

    .manifesto__script {

        font-size: 23px;

        line-height: 1.2;
    }


    /* -----------------------------------------------------
       PARTE INFERIOR
    ----------------------------------------------------- */

    .manifesto__bottom {

        left: 24px;
        right: 24px;

        bottom: 22px;
    }


    .manifesto__bottom > span:first-child {

        font-size: 8px;

        letter-spacing: 4px;
    }


    /* -----------------------------------------------------
       OCULTAR CONTINÚA EN MOBILE
    ----------------------------------------------------- */

    .manifesto__scroll {
        display: none;
    }
}


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

@media (max-width: 400px) {

    .manifesto__main {

        width:
            calc(100% - 40px);

        padding-top: 60px;
        padding-bottom: 70px;
    }


    .manifesto__top {

        width:
            calc(100% - 40px);
    }


    .manifesto__headline h2 {

        font-size: 47px;

        letter-spacing: -2px;
    }


    .manifesto__message {

        padding-left: 20px;
    }


    .manifesto__intro {

        font-size: 13px;
    }


    .manifesto__script {

        font-size: 21px;
    }


    .manifesto__bottom {

        left: 20px;
        right: 20px;
    }
}


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

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

    .manifesto,
    .manifesto * {
        scroll-behavior: auto;
    }

    .manifesto__camera-flash {
        animation: none !important;
    }
}


/* =========================================================
   BLOQUE 05
   SERVICIOS
========================================================= */


.services {
    position: relative;

    width: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(25, 23, 21, .86) 0%,
            rgba(32, 29, 26, .72) 45%,
            rgba(25, 23, 21, .86) 100%
        ),
        url("../img/services-bg.png");

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

    color: #f1ede7;

    overflow: hidden;
}

.services::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.035) 0%,
            rgba(0,0,0,0) 48%,
            rgba(0,0,0,.30) 100%
        );

    pointer-events: none;

    z-index: 1;
}


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

.services__container {

    position: relative;

    z-index: 2;

    width: 100%;

    padding: 72px 4.1vw 78px;
}

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

.services__header {

    width: 100%;

    margin-bottom: 42px;

    display: grid;

    grid-template-columns:
        48%
        32%
        20%;

    align-items: end;
}


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

.services__label {

    display: block;

    margin-bottom: 15px;

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 3.5px;

    color: #aaa39c;
}


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

.services__title {

    margin: 0;

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

    font-size:
        clamp(52px, 5vw, 76px);

    font-weight: 400;

    line-height: .95;

    letter-spacing: -2.5px;

    color: #f1ede7;
}


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

.services__description {

    padding:
        0 30px 4px 15px;
}


.services__description p {

    max-width: 420px;

    margin: 0;

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

    font-size: 13px;

    font-weight: 400;

    line-height: 1.55;

    color: #aaa39c;
}


/* =========================================================
   VER TODOS
========================================================= */

.services__all {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 24px;

    padding-bottom: 5px;

    color: #f1ede7;
}


.services__all span {

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

    font-size: 9px;

    font-weight: 600;

    line-height: 1.35;

    letter-spacing: 1.5px;

    text-align: left;
}


.services__all i {

    display: block;

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

    font-size: 29px;

    font-style: normal;

    font-weight: 300;

    line-height: 1;

    transition:
        transform .35s ease;
}


.services__all:hover i {

    transform:
        translateX(7px);
}


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

.services__grid {

    width: 100%;

    display: grid;

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

    gap: 2px;
}


/* =========================================================
   TARJETA
========================================================= */

.service-card {

    position: relative;

    display: block;

    width: 100%;

    height: 340px;

    overflow: hidden;

    background: #1f1d1b;

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


/* =========================================================
   IMAGEN
========================================================= */

.service-card__image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.service-card__image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.01);

    transition:
        transform .8s
        cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   OSCURECER IMAGEN
========================================================= */

.service-card__overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 10%,
            rgba(0,0,0,.08) 45%,
            rgba(0,0,0,.78) 100%
        );

    transition:
        background .5s ease;
}


/* =========================================================
   CONTENIDO DE TARJETA
========================================================= */

.service-card__content {

    position: absolute;

    z-index: 2;

    left: 34px;
    right: 34px;
    bottom: 27px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   NOMBRE
========================================================= */

.service-card__name {

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2.2px;

    color: #fff;
}


/* =========================================================
   FLECHA
========================================================= */

.service-card__arrow {

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

    font-size: 28px;

    font-weight: 300;

    line-height: 1;

    color: #fff;

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1);
}


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

.service-card:hover
.service-card__image img {

    transform:
        scale(1.07);
}


.service-card:hover
.service-card__overlay {

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 10%,
            rgba(0,0,0,.20) 45%,
            rgba(0,0,0,.82) 100%
        );
}


.service-card:hover
.service-card__arrow {

    transform:
        translateX(8px);
}


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

@media (max-width: 1000px) {

    .services__container {

        padding:
            60px 4vw 65px;
    }


    .services__header {

        grid-template-columns:
            50%
            30%
            20%;

        margin-bottom: 32px;
    }


    .services__title {

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


    .services__description {

        padding-left: 10px;
        padding-right: 15px;
    }


    .services__description p {

        font-size: 12px;
    }


    .services__all {

        gap: 16px;
    }


    .service-card {

        height: 300px;
    }


    .service-card__content {

        left: 25px;
        right: 25px;
        bottom: 23px;
    }
}


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

@media (max-width: 700px) {

    .services__container {

        padding:
            65px 24px 70px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .services__header {

        display: block;

        margin-bottom: 35px;
    }


    .services__label {

        margin-bottom: 18px;

        font-size: 8px;

        letter-spacing: 3px;
    }


    .services__title {

        font-size:
            clamp(50px, 14vw, 70px);

        line-height: .9;

        letter-spacing: -2px;

        margin-bottom: 30px;
    }


    .services__description {

        padding:
            0 0 25px;
    }


    .services__description p {

        max-width: 400px;

        font-size: 14px;

        line-height: 1.65;
    }


    .services__all {

        justify-content: flex-start;

        gap: 18px;

        padding: 0;
    }


    /* -----------------------------------------------------
       GRID
    ----------------------------------------------------- */

    .services__grid {

        display: flex;

        flex-direction: column;

        gap: 3px;
    }


    .service-card {

        height: 390px;
    }


    .service-card__content {

        left: 24px;
        right: 24px;
        bottom: 24px;
    }


    .service-card__name {

        font-size: 9px;

        letter-spacing: 2px;
    }


    .service-card__arrow {

        font-size: 26px;
    }
}


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

@media (max-width: 400px) {

    .services__container {

        padding-left: 20px;
        padding-right: 20px;
    }


    .service-card {

        height: 350px;
    }


    .service-card__content {

        left: 20px;
        right: 20px;
    }
}


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

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

    .service-card__image img,
    .service-card__arrow,
    .services__all i {

        transition: none;
    }
}


/* =========================================================
   BLOQUE 06
   PORTAFOLIO
========================================================= */

.portfolio {

    position: relative;

    width: 100%;

    min-height: 500px;

    background: #f6f4f1;

    color: #24211f;

    overflow: hidden;
}


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

.portfolio__container {

    width: 100%;

    min-height: 500px;

    padding:
        38px 3.1vw 35px 5.8vw;

    display: grid;

    grid-template-columns:
        29%
        71%;

    align-items: center;
}


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

.portfolio__intro {

    padding-bottom: 35px;

    padding-right: 30px;
}


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

.portfolio__label {

    display: block;

    margin-bottom: 24px;

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

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 3px;

    color: #77716c;
}


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

.portfolio__title {

    margin: 0 0 43px;

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

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

    font-weight: 400;

    line-height: .94;

    letter-spacing: -2.5px;

    color: #24211f;
}


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

.portfolio__button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 244px;

    height: 54px;

    padding:
        0 20px 0 30px;

    border:
        1px solid #77716c;

    color: #24211f;

    transition:
        background .35s ease,
        color .35s ease;
}


.portfolio__button span {

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.7px;
}


.portfolio__button i {

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

    font-size: 25px;

    font-style: normal;

    font-weight: 300;

    line-height: 1;

    transition:
        transform .35s ease;
}


.portfolio__button:hover {

    background: #24211f;

    color: #fff;
}


.portfolio__button:hover i {

    transform:
        translateX(6px);
}


/* =========================================================
   SLIDER
========================================================= */

.portfolio__slider {

    position: relative;

    width: 100%;

    min-width: 0;
}


/* =========================================================
   VIEWPORT
========================================================= */

.portfolio__viewport {

    width: 100%;

    overflow: hidden;
}


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

.portfolio__track {

    display: flex;

    gap: 10px;

    width: max-content;

    transform:
        translateX(0);

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1);

    will-change:
        transform;
}


/* =========================================================
   SLIDE
========================================================= */

.portfolio__slide {

    flex:
        0 0 calc(
            (100vw * .679 - 20px) / 3
        );

    width:
        calc(
            (100vw * .679 - 20px) / 3
        );

    height: 325px;

    margin: 0;

    overflow: hidden;

    background: #dedad5;
}


/* =========================================================
   IMAGEN
========================================================= */

.portfolio__slide img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.01);

    transition:
        transform .8s
        cubic-bezier(.22,1,.36,1);
}


.portfolio__slide:hover img {

    transform:
        scale(1.045);
}


/* =========================================================
   CONTROLES
========================================================= */

.portfolio__controls {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 18px;

    margin-top: 14px;

    padding-right: 1px;
}


/* =========================================================
   CONTADOR
========================================================= */

.portfolio__counter {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-right: 2px;

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

    font-size: 10px;

    letter-spacing: 1px;

    color: #77716c;
}


.portfolio__current {

    color: #24211f;
}


.portfolio__slash {

    color: #aaa39c;
}


.portfolio__total {

    color: #77716c;
}


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

.portfolio__arrows {

    display: flex;

    align-items: center;

    gap: 10px;
}


.portfolio__arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 47px;

    height: 47px;

    padding: 0;

    border:
        1px solid #aaa39c;

    border-radius: 50%;

    background: transparent;

    color: #77716c;

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

    font-size: 22px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.portfolio__arrow:hover {

    background: #24211f;

    border-color: #24211f;

    color: #fff;
}


.portfolio__arrow:active {

    transform:
        scale(.94);
}


.portfolio__arrow:disabled {

    opacity: .35;

    cursor: default;

    pointer-events: none;
}


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

@media (max-width: 1100px) {

    .portfolio__container {

        padding:
            45px 4vw 35px 5vw;

        grid-template-columns:
            30%
            70%;
    }


    .portfolio__title {

        font-size:
            clamp(45px, 4.5vw, 60px);
    }


    .portfolio__button {

        width: 210px;

        height: 48px;
    }


    .portfolio__slide {

        flex-basis:
            calc(
                (100vw * .66 - 20px) / 3
            );

        width:
            calc(
                (100vw * .66 - 20px) / 3
            );

        height: 290px;
    }
}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 850px) {

    .portfolio__container {

        grid-template-columns:
            1fr;

        padding:
            65px 5vw 40px;
    }


    .portfolio__intro {

        padding:
            0 0 40px;
    }


    .portfolio__title {

        margin-bottom: 30px;
    }


    .portfolio__slide {

        flex-basis:
            calc(
                (100vw - 10vw - 20px) / 3
            );

        width:
            calc(
                (100vw - 10vw - 20px) / 3
            );

        height: 300px;
    }
}


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

@media (max-width: 700px) {

    .portfolio__container {

        padding:
            65px 24px 35px;
    }


    .portfolio__intro {

        padding-bottom: 35px;
    }


    .portfolio__label {

        margin-bottom: 18px;

        font-size: 8px;

        letter-spacing: 3px;
    }


    .portfolio__title {

        font-size:
            clamp(50px, 14vw, 70px);

        line-height: .9;

        letter-spacing: -2px;

        margin-bottom: 30px;
    }


    .portfolio__button {

        width: 210px;

        height: 48px;

        padding-left: 24px;
    }


    .portfolio__slide {

        flex-basis:
            calc(
                100vw - 48px
            );

        width:
            calc(
                100vw - 48px
            );

        height: 430px;
    }


    .portfolio__track {

        gap: 8px;
    }


    .portfolio__controls {

        margin-top: 16px;

        justify-content:
            space-between;
    }


    .portfolio__arrow {

        width: 43px;

        height: 43px;

        font-size: 20px;
    }
}


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

@media (max-width: 400px) {

    .portfolio__container {

        padding-left: 20px;

        padding-right: 20px;
    }


    .portfolio__slide {

        flex-basis:
            calc(
                100vw - 40px
            );

        width:
            calc(
                100vw - 40px
            );

        height: 380px;
    }
}


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

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

    .portfolio__track,
    .portfolio__slide img,
    .portfolio__button i {

        transition: none;
    }
}


/* =========================================================
   BLOQUE 07
   TESTIMONIOS
========================================================= */

.testimonials {

    position: relative;

    width: 100%;

    height: 390px;

    min-height: 390px;

    background-image:
        url("../img/testimonios-bg.png");

    background-size: cover;

    background-position:
        center 48%;

    background-repeat: no-repeat;

    color: #fff;

    overflow: hidden;
}


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

.testimonials__overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20,18,16,.67) 0%,
            rgba(20,18,16,.48) 38%,
            rgba(20,18,16,.34) 63%,
            rgba(20,18,16,.52) 100%
        );

    z-index: 1;
}


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

.testimonials__container {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 100%;

    padding:
        0 5.8vw;

    display: grid;

    grid-template-columns:
        43%
        42%
        15%;

    align-items: center;
}


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

.testimonials__heading {

    padding-bottom: 5px;
}


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

.testimonials__label {

    display: block;

    margin-bottom: 16px;

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 3.5px;

    color:
        rgba(255,255,255,.78);
}


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

.testimonials__title {

    margin: 0;

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

    font-size:
        clamp(48px, 4.2vw, 68px);

    font-weight: 400;

    line-height: .92;

    letter-spacing: -2.5px;

    color: #fff;

    text-shadow:
        0 2px 15px rgba(0,0,0,.25);
}


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

.testimonials__content {

    position: relative;

    width: 100%;

    min-width: 0;

    overflow: hidden;
}


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

.testimonials__track {

    display: flex;

    width: 100%;

    transition:
        transform .65s
        cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   TESTIMONIO
========================================================= */

.testimonial {

    flex:
        0 0 100%;

    width: 100%;

    padding:
        0 5% 0 2%;
}

/* =========================================================
   FRASE — ESTILO EDITORIAL
========================================================= */

.testimonial__quote {

    max-width: 520px;

    margin: 0 0 24px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(25px, 2.15vw, 32px);

    font-style: italic;

    font-weight: 300;

    line-height: 1.25;

    letter-spacing: -.15px;

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

    text-shadow:
        0 1px 8px rgba(0,0,0,.35);
}

/* =========================================================
   AUTOR
========================================================= */

.testimonial__author {

    margin: 0;

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

    font-size: 14px;

    font-weight: 600;

    color: #fff;

    text-shadow:
        0 2px 8px rgba(0,0,0,.45);
}


/* =========================================================
   CONTROLES
========================================================= */

.testimonials__controls {

    height: 150px;

    padding-left: 30px;

    border-left:
        1px solid rgba(255,255,255,.18);

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 20px;
}


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

.testimonials__arrows {

    display: flex;

    align-items: center;

    gap: 24px;
}


.testimonial__arrow {

    padding: 0;

    border: 0;

    background: transparent;

    color: #fff;

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

    font-size: 27px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    opacity: .9;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


.testimonial__arrow:hover {

    opacity: 1;
}


.testimonial__arrow--prev:hover {

    transform:
        translateX(-5px);
}


.testimonial__arrow--next:hover {

    transform:
        translateX(5px);
}


/* =========================================================
   CONTADOR
========================================================= */

.testimonials__counter {

    display: flex;

    align-items: center;

    gap: 7px;

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

    font-size: 10px;

    letter-spacing: 1px;

    color:
        rgba(255,255,255,.78);
}


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

@media (max-width: 1000px) {

    .testimonials {

        height: 400px;

        min-height: 400px;
    }


    .testimonials__container {

        padding:
            0 5vw;

        grid-template-columns:
            40%
            45%
            15%;
    }


    .testimonials__title {

        font-size:
            clamp(45px, 5vw, 60px);
    }


    .testimonial {

        padding-right: 3%;
    }


    .testimonial__quote {

        font-size: 22px;
    }


    .testimonials__controls {

        padding-left: 20px;
    }
}


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

@media (max-width: 700px) {

    .testimonials {

        height: auto;

        min-height: 650px;

        background-position:
            58% center;
    }


    .testimonials__overlay {

        background:
            linear-gradient(
                180deg,
                rgba(20,18,16,.58) 0%,
                rgba(20,18,16,.48) 45%,
                rgba(20,18,16,.72) 100%
            );
    }


    .testimonials__container {

        height: auto;

        min-height: 650px;

        padding:
            60px 24px 55px;

        display: flex;

        flex-direction: column;

        align-items: stretch;
    }


    .testimonials__heading {

        padding: 0;

        margin-bottom: 70px;
    }


    .testimonials__label {

        font-size: 8px;

        letter-spacing: 3px;
    }


    .testimonials__title {

        font-size:
            clamp(50px, 14vw, 70px);

        line-height: .9;

        letter-spacing: -2px;
    }


    .testimonials__content {

        flex: 1;

        display: flex;

        align-items: center;
    }


    .testimonial {

        padding:
            0 0 0 20px;

        border-left:
            1px solid rgba(255,255,255,.25);
    }


    .testimonial__quote {

        max-width: 390px;

        font-size: 23px;

        line-height: 1.35;
    }


    .testimonials__controls {

        height: auto;

        padding:
            30px 0 0;

        border-left: 0;

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

        flex-direction: row;

        justify-content: space-between;

        align-items: center;
    }


    .testimonials__arrows {

        gap: 25px;
    }
}


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

@media (max-width: 400px) {

    .testimonials__container {

        padding-left: 20px;

        padding-right: 20px;
    }


    .testimonials__heading {

        margin-bottom: 55px;
    }


    .testimonial__quote {

        font-size: 21px;
    }
}


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

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

    .testimonials__track {

        transition: none;
    }
}


/* =========================================================
   BLOQUE 08
   CONTACTO / CTA
========================================================= */

.contact-cta {

    position: relative;

    width: 100%;

    height: 300px;

    min-height: 300px;

    background-image:
        url("../img/contacto-bg.png");

    background-size: cover;

    background-position:
        center center;

    background-repeat: no-repeat;

    color: #fff;

    overflow: hidden;
}


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

.contact-cta__overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,8,7,.22) 0%,
            rgba(8,8,7,.12) 45%,
            rgba(8,8,7,.08) 100%
        );

    z-index: 1;

    pointer-events: none;
}


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

.contact-cta__container {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 100%;

    padding:
        0 5.7vw;

    display: grid;

    grid-template-columns:
        60%
        40%;

    align-items: center;
}


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

.contact-cta__content {

    padding-bottom: 3px;
}


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

.contact-cta__label {

    display: block;

    margin-bottom: 14px;

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2.8px;

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

    text-shadow:
        0 2px 8px rgba(0,0,0,.45);
}


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

.contact-cta__title {

    margin: 0 0 13px;

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

    font-size:
        clamp(52px, 4.5vw, 68px);

    font-weight: 400;

    line-height: .9;

    letter-spacing: -2.5px;

    color: #fff;

    text-shadow:
        0 2px 15px rgba(0,0,0,.45);
}


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

.contact-cta__text {

    max-width: 620px;

    margin: 0;

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

    font-size: 14px;

    font-weight: 400;

    line-height: 1.55;

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

    text-shadow:
        0 2px 10px rgba(0,0,0,.5);
}


/* =========================================================
   ACCIÓN
========================================================= */

.contact-cta__action {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    padding-right: 1.1vw;
}


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

.contact-cta__button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 340px;

    height: 55px;

    padding:
        0 26px 0 34px;

    border:
        1px solid rgba(255,255,255,.88);

    background:
        rgba(10,10,9,.08);

    color: #fff;

    backdrop-filter:
        blur(2px);

    transition:
        background .35s ease,
        border-color .35s ease;
}


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

.contact-cta__button span {

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.8px;
}


/* =========================================================
   FLECHA
========================================================= */

.contact-cta__button i {

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

    font-size: 27px;

    font-style: normal;

    font-weight: 300;

    line-height: 1;

    transition:
        transform .35s
        cubic-bezier(.22,1,.36,1);
}


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

.contact-cta__button:hover {

    background:
        rgba(255,255,255,.10);

    border-color:
        #fff;
}


.contact-cta__button:hover i {

    transform:
        translateX(7px);
}


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

@media (max-width: 1000px) {

    .contact-cta {

        height: 310px;

        min-height: 310px;

        background-position:
            center center;
    }


    .contact-cta__container {

        padding:
            0 5vw;

        grid-template-columns:
            58%
            42%;
    }


    .contact-cta__title {

        font-size:
            clamp(48px, 5vw, 62px);
    }


    .contact-cta__text {

        max-width: 500px;

        font-size: 13px;
    }


    .contact-cta__button {

        width: 300px;

        height: 52px;
    }
}


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

@media (max-width: 700px) {

    .contact-cta {

        height: auto;

        min-height: 620px;

        background-position:
            66% center;
    }


    .contact-cta__overlay {

        background:
            linear-gradient(
                180deg,
                rgba(8,8,7,.28) 0%,
                rgba(8,8,7,.18) 35%,
                rgba(8,8,7,.55) 100%
            );
    }


    .contact-cta__container {

        height: auto;

        min-height: 620px;

        padding:
            65px 24px 55px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: space-between;
    }


    .contact-cta__content {

        padding: 0;
    }


    .contact-cta__label {

        font-size: 8px;

        letter-spacing: 2.5px;

        margin-bottom: 18px;
    }


    .contact-cta__title {

        font-size:
            clamp(55px, 15vw, 75px);

        line-height: .88;

        letter-spacing: -2px;

        margin-bottom: 25px;
    }


    .contact-cta__text {

        max-width: 390px;

        font-size: 14px;

        line-height: 1.65;
    }


    .contact-cta__action {

        justify-content:
            flex-start;

        padding: 0;
    }


    .contact-cta__button {

        width: 100%;

        max-width: 350px;

        height: 52px;

        padding-left: 25px;

        padding-right: 20px;
    }
}


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

@media (max-width: 400px) {

    .contact-cta__container {

        padding-left: 20px;

        padding-right: 20px;
    }


    .contact-cta {

        min-height: 590px;
    }


    .contact-cta__button {

        max-width: none;
    }
}


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

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

    .contact-cta__button,
    .contact-cta__button i {

        transition: none;
    }
}


/* =========================================================
   BLOQUE 09
   FOOTER
========================================================= */

.footer {

    position: relative;

    width: 100%;

    background: #11100f;

    color: #f1ede7;

    border-radius:
        0 0 42px 42px;

    overflow: hidden;
}


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

.footer__container {

    width: 100%;

    padding:
        45px 4.1vw 38px;
}


/* =========================================================
   PARTE SUPERIOR
========================================================= */

.footer__top {

    min-height: 105px;

    display: grid;

    grid-template-columns:
        30%
        50%
        20%;

    align-items: start;
}


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

.footer__brand {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


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

.footer__logo {

    display: block;

    margin: 0;

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

    font-size: 25px;

    font-weight: 400;

    letter-spacing: 6px;

    line-height: 1;

    color: #f1ede7;
}


/* =========================================================
   TAGLINE
========================================================= */

.footer__tagline {

    margin:
        13px 0 0;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 18px;

    font-style: italic;

    font-weight: 400;

    line-height: 1;

    color:
        rgba(241,237,231,.88);
}


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

.footer__nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 29px;

    padding-top: 17px;
}


.footer__nav a {

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

    font-size: 11px;

    font-weight: 500;

    color:
        rgba(241,237,231,.86);

    transition:
        opacity .3s ease;
}


.footer__nav a:hover {

    opacity: .5;
}


/* =========================================================
   CONTACTO
========================================================= */

.footer__contact {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding-left: 22px;
}


/* =========================================================
   INSTAGRAM
========================================================= */

.footer__instagram {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

    margin-bottom: 13px;

    color:
        rgba(241,237,231,.92);

    font-size: 19px;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.footer__instagram:hover {

    opacity: .55;

    transform:
        translateY(-2px);
}


/* =========================================================
   DATOS
========================================================= */

.footer__email,
.footer__phone,
.footer__location {

    display: block;

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

    font-size: 10px;

    font-weight: 400;

    line-height: 1.65;

    color:
        rgba(241,237,231,.78);
}


.footer__email:hover {

    opacity: .55;
}


/* =========================================================
   DIVISOR
========================================================= */

.footer__divider {

    width: 100%;

    height: 1px;

    margin:
        20px 0 20px;

    background:
        rgba(255,255,255,.22);
}


/* =========================================================
   PARTE INFERIOR
========================================================= */

.footer__bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer__copyright {

    margin: 0;

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

    font-size: 10px;

    font-weight: 400;

    color:
        rgba(241,237,231,.78);
}


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

.footer__closing {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 20px;

    font-style: italic;

    font-weight: 400;

    line-height: 1;

    color:
        rgba(241,237,231,.82);
}


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

@media (max-width: 1000px) {

    .footer {

        border-radius:
            0 0 32px 32px;
    }


    .footer__container {

        padding:
            40px 5vw 32px;
    }


    .footer__top {

        grid-template-columns:
            28%
            52%
            20%;
    }


    .footer__nav {

        gap: 18px;

        flex-wrap: wrap;
    }


    .footer__nav a {

        font-size: 10px;
    }


    .footer__contact {

        padding-left: 10px;
    }


    .footer__closing {

        font-size: 18px;
    }
}


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

@media (max-width: 700px) {

    .footer {

        border-radius:
            0 0 24px 24px;
    }


    .footer__container {

        padding:
            55px 24px 30px;
    }


    .footer__top {

        display: flex;

        flex-direction: column;

        min-height: auto;
    }


    /* -----------------------------------------------------
       MARCA
    ----------------------------------------------------- */

    .footer__brand {

        margin-bottom: 42px;
    }


    .footer__logo {

        font-size: 23px;

        letter-spacing: 5px;
    }


    .footer__tagline {

        font-size: 17px;
    }


    /* -----------------------------------------------------
       NAVEGACIÓN
    ----------------------------------------------------- */

    .footer__nav {

        width: 100%;

        justify-content: flex-start;

        gap:
            18px 25px;

        padding: 0;

        margin-bottom: 42px;
    }


    .footer__nav a {

        font-size: 10px;
    }


    /* -----------------------------------------------------
       CONTACTO
    ----------------------------------------------------- */

    .footer__contact {

        padding: 0;
    }


    .footer__instagram {

        margin-bottom: 14px;
    }


    .footer__email,
    .footer__phone,
    .footer__location {

        font-size: 10px;
    }


    /* -----------------------------------------------------
       DIVISOR
    ----------------------------------------------------- */

    .footer__divider {

        margin:
            35px 0 25px;
    }


    /* -----------------------------------------------------
       BOTTOM
    ----------------------------------------------------- */

    .footer__bottom {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 22px;
    }


    .footer__copyright {

        font-size: 9px;

        line-height: 1.5;
    }


    .footer__closing {

        font-size: 18px;

        line-height: 1.2;
    }
}


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

@media (max-width: 400px) {

    .footer__container {

        padding-left: 20px;

        padding-right: 20px;
    }


    .footer__nav {

        gap:
            17px 20px;
    }
}

/* =========================================================
   EMPIEZA PAGINA BODA
========================================================= */

/* =========================================================
   PHOTOGRAPYT
   SERVICIO-BODAS.HTML
   HERO COMPLETO
========================================================= */


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

.bodas-hero {

    position: relative;

    width: 100%;

    height: 520px;

    min-height: 520px;

    overflow: hidden;

    background: #f3f0e9;

    color: #171513;
}


/* =========================================================
   IMAGEN DE FONDO
========================================================= */

.bodas-hero__image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("../img/bodas-hero.png");

    background-size: cover;

    background-position:
        center center;

    background-repeat: no-repeat;

    z-index: 0;
}


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

.bodas-hero__overlay {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            rgba(247,244,238,.98) 0%,

            rgba(247,244,238,.96) 13%,

            rgba(247,244,238,.90) 25%,

            rgba(247,244,238,.73) 36%,

            rgba(247,244,238,.48) 47%,

            rgba(247,244,238,.22) 59%,

            rgba(247,244,238,.06) 71%,

            rgba(247,244,238,0) 83%
        );
}


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

.bodas-header {
    position: absolute;
    top: 0;
    left: 0;

    z-index: 10;

    width: 100%;
    height: auto;

    display: flex;
    align-items: center;

    padding: 10px 4.1vw 10px 5.85vw;
}

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

.bodas-header__logo {

    display: block;

    margin-top: 8px;

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

    font-size: 19px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 4px;

    color: #211f1d;

    text-decoration: none;

    white-space: nowrap;

    transition:
        opacity .25s ease;
}


.bodas-header__logo:hover {

    opacity: .6;
}


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

.bodas-header__navigation {

    position: absolute;

    top: 32px;

    left: 28.5%;

    display: flex;

    align-items: center;

    gap: 34px;
}


.bodas-header__navigation a {

    display: block;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1;

    color: #24211f;

    text-decoration: none;

    white-space: nowrap;

    transition:
        opacity .25s ease;
}


.bodas-header__navigation a:hover {

    opacity: .5;
}


.bodas-header__navigation a.active {

    font-weight: 600;
}


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

.bodas-header__button {

    position: absolute;

    top: 14px;

    right: 4.1vw;

    height: 43px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding:
        0
        16px;

    border:
        1px solid
        rgba(36,33,31,.70);

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

    color: #24211f;

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.25px;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.bodas-header__button i {

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

    font-size: 18px;

    font-style: normal;

    font-weight: 300;

    line-height: 1;
}


.bodas-header__button:hover {

    background: #24211f;

    border-color: #24211f;

    color: #fff;
}


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

.bodas-hero__content {

    position: absolute;

    left: 6.1vw;

    top: 50%;

    z-index: 5;

    width: 470px;

    transform:
        translateY(-39%);
}


/* =========================================================
   LABEL — BODAS
========================================================= */

.bodas-hero__eyebrow {

    display: block;

    margin:
        0 0 22px;

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

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 4px;

    color: #3f3b38;
}


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

.bodas-hero__title {

    margin:
        0 0 24px;

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

    font-size:
        clamp(58px, 5vw, 78px);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -3px;

    color: #11100e;
}


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

.bodas-hero__description {

    width: 440px;

    margin: 0;

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

    font-size: 14px;

    font-weight: 400;

    line-height: 1.62;

    color: #393633;
}


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

.bodas-hero__line {

    width: 58px;

    height: 1px;

    margin:
        25px 0 20px;

    background: #77716f;
}


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

.bodas-hero__statement {

    margin: 0;

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

    font-size: 9px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 3.3px;

    color: #393633;
}


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

@media (max-width: 1050px) {

    .bodas-header__navigation {

        left: 30%;

        gap: 24px;
    }


    .bodas-header__navigation a {

        font-size: 11px;
    }


    .bodas-hero__content {

        left: 5vw;

        width: 430px;
    }


    .bodas-hero__title {

        font-size:
            clamp(54px, 6vw, 76px);
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 820px) {

    .bodas-header__navigation {

        display: none;
    }


    .bodas-header {

        padding:
            20px
            30px
            0;
    }


    .bodas-header::after {

        left: 30px;
    }


    .bodas-header__button {

        right: 30px;
    }


    .bodas-hero__content {

        left: 30px;

        width: 440px;
    }


    .bodas-hero__description {

        width: 400px;
    }

}


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

@media (max-width: 600px) {

    .bodas-hero {

        height: 680px;

        min-height: 680px;
    }


    /* -----------------------------------------
       IMAGEN
    ----------------------------------------- */

    .bodas-hero__image {

        background-position:
            68% center;
    }


    /* -----------------------------------------
       OVERLAY
    ----------------------------------------- */

    .bodas-hero__overlay {

        background:
            linear-gradient(
                180deg,

                rgba(247,244,238,.96) 0%,

                rgba(247,244,238,.91) 30%,

                rgba(247,244,238,.70) 50%,

                rgba(247,244,238,.36) 70%,

                rgba(247,244,238,.08) 100%
            );
    }


    /* -----------------------------------------
       HEADER
    ----------------------------------------- */

    .bodas-header {

        height: 75px;

        padding:
            19px
            22px
            0;
    }


    .bodas-header__logo {

        margin-top: 4px;

        font-size: 17px;

        letter-spacing: 3.5px;
    }


    .bodas-header::after {

        left: 22px;

        top: 48px;

        font-size: 13px;
    }


    /* -----------------------------------------
       BOTÓN HEADER
    ----------------------------------------- */

    .bodas-header__button {

        top: 17px;

        right: 22px;

        width: 42px;

        height: 39px;

        padding: 0;
    }


    .bodas-header__button span {

        display: none;
    }


    .bodas-header__button i {

        font-size: 18px;
    }


    /* -----------------------------------------
       CONTENIDO
    ----------------------------------------- */

    .bodas-hero__content {

        left: 22px;

        right: 22px;

        top: auto;

        bottom: 55px;

        width: auto;

        transform: none;
    }


    /* -----------------------------------------
       LABEL
    ----------------------------------------- */

    .bodas-hero__eyebrow {

        margin-bottom: 18px;

        font-size: 9px;

        letter-spacing: 3.5px;
    }


    /* -----------------------------------------
       TÍTULO
    ----------------------------------------- */

    .bodas-hero__title {

        margin-bottom: 20px;

        font-size:
            clamp(50px, 14vw, 70px);

        line-height: .90;

        letter-spacing: -2.5px;
    }


    /* -----------------------------------------
       DESCRIPCIÓN
    ----------------------------------------- */

    .bodas-hero__description {

        width: auto;

        max-width: 360px;

        font-size: 13px;

        line-height: 1.6;
    }


    /* -----------------------------------------
       LÍNEA
    ----------------------------------------- */

    .bodas-hero__line {

        width: 52px;

        margin:
            24px 0 18px;
    }


    /* -----------------------------------------
       FRASE
    ----------------------------------------- */

    .bodas-hero__statement {

        font-size: 8px;

        letter-spacing: 2.8px;
    }

}


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

@media (max-width: 400px) {

    .bodas-hero {

        height: 650px;

        min-height: 650px;
    }


    .bodas-header {

        padding-left: 20px;

        padding-right: 20px;
    }


    .bodas-header::after {

        left: 20px;
    }


    .bodas-header__logo {

        font-size: 15px;

        letter-spacing: 3px;
    }


    .bodas-header__button {

        right: 20px;
    }


    .bodas-hero__content {

        left: 20px;

        right: 20px;

        bottom: 45px;
    }


    .bodas-hero__title {

        font-size: 48px;
    }


    .bodas-hero__description {

        font-size: 12px;
    }


    .bodas-hero__statement {

        font-size: 7.5px;

        letter-spacing: 2.4px;
    }

}


/* =========================================================
   PHOTOGRAPYT
   SERVICIO BODAS
   BLOQUE — NUESTRA MIRADA
========================================================= */


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

.bodas-mirada {

    width: 100%;

    min-height: 540px;

    display: grid;

    grid-template-columns: 50% 50%;

    background: #f4f1ea;

    color: #24211f;

    overflow: hidden;
}


/* =========================================================
   COLUMNA IZQUIERDA — IMAGEN
========================================================= */

.bodas-mirada__image {

    position: relative;

    min-height: 540px;

    background-image:
        url("../img/bodas-mirada.png");

    background-size: cover;

    background-position:
        center center;

    background-repeat: no-repeat;
}


/* =========================================================
   OVERLAY DE LA IMAGEN
========================================================= */

.bodas-mirada__image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(12,11,10,.82) 0%,
            rgba(12,11,10,.52) 42%,
            rgba(12,11,10,.18) 100%
        );

    z-index: 1;
}


/* =========================================================
   FRASE SOBRE LA IMAGEN
========================================================= */

.bodas-mirada__quote {

    position: absolute;

    left: 11%;

    top: 50%;

    z-index: 2;

    transform:
        translateY(-50%);
}


/* =========================================================
   TEXTO DE LA FRASE
========================================================= */

.bodas-mirada__quote p {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(29px, 2.8vw, 39px);

    font-style: italic;

    font-weight: 300;

    line-height: 1.12;

    letter-spacing: -.4px;

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

    text-shadow:
        0 2px 10px rgba(0,0,0,.45);
}


/* =========================================================
   LÍNEA DEBAJO DE LA FRASE
========================================================= */

.bodas-mirada__quote span {

    display: block;

    width: 58px;

    height: 1px;

    margin-top: 26px;

    background:
        rgba(255,255,255,.82);
}


/* =========================================================
   COLUMNA DERECHA
========================================================= */

.bodas-mirada__content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        62px
        7vw
        62px
        4.1vw;

    background: #f4f1ea;
}


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

.bodas-mirada__label {

    display: block;

    margin-bottom: 22px;

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

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 4px;

    color: #5e5853;
}


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

.bodas-mirada__title {

    margin:
        0
        0
        24px;

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

    font-size:
        clamp(43px, 3.8vw, 61px);

    font-weight: 400;

    line-height: .91;

    letter-spacing: -2.5px;

    color: #151311;
}


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

.bodas-mirada__description {

    max-width: 620px;

    margin: 0;

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

    font-size: 14px;

    font-weight: 400;

    line-height: 1.55;

    color: #5d5853;
}


/* =========================================================
   DIVISOR
========================================================= */

.bodas-mirada__divider {

    width: 58px;

    height: 1px;

    margin:
        25px 0
        18px;

    background: #aaa39c;
}


/* =========================================================
   FEATURES
========================================================= */

.bodas-mirada__features {

    display: grid;

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

    column-gap: 32px;

    width: 100%;
}


/* =========================================================
   FEATURE
========================================================= */

.bodas-mirada__feature {

    min-width: 0;
}

/* =========================================================
   ICONO
========================================================= */

.bodas-mirada__icon {

    width: 48px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    margin-bottom: 10px;

    color: #282522;
}


.bodas-mirada__icon svg {

    display: block;

    width: 38px;

    height: auto;
}

.bodas-mirada__icon i {

    font-size: 28px;

    font-weight: 300;

    line-height: 1;
}


/* =========================================================
   ANILLOS
========================================================= */

.bodas-mirada__rings {

    position: relative;

    width: 43px;

    height: 35px;
}


.bodas-mirada__rings span {

    position: absolute;

    top: 4px;

    width: 27px;

    height: 27px;

    border:
        1.5px solid
        #282522;

    border-radius: 50%;
}


.bodas-mirada__rings span:first-child {

    left: 1px;
}


.bodas-mirada__rings span:last-child {

    left: 14px;
}


/* =========================================================
   FEATURE — TÍTULO
========================================================= */

.bodas-mirada__feature h3 {

    margin:
        0 0 6px;

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

    font-size: 12px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: .3px;

    color: #282522;
}


/* =========================================================
   FEATURE — TEXTO
========================================================= */

.bodas-mirada__feature p {

    margin: 0;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1.45;

    color: #77716b;
}


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

.bodas-mirada__feature {

    transition:
        transform .3s ease;
}


.bodas-mirada__feature:hover {

    transform:
        translateY(-3px);
}


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

@media (max-width: 1050px) {

    .bodas-mirada {

        min-height: 500px;
    }


    .bodas-mirada__image {

        min-height: 500px;
    }


    .bodas-mirada__content {

        padding:
            50px
            5vw
            50px
            4vw;
    }


    .bodas-mirada__title {

        font-size:
            clamp(40px, 4.2vw, 54px);
    }


    .bodas-mirada__description {

        font-size: 13px;
    }


    .bodas-mirada__features {

        column-gap: 18px;
    }


    .bodas-mirada__feature p {

        font-size: 11px;
    }

}


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

@media (max-width: 760px) {

    .bodas-mirada {

        display: flex;

        flex-direction: column;

        min-height: auto;
    }


    /* -----------------------------------------
       IMAGEN
    ----------------------------------------- */

    .bodas-mirada__image {

        width: 100%;

        height: 400px;

        min-height: 400px;

        background-position:
            center center;
    }


    /* -----------------------------------------
       QUOTE
    ----------------------------------------- */

    .bodas-mirada__quote {

        left: 24px;

        top: 50%;
    }


    .bodas-mirada__quote p {

        font-size: 32px;
    }


    /* -----------------------------------------
       CONTENIDO
    ----------------------------------------- */

    .bodas-mirada__content {

        width: 100%;

        padding:
            55px
            24px
            60px;
    }


    /* -----------------------------------------
       LABEL
    ----------------------------------------- */

    .bodas-mirada__label {

        margin-bottom: 20px;

        font-size: 9px;

        letter-spacing: 3.5px;
    }


    /* -----------------------------------------
       TITLE
    ----------------------------------------- */

    .bodas-mirada__title {

        margin-bottom: 22px;

        font-size:
            clamp(42px, 12vw, 58px);

        letter-spacing: -2px;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .bodas-mirada__description {

        font-size: 13px;

        line-height: 1.6;
    }


    /* -----------------------------------------
       DIVIDER
    ----------------------------------------- */

    .bodas-mirada__divider {

        margin:
            25px 0
            20px;
    }


    /* -----------------------------------------
       FEATURES
    ----------------------------------------- */

    .bodas-mirada__features {

        grid-template-columns:
            1fr;

        row-gap: 28px;

        column-gap: 0;
    }


    .bodas-mirada__feature {

        display: grid;

        grid-template-columns:
            45px 1fr;

        grid-template-rows:
            auto auto;

        column-gap: 12px;
    }


    .bodas-mirada__icon {

        grid-row:
            1 / 3;

        margin-bottom: 0;
    }


    .bodas-mirada__feature h3 {

        margin-bottom: 5px;
    }

}


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

@media (max-width: 420px) {

    .bodas-mirada__image {

        height: 360px;

        min-height: 360px;
    }


    .bodas-mirada__quote {

        left: 22px;
    }


    .bodas-mirada__quote p {

        font-size: 29px;
    }


    .bodas-mirada__content {

        padding:
            48px
            22px
            52px;
    }


    .bodas-mirada__title {

        font-size: 42px;
    }

}


/* =========================================================
   PHOTOGRAPYT
   SERVICIO-BODAS.HTML
   GALERÍA EDITORIAL
========================================================= */


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

.bodas-galeria {

    position: relative;

    width: 100%;

    min-height: 920px;

    padding:
        110px
        6.1vw
        85px;

    background: #f4f1ea;

    color: #24211f;

    overflow: hidden;
}


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

.bodas-galeria__header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    width: 100%;

    margin-bottom: 55px;
}


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

.bodas-galeria__label {

    display: block;

    margin-bottom: 20px;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 4px;

    color: #77716b;
}


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

.bodas-galeria__title {

    margin: 0;

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

    font-size:
        clamp(48px, 4.5vw, 72px);

    font-weight: 400;

    line-height: .91;

    letter-spacing: -2.8px;

    color: #1d1a18;
}


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

.bodas-galeria__intro {

    width: 330px;

    padding-bottom: 5px;
}


.bodas-galeria__intro p {

    margin:
        0 0 20px;

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

    font-size: 13px;

    line-height: 1.65;

    color: #716b65;
}


.bodas-galeria__intro span {

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

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2.5px;

    color: #49443f;
}


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

.bodas-galeria__stage {

    position: relative;

    width: 100%;

    height: 610px;
}


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

.bodas-galeria__photo {

    position: absolute;

    margin: 0;

    overflow: hidden;

    background: #ddd8d0;
}


.bodas-galeria__photo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s
        cubic-bezier(.22,1,.36,1);
}


.bodas-galeria__photo:hover img {

    transform:
        scale(1.035);
}


/* =========================================================
   FOTO PRINCIPAL
========================================================= */

.bodas-galeria__photo--main {

    left: 10%;

    top: 0;

    width: 54%;

    height: 540px;

    z-index: 2;

    box-shadow:
        0 25px 60px
        rgba(30,27,24,.14);
}


/* =========================================================
   FOTO SECUNDARIA
========================================================= */

.bodas-galeria__photo--secondary {

    right: 5%;

    top: 70px;

    width: 27%;

    height: 355px;

    z-index: 3;

    box-shadow:
        0 20px 50px
        rgba(30,27,24,.12);
}


/* =========================================================
   FOTO PEQUEÑA
========================================================= */

.bodas-galeria__photo--small {

    left: 2%;

    bottom: 0;

    width: 23%;

    height: 235px;

    z-index: 4;

    box-shadow:
        0 15px 40px
        rgba(30,27,24,.12);
}


/* =========================================================
   FRASE
========================================================= */

/* =========================================================
   FRASE EDITORIAL SOBRE LA GALERÍA
========================================================= */

.bodas-galeria__phrase {

    position: absolute;

    right: 29%;

    bottom: 28px;

    z-index: 10;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding:
        22px
        25px
        22px
        20px;

    background:
        rgba(244,241,234,.92);

    border:
        1px solid
        rgba(255,255,255,.55);

    box-shadow:
        0 15px 35px
        rgba(20,18,16,.16);

    backdrop-filter:
        blur(6px);

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


.bodas-galeria__phrase > span {

    display: block;

    padding-top: 3px;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #77716b;
}


.bodas-galeria__phrase p {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 21px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.05;

    color: #393531;
}


/* =========================================================
   PROGRESO
========================================================= */

.bodas-galeria__progress {

    position: absolute;

    right: 0;

    top: 0;

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.bodas-galeria__progress span {

    display: block;

    width: 2px;

    height: 25px;

    background: #d0cbc4;

    transition:
        height .3s ease,
        background .3s ease;
}


.bodas-galeria__progress span.active {

    height: 45px;

    background: #282522;
}


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

.bodas-galeria__footer {

    display: grid;

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

    align-items: center;

    width: 100%;

    padding-top: 28px;

    border-top:
        1px solid
        #d6d0c8;
}


/* =========================================================
   CONTADOR
========================================================= */

.bodas-galeria__counter {

    display: flex;

    align-items: center;

    gap: 8px;

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

    font-size: 9px;

    letter-spacing: 2px;

    color: #8a847e;
}


.bodas-galeria__counter strong {

    color: #25221f;

    font-weight: 600;
}


/* =========================================================
   CAPTION
========================================================= */

.bodas-galeria__caption {

    text-align: center;
}


.bodas-galeria__caption span {

    display: block;

    margin-bottom: 7px;

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

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2.4px;

    color: #504a45;
}


.bodas-galeria__caption p {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 16px;

    font-style: italic;

    color: #817a73;
}


/* =========================================================
   CONTROLES
========================================================= */

.bodas-galeria__controls {

    display: flex;

    justify-content: flex-end;

    gap: 10px;
}


.bodas-galeria__arrow {

    width: 42px;

    height: 42px;

    border:
        1px solid
        #c6c0b9;

    background:
        transparent;

    color: #302c29;

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

    font-size: 18px;

    font-weight: 300;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.bodas-galeria__arrow:hover {

    background: #292622;

    border-color: #292622;

    color: #fff;
}


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

@media (max-width: 1000px) {

    .bodas-galeria {

        padding:
            90px
            5vw
            70px;
    }


    .bodas-galeria__intro {

        width: 280px;
    }


    .bodas-galeria__stage {

        height: 570px;
    }


    .bodas-galeria__photo--main {

        width: 57%;

        height: 500px;
    }


    .bodas-galeria__photo--secondary {

        width: 29%;

        height: 330px;
    }


    .bodas-galeria__photo--small {

        width: 25%;

        height: 210px;
    }

}


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

@media (max-width: 700px) {

    .bodas-galeria {

        min-height: auto;

        padding:
            70px
            22px
            55px;
    }


    /* HEADER */

    .bodas-galeria__header {

        display: block;

        margin-bottom: 40px;
    }


    .bodas-galeria__intro {

        width: 100%;

        max-width: 400px;

        margin-top: 25px;
    }


    /* STAGE */

    .bodas-galeria__stage {

        height: 650px;
    }


    /* MAIN */

    .bodas-galeria__photo--main {

        left: 0;

        top: 0;

        width: 82%;

        height: 430px;
    }


    /* SECONDARY */

    .bodas-galeria__photo--secondary {

        right: 0;

        top: 250px;

        width: 58%;

        height: 300px;
    }


    /* SMALL */

    .bodas-galeria__photo--small {

        left: 4%;

        bottom: 0;

        width: 42%;

        height: 190px;
    }


    /* PHRASE */

    .bodas-galeria__phrase {

        right: 3%;

        bottom: 25px;
    }


    .bodas-galeria__phrase p {

        font-size: 18px;
    }


    /* FOOTER */

    .bodas-galeria__footer {

        grid-template-columns:
            1fr auto;

        row-gap: 25px;
    }


    .bodas-galeria__caption {

        grid-column:
            1 / -1;

        grid-row: 1;

        text-align: left;
    }


    .bodas-galeria__counter {

        grid-row: 2;
    }


    .bodas-galeria__controls {

        grid-row: 2;
    }


    .bodas-galeria__progress {

        display: none;
    }

}


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

@media (max-width: 420px) {

    .bodas-galeria__title {

        font-size: 43px;
    }


    .bodas-galeria__stage {

        height: 590px;
    }


    .bodas-galeria__photo--main {

        width: 86%;

        height: 390px;
    }


    .bodas-galeria__photo--secondary {

        top: 230px;

        width: 62%;

        height: 275px;
    }


    .bodas-galeria__photo--small {

        width: 45%;

        height: 165px;
    }


    .bodas-galeria__phrase {

        display: none;
    }

}

.bodas-galeria__photo--main img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 1;

    transition:
        opacity .35s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
}


/* =========================================
   BODAS — CONTACTO
========================================= */

.bodas-contacto {
    position: relative;
    width: 100%;
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #171513;
    color: #fff;
}

.bodas-contacto__image {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("../img/bodas-contacto.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.03);
}


.bodas-contacto__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(15, 14, 13, .94) 0%,
            rgba(15, 14, 13, .86) 35%,
            rgba(15, 14, 13, .68) 65%,
            rgba(15, 14, 13, .78) 100%
        );
}

.bodas-contacto__content {
    position: relative;
    z-index: 2;

    width: min(760px, 90%);
    padding: 80px 0;

    text-align: center;
}

.bodas-contacto__label {
    display: block;
    margin-bottom: 25px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 4px;
    color: rgba(255,255,255,.65);
}

.bodas-contacto__title {
    margin: 0 0 28px;

    font-family: "Times New Roman", Times, serif;
    font-size: clamp(52px, 5.5vw, 78px);
    font-weight: 400;
    line-height: .91;
    letter-spacing: -3px;
    color: #fff;
}

.bodas-contacto__title em {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;
    font-style: italic;
    font-weight: 300;
    letter-spacing: -1px;
}

.bodas-contacto__text {
    max-width: 590px;
    margin: 0 auto 20px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255,255,255,.72);
}

.bodas-contacto__trust {
    max-width: 520px;
    margin: 0 auto 34px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;
    font-size: 21px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.25;
    color: rgba(255,255,255,.9);
}

.bodas-contacto__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    min-width: 260px;
    padding: 17px 24px;

    border: 1px solid rgba(255,255,255,.6);

    color: #fff;
    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.bodas-contacto__button i {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    line-height: 1;
    transition: transform .3s ease;
}

.bodas-contacto__button:hover {
    background: #fff;
    border-color: #fff;
    color: #24211f;
}

.bodas-contacto__button:hover i {
    transform: translateX(5px);
}

.bodas-contacto__note {
    display: block;
    margin-top: 18px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: .5px;
    color: rgba(255,255,255,.42);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 700px) {

    .bodas-contacto {
        min-height: 620px;
    }

    .bodas-contacto__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(15,14,13,.86) 0%,
                rgba(15,14,13,.78) 50%,
                rgba(15,14,13,.92) 100%
            );
    }

    .bodas-contacto__content {
        width: 88%;
        padding: 70px 0;
    }

    .bodas-contacto__label {
        margin-bottom: 22px;
        font-size: 9px;
        letter-spacing: 3px;
    }

    .bodas-contacto__title {
        margin-bottom: 25px;
        font-size: clamp(43px, 12vw, 58px);
        letter-spacing: -2px;
    }

    .bodas-contacto__text {
        font-size: 13px;
        line-height: 1.6;
    }

    .bodas-contacto__trust {
        font-size: 19px;
        margin-bottom: 30px;
    }

    .bodas-contacto__button {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .bodas-contacto__note {
        line-height: 1.5;
    }
}

/* =========================================================
   BODAS — COLECCIONES
========================================================= */

.bodas-colecciones {
    width: 100%;
    background: #f4f1ea;
    color: #24211f;
    overflow: hidden;
}

.bodas-colecciones__container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 90px 3.8vw 70px;
    box-sizing: border-box;
}


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

.bodas-colecciones__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;

    padding-bottom: 42px;
    border-bottom: 1px solid #d9d4cd;
}

.bodas-colecciones__heading {
    flex: 1;
}

.bodas-colecciones__label {
    display: block;

    margin-bottom: 20px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 4px;
    line-height: 1;

    color: #77716b;
}

.bodas-colecciones__title {
    margin: 0;

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

    font-size: clamp(40px, 4vw, 58px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -2px;

    color: #24211f;
}

.bodas-colecciones__intro {
    width: min(390px, 32%);
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;

    color: #77716b;
}


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

.bodas-colecciones__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-left: 1px solid #d9d4cd;
    border-bottom: 1px solid #d9d4cd;
}


/* =========================================================
   COLECCIÓN
========================================================= */

.bodas-coleccion {
    position: relative;

    min-height: 390px;

    padding: 48px 48px 42px;

    border-right: 1px solid #d9d4cd;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    transition:
        background .35s ease,
        transform .35s ease;
}

.bodas-coleccion:hover {
    background: #eeebe4;
}


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

.bodas-coleccion__top {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 34px;
}

.bodas-coleccion__number {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2px;

    color: #77716b;
}

.bodas-coleccion__line {
    width: 42px;
    height: 1px;

    background: #b9b3ac;
}


/* =========================================================
   FEATURED
========================================================= */

.bodas-coleccion__featured-label {
    display: inline-block;

    align-self: flex-start;

    margin-bottom: 15px;
    padding-bottom: 7px;

    border-bottom: 1px solid #9e9891;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 2px;

    color: #68625d;
}


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

.bodas-coleccion__title {
    margin: 0 0 20px;

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

    font-size: clamp(28px, 2.3vw, 35px);
    font-weight: 400;
    line-height: 1;

    letter-spacing: -1px;

    color: #24211f;
}


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

.bodas-coleccion__description {
    max-width: 410px;

    margin: 0 0 24px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;

    color: #77716b;
}


/* =========================================================
   LISTA
========================================================= */

.bodas-coleccion__list {
    display: flex;
    flex-direction: column;
    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.bodas-coleccion__list li {
    position: relative;

    padding-left: 15px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .2px;

    color: #68625d;
}

.bodas-coleccion__list li::before {
    content: "";

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

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #9c958e;

    transform: translateY(-50%);
}


/* =========================================================
   LINK
========================================================= */

.bodas-coleccion__link {
    display: inline-flex;
    align-items: center;
    gap: 17px;

    margin-top: auto;
    padding-top: 32px;

    width: fit-content;

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 3px;

    color: #24211f;
}

.bodas-coleccion__link i {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;

    letter-spacing: 0;

    transition:
        transform .3s ease;
}

.bodas-coleccion__link:hover i {
    transform: translateX(6px);
}


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

.bodas-colecciones__footer {
    display: flex;
    align-items: center;

    gap: 18px;

    padding-top: 24px;
}

.bodas-colecciones__footer > span {
    display: block;

    width: 34px;
    height: 1px;

    background: #aaa39c;
}

.bodas-colecciones__footer p {
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;

    color: #77716b;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .bodas-colecciones__container {
        padding: 70px 5vw 55px;
    }

    .bodas-colecciones__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .bodas-colecciones__intro {
        width: 100%;
        max-width: 550px;
    }

    .bodas-colecciones__grid {
        grid-template-columns: 1fr;
    }

    .bodas-coleccion {
        min-height: 0;
        padding: 42px 35px;
        border-bottom: 1px solid #d9d4cd;
    }

    .bodas-coleccion:last-child {
        border-bottom: 0;
    }

}


@media (max-width: 600px) {

    .bodas-colecciones__container {
        padding: 60px 5vw 45px;
    }

    .bodas-colecciones__header {
        padding-bottom: 32px;
    }

    .bodas-colecciones__title {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .bodas-coleccion {
        padding: 38px 26px;
    }

    .bodas-coleccion__top {
        margin-bottom: 28px;
    }

    .bodas-coleccion__title {
        font-size: 30px;
    }

    .bodas-coleccion__description {
        font-size: 13px;
    }

    .bodas-colecciones__footer {
        align-items: flex-start;
    }

    .bodas-colecciones__footer > span {
        margin-top: 7px;
        flex-shrink: 0;
    }

}


/* =========================================================
   XV AÑOS — HERO
========================================================= */

.xv-hero {

    position: relative;

    width: 100%;
    height: 620px;
    min-height: 620px;

    overflow: hidden;

    background: #171513;
    color: #fff;
}


/* =========================================================
   IMAGEN
========================================================= */

.xv-hero__image {

    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("../img/xv-hero.png");

    background-size: cover;

    background-position:
        center center;

    background-repeat: no-repeat;

}


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

.xv-hero__overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(13,12,11,.94) 0%,
            rgba(13,12,11,.88) 18%,
            rgba(13,12,11,.72) 34%,
            rgba(13,12,11,.48) 49%,
            rgba(13,12,11,.20) 66%,
            rgba(13,12,11,.05) 82%,
            rgba(13,12,11,0) 100%
        );

}


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

.xv-header {

    position: absolute;

    top: 0;
    left: 0;

    z-index: 10;

    width: 100%;

    height: 68px;

    display: flex;

    align-items: center;

    padding:
        0
        4.1vw
        0
        5.85vw;

    box-sizing: border-box;

}


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

.xv-header__logo {

    flex-shrink: 0;

    color: #fff;

    text-decoration: none;

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

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 3px;

}


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

.xv-header__navigation {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-left: auto;
    margin-right: 38px;

}

.xv-header__navigation a {

    position: relative;

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

    text-decoration: none;

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

    font-size: 10px;

    font-weight: 400;

    letter-spacing: .7px;

    transition:
        color .3s ease;

}

.xv-header__navigation a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: #fff;

    transition:
        width .3s ease;

}

.xv-header__navigation a:hover,
.xv-header__navigation a.active {

    color: #fff;

}

.xv-header__navigation a:hover::after,
.xv-header__navigation a.active::after {

    width: 100%;

}


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

.xv-header__button {

    display: flex;

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

    gap: 20px;

    flex-shrink: 0;

    padding:
        12px
        17px;

    border:
        1px solid rgba(255,255,255,.45);

    color: #fff;

    text-decoration: none;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 1.7px;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

}

.xv-header__button i {

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

    font-size: 15px;

    font-style: normal;

    transition:
        transform .3s ease;

}

.xv-header__button:hover {

    background: #fff;

    border-color: #fff;

    color: #24211f;

}

.xv-header__button:hover i {

    transform:
        translateX(4px);

}


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

.xv-hero__content {

    position: absolute;

    left: 8vw;

    top: 50%;

    z-index: 5;

    width: min(620px, 46vw);

    transform:
        translateY(-45%);

}


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

.xv-hero__eyebrow {

    display: block;

    margin-bottom: 25px;

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

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 4px;

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

}


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

.xv-hero__title {

    margin: 0 0 27px;

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

    font-size:
        clamp(54px, 5vw, 76px);

    font-weight: 400;

    line-height: .90;

    letter-spacing: -3px;

    color: #fff;

}

.xv-hero__title em {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 300;

    letter-spacing: -1px;

}


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

.xv-hero__description {

    max-width: 500px;

    margin: 0;

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

    font-size: 13px;

    font-weight: 400;

    line-height: 1.65;

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

}


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

.xv-hero__line {

    width: 55px;

    height: 1px;

    margin:
        27px
        0
        18px;

    background:
        rgba(255,255,255,.55);

}


/* =========================================================
   STATEMENT
========================================================= */

.xv-hero__statement {

    margin: 0;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 3px;

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

}


/* =========================================================
   CONTADOR
========================================================= */

.xv-hero__counter {

    position: absolute;

    right: 4.1vw;
    bottom: 38px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 8px;

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

    font-size: 9px;

    letter-spacing: 2px;

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

}

.xv-hero__counter .current {

    color: #fff;

}

.xv-hero__counter .line {

    display: block;

    width: 38px;
    height: 1px;

    margin-left: 8px;

    background:
        rgba(255,255,255,.45);

}


/* =========================================================
   INDICADOR
========================================================= */

.xv-hero__indicator {

    position: absolute;

    left: 4.1vw;
    bottom: 34px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 10px;

}

.xv-hero__indicator .dot {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.65);

}

.xv-hero__indicator .indicator-line {

    width: 42px;
    height: 1px;

    background:
        rgba(255,255,255,.45);

}

.xv-hero__indicator .indicator-text {

    margin-left: 5px;

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

    font-size: 8px;

    letter-spacing: 2px;

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

}


/* =========================================================
   FIRMA
========================================================= */

.xv-hero__signature {

    position: absolute;

    right: 4.1vw;
    bottom: 35px;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 14px;

    font-style: italic;

    font-weight: 300;

    line-height: 1;

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

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .xv-header {

        padding:
            0
            5vw;

    }

    .xv-header__navigation {

        display: none;

    }

    .xv-header__button {

        margin-left: auto;

    }

    .xv-hero__content {

        left: 7vw;

        width: 75vw;

    }

}


@media (max-width: 600px) {

    .xv-hero {

        height: 680px;
        min-height: 680px;

    }

    .xv-hero__image {

        background-position:
            62% center;

    }

    .xv-hero__overlay {

        background:
            linear-gradient(
                180deg,
                rgba(13,12,11,.55) 0%,
                rgba(13,12,11,.68) 42%,
                rgba(13,12,11,.92) 100%
            );

    }

    .xv-header {

        height: 64px;

    }

    .xv-header__logo {

        font-size: 11px;

        letter-spacing: 2.5px;

    }

    .xv-header__button {

        padding:
            10px 12px;

        gap: 10px;

        font-size: 7px;

        letter-spacing: 1px;

    }

    .xv-hero__content {

        left: 7vw;

        top: 48%;

        width: 84vw;

        transform:
            translateY(-50%);

    }

    .xv-hero__eyebrow {

        margin-bottom: 20px;

    }

    .xv-hero__title {

        margin-bottom: 23px;

        font-size:
            clamp(44px, 12vw, 58px);

        letter-spacing: -2px;

    }

    .xv-hero__description {

        font-size: 12px;

        line-height: 1.6;

    }

    .xv-hero__line {

        margin-top: 23px;

    }

    .xv-hero__counter {

        right: 5vw;
        bottom: 25px;

    }

    .xv-hero__indicator {

        left: 5vw;
        bottom: 25px;

    }

    .xv-hero__signature {

        display: none;

    }

}

/* =========================================================
   XV AÑOS — NUESTRA MIRADA
========================================================= */

.xv-mirada {

    width: 100%;

    min-height: 540px;

    display: grid;

    grid-template-columns:
        50% 50%;

    background: #f4f1ea;

    color: #24211f;

    overflow: hidden;

}


/* =========================================================
   IMAGEN
========================================================= */

.xv-mirada__image {

    position: relative;

    min-height: 540px;

    background-image:
        url("../img/xv-mirada.png");

    background-size: cover;

    background-position:
        center center;

    background-repeat: no-repeat;

}


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

.xv-mirada__image-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(12,11,10,.78) 0%,
            rgba(12,11,10,.48) 45%,
            rgba(12,11,10,.15) 100%
        );

}


/* =========================================================
   FRASE SOBRE IMAGEN
========================================================= */

.xv-mirada__quote {

    position: absolute;

    left: 11%;

    top: 50%;

    z-index: 2;

    transform:
        translateY(-50%);

}


.xv-mirada__quote p {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(30px, 2.8vw, 40px);

    font-style: italic;

    font-weight: 300;

    line-height: 1.08;

    letter-spacing: -.4px;

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

    text-shadow:
        0 2px 10px rgba(0,0,0,.40);

}


.xv-mirada__quote span {

    display: block;

    width: 58px;

    height: 1px;

    margin-top: 26px;

    background:
        rgba(255,255,255,.80);

}


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

.xv-mirada__content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        62px
        7vw
        62px
        4.1vw;

    background: #f4f1ea;

}


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

.xv-mirada__label {

    display: block;

    margin-bottom: 22px;

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

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 4px;

    color: #5e5853;

}


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

.xv-mirada__title {

    margin:
        0
        0
        24px;

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

    font-size:
        clamp(43px, 3.8vw, 61px);

    font-weight: 400;

    line-height: .91;

    letter-spacing: -2.5px;

    color: #151311;

}


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

.xv-mirada__description {

    max-width: 620px;

    margin: 0;

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

    font-size: 14px;

    font-weight: 400;

    line-height: 1.55;

    color: #5d5853;

}


/* =========================================================
   DIVISOR
========================================================= */

.xv-mirada__divider {

    width: 58px;

    height: 1px;

    margin:
        25px
        0
        18px;

    background: #aaa39c;

}


/* =========================================================
   FEATURES
========================================================= */

.xv-mirada__features {

    display: grid;

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

    column-gap: 32px;

    width: 100%;

}


.xv-mirada__feature {

    min-width: 0;

    transition:
        transform .3s ease;

}


.xv-mirada__feature:hover {

    transform:
        translateY(-3px);

}


/* =========================================================
   ICONOS
========================================================= */

.xv-mirada__icon {

    width: 48px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    margin-bottom: 10px;

    color: #282522;

}


.xv-mirada__icon svg {

    display: block;

    width: 36px;

    height: auto;

}


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

.xv-mirada__feature h3 {

    margin:
        0
        0
        6px;

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

    font-size: 12px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: .3px;

    color: #282522;

}


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

.xv-mirada__feature p {

    margin: 0;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1.45;

    color: #77716b;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .xv-mirada {

        grid-template-columns:
            1fr;

    }

    .xv-mirada__image {

        min-height: 460px;

    }

    .xv-mirada__content {

        padding:
            60px
            7vw;

    }

}


@media (max-width: 600px) {

    .xv-mirada__image {

        min-height: 390px;

        background-position:
            center center;

    }

    .xv-mirada__quote {

        left: 8%;

    }

    .xv-mirada__quote p {

        font-size: 31px;

    }

    .xv-mirada__content {

        padding:
            55px
            7vw;

    }

    .xv-mirada__title {

        font-size: 43px;

        letter-spacing: -2px;

    }

    .xv-mirada__description {

        font-size: 13px;

        line-height: 1.6;

    }

    .xv-mirada__features {

        grid-template-columns:
            1fr;

        row-gap: 28px;

    }

}


/* =========================================================
   XV AÑOS — COLECCIONES
========================================================= */

.xv-colecciones {
    width: 100%;

    background: #f4f1ea;

    color: #24211f;

    overflow: hidden;
}


.xv-colecciones__container {
    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding:
        95px
        3.8vw
        72px;

    box-sizing: border-box;
}


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

.xv-colecciones__header {

    display: grid;

    grid-template-columns:
        1fr
        minmax(300px, 430px);

    column-gap: 80px;

    align-items: end;

    padding-bottom: 48px;

    border-bottom:
        1px solid #d8d3cc;

}


.xv-colecciones__label {

    display: block;

    grid-column: 1 / -1;

    margin-bottom: 20px;

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

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 4px;

    line-height: 1;

    color: #77716b;

}


.xv-colecciones__title {

    margin: 0;

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

    font-size:
        clamp(42px, 4vw, 60px);

    font-weight: 400;

    line-height: .92;

    letter-spacing: -2.5px;

    color: #24211f;

}


.xv-colecciones__intro {

    max-width: 410px;

    margin: 0;

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

    font-size: 13px;

    font-weight: 400;

    line-height: 1.65;

    color: #77716b;

}


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

.xv-colecciones__grid {

    display: grid;

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

    margin-top: 38px;

    border:
        1px solid #d8d3cc;

}


/* =========================================================
   COLECCIÓN
========================================================= */

.xv-coleccion {

    position: relative;

    min-height: 430px;

    display: flex;

    flex-direction: column;

    padding:
        42px
        42px
        38px;

    box-sizing: border-box;

    border-right:
        1px solid #d8d3cc;

    background: transparent;

    transition:
        background .35s ease,
        transform .35s ease;

}


.xv-coleccion:last-child {
    border-right: 0;
}


.xv-coleccion:hover {
    background: #eeeae3;
}


/* =========================================================
   COLECCIÓN DESTACADA
========================================================= */

.xv-coleccion--featured {

    background: #ebe7df;

}


.xv-coleccion--featured:hover {

    background: #e6e1d8;

}


/* =========================================================
   NÚMERO
========================================================= */

.xv-coleccion__number {

    width: 100%;

    padding-bottom: 18px;

    margin-bottom: 36px;

    border-bottom:
        1px solid #c9c3bc;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #77716b;

}


.xv-coleccion__number::after {

    content: "";

    display: inline-block;

    width: 38px;

    height: 1px;

    margin-left: 14px;

    vertical-align: middle;

    background: #aaa39c;

}


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

.xv-coleccion__content {

    flex: 1;

}


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

.xv-coleccion__eyebrow {

    display: block;

    margin-bottom: 13px;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2.5px;

    color: #77716b;

}


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

.xv-coleccion__title {

    margin:
        0
        0
        21px;

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

    font-size:
        clamp(29px, 2.4vw, 37px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -1.2px;

    color: #24211f;

}


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

.xv-coleccion__description {

    max-width: 390px;

    margin: 0;

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

    font-size: 13px;

    font-weight: 400;

    line-height: 1.65;

    color: #77716b;

}


/* =========================================================
   DETALLES
========================================================= */

.xv-coleccion__details {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 25px;

}


.xv-coleccion__details span {

    position: relative;

    padding-left: 14px;

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

    font-size: 10px;

    line-height: 1.3;

    color: #68625d;

}


.xv-coleccion__details span::before {

    content: "";

    position: absolute;

    left: 0;

    top: 6px;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #aaa39c;

}


/* =========================================================
   LINK
========================================================= */

.xv-coleccion__link {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    width: fit-content;

    margin-top: 30px;

    padding-top: 18px;

    border-top:
        1px solid #c9c3bc;

    text-decoration: none;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 3px;

    color: #24211f;

}


.xv-coleccion__link i {

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

    font-size: 17px;

    font-style: normal;

    letter-spacing: 0;

    transition:
        transform .3s ease;

}


.xv-coleccion__link:hover i {

    transform:
        translateX(6px);

}


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

.xv-colecciones__footer {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding-top: 24px;

}


.xv-colecciones__footer-line {

    display: block;

    flex-shrink: 0;

    width: 34px;

    height: 1px;

    margin-top: 7px;

    background: #aaa39c;

}


.xv-colecciones__footer p {

    max-width: 850px;

    margin: 0;

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

    font-size: 11px;

    font-style: italic;

    font-weight: 400;

    line-height: 1.5;

    color: #77716b;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .xv-colecciones__container {

        padding:
            75px
            5vw
            60px;

    }


    .xv-colecciones__header {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .xv-colecciones__label {

        margin-bottom: 0;

    }


    .xv-colecciones__intro {

        max-width: 580px;

    }


    .xv-colecciones__grid {

        grid-template-columns: 1fr;

    }


    .xv-coleccion {

        min-height: 0;

        border-right: 0;

        border-bottom:
            1px solid #d8d3cc;

    }


    .xv-coleccion:last-child {

        border-bottom: 0;

    }

}


@media (max-width: 600px) {

    .xv-colecciones__container {

        padding:
            60px
            5vw
            50px;

    }


    .xv-colecciones__header {

        padding-bottom: 34px;

    }


    .xv-colecciones__title {

        font-size: 41px;

        letter-spacing: -1.7px;

    }


    .xv-colecciones__grid {

        margin-top: 28px;

    }


    .xv-coleccion {

        padding:
            36px
            25px;

    }


    .xv-coleccion__number {

        margin-bottom: 30px;

    }


    .xv-coleccion__title {

        font-size: 30px;

    }


    .xv-coleccion__description {

        font-size: 13px;

    }

}

/* =========================================================
   XV AÑOS — GALERÍA
========================================================= */

.xv-galeria__stage {

    position: relative;

    width: 100%;
    height: 650px;

    overflow: hidden;

    background: #f4f1ea;

}


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

.xv-galeria__photo {

    position: absolute;

    margin: 0;

    overflow: hidden;

    background: #24211f;

}


.xv-galeria__photo img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        opacity .35s ease,
        transform .8s cubic-bezier(.22, 1, .36, 1);

}


/* =========================================================
   FOTO PRINCIPAL
========================================================= */

.xv-galeria__photo--main {

    top: 7%;
    left: 10%;

    width: 56%;
    height: 79%;

    z-index: 3;

}


/* =========================================================
   FOTO SECUNDARIA
========================================================= */

.xv-galeria__photo--secondary {

    top: 16%;
    right: 7%;

    width: 25%;
    height: 56%;

    z-index: 2;

}


/* =========================================================
   FOTO PEQUEÑA
========================================================= */

.xv-galeria__photo--small {

    right: 19%;
    bottom: 7%;

    width: 19%;
    height: 28%;

    z-index: 4;

}


/* =========================================================
   SOMBRAS
========================================================= */

.xv-galeria__photo--main {

    box-shadow:
        0 24px 60px rgba(0,0,0,.25);

}


.xv-galeria__photo--secondary,
.xv-galeria__photo--small {

    box-shadow:
        0 18px 45px rgba(0,0,0,.30);

}


/* =========================================================
   FRASE
========================================================= */

.xv-galeria__phrase {

    position: absolute;

    left: 4.5%;
    bottom: 9%;

    z-index: 10;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding:
        22px
        25px
        22px
        20px;

    background:
        rgba(244,241,234,.91);

    border:
        1px solid rgba(255,255,255,.55);

    box-shadow:
        0 15px 35px rgba(20,18,16,.20);

    backdrop-filter:
        blur(8px);

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

}


.xv-galeria__phrase > span {

    display: block;

    padding-top: 3px;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #77716b;

}


.xv-galeria__phrase p {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 23px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.02;

    letter-spacing: -.2px;

    color: #292522;

}


/* =========================================================
   PROGRESO
========================================================= */

.xv-galeria__progress {

    position: absolute;

    right: 3.8%;

    top: 50%;

    z-index: 10;

    display: flex;

    flex-direction: column;

    gap: 9px;

    transform:
        translateY(-50%);

}


.xv-galeria__progress span {

    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.38);

    transition:
        transform .3s ease,
        background .3s ease;

}


.xv-galeria__progress span.active {

    background: #fff;

    transform:
        scale(1.5);

}


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

.xv-galeria__footer {

    display: grid;

    grid-template-columns:
        180px
        1fr
        180px;

    align-items: center;

    min-height: 105px;

    padding:
        0
        4.1vw;

    background: #f4f1ea;

    border-top:
        1px solid #d8d3cc;

    box-sizing: border-box;

}


/* =========================================================
   CONTADOR
========================================================= */

.xv-galeria__counter {

    display: flex;

    align-items: center;

    gap: 8px;

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

    font-size: 9px;

    letter-spacing: 2px;

    color: #8a847e;

}


.xv-galeria__counter strong {

    font-weight: 500;

    color: #24211f;

}


/* =========================================================
   CAPTION
========================================================= */

.xv-galeria__caption {

    text-align: center;

}


.xv-galeria__caption span {

    display: block;

    margin-bottom: 7px;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 3px;

    color: #77716b;

}


.xv-galeria__caption p {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 17px;

    font-style: italic;

    font-weight: 300;

    color: #5f5953;

}


/* =========================================================
   CONTROLES
========================================================= */

.xv-galeria__controls {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

}


.xv-galeria__arrow {

    width: 44px;
    height: 44px;

    display: flex;

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

    border:
        1px solid #c9c3bc;

    background: transparent;

    color: #24211f;

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

    font-size: 17px;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

}


.xv-galeria__arrow:hover {

    background: #24211f;

    border-color: #24211f;

    color: #fff;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .xv-galeria__stage {

        height: 560px;

    }


    .xv-galeria__photo--main {

        left: 7%;

        width: 63%;
        height: 76%;

    }


    .xv-galeria__photo--secondary {

        right: 5%;

        width: 28%;
        height: 51%;

    }


    .xv-galeria__photo--small {

        right: 14%;

        width: 24%;
        height: 27%;

    }


    .xv-galeria__footer {

        grid-template-columns:
            100px
            1fr
            120px;

    }

}


@media (max-width: 600px) {

    .xv-galeria__stage {

        height: 570px;

    }


    .xv-galeria__photo--main {

        top: 7%;
        left: 5%;

        width: 78%;
        height: 68%;

    }


    .xv-galeria__photo--secondary {

        top: 15%;
        right: 3%;

        width: 32%;
        height: 40%;

    }


    .xv-galeria__photo--small {

        right: 8%;
        bottom: 7%;

        width: 42%;
        height: 25%;

    }


    .xv-galeria__phrase {

        left: 5%;
        bottom: 7%;

        padding:
            17px
            18px
            17px
            16px;

        gap: 13px;

    }


    .xv-galeria__phrase p {

        font-size: 19px;

    }


    .xv-galeria__phrase > span {

        font-size: 7px;

    }


    .xv-galeria__progress {

        right: 3%;

    }


    .xv-galeria__footer {

        display: grid;

        grid-template-columns:
            70px
            1fr
            90px;

        min-height: 100px;

        padding:
            0
            5vw;

    }


    .xv-galeria__caption span {

        font-size: 7px;

        letter-spacing: 2px;

    }


    .xv-galeria__caption p {

        font-size: 14px;

    }


    .xv-galeria__arrow {

        width: 36px;
        height: 36px;

    }

}

/* =========================================================
   XV AÑOS — CONTACTO
========================================================= */

.xv-contacto {

    position: relative;

    width: 100%;

    height: 600px;
    min-height: 600px;

    overflow: hidden;

    background: #171513;

    color: #fff;

}


/* =========================================================
   IMAGEN DE FONDO
========================================================= */

.xv-contacto__image {

    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("../img/xv-contacto.png");

    background-size: cover;

    background-position:
        center center;

    background-repeat: no-repeat;

}


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

.xv-contacto__overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(14,13,12,.94) 0%,
            rgba(14,13,12,.88) 24%,
            rgba(14,13,12,.68) 43%,
            rgba(14,13,12,.38) 62%,
            rgba(14,13,12,.12) 82%,
            rgba(14,13,12,.02) 100%
        );

}


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

.xv-contacto__content {

    position: relative;

    z-index: 3;

    width: min(620px, 52vw);

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        55px
        0
        55px
        8vw;

    box-sizing: border-box;

}


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

.xv-contacto__label {

    display: block;

    margin-bottom: 20px;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 3.5px;

    line-height: 1;

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

}


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

.xv-contacto__title {

    max-width: 610px;

    margin:
        0
        25px;

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

    font-size:
        clamp(42px, 4vw, 61px);

    font-weight: 400;

    line-height: .94;

    letter-spacing: -2.4px;

    color: #fff;

}


.xv-contacto__title em {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 300;

    letter-spacing: -.7px;

}


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

.xv-contacto__text {

    max-width: 500px;

    padding-top: 5%;

    margin:
        0
        0
        17px;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1.6;

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

}


/* =========================================================
   MENSAJE EMOCIONAL
========================================================= */

.xv-contacto__trust {

    max-width: 500px;

    margin:
        0
        0
        25px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 18px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.22;

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

}


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

.xv-contacto__button {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    width: fit-content;

    min-width: 245px;

    padding:
        14px
        18px;

    border:
        1px solid rgba(255,255,255,.48);

    color: #fff;

    text-decoration: none;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2px;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

}


.xv-contacto__button i {

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

    font-size: 17px;

    font-style: normal;

    transition:
        transform .3s ease;

}


.xv-contacto__button:hover {

    background: #fff;

    border-color: #fff;

    color: #24211f;

}


.xv-contacto__button:hover i {

    transform:
        translateX(5px);

}


/* =========================================================
   NOTA
========================================================= */

.xv-contacto__note {

    display: block;

    margin-top: 12px;

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

    font-size: 8px;

    font-style: italic;

    line-height: 1.4;

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

}


/* =========================================================
   FIRMA
========================================================= */

.xv-contacto__signature {

    position: absolute;

    right: 4.5vw;

    bottom: 32px;

    z-index: 4;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 2px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 14px;

    font-style: italic;

    font-weight: 300;

    line-height: 1;

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

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .xv-contacto {

        height: 620px;

        min-height: 620px;

    }


    .xv-contacto__content {

        width: 65vw;

        padding-left: 7vw;

    }


    .xv-contacto__overlay {

        background:
            linear-gradient(
                90deg,
                rgba(14,13,12,.95) 0%,
                rgba(14,13,12,.84) 35%,
                rgba(14,13,12,.50) 70%,
                rgba(14,13,12,.20) 100%
            );

    }

}


@media (max-width: 600px) {

    .xv-contacto {

        height: 680px;

        min-height: 680px;

    }


    .xv-contacto__image {

        background-position:
            62% center;

    }


    .xv-contacto__overlay {

        background:
            linear-gradient(
                180deg,
                rgba(14,13,12,.40) 0%,
                rgba(14,13,12,.70) 40%,
                rgba(14,13,12,.96) 100%
            );

    }


    .xv-contacto__content {

        width: 100%;

        height: 100%;

        padding:
            55px
            7vw
            90px;

    }


    .xv-contacto__label {

        margin-bottom: 18px;

        font-size: 8px;

        letter-spacing: 3px;

    }


    .xv-contacto__title {

        margin-bottom: 22px;

        font-size:
            clamp(38px, 10.5vw, 50px);

        line-height: .94;

        letter-spacing: -1.8px;

    }


    .xv-contacto__text {

        font-size: 12px;

        line-height: 1.58;

    }


    .xv-contacto__trust {

        font-size: 17px;

        line-height: 1.2;

    }


    .xv-contacto__button {

        min-width: 220px;

        padding:
            13px
            16px;

        font-size: 7px;

        letter-spacing: 1.5px;

    }


    .xv-contacto__signature {

        right: 7vw;

        bottom: 25px;

        font-size: 12px;

    }

}


/* =========================================================
   HERO — EVENTOS
========================================================= */

.eventos-hero {
    position: relative;
    width: 100%;
    height: 520px;
    min-height: 520px;
    overflow: hidden;

    background: #171513;
    color: #fff;
}


/* =========================================================
   IMAGEN
========================================================= */

.eventos-hero__image {
    position: absolute;
    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    background-image: url("../img/eventos-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* =========================================================
   OVERLAY
========================================================= */

.eventos-hero__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(14, 13, 12, .94) 0%,
            rgba(14, 13, 12, .87) 22%,
            rgba(14, 13, 12, .66) 42%,
            rgba(14, 13, 12, .36) 62%,
            rgba(14, 13, 12, .12) 80%,
            rgba(14, 13, 12, 0) 100%
        );
}


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

.eventos-hero__content {
    position: relative;

    z-index: 4;

    width: min(650px, 52vw);
    height: 100%;

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

    box-sizing: border-box;

    padding: 55px 0 35px 8vw;

    /*
       Bajamos todo el contenido para equilibrarlo
       visualmente dentro del hero.
    */
    transform: translateY(85px);
}


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

.eventos-hero__eyebrow {
    display: block;

    margin-bottom: 23px;

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

    font-size: 10px;
    font-weight: 500;

    line-height: 1;

    letter-spacing: 4px;

    color: rgba(255, 255, 255, .62);
}


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

.eventos-hero__title {
    max-width: 650px;

    margin: 0 0 26px;

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

    font-size: clamp(52px, 5vw, 76px);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -3px;

    color: #fff;
}


/* =========================================================
   PALABRA EN CURSIVA
========================================================= */

.eventos-hero__title em {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;
    font-weight: 300;

    letter-spacing: -1px;
}


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

.eventos-hero__description {
    max-width: 500px;

    margin: 0 0 27px;

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

    font-size: 13px;

    font-weight: 400;

    line-height: 1.6;

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


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

.eventos-hero__line {
    width: 58px;
    height: 1px;

    margin-bottom: 17px;

    background: rgba(255, 255, 255, .68);
}


/* =========================================================
   STATEMENT
========================================================= */

.eventos-hero__statement {
    margin: 0;

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

    font-size: 8px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 3px;

    color: rgba(255, 255, 255, .58);
}


/* =========================================================
   CONTADOR
========================================================= */

.eventos-hero__counter {
    position: absolute;

    right: 4.1vw;
    bottom: 39px;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 8px;

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

    font-size: 9px;

    letter-spacing: 2px;

    color: rgba(255, 255, 255, .48);
}


.eventos-hero__counter .current {
    color: #fff;
}


.eventos-hero__counter .line {
    display: block;

    width: 48px;
    height: 1px;

    margin-left: 7px;

    background: rgba(255, 255, 255, .42);
}


/* =========================================================
   INDICADOR LATERAL
========================================================= */

.eventos-hero__indicator {
    position: absolute;

    left: 2.7vw;
    top: 50%;

    z-index: 5;

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

    transform: translateY(-50%);
}


.eventos-hero__indicator .dot {
    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .80);
}


.eventos-hero__indicator .indicator-line {
    width: 1px;
    height: 75px;

    margin: 9px 0;

    background: rgba(255, 255, 255, .42);
}


.eventos-hero__indicator .indicator-text {
    margin-top: 15px;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

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

    font-size: 7px;

    font-weight: 500;

    letter-spacing: 2px;

    color: rgba(255, 255, 255, .55);
}


/* =========================================================
   FIRMA
========================================================= */

.eventos-hero__signature {
    position: absolute;

    right: 4.1vw;
    bottom: 83px;

    z-index: 5;

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

    gap: 3px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 14px;

    font-style: italic;
    font-weight: 300;

    line-height: 1;

    color: rgba(255, 255, 255, .62);
}


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

@media (max-width: 900px) {

    .eventos-hero {
        height: 620px;
        min-height: 620px;
    }


    .eventos-hero__content {
        width: 70vw;

        padding-left: 7vw;

        /*
           Conservamos el desplazamiento vertical.
        */
        transform: translateY(85px);
    }


    .eventos-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(14, 13, 12, .95) 0%,
                rgba(14, 13, 12, .86) 35%,
                rgba(14, 13, 12, .52) 70%,
                rgba(14, 13, 12, .18) 100%
            );
    }


    .eventos-hero__indicator {
        left: 2vw;
    }

}


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

@media (max-width: 600px) {

    .eventos-hero {
        height: 680px;
        min-height: 680px;
    }


    /* -----------------------------------------------------
       IMAGEN
    ----------------------------------------------------- */

    .eventos-hero__image {
        background-position: 60% center;
    }


    /* -----------------------------------------------------
       OVERLAY
    ----------------------------------------------------- */

    .eventos-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(14, 13, 12, .38) 0%,
                rgba(14, 13, 12, .70) 42%,
                rgba(14, 13, 12, .96) 100%
            );
    }


    /* -----------------------------------------------------
       CONTENIDO
    ----------------------------------------------------- */

    .eventos-hero__content {
        width: 100%;
        height: 100%;

        padding:
            120px
            8vw
            100px;

        justify-content: center;

        /*
           En móvil NO bajamos el contenido otros 85px.
        */
        transform: none;
    }


    /* -----------------------------------------------------
       EYEBROW
    ----------------------------------------------------- */

    .eventos-hero__eyebrow {
        margin-bottom: 18px;

        font-size: 8px;

        letter-spacing: 3px;
    }


    /* -----------------------------------------------------
       TÍTULO
    ----------------------------------------------------- */

    .eventos-hero__title {
        margin-bottom: 23px;

        font-size: clamp(43px, 11vw, 57px);

        line-height: .91;

        letter-spacing: -2px;
    }


    /* -----------------------------------------------------
       DESCRIPCIÓN
    ----------------------------------------------------- */

    .eventos-hero__description {
        max-width: 390px;

        font-size: 12px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       STATEMENT
    ----------------------------------------------------- */

    .eventos-hero__statement {
        font-size: 7px;

        letter-spacing: 2px;
    }


    /* -----------------------------------------------------
       INDICADOR
    ----------------------------------------------------- */

    .eventos-hero__indicator {
        display: none;
    }


    /* -----------------------------------------------------
       CONTADOR
    ----------------------------------------------------- */

    .eventos-hero__counter {
        right: 7vw;
        bottom: 27px;
    }


    /* -----------------------------------------------------
       FIRMA
    ----------------------------------------------------- */

    .eventos-hero__signature {
        left: 8vw;
        right: auto;
        bottom: 29px;

        align-items: flex-start;

        font-size: 12px;
    }

}


/* =========================================================
   SECCIÓN 02 — NUESTRA MIRADA
========================================================= */

.eventos-mirada {
    position: relative;

    width: 100%;
    min-height: 620px;

    display: grid;
    grid-template-columns: 50% 50%;

    background: #f6f4f1;
    color: #24211f;

    overflow: hidden;
}


/* =========================================================
   IMAGEN
========================================================= */

.eventos-mirada__image {
    position: relative;

    width: 100%;
    min-height: 620px;

    overflow: hidden;

    background-image:
        url("../img/eventos-mirada.png");

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


/* =========================================================
   OVERLAY DE IMAGEN
========================================================= */

.eventos-mirada__image-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(20, 18, 16, .04) 0%,
            rgba(20, 18, 16, .12) 100%
        );
}


/* =========================================================
   FRASE SOBRE LA IMAGEN
========================================================= */

.eventos-mirada__quote {
    position: absolute;

    left: 8%;
    bottom: 8%;

    z-index: 2;

    display: flex;
    align-items: flex-start;

    gap: 18px;
}


.eventos-mirada__quote p {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 29px;

    font-style: italic;
    font-weight: 300;

    line-height: 1.02;

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

    text-shadow:
        0 2px 12px rgba(0, 0, 0, .30);
}


.eventos-mirada__quote span {
    display: block;

    width: 1px;
    height: 72px;

    background:
        rgba(255, 255, 255, .65);
}


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

.eventos-mirada__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;

    padding:
        70px
        7.2vw
        70px
        6.1vw;
}


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

.eventos-mirada__label {
    display: block;

    margin-bottom: 23px;

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

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 4px;

    color: #77716c;
}


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

.eventos-mirada__title {
    margin: 0 0 25px;

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

    font-size:
        clamp(44px, 3.7vw, 65px);

    font-weight: 400;

    line-height: .94;

    letter-spacing: -2.5px;

    color: #24211f;
}


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

.eventos-mirada__description {
    max-width: 520px;

    margin: 0 0 17px;

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

    font-size: 13px;

    font-weight: 400;

    line-height: 1.65;

    color: #77716c;
}


.eventos-mirada__description:last-of-type {
    margin-bottom: 25px;
}


/* =========================================================
   DIVISOR
========================================================= */

.eventos-mirada__divider {
    width: 100%;
    max-width: 520px;

    height: 1px;

    margin-bottom: 25px;

    background: #ddd8d2;
}


/* =========================================================
   CARACTERÍSTICAS
========================================================= */

.eventos-mirada__features {
    width: 100%;
    max-width: 560px;

    display: flex;
    flex-direction: column;

    gap: 17px;
}


/* =========================================================
   FEATURE
========================================================= */

.eventos-mirada__feature {
    display: grid;

    grid-template-columns: 35px 1fr;

    column-gap: 14px;

    align-items: start;
}


/* =========================================================
   NÚMERO
========================================================= */

.eventos-mirada__feature-number {
    padding-top: 2px;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #aaa39d;
}


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

.eventos-mirada__feature-content h3 {
    margin: 0 0 4px;

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

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 2.5px;

    color: #4f4a46;
}


.eventos-mirada__feature-content p {
    max-width: 430px;

    margin: 0;

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

    font-size: 11px;

    font-weight: 400;

    line-height: 1.45;

    color: #8a847e;
}


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

@media (max-width: 900px) {

    .eventos-mirada {
        grid-template-columns: 45% 55%;
    }


    .eventos-mirada__content {
        padding:
            60px
            6vw
            60px
            5vw;
    }


    .eventos-mirada__title {
        font-size:
            clamp(40px, 4.5vw, 56px);
    }


    .eventos-mirada__description {
        font-size: 12px;
    }

}


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

@media (max-width: 600px) {

    .eventos-mirada {
        display: flex;
        flex-direction: column;

        min-height: auto;
    }


    /* -----------------------------------------------------
       IMAGEN
    ----------------------------------------------------- */

    .eventos-mirada__image {
        min-height: 430px;

        background-position: center center;
    }


    /* -----------------------------------------------------
       FRASE
    ----------------------------------------------------- */

    .eventos-mirada__quote {
        left: 8vw;
        bottom: 8vw;

        gap: 14px;
    }


    .eventos-mirada__quote p {
        font-size: 25px;
    }


    .eventos-mirada__quote span {
        height: 58px;
    }


    /* -----------------------------------------------------
       CONTENIDO
    ----------------------------------------------------- */

    .eventos-mirada__content {
        padding:
            55px
            8vw
            60px;
    }


    /* -----------------------------------------------------
       LABEL
    ----------------------------------------------------- */

    .eventos-mirada__label {
        margin-bottom: 20px;

        font-size: 8px;

        letter-spacing: 3px;
    }


    /* -----------------------------------------------------
       TÍTULO
    ----------------------------------------------------- */

    .eventos-mirada__title {
        margin-bottom: 24px;

        font-size:
            clamp(42px, 11vw, 55px);

        line-height: .94;

        letter-spacing: -2px;
    }


    /* -----------------------------------------------------
       TEXTO
    ----------------------------------------------------- */

    .eventos-mirada__description {
        max-width: 100%;

        font-size: 12px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       DIVISOR
    ----------------------------------------------------- */

    .eventos-mirada__divider {
        margin-top: 8px;
        margin-bottom: 25px;
    }


    /* -----------------------------------------------------
       FEATURES
    ----------------------------------------------------- */

    .eventos-mirada__features {
        gap: 20px;
    }


    .eventos-mirada__feature {
        grid-template-columns: 30px 1fr;

        column-gap: 12px;
    }


    .eventos-mirada__feature-content p {
        font-size: 11px;
    }

}

/* =========================================================
   SECCIÓN 03 — TIPOS DE EVENTOS
========================================================= */

.eventos-tipos {
    position: relative;

    width: 100%;

    background: #24211f;
    color: #f6f4f1;

    overflow: hidden;
}


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

.eventos-tipos__container {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding:
        115px
        5vw
        90px;

    box-sizing: border-box;
}


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

.eventos-tipos__header {
    display: grid;

    grid-template-columns: 55% 45%;

    align-items: end;

    margin-bottom: 75px;
}


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

.eventos-tipos__label {
    display: block;

    margin-bottom: 25px;

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

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 4px;

    color: rgba(246, 244, 241, .48);
}


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

.eventos-tipos__title {
    margin: 0;

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

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

    font-weight: 400;

    line-height: .91;

    letter-spacing: -3px;

    color: #f6f4f1;
}


.eventos-tipos__title em {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 300;

    letter-spacing: -1px;
}


/* =========================================================
   INTRODUCCIÓN
========================================================= */

.eventos-tipos__intro {
    max-width: 450px;

    padding-left: 30px;

    border-left: 1px solid rgba(246, 244, 241, .20);
}


.eventos-tipos__intro p {
    margin: 0;

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

    font-size: 13px;

    font-weight: 400;

    line-height: 1.7;

    color: rgba(246, 244, 241, .62);
}


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

.eventos-tipos__grid {
    display: grid;

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

    column-gap: 22px;

    align-items: start;
}


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

.eventos-tipos__item {
    position: relative;

    overflow: hidden;
}


/* =========================================================
   POSICIONES EDITORIALES
========================================================= */

.eventos-tipos__item--sociales {
    grid-column: 1 / 6;

    margin-top: 0;
}


.eventos-tipos__item--corporativos {
    grid-column: 6 / 10;

    margin-top: 95px;
}


.eventos-tipos__item--celebraciones {
    grid-column: 10 / 13;

    margin-top: 175px;
}


/* =========================================================
   IMAGEN
========================================================= */

.eventos-tipos__image {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #171513;
}


.eventos-tipos__item--sociales
.eventos-tipos__image {
    aspect-ratio: 4 / 5;
}


.eventos-tipos__item--corporativos
.eventos-tipos__image {
    aspect-ratio: 4 / 5;
}


.eventos-tipos__item--celebraciones
.eventos-tipos__image {
    aspect-ratio: 4 / 5;
}


/* =========================================================
   IMAGEN REAL
========================================================= */

.eventos-tipos__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    filter:
        saturate(.88)
        contrast(1.03);

    transition:
        transform .8s cubic-bezier(.22, .61, .36, 1),
        filter .5s ease;
}


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

.eventos-tipos__item:hover
.eventos-tipos__image img {
    transform: scale(1.045);

    filter:
        saturate(1)
        contrast(1.04);
}


/* =========================================================
   DEGRADADO SOBRE IMAGEN
========================================================= */

.eventos-tipos__image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 45%,
            rgba(0, 0, 0, .34) 100%
        );
}


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

.eventos-tipos__content {
    display: grid;

    grid-template-columns: 35px 1fr;

    column-gap: 14px;

    padding-top: 22px;
}


/* =========================================================
   NÚMERO
========================================================= */

.eventos-tipos__number {
    padding-top: 4px;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2px;

    color: rgba(246, 244, 241, .38);
}


/* =========================================================
   TÍTULO DEL ITEM
========================================================= */

.eventos-tipos__content h3 {
    margin: 0 0 12px;

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

    font-size:
        clamp(25px, 2.2vw, 34px);

    font-weight: 400;

    line-height: .92;

    letter-spacing: -1px;

    color: #f6f4f1;
}


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

.eventos-tipos__content p {
    max-width: 290px;

    margin: 0;

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

    font-size: 11px;

    font-weight: 400;

    line-height: 1.6;

    color: rgba(246, 244, 241, .52);
}


/* =========================================================
   FOOTER DE LA SECCIÓN
========================================================= */

.eventos-tipos__footer {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 85px;
}


.eventos-tipos__footer > span {
    display: block;

    width: 55px;
    height: 1px;

    background:
        rgba(246, 244, 241, .35);
}


.eventos-tipos__footer p {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 20px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.1;

    color: rgba(246, 244, 241, .65);
}


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

@media (max-width: 1000px) {

    .eventos-tipos__container {
        padding:
            90px
            5vw
            75px;
    }


    .eventos-tipos__header {
        grid-template-columns: 1fr 1fr;

        margin-bottom: 60px;
    }


    .eventos-tipos__title {
        font-size:
            clamp(44px, 5.5vw, 64px);
    }


    .eventos-tipos__grid {
        column-gap: 16px;
    }


    .eventos-tipos__item--sociales {
        grid-column: 1 / 6;
    }


    .eventos-tipos__item--corporativos {
        grid-column: 6 / 10;

        margin-top: 65px;
    }


    .eventos-tipos__item--celebraciones {
        grid-column: 10 / 13;

        margin-top: 125px;
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 750px) {

    .eventos-tipos__header {
        display: block;

        margin-bottom: 55px;
    }


    .eventos-tipos__intro {
        max-width: 500px;

        margin-top: 30px;

        padding-left: 20px;
    }


    .eventos-tipos__grid {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 45px 18px;
    }


    .eventos-tipos__item--sociales,
    .eventos-tipos__item--corporativos,
    .eventos-tipos__item--celebraciones {

        grid-column: auto;

        margin-top: 0;
    }


    .eventos-tipos__item--celebraciones {
        grid-column: 1 / 3;

        width: 55%;
    }


    .eventos-tipos__content h3 {
        font-size: 28px;
    }

}


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

@media (max-width: 600px) {

    .eventos-tipos__container {
        padding:
            70px
            8vw
            60px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .eventos-tipos__label {
        margin-bottom: 20px;

        font-size: 8px;

        letter-spacing: 3px;
    }


    .eventos-tipos__title {
        font-size:
            clamp(43px, 11vw, 56px);

        line-height: .92;

        letter-spacing: -2px;
    }


    .eventos-tipos__intro {
        margin-top: 27px;

        padding-left: 16px;
    }


    .eventos-tipos__intro p {
        font-size: 12px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       GRID
    ----------------------------------------------------- */

    .eventos-tipos__grid {
        display: flex;

        flex-direction: column;

        gap: 55px;
    }


    /* -----------------------------------------------------
       ITEMS
    ----------------------------------------------------- */

    .eventos-tipos__item--sociales,
    .eventos-tipos__item--corporativos,
    .eventos-tipos__item--celebraciones {

        width: 100%;

        margin-top: 0;
    }


    /* -----------------------------------------------------
       IMÁGENES
    ----------------------------------------------------- */

    .eventos-tipos__item--sociales
    .eventos-tipos__image,

    .eventos-tipos__item--corporativos
    .eventos-tipos__image,

    .eventos-tipos__item--celebraciones
    .eventos-tipos__image {

        aspect-ratio: 4 / 5;
    }


    /* -----------------------------------------------------
       CONTENIDO
    ----------------------------------------------------- */

    .eventos-tipos__content {
        grid-template-columns: 30px 1fr;

        column-gap: 12px;

        padding-top: 18px;
    }


    .eventos-tipos__content h3 {
        margin-bottom: 9px;

        font-size: 29px;

        line-height: .94;
    }


    .eventos-tipos__content p {
        max-width: 100%;

        font-size: 11px;

        line-height: 1.55;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .eventos-tipos__footer {
        align-items: flex-start;

        gap: 15px;

        margin-top: 65px;
    }


    .eventos-tipos__footer > span {
        flex-shrink: 0;

        width: 35px;

        margin-top: 8px;
    }


    .eventos-tipos__footer p {
        font-size: 18px;

        line-height: 1.05;
    }

}


/* =========================================================
   SECCIÓN 04 — NUESTRA FORMA DE TRABAJAR
========================================================= */

.eventos-proceso {
    position: relative;

    width: 100%;

    background: #f6f4f1;
    color: #24211f;

    overflow: hidden;
}


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

.eventos-proceso__container {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding:
        120px
        5vw
        100px;

    box-sizing: border-box;
}


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

.eventos-proceso__header {
    display: grid;

    grid-template-columns: 55% 45%;

    align-items: end;

    margin-bottom: 95px;
}


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

.eventos-proceso__label {
    display: block;

    margin-bottom: 24px;

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

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 4px;

    color: #77716c;
}


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

.eventos-proceso__title {
    margin: 0;

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

    font-size:
        clamp(52px, 5vw, 76px);

    font-weight: 400;

    line-height: .90;

    letter-spacing: -3px;

    color: #24211f;
}


.eventos-proceso__title em {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 300;

    letter-spacing: -1px;
}


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

.eventos-proceso__intro {
    max-width: 455px;

    padding-left: 30px;

    border-left: 1px solid #d9d4ce;
}


.eventos-proceso__intro-main {
    margin: 0 0 15px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 25px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.05;

    color: #5e5853;
}


.eventos-proceso__intro p:last-child {
    margin: 0;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1.65;

    color: #77716c;
}


/* =========================================================
   PASOS
========================================================= */

.eventos-proceso__steps {
    display: grid;

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

    column-gap: 0;

    border-top: 1px solid #d9d4ce;
}


/* =========================================================
   STEP
========================================================= */

.eventos-proceso__step {
    min-height: 245px;

    padding:
        27px
        28px
        0
        0;

    border-right: 1px solid #d9d4ce;
}


.eventos-proceso__step:first-child {
    padding-left: 0;
}


.eventos-proceso__step:not(:first-child) {
    padding-left: 28px;
}


.eventos-proceso__step:last-child {
    border-right: none;
}


/* =========================================================
   PARTE SUPERIOR
========================================================= */

.eventos-proceso__step-top {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 40px;
}


.eventos-proceso__number {
    flex-shrink: 0;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #99928c;
}


.eventos-proceso__line {
    display: block;

    width: 45px;
    height: 1px;

    background: #d1cbc5;
}


/* =========================================================
   TÍTULO DEL PASO
========================================================= */

.eventos-proceso__step h3 {
    margin: 0 0 15px;

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

    font-size: 30px;

    font-weight: 400;

    line-height: .95;

    letter-spacing: -1px;

    color: #24211f;
}


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

.eventos-proceso__step p {
    max-width: 235px;

    margin: 0;

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

    font-size: 11px;

    font-weight: 400;

    line-height: 1.6;

    color: #77716c;
}


/* =========================================================
   STATEMENT
========================================================= */

.eventos-proceso__statement {
    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-top: 75px;
}


.eventos-proceso__statement-line {
    display: block;

    width: 55px;
    height: 1px;

    margin-top: 10px;

    flex-shrink: 0;

    background: #bcb5ae;
}


.eventos-proceso__statement p {
    max-width: 600px;

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 22px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.1;

    color: #5e5853;
}


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

@media (max-width: 1000px) {

    .eventos-proceso__container {
        padding:
            95px
            5vw
            80px;
    }


    .eventos-proceso__header {
        grid-template-columns: 1fr 1fr;

        margin-bottom: 75px;
    }


    .eventos-proceso__steps {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 0;
    }


    .eventos-proceso__step {
        min-height: 230px;
    }


    .eventos-proceso__step:nth-child(2) {
        border-right: none;
    }


    .eventos-proceso__step:nth-child(3),
    .eventos-proceso__step:nth-child(4) {
        border-top: 1px solid #d9d4ce;
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 750px) {

    .eventos-proceso__header {
        display: block;
    }


    .eventos-proceso__intro {
        max-width: 500px;

        margin-top: 30px;
    }

}


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

@media (max-width: 600px) {

    .eventos-proceso__container {
        padding:
            75px
            8vw
            65px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .eventos-proceso__label {
        margin-bottom: 20px;

        font-size: 8px;

        letter-spacing: 3px;
    }


    .eventos-proceso__title {
        font-size:
            clamp(44px, 11vw, 57px);

        line-height: .92;

        letter-spacing: -2px;
    }


    .eventos-proceso__intro {
        margin-top: 28px;

        padding-left: 17px;
    }


    .eventos-proceso__intro-main {
        font-size: 22px;
    }


    .eventos-proceso__intro p:last-child {
        font-size: 11px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       PASOS
    ----------------------------------------------------- */

    .eventos-proceso__steps {
        display: flex;

        flex-direction: column;

        border-top: 1px solid #d9d4ce;
    }


    .eventos-proceso__step,
    .eventos-proceso__step:not(:first-child) {

        min-height: auto;

        padding:
            28px
            0
            30px;

        border-right: none;

        border-bottom: 1px solid #d9d4ce;
    }


    .eventos-proceso__step:last-child {
        border-bottom: none;
    }


    .eventos-proceso__step-top {
        margin-bottom: 25px;
    }


    .eventos-proceso__step h3 {
        margin-bottom: 10px;

        font-size: 28px;
    }


    .eventos-proceso__step p {
        max-width: 100%;

        font-size: 11px;
    }


    /* -----------------------------------------------------
       STATEMENT
    ----------------------------------------------------- */

    .eventos-proceso__statement {
        margin-top: 50px;

        gap: 14px;
    }


    .eventos-proceso__statement-line {
        width: 32px;

        margin-top: 8px;
    }


    .eventos-proceso__statement p {
        font-size: 19px;
    }

}


/* =========================================================
   SECCIÓN 05 — GALERÍA DE EVENTOS
========================================================= */

.eventos-galeria {
    position: relative;

    width: 100%;

    background: #e9e5df;
    color: #24211f;

    overflow: hidden;
}


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

.eventos-galeria__container {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding:
        110px
        5vw
        75px;

    box-sizing: border-box;
}


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

.eventos-galeria__header {
    display: grid;

    grid-template-columns: 55% 45%;

    align-items: end;

    margin-bottom: 65px;
}


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

.eventos-galeria__label {
    display: block;

    margin-bottom: 24px;

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

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 4px;

    color: #77716c;
}


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

.eventos-galeria__title {
    margin: 0;

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

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

    font-weight: 400;

    line-height: .87;

    letter-spacing: -3px;

    color: #24211f;
}


.eventos-galeria__title em {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 300;

    letter-spacing: -1px;
}


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

.eventos-galeria__intro {
    max-width: 430px;

    padding-left: 30px;

    border-left: 1px solid #cfc9c2;
}


.eventos-galeria__intro p {
    margin: 0;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1.7;

    color: #77716c;
}


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

.eventos-galeria__stage {
    position: relative;

    width: 100%;

    height: 650px;

    overflow: hidden;
}


/* =========================================================
   FOTOS
========================================================= */

.eventos-galeria__photo {
    position: absolute;

    margin: 0;

    overflow: hidden;

    background: #d2cdc6;
}


.eventos-galeria__photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        opacity .35s ease,
        transform .8s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   FOTO PRINCIPAL
========================================================= */

.eventos-galeria__photo--main {
    left: 8%;

    top: 0;

    width: 59%;
    height: 82%;

    z-index: 3;
}


.eventos-galeria__photo--main img {
    opacity: 1;
}


/* =========================================================
   FOTO SECUNDARIA
========================================================= */

.eventos-galeria__photo--secondary {
    right: 5%;

    top: 8%;

    width: 27%;
    height: 58%;

    z-index: 2;
}


/* =========================================================
   FOTO PEQUEÑA
========================================================= */

.eventos-galeria__photo--small {
    right: 17%;

    bottom: 4%;

    width: 20%;
    height: 29%;

    z-index: 4;
}


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

.eventos-galeria__photo:hover img {
    transform: scale(1.025);
}


/* =========================================================
   FRASE
========================================================= */

.eventos-galeria__phrase {
    position: absolute;

    left: 45%;

    bottom: 8%;

    z-index: 6;

    display: flex;

    align-items: flex-start;

    gap: 17px;

    padding:
        20px
        24px
        20px
        18px;

    background:
        rgba(244, 241, 234, .94);

    border:
        1px solid rgba(255, 255, 255, .60);

    box-shadow:
        0 15px 35px rgba(20, 18, 16, .14);

    backdrop-filter: blur(6px);

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


.eventos-galeria__phrase > span {
    padding-top: 3px;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #99928c;
}


.eventos-galeria__phrase p {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 23px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.02;

    color: #292522;
}


/* =========================================================
   PROGRESO
========================================================= */

.eventos-galeria__progress {
    position: absolute;

    left: 3%;

    top: 50%;

    z-index: 7;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    transform: translateY(-50%);
}


.eventos-galeria__progress span {
    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #bcb5ae;

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease;
}


.eventos-galeria__progress span.active {
    width: 6px;
    height: 6px;

    background: #24211f;

    transform: scale(1.1);
}


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

.eventos-galeria__footer {
    display: grid;

    grid-template-columns:
        20%
        1fr
        20%;

    align-items: center;

    padding-top: 28px;

    border-top:
        1px solid #d0cbc4;
}


/* =========================================================
   CONTADOR
========================================================= */

.eventos-galeria__counter {
    display: flex;

    align-items: baseline;

    gap: 8px;

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

    font-size: 9px;

    letter-spacing: 2px;

    color: #99928c;
}


.eventos-galeria__counter strong {
    color: #24211f;
}


/* =========================================================
   CAPTION
========================================================= */

.eventos-galeria__caption {
    text-align: center;
}


.eventos-galeria__caption span {
    display: block;

    margin-bottom: 7px;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 3px;

    color: #99928c;
}


.eventos-galeria__caption p {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 19px;

    font-style: italic;

    font-weight: 300;

    line-height: 1;

    color: #5e5853;
}


/* =========================================================
   CONTROLES
========================================================= */

.eventos-galeria__controls {
    display: flex;

    justify-content: flex-end;

    gap: 8px;
}


.eventos-galeria__arrow {
    display: flex;

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

    width: 42px;
    height: 42px;

    padding: 0;

    border:
        1px solid #bcb5ae;

    background: transparent;

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

    font-size: 17px;

    font-weight: 300;

    color: #5e5853;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.eventos-galeria__arrow:hover {
    background: #24211f;

    border-color: #24211f;

    color: #f6f4f1;
}


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

@media (max-width: 1000px) {

    .eventos-galeria__container {
        padding:
            90px
            5vw
            65px;
    }


    .eventos-galeria__stage {
        height: 580px;
    }


    .eventos-galeria__photo--main {
        left: 7%;

        width: 60%;
        height: 80%;
    }


    .eventos-galeria__photo--secondary {
        right: 4%;

        width: 28%;
        height: 57%;
    }


    .eventos-galeria__photo--small {
        right: 15%;

        width: 21%;
    }


    .eventos-galeria__phrase {
        left: 42%;
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 750px) {

    .eventos-galeria__header {
        display: block;
    }


    .eventos-galeria__intro {
        max-width: 500px;

        margin-top: 30px;
    }


    .eventos-galeria__stage {
        height: 560px;
    }


    .eventos-galeria__photo--main {
        left: 4%;

        width: 68%;
        height: 76%;
    }


    .eventos-galeria__photo--secondary {
        right: 3%;

        width: 29%;
        height: 53%;
    }


    .eventos-galeria__photo--small {
        right: 12%;

        width: 25%;
        height: 27%;
    }


    .eventos-galeria__phrase {
        left: 37%;

        bottom: 9%;
    }


    .eventos-galeria__footer {
        grid-template-columns:
            20%
            1fr
            20%;
    }

}


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

@media (max-width: 600px) {

    .eventos-galeria__container {
        padding:
            75px
            8vw
            55px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .eventos-galeria__label {
        margin-bottom: 20px;

        font-size: 8px;

        letter-spacing: 3px;
    }


    .eventos-galeria__title {
        font-size:
            clamp(44px, 11vw, 58px);

        line-height: .90;

        letter-spacing: -2px;
    }


    .eventos-galeria__intro {
        margin-top: 28px;

        padding-left: 17px;
    }


    .eventos-galeria__intro p {
        font-size: 11px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       ESCENARIO
    ----------------------------------------------------- */

    .eventos-galeria__stage {
        height: 560px;

        margin-top: 50px;
    }


    /* -----------------------------------------------------
       FOTO PRINCIPAL
    ----------------------------------------------------- */

    .eventos-galeria__photo--main {
        left: 0;

        top: 0;

        width: 86%;
        height: 70%;
    }


    /* -----------------------------------------------------
       FOTO SECUNDARIA
    ----------------------------------------------------- */

    .eventos-galeria__photo--secondary {
        right: 0;

        top: 14%;

        width: 43%;
        height: 48%;
    }


    /* -----------------------------------------------------
       FOTO PEQUEÑA
    ----------------------------------------------------- */

    .eventos-galeria__photo--small {
        right: 8%;

        bottom: 2%;

        width: 42%;
        height: 25%;
    }


    /* -----------------------------------------------------
       FRASE
    ----------------------------------------------------- */

    .eventos-galeria__phrase {
        left: 5%;

        bottom: 14%;

        gap: 13px;

        padding:
            16px
            18px
            16px
            15px;
    }


    .eventos-galeria__phrase p {
        font-size: 20px;
    }


    /* -----------------------------------------------------
       PROGRESO
    ----------------------------------------------------- */

    .eventos-galeria__progress {
        display: none;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .eventos-galeria__footer {
        display: grid;

        grid-template-columns:
            1fr
            auto;

        row-gap: 20px;

        padding-top: 22px;
    }


    .eventos-galeria__counter {
        grid-column: 1;
        grid-row: 1;
    }


    .eventos-galeria__caption {
        grid-column: 1 / 3;
        grid-row: 2;

        text-align: left;
    }


    .eventos-galeria__controls {
        grid-column: 2;
        grid-row: 1;
    }


    .eventos-galeria__caption p {
        font-size: 17px;
    }


    .eventos-galeria__arrow {
        width: 38px;
        height: 38px;

        font-size: 15px;
    }

}


/* =========================================================
   SECCIÓN 06 — COBERTURAS
========================================================= */

.eventos-coberturas {
    position: relative;

    width: 100%;

    background: #f6f4f1;

    color: #24211f;

    overflow: hidden;
}


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

.eventos-coberturas__container {
    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding:
        115px
        5vw
        95px;

    box-sizing: border-box;
}


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

.eventos-coberturas__header {
    display: grid;

    grid-template-columns: 50% 50%;

    align-items: end;

    margin-bottom: 80px;
}


.eventos-coberturas__label {
    display: block;

    grid-column: 1 / 3;

    margin-bottom: 25px;

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

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 4px;

    color: #77716c;
}


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

.eventos-coberturas__title {
    max-width: 720px;

    margin: 0;

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

    font-size:
        clamp(48px, 5vw, 74px);

    font-weight: 400;

    line-height: .91;

    letter-spacing: -3px;

    color: #24211f;
}


.eventos-coberturas__title em {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 300;

    letter-spacing: -1px;
}


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

.eventos-coberturas__intro {
    max-width: 430px;

    margin: 0;

    padding-left: 30px;

    border-left: 1px solid #d5d0ca;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1.7;

    color: #77716c;
}


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

.eventos-coberturas__grid {
    display: grid;

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

    border-top:
        1px solid #d5d0ca;

    border-bottom:
        1px solid #d5d0ca;
}


/* =========================================================
   COBERTURA
========================================================= */

.eventos-cobertura {
    position: relative;

    min-height: 430px;

    padding:
        30px
        35px
        35px
        0;

    box-sizing: border-box;

    border-right:
        1px solid #d5d0ca;
}


.eventos-cobertura:not(:first-child) {
    padding-left: 35px;
}


.eventos-cobertura:last-child {
    border-right: none;
}


/* =========================================================
   COBERTURA DESTACADA
========================================================= */

.eventos-cobertura--featured {
    background: #ebe7e1;
}


/* =========================================================
   PARTE SUPERIOR
========================================================= */

.eventos-cobertura__top {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 65px;
}


.eventos-cobertura__number {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #99928c;
}


.eventos-cobertura__line {
    width: 45px;

    height: 1px;

    background: #c7c0b9;
}


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

.eventos-cobertura__title {
    margin: 0 0 22px;

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

    font-size:
        clamp(31px, 2.8vw, 42px);

    font-weight: 400;

    line-height: .90;

    letter-spacing: -1.5px;

    color: #24211f;
}


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

.eventos-cobertura__description {
    max-width: 330px;

    margin: 0 0 27px;

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

    font-size: 11px;

    font-weight: 400;

    line-height: 1.6;

    color: #77716c;
}


/* =========================================================
   LISTA
========================================================= */

.eventos-cobertura__list {
    display: flex;

    flex-direction: column;

    gap: 9px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.eventos-cobertura__list li {
    position: relative;

    padding-left: 15px;

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

    font-size: 10px;

    font-weight: 400;

    line-height: 1.3;

    color: #68625d;
}


.eventos-cobertura__list li::before {
    content: "";

    position: absolute;

    left: 0;

    top: 6px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #aaa39d;
}


/* =========================================================
   CAPTION
========================================================= */

.eventos-cobertura__caption {
    position: absolute;

    left: 0;

    bottom: 30px;

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

    font-size: 7px;

    font-weight: 500;

    letter-spacing: 2.5px;

    color: #aaa39d;
}


.eventos-cobertura:not(:first-child)
.eventos-cobertura__caption {
    left: 35px;
}


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

.eventos-coberturas__footer {
    display: grid;

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

    align-items: center;

    column-gap: 20px;

    margin-top: 65px;
}


.eventos-coberturas__footer-line {
    width: 55px;

    height: 1px;

    background: #aaa39d;
}


.eventos-coberturas__footer p {
    max-width: 650px;

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 19px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.12;

    color: #66605b;
}


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

.eventos-coberturas__button {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

    min-width: 245px;

    padding:
        14px
        17px;

    border:
        1px solid #9d9690;

    text-decoration: none;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #4d4844;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.eventos-coberturas__button i {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    font-style: normal;

    transition:
        transform .3s ease;
}


.eventos-coberturas__button:hover {
    background: #24211f;

    border-color: #24211f;

    color: #f6f4f1;
}


.eventos-coberturas__button:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 1000px) {

    .eventos-coberturas__container {
        padding:
            90px
            5vw
            75px;
    }


    .eventos-coberturas__header {
        margin-bottom: 65px;
    }


    .eventos-cobertura {
        min-height: 450px;

        padding-right: 25px;
    }


    .eventos-cobertura:not(:first-child) {
        padding-left: 25px;
    }


    .eventos-cobertura__caption {
        left: 0;
    }


    .eventos-cobertura:not(:first-child)
    .eventos-cobertura__caption {
        left: 25px;
    }


    .eventos-coberturas__footer {
        grid-template-columns:
            35px
            1fr;

        row-gap: 25px;
    }


    .eventos-coberturas__footer-line {
        width: 35px;
    }


    .eventos-coberturas__button {
        grid-column: 2;

        width: fit-content;
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 750px) {

    .eventos-coberturas__header {
        display: block;
    }


    .eventos-coberturas__label {
        margin-bottom: 20px;
    }


    .eventos-coberturas__intro {
        margin-top: 30px;
    }


    .eventos-coberturas__grid {
        grid-template-columns: 1fr;
    }


    .eventos-cobertura,
    .eventos-cobertura:not(:first-child) {

        min-height: auto;

        padding:
            35px
            30px
            85px;
    }


    .eventos-cobertura {
        border-right: none;

        border-bottom:
            1px solid #d5d0ca;
    }


    .eventos-cobertura:last-child {
        border-bottom: none;
    }


    .eventos-cobertura:not(:first-child)
    .eventos-cobertura__caption {
        left: 30px;
    }


    .eventos-cobertura__top {
        margin-bottom: 45px;
    }


    .eventos-coberturas__footer {
        display: flex;

        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 600px) {

    .eventos-coberturas__container {
        padding:
            75px
            8vw
            65px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .eventos-coberturas__label {
        font-size: 8px;

        letter-spacing: 3px;
    }


    .eventos-coberturas__title {
        font-size:
            clamp(43px, 11vw, 57px);

        line-height: .92;

        letter-spacing: -2px;
    }


    .eventos-coberturas__intro {
        margin-top: 27px;

        padding-left: 17px;

        font-size: 11px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       COBERTURAS
    ----------------------------------------------------- */

    .eventos-cobertura,
    .eventos-cobertura:not(:first-child) {

        padding:
            30px
            22px
            80px;
    }


    .eventos-cobertura__top {
        margin-bottom: 38px;
    }


    .eventos-cobertura__title {
        font-size: 31px;

        line-height: .92;
    }


    .eventos-cobertura__description {
        font-size: 11px;
    }


    .eventos-cobertura__caption {
        left: 22px;
        bottom: 27px;
    }


    .eventos-cobertura:not(:first-child)
    .eventos-cobertura__caption {
        left: 22px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .eventos-coberturas__footer {
        gap: 20px;

        margin-top: 50px;
    }


    .eventos-coberturas__footer-line {
        width: 35px;
    }


    .eventos-coberturas__footer p {
        font-size: 18px;
    }


    .eventos-coberturas__button {
        width: 100%;

        box-sizing: border-box;
    }

}


/* =========================================================
   SECCIÓN 07 — MANIFIESTO
========================================================= */

.eventos-manifiesto {
    position: relative;

    width: 100%;

    height: 570px;

    min-height: 570px;

    overflow: hidden;

    background: #171513;

    color: #fff;
}


/* =========================================================
   IMAGEN
========================================================= */

.eventos-manifiesto__image {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;

    height: 100%;

    background-image:
        url("../img/camera-manifesto.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    transform: scale(1.02);
}


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

.eventos-manifiesto__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(13,12,11,.94) 0%,
            rgba(13,12,11,.86) 28%,
            rgba(13,12,11,.58) 48%,
            rgba(13,12,11,.25) 70%,
            rgba(13,12,11,.08) 100%
        );
}

/* =========================================================
   FLASH FOTOGRÁFICO — EVENTOS
========================================================= */

.eventos-manifiesto__camera-flash {
    position: absolute;

    inset: 0;

    z-index: 10;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.92) 18%,
            rgba(255,255,255,.55) 38%,
            rgba(255,255,255,.18) 62%,
            rgba(255,255,255,0) 82%
        );

    transform: scale(.65);
}


/* =========================================================
   ACTIVAR AL PASAR EL MOUSE
========================================================= */

.eventos-manifiesto:hover
.eventos-manifiesto__camera-flash {

    animation:
        eventosPhotographicFlash
        .75s
        cubic-bezier(.15,.85,.25,1)
        both;
}


/* =========================================================
   FLASH DE CÁMARA
========================================================= */

@keyframes eventosPhotographicFlash {

    /* reposo */
    0% {
        opacity: 0;

        transform: scale(.65);
    }

    /* comienza a cargar */
    18% {
        opacity: .08;

        transform: scale(.78);
    }

    /* DESTELLO */
    30% {
        opacity: 1;

        transform: scale(1);
    }

    /* caída */
    42% {
        opacity: .55;

        transform: scale(1.08);
    }

    /* rebote */
    53% {
        opacity: .16;

        transform: scale(1.15);
    }

    /* desaparece */
    100% {
        opacity: 0;

        transform: scale(1.25);
    }
}


/* =========================================================
   ILUMINACIÓN DEL CONTENIDO DURANTE EL FLASH
========================================================= */

.eventos-manifiesto:hover
.eventos-manifiesto__heading h2,

.eventos-manifiesto:hover
.eventos-manifiesto__intro,

.eventos-manifiesto:hover
.eventos-manifiesto__script,

.eventos-manifiesto:hover
.eventos-manifiesto__label {

    animation:
        eventosFlashLight
        .75s
        ease-out
        both;
}


/* =========================================================
   ILUMINACIÓN DEL TEXTO
========================================================= */

@keyframes eventosFlashLight {

    0% {
        filter: brightness(1);
    }

    30% {
        filter: brightness(1.35);
    }

    48% {
        filter: brightness(1.08);
    }

    100% {
        filter: brightness(1);
    }
}

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

.eventos-manifiesto__container {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1500px;

    height: 100%;

    margin: 0 auto;

    padding:
        38px
        5vw
        30px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


/* =========================================================
   PARTE SUPERIOR
========================================================= */

.eventos-manifiesto__top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.eventos-manifiesto__label {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 3.5px;

    color:
        rgba(255,255,255,.52);
}


.eventos-manifiesto__number {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.48);
}


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

.eventos-manifiesto__main {
    display: grid;

    grid-template-columns: 55% 45%;

    align-items: center;

    transform: translateY(12px);
}


/* =========================================================
   TITULAR
========================================================= */

.eventos-manifiesto__heading h2 {
    margin: 0;

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

    font-size:
        clamp(52px, 5.2vw, 78px);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -3.5px;

    color: #fff;
}


.eventos-manifiesto__heading h2 em {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 300;

    letter-spacing: -1px;
}


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

.eventos-manifiesto__message {
    max-width: 410px;

    padding-left: 30px;

    border-left:
        1px solid
        rgba(255,255,255,.25);
}


.eventos-manifiesto__intro {
    margin: 0 0 27px;

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

    font-size: 13px;

    font-weight: 400;

    line-height: 1.7;

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


.eventos-manifiesto__divider {
    width: 48px;

    height: 1px;

    margin-bottom: 20px;

    background:
        rgba(255,255,255,.52);
}


.eventos-manifiesto__script {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 23px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.05;

    color:
        rgba(255,255,255,.82);
}


/* =========================================================
   PARTE INFERIOR
========================================================= */

.eventos-manifiesto__bottom {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;
}


.eventos-manifiesto__bottom > span:first-child {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 3px;

    color:
        rgba(255,255,255,.42);
}


.eventos-manifiesto__statement {
    text-align: right;

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

    font-size: 7px;

    font-weight: 500;

    line-height: 1.6;

    letter-spacing: 2.5px;

    color:
        rgba(255,255,255,.42);
}


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

@media (max-width: 900px) {

    .eventos-manifiesto {
        height: 570px;

        min-height: 570px;
    }


    .eventos-manifiesto__main {
        grid-template-columns: 52% 48%;
    }


    .eventos-manifiesto__message {
        padding-left: 25px;
    }


    .eventos-manifiesto__heading h2 {
        font-size:
            clamp(48px, 6vw, 65px);
    }

}


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

@media (max-width: 600px) {

    .eventos-manifiesto {
        height: 680px;

        min-height: 680px;
    }


    .eventos-manifiesto__image {
        background-position:
            62% center;
    }


    .eventos-manifiesto__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(13,12,11,.28) 0%,
                rgba(13,12,11,.62) 42%,
                rgba(13,12,11,.95) 100%
            );
    }


    .eventos-manifiesto__container {
        padding:
            30px
            8vw
            27px;
    }


    .eventos-manifiesto__label {
        font-size: 7px;

        letter-spacing: 2.5px;
    }


    .eventos-manifiesto__number {
        font-size: 8px;
    }


    .eventos-manifiesto__main {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        transform: none;
    }


    .eventos-manifiesto__heading h2 {
        font-size:
            clamp(43px, 11vw, 57px);

        line-height: .91;

        letter-spacing: -2px;
    }


    .eventos-manifiesto__message {
        max-width: 390px;

        margin-top: 35px;

        padding-left: 17px;
    }


    .eventos-manifiesto__intro {
        font-size: 11px;

        line-height: 1.6;
    }


    .eventos-manifiesto__script {
        font-size: 20px;
    }


    .eventos-manifiesto__bottom {
        align-items: flex-end;
    }


    .eventos-manifiesto__bottom > span:first-child {
        font-size: 7px;

        letter-spacing: 2px;
    }


    .eventos-manifiesto__statement {
        font-size: 6px;

        letter-spacing: 1.8px;
    }

}

/* =========================================================
   SECCIÓN 08 — CONTACTO
========================================================= */

.eventos-contacto {
    position: relative;

    width: 100%;

    height: 600px;

    min-height: 600px;

    overflow: hidden;

    background: #171513;

    color: #fff;
}


/* =========================================================
   IMAGEN
========================================================= */

.eventos-contacto__image {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;

    height: 100%;

    background-image:
        url("../img/eventos-contacto.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


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

.eventos-contacto__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(14,13,12,.95) 0%,
            rgba(14,13,12,.88) 25%,
            rgba(14,13,12,.65) 44%,
            rgba(14,13,12,.34) 64%,
            rgba(14,13,12,.10) 84%,
            rgba(14,13,12,.02) 100%
        );
}


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

.eventos-contacto__container {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1500px;

    height: 100%;

    margin: 0 auto;

    padding:
        55px
        5vw;

    box-sizing: border-box;
}


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

.eventos-contacto__content {
    width: min(620px, 52vw);

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: 3vw;

    box-sizing: border-box;
}


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

.eventos-contacto__label {
    display: block;

    margin-bottom: 20px;

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

    font-size: 9px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 3.5px;

    color:
        rgba(255,255,255,.58);
}


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

.eventos-contacto__title {
    max-width: 650px;

    margin:
        0
        25px
        0
        0;

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

    font-size:
        clamp(44px, 4.5vw, 66px);

    font-weight: 400;

    line-height: .91;

    letter-spacing: -3px;

    color: #fff;
}


.eventos-contacto__title em {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 300;

    letter-spacing: -.7px;
}


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

.eventos-contacto__text {
    max-width: 470px;

    padding-top: 5%;

    margin:
        0
        0
        17px;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1.62;

    color:
        rgba(255,255,255,.68);
}


/* =========================================================
   FRASE
========================================================= */

.eventos-contacto__trust {
    max-width: 450px;

    margin:
        0
        0
        25px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 19px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.1;

    color:
        rgba(255,255,255,.86);
}


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

.eventos-contacto__button {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    width: fit-content;

    min-width: 245px;

    padding:
        14px
        18px;

    border:
        1px solid
        rgba(255,255,255,.48);

    text-decoration: none;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #fff;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.eventos-contacto__button i {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    font-style: normal;

    transition:
        transform .3s ease;
}


.eventos-contacto__button:hover {
    background: #fff;

    border-color: #fff;

    color: #24211f;
}


.eventos-contacto__button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   NOTA
========================================================= */

.eventos-contacto__note {
    display: block;

    margin-top: 12px;

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

    font-size: 8px;

    font-style: italic;

    line-height: 1.4;

    color:
        rgba(255,255,255,.40);
}


/* =========================================================
   FIRMA
========================================================= */

.eventos-contacto__signature {
    position: absolute;

    right: 4.5vw;

    bottom: 32px;

    z-index: 4;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 2px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 14px;

    font-style: italic;

    font-weight: 300;

    line-height: 1;

    color:
        rgba(255,255,255,.58);
}


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

@media (max-width: 900px) {

    .eventos-contacto {
        height: 600px;

        min-height: 600px;
    }


    .eventos-contacto__content {
        width: 65vw;

        padding-left: 2vw;
    }


    .eventos-contacto__title {
        font-size:
            clamp(43px, 5vw, 60px);
    }

}


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

@media (max-width: 600px) {

    .eventos-contacto {
        height: 680px;

        min-height: 680px;
    }


    .eventos-contacto__image {
        background-position:
            63% center;
    }


    .eventos-contacto__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(14,13,12,.28) 0%,
                rgba(14,13,12,.66) 43%,
                rgba(14,13,12,.96) 100%
            );
    }


    .eventos-contacto__container {
        padding:
            40px
            8vw
            30px;
    }


    .eventos-contacto__content {
        width: 100%;

        height: 100%;

        padding-left: 0;

        justify-content: center;
    }


    .eventos-contacto__label {
        margin-bottom: 18px;

        font-size: 8px;

        letter-spacing: 3px;
    }


    .eventos-contacto__title {
        margin-bottom: 23px;

        font-size:
            clamp(42px, 10.8vw, 57px);

        line-height: .92;

        letter-spacing: -2px;
    }


    .eventos-contacto__text {
        max-width: 390px;

        font-size: 11px;

        line-height: 1.6;
    }


    .eventos-contacto__trust {
        font-size: 18px;

        line-height: 1.08;
    }


    .eventos-contacto__button {
        width: 100%;

        box-sizing: border-box;
    }


    .eventos-contacto__note {
        font-size: 7px;
    }


    .eventos-contacto__signature {
        left: 8vw;

        right: auto;

        bottom: 28px;

        align-items: flex-start;

        font-size: 12px;
    }

}

/* =========================================================
   PÁGINA DE CONTACTO
========================================================= */

.contact-page {

    position: relative;

    display: grid;

    grid-template-columns: 50% 50%;

    width: 100%;

    min-height: 100vh;

    background: #f6f4f1;

    color: #24211f;

    overflow: hidden;
}


/* =========================================================
   LADO VISUAL
========================================================= */

.contact-page__visual {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background: #171513;

    color: #fff;
}


/* =========================================================
   IMAGEN
========================================================= */

.contact-page__image {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("../img/contacto.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


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

.contact-page__overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(13,12,11,.92) 0%,
            rgba(13,12,11,.72) 55%,
            rgba(13,12,11,.30) 100%
        );
}


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

.contact-page .header {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 10;
}


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

.contact-page__visual-content {

    position: relative;

    z-index: 4;

    display: flex;

    flex-direction: column;

    justify-content: center;

    width: 100%;

    min-height: 100vh;

    box-sizing: border-box;

    padding:
        130px
        7vw
        100px;
}


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

.contact-page__eyebrow {

    display: block;

    margin-bottom: 22px;

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

    font-size: 9px;

    letter-spacing: 4px;

    color:
        rgba(255,255,255,.58);
}


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

.contact-page__visual-title {

    max-width: 650px;

    margin: 0 0 27px;

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

    font-size:
        clamp(48px, 5vw, 76px);

    font-weight: 400;

    line-height: .90;

    letter-spacing: -3px;

    color: #fff;
}


.contact-page__visual-title em {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 300;

    letter-spacing: -1px;
}


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

.contact-page__visual-text {

    max-width: 390px;

    margin: 0 0 25px;

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

    font-size: 12px;

    line-height: 1.65;

    color:
        rgba(255,255,255,.68);
}


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

.contact-page__visual-line {

    width: 50px;

    height: 1px;

    margin-bottom: 18px;

    background:
        rgba(255,255,255,.52);
}


/* =========================================================
   FRASE
========================================================= */

.contact-page__visual-script {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 22px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.05;

    color:
        rgba(255,255,255,.82);
}


/* =========================================================
   PIE VISUAL
========================================================= */

.contact-page__visual-bottom {

    position: absolute;

    left: 7vw;

    right: 4vw;

    bottom: 30px;

    z-index: 5;

    display: flex;

    justify-content: space-between;

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

    font-size: 7px;

    letter-spacing: 2.5px;

    color:
        rgba(255,255,255,.40);
}


/* =========================================================
   ÁREA DEL FORMULARIO
========================================================= */

.contact-page__form-area {

    min-height: 100vh;

    background: #f6f4f1;

    overflow-y: auto;
}


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

.contact-page__form-container {

    width: 100%;

    max-width: 620px;

    margin: 0 auto;

    padding:
        135px
        6vw
        80px;

    box-sizing: border-box;
}


/* =========================================================
   HEADER DEL FORMULARIO
========================================================= */

.contact-page__label {

    display: block;

    margin-bottom: 23px;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 3.5px;

    color: #8a837d;
}


.contact-page__title {

    margin: 0 0 17px;

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

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

    font-weight: 400;

    line-height: .9;

    letter-spacing: -3px;

    color: #24211f;
}


.contact-page__intro {

    max-width: 390px;

    margin: 0 0 55px;

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

    font-size: 12px;

    line-height: 1.65;

    color: #77716c;
}


/* =========================================================
   FORMULARIO
========================================================= */

.contact-form {

    display: flex;

    flex-direction: column;

    gap: 28px;
}


/* =========================================================
   CAMPO
========================================================= */

.contact-form__field {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 9px;
}


.contact-form__field label {

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2.5px;

    color: #8d8680;
}


.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {

    width: 100%;

    padding:
        8px
        0
        12px;

    border: none;

    border-bottom:
        1px solid #cbc5be;

    border-radius: 0;

    outline: none;

    background: transparent;

    box-sizing: border-box;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 20px;

    font-weight: 300;

    color: #35312e;

    transition:
        border-color .3s ease;
}


.contact-form__field textarea {

    resize: vertical;

    min-height: 75px;

    line-height: 1.25;
}


.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {

    color: #aaa39d;

    font-style: italic;
}


.contact-form__field select {

    cursor: pointer;

    color: #aaa39d;
}


.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {

    border-bottom-color: #5e5853;
}


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

.contact-form__button {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin-top: 10px;

    padding:
        17px
        18px;

    border:
        1px solid #918a84;

    background: transparent;

    cursor: pointer;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2.5px;

    color: #4d4844;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.contact-form__button i {

    font-size: 18px;

    font-style: normal;

    transition:
        transform .3s ease;
}


.contact-form__button:hover {

    background: #24211f;

    border-color: #24211f;

    color: #f6f4f1;
}


.contact-form__button:hover i {

    transform: translateX(6px);
}


/* =========================================================
   NOTA
========================================================= */

.contact-form__note {

    margin: -12px 0 0;

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

    font-size: 8px;

    font-style: italic;

    line-height: 1.5;

    color: #aaa39d;
}


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

@media (max-width: 900px) {

    .contact-page {

        grid-template-columns: 45% 55%;
    }


    .contact-page__visual-content {

        padding:
            130px
            5vw
            90px;
    }


    .contact-page__visual-title {

        font-size:
            clamp(43px, 5vw, 62px);
    }


    .contact-page__form-container {

        padding:
            125px
            5vw
            70px;
    }

}


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

@media (max-width: 700px) {

    .contact-page {

        display: flex;

        flex-direction: column;
    }


    .contact-page__visual {

        min-height: 600px;

        height: 600px;
    }


    .contact-page__visual-content {

        min-height: 600px;

        padding:
            130px
            8vw
            80px;
    }


    .contact-page__visual-title {

        font-size:
            clamp(44px, 11vw, 58px);

        line-height: .92;

        letter-spacing: -2px;
    }


    .contact-page__visual-text {

        max-width: 350px;

        font-size: 11px;
    }


    .contact-page__visual-bottom {

        left: 8vw;

        right: 8vw;

        bottom: 25px;
    }


    .contact-page__form-area {

        min-height: auto;
    }


    .contact-page__form-container {

        padding:
            75px
            8vw
            70px;
    }


    .contact-page__title {

        font-size:
            clamp(46px, 11vw, 58px);

        letter-spacing: -2px;
    }


    .contact-page__intro {

        margin-bottom: 45px;
    }

}

/* =========================================================
   PÁGINA DE CONTACTO
========================================================= */

.contact-page {

    position: relative;

    display: grid;

    grid-template-columns: 50% 50%;

    width: 100%;

    min-height: 100vh;

    background: #f6f4f1;

    color: #24211f;

    overflow: hidden;
}


/* =========================================================
   LADO VISUAL
========================================================= */

.contact-page__visual {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background: #171513;

    color: #fff;
}


/* =========================================================
   IMAGEN
========================================================= */

.contact-page__image {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("../img/contacto.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


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

.contact-page__overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(13,12,11,.94) 0%,
            rgba(13,12,11,.78) 48%,
            rgba(13,12,11,.35) 100%
        );
}


/* =========================================================
   HEADER — MISMO SISTEMA DEL INDEX
========================================================= */

.contact-page .header {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 20;
}


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

.contact-page__visual-content {

    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: center;

    width: 100%;

    min-height: 100vh;

    box-sizing: border-box;

    padding:
        130px
        7vw
        100px;
}


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

.contact-page__eyebrow {

    display: block;

    margin-bottom: 22px;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 4px;

    color:
        rgba(255,255,255,.58);
}


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

.contact-page__visual-title {

    max-width: 650px;

    margin:
        0
        0
        27px;

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

    font-size:
        clamp(47px, 4.8vw, 72px);

    font-weight: 400;

    line-height: .90;

    letter-spacing: -3px;

    color: #fff;
}


.contact-page__visual-title em {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 300;

    letter-spacing: -1px;
}


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

.contact-page__visual-text {

    max-width: 400px;

    margin:
        0
        0
        26px;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1.65;

    color:
        rgba(255,255,255,.68);
}


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

.contact-page__visual-line {

    width: 52px;

    height: 1px;

    margin-bottom: 18px;

    background:
        rgba(255,255,255,.52);
}


/* =========================================================
   FRASE
========================================================= */

.contact-page__visual-script {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 23px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.05;

    color:
        rgba(255,255,255,.84);
}


/* =========================================================
   PIE VISUAL
========================================================= */

.contact-page__visual-bottom {

    position: absolute;

    left: 7vw;

    right: 4vw;

    bottom: 30px;

    z-index: 6;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    font-size: 7px;

    font-weight: 500;

    letter-spacing: 2.5px;

    color:
        rgba(255,255,255,.40);
}


/* =========================================================
   LADO DERECHO
========================================================= */

.contact-page__options {

    min-height: 100vh;

    background: #f6f4f1;

    overflow-y: auto;
}


.contact-page__options-container {

    width: 100%;

    max-width: 650px;

    margin: 0 auto;

    padding:
        20px
        6vw
        70px;

    box-sizing: border-box;
}


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

.contact-page__label {

    display: block;

    margin-bottom: 23px;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 3.5px;

    color: #8a837d;
}


.contact-page__title {

    margin:
        0
        18px;

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

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

    font-weight: 400;

    line-height: .9;

    letter-spacing: -3px;

    color: #24211f;
}


.contact-page__intro {

    max-width: 430px;

    margin:
        0
        0
        55px;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1.65;

    color: #77716c;
}


/* =========================================================
   OPCIONES
========================================================= */

.contact-options {

    width: 100%;

    border-top:
        1px solid #d2ccc5;
}


/* =========================================================
   OPCIÓN
========================================================= */

.contact-option {

    position: relative;

    display: grid;

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

    align-items: center;

    width: 100%;

    min-height: 92px;

    padding:
        20px
        0;

    border: none;

    border-bottom:
        1px solid #d2ccc5;

    background: transparent;

    text-decoration: none;

    text-align: left;

    cursor: pointer;

    color: #24211f;
}


.contact-option__number {

    align-self: start;

    padding-top: 5px;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #aaa39d;

    transition:
        color .3s ease;
}


.contact-option__content {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.contact-option__content strong {

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

    font-size: 25px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.7px;

    color: #35312e;

    transition:
        transform .35s ease,
        color .35s ease;
}


.contact-option__content small {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 17px;

    font-style: italic;

    font-weight: 300;

    line-height: 1;

    color: #8b847e;
}


.contact-option__arrow {

    justify-self: end;

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

    font-size: 20px;

    font-weight: 300;

    color: #8f8882;

    transition:
        transform .35s ease,
        color .35s ease;
}


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

.contact-option:hover
.contact-option__number {

    color: #5e5853;
}


.contact-option:hover
.contact-option__content strong {

    transform: translateX(7px);

    color: #24211f;
}


.contact-option:hover
.contact-option__arrow {

    transform: translateX(7px);

    color: #24211f;
}


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

.contact-page__options-footer {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-top: 55px;
}


.contact-page__options-footer > span {

    display: block;

    width: 40px;

    height: 1px;

    margin-top: 9px;

    flex-shrink: 0;

    background: #bdb6af;
}


.contact-page__options-footer p {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 20px;

    font-style: italic;

    font-weight: 300;

    line-height: 1.05;

    color: #706963;
}


/* =========================================================
   MODAL
========================================================= */

.contact-modal {

    position: fixed;

    inset: 0;

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


.contact-modal.is-open {

    visibility: visible;

    opacity: 1;
}


/* =========================================================
   BACKDROP
========================================================= */

.contact-modal__backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(20,18,16,.72);

    backdrop-filter:
        blur(7px);

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


/* =========================================================
   PANEL
========================================================= */

.contact-modal__panel {

    position: relative;

    z-index: 2;

    width: min(720px, 100%);

    max-height: calc(100vh - 60px);

    overflow-y: auto;

    padding:
        48px
        52px
        42px;

    box-sizing: border-box;

    background: #f6f4f1;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.28);

    transform:
        translateY(25px)
        scale(.98);

    transition:
        transform .4s
        cubic-bezier(.22,.61,.36,1);
}


.contact-modal.is-open
.contact-modal__panel {

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


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

.contact-modal__header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 22px;
}


.contact-modal__label {

    display: block;

    margin-bottom: 16px;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 3px;

    color: #8d8680;
}


.contact-modal__title {

    margin: 0;

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

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

    font-weight: 400;

    line-height: .9;

    letter-spacing: -2.5px;

    color: #24211f;
}


/* =========================================================
   CERRAR
========================================================= */

.contact-modal__close {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    padding: 0;

    border:
        1px solid #c8c1ba;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

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

    font-size: 24px;

    font-weight: 300;

    line-height: 1;

    color: #5e5853;

    transition:
        background .3s ease,
        color .3s ease;
}


.contact-modal__close:hover {

    background: #24211f;

    color: #fff;
}


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

.contact-modal__intro {

    max-width: 520px;

    margin:
        0
        0
        35px;

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

    font-size: 11px;

    line-height: 1.65;

    color: #77716c;
}


/* =========================================================
   FORMULARIO
========================================================= */

.contact-form {

    display: flex;

    flex-direction: column;

    gap: 25px;
}


.contact-form__row {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 25px;
}


.contact-form__field {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.contact-form__field label {

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

    font-size: 7px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #8d8680;
}


.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {

    width: 100%;

    padding:
        7px
        0
        11px;

    border: none;

    border-bottom:
        1px solid #cbc5be;

    border-radius: 0;

    outline: none;

    background: transparent;

    box-sizing: border-box;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 19px;

    font-weight: 300;

    color: #35312e;

    transition:
        border-color .3s ease;
}


.contact-form__field textarea {

    min-height: 75px;

    resize: vertical;

    line-height: 1.25;
}


.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {

    color: #aaa39d;

    font-style: italic;
}


.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {

    border-bottom-color: #5e5853;
}


.contact-form__field select {

    cursor: pointer;

    color: #8b847e;
}


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

.contact-form__button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin-top: 5px;

    padding:
        16px
        18px;

    border:
        1px solid #918a84;

    background: transparent;

    cursor: pointer;

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

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2.5px;

    color: #4d4844;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.contact-form__button i {

    font-size: 18px;

    font-style: normal;

    transition:
        transform .3s ease;
}


.contact-form__button:hover {

    background: #24211f;

    border-color: #24211f;

    color: #f6f4f1;
}


.contact-form__button:hover i {

    transform: translateX(6px);
}


/* =========================================================
   NOTA
========================================================= */

.contact-form__note {

    margin:
        -8px
        0
        0;

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

    font-size: 7px;

    font-style: italic;

    line-height: 1.5;

    color: #aaa39d;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .contact-page {

        grid-template-columns:
            45%
            55%;
    }


    .contact-page__visual-content {

        padding-left: 5vw;
    }


    .contact-page__visual-title {

        font-size:
            clamp(43px, 5vw, 60px);
    }


    .contact-page__options-container {

        padding-left: 5vw;

        padding-right: 5vw;
    }

}


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

@media (max-width: 700px) {

    .contact-page {

        display: flex;

        flex-direction: column;

        overflow: visible;
    }


    .contact-page__visual {

        min-height: 620px;

        height: 620px;
    }


    .contact-page__visual-content {

        min-height: 620px;

        padding:
            130px
            8vw
            80px;
    }


    .contact-page__visual-title {

        font-size:
            clamp(43px, 11vw, 57px);

        line-height: .92;

        letter-spacing: -2px;
    }


    .contact-page__visual-text {

        max-width: 360px;

        font-size: 11px;
    }


    .contact-page__visual-bottom {

        left: 8vw;

        right: 8vw;

        bottom: 27px;
    }


    .contact-page__options {

        min-height: auto;

        overflow: visible;
    }


    .contact-page__options-container {

        padding:
            75px
            8vw
            70px;
    }


    .contact-page__title {

        font-size:
            clamp(46px, 11vw, 58px);

        letter-spacing: -2px;
    }


    .contact-page__intro {

        margin-bottom: 40px;
    }


    .contact-option {

        min-height: 88px;

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


    .contact-option__content strong {

        font-size: 22px;
    }


    .contact-option__content small {

        font-size: 16px;
    }


    .contact-modal {

        padding: 12px;
    }


    .contact-modal__panel {

        max-height:
            calc(100vh - 24px);

        padding:
            35px
            25px
            30px;
    }


    .contact-modal__title {

        font-size:
            clamp(40px, 10vw, 52px);
    }


    .contact-form__row {

        grid-template-columns: 1fr;

        gap: 25px;
    }

}