/* 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;
}

/* 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;
}

/* 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: white;
  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;
}

/* 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: white;
  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: white;
  padding: 1rem;
}

/* 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: #1a1a2e;
  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: #999;
  cursor: help;
}

.filters-info-wrap:hover,
.filters-info-wrap:focus-visible { color: #555; outline: none; }

.filters-info-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 200px;
  max-width: calc(100vw - 32px);
  background: #1a1a2e;
  color: white;
  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: #eee;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #555;
}

.clear-filters-btn {
  background: none;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: #2563eb;
  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 #f0f0f0;
  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: #1a1a2e;
}

/* "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 #f0f0f0;
  padding: 0.75rem 0;
}

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

.filter-group {
  margin-bottom: 0;
  border-bottom: 1px solid #f0f0f0;
  padding: 0.75rem 0;
}

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

.filter-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  user-select: none;
}

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

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

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

.filter-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.filter-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: #111;
  cursor: pointer;
  font-weight: 400;
}

.filter-count {
  color: #999;
  font-size: 0.74rem;
}

.filter-list input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid #bbb;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}

.filter-list input[type="checkbox"]:checked {
  background: #16a34a;
  border-color: #16a34a;
}

.filter-list input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Filtro de calificación / ordenar por (radio, selección única) */
.filter-list input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid #bbb;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s;
}

.filter-list input[type="radio"]:checked {
  border-color: #1a1a2e;
}

.filter-list input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #1a1a2e;
}

/* 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 #e5e5e5;
  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: #f4f5f7;
  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: #777;
}

.view-btn--active { background: #2563eb; color: white; }

/* 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: #777;
  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 #e5e5e5;
}

.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: #2563eb;
  text-decoration: none;
  white-space: nowrap;
}

/* 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: #f0f0f2;
  border-radius: 14px;
  border: 2.5px solid #7c3aed;
  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;
  background-size: cover;
  background-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, #7c3aed 0%, #a78bfa 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, #f5820c 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: #1a1a2e;
  color: white;
  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: white;
}

/* 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 (#f5820c, 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: white;
  border-color: #f5820c;
}

.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: #f5820c;
}

.notes-top-strip-grid[data-shown-count="1"] .notes-strip-info {
  position: static;
  max-width: none;
  flex: 1;
  min-width: 0;
  color: #1a1a2e;
  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: #777;
}

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

.notes-top-strip-grid[data-shown-count="1"] .notes-strip-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  color: #555;
}

/* 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: #555;
}

.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 rediseño blanco+naranja que la de 1 sola nota, pero apiladas
   (foto arriba, texto abajo) en vez de lado a lado — a este ancho no entra una foto al costado sin
   quedar todo apretado. */
.notes-top-strip-grid[data-shown-count="2"] .notes-strip-item,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-item {
  display: flex;
  flex-direction: column;
  background: white;
  border-color: #f5820c;
}

.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-photo-link,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-photo-link {
  position: relative;
  inset: auto;
  order: -1;
  width: 100%;
  flex-shrink: 0;
}

/* Con las tres tarjetas a 198px de alto fijo, la foto cede espacio para que ubicación+título 2
   renglones+autor entren sin desbordar (.notes-strip-item recorta con overflow:hidden). */
.notes-top-strip-grid[data-shown-count="2"] .notes-strip-photo-link { flex-basis: 70px; }
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-photo-link { flex-basis: 60px; }

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-badge,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-badge {
  background: #f5820c;
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-info,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-info {
  position: static;
  max-width: none;
  flex: 1;
  min-width: 0;
  color: #1a1a2e;
  padding: 0.55rem 0.8rem;
  display: flex;
  flex-direction: column;
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-location,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-location {
  color: #777;
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-title,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-title {
  color: #1a1a2e;
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-excerpt {
  color: #555;
}

/* Autor al final del bloque de texto (order alto para que quede después de .notes-strip-info, que
   por defecto tiene order:0 y va antes en el DOM). */
.notes-top-strip-grid[data-shown-count="2"] .notes-strip-author-top,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-author-top {
  position: static;
  order: 3;
  background: none;
  padding: 0;
  margin: 6px 0.9rem 0.75rem;
  align-self: flex-start;
}

.notes-top-strip-grid[data-shown-count="2"] .notes-strip-author,
.notes-top-strip-grid[data-shown-count="3"] .notes-strip-author {
  color: #555;
}

.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);
}

/* 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);
}

/* 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: white;
  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 #7c3aed;
}

.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 #16a34a;
  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: #7c3aed; }
.card-strip--exp   { background: #16a34a; }
.card-strip--promo { background: #d97706; }

/* ── Experiencia promocionada ── */
.exp-card--promo {
  border-color: #d97706;
  position: relative;
}

.exp-promo-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #d97706;
  color: white;
  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: white;
  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;
}

/* Fallback puramente visual mientras el destino todavía no tiene foto propia asegurada
   (ver /poblarImagenes) — nunca se graba nada en la base por esto, así que en cuanto el backend
   consiga la foto real de Unsplash, la card la muestra sola sin tocar este código. */
.card-img-bg--sin-foto {
  background: linear-gradient(135deg, #d4d4d8, #a1a1aa);
}

.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 #7c3aed 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: #7c3aed;
  color: white;
  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: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #333;
  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: #7c3aed;
  color: #fff;
  box-shadow: 0 0 0 2px #7c3aed;
}

.card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 0.9rem;
  color: white;
}

.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: #e53e3e;
  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 #7c3aed 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: white;
}

/* "+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);
}

/* 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: #f5f3ff;
  color: #7c3aed;
  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: white;
  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: #1a1a2e;
  line-height: 1.1;
}

.list-location {
  font-size: 0.78rem;
  color: #999;
  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: #1a1a2e;
}

.list-rating-bar {
  width: 140px;
  height: 7px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.list-rating-bar span {
  display: block;
  height: 100%;
  background: #e53e3e;
  border-radius: 3px;
}

.list-desc {
  font-size: 0.8rem;
  color: #666;
  line-height: 1.55;
}

.list-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 2rem;
  background: #f8f8fb;
  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: #bbb;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.meta-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a1a2e;
}

/* 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: #7c3aed;
  font-weight: 600;
}

.cargando-mas-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid #e5deff;
  border-top-color: #7c3aed;
  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: #1a1a2e;
  margin-bottom: 0.5rem;
}

.empty-desc {
  font-size: 0.85rem;
  color: #888;
  line-height: 1.6;
}

/* BOTONES ACTIVOS EN CARDS — violeta "destino" (2026-07-30, migrado de Gonzalo), mismo #7c3aed 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: #7c3aed; }
.btn-heart.active svg { fill: #7c3aed; stroke: #7c3aed; }
.btn-pin.active { color: #7c3aed; }
.btn-pin.active svg { fill: #7c3aed; }

/* ─── 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; }

  /* 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: #2563eb;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
  }

  .filters-sidebar-close:hover { background: #1d4ed8; }

  /* 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: white;
    border: 1.5px solid #ddd;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    position: relative;
  }

  .mobile-filter-count {
    background: #2563eb;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 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;
  }

  .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; }

  .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; }
}