/* =========================================================================
   Sobre — las piezas que no comparte con otras páginas: las cifras bajo el
   titular, la historia (de la Anet A8 a hoy), las tres líneas de trabajo y
   «Así se fabrica», con las fotos del busto.
   Solo se carga en /sobre/ (la encola page-sobre.php).
   ========================================================================= */

/* Cifras bajo el titular. En móvil van de dos en dos en vez de en cuatro filas. */
.sobre-datos { list-style: none; margin: 0; padding: 0; }
.sobre-datos li { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.sobre-datos__v {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 34px);
  line-height: 1; letter-spacing: -.02em; color: var(--ink);
}
.sobre-datos__k { font-size: 14px; line-height: 1.4; color: var(--muted); }

/* Historia: texto y foto real, y debajo las tres etapas. */
.sobre-historia { gap: 56px; align-items: center; }
.sobre-historia p:last-child { margin-bottom: 0; }
.sobre-historia figure { margin: 0; }
.sobre-historia figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }

.sobre-etapas { list-style: none; margin: 48px 0 0; padding: 0; }
.sobre-etapas li { padding: 26px 24px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--paper); }

/* Las tres líneas de trabajo: foto real a sangre arriba y el texto debajo,
   con su enlace siempre al pie aunque las descripciones midan distinto. */
.sobre-lineas .card { display: flex; flex-direction: column; overflow: hidden; }
.sobre-lineas__txt { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 28px; }
.sobre-lineas .arrow-link { margin-top: auto; padding-top: 22px; }

/* Así se fabrica: el texto y, debajo, las tres fotos en fila y a la misma
   altura. Cada columna mide en proporción a su foto (4:3 los hombros, 3:4 las
   otras dos), y por eso las tres acaban igual de altas. En el móvil, los
   hombros a todo el ancho y las otras dos debajo, de dos en dos. */
.sobre-fabrica__txt { max-width: 720px; }
.sobre-fabrica__txt p:last-child { margin-bottom: 0; }
.sobre-fabrica__fotos {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.25fr) minmax(0, 2.25fr);
  gap: var(--gap-sm); margin-top: 44px; align-items: start;
}
.sobre-fabrica figure { margin: 0; }
/* Esquinas redondeadas sin el borde claro de .card, que sobre oscuro se veía como un marco. */
.sobre-fabrica__foto { border-radius: var(--r-card); overflow: hidden; }
.sobre-fabrica figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--on-dark-mut); }

/* Solo el margen de abajo: el de arriba lo pone .mt-1 en el marcado. */
.sobre-etapas p, .sobre-lineas p { margin-bottom: 0; }
.sobre-n { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); margin: 0 0 12px; }

@media (max-width: 760px) {
  .sobre-datos.grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sobre-datos li { padding: 16px 18px; }
  .sobre-historia { gap: 32px; }
  .sobre-fabrica__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; row-gap: 22px; }
  .sobre-fabrica__fotos figure:first-child { grid-column: 1 / -1; }
}
/* En los móviles, de dos en dos «15 materiales» y «34×32×34 cm» se partían. */
@media (max-width: 480px) {
  .sobre-datos.grid--4 { grid-template-columns: 1fr; }
  .sobre-datos__v { font-size: 24px; }
}

/* «Quién está detrás»: el texto junto al panel, con menos relleno en el móvil
   (con 45 px por lado la columna se quedaba en 260 px). */
.sobre-quien__txt { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) {
  .sobre-quien__txt { padding: 28px 22px 30px; }
}