/* Estructura del escaparate. Solo usa variables de tokens.css: nada de valores de marca aqui.
   Movil primero; los saltos amplian la composicion sin cambiar el orden del HTML. */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--tam-base);
  font-weight: var(--peso-texto);
  line-height: var(--interlineado);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1; padding-block: var(--esp-5) var(--seccion); }

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

a { color: var(--color-enlace); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--transicion), text-decoration-color var(--transicion); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 3px; border-radius: var(--radio-pequeno); }

::selection { background: var(--color-resalte); color: var(--color-texto); }

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  font-variation-settings: var(--ajustes-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: var(--interlineado-titulos);
  margin: 0 0 var(--esp-3);
  text-wrap: balance;
}
h1 { font-size: var(--tam-h1); }
h2 { font-size: var(--tam-h2); }
h3 { font-size: var(--tam-h3); }
p { margin: 0 0 var(--esp-3); text-wrap: pretty; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: var(--esp-3); top: -10rem; z-index: 10;
  background: var(--color-monitor); color: var(--color-monitor-texto);
  display: inline-flex; align-items: center; min-height: var(--toque-min);
  padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-pequeno);
  font-family: var(--fuente-mono); font-size: var(--tam-pequeno);
}
.saltar:focus { top: var(--esp-3); }

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

/* Piezas comunes */
.antetitulo {
  font-family: var(--fuente-mono);
  font-size: var(--tam-pequeno);
  font-weight: var(--peso-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--color-etiqueta);
  margin: 0 0 var(--esp-3);
}
.entradilla { font-size: var(--tam-entradilla); line-height: var(--interlineado-ajustado); color: var(--color-texto-suave); max-width: var(--medida-corta); margin-bottom: var(--esp-5); }
.prosa { max-width: var(--medida); }
.prosa .entradilla { color: var(--color-texto); margin-bottom: var(--esp-4); }
.resalte {
  background: linear-gradient(transparent 58%, var(--color-resalte) 58%, var(--color-resalte) 92%, transparent 92%);
  padding-inline: 0.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-4); margin: 0; }
.enlace-flecha {
  display: inline-flex; align-items: center; min-height: var(--toque-min);
  font-family: var(--fuente-mono); font-size: var(--tam-pequeno); font-weight: var(--peso-mono);
  color: var(--color-texto); text-decoration: none;
}
.enlace-flecha::after { content: "\2192"; margin-left: var(--esp-2); transition: transform var(--transicion); }
.enlace-flecha:hover { color: var(--color-enlace); }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* Botones: pildora azul con sombra de pixel que se hunde al pulsar */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--toque-min);
  padding: var(--esp-2) var(--esp-4);
  background: var(--color-acento);
  color: var(--color-acento-texto);
  border: 2px solid var(--color-borde-fuerte);
  border-radius: var(--radio-boton);
  box-shadow: var(--sombra-pixel);
  font-family: var(--fuente-texto);
  font-size: var(--tam-texto-sec);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.boton:hover { background: var(--color-acento-hover); transform: translate(-2px, -2px); box-shadow: var(--sombra-pixel-alta); }
.boton:active { transform: translate(4px, 4px); box-shadow: none; }
.boton-grande { font-size: var(--tam-base); padding: var(--esp-3) var(--esp-5); }
.boton-inactivo {
  display: inline-flex; align-items: center; min-height: var(--toque-min);
  font-family: var(--fuente-mono); font-size: var(--tam-pequeno); color: var(--color-texto-suave);
  cursor: not-allowed;
}
.pronto { margin: 0; font-family: var(--fuente-mono); font-size: var(--tam-pequeno); color: var(--color-texto-suave); }

/* Monitor: bloque de tinta con lineas de terminal */
.monitor {
  margin: 0;
  background: var(--color-monitor);
  color: var(--color-monitor-texto);
  border-radius: var(--radio-monitor);
  box-shadow: var(--sombra-pixel-acento);
  padding: var(--esp-4);
}
.monitor a { color: var(--color-monitor-enlace); }
.monitor :focus-visible { outline-color: var(--color-monitor-foco); }
.monitor-texto { font-family: var(--fuente-mono); font-size: var(--tam-pequeno); line-height: 1.7; letter-spacing: var(--tracking-mono); }
.monitor-texto p { margin: 0; }
.monitor-orden { color: var(--color-monitor-texto); }
.monitor-salida { color: var(--color-monitor-suave); margin-bottom: var(--esp-2); }
.prompt { color: var(--color-fosforo); font-weight: var(--peso-fuerte); }
.cursor {
  display: inline-block; width: 0.6em; height: 1.1em; vertical-align: -0.2em;
  background: var(--color-cursor);
  animation: parpadeo 1.1s linear infinite;
}
@keyframes parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Cabecera */
.cabecera { background: var(--color-fondo); }
.cabecera::after { content: ""; display: block; height: var(--franja-alto); background: var(--franja); }
.cabecera-fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
  padding-block: var(--esp-3) var(--esp-2);
}
.wordmark { display: inline-flex; align-items: center; min-height: var(--toque-min); border-radius: var(--radio-pequeno); }
.wordmark img { height: var(--logo-alto); width: auto; }
.nav-principal { width: 100%; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--borde); }
.nav a {
  display: flex; align-items: center; justify-content: center; min-height: var(--toque-min);
  font-family: var(--fuente-mono); font-size: var(--tam-pequeno); font-weight: var(--peso-mono);
  color: var(--color-texto-suave); text-decoration: none;
}
.nav a::before { content: ">"; margin-right: 0.4em; color: var(--color-etiqueta); opacity: 0; transition: opacity var(--transicion); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-texto); }
.nav a:hover::before, .nav a[aria-current="page"]::before { opacity: 1; }

