/* WondarCore — código propio, no generado. Se puede modificar libremente. */

/* HOME */
.home-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  /* 1.5rem lateral, no 3.5rem — copiado tal cual de Gonzalo/index.css. Es el único wrapper de
     Gonzalo con este valor (el resto de sus páginas, destino/pais/experiencia/etc., usan 3.5rem),
     pero achicarlo acá es lo que hace que el ancho del menú de accesos rápidos (.quick-menu, mismo
     padding 1.5rem a propósito) coincida con el ancho del contenido de la home (2026-07-28,
     confirmado con Agustin: la home queda con más ancho de contenido que el resto del sitio). */
  padding: 1.25rem 1.5rem 3rem;
}

/* BANNER DE PAISAJE + BUSCADOR — migrado de Gonzalo/index1.html (2026-07-30), reemplaza al slider
   de Guías anterior (confirmado con Agustin). Mismo ancho que .home-body por ser hermano directo
   dentro de .home-wrapper. La imagen de fondo se setea en el HTML (Views/Home/Index.cshtml), nunca
   acá (regla del proyecto: CSS nunca contiene contenido del sitio). Altura de la variante sin
   círculos de atajos de búsqueda (Gonzalo/index1.css, la confirmada como oficial). */
.landscape-banner {
  position: relative;
  height: 180px;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Foto a sangre completa + header flotando encima (2026-08-14, migrado de Gonzalo/index.html) —
   la corrección real: no alcanza con que la píldora sea transparente, la FOTO tiene que arrancar
   en el borde de arriba de la pantalla (sin franja blanca antes) y ocupar todo el ancho del
   viewport, no solo el ancho de .home-wrapper (1280px). margin-left/right con calc(50% - 50vw) la
   saca del padding lateral de .home-wrapper; margin-top negativo cancela el padding-top de
   .home-wrapper (1.25rem) para que arranque pegada al borde superior. Con .home-hero .site-header
   en position:fixed (ver layout.css), el banner ya no tiene un header en flujo empujándolo hacia
   abajo — reserva ese espacio con su propio padding-top para que el título/buscador no queden
   tapados por la píldora. Solo aplica en desktop: en mobile .landscape-banner sigue oculto (ver el
   breakpoint más abajo) y .home-hero .site-header vuelve a ser un header blanco sticky normal (ver
   layout.css), no fixed/flotante — sin la foto detrás no hay nada sobre lo que flotar. */
.home-hero .landscape-banner {
  height: 322px;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1.25rem;
  padding-top: 110px;
  box-sizing: border-box;
}

/* Capa de fondo separada del contenedor — el recorte redondeado + la foto viven acá, no en
   .landscape-banner, para que el dropdown de resultados del buscador (hijo de .banner-search,
   position:absolute) pueda desbordarse hacia abajo del banner en vez de quedar cortado por su
   overflow:hidden. */
.landscape-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* A sangre completa (solo home-hero) — sin bordes redondeados, la foto llega hasta los bordes
   reales de la pantalla. */
.home-hero .landscape-banner-bg { border-radius: 0; }

/* Degradé oscuro para que el título blanco siempre se lea, sin importar qué tan clara sea la foto
   de fondo (mismo criterio que .card-img-wrap::after en las cards de destino). */
.landscape-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.32), rgba(0,0,0,0.32));
}

/* Buscador mudado acá desde el header por JS (ver "Relocación buscador banner↔header" en home.js) —
   mismo #search-wrap/#search-input de siempre, esto solo escala su tamaño visual (+27.5% sobre el
   buscador del header).
   z-index 50: .banner-search crea su propio contexto de apilamiento, así que el z-index:200 del
   dropdown de resultados (#search-dropdown) solo importa DENTRO de ese contexto — hacia afuera, lo
   que compite contra el resto de la página es el z-index de .banner-search en sí. 50 le gana a las
   cards (z-index:2) pero pierde contra el header sticky (z-index:100), que es el comportamiento
   correcto al scrollear. */
.banner-search {
  position: relative;
  z-index: 50;
  width: 100%;
  max-width: 700px;
  padding: 0 1rem;
}

/* Al enfocar el buscador, sube por encima del overlay que oscurece el resto de la página
   (.search-focus-overlay, z-index:90) — así el dropdown de resultados vuelve a ganarle a todo lo
   demás en vez de quedar tapado. */
.banner-search:focus-within {
  z-index: 95;
}

/* Fondo oscuro fijo que cubre toda la página — solo aparece mientras el buscador tiene el foco,
   para que destaque sobre el resto (título, foto de fondo, grilla de destinos). Tiene que ser el
   hermano siguiente de .banner-search en el HTML para que el selector de acá abajo funcione
   (:focus-within +, sin JS). */
.search-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 10, 20, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.banner-search:focus-within + .search-focus-overlay {
  opacity: 1;
  pointer-events: auto;
}

.banner-search .search-bar {
  gap: 13px;
  padding: 13px 26px;
}

.banner-search .search-input {
  font-size: 1.15rem;
}

.banner-search .search-icon svg {
  width: 20px;
  height: 20px;
}

.banner-search .search-clear svg {
  width: 18px;
  height: 18px;
}

/* Tipografía inspirada en el "¿Adónde irás?" de TripAdvisor, ajustada al lenguaje del header
   (mismo font-weight que .qm-title). z-index por encima de .search-focus-overlay para que el
   título, junto con el buscador, no se oscurezca cuando el buscador tiene el foco. */
.landscape-banner-title {
  position: relative;
  z-index: 91;
  color: var(--color-texto-sobre-color);
  font-size: 2.47rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
  margin: 0 0 0.6rem;
  padding: 0 1rem;
}

/* Título + buscador — rediseño (2026-08-14, migrado de Gonzalo/index.css, acotado a .home-hero).
   Título más liviano (peso 300, tracking abierto) en vez del titular grueso de sistema — estilo
   editorial tipo Canva/Notion, con Inter ya cargado (ver @font-face en layout.css). El buscador
   deja de ser una píldora con borde marcado — pasa a una tarjeta blanca sin borde, con la misma
   sombra "flotante" que ya usa la píldora del header (mismo lenguaje visual entre los dos blancos
   que flotan sobre la foto); al enfocarlo, el aro pasa a naranja (mismo naranja de "Sugerencias")
   en vez de solo agrandar la sombra. */
.home-hero .landscape-banner-title {
  font-size: 2.3rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 20px rgba(0,0,0,0.45);
  margin-bottom: 1.1rem;
}

/* Mismo estilo cuando el buscador migra al header al hacer scroll — #search-wrap es el mismo nodo
   real que se mueve de .banner-search a #header-search-slot (ver home.js), así que sin esto perdía
   el diseño de acá al cambiar de padre. */
.home-hero .banner-search .search-bar,
.home-hero .floating-navbar .header-search-slot .search-bar {
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.055);
  transition: box-shadow 0.2s ease;
}

