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

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f4f5f7;
  color: #1a1a2e;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  flex: 1 0 auto;
}

/* HEADER — migrado de Gonzalo/index.html (commit "2707", 2026-07-27): pasa a position:sticky (antes
   fixed, pedido de Agustin del 2026-07-24, pisado acá a pedido explícito del mismo Agustin de calcar
   el diseño de Gonzalo tal cual) — con sticky el header vuelve a ocupar su lugar real en el flujo del
   documento, así que .page-content ya no necesita el padding-top fijo que compensaba el fixed de antes.
   Reemplaza .site-header-inner (grid de 1 sola fila logo/nav/acciones + fila aparte para el buscador)
   por .header-top (logo + buscador centrado + acciones, todo en una fila) más un <nav class="quick-menu">
   aparte debajo, con los accesos rápidos en formato ícono+título+bajada. */
.site-header {
  background: white;
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 3.5rem 16px;
}

/* Grid (no flex) a propósito: con flex el buscador se centraba en el espacio libre entre logo y
   acciones, no respecto a la página — como logo/acciones no miden lo mismo, quedaba corrido. Con
   columnas 1fr/minmax(0,700px)/1fr, las dos columnas de los costados miden siempre igual y el
   buscador queda centrado de verdad. */
.header-top {
  display: grid;
  grid-template-columns: 1fr minmax(0, 700px) 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* Vacío/oculto en todas las páginas salvo la home — sin este display:none, el div (sin
   grid-column asignado) queda auto-ubicado por CSS Grid en una fila implícita nueva, sumando un
   gap de fila extra debajo de .header-top (bug real: desalineaba el logo respecto al resto del
   header en toda página que no fuera la home). */
.header-search-slot {
  display: none;
}

/* En la home, mientras el buscador está en el header (scrolleado, ver home.js), el header vuelve
   a este mismo grid de 3 columnas — .header-top--no-search (más abajo) lo pisa con flex mientras
   el buscador vive en el banner. */
.header-top--search-active {
  display: grid;
  grid-template-columns: 1fr minmax(0, 700px) 1fr;
  align-items: center;
}

.header-top--search-active .header-search-slot {
  display: block;
  grid-column: 2;
  width: 100%;
}

/* Solo en la home (agregado por home.js al cargar): sin buscador en el header —mudado al banner de
   abajo—, esta fila pasa a 2 columnas (logo + acciones) en vez del grid de 3 con el hueco central
   que dejaría el buscador ausente. */
.header-top--no-search {
  display: flex;
  justify-content: space-between;
}

.logo {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2D2547;
}

.logo-img {
  height: 72px;
  width: auto;
}

.header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Botón "Sugerencias" del header — misma altura que los redondeles (lang/perfil, 38px) pero en
   forma de píldora. */
.suggestion-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  background: #f5820c;
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.suggestion-btn:hover { background: #e17509; }

.lang-wrapper {
  position: relative;
}

.lang-btn {
  background: none;
  border: 1.5px solid #ccc;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s;
}

.lang-btn:hover { border-color: #999; }

.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  min-width: 160px;
  z-index: 200;
}

.lang-dropdown--open { display: block; }

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: #333;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.lang-option:hover { background: #f4f5f7; }

.lang-option--active {
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
}

.user-wrapper {
  position: relative;
}

.user-btn {
  background: none;
  border: 1.5px solid #ccc;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  position: relative;
  flex-shrink: 0;
}

.user-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid #fff;
}

/* Dropdown de perfil+notificaciones (migrado de Gonzalo/index1.html, 2026-07-30) — un solo botón
   (.user-btn de arriba) despliega menú de cuenta + últimas notificaciones, en vez de navegar
   directo. Solo se abre con sesión (ver layout.js); sin sesión, el click sigue abriendo el modal de
   login como siempre. */
.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  width: 340px;
  max-width: calc(100vw - 32px);
  z-index: 200;
  overflow: hidden;
}

.user-dropdown--open { display: block; }

