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

/* Banner contenido, no full-bleed (2026-08-18/19, pedido de Gonzalo, "opción A": "solo de ancho")
   — reemplaza el tratamiento anterior (foto a sangre completa + header flotando encima). Con el
   header ya sólido y sticky (ver .home-hero .site-header en layout.css: pasó de fixed/flotando a
   sticky/empujando), el banner ya no necesita compensar nada — mide lo mismo que las cards de
   "Crea tu viaje"/"Comunidad de viajeros" de abajo (hereda el ancho de .home-wrapper, sin ningún
   margin negativo ni width:auto) y arranca en el flujo normal, después del header. */
.home-hero .landscape-banner {
  /* +64px sobre el resto del cálculo (2026-08-18/19, pedido de Gonzalo) — lugar real para
     .banner-search-modes, que ahora es siempre visible debajo del buscador (antes esta altura no
     tenía que contemplarlo). */
  height: 400px;
}

/* 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. Esquinas redondeadas en las 4 (2026-08-18/19) — mismo 18px que .home-promo-card
   (ver Bloques promocionales), para que se sienta una card más, coherente con el resto de la
   portada — antes solo tenían radio las de abajo (a sangre completa arriba). Sombra sumada para
   que no se vea "pegado/plano" al lado de esas mismas cards, que ya tienen sombra propia. */
.landscape-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

/* 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;
  /* 0.32 → 0.288 (2026-08-24, pedido de Gonzalo: "el fondo un 10% menos oscuro", migrado de
     Gonzalo/index.css) — 10% relativo sobre el valor anterior, no 10 puntos porcentuales. */
  background: linear-gradient(rgba(0,0,0,0.288), rgba(0,0,0,0.288));
}

/* Capa leve adicional (2026-08-22, pedido de Agustin: "destacar más el buscador") — negro sobre
   toda la foto, para que el buscador blanco resalte un poco más sin oscurecer de más el banner. Va
   en ::before para no pisar el degradé de arriba (::after, pensado para la legibilidad del título)
   — ambas capas se suman visualmente. 0.10 → 0.09 (2026-08-24, mismo pedido de -10% que ::after). */
.landscape-banner-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.09);
}

/* Leyenda con la ruta del Destino/Atracción de la foto de fondo (FotoPortada, pedido de Agustin,
   2026-08-22) — completada por cargarFotoPortadaHome() en home.js, oculta (display:none inline)
   mientras no haya lugar asociado. Arriba a la derecha del banner, sobre la foto. Migrado de
   Gonzalo/index.css (2026-08-24, pedido de Gonzalo): pasa de pill blanca con fondo/blur a
   tipografía blanca lisa — Destino, Estado y País (sin Continente) separados por coma, todos con
   el mismo color/peso. Recuadro propio de fondo (mismo día, segunda vuelta del pedido — "un
   recuadro cuadrado con una transparencia un poco más oscura que la del banner para que se lea
   mejor el texto") — negro al 40%, más oscuro que el 0.288 del degradé de
   .landscape-banner-bg::after de arriba. "Cuadrado", no pill: 8px de radio en vez del 999px que
   tenía la versión anterior con fondo. */
.landscape-banner-lugar {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  /* -15% (2026-08-25, pedido de Gonzalo: "achicalo un 15%", migrado de Gonzalo/index.css) sobre
     gap/font-size/padding/radio — 0.4rem → 0.34rem. */
  gap: 0.34rem;
  color: #fff;
  font-weight: 600;
  /* 0.9rem → 0.765rem */
  font-size: 0.765rem;
  text-decoration: none;
  transition: background 0.15s ease;
  background: rgba(0, 0, 0, 0.4);
  /* 0.5rem 0.9rem → 0.425rem 0.765rem */
  padding: 0.425rem 0.765rem;
  /* 8px → 6.8px */
  border-radius: 6.8px;
}

.landscape-banner-lugar:hover {
  background: rgba(0, 0, 0, 0.55);
}

.landscape-banner-lugar svg {
  flex-shrink: 0;
  color: #fff;
}