.home-hero .banner-search .search-bar {
  height: 37px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Alto del buscador cuando vive en el header (scroll) — más chico que en el banner, a tono con el
   resto de la fila (logo/acciones), en vez del padding grande pensado para flotar solo sobre la foto. */
.home-hero .floating-navbar .header-search-slot .search-bar {
  height: 29px;
  padding: 0 20px;
}

.home-hero .banner-search .search-bar:focus-within,
.home-hero .floating-navbar .header-search-slot .search-bar:focus-within {
  box-shadow: 0 0 0 3px var(--color-acento), 0 14px 34px rgba(0,0,0,0.055);
}

.home-hero .banner-search .search-input,
.home-hero .floating-navbar .header-search-slot .search-input { font-size: 1.05rem; }

.home-hero .banner-search .search-icon,
.home-hero .floating-navbar .header-search-slot .search-icon { color: var(--color-texto-terciario); transition: color 0.2s ease; }
.home-hero .banner-search .search-bar:focus-within .search-icon,
.home-hero .floating-navbar .header-search-slot .search-bar:focus-within .search-icon { color: var(--color-acento); }

@media (max-width: 768px) {
  .home-hero .landscape-banner-title { font-size: 1.5rem; margin-bottom: 0.8rem; }
}

/* ACCESOS DESTACADOS (Itinerarios / Red de viajeros) — migrado de Gonzalo/index.css (rediseño
   2026-08-15). Foto a sangre (gradiente solo abajo, misma receta que .card-img-wrap::after/
   .notes-strip-item) + el mismo ícono cuadrado negro que .dock-item-icon del menú de arriba, a
   modo de "marco" sobre la foto. */
.home-promo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.home-promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 168px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-promo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}

.home-promo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.25s ease;
}

.home-promo-card:hover .home-promo-bg {
  transform: scale(1.04);
}

/* Degradé negro solo en el tercio inferior — la foto de arriba queda plena, lo justo para que
   título/CTA en blanco se lean siempre pase lo que pase con la foto de fondo. */
.home-promo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.62) 32%, rgba(0,0,0,0) 62%);
  pointer-events: none;
}

.home-promo-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-superficie-oscura);
  color: var(--color-texto-sobre-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: background 0.15s ease;
}

.home-promo-card:hover .home-promo-icon { background: var(--color-acento); }

/* El body arranca siempre en el mismo padding-top fijo (54px, lo justo para despejar el ícono de
   34px + 10px de margen) en vez de colgar del contenido, así título/bajada arrancan a la misma
   altura en las 2 cards, tengan o no notas/botón de IA después. */
.home-promo-body {
  position: relative;
  z-index: 1;
  padding: 54px 1rem 1rem;
}

.home-promo-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-texto-sobre-color);
  margin: 0 0 0.2rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.35);
}

.home-promo-sub {
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  margin: 0 0 0.6rem;
  max-width: 26rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Chips de notas de Red de viajeros — botones cliqueables de verdad (van a /red?tipo=nota), con
   el estado "blanco sólido" siempre puesto (no solo al hover) y el hover agregando solo movimiento. */
.home-promo-authors {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.home-promo-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: var(--color-fondo-superficie);
  border: 1px solid var(--color-fondo-superficie);
  border-radius: 999px;
  padding: 0.18rem 0.48rem 0.18rem 0.18rem;
  font-size: 0.53rem;
  font-weight: 700;
  color: var(--color-secundario);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-promo-author-chip:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.28);
}

.home-promo-avatar {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--color-texto-sobre-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.48rem;
  font-weight: 700;
  flex-shrink: 0;
}

.home-promo-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-texto-sobre-color);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: color 0.15s ease;
}

/* El botón de IA ya tiene fondo opaco propio (gradiente) — no necesita la sombra de texto de
   arriba, se ve rara sobre un fondo sólido en vez de una foto. */
.home-promo-cta--ai { text-shadow: none; }

.home-promo-cta:hover { color: var(--color-acento); }
.home-promo-cta svg { transition: transform 0.15s ease; }
.home-promo-cta:hover svg { transform: translateX(3px); }

/* CTA principal ("Ver la comunidad" / "Empezar mi itinerario"), anclado a la esquina inferior
   derecha — hermano directo de .home-promo-card, no vive adentro de .home-promo-body. */
.home-promo-cta-corner {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
}

/* Botón "Armar con Wondar IA" — mismo degradé que .dock-item--ai .dock-item-icon del menú, para
   que se reconozca como "lo de Wondar IA" al toque. Abre el mismo modal único del sitio
   (aiaAbrirModalConsulta, ver home.js/asistente-ia.js), nunca un placeholder. */
.home-promo-cta--ai {
  background: linear-gradient(135deg, #7ea8f5, #b090d9, #ef7fab, #f9c53f, #5fb87e);
  color: var(--color-texto-sobre-color);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
}

.home-promo-cta--ai:hover {
  color: var(--color-texto-sobre-color);
  filter: brightness(1.08);
}

/* BODY — panel blanco único (2026-07-28, migrado de Gonzalo) que contiene sidebar + toolbar +
   notas + grilla de destinos, en vez de que cada uno flote por separado con su propio recorte
   blanco sobre el fondo gris de la página. */
.home-body {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--color-fondo-superficie);
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 1.5rem;
}

/* SIDEBAR */
.filters-sidebar {
  flex-shrink: 0;
  width: 230px;
  background: var(--color-fondo-superficie);
  /* Padding recortado (rediseño 2026-08-12, pedido de Agustin: "aprovechar más el ancho de la caja
     de filtros" — y de nuevo el 2026-08-12 con una captura real, "todavía se podrían aprovechar
     más"). 1rem de cada lado le sacaba ~32px al ancho útil en una columna angosta de 230px con
     botones que se acomodan solos (ver .filter-list más abajo); recortado más de una vez porque el
     primer ajuste (0.6rem) seguía dejando margen de sobra en producción. */
  padding: 0.9rem 0.3rem;
}

/* Título de toda la columna (2026-07-29, migrado de Gonzalo) — Vista/Ordenar por/Filtros son
   partes de un mismo sistema de descubrimiento, así que van bajo un título propio, un escalón por
   encima de .sidebar-heading (más grande, sin ícono). */
.sidebar-column-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-texto);
  margin-bottom: 1rem;
}

.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

.filters-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tooltip de "Filtrá y sorprendete" — mismo formato que los tooltips chicos del header
   (fondo sólido oscuro, sin borde, sin título en negrita aparte), porque acá el texto es una
   oración larga y no una etiqueta de una palabra. */
.filters-info-wrap {
  position: relative;
  display: inline-flex;
  color: var(--color-texto-terciario);
  cursor: help;
}

.filters-info-wrap:hover,
.filters-info-wrap:focus-visible { color: var(--color-texto-secundario); outline: none; }

.filters-info-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 200px;
  max-width: calc(100vw - 32px);
  background: var(--color-superficie-oscura);
  color: var(--color-texto-sobre-color);
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s;
  z-index: 10;
  pointer-events: none;
}

.filters-info-wrap:hover .filters-info-tooltip,
.filters-info-wrap:focus-visible .filters-info-tooltip {
  opacity: 1;
  visibility: visible;
}

