/* =======================================================
   BASE COMÚN · ÍNDICE DE TRABAJOS
   ======================================================= */

/* --- 1. TOKENS --- */
/* Mismos tokens del hero: negro, grises y blanco, Geist con tracking cerrado */
:root {
    --negro: #0B0B0B;
    --grafito: #1A1A19;
    --gris-oscuro: #3A3A38;
    --gris-medio: #8E8E8B;
    --gris-claro: #D9D9D6;
    --blanco: #F5F5F3;
    --sans: 'Geist', system-ui, sans-serif;
    --mono: 'Geist Mono', ui-monospace, monospace;
    --tracking-display: -0.065em;
    --tracking-titulo: -0.045em;
    --margen: clamp(16px, 2.2vw, 32px);
    --medianil: 16px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-morph: cubic-bezier(0.76, 0, 0.24, 1);
    --hover-lento: cubic-bezier(0.7, 0, 0.2, 1);
}

/* --- 2. BASE --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--negro); color: var(--blanco); font: 15px/1.5 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.gris { color: var(--gris-medio); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; border-radius: 2px; }

/* =======================================================
   BARRA SUPERIOR (CONTEXTO)
   ======================================================= */
/* Versión compacta de la navegación del hero, sobre negro */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px var(--margen); mix-blend-mode: difference; color: #fff; }
.barra .logo { font-weight: 500; font-size: 16px; letter-spacing: -0.035em; }
.barra .logo span { opacity: 0.45; }
.barra ul { display: flex; gap: 48px; list-style: none; }
.barra ul a { font-family: 'Inter', sans-serif; font-weight: 270; font-style: italic; font-size: 1.05rem; letter-spacing: -0.045em; }
.barra .der { justify-self: end; }

/* =======================================================
   LOGO · MARCAS DE CORTE
   ======================================================= */
/* El nombre entre cuatro marcas de corte, del mismo gris que el punto. Viven en un pseudo-elemento, así ninguna página
   cambia su HTML, y cuelgan fuera de la caja: el texto sigue alineado a la grilla. El trazo nunca baja de 1 px ni los
   brazos de 4 px, para que se vean a 16 px. La firma del footer usa las mismas marcas (su color y su caja van en el home) */
:is(.nav, .barra) .logo { position: relative; justify-self: start; line-height: 1; }
:is(.nav, .barra) .logo::before, .pie-marca::before {
    content: ''; position: absolute; inset: -0.21em -0.31em -0.39em; pointer-events: none;
    --t: max(1px, 0.018em); --b: max(4px, 0.09em); --c: linear-gradient(currentColor, currentColor);
    background: var(--c) left top / var(--b) var(--t), var(--c) left top / var(--t) var(--b),
                var(--c) right top / var(--b) var(--t), var(--c) right top / var(--t) var(--b),
                var(--c) left bottom / var(--b) var(--t), var(--c) left bottom / var(--t) var(--b),
                var(--c) right bottom / var(--b) var(--t), var(--c) right bottom / var(--t) var(--b);
    background-repeat: no-repeat;
}
/* En la barra, las marcas se cierran sobre el nombre al pasar el mouse */
:is(.nav, .barra) .logo::before { opacity: 0.45; transition: inset 200ms var(--ease); }
@media (hover: hover) { :is(.nav, .barra) .logo:hover::before { inset: -0.13em -0.23em -0.31em; } }
@media (prefers-reduced-motion: reduce) { :is(.nav, .barra) .logo::before { transition: none; } }
/* En pantallas táctiles el área de toque del logo crece a 44 px de alto sin moverlo */
@media (hover: none) and (pointer: coarse) { :is(.nav, .barra) .logo::after { content: ''; position: absolute; inset: -14px -10px; } }

/* =======================================================
   CABECERA DE SECCIÓN
   ======================================================= */
.cabecera { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); padding: 120px var(--margen) 48px; align-items: end; }
.cabecera .num { grid-column: 1 / span 3; }
.cabecera h2 { grid-column: 4 / span 6; font-size: clamp(40px, 5.4vw, 88px); font-weight: 500; letter-spacing: var(--tracking-titulo); line-height: 0.95; }
.cabecera p { grid-column: 10 / -1; color: var(--gris-medio); font-size: 14px; max-width: 32ch; justify-self: end; }

/* =======================================================
   ARCHIVO (COMÚN A LAS TRES DIRECCIONES)
   ======================================================= */
