/*
Theme Name: Hub Child
Theme URI: http://hub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: hub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: hub-child
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/



/* ==================================================
   DUA · BASE GLOBAL
================================================== */

:root {
    /* Colores */
    --dua-black: #0c0c0c;
    --dua-cream: #F5F1E8;
    --dua-sand: #CEBAAF;
    --dua-grey: #B2B2B2;
    --dua-crimson: #AA0A24;
    --dua-burgundy: #792A26;
    --dua-copper: #D0602E;
    /* Tipografías */
    --dua-font-display: 'Montserrat', sans-serif;
    --dua-font-text: 'Public Sans', sans-serif;
    --dua-charcoal: #242424;
    --dua-font-serif: 'Playfair Display', Georgia, serif;

    /* Layout */
    --dua-container: 1200px;
    --dua-padding: 72px;

    /* Transiciones */
    --dua-transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1);

    /*Nas*/
    --dorado: #bfa054;
    --mont: "Montserrat", sans-serif;
    --public: "Public Sans", sans-serif;
    --rojo: #cf152d;
}

/* Elementos DUA */
[class*="dua-"] {
    box-sizing: border-box;
}

/* Secciones que deben escapar del container de WordPress */
.dua-fullwidth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Los tres cuadrados rojos reutilizables */
.dua-accent {
    display: block;
    width: 50px;
    height: 14px;

    background:
        linear-gradient(to right,
            var(--dua-crimson) 0 14px,
            transparent 14px 18px,
            var(--dua-crimson) 18px 32px,
            transparent 32px 36px,
            var(--dua-crimson) 36px 50px);

    flex-shrink: 0;
}

