/* ==========================================================================
HAUS LEÓN — estilos personalizados
Basado en el diseño de Figma "HAUS. Prueba de Estilo 24-06".
Estructura: HTML5 Boilerplate + Bootstrap 5 (grid/utilidades) + este archivo
para todo lo específico de marca. Mobile-first: los estilos base son para
móvil, las media queries agregan/ajustan para tablet (768px) y desktop (992px+).
========================================================================== */
/* --------------------------------------------------------------------------
1. Tipografía de marca — Centra No2 (títulos) + Montserrat (párrafos)
-------------------------------------------------------------------------- */
@font-face {
font-family: "Centra No2";
src: url("../fonts/Centra%20No2/CentraNo2-Light.otf") format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Centra No2";
src: url("../fonts/Centra%20No2/CentraNo2-LightItalic.otf") format("opentype");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Centra No2";
src: url("../fonts/Centra%20No2/CentraNo2-Medium.otf") format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Centra No2";
src: url("../fonts/Centra%20No2/CentraNo2-MediumItalic.otf") format("opentype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Centra No2";
src: url("../fonts/Centra%20No2/CentraNo2-Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Centra No2";
src: url("../fonts/Centra%20No2/CentraNo2-BoldItalic.otf") format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* --------------------------------------------------------------------------
2. Tokens de diseño
-------------------------------------------------------------------------- */
:root {
--c-dark: #2e3133;
--c-bg: #f7f7f7;
--c-cream: #f2f2ef;
--c-yellow: #e9ca36;
--c-yellow-torre: #edce36;
--c-grey: #6b7074;
--c-white: #ffffff;
/* Centra No2 (fuente oficial de marca, cargada arriba) para todos los
títulos/encabezados. Montserrat (Google Fonts) para todo el copy de
párrafo. Centra No2 sólo trae los pesos Light (300), Medium (500) y
Bold (700); usa esos valores exactos de font-weight para que el
navegador elija la variante correcta. */
--font-heading: "Centra No2", Arial, sans-serif;
--font-body: "Montserrat", Arial, sans-serif;
--section-y: 4rem;
--container-x: 1.25rem;
}
@media (min-width: 992px) {
:root {
--section-y: 7.5rem;
}
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
body {
font-family: var(--font-body);
color: var(--c-dark);
background-color: var(--c-bg);
/* clip en vez de hidden: "hidden" convierte al viewport en un contenedor de
scroll (el valor se propaga desde el body), y eso desactiva parte del
scroll por compositor en Chrome — de ahí los tirones. "clip" recorta
igual el desborde de las marcas de agua, sin crear scroll container.
La declaración hidden queda como respaldo para navegadores viejos. */
overflow-x: hidden;
overflow-x: clip;
}
/* --------------------------------------------------------------------------
2.1 Lenis
Reglas que pide la librería y que no estaban: sin ellas, las clases
.lenis/.lenis-smooth que el script pone en no hacen nada, y un
scroll-behavior heredado compite contra el suavizado.
-------------------------------------------------------------------------- */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
/* Navegadores donde Lenis queda desactivado (Chromium, ver smooth-scroll.js).
Afecta a saltos de ancla y scrolls programáticos, no a la rueda: el scroll
manual se queda nativo, que es justo lo que se busca. */
.native-scroll {
scroll-behavior: smooth;
}
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--c-dark);
margin-bottom: 0;
}
p {
font-family: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.01em;
color: var(--c-dark);
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
.section {
padding-top: var(--section-y);
padding-bottom: var(--section-y);
}
.bg-cream {
background-color: var(--c-bg);
}
.bg-dark {
background-color: var(--c-dark) !important;
}
/* Kicker: "/ PROYECTO", "/ ENTORNO", etc. */
.kicker {
position: relative;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
display: inline-block;
padding-bottom: 0.9rem;
margin-bottom: 1.5rem;
}
/* Línea inferior en pseudo-elemento (en vez de border-bottom) para poder
darle el mismo brillo/box-shadow que el resto de líneas amarillas. */
.kicker::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--c-yellow);
box-shadow: 0 0 6px 0 rgba(233, 202, 54, 0.75);
}
.kicker-light {
color: var(--c-white);
}
.kicker-light::after {
background: rgba(255, 255, 255, 0.5);
box-shadow: none;
}
.kicker-main {
color: var(--c-yellow);
}
.kicker-main::after {
background: var(--c-yellow);
box-shadow: 0 0 6px 0 rgba(233, 202, 54, 0.75);
}
/* Giant faint background word */
.watermark {
font-family: var(--font-heading);
font-weight: 700;
color: var(--c-dark);
opacity: 0.05;
font-size: 22vw;
line-height: 1;
white-space: nowrap;
pointer-events: none;
user-select: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 992px) {
.watermark {
font-size: 11rem;
}
}
/* Marca de agua triangular decorativa (MARCA_DE_AGUA en Figma) */
.watermark-triangle {
display: none;
position: absolute;
z-index: 0;
max-width: 42%;
height: auto;
pointer-events: none;
user-select: none;
}
@media (min-width: 992px) {
.watermark-triangle {
display: block;
}
}
/* Rounded photo frames */
.photo {
border-radius: 10px;
overflow: hidden;
background-color: #d9d4cc; /* placeholder tone while se exportan las fotos reales */
aspect-ratio: var(--ar, 4/3);
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* El marco recorta por los costados (object-fit: cover). Por defecto se queda
con el centro del archivo; este modificador ancla el encuadre al borde
derecho, para las fotos cuyo motivo vive en ese lado. */
.photo--anchor-right img {
object-position: right center;
}
/* Planos arquitectónicos: todos con la misma caja de alto, así el bloque de
cada modelo mide igual y la maqueta no salta al cambiar de pestaña ni entre
los dos planos del penthouse (que vienen en proporciones distintas).
object-fit: contain y no cover: un plano recortado pierde justo lo que hay
que leer. El plano queda centrado dentro de su caja por el object-position
por defecto, y la caja centrada en la columna.
En móvil la caja se topa en 70vh: los 550px fijos se comen casi la pantalla
entera de un teléfono y el plano queda pequeño rodeado de aire, porque
"contain" lo ajusta al ancho disponible y no al alto. */
.plan-image {
display: block;
width: 100%;
height: min(550px, 70vh);
object-fit: contain;
margin-inline: auto;
mix-blend-mode: multiply;
}
@media (min-width: 768px) {
.plan-image {
height: 550px;
}
}
.photo iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Parallax (js/parallax.js): la imagen se hace más alta que su marco y se
centra con top:-12%, de modo que el recorrido vertical nunca descubre el
fondo. La clase .is-parallax la pone el script, así que sin JavaScript la
foto se queda encuadrada como siempre. Sirve para cualquier marco, no sólo
para .photo (ver .manifiesto, sección 4.1). */
.is-parallax {
position: relative;
overflow: hidden;
}
/* Sin will-change: promoverlas de forma permanente obligaba a Chrome a
mantener en memoria de composición la textura de cada foto — 226 MB entre
las 13 de Inicio, porque los archivos son de 2500-3000px. Al pasarse del
presupuesto, Chrome descarta y vuelve a rasterizar capas durante el scroll,
que es el tirón. GSAP promueve el elemento mientras dura la animación, que
es cuando de verdad hace falta. */
.is-parallax > img {
position: absolute;
top: -12%;
left: 0;
width: 100%;
height: 124%;
object-fit: cover;
}
/* Cortina del reveal (js/reveal.js): el marco —imagen y cualquier texto
superpuesto— se descubre de abajo a arriba al entrar al viewport.
El recorte lo hace un clip-path sobre el propio marco, no un bloque opaco
encima: la cortina tapaba con el color de fondo las marcas de agua y los
párrafos que quedan DETRÁS del marco, y se leían como texto cortado hasta
que la foto se revelaba. Con clip-path la parte aún no revelada es
transparente y deja ver lo que hay debajo.
La cortina sobrevive sólo como referencia de posición: su borde inferior
marca el corte y su ::after pinta el filo amarillo con el glow de marca.
El filo va justo por DEBAJO del corte (top: 100%), dentro de la zona ya
revelada, porque el clip-path también recorta lo que se pinte por encima.
Todo lo crea el script, así que sin JavaScript la foto se ve entera. */
.has-reveal {
position: relative;
overflow: hidden;
}
.reveal-curtain {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
will-change: transform;
}
.reveal-curtain::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background-color: var(--c-yellow);
box-shadow: 0 2px 12px 0 rgba(233, 202, 54, 0.55);
}
/* --------------------------------------------------------------------------
Galería de trayectoria
-------------------------------------------------------------------------- */
.trayectoria-gallery {
position: relative;
}
/* Owl oculta .owl-carousel hasta añadir .owl-loaded. Conservamos una
galería visible si una dependencia de JavaScript no llega a cargar. */
.trayectoria-gallery:not(.owl-loading):not(.owl-loaded) {
display: block;
}
.trayectoria-gallery:not(.owl-loading):not(.owl-loaded) > .trayectoria-gallery__item {
margin-bottom: 30px;
}
.trayectoria-gallery .owl-nav {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin: 0.75rem 1.25rem 0;
}
.trayectoria-gallery .owl-nav button.owl-prev,
.trayectoria-gallery .owl-nav button.owl-next {
width: 2.75rem;
height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--c-dark);
border-radius: 50%;
color: var(--c-dark);
background: transparent;
font-size: 1rem;
transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
/* --------------------------------------------------------------------------
Planos del penthouse
-------------------------------------------------------------------------- */
.penthouse-plan-gallery {
position: relative;
}
.penthouse-plan-gallery:not(.owl-loading):not(.owl-loaded) > div + div {
display: none;
}
.penthouse-plan-gallery .owl-nav {
position: absolute;
inset: 50% 0 auto;
display: flex;
justify-content: space-between;
pointer-events: none;
transform: translateY(-50%);
}
.penthouse-plan-gallery .owl-nav button.owl-prev,
.penthouse-plan-gallery .owl-nav button.owl-next {
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--c-dark);
border-radius: 50%;
color: var(--c-dark);
background: var(--c-bg);
pointer-events: auto;
}
.penthouse-plan-gallery .owl-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 0.75rem;
}
.penthouse-plan-gallery .owl-dot {
width: 0.5rem;
height: 0.5rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(46, 49, 51, 0.3);
}
.penthouse-plan-gallery .owl-dot.active {
background: var(--c-dark);
}
.trayectoria-gallery .owl-nav button.owl-prev:hover,
.trayectoria-gallery .owl-nav button.owl-next:hover,
.trayectoria-gallery .owl-nav button.owl-prev:focus-visible,
.trayectoria-gallery .owl-nav button.owl-next:focus-visible {
color: var(--c-white);
background-color: var(--c-dark);
outline: none;
}
.trayectoria-gallery .owl-nav button.disabled {
opacity: 0.35;
}
@media (min-width: 992px) {
.trayectoria-gallery .owl-nav {
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
z-index: 1;
margin: 0;
}
.trayectoria-gallery .owl-nav button.owl-prev,
.trayectoria-gallery .owl-nav button.owl-next {
border-color: var(--c-white);
color: var(--c-white);
background-color: rgba(46, 49, 51, 0.5);
}
.trayectoria-gallery .owl-nav button.owl-prev:hover,
.trayectoria-gallery .owl-nav button.owl-next:hover,
.trayectoria-gallery .owl-nav button.owl-prev:focus-visible,
.trayectoria-gallery .owl-nav button.owl-next:focus-visible {
color: var(--c-dark);
background-color: var(--c-white);
}
}
/* --------------------------------------------------------------------------
3. Header / navegación
-------------------------------------------------------------------------- */
.site-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 20;
padding: 1.5rem 0;
}
.site-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--c-yellow);
box-shadow: 0 0 8px 0 rgba(233, 202, 54, 0.75);
}
/* El logotipo se saca del flujo para que su altura no estire la barra de
navegación: la barra mide lo que miden el botón MENÚ y los enlaces, y el
logo cuelga sobre el hero. El .container es el ancla (position: relative),
así el borde derecho del logo cae en el borde de contenido del container. */
.site-header .container {
position: relative;
}
.site-header .navbar-brand {
position: absolute;
top: 0;
right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
z-index: 1;
margin: 0;
}
.site-header .navbar-brand img {
height: 150px;
width: auto;
}
/* Hueco para el logo, que ya no ocupa lugar en el flujo de la barra. El ancho
sale de la proporción del archivo (148×200): 150px de alto son ~111px de
ancho, más un respiro. */
@media (min-width: 992px) {
.site-header__bar {
padding-right: 15rem;
}
}
.site-header .nav-link {
color: var(--c-white);
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.9rem;
}
.menu-toggle {
background: transparent;
border: 0;
padding: 0;
color: var(--c-white);
font-family: var(--font-body);
font-weight: 500;
font-size: 0.7rem;
text-align: left;
}
.menu-toggle .bar {
display: block;
height: 2px;
background: var(--c-white);
margin-bottom: 6px;
}
.menu-toggle .bar:nth-child(1) { width: 45px; }
.menu-toggle .bar:nth-child(2) { width: 27px; }
.menu-toggle .bar:nth-child(3) { width: 35px; }
/* Menú (offcanvas) — sidebar lateral. El panel es la tarjeta de concreto
(.concrete-card, sección 10): misma textura, mismo filo amarillo y mismo
velo de legibilidad, sin fotografía de fondo. El contenido del footer va
apilado en una sola columna. */
.site-menu.offcanvas {
--bs-offcanvas-width: min(24rem, 88vw);
/* .concrete-card es position:relative; el offcanvas necesita su fixed. */
position: fixed;
border: 0;
/* Sombra hacia el costado, no hacia abajo, por ser un panel lateral. */
box-shadow: 1.5rem 0 3.5rem rgba(0, 0, 0, 0.55);
}
/* En un panel angosto los links se quedan en el tamaño compacto: el salto a
1.4rem de .concrete-card sólo tiene sentido en el footer, a tres columnas. */
.site-menu.offcanvas .footer-nav a {
font-size: 1.15rem;
margin-bottom: 0.7rem;
}
.site-menu .offcanvas-body {
/* Sobre el velo de .concrete-card::after, que va en el propio panel. */
position: relative;
z-index: 1;
padding: 2.5rem 1.75rem 3rem;
}
/* Botón de cierre fijo en la esquina superior derecha del panel. */
.site-menu .menu-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
z-index: 3;
opacity: 0.75;
}
.site-menu .menu-close:hover {
opacity: 1;
}
.site-menu .menu-logo {
max-width: 8rem;
}
/* Bloques apilados, separados por una línea fina como en .footer-meta. */
.site-menu .menu-block {
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: 1.75rem;
padding-top: 1.75rem;
}
.site-menu .menu-block .footer-nav a:last-child {
margin-bottom: 0;
}
.site-menu .footer-social a {
display: inline-block;
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
/* --------------------------------------------------------------------------
4. Hero
-------------------------------------------------------------------------- */
.hero {
position: relative;
min-height: 100svh;
display: flex;
/* stretch, no flex-end: cada columna decide su propia altura de anclaje
(la izquierda arriba, la derecha abajo). */
align-items: stretch;
color: var(--c-white);
background-color: var(--c-dark);
background-size: cover;
background-position: center;
padding-top: 7rem;
padding-bottom: 3rem;
}
/* Todo el texto del hero va en blanco: los encabezados heredarían el color
oscuro de la regla base de h1-h4 (sección 2). Se apunta a .hero-title y no
a "h1" para no ganarle a las utilidades de color de torre.html, cuyo título
es .hero-torre-title.text-cream. */
.hero .hero-title,
.hero .hero-content p {
color: var(--c-white);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
pointer-events: none;
}
/* Sombra superior para la barra de navegación. El .site-header va en
position:absolute con los enlaces y el logotipo en blanco, así que su
legibilidad depende por completo de lo que traiga la foto debajo: si en esa
franja la imagen sale clara, el menú se pierde.
Las paradas van en píxeles y no en porcentaje a propósito: lo que hay que
cubrir es el alto de la barra (~150px, que es lo que mide el logotipo), no
una fracción del hero, que cambia con cada pantalla. Va en ::before para
dejar intacto el degradado inferior del ::after; ambos quedan por debajo de
.hero-content (z-index 2). */
.hero--nav-shade::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 320px;
/* La meseta de 0.65 se sostiene los primeros ~90px, que es la franja donde
viven MENÚ y los enlaces, y sólo después baja. Con una caída lineal desde
el píxel 0 la opacidad ya estaba a la mitad a la altura del texto, y sobre
una foto clara ahí se quedaría por debajo del 4.5:1 que pide AA. */
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.65) 0,
rgba(0, 0, 0, 0.60) 90px,
rgba(0, 0, 0, 0.30) 170px,
rgba(0, 0, 0, 0) 100%
);
pointer-events: none;
}
/* El container y su fila ocupan todo el alto del hero, para que las columnas
tengan contra qué alinearse arriba y abajo. */
.hero .hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
}
.hero .hero-content > .row {
flex: 1;
}
.hero-title {
font-size: clamp(2.75rem, 11vw, 6rem);
line-height: 1;
letter-spacing: -0.03em;
}
.hero-torre-title {
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 0.25em;
line-height: 1.05;
font-size: clamp(2.5rem, 10vw, 6rem);
}
.hero-torre-title .light {
font-weight: 300;
letter-spacing: 0.35em;
}
/* Tarjeta del hero de Torre: desborda el borde inferior del hero y se monta
sobre la sección siguiente. El margen negativo encoge el alto del hero en
esa misma medida, así que la parte que "sobra" de la tarjeta queda colgando
sobre la sección de Concepto. Sólo en desktop; apilada no tiene sentido.
El valor va en % (se resuelve contra el ancho de la fila) y no en rem: como
el alto de la tarjeta lo fija su aspect-ratio a partir del ancho, así el
trozo que sobresale se mantiene en ~1/3 de la tarjeta en cualquier
resolución. Con una medida fija iba del 35% a 1000px al 25% a 1440px. */
@media (min-width: 992px) {
.hero-torre-card {
position: relative;
z-index: 3;
margin-bottom: -27%;
}
}
/* La foto de la tarjeta se ancla a la izquierda: el poco recorte horizontal
que deja el object-fit se lo lleva el borde derecho, nunca los logos que
van compuestos en el costado izquierdo del archivo. */
.hero-torre-card .photo img {
object-position: left center;
}
/* --------------------------------------------------------------------------
4.1 Manifiesto
Banda a sangre completa con foto y velo oscuro. La foto es un ![]()
real
(no background-image) para que reciba el parallax de js/parallax.js, que
necesita un elemento que animar; de ahí el data-parallax en el HTML.
-------------------------------------------------------------------------- */
.manifiesto {
position: relative;
min-height: 100vh;
display: flex;
/* El bloque de texto se apoya en el borde superior de la banda, centrado
horizontalmente; el resto de la foto queda libre debajo. */
align-items: flex-start;
text-align: center;
color: var(--c-white);
background-color: #1c1e1f;
overflow: hidden;
}
.manifiesto::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
.manifiesto .container {
position: relative;
z-index: 1;
padding-top: 8rem;
padding-bottom: 3rem;
}
.manifiesto h2 {
max-width: 700px;
margin-left: auto;
margin-right: auto;
font-size: clamp(1.6rem, 5vw, 3rem);
}
/* --------------------------------------------------------------------------
4.2 Bloques de torre (Aqua / Terra)
Dos columnas: a la izquierda el texto arriba y una foto chica anclada abajo
a la derecha; a la derecha la foto grande, que es la que marca el alto de
la fila. El margin-top auto es lo que empuja la foto chica hasta el fondo
de su columna, así su base queda a ras con la de la foto grande.
-------------------------------------------------------------------------- */
/* El margen superior va aquí y no con una utilidad mt-* de Bootstrap: esas
llevan !important y le ganarían al margin-top:auto que baja la foto. */
.torre-thumb {
width: 100%;
margin-top: 1.5rem;
}
@media (min-width: 992px) {
.torre-thumb {
width: 64%;
margin-top: auto;
align-self: flex-end;
}
}
/* --------------------------------------------------------------------------
5. Botón "Explora la zona"
Hover inspirado en el efecto "Hyperion" de ButtonHoverStyles: un panel
blanco "abre" el fondo del botón de izquierda a derecha (transform-origin
invertido, igual que el ejemplo) y el texto hace un pequeño salto hacia
arriba. El color del texto se anima explícitamente de blanco a negro
(en vez de mix-blend-mode, que dependía de que el botón aislara su propio
stacking context y no siempre garantizaba el contraste). El ícono de
flecha no se toca: sigue siendo su propio cuadro blanco con la flecha
oscura, tal como estaba.
-------------------------------------------------------------------------- */
.btn-explora {
position: relative;
display: inline-flex;
align-items: center;
gap: 1.5rem;
background-color: var(--c-dark);
border-radius: 5px;
padding: 0.5rem 0.5rem 0.5rem 1rem;
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--c-white);
border: 0;
overflow: hidden;
}
.btn-explora::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: var(--c-white);
transform: scale3d(0, 1, 1);
transform-origin: 100% 50%;
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.btn-explora .icon-circle {
position: relative;
z-index: 1;
}
.btn-explora:hover::before {
transform: scale3d(1, 1, 1);
transform-origin: 0% 50%;
}
.btn-explora__label {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
}
.btn-explora__label span {
display: block;
position: relative;
color: var(--c-white);
transition: color 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.btn-explora:hover .btn-explora__label span {
color: var(--c-dark);
animation: btnExploraMoveUpOut 0.2s forwards, btnExploraMoveUpIn 0.2s forwards 0.2s;
}
@keyframes btnExploraMoveUpOut {
to {
transform: translate3d(0, -105%, 0);
}
}
@keyframes btnExploraMoveUpIn {
from {
transform: translate3d(0, 100%, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.icon-circle {
width: 34px;
height: 34px;
background: var(--c-white);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c-dark);
flex-shrink: 0;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-body);
font-size: 0.85rem;
}
/* --------------------------------------------------------------------------
6. Estadísticas / trayectoria
-------------------------------------------------------------------------- */
.stat {
border-top: 1px solid rgba(46, 49, 51, 0.15);
padding-top: 1.75rem;
}
.stat-number {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(3rem, 9vw, 6rem);
line-height: 1;
}
.stat-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.9rem;
margin-bottom: 0.8rem;
}
/* --------------------------------------------------------------------------
7. Íconos con texto (espacio / arquitectura)
-------------------------------------------------------------------------- */
.icon-feature {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.icon-feature .icon-box {
width: 60px;
height: 60px;
flex-shrink: 0;
border-radius: 8px;
background-color: rgba(46, 49, 51, 0.06);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--c-dark);
}
.icon-feature .icon-value {
font-family: var(--font-body);
font-size: 1.6rem;
line-height: 1;
}
.icon-feature .icon-unit {
font-size: 1rem;
font-weight: 400;
}
.icon-feature .icon-label {
font-family: var(--font-body);
font-size: 0.95rem;
margin-top: 0.4rem;
}
/* Amenidades (index.html): el mismo .icon-feature, más un botón "Descubrir"
que abre la foto de la amenidad en el lightbox. El texto va en clases en vez
de estilos en línea porque ahora son tres piezas que deben ir coordinadas. */
/* Rejas largas de .icon-feature (Amenidades en index.html, Proyecto en
torre.html): con muchas tarjetas el bloque se lee apretado si las filas van
al mismo aire que las columnas. Se separa sólo el eje vertical —la variable
de gutter de Bootstrap; custom.css carga después de bootstrap.min.css, así
que este valor gana al de .g-4— para que cada fila se lea como un grupo
aparte. */
.icon-grid {
--bs-gutter-y: 3rem;
}
@media (min-width: 992px) {
.icon-grid {
--bs-gutter-y: 4.5rem;
}
}
.amenidad__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 0.25rem;
}
.amenidad__text {
font-size: 0.85rem;
margin-bottom: 0.9rem;
}
.btn-descubrir {
border: 0;
border-radius: 4px;
padding: 0.5rem 1.15rem;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.8rem;
color: var(--c-dark);
background-color: var(--c-yellow);
transition: background-color 250ms ease, color 250ms ease;
}
.btn-descubrir:hover,
.btn-descubrir:focus-visible {
background-color: var(--c-dark);
color: var(--c-white);
}
@media (prefers-reduced-motion: reduce) {
.btn-descubrir {
transition: none;
}
}
/* Pills "MODELO 1..5" */
.pill-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.pill-tabs .pill {
border: 0;
border-radius: 4px;
padding: 0.55rem 1.1rem;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.8rem;
color: var(--c-white);
background-color: var(--c-dark);
}
.pill-tabs .pill.active {
background-color: var(--c-yellow);
}
.model-panel {
opacity: 0;
transition: opacity 260ms ease;
}
.model-panel.is-visible {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.model-panel {
transition: none;
}
}
/* --------------------------------------------------------------------------
8. FAQs (acordeón)
-------------------------------------------------------------------------- */
.faq-item {
border-top: 1px solid rgba(46, 49, 51, 0.15);
}
.faq-item:last-child {
border-bottom: 1px solid rgba(46, 49, 51, 0.15);
}
.faq-button {
width: 100%;
background: none;
border: 0;
padding: 1.75rem 0;
display: flex;
align-items: flex-start;
gap: 1.25rem;
text-align: left;
}
.faq-index {
font-family: var(--font-body);
font-size: 1rem;
padding-top: 0.2rem;
}
.faq-question {
font-family: var(--font-heading);
font-weight: 300;
font-size: 1.3rem;
flex: 1;
}
.faq-plus {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.faq-button[aria-expanded="true"] .faq-plus {
transform: rotate(45deg);
}
.faq-answer {
font-size: 0.9rem;
padding-bottom: 1.75rem;
padding-left: calc(1rem + 1.25rem);
max-width: 640px;
}
/* --------------------------------------------------------------------------
9. Timeline "El proceso de cambio"
-------------------------------------------------------------------------- */
.timeline-card {
position: relative;
}
.timeline-tag {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--c-yellow-torre);
color: var(--c-dark);
font-family: var(--font-body);
font-size: 0.9rem;
padding: 0.35rem 1.1rem;
border-radius: 5px;
z-index: 2;
}
.timeline-caption {
font-family: var(--font-heading);
font-weight: 300;
font-size: 1.3rem;
text-align: center;
margin-top: 1.5rem;
}
/* --------------------------------------------------------------------------
10. Tarjeta de concreto flotante — componente compartido
El patrón nació en el footer y lo reutiliza el menú (offcanvas): una foto a
sangre completa con velo oscuro y, encima, una tarjeta texturizada de
concreto que "flota" con su filo amarillo superior. Aquí vive sólo la
tarjeta; cada contenedor (.site-footer, .site-menu) pone su propia foto.
-------------------------------------------------------------------------- */
.concrete-card {
position: relative;
color: var(--c-white);
background-color: var(--c-dark);
background-image: url("../img/concrete-texture.jpg");
background-size: cover;
background-position: center;
box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.55);
}
/* Filo amarillo con glow en el borde superior de la tarjeta. */
.concrete-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--c-yellow);
box-shadow: 0 0 8px 0 rgba(233, 202, 54, 0.75);
z-index: 2;
}
/* Oscurecido extra sobre la textura para asegurar legibilidad del texto. */
.concrete-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(31, 33, 35, 0.45), rgba(31, 33, 35, 0.7));
pointer-events: none;
}
.concrete-card__body {
position: relative;
z-index: 1;
padding: 2.5rem 1.5rem 2rem;
}
/* Tipografía interna de la tarjeta (compartida por footer y menú). */
.concrete-card h4 {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.5rem;
color: var(--c-white);
margin-bottom: 1rem;
}
.concrete-card .footer-nav a {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 0.9rem;
}
.concrete-card .footer-kicker {
font-family: var(--font-body);
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.8;
margin-bottom: 1.25rem;
}
.concrete-card .footer-contact {
font-size: 0.9rem;
line-height: 1.9;
}
.concrete-card .footer-disclaimer {
font-size: 0.8rem;
opacity: 0.8;
margin: 2.5rem 0 0;
}
.concrete-card .footer-meta {
border-top: 1px solid rgba(255, 255, 255, 0.25);
margin-top: 1.75rem;
padding-top: 1.25rem;
font-family: var(--font-body);
font-size: 0.85rem;
}
.concrete-card .footer-social a {
margin-right: 1.5rem;
}
/* Dentro de la tarjeta los links no llevan la línea del efecto "mneme"
(sección 13): se anula el subrayado de 1px (::after, y ::before en los
.link sin modificador) y se conserva sólo el destello de hover, que es
.link--mneme::before. */
.concrete-card .link::after,
.concrete-card .link:not(.link--mneme)::before {
content: none;
}
@media (min-width: 768px) {
.concrete-card__body {
padding: 3rem 3rem 2.25rem;
}
}
@media (min-width: 992px) {
.concrete-card__body {
padding: 3.5rem 4rem 2.5rem;
}
.concrete-card .footer-nav a {
font-size: 1.4rem;
}
}
/* --------------------------------------------------------------------------
10.1 Footer — la foto a sangre completa que sostiene la tarjeta
-------------------------------------------------------------------------- */
.site-footer {
position: relative;
color: var(--c-white);
background-color: var(--c-dark);
/* Dos capas: la foto oficial del Figma y, debajo, una foto del proyecto que
se ve mientras footer-bg.jpg no esté exportada (el navegador ignora la
capa que no carga). */
background-image: url("../img/inicio/footer-bg.jpg"),
url("../img/inicio/S8-4.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 2.5rem 0;
overflow: hidden;
}
/* Velo oscuro sobre la foto: da contraste y hace que la tarjeta despegue. */
.site-footer::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(46, 49, 51, 0.75), rgba(46, 49, 51, 0.35));
pointer-events: none;
}
.site-footer .container {
position: relative;
z-index: 1;
}
@media (min-width: 992px) {
.site-footer {
padding: 6rem 0;
}
}
/* --------------------------------------------------------------------------
11. Utilidades de color de texto
-------------------------------------------------------------------------- */
.text-yellow { color: var(--c-yellow); }
.text-grey { color: var(--c-grey); }
.text-cream { color: var(--c-cream); }
/* --------------------------------------------------------------------------
12. ScrollBlurTypography — efecto 4 (revelado en scroll)
SplitType envuelve cada palabra en un con
display:inline-block propio; sólo reforzamos lo necesario para que el
blur/skew de GSAP no se recorte y no rompa el interlineado.
-------------------------------------------------------------------------- */
/* Sin will-change permanente: había cientos de .word en la página (225 en
Inicio, 736 en Torre) y cada uno con "filter" declarado obliga a Chrome a
reservar recursos de composición para todos a la vez, aunque estén fuera de
pantalla. Ahora el hint lo pone y lo quita blurScrollEffect.js sólo mientras
el bloque cruza el viewport. */
h1 .word, h2 .word, h3 .word, h4 .word,
p .word {
line-height: inherit;
}
/* --------------------------------------------------------------------------
13. LineHoverStyles — efecto de link "mneme"
Para
que son links de texto normales (nav, footer, "Amenidades",
redes sociales), no botones. Usa currentColor, así que se adapta solo al
color de cada contexto (blanco sobre fondo oscuro, oscuro sobre claro).
- .link::before es la línea de 1px permanente bajo el texto.
- .link--mneme::after duplica esa línea y se desvanece al hacer hover.
- .link--mneme::before es un bloque a toda altura, oculto en reposo, que
al hacer hover "crece" desde abajo y se retrae por arriba (coverUp):
un destello amarillo (--c-yellow) que pasa detrás/a través del texto.
En reposo todo el efecto usa currentColor (blanco sobre fondo oscuro);
sólo el destello del hover es amarillo.
-------------------------------------------------------------------------- */
.link {
position: relative;
cursor: pointer;
}
.link::before,
.link::after {
position: absolute;
width: 100%;
height: 1px;
background: currentColor;
top: 100%;
left: 0;
pointer-events: none;
}
.link::before {
content: '';
}
.link--mneme::before {
height: 100%;
top: 0;
opacity: 0;
}
.link--mneme:hover::before {
opacity: 1;
background: var(--c-yellow);
animation: linkMnemeCoverUp 0.3s ease forwards;
}
@keyframes linkMnemeCoverUp {
0% {
transform-origin: 50% 100%;
transform: scale3d(1, 0.045, 1);
}
50% {
transform-origin: 50% 100%;
transform: scale3d(1, 1, 1);
}
51% {
transform-origin: 50% 0%;
transform: scale3d(1, 1, 1);
}
100% {
transform-origin: 50% 0%;
transform: scale3d(1, 0.045, 1);
}
}
.link--mneme::after {
content: '';
transition: opacity 0.3s;
}
.link--mneme:hover::after {
opacity: 0;
}
/* --------------------------------------------------------------------------
14. Cursor personalizado
Portado de la primera versión del sitio (web-haus): un punto dorado con
glow que sigue el mouse con "lerp" (js/cursor.js). Sobre elementos
interactivos NO cambia de tamaño —el punto mide siempre 18px—: el aviso lo
da un cambio de color. Un cursor que crece desplaza su propio borde
respecto del punto que el usuario está apuntando, y en enlaces pequeños
como los del menú eso se siente como si el puntero se moviera solo. Sólo
en dispositivos con puntero fino; en touch se ignora por completo (el
script ni siquiera lo crea).
-------------------------------------------------------------------------- */
@media (pointer: fine) {
html, body {
cursor: none;
}
a, button, [role="button"] {
cursor: none;
}
}
/* Sin mix-blend-mode: en modo "screen" el punto se volvía blanco sobre
fondos claros y desaparecía. El contraste ahora lo da el color, que
js/cursor.js alterna según lo que haya debajo del puntero: amarillo por
defecto (fondos oscuros, de color o con foto) y .hl-cursor--dark sobre
fondos claros. */
.hl-cursor {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--c-yellow);
box-shadow:
0 0 0 1.5px rgba(0, 0, 0, 0.45),
0 0 10px 3px rgba(233, 202, 54, 0.70),
0 0 24px 7px rgba(233, 202, 54, 0.35);
transform: translate(-50%, -50%);
transition:
background-color 0.18s ease,
box-shadow 0.18s ease,
opacity 0.3s ease;
z-index: 9999;
will-change: translate;
}
/* Sobre fondo claro: tinta oscura de marca con halo blanco, que es lo que
lo despega de un blanco puro. */
.hl-cursor--dark {
background: var(--c-dark);
box-shadow:
0 0 0 1.5px rgba(255, 255, 255, 0.85),
0 0 10px 3px rgba(46, 49, 51, 0.28),
0 0 24px 7px rgba(46, 49, 51, 0.12);
}
/* Hover sobre fondo oscuro: el punto pasa de amarillo a blanco y conserva el
halo amarillo, así se lee como "encendido" sin ganar un solo píxel. */
.hl-cursor.is-hovering {
background: var(--c-white);
box-shadow:
0 0 0 1.5px rgba(0, 0, 0, 0.45),
0 0 12px 4px rgba(233, 202, 54, 0.85),
0 0 28px 9px rgba(233, 202, 54, 0.45);
}
/* Hover sobre fondo claro: el punto pasa de tinta oscura al amarillo de
marca. El aro deja de ser blanco y se vuelve oscuro: sobre el crema del
sitio, un amarillo con halo blanco se desdibujaría por completo. */
.hl-cursor--dark.is-hovering {
background: var(--c-yellow);
box-shadow:
0 0 0 1.5px rgba(46, 49, 51, 0.65),
0 0 12px 4px rgba(233, 202, 54, 0.55),
0 0 28px 9px rgba(233, 202, 54, 0.25);
}
.hl-cursor.is-hidden {
opacity: 0;
}
/* --------------------------------------------------------------------------
15. Páginas legales (privacy.html, terms.html)
Documentos de lectura larga, no landing: una sola columna medida para leer
y jerarquía por numeración, sin fotos ni parallax.
La cabecera oscura no es decorativa. El .site-header va en position:absolute
con los enlaces en blanco, pensado para caer sobre el hero oscuro; sin una
banda oscura debajo, en estas páginas quedaría texto blanco sobre el crema
del fondo, es decir invisible.
-------------------------------------------------------------------------- */
.legal-hero {
position: relative;
background-color: var(--c-dark);
color: var(--c-white);
/* Deja pasar el logotipo del header, que cuelga 150px sobre el contenido. */
padding-top: 12rem;
padding-bottom: 4rem;
}
.legal-hero h1 {
color: var(--c-white);
font-size: clamp(2rem, 6vw, 3.5rem);
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.legal-hero .legal-hero__meta {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin-bottom: 0;
}
@media (max-width: 991.98px) {
.legal-hero {
padding-top: 9rem;
}
}
/* Medida de lectura: ~68 caracteres. Más ancho que esto y el ojo pierde el
renglón en párrafos tan largos como los de un aviso de privacidad. */
.legal-content {
max-width: 68ch;
}
.legal-content h2 {
font-size: 1.35rem;
margin-top: 3rem;
margin-bottom: 1.25rem;
}
.legal-content h3 {
font-size: 1.05rem;
margin-top: 2rem;
margin-bottom: 0.75rem;
}
.legal-content h2:first-child,
.legal-content h3:first-child {
margin-top: 0;
}
.legal-content p {
margin-bottom: 1.25rem;
text-align: justify;
}
.legal-content ol,
.legal-content ul {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.legal-content li {
margin-bottom: 0.6rem;
}
.legal-content li::marker {
color: var(--c-yellow);
font-weight: 700;
}
/* Listas (a), (b), (c)… del apartado I: el documento se refiere a sus incisos
por letra ("el anexo (h) del numeral I."), así que la letra tiene que verse. */
.legal-content .list-alpha {
list-style-type: lower-alpha;
}
/* Bloque de datos del responsable: pares dato/valor, no prosa. */
.legal-content .legal-data {
list-style: none;
padding-left: 0;
}
.legal-content .legal-data > li {
padding-left: 1.25rem;
border-left: 2px solid rgba(46, 49, 51, 0.12);
}
.legal-content .legal-data strong {
font-family: var(--font-heading);
display: block;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Índice de apartados. */
.legal-toc {
border-top: 2px solid var(--c-yellow);
padding-top: 1.5rem;
}
.legal-toc ol {
list-style: none;
padding-left: 0;
margin-bottom: 0;
columns: 2;
column-gap: 2rem;
}
.legal-toc li {
margin-bottom: 0.75rem;
break-inside: avoid;
font-size: 0.9rem;
}
@media (max-width: 767.98px) {
.legal-toc ol {
columns: 1;
}
}
/* --------------------------------------------------------------------------
16. Lightbox
Visor a pantalla completa que abren los botones "Descubrir" de Amenidades
(js/lightbox.js). Un solo contenedor para todas las tarjetas: el script le
cambia la imagen y el pie antes de mostrarlo.
-------------------------------------------------------------------------- */
.lightbox {
position: fixed;
inset: 0;
/* Por encima del header fijo y del cursor personalizado. */
z-index: 1080;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1.25rem, 5vw, 3.5rem);
opacity: 0;
transition: opacity 300ms ease;
}
.lightbox.is-open {
opacity: 1;
}
.lightbox__backdrop {
position: absolute;
inset: 0;
background-color: rgba(46, 49, 51, 0.94);
}
.lightbox__figure {
position: relative;
margin: 0;
max-width: min(1100px, 100%);
/* La foto arranca ligeramente encogida y se asienta al abrir: el fundido
solo no alcanza a leerse como "esto viene de la tarjeta". */
transform: scale(0.97);
transition: transform 300ms ease;
}
.lightbox.is-open .lightbox__figure {
transform: scale(1);
}
.lightbox__img {
display: block;
max-width: 100%;
/* Deja aire para el pie y para el botón de cerrar; el alto del viewport se
mide con dvh donde exista, para que la barra del navegador móvil no
recorte la imagen. */
max-height: calc(100vh - 11rem);
max-height: calc(100dvh - 11rem);
object-fit: contain;
margin-inline: auto;
}
.lightbox__caption {
margin-top: 0.9rem;
font-family: var(--font-heading);
font-weight: 500;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.85);
text-align: center;
}
.lightbox__close {
position: absolute;
top: clamp(0.75rem, 3vw, 1.75rem);
right: clamp(0.75rem, 3vw, 1.75rem);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
font-size: 1.1rem;
color: var(--c-white);
background-color: rgba(255, 255, 255, 0.12);
transition: background-color 250ms ease, color 250ms ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
background-color: var(--c-yellow);
color: var(--c-dark);
}
/* Congela la página detrás del visor. Con Lenis activo esto no basta por sí
solo — el script además lo detiene (js/lightbox.js). */
html.lightbox-open,
html.lightbox-open body {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.lightbox,
.lightbox__figure,
.lightbox__close {
transition: none;
}
.lightbox__figure {
transform: none;
}
}