/* DB Project — chrome compartido por las cinco páginas: barra de navegación,
hilo conductor (línea vertical en desktop, barra de progreso en mobile) y
footer. Nada específico de una página vive acá.
Navbar portado de "Resizable Navbar" (db-project-biblioteca,
references/navegacion.md): ancho normal arriba de todo, compactado + blur al
pasar los 100px de scroll. Acá el umbral lo detecta un sentinel con
IntersectionObserver (js/site.js), no un handler de scroll.
Hilo conductor portado de "Tracing Beam" + "Timeline" (references/scroll.md):
línea vertical al costado con un relleno que la recorre siguiendo el scroll. */
/* Las cinco páginas declaran viewport-fit=cover, así que el contenido llega
hasta los bordes físicos de la pantalla. Todo lo que está fijo tiene que
descontar el recorte: sin esto, en un iPhone con notch la píldora queda
parcialmente debajo de la barra de estado, y en horizontal se mete abajo del
recorte lateral. Los insets valen 0 en cualquier pantalla sin recorte, así
que no cambian nada en el resto de los dispositivos. */
#site-nav {
position: fixed;
top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
left: 0;
right: 0;
z-index: var(--z-nav);
display: flex;
justify-content: center;
padding-left: max(var(--container-pad), env(safe-area-inset-left, 0px));
padding-right: max(var(--container-pad), env(safe-area-inset-right, 0px));
pointer-events: none; /* solo la píldora recibe clicks */
}
/* ── El velo del tope ────────────────────────────────────────────────────────
La píldora flota y su radio es 999px: sus dos puntas son semicírculos, así
que arriba y abajo quedan huecos triangulares sin vidrio. Una línea de título
que scrollea por ahí no pasa "detrás de la barra": se lee CORTADA, con las
puntas asomando por los costados. Y a 1440 pasa algo peor: el titular de 96px
queda seccionado a media palabra, entero a la izquierda de la píldora y
cortado donde la píldora está.
La versión anterior lo atacaba con tres efectos encima: un gradiente al 82%,
un backdrop-filter de 6px y una máscara para que no terminara en borde recto.
Seguía sin alcanzar —a 82% un blanco de 96px se lee igual— y el
backdrop-filter es una capa de composición recalculada en cada frame de
scroll, en un sitio cuyo problema medido es el hilo principal.
Ahora es UNA cosa: grafito pleno a la altura de la barra, que se desvanece
apenas debajo. Tapa de verdad, no cuesta nada por frame, y no hay máscara que
mantener. */
#site-nav::before {
content: "";
position: absolute;
inset-inline: 0;
top: calc(-1 * (var(--space-3) + env(safe-area-inset-top, 0px)));
/* La banda opaca tiene que pasar el BORDE INFERIOR DE LA PÍLDORA antes de
empezar a desvanecerse. Con el corte al 68% el degradado arrancaba a los
88px y la píldora termina a los 88-93: las letras se leían justo en el
tramo de desvanecido. Verificado pintando el velo de magenta: tapa bien,
sólo empezaba a irse demasiado pronto. */
height: calc(100% + var(--space-3) + env(safe-area-inset-top, 0px) + var(--space-6));
background: linear-gradient(to bottom,
var(--db-grafito) 0,
var(--db-grafito) 74%,
transparent 100%);
pointer-events: none;
}
.nav__pill {
pointer-events: auto;
position: relative;
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
border-radius: 999px;
transition: gap 0.35s cubic-bezier(0.22, 1, 0.36, 1),
padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
/* La barra es el único elemento que existe igual en las cinco páginas. Con un
view-transition-name propio, el navegador la trata como el MISMO objeto al
navegar y la interpola en vez de destruirla y reconstruirla: por eso deja
de "saltar" entre Inicio, Servicios, Proceso y Proyectos. El sitio ya
declara @view-transition en css/base.css; esto le dice qué continuar. */
view-transition-name: db-barra;
}
/* El vidrio de la píldora es una capa aparte, no el fondo de .nav__pill.
Dos razones, las dos concretas:
1. En el Inicio la barra se materializa al scrollear. Si el fade fuera sobre
.nav__pill, el logo que viaja adentro heredaría opacidad 0 y no se vería
durante todo el viaje — que es justo el efecto principal de la página.
2. backdrop-filter crea un contexto de apilado y un bloque contenedor; con
el filtro en una capa hija, el subárbol que anima GSAP queda limpio. */
.nav__glass {
position: absolute;
inset: 0;
border-radius: inherit;
/* OPACO. Tercer intento sobre lo mismo: 72% se leía sucio, se subió a 88% y
el H1 del Inicio SEGUÍA leyéndose a través. Medido con sonda: el solape
arranca en scrollY=100 a 1440px y en scrollY=140 a 375px, y dura hasta 700
y 980 respectivamente — o sea toda la ventana en la que el titular de 96px
pasa por detrás de la barra. Un blur de 14px no tapa tipografía de ese
tamaño; ningún porcentaje intermedio lo iba a arreglar.
De paso se va el backdrop-filter: una capa de composición recalculada en
cada frame de scroll, en un sitio cuyo problema medido es el hilo
principal. Grafito pleno hace el mismo trabajo por cero. */
background: var(--db-grafito);
border: 1px solid color-mix(in srgb, var(--db-blanco) 12%, transparent);
transition: background-color 0.35s ease;
pointer-events: none;
}
.nav__pill > *:not(.nav__glass) { position: relative; }
/* Compactado: la píldora baja de alto y se achica entera — el logo incluido,
porque escala con ella. Se escala la píldora en vez de tocar el alto del logo
a propósito: en el Inicio ese logo lo controla GSAP Flip, y cambiarle el alto
por CSS le movería el piso a la medición de Flip a mitad del viaje. */
#site-nav.is-compact .nav__pill {
gap: var(--space-2);
padding: 2px 2px 2px var(--space-2);
transform: scale(0.92);
}
/* El slot es el destino del logo cuando viaja desde el hero (GSAP Flip,
js/home.js). En las otras cuatro páginas ya nace con el logo adentro. */
.nav__logo-slot {
display: flex;
align-items: center;
min-width: 0;
}
/* El área táctil del logo se extiende con un ::after, no agrandando su caja:
en el Inicio esta es el objetivo de GSAP Flip, y cambiarle la caja le
movería el piso a la medición del viaje. El pseudo-elemento no participa del
layout, así que Flip mide exactamente lo mismo que antes.
(js/home.js le saca el overflow:clip de la entrada cuando esta termina — con
el clip puesto, este ::after quedaría recortado y el área no existiría.) */
.nav__logo {
position: relative;
display: block;
line-height: 0;
}
.nav__logo::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
/* 48 y no 44, por lo mismo que .nav__links a: la barra compacta escala a 0.92
y el objetivo que importa es el que termina en pantalla. 44 x 0,92 = 40,5px,
por debajo del mínimo — medido con elementFromPoint y daba 41. 48 x 0,92 =
44,2px, que sí cumple con la barra compactada, que es como pasa la mayor
parte del tiempo. */
height: 48px;
transform: translateY(-50%);
}
.nav__logo img { height: 28px; width: auto; }
.nav__links {
display: none;
position: relative;
/* El gap baja de 24 a 16 porque cada link ahora suma 7px de padding a cada
lado: el espacio visible entre textos queda igual que antes. */
gap: var(--space-2);
}
/* Indicador de página activa. Un solo elemento que se desliza: js/nav.js lo
mide contra el link activo y lo mueve con translateX + scaleX, nunca con
left/width — esas dos disparan recálculo de layout en cada frame, y esto se
anima mientras la barra está fija sobre contenido que scrollea. */
.nav__indicador {
position: absolute;
left: 0;
bottom: 6px;
width: 1px;
height: 2px;
border-radius: 2px;
background: var(--db-acento);
transform-origin: left center;
opacity: 0;
pointer-events: none;
}
/* 48px, no 44: la barra compacta escala a 0.92, y el objetivo táctil que
importa es el que termina en pantalla, no el nominal. 44 x 0.92 = 40,5px, por
debajo del mínimo. 48 x 0.92 = 44,2px, que sí cumple con la barra compactada,
que es como pasa la mayor parte del tiempo.
El padding lateral es por lo mismo: "Inicio" medía 34px de ancho. */
.nav__links a {
color: var(--db-texto-secundario-sobre-oscuro);
text-decoration: none;
font-size: var(--db-fs-small);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding-inline: 7px;
transition: color 0.2s ease;
}
/* El link responde con algo más que un cambio de color: el texto se adelanta y
sube apenas. Va sobre el , que no anima GSAP, así que la transición de
transform acá no le disputa el dueño a nadie. */
.nav__links a { transition: color 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.nav__links a:hover,
.nav__links a:focus-visible { color: var(--db-blanco); transform: translateY(-2px); }
.nav__links a[aria-current="page"] { color: var(--db-acento); }
@media (prefers-reduced-motion: reduce) {
.nav__links a:hover,
.nav__links a:focus-visible { transform: none; }
}
@media (min-width: 860px) {
.nav__links { display: flex; }
}
/* ── Hilo conductor ───────────────────────────────────────────────────────
Desktop: línea vertical fina a la izquierda, con un nodo por sección que se
enciende al llegar. Mobile: la misma escala convertida en barra horizontal
fina arriba de todo. Es un solo componente, no dos. */
.thread__list { list-style: none; margin: 0; padding: 0; }
.thread__fill {
background: var(--db-acento);
will-change: transform;
}
@media (min-width: 1024px) {
#thread {
position: fixed;
/* 16 y no 32: el nodo mide 44px de ancho para poder tocarse, así que el
índice ocupa de 16 a 60 y la columna de 64 —donde la 05 se sale de la
grilla— queda libre. */
left: max(var(--space-2), env(safe-area-inset-left, 0px));
top: 50%;
transform: translateY(-50%);
z-index: var(--z-thread);
}
.thread__line {
position: absolute;
left: 3px;
top: 4px;
bottom: 4px;
width: 1px;
background: color-mix(in srgb, var(--db-gris-medio) 40%, transparent);
}
.thread__fill {
position: absolute;
inset: 0;
transform: scaleY(0);
transform-origin: top;
}
.thread__list {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.thread__dot {
position: relative;
display: flex;
align-items: center;
text-decoration: none;
padding-block: var(--space-1);
/* 44px exactos: ni el ancho del nombre ni el del punto.
Antes el medía punto + nombre completo, y como el nombre vive con
opacity:0 el resultado era una columna invisible de ~150px capturando el
mouse sobre el contenido de la página. Al sacar el nombre del flujo el
link quedó midiendo lo que mide el punto: 7px de ancho, un objetivo
imposible. 44 es el piso de área táctil y deja libre la columna donde la
05 se sale de la grilla (su contenido arranca en 64). */
width: 44px;
}
.thread__dot::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
background: var(--db-gris-medio);
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease;
}
.thread__dot:hover::before,
.thread__dot:focus-visible::before,
.thread__dot.is-active::before {
background: var(--db-acento);
transform: scale(1.6);
}
/* Al LLEGAR a una sección, su punto da un pulso corto y se queda quieto. Antes
latía en loop infinito: un punto que late para siempre deja de señalar
"llegaste acá" y pasa a ser un tic en el borde de la pantalla, compitiendo
con el contenido durante todo el rato que dure la sección.
Una sola vuelta, y se vuelve a disparar sólo cuando la clase se pone de
nuevo — o sea, cada vez que se llega a la sección, que es cuando informa.
El pulso va en box-shadow y no en escala para no pelearse con el scale(1.6)
de arriba, que es el que marca "activo".
La regla global de prefers-reduced-motion en css/base.css ya lo desactiva. */
.thread__dot.is-active::before {
animation: db-latido 0.9s ease-out 1;
}
@keyframes db-latido {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--db-acento) 45%, transparent); }
70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--db-acento) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--db-acento) 0%, transparent); }
}
/* El nombre sale del flujo del link: es una ayuda que aparece al lado, no
parte del objetivo que se apunta. pointer-events:none para que nunca
vuelva a robarle el mouse a lo que tiene detrás. */
.thread__label {
position: absolute;
left: calc(7px + var(--space-2));
top: 50%;
color: var(--db-texto-sobre-oscuro);
font-family: var(--db-font-mono);
font-size: var(--db-fs-eti);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translate(-6px, -50%);
transition: opacity 0.25s ease, transform 0.25s ease;
}
/* El nombre de la sección es una ayuda bajo demanda, no un rótulo fijo. Con
.is-active incluido acá, el label de la sección en curso quedaba siempre
encendido; como #thread es fixed contra el borde izquierdo y el label es
nowrap, una palabra larga ("Comparación") se montaba sobre la columna de
texto y se leía cortada. El punto activo ya se distingue por color y
escala: el nombre aparece solo al apuntarlo o enfocarlo. */
.thread__dot:hover .thread__label,
.thread__dot:focus-visible .thread__label {
opacity: 1;
transform: translate(0, -50%);
}
.thread__dot.is-active:hover .thread__label,
.thread__dot.is-active:focus-visible .thread__label { color: var(--db-acento); }
}
@media (max-width: 1023px) {
#thread {
position: fixed;
/* Pegada al borde de la zona segura, no al borde físico: sin esto la barra
de progreso queda tapada por la barra de estado y no se ve nunca. */
top: env(safe-area-inset-top, 0px);
left: 0;
right: 0;
height: 3px;
z-index: var(--z-thread);
}
.thread__list { display: none; }
.thread__line { position: absolute; inset: 0; display: block; }
.thread__fill {
position: absolute;
inset: 0;
transform: scaleX(0);
transform-origin: left;
}
}
/* ── Footer ───────────────────────────────────────────────────────────────────
Era una franja enorme con todo pegado a la izquierda: 64px de padding arriba
y abajo, cuatro bloques apilados en una sola columna al borde, y ninguna
contención. Se leía como una sexta sección de la página en vez de como su
cierre.
Ahora es un borde de cierre: el mismo ancho y el mismo margen lateral que el
resto del sitio (.container), tres columnas de links más la firma, y un pie
separado por una línea fina con la firma y el año. El alto baja a la mitad. */
#site-footer {
border-top: 1px solid var(--db-linea);
/* El indicador de inicio del iPhone se superpone a lo último de la página: el
pie del footer es justo lo último. */
padding-block: var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
/* Izquierda: todo lo que es navegación e información, en columnas.
Derecha: la firma del estudio, sola. */
.footer__inner {
display: grid;
gap: var(--space-5);
}
@media (min-width: 960px) {
.footer__inner {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-6);
align-items: start;
}
}
.footer__cols {
display: grid;
gap: var(--space-5);
}
@media (min-width: 560px) {
.footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
.footer__cols {
/* La marca se lleva más ancho que las columnas de links: es lo único con
prosa adentro. */
grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
column-gap: var(--space-4);
}
}
.footer__logo { height: 24px; width: auto; margin-bottom: var(--space-2); }
/* Nombres y lugar: metadatos, no prosa. Van en mono como el resto de las
etiquetas y los datos medidos del sitio. */
.footer__names {
font-family: var(--db-font-mono);
color: var(--db-gris-medio);
font-size: 0.75rem;
line-height: 1.6;
letter-spacing: 0.04em;
margin: 0;
max-width: 26ch;
}
/* El rótulo de cada columna. Va en y no en