del HTML cuando empiece a haberlo. */ .probador { height: var(--test-scroll); margin-inline: calc(-1 * (var(--gutter) * 2 + var(--col-fol))); } @media (max-width: 720px) { .probador { margin-inline: calc(-1 * var(--gutter)); } } /* --- ÍNDICE DE TRABAJOS ------------------------------------- */ /* Primer bloque tras el hero. Todo con tokens ya existentes. Sin animación: el peso lo llevan la tipografía, el aire y la retícula. La única transición es el color al pasar el cursor, y sólo en dispositivos con puntero fino (nada de estados pegados en táctil). */ .indice { min-height: 100svh; /* Abajo, hueco generoso para que la última fila NO quede tapada por la barra flotante de Safari. env(safe-area-inset-bottom) en este iOS devuelve 0, así que el colchón fijo (sp-7) es lo que de verdad la aparta; el env suma por si acaso en otros dispositivos. */ /* Arriba, colchón moderado (antes sp-7 centrado dejaba el menú a media pantalla del hero, "alejado"). Alineado ARRIBA para que "Trabajos" aparezca justo tras la foto. Abajo, hueco generoso para que la última fila no quede tapada por la barra flotante de Safari. */ padding-block: var(--sp-6) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; justify-content: center; /* el menú queda centrado en la pantalla */ } /* En móvil la sección .landing (vacía) NO debe reservar otra pantalla: la foto ya la da. Colapsándola, el índice sube y aparece tras UNA pantalla —hacia el cambio de foliación a 02— en vez de dos. */ @media (max-aspect-ratio: 3/4) { .landing { min-height: 0; } } .indice__rotulo { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--c-ink); opacity: .55; margin-bottom: var(--sp-5); } .indice__lista { display: block; } .obra { border-top: 1px solid var(--c-rule); } .obra:last-child { border-bottom: 1px solid var(--c-rule); } /* Fila: número mono a la izquierda, nombre grande, meta a la derecha. subgrid no: una retícula propia de 3 pistas basta y es más robusta. */ .obra__enlace { display: grid; grid-template-columns: 3.5ch 1fr auto; align-items: baseline; gap: var(--gutter); padding-block: clamp(var(--sp-4), 4vw, var(--sp-6)); color: var(--c-ink); /* Fuera el relleno gris de iOS al tocar. */ -webkit-tap-highlight-color: transparent; } /* Al tocar (móvil) o pulsar, el texto se pone ROJO, igual que el hover de escritorio. Nada de relleno gris. El elegido se QUEDA rojo mientras el menú se repliega. */ a.obra__enlace:active { color: var(--c-accent); } a.obra__enlace.is-elegido { color: var(--c-accent); } /* REPLIEGUE: al elegir, el menú se pliega hacia arriba y se funde, sobre el velo blanco, antes de navegar. */ .indice.is-replegando { transform-origin: top center; animation: indiceRepliega .42s var(--ease) forwards; } @keyframes indiceRepliega { to { opacity: 0; transform: translateY(-12px) scaleY(.96); } } .obra__num { font-family: var(--f-mono); font-size: var(--fs-small); font-variant-numeric: tabular-nums; opacity: .55; } .obra__nombre { font-size: var(--fs-title); line-height: var(--lh-tight); letter-spacing: -0.01em; } .obra__meta { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; opacity: .55; text-align: right; } /* Interacción sobria: sólo con puntero fino, sólo color. */ @media (hover: hover) and (pointer: fine) { a.obra__enlace { transition: color var(--dur-fast) var(--ease); } a.obra__enlace:hover { color: var(--c-accent); } } /* Ranuras aún sin destino: se leen como huecos, no como enlaces rotos. */ .obra--pendiente .obra__enlace { opacity: .35; cursor: default; } /* Móvil: la meta baja bajo el nombre, no compite por el ancho. */ @media (max-width: 720px) { .obra__enlace { grid-template-columns: 3ch 1fr; row-gap: var(--sp-1); } .obra__meta { grid-column: 2; text-align: left; } } /* --- DIAL · menú radial vivo (Carne y metal) ---------------- */ /* Tecnología invisible: sin cromo, la luz es la interfaz. Colores por token para que herede el tema oscuro. */ /* Fondo en degradado, del negro arriba al gris de abajo (ref. del orbe). Va en la sección de acceso, no en todo el body, para no pisar el tema. */ /* SCROLL BLOQUEADO en la página del dial, POR AHORA: el menú es lo único que hay y no debe desplazarse. Cuando las secciones tengan contenido, quitar este bloque. position:fixed + inset:0 corta el rebote de iOS que overflow:hidden no siempre detiene. El GRADIENTE vive aquí, en el body a pantalla completa: llena de borde a borde sin depender de márgenes de ninguna caja interior. */ html:has(body[data-page="carne-y-metal"]), body[data-page="carne-y-metal"] { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; /* Base BLANCA: enlaza con el fundido a blanco del home. El gradiente oscuro florece encima, radialmente (ver .acceso). */ background: #ffffff; } /* BANDAS DE SEGURIDAD EN BLANCO: los insets superior (notch) e inferior (home indicator) se pintan de blanco, enmarcando el gradiente oscuro. Si el dispositivo no reporta safe-area (env = 0), no se ven; en ese caso hay que darles una altura fija. */ html:has(body[data-page="carne-y-metal"])::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #fff; z-index: 60; pointer-events: none; } html:has(body[data-page="carne-y-metal"])::after { content: ""; position: fixed; bottom: 0; left: 0; right: 0; height: env(safe-area-inset-bottom, 0px); background: #fff; z-index: 60; pointer-events: none; } /* La sección de acceso ocupa la ventana entera y centra el dial. Lleva el GRADIENTE y es TODA la superficie de control (touch-action:none para que ningún gesto se lo lleve el navegador). */ .acceso { position: fixed; inset: 0; display: grid; place-items: center; min-height: 0; padding: 0; touch-action: none; background: radial-gradient(125% 95% at 50% 6%, #101010 0%, #232323 45%, #3a3a3a 100%); } /* ENTRADA: fundido plano de blanco al color del proyecto. Un velo blanco a pantalla completa que se desvanece (~2s), dejando aparecer el gradiente por debajo. Sin bordes, sin iris: sólo el color subiendo. */ body[data-page="carne-y-metal"]::before { content: ""; position: fixed; inset: 0; background: #ffffff; z-index: 50; pointer-events: none; animation: dialFunde 2s var(--ease) forwards; } @keyframes dialFunde { to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { body[data-page="carne-y-metal"]::before { display: none; } } /* El dial es un cuadrado centrado con el lienzo del anillo y, encima, el texto de la sección. Toda la ventana es la superficie de control (ver dial.js), así que aquí sólo se centra y se dimensiona. */ .dial { position: relative; z-index: 2; /* por encima del velo de entrada */ width: min(88vmin, 600px); aspect-ratio: 1 / 1; display: grid; place-items: center; outline: none; touch-action: none; } .dial:focus-visible { outline: 1px solid rgba(255,255,255,.3); outline-offset: 12px; } .dial__lienzo { grid-area: 1 / 1; display: block; } /* Texto central: sólo el nombre de la sección (sin números). Blanco fijo —el dial no sigue el tema—. Oculto hasta que el anillo está dibujado (.is-listo). */ .dial__label { grid-area: 1 / 1; align-self: center; justify-self: center; font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,.55), 0 0 2px rgba(255,255,255,.8); pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); } .dial.is-listo .dial__label { opacity: 1; } /* Al cambiar de sección, el nombre parpadea: se apaga y vuelve. */ .dial.is-listo .dial__label.is-cambio { animation: dialParpadeo var(--dur-base) var(--ease); } @keyframes dialParpadeo { from { opacity: .25; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dial__label { opacity: 1; } } /* La lista fuente del dial se oculta a la vista DESDE EL PRIMER PINTADO (por eso el selector es .dial-fuente, no la clase que añade el JS): así no parpadea al cargar la página antes de que corra dial.js. Sigue en el DOM, accesible a lectores de pantalla. */ .dial-fuente, .dial__lista--oculta { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- VELO DE SALIDA (home → proyecto) ----------------------- */ /* Al elegir un trabajo, cubre todo de blanco antes de navegar, de modo que las letras desaparecen y la página siguiente arranca ya en blanco (que enlaza con la cortina de entrada del proyecto). */ .salida { position: fixed; inset: 0; background: #ffffff; opacity: 0; pointer-events: none; z-index: 100; transition: opacity .5s var(--ease); } .salida.is-activa { opacity: 1; } @media (prefers-reduced-motion: reduce) { .salida { transition: none; } } /* --- PIE ---------------------------------------------------- */ .footer { padding: var(--sp-5) calc(var(--gutter) * 2 + var(--col-fol)); font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); opacity: .5; }