/* ================================================================== Xevi Machado — portfolio Blanco, sin cajas y sin líneas. La jerarquía la sostienen el tamaño tipográfico, la alineación y el espacio negativo. Barras fijas en negativo con mix-blend-mode. Una grotesca + una monoespaciada. ================================================================== */ :root { --w: #ffffff; --ink: #111111; --gray: #6f6f6f; /* 5.0:1 sobre blanco; #8a8a8a se quedaba en 3.45 */ --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --pad: clamp(16px, 3.2vw, 46px); --bar: 40px; --gap: clamp(14px, 1.6vw, 26px); /* curva y duraciones únicas en todo el sitio */ --ease: cubic-bezier(.16, 1, .3, 1); --d-hover: 320ms; --d-reveal: 760ms; --t-display: clamp(40px, 8.4vw, 124px); --t-title: clamp(36px, 7vw, 104px); --t-lead: clamp(16px, 1.35vw, 21px); --t-body: clamp(13px, .92vw, 14.5px); --t-mono: 10px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--w); } /* toda sección enlazable arranca por debajo de la barra fija */ .sec, .hgal, section[id], [id] { scroll-margin-top: calc(var(--bar) + clamp(20px, 4vh, 48px)); } body { background: var(--w); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: 1.5; font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; padding-bottom: var(--bar); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ::selection { background: var(--ink); color: var(--w); } /* Foco visible para quien navega con teclado. Sin esto el recorrido con tabulador es invisible, que es una barrera real de accesibilidad. */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; } .hg-item:focus-visible, .lbx img:focus-visible { outline-offset: 6px; } /* salto al contenido: primer tabulador de la pagina */ .skip { position: fixed; top: 8px; left: 8px; z-index: 3000; background: var(--ink); color: var(--w); padding: 10px 14px; transform: translateY(-200%); transition: transform var(--d-hover) var(--ease); } .skip:focus { transform: none; } /* ------------------------------------------------------------ tipos */ .m { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; line-height: 1.6; } .g { color: var(--gray); } .wrap { padding-inline: var(--pad); } .mw { max-width: 1680px; margin-inline: auto; } h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; line-height: .96; } /* ---------------------------------------------------------- reveals */ .anim .rv { opacity: 0; transform: translateY(14px); } .anim .rv.in { opacity: 1; transform: none; transition: opacity var(--d-reveal) var(--ease) var(--d, 0ms), transform var(--d-reveal) var(--ease) var(--d, 0ms); } .anim .clip { overflow: hidden; display: block; } .anim .clip > span { display: block; transform: translateY(102%); } .anim .clip.in > span { transform: none; transition: transform var(--d-reveal) var(--ease) var(--d, 0ms); } /* La clase .anim la pone main.js al arrancar, NO el script del . Así, si main.js no llega a cargar o peta, nada queda oculto: el contenido se ve entero sin animación en vez de desaparecer. Revelado de fotografía. REGLA CRÍTICA: el elemento observado nunca se recorta. El recorte va en un hijo .mask. Si se recortara el propio observado, su caja visible sería cero, IntersectionObserver reportaría intersección cero, no añadiría .in y el recorte no se quitaría nunca: la imagen quedaba invisible para siempre. */ .anim .mask { display: block; overflow: hidden; clip-path: inset(0 0 100% 0); } .anim .mask img { transform: scale(1.04); } .anim .in .mask { clip-path: inset(0 0 0 0); transition: clip-path var(--d-reveal) var(--ease) var(--d, 0ms); } .anim .in .mask img { transform: none; transition: transform var(--d-reveal) var(--ease) var(--d, 0ms); } @media (prefers-reduced-motion: reduce) { .anim .rv, .anim .clip > span, .anim .mask img { opacity: 1; transform: none; } .anim .mask { clip-path: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } .noanim *, .noanim *::before, .noanim *::after { animation: none !important; transition: none !important; } .noanim .rv, .noanim .clip > span, .noanim .mask img { opacity: 1 !important; transform: none !important; } .noanim .mask { clip-path: none !important; } /* --------------------------------- barras fijas, sin caja ni fondo */ /* Texto blanco + difference: sobre papel blanco se lee negro y sobre una foto oscura se vuelve claro, sin fondo de por medio. */ .bar { position: fixed; left: 0; right: 0; z-index: 1000; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: var(--bar); padding-inline: var(--pad); background: transparent; color: #fff; mix-blend-mode: difference; pointer-events: none; /* solo los enlaces reciben el ratón */ /* capa propia: evita artefactos de subpíxel al mezclar sobre fotos */ transform: translateZ(0); -webkit-font-smoothing: subpixel-antialiased; } .bar a, .bar button { pointer-events: auto; } .bar-t { top: 0; } .bar-b { bottom: 0; } .bar .l { justify-self: start; } .bar .c { justify-self: center; text-align: center; } .bar .r { justify-self: end; text-align: right; } .bar nav { display: flex; gap: clamp(10px, 1.4vw, 22px); } .bar a { transition: opacity var(--d-hover) var(--ease); } .bar a:hover { opacity: .45; } .bar .brand { font-weight: 600; letter-spacing: .02em; } .bar .brand sup { font-size: .8em; } .burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px 0 10px 14px; justify-self: end; color: inherit; /* sin esto hereda buttontext y difference lo vuelve invisible */ } .burger span { display: block; width: 18px; height: 1px; background: currentColor; transition: transform var(--d-hover) var(--ease); } .burger span + span { margin-top: 5px; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); } .mm[hidden] { display: none; } .mm { position: fixed; inset: 0; z-index: 900; background: var(--w); display: flex; flex-direction: column; justify-content: center; padding: var(--pad); } .mm a { font-size: clamp(30px, 9vw, 48px); font-weight: 600; letter-spacing: -.03em; line-height: 1.45; opacity: 0; transform: translateY(12px); display: flex; align-items: baseline; gap: .7em; } .mm a i { font-family: var(--mono); font-size: var(--t-mono); font-style: normal; color: var(--gray); } .mm.open a { animation: mmi .45s var(--ease) forwards; } .mm.open a:nth-child(1) { animation-delay: .03s; } .mm.open a:nth-child(2) { animation-delay: .07s; } .mm.open a:nth-child(3) { animation-delay: .11s; } .mm.open a:nth-child(4) { animation-delay: .15s; } @keyframes mmi { to { opacity: 1; transform: none; } } .mm-f { margin-top: 34px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } /* sin esto heredan el tamaño gigante de .mm a */ .mm-f a { font-family: var(--mono); font-size: var(--t-mono); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; line-height: 1.7; color: var(--gray); display: block; } /* con el menú abierto, las barras se apartan para no pisar los enlaces */ .menu-open .bar-t .brand, .menu-open .bar-b { opacity: 0; pointer-events: none; } .bar-t .brand, .bar-b { transition: opacity var(--d-hover) var(--ease); } /* ------------------------------------------------------------ hero */ .hero { position: relative; min-height: 100svh; /* relleno simetrico y pie fuera del flujo: el bloque cae en el centro real */ padding-block: calc(var(--bar) + 16px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .hero-top { display: flex; flex-direction: column; align-items: center; gap: 0; } .hero-name { font-size: var(--t-display); font-weight: 600; } .hero-name .ast { font-size: .3em; vertical-align: super; line-height: 0; } .hero-sub { margin-top: 1.6em; max-width: 26em; color: var(--gray); margin-inline: auto; } .hero-meta { margin-top: 2.2em; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; } .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; animation: pl 2.4s ease-in-out infinite; } @keyframes pl { 50% { opacity: .18; } } .hero-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(22px, 5vh, 46px); display: flex; justify-content: space-between; gap: 20px; } /* flecha viva: el hero deja de parecer una postal quieta */ .hero-foot .cue { display: inline-block; animation: cue 2.1s var(--ease) infinite; } @keyframes cue { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(5px); opacity: 1 } } /* -------------------------------------------------------- secciones */ .sec { padding-top: clamp(90px, 20vh, 240px); } .sec-h { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 90px); align-items: start; padding-bottom: clamp(40px, 8vh, 100px); } .sec-t { font-size: var(--t-title); font-weight: 600; letter-spacing: -.04em; line-height: .88; } .sec-x p { font-size: var(--t-lead); line-height: 1.45; max-width: 34em; } .sec-x p + p { margin-top: 1.1em; font-size: var(--t-body); } /* ---------------------- galería horizontal movida por scroll vertical Un solo componente: indice de proyectos, retratos y comercial. La pista se mueve con inercia (persigue el objetivo, no lo iguala) y cada imagen escala de forma CONTINUA segun su distancia al centro: pequenas en los bordes, grandes en el centro. Altura fija y ancho automatico, asi ninguna foto se recorta nunca. */ .hgal { position: relative; /* Area objetivo de la imagen centrada, como fraccion del alto de pantalla: el lado de un cuadrado equivalente. 0.52 => una vertical ~63vh de alto. */ --area: 0.52; --smin: 0.28; /* en el borde, como fraccion de su propio tamano centrado */ } .hgal-sticky { position: sticky; top: 0; height: 100svh; /* La pista se centra sola en la pantalla. El pie va absoluto abajo: si estuviera en el flujo, empujaria las imagenes por encima del centro. */ display: grid; place-items: center; overflow: hidden; } .hgal-track { position: relative; /* referencia de offsetLeft para el JS */ display: flex; /* hueco generoso: la central crece un 30 % y sin esto invade a la vecina */ gap: var(--hg-gap, clamp(58px, 11.5vw, 205px)); padding-inline: 50vw; /* la primera y la ultima llegan al centro */ align-items: center; will-change: transform; } .hg-item { flex: 0 0 auto; position: relative; /* referencia del rotulo, que va absoluto */ transform-origin: center center; /* el JS escribe estas tres; el CSS solo las compone */ transform: translateY(var(--y, 0)) scale(var(--s, 1)); opacity: var(--o, 1); } .hg-item img { /* Altura base unica para las tres galerias. El tamano real en el centro lo calcula el JS igualando AREA, no altura: una apaisada y una vertical ocupan lo mismo en pantalla y las secciones se leen como un solo sistema. */ height: clamp(130px, 24vh, 265px); width: auto; max-width: none; object-fit: contain; /* nunca recorta */ filter: contrast(var(--c, 1)); } .hg-cap { /* Absoluto y fuera del flujo: si contara para la altura del item, al centrarlo quedaria centrada la foto MAS el texto, y la imagen se iba por encima del centro de la pantalla. */ position: absolute; top: 100%; left: 0; right: 0; display: block; padding-top: 10px; text-align: center; opacity: var(--o, 1); /* contra-escala: el item crece, el rotulo se queda del mismo tamano */ transform: scale(calc(1 / var(--s, 1))); transform-origin: top center; } /* la lupa solo donde el clic abre el visor; en proyectos el clic navega */ [data-lb] .hg-item .mask { cursor: zoom-in; } .hgal-foot { position: absolute; left: var(--pad); right: var(--pad); /* por encima de la barra fija de abajo, o se pisan */ bottom: calc(var(--bar) + clamp(14px, 3vh, 34px)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; width: auto; } .hgal-foot > :first-child { justify-self: start; } .hgal-foot > .hg-now { justify-self: center; } .hgal-foot > .hg-prog { justify-self: end; } .hg-now { font-variant-numeric: tabular-nums; } .hg-now b { font-weight: 400; color: var(--ink); } /* Las portadas de proyecto son apaisadas: a la misma altura salen mucho mas anchas que un retrato y, al escalar a 1,58, invadian a la vecina. Se les da altura propia para que su ancho quede en linea con el resto. */ /* solo son 6 portadas: cabe darles mas aire, y asi ni con dos casi centradas a la vez se tocan */ .hg-prog { display: block; width: min(220px, 30vw); height: 1px; background: rgba(17,17,17,.16); } .hg-prog i { display: block; height: 100%; width: 0; background: var(--ink); } /* --------------------------------------------------------- galería */ /* ------------------------------------------- vista mosaico y arrastre */ /* el boton vive en el pie, con la misma micro-tipografia que el resto */ .hg-lbl { display: inline-flex; align-items: baseline; gap: 14px; } .hg-view { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink); border-bottom: 1px solid currentColor; line-height: 1.2; transition: opacity var(--d-hover) var(--ease); } .hg-view:hover { opacity: .45; } /* arrastre horizontal: el eje vertical sigue siendo del navegador */ .hgal-track { touch-action: pan-y; } .hgal.dragging .hgal-track { cursor: grabbing; } .hgal.dragging .hg-item { transition: none; } /* ---- mosaico ---- No se usa `columns`: reparte en vertical y deja los pies de columna desiguales, que es el hueco blanco. Aqui son columnas flex y el JS mete cada foto en la mas corta, asi acaban casi a la misma altura. */ .hgal.mosaic { height: auto !important; } .hgal.mosaic .hgal-sticky { position: static; height: auto; overflow: visible; display: block; padding-block: clamp(20px, 4vh, 44px) 0; } .hgal.mosaic .hgal-track { display: flex; align-items: flex-start; gap: var(--mg, clamp(18px, 2.2vw, 38px)); padding-inline: var(--pad); max-width: 1680px; margin-inline: auto; transform: none !important; touch-action: auto; } .hg-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--mg, clamp(18px, 2.2vw, 38px)); } .hgal.mosaic .hg-item { display: block; margin: 0; transform: none !important; opacity: 1 !important; } .hgal.mosaic .hg-item img { height: auto; width: 100%; filter: none; } .hgal.mosaic .hg-cap { transform: none !important; opacity: 1 !important; text-align: left; padding-top: 8px; } .hgal.mosaic .hgal-foot { position: static; margin: clamp(24px, 4vh, 44px) auto 0; max-width: 1680px; padding-inline: var(--pad); } .hgal.mosaic .hg-prog, .hgal.mosaic .hg-now { visibility: hidden; } /* cambio de vista: se funde en vez de saltar */ .hgal-track { transition: opacity 200ms var(--ease); } .hgal.swapping .hgal-track { opacity: 0; } .hgal.mosaic .hg-item { animation: mosIn 420ms var(--ease) both; } @keyframes mosIn { from { opacity: 0; transform: translateY(10px); } } .gal { display: flex; flex-direction: column; gap: clamp(50px, 11vh, 140px); } .g-row { display: grid; gap: var(--gap); } .g-fig img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; } .g-fig figcaption { padding-top: 10px; } /* -------------------------------------------------------- proyecto */ .pj { padding-top: calc(var(--bar) + clamp(50px, 12vh, 150px)); } .pj-bar { display: flex; justify-content: space-between; gap: 20px; padding-bottom: clamp(30px, 7vh, 90px); } .pj-title { font-size: var(--t-title); font-weight: 600; } .pj-cat { margin-top: 1.4em; color: var(--gray); } .meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px var(--gap); margin-top: clamp(50px, 10vh, 120px); } .meta dt { margin-bottom: 6px; } .meta dd { font-family: var(--sans); font-size: var(--t-body); letter-spacing: 0; text-transform: none; line-height: 1.5; } .meta dd span { display: block; } .lead { margin-top: clamp(50px, 10vh, 120px); overflow: hidden; } .lead img { width: 100%; } .pj-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr); gap: var(--gap); padding: clamp(70px, 15vh, 190px) 0; } .pj-h2 { font-weight: 400; letter-spacing: .06em; } /* el h2 de la galeria existe para la estructura, no para leerse en grande */ .pj-h2-gal { display: block; padding-bottom: clamp(18px, 3vh, 34px); color: var(--gray); } .pj-body .copy p { font-size: var(--t-lead); line-height: 1.45; max-width: 27em; } .pj-body .copy p + p { margin-top: 1.2em; } .out { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; transition: gap var(--d-hover) var(--ease); } .out:hover { gap: 15px; } .next { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-top: clamp(80px, 16vh, 200px); padding-bottom: clamp(40px, 8vh, 100px); } .next .nm { font-size: clamp(24px, 3.4vw, 52px); font-weight: 600; letter-spacing: -.03em; transition: transform var(--d-hover) var(--ease); } .next:hover .nm { transform: translateX(12px); } .back { display: inline-flex; align-items: center; gap: 7px; transition: gap var(--d-hover) var(--ease); } .back:hover { gap: 14px; } /* ----------------------------------------------------------- about */ .ab { padding-top: calc(var(--bar) + clamp(50px, 12vh, 150px)); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 110px); align-items: start; } .ab-title { font-size: var(--t-display); font-weight: 600; } .ab-title .ast { font-size: .3em; vertical-align: super; line-height: 0; } .ab-bio { margin-top: clamp(40px, 7vh, 80px); } .ab-bio p { font-size: var(--t-lead); line-height: 1.45; max-width: 25em; } .ab-bio p + p { margin-top: 1.1em; } .ab-bio strong { font-weight: 600; } .ab-r { overflow: hidden; } .ab-r img { width: 100%; filter: grayscale(1); } .cv { padding-top: clamp(90px, 20vh, 250px); } .cv-b + .cv-b { margin-top: clamp(60px, 12vh, 130px); } .cv-b > .m { display: block; padding-bottom: clamp(18px, 3vh, 34px); } .cv-row { display: grid; grid-template-columns: 3rem minmax(0, 3fr) minmax(0, 4fr) minmax(0, 2.4fr) minmax(0, 2.4fr); gap: 4px var(--gap); align-items: baseline; padding: clamp(12px, 2vh, 22px) 0; } .cv-row .nm { font-size: clamp(17px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.02em; } .tail { height: clamp(90px, 20vh, 240px); } /* -------------------------------------------------------- lightbox */ .lbx[hidden] { display: none; } .lbx { position: fixed; inset: 0; z-index: 2000; background: var(--w); display: grid; grid-template-rows: var(--bar) 1fr var(--bar); opacity: 0; transition: opacity .22s ease; } .lbx.open { opacity: 1; } .lbx .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--pad); } .lbx .stage { display: flex; align-items: center; justify-content: center; padding: clamp(18px, 4vh, 48px) var(--pad); min-height: 0; } .lbx img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .lbx button { background: none; border: 0; cursor: pointer; color: inherit; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; transition: opacity var(--d-hover) var(--ease); } .lbx button:hover { opacity: .45; } /* ------------------------------------------------ cursor adaptativo */ .has-cur, .has-cur a, .has-cur button, .has-cur [data-lb] img, .has-cur .mask, .has-cur .hg-item { cursor: none; } .cur { position: fixed; top: 0; left: 0; z-index: 3000; pointer-events: none; display: grid; place-items: center; width: 0; height: 0; mix-blend-mode: difference; opacity: 0; transition: opacity var(--d-hover) var(--ease); will-change: transform; } .cur.on { opacity: 1; } .cur-dot, .cur-lb { grid-area: 1 / 1; } .cur-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1px solid #fff; transition: width var(--d-hover) var(--ease), height var(--d-hover) var(--ease), background-color var(--d-hover) var(--ease), opacity var(--d-hover) var(--ease); } .cur-lb { color: #fff; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity var(--d-hover) var(--ease); white-space: nowrap; } .cur.ring .cur-dot { width: 30px; height: 30px; background: transparent; } .cur.wide .cur-dot { width: 58px; height: 58px; } .cur.wide .cur-lb { opacity: 1; color: #000; mix-blend-mode: normal; } .cur.min .cur-dot { width: 4px; height: 4px; opacity: .5; } .cur.down .cur-dot { transform: scale(.82); } /* ------------------------------------------------------------- 404 */ .nf { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .nf h1 { font-size: var(--t-display); font-weight: 600; } /* ------------------------------- transición continua entre páginas */ @view-transition { navigation: auto; } /* Fundido largo y suave al abrir un proyecto. Ya no hay imagen compartida (la portada no se repite dentro), asi que la transicion es de pagina: la saliente se va con un leve retroceso y la entrante entra avanzando. */ ::view-transition-group(root) { animation-duration: 720ms; } ::view-transition-old(root) { animation: vt-out 720ms var(--ease) both; } ::view-transition-new(root) { animation: vt-in 720ms var(--ease) both; } @keyframes vt-out { to { opacity: 0; transform: scale(.985); } } @keyframes vt-in { from { opacity: 0; transform: scale(1.012); } } .bar-t { view-transition-name: bar-top; } .bar-b { view-transition-name: bar-bottom; } ::view-transition-group(bar-top), ::view-transition-group(bar-bottom) { animation-duration: 360ms; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ------------------------------------------------------ responsive */ @media (max-width: 1000px) { .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* titulo y explicacion apilados: en dos columnas el texto quedaba en una tira */ .sec-h { grid-template-columns: 1fr; gap: clamp(18px, 4vh, 34px); } .pj-body { grid-template-columns: 1fr; } .ab { grid-template-columns: 1fr; } .ab-r { order: -1; max-width: 420px; } .cv-row { grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 1fr); } .cv-row > :first-child { grid-row: 1 / span 2; } .intro p { margin-left: 0; } } @media (max-width: 720px) { /* barras mas bajas: en pantalla pequena el alto vertical es lo escaso */ :root { --bar: 30px; } .bar nav, .bar .foot-l, .bar .foot-r { display: none; } /* se mantienen las 3 columnas: con 2 la marca quedaba centrada en la primera celda, es decir un poco a la izquierda del centro real */ .bar-t .c { grid-column: 2; } .burger { grid-column: 3; } .bar-b { grid-template-columns: 1fr; } .bar-b .c { justify-self: center; } .burger { display: block; } .idx-row { grid-template-columns: 2.4rem 1fr; grid-template-areas: 'num nm' '. th' '. cat'; gap: 3px 10px; padding: 18px 0; } .idx-num { grid-area: num; } .idx-row .nm { grid-area: nm; } .idx-thumb { grid-area: th; display: block; margin: 12px 0 6px; } .idx-cat { grid-area: cat; } .idx-place, .idx-go { display: none; } .peek { display: none; } /* Mismo motor que en escritorio: el scroll vertical mueve la pista. No se secuestra ningun gesto, solo se traduce el avance de la pagina. */ /* en movil caben dos casi centradas a la vez: el hueco tiene que cubrir el crecimiento de las dos, no solo el de una */ .hg-item img { height: clamp(180px, 26vh, 300px); } .hg-prog { width: 90px; } .hgal-foot { margin-top: 76px; } .g-row { grid-template-columns: 1fr !important; } .g-solo { width: 100% !important; margin-left: 0 !important; } .cv-row { grid-template-columns: 2.4rem 1fr; row-gap: 1px; } .cv-row > :first-child { grid-row: 1 / span 4; } .cv-row > :not(:first-child) { grid-column: 2; } .strip img, .strip figure:nth-child(4n+3) img { height: 250px; } .reel-item, .reel-item:nth-child(3n+2) { width: 74vw; align-self: auto; } } /* Respaldo para navegadores sin View Transitions (hoy, Firefox): desvanecido corto entre páginas. Con VT esto nunca se activa. */ body { animation: fade var(--d-hover) var(--ease) both; } body.leaving { opacity: 0; transition: opacity .2s linear; } @keyframes fade { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { body { animation: none; } }