/* ═══════════════════════════════════════════════════════════
   HOME — secciones en "filas editoriales" (index.php)
   Mockup del cliente: cada sección es una fila con presentación a la
   izquierda (nombre en dorado + bajada + "Ver todos ›") y tarjetas de
   foto con el texto encima a la derecha, separadas por filetes finos.
   Solo se carga en la portada (functions.php → is_front_page()).
   ═══════════════════════════════════════════════════════════ */

.tm-home-rows {
    --hr-intro:   250px;                 /* ancho de la columna de presentación */
    --hr-gap:     clamp(1.25rem, 2.5vw, 2.25rem);
    --hr-line:    #E9E3D8;               /* filete cálido entre filas */
    --hr-accent:  #8A6A2E;               /* dorado oscuro legible sobre blanco (AA) */
    --hr-ink:     #1A1814;
    --hr-radius:  2px;
    background: #F7F6F3;                 /* gris cálido muy claro, como el mockup */
    padding-block: .75rem 2.5rem;
}

/* ── Fila ───────────────────────────────────────────────── */
.tm-hrow {
    display: grid;
    grid-template-columns: var(--hr-intro) 1fr;
    gap: var(--hr-gap);
    align-items: stretch;
    padding-block: 1.25rem;
    border-top: 1px solid var(--hr-line);
}
.tm-home-rows .tm-container > :first-child { border-top: 0; }

/* ── Presentación ───────────────────────────────────────── */
.tm-hrow__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: .5rem;
}
.tm-hrow__title {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 400;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--hr-accent);
    margin-bottom: .875rem;
}
.tm-hrow__lead {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.45;
    color: var(--hr-ink);
    margin-bottom: 1.375rem;
}
/* Primera fila (Destinos): bajada grande, como en el mockup */
.tm-hrow--hero-lead .tm-hrow__lead { font-size: clamp(1.25rem, 1.65vw, 1.4375rem); line-height: 1.32; }
.tm-hrow__link {
    display: inline-block;
    line-height: 1.6;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hr-ink);
    transition: color var(--transition), gap var(--transition);
}
.tm-hrow__link span { display: inline-block; margin-left: .25rem; color: var(--hr-accent); font-size: .875rem; line-height: 1; transition: transform var(--transition); }
.tm-hrow__link:hover { color: var(--hr-accent); }
.tm-hrow__link:hover span { transform: translateX(3px); }

/* ── Grillas de tarjetas ────────────────────────────────── */
.tm-hrow__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
.tm-hrow__cards .tm-tile { aspect-ratio: 4 / 3.1; }
/* Proporciones por fila, como en el mockup */
.tm-hrow__cards--wide .tm-tile  { aspect-ratio: 3 / 2; }
.tm-hrow__cards--wider .tm-tile { aspect-ratio: 16 / 9.5; }
/* Fila con presentación angosta (Lifestyle, alineada con Experiencias) */
.tm-hrow--narrow { --hr-intro: 165px; }

/* Hoteles: destacado ancho + 3 verticales, todos del mismo alto */
.tm-hrow__cards--feature {
    grid-template-columns: 2.1fr 1fr 1fr 1fr;
    grid-auto-rows: clamp(220px, 20vw, 270px);
}
.tm-hrow__cards--feature .tm-tile { aspect-ratio: auto; }

/* Filas partidas (Experiencias | Movilidad, Privilegios | Insider) */
.tm-hsplit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--hr-line);
}
.tm-hrow--half {
    --hr-intro: 165px;
    gap: 1.25rem;
    border-top: 0;
}
.tm-hsplit > .tm-hrow--half + .tm-hrow--half {
    padding-left: var(--hr-gap);
    margin-left: var(--hr-gap);
    border-left: 1px solid var(--hr-line);
}
.tm-hrow__cards--tall { gap: .375rem; }
.tm-hrow__cards--tall .tm-tile { aspect-ratio: 3 / 5; }
.tm-hrow__cards--tall .tm-tile__body { padding: .75rem .625rem; }
.tm-hrow__cards--tall .tm-tile__title { font-size: .75rem; -webkit-line-clamp: 4; }

/* Destacado + lista (Movilidad, Insider) */
.tm-hrow__combo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    min-height: 240px;
}
.tm-hrow--half:last-child { --hr-intro: 150px; }
.tm-hrow__lines { display: flex; flex-direction: column; gap: .75rem; }

