/* ============================================================
   TRAMA — trama.nettsis.com · main.css · v1.0
   Base: design/tokens.css (Design System TRAMA-BRAND-F2 v1.0)
   Tinta, papel y sello. El color es información, no decoración.
   ============================================================ */

/* ---------- 0. Fuentes (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("../fonts/source-code-pro-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:root {
  --papel: #FAF9F7;
  --pliego: #F2F1ED;
  --tinta: #1F2733;
  --tinta-suave: #4E5A69;
  --hilo: #DDDAD2;
  --hilo-fuerte: #A9A499;
  --sello: #7C3A2D;
  --sello-sobre-reverso: #C08472;
  --reverso: #14181F;
  --papel-sobre-reverso: #E9E7E1;
  --verificado: #2E6B4F;
  --advertencia: #8A6220;
  --error: #B3362B;

  --voz-institucional: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --voz-trabajo: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
  --voz-evidencia: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;

  --t-hero: clamp(2.15rem, 1.4rem + 3vw, 3.4rem);
  --t-titulo: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem);
  --t-subtitulo: 1.3125rem;
  --t-cuerpo: 1.0625rem;
  --t-small: .9375rem;
  --t-label: .75rem;
  --t-dato: 1.5rem;

  --esp-1: .25rem; --esp-2: .5rem; --esp-3: .75rem; --esp-4: 1rem;
  --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 3rem; --esp-8: 4rem;
  --esp-9: 6rem; --esp-10: 8rem;

  --ancho-pagina: 72rem;
  --ancho-prosa: 68ch;
  --margen-lateral: clamp(1.25rem, 5vw, 3rem);
  --seccion-v: clamp(4.5rem, 10vh, 8rem);
  --radio: 2px;

  --dur-micro: 140ms;
  --dur-media: 280ms;
  --dur-trazo: 900ms;
  --curva-asentar: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papel); scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--voz-trabajo);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 var(--esp-4); line-height: 1.2; text-wrap: balance; }
h1 { font-family: var(--voz-institucional); font-size: var(--t-hero); font-weight: 600; line-height: 1.15; }
h2 { font-family: var(--voz-institucional); font-size: var(--t-titulo); font-weight: 600; }
h3 { font-family: var(--voz-trabajo); font-size: var(--t-subtitulo); font-weight: 600; }

p { margin: 0 0 var(--esp-4); max-width: var(--ancho-prosa); }
ul, ol { max-width: var(--ancho-prosa); }
small { font-size: var(--t-small); color: var(--tinta-suave); }

a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-micro) var(--curva-asentar); }
a:hover { color: var(--sello); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

::selection { background: var(--tinta); color: var(--papel); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--esp-4); top: -100px;
  background: var(--tinta); color: var(--papel);
  padding: var(--esp-2) var(--esp-4); border-radius: var(--radio);
  z-index: 100; transition: top var(--dur-micro);
}
.skip-link:focus { top: var(--esp-2); color: var(--papel); }

/* ---------- 3. Utilidades ---------- */
.label {
  font-family: var(--voz-evidencia);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.label--sello { color: var(--sello); }
.dato { font-variant-numeric: tabular-nums; }

.contenedor { max-width: var(--ancho-pagina); margin: 0 auto; padding-inline: var(--margen-lateral); }
.seccion { padding-block: var(--seccion-v); }
.seccion--pliego { background: var(--pliego); }
.seccion > .contenedor > .label { display: block; margin-bottom: var(--esp-2); }

.telar {
  background-image:
    linear-gradient(to right, rgba(31, 39, 51, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31, 39, 51, .04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--voz-trabajo);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-micro) var(--curva-asentar),
              border-color var(--dur-micro) var(--curva-asentar),
              color var(--dur-micro) var(--curva-asentar);
}
.btn--primario { background: var(--tinta); color: var(--papel); }
.btn--primario:hover { background: var(--reverso); color: var(--papel); }
.btn--secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--secundario:hover { background: var(--pliego); color: var(--tinta); }
.btn--terciario { background: none; border: 0; padding: 14px 0; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.btn--terciario::after { content: " →"; }
.btn--terciario:hover { color: var(--sello); }

.enlace-evidencia { color: var(--tinta); text-decoration-color: var(--sello); text-decoration-thickness: 1.5px; }
.enlace-evidencia:hover { color: var(--sello); }

/* ---------- 5. Badges ---------- */
.badge {
  display: inline-block;
  font-family: var(--voz-evidencia);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radio);
  border: 1px solid var(--hilo-fuerte);
  color: var(--tinta-suave);
  background: var(--papel);
}
.badge--critico { border-color: var(--error); color: var(--error); }
.badge--advertencia { border-color: var(--advertencia); color: var(--advertencia); }
.badge--ok { border-color: var(--verificado); color: var(--verificado); }

/* ---------- 6. Cards / callout / cita / calada ---------- */
.card {
  background: var(--papel);
  border: 1px solid var(--hilo);
  border-radius: var(--radio);
  padding: var(--esp-6);
}
.callout {
  border-left: 2px solid var(--tinta-suave);
  background: var(--pliego);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: var(--esp-4) var(--esp-5);
  max-width: var(--ancho-prosa);
}
.callout .label { display: block; margin-bottom: var(--esp-1); }
.callout p { margin: 0; font-size: var(--t-small); }

.calada { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.calada i { display: block; height: 1px; background: var(--hilo); }
.calada i:nth-child(1) { width: 100%; }
.calada i:nth-child(2) { width: 62%; background: var(--sello); opacity: .55; }
.calada i:nth-child(3) { width: 83%; }

/* ---------- 7. Navegación ---------- */
.encabezado {
  position: sticky; top: 0; z-index: 50;
  background: var(--papel);
  border-bottom: 1px solid var(--hilo);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-5);
  padding-block: var(--esp-3);
}
.nav__marca { display: flex; align-items: center; gap: var(--esp-3); text-decoration: none; }
.nav__enlaces { display: flex; align-items: center; gap: var(--esp-5); }
.nav__enlaces a:not(.btn) {
  text-decoration: none; font-size: var(--t-small);
  border-bottom: 1.5px solid transparent; padding-bottom: 2px;
  transition: border-color var(--dur-micro) var(--curva-asentar);
}
.nav__enlaces a:not(.btn):hover { border-bottom-color: var(--hilo-fuerte); }
.nav__enlaces a.activo { border-bottom-color: var(--sello); }
.nav__enlaces .btn { padding: 10px 20px; font-size: var(--t-small); }
.nav__toggle {
  display: none;
  background: none; border: 1px solid var(--tinta); border-radius: var(--radio);
  font-family: var(--voz-evidencia); font-size: var(--t-label);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta); padding: 8px 14px; cursor: pointer;
}

