/* =========================
   DISTRITO EVENTS V2
   RESPONSIVE GLOBAL
========================= */


/* =========================
   PROTECCIÓN GLOBAL
========================= */

html {
    width: 100%;
    max-width: 100%;

    overflow-x: clip;
}


body {
    width: 100%;
    max-width: 100%;

    overflow-x: clip;
}


main,
header,
footer,
section {
    min-width: 0;
    max-width: 100%;
}


.container,
.container-content,
.container-text {
    min-width: 0;
}


/* =========================
   DESKTOP PEQUEÑO
========================= */

@media (max-width: 1100px) {

    .desktop-nav {
        gap: 1.4rem;
    }


    .header-cta {
        display: none;
    }


    .site-header__inner {
        grid-template-columns:
            minmax(160px, 1fr)
            auto
            minmax(60px, 1fr);
    }


    .hero__title {
        font-size: clamp(4.5rem, 8vw, 7.5rem);
    }


    .manifesto {
        padding-block: 8rem;
    }


    .manifesto__inner {
        gap: 6rem;
    }


    .events-entry,
    .featured-work,
    .services-preview,
    .process-preview {
        padding-block: 8rem;
    }


    .portfolio-slide {
        width: 72vw;
    }


    .process-step {
        min-height: 310px;

        padding: var(--space-4);
    }


    .final-cta {
        padding-block: 8rem;
    }


    .site-footer__main {
        grid-template-columns:
            minmax(220px, 0.7fr)
            minmax(500px, 1.3fr);

        gap: var(--space-6);
    }
}


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

@media (max-width: 1024px) {

    .container,
    .container-content,
    .container-text {
        width: min(
            calc(100% - (var(--page-padding-tablet) * 2)),
            100%
        );

        min-width: 0;
        max-width: 100%;
    }


    .section {
        padding-block: var(--space-8);
    }


    .section--large {
        padding-block: var(--space-9);
    }


    .section-title {
        font-size: 2.75rem;
    }


    .hero__content {
        padding-bottom: 3rem;
    }


    .manifesto__bottom {
        grid-template-columns:
            minmax(0, 460px)
            1fr;
    }


    .events-entry__main,
    .featured-work__heading,
    .services-preview__heading,
    .process-preview__heading {
        grid-template-columns: 1fr;

        align-items: start;
    }


    .events-entry__content,
    .featured-work__heading-side,
    .services-preview__heading > div,
    .process-preview__heading > p {
        max-width: 620px;
    }


    .portfolio-rail {
        padding-left: var(--page-padding-tablet);
        padding-right: var(--page-padding-tablet);
    }


    .process-rail {
        width: min(
            calc(100% - (var(--page-padding-tablet) * 2)),
            100%
        );

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


    .process-step:nth-child(3),
    .process-step:nth-child(4) {
        border-top: 1px solid #d5cdc1;
    }


    .final-cta__bottom {
        grid-template-columns: 1fr;

        align-items: start;
    }


    .final-cta__button {
        width: fit-content;
    }


    .site-footer__main {
        grid-template-columns: 1fr;

        gap: var(--space-7);
    }


    .site-footer__nav {
        max-width: 700px;
    }
}


/* =========================
   HEADER MÓVIL
========================= */

@media (max-width: 850px) {

    .site-header {
        height: 76px;
    }


    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;

        min-width: 0;
    }


    .site-header__inner > * {
        min-width: 0;
    }


    .site-logo {
        font-size: 1.65rem;
    }


    .desktop-nav,
    .header-cta {
        display: none;
    }


    .menu-toggle {
        display: inline-flex;
        flex: 0 0 46px;

        width: 46px;
        height: 46px;
    }


    .hero__content {
        min-height: 100svh;

        padding-top: 8rem;
        padding-bottom: 2.5rem;
    }


    .hero__scroll {
        display: none;
    }
}


/* =========================
   MÓVIL
========================= */

