/* estilos_adaptativos.css — TODAS las media queries del sitio (responsivo).
   Se carga después de estilos.css y estilos_a.css (inc.cabecera.php, hojas_estilo), así que estas
   reglas ganan a las de escritorio. No agregar @media en estilos.css.
   Orden: de mayor a menor ancho, para que el bloque más angosto sea siempre el último en aplicar.
   Tramos: ≤1700 / 1600 / 1500 / 1400 / 1320 / 1280 / 1260 escritorio chico (menú principal),
           ≤1200 laptop, ≤1120 menú móvil, ≤900 tablet, ≤640 / ≤600 celular. */
/* ── Escritorio: el menú principal se compacta ── */
@media(max-width:1700px) {
    .mlink {
        padding: 10px 20px;
        font-size: 13.6px;
    }
}

@media(max-width:1600px) {
    .mlink i {
        font-size: 19px;
    }

    .mlink b {
        font-size: 11.5px;
        letter-spacing: .12em;
    }
}

@media(max-width:1500px) {
    .mlink {
        padding: 12px 24px;
        font-size: 11.8px;
        letter-spacing: .04em;
    }

    .brand img {
        height: 74px;
    }
}

@media(max-width:1400px) {
    .mlink i {
        font-size: 17px;
    }

    .mlink b {
        font-size: 10.5px;
        letter-spacing: .1em;
    }

    .nav .in {
        height: 106px;
    }
}

@media(max-width:1320px) {
    .nav .in {
        height: 104px;
    }
}

@media(max-width:1280px) {
    .mlink {
        padding: 11px 18px;
        font-size: 11px;
        letter-spacing: .02em;
    }

    .brand img {
        height: 64px;
    }
}

@media(max-width:1260px) {
    .mlink i {
        font-size: 15.5px;
    }

    .mlink b {
        font-size: 9.8px;
    }
}