/* Container general */
.dua-container {
    width: 100%;
    max-width: var(--dua-container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Botones */
.dua-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: var(--dua-font-text);
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;

    transition: var(--dua-transition);
    cursor: pointer;
}

.dua-btn--crimson {
    background: var(--dua-crimson);
    color: #fff;
}

.dua-btn--crimson:hover {
    background: #d11432;
    color: #fff;
}

/* Títulos de sección reutilizables */
.dua-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    width: fit-content;
    margin-bottom: 16px;

    font-family: var(--dua-font-text);
    font-size: clamp(19px, 1.8vw, 25px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.22em;

    color: var(--dua-crimson);
    text-transform: uppercase;
}

.dua-eyebrow svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.dua-section-title {
    margin: 0;

    font-family: var(--dua-font-display);
    font-size: clamp(32px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.15;

    color: var(--dua-cream);
}

.dua-section-copy {
    margin: 0;

    font-family: var(--dua-font-text);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;

    color: var(--dua-sand);
}


/*HEADER*/
#fila-header .logo-default {
    width: 70px;
}

#fila-header .menu-item>a {
    font-family: var(--public);
    color: var(--dorado);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.itemReserva>a {
    color: var(--rojo) !important;
}

/*FIN HEADER*/

/* ==================================================
   DUA · HERO
================================================== */

.dua-hero {
    position: relative;
    height: 90vh;
    min-height: 680px;
    overflow: hidden;

    background:
        url('/wp-content/uploads/2026/09/hero_v2.webp') center top / cover no-repeat;

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


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

.dua-hero__content {
    position: absolute;
    z-index: 2;

    left: var(--dua-padding);
    bottom: 64px;

    max-width: 1400px;

    animation: duaHeroIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* ACENTO ROJO
-------------------------------------------------- */

.dua-hero .dua-accent {
    margin-bottom: 45px;
}


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

.dua-hero__title {
    margin: 0 0 16px;

    font-family: var(--dua-font-display);
    font-size: clamp(45px, 5.5vw, 72px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.01em;

    color: var(--dua-grey);

    text-transform: uppercase;

    text-shadow:
        0 4px 24px rgba(0, 0, 0, 0.6);
}


/* BAJADAS
-------------------------------------------------- */

.dua-hero__tags {
    font-family: var(--dua-font-text);
    font-size: clamp(17px, 1.6vw, 24px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;

    color: #a4abb5;

    text-transform: uppercase;

    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.8);
}

.dua-hero__tags p {
    margin: 0;
    padding: 0;

    font: inherit;
    line-height: inherit;
    color: inherit;
}


/* ENTRADA
-------------------------------------------------- */

@keyframes duaHeroIn {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

}

/* ==================================================
   DUA · RESPONSIVE
================================================== */

@media only screen and (max-width: 900px) {

    :root {
        --dua-padding: 24px;
    }

    header .logo-default {
        width: 100px;
    }

    .dua-hero {
        height: 55vh;
        min-height: 565px;
    }

}

@media only screen and (max-width: 700px) {

    .dua-hero {
        /* min-height: 650px;*/
        min-height: 560px;
        height: 75svh;
        background-position: center top;
    }

    .dua-hero__content {
        left: var(--dua-padding);
        right: var(--dua-padding);
        /*bottom: 40px;*/
        bottom: 83px;
    }

    .dua-hero .dua-accent {
        margin-bottom: 32px;
    }

    .dua-hero__title {
        font-size: 38px;
        margin-bottom: 13px;
    }

    .dua-hero__tags {
        font-size: 18px;
    }

}

/* ==================================================
   DUA · INTRO
================================================== */

.dua-intro {
    background: var(--dua-black);
    padding-block: 120px;
}

.dua-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 64px;
    align-items: center;
}

.dua-intro__content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.dua-intro__title {
    margin: 0;

    font-family: var(--dua-font-display);
    font-size: clamp(29px, 3.2vw, 45px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;

    color: #c8cbd2;
    text-transform: uppercase;
}

.dua-intro__text {
    max-width: 780px;
    margin: 0;

    font-family: var(--dua-font-text);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 400;
    line-height: 1.6;

    color: #727782;
}

.dua-intro__text strong {
    color: #d1d5db;
    font-weight: 700;
}

.dua-intro__action {
    display: flex;
    justify-content: flex-end;
}

.dua-intro__btn {
    width: 100%;
    max-width: 260px;

    padding: 18px 45px;

    font-size: 14px;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

@media only screen and (max-width: 900px) {

    .dua-intro {
        padding-block: 80px;
    }

    .dua-intro__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dua-intro__action {
        justify-content: flex-start;
    }
}


@media only screen and (max-width: 700px) {

    .dua-intro {
        padding-block: 64px;
    }

    .dua-intro__grid {
        gap: 32px;
    }

    .dua-intro__title br {
        display: none;
    }

    .dua-intro__btn {
        max-width: 100%;
    }

}

/* ==================================================
   DUA · DOS RITMOS
================================================== */

.dua-rhythms {
    background: var(--dua-black);
    overflow: hidden;
}


/* IMÁGENES
-------------------------------------------------- */

.dua-rhythms__visuals {
    position: relative;

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

    width: 100%;
    height: clamp(520px, 30vw, 590px);

    overflow: hidden;
}

.dua-rhythms__image {
    background-image: var(--dua-bg);
    background-size: cover;
    background-position: var(--dua-pos, center);
    background-repeat: no-repeat;

    transition:
        transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}


/* INTERCAMBIO DE IMÁGENES
-------------------------------------------------- */

.dua-rhythms__visuals.is-swapped .dua-rhythms__image:first-child {
    transform: translateX(100%) scale(1.02);
}

.dua-rhythms__visuals.is-swapped .dua-rhythms__image:nth-child(2) {
    transform: translateX(-100%) scale(1.02);
}


/* CAJA CENTRAL
-------------------------------------------------- */

.dua-rhythms__headline {
    position: absolute;
    z-index: 2;

    left: 50%;
    bottom: 0;
    transform: translateX(-50%);

    width: 440px;
    max-width: calc(100% - 48px);

    padding: 29px 40px 23px;

    background: #120f0d;

    text-align: center;
}

.dua-rhythms__eyebrow {
    display: block;

    margin-bottom: 5px;

    font-family: var(--dua-font-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;

    color: var(--dua-crimson);

    text-transform: uppercase;
}

.dua-rhythms__headline h2 {
    margin: 0;

    font-family: var(--dua-font-display);
    font-size: 37px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.02em;

    color: var(--dua-grey);

    text-transform: uppercase;
}


/* FRANJA INFERIOR
-------------------------------------------------- */

.dua-rhythms__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    width: 100%;

    padding: 0 0 40px;

    background: var(--dua-black);
}

.dua-rhythms__message {
    flex-shrink: 0;

    width: 440px;
    max-width: calc(100% - 160px);

    padding: 14px 45px;

    background: var(--dua-crimson);

    font-family: var(--dua-font-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;

    color: #fff;

    text-align: center;
}

.dua-rhythms__message strong {
    font-weight: 700;
}

@media only screen and (max-width: 900px) {

    .dua-rhythms__visuals {
        grid-template-columns: 1fr;
        height: 700px;
    }

    .dua-rhythms__image {
        min-height: 350px;
    }

    .dua-rhythms__visuals.is-swapped .dua-rhythms__image:first-child {
        transform: translateY(100%) scale(1.02);
    }

    .dua-rhythms__visuals.is-swapped .dua-rhythms__image:nth-child(2) {
        transform: translateY(-100%) scale(1.02);
    }

    .dua-rhythms__headline {
        width: 100%;
        max-width: 100%;

        padding: 24px 16px;
    }

}


@media only screen and (max-width: 700px) {

    .dua-rhythms__headline h2 {
        font-size: 30px;
    }

    .dua-rhythms__eyebrow {
        font-size: 15px;
    }

    .dua-rhythms__footer {
        gap: 13px;
        padding: 16px 16px 24px;
    }

    .dua-rhythms__footer .dua-accent {
        display: none;
    }

    .dua-rhythms__message {
        width: 100%;
        max-width: 100%;

        padding: 13px 16px;

        font-size: 15px;
    }

}

/* ==================================================
   DUA · AGENDA
================================================== */

.dua-agenda {
    position: relative;
    overflow: hidden;

    padding-block: 110px 128px;

    background: var(--dua-black);

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


/* Glow ambiente sin agregar HTML */
.dua-agenda::after {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(206, 186, 175, .12),
            transparent 70%);

    filter: blur(80px);
    pointer-events: none;
}


/* ENCABEZADO
-------------------------------------------------- */

.dua-agenda__intro {
    position: relative;
    z-index: 1;

    margin-bottom: 48px;
}

.dua-agenda__copy {
    max-width: 540px;
    margin-top: 18px;
}


/* GRILLA
-------------------------------------------------- */

.dua-agenda__grid {
    position: relative;
    z-index: 1;

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

    gap: 32px;
}


/* CARD
-------------------------------------------------- */

.dua-event {
    display: flex;
    align-items: flex-start;

    gap: 40px;

    min-width: 0;
    min-height: 220px;

    padding: 19px 29px;

    background: #141414;

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

    transition: var(--dua-transition);
}

.dua-event:hover {
    background-color: #1c1c1c;
    border-color: rgba(255, 255, 255, .18);

    box-shadow:
        0 12px 40px rgba(0, 0, 0, .18);
}


/* Cards con fotografía completa */
.dua-event--photo {
    background:
        var(--event-bg) center / cover no-repeat;
}

.dua-event--photo:hover {
    background:
        var(--event-bg) center / cover no-repeat;
}


/* FECHA
-------------------------------------------------- */

.dua-event__date {
    position: relative;

    display: flex;
    flex-direction: column;

    flex-shrink: 0;

    padding-left: 14px;

    font-family: var(--dua-font-text);
    line-height: 1;
}

.dua-event__date::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 1px;
    height: 70px;

    background: var(--dua-copper);
}

.dua-event__date span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: .1em;

    color: var(--dua-copper);
}

.dua-event__date strong {
    margin-block: 3px;

    font-size: 35px;
    font-weight: 700;
    line-height: 1;

    color: #fff;
}


/* VISUAL
-------------------------------------------------- */

.dua-event__visual {
    position: relative;

    width: 250px;
    height: 180px;

    flex: 0 0 250px;

    display: flex;
    align-items: center;

    transform: translateY(14px) rotate(-6deg);

    transition:
        transform .6s cubic-bezier(.16, 1, .3, 1);
}


/* En las cards fotográficas solo conserva el espacio */
.dua-event--photo .dua-event__visual {
    visibility: hidden;
}


/* TAPA + VINILO
-------------------------------------------------- */

.dua-event__record {
    position: relative;
    z-index: 2;

    width: 175px;
    height: 175px;

    flex-shrink: 0;

    overflow: hidden;

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

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .6);
}

.dua-event__record img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Disco que asoma detrás de la tapa */
.dua-event__vinyl {
    position: absolute;
    z-index: 1;

    top: 10px;
    left: 65px;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            #111 0%,
            #111 15%,
            #222 15%,
            #111 18%,
            #222 28%,
            #111 30%,
            #222 40%,
            #111 43%,
            #222 55%,
            #111 58%,
            #222 70%,
            #111 73%,
            #222 85%,
            #111 88%,
            #222 98%,
            #111 100%);

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

    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, .8),
        5px 10px 25px rgba(0, 0, 0, .5);

    transition:
        transform .7s cubic-bezier(.16, 1, .3, 1);
}


/* Etiqueta central */
.dua-event__vinyl span {
    position: relative;

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: var(--dua-crimson);

    border:
        2px dashed rgba(255, 255, 255, .2);
}


/* Agujero del disco */
.dua-event__vinyl span::after {
    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--dua-black);
}


/* Movimiento del conjunto */
.dua-event:hover .dua-event__visual {
    transform:
        translateY(14px) rotate(-10deg) scale(1.04) translateX(-8px);
}


/* El disco sale desde detrás de la tapa */
.dua-event:hover .dua-event__vinyl {
    transform:
        translateX(35px) rotate(80deg);
}

.dua-event__visual:has(.dua-event__record)::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 50%;
    left: 50%;

    width: 240px;
    height: 240px;

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

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(170, 10, 36, .45) 0%,
            transparent 70%);

    pointer-events: none;
}

