/* 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;
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;
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;
}
/* Cinzel 500 latin-ext */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/Cinzel-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;
}
/* Cinzel 500 latin */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/Cinzel-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;
}
/* Cinzel 600 latin-ext */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/Cinzel-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;
}
/* Cinzel 600 latin */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/Cinzel-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;
}
/* Cinzel 700 latin-ext */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/Cinzel-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;
}
/* Cinzel 700 latin */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/Cinzel-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;
}
/* Inter 400 latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
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: 400;
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;
}
/* Inter 500 latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/Inter-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;
}
/* Inter 500 latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/Inter-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;
}
/* Inter 600 latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/Inter-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;
}
/* Inter 600 latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/Inter-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 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 */
:root {
/* ── GYG-clean palette (v=29 · 2026-05-31 · client directive) ──
* Cliente pidió que se vea EXACTLY como getyourguide.com · limpio, blanco
* dominante, profesional. Mexican echo solo en logo + slogan. Los tokens
* mexicanos viejos (purple #DC2527 como dominante, cream-pink bg) se
* convierten en ACENTOS suaves · jamás dominantes.
*
* GYG real palette analysis (homepage screenshot):
* - Background: pure white #FFFFFF
* - Primary CTA: Guidemexx purple (brand-restored) (GYG blue · also their orange logo)
* - Text body: near-black #18313F · text secondary #565A60
* - Borders: light grey #DDDDDD / #ECECEC
* - Hover: subtle grey #F5F5F5 background
* Mexican echo we KEEP (small accents only):
* - Coral #FF958E para favorite hearts + Originals badge
* - Yellow #FEFC8B para star ratings
* - Purple #DC2527 para mundial pill only · NOT body */
/* Brand-restored 2026-06-06 · the primary accent token (historically the GYG
blue) now carries Guidemexx PURPLE so every CTA/hover/active is on-brand
while the clean GYG layout is kept. One disciplined accent, like the faros. */
--gyg-blue: #DC2527; /* CTA primary · Guidemexx purple (brand) */
--gyg-blue-dk: #B81E20; /* CTA hover · purple-dk */
--gyg-ink: #18313F; /* near-black · body text · GYG-faithful */
--gyg-ink-soft: #565A60; /* secondary text · helpers */
--gyg-line: #DDDDDD; /* border default */
--gyg-line-soft: #ECECEC; /* divider light */
--gyg-bg: #FFFFFF; /* page bg */
--gyg-bg-hover: #F5F5F5; /* hover bg + section alt */
--gyg-bg-card: #FFFFFF; /* card bg */
/* ── Paleta de marca oficial Guidemexx (doc 2026-06-14) ── */
--brand-red: #DC2527; /* rojo oficial */
--brand-teal: #1A5E69; /* teal oficial · contornos/acento */
--brand-cream: #F9E7D2; /* crema oficial · fondos cálidos de sección */
--purple: #DC2527; /* brand red (alias histórico) */
--purple-dk: #B81E20;
--coral: #FF958E; /* favorite heart + Originals badge only */
--coral-dk: #F26E66;
--yellow: #FEFC8B; /* star ratings only */
--pink: #FFECFA; /* unused in GYG-clean · kept for opt-in theme */
/* ── Decoration legacy (greca/glyph) · NOT used in GYG-clean ── */
--teal: #1A5E69;
--orange: #FE7E3C;
--green: #A8D88A;
/* ── 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(24,49,63,.08);
--shadow-sm: 0 2px 6px rgba(24,49,63,.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);
--accent-secondary:#D9534F; /* coral-AA · WCAG 4.5:1 vs #fff · rank #15 fix */
--accent-glow: var(--teal);
--success: #1FB58F; /* jade pre-Códice, WCAG-AA on cream */
--danger: #C8334D; /* cochinilla · errors + Last-available */
--warning: var(--orange);
--highlight: var(--yellow);
--line-semantic: var(--line);
--border-glow: var(--purple);
}
/* ── 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;
}
body {
font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
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;
}
h1, h2, h3, .display {
font-family: 'Copperplate', 'Cinzel', Georgia, serif;
font-weight: 600;
letter-spacing: .02em;
line-height: 1.18;
color: var(--terra);
}
.eyebrow {
font-family: 'Copperplate', 'Cinzel', serif;
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: 'Copperplate', 'Cinzel', serif; 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; }
.hero-slogan-sutil {
font-family: 'Copperplate', 'Cinzel', serif;
color: rgba(255,255,255,.88); font-size: clamp(.78rem, 1.1vw, .95rem);
letter-spacing: .34em; margin: 0 0 8px;
text-shadow: 0 1px 8px rgba(30,12,12,.5);
}
.hero-slogan-sutil span { color: var(--coral); }
.hero h1.hero-line {
/* La foto es la protagonista: una sola línea funcional y compacta;
el slogan de marca vive en el footer. */
color: #fff; font-size: clamp(1.05rem, 1.7vw, 1.4rem);
font-weight: 500; max-width: 52ch; margin: 0;
line-height: 1.35; letter-spacing: .015em;
text-shadow: 0 1px 10px rgba(30,12,12,.45);
}
/* Sprint-1 · hero destination chips (item 2) */
.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);
}
.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: 'Inter', sans-serif; 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: 'Copperplate', 'Cinzel', serif;
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: color-mix(in srgb, var(--yellow) 60%, var(--terra)); 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: 'Cinzel', 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: 'Cinzel', 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: color-mix(in srgb, var(--yellow) 60%, var(--terra)); 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: 'Copperplate', 'Cinzel', serif;
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: 'Copperplate', 'Cinzel', serif;
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; }
.vibe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 26px; margin: 0 auto; }
.vibe-pillar { display: flex; gap: 18px; align-items: center; }
/* 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 */
.vibe-ic { width: 46px; height: 46px; flex: 0 0 auto; object-fit: contain; box-sizing: border-box; padding: 7px; border-radius: 50%; background: var(--cream-deep); }
.vibe-pt h3 { font-family: 'Cinzel', Georgia, serif; font-size: .94rem; color: var(--terra); margin: 0 0 2px; }
.vibe-pt p { color: var(--sand); line-height: 1.4; font-size: .8rem; margin: 0; }
@media (max-width: 760px) {
.vibe-sec { padding: 10px 0 8px; }
.vibe-title { font-family: 'Copperplate', 'Cinzel', serif; letter-spacing: .08em; }
/* USP-bar de una fila deslizable: icono + título; descripciones solo desktop */
.vibe-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.vibe-grid::-webkit-scrollbar { display: none; }
.vibe-pillar { flex: 0 0 auto; border: 1px solid var(--line-soft); border-radius: 999px; padding: 6px 16px 6px 8px; gap: 8px; }
.vibe-ic { width: 30px; height: 30px; padding: 4px; }
.vibe-pt h3 { font-size: .8rem; margin: 0; white-space: nowrap; }
.vibe-pt p { display: none; }
.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, #DC2527); 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-guidemexx.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(136,43,142,.85); color: #fff;
font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
padding: 5px 12px; border-radius: 999px; font-weight: 600;
font-family: 'Copperplate', 'Cinzel', serif;
}
.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: 'Copperplate', 'Cinzel', serif; 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); 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); }
.tour-card-cat-label { font-family: 'Copperplate', 'Cinzel', serif; 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;
background: var(--brand-red, var(--terra)); color: #fff;
font-weight: 700; 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);
}
.tour-card-book-cta:hover { background: var(--brand-red-dk, var(--coral-dk)); }
.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 { color: var(--gyg-blue, #0a84ff); border-bottom-color: var(--gyg-blue, #0a84ff); }
.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, #DC2527); color: #fff; border-color: var(--purple, #DC2527); }
.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, #DC2527); border-style: dashed; font-weight: 700; }
.gmx-tag-toggle:hover { background: var(--pink, #FFECFA); }
.gmx-tag.active:hover { color: #fff; border-color: var(--purple-dk, #B81E20); background: var(--purple-dk, #B81E20); }
/* ── 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, #DC2527); background: var(--pink, #FFECFA); color: var(--purple, #DC2527);
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, #DC2527); 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, #DC2527); }
.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: 'Copperplate', 'Cinzel', serif; 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, #FCEAF6) 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, #FCEAF6) 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); }
/* 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: 'Cinzel', Georgia, 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, #4A1E50) 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: 'Cinzel', Georgia, 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 */
html:not([data-theme="palacio"]) .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: 'Cinzel', Georgia, 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: 'Copperplate', 'Cinzel', serif; 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: 'Cinzel', Georgia, 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: 'Copperplate', 'Cinzel', serif; 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, #4A1E50));
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: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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: 'Copperplate', 'Cinzel', serif; 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); }
.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); 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(136,43,142,.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: 'Cinzel', 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(136, 43, 142, .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: 'Copperplate', 'Cinzel', serif;
font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
color: var(--purple); margin-bottom: 18px;
border-top: 1px solid var(--purple); padding-top: 12px;
}
.ed-hero h1 {
font-family: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, serif;
font-size: 1.16rem; color: var(--ink);
font-weight: 600; margin: 6px 0 0;
}
.ed-person-meta {
font-family: 'Copperplate', 'Cinzel', serif;
font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--coral-dk); 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(136, 43, 142, .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: 'Copperplate', 'Cinzel', serif;
font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--purple); font-weight: 600;
}
.ed-region-body h3 {
font-family: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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: 'Copperplate', 'Cinzel', serif;
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: 'Copperplate', 'Cinzel', serif;
font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--coral-dk); font-weight: 600;
}
.ed-article h3 {
font-family: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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: 'Copperplate', 'Cinzel', serif;
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: 'Copperplate', 'Cinzel', serif;
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: 'Inter', sans-serif;
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(136,43,142,.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: 'Copperplate', 'Cinzel', serif;
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, #F9E7D2); color: var(--brand-teal, #1A5E69); 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: 'Copperplate', 'Cinzel', serif;
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: 'Copperplate', 'Cinzel', serif;
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-guidemexx.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: #70757a; 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); }
.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: 'Cinzel', Georgia, 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); 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);
}
.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(136,43,142,.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, #d97570));
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(136,43,142,.4); transition: color .18s ease, transform .18s ease;
box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.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, #d97570));
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: 'Cinzel', Georgia, 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; }
/* ─── 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 {
display: none;
width: 40px;
height: 40px;
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: 'Cinzel', Georgia, serif;
font-size: 1.15rem;
color: var(--purple);
}
.gmx-drawer-close {
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(136,43,142,.08);
color: var(--purple);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
font-family: inherit;
}
.gmx-drawer-close:hover { background: rgba(136,43,142,.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, #f4ecf2);
}
.gmx-drawer-card img {
width: 64px;
height: 64px;
border-radius: 8px;
object-fit: cover;
background: var(--pink-soft, #f4ecf2);
}
.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: 'Cinzel', Georgia, 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: 'Cinzel', Georgia, 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(136,43,142,.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(136,43,142,.06) !important;
border-color: rgba(136,43,142,.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, #f4ecf2);
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 {
/* Aztec palette accents · full palacio */
--cantera: #E8D4C8; /* cantera rosa (piedra volcánica) */
--cantera-dark: #B89483; /* cantera oscura */
--jade: #1B6E5C; /* piedra preciosa */
--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-soft: #ece5e9;
--line-line: #d6c9d2;
--surface-card: #fff;
--surface-elev: #fafafa;
--text-ink: var(--ink, #1a0e2a);
--text-muted: #565156;
--ink-illustration: #1a0e2a; /* SVG illustration outline · used in drawer empty-state via inline style */
--gold-star: #E8A23D; /* testimonial star rating · WCAG AA on white */
--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(136,43,142,.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(136,43,142,.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(24, 49, 63, .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(136,43,142,.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; }
.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(136,43,142,.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 {
font-family: 'Cinzel', 'Tenor Sans', Georgia, serif !important;
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 */
html:not([data-theme="palacio"]) .topbar {
border-image: none !important;
border-bottom: 1px solid var(--gyg-line) !important;
background: var(--gyg-bg) !important;
}
html:not([data-theme="palacio"]) .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 */
html:not([data-theme="palacio"]) .cta-band {
background: var(--gyg-bg-hover) !important;
color: var(--gyg-ink) !important;
}
html:not([data-theme="palacio"]) .cta-band h2,
html:not([data-theme="palacio"]) .cta-band p { color: var(--gyg-ink) !important; }
/* Botones primarios púrpura → GYG blue */
html:not([data-theme="palacio"]) .btn-primary {
background: var(--gyg-blue) !important;
color: #fff !important;
border-color: var(--gyg-blue) !important;
}
html:not([data-theme="palacio"]) .btn-primary:hover {
background: var(--gyg-blue-dk) !important;
border-color: var(--gyg-blue-dk) !important;
}
html:not([data-theme="palacio"]) .btn-ghost {
background: transparent !important;
color: var(--gyg-ink) !important;
border: 1px solid var(--gyg-line) !important;
}
html:not([data-theme="palacio"]) .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 */
html:not([data-theme="palacio"]) .hero-content h1::before {
display: none !important;
}
/* Hero h1 typography → Inter Bold (no Cinzel serif palacio) */
html:not([data-theme="palacio"]) .hero-content h1,
html:not([data-theme="palacio"]) .hero h1,
html:not([data-theme="palacio"]) h1.gyg-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: #fff !important;
}
html:not([data-theme="palacio"]) .hero-content h1 em,
html:not([data-theme="palacio"]) .hero h1 em {
font-style: normal !important;
color: var(--coral) !important; /* acento mexicano único · sutil */
}
html:not([data-theme="palacio"]) .hero-content h1 em::after {
display: none !important; /* sin greca underline decorativa */
}
/* Section headings · Inter Bold (no Cinzel) */
html:not([data-theme="palacio"]) .section-head h2,
html:not([data-theme="palacio"]) h2.gyg-h2 {
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 700 !important;
color: var(--gyg-ink) !important;
letter-spacing: -0.005em !important;
}
/* Cards · clean white surface · GYG-light shadow on hover */
html:not([data-theme="palacio"]) .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;
}
html:not([data-theme="palacio"]) .tour-card:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 24px rgba(24,49,63,.10) !important;
border-color: var(--gyg-line) !important;
}
html:not([data-theme="palacio"]) .tour-card-greca,
html:not([data-theme="palacio"]) .palacio-divider,
html:not([data-theme="palacio"]) .palacio-bg {
display: none !important;
}
/* Body / page background · pure white (no cream/pink) */
html:not([data-theme="palacio"]) body {
background: var(--gyg-bg) !important;
color: var(--gyg-ink) !important;
}
/* Trust strip · light grey divider strip · no coral border */
html:not([data-theme="palacio"]) .trust-strip,
html:not([data-theme="palacio"]) .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 */
html:not([data-theme="palacio"]) .is-mundial,
html:not([data-theme="palacio"]) .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 */
html:not([data-theme="palacio"]) .topbar-subnav .mega-trigger {
color: var(--gyg-ink) !important;
font-weight: 600 !important;
}
html:not([data-theme="palacio"]) .topbar-subnav .mega-trigger:hover {
color: var(--gyg-blue) !important;
}
/* Search bar · GYG-style rounded white with soft border */
html:not([data-theme="palacio"]) .topbar-search,
html:not([data-theme="palacio"]) .hero-search {
background: #fff !important;
border: 1px solid var(--gyg-line) !important;
box-shadow: 0 1px 3px rgba(24,49,63,.04) !important;
}
html:not([data-theme="palacio"]) .topbar-search:focus-within,
html:not([data-theme="palacio"]) .hero-search:focus-within {
border-color: var(--gyg-ink) !important;
box-shadow: 0 4px 12px rgba(24,49,63,.10) !important;
}
/* WhatsApp FAB · keep brand green (not mexican-purple) */
html:not([data-theme="palacio"]) .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.
───────────────────────────────────────────────────────────────────── */
html:not([data-theme="palacio"]) {
--radius: 8px;
--radius-sm: 8px;
}
html:not([data-theme="palacio"]) .container {
width: min(var(--maxw), 100% - 32px);
}
html:not([data-theme="palacio"]) body[data-page="home"] .greca,
html:not([data-theme="palacio"]) body[data-page="home"] .hero-cta,
html:not([data-theme="palacio"]) body[data-page="home"] .why-video {
display: none !important;
}
html:not([data-theme="palacio"]) body[data-page="home"] .topbar {
position: sticky;
top: 0;
background: rgba(255,255,255,.96) !important;
backdrop-filter: blur(18px);
}
html:not([data-theme="palacio"]) body[data-page="home"] .topbar-inner {
min-height: 66px;
}
html:not([data-theme="palacio"]) body[data-page="home"] .brand-logo {
height: 30px;
}
html:not([data-theme="palacio"]) 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;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-media video {
display: block !important;
width: 100%;
height: 100%;
object-fit: cover;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-media img {
display: none !important;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 44%;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-media::after {
background: linear-gradient(0deg, rgba(30,12,12,.52) 0%, rgba(30,12,12,0) 40%);
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-content {
padding: 0 0 44px;
max-width: 710px;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero .eyebrow {
color: #fff !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: .9rem;
font-weight: 700;
letter-spacing: .02em;
text-transform: none;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero h1 {
/* La foto del hero es la protagonista: una sola línea funcional compacta. */
max-width: 52ch;
margin-top: 0;
font-size: clamp(1.02rem, 1.6vw, 1.35rem);
line-height: 1.4;
letter-spacing: .015em !important;
text-wrap: balance;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero h1 em {
color: #fff !important;
}
html:not([data-theme="palacio"]) 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;
}
html:not([data-theme="palacio"]) 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;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-search-results {
z-index: 82;
color: var(--gyg-ink, #18313F);
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-search-results .hsr-item,
html:not([data-theme="palacio"]) body[data-page="home"] .hero-search-results .hsr-title {
color: var(--gyg-ink, #18313F);
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-search-results .hsr-meta,
html:not([data-theme="palacio"]) body[data-page="home"] .hero-search-results .hsr-empty,
html:not([data-theme="palacio"]) 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;
}
html:not([data-theme="palacio"]) 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%);
}
html:not([data-theme="palacio"]) 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;
}
html:not([data-theme="palacio"]) body[data-page="home"] .trust-strip {
background: #fff !important;
}
html:not([data-theme="palacio"]) body[data-page="home"] .trust-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
padding: 14px 0;
}
html:not([data-theme="palacio"]) body[data-page="home"] .trust-item {
justify-content: center;
min-width: 0;
padding: 4px 12px;
color: var(--gyg-ink);
font-size: .88rem;
}
html:not([data-theme="palacio"]) body[data-page="home"] .trust-ic {
color: var(--gyg-blue);
}
html:not([data-theme="palacio"]) body[data-page="home"] main#explorar {
padding-top: 18px;
}
html:not([data-theme="palacio"]) body[data-page="home"] .section-head {
margin: 28px 0 18px;
}
html:not([data-theme="palacio"]) body[data-page="home"] .section-head .eyebrow {
color: var(--gyg-blue);
font-family: 'Inter', -apple-system, sans-serif;
font-size: .78rem;
letter-spacing: .08em;
}
html:not([data-theme="palacio"]) body[data-page="home"] .section-head h2 {
font-size: clamp(1.75rem, 4.5vw, 2.65rem);
letter-spacing: 0 !important;
}
html:not([data-theme="palacio"]) 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);
}
html:not([data-theme="palacio"]) 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;
}
html:not([data-theme="palacio"]) body[data-page="home"] .region-seg-btn {
color: var(--gyg-ink);
}
html:not([data-theme="palacio"]) body[data-page="home"] .region-seg-btn.active {
background: var(--gyg-ink) !important;
color: #fff !important;
}
html:not([data-theme="palacio"]) body[data-page="home"] .tour-grid {
gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
html:not([data-theme="palacio"]) body[data-page="home"] .tour-card,
html:not([data-theme="palacio"]) body[data-page="home"] .testi-card {
border-radius: 8px !important;
}
html:not([data-theme="palacio"]) body[data-page="home"] .tour-card-media {
aspect-ratio: 16 / 11;
}
html:not([data-theme="palacio"]) 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) {
html:not([data-theme="palacio"]) body[data-page="home"] .tour-card-body { padding: 12px 14px 14px; gap: 5px; }
html:not([data-theme="palacio"]) body[data-page="home"] .tour-card-foot { margin-top: 6px; padding-top: 10px; }
html:not([data-theme="palacio"]) body[data-page="home"] .tour-card-meta-line { margin-top: 0; }
html:not([data-theme="palacio"]) body[data-page="home"] .tour-card-book-cta { padding: 11px 16px; margin-top: 2px; }
}
html:not([data-theme="palacio"]) body[data-page="home"] .tour-card h3 {
font-size: 1.02rem;
line-height: 1.28;
}
html:not([data-theme="palacio"]) 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. */
html:not([data-theme="palacio"]) body[data-page="home"] .cta-band {
margin-top: 0;
border-top: 1px solid var(--gyg-line-soft);
}
@media (max-width: 880px) {
html:not([data-theme="palacio"]) body[data-page="home"] .container {
width: min(100% - 28px, var(--maxw));
}
html:not([data-theme="palacio"]) body[data-page="home"] .topbar-inner {
min-height: 58px;
padding-block: 8px;
gap: 8px;
}
html:not([data-theme="palacio"]) 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;
}
html:not([data-theme="palacio"]) body[data-page="home"] .topbar-actions {
gap: 2px;
}
html:not([data-theme="palacio"]) body[data-page="home"] .topbar-icon {
width: 40px;
height: 40px;
}
html:not([data-theme="palacio"]) 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. */
html:not([data-theme="palacio"]) body[data-page="home"] .hero-media { overflow: hidden; }
html:not([data-theme="palacio"]) body[data-page="home"] .hero-media video { display: none !important; }
html:not([data-theme="palacio"]) 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%;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-media::after {
background: linear-gradient(0deg, rgba(30,12,12,.52) 0%, rgba(30,12,12,0) 40%);
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-content {
padding: 36px 0 max(26px, env(safe-area-inset-bottom));
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero h1 {
max-width: 34ch;
font-size: clamp(1rem, 4.4vw, 1.2rem);
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero p {
max-width: 31ch;
font-size: 1rem;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-search {
width: 100%;
max-width: none;
margin-top: 22px;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-search-input {
min-height: 58px;
font-size: 1rem;
padding-right: 20px;
}
html:not([data-theme="palacio"]) body[data-page="home"] .trust-row {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 12px 0;
scroll-snap-type: x proximity;
}
html:not([data-theme="palacio"]) 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;
}
html:not([data-theme="palacio"]) body[data-page="home"] .catalog-bar {
top: 58px;
margin-inline: -14px;
padding-inline: 14px;
}
html:not([data-theme="palacio"]) 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: #70757a; 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(136,43,142,.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: #9aa0a6; 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, #ffecfa); 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: #1a7f5a; display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; }
.tc-trust::before { content: "✓"; font-weight: 700; color: #1a7f5a; }
/* 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, #DC2527); color: #fff; border-color: var(--purple, #DC2527); }
.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: #f5b301; }
.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: #70757a; }
/* ── 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: #1a7f5a; 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, #ffecfa); color: var(--purple, #DC2527);
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: #f5b301; 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: #9aa0a6; }
/* ── 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: 'Cinzel', serif; font-size: 2.1rem; margin: 6px 0 10px; color: var(--terra, #DC2527); }
.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, #DC2527); color: #fff; border-color: var(--purple); }
.guias-count { max-width: 980px; margin: 0 auto 10px; color: #70757a; 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: #9aa0a6; 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: #f5b301; 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, #DC2527); background: var(--pink, #ffecfa); 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, #DC2527) !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: 'Cinzel', serif; font-size: 1.7rem; color: var(--purple, #DC2527); 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, #18313F);
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, #DC2527); }
.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, #DC2527); }
.cc-clear:hover { border-color: var(--purple, #DC2527); }
.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, #DC2527); color: #fff; font-size: .72rem; font-weight: 700; }
.tcg-name { font-size: .82rem; color: var(--ink, #18313F); 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: #1a7f5a; font-weight: 700; font-size: .8rem; }
.tour-card-private { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem;
color: var(--purple, #DC2527); 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: #1a7f5a; 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, #18313F); }
@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, #18313F); }
.bk-ai-ic { flex: 0 0 auto; color: var(--purple, #DC2527); }
/* ── 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; }
#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(24, 49, 63, 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, #18313F); 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, #18313F); 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, #DC2527); }
.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, #9aa0a6); }
.gmx-nav-cat .gmx-nav-lbl { font-weight: 600; }
.gmx-nav-emph .gmx-nav-lbl { color: var(--purple, #DC2527); 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, #DC2527); 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, #18313F); margin: 2px 0 8px; padding: 0 4px; }
.gmx-nav-leaf { padding-left: 6px; }
.gmx-nav-leaf .gmx-nav-lbl { color: var(--ink, #18313F); }
/* ─── GYG sans-serif · cards · catálogo · tour-detail (Julio/cliente 2026-06-10) ──
Copperplate/Cinzel se quedan SOLO en hero + páginas editoriales (sobre/mundial/CTA).
Aquí los títulos de listado y detalle pasan a Inter sentence-case, más escaneable. */
.tour-card h3,
.hs-name, .hs-h,
.section-head h2,
.vp-head h2,
#tour-name,
.tsec-h {
font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
text-transform: none;
letter-spacing: -0.01em;
font-weight: 700;
color: var(--ink);
}
#tour-name { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.2; }
.tour-card-cat-label { font-family: 'Inter', sans-serif; }
.tour-card-price .amount { font-family: 'Inter', sans-serif; font-weight: 800; }
/* 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; }
.leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; }
.leaflet-marker-icon.gmx-divicon { width: 40px !important; height: 40px !important; margin-left: -20px !important; margin-top: -20px !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;
}
html:not([data-theme="palacio"]) 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;
}
html:not([data-theme="palacio"]) 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;
}
html:not([data-theme="palacio"]) body[data-page="home"] .hero-search.is-open::before {
top: 28px;
}
html:not([data-theme="palacio"]) 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(24,49,63,.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: 600 10px/1.1 'Inter', -apple-system, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.gmx-mobile-nav-item:active,
.gmx-mobile-nav-item.is-active {
color: var(--brand-red, #DC2527);
background: rgba(220,37,39,.06);
}
.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, #DC2527);
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; }