/* Funeraria Nueva Luz · tema Halo (v2) y componentes compartidos.
Va encima de css/estilos.css. Noche de principio a fin: fondo #050B1F, azul de marca solo en resplandores,
oro #E2C98F como única luz, marfil para el texto. Tres formas: arco, círculo de luz, anillo/halo.
NINGÚN estado oculto aquí: todo se ve por defecto. Lo que oculte el movimiento cuelga de html.js-anim
y lo escribe quien hace la coreografía (js/inicio.js), nunca esta hoja.
Índice: 1 variables · 2 fondo y grano · 3 barra 24 h, cabecera · 4 botones · 5 barra fija ·
6 arco · 7 anillos y resplandor · 8 calificación y mapa · 9 .ir · 10 pie · 11 foco y reduced-motion */
/* 1. VARIABLES ----------------------------------------------------------- */
:root {
--fondo: #050B1F;
--fondo-2: #071A45; /* azul de marca: solo resplandores */
--fondo-3: #030716; /* barra 24 h y pie */
--oro-halo: #E2C98F; /* 11.6:1 sobre --fondo */
--oro-120: rgba(226, 201, 143, .12);
--oro-220: rgba(226, 201, 143, .22);
--oro-350: rgba(226, 201, 143, .35);
--oro-600: rgba(226, 201, 143, .6);
--texto: var(--marfil);
--texto-suave: #C9D3EA; /* 12:1 sobre --fondo; mínimo 7:1 sobre un resplandor al 26 % */
--titulo: var(--marfil);
--titulo-h: var(--marfil);
--enlace: var(--oro-halo);
--foco: var(--oro-halo);
--linea: rgba(226, 201, 143, .18);
--f-titulo: "Newsreader", Georgia, "Times New Roman", serif;
--grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 2. FONDO Y GRANO ------------------------------------------------------- */
html { background: var(--fondo); }
body { background: var(--fondo); color: var(--marfil); overflow-x: clip; position: relative; }
.seccion { background: transparent; }
main, .pie, .cabecera, .barra-24 { position: relative; z-index: 1; }
/* Capa de fondo fija: dos resplandores muy anchos (azul de marca arriba a la derecha, oro tenue abajo a la izquierda) */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(60rem 44rem at 88% -6%, rgba(7, 26, 69, .95), rgba(7, 26, 69, 0) 70%),
radial-gradient(48rem 36rem at 4% 108%, rgba(226, 201, 143, .07), rgba(226, 201, 143, 0) 70%); }
/* Grano de película: estático, finísimo, sin mix-blend-mode */
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .07; background-image: var(--grano); }
/* Halo que acompaña: un degradado radial grande; quien anima lo mueve solo con transform */
.halo { position: fixed; inset: 0; margin: auto; z-index: 0; pointer-events: none;
width: min(135vw, 56rem); height: min(135vw, 56rem);
background: radial-gradient(circle closest-side, rgba(226, 201, 143, .15), rgba(226, 201, 143, .06) 45%, rgba(226, 201, 143, 0) 100%); }
@media (min-width: 900px) { .halo { width: 52rem; height: 52rem; } }
/* 3. BARRA 24 H, CABECERA ------------------------------------------------ */
.barra-24 { background: var(--fondo-3); border-bottom: 1px solid var(--linea); }
.cabecera { background: transparent; border-bottom: 1px solid var(--linea); }
.cabecera__logo img { height: 3rem; width: auto; }
@media (min-width: 900px) { .cabecera__logo img { height: 3.4rem; } }
.menu-boton { color: var(--oro-halo); border-color: var(--oro-halo); }
.menu-boton[aria-expanded="true"] { background: var(--oro-halo); color: var(--fondo); }
.nav__enlace { color: var(--marfil); }
.nav__enlace[aria-current="page"] { color: var(--oro-halo); box-shadow: inset 3px 0 0 var(--oro-halo); }
@media (min-width: 900px) { .nav__enlace[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--oro-halo); } }
@media (hover: hover) and (pointer: fine) {
.menu-boton:hover { background: var(--oro-120); }
.nav__enlace:hover { color: var(--oro-halo); }
}
/* Sin JS en móvil: navegación compacta en una línea con desplazamiento, para no empujar el hero */
@media (max-width: 899px) {
html:not(.js) .cabecera__in { flex-wrap: wrap; }
html:not(.js) .nav { min-width: 0; width: 100%; max-width: 100%; }
html:not(.js) .nav__lista { display: flex; overflow-x: auto; margin: 0; border: 0; gap: .25rem; scrollbar-width: thin; max-width: 100%; }
html:not(.js) .nav__enlace { white-space: nowrap; border: 0; min-height: 2.75rem; padding: .4rem .7rem; }
html:not(.js) .nav__enlace[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--oro-halo); padding-left: .7rem; }
}
/* 4. BOTONES SOBRE OSCURO ------------------------------------------------ */
.btn { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-ui); }
.btn:active { transform: scale(.97); }
.btn--primario { background: var(--oro-halo); color: var(--fondo); }
.btn--contorno { color: var(--marfil); border-color: var(--oro-halo); }
.btn--claro { color: var(--fondo); }
@media (hover: hover) and (pointer: fine) {
.btn--primario:hover { background: #fff; }
.btn--contorno:hover { background: var(--oro-120); }
.btn--claro:hover { background: #fff; }
}
.btn--wa { border-color: rgba(255, 255, 255, .3); }
.enlace { text-decoration-color: var(--oro-halo); }
.eslogan { color: var(--oro-halo); }
/* 5. BARRA FIJA: vidrio oscuro con filete de oro ------------------------- */
.accion-fija { background: rgba(5, 11, 31, .96); border-top: 1px solid rgba(226, 201, 143, .45); z-index: 50; }
.accion-fija__texto { color: var(--marfil); }
.accion-fija .btn--wa { border-color: rgba(255, 255, 255, .3); }
/* 6. ARCO: ventana de capilla; marco de toda foto real ------------------- */
/* Marcado:
--arco-ratio cambia la proporción (por defecto 4/5). El velo y el grano disimulan la baja resolución. */
.arco { position: relative; --arco-ratio: 4 / 5; }
.arco::before { content: ""; position: absolute; z-index: 0; inset: -.7rem -.7rem 0; border: 1px solid rgba(226, 201, 143, .28); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; }
.arco__aura { position: absolute; inset: -22% -18%; z-index: 0; pointer-events: none;
background: radial-gradient(closest-side, rgba(226, 201, 143, .30), rgba(226, 201, 143, .10) 55%, rgba(226, 201, 143, 0)); }
.arco__marco { position: relative; z-index: 1; aspect-ratio: var(--arco-ratio); border-radius: 999px 999px 6px 6px; overflow: hidden;
box-shadow: 0 0 0 1px var(--oro-600);
background: radial-gradient(circle at 58% 24%, rgba(226, 201, 143, .30), rgba(7, 26, 69, .9) 62%, #050B1F); }
.arco__marco::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(226, 201, 143, .25); pointer-events: none; z-index: 3; }
.arco__clip, .arco__clip picture { display: block; width: 100%; height: 100%; }
.arco__img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: transparent; }
/* Velo: degradado de noche arriba y abajo + grano fino por encima de la foto */
.arco__velo { position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(180deg, rgba(5, 11, 31, .28), rgba(5, 11, 31, 0) 34%, rgba(5, 11, 31, .6)); }
.arco__velo::before { content: ""; position: absolute; inset: 0; opacity: .16; background: var(--grano) 0 0 / 220px 220px; }
.arco--foto .arco__img { filter: saturate(.92) brightness(.94); }
/* 7. ANILLOS Y RESPLANDOR ------------------------------------------------ */
/* — círculos concéntricos finos.
Se centra con `translate` (no con transform) para que el movimiento pueda usar transform libremente. */
.anillos { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: var(--anillos-d, 60rem); aspect-ratio: 1; pointer-events: none; }
.anillos > i { position: absolute; border-radius: 50%; border: 1px solid rgba(226, 201, 143, .2); }
.anillos > i:nth-child(1) { inset: 0; border-color: rgba(226, 201, 143, .26); }
.anillos > i:nth-child(2) { inset: 11%; border-color: rgba(226, 201, 143, .18); }
.anillos > i:nth-child(3) { inset: 24%; border-color: rgba(226, 201, 143, .14); }
.anillos > i:nth-child(4) { inset: 39%; border-color: rgba(226, 201, 143, .22); }
/* — círculo de luz radial */
.resplandor { position: absolute; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(226, 201, 143, .26), rgba(226, 201, 143, .09) 55%, rgba(226, 201, 143, 0)); }
/* 8. CALIFICACIÓN Y MAPA ------------------------------------------------- */
.calificacion__estrellas { color: var(--oro-halo); }
.estrella { width: 1.5rem; height: 1.5rem; }
.mapa { border: 1px solid var(--oro-halo); border-radius: 6px; background: var(--fondo-2);
box-shadow: 0 0 0 6px var(--fondo), 0 0 0 7px rgba(226, 201, 143, .35), 0 0 70px rgba(226, 201, 143, .1); }
.mapa--foco { outline: 2px solid var(--oro-halo); }
/* 9. .ir — botones de navegación (Google Maps y Waze), mismo componente en ubicación, pie y contacto */
.ir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.ir__btn { min-height: 3.25rem; gap: .7rem; padding-inline: 1.1rem; }
.ir__ico { flex: none; width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 10. PIE ----------------------------------------------------------------- */
.pie { background: var(--fondo-3); border-top: 1px solid rgba(226, 201, 143, .3); overflow: clip; }
.pie > .contenedor { position: relative; z-index: 1; }
.pie__logo { height: 3.2rem; }
.pie__halo { position: absolute; left: 0; top: 0; width: min(34rem, 120vw); aspect-ratio: 1; translate: -22% -38%; pointer-events: none; z-index: 0; }
.pie__halo.resplandor { background: radial-gradient(closest-side, rgba(226, 201, 143, .2), rgba(226, 201, 143, .06) 55%, rgba(226, 201, 143, 0)); }
.pie__legal { border-top-color: rgba(226, 201, 143, .3); }
/* 11. FOCO Y REDUCED-MOTION ---------------------------------------------- */
:focus-visible { outline: 2px solid var(--oro-halo); outline-offset: 3px; }
iframe:focus-visible { outline: 2px solid var(--oro-halo); outline-offset: 2px; } /* H-4 (auditoría 2): respaldo del contorno del mapa */
.saltar { background: var(--oro-halo); color: var(--fondo); }
::selection { background: var(--oro-halo); color: var(--fondo); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; }
.btn { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } /* sin transform; el color se conserva */
}
/* 12. MOVIMIENTO (v2): tokens e interfaz. Solo interfaz (< 300 ms); lo narrativo vive en js/ (GSAP). ------------- */
:root {
--ease-ui: cubic-bezier(.23, 1, .32, 1);
--ease-revela: cubic-bezier(.165, .84, .44, 1);
--ease-luz: cubic-bezier(.215, .61, .355, 1);
--ease-respira: cubic-bezier(.37, 0, .63, 1);
--d-foco: 120ms; --d-presion: 160ms; --d-hover: 200ms; --d-menu: 240ms;
}
/* Menú móvil: transición (interrumpible) al abrir con puntero o toque; con teclado no se anima. La salida es inmediata (display:none). */
@media (max-width: 899px) {
.js .nav { transition: opacity 200ms var(--ease-ui), transform 200ms var(--ease-ui); }
.js .nav.is-teclado { transition: none; }
@starting-style { .js .nav.is-abierto { opacity: 0; transform: translateY(-8px); } }
}
/* Cursor de luz de la máquina de escribir (solo existe cuando el JS lo crea) */
.tw-c { animation: tw-parpadeo 1s steps(2, jump-none) infinite; }
.tw-b { visibility: hidden; }
@keyframes tw-parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
.tw-c { animation: none; }
.js .nav { transition: opacity 200ms ease; } /* sin desplazamiento: solo fundido */
@starting-style { .js .nav.is-abierto { opacity: 0; transform: none; } }
}
/* Reduced-motion: fundidos de opacidad de 200 ms (ease) al entrar fotos y bloques bajo el pliegue; la clase la ponen halo.js (IntersectionObserver).
Sin js-fundido (JS caído o sin IntersectionObserver) no se oculta nada. Nunca sobre teléfonos, botones de contacto, barra fija ni .ir. */
@media (prefers-reduced-motion: reduce) {
html.js-fundido .fundir { opacity: 0; transition: opacity 200ms ease; }
html.js-fundido .fundir.is-visto { opacity: 1; }
}
/* Correo del pie: en pantallas muy estrechas puede partirse (texto ampliado al 400 %) */
@media (max-width: 420px) { .pie a[href^="mailto"] { overflow-wrap: anywhere; } }