/* Colores y tipografía: todo lo demás usa estas variables */
:root {
  --bg: #0b0b0c;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --ink: #f2f2ef;
  --muted: #9b9b96;
  --accent: #c6f19d;
  --accent-ink: #0b0b0c;
  --field-1: #000000;
  --field-1-ink: #f2f2ef;
  --field-2: #f2f2ef;
  --field-2-ink: #0b0b0c;

  --display: "Unbounded", "Arial Black", sans-serif;
  --nombre: "Unbounded", "Arial Black", sans-serif;
  --text: "Jost", system-ui, sans-serif;

  --step-small: 0.9375rem;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --step-head: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  --step-display: clamp(3.5rem, 2rem + 6vw, 8rem);

  --margen: clamp(16px, 2.5vw, 40px);
  --hueco: clamp(96px, 10vw, 160px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body)/1.6 var(--text);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; /* taste-skill-ignore: texto solo para lectores de pantalla */
  clip: rect(0 0 0 0); white-space: nowrap;
}
.saltar {
  position: absolute; left: var(--margen); top: -100px; z-index: 50;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px; text-decoration: none;
}
.saltar:focus { top: var(--margen); }

/* Enlaces de texto */
.cabecera a, .contacto__redes a, .pie a, .enlace-flecha {
  text-decoration: underline 1px transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 200ms, color 200ms;
}
.cabecera a:hover, .contacto__redes a:hover, .pie a:hover, .enlace-flecha:hover { text-decoration-color: currentColor; }

.titulo-seccion {
  font: 500 var(--step-head)/1.05 var(--display);
  letter-spacing: -0.03em;
}
.cabeza-seccion {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  margin-bottom: 40px;
}
.cabeza-seccion p { color: var(--muted); max-width: 44ch; text-align: right; }
.subtitulo { font: 500 var(--step-lead)/1.2 var(--display); margin: 72px 0 24px; }