.wordmark {
  font-family: var(--voz-trabajo);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .3em;
  color: var(--tinta);
}
.wordmark .punto { color: var(--sello); }

@media (max-width: 767px) {
  .nav__toggle { display: block; }
  .nav__enlaces {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papel);
    border-bottom: 1px solid var(--hilo);
    flex-direction: column; align-items: flex-start;
    padding: var(--esp-4) var(--margen-lateral) var(--esp-5);
    gap: var(--esp-4);
  }
  .nav__enlaces.abierta { display: flex; }
}

/* ---------- 8. Hero ---------- */
.hero { padding-block: var(--esp-9) var(--seccion-v); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--esp-8); align-items: center;
}
.hero .label { display: block; margin-bottom: var(--esp-4); }
.hero__sub { font-size: var(--t-subtitulo); line-height: 1.55; color: var(--tinta-suave); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; margin-top: var(--esp-6); }
@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--esp-7); }
}

/* ---------- 9. Bloque de evidencia ---------- */
.evidencia {
  position: relative;
  background: var(--papel);
  border: 1px solid var(--hilo);
  border-radius: var(--radio);
  padding: var(--esp-6);
}
.evidencia__demo {
  position: absolute; top: var(--esp-3); right: var(--esp-4);
  font-family: var(--voz-evidencia); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--hilo-fuerte);
}
.evidencia__valor {
  font-family: var(--voz-institucional);
  font-size: var(--t-dato);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: var(--esp-2) 0 var(--esp-4);
}
.evidencia__hilo {
  border-left: 1px solid var(--sello);
  padding-left: var(--esp-4);
  display: grid;
  gap: var(--esp-2);
}
.evidencia__linea {
  font-family: var(--voz-evidencia);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}