/* ── Laptop ── */
@media(max-width:1200px) {
    :root {
        --pad: 32px;
    }

    .strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: min(30vw, 260px);
    }

    .revs {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .booking {
        position: static;
    }

    .fmenu {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Menú móvil: la hamburguesa abre .menu como panel (JS en libs/javascript.js, "Menú móvil")
      y cada categoría se despliega al tocarla (.mitem.open). ── */
@media(max-width:1120px) {
    .burger {
        display: flex;
        cursor: pointer;
    }

    .nav .in {
        height: 88px;
    }

    .siteheader.stuck .nav .in {
        height: 78px;
    }

    .menu {
        display: none;
    }

    .siteheader.menu-open .menu {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 65;
        overflow-y: auto;
        padding: 6px var(--pad) 40px;
        background: #fff;
        box-shadow: inset 0 1px 0 var(--line);
        -webkit-overflow-scrolling: touch;
    }

    .siteheader.menu-open .mitem, .siteheader.menu-open .mitem:first-child {
        display: block;
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }

    .siteheader.menu-open .mlink, .siteheader.menu-open .mitem:hover .mlink {
        flex-direction: row;
        justify-content: flex-start;
        align-items: baseline;
        gap: 10px;
        width: 100%;
        padding: 18px 0;
        color: var(--ink);
        text-align: left;
        white-space: normal;
        transform: none;
    }

    .siteheader.menu-open .mlink i {
        font-size: 21px;
        text-shadow: none;
    }

    .siteheader.menu-open .mlink b {
        font-size: 11.5px;
        letter-spacing: .14em;
        color: var(--terra);
        opacity: 1;
        text-shadow: none;
    }

    /* flecha de la categoría: gira al abrir */
    .siteheader.menu-open .mlink::after {
        content: '';
        align-self: center;
        width: 8px;
        height: 8px;
        margin-left: auto;
        border-right: 2px solid var(--gray);
        border-bottom: 2px solid var(--gray);
        transform: rotate(45deg);
        transition: transform .2s;
    }

    .siteheader.menu-open .mitem.open .mlink::after {
        transform: rotate(-135deg);
    }

    .siteheader.menu-open .mdrop, .siteheader.menu-open .mitem:hover .mdrop {
        display: none;
        position: static;
        width: auto;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .siteheader.menu-open .mitem.open .mdrop {
        display: block;
    }

    .siteheader.menu-open .mdrop-in {
        padding: 0 0 14px;
        border-top: 0;
        box-shadow: none;
    }

    .siteheader.menu-open .mdrop-h {
        display: none;
    }

    .siteheader.menu-open .mdrop-2 ul {
        grid-template-columns: 1fr;
    }

    .siteheader.menu-open .mdrop li a {
        padding: 10px 4px;
    }
}

/* ── Tablet ── */
@media(max-width:900px) {
    :root {
        --pad: 22px;
    }

    /* barra superior: solo ciudad, idioma y redes; sin separadores huérfanos */
    .topbar .tb-left span:nth-child(n+2) {
        display: none;
    }

    .topbar .slink,
    .topbar .tb-right .sep:first-of-type {
        display: none;
    }

    .nav .in {
        height: 84px;
    }

    .brand img {
        height: 56px;
    }

    .hero {
        height: 88vh;
    }

    .head {
        flex-direction: column;
        align-items: flex-start;
        padding: 56px 0 26px;
    }

    .strip {
        grid-template-columns: repeat(2, 1fr);
    }

    /* con 5 categorías la última queda sola: ocupa el ancho completo */
    .strip .tile:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .tile {
        height: 260px;
    }

    .tourgrid,
    .vrow,
    .posts {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 3 videos o 3 posts en 2 columnas: el último impar ocupa el ancho completo */
    .vrow> :last-child:nth-child(odd),
    .posts> :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .ttile {
        aspect-ratio: 3/4;
    }

    .reels {
        grid-template-columns: repeat(3, 1fr);
    }

    .split {
        grid-template-columns: 1fr;
    }

    .split .imgside {
        min-height: 340px;
    }

    .split .txtside {
        padding: 56px var(--pad);
    }

    /* galería a 2 columnas: los bloques de 3 columnas pasan a 2 y dense rellena los huecos */
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 44vw;
        grid-auto-flow: dense;
    }

    .gallery .w3 {
        grid-column: span 2;
    }

    .factbar .in {
        grid-template-columns: repeat(3, 1fr);
    }

    .fact:nth-child(4) {
        border-left: 0;
        padding-left: 0;
    }

    .day {
        grid-template-columns: 1fr;
    }

    .incl {
        grid-template-columns: 1fr;
    }

    .cta {
        padding: 90px 0;
    }

    /* solo vertical: el lateral lo pone .pad (con padding: 32px 0 quedaba pegado a los bordes) */
    .news .in {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .news input {
        min-width: 0;
        flex: 1;
    }

    .fmenu {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
        padding: 48px 0 40px;
    }

    .fgrid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 48px 0 32px;
    }

    .fgrid>div:first-child {
        grid-column: 1 / -1;
    }

    .flogo {
        height: 74px;
    }

    #v-tours,
    #v-blog {
        padding-top: 122px;
    }
}

/* ── Celular ── */
@media(max-width:640px) {
    .bk-panel {
        padding: 38px 22px 28px;
    }

    .bk-form {
        grid-template-columns: 1fr;
    }
}

@media(max-width:600px) {
    .tile {
        height: 200px;
    }

    .tile .t {
        padding: 18px;
    }

    .tile .t b {
        font-size: 21px;
    }

    .tourgrid, .vrow, .posts, .revs,
    .features {
        grid-template-columns: 1fr;
    }

    .ttile .t {
        padding: 22px;
    }

    .split .imgside {
        min-height: 260px;
    }

    .split .txtside {
        padding: 44px var(--pad);
    }

    .bigvideo {
        height: 70vh;
        min-height: 420px;
    }

    .bigvideo .play {
        width: 80px;
        height: 80px;
    }

    .cta {
        padding: 72px 0;
    }

    .cta p {
        font-size: 16px;
    }

    .news .form .btn {
        width: 100%;
    }

    .fmenu {
        grid-template-columns: 1fr;
    }

    .fgrid {
        grid-template-columns: 1fr;
    }

    .fbot {
        flex-direction: column;
        gap: 6px;
    }

    .wa {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }
}