no es hermano directo de #search-wrap (queda varios niveles adentro del header), a diferencia de la home donde sí son hermanos. Mismos valores que la versión de la home para que el efecto se sienta igual en todo el sitio. z-index:90 queda muy por debajo del header (.site-header, z-index:500) — el header entero (logo, buscador, menú, acciones) sigue viéndose por encima sin necesidad de tocarle el z-index a nada más. */ .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; } /* 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

aparte debajo, con los accesos rápidos en formato ícono+título+bajada. */ .site-header { background: var(--color-fondo-superficie); border-bottom: 1px solid var(--color-borde); position: sticky; top: 0; z-index: 500; display: flex; flex-direction: column; gap: 14px; padding: 14px 3.5rem 16px; } /* .header-top/.header-top--no-search/.header-top--search-active — el grid de 3 columnas viejo (logo/buscador/acciones) que vivía acá se reemplazó por completo (2026-08-14) por .home-hero/.wondar-header .floating-navbar (ver más abajo en este archivo), que ahora resuelve TODO el layout del header — incluidas las 2 columnas/3 columnas que estas clases manejaban — directo sobre el mismo elemento (.floating-navbar sigue llevando la clase "header-top" solo para que home.js pueda seguir tocándolo sin cambios). Estas 3 reglas quedaron sin uso real (unused/dead) y se sacaron para que no compitan por especificidad con las nuevas. .header-search-slot sigue necesitando su display:none de base — sin eso, el div sin grid-column asignado queda auto-ubicado en una fila implícita nueva del grid, sumando un gap extra debajo del header (bug real: desalineaba el logo respecto al resto del header en toda página que no fuera la home). */ .header-search-slot { display: none; } .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; } .logo-img-dark { display: none; } [data-theme="dark"] .logo-img-light { display: none; } [data-theme="dark"] .logo-img-dark { display: block; } .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: var(--color-acento); color: var(--color-texto-sobre-color); 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: var(--color-acento-hover); } .lang-wrapper { position: relative; } .lang-btn { background: none; border: 1.5px solid var(--color-borde-fuerte); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: var(--color-texto); cursor: pointer; position: relative; flex-shrink: 0; transition: border-color 0.15s; } .lang-btn:hover { border-color: var(--color-texto-terciario); } .lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--color-fondo-superficie); border: 1px solid var(--color-borde); 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: var(--color-texto); cursor: pointer; text-align: left; transition: background 0.12s; } .lang-option:hover { background: var(--color-fondo); } .lang-option--active { font-weight: 700; color: var(--color-primario); background: var(--color-primario-fondo); } /* Banderas circulares (2026-08-14, migrado de Gonzalo/index.css) — círculo recortado con object-fit:cover (no se deforma) + un aro finito para que no se pierda contra fondos claros, en vez del rectángulo chato 24x18 tipo bandera de escritorio de los 90 que había antes. */ .lang-flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); } .user-wrapper { position: relative; } .user-btn { background: none; border: 1.5px solid var(--color-borde-fuerte); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-texto-secundario); position: relative; flex-shrink: 0; } /* Avatar real (foto subida en /miperfil) en vez del ícono genérico — layout.js suma esta clase + el background-image inline solo si la sesión trae fotoUsuarioUrl; si no cargó foto, el botón sigue viendo el SVG de siempre, sin ningún cambio. */ .user-btn.user-btn--foto { background-size: cover; background-position: center; border-color: transparent; } .user-btn.user-btn--foto svg { display: none; } .user-btn-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--color-error); color: var(--color-texto-sobre-color); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border: 1.5px solid var(--color-fondo-superficie); } /* Modo oscuro (2026-08-14, migrado de Gonzalo/favoritos.html) — mismo patrón de botón circular que .lang-btn/.user-btn. Prototipo visual sin conectar todavía a ningún cambio real de tema (mismo estado que en el diseño de Gonzalo). */ .theme-toggle-btn { background: var(--color-fondo-superficie); border: 1.5px solid var(--color-borde-fuerte); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-texto); flex-shrink: 0; transition: border-color 0.15s; } .theme-toggle-btn:hover { border-color: var(--color-texto-terciario); } /* 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); left: 50%; transform: translateX(-50%); background: var(--color-fondo-superficie); border: 1px solid var(--color-borde); 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 var(--color-fondo-superficie-alt); } .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: var(--color-texto); text-decoration: none; cursor: pointer; text-align: left; transition: background 0.12s; } .user-menu-item:hover { background: var(--color-fondo); } .user-menu-icon { display: flex; align-items: center; justify-content: center; color: var(--color-texto-secundario); 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 var(--color-fondo-superficie-alt); } .notif-dropdown-title { font-size: 0.95rem; font-weight: 700; color: var(--color-texto); } .notif-mark-all { background: none; border: none; color: var(--color-primario); 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 var(--color-borde-suave); transition: background 0.12s; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--color-fondo); } .notif-item--unread { background: var(--color-primario-fondo); } .notif-item--unread:hover { background: var(--color-primario-fondo); } .notif-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primario), var(--color-secundario)); color: var(--color-texto-sobre-color); 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: var(--color-texto); line-height: 1.35; } .notif-line strong { color: var(--color-texto); } .notif-time { font-size: 0.7rem; color: var(--color-texto-terciario); } .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primario); flex-shrink: 0; } .notif-vacio { padding: 20px 16px; font-size: 0.82rem; color: var(--color-texto-terciario); 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: var(--color-primario); text-decoration: none; border-top: 1px solid var(--color-fondo-superficie-alt); } .notif-ver-todas:hover { background: var(--color-fondo); } .header-search { grid-column: 2; width: 100%; } .search-bar { display: flex; align-items: center; gap: 10px; background: var(--color-fondo-superficie); border: 1.5px solid var(--color-borde-fuerte); border-radius: 50px; padding: 10px 20px; width: 100%; box-shadow: 0 2px 10px rgba(0,0,0,0.08); } /* Aro naranja al enfocar (2026-08-14, migrado de Gonzalo/index.css) — mismo naranja que "Sugerencias" y el hover de los accesos del header, en vez de quedarse sin ningún feedback de foco. En .home-hero (banner/píldora) hay una versión propia con más sombra, ver home.css. */ .wondar-header .search-bar { transition: box-shadow 0.2s ease; } .wondar-header .search-bar:focus-within { box-shadow: 0 0 0 3px var(--color-acento), 0 2px 10px rgba(0,0,0,0.08); } .wondar-header .search-icon { transition: color 0.2s ease; } .wondar-header .search-bar:focus-within .search-icon { color: var(--color-acento); } .search-icon { color: var(--color-texto-terciario); flex-shrink: 0; } .search-input { border: none; outline: none; font-size: 1rem; color: var(--color-texto); width: 100%; background: transparent; } .search-input::placeholder { color: var(--color-texto-terciario); } .search-wrap { position: relative; width: 100%; } .search-clear { background: none; border: none; cursor: pointer; color: var(--color-texto-terciario); display: flex; align-items: center; padding: 0; flex-shrink: 0; transition: color 0.15s; } .search-clear:hover { color: var(--color-texto-secundario); } /* 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: var(--color-fondo-superficie); border: 1px solid var(--color-borde); 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; } /* Título de grupo dentro de la lista de resultados — usado por las sugeridas por defecto de la home (renderDefault en layout.js: "Destinos populares"/"Experiencias populares" antes de sus filas .search-result), no aparece en una búsqueda real con texto. */ .search-result-group-title { padding: 0.7rem 1rem 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--color-texto); } .search-result-group-title:not(:first-child) { margin-top: 0.3rem; border-top: 1px solid var(--color-borde-suave); } .search-result { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; transition: background 0.12s; } .search-result:hover { background: var(--color-fondo-superficie-alt); } .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; object-fit: cover; object-position: 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, var(--color-secundario-fondo-fuerte), var(--color-secundario-fondo)); color: var(--color-secundario); } .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: var(--color-texto-sobre-color); white-space: nowrap; } .search-result-tipo--continente { background: var(--color-primario); } .search-result-tipo--pais { background: #ea580c; } .search-result-tipo--estado { background: #0891b2; } .search-result-tipo--destino { background: var(--color-secundario); } .search-result-tipo--atraccion { background: var(--color-exito); } .search-result-tipo--nota { background: var(--color-acento-hover); } .search-result-tipo--usuario { background: #64748b; } .search-result-city { font-size: 0.92rem; font-weight: 700; color: var(--color-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-city mark { background: none; color: var(--color-primario); font-weight: 800; } .search-result-location { font-size: 0.75rem; color: var(--color-texto-terciario); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-no-results { padding: 2rem 1.5rem 0.5rem; text-align: center; color: var(--color-texto-terciario); font-size: 0.85rem; } /* Mismo degradado arcoíris animado + glow que el ícono "Wondar IA" del header (.qm-item--ai / @qm-ai-flow más abajo) — se muestra en vez del texto "Sin resultados para X" cuando el buscador no encuentra nada. */ .search-wondar-ia-cta { display: block; width: calc(100% - 3rem); margin: 1.5rem 1.5rem 0; min-height: 44px; border: 1.5px solid transparent; border-radius: 10px; padding: 0.7rem 1rem; color: var(--color-texto); font-size: 0.85rem; font-weight: 700; text-align: center; cursor: pointer; 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); transition: filter 0.15s; } .search-wondar-ia-cta:hover { filter: brightness(1.05); } @media (prefers-reduced-motion: reduce) { .search-wondar-ia-cta { animation: none; } } .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: var(--color-secundario); 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: var(--color-secundario); text-decoration: none; border-top: 1px solid var(--color-borde-suave); } .search-ver-todos:hover { background: var(--color-fondo-superficie-alt); } /* MENÚ DE ACCESOS RÁPIDOS — v2 (2026-08-14, migrado de Gonzalo/index.html + favoritos.html, referencia: header de Basel Area). Reemplaza a la grilla de 8 tarjetas cuadradas (.qm-item) por una fila de accesos más compacta (.dock-item) — Favoritos/Mi perfil se mudaron al dropdown de cuenta (ver .user-menu-item más arriba), FAQ quedó solo en el pie de página. */ .quick-dock { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; } /* 158px → 195px (2026-08-14, pedido de Agustin) → 158px de nuevo (2026-08-14 tarde, pedido de Gonzalo). La vuelta a 195px fue porque las bajadas viejas ("Descubrí y compartí", "Comparar destinos", etc.) no entraban en una sola línea en Portugués/Alemán ni a 158px. Se acortaron de nuevo las 5 bajadas (ver header-itinerarios-sub/header-ranking-sub/header-red-viajeros-sub/ header-versus-sub en WondarCore.Nls.cs) mirando esta vez el ancho real en las 4 variantes, no solo el Español — medido en vivo contra el texto/fuente reales: la más larga de las 20 combinaciones label+bajada necesita ~88px, entra con margen en los ~94px de texto disponibles a 158px (158 − padding 26 − ícono 29 − gap 9). El wrap de .dock-item-text (ver más abajo) se deja como red de seguridad — no debería activarse con este ancho, pero si algún idioma resultara más largo todavía, corta a 2 líneas en vez de desbordar. */ /* align-items:flex-start en vez de center (2026-08-18, a pedido de Gonzalo) — con center, el ítem "Wondar IA" (bajada "Tu asistente de viaje", más larga que las demás y a veces de 2 renglones — ver el wrap "red de seguridad" del comentario de arriba) quedaba con el título más arriba que el resto: el bloque ícono+texto se centraba completo dentro del ítem, y al ser más alto que sus hermanos, ese centrado lo corría hacia arriba. Con flex-start, el título de los 4 ítems arranca siempre a la misma altura (pegado arriba), sin importar cuántos renglones ocupe la bajada de cada uno. */ .dock-item { display: flex; align-items: flex-start; justify-content: center; gap: 9px; width: 158px; padding: 8px 13px; border-radius: 14px; text-decoration: none; position: relative; transition: background 0.15s ease; } .dock-item:hover { background: var(--color-fondo); } .dock-item-icon { width: 29px; height: 29px; border-radius: 9px; flex-shrink: 0; color: var(--color-texto-sobre-color); display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .dock-item-icon svg { width: 14px; height: 14px; stroke-width: 2.2; } /* min-width:0 (para que el texto pueda ajustarse/wrapear dentro del ancho fijo de 158px del ítem, en vez de forzarlo a crecer) + overflow-wrap (2026-08-14, bug real reportado por Agustin en Portugués/Alemán: sin white-space:nowrap de antes el texto ya wrapea, pero una palabra sola más larga que 158px — típico en Alemán — igual se salía y se pisaba con el ítem de al lado). */ .dock-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: break-word; } .dock-item-label { font-size: 12.2px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-texto); line-height: 1.2; } .dock-item-sub { font-size: 10px; font-weight: 400; color: var(--color-texto-secundario); line-height: 1.2; } /* Wondar IA — único con degradé animado propio (mismos tonos que ya usaba .qm-item--ai). El resto de los accesos va en negro pleno con el ícono blanco, y pasa a naranja (mismo tono que "Sugerencias") al pasar el mouse — antes cada uno tenía su propio color pastel. */ @keyframes qm-ai-flow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } .dock-item--ai .dock-item-icon { background: linear-gradient(135deg, #7ea8f5, #b090d9, #ef7fab, #f9c53f, #5fb87e); } /* Fondo azul #1e3650 (2026-08-18/19, pedido de Gonzalo, migrado de Gonzalo/index.css) — mismo azul que las cards "Crea tu viaje"/"Comunidad de viajeros" de la home (ver home.css), para que los 3 accesos no-IA se sientan parte del mismo sistema de color en vez de negro plano genérico. Fijo, sin variar por tema claro/oscuro (es un color de marca, no una superficie semántica). */ .dock-item--itinerarios .dock-item-icon, .dock-item--versus .dock-item-icon, .dock-item--ranking .dock-item-icon, .dock-item--red .dock-item-icon, .dock-item--destinos .dock-item-icon { background: #1e3650; } .dock-item--itinerarios:hover .dock-item-icon, .dock-item--versus:hover .dock-item-icon, .dock-item--ranking:hover .dock-item-icon, .dock-item--red:hover .dock-item-icon, .dock-item--destinos:hover .dock-item-icon { background: var(--color-acento); } /* .dock-item--active (marca en el header la sección donde está el usuario, ver marcarSeccionActivaEnHeader en layout.js) reusa el mismo tratamiento que el hover, pero persistente en vez de solo mientras dura el mouse encima. */ .dock-item--active { background: var(--color-fondo); } .dock-item--active:not(.dock-item--ai) .dock-item-icon { background: var(--color-acento); } /* Tooltip explicativo al pasar el mouse — mismo mecanismo que ya tenía .qm-tooltip/.qm-ai-tooltip: un cuadro 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. Centrado respecto al botón, con reborde verde Wondar; Wondar IA suma el encabezado de marca (logo+badge "AI") que el resto no necesita. */ .dock-tooltip, .dock-ai-tooltip { position: absolute; top: calc(100% + 10px); left: 50%; width: 240px; max-width: min(240px, calc(100vw - 32px)); 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: 12px 14px; font-size: 0.78rem; line-height: 1.45; color: var(--color-texto); 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; } .dock-ai-tooltip-brand { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--color-borde-suave); } .dock-ai-tooltip-logo { height: 23px; width: auto; } .dock-ai-tooltip-badge { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; color: var(--color-texto-sobre-color); background: linear-gradient(90deg, #6b8de8, #a77ddb, #e0709f); padding: 2px 7px; border-radius: 999px; line-height: 1.4; } .dock-tooltip strong, .dock-ai-tooltip strong { display: block; color: var(--color-texto); font-size: 0.85rem; margin-bottom: 4px; } .dock-tooltip::before, .dock-ai-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--color-fondo-superficie); } .dock-item:hover .dock-tooltip, .dock-item--ai:hover .dock-ai-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Franja intermedia entre el desktop de siempre y el breakpoint mobile de más abajo: los 5 accesos (158px cada uno) empiezan a no entrar cómodos antes de llegar a mobile — acá se esconde el título/bajada y quedan solo los tiles de ícono. */ @media (max-width: 1450px) and (min-width: 769px) { .dock-item-text { display: none; } .dock-item { width: auto; padding: 8px; } .quick-dock { gap: 6px; } } /* Estado compacto — lo activa el JS del header al scrollear (ver layout.js): achica un poco los accesos en desktop; en mobile el menú entero se esconde y aparece la hamburguesa en su lugar (ver .mnav-btn en el breakpoint mobile, más abajo en este archivo). */ .site-header--compact .dock-item { padding: 8px 10px; } .site-header--compact .dock-item-icon { width: 30px; height: 30px; } .site-header--compact .dock-item-sub { display: none; } /* Bug real reportado por Agustin (2026-08-21): el título dejaba de estar centrado respecto al ícono SOLO al scrollear. Causa: .dock-item usa align-items:flex-start (ver comentario arriba, 2026-08-18) a propósito para que la bajada de 2 líneas no corra el título hacia abajo — pero acá arriba .dock-item-sub se oculta del todo, así que queda un solo renglón de texto (~15px) contra un ícono de 30px con flex-start: el texto arranca pegado arriba, no centrado. Con la bajada ya oculta, el motivo que justificaba flex-start no aplica más — centrado normal para este estado. */ .site-header--compact .dock-item { align-items: center; } /* ══════════════════════════════════════════════════════════════════════════ HEADER — home (.home-hero) vs resto del sitio (.wondar-header) — v2 (2026-08-14, migrado de Gonzalo/index.html + Gonzalo/favoritos.html). Un único header (este mismo _Layout.cshtml) sirve a todo el sitio: en la home flota transparente sobre la foto del banner (referencia: sitio de St. Beatus Caves); en el resto queda blanco/sticky como hasta ahora, con el mismo look liviano de íconos planos que la home. Todo lo que sigue está acotado bajo .home-hero/.wondar-header (clases puestas en , ver _Layout.cshtml) para no afectar ningún otro selector de arriba. ══════════════════════════════════════════════════════════════════════════ */ /* Header sólido y sticky (2026-08-18/19, pedido de Gonzalo — reemplaza la píldora blanca flotando transparente sobre la foto que tenía antes) — pasa a ser el mismo tratamiento que ya tiene el resto del sitio (.wondar-header): barra blanca de punta a punta, en flujo normal, empujando el contenido de abajo en vez de flotar encima. Reborde fino gris en reposo; azul #1e3650 (mismo tono que .dock-item-icon, ver arriba) al scrollear (.site-header--compact, mismo trigger de siempre en layout.js). */ .home-hero .site-header { background: var(--color-fondo-superficie); border-bottom: 1px solid var(--color-borde); position: sticky; top: 0; padding: 20px 2.5rem; gap: 0; } .home-hero .site-header--compact { border-bottom-color: #1e3650; } /* .floating-navbar es SIEMPRE el mismo contenedor grid con 5 hijos directos (logo, buscador-slot, buscador, menú de accesos, acciones — ver _Layout.cshtml, sin sub-wrappers) — layout.css los ubica en celdas distintas según el contexto: - .home-hero: una sola fila (logo | menú de accesos | acciones), sin fondo/redondeo propio — el blanco/borde ya los pone .site-header (arriba), igual que en .wondar-header. - .wondar-header: dos filas (logo+buscador+acciones arriba, menú de accesos abajo). */ .home-hero .floating-navbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; width: 100%; background: transparent; border-radius: 0; padding: 0; } /* grid-row:1 explícito en los 3 (2026-08-14, corrige un desalineado vertical real: el menú de accesos quedaba unos px más abajo que el logo/íconos) — sin esto, los 3 dependían del auto-placement de grid (que debería ubicarlos igual en la única fila explícita, pero en la práctica el menú terminaba en su propia fila implícita, corriéndolo hacia abajo). Fijar la fila a mano saca cualquier ambigüedad. */ .home-hero .floating-navbar .logo { grid-row: 1; grid-column: 1; justify-self: start; } .home-hero .floating-navbar .quick-dock { grid-row: 1; grid-column: 2; align-items: center; } .home-hero .floating-navbar .header-actions { grid-row: 1; grid-column: 3; justify-self: end; } /* El buscador vive en el banner de abajo (home.js lo muda ahí al cargar) — en la píldora solo aparece si el usuario scrollea lo suficiente como para que el header lo tape (ver .header-top--search-active más abajo). */ .home-hero .floating-navbar .header-search-slot, .home-hero .floating-navbar .header-search { display: none; } /* Buscador migrado a la píldora (scroll) — pasa a 2 filas: arriba logo/buscador/acciones, abajo el menú de accesos, para que ninguno tape al otro. 480px → 700px (corregido, quedó angosto sin querer al migrar de Gonzalo/index.html) — mismo max-width que .banner-search en el banner (decisión explícita de Agustin, "mismo ancho que el del banner", ver Gonzalo/index.css línea ~1094): el buscador no tiene que verse más chico al pasar del banner a la píldora. */ .home-hero .floating-navbar.header-top--search-active { grid-template-columns: 1fr minmax(0, 700px) 1fr; grid-template-rows: auto auto; row-gap: 12px; } .home-hero .floating-navbar.header-top--search-active .logo { grid-row: 1; grid-column: 1; } .home-hero .floating-navbar.header-top--search-active .header-search-slot { display: block; grid-row: 1; grid-column: 2; } .home-hero .floating-navbar.header-top--search-active .header-actions { grid-row: 1; grid-column: 3; } .home-hero .floating-navbar.header-top--search-active .quick-dock { grid-row: 2; grid-column: 1 / -1; justify-content: center; } /* +30% (2026-08-18, a pedido de Gonzalo) — 46px → 60px. Subido 5% de su propia altura vía margin-top negativo — se veía más abajo que el menú a pesar de align-items:center en .floating-navbar; el logo era el elemento más alto de la fila, así que ese centrado lo corría hacia abajo (el margen negativo lo compensa sin afectar el alto real de la barra). */ .home-hero .floating-navbar .logo-img { height: 60px; margin-top: -3px; } /* En el resto del sitio no hay píldora — mismo contenedor grid, pero 2 filas (logo+buscador+ acciones arriba, menú de accesos abajo) sin fondo/redondeo propio (el blanco/padding ya los pone .site-header). El logo (más ancho/bajo que el anterior) se ve "enorme" al mismo alto de siempre — se achica un poco. */ .wondar-header .floating-navbar { display: grid; grid-template-columns: 1fr minmax(0, 700px) 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 24px; row-gap: 14px; width: 100%; } .wondar-header .floating-navbar .logo { grid-row: 1; grid-column: 1; justify-self: start; } .wondar-header .floating-navbar .header-search-slot { display: none; } .wondar-header .floating-navbar .header-search { grid-row: 1; grid-column: 2; } .wondar-header .floating-navbar .header-actions { grid-row: 1; grid-column: 3; justify-self: end; } .wondar-header .floating-navbar .quick-dock { grid-row: 2; grid-column: 1 / -1; } .wondar-header .logo-img { height: 58px; } /* Íconos de idioma/cuenta/modo oscuro/hamburguesa — circulitos planos (gris clarito, ícono oscuro) en vez del círculo con borde marcado de antes, más livianos sobre un header blanco. Mismo tratamiento en la home y en el resto del sitio. */ .home-hero .lang-btn, .home-hero .user-btn, .home-hero .theme-toggle-btn, .home-hero .mnav-btn, .wondar-header .lang-btn, .wondar-header .user-btn, .wondar-header .theme-toggle-btn, .wondar-header .mnav-btn { height: 29px; width: 29px; border-radius: 50%; background-color: var(--color-fondo); border-color: transparent; color: var(--color-texto); transition: background 0.15s ease, color 0.15s ease; } /* background-color (no el shorthand "background") a propósito: .user-btn--foto de arriba pone la foto real vía background-image + background-size:cover inline/CSS — el shorthand reseteaba background-size/position a sus valores por defecto acá (misma especificidad, este bloque va después en el archivo y ganaba la cascada), así que el avatar se veía sin recortar: solo la esquina superior izquierda de la foto en vez de la imagen completa centrada y cubriendo el círculo. */ .home-hero .lang-btn:hover, .home-hero .user-btn:hover, .home-hero .theme-toggle-btn:hover, .home-hero .mnav-btn:hover, .wondar-header .lang-btn:hover, .wondar-header .user-btn:hover, .wondar-header .theme-toggle-btn:hover, .wondar-header .mnav-btn:hover { color: var(--color-acento); border-color: transparent; } .home-hero .user-btn, .wondar-header .user-btn { color: var(--color-texto-secundario); } /* "Sugerencias" — píldora angosta, mismo alto (29px) que los círculos de idioma/cuenta de al lado en vez de los 38px de antes; el ícono de foco queda oculto salvo en mobile (ver el breakpoint más abajo en este archivo), donde reemplaza al texto para poder pasar a ser un círculo chico. */ /* Acotado a .header-actions (no a cualquier .suggestion-btn) — el footer reusa esa misma clase para su propio link "Sugerencias" (ver _Layout.cshtml) y tiene que quedarse con el tamaño de siempre, no achicarse al del header. */ .home-hero .header-actions .suggestion-btn, .wondar-header .header-actions .suggestion-btn { height: 29px; padding: 0 8px; font-size: 0.72rem; } .home-hero .header-actions .suggestion-btn-icon, .wondar-header .header-actions .suggestion-btn-icon { 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: var(--color-secundario); 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: var(--color-superficie-oscura); color: var(--color-texto-sobre-color); 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, var(--color-alerta-fuerte)); } /* 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: var(--color-texto-sobre-color); margin-bottom: 0.15rem; } .footer-link { color: #b3b3bd; text-decoration: none; font-size: 0.88rem; transition: color 0.15s; } .footer-link:hover { color: var(--color-texto-sobre-color); } .footer-brand { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; } .footer-logo { height: 64px; width: auto; display: block; } /* Fila de íconos sociales (2026-08-25, sumado LinkedIn junto a Instagram, migrado de Gonzalo/index.css) — .footer-brand es column (logo arriba, esto abajo), así que los íconos en sí necesitan su propio contenedor en row para quedar uno al lado del otro. */ .footer-social-row { display: flex; align-items: center; gap: 0.75rem; } /* Instagram del footer (pedido de Agustin, 2026-08-06) — ícono monocromático (stroke=currentColor), blanco por heredar el color del footer, se oscurece un toque para no competir con el logo. */ .footer-social-link { display: flex; color: var(--color-texto-sobre-color); opacity: 0.8; transition: opacity 0.15s, transform 0.15s; } .footer-social-link:hover { opacity: 1; transform: translateY(-1px); } .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; } } /* ── WONDAR IA — círculo flotante ── (2026-08-25, pedido de Gonzalo: sacarlo del header, dejarlo como ícono flotando abajo a la derecha; migrado de Gonzalo/index.css). Mismo degradé de marca que .dock-item--ai .dock-item-icon (arriba)/.home-promo-btn--ai (home.css) — nunca un color nuevo para la misma feature. z-index por debajo de .vs-tray (1000) a propósito: si alguna vez llegan a coincidir en pantalla, gana el tray. .wondar-ia-float es solo el contenedor posicionado (fixed, sin transform propio) — el círculo visual vive en .wondar-ia-float-icon, adentro, para que el hover (scale+rotate) se aplique SOLO a ese círculo y no al tooltip ni al slot de tips (hermanos): con el transform en el contenedor de afuera, esos elementos —hijos suyos— heredarían visualmente la rotación del hover. */ .wondar-ia-float { position: fixed; bottom: 24px; right: 24px; z-index: 400; } .wondar-ia-float-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #7ea8f5, #b090d9, #ef7fab, #f9c53f, #5fb87e); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); /* cubic-bezier con un poco de "overshoot" en vez de ease liso — el rebote sutil es lo que hace que el agrandado en :hover se sienta vivo, no solo un cambio de tamaño instantáneo. */ transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.2s ease; } .wondar-ia-float:hover .wondar-ia-float-icon { transform: translateY(-4px) scale(1.15) rotate(5deg); box-shadow: 0 16px 34px rgba(126, 168, 245, 0.45); } /* Tooltip "Preguntame sobre tu viaje" — mismo estilo visual que .dock-tooltip (blanco, borde verde Wondar, sombra, flechita), pero apunta hacia la DERECHA en vez de hacia arriba: este círculo vive pegado al borde derecho de la pantalla, así que el tooltip solo tiene lugar para abrirse hacia la izquierda. */ .wondar-ia-float-tooltip { position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(6px); background: white; color: #1a1a1a; font-size: 0.82rem; font-weight: 600; padding: 8px 14px; border-radius: 10px; border: 1.5px solid #86cc98; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; pointer-events: none; } .wondar-ia-float-tooltip::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: white; } .wondar-ia-float:hover .wondar-ia-float-tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } /* Burbuja de tips contextuales (#aia-tip-slot, .aia-widget/.aia-bubble — ver asistente-ia.css/js) mudada acá adentro (2026-08-25, junto con el botón real que la monta): esas reglas están pensadas para colgar DEBAJO de un botón cerca del techo de la pantalla (top: 100%+10px). Este círculo vive pegado al borde de ABAJO, así que se reabre hacia ARRIBA en su lugar — mismo motivo que el tooltip de acá arriba, resuelto igual (override scoped a .wondar-ia-float). Además, el ancla horizontal por default (.aia-widget: left:50% + translateX(-50%)) centra la burbuja de 280px sobre el ícono — pero el ícono vive pegado al borde DERECHO de la pantalla (right: 24px), así que la mitad de la burbuja quedaba fuera del viewport y el texto se veía cortado (reportado por Agustin, 2026-08-26). Se ancla al borde derecho del ícono en su lugar, para que la burbuja se abra siempre hacia la izquierda. */ .wondar-ia-float .aia-widget { top: auto; bottom: calc(100% + 10px); left: auto; right: 0; transform: none; } .wondar-ia-float .aia-bubble::before { bottom: auto; top: 100%; left: auto; right: 22px; transform: none; border-bottom-color: transparent; border-top-color: var(--color-fondo-superficie); } @media (max-width: 768px) { .wondar-ia-float { bottom: 16px; right: 16px; } .wondar-ia-float-icon { width: 50px; height: 50px; } /* El :hover no dispara de forma útil en touch (mismo criterio que .dock-tooltip en mobile) — el tooltip queda sin uso ahí, no hace falta ocultarlo aparte, simplemente nunca se activa. */ } /* 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: var(--color-superficie-oscura); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 32px rgba(0,0,0,0.25); padding: 14px 20px; /* visibility (no solo "bottom") oculta el tray de verdad cuando no hay nada elegido — el offset de -120px por sí solo no alcanza en mobile, donde el header apilado (título + bajada en 2 líneas, ver media query de abajo) hace que el tray sea más alto que eso y quede un resto asomando en el borde inferior de la pantalla. El delay en la transición de "visibility" deja que la animación de "bottom" termine de deslizar antes de desaparecer del todo (y aparece visible de inmediato al mostrarse). */ visibility: hidden; transition: bottom 0.35s cubic-bezier(0.34,1.56,0.64,1), visibility 0s linear 0.35s; width: min(680px, 96vw); } .vs-tray--visible { bottom: 0; visibility: visible; transition: bottom 0.35s cubic-bezier(0.34,1.56,0.64,1), visibility 0s linear 0s; } .vs-tray-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .vs-tray-title { font-size: 0.9rem; font-weight: 800; color: var(--color-texto-sobre-color); } .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: var(--color-secundario); 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: var(--color-texto-sobre-color); 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: var(--color-fondo-superficie); 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: var(--color-texto-suave); } .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: var(--color-fondo); } .vs-tray-search-result-img { width: 32px; height: 32px; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--color-fondo-superficie-alt); flex-shrink: 0; } .vs-tray-search-result span { font-size: 0.82rem; font-weight: 600; color: var(--color-texto); 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: var(--color-texto-sobre-color); 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: var(--color-texto-sobre-color); } .vs-tray-btn { display: flex; align-items: center; gap: 7px; background: var(--color-secundario); color: var(--color-texto-sobre-color); 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: var(--color-secundario-hover); 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: var(--color-texto-sobre-color); } /* ═══════════════════════════════════════ 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; } /* La píldora flotante de la home es solo un tratamiento de desktop (2026-08-14) — en mobile .landscape-banner queda oculto (ver home.css) y sin foto detrás no hay nada sobre lo que flotar, así que acá vuelve a ser un header blanco sticky común, igual que en el resto del sitio (.wondar-header). */ .home-hero .site-header { position: sticky; background: var(--color-fondo-superficie); border-bottom: 1px solid var(--color-borde); padding: 10px 1rem 12px; gap: 10px; } .home-hero .site-header--compact .floating-navbar { box-shadow: none; } /* .floating-navbar en mobile — mismas 3 filas para .home-hero y .wondar-header (en mobile la home ya no tiene píldora, ver arriba): logo+acciones / buscador / menú de accesos. En la home el buscador NUNCA se muda al banner en mobile (home.js corta antes, ver el guard ahí), así que .header-search siempre está visible acá — a diferencia de desktop, donde arranca oculto. */ .home-hero .floating-navbar, .wondar-header .floating-navbar { background: none; border-radius: 0; padding: 0; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; row-gap: 10px; column-gap: 10px; } .home-hero .floating-navbar .logo, .wondar-header .floating-navbar .logo { grid-row: 1; grid-column: 1; justify-self: start; } .home-hero .floating-navbar .header-actions, .wondar-header .floating-navbar .header-actions { grid-row: 1; grid-column: 2; justify-self: end; } .home-hero .floating-navbar .header-search, .wondar-header .floating-navbar .header-search { display: block; grid-row: 2; grid-column: 1 / -1; } .home-hero .floating-navbar .header-search-slot, .wondar-header .floating-navbar .header-search-slot { display: none; } .home-hero .floating-navbar .quick-dock, .wondar-header .floating-navbar .quick-dock { grid-row: 3; grid-column: 1 / -1; } .logo-img { height: 48px; } .header-actions { gap: 6px; } .user-dropdown { width: 300px; } /* El tamaño real de "Sugerencias" en mobile (círculo con ícono) lo define el bloque .home-hero/.wondar-header más abajo en este mismo breakpoint — acá no hace falta nada. */ .search-bar { padding: 9px 16px; } /* MENÚ DE ACCESOS RÁPIDOS en mobile — v2 (2026-08-14, migrado de Gonzalo/index.html + favoritos.html): vuelve a depender del scroll (a diferencia del criterio anterior del 2026-08-02, que lo dejaba siempre visible) — en reposo se ve en 2 columnas x 2 filas (grid-auto-flow:column, se lee columna por columna, no fila por fila), y al scrollear se esconde (mismo momento en que .site-header--compact ya se activa hoy, sea por el buscador migrando en la home o por el scroll listener genérico de layout.js) dejando en su lugar el botón hamburguesa (.mnav-btn, reactivado — ver mobile-nav.js/.css), que abre el drawer con los mismos accesos. grid-template-rows corregido a repeat(2, auto) (2026-08-19) — quedó en repeat(3, auto) de una época con 5 accesos (3 arriba/2 abajo a propósito); con los 4 de hoy (Ranking se sacó del menú, ver header-red-viajeros más arriba) 3 filas repartía 3 y 1 en vez de 2 y 2. */ .home-hero .floating-navbar .quick-dock, .wondar-header .quick-dock { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 10px; width: 100%; max-width: none; } .home-hero .floating-navbar .dock-item, .wondar-header .dock-item { width: auto; min-height: 44px; justify-content: flex-start; } .home-hero .site-header--compact .quick-dock, .wondar-header .site-header--compact .quick-dock { display: none; } /* .mnav-btn parte de "display:none" (base en mobile-nav.css) — acá lo revive solo en mobile compacto, con más especificidad que esa base sin importar el orden de los . */ .home-hero .site-header--compact .mnav-btn, .wondar-header .site-header--compact .mnav-btn { display: flex; } /* "Sugerencias" en mobile — pasa de píldora con texto a círculo del mismo tamaño que idioma/cuenta/modo oscuro (29px), con el ícono de foco en vez de la palabra. */ .home-hero .header-actions .suggestion-btn, .wondar-header .header-actions .suggestion-btn { height: 29px; width: 29px; padding: 0; border-radius: 50%; } .home-hero .header-actions .suggestion-btn-icon, .wondar-header .header-actions .suggestion-btn-icon { display: flex; } .home-hero .header-actions .suggestion-btn-text, .wondar-header .header-actions .suggestion-btn-text { 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 , 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); } } /* ── ÍCONO DE BANNER DE SECCIÓN (2026-08-21, pedido de Agustin) — cargado acá (layout.css, todas las páginas) porque el mismo cuadrado blanco con ícono se repite ahora en el hero de varias secciones (Favoritos, Versus, Red, Ranking, FAQ/Legal, Destinations, Experiences, MyTrips — ver .wc-hero-icon en cada .*-hero-top de esas páginas), mismo lenguaje visual que ya usaban .home-promo-card--itinerarios/.home-versus-promo en la home (navy sólido #1e3650 + cuadrado blanco, sin depender de las variables de modo oscuro — mismo criterio que esas dos cards, que tampoco las usan). Cada página define su propio fondo navy en su .css (no se centraliza acá para no atar el color del hero de una sección al de las demás si el día de mañana alguna necesita otro), pero el ícono sí es 100% igual en todas — un solo lugar para ese pedacito. */ .wc-hero-icon { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #fff; color: #1e3650; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } @media (max-width: 768px) { .wc-hero-icon { width: 44px; height: 44px; border-radius: 14px; } .wc-hero-icon svg { width: 19px; height: 19px; } }