.evidencia__linea b { color: var(--tinta); font-weight: 500; }

/* ---------- 10. Registro anotado (S3) ---------- */
.registro-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--esp-7); align-items: start;
  margin-top: var(--esp-6);
}
.registro { position: relative; background: var(--papel); border: 1px solid var(--hilo); border-radius: var(--radio); padding: var(--esp-5); }
.zona {
  border: 1px solid transparent; border-radius: var(--radio);
  padding: var(--esp-4);
  transition: background var(--dur-micro) var(--curva-asentar), border-color var(--dur-micro) var(--curva-asentar);
}
.zona + .zona { margin-top: var(--esp-2); }
.zona.activa { background: var(--pliego); border-color: var(--hilo); }
.zona__num {
  font-family: var(--voz-evidencia); font-size: var(--t-label); font-weight: 500;
  color: var(--sello); letter-spacing: .12em; display: block; margin-bottom: var(--esp-2);
}
.zona .evidencia__valor { margin: 0 0 var(--esp-2); }
.zona p { margin: 0; font-size: var(--t-small); }
.zona .finding {
  font-family: var(--voz-evidencia); font-size: .8125rem; line-height: 1.6;
  color: var(--tinta); margin: var(--esp-2) 0 0;
  max-width: none;
}
.notas { display: grid; gap: var(--esp-4); position: sticky; top: 6rem; }
.nota {
  border-left: 2px solid var(--hilo);
  padding: var(--esp-2) 0 var(--esp-2) var(--esp-4);
  transition: border-color var(--dur-micro) var(--curva-asentar);
}
.nota.activa { border-left-color: var(--sello); }
.nota .zona__num { margin-bottom: var(--esp-1); }
.nota p { margin: 0; font-size: var(--t-small); }
@media (max-width: 1023px) {
  .registro-grid { grid-template-columns: 1fr; gap: var(--esp-6); }
  .notas { position: static; }
}

/* ---------- 11. Pasos del flujo (S4) ---------- */
.pasos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-6) var(--esp-5); margin-top: var(--esp-6);
}
.paso { border-top: 1px solid var(--hilo-fuerte); padding-top: var(--esp-3); }
.paso .label { display: block; margin-bottom: var(--esp-2); }
.paso p { margin: 0; font-size: var(--t-small); color: var(--tinta-suave); }
@media (max-width: 1023px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .pasos { grid-template-columns: 1fr; } }

/* ---------- 12. Casos (S5) ---------- */
.casos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-5); margin-top: var(--esp-6); }
.caso { display: flex; flex-direction: column; gap: var(--esp-3); }
.caso h3 { font-size: 1.125rem; margin: 0; }
.caso .finding {
  font-family: var(--voz-evidencia); font-size: .8125rem; line-height: 1.6;
  color: var(--tinta-suave); margin: 0;
  max-width: none;
}
.caso .badge { align-self: flex-start; }
@media (max-width: 1023px) { .casos { grid-template-columns: 1fr; } }

/* ---------- 13. Autoridad humana (S6) ---------- */
.autoridad { text-align: center; }
.autoridad__lineas {
  font-family: var(--voz-institucional);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem);
  line-height: 1.5; font-weight: 600;
  max-width: 32ch; margin: 0 auto var(--esp-6);
  text-wrap: balance;
}
.autoridad__lineas em { color: var(--sello); font-style: normal; }
.autoridad__regla {
  font-family: var(--voz-evidencia); font-size: .8125rem;
  color: var(--tinta-suave); max-width: 52ch; margin: 0 auto;
}