/* ── Tarjeta de foto ────────────────────────────────────── */
.tm-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--hr-radius);
    background: #151515;
    isolation: isolate;
}
.tm-tile__link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    color: var(--tm-white);
    text-decoration: none;
}
.tm-tile__link img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.tm-tile__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.86) 100%);
}
/* Filete dorado que crece al pasar el mouse */
.tm-tile__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--tm-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.tm-tile__body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1rem;
}
.tm-tile__kicker {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tm-gold-light);
}
.tm-tile__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.22;
    color: var(--tm-white);
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm-tile__sub { font-size: .6875rem; color: rgba(255,255,255,.75); }
.tm-tile__cta {
    margin-top: .25rem;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tm-white);
}
.tm-tile__cta span { color: var(--tm-gold); }

.tm-tile:hover .tm-tile__link img,
.tm-tile__link:focus-visible img { transform: scale(1.06); }
.tm-tile:hover .tm-tile__link::after,
.tm-tile__link:focus-visible::after { transform: scaleX(1); }
.tm-tile__link:focus-visible { outline: 2px solid var(--tm-gold); outline-offset: -2px; }

/* Favoritos/compartir: discretos, aparecen al pasar el mouse; siempre
   visibles en táctiles o si el post ya está en favoritos. */
.tm-tile .tm-card-actions { top: .5rem; right: .5rem; opacity: 0; transform: translateY(-4px); transition: opacity var(--transition), transform var(--transition); }
.tm-tile .tm-favorite-btn,
.tm-tile .tm-share-btn { width: 28px; height: 28px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tm-tile .tm-favorite-btn svg,
.tm-tile .tm-share-btn svg { width: 12px; height: 12px; }
.tm-tile .tm-favorite-btn.active { background: var(--tm-gold); }
.tm-tile:hover .tm-card-actions,
.tm-tile:focus-within .tm-card-actions,
.tm-tile .tm-card-actions:has(.tm-favorite-btn.active) { opacity: 1; transform: none; }
@media (hover: none) { .tm-tile .tm-card-actions { opacity: 1; transform: none; } }

/* Variantes */
/* Destacado de Hoteles: texto arriba a la izquierda, sobre degradé lateral */
.tm-tile--feature .tm-tile__link { justify-content: flex-start; }
.tm-tile--feature .tm-tile__link::before { background: linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%), linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 40%); }
.tm-tile--feature .tm-tile__body { padding: 1.5rem 1.75rem; max-width: 70%; }
.tm-tile--feature .tm-tile__title { font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1.12; }
.tm-hrow__cards--feature .tm-tile:not(.tm-tile--feature) .tm-tile__title { font-size: 1rem; }
.tm-tile--feature .tm-tile__sub { font-size: .8125rem; }
.tm-tile--fill { height: 100%; min-height: 220px; }
.tm-tile--fill .tm-tile__title { font-size: 1.0625rem; }

/* ── Fila de lista (miniatura + título) ─────────────────── */
.tm-hline {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: .625rem;
    align-items: center;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--hr-line);
    color: var(--hr-ink);
    text-decoration: none;
}
.tm-hline:last-child { border-bottom: 0; padding-bottom: 0; }
.tm-hline__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--hr-radius); background: #ddd; }
.tm-hline__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tm-hline__title {
    font-family: var(--font-display);
    font-size: .8125rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition);
}
.tm-hline:hover .tm-hline__title { color: var(--hr-accent); }
.tm-hline:hover .tm-hline__thumb img { transform: scale(1.08); }

/* Nota sin imagen destacada: fondo de marca + logo tenue (tm_render_image_placeholder).
   Va después de las reglas de .tm-tile/.tm-hline para ganarles en cascada. */
.tm-img-ph {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 90% at 20% 10%, rgba(201,168,106,.22) 0%, rgba(201,168,106,0) 60%),
        linear-gradient(160deg, #2A241C 0%, #151310 100%);
}
.tm-tile__link .tm-img-ph img,
.tm-hline__thumb .tm-img-ph img {
    position: static;
    width: 46%;
    max-width: 160px;
    height: auto;
    opacity: .3;
    object-fit: contain;
    transform: none;
}
.tm-hline__thumb { position: relative; }
.tm-hline__thumb .tm-img-ph { z-index: 0; }
.tm-hline__thumb .tm-img-ph img { width: 70%; }

/* ── Responsive ─────────────────────────────────────────── */
/* Las filas partidas pasan a filas completas */
@media (max-width: 1200px) {
    .tm-hsplit { grid-template-columns: 1fr; border-top: 0; }
    .tm-hrow--half,
    .tm-hrow--half:last-child { --hr-intro: 230px; gap: var(--hr-gap); border-top: 1px solid var(--hr-line); }
    .tm-hsplit > .tm-hrow--half + .tm-hrow--half { padding-left: 0; margin-left: 0; border-left: 0; }
    .tm-hrow__cards--tall .tm-tile { aspect-ratio: 3 / 4; }
}
@media (max-width: 1024px) {
    .tm-home-rows { --hr-intro: 190px; }
    .tm-hrow--half,
    .tm-hrow--half:last-child { --hr-intro: 190px; }
    .tm-hrow__lead { font-size: 1rem; }
}

