/*
  Prototipo D, «Hoja compacta»: la tinta y la serif del CV Clásico (Noto Serif,
  una sola tinta, regla fina bajo cada título), con el trabajo mostrado como
  capturas reales. Lectura: portada de ingeniero para reclutadores y clientes,
  dial ENERGY 1 / RHYTHM 2 / MOTION 1.
*/
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --papel: #ffffff;
  --papel-2: #f1f0ed;   /* paspartú de las capturas y fondo de la foto mientras carga */
  --tinta: #1c1c1c;
  --tinta-2: #4a4a4a;
  --regla: #8c8c8c;
  --ancho: 72rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: dark) {
  :root { --papel: #161616; --papel-2: #242322; --tinta: #e9e7e3; --tinta-2: #b4b1ab; --regla: #6e6e6e; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Noto Serif", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a, .boton { touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.skip { position: absolute; left: 1rem; top: 0.5rem; padding: 0.5rem 0.75rem; background: var(--tinta); color: var(--papel); transform: translateY(-200%); }
.skip:focus { transform: none; }

.hoja { max-width: var(--ancho); margin: 0 auto; padding: 1.75rem 1.25rem 1.5rem; }

/* Portada: nombre y cargo como en el PDF; el titular es el foco de la pantalla. */
/* Sin foto, una columna; con <img class="foto"> pasa sola a dos. */
.portada { display: grid; grid-template-areas: "id" "titular" "bajada" "contacto"; align-items: start; }
.portada:has(.foto) {
  grid-template-columns: 1fr 6.5rem;
  grid-template-areas: "id foto" "titular titular" "bajada bajada" "contacto contacto";
  column-gap: 1rem;
}
.id { grid-area: id; align-self: center; }
.portada h1 { font-size: 2.125rem; font-weight: 400; line-height: 1.1; letter-spacing: 0.005em; }
.cargo { margin-top: 0.35rem; font-size: 1.125rem; font-style: italic; }
.foto { grid-area: foto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--papel-2); }
.titular { grid-area: titular; max-width: 44rem; margin-top: 1rem; font-size: 1.375rem; line-height: 1.22; letter-spacing: -0.005em; text-wrap: balance; }
.bajada { grid-area: bajada; margin-top: 0.75rem; max-width: 48rem; }
.contacto { grid-area: contacto; margin-top: 0.5rem; display: flex; flex-wrap: wrap; column-gap: 1.1rem; color: var(--tinta-2); }
.contacto a, .contacto span { display: inline-block; padding-block: 0.6rem; white-space: nowrap; }
.contacto a { color: var(--tinta); }

/* Secciones: la única línea es la regla bajo el título, la del CV Clásico. */
.seccion { margin-top: 1.75rem; }
.seccion h2 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--regla); /* taste-skill-ignore: la regla bajo el título es la del CV Clásico que eligió José */
  margin-bottom: 1rem;
}

/* Trabajo: hoja de contactos de capturas reales, todas 16:10 y sin esquinas redondeadas. */
/* Teléfono: dos columnas con miniaturas bajas, para que la portada quepa en tres pantallas. */
.proyectos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 0.875rem; }
.proyecto h3 { margin-top: 0.45rem; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.proyecto p { margin-top: 0.15rem; font-size: 0.9375rem; line-height: 1.4; }
.proyecto .stack { font-size: 0.875rem; }
.parte { display: none; }
.captura { display: block; background: var(--papel-2); padding: 0.25rem; }
.captura img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.stack, .proyecto i { font-style: italic; color: var(--tinta-2); }
.sin-sitio { align-self: start; background: var(--papel-2); padding: 0.75rem 0.75rem 0.85rem; }
.sin-sitio h3 { margin-top: 0; }
.sin-sitio li { margin-top: 0.3rem; font-size: 0.9375rem; line-height: 1.4; }

/* Cierre: experiencia a la izquierda, formación y contacto a la derecha. */
.cierre { font-size: 0.9375rem; }
.entrada + .entrada { margin-top: 0.85rem; }
.fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 1rem; }
.fila span { white-space: nowrap; }
.rol { font-style: italic; }
.entrada .stack { margin-top: 0.15rem; }
.idiomas { margin-top: 0.5rem; }
.accion { margin-top: 0.75rem; }
.boton {
  display: inline-block;
  padding: 0.7rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 140ms var(--ease-out);
}
.boton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .boton:hover { text-decoration: underline; } }

.pie { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.5rem; font-size: 0.9375rem; color: var(--tinta-2); }
.pie a { display: inline-block; padding-block: 0.6rem; }

@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
  .hoja { padding: 2rem 2rem 1rem; }
  .portada:has(.foto) {
    grid-template-columns: 1fr 12rem;
    grid-template-areas: "id foto" "titular foto" "bajada foto" "contacto foto";
    column-gap: 3rem;
  }
  .id { align-self: start; }
  .portada h1 { font-size: 2.75rem; }
  .cargo { font-size: 1.25rem; }
  .titular { margin-top: 1.25rem; font-size: 2rem; }
  .seccion { margin-top: 2rem; }
  .proyectos { grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1.5rem; }
  .proyecto h3 { margin-top: 0.6rem; font-size: 1.0625rem; }
  .proyecto p { margin-top: 0.2rem; font-size: 1rem; line-height: 1.45; }
  .proyecto .stack { font-size: 1rem; }
  .parte { display: inline; }
  .captura { padding: 0.4rem; }
  .sin-sitio { padding: 1rem 1.1rem 1.1rem; }
  .sin-sitio li { margin-top: 0.6rem; font-size: 1rem; line-height: 1.45; }
  .cierre { display: grid; grid-template-columns: 3fr 2fr; column-gap: 3rem; font-size: 1rem; }
  .lateral .seccion + .seccion { margin-top: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }