/* ============================================================ Bronson Limusinas — invitación grabada en oro sobre blanco Tipos: Marcellus (display ceremonial) + Hanken Grotesk (cuerpo) ============================================================ */ :root { /* Blanco puro como lienzo; marfil apenas insinuado para bandas alternas */ --bg: oklch(100% 0 0); --surface: oklch(97.8% 0.006 90); --ink: oklch(24% 0.012 80); /* casi-negro cálido, AA sobre blanco */ --ink-soft: oklch(38% 0.014 80); /* Dorado en dos registros: bronce legible / oro de filete */ --bronze: oklch(52% 0.105 85); /* texto y acentos: ≥4.5:1 en blanco */ --gold: oklch(72% 0.125 88); /* filetes, ornamentos, brillo */ --gold-soft: oklch(88% 0.06 90); /* fondos de foco muy tenues */ --line: oklch(88% 0.015 85); --white: #fff; /* Bodoni Moda trae itálica REAL (Marcellus no: el navegador la inclinaba a la fuerza y se veía falsa). Alto contraste didone = registro de lujo/boda. */ --font-display: "Bodoni Moda", serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* z-index semántico */ --z-sticky: 30; --z-float: 40; --z-lightbox: 60; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; /* Red de seguridad: ninguna animación ni elemento decorativo debe permitir arrastrar la página de lado en móvil. (No usar en : rompería `position: sticky`.) */ overflow-x: clip; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; text-wrap: balance; /* Bodoni Moda trae eje óptico (6..96). Sin activarlo, el navegador dibuja siempre la versión pensada para texto chico: trazos parejos y sin contraste, que es justo lo que hace que un titular se vea "por defecto". Con el óptico alto aparecen los remates finos y el contraste grueso/fino que distingue a una didone. */ font-optical-sizing: auto; /* el eje sigue al tamaño real de cada título */ letter-spacing: -0.012em; /* a tamaño grande, Bodoni pide tracking negativo */ } p { max-width: 68ch; } ::selection { background: var(--gold-soft); color: var(--ink); } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; padding: 15px 30px; border-radius: 2px; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .btn.sm { padding: 11px 22px; font-size: 0.88rem; } .btn:active { transform: translateY(1px); } .btn-gold { background: var(--bronze); color: var(--white); border: 1px solid var(--bronze); } .btn-gold:hover { background: oklch(45% 0.1 85); border-color: oklch(45% 0.1 85); } .btn-gold:disabled { opacity: 0.4; cursor: not-allowed; } .btn-line { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn-line:hover { border-color: var(--bronze); color: var(--bronze); } .btn-plain { background: none; border: none; color: var(--ink-soft); text-decoration: underline; } .btn-plain:hover { color: var(--bronze); } /* ---------- Banner superior: puente a Party DiscoBus ---------- */ /* Va arriba de todo: capta al visitante que en realidad busca fiesta en grupo grande antes de que se pierda buscando limusinas. */ .top-bar { display: block; text-decoration: none; background: var(--ink); color: oklch(96% 0.006 90); text-align: center; padding: 9px clamp(14px, 4vw, 40px); font-size: 0.88rem; line-height: 1.45; transition: background 0.35s var(--ease-out); } .top-bar b { color: var(--gold); font-weight: 700; } .top-bar .tb-go { color: var(--gold); font-weight: 700; white-space: nowrap; border-bottom: 1px solid oklch(72% 0.125 88 / 0.5); } @media (hover: hover) and (pointer: fine) { .top-bar:hover { background: oklch(30% 0.014 80); } } .top-bar:active { background: oklch(30% 0.014 80); } @media (max-width: 620px) { .top-bar { font-size: 0.8rem; padding: 8px 14px; } } /* ---------- Header ---------- */ .site-head { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 5vw, 64px); background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } .brand-mark { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px oklch(72% 0.125 88 / 0.28); } /* Sobre la foto del hero el anillo blanco desentona: se vuelve translúcido */ .site-head:not(.scrolled) .brand-mark { box-shadow: 0 0 0 3px oklch(0% 0 0 / 0.35), 0 0 0 4px oklch(72% 0.125 88 / 0.35); } /* Emblema del pie: cierra la marca al final del recorrido */ .foot-emblema { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--gold); margin-bottom: 16px; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px oklch(72% 0.125 88 / 0.25); } /* Sello del acuse de reserva */ img.bs-seal { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 14px; border: 1px solid var(--gold); } .brand-name { font-family: var(--font-display); font-size: 1.22rem; letter-spacing: 0.05em; } .brand-name em { font-style: normal; color: var(--bronze); } .brand-name.big { font-size: 1.7rem; } .head-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); } .head-nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; transition: color 0.25s; } .head-nav a:hover { color: var(--bronze); } .head-nav .nav-cta { color: var(--bronze); border: 1px solid var(--gold); padding: 9px 20px; border-radius: 2px; } .head-nav .nav-cta:hover { background: var(--bronze); color: var(--white); } /* ---------- Hero: la Hummer ocupa toda la pantalla, texto encima ---------- */ /* El video se queda con TODA la pantalla menos las dos barras: la de DiscoBus arriba (--tb lo publica main.js con su alto real) y la de contacto abajo. Es todo el espacio que hay: no queda nada más que recortar. */ .hero-stack { display: flex; flex-direction: column; /* 57 = los 56px de alto mínimo de la barra + su filete superior de 1px. */ min-height: calc(100svh - var(--tb, 0px) - 57px - env(safe-area-inset-bottom)); } /* El hero ya es SÓLO el video: ni títulos ni botones encima. Las acciones viven en la barra fija de abajo. */ .hero { position: relative; flex: 1 1 auto; min-height: 0; isolation: isolate; overflow: hidden; } /* Carrusel del hero: todas las fotos apiladas, sólo la activa opaca. Se anima OPACITY (no display ni layout), así el navegador la compone en GPU y el fundido no provoca tirones. */ /* Video del hero: es el fondo principal. Va encima de las fotos (-2 contra -3) para que ellas queden de respaldo si el mp4 no reproduce. object-position un poco arriba del centro porque la acción —la limusina y la gente en el quemacocos— vive en la mitad superior del cuadro. */ .hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; pointer-events: none; } /* Quien pidió menos movimiento no ve el video: se queda con la foto fija */ @media (prefers-reduced-motion: reduce) { .hero-video { display: none; } } .hero-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; opacity: 0; transition: opacity 1.4s var(--ease-out); } .hero-bg.is-on { opacity: 1; } /* Sin JS o con una sola foto cargada, la primera manda: nunca queda en negro */ .hero-bg[data-slide="0"] { opacity: 1; } .hero-bg[data-slide="0"].is-off { opacity: 0; } /* Quien pidió menos animación ve una sola foto, fija */ @media (prefers-reduced-motion: reduce) { .hero-bg { transition: none; } .hero-bg:not([data-slide="0"]) { display: none; } } /* Velo oscuro: sin él el texto blanco se pierde sobre la carrocería clara. Vertical para el texto + radial que hunde las orillas y centra la mirada. */ .hero-scrim { position: absolute; inset: 0; z-index: -1; background: /* Mancha central bajo el texto. Calibrada MIDIENDO el contraste sobre las 6 fotos del carrusel, no a ojo: con 0.30 el dorado caía a 2.3:1. */ /* Ya no hay texto encima del video, así que las dos manchas centrales que lo protegían salieron: sólo apagaban la toma. Queda un degradado arriba (para que el logo y "Reservar" sigan legibles sobre lo que caiga detrás) y una caída suave al final que empalma con la franja oscura. */ linear-gradient(to bottom, oklch(14% 0.02 80 / 0.78) 0%, oklch(14% 0.02 80 / 0.60) 14%, oklch(14% 0.02 80 / 0.12) 34%, oklch(14% 0.02 80 / 0.08) 70%, oklch(14% 0.02 80 / 0.34) 100%); } /* El titular, el filete y los dos botones vivían aquí. Se retiraron: el hero es sólo el video y las acciones se mudaron a la barra fija de abajo. El H1 sigue en el HTML como .sr-only para no perder la señal de SEO. */ /* Indicador de scroll */ .hero-cue { position: absolute; bottom: clamp(22px, 4vh, 40px); left: 50%; translate: -50% 0; width: 26px; height: 44px; border: 1px solid oklch(100% 0 0 / 0.55); border-radius: 14px; display: grid; justify-items: center; padding-top: 8px; } .hero-cue span { width: 3px; height: 8px; border-radius: 2px; background: var(--gold); animation: cue 1.9s var(--ease-out) infinite; } @keyframes cue { 0%,100% { translate: 0 0; opacity: 1; } 55% { translate: 0 12px; opacity: 0.15; } } .hero-cue:hover { border-color: var(--gold); } /* Oculta: el bloque de acciones bajó hasta el pie y esta flecha vivía ahí. Va DESPUÉS de la regla de arriba a propósito: esa declara display: grid y si el override fuera antes, no ganaría. En móvil ya estaba oculta desde antes por la barra fija de WhatsApp. */ .hero-cue { display: none; } /* Header transparente sobre el hero; sólido al bajar */ .site-head { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } .site-head .brand-name, .site-head .head-nav a { color: var(--white); } /* Dorado CLARO, no --gold: medido sobre los 37 cuadros del video, el bronce de marca cae a 2.55:1 sobre los cuadros de cielo abierto. Este tono da 6.29:1 y se sigue leyendo dorado. */ .site-head .brand-name em { color: oklch(89% 0.10 88); } .site-head .brand-mark { border-color: var(--gold); } .site-head .brand-mark::after { border-color: oklch(100% 0 0 / 0.7); } .site-head .nav-cta { color: var(--white); border-color: oklch(100% 0 0 / 0.6); } .site-head .nav-cta:hover { background: var(--white); color: var(--ink); border-color: var(--white); } .site-head.scrolled { background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--line); } .site-head.scrolled .brand-name { color: var(--ink); } .site-head.scrolled .brand-name em { color: var(--bronze); } .site-head.scrolled .head-nav a { color: var(--ink-soft); } .site-head.scrolled .head-nav a:hover { color: var(--bronze); } .site-head.scrolled .brand-mark { border-color: var(--gold); } .site-head.scrolled .brand-mark::after { border-color: var(--bronze); } .site-head.scrolled .nav-cta { color: var(--bronze); border-color: var(--gold); } .site-head.scrolled .nav-cta:hover { background: var(--bronze); color: var(--white); } /* ---------- Encabezados de sección ---------- */ .sec-head { text-align: center; margin-bottom: clamp(40px, 6vh, 64px); } .sec-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: 0.02em; position: relative; display: inline-block; padding-bottom: 18px; } .sec-head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 64px; height: 1px; background: var(--gold); } .sec-head p { color: var(--ink-soft); margin: 18px auto 0; max-width: 56ch; } .sec-head p b { color: var(--bronze); } /* Título de lámina de oro (SVG). Lleva su propio filete, así que se le quita el subrayado que traen los encabezados normales. */ .sec-head-art h2::after { content: none; } /* Selector con la misma fuerza que `.sec-head h2`, si no gana su inline-block y el SVG colapsa a un ancho por defecto. */ .sec-head h2.fleet-title { display: block; width: min(720px, 100%); max-width: 720px; margin-inline: auto; padding-bottom: 0; } /* El título de ocasiones es mucho más largo: necesita más caja para no quedar diminuto al escalarse dentro de 720px. */ .sec-head h2.occ-title { width: min(1000px, 100%); max-width: 1000px; } .sec-head h2.reserva-title { width: min(560px, 100%); max-width: 560px; } .fleet-title svg { width: 100%; height: auto; display: block; overflow: visible; } /* Contenedor de los defs compartidos: no ocupa espacio ni se ve. */ .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .ft-text { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 104px; letter-spacing: 0.005em; } /* Segundo renglón del título de la flota: mismo oro, menor jerarquía. */ .ft-sub { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 52px; letter-spacing: 0.02em; } /* Barrido: cruza el ancho del viewBox y descansa entre pasadas */ .ft-shine { animation: barrido 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes barrido { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(1200px); } } /* Cada viewBox necesita su propio recorrido: el barrido viaja en unidades del viewBox, no en píxeles de pantalla. */ .ft-shine-wide { animation-name: barridoAncho; } @keyframes barridoAncho { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(1800px); } } .ft-shine-480 { animation-name: barrido480; } @keyframes barrido480 { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(800px); } } .ft-shine-640 { animation-name: barrido640; } .ft-shine-900 { animation-name: barrido900; } @keyframes barrido900 { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(1450px); } } .ft-shine-700 { animation-name: barrido700; } @keyframes barrido700 { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(1140px); } } @keyframes barrido640 { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(1040px); } } /* Intercambio de variantes: caja ancha en escritorio, angosta en móvil. La especificidad debe igualar a `.fleet-title svg` (0,1,1), si no esa regla gana con display:block y se ven los DOS títulos encimados. */ .fleet-title svg.ft-movil { display: none; } @media (max-width: 720px) { .sec-head h2.fleet-title > svg:not(.ft-movil) { display: none; } .fleet-title svg.ft-movil { display: block; } } @media (prefers-reduced-motion: reduce) { .ft-shine { animation: none; opacity: 0; } } /* ---------- Flota ---------- */ .fleet { padding: clamp(72px, 12vh, 140px) clamp(20px, 5vw, 64px); max-width: 1240px; margin-inline: auto; } /* Destacada */ /* Grid del resto */ /* ---------- Ocasiones ---------- */ .occasions { background: var(--surface); border-block: 1px solid var(--line); } .occ-inner { max-width: 1080px; margin-inline: auto; padding: clamp(72px, 11vh, 130px) clamp(20px, 5vw, 64px); } .occ-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(30px, 4vw, 48px); } .occ-list li { text-align: center; padding: 0 6px; } .occ-list b { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; display: block; padding-bottom: 14px; margin-bottom: 14px; position: relative; } .occ-list b::after { content: "❖"; position: absolute; left: 50%; bottom: -8px; translate: -50% 0; color: var(--gold); font-size: 0.65rem; } .occ-list p { color: var(--ink-soft); font-size: 0.97rem; margin-inline: auto; } /* Tarjetas de ocasión: se levantan y se enmarcan en oro al tocarlas */ .occ-list li { cursor: default; border: 1px solid transparent; border-radius: 3px; padding: 18px 14px; transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); } .occ-list li b { transition: color 0.4s var(--ease-out); } .occ-list li b::after { transition: color 0.4s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .occ-list li:hover { border-color: var(--gold); background: var(--bg); transform: translateY(-4px); box-shadow: 0 6px 22px oklch(60% 0.09 85 / 0.14); } .occ-list li:hover b { color: var(--bronze); } } .occ-list li:active { border-color: var(--gold); background: var(--bg); } .occ-list li:active b { color: var(--bronze); } /* ---------- Testimonio ---------- */ .quote-band { padding: clamp(80px, 12vh, 150px) clamp(20px, 5vw, 64px); text-align: center; } .quote-head { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--bronze); margin-bottom: clamp(26px, 4vh, 44px); } .quote-band figure { max-width: 760px; margin-inline: auto; } .q-stars { color: var(--gold); letter-spacing: 0.35em; font-size: 1rem; display: block; margin-bottom: 22px; } .quote-band blockquote p { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.35; margin-inline: auto; } .quote-band figcaption { margin-top: 24px; color: var(--ink-soft); font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase; } /* ---------- Reserva ---------- */ .booking { background: var(--surface); border-top: 1px solid var(--line); } .bk-inner { max-width: 880px; margin-inline: auto; padding: clamp(72px, 11vh, 130px) clamp(20px, 5vw, 64px); } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; } .bk-field { display: flex; flex-direction: column; gap: 7px; } .bk-field.wide { grid-column: 1 / -1; } .bk-field > span { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); } .bk-field input, .bk-field select, .bk-field textarea { font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; transition: border-color 0.25s; } .bk-field input::placeholder, .bk-field textarea::placeholder { color: oklch(50% 0.01 80); } .bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px var(--gold-soft); } .bk-field textarea { resize: vertical; min-height: 84px; } /* Horario: dos selects en una fila con la "a" entre ellos */ .bk-times > div { display: flex; align-items: center; gap: 10px; } .bk-times select { flex: 1; min-width: 0; } .bk-times em { color: var(--ink-soft); font-style: normal; } .bk-captcha { margin-top: 22px; } .bk-accept { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 0.93rem; color: var(--ink-soft); cursor: pointer; } .bk-accept input { margin-top: 4px; accent-color: var(--bronze); } .bk-submit { width: 100%; margin-top: 24px; font-size: 1.02rem; } .bk-note { text-align: center; font-size: 0.86rem; color: var(--ink-soft); margin: 14px auto 0; } /* Éxito */ .bk-success { background: var(--white); border: 1px solid var(--gold); padding: clamp(28px, 5vw, 56px); text-align: center; } .bs-seal { color: var(--gold); font-size: 1.6rem; margin-bottom: 12px; } .bk-success h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 10px; } .bk-success > p { color: var(--ink-soft); margin-inline: auto; } .bs-flag { margin: 14px auto 0; font-size: 0.9rem; } .bs-flag.ok span { color: oklch(52% 0.14 150); } .bs-flag.warn span { color: oklch(55% 0.13 60); } .bs-pay { margin: 28px auto 0; padding: 24px; border: 1px dashed var(--gold); max-width: 480px; } .bs-pay h4 { font-size: 1.15rem; margin-bottom: 6px; } .bs-pay p { color: var(--ink-soft); font-size: 0.95rem; margin-inline: auto; } .bs-pay b { color: var(--bronze); } .bs-payacts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } .bs-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; } /* ---------- Puente al sitio de party buses ---------- */ .bus-xlink { border-top: 1px solid var(--line); background: var(--bg); } .bx-inner { max-width: 1080px; margin-inline: auto; padding: clamp(48px, 8vh, 84px) clamp(20px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(22px, 4vw, 48px); } .bx-txt { flex: 1 1 380px; } .bx-k { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--bronze); margin-bottom: 8px; } .bx-txt h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); font-style: italic; } .bx-txt p { color: var(--ink-soft); margin-top: 12px; font-size: 0.99rem; } .bx-txt p b { color: var(--ink); font-weight: 600; } .bus-xlink .btn { flex: none; } @media (max-width: 620px) { .bx-inner { flex-direction: column; align-items: flex-start; } .bus-xlink .btn { width: 100%; } } /* ---------- Footer ---------- */ .site-foot { padding: clamp(56px, 9vh, 100px) clamp(20px, 5vw, 64px) 40px; max-width: 1240px; margin-inline: auto; } .foot-rule { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(40px, 6vh, 64px); } .foot-rule i { flex: 1; height: 1px; background: var(--line); } .foot-rule b { color: var(--gold); font-size: 0.75rem; font-weight: 400; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 48px); } .foot-brand p { color: var(--ink-soft); font-size: 0.95rem; margin-top: 12px; } .foot-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .foot-col b { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; } .foot-col a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-size: 0.96rem; } .foot-col a:not(.btn):hover { color: var(--bronze); } .foot-col p { color: var(--ink-soft); font-size: 0.93rem; } .foot-legal { text-align: center; color: oklch(55% 0.01 80); font-size: 0.85rem; margin: 56px auto 0; } /* Contador de visitas: discreto a propósito. En una marca de lujo un número grande y llamativo resta más de lo que suma. */ .foot-visitas { text-align: center; margin: 10px auto 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(62% 0.01 80); } .foot-visitas .fv-num { font-family: var(--font-display); font-style: italic; font-size: 1rem; letter-spacing: 0.02em; color: var(--bronze); text-transform: none; margin-right: 5px; } /* ---------- Lightbox ---------- */ .lightbox[hidden] { display: none; } .lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); background: color-mix(in oklab, var(--ink) 92%, transparent); display: flex; align-items: center; justify-content: center; gap: 8px; padding: clamp(12px, 3vw, 40px); } .lb-stage { max-width: min(1100px, 86vw); text-align: center; } .lb-stage img, .lb-stage video { max-height: 78vh; width: auto; max-width: 100%; margin-inline: auto; border: 1px solid var(--gold); background: var(--white); padding: 8px; } /* El video de la unidad ocupa el mismo marco que las fotos. display:block evita el hueco de línea base bajo el elemento; [hidden] lo saca del flujo. */ .lb-stage video { display: block; background: var(--ink); height: auto; aspect-ratio: 16 / 9; /* Ancho fijo desde el primer cuadro: antes de cargar metadatos el video no tiene tamaño propio y el contenedor lo dejaba en 0 px. */ width: min(86vw, 1100px); max-height: 78vh; } .lb-stage video[hidden], .lb-stage img[hidden] { display: none; } .lb-stage figcaption { color: var(--white); margin-top: 14px; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; } .lb-close, .lb-nav { background: none; border: 1px solid color-mix(in oklab, var(--white) 45%, transparent); color: var(--white); cursor: pointer; border-radius: 2px; transition: border-color 0.25s, color 0.25s; } .lb-close:hover, .lb-nav:hover { border-color: var(--gold); color: var(--gold); } .lb-close { position: absolute; top: 20px; right: 24px; font-size: 1.6rem; line-height: 1; padding: 6px 14px; } .lb-nav { font-size: 2rem; line-height: 1; padding: 10px 18px; flex: none; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { /* En vertical, "cover" recorta muchísimo una foto apaisada: se corre el encuadre al frente de la unidad para que se lea como limusina. */ .hero-bg { object-position: 36% 52%; } .head-nav a:not(.nav-cta) { display: none; } .brand-mark { width: 36px; height: 36px; } .brand-name { font-size: 1.08rem; } .bk-grid { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; } .lb-nav { position: absolute; bottom: 18px; } .lb-prev { left: 24px; } .lb-next { right: 24px; } } /* ============================================================ OPTIMIZACIÓN MÓVIL El grueso del tráfico entra por celular. Todo lo de aquí abajo corrige lo que sólo falla con el dedo y en pantalla chica. ============================================================ */ /* --- Toque inmediato y destello discreto en lugar del azul del sistema --- */ a, button, label, select, input, textarea, summary { touch-action: manipulation; -webkit-tap-highlight-color: color-mix(in oklab, var(--gold) 22%, transparent); } /* --- Hover sólo donde existe de verdad --------------------------------- En táctil el :hover se queda "pegado" tras el primer toque y, peor, escondía la etiqueta "Ver fotos" que es la ÚNICA pista de que la foto abre galería. */ @media (hover: hover) and (pointer: fine) { } @media (hover: none) { /* La etiqueta vive siempre visible: sin ella nadie sabe que hay galería */ /* Confirmación de toque: en móvil es el único feedback que existe */ .btn-gold:active { background: oklch(42% 0.09 85); border-color: oklch(42% 0.09 85); } .btn-line:active { border-color: var(--bronze); color: var(--bronze); background: var(--gold-soft); } .btn-plain:active { color: var(--bronze); } .nav-cta:active { background: var(--white); color: var(--ink); } .foot-col a:active { color: var(--bronze); } .lb-nav:active, .lb-close:active { border-color: var(--gold); color: var(--gold); } /* backdrop-filter fijo = la operación más cara en GPU móvil, y corre durante todo el scroll. Opaco se ve igual y libera frames. */ .site-head.scrolled { backdrop-filter: none; background: var(--bg); } } /* --- Objetivos táctiles a 44 px mínimo --------------------------------- */ .brand { min-height: 44px; } .head-nav .nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; } .btn.sm { min-height: 44px; } /* Área de toque expandida sin mover un píxel del diseño */ .hero-cue::after { content: ""; position: absolute; inset: -2px -15px; } .foot-col a:not(.btn) { display: flex; align-items: center; min-height: 44px; } .bk-accept { min-height: 44px; padding: 6px 0; align-items: center; } .bk-accept input { width: 24px; height: 24px; flex: none; } /* El botón × es la única salida del visor: 48 px y fuera del notch */ .lb-close { top: max(16px, calc(env(safe-area-inset-top) + 8px)); right: max(16px, calc(env(safe-area-inset-right) + 8px)); padding: 0; min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } /* --- Botón flotante de WhatsApp --------------------------------------- Sin precios en la página, WhatsApp ES la conversión; antes sólo existía en 3 puntos de ~9000 px de scroll. */ .wa-float { position: fixed; z-index: var(--z-float); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bronze); color: var(--white); box-shadow: 0 4px 14px oklch(20% 0.02 80 / 0.28); opacity: 0; visibility: hidden; translate: 0 12px; transition: opacity 0.35s var(--ease-out), translate 0.35s var(--ease-out), visibility 0.35s; } .wa-float.show { opacity: 1; visibility: visible; translate: 0 0; } .wa-float svg { width: 28px; height: 28px; } .wa-float:active { background: oklch(42% 0.09 85); } .lightbox:not([hidden]) ~ .wa-float, body.lb-open .wa-float { opacity: 0; visibility: hidden; } /* Texto sólo para buscadores y lectores de pantalla. No se usa display:none ni visibility:hidden: eso lo excluiría del árbol de accesibilidad. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Teléfono y confianza dentro del hero ------------------------------ */ .hero-call { margin: 7px auto 0; font-size: 0.79rem; color: oklch(92% 0.01 90); text-shadow: 0 1px 3px oklch(12% 0.02 80 / 0.9), 0 2px 14px oklch(12% 0.02 80 / 0.8); } .hero-call a { color: oklch(88% 0.11 88); font-weight: 700; text-decoration: none; border-bottom: 1px solid oklch(88% 0.11 88 / 0.5); display: inline-block; padding: 6px 4px; /* área de toque real */ } .hero-trust { margin: 3px auto 0; font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: oklch(88% 0.008 90); text-shadow: 0 1px 3px oklch(12% 0.02 80 / 0.9), 0 2px 14px oklch(12% 0.02 80 / 0.8); } /* --- Barra de contacto fija (móvil) ------------------------------------ Antes, para LLAMAR había que recorrer la página entera hasta el pie: en la práctica nadie llamaba. Los dos canales del negocio quedan a un pulgar. */ /* Antes sólo aparecía en celular. Ahora es la ÚNICA llamada a la acción del hero en cualquier pantalla —el video no lleva botones encima—, así que se muestra siempre. */ .cbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-float); background: var(--white); border-top: 1px solid var(--gold); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px oklch(20% 0.02 80 / 0.14); } .cbar-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; text-decoration: none; font-weight: 700; letter-spacing: 0.02em; } .cbar-btn svg { width: 22px; height: 22px; flex: none; } /* La acción arriba y el número abajo: la palabra es lo que se lee de un vistazo y el número da la confianza de que hay alguien del otro lado. */ .cbar-txt { display: grid; line-height: 1.12; text-align: left; } .cbar-txt b { font-size: 0.98rem; font-weight: 700; } .cbar-txt i { font-style: normal; font-size: 0.78rem; font-weight: 600; opacity: 0.82; font-variant-numeric: tabular-nums; } .cbar-call { color: var(--bronze); border-right: 1px solid var(--line); } .cbar-call:active { background: var(--gold-soft); } .cbar-wa { background: var(--bronze); color: var(--white); } .cbar-wa:active { background: oklch(42% 0.09 85); } /* El pie no puede quedar debajo de la barra */ body { padding-bottom: calc(57px + env(safe-area-inset-bottom)); } /* Con la barra puesta, el botón redondo repite el mismo canal y estorba */ .wa-float { display: none; } /* La galería a pantalla completa manda */ body.lb-open .cbar { display: none; } /* --- Banda de confianza (datos reales, nada inventado) ----------------- */ .trust { border-bottom: 1px solid var(--line); background: var(--surface); } .trust ul { list-style: none; display: flex; gap: 0; max-width: 1240px; margin-inline: auto; padding: 18px clamp(20px, 5vw, 64px); } .trust li { flex: 1; text-align: center; font-size: 0.9rem; color: var(--ink-soft); padding-inline: 14px; border-left: 1px solid var(--line); } .trust li:first-child { border-left: none; } .trust b { display: block; color: var(--ink); font-weight: 600; } /* Realce dorado al pasar el dedo o el mouse. No son enlaces: sólo responden. */ .trust li { cursor: default; border-radius: 3px; transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out); } .trust li b { transition: color 0.35s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .trust li:hover { background: var(--gold-soft); transform: translateY(-2px); } .trust li:hover b { color: var(--bronze); } } .trust li:active { background: var(--gold-soft); } .trust li:active b { color: var(--bronze); } /* En escritorio la cinta no existe: el track es un bloque normal y la copia duplicada (la que cierra el bucle en móvil) no se pinta. */ .trust-track > ul[aria-hidden="true"] { display: none; } @media (max-width: 760px) { /* Antes: rejilla de dos columnas. Ocupaba media pantalla justo debajo del hero y estorbaba. Ahora es una cinta que se desplaza sola: los cinco datos pasan completos, sin cortar palabras y sin scroll manual. El track lleva DOS