/* Transfers Group: estilos del sitio. Concepto: limpio y sobrio (blanco y negro) con el dorado de la marca como único acento. */ :root { --bg: #0D0E10; --bg-alt: #15171A; --card: #17191C; --ink: #F1F1EE; --ink-soft: #D5D6D2; --muted: #9EA1A6; --line: #2A2C30; --gold: #FFA500; --gold-brand: #FFA500; --btn: #FFA500; --btn-ink: #121314; --field: #1E2024; --ok: #4CC38A; --danger-bg: #3A1D1B; --danger: #FF9A92; --board: #08090A; --board-line: #222428; --board-text: #F3C46A; --board-dim: #8D8F92; --font: "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --r-sm: 10px; --r: 16px; --r-lg: 24px; --shadow: 0 24px 60px -28px rgba(0, 0, 0, .6); --gl: max(20px, env(safe-area-inset-left, 0px)); --gr: max(20px, env(safe-area-inset-right, 0px)); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: 3px solid var(--gold-brand); outline-offset: 3px; border-radius: 6px; } h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; font-weight: 800; } p { margin: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { max-width: 1200px; margin-inline: auto; padding-left: var(--gl); padding-right: var(--gr); } .label { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .section { padding-block: clamp(64px, 8vw, 112px); } .section.alt { background: var(--bg-alt); } .head { display: grid; gap: 12px; max-width: 700px; margin-bottom: clamp(32px, 4vw, 48px); } .head h2 { font-size: clamp(2rem, 4vw, 3rem); } .head p { color: var(--muted); font-size: 1.05rem; max-width: 60ch; } .head-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: end; justify-content: space-between; margin-bottom: clamp(32px, 4vw, 48px); } .head-row .head { margin-bottom: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent; font: inherit; font-weight: 700; font-size: .98rem; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; } .btn:hover { transform: translateY(-1px); } .btn svg { width: 20px; height: 20px; flex: none; } .btn-dark { background: var(--btn); color: var(--btn-ink); } .btn-line { border-color: var(--line); color: var(--ink); background: transparent; } .btn-line:hover { border-color: var(--ink); } .btn-gold { background: var(--gold-brand); color: #121314; } .link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; } .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---------- Header ---------- */ .topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); } .topbar .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; } .brand svg { width: 44px; height: 36px; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-text b { font-weight: 800; font-size: 1.05rem; letter-spacing: .12em; } .brand-text span { font-size: .62rem; letter-spacing: .26em; color: var(--muted); margin-top: 5px; font-weight: 600; } .nav { display: flex; gap: 2px; margin-left: auto; } .nav a { text-decoration: none; font-weight: 600; font-size: .94rem; padding: 8px 12px; border-radius: 999px; } .nav a:hover { background: var(--bg-alt); } .lang { display: flex; gap: 2px; font-weight: 700; font-size: .8rem; } .lang a { text-decoration: none; padding: 6px 8px; border-radius: 8px; color: var(--muted); } .lang a[aria-current="true"] { color: var(--ink); background: var(--bg-alt); } .top-cta { display: none; } .nav-lang { display: none; } .menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; } @media (min-width: 600px) { .top-cta { display: inline-flex; flex: none; min-height: 44px; padding: 0 18px; font-size: .9rem; white-space: nowrap; } } @media (max-width: 599px) { .menu-btn { margin-left: auto !important; } } @media (min-width: 1161px) { .topbar .wrap { gap: 12px; } .nav a { padding: 8px 9px; font-size: .9rem; } .brand-text span { letter-spacing: .2em; } } @media (max-width: 1160px) { .top-cta { order: 2; margin-left: auto; } .menu-btn { order: 3; margin-left: 0; } } @media (max-width: 1160px) { .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gr) 16px var(--gl); } .nav.open { display: flex; } .nav a { border-radius: 0; padding: 14px 4px; border-bottom: 1px solid var(--line); } .menu-btn { display: inline-grid; place-items: center; } .lang { display: none; } .nav a:last-of-type { border-bottom: 0; } .nav-lang { display: flex; gap: 8px; padding-top: 14px; } .nav .nav-lang a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: .88rem; } .nav .nav-lang a[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } } @media (max-width: 420px) { .brand-text span { display: none; } .topbar .wrap { gap: 12px; } } /* ---------- Hero ---------- */ .hero { position: relative; color: #FFFFFF; isolation: isolate; background: #0A0B0D; } .hero-bg { position: absolute; inset: 0 0 auto; height: var(--hero-h, 100%); z-index: -2; } .hero-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(rgba(17, 18, 20, 0), #111214); } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; } .hero::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--hero-h, 100%); z-index: -1; background: linear-gradient(90deg, rgba(8, 9, 11, .88) 0%, rgba(8, 9, 11, .66) 45%, rgba(8, 9, 11, .30) 100%); } .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: clamp(48px, 7vw, 96px); } .hero .label { color: var(--gold-brand); font-size: clamp(.95rem, 1.5vw, 1.15rem); letter-spacing: .12em; } .hero { --h1fs: clamp(2.5rem, 5.6vw, 4.4rem); } .hero h1 { font-size: var(--h1fs); margin-top: 16px; } .hero h1 span { color: var(--gold-brand); } .hero-lead { margin-top: 40px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 400; line-height: 1.5; color: var(--ink-soft); max-width: min(100%, calc(var(--h1fs) * 8.58)); } .hero-points { list-style: none; margin: 56px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; max-width: min(100%, calc(var(--h1fs) * 8.58)); } .hero-points li { position: relative; padding-left: 30px; font-size: .95rem; font-weight: 600; line-height: 1.45; min-width: 0; } .hero-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 16px; height: 2px; background: var(--gold-brand); border-radius: 2px; } .hero-points .hp { display: block; color: var(--ink); min-width: 0; } @media (min-width: 901px) { .hero-points li { font-size: .95rem; } .hero-points .hp { white-space: nowrap; } .hero-points br.m { display: none; } } @media (min-width: 1240px) { .hero-points { display: grid; grid-template-columns: max-content max-content; justify-content: space-between; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 12px; row-gap: 24px; } .hero-points li { font-size: .73rem; padding-left: 20px; } .hero-points li::before { width: 12px; } } .hero-rating { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); text-decoration: none; font-size: .92rem; backdrop-filter: blur(6px); } .hero-rating b { font-size: 1.1rem; } @media (min-width: 901px) { .hero .wrap > div:first-child { align-self: start; padding-top: 6px; } .hero .wrap { min-height: 0; } .hero { overflow: hidden; } } .stars { color: var(--gold-brand); letter-spacing: 1px; } @media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; } .hero::before { background: linear-gradient(180deg, rgba(8, 9, 11, .80) 0%, rgba(8, 9, 11, .70) 40%, rgba(8, 9, 11, .92) 100%); } } @media (max-width: 640px) { .hero-points { display: none; } .hero-rating { margin-top: 24px; } } /* ---------- Calculator ---------- */ .calc-card { background: var(--card); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow); scroll-margin-top: 90px; } @media (min-width: 901px) { .calc-card { height: min(540px, calc(100vh - 110px)); display: flex; flex-direction: column; overflow: hidden; } .calc-card > * { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .calc-card .calc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; } .calc-card .calc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 165, 0, .55) rgba(255, 255, 255, .06); margin-right: -6px; padding-right: 18px; } .calc-card .calc-body::-webkit-scrollbar { width: 6px; } .calc-card .calc-body::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 6px; margin: 8px 0; } .calc-card .calc-body::-webkit-scrollbar-thumb { background: rgba(255, 165, 0, .6); border-radius: 6px; } .calc-card .calc-body::-webkit-scrollbar-thumb:hover { background: var(--gold-brand); } } .calc { padding: 24px; } .calc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .calc-step { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--muted); } .calc-step.active { border-color: var(--ink); color: var(--ink); } .calc-step.done { border-color: var(--gold); color: var(--ink); cursor: pointer; } .calc-step-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-alt); font-family: var(--mono); font-size: .75rem; flex: none; } .calc-step.active .calc-step-num { background: var(--ink); color: var(--bg); } .calc-step.done .calc-step-num { background: var(--gold); color: #fff; } .calc-step-num svg { width: 14px; height: 14px; } .calc-title { font-size: 1.35rem; margin: 20px 0 16px; } .calc-form { display: grid; gap: 14px; } .calc-row { display: flex; gap: 12px; } .calc-row > .calc-field { flex: 1; min-width: 0; } .calc-field { display: grid; gap: 6px; min-width: 0; } .calc-field--short { flex: 0 0 120px !important; } .calc-field--code { flex: 0 0 150px !important; } .calc-field label, .calc-label { font-size: .78rem; font-weight: 700; color: var(--ink-soft); } .calc-field input, .calc-field select, .calc-field textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink); font: inherit; font-size: 1rem; } .calc-field textarea { min-height: 84px; resize: vertical; } .calc-field input:focus, .calc-field select:focus, .calc-field textarea:focus { outline: none; border-color: var(--ink); background: var(--card); } @media (max-width: 520px) { .calc-row { flex-direction: column; } .calc-field--short, .calc-field--code { flex: 1 !important; } } .calc-bullets { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; font-size: .84rem; color: var(--muted); } .calc-bullets li { display: flex; gap: 8px; align-items: center; } .calc-bullets svg { width: 16px; height: 16px; color: var(--ok); flex: none; } .calc-error { background: var(--danger-bg); color: var(--danger); border-radius: 12px; padding: 12px 14px; font-size: .88rem; font-weight: 600; } .calc-empty { padding: 20px; text-align: center; color: var(--muted); } .calc-nav { display: flex; gap: 10px; margin-top: 4px; } .calc-btn { flex: 1; min-height: 52px; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .calc-btn--primary { background: var(--btn); color: var(--btn-ink); border-color: transparent; } .calc-btn--wa { width: 100%; background: #25D366; color: #fff; border-color: transparent; margin-bottom: 14px; } .calc-btn:disabled { opacity: .6; cursor: default; } .calc-note { font-size: .8rem; color: var(--muted); text-align: center; } .calc-route { font-weight: 700; margin-bottom: 12px; font-size: .95rem; } .calc-cars { display: grid; gap: 10px; margin-bottom: 14px; } .calc-car { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "photo info price" "photo info qty"; gap: 4px 12px; align-items: center; padding: 10px; border: 1.5px solid var(--line); border-radius: 14px; } .calc-car.selected { border-color: var(--gold); } .calc-car-photo { grid-area: photo; } .calc-car-photo img { width: 96px; height: 60px; object-fit: cover; border-radius: 10px; } .calc-car-info { grid-area: info; min-width: 0; } .calc-car-name { font-weight: 700; font-size: .92rem; line-height: 1.3; } .calc-car-meta { display: flex; gap: 12px; margin-top: 4px; font-size: .78rem; color: var(--muted); } .calc-car-meta span { display: inline-flex; gap: 4px; align-items: center; } .calc-car-meta svg { width: 14px; height: 14px; } .calc-car-price { grid-area: price; font-weight: 800; font-size: 1.05rem; text-align: right; font-variant-numeric: tabular-nums; } .calc-car-qty { grid-area: qty; display: flex; align-items: center; gap: 8px; justify-self: end; } .calc-qty-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; } .calc-qty-btn:disabled { opacity: .35; cursor: default; } .calc-qty-val { min-width: 16px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; } .calc-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 700; } .calc-total strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; } .calc-toggles { display: flex; flex-wrap: wrap; gap: 8px; } .calc-toggle { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; } .calc-toggle.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .calc-checks { display: flex; flex-wrap: wrap; gap: 16px; } .calc-check { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: .92rem; cursor: pointer; } .calc-check input { width: 18px; height: 18px; accent-color: var(--gold); } .calc-lead { color: var(--muted); margin-bottom: 16px; } .calc-summary { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .calc-summary summary { cursor: pointer; font-weight: 700; } .calc-summary pre { white-space: pre-wrap; font-family: var(--font); font-size: .85rem; margin: 10px 0 0; color: var(--ink-soft); } /* ---------- Trust strip ---------- */ .trust { border-bottom: 1px solid var(--line); } .trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .trust li { display: flex; gap: 14px; align-items: center; padding: 26px 20px; border-left: 1px solid var(--line); } .trust li:first-child { border-left: 0; padding-left: 0; } .trust svg { width: 28px; height: 28px; color: var(--gold); flex: none; } .trust b { display: block; font-size: .98rem; } .trust span { color: var(--muted); font-size: .86rem; } @media (max-width: 900px) { .trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust li:nth-child(3) { border-left: 0; padding-left: 0; } .trust li { border-top: 1px solid var(--line); } .trust li:nth-child(-n+2) { border-top: 0; } } @media (max-width: 520px) { .trust ul { grid-template-columns: 1fr; } .trust li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .trust li:first-child { border-top: 0; } } /* ---------- Services ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .svc { display: flex; flex-direction: column; text-decoration: none; min-width: 0; } .svc-img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--bg-alt); } .svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .svc:hover .svc-img img { transform: scale(1.04); } .svc-tag { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(12, 13, 15, .78); color: #FFFFFF; font-size: .8rem; font-weight: 700; backdrop-filter: blur(6px); } .svc h3 { font-size: 1.25rem; margin-top: 16px; letter-spacing: -.015em; } .svc p { color: var(--muted); font-size: .93rem; margin-top: 6px; } .svc-sub { margin: clamp(44px, 5vw, 60px) 0 16px; font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .svc-pro-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .svc-pro { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-decoration: none; min-width: 0; transition: border-color .2s, transform .2s; } .svc-pro:hover { border-color: var(--gold); transform: translateY(-2px); } .svc-pro > svg { width: 28px; height: 28px; flex: none; color: var(--gold); } .svc-pro div { flex: 1; min-width: 0; } .svc-pro h3 { font-size: .98rem; line-height: 1.25; } .svc-pro p { color: var(--muted); font-size: .84rem; margin-top: 3px; line-height: 1.4; } .svc-go { color: var(--muted); font-weight: 700; transition: transform .2s, color .2s; } .svc-pro:hover .svc-go { color: var(--gold); transform: translateX(3px); } @media (max-width: 1100px) { .svc-pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .svc-grid { gap: 28px 14px; } .svc h3 { font-size: 1.05rem; } .svc p { font-size: .86rem; } .svc-pro-grid { grid-template-columns: 1fr; } } /* ---------- Fleet ---------- */ .fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; } .car { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-width: 0; } .car-img { aspect-ratio: 16 / 10; background: var(--bg-alt); } .car-img img { width: 100%; height: 100%; object-fit: cover; } .car-body { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; flex: 1; } .car-class { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .car h3 { font-size: 1.3rem; margin-top: -6px; } .car-cap { display: flex; gap: 18px; font-size: .9rem; color: var(--muted); font-weight: 600; } .car-cap span { display: inline-flex; align-items: center; gap: 6px; } .car-cap svg { width: 18px; height: 18px; } .car-price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); margin-top: auto; } .car-price small { color: var(--muted); font-size: .82rem; line-height: 1.35; } .car-price b { font-size: 1.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .car-actions { display: flex; gap: 10px; } .car-actions .btn { flex: 1; min-height: 46px; font-size: .92rem; padding: 0 14px; } .fleet-more { margin-top: 24px; color: var(--muted); } .fleet-more a { color: var(--ink); font-weight: 700; } /* ---------- Routes board ---------- */ .board-sec { background: var(--board); color: #ECEDEA; } .board-sec .label { color: var(--board-text); } .board-sec .head h2 { color: #F6F6F3; } .board-sec .head p { color: #A6A9AD; } .board { position: relative; overflow-x: auto; border: 1px solid var(--board-line); border-radius: var(--r); } .board table { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: collapse; font-family: var(--mono); font-size: .92rem; } .board th:nth-child(1) { width: 36%; } .board th:nth-child(2) { width: 17%; } .board th:nth-child(3) { width: 15%; } .board th:nth-child(4) { width: 13%; } .board th:nth-child(5) { width: 19%; } .board td { white-space: nowrap; overflow: hidden; text-overflow: clip; } .board td:last-child { text-align: right; } .board th { text-align: left; padding: 14px 18px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--board-dim); border-bottom: 1px solid var(--board-line); font-weight: 700; } .board td { padding: 14px 18px; border-bottom: 1px solid #1A1C1F; color: var(--board-text); font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; } .board tr:last-child td { border-bottom: 0; } .board td.dim { color: #C5C7C9; font-weight: 500; } .board td.num { text-align: right; } .board th.num { text-align: right; } .board a { color: var(--board-text); text-decoration: none; } .board tbody tr { transition: background-color .15s ease; } .board tbody tr:hover { background: #17191C; } .board .go { color: #F6F6F3; font-family: var(--font); font-weight: 700; font-size: .85rem; letter-spacing: 0; } .board-foot { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; margin-top: 22px; color: #A6A9AD; font-size: .9rem; } /* ---------- Excursions ---------- */ .exc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 16px; } .exc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: #FFFFFF; isolation: isolate; background: #222; } .exc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; } .exc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .78) 100%); } .exc:hover img { transform: scale(1.05); } .exc .where { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-brand); } .exc h3 { font-size: 1.2rem; margin-top: 6px; } .exc.big { grid-column: span 2; grid-row: span 2; } .exc.big h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .exc.wide { grid-column: span 2; } @media (max-width: 1000px) { .exc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; } .exc.big { grid-row: span 1; } } @media (max-width: 560px) { .exc-grid { grid-template-columns: 1fr; } .exc.big, .exc.wide { grid-column: auto; } } /* ---------- How it works ---------- */ .how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .how-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; } .how-img img { width: 100%; height: 100%; object-fit: cover; } .how ol { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; counter-reset: s; } .how li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; counter-increment: s; } .how li::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); font-family: var(--mono); font-weight: 700; } .how li b { display: block; font-size: 1.05rem; } .how li span { color: var(--muted); } @media (max-width: 900px) { .how { grid-template-columns: 1fr; } } /* ---------- Reviews ---------- */ .score { display: flex; align-items: center; gap: 16px; text-decoration: none; } .score b { font-size: 3.4rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; } .score small { display: block; color: var(--muted); font-size: .88rem; } .rev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .rev { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; } .rev blockquote { margin: 0; font-size: 1rem; color: var(--ink-soft); } .rev figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: .92rem; } .rev .av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-alt); color: var(--gold); font-weight: 800; flex: none; } .rev figcaption span { display: block; color: var(--muted); font-weight: 500; font-size: .8rem; } @media (max-width: 900px) { .rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .rev-grid { grid-template-columns: 1fr; } } /* ---------- Why + B2B ---------- */ .why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .why svg { width: 32px; height: 32px; color: var(--gold); } .why h3 { font-size: 1.12rem; margin: 16px 0 8px; } .why p { color: var(--muted); font-size: .94rem; } @media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } } .b2b { position: relative; margin-top: clamp(56px, 7vw, 88px); border-radius: var(--r-lg); overflow: hidden; color: #FFFFFF; isolation: isolate; background: #111214; } .b2b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .b2b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 9, 11, .9) 0%, rgba(8, 9, 11, .6) 60%, rgba(8, 9, 11, .35) 100%); } .b2b-inner { padding: clamp(32px, 5vw, 64px); max-width: 640px; display: grid; gap: 16px; } .b2b .label { color: var(--gold-brand); } .b2b h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); } .b2b p { color: rgba(255, 255, 255, .82); } .b2b .btn { justify-self: start; margin-top: 8px; } /* ---------- Blog ---------- */ .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .post { text-decoration: none; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .post-img { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--bg-alt); } .post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .post:hover .post-img img { transform: scale(1.04); } .post time { font-family: var(--mono); font-size: .75rem; color: var(--muted); } .post h3 { font-size: 1.15rem; } @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } .blog-grid .post:last-child { display: none; } } @media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } .blog-grid .post:last-child { display: flex; } } /* ---------- FAQ ---------- */ .faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); } .faq-list { display: grid; gap: 0; border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 700; font-size: 1.05rem; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--gold); flex: none; line-height: 1; } .faq-list details[open] summary::after { content: "−"; } .faq-list details p { padding: 0 0 22px; color: var(--muted); max-width: 64ch; } @media (max-width: 900px) { .faq { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .footer { background: var(--board); color: #B9BBBE; padding-block: 64px calc(36px + env(safe-area-inset-bottom, 0px)); } .footer a { color: #F3F3F0; text-decoration: none; } .footer a:hover { text-decoration: underline; } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px; } .foot-brand .brand { color: #F3F3F0; } .foot-brand p { margin-top: 16px; font-size: .92rem; max-width: 34ch; } .foot-grid h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--board-text); margin-bottom: 14px; font-weight: 700; } .foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .94rem; } .foot-bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; margin-top: 48px; padding-top: 22px; border-top: 1px solid #222428; font-size: .84rem; color: #85888C; } @media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } } /* ---------- Floating WhatsApp ---------- */ .wa-fab { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #FFFFFF; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5); } .wa-fab svg { width: 30px; height: 30px; } html:not(.fab-on) .wa-fab { opacity: 0; pointer-events: none; } .wa-fab { transition: opacity .25s ease; } /* ========================================================= Páginas interiores ========================================================= */ .crumbs { padding-top: 20px; font-size: .84rem; color: var(--muted); } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); } .crumbs a { text-decoration: none; color: var(--muted); } .crumbs a:hover { color: var(--ink); text-decoration: underline; } .crumbs [aria-current] { color: var(--ink); font-weight: 600; } .page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 72px); } .page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); margin-top: 12px; } .page-hero .intro { margin-top: 18px; font-size: 1.08rem; color: var(--muted); max-width: 58ch; } .page-hero .intro strong { font-weight: 600; color: var(--muted); } .page-hero .intro p + p { margin-top: 10px; } .page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .page-hero-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-alt); } .page-hero-img img { width: 100%; height: 100%; object-fit: cover; } .page-hero.no-img .wrap { grid-template-columns: 1fr; } @media (max-width: 900px) { .page-hero .wrap { grid-template-columns: 1fr; } .page-hero-img { aspect-ratio: 16 / 10; } } .page-body { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); } .page-body .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 5vw, 72px); align-items: start; } .page-body.single .wrap { grid-template-columns: minmax(0, 820px); } .page-aside { position: sticky; top: calc(88px + env(safe-area-inset-top, 0px)); display: grid; gap: 20px; } @media (max-width: 1000px) { .page-body .wrap { grid-template-columns: 1fr; } .page-aside { position: static; } } .prose { font-size: 1.04rem; color: var(--ink-soft); min-width: 0; } .prose > * + * { margin-top: 1em; } .prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink); margin-top: 1.8em; } .prose h3 { font-size: 1.25rem; color: var(--ink); margin-top: 1.6em; letter-spacing: -.01em; } .prose h4 { font-size: 1.05rem; color: var(--ink); margin-top: 1.4em; } .prose > :first-child { margin-top: 0; } .prose strong { color: var(--ink); font-weight: 700; } .prose a { color: var(--ink); text-decoration-color: var(--gold-brand); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--gold); } .prose img { border-radius: var(--r); width: 100%; } .prose figure { margin: 1.6em 0; } .prose figcaption { font-size: .86rem; color: var(--muted); margin-top: 8px; } .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; } .prose .table-scroll { overflow-x: auto; } .prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); } .prose blockquote { margin-left: 0; padding-left: 18px; border-left: 3px solid var(--gold-brand); } .prose .why-block { margin-top: 2.4em; padding-top: 2em; border-top: 1px solid var(--line); } .highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 2em 0 !important; } .highlights figure { margin: 0; display: grid; gap: 10px; } .highlights img { aspect-ratio: 4 / 3; object-fit: cover; } .highlights figcaption { font-size: .92rem; font-weight: 600; color: var(--ink); margin: 0; } @media (max-width: 640px) { .highlights { grid-template-columns: 1fr; } } .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 2em 0 !important; } .gallery img { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); } @media (max-width: 640px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .price-box { margin: 0 0 2.2em !important; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); } .price-box h2 { font-size: 1.15rem !important; margin: 0 !important; padding: 18px 20px; border-bottom: 1px solid var(--line); } .price-box table { width: 100%; border-collapse: collapse; font-size: .95rem; } .price-box th, .price-box td { padding: 12px 20px; border-bottom: 1px solid var(--line); text-align: left; } .price-box th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .price-box td.num, .price-box th.num { text-align: right; font-variant-numeric: tabular-nums; } .price-box td.num { font-weight: 800; color: var(--ink); } .price-box tr:last-child td { border-bottom: 0; } .price-box .cap { color: var(--muted); font-size: .85rem; white-space: nowrap; } .price-box p { padding: 12px 20px; margin: 0 !important; font-size: .84rem; color: var(--muted); background: var(--bg-alt); } .price-box .table-scroll { overflow-x: auto; } .contact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 14px; box-shadow: var(--shadow); } .contact-card h2, .contact-card h3 { font-size: 1.3rem; } .contact-card p { color: var(--muted); font-size: .95rem; } .contact-card .btn { width: 100%; } .contact-card .phone { font-weight: 800; font-size: 1.15rem; text-align: center; user-select: all; } .btn-wa { background: #25D366; color: #FFFFFF; } .related { padding-block: clamp(56px, 7vw, 96px); background: var(--bg-alt); } .card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1000px) { .card-grid, .card-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .card-grid, .card-grid.cols-3 { grid-template-columns: 1fr; } } .tile { display: flex; flex-direction: column; gap: 12px; text-decoration: none; min-width: 0; } .tile-img { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--bg-alt); } .tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .tile:hover .tile-img img { transform: scale(1.04); } .tile h3 { font-size: 1.08rem; letter-spacing: -.01em; } .tile .meta { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; color: var(--muted); } .tile .meta b { color: var(--ink); font-variant-numeric: tabular-nums; } .tile .kind { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 28px; } .filter-bar input { flex: 1 1 260px; min-height: 50px; padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--field); color: var(--ink); font: inherit; font-size: 1rem; } .filter-bar input:focus { outline: none; border-color: var(--ink); background: var(--card); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; } .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .filter-empty { color: var(--muted); padding: 24px 0; } .list-intro { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); max-width: 820px; } .reviews-strip { padding-block: clamp(56px, 7vw, 96px); } .thanks { text-align: center; padding-block: clamp(80px, 12vw, 160px); } .thanks h1 { font-size: clamp(2rem, 4vw, 3rem); } .thanks p { color: var(--muted); max-width: 52ch; margin: 16px auto 0; } .thanks .btn { margin-top: 28px; } .car-specs { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; } .car-specs li { margin: 0 !important; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; } .dest-item[hidden] { display: none; } .dest-grid .tile h3 { font-size: 1rem; } .price-box svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; } /* ---------- Reviews carousel ---------- */ .reviews-strip { background: var(--bg); } .rev-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; } .rev-track::-webkit-scrollbar { display: none; } .rev-track .rev { scroll-snap-align: start; } .rev .stars { font-size: .9rem; } .rev-controls { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .rev-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.2rem; cursor: pointer; } .rev-btn:hover { border-color: var(--ink); } .rev-btn:disabled { opacity: .35; cursor: default; } .rev-note { margin-top: 14px; font-size: .86rem; color: var(--muted); } .rev-note a { color: var(--ink); font-weight: 700; } @media (max-width: 900px) { .rev-track { grid-auto-columns: calc((100% - 20px) / 2); } } @media (max-width: 600px) { .rev-track { grid-auto-columns: 86%; } .rev-controls { justify-content: flex-start; } } /* ---------- Cookie bar ---------- */ .cookie-bar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; width: 100%; background: var(--card); color: var(--ink); border-top: 1px solid var(--line); padding: 14px max(20px, env(safe-area-inset-left, 0px)) 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .88rem; box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .7); } .cookie-bar p { margin: 0; color: var(--ink-soft); flex: 1; } .cookie-bar a { font-weight: 700; color: var(--ink); } .cookie-actions { display: flex; gap: 10px; flex: none; } .cookie-actions .btn { min-height: 42px; padding: 0 22px; font-size: .9rem; } @media (max-width: 640px) { .cookie-bar { flex-direction: column; align-items: stretch; gap: 12px; } .cookie-actions .btn { flex: 1; } } /* ---------- Calculator mode switch ---------- */ .calc-mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--bg-alt); border-radius: 999px; } .calc-mode button { min-height: 42px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; } .calc-mode button.on { background: var(--card); color: var(--ink); box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .18); } .calc-car-rate { font-size: .78rem; color: var(--gold); font-weight: 700; margin-top: 2px; } .exc-price { position: absolute; top: 16px; right: 16px; background: rgba(10, 10, 12, .72); color: #FFFFFF; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .85rem; backdrop-filter: blur(4px); } .exc-prices { margin: 0 !important; } .exc-prices ul { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 0; } .exc-prices li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0 !important; } .exc-prices li:last-child { border-bottom: 0; } .exc-prices li b { font-size: 1.15rem; font-variant-numeric: tabular-nums; } .feature-list { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; } .feature-list li { display: flex; gap: 10px; align-items: center; margin: 0 !important; } .feature-list svg { width: 18px; height: 18px; color: var(--ok); flex: none; } @media (max-width: 520px) { .feature-list { grid-template-columns: 1fr; } } /* ---------- Fleet carousel ---------- */ .fleet-sec { background: var(--bg); } .pax { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pax-label { font-size: .86rem; font-weight: 700; color: var(--ink-soft); margin-right: 4px; } .pax button { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; } .pax button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .pax-note { width: 100%; font-size: .86rem; color: var(--muted); min-height: 1.4em; } .cf { position: relative; margin-top: 10px; } .cf-stage { position: relative; aspect-ratio: 2.2; max-height: 520px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 6%, #000 22%, #000 78%, rgba(0, 0, 0, .35) 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 6%, #000 22%, #000 78%, rgba(0, 0, 0, .35) 94%, transparent 100%); } .cf-item { position: absolute; top: 14px; left: 50%; width: min(60%, 720px); aspect-ratio: 16 / 10; margin: 0; cursor: pointer; transform: translateX(-50%) scale(.6); opacity: 0; filter: blur(4px); transition: transform .7s cubic-bezier(.22, .8, .24, 1), opacity .55s ease, filter .55s ease; } .cf-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; pointer-events: none; } .cf-item::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -18px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); filter: blur(6px); opacity: 0; transition: opacity .5s ease; z-index: -1; } .cf-item[data-pos="0"] { transform: translateX(-50%) scale(1); opacity: 1; filter: none; z-index: 3; cursor: default; } .cf-item[data-pos="0"]::after { opacity: 1; } .cf-item[data-pos="-1"] { transform: translateX(calc(-50% - 62%)) scale(.8); opacity: .85; filter: brightness(.6) saturate(.8) blur(1.5px); z-index: 2; } .cf-item[data-pos="1"] { transform: translateX(calc(-50% + 62%)) scale(.8); opacity: .85; filter: brightness(.6) saturate(.8) blur(1.5px); z-index: 2; } .cf-item[data-pos="-1"]:hover, .cf-item[data-pos="1"]:hover { filter: brightness(.78) saturate(.9); } .cf-item[data-pos="-2"] { transform: translateX(calc(-50% - 115%)) scale(.65); opacity: 0; } .cf-item[data-pos="2"] { transform: translateX(calc(-50% + 115%)) scale(.65); opacity: 0; } .cf-item[data-out] { display: none; } .cf-nav { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 2.2; max-height: 520px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; z-index: 4; } .cf-nav button { pointer-events: auto; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.3rem; cursor: pointer; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .4); } .cf-nav button:hover { border-color: var(--ink); } .cf-nav button:disabled { opacity: .3; cursor: default; } .cf-info { text-align: center; display: grid; justify-items: center; gap: 10px; margin-top: 8px; min-height: 196px; } .cf-info .cls { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .cf-info h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); } .cf-info .acts { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; justify-content: center; } .cf-info.swap > * { animation: cf-rise .45s ease both; } @keyframes cf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .cf-dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; } .cf-dots button { width: 9px; height: 9px; padding: 0; border-radius: 99px; border: 0; background: var(--line); cursor: pointer; transition: width .3s, background-color .3s; } .cf-dots button[aria-current="true"] { width: 28px; background: var(--ink); } .cf-list { list-style: none; padding: 0; text-align: center; } @media (max-width: 700px) { .cf-stage { aspect-ratio: 1.8; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); } .cf-item { width: 76%; } .cf-item[data-pos="-1"] { transform: translateX(calc(-50% - 74%)) scale(.82); } .cf-item[data-pos="1"] { transform: translateX(calc(-50% + 74%)) scale(.82); } .cf-nav { display: none; } } .calc-pref { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bg-alt); font-size: .88rem; } .calc-pref b { font-weight: 700; } .calc-pref button { border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; } .calc-car-price.req { font-size: .86rem; font-weight: 700; color: var(--muted); white-space: nowrap; } /* Sobre Transfers Group */ .about-head { max-width: 860px; } .about-badges { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } .about-badges li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: .9rem; } .about-badges svg { width: 16px; height: 16px; color: var(--gold); } .about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .about-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px 22px; position: relative; overflow: hidden; } .about-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold-brand); } .about-card h3 { font-size: 1.1rem; margin-bottom: 14px; } .about-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .about-card li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--ink-soft); line-height: 1.45; } .about-card li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--gold); } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } } .about-b2b .b2b { margin-top: 0; } /* =================================================================== Movimiento y detalles */ /* Cabecera: transparente sobre la portada, efecto cristal al desplazarse */ .topbar { transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .35s ease; } .topbar.topbar--hide:not(.menu-open) { transform: translateY(-100%); } .topbar.scrolled { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); } /* La altura de la cabecera no cambia al desplazarse: así la página no salta */ @media all { .topbar.scrolled { background: rgba(13, 14, 16, .74); } } .topbar.over:not(.scrolled):not(.menu-open) { background: transparent; border-color: rgba(255, 255, 255, .12); } .topbar.over:not(.scrolled):not(.menu-open) .brand, .topbar.over:not(.scrolled):not(.menu-open) .nav a, .topbar.over:not(.scrolled):not(.menu-open) .lang a[aria-current="true"] { color: #FFFFFF; } .topbar.over:not(.scrolled):not(.menu-open) .brand-text span, .topbar.over:not(.scrolled):not(.menu-open) .lang a { color: rgba(255, 255, 255, .66); } .topbar.over:not(.scrolled):not(.menu-open) .lang a[aria-current="true"] { background: rgba(255, 255, 255, .14); } .topbar.over:not(.scrolled):not(.menu-open) .nav a:hover { background: rgba(255, 255, 255, .12); } .topbar.over:not(.scrolled):not(.menu-open) .top-cta { background: var(--gold-brand); color: #121314; } .topbar.over:not(.scrolled):not(.menu-open) .menu-btn { color: #FFFFFF; border-color: rgba(255, 255, 255, .3); } .topbar.over ~ main > .hero:first-child { margin-top: -73px; } .topbar.over ~ main > .hero:first-child .wrap { padding-top: calc(clamp(48px, 7vw, 96px) + 73px); } @media (max-width: 1160px) { .topbar.over:not(.scrolled):not(.menu-open) .nav a { color: inherit; } } /* Portada: zoom lento de la foto y entrada escalonada */ @keyframes tg-kb { from { transform: scale(1.09); } to { transform: scale(1); } } @keyframes tg-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .hero-bg { overflow: hidden; } .hero-bg img { animation: tg-kb 20s cubic-bezier(.2, .6, .2, 1) both; transform-origin: 62% 55%; } .hero .wrap > div:first-child > * { animation: tg-rise .9s cubic-bezier(.2, .7, .2, 1) both; } .hero .wrap > div:first-child > :nth-child(1) { animation-delay: .1s; } .hero .wrap > div:first-child > :nth-child(2) { animation-delay: .2s; } .hero .wrap > div:first-child > :nth-child(3) { animation-delay: .3s; } .hero .wrap > div:first-child > :nth-child(4) { animation-delay: .4s; } .hero .wrap > div:first-child > :nth-child(5) { animation-delay: .5s; } .hero .calc-card { animation: tg-rise 1s .35s cubic-bezier(.2, .7, .2, 1) both; } /* Aparición al desplazarse */ html.rv-on .rv { opacity: 0; transform: translateY(18px); transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--rv-i, 0) * 80ms); } html.rv-on .rv.in { opacity: 1; transform: none; } /* Transiciones entre páginas */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; } .topbar { view-transition-name: topbar; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Brillo en los botones principales */ .btn, .calc-btn--primary { position: relative; overflow: hidden; isolation: isolate; } .btn-gold::after, .top-cta::after, .calc-btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent); transform: skewX(-20deg); transition: left .7s ease; pointer-events: none; } .btn-gold:hover::after, .top-cta:hover::after, .calc-btn--primary:hover::after { left: 135%; } .btn-gold, .top-cta, .calc-btn--primary { z-index: 0; } /* WhatsApp: un solo aviso suave */ @keyframes tg-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55), 0 12px 28px -10px rgba(0, 0, 0, .5); } 100% { box-shadow: 0 0 0 22px rgba(37, 211, 102, 0), 0 12px 28px -10px rgba(0, 0, 0, .5); } } .wa-fab.pulse { animation: tg-pulse 1.4s ease-out 2; } /* Calculador: transiciones entre pasos */ @keyframes calc-fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } } @keyframes calc-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } } @keyframes calc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .calc-in-fwd { animation: calc-fwd .4s cubic-bezier(.2, .7, .2, 1) both; } .calc-in-back { animation: calc-back .4s cubic-bezier(.2, .7, .2, 1) both; } .calc-in-fade { animation: calc-fade .35s ease both; } /* Flota: escaparate oscuro con foco de luz y reflejo */ .fleet-sec .cf { --pad: clamp(14px, 3vw, 36px); padding: var(--pad) var(--pad) calc(var(--pad) + 4px); border-radius: 28px; overflow: hidden; --bg: #0D0E10; --bg-alt: #15171A; --card: #1B1D21; --ink: #F1F1EE; --ink-soft: #D5D6D2; --muted: #9EA1A6; --line: #34363B; --btn: #FFA500; --btn-ink: #121314; --gold: #FFA500; color: var(--ink); background: radial-gradient(ellipse 50% 58% at 50% 34%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 70% 22% at 50% 62%, rgba(255, 165, 0, .07), rgba(255, 165, 0, 0) 70%), linear-gradient(180deg, #1A1C20 0%, #0E0F11 62%, #0A0B0C 100%); } .fleet-sec .cf-nav { top: var(--pad); left: var(--pad); right: var(--pad); } .fleet-sec .cf-nav button { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #FFFFFF; backdrop-filter: blur(6px); } .fleet-sec .cf-nav button:hover { border-color: #FFFFFF; } .fleet-sec .cf-item::after { display: none; } .fleet-sec .cf-item[data-pos="0"] img { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); } .fleet-sec .cf-info .btn-line { border-color: rgba(255, 255, 255, .28); color: #FFFFFF; } .fleet-sec .cf-info .btn-line:hover { border-color: #FFFFFF; } .fleet-sec .cf-dots button { background: rgba(255, 255, 255, .22); } .fleet-sec .cf-dots button[aria-current="true"] { background: var(--gold-brand); } .fleet-sec .cf-info { margin-top: 18px; } /* Mapa de ruta (páginas de destinos) */ .route-map { margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); --rm-sea: #E6EEF2; --rm-coast: #B9C6CE; --rm-border: #C9C9C4; --rm-ref: #8C9196; --rm-label: #5E6368; } @media all { .route-map { --rm-sea: #121B22; --rm-coast: #2C3B46; --rm-border: #3A3C40; --rm-ref: #6E737A; --rm-label: #A3A7AC; } } .route-map svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; } .rm-sea { fill: var(--rm-sea); } .rm-coast { fill: none; stroke: var(--rm-coast); stroke-width: 1.2; stroke-linejoin: round; } .rm-border { fill: none; stroke: var(--rm-border); stroke-width: 1; stroke-dasharray: 4 4; } .rm-ref { fill: var(--rm-ref); } .rm-label { fill: var(--rm-label); font-family: var(--font); font-weight: 600; } .rm-sea-label { fill: var(--rm-coast); font-family: var(--mono); font-weight: 700; letter-spacing: .2em; } .rm-route { fill: none; stroke: var(--gold-brand); stroke-linecap: round; } .rm-start { fill: var(--ink); } .rm-end { fill: var(--gold-brand); } .rm-halo { fill: var(--gold-brand); opacity: .25; transform-box: fill-box; transform-origin: center; animation: rm-pulse 2.4s ease-out infinite; } .rm-name { fill: var(--ink); font-family: var(--font); font-weight: 800; } @keyframes rm-pulse { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } } html.rv-on .route-map:not(.draw) .rm-route { stroke-dashoffset: 1; } .rm-route { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1) .35s; } .route-map figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); font-size: .9rem; } .route-map figcaption b { font-weight: 800; } .route-map figcaption span { color: var(--muted); } /* Sobre nosotros: franja de opiniones */ .about-reviews { margin-top: 20px; display: flex; align-items: center; gap: 24px; padding: 22px 26px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; } .about-reviews:hover { border-color: var(--gold); transform: translateY(-2px); } .ar-score { display: grid; justify-items: center; gap: 2px; padding-right: 24px; border-right: 1px solid var(--line); flex: none; } .ar-score b { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .ar-score .stars { color: var(--gold-brand); letter-spacing: 2px; font-size: .9rem; } .ar-text { display: grid; gap: 4px; flex: 1; min-width: 0; } .ar-text strong { font-size: 1.05rem; } .ar-text span { color: var(--muted); font-size: .92rem; } .ar-go { flex: none; font-weight: 700; font-size: .92rem; color: var(--ink); white-space: nowrap; } .about-reviews:hover .ar-go { color: var(--gold); } @media (max-width: 760px) { .about-reviews { flex-direction: column; align-items: flex-start; gap: 14px; } .ar-score { border-right: 0; padding-right: 0; justify-items: start; } } /* ===================================================================== Calculador v2 */ /* Modos: dos botones grandes y claros */ .calc-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; background: none; border-radius: 0; } .calc-mode button { display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 10px 8px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; box-shadow: none; transition: border-color .2s, background .2s, color .2s, transform .15s; } .calc-mode button svg { width: 20px; height: 20px; flex: none; color: var(--gold); } .calc-mode button span { display: grid; line-height: 1.15; min-width: 0; } .calc-mode button b { font-size: .86rem; font-weight: 800; white-space: nowrap; letter-spacing: -.01em; } .calc-mode button small { font-size: .74rem; font-weight: 600; color: var(--muted); margin-top: 2px; } .calc-mode button:hover { border-color: var(--gold); } .calc-mode button:active { transform: scale(.98); } .calc-mode button.on { border-color: var(--ink); background: var(--ink); color: var(--bg); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .6); } .calc-mode button.on svg { color: var(--gold-brand); } .calc-mode button.on small { color: rgba(255, 255, 255, .7); } :root[data-theme="dark"] .calc-mode button.on small { color: rgba(0, 0, 0, .6); } @media all { :root .calc-mode button.on small { color: rgba(0, 0, 0, .6); } } /* Desplegables: flecha visible dentro de un círculo dorado */ .calc-field select { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 12l8 8 8-8' fill='none' stroke='%23FFA500' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-appearance: none; appearance: none; padding-right: 46px; cursor: pointer; border-color: #CFCBC2; font-weight: 600; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 12l8 8 8-8' fill='none' stroke='%23FFA500' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px 20px; } .calc-field select:hover { border-color: var(--gold); } .calc-field select:focus { background-color: var(--card); background-image: var(--chev); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px 20px; } @media all { :root .calc-field select { border-color: #3A3D42; } } :root[data-theme="dark"] .calc-field select { border-color: #3A3D42; } .calc-row--keep { flex-direction: row !important; } .calc-row--keep > .calc-field { flex: 1 !important; } /* Sin pago por adelantado */ .calc-pay { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(46, 139, 87, .08); border: 1px solid rgba(46, 139, 87, .25); } .calc-pay svg { width: 22px; height: 22px; flex: none; color: var(--ok); margin-top: 1px; } .calc-pay p { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--ink-soft); } .calc-pay b { color: var(--ink); } .calc-body > .calc-pay { margin-top: 12px; } .calc-bullets { grid-template-columns: 1fr; gap: 6px; } /* Ventana de reserva (se abre junto al botón pulsado) */ html.pop-open { overflow: hidden; } .calc-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; } .calc-pop-bg { position: absolute; inset: 0; background: rgba(10, 11, 13, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: tg-fade .25s ease both; } .calc-pop-panel { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--card); color: var(--ink); border-radius: var(--r-lg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); animation: tg-pop .32s cubic-bezier(.2, .8, .2, 1) both; } .calc-pop-x { position: sticky; top: 10px; float: right; z-index: 2; margin: 10px 10px -46px 0; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; } .calc-pop .calc-steps { margin-right: 44px; } @keyframes tg-fade { from { opacity: 0; } } @keyframes tg-pop { from { opacity: 0; transform: translateY(24px) scale(.98); } } @media (max-width: 600px) { .calc-pop { padding: 0; align-items: end; } .calc-pop-panel { width: 100%; max-height: calc(100dvh - 40px); border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } @keyframes tg-pop { from { transform: translateY(100%); } } } @media (prefers-reduced-motion: reduce) { .calc-pop-bg, .calc-pop-panel { animation: none; } } /* ===================================================================== Portada v2 */ .hero-points li:nth-child(5):last-child { grid-column: 1 / -1; } .trust li > a { display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none; } .trust li > a:hover b { color: var(--gold); } /* ===================================================================== Móvil: menos altura, menos desplazamiento */ @media (max-width: 640px) { .section { padding-block: 52px; } .head p { font-size: .95rem; } /* Portada */ .hero-lead { display: none; } .hero { --h1fs: clamp(2rem, 9vw, 2.5rem); } /* Garantías: 2 × 2 compacto */ .trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .trust li, .trust li:first-child { padding: 14px 8px 14px 0 !important; border-left: 0 !important; border-top: 1px solid var(--line) !important; gap: 10px; align-items: flex-start; } .trust li:nth-child(-n+2) { border-top: 0 !important; } .trust li > a { gap: 10px; align-items: flex-start; } .trust svg { width: 22px; height: 22px; } .trust b { font-size: .86rem; line-height: 1.25; } .trust span { font-size: .76rem; line-height: 1.3; display: block; margin-top: 2px; } /* Servicios */ .svc-img { aspect-ratio: 4 / 3; } .svc p { display: none; } .svc h3 { font-size: .98rem !important; margin-top: 10px; } .svc-grid { gap: 18px 12px !important; } .svc-pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .svc-pro { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; } .svc-pro p, .svc-pro .svc-go { display: none; } .svc-pro h3 { font-size: .88rem; } .svc-pro > svg { width: 24px; height: 24px; } /* Tablero de salidas: sin columna «Tipo», todo cabe en pantalla */ .board table { min-width: 0; font-size: .8rem; } .board th:nth-child(2), .board td:nth-child(2) { display: none; } .board th:nth-child(1) { width: 38%; } .board th:nth-child(3) { width: 29%; } .board th:nth-child(4) { width: 17%; } .board th:nth-child(5) { width: 16%; } .board th, .board td { padding: 10px 6px; } .board td:nth-child(3) { font-size: .74rem; letter-spacing: 0; } .board td { vertical-align: middle; } .board .go { vertical-align: middle; } .board th:first-child, .board td:first-child { padding-left: 14px; } .board th:last-child, .board td:last-child { padding-right: 12px; } .board td:first-child { white-space: normal; line-height: 1.3; } .board th { font-size: .6rem; letter-spacing: .08em; } .board .go { font-size: 0; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-brand); color: #121314; } .board .go::after { content: "→"; font-size: 1rem; } /* Carrusel horizontal (tours, blog, nosotros) en lugar de una columna larga */ .exc-grid, .blog-grid, .about-grid { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(-1 * var(--gl)); margin-right: calc(-1 * var(--gr)); padding: 0 var(--gr) 6px var(--gl); scroll-padding-inline: var(--gl); } .exc-grid::-webkit-scrollbar, .blog-grid::-webkit-scrollbar, .about-grid::-webkit-scrollbar { display: none; } .exc-grid > *, .blog-grid > *, .about-grid > * { scroll-snap-align: start; } .exc-grid { grid-auto-rows: 260px; } .exc.big, .exc.wide { grid-column: auto !important; grid-row: auto !important; } .exc.big h3 { font-size: 1.2rem; } .blog-grid .post:last-child { display: flex !important; } .post-img { aspect-ratio: 16 / 10; } .post h3 { font-size: 1rem; } .about-grid { grid-auto-columns: 86%; align-items: start; } .about-card { padding: 20px 18px; } .about-card li { font-size: .88rem; } .about-reviews { display: none; } /* Cómo funciona: sin foto en móvil */ .how-img { display: none; } .how ol { gap: 16px; margin-top: 20px; } } .trust b span { color: inherit !important; font-size: inherit !important; display: inline !important; margin: 0 !important; } @media (max-width: 560px) { /* Listados: dos columnas en lugar de una */ .card-grid, .card-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .tile { gap: 8px; } .tile h3 { font-size: .92rem; } .tile .meta { font-size: .76rem; flex-wrap: wrap; gap: 2px 8px; } /* «Otros servicios / destinos»: fila deslizable */ .related .card-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(-1 * var(--gl)); margin-right: calc(-1 * var(--gr)); padding: 0 var(--gr) 6px var(--gl); scroll-padding-inline: var(--gl); } .related .card-grid::-webkit-scrollbar { display: none; } .related .card-grid > * { scroll-snap-align: start; } .related { padding-block: 44px; } } @media (max-width: 560px) { /* Lista de destinos: tarjetas compactas sin foto (más de 130 destinos) */ .dest-grid { gap: 10px; } .dest-grid .tile { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); gap: 4px; height: 100%; } .dest-grid .tile-img { display: none; } .dest-grid .tile h3 { font-size: .9rem; line-height: 1.25; } .dest-grid .tile .kind { font-size: .6rem; } .dest-grid .tile .meta span { display: none; } } /* Servicios: fotos próximamente y brillo dorado al pasar el ratón */ .svc-img { transition: box-shadow .25s ease; } .svc-soon { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--gold); background: var(--bg-alt); } .svc-soon-txt { font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .svc:hover .svc-img { box-shadow: 0 0 0 2px var(--gold-brand), 0 0 22px rgba(255, 165, 0, .7); } .svc-pro { transition: border-color .2s, transform .2s, box-shadow .25s ease; } .svc-pro:hover { border-color: var(--gold-brand); box-shadow: 0 0 0 1px var(--gold-brand), 0 0 18px rgba(255, 165, 0, .6); } .svc-pro > svg { padding: 8px; box-sizing: content-box; border-radius: 50%; background: var(--bg-alt); } /* Ventana de contacto para vehículos «solo tras hablar con nosotros». */ .contact-panel { max-width: 440px; padding-top: 44px; } .contact-panel h3 { margin: 0 0 10px; font-size: 1.25rem; } .contact-panel p { margin: 0; line-height: 1.5; } .contact-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } /* Ventana de contacto: mismo estilo que el calculador, con sus propios márgenes. */ .contact-panel { padding: 32px 28px 28px; } .contact-panel .calc-pop-x { float: none; position: absolute; top: 14px; right: 14px; margin: 0; } .contact-panel h3 { margin: 0 44px 12px 0; font-size: 1.35rem; font-weight: 800; line-height: 1.25; color: var(--ink); } .contact-panel p { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.55; } .contact-btns { display: flex; gap: 12px; margin-top: 22px; } .contact-btns .btn { flex: 1 1 0; justify-content: center; text-align: center; } @media (max-width: 480px) { .contact-btns { flex-direction: column; } } /* Bloque de reserva individual para minibuses en el calculador. */ .calc-indiv { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--gold-brand); border-radius: 14px; font-size: .95rem; line-height: 1.5; } .calc-indiv .contact-btns { margin-top: 12px; } /* Tabla de salidas: destacar el destino más solicitado. */ .board tr.hot td { background: rgba(255, 165, 0, .12); } .board tr.hot td:first-child { box-shadow: inset 4px 0 0 var(--gold-brand); } .tag-top { display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--gold-brand); color: #121314; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; } /* Calculadora: 4 ventajas en dos columnas, y avisos amarillo y rojo. */ .calc-bullets--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; gap: 10px 16px; margin: 14px 0 12px; font-size: .88rem; color: var(--ink-soft); } .calc-pay { background: rgba(255, 165, 0, .12); border: 1px solid rgba(255, 165, 0, .5); } .calc-pay svg { color: var(--gold-brand); } .calc-pay--alert { background: rgba(192, 57, 43, .08); border-color: rgba(192, 57, 43, .45); } .calc-pay--alert svg { color: #C0392B; } .calc-pay + .calc-pay { margin-top: 10px; } /* ===== Diseño v2 (15.11.2026) ===== */ /* Calculadora: lista de coches con aire (precio y +/− en su propia fila) */ .calc-car { grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "photo info info" "price price qty"; gap: 10px 12px; align-items: center; padding: 12px; } .calc-car-photo img { width: 88px; height: 56px; } .calc-car-meta { flex-wrap: wrap; gap: 2px 12px; } .calc-car-price { text-align: left; } .calc-car-qty { gap: 12px; } .calc-qty-btn { width: 38px; height: 38px; font-size: 1.2rem; } .calc-qty-val { min-width: 22px; font-size: 1.05rem; } /* Sitio: marcadores de posición con icono en lugar de texto con borde discontinuo */ .svc-soon { flex-direction: column; gap: 10px; border: 0; background: linear-gradient(160deg, var(--bg-alt), color-mix(in srgb, var(--bg-alt) 78%, var(--line))); } .svc-soon svg { width: 46px; height: 46px; color: var(--gold); } .svc-soon-txt { color: var(--muted); font-size: .7rem; letter-spacing: .18em; } /* Cómo funciona: sección oscura con pasos numerados unidos por una línea */ #como-funciona.alt { background: var(--board); color: #F3F3F0; } #como-funciona .label { color: var(--gold-brand); } #como-funciona h2 { color: #FFFFFF; } #como-funciona .how li b { color: #FFFFFF; font-size: 1.15rem; } #como-funciona .how li span { color: #A9ACB1; } .how ol { gap: 30px; } .how li { position: relative; grid-template-columns: 52px 1fr; gap: 18px; } .how li::before { width: 52px; height: 52px; border: 0; background: var(--gold-brand); color: #121314; font-size: 1.1rem; box-shadow: 0 0 0 6px rgba(255, 165, 0, .16); } .how li:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 58px; bottom: -24px; width: 2px; background: linear-gradient(var(--gold-brand), rgba(255, 165, 0, .15)); } @media (max-width: 760px) { .how ol { gap: 26px; } .how li { grid-template-columns: 44px 1fr; gap: 14px; } .how li::before { width: 44px; height: 44px; } .how li:not(:last-child)::after { left: 21px; top: 50px; } } /* Opiniones: marca Google junto a la nota */ .g-word { display: block; margin-bottom: 2px; font-weight: 800; font-size: .95rem; letter-spacing: -.01em; } .g-word i { font-style: normal; } .g-word i:nth-child(1), .g-word i:nth-child(4) { color: #4285F4; } .g-word i:nth-child(2), .g-word i:nth-child(6) { color: #EA4335; } .g-word i:nth-child(3) { color: #FBBC05; } .g-word i:nth-child(5) { color: #34A853; } /* FAQ: tarjetas en dos columnas en escritorio */ .faq { grid-template-columns: 1fr; gap: 28px; } .faq .head { max-width: 640px; margin-bottom: 0; } .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border-top: 0; align-items: start; } .faq-list details { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 0 22px; transition: border-color .25s ease, box-shadow .25s ease; } .faq-list details[open] { border-color: var(--gold); box-shadow: 0 14px 34px -22px rgba(10, 12, 16, .35); } .faq-list summary { padding: 20px 0; } .faq-list details p { padding: 0 0 20px; } @media (max-width: 900px) { .faq-list { grid-template-columns: 1fr; } } /* Llamada a la acción final: banda dorada */ .cta-band { background: linear-gradient(120deg, #FFA500 0%, #FFB833 100%); color: #121314; position: relative; overflow: hidden; padding-block: clamp(52px, 6.5vw, 88px); } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 140% at 0% 100%, rgba(255, 255, 255, .28), transparent 65%); pointer-events: none; } .cta-inner { position: relative; display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; justify-content: space-between; } .cta-band .label { color: rgba(18, 19, 20, .72); } .cta-band h2 { font-size: clamp(1.9rem, 4vw, 3rem); color: #121314; margin-top: 12px; max-width: 20ch; } .cta-band p:not(.label) { color: rgba(18, 19, 20, .78); max-width: 54ch; margin-top: 14px; } .cta-btns { display: flex; flex-wrap: wrap; gap: 12px; } .cta-band .btn-gold { background: #121314; color: #FFFFFF; } .btn-ghost { background: transparent; color: #121314; border-color: rgba(18, 19, 20, .45); } .btn-ghost:hover { border-color: #121314; background: rgba(255, 255, 255, .25); } @media (max-width: 760px) { .cta-btns { width: 100%; } .cta-btns .btn { flex: 1 1 100%; } } /* Elevación al pasar el ratón */ @media (hover: hover) { .svc-pro, .post, .exc { transition: transform .25s ease, box-shadow .25s ease; } .svc-pro:hover, .post:hover { transform: translateY(-4px); } .exc:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .55); } } /* Barra inferior en móvil */ .mbar { display: none; } @media (max-width: 760px) { .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; padding: 10px calc(12px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(115%); transition: transform .3s ease; } .mbar.on { transform: none; } .mbar .btn { min-height: 48px; padding: 0 14px; font-size: .95rem; } html.has-mbar .wa-fab { display: none; } html.has-mbar body { padding-bottom: 72px; } html.pop-open .mbar { display: none; } } /* Ajustes finos de móvil */ .svc-soon { padding-bottom: 34px; } @media (max-width: 760px) { .svc-soon svg { width: 36px; height: 36px; } .svc-soon-txt { font-size: .6rem; letter-spacing: .1em; text-align: center; padding-inline: 8px; } } @media (max-width: 480px) { .calc-mode button { padding: 10px 12px; } .calc-mode button svg { display: none; } .calc-mode button b { white-space: normal; font-size: .84rem; } } .foot-grid a { overflow-wrap: anywhere; } @media (max-width: 380px) { .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } } @media (max-width: 640px) { .highlights { grid-template-columns: minmax(0, 1fr); } .highlights figure { min-width: 0; } } /* Móvil: titular, subtítulo, calculadora y después los 6 puntos con marca */ @media (max-width: 900px) { .hero .wrap { display: flex; flex-direction: column; gap: 0; } .hero .wrap > div:first-child { display: contents; } .hero .label { order: 1; } .hero h1 { order: 2; } .hero-lead { order: 3; display: block; margin-top: 14px; font-size: 1rem; } .hero .calc-card { order: 4; margin-top: 24px; } .hero-points { order: 5; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 12px; margin-top: 26px; max-width: min(100%, calc(var(--h1fs) * 8.58)); } .hero-points li { font-size: .95rem; } .hero-points li:nth-child(5):last-child { grid-column: auto; } } /* Калькулятор: пункты-преимущества — один спокойный блок, без цветового шума (жёлтая плашка остаётся главной) */ .calc-bullets, .calc-bullets--4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; gap: 9px 16px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02); font-size: .8rem; line-height: 1.35; color: var(--muted); } .calc-bullets li { gap: 7px; } .calc-bullets svg { width: 14px; height: 14px; } .calc-bullets + .calc-note, .calc-note + .calc-note { margin-top: 6px; } @media (max-width: 480px) { .calc-bullets, .calc-bullets--4 { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 7px; } } .calc-bullets:not(.calc-bullets--4) { grid-template-columns: 1fr; grid-auto-flow: row; gap: 9px; } .calc-note--tail { text-align: left; font-size: .72rem; line-height: 1.55; margin: 14px 0 0; padding: 10px 2px 0; border-top: 1px solid var(--line); color: var(--muted); } .calc-fine { margin: 16px 0 0; padding: 12px 14px; border: 1px solid rgba(255, 165, 0, .28); border-radius: 12px; background: rgba(255, 165, 0, .05); } .calc-fine p { margin: 0; font-size: .72rem; line-height: 1.55; color: var(--muted); text-align: left; } .calc-note--tail a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; } /* Carrusel de opiniones: indicador de página */ .rev-dots { display: flex; align-items: center; gap: 8px; padding: 0 6px; } .rev-controls { align-items: center; } .rev-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .3s ease, background-color .3s ease; } .rev-dots i.on { width: 24px; background: var(--gold-brand); } /* Botón principal: destello dorado periódico */ @keyframes tg-shine { 0%, 62% { left: -70%; } 100% { left: 135%; } } @media (prefers-reduced-motion: no-preference) { .calc-btn--primary::after, .hero .btn-gold::after { animation: tg-shine 5.5s ease-in-out 2s infinite; } } /* Importe total: aparición suave */ @keyframes tg-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .calc-total strong { animation: tg-fade .5s ease both; } /* Móvil: la página no se desplaza hacia los lados; los tours ya no se arrastran */ html { overflow-x: hidden; overflow-x: clip; max-width: 100%; overscroll-behavior-x: none; } body { overflow-x: clip; max-width: 100%; } @media (max-width: 900px) { .exc-grid { grid-auto-flow: row !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-columns: auto !important; grid-auto-rows: 200px; overflow: visible !important; scroll-snap-type: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; gap: 12px !important; } .exc-grid > .exc:first-child { grid-column: 1 / -1 !important; grid-row: auto !important; } .exc { padding: 14px; } .exc h3, .exc.big h3 { font-size: 1rem; } .exc .where { font-size: .6rem; letter-spacing: .1em; } .exc-price { top: 10px; right: 10px; font-size: .75rem; padding: 4px 9px; } } /* Logotipo (marca blanca) en lugar del dibujo antiguo; mismo dorado #FFA500 que el logotipo */ .brand svg { display: none; } .brand::before { content: ""; flex: none; width: 46px; height: 36px; background: url(/img/logo-mark-white.png) center / contain no-repeat; } /* Móvil: nada se desliza hacia los lados al desplazar la página */ @media (max-width: 900px) { .blog-grid, .about-grid, .related .card-grid { grid-auto-flow: row !important; grid-template-columns: 1fr !important; grid-auto-columns: auto !important; overflow: visible !important; scroll-snap-type: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } .rev-track { touch-action: pan-y; } } /* Selector de lugares con letras y búsqueda */ .pk { position: relative; } .calc-field .pk-input { width: 100%; min-height: 48px; padding: 11px 44px 11px 14px; border: 1.5px solid #3A3D42; border-radius: 12px; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 12l8 8 8-8' fill='none' stroke='%23FFA500' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 20px 20px; color: var(--ink); font: inherit; } .calc-field .pk-input:hover { border-color: var(--gold); } .calc-field .pk-input:focus { outline: none; border-color: var(--gold); background-color: var(--card); } .pk-panel { margin-top: 8px; padding: 12px; background: var(--card); border: 1.5px solid #3A3D42; border-radius: 12px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 165, 0, .6) transparent; } .pk-panel[hidden] { display: none; } .pk-hint { font-size: .8rem; color: var(--muted); margin-bottom: 10px; } .pk-letters { display: flex; flex-wrap: wrap; gap: 5px; } .pk-letter { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--bg-alt); color: var(--ink); font: 700 .9rem var(--mono); cursor: pointer; } .pk-letter:hover { border-color: var(--gold); } .pk-letter.on { background: var(--gold); border-color: var(--gold); color: #121314; } .pk-group { margin: 14px 0 4px; font: 700 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .pk-list { display: grid; gap: 2px; margin-top: 10px; } .pk-group + .pk-list { margin-top: 0; } .pk-item { text-align: left; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; } .pk-item:hover, .pk-item:focus-visible { background: var(--bg-alt); } .pk-item.on { color: var(--gold); font-weight: 700; } .pk-none { margin: 0; padding: 10px 4px; color: var(--muted); font-size: .9rem; } .calc-field .pk-input:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 12l8 8 8-8' fill='none' stroke='%23FFA500' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px 20px; } /* Capacidad de los vehículos: solo icono y cifra */ .calc-car-meta { gap: 2px 16px; font-size: .9rem; font-weight: 700; color: var(--ink-soft); } .calc-car-meta svg { width: 18px; height: 18px; color: var(--gold-brand); } /* Solicitud → Confirmación → Pago */ .calc-flow { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; margin: 16px 0 0; } .calc-flow span { padding: 7px 14px; border: 1px solid rgba(255, 165, 0, .45); border-radius: 999px; background: rgba(255, 165, 0, .08); color: var(--ink); font-size: .8rem; font-weight: 700; white-space: nowrap; } .calc-flow i { font-style: normal; color: var(--gold-brand); font-weight: 700; } @media (max-width: 380px) { .calc-flow { gap: 5px; } .calc-flow span { padding: 6px 9px; font-size: .74rem; } } /* Línea Solicitud → Confirmación → Pago en verde */ .calc-flow span { border-color: rgba(46, 139, 87, .55); background: rgba(46, 139, 87, .1); } .calc-flow i { color: var(--ok); } /* Pantallas de 1800 px o más (p. ej. 1920×1080 al 100 %): contenido más ancho y texto más grande. MSI 1920×1080 al 125 % (1536 px) no cambia. */ @media (min-width: 1800px) { .wrap { max-width: 1600px; } .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); } .hero { --h1fs: 6rem; } .hero-lead { font-size: 1.4rem; } .hero-points li { font-size: .9rem; } .calc-field input, .calc-field select, .calc-field textarea { font-size: 1rem; } }