.filters-count {
  background: var(--color-borde-suave);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
}

.clear-filters-btn {
  background: none;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  /* Navy en vez del azul genérico del sitio (rediseño 2026-08-22, migrado de
     Gonzalo/index1.html) — mismo azul que las pastillas tildadas y el toggle de Vista, para que
     toda la columna hable un solo azul de marca. */
  color: #1e3650;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  white-space: nowrap;
}

/* Botón "×" para cerrar el cajón de filtros en mobile (ver breakpoint más abajo) — en desktop el
   sidebar no es un cajón, así que acá no hace falta y queda oculto. */
.filters-sidebar-close { display: none; }

/* Fila "Vista" — mudada acá desde el toolbar de arriba de la grilla, junto con "Ordenar por", para
   no dejar ningún control flotando arriba de las cards. No es un accordion: siempre visible, mismo
   look que el resto del sidebar (borde inferior igual que .filter-group). */
.sidebar-view-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-fondo-superficie-alt);
  padding: 0.75rem 0;
}

/* Título compartido por "Vista", "Ordenar por" y "Filtros" — una sola clase para los tres para que
   la tipografía sea exactamente la misma. Un nivel por encima de los .filter-group-header de abajo
   (Continente, País, etc.), que son más chicos y sin ícono a propósito. */
.sidebar-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-texto);
}

/* "Ordenar por" — a diferencia de los .filter-group de abajo, NO es un accordion: sin chevron, la
   lista de radios queda siempre visible. Mismo look de fila que .sidebar-view-row. */
.sidebar-static-section {
  border-bottom: 1px solid var(--color-fondo-superficie-alt);
  padding: 0.75rem 0;
}

.sidebar-static-section .sidebar-heading { margin-bottom: 1.25rem; }

.filter-group {
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-fondo-superficie-alt);
  padding: 0.85rem 0;
}

.filter-group:last-child { border-bottom: none; }

/* Header de categoría — mayúsculas + tracking ("eyebrow"), rediseño 2026-08-22 migrado de
   Gonzalo/index1.html: chico y discreto a propósito para que el peso visual quede en las pastillas
   de abajo, no en el título. Las 3 categorías --static (Calificación/Mejor época/Continente, ver
   Views/DestinationsPublico/Index.cshtml) no llevan cursor/hover de acordeón, porque no abren ni
   cierran nada. */
.filter-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  margin: 0 -6px 0.6rem;
  border-radius: 6px;
  user-select: none;
}

.filter-group-header span:first-child {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-texto-terciario);
}

.filter-group-header:not(.filter-group-header--static) {
  cursor: pointer;
}

.filter-group-header:not(.filter-group-header--static):hover {
  background: var(--color-fondo-superficie-alt);
}

/* Badge por categoría — numerito chico en el header (ej. "2"), mismo azul que el estado "activo"
   de las pastillas. Vacío (updateGroupBadges en destinations.js deja el textContent en '') = no
   ocupa lugar ni se ve. Solo las categorías con acordeón lo llevan (País/Región/Tamaño/etc.) — las
   3 --static no lo necesitan, su estado ya se ve directo sin abrir nada. */
.filter-group-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #1e3650;
  background: var(--color-primario-fondo);
  border-radius: 999px;
  padding: 0;
  min-width: 0;
  line-height: 1.5;
  text-align: center;
}
.filter-group-badge:not(:empty) {
  padding: 1px 7px;
  margin-right: 2px;
}

.chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.chevron--collapsed {
  transform: rotate(-90deg);
}

.filter-list.filter-list--collapsed {
  display: none;
}

/* Filtros como botones/"pastillas" (rediseño 2026-08-12, pedido de Agustin a partir de una
   referencia visual — no se copiaron los estilos de esa referencia, solo el comportamiento). Cada
   opción se acomoda sola en flex-wrap: si entran 2 por fila entran 2, si entra 1 entra 1, nunca se
   fuerza una cantidad fija (única excepción: "Mejor época", ver .filter-list--months más abajo). El
   checkbox/radio real sigue en el DOM (oculto, ver más abajo) para no tocar nada de la lógica de
   home.js, que sigue leyendo :checked y escuchando "change" exactamente igual que antes — el
   <label> entero pasa a ser el botón clickeable. Aplica también a los que antes eran radios
   (Calificación, Ordenar por): mismo formato de botón, la exclusividad ya la da el navegador por
   compartir "name". */
.filter-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-list label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--color-texto);
  cursor: pointer;
  font-weight: 500;
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  background: var(--color-fondo-superficie-alt);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.filter-list label:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

/* Tilde (✓) que aparece solo cuando la opción está tildada — CSS puro (::before con un check
   dibujado en clip-path, sin ícono en el HTML), rediseño 2026-08-22 migrado de
   Gonzalo/index1.html. Cubre automáticamente TODAS las listas de pastillas, incluidas
   #list-pais/#list-region que se arman dinámico por JS. Ancho 0 → 13px con la transición: aparece
   "creciendo" en vez de aparecer de golpe. */
.filter-list label::before {
  content: '';
  width: 0;
  height: 10px;
  flex-shrink: 0;
  background: #fff;
  clip-path: polygon(9% 43%, 0 55%, 33% 92%, 100% 20%, 87% 8%, 33% 65%);
  transition: width 0.16s ease;
}
.filter-list label:has(input:checked)::before {
  width: 13px;
}

.filter-count {
  color: var(--color-texto-terciario);
  font-size: 0.74rem;
}

/* Contador real por opción (ej. "(312)", ver actualizarFacetas en home.js) — sin clase propia en el
   HTML, se engancha por el patrón de id que ya usa ese mismo JS (f-tipoFiltro-categoriaId). */
.filter-list label span[id^="f-"] {
  color: var(--color-texto-terciario);
  font-size: 0.72rem;
}

/* El checkbox/radio real queda funcional pero invisible — el <label> entero es el control visual
   (fondo + borde cambian con :has(:checked), abajo). display:none no sirve acá porque algunos
   lectores de pantalla dejan de anunciar el estado; se oculta por tamaño/posición en su lugar. */
.filter-list input[type="checkbox"],
.filter-list input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  pointer-events: none;
}

/* Estado "prendido" — relleno sólido navy + sombra a tono (que la pastilla se sienta iluminada,
   no solo "un poco más oscura"), rediseño 2026-08-22 migrado de Gonzalo/index1.html. El tilde de
   arriba hace de segunda señal además del color, para que se note incluso mirando en diagonal. */
.filter-list label:has(input:checked) {
  background: #1e3650;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(30,54,80,0.35);
}
.filter-list label:has(input:checked):hover {
  background: #16283d;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(30,54,80,0.4);
}

.filter-list label:has(input:checked) span[id^="f-"] {
  color: rgba(255,255,255,0.8);
}

/* "Mejor época" — única sección con grilla fija (2 filas de 6), a diferencia del wrap libre del
   resto: 12 meses, nombre abreviado a 3 letras (home-temporada-XX-corta en WondarCore.Nls.cs) y sin
   el contador real por mes visible (no entra en la cajita chica). */
