/* ════════════════════════════════════════════════════════════════════════ realty-hero.css — Las portadas de Realty (Fases 29-30) ──────────────────────────────────────────────────────────────────────── Vive en su propia hoja y no dentro de `realty-public-modern.css` porque el CATÁLOGO DEL ASESOR no carga esa hoja: es standalone, arma su propio y tiene la suya. Con el bloque adentro habría que copiarlo, y una copia se desincroniza de la original a la segunda corrección. La cargan: `vm_realty_head()` (todo el público) y `realty/catalogo/index.php`. Va DESPUÉS de la hoja de cada sitio, para que sus ajustes de portada ganen. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ PORTADAS CON FOTO — Fase 29 · 2026-09-09 ──────────────────────────────────────────────────────────────────────── Los heros internos (`.rl-page-hero`, `.loti-hero`) eran un rectángulo de color plano con un patrón de puntos: el mismo dibujo en las 22 páginas de departamento y en los tres listados. Ahora llevan detrás las fotos reales de esa sección, con vidrio oscuro encima. Tres cosas que sostienen esto y conviene no romper: 1. El VELO no es decoración: es lo que hace legible el texto sobre una foto que puede ser blanca (una fachada al sol) o negra (una toma de noche). Está medido con blanco encima — no se baja sin volver a medir. 2. El borde de abajo se DISUELVE en el color de la página siguiente (`--rl-hero-salida`). Sin eso la portada corta con una línea recta y se lee como una franja pegada, que es justo lo que había. 3. Las fotos van a plena opacidad, no al 18%. Una foto lavada bajo un color no es una foto: es una textura. Lo que oscurece es el velo, y sólo donde se apoya el texto. ════════════════════════════════════════════════════════════════════════ */ .rl-page-hero, .loti-hero { position: relative; isolation: isolate; /* el velo y las fotos no se mezclan con la página */ /* Color de la sección que va justo debajo. Cada página lo declara si no es el gris de fondo: departamento y proyecto abren en blanco. */ --rl-hero-salida: #f8fafc; } /* ── Las fotos ────────────────────────────────────────────────────────── */ .rl-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .rl-hero-media__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s cubic-bezier(.2, .8, .2, 1); } /* Sólo la activa se ve. La deriva lentísima es lo que hace que la portada respire sin que nadie note «una animación». */ .rl-hero-media__ph.is-on { opacity: 1; animation: rlHeroDeriva 26s cubic-bezier(.2, .8, .2, 1) forwards; } @keyframes rlHeroDeriva { from { transform: scale(1.02); } to { transform: scale(1.11); } } /* ── El velo ──────────────────────────────────────────────────────────── */ .rl-hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: /* Vertical: claro arriba para que se vea el paisaje, cerrado abajo donde se apoya el texto pequeño. */ linear-gradient(180deg, rgba(var(--rl-p-rgb), .58) 0%, rgba(var(--rl-p-rgb), .74) 45%, rgba(var(--rl-p-rgb), .92) 100%), /* Un solo destello del secundario en una esquina: es lo que le da la profundidad de vidrio sin convertirse en un degradado de plantilla. */ radial-gradient(120% 95% at 82% 8%, rgba(var(--rl-s-rgb), .22) 0%, transparent 60%); } /* La disolución hacia la página. Primer intento: 96px hasta el color completo de la sección de abajo. Se vio y era peor que el problema — el tercio inferior quedaba en una niebla lechosa, con la foto disuelta y las miniaturas flotando en la bruma. Queda una insinuación: 34px y sólo hasta el 55%, lo justo para que el corte no sea una regla dibujada. */ .rl-hero-veil::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--rl-hero-salida) 55%, transparent) 100%); } /* El contenido siempre por encima de foto y velo. */ .rl-page-hero__inner, .loti-hero-content { position: relative; z-index: 2; } /* Con foto detrás, el patrón de puntos sobra: dos texturas superpuestas es ruido. Se deja apenas insinuado. (`:has()` acá es cosmético: si un navegador viejo no lo entiende se ve el patrón entero y ya.) */ .rl-page-hero:has(.rl-hero-media)::before { opacity: .16; } /* ── El titular, sobre foto, va BLANCO ──────────────────────────────── MEDIDO, no elegido: el acento naranja sobre una fachada al sol (peor caso: foto blanca bajo el velo) da 2.14:1 — el mínimo para texto grande es 3. Sobre el color liso daba 4.69, y por eso pasaba antes de que hubiera fotos. Para salvarlo habría que subir el velo a .90, y con eso la foto ya no se ve: sería volver al rectángulo de color que había. El blanco, sobre ese mismo peor caso, da 6.64. El acento no desaparece — se muda a la insignia, a la rayita y al borde de la miniatura activa, donde sí se lee. Va por hermano adyacente y NO por `:has()`: acá la regla sostiene la legibilidad, y eso no se apoya en un selector que un navegador pueda no entender. `.rl-hero-veil` sólo existe cuando el PHP pintó fotos. */ .rl-hero-veil ~ .rl-page-hero__inner .rl-page-hero__title .accent { color: #fff; } /* ── La antesala del titular: TEXTO, no pastilla ────────────────────── Fase 30. La pastilla de vidrio duró una entrega: «ese cuadro, ese estilo, en todo el sistema no me gusta». Es la MISMA regla que ya rigió dos veces en este proyecto — fuera los bloques detrás de los botones (Fase 26), fuera las líneas debajo (Fase 27) —: en Realty el aviso lo llevan el color, el espacio y la caja alta; nunca una caja dibujada. El texto va blanco puro y no en un blanco suavizado: sobre el peor caso (foto clara bajo el velo) da 5.20:1 y el mínimo para 12px es 4.5. Bajarlo a .85 lo tira por debajo. */ body .rl-page-hero__badge, body .loti-hero-badge { display: inline-block; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; font-weight: 600; font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px; animation: rlEntraSuave .7s cubic-bezier(.2, .8, .2, 1) .1s both; } /* ── El titular no se queda quieto ──────────────────────────────────── Revelado por LÍNEA ENMASCARADA: el renglón vive dentro de una caja con `overflow:hidden` y sube desde abajo. Es la misma técnica que ya usa la portada de inicio desde la Fase 17.1 — se reusa a propósito en vez de inventar otra: dos entradas distintas en el mismo sitio se notan. Clase propia (`.rl-th`) y no la `.rl-linea` de inicio: aquella está escrita dentro de `index.php` con sus tiempos, y compartir el nombre haría que una pisara a la otra según qué hoja gane. */ .rl-page-hero__title .rl-th, .loti-hero-title .rl-th { display: block; overflow: hidden; /* sin esto se recortan las tildes y las colas de las letras */ padding-bottom: .09em; margin-bottom: -.09em; } /* El estado de REPOSO es visible, y el escondite vive dentro del `@keyframes` con `both`. Escrito al revés —`transform:translateY(105%)` en la regla y sólo el `to` en la animación— un navegador que por lo que sea no corra la animación deja el titular fuera de su máscara, invisible para siempre. Es la misma familia de fallo que la Fase 28.2: un adorno que se cae y se lleva el contenido. Así, si la animación no corre, el título simplemente está. */ .rl-page-hero__title .rl-th > span, .loti-hero-title .rl-th > span { display: block; animation: rlThSube .85s cubic-bezier(.2, .8, .2, 1) .24s both; } @keyframes rlThSube { from { transform: translateY(105%); } to { transform: translateY(0); } } /* Con la máscara puesta, la subida del

entero sobra: dos movimientos encima del mismo texto se leen como un rebote. */ body .rl-page-hero__title:has(.rl-th) { animation: none; } /* El subtítulo entra después, más sobrio. */ body .rl-page-hero__subtitle { animation: rlEntraSuave .7s cubic-bezier(.2, .8, .2, 1) .46s both; } @keyframes rlEntraSuave { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* La rayita bajo el subtítulo iba en degradado dorado, fuera de la paleta. Sólida y del acento; y si hay tira de miniaturas, sobra: cierra ella. */ body .rl-page-hero__separator { background: var(--rl-s-luz); height: 3px; width: 56px; } .rl-page-hero__inner:has(+ .rl-hero-rail) .rl-page-hero__separator, .rl-page-hero:has(.rl-hero-rail) .rl-page-hero__separator { display: none; } /* ── La tira de miniaturas ────────────────────────────────────────────── */ .rl-hero-rail { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 30px auto 0; padding: 0 16px; } .rl-hero-rail__t { width: 58px; height: 40px; padding: 0; border-radius: 11px; overflow: hidden; cursor: pointer; border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: .5; transition: opacity .35s, transform .35s, box-shadow .35s, border-color .35s; } .rl-hero-rail__t img { width: 100%; height: 100%; object-fit: cover; display: block; } .rl-hero-rail__t:hover { opacity: .85; transform: translateY(-2px); } .rl-hero-rail__t.is-on { opacity: 1; border-color: var(--rl-s-luz); box-shadow: 0 0 0 1px var(--rl-s-luz), 0 12px 28px rgba(var(--rl-p-rgb), .5); } .rl-hero-rail__t:focus-visible { outline: 2px solid var(--rl-s-luz); outline-offset: 3px; } /* ── Movimiento reducido ────────────────────────────────────────────── Se respeta la preferencia del sistema: sin deriva y sin fundido largo. La rotación sigue (es contenido, no adorno), pero el cambio es seco. */ @media (prefers-reduced-motion: reduce) { .rl-hero-media__ph { transition: opacity .2s linear; } .rl-hero-media__ph.is-on { animation: none; } .rl-hero-rail__t { transition: none; } /* Quien pidió menos movimiento ve la portada quieta y COMPLETA: lo que no se puede es dejarle el titular fuera de su máscara, invisible. */ .rl-page-hero__title .rl-th > span, .loti-hero-title .rl-th > span { animation: none; transform: none; } body .rl-page-hero__badge, body .loti-hero-badge, body .rl-page-hero__subtitle { animation: none; opacity: 1; transform: none; } } /* ── Teléfono ─────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .rl-hero-rail { gap: 7px; margin-top: 22px; } .rl-hero-rail__t { width: 46px; height: 32px; border-radius: 9px; } /* Se vio en 375px: la portada es más baja acá, así que los mismos píxeles de disolución pesan mucho más y dejaban una banda clara con borde visible justo bajo las miniaturas. Menos, no más. */ .rl-hero-veil::after { height: 22px; } } /* La ficha de proyecto alinea su portada a la izquierda, no al centro: la tira tiene que seguir al titular, no quedarse suelta en medio del ancho. */ .loti-hero .rl-hero-rail { justify-content: flex-start; max-width: 1200px; padding: 0 24px; margin-top: 26px; } /* ════════════════════════════════════════════════════════════════════════ EL CATÁLOGO DEL ASESOR (Fase 30.1) La landing que cada asesor comparte con sus clientes. Mismo tratamiento que el resto del sistema: foto detrás, velo, antesala de texto y titular que se revela. Sus clases son propias (`rcp-*`) porque la página es standalone y no comparte hoja con el público. ════════════════════════════════════════════════════════════════════════ */ .rcp-hero { isolation: isolate; --rl-hero-salida: #fafafa; /* el color con el que abre el cuerpo */ } .rcp-hero__inner { position: relative; z-index: 2; } /* La chapa «VIMEDIA Realty» era una pastilla de vidrio: fondo, borde, radio 999 y desenfoque. El mismo cuadro que salió de todo el sistema. Queda el texto, y la marca se dice una sola vez. */ .rcp-hero__brand { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-size: .72rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; } /* La etiqueta «Te atiende» conservaba el relleno y el radio de cuando era pastilla (la Fase 26 le quitó el fondo pero le dejó la caja). */ .rcp-hero__kicker { padding: 0; border-radius: 0; letter-spacing: 3px; } /* El nombre del anfitrión se revela igual que los demás titulares. */ .rcp-hero__name .rl-th { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; } .rcp-hero__name .rl-th > span { display: block; animation: rlThSube .85s cubic-bezier(.2, .8, .2, 1) .24s both; } /* La tira sigue al contenido, que acá va a la izquierda. */ .rcp-hero .rl-hero-rail { justify-content: flex-start; max-width: 1200px; padding: 0 1.5rem; margin-top: 22px; } @media (prefers-reduced-motion: reduce) { .rcp-hero__name .rl-th > span { animation: none; transform: none; } } /* ════════════════════════════════════════════════════════════════════════ EL MENÚ DENTRO DE LA PORTADA (Fase 31) ──────────────────────────────────────────────────────────────────────── La barra ya era `position:fixed` y ya se superponía a la portada — lo que pasaba es que era blanca opaca, así que la foto parecía empezar debajo. Ponerla «dentro» es hacerla transparente, no moverla. Se activa con la clase `--portada`, que pone el PHP cuando la página abre con foto. No va por `:has()`: acá se decide de qué color es el logotipo, y eso no se apoya en un selector que un navegador pueda no entender. ════════════════════════════════════════════════════════════════════════ */ .vm-topnav--portada { background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; } /* El isotipo del acento no se lee sobre la foto: se enseña el blanco, que el PHP ya imprimió al lado. */ .vm-topnav--portada .vm-realty-logo__img { display: none; } .vm-topnav--portada .vm-realty-logo__img--claro { display: block; } .vm-topnav:not(.vm-topnav--portada) .vm-realty-logo__img--claro { display: none; } /* El logotipo NO pierde su barrido — cambia de base, que es lo que el sistema ya hace con el isotipo desde la Fase 18.1: una versión para fondo claro y otra para fondo oscuro. «VIMEDIA» iba en `var(--rl-p)`, el mismo navy del velo: sobre la portada habría quedado invisible. */ .vm-topnav--portada .vm-realty-logo__main { /* `background-image`, NO el atajo `background`: el atajo resetea `background-clip` a `border-box` y el degradado deja de recortarse contra el texto — «VIMEDIA» sale como un rectángulo blanco sólido. Se vio en la prueba. Por eso además se vuelven a declarar el recorte y el relleno transparente: si un día alguien cambia el orden de las hojas, esta regla se sostiene sola. */ background-image: linear-gradient(100deg, #fff 0%, #fff 42%, var(--rl-s-luz) 50%, #fff 58%, #fff 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vm-topnav--portada .vm-nav-links li a { color: #fff !important; } .vm-topnav--portada .vm-nav-links li a:hover { color: var(--rl-s-luz) !important; } .vm-topnav--portada .vm-realty-logo__tagline, .vm-topnav--portada .vm-realty-logo__word { color: rgba(255, 255, 255, .78) !important; } .vm-topnav--portada .vm-nav-toggle span { background: #fff !important; } /* El submenú sí necesita fondo: flota sobre la foto y sin él no se lee nada. */ .vm-topnav--portada .vm-nav-sub { background: rgba(15, 23, 42, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .14); } .vm-topnav--portada .vm-nav-sub a { color: #fff !important; } /* Al bajar de la portada vuelve la barra blanca de siempre. La clase la pone `realty-hero.js` mirando el alto real de la portada, no un número fijo. */ .vm-topnav--portada.is-solid { background: #fff !important; border-bottom-color: #e2e8f0 !important; box-shadow: 0 1px 8px rgba(0, 0, 0, .06) !important; } .vm-topnav--portada.is-solid .vm-realty-logo__img { display: block; } .vm-topnav--portada.is-solid .vm-realty-logo__img--claro { display: none; } .vm-topnav--portada.is-solid .vm-realty-logo__main { background-image: linear-gradient(100deg, var(--rl-p) 0%, var(--rl-p) 42%, var(--rl-s) 50%, var(--rl-p) 58%, var(--rl-p) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vm-topnav--portada.is-solid .vm-nav-links li a { color: #1e293b !important; } .vm-topnav--portada.is-solid .vm-realty-logo__tagline, .vm-topnav--portada.is-solid .vm-realty-logo__word { color: #94a3b8 !important; } .vm-topnav--portada.is-solid .vm-nav-toggle span { background: #1e293b !important; } /* ── La portada, más alta ───────────────────────────────────────────── Tiene que caber la barra (69px) y respirar debajo. `min-height` en `vh` con suelo y techo: en una laptop baja no se come la pantalla y en un monitor de 1440px de alto no se convierte en una valla. */ .rl-page-hero, .loti-hero { display: flex; flex-direction: column; /* si no, el contenido y la tira se ponen en fila */ justify-content: center; padding: 118px 0 64px; } /* Las portadas de ÁREA ocupan la primera pantalla entera. Pedido literal del usuario: «tiene que verse la portada en toda la primera pantalla». `dvh` y no `vh`: en el teléfono, `100vh` cuenta la barra del navegador que se esconde al bajar, así que la portada queda unos 60-80px más alta que la pantalla y siempre asoma un recorte de la sección siguiente. `dvh` mide lo que de verdad se ve. Va `vh` primero como reserva para navegadores viejos. */ .rl-page-hero { min-height: 100vh; min-height: 100dvh; } /* La ficha de proyecto NO va a pantalla completa a propósito: debajo están el croquis y las unidades, que son la razón de ser de esa página. Empujarlos fuera del pliegue sería romper el producto para ganar una foto grande. */ .loti-hero { min-height: clamp(430px, 58vh, 640px); } /* Un velo extra SÓLO detrás de la barra. Sin esto, una foto clara arriba deja los enlaces del menú al límite: el velo general arranca en .58 y ahí el blanco da 3.9:1, por debajo del 4.5 que pide un texto de 15px. */ .rl-hero-veil::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 190px; background: linear-gradient(180deg, rgba(var(--rl-p-rgb), .55) 0%, transparent 100%); } /* ── El buscador, dentro de la portada ──────────────────────────────── Un campo, no un panel. El bloque blanco enorme que lo envolvía era justamente el «cuadro grande» que salió del sistema. */ .rl-portada-buscar { display: flex; align-items: center; gap: 4px; width: min(560px, 100%); margin: 26px auto 0; padding: 5px 6px 5px 16px; border-radius: 14px; background: rgba(15, 23, 42, .34); border: 1px solid rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); animation: rlEntraSuave .7s cubic-bezier(.2, .8, .2, 1) .6s both; } .rl-portada-buscar__lupa { color: rgba(255, 255, 255, .75); font-size: .9rem; } .rl-portada-buscar input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: inherit; font-size: .95rem; padding: 11px 10px; } .rl-portada-buscar input::placeholder { color: rgba(255, 255, 255, .68); } /* Los botones de Realty son texto (Fase 27). También acá. */ .rl-portada-buscar button, .rl-portada-buscar a { background: none; border: 0; cursor: pointer; color: #fff; font: inherit; font-size: .88rem; font-weight: 600; text-decoration: none; padding: 11px 14px; border-radius: 10px; transition: color .2s ease; } .rl-portada-buscar button:hover, .rl-portada-buscar a:hover { color: var(--rl-s-luz); } .rl-portada-buscar button:focus-visible, .rl-portada-buscar a:focus-visible, .rl-portada-buscar input:focus-visible { outline: 2px solid var(--rl-s-luz); outline-offset: 2px; } @media (max-width: 640px) { .rl-page-hero { padding: 96px 0 44px; } .loti-hero { min-height: clamp(380px, 60vh, 520px); padding: 96px 0 44px; } .rl-hero-veil::before { height: 150px; } .rl-portada-buscar { margin-top: 20px; } } @media (prefers-reduced-motion: reduce) { .rl-portada-buscar { animation: none; opacity: 1; transform: none; } .vm-topnav--portada { transition: none; } }