/* ========================================================================== NOMA Residences, Spa & Yacht Club — landing Paleta y ritmo tomados de la propuesta de Área 6, con los ajustes de Marisol. ========================================================================== */ :root{ --tinta:#12212f; /* azul profundo de las secciones oscuras */ --tinta-2:#0c1825; --papel:#f6f1e5; /* crema de las secciones claras */ --papel-2:#efe8d8; --oro:#c8a96a; --oro-claro:#e0cd9f; --oro-hondo:#8c6f2e; /* el mismo oro pero legible sobre el crema */ --verde:#1c3a33; /* banda "espacio, amplitud" */ --teal:#14403f; /* pie */ --texto:#2d3b46; /* El cuerpo de los párrafos. Estaba en #5c6873, que sobre el crema da 5,06:1 —pasa la norma, pero en un celular a la luz del día se lee lavado—. Área 6 pidió volver a oscurecerlo (05/09/2026) y quedó en 7,44:1 sobre --papel y 6,87:1 sobre --papel-2. No se toca --texto, que es el de los títulos: sigue en 10,15:1. Ahí está la jerarquía —el título tiene que seguir pesando más que el cuerpo— y por eso el cuerpo se acerca pero no llega. */ --texto-suave:#434f5a; --claro:#f6f1e5; --claro-suave:rgba(246,241,229,.68); --claro-tenue:rgba(246,241,229,.42); --linea:rgba(200,169,106,.34); --r:4px; --ease:cubic-bezier(.22,.61,.36,1); --shell:min(1240px,90vw); --nav-h:88px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} /* Los anclas de la página caen debajo de la barra fija: sin este margen, "Conoce NOMA" deja el título de la sección tapado por el menú. */ section[id]{scroll-margin-top:clamp(78px,10vh,108px)} /* Con la cortina abierta la página de atrás no se mueve. Va en porque es el elemento que hace el scroll: en —que ya lleva overflow-x— no alcanza en todos los navegadores. */ html.menu-abierto{overflow:hidden} body{ margin:0; /* Literal antes de la variable: si var() no resuelve —navegador viejo, hoja a medio bajar— la página sigue teniendo fondo y color propios en vez de quedar en blanco con texto negro. */ background:#12212f; background:var(--tinta); color:#2d3b46; color:var(--texto); font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; font-weight:300;font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} .wrap{width:min(1240px,90vw);width:var(--shell);margin-inline:auto} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* --- Tipografía compartida ------------------------------------------------ */ .eyebrow{ font-size:.66rem;letter-spacing:.36em;text-transform:uppercase; color:var(--oro);font-weight:400;margin:0 0 1.2rem; } .h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:400;line-height:1.04;letter-spacing:.01em;margin:0} .h2{font-size:clamp(1.9rem,3.7vw,3rem);font-weight:300;line-height:1.16;letter-spacing:.005em;margin:0 0 1.2rem} .h3{font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:300;line-height:1.24;margin:0 0 .9rem} .lede{font-size:1.04rem;color:var(--texto-suave);max-width:56ch;margin:0} .regla{width:64px;height:1px;background:var(--oro);margin:1.6rem 0} /* --- Secciones ------------------------------------------------------------ */ .sec{position:relative;padding:clamp(5rem,11vw,9.5rem) 0;overflow:hidden} /* El crema no va plano: lleva una baldosa de granito, pero el crema y la textura vienen YA MEZCLADOS en el archivo. Antes se hacía con background-color + background-blend-mode:soft-light, y eso resultó frágil: a un usuario le llegó la página con el granito gris crudo y el texto encima, ilegible, porque la mezcla no se le aplicó. Horneada en la imagen no hay nada que se pueda "no aplicar", y de paso la baldosa bajó de 276 KB a 59 KB. El background-color literal va antes de la variable a propósito: si por lo que sea las variables CSS no resuelven, el fondo sigue siendo crema y no transparente. Lo mismo con el color del texto. */ .sec--claro{ background-color:#f6f1e5; background-color:var(--papel); color:#2d3b46; color:var(--texto); background-image:url('../img/granito-papel.jpg'); background-size:460px;background-repeat:repeat; } .sec--oscuro{background:#12212f;background:var(--tinta);color:#f6f1e5;color:var(--claro)} .sec--verde{background:#1c3a33;background:var(--verde);color:#f6f1e5;color:var(--claro)} .sec--oscuro .lede,.sec--verde .lede{color:var(--claro-suave)} .sec--oscuro .h2,.sec--verde .h2{color:var(--oro-claro)} /* Textura de papel: ruido muy sutil para que el crema no quede plano. z-index 0 y el contenido en 1: si no, el pseudo-elemento se pinta encima del texto y las fotos y lava toda la sección. */ .sec--claro::before{ content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0; background-image:radial-gradient(circle at 20% 30%,rgba(200,169,106,.06),transparent 55%), radial-gradient(circle at 78% 68%,rgba(120,110,90,.05),transparent 50%); } .sec > .wrap{position:relative;z-index:1} /* ========================================================================== NAV ========================================================================== */ /* La tira de arriba: idioma y sesión. Va por encima de la barra (70 contra 60) y no al revés: cuando la barra se fija sube a top:0 y deja 1.45rem de aire arriba, que es justo donde queda metida la tira. pointer-events:none en la tira y auto en lo que se toca, así el resto del ancho no le roba el clic al hero que tiene debajo. line-height:1 para que la tira no crezca de alto: si pasa de 26 px, se mete abajo de la barra. */ .tira{ position:fixed;top:0;left:0;right:0;z-index:70; display:flex;align-items:center;justify-content:flex-end; gap:clamp(.8rem,2vw,1.4rem); padding:.5rem clamp(1rem,4vw,3rem) 0; font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;line-height:1; color:var(--claro-tenue);pointer-events:none; } .tira > *{pointer-events:auto} .idioma{display:flex;align-items:center;gap:.5rem} /* 17/09/2026 · Las banderas dejaron de ser