.filter-list--months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.filter-list--months.filter-list--collapsed {
  display: none;
}

.filter-list--months label {
  justify-content: center;
  padding: 7px 1px;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.66rem;
  gap: 0;
}

.filter-list--months label span[id^="f-"] {
  display: none;
}

/* Sin tilde acá — no entra en la celdita chica (12 meses, 6×2); el relleno sólido + sombra del
   estado tildado (heredado de .filter-list label:has(input:checked)) alcanza como señal. */
.filter-list--months label::before {
  display: none;
}

/* Chips de filtros activos — fila arriba de todo (rediseño 2026-08-22, migrado de
   Gonzalo/index1.html), para ver de un vistazo qué está aplicado sin abrir ningún acordeón. Vacía
   = oculta del todo (:empty, sin gap/margin ocupando lugar). Mismo relleno sólido navy que las
   pastillas tildadas, para que "esto está activo" sea un solo lenguaje de color en toda la columna. */
.active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.7rem;
}
.active-filter-chips:empty {
  display: none;
  margin-bottom: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  background: #1e3650;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 4px 6px 4px 11px;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(30,54,80,0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip button {
  appearance: none;
  border: none;
  background: rgba(255,255,255,0.22);
  color: inherit;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 0.66rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.chip button:hover {
  background: rgba(255,255,255,0.35);
}

/* Scroll interno cuando una sección de opciones supera ~5 filas de botones (medido en JS, ver
   FILTER_LIST_MAX_HEIGHT/ajustarScrollFiltro en home.js — el valor de acá tiene que coincidir con
   ese límite) — junto con el buscador de acá abajo (.filter-search), que solo se muestra mientras
   el scroll está activo, para "filtrar los filtros" visibles sin tener que scrollear a ciegas. */
.filter-list--scroll {
  max-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: flex-start;
  padding-right: 4px;
}

.filter-search {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 7px 10px;
  border: 1.5px solid var(--color-borde);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--color-texto);
  background: var(--color-fondo-superficie);
}

.filter-search:focus {
  outline: none;
  border-color: var(--color-primario);
}

/* CONTENT */
/* Línea divisoria — desde que filtros/toolbar perdieron su recuadro blanco propio (panel único), el
   header de "Filtros" del sidebar y el contenido de acá quedaban a la misma altura sin nada que los
   separe. Se saca en mobile (ver media query) porque ahí el sidebar es un drawer fijo, no una
   columna al lado. */
.content-area {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-left: 1px solid var(--color-borde);
  padding-left: 1.25rem;
}

/* Vacío en desktop a propósito — Vista/Ordenar por se mudaron al sidebar, así que no queda nada
   arriba de las cards. Se muestra de nuevo en mobile (ver media query) porque ahí sigue haciendo
   falta el botón para abrir el cajón de filtros. */
.content-toolbar {
  display: none;
}

.view-toggle {
  display: flex;
  gap: 4px;
  background: var(--color-fondo);
  border-radius: 8px;
  padding: 3px;
}

.view-btn {
  background: none;
  border: none;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-texto-secundario);
}

/* Navy en vez del azul genérico del sitio (rediseño 2026-08-22, migrado de Gonzalo/index1.html). */
.view-btn--active { background: #1e3650; color: var(--color-texto-sobre-color); }

/* Vista mapa (2026-08-12): tercera vista, no una variante de grid/lista — sin paginado, así que en
   vez de ".cards-grid" es un único contenedor Leaflet. Oculto por defecto; .content-area--map (la
   togglea activarVista() en home.js) invierte qué se ve. */
#results-map {
  display: none;
  height: 620px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.content-area--map #results-map { display: block; }
.content-area--map #results-container,
.content-area--map #cargando-mas,
.content-area--map #empty-state { display: none !important; }

/* Minicard del popup de Leaflet — mismo look que .map-minicard de pais/estado-publico.css, pero
   propio de home.css (esas hojas no se cargan acá) para no acoplar archivos de páginas distintas. */
.home-map-minicard {
  display: flex;
  flex-direction: column;
  width: 160px;
  font-family: inherit;
  border-radius: 12px;
  overflow: hidden;
}

.home-map-minicard__img {
  height: 80px;
  background-size: cover;
  background-position: center;
}

.home-map-minicard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 10px;
}

.home-map-minicard strong {
  font-size: 0.88rem;
  color: var(--color-texto);
  line-height: 1.15;
}

.home-map-minicard__sub {
  font-size: 0.72rem;
  color: var(--color-texto-secundario);
}

.home-map-minicard__rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.home-map-minicard__score {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-texto);
}

.home-map-minicard__bar {
  flex: 1;
  height: 5px;
  background: var(--color-borde-suave);
  border-radius: 3px;
  overflow: hidden;
}

.home-map-minicard__bar span {
  display: block;
  height: 100%;
  background: var(--color-primario);
  border-radius: 3px;
}

/* Mensaje de "todavía no hay datos" reutilizado en destino/país cuando una lista viene vacía
   (ver renderLista en destino-publico.js / pais-publico.js) */
.lista-vacia {
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
  padding: 1rem 0.25rem;
}

/* Cada tanda del scroll infinito agrega su propio bloque (franja de notas opcional + .cards-grid)
   como hijo directo acá (ver renderizarLoteResultados en home.js) — sin este gap quedan pegados
   entre sí cuando una tanda no trae notas relacionadas. */
#results-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* NOTAS RELACIONADAS A LA BÚSQUEDA — rediseño 2026-07-30 migrado de Gonzalo/index1.html. A pedido
   explícito de Agustin, el título/ícono/contador de cabecera que trae el mock de Gonzalo NO se
   migra (el contenido — grid + "Ver todas las notas" — sí se mantiene). Sin fondo/borde/sombra
   propios: las tarjetas quedan "flotando" directo sobre el panel blanco, igual que .cards-grid. */
.notes-top-strip {
  margin-top: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-borde);
}

.notes-top-strip-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.notes-top-strip-more {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-primario);
  text-decoration: none;
  white-space: nowrap;
}

/* La flecha va acá y no en el texto Nls: Nls.Espanol/etc. son varchar (no nvarchar) y SQL Server
   corrompe "→" a "?" al guardarlo — ver WondarCore.Nls.cs, clave "home-notas-ver-todas". */
.notes-top-strip-more::after {
  content: " →";
}

/* La cantidad de columnas la fija JS según cuántas notas hay para mostrar (1 = ancho completo,
   2 = mitad cada una, 3 = un tercio — ver applyNotesStripColumns en home.js). Mismo gap que
   .cards-grid para que las columnas de abajo no queden corridas respecto a las de arriba. */
.notes-top-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.notes-strip-item {
  position: relative;
  height: 200px;
  background: var(--color-fondo-superficie-alt);
  border-radius: 14px;
  border: 2.5px solid var(--color-secundario);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: transform 0.15s, box-shadow 0.15s;
}

.notes-strip-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.notes-strip-photo-link {
  position: absolute;
  inset: 0;
  display: block;
}

