/* Página de hoteles por fecha especial — Nochevieja, Navidad, San Valentín, Semana Santa, puentes.
   Diseño aprobado en Claude Design, «Nochevieja 109 Hoteles»: la zona es el filtro y el hotel se
   compara dentro de ella, en vez de cuatro listas planas seguidas.

   Tokens del sistema (css/home-v2.css): no se inventan colores, fuentes, radios ni sombras. */

* { box-sizing: border-box; }

:root {
    --hfe-naranja: #ff7300;
    --hfe-naranja-hover: #ff8419;
    --hfe-naranja-claro: #ffb066;
    --hfe-crema: #fff4ec;
    --hfe-crema-banda: #fff7f0;
    --hfe-crema-borde: #ffd6b3;
    --hfe-negro: #111;
    --hfe-tinta: #1f2933;
    --hfe-texto: #52606d;
    --hfe-apagado: #8a97a3;
    --hfe-linea: #e6e9ec;
    --hfe-filete: #eef1f4;
    --hfe-fondo: #f7f8f9;
    --hfe-foto: #eef1f3;
}

/* El ancho útil es el mismo que el de las fichas de circuito rediseñadas (`.kvf-cols`, 1272 px
   dentro de un wrap de 1320), para que la web no cambie de anchura al pasar de una a otra. Antes
   esto era `max-width:1180` MÁS 130 de padding, o sea 920 de contenido: con seis columnas, cada
   tarjeta de zona quedaba en 140 px y «Comunidad Valenciana · desde 195 €» se partía en cuatro
   líneas. */
.hfe-caja { width: 100%; max-width: 1368px; margin: 0 auto; padding: 0 64px; }

/* Las migas van al ancho EXACTO del menú del sitio (1140 px en este layout), como en las fichas de
   circuito. El resto del contenido es más ancho y sobresale ~50 px por lado, igual que el mosaico
   de la ficha: sobresalir 130, que es lo que pasaba antes, se nota y queda raro. */
.hfe-migas .hfe-caja { max-width: 1268px; }

.hfe-sec { padding: 56px 0 0; background: #fff; }
.hfe-sec:last-of-type { padding-bottom: 56px; }

/* Cada sección se abre igual: antetítulo, titular centrado y subtítulo. Nunca un icono al lado
   del titular, nunca mayúsculas forzadas. */
.hfe-sec-cab { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.hfe-sec-cab h2 {
    margin: 0 0 12px; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif;
    font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; color: var(--hfe-tinta);
}
.hfe-sec-cab p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--hfe-texto); }
.hfe-ante {
    display: block; font-weight: 700; font-size: 11.5px; line-height: 1; letter-spacing: .11em;
    text-transform: uppercase; color: var(--hfe-naranja); margin-bottom: 14px;
}