@media (max-width: 768px) {

    main *,
    header *,
    footer * {
        min-width: 0;
    }


    main h1,
    main h2,
    main h3,
    main p {
        max-width: 100%;
    }


    main h1,
    main h2,
    main h3 {
        overflow-wrap: break-word;

        word-break: normal;
    }


    .services-page-hero__top,
    .events-hero__top,
    .wedding-intro__top,
    .wedding-services__top,
    .wedding-gallery__top,
    .wedding-process__top,
    .birthday-section-top,
    .private-section-top,
    .corporate-section-top,
    .celebration-section-top,
    .custom-section-top {
        width: 100%;
        min-width: 0;

        gap: var(--space-3);
    }


    .services-page-hero__top > *,
    .events-hero__top > *,
    .wedding-intro__top > *,
    .wedding-services__top > *,
    .wedding-gallery__top > *,
    .wedding-process__top > *,
    .birthday-section-top > *,
    .private-section-top > *,
    .corporate-section-top > *,
    .celebration-section-top > *,
    .custom-section-top > * {
        min-width: 0;
        max-width: 100%;
    }


    .services-page-hero__top > *:last-child,
    .events-hero__top > *:last-child,
    .birthday-section-top > *:last-child,
    .private-section-top > *:last-child,
    .corporate-section-top > *:last-child,
    .celebration-section-top > *:last-child,
    .custom-section-top > *:last-child {
        text-align: right;
    }


    .container,
    .container-content,
    .container-text {
        width: min(
            calc(100% - (var(--page-padding-mobile) * 2)),
            100%
        );

        min-width: 0;
        max-width: 100%;
    }


    .section {
        padding-block: var(--space-7);
    }


    .section-title {
        font-size: 2.35rem;
    }


    .section-copy {
        font-size: 1rem;
    }


    .button {
        min-height: 50px;
        max-width: 100%;
    }


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

    .hero__media {
        background-position: 58% center;
    }


    .hero__overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.24) 0%,
                rgba(0, 0, 0, 0.30) 30%,
                rgba(0, 0, 0, 0.78) 78%,
                rgba(0, 0, 0, 0.92) 100%
            );
    }


    .hero__content {
        padding-top: 8rem;
        padding-bottom: 2.25rem;
    }


    .hero__title {
        margin-bottom: var(--space-4);

        font-size: clamp(3.8rem, 16vw, 6rem);
        line-height: 0.9;
    }


    .hero__text {
        font-size: 1rem;
    }


    .hero__actions {
        margin-top: var(--space-5);

        flex-direction: column;
    }


    .hero__actions .button {
        width: 100%;
    }


    /* =========================
       MANIFIESTO
    ========================= */

    .manifesto {
        padding-block: 6rem;
    }


    .manifesto__inner {
        gap: 4.5rem;
    }


    .manifesto__brand {
        max-width: 140px;
    }


    .manifesto__intro {
        font-size: 0.8rem;
    }


    .manifesto__title {
        font-size: clamp(3.8rem, 17vw, 5.6rem);
        line-height: 0.86;
    }


    .manifesto__title span {
        margin-left: 0;
    }


    .manifesto__bottom {
        display: flex;
        flex-direction: column;

        gap: var(--space-5);
    }


    /* =========================
       EVENTOS
    ========================= */

    .events-entry {
        padding-block: 6rem;
    }


    .events-entry__inner {
        gap: var(--space-6);
    }


    .events-entry__main {
        display: flex;
        flex-direction: column;

        gap: var(--space-5);
    }


    .events-entry__heading h2 {
        font-size: clamp(3.5rem, 15vw, 5.1rem);
        line-height: 0.9;
    }


    .events-entry__content {
        max-width: 100%;
    }


    .events-entry__visual {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(105px, 0.65fr);

        gap: var(--space-3);
    }


    .events-entry__image--large,
    .events-entry__image--small {
        aspect-ratio: 4 / 5;
    }


    /* =========================
       PORTFOLIO
    ========================= */

    .featured-work {
        padding-block: 6rem;
    }


    .featured-work__heading {
        margin-top: var(--space-6);
        margin-bottom: var(--space-6);

        display: flex;
        flex-direction: column;

        gap: var(--space-5);
    }


    .featured-work__heading h2 {
        font-size: clamp(3.5rem, 15vw, 5rem);
        line-height: 0.9;
    }


    .featured-work__actions {
        display: block;
    }


    .portfolio-controls {
        display: none;
    }


    .portfolio-rail {
        gap: var(--space-3);

        padding-left: var(--page-padding-mobile);
        padding-right: var(--page-padding-mobile);
        padding-bottom: var(--space-3);

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--page-padding-mobile);

        overscroll-behavior-inline: contain;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .portfolio-rail::-webkit-scrollbar {
        display: none;
    }


    .portfolio-slide {
        width: 78vw;

        flex: 0 0 auto;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }


    .portfolio-slide__image {
        aspect-ratio: 4 / 5;
    }


    .portfolio-slide__info h3 {
        font-size: clamp(2.1rem, 9vw, 3rem);
    }


    .featured-work__footer {
        margin-top: var(--space-5);

        align-items: stretch;
        flex-direction: column;
    }


    .featured-work__footer .button {
        width: 100%;
    }


    /* =========================
       SERVICIOS
    ========================= */

    .services-preview {
        padding-block: 6rem;
    }


    .services-preview__heading {
        margin-top: var(--space-6);
        margin-bottom: var(--space-6);

        display: flex;
        flex-direction: column;

        gap: var(--space-5);
    }


    .services-preview__heading h2 {
        font-size: clamp(3.5rem, 15vw, 5rem);
        line-height: 0.9;
    }


    .services-preview__heading > div {
        max-width: 100%;
    }


    .service-item__trigger {
        min-height: 64px;

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

        gap: 0.9rem;
    }


    .service-item__number {
        font-size: 0.62rem;
    }


    .service-item__title {
        font-size: clamp(1.25rem, 5.5vw, 1.6rem);
        line-height: 1.18;
    }


    .service-item__icon {
        width: 34px;
        height: 34px;
    }


    .service-item__content p {
        padding:
            0
            0
            var(--space-4)
            calc(32px + 0.9rem);

        font-size: 0.9rem;
    }


    /* =========================
       PROCESO
    ========================= */

    .process-preview {
        padding-block: 6rem;
    }


    .process-preview__heading {
        margin-top: var(--space-6);
        margin-bottom: var(--space-6);

        display: flex;
        flex-direction: column;

        gap: var(--space-5);
    }


    .process-preview__heading h2 {
        font-size: clamp(3.5rem, 15vw, 5rem);
        line-height: 0.9;
    }


    .process-preview__heading > p {
        max-width: 100%;
    }


    .process-rail {
        width: 100%;

        display: flex;

        gap: var(--space-3);

        overflow-x: auto;
        overflow-y: hidden;

        padding:
            0
            var(--page-padding-mobile)
            var(--space-3);

        border: 0;

        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--page-padding-mobile);

        overscroll-behavior-inline: contain;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .process-rail::-webkit-scrollbar {
        display: none;
    }


    .process-step {
        width: 78vw;
        min-height: 300px;

        flex: 0 0 auto;

        padding: var(--space-5);

        border: 1px solid #d5cdc1 !important;
        border-radius: var(--radius-lg);

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }


    .process-step__content h3 {
        font-size: clamp(2.2rem, 10vw, 3.1rem);
    }


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

    .final-cta {
        padding-block: 6rem;
    }


    .final-cta__content {
        padding-top: var(--space-6);
    }


    .final-cta h2 {
        font-size: clamp(3.6rem, 15vw, 5.5rem);
        line-height: 0.88;
    }


    .final-cta__bottom {
        margin-top: var(--space-6);

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: var(--space-5);
    }


    .final-cta__button {
        width: 100%;
        min-width: 0;
    }


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

    .site-footer {
        padding-top: 5rem;
    }


    .site-footer__main {
        display: flex;
        flex-direction: column;

        gap: var(--space-7);
    }


    .site-footer__nav {
        width: 100%;

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

        gap: var(--space-6);
    }


    .site-footer__nav > div:last-child {
        grid-column: 1 / -1;
    }


    .site-footer__statement {
        margin-top: 5rem;

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

        gap: var(--space-4);
    }


    .site-footer__statement p:last-child {
        color: var(--color-white);

        font-size: clamp(2.65rem, 11.5vw, 3.6rem);
        font-weight: 500;
        line-height: 1;

        letter-spacing: -0.035em;
    }


    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-3);
    }


    /* =========================
       MENÚ MÓVIL PREMIUM
    ========================= */

    .mobile-menu {
        background:
            radial-gradient(
                circle at 85% 12%,
                rgba(226, 173, 91, 0.08),
                transparent 32%
            ),
            linear-gradient(
                180deg,
                #0b0b0b 0%,
                #080808 100%
            );
    }


    .mobile-menu__inner {
        min-height: 100dvh;

        padding-top: 6.7rem;
        padding-bottom: 1.5rem;

        gap: 2rem;
    }


    .mobile-nav {
        width: 100%;

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


    .mobile-nav a {
        position: relative;

        min-height: 62px;

        padding:
            0.78rem
            0.1rem;

        display: grid;

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

        align-items: center;

        column-gap: 0.75rem;

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

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

        font-size:
            clamp(
                1.75rem,
                7.4vw,
                2.25rem
            );

        font-weight: 400;
        line-height: 1;

        letter-spacing: -0.025em;
    }


    .mobile-nav a::after {
        content: "↗";

        justify-self: end;

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

        font-family: var(--font-body);
        font-size: 0.8rem;
        font-weight: 400;

        transform: translateX(-2px);

        transition:
            color var(--duration-normal) var(--ease-standard),
            transform var(--duration-normal) var(--ease-premium);
    }


    .mobile-nav a span {
        color: var(--color-champagne);

        font-family: var(--font-body);
        font-size: 0.55rem;
        font-weight: 600;

        line-height: 1;

        letter-spacing: 0.14em;
    }


    .mobile-nav a[aria-current="page"] {
        color: var(--color-champagne);
    }


    .mobile-nav a[aria-current="page"]::after {
        color: var(--color-champagne);
    }


    .mobile-menu__footer {
        width: 100%;

        margin-top: auto;

        padding-top: 1.25rem;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 1.15rem;

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


    .mobile-menu__footer-left {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 0.9rem;
    }


    .mobile-menu__cta {
        width: 100%;

        min-height: 52px;

        border-radius: 999px;

        font-size: 0.85rem;
        font-weight: 600;

        letter-spacing: -0.01em;
    }


    .language-switcher--mobile {
        margin-top: 0;

        justify-content: flex-start;

        gap: 0.45rem;

        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 600;

        letter-spacing: 0.12em;
    }


    .mobile-menu__social {
        width: 100%;

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

        gap: var(--space-4);

        padding-top: 0.2rem;
    }


    .mobile-menu__social a {
        position: relative;

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

        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 500;
    }


    .mobile-menu__social a::after {
        content: "↗";

        margin-left: 0.35rem;

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

        font-size: 0.65rem;
    }
}


/* =========================
   HOVER MÓVIL SOLO CUANDO
   EXISTE UN PUNTERO REAL
========================= */

@media
    (max-width: 768px) and
    (hover: hover) and
    (pointer: fine) {

    .mobile-nav a:hover {
        color: var(--color-champagne);
    }


    .mobile-nav a:hover::after {
        color: var(--color-champagne);

        transform:
            translate(
                2px,
                -2px
            );
    }
}


/* =========================
   MÓVIL PEQUEÑO
========================= */

@media (max-width: 430px) {

    .mobile-nav a {
        min-height: 59px;

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

        padding-block: 0.72rem;

        font-size:
            clamp(
                1.7rem,
                7.8vw,
                2.1rem
            );

        line-height: 1;
    }


    .hero__title {
        font-size: clamp(3.45rem, 15vw, 4.8rem);
    }


    .manifesto,
    .events-entry,
    .featured-work,
    .services-preview,
    .process-preview {
        padding-block: 5rem;
    }


    .manifesto__inner {
        gap: 4rem;
    }


    .manifesto__title {
        font-size: clamp(3.35rem, 16.5vw, 4.6rem);
    }


    .events-entry__heading h2,
    .featured-work__heading h2,
    .services-preview__heading h2,
    .process-preview__heading h2 {
        font-size: clamp(3.2rem, 14vw, 4.4rem);
    }


    .portfolio-slide {
        width: 82vw;
    }


    .service-item__title {
        font-size: clamp(1.2rem, 5.3vw, 1.45rem);
    }


    .process-step {
        width: 82vw;
        min-height: 280px;
    }


    .final-cta {
        padding-block: 5rem;
    }


    .final-cta h2 {
        font-size: clamp(3.25rem, 14vw, 4.5rem);
    }


    .site-footer__statement p:last-child {
        font-size: clamp(2.4rem, 10.8vw, 3rem);
        font-weight: 500;
    }


    .site-footer__nav {
        grid-template-columns: 1fr;
    }


    .site-footer__nav > div:last-child {
        grid-column: auto;
    }


    .mobile-menu__inner {
        padding-top: 6.2rem;
        padding-bottom: 1.2rem;
    }


    .mobile-menu__cta {
        min-height: 50px;
    }
}