/* Estilo de las páginas de texto (about, contact, privacy, 404).
   Usa los mismos tokens que index.html. La portada sigue siendo un archivo
   solo: esta hoja existe para no repetir 600 líneas de CSS en cuatro páginas. */

:root{
  --bg:#0a0a0b;
  --fg:#e4e4e5;
  --fg-bright:#ffffff;
  --fg-mid:#a3a3a5;
  --fg-dim:#8a8a8d;
  --fg-faint:#7c7c80;
  --line:#1c1c1e;
  --surface:#0e0e0f;

  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono","SF Mono",ui-monospace,Menlo,monospace;

  --pad:clamp(1.25rem,4.4vw,4rem);
  --sec-gap:clamp(3.5rem,7vw,5.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

::selection{background:#fff;color:#0a0a0b}
a{color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}

/* saltar la barra de arriba: aparece sólo cuando lo enfoca el teclado */
.saltar{
  position:absolute;
  inset-inline-start:-9999px;
  inset-block-start:0;
  z-index:10;
  padding:.7rem 1.1rem;
  border-radius:0 0 7px 0;
  background:var(--fg-bright);
  color:var(--bg);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}
.saltar:focus{inset-inline-start:0}

.wrap{max-width:46rem;margin:0 auto;padding:0 var(--pad)}

/* ---------- barra de arriba ---------- */

.top{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem 1.5rem;
  padding:clamp(1.5rem,4vw,2.5rem) 0;
  border-bottom:1px solid var(--line);
}

.top .home{
  transition:color .15s ease;
  font-size:15px;
  font-weight:500;
  color:var(--fg-bright);
  text-decoration:none;
  letter-spacing:-.015em;
}
.top .home:hover{text-decoration:underline;text-underline-offset:4px}

.top nav{display:flex;flex-wrap:wrap;gap:1.1rem}
.top nav a{
  /* inline-block + padding para que el área de toque llegue a los 24px
     que pide WCAG 2.5.8: el texto de 12px solo da 19px */
  display:inline-block;
  padding:.32rem 0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-faint);
  text-decoration:none;
  transition:color .16s ease;
}
.top nav a:hover{color:var(--fg)}
.top nav a[aria-current="page"]{color:var(--fg-bright)}

/* ---------- cuerpo ---------- */

main{padding:clamp(2.5rem,6vw,4rem) 0 var(--sec-gap);scroll-margin-top:1rem}

.eyebrow{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--fg-faint);
  text-transform:uppercase;
  margin-bottom:1rem;
}

h1{
  margin:0 0 1.25rem;
  font-size:clamp(2rem,1.4rem + 2.6vw,3rem);
  line-height:1.06;
  font-weight:600;
  letter-spacing:-.04em;
  color:var(--fg-bright);
  text-wrap:balance;
}

h2{
  margin:2.75rem 0 .9rem;
  line-height:1.25;
  font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--fg-bright);
  text-wrap:balance;
}

p{margin:0 0 1.15rem;color:var(--fg-mid);max-width:56ch;text-wrap:pretty}
p strong{color:var(--fg);font-weight:500}
main a{color:var(--fg);text-decoration:underline;text-decoration-color:#5e5e64;text-underline-offset:3px;transition:text-decoration-color .16s ease}
main a:hover{text-decoration-color:var(--fg-bright)}

.lede{font-size:clamp(1.05rem,.98rem + .4vw,1.2rem);color:var(--fg);max-width:34ch;line-height:1.45;letter-spacing:-.015em}

code{
  font-family:var(--mono);
  font-size:.88em;
  color:var(--fg);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:5px;
  padding:.12em .38em;
  overflow-wrap:anywhere;
}

ul{margin:0 0 1.15rem;padding-inline-start:1.15rem;color:var(--fg-mid);max-width:56ch}
li{margin-bottom:.45rem}
li::marker{color:var(--fg-faint)}

/* lista de datos de contacto */
.datos{list-style:none;margin:0 0 1.6rem;padding:0}
.datos li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.4rem 1rem;
  padding:.85rem 0;
  margin:0;
  border-bottom:1px solid var(--line);
}
.datos .k{
  flex:0 0 8.5rem;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-faint);
}
.datos .v{flex:1 1 12rem;color:var(--fg);min-width:0;overflow-wrap:anywhere}
.datos .v a{display:inline-block;padding:.18rem 0}

/* en pantallas angostas la etiqueta va arriba: el mail no entra al lado */
@media (max-width:520px){
  .datos li{flex-direction:column;gap:.3rem}
  .datos .k,.datos .v{flex:none}
}

/* ---------- pie ---------- */

footer{
  border-top:1px solid var(--line);
  padding:1.5rem 0 3rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-faint);
}
footer a{display:inline-block;padding:.28rem 0;color:inherit;text-decoration:none;transition:color .15s ease}
footer a:hover{color:var(--fg)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}