/* ============ NOCHE PATRIMONIO — atmósfera premium (pasada 1) ============ Se carga DESPUÉS de styles.css. No mueve layout ni tipografías: refina acento, botones, nav, la sección de cierre y añade el grano de película apenas perceptible que pide la experiencia "noche". */ :root{ --oro-acento:#C9A24B; --oro-fuerte:#B98D4F; --oro-claro:#E4D2A6; --noche-2:#14100A; /* noche más profunda para el cierre */ } /* ---------- grano de película, estático y sutil ---------- */ body::after{ content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); background-size:220px 220px;opacity:.05;mix-blend-mode:overlay} /* ---------- botón sólido: oro con tinta noche ---------- */ .btn-solido{background:linear-gradient(135deg,var(--oro-fuerte) 0%,var(--oro-acento) 52%,#D8BC7E 100%); color:#171208;box-shadow:0 12px 28px -12px rgba(185,141,79,.55)} .btn-solido:hover{transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(185,141,79,.7)} .nav-cta:active,.nav-cta.nav-confirmado{color:#171208!important} /* ---------- nav: vidrio más sereno, filo de oro ---------- */ #nav{background:linear-gradient(180deg,rgba(16,12,7,.55),rgba(16,12,7,.34)); border-bottom:1px solid rgba(201,162,75,.16)} /* ---------- cierre: la noche patrimonio ---------- */ #cierre{background: radial-gradient(120% 90% at 50% 118%,rgba(201,162,75,.14),transparent 55%), linear-gradient(180deg,#1B150C 0%,var(--noche-2) 100%); position:relative} #cierre .cierre-kicker{color:var(--oro-claro);letter-spacing:.4em} #cierre h2{color:#F6EFE0} #cierre h2 em{color:var(--oro-acento);font-style:italic} #cierre .cierre-sub{color:#CDBE9C} /* ---------- detalles de acento que heredan el tono ---------- */ .link-mudo:hover{border-color:var(--oro-acento)} ::selection{background:rgba(201,162,75,.32);color:#171208} @media (prefers-reduced-motion:reduce){ .btn-solido:hover{transform:none} } /* ========================================================================== PASADA 2 · LAS SECCIONES CLARAS ENTRAN AL MISMO MUNDO Diagnóstico: #prueba, #residencias y #recorrido usaban `--blanco` (#fffdf8), un blanco de página web. Contra las secciones de noche el sitio se leía como dos productos distintos pegados. Decisión: NO volverlo todo negro. Siete pantallas de noche seguidas aplanan el ritmo y castigan la lectura de un público de 55-75 años. Se conserva la respiración claro/oscuro, pero el lado claro deja de ser «web» y pasa a ser PERGAMINO del mismo mundo: papel cálido, filos de oro, y el grano de película de body::after cruzando por encima (ya lo hace: está en el ). ========================================================================== */ .bloque.claro{ background: radial-gradient(120% 80% at 50% -10%, rgba(201,162,75,.10), transparent 58%), radial-gradient(100% 60% at 50% 110%, rgba(92,70,50,.07), transparent 60%), linear-gradient(180deg, #F7F2E7 0%, #F2EBDD 100%); position:relative; } /* ---------- LA COSTURA: la noche se derrama sobre el pergamino ---------- Sin esto el cambio es un corte. Con esto, el ojo lee una sola pieza. */ .bloque.claro::before, .bloque.claro::after{ content:"";position:absolute;left:0;right:0;height:88px;pointer-events:none;z-index:0} .bloque.claro::before{top:0; background:linear-gradient(180deg, rgba(20,16,10,.30) 0%, rgba(20,16,10,0) 100%)} .bloque.claro::after{bottom:0; background:linear-gradient(0deg, rgba(20,16,10,.22) 0%, rgba(20,16,10,0) 100%)} .bloque.claro > *{position:relative;z-index:1} /* ---------- el filo de oro sustituye al hairline de nogal ---------- */ .bloque.claro{--hair:rgba(201,162,75,.30)} .bloque.claro .respiro-kicker, .bloque.claro .encabezado .kicker, .bloque.claro [class*="kicker"]{color:var(--oro-fuerte)} /* ---------- tipografía: el titular del pergamino es el mismo serif ---------- */ .bloque.claro h2{color:#2A2118} .bloque.claro h2 em{color:var(--oro-fuerte);font-style:italic} /* ---------- fichas y tablas: vidrio cálido, no cajas blancas ---------- */ .bloque.claro .ficha, .bloque.claro .res-tabla, .bloque.claro .tarjeta{ background:rgba(255,253,248,.62); border:1px solid rgba(201,162,75,.26); backdrop-filter:blur(2px)} @media (prefers-reduced-motion:reduce){ .bloque.claro::before,.bloque.claro::after{transition:none} } /* ========================================================================== PASADA 3 · LOS FORMULARIOS ENTRAN AL SISTEMA El modal de lead era un panel claro genérico: el único punto del embudo que no se parecía al sitio, y justo donde se pide el dato. Pasa a vidrio de noche con filo de oro, igual que la hoja de unidad de disponibilidad.html. Endpoints, validación y microcopy de error se conservan intactos: esto es presentación. ========================================================================== */ .lead-fondo{background:rgba(14,11,6,.80);backdrop-filter:blur(10px) saturate(.9)} .lead-modal{ background:linear-gradient(180deg, rgba(32,26,17,.94) 0%, rgba(20,16,10,.96) 100%); border:1px solid rgba(201,162,75,.28); color:#EDE4D2; box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03) inset; backdrop-filter:blur(14px)} .lead-modal h3{color:#F6EFE0} .lead-modal h3 em{color:var(--oro-acento);font-style:italic} .lead-modal .lead-kicker,.lead-modal #lead-kicker{color:var(--oro-claro);letter-spacing:.32em} .lead-modal #lead-sub,.lead-modal p{color:#C6B99E} /* ---------- campos: tinta de noche, filo de oro al enfocar ---------- */ /* js/leads.js inyecta su