/* INFORMACIÓN
-------------------------------------------------- */

.dua-event__info {
    display: flex;
    flex-direction: column;

    min-width: 0;
    flex: 1;

    align-self: stretch;
}

.dua-event__category {
    margin-bottom: 6px;

    font-family: var(--dua-font-text);
    font-size: 12px;
    font-weight: 600;

    line-height: 1.2;
    letter-spacing: .15em;

    color: var(--dua-copper);

    text-transform: uppercase;
}

.dua-event__info h3 {
    margin: 0 0 10px;

    font-family: var(--dua-font-display);
    font-size: 29px;
    font-weight: 500;
    line-height: 1.05;

    color: #fafafa;
}

.dua-event__divider {
    display: block;

    width: 50px;
    height: 1px;

    margin-bottom: 19px;

    background: var(--dua-copper);

    opacity: .55;
}


/* HORARIO
-------------------------------------------------- */

.dua-event__time {
    display: flex;
    align-items: center;

    gap: 11px;

    font-family: var(--dua-font-text);
}

.dua-event__time>span:last-child {
    display: flex;
    flex-direction: column;
}

.dua-event__time small {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;

    color: var(--dua-copper);
}

.dua-event__time strong {
    font-size: 14px;
    font-weight: 600;

    color: #fff;
}


/* Reloj creado en CSS para no repetir SVG */
.dua-clock {
    position: relative;

    width: 14px;
    height: 14px;

    flex-shrink: 0;

    border: 1.5px solid var(--dua-crimson);
    border-radius: 50%;
}

.dua-clock::before {
    content: "";

    position: absolute;

    left: 5px;
    top: 2px;

    width: 1px;
    height: 4px;

    background: var(--dua-crimson);
}

.dua-clock::after {
    content: "";

    position: absolute;

    left: 5px;
    top: 6px;

    width: 4px;
    height: 1px;

    background: var(--dua-crimson);

    transform: rotate(25deg);
    transform-origin: left center;
}


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

.dua-event__btn {
    align-self: flex-start;

    margin-top: auto;
    padding: 13px 28px;

    font-size: 12px;
    letter-spacing: .14em;
}

/* ==================================================
   DUA · AGENDA RESPONSIVE
================================================== */

@media only screen and (max-width: 1100px) {

    .dua-agenda__grid {
        grid-template-columns: 1fr;
    }

}