.notes-strip-photo {
  position: absolute;
  inset: 0;
  /* width/height explícitos: <img> es un elemento reemplazado, position:absolute+inset:0 solo no
     alcanza (a diferencia de un div) — ver seo.md punto 4. */
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  object-fit: cover;
  object-position: center;
}

/* Placeholder para notas sin foto: degradé de marca + ícono, no un gris plano que parece roto. */
.notes-strip-photo--empty {
  background: linear-gradient(135deg, var(--color-secundario) 0%, var(--color-secundario) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.notes-strip-photo--empty svg { opacity: 0.45; }

/* Placeholder naranja para la tarjeta blanca de 1 sola nota — mismo criterio que arriba, en el
   naranja nuevo en vez del violeta que usan las tarjetas de 2/3 notas. */
.notes-top-strip-grid[data-shown-count="1"] .notes-strip-photo--empty {
  background: linear-gradient(135deg, var(--color-acento) 0%, #fbb15c 100%);
}

/* Mismo degradé que .card-img-wrap::after — para que el texto blanco de abajo siempre se lea. */
.notes-strip-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.78) 40%, rgba(0,0,0,0) 62%);
  pointer-events: none;
}

/* Badge oscuro en pastilla — mismo color+forma que .pf-post-badge--nota (perfil.html/red.html). */
.notes-strip-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-superficie-oscura);
  color: var(--color-texto-sobre-color);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 50px;
  letter-spacing: 0.02em;
}

.notes-strip-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.75rem 0.9rem;
  color: var(--color-texto-sobre-color);
}

/* Ubicación arriba del título — mayúsculas, letter-spacing, pin chiquito. */
.notes-strip-location {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.85);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 4px;
}

.notes-strip-location svg { width: 9px; height: 9px; }

.notes-strip-title-link {
  color: inherit;
  text-decoration: none;
}

