/* conchimarcos.com — hoja unica.
   El sitio es una sola pagina estatica servida por nginx: sin framework y sin
   compilacion, para que dentro de tres anos se pueda abrir y entender. */

/* ── Fichas ──────────────────────────────────────────────────────────────
   Bricolage Grotesque para titulares y Source Serif para el texto. Es la
   inversion del tópico —normalmente el serif va en el titular— y dice lo que
   hay que decir: titular de ingeniera, cuerpo de docente. La monoespaciada
   queda para los metadatos, que es donde de verdad hay datos. */
:root {
  --petroleo: #0d2b30;
  --pizarra:  #143a40;
  --tiza:     #e6edea;
  --tiza-2:   #9fb5b2;
  --papel:    #edf0ee;
  --grafito:  #16292c;
  --grafito-2:#4e6a6d;
  --rotulador:#d9a521;
  --linea:    #c8d3d0;

  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --texto:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --dato:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Escala: pocos pasos y muy separados. Un sitio de una persona no necesita
     nueve tamanos, necesita tres que se distingan de lejos. */
  --t-titular: clamp(2.6rem, 1.2rem + 6vw, 6.5rem);
  --t-seccion: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  --t-cuerpo:  clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --t-dato:    0.78rem;

  --aire: clamp(3.5rem, 2rem + 6vw, 8rem);
  --borde: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--grafito);
  font-family: var(--texto);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--rotulador); }

:focus-visible {
  outline: 3px solid var(--rotulador);
  outline-offset: 3px;
}

.salta-al-contenido {
  position: absolute; left: -9999px;
  background: var(--rotulador); color: var(--petroleo);
  padding: 0.7rem 1.1rem; font-family: var(--dato); font-size: var(--t-dato);
}
.salta-al-contenido:focus { left: 1rem; top: 1rem; z-index: 99; }

.contenedor {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ── El campo etiquetado ─────────────────────────────────────────────────
   La pieza que da al sitio su forma de expediente: una etiqueta pequena en
   monoespaciada sobre el dato. Se repite en toda la pagina porque es la unidad
   con la que esta escrito un acta, que es el documento del oficio. */
.campo { display: block; }
.campo > .etiqueta {
  display: block;
  font-family: var(--dato);
  font-size: var(--t-dato);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito-2);
  margin-bottom: 0.45rem;
}
.sobre-oscuro .campo > .etiqueta { color: var(--tiza-2); }

/* ── Cabecera ────────────────────────────────────────────────────────── */
.cabecera {
  background: var(--petroleo);
  color: var(--tiza);
  padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) var(--aire);
}

.barra {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--dato);
  font-size: var(--t-dato);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tiza-2);
  padding-bottom: clamp(2.5rem, 1rem + 5vw, 5rem);
}
.barra nav { display: flex; gap: clamp(0.8rem, 2vw, 1.8rem); flex-wrap: wrap; }
.barra a { text-decoration: none; }
.barra a:hover { color: var(--rotulador); }

.titular {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-titular);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.titular .parte-2 { display: block; color: var(--rotulador); }

.tesis {
  max-width: 34ch;
  margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 0;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  color: var(--tiza);
}

.identidad {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: end;
}
@media (max-width: 800px) {
  .identidad { grid-template-columns: 1fr; }
}

.retrato {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--pizarra);
  border: var(--borde) solid var(--rotulador);
}
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato .pie {
  position: absolute; inset-inline: 0; bottom: 0;
  background: var(--petroleo);
  border-top: var(--borde) solid var(--rotulador);
  padding: 0.5rem 0.7rem;
  font-family: var(--dato); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tiza-2);
}

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion { padding-block: var(--aire); }
.seccion.sobre-oscuro { background: var(--petroleo); color: var(--tiza); }

.seccion > .contenedor > h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-seccion);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 2.5rem;
  max-width: 24ch;
  text-wrap: balance;
}

.entradilla {
  max-width: 62ch;
  margin: -1.5rem 0 2.5rem;
  color: var(--grafito-2);
}
.sobre-oscuro .entradilla { color: var(--tiza-2); }

/* ── Las dos mitades ─────────────────────────────────────────────────── */
.dos-mitades {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  border-top: var(--borde) solid var(--grafito);
}
@media (max-width: 800px) { .dos-mitades { grid-template-columns: 1fr; } }

.mitad {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.2rem, 3vw, 2.5rem);
  border-bottom: var(--borde) solid var(--grafito);
}
.mitad + .mitad { border-left: var(--borde) solid var(--grafito); }
@media (max-width: 800px) {
  .mitad + .mitad { border-left: 0; }
}
.mitad h3 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  font-weight: 700; letter-spacing: -0.02em;
  margin: 0.2rem 0 0.8rem;
}
.mitad p { margin: 0 0 1rem; max-width: 42ch; }
.mitad p:last-child { margin-bottom: 0; }

/* ── La cadena: el elemento que se recuerda ──────────────────────────── */
.cadena { display: grid; gap: 0.6rem; margin: 2rem 0 0; }