@media only screen and (max-width: 700px) {

    .dua-agenda {
        padding-block: 72px;
    }

    .dua-agenda__intro {
        margin-bottom: 32px;
    }

    .dua-agenda__grid {
        gap: 32px;
    }

    .dua-event {
        flex-direction: column;

        gap: 16px;

        padding: 22px 19px;

        overflow: hidden;
    }

    .dua-event__visual {
        margin-inline: auto;

        transform:
            scale(.88) rotate(-4deg);
    }

    .dua-event:hover .dua-event__visual {
        transform:
            scale(.88) rotate(-8deg);
    }

    .dua-event--photo {
        min-height: 450px;
        background-position: center;
        background-position-x: -225px;
    }

    .dua-event--photo .dua-event__visual {
        height: 165px;
    }

    .dua-event__info {
        width: 100%;

        text-align: center;
        align-items: center;
    }

    .dua-event__info h3 {
        font-size: 24px;
    }

    .dua-event__time {
        justify-content: center;
    }

    .dua-event__btn {
        align-self: center;

        width: 100%;
        max-width: 280px;

        margin-top: 12px;
    }

}

/* ==================================================
   DUA · QUÉ ES DUA
================================================== */

.dua-about {
    position: relative;

    padding-block: 112px 96px;

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

    background-image:
        linear-gradient(rgba(14, 28, 16, 0.65),
            rgba(8, 18, 10, 0.72)),
        url('/wp-content/uploads/2026/09/contrabajo_jardin.webp');

    background-size: 125%;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


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

.dua-about__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;

    gap: 96px;

    align-items: center;
}


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

.dua-about__heading {
    display: flex;
    align-items: center;
}