/* Iconos de programas: una baldosa por programa con su color de marca */
.app {
  --t: 36px;
  flex: none;
  display: inline-grid; place-items: center;
  width: var(--t); height: var(--t);
  border-radius: calc(var(--t) * 0.22);
  overflow: hidden;
}
.app img { width: 100%; height: 100%; object-fit: contain; }
.app__siglas { font: 500 calc(var(--t) * 0.42)/1 var(--text); letter-spacing: 0; }
.app__logo {
  width: 64%; height: 64%;
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.logo-maya { --logo: url(../img/iconos/autodeskmaya.svg); }
.logo-blender { --logo: url(../img/iconos/blender.svg); }
.logo-unity { --logo: url(../img/iconos/unity.svg); }
.logo-photoshop { --logo: url(../img/iconos/adobephotoshop.svg); }
.app--zbrush { padding: 3px; }
.app--max { border-radius: 0; }
.app--painter { border-radius: 0; }
.app--marmoset { background: #f2f2ef; padding: 3px; }
.app--maya { background: #0c2a35; color: #37a5cc; }
.app--blender { background: #23170c; color: #f5792a; }
.app--unity { background: #f2f2ef; color: #000; }
.app--photoshop { background: #001e36; color: #31a8ff; }
.app--photoshop .app__logo { width: 100%; height: 100%; }
.app--premiere { background: #00005b; color: #9999ff; }
.app--redshift { background: #2a0d0d; color: #e8433a; }
.app--arnold { background: #12241f; color: #3fc6a0; }
.app--corona { background: #2b200b; color: #f5b02e; }
.app--otro { background: var(--surface-2); color: var(--ink); }

.apps { display: flex; flex-wrap: wrap; gap: 8px; }
.apps--mini .app { --t: 24px; }

/* Cabecera */
.cabecera {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 24px var(--margen);
  font-size: var(--step-body); font-weight: 500;
}
.cabecera .marca { font: 800 var(--step-body)/1 var(--nombre); letter-spacing: -0.01em; text-decoration: none; }
.cabecera ul { display: flex; gap: 32px; }
.cabecera a { white-space: nowrap; }
.cabecera nav a { padding: 6px 0; }
.cabecera nav a:hover { color: var(--accent); }
.cabecera nav { display: grid; justify-items: end; gap: 10px; }
.redes { display: flex; gap: 20px; font-size: var(--step-small); font-weight: 500; }
.redes a { display: inline-flex; align-items: center; gap: 8px; }
.redes__logo {
  width: 18px; height: 18px; flex: none;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
  transition: transform 200ms var(--ease-out);
}
.redes a:hover .redes__logo { transform: scale(1.15); }
.logo-artstation { --logo: url(../img/iconos/artstation.svg); background: #13aff0; }
.logo-linkedin { --logo: url(../img/iconos/linkedin.svg); background: #3b8fe8; }

/* Portada: renders de fondo y el nombre en capas 3D */
.portada {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-content: end;
  padding: 120px var(--margen) 56px;
  overflow: hidden;
}
.portada__fondo { position: absolute; inset: 0; z-index: -1; background: var(--bg); }
.portada__fondo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 2500ms ease-in-out;
}
.portada__fondo img.contener { object-fit: contain; object-position: 78% 50%; }
.portada__fondo img.activa { opacity: 0.62; }
.portada__fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11, 11, 12, 0.92), rgba(11, 11, 12, 0) 65%); /* taste-skill-ignore: velo neutro para leer el texto sobre el render */
}
.portada__texto { max-width: 1100px; }
.portada__cabeza { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.portada__perfil {
  flex: none;
  width: clamp(96px, 11vw, 176px); height: auto; aspect-ratio: 1;
  border-radius: 50%; object-fit: cover;
  padding: 4px; background: var(--accent);
}
.nombre3d { perspective: 1000px; }
.portada__titulo {
  position: relative; transform-style: preserve-3d; transform-origin: 0 60%;
  transform: rotateY(-12deg) rotateX(8deg);
  transition: transform 400ms var(--ease-out);
  font: 800 clamp(3.25rem, 1.2rem + 7.6vw, 9.5rem)/0.92 var(--nombre);
  letter-spacing: -0.035em;
  color: var(--ink);
}
.nombre3d__cara { display: block; position: relative; font: inherit; letter-spacing: inherit; margin: 0; }
.nombre3d__capa { position: absolute; inset: 0; pointer-events: none; }
.portada__frase { margin-top: 32px; font-size: var(--step-lead); line-height: 1.4; max-width: 40ch; }
.apps--fila { margin-top: 24px; }
.apps--fila .app { transition: transform 200ms var(--ease-out); }
.apps--fila .app:hover { transform: translateY(-3px); }
.portada .boton { margin-top: 32px; }

.boton { margin-top: 32px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink);
  font: 500 var(--step-body)/1 var(--text); text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 200ms;
}
.boton:hover { background: var(--ink); }
.boton:active { transform: scale(0.97); }

/* Obras: rejilla tipo ArtStation */
.obras { padding: var(--hueco) var(--margen) 0; }
.rejilla {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.pieza { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--surface); }
.pieza[hidden] { display: none; }
.pieza a { display: block; width: 100%; height: 100%; text-decoration: none; }
.pieza img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out), filter 400ms;
}
.pieza__info {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 4px; padding: 56px 16px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); /* taste-skill-ignore: velo neutro bajo el título de la obra */
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.pieza__titulo { font: 500 var(--step-lead)/1.2 var(--display); color: #fff; }
.pieza__tipo { font-size: var(--step-small); color: #d6d6d2; }
.pieza__info .apps { margin-top: 6px; gap: 6px; }
.pieza a:hover img, .pieza a:focus-visible img { transform: scale(1.04); }
.pieza a:hover .pieza__info, .pieza a:focus-visible .pieza__info { opacity: 1; transform: none; }
@media (hover: none) {
  .pieza__info { opacity: 1; transform: none; }
}
.enlace-flecha { display: inline-block; margin-top: 24px; text-decoration-color: currentColor; }
.enlace-flecha span { display: inline-block; transition: transform 200ms var(--ease-out); }
.enlace-flecha:hover span { transform: translateX(4px); }

/* Proyectos destacados */
.destacado { margin-top: 64px; }
.destacado + .destacado { margin-top: 120px; }
.destacado__cabeza {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end;
  margin-bottom: 24px;
}
.destacado__titulo {
  font: 500 clamp(2.25rem, 1.4rem + 3vw, 4.25rem)/0.95 var(--display);
  letter-spacing: -0.03em;
}
.destacado__meta { margin-top: 12px; color: var(--muted); font-size: var(--step-small); }
.destacado__lado { display: grid; gap: 16px; justify-items: start; max-width: 52ch; }
.destacado__lado .enlace-flecha { margin-top: 0; }
.destacado__principal { display: block; overflow: hidden; background: var(--surface); }
.destacado__principal img { width: 100%; transition: transform 900ms var(--ease-out); }
.destacado__principal:hover img { transform: scale(1.02); }
.destacado__video { position: relative; margin: 0; }
.destacado__video video { display: block; width: 100%; height: auto; }
.destacado__video figcaption {
  position: absolute; left: 16px; bottom: 14px;
  font-size: var(--step-small); color: var(--muted);
}
.mosaico { display: grid; grid-template-columns: 1fr 1.05fr; gap: 8px; margin-top: 8px; }
.mosaico > img { width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.mosaico__columna { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; min-height: 0; }
.mosaico__columna img { width: 100%; height: 100%; object-fit: cover; min-height: 0; background: var(--surface); }
.proyecto__imagenes video { display: block; width: 100%; height: auto; background: var(--surface); }
/* Filas justificadas: todas las piezas a la misma altura y cada una con su proporción, sin recortes */
.fila { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; }
.fila > * { flex: var(--ar) 1 0; min-width: 0; display: block; margin: 0; overflow: hidden; background: var(--surface); }
.fila > * > img, .fila > * > video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
.fila > a > img { transition: transform 900ms var(--ease-out); }
.fila > a:hover > img { transform: scale(1.03); }
.fila .destacado__video { position: relative; }
.fila--pases { align-items: stretch; }
.fila--pases > span > img { height: 100%; }
.fila .pases { margin: 0; }
.fila .pases__controles { padding: 10px; gap: 8px; }
.fila .pases__grupo button { padding: 8px 12px; }
.turnaround, .dupla { display: grid; gap: 8px; margin-top: 8px; }
.turnaround { grid-template-columns: repeat(4, 1fr); }
.turnaround img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface); }
.dupla { grid-template-columns: 1fr 1fr; }
.dupla img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }

/* Visor de pases: texturas, arcilla y wireframe con el mismo encuadre */
.pases { margin-top: 8px; background: var(--surface); }
.pases__vista { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.pases__vista img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 450ms var(--ease-out);
}
.pases__vista img.activa { opacity: 1; }
.pases__controles {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 12px;
}
.pases__grupo, .filtros { display: flex; flex-wrap: wrap; gap: 4px; }
.pases__grupo button, .filtros button {
  border: 0; cursor: pointer; padding: 9px 14px;
  background: var(--bg); color: var(--muted); font-size: var(--step-small);
  transition: color 150ms, background-color 150ms, transform 150ms var(--ease-out);
}
.pases__grupo button:hover, .filtros button:hover { color: var(--ink); }
.pases__grupo button:active, .filtros button:active { transform: scale(0.97); }
.pases__grupo button[aria-pressed="true"], .filtros button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.filtros button { background: var(--surface); }

/* Más proyectos */
.mas { margin-top: 120px; }
.mas__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.mas__cabeza .subtitulo { margin: 0; }

/* Página de proyecto */
.proyecto {
  display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 40px;
  padding: 104px var(--margen) 0;
  align-items: start;
}
.proyecto__info { display: grid; gap: 20px; justify-items: start; }
.proyecto__volver { margin: 0; }
.proyecto__titulo { font: 500 clamp(2.25rem, 1.6rem + 2vw, 3.5rem)/1 var(--display); letter-spacing: -0.03em; }
.proyecto__meta { color: var(--muted); margin-top: -8px; }
.proyecto__texto { display: grid; gap: 12px; }
.proyecto__programas { display: grid; gap: 8px; }
.programa { display: flex; align-items: center; gap: 12px; font-size: var(--step-small); }
.programa .app { --t: 28px; }
.proyecto__imagenes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.proyecto__imagenes > * { grid-column: 1 / -1; }
.proyecto__imagenes > .vertical { height: min(100svh, 1100px); width: 100%; object-fit: contain; }
.proyecto__imagenes img { width: 100%; background: var(--surface); }
.proyecto__imagenes .fila { margin: 0; }
.proyecto__imagenes .fila .vertical { height: auto; object-fit: cover; }
.siguiente { padding: 120px var(--margen); }
.siguiente a {
  display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto auto; column-gap: 24px;
  align-items: center; text-decoration: none;
}
.siguiente img { grid-row: span 2; width: 240px; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 400ms var(--ease-out); }
.siguiente span { color: var(--muted); font-size: var(--step-small); align-self: end; }
.siguiente strong { font: 500 var(--step-head)/1.1 var(--display); align-self: start; }
.siguiente a:hover img { transform: scale(1.03); }

/* Sobre mí */
.sobre { padding: var(--hueco) var(--margen) 0; }
.sobre__intro { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.sobre__textos { display: grid; gap: 16px; max-width: 62ch; font-size: var(--step-lead); line-height: 1.5; }
.datos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 16px; font-size: var(--step-body); line-height: 1.45;
}
.datos dt { color: var(--muted); font-size: var(--step-small); }

.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pipeline li {
  position: relative;
  display: grid; gap: 6px; align-content: start;
  padding: 0 32px 0 0;
}
.pipeline li .app { --t: 48px; margin-bottom: 12px; }
.pipeline strong { font-weight: 500; }
.pipeline li > span:last-child { color: var(--muted); font-size: var(--step-small); }
.pipeline li:not(:last-child)::after {
  content: "→"; position: absolute; right: 8px; top: 12px; font-size: 1.5rem; color: var(--accent);
}

.herramientas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.herramientas li {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px;
  align-items: center;
  padding: 14px 16px; background: var(--surface);
  transition: background-color 200ms;
}
.herramientas li:hover { background: var(--surface-2); }
.herramientas .app { grid-row: span 2; }
.herramientas em { font-style: normal; color: var(--muted); font-size: var(--step-small); line-height: 1.2; }
.especialidades { margin-top: 24px; color: var(--muted); }

/* Trayectoria: cuatro hitos en fila sobre un campo un tono más claro */
.trayectoria {
  margin-top: var(--hueco);
  background: var(--surface);
  padding: 96px var(--margen);
}
.hitos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hito { display: grid; gap: 8px; align-content: start; }
.hito__anio {
  font: 500 clamp(2.5rem, 1.6rem + 3vw, 4.5rem)/1 var(--display);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.hito:last-child .hito__anio { color: var(--accent); }
.hito h3 { font: 500 var(--step-body)/1.4 var(--text); max-width: 26ch; }
.hito__centro { color: var(--muted); font-size: var(--step-small); }

/* Experiencia */
.experiencia { padding: var(--hueco) var(--margen) 0; }
.puesto {
  display: grid; grid-template-columns: 4fr 7fr auto; gap: 32px;
  align-items: start;
  padding: 28px 0;
}
.puesto + .puesto { margin-top: 8px; }
.puesto__empresa { font: 500 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--display); }
.puesto__cargo { margin-top: 6px; color: var(--muted); font-size: var(--step-small); }
.puesto__tareas { display: grid; gap: 8px; max-width: 62ch; }
.puesto__tareas li { padding-left: 1.1em; text-indent: -1.1em; }
.puesto__tareas li::before { content: "— "; color: var(--muted); }

/* Contacto: campo claro con imagen */
.contacto {
  margin-top: var(--hueco);
  display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: end;
  background: var(--field-2); color: var(--field-2-ink);
  padding: 96px var(--margen);
}
.contacto__texto { display: grid; gap: 20px; align-content: end; }
.contacto__texto > p { font-size: var(--step-lead); max-width: 36ch; }
.contacto__email {
  margin-top: 24px;
  font: 500 clamp(1.75rem, 0.9rem + 3.2vw, 3.75rem)/1.05 var(--display);
  letter-spacing: -0.02em;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 250ms;
}
.contacto__email:hover { color: #3c6a12; }
.contacto__redes { display: flex; flex-wrap: wrap; gap: 24px; font-size: var(--step-small); }
.contacto__imagen { aspect-ratio: 4 / 5; overflow: hidden; }
.contacto__imagen img { width: 100%; height: 100%; object-fit: cover; }

/* Pie */
.pie {
  background: var(--field-1); color: var(--field-1-ink);
  padding: 72px var(--margen) 28px;
}
.pie__nombre {
  font: 500 9.6vw/0.9 var(--display);
  letter-spacing: -0.04em; white-space: nowrap;
}
.pie__fila {
  display: grid; grid-template-columns: 2fr 2fr 5fr; gap: 32px;
  margin-top: 56px; font-size: var(--step-small);
}
.pie__enlaces { display: grid; gap: 8px; align-content: start; }
.pie__creditos { color: var(--muted); max-width: 70ch; }
.pie__final {
  display: flex; justify-content: space-between; margin-top: 56px; font-size: var(--step-small);
}

/* Movimiento */
@media (prefers-reduced-motion: no-preference) {
  .js .portada__titulo { opacity: 0; transform: rotateY(-40deg) rotateX(18deg) translateY(40px); }
  .js .cargada .portada__titulo {
    opacity: 1; transform: rotateY(-12deg) rotateX(8deg);
    transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-out);
  }
  .js .cargada .portada__titulo.siguiendo { transition: transform 400ms var(--ease-out); }
  .js .portada__frase, .js .apps--fila, .js .portada .boton { opacity: 0; transform: translateY(16px); }
  .js .cargada .portada__frase, .js .cargada .apps--fila, .js .cargada .boton {
    opacity: 1; transform: none;
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  }
  .js .cargada .portada__frase { transition-delay: 500ms; }
  .js .cargada .apps--fila { transition-delay: 600ms; }
  .js .cargada .boton { transition-delay: 700ms; }
  .portada__fondo img { transform: scale(1.05); transition: opacity 2500ms ease-in-out, transform 0s linear 2500ms; }
  .portada__fondo img.activa { transform: scale(1); transition: opacity 2500ms ease-in-out, transform 10500ms linear; }
  .js [data-entra] { opacity: 0; transform: translateY(24px); }
  .js [data-entra].visible {
    opacity: 1; transform: none;
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
    transition-delay: var(--retraso, 0ms);
  }
}

/* Página de proyecto: entrada de la información y de cada imagen */
@media (prefers-reduced-motion: no-preference) {
  .proyecto__info > *, .proyecto__imagenes img { animation: subir 800ms var(--ease-out) both; }
  .proyecto__info > :nth-child(2) { animation-delay: 80ms; }
  .proyecto__info > :nth-child(3) { animation-delay: 160ms; }
  .proyecto__info > :nth-child(n+4) { animation-delay: 240ms; }
  .proyecto__imagenes img:nth-child(1) { animation-delay: 150ms; }
  .proyecto__imagenes img:nth-child(2) { animation-delay: 250ms; }
  .proyecto__imagenes img:nth-child(n+3) { animation-delay: 350ms; }
}
@keyframes subir { from { opacity: 0; transform: translateY(24px); } }
@keyframes acercar { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Tablet */
@media (max-width: 1024px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .destacado__cabeza { grid-template-columns: 1fr; }
  .turnaround { grid-template-columns: repeat(2, 1fr); }
  .fila { flex-direction: column; }
  .fila > * { flex: none; width: 100%; }
  .fila--pases > span > img { height: auto; }
  .mosaico { grid-template-columns: 1fr; }
  .mosaico > img { aspect-ratio: 4 / 5; }
  .mosaico__columna { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; }
  .mosaico__columna img { aspect-ratio: 16 / 9; }
  .proyecto { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .pipeline li:not(:last-child)::after { content: none; }
  .herramientas { grid-template-columns: repeat(2, 1fr); }
  .hitos { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .puesto { grid-template-columns: 1fr 2fr auto; }
  .cabecera ul { gap: 16px; }
}

/* Móvil */
@media (max-width: 760px) {
  .cabecera { padding: 16px var(--margen); }
  .cabecera li:nth-child(3), .cabecera li:nth-child(4) { display: none; }
  .portada { padding: 96px var(--margen) 32px; }
  .portada__titulo { font-size: 15.5vw; transform: rotateY(-8deg) rotateX(6deg); }
  .portada__cabeza { flex-direction: column; align-items: flex-start; gap: 20px; }
  .portada__perfil { width: 76px; margin: 0; }
  .boton { width: 100%; }
  .cabecera { font-size: 0.9375rem; gap: 16px; }
  .cabecera .marca { font-size: 0.8125rem; }
  .cabecera ul { gap: 12px; }
  .redes { gap: 14px; font-size: 0.8125rem; }
  .redes__logo { width: 15px; height: 15px; }

  .cabeza-seccion { flex-direction: column; gap: 8px; margin-bottom: 28px; }
  .cabeza-seccion p { text-align: left; }
  .rejilla { gap: 6px; grid-template-columns: 1fr; }
  .dupla { grid-template-columns: 1fr; }
  .pases__controles { flex-direction: column; }
  .siguiente a { grid-template-columns: 1fr; row-gap: 12px; }
  .siguiente img { width: 100%; grid-row: auto; }
  .proyecto { padding-top: 88px; }

  .sobre__intro { grid-template-columns: 1fr; gap: 20px; }
  .datos { grid-template-columns: 1fr; gap: 14px; }
  .pipeline, .herramientas { grid-template-columns: 1fr; }
  .subtitulo { margin-top: 56px; }

  .trayectoria { padding: 72px var(--margen); }
  .hitos { grid-template-columns: 1fr; gap: 104px; }

  .puesto { grid-template-columns: 1fr auto; gap: 16px; }
  .puesto__tareas { grid-column: 1 / -1; grid-row: 2; }

  .contacto { grid-template-columns: 1fr; padding: 72px var(--margen); }
  .contacto__email { font-size: 9vw; }
  .contacto__imagen { aspect-ratio: 4 / 3; }

  .pie__fila { grid-template-columns: 1fr 1fr; }
  .pie__creditos { grid-column: 1 / -1; }
}