/* ── 2 · Migas ───────────────────────────────────────────────────────── */
.hfe-migas { background: var(--hfe-fondo); border-bottom: 1px solid var(--hfe-linea); padding: 11px 0; }
.hfe-migas .hfe-caja { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-weight: 600; font-size: 12.5px; color: var(--hfe-apagado); }
.hfe-migas a { color: var(--hfe-apagado); text-decoration: none; }
.hfe-migas a:hover { color: var(--hfe-naranja); }
.hfe-migas i { font-size: 8px; color: #c6cdd3; }
.hfe-migas > .hfe-caja > span:last-child { color: var(--hfe-tinta); }

/* ── 3 · Hero ────────────────────────────────────────────────────────── */
.hfe-hero { position: relative; height: 430px; overflow: hidden; background: #222; }
.hfe-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hfe-hero-velo { position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.62)); }
.hfe-hero-txt {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 0 64px; text-align: center; color: #fff;
}
.hfe-ante-claro {
    display: block; font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .13em;
    text-transform: uppercase; color: var(--hfe-naranja-claro); margin-bottom: 16px;
}
.hfe-hero-txt h1 {
    margin: 0 0 14px; max-width: 22ch; color: #fff;
    font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700; font-size: 40px;
    line-height: 1.14; letter-spacing: -.01em; text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.hfe-hero-txt p { margin: 0 0 26px; max-width: 58ch; font-size: 16.5px; line-height: 1.6; color: #fff; }
.hfe-hero-txt p b { font-weight: 700; }
.hfe-hero-zonas { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 820px; }
.hfe-hero-zonas a {
    border: 1px solid rgba(255,255,255,.6); border-radius: 999px; min-height: 40px;
    display: flex; align-items: center; padding: 0 17px; font-weight: 600; font-size: 13.5px;
    color: #fff; text-decoration: none;
}
.hfe-hero-zonas a:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ── Tarjeta de hotel ────────────────────────────────────────────────────
   Columna flex con la foto de alto fijo arriba y el enlace pegado abajo con `margin-top:auto`:
   un nombre de dos líneas no descuadra la fila. */
.hfe-hoteles { display: grid; gap: 18px; }
.hfe-hoteles-4 { grid-template-columns: repeat(4, 1fr); }
.hfe-hoteles-3 { grid-template-columns: repeat(3, 1fr); }

.hfe-hotel {
    display: flex; flex-direction: column; border: 1px solid var(--hfe-linea); border-radius: 14px;
    overflow: hidden; background: #fff; color: inherit; text-decoration: none;
    transition: box-shadow .16s ease, transform .16s ease;
}
.hfe-hotel:hover, .hfe-hotel:focus-visible {
    box-shadow: 0 10px 26px rgba(17,24,39,.12); transform: translateY(-2px); color: inherit;
}
/* Cuando la foto falla, el marco se queda en gris y la tarjeta conserva su altura */
.hfe-hotel-foto { position: relative; display: block; height: 150px; background: var(--hfe-foto); overflow: hidden; }
.hfe-hotel-foto img { width: 100%; height: 100%; object-fit: cover; }
.hfe-hotel-etiqueta {
    position: absolute; left: 10px; top: 10px; background: #fff; border-radius: 999px;
    padding: 4px 9px; font-weight: 700; font-size: 10px; line-height: 1; letter-spacing: .06em;
    text-transform: uppercase; color: var(--hfe-tinta);
}
.hfe-hotel-cinta {
    position: absolute; right: 0; bottom: 12px; background: var(--hfe-naranja); color: #fff;
    border-radius: 6px 0 0 6px; padding: 5px 11px; text-align: right;
}
.hfe-hotel-cinta > span { display: block; font-weight: 600; font-size: 9.5px; line-height: 1; opacity: .9; }
.hfe-hotel-cinta b {
    display: block; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 17px; line-height: 1.1;
}
.hfe-hotel-datos { flex: 1; display: flex; flex-direction: column; padding: 13px 15px 15px; }
.hfe-hotel-ante {
    display: block; font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .05em;
    text-transform: uppercase; color: var(--hfe-apagado); margin-bottom: 6px;
}
.hfe-estrellas { color: var(--hfe-naranja); letter-spacing: 0; }
.hfe-hotel-nombre {
    display: block; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 15.5px; line-height: 1.32; color: var(--hfe-tinta);
}
.hfe-hotel-linea {
    display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--hfe-filete); font-size: 12.5px; color: var(--hfe-texto);
}
.hfe-hotel-linea > span { display: flex; align-items: center; gap: 6px; }
.hfe-hotel-linea i { font-size: 10px; color: var(--hfe-apagado); }
.hfe-hotel-linea .hfe-si { color: var(--hfe-tinta); }
.hfe-hotel-linea .hfe-si i { color: var(--hfe-naranja); }
.hfe-filete { width: 1px; height: 12px; background: var(--hfe-linea); }
/* El precio, explicado: «635 €» a secas asusta si no se dice que son dos noches por persona */
.hfe-hotel-pie { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--hfe-apagado); }
.hfe-hotel-ver {
    display: block; margin-top: auto; padding-top: 13px; font-weight: 600; font-size: 13px;
    color: var(--hfe-naranja);
}