.dua-about__title {
    margin: 0;

    font-family: var(--dua-font-text);
    font-size: clamp(29px, 4.2vw, 51px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;

    color: var(--dua-grey);

    text-transform: uppercase;
}

.dua-about__title span {
    font-weight: 300;
}


/* TEXTO
-------------------------------------------------- */

.dua-about__content {
    min-width: 0;
}

.dua-about__lead {
    margin: 0 0 40px;

    font-family: var(--dua-font-text);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.7;

    color: var(--dua-grey);

    opacity: .95;
}


/* ACORDEÓN
-------------------------------------------------- */

.dua-about__accordion {
    width: 100%;

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

.dua-about__item {
    width: 100%;

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


/* Botón */
.dua-about__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 24px 0;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: var(--dua-font-display);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .08em;

    color: var(--dua-grey);

    text-align: left;
    text-transform: uppercase;

    cursor: pointer;

    transition: color var(--dua-transition);
}

.dua-about__trigger:hover {
    color: #fff;
}


/* + */
.dua-about__plus {
    flex-shrink: 0;

    margin-left: 20px;

    font-size: 19px;
    font-weight: 300;
    line-height: 1;

    transition:
        transform .4s cubic-bezier(.16, 1, .3, 1);
}

.dua-about__item.is-open .dua-about__plus {
    transform: rotate(45deg);
}


/* Contenido desplegable */
.dua-about__panel {
    display: grid;
    grid-template-rows: 0fr;

    transition:
        grid-template-rows .4s cubic-bezier(.16, 1, .3, 1);
}

.dua-about__panel>div {
    overflow: hidden;
}

.dua-about__item.is-open .dua-about__panel {
    grid-template-rows: 1fr;
}

.dua-about__panel p {
    margin: 0 0 24px;
    padding: 19px 24px;

    font-family: var(--dua-font-text);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;

    color: var(--dua-cream);

    background: rgba(12, 28, 12, .65);

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

    border-radius: 8px;

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

/* ==================================================
   DUA · QUÉ ES DUA RESPONSIVE
================================================== */

@media only screen and (max-width: 900px) {

    .dua-about {
        padding-block: 80px;

        background-size: cover;
    }

    .dua-about__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .dua-about__heading {
        justify-content: center;

        text-align: center;
    }

    .dua-about__lead {
        text-align: center;
    }

}


@media only screen and (max-width: 700px) {

    .dua-about {
        padding-block: 64px;

        background-position: center;
    }

    .dua-about__grid {
        gap: 32px;
    }

    .dua-about__title {
        font-size: 36px;
    }

    .dua-about__lead {
        margin-bottom: 32px;

        font-size: 17px;
    }

    .dua-about__trigger {
        padding-block: 20px;

        font-size: 14px;
    }

    .dua-about__panel p {
        padding: 16px;

        font-size: 15px;
    }

}

/* ==================================================
   DUA · EXPERIENCIA
================================================== */

.dua-exp {
    position: relative;
    overflow: hidden;

    padding: 0 0 76.8px;

    background: var(--dua-cream);
}


/* ENCABEZADO
-------------------------------------------------- */

.dua-exp__header {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 96px 24px 48px;

    text-align: center;
}


/* "EXPERIENCIA DUA" */
.dua-exp__eyebrow {
    margin-bottom: 9.6px;

    font-family: var(--dua-font-text);
    font-size: 12.8px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: .2em;

    color: var(--dua-crimson);

    text-transform: uppercase;
}


/* Título principal */
.dua-exp__title {
    margin: 0;

    font-family: var(--dua-font-display);
    font-size: 41.6px;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -.01em;

    color: var(--dua-charcoal, #242424);
}


/* "una sola" */
.dua-exp__script {
    display: inline;

    margin-inline: 4.8px;

    font-family: var(--dua-font-display);
    font-size: 44.8px;
    font-weight: 500;
    font-style: italic;

    color: var(--dua-crimson);

    vertical-align: middle;
}


/* PANELES
-------------------------------------------------- */

.dua-exp__panels {
    display: flex;
    flex-direction: column;

    width: 100%;
}

.dua-exp__panel {
    position: relative;

    display: grid;
    grid-template-columns: 55% 45%;

    min-height: 320px;

    overflow: hidden;
}


/* Panel invertido */
.dua-exp__panel.is-reverse {
    grid-template-columns: 45% 55%;
}

.dua-exp__panel.is-reverse .dua-exp__media {
    order: 2;
}

.dua-exp__panel.is-reverse .dua-exp__content {
    order: 1;
}


/* IMÁGENES
-------------------------------------------------- */

.dua-exp__media {
    position: relative;

    height: 260px;

    overflow: hidden;
}

.dua-exp__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: var(--dua-img-pos, center);

    transform:
        scaleX(var(--dua-img-flip, 1)) scale(1);

    transition:
        transform 8s cubic-bezier(.16, 1, .3, 1);
}


/* Zoom muy suave */
.dua-exp__panel:hover .dua-exp__media img {
    transform:
        scaleX(var(--dua-img-flip, 1)) scale(1.04);
}


/* Fundido hacia el fondo crema */
.dua-exp__media::after {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(to right,
            transparent 55%,
            var(--dua-cream) 98%);

    pointer-events: none;
}


/* Panel invertido: fundido hacia la izquierda */
.dua-exp__panel.is-reverse .dua-exp__media::after {
    background:
        linear-gradient(to left,
            transparent 55%,
            var(--dua-cream) 98%);
}


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

.dua-exp__content {
    position: relative;

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

    padding: 64px 48px 64px 80px;
}


/* Distancia especial del panel invertido */
.dua-exp__panel.is-reverse .dua-exp__content {
    padding: 64px 64px 64px 144px;
}


/* Número */
.dua-exp__number {
    display: block;

    margin-bottom: 22.4px;

    font-family: var(--dua-font-display);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: .2em;

    color: var(--dua-copper);

    text-transform: uppercase;
}


/* Nombre del pilar */
.dua-exp__content h3 {
    margin: 0 0 22.4px;

    font-family: var(--dua-font-display);
    font-size: clamp(22.4px, 2.2vw, 32px);
    font-weight: 400;
    line-height: 1.1;

    letter-spacing: .06em;

    color: var(--dua-charcoal, #242424);

    text-transform: uppercase;
}


/* Descripción */
.dua-exp__content p {
    max-width: 42ch;
    margin: 0;

    font-family: var(--dua-font-text);
    font-size: 16.8px;
    font-weight: 300;
    line-height: 1.75;

    color: #695955;
}


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

@media only screen and (min-width: 1200px) {

    .dua-exp__content {
        padding: 80px 64px 80px 112px;
    }

    .dua-exp__panel.is-reverse .dua-exp__content {
        padding: 80px 80px 80px 208px;
    }

}


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

@media only screen and (max-width: 900px) {

    .dua-exp__title {
        font-size: 38px;
    }

    .dua-exp__script {
        font-size: 41px;
    }

    .dua-exp__content {
        padding: 48px 32px;
    }

    .dua-exp__panel.is-reverse .dua-exp__content {
        padding: 48px 32px;
    }

}


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

@media only screen and (max-width: 700px) {

    .dua-exp {
        padding-bottom: 48px;
    }


    /* Encabezado */
    .dua-exp__header {
        padding: 64px 24px 40px;
    }

    .dua-exp__eyebrow {
        font-size: 12px;
    }

    .dua-exp__title {
        font-size: 32px;
    }

    .dua-exp__script {
        font-size: 32px;
    }


    /* Panel apilado */
    .dua-exp__panel,
    .dua-exp__panel.is-reverse {
        grid-template-columns: 1fr;

        min-height: 28vh;
    }


    /* Recuperamos el orden natural */
    .dua-exp__panel.is-reverse .dua-exp__media,
    .dua-exp__panel.is-reverse .dua-exp__content {
        order: initial;
    }


    /* Altura original mobile */
    .dua-exp__media {
        height: 260px;
    }


    /* El fundido ahora baja hacia el texto */
    .dua-exp__media::after,
    .dua-exp__panel.is-reverse .dua-exp__media::after {
        background:
            linear-gradient(to bottom,
                transparent 55%,
                var(--dua-cream) 98%);
    }


    /* Contenido */
    .dua-exp__content,
    .dua-exp__panel.is-reverse .dua-exp__content {
        padding: 48px 32px;
    }

    .dua-exp__number {
        margin-bottom: 22px;

        font-size: 18px;
    }

    .dua-exp__content h3 {
        margin-bottom: 20px;

        font-size: 24px;
    }

    .dua-exp__content p {
        font-size: 16px;
    }

}


/* ==================================================
   DUA · EL ESPACIO
================================================== */

.dua-space {
    position: relative;
    overflow: hidden;

    padding-block: 128px;

    background: var(--dua-black);

    border-bottom:
        1px solid rgba(206, 186, 175, .05);
}


/* Glow ambiente equivalente al original */
.dua-space::before {
    content: "";

    position: absolute;
    z-index: 0;

    width: 800px;
    height: 800px;

    left: -100px;
    bottom: 5%;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(109, 115, 63, .18) 0%,
            transparent 70%);

    filter: blur(140px);

    pointer-events: none;
}


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

.dua-space .dua-container {
    position: relative;
    z-index: 1;
}


.dua-space__header {
    max-width: 900px;
    margin-bottom: 64px;
}


.dua-space__header .dua-section-title {
    margin-bottom: 19.2px;
}


.dua-space__copy {
    max-width: 900px;
    margin: 0;

    font-family: var(--dua-font-text);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.7;

    color: var(--dua-sand);

    opacity: .8;
}



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

.dua-gallery {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: var(--dua-container);

    margin: 56px auto 0;

    /*
     * Reserva el espacio de las flechas.
     * Igual que la implementación original.
     */
    padding:
        0 64px 32px;

    overflow: hidden;
}


/* TRACK
-------------------------------------------------- */

.dua-gallery__track {
    display: flex;

    width: 100%;

    gap: 24px;

    transform: translateX(0);

    transition:
        transform .6s cubic-bezier(.16, 1, .3, 1);

    will-change: transform;
}


/* ITEM
-------------------------------------------------- */

.dua-gallery__item {
    position: relative;

    flex: 0 0 calc(33.333% - 16px);

    width: calc(33.333% - 16px);
    height: 380px;

    overflow: hidden;

    background: var(--dua-black);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .4);

    cursor: zoom-in;
}


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

.dua-gallery__item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.16, 1, .3, 1);
}


