/* ============================================================ TU hoja del export v3, ENTERA, acotada bajo .v3 Generada de app/styles.css sin quitar ni una regla: incluidas las 53 que difieren de la del sitio y las 159 que sólo están en la tuya. Lo único añadido es el prefijo .v3, que la encierra en el cuerpo de la portada para que el hero y el footer no se vean afectados. ============================================================ */ /* --- reset de lo que la hoja del sitio colaba dentro de .v3 --- */ .v3 button { color: revert; } .v3 .trust__inner { padding: revert; } .v3 .trust__logos .tl { font-family: revert; font-weight: revert; font-size: revert; color: revert; letter-spacing: revert; } .v3 .trust__logos .tl:hover { color: revert; } .v3 .cov__map { border-radius: revert; overflow: revert; border: revert; box-shadow: revert; background: revert; } .v3 .cov__list { columns: revert; } .v3 .cov__list .ci { break-inside: revert; } .v3 .fh-links a { position: revert; } .v3 .fh-social a { position: revert; } .v3 .signin__menu a { align-items: revert; gap: revert; } .v3 .footer__bottom .lks a { position: revert; } .v3 .lhero { background-color: revert; background-image: revert; background-position: revert; background-size: revert; background-repeat: revert; } .v3 .bw__seg { position: revert; } .v3 .bw__seg button { min-height: revert; position: revert; z-index: revert; } .v3 .bw__sug button em { white-space: revert; overflow: revert; text-overflow: revert; } .v3 .bw__swap { position: revert; } @media (max-width: 680px) { .v3 .footer__help h3 { font-size: revert; } .v3 .cov__list { columns: revert; } } @media (max-width: 920px) { .v3 .bw__group { position: revert; } .v3 .bw__action { margin-top: revert; } .v3 .bw__swap { top: revert; right: revert; } .v3 .bw__flight { align-items: revert; } } /* ============================================================ LUX TRAVELY — Landing styles Brand: champagne gold #b4a886 + charcoal #3b3b3b Clean, modern, premium (perk.com-inspired) ============================================================ */ /* Display font (Montserrat) is shared with the hero, the header and the footer. The text font is Inter, also shared with them, and its @font-face lives in src/styles.css — the export declared its own (Geist) here, which put two text faces on one page: Inter above and below the body, Geist inside it. The three Geist @font-face blocks are gone with the files they pointed at. */ .v3 { --serif: "Montserrat", system-ui, sans-serif; /* Brand */ --gold: #b4a886; --gold-600: #9b8e69; --gold-700: #847953; --gold-300: #cfc6ac; --gold-100: #ece7da; --gold-tint: #f5f2ea; /* Neutrals */ --ink: #3b3b3b; --black: #1b1a18; --white: #ffffff; --cream: #f4f2ea; /* perk-style warm page base */ --cream-2: #efece2; --paper: #faf9f6; --paper-2: #f3f1ec; --line: #e8e4db; --line-2: #ddd8cc; --muted: #8c887e; --muted-2: #b6b1a6; /* Type */ --display: "Schibsted Grotesk", system-ui, sans-serif; --text: "Hanken Grotesk", system-ui, sans-serif; /* Radius */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; /* Shadow */ --sh-sm: 0 1px 2px rgba(27,26,24,.05), 0 1px 3px rgba(27,26,24,.04); --sh-md: 0 4px 14px rgba(27,26,24,.06), 0 2px 6px rgba(27,26,24,.04); --sh-lg: 0 24px 60px -18px rgba(27,26,24,.22), 0 8px 24px -12px rgba(27,26,24,.12); --sh-gold: 0 14px 34px -10px rgba(155,142,105,.5); --maxw: 1240px; --ease: cubic-bezier(.22,.61,.36,1); /* easeOutQuad — same family without the hard stop, for the 100px slides */ --ease-suave: cubic-bezier(.25,.46,.45,.94); --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; /* los que tu app-v3.jsx fija en el */} .v3, .v3 * { box-sizing: border-box; } .v3 { margin: 0; font-family: var(--text); color: var(--black); background: var(--cream); line-height: 1.55; font-size: 16px; } .v3 img { max-width: 100%; display: block; } .v3 a { color: inherit; text-decoration: none; } .v3 button { font-family: inherit; cursor: pointer; border: none; background: none; } .v3 input { font-family: inherit; } .v3 ::selection { background: var(--gold-300); color: var(--black); } .v3 .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } /* Type helpers */ .v3 h1, .v3 h2, .v3 h3, .v3 h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: 0; color: var(--black); } .v3 .eyebrow { font-family: var(--text); font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; } .v3 .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .v3 .lead { font-size: 18px; color: var(--ink); line-height: 1.6; } /* Buttons */ .v3 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--text); font-weight: 700; font-size: 15px; border-radius: 999px; padding: 0 24px; height: 50px; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s; white-space: nowrap; } .v3 .btn:active { transform: translateY(1px); } .v3 .btn-gold { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-600) 100%); color: #2a2618; box-shadow: var(--sh-gold); } .v3 .btn-gold:hover { box-shadow: 0 18px 40px -10px rgba(155,142,105,.62); transform: translateY(-1px); } .v3 .btn-dark { background: var(--black); color: #fff; } .v3 .btn-dark:hover { background: #322f2a; transform: translateY(-1px); } .v3 .btn-ghost { background: transparent; color: var(--black); border: 1.5px solid var(--line-2); } .v3 .btn-ghost:hover { border-color: var(--ink); background: var(--paper); } .v3 .btn-lg { height: 58px; font-size: 16px; padding: 0 30px; } .v3 .btn svg { width: 18px; height: 18px; } /* Logo */ .v3 .logo svg { display: block; height: 26px; width: auto; } .v3 .logo .lt-mark { fill: var(--gold); } .v3 .logo .lt-word { fill: var(--black); } .v3 .logo.on-dark .lt-word { fill: #fff; } .v3 .logo.all-gold .lt-mark, .v3 .logo.all-gold .lt-word { fill: var(--gold); } /* ============================================================ HEADER */ .v3 .header { position: sticky; top: 0; z-index: 60; background: rgba(244,242,234,.82); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s; } .v3 .header.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(0,0,0,.02); } .v3 .header__inner { display: flex; align-items: center; gap: 32px; height: 78px; } .v3 .nav { display: flex; align-items: center; gap: 30px; margin-left: 8px; } .v3 .nav a { font-size: 14.5px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; transition: color .18s; } .v3 .nav a:hover { color: var(--black); } .v3 .nav .chev { width: 14px; height: 14px; opacity: .55; } .v3 .header__spacer { flex: 1; } .v3 .header__actions { display: flex; align-items: center; gap: 14px; } .v3 .linkbtn { font-size: 14.5px; font-weight: 600; color: var(--black); display: inline-flex; align-items: center; gap: 7px; } .v3 .linkbtn:hover { color: var(--gold-700); } .v3 .linkbtn svg { width: 16px; height: 16px; } /* ============================================================ HERO */ .v3 .hero { position: relative; padding: 56px 0 30px; overflow: hidden; } .v3 .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 88% 8%, rgba(180,168,134,.14), transparent 70%), radial-gradient(50% 40% at 4% 100%, rgba(180,168,134,.08), transparent 70%); } .v3 .hero .wrap { position: relative; z-index: 1; } .v3 .hero__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.04fr); gap: 56px; align-items: center; } .v3 .hero__copy { max-width: 560px; } .v3 .hero h1 { font-size: clamp(38px, 4vw, 56px); line-height: 1.02; letter-spacing: -.03em; margin: 18px 0 0; } .v3 .hero h1 .hl { color: var(--gold-700); } .v3 .hero__sub { margin-top: 20px; max-width: 470px; } .v3 .hero__trustline { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; } .v3 .hero__stars { display: inline-flex; gap: 2px; color: var(--gold); } .v3 .hero__stars svg { width: 16px; height: 16px; } .v3 .hero__trustline .t { font-size: 13.5px; color: var(--ink); font-weight: 600; } .v3 .hero__trustline .sep { width: 1px; height: 16px; background: var(--line-2); } /* ============================================================ BOOKING CARD */ .v3 .booking { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-lg); padding: 22px; } .v3 .tabs { display: inline-flex; background: var(--paper-2); padding: 5px; border-radius: 999px; gap: 4px; } .v3 .tab { font-size: 14px; font-weight: 700; color: var(--ink); padding: 9px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; transition: all .2s var(--ease); } .v3 .tab svg { width: 16px; height: 16px; } .v3 .tab.active { background: var(--black); color: #fff; box-shadow: var(--sh-sm); } .v3 .tab:not(.active):hover { color: var(--black); } .v3 .field-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .v3 .field { position: relative; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: #fff; transition: border-color .18s, box-shadow .18s; padding: 0; } .v3 .field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(180,168,134,.16); } .v3 .field.error { border-color: #c2553e; box-shadow: 0 0 0 4px rgba(194,85,62,.12); } .v3 .field .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gold-700); pointer-events: none; } .v3 .field .dotmark { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; } .v3 .field input, .v3 .field .ph { width: 100%; border: none; outline: none; background: transparent; font-size: 15px; color: var(--black); padding: 16px 16px 16px 44px; border-radius: var(--r-sm); } .v3 .field input::placeholder { color: var(--muted-2); } .v3 .field-row { display: flex; gap: 12px; align-items: stretch; } .v3 .field-row > .field { flex: 1; } .v3 .field-lab { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; padding: 11px 16px 0 16px; } .v3 .field.has-lab input { padding-top: 4px; padding-bottom: 13px; } .v3 .field.has-lab .ic { top: 62%; } .v3 .addstop { flex: 0 0 auto; border: 1.5px dashed var(--line-2); border-radius: var(--r-sm); padding: 0 18px; font-size: 14px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; background: #fff; transition: all .18s; } .v3 .addstop:hover { border-color: var(--gold); color: var(--gold-700); background: var(--gold-tint); } .v3 .addstop svg { width: 15px; height: 15px; } .v3 .pax { border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background:#fff; } .v3 .pax .lab { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; } .v3 .pax .val { font-size: 22px; font-weight: 700; font-family: var(--display); margin-top: 2px; line-height: 1; } .v3 .stepper { display: flex; align-items: center; gap: 10px; } .v3 .step-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--black); color: #fff; display: grid; place-items: center; transition: transform .15s, background .2s, opacity .2s; } .v3 .step-btn:hover { background: #322f2a; } .v3 .step-btn:active { transform: scale(.92); } .v3 .step-btn:disabled { opacity: .3; cursor: not-allowed; } .v3 .step-btn svg { width: 16px; height: 16px; } .v3 .roundtrip { border: 1.5px dashed var(--line-2); border-radius: var(--r-sm); background:#fff; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink); transition: all .18s; padding: 16px; } .v3 .roundtrip:hover, .v3 .roundtrip.on { border-color: var(--gold); color: var(--gold-700); background: var(--gold-tint); border-style: solid; } .v3 .roundtrip svg { width: 17px; height: 17px; } .v3 .booking__cta { width: 100%; margin-top: 16px; height: 56px; font-size: 16px; } .v3 .field-msg { font-size: 12.5px; color: #c2553e; font-weight: 600; margin: 7px 2px 0; display: flex; align-items: center; gap: 6px; } .v3 .field-msg svg { width: 14px; height: 14px; } /* Hourly duration chips */ .v3 .dur-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .v3 .dur-chip { border: 1.5px solid var(--line-2); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink); background: #fff; transition: all .18s; } .v3 .dur-chip:hover { border-color: var(--gold-300); } .v3 .dur-chip.on { background: var(--black); color: #fff; border-color: var(--black); } /* ============================================================ MAP */ .v3 .mapcard { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-lg); aspect-ratio: 1.06 / 1; background: #eceae4; } .v3 .mapcard svg.map { position: absolute; inset: 0; width: 100%; height: 100%; } .v3 .map-controls { position: absolute; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 5; } .v3 .map-controls.top { top: 16px; } .v3 .map-controls.zoom { bottom: 64px; } .v3 .map-ctrl { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); box-shadow: var(--sh-md); display: grid; place-items: center; color: var(--ink); transition: background .15s, transform .15s; border: 1px solid rgba(0,0,0,.04); } .v3 .map-ctrl:hover { background: #fff; } .v3 .map-ctrl:active { transform: scale(.94); } .v3 .map-ctrl svg { width: 18px; height: 18px; } .v3 .map-zoom { padding: 0; flex-direction: column; } .v3 .map-zoom .map-ctrl { border-radius: 0; box-shadow: none; width: 40px; height: 40px; } .v3 .map-zoom { border-radius: 11px; overflow: hidden; box-shadow: var(--sh-md); } .v3 .map-zoom .map-ctrl:first-child { border-bottom: 1px solid var(--line); } .v3 .map-attr { position: absolute; bottom: 10px; left: 14px; font-size: 10.5px; color: #9a978f; z-index: 4; font-weight: 600; letter-spacing: .02em; } .v3 .map-brand { position: absolute; bottom: 9px; left: 12px; z-index: 4; opacity: .5; } /* idle hint */ .v3 .map-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: rgba(27,26,24,.86); color: #fff; backdrop-filter: blur(6px); padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; z-index: 6; white-space: nowrap; box-shadow: var(--sh-md); } .v3 .map-hint svg { width: 15px; height: 15px; color: var(--gold-300); } /* route estimate card */ /* route estimate card — outer wrapper animates (no backdrop-filter), inner holds the blur */ .v3 .route-card-wrap { position: absolute; left: 16px; top: 16px; z-index: 7; opacity: 1; transform: none; } .v3 .route-card { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 14px 16px; border: 1px solid var(--line); min-width: 264px; } @keyframes cardIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } } .v3 .route-card .rc-route { display: flex; flex-direction: column; gap: 9px; } .v3 .rc-leg { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--black); } .v3 .rc-leg .pin { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; } .v3 .rc-leg .pin.a svg { color: var(--gold); } .v3 .rc-leg .pin.b svg { color: var(--black); } .v3 .rc-leg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .v3 .rc-line { height: 16px; border-left: 2px dotted var(--line-2); margin-left: 8px; } .v3 .rc-stats { display: flex; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .v3 .rc-stat { flex: 1; min-width: 0; } .v3 .rc-stat .k { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .v3 .rc-stat .v { font-size: 15.5px; font-weight: 700; font-family: var(--display); color: var(--black); margin-top: 2px; white-space: nowrap; } .v3 .rc-stat .v.gold { color: var(--gold-700); } /* moving pin pulse */ .v3 .pin-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { opacity:.5; r: 8; } 70%{ opacity:0; r: 26; } 100%{ opacity:0; r:26; } } .v3 .route-path { stroke-dasharray: var(--len); stroke-dashoffset: 0; } .v3 .pin-drop { transform-box: fill-box; transform-origin: bottom center; opacity: 1; } /* ============================================================ GENERIC SECTION */ .v3 section.block { padding: 96px 0; } .v3 section.block#how { position: relative; } .v3 section.block#how::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(var(--cream), var(--white)); pointer-events: none; z-index: 0; } .v3 section.block#how > .wrap { position: relative; z-index: 1; margin-top: 24px; } .v3 section.block.tight { padding: 72px 0; } .v3 .bg-paper { background: var(--paper); } .v3 .bg-white { background: var(--white); } .v3 .bg-ink { background: var(--black); color: #fff; } .v3 .bg-tint { background: var(--gold-tint); } /* pill tag (perk DNA) */ .v3 .tag { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px 7px 13px; font-size: 13px; font-weight: 700; color: var(--ink); box-shadow: var(--sh-sm); } .v3 .tag .d { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .v3 .tag svg { width: 15px; height: 15px; color: var(--gold-700); } .v3 .tag.gold { background: var(--gold); border-color: var(--gold-600); color: #2a2618; } .v3 .tag.gold .d { background: #2a2618; } .v3 .tag.dark { background: var(--black); border-color: var(--black); color: #fff; } .v3 .tag.dark svg { color: var(--gold-300); } /* ====================== FEATURE GRID (perk mixed cards) */ .v3 .feat-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 20px; margin-top: 52px; } .v3 .fcard { border-radius: var(--r-xl); padding: 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 290px; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .v3 .fcard:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); } .v3 .fcard h3 { font-size: 22px; margin-top: auto; } .v3 .fcard p { font-size: 14.5px; margin-top: 10px; color: var(--ink); } .v3 .fcard .fkicker { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-700); } .v3 .fcard .fic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; } .v3 .fcard--white { background: #fff; } .v3 .fcard--white .fic { background: none; color: var(--gold-700); } .v3 .fcard--gold { background: var(--gold); border-color: var(--gold-600); color: #2a2618; } .v3 .fcard--gold h3, .v3 .fcard--gold p { color: #2a2618; } .v3 .fcard--gold .fkicker { color: #5e5436; } .v3 .fcard--gold .fic { background: none; color: #2a2618; } .v3 .fcard--dark { background: var(--black); border-color: var(--black); } .v3 .fcard--dark h3 { color: #fff; } .v3 .fcard--dark p { color: #c4c0b7; } .v3 .fcard--dark .fkicker { color: var(--gold-300); } .v3 .fcard--dark .fic { background: none; color: var(--gold-300); } .v3 .fcard--photo { background: linear-gradient(165deg,#26241f,#3c382f); border: none; justify-content: flex-end; } .v3 .fcard--photo::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55)); } .v3 .fcard--photo h3, .v3 .fcard--photo p { color: #fff; position: relative; z-index: 2; } .v3 .fcard--photo .fkicker { color: var(--gold-300); position: relative; z-index: 2; } .v3 .fcard .fic svg { width: 39px; height: 39px; shape-rendering: geometricPrecision; transform: translateZ(0); backface-visibility: hidden; } .v3 .col-4 { grid-column: span 4; } .v3 .col-5 { grid-column: span 5; } .v3 .col-6 { grid-column: span 6; } .v3 .col-7 { grid-column: span 7; } .v3 .col-8 { grid-column: span 8; } .v3 .col-3 { grid-column: span 3; } /* ====================== READY / dark CTA with pills (perk DNA) */ .v3 .ready { background: none; color: var(--black); border-radius: var(--r-xl); padding: 80px 48px; position: relative; overflow: hidden; } .v3 .ready__in { position: relative; z-index: 2; text-align: center; max-width: 720px; margin: 0 auto; } .v3 .ready h2 { color: var(--black); font-size: clamp(38px,4.4vw,64px); letter-spacing: -.03em; line-height: .98; margin-top: 22px; } .v3 .ready p { color: var(--muted); font-size: 18px; margin-top: 20px; } .v3 .ready .acts .btn-gold { background: var(--gold); box-shadow: none; } .v3 .ready .acts .btn-gold:hover { background: var(--gold-600); box-shadow: none; transform: translateY(-1px); } .v3 .ready .acts { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; } .v3 .ready .pills { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; } .v3 .rpill { border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .v3 .rpill svg { width: 15px; height: 15px; } .v3 .rpill.g1 { background: var(--paper-2); color: var(--black); border: 1px solid var(--line); } .v3 .rpill.g2 { background: var(--paper-2); color: var(--black); border: 1px solid var(--line); } .v3 .rpill.g3 { background: var(--paper-2); color: var(--black); border: 1px solid var(--line); } /* giant wordmark footer (perk DNA) */ .v3 .giant-mark { overflow: hidden; padding: 30px 0 8px; } .v3 .giant-mark svg { width: 100%; height: auto; display: block; } .v3 .giant-mark .lt-word { fill: rgba(255,255,255,.07); } .v3 .giant-mark .lt-mark { fill: rgba(180,168,134,.16); } /* elegant image placeholders (dark, brand star watermark) */ .v3 .ph-star { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(180,168,134,.16); pointer-events: none; } .v3 .ph-star svg { width: 46%; height: auto; } .v3 .ph-grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(120% 90% at 80% 0%, rgba(180,168,134,.16), transparent 55%), radial-gradient(80% 70% at 0% 100%, rgba(255,255,255,.05), transparent 60%); } .v3 .ph-label { position: absolute; left: 18px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.82); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .v3 .why__media .ph-label { left: 30px; top: 591px; bottom: auto; } .v3 .ph-label svg { width: 14px; height: 14px; color: var(--gold-300); } .v3 .ph-tile { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 75%); } .v3 .sec-head { max-width: 640px; } .v3 .sec-head.center { margin: 0 auto; text-align: center; } .v3 .sec-head h2 { font-size: clamp(30px, 3vw, 42px); margin-top: 14px; letter-spacing: -.025em; } .v3 .sec-head p { margin-top: 16px; font-size: 17.5px; color: var(--ink); } .v3 .bg-ink h1, .v3 .bg-ink h2, .v3 .bg-ink h3 { color: #fff; } .v3 .bg-ink .sec-head p { color: #c9c5bc; } .v3 .bg-ink .eyebrow { color: var(--gold-300); } /* trust bar */ .v3 .trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); } .v3 .trust__inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 48px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; } .v3 .trust__lab { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .v3 .trust__logos { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; justify-content: center; } .v3 .trust__logos .tl { height: 26px; width: auto; display: block; filter: grayscale(1) opacity(.55); transition: filter .2s; } .v3 .trust__logos .tl:hover { filter: grayscale(0) opacity(1); } /* stats */ .v3 .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; } .v3 .stat { padding: 4px 28px; border-left: 1px solid rgba(255,255,255,.14); } .v3 .stat:first-child { border-left: none; padding-left: 0; } .v3 .stat .num { font-family: var(--display); font-weight: 700; font-size: 46px; letter-spacing: -.03em; color: #fff; line-height: 1; } .v3 .stat .num .u { color: var(--gold); } .v3 .stat .lab { margin-top: 10px; font-size: 14.5px; color: #bdb9b0; } /* fleet slider */ .v3 .fleet-slider { margin-top: 50px; overflow: visible; } .v3 .fleet-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .v3 .fleet-track::-webkit-scrollbar { display: none; } .v3 .fleet-track__pad { flex: 0 0 max(0px, calc((100vw - var(--maxw)) / 2 + 32px - 22px)); } .v3 .fleet-track .vcard { flex: 0 0 auto; width: min(360px, 78vw); scroll-snap-align: start; } .v3 .fleet-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; flex-wrap: wrap; gap: 16px; } .v3 .fleet-dots { display: flex; align-items: center; gap: 8px; } .v3 .fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); border: none; padding: 0; cursor: pointer; transition: background .2s, width .2s; } .v3 .fdot.on { background: var(--gold-700); width: 22px; border-radius: 4px; } .v3 .fleet-arrows { display: flex; align-items: center; gap: 10px; } .v3 .farrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); display: grid; place-items: center; color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s; } .v3 .farrow:hover:not(:disabled) { border-color: var(--gold-700); color: var(--gold-700); } .v3 .farrow:disabled { opacity: .35; cursor: default; } .v3 .vcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; display: flex; flex-direction: column; } .v3 .vcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--gold-300); } .v3 .vcard__img { aspect-ratio: 16/11; position: relative; overflow: hidden; background: linear-gradient(165deg,#ece6d8,#f4f0e6); display: grid; place-items: center; } .v3 .vcard__img .ph-img { position: static; width: 100%; height: 100%; object-fit: contain; padding: 18px 22px; } .v3 .vcard__img .ph-car { position: absolute; inset: 0; display: grid; place-items: center; } .v3 .vcard__tag { position: absolute; top: 12px; left: 12px; white-space: nowrap; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); color: var(--black); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .v3 .vcard__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; } .v3 .vcard__body h3 { font-size: 21px; } .v3 .vcard__body .sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; } .v3 .vcard__meta { display: flex; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: auto; } .v3 .vcard__meta .m { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); } .v3 .vcard__meta .m svg { width: 16px; height: 16px; color: var(--gold-700); } /* steps */ .v3 .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 54px; position: relative; } .v3 .step-c { position: relative; } .v3 .step-c .n { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--gold-300); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--gold-700); background: #fff; margin-bottom: 22px; } .v3 .step-c h3 { font-size: 22px; } .v3 .step-c p { margin-top: 12px; color: var(--ink); font-size: 16px; } /* services */ .v3 .svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 50px; } .v3 .svc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; position: relative; overflow: hidden; } .v3 .svc:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--gold-300); } .v3 .svc .ic-wrap { width: 56px; height: 56px; border-radius: 15px; background: none; display: grid; place-items: center; color: var(--gold-700); margin-bottom: 22px; transition: background .3s, color .3s; } .v3 .svc:hover .ic-wrap { background: none; color: var(--black); } .v3 .svc .ic-wrap svg { width: 39px; height: 39px; } .v3 .svc h3 { font-size: 20px; } .v3 .svc p { margin-top: 11px; color: var(--ink); font-size: 15px; } .v3 .svc .lnk { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--gold-700); } .v3 .svc .lnk svg { width: 15px; height: 15px; transition: transform .2s; } .v3 .svc:hover .lnk svg { transform: translateX(4px); } /* why-us split */ .v3 .why { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; } .v3 .why__media { aspect-ratio: 4/4.4; border-radius: var(--r-xl); overflow: hidden; position: relative; background: linear-gradient(150deg,#26241f,#403c33); box-shadow: var(--sh-lg); } .v3 .why__feats { display: flex; flex-direction: column; gap: 8px; margin-top: 30px; } .v3 .feat { display: flex; gap: 16px; padding: 18px; border-radius: var(--r-md); transition: background .2s; } .v3 .feat:hover { background: var(--gold-tint); } .v3 .feat .fic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; background: none; border: none; display: grid; place-items: center; color: var(--gold-700); box-shadow: none; } .v3 .feat .fic svg { width: 33px; height: 33px; } .v3 .feat h4 { font-size: 17px; font-family: var(--display); } .v3 .feat p { margin-top: 4px; font-size: 14.5px; color: var(--ink); } /* badge float on media */ .v3 .media-badge { position: absolute; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sh-lg); border: 1px solid var(--line); } .v3 .media-badge.bl { left: 22px; bottom: 56px; min-width: 232px; } .v3 .media-badge .mb-top { display: flex; align-items: center; gap: 10px; } .v3 .media-badge .av { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: var(--gold-tint); border: 1px solid var(--gold-300); display:grid; place-items:center; color: var(--gold-700); } .v3 .media-badge .av svg { width: 20px; height: 20px; } .v3 .media-badge .nm { font-size: 13.5px; font-weight: 700; white-space: nowrap; } .v3 .media-badge .rl { font-size: 12px; color: var(--muted); white-space: nowrap; } .v3 .media-badge .qt { font-size: 12.5px; color: var(--ink); margin-top: 10px; max-width: 210px; line-height: 1.45; } /* testimonials */ .v3 .tst-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 50px; } .v3 .tst { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; } .v3 .tst-dots { display: none; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; } /* Drawn at 8px, pressed at 24x44 — the dots are the rail's only control. */ .v3 .tst-dots .fdot { position: relative; } .v3 .tst-dots .fdot::before { content: ""; position: absolute; inset: -18px -8px; } .v3 .tst .qmark { color: var(--gold-300); } .v3 .tst .qmark svg { width: 36px; height: 36px; } .v3 .tst p.q { font-size: 16.5px; line-height: 1.55; color: var(--black); margin: 14px 0 0; flex: 1; } .v3 .tst .who { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } .v3 .tst .who .av { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-tint); border:1px solid var(--gold-300); display:grid; place-items:center; color: var(--gold-700); font-family: var(--display); font-weight: 700; } .v3 .tst .who .nm { font-size: 14.5px; font-weight: 700; } .v3 .tst .who .rl { font-size: 13px; color: var(--muted); } .v3 .tst .stars { display: inline-flex; gap: 2px; color: var(--gold); } .v3 .tst .stars svg { width: 15px; height: 15px; } /* coverage */ .v3 .cov { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; } .v3 .cov__map { aspect-ratio: 1.5/1; position: relative; } .v3 .cov__mapimg { position: absolute; inset: 0; background-image: url(/static/web/assets/v3/world-map.webp); background-size: contain; background-position: center; background-repeat: no-repeat; width: 677px; height: 435px; left: 8px; top: 21px; } .v3 .cov__list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(6,auto); column-gap: 36px; margin-top: 28px; } .v3 .cov__list .ci { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 600; } .v3 .cov__list .ci svg { width: 15px; height: 15px; color: var(--gold-700); flex: 0 0 auto; } .v3 .cov__list .ci .ct { color: var(--muted); font-weight: 600; font-size: 13px; margin-left: auto; } /* faq */ .v3 .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; } .v3 .faq-grid > .reveal { width: 447px; height: 352px; } .v3 .faq-item:nth-child(2) .faq-q { width: 670px; height: 38px; } .v3 .faq-item:nth-child(3) .faq-q { width: 669px; height: 17px; } .v3 .faq-item:nth-child(4) .faq-q { width: 671px; height: 37px; } .v3 .faq-item:nth-child(5) .faq-q { width: 670px; height: 36px; } .v3 .faq-list { display: flex; flex-direction: column; } .v3 .faq-item { border-bottom: 1px solid var(--line); } .v3 .faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--black); } .v3 .faq-q .pm { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: all .25s var(--ease); color: var(--ink); } .v3 .faq-item.open .pm { background: var(--black); border-color: var(--black); color: #fff; transform: rotate(180deg); } .v3 .faq-q .pm svg { width: 16px; height: 16px; } .v3 .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); } .v3 .faq-a__in { padding: 0 0 24px; color: var(--ink); font-size: 16px; max-width: 90%; } /* CTA */ .v3 .cta-band { position: relative; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(135deg,#201e1a 0%, #322e26 60%, #423c30 100%); padding: 70px 64px; } .v3 .cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(50% 120% at 90% -10%, rgba(180,168,134,.35), transparent 60%); pointer-events:none; } .v3 .cta-band__in { position: relative; z-index: 2; max-width: 640px; } .v3 .cta-band h2 { color: #fff; font-size: clamp(30px,3.2vw,44px); } .v3 .cta-band p { color: #cfcabf; margin-top: 16px; font-size: 18px; } .v3 .cta-band .acts { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; } .v3 .cta-deco { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); z-index: 1; opacity: .22; } .v3 .cta-deco svg { width: 320px; height: auto; color: var(--gold); } /* footer help band */ .v3 .footer__help { display: flex; align-items: center; gap: 28px; padding-bottom: 40px; margin-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.1); flex-wrap: nowrap; } .v3 .footer__help h3 { font-family: var(--display); color: #fff; font-size: 22px; font-weight: 700; line-height: 1.25; white-space: nowrap; margin: 0; } .v3 .fh-links { display: flex; gap: 24px; } .v3 .fh-links a { color: #e8e5de; font-size: 15px; font-weight: 600; transition: color .18s; white-space: nowrap; } .v3 .fh-links a:hover { color: var(--gold-300); } .v3 .fh-social { display: flex; gap: 10px; margin-left: auto; } .v3 .fh-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: #e8e5de; transition: all .2s; } .v3 .fh-social a:hover { background: var(--gold); border-color: var(--gold); color: #2a2618; } .v3 .fh-social svg { width: 17px !important; height: 17px !important; } .v3 .fh-app { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px; border-radius: 999px; background: #000; border: 1px solid rgba(255,255,255,.16); color: #fff; font-family: var(--text); font-weight: 700; font-size: 14.5px; white-space: nowrap; transition: border-color .2s, background .2s; } .v3 .fh-app:hover { border-color: var(--gold); background: #14130f; } .v3 .fh-app .dv { width: 1px; height: 18px; background: rgba(255,255,255,.28); } .v3 .fh-app svg { width: 17px !important; height: 17px !important; } .v3 .fh-lang { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: none; color: #e8e5de; font-family: var(--text); font-size: 14.5px; white-space: nowrap; cursor: pointer; transition: border-color .2s; } .v3 .fh-lang:hover { border-color: var(--gold); } .v3 .fh-lang svg { width: 15px !important; height: 15px !important; } /* sign-in dropdown */ .v3 .signin { position: relative; display: inline-flex; } .v3 .signin__btn { cursor: pointer; background: none; border: 0; } .v3 .signin__btn > svg:last-child { opacity: .65; transition: transform .18s; } .v3 .signin.open .signin__btn > svg:last-child { transform: rotate(180deg); } .v3 .signin__menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 188px; z-index: 90; display: flex; flex-direction: column; gap: 1px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px -12px rgba(20,18,12,.18); animation: signin-in .18s cubic-bezier(.2,.7,.3,1); } @keyframes signin-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .v3 .signin__menu a { display: block; padding: 10px 13px; border-radius: 8px; font-family: var(--text); font-size: 14px; font-weight: 500; color: var(--ink); transition: background .14s, color .14s; white-space: nowrap; } .v3 .signin__menu a:hover { background: rgba(0,0,0,.05); color: var(--black); } /* footer */ .v3 .footer { background: var(--black); color: #cbc7be; padding: 56px 0 28px; } .v3 .footer__top { display: grid; grid-template-columns: 1.8fr .85fr 1fr 1fr; gap: 28px; } .v3 .footer__top .fcol { position: relative; } .v3 .footer__top .fcol + .fcol { padding-left: 44px; } .v3 .footer__top .fcol + .fcol::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 75%; width: 1px; background: rgba(255,255,255,.09); } .v3 .fcol__2col { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: 1fr 1fr; column-gap: 24px; } .v3 .footer h4 { color: #fff; font-family: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; } .v3 .footer .fcol a { display: block; padding: 8px 0; font-size: 14px; color: #b4b0a7; transition: color .18s; } .v3 .footer .fcol a:hover { color: var(--gold-300); } .v3 .footer__brand p { font-size: 14.5px; color: #a8a49b; margin-top: 18px; max-width: 280px; line-height: 1.6; } .v3 .footer__social { display: flex; gap: 10px; margin-top: 22px; } .v3 .footer__social a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; color: #cbc7be; transition: all .2s; } .v3 .footer__social a:hover { background: var(--gold); color: #2a2618; border-color: var(--gold); } .v3 .footer__social svg { width: 18px; height: 18px; } /* footer contact column — big phone as the anchor, no label */ .v3 .footer .fcol--contact { display: flex; flex-direction: column; align-items: flex-start; } .v3 .footer .fcol--contact .fc-tel { display: block; padding: 0; margin-top: -6px; font-family: var(--display); font-size: clamp(22px, 1.8vw, 27px); font-weight: 800; letter-spacing: .01em; line-height: 1.2; color: #fff; white-space: nowrap; transition: color .18s; } .v3 .footer .fcol--contact .fc-tel:hover { color: var(--gold-300); } .v3 .footer .fcol--contact .fc-mail { display: block; padding: 12px 0 0; font-size: 15px; color: #cbc7be; transition: color .18s; } .v3 .footer .fcol--contact .fc-mail:hover { color: var(--gold-300); } .v3 .footer .fcol--contact .fc-meta { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); align-self: stretch; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.5; color: #8d8980; } .v3 .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; } .v3 .footer__bottom .cp { font-size: 13.5px; color: #8d8980; } .v3 .footer__bottom .lks { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .v3 .footer__bottom .lks .sep { color: rgba(255,255,255,.22); font-size: 12px; } .v3 .footer__bottom .lks .ck { display: inline-flex; align-items: center; gap: 7px; } .v3 .footer__bottom .lks .ck svg { width: 15px; height: 15px; color: var(--gold); } .v3 .footer__bottom .lks a { font-size: 13.5px; color: #a8a49b; } .v3 .footer__bottom .lks a:hover { color: var(--gold-300); } /* reveal on scroll */ .v3 .reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s var(--ease), transform .55s var(--ease); } .v3 .reveal.in { opacity: 1; transform: none; } /* Direction variants. These MUST stay above the prefers-reduced-motion block: that block neutralises `.v3 .reveal` at the same specificity, so a variant declared after it would win and keep moving. */ .v3 .reveal--izq, .v3 .reveal--der { transition: opacity .95s var(--ease-suave), transform .95s var(--ease-suave); } .v3 .reveal--izq { transform: translate3d(-100px, 0, 0); } .v3 .reveal--der { transform: translate3d(100px, 0, 0); } @media (prefers-reduced-motion: reduce) { .v3 .reveal { opacity: 1; transform: none; transition: none; } .v3, .v3 * { scroll-behavior: auto; } } /* ====================== TECH SHOWCASE (business platform) ====================== */ .v3 section.block.tech-sec { padding: 0; } .v3 .tech-card { background: var(--white); padding: 96px 0 0; position: relative; overflow: hidden; border-bottom: 2px solid var(--line); min-height: 76vh; } .v3 .tech { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; } .v3 .tech__rating { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--ink); } .v3 .tech__rating .stars { display: inline-flex; gap: 2px; color: var(--gold); } .v3 .tech__rating .stars svg { width: 15px; height: 15px; } .v3 .tech h2 { font-size: clamp(28px,2.6vw,38px); margin-top: 16px; letter-spacing: -.02em; } .v3 .tech > .tech__copy > p { margin-top: 16px; font-size: 16.5px; color: var(--ink); max-width: 440px; } .v3 .tech__cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; } .v3 .tech__fine { margin-top: 18px; font-size: 13px; color: var(--muted); max-width: 380px; } .v3 .tech__show { position: relative; min-height: 420px; } .v3 .tech__show::before { content: ""; position: absolute; inset: -30px -10px; z-index: 0; background: radial-gradient(60% 60% at 70% 30%, rgba(180,168,134,.22), transparent 65%); background-image: radial-gradient(60% 60% at 70% 30%, rgba(180,168,134,.22), transparent 65%), linear-gradient(rgba(27,26,24,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(27,26,24,.045) 1px, transparent 1px); background-size: auto, 26px 26px, 26px 26px; mask-image: radial-gradient(75% 75% at 50% 45%, #000, transparent 78%); } .v3 .tech__shot { position: absolute; z-index: 1; right: 0; bottom: 0; width: auto; height: auto; max-width: 58%; max-height: 68vh; display: block; filter: drop-shadow(0 30px 60px rgba(0,0,0,.18)); } @media (max-width: 920px) { .v3 .tech { grid-template-columns: 1fr; gap: 40px; } .v3 .tech__show { min-height: 0; } .v3 .tech-card { min-height: 0; } .v3 .tech__shot { position: static; max-width: 100%; margin-top: 8px; } } @media (max-width: 680px) { /* sin fondo por abajo: la captura va a ras del borde inferior de la tarjeta, que es como se dibuja en escritorio — allí el padding es «96px 0 0» y la imagen, absoluta, se pega a bottom:0. Aquí la imagen pasa a estática y este bloque le ponía 48px debajo, que es la banda vacía que quedaba entre la captura y el final de la sección. */ .v3 .tech-card { padding: 48px 0 0; min-height: 0; } } /* ====================== GET APP band ====================== */ .v3 section.block.gapp-sec { padding: 0; } .v3 .gapp { position: relative; overflow: hidden; background: var(--black); padding: 56px; min-height: 480px; display: flex; align-items: center; } .v3 .gapp__mapbg { position: absolute; inset: 0; background-image: url(/static/web/assets/v3/gapp-map.webp); background-size: cover; background-position: center; opacity: .8; } .v3 .gapp__mapbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(27,26,24,.9) 10%, rgba(27,26,24,.06) 50%, rgba(27,26,24,.85) 100%); } .v3 .gapp__copy { position: relative; z-index: 3; max-width: 380px; align-self: flex-start; margin-top: 44px; margin-left: max(32px, calc((100vw - var(--maxw)) / 2 + 32px)); } .v3 .gapp__copy h2 { color: #fff; font-size: clamp(30px,3vw,42px); letter-spacing: -.02em; } .v3 .gapp__copy p { color: #cfcabd; font-size: 16.5px; margin-top: 14px; } .v3 .gapp__copy .gapp__qrlabel { margin-top: 8px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8C8572; } .v3 .gapp__actions { display: flex; align-items: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; width: 445px; height: 184px; } .v3 .gapp__qr { width: 179px; height: 168px; background: #fff; border-radius: 14px; padding: 10px; flex: 0 0 auto; overflow: visible; } .v3 .gapp__qr svg, .v3 .gapp__qr img { width: 195px; height: 155px; display: block; object-fit: contain; } .v3 .gapp__stores { display: flex; flex-direction: column; gap: 10px; } .v3 .gbadge:first-child { width: 163px; height: 47px; } .v3 .gbadge { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 12px; background: #000; border: 1px solid rgba(255,255,255,.18); color: #fff; transition: border-color .2s, background .2s; } .v3 .gbadge:hover { border-color: var(--gold); background: #16140f; } .v3 .gbadge svg { width: 22px; height: 22px; flex: 0 0 auto; } .v3 .gbadge span { display: flex; flex-direction: column; line-height: 1.15; } .v3 .gbadge small { font-size: 10px; color: #bcb8ae; } .v3 .gbadge b { font-size: 15px; font-weight: 600; } .v3 .gapp__phones { position: absolute; right: max(24px, calc((100vw - var(--maxw)) / 2 + 24px)); bottom: -36px; z-index: 3; } .v3 .gapp__shot { width: auto; height: auto; max-width: min(460px, 38vw); max-height: 460px; display: block; filter: drop-shadow(0 40px 70px rgba(0,0,0,.55)); } @media (max-width: 920px) { .v3 .gapp { flex-direction: column; align-items: flex-start; padding-bottom: 380px; min-height: 0; } .v3 .gapp__phones { position: absolute; right: 50%; transform: translateX(50%); bottom: -20px; } } @media (max-width: 680px) { .v3 .gapp { padding: 40px 24px; padding-bottom: 340px; } .v3 .gapp__shot { max-width: 78vw; max-height: 380px; } } @media (max-width: 1080px) { .v3 .hero__grid { grid-template-columns: 1fr; gap: 40px; } .v3 .hero__copy { max-width: 640px; } .v3 .fleet-track .vcard { width: min(320px, 82vw); } .v3 .stats { grid-template-columns: repeat(2,1fr); gap: 32px 0; } .v3 .svc-grid, .v3 .tst-grid, .v3 .steps { grid-template-columns: repeat(2,1fr); } .v3 .why, .v3 .cov, .v3 .faq-grid { grid-template-columns: 1fr; gap: 40px; } .v3 .nav { display: none; } .v3 .feat-grid > * { grid-column: span 6 !important; } .v3 .ready { padding: 56px 28px; } .v3 .footer__help { flex-wrap: wrap; } .v3 .footer__top { grid-template-columns: 1fr 1fr 1fr; row-gap: 36px; } .v3 .footer__top .fcol--services { grid-column: 1 / -1; } .v3 .footer__top .fcol--services .fcol__2col { grid-template-columns: repeat(2, minmax(0, 240px)); } .v3 .footer__top .fcol + .fcol { padding-left: 0; } .v3 .footer__top .fcol + .fcol::before { display: none; } .v3 .footer__bottom { justify-content: center; text-align: center; row-gap: 10px; } } @media (max-width: 680px) { .v3 .wrap { padding: 0 20px; } .v3 .fleet-track { margin: 0 -20px; padding-left: 20px; } .v3 .fleet-track__pad { flex: 0 0 4px; } .v3 .fleet-controls .btn { display: none; } .v3 .svc-grid, .v3 .steps, .v3 .stats { grid-template-columns: 1fr; } /* Testimonials become a drag rail: the same grid turned on its side, with snap so each drag leaves one card framed and one dot lit. The negative margin bleeds it to the edges; the padding keeps the first card aligned with the rest of the page — both are .wrap's 20px here. */ .v3 .tst-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(320px, 82vw); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 50px -20px 0; padding: 0 20px; scrollbar-width: none; } .v3 .tst-grid::-webkit-scrollbar { display: none; } .v3 .tst { scroll-snap-align: start; } .v3 .tst-dots { display: flex; } .v3 section.block { padding: 64px 0; } .v3 section.block.tight { padding: 48px 0; } .v3 .sec-head h2 { font-size: 28px; } .v3 .sec-head p { font-size: 16px; } .v3 .fcard, .v3 .svc { padding: 24px; } .v3 .stats { gap: 24px; } .v3 .stat { border-left: none !important; padding: 0 !important; border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px !important; } .v3 .stat:first-child { border-top: none; padding-top: 0 !important; } /* Coverage keeps TWO columns on the phone — twelve one-line cities single file ran 1.4 screens. Column flow is kept from desktop so the reading order matches. The type, icon and gap scale with the viewport because the longest row ("Washington, D.C.") sets the minimum before it wraps and drags its neighbour with it. The columns are deliberately unequal: every long name falls in the left one. */ .v3 .cov__list { grid-template-columns: 1.22fr 1fr; column-gap: clamp(22px, 8vw, 38px); } .v3 .cov__list .ci { font-size: clamp(10.5px, 3.35vw, 14px); gap: clamp(4px, 1.5vw, 8px); padding: 9px 0; } .v3 .cov__list .ci svg { width: clamp(11px, 3.4vw, 15px); height: clamp(11px, 3.4vw, 15px); } .v3 .cov__list .ci .ct { font-size: clamp(9.5px, 2.9vw, 12px); } .v3 .cta-band { padding: 48px 28px; } .v3 .footer__top { grid-template-columns: 1fr 1fr; column-gap: 24px; } .v3 .footer__top .fcol--services { grid-column: 1 / -1; } .v3 .footer__top .fcol { padding-left: 0 !important; text-align: left; } .v3 .footer__top .fcol::before { display: none !important; } .v3 .footer__help { gap: 18px; padding-bottom: 32px; margin-bottom: 40px; justify-content: center; } .v3 .footer__help h3 { white-space: normal; flex: 1 0 100%; text-align: center; } .v3 .fh-links { width: 100%; justify-content: center; } .v3 .fh-social { margin-left: 0; width: 100%; justify-content: center; } .v3 .footer__bottom { justify-content: center; text-align: center; } .v3 .footer__bottom .lks { justify-content: center; } .v3 .field-row { flex-direction: column; } .v3 .feat-grid > * { grid-column: span 12 !important; } } /* ============================================================ BLACKLANE-STYLE HERO (full-bleed photo · serif headline · glass booking bar) ============================================================ */ /* header overlays the photo, turns solid on scroll */ .v3 .header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; } .v3 .header.scrolled { background: rgba(244,242,234,.85); backdrop-filter: saturate(140%) blur(14px); } .v3 .header:not(.scrolled) .nav a, .v3 .header:not(.scrolled) .linkbtn { color: rgba(255,255,255,.9); } .v3 .header:not(.scrolled) .nav a:hover, .v3 .header:not(.scrolled) .linkbtn:hover { color: #fff; } .v3 .header:not(.scrolled) .linkbtn svg { color: var(--gold-300); } .v3 .header:not(.scrolled) .nav .chev { opacity: .7; } .v3 .lhero { position: relative; z-index: 5; /* popovers from the booking bar paint above following sections */ min-height: 100svh; margin-top: -78px; /* slide up under the sticky header */ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 132px 24px 40px; background: #0c0c0b url("/static/web/assets/v3/hero-v3.jpg") center 38% / cover no-repeat; } .v3 .lhero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; pointer-events: none; transition: opacity .6s ease; } .v3 .lhero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(180deg, rgba(8,8,7,.52) 0%, rgba(8,8,7,.10) 24%, rgba(8,8,7,0) 44%), linear-gradient(0deg, rgba(8,8,7,.80) 0%, rgba(8,8,7,.28) 36%, rgba(8,8,7,0) 62%); } .v3 .lhero__inner { position: relative; z-index: 2; width: 100%; max-width: 960px; display: flex; flex-direction: column; align-items: center; } .v3 .lhero__eyebrow { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; background: rgba(20,20,18,.42); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); border-radius: 999px; padding: 8px 16px 8px 13px; margin-top: 26px; font-family: var(--text); font-size: 13px; font-weight: 500; color: rgba(255,255,255,.92); } .v3 .lhero__eyebrow .stars { display: inline-flex; gap: 1px; color: var(--gold-300); } .v3 .lhero__eyebrow .stars svg { width: 14px; height: 14px; } .v3 .lhero__eyebrow .sep { width: 1px; height: 13px; background: rgba(255,255,255,.22); } .v3 .lhero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.4vw, 66px); line-height: 1.0; letter-spacing: .25px; color: #f4efe5; text-align: center; margin: 0 0 34px; text-shadow: 0 2px 40px rgba(0,0,0,.45); max-width: 780px; } .v3 .lhero__title .em { font-style: italic; color: var(--gold-300); } /* ---- glass booking widget ---- */ .v3 .bw { width: 100%; max-width: 940px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .v3 .bw__seg { display: inline-flex; gap: 4px; padding: 4px; background: rgba(18,18,16,.5); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px); border-radius: 999px; } .v3 .bw__seg button { font-family: var(--text); font-size: 14px; font-weight: 500; color: rgba(255,255,255,.78); padding: 9px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s; } .v3 .bw__seg button svg { width: 16px; height: 16px; } .v3 .bw__seg button.on { background: #fff; color: #1b1a18; font-weight: 600; } .v3 .bw__bar { width: 100%; display: flex; align-items: stretch; gap: 2px; padding: 8px; background: rgba(16,16,14,.5); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(22px) saturate(150%); border-radius: 22px; box-shadow: 0 34px 70px -24px rgba(0,0,0,.7); position: relative; z-index: 30; /* popovers/suggestions above content below */ } .v3 .bw__group { display: flex; align-items: stretch; flex: 1; gap: 2px; min-width: 0; } .v3 .bw__field { flex: 1; min-width: 0; position: relative; padding: 11px 18px; border-radius: 15px; transition: background .16s; cursor: text; text-align: left; } .v3 .bw__field:hover { background: rgba(255,255,255,.05); } .v3 .bw__field.is-focus { background: rgba(255,255,255,.08); } .v3 .bw__field.is-error { box-shadow: inset 0 0 0 1.5px rgba(224,122,95,.7); border-radius: 15px; } .v3 .bw__field label { display: block; font-family: var(--text); font-size: 11px; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.62); margin-bottom: 4px; pointer-events: none; white-space: nowrap; } .v3 .bw__field input { width: 100%; border: none; outline: none; background: transparent; color: #fff; font-size: 15px; font-family: var(--text); font-weight: 500; color-scheme: dark; padding: 0; } .v3 .bw__field input::placeholder { color: rgba(255,255,255,.42); font-weight: 400; } .v3 .bw__field input { accent-color: var(--gold-600); caret-color: var(--gold-300); } .v3 .bw__field input:-webkit-autofill, .v3 .bw__field input:-webkit-autofill:hover, .v3 .bw__field input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px rgba(28,28,25,.95) inset; transition: background-color 99999s ease-out; } .v3 .bw__field input[type="date"]::-webkit-calendar-picker-indicator, .v3 .bw__field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .55; cursor: pointer; } /* fixed widths so location fields keep room */ .v3 .bw__f-date { flex: 0 0 152px; } .v3 .bw__f-time { flex: 0 0 134px; } .v3 .bw__f-pax { flex: 0 0 168px; } .v3 .bw__f-dur { flex: 0 0 124px; } .v3 .bw__field label { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1100px) and (min-width: 921px) { .v3 .bw__f-date { flex: 0 0 130px; } .v3 .bw__f-time { flex: 0 0 120px; } .v3 .bw__f-pax { flex: 0 0 142px; } .v3 .bw__f-date, .v3 .bw__f-time { padding: 11px 10px; } .v3 .bw__go { padding: 0 20px; } } .v3 .bw__div { width: 1px; align-self: stretch; background: rgba(255,255,255,.16); margin: 8px 4px; flex: 0 0 auto; } .v3 .bw__action { display: flex; align-items: stretch; padding-left: 4px; } .v3 .bw__go { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 56px; padding: 0 28px; border-radius: 15px; white-space: nowrap; font-family: var(--text); font-weight: 600; font-size: 15px; color: #2a2618; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-600) 100%); box-shadow: 0 10px 26px -8px rgba(155,142,105,.6); transition: transform .16s, box-shadow .22s, filter .2s; } .v3 .bw__go:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -10px rgba(155,142,105,.7); } .v3 .bw__go:active { transform: translateY(0); } .v3 .bw__go.busy { filter: saturate(.6); pointer-events: none; } .v3 .bw__go svg { width: 18px; height: 18px; } .v3 .bw__err { font-family: var(--text); font-size: 13px; font-weight: 500; color: #f0c2b4; display: inline-flex; align-items: center; gap: 7px; } .v3 .bw__err svg { width: 15px; height: 15px; } /* duration chips — live inside a popover, single row */ .v3 .bw__dur { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; } .v3 .bw__dur button { font-family: var(--text); font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.85); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); transition: all .16s; white-space: nowrap; flex: 0 0 auto; } .v3 .bw__dur button:hover { border-color: rgba(255,255,255,.4); } .v3 .bw__dur button.on { background: #fff; color: #1b1a18; border-color: #fff; font-weight: 600; } /* info chip — Blacklane InfoCard echo */ .v3 .lhero__chip { margin-top: 22px; display: inline-flex; align-items: center; gap: 14px; background: rgba(18,18,16,.42); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(14px); padding: 13px 20px 13px 14px; border-radius: 18px; } .v3 .lhero__chip .ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-700) 100%); } .v3 .lhero__chip .ic svg { width: 24px; height: 24px; } .v3 .lhero__chip .tx { font-family: var(--text); font-size: 14.5px; line-height: 1.4; color: #fff; } .v3 .lhero__chip .tx span { color: rgba(255,255,255,.72); } @media (max-width: 920px) { /* tablet: ease the crop toward the passenger (right side of the photo) */ .v3 .lhero { background-position: 60% 34%; } .v3 .bw__bar { flex-direction: column; gap: 4px; padding: 8px; } .v3 .bw__group { flex-direction: column; gap: 4px; flex: 0 0 auto !important; } .v3 .bw__div { display: none; } .v3 .bw__field { border-radius: 13px; padding: 12px 16px; } .v3 .bw__f-date, .v3 .bw__f-time, .v3 .bw__f-pax, .v3 .bw__f-dur { flex: 0 0 auto; min-width: 0; } .v3 .bw__action { padding: 0; } .v3 .bw__go { width: 100%; } } /* ---- location autocomplete ---- */ .v3 .bw__sug { position: absolute; top: calc(100% + 8px); left: 0; min-width: 320px; max-width: 360px; z-index: 40; background: rgba(20,20,18,.96); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 30px 60px -18px rgba(0,0,0,.75); padding: 6px; display: flex; flex-direction: column; } .v3 .bw__sug-lab { font-family: var(--text); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); padding: 8px 12px 4px; } .v3 .bw__sug button { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; color: #fff; font-family: var(--text); font-size: 14px; text-align: left; transition: background .14s; } .v3 .bw__sug button:hover { background: rgba(255,255,255,.08); } .v3 .bw__sug button.hi { background: rgba(255,255,255,.12); } .v3 .bw__sug button svg { color: var(--gold-300); flex: 0 0 auto; } .v3 .bw__sug button > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .v3 .bw__sug button strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v3 .bw__sug button em { font-style: normal; font-size: 12px; color: rgba(255,255,255,.55); } /* ---- swap pickup/dropoff ---- */ .v3 .bw__swap { align-self: center; flex: 0 0 auto; width: 34px; height: 34px; margin: 0 2px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); transition: transform .3s ease, background .18s, color .18s; } .v3 .bw__swap:hover { background: rgba(255,255,255,.14); color: #fff; transform: rotate(180deg); } /* ---- travellers popover ---- */ .v3 .bw__pax-val { font-family: var(--text); font-size: 15px; font-weight: 500; color: #fff; white-space: nowrap; } .v3 .bw__pax-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 264px; background: rgba(20,20,18,.96); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 30px 60px -18px rgba(0,0,0,.75); padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; cursor: default; } .v3 .bw__pax-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--text); font-size: 14px; font-weight: 500; color: #fff; } .v3 .bw__pax-row .sub { display: block; font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,.5); margin-top: 1px; } .v3 .bw__dur-pop { left: 0; right: auto; min-width: 0; padding: 12px; } /* ---- custom date / time pickers (brand-colored, no native blue) ---- */ .v3 .bw__pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--text); font-size: 15px; font-weight: 500; color: #fff; white-space: nowrap; } .v3 .bw__pick svg { color: var(--gold-300); flex: 0 0 auto; } .v3 .bw__cal { left: 0; right: auto; width: 282px; padding: 14px; cursor: default; } .v3 .bw__cal-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .v3 .bw__cal-h b { font-family: var(--text); font-size: 14px; font-weight: 600; color: #fff; } .v3 .bw__cal-h button { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.22); transition: background .15s, opacity .15s; } .v3 .bw__cal-h button:hover { background: rgba(255,255,255,.12); } .v3 .bw__cal-h button:disabled { opacity: .25; pointer-events: none; } .v3 .bw__cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 10px; } .v3 .bw__cal-dow span { text-align: center; font-family: var(--text); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.45); } .v3 .bw__cal-dow { margin-top: 12px; } .v3 .bw__cal-d { height: 32px; border-radius: 9px; display: grid; place-items: center; font-family: var(--text); font-size: 13.5px; font-weight: 500; color: #fff; transition: background .12s; } .v3 .bw__cal-d:hover { background: rgba(255,255,255,.1); } .v3 .bw__cal-d:disabled { opacity: .25; pointer-events: none; } .v3 .bw__cal-d.today { box-shadow: inset 0 0 0 1px rgba(207,198,172,.55); } .v3 .bw__cal-d.sel { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-600) 100%); color: #2a2618; font-weight: 700; box-shadow: none; } .v3 .bw__cal-f { display: flex; justify-content: flex-end; margin-top: 12px; } .v3 .bw__cal-f button { font-family: var(--text); font-size: 13px; font-weight: 600; color: var(--gold-300); padding: 6px 12px; border-radius: 9px; transition: background .15s; } .v3 .bw__cal-f button:hover { background: rgba(255,255,255,.08); } .v3 .bw__tpop { left: 0; right: auto; min-width: 0; padding: 6px; cursor: default; } .v3 .bw__tlist { width: 148px; max-height: 252px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; } .v3 .bw__tlist::-webkit-scrollbar { width: 5px; } .v3 .bw__tlist::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; } .v3 .bw__tlist button { flex: 0 0 auto; text-align: left; padding: 8px 12px; border-radius: 9px; font-family: var(--text); font-size: 14px; font-weight: 500; color: #fff; transition: background .12s; } .v3 .bw__tlist button:hover { background: rgba(255,255,255,.1); } .v3 .bw__tlist button.sel { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-600) 100%); color: #2a2618; font-weight: 700; } .v3 .bw__step { display: inline-flex; align-items: center; gap: 10px; } .v3 .bw__step button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.25); transition: background .15s, opacity .15s; } .v3 .bw__step button:hover { background: rgba(255,255,255,.12); } .v3 .bw__step button:disabled { opacity: .3; pointer-events: none; } .v3 .bw__step b { min-width: 18px; text-align: center; font-family: var(--text); font-size: 15px; font-weight: 600; } /* ---- airport flight row ---- */ .v3 .bw__flight { width: 100%; max-width: 940px; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 14px; background: rgba(18,18,16,.45); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(12px); font-family: var(--text); font-size: 13.5px; color: rgba(255,255,255,.85); } .v3 .bw__flight svg { color: var(--gold-300); flex: 0 0 auto; } .v3 .bw__flight strong { color: #fff; font-weight: 600; } .v3 .bw__flight input { margin-left: auto; width: 150px; flex: 0 0 auto; background: transparent; border: none; outline: none; border-bottom: 1px solid rgba(255,255,255,.25); padding: 2px 0; color: #fff; font-family: var(--text); font-size: 14px; font-weight: 500; } .v3 .bw__flight input::placeholder { color: rgba(255,255,255,.4); font-weight: 400; } .v3 .bw__flight input:focus { border-bottom-color: var(--gold-300); } .v3 .bw__flight.is-error { border-color: rgba(224,122,95,.7); } .v3 .bw__flight.is-error input { border-bottom-color: rgba(224,122,95,.9); } .v3 .bw__flight.is-error input::placeholder { color: #f0c2b4; } /* capacity-disabled ride cards */ .v3 .ro__card.off { opacity: .45; pointer-events: none; } .v3 .ro__cap { color: #f0c2b4; font-size: 12px; margin-left: 6px; } @media (max-width: 920px) { .v3 .bw__swap { align-self: flex-end; margin: -10px 18px; transform: rotate(90deg); position: relative; z-index: 5; background: rgba(35,34,30,.95); } .v3 .bw__swap:hover { transform: rotate(270deg); } .v3 .bw__flight { flex-wrap: wrap; } .v3 .bw__flight input { margin-left: 28px; } } /* (hero entrance animation removed — keyframe animations can freeze at t=0 in this webview, stranding content invisible) */ /* ---- ride options overlay (booking step 2) ---- */ .v3 .ro { position: fixed; inset: 0; z-index: 220; overflow-y: auto; background: rgba(10,10,9,.94); backdrop-filter: blur(22px) saturate(120%); display: flex; flex-direction: column; } /* (roIn entrance removed — opacity animations can freeze at t=0 in this webview) */ .v3 .ro__head { display: flex; align-items: center; gap: 18px; padding: 20px 28px; border-bottom: 1px solid rgba(255,255,255,.1); position: sticky; top: 0; z-index: 2; background: rgba(10,10,9,.85); backdrop-filter: blur(18px); } .v3 .ro__back { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); transition: background .18s; } .v3 .ro__back:hover { background: rgba(255,255,255,.16); } .v3 .ro__back svg { transform: rotate(180deg); } .v3 .ro__route { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--text); color: #fff; font-size: 15px; font-weight: 500; min-width: 0; } .v3 .ro__route .arr { color: rgba(255,255,255,.4); display: inline-flex; } .v3 .ro__leg { display: inline-flex; align-items: center; gap: 7px; } .v3 .ro__leg svg { color: var(--gold-300); flex: 0 0 auto; } .v3 .ro__when { color: rgba(255,255,255,.55); font-weight: 400; } .v3 .ro__body { width: 100%; max-width: 860px; margin: 0 auto; padding: 40px 24px 64px; } .v3 .ro__title { font-family: var(--serif); font-weight: 400; color: #f4efe5; font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 26px; } .v3 .ro__list { display: flex; flex-direction: column; gap: 12px; } .v3 .ro__card { display: flex; align-items: center; gap: 20px; width: 100%; text-align: left; padding: 20px 22px; border-radius: 18px; color: #fff; font-family: var(--text); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); transition: border-color .18s, background .18s, box-shadow .18s; } .v3 .ro__card:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.07); } .v3 .ro__card.on { border-color: var(--gold-300); background: rgba(180,168,134,.12); box-shadow: 0 0 0 1px var(--gold-300); } .v3 .ro__ic { width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto; display: grid; place-items: center; color: var(--gold-300); background: rgba(255,255,255,.06); } .v3 .ro__info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .v3 .ro__info strong { font-size: 17px; font-weight: 600; } .v3 .ro__info em { font-style: normal; font-size: 13.5px; color: rgba(255,255,255,.6); } .v3 .ro__meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 3px; } .v3 .ro__meta svg { flex: 0 0 auto; } .v3 .ro__meta .dotsep { color: rgba(255,255,255,.35); } .v3 .ro__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 22px; font-weight: 600; white-space: nowrap; } .v3 .ro__price small { font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,.5); } .v3 .ro__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; } .v3 .ro__note { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.65); font-family: var(--text); font-size: 13.5px; } .v3 .ro__note svg { color: var(--gold-300); flex: 0 0 auto; } .v3 .ro .bw__go:disabled { opacity: .4; pointer-events: none; } .v3 .ro__done { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 48px 0; color: #fff; font-family: var(--text); } .v3 .ro__done svg { color: var(--gold-300); } .v3 .ro__done h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 42px); color: #f4efe5; margin: 0; } .v3 .ro__done p { margin: 0; color: rgba(255,255,255,.78); font-size: 15px; } .v3 .ro__done .sub { font-size: 13.5px; color: rgba(255,255,255,.5); } .v3 .ro__done .bw__go { margin-top: 12px; } @media (max-width: 680px) { .v3 .ro__head { padding: 14px 16px; gap: 12px; } .v3 .ro__route { font-size: 13.5px; } .v3 .ro__body { padding: 28px 16px 48px; } .v3 .ro__card { flex-wrap: wrap; gap: 12px 16px; padding: 16px; } .v3 .ro__ic { width: 52px; height: 52px; border-radius: 13px; } .v3 .ro__info { flex: 1 1 60%; } .v3 .ro__price { flex-direction: row; align-items: baseline; gap: 7px; width: 100%; justify-content: flex-end; font-size: 20px; } .v3 .ro__foot .bw__go { width: 100%; } .v3 .bw__sug { min-width: 0; width: 100%; max-width: none; } } @media (max-width: 680px) { .v3 .lhero { padding: 108px 16px 8px; min-height: 110svh; } /* portrait: zoomed-out size (~50% of the photo visible), aligned to the RIGHT edge so the passenger is in frame; fades into black toward the form */ .v3 .lhero { background-size: 185% auto; background-position: 55% top; /* photo shifted right — passenger lands on the right side of the screen */ background-repeat: no-repeat; justify-content: flex-end; } .v3 .lhero::before { background: linear-gradient(180deg, rgba(8,8,7,.5) 0%, rgba(8,8,7,0) 16%), linear-gradient(180deg, rgba(8,8,7,0) 260px, rgba(8,8,7,.9) 430px, rgba(8,8,7,1) 100%); } .v3 .lhero__eyebrow { white-space: normal; flex-wrap: wrap; justify-content: center; row-gap: 4px; text-align: center; font-size: 12.5px; max-width: 100%; } .v3 .lhero__title { margin-bottom: 25px; font-size: 30px !important; /* beats the inline 45px from a direct edit */ } .v3 .bw__seg { width: 100%; } .v3 .bw__seg button { flex: 1; justify-content: center; } .v3 .lhero__chip { margin-top: 12px; width: 100%; } .v3 .lhero__chip .tx { font-size: 13.5px; } } /* ============================================================ BLACKLANE-WIDE — display type (Montserrat) + Inter UI + real photos ============================================================ */ .v3 { /* both are the site's own: the same pair the hero, the header and the footer already use, declared in src/styles.css:36-37 */ --display: "Montserrat", system-ui, sans-serif; --text: "Inter", system-ui, -apple-system, sans-serif; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; /* los que tu app-v3.jsx fija en el */} /* headings become the elegant serif at its true weight (400) */ .v3 h1, .v3 h2, .v3 h3, .v3 h4 { font-family: var(--display); font-weight: 400; letter-spacing: .2px; } .v3 h1 { letter-spacing: .25px; } .v3 .sec-head h2, .v3 .ready h2, .v3 .cta-band h2 { letter-spacing: .2px; } .v3 .vcard__body h3, .v3 .svc h3, .v3 .fcard h3, .v3 .step-c h3, .v3 .feat h4, .v3 .faq-q, .v3 .tst p.q { line-height: 1.16; } /* numbers / monograms that previously leaned on bold weight → serif 400 (no faux-bold) */ .v3 .stat .num, .v3 .pax .val, .v3 .step-c .n, .v3 .rc-stat .v, .v3 .trust__logos .tl, .v3 .faq-q, .v3 .tst .who .av { font-weight: 400; } /* small uppercase labels + meta take the text face, not the display one */ .v3 .eyebrow, .v3 .fkicker, .v3 .trust__lab, .v3 .vcard__tag, .v3 .ph-label, .v3 .field-lab, .v3 .pax .lab, .v3 .rc-stat .k, .v3 .step-c h3 ~ p, .v3 .nav a, .v3 .linkbtn, .v3 .tab, .v3 .tag { font-family: var(--text); } /* real photo fill */ .v3 .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } .v3 .ph-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 38%, rgba(12,11,9,.62) 100%); } .v3 .vcard__img .ph-img { z-index: 0; } .v3 .fcard--photo .ph-img { z-index: 0; } .v3 .fcard--photo::after { z-index: 1; } .v3 .why__media .ph-img { z-index: 0; } /* ============================================================ V2 VARIANT — centered logo in the header (body.logo-center) nav left · logo dead-center · actions right ============================================================ */ .v3.logo-center .header__inner { position: relative; gap: 24px; } .v3.logo-center .header__inner > a[aria-label="Lux Travely home"] { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } .v3.logo-center .header__inner > a[aria-label="Lux Travely home"] .logo svg { height: 32px; } .v3.logo-center .nav { margin-left: 0; justify-content: flex-start; gap: 26px; } .v3.logo-center .nav-left { display: flex; align-items: center; gap: 18px; flex: 1; position: relative; } .v3.logo-center .header__spacer { display: none; } .v3.logo-center .header__actions { flex: 1; justify-content: flex-end; } /* phone: icon-only, number reveals on hover */ .v3.logo-center .linkbtn[href^="tel"] { gap: 0; padding: 10px; margin: -10px 0; border-radius: 12px; transition: background .18s; } .v3.logo-center .linkbtn[href^="tel"]:hover { background: rgba(255,255,255,.12); } .v3.logo-center .linkbtn[href^="tel"] svg { width: 22px; height: 22px; } .v3.logo-center .header.scrolled .linkbtn[href^="tel"]:hover { background: rgba(0,0,0,.06); } .v3.logo-center .linkbtn[href^="tel"] .tel-num { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; margin-left: 0; transition: max-width .32s ease, opacity .24s ease, margin-left .32s ease; } .v3.logo-center .linkbtn[href^="tel"]:hover .tel-num, .v3.logo-center .linkbtn[href^="tel"]:focus-visible .tel-num { max-width: 150px; opacity: 1; margin-left: 8px; } /* hamburger button */ .v3.logo-center .hamb { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--ink); transition: background .18s; /* color snaps — no fade through gray */ } .v3.logo-center .hamb:hover { background: rgba(0,0,0,.06); } .v3.logo-center .header:not(.scrolled) .hamb { color: rgba(255,255,255,.92); } .v3.logo-center .header:not(.scrolled) .hamb:hover { background: rgba(255,255,255,.12); color: #fff; } /* hamburger dropdown */ .v3.logo-center .hamb-menu { position: absolute; top: 60px; left: 0; min-width: 232px; z-index: 60; display: flex; flex-direction: column; gap: 1px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(0,0,0,.18); } .v3.logo-center .hamb-menu a { font-family: var(--text); font-size: 14px; font-weight: 500; color: var(--ink); padding: 10px 13px; border-radius: 8px; transition: background .15s; } .v3.logo-center .hamb-menu a:hover { background: rgba(0,0,0,.05); color: var(--black); } /* ---- v2: floating capsule header when scrolled (perk-style) ---- */ .v3.logo-center .header { padding: 16px 16px 0; } .v3.logo-center .header.scrolled { background: transparent; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } .v3.logo-center .header__inner { border: 1px solid transparent; border-radius: 999px; transition: border-color .2s ease; /* bg/height/shadow snap — transitions freeze in some webviews */ } .v3.logo-center .header.scrolled .header__inner { background: rgb(244,242,234); border-color: var(--line); box-shadow: 0 18px 44px -18px rgba(0,0,0,.3); height: 62px; padding: 0 12px 0 24px; } .v3.logo-center .header.scrolled .linkbtn { color: var(--black); } .v3.logo-center .header.scrolled .linkbtn svg { color: var(--black); } .v3.logo-center .header.scrolled .hamb { color: var(--black); } .v3.logo-center .header.scrolled .nav-left .hamb { color: var(--black); } /* high-specificity guard */ /* ---- language picker (globe · EN/ES) ---- */ .v3.logo-center .lang { position: relative; display: flex; align-items: center; } .v3.logo-center .lang__btn { gap: 4px; padding: 10px 8px; margin: -10px 0; border-radius: 12px; transition: background .18s; } .v3.logo-center .lang__btn:hover { background: rgba(255,255,255,.12); } .v3.logo-center .header.scrolled .lang__btn:hover { background: rgba(0,0,0,.06); } .v3.logo-center .lang__btn svg:last-child { opacity: .65; } .v3.logo-center .lang__menu { position: absolute; top: calc(100% + 14px); right: 0; min-width: 172px; z-index: 70; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 56px -16px rgba(0,0,0,.3); } .v3.logo-center .lang__menu button { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-family: var(--text); font-size: 14.5px; font-weight: 500; color: var(--ink); padding: 10px 12px; border-radius: 9px; text-align: left; transition: background .15s; } .v3.logo-center .lang__menu button:hover { background: rgba(0,0,0,.05); color: var(--black); } .v3.logo-center .lang__menu button.on { background: rgba(180,168,134,.16); color: var(--black); } .v3.logo-center .lang__menu button em { font-style: normal; font-size: 11.5px; letter-spacing: .06em; color: rgba(0,0,0,.45); } .v3.logo-center .lang__menu button.on em { color: var(--gold-700); font-weight: 600; } .v3.logo-center .lhero { margin-top: -95px; } @media (max-width: 860px) { .v3.logo-center .header { padding: 10px 10px 0; } .v3.logo-center .lhero { margin-top: -89px; } .v3.logo-center .header.scrolled .header__inner { height: 56px; padding: 0 10px 0 14px; } } .v3.logo-center .hamb-menu a { display: flex; align-items: center; gap: 10px; } .v3.logo-center .hamb-menu .hm-div { height: 1px; background: var(--line); margin: 6px 8px; } /* ---- v2 mobile header: ☰ left · logo centered · compact actions right ---- */ @media (max-width: 860px) { .v3.logo-center .header__inner { gap: 12px; } .v3.logo-center .header__inner > a[aria-label="Lux Travely home"] .logo svg { height: 26px; } .v3.logo-center .nav-left { gap: 8px; } .v3.logo-center .header__actions { flex: 1; gap: 10px; } .v3.logo-center .linkbtn[href="#faq"] { display: none; } .v3.logo-center .header__actions .btn { height: 40px !important; padding: 0 16px !important; font-size: 14px; } } @media (max-width: 600px) { .v3.logo-center .header__inner > a[aria-label="Lux Travely home"] .logo svg { height: 20px; } .v3.logo-center .header__actions .linkbtn { display: none; } /* phone + sign in live in ☰ menu */ .v3.logo-center .header__actions .btn { height: 38px !important; padding: 0 14px !important; font-size: 13.5px; } .v3.logo-center .hamb { width: 40px; height: 40px; } .v3.logo-center .hamb-menu { left: -6px; min-width: 248px; top: 56px; } } /* ---- v2 mobile actions: user icon only (phone + Book now live in ☰ menu) ---- */ @media (max-width: 680px) { .v3.logo-center .header__actions { gap: 2px; } .v3.logo-center .header__actions .btn, .v3.logo-center .header__actions .linkbtn[href^="tel"], .v3.logo-center .header__actions .linkbtn[href="#faq"] { display: none; } .v3.logo-center .header__actions .linkbtn[href="#book"] { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px 0; padding: 0; border-radius: 12px; transition: background .18s; } .v3.logo-center .header__actions .linkbtn[href="#book"] .signin-label { display: none; } .v3.logo-center .header__actions .linkbtn[href="#book"] svg { width: 25px; height: 25px; } .v3.logo-center .header:not(.scrolled) .header__actions .linkbtn { color: rgba(255,255,255,.92); } .v3.logo-center .header:not(.scrolled) .header__actions .linkbtn:hover { background: rgba(255,255,255,.12); color: #fff; } .v3.logo-center .header.scrolled .header__actions .linkbtn:hover { background: rgba(0,0,0,.06); } } /* ---- v2 mobile sheet menu: full-screen panel ---- */ @media (max-width: 680px) { .v3.logo-center .hamb { position: relative; z-index: 80; } .v3.logo-center .hamb[aria-expanded="true"] { color: #fff; } .v3.logo-center .hamb[aria-expanded="true"]:hover { background: rgba(255,255,255,.12); } .v3.logo-center .hamb-menu { position: fixed; inset: 0; top: 0 !important; left: 0 !important; min-width: 0; border-radius: 0; border: none; z-index: 70; background: rgba(13,13,11,.97); backdrop-filter: blur(20px) saturate(130%); box-shadow: none; padding: 104px 26px 40px; gap: 2px; overflow-y: auto; } .v3.logo-center .hamb-menu a { color: rgba(255,255,255,.92); font-family: var(--serif); font-weight: 400; font-size: 27px; padding: 12px 6px; border-radius: 12px; } .v3.logo-center .hamb-menu a:hover { background: rgba(255,255,255,.06); color: #fff; } .v3.logo-center .hamb-menu .hm-div { background: rgba(255,255,255,.14); margin: 16px 6px; } .v3.logo-center .hamb-menu .hm-div ~ a { font-family: var(--text); font-size: 16px; font-weight: 500; color: rgba(255,255,255,.75); padding: 11px 6px; } .v3.logo-center .hamb-menu .hm-div ~ a svg { color: var(--gold-300); } } /* === ajustes (añadido, no viene del export) === */ /* El degradado de Ready lo pinta .ready::before con inset:0, así que empieza en el borde de .ready — 96px por debajo de donde empieza su sección (section.block tiene padding: 96px 0). Como el degradado ya nace con color en su primera fila, ahí se ve una costura horizontal y parece que arranca a media altura. Se traslada a la sección, que sí abarca ese padding, y así entra desde arriba. No se puede estirar el ::before hacia arriba: .ready es overflow:hidden y lo recortaría igual. */ .v3 section.block:has(> .wrap > .ready) { position: relative; } .v3 section.block:has(> .wrap > .ready)::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 90% at 50% -10%, rgba(180,168,134,.28), rgba(0,0,0,0) 60%); } .v3 .ready::before { background: none; } .v3 .ready { z-index: 1; } /* === arreglo de móvil (añadido, no viene del export) === */ @media (max-width: 760px) { /* «As seen on»: las cinco marcas en UNA fila. El gap de escritorio son 48px, y cuatro de ellos ya piden 192 de los 320 que tiene el teléfono más estrecho — con eso la fila envolvía y NBC caía sola debajo. Las marcas bajan de 26 a 22px de alto (169px de imagen sumada a 22px) y el hueco pasa a escalar con la ventana, con suelo y techo para que ni se peguen ni se separen de más. El alto escala también, y por eso no hace falta un segundo corte para los 320: en la pantalla más estrecha las marcas ceden los 3px que el hueco necesita para crecer, y de 360 hacia arriba recuperan tamaño a la vez que se separan. Sin eso, a 320 el hueco sólo podía crecer comiéndose el margen que este mismo bloque acaba de ganar. El centrado se conserva a propósito: con space-between la primera y la última quedarían clavadas a los extremos, que es la mitad del problema que esto viene a quitar. */ .v3 .trust__inner { flex-direction: column; gap: 14px; padding: 22px 24px; } .v3 .trust__logos { flex-wrap: nowrap; gap: clamp(18px, 8vw, 40px); } .v3 .trust__logos .tl { height: clamp(19px, 5.5vw, 24px); flex: 0 0 auto; } /* el mapa: que llene su tarjeta en vez de medir 677px fijos */ .v3 .cov__mapimg { width: 100%; height: 100%; left: 0; top: 0; } /* la columna y las preguntas del FAQ: alto y ancho medidos en escritorio y cocidos por el exportador */ .v3 .faq-grid > .reveal { width: auto; height: auto; } .v3 .faq-item .faq-q, .v3 .faq-item:nth-child(2) .faq-q, .v3 .faq-item:nth-child(3) .faq-q, .v3 .faq-item:nth-child(4) .faq-q, .v3 .faq-item:nth-child(5) .faq-q { width: 100%; height: auto; } /* GetApp. El texto arranca a 56px del borde y mide 380 de ancho: en 390 de pantalla llega a 436 y se corta por la derecha. Se pega al margen del propio bloque y se le suelta el ancho. .gapp__actions lleva 445x184 cocidos por el exportador; con el ancho libre y el QR algo menor, el QR y las tiendas SIGUEN uno al lado del otro (150 + 20 + 163 = 333 en los 342 disponibles). Eso importa: si envuelven, las tiendas caen sobre las fotos del teléfono, que van en posición absoluta. */ .v3 .gapp__copy { margin-inline: auto; max-width: 100%; } .v3 .gapp__actions { width: auto; height: auto; } .v3 .gapp__qr { width: 150px; height: 141px; } .v3 .gapp__qr svg, .v3 .gapp__qr img { width: 164px; height: 130px; } } @media (max-width: 680px) { /* El carrusel lleva margin 0 -20px para sangrar hasta los bordes, lo que da por hecho un padre con 20px de padding. Aquí .fleet-slider es hermano de .wrap y ya va de borde a borde, así que ese margen no descuenta nada: ensancha la pista a 430px en 390 de ventana. El padding-left de 20px, que es lo que separa la primera tarjeta del borde, se conserva. */ .v3 .fleet-track { margin-left: 0; margin-right: 0; } } /* Coverage apilado: el mapa sube por encima de la lista de ciudades. 1080px es exactamente donde .cov deja de ser dos columnas y se apila; por encima siguen intactas las dos columnas de escritorio, con el mapa a la derecha. El mapa es el SEGUNDO hijo de .cov y la lista vive dentro del PRIMERO, junto al título y la entradilla, así que un `order` a secas subiría el mapa por encima del título y no de la lista. `display:contents` disuelve la caja de ese primer hijo y deja que sus cuatro piezas y el mapa se ordenen entre sí — es lo mismo que hace la columna del mapa en /corporate/book.html por la misma razón. Con las cinco piezas ya sueltas, el row-gap de 40px del contenedor caería TAMBIÉN entre el ojillo, el título y la entradilla, que se separan con sus propios márgenes. Se pone a 0 y el aire alrededor del mapa se escribe aquí; la lista ya trae su margin-top de 28px. */ @media (max-width: 1080px) { .v3 .cov { row-gap: 0; } .v3 .cov > .reveal:first-child { display: contents; } .v3 .cov .eyebrow { order: 1; } .v3 .cov h2 { order: 2; } .v3 .cov .lead { order: 3; } .v3 .cov__map { order: 4; margin-top: 28px; } .v3 .cov__list { order: 5; } } /* Get the app apilado: todo el bloque al centro. 920px es donde .gapp deja de ser texto-a-la-izquierda / móviles-a-la-derecha y se apila; ahí la foto de los teléfonos YA se centra sola (right:50% + translateX). Lo que quedaba descolgado a la izquierda era sólo la columna de texto, y dentro de ella la etiqueta, que vive debajo de las dos tiendas y por eso se leía corrida hacia la derecha. Se centra la caja (margin-inline:auto, que sustituye al margen de sangrado de escritorio), su texto, y la fila de QR + tiendas. La etiqueta se centra respecto a las tiendas, que es la columna bajo la que cuelga. Por encima de 920 no entra: allí el texto se alinea a la izquierda contra los teléfonos de la derecha, y eso es el diseño. */ @media (max-width: 920px) { .v3 .gapp { align-items: center; } .v3 .gapp__copy { align-self: center; margin-inline: auto; text-align: center; } /* los 445x184 que el exportador coció en la fila de QR + tiendas son más anchos que los 380 de la columna: sin soltarlos, la fila sobresale 65px por la derecha y el «centro» queda descentrado justo por eso. Ya estaban sueltos por debajo de 760; hacen falta en todo el tramo apilado. */ .v3 .gapp__actions { width: auto; height: auto; justify-content: center; } .v3 .gapp__qrlabel { text-align: center; } } /* El QR, con menos borde blanco. El blanco venía de tres sitios y se recortan los tres. Medido antes: 16.8px de blanco alrededor de los módulos en una tarjeta de 150 — el 11% del ancho por cada lado. 1 · la zona muda que el propio PNG traía dentro (1.45/1.22/1.47/1.19 módulos, además descentrada) — recortada en el fichero a 1 módulo justo por los cuatro lados; 2 · el padding de la tarjeta; 3 · el buzón. La tarjeta es 179x168 y 150x141, y el QR es cuadrado, así que `object-fit:contain` dejaba franjas blancas arriba y abajo que no eran las mismas que a los lados. La tarjeta pasa a cuadrada y la imagen la llena, y de paso el QR se ve más grande sin cambiar el hueco que ocupa. Queda en 2.2 módulos de zona muda. El estándar pide 4 y este QR nunca los tuvo —venía con 3.6 y escaneaba—; por eso no se baja de ahí y por eso la comprobación de que escanea se hace sobre la CAPTURA de la página, no sobre el fichero. */ .v3 .gapp__qr { height: 179px; padding: 9px; } .v3 .gapp__qr svg, .v3 .gapp__qr img { width: 100%; height: 100%; } @media (max-width: 760px) { .v3 .gapp__qr { width: 150px; height: 150px; } .v3 .gapp__qr svg, .v3 .gapp__qr img { width: 100%; height: 100%; } }