/* ── 5 · Zonas: filas exactas de seis ────────────────────────────────── */
.hfe-zonas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.hfe-zona {
    position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--hfe-foto);
    aspect-ratio: 4 / 3; text-decoration: none;
}
.hfe-zona img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s ease; }
.hfe-zona:hover img { transform: scale(1.04); }
.hfe-zona-velo { position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.74)); }
.hfe-zona-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 13px; display: block; }
.hfe-zona-txt b {
    display: block; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 13.5px; line-height: 1.25; color: #fff;
}
.hfe-zona-txt > span { display: block; margin-top: 3px; font-weight: 600; font-size: 11.5px; color: #fff; }
.hfe-zona-desde { color: var(--hfe-naranja-claro); }
/* La zona sin foto usa la misma tarjeta con fondo gris: una foto que falta no deja hueco */
.hfe-zona.es-sinfoto { background: var(--hfe-fondo); border: 1px solid var(--hfe-linea); }
.hfe-zona.es-sinfoto .hfe-zona-txt b { color: var(--hfe-tinta); }
.hfe-zona.es-sinfoto .hfe-zona-txt > span { color: var(--hfe-apagado); }
.hfe-zona.es-sinfoto .hfe-zona-desde { color: var(--hfe-naranja); }

/* ── 6.1 · Ordenar y filtrar: se queda arriba al bajar ───────────────── */
.hfe-chips {
    position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--hfe-linea);
    padding: 12px 0 13px; display: flex; align-items: center; justify-content: center; gap: 9px;
    flex-wrap: wrap;
}
.hfe-chips-tit { font-weight: 600; font-size: 12.5px; color: var(--hfe-apagado); margin-right: 4px; }
.hfe-chip {
    border: 1px solid var(--hfe-linea); background: #fff; border-radius: 999px; min-height: 38px;
    display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font-weight: 600;
    font-size: 12.5px; color: var(--hfe-texto); cursor: pointer;
}
.hfe-chip i { font-size: 11px; color: var(--hfe-naranja); }
.hfe-chip.on { background: var(--hfe-tinta); border-color: var(--hfe-tinta); color: #fff; }
.hfe-chip.on i { color: #fff; }
.hfe-chips-sep { width: 1px; height: 22px; background: var(--hfe-linea); margin: 0 6px; }

/* ── 6.2 · Acordeón por zona ─────────────────────────────────────────── */
.hfe-grupos { margin-top: 22px; display: grid; gap: 14px; }
.hfe-grupo { border: 1px solid var(--hfe-linea); border-radius: 14px; background: #fff; }
.hfe-grupo > summary {
    display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none;
}
.hfe-grupo > summary::-webkit-details-marker { display: none; }
.hfe-grupo-txt { flex: 1; }
.hfe-grupo-txt h3 {
    margin: 0; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 19px; line-height: 1.25; color: var(--hfe-tinta);
}
.hfe-grupo-txt h3 a { color: inherit; text-decoration: none; }
.hfe-grupo-txt h3 a:hover { color: var(--hfe-naranja); }
.hfe-grupo-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--hfe-apagado); }
.hfe-grupo-sub b { font-weight: 700; color: var(--hfe-naranja); }
.hfe-grupo > summary > i { flex: none; font-size: 12px; color: var(--hfe-texto); transition: transform .18s ease; }
.hfe-grupo[open] > summary > i { transform: rotate(180deg); }
.hfe-grupo-cuerpo { padding: 0 22px 22px; }
.hfe-mas-oculto[hidden] { display: none; }
.hfe-vermas {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    margin-top: 18px; border: 1px solid var(--hfe-naranja); background: #fff; border-radius: 999px;
    min-height: 46px; font-weight: 700; font-size: 13.5px; color: var(--hfe-naranja); cursor: pointer;
}
.hfe-vermas:hover { background: var(--hfe-crema); }
.hfe-vermas i { font-size: 11px; }

/* ── 7 · Paradores, en banda oscura ──────────────────────────────────────
   Todo el texto sobre el negro va a opacidad plena: nunca blanco al 70 %. */
.hfe-paradores { position: relative; margin-top: 56px; padding: 56px 0; background: var(--hfe-negro); overflow: hidden; }
.hfe-paradores > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.hfe-paradores .hfe-caja { position: relative; }
.hfe-sec-cab-oscura h2 { color: #fff; }
.hfe-sec-cab-oscura p { color: #fff; }
.hfe-argumentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 28px; }
.hfe-argumentos span {
    display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    font-size: 13.5px; line-height: 1.45; color: #fff;
}
.hfe-argumentos i { flex: none; font-size: 14px; color: var(--hfe-naranja-claro); }
.hfe-paradores-pie { display: flex; justify-content: center; margin-top: 28px; }

.hfe-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--hfe-naranja); color: #fff; border: 1px solid var(--hfe-naranja);
    border-radius: 999px; min-height: 46px; padding: 0 26px; font-weight: 700; font-size: 14px;
    text-decoration: none;
}
.hfe-btn:hover { background: var(--hfe-naranja-hover); border-color: var(--hfe-naranja-hover); color: #fff; }
.hfe-btn i { font-size: 11px; }
.hfe-btn-out {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 1px solid var(--hfe-naranja); background: #fff; border-radius: 999px; min-height: 46px;
    padding: 0 22px; font-weight: 700; font-size: 13.5px; color: var(--hfe-naranja); cursor: pointer;
    text-decoration: none;
}
.hfe-btn-out:hover { background: var(--hfe-crema); color: var(--hfe-naranja); }
/* El botón del hero es solo para móvil: en escritorio están las pastillas de zona */
.hfe-hero-btn { display: none; }

/* ── 8 · Banda del 50 % ──────────────────────────────────────────────────
   Sobre la crema el naranja no llega a 4,5:1, así que el texto va en tinta y el naranja se
   queda en el icono. */
.hfe-sec-banda { padding-top: 34px; }
.hfe-banda {
    background: var(--hfe-crema-banda); border-radius: 14px; padding: 26px 30px; display: flex;
    align-items: center; gap: 22px;
}
.hfe-banda-icono {
    flex: none; width: 56px; height: 56px; border-radius: 999px; background: var(--hfe-naranja);
    color: #fff; display: grid; place-items: center; font-size: 20px;
}
.hfe-banda-txt { flex: 1; }
.hfe-banda-txt b {
    display: block; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 19px; line-height: 1.3; color: var(--hfe-tinta);
}
.hfe-banda-txt > span { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.6; color: var(--hfe-texto); }

/* ── 9 · La guía: dos columnas, y la foto NO flotada dentro del texto ────
   Con `float` los primeros párrafos salían a cuarenta caracteres y los siguientes largos, y el
   pliegue cortaba a mitad de un titular. Con rejilla, cada cosa en su columna. */
.hfe-guia { background: var(--hfe-fondo); border-top: 1px solid var(--hfe-linea); padding: 56px 0; margin-top: 56px; }
.hfe-guia-rejilla { display: grid; grid-template-columns: 400px 1fr; gap: 0 80px; align-items: start; }
.hfe-guia-lado { position: sticky; top: 24px; }
.hfe-guia-foto { margin: 0 0 22px; }
.hfe-guia-foto img { width: 100%; height: auto; border-radius: 12px; background: var(--hfe-foto); display: block; }
.hfe-guia-lado h2 {
    margin: 0 0 12px; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 30px; line-height: 1.2; letter-spacing: -.01em; color: var(--hfe-tinta);
}
.hfe-guia-entradilla { margin: 0; max-width: 32ch; font-size: 15px; line-height: 1.6; color: var(--hfe-texto); }
.hfe-cifras { margin: 22px 0 0; padding: 18px 0 0; border-top: 2px solid var(--hfe-negro); }
.hfe-cifras > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-bottom: 1px solid var(--hfe-linea);
}
.hfe-cifras > div:last-child { border-bottom: 0; }
.hfe-cifras dt { font-size: 13.5px; color: var(--hfe-texto); }
.hfe-cifras dd {
    margin: 0; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 19px; color: var(--hfe-tinta);
}
.hfe-cifras .es-destacada dd { color: var(--hfe-naranja); }