.archivo { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); padding: 96px var(--margen) 140px; border-top: 1px solid #262625; }
.archivo .num { grid-column: 1 / span 3; }
.archivo ul { grid-column: 4 / -1; list-style: none; border-top: 1px solid #262625; }
.archivo li a { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #262625; transition: color 500ms var(--hover-lento), padding 700ms var(--hover-lento); }
.archivo .a-nombre { font-size: clamp(20px, 1.9vw, 30px); font-weight: 500; letter-spacing: -0.035em; }
@media (hover: hover) { .archivo ul:hover a { color: var(--gris-oscuro); } .archivo ul:hover a .a-disc, .archivo ul:hover a .a-anio { color: var(--gris-oscuro); } .archivo ul a:hover { color: var(--blanco); padding-left: 12px; } .archivo ul a:hover .a-disc, .archivo ul a:hover .a-anio { color: var(--gris-medio); } }

/* --- 1. MINIATURA DEL ARCHIVO --- */
/* Sigue al cursor con inercia y aparece con una leve escala */
.miniatura { position: fixed; top: 0; left: 0; z-index: 60; width: clamp(200px, 18vw, 300px); aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; pointer-events: none; opacity: 0; scale: 0.9; transition: opacity 450ms var(--hover-lento), scale 600ms var(--hover-lento); }
.miniatura.on { opacity: 1; scale: 1; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }

/* =======================================================
   PÁGINA DE CASO DE PRUEBA (DESTINO DE LA TRANSICIÓN)
   ======================================================= */
/* Capa fija que se abre al presionar un proyecto. El diseño real del caso es la sección 3 */
.caso { position: fixed; inset: 0; z-index: 100; background: var(--negro); overflow-y: auto; visibility: hidden; }
.caso.abierto { visibility: visible; }
.caso-media { position: relative; height: 78svh; overflow: hidden; }
.caso-media img { width: 100%; height: 100%; object-fit: cover; }
.caso-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 11, 11, 0.75), rgba(11, 11, 11, 0) 45%); }
.caso-titulo { position: absolute; left: var(--margen); bottom: 28px; z-index: 2; font-size: clamp(56px, 10vw, 172px); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 0.85; transform-origin: 0 100%; }
.caso-volver { position: fixed; top: 14px; right: var(--margen); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(245, 245, 243, 0.35); border-radius: 999px; background: rgba(11, 11, 11, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; }
.caso-cuerpo { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); padding: 40px var(--margen) 120px; }
.caso-ficha { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--medianil); border-top: 1px solid #262625; padding-top: 14px; }
.caso-ficha div { display: flex; flex-direction: column; gap: 4px; }
.caso-intro { grid-column: 4 / span 7; margin-top: 72px; font-size: clamp(24px, 2.4vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.caso-nota { grid-column: 4 / span 6; margin-top: 40px; color: var(--gris-medio); font-size: 14px; }
.caso-segunda { grid-column: 1 / -1; margin-top: 72px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; }
.caso-segunda img { width: 100%; height: 100%; object-fit: cover; }
.caso .aparece { opacity: 0; transform: translateY(24px); }

/* --- 1. CLON QUE VIAJA --- */
/* La imagen presionada se clona y viaja desde su lugar hasta la portada del caso */
.viajero { position: fixed; z-index: 120; overflow: hidden; pointer-events: none; }
.viajero img { width: 100%; height: 100%; object-fit: cover; }

/* --- 2. BLOQUEO DE SCROLL (IOS) --- */
/* Se fija el body con top negativo en vez de overflow hidden, según los aprendizajes del repo */
body.bloqueado { position: fixed; left: 0; right: 0; }

/* =======================================================
   TRANSICIÓN AL CASO
   ======================================================= */

/* --- 1. RELEVO ENTRE PÁGINAS --- */
/* El paso lo arman el home (inicio-works.js) y el caso (caso-llegada.js): el último cuadro del home y el primero del
   caso son el mismo, así que el cambio de página no se ve. Donde hay View Transitions entre páginas, un fundido corto
   cubre cualquier diferencia mínima; con movimiento reducido se navega sin transición */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: linear; }

/* --- 2. EL PRIMER CUADRO DEL CASO --- */
/* Mientras el script del hero no toma la pieza, una copia quieta ocupa su lugar exacto (las medidas y la captura las
   escribe caso-llegada.js), y lo demás del hero espera escondido. La barra del sitio entra después, con el caso */
.llega-espera::after { content: ''; position: fixed; z-index: 60; left: var(--ll-x); top: var(--ll-y); width: var(--ll-w); height: var(--ll-h); background: var(--ll-img) 50% 0 / cover no-repeat; pointer-events: none; }
.llega-caso .barra { opacity: 0; }

/* =======================================================
   VISTA MÓVIL
   ======================================================= */
@media (max-width: 768px) {
    .barra ul { display: none; }
    .barra { grid-template-columns: 1fr 1fr; }
    .cabecera, .archivo, .caso-cuerpo { grid-template-columns: repeat(4, 1fr); }
    .cabecera .num, .cabecera h2, .cabecera p, .archivo .num, .archivo ul { grid-column: 1 / -1; }
    .cabecera p { justify-self: start; margin-top: 16px; }
    .cabecera h2 { margin-top: 12px; }
    .archivo ul { margin-top: 20px; }
    .archivo li a { grid-template-columns: 1fr auto; }
    .archivo .a-disc { display: none; }
    .caso-media { height: 62svh; }
    .caso-ficha { grid-template-columns: 1fr 1fr; row-gap: 18px; }
    .caso-intro, .caso-nota { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}