/* 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.
   Bug real (encontrado 2026-08-19, reportado por Agustin: "las sugerencias no están enlazadas a
   los contenidos" — clickearlas no navegaba a ningún lado): con SOLO :focus-within, el boost se
   caía en el instante exacto de clickear una fila del dropdown — un <div>.search-result no es
   focuseable, así que el mousedown sobre esa fila le saca el foco nativo a #search-input ANTES de
   que se dispare el click; en ese instante .banner-search vuelve a z-index:50, el
   .search-focus-overlay (z-index:90, pointer-events:auto mientras está activo) queda por encima
   del dropdown, y es el overlay el que termina recibiendo el click en vez de la fila — que además
   dispara el cierre del dropdown por "click afuera de #search-wrap" (ver layout.js/home.js), así
   que el resultado visible era "toco la sugerencia y no pasa nada, se cierra". Fix: el boost ahora
   también lo prende/apaga JS (misma clase --active del overlay, ver openAll/closeAll en home.js),
   que no depende del foco real y sobrevive al blur del click. :focus-within se deja como refuerzo
   (no molesta, nunca hace que el boost se apague antes de tiempo). */
.banner-search:focus-within,
.banner-search--focus-boost {
  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, notas). Prendido/apagado por JS
   (buscador-sugeridas.js agrega/saca --active), no por :focus-within (2026-08-18/19, pedido de
   Gonzalo) — el buscador real (#search-wrap) se MUDA de .banner-search al header al scrollear (ver
   "Relocación buscador banner↔header" en home.js), así que un selector atado a
   .banner-search:focus-within deja de matchear apenas eso pasa. El JS escucha el foco directo sobre
   #search-input, que es el mismo nodo esté donde esté. */
.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;
}

.search-focus-overlay--active {
  opacity: 1;
  pointer-events: auto;
}

/* Botones de modo — siempre visibles debajo del buscador (2026-08-18/19, pedido de Gonzalo: antes
   solo aparecían al enfocar). Se esconden (visibility, no display — igual que search-focus-overlay,
   para no correr el centrado flex del banner en pleno click) mientras el buscador tiene el foco,
   momento en que las sugeridas ocupan el #search-dropdown real de arriba (ver renderDefault en
   layout.js). Van a
   las páginas reales /destinations y /experiences (DestinationsPublicoController/
   ExperiencesPublicoController, "clon funcional del buscador de home en su propia URL") — a
   diferencia del mock de Gonzalo, que todavía no tenía backend para linkear (href="#"). */
/* Mismo max-width Y mismo padding lateral que .banner-search (1rem) — no solo el mismo ancho de
   caja: .search-bar adentro de .banner-search es width:100% de su contenido YA restado ese
   padding (668px reales sobre una caja de 700px), así que sin este mismo padding acá los botones
   quedaban 16px más anchos de cada lado que el buscador real, aunque ambos contenedores
   compartieran el mismo max-width:700px nominal (corregido 2026-08-19, avisado por Agustin). */
.banner-search-modes {
  position: relative;
  z-index: 91;
  display: flex;
  width: 100%;
  max-width: 700px;
  padding: 0 1rem;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  visibility: visible;
}

.banner-search-modes--hidden { visibility: hidden; }

/* Colores sólidos violeta/verde (replicado tal cual de Gonzalo/index.css) — mismos #713fc6/
   #1a9b4a que ya usaban .bqs-item--destino/--experiencia (círculos de atajos, sacados en su
   momento), reusados acá para no inventar un violeta/verde nuevo. Alto mínimo 44px (regla de
   mobile del proyecto, tap target) — Gonzalo pidió ~39px en su mock ("bajalo un 40% aunque haya
   que achicar la fuente"), pero eso queda por debajo del mínimo táctil obligatorio de este
   proyecto, así que se respeta el mínimo del proyecto en vez del valor exacto del mock (avisado,
   no un cambio silencioso). */
.bsm-item {
  display: inline-flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 18px;
  color: #fff;
  font-size: 0.82rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bsm-item--destino { background: #713fc6; }
.bsm-item--experiencia { background: #1a9b4a; }

.bsm-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.bsm-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }

.bsm-text { min-width: 0; font-weight: 500; line-height: 1.2; }
.bsm-text strong { font-weight: 800; }

/* Tooltip explicativo al pasar el mouse — mismo mecanismo que .dock-tooltip (layout.css), abre
   hacia abajo (los botones ya están cerca del borde superior del banner). */
.bsm-item { position: relative; }
.bsm-item .bsm-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--color-fondo-superficie);
  border: 1.5px solid #86cc98;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
  padding: 0.7rem 0.85rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-texto-secundario);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 5;
}
.bsm-item:hover .bsm-tooltip { opacity: 1; }