.dua-gallery__item:hover img {
    transform: scale(1.08);
}



/* ==================================================
   FLECHAS DEL CARRUSEL
================================================== */

.dua-gallery__arrow {
    position: absolute;
    z-index: 10;

    top: 50%;

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

    width: 44px;
    height: 44px;

    padding: 0;

    transform: translateY(-50%);

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

    border-radius: 50%;

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

    color: var(--dua-cream);

    font-size: 28.8px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

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

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}


.dua-gallery__arrow:hover {
    background: var(--dua-copper);
    border-color: var(--dua-copper);

    box-shadow:
        0 0 15px rgba(208, 96, 46, .4);
}


.dua-gallery__arrow--prev {
    left: 16px;
}


.dua-gallery__arrow--next {
    right: 16px;
}


/* Estado inicio / final */
.dua-gallery__arrow.is-disabled {
    opacity: .35;

    pointer-events: none;
}



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

.dua-space__cta {
    position: relative;
    z-index: 5;

    display: flex;
    justify-content: center;

    margin-top: 16px;
    margin-bottom: 35.2px;
}


.dua-space__btn {
    padding: 14.4px 35.2px;

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

    letter-spacing: .15em;
}



/* ==================================================
   LIGHTBOX
================================================== */

.dua-lightbox {
    position: fixed;
    z-index: 99999;

    inset: 0;

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

    background:
        rgba(18, 18, 18, .98);

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .5s cubic-bezier(.25, 1, .5, 1),
        visibility .5s cubic-bezier(.25, 1, .5, 1);
}


/* Lightbox abierto */
.dua-lightbox.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}



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

.dua-lightbox__content {
    position: relative;

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

    max-width: 90%;
    max-height: 85%;

    transform: scale(.95);

    transition:
        transform .5s cubic-bezier(.25, 1, .5, 1);
}


.dua-lightbox.is-open .dua-lightbox__content {
    transform: scale(1);
}


.dua-lightbox__image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 70vh;

    object-fit: contain;

    border:
        1px solid rgba(206, 186, 175, .1);

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

    opacity: 1;

    transition:
        opacity .2s ease-in-out;
}



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

.dua-lightbox__close {
    position: absolute;
    z-index: 1010;

    top: 32px;
    right: 32px;

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

    width: 50px;
    height: 50px;

    padding: 0;

    border: 0;
    background: transparent;

    color: var(--dua-sand);

    font-family: Arial, sans-serif;
    font-size: 48px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}


.dua-lightbox__close:hover {
    color: var(--dua-crimson);

    transform: rotate(90deg);
}



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

.dua-lightbox__arrow {
    position: absolute;
    z-index: 1010;

    top: 50%;

    padding: 24px;

    transform: translateY(-50%);

    border: 0;
    background: transparent;

    color: var(--dua-sand);

    font-family: Arial, sans-serif;
    font-size: 48px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    user-select: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.dua-lightbox__arrow:hover {
    color: var(--dua-crimson);
}


.dua-lightbox__arrow--prev {
    left: 16px;
}


.dua-lightbox__arrow--prev:hover {
    transform:
        translateY(-50%) translateX(-5px);
}


.dua-lightbox__arrow--next {
    right: 16px;
}


.dua-lightbox__arrow--next:hover {
    transform:
        translateY(-50%) translateX(5px);
}



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

@media only screen and (max-width: 991px) {

    .dua-space {
        padding-block: 96px;
    }


    .dua-gallery {
        padding:
            0 51.2px 32px;
    }


    .dua-gallery__item {
        flex-basis:
            calc(50% - 12px);

        width:
            calc(50% - 12px);

        height: 320px;
    }

}



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

@media only screen and (max-width: 575px) {

    .dua-space {
        padding-block: 72px;
    }


    .dua-space__header {
        margin-bottom: 40px;
    }


    .dua-space__copy {
        font-size: 16px;
    }


    .dua-gallery {
        margin-top: 40px;

        padding:
            0 40px 32px;
    }


    .dua-gallery__item {
        flex-basis: 100%;

        width: 100%;
        height: 280px;
    }


    .dua-gallery__arrow {
        width: 36px;
        height: 36px;

        font-size: 22.4px;
    }


    .dua-gallery__arrow--prev {
        left: 6.4px;
    }


    .dua-gallery__arrow--next {
        right: 6.4px;
    }


    /* Igual que el original:
       flechas internas del lightbox ocultas en mobile */
    .dua-lightbox__arrow {
        display: none;
    }


    .dua-lightbox__close {
        top: 16px;
        right: 16px;

        font-size: 40px;
    }


    .dua-lightbox__content {
        max-width: calc(100% - 32px);
        max-height: 90vh;
    }


    .dua-lightbox__image {
        max-height: 80vh;
    }

}

/* ==================================================
   DUA · CIERRE EDITORIAL
================================================== */

.dua-closing {
    position: relative;

    /*
     * Importante:
     * no usamos width:100% porque pisaría .dua-fullwidth.
     */
    width: 100vw;

    margin-left:
        calc(50% - 50vw);

    padding:
        72px 32px;

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

    background:
        var(--dua-black);

    overflow: hidden;

    text-align: center;
}


/* ==================================================
   FONDOS SUPERPUESTOS
================================================== */

.dua-closing__bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

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

    pointer-events: none;

    transform: scale(1.05);

    animation:
        duaClosingDrift 28s ease-in-out infinite;

    transition:
        opacity 1.5s ease-in-out;
}


