/* ========================================================= ICON5 · landing · portada oscura Derivado de MINI_BRAND_GUIDELINE_I5_ICON5. Orden de carga: base → components → (landing | app) ========================================================= */ /* ========================================================= LANDING · sistema oscuro del manual ========================================================= */ body.landing{background:var(--black);color:var(--on-dark)} body.landing h1,body.landing h2,body.landing h3,body.landing h4,body.landing h5{color:#fff} body.landing .section-label{color:var(--wine-tint)} body.landing .muted{color:var(--on-dark-2)} /* ---------- Navbar ---------- */ .nav-links{display:flex;gap:30px;align-items:center} .nav-links a{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--muted);transition:color .18s;padding:9px 0} .nav-links a:hover{color:var(--ink)} .nav-cta{padding:14px 28px} /* La puerta de quien YA renta. Vivía dentro de .nav-links con el mismo aspecto que "Niveles" o "Contacto", así que se leía como una sección más y no se encontraba. Aquí es un control, al lado del CTA. El borde va a blanco 42% (3.9:1 sobre negro): WCAG 1.4.11 pide 3:1 para el contorno de un control. */ .nav-acc{display:flex;align-items:center;gap:10px} /* Un solo estilo: toda esta portada es oscura —la barra va transparente sobre la foto o en negro al 92%, y el cuerpo es #0D0D0D—, así que no hace falta una variante clara. Borde a blanco 42% = 3.9:1, por encima del 3:1 que WCAG 1.4.11 exige al contorno de un control. */ .nav-login{padding:14px 24px;background:transparent;color:#fff; border-color:rgba(255,255,255,.42)} .nav-login:hover{background:rgba(255,255,255,.10);border-color:#fff} .nav-hero{position:fixed;left:0;right:0;top:0;background:transparent;backdrop-filter:none;border-bottom-color:transparent} .nav-hero .nav-links a{color:rgba(255,255,255,.7)} .nav-hero .nav-links a:hover{color:#fff} .nav-hero.scrolled{background:rgba(13,13,13,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line-dark)} .nav-hero.menu-open{background:var(--black)} .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px; background:none;border:none;cursor:pointer;padding:0;margin-left:6px} .nav-burger span{display:block;width:24px;height:1.5px;background:var(--ink);transition:.25s ease} .nav-hero .nav-burger span{background:#fff} .nav.menu-open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav.menu-open .nav-burger span:nth-child(2){opacity:0} .nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .nav-mobile{display:none;flex-direction:column;padding:8px 28px 28px; background:rgba(255,255,255,.99);border-bottom:1px solid var(--line)} .nav-hero .nav-mobile{background:var(--black);border-bottom-color:var(--line-dark)} .nav-mobile a:not(.btn){padding:17px 2px;font-size:11.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line)} .nav-hero .nav-mobile a:not(.btn){color:#fff;border-bottom-color:var(--line-dark)} .nav-mobile .btn{margin-top:22px;justify-content:center;width:100%} .nav-mobile .btn + .btn{margin-top:10px} /* ---------- Hero ---------- */ .hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center; background:var(--black);color:#fff;overflow:hidden;border-bottom:1px solid var(--line-dark)} .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden} /* La foto del hero la elige la hora real (data-daypart lo pone un script inline en el , antes del primer pintado). El atardecer es el valor por defecto: es el que se ve si el script no llega a correr. */ .hero-bg{position:absolute;inset:-6% -2%;background:center/cover no-repeat;will-change:transform; background-image:url('../img/torre-atardecer-1800.jpg')} html[data-daypart="dia"] .hero-bg{background-image:url('../img/torre-dia-1672.jpg')} html[data-daypart="noche"] .hero-bg{background-image:url('../img/torre-noche-1800.jpg')} /* data-fmt lo fija el script del tras probar WebP de forma síncrona */ html[data-fmt="webp"] .hero-bg{background-image:url('../img/torre-atardecer-1800.webp')} html[data-fmt="webp"][data-daypart="dia"] .hero-bg{background-image:url('../img/torre-dia-1672.webp')} html[data-fmt="webp"][data-daypart="noche"] .hero-bg{background-image:url('../img/torre-noche-1800.webp')} /* Estado en vivo del piso */ .hero-state{gap:11px} .hero-state .dot{width:6px;height:6px;border-radius:50%;flex:none; background:rgba(255,255,255,.35);transition:background .4s ease} .hero-state.is-open .dot{background:var(--wine-tint); box-shadow:0 0 0 4px rgba(192,110,130,.18)} /* Dos velos superpuestos: uno direccional que protege la columna de texto y otro vertical que asienta la foto. La fachada tiene mucho detalle de alto contraste y con un solo degradado el titular se peleaba con las ventanas. */ .hero-fade{position:absolute;inset:0; background: linear-gradient(100deg,rgba(13,13,13,.86) 0%,rgba(13,13,13,.80) 30%, rgba(13,13,13,.66) 41%,rgba(13,13,13,.10) 62%, rgba(13,13,13,.20) 100%), linear-gradient(180deg,rgba(13,13,13,.28) 0%,rgba(13,13,13,.04) 42%,rgba(13,13,13,.40) 100%)} .hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto; padding:140px var(--gutter) 80px;display:flex;align-items:center} .hero-copy{max-width:none} /* .6 daba 4.19:1 en móvil sobre la parte clara de la foto, por debajo del mínimo. El velo de móvil es más tenue arriba que el de escritorio, así que el mismo tono no rendía igual en los dos. */ .hero .eyebrow{color:rgba(255,255,255,.78)} /* Título con contraste de peso y escala: el manual admite Regular Y Bold */ .hero h1{margin:28px 0 34px;color:#fff;text-transform:uppercase;font-family:var(--display); letter-spacing:var(--tr-display);line-height:1.02} .h1-a{display:block;font-weight:400;font-size:clamp(20px,2.1vw,30px);color:rgba(255,255,255,.82)} .h1-b{display:block;font-weight:600;font-size:clamp(32px,5.6vw,80px);line-height:1;margin-top:.08em} .hero h1 .msk{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em} .hero-sub{font-size:clamp(15px,1.15vw,18px);font-weight:300;color:rgba(255,255,255,.84); max-width:46ch;line-height:1.85} .hero-cta{display:flex;gap:14px;margin-top:42px;flex-wrap:wrap} .hero-meta{display:flex;gap:56px;flex-wrap:wrap;margin-top:70px;padding-top:30px; border-top:1px solid var(--line-dark)} .hero-meta .m{display:flex;flex-direction:column;gap:8px} .hero-meta .m b{font-family:var(--display);font-size:32px;font-weight:600;color:#fff;line-height:1; letter-spacing:.01em} .hero-meta .m span{font-size:9.5px;letter-spacing:var(--tr-label);text-transform:uppercase; color:var(--on-dark-2);font-weight:500} /* Al aclarar el velo, esta etiqueta quedaba en 4.4:1 sobre la foto de día. Sube a blanco al 88%: es texto de 9.5 px, necesita 4.5:1. */ .hero-scroll{position:absolute;right:30px;bottom:40px;z-index:2;font-size:9.5px; letter-spacing:var(--tr-label);text-transform:uppercase;color:rgba(255,255,255,.88); writing-mode:vertical-rl;font-weight:500} /* ---------- Secciones ---------- */ .section{padding:clamp(72px,7vw,110px) 0;position:relative} .section.tight{padding:clamp(60px,5.5vw,86px) 0} body.landing .section{border-bottom:1px solid var(--line-dark)} .section.paper{background:var(--paper)} body.landing .section.paper{background:var(--black-2)} /* Encabezado a dos columnas: ocupa el ancho, no deja el flanco derecho muerto */ .section-head{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--gutter) 80px; align-items:end;margin-bottom:52px;padding-bottom:30px;border-bottom:1px solid var(--line-dark)} .section-head .sh-title{grid-column:1} .section-head h2{font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:clamp(26px,3.1vw,50px);letter-spacing:var(--tr-display);line-height:1.06; text-wrap:balance} .section-head h2 .lt{font-weight:400;color:rgba(255,255,255,.72)} .section-head p{color:var(--muted);font-size:16px;font-weight:300;line-height:1.85; max-width:50ch;padding-bottom:6px} body.landing .section-head p{color:var(--on-dark)} /* ========================================================= NIVELES · tablero de elevador + contenido ========================================================= */ /* ---------- Mapa del edificio ---------- Sustituye al escenario de paneles apilados. Aquel contaba el edificio como un recorrido: bonito, pero secuencial y caro. Se comía el 65% del scroll de la página y obligaba a pasar por los ocho espacios en orden, sin poder ojear ni saltar. Esto lo cuenta como un MAPA: se ve todo de golpe y se entra a lo que interese. Se conservan los tres niveles porque son la historia de la marca, y las piezas llevan tamaños distintos para que no lea como catálogo. */ .mapa{display:grid;gap:clamp(48px,6vw,86px);margin-top:clamp(44px,5vw,72px)} .nivel-head{display:flex;align-items:baseline;gap:clamp(16px,2vw,26px); padding-bottom:18px;margin-bottom:clamp(18px,2vw,26px); border-bottom:1px solid var(--line-dark)} .nivel-num{font-family:var(--display);font-weight:600;line-height:.8; font-size:clamp(34px,4.6vw,62px);color:var(--wine-tint); font-variant-numeric:lining-nums;flex:none} .nivel-head h3{font-family:var(--display);font-weight:600;text-transform:uppercase; letter-spacing:var(--tr-display);font-size:clamp(17px,1.7vw,23px);color:#fff} .nivel-head p{margin-top:6px;font-size:14px;font-weight:300;color:var(--on-dark-2)} /* La altura la fijan las FILAS, no el contenido. Con min-height mandaba la foto: la pieza del Mezzanine, a todo el ancho, se estiraba a su propia proporción y salía enorme frente a las demás. */ .nivel-grid{display:grid;gap:2px} /* Piso 5: una pieza manda y cuatro la acompañan */ .nivel-piso5{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(178px,18.5vw,246px)} .esp-xl{grid-column:span 2;grid-row:span 2} /* Media rejilla: dos piezas cierran una fila de cuatro columnas */ .esp-half{grid-column:span 2} .esp-wide{grid-column:1/-1} .pendiente{font-style:normal;font-size:10px;font-weight:600; letter-spacing:var(--tr-item);text-transform:uppercase;color:var(--wine-tint); white-space:nowrap} .nivel-mezzanine{grid-template-columns:1fr;grid-auto-rows:clamp(280px,29vw,400px)} .nivel-planta{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(240px,25vw,330px)} .esp{position:relative;margin:0;height:100%;overflow:hidden; background:var(--black-3);isolation:isolate} .esp picture{display:block;width:100%;height:100%} .esp img{width:100%;height:100%;object-fit:cover; filter:saturate(.88) contrast(1.05) brightness(.86); transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .5s ease} /* Velo de abajo hacia arriba: la ficha se lee sobre cualquier foto */ /* Más suave que antes: ya sólo tiene que sostener una línea de texto, no una ficha entera, así que la foto se ve mucho más. */ .esp::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(13,13,13,.88) 0%,rgba(13,13,13,.44) 26%, rgba(13,13,13,.06) 56%,rgba(13,13,13,0) 100%)} /* Dentro de la pieza sólo va el NOMBRE. La ficha entera tapaba la foto, que es justo lo que se viene a ver; el detalle se abre al pulsar. */ .esp-nom{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none; margin:0;padding:clamp(18px,2vw,26px); font-family:var(--display);font-weight:600;text-transform:uppercase; letter-spacing:var(--tr-display);line-height:1.1;color:#fff; font-size:clamp(15px,1.5vw,20px)} .esp-xl .esp-nom{font-size:clamp(22px,2.6vw,34px)} /* La ficha sigue en el documento: para quien no tenga JS y para los buscadores */ .esp-info[hidden]{display:none} html:not(.js) .esp-info[hidden]{display:block;position:absolute;left:0;right:0;bottom:0; z-index:2;padding:0 clamp(18px,2vw,26px) clamp(18px,2vw,26px); color:var(--on-dark);font-size:13px;font-weight:300} .esp-meta{display:flex;flex-wrap:wrap;gap:6px 20px} .esp-meta span{font-size:9.5px;letter-spacing:var(--tr-label);text-transform:uppercase; color:var(--on-dark-2)} .esp-meta b{font-family:var(--display);font-size:17px;font-weight:600;color:#fff; letter-spacing:.02em;font-variant-numeric:lining-nums} /* El enlace cubre la pieza entera: toda ella es el objetivo, y el texto accesible va dentro para que el lector de pantalla diga a dónde lleva. */ .esp-link{position:absolute;inset:0;z-index:3} .esp-link:focus-visible{outline:2px solid var(--wine-tint);outline-offset:-4px} .esp:hover img,.esp:focus-within img{transform:scale(1.045); filter:saturate(.95) contrast(1.05) brightness(.95)} /* Señal de que se puede pulsar, sin cargar la pieza de adornos */ .esp::before{content:"";position:absolute;z-index:2;right:clamp(18px,2vw,26px); top:clamp(18px,2vw,26px);width:30px;height:30px;border:1px solid rgba(255,255,255,.34); border-radius:50%;opacity:0;transform:translateY(-4px); transition:opacity .35s ease,transform .35s ease,background-color .35s ease; background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/14px no-repeat} .esp:hover::before,.esp:focus-within::before{opacity:1;transform:none; background-color:var(--wine)} /* Revelaciones: el estado inicial lo marca motion.js con .rv, nunca el CSS por su cuenta. Si el script no corre, no hay nada oculto que rescatar. */ .rv{opacity:0;transform:translateY(22px); transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .95s cubic-bezier(.2,.7,.3,1)} .rv.in{opacity:1;transform:none} /* Banda de apoyo del edificio */ .band{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-dark); margin-top:56px} .band figure{position:relative;margin:0;height:clamp(180px,17vw,260px);overflow:hidden;background:var(--black-3)} .band picture{display:block;width:100%;height:100%} .band img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.05) brightness(.92)} .band figcaption{position:absolute;left:0;bottom:0;z-index:2;padding:14px 18px;color:#fff; font-size:9.5px;font-weight:600;letter-spacing:var(--tr-item);text-transform:uppercase} .band figure::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 50%,rgba(13,13,13,.85))} /* ---------- Directorio ---------- */ /* Ficha técnica. Dos columnas de tres renglones: así ocupa el ancho en vez de dejar muerto el tercio derecho, y la sección mide la mitad de alto. El filete superior lo pone ya el .section-head; repetirlo aquí abría un hueco de 64 px entre dos líneas idénticas. */ .specs{margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,88px)} /* Sin filete superior: el del .section-head ya cierra por arriba y dos líneas paralelas a 50 px se leen como un error, no como estructura. */ .spec{display:grid;grid-template-columns:minmax(150px,34%) 1fr;gap:6px 28px;align-items:baseline; padding:22px 0;border-bottom:1px solid var(--line-dark);position:relative; transition:background-color .35s ease} /* El filete inferior se enciende de izquierda a derecha y, al salir, se apaga hacia la derecha: un barrido continuo en vez de un rebote. Antes esto animaba padding-left, que recalcula el layout en cada fotograma y además movía el texto; al alternar rápido entre filas, la que salía no alcanzaba a volver y el filete quedaba pegado al título. Ahora sólo se animan transform y color: nada toca el layout y cada fila termina siempre en un estado definido, sin importar lo rápido que se pase el puntero. */ .spec::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--wine-tint);transform:scaleX(0);transform-origin:right center; transition:transform .45s cubic-bezier(.22,.61,.36,1)} .spec:hover::after,.spec:focus-within::after{transform:scaleX(1);transform-origin:left center} .spec:hover,.spec:focus-within{background-color:rgba(255,255,255,.028)} .spec dt{font-size:12px;font-weight:600;letter-spacing:var(--tr-item);text-transform:uppercase;color:#fff} .spec dd{margin:0;font-size:14.5px;font-weight:300;color:var(--on-dark-2);line-height:1.7;max-width:46ch; transition:color .35s ease} .spec:hover dd,.spec:focus-within dd{color:var(--on-dark)} /* ---------- Galería ---------- */ /* ---------- Ubicación ---------- */ .loc-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:0;align-items:stretch} .loc-info{padding:0 72px 0 0} .loc-info p{color:var(--on-dark);line-height:1.85;font-size:15.5px;font-weight:300;max-width:42ch} .loc-detail{margin-top:40px;display:flex;flex-direction:column;gap:30px} .loc-row b{display:block;margin-bottom:10px;font-weight:600;font-size:9.5px; letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--wine-tint)} .loc-row address,.loc-row div{font-style:normal;color:var(--on-dark);font-size:15.5px; font-weight:300;line-height:1.85} .map-frame{overflow:hidden;min-height:520px;background:var(--black-3); filter:grayscale(1) contrast(1.1) brightness(.85);transition:filter .45s ease} .map-frame:hover{filter:grayscale(.3) contrast(1.05) brightness(.96)} .map-frame iframe{width:100%;height:100%;min-height:520px;border:0;display:block} /* ---------- Cierre ---------- */ /* ---------- Proceso: de interés a operación ---------- */ /* Aquí los números SÍ dicen algo: son cinco pasos que ocurren en ese orden y el cliente necesita saber cuál va antes. La regleta que los enhebra es lo que hace leer los cinco como UNA secuencia en vez de cinco tarjetas sueltas, y por eso vive en el CSS: es estructura, no adorno. */ .proceso{display:grid;grid-template-columns:repeat(5,1fr); margin:0;padding:0;list-style:none;counter-reset:none} .paso{position:relative;padding-right:30px} .paso::before{content:"";position:absolute;top:23px;left:0;right:0;height:1px; background:var(--line-dark)} .paso:first-child::before{left:23px} .paso:last-child::before{right:calc(100% - 24px)} /* Vino MACIZO con la cifra en blanco, igual que la lámina de la propuesta. El relleno resuelve dos cosas a la vez: tapa la regleta (el nodo queda enhebrado y no cruzado) y usa el vino como fondo, que es la única forma en que la marca contrasta sobre negro —blanco sobre #660D27 da 9.4:1; el vino como TEXTO sobre negro daría 1.5:1 y sería ilegible. */ .paso-num{position:relative;z-index:1;display:grid;place-items:center; width:46px;height:46px;margin-bottom:22px;border-radius:50%; background:var(--wine);color:#fff; font-family:var(--display);font-weight:600;font-size:19px;line-height:1; font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"onum" 0} .paso-dia{display:block;font-size:9.5px;font-weight:600; letter-spacing:var(--tr-label);text-transform:uppercase; color:var(--wine-tint);margin-bottom:9px} .paso h3{font-size:12px;font-weight:600;letter-spacing:var(--tr-item); text-transform:uppercase;color:#fff;margin-bottom:10px} .paso p{font-size:14px;font-weight:300;line-height:1.72;color:var(--on-dark-2); max-width:26ch} .proceso-cta{display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:26px 44px;margin-top:clamp(48px,5vw,72px); padding-top:34px;border-top:1px solid var(--line-dark)} .proceso-cta h3{font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:clamp(19px,2vw,27px);letter-spacing:var(--tr-display);line-height:1.15} .proceso-cta p{margin-top:8px;font-size:14px;font-weight:300;color:var(--on-dark-2)} .proceso-cta .btn{flex:none} /* ---------- Acceso de cliente ---------- */ /* Franja de servicio, no de venta: sin el relleno vertical de una sección normal y con filete arriba y abajo, para que se lea como una nota al pie del recorrido y no como un CTA más. */ .section-cliente{padding:0} .cliente{display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:20px 40px;padding:34px 0; border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)} .cliente h2{font-size:13px;font-weight:600;letter-spacing:var(--tr-item); text-transform:uppercase;color:#fff} .cliente p{margin-top:8px;font-size:14px;font-weight:300;color:var(--on-dark-2); max-width:52ch;line-height:1.7} .cliente .btn{flex:none} /* ---------- Contacto ---------- */ .contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:72px;align-items:start} .contact-aside p{color:var(--on-dark);font-size:15.5px;font-weight:300;line-height:1.85;max-width:36ch} .contact-aside .ca-row{margin-top:34px} .contact-aside b{display:block;margin-bottom:10px;font-weight:600;font-size:9.5px; letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--wine-tint)} .contact-aside a{color:var(--on-dark);font-size:15.5px;font-weight:300;display:block;padding:3px 0} .contact-aside a:hover{color:#fff} .contact-card{max-width:none} body:not(.landing) .contact-card{margin:0 auto;max-width:720px;background:#fff;border:1px solid var(--line); padding:52px 56px;box-shadow:var(--shadow);border-radius:var(--radius)} .contact-card h2{font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:clamp(21px,2.4vw,32px);letter-spacing:var(--tr-display);line-height:1.1} .contact-card .sub{color:var(--on-dark);margin:20px 0 40px;font-size:15px;font-weight:300; line-height:1.85;max-width:52ch} body:not(.landing) .contact-card .sub{color:var(--muted)} .contact-foot{color:var(--on-dark-2);font-size:12px;margin-top:24px;font-weight:300} body.landing .contact-card .field label{color:var(--on-dark)} body.landing .contact-card .input{background:transparent;border:0;border-bottom:1px solid var(--line-dark-2); border-radius:0;color:#fff;padding:14px 2px} body.landing .contact-card .input::placeholder{color:rgba(255,255,255,.3)} body.landing .contact-card .input:focus{border-bottom-color:var(--wine-tint);box-shadow:none} body.landing .contact-card .iti__country-list{background:var(--black-2);color:#fff} body.landing .success-box .muted{color:var(--on-dark-2)} /* ---------- Footer ---------- */ footer.site{background:var(--black);color:#fff;border-top:1px solid var(--line-dark)} .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.35fr;gap:72px;padding-top:88px;padding-bottom:56px} .footer-logo{height:50px;width:auto;display:block} .footer-brand p{color:var(--on-dark-2);font-size:14px;font-weight:300;line-height:1.85; margin-top:28px;max-width:34ch} .footer-social{display:flex;gap:10px;margin-top:32px} .footer-social a{width:42px;height:42px;border:1px solid var(--line-dark); display:grid;place-items:center;color:#fff;transition:background .2s ease,border-color .2s ease} .footer-social a:hover{background:var(--wine);border-color:var(--wine)} .footer-social svg{width:17px;height:17px} .footer-col h3{font-size:9.5px;letter-spacing:var(--tr-label);text-transform:uppercase; color:var(--wine-tint);font-family:var(--font);font-weight:600;margin:0 0 26px} .footer-col a,.footer-col span,.footer-col address{display:block;color:var(--on-dark-2);font-size:14px; font-weight:300;margin-bottom:10px;transition:color .15s ease;font-style:normal;line-height:1.8} .footer-col a{padding:4px 0} .footer-col a:hover{color:#fff} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; padding-top:28px;padding-bottom:28px;border-top:1px solid var(--line-dark); font-size:12px;font-weight:300;color:var(--on-dark-2)} .footer-legal{display:flex;gap:26px} .footer-legal a{padding:4px 0} .footer-legal a:hover{color:#fff} /* ---------- CTA flotante (móvil) ---------- */ .float-cta{display:none;align-items:center;position:fixed;z-index:45;left:50%; bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,24px); background:var(--wine);color:#fff;font-weight:600;font-size:11px;letter-spacing:var(--tr-item); text-transform:uppercase;padding:17px 34px;box-shadow:0 16px 36px -10px rgba(0,0,0,.75); opacity:0;pointer-events:none; transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.3,.5,1)} .float-cta.show{opacity:1;transform:translate(-50%,0);pointer-events:auto} /* Con una ficha abierta, fuera. El de showModal() vive en la capa superior, por encima de cualquier z-index, así que el flotante no puede taparlo: se queda DETRÁS, asomando por el velo y compitiendo con el botón de la propia ficha. Y en móvil, donde la ficha ocupa la pantalla entera, sería un botón vivo escondido debajo. */ body:has(dialog[open]) .float-cta{opacity:0;pointer-events:none;transform:translate(-50%,24px)} @media(max-width:1280px){ :root{--gutter:32px} .specs{grid-template-columns:1fr} .spec{grid-template-columns:minmax(170px,30%) 1fr;gap:8px 32px} .footer-grid{gap:48px} } @media(max-width:1024px){ /* El mosaico de 4 columnas no cabe: pasa a 2 y la pieza grande a lo ancho */ .nivel-piso5{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(200px,24vw,262px)} .esp-xl{grid-column:span 2;grid-row:auto} .esp-half{grid-column:span 2} .nivel-mezzanine{grid-auto-rows:clamp(250px,32vw,340px)} .nivel-planta{grid-auto-rows:clamp(215px,28vw,280px)} .section-head{grid-template-columns:1fr;gap:26px;align-items:start} .hero-inner{grid-template-columns:1fr;gap:0} .loc-grid,.contact-grid{grid-template-columns:1fr;gap:44px} .loc-info{padding:0 0 8px} /* Cinco columnas siguen cabiendo: el texto de cada paso es corto a propósito. */ .paso{padding-right:20px} .paso p{font-size:13.5px} } @media(max-width:880px){ .nav-links{display:none} .nav-acc .nav-cta{display:none} .nav-login{padding:12px 16px;font-size:10px;letter-spacing:.1em} .nav-burger{display:flex} .float-cta{display:inline-flex} /* Cerrado tiene que medir CERO. Con sólo max-height:0 el relleno y el borde seguían dibujándose: quedaba una banda muerta de 37 px bajo la barra en todas las pantallas de móvil. Se pliegan también relleno y borde. */ .nav-mobile{display:flex;max-height:0;opacity:0;overflow:hidden;transform:translateY(-10px); pointer-events:none;padding-top:0;padding-bottom:0;border-bottom-width:0; transition:max-height .42s cubic-bezier(.4,0,.2,1),padding .42s cubic-bezier(.4,0,.2,1), opacity .3s ease,transform .42s cubic-bezier(.4,0,.2,1)} .nav.menu-open .nav-mobile{max-height:480px;opacity:1;transform:translateY(0);pointer-events:auto; padding-top:8px;padding-bottom:28px;border-bottom-width:1px} .nav-mobile>*{opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.4,.5,1)} .nav.menu-open .nav-mobile>*{opacity:1;transform:none} .nav.menu-open .nav-mobile>*:nth-child(1){transition-delay:.10s} .nav.menu-open .nav-mobile>*:nth-child(2){transition-delay:.15s} .nav.menu-open .nav-mobile>*:nth-child(3){transition-delay:.20s} .nav.menu-open .nav-mobile>*:nth-child(4){transition-delay:.25s} .nav.menu-open .nav-mobile>*:nth-child(5){transition-delay:.30s} /* La ficha se pega ABAJO para dejar ver la torre entera, sobre todo la corona roja, que es lo que identifica al edificio. Se hace en dos pasos y no con align-items:flex-end en .hero: si el bloque se anclara directamente al final, en una pantalla corta crecería HACIA ARRIBA y se saldría por encima (el hero recorta). Con stretch el inner ocupa todo el alto y su relleno superior de 104px hace de tope: la ficha baja todo lo que puede, pero nunca se mete debajo de la barra. */ .hero{align-items:stretch} .hero-inner{padding:104px var(--gutter) 36px;align-items:flex-end} .hero h1{margin:18px 0 22px} .hero-sub{line-height:1.7} .hero-cta{margin-top:30px} /* Velo SOLO de móvil y tablet (el de escritorio vive fuera de esta consulta y no se toca). Sube de abajo hacia arriba y se abre en el tramo 12-22%, que es donde está la corona de la torre. Los valores no son a ojo: sobre la zona más clara de la foto (el cielo, 255) el texto blanco necesita alpha >= 0.56 para llegar a 4.5:1. Como el contenido arranca en el 33%, a partir de ahí nunca baja de 0.62. */ .hero-fade{background:linear-gradient(180deg, rgba(13,13,13,.58) 0%, rgba(13,13,13,.20) 17%, rgba(13,13,13,.62) 31%, rgba(13,13,13,.82) 52%, rgba(13,13,13,.93) 76%, rgba(13,13,13,.97) 100%)} /* Rejilla de 3, no flex con wrap: así las tres cifras quedan SIEMPRE en una fila y alineadas en columna, pase lo que pase con el largo de la etiqueta. */ .hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px; margin-top:34px;padding-top:22px;align-items:start} .hero-meta .m{gap:6px;min-width:0} .hero-meta .m b{font-size:clamp(21px,6.2vw,28px)} .hero-meta .m span{overflow-wrap:anywhere} .hero-scroll{display:none} /* El tablero deja de ser lateral: encabeza cada nivel */ /* En móvil los paneles dejan de relevarse: se apilan como bloques y cada espacio lleva su nivel escrito, sin tablero lateral. */ /* En móvil los paneles nunca se apilan (motion.js no activa el escenario): cada espacio es un bloque con su foto y su ficha debajo. */ .band{grid-template-columns:repeat(2,1fr);margin-top:44px} .spec{grid-template-columns:1fr;gap:8px} .spec dd{max-width:none} .map-frame{min-height:340px;filter:grayscale(.4)} .map-frame iframe{min-height:340px} body:not(.landing) .contact-card{padding:32px 24px} /* La marca a todo el ancho y los tres bloques de enlaces en columnas iguales: con 1fr 1fr quedaba un hueco vacío al final. */ .footer-grid{grid-template-columns:repeat(3,1fr);gap:44px 28px;padding-top:64px;padding-bottom:40px} .footer-brand{grid-column:1/-1} .footer-brand p{max-width:52ch} /* La secuencia gira: la regleta pasa de horizontal a vertical y baja por el costado izquierdo. Sigue siendo la misma línea uniendo los mismos nodos, así que el orden se lee igual sin cinco columnas de 70 px. */ .proceso{grid-template-columns:1fr} .paso{display:grid;grid-template-columns:46px 1fr;column-gap:20px;padding:0 0 30px} .paso:last-child{padding-bottom:0} .paso::before{top:52px;bottom:6px;left:23px;right:auto;width:1px;height:auto} .paso:last-child::before{display:none} .paso-num{grid-column:1;grid-row:1/span 3;align-self:start;margin-bottom:0} .paso-dia{grid-column:2;grid-row:1;margin-bottom:7px} .paso h3{grid-column:2;grid-row:2;margin-bottom:0} .paso p{grid-column:2;grid-row:3;margin-top:8px;max-width:none;font-size:14px} } @media(max-width:560px){ :root{--gutter:22px} /* Una columna: aquí sí hay sitio para la descripción en todas las piezas */ .nivel-piso5,.nivel-planta,.nivel-mezzanine{grid-template-columns:1fr; grid-auto-rows:clamp(215px,56vw,290px)} .esp-xl,.esp-half,.esp-wide{grid-column:auto;grid-row:auto} .nivel-head{flex-direction:column;gap:8px;align-items:flex-start} /* Los dos botones en un renglón. Reparten el ancho a partes iguales con flex:1 1 0 + min-width:0, y ceden relleno y cuerpo de letra para que quepa la etiqueta más larga ("VER LOS NIVELES"). El width:100% que components.css aplica a .btn por debajo de 560 hay que anularlo aquí. */ .hero-cta{flex-direction:row;align-items:stretch;flex-wrap:nowrap;gap:10px} .hero-cta .btn{flex:1 1 0;width:auto;min-width:0;padding:17px 8px; font-size:9.5px;letter-spacing:.07em;min-height:52px} /* Footer en dos columnas de verdad, no todo apilado: la marca arriba a lo ancho, Niveles y Reservas emparejados, y Contacto abajo también a lo ancho porque la dirección necesita renglón. Todo alineado al mismo margen. */ .footer-grid{grid-template-columns:1fr 1fr;gap:34px 20px;padding-top:52px;padding-bottom:32px} .footer-brand{grid-column:1/-1} .footer-col:last-child{grid-column:1/-1} .footer-col h3{margin-bottom:14px} .footer-col a,.footer-col span,.footer-col address{font-size:13.5px;overflow-wrap:anywhere} .footer-logo{height:42px} .footer-social{margin-top:24px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px} .footer-legal{gap:20px} } /* ---------- Ficha del espacio (diálogo) ---------- El nativo trae gratis Esc para cerrar, el foco atrapado dentro y el fondo inerte. Escribirlo a mano habría sido más código y peor. Panel DIVIDIDO en escritorio: la foto a la izquierda y la ficha a la derecha. Apilado desperdiciaba media pantalla en negro debajo del texto, y obligaba a encoger la foto para que cupiera el resto. La guarda :not([open]) es OBLIGATORIA. El navegador oculta los diálogos cerrados con `dialog:not([open]){display:none}` en su hoja de usuario, pero CUALQUIER declaración de `display` de autor la anula, porque el origen de autor gana al del navegador sin importar la especificidad. Sin esta línea el diálogo se dibuja siempre, vacío, encima de la página. */ .esp-modal:not([open]){display:none} .esp-modal{ border:0;padding:0;overflow:visible; width:min(1120px,94vw);max-height:min(720px,88vh);max-height:min(720px,88dvh); /* Suelo de alto: sin él la ficha, que es corta, dejaba un diálogo apaisado y pequeño en el que la foto perdía presencia. */ min-height:clamp(340px,54vh,520px); background:var(--black-2);color:var(--on-dark); display:grid;grid-template-columns:1.12fr .88fr; box-shadow:0 40px 120px -24px rgba(0,0,0,.85); outline:1px solid rgba(255,255,255,.09);outline-offset:0} .esp-modal::backdrop{background:rgba(6,6,7,.86);backdrop-filter:blur(6px) saturate(.8)} /* Entrada y SALIDA. La salida no puede ser sólo CSS: al llamar a close() el navegador pone display:none en el acto y la animación no llega a verse. Por eso motion.js marca .cerrando, deja correr la animación y cierra al acabar. Sale más rápido que entra (0,26 frente a 0,44): al cerrar estorba esperar. */ @media (prefers-reduced-motion: no-preference){ .esp-modal[open]{animation:espEntra .44s cubic-bezier(.22,.61,.36,1) both} .esp-modal[open]::backdrop{animation:espVelo .44s ease both} .esp-modal[open].cerrando{animation:espSale .26s cubic-bezier(.4,0,.75,.2) both} .esp-modal[open].cerrando::backdrop{animation:espVeloSale .26s ease both} } @keyframes espEntra{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} @keyframes espVelo{from{opacity:0}to{opacity:1}} @keyframes espSale{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.99)}} @keyframes espVeloSale{from{opacity:1}to{opacity:0}} .esp-modal-img{margin:0;position:relative;overflow:hidden;background:var(--black-3)} .esp-modal-img img{display:block;width:100%;height:100%;object-fit:cover} /* Degradado hacia la ficha: cose las dos mitades en vez de dejar un corte seco */ .esp-modal-img::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to right,transparent 62%,rgba(18,18,19,.55) 100%)} .esp-modal-txt{display:flex;flex-direction:column;justify-content:center;min-height:0; padding:clamp(30px,3.2vw,52px);overflow-y:auto; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} .esp-modal-txt::-webkit-scrollbar{width:5px} .esp-modal-txt::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)} .esp-modal-txt h3{margin:13px 0 0;font-family:var(--display);font-weight:600; text-transform:uppercase;letter-spacing:var(--tr-display);color:#fff; font-size:clamp(23px,2.5vw,34px);line-height:1.05} .esp-modal-txt p{margin-top:18px;font-size:clamp(14px,1vw,15.5px);font-weight:300; line-height:1.8;color:var(--on-dark-2)} /* Filete y respiración: separa el dato de la prosa sin meter una caja */ .esp-modal .esp-meta{margin-top:30px;padding-top:24px;gap:14px clamp(28px,3vw,46px); border-top:1px solid var(--line-dark)} .esp-modal .esp-meta span{display:flex;flex-direction:column;gap:6px} .esp-modal .esp-meta b{font-size:26px;line-height:1} .esp-modal .btn{margin-top:34px;align-self:flex-start} /* Redondo y sobre la foto: un cuadrado en la esquina cortaba la imagen */ .esp-modal-x{position:absolute;top:16px;right:16px;z-index:3;width:42px;height:42px; border-radius:50%;display:grid;place-items:center; border:1px solid rgba(255,255,255,.22);background:rgba(10,10,11,.55); backdrop-filter:blur(10px);color:#fff;cursor:pointer; transition:background-color .25s ease,border-color .25s ease,transform .25s ease} .esp-modal-x:hover{background:var(--wine);border-color:var(--wine);transform:rotate(90deg)} .esp-modal-x svg{width:17px;height:17px} @media(max-width:880px){ /* Apilado: en vertical no hay ancho para dos columnas. Las filas son `1fr auto`, NO `auto 1fr`: la FOTO se queda el sobrante y la ficha ocupa lo que necesita. Al revés, la ficha es corta y dejaba un hueco negro muerto en la mitad inferior de la pantalla. */ .esp-modal{grid-template-columns:1fr;grid-template-rows:1fr auto; max-height:min(88dvh,860px)} .esp-modal-img{height:auto;min-height:clamp(200px,32dvh,340px)} .esp-modal-img::after{background:linear-gradient(to bottom,transparent 58%,rgba(18,18,19,.72) 100%)} .esp-modal-txt{justify-content:flex-start} } @media(max-width:560px){ /* 100% y no 100vw: vw INCLUYE la barra de desplazamiento, así que con barra visible el diálogo salía unos píxeles más ancho que el área útil y el texto quedaba cortado por la derecha. El porcentaje se resuelve contra el bloque contenedor inicial, que la excluye. */ .esp-modal{width:100%;max-width:100%;max-height:100dvh;height:100dvh; min-height:0;outline:0} .esp-modal-img{min-height:clamp(230px,34dvh,420px)} .esp-modal .btn{width:100%;justify-content:center;align-self:stretch} .esp-modal-x{top:12px;right:12px} } /* ---------- Formulario a pantalla completa (móvil) ---------- Lo abre #form desde motion.js, y sólo hasta 880 px. En el teléfono el formulario estaba al final de una página muy larga: ahora se abre encima de todo y no queda nada más en pantalla que él. La guarda :not([open]) es OBLIGATORIA, por lo mismo que en .esp-modal: una declaración de `display` de autor anula el `display:none` que el navegador pone a los diálogos cerrados, y el panel se dibujaría siempre. Alto en dvh y no en vh: en el móvil vh se queda con la ventana GRANDE (la de la barra del navegador retraída), así que con la barra a la vista el panel medía más que la pantalla y el pie se iba por debajo del borde. */ .form-modal:not([open]){display:none} .form-modal{ /* 100% y no 100vw, por lo mismo que .esp-modal: vw incluye la barra de desplazamiento y el contenido salía cortado por la derecha. */ margin:0;border:0;padding:0;width:100%;max-width:100%; height:100vh;height:100dvh;max-height:100dvh; background:var(--black-2);color:var(--on-dark); display:flex;flex-direction:column;overflow:hidden} .form-modal::backdrop{background:rgba(6,6,7,.92)} /* Sube desde abajo, como una hoja: es el gesto que ya espera quien usa el teléfono. Sale más rápido de lo que entra; al cerrar estorba esperar. El velo reaprovecha los fotogramas de .esp-modal, que hacen justo esto. */ @media (prefers-reduced-motion: no-preference){ .form-modal[open]{animation:formEntra .34s cubic-bezier(.22,.61,.36,1) both} .form-modal[open]::backdrop{animation:espVelo .34s ease both} .form-modal[open].cerrando{animation:formSale .22s cubic-bezier(.4,0,.75,.2) both} .form-modal[open].cerrando::backdrop{animation:espVeloSale .22s ease both} } @keyframes formEntra{from{opacity:0;transform:translateY(5%)}to{opacity:1;transform:none}} @keyframes formSale{from{opacity:1;transform:none}to{opacity:0;transform:translateY(4%)}} /* Barra fija arriba: el botón de cerrar no puede irse con el desplazamiento. El relleno superior suma el hueco de la muesca cuando lo hay. */ .form-modal-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:calc(15px + env(safe-area-inset-top)) var(--gutter) 15px; border-bottom:1px solid var(--line-dark)} .form-modal-bar .section-label{margin:0} /* 44 px: el mínimo que se acierta con el pulgar sin mirar */ .form-modal-x{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04); color:#fff;cursor:pointer;transition:background-color .25s ease,border-color .25s ease} .form-modal-x:hover{background:var(--wine);border-color:var(--wine)} .form-modal-x svg{width:18px;height:18px} /* Lo único que se desplaza. overscroll-behavior: sin él, seguir arrastrando al llegar al final movía la página de debajo y el panel parecía despegarse. El relleno de abajo suma la barra de gestos del teléfono. */ .form-modal-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:24px var(--gutter) calc(34px + env(safe-area-inset-bottom)); scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} .form-modal-body::-webkit-scrollbar{width:5px} .form-modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)} /* Recibe el foco al abrir (tiene tabindex="-1"), y no es alcanzable con el tabulador: quitarle el aro no le cuesta nada a quien navega con teclado. */ .form-modal-body:focus{outline:none} /* La tarjeta entra tal cual, con los estilos que ya tiene en la sección. Aquí sólo se ajusta lo que cambia por estar sola en la pantalla. */ /* Los 16 px contra el zoom de iOS ya están en components.css por puntero táctil. Aquí se repiten por ANCHO, que es la condición que de verdad define este panel: existe sólo en móvil, y dentro de él no se negocia. */ .form-modal .input{font-size:16px} .form-modal .contact-card h2{font-size:25px} .form-modal .contact-card .sub{margin:12px 0 26px;font-size:14.5px} /* Se recorta el aire entre campos. En la sección, el formulario respira dentro de una página que ya es amplia; aquí compite con el teclado por la pantalla, y cada campo que se ve de más es uno que no hay que ir a buscar. */ .form-modal .field{margin-bottom:16px} .form-modal .field label{margin-bottom:6px} .form-modal .contact-card .input{padding:11px 2px} .form-modal .contact-foot{margin-top:18px} /* Nombre y apellido, uno debajo del otro: en 390 px dos columnas dejan campos de unos 150 px, donde un apellido normal deja de verse entero al escribirlo. */ .form-modal .form-row{grid-template-columns:1fr;gap:0} .form-modal #cSubmit{width:100%;justify-content:center;padding-top:17px;padding-bottom:17px} /* ---------- Scroll suave (Lenis) ---------- Las reglas mínimas que pide la librería, copiadas de su lenis.css. Se ponen aquí y no como archivo aparte porque son cinco y no valen una petición. La regla del iframe es la única modificada: la original apaga los eventos de puntero en TODOS los iframes mientras el scroll suave está activo, para que la rueda no se quede atrapada dentro. Eso dejaría el mapa de "Cómo llegar" inerte, así que se exceptúa; a Lenis se le dice aparte, con `prevent`, que no capture el scroll encima del mapa. */ html.lenis, html.lenis body{height:auto} .lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip} .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain} .lenis.lenis-smooth iframe{pointer-events:none} .lenis.lenis-smooth .map-frame iframe{pointer-events:auto} .lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms; transition-behavior:allow-discrete}