/* Las "Búsquedas sugeridas" por defecto de la home ya NO son un panel aparte (2026-08-19,
   corregido: el `.search-focus-suite` de acá vivía afuera de #search-wrap pese a lo que decía
   el comentario viejo, así que flotaba a lo ancho de toda la sección en vez de calzar con el
   buscador) — ahora se renderizan directo dentro de #search-dropdown (mismo cuadro que los
   resultados reales, ver renderDefault en layout.js). .search-result-group-title (el título
   "Destinos populares"/"Experiencias populares" dentro de esa lista) vive en layout.css, junto
   con el resto de .search-result*, por ser parte de ese mismo componente global. */

.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, acotado a .home-hero. 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.
   Título: pasó por 2 versiones antes de esta — peso 700 sin tracking (de sistema), después peso
   300 con tracking abierto (estilo editorial tipo Canva/Notion). Corregido 2026-08-19 a la
   versión actual de Gonzalo (2026-08-17, "misma fuente, ancho y tamaño" que .home-promo-title):
   peso 800, tracking negativo, tamaño responsive con clamp() en vez de un rem fijo — production
   se había quedado en la versión "editorial" vieja, nunca se sincronizó con este último cambio. */
.home-hero .landscape-banner-title {
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  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 / Comunidad) — replicado tal cual de Gonzalo/index.css
   (rediseño 2026-08-17, a pedido de Gonzalo, reemplaza la versión anterior con foto de fondo:
   ahora fondo de color sólido, ícono blanco cuadrado, botones agrupados en la esquina inferior
   derecha). Cada card tiene su propio acento (navy para Itinerarios, ocean blue para Comunidad)
   en vez de un color repetido — mismo tono ~210° que ya usa .dock-item-icon del header. */
.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: 300px;
  border-radius: 18px;
  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);
}

/* Ícono blanco cuadrado arriba a la izquierda — el color del glifo (currentColor) lo pone cada
   modificador de card más abajo. */