.notes-strip-title {
  margin: 0 0 5px;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Extracto del cuerpo de la nota — solo se muestra con 1 sola nota (data-shown-count="1"), donde la
   tarjeta tiene ancho de sobra; con 2/3 queda oculto. */
.notes-strip-excerpt {
  display: none;
  margin: 0 0 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-item,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-item {
  height: 198px;
}

/* Con 1 sola nota (ancho completo): tarjeta blanca + texto negro + foto como bloque aparte a la
   derecha, con borde y acentos naranjas (var(--color-acento), mismo naranja que .suggestion-btn del header) en
   vez de violeta. */
.notes-top-strip-grid[data-shown-count="1"] .notes-strip-item {
  height: 198px;
  display: flex;
  align-items: stretch;
  background: var(--color-fondo-superficie);
  border-color: var(--color-acento);
}

.notes-top-strip-grid[data-shown-count="1"] .notes-strip-item::after {
  content: none;
}

/* Foto con margen propio, cuadrada, no pegada al borde de la tarjeta. */
.notes-top-strip-grid[data-shown-count="1"] .notes-strip-photo-link {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  order: 2;
  margin: 14px 14px 14px 0;
  border-radius: 12px;
  overflow: hidden;
}

.notes-top-strip-grid[data-shown-count="1"] .notes-strip-badge {
  background: var(--color-acento);
}

.notes-top-strip-grid[data-shown-count="1"] .notes-strip-info {
  position: static;
  max-width: none;
  flex: 1;
  min-width: 0;
  color: var(--color-texto);
  padding: 2.5rem 1.1rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.notes-top-strip-grid[data-shown-count="1"] .notes-strip-location {
  color: var(--color-texto-secundario);
}

.notes-top-strip-grid[data-shown-count="1"] .notes-strip-title {
  font-size: 1.47rem;
  color: var(--color-texto);
}

.notes-top-strip-grid[data-shown-count="1"] .notes-strip-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  color: var(--color-texto-secundario);
}

/* Autor — abajo a la izquierda del bloque de texto, ya sin foto de fondo sobre la que destacarlo. */
.notes-top-strip-grid[data-shown-count="1"] .notes-strip-author-top {
  top: auto;
  right: auto;
  bottom: 14px;
  left: 1.1rem;
  background: none;
  padding: 0;
}

.notes-top-strip-grid[data-shown-count="1"] .notes-strip-author {
  color: var(--color-texto-secundario);
}

.notes-top-strip-grid[data-shown-count="1"] .notes-strip-author-avatar {
  border-color: rgba(0,0,0,0.15);
}

/* Tarjetas de 2 y 3 notas — mismo blanco+naranja que la de 1 sola nota. Migrado 2026-08-09 de
   Gonzalo/index.css (a pedido de Agustin, mismo día que Gonzalo pidió el rediseño): dejaron de
   compartir el mismo layout — con 2 notas la tarjeta tiene ancho de sobra (mitad de la fila) y
   pasa a lado a lado (foto a la derecha, mitad real del ancho — mismo esqueleto que ya usa la
   tarjeta de 1 nota, solo que la foto no es cuadrada sino al 50% de ancho); con 3 (un tercio de
   la fila) no entra una foto al costado sin apretar, así que sigue apilada, pero la foto llega a
   la mitad (antes 60px de 198, un tercio escaso) achicando un poco la tipografía en vez de
   agrandar la tarjeta (que sigue midiendo 198px, igual que las de 1 y 2 — pedido explícito de
   Gonzalo de que las tres midan lo mismo). */
.notes-top-strip-grid[data-shown-count="2"] .notes-strip-item,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-item {
  display: flex;
  background: var(--color-fondo-superficie);
  border-color: var(--color-acento);
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-item::after,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-item::after {
  content: none;
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-badge,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-badge {
  background: var(--color-acento);
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-location,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-location {
  color: var(--color-texto-secundario);
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-title,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-title {
  color: var(--color-texto);
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-excerpt {
  color: var(--color-texto-secundario);
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-author,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-author {
  color: var(--color-texto-secundario);
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-author-avatar,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-author-avatar {
  border-color: rgba(0,0,0,0.15);
}

/* --- 2 notas: lado a lado, foto = mitad real del ancho ---
   Mismo esqueleto que la tarjeta de 1 sola nota (align-items:stretch, foto order:2, insignia de
   autor absoluta abajo-izquierda superpuesta al texto) — acá el bloque de la fila tiene ancho de
   sobra (mitad de la grilla), así que la foto puede ir al costado sin apretar nada, sin tocar
   ningún tamaño de fuente. */
.notes-top-strip-grid[data-shown-count="2"] .notes-strip-item {
  align-items: stretch;
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-photo-link {
  position: relative;
  inset: auto;
  order: 2;
  flex: 0 0 50%;
  margin: 14px 14px 14px 0;
  border-radius: 12px;
  overflow: hidden;
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-info {
  position: static;
  max-width: none;
  flex: 1;
  min-width: 0;
  color: var(--color-texto);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-author-top {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 14px;
  left: 1.1rem;
  background: none;
  padding: 0;
}

/* --- 3 notas: sigue apilada, pero la foto llega a la mitad achicando un poco la tipografía ---
   A este ancho (un tercio de la fila) no entra una foto al costado. La tarjeta mide 198px igual
   que las de 1 y 2 (no se agranda), así que para que la foto pase de 60px a la mitad real (99px)
   hay que liberarle espacio al bloque de texto: padding más ajustado, título un toque más chico
   (se mantiene en 2 líneas, no se lo bajó a 1) y el autor un poco más compacto (avatar y
   márgenes más chicos). Ubicación no cambia de tamaño, solo pierde un poco de margen. */
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-item {
  flex-direction: column;
}

.notes-top-strip-grid[data-shown-count="3"] .notes-strip-photo-link {
  position: relative;
  inset: auto;
  order: -1;
  width: 100%;
  flex-shrink: 0;
  flex-basis: 50%;
}

.notes-top-strip-grid[data-shown-count="3"] .notes-strip-info {
  position: static;
  max-width: none;
  flex: 1;
  min-width: 0;
  color: var(--color-texto);
  padding: 0.4rem 0.7rem;
  display: flex;
  flex-direction: column;
}

.notes-top-strip-grid[data-shown-count="3"] .notes-strip-location {
  margin-bottom: 2px;
}

.notes-top-strip-grid[data-shown-count="3"] .notes-strip-title {
  font-size: 0.85rem;
  line-height: 1.15;
  margin-bottom: 3px;
}

.notes-top-strip-grid[data-shown-count="3"] .notes-strip-author-top {
  position: static;
  order: 3;
  background: none;
  padding: 0;
  margin: 3px 0.9rem 8px;
  align-self: flex-start;
}

.notes-top-strip-grid[data-shown-count="3"] .notes-strip-author {
  font-size: 0.68rem;
}

.notes-top-strip-grid[data-shown-count="3"] .notes-strip-author-avatar {
  width: 17px;
  height: 17px;
}

/* Avatar del autor — una nota siempre tiene una persona detrás, a diferencia de una card de
   destino, así que mostrar la cara ayuda a distinguir de un vistazo qué tarjetas son notas. */
.notes-strip-author-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.25);
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.7);
  object-fit: cover;
  object-position: center;
}

/* Autor arriba a la derecha por defecto (tarjeta de 1 nota y de 2/3 lo pisan más arriba) — mismo
   tratamiento de pastilla oscura que .notes-strip-badge, en la esquina opuesta. */
.notes-strip-author-top {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  background: rgba(26,26,46,0.75);
  padding: 4px 12px 4px 4px;
  border-radius: 50px;
}

.notes-strip-author {
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
}

/* CARDS */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.dest-card-home {
  background: var(--color-fondo-superficie);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  border: 2.5px solid var(--color-secundario);
}

.dest-card-home:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* ── EXPERIENCIA card ── */
.exp-card {
  display: flex;
  flex-direction: column;
  border: 2.5px solid var(--color-exito);
  border-radius: 14px;
  overflow: hidden;
}

/* ── FRANJA INFERIOR (card-strip) — usada por "Destinos cercanos"/"Comparar con destinos
   similares"/"Principales experiencias" en Destino/País/Estado/Continente/Atracción (ver
   destino-publico.js, pais-publico.js, etc.), no solo en la home. ── */
.card-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 26px;
  flex-shrink: 0;
  text-decoration: none;
}

.card-strip--dest  { background: var(--color-secundario); }
.card-strip--exp   { background: var(--color-exito); }
.card-strip--promo { background: var(--color-acento-hover); }

/* ── Experiencia promocionada ── */
.exp-card--promo {
  border-color: var(--color-acento-hover);
  position: relative;
}

.exp-promo-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-acento-hover);
  color: var(--color-texto-sobre-color);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 50px;
  z-index: 3;
  white-space: nowrap;
}

.card-strip-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.card-strip-left svg { flex-shrink: 0; }

.card-strip-texts { display: flex; flex-direction: column; gap: 1px; }

.card-strip-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-texto-sobre-color);
  text-transform: uppercase;
}

.card-strip-sub { display: none; }

.card-strip-arrow {
  color: rgba(255,255,255,0.8);
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 6px;
}

/* En portada (cards-grid) no hay franja — la franja es solo para los carruseles de
   Destinos cercanos/similares/experiencias (Destino/País/Estado/Continente/Atracción). El
   borde violeta sí se mantiene acá (Gonzalo/index.css: .dest-card-home lo tiene siempre). */
.cards-grid .card-strip { display: none; }
.cards-grid.list-view .card-strip { display: none; }

.card-img-wrap {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.card-img-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  /* object-fit/object-position: equivalente ahora que algunas cards usan <img> real en vez de div
     con background-image (seo.md punto 4, arrancado en destino-publico.js) — sin efecto en los
     usos que siguen siendo <div>. */
  object-fit: cover;
  object-position: center;
}

.card-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.8) 42%, rgba(0,0,0,0) 62%);
  pointer-events: none;
}

/* Violeta "destino" (2026-07-30, migrado de Gonzalo) — antes rojo, mismo var(--color-secundario) que el borde de
   la card, los tags y el corazón/VS/itinerario activos, para que toda la identidad "esto es un
   destino" sea un solo color consistente. La barra de valoración se queda en rojo a propósito
   (ver .card-rating-bar span más abajo). */
.card-badge-top {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--color-secundario);
  color: var(--color-texto-sobre-color);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.card-action-btn {
  background: var(--color-fondo-superficie);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-texto);
  font-size: 0.7rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.1s;
}

.card-action-btn:hover { transform: scale(1.1); }

.card-action-btn--vs {
  font-size: 0.65rem;
  font-weight: 800;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.card-action-btn--vs.vs-btn--active {
  background: var(--color-secundario);
  color: var(--color-texto-sobre-color);
  box-shadow: 0 0 0 2px var(--color-secundario);
}

.card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 0.9rem;
  color: var(--color-texto-sobre-color);
}

.card-city {
  display: block;
  font-size: 1.61rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 2px;
  color: inherit;
  text-decoration: none;
}

.card-location {
  font-size: 0.72rem;
  opacity: 0.85;
  margin-bottom: 6px;
}

.card-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-score {
  font-size: 0.9rem;
  font-weight: 700;
}

.card-rating-bar {
  flex: 1;
  max-width: 90px;
  height: 7px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  overflow: hidden;
}

.card-rating-bar span {
  display: block;
  height: 100%;
  background: var(--color-error);
  border-radius: 3px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  min-height: 46px;
  align-content: flex-start;
}

/* Violeta "destino" (2026-07-30, migrado de Gonzalo) — antes vidrio blanco translúcido, ahora el
   mismo var(--color-secundario) que el corazón/pin/VS activos y el borde de las notas. */
.card-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(124, 58, 237, 0.55);
  border: 1px solid rgba(124, 58, 237, 0.7);
  border-radius: 5px;
  padding: 3px 8px;
  color: var(--color-texto-sobre-color);
}

