/* ═══════════════════════════════════════════════════════════
   MEGA-MENÚ — Destinos exclusivos (header.php)
   Panel marfil centrado bajo el header (contraste con el header negro,
   tono cálido que armoniza con el dorado), con columna editorial de
   tipos de viaje y grilla de regiones en tarjetas de imagen.
   Solo desktop: bajo 1341px el menú pasa a hamburguesa y el panel
   se oculta (.tm-nav--open .tm-mega-menu en style.css).
   ═══════════════════════════════════════════════════════════ */

/* El ítem deja de ser el ancla: el panel se posiciona contra
   .tm-header__inner (position:relative) y queda centrado en pantalla,
   sin importar dónde cae "Destinos Exclusivos" en el menú. Como el
   panel sigue siendo hijo del <li>, el :hover no se corta al bajar. */
.tm-nav__item--mega { position: static; }

.tm-nav__item--mega > .tm-nav__link svg { transition: transform var(--transition); }
.tm-nav__item--mega:hover > .tm-nav__link svg,
.tm-nav__item--mega:focus-within > .tm-nav__link svg { transform: rotate(180deg); }

.tm-mega-menu {
    --mm-radius: 10px;
    /* Paleta del panel — cambiar acá para ajustar el tono */
    --mm-bg:        #FBF8F3;              /* marfil cálido */
    --mm-bg-2:      #F6F0E6;
    --mm-side:      #F2EBDF;              /* columna izquierda, un punto más profunda */
    --mm-ink:       #161412;              /* títulos */
    --mm-ink-soft:  #3F3A34;              /* links */
    --mm-muted:     #6E675D;              /* etiquetas (AA sobre marfil) */
    --mm-line:      rgba(22,20,18,.09);
    --mm-accent:    #8A6A2E;              /* dorado oscuro para texto (AA sobre marfil) */
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 999;
    width: min(1120px, calc(100vw - 2.5rem));
    color: var(--mm-ink-soft);
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(201,168,106,.10), transparent 65%),
        linear-gradient(180deg, var(--mm-bg) 0%, var(--mm-bg-2) 100%);
    border: 1px solid rgba(201,168,106,.25);
    border-top: 0;
    border-radius: 0 0 var(--mm-radius) var(--mm-radius);
    box-shadow: 0 34px 70px -18px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.18);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px);
    /* Al cerrar espera un instante: si el mouse se escapa un pixel del
       panel no se cierra de golpe. */
    transition: opacity .25s ease .12s, transform .3s cubic-bezier(.2,.7,.2,1) .12s, visibility 0s linear .42s;
}
/* Filete dorado superior que se desvanece hacia los costados */
.tm-mega-menu::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tm-gold) 25%, var(--tm-gold) 75%, transparent);
}
.tm-nav__item--mega:hover .tm-mega-menu,
.tm-nav__item--mega:focus-within .tm-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s;
}

.tm-mega-menu__inner {
    display: grid;
    grid-template-columns: 250px 1fr;
}

/* ── Columna editorial: tipos de viaje ───────────────────── */
.tm-mega-menu__side {
    padding: 2rem 1.75rem 2rem 2rem;
    background: var(--mm-side);
    border-right: 1px solid var(--mm-line);
}
.tm-mega-menu__eyebrow {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mm-accent);
    margin-bottom: .75rem;
}
.tm-mega-menu__lead {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.3;
    color: var(--mm-ink);
    margin-bottom: 1.75rem;
}
.tm-mega-menu__label {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .575rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mm-muted);
    margin-bottom: .75rem;
}
.tm-mega-menu__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mm-line);
}
.tm-mega-menu__types { list-style: none; }
.tm-mega-menu__type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .625rem 0;
    font-size: .8125rem;
    color: var(--mm-ink-soft);
    border-bottom: 1px solid var(--mm-line);
    transition: color var(--transition), padding var(--transition);
}
.tm-mega-menu__type svg {
    flex-shrink: 0;
    color: var(--mm-accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--transition), transform var(--transition);
}
.tm-mega-menu__type:hover,
.tm-mega-menu__type:focus-visible {
    color: var(--mm-accent);
    padding-left: .375rem;
}
.tm-mega-menu__type:hover svg,
.tm-mega-menu__type:focus-visible svg { opacity: 1; transform: none; }

/* ── Grilla de regiones ─────────────────────────────────── */
.tm-mega-menu__main { padding: 2rem; }
.tm-mega-menu__regions {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem;
}
.tm-mega-menu__regions > li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}
/* Entrada en cascada: cada tarjeta con un pequeño retraso (--i en header.php) */
.tm-nav__item--mega:hover .tm-mega-menu__regions > li,
.tm-nav__item--mega:focus-within .tm-mega-menu__regions > li {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease calc(.08s + var(--i, 0) * .035s),
                transform .5s cubic-bezier(.2,.7,.2,1) calc(.08s + var(--i, 0) * .035s);
}