.eslabon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.1rem;
  align-items: center;
  background: var(--pizarra);
  border: var(--borde) solid transparent;
  padding: 0.9rem 1.1rem;
  transition: border-color 160ms ease, background 160ms ease;
}
.eslabon[data-roto="si"] { border-color: var(--rotulador); }

.eslabon .numero {
  font-family: var(--dato);
  font-size: 1.1rem;
  color: var(--rotulador);
  grid-row: span 2;
}
.eslabon .concepto { font-size: 1rem; color: var(--tiza); }
.eslabon .huella {
  font-family: var(--dato);
  font-size: var(--t-dato);
  color: var(--tiza-2);
  word-break: break-all;
}
.eslabon[data-roto="si"] .huella { color: var(--rotulador); }

.importe {
  font-family: var(--dato);
  background: transparent;
  border: 0;
  border-bottom: var(--borde) dashed var(--tiza-2);
  color: var(--tiza);
  font-size: 1rem;
  width: 7ch;
  padding: 0.1rem 0.2rem;
  text-align: right;
}
.importe:hover { border-bottom-color: var(--rotulador); cursor: text; }

.veredicto {
  margin-top: 1.2rem;
  font-family: var(--dato);
  font-size: var(--t-dato);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.8rem 1rem;
  border: var(--borde) solid var(--tiza-2);
  color: var(--tiza);
}
.veredicto[data-estado="roto"] {
  border-color: var(--rotulador);
  color: var(--rotulador);
}

/* ── Rejilla de piezas y de cursos ───────────────────────────────────── */
.rejilla {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.sobre-oscuro .rejilla { background: var(--pizarra); border-color: var(--pizarra); }

.celda {
  background: var(--papel);
  padding: 1.2rem 1.3rem;
}
.sobre-oscuro .celda { background: var(--petroleo); }
.celda h3 {
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.celda p { margin: 0; font-size: 0.98rem; color: var(--grafito-2); }
.sobre-oscuro .celda p { color: var(--tiza-2); }

.curso {
  background: var(--papel);
  padding: 0.9rem 1.1rem;
  font-size: 1rem;
}
.curso .familia {
  display: block;
  font-family: var(--dato); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grafito-2);
  margin-bottom: 0.25rem;
}

/* ── Contacto ────────────────────────────────────────────────────────── */
.contacto {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.contacto a { font-family: var(--dato); font-size: 0.95rem; }

.pie-pagina {
  border-top: var(--borde) solid var(--grafito);
  padding-block: 2rem 3rem;
  font-family: var(--dato);
  font-size: var(--t-dato);
  color: var(--grafito-2);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  justify-content: space-between;
}

/* ── La ficha de la cabecera ────────────────────────────────────────────
   Ocupa el sitio del retrato. Cada dato es comprobable, que es justo lo que
   una foto no es. Los numeros en la display y la glosa pequena debajo: se lee
   de un vistazo desde lejos, que es como se lee una cabecera. */
.ficha {
  margin: 0;
  display: grid;
  gap: 0;
  border: var(--borde) solid var(--rotulador);
}
.ficha > div {
  padding: 1rem 1.2rem;
}
.ficha > div + div { border-top: var(--borde) solid var(--rotulador); }

.ficha dt {
  font-family: var(--dato);
  font-size: var(--t-dato);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tiza-2);
  margin-bottom: 0.35rem;
}
.ficha dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--tiza);
}
.ficha dd span {
  display: block;
  font-family: var(--texto);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--tiza-2);
  margin-top: 0.2rem;
}

/* Sustituye a los `style=` que habia en el HTML. */
.sin-margen { margin: 0; }
.nota-larga { margin-top: 2rem; max-width: 62ch; }
.separado    { margin-top: 2rem; }

/* ── El retrato, en pequeno ─────────────────────────────────────────────
   Ocupa una fila de la ficha y no medio hero. Una foto grande obliga a que la
   foto sea muy buena; en pequeno, una normal cumple de sobra y el peso baja a
   unas decenas de kilobytes.

   Va de fondo para que la ausencia del fichero no se note: ver el comentario
   del HTML. */
.ficha-retrato {
  display: flex;
  align-items: flex-end;
  min-height: 132px;
  background-color: var(--pizarra);
  background-image: url("/img/conchi-marcos.jpg?v=7a90998f");
  background-size: cover;
  /* Un poco por encima del centro: en los retratos la cara nunca esta en
     medio, y recortar por el centro deja media frente fuera. */
  background-position: 50% 35%;
  padding: 0.7rem 1rem;
}
.ficha-retrato span {
  font-family: var(--dato);
  font-size: var(--t-dato);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tiza);
  background: var(--petroleo);
  padding: 0.3rem 0.55rem;
}

/* ── Listas de credenciales ─────────────────────────────────────────────
   Sin punto de vina: los elementos son datos, no prosa, y el punto le da un
   aire de lista de la compra que resta en algo que se lee como un expediente.
   La barra en el borde marca el elemento sin adornarlo. */
.lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista li {
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: var(--borde) solid var(--linea);
  margin-bottom: 0.4rem;
  font-size: 1rem;
  line-height: 1.45;
}
.lista li:last-child { margin-bottom: 0; }
.lista strong { font-weight: 600; }