/* "+N" — cuenta los tags que no entraron en el tope de 3 (ver tarjetaDestinoHome en home.js), no es
   un tag real (agregado nuestro, no existe en el mock de Gonzalo) — se distingue con un violeta más
   sólido en vez del translúcido de arriba, mismo criterio que antes (más opaco = agregado, no dato). */
.card-tag--more {
  background: rgba(124, 58, 237, 0.85);
  border-color: rgba(124, 58, 237, 0.95);
}

/* El "+N" de mobile (cuenta real de tags ocultos, no solo los que sobraron del tope de 3 de
   desktop) se arma siempre en el HTML pero queda oculto salvo en el breakpoint mobile de abajo. */
.card-tag--more-mobile { display: none; }

/* Badge de cantidad de Notas (Publicaciones) — agregado nuestro, no existe en el mock de Gonzalo
   (ver badgeNotasDestino en home.js). */
.card-notas-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 9px;
  text-decoration: none;
  width: fit-content;
}

/* Contexto grid (.card-info, sobre el gradiente oscuro de la foto) — mismo criterio que .card-tag. */
.card-info .card-notas-badge {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
}

/* Contexto lista (.card-list-extra, fondo blanco). */
.card-list-extra .card-notas-badge {
  background: var(--color-secundario-fondo);
  color: var(--color-secundario);
  margin-bottom: 8px;
}

/* VISTA LISTA — contenedor */
.cards-grid.list-view {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

/* VISTA LISTA — card */
.cards-grid.list-view .dest-card-home {
  display: flex;
  flex-direction: row;
  height: auto;
  min-height: 210px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.cards-grid.list-view .card-img-wrap {
  width: 240px;
  flex-shrink: 0;
  height: 100%;
  border-radius: 0;
}

/* Ocultar card-info y card-actions en vista lista */
.cards-grid.list-view .card-info,
.cards-grid.list-view .card-actions {
  display: none;
}

/* Mostrar panel extra solo en vista lista */
.card-list-extra { display: none; }

.cards-grid.list-view .card-list-extra {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  flex: 1;
  min-width: 0;
  background: var(--color-fondo-superficie);
  gap: 0.45rem;
}

.list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.list-city {
  font-size: 1.725rem;
  font-weight: 800;
  color: var(--color-texto);
  line-height: 1.1;
}

.list-location {
  font-size: 0.78rem;
  color: var(--color-texto-terciario);
  margin-top: 3px;
}

.list-actions { display: flex; gap: 6px; flex-shrink: 0; padding-top: 4px; }

.list-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list-score {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-texto);
}

.list-rating-bar {
  width: 140px;
  height: 7px;
  background: var(--color-borde-suave);
  border-radius: 3px;
  overflow: hidden;
}

.list-rating-bar span {
  display: block;
  height: 100%;
  background: var(--color-error);
  border-radius: 3px;
}

.list-desc {
  font-size: 0.8rem;
  color: var(--color-texto-secundario);
  line-height: 1.55;
}

.list-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 2rem;
  background: var(--color-fondo-superficie-alt);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  margin-top: 0.1rem;
}

.list-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-meta-item svg { flex-shrink: 0; opacity: 0.8; }

.list-meta-item div {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-size: 0.6rem;
  color: var(--color-texto-terciario);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.meta-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-texto);
}

/* EMPTY STATE */
.empty-state {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

/* Indicador de scroll infinito (ver buscarYRenderizar/cargarMasResultados en home.js) — agregado
   nuestro, no existe en el mock de Gonzalo (esa página no tiene scroll infinito). */
.cargando-mas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--color-secundario);
  font-weight: 600;
}

.cargando-mas-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--color-secundario-fondo-fuerte);
  border-top-color: var(--color-secundario);
  border-radius: 50%;
  animation: cargando-mas-spin 0.7s linear infinite;
}

@keyframes cargando-mas-spin {
  to { transform: rotate(360deg); }
}

.empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-texto);
  margin-bottom: 0.5rem;
}

.empty-desc {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  line-height: 1.6;
}

/* BOTONES ACTIVOS EN CARDS — violeta "destino" (2026-07-30, migrado de Gonzalo), mismo var(--color-secundario) que
   el borde/badge/tags de la card. Antes corazón=rojo, pin(itinerario)=azul; ahora los dos (más VS,
   que ya usaba este violeta) quedan consistentes. La barra de valoración se queda en rojo a
   propósito, no se toca. */
.btn-heart.active { color: var(--color-secundario); }
.btn-heart.active svg { fill: var(--color-secundario); stroke: var(--color-secundario); }
.btn-pin.active { color: var(--color-secundario); }
.btn-pin.active svg { fill: var(--color-secundario); }