.hfe-guia-col { min-width: 0; }
/* Una sola columna de 68ch: nada de `column-count`, que con la altura recortada reparte el
   contenido a su criterio y el texto desaparece. */
.hfe-guia-txt {
    position: relative; max-width: 68ch; max-height: 520px; overflow: hidden;
    font-size: 15.5px; line-height: 1.75; color: var(--hfe-texto);
}
.hfe-guia-txt::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; pointer-events: none;
    background: linear-gradient(180deg, rgba(247,248,249,0), rgba(247,248,249,.72) 58%, var(--hfe-fondo));
}
.hfe-guia-txt.es-abierta { max-height: none; }
.hfe-guia-txt.es-abierta::after { display: none; }
.hfe-guia-txt h2, .hfe-guia-txt h3, .hfe-guia-txt h4 {
    font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700; color: var(--hfe-tinta);
    margin: 30px 0 12px; line-height: 1.3;
}
.hfe-guia-txt h3 { font-size: 21px; }
.hfe-guia-txt h4 { font-size: 18px; }
.hfe-guia-txt > *:first-child { margin-top: 0; }
.hfe-guia-txt p { margin: 0 0 18px; }
.hfe-guia-txt a { color: #1d83a7; }
.hfe-guia-txt a:hover { color: var(--hfe-naranja); }
/* El botón, debajo del bloque plegado y en su propia línea: nunca sobre el degradado */
.hfe-guia-btn { margin-top: 20px; }

/* ── 10 · Preguntas frecuentes ───────────────────────────────────────── */
.hfe-faq-rejilla { display: grid; grid-template-columns: 340px 1fr; gap: 0 60px; align-items: start; }
.hfe-faq-lado h2 {
    margin: 0 0 12px; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 30px; line-height: 1.2; letter-spacing: -.01em; color: var(--hfe-tinta);
}
.hfe-faq-lado p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--hfe-texto); }
.hfe-faq-tel { margin-top: 20px; padding-top: 18px; border-top: 2px solid var(--hfe-negro); }
.hfe-faq-tel span { display: block; font-size: 12.5px; color: var(--hfe-apagado); margin-bottom: 4px; }
.hfe-faq-tel a {
    font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700; font-size: 21px;
    color: var(--hfe-tinta); text-decoration: none;
}
.hfe-faq-tel a:hover { color: var(--hfe-naranja); }
.hfe-faq-lista { display: grid; gap: 10px; min-width: 0; }
.hfe-faq-item { border-bottom: 1px solid var(--hfe-linea); padding-bottom: 10px; }
.hfe-faq-item > summary {
    display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none; padding: 8px 0;
}
.hfe-faq-item > summary::-webkit-details-marker { display: none; }
.hfe-faq-item h3 {
    flex: 1; margin: 0; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 17px; line-height: 1.35; color: var(--hfe-tinta);
}
.hfe-faq-mas {
    flex: none; width: 30px; height: 30px; border: 1px solid var(--hfe-linea); border-radius: 999px;
    display: grid; place-items: center; color: var(--hfe-texto); transition: transform .18s ease;
}
.hfe-faq-mas i { font-size: 10px; }
.hfe-faq-item[open] .hfe-faq-mas { transform: rotate(180deg); border-color: var(--hfe-naranja); color: var(--hfe-naranja); }
.hfe-faq-item p { margin: 0 0 10px; max-width: 64ch; font-size: 14.5px; line-height: 1.7; color: var(--hfe-texto); }