/* Imagen de día debajo */
.dua-closing__bg--day {
    z-index: 1;

    opacity: .85;
}


/* Imagen nocturna encima */
.dua-closing__bg--night {
    z-index: 2;

    opacity: .75;
}


/*
 * EFECTO ORIGINAL:
 * al pasar el mouse desaparece gradualmente
 * la imagen nocturna y aparece la de día.
 */
.dua-closing:hover .dua-closing__bg--night {
    opacity: 0;
}


/* ==================================================
   MOVIMIENTO AMBIENTE DEL FONDO
================================================== */

@keyframes duaClosingDrift {

    0% {
        transform:
            scale(1.05) translate(0, 0) rotate(0deg);
    }

    50% {
        transform:
            scale(1.12) translate(1.5%, -1%) rotate(1.5deg);
    }

    100% {
        transform:
            scale(1.05) translate(0, 0) rotate(0deg);
    }

}


/* ==================================================
   CAJA CENTRAL
================================================== */

.dua-closing__box {
    position: relative;
    z-index: 3;

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

    width: 100%;
    max-width: 650px;

    margin: 0 auto;

    padding:
        56px 40px;

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

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

    border-radius: 4px;

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        0 10px 40px rgba(0, 0, 0, .60);
}


/* ==================================================
   TEXTOS
================================================== */

.dua-closing__text {
    display: block;

    margin: 0;

    font-family:
        var(--dua-font-display);

    font-size:
        clamp(19.2px, 2.5vw, 28.8px);

    font-weight: 300;

    line-height: 1.35;

    letter-spacing:
        .05em;

    color:
        var(--dua-cream);

    text-transform:
        uppercase;
}


/* Segundo texto */
.dua-closing__text--strong {
    margin-top: 8px;

    font-weight: 700;

    color:
        var(--dua-crimson);
}


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

.dua-closing__action {
    position: relative;

    margin-top: 35px;
}


.dua-closing__btn {
    min-width: 305px;

    padding:
        15px 34px;

    font-size: 13px;

    letter-spacing:
        .12em;

    white-space: nowrap;
}


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

@media only screen and (max-width: 900px) {

    .dua-closing {
        padding:
            64px 24px;
    }


    .dua-closing__box {
        max-width: 600px;

        padding:
            48px 32px;
    }

}


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

@media only screen and (max-width: 700px) {

    .dua-closing {
        /*padding: 48px 20px;*/
        padding: 90px 20px;
    }


    .dua-closing__bg {
        /* object-position:
            center;*/
        object-position: 0px -60px;
    }

    img.dua-closing__bg--night {
        display: none;
    }

    .dua-closing__box {
        padding:
            42px 22px;
    }


    .dua-closing__text {
        font-size: 20px;
    }


    .dua-closing__action {
        width: 100%;

        margin-top: 30px;
    }


    .dua-closing__btn {
        width: 100%;
        min-width: 0;
        max-width: 320px;

        padding:
            14px 18px;

        font-size: 11px;
    }

}


/* ==================================================
   DUA · FOOTER
================================================== */

.dua-footer {
    position: relative;

    padding:
        72px 0 48px;

    background:
        #000;

    overflow: hidden;
}


/* Glow rojo inferior */
.dua-footer::before {
    content: "";

    position: absolute;

    right: -180px;
    bottom: -220px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(170, 10, 36, .18) 0%,
            rgba(170, 10, 36, .06) 35%,
            transparent 70%);

    filter:
        blur(60px);

    pointer-events: none;
}



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

.dua-footer__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.2fr 1fr .8fr;

    gap: 48px;
}


.dua-footer__column {
    display: flex;
    flex-direction: column;
}



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

.dua-footer__logo {
    display: block;

    width: auto;
    height: 48px;

    object-fit: contain;

    align-self: flex-start;

    margin-bottom: 35px;
}



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

.dua-footer__social {
    display: flex;
    align-items: center;

    gap: 24px;

    margin-bottom: 40px;
}


.dua-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    opacity: .75;

    text-decoration: none;

    transition:
        color .3s cubic-bezier(.16, 1, .3, 1),
        opacity .3s cubic-bezier(.16, 1, .3, 1),
        transform .3s cubic-bezier(.16, 1, .3, 1);
}


.dua-footer__social a:hover {
    color:
        var(--dua-crimson);

    opacity: 1;

    transform:
        translateY(-2px);
}


.dua-footer__social svg {
    width: 22px;
    height: 22px;
}



/* ==================================================
   BOTONES
================================================== */

.dua-footer__actions {
    display: flex;
    flex-direction: column;

    gap: 16px;

    width: 100%;
    max-width: 280px;
}


.dua-footer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 52px;

    padding: 0 18px;

    box-sizing: border-box;

    font-family:
        var(--dua-font-display);

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

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;
    text-decoration: none;

    white-space: nowrap;

    transition:
        background .4s cubic-bezier(.16, 1, .3, 1),
        color .4s cubic-bezier(.16, 1, .3, 1),
        border-color .4s cubic-bezier(.16, 1, .3, 1);
}


