/* ═══════════════════════════════════════════════════════════════════ TURISTECH 2.0 — PREMIUM DESIGN LAYER (Sprint 1) Capa puramente visual: se carga DESPUÉS de todos los estilos de index.html. No define IDs, eventos ni lógica. Tema claro = predeterminado · Tema oscuro = html[data-theme="dark"] ═══════════════════════════════════════════════════════════════════ */ /* ── 1. DESIGN SYSTEM · tokens ─────────────────────────────────── */ :root { /* marca — FASE 1.3: unificado con el Design System oficial (--lx-* de registro) */ --tt-caribbean: #12C6B5; /* Primary Turquoise oficial */ --tt-caribbean-600: #0EA697; --tt-caribbean-700: #0B8478; --tt-caribbean-glow: #4FE0D2; --tt-ocean: #1B6FD1; /* Azul del gradiente turquesa→azul oficial (= --lx-blue de registro) */ --tt-ocean-900: #0F2747; /* = Primary Navy oficial */ --tt-deep: #04122b; --tt-sand: #F7F2E7; /* Ivory oficial */ --tt-sand-2: #efe6d4; --tt-gray: #f2f5f8; --tt-white: #ffffff; /* superficies y texto (tema claro) */ --tt-bg: #ffffff; --tt-bg-alt: var(--tt-sand); --tt-surface: #ffffff; --tt-surface-2: var(--tt-gray); --tt-ink: #0F2747; /* Primary Navy oficial */ --tt-ink-2: #4a5d75; --tt-line: #E8E8E8; /* Border Gray oficial */ --tt-accent: var(--tt-caribbean); --tt-accent-ink:var(--tt-caribbean-700); /* tipografía — Fraunces para títulos, Inter para texto (Plus Jakarta Sans / DM Sans quedan fuera del sistema visual) */ --tt-font-display: 'Fraunces', 'Playfair Display', Georgia, serif; --tt-font-ui: 'Inter', system-ui, sans-serif; /* forma y sombra */ --tt-r-sm: 10px; --tt-r-input: 14px; --tt-r-md: 16px; --tt-r-lg: 24px; --tt-r-pill: 999px; --tt-sh-sm: 0 1px 2px rgba(12,35,64,.06), 0 2px 8px rgba(12,35,64,.05); --tt-sh-md: 0 6px 24px rgba(12,35,64,.10), 0 2px 6px rgba(12,35,64,.05); --tt-sh-lg: 0 24px 60px rgba(12,35,64,.16), 0 8px 20px rgba(12,35,64,.06); --tt-sh-glow: 0 10px 34px rgba(18,198,181,.30); --tt-ease: cubic-bezier(.22, 1, .36, 1); } html[data-theme="dark"] { --tt-bg: #04122b; --tt-bg-alt: #071a3d; --tt-surface: #0b2149; --tt-surface-2: #0e2a5a; --tt-ink: #ffffff; --tt-ink-2: #a9b9d6; --tt-line: rgba(255, 255, 255, .11); --tt-accent: var(--tt-caribbean-glow); --tt-accent-ink:var(--tt-caribbean-glow); --tt-sh-sm: 0 1px 2px rgba(0,0,0,.3); --tt-sh-md: 0 8px 28px rgba(0,0,0,.35); --tt-sh-lg: 0 26px 64px rgba(0,0,0,.5); --tt-sh-glow: 0 10px 34px rgba(79,224,210,.28); } /* Los tokens heredados (--deep, --mid, --text …) se re‑mapean solo en la zona pública. Paneles y modales conservan su paleta actual. */ :is(nav, .mobile-menu, #publicContent, #modalOverlay) { --deep: var(--tt-bg); --mid: var(--tt-bg-alt); --text: var(--tt-ink); --muted: var(--tt-ink-2); --card-bg: var(--tt-surface); --glass: color-mix(in srgb, var(--tt-ink) 4%, transparent); --glass2: color-mix(in srgb, var(--tt-ink) 8%, transparent); --border: var(--tt-line); --teal: var(--tt-accent); --ocean: var(--tt-ocean); } html[data-theme="dark"] :is(nav, .mobile-menu, #publicContent, #modalOverlay) { --ocean: #4d9bff; } #publicContent { background: var(--tt-bg); color: var(--tt-ink); font-family: var(--tt-font-ui); transition: background .4s var(--tt-ease), color .4s var(--tt-ease); } #publicContent p { color: var(--tt-ink-2); } #publicContent section { position: relative; } #publicContent h1, #publicContent h2, #publicContent h3, #publicContent h4 { color: var(--tt-ink); } /* Iconos Lucide (sustituyen emojis) */ .tt-ico { width: 1.15em; height: 1.15em; stroke-width: 1.9; vertical-align: -.2em; margin-inline-end: .45em; flex-shrink: 0; } .tt-ico:last-child { margin-inline-end: 0; } .tt-flag { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 18px; padding: 0 4px; border-radius: 5px; font: 800 .58rem/1 var(--tt-font-ui); letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, var(--tt-ocean), var(--tt-caribbean)); margin-inline-end: .5em; vertical-align: middle; } /* ── 2. Tipografía de sección ──────────────────────────────────── */ #publicContent .display-lg, #publicContent .exc-h2-premium { font-family: var(--tt-font-display) !important; font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.08 !important; color: var(--tt-ink) !important; font-size: clamp(2rem, 4.2vw, 3.2rem) !important; } #publicContent .gradient-text { background: linear-gradient(120deg, var(--tt-caribbean-600), var(--tt-ocean)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="dark"] #publicContent .gradient-text { background: linear-gradient(120deg, var(--tt-caribbean-glow), #7cc4ff) !important; -webkit-background-clip: text !important; background-clip: text !important; } #publicContent .section-head p, #publicContent .exc-subtitle-premium { color: var(--tt-ink-2) !important; max-width: 62ch; } #publicContent .pill { background: color-mix(in srgb, var(--tt-caribbean) 12%, transparent) !important; border: 1px solid color-mix(in srgb, var(--tt-caribbean) 30%, transparent) !important; color: var(--tt-accent-ink) !important; letter-spacing: .12em !important; font-weight: 700 !important; } #publicContent .pill .dot { background: var(--tt-caribbean) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tt-caribbean) 22%, transparent) !important; } /* ── 3. Botones — Botón Oficial: 54px de alto, radio completo ─────── */ .btn { font-family: var(--tt-font-ui) !important; transition: transform .25s var(--tt-ease), box-shadow .25s var(--tt-ease), background .25s var(--tt-ease), color .25s var(--tt-ease), border-color .25s var(--tt-ease) !important; } .btn-primary, #publicContent .btn-outline { min-height: 54px; } .btn-primary { background: linear-gradient(135deg, var(--tt-caribbean) 0%, var(--tt-ocean) 100%) !important; box-shadow: var(--tt-sh-glow) !important; } .btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 40px rgba(18,198,181,.42) !important; } #publicContent .btn-outline { color: var(--tt-ink) !important; background: transparent !important; border: 1.5px solid var(--tt-line) !important; box-shadow: none !important; } #publicContent .btn-outline:hover { border-color: var(--tt-caribbean) !important; color: var(--tt-accent-ink) !important; background: color-mix(in srgb, var(--tt-caribbean) 8%, transparent) !important; transform: translateY(-2px); } /* La navbar mantiene su botón compacto por diseño (no es el CTA de formulario) */ nav .btn-primary { min-height: auto; } /* ── 4. NAVBAR ─────────────────────────────────────────────────── */ nav { height: 76px !important; padding: 0 clamp(16px, 4.5vw, 64px) !important; background: linear-gradient(180deg, rgba(4,18,43,.55), rgba(4,18,43,0)) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; border-bottom: 1px solid transparent !important; box-shadow: none !important; transition: height .35s var(--tt-ease), background .35s var(--tt-ease), box-shadow .35s var(--tt-ease), border-color .35s var(--tt-ease), backdrop-filter .35s var(--tt-ease) !important; } nav .nav-links a, nav .nav-picker, nav .btn-ghost, nav #themeToggle { color: #fff !important; } nav .nav-links a { position: relative; font-weight: 600 !important; letter-spacing: .01em; opacity: .92; transition: opacity .2s, color .2s; } nav .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--tt-caribbean); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--tt-ease); } nav .nav-links a:hover { opacity: 1; } nav .nav-links a:hover::after, nav .nav-links a.active::after { transform: scaleX(1); } nav .nav-tagline { display: none !important; } nav a.nav-logo img.logo-img { height: 100px !important; width: 100px !important; margin: -28px 6px -28px -26px !important; max-width: none !important; filter: none !important; transition: height .35s var(--tt-ease), width .35s var(--tt-ease) !important; } nav .nav-picker { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: var(--tt-r-pill) !important; } nav .btn-primary { padding: 10px 22px !important; } nav .btn-ghost { background: transparent !important; border: 1px solid rgba(255,255,255,.3) !important; } nav .hamburger span { background: #fff !important; } nav.scrolled { height: 64px !important; background: color-mix(in srgb, var(--tt-bg) 84%, transparent) !important; -webkit-backdrop-filter: saturate(1.6) blur(18px) !important; backdrop-filter: saturate(1.6) blur(18px) !important; border-bottom: 1px solid var(--tt-line) !important; box-shadow: 0 8px 30px rgba(12,35,64,.08) !important; } nav.scrolled a.nav-logo img.logo-img { height: 88px !important; width: 88px !important; margin: -24px 6px -24px -22px !important; } nav.scrolled .nav-links a, nav.scrolled .nav-picker, nav.scrolled .btn-ghost, nav.scrolled #themeToggle { color: var(--tt-ink) !important; } nav.scrolled .nav-picker { background: var(--tt-surface-2) !important; border-color: var(--tt-line) !important; } nav.scrolled .btn-ghost { border-color: var(--tt-line) !important; } nav.scrolled .hamburger span { background: var(--tt-ink) !important; } nav .picker-dropdown { background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; box-shadow: var(--tt-sh-lg) !important; border-radius: var(--tt-r-md) !important; } nav .picker-dropdown .picker-opt { color: var(--tt-ink) !important; } nav .picker-dropdown .picker-opt:hover, nav .picker-dropdown .picker-opt.active { background: color-mix(in srgb, var(--tt-caribbean) 12%, transparent) !important; } #themeToggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 6px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); cursor: pointer; transition: transform .3s var(--tt-ease), background .25s, border-color .25s; } nav.scrolled #themeToggle { background: var(--tt-surface-2); border-color: var(--tt-line); } #themeToggle:hover { transform: rotate(18deg) scale(1.06); } #themeToggle svg { width: 18px; height: 18px; stroke-width: 2; } #themeToggle .ico-sun { display: none; } html[data-theme="dark"] #themeToggle .ico-sun { display: block; } html[data-theme="dark"] #themeToggle .ico-moon { display: none; } .mobile-menu { background: color-mix(in srgb, var(--tt-bg) 96%, transparent) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--tt-line) !important; } .mobile-menu a { color: var(--tt-ink) !important; font-family: var(--tt-font-ui); font-weight: 600; } .mobile-menu .mpicker-btn { background: var(--tt-surface-2) !important; color: var(--tt-ink) !important; border: 1px solid var(--tt-line) !important; } /* ── 5. HERO ───────────────────────────────────────────────────── */ #publicContent #hero.hero { position: relative !important; display: flex !important; align-items: flex-end !important; min-height: clamp(620px, 100svh, 900px) !important; padding: 150px clamp(20px, 6vw, 96px) 120px !important; background: var(--tt-deep) !important; overflow: hidden !important; isolation: isolate; } #publicContent #hero .hero-split-right { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; z-index: -2 !important; overflow: hidden !important; } #publicContent #hero .hero-split-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 60% 55% !important; border-radius: 0 !important; transform: scale(1.04); animation: ttKen 24s ease-in-out infinite alternate; filter: saturate(1.08) contrast(1.02); } @keyframes ttKen { to { transform: scale(1.12) translate3d(-1.2%, -1%, 0); } } #publicContent #hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(4,18,43,.84) 0%, rgba(4,18,43,.55) 38%, rgba(4,18,43,.08) 72%, rgba(4,18,43,0) 100%), linear-gradient(0deg, rgba(4,18,43,.72) 0%, rgba(4,18,43,0) 38%), linear-gradient(180deg, rgba(4,18,43,.55) 0%, rgba(4,18,43,0) 22%); } #publicContent #hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; z-index: -1; pointer-events: none; background: linear-gradient(0deg, var(--tt-bg), color-mix(in srgb, var(--tt-bg) 0%, transparent)); opacity: 0; } #publicContent #hero .hero-split-left { position: relative !important; z-index: 2 !important; width: min(720px, 100%) !important; max-width: 720px !important; padding: 0 !important; text-align: left !important; background: none !important; animation: ttRise .9s var(--tt-ease) both; } @keyframes ttRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } #publicContent #hero .hero-split-h1 { font-family: var(--tt-font-display) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: -.03em !important; margin: 0 0 22px !important; color: #fff !important; } #publicContent #hero .hero-line-1 { display: block; font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-family: var(--tt-font-ui); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--tt-caribbean-glow) !important; margin-bottom: 14px; -webkit-text-fill-color: var(--tt-caribbean-glow) !important; } #publicContent #hero .hero-line-2 { display: block; font-size: clamp(2.8rem, 7.2vw, 6rem); color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; } #publicContent #hero .hero-line-3 { display: block; font-size: clamp(1.6rem, 3.6vw, 2.9rem); font-style: italic; font-weight: 500; color: #f3e6c8 !important; -webkit-text-fill-color: #f3e6c8 !important; margin-top: 6px; } #publicContent #hero .hero-split-left > p { font-size: clamp(1rem, 1.35vw, 1.2rem) !important; line-height: 1.7 !important; color: rgba(255,255,255,.86) !important; max-width: 52ch; margin-bottom: 32px !important; } #publicContent #hero .hero-cta { gap: 14px !important; margin-bottom: 0 !important; } #publicContent #hero .hero-cta .btn { padding: 16px 30px !important; font-size: .95rem !important; } #publicContent #hero .hero-cta .btn-outline { color: #fff !important; border: 1.5px solid rgba(255,255,255,.55) !important; background: rgba(255,255,255,.10) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #publicContent #hero .hero-cta .btn-outline:hover { background: rgba(255,255,255,.22) !important; border-color: #fff !important; color: #fff !important; } #publicContent #hero .hero-trust-bar { display: flex !important; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px !important; font-size: .82rem !important; color: rgba(255,255,255,.85) !important; letter-spacing: .02em; } #publicContent #hero .htb-item { display: inline-flex; align-items: center; gap: 7px; } #publicContent #hero .htb-check { color: var(--tt-caribbean-glow) !important; } /* scroll cue */ #publicContent #hero .hero-split-left::after { content: ''; display: block; width: 1px; height: 54px; margin-top: 38px; background: linear-gradient(180deg, rgba(255,255,255,.7), transparent); animation: ttCue 2.4s ease-in-out infinite; } @keyframes ttCue { 0%,100% { transform: scaleY(.4); transform-origin: top; opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } } /* ── 6. BENEFICIOS ─────────────────────────────────────────────── */ #publicContent #beneficios.benefits-strip { background: transparent !important; margin-top: -72px !important; padding: 0 clamp(16px, 5vw, 72px) 20px !important; position: relative; z-index: 5; border: 0 !important; } #publicContent #beneficios .benefits-section-head { display: none; } #publicContent #beneficios .benefits-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; max-width: 1240px; margin: 0 auto; } #publicContent #beneficios .benefit-card { background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-lg) !important; padding: 26px 24px !important; box-shadow: var(--tt-sh-md) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; transition: transform .35s var(--tt-ease), box-shadow .35s var(--tt-ease), border-color .35s !important; } #publicContent #beneficios .benefit-card:hover { transform: translateY(-6px); box-shadow: var(--tt-sh-lg) !important; border-color: color-mix(in srgb, var(--tt-caribbean) 40%, transparent) !important; } #publicContent #beneficios .benefit-icon-wrap { width: 54px !important; height: 54px !important; border-radius: 16px !important; display: grid !important; place-items: center; color: #fff !important; background: linear-gradient(135deg, var(--tt-caribbean), var(--tt-ocean)) !important; box-shadow: var(--tt-sh-glow) !important; flex-shrink: 0; } #publicContent #beneficios .benefit-icon-wrap svg { width: 26px !important; height: 26px !important; stroke-width: 1.8 !important; } #publicContent #beneficios .benefit-title { font-family: var(--tt-font-display); font-size: 1.2rem !important; font-weight: 600 !important; color: var(--tt-ink) !important; letter-spacing: -.01em; margin-bottom: 4px; } #publicContent #beneficios .benefit-desc { font-size: .9rem !important; line-height: 1.6 !important; color: var(--tt-ink-2) !important; } /* ── 7. EXCURSIONES · cabecera, tabs, buscador ─────────────────── */ #publicContent #excursiones { background: var(--tt-bg) !important; padding-top: 96px !important; } #publicContent #excursiones .exc-head-row { align-items: flex-end !important; gap: 24px !important; } #publicContent #excursiones .exc-ver-todas { white-space: nowrap; } #publicContent #excursiones .section-tabs { display: flex !important; justify-content: flex-start !important; gap: 10px !important; padding: 6px 2px 14px !important; scrollbar-width: none; } #publicContent #excursiones .section-tabs::-webkit-scrollbar { display: none; } #publicContent #excursiones .section-tab { display: inline-flex !important; align-items: center; background: var(--tt-surface) !important; color: var(--tt-ink-2) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-pill) !important; padding: 10px 18px !important; font: 600 .84rem var(--tt-font-ui) !important; box-shadow: var(--tt-sh-sm); transition: all .25s var(--tt-ease) !important; } #publicContent #excursiones .section-tab:hover { color: var(--tt-accent-ink) !important; border-color: var(--tt-caribbean) !important; transform: translateY(-2px); } #publicContent #excursiones .section-tab.active { color: #fff !important; background: linear-gradient(135deg, var(--tt-caribbean-600), var(--tt-ocean)) !important; border-color: transparent !important; box-shadow: var(--tt-sh-glow); } #publicContent #excursiones .section-tab .tt-ico { width: 1.05em; height: 1.05em; margin-inline-end: .5em; } #publicContent #excursiones .exc-controls { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; width: 100%; max-width: none; gap: 12px !important; align-items: center; background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); padding: 10px !important; box-shadow: var(--tt-sh-md); margin: 10px 0 34px !important; } #publicContent #excursiones .exc-search-wrap { position: relative; flex: 1 1 340px !important; width: auto !important; max-width: none !important; } #publicContent #excursiones .exc-search-icon { position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%); color: var(--tt-caribbean-600) !important; width: 18px !important; height: 18px !important; pointer-events: none; } #publicContent #excursiones .exc-controls .form-input { background: var(--tt-surface-2) !important; color: var(--tt-ink) !important; border: 1.5px solid transparent !important; border-radius: var(--tt-r-input) !important; height: 54px; font: 500 .92rem var(--tt-font-ui) !important; transition: border-color .2s, box-shadow .2s, background .2s; } #publicContent #excursiones #exc-search { padding-left: 48px !important; width: 100%; } #publicContent #excursiones .exc-controls .form-input:focus { outline: none; border-color: var(--tt-caribbean) !important; background: var(--tt-surface) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tt-caribbean) 18%, transparent); } #publicContent #excursiones .exc-controls .form-input::placeholder { color: var(--tt-ink-2); opacity: .8; } #publicContent #excursiones .exc-filter-bar { display: flex !important; flex-wrap: wrap; gap: 10px !important; align-items: center; } #publicContent #excursiones .exc-filter-bar select.form-input { min-width: 190px; padding: 0 16px !important; } #publicContent #excursiones .exc-filter-clear { display: inline-flex; align-items: center; height: 54px; padding: 0 16px; border-radius: var(--tt-r-input); background: transparent; color: var(--tt-ink-2); border: 1px dashed var(--tt-line); font: 600 .84rem var(--tt-font-ui); } #publicContent #excursiones .exc-filter-clear:hover { color: #d33; border-color: #d33; } /* ── 8. TARJETAS DE EXCURSIÓN (Airbnb Experiences / GetYourGuide) ─ */ #publicContent #excursiones #excursionesGrid.grid-3, #publicContent #excursionesGrid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important; gap: 28px !important; justify-content: stretch !important; } #publicContent #excursionesGrid .card { position: relative; display: flex !important; flex-direction: column; background: var(--tt-surface) !important; color: var(--tt-ink) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-lg) !important; overflow: hidden !important; box-shadow: var(--tt-sh-sm) !important; transition: transform .45s var(--tt-ease), box-shadow .45s var(--tt-ease), border-color .3s !important; } #publicContent #excursionesGrid .card:hover { transform: translateY(-8px) !important; box-shadow: var(--tt-sh-lg) !important; border-color: color-mix(in srgb, var(--tt-caribbean) 35%, transparent) !important; } #publicContent #excursionesGrid .card-img-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tt-surface-2); } #publicContent #excursionesGrid .card-img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .9s var(--tt-ease) !important; } #publicContent #excursionesGrid .card:hover .card-img { transform: scale(1.08); } #publicContent #excursionesGrid .card-img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,18,43,.55), transparent 45%); pointer-events: none; opacity: .85; transition: opacity .4s; } #publicContent #excursionesGrid .card-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,.92) !important; color: var(--tt-ocean-900) !important; border: 0 !important; border-radius: var(--tt-r-pill) !important; padding: 6px 12px !important; font: 700 .68rem var(--tt-font-ui) !important; letter-spacing: .06em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #publicContent #excursionesGrid .role-badge { z-index: 2; border-radius: var(--tt-r-pill) !important; font: 700 .66rem var(--tt-font-ui) !important; background: rgba(4,18,43,.62) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #publicContent #excursionesGrid .card-status-overlay { z-index: 3; } #publicContent #excursionesGrid .card-body { display: flex !important; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 22px !important; } #publicContent #excursionesGrid .card-meta { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; font: 600 .78rem var(--tt-font-ui); } #publicContent #excursionesGrid .card-loc { display: inline-flex; align-items: center; gap: 5px; color: var(--tt-accent-ink) !important; } #publicContent #excursionesGrid .card-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--tt-ink) !important; font-weight: 700; } #publicContent #excursionesGrid .card-rating .tt-ico { color: #f5a623; fill: #f5a623; margin: 0; } #publicContent #excursionesGrid .card-title { font-family: var(--tt-font-display) !important; font-weight: 600 !important; font-size: 1.28rem !important; line-height: 1.22 !important; letter-spacing: -.015em; color: var(--tt-ink) !important; } #publicContent #excursionesGrid .exc-guide-line { color: var(--tt-ink-2) !important; font-size: .8rem !important; } #publicContent #excursionesGrid .exc-desc { color: var(--tt-ink-2) !important; font-size: .87rem !important; line-height: 1.6 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #publicContent #excursionesGrid .card-fecha-highlight { display: inline-flex; align-items: baseline; gap: 8px; align-self: flex-start; background: var(--tt-bg-alt) !important; border: 0 !important; border-radius: var(--tt-r-sm) !important; padding: 6px 12px !important; color: var(--tt-ink) !important; font-size: .75rem; } #publicContent #excursionesGrid .card-fecha-highlight .cfd-dia { font: 700 1.1rem var(--tt-font-display); color: var(--tt-ocean-900); } html[data-theme="dark"] #excursionesGrid .card-fecha-highlight .cfd-dia { color: var(--tt-caribbean-glow); } #publicContent #excursionesGrid .exc-amenities { display: flex; flex-wrap: wrap; gap: 6px; } #publicContent #excursionesGrid .exc-amenity-tag { background: var(--tt-surface-2) !important; color: var(--tt-ink-2) !important; border: 0 !important; border-radius: var(--tt-r-pill) !important; padding: 4px 10px !important; font: 600 .7rem var(--tt-font-ui) !important; } #publicContent #excursionesGrid .exc-details-row { display: flex !important; flex-wrap: wrap; gap: 14px; padding-top: 12px; border-top: 1px dashed var(--tt-line); } #publicContent #excursionesGrid .exc-detail-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--tt-ink-2) !important; font: 600 .78rem var(--tt-font-ui); background: none !important; border: 0 !important; padding: 0 !important; } #publicContent #excursionesGrid .exc-detail-chip svg, #publicContent #excursionesGrid .exc-detail-chip .tt-ico { color: var(--tt-caribbean-600); width: 15px; height: 15px; margin: 0; } #publicContent #excursionesGrid .card-footer { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; border: 0 !important; } #publicContent #excursionesGrid .card-price { font: 700 1.6rem var(--tt-font-display) !important; color: var(--tt-ink) !important; letter-spacing: -.02em; } #publicContent #excursionesGrid .card-price span { font: 600 .72rem var(--tt-font-ui) !important; color: var(--tt-ink-2) !important; letter-spacing: .06em; } #publicContent #excursionesGrid .btn-reservar { background: linear-gradient(135deg, var(--tt-caribbean), var(--tt-ocean)) !important; color: #fff !important; border: 0 !important; border-radius: var(--tt-r-pill) !important; padding: 12px 24px !important; font: 700 .85rem var(--tt-font-ui) !important; box-shadow: var(--tt-sh-glow); transition: transform .25s var(--tt-ease), box-shadow .25s !important; } #publicContent #excursionesGrid .btn-reservar:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 34px rgba(15,184,169,.45); } #publicContent #excursionesGrid .btn-reservar:disabled { background: var(--tt-surface-2) !important; color: var(--tt-ink-2) !important; box-shadow: none; } #loadMoreBtn { min-width: 240px; } /* ── 9. PLANES ─────────────────────────────────────────────────── */ #publicContent #planes { background: var(--tt-bg-alt) !important; padding-top: 96px !important; padding-bottom: 96px !important; } /* ── 10. CÓMO FUNCIONA ────────────────────────────────────────── */ #publicContent #como-funciona { background: var(--tt-bg) !important; padding-top: 96px !important; } #publicContent #como-funciona .steps { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; position: relative; } #publicContent #como-funciona .step { background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-lg) !important; padding: 30px 26px !important; box-shadow: var(--tt-sh-sm); position: relative; overflow: hidden; transition: transform .35s var(--tt-ease), box-shadow .35s; } #publicContent #como-funciona .step:hover { transform: translateY(-6px); box-shadow: var(--tt-sh-md); } #publicContent #como-funciona .step-num { position: absolute; right: 18px; top: 8px; font: 700 3.6rem var(--tt-font-display) !important; color: color-mix(in srgb, var(--tt-caribbean) 14%, transparent) !important; -webkit-text-fill-color: color-mix(in srgb, var(--tt-caribbean) 14%, transparent) !important; background: none !important; } #publicContent #como-funciona .step-icon { width: 56px; height: 56px; display: grid !important; place-items: center; border-radius: 16px; background: linear-gradient(135deg, var(--tt-caribbean), var(--tt-ocean)); color: #fff; margin-bottom: 18px; box-shadow: var(--tt-sh-glow); font-size: 0 !important; } #publicContent #como-funciona .step-icon .tt-ico { width: 26px; height: 26px; margin: 0; } #publicContent #como-funciona .step h3 { font-family: var(--tt-font-display); font-weight: 600; font-size: 1.3rem; color: var(--tt-ink) !important; margin-bottom: 8px; } #publicContent #como-funciona .step p { color: var(--tt-ink-2) !important; font-size: .9rem; line-height: 1.65; } /* ── 11. GUÍAS (proveedores) · placeholder de foto sin rostros ─── */ #publicContent #proveedores { background: var(--tt-bg-alt) !important; padding-top: 96px !important; padding-bottom: 96px !important; } #publicContent #proveedores .provider-inner { align-items: center; gap: clamp(28px, 5vw, 72px) !important; } #publicContent #proveedores .provider-perks { list-style: none; padding: 0; display: grid; gap: 12px; margin: 22px 0 28px; } #publicContent #proveedores .provider-perks li { display: flex; align-items: center; gap: 12px; color: var(--tt-ink) !important; font-size: .95rem; } #publicContent #proveedores .perk-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tt-caribbean) 16%, transparent); color: var(--tt-caribbean-600) !important; font-size: .7rem; flex-shrink: 0; } #publicContent #proveedores .prov-social-proof { margin-top: 18px; color: var(--tt-ink-2) !important; font-size: .82rem; } #publicContent #proveedores .provider-visual { background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-lg) !important; box-shadow: var(--tt-sh-lg) !important; overflow: hidden; padding: 0 !important; } #publicContent #proveedores .prov-visual-header { background: linear-gradient(135deg, var(--tt-ocean-900), #0a6d86) !important; color: #fff !important; padding: 18px 22px !important; } #publicContent #proveedores .prov-visual-title { color: #fff !important; } #publicContent #proveedores .prov-cards-body { padding: 18px !important; display: grid; gap: 14px; } #publicContent #proveedores .prov-stat { background: var(--tt-surface-2) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-md) !important; padding: 16px 18px !important; } #publicContent #proveedores .prov-stat-label { color: var(--tt-ink) !important; font-weight: 700; } /* Componente reutilizable: foto de guía / paisaje. Para poner una foto real:
Nombre del guía
o style="--tt-photo:url(ruta.jpg)". Sin imagen muestra un paisaje abstracto. */ .tt-photo-slot { position: relative; overflow: hidden; border-radius: var(--tt-r-md); isolation: isolate; color: #fff; background: var(--tt-photo, none) center / cover no-repeat, linear-gradient(180deg, #f7d488 0%, #f4a86a 34%, #0fb8a9 34.5%, #0b5fc0 100%); } .tt-photo-slot::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: calc(1 - var(--tt-has-photo, 0)); background: radial-gradient(circle at 74% 24%, rgba(255,255,255,.9) 0 7%, transparent 7.5%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62 L38 34 L62 50 L96 22 L138 54 L168 40 L200 60 V100 H0Z' fill='%23083a5e' fill-opacity='.55'/%3E%3Cpath d='M0 76 Q50 60 100 74 T200 70 V100 H0Z' fill='%230a2a52' fill-opacity='.6'/%3E%3C/svg%3E") bottom / 100% 70% no-repeat; } .tt-photo-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .tt-photo-slot .tt-ico { position: relative; z-index: 2; } #gpv-avatar { background: linear-gradient(180deg, #f7d488 0%, #f4a86a 34%, #0fb8a9 34.5%, #0b5fc0 100%) !important; border: 0 !important; color: #fff !important; box-shadow: var(--tt-sh-md) !important; } /* ── 12. AUTH / CONTACTO / CTA ────────────────────────────────── */ #publicContent #auth { background: var(--tt-bg-alt) !important; } #publicContent #contacto { background: var(--tt-bg) !important; padding-top: 96px !important; } #publicContent #contacto .contact-cards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 16px !important; max-width: 1100px; margin: 0 auto; } #publicContent #contacto .contact-card { display: flex !important; align-items: center; gap: 14px; background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-md) !important; padding: 18px 20px !important; color: var(--tt-ink) !important; box-shadow: var(--tt-sh-sm); transition: transform .3s var(--tt-ease), box-shadow .3s, border-color .3s; } #publicContent #contacto a.contact-card:hover { transform: translateY(-4px); box-shadow: var(--tt-sh-md); border-color: var(--tt-caribbean) !important; } #publicContent #contacto .contact-card svg { color: var(--tt-caribbean-600) !important; stroke: currentColor; flex-shrink: 0; width: 22px; height: 22px; } #publicContent .cta-final-banner { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--tt-ocean-900) 0%, #0b5fc0 55%, var(--tt-caribbean) 130%) !important; padding: clamp(64px, 9vw, 120px) 5vw !important; text-align: center; isolation: isolate; } #publicContent .cta-final-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 15% 0%, rgba(34,224,196,.35), transparent 60%), radial-gradient(50% 70% at 100% 100%, rgba(247,212,136,.22), transparent 60%); } #publicContent .cta-final-h2 { font-family: var(--tt-font-display) !important; font-weight: 600 !important; font-size: clamp(2rem, 4.6vw, 3.6rem) !important; letter-spacing: -.02em; color: #fff !important; } #publicContent .cta-final-p { color: rgba(255,255,255,.85) !important; font-size: 1.05rem; margin: 14px auto 30px; max-width: 52ch; } #publicContent .cta-final-banner .btn-primary { background: #fff !important; color: var(--tt-ocean-900) !important; box-shadow: 0 14px 40px rgba(0,0,0,.28) !important; } #publicContent .cta-final-banner .btn-outline { color: #fff !important; border-color: rgba(255,255,255,.6) !important; background: rgba(255,255,255,.08) !important; } /* ── 13. TESTIMONIOS (misma estructura, solo diseño) ───────────── */ #publicContent #testimonios { background: var(--tt-bg-alt) !important; padding-top: 96px !important; padding-bottom: 96px !important; } #publicContent #testimonios .testimonials { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 22px !important; max-width: 1240px; margin: 0 auto; } #publicContent #testimonios .testimonial { position: relative; background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-lg) !important; padding: 30px 28px !important; box-shadow: var(--tt-sh-sm) !important; transition: transform .35s var(--tt-ease), box-shadow .35s; } #publicContent #testimonios .testimonial:hover { transform: translateY(-5px); box-shadow: var(--tt-sh-md) !important; } #publicContent #testimonios .testimonial:first-child { grid-column: 1 / -1; background: linear-gradient(135deg, var(--tt-ocean-900), #0b4f8f) !important; border-color: transparent !important; } #publicContent #testimonios .testimonial:first-child .testi-text, #publicContent #testimonios .testimonial:first-child .author-name { color: #fff !important; } #publicContent #testimonios .testimonial:first-child .author-loc { color: rgba(255,255,255,.7) !important; } #publicContent #testimonios .testimonial::before { content: '“'; position: absolute; top: 6px; right: 22px; font: 700 5.5rem/1 var(--tt-font-display); color: color-mix(in srgb, var(--tt-caribbean) 22%, transparent); pointer-events: none; } #publicContent #testimonios .stars { color: #f5a623 !important; letter-spacing: .14em; font-size: .95rem; } #publicContent #testimonios .testi-text { color: var(--tt-ink) !important; font-family: var(--tt-font-display); font-size: 1.05rem !important; line-height: 1.7 !important; font-weight: 400; } #publicContent #testimonios .testimonial:first-child .testi-text { font-size: 1.3rem !important; max-width: 60ch; } #publicContent #testimonios .avatar { background: linear-gradient(135deg, var(--tt-caribbean), var(--tt-ocean)) !important; color: #fff !important; font-weight: 700; box-shadow: var(--tt-sh-glow); } #publicContent #testimonios .author-name { color: var(--tt-ink) !important; font-weight: 700; } #publicContent #testimonios .author-loc { color: var(--tt-ink-2) !important; } #publicContent #testimonios .testi-trust-bar { text-align: center; margin-top: 34px; color: var(--tt-ink-2) !important; } #publicContent #testimonios .testi-trust-bar strong { color: var(--tt-ink); } /* ── 14. FAQ (acordeón) ───────────────────────────────────────── */ #publicContent #ayuda { background: var(--tt-bg) !important; padding-top: 96px !important; padding-bottom: 96px !important; } #publicContent #ayuda .faq-list { display: grid; gap: 14px; } #publicContent #ayuda .faq-item { background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-md) !important; box-shadow: var(--tt-sh-sm); overflow: hidden; transition: box-shadow .3s var(--tt-ease), border-color .3s, background .3s; } #publicContent #ayuda .faq-item:hover { border-color: color-mix(in srgb, var(--tt-caribbean) 40%, transparent) !important; } #publicContent #ayuda .faq-item[open] { box-shadow: var(--tt-sh-md); border-color: var(--tt-caribbean) !important; } #publicContent #ayuda .faq-summary { display: flex !important; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; padding: 20px 24px !important; list-style: none; font: 700 1rem var(--tt-font-ui) !important; color: var(--tt-ink) !important; } #publicContent #ayuda .faq-summary::-webkit-details-marker { display: none; } #publicContent #ayuda .faq-summary svg { flex-shrink: 0; width: 28px !important; height: 28px !important; padding: 7px; border-radius: 50%; background: var(--tt-surface-2); color: var(--tt-caribbean-600); transition: transform .4s var(--tt-ease), background .3s, color .3s; } #publicContent #ayuda .faq-item[open] .faq-summary svg { transform: rotate(180deg); background: var(--tt-caribbean); color: #fff; } #publicContent #ayuda .faq-body { padding: 0 24px 22px !important; color: var(--tt-ink-2) !important; line-height: 1.75 !important; font-size: .94rem; animation: ttFaq .45s var(--tt-ease); } @keyframes ttFaq { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } #publicContent #ayuda .faq-body a { color: var(--tt-accent-ink) !important; text-decoration: underline; text-underline-offset: 3px; } /* ── 15. LEGAL ────────────────────────────────────────────────── */ #publicContent #legal { background: var(--tt-bg) !important; } /* ── 16. FOOTER premium ───────────────────────────────────────── */ #publicContent footer.footer-pro { position: relative; background: linear-gradient(180deg, #04122b 0%, #061a3c 100%) !important; color: #c9d6ee !important; border-top: 0 !important; padding: 84px clamp(20px, 5vw, 72px) 34px !important; overflow: hidden; } #publicContent footer.footer-pro::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tt-caribbean), var(--tt-ocean), #f0b64a); } #publicContent footer.footer-pro::after { content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(34,224,196,.14), transparent 65%); pointer-events: none; } #publicContent footer.footer-pro * { border-color: rgba(255,255,255,.09); } #publicContent footer.footer-pro .footer-pro-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; } #publicContent footer.footer-pro .footer-pro-grid { display: grid !important; grid-template-columns: 1.5fr repeat(3, 1fr) !important; gap: 44px !important; } #publicContent footer.footer-pro .footer-logo-img { height: 44px !important; width: auto !important; margin-bottom: 18px; } #publicContent footer.footer-pro .footer-pro-tagline { font-family: var(--tt-font-display); font-size: 1.15rem; line-height: 1.5; color: #fff !important; max-width: 30ch; } #publicContent footer.footer-pro .footer-contact-item { color: #c9d6ee !important; font-size: .86rem; display: flex; align-items: center; gap: 9px; } #publicContent footer.footer-pro .footer-contact-item svg { color: var(--tt-caribbean-glow); } #publicContent footer.footer-pro .footer-col h4 { color: #fff !important; font: 700 .74rem var(--tt-font-ui) !important; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; } #publicContent footer.footer-pro .footer-links { list-style: none; padding: 0; display: grid; gap: 11px; } #publicContent footer.footer-pro .footer-links a { color: #a9b9d6 !important; font-size: .9rem; position: relative; transition: color .2s, padding-left .25s var(--tt-ease); } #publicContent footer.footer-pro .footer-links a:hover { color: var(--tt-caribbean-glow) !important; padding-left: 6px; } #publicContent footer.footer-pro .footer-social-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #fff !important; transition: transform .3s var(--tt-ease), background .3s, border-color .3s; } #publicContent footer.footer-pro .footer-social-btn:hover { background: var(--tt-caribbean) !important; border-color: var(--tt-caribbean) !important; transform: translateY(-3px); } #publicContent footer.footer-pro .footer-brand-socials { display: flex; gap: 10px; margin-top: 20px; } #publicContent footer.footer-pro .footer-pro-divider { height: 1px; background: rgba(255,255,255,.1) !important; margin: 50px 0 26px; } #publicContent footer.footer-pro .footer-pro-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } #publicContent footer.footer-pro .footer-copy { color: #8497b8 !important; font-size: .82rem; } #publicContent footer.footer-pro .footer-socials { display: none !important; } /* duplicado de .footer-brand-socials */ /* ── 17. Micro‑animaciones ────────────────────────────────────── */ .reveal { transform: translateY(22px) !important; transition: opacity .7s var(--tt-ease), transform .7s var(--tt-ease) !important; } .reveal.visible { transform: none !important; } #publicContent #excursionesGrid .card.reveal { transform: translateY(30px) scale(.985) !important; } #publicContent #excursionesGrid .card.reveal.visible { transform: none !important; } a, button { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--tt-caribbean) 60%, transparent); outline-offset: 2px; border-radius: 6px; } /* ── 18. RESPONSIVE ───────────────────────────────────────────── */ @media (max-width: 1100px) { #publicContent #beneficios .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; } #publicContent #como-funciona .steps { grid-template-columns: repeat(2, 1fr) !important; } #publicContent footer.footer-pro .footer-pro-grid { grid-template-columns: repeat(3, 1fr) !important; } #publicContent footer.footer-pro .footer-brand-col { grid-column: 1 / -1; } } @media (max-width: 820px) { nav { height: 66px !important; } #publicContent #hero.hero { min-height: 640px !important; padding: 120px 20px 96px !important; align-items: flex-end !important; } #publicContent #hero::before { background: linear-gradient(0deg, rgba(4,18,43,.9) 0%, rgba(4,18,43,.55) 55%, rgba(4,18,43,.25) 100%), linear-gradient(180deg, rgba(4,18,43,.6), transparent 26%); } #publicContent #hero .hero-split-img { object-position: 68% 50% !important; } #publicContent #hero .hero-split-left::after { display: none; } #publicContent #hero .hero-cta .btn { flex: 1 1 100%; justify-content: center; } #publicContent #beneficios.benefits-strip { margin-top: -48px !important; } #publicContent #excursiones .exc-head-row { flex-direction: column; align-items: flex-start !important; } #publicContent #excursiones .exc-controls { padding: 8px !important; } #publicContent #excursiones .exc-filter-bar { width: 100%; } #publicContent #excursiones .exc-filter-bar select.form-input { flex: 1 1 100%; } #publicContent #testimonios .testimonial:first-child { grid-column: auto; } #publicContent #testimonios .testimonial:first-child .testi-text { font-size: 1.1rem !important; } #publicContent footer.footer-pro { padding-top: 60px !important; } #publicContent footer.footer-pro .footer-pro-grid { grid-template-columns: 1fr 1fr !important; gap: 34px 24px !important; } } @media (max-width: 560px) { #publicContent #beneficios .benefits-grid, #publicContent #como-funciona .steps { grid-template-columns: 1fr !important; } #publicContent #excursionesGrid { grid-template-columns: 1fr !important; gap: 22px !important; } #publicContent #ayuda .faq-summary { padding: 16px 18px !important; font-size: .94rem !important; } #publicContent footer.footer-pro .footer-pro-grid { grid-template-columns: 1fr !important; } } @media (prefers-reduced-motion: reduce) { #publicContent #hero .hero-split-img, #publicContent #hero .hero-split-left, #publicContent #hero .hero-split-left::after, #publicContent #ayuda .faq-body { animation: none !important; } .reveal, .card, .btn, .benefit-card { transition: none !important; } } #publicContent #proveedores .prov-stat p, #publicContent #proveedores .prov-stat-num { color: var(--tt-ink-2) !important; } #publicContent #proveedores .prov-stat-num svg { stroke: var(--tt-caribbean-600) !important; } #publicContent #proveedores .prov-status-live { color: #7cf5df !important; } .tt-guide-slot { height: 150px; margin: 18px 18px 0; display: grid; place-items: center; } .tt-guide-slot svg, .tt-guide-slot .tt-ico { width: 40px; height: 40px; stroke-width: 1.4; opacity: .9; filter: drop-shadow(0 4px 10px rgba(4,18,43,.35)); position: relative; z-index: 2; margin: 0; } #publicContent #testimonios .testimonials > .testimonial:first-child { grid-column: 1 / -1 !important; } #publicContent #testimonios .testimonials { max-width: 1240px !important; width: 100%; } @media (max-width: 820px) { #publicContent #testimonios .testimonials > .testimonial:first-child { grid-column: auto !important; } } #publicContent footer.footer-pro .footer-logo-img { height: 132px !important; width: 132px !important; max-width: none !important; margin: -38px 0 -22px -34px !important; } #publicContent .cta-final-banner::after { display: none !important; } #publicContent #excursionesGrid .card-fecha-highlight .cfd-dia { -webkit-text-fill-color: currentColor !important; background: none !important; } html[data-theme="dark"] #publicContent #excursionesGrid .card-fecha-highlight .cfd-dia { color: var(--tt-caribbean-glow) !important; } /* ── móvil: jerarquía del hero y logo ── */ #publicContent #hero .hero-split-h1 .hero-line-1 { font-size: clamp(.78rem, 1.5vw + .5rem, 1.25rem) !important; letter-spacing: .26em !important; } #publicContent #hero .hero-split-h1 .hero-line-2 { font-size: clamp(2.7rem, 9vw + .4rem, 6rem) !important; } #publicContent #hero .hero-split-h1 .hero-line-3 { font-size: clamp(1.35rem, 3.2vw + .5rem, 2.9rem) !important; } #publicContent #hero .hero-split-left > p { font-size: clamp(.95rem, .6vw + .8rem, 1.2rem) !important; } @media (max-width: 820px) { nav a.nav-logo img.logo-img { width: 84px !important; height: 84px !important; margin: -24px 0 -24px -12px !important; } nav.scrolled a.nav-logo img.logo-img { width: 76px !important; height: 76px !important; margin: -22px 0 -22px -10px !important; } #publicContent #hero::before { background: linear-gradient(0deg, rgba(4,18,43,.82) 0%, rgba(4,18,43,.45) 42%, rgba(4,18,43,.12) 100%), linear-gradient(180deg, rgba(4,18,43,.5), transparent 20%) !important; } #publicContent #hero .hero-split-left { max-width: 100% !important; } #publicContent #hero .hero-trust-bar { gap: 6px 16px; font-size: .78rem !important; } #themeToggle { width: 36px; height: 36px; margin: 0 4px 0 auto; } } #publicContent #excursiones .exc-filter-bar select.form-input { height: 54px !important; min-height: 54px; line-height: 1.2; appearance: none; -webkit-appearance: none; background-color: var(--tt-surface-2) !important; } /* ═══════════════════════════════════════════════════════════════════ SPRINT 2 — REDISEÑO UX PREMIUM (solo presentación) ═══════════════════════════════════════════════════════════════════ */ /* ── A. Destinos populares ─────────────────────────────────────── */ #publicContent #destinos { background: var(--tt-bg) !important; padding: clamp(72px, 9vw, 128px) clamp(16px, 5vw, 72px) clamp(40px, 5vw, 72px) !important; } .tt-dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 236px; gap: 18px; max-width: 1240px; margin: 44px auto 0; } .tt-dest { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--tt-r-lg); color: #fff; box-shadow: var(--tt-sh-md); min-height: 236px; transition: transform .5s var(--tt-ease), box-shadow .5s var(--tt-ease); } .tt-dest--xl { grid-column: span 2; grid-row: span 2; } .tt-dest--tall { grid-row: span 2; } .tt-dest--wide { grid-column: 1 / -1; } .tt-dest-media { position: absolute; inset: 0; z-index: -2; background: var(--tt-deep); } .tt-dest-media > svg, .tt-dest-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--tt-ease); } .tt-dest-media > img { z-index: 1; } .tt-dest::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(4,18,43,.78) 0%, rgba(4,18,43,.28) 42%, rgba(4,18,43,0) 70%); transition: opacity .5s; } .tt-dest:hover { transform: translateY(-8px); box-shadow: var(--tt-sh-lg); } .tt-dest:hover .tt-dest-media > svg, .tt-dest:hover .tt-dest-media > img { transform: scale(1.08); } .tt-dest-body { position: absolute; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 6px; transition: transform .5s var(--tt-ease); } .tt-dest:hover .tt-dest-body { transform: translateY(-4px); } .tt-dest-tag { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 12px; border-radius: var(--tt-r-pill); font: 700 .68rem var(--tt-font-ui); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .tt-dest-tag .tt-ico, .tt-dest-tag svg { width: 13px; height: 13px; margin: 0; } .tt-dest-body h3 { font-family: var(--tt-font-display) !important; font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.02em; line-height: 1.1; color: #fff !important; margin: 4px 0 0; text-shadow: 0 2px 18px rgba(4,18,43,.4); } .tt-dest--xl .tt-dest-body h3 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); } .tt-dest-body p { color: rgba(255,255,255,.88) !important; font-size: .92rem; line-height: 1.5; max-width: 34ch; margin: 0; } @media (max-width: 1000px) { .tt-dest-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } .tt-dest--xl { grid-column: 1 / -1; grid-row: span 2; } .tt-dest--tall { grid-row: span 1; } } @media (max-width: 560px) { .tt-dest-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; gap: 14px; } .tt-dest--xl { grid-row: span 2; } .tt-dest-body { left: 18px; right: 18px; bottom: 18px; } } /* ── B. Sistema único de botones ───────────────────────────────── */ .btn, .btn-reservar, .exc-ver-todas, #loadMoreBtn { border-radius: var(--tt-r-pill) !important; font-family: var(--tt-font-ui) !important; letter-spacing: .01em; } .btn:active, .btn-reservar:active { transform: translateY(0) scale(.97) !important; box-shadow: var(--tt-sh-sm) !important; transition-duration: .1s !important; } .btn:focus-visible, .btn-reservar:focus-visible { outline: 3px solid color-mix(in srgb, var(--tt-caribbean) 55%, transparent); outline-offset: 3px; } .btn:disabled, .btn[disabled] { opacity: .5 !important; cursor: not-allowed; filter: saturate(.6); box-shadow: none !important; transform: none !important; } .btn-primary { border: 0 !important; background-size: 160% 100% !important; background-position: 0 0; } .btn-primary:hover { background-position: 100% 0 !important; } #publicContent .btn-ghost { background: transparent !important; border: 1.5px solid var(--tt-line) !important; color: var(--tt-ink) !important; box-shadow: none !important; } #publicContent .btn-ghost:hover { background: color-mix(in srgb, var(--tt-caribbean) 10%, transparent) !important; border-color: var(--tt-caribbean) !important; transform: translateY(-2px); } #publicContent .btn-outline:active { background: color-mix(in srgb, var(--tt-caribbean) 16%, transparent) !important; } #loadMoreBtn, .exc-ver-todas { padding: 13px 28px !important; } /* ── C. Hero: el mensaje como elemento más fuerte ─────────────── */ #publicContent #hero.hero { padding-bottom: clamp(120px, 14vh, 170px) !important; } #publicContent #hero .hero-split-left { max-width: 820px !important; width: min(820px, 100%) !important; } #publicContent #hero .hero-split-h1 .hero-line-2 { font-size: clamp(3rem, 10.5vw, 7.4rem) !important; line-height: .96 !important; letter-spacing: -.035em !important; text-shadow: 0 6px 40px rgba(4,18,43,.45); } #publicContent #hero .hero-split-h1 .hero-line-3 { font-size: clamp(1.5rem, 4vw, 3.2rem) !important; margin-top: 10px !important; } #publicContent #hero .hero-split-left > p { max-width: 46ch; font-size: clamp(1rem, .7vw + .85rem, 1.28rem) !important; } #publicContent #hero .hero-trust-bar { padding: 10px 18px; border-radius: var(--tt-r-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); width: fit-content; max-width: 100%; } /* ── D. Navbar: responsive y menú móvil premium ────────────────── */ nav { gap: clamp(8px, 1.4vw, 20px); } @media (max-width: 1100px) { nav .nav-picker { display: none !important; } } .mobile-menu { border-radius: 0 0 var(--tt-r-lg) var(--tt-r-lg) !important; box-shadow: var(--tt-sh-lg) !important; padding: 10px 20px 26px !important; } .mobile-menu a { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px !important; font-size: 1.02rem !important; border-bottom: 1px solid var(--tt-line) !important; transition: color .2s, padding-left .3s var(--tt-ease); } .mobile-menu a:hover { color: var(--tt-accent-ink) !important; padding-left: 10px !important; } .mobile-menu .mobile-pickers-section { margin-top: 14px; } .mobile-menu .mpicker-btn { border-radius: var(--tt-r-pill) !important; padding: 10px 16px; font-weight: 600; } .mobile-menu .mpicker-btn.active { background: linear-gradient(135deg, var(--tt-caribbean), var(--tt-ocean)) !important; color: #fff !important; border-color: transparent !important; } /* ── E. Tarjetas: más aire y jerarquía visual ──────────────────── */ #publicContent #excursionesGrid .card-body { padding: 22px 24px 24px !important; gap: 12px; } #publicContent #excursionesGrid .card-img-wrap { aspect-ratio: 5 / 4; } #publicContent #excursionesGrid .card-price { font-size: 1.85rem !important; } #publicContent #excursionesGrid .exc-capacidad { color: var(--tt-ink) !important; } /* ── F. Aire general ───────────────────────────────────────────── */ #publicContent #beneficios .benefit-card { padding: 30px 26px !important; } #publicContent #excursiones, #publicContent #planes, #publicContent #como-funciona, #publicContent #proveedores, #publicContent #testimonios, #publicContent #ayuda, #publicContent #contacto { padding-top: clamp(72px, 9vw, 128px) !important; } #publicContent #planes, #publicContent #proveedores, #publicContent #testimonios, #publicContent #ayuda { padding-bottom: clamp(72px, 9vw, 128px) !important; } #publicContent .section-head { margin-bottom: clamp(32px, 4vw, 56px); } nav a.nav-logo { margin-right: clamp(12px, 2.4vw, 36px) !important; } /* ═══════════════════════════════════════════════════════════════════ SPRINT 3 — EXPERIENCIA VISUAL (solo presentación) ═══════════════════════════════════════════════════════════════════ */ /* ── 1. Hero · carrusel de paisajes ─────────────────────────────── */ #hero .hero-split-right::before, #hero .hero-split-right::after { display: none !important; } #hero .tt-hero-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.6s ease-in-out; will-change: opacity; } #hero .tt-hero-slide.is-active { opacity: 1; z-index: 1; } #hero div.tt-hero-slide { overflow: hidden; } #hero div.tt-hero-slide > svg { width: 100%; height: 100%; display: block; animation: ttKen 24s ease-in-out infinite alternate; transform-origin: 60% 60%; } #hero .tt-hero-dots { position: absolute; z-index: 3; right: clamp(20px, 6vw, 96px); bottom: clamp(96px, 13vh, 150px); display: flex; gap: 10px; align-items: center; } #hero .tt-hero-dot { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255,255,255,.45); transition: width .45s var(--tt-ease), background .3s; } #hero .tt-hero-dot:hover { background: rgba(255,255,255,.8); } #hero .tt-hero-dot.on { width: 34px; background: #fff; } @media (max-width: 820px) { #hero .tt-hero-dots { right: auto; left: 20px; bottom: 104px; } } /* ── 2. Tarjetas · indicador de galería ─────────────────────────── */ .tt-gal { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; align-items: center; justify-content: space-between; pointer-events: none; } .tt-gal-count { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 700 .72rem var(--tt-font-ui); color: #fff; background: rgba(4,18,43,.55); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .tt-gal-count svg, .tt-gal-count i { width: 13px; height: 13px; } .tt-gal-dots { display: inline-flex; gap: 5px; align-items: center; padding: 6px 9px; border-radius: 999px; background: rgba(4,18,43,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .tt-gal-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: width .35s var(--tt-ease), background .3s; } .tt-gal-dots i.on { width: 16px; border-radius: 4px; background: #fff; } /* ── 3. Destinos · grid premium ─────────────────────────────────── */ .tt-dest::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-120%); transition: transform 1s var(--tt-ease); } .tt-dest:hover::before { transform: translateX(120%); } .tt-dest-body p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--tt-ease), opacity .4s; } .tt-dest:hover .tt-dest-body p, .tt-dest:focus-within .tt-dest-body p, .tt-dest--xl .tt-dest-body p { max-height: 4.5em; opacity: 1; } @media (hover: none) { .tt-dest-body p { max-height: 4.5em; opacity: 1; } } .tt-dest-body h3 { position: relative; padding-bottom: 8px; } .tt-dest-body h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--tt-caribbean-glow); transition: width .5s var(--tt-ease); } .tt-dest:hover .tt-dest-body h3::after { width: 72px; } /* ── 4. Página de detalle (modal de reserva) ────────────────────── */ #modalOverlay { background: rgba(4,18,43,.6) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #modalOverlay .modal.modal--hero { max-width: 760px !important; width: min(760px, 100%); border-radius: 28px !important; background: var(--tt-surface) !important; color: var(--tt-ink) !important; border: 1px solid var(--tt-line) !important; box-shadow: var(--tt-sh-lg) !important; overflow-x: hidden; } #modalOverlay .modal-header { background: color-mix(in srgb, var(--tt-surface) 88%, transparent) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 16px 24px !important; } #modalOverlay .modal-title { color: var(--tt-accent-ink) !important; } #modalOverlay .modal-close { width: 38px; height: 38px; border-radius: 50%; background: var(--tt-surface-2) !important; color: var(--tt-ink) !important; border: 1px solid var(--tt-line) !important; transition: transform .3s var(--tt-ease), background .2s; } #modalOverlay .modal-close:hover { transform: rotate(90deg); background: color-mix(in srgb, var(--tt-caribbean) 14%, transparent) !important; } #modalOverlay .modal-img { height: clamp(240px, 44vh, 400px) !important; width: 100%; object-fit: cover !important; } #modalOverlay .modal-body-inner { padding: 8px clamp(18px, 4vw, 36px) 36px !important; display: flex; flex-direction: column; gap: 18px !important; } #modalGallery { gap: 10px !important; padding: 6px 0 0; overflow-x: auto; scrollbar-width: none; } #modalGallery::-webkit-scrollbar { display: none; } #modalGallery img { flex: 0 0 auto; width: 88px !important; height: 62px !important; margin: 0 !important; border-radius: 14px !important; object-fit: cover; opacity: .62; border: 2px solid transparent !important; transition: opacity .25s, transform .3s var(--tt-ease), border-color .25s !important; } #modalGallery img:hover { opacity: 1; transform: translateY(-3px); } #modalGallery img.is-current { opacity: 1; border-color: var(--tt-caribbean) !important; box-shadow: var(--tt-sh-glow); } #modalOverlay .modal-section-card { background: var(--tt-surface-2) !important; border: 0 !important; border-radius: 20px !important; padding: 22px 24px !important; box-shadow: none !important; } #modalOverlay .modal-section-label { color: var(--tt-accent-ink) !important; font: 700 .7rem var(--tt-font-ui) !important; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 4px; } #modalOverlay .modal-name { font-family: var(--tt-font-display) !important; font-weight: 600 !important; font-size: clamp(1.7rem, 3.4vw, 2.3rem) !important; letter-spacing: -.02em !important; line-height: 1.12 !important; color: var(--tt-ink) !important; } #modalOverlay #modalGuide { display: inline-flex !important; align-items: center; gap: 4px; margin-top: 12px !important; padding: 8px 16px 8px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tt-caribbean) 10%, transparent); border: 1px solid color-mix(in srgb, var(--tt-caribbean) 26%, transparent); font-size: .84rem !important; color: var(--tt-ink-2) !important; } #modalOverlay #modalGuide a { color: var(--tt-accent-ink) !important; text-decoration: none !important; font-weight: 700; } #modalOverlay #modalGuide a:hover { text-decoration: underline !important; } #modalOverlay #modalGuide .tt-ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: linear-gradient(135deg, var(--tt-caribbean), var(--tt-ocean)); color: #fff; margin: 0 6px 0 0; } #modalOverlay .modal-detail { display: flex; flex-wrap: wrap; gap: 10px; } #modalOverlay .detail-chip { display: inline-flex; align-items: center; gap: 2px; padding: 8px 14px !important; border-radius: 999px !important; background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; color: var(--tt-ink) !important; font: 600 .82rem var(--tt-font-ui) !important; } #modalOverlay .detail-chip .tt-ico { color: var(--tt-caribbean-600); } #modalOverlay .modal-desc { color: var(--tt-ink-2) !important; line-height: 1.75 !important; font-size: .96rem !important; } #modalOverlay .booking-form { background: linear-gradient(160deg, color-mix(in srgb, var(--tt-caribbean) 9%, var(--tt-surface)), var(--tt-surface)) !important; border: 1px solid color-mix(in srgb, var(--tt-caribbean) 28%, transparent) !important; border-radius: 24px !important; padding: 26px !important; box-shadow: var(--tt-sh-md) !important; } #modalOverlay .modal-price-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding-top: 20px !important; margin-top: 8px; border-top: 1px dashed var(--tt-line) !important; } #modalOverlay .modal-price { font: 700 2.5rem var(--tt-font-display) !important; letter-spacing: -.03em; color: var(--tt-ink) !important; } #modalOverlay .price-total { color: var(--tt-ink-2) !important; } #modalOverlay #btnConfirmar { padding: 18px 40px !important; font-size: 1.02rem !important; min-width: 220px; justify-content: center; box-shadow: 0 16px 40px rgba(15,184,169,.38) !important; } #modalOverlay #btnConfirmar:hover:not(:disabled) { transform: translateY(-3px) scale(1.02) !important; } #modalOverlay .form-input { background: var(--tt-surface) !important; color: var(--tt-ink) !important; border: 1.5px solid var(--tt-line) !important; border-radius: 14px !important; } #modalOverlay .form-input:focus { border-color: var(--tt-caribbean) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tt-caribbean) 18%, transparent) !important; outline: none; } #modalOverlay .form-label { color: var(--tt-ink-2) !important; font-weight: 600; } @media (max-width: 560px) { #modalOverlay .modal.modal--hero { border-radius: 22px 22px 0 0 !important; } #modalOverlay .modal-price-row { flex-direction: column; align-items: stretch; } #modalOverlay #btnConfirmar { width: 100%; } } /* Panel de guías: fotografía real; se retira el fondo ilustrado */ .tt-guide-slot { background: var(--tt-deep) !important; } .tt-guide-slot::before { display: none !important; } /* Hero 4K: imagen nítida, sin filtros ni blur */ #publicContent #hero .hero-split-img, #hero img.tt-hero-slide { object-fit: cover !important; filter: none !important; -webkit-filter: none !important; image-rendering: auto; } /* ═══════════════════════════════════════════════════════════════════ SPRINT 5 — Tarjetas premium ═══════════════════════════════════════════════════════════════════ */ #excursionesGrid .card-img { transition: transform .9s var(--tt-ease), opacity .32s ease !important; } .tt-card-link { position: absolute; inset: 0; z-index: 1; } .tt-loc-badge { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 130px); padding: 6px 12px 6px 9px; border-radius: 999px; font: 700 .72rem var(--tt-font-ui); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(4,18,43,.55); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; } .tt-loc-badge svg, .tt-loc-badge i { width: 13px; height: 13px; flex-shrink: 0; color: var(--tt-caribbean-glow); } .tt-gal { left: auto !important; right: 14px !important; gap: 8px; } #publicContent #excursionesGrid .card-body .card-loc { display: none !important; } #publicContent #excursionesGrid .card-meta { justify-content: flex-start; gap: 10px; } #publicContent #excursionesGrid .card-rating { margin-left: 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #f5a623 14%, transparent); } #publicContent #excursionesGrid .card-title { cursor: pointer; transition: color .25s; } #publicContent #excursionesGrid .card:hover .card-title { color: var(--tt-accent-ink) !important; } #publicContent #excursionesGrid .exc-guide-line { display: flex; align-items: center; gap: 8px; } .tt-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; color: #fff; font: 700 .62rem var(--tt-font-ui); letter-spacing: .02em; background: linear-gradient(135deg, var(--tt-caribbean), var(--tt-ocean)) center / cover no-repeat; box-shadow: 0 0 0 2px var(--tt-surface), 0 2px 8px rgba(12,35,64,.18); } .tt-avatar.has-photo { color: transparent; } .tt-guide-by { color: var(--tt-ink-2); font-size: .78rem; } #publicContent #excursionesGrid .card-price { font-size: 2.15rem !important; line-height: 1; } #publicContent #excursionesGrid .card-price span { font-size: .7rem !important; margin-left: 4px; } #publicContent #excursionesGrid .card { will-change: transform; } #publicContent #excursionesGrid .card:hover { box-shadow: 0 30px 70px rgba(12,35,64,.20), 0 0 0 1px color-mix(in srgb, var(--tt-caribbean) 45%, transparent) !important; } /* ═══════════════════════════════════════════════════════════════════ SPRINT 5.1 — Pulido premium (correcciones del QA visual) ═══════════════════════════════════════════════════════════════════ */ /* 4 · Sin enlace “activo” subrayado con la barra en reposo (parte superior de la página) */ nav:not(.scrolled) .nav-links a.active { color: #fff !important; } nav:not(.scrolled) .nav-links a.active::after { transform: scaleX(0) !important; } /* 6 · “Excursiones Populares” centrado como el resto de secciones */ #publicContent #excursiones .exc-section-head, #publicContent #excursiones .exc-head-row { text-align: center; } #publicContent #excursiones .exc-head-row { flex-direction: column !important; align-items: center !important; justify-content: center; gap: 20px !important; } #publicContent #excursiones .exc-head-row > div { text-align: center; } #publicContent #excursiones .exc-subtitle-premium { margin-left: auto; margin-right: auto; } /* 7 · Rectángulo residual del banner final: el pseudo-elemento heredaba un tamaño fijo de 720×320 */ #publicContent .cta-final-banner::before { inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; filter: none !important; transform: none !important; opacity: 1 !important; } /* 8 · Hero móvil: overlay más ligero y protagonismo de la fotografía */ @media (max-width: 820px) { #publicContent #hero::before { background: linear-gradient(0deg, rgba(4,18,43,.72) 0%, rgba(4,18,43,.32) 38%, rgba(4,18,43,0) 68%), linear-gradient(180deg, rgba(4,18,43,.34), transparent 16%) !important; } #publicContent #hero .hero-split-h1, #publicContent #hero .hero-split-left > p { text-shadow: 0 2px 18px rgba(4,18,43,.55); } } /* 11 · Alineación del logo del footer con el resto del contenido */ #publicContent footer.footer-pro .footer-logo-img { margin: -38px 0 -22px -9px !important; } /* 14 · Categorías: desplazamiento horizontal con pista visual y ajuste suave */ #publicContent #excursiones .section-tabs { scroll-snap-type: x proximity; scroll-padding-inline: 4px; padding-right: 48px !important; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); } #publicContent #excursiones .section-tab { scroll-snap-align: start; flex: 0 0 auto; } /* 15 · Chat: más pequeño en móvil y margen inferior seguro para que no tape tarjetas ni el footer */ @media (max-width: 820px) { #chatBtn { width: 46px !important; height: 46px !important; right: 12px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; opacity: .94; } #chatWindow { right: 12px !important; bottom: calc(68px + env(safe-area-inset-bottom)) !important; } #publicContent #excursionesGrid { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } #publicContent footer.footer-pro { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; } } /* ═════════════════════════════════════════════ CATÁLOGO — skeleton de imágenes y hover estable ═════════════════════════════════════════════ */ /* Skeleton: gris con shimmer mientras la foto carga; conserva el aspect ratio de la tarjeta */ #publicContent #excursionesGrid .card-img-wrap { background: linear-gradient(100deg, var(--tt-surface-2) 30%, color-mix(in srgb, var(--tt-ink) 9%, var(--tt-surface-2)) 50%, var(--tt-surface-2) 70%) 0 0 / 220% 100%; animation: ttImgShimmer 1.4s linear infinite; } #publicContent #excursionesGrid .card-img-wrap:has(.card-img.is-loaded) { animation: none; background: var(--tt-surface-2); } #publicContent #excursionesGrid .card-img { opacity: 0; transition: transform .9s var(--tt-ease), opacity .25s ease !important; } #publicContent #excursionesGrid .card-img.is-loaded { opacity: 1; } @keyframes ttImgShimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { #publicContent #excursionesGrid .card-img-wrap { animation: none; } } /* Hover: mismo borde por defecto en todas las tarjetas; turquesa solo en hover (ratón) o foco de teclado */ #publicContent #excursionesGrid .card { border: 1px solid var(--tt-line) !important; box-shadow: var(--tt-sh-sm) !important; } @media (hover: none), (pointer: coarse) { /* En pantallas táctiles :hover se queda «pegado» tras tocar: se neutraliza */ #publicContent #excursionesGrid .card:hover { transform: none !important; border-color: var(--tt-line) !important; box-shadow: var(--tt-sh-sm) !important; } #publicContent #excursionesGrid .card:hover .card-img { transform: none; } #publicContent #excursionesGrid .card:hover .card-title { color: inherit !important; } } #publicContent #excursionesGrid .card:has(.tt-card-link:focus-visible) { border-color: color-mix(in srgb, var(--tt-caribbean) 55%, transparent) !important; box-shadow: var(--tt-sh-md) !important; } #publicContent #excursionesGrid .card .tt-card-link:focus:not(:focus-visible) { outline: none; } /* ── Mi Plan (panel del turista) ── */ .tp-plan-name { font-family: var(--tt-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; } .tp-plan-meta { font-size: .8rem; color: var(--muted); margin-top: 3px; } .tp-upgrade { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px 18px; border-radius: var(--tt-r-lg); border: 1px solid color-mix(in srgb, var(--tt-caribbean) 35%, transparent); background: color-mix(in srgb, var(--tt-caribbean) 8%, transparent); } .tp-upgrade-title { font-family: var(--tt-font-display); font-size: 1.05rem; font-weight: 600; } .tp-upgrade-text { font-size: .78rem; color: var(--muted); margin-top: 3px; } /* ── Modal Turista Premium — método de pago ── */ .pum-limit-badge[hidden] { display: none; } /* Pago Premium: la estructura (hoja, desglose, banco, comprobante, términos, botones) es la compartida con reservas: css/payment-sheet.css */ .pum-payment { display: flex; flex-direction: column; gap: 16px; text-align: left; } .pum-payment > * { flex: none; min-width: 0; } .pum-benefits-card .pum-benefits { margin: 0; gap: 6px; } .pum-benefits-card .pum-benefits li { font-size: .82rem; color: rgba(200,215,245,.9); } /* ── Planes · Turista | Premium (upgrade) y Guía debajo ── */ #publicContent #planes { padding: 0 0 96px !important; } .pl-hero { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 72px 24px 40px; margin: 0 0 64px; text-align: center; color: #fff; border-radius: 0 0 28px 28px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--tt-ocean-900) 55%, transparent) 0%, color-mix(in srgb, var(--tt-deep) 88%, transparent) 100%), var(--bg-planes) center 62% / cover no-repeat, var(--tt-ocean-900); font-family: var(--tt-font-ui); } .pl-hero-inner { max-width: 760px; } .pl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; font-family: var(--tt-font-ui); box-sizing: border-box; } .pl-wrap *, .pl-wrap *::before, .pl-wrap *::after { box-sizing: border-box; } .pl-eyebrow { display: inline-block; padding: 6px 14px; border-radius: var(--tt-r-pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } #publicContent .pl-title { font-family: var(--tt-font-display); font-size: clamp(2.3rem, 6vw, 3.6rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: #fff; margin: 16px 0 12px; } #publicContent .pl-sub { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.86); margin: 0 auto 24px; max-width: 620px; } .pl-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; } .pl-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.92); } .pl-trust-ico { display: inline-flex; color: var(--tt-caribbean-glow); } .pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; align-items: stretch; gap: 32px; } .pl-card { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: 26px; box-shadow: var(--tt-sh-sm); } .pl-card--guide { width: min(460px, calc(50% - 16px)); margin: 48px auto 0; } .pl-badge { display: inline-block; padding: 5px 12px; border-radius: var(--tt-r-pill); background: color-mix(in srgb, var(--tt-caribbean) 14%, transparent); color: var(--tt-accent-ink); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .pl-badge--guide { background: color-mix(in srgb, var(--tt-ocean-900) 9%, transparent); color: var(--tt-ink); } html[data-theme="dark"] .pl-badge--guide { background: rgba(255,255,255,.10); } .pl-name { font-family: var(--tt-font-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.01em; color: var(--tt-ink); margin: 14px 0 6px; } .pl-price { display: flex; align-items: baseline; gap: 6px; color: var(--tt-ink); } .pl-amount { font-family: var(--tt-font-display); font-size: 3.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; } .pl-price { margin-bottom: 24px; } .pl-price small { font-size: .9rem; font-weight: 600; color: var(--tt-ink-2); } .pl-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; } .pl-list li { position: relative; padding-left: 30px; font-size: .95rem; line-height: 1.45; color: var(--tt-ink); } .pl-list li::before { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.7 2.7L12 5.6' fill='none' stroke='%230EA697' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat, color-mix(in srgb, var(--tt-caribbean) 16%, transparent); } .pl-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: auto; padding: 0 24px; border: 0; border-radius: var(--tt-r-pill); background: var(--tt-ocean-900); color: #fff; font: 600 .95rem var(--tt-font-ui); text-align: center; cursor: pointer; transition: transform .25s var(--tt-ease), box-shadow .25s var(--tt-ease); } .pl-btn:hover { transform: translateY(-2px); box-shadow: var(--tt-sh-md); } .pl-btn:focus-visible { outline: 3px solid var(--tt-caribbean); outline-offset: 3px; } html[data-theme="dark"] .pl-btn:not(.pl-btn--outline):not(.pl-btn--teal) { border: 1px solid rgba(255,255,255,.28); } .pl-btn--teal { background: var(--tt-caribbean); color: var(--tt-ocean-900); } .pl-btn--outline { background: transparent; color: var(--tt-accent-ink); border: 1.5px solid var(--tt-caribbean); cursor: default; } .pl-btn--outline:hover { transform: none; box-shadow: none; } .pl-upgrade { background: #ECFDF5; border-color: var(--tt-caribbean); box-shadow: none; } html[data-theme="dark"] .pl-upgrade { background: color-mix(in srgb, var(--tt-caribbean) 10%, var(--tt-surface)); } .pl-badge--premium { background: color-mix(in srgb, #10B981 16%, transparent); color: var(--tt-caribbean-700); } html[data-theme="dark"] .pl-badge--premium { color: var(--tt-accent-ink); } #publicContent .pl-upgrade-kicker { font-family: var(--tt-font-ui); font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--tt-ink-2); margin: 14px 0 6px; } html:not([data-theme="dark"]) #publicContent .pl-upgrade-kicker, html:not([data-theme="dark"]) .pl-upgrade-note { color: #64748B; } html:not([data-theme="dark"]) .pl-upgrade .pl-amount, html:not([data-theme="dark"]) .pl-upgrade .pl-list li { color: var(--tt-ocean-900); } .pl-list--premium li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.7 2.7L12 5.6' fill='none' stroke='%2310B981' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat, color-mix(in srgb, #10B981 16%, transparent); } .pl-btn--disabled { background: color-mix(in srgb, var(--tt-ink-2) 12%, transparent); color: var(--tt-ink-2); border: 1.5px dashed color-mix(in srgb, var(--tt-ink-2) 40%, transparent); cursor: not-allowed; user-select: none; } .pl-btn--disabled:hover { transform: none; box-shadow: none; } .pl-upgrade-note { font-size: 12px; line-height: 1.5; color: var(--tt-ink-2); margin: 12px 0 0; } @media (min-width: 1024px) { .pl-wrap { padding: 0 40px; } } @media (max-width: 719px) { .pl-hero { padding: 72px 20px 36px; margin-bottom: 48px; } .pl-grid { grid-template-columns: minmax(0, 1fr); } .pl-card { padding: 24px; } .pl-card--guide { width: 100%; } .pl-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; justify-items: start; } .pl-amount { font-size: 3rem; } } /* ── Hotfix UX 2.5C · Centro de ayuda y transparencia ─────────────────────── */ .hc-section { background: var(--tt-surface, #fff); padding: 96px 5vw; } .hc-head { text-align: center; max-width: 720px; margin: 0 auto 48px; } .hc-head h2 { margin: 0 0 12px; font: 600 clamp(1.9rem, 3.4vw, 2.8rem)/1.15 var(--tt-font-display, 'Fraunces', Georgia, serif); letter-spacing: -.02em; color: var(--tt-ink, #0F2747); } .hc-head p { margin: 0; font-size: 1.08rem; color: var(--tt-ink-2, #52627a); } .hc-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .hc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 34px 30px; background: var(--tt-surface, #fff); border: 1px solid var(--tt-line, #e3eaf3); border-radius: 24px; box-shadow: 0 10px 34px rgba(15, 39, 71, .08); transition: transform .3s cubic-bezier(.25, .8, .25, 1), box-shadow .3s; } .hc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 46px rgba(15, 39, 71, .13); } .hc-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #0A7F75; background: linear-gradient(135deg, rgba(18, 198, 181, .16), rgba(27, 111, 209, .14)); } .hc-card h3 { margin: 6px 0 0; font: 600 1.35rem/1.25 var(--tt-font-display, 'Fraunces', Georgia, serif); color: var(--tt-ink, #0F2747); } .hc-card p { margin: 0; flex: 1; font-size: .96rem; line-height: 1.65; color: var(--tt-ink-2, #52627a); } .hc-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 13px 24px; border-radius: 99px; color: #fff !important; font: 700 .9rem var(--tt-font-ui, 'Plus Jakarta Sans', sans-serif); text-decoration: none; background: linear-gradient(135deg, #0A8378, #1B62C8); box-shadow: 0 10px 24px rgba(10, 131, 120, .28); transition: transform .2s, box-shadow .2s; } .hc-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10, 131, 120, .36); } .hc-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--tt-caribbean, #12C6B5) 60%, transparent); outline-offset: 3px; } @media (max-width: 1024px) { .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-grid .hc-card:last-child { grid-column: 1 / -1; } } @media (max-width: 768px) { .hc-section { padding: 72px 20px; } .hc-grid { grid-template-columns: 1fr; } .hc-grid .hc-card:last-child { grid-column: auto; } .hc-card { padding: 28px 24px; } .hc-btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .hc-card, .hc-btn { transition: none; } } /* ── Hotfix UX 2.5C · Modal legal premium (Términos / Privacidad / Cancelación) ── */ .lg-ov { position: fixed; inset: 0; z-index: 99998; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 39, 71, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lg-card { width: 100%; max-width: 720px; height: 82vh; display: flex; flex-direction: column; background: #fff; color: #334155; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 80px rgba(15, 39, 71, .35); font-family: var(--tt-font-ui, 'Plus Jakarta Sans', sans-serif); animation: lgIn .25s cubic-bezier(.25, .8, .25, 1) both; } .lg-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 28px; border-bottom: 1px solid #e3eaf3; background: #fff; } .lg-head h3 { margin: 0; font: 600 1.15rem var(--tt-font-display, 'Fraunces', Georgia, serif); color: #0F2747; } .lg-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #dbe4f0; background: #fff; color: #52627a; font-size: .85rem; cursor: pointer; } .lg-x:hover { color: #0A7F75; border-color: #0A7F75; } .lg-body { flex: 1; overflow-y: auto; padding: 24px 28px; overscroll-behavior: contain; } .lg-foot { flex: none; padding: 16px 28px; border-top: 1px solid #e3eaf3; background: #fff; } .lg-ok { width: 100%; min-height: 48px; border: 0; border-radius: 99px; cursor: pointer; color: #fff; font: 700 .92rem var(--tt-font-ui, 'Plus Jakarta Sans', sans-serif); background: linear-gradient(135deg, #0A8378, #1B62C8); box-shadow: 0 10px 24px rgba(10, 131, 120, .28); transition: transform .2s; } .lg-ok:hover { transform: translateY(-2px); } .lg-x:focus-visible, .lg-ok:focus-visible { outline: 3px solid rgba(18, 198, 181, .6); outline-offset: 2px; } /* el contenido legal (sin cambios) usaba colores claros sobre fondo oscuro: se reasignan a tinta sobre blanco */ #legalModalContent { font-size: .9rem; line-height: 1.75; color: #475569 !important; } #legalModalContent h2, #legalModalContent h3, #legalModalContent strong, #legalModalContent b { color: #0F2747 !important; } #legalModalContent h2 { font-family: var(--tt-font-display, 'Fraunces', Georgia, serif) !important; font-weight: 600 !important; } #legalModalContent a { color: #0A7F75 !important; } #legalModalContent [style*="background:rgba(11,206,175"], #legalModalContent [style*="background:rgba(255"] { color: #0F2747; } @keyframes lgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .lg-ov { padding: 12px; } .lg-card { height: 86vh; border-radius: 24px; } .lg-head, .lg-body, .lg-foot { padding-left: 20px; padding-right: 20px; } } @media (prefers-reduced-motion: reduce) { .lg-card, .lg-ok { animation: none; transition: none; } } /* ── Fase 2.6 · Asistente por rol — chat premium ─────────────────────────── */ html body #chatWindow { width: 380px !important; max-width: calc(100vw - 24px) !important; max-height: min(600px, calc(100vh - 120px)) !important; height: min(600px, calc(100vh - 120px)); border-radius: 22px !important; box-shadow: 0 24px 70px rgba(5, 17, 42, .45); overflow: hidden; } html body #chatWindow .chat-head { padding: 14px 16px; } .chat-head-actions { display: flex; gap: 6px; } .chat-head-actions .chat-close { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; font-size: .9rem; } html body #chatWindow .chat-messages { padding: 16px 14px; gap: 10px; overscroll-behavior: contain; } html body #chatWindow .chat-msg { max-width: 88%; white-space: pre-wrap; font-size: .86rem; line-height: 1.55; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } html body #chatWindow .chat-msg.bot { border-bottom-left-radius: 5px; } html body #chatWindow .chat-msg.user { border-bottom-right-radius: 5px; } .chat-typing { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px !important; } .chat-typing-lbl { font-size: .74rem; color: var(--muted); } .chat-dots { display: inline-flex; gap: 4px; } .chat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); opacity: .35; animation: chatDot 1.1s infinite ease-in-out; } .chat-dots i:nth-child(2) { animation-delay: .16s; } .chat-dots i:nth-child(3) { animation-delay: .32s; } @keyframes chatDot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } } html body #chatWindow .chat-suggestions { flex-wrap: nowrap; overflow-x: auto; gap: 7px; padding: 9px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } html body #chatWindow .chat-suggestions::-webkit-scrollbar { display: none; } html body #chatWindow .chat-sug { flex: none; white-space: nowrap; padding: 7px 13px; border-radius: 99px; font-size: .76rem; } html body #chatWindow .chat-input-row { align-items: flex-end; padding: 10px 12px; gap: 8px; } html body #chatWindow .chat-input { resize: none; min-height: 40px; max-height: 96px; line-height: 1.4; padding: 10px 13px; border-radius: 14px; font-size: .88rem; font-family: inherit; overflow-y: auto; } html body #chatWindow .chat-send { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; } html body #chatWindow .chat-send:disabled { opacity: .5; cursor: default; transform: none; } @media (max-width: 480px) { html body #chatWindow { left: 8px !important; right: 8px !important; bottom: 82px !important; width: auto !important; max-width: none !important; height: calc(100vh - 110px); max-height: calc(100vh - 110px) !important; border-radius: 20px !important; } html body #chatBtn { right: 14px !important; bottom: 16px !important; } html body #chatWindow .chat-msg { max-width: 92%; font-size: .85rem; } } @media (max-width: 360px) { html body #chatWindow { left: 6px !important; right: 6px !important; bottom: 78px !important; } html body #chatWindow .chat-head { padding: 12px; } html body #chatWindow .chat-head-name { font-size: .84rem; } html body #chatWindow .chat-msg { font-size: .82rem; padding: 9px 12px; } html body #chatWindow .chat-input { font-size: .84rem; } } @media (prefers-reduced-motion: reduce) { .chat-dots i { animation: none; opacity: .8; } } /* ── Hotfix RC 1.0.3 · Chat premium UX ───────────────────────────────────── */ /* Cabecera */ html body #chatWindow .chat-head-avatar { position: relative; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.12)); border: 1.5px solid rgba(255,255,255,.55); box-shadow: 0 4px 14px rgba(0,0,0,.18); display: grid; place-items: center; font-size: 0; } .chat-online { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #38e08a; border: 2px solid #0f9d9a; box-shadow: 0 0 0 0 rgba(56,224,138,.6); animation: chatPulse2 2.2s infinite; } @keyframes chatPulse2 { 0% { box-shadow: 0 0 0 0 rgba(56,224,138,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(56,224,138,0); } } html body #chatWindow .chat-head-sub { font-weight: 600; letter-spacing: .01em; } /* Apertura y mensajes */ html body #chatWindow.open { transform-origin: bottom right; animation: chatOpen .24s cubic-bezier(.2,.8,.25,1) both !important; } @keyframes chatOpen { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } } html body #chatWindow .chat-msg:not(.no-anim), html body #chatWindow .chat-row:not(.no-anim) { animation: chatIn .28s cubic-bezier(.2,.8,.25,1) both; } @keyframes chatIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Mensajes del guía: avatar 42×42 + nombre + estado, a la izquierda */ .chat-row.guide { display: flex; align-items: flex-start; gap: 10px; align-self: flex-start; max-width: 100%; min-width: 0; } .chat-gav { flex: none; width: 68px; text-align: center; } .chat-gav-img { width: 42px; height: 42px; margin: 0 auto 4px; border-radius: 50%; overflow: hidden; border: 2px solid var(--teal); box-shadow: 0 3px 10px rgba(11,206,175,.28); background: var(--glass2); } .chat-gav-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .chat-gav-img.ph { display: grid; place-items: center; color: #fff; font: 800 1rem 'Plus Jakarta Sans', sans-serif; background: linear-gradient(135deg, var(--teal), var(--ocean)); } .chat-gav-name { font-size: .68rem; font-weight: 700; color: var(--text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-gav-st { font-size: .6rem; font-weight: 700; color: var(--teal); margin-top: 1px; white-space: nowrap; } html body #chatWindow .chat-row.guide .chat-msg { max-width: none; flex: 1; min-width: 0; } /* Chips: carrusel deslizable */ html body #chatWindow .chat-suggestions { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 10px 18px; min-width: 0; max-width: 100%; box-sizing: border-box; scroll-snap-type: x proximity; scroll-padding-inline: 18px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 26px), transparent 100%); } html body #chatWindow .chat-suggestions::-webkit-scrollbar { display: none; width: 0; height: 0; } html body #chatWindow .chat-suggestions.dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; } html body #chatWindow .chat-sug { flex: none; scroll-snap-align: start; white-space: nowrap; padding: 8px 15px; border-radius: 99px; font-size: .78rem; font-weight: 600; transition: transform .18s, background .18s, border-color .18s, color .18s, box-shadow .18s; } html body #chatWindow .chat-sug:hover { transform: translateY(-2px); background: rgba(11,206,175,.14); border-color: rgba(11,206,175,.6); color: var(--teal); box-shadow: 0 6px 16px rgba(11,206,175,.22); } html body #chatWindow .chat-sug:active { transform: translateY(0) scale(.97); } /* Input */ html body #chatWindow .chat-input-row { align-items: flex-end; padding: 10px 14px 14px; gap: 10px; } html body #chatWindow .chat-input { box-sizing: border-box; min-height: 48px; height: 48px; max-height: 96px; padding: 13px 16px; line-height: 20px; border-radius: 16px; border: 1.5px solid rgba(11,206,175,.65); background: var(--glass); resize: none; font-size: .9rem; } html body #chatWindow .chat-input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(11,206,175,.14); } html body #chatWindow .chat-send { flex: none; width: 40px; height: 40px; margin: 0 0 4px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.05rem; } @media (max-width: 480px) { html body #chatWindow .chat-suggestions { padding-inline: 14px; } .chat-gav { width: 60px; } } @media (max-width: 360px) { .chat-gav { width: 54px; } .chat-row.guide { gap: 8px; } html body #chatWindow .chat-input-row { padding-inline: 10px; } } @media (prefers-reduced-motion: reduce) { html body #chatWindow.open, html body #chatWindow .chat-msg, html body #chatWindow .chat-row, .chat-online { animation: none !important; } html body #chatWindow .chat-sug { transition: none; } } /* RC 1.0.3 — estado del guía sin recortes */ .chat-gav { width: 76px; } .chat-gav-name { font-size: .7rem; } .chat-gav-st { white-space: normal; font-size: .6rem; line-height: 1.15; margin-top: 2px; } @media (max-width: 480px) { .chat-gav { width: 70px; } } @media (max-width: 360px) { .chat-gav { width: 64px; } .chat-gav-st { font-size: .56rem; } } /* ── RC 1.1.3A/B — Solicitud de Turista Premium por transferencia ── */ /* selector Sí / No: componente compartido .pm-choice (css/payment-sheet.css) */ .pum-status { margin: 0; padding: 12px 14px; border-radius: var(--tt-r-md); font-size: .82rem; line-height: 1.5; } .pum-status p { margin: 4px 0 0; } .pum-status--pend { background: rgba(255,197,61,.10); border: 1px solid rgba(255,197,61,.35); } .pum-status--ok { background: rgba(18,198,181,.10); border: 1px solid rgba(18,198,181,.35); } .pum-status--rej { background: rgba(255,120,117,.10); border: 1px solid rgba(255,120,117,.35); }