/* Tablet chica y mobile: la presentación va arriba y las tarjetas pasan
   a un carrusel horizontal con scroll-snap (se desliza con el dedo). */
@media (max-width: 820px) {
    .tm-hrow,
    .tm-hrow--half { grid-template-columns: 1fr; gap: 1rem; padding-block: 1.75rem; }
    .tm-hrow__intro { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: end; }
    .tm-hrow__title { grid-column: 1 / -1; margin-bottom: .375rem; }
    .tm-hrow__lead { margin-bottom: 0; font-size: 1rem; }
    .tm-hrow__link { margin-top: 0; white-space: nowrap; }

    .tm-hrow__cards,
    .tm-hrow__cards--feature {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 68%;
        grid-auto-rows: auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--container-px) * -1);
        padding-inline: var(--container-px);
        scroll-padding-inline: var(--container-px);
    }
    .tm-hrow__cards::-webkit-scrollbar { display: none; }
    .tm-hrow__cards > .tm-tile { scroll-snap-align: start; }
    .tm-hrow__cards--feature .tm-tile { aspect-ratio: 4 / 5; }
    .tm-hrow__cards--feature .tm-tile--feature { grid-column: auto; }
    .tm-tile--feature .tm-tile__body { max-width: none; padding: 1.25rem; }
    .tm-tile--feature .tm-tile__title { font-size: 1.375rem; -webkit-line-clamp: 4; }
    .tm-hrow__cards--tall { grid-auto-columns: 44%; }
    .tm-hrow__cards--tall .tm-tile { aspect-ratio: 3 / 4.5; }

    .tm-hrow__combo { grid-template-columns: 1fr; min-height: 0; }
    .tm-tile--fill { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 480px) {
    .tm-hrow__cards,
    .tm-hrow__cards--feature { grid-auto-columns: 78%; }
    .tm-hrow__cards--tall { grid-auto-columns: 46%; }
    .tm-hrow__intro { grid-template-columns: 1fr; row-gap: .75rem; }
}

/* ── Pistas de "deslizá" (assets/js/home-sections.js) ──────
   El JS envuelve cada carrusel en .tm-hscroll y le pone
   .is-scrollable solo en mobile y si hay contenido fuera de pantalla. */
.tm-hscroll { position: relative; min-width: 0; }
.tm-hscroll__hint,
.tm-hscroll__bar { display: none; }

.tm-hscroll.is-scrollable .tm-hscroll__hint {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    position: absolute;
    /* Centrado en el alto de las tarjetas (arriba están favoritos/compartir,
       abajo el título); 1.375rem = mitad de la barra de progreso + su margen. */
    top: calc(50% - .6875rem);
    right: 0;
    z-index: 3;
    translate: 0 -50%;
    padding: .4rem .625rem .4rem .75rem;
    border-radius: 999px 0 0 999px;
    background: rgba(10,10,10,.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--tm-white);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
}
.tm-hscroll__hint svg { color: var(--tm-gold); animation: tm-hint-arrow 1.4s ease-in-out infinite; }
@keyframes tm-hint-arrow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
.tm-hscroll.is-touched .tm-hscroll__hint { opacity: 0; transform: translateX(12px); }

.tm-hscroll.is-scrollable .tm-hscroll__bar {
    display: block;
    position: relative;
    width: 96px;
    height: 2px;
    margin-top: .875rem;
    border-radius: 2px;
    background: var(--hr-line);
    overflow: hidden;
}
.tm-hscroll__bar span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--hr-accent);
    transition: transform .12s linear;
}

/* Empujoncito: las tarjetas se corren un poco y vuelven (una sola vez) */
.tm-hscroll.is-nudging .tm-hrow__cards > .tm-tile { animation: tm-cards-nudge 1.3s cubic-bezier(.45,0,.2,1) .15s; }
@keyframes tm-cards-nudge {
    0%, 100% { transform: translateX(0); }
    40%      { transform: translateX(-44px); }
    65%      { transform: translateX(-44px); }
}

@media (prefers-reduced-motion: reduce) {
    .tm-hscroll__hint svg { animation: none; }
    .tm-tile__link img,
    .tm-hline__thumb img { transition: none; }
    .tm-tile:hover .tm-tile__link img,
    .tm-hline:hover .tm-hline__thumb img { transform: none; }
}