.tm-mega-menu__region {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #1a1a1a;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,.35);
    isolation: isolate;
    transition: box-shadow .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.tm-mega-menu__region img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease;
    filter: saturate(.9) brightness(.92);
}
/* Degradé para que el nombre se lea sobre cualquier foto */
.tm-mega-menu__region::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.88) 100%);
    transition: background .4s ease;
}
/* Línea dorada que crece desde la izquierda al pasar el mouse */
.tm-mega-menu__region::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--tm-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.tm-mega-menu__region-body {
    display: flex;
    flex-direction: column;
    padding: .875rem .875rem 1rem;
}
.tm-mega-menu__region-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tm-white);
    transition: color var(--transition);
}
.tm-mega-menu__region-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    font-size: .6875rem;
    line-height: 1.45;
    color: rgba(255,255,255,.75);
    opacity: 0;
    transition: max-height .4s ease, opacity .3s ease, margin-top .4s ease;
}
.tm-mega-menu__region:hover img,
.tm-mega-menu__region:focus-visible img { transform: scale(1.1); filter: saturate(1.05) brightness(1); }
.tm-mega-menu__region:hover,
.tm-mega-menu__region:focus-visible { box-shadow: 0 16px 30px -12px rgba(0,0,0,.45); transform: translateY(-3px); }
.tm-mega-menu__region:hover::after,
.tm-mega-menu__region:focus-visible::after { transform: scaleX(1); }
.tm-mega-menu__region:hover .tm-mega-menu__region-name,
.tm-mega-menu__region:focus-visible .tm-mega-menu__region-name { color: var(--tm-gold-light); }
.tm-mega-menu__region:hover .tm-mega-menu__region-desc,
.tm-mega-menu__region:focus-visible .tm-mega-menu__region-desc { max-height: 2.5rem; margin-top: .25rem; opacity: 1; }
.tm-mega-menu__region:focus-visible { outline: 1px solid var(--mm-accent); outline-offset: 3px; }

/* Última tarjeta: "Ver todos los destinos" */
.tm-mega-menu__region--all {
    align-items: flex-start;
    gap: .5rem;
    padding: 1rem;
    background: linear-gradient(160deg, rgba(201,168,106,.22), rgba(201,168,106,.06));
    border: 1px solid rgba(138,106,46,.3);
    box-shadow: none;
}
.tm-mega-menu__region--all::before { display: none; }
.tm-mega-menu__region--all .tm-mega-menu__region-name { color: var(--mm-ink); }
.tm-mega-menu__all-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: auto;
    border: 1px solid rgba(138,106,46,.45);
    border-radius: 50%;
    color: var(--mm-accent);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.tm-mega-menu__all-count {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mm-accent);
}
.tm-mega-menu__region--all:hover { border-color: var(--mm-accent); background: linear-gradient(160deg, rgba(201,168,106,.32), rgba(201,168,106,.1)); box-shadow: 0 16px 30px -14px rgba(138,106,46,.45); }
.tm-mega-menu__region--all:hover .tm-mega-menu__region-name { color: var(--mm-ink); }
.tm-mega-menu__region--all:hover .tm-mega-menu__all-icon { background: var(--tm-gold); color: #000; transform: translateX(3px); }

/* Pantallas justas (1341–1480px): panel y tarjetas un poco más compactos */
@media (max-width: 1480px) {
    .tm-mega-menu__inner { grid-template-columns: 236px 1fr; }
    .tm-mega-menu__side { padding: 1.75rem 1.5rem; }
    .tm-mega-menu__main { padding: 1.75rem; }
    .tm-mega-menu__region-name { font-size: .9375rem; }
}

/* Sin animaciones: el panel y las tarjetas aparecen directo, sin desplazamiento */
@media (prefers-reduced-motion: reduce) {
    .tm-mega-menu,
    .tm-nav__item--mega:hover .tm-mega-menu,
    .tm-nav__item--mega:focus-within .tm-mega-menu { transform: translate(-50%, 0); transition: none; }
    .tm-mega-menu__regions > li,
    .tm-nav__item--mega:hover .tm-mega-menu__regions > li,
    .tm-nav__item--mega:focus-within .tm-mega-menu__regions > li { opacity: 1; transform: none; transition: none; }
    .tm-mega-menu__region img { transition: none; }
}