/* ==========================================================================
   TEMA HORIZONTE — hijo de Sereno (tema.json > "padre"). Se carga después de neutro y sereno: acá va solo lo que
   cambia. Estilo sugerido: negro y blanco con un toque dorado, tipografía Contemporánea (Inter Tight), bordes rectos.
   ========================================================================== */

.tema-horizonte h1, .tema-horizonte h2, .tema-horizonte h3 { letter-spacing: -.03em; }
.tema-horizonte .seccion-titulo { font-size: clamp(1.8rem, 3vw, 2.5rem); }

/* ---------- Encabezado: en el inicio va transparente sobre la foto y se vuelve sólido al bajar ---------- */
.hz-logo--claro { display: none; }
.tema-horizonte .hz-header--portada { position: fixed; top: 0; left: 0; right: 0; }
.tema-horizonte .sereno-header.hz-header--portada:not(.is-scrolled) {
    background: transparent;
    --c-header-texto: #fff;
    --c-header-suave: rgba(255, 255, 255, .78);
    --c-header-borde: rgba(255, 255, 255, .22);
}
.tema-horizonte .hz-header--portada:not(.is-scrolled) .hz-logo--normal { display: none; }
.tema-horizonte .hz-header--portada:not(.is-scrolled) .hz-logo--claro { display: inline-flex; }
.tema-horizonte .hz-header--portada { transition: background .3s, box-shadow .3s; }
.tema-horizonte .sereno-header.hz-header--portada.is-scrolled:not(.is-oscuro) { background: #fff; }

/* ---------- Portada panorámica, contenido centrado ---------- */
.hz-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(580px, 88vh, 880px); padding: calc(var(--alto-header) + 2rem) 0 10rem; overflow: hidden; text-align: center; color: #fff; background: var(--c-oscuro); }
.hz-hero-velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .28) 35%, rgba(0, 0, 0, .35) 100%); }
.hz-hero-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hz-hero .sereno-eyebrow { color: rgba(255, 255, 255, .85); }
.hz-hero-titulo { color: #fff !important; font-size: clamp(2.6rem, 5.6vw, 4.8rem); font-weight: 400; line-height: 1.02; letter-spacing: -.04em; max-width: 12em; }
.hz-hero-titulo em { display: block; font-style: normal; }
.hz-hero-sub { margin-top: 1.25rem; max-width: 36em; font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, .9); }
.hz-hero-prop { position: absolute; z-index: 3; right: var(--gutter); top: calc(var(--alto-header) + 1.25rem); max-width: min(360px, 50%); display: inline-flex; align-items: center; gap: .45rem; color: rgba(255, 255, 255, .9); font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.hz-hero-prop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-hero-prop:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1321px) { .hz-hero-prop { right: calc((100% - var(--ancho)) / 2); } }
@media (max-width: 760px) { .hz-hero-prop { display: none; } }