/* ── 11 · Otras fechas ───────────────────────────────────────────────── */
.hfe-otras-caja { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hfe-filete); }
.hfe-otras-caja > b {
    display: block; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 14.5px; line-height: 1.3; color: var(--hfe-tinta); margin-bottom: 12px;
}
.hfe-otras { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hfe-otras a {
    display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hfe-linea);
    border-radius: 999px; min-height: 44px; padding: 0 16px; font-weight: 600; font-size: 13.5px;
    color: var(--hfe-tinta); background: #fff; text-decoration: none;
}
.hfe-otras a:hover { border-color: var(--hfe-naranja); color: var(--hfe-naranja); }
.hfe-otras a span { font-weight: 400; color: var(--hfe-apagado); }
.hfe-otras-todas { font-weight: 700; color: var(--hfe-naranja) !important; }

/* ── 12 · Qué incluye ────────────────────────────────────────────────── */
.hfe-incluye { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hfe-incluye-item {
    background: #fff; border: 1px solid var(--hfe-linea); border-radius: 12px; padding: 16px;
    display: flex; gap: 14px; align-items: flex-start;
}
.hfe-incluye-item.es-primero { background: var(--hfe-crema); border-color: var(--hfe-crema-borde); }
.hfe-incluye-icono {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px;
    background: var(--hfe-crema); color: var(--hfe-naranja); font-size: 15px;
}
.hfe-incluye-item.es-primero .hfe-incluye-icono { background: var(--hfe-naranja); color: #fff; }
.hfe-incluye-txt { flex: 1; }
.hfe-incluye-txt b {
    display: block; font-family: 'Poppins', 'Open Sans', system-ui, sans-serif; font-weight: 700;
    font-size: 15px; line-height: 1.35; color: var(--hfe-tinta);
}
.hfe-incluye-txt span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--hfe-texto); }