.home-promo-icon {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.home-promo-icon svg { width: 20px; height: 20px; }

.home-promo-body {
  position: relative;
  z-index: 1;
  padding: 108px 2rem 0;
}

.home-promo-title {
  font-size: 2.13rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 0.3rem;
  line-height: 1.05;
}

.home-promo-sub {
  font-size: 0.92rem;
  font-weight: 480;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  margin: 0;
  max-width: none;
}

/* Botones agrupados, clavados en la esquina inferior derecha. align-items:flex-start (no el
   default stretch) para que "Crea con Wondar IA" (intrínsecamente más alto por el ícono de 22px
   adentro) no estire también a "Crea"/"Ver comunidad" a esa misma altura. */
.home-promo-actions {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.home-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: #000;
  font-weight: 700;
  font-size: 0.69rem;
  padding: 0.54rem 0.94rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-promo-btn:hover {
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.home-promo-btn svg { flex-shrink: 0; }

/* Ícono de "Crea con Wondar IA" — mismo degradé que .dock-item--ai .dock-item-icon del menú
   (asistente-ia.js abre el mismo modal único del sitio, nunca un placeholder), solo escalado
   para el botón. Exclusivo de la card de Itinerarios. */
.home-promo-ai-icon {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, #7ea8f5, #b090d9, #ef7fab, #f9c53f, #5fb87e);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-promo-ai-icon svg { width: 7px; height: 7px; }

/* "Crea con Wondar IA" pasa de pill blanca (con el degradé solo en el icono chico de adentro) a
   pill entera con el degradé de marca (2026-08-25, pedido de Gonzalo, migrado de Gonzalo/index.css)
   — mismo degradé que .dock-item--ai .dock-item-icon/.wondar-ia-float (layout.css), nunca un color
   nuevo para la misma feature. Texto blanco (misma especificidad que .home-promo-btn/:hover de
   arriba — gana por orden de aparición, más abajo en el archivo) y el icono de adentro pasa a
   transparente: con el pill entero ya en degradé, la cajita chica con su propio degradé quedaba
   duplicada encima. */
.home-promo-btn--ai {
  background: linear-gradient(135deg, #7ea8f5, #b090d9, #ef7fab, #f9c53f, #5fb87e);
  color: #fff;
}
.home-promo-btn--ai .home-promo-ai-icon {
  background: transparent;
}

.home-promo-card--itinerarios {
  background: #1e3650;
  box-shadow: 0 10px 30px rgba(30, 54, 80, 0.22);
}
.home-promo-card--itinerarios .home-promo-icon { color: #1e3650; }

.home-promo-card--red {
  background: #2e6f9e;
  box-shadow: 0 10px 30px rgba(46, 111, 158, 0.22);
}
.home-promo-card--red .home-promo-icon { color: #2e6f9e; }

/* Espacio extra bajo el subtítulo solo en Comunidad — ahí abajo van los chips de nota;
   Itinerarios no tiene nada entre el subtítulo y los botones, no necesita ese aire. */
.home-promo-card--red .home-promo-sub {
  margin-bottom: 0.7rem;
}

/* Chips de nota puntual (@usuario · Nota sobre {destino}) — blanco sólido siempre puesto (no
   solo al hover), texto negro al 75% de opacidad porque son texto secundario, no la acción
   principal de la card. */
.home-promo-notes {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.home-promo-note-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.27rem;
  background: #fff;
  border-radius: 999px;
  padding: 0.24rem 0.55rem 0.24rem 0.24rem;
  font-size: 0.61rem;
  font-weight: 595;
  color: rgba(0, 0, 0, 0.75);
  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-note-chip:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 6px 14px rgba(0,0,0,0.24);
}

/* Foto de perfil real del autor cuando existe (pubAvatarUrl, ver homePromoCargarNotas en
   home.js) — #ddd de fondo es el fallback mientras carga o si no tiene foto (ahí se muestran las
   iniciales como texto, ver .home-promo-note-avatar--iniciales). */
.home-promo-note-avatar {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ddd;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.home-promo-note-avatar--iniciales {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-acento);
  color: #fff;
  font-size: 0.42rem;
  font-weight: 700;
}

/* El mobile de .home-promo-row/.home-promo-card vive en el bloque maestro "RESPONSIVE — MOBILE"
   más abajo (junto con el resto de las reglas mobile del archivo), no acá — así no queda una
   regla duplicada compitiendo por orden de cascada con la de ese bloque. */

/* BLOQUE VERSUS (migrado de Gonzalo/index.css, 2026-08-18) — tercer bloque promocional, ancho
   completo (a diferencia de .home-promo-row de arriba, acá no comparte fila con otra card).
   Mismo lenguaje visual que esas cards (ícono blanco cuadrado, título/subtítulo blancos, botón
   píldora), pero acá el fondo es color sólido fijo (no hay foto atrás) y la foto vive aparte, a
   la derecha, partida en dos con una insignia "VS" en el medio. Navy #1e3650, mismo tono que ya
   usa el ícono de "Versus" del menú (.dock-item--versus) y .home-promo-card--itinerarios. */
.home-versus-promo {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  background: #1e3650;
  box-shadow: 0 10px 30px rgba(30, 54, 80, 0.22);
  margin-bottom: 1.5rem;
}

.home-versus-body {
  flex: 1 1 52%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.9rem;
  padding: 2.75rem 3rem;
}

.home-versus-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #fff;
  color: #1e3650;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.home-versus-title {
  font-size: 2.13rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
  line-height: 1.05;
}

.home-versus-sub {
  font-size: 0.92rem;
  font-weight: 480;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  margin: 0;
  max-width: 420px;
}

/* Botón propio, autocontenido (no depende de .home-promo-btn — esa clase es de un rediseño
   distinto de las cards de arriba que todavía no se migró, ver pendientesFinalizadosGA #16). */
.home-versus-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: #000;
  font-weight: 700;
  font-size: 0.69rem;
  padding: 0.54rem 0.94rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 0.3rem;
}
.home-versus-btn:hover {
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.home-versus-btn svg { flex-shrink: 0; }

/* La foto no llega al borde del bloque — recuadro con margen/esquinas redondas propias.
   overflow:hidden es lo que recorta las 2 fotos partidas a las esquinas redondas de este
   recuadro (las fotos en sí no tienen radio propio). */
.home-versus-image {
  position: relative;
  flex: 1 1 48%;
  min-width: 0;
  display: flex;
  margin: 24px 24px 24px 0;
  border-radius: 16px;
  overflow: hidden;
}

.home-versus-photo {
  flex: 1 1 50%;
  min-width: 0;
  background-size: cover;
  background-position: center;
}

/* Insignia "VS" centrada exactamente en la unión de las 2 fotos. */
.home-versus-vs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #1e3650;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
  .home-versus-promo { flex-direction: column; min-height: 0; }
  .home-versus-body { padding: 1.6rem 1.1rem; gap: 0.7rem; }
  .home-versus-icon { width: 41px; height: 41px; border-radius: 14px; }
  .home-versus-title { font-size: 1.73rem; }
  .home-versus-sub { font-size: 0.8rem; max-width: none; }
  .home-versus-image { min-height: 160px; margin: 0 1.1rem 1.6rem; border-radius: 14px; }
  .home-versus-vs { width: 44px; height: 44px; font-size: 0.8rem; }
}

/* DESTINOS POPULARES / EXPERIENCIAS POPULARES (migrado de Gonzalo/index.css, 2026-08-18) — dos
   filas fijas de 4 cards al pie de la home, debajo del bloque Versus. Reusan tal cual las cards
   reales del sitio (.dest-card-home/.exp-card, más abajo en este mismo archivo) — acá solo se
   define el envoltorio de sección (título + grilla de 4 + link "Ver todos/as"). Sin flechas de
   carrusel a propósito: son siempre 4 fijas, no hay nada para scrollear. */
.home-popular-section {
  margin-bottom: 1.5rem;
}

.home-popular-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-texto);
  margin: 0 0 10px;
}

.home-popular-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.home-popular-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.85rem;
}

/* Botón "Ver todos/as" (2026-08-21, reemplaza al link .home-popular-more de antes) — pill sólida
   coloreada por categoría, mismo color que ya distingue destino/experiencia en el resto del sitio
   (.search-result-tipo--destino/--atraccion en layout.css: --color-secundario para destino,
   --color-exito para experiencia). Reusa el mismo ícono que ya lleva el <h2> de cada sección. */
.home-popular-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-sobre-color);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.home-popular-cta:hover { transform: translateY(-1px); }
.home-popular-cta svg { flex-shrink: 0; }

.home-popular-cta--destinos { background: var(--color-secundario); }
.home-popular-cta--destinos:hover { background: var(--color-secundario-hover); }

.home-popular-cta--experiencias { background: var(--color-exito); }
.home-popular-cta--experiencias:hover { filter: brightness(0.92); }

@media (max-width: 768px) {
  .home-popular-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

/* 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;
  color: var(--color-primario);
  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.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;
}

/* 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 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--color-texto);
  cursor: pointer;
  font-weight: 500;
  padding: 6px 9px;
  border: 1.5px solid var(--color-borde);
  border-radius: 8px;
  background: var(--color-fondo-superficie-alt);
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.filter-list label:hover {
  border-color: var(--color-borde-fuerte);
}

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

.filter-list label:has(input:checked) {
  background: var(--color-primario-fondo);
  border-color: var(--color-primario);
  color: var(--color-primario-hover);
}

.filter-list label:has(input:checked) span[id^="f-"] {
  color: var(--color-primario);
}

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

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

.view-btn--active { background: var(--color-primario); 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
   escritorio — ver buildTagsHtml en home.js) solo se muestra dentro del media query mobile de más
   abajo; en desktop se mantiene oculto igual que en el resto del sitio. */
.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 — replicado tal cual del mobile de Gonzalo/index.css (rediseño
     2026-08-17/18): ícono/tipografía se achican un escalón y los botones (.home-promo-actions)
     dejan de ser position:absolute (pasan a fluir apilados al final de la card) para que nunca
     se pisen con el título/subtítulo, 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: 20px;
    left: 20px;
    width: 41px;
    height: 41px;
    border-radius: 14px;
  }
  .home-promo-icon svg { width: 17px; height: 17px; }

  .home-promo-body { padding: 76px 1.1rem 0; }

  .home-promo-title { font-size: 1.73rem; margin-bottom: 0.15rem; }
  .home-promo-sub {
    font-size: 0.8rem;
    max-width: none;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .home-promo-card--red .home-promo-sub { margin-bottom: 0.55rem; }
  .home-promo-note-chip { font-size: 0.56rem; }
  .home-promo-note-avatar { width: 14px; height: 14px; }

  .home-promo-actions {
    position: static;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.1rem 1.1rem;
  }
  .home-promo-btn { justify-content: center; }

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

  /* :not(.card-notas-badge) — el badge de "1 nota" comparte la clase .card-action-btn (por el
     box-shadow/hover) pero es una pastilla, no un botón circular; sin esta exclusión este 24x24
     le ganaba por orden de cascada al width:fit-content de .card-notas-badge y lo aplastaba a un
     círculo con el ícono y el texto amontonados. */
  .card-action-btn:not(.card-notas-badge) {
    width: 24px;
    height: 24px;
  }

  .card-action-btn:not(.card-notas-badge) 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 (Agustin, 2026-08-18): con 3 tags de punta a
     punta, uno largo ("RUINAS Y SITIOS ARQUEOLÓGICOS") 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) — el propio
     hero de Destino (.destino-panel .card-tags, hasta 5 tags sin tope) no usa ese helper y sigue
     mostrando todos, ahí no hay alto fijo que desborde. */
  .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-notas-badge { white-space: nowrap; }

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