/* ---------- Buscador: pestañas sobre la foto, tarjeta montada sobre el borde ---------- */
.hz-busqueda-wrap { position: relative; z-index: 5; margin-top: -8.75rem; }
.hz-tabs { display: flex; width: max-content; max-width: 100%; margin: 0 auto 1.4rem; padding: .3rem; background: rgba(15, 15, 15, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-x: auto; }
.hz-tab { flex: none; padding: .6rem 1.35rem; border: 0; background: none; color: rgba(255, 255, 255, .85); font-size: .92rem; font-weight: 500; }
.hz-tab:hover { color: #fff; }
.hz-tab.is-activa { background: rgba(255, 255, 255, .16); color: #fff; }
.hz-tarjeta { background: #fff; border: 1px solid var(--c-borde); padding: 1.5rem 1.75rem 1.75rem; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .4); }
.hz-campos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 1.1rem; align-items: end; }
.tema-horizonte .sereno-campo input, .tema-horizonte .sereno-campo .cs-boton { background: #fff; }
.hz-rapidos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem 1.75rem; margin-top: 1.4rem; font-size: .86rem; }
.hz-rapidos > a { display: inline-flex; align-items: center; gap: .3rem; color: var(--c-suave); border-bottom: 1px solid var(--c-borde-fuerte); padding-bottom: 1px; }
.hz-rapidos > a .ico { transform: rotate(-45deg); }
.hz-rapidos > a:hover { color: var(--c-texto); border-color: var(--c-texto); }
.hz-rapidos .sereno-ref { margin: 0; }
@media (max-width: 900px) { .hz-campos { grid-template-columns: 1fr 1fr; } .hz-campos .sereno-campo--zona, .hz-campos .sereno-busqueda-btn { grid-column: 1 / -1; } }
@media (max-width: 560px) { .hz-campos { grid-template-columns: 1fr; } .hz-tarjeta { padding: 1.25rem; } .hz-busqueda-wrap { margin-top: -7.5rem; } }

/* ---------- Tarjeta compacta en cuatro columnas ---------- */
.hz-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.75rem 1.4rem; }
@media (max-width: 1100px) { .hz-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .hz-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hz-grilla { grid-template-columns: 1fr; } }
.hz-card { background: transparent; border-radius: 0; }
.tema-horizonte .hz-card .card-prop-img { display: block; aspect-ratio: 4 / 3; border-radius: 0; }
.hz-card-op { position: absolute; left: .7rem; top: .7rem; background: var(--c-oscuro); color: var(--c-sobre-oscuro); font-size: .7rem; font-weight: 500; padding: .25rem .55rem; }
.hz-card-dest { position: absolute; left: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .25rem; background: #fff; color: var(--c-texto); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .5rem; }
.hz-card-dest .ico { color: var(--c-acento); }
.hz-card .fav-btn { top: .6rem; right: .6rem; width: 34px; height: 34px; box-shadow: none; }
.hz-card-cuerpo { padding-top: .95rem; }
.hz-card-arriba { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.hz-card-precio { font-family: var(--f-titulos); font-size: 1.28rem; font-weight: 500; letter-spacing: -.02em; color: var(--c-titulos); }
.hz-card-precio small { font-size: .78rem; font-weight: 400; color: var(--c-suave); letter-spacing: 0; }
.hz-card-ref { font-size: .7rem; color: var(--c-tenue); white-space: nowrap; }
.hz-card-zona { margin-top: .45rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-suave); }
.hz-card-titulo { margin-top: .35rem; font-family: var(--f-texto); font-size: .95rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--c-texto) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hz-card-titulo a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.hz-card-titulo a:focus-visible { outline: none; }
.hz-card-titulo a:focus-visible::after { outline: 3px solid rgba(var(--c-primario-rgb), .45); outline-offset: 4px; }
.hz-card:hover .hz-card-titulo { text-decoration: underline; text-underline-offset: 4px; }
.hz-card-datos { margin-top: .4rem; font-size: .8rem; color: var(--c-suave); }

.tema-horizonte .hz-carrusel .carrusel-pista { grid-auto-columns: calc((100% - 1.4rem * 3) / 4); gap: 1.4rem; }
@media (max-width: 1100px) { .tema-horizonte .hz-carrusel .carrusel-pista { grid-auto-columns: calc((100% - 1.4rem * 2) / 3); } }
@media (max-width: 820px) { .tema-horizonte .hz-carrusel .carrusel-pista { grid-auto-columns: 46%; } }
@media (max-width: 560px) { .tema-horizonte .hz-carrusel .carrusel-pista { grid-auto-columns: 82%; } }

/* ---------- Ficha ---------- */
.tema-horizonte .sereno-contacto { background: #fff; border-top: 3px solid var(--c-acento); }
.tema-horizonte .sereno-escenario { background: #ebebeb; }
.tema-horizonte .sereno-consulta { background: #f6f6f6; }
/* Listado Horizonte: encabezado centrado, buscador abierto (sin recuadro) y la grilla de cuatro columnas de tarjetas
   compactas. La cantidad de resultados va marcada, con una línea debajo, como encabezado de la lista. */
.tema-horizonte.vista-listado .listado-cab { text-align: center; }
.tema-horizonte.vista-listado .listado-cab .migas, .tema-horizonte.vista-listado .listado-cab-fila { justify-content: center; }
.tema-horizonte.vista-listado .listado-cab .segmentado { margin-inline: auto; }
@media (min-width: 1101px) { .tema-horizonte.vista-listado .filtros { border-top: 0; } }
.tema-horizonte.vista-listado .vista-barra { padding-bottom: 1rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--c-borde); }
.tema-horizonte.vista-listado .vista-barra > p { font-family: var(--f-titulos); font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; color: var(--c-titulos); }

/* Ficha Horizonte: como su portada. La foto va primero, panorámica de lado a lado; debajo, migas, título y precio
   centrados; cifras centradas con íconos de línea fina. (main en columna flex solo para poder reordenar.) */
.tema-horizonte.vista-ficha main { display: flex; flex-direction: column; }
.tema-horizonte.vista-ficha .sereno-ficha-galeria { order: -1; }
.tema-horizonte.vista-ficha .sereno-ficha-galeria .sereno-escenario { width: 100vw; margin-left: calc(50% - 50vw); height: clamp(320px, 66vh, 700px); border-radius: 0; }
.tema-horizonte.vista-ficha .sereno-ficha-galeria .sereno-escenario img { object-fit: cover; }
.tema-horizonte.vista-ficha .sereno-tira { justify-content: center; }
.tema-horizonte.vista-ficha .sereno-ficha-top { justify-content: center; flex-wrap: wrap; padding-top: 1.5rem; }
.tema-horizonte.vista-ficha .sereno-ficha-cab { flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding-top: 1rem; }
.tema-horizonte.vista-ficha .sereno-ficha-titulo { max-width: 22em; font-size: clamp(2rem, 4vw, 3.2rem); }
.tema-horizonte.vista-ficha .sereno-ficha-precio { text-align: center; }
.tema-horizonte.vista-ficha .sereno-ficha-precio p { color: var(--c-acento); }
.tema-horizonte.vista-ficha .sereno-indice { justify-content: center; border-top: 1px solid var(--c-borde); }
.tema-horizonte.vista-ficha .sereno-cifras { justify-content: space-around; text-align: center; }
.tema-horizonte.vista-ficha .ficha-bloque h2 { text-align: left; }
.tema-horizonte.vista-ficha .sereno-escenario-cuenta, .tema-horizonte.vista-ficha .sereno-escenario-ampliar { border-radius: 999px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
@media (max-width: 760px) {
    .tema-horizonte.vista-ficha .sereno-ficha-galeria .sereno-escenario { height: 72vw; }
    .tema-horizonte.vista-ficha .sereno-indice, .tema-horizonte.vista-ficha .sereno-tira { justify-content: flex-start; }
}

/* Buscador inteligente: el texto de ayuda arriba, en blanco sobre la foto (como las pestañas), y el campo montado sobre
   el borde de la foto (como la tarjeta del buscador de siempre); en modo clásico, el link flota sobre las pestañas */
.tema-horizonte .bi { display: flex; flex-direction: column-reverse; max-width: 860px; margin: 0 auto; padding-top: 4.3rem; }
.tema-horizonte .bi-form { border-radius: 0; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .45), 0 0 0 1px var(--c-borde); }
.tema-horizonte .bi-pie { margin: 0 0 .9rem; text-align: center; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.tema-horizonte .bi[data-modo="clasico"] { position: absolute; top: -2.6rem; left: 0; right: 0; padding-top: 0; }
.tema-horizonte .bi[data-modo="clasico"] .bi-pie { margin: 0; }
@media (max-width: 560px) { .tema-horizonte .bi { padding-top: 1.4rem; } }