/* Filas horizontales sin la barra de scroll nativa, o salen bandas grises sobre las fotos */
.hfe-tira-movil { scrollbar-width: none; -ms-overflow-style: none; }
.hfe-tira-movil::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ── Tabletas ────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .hfe-caja { padding: 0 24px; }
    .hfe-hero-txt { padding: 0 24px; }
    .hfe-zonas { grid-template-columns: repeat(4, 1fr); }
    .hfe-hoteles-4 { grid-template-columns: repeat(3, 1fr); }
    .hfe-guia-rejilla { grid-template-columns: 320px 1fr; gap: 0 40px; }
    .hfe-faq-rejilla { grid-template-columns: 280px 1fr; gap: 0 36px; }
}

@media (max-width: 900px) {
    .hfe-hoteles-4, .hfe-hoteles-3 { grid-template-columns: repeat(2, 1fr); }
    .hfe-zonas { grid-template-columns: repeat(3, 1fr); }
    .hfe-argumentos { grid-template-columns: 1fr; }
    .hfe-incluye { grid-template-columns: repeat(2, 1fr); }
    .hfe-guia-rejilla, .hfe-faq-rejilla { grid-template-columns: 1fr; gap: 26px; }
    .hfe-guia-lado { position: static; }
}

/* ── Móvil ───────────────────────────────────────────────────────────────
   Una tarjeta por fila: con dos columnas quedan 165 px y «Parador de Arcos de la Frontera» se
   parte en cinco líneas. Toques de 44 px y nada que dependa del hover. */
@media (max-width: 640px) {
    .hfe-caja { padding: 0 16px; }
    /* Las migas, en una sola línea que se desliza: en tres líneas se comen media pantalla */
    .hfe-migas .hfe-caja { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .hfe-migas .hfe-caja::-webkit-scrollbar { display: none; }
    .hfe-migas a, .hfe-migas > .hfe-caja > span { white-space: nowrap; }
    .hfe-sec { padding-top: 34px; }
    .hfe-sec-cab { margin-bottom: 22px; text-align: left; }
    .hfe-sec-cab h2 { font-size: 24px; }
    .hfe-sec-cab p { font-size: 14.5px; }
    .hfe-ante { font-size: 11px; }

    .hfe-hero { height: 380px; }
    .hfe-hero-txt { padding: 0 16px; }
    .hfe-hero-txt h1 { font-size: 27px; max-width: none; }
    .hfe-hero-txt p { font-size: 14.5px; margin-bottom: 18px; }
    .hfe-hero-zonas { display: none; }
    .hfe-hero-btn { display: inline-flex; min-height: 46px; padding: 0 30px;
        background: var(--hfe-naranja); border-color: var(--hfe-naranja); color: #fff; }
    .hfe-hero-btn:hover { background: var(--hfe-naranja-hover); color: #fff; }

    /* Destacados y zonas, en carrusel: `scroll-snap` nativo, ningún script */
    .hfe-tira-movil {
        display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
        padding: 0 16px; margin: 0 -16px; scroll-padding-left: 16px;
    }
    .hfe-tira-movil > * { flex: 0 0 76%; scroll-snap-align: start; }
    .hfe-zonas.hfe-tira-movil > * { flex: 0 0 78%; }

    .hfe-hoteles-4, .hfe-hoteles-3 { grid-template-columns: 1fr; }
    .hfe-hotel { border-radius: 12px; }
    .hfe-hotel-foto { height: 170px; }

    .hfe-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
        padding: 12px 16px 13px; margin: 0 -16px; scrollbar-width: none; }
    .hfe-chips::-webkit-scrollbar { display: none; }
    .hfe-chip { flex: none; min-height: 44px; }

    .hfe-grupo > summary { padding: 15px 16px; }
    .hfe-grupo-txt h3 { font-size: 17px; }
    .hfe-grupo-cuerpo { padding: 0 16px 16px; }

    .hfe-paradores { padding: 34px 0; margin-top: 34px; }
    .hfe-banda { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
    .hfe-banda-txt b { font-size: 17px; }
    .hfe-btn-out, .hfe-btn, .hfe-vermas { width: 100%; }

    .hfe-guia { padding: 34px 0; margin-top: 34px; }
    .hfe-guia-lado h2, .hfe-faq-lado h2 { font-size: 24px; }
    .hfe-guia-txt { max-height: 420px; }
    .hfe-incluye { grid-template-columns: 1fr; }
    .hfe-faq-item h3 { font-size: 15.5px; }
}