/* =========================================
   1. VARIABLES
========================================= */

:root {
    --experiences-white: #FFFFFF;
    --experiences-black: #161513;
    --experiences-soft-black: #22211F;
    --experiences-gold: #EAA736;

    --experiences-text: #202020;
    --experiences-gray: #777777;
    --experiences-soft-gray: #A0A0A0;
    --experiences-light-gray: #F5F5F3;

    --experiences-border:
        rgba(22, 21, 19, 0.13);

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


/* =========================================
   2. BASE GENERAL
========================================= */

.experiences-page {
    margin: 0;

    overflow-x: hidden;

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

    color:
        var(--experiences-text);
}


.experiences-container {
    width:
        min(1220px, 88%);

    margin:
        0 auto;
}


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

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

    transform:
        translateY(0);

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


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

    transform:
        translateY(18px);
}


.experiences-page.is-ready main,
.experiences-page.is-ready .footer {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   4. PRESENTACIÓN
========================================= */

.experiences-hero {
    padding:
        44px
        0
        26px;

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


.experiences-breadcrumb {
    margin:
        0
        0
        20px;

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        var(--experiences-soft-gray);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


.experiences-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(280px, 0.7fr);

    align-items: end;

    gap: 80px;
}


.experiences-heading-main {
    display: flex;

    align-items: flex-start;

    gap: 22px;
}


.experiences-section-number {
    padding-top: 12px;

    color:
        var(--experiences-gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


.experiences-heading h1 {
    margin: 0;

    color:
        var(--experiences-black);

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

    font-size:
        clamp(44px, 7vw, 92px);

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -2px;
}


.experiences-heading-copy {
    max-width: 380px;

    padding-bottom: 5px;
}


.experiences-heading-copy p {
    margin:
        0
        0
        9px;

    color:
        var(--experiences-gray);

    font-size: 12px;

    line-height: 1.75;
}


.experiences-heading-copy p:last-child {
    margin-bottom: 0;
}


.experiences-heading-line {
    width: 100%;

    height: 1px;

    margin:
        24px
        0
        16px;

    background-color:
        var(--experiences-border);
}


/* =========================================
   5. FILTROS
========================================= */

.experiences-filters {
    display: flex;

    align-items: center;

    gap: 25px;

    overflow-x: auto;

    scrollbar-width: none;
}


.experiences-filters::-webkit-scrollbar {
    display: none;
}


.experience-filter {
    padding:
        7px
        0;

    flex:
        0
        0
        auto;

    position: relative;

    border: 0;

    background-color:
        transparent;

    color:
        var(--experiences-soft-gray);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 0.3s ease;
}


.experience-filter::after {
    content: "";

    width: 0;

    height: 1px;

    position: absolute;

    left: 0;

    bottom: 0;

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

    transition:
        width 0.35s
        var(--experiences-ease);
}


.experience-filter:hover,
.experience-filter.is-active {
    color:
        var(--experiences-black);
}


.experience-filter.is-active::after {
    width: 100%;
}


/* =========================================
   6. ARCHIVO
========================================= */

.experiences-archive {
    padding:
        25px
        0
        110px;

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


.experiences-grid {
    display: grid;

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

    align-items: start;

    gap:
        58px
        30px;
}


/* =========================================
   7. TARJETA GENERAL
========================================= */

.experience-card {
    min-width: 0;

    opacity: 0;

    transform:
        translateY(28px);

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


.experience-card.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


.experience-card.is-filtered-out {
    display: none;
}


.experience-card-link {
    display: block;

    color: inherit;

    text-decoration: none;
}


.experience-card-media {
    width: 100%;

    aspect-ratio: 4 / 3;

    position: relative;

    overflow: hidden;

    background-color:
        var(--experiences-light-gray);
}


.experience-card-media img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.8s
        var(--experiences-ease);
}


.experience-card:hover
.experience-card-media img {
    transform:
        scale(1.045);
}


.experience-media-label {
    padding:
        7px
        10px;

    position: absolute;

    left: 12px;

    bottom: 12px;

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

    color:
        var(--experiences-black);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* =========================================
   8. CONTENIDO DE TARJETA
========================================= */

.experience-card-content {
    padding:
        22px
        3px
        0;
}


.experience-category {
    margin:
        0
        0
        11px;

    color:
        var(--experiences-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-align: center;

    text-transform: uppercase;
}


.experience-card-content h2 {
    margin:
        0
        auto
        9px;

    max-width: 350px;

    color:
        var(--experiences-black);

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

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

    font-weight: 400;

    line-height: 1.23;

    text-align: center;
}


.experience-date {
    margin:
        0
        0
        21px;

    color:
        var(--experiences-soft-gray);

    font-size: 8px;

    letter-spacing: 0.8px;

    text-align: center;

    text-transform: uppercase;
}


.experience-summary {
    margin:
        0
        0
        17px;

    color:
        var(--experiences-gray);

    font-size: 11px;

    line-height: 1.75;
}


.experience-read-more {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    position: relative;

    color:
        var(--experiences-black);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.experience-read-more::after {
    content: "";

    width: calc(100% - 18px);

    height: 1px;

    position: absolute;

    left: 0;

    bottom: -6px;

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

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform 0.35s ease;
}


.experience-card:hover
.experience-read-more::after {
    transform:
        scaleX(1);

    transform-origin:
        left;
}


/* =========================================
   9. TARJETA DE FRASE
========================================= */

.experience-card-quote {
    min-height: 470px;

    position: relative;

    overflow: hidden;

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

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


.experience-quote-background,
.experience-quote-overlay {
    position: absolute;

    inset: 0;
}


.experience-quote-background img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        grayscale(100%)
        brightness(0.52)
        contrast(1.12);

    transition:
        transform 1s
        var(--experiences-ease);
}


.experience-card-quote:hover
.experience-quote-background img {
    transform:
        scale(1.05);
}


.experience-quote-overlay {
    z-index: 2;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.72)
        );
}


.experience-quote-content {
    min-height: 470px;

    padding:
        48px
        34px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 3;

    text-align: center;
}


.experience-quote-label {
    margin:
        0
        0
        30px;

    color:
        var(--experiences-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.experience-quote-content blockquote {
    margin:
        0
        0
        30px;

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

    font-size:
        clamp(25px, 3vw, 35px);

    font-weight: 400;

    line-height: 1.25;
}


.experience-quote-author {
    margin: 0;

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

    font-size: 8px;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


/* =========================================
   10. TARJETA DE VIDEO
========================================= */

.experience-card-video
.experience-card-media {
    aspect-ratio: 4 / 4.45;
}


.experience-video-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.12),
            rgba(0, 0, 0, 0.70)
        );
}


.experience-play-button {
    width: 54px;

    height: 54px;

    position: absolute;

    left: 50%;

    top: 47%;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

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

    color:
        var(--experiences-white);

    font-size: 15px;

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

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


.experience-card-video:hover
.experience-play-button {
    background-color:
        var(--experiences-white);

    color:
        var(--experiences-black);

    transform:
        translate(-50%, -50%)
        scale(1.08);
}


.experience-video-caption {
    position: absolute;

    left: 24px;

    right: 24px;

    bottom: 26px;

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


.experience-video-caption p {
    margin:
        0
        0
        9px;

    color:
        var(--experiences-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


.experience-video-caption h2 {
    margin: 0;

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

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

    font-weight: 400;

    line-height: 1.12;
}


/* =========================================
   11. DETRÁS DE CÁMARAS
========================================= */

.experience-card-backstage
.experience-card-media {
    aspect-ratio: 4 / 4.45;
}


.experience-backstage-overlay {
    position: absolute;

    inset: 0;

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


.experience-backstage-content {
    position: absolute;

    left: 25px;

    right: 25px;

    bottom: 28px;

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


.experience-backstage-content p {
    margin:
        0
        0
        8px;

    color:
        var(--experiences-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


.experience-backstage-content h2 {
    margin:
        0
        0
        16px;

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

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

    font-weight: 400;
}


.experience-backstage-content span {
    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


/* =========================================
   12. MENSAJE VACÍO
========================================= */

.experiences-empty {
    padding:
        80px
        0;

    color:
        var(--experiences-gray);

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

    font-size:
        25px;

    line-height: 1.5;

    text-align: center;
}


/* =========================================
   13. CIERRE EDITORIAL
========================================= */

.experiences-closing {
    padding:
        85px
        0;

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


.experiences-closing-grid {
    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: 40px;
}


.experiences-closing-number {
    margin: 0;

    align-self: start;

    color:
        var(--experiences-gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


.experiences-closing-label {
    margin:
        0
        0
        14px;

    color:
        var(--experiences-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.experiences-closing-copy h2 {
    max-width: 770px;

    margin: 0;

    color:
        var(--experiences-black);

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

    font-size:
        clamp(36px, 5vw, 67px);

    font-weight: 400;

    line-height: 1.07;
}


.experiences-closing-link {
    padding:
        13px
        0;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    position: relative;

    color:
        var(--experiences-black);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.experiences-closing-link::after {
    content: "";

    width: calc(100% - 21px);

    height: 1px;

    position: absolute;

    left: 0;

    bottom: 7px;

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


/* =========================================
   14. FOOTER
========================================= */

.experiences-page .footer {
    width: 100%;

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

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


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

    min-height: 74px;

    margin:
        0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.experiences-page .footer-logo-image {
    width: auto;

    height: 20px;

    display: block;
}


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

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

    font-size: 9px;

    letter-spacing: 0.3px;
}


.experiences-page .footer-social {
    display: flex;

    align-items: center;

    gap: 22px;
}


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

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

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

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


.experiences-page .footer-social a:hover {
    color:
        var(--experiences-gold);

    transform:
        translateY(-2px);
}


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

    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.experiences-page
.footer-social
.tiktok-icon {
    fill: currentColor;

    stroke: none;
}


/* =========================================
   15. WHATSAPP
========================================= */

.floating-whatsapp {
    width: 58px;

    height: 58px;

    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index: 19000;

    display: flex;

    align-items: center;

    justify-content: center;

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

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

    color:
        var(--experiences-gold);

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

    opacity: 0;

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

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

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


.floating-whatsapp svg {
    width: 34px;

    height: 34px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

    color:
        var(--experiences-gold);

    transform:
        translateY(-4px)
        scale(1.04);
}


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

    padding:
        8px
        11px;

    position: absolute;

    right:
        calc(100% + 12px);

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

    color:
        var(--experiences-white);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    opacity: 0;

    visibility: hidden;

    transform:
        translateX(7px);

    pointer-events: none;

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


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

    visibility: visible;

    transform:
        translateX(0);
}


@keyframes experiences-whatsapp-entry {

    from {
        opacity: 0;

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

    to {
        opacity: 1;

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

}


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

@media (max-width: 1000px) {

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

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

        padding:
            52px
            8%
            60px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        position: fixed;

        top:
            var(--header-height);

        left: 0;

        z-index: 10000;

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

        color:
            var(--experiences-black);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-14px);

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


    .experiences-page
    .mobile-menu.is-open {
        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);
    }


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

        padding:
            20px
            0;

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

        color:
            var(--experiences-black);

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

        font-size: 19px;

        font-weight: 400;

        letter-spacing: 1px;

        text-align: center;

        text-transform: none;
    }


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


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


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

}


/* =========================================
   17. TABLET
========================================= */

@media (max-width: 950px) {

    .experiences-heading {
        grid-template-columns:
            1fr;

        gap: 28px;
    }


    .experiences-heading-copy {
        max-width: 580px;

        padding-left: 43px;
    }


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

        gap:
            55px
            25px;
    }


    .experiences-closing-grid {
        grid-template-columns:
            45px
            1fr;
    }


    .experiences-closing-link {
        grid-column: 2;
    }

}


/* =========================================
   18. MÓVIL
========================================= */

@media (max-width: 700px) {

    .experiences-container {
        width: 90%;
    }


    .experiences-hero {
        padding:
            35px
            0
            20px;
    }


    .experiences-heading-main {
        gap: 13px;
    }


    .experiences-section-number {
        padding-top: 8px;
    }


    .experiences-heading h1 {
        font-size:
            clamp(43px, 15vw, 68px);

        letter-spacing: -1.5px;
    }


    .experiences-heading-copy {
        padding-left: 28px;
    }


    .experiences-heading-line {
        margin-top: 26px;
    }


    .experiences-filters {
        gap: 20px;

        padding-bottom: 5px;
    }


    .experience-filter {
        font-size: 8px;
    }


    .experiences-archive {
        padding:
            20px
            0
            80px;
    }


    .experiences-grid {
        grid-template-columns:
            1fr;

        gap: 58px;
    }


    .experience-card-media {
        aspect-ratio: 4 / 3.1;
    }


    .experience-card-content {
        padding-top: 18px;
    }


    .experience-card-content h2 {
        font-size: 23px;
    }


    .experience-summary {
        font-size: 12px;
    }


    .experience-card-quote,
    .experience-quote-content {
        min-height: 470px;
    }


    .experience-card-video
    .experience-card-media,

    .experience-card-backstage
    .experience-card-media {
        aspect-ratio: 4 / 4.7;
    }


    .experiences-closing {
        padding:
            70px
            0;
    }


    .experiences-closing-grid {
        grid-template-columns:
            1fr;

        gap: 23px;
    }


    .experiences-closing-link {
        grid-column: auto;
    }


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

        padding:
            42px
            0;

        flex-direction: column;

        justify-content: center;

        gap: 25px;

        text-align: center;
    }


    .experiences-page
    .footer-copy {
        font-size: 10px;
    }


    .experiences-page
    .footer-social {
        gap: 25px;
    }


    .experiences-page
    .footer-social a {
        width: 27px;

        height: 27px;
    }


    .experiences-page
    .footer-social svg {
        width: 21px;

        height: 21px;
    }


    .floating-whatsapp {
        width: 52px;

        height: 52px;

        right: 16px;

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


    .floating-whatsapp svg {
        width: 30px;

        height: 30px;
    }


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

}


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

@media (max-width: 390px) {

    .experiences-heading h1 {
        font-size: 45px;
    }


    .experience-card-content h2 {
        font-size: 21px;
    }


    .experience-quote-content {
        padding:
            42px
            25px;
    }


    .floating-whatsapp {
        width: 49px;

        height: 49px;

        right: 13px;

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

}


/* =========================================
   20. MOVIMIENTO REDUCIDO
========================================= */

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

    .experiences-page main,
    .experiences-page .footer,
    .experience-card,
    .experience-card-media img,
    .floating-whatsapp {
        opacity: 1;

        transform: none;

        transition: none;

        animation: none;
    }

}


/* =========================================
   EXPERIENCIAS — INTRO + CREADOR
========================================= */

.experiences-intro {
    padding:
        34px
        0
        18px;

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


.experiences-intro-shell {
    width:
        min(1220px, 88%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, 0.92fr);

    gap:
        34px;

    align-items:
        start;
}


.experiences-intro-main {
    padding-top:
        10px;
}


.experiences-intro-breadcrumb {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        18px;

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

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.experiences-intro-heading {
    display:
        grid;

    grid-template-columns:
        22px
        1fr;

    gap:
        12px;

    align-items:
        start;

    margin-bottom:
        18px;
}


.experiences-intro-number {
    padding-top:
        10px;

    color:
        var(--color-gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.10em;
}


.experiences-intro-heading h1 {
    margin:
        0;

    color:
        var(--color-black);

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

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

    font-weight:
        800;

    line-height:
        0.94;

    letter-spacing:
        -0.05em;
}


.experiences-intro-copy {
    max-width:
        690px;

    display:
        grid;

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

    gap:
        22px;
}


.experiences-intro-copy p {
    margin:
        0;

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

    font-size:
        14px;

    line-height:
        1.62;
}


/* =========================================
   TARJETA DEL CREADOR — COMPACTA
========================================= */

.experiences-creator-card {
    padding-left:
        22px;

    border-left:
        1px solid
        rgba(22, 21, 19, 0.10);

    display:
        grid;

    grid-template-columns:
        138px
        minmax(0, 1fr);

    gap:
        18px;

    align-items:
        start;
}


/* FOTO */

.experiences-creator-photo {
    width:
        138px;
}


.experiences-creator-photo img {
    width:
        100%;

    aspect-ratio:
        4 / 5;

    display:
        block;

    object-fit:
        cover;

    border-radius:
        6px;
}


/* CONTENIDO GENERAL */

.experiences-creator-content {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


/* ETIQUETA */

.experiences-creator-eyebrow {
    margin:
        0
        0
        5px;

    display:
        block;

    color:
        var(--experiences-gold);

    font-size:
        7px;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;
}


/* TÍTULO */

.experiences-creator-content h2 {
    margin:
        0
        0
        7px;

    color:
        var(--experiences-black);

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

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

    font-weight:
        400;

    line-height:
        0.95;
}


/* NOMBRE + PROFESIÓN */

.experiences-creator-meta {
    margin:
        0
        0
        12px;
}


.experiences-creator-meta strong {
    margin:
        0
        0
        2px;

    display:
        block;

    color:
        var(--experiences-black);

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.experiences-creator-meta span {
    display:
        block;

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

    font-size:
        10px;

    line-height:
        1.35;
}


/* =========================================
   DISCIPLINAS
========================================= */

.experiences-creator-skills {
    width:
        100%;

    margin:
        0
        0
        12px;

    display:
        grid;

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

    gap:
        0;
}


.creator-skill {
    min-width:
        0;

    padding:
        0
        12px;

    border-left:
        1px solid
        rgba(22, 21, 19, 0.09);
}


.creator-skill:first-child {
    padding-left:
        0;

    border-left:
        0;
}


.creator-skill:last-child {
    padding-right:
        0;
}


.creator-skill span {
    margin:
        0
        0
        3px;

    display:
        block;

    color:
        var(--experiences-black);

    font-size:
        7px;

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.creator-skill p {
    margin:
        0;

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

    font-size:
        8px;

    line-height:
        1.45;
}


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

.experiences-creator-quote {
    width:
        100%;

    max-width:
        500px;

    margin:
        0;

    padding:
        1px
        0
        1px
        11px;

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

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

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

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.42;
}


/* =========================================
   RESPONSIVE DEL CREADOR
========================================= */

@media (max-width: 1100px) {

    .experiences-creator-card {
        padding:
            22px
            0
            0;

        border-left:
            0;

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

        grid-template-columns:
            130px
            minmax(0, 1fr);

        gap:
            18px;
    }


    .experiences-creator-photo {
        width:
            130px;
    }

}


@media (max-width: 700px) {

    .experiences-creator-card {
        grid-template-columns:
            100px
            minmax(0, 1fr);

        gap:
            14px;
    }


    .experiences-creator-photo {
        width:
            100px;
    }


    .experiences-creator-content h2 {
        font-size:
            26px;
    }


    .experiences-creator-skills {
        grid-template-columns:
            1fr;

        gap:
            8px;
    }


    .creator-skill,
    .creator-skill:first-child {
        padding:
            0;

        border-left:
            0;
    }


    .experiences-creator-quote {
        font-size:
            11px;
    }

}

/* =========================================
   BARRA DE CATEGORÍAS
========================================= */

.experiences-categories {
    background-color:
        var(--color-bone);
}


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

@media (max-width: 1100px) {

    .experiences-intro-shell {
        grid-template-columns:
            1fr;

        gap:
            44px;
    }

    .experiences-creator-card {
        padding-left:
            0;

        border-left:
            0;

        padding-top:
            28px;

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

    .experiences-intro-copy {
        grid-template-columns:
            1fr;
        gap:
            18px;
    }

}


@media (max-width: 700px) {

    .experiences-intro {
        padding:
            38px
            0
            20px;
    }

    .experiences-intro-shell {
        width:
            90%;
    }

    .experiences-intro-heading {
        grid-template-columns:
            1fr;
        gap:
            10px;
    }

    .experiences-intro-number {
        padding-top:
            0;
    }

    .experiences-intro-heading h1 {
        font-size:
            clamp(42px, 12vw, 64px);
    }

    .experiences-creator-card {
        grid-template-columns:
            1fr;
    }

    .experiences-creator-photo {
        max-width:
            220px;
    }

    .experiences-creator-skills {
        grid-template-columns:
            1fr;
        gap:
            14px;
    }

    .experiences-creator-quote {
        font-size:
            21px;
    }

}