/* WhatsApp */
.dua-footer__btn--whatsapp {
    background:
        var(--dua-crimson);

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

    color: #fff;
}


.dua-footer__btn--whatsapp:hover {
    background:
        transparent;

    color:
        var(--dua-crimson);
}


/* Mapa */
.dua-footer__btn--map {
    background:
        rgba(255, 255, 255, .03);

    border:
        1px solid rgba(208, 96, 46, .45);

    color: #fff;

    backdrop-filter:
        blur(10px);

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


.dua-footer__btn--map:hover {
    background:
        rgba(255, 255, 255, .08);

    border-color:
        rgba(208, 96, 46, .85);

    color: #fff;
}



/* ==================================================
   TÍTULOS DE COLUMNA
================================================== */

.dua-footer__title {
    position: relative;

    margin:
        0 0 32px;

    font-family:
        var(--dua-font-display);

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

    line-height: 1.2;

    letter-spacing:
        .08em;

    color:
        var(--dua-cream);
}


/* Línea inferior */
.dua-footer__title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 30px;
    height: 1px;

    background:
        var(--dua-cream);
}



/* ==================================================
   APERTURA
================================================== */

.dua-footer__opening {
    display: flex;
    align-items: center;

    gap: 9px;

    margin:
        -13px 0 26px;

    font-family:
        var(--dua-font-display);

    font-size: 12px;

    line-height: 1;

    letter-spacing:
        .10em;

    color:
        var(--dua-copper);

    text-transform:
        uppercase;
}


.dua-footer__opening-dot {
    display: block;

    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--dua-copper);

    box-shadow:
        0 0 6px var(--dua-copper);

    animation:
        duaFooterPulse 2s ease-in-out infinite;
}


@keyframes duaFooterPulse {

    0%,
    100% {
        opacity: 1;

        transform:
            scale(1);
    }

    50% {
        opacity: .5;

        transform:
            scale(.85);
    }

}



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

.dua-footer__details {
    display: flex;
    flex-direction: column;

    gap: 29px;
}


.dua-footer__detail {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.dua-footer__label {
    font-family:
        var(--dua-font-display);

    font-size: 12px;
    font-weight: 400;

    line-height: 1.2;

    letter-spacing:
        .10em;

    color:
        var(--dua-crimson);

    text-transform:
        uppercase;
}


.dua-footer__detail p {
    margin: 0;

    font-family:
        var(--dua-font-text);

    font-size: 15px;
    font-weight: 400;

    line-height: 1.5;

    color: #fff;

    opacity: .9;
}



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

.dua-footer__nav {
    display: flex;
    flex-direction: column;

    gap: 16px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.dua-footer__nav li {
    margin: 0;
    padding: 0;
}


.dua-footer__nav a {
    display: inline-block;

    font-family:
        var(--dua-font-display);

    font-size: 15px;
    font-weight: 400;

    line-height: 1.4;

    color: #fff;

    opacity: .7;

    text-decoration: none;

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


.dua-footer__nav a:hover {
    color:
        var(--dua-cream);

    opacity: 1;

    transform:
        translateX(5px);
}



/* ==================================================
   BARRA INFERIOR
================================================== */

.dua-footer__bottom {
    position: relative;
    z-index: 2;

    margin-top: 80px;

    padding-top: 32px;

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


.dua-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}


.dua-footer__credit {
    font-family:
        var(--dua-font-text);

    font-size: 13.6px;
    font-weight: 400;

    line-height: 1.4;

    color:
        var(--dua-sand);

    opacity: .5;

    text-decoration: none;

    transition:
        opacity .3s ease;
}


.dua-footer__credit:hover {
    color:
        var(--dua-sand);

    opacity: .9;
}



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

@media only screen and (max-width: 900px) {

    .dua-footer {
        padding:
            64px 0 40px;
    }


    .dua-footer__grid {
        grid-template-columns:
            1fr 1fr;

        gap:
            56px 40px;
    }


    /* Marca ocupa todo el ancho */
    .dua-footer__brand {
        grid-column:
            1 / -1;
    }


    .dua-footer__bottom {
        margin-top:
            64px;
    }

    .dua-footer__logo {
        height: 70px;
    }

    .dua-footer__column:has(.dua-footer__nav) {
        display: none !important;
    }
}


@media only screen and (max-width: 900px) and (min-width: 700px) {
    .dua-exp__content {
        padding: 12px 32px !important;
        align-self: self-start !important;
    }
}



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

@media only screen and (max-width: 700px) {

    .dua-footer {
        padding:
            56px 0 32px;
    }

    .dua-footer__grid {
        grid-template-columns:
            1fr;

        gap:
            48px;
    }


    .dua-footer__brand {
        grid-column:
            auto;
    }


    .dua-footer__logo {
        height:
            44px;

        margin-bottom:
            30px;
    }


    .dua-footer__social {
        margin-bottom:
            32px;
    }


    .dua-footer__actions {
        max-width:
            100%;
    }


    .dua-footer__title {
        margin-bottom:
            32px;
    }


    .dua-footer__bottom {
        margin-top:
            56px;

        padding-top:
            28px;
    }


    .dua-footer__credit {
        font-size:
            12px;

        text-align:
            center;
    }

    header .logo-default {
        width: 90px;
    }

    .navbar-brand {
        padding-block: 15px !important;
    }

    .dua-intro__btn {
        width: 85%;
        padding: 14.4px 35.2px;
        margin-inline: auto;
    }


    #hero .dua-hero__tags>p:first-child {
        width: 197px;
    }


}