/* ============================================================ TRYVEX — Demo web para concesionarias Sistema visual derivado de una auditoría con Playwright a porsche.com, koenigsegg.com, bugatti.com y rolls-roycemotorcars.com. Lo que midió esa auditoría y aquí se aplica: · Fondos casi negros, nunca grises medios ni blancos pálidos (Bugatti #000, Rolls-Royce #151515). · Radio cero. Porsche 47 elementos sin redondeo contra 6 con él; Bugatti 20/0; Rolls-Royce 33/0. El lujo automotriz no redondea. · Dos escalas tipográficas y nada en medio: display enorme y de peso ligero (Porsche h1 95px/400, Rolls h2 70px/300) frente a etiquetas diminutas en mayúscula con tracking abierto (Bugatti 12px +1.2px, Rolls 12px +2px). · Tracking abierto en los display (Rolls: +15.4px sobre 70px). · Monoespaciada para datos técnicos (Bugatti Monospace). · Filetes de 1px como estructura, en vez de cajas y sombras. · El texto vive junto a la imagen, no dentro de una tarjeta. ============================================================ */ :root { --black: #0a0a0b; --black-2: #0f0f11; --black-3: #141416; --paper: #f3f2f0; --muted: rgba(243, 242, 240, 0.58); --faint: rgba(243, 242, 240, 0.38); --line: rgba(243, 242, 240, 0.14); --line-soft: rgba(243, 242, 240, 0.08); /* Un solo acento y sus variantes. El burdeos de marca para fondos claros, la versión luminosa para fondos oscuros. Desaturada al ~72% (antes 100%): a plena saturación grita sobre el negro. */ --accent: #8f1d2c; --accent-dark: #6e1622; --accent-bright: #e56d7d; --header-h: 4rem; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Geist", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; /* Curva propia: las de serie del navegador no tienen carácter */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* La curva desacelerada exacta que usa Porsche en sus tiles (0.6s) */ --porsche-ease: cubic-bezier(0, 0, 0.2, 1); /* Escala de z-index: nada de 9999 sueltos */ --z-banner: 1; --z-float: 800; --z-header: 900; --z-progress: 950; --z-loader: 1000; --z-skip: 1100; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } /* Aquí había `overflow-x: hidden` como respaldo de `clip`. Se quitó: `hidden` obliga al navegador a calcular `overflow-y: auto`, y eso convierte a en contenedor de scroll, lo que ROMPE `position: sticky` — el montaje entero del hero depende de él. Se verificó que no hay desborde horizontal real en 320, 360, 390, 414, 768, 1024, 1280, 1440 ni 1920px, así que la regla sobraba. */ body { background: var(--black); color: var(--paper); font-family: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; /* Evita que el rebote del final de página arrastre al scroll del hero */ overscroll-behavior-y: none; } img { max-width: 100%; display: block; } /* Grano global: rompe la planitud digital del negro plano. Fijo, muy tenue y sin capturar el puntero. */ body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-banner); opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"); } /* Cifras alineadas en columna: precios y specs no deben bailar */ .car-card__price, .car-card__specs, .plan__price, .plan__fee, .catalog__count, .reviews__rating { font-variant-numeric: tabular-nums; } /* Evita palabras huérfanas al final de párrafo */ p { text-wrap: pretty; } /* Display ligero y abierto: el peso lo da el tamaño, no el grosor */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; } h1 { font-size: clamp(2.2rem, 5.6vw, 4.4rem); } h2 { font-size: clamp(1.75rem, 4.2vw, 3rem); } h3 { font-size: clamp(1.1rem, 2.1vw, 1.4rem); } h1, h2, h3, p, li, a, blockquote { overflow-wrap: break-word; } .lead { font-size: clamp(0.98rem, 1.5vw, 1.12rem); color: var(--muted); margin-top: 1.1rem; max-width: 44rem; } /* Etiqueta diminuta con tracking abierto: el contrapunto del display */ .eyebrow { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; color: var(--faint); margin-bottom: 1.4rem; } .eyebrow--light { color: var(--faint); } /* Filete de acento sobre los títulos de sección */ .section-mark { display: block; width: 2.2rem; height: 1px; background: var(--accent-bright); margin-bottom: 1.6rem; } .section-head { max-width: 62rem; margin: 0 auto; padding-inline: clamp(1.2rem, 5vw, 4rem); } .section-head--center { text-align: center; } .section-head--center .section-mark { margin-inline: auto; } .section-head--center .lead { margin-inline: auto; } /* ---------- Accesibilidad base ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: var(--z-skip); background: var(--paper); color: var(--black); padding: 0.7rem 1.2rem; text-decoration: none; } .skip-link:focus { top: 0; } :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; } /* ---------- Botones y enlaces ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.9rem 2rem; background: var(--paper); color: var(--black); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; text-decoration: none; border: 1px solid var(--paper); transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.12s var(--ease); } .btn:hover { background: transparent; color: var(--paper); } /* Respuesta táctil inmediata al presionar */ .btn:active { transform: scale(0.985); } .btn--ghost, .btn--light, .btn--outline { background: transparent; color: var(--paper); /* Más marcado que --line: un botón tiene que leerse como botón */ border-color: rgba(243, 242, 240, 0.32); } .btn--ghost:hover, .btn--light:hover, .btn--outline:hover { background: var(--paper); color: var(--black); border-color: var(--paper); } .btn--small { min-height: 42px; padding: 0.6rem 1.3rem; font-size: 0.66rem; } /* Enlace-etiqueta al modo Bugatti: subrayado fino, sin caja */ .link-label { display: inline-flex; align-items: center; gap: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); color: var(--paper); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); } .link-label:hover { border-bottom-color: var(--accent-bright); color: var(--accent-bright); } .link-label:active { transform: translateY(1px); } .chip:active { transform: translateY(1px); } /* ---------- Loader ---------- */ .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: none; place-content: center; text-align: center; gap: 1.1rem; background: var(--black); transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease); } .js .loader { display: grid; } .loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .loader__brand { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; } .loader__brand span { color: var(--accent-bright); } .loader__text { color: var(--faint); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.24em; } .loader__bar { width: min(220px, 54vw); height: 1px; margin: 0 auto; background: var(--line); overflow: hidden; } .loader__bar span { display: block; height: 100%; width: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s linear; } /* ---------- Barra de progreso de lectura ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-progress); pointer-events: none; } .scroll-progress span { display: block; height: 100%; width: 100%; background: var(--accent-bright); transform: scaleX(0); transform-origin: left center; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); background: transparent; transition: background-color 0.4s var(--ease); } /* Filete inferior al ancho completo, como Rolls-Royce */ .site-header::after { content: ""; position: absolute; left: clamp(1.2rem, 5vw, 4rem); right: clamp(1.2rem, 5vw, 4rem); bottom: 0; height: 1px; background: var(--line-soft); } .site-header.is-scrolled { background: rgba(10, 10, 11, 0.86); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header.is-scrolled { background: rgba(10, 10, 11, 0.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } } .site-header.is-open { background: var(--black); } .site-header nav { position: relative; z-index: 1; max-width: 96rem; min-height: var(--header-h); margin: 0 auto; padding: 0.6rem clamp(1.2rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.34em; color: var(--paper); text-decoration: none; } .brand span, .brand-accent { color: var(--accent-bright); } .nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; } .nav-links a:not(.btn) { position: relative; color: var(--muted); text-decoration: none; font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; padding: 0.4rem 0; transition: color 0.25s var(--ease); } .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent-bright); transition: right 0.3s var(--ease); } .nav-links a:not(.btn):hover { color: var(--paper); } .nav-links a:not(.btn):hover::after { right: 0; } .nav-links a.is-current { color: var(--paper); } .nav-links a.is-current::after { right: 0; } .nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; place-items: center; } .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { display: block; width: 24px; height: 1px; background: var(--paper); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .nav-toggle__bar { position: relative; } .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; } .nav-toggle__bar::before { top: -7px; } .nav-toggle__bar::after { top: 7px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .nav-toggle { display: grid; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem clamp(1.2rem, 5vw, 4rem) 2rem; background: var(--black); border-bottom: 1px solid var(--line); display: none; } .nav-links.is-open { display: flex; } .nav-links a:not(.btn) { display: block; padding: 1rem 0; font-size: 0.78rem; border-bottom: 1px solid var(--line-soft); } .nav-links .btn { margin-top: 1.4rem; } } /* ---------- Bloque "película": escenario sticky ---------- El escenario se queda fijo mientras dura .film — hero y showroom pasan por encima del MISMO plano, que sigue avanzando. Se despega solo al terminar el bloque, justo antes del primer banner. Se usa position:sticky y no el pin de ScrollTrigger porque el pin saca el elemento del flujo y el contenido siguiente arranca DESPUÉS del pin-spacer: nunca podría pasarle por encima. */ .film { position: relative; } /* svh y no lvh. `lvh` mide el viewport con la barra del navegador OCULTA, así que en un teléfono real el escenario queda más alto que el área visible: al subir, la barra reaparece, el área se achica y el elemento sticky ya no calza — ese es el tirón. `svh` mide con la barra visible: nunca sobra, y el margen negativo siempre coincide. En escritorio ambas valen lo mismo, así que no cambia nada. */ .sequence { position: sticky; top: 0; height: 100vh; height: 100svh; } .film__scroll { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; } .film__runway { height: 240vh; } /* En móvil cada pantalla de recorrido cuesta muchos más gestos de dedo: 2000px de pista vacía se hacían largos. */ @media (max-width: 760px) { .film__runway { height: 165vh; } } @media (max-height: 560px) { .film__runway { height: 300vh; } } .sequence__stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0d0d0f; } #sequence-canvas, .sequence__fallback { position: absolute; inset: 0; width: 100%; height: 100%; } .sequence__fallback { object-fit: cover; } /* Velo de legibilidad: degradado desde la izquierda, el auto queda limpio a la derecha. */ .sequence__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(10, 10, 11, 0.9) 0%, rgba(10, 10, 11, 0.72) 26%, rgba(10, 10, 11, 0.3) 48%, rgba(10, 10, 11, 0) 66%), linear-gradient(0deg, rgba(10, 10, 11, 0.75) 0%, rgba(10, 10, 11, 0.35) 18%, rgba(10, 10, 11, 0) 42%); } .sequence__stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: clamp(7rem, 16vh, 11rem); z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0%, rgba(10, 10, 11, 0.55) 100%); } /* --- Título persistente del hero --- Centrado con grid, NUNCA con transform: GSAP escribe transform al animar `y` y descolocaría el bloque a mitad de la secuencia. */ .hero-inner { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: start; padding: calc(var(--header-h) + 1.5rem) clamp(1.2rem, 5vw, 4rem) 9rem; pointer-events: none; } .hero-title { max-width: min(34rem, 100%); pointer-events: auto; } .hero-title h1 { color: var(--paper); text-wrap: balance; } .hero-title__desc { margin-top: 1.4rem; font-size: clamp(0.94rem, 1.3vw, 1.05rem); color: var(--muted); max-width: 28rem; } .hero-title__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; } /* --- Frases que rotan con el scroll --- */ .sequence__captions { position: absolute; left: 0; right: 0; bottom: clamp(1.6rem, 6vh, 3.4rem); z-index: 2; display: grid; justify-items: center; padding-inline: 1.25rem; pointer-events: none; } /* Todas en la MISMA celda: el relevo es un fundido en el mismo lugar */ .sequence__caption { grid-area: 1 / 1; max-width: min(46rem, 100%); text-align: center; } .sequence__caption::before { content: ""; display: block; width: clamp(2rem, 4vw, 2.8rem); height: 1px; margin: 0 auto clamp(0.7rem, 1.6vh, 1.1rem); background: rgba(255, 107, 127, 0.55); } .sequence__caption p { font-family: var(--font-display); font-size: clamp(1.05rem, 2.3vw, 1.8rem); font-weight: 400; line-height: 1.32; letter-spacing: 0.005em; color: rgba(243, 242, 240, 0.78); text-wrap: balance; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55); } .anim-on .sequence__caption--2, .anim-on .sequence__caption--3, .anim-on .sequence__caption--4 { opacity: 0; } /* Sin JS o con movimiento reducido: se desarma el montaje sticky */ html:not(.anim-on) .sequence, html:not(.anim-on) .sequence__stage { height: auto; min-height: 100vh; min-height: 100svh; } html:not(.anim-on) .sequence { position: relative; } html:not(.anim-on) .film__scroll { margin-top: 0; } html:not(.anim-on) .film__runway { display: none; } html:not(.anim-on) .hero-inner { position: relative; inset: auto; justify-items: center; text-align: center; padding: calc(var(--header-h) + 4rem) 1.5rem 3rem; } html:not(.anim-on) .hero-title__desc { margin-inline: auto; } html:not(.anim-on) .hero-title__actions { justify-content: center; } html:not(.anim-on) .sequence__captions { position: relative; inset: auto; gap: 0.8rem; padding-bottom: 3rem; } html:not(.anim-on) .sequence__caption { grid-area: auto; } .scroll-hint { display: block; margin-top: 0.6rem; font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); animation: hint-bounce 2.2s ease-in-out infinite; } @keyframes hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (max-width: 900px) { .sequence__scrim { background: linear-gradient(180deg, rgba(10, 10, 11, 0.88) 0%, rgba(10, 10, 11, 0.6) 34%, rgba(10, 10, 11, 0.12) 52%, rgba(10, 10, 11, 0.5) 78%, rgba(10, 10, 11, 0.8) 100%); } .hero-inner { align-content: start; justify-items: center; text-align: center; padding: calc(var(--header-h) + 1.6rem) 1.4rem 8rem; } .hero-title { max-width: 34rem; } .hero-title__desc { margin-inline: auto; } .hero-title__actions { justify-content: center; } } @media (max-width: 620px) { .hero-title h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); } .hero-title__desc { font-size: 0.92rem; margin-top: 1rem; } .hero-title__actions { margin-top: 1.5rem; gap: 0.6rem; } .hero-inner { padding-bottom: 7rem; } } @media (max-width: 400px) { .hero-title__desc { display: none; } .sequence__caption p { font-size: 1rem; } } @media (max-height: 560px) { .hero-title__desc, .hero-title__actions, .scroll-hint { display: none; } .hero-title h1 { font-size: 1.5rem; } .hero-inner { padding-top: calc(var(--header-h) + 0.6rem); padding-bottom: 5rem; } .sequence__captions { bottom: 0.7rem; } .sequence__caption p { font-size: 1rem; } } /* ---------- Showroom ---------- */ /* Velo neutro: el color de la escena lo pone el video, no un tinte. Un rojo encima teñía todo y competía con el propio auto. */ .gallery { position: relative; padding: clamp(4rem, 12vh, 8rem) 0 clamp(2rem, 5vh, 3.5rem); background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0%, rgba(10, 10, 11, 0.55) 18%, rgba(10, 10, 11, 0.85) 55%, var(--black) 100%); } .gallery::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: clamp(2.5rem, 6vh, 3.6rem); transform: translateX(-50%); background: linear-gradient(180deg, var(--accent-bright), transparent); opacity: 0.6; } /* ---------- Banners a sangre ---------- Cada banner toma el ancho completo y se tiñe con la paleta de su propia fotografía (--tint, inyectado en el HTML). */ /* Sin banda previa: la primera imagen entra directo tras el texto */ .showroom-banners { background: var(--black); } .showroom-banner { position: relative; display: grid; align-items: end; min-height: clamp(26rem, 82vh, 44rem); overflow: hidden; isolation: isolate; background: rgb(var(--tint)); } /* El medio sobresale arriba y abajo: ese excedente es el recorrido del parallax, así la imagen nunca deja bordes al desplazarse. */ .showroom-banner__media { position: absolute; inset: -12% 0; z-index: -2; } .showroom-banner__media img { width: 100%; height: 100%; object-fit: cover; } .showroom-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(var(--tint) / 0.95) 0%, rgb(var(--tint) / 0.84) 30%, rgb(var(--tint) / 0.42) 55%, rgb(var(--tint) / 0.08) 78%, transparent 100%), linear-gradient(0deg, rgb(var(--tint) / 0.9) 0%, rgb(var(--tint) / 0.28) 32%, transparent 60%); } .showroom-banner__body { max-width: min(40rem, 100%); padding: clamp(2.5rem, 8vh, 5.5rem) clamp(1.4rem, 5vw, 4rem); } .showroom-banner__step { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.28em; color: var(--faint); } .showroom-banner__step span { color: var(--accent-bright); padding-right: 0.8rem; border-right: 1px solid var(--line); } .showroom-banner h3 { color: var(--paper); font-size: clamp(1.7rem, 4.4vw, 2.8rem); text-wrap: balance; } .showroom-banner__desc { margin-top: 1.1rem; font-size: clamp(0.92rem, 1.4vw, 1.05rem); line-height: 1.6; color: rgba(243, 242, 240, 0.76); } @media (max-width: 768px) { .showroom-banner { min-height: clamp(22rem, 70vh, 32rem); } .showroom-banner::after { background: linear-gradient(0deg, rgb(var(--tint) / 0.96) 0%, rgb(var(--tint) / 0.86) 30%, rgb(var(--tint) / 0.48) 58%, rgb(var(--tint) / 0.12) 82%, rgb(var(--tint) / 0.04) 100%); } } /* ---------- Puente hacia el catálogo ---------- */ .section-fade { position: relative; } .section-fade--showroom { height: clamp(8rem, 20vh, 13rem); background: linear-gradient(180deg, #0c0c0e 0%, var(--black) 100%); } .section-fade::after { content: ""; position: absolute; inset: 0; opacity: 0.045; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Catálogo ---------- Sin tarjetas: imagen a ras y texto debajo, separados por filetes. Es el patrón de Bugatti — el contenedor desaparece. */ .catalog { padding: clamp(5rem, 14vh, 9rem) 0; background: var(--black); } .catalog__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 2rem; max-width: 62rem; margin: clamp(2.5rem, 6vh, 4rem) auto 0; padding-inline: clamp(1.2rem, 5vw, 4rem); } .chip { padding: 0.4rem 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--faint); font: inherit; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; cursor: pointer; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .chip:hover { color: var(--paper); } .chip.is-active { color: var(--paper); border-bottom-color: var(--accent-bright); } .catalog__count { margin-top: 2rem; text-align: center; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--faint); } /* --- Acordeón al modo Porsche --- Dos modelos por fila. Al pasar el cursor sobre uno, este crece y su compañero de fila cede el ancho — es el `transition: width 0.6s cubic-bezier(0,0,.2,1)` que usan sus tiles, replicado con flex-grow. Las filas las arma el JS (y las rehace al filtrar) porque en CSS no hay forma de acotar el efecto a los hermanos de la misma fila. */ .catalog__grid { display: flex; flex-direction: column; gap: clamp(1rem, 1.8vw, 1.6rem); max-width: 96rem; margin: clamp(2rem, 5vh, 3rem) auto 0; padding-inline: clamp(1.2rem, 5vw, 4rem); } .catalog__row { display: flex; gap: clamp(1rem, 1.8vw, 1.6rem); align-items: stretch; } /* Altura fija del medio: si dependiera de la proporción, al crecer el ancho crecería el alto y la fila entera daría un salto. Porsche fija la altura del tile por esto mismo. */ .catalog__row .car-card__media { height: clamp(15rem, 24vw, 23rem); } .catalog__row .car-card__media img { height: 100%; aspect-ratio: auto; } /* --- Cards al modo Porsche --- Medido en porsche.com: el tile es un bloque negro sólido de radio 32px SIN sombra, la imagen va a 5:4 con object-fit cover y la transición corre 0.6s con cubic-bezier(0,0,.2,1) —la curva desacelerada—, no la del navegador. La imagen no escala: hace fundido. Aquí se combinan ambos: fundido de velo + un acercamiento mínimo. */ /* Defensa: una card suelta fuera de su fila (por ejemplo si el JS no llegó a agruparlas) no debe heredar `flex-basis: 0` dentro de la grilla en columna, o colapsaría a cero de alto. */ .catalog__grid > .car-card { flex: 0 0 auto; } .car-card { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; background: var(--black-2); border-radius: 28px; overflow: hidden; transition: flex-grow 0.6s var(--porsche-ease), background-color 0.6s var(--porsche-ease); } /* Difuminado perimetral: una sombra interior muy abierta que sigue el radio de la card y funde sus bordes con el negro del fondo. Va como ::before para quedar por encima de la imagen, y hereda el radio para que la curva de las esquinas la respete. Se atenúa con el cursor, acompañando al velo de la foto. */ .car-card::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 34px 8px rgba(10, 10, 11, 0.78), inset 0 0 0 1px rgba(243, 242, 240, 0.045); transition: box-shadow 0.6s var(--porsche-ease); } .car-card:hover { background: var(--black-3); } .car-card:hover::before { box-shadow: inset 0 0 30px 4px rgba(10, 10, 11, 0.55), inset 0 0 0 1px rgba(243, 242, 240, 0.08); } /* El que recibe el cursor gana ancho; el otro de la fila lo cede. El min-width importa tanto como el hover: bajo 760px las filas se apilan, y sin acotarlo estas reglas ganaban por especificidad y seguían agrandando las cards en pantalla angosta. */ @media (hover: hover) and (pointer: fine) and (min-width: 761px) { .catalog__row:hover .car-card { flex-grow: 0.82; } .catalog__row .car-card:hover { flex-grow: 1.18; } } .car-card.is-hidden { display: none; } .car-card__media { position: relative; overflow: hidden; background: var(--black-3); } /* 5:4, la proporción exacta de los tiles de Porsche */ .car-card__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transform: scale(1.005); transition: transform 0.6s var(--porsche-ease), opacity 0.6s var(--porsche-ease); } /* Velo que se retira: la foto "se enciende" al pasar el cursor, en vez de saltar de tamaño */ .car-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0.12) 45%, rgba(10, 10, 11, 0) 100%); transition: opacity 0.6s var(--porsche-ease); } .car-card:hover .car-card__media img { transform: scale(1.045); } .car-card:hover .car-card__media::after { opacity: 0; } .car-card__tag { position: absolute; top: 1rem; left: 1rem; padding: 0.3rem 0.7rem; background: rgba(10, 10, 11, 0.72); color: var(--paper); font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; } .car-card__tag--hot { background: var(--accent); } /* Ahora la card es un bloque sólido: el texto necesita respiro dentro */ .car-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem clamp(1.3rem, 2vw, 1.8rem) 1.8rem; } .car-card__brand { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--faint); margin-bottom: 0.6rem; } .car-card h3 { color: var(--paper); font-size: clamp(1.3rem, 2.4vw, 1.75rem); } /* --- Una tipografía por marca --- Cada nombre de modelo se rotula con la fuente que evoca el carácter de su marca, no con la genérica del sitio. El `data-brand` ya existía para el filtro, así que sirve de gancho sin tocar el HTML. Las medidas (tamaño relativo, tracking) se ajustan una por una: cada familia tiene su propia altura de x y su propio ancho aparente, y sin corregirlas los ocho títulos se verían de tamaños distintos. */ /* Porsche — grotesca neutra y precisa, del registro de Porsche Next */ [data-brand="porsche"] h3 { font-family: "Archivo", var(--font-body); font-weight: 500; letter-spacing: -0.02em; } /* Ferrari — Titillium nació en una academia tipográfica italiana y es habitual en el automovilismo */ [data-brand="ferrari"] h3 { font-family: "Titillium Web", var(--font-body); font-weight: 600; letter-spacing: -0.01em; } /* Lamborghini — ángulos cortados, como la geometría hexagonal de la marca */ [data-brand="lamborghini"] h3 { font-family: "Chakra Petch", var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.2rem, 2.2vw, 1.6rem); } /* Bugatti — geométrica art déco, por la herencia de los años veinte */ [data-brand="bugatti"] h3 { font-family: "Josefin Sans", var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(1.25rem, 2.3vw, 1.65rem); } /* BMW — grotesca industrial de trazo exacto */ [data-brand="bmw"] h3 { font-family: "Saira", var(--font-body); font-weight: 500; letter-spacing: -0.01em; } /* Mercedes-AMG — humanista, del registro de la Corporate S */ [data-brand="mercedes"] h3 { font-family: "Barlow", var(--font-body); font-weight: 500; letter-spacing: 0.01em; } /* Chevrolet — condensada americana, de rotulación de muscle car */ [data-brand="chevrolet"] h3 { font-family: "Oswald", var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.4rem, 2.6vw, 1.9rem); } /* Ford — display pesada, el peso del Mustang */ [data-brand="ford"] h3 { font-family: "Anton", var(--font-body); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.35rem, 2.5vw, 1.8rem); } .car-card__desc { font-size: 0.88rem; line-height: 1.6; color: var(--muted); margin-top: 0.7rem; } /* Datos técnicos en monoespaciada, separados por filetes verticales */ .car-card__specs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 0; margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-soft); } .car-card__specs li { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--muted); padding-right: 0.85rem; margin-right: 0.85rem; border-right: 1px solid var(--line); } .car-card__specs li:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .car-card__price { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--faint); margin: 1.2rem 0 1.4rem; } .car-card__price strong { display: block; margin-top: 0.35rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; letter-spacing: -0.01em; color: var(--paper); text-transform: none; } .car-card .btn, .car-card .link-label { margin-top: auto; align-self: flex-start; } .catalog__empty { grid-column: 1 / -1; text-align: center; color: var(--faint); padding: 3rem 1rem; } .catalog__note, .pricing__note { max-width: 46rem; margin: clamp(3rem, 7vh, 4.5rem) auto 0; padding-inline: clamp(1.2rem, 5vw, 4rem); text-align: center; font-size: 0.76rem; line-height: 1.7; color: var(--faint); } /* ---------- Planes ---------- Columnas separadas por filetes verticales, sin cajas. */ /* Fondo en negro base: los bloques de plan usan --black-2 y sobre un fondo del mismo tono se volvían invisibles. */ .pricing { padding: clamp(5rem, 14vh, 9rem) 0; background: var(--black); } /* Mismos bloques que el catálogo: sólidos, radio 28px, sin sombra, y la curva de Porsche en el hover. Los filetes divisorios se van: cada plan es una pieza, no una celda de tabla. */ /* Mismo acordeón del catálogo, con una diferencia: aquí hay un estado de reposo con jerarquía — el plan del medio nace más ancho. El cursor traslada ese protagonismo al plan que toque. */ .pricing__grid { display: flex; gap: clamp(1rem, 1.6vw, 1.5rem); align-items: stretch; max-width: 88rem; margin: clamp(3rem, 7vh, 4.5rem) auto 0; padding-inline: clamp(1.2rem, 5vw, 4rem); } .plan { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.6rem, 2.5vw, 2.4rem); background: var(--black-2); border-radius: 28px; transition: flex-grow 0.6s var(--porsche-ease), background-color 0.6s var(--porsche-ease); } .plan:hover { background: var(--black-3); } /* El destacado se distingue por color, por un filete de acento y por nacer más ancho — no por ser más alto */ .plan--featured { flex-grow: 1.22; background: var(--black-3); } .plan--featured:hover { background: #17171a; } /* Borde luminoso: un aro interior de 1px más un halo que se derrama hacia afuera. Va en ::after para que el halo no quede recortado y para no pisar el `flex` ni el fondo de la card. */ .plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(243, 242, 240, 0.06); transition: box-shadow 0.6s var(--porsche-ease); } /* En reposo el del medio ya insinúa el halo: es el recomendado */ .plan--featured::after { box-shadow: inset 0 0 0 1px rgba(229, 109, 125, 0.28), 0 0 26px -4px rgba(229, 109, 125, 0.16); } .plan:hover::after { box-shadow: inset 0 0 0 1px rgba(243, 242, 240, 0.22), 0 0 38px -2px rgba(229, 109, 125, 0.2); } .plan--featured:hover::after { box-shadow: inset 0 0 0 1px rgba(229, 109, 125, 0.45), 0 0 44px -2px rgba(229, 109, 125, 0.26); } /* El que recibe el cursor crece; los otros ceden. Acotado también por ancho: bajo 900px los planes se apilan en columna, donde el flex-grow repartiría ALTO en vez de ancho. */ @media (hover: hover) and (pointer: fine) and (min-width: 901px) { .pricing__grid:hover .plan { flex-grow: 0.88; } .pricing__grid .plan:hover { flex-grow: 1.32; } } /* Mismo cuidado que en el catálogo: en columna el flex-basis reparte alto, no ancho. Vuelven a dimensionarse por contenido. */ @media (max-width: 900px) { .pricing__grid { flex-direction: column; } .plan, .plan--featured { flex: 0 0 auto; } } .plan__badge { position: absolute; top: 1.8rem; right: clamp(1.6rem, 2.5vw, 2.4rem); font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent-bright); } .plan h3 { color: var(--paper); } /* Alturas mínimas: sin esto, un nombre o un precio más largo desplaza la lista de features y las tres columnas dejan de alinearse. */ .plan__for { margin-top: 0.6rem; min-height: 2.6rem; font-size: 0.84rem; color: var(--faint); } /* Espacio reservado para dos líneas: al angostarse la card durante el acordeón, un importe como "Desde $1.490.000" salta a dos renglones y empujaría la lista de features fuera de alineación. */ .plan__price { margin-top: 1.6rem; min-height: 7.2rem; display: flex; flex-direction: column; justify-content: flex-end; } .plan__amount { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--paper); } .plan__unit { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--faint); } .plan__fee { margin-top: 0.9rem; font-size: 0.8rem; color: var(--muted); } .plan__features { list-style: none; margin: 2rem 0 2.4rem; display: grid; gap: 0.75rem; } .plan__features li { position: relative; padding-left: 1.4rem; font-size: 0.88rem; line-height: 1.55; color: var(--muted); } .plan__features li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 1px; background: var(--accent-bright); } .plan .btn { margin-top: auto; width: 100%; } /* ---------- Opiniones ---------- */ .reviews { padding: clamp(5rem, 14vh, 9rem) 0; background: var(--black); } .reviews__rating { margin-top: 1.2rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--faint); } .reviews__rating .stars { color: var(--accent-bright); letter-spacing: 0.2em; } .reviews__rating strong { color: var(--paper); font-weight: 500; } /* Asimétrico a propósito: tres columnas iguales es el patrón más trillado en testimonios. La primera opinión manda y ocupa el doble de alto; las otras dos se apilan a su costado. */ /* Sin acordeón: las cards no cambian de tamaño, solo se encienden. La destacada ya no ocupa una columna de doble alto —así medía 542px contra 260px de las otras, demasiado desproporcionado—: ahora toma la fila completa de arriba, con alto propio, y las otras dos se reparten la de abajo, más anchas y más altas que antes. */ .reviews__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 1.6vw, 1.5rem); max-width: 88rem; margin: clamp(3rem, 7vh, 4.5rem) auto 0; padding-inline: clamp(1.2rem, 5vw, 4rem); } .review { position: relative; display: flex; flex-direction: column; gap: 2rem; padding: clamp(2rem, 4vw, 3rem) clamp(1.6rem, 2.5vw, 2.4rem); background: var(--black-2); border-radius: 28px; transition: background-color 0.6s var(--porsche-ease); } .review:hover { background: var(--black-3); } .review:first-child { grid-column: 1 / -1; background: var(--black-3); } .review:first-child:hover { background: #17171a; } /* Borde luminoso, igual que en los planes: aro interior de 1px y halo que se derrama hacia afuera. */ .review::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(243, 242, 240, 0.06); transition: box-shadow 0.6s var(--porsche-ease); } /* La destacada ya insinúa el halo en reposo */ .review:first-child::after { box-shadow: inset 0 0 0 1px rgba(229, 109, 125, 0.24), 0 0 26px -4px rgba(229, 109, 125, 0.14); } .review:hover::after { box-shadow: inset 0 0 0 1px rgba(243, 242, 240, 0.22), 0 0 38px -2px rgba(229, 109, 125, 0.2); } .review:first-child:hover::after { box-shadow: inset 0 0 0 1px rgba(229, 109, 125, 0.42), 0 0 44px -2px rgba(229, 109, 125, 0.26); } /* Comilla de apertura como marca de agua: da peso a la cita destacada sin agregar un elemento más al HTML */ .review:first-child blockquote { position: relative; } .review:first-child blockquote::before { content: "“"; position: absolute; top: -2.6rem; left: -0.6rem; font-family: var(--font-display); font-size: 7rem; line-height: 1; color: var(--accent-bright); opacity: 0.16; pointer-events: none; } /* Las dos secundarias suben de 1,25 a 1,45rem: al pasar a media fila propia tienen ancho de sobra y el texto pedía cuerpo. */ .review blockquote p { font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 400; line-height: 1.45; color: rgba(243, 242, 240, 0.86); text-wrap: pretty; } /* La destacada baja de 2 a 1,75rem: ya no necesita gritar para distinguirse, la posición y el halo lo hacen por ella. */ .review:first-child blockquote p { font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.4; color: var(--paper); max-width: 52rem; } /* En vertical las tres se apilan y el destaque de la primera pierde sentido: sin columna propia que ocupar, solo se lee como una card descuadrada. Las tres quedan iguales. */ @media (max-width: 860px) { .reviews__grid { grid-template-columns: 1fr; grid-template-rows: none; } .review:first-child { grid-row: auto; justify-content: normal; background: var(--black-2); } /* Debe igualar al tamaño base, no al que había antes: si no, la destacada termina siendo la más pequeña de las tres. */ .review:first-child blockquote p { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.45; color: rgba(243, 242, 240, 0.86); max-width: none; } /* Mismo aro tenue que las otras dos, sin halo de acento */ .review:first-child::after { box-shadow: inset 0 0 0 1px rgba(243, 242, 240, 0.06); } /* La comilla de agua necesita el margen superior que solo existe cuando la card es alta */ .review:first-child blockquote::before { display: none; } } .review figcaption { display: flex; align-items: center; gap: 0.9rem; margin-top: auto; } .review__avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border: 1px solid var(--line); color: var(--accent-bright); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; } .review__who { display: flex; flex-direction: column; line-height: 1.4; } .review__who strong { font-size: 0.88rem; font-weight: 500; color: var(--paper); } .review__who span { font-size: 0.74rem; color: var(--faint); } /* ---------- Beneficios ---------- */ .benefits { padding: clamp(5rem, 14vh, 9rem) 0; background: var(--black-2); } .benefits__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 88rem; margin: clamp(3rem, 7vh, 4.5rem) auto 0; padding-inline: clamp(1.2rem, 5vw, 4rem); border-top: 1px solid var(--line); } .benefit { padding: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 2.5vw, 2.4rem); border-bottom: 1px solid var(--line); } .benefit + .benefit { border-left: 1px solid var(--line); } .benefit__num { display: block; margin-bottom: 1.4rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; color: var(--accent-bright); } .benefit h3 { color: var(--paper); } .benefit p { color: var(--muted); margin-top: 0.8rem; font-size: 0.9rem; line-height: 1.6; } /* ---------- CTA ---------- */ .cta { padding: clamp(6rem, 18vh, 12rem) clamp(1.2rem, 5vw, 4rem); background: var(--black); border-top: 1px solid var(--line); } .cta__panel { max-width: 60rem; margin: 0 auto; text-align: center; } .cta__panel h2 { font-size: clamp(2rem, 5vw, 3.4rem); } .cta__panel .lead { color: var(--muted); margin-inline: auto; } .cta__actions { margin-top: 2.8rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .cta__mail { margin-top: 2.6rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--faint); } .cta__mail a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); } .cta__mail a:hover { color: var(--paper); border-bottom-color: var(--paper); } /* ---------- Redes sociales ---------- */ .social { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 3rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .social li { flex: 1 1 auto; } .social li + li { border-left: 1px solid var(--line); } .social__link { display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 56px; padding: 0.6rem 1rem; color: var(--muted); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); } .social__link svg { width: 16px; height: 16px; fill: currentColor; } .social__link:hover { color: var(--paper); background: rgba(243, 242, 240, 0.05); } .social__link--wa:hover { color: #25d366; } .social__link--fb:hover { color: #4a90ff; } .social__link--ig:hover { color: #ff6b7f; } .social__link--tt:hover { color: var(--paper); } .social--compact { justify-content: flex-start; margin-top: 1.6rem; border: 0; gap: 1.4rem; } .social--compact li { flex: none; } .social--compact li + li { border-left: 0; } .social__icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--faint); transition: color 0.25s var(--ease); } .social__icon svg { width: 16px; height: 16px; fill: currentColor; } .social__icon:hover { color: var(--paper); } /* ---------- Footer ---------- */ .site-footer { padding: clamp(3.5rem, 8vh, 5.5rem) clamp(1.2rem, 5vw, 4rem) 2.5rem; background: var(--black); color: var(--muted); border-top: 1px solid var(--line); } .site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3rem; max-width: 88rem; margin: 0 auto; } .site-footer__brand .brand { display: block; margin-bottom: 0.9rem; } .site-footer__brand p { font-size: 0.84rem; color: var(--faint); } .site-footer__nav { display: flex; flex-wrap: wrap; gap: 4rem; } .site-footer__nav h2 { font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; color: var(--faint); margin-bottom: 1.2rem; } .site-footer__nav ul { list-style: none; display: grid; gap: 0.6rem; } .site-footer__nav a { color: var(--muted); text-decoration: none; font-size: 0.84rem; transition: color 0.25s var(--ease); } .site-footer__nav a:hover { color: var(--paper); } .site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; max-width: 88rem; margin: clamp(3rem, 7vh, 4.5rem) auto 0; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); font-size: 0.74rem; color: var(--faint); } .site-footer__legal ul { list-style: none; display: flex; gap: 1.6rem; } /* Textos legales desplegables:
funciona sin JavaScript */ .site-footer__docs { max-width: 88rem; margin: clamp(2.5rem, 6vh, 4rem) auto 0; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); display: grid; gap: 0.2rem; } .site-footer__docs summary { cursor: pointer; padding: 0.85rem 0; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--faint); list-style: none; transition: color 0.25s var(--ease); } .site-footer__docs summary::-webkit-details-marker { display: none; } .site-footer__docs summary::before { content: "+"; display: inline-block; width: 1.2rem; color: var(--accent-bright); } .site-footer__docs details[open] summary::before { content: "−"; } .site-footer__docs summary:hover { color: var(--paper); } .site-footer__docs p { max-width: 62rem; padding: 0 0 1.2rem 1.2rem; font-size: 0.82rem; line-height: 1.7; color: var(--muted); } .site-footer__legal a { color: var(--faint); text-decoration: none; transition: color 0.25s var(--ease); } .site-footer__legal a:hover { color: var(--paper); } .site-footer__note { max-width: 88rem; margin: 1.6rem auto 0; font-size: 0.72rem; line-height: 1.7; color: var(--faint); text-align: center; } /* ---------- Acciones flotantes ---------- */ .float-wa { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: var(--z-float); display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.2rem; background: var(--paper); color: var(--black); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; text-decoration: none; transition: transform 0.2s var(--ease), background-color 0.25s var(--ease); } .float-wa svg { width: 18px; height: 18px; fill: currentColor; } .float-wa:hover { background: #25d366; } .float-wa:active { transform: scale(0.98); } .to-top { position: fixed; right: 1.2rem; bottom: 4.6rem; z-index: calc(var(--z-float) - 1); display: grid; place-items: center; width: 42px; height: 42px; background: rgba(10, 10, 11, 0.8); border: 1px solid var(--line); color: var(--paper); text-decoration: none; font-size: 1rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s var(--ease); } .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .to-top:hover { background: var(--paper); color: var(--black); } @media (max-width: 620px) { .float-wa__label { display: none; } .float-wa { padding: 0.9rem; } } /* ---------- Pantallas chicas ---------- */ @media (max-width: 620px) { .plan + .plan, .review + .review, .benefit + .benefit { border-left: 0; } .social li + li { border-left: 0; border-top: 1px solid var(--line); } .social li { flex: 1 1 100%; } .cta__actions .btn { width: 100%; } .site-footer__nav { gap: 2.5rem; } } /* En vertical las filas se apilan y el medio recupera su proporción. OJO con el flex: en columna, `flex-basis: 0` deja de repartir ancho y pasa a repartir ALTO — las cards colapsaban a 0px de alto y el catálogo aparecía vacío. Hay que devolverlas a tamaño por contenido. */ @media (max-width: 760px) { .catalog__row { flex-direction: column; } .catalog__row .car-card { flex: 0 0 auto; } .catalog__row .car-card__media { height: auto; } .catalog__row .car-card__media img { height: auto; aspect-ratio: 5 / 4; } } /* ---------- Móvil: legibilidad y objetivos táctiles ---------- Dos reglas que en escritorio no importan y en móvil sí: · Nada por debajo de 44×44px para tocar con el dedo. · Nada por debajo de ~12px de texto — y menos aún en versalitas con tracking abierto, que a 10px se vuelven ilegibles. */ @media (max-width: 760px) { .chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; /* "BMW" y "FORD" quedaban en 37px de ancho */ } .to-top { width: 44px; height: 44px; } .cta__mail { font-size: 0.78rem; } .social__link { font-size: 0.75rem; } .social__link span { font-size: 0.75rem; } .btn--small { min-height: 46px; padding: 0.7rem 1.4rem; } .brand { display: inline-block; padding-block: 0.6rem; } .link-label { min-height: 44px; align-items: flex-end; } .social__icon { width: 44px; height: 44px; } /* Los enlaces del pie median 15-18px de alto: imposibles de acertar con el dedo. El área crece sin mover el texto de sitio. */ .site-footer__nav a, .site-footer__legal a, .cta__mail a { display: inline-block; padding-block: 0.85rem; } .site-footer__nav ul { gap: 0; } .site-footer__legal ul { gap: 1.2rem; } /* Se sube el piso de las etiquetas diminutas */ .eyebrow { font-size: 0.76rem; letter-spacing: 0.2em; } .btn { font-size: 0.76rem; } .btn--small, .link-label, .catalog__count, .site-footer__note { font-size: 0.75rem; } .chip { font-size: 0.75rem; } .car-card__brand, .car-card__price, .car-card__specs li, .car-card__tag, .showroom-banner__step, .plan__unit, .plan__badge, .benefit__num, .review__avatar, .site-footer__nav h2, .scroll-hint, .loader__text { font-size: 0.76rem; } .site-footer__legal, .reviews__rating { font-size: 0.8rem; } } /* ---------- Toque fino: sin hover en táctil ---------- */ @media (hover: none) { .car-card:hover .car-card__media img { transform: none; } } /* ---------- Impresión ---------- */ @media print { .loader, .scroll-hint, .site-header, .nav-toggle, .float-wa, .to-top, .scroll-progress, .section-fade, .film__runway { display: none !important; } body { background: #fff; color: #000; } .sequence { height: auto !important; padding: 0 !important; position: static; } .film__scroll { margin-top: 0 !important; } .sequence__stage { position: static; height: auto; } #sequence-canvas, .sequence__scrim { display: none; } .sequence__caption, .showroom-banner__body, .car-card, .benefit, .plan, .review, .hero-title, .hero-inner, .sequence__captions { opacity: 1 !important; visibility: visible !important; transform: none !important; } .sequence__captions, .hero-inner { position: static; padding: 0; } .sequence__caption { grid-area: auto; margin: 0.6rem auto; } .hero-title h1, .hero-title__desc, .sequence__caption p { color: #000; text-shadow: none; } } /* ---------- Movimiento reducido ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .scroll-hint { animation: none; } }