/* Portada */
.portada { display: grid; gap: var(--esp-5); padding-block: var(--esp-3) var(--esp-5); align-items: center; }
.portada-titulo { font-size: var(--tam-portada); margin-bottom: var(--esp-4); max-width: 11em; }
.portada-lema { font-size: var(--tam-entradilla); line-height: var(--interlineado-ajustado); color: var(--color-texto-suave); max-width: var(--medida-corta); margin-bottom: var(--esp-5); }
.portada-monitor { max-width: var(--ancho-monitor); width: 100%; justify-self: center; display: grid; gap: var(--esp-4); }
.monitor-avatar { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radio); }

/* Entrada sobria de la portada */
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.portada-texto > * { animation: aparecer var(--entrada) both; }
.portada-texto > :nth-child(2) { animation-delay: 60ms; }
.portada-texto > :nth-child(3) { animation-delay: 120ms; }
.portada-texto > :nth-child(4) { animation-delay: 180ms; }
.portada-monitor { animation: aparecer var(--entrada) 220ms both; }

/* Secciones y cabezas de pagina */
.seccion { padding-top: var(--seccion); }
.seccion-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-4); }
.seccion-cabeza h2 { margin: 0; }
.cabeza-pagina { padding-block: var(--esp-3) 0; }
.cabeza-pagina h1 { margin-bottom: var(--esp-4); }

/* Aviso de disenos de prueba */
.aviso {
  font-family: var(--fuente-mono); font-size: var(--tam-pequeno); line-height: var(--interlineado-ajustado);
  border-left: 4px solid var(--color-prueba);
  padding: var(--esp-2) var(--esp-3);
  margin-bottom: var(--esp-5);
  max-width: var(--medida);
}

/* Galeria */
.rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--columna-min)), 1fr));
  gap: var(--esp-6) var(--esp-4);
}
.tarjeta { display: flex; flex-direction: column; gap: var(--esp-3); }
.tarjeta-img {
  position: relative; margin: 0;
  background: var(--color-superficie);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: var(--proporcion-imagen);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta:hover .tarjeta-img { border-color: var(--color-borde-fuerte); box-shadow: var(--sombra-pixel); transform: translate(-2px, -2px); }
.tarjeta-img img { width: 100%; height: 100%; object-fit: contain; }
.etiqueta-prueba {
  position: absolute; top: var(--esp-3); left: var(--esp-3); margin: 0;
  background: var(--color-fondo); color: var(--color-prueba);
  border: 1px solid var(--color-prueba); border-radius: var(--radio-pequeno);
  padding: var(--esp-1) var(--esp-2);
  font-family: var(--fuente-mono); font-size: var(--tam-mini); font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-mono);
}
.tarjeta-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); flex: 1; }
.tarjeta-meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); font-family: var(--fuente-mono); font-size: var(--tam-mini); color: var(--color-texto-suave); }
.tarjeta-titulo { margin: 0; font-size: var(--tam-h3); }
.tarjeta-desc { color: var(--color-texto-suave); font-size: var(--tam-texto-sec); line-height: var(--interlineado-ajustado); margin: 0; max-width: 28em; }
.tarjeta-accion { margin-top: auto; padding-top: var(--esp-2); }