.user-menu {
  padding: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 10px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a2e;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.user-menu-item:hover { background: #f4f5f7; }

.user-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  flex-shrink: 0;
}

.notif-section {
  padding-top: 2px;
}

.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.notif-dropdown-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a2e;
}

.notif-mark-all {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.notif-mark-all:hover { text-decoration: underline; }

.notif-list {
  max-height: 360px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #f6f6f7;
  transition: background 0.12s;
}

.notif-item:last-child { border-bottom: none; }

.notif-item:hover { background: #f4f5f7; }

.notif-item--unread { background: #eff6ff; }

.notif-item--unread:hover { background: #e3efff; }

.notif-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.notif-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-line {
  font-size: 0.82rem;
  color: #333;
  line-height: 1.35;
}

.notif-line strong { color: #1a1a2e; }

.notif-time {
  font-size: 0.7rem;
  color: #999;
}

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0;
}

.notif-vacio {
  padding: 20px 16px;
  font-size: 0.82rem;
  color: #999;
  text-align: center;
}

/* "Ver todas" — pedido explícito de Agustin (2026-07-30): a diferencia del mock de Gonzalo (que no
   lo tenía), va a /perfil en vez de /not, que ya existe con el listado completo — decisión de
   producto suya para más adelante. */
.notif-ver-todas {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  border-top: 1px solid #f0f0f0;
}

.notif-ver-todas:hover { background: #f4f5f7; }

.header-search {
  grid-column: 2;
  width: 100%;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1.5px solid #acacac;
  border-radius: 50px;
  padding: 10px 20px;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.search-icon { color: #999; flex-shrink: 0; }

.search-input {
  border: none;
  outline: none;
  font-size: 0.9rem;
  color: #333;
  width: 100%;
  background: transparent;
}

.search-input::placeholder { color: #aaa; }

.search-wrap {
  position: relative;
  width: 100%;
}

.search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  display: flex;
  align-items: center;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s;
}
.search-clear:hover { color: #555; }

/* flex column: la lista de resultados scrollea sola (.search-results-list) y "Ver todos los
   resultados" queda siempre fijo debajo, fuera del scroll — antes compartían el mismo scroll y
   ese link terminaba tapado/había que scrollear para verlo. */
.search-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  z-index: 200;
  overflow: hidden;
  max-height: 420px;
}

.search-dropdown--open { display: flex; }

.search-results-list {
  overflow-y: auto;
  min-height: 0;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.12s;
}
.search-result:hover { background: #f8f9fb; }

.search-result-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Genérico cuando el resultado no tiene foto — mismo criterio que .fp-board-cover--empty /
   .gp-item-thumb--empty: nunca cambia de forma/tamaño respecto al caso con foto, solo el fondo. */
.search-result-img--empty {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  color: #7c3aed;
}

.search-result-info { flex: 1; min-width: 0; }

/* Tag de tipo (Continente/País/Región/Destino/Atracción) a la derecha de cada resultado — ancho
   fijo basado en "Continente" (la palabra más larga en los 4 idiomas), para que no salte el layout
   entre resultados de distinto tipo. */
.search-result-tipo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  min-width: 96px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.search-result-tipo--continente { background: #2563eb; }
.search-result-tipo--pais { background: #ea580c; }
.search-result-tipo--estado { background: #0891b2; }
.search-result-tipo--destino { background: #7c3aed; }
.search-result-tipo--atraccion { background: #16a34a; }
.search-result-tipo--nota { background: #d97706; }
.search-result-tipo--usuario { background: #64748b; }

.search-result-city {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-city mark {
  background: none;
  color: #2563eb;
  font-weight: 800;
}

.search-result-location {
  font-size: 0.75rem;
  color: #999;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-no-results {
  padding: 2rem 1.5rem 0.5rem;
  text-align: center;
  color: #aaa;
  font-size: 0.85rem;
}

.search-sugerencia-cta {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0.75rem 1.5rem 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #7c3aed;
  cursor: pointer;
}
.search-sugerencia-cta:hover { text-decoration: underline; }

.search-ver-todos {
  display: block;
  flex-shrink: 0;
  text-align: center;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #7c3aed;
  text-decoration: none;
  border-top: 1px solid #f0f0f3;
}
.search-ver-todos:hover { background: #f8f9fb; }

/* MENÚ DE ACCESOS RÁPIDOS — migrado de Gonzalo/index.css (commit "2707", 2026-07-27). Grid de 8
   botones debajo del buscador. El ancho de este bloque se calcula igual que el de .home-wrapper/.hero
   (max-width 1280px + el mismo padding lateral, centrado) en vez de heredar el padding del header —
   el header tiene más padding lateral (3.5rem) que el banner (1.5rem), así que si dejábamos que el
   bloque ocupara "todo el header" nunca iba a coincidir con el ancho real del banner. left:50%/
   translateX(-50%) lo saca del padding del header y lo recentra respecto a la página, con el mismo
   padding que usa el banner. */
.quick-menu {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  width: 100vw;
  max-width: 1280px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 1.5rem;
  box-sizing: border-box;
  transition: gap 0.2s ease;
}

.qm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start (no center) a propósito: si se centra el bloque entero (ícono+texto), el ícono
     queda a distinta altura en cada botón según cuántas líneas ocupe el título/bajada de ese
     botón en particular. Con flex-start + un padding-top fijo, el ícono (y el arranque del
     título, justo debajo) quedan siempre a la misma altura en los 8 botones. */
  justify-content: flex-start;
  text-align: center;
  gap: 6px;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 16px 6px 10px;
  border: 1.5px solid #acacac;
  border-radius: 14px;
  background: white;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, padding 0.2s ease, transform 0.15s ease;
}

/* Efecto de movimiento suave al pasar el mouse — para los 8 botones por igual, incluido Wondar IA. */
.qm-item:hover { transform: translateY(-3px); }

/* 2026-07-29, a pedido de Gonzalo: todos los botones tienen tooltip ahora (antes solo Wondar IA),
   así que el overflow:hidden de base (pensado para el ícono/texto, no para el tooltip) se saca en
   hover en los 8 por igual — mismo criterio que ya tenía Wondar IA con overflow:visible fijo en
   .qm-item--ai, pero acá solo mientras dura el hover. */
.qm-item:hover { overflow: visible; }

/* Wondar IA — degradé animado, mismo mecanismo que el botón "Wondar IA" real de livewondar.com
   (fondo al 300% de ancho + animación de background-position, ver .wondaria-btn/@wondaria-flow
   en wondar-ia-modal.css). Colores en punto medio entre el pastel que tenía Gonzalo antes y el
   arcoíris bien saturado de producción — cada tono es el promedio matemático entre ambos extremos.
   Suma también un resplandor suave (box-shadow), versión más floja del glow que tiene el de
   producción. Corre siempre (constante), no solo al pasar el mouse. */
@keyframes qm-ai-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
.qm-item--ai {
  position: relative;
  overflow: visible; /* .qm-item base tiene overflow:hidden — acá lo pisamos para que el tooltip de abajo no quede cortado */
  background: linear-gradient(90deg, #8db5f7, #c1a6e0, #f292b7, #fcd462, #86cc98, #8db5f7) 0% 0% / 300% 100%;
  animation: qm-ai-flow 6s linear infinite;
  box-shadow: 0 0 10px rgba(155, 114, 203, 0.3);
  border-color: transparent;
}

.qm-item--ai .qm-sub { color: #1a1a1a; }

/* Tooltip explicativo — antes solo en Wondar IA, ahora en los 8 botones (2026-07-29, a pedido de
   Gonzalo, migrado de Gonzalo/index.css). Un tooltip más elaborado que el genérico [data-tip] de una
   línea del resto del sitio, porque acá hace falta explicar qué hace la feature, no solo poner una
   etiqueta corta. Centrado respecto al botón (left:50% + translateX(-50%), combinado con la
   traslación vertical de la animación de aparición en el mismo transform). .qm-ai-tooltip y
   .qm-tooltip comparten esta base — Wondar IA suma el encabezado de marca (logo+badge "AI") que el
   resto no necesita. */
.qm-ai-tooltip,
.qm-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 240px;
  max-width: min(240px, calc(100vw - 32px));
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
  padding: 12px 14px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #333;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
  pointer-events: none;
}

/* Reborde verde Wondar (2026-07-29, a pedido de Gonzalo) — mismo verde de la marca que ya usa el
   degradé de Wondar IA (#86cc98), en vez del violeta que tenía antes solo Wondar IA. */
.qm-ai-tooltip,
.qm-tooltip {
  border: 1.5px solid #86cc98;
}

/* Encabezado de marca — logo + badge "AI" con degradé, para que no sea solo texto plano. Exclusivo
   de Wondar IA, el resto de los tooltips no lo tiene. */
.qm-ai-tooltip-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0eaf9;
}

.qm-ai-tooltip-logo { height: 23px; width: auto; }

.qm-ai-tooltip-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: white;
  background: linear-gradient(90deg, #6b8de8, #a77ddb, #e0709f);
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.4;
}

.qm-ai-tooltip strong,
.qm-tooltip strong {
  display: block;
  color: #1a1a1a;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.qm-ai-tooltip::before,
.qm-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: white;
}

.qm-item:hover .qm-tooltip,
.qm-item--ai:hover .qm-ai-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Sin círculo detrás — ícono directo sobre el fondo de la tarjeta, mismo criterio en todas
   (incluida Wondar IA, que tampoco lleva círculo blanco arriba del degradé). */
.qm-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
}

.qm-icon svg { width: 28px; height: 28px; stroke-width: 2.5; }

.qm-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.qm-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}

.qm-sub {
  font-size: 12px;
  font-weight: 400;
  color: #5c5c5c;
  line-height: 1.3;
  transition: color 0.15s;
}

/* Al pasar el mouse por cualquier botón, la bajada se pone negra como el título (antes se quedaba
   gris y se notaba deslucida al lado del relleno/borde de color). Se suma acá .qm-item--active
   (2026-07-31, a pedido de Agustin) — la clase que marca el botón de la sección donde está el
   usuario (ver marcarSeccionActivaEnHeader en layout.js): mismo tratamiento visual que el hover,
   pero persistente en vez de solo mientras dura el mouse encima. */
.qm-item:hover .qm-sub,
.qm-item--active .qm-sub { color: #1a1a1a; }

/* El resto de los botones no tiene color en reposo — solo al pasar el mouse, con este mismo azul
   (relleno + borde, misma familia de color, pareja entre sí). :not(.qm-item--ai) para no pisarle a
   Wondar IA su propio degradé fijo. .qm-item--active reusa el mismo azul: no se transforma
   (translateY) como el hover, solo el color queda fijo mientras el usuario está en esa sección. */
.qm-item:not(.qm-item--ai):hover,
.qm-item:not(.qm-item--ai).qm-item--active {
  background: #cfe1fb;
  border-color: #a6c4f5;
}

/* Estado compacto — lo activa el JS del header al scrollear (ver layout.js): vuelve al menú de
   ícono + palabra que había antes (una sola fila, sin la tarjeta ni la descripción), para que el
   header sticky ocupe menos alto mientras acompaña el scroll. La tarjeta base es cuadrada
   (aspect-ratio 1/1) pero acá el ancho pasa a ser "auto" (angosto, ajustado al ícono+texto) — sin
   resetear el aspect-ratio, esa tarjeta angosta terminaba forzada a la misma altura que su ancho y
   el header quedaba gigante en vez de compacto. */
.site-header--compact .quick-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  max-width: none;
}

.site-header--compact .qm-item {
  flex-direction: row;
  aspect-ratio: auto;
  gap: 5px;
  width: auto;
  min-height: 0;
  padding: 6px 10px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: transparent;
}

.site-header--compact .qm-item--ai {
  background: linear-gradient(90deg, #8db5f7, #c1a6e0, #f292b7, #fcd462, #86cc98, #8db5f7) 0% 0% / 300% 100%;
  animation: qm-ai-flow 6s linear infinite;
  box-shadow: 0 0 8px rgba(155, 114, 203, 0.3);
  border-color: transparent;
}

.site-header--compact .qm-item:not(.qm-item--ai):hover,
.site-header--compact .qm-item:not(.qm-item--ai).qm-item--active {
  background: #cfe1fb;
  border-color: #a6c4f5;
}

.site-header--compact .qm-icon {
  width: 16px;
  height: 16px;
  color: #1a1a1a;
}

.site-header--compact .qm-icon svg { width: 16px; height: 16px; }

.site-header--compact .qm-text { display: block; }

.site-header--compact .qm-title {
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.site-header--compact .qm-sub { display: none; }

/* "Reportar un problema de datos" — envuelve todo .destino-breadcrumb del sitio (ver
   wireReportarProblemaBreadcrumbs en sugerencia-modal.js). El nav conserva su propio margin-bottom
   (queda anulado acá para que no duplique el espacio) y .bc-row pasa a ser quien separa del
   contenido siguiente, para que ambos (breadcrumb + botón) queden alineados en la misma fila. */
.bc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.bc-row .destino-breadcrumb { margin-bottom: 0; }

.bc-reportar-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #7c3aed;
  cursor: pointer;
  white-space: nowrap;
}
.bc-reportar-btn:hover { text-decoration: underline; }

/* TOOLTIPS */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: white;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.header-actions [data-tip]:hover::after {
  bottom: auto;
  top: calc(100% + 6px);
  left: auto;
  right: 0;
  transform: none;
}

/* Sello oro/plata/bronce — "mejores 3 destinos valorados del mundo" (migrado de Gonzalo/index.css,
   ver MIGRACION-1b7ce783.md Tarea 1). Acá en layout.css (global) porque aparece en varias páginas
   con su propio CSS (home, destino, ranking) — un solo lugar en vez de triplicar la regla. */
.rank-seal {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.rank-seal--oro    { background: linear-gradient(135deg, #fde047, #ca8a04); }
.rank-seal--plata  { background: linear-gradient(135deg, #f1f5f9, #94a3b8); }
.rank-seal--bronce { background: linear-gradient(135deg, #f0b27a, #92400e); }

/* El sello suele quedar pegado a un borde de un contenedor angosto con overflow:hidden (card de
   destino, fila de ranking) — el tooltip default abre hacia arriba y centrado, y queda cortado por
   los dos lados: igual fix que .header-actions arriba (abre hacia abajo, anclado a la derecha), más
   wrap de texto con un ancho tope para que nunca sea más ancho que la card en mobile. */
.rank-seal[data-tip]:hover::after {
  bottom: auto;
  top: calc(100% + 6px);
  left: auto;
  right: 0;
  transform: none;
  white-space: normal;
  width: max-content;
  max-width: 180px;
  text-align: left;
  line-height: 1.35;
}

/* FOOTER — migrado de Gonzalo/index1.html (pedido de Agustin, 2026-07-29), reemplaza la línea
   simple de copyright que había antes. */
.site-footer {
  background: #33343a;
  color: #c4c4cc;
  padding: 2.5rem 2rem 1.5rem;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-col-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff;
  margin-bottom: 0.15rem;
}

.footer-link {
  color: #b3b3bd;
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.15s;
}

.footer-link:hover {
  color: #ffffff;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.footer-logo {
  height: 64px;
  width: auto;
  display: block;
}

.footer-bottom {
  max-width: 1280px;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-size: 0.8rem;
  color: #8d8d97;
}

@media (max-width: 768px) {
  /* En mobile todo se apila y se centra; el logo pasa a estar arriba de los links. */
  .site-footer { padding: 2rem 1.25rem 1.5rem; }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }

  .footer-brand { order: -1; }

  .footer-links {
    justify-content: center;
    text-align: center;
    gap: 2rem;
    width: 100%;
  }

  .footer-col { align-items: center; }

  .footer-link { padding: 10px 0; }
}

/* VS TRAY — parte del layout (ver _Layout.cshtml / versus-tray.js) */
.vs-tray {
  position: fixed;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #1a1a2e;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.25);
  padding: 14px 20px;
  transition: bottom 0.35s cubic-bezier(0.34,1.56,0.64,1);
  width: min(680px, 96vw);
}

.vs-tray--visible {
  bottom: 0;
}

.vs-tray-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.vs-tray-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
}

.vs-tray-subtitle {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}

.vs-tray-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vs-tray-slots {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.vs-tray-sep {
  font-size: 0.8rem;
  font-weight: 900;
  color: #c4b5fd;
  flex-shrink: 0;
}

.vs-tray-slot {
  flex: 1;
  min-width: 0;
  position: relative;
}

.vs-tray-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1.5px dashed rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 8px 12px;
  color: rgba(255,255,255,0.45);
  font-size: 0.75rem;
}

/* Slot vacío del tray de comparación — ahora se puede tipear y buscar el destino ahí mismo, en vez
   de depender de encontrar otra tarjeta con botón "Comparar" en algún otro lado del sitio (pedido
   de Agustin, 2026-07-24). El dropdown abre hacia ARRIBA (bottom, no top) porque el tray entero es
   fixed pegado abajo del todo — no hay lugar debajo para que abra para el otro lado. */
.vs-tray-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 0 10px;
}

.vs-tray-search svg { flex-shrink: 0; color: rgba(255,255,255,0.45); }

.vs-tray-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.8rem;
  padding: 9px 0;
}
.vs-tray-search-input::placeholder { color: rgba(255,255,255,0.4); }

.vs-tray-search-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 -8px 28px rgba(0,0,0,0.3);
  max-height: 260px;
  overflow-y: auto;
  z-index: 10;
}
.vs-tray-search-dropdown--open { display: block; }

.vs-tray-search-empty {
  padding: 12px 14px;
  font-size: 0.78rem;
  color: #888;
}

.vs-tray-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.vs-tray-search-result:hover { background: #f4f5f7; }

.vs-tray-search-result-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: #eef1f6;
  flex-shrink: 0;
}

.vs-tray-search-result span {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a2e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-tray-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.15);
}

.vs-tray-card-img {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.vs-tray-card-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-tray-card-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.vs-tray-card-remove:hover { color: #fff; }

.vs-tray-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #7c3aed;
  color: #fff;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(124,58,237,0.45);
  transition: background 0.15s, transform 0.1s;
}
.vs-tray-btn:hover { background: #6d28d9; transform: translateY(-1px); }

.vs-tray-close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.3rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.vs-tray-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

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

  /* HEADER — en mobile el buscador no entra en la misma línea que logo + acciones, así que baja a
     su propia línea completa (mismo comportamiento que ya tenía antes de este rediseño). */
  .site-header {
    padding: 10px 1rem 12px;
    gap: 10px;
  }

  .header-top {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  .logo-img { height: 48px; }

  .header-actions { grid-column: 2; grid-row: 1; gap: 6px; }

  .lang-btn, .user-btn {
    width: 34px;
    height: 34px;
    font-size: 0.72rem;
  }

  .user-dropdown {
    width: 300px;
    right: -8px;
  }

  /* .wondaria-btn ya no vive acá (era un botón en .header-actions) — ahora es el qm-item de Wondar
     IA dentro de .quick-menu, así que su tamaño en mobile lo maneja .quick-menu/.qm-item de arriba. */
  .suggestion-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 0.75rem;
  }

  .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Buscador migrado al header en la home (mobile) — la versión desktop de más arriba
     (grid-template-columns: 1fr minmax(0,700px) 1fr) no entra en una pantalla chica, así que baja
     a su propia fila completa, mismo criterio que .header-search de mobile. */
  .header-top--search-active {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }

  .header-top--search-active .header-search-slot {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .search-bar { padding: 9px 16px; }

  /* MENÚ DE ACCESOS RÁPIDOS en mobile (pedido de Agustin, 2026-08-02): siempre visible en el
     header, en una sola fila compacta ícono+título que envuelve a varias líneas si hace falta —
     a diferencia de desktop, acá NO depende del scroll (nunca alterna entre la tarjeta grande y
     la compacta, siempre es esta). El botón hamburguesa (.mnav-btn) queda sin uso en mobile por
     este cambio — se deja su HTML/CSS/JS intactos (mobile-nav.css/.js) por si hace falta
     reactivarlo, simplemente no se lo muestra más acá.
     Se duplica cada regla con el prefijo ".site-header--compact" (mismo selector que ya usa
     desktop al scrollear, ver más arriba) para que, aunque esa clase se siga agregando/sacando
     en mobile por la relocación del buscador banner↔header (home.js), el resultado visual sea
     exactamente el mismo con o sin ella — así no hay ningún cambio de aspecto al scrollear. */
  .quick-menu,
  .site-header--compact .quick-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: none;
  }

  .qm-item,
  .site-header--compact .qm-item {
    flex-direction: row;
    aspect-ratio: auto;
    gap: 6px;
    width: auto;
    min-height: 44px;
    padding: 8px 12px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background: transparent;
  }

  .qm-item--ai,
  .site-header--compact .qm-item--ai {
    background: linear-gradient(90deg, #8db5f7, #c1a6e0, #f292b7, #fcd462, #86cc98, #8db5f7) 0% 0% / 300% 100%;
    animation: qm-ai-flow 6s linear infinite;
    box-shadow: 0 0 8px rgba(155, 114, 203, 0.3);
    border-color: transparent;
  }

  .qm-item:not(.qm-item--ai):hover,
  .qm-item:not(.qm-item--ai).qm-item--active,
  .site-header--compact .qm-item:not(.qm-item--ai):hover,
  .site-header--compact .qm-item:not(.qm-item--ai).qm-item--active {
    background: #cfe1fb;
    border-color: #a6c4f5;
  }

  .qm-icon,
  .site-header--compact .qm-icon {
    width: 18px;
    height: 18px;
    color: #1a1a1a;
  }

  .qm-icon svg,
  .site-header--compact .qm-icon svg { width: 18px; height: 18px; }

  .qm-text,
  .site-header--compact .qm-text { display: block; }

  .qm-title,
  .site-header--compact .qm-title {
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
  }

  .qm-sub,
  .site-header--compact .qm-sub { display: none; }

  /* VS TRAY */
  .vs-tray {
    width: 100%;
    left: 0;
    right: 0;
    transform: none;
    border-radius: 16px 16px 0 0;
    /* El texto seguía viéndose cortado abajo del todo incluso con el título/bajada ya apilados
       (ver .vs-tray-header más abajo) — el motivo real es la barra de gestos/home indicator de los
       celulares con notch, que tapa los últimos px de cualquier elemento pegado al borde inferior
       si la página no le deja margen. env(safe-area-inset-bottom) reserva ese espacio (requiere
       viewport-fit=cover en el <meta viewport>, ya agregado en _Layout.cshtml); el fallback 0px
       deja sin efecto esto en celulares sin notch/gesture bar. */
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  /* Bug real (reportado por Agustin, 2026-08-02): título + bajada quedaban en la misma fila
     (align-items:baseline, sin wrap) — "Compará destinos" + "Elegí dos destinos para ver su
     comparación detallada" no entran juntos en el ancho de una pantalla chica y el texto se corta.
     En mobile van apilados, cada uno con todo el ancho del tray para sí. */
  .vs-tray-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .vs-tray-inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  .vs-tray-slots { flex-basis: 100%; }

  .vs-tray-btn { flex: 1; justify-content: center; min-height: 44px; }

  .vs-tray-close { width: 44px; height: 44px; }

  .vs-tray-card-name { font-size: 0.8rem; }
}

/* ── Spinner genérico para botones en estado "cargando" (ver wcBtnLoadingStart/Stop en api.js) ──
   Cargado acá (layout.css, todas las páginas) porque se usa en botones de muchos scripts distintos
   (composer, guías, favoritos, comentarios, etc.), no solo en una sección puntual del sitio. Usa
   currentColor para el borde así se ve bien en cualquier botón sin importar su color de fondo/texto. */
.wc-btn-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: wc-btn-spin 0.6s linear infinite;
  vertical-align: -3px;
}
@keyframes wc-btn-spin {
  to { transform: rotate(360deg); }
}