/* ---------- 14. Verificación (S7) ---------- */
.comando {
  background: var(--pliego);
  border: 1px solid var(--hilo);
  border-radius: var(--radio);
  padding: var(--esp-4) var(--esp-5);
  font-family: var(--voz-evidencia);
  font-size: .875rem;
  overflow-x: auto;
  white-space: nowrap;
  margin: var(--esp-5) 0;
}
details.tecnico {
  border: 1px solid var(--hilo); border-radius: var(--radio);
  padding: var(--esp-4) var(--esp-5);
  max-width: var(--ancho-prosa);
  margin-top: var(--esp-5);
}
details.tecnico summary {
  cursor: pointer;
  font-family: var(--voz-evidencia); font-size: var(--t-label);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-suave);
}
details.tecnico[open] summary { margin-bottom: var(--esp-3); }
details.tecnico p { font-size: var(--t-small); margin-bottom: var(--esp-3); }
details.tecnico p:last-child { margin-bottom: 0; }

/* ---------- 15. Visión + piloto (S8) ---------- */
.piloto-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--esp-7); align-items: start; margin-top: var(--esp-6);
}
.contacto { background: var(--papel); border: 1px solid var(--hilo); border-radius: var(--radio); padding: var(--esp-6); }
.contacto .label { display: block; margin-bottom: var(--esp-2); }
.contacto ul { margin: var(--esp-3) 0 var(--esp-5); padding-left: 1.2rem; font-size: var(--t-small); color: var(--tinta-suave); }
.contacto li { margin-bottom: var(--esp-1); }
.contacto__acciones { display: flex; flex-direction: column; gap: var(--esp-3); align-items: flex-start; }
.contacto__email { font-family: var(--voz-evidencia); font-size: var(--t-small); }
@media (max-width: 1023px) { .piloto-grid { grid-template-columns: 1fr; } }

/* ---------- 16. Footer "reverso" ---------- */
.reverso {
  background: var(--reverso);
  color: var(--papel-sobre-reverso);
  padding-block: var(--esp-8);
  margin-top: var(--seccion-v);
}
.reverso a { color: var(--papel-sobre-reverso); }
.reverso a:hover { color: #fff; }
.reverso .wordmark { color: var(--papel-sobre-reverso); }
.reverso .wordmark .punto { color: var(--sello-sobre-reverso); }
.reverso .label { color: rgba(233, 231, 225, .6); }
.reverso__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: var(--esp-7);
}
.reverso__marca { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.reverso nav ul { list-style: none; margin: var(--esp-3) 0 0; padding: 0; display: grid; gap: var(--esp-2); }
.reverso nav a { text-decoration: none; font-size: var(--t-small); }
.reverso nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.reverso__legal {
  margin-top: var(--esp-7); padding-top: var(--esp-5);
  border-top: 1px solid rgba(233, 231, 225, .15);
  display: flex; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap;
  font-size: var(--t-small); color: rgba(233, 231, 225, .6);
}
@media (max-width: 767px) { .reverso__grid { grid-template-columns: 1fr; gap: var(--esp-6); } }

/* ---------- 17. Motion ---------- */
.asentar {
  opacity: 0;
  translate: 0 6px;
  transition: opacity var(--dur-media) var(--curva-asentar),
              translate var(--dur-media) var(--curva-asentar);
}
.asentar.visible { opacity: 1; translate: 0 0; }
.tejer {
  stroke-dasharray: var(--largo-hilo, 600);
  stroke-dashoffset: var(--largo-hilo, 600);
  transition: stroke-dashoffset var(--dur-trazo) var(--curva-asentar);
}
.tejer.visible { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .asentar { opacity: 1; translate: none; transition: none; }
  .tejer { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- 18. Páginas legales / 404 ---------- */
.pagina-simple { padding-block: var(--esp-8); min-height: 55vh; }
.pagina-simple h1 { font-size: var(--t-titulo); }
.pagina-simple h2 { font-size: var(--t-subtitulo); font-family: var(--voz-trabajo); margin-top: var(--esp-6); }
.pendiente {
  background: #F5EEDC; border-left: 2px solid var(--advertencia);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--t-small);
  max-width: var(--ancho-prosa);
}