/* ============================================================ RideYeah · shell (17-sep-2026) ------------------------------------------------------------ LA CAPA COMPARTIDA DE TODAS LAS PÁGINAS: cabecera fija, menú móvil, barra CTA fija, chat flotante, pie y tarjetas de ruta. El build (scripts/build.mjs) la inyecta al final del de cada página, DESPUÉS del CSS propio de la portada y de site.css, así que lo que se escribe aquí manda sobre los dos. Antes estas reglas vivían copiadas en rideyeah-home.html, es/index.html y assets/site.css y se habían separado (menú, barra, chat). Reglas de la capa: · Nada de anchos fijos: todo lo fijo abajo se MIDE (shell.js escribe --ry-bottom-ui) y el resto se coloca respecto a eso. · Safe-area de iPhone/Android en la propia barra y en el chat. · El menú móvil se desplaza solo: nunca deja enlaces fuera de la pantalla, ni en teléfonos bajos ni en horizontal. ============================================================ */ :root { /* Alto de lo que esté fijo abajo (barra CTA o aviso de cookies), en px. Lo escribe assets/shell.js; 0 en escritorio. */ --ry-bottom-ui: 0px; --ry-safe-b: env(safe-area-inset-bottom, 0px); --ry-safe-t: env(safe-area-inset-top, 0px); --ry-nav-h: 78px; } /* El ancho del documento es el del teléfono, siempre. `clip` corta lo que se salga SIN crear un contenedor de scroll (como hacía `hidden`) y sin dejar que Android agrande la ventana para hacer caber un elemento ancho: eso era lo que dejaba la página de aeropuerto como un escritorio en miniatura. */ html, body { overflow-x: clip; } /* El espacio que ocupa la UI fija abajo se reserva en el flujo del documento: el pie entero se puede leer y el final de cada página se alcanza. */ body { padding-bottom: var(--ry-bottom-ui); } /* ---------- Cabecera fija ---------- */ .nav-inner { gap: 12px; } .brand { min-width: 0; } .nav-toggle { flex-shrink: 0; margin-right: -10px; /* la zona táctil de 44px sobresale del margen, el icono queda alineado */ border-radius: 4px; } /* ---------- Menú móvil ---------- */ .mobile-menu { position: fixed; inset: 0; /* Por encima del aviso de cookies (200): con el menú abierto, el idioma y el botón de reservar de abajo tienen que poderse tocar. */ z-index: 210; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(var(--ry-nav-h) + var(--ry-safe-t)) 20px calc(24px + var(--ry-safe-b)); background: rgba(8, 8, 9, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s; } .mobile-menu.open { opacity: 1; visibility: visible; transform: none; } .mm-close { position: fixed; top: calc(17px + var(--ry-safe-t)); right: 14px; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--bone); cursor: pointer; border-radius: 4px; } .mm-inner { display: flex; flex-direction: column; gap: 22px; max-width: 520px; min-height: 100%; margin: 0 auto; } .mm-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; } .mm-group { min-width: 0; } .mm-h { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .mm-links { display: flex; flex-direction: column; } .mobile-menu .mm-links a { display: flex; align-items: center; min-height: 44px; padding: 2px 0; font-family: var(--serif); font-size: clamp(17px, 4.8vw, 20px); line-height: 1.2; color: var(--bone); opacity: 1; transform: none; transition: color 0.2s; } .mobile-menu .mm-links a:hover, .mobile-menu .mm-links a:focus-visible { color: var(--gold); } .mm-work .mm-links { flex-direction: row; flex-wrap: wrap; gap: 0 26px; } .mm-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 6px; } .mobile-menu .lang-pill { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 24px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); } .mobile-menu .lang-pill:hover { border-color: var(--gold); color: var(--gold); } .mobile-menu .mm-foot .btn-gold { flex: 1; justify-content: center; min-height: 48px; margin: 0; padding: 14px 20px; font-family: var(--sans); font-size: 14px; } @media (max-width: 359px) { .mm-groups { grid-template-columns: 1fr; gap: 18px; } } /* Teléfono en horizontal: menos aire arriba, que el alto es poco. */ @media (max-height: 480px) { .mobile-menu { padding-top: calc(64px + var(--ry-safe-t)); } .mm-inner { gap: 16px; } } @media (prefers-reduced-motion: reduce) { .mobile-menu { transition: none; } } /* ---------- Barra CTA fija (solo teléfono) ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none; gap: 10px; padding: 10px 16px calc(10px + var(--ry-safe-b)); background: rgba(10, 10, 11, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(120%); transition: transform 0.4s var(--ease); } .sticky-cta.show { transform: none; } .sticky-cta a, .sticky-cta button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; border-radius: 3px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; } .sc-call { flex: 0 0 auto; padding: 0 18px; border: 1px solid var(--line); color: var(--bone); background: none; } .sc-book { flex: 1; min-width: 0; padding: 0 14px; background: var(--gold); color: var(--ink); border: none; } @media (max-width: 880px) { .sticky-cta { display: flex; } } /* Se esconde cuando otra cosa ocupa la pantalla: el chat abierto, el menú, o el aviso de cookies (que va abajo también y se le montaba encima). */ body.chat-open .sticky-cta, body.nav-open .sticky-cta, html.ry-has-consent .sticky-cta { transform: translateY(120%); } @media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } } /* ---------- Chat flotante: se coloca respecto a lo que haya abajo ---------- assets/chat.js trae su propio CSS (para /travel, que no carga site.css) y lo mete en el en tiempo de ejecución, o sea DESPUÉS de este archivo; por eso estas reglas llevan `body` delante: ganan por especificidad, no por orden. En escritorio --ry-bottom-ui es 0 y el botón queda a 22px como antes. */ body .chat-fab { right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(calc(var(--ry-bottom-ui) + 14px), calc(22px + var(--ry-safe-b))); } @media (min-width: 881px) { body .chat-fab { right: 22px; } } @media (max-width: 880px) { body .chat-panel { top: calc(10px + var(--ry-safe-t)); right: 10px; bottom: calc(10px + var(--ry-safe-b)); left: 10px; width: auto; height: auto; } } /* ---------- Tarjetas de ruta (LAX → ciudad) ---------- Vivían solo en el CSS de la portada; la página de aeropuerto las armaba con un estilo en línea de 3 columnas fijas que a 360px medía 608px y obligaba al teléfono a dibujar la página en miniatura. Aquí, para todas. */ .routes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .route { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 20px 22px; background: var(--ink-2); transition: 0.4s var(--ease); cursor: pointer; } .route:hover { border-color: var(--gold); background: var(--ink-3); transform: translateX(4px); } .route > div:first-child { min-width: 0; } .route .rt { font-size: 15px; font-weight: 500; } .route .rp { font-size: 12px; color: var(--mute); margin-top: 3px; } .route .ra { flex-shrink: 0; font-family: var(--serif); font-size: 20px; color: var(--gold); white-space: nowrap; } @media (max-width: 880px) { .routes-grid { grid-template-columns: 1fr; } } /* ---------- Pie ---------- */ .foot-col a { padding: 8px 0; /* 36px de alto: cómodo para el dedo sin estirar el pie */ overflow-wrap: anywhere; } .foot-brand p, .foot-bottom span { overflow-wrap: anywhere; } .foot-legal a { display: inline-block; padding: 6px 0; } @media (max-width: 600px) { footer { padding: 56px 0 28px; } .foot-grid { margin-bottom: 40px; } } /* ---------- Formulario de la portada en teléfonos estrechos ---------- */ @media (max-width: 380px) { .booking { padding: 8px; } .bk-field { padding: 12px 12px; } .bk-tab { font-size: 11.5px; letter-spacing: 0.02em; } } /* ---------- Secciones más densas en teléfono (dueño, 17-sep-2026) ---------- "Que el usuario no tenga que bajar tanto para ver completa una sección": rutas y servicios a dos columnas, confianza 2×2, testimonios y flota en carrusel deslizable, y el pie en dos filas por dos columnas. Solo por debajo de 600 px: el escritorio no cambia (salvo las redes, que el build mueve al cuadro de la marca en todos los anchos). */ .foot-brand .socials { margin-top: 16px; } .sec-pista { display: none; } @media (max-width: 600px) { /* Rutas: dos columnas compactas (13 tarjetas → 7 filas) */ .routes-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .route { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 12px; } .route:hover { transform: none; } .route .rt { font-size: 14px; line-height: 1.25; } .route .rp { font-size: 11px; margin-top: 2px; } .route .ra { font-size: 19px; margin-top: 6px; } /* Servicios: dos columnas, icono chico, texto recortado a tres líneas */ .svc-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .svc { padding: 18px 14px 16px; } .svc .ic { width: 44px; height: 44px; margin-bottom: 12px; } .svc .ic svg { width: 20px; height: 20px; } .svc h3 { font-size: 19px; line-height: 1.15; margin-bottom: 6px; } .svc p { font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .svc .go { margin-top: 12px; font-size: 11px; letter-spacing: 0.1em; } /* Confianza: 2 × 2 en vez de cuatro renglones */ .trust-grid { grid-template-columns: 1fr 1fr; } .trust-item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .trust-item:nth-child(odd) { border-left: none; } .trust-item:nth-child(-n + 2) { border-top: none; } .trust-item .tt { font-size: 13px; } .trust-item .ts { font-size: 11.5px; } /* Testimonios y flota: carrusel deslizable; la siguiente tarjeta se asoma */ .testi-grid, .fleet-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 14px; margin: 0 -20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .testi-grid::-webkit-scrollbar, .fleet-grid::-webkit-scrollbar { display: none; } .testi { flex: 0 0 84%; scroll-snap-align: start; padding: 24px 22px; } .testi blockquote { font-size: 14px; margin-bottom: 18px; } .car { flex: 0 0 84%; scroll-snap-align: start; } .car-img { height: 150px; } .car-body { padding: 18px; } .car h3 { font-size: 21px; } .testi:hover, .car:hover { transform: none; } /* Pista del carrusel (la pone shell.js): puntitos y una flecha chica en dorado que "empuja" hacia la derecha y, al tocarla, pasa a la siguiente. */ .sec-pista { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; margin-top: 2px; } .sec-pista span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background 0.25s; } .sec-pista span.on { background: var(--gold); } .sec-flecha { position: absolute; right: 0; top: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(201, 168, 106, 0.45); border-radius: 50%; background: none; color: var(--gold); cursor: pointer; animation: ry-empujon 2.4s ease-in-out infinite; } .sec-flecha svg { width: 14px; height: 14px; } @keyframes ry-empujon { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } /* Pie: dos filas por dos columnas (Servicios | Empresa / Contacto | Marca) */ .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; margin-bottom: 34px; } .foot-brand { grid-column: auto; order: 4; } .foot-brand .brand { margin-bottom: 12px; } .foot-brand p { font-size: 12px; line-height: 1.5; } .foot-brand .socials { margin-top: 12px; } .foot-col h3 { margin-bottom: 10px; font-size: 11px; } .foot-col a { padding: 5px 0; font-size: 13px; } .socials a { width: 34px; height: 34px; } .foot-bottom { font-size: 11px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .sec-flecha { animation: none; } }