/* ─── MOBILE FILTER BUTTON (oculto en desktop) ─── */
.mobile-filter-btn { display: none; }
.mobile-overlay { display: none; }

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
═══════════════════════════════════════ */
@media (max-width: 768px) {

  /* BANNER — oculto en mobile (pedido de Agustin, 2026-08-02): el buscador ya no se muda acá
     adentro (ver home.js, guard mobile de la relocación banner↔header) y sin buscador el banner
     no tiene función — se saca entero en vez de mostrar la foto+título solos, para no gastar
     pantalla en algo puramente decorativo arriba del todo. En desktop sigue igual que siempre. */
  .landscape-banner { display: none; }

  /* ACCESOS DESTACADOS — mismo criterio que el resto de esta sección: se achica un escalón
     (ícono, tipografía) y el CTA de la esquina deja de ser position:absolute (pasa a fluir al
     final de la card) para que nunca se pise con el título/botón de IA, sea cual sea el largo
     del texto en cada idioma. */
  .home-promo-row { grid-template-columns: 1fr; gap: 0.9rem; margin-bottom: 1rem; }
  .home-promo-card { min-height: 0; }

  .home-promo-icon {
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .home-promo-icon svg { width: 14px; height: 14px; }

  .home-promo-body { padding: 40px 0.85rem 0.7rem; }

  .home-promo-title { font-size: 0.92rem; line-height: 1.2; margin-bottom: 0.15rem; }
  .home-promo-sub {
    font-size: 0.7rem;
    line-height: 1.3;
    margin-bottom: 0.4rem;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .home-promo-authors { display: none; } /* no entran cómodas en mobile, priorizamos título/CTA */

  .home-promo-cta--ai { font-size: 0.66rem; padding: 0.26rem 0.6rem; }

  .home-promo-cta-corner {
    position: static;
    display: flex;
    justify-content: flex-end;
    padding: 0 0.85rem 0.75rem;
  }

  /* LAYOUT */
  .home-wrapper { padding: 1rem 0.75rem 3rem; }

  .home-body { flex-direction: column; gap: 0; padding: 1rem; }

  /* Sin línea divisoria en mobile — ahí el sidebar es un drawer fijo (ver más abajo), no una
     columna al lado de .content-area. */
  .content-area { border-left: none; padding-left: 0; }

  /* SIDEBAR — drawer deslizable desde abajo */
  .filters-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-height: 75vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    /* Por encima de .site-header (z-index:500 en layout.css) — el menú de accesos rápidos en
       mobile (2026-08-02) le sumó altura fija al header sticky, y con z-index:300 el header
       tapaba la franja de arriba del cajón (título + botón de cerrar). El cajón es un modal, tiene
       que ganarle siempre al header, no solo cuando el header mide poco. */
    z-index: 550;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  }

  .filters-sidebar--open {
    transform: translateY(0);
  }

  /* Botón de cierre (pedido de Agustin, 2026-08-02): el cajón ocupa hasta 75vh de la pantalla y
     hasta ahora solo se cerraba tocando el overlay del 25% restante — poco descubrible, sobre todo
     si el contenido del cajón alcanza a llenar esos 75vh. Círculo azul con "×" adentro (no un botón
     de texto plano) para que se note como acción de cierre a simple vista. Mismo tap target de
     44px que .mnav-drawer-close (mobile-nav.css). */
  .filters-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background: var(--color-primario);
    border: none;
    color: var(--color-texto-sobre-color);
    font-size: 1.3rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
  }

  .filters-sidebar-close:hover { background: var(--color-primario-hover); }

  /* OVERLAY */
  .mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 549;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .mobile-overlay--visible {
    opacity: 1;
    pointer-events: all;
  }

  /* TOOLBAR — vuelve a mostrarse en mobile (la base lo esconde en desktop) porque acá sigue
     haciendo falta el botón para abrir el cajón de filtros/orden/vista. */
  .content-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0.5rem 0.6rem;
  }

  .mobile-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-fondo-superficie);
    border: 1.5px solid var(--color-borde-fuerte);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-texto);
    cursor: pointer;
    position: relative;
  }

  .mobile-filter-count {
    background: var(--color-primario);
    color: var(--color-texto-sobre-color);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* VISTA MAPA — 620px fijos (valor desktop) no entra cómodo en una pantalla de 375px de alto
     variable; se ata a la altura visible en vez de a un valor fijo. */
  #results-map {
    height: 70vh;
  }

  /* CARDS */
  .cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .notes-top-strip-grid { gap: 0.75rem; }

  /* Tarjeta blanca de 1 sola nota, versión mobile — en fila (texto+foto lado a lado) no entra
     cómodo en una pantalla chica, así que apila: foto arriba, texto abajo. */
  .notes-top-strip-grid[data-shown-count="1"] .notes-strip-item {
    flex-direction: column;
    height: auto;
  }

  .notes-top-strip-grid[data-shown-count="1"] .notes-strip-photo-link {
    order: -1;
    flex: 0 0 144px;
    width: auto;
    margin: 14px 14px 0 14px;
  }

  .notes-top-strip-grid[data-shown-count="1"] .notes-strip-info {
    padding: 2.5rem 1rem 3rem;
  }

  /* Tarjeta de 2 notas, versión mobile (2026-08-09, migrado de Gonzalo/index.css) — el layout
     lado a lado nuevo (foto a la mitad del ancho) necesita ancho de sobra; en mobile la grilla ya
     cae a 2 columnas de por sí (applyNotesStripColumns en home.js), así que cada tarjeta queda
     demasiado angosta para partirla otra vez al medio sin que el texto quede apretadísimo. Mismo
     criterio que la tarjeta de 1 nota acá arriba: en mobile vuelve a apilar (foto arriba, texto
     abajo), altura libre en vez de los 198px fijos de escritorio. */
  .notes-top-strip-grid[data-shown-count="2"] .notes-strip-item {
    flex-direction: column;
    height: auto;
  }

  .notes-top-strip-grid[data-shown-count="2"] .notes-strip-photo-link {
    order: -1;
    flex: 0 0 110px;
    width: auto;
    margin: 0;
    border-radius: 0;
  }

  .notes-top-strip-grid[data-shown-count="2"] .notes-strip-info {
    padding: 0.55rem 0.8rem;
    justify-content: flex-start;
  }

  .notes-top-strip-grid[data-shown-count="2"] .notes-strip-author-top {
    position: static;
    order: 3;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 4px 0.8rem 8px;
    align-self: flex-start;
  }

  .card-img-wrap { height: 220px; }
  .card-city { font-size: 1.2rem; }

  .card-action-btn {
    width: 24px;
    height: 24px;
  }

  .card-action-btn svg { width: 13px; height: 13px; }
  .card-action-btn--vs { font-size: 0.55rem; }

  .card-actions { gap: 4px; top: 7px; right: 7px; }

  /* Como máximo 1 tag visible + "+N" con el resto (mismo criterio que home.css, Agustin 2026-08-18):
     con 3 tags de punta a punta, uno largo envolvía .card-tags a 2-3 líneas y estiraba .card-info
     más allá del alto fijo de .card-img-wrap, empujando el badge de notas fuera del área visible de
     la card. Acotado a cards armadas con buildTagsHtml() (traen data-tag-idx). */
  .card-tags:has([data-tag-idx]) { min-height: 0; }
  .card-tag[data-tag-idx]:not([data-tag-idx="0"]) { display: none; }
  .card-tag--more-desktop { display: none; }
  .card-tag--more-mobile { display: inline-block; flex-shrink: 0; }

  .card-badge-top {
    font-size: 0.55rem;
    padding: 3px 6px;
    max-width: 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* LISTA en mobile: columna única */
  .cards-grid.list-view { grid-template-columns: 1fr; }

  .cards-grid.list-view .dest-card-home {
    min-height: 160px;
  }

  .cards-grid.list-view .card-img-wrap {
    width: 160px;
  }

  /* Bug real (reportado por Agustin, 2026-08-02): con la columna de imagen a 160px, a la columna
     de texto le quedan ~107px — el nombre + los 3 botones (corazón/pin/VS) de .list-actions no
     entran en una sola fila (.list-actions tiene flex-shrink:0), así que el botón VS quedaba
     recortado por el overflow:hidden de la card, y el nombre se achicaba a un ancho absurdo. Con
     flex-wrap, si no entran en la misma fila los botones bajan solos a una fila propia en vez de
     forzar el achique/recorte. */
  .list-header { flex-wrap: wrap; }

  .list-city { font-size: 1.2rem; }
  .list-desc { display: none; }
  .list-meta { display: none; }
}

/* ── Banner "morado" de portada, mismo look que VersusPublico (.vs-hero-card en versus-publico.css)
   — /destinations vive con header estándar, no el hero de Home, así que necesita su propio banner de
   presentación arriba del buscador. Clases propias (no compartidas con .home-wrapper) para no atar
   este archivo a versus-publico.css. */
.dest-hero-card {
  background: #1e3650;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.dest-hero-top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.6rem 2rem;
  text-align: left;
}

.dest-hero-text { min-width: 0; }

.dest-hero-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--color-texto-sobre-color);
  margin-bottom: 0.3rem;
}

.dest-hero-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  max-width: 560px;
  margin: 0;
}

@media (max-width: 768px) {
  .dest-hero-title { font-size: 1.6rem; }
  .dest-hero-sub { font-size: 0.85rem; }
  .dest-hero-top { padding: 1.2rem 1rem; flex-wrap: wrap; }
}