/* Estado vacio y error: un monitor con caracter */
.vacio, .error { max-width: 40rem; }
.vacio-cabeza { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.vacio-avatar { width: 4rem; height: 4rem; border-radius: var(--radio); flex-shrink: 0; }
.vacio-estado { margin: 0; font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-variation-settings: var(--ajustes-titulos); letter-spacing: var(--tracking-titulos); font-size: var(--tam-h3); line-height: var(--interlineado-titulos); color: var(--color-monitor-texto); }
.vacio .monitor-texto, .error .monitor-texto { font-size: var(--tam-texto-sec); }
.vacio-accion { margin: var(--esp-4) 0 0; padding-top: var(--esp-3); border-top: 1px dashed var(--color-borde-monitor); color: var(--color-monitor-suave); font-size: var(--tam-texto-sec); }
.error { margin-bottom: var(--esp-5); }

/* About */
.sobre { display: grid; gap: var(--esp-5); padding-top: var(--esp-3); }
.sobre-firma {
  background: var(--color-superficie);
  border: 2px solid var(--color-borde-fuerte);
  border-radius: var(--radio-monitor);
  box-shadow: var(--sombra-pixel-acento);
  padding: var(--esp-4);
}
.sobre-firma::after { content: ""; display: block; height: var(--franja-alto); margin-top: var(--esp-4); background: var(--franja); border-radius: var(--radio-pequeno); }
.firma { width: 100%; max-width: min(100%, var(--ancho-firma)); margin: 0 auto; }
.ficha {
  margin-block: var(--esp-5);
  border: 2px solid var(--color-borde-fuerte);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra-pixel);
  padding: var(--esp-4);
  max-width: var(--medida);
}
.ficha-titulo { font-family: var(--fuente-mono); font-variation-settings: normal; font-size: var(--tam-pequeno); font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-mono); line-height: var(--interlineado-ajustado); color: var(--color-etiqueta); margin: 0 0 var(--esp-3); }
.ficha p { margin: 0; font-size: var(--tam-texto-sec); }
.ficha-lista { margin: 0; display: grid; gap: var(--esp-3); }
.ficha-lista div { display: grid; gap: var(--esp-1); padding-bottom: var(--esp-3); border-bottom: 1px dashed var(--color-borde); }
.ficha-lista div:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha-lista dt { font-family: var(--fuente-mono); font-size: var(--tam-mini); font-weight: var(--peso-mono); color: var(--color-texto-suave); }
.ficha-lista dd { margin: 0; font-size: var(--tam-texto-sec); line-height: var(--interlineado-ajustado); }
.ficha-estrecha { max-width: var(--medida-corta); }
.sobre-cierre { max-width: var(--medida); }
/* Enlaces sueltos al final de un texto: area activa de 44 px como el resto. */
.vacio-accion a, .sobre-cierre a { display: inline-flex; align-items: center; min-height: var(--toque-min); }

/* Contacto */
.correo-grande { margin: 0 0 var(--esp-5); }
.correo-grande a {
  font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-variation-settings: var(--ajustes-titulos);
  letter-spacing: var(--tracking-titulos); font-size: var(--tam-correo); line-height: 1.1;
  color: var(--color-texto); text-decoration-color: var(--color-resalte); text-decoration-thickness: 0.12em; text-underline-offset: 0.16em;
  overflow-wrap: anywhere;
  display: inline-block; padding-block: var(--esp-2);
}
.correo-grande a:hover { color: var(--color-enlace); }

/* Pie en tinta */
.pie { background: var(--color-monitor); color: var(--color-monitor-suave); font-size: var(--tam-texto-sec); }
.pie::before { content: ""; display: block; height: var(--franja-alto); background: var(--franja); }
.pie a { color: var(--color-monitor-enlace); }
.pie :focus-visible { outline-color: var(--color-monitor-foco); }
.pie-rejilla { display: grid; gap: var(--esp-5); padding-block: var(--esp-6) var(--esp-5); }
.pie-logo { display: inline-flex; min-height: var(--toque-min); align-items: center; }
.pie-logo img { height: var(--logo-alto); width: auto; }
.pie-lema { font-family: var(--fuente-mono); font-size: var(--tam-pequeno); margin: var(--esp-3) 0 0; max-width: 24em; }
.pie-nav { list-style: none; margin: 0; padding: 0; display: grid; }
.pie-nav a { display: inline-flex; align-items: center; min-height: var(--toque-min); color: var(--color-monitor-texto); text-decoration: none; font-family: var(--fuente-mono); font-size: var(--tam-pequeno); }
.pie-nav a::before { content: ">"; margin-right: 0.5em; color: var(--color-fosforo); }
.pie-nav a:hover { text-decoration: underline; }
.pie-titulo { font-family: var(--fuente-mono); font-size: var(--tam-mini); margin: 0 0 var(--esp-1); }
.pie-contacto a { display: inline-flex; align-items: center; min-height: var(--toque-min); overflow-wrap: anywhere; }
.pie-legal { padding-bottom: var(--esp-4); font-size: var(--tam-mini); font-family: var(--fuente-mono); }
.pie-legal p { margin: 0; padding-top: var(--esp-4); border-top: 1px solid var(--color-borde-monitor); }

/* Tableta y escritorio */
@media (min-width: 40em) {
  .cabecera-fila { flex-wrap: nowrap; padding-block: var(--esp-3); }
  .wordmark img { height: var(--logo-alto-grande); }
  .nav-principal { width: auto; }
  .nav { display: flex; gap: var(--esp-1); border-top: 0; }
  .nav a { padding-inline: var(--esp-3); justify-content: flex-start; }
  .pie-rejilla { grid-template-columns: 2fr 1fr 1.5fr; }
  .ficha-lista div { grid-template-columns: 10em 1fr; gap: var(--esp-3); align-items: baseline; }
}

@media (min-width: 60em) {
  main { padding-top: var(--esp-6); }
  .portada { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-6); padding-block: var(--esp-4) var(--esp-6); }
  .portada-monitor { justify-self: end; }
  .rejilla-destacados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pagina-contacto main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--esp-6); align-content: start; }
  .pagina-contacto main > * { grid-column: 1; }
  .pagina-contacto .ficha { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-block: 0 var(--esp-5); }
  .sobre { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--esp-6); align-items: start; }
  .sobre-firma { position: sticky; top: var(--esp-5); }
}

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