/* =====================================================================
   Neil Balcero — hoja de estilo única
   ---------------------------------------------------------------------
   Reglas de la casa:
     1. Una sola familia tipográfica. Nada de monoespaciada decorativa.
     2. Solo lenguaje natural: sin iconos, sin flechas, sin viñetas raras,
        sin chips. Si algo se puede decir con una palabra, se dice.
     3. Leer cómodo manda sobre impresionar: cuerpo grande, línea ancha
        pero no infinita, mucho contraste, mucho aire.
     4. Nada de animación. La página no se mueve sola.
   ===================================================================== */

:root {
  /*  Tema oscuro: fondo negro, letra blanca. El negro no es puro (#000
      vibra y cansa); un casi-negro se lee mejor. La letra tampoco es
      blanco puro, por lo mismo.                                        */
  --papel:  #0C0D10;   /* fondo casi negro */
  --tinta:  #F4F5F7;   /* casi blanco */
  --gris:   #9DA3AC;   /* 6.5:1 sobre el fondo, pasa accesibilidad */
  --linea:  #24272E;   /* separadores tenues */
  --borde:  #3A3E46;   /* borde visible para botones sobre negro */

  --marco:  min(1080px, 88vw);
  --lectura: 34em;                      /* medida cómoda de lectura */
  --paso:   clamp(72px, 10vw, 136px);   /* aire entre secciones */

  /*  STIX Two Text: la más humanista del paquete STIX. Nació para
      publicaciones científicas, así que aguanta texto largo sin cansar
      y tiene los cortes finos que pide una página tan desnuda.        */
  --letra: "STIX Two Text", Georgia, "Times New Roman", serif;

  /*  Los títulos van en la STIX de matemáticas. Es la misma familia, así
      que no desentona, pero tiene otro aire: más fina, más de pizarra.
      Solo trae un grosor, y no hace falta más: manda el tamaño.       */
  --titular: "STIX Two Math", "STIX Two Text", Georgia, serif;

  --mano: "Caveat", cursive;   /* solo dentro de los dibujos */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 20px;          /* la STIX tiene ojo pequeño: pide un punto más */
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /*  Todo lo que la fuente sabe hacer, encendido: ligaduras, pares de
      letras bien ajustados y cifras de estilo antiguo, que en un texto
      corrido se leen como una palabra más y no como un cartel.        */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

/* --- Texto ---------------------------------------------------------- */

/*  Tres registros distintos, para que nada suene igual:
      titulares   -> la STIX de matemáticas, fina y grande
      cuerpo      -> la STIX de texto, para leer largo
      rótulos     -> versalitas espaciadas, en botones y navegación     */

h1, h2 {
  font-family: var(--titular);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h3 {
  font-family: var(--letra);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(40px, 6vw, 68px); }
h2 { font-size: clamp(30px, 3.8vw, 44px); }

p { margin: 0 0 1.1em; max-width: var(--lectura); }
p:last-child { margin-bottom: 0; }

.guia {           /* frase de apoyo bajo un título */
  color: var(--gris);
  font-size: 20px;
  max-width: var(--lectura);
}

.menudo { font-size: 16px; color: var(--gris); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-thickness: 2px; }

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

/* --- Estructura ----------------------------------------------------- */

.marco { width: var(--marco); margin-inline: auto; }

section { padding-block: var(--paso); }
section + section { border-top: 1px solid var(--linea); }

.titulo-seccion { margin-bottom: 2.2rem; }
.titulo-seccion p { margin-top: 0.7rem; }

/* --- Cabecera ------------------------------------------------------- */

.cabecera {
  padding-block: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.marca {
  font-family: var(--titular);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
}

.cabecera nav { display: flex; gap: 28px; }

/*  Los rótulos no se leen, se reconocen: versalitas y algo de aire
    entre letras los separan del texto corrido sin gritar.            */
.cabecera nav a, .boton, .boton-liso {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
  font-weight: 500;
}
.cabecera nav a { font-size: 19px; }

/* --- Portada -------------------------------------------------------- */

.portada { padding-top: clamp(40px, 6vw, 76px); }

.portada-reja {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 860px) {
  .portada-reja { grid-template-columns: 1.15fr 0.85fr; }
}

.portada h1 { margin-bottom: 1.1rem; }
.portada .guia { margin-bottom: 1.9rem; }

.retrato {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
}

/* --- Acciones ------------------------------------------------------- */

.acciones { display: flex; flex-wrap: wrap; gap: 14px; }

.boton {
  display: inline-block;
  padding: 13px 28px;
  background: var(--tinta);
  color: var(--papel);
  font-size: 19px;
  text-decoration: none;
  border: 1px solid var(--tinta);
}
.boton:hover { background: var(--papel); color: var(--tinta); }

.boton-liso {
  display: inline-block;
  padding: 13px 28px;
  background: transparent;
  color: var(--tinta);
  font-size: 19px;
  text-decoration: none;
  border: 1px solid var(--borde);
}
.boton-liso:hover { border-color: var(--tinta); }

/* --- Listas de contenido -------------------------------------------- */
/*  Sin viñetas: cada entrada se separa con una línea fina y su nombre
    en negrita. Se lee como un índice, no como una tabla de precios.    */

.indice { list-style: none; margin: 0; padding: 0; }

.indice > li {
  padding-block: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--linea);
}
.indice > li:first-child { border-top: 0; padding-top: 0; }

.entrada {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 40px;
  align-items: baseline;
}
@media (min-width: 760px) {
  .entrada { grid-template-columns: 1fr auto; }
  .entrada .precio { text-align: right; white-space: nowrap; }
}

.entrada h3 { margin-bottom: 2px; }
.entrada p { margin-bottom: 0; }
.entrada .detalle { color: var(--gris); font-size: 17px; }

/*  Los precios sí llevan cifras de caja alta y de ancho fijo: así las
    columnas de números quedan a plomo unas debajo de otras.          */
.precio {
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- El tablero dibujado a mano -------------------------------------- */
/*  Es un dibujo, no un adorno: por eso lleva su pie explicando qué es.  */

/*  El dibujo carga con toda la explicación, así que se sale del margen
    del texto y ocupa el ancho entero. Cuanto más grande, más se lee su
    letra a mano.                                                       */
.tablero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: clamp(16px, 3vw, 56px);
}
.tablero svg {
  display: block;
  width: 100%;
  height: auto;
}
.tablero figcaption {
  margin-top: 14px;
  color: var(--gris);
  font-size: 16px;
  max-width: var(--lectura);
}

/*  El tablero se lee de izquierda a derecha y en pantalla estrecha se
    apretaría hasta ser ilegible. Ahí se deja desplazar a lo ancho.     */
@media (max-width: 700px) {
  .tablero { overflow-x: auto; }
  .tablero svg { width: 900px; max-width: none; }
  .tablero figcaption { position: sticky; left: 0; }
}

.remate {
  margin-top: clamp(30px, 4vw, 44px);
  max-width: var(--lectura);
}

/* --- Marcas con las que trabajo ------------------------------------- */
/*  Se dejan con su forma y su color de siempre: son marcas reales y se
    reconocen. Al lado va su nombre escrito, para que no sea un dibujo
    suelto que haya que adivinar.                                       */

.titulo-menor {
  font-size: 17px;
  font-weight: 500;
  color: var(--gris);
  letter-spacing: 0;
  margin-bottom: 1.4rem;
}

.marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 42px;
}

.marca-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 17px;
}
.marca-item svg { flex: none; display: block; }

/* --- Logo de cada proyecto ------------------------------------------ */
/*  Los logos no miden lo mismo: unos son cuadrados y otros alargados.
    Por eso el logo vive en una columna de ancho FIJO. Así todos los
    nombres empiezan en la misma vertical y la lista queda alineada,
    y cada logo conserva su proporción real: no se estira ninguno.     */

.con-logo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
}
@media (min-width: 620px) {
  .con-logo { grid-template-columns: 150px 1fr; gap: 30px; }
}

/*  Tarjeta clara detrás de cada logo: sobre el fondo negro, un logo
    oscuro desaparecería. Poniéndolos todos sobre una tarjeta blanca,
    cualquier logo (claro, oscuro o de color) se lee igual, y no importa
    de qué color sea el que subas después.                              */
.logo-caja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 7px;
  padding: 8px 12px;
  height: 50px;
  width: fit-content;
  max-width: 100%;
}

.logo-proyecto {
  max-height: 34px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.entrada--proyecto { align-items: center; }

/* --- Quién soy ------------------------------------------------------ */

.sobre-mi {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--lectura);
}
.sobre-mi li {
  padding-block: 14px;
  border-top: 1px solid var(--linea);
}
.sobre-mi li:first-child { border-top: 0; padding-top: 0; }

/* --- Pie ------------------------------------------------------------ */

.pie {
  padding-block: 48px 64px;
  border-top: 1px solid var(--linea);
  color: var(--gris);
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- La puerta de las carpetas -------------------------------------- */

.puerta-cuerpo { min-height: 100vh; }

.puerta {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 24px;
}

.puerta-caja { width: 100%; max-width: 420px; }

.puerta-sobre {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  color: var(--gris);
  font-size: 18px;
  margin: 0 0 6px;
}

.puerta h1 { margin-bottom: 0.7rem; }
.puerta .guia { margin-bottom: 1.8rem; }

.puerta-form {
  display: grid;
  gap: 10px;
  margin-bottom: 1.6rem;
}
.puerta-form label {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  color: var(--gris);
  font-size: 17px;
}
.puerta-form input {
  font-family: var(--letra);
  font-size: 20px;
  padding: 13px 15px;
  border: 1px solid var(--tinta);
  background: var(--papel);
  color: var(--tinta);
  border-radius: 0;
  width: 100%;
}
.puerta-form input:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}
.puerta-form .boton {
  margin-top: 4px;
  text-align: center;
  cursor: pointer;
}

.puerta-error {
  border-left: 3px solid var(--tinta);
  padding: 8px 0 8px 14px;
  margin-bottom: 1.4rem;
  max-width: none;
}

/* --- Documento de firma --------------------------------------------- */

.documento { max-width: 720px; padding-block: 6vh 12vh; }

.rotulo-doc {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  color: var(--gris);
  font-size: 18px;
  margin: 0 0 6px;
}
.documento h1 { margin-bottom: 1.6rem; }

.doc-texto {
  border-top: 1px solid var(--linea);
  padding-top: 1.6rem;
}
.doc-texto p { max-width: none; }

.firma-hecha {
  border: 1px solid var(--tinta);
  padding: 18px 20px;
  margin-bottom: 2rem;
}
.firma-hecha p { max-width: none; margin-bottom: 1rem; }

.doc-firma {
  margin-top: 2.6rem;
  border-top: 1px solid var(--linea);
  padding-top: 1.8rem;
}
.doc-firma h2 { margin-bottom: 0.5rem; }

.lienzo-marco {
  border: 1px solid var(--tinta);
  background: #fff;
  max-width: 520px;
  margin-top: 1rem;
}
.lienzo {
  display: block;
  width: 100%;
  height: 200px;
  touch-action: none;
  cursor: crosshair;
}

/* --- Impresión ------------------------------------------------------ */

@media print {
  body { font-size: 12pt; }
  .cabecera nav, .acciones, .doc-firma { display: none; }
}