/* Fuentes AUTO-HOSPEDADAS (Cinzel/Inter/Space Grotesk/Tenor Sans) · antes se
cargaban de Google Fonts (dep externa render-blocking que el cliente audita).
Solo subsets latin+latin-ext; zh/ja caen a system font (no traen CJK). */
/* Cinzel 400 latin-ext */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(/assets/fonts/Cinzel-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cinzel 400 latin */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(/assets/fonts/Cinzel-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 400 latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/assets/fonts/Inter-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400 latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/assets/fonts/Inter-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space+Grotesk 500 latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/SpaceGrotesk-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space+Grotesk 500 latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/SpaceGrotesk-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space+Grotesk 600 latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/SpaceGrotesk-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space+Grotesk 600 latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/SpaceGrotesk-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space+Grotesk 700 latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/SpaceGrotesk-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space+Grotesk 700 latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/SpaceGrotesk-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Tenor+Sans 400 latin-ext */
@font-face {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/TenorSans-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Tenor+Sans 400 latin */
@font-face {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/TenorSans-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Copperplate · fuente OFICIAL del brand toolkit (titulares / encabezados) */
@font-face {
font-family: 'Copperplate';
src: url('/assets/fonts/Copperplate.otf') format('opentype');
font-weight: 400 700;
font-display: swap;
/* El OTF trae glifos vacíos para acentos (Í·É·Á invisibles); fuera de ASCII cae a Cinzel */
unicode-range: U+0020-007E;
}
/* Inter para body · Cinzel como fallback monumental de Copperplate */
/* Cormorant Garamond 400 latin-ext */
@font-face {
font-family: 'Cormorant';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(/assets/fonts/Cormorant-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond 400 latin */
@font-face {
font-family: 'Cormorant';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(/assets/fonts/Cormorant-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* PALETA EDITORIAL · propuesta del cliente 2026-08-23 · hueso + oro.
Reemplazo TOTAL: salen del sistema el morado #710C8E, el vino #4B163A y
el azul GYG. Sus nombres sobreviven como alias y apuntan aquí.
CONTRASTES MEDIDOS sobre el hueso #F8F6F2, no estimados:
tinta #1A1A1A → 16.12:1 AAA tinta-suave #5A5A5A → 6.39:1 AA
oro #B99154 → 2.69:1 ← FALLA como texto: es DECORACIÓN y nada más
oro-ui #B18848 → 3.00:1 AA-grande / componente de interfaz
oro-txt #7E6134 → 5.34:1 sobre hueso y 4.94:1 sobre el alterno #F1EDE6
(el #8C6C3A que da 4.50 en hueso caía a 4.16 en el alterno)
El oro del mockup se conserva INTACTO para rellenos, ornamentos y chips.
Sus dos variantes bajan sólo la luminosidad: mismo tono 36°, misma
saturación 0.42. Un botón oro lleva texto TINTA (6.00:1), no blanco
(2.90:1) — y encima se parece más al mockup. */
--gyg-blue: #B99154; /* acento primario · oro del mockup */
--gyg-blue-dk: #8C6C3A; /* hover + texto pequeño sobre hueso */
--gyg-ink: #1A1A1A; /* titulares · casi negro */
--gyg-ink-soft: #5A5A5A; /* cuerpo secundario */
--gyg-line: #E4DED4; /* borde · hueso oscurecido */
--gyg-line-soft: #EFEBE4; /* divisor claro */
--gyg-bg: #F8F6F2; /* fondo dominante · hueso */
--gyg-bg-hover: #F1EDE6; /* hover + sección alterna */
--gyg-bg-card: #FFFFFF; /* tarjeta · blanco puro, como el mockup */
/* Los tres papeles del oro. Usar el que corresponde NO es cosmético: el del
mockup mide 2.69:1 y como texto es ilegible para quien no ve fino. */
--oro: #B99154; /* relleno, ornamento, chip, borde decorativo */
--oro-ui: #B18848; /* icono o borde que SIGNIFICA algo (3.00:1) */
--oro-texto: #7E6134;
/* Cuatro tokens que NUNCA se definieron y que nueve reglas usaban con
respaldo hardcodeado de la paleta vieja: `var(--x, #EFEBE4)` no falla, se
disfraza — renderiza el color viejo y nadie lo ve en el CSS. Lo destapó un
revisor adversarial encontrando UNO (`--brand-red-dk`); el censo de var()
sin definir encontró los otros cuatro. Se definen aquí y sus respaldos se
alinean, para que ninguno vuelva a mentir. */
--pink-soft: #F1EDE6; /* superficie suave · era #F1EDE6 rosa */
--pink-mid: #EFEBE4; /* brillo del esqueleto · era #EFEBE4 rosa */
--purple-deep: #2A2A2A; /* cierre del degradado · era #2A2A2A morado */
--coral-deep: #A8834A; /* pareja oscura del oro · era un coral #d97570 */
/* ── ESTADO · restaurados 2026-08-23 ─────────────────────────────────────
Estos SIETE tokens los borré yo al retirar los comentarios de tres paletas
muertas: mi comprobación exigía que el tramo CONTUVIERA comentarios, no que
fuera SÓLO comentarios, y las definiciones vivían al final del tramo. El
daño no truena, se calla: `--danger` sin definir hace que «Token inválido»
del backoffice se pinte en tinta normal, y que los estados activo e
inactivo de un tour queden indistinguibles.
Sobrevivían dentro de `[data-theme="codice"]`, que NO se activa nunca
(`data-theme` tiene cero referencias en HTML y JS) — y encima en pareja
CIRCULAR: `--success: var(--jade-glow)` con `--jade-glow: var(--success)`.
O sea que ni activando el tema habrían resuelto.
El rojo y el verde NO son marca, son SEMÁNTICA: un error tiene que verse
como error aunque la paleta sea hueso y oro. Medidos sobre los tres fondos
del sitio; se cita el PEOR caso de cada uno. */
--danger: #B3261E; /* error · peor caso 5.60:1 (fondo alterno) */
--success: #146C43; /* confirmación · peor caso 5.53:1 */
--warning: var(--oro-texto);
--highlight: var(--oro);
--line-semantic: var(--gyg-line);
--border-glow: var(--oro-ui);
--accent-glow: var(--oro);
/* texto pequeño en oro · 5.34:1 hueso · 4.94:1 alterno */
/* ── TIPOGRAFÍA · tres papeles, no una lista de pilas a mano ──────────────
El mockup separa dos serifs y eso es lo que le da el aire editorial:
CAPITULAR GRABADA con tracking ancho → etiquetas, eyebrows, wordmark
serif de texto con minúscula → titulares, nombres de tour, precios
Antes había 78 pilas escritas a mano en 4 variantes de lo mismo, y
`Copperplate` ni siquiera está auto-alojada: es fuente de macOS, así que
fuera de Mac caía a Cinzel sin que nadie lo notara.
Cuerpo sigue en Inter: el sitio compone 8 idiomas y zh/ja no tienen
subset serif aquí — con una serif latina forzada, esos dos se verían
ajenos al resto. */
--ff-caps: 'Cinzel', Georgia, serif;
--ff-serif: 'Cormorant', 'Cinzel', Georgia, serif;
--ff-body: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
/* ── Paleta de marca oficial Guidemexx (doc 2026-06-14) ── */
/* Los nombres de la marca anterior sobreviven como ALIAS porque 53 reglas los
citan; lo que cambia es a dónde apuntan. Se retiran en una pasada aparte
para no mezclar «cambiar el color» con «renombrar 53 sitios».
`--purple` iba a relleno CON TEXTO BLANCO (`.gmx-tag.active`, `.gf-chip.on`,
`.tc-tag:hover`). Apuntarlo al oro daría 2.90:1 e ilegible: va a TINTA, que
con blanco encima mide 17.40:1 y además es lo que hace el mockup — sus
chips son oscuros, no dorados. El oro entra donde el mockup lo pone, que
es texto y pictograma, y eso se hace regla por regla más abajo. */
--brand-red: var(--gyg-ink);
--brand-teal: var(--gyg-ink);
--brand-cream: var(--gyg-bg);
--purple: var(--gyg-ink); /* era #1A1A1A */
--purple-dk: #000000; /* hover del relleno tinta */
--coral: var(--oro); /* era #B99154 · corazón favoritos, badges */
--coral-dk: var(--oro-texto);
--yellow: var(--oro); /* estrellas */
--pink: var(--gyg-bg-hover); /* fondo suave de chip */
/* ── Decoration legacy (greca/glyph) · NOT used in GYG-clean ── */
--teal: var(--gyg-ink);
--orange: var(--oro);
--green: #A8D88A;
/* ── Variantes AA para TEXTO pequeño (WCAG 2.1 · 1.4.3 · 4.5:1) ────────────
Los tokens base de arriba se conservan intactos para RELLENOS y BORDES,
donde el contraste de texto no aplica. Estas variantes tienen el MISMO tono
y saturación y sólo bajan la luminosidad lo mínimo necesario para alcanzar
4.5:1 sobre blanco. Cada ratio está MEDIDO en el navegador, no estimado:
--orange #FE7E3C 2.54:1 → --orange-text #D14801 4.53:1 (30 instancias)
--coral-dk #F26E66 2.92:1 → --coral-dk-text #E82014 4.52:1 (14)
var(--gray-text) 2.64:1 → --gray-text #70777F 4.53:1 ( 8 · estaba hardcodeado)
var(--gold-text) 1.85:1 → --gold-text #996F01 4.54:1 ( 4 · estaba hardcodeado · el peor del sitio)
Los dos hex que reemplazan --gray-text y --gold-text violaban además la
regla del CLAUDE.md de no hardcodear hex fuera de la paleta. */
--orange-text: var(--oro-texto); /* era #D14801 · las estrellas van en oro */
--coral-dk-text: var(--oro-texto); /* TEXTO pequeño: el rosa da 3.35:1 sobre crema · el morado 9.03:1 */
/* RECALIBRADO 2026-08-23 · el #70777F medía 4.65:1 contra BLANCO, que era el
fondo de entonces. Al pasar el fondo a hueso #F8F6F2 cayó a 4.31:1 sin que
nadie tocara el token: una medición de contraste vale contra el fondo con
el que se hizo, y cambiar el fondo la invalida entera. Este se calibra
contra el fondo MÁS OSCURO de los tres (#F1EDE6), que es el que manda. */
--gray-text: #686C71;
--gold-text: var(--oro-texto);
--jade-text: #197855; /* de #1a7f5a (hardcodeado): 4.97:1 en blanco pero 4.38:1
sobre su propio fondo #e6f4ec · ahora 5.44:1 */
--brand-red-text:var(--gyg-ink); /* SÓLO texto pequeño. El rojo de marca #1A1A1A mide 4.84:1
en blanco pero 4.44:1 sobre cream. Los CTA, rellenos y el
theme-color siguen con #1A1A1A intacto: esto no cambia la
identidad, sólo hace legible el texto chico. */
/* ── Aliases legacy retargeted to GYG-clean ── */
--terra: var(--gyg-ink); /* was --purple · now near-black */
--terra-soft: var(--gyg-ink-soft);
--gold: var(--gyg-blue); /* was --coral · now GYG-blue CTA */
--gold-soft: var(--gyg-line);
--jade: var(--gyg-blue);
/* ── Neutrales GYG-clean ── */
--ink: var(--gyg-ink);
--sand: var(--gyg-ink-soft);
--cream: var(--gyg-bg); /* was #FFF7FB · now pure white */
--cream-deep: var(--gyg-bg-hover);
--line: var(--gyg-line);
--line-soft: var(--gyg-line-soft);
--shadow: 0 4px 16px rgba(26, 26, 26,.08);
--shadow-sm: 0 2px 6px rgba(26, 26, 26,.05);
--radius: 18px;
--radius-sm: 12px;
--ease: .32s cubic-bezier(.22,.61,.36,1);
--ease-fast: .18s cubic-bezier(.22,.61,.36,1); /* same curve · card micro-interactions */
--maxw: 1180px;
/* ── Semantic tokens · W3C-DTCG style · post-2026-05-29 audit ──
* Layer that decouples UI rules from brand hex. ALL new CSS must reference
* the semantic name, never the brand var. Enables A/B palette swap via
* with zero grep across the stylesheet.
* Default theme keeps current brand toolkit identity.
*/
--surface-base: var(--cream);
--surface-card: #ffffff;
--surface-elev: var(--cream-deep);
--surface-dark: var(--ink);
--text-primary: var(--ink);
--text-secondary: var(--sand);
--text-on-dark: var(--cream);
--text-accent: var(--terra);
--accent-primary: var(--purple);
--accent-primary-hover: var(--purple-dk);
/* Era el coral #D5413D, medido 4.51:1 contra blanco y caído a 4.18:1 sobre
hueso — misma causa que el gris de arriba. Y además es un rojo, que la
paleta editorial no tiene: se retira al oro de texto. */
--accent-secondary:var(--oro-texto);
}
/* ── Códice-Neón · activable con ──
* Propuesta post-audit 2026-05-29 (debate 5-panel × 10 turns + brief D6
* prehispánico-modernista-futurista). Base: Itten 1961 (complementary
* opposition) + Palomero-Gallagher NeuroImage 2019 (salience V4 vía
* obsidiana-cochinilla-turquesa-oro) + Lindgaard 2006 (<50ms trust).
* A/B ready: cambia tokens, NO rules. Default theme intacto.
*/
[data-theme="codice"] {
--obsidian-ink: #0B0F1A;
--codex-gold: #D4A24C;
--jade-glow: var(--success);
--cochinilla-spark:var(--danger);
--turquoise-codex: #2DD4E0;
--magenta-pulse: #E841B5;
--maguey-cream: #F4EFE6;
--ink-deep: #1A1325;
--greca-glow: #6F47FF;
--smoke-veil: #3A3147;
--surface-base: var(--maguey-cream);
--surface-card: var(--surface-card);
--surface-elev: #FFF9EE;
--surface-dark: var(--obsidian-ink);
--text-primary: var(--ink-deep);
--text-secondary: var(--smoke-veil);
--text-on-dark: var(--maguey-cream);
--text-accent: var(--codex-gold);
--accent-primary: var(--magenta-pulse);
--accent-primary-hover: var(--cochinilla-spark);
--accent-secondary:var(--turquoise-codex);
--accent-glow: var(--jade-glow);
--success: var(--jade-glow);
--danger: var(--cochinilla-spark);
--warning: var(--codex-gold);
--highlight: var(--codex-gold);
--line-semantic: rgba(232, 65, 181, 0.18);
--border-glow: var(--greca-glow);
}
/* prefers-reduced-motion · rank #15 A11Y · respeta usuarios que deshabilitan animaciones */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
overscroll-behavior-y: contain;
}
/* EDITORIAL 2026-08-23 · todo titular nace en serif. Se pone como regla BASE y
no como override al final del archivo a propósito: un `h2` sin clase —el de
testimonios era exactamente eso— se escapaba de la lista de selectores y
volvía a la sans por herencia. Con la base puesta, lo que no se declare sale
bien; lo que necesite sans lo pide explícitamente. */
h1, h2, h3, h4 { font-family: var(--ff-serif); font-weight: 500; letter-spacing: 0; }
body {
font-family: var(--ff-body);
background: var(--cream);
color: var(--ink);
line-height: 1.55;
min-height: 100vh;
overflow-x: hidden;
touch-action: manipulation;
}
button,
a,
.tour-card,
.chip,
.region-seg-btn,
.wa-fab {
-webkit-tap-highlight-color: transparent;
}
/* Esta regla nombraba `h1, h2, h3` además de `.display`, con la misma
especificidad que la base de arriba y 21 líneas después — así que GANABA, y
los titulares salían en capitular en vez de la serif de texto que el
rediseño instaló. De los cuatro tipos que la base cubre, sólo `h4` recibía
lo declarado. El commit anterior retargeteó ESTA regla a `--ff-caps` sin ver
que competía con la suya propia.
Ahora `.display` es sólo la clase: quien quiera capitular la pide. */
h1, h2, h3, h4 { line-height: 1.18; color: var(--terra); }
/* `[hidden]` es sólo un atributo: cualquier regla con `display` lo anula sin
avisar, y el elemento sigue visible mientras el marcado afirma lo contrario.
Pasó con `.hero-search` y `.hero-chips`, que llevan `display:flex`. */
[hidden] { display: none !important; }
/* ── CABECERA DEL MOCKUP · móvil ────────────────────────────────────────────
El mockup pone: hamburguesa a la izquierda, wordmark CENTRADO, y tres iconos
a la derecha (lupa, corazón, WhatsApp). Aquí el buscador se inyecta en línea
y ocupa media barra, así que el wordmark deja de estar centrado — que es lo
primero que se nota al comparar.
El buscador NO se elimina: se colapsa en la lupa, que abre el mismo cajón.
Y los iconos de carrito, idioma y perfil salen de la barra porque ya viven
en la barra inferior de cinco, donde el mockup los pone. */
@media (max-width: 880px) {
#topbar-search { display: none !important; }
.topbar-inner { display: grid !important; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; }
.topbar .brand { justify-self: center; }
#topbar-cart, #topbar-langcurr, #topbar-profile { display: none !important; }
.topbar-icon-label { display: none !important; }
.topbar .topbar-actions { gap: 14px !important; }
.topbar-icon { min-width: 30px; }
}
.display {
font-family: var(--ff-caps);
font-weight: 600;
letter-spacing: .02em;
line-height: 1.18;
color: var(--terra);
}
.eyebrow {
font-family: var(--ff-caps);
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
/* Rank #15 A11Y · WCAG AA 4.5:1 vs blanco · era var(--gold)=var(--coral) (~3.1:1, falla en texto chico) */
color: var(--accent-secondary);
font-weight: 600;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(var(--maxw), 100% - 40px); margin-inline: auto; }
/* ─── Greca divider · banda decorativa prehispánica ──────────────────── */
.greca {
height: 14px;
background-image: repeating-linear-gradient(
90deg,
var(--teal) 0, var(--teal) 8px,
transparent 8px, transparent 12px,
var(--orange) 12px, var(--orange) 16px,
transparent 16px, transparent 20px,
var(--purple) 20px, var(--purple) 24px,
transparent 24px, transparent 28px
);
opacity: .8;
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.greca--thin { height: 6px; opacity: .55; }
/* ─── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(255,247,251,.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.topbar-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 14px 0;
}
.brand {
font-family: var(--ff-caps); font-weight: 700;
font-size: 1.35rem; letter-spacing: .14em;
color: var(--terra); text-transform: uppercase;
display: flex; align-items: center; gap: 10px;
}
.brand-mark {
width: 34px; height: 34px; border-radius: 9px;
background: var(--terra); display: grid; place-items: center;
overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
/* Logo oficial del cliente (emblema ajolote + wordmark GuideMexx) */
.brand-logo { height: 34px; width: auto; display: block; flex-shrink: 0; max-width: none; object-fit: contain; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
/* Currency selector */
.currency-pick {
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid var(--line); border-radius: 999px;
padding: 7px 14px; font-size: .85rem; font-weight: 500;
color: var(--terra); background: #fff; cursor: pointer;
transition: border-color var(--ease);
}
.currency-pick:hover { border-color: var(--gold); }
.currency-pick select { border: none; background: transparent; font: inherit; color: inherit; cursor: pointer; outline: none; }
/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero {
position: relative; min-height: 88vh;
display: grid; align-items: end;
overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
/* Momento wow: el video aéreo es el movimiento del hero; grade sutil */
.hero-media video, .hero-media img { filter: saturate(1.1) contrast(1.04); }
.hero-media video { display: block; }
.hero-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(30,12,12,.58) 0%, rgba(30,12,12,.05) 45%, rgba(30,12,12,.10) 100%);
}
.hero-content { position: relative; z-index: 1; padding: 0 0 56px; text-align: center; }
/* EL ARCO SUPERIOR DEL MOCKUP · la crema baja sobre las esquinas de la foto en una
curva ancha y poco profunda. Se hace con un pseudo-elemento y no con
`border-radius`, porque el radio recorta la foto y aquí lo que se quiere es que
el FONDO la tape: así la curva conserva el color de la sección de arriba sea
cual sea, y no deja el borde dentado que deja el recorte sobre una imagen. */
.hero { position: relative; }
.hero::before {
content: ""; position: absolute; inset: -1px 0 auto 0; height: clamp(18px, 5vw, 40px);
background: var(--gyg-bg-card, #fff);
border-bottom-left-radius: 100% 100%;
border-bottom-right-radius: 100% 100%;
z-index: 2; pointer-events: none;
}
.hero-slogan-sutil {
font-family: var(--ff-caps);
/* EDITORIAL 2026-08-23 · centrado con el titular, como el mockup. El tracking
baja de .34em a .24em: a 390px de ancho el valor anterior partía la línea en
dos y dejaba «BE HAPPY» solo y desalineado a la izquierda. */
color: rgba(255,255,255,.9); font-size: clamp(.58rem, 2vw, .9rem);
letter-spacing: clamp(.1em, .55vw, .24em);
margin: 0 auto 14px; text-align: center; text-wrap: balance;
text-shadow: 0 1px 8px rgba(30,12,12,.5);
}
.hero-slogan-sutil span { color: var(--oro); }
.hero h1.hero-line {
/* JERARQUÍA INVERTIDA · audit de marca 2026-08-19. Antes esto era «una sola línea
funcional y compacta» a 1.05–1.4rem, porque la foto era la protagonista y el
titular sólo describía el acto de reservar. Ahora el titular ES la promesa de
marca —«México, en privado y a tu ritmo»— y por tanto tiene que leerse como tal.
La sombra se conserva: el texto vive sobre foto/vídeo y no hay contraste
calculable, así que la legibilidad la sostiene la sombra, no el color. */
/* EDITORIAL 2026-08-23 · el mockup del cliente centra el bloque y compone el
titular en serif de texto con peso LIGERO: el aire y la serif hacen el
trabajo que antes hacía la negrita. El tracking pasa a positivo — una
serif de alto contraste apretada se cierra y pierde el aire editorial. */
/* Sólo lo que NO decide la regla consolidada de `body[data-page=home]`:
color, familia y sombra. Tamaño, peso, ritmo y centrado viven allí. */
color: #fff; font-family: var(--ff-serif);
text-shadow: 0 2px 16px rgba(30,12,12,.55);
}
.hero-promise {
/* El subtítulo explica el PRODUCTO —a medida, expertos locales, cada detalle
resuelto— que es lo que justifica una tarifa alta. Deliberadamente más
pequeño que el titular: si compiten, ninguno gana. */
color: rgba(255,255,255,.93); font-size: clamp(.94rem, 1.45vw, 1.12rem);
/* EDITORIAL 2026-08-23 · el mockup pone bajo el titular una BAJADA en
versalitas espaciadas, no un párrafo. Se centra con el titular y se acorta:
un texto en versalitas anchas deja de leerse pasadas ~2 líneas. */
/* Versalitas de dos líneas, como el mockup. En la pasada anterior esto NO
aguantaba y se dejó en caja baja: el texto era una descripción de producto
de veinte palabras y salían 5 líneas espaciadas, ilegibles. Ahora el texto
es de seis palabras —el mockup pone ahí una línea de marca, no una ficha—
y el tratamiento cabe. El límite no era el estilo: era la longitud. */
font-family: var(--ff-caps); text-transform: uppercase;
font-weight: 400; font-size: clamp(.66rem, 2.1vw, .84rem);
max-width: 22ch; margin: 2px auto 0; text-align: center;
line-height: 2.1; letter-spacing: .2em;
text-shadow: 0 1px 12px rgba(30,12,12,.5);
}
/* Sprint-1 · hero destination chips (item 2) */
.hero-promise::before {
/* El ornamento del mockup: rombo centrado sobre un filete fino. Es DECORACIÓN
pura —no lleva texto— así que el oro va en su tono original: la regla de
4.5:1 rige el texto, no un divisor. */
content: "❖"; display: block; width: 9rem; margin: 22px auto 18px;
color: var(--oro); font-size: .78rem; line-height: 1;
border-bottom: 1px solid rgba(255,255,255,.32); padding-bottom: 12px;
}
.hero-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-chips-label { color: rgba(255,247,251,.75); font-size: .82rem; }
.hero-chip {
display: inline-flex; align-items: center;
background: rgba(255,255,255,.15); color: #fff;
border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
padding: 5px 14px; font-size: .82rem; font-weight: 600;
text-decoration: none; transition: background var(--ease);
min-height: 44px; /* medía 32px de alto · mínimo táctil */
box-sizing: border-box;
}
.hero-chip:hover { background: rgba(255,255,255,.28); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--ff-body); font-weight: 600; font-size: .95rem;
padding: 14px 28px; border-radius: 999px; border: none; cursor: pointer;
transition: transform var(--ease), background var(--ease), box-shadow var(--ease);
}
.btn-primary { background: var(--purple); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--purple-dk); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.26); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }
/* ─── Brand slogan · "relax | break free | be happy" (brand toolkit) ────── */
.slogan {
font-family: var(--ff-caps);
letter-spacing: .18em; text-transform: lowercase; color: var(--green);
}
.hero-slogan { display: block; margin-top: 20px; font-size: .82rem; opacity: .95; }
.site-foot .slogan { display: block; margin-top: 14px; font-size: .82rem; }
.foot-emblem { display: block; width: 96px; height: auto; margin-bottom: 10px; }
.foot-logo { display: block; width: min(190px, 72vw); height: auto; margin: 0 0 14px; object-fit: contain; }
/* ─── Category chips ──────────────────────────────────────────────────── */
.section-head { display: flex; flex-direction: column; gap: 6px; margin: 48px 0 22px; }
.section-head h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
.section-head p { color: var(--sand); }
.chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin; }
.chip {
flex-shrink: 0; padding: 10px 20px; border-radius: 999px;
border: 1px solid var(--line); background: #fff; cursor: pointer;
font-weight: 500; font-size: .9rem; color: var(--terra);
transition: all var(--ease); white-space: nowrap;
}
.chip:hover { border-color: var(--gold); }
.chip.active { background: var(--terra); color: var(--cream); border-color: var(--terra); }
.chip .count { opacity: .6; font-size: .8em; margin-left: 4px; }
/* ─── Floating catalog bar · search + chips sticky (como GetYourGuide) ──── */
.catalog-bar {
position: sticky; top: 62px; z-index: 40;
background: var(--cream); padding: 12px 0 10px; margin-bottom: 6px;
}
/* Filters relocated below the catalog (cleaner home) · not sticky there */
.catalog-bar--bottom { position: static; top: auto; z-index: auto; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.catalog-search {
width: 100%; max-width: 480px; display: block;
padding: 14px 22px; border: 1px solid var(--line); border-radius: 999px;
font: inherit; background: #fff; outline: none; box-shadow: var(--shadow-sm);
transition: border-color var(--ease), box-shadow var(--ease);
}
.catalog-search:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,149,142,.18); }
.catalog-bar .chips { margin-top: 12px; padding-bottom: 0; }
/* ─── Tour grid ───────────────────────────────────────────────────────── */
.tour-grid {
display: grid; gap: 22px;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
margin-bottom: 56px;
}
/* Anonymous session personalization shelf (GetYourGuide-style) */
.gmx-personalized { margin: 10px 0 30px; }
.perso-h { margin-bottom: 14px; }
.perso-shelf { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.perso-shelf::-webkit-scrollbar { display: none; }
.perso-card { flex: 0 0 230px; max-width: 230px; text-decoration: none; color: var(--ink); scroll-snap-align: start; display: flex; flex-direction: column; }
.perso-card:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: var(--radius-sm); }
.perso-thumb { display: block; height: 150px; border-radius: 12px; background-size: cover; background-position: center; background-color: var(--cream-deep); box-shadow: var(--shadow-sm); transition: transform var(--ease-fast), box-shadow var(--ease-fast); }
.perso-card:hover .perso-thumb, .perso-card:focus-visible .perso-thumb { transform: translateY(-3px); box-shadow: var(--shadow); }
.perso-card .pc-cat { display: block; margin-top: 8px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sand); font-weight: 700; }
.perso-name { display: block; margin-top: 2px; font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--ink); }
.perso-card .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: .82rem; }
.perso-card .pc-rate { color: var(--gold-text); font-weight: 700; white-space: nowrap; }
.perso-card .pc-rate--new { color: var(--teal); }
.perso-card .pc-rc { color: var(--sand); font-weight: 500; }
.perso-card .pc-price { color: var(--sand); white-space: nowrap; }
.perso-card .pc-price b { color: var(--terra); font-weight: 800; }
.perso-loc { display: block; font-size: .78rem; color: var(--sand); }
/* Curated conversion shelves (top sellers · top-rated · favorites) */
.gmx-shelves { margin: 6px 0 8px; }
.hs-section { margin: 0 0 30px; }
.hs-h { font-family: var(--ff-serif); font-size: 1.45rem; color: var(--ink); margin: 0 0 14px; }
.hs-shelf-wrap { position: relative; }
.hs-shelf { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.hs-shelf::-webkit-scrollbar { height: 4px; }
.hs-shelf::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 2px; }
/* Right-edge fade overlay on desktop · sits over the wrap (not the scroller) so it
never scrolls away and always signals "more cards" without hard-cutting the last one */
.hs-shelf-fade {
position: absolute; top: 0; right: 0; bottom: 8px; width: 72px;
background: linear-gradient(to right, transparent, var(--cream) 75%);
pointer-events: none; z-index: 1;
}
@media (min-width: 761px) {
.hs-shelf { padding-right: 56px; }
}
@media (max-width: 760px) {
.hs-shelf-fade { display: none; }
}
.hs-card { flex: 0 0 240px; max-width: 240px; text-decoration: none; color: var(--ink); scroll-snap-align: start; }
.hs-card:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: var(--radius-sm); }
.hs-thumb { display: block; height: 160px; border-radius: 14px; background-size: cover; background-position: center; background-color: var(--cream-deep); box-shadow: var(--shadow-sm); position: relative; transition: transform var(--ease-fast), box-shadow var(--ease-fast); }
.hs-card:hover .hs-thumb, .hs-card:focus-visible .hs-thumb { transform: translateY(-3px); box-shadow: var(--shadow); }
.hs-badge { position: absolute; top: 10px; left: 10px; background: var(--purple); color: #fff; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.hs-rank { position: absolute; top: 8px; left: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--purple); color: #fff; font-family: var(--ff-serif); font-weight: 700; font-size: 1.05rem; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(40,20,42,.4); }
.hs-name { display: block; margin-top: 10px; font-weight: 600; font-size: .96rem; line-height: 1.35; }
.hs-meta { display: block; margin-top: 4px; font-size: .82rem; color: var(--sand); }
.hs-rate { color: var(--gold-text); font-weight: 600; }
.hs-rc { color: var(--sand); font-weight: 400; }
/* Value proposition · 2x2 icon grid with descriptions (ToursByLocals-style) */
.valueprop { background: #fff; padding: 40px 0; }
.vp-head { max-width: 880px; margin: 0 auto 26px; text-align: center; }
.vp-head h2 { font-size: clamp(1.4rem, 3.2vw, 1.95rem); color: var(--ink); margin: 0; }
.vp-lead { margin: 12px auto 0; max-width: 64ch; color: var(--sand); font-size: 1.02rem; line-height: 1.6; }
.vp-slogan {
margin: 18px auto 28px;
text-align: center;
font-family: var(--ff-caps);
font-size: clamp(1.6rem, 4.2vw, 3.1rem);
line-height: 1.05;
color: #050505;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 800;
}
.vp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; max-width: 880px; margin: 0 auto; }
/* ─── Vibe section · "Relax, Break Free, Be Happy" · value pillars (continuación del hero) ─── */
.vibe-sec { padding: 22px 0 20px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* El slogan de marca corona la sección de pilares · entrada en cascada */
.cat-count--search { margin: 6px 0 14px; scroll-margin-top: 148px; }
@media (max-width: 880px) { .cat-count--search { scroll-margin-top: 118px; } }
body.gmx-searching .gmx-shelves, body.gmx-searching .gmx-personalized { display: none !important; }
.rh-title { font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--ink, #1A1325); margin: 0 0 6px; }
.rh-meta { display: flex; align-items: center; gap: 10px; color: var(--sand); font-size: .95rem; }
.q-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); color: var(--terra); font-size: .95rem; font-weight: 600; cursor: pointer; vertical-align: middle; }
.q-pill:hover { border-color: var(--coral); color: var(--purple); }
.vibe-title--slogan { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55em; row-gap: 6px; }
.sb-word { letter-spacing: .12em; }
.sb-word--accent { color: var(--purple); }
.sb-sep { color: var(--coral); font-size: .72em; }
.sb-word, .sb-sep { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.sb-cascade .sb-word:nth-child(1) { transition-delay: .05s; }
.sb-cascade .sb-sep:nth-child(2) { transition-delay: .2s; }
.sb-cascade .sb-word:nth-child(3) { transition-delay: .3s; }
.sb-cascade .sb-sep:nth-child(4) { transition-delay: .45s; }
.sb-cascade .sb-word:nth-child(5) { transition-delay: .55s; }
.sb-cascade.is-in .sb-word, .sb-cascade.is-in .sb-sep { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .sb-word, .sb-sep { opacity: 1; transform: none; transition: none; } }
.ed-people-h { margin: 38px 0 18px; font-size: 1.45rem; }
.vibe-lead { color: var(--terra); opacity: .85; max-width: 62ch; margin: 8px 0 26px; font-size: 1.05rem; line-height: 1.55; }
.vibe-title {
font-family: var(--ff-caps);
font-weight: 700;
text-align: center;
text-transform: uppercase;
color: var(--ink);
font-size: clamp(1.35rem, 4.4vw, 2.9rem);
line-height: 1.2;
letter-spacing: .12em;
margin: 0;
}
.vibe-sub { text-align: center; color: var(--sand); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.5; max-width: 56ch; margin: 12px auto 40px; }
/* ── FILA DE VALOR · composición del mockup del cliente (2026-08-23) ─────────
El mockup apila: pictograma grande en trazo, título en versalitas de dos
líneas, y una frase corta debajo — todo CENTRADO. Aquí estaba en fila
horizontal con el icono al lado del texto y una píldora de fondo, que a 390px
se convertía en una tira desplazable y no en las cuatro columnas del mockup.
Se conservan las cuatro columnas también en móvil: los pictogramas encogen,
pero la lectura de «cuatro promesas» se sostiene, que es lo que comunica. */
.vibe-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px; margin: 0 auto; align-items: start;
}
.vibe-pillar {
display: flex; flex-direction: column; align-items: center;
gap: 12px; text-align: center; padding: 0 4px;
}
/* Fondo circular uniforme (token existente --cream-deep) para que los 4 íconos
se perciban del mismo tamaño aunque el arte fuente tenga distinto padding interno */
/* Sin píldora de fondo: en el mockup el trazo dorado vive sobre el hueso, sin
contenedor. El fondo circular que había competía con el propio dibujo. */
/* Los pictogramas son SVG EN LÍNEA, no imágenes: así heredan `currentColor` y
el oro sale del token en vez de estar quemado en un archivo. Si la paleta
cambia, los cuatro la siguen solos.
La primera versión los sacó de las mascotas a color con detección de bordes,
y a 56px eran ruido: el cliente dijo que no se distinguía qué era cada cosa,
y tenía razón — un contorno automático de una ilustración detallada no es un
dibujo de línea. Éstos están dibujados: cabeza redonda, tres frondas por
lado, cara amable, y UN objeto que identifica la promesa. */
.vibe-ic { width: clamp(52px, 15vw, 76px); height: clamp(52px, 15vw, 76px);
flex: 0 0 auto; background: none; padding: 0; border-radius: 0;
display: block; object-fit: contain; }
/* Los cuatro ajolotes están GENERADOS con el modelo de imagen que Codex expone
(`image_gen`), sobre la suscripción personal del usuario — NO con la llave de
Azzule, que es de otro cliente y usarla aquí fue un error mío que él paró.
Tres iteraciones: la primera salió de pie con túnica y no cuadraba con las
otras tres; la segunda de perfil y con el sombrero tapando las branquias, que
es justo lo que hace reconocible a un ajolote. La tercera es la buena.
Van como imagen y NO heredan `currentColor`: si la paleta cambia hay que
regenerarlos. El trazo se normalizó al token exacto al importarlos, así que
los cuatro comparten color aunque vengan de generaciones distintas. */
/* Título en VERSALITAS espaciadas, que es lo que le da el aire editorial al
mockup: la serif de texto aquí se leería como un titular más y no como una
etiqueta de promesa. */
.vibe-pt h3 { font-family: var(--ff-caps); text-transform: uppercase;
font-size: clamp(.6rem, 1.9vw, .76rem); letter-spacing: .1em; font-weight: 500;
line-height: 1.45; color: var(--gyg-ink); margin: 0 0 8px; }
.vibe-pt p { font-family: var(--ff-serif); color: var(--gyg-ink-soft);
line-height: 1.45; font-size: clamp(.74rem, 2.1vw, .88rem); margin: 0; }
@media (max-width: 760px) {
.vibe-sec { padding: 10px 0 8px; }
.vibe-title { font-family: var(--ff-caps); letter-spacing: .08em; }
/* El mockup mantiene las CUATRO columnas en móvil: pictograma, título en dos
líneas y frase corta, todo visible a la vez. Aquí había una tira deslizable
que sólo enseñaba dos promesas y escondía las descripciones — se ve como
otra cosa distinta, y es lo que el cliente señaló al comparar.
Las columnas encogen; la lectura de «cuatro promesas» se conserva. */
/* DOS POR DOS, no cuatro en fila. El mockup las pone en una sola fila, y lo
intenté: a 390px salen a 8.6px de título y 9.6px de texto — MEDIDO, no
estimado— y eso no lo lee nadie. Cuatro columnas no caben legibles en un
móvil estrecho, así que se parte en dos filas: las cuatro promesas siguen
visibles a la vez, que es lo que el bloque comunica, y el texto vuelve a
tamaño de lectura. Es la única desviación deliberada del mockup en esta
pasada, y se prefiere legible a idéntico. */
.vibe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; overflow: visible; }
.vibe-pillar { border: 0; border-radius: 0; padding: 0 6px; gap: 10px; }
.vibe-ic { width: clamp(56px, 17vw, 72px); height: clamp(56px, 17vw, 72px); padding: 0; }
.vibe-pt h3 { font-size: clamp(.68rem, 3vw, .78rem); margin: 0 0 6px; white-space: normal; }
.vibe-pt p { display: block; font-size: clamp(.76rem, 3.2vw, .86rem); line-height: 1.45; }
.vibe-sub { margin-bottom: 30px; }
}
.vp-item { display: flex; gap: 16px; align-items: flex-start; }
.vp-ic { width: 34px; height: 34px; flex: 0 0 34px; stroke: var(--purple, #1A1A1A); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Mascota de marca como ícono ilustrativo (iconografía Guidemexx) */
.vp-ic-mascot { width: 64px; height: 64px; flex: 0 0 64px; stroke: none; fill: none; object-fit: contain; margin-top: -6px; }
.vp-ic-official { margin-top: 0; object-position: center; }
.vp-item strong { display: block; font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; line-height: 1.25; }
.vp-item span { color: var(--sand); font-size: .92rem; line-height: 1.5; }
.vp-more { display: block; text-align: center; margin-top: 28px; color: var(--teal, #0E6873); font-weight: 700; text-decoration: none; }
.vp-more:hover { text-decoration: underline; }
@media (max-width: 760px) { .vp-grid { gap: 20px 18px; } .vp-slogan { letter-spacing: .04em; } }
.hs-loc { display: block; color: var(--sand); }
@media (max-width: 760px) { .hs-h { font-size: 1.2rem; } .hs-card { flex-basis: 200px; max-width: 200px; } .hs-thumb { height: 130px; } }
@media (max-width: 760px) { .perso-card { flex-basis: 200px; max-width: 200px; } .perso-thumb { height: 130px; } }
/* Fix 17 · mobile carousel snap · 82% so next card peeks cleanly; right padding lets the peek breathe */
@media (max-width: 480px) {
.hs-shelf { padding-right: 24px; scroll-padding-left: 0; }
.hs-card { flex: 0 0 82%; max-width: 82%; scroll-snap-align: start; }
.perso-shelf { padding-right: 24px; }
.perso-card { flex: 0 0 82%; max-width: 82%; scroll-snap-align: start; }
}
.tour-card {
background: #fff; border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow-sm); cursor: pointer;
transition: transform var(--ease-fast), box-shadow var(--ease-fast);
border: 1px solid var(--line-soft); display: flex; flex-direction: column;
}
.tour-card:hover, .tour-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); }
.tour-card:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.tour-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cream-deep); }
.tour-card-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tour-card:hover .tour-card-media > img { transform: scale(1.06); }
/* Cover placeholder · tours sin foto asignada: emblema sobre gradiente de marca */
.cover-ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, var(--pink) 0%, var(--pink) 55%, var(--purple) 160%); }
.cover-ph img { width: 72px; height: auto; object-fit: contain; opacity: .92; }
.hs-thumb--ph { background-image: url('/assets/icons/logo-oficial-tinta.png'), radial-gradient(circle at 50% 38%, var(--pink) 0%, var(--pink) 55%, var(--purple) 160%); background-size: 56px auto, cover; background-repeat: no-repeat; background-position: center; }
.tour-card-cat {
position: absolute; top: 12px; left: 12px; z-index: 2;
background: rgba(26, 26, 26,.85); color: #fff;
font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
padding: 5px 12px; border-radius: 999px; font-weight: 600;
font-family: var(--ff-caps);
}
.tour-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tour-card-loc { font-size: .8rem; color: var(--teal); font-weight: 600; letter-spacing: .04em; }
.tour-card h3 { font-size: 1.18rem; line-height: 1.25; }
.tour-card-desc { font-size: .9rem; color: var(--sand); flex: 1; }
.tour-card-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.tour-card-meta { font-size: .82rem; color: var(--sand); display: flex; gap: 12px; align-items: center; }
.tour-card-price { text-align: right; }
.tour-card-price .amount { font-family: var(--ff-caps); font-size: 1.3rem; font-weight: 600; color: var(--terra); }
.tour-card-price .unit { font-size: .72rem; color: var(--sand); display: block; }
.rating { display: inline-flex; align-items: center; gap: 4px; color: var(--orange-text); font-weight: 700; font-size: .82rem; }
.rcount { color: var(--sand); font-weight: 400; }
/* ─── Card · GetYourGuide-style (badge, fav, meta, from-price) ─── */
.tour-card-badge {
position: absolute; top: 12px; left: 12px; z-index: 2;
background: rgba(42,20,48,.86); color: #fff;
font-size: .68rem; letter-spacing: .03em; font-weight: 700;
padding: 5px 11px; border-radius: 8px;
}
.tour-card-fav {
position: absolute; top: 10px; right: 10px; z-index: 2;
width: 44px; height: 44px; border-radius: 50%; border: none;
background: rgba(255,255,255,.92); color: var(--sand); font-size: 1.05rem;
cursor: pointer; display: grid; place-items: center;
transition: color var(--ease), transform var(--ease); box-shadow: var(--shadow-sm);
}
.tour-card-fav:hover { transform: scale(1.08); }
.tour-card-fav.is-fav { color: var(--coral-dk-text); }
.tour-card-cat-label { font-family: var(--ff-caps); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sand); }
.tour-card-meta-line { font-size: .82rem; color: var(--sand); margin-top: 2px; }
.tour-card-price .from { font-size: .68rem; color: var(--sand); display: block; }
.tour-card-partner {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding-top: 2px; color: var(--sand); font-size: .78rem;
}
.tour-card-partner span:first-child {
color: var(--terra); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sprint-1 · consolidated trust micro-line (item 7) */
.tour-card-trust-micro { font-size: .78rem; color: var(--sand); margin-top: 2px; }
/* Sprint-1 · booking CTA in card footer (item 6) */
.tour-card-book-cta {
display: block; text-align: center;
/* EL BOTÓN DE RESERVAR ES EL ÚNICO RELLENO DORADO DE LA PÁGINA, y eso es
deliberado. Con la paleta editorial todo el texto es tinta, así que un CTA
también en tinta deja de ser el elemento más saliente — que es justo lo que
un botón de compra no puede permitirse. El oro le devuelve el tono propio
sin salirse del mockup. Texto en TINTA (6.00:1); en blanco daría 2.90:1. */
background: var(--oro); color: var(--gyg-ink);
font-weight: 600; font-size: .9rem;
padding: 12px 18px; min-height: 44px;
border-radius: 0 0 var(--radius, 12px) var(--radius, 12px);
text-decoration: none; transition: background var(--ease);
}
/* `--brand-red-dk` NUNCA existió: no está definido en ningún archivo, así que
este hover caía al respaldo `--coral-dk`, que hoy apunta al oro-oliva. El
botón cambiaba de color al pasar el cursor por un token fantasma, y el
respaldo lo hacía invisible — un `var(--x, respaldo)` con `--x` inexistente
no falla, se disfraza. Lo cazó un revisor adversarial, no una prueba. */
.tour-card-book-cta:hover { background: #A8834A; color: var(--gyg-ink); }
.catalog-tags {
display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
width: 100%; padding: 2px 0 4px;
}
.catalog-tags::-webkit-scrollbar { display: none; }
.catalog-tag {
flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--terra);
border-radius: 999px; padding: 9px 14px; font: inherit; font-size: .88rem; font-weight: 700;
cursor: pointer; transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.catalog-tag:hover { border-color: var(--gyg-blue); color: var(--gyg-blue); }
.catalog-tag.active { background: var(--gyg-blue); color: #fff; border-color: var(--gyg-blue); }
/* ─── Sección de etiquetas (estilo GYG · pestañas + grid de tags) ──────── */
.gmx-tags { margin: 4px 0 22px; }
.gmx-tags-tabs {
display: flex; gap: 26px; border-bottom: 1px solid var(--line);
margin-bottom: 18px; overflow-x: auto; scrollbar-width: none;
}
.gmx-tags-tabs::-webkit-scrollbar { display: none; }
.gmx-tags-tab {
flex: 0 0 auto; background: none; border: none; cursor: pointer;
font: inherit; font-weight: 700; font-size: 1rem; color: var(--sand);
padding: 0 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
transition: color var(--ease), border-color var(--ease);
}
.gmx-tags-tab:hover { color: var(--ink); }
.gmx-tags-tab.active {
/* El TEXTO va en oro-texto (5.34:1); el filete inferior puede ir en el oro
del mockup, que como borde no está sujeto al umbral de texto. Antes ambos
usaban el mismo token y la etiqueta medía 2.69:1. */
color: var(--oro-texto); border-bottom-color: var(--oro);
}
.gmx-tags-grid {
display: flex; flex-wrap: wrap; gap: 10px;
}
/* Mobile: las filas de chips van en una sola línea deslizable (patrón GYG),
nunca apiladas en varias filas que empujan el contenido */
@media (max-width: 880px) {
.gmx-tags-grid, .gf-chips, .gf-group {
flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gmx-tags-grid::-webkit-scrollbar, .gf-chips::-webkit-scrollbar, .gf-group::-webkit-scrollbar { display: none; }
.gmx-tags-grid > *, .gf-chips > *, .gf-group > * { flex: 0 0 auto; }
}
.gmx-tag {
border: 1px solid var(--line); background: #fff; color: var(--terra);
border-radius: 999px; padding: 10px 16px; font: inherit; font-size: .9rem; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.gmx-tag:hover { border-color: var(--gyg-blue); color: var(--gyg-blue); }
.gmx-tag.active { background: var(--purple, #1A1A1A); color: #fff; border-color: var(--purple, #1A1A1A); }
.gmx-tag-n { font-size: .78rem; opacity: .7; font-weight: 600; }
.gmx-tag.active .gmx-tag-n { opacity: .85; }
.gmx-tag-toggle { color: var(--purple, #1A1A1A); border-style: dashed; font-weight: 700; }
.gmx-tag-toggle:hover { background: var(--pink, #F1EDE6); }
.gmx-tag.active:hover { color: #fff; border-color: var(--purple-dk, #000000); background: var(--purple-dk, #000000); }
/* ── Barra de filtros activos · pills removibles (AND visible) ─────────── */
.gmx-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.gmx-af-label { color: var(--sand); font-size: .85rem; font-weight: 700; }
.gmx-af-pill {
border: 1px solid var(--purple, #1A1A1A); background: var(--pink, #F1EDE6); color: var(--purple, #1A1A1A);
border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .82rem; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
transition: background var(--ease), color var(--ease);
}
.gmx-af-pill:hover { background: var(--purple, #1A1A1A); color: #fff; }
.gmx-af-clear {
border: none; background: none; color: var(--gyg-blue); text-decoration: underline;
font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; padding: 6px 8px;
}
.gmx-af-clear:hover { color: var(--purple, #1A1A1A); }
.gmx-tags-count { display: block; margin-top: 12px; color: var(--sand); font-size: .85rem; }
/* ─── Footer ──────────────────────────────────────────────────────────── */
.site-foot { background: var(--terra); color: var(--cream); margin-top: 40px; }
.site-foot-inner { padding: 44px 0 32px; display: grid; gap: 24px; grid-template-columns: minmax(220px, 1.5fr) repeat(auto-fit, minmax(160px, 1fr)); }
.site-foot h4 { font-family: var(--ff-caps); color: var(--yellow); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.site-foot a, .site-foot p { color: rgba(255,247,251,.82); font-size: .9rem; line-height: 2; }
.site-foot a:hover { color: #fff; }
.site-foot-privacy { display: inline-block; margin-top: 2px; }
.site-foot-bottom { border-top: 1px solid rgba(255,247,251,.18); padding: 18px 0; font-size: .8rem; color: rgba(255,247,251,.66); text-align: center; }
.site-foot-bottom a { color: rgba(255,247,251,.76); }
/* ─── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.hero { min-height: 70vh; }
/* Mobile · horizontal scroll-snap shelf (GetYourGuide/Airbnb style) */
.tour-grid {
display: flex; grid-template-columns: none;
overflow-x: auto; scroll-snap-type: x mandatory;
gap: 14px; padding: 2px 16px 12px; margin: 0 -16px;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tour-grid::-webkit-scrollbar { display: none; }
.tour-grid > .tour-card { flex: 0 0 80%; max-width: 80%; scroll-snap-align: start; }
.site-foot-inner { grid-template-columns: 1fr; }
.topbar .brand { font-size: 1.1rem; }
.brand-logo { height: 34px; }
.currency-pick { padding: 6px 10px; font-size: .8rem; }
.catalog-bar { top: 54px; }
/* Filters moved below the catalog · not sticky at the bottom */
.catalog-bar--bottom { position: static !important; top: auto; margin-top: 24px; }
}
/* Booking popovers also run in the app-shell layout between 761 and 880 px.
Keep fixed conversion controls from covering them in mobile landscape. */
@media (min-width: 761px) and (max-width: 880px) {
body.gmx-booking-pop-open { overflow: hidden; }
body.gmx-booking-pop-open::after {
content: "";
position: fixed;
inset: 0;
z-index: 109;
/* BUG FIX (Bug 2): removed backdrop-filter:blur that made the screen look
transparent/see-through on iOS Safari when the calendar was open.
Solid semi-opaque overlay is sufficient — blur was causing the ghosting. */
background: rgba(8,23,38,.52);
}
body.gmx-booking-pop-open .mobile-cta,
body.gmx-booking-pop-open .wa-fab { display: none !important; }
}
@media (min-width: 881px) {
/* Desktop: the booking popover is an ANCHORED DROPDOWN (see tour.html), not a
modal. No full-page dim / scroll-lock here — that detached the popover to the
top of the viewport and greyed the whole page, so it looked frozen and the
user "couldn't pick anything" (GMX date-picker bug, 2026-06-28). */
body.gmx-booking-pop-open { overflow: visible; }
}
/* Hero CTAs · apilar full-width en pantallas muy angostas (evita recorte EN/FR) */
/* Fix 15 · hero H1 mobile premium weight (Sprint 3) */
@media (max-width: 480px) {
.hero-cta { flex-direction: column; align-items: stretch; }
.hero-cta .btn { width: 100%; }
.hero h1 { font-weight: 700; font-size: clamp(1.8rem, 6.5vw, 2.2rem); max-width: 18ch; }
}
/* ─── Skeleton loading ────────────────────────────────────────────────── */
.skel { background: linear-gradient(90deg, var(--cream-deep) 25%, var(--pink-mid, #EFEBE4) 50%, var(--cream-deep) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius); }
@keyframes shimmer { to { background-position: -200% 0; } }
.tour-card.is-skel { pointer-events: none; }
.tour-card.is-skel .tour-card-media { animation: shimmer 1.4s infinite; background: linear-gradient(90deg, var(--cream-deep) 25%, var(--pink-mid, #EFEBE4) 50%, var(--cream-deep) 75%); background-size: 200% 100%; }
/* Fix 16 · skeleton-card · generic shimmer placeholder for guide cards + tour cards */
@keyframes skel-shimmer { to { background-position: -200% 0; } }
.skeleton-card {
border-radius: var(--radius);
overflow: hidden;
background: #fff;
border: 1px solid var(--line-soft, #ECECEC);
pointer-events: none;
}
.skeleton-card .sk-thumb {
width: 100%; aspect-ratio: 4/3;
background: linear-gradient(90deg, var(--cream-deep, #F5F5F5) 25%, #e8e8e8 50%, var(--cream-deep, #F5F5F5) 75%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skeleton-card .sk-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.skeleton-card .sk-line {
height: 12px; border-radius: 6px;
background: linear-gradient(90deg, var(--cream-deep, #F5F5F5) 25%, #e8e8e8 50%, var(--cream-deep, #F5F5F5) 75%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skeleton-card .sk-line.sk-short { width: 55%; }
.skeleton-card .sk-line.sk-med { width: 80%; }
.skeleton-card .sk-line.sk-tall { height: 18px; }
/* ════════════════════════════════════════════════════════════════════
Premium home sections · trust strip · why · testimonials · CTA band
(brand toolkit palette · Cinzel headings · greca-consistent)
════════════════════════════════════════════════════════════════════ */
.trust-strip { background: linear-gradient(180deg, var(--pink) 0%, var(--cream) 100%); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding: 18px 0; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; color: var(--terra); flex: 1 1 auto; justify-content: center; }
.trust-ic { width: 22px; height: 22px; flex-shrink: 0; }
.trust-ic, .why-ic svg, .foot-social svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trust-ic { color: var(--coral-dk-text); }
/* Why · value props */
.why-sec { padding: 18px 0 8px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.why-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform var(--ease), box-shadow var(--ease); }
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.why-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--pink); color: var(--purple); margin-bottom: 16px; }
.why-ic svg { width: 28px; height: 28px; }
.why-card h3 { font-family: var(--ff-serif); font-size: 1.18rem; color: var(--terra); margin-bottom: 8px; }
.why-card p { color: var(--sand); line-height: 1.6; font-size: .96rem; }
/* Testimonials */
.testi-sec { padding: 40px 0; margin-top: 30px; background: linear-gradient(180deg, var(--cream) 0%, var(--pink) 50%, var(--cream) 100%); }
.testi-rating { margin-top: 8px; color: var(--sand); font-size: .95rem; }
.testi-rating strong { color: var(--terra); }
.testi-stars { color: var(--gold-star); letter-spacing: 2px; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.testi-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.testi-card blockquote { font-size: 1.02rem; line-height: 1.65; color: var(--ink); font-style: italic; }
.testi-card figcaption { color: var(--sand); font-size: .88rem; }
.testi-card figcaption strong { color: var(--terra); font-style: normal; }
/* CTA / newsletter band */
.cta-band { background: linear-gradient(120deg, var(--purple) 0%, var(--purple-dk) 60%, var(--purple-deep, #2A2A2A) 100%); color: var(--cream); margin-top: 36px; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 44px 0; flex-wrap: wrap; }
.cta-copy h2 { font-family: var(--ff-serif); color: #fff; font-size: 1.7rem; margin-bottom: 6px; }
.cta-copy p { color: rgba(255,247,251,.82); max-width: 460px; }
.cta-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cta-form input { padding: 13px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; font: inherit; min-width: 240px; outline: none; }
.cta-form input::placeholder { color: rgba(255,247,251,.7); }
.cta-form input:focus { border-color: var(--coral); background: rgba(255,255,255,.18); box-shadow: 0 0 0 3px rgba(255,149,142,.25); }
/* Light cta-band override · readable input on the pale background */
.cta-form input { background: #fff; color: var(--gyg-ink, #1a2b49); border-color: var(--line, #e7ddd0); }
.cta-thanks { color: var(--yellow); font-weight: 600; }
/* Footer social */
.foot-social { display: flex; gap: 10px; margin-top: 12px; }
.foot-social a { display: grid; place-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,247,251,.4); color: var(--cream, #fff7fb); transition: all var(--ease); }
.foot-social a:hover { background: var(--purple); color: #fff; border-color: var(--purple); }
.foot-social svg { width: 19px; height: 19px; }
/* Facebook/TikTok son glyphs rellenos · Instagram es contorno (stroke) */
.foot-social a[aria-label="Facebook"] svg, .foot-social a[aria-label="TikTok"] svg { fill: currentColor; stroke: none; }
@media (max-width: 860px) {
.why-grid, .testi-grid { grid-template-columns: 1fr; }
.trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trust-item { justify-content: flex-start; font-size: .84rem; }
.cta-inner { flex-direction: column; align-items: flex-start; }
.cta-form input { min-width: 0; flex: 1; }
}
/* ════════════════════════════════════════════════════════════════════
Region segmented control (brief rev02 D1 · Península / CDMX)
════════════════════════════════════════════════════════════════════ */
.region-seg {
display: inline-flex;
gap: 4px;
padding: 4px;
margin-top: 12px;
background: var(--pink);
border-radius: 999px;
border: 1px solid var(--line-soft);
}
.region-seg-btn {
border: none;
background: transparent;
color: var(--terra);
font: inherit;
font-size: .86rem;
font-weight: 600;
padding: 8px 18px;
border-radius: 999px;
cursor: pointer;
transition: background var(--ease), color var(--ease);
white-space: nowrap;
}
.region-seg-btn:hover { background: rgba(255,255,255,.55); }
.region-seg-btn.active {
background: var(--purple);
color: #fff;
box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) {
.region-seg { display: flex; width: 100%; }
.region-seg-btn { flex: 1; padding: 8px 8px; font-size: .8rem; }
}
/* ════════════════════════════════════════════════════════════════════
Mundial 2026 microsite (brief D2)
════════════════════════════════════════════════════════════════════ */
.mundial-hero {
background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dk) 55%, var(--orange, var(--orange)) 110%);
color: #fff;
padding: 60px 0 50px;
text-align: center;
position: relative;
overflow: hidden;
}
.mundial-hero::after {
content: "";
position: absolute; inset: 0;
background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px);
pointer-events: none;
}
.mundial-hero h1 { font-family: var(--ff-serif); font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.2; margin-bottom: 10px; }
.mundial-hero h1 em { color: var(--yellow); font-style: normal; }
.mundial-hero p { max-width: 640px; margin: 0 auto; color: rgba(255,247,251,.92); font-size: 1.05rem; line-height: 1.55; }
.mundial-hero .eyebrow { color: var(--yellow); }
.mundial-sec { padding: 44px 0 16px; }
.mundial-sec .section-head { margin: 0 0 22px; }
.mundial-disclaimer {
background: var(--pink); color: var(--ink);
border-radius: var(--radius-sm);
padding: 10px 14px; font-size: .82rem; line-height: 1.5;
margin-bottom: 18px; text-align: center;
}
.match-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-soft); background: #fff; box-shadow: var(--shadow-sm); }
.match-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.match-table thead { background: var(--pink); }
.match-table th { text-align: left; padding: 12px 16px; font-family: var(--ff-caps); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); border-bottom: 1px solid var(--line); }
.match-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.match-table tr:hover td { background: rgba(255,236,250,.4); }
.match-table .stage-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--purple); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .03em; }
.match-table .stage-badge.ko { background: var(--coral-dk); }
.match-filter { display: inline-flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.match-filter button { border: 1px solid var(--line); background: #fff; color: var(--terra); padding: 6px 14px; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all var(--ease); }
.match-filter button:hover { border-color: var(--gold); }
.match-filter button.active { background: var(--terra); color: #fff; border-color: var(--terra); }
.fanfest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.fanfest-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; transition: transform var(--ease), box-shadow var(--ease); }
.fanfest-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fanfest-card h3 { font-family: var(--ff-serif); color: var(--terra); font-size: 1.18rem; }
.fanfest-card .ff-loc { font-size: .82rem; color: var(--teal); font-weight: 600; }
.fanfest-card .ff-cap { font-size: .85rem; color: var(--sand); }
.fanfest-card p { color: var(--ink); line-height: 1.55; font-size: .94rem; margin-top: 4px; }
.mundial-cta-band { text-align: center; padding: 30px 0 36px; }
.mundial-cta-band a { display: inline-block; }
/* ── Countdown (Campo-Marte style monospace, on hero) ── */
.countdown {
display: flex; flex-direction: column; align-items: center; gap: 10px;
margin: 22px auto 0; max-width: 560px;
}
.countdown-label {
font-family: var(--ff-caps); font-size: .78rem;
letter-spacing: .14em; text-transform: uppercase;
color: rgba(255,247,251,.78);
}
.countdown-grid {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px; border-radius: var(--radius);
background: rgba(0,0,0,.28);
border: 1px solid rgba(255,225,87,.32);
backdrop-filter: blur(4px);
}
.countdown .cd-cell {
display: flex; flex-direction: column; align-items: center; gap: 4px;
min-width: 58px;
}
.countdown .cd-num {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
font-variant-numeric: tabular-nums;
font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700;
color: var(--yellow); line-height: 1;
}
.countdown .cd-unit {
font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255,247,251,.78);
}
.countdown .cd-sep { color: var(--yellow); opacity: .55; font-size: 1.4rem; font-weight: 700; }
.countdown-target {
font-size: .82rem; color: rgba(255,247,251,.86); font-style: italic;
}
/* ── Sticky anchor nav (mexicocityfwc26 + campomarte style) ── */
.mundial-anchors {
position: sticky; top: 0; z-index: 90;
background: var(--purple-dk, var(--purple-deep, #2A2A2A));
border-bottom: 1px solid rgba(255,225,87,.18);
box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.mundial-anchors .container {
display: flex; gap: 6px; overflow-x: auto; padding: 10px 24px;
scrollbar-width: none;
}
.mundial-anchors .container::-webkit-scrollbar { display: none; }
.mundial-anchors a {
flex-shrink: 0; padding: 6px 14px; border-radius: 999px;
color: rgba(255,247,251,.84); text-decoration: none;
font-size: .82rem; font-weight: 600; letter-spacing: .04em;
border: 1px solid transparent; transition: all var(--ease);
}
.mundial-anchors a:hover { color: var(--yellow); border-color: rgba(255,225,87,.32); }
/* ── Experiential 3-card grid (Campo-Marte Fútbol/Arte/Sabor) ── */
.experiential-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px; margin-top: 8px;
}
.exp-card {
display: block; padding: 28px 22px 22px; border-radius: var(--radius);
text-decoration: none; color: var(--ink);
background: #fff; border: 1px solid var(--line-soft);
box-shadow: var(--shadow-sm); transition: all var(--ease);
position: relative; overflow: hidden;
}
.exp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); }
.exp-card .exp-emoji { font-size: 2.4rem; display: block; line-height: 1; margin-bottom: 8px; }
.exp-card h3 { font-family: var(--ff-serif); color: var(--terra); font-size: 1.22rem; margin-bottom: 6px; }
.exp-card p { color: var(--ink); font-size: .92rem; line-height: 1.5; margin-bottom: 12px; }
.exp-card .exp-cta { color: var(--teal); font-weight: 600; font-size: .88rem; }
.exp-card--futbol::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--purple); }
.exp-card--arte::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--teal); }
.exp-card--sabor::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--orange); }
/* ── Fanfest card · media variant (cover image header) ── */
.fanfest-card--media { padding: 0; overflow: hidden; }
.fanfest-card--media .ff-cover { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--pink); }
.fanfest-card--media .ff-cover img { width: 100%; height: 100%; object-fit: cover; }
.fanfest-card--media .ff-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.ff-link { color: var(--teal); font-weight: 600; font-size: .88rem; margin-top: 6px; text-decoration: none; }
.ff-link:hover { color: var(--terra); }
/* ── Culture grid (video + side panel) ── */
.culture-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { .culture-grid { grid-template-columns: 1fr; } }
.culture-video {
border-radius: var(--radius); overflow: hidden; background: #000;
box-shadow: var(--shadow-sm); position: relative;
}
.culture-video video { width: 100%; display: block; aspect-ratio: 16/9; background: #000; }
.culture-video-cap { padding: 12px 16px; background: var(--pink); color: var(--ink); }
.culture-soon { display: inline-block; background: var(--gold); color: var(--ink); padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.culture-video-cap p { font-size: .88rem; margin: 0; }
.culture-side { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px 22px; box-shadow: var(--shadow-sm); }
.culture-side h3 { font-family: var(--ff-serif); color: var(--terra); font-size: 1.18rem; margin-bottom: 8px; }
.culture-side p { font-size: .92rem; line-height: 1.55; color: var(--ink); margin-bottom: 14px; }
.culture-bullets { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.culture-bullets li { font-size: .88rem; color: var(--ink); padding-left: 18px; position: relative; line-height: 1.45; }
.culture-bullets li::before { content: "·"; color: var(--orange); position: absolute; left: 4px; top: -2px; font-size: 1.4rem; font-weight: 700; }
/* "Próximamente" PDF button neutralization */
[data-pdf-soon] { opacity: .68; pointer-events: none; cursor: not-allowed; }
/* ── News grid (4 article cards, Instagram-card feel) ── */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.news-card {
background: #fff; border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm);
transition: transform var(--ease), box-shadow var(--ease);
display: flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.news-card .nc-cover { aspect-ratio: 4/3; overflow: hidden; background: var(--pink); }
.news-card .nc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card:hover .nc-cover img { transform: scale(1.04); }
.news-card .nc-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.news-card .nc-meta { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.news-card h3 { font-family: var(--ff-serif); color: var(--terra); font-size: 1.04rem; line-height: 1.3; margin: 2px 0 4px; }
.news-card p { font-size: .88rem; line-height: 1.5; color: var(--ink); margin: 0; }
.news-card .nc-date { font-size: .76rem; color: var(--sand); margin-top: 6px; }
/* ════════════════════════════════════════════════════════════════════
Tour-detail rich info for services (brief D5 · FAQ + cómo funciona)
════════════════════════════════════════════════════════════════════ */
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.faq-q {
width: 100%; text-align: left; background: none; border: none;
padding: 16px 18px; font: inherit; font-size: 1rem; font-weight: 600;
color: var(--terra); cursor: pointer; display: flex;
justify-content: space-between; align-items: center; gap: 12px;
}
.faq-q::after { content: "+"; font-size: 1.4rem; color: var(--coral); font-weight: 400; flex-shrink: 0; transition: transform var(--ease); }
.faq-q[aria-expanded="true"]::after { content: "−"; transform: rotate(0); }
.faq-q:hover { background: var(--cream-deep); }
.faq-a { padding: 0 18px 16px; color: var(--ink); line-height: 1.6; font-size: .95rem; }
.faq-a[hidden] { display: none; }
.howit-strip {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
margin-top: 8px;
}
.howit-step {
/* GYG-clean · --pink es del theme legacy "palacio" (unused aquí); superficie
neutra consistente con el resto de tarjetas del tema (mismo token que
tour-card-media/hs-thumb usan como fondo elevado neutro). */
background: var(--cream-deep); border-radius: var(--radius-sm);
padding: 18px 18px 16px; text-align: center;
}
.howit-num {
display: grid; place-items: center; width: 40px; height: 40px;
border-radius: 50%; background: var(--purple); color: #fff;
font-family: var(--ff-serif); font-weight: 700;
margin: 0 auto 10px;
}
.howit-step strong { display: block; color: var(--terra); margin-bottom: 4px; }
.howit-step span { color: var(--sand); font-size: .88rem; line-height: 1.5; }
.svc-trust {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
margin-top: 14px; padding: 14px 16px;
background: var(--cream); border: 1px solid var(--line-soft);
border-radius: var(--radius-sm); font-size: .85rem;
}
/* Fix 7 (mismo root-cause) · display:grid propio vencía al [hidden] nativo */
.svc-trust[hidden] { display: none; }
.svc-trust span { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.svc-trust span::before { content: "✓"; color: var(--jade); font-weight: 700; flex-shrink: 0; }
@media (max-width: 740px) {
.howit-strip { grid-template-columns: 1fr; }
.svc-trust { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════════
Sobre Guidemexx page (brief D3 · sobre.html)
════════════════════════════════════════════════════════════════════ */
.sobre-hero {
position: relative; padding: 80px 0; text-align: center;
background: linear-gradient(180deg, var(--pink) 0%, var(--cream) 100%);
overflow: hidden;
}
.sobre-hero h1 { font-family: var(--ff-serif); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--terra); margin-bottom: 12px; }
.sobre-hero p { max-width: 640px; margin: 0 auto; color: var(--ink); line-height: 1.6; font-size: 1.05rem; }
.sobre-video {
margin: 30px auto 0; max-width: 760px; border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow); background: var(--cream-deep);
aspect-ratio: 16/9;
}
.sobre-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.person-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.person-card .pc-photo { aspect-ratio: 3/4; background: var(--cream-deep); overflow: hidden; }
.person-card .pc-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-card .pc-body { padding: 18px 20px; }
.person-card h3 { font-family: var(--ff-serif); font-size: 1.1rem; color: var(--terra); margin-bottom: 4px; }
.person-card .pc-role { font-size: .82rem; color: var(--coral); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.person-card .pc-bio { color: var(--ink); line-height: 1.55; font-size: .92rem; }
.region-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.region-card { position: relative; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--ease), box-shadow var(--ease); }
.region-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.region-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.region-card:hover img { transform: scale(1.06); }
.region-card .rgc-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(42,20,48,.78) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; color: #fff; }
.region-card h3 { font-family: var(--ff-serif); font-size: 1.5rem; color: #fff; margin-bottom: 4px; }
.region-card p { color: rgba(255,247,251,.92); font-size: .94rem; line-height: 1.45; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform var(--ease), box-shadow var(--ease); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card .bc-cover { aspect-ratio: 16/10; overflow: hidden; background: var(--cream-deep); }
.blog-card .bc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-card:hover .bc-cover img { transform: scale(1.05); }
.blog-card .bc-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card .bc-meta { font-size: .76rem; color: var(--sand); text-transform: uppercase; letter-spacing: .08em; }
.blog-card h3 { font-family: var(--ff-caps); font-size: 1.05rem; color: var(--terra); line-height: 1.3; }
.blog-card .bc-excerpt { color: var(--ink); font-size: .92rem; line-height: 1.55; flex: 1; }
.blog-card .bc-read { font-size: .82rem; color: var(--teal); font-weight: 600; }
@media (max-width: 860px) {
.people-grid, .blog-grid { grid-template-columns: 1fr; }
.region-cards { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════════
Topbar nav (Mundial 2026 + Sobre)
════════════════════════════════════════════════════════════════════ */
.topnav { display: inline-flex; gap: 18px; align-items: center; margin-left: 22px; }
.topnav a {
color: var(--terra); font-weight: 600; font-size: .9rem;
padding: 6px 10px; border-radius: 8px;
transition: background var(--ease), color var(--ease);
letter-spacing: .02em;
}
.topnav a:hover { background: var(--pink); }
.topnav a.is-mundial { color: var(--coral-dk-text); }
.topnav a.is-mundial::before { content: "★ "; }
@media (max-width: 740px) {
.topnav { display: none; }
.topnav.is-mobile-on { display: flex; gap: 4px; margin: 8px 0 0; flex-basis: 100%; flex-wrap: wrap; }
.topnav.is-mobile-on a { font-size: .8rem; padding: 4px 8px; }
}
/* ════════════════════════════════════════════════════════════════════
Hero responsive · mobile usa imagen sharp (no video low-bitrate)
+ WhatsApp FAB (botón flotante de ventas + atención + cierre)
════════════════════════════════════════════════════════════════════ */
.hero-media img { display: none; }
.hero-media video { display: block; }
@media (max-width: 880px) {
.hero-media video { display: none; }
.hero-media img { display: block; }
}
/* WhatsApp floating action button · esquina inf-derecha · auto-inyectado por wa-fab.js */
.wa-fab {
position: fixed; right: 18px; bottom: 18px; z-index: 90;
width: 56px; height: 56px; border-radius: 50%;
background: var(--whatsapp-green); color: #fff;
display: grid; place-items: center; text-decoration: none;
box-shadow: 0 10px 28px rgba(37,211,102,.45), 0 0 0 6px rgba(37,211,102,.10);
transition: transform var(--ease), box-shadow var(--ease);
animation: wa-bounce 3.4s ease-in-out infinite;
}
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 14px 36px rgba(37,211,102,.55), 0 0 0 8px rgba(37,211,102,.14); }
.wa-fab svg { width: 30px; height: 30px; fill: currentColor; }
@keyframes wa-bounce { 0%,92%,100% { transform: translateY(0); } 95% { transform: translateY(-4px); } 97% { transform: translateY(-2px); } }
/* En mobile · sube el FAB un poco para no chocar con el mobile-cta bar del tour-detail */
@media (max-width: 880px) {
.wa-fab { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
.wa-fab svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.wa-fab { animation: none; }
}
/* ============================================================ */
/* Tour detail · v10 polishes (GYG gold standard alignment) */
/* ============================================================ */
/* Polish #2 · Show more / less toggle on description */
.fulldesc-text { color: var(--ink); line-height: 1.7; }
.fulldesc-toggle {
margin-top: 10px;
background: none; border: none; padding: 0;
color: var(--teal); font: inherit; font-size: .92rem; font-weight: 600;
cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.fulldesc-toggle:hover { color: var(--terra); }
/* Polish #4 · Important info bullet list */
.important-list { list-style: none; display: grid; gap: 10px; }
.important-list li {
position: relative; padding-left: 28px; line-height: 1.55;
color: var(--ink); font-size: .96rem;
}
.important-list li::before {
content: "ⓘ"; position: absolute; left: 0; top: 0;
color: var(--teal); font-size: 1.05rem; font-weight: 700;
}
.important-list li strong { color: var(--terra); }
/* Polish #1 · Reviews overall layout · score + breakdown bars side-by-side */
.reviews-overall {
display: grid; grid-template-columns: minmax(180px, .9fr) 1.6fr;
align-items: center; gap: 18px 28px; margin-bottom: 18px;
padding: 18px 22px; background: var(--cream); border: 1px solid var(--line);
border-radius: 14px;
}
.reviews-overall .rv-write-btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 700px) { .reviews-overall { grid-template-columns: 1fr; } }
.reviews-overall .ro-headline { display: flex; align-items: center; gap: 14px; }
.reviews-breakdown { display: grid; gap: 6px; }
.review-summary-row {
display: grid; grid-template-columns: 42px 1fr 42px;
align-items: center; gap: 10px;
font-size: .85rem; color: var(--ink);
}
.review-summary-row .rsr-label { color: var(--orange-text); font-weight: 600; }
.review-summary-row .rsr-pct { color: var(--sand); text-align: right; font-variant-numeric: tabular-nums; }
.review-bar {
display: block; height: 8px; border-radius: 6px;
background: rgba(26, 26, 26,.08); overflow: hidden; position: relative;
}
.review-bar-fill {
display: block; height: 100%; border-radius: 6px;
background: linear-gradient(90deg, var(--orange, #E07A3F), var(--gold, #C8932F));
transition: width .5s ease;
}
/* Polish #3 · Customer photos carousel */
.cust-photos { margin: 14px 0 18px; }
.cust-photos-h {
font-size: 1rem; margin: 0 0 10px;
color: var(--terra); font-family: var(--ff-serif);
}
.cust-photos-strip {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
@media (max-width: 880px) {
.cust-photos-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cust-photos-strip > * { flex: 0 0 46%; }
}
.cust-photo--share {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--terra);
background: var(--pink); border: 1px dashed var(--coral); text-align: center; padding: 12px;
}
.cust-photo--share span:first-child { font-size: 1.5rem; }
.cust-photo--share:hover { background: var(--cream); }
.cust-photo {
width: 100%; aspect-ratio: 4/3; height: auto;
border-radius: 12px; overflow: hidden; padding: 0;
border: 1px solid var(--line); background: var(--cream-deep);
cursor: pointer; transition: transform var(--ease), border-color var(--ease);
}
.cust-photo:hover { transform: scale(1.04); border-color: var(--gold); }
.cust-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Polish #5 · Reviews sort dropdown row */
.reviews-sort-row {
display: flex; align-items: center; gap: 10px;
margin: 0 0 14px;
}
.rs-label { font-size: .85rem; color: var(--sand); font-weight: 600; }
.reviews-sort {
padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
background: #fff; font: inherit; font-size: .85rem; color: var(--ink);
cursor: pointer; outline: none;
}
.reviews-sort:focus { border-color: var(--gold); }
@media (max-width: 880px) {
.reviews-overall {
grid-template-columns: 1fr; gap: 14px; padding: 14px;
}
.reviews-overall .ro-headline { justify-content: flex-start; }
.cust-photo { width: 72px; height: 72px; }
}
/* ════════════════════════════════════════════════════════════════════
Sobre Guidemexx · v10 editorial rewrite
benchmarks: GYG explorer · altfilmfestival · sanildefonso
════════════════════════════════════════════════════════════════════ */
/* ── Section 1 · Editorial hero ─────────────────────────────────── */
.ed-hero {
background: var(--cream-deep);
padding: 78px 0 70px;
border-bottom: 1px solid rgba(26, 26, 26, .08);
}
.ed-hero-inner {
display: grid; grid-template-columns: 220px 1fr; gap: 56px;
align-items: center;
position: relative;
}
/* Mascota-guía asomando junto al marco del hero (iconografía Guidemexx) */
.ed-hero-mascot {
position: absolute; left: 150px; bottom: -10px; width: 92px; height: auto;
filter: drop-shadow(0 10px 16px rgba(22,50,58,.22)); pointer-events: none; z-index: 2;
}
@media (max-width: 760px) { .ed-hero-mascot { left: auto; right: 8px; bottom: -8px; width: 72px; } }
/* "En alianza con" · iconografía Guidemexx junto a las certificaciones */
.ed-certs { display: flex; gap: 20px; align-items: center; }
.ed-certs-mascot { width: 90px; height: 90px; flex: 0 0 90px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0,72,96,.18)); }
@media (max-width: 600px) { .ed-certs { flex-direction: column; align-items: flex-start; gap: 12px; } .ed-certs-mascot { width: 64px; flex-basis: 64px; } }
.ed-hero-frame {
position: relative;
margin: 0;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 3 / 4;
box-shadow: 0 22px 40px -22px rgba(42, 20, 48, .35);
transform: rotate(-1.5deg);
}
.ed-hero-frame img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.ed-hero-copy { max-width: 640px; }
.ed-eyebrow {
display: inline-block; font-family: var(--ff-caps);
font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
color: var(--brand-red-text); margin-bottom: 18px; /* era var(--purple) = #1A1A1A · 4.44:1 en texto de 12px */
border-top: 1px solid var(--purple); padding-top: 12px; /* el borde sí puede seguir con el rojo de marca */
}
.ed-hero h1 {
font-family: var(--ff-serif);
font-size: clamp(2.6rem, 6vw, 4.2rem);
line-height: 1.02; color: var(--ink); font-weight: 600;
letter-spacing: -.01em; margin: 0 0 22px;
}
.ed-lead {
font-size: 1.18rem; line-height: 1.55; color: var(--ink);
max-width: 620px; margin: 0 0 18px;
font-weight: 400;
}
.ed-lead--secondary { margin-bottom: 0; }
.ed-mark {
font-family: var(--ff-serif);
font-size: .92rem; letter-spacing: .04em;
color: var(--purple); font-style: italic;
border-left: 2px solid var(--coral); padding-left: 14px;
max-width: 540px; margin: 0;
}
@media (max-width: 760px) {
.ed-hero { padding: 56px 0 50px; }
.ed-hero-inner { grid-template-columns: 1fr; gap: 28px; }
.ed-hero-frame {
width: 140px; transform: rotate(-2deg);
margin: 0 auto;
}
}
/* ── Generic section header (editorial) ─────────────────────────── */
.ed-section { padding: 78px 0 24px; }
.ed-sec-head { max-width: 720px; margin: 0 0 38px; }
.ed-sec-head--center { text-align: center; margin: 0 auto 38px; }
.ed-sec-head h2 {
font-family: var(--ff-serif);
font-size: clamp(1.8rem, 4vw, 2.8rem);
line-height: 1.06; color: var(--ink); font-weight: 600;
letter-spacing: -.01em; margin: 0 0 14px;
}
.ed-sec-intro {
font-size: 1.04rem; line-height: 1.6; color: var(--sand);
max-width: 560px; margin: 0;
}
.ed-sec-intro--follow { margin-top: 14px; }
.ed-sec-head--center .ed-sec-intro { margin: 0 auto; }
/* ── Section 2 · Hosts grid ─────────────────────────────────────── */
.ed-people-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 36px 28px;
}
.ed-person {
display: flex; flex-direction: column; gap: 10px;
}
.ed-person-photo {
width: 110px; height: 110px; border-radius: 50%;
overflow: hidden; background: var(--cream-deep);
box-shadow: 0 8px 22px -10px rgba(42, 20, 48, .35);
transition: transform .4s var(--ease);
}
.ed-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-person:hover .ed-person-photo { transform: scale(1.05); }
.ed-person h3 {
font-family: var(--ff-serif);
font-size: 1.16rem; color: var(--ink);
font-weight: 600; margin: 6px 0 0;
}
.ed-person-meta {
font-family: var(--ff-caps);
font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--coral-dk-text); font-weight: 600;
}
.ed-person p {
color: var(--ink); line-height: 1.5; font-size: .95rem;
margin: 0;
}
@media (max-width: 860px) {
.ed-people-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
@media (max-width: 520px) {
.ed-people-grid { grid-template-columns: 1fr; }
}
/* ── Section 3 · Two regions ────────────────────────────────────── */
.ed-region-cards {
display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.ed-region {
background: #fff;
border: 1px solid rgba(26, 26, 26, .12);
border-radius: 6px; overflow: hidden;
text-decoration: none; color: var(--ink);
display: flex; flex-direction: column;
transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.ed-region:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -22px rgba(42, 20, 48, .35);
border-color: var(--purple);
}
.ed-region-cover {
aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-deep);
}
.ed-region-cover img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s var(--ease);
}
.ed-region:hover .ed-region-cover img { transform: scale(1.04); }
.ed-region-body { padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 12px; }
.ed-region-tag {
font-family: var(--ff-caps);
font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--purple); font-weight: 600;
}
.ed-region-body h3 {
font-family: var(--ff-serif);
font-size: 1.6rem; line-height: 1.1; color: var(--ink);
font-weight: 600; margin: 0;
}
.ed-region-list {
list-style: none; padding: 0; margin: 6px 0 8px;
display: flex; flex-direction: column; gap: 6px;
}
.ed-region-list li {
font-size: .94rem; color: var(--ink);
padding-left: 16px; position: relative; line-height: 1.45;
}
.ed-region-list li::before {
content: ""; position: absolute; left: 0; top: .65em;
width: 6px; height: 1px; background: var(--coral);
}
.ed-region-cta {
font-size: .88rem; color: var(--purple); font-weight: 600;
letter-spacing: .02em; margin-top: 4px;
}
@media (max-width: 760px) {
.ed-region-cards { grid-template-columns: 1fr; gap: 22px; }
.ed-region-body { padding: 22px 22px 24px; }
}
/* ── Section 4 · Pull-quote separator ───────────────────────────── */
.ed-quote {
padding: 80px 0 78px;
background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
margin-top: 60px;
}
.ed-quote-body {
max-width: 760px; margin: 0 auto; text-align: center;
padding: 0 20px;
}
.ed-quote-body p {
font-family: var(--ff-serif);
font-size: clamp(1.4rem, 3vw, 2rem);
line-height: 1.4; color: var(--ink);
font-style: italic; font-weight: 500;
margin: 0 0 20px;
letter-spacing: -.005em;
}
.ed-quote-body footer {
font-family: var(--ff-caps);
font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--sand); font-weight: 600;
}
/* ── Section 5 · Blog feed (GYG explorer pattern) ──────────────── */
.ed-chip-row {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0 0 32px;
padding-bottom: 6px;
}
.ed-chip {
font-family: inherit; font-size: .86rem; font-weight: 500;
padding: 8px 16px; border-radius: 999px;
border: 1px solid var(--line); background: #fff;
color: var(--ink); cursor: pointer;
transition: all var(--ease);
letter-spacing: .01em;
}
.ed-chip:hover { border-color: var(--purple); color: var(--purple); }
.ed-chip.is-active {
background: var(--ink); color: var(--cream);
border-color: var(--ink);
}
.ed-blog-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 36px 28px;
}
.ed-article {
display: flex; flex-direction: column; gap: 14px;
}
.ed-article-cover {
display: block; aspect-ratio: 4 / 3;
overflow: hidden; background: var(--cream-deep);
border-radius: 4px;
}
.ed-article-cover img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .6s var(--ease);
}
.ed-article:hover .ed-article-cover img { transform: scale(1.04); }
.ed-article-body { display: flex; flex-direction: column; gap: 10px; }
.ed-article-cat {
font-family: var(--ff-caps);
font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--coral-dk-text); font-weight: 600;
}
.ed-article h3 {
font-family: var(--ff-serif);
font-size: 1.18rem; line-height: 1.25;
color: var(--ink); font-weight: 600;
margin: 0;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.ed-article h3 a {
color: inherit; text-decoration: none;
transition: color var(--ease);
}
.ed-article h3 a:hover { color: var(--purple); }
.ed-article-excerpt {
color: var(--sand); font-size: .94rem; line-height: 1.5;
margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.ed-article-meta {
font-size: .82rem; color: var(--sand);
display: flex; align-items: center; gap: 8px;
margin-top: 4px;
}
.ed-article-meta .ed-dot { opacity: .6; }
@media (max-width: 860px) {
.ed-blog-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* ── Section 6 · Press / validation ─────────────────────────────── */
.ed-press {
padding: 70px 0 30px;
border-top: 1px solid var(--line-soft);
margin-top: 30px;
}
.ed-press-row {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: center; gap: 36px 48px;
margin: 0 auto;
color: var(--sand);
}
.ed-press-logo {
opacity: .68; transition: opacity var(--ease);
}
.ed-press-logo:hover { opacity: 1; }
.ed-press-logo svg { display: block; height: 36px; width: auto; }
.ed-press-note {
margin: 30px auto 0; text-align: center;
font-size: .8rem; color: var(--sand); font-style: italic;
max-width: 540px;
}
/* ── Section 7 · CTA back ───────────────────────────────────────── */
.ed-cta-back {
padding: 80px 0 90px; text-align: center;
background: var(--ink); color: var(--cream);
margin-top: 40px;
}
.ed-cta-back h2 {
font-family: var(--ff-serif);
font-size: clamp(1.8rem, 4vw, 2.6rem);
color: var(--cream); margin: 0 0 14px;
font-weight: 600; letter-spacing: -.01em;
}
.ed-cta-back p {
color: rgba(255,247,251,.78);
font-size: 1.04rem; margin: 0 0 28px;
max-width: 540px; margin-left: auto; margin-right: auto;
}
.ed-cta-back-btn {
display: inline-block; padding: 14px 28px;
background: var(--cream); color: var(--ink);
font-family: var(--ff-caps);
font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
font-weight: 600; text-decoration: none;
border-radius: 4px;
transition: transform var(--ease), background var(--ease), color var(--ease);
}
.ed-cta-back-btn:hover {
background: var(--yellow); color: var(--ink);
transform: translateY(-2px);
}
/* ════════════════════════════════════════════════════════════════════════
* MUNDIAL BRIDGE · UG-01 fix · 2026-05-29
* Conecta microsito Mundial con buscador de tours bidireccional.
* Componentes: .mundial-strip (home) · .mundial-tours-block (microsite) ·
* .mundial-bridge-banner (contextual cuando viene de mundial)
* ════════════════════════════════════════════════════════════════════════ */
/* ── Homepage · mundial-strip (post trust-strip · pre catalog) ───────── */
.mundial-strip {
background: linear-gradient(135deg, var(--surface-dark) 0%, var(--ink-grad-end) 100%);
color: var(--text-on-dark);
padding: 28px 0 32px;
margin: 8px 0 24px;
position: relative;
overflow: hidden;
}
.mundial-strip::before {
content: "";
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(45deg, transparent 0 14px, rgba(212,162,76,.04) 14px 15px),
repeating-linear-gradient(-45deg, transparent 0 14px, rgba(232,65,181,.03) 14px 15px);
pointer-events: none;
}
[data-theme="codice"] .mundial-strip {
background: linear-gradient(135deg, var(--obsidian-ink) 0%, var(--obsidian-deep) 100%);
}
.mundial-strip-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
position: relative;
z-index: 1;
}
.mundial-strip-left { display: flex; flex-direction: column; gap: 6px; }
.mundial-strip-eyebrow {
color: var(--codex-gold, var(--yellow)) !important;
font-size: .68rem !important;
}
.mundial-strip-title {
font-family: var(--ff-caps);
font-size: 1.85rem;
color: var(--text-on-dark);
margin: 4px 0 2px;
letter-spacing: .04em;
}
.mundial-strip-sub {
font-size: .98rem;
color: rgba(255,255,255,.78);
max-width: 60ch;
}
.mundial-strip-actions {
display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}
.mundial-strip-actions .btn-primary {
background: var(--codex-gold, var(--yellow));
color: var(--obsidian-ink, var(--ink));
border: 0;
font-weight: 700;
}
.mundial-strip-actions .btn-ghost {
background: transparent;
color: var(--text-on-dark);
border: 1px solid rgba(255,255,255,.32);
}
.mundial-strip-actions .btn-ghost:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.5);
}
/* Countdown compact · 3 cells (días/h/min) */
.mundial-strip-countdown {
display: flex; gap: 8px;
}
.msc-cell {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
padding: 12px 14px;
min-width: 70px;
text-align: center;
backdrop-filter: blur(4px);
}
.msc-num {
display: block;
font-family: 'Space Grotesk', 'JetBrains Mono', 'SF Mono', monospace;
font-size: 1.85rem;
font-weight: 700;
color: var(--codex-gold, var(--yellow));
line-height: 1;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.msc-label {
display: block;
font-size: .62rem;
letter-spacing: .2em;
color: rgba(255,255,255,.6);
text-transform: uppercase;
margin-top: 6px;
}
/* 3 mini-cards horizontales · scroll-snap mobile */
.mundial-strip-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 22px;
position: relative;
z-index: 1;
}
.mundial-mini-card {
display: flex;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px;
overflow: hidden;
transition: transform var(--ease), border-color var(--ease);
text-decoration: none;
color: var(--text-on-dark);
}
.mundial-mini-card:hover {
transform: translateY(-3px);
border-color: var(--codex-gold, var(--yellow));
}
.mmc-cover {
width: 92px; flex-shrink: 0;
background-size: cover; background-position: center;
background-color: var(--smoke-veil, #3A3147);
}
.mmc-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mmc-cat {
font-size: .62rem;
letter-spacing: .18em;
color: var(--codex-gold, var(--yellow));
text-transform: uppercase;
font-weight: 600;
}
.mmc-title {
font-family: var(--ff-body);
font-size: .92rem;
color: var(--text-on-dark);
font-weight: 600;
margin: 2px 0;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.mmc-meta {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: auto;
}
.mmc-rating { color: var(--codex-gold, var(--yellow)); font-size: .82rem; font-weight: 600; }
.mmc-price {
font-family: 'Space Grotesk', 'JetBrains Mono', monospace;
font-size: .9rem;
color: var(--text-on-dark);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Mobile · stack countdown encima */
@media (max-width: 880px) {
.mundial-strip-inner { grid-template-columns: 1fr; gap: 18px; }
.mundial-strip-countdown { justify-content: flex-start; }
.msc-cell { padding: 10px 12px; min-width: 64px; }
.msc-num { font-size: 1.5rem; }
.mundial-strip-cards {
grid-template-columns: 86vw;
grid-auto-flow: column;
grid-auto-columns: 86vw;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 4px;
margin-inline: -16px; padding-inline: 16px;
}
.mundial-mini-card { scroll-snap-align: start; }
}
/* ── Mundial.html · tours-block dentro de #actividades ──────────────── */
.mundial-tours-search {
margin: 18px auto 22px;
max-width: 600px;
}
.mundial-tours-search .catalog-search {
width: 100%;
padding: 14px 18px;
border-radius: 999px;
border: 1.5px solid rgba(15, 28, 63, .14);
background: var(--surface-card);
font-family: inherit;
font-size: 1rem;
color: var(--text-primary);
transition: border-color var(--ease), box-shadow var(--ease);
}
.mundial-tours-search .catalog-search:focus {
outline: 0;
border-color: var(--accent-primary);
box-shadow: 0 0 0 4px rgba(26, 26, 26,.14);
}
[data-theme="codice"] .mundial-tours-search .catalog-search:focus {
border-color: var(--turquoise-codex);
box-shadow: 0 0 0 4px rgba(45,212,224,.18);
}
.mundial-tours-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 22px;
margin: 18px 0 32px;
}
.mundial-tour-card {
background: var(--surface-card);
border-radius: var(--radius);
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: var(--shadow-sm);
transition: transform var(--ease), box-shadow var(--ease);
}
.mundial-tour-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
}
.mtc-cover {
aspect-ratio: 4/3;
background-size: cover; background-position: center;
display: block;
}
.mtc-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mtc-cat {
font-size: .68rem;
letter-spacing: .2em;
color: var(--accent-primary);
font-weight: 600;
text-transform: uppercase;
}
.mtc-title {
font-family: var(--ff-caps);
font-size: 1.05rem;
color: var(--text-primary);
margin: 2px 0 4px;
line-height: 1.25;
}
.mtc-meta { font-size: .82rem; color: var(--text-secondary); }
.mtc-foot {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--line-semantic);
}
.mtc-rating { color: var(--accent-primary); font-weight: 700; font-size: .92rem; }
.mtc-rcount { color: var(--text-secondary); font-weight: 400; font-size: .78rem; }
.mtc-price {
font-family: 'Space Grotesk', 'JetBrains Mono', monospace;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.mtc-cta {
margin-top: 10px;
text-align: center;
font-size: .92rem;
padding: 9px 14px;
border-radius: 999px;
text-decoration: none;
}
.mundial-tours-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-secondary);
font-style: italic;
}
.mundial-tours-back-row { text-align: center; margin: 18px 0 8px; }
/* ── Bridge banner · cuando ?from=mundial llega a homepage ──────────── */
.mundial-bridge-banner {
position: fixed;
bottom: 92px; /* sobre WhatsApp FAB */
left: 0; right: 0;
z-index: 60;
background: var(--surface-dark);
color: var(--text-on-dark);
padding: 12px 0;
box-shadow: 0 -8px 32px rgba(0,0,0,.18);
animation: mbb-slide-up .35s ease-out;
}
[data-theme="codice"] .mundial-bridge-banner {
background: var(--obsidian-ink);
}
@keyframes mbb-slide-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.mbb-inner {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap;
}
.mbb-icon { font-size: 1.4rem; }
.mbb-text { flex: 1; font-size: .94rem; line-height: 1.4; }
.mbb-link {
color: var(--codex-gold, var(--yellow));
font-weight: 600;
text-decoration: none;
font-size: .9rem;
padding: 6px 12px;
border: 1px solid currentColor;
border-radius: 999px;
transition: background-color var(--ease);
}
.mbb-link:hover { background: rgba(212,162,76,.12); }
.mbb-close {
background: transparent; border: 0;
color: var(--text-on-dark);
font-size: 1.5rem; line-height: 1;
cursor: pointer;
padding: 4px 8px;
opacity: .7;
}
.mbb-close:hover { opacity: 1; }
@media (max-width: 600px) {
.mundial-bridge-banner { bottom: 78px; }
.mbb-text { font-size: .86rem; flex-basis: 100%; order: 1; }
.mbb-icon { order: 0; }
.mbb-link { order: 2; }
.mbb-close { order: 3; }
}
/* TBD rows del fixture · rank #7 binary hide ───────────────────────── */
.match-table tr[data-tbd="1"] { display: none; }
.match-table tr[data-tbd="1"].is-revealed { display: table-row; }
.match-tbd-toggle {
margin: 8px auto 0;
display: block;
background: transparent;
border: 1px dashed var(--line-semantic);
color: var(--text-secondary);
padding: 6px 14px;
border-radius: 999px;
cursor: pointer;
font-size: .82rem;
font-family: inherit;
}
.match-tbd-toggle:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
/* ── Hero search-widget client-side · rank #9 ───────────────────────── */
.hero-search {
margin-top: 22px;
position: relative;
max-width: 540px;
}
.hero-search-input {
width: 100%;
padding: 16px 22px 16px 50px;
border-radius: 999px;
border: 0;
background: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
font-family: inherit;
font-size: 1.02rem;
color: var(--text-primary);
box-shadow: 0 8px 32px rgba(0,0,0,.18);
transition: box-shadow var(--ease);
}
.hero-search-input:focus {
outline: 0;
box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 0 0 4px var(--codex-gold, rgba(254,252,139,.4));
}
.hero-search::before {
content: "🔍";
position: absolute;
left: 18px; top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: .9rem;
opacity: .55;
}
.hero-search-results {
display: none;
position: absolute;
top: calc(100% + 8px); left: 0; right: 0;
background: var(--surface-card);
border-radius: 14px;
box-shadow: 0 16px 48px rgba(0,0,0,.18);
max-height: 60vh;
overflow-y: auto;
z-index: 40;
}
.hero-search.is-open .hero-search-results { display: block; }
.hsr-item {
display: flex;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--line-semantic);
text-decoration: none;
color: var(--text-primary);
align-items: center;
}
.hsr-item:last-child { border-bottom: 0; }
@media (max-width: 880px) { body.gmx-mobile-nav-ready { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); } }
.hsr-all { display: block; text-align: center; font-weight: 600; color: var(--purple); padding: 12px; }
.hsr-all:hover, .hsr-all.is-active { background: var(--cream); }
.hsr-item:hover, .hsr-item.is-active {
background: var(--surface-elev);
}
.hsr-thumb {
width: 48px; height: 48px;
border-radius: 8px;
background-size: cover; background-position: center;
flex-shrink: 0;
}
.hsr-body { flex: 1; min-width: 0; }
.hsr-title { font-weight: 600; font-size: .94rem; line-height: 1.2; }
.hsr-meta { font-size: .76rem; color: var(--text-secondary); margin-top: 2px; }
.hsr-region {
display: inline-block;
font-size: .64rem;
letter-spacing: .14em;
padding: 2px 8px;
border-radius: 999px;
background: var(--surface-elev);
text-transform: uppercase;
font-weight: 600;
color: var(--text-secondary);
}
.hsr-empty { padding: 18px 16px; color: var(--text-secondary); font-style: italic; text-align: center; font-size: .9rem; }
/* Barra de intención del buscador semántico · muestra cómo se estructuró el NL */
.hsr-intent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 14px; font-size: .76rem; color: var(--text-secondary); border-bottom: 1px solid var(--line-soft); }
.hsr-chip { background: var(--brand-cream, #F1EDE6); color: var(--brand-teal, #1A1A1A); border-radius: 999px; padding: 2px 9px; font-weight: 700; font-size: .72rem; }
@media (max-width: 600px) {
.hero-search-input { font-size: 1rem; padding: 14px 18px 14px 44px; }
.hero-search::before { left: 14px; }
}
/* Rank #11 · blog binary placeholder · 2026-05-29 ─────────────────────── */
.ed-blog-placeholder {
background: var(--surface-elev);
border-radius: var(--radius);
padding: 38px 30px;
text-align: center;
margin: 18px 0;
border: 1px dashed var(--line-semantic);
}
.ed-blog-placeholder-eyebrow {
font-family: var(--ff-caps);
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent-secondary);
font-weight: 600;
margin-bottom: 8px;
}
.ed-blog-placeholder-h {
font-family: var(--ff-caps);
color: var(--text-accent);
font-size: 1.5rem;
margin: 6px 0 10px;
}
.ed-blog-placeholder-b {
color: var(--text-secondary);
max-width: 56ch;
margin: 0 auto 16px;
font-size: .98rem;
}
/* ============================================================ */
/* Cliente cambios 2026-05-30 · home + tour + mundial · v12 */
/* ============================================================ */
/* ─── Megamenu desplegable (header · GYG/ToursByLocals-style) ─── */
.topbar-subnav-inner { position: relative; }
.megamenu-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mega-item { position: static; }
.mega-trigger {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 2px; color: var(--terra); font-weight: 500;
text-decoration: none; border-bottom: 2px solid transparent;
transition: border-color .18s ease, color .18s ease;
}
.mega-trigger:hover { color: var(--purple); border-bottom-color: var(--purple); }
.mega-caret { font-size: .7em; opacity: .7; transition: transform .18s ease; }
.mega-item.is-open .mega-caret,
.mega-item:focus-within .mega-caret { transform: rotate(180deg); }
.mega-panel {
position: absolute; top: 100%; left: 50%; z-index: 200;
transform: translateX(-50%);
width: min(1240px, calc(100vw - 48px));
min-height: 0;
margin-top: 2px;
background: #fff; border-radius: 10px;
box-shadow: 0 18px 46px rgba(26,10,28,.14);
border: 1px solid var(--line-soft);
padding: 0; display: none;
grid-template-columns: 210px 1fr; gap: 0;
overflow: visible;
}
/* Invisible hover bridge · fills the gap between the trigger row and the
floating panel so the cursor can travel down without ever leaving
.mega-item:hover. Fixes the dead-zone where the panel closed mid-transit
and could never be reached (confirmed via Playwright). */
.mega-panel::before {
content: ""; position: absolute; left: 0; right: 0;
top: -12px; height: 12px; background: transparent;
}
.mega-item.is-open .mega-panel,
.mega-item:focus-within .mega-panel,
.mega-item.is-click-open .mega-panel { display: grid; }
/* Thumb sin cover: emblema sobre crema (mismo criterio que el tile de cards) */
.mega-thumb { background: var(--cream-deep) url('/assets/icons/logo-oficial-tinta.png') center / 26px auto no-repeat; }
.mega-rail { display: flex; flex-direction: column; gap: 4px;
border-right: 1px solid var(--line-soft); padding: 12px 10px; background: #fff;
border-radius: 10px 0 0 10px; }
.mega-rail-item {
text-align: left; padding: 14px 16px; border: none; background: none;
font-size: .98rem; font-weight: 500; color: #4e5157; border-radius: 8px;
cursor: pointer; transition: background .15s ease, color .15s ease;
display: flex; align-items: center; gap: 8px;
}
.mega-rail-item:hover { background: var(--gyg-bg-hover); color: var(--gyg-blue); }
.mega-rail-item.active { background: #f0f1f3; color: #202124; font-weight: 600; }
.mega-rail-item.active::before { content: none; }
.mega-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px 18px; padding: 18px 22px; align-content: start;
}
.mega-grid-item {
min-height: 64px; display: flex; align-items: center; gap: 12px;
text-decoration: none; color: #44474d; padding: 8px;
border-radius: 10px; font-size: 1rem; line-height: 1.25;
transition: background .15s ease, color .15s ease;
}
.mega-grid-item:hover { background: var(--gyg-bg-hover); color: var(--gyg-blue); }
.mega-thumb {
display: block; flex: 0 0 auto;
width: 56px; height: 56px; border-radius: 8px;
background-size: cover; background-position: center;
background-repeat: no-repeat; background-color: #eceef1;
}
.mega-grid-item span:last-child {
display: flex; flex-direction: column; gap: 1px;
font-size: inherit; line-height: 1.3; min-width: 0;
}
.mega-grid-item strong { font-weight: 600; color: inherit; display: block; }
.mega-grid-item em {
display: block; font-style: normal; font-size: .82rem;
color: var(--gray-text); margin-top: 1px;
}
.mega-grid-item:hover em { color: var(--gyg-blue); }
.mega-grid-item br { display: none; }
.topnav-pill {
padding: 6px 12px; border-radius: 999px;
color: var(--terra); text-decoration: none;
border: 1px solid transparent; transition: background .15s ease, color .15s ease;
}
.topnav-pill:hover { color: var(--gyg-blue); background: var(--gyg-bg-hover); }
.topnav-pill.is-mundial { background: var(--gyg-blue); color: #fff; font-weight: 600; }
.topnav-pill.is-mundial:hover { background: var(--gyg-blue-dk); color: #fff; }
.topbar-inner .topbar-mundial-link {
flex-shrink: 0;
margin-left: auto;
white-space: nowrap;
}
/* ─── Topbar icons (favoritos + carrito) ────────────────────── */
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar-icon {
display: inline-flex; flex-direction: column; align-items: center;
position: relative; padding: 4px 8px; text-decoration: none;
color: var(--terra); transition: color .15s ease;
}
.topbar-icon:hover { color: var(--purple); }
/* Acceso a la descarga de la app. Acento suave —no un boton solido— para que se
distinga de favoritos/carrito sin competir con el CTA de reservar, que es el
que gana dinero. Vivia solo en el pie y el usuario reporto no encontrarlo. */
.topbar-icon.topbar-app { color: var(--purple); }
.topbar-icon.topbar-app:hover { color: var(--purple-dk); }
@media (max-width: 700px) {
/* En movil la barra va apretada: se deja el icono, se oculta la etiqueta.
Es ademas el unico lugar donde la descarga tiene sentido, asi que no se
esconde el acceso entero. */
.topbar-icon.topbar-app .topbar-icon-label { display: none; }
}
.topbar-icon svg {
width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5;
fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* Ícono oficial "Me Gusta" (ajolote-corazón) en el acceso a Favoritos.
2026-07-07: en prod renderizaba encogido (16px vs 22px de los SVG hermanos) por
la interacción img{max-width:100%} + sizing del botón flex — se fija ALTURA
explícita pareja a los hermanos y se neutraliza el max-width. */
.topbar-icon .topbar-fav-ic { height: 24px; width: auto; max-width: none; display: block; object-fit: contain; }
.topbar-icon-label { font-size: .68rem; margin-top: 2px; }
.topbar-icon-badge {
position: absolute; top: -2px; right: 0;
min-width: 18px; height: 18px; border-radius: 9px;
background: var(--coral); color: #fff; font-size: .7rem; font-weight: 600;
display: grid; place-items: center; padding: 0 5px;
}
/* ─── Why video section (reemplaza las 3 why-cards) ─────────── */
.why-video {
position: relative; padding: 90px 0; min-height: 460px;
overflow: hidden; isolation: isolate;
}
.why-media { position: absolute; inset: 0; z-index: 0; }
.why-media video, .why-media img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.why-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(74,30,80,.55) 0%, rgba(26,10,28,.75) 100%);
}
.why-overlay {
position: relative; z-index: 1; text-align: center;
max-width: 820px; margin: 0 auto; color: #fff;
}
.why-eyebrow {
color: rgba(254,252,139,.9); letter-spacing: .22em;
text-transform: uppercase; font-weight: 600; font-size: .78rem;
}
.why-mission {
margin: 18px auto 28px; font-size: 1.15rem; line-height: 1.6;
color: rgba(255,247,251,.92); max-width: 720px;
}
.why-slogan {
display: block; font-family: var(--ff-serif);
font-size: clamp(1.8rem, 4.5vw, 3.2rem); font-weight: 700;
color: var(--yellow); letter-spacing: .04em;
text-shadow: 0 4px 24px rgba(0,0,0,.4);
margin-bottom: 28px;
}
.why-cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* ─── Card badges 2-types + greca + ajolote ─────────────────── */
.tour-card-badge {
position: absolute; top: 10px; left: 10px; z-index: 2;
padding: 5px 10px; border-radius: 6px;
font-size: .74rem; font-weight: 600; letter-spacing: .02em;
color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.tour-card-badge--original {
background: var(--coral); /* Originals by Guidemexx · coral brand */
}
.tour-card-badge--original::before {
content: "G"; display: inline-grid; place-items: center;
width: 14px; height: 14px; border-radius: 50%;
background: #fff; color: var(--coral);
font-weight: 700; font-size: .68rem;
margin-right: 5px; vertical-align: middle;
}
.tour-card-badge--certified {
background: var(--badge-dark); /* Certificado por Guidemexx · dark */
}
.tour-card-badge--custom {
top: 44px;
background: var(--purple); /* Custom badge override (e.g., Maravilla del mundo) */
}
.tour-card-badge--award {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.96); color: var(--terra);
border-radius: 999px; padding: 7px 11px;
box-shadow: 0 3px 10px rgba(0,0,0,.16);
backdrop-filter: blur(8px);
}
.tour-card-badge--award span[aria-hidden="true"] {
color: var(--coral-dk-text); font-weight: 900;
}
.tour-card-badge-icon {
width: 22px !important; height: 22px !important; flex: 0 0 22px; object-fit: contain;
transform: none !important;
}
.tour-card-badge--award.award-ajolote_oro {
background: #fff; color: var(--terra);
}
.tour-card-badge--award.award-xolo_guardian {
background: #1f2933; color: #fff;
}
.tour-card-badge--award.award-quetzal_selecto {
background: var(--teal); color: #fff;
}
.tour-card-badge--award.award-host_certificado {
background: rgba(255,255,255,.96); color: var(--terra);
}
/* 5º tier · faltaba aquí aunque host.css sí lo define (host.css:440), así que el
socio veía la píldora ámbar y el viajero la misma etiqueta sin color. La
unificación del award era 4/5 hasta esta regla. Mismo par de color que el host. */
.tour-card-badge--award.award-en_mejora {
background: rgba(255,255,255,.9); color: #856404;
}
.tour-card-fav {
position: absolute; top: 10px; right: 10px; z-index: 2;
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,.96); border: none; cursor: pointer;
display: grid; place-items: center;
color: rgba(26, 26, 26,.35); transition: color .18s ease, transform .18s ease;
padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.tour-card-fav .ajolote-heart {
width: 26px; height: auto; display: block; object-fit: contain;
filter: grayscale(.9) opacity(.5); transition: filter .2s ease, transform .2s ease;
}
.tour-card-fav:hover { transform: scale(1.08); }
.tour-card-fav:hover .ajolote-heart { filter: grayscale(.3) opacity(.85); }
.tour-card-fav.is-fav .ajolote-heart { filter: none; transform: scale(1.08); }
/* Greca prehispánica abajo del media · solo originals */
.tour-card-greca {
position: absolute; bottom: 0; left: 0; right: 0; height: 8px; z-index: 1;
background:
linear-gradient(90deg, var(--coral) 0 14px, transparent 14px 22px) repeat-x,
linear-gradient(180deg, var(--coral), var(--coral-deep, #A8834A));
background-size: 22px 8px, 100% 100%;
}
/* ─── Tour hero overlay (tour.html · badge + heart + greca) ─── */
.gallery-wrap { position: relative; }
.tour-hero-badge {
position: absolute; top: 14px; left: 14px; z-index: 3;
padding: 7px 14px; border-radius: 8px;
background: var(--coral); color: #fff;
font-size: .82rem; font-weight: 600; letter-spacing: .02em;
box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.tour-hero-badge::before {
content: ""; display: inline-block;
width: 20px; height: 20px;
background: url('/assets/icons/house-tours.webp') center / contain no-repeat;
margin-right: 6px; vertical-align: middle;
}
.partner-trust-card {
display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
margin: 18px 0 8px; padding: 18px;
background: #fff; border: 1px solid var(--line-soft); border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.partner-trust-card h2 {
font-family: 'Inter', system-ui, sans-serif; font-size: 1.08rem;
margin: 8px 0 4px; color: var(--terra);
}
.partner-trust-card p {
margin: 0; color: var(--sand); line-height: 1.45; font-size: .92rem;
}
.partner-award {
display: inline-flex; align-items: center; width: fit-content;
padding: 7px 12px; border-radius: 999px; background: var(--terra); color: #fff;
font-size: .82rem; font-weight: 800;
}
.partner-trust-card.is-original .partner-award {
background: var(--coral); color: #fff;
}
.partner-stats {
display: grid; grid-template-columns: repeat(3, minmax(74px, auto)); gap: 10px;
margin: 0;
}
.partner-stats div {
min-width: 74px; padding: 10px 12px; border-radius: 10px; background: var(--cream);
text-align: center;
}
.partner-stats dt {
font-size: .68rem; color: var(--sand); text-transform: uppercase; letter-spacing: .08em;
}
.partner-stats dd {
margin: 4px 0 0; font-weight: 800; color: var(--terra);
}
@media (max-width: 760px) {
.partner-trust-card { grid-template-columns: 1fr; }
.partner-stats { grid-template-columns: repeat(3, 1fr); }
}
.tour-hero-fav {
position: absolute; top: 14px; right: 14px; z-index: 3;
width: 42px; height: 42px; border-radius: 50%;
background: rgba(255,255,255,.96); border: none; cursor: pointer;
display: grid; place-items: center; padding: 0;
color: rgba(26, 26, 26,.4); transition: color .18s ease, transform .18s ease;
box-shadow: 0 3px 10px rgba(0,0,0,.18);
min-width: 44px; min-height: 44px; /* medía 42x42 · mínimo táctil */
}
.tour-hero-fav .ajolote-heart { width: 30px; height: auto; display: block; object-fit: contain; filter: grayscale(.9) opacity(.5); transition: filter .2s ease, transform .2s ease; }
.tour-hero-fav:hover { transform: scale(1.08); }
.tour-hero-fav:hover .ajolote-heart { filter: grayscale(.3) opacity(.85); }
.tour-hero-fav.is-fav .ajolote-heart { filter: none; transform: scale(1.08); }
.tour-hero-greca {
position: absolute; bottom: 0; left: 0; right: 0; height: 10px; z-index: 2;
background:
linear-gradient(90deg, var(--coral) 0 18px, transparent 18px 28px) repeat-x,
linear-gradient(180deg, var(--coral), var(--coral-deep, #A8834A));
background-size: 28px 10px, 100% 100%;
}
/* ─── Mundial calendar (selector mensual + grid · reemplaza tabla) ── */
.calendar-month-picker {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 16px 0 24px; padding: 12px 16px;
background: rgba(254,252,139,.15); border-radius: 10px;
border: 1px solid rgba(254,252,139,.4);
}
.calendar-month-label {
font-weight: 600; color: var(--terra); font-size: .9rem;
}
.calendar-month-select {
padding: 8px 12px; border-radius: 8px; border: 1px solid var(--sand);
background: #fff; color: var(--ink); font-size: 1rem; cursor: pointer;
min-width: 160px;
}
.calendar-month-hint {
margin-left: auto; font-size: .82rem; color: var(--sand);
}
.calendar-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
background: var(--coral); padding: 10px; border-radius: 12px;
}
.calendar-day {
background: #fff; border-radius: 8px; padding: 10px 8px;
min-height: 110px; cursor: pointer; position: relative;
transition: background .15s ease, transform .15s ease;
border: 2px solid transparent;
}
.calendar-day:hover { background: rgba(254,252,139,.2); }
.calendar-day.has-match { border-color: var(--purple); }
.calendar-day.is-selected { background: var(--purple); color: #fff; }
.calendar-day.is-selected .cal-day-num,
.calendar-day.is-selected .cal-day-label,
.calendar-day.is-selected .cal-day-match { color: #fff; }
.cal-day-num {
font-family: var(--ff-serif); font-size: 1.4rem;
font-weight: 700; color: var(--terra); line-height: 1;
}
.cal-day-label {
display: block; font-size: .68rem; text-transform: uppercase;
color: var(--sand); letter-spacing: .08em; margin-bottom: 4px;
}
.cal-day-match {
display: block; margin-top: 8px; font-size: .74rem; font-weight: 600;
color: var(--coral); line-height: 1.25;
}
.cal-day-empty { background: rgba(255,255,255,.5); cursor: default; }
.cal-day-empty:hover { background: rgba(255,255,255,.5); }
.activities-sync-pill {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 12px; padding: 6px 12px; border-radius: 999px;
background: var(--purple); color: #fff; font-size: .85rem;
}
.activities-sync-clear {
background: none; border: none; color: #fff; cursor: pointer;
font-size: .8rem; padding: 0 4px; text-decoration: underline;
}
/* ─── Mobile responsive overrides ─────────────────────────────── */
@media (max-width: 880px) {
.megamenu-nav { gap: 8px; }
.mega-panel { position: static; transform: none; width: 100%; min-height: 0; grid-template-columns: 1fr; margin-top: 8px; }
.mega-rail { border-right: none; border-bottom: 1px solid rgba(26,10,28,.06); padding: 10px; }
.mega-grid { grid-template-columns: 1fr; padding: 12px 16px; gap: 0; }
.mega-grid-item { min-height: 44px; }
.topbar-icon-label { display: none; }
.why-video { padding: 60px 0; min-height: 340px; }
.why-slogan { font-size: 1.6rem; }
.calendar-grid { grid-template-columns: repeat(2, 1fr); }
.calendar-day { min-height: 80px; }
.calendar-month-hint { width: 100%; margin-left: 0; }
}
/* ════════════════════════════════════════════════════════════════════════
Cliente cambio 2026-05-31 · v15 · Mobile-first responsive + drawers + sticky
──────────────────────────────────────────────────────────────────────── */
/* Utility · hidden override (mismo que host.css) */
.topbar-actions [hidden],
.topbar [hidden] { display: none !important; }
/* ── CABECERA DEL MOCKUP · móvil ────────────────────────────────────────────
El mockup pone: hamburguesa a la izquierda, wordmark CENTRADO, y tres iconos
a la derecha (lupa, corazón, WhatsApp). Aquí el buscador se inyecta en línea
y ocupa media barra, así que el wordmark deja de estar centrado — que es lo
primero que se nota al comparar.
El buscador NO se elimina: se colapsa en la lupa, que abre el mismo cajón.
Y los iconos de carrito, idioma y perfil salen de la barra porque ya viven
en la barra inferior de cinco, donde el mockup los pone. */
@media (max-width: 880px) {
#topbar-search { display: none !important; }
.topbar-inner { display: grid !important; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; }
.topbar .brand { justify-self: center; }
#topbar-cart, #topbar-langcurr, #topbar-profile { display: none !important; }
.topbar-icon-label { display: none !important; }
.topbar .topbar-actions { gap: 14px !important; }
.topbar-icon { min-width: 30px; }
}
/* ─── Sticky topbar al scroll ──────────────────────────────────────────── */
.topbar {
position: sticky;
top: 0;
z-index: 90;
background: #fff;
backdrop-filter: saturate(150%) blur(8px);
border-bottom: 1px solid rgba(26,10,28,.06);
transition: box-shadow .2s ease;
}
.topbar.is-scrolled {
box-shadow: 0 2px 12px rgba(26,10,28,.08);
}
/* ─── Burger button (oculto desktop · visible mobile) ──────────────────── */
.topbar-burger {
/* 44x44: mínimo táctil (WCAG 2.5.5 · iOS HIG). Estaba en 40x40 y aparecía así
en las 7 páginas con topbar — es el control de navegación más tocado en
móvil. El proyecto ya declara min-height:44px para .th-share/.brand/.back-link
en ≤760px; este se había quedado fuera de esa regla. */
display: none;
width: 44px;
height: 44px;
border-radius: 8px;
border: 1px solid var(--line-soft);
background: #fff;
color: var(--terra);
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
}
.topbar-burger svg { width: 20px; height: 20px; }
/* ─── Drawer system (Favoritos · Carrito · Perfil · Menu) ──────────────── */
.gmx-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(26,10,28,.55);
backdrop-filter: blur(2px);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity .28s ease;
}
.gmx-drawer-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.gmx-drawer {
position: fixed;
top: 0;
height: 100vh;
width: min(92vw, 420px);
background: #fff;
z-index: 1001;
display: flex;
flex-direction: column;
box-shadow: -6px 0 32px rgba(26,10,28,.22);
transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.gmx-drawer--right { right: 0; transform: translateX(105%); }
.gmx-drawer--left { left: 0; transform: translateX(-105%); width: min(85vw, 360px); }
.gmx-drawer.is-open { transform: translateX(0); }
.gmx-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--line-soft);
flex-shrink: 0;
}
.gmx-drawer-title {
margin: 0;
font-family: var(--ff-serif);
font-size: 1.15rem;
color: var(--purple);
}
.gmx-drawer-close {
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(26, 26, 26,.08);
color: var(--purple);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
font-family: inherit;
}
.gmx-drawer-close:hover { background: rgba(26, 26, 26,.15); }
.gmx-drawer-body {
flex: 1;
overflow-y: auto;
padding: 18px 20px;
}
.gmx-drawer-empty {
text-align: center;
padding: 40px 20px;
color: var(--sand);
font-size: .92rem;
line-height: 1.55;
}
.gmx-drawer-empty p { margin: 0 0 12px; }
.gmx-drawer-empty-sub { font-size: .82rem; }
.gmx-drawer-loading {
text-align: center;
color: var(--sand);
padding: 30px 0;
font-size: .9rem;
}
.gmx-drawer-card {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--pink-soft, #F1EDE6);
}
.gmx-drawer-card img {
width: 64px;
height: 64px;
border-radius: 8px;
object-fit: cover;
background: var(--pink-soft, #F1EDE6);
}
.gmx-drawer-card-meta h4 {
margin: 0 0 4px;
font-size: .95rem;
color: var(--terra);
font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gmx-drawer-card-price {
margin: 0;
font-size: .82rem;
color: var(--sand);
}
.gmx-drawer-card-price span { color: var(--ink); font-weight: 600; }
.gmx-drawer-card-slot {
margin: 4px 0 0;
font-size: .76rem;
color: var(--coral);
}
.gmx-drawer-card-remove {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--line-soft);
background: #fff;
color: var(--sand);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
}
.gmx-drawer-card-remove:hover { border-color: var(--coral); color: var(--coral); }
.gmx-drawer-foot {
padding: 16px 20px;
border-top: 1px solid var(--line-soft);
background: var(--surface-page-elev);
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
}
.gmx-drawer-total {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.gmx-drawer-total span { color: var(--sand); font-size: .85rem; }
.gmx-drawer-total strong {
font-family: var(--ff-serif);
font-size: 1.3rem;
color: var(--purple);
}
.gmx-drawer-foot .btn { width: 100%; }
.gmx-drawer-link {
background: none;
border: none;
color: var(--sand);
font-size: .8rem;
cursor: pointer;
text-align: center;
padding: 6px;
font-family: inherit;
}
.gmx-drawer-link:hover { color: var(--coral); text-decoration: underline; }
.gmx-drawer-intro {
font-size: .92rem;
color: var(--terra);
line-height: 1.5;
margin: 0 0 18px;
}
.gmx-drawer-sep {
border: none;
border-top: 1px solid var(--line-soft);
margin: 18px 0;
}
.gmx-drawer-section-title {
font-family: var(--ff-serif);
font-size: .95rem;
color: var(--purple);
margin: 0 0 10px;
text-transform: uppercase;
letter-spacing: .08em;
}
.gmx-drawer-sub {
margin: 0 0 14px;
font-size: .88rem;
color: var(--sand);
line-height: 1.5;
}
.gmx-drawer-list {
margin: 0 0 22px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
}
.gmx-drawer-list a {
display: block;
padding: 11px 12px;
border-radius: 8px;
color: var(--terra);
text-decoration: none;
font-size: .95rem;
transition: background .15s ease, color .15s ease;
}
.gmx-drawer-list a:hover {
background: rgba(26, 26, 26,.06);
color: var(--purple);
}
.gmx-drawer-link-emph {
color: var(--coral) !important;
font-weight: 600;
}
/* Body locked when drawer open (no scroll behind) */
body.gmx-drawer-locked { overflow: hidden; }
/* ─── Mobile responsive · burger + drawer · breakpoint 880px ───────────── */
@media (max-width: 880px) {
/* Show burger · hide megamenu desktop nav · keep just brand + icons */
.topbar-burger { display: inline-flex; }
.megamenu-nav { display: none; }
.topbar-inner { gap: 10px; padding: 10px 14px; }
.topbar-actions { gap: 6px; }
.topbar-icon { padding: 4px 4px; }
.topbar-icon-label { display: none; }
.topbar-icon svg { width: 22px; height: 22px; }
.topbar-icon-badge { top: -4px; right: -4px; }
.currency-pick { display: none; } /* Idioma/Moneda van adentro del drawer mobile */
.brand-logo { height: 28px; }
}
@media (max-width: 480px) {
.topbar-inner { padding: 8px 12px; gap: 6px; }
.brand-logo { height: 24px; }
.topbar-icon-badge { min-width: 14px; height: 14px; font-size: .62rem; }
}
/* ════════════════════════════════════════════════════════════════════════
v=16 · Desktop topbar compaction (anti-wrap) · 2026-05-31
──────────────────────────────────────────────────────────────────────── */
@media (min-width: 881px) {
/* Solo icono SVG · sin texto debajo (más compacto) */
.topbar-icon-label { display: none; }
.topbar-icon {
width: 42px;
height: 42px;
padding: 0;
border-radius: 10px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.topbar-icon svg { width: 22px; height: 22px; }
.topbar-icon-badge {
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
border-radius: 9px;
padding: 0 4px;
}
/* Language + Currency más compactos */
.currency-pick {
font-size: .78rem;
padding: 4px 8px 4px 10px;
border-radius: 999px;
border: 1px solid var(--line-soft);
background: #fff;
gap: 4px;
}
.currency-pick span {
color: var(--sand);
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 600;
font-size: .72rem;
}
.currency-pick select {
border: none;
background: none;
padding: 2px 4px;
font-size: .85rem;
font-family: inherit;
color: var(--terra);
font-weight: 600;
cursor: pointer;
}
/* Topbar-actions inline · sin wrap */
.topbar-actions {
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: center;
}
/* Megamenu items más compactos */
.megamenu-nav { gap: 18px; flex-wrap: nowrap; }
.mega-trigger { font-size: .92rem; }
.topnav-pill { padding: 5px 12px; font-size: .85rem; }
}
/* ════════════════════════════════════════════════════════════════════════
v=17 · FORCED compaction + sticky search bar + prehispanic touch
──────────────────────────────────────────────────────────────────────── */
/* Force nowrap en desktop con specificity alta · 2026-05-31 */
@media (min-width: 881px) {
.topbar .topbar-actions {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 6px !important;
background: transparent !important;
padding: 0 !important;
}
.topbar .topbar-actions > * {
flex-shrink: 0;
}
.topbar .topbar-actions .currency-pick {
flex-direction: row !important;
width: auto !important;
background: transparent !important;
border: 1px solid var(--line-soft) !important;
border-radius: 999px !important;
padding: 4px 10px !important;
}
.topbar .topbar-actions .topbar-icon {
background: transparent !important;
border: 1px solid transparent !important;
}
.topbar .topbar-actions .topbar-icon:hover {
background: rgba(26, 26, 26,.06) !important;
border-color: rgba(26, 26, 26,.12) !important;
}
.topbar .topbar-inner {
flex-wrap: nowrap !important;
}
/* Megamenu: forzar 1 row, sin wrap */
.topnav.megamenu-nav {
flex-wrap: nowrap !important;
gap: 22px !important;
}
}
/* ─── Sticky search bar (GYG pattern) ────────────────────────────────────
Cuando scrollea el user > hero, aparece un mini-search en el topbar
para que NO pierda la funcionalidad de buscar al scrollear. */
.topbar-search-mini {
display: none;
align-items: center;
background: var(--pink-soft, #F1EDE6);
border-radius: 999px;
padding: 6px 16px;
margin: 0 12px;
flex: 1;
max-width: 460px;
border: 1px solid transparent;
transition: background .15s ease, border-color .15s ease;
cursor: text;
}
.topbar-search-mini:hover { background: #fff; border-color: var(--line-soft); box-shadow: 0 2px 6px rgba(26,10,28,.06); }
.topbar-search-mini svg { width: 18px; height: 18px; color: var(--purple); margin-right: 8px; flex-shrink: 0; }
.topbar-search-mini input {
border: none;
background: none;
flex: 1;
font: inherit;
font-size: .92rem;
padding: 0;
color: var(--terra);
outline: none;
}
.topbar-search-mini input::placeholder { color: var(--sand); }
/* Visible only when topbar is-scrolled AND on desktop */
.topbar.is-scrolled .topbar-search-mini {
display: flex;
}
@media (max-width: 880px) {
/* Mobile · skip mini search · users use the hero search */
.topbar.is-scrolled .topbar-search-mini { display: none; }
}
/* ─── Prehispanic Azteca · greca top + bottom of topbar ───────────────── */
.topbar {
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, var(--coral) 0%, var(--yellow) 33%, var(--purple) 66%, var(--coral) 100%) 1;
background: linear-gradient(180deg, #fff 95%, rgba(255,236,250,.4) 100%);
}
.topbar.is-scrolled {
background: rgba(255,255,255,.96);
backdrop-filter: saturate(150%) blur(10px);
}
/* Subtle greca pattern at bottom of topbar (8px row with stepped pattern) */
.topbar::after {
content: "";
display: block;
height: 4px;
background:
linear-gradient(90deg,
var(--coral) 0 12px,
transparent 12px 22px,
var(--yellow) 22px 30px,
transparent 30px 42px,
var(--purple) 42px 50px,
transparent 50px 62px
) repeat-x;
background-size: 62px 4px;
opacity: .55;
}
/* ─── Hero search · más fuerza prehispánica ────────────────────────────── */
.hero-search input.hero-search-input {
font-family: inherit;
font-weight: 500;
}
.hero-search {
border: 2px solid rgba(254,252,139,.4);
box-shadow: 0 8px 30px rgba(26,10,28,.18), inset 0 0 0 1px rgba(255,255,255,.6);
}
/* Legacy hero glyph disabled by GYG-clean directive. */
.hero-content h1 {
position: relative;
}
.hero-content h1::before {
content: "";
position: absolute;
top: -20px;
left: -8px;
width: 80px;
height: 80px;
background-image: none;
background-size: contain;
background-repeat: no-repeat;
opacity: .08;
filter: sepia(.4) hue-rotate(-20deg);
pointer-events: none;
z-index: -1;
}
/* ════════════════════════════════════════════════════════════════════
v=18 · GYG-style topbar restructure + Aztec full palacio
════════════════════════════════════════════════════════════════════
New tokens (semantic · no hardcoded hex going forward) */
:root {
/* SEGUNDO bloque `:root`, a 3.100 líneas del primero. Redefinía cuatro tokens
que la paleta nueva ya declara y, por ir después con la misma
especificidad, GANABA: `--line-soft` se quedaba en malva #ece5e9 y con él
42 divisores del sitio, fuera de la paleta y sin que ningún gate lo viera
—el de contraste mide contraste, no tono, y el malva sobre hueso pasa—.
Los cuatro se retiran de aquí; manda el bloque de la línea 269.
Lo que queda son acentos que sólo existen en este bloque. */
--cantera: #E8D4C8; /* cantera rosa (piedra volcánica) */
--cantera-dark: #B89483; /* cantera oscura */
--jade-light: #4E9A87;
--cochinilla: #A93838; /* tinte rojo */
--turquesa-azt: #3F8FA3; /* turquesa mexica */
--maiz: #F4D35E; /* maíz amarillo */
--obsidiana: #1A1A1F; /* vidrio volcánico negro */
--copper: #B87333; /* tepuztli metal */
--line-line: var(--gyg-line);
--text-ink: var(--ink, #1a0e2a);
--text-muted: #565156;
--ink-illustration: #1a0e2a; /* SVG illustration outline · used in drawer empty-state via inline style */
/* MEDIDO 4.52:1 sobre blanco. Antes era #E8A23D con el comentario
"WCAG AA on white", y #E8A23D mide 1.99:1 — la afirmación era falsa y
nadie la había comprobado. Es el segundo comentario del CSS que se
declaraba AA sin cumplirlo (el otro era --accent-secondary). */
--gold-star: var(--gold-text); /* un solo dorado legible, sin un tercer tono suelto */
--whatsapp-green: #25D366; /* official WhatsApp brand color (used in FAB + CTA) */
--ink-grad-end: #1a0e2a; /* gradient endpoint pair with --surface-dark · darker than text-ink for depth */
--obsidian-deep: #150826; /* gradient endpoint pair with --obsidian-ink for codex-neon theme */
--coral-hover: #ff7a72; /* mundial-pill hover state · slight saturation lift over --coral */
--badge-dark: #1a0a1c; /* certified-by-Guidemexx dark badge background */
--surface-page-elev: #fafafa; /* secondary elevated surface (distinct from --surface-elev cream-deep) */
}
/* ─── Topbar v=18 · GYG-style 2-row layout ──────────────────────── */
.topbar {
position: sticky;
top: 0;
z-index: 90;
background: var(--surface-card);
border-bottom: 1px solid var(--line-soft);
border-image: linear-gradient(90deg, var(--coral) 0%, var(--yellow) 33%, var(--purple) 66%, var(--coral) 100%) 1;
}
.topbar-inner {
display: flex !important;
align-items: center;
gap: 16px;
padding: 12px 16px;
min-height: 64px;
max-width: 1380px;
margin: 0 auto;
}
.topbar .brand {
flex-shrink: 0;
display: flex;
align-items: center;
}
.topbar .brand-logo {
height: 36px;
width: auto;
}
/* Search bar · GYG-morph behavior */
.topbar-search {
flex: 1 1 auto;
max-width: 560px;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 18px;
border: 1px solid var(--gyg-line);
border-radius: 999px;
background: var(--surface-card);
transition: max-width 220ms ease, padding 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
box-shadow: 0 2px 6px rgba(26,14,42,.05);
}
.topbar-search:focus-within {
box-shadow: 0 6px 20px rgba(26, 26, 26,.18);
border-color: var(--purple);
}
.topbar-search svg {
width: 18px;
height: 18px;
color: var(--gyg-ink-soft);
flex-shrink: 0;
}
.topbar-search input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 15px;
color: var(--gyg-ink);
min-width: 0;
}
.topbar.is-scrolled .topbar-search {
max-width: 420px;
padding: 9px 14px;
}
/* ─── GYG single-search-bar pattern (v=22 · 2026-05-31) ──────────────────
On pages with a hero-search (home), the topbar-search stays HIDDEN while
the topbar is unscrolled · only ONE visible search at a time. When the
user scrolls past the hero, `.topbar.is-scrolled` fires and the
topbar-search appears (GYG scroll-morph pattern). On sibling pages
without a hero-search (mundial · sobre · tour), the body opts into
`.has-no-hero-search` so the topbar-search is visible from t=0. */
body.has-hero-search:not(.is-scrolled-topbar) .topbar-search { display: none !important; }
.topbar.is-scrolled .topbar-search { display: flex !important; }
@media (max-width: 880px) {
/* Mobile · same rule but apply via body class for parity */
body.has-hero-search:not(.is-scrolled-topbar) .topbar-search { display: none !important; }
}
/* 4 GYG-style icons · stacked label */
.topbar .topbar-actions {
display: flex !important;
align-items: center;
gap: 4px;
flex-shrink: 0;
flex-wrap: nowrap !important;
}
.topbar .topbar-icon {
background: none;
border: none;
padding: 8px 12px;
display: flex !important;
flex-direction: column !important;
align-items: center;
gap: 3px;
cursor: pointer;
color: var(--text-ink);
font: 500 11px/1.2 'Inter', -apple-system, sans-serif;
position: relative;
border-radius: 10px;
transition: background 150ms ease, transform 150ms ease;
text-decoration: none;
}
.topbar .topbar-icon:hover {
background: rgba(26, 26, 26,.07);
transform: translateY(-1px);
}
.topbar .topbar-icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
}
.topbar .topbar-icon-label {
white-space: nowrap;
letter-spacing: .02em;
}
.topbar .topbar-icon-badge {
position: absolute;
top: 2px;
right: 4px;
background: var(--coral);
color: #fff;
font-size: 10px;
border-radius: 999px;
padding: 1px 6px;
font-weight: 700;
line-height: 1.4;
min-width: 18px;
text-align: center;
}
/* Sub-nav row 2 · GYG-style dropdowns */
.topbar-subnav {
border-top: 1px solid var(--line-soft);
background: var(--surface-elev);
}
.topbar-subnav-inner {
display: flex;
align-items: center;
gap: 28px;
padding: 10px 16px;
max-width: 1380px;
margin: 0 auto;
position: relative;
}
/* static so the full-width .mega-panel centers on .topbar-subnav-inner
(relative) instead of the narrow trigger item · fixes the off-screen shift */
.topbar-subnav .mega-item { position: static; }
.topbar-subnav .mega-trigger {
font: 500 14.5px/1.2 'Inter', sans-serif;
color: var(--text-ink);
text-decoration: none;
padding: 6px 4px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.topbar-subnav .mega-trigger:hover { color: var(--purple); }
.topbar-subnav .topnav-pill.is-mundial {
margin-left: auto;
background: var(--gyg-blue);
color: #fff;
padding: 8px 16px;
border-radius: 999px;
font-weight: 600;
font-size: 13px;
text-decoration: none;
box-shadow: none;
}
/* v30 client directive · GetYourGuide-clean wins over legacy temple motif. */
.greca,
.palacio-divider,
.tour-card-greca,
.tour-hero-greca {
display: none !important;
}
.topbar {
border-bottom: 1px solid var(--gyg-line-soft);
border-image: none;
background: #fff;
}
.topbar::after,
.hero-content h1::before {
display: none !important;
}
.hero-search {
border: 1px solid var(--gyg-line);
box-shadow: 0 4px 18px rgba(26, 26, 26, .12);
}
/* ─── Profile dropdown · GYG-style panel ──────────────────────── */
.profile-dropdown {
position: fixed;
top: 72px;
right: 16px;
width: 320px;
max-width: calc(100vw - 32px);
background: var(--surface-card);
border-radius: 18px;
box-shadow: 0 18px 48px rgba(26,14,42,.22), 0 2px 8px rgba(26,14,42,.06);
padding: 8px;
z-index: 100;
opacity: 0;
transform: translateY(-8px);
transition: opacity 180ms ease, transform 180ms ease;
pointer-events: none;
}
.profile-dropdown.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.profile-dropdown[hidden] { display: none; }
.profile-dd-head {
padding: 14px 16px 6px;
font: 600 18px/1.2 'Cinzel', Georgia, serif;
color: var(--text-ink);
}
.profile-dd-divider {
height: 1px;
background: var(--line-soft);
margin: 8px 12px;
}
.profile-dd-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
width: 100%;
background: none;
border: none;
text-align: left;
text-decoration: none;
color: var(--text-ink);
font: 500 14px/1.4 'Inter', sans-serif;
border-radius: 10px;
cursor: pointer;
}
.profile-dd-item:hover:not([disabled]) { background: rgba(26, 26, 26,.06); }
.profile-dd-item[disabled] { opacity: .55; cursor: default; }
.profile-dd-item svg {
width: 22px;
height: 22px;
flex-shrink: 0;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
}
.profile-dd-meta {
margin-left: auto;
font-weight: 400;
color: var(--text-muted);
font-size: 12px;
}
/* ─── Modal overlay (lang/currency) · GYG-style ────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(26,14,42,.42);
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 6vh;
overscroll-behavior: contain;
}
.modal-overlay.is-open { display: flex; }
.modal-overlay[hidden] { display: none !important; }
/* ── CABECERA DEL MOCKUP · móvil ────────────────────────────────────────────
El mockup pone: hamburguesa a la izquierda, wordmark CENTRADO, y tres iconos
a la derecha (lupa, corazón, WhatsApp). Aquí el buscador se inyecta en línea
y ocupa media barra, así que el wordmark deja de estar centrado — que es lo
primero que se nota al comparar.
El buscador NO se elimina: se colapsa en la lupa, que abre el mismo cajón.
Y los iconos de carrito, idioma y perfil salen de la barra porque ya viven
en la barra inferior de cinco, donde el mockup los pone. */
@media (max-width: 880px) {
#topbar-search { display: none !important; }
.topbar-inner { display: grid !important; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; }
.topbar .brand { justify-self: center; }
#topbar-cart, #topbar-langcurr, #topbar-profile { display: none !important; }
.topbar-icon-label { display: none !important; }
.topbar .topbar-actions { gap: 14px !important; }
.topbar-icon { min-width: 30px; }
}
.modal-card {
width: 560px;
max-width: calc(100vw - 24px);
max-height: 86vh;
background: var(--surface-card);
border-radius: 24px;
padding: 32px;
position: relative;
box-shadow: 0 24px 72px rgba(26,14,42,.32);
overflow: auto;
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
padding: 8px;
cursor: pointer;
border-radius: 50%;
width: 44px;
height: 44px;
display: grid;
place-items: center;
}
.modal-close:hover { background: rgba(26,14,42,.06); }
.modal-close svg { width: 22px; height: 22px; color: var(--text-ink); }
.modal-card h2 {
margin: 0 0 22px;
font: 600 24px/1.2 'Cinzel', Georgia, serif;
color: var(--text-ink);
}
.modal-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--line-soft);
margin-bottom: 16px;
}
.modal-tab {
background: none;
border: none;
padding: 12px 16px;
cursor: pointer;
font: 500 14px/1.2 'Inter', sans-serif;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 8px;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.modal-tab svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
}
.modal-tab.active {
color: var(--purple);
border-bottom-color: var(--purple);
font-weight: 600;
}
.modal-pane { display: none; flex-direction: column; gap: 2px; }
.modal-pane.active { display: flex; }
.modal-pick-row {
background: none;
border: none;
padding: 14px 14px;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 10px;
font: 500 15px/1.2 'Inter', sans-serif;
color: var(--text-ink);
}
.modal-pick-row:hover { background: rgba(26, 26, 26,.06); }
.modal-pick-row[aria-selected="true"] { color: var(--purple); font-weight: 600; }
.modal-pick-row[aria-selected="true"] .modal-pick-check { opacity: 1; }
.modal-pick-check { opacity: 0; color: var(--purple); font-weight: 700; }
/* ─── Empty states · GYG-style (drawer cart/wishlist) ──────────── */
.drawer-empty {
padding: 40px 24px;
text-align: center;
}
.drawer-empty .empty-illustration {
width: 180px;
height: 130px;
margin: 0 auto 24px;
opacity: .85;
}
.drawer-empty h3 {
font: 600 20px/1.3 'Cinzel', Georgia, serif;
color: var(--text-ink);
margin: 0 0 8px;
}
.drawer-empty p {
font: 400 14px/1.5 'Inter', sans-serif;
color: var(--text-muted);
margin: 0 0 24px;
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
.drawer-empty .btn-primary {
display: inline-block;
padding: 12px 24px;
background: var(--purple);
color: #fff;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
/* ─── Tour card · GYG-style horizontal scroll + heart-per-card ── */
.h-scroll-section {
position: relative;
margin: 32px 0;
}
.h-scroll-track {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 4px 16px 16px;
scroll-padding-left: 16px;
}
.h-scroll-track::-webkit-scrollbar { display: none; }
.h-scroll-track > * {
flex: 0 0 280px;
scroll-snap-align: start;
}
.h-scroll-arrow {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--purple);
color: var(--purple);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,.14);
z-index: 5;
transition: transform 150ms ease, box-shadow 150ms ease;
}
.h-scroll-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.h-scroll-arrow.is-left { right: auto; left: 8px; }
.h-scroll-arrow svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }
.h-scroll-arrow[hidden] { display: none; }
.tour-card { position: relative; }
.tour-card-heart {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.92);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,.16);
transition: transform 150ms ease, background 150ms ease;
}
.tour-card-heart:hover { transform: scale(1.08); background: #fff; }
.tour-card-heart svg { width: 18px; height: 18px; stroke: var(--text-ink); stroke-width: 2; fill: none; transition: fill 150ms ease; }
.tour-card-heart.is-fav svg { fill: var(--coral); stroke: var(--coral); }
/* ─── Aztec full palacio · texturas, grecas, glifos ───────────── */
.palacio-divider {
height: 24px;
background-repeat: repeat-x;
background-position: center;
background-size: 48px 24px;
background-image: url("data:image/svg+xml;utf8,");
opacity: .35;
margin: 24px 0;
}
.palacio-divider.is-coral {
background-image: url("data:image/svg+xml;utf8,");
}
/* Cantera texture overlay for sections marked .palacio-bg */
.palacio-bg {
background-color: var(--cantera);
background-image:
radial-gradient(circle at 25% 30%, rgba(184,148,131,.18) 0%, transparent 50%),
radial-gradient(circle at 75% 70%, rgba(184,115,51,.12) 0%, transparent 50%),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 160px 160px;
background-attachment: scroll, scroll, scroll;
}
/* Card hover glow · teotihuacan orange */
.tour-card {
transition: transform 180ms ease, box-shadow 220ms ease;
}
.tour-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(184,115,51,.18), 0 0 0 1px rgba(184,115,51,.12);
}
/* h1 hero serif glyph · prehispanic feel */
.hero-content h1 {
/* Aquí había `font-family: 'Cinzel','Tenor Sans',Georgia,serif !important` —
la ÚNICA declaración de fuente con `!important` del archivo, de una era de
diseño anterior. Ganaba a las cinco reglas que intentaban componer el
titular del hero, incluidas las dos que instaló el rediseño, así que el
titular más visible del sitio salía en capitular y no en la serif nueva.
Se BORRA en vez de cambiarle el valor: la familia ya la deciden la regla
base y `.hero h1.hero-line`. */
font-weight: 600;
letter-spacing: .01em;
}
.hero-content h1 em {
font-style: normal;
color: var(--coral);
position: relative;
}
.hero-content h1 em::after {
content: "";
display: none;
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 4px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-size: 24px 4px;
opacity: .68;
}
/* Rating badges · GYG-faithful */
.rating-sample-flag {
display: inline-block;
font-size: 11px;
font-weight: 400;
color: var(--text-muted);
margin-left: 4px;
letter-spacing: .02em;
}
/* v32 final GYG-clean polish · no motif underline. */
.hero-content h1 em::after {
display: none !important;
}
.badge-new {
display: inline-block;
background: var(--jade);
color: #fff;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
/* ─── Mobile responsive · topbar v=18 ─────────────────────────── */
@media (max-width: 880px) {
.topbar-inner {
gap: 8px;
padding: 10px 12px;
}
.topbar .brand-logo { height: 28px; }
.topbar-search {
padding: 9px 14px;
max-width: none;
}
.topbar .topbar-icon-label,
.topbar .topbar-icon-badge { display: none !important; }
.topbar .topbar-icon { padding: 8px; }
.topbar-subnav { display: none; }
.profile-dropdown {
top: auto;
bottom: 0;
right: 0;
left: 0;
width: 100%;
max-width: 100%;
border-radius: 18px 18px 0 0;
max-height: 78vh;
overflow-y: auto;
transform: translateY(100%);
}
.profile-dropdown.is-open { transform: translateY(0); }
.modal-card {
border-radius: 18px;
padding: 24px;
}
.h-scroll-track > * { flex-basis: 240px; }
}
/* Deprecated legacy markup · global-hide
currency-pick + topbar-search-mini were replaced by the new GYG-style 4-icon
topbar + the standalone language/currency modal. These elements are
global-hidden so any sibling page still referencing them renders cleanly
without the deprecated widgets in the visible tree. Verified rule active
and specificity-correct. */
.topbar-search-mini { display: none !important; }
.currency-pick { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════
v=36 · GYG-CLEAN OVERRIDE BLOCK (2026-06-01 · client directive)
═══════════════════════════════════════════════════════════════════
Cliente pidió que Guidemexx se vea EXACTAMENTE como getyourguide.com:
limpio · blanco dominante · profesional · plenty of whitespace.
El layer mexicano (greca · cantera · Quetzalcóatl) queda solo como
acento sutil (logo + Mundial pill + heart-color en favoritos).
Este block neutraliza las reglas pesadas decorativas que sobreviven
del layer "palacio prehispánico". Se aplica al final del archivo
para garantizar specificity-wins sin tocar las definiciones legacy
(preserva opt-in con `[data-theme="palacio"]`). */
/* Topbar greca border-image → quita · usa hairline GYG */
.topbar {
border-image: none !important;
border-bottom: 1px solid var(--gyg-line) !important;
background: var(--gyg-bg) !important;
}
.topbar-subnav {
border-top: 1px solid var(--gyg-line-soft) !important;
background: var(--gyg-bg) !important;
}
/* CTA band púrpura → fondo gris claro GYG con texto oscuro */
.cta-band {
background: var(--gyg-bg-hover) !important;
color: var(--gyg-ink) !important;
}
.cta-band h2,
.cta-band p { color: var(--gyg-ink) !important; }
/* Botones primarios púrpura → GYG blue */
/* El texto va en TINTA, no en blanco, y no es una preferencia estética: sobre
el oro #B99154 el blanco mide 2.90:1 y la tinta 6.00:1. El mockup del cliente
tampoco pone blanco sobre oro. El hover oscurece a #A8834A, que es lo más
que puede bajar conservando la tinta legible (4.98:1); con el oro-dk la
tinta caería a 3.58:1 y habría que voltear el texto a blanco a mitad de
interacción, que es peor que no tener hover. */
.btn-primary {
background: var(--oro) !important;
color: var(--gyg-ink) !important;
border-color: var(--oro) !important;
}
.btn-primary:hover {
background: #A8834A !important;
color: var(--gyg-ink) !important;
border-color: #A8834A !important;
}
.btn-ghost {
background: transparent !important;
color: var(--gyg-ink) !important;
border: 1px solid var(--gyg-line) !important;
}
.btn-ghost:hover {
border-color: var(--gyg-ink) !important;
background: var(--gyg-bg-hover) !important;
}
/* Quetzalcóatl watermark en hero h1 → off · evita la sombra prehispánica */
.hero-content h1::before {
display: none !important;
}
/* Hero h1 typography → Inter Bold (no Cinzel serif palacio) */
.hero-content h1,
.hero h1,
h1.gyg-title {
font-family: var(--ff-body);
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: #fff !important;
}
.hero-content h1 em,
.hero h1 em {
font-style: normal !important;
color: var(--coral) !important; /* acento mexicano único · sutil */
}
.hero-content h1 em::after {
display: none !important; /* sin greca underline decorativa */
}
/* Section headings · Inter Bold (no Cinzel) */
.section-head h2,
h2.gyg-h2 {
font-family: var(--ff-body);
font-weight: 700 !important;
color: var(--gyg-ink) !important;
letter-spacing: -0.005em !important;
}
/* Cards · clean white surface · GYG-light shadow on hover */
.tour-card {
background: var(--gyg-bg-card) !important;
border: 1px solid var(--gyg-line-soft) !important;
border-radius: 12px !important;
box-shadow: none !important;
overflow: hidden !important;
}
.tour-card:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 24px rgba(26, 26, 26,.10) !important;
border-color: var(--gyg-line) !important;
}
.tour-card-greca,
.palacio-divider,
.palacio-bg {
display: none !important;
}
/* Body / page background · pure white (no cream/pink) */
body {
background: var(--gyg-bg) !important;
color: var(--gyg-ink) !important;
}
/* Trust strip · light grey divider strip · no coral border */
.trust-strip,
.why-row {
background: var(--gyg-bg-hover) !important;
border-top: 1px solid var(--gyg-line-soft) !important;
border-bottom: 1px solid var(--gyg-line-soft) !important;
}
/* Mundial pill · keep purple as the ONE strong brand color · GYG-style pill */
.is-mundial,
.topnav-pill.is-mundial {
background: linear-gradient(135deg, var(--coral), var(--purple)) !important;
color: #fff !important;
border-radius: 999px !important;
}
/* Topbar subnav links · clean text, GYG hover */
.topbar-subnav .mega-trigger {
color: var(--gyg-ink) !important;
font-weight: 600 !important;
}
.topbar-subnav .mega-trigger:hover {
color: var(--gyg-blue) !important;
}
/* Search bar · GYG-style rounded white with soft border */
.topbar-search,
.hero-search {
background: #fff !important;
border: 1px solid var(--gyg-line) !important;
box-shadow: 0 1px 3px rgba(26, 26, 26,.04) !important;
}
.topbar-search:focus-within,
.hero-search:focus-within {
border-color: var(--gyg-ink) !important;
box-shadow: 0 4px 12px rgba(26, 26, 26,.10) !important;
}
/* WhatsApp FAB · keep brand green (not mexican-purple) */
.wa-fab {
background: var(--whatsapp-green, #25D366) !important;
}
/* ─────────────────────────────────────────────────────────────────────
v37 · Mobile-first marketplace landing
Cliente: más GetYourGuide, menos pieza editorial/video. El home se
concentra en búsqueda + catálogo, con eco mexicano solo en logo/acento.
───────────────────────────────────────────────────────────────────── */
{
--radius: 8px;
--radius-sm: 8px;
}
.container {
width: min(var(--maxw), 100% - 32px);
}
body[data-page="home"] .greca,
body[data-page="home"] .hero-cta,
body[data-page="home"] .why-video {
display: none !important;
}
body[data-page="home"] .topbar {
position: sticky;
top: 0;
background: rgba(255,255,255,.96) !important;
backdrop-filter: blur(18px);
}
body[data-page="home"] .topbar-inner {
min-height: 66px;
}
body[data-page="home"] .brand-logo {
height: 30px;
}
body[data-page="home"] .hero {
min-height: clamp(560px, 82svh, 860px);
align-items: end;
background: var(--gyg-bg);
isolation: isolate;
overflow: hidden;
z-index: 80;
}
body[data-page="home"] .hero-media video {
display: block !important;
width: 100%;
height: 100%;
object-fit: cover;
}
body[data-page="home"] .hero-media img {
display: none !important;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 44%;
}
body[data-page="home"] .hero-media::after {
background: linear-gradient(0deg, rgba(30,12,12,.52) 0%, rgba(30,12,12,0) 40%);
}
body[data-page="home"] .hero-content {
padding: 0 0 44px;
max-width: 710px;
}
body[data-page="home"] .hero .eyebrow {
color: #fff !important;
font-family: var(--ff-body);
font-size: .9rem;
font-weight: 700;
letter-spacing: .02em;
text-transform: none;
}
body[data-page="home"] .hero h1 {
/* CONSOLIDADA 2026-08-23 · esta regla es la ÚNICA que decide el tamaño y el
ritmo del titular. Estaba escrita DOS veces a 3.500 líneas de distancia y
el comentario anterior lo avisaba —«quien toque una tiene que tocar la
otra, o consolidarlas»—, así que se consolidan: `.hero h1.hero-line` se
queda sólo con lo que aquí no se declara (color, familia, sombra).
Escrita dos veces, la próxima sesión cambia una, mide 21.6px donde esperaba
otra cosa, y culpa al navegador. */
max-width: 20ch;
margin: 0 auto;
font-size: clamp(2.1rem, 6.4vw, 3.9rem);
font-weight: 400;
line-height: 1.09;
letter-spacing: .012em !important;
text-align: center;
text-wrap: balance;
}
body[data-page="home"] .hero .hero-promise {
/* El subtítulo se declara aquí también, por la misma razón de especificidad. */
max-width: 54ch;
font-size: clamp(.94rem, 1.45vw, 1.12rem);
line-height: 1.5;
}
body[data-page="home"] .hero h1 em {
color: #fff !important;
}
body[data-page="home"] .hero p {
max-width: 44ch;
margin-top: 18px;
color: rgba(255,255,255,.94);
font-size: clamp(1rem, 1.8vw, 1.18rem);
line-height: 1.55;
font-weight: 500;
}
body[data-page="home"] .hero-search {
max-width: 620px;
margin-top: 24px;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 10px 28px rgba(8,23,38,.16) !important;
position: relative;
z-index: 81;
}
body[data-page="home"] .hero-search-results {
z-index: 82;
color: var(--gyg-ink, #1A1A1A);
}
body[data-page="home"] .hero-search-results .hsr-item,
body[data-page="home"] .hero-search-results .hsr-title {
color: var(--gyg-ink, #1A1A1A);
}
body[data-page="home"] .hero-search-results .hsr-meta,
body[data-page="home"] .hero-search-results .hsr-empty,
body[data-page="home"] .hero-search-results .hsr-intent {
color: var(--gyg-ink-soft, #565A60);
}
body.gmx-search-open .hero {
isolation: auto !important;
overflow: visible !important;
z-index: 900 !important;
}
body.gmx-search-open .hero-content,
body.gmx-search-open .hero-search {
z-index: 901 !important;
}
body.gmx-search-open .hero-search-results {
z-index: 902 !important;
}
body[data-page="home"] .hero-search::before {
content: "";
width: 20px;
height: 20px;
left: 22px;
opacity: .75;
background:
radial-gradient(circle at 45% 45%, transparent 42%, var(--gyg-ink) 45%, var(--gyg-ink) 58%, transparent 61%),
linear-gradient(45deg, transparent 56%, var(--gyg-ink) 58%, var(--gyg-ink) 68%, transparent 70%);
}
body[data-page="home"] .hero-search-input {
min-height: 64px;
padding: 18px 26px 18px 58px;
border-radius: 999px;
font-size: 1.05rem;
font-weight: 600;
background: #fff;
box-shadow: none !important;
}
body[data-page="home"] .trust-strip {
background: #fff !important;
}
body[data-page="home"] .trust-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
padding: 14px 0;
}
body[data-page="home"] .trust-item {
justify-content: center;
min-width: 0;
padding: 4px 12px;
color: var(--gyg-ink);
font-size: .88rem;
}
body[data-page="home"] .trust-ic {
color: var(--gyg-blue);
}
body[data-page="home"] main#explorar {
padding-top: 18px;
}
body[data-page="home"] .section-head {
margin: 28px 0 18px;
}
body[data-page="home"] .section-head .eyebrow {
/* Esta regla (especificidad 0,4,2) pisaba el color AA de `.eyebrow` y devolvía
el rojo de marca #1A1A1A a texto de 12.5px: 4.44:1 sobre cream, o sea fallaba
AA justo donde `.eyebrow` ya lo había resuelto. Es el patrón que hace inútil
arreglar un token: una regla de página más específica lo revierte. */
color: var(--brand-red-text);
font-family: var(--ff-body);
font-size: .78rem;
letter-spacing: .08em;
}
body[data-page="home"] .section-head h2 {
font-size: clamp(1.75rem, 4.5vw, 2.65rem);
letter-spacing: 0 !important;
}
body[data-page="home"] .catalog-bar {
top: 66px;
margin: 0 -16px 18px;
padding: 10px 16px 12px;
background: rgba(255,255,255,.96);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--gyg-line-soft);
}
body[data-page="home"] .region-seg {
width: auto;
max-width: 100%;
overflow-x: auto;
background: var(--gyg-bg-hover);
border-color: var(--gyg-line);
border-radius: 999px;
}
body[data-page="home"] .region-seg-btn {
color: var(--gyg-ink);
}
body[data-page="home"] .region-seg-btn.active {
background: var(--gyg-ink) !important;
color: #fff !important;
}
body[data-page="home"] .tour-grid {
gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
body[data-page="home"] .tour-card,
body[data-page="home"] .testi-card {
border-radius: 8px !important;
}
body[data-page="home"] .tour-card-media {
aspect-ratio: 16 / 11;
}
body[data-page="home"] .tour-card-body {
padding: 14px;
}
/* Mobile: card compacta top-packed (sin hueco a la mitad por el stretch de fila) */
@media (max-width: 880px) {
body[data-page="home"] .tour-card-body { padding: 12px 14px 14px; gap: 5px; }
body[data-page="home"] .tour-card-foot { margin-top: 6px; padding-top: 10px; }
body[data-page="home"] .tour-card-meta-line { margin-top: 0; }
body[data-page="home"] .tour-card-book-cta { padding: 11px 16px; margin-top: 2px; }
}
body[data-page="home"] .tour-card h3 {
font-size: 1.02rem;
line-height: 1.28;
}
body[data-page="home"] .testi-sec {
margin-top: 8px;
padding: 28px 0;
background: var(--gyg-bg-hover) !important;
}
/* Ritmo vertical · testi-sec y cta-band comparten el mismo gris (--gyg-bg-hover);
el margin-top base de .cta-band (36px) dejaba una franja blanca angosta y
accidental entre ambos. Se funden en un solo bloque gris con hairline sutil
(mismo patrón divisor que .vibe-sec) en vez de un gap disparejo. */
body[data-page="home"] .cta-band {
margin-top: 0;
border-top: 1px solid var(--gyg-line-soft);
}
@media (max-width: 880px) {
body[data-page="home"] .container {
width: min(100% - 28px, var(--maxw));
}
body[data-page="home"] .topbar-inner {
min-height: 58px;
padding-block: 8px;
gap: 8px;
}
body[data-page="home"] .brand-logo {
/* logo wordmark 9.23:1 · height fija + max-width recortaba el ancho natural
→ box 172x26 (6.6:1) letterboxeado/aplastado vs desktop. Aspecto-preservado:
auto dims + max-height + max-width (el que ate primero manda, sin distorsión). */
height: auto;
max-height: 28px;
width: auto;
max-width: min(240px, 66vw);
object-fit: contain;
}
body[data-page="home"] .topbar-actions {
gap: 2px;
}
body[data-page="home"] .topbar-icon {
width: 40px;
height: 40px;
}
body[data-page="home"] .hero {
min-height: min(540px, calc(100svh - 58px));
align-items: end;
}
/* Landscape photo en contenedor móvil portrait: object-fit:cover recorta por
los lados (no arriba), así que se veía TODO el cielo y la pirámide quedaba
chica. Fix por layout: imagen más alta anclada al fondo → el cielo (parte
superior de la foto) se recorta arriba y la pirámide llena el cuadro. */
body[data-page="home"] .hero-media { overflow: hidden; }
body[data-page="home"] .hero-media video { display: none !important; }
body[data-page="home"] .hero-media img {
display: block !important;
position: absolute; left: 0; bottom: 0;
width: 100%; height: 146%;
object-fit: cover; object-position: 50% 100%;
}
body[data-page="home"] .hero-media::after {
background: linear-gradient(0deg, rgba(30,12,12,.52) 0%, rgba(30,12,12,0) 40%);
}
body[data-page="home"] .hero-content {
padding: 36px 0 max(26px, env(safe-area-inset-bottom));
}
body[data-page="home"] .hero h1 {
/* CUARTA copia de la misma decisión · audit 2026-08-19. La jerarquía del titular
está declarada en CUATRO sitios (dos globales, una @480px y ésta @880px) y gana
la más específica que aplique. Medido: arreglar sólo tres dejaba el móvil en
17.16px. Cualquiera que cambie el hero tiene que censar las cuatro. */
max-width: 20ch;
font-size: clamp(1.5rem, 7vw, 2.1rem);
}
body[data-page="home"] .hero p {
max-width: 31ch;
font-size: 1rem;
}
body[data-page="home"] .hero-search {
width: 100%;
max-width: none;
margin-top: 22px;
}
body[data-page="home"] .hero-search-input {
min-height: 58px;
font-size: 1rem;
padding-right: 20px;
}
body[data-page="home"] .trust-row {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 12px 0;
scroll-snap-type: x proximity;
}
body[data-page="home"] .trust-item {
flex: 0 0 auto;
justify-content: flex-start;
min-height: 40px;
padding: 8px 12px;
border: 1px solid var(--gyg-line-soft);
border-radius: 999px;
background: #fff;
scroll-snap-align: start;
white-space: nowrap;
}
body[data-page="home"] .catalog-bar {
top: 58px;
margin-inline: -14px;
padding-inline: 14px;
}
body[data-page="home"] .tour-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* ── Host · inquiries (real traveler requests routed to the guide) ── */
.host-inquiries-list { display: flex; flex-direction: column; gap: 14px; }
.host-muted { color: var(--gray-text); font-size: .95rem; }
.host-inq-card { border: 1px solid var(--gyg-line-soft, #e5e7eb); border-radius: 14px;
padding: 16px 18px; background: #fff; box-shadow: 0 1px 3px rgba(26,10,28,.05); }
.host-inq-card.is-new { border-color: var(--purple); box-shadow: 0 2px 10px rgba(26, 26, 26,.10); }
.host-inq-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.host-inq-top strong { font-size: 1.02rem; color: var(--text-ink, #1a0a1c); }
.host-inq-tag { background: var(--purple); color: #fff; font-size: .72rem; font-weight: 700;
padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; }
.host-inq-date { margin-left: auto; color: var(--gray-text); font-size: .82rem; }
.host-inq-msg { color: #3c4043; line-height: 1.5; margin: 4px 0 10px; white-space: pre-wrap; }
.host-inq-prefs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.inq-pref { background: var(--pink, #F1EDE6); color: var(--purple); font-size: .78rem;
padding: 3px 10px; border-radius: 999px; }
.host-inq-meta { color: #5f6368; font-size: .88rem; margin-bottom: 12px; }
.host-inq-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.host-inq-actions .btn { font-size: .9rem; padding: 8px 14px; }
/* ── Trust trio on catalog cards (free cancel + reserve w/ deposit) ── */
.tour-card-trust { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 8px; }
.tc-trust { font-size: .78rem; color: var(--jade-text); display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; }
.tc-trust::before { content: "✓"; font-weight: 700; color: var(--jade-text); }
/* Etiquetas de la card · cada item especifica sus categorías (máx 5 + "+N") */
.tour-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tc-tag { border: 1px solid var(--line); background: var(--cream, #fff7fb); color: var(--terra);
border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .72rem; font-weight: 600;
cursor: pointer; line-height: 1.2; transition: background var(--ease), border-color var(--ease), color var(--ease); }
.tc-tag:hover { background: var(--purple, #1A1A1A); color: #fff; border-color: var(--purple, #1A1A1A); }
.tc-tag-more { align-self: center; font-size: .72rem; color: var(--sand); font-weight: 600; }
/* Booking CTA · aviso "falta fecha" + shake · y :disabled global visible */
.bk-hint { font-size: .82rem; color: var(--coral, #FF958E); margin: 4px 0 0; font-weight: 600; }
.bk-shake { animation: bkShake .5s ease; }
@keyframes bkShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
.btn:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
/* ── Reviews · honest empty state (no fake reviews) ── */
.reviews-empty { text-align: center; padding: 28px 16px; color: #5f6368; }
.reviews-empty .ro-stars { font-size: 1.4rem; color: #c9ccd1; margin-bottom: 8px; }
.reviews-empty p { max-width: 420px; margin: 0 auto; }
/* ── Post-tour review form modal ── */
.rv-write-btn { margin-top: 12px; }
.rv-form-panel { max-width: 460px; }
.rv-form-sub { color: #5f6368; margin: 2px 0 14px; font-size: .92rem; }
.rv-star-pick { display: flex; gap: 4px; margin-bottom: 14px; }
.rv-star { background: none; border: none; font-size: 1.9rem; line-height: 1; cursor: pointer; color: #d6d9dd; padding: 0 2px; transition: color .12s; }
.rv-star.on { color: var(--gold-text); }
.rv-input { width: 100%; padding: 11px 13px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; font: inherit; margin-bottom: 10px; outline: none; }
.rv-input:focus { border-color: var(--purple); }
textarea.rv-input { resize: vertical; }
.rv-err { color: #b3261e; font-size: .85rem; margin: 0 0 10px; }
.gb-modal__x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--gray-text); }
/* ── Guide differentiators · verified badge + specialty chips ── */
.gb-verified { display: inline-flex; align-items: center; gap: 3px; font-size: .62em; font-weight: 700;
vertical-align: middle; color: var(--jade-text); background: #e6f4ec; border: 1px solid #b7e0c8;
padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.gb-specialties { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.gb-chip { font-size: .76rem; background: var(--pink, #F1EDE6); color: var(--purple, #1A1A1A);
padding: 3px 11px; border-radius: 999px; line-height: 1.5; }
.gp-specialties { margin-top: 8px; }
/* guide reviews inside profile modal */
.gp-reviews { margin: 14px 0 4px; }
.gp-rv-h { font-size: .95rem; margin: 0 0 8px; color: var(--ink, #1a0a1c); }
.gp-rv { border-top: 1px solid var(--line-soft, #eee); padding: 9px 0; }
.gp-rv-top { display: flex; gap: 8px; align-items: baseline; }
.gp-rv-stars { color: var(--gold-text); font-size: .85rem; }
.gp-rv-who { font-size: .82rem; color: #5f6368; }
.gp-rv p { font-size: .9rem; color: #3c4043; margin: 4px 0 2px; line-height: 1.45; }
.gp-rv-tour { font-size: .74rem; color: var(--gray-text); }
/* ── Find your guide · directory page ── */
.guias-main { padding: 24px 16px 60px; }
.guias-hero { max-width: 720px; margin: 12px auto 26px; text-align: center; }
.guias-hero h1 { font-family: var(--ff-serif); font-size: 2.1rem; margin: 6px 0 10px; color: var(--terra, #1A1A1A); }
.guias-lead { color: #5f6368; line-height: 1.6; }
.guias-filters { display: grid; gap: 14px; max-width: 980px; margin: 0 auto 18px; }
.gf-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gf-label { font-weight: 600; font-size: .85rem; color: #44474d; min-width: 90px; }
.gf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-chip { border: 1px solid var(--line, #e0e0e0); background: #fff; border-radius: 999px;
padding: 6px 14px; font: inherit; font-size: .85rem; cursor: pointer; transition: all .15s; }
.gf-chip:hover { border-color: var(--purple); }
.gf-chip.on { background: var(--purple, #1A1A1A); color: #fff; border-color: var(--purple); }
.guias-count { max-width: 980px; margin: 0 auto 10px; color: var(--gray-text); font-size: .9rem; }
.guias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; max-width: 980px; margin: 0 auto; }
.guia-card { border: 1px solid var(--line-soft, #eee); border-radius: 16px; padding: 18px; background: #fff;
box-shadow: 0 1px 3px rgba(26,10,28,.05); display: flex; flex-direction: column; }
.guia-card-head { display: flex; gap: 12px; align-items: flex-start; }
.guia-card .gb-avatar { width: 56px; height: 56px; flex: 0 0 auto; }
.guia-name { font-size: 1.08rem; margin: 0; color: var(--ink, #1a0a1c); }
.guia-headline { font-size: .88rem; color: var(--sand); margin: 2px 0 0; }
.guia-loc { font-size: .8rem; color: var(--gray-text); margin: 2px 0 0; }
.guia-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; font-size: .82rem; color: #5f6368; }
.guia-stats .star { color: var(--gold-text); font-weight: 600; }
.guia-bio { font-size: .9rem; color: #3c4043; line-height: 1.5; margin: 8px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.guia-langs { font-size: .82rem; color: #5f6368; margin: 4px 0 12px; }
.guia-msg { margin-top: auto; text-align: center; }
@media (max-width: 560px) { .guias-grid { grid-template-columns: 1fr; } .gf-label { min-width: 0; width: 100%; } }
/* ── Real scarcity signals (from availability_slots) ── */
/* Escasez sutil estilo GYG · pill blanco, texto oscuro, sin rojo agresivo · solo ≤3 (app.js) */
.tour-card-scarcity { position: absolute; bottom: 10px; left: 10px; z-index: 3;
background: rgba(255,255,255,.95); color: var(--ink); font-size: .72rem; font-weight: 700;
padding: 4px 10px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.booking-scarcity { background: #fdecea; color: #c0291c; font-weight: 700; font-size: .85rem;
padding: 8px 12px; border-radius: 9px; margin: 0 0 12px; display: inline-block; }
/* ── "Certificado por Guidemexx" verification mark (brand trust, like the faros) ── */
.gmx-certified { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700;
color: var(--purple, #1A1A1A); background: var(--pink, #F1EDE6); border: 1px solid color-mix(in srgb, var(--purple) 22%, #fff);
padding: 3px 11px; border-radius: 999px; letter-spacing: .01em; line-height: 1.5; }
.gmx-certified--widget { margin-top: 8px; font-size: .72rem; }
.tcp-verified { color: var(--purple, #1A1A1A) !important; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
/* ── Aggregate social proof strip (home) ── */
.socialproof { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 40px;
max-width: 1000px; margin: 24px auto 8px; padding: 20px 16px; text-align: center; }
.sp-item { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.sp-item strong { font-family: var(--ff-serif); font-size: 1.7rem; color: var(--purple, #1A1A1A); line-height: 1; }
.sp-item span { font-size: .82rem; color: var(--sand, #565A60); }
/* ── Discovery controls · search + sort + facets + count (Fase 3) ── */
.catalog-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px;
margin: 8px 0 20px; padding: 14px 16px; background: var(--gyg-bg-hover, #f5f5f5); border-radius: 14px; }
.cc-search { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 200px;
background: #fff; border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 9px 12px; }
.cc-search svg { width: 18px; height: 18px; color: var(--sand, #565A60); flex: 0 0 auto; }
.cc-search input { border: none; outline: none; font: inherit; width: 100%; background: none; }
.cc-field { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; color: var(--sand, #565A60); font-weight: 600; }
.cc-field select { font: inherit; font-size: .88rem; font-weight: 400; color: var(--ink, #1A1A1A);
border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 8px 10px; background: #fff; cursor: pointer; min-width: 130px; }
.cc-field select:focus { outline: none; border-color: var(--purple, #1A1A1A); }
.cc-clear { align-self: flex-end; background: none; border: 1px solid var(--line, #ddd); border-radius: 10px;
padding: 8px 14px; font: inherit; font-size: .85rem; cursor: pointer; color: var(--purple, #1A1A1A); }
.cc-clear:hover { border-color: var(--purple, #1A1A1A); }
.cc-count { align-self: flex-end; margin-left: auto; color: var(--sand, #565A60); font-size: .9rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .cc-field, .cc-field select { min-width: 0; } .cc-field { flex: 1 1 45%; } .cc-count { margin-left: 0; width: 100%; } }
/* ── Guide-forward catalog cards (ToursByLocals pattern) ── */
.tour-card-guide { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tcg-av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
background: var(--purple, #1A1A1A); color: #fff; font-size: .72rem; font-weight: 700; }
.tcg-name { font-size: .82rem; color: var(--ink, #1A1A1A); line-height: 1.2; }
.tcg-name strong { font-weight: 700; }
.tcg-rat { color: #b8860b; font-weight: 600; white-space: nowrap; }
.tcg-vmark { margin-left: auto; color: var(--jade-text); font-weight: 700; font-size: .8rem; }
.tour-card-private { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem;
color: var(--purple, #1A1A1A); font-weight: 600; margin: 2px 0 6px; }
/* ── Review integrity · verified badge + per-criterion sub-ratings ── */
.rv-verified { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 700;
color: var(--jade-text); background: #e6f4ec; border: 1px solid #b7e0c8; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.review-criteria { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; margin: 6px 0 2px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rc-row { display: grid; grid-template-columns: minmax(104px, auto) 1fr 34px; align-items: center; gap: 10px; }
.rc-row .rc-label { white-space: nowrap; font-size: .84rem; color: var(--ink); }
.rc-row .rc-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--sand); font-size: .84rem; }
.rc-label { font-size: .8rem; color: var(--sand, #565A60); min-width: 84px; }
.rc-val { font-size: .8rem; font-weight: 600; color: var(--ink, #1A1A1A); }
@media (max-width: 560px) { .review-criteria { grid-template-columns: 1fr; } }
/* ── Availability-first widget · step-1 info (language + trust at decision moment) ── */
.bk-availinfo { margin: 10px 0 2px; display: grid; gap: 6px; }
.bk-ai-row { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--ink, #1A1A1A); }
.bk-ai-ic { flex: 0 0 auto; color: var(--purple, #1A1A1A); }
/* ── BUG FIX Bug 1: Calendar confirm button ─────────────────────────────
A "Confirmar fecha →" button is injected by showCalConfirmBtn() inside the
bk-date-pop after the user selects a time slot. It closes the calendar popover
and makes the selected date visually obvious before continuing.
The button is STICKY at the bottom of the calendar popup on mobile so it's
always visible without scrolling — the key usability requirement. */
.bk-cal-confirm-btn {
display: block;
width: 100%;
font-weight: 700;
/* Raise above the backdrop overlay (z-index 109) so it's always tappable */
position: relative;
z-index: 2;
}
/* On mobile: the bk-pop is position:fixed with max-height and overflow-y:auto.
Pin the confirm button to the bottom of the popup by making the popup
use a flex column layout and making the button sticky at the bottom. */
@media (max-width: 880px) {
/* BUG FIX: popup must stay display:none when [hidden] — ID specificity beats
class, so we need !important on the hidden rule to prevent the flex override
from making the popup intercept pointer events when it should be invisible. */
#bk-date-pop[hidden] { display: none !important; }
/* ── CABECERA DEL MOCKUP · móvil ────────────────────────────────────────────
El mockup pone: hamburguesa a la izquierda, wordmark CENTRADO, y tres iconos
a la derecha (lupa, corazón, WhatsApp). Aquí el buscador se inyecta en línea
y ocupa media barra, así que el wordmark deja de estar centrado — que es lo
primero que se nota al comparar.
El buscador NO se elimina: se colapsa en la lupa, que abre el mismo cajón.
Y los iconos de carrito, idioma y perfil salen de la barra porque ya viven
en la barra inferior de cinco, donde el mockup los pone. */
@media (max-width: 880px) {
#topbar-search { display: none !important; }
.topbar-inner { display: grid !important; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; }
.topbar .brand { justify-self: center; }
#topbar-cart, #topbar-langcurr, #topbar-profile { display: none !important; }
.topbar-icon-label { display: none !important; }
.topbar .topbar-actions { gap: 14px !important; }
.topbar-icon { min-width: 30px; }
}
#bk-date-pop:not([hidden]) {
display: flex;
flex-direction: column;
}
#bk-calendar, #slot-times, #bk-step1-info {
flex-shrink: 0;
}
.bk-cal-confirm-btn {
position: sticky;
bottom: 0;
margin-top: 10px;
padding-top: 10px;
background: #fff;
/* keep above popup contents but below nothing (popup is already above overlay) */
z-index: 2;
box-shadow: 0 -8px 16px rgba(255,255,255,0.95);
}
}
/* ── BUG FIX (desktop >880px): the calendar popup is position:absolute anchored
to the STICKY booking widget; it opened below a low anchor (top≈667) and ran
~280px past the viewport bottom with NO way to reach the confirm button
(page-scroll can't move a sticky-anchored popup). Make it a centered,
viewport-bounded scrollable modal with the confirm button sticky at the
bottom — always reachable on desktop. */
@media (min-width: 881px) {
#bk-date-pop:not([hidden]) {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
max-width: calc(100vw - 40px);
max-height: 88vh;
overflow-y: auto;
display: flex;
flex-direction: column;
z-index: 120;
box-shadow: 0 24px 64px rgba(26, 26, 26, 0.28);
border-radius: 16px;
}
#bk-date-pop .bk-cal-confirm-btn {
position: sticky;
bottom: 0;
margin-top: 10px;
padding-top: 10px;
background: #fff;
z-index: 3;
box-shadow: 0 -8px 16px rgba(255, 255, 255, 0.95);
}
}
/* ── BUG FIX Bug 4: Step-2 date summary + "cambiar fecha" control ───────
Shown at the top of the "Tus datos" step so the user always knows the
selected date and can return to change it without losing their place. */
.bk-date-summary {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
padding: 10px 12px; margin-bottom: 12px;
}
.bk-ds-info { display: flex; align-items: flex-start; gap: 8px; min-width: 0; flex: 1; }
.bk-ds-ic { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }
.bk-ds-date { display: block; font-weight: 700; font-size: .88rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-ds-pax { display: block; font-size: .78rem; color: var(--sand); }
.bk-ds-change {
flex-shrink: 0; background: none; border: 1px solid var(--line); border-radius: 8px;
padding: 6px 10px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600;
color: var(--teal); white-space: nowrap; transition: border-color var(--ease);
}
.bk-ds-change:hover { border-color: var(--teal); }
/* ── BUG FIX Bug 3: Map overlap with sticky bar and back button ─────────
Leaflet's own controls (zoom, attribution) default to high z-index values
(400–800). On mobile the map can visually overlap the fixed mobile-cta bar.
- Force map container below the sticky bar z-index (z-index:60)
- Add sufficient bottom margin/padding on mobile so the map doesn't extend
behind the sticky CTA bar (height ~76px + safe-area)
- Ensure the leaflet z-index overrides don't fight the mobile-cta */
.meeting-map { position: relative; z-index: 1; }
#tour-map-col { position: relative; z-index: 1; }
/* Leaflet controls: keep below sticky bar (z-index 60) */
.leaflet-top, .leaflet-bottom { z-index: 20 !important; }
.leaflet-pane { z-index: 10 !important; }
.leaflet-tile-pane { z-index: 2 !important; }
.leaflet-overlay-pane { z-index: 4 !important; }
.leaflet-shadow-pane { z-index: 5 !important; }
.leaflet-marker-pane { z-index: 6 !important; }
.leaflet-tooltip-pane { z-index: 7 !important; }
.leaflet-popup-pane { z-index: 8 !important; }
@media (max-width: 880px) {
/* On mobile, the meeting-map section needs bottom clearance so the map
doesn't render behind the fixed mobile-cta bar (height ~76px + safe-area).
The body already has padding-bottom:76px but the map iframe needs explicit
margin to ensure the Leaflet canvas doesn't extend under the sticky bar. */
.meeting-map { margin-bottom: calc(8px + env(safe-area-inset-bottom)); }
#tour-map-col { margin-bottom: 8px; }
/* Ensure the sticky mobile-cta bar is always above the map pane */
.mobile-cta { z-index: 70 !important; }
}
/* ── Mobile nav drawer · GetYourGuide-style (categorías + drill-in) ── */
.gmx-nav { display: flex; flex-direction: column; }
.gmx-nav-group { display: flex; flex-direction: column; }
.gmx-nav-sec { font-size: 1.25rem; font-weight: 700; color: var(--ink, #1A1A1A); margin: 18px 0 4px; padding: 0 4px; }
.gmx-nav-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
padding: 15px 6px; background: none; border: none; border-bottom: 1px solid var(--gyg-line-soft, #ececec);
font: inherit; font-size: 1.02rem; color: var(--ink, #1A1A1A); cursor: pointer; text-decoration: none; }
.gmx-nav-row:last-child { border-bottom: none; }
.gmx-nav-row:active { background: var(--gyg-bg-hover, #f5f5f5); }
.gmx-nav-ic { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; color: var(--purple, #1A1A1A); }
.gmx-nav-ic svg { width: 24px; height: 24px; }
.gmx-nav-lbl { flex: 1 1 auto; line-height: 1.25; }
.gmx-nav-meta { color: var(--sand, #565A60); font-size: .9rem; white-space: nowrap; }
.gmx-nav-chev { width: 20px; height: 20px; flex: 0 0 auto; color: var(--sand, var(--gray-text)); }
.gmx-nav-cat .gmx-nav-lbl { font-weight: 600; }
.gmx-nav-emph .gmx-nav-lbl { color: var(--purple, #1A1A1A); font-weight: 700; }
.gmx-nav-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
font: inherit; font-size: .95rem; font-weight: 600; color: var(--purple, #1A1A1A); padding: 6px 4px; margin-bottom: 4px; }
.gmx-nav-back svg { width: 20px; height: 20px; }
.gmx-nav-cat-title { font-size: 1.35rem; font-weight: 700; color: var(--ink, #1A1A1A); margin: 2px 0 8px; padding: 0 4px; }
.gmx-nav-leaf { padding-left: 6px; }
.gmx-nav-leaf .gmx-nav-lbl { color: var(--ink, #1A1A1A); }
/* ─── SERIF EDITORIAL · tarjetas, catálogo y detalle (cliente 2026-08-23) ──────
REVIERTE la directiva del 2026-06-10, que mandaba estos títulos a Inter
sentence-case «más escaneable» cuando el objetivo era parecerse a
getyourguide.com. El cliente cambió de dirección: su mockup compone TODO
título en serif de texto, y esta regla era la única que lo impedía — es la
más específica y ganaba a las 90 pilas que ya apuntan al token.
El peso baja de 700 a 500: una serif de alto contraste en negrita se
emplasta a tamaño de tarjeta. El tracking pasa de -0.01em a 0: apretar una
serif le quita justo el aire que la hace editorial. */
.tour-card h3,
.hs-name, .hs-h,
.section-head h2,
.vp-head h2,
#tour-name,
.tsec-h {
font-family: var(--ff-serif);
text-transform: none;
letter-spacing: 0;
font-weight: 500;
color: var(--ink);
}
#tour-name { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.2; }
.tour-card-cat-label { font-family: var(--ff-caps); text-transform: uppercase;
letter-spacing: .16em; font-size: .62rem; color: var(--oro-texto); }
.tour-card-price .amount { font-family: var(--ff-serif); font-weight: 600; font-size: 1.22em; }
/* Mobile topbar guard · sibling pages inject desktop search, but mobile keeps
navigation compact to avoid horizontal overflow. */
@media (max-width: 880px) {
.topbar-search { display: none !important; }
.topbar .brand-logo {
/* aspecto-preservado (wordmark 9.23:1) · ver nota en home .brand-logo */
height: auto;
max-height: 28px;
width: auto;
max-width: min(240px, 66vw);
object-fit: contain;
}
.topbar .topbar-actions { gap: 2px; }
.topbar .topbar-icon { padding: 6px; }
.topbar-inner { overflow: hidden; }
}
/* About header alignment · injected search + panoramic logo guard */
body[data-page="about"] .topbar-inner {
display: grid !important;
grid-template-columns: minmax(150px, 220px) minmax(220px, 560px) auto;
align-items: center;
gap: clamp(10px, 1.5vw, 18px);
overflow: visible;
}
body[data-page="about"] .topbar .brand {
min-width: 0;
}
body[data-page="about"] .topbar .brand-logo {
width: min(210px, 22vw);
height: auto;
max-height: 28px;
object-fit: contain;
}
body[data-page="about"] .topbar-search {
width: 100%;
min-width: 0;
max-width: none;
justify-self: stretch;
}
body[data-page="about"] .topbar-search input {
min-width: 0;
text-overflow: ellipsis;
}
body[data-page="about"] .topbar .topbar-actions {
justify-content: flex-end;
min-width: max-content;
}
@media (min-width: 881px) and (max-width: 1100px) {
body[data-page="about"] .topbar-inner {
grid-template-columns: minmax(128px, 170px) minmax(180px, 1fr) auto;
gap: 8px;
}
body[data-page="about"] .topbar .brand-logo {
width: min(170px, 18vw);
max-height: 24px;
}
body[data-page="about"] .topbar .topbar-icon {
width: 38px;
height: 38px;
}
}
@media (max-width: 880px) {
body[data-page="about"] .topbar-inner {
display: flex !important;
overflow: hidden;
}
body[data-page="about"] .topbar .brand-logo {
width: min(172px, 44vw);
max-height: 26px;
}
body[data-page="about"] .topbar .topbar-actions {
margin-left: auto;
min-width: 0;
}
}
/* Paid-social mobile app shell · Meta/Instagram/TikTok in-app browsers */
.gmx-mobile-nav { display: none; }
@media (max-width: 760px) {
html, body[data-page="home"] {
max-width: 100%;
overflow-x: clip;
}
body.gmx-search-open {
overflow: hidden;
overscroll-behavior: none;
}
.gmx-tags-tab { min-height: 44px; padding-block: 8px 12px; }
.tc-tag { min-height: 40px; padding: 8px 12px; }
.site-foot a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
.topbar .brand, .vp-more, .th-share, .back-link, .cronica-back { min-height: 44px; }
.gf-chip, .mundial-anchors a, .calendar-month-select,
.ff-link, .activities-sync-clear, .reviews-sort { min-height: 44px; }
/* 44px, no 40: estas dos líneas forzaban 40px con !important TRES líneas debajo
del bloque que declara min-height:44px para todos los demás controles — el
propio estándar de este archivo se contradecía, y en un mapa el toque
impreciso hace zoom sin querer o abre el marcador vecino. Los márgenes
negativos se ajustan a -22px para que el marcador siga centrado en su punto. */
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
.leaflet-marker-icon.gmx-divicon { width: 44px !important; height: 44px !important; margin-left: -22px !important; margin-top: -22px !important; }
body.gmx-booking-pop-open { overflow: hidden; }
body.gmx-booking-pop-open::after {
content: "";
position: fixed;
inset: 0;
z-index: 109;
/* BUG FIX (Bug 2 mobile ≤760px): removed backdrop-filter:blur — it caused
the page to appear transparent/ghosted on iOS Safari when calendar is open. */
background: rgba(8,23,38,.52);
}
body.gmx-booking-pop-open .mobile-cta,
body.gmx-booking-pop-open .wa-fab { display: none !important; }
body.gmx-search-open::before {
content: "";
position: fixed;
inset: 0;
z-index: 1100;
background: rgba(8,23,38,.58);
backdrop-filter: blur(3px);
}
body.gmx-search-open .hero,
body.gmx-search-open .hero-content {
isolation: auto !important;
z-index: auto !important;
}
body[data-page="home"] .hero-search.is-open {
position: fixed;
top: calc(10px + env(safe-area-inset-top));
left: 10px;
right: 10px;
width: auto;
max-width: none;
margin: 0;
z-index: 1101 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body[data-page="home"] .hero-search.is-open .hero-search-input {
min-height: 56px;
border: 1px solid var(--gyg-line, #d9d9d9);
box-shadow: 0 8px 28px rgba(8,23,38,.20) !important;
}
body[data-page="home"] .hero-search.is-open::before {
top: 28px;
}
body[data-page="home"] .hero-search.is-open .hero-search-results {
position: static;
width: 100%;
box-sizing: border-box;
max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
margin-top: 8px;
border: 1px solid var(--gyg-line-soft, #ececec);
border-radius: 12px;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: 0 18px 48px rgba(8,23,38,.28);
-webkit-overflow-scrolling: touch;
}
.hero-search.is-open .hsr-item {
min-height: 68px;
padding: 10px 12px;
}
.hero-search.is-open .hsr-thumb {
width: 52px;
height: 52px;
flex-basis: 52px;
border-radius: 6px;
}
body.gmx-inapp-browser .topbar {
padding-top: env(safe-area-inset-top);
}
body.gmx-mobile-nav-ready {
padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
body[data-page="tour"].gmx-mobile-nav-ready {
padding-bottom: calc(148px + env(safe-area-inset-bottom));
}
body[data-page="login"] .wa-fab,
body[data-page="tour"].gmx-mobile-nav-ready .wa-fab {
bottom: calc(150px + env(safe-area-inset-bottom));
}
body.gmx-mobile-nav-ready .topbar-inner {
min-height: 56px;
justify-content: center;
position: relative;
}
body.gmx-mobile-nav-ready .topbar .topbar-actions {
display: none !important;
}
body.gmx-mobile-nav-ready .topbar-burger {
position: absolute;
left: 12px;
}
body.gmx-mobile-nav-ready .topbar .brand {
margin-inline: auto;
}
body.gmx-mobile-nav-ready .topbar .brand-logo {
/* aspecto-preservado (wordmark 9.23:1) · ver nota en home .brand-logo */
height: auto;
max-height: 28px;
width: auto;
max-width: min(240px, 66vw);
object-fit: contain;
}
body.gmx-mobile-nav-ready .topbar.is-scrolled .topbar-inner {
display: grid !important;
grid-template-columns: 44px minmax(84px, 26vw) minmax(0, 1fr);
gap: 8px;
width: 100% !important;
max-width: none;
padding-inline: 10px;
box-sizing: border-box;
justify-content: stretch;
}
body.gmx-mobile-nav-ready .topbar.is-scrolled .topbar-burger {
position: static;
width: 44px;
height: 44px;
}
body.gmx-mobile-nav-ready .topbar.is-scrolled .brand {
width: 100%;
min-width: 0;
margin: 0;
overflow: hidden;
justify-content: flex-start;
}
body.gmx-mobile-nav-ready .topbar.is-scrolled .brand-logo {
width: 100%;
max-width: 132px;
max-height: 24px;
object-fit: contain;
object-position: left center;
}
body.gmx-mobile-nav-ready .topbar.is-scrolled .topbar-search {
width: 100%;
min-width: 0;
max-width: none;
padding: 9px 10px;
gap: 7px;
box-sizing: border-box;
}
.gmx-mobile-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 88;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
min-height: calc(62px + env(safe-area-inset-bottom));
padding: 4px 4px env(safe-area-inset-bottom);
background: rgba(255,255,255,.98);
border-top: 1px solid var(--line-soft, #e6e6e6);
box-shadow: 0 -8px 24px rgba(26, 26, 26,.10);
backdrop-filter: blur(12px);
box-sizing: border-box;
width: 100%;
max-width: 100vw;
}
.gmx-mobile-nav-item {
position: relative;
min-width: 0;
min-height: 54px;
padding: 5px 2px 3px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--sand, #565A60);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
text-decoration: none;
font: 500 9.5px/1.1 var(--ff-body);
letter-spacing: .06em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.gmx-mobile-nav-item:active,
.gmx-mobile-nav-item.is-active {
/* EDITORIAL 2026-08-23 · el mockup marca la pestaña activa SÓLO con color:
ni píldora ni relleno. El rgba que había era el morado retirado al 6% y
se veía como una mancha lavanda bajo «Inicio».
El texto va en oro-texto (4.50:1) y NO en el oro del mockup, que sobre
hueso mide 2.69:1 y es ilegible a 10px. El pictograma puede ir en
oro-ui: 3.00:1 es el umbral de componente de interfaz, no de texto. */
color: var(--oro-texto);
background: transparent;
}
.gmx-mobile-nav-item.is-active svg { stroke: var(--oro-ui); }
.gmx-mobile-nav-item svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.gmx-mobile-nav-fav img {
width: 25px;
height: 22px;
object-fit: contain;
}
.gmx-mobile-nav-badge {
position: absolute;
top: 2px;
left: calc(50% + 8px);
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9px;
background: var(--brand-red, #1A1A1A);
color: #fff;
display: grid;
place-items: center;
font-size: 9px;
line-height: 1;
}
.gmx-mobile-nav-badge[hidden] { display: none; }
.vp-grid { grid-template-columns: 1fr; gap: 20px; }
.vp-item { gap: 14px; }
.vp-ic-mascot { width: 60px; height: 60px; flex-basis: 60px; }
.drawer-empty .empty-illustration {
max-width: min(148px, 44vw);
height: auto;
}
}
@media (display-mode: standalone) and (max-width: 760px) {
.gmx-mobile-nav { background: #fff; }
}
/* PWA · banner de instalación (A2HS) · pwa.js */
.gmx-install-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 300; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 520px; margin: 0 auto; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(26,10,28,.2); transform: translateY(150%); transition: transform .35s var(--ease); }
.gmx-install-bar.is-in { transform: none; }
.gmx-install-txt { font-size: .9rem; color: var(--ink); line-height: 1.3; }
.gmx-install-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gmx-install-bar .btn { padding: 8px 16px; }
.gmx-install-x { border: none; background: none; font-size: 1.4rem; color: var(--sand); cursor: pointer; line-height: 1; padding: 0 4px; }
/* Social proof honesto · agregado real de reseñas (D2) */
.gmx-social-proof { text-align: center; font-size: .95rem; color: var(--terra); font-weight: 600; margin: 0 0 22px; letter-spacing: .01em; }
.gmx-social-proof[hidden] { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
Telón de marca · vive aquí y no incrustado en index.html
───────────────────────────────────────────────────────────────────────────
Estaba en un