/*
   Capa UI/UX exclusiva del portal turístico en pantallas móviles.
   Se carga después de los estilos de página para no alterar escritorio.
*/
@media (max-width: 767.98px) {
    html {
        scroll-padding-top: 86px;
    }

    body.has-tourism-mobile-nav {
        overflow-x: clip;
    }

    .site-topbar {
        padding: .28rem 0;
    }

    .site-topbar__text {
        width: 100%;
        overflow: hidden;
        font-size: .72rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-navbar {
        min-height: 70px;
    }

    .site-brand {
        gap: .65rem;
    }

    .site-brand__logo {
        width: 42px;
        height: 42px;
    }

    .site-brand__text strong {
        font-size: 1rem;
    }

    .site-brand__text small {
        font-size: .7rem;
    }

    .site-menu-toggle {
        min-width: 48px;
        min-height: 48px;
    }

    /* Navegación premium dentro del menú lateral. */
    .mobile-menu__nav {
        gap: .65rem;
        padding-bottom: 1rem;
    }

    .mobile-submenu {
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .2);
        border-radius: 18px;
        background: linear-gradient(145deg, #fff, #f8fbff);
        box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    }

    .mobile-submenu-toggle {
        min-height: 62px !important;
        padding: .65rem .75rem !important;
        border: 0;
        background: transparent;
        color: var(--color-primary-900);
        transition: background-color .2s ease, color .2s ease;
    }

    .mobile-submenu-toggle.is-open {
        background: linear-gradient(135deg, rgba(0, 59, 142, .08), rgba(22, 166, 182, .06));
        color: var(--color-primary-700);
    }

    .mobile-submenu-toggle__label {
        display: flex;
        align-items: center;
        gap: .7rem;
        min-width: 0;
    }

    .mobile-menu-nav-icon {
        display: inline-grid;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid rgba(0, 59, 142, .1);
        border-radius: 12px;
        background: linear-gradient(145deg, #fff, #edf4ff);
        color: var(--color-primary);
        box-shadow: 0 6px 16px rgba(0, 59, 142, .08);
    }

    .mobile-menu-nav-icon i {
        font-size: 1rem;
        transform: none !important;
    }

    .mobile-submenu-toggle > .mobile-submenu-toggle__chevron {
        display: grid;
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        place-items: center;
        border-radius: 50%;
        background: rgba(0, 59, 142, .07);
        font-size: .78rem;
    }

    .mobile-submenu-toggle.is-open > .mobile-submenu-toggle__chevron {
        transform: rotate(180deg);
    }

    .mobile-submenu-panel__inner {
        gap: .4rem !important;
        padding: .25rem .65rem .75rem !important;
        border-top: 1px solid rgba(148, 163, 184, .16);
    }

    .mobile-submenu-panel__inner a {
        position: relative;
        display: flex !important;
        min-height: 46px;
        align-items: center;
        gap: .65rem;
        padding: .62rem .7rem !important;
        border: 1px solid transparent;
        border-radius: 12px;
        color: #42526a !important;
        font-size: .88rem;
        font-weight: 700 !important;
        line-height: 1.25;
        transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
    }

    .mobile-submenu-panel__inner a::before {
        content: "";
        flex: 0 0 8px;
        width: 8px;
        height: 8px;
        border: 2px solid rgba(0, 59, 142, .55);
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(0, 59, 142, .06);
    }

    .mobile-submenu-panel__inner a:hover,
    .mobile-submenu-panel__inner a:focus-visible {
        border-color: rgba(0, 59, 142, .12);
        background: #fff;
        color: var(--color-primary-700) !important;
        transform: translateX(2px);
    }

    #mobileExperiencesMenu .mobile-submenu-panel__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #mobileExperiencesMenu .mobile-submenu-panel__inner a {
        min-width: 0;
        padding-inline: .55rem !important;
        font-size: .78rem;
    }

    .mobile-menu__nav > .mobile-menu-primary-link {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 28px;
        min-height: 58px;
        align-items: center;
        gap: .7rem;
        padding: .58rem .7rem !important;
        border: 1px solid rgba(148, 163, 184, .2) !important;
        border-radius: 16px;
        background: #fff;
        color: var(--color-primary-900);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .mobile-menu__nav > .mobile-menu-primary-link > .bi-arrow-right-short {
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border-radius: 50%;
        background: rgba(0, 59, 142, .07);
        color: var(--color-primary);
        font-size: 1.15rem;
    }

    .mobile-menu__nav > .mobile-menu-primary-link:hover,
    .mobile-menu__nav > .mobile-menu-primary-link:focus-visible {
        border-color: rgba(0, 59, 142, .2) !important;
        color: var(--color-primary-700);
        box-shadow: 0 12px 26px rgba(0, 59, 142, .1);
        transform: translateY(-1px);
    }

    main [id] {
        scroll-margin-top: 86px;
    }

    main h1,
    main h2,
    main h3 {
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    main h1 {
        font-size: clamp(2rem, 9vw, 2.75rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -.035em !important;
    }

    main h2 {
        line-height: 1.12;
    }

    main p {
        overflow-wrap: anywhere;
    }

    main .btn,
    main button:not(.carousel-control-prev):not(.carousel-control-next) {
        min-height: 44px;
    }

    /* Héroes: el contenido útil entra antes en el primer viewport. */
    .events-hero,
    .news-hero,
    .rd-map-hero,
    .map-hero,
    .beaches-hero,
    .eco-hero,
    .gastronomy-hero,
    .ct-hero,
    .religious-hero,
    .history-hero,
    .customs-hero,
    .province-hero,
    .province-visitors-hero,
    .contact-hero,
    .patron-hero,
    .th-hero,
    .place-hero {
        min-height: 0 !important;
    }

    .events-hero__content,
    .news-hero > .container,
    .rd-map-hero > .container,
    .map-hero__content,
    .beaches-hero__content,
    .eco-hero__content,
    .gastronomy-hero__content,
    .ct-hero__content,
    .religious-hero__content,
    .history-hero__content,
    .customs-hero__content,
    .province-hero__content,
    .province-visitors-hero > .container,
    .contact-hero__container,
    .patron-hero__container,
    .th-hero__content,
    .place-hero__content {
        min-height: 0 !important;
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }

    .events-hero__copy > p,
    .news-hero__copy > p,
    .rd-map-hero__copy > p,
    .map-hero__copy > p,
    .beaches-hero__copy > p,
    .eco-hero__copy > p,
    .gastronomy-hero__copy > p,
    .ct-hero__copy > p,
    .religious-hero__copy > p,
    .history-hero__copy > p,
    .customs-hero__copy > p,
    .province-hero__copy > p,
    .province-visitors-hero__copy > p,
    .contact-hero__copy > p,
    .patron-hero__copy > p,
    .th-hero__copy > p,
    .place-hero__copy > p {
        max-width: 42rem;
        margin-bottom: 1rem;
        font-size: .98rem !important;
        line-height: 1.55 !important;
    }

    .events-hero-panel,
    .news-hero__panel,
    .rd-map-hero__panel,
    .map-hero__panel,
    .beaches-hero__panel,
    .eco-hero-panel,
    .gastronomy-hero__panel,
    .ct-hero-panel,
    .religious-hero__panel,
    .history-hero__panel,
    .customs-hero__panel,
    .province-hero-card,
    .contact-hero__panel,
    .patron-hero-card,
    .th-hero-panel {
        display: none !important;
    }

    .events-hero__actions,
    .rd-map-hero__actions,
    .map-hero__actions,
    .beaches-hero__actions,
    .eco-hero__actions,
    .gastronomy-hero__actions,
    .ct-hero__actions,
    .religious-hero__actions,
    .history-hero__actions,
    .customs-hero__actions,
    .province-hero__actions,
    .province-visitors-hero__actions,
    .patron-hero__actions,
    .th-hero__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .65rem !important;
        width: 100%;
    }

    .events-hero__actions .btn,
    .rd-map-hero__actions .btn,
    .map-hero__actions .btn,
    .beaches-hero__actions .btn,
    .eco-hero__actions .btn,
    .gastronomy-hero__actions .btn,
    .ct-hero__actions .btn,
    .religious-hero__actions .btn,
    .history-hero__actions .btn,
    .customs-hero__actions .btn,
    .province-hero__actions .btn,
    .province-visitors-hero__actions .btn,
    .patron-hero__actions .btn,
    .th-hero__actions .btn {
        width: 100%;
    }

    /* Breadcrumbs compactos: el título ya comunica la página actual. */
    .news-breadcrumb,
    .province-breadcrumb,
    .province-visitors-breadcrumb,
    .patron-breadcrumb,
    .place-breadcrumb {
        gap: .4rem !important;
        margin-bottom: .9rem !important;
        font-size: .8rem !important;
        white-space: nowrap;
        overflow: hidden;
    }

    .news-breadcrumb > :last-child,
    .province-breadcrumb > :last-child,
    .province-visitors-breadcrumb > :last-child,
    .patron-breadcrumb > :last-child,
    .place-breadcrumb > :last-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Controles horizontales con gesto natural y posición estable. */
    .eco-filter-group,
    .beaches-filter-chips,
    .experience-filters,
    .history-timeline-nav,
    .rd-map-mobile-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: .55rem !important;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        padding: .2rem .15rem .65rem !important;
        scroll-padding-inline: .15rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    }

    .eco-filter-group::-webkit-scrollbar,
    .beaches-filter-chips::-webkit-scrollbar,
    .experience-filters::-webkit-scrollbar,
    .history-timeline-nav::-webkit-scrollbar,
    .rd-map-mobile-track::-webkit-scrollbar {
        display: none;
    }

    .eco-filter,
    .beaches-filter-chip,
    .experience-filter,
    .history-timeline-nav > *,
    .rd-map-mobile-card {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
    }

    /* Listados y filtros: menos introducción y más resultados visibles. */
    .events-filter-card,
    .news-filter-card,
    .beaches-filter-panel {
        padding: 1rem !important;
        border-radius: 20px !important;
    }

    .events-filter-card__intro p,
    .news-filter-card__header p,
    .beaches-filter-panel__head p {
        display: none;
    }

    .events-filter-grid,
    .news-filter-form {
        gap: .75rem !important;
    }

    .events-filter-actions,
    .news-filter-form__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .55rem !important;
    }

    .events-filter-actions .btn,
    .news-filter-form__actions .btn {
        width: 100%;
    }

    .events-card,
    .news-card,
    .beaches-card,
    .eco-destination-card,
    .province-publication-card {
        border-radius: 20px !important;
    }

    /* Tablas anchas: desplazamiento contenido y primera columna orientativa. */
    .distance-table-wrap,
    .table-responsive {
        position: relative;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    }

    .distance-table th:first-child,
    .distance-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 8px 0 14px rgba(15, 23, 42, .06);
    }

    /* Ritmo vertical coherente en páginas editoriales extensas. */
    .beaches-page main section,
    .ecotourism-page main section,
    .gastronomy-page main section,
    .cultural-tourism-page main section,
    .history-page main section,
    .customs-page main section,
    .religious-page main section,
    .tourism-history-page main section {
        padding-top: clamp(2rem, 7vw, 3rem);
        padding-bottom: clamp(2rem, 7vw, 3rem);
    }

    .history-timeline-layout {
        gap: 1rem !important;
    }

    .history-timeline-nav {
        position: static !important;
    }

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

    .footer-brand {
        margin-bottom: .25rem;
    }

    .footer-title {
        margin-bottom: .65rem;
        font-size: .9rem;
    }

    .footer-links {
        gap: .45rem;
        font-size: .88rem;
    }

    .site-footer__bottom {
        gap: .75rem;
        padding-top: 1rem;
    }
}

@media (max-width: 389.98px) {
    .site-brand__text small {
        display: none;
    }

    main h1 {
        font-size: clamp(1.85rem, 9vw, 2.35rem) !important;
    }

    #mobileExperiencesMenu .mobile-submenu-panel__inner {
        grid-template-columns: 1fr;
    }
}