/* ============================================================
   desCifrando — el departamento de investigación de CIFRA
   ------------------------------------------------------------
   ANCLA: el grafo. Vértices y aristas. No es decoración: es el
   objeto de estudio de las tres líneas (gráficas, video,
   identidad en imagen). Todo lo visual sale de ahí:

     · el papel es cuadriculado de cuaderno, no degradado
     · el acento único es el azul de tinta de pluma
     · el movimiento es SIEMPRE el mismo gesto: puntos
       dispersos que encuentran su lugar y luego se unen
       (primero los datos, después las relaciones)
     · la numeración es de publicación: §, N.001, L.02

   CIFRA es de noche y vende. desCifrando es de papel y publica.
   Misma gramática de la casa: tinta rota sobre hueso, tres
   roles tipográficos, mono en todos los metadatos.
   ============================================================ */

:root{
  --papel:#f4f1e8;
  --papel-2:#eae6d9;
  --tinta:#191a18;
  --tinta-2:#3d3e39;
  --gris:#7c7c72;
  --linea:#d7d2c2;
  --linea-fuerte:#b9b3a0;
  --azul:#1b3a5c;          /* único evento cromático */
  --azul-suave:#e2e7ee;

  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','Consolas','Courier New',monospace;

  --max:1220px;
  --texto:680px;           /* medida de lectura de un paper */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--serif);
  font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* clip, NO hidden: hidden vuelve a body un
                        contenedor de scroll y mata el sticky de .escena */
}
/* cuaderno cuadriculado: el plano donde se dibuja un grafo */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(25,26,24,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,26,24,.045) 1px,transparent 1px);
  background-size:34px 34px;
}
::selection{background:var(--azul);color:var(--papel);}
img{max-width:100%;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.col{max-width:var(--texto);}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-weight:600;line-height:1.12;letter-spacing:-.012em;}
.display{font-size:clamp(42px,6.4vw,86px);font-weight:600;line-height:1.02;}
.h2{font-size:clamp(27px,3.2vw,40px);}
.h3{font-size:clamp(20px,2vw,25px);}
p+p{margin-top:1em;}
a{color:inherit;}

.mono{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gris);
}
.sans{font-family:var(--sans);}
.lead{font-size:clamp(19px,1.9vw,22px);line-height:1.55;color:var(--tinta-2);}
.small{font-size:15px;color:var(--tinta-2);}
em{font-style:italic;}
strong{font-weight:600;}
code,.notacion{
  font-family:var(--mono);font-size:.88em;letter-spacing:0;
  background:var(--papel-2);padding:1px 5px;border-radius:3px;
  text-transform:none;color:var(--tinta);
}

/* enlaces de lectura: subrayado de pluma */
.texto a,a.link{
  color:var(--azul);text-decoration:none;
  border-bottom:1px solid rgba(27,58,92,.35);
  transition:border-color .2s ease,background .2s ease;
}
.texto a:hover,a.link:hover{border-bottom-color:var(--azul);background:var(--azul-suave);}

/* ---------- navegación ---------- */
nav{
  position:sticky;top:0;z-index:60;
  background:rgba(244,241,232,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:13px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--tinta);}
.marca svg{display:block;flex:none;}
/* EL WORDMARK: "des" en mono (la máquina) + "Cifrando" en serif (el papel).
   El prefijo se escribe distinto porque es lo que este lugar le hace a CIFRA. */
.wordmark{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1;}
.wordmark .des{
  font-family:var(--mono);font-weight:400;font-size:15px;
  letter-spacing:.02em;color:var(--gris);text-transform:lowercase;
}
.nav-links{display:flex;align-items:center;gap:22px;list-style:none;}
.nav-links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--tinta-2);padding:4px 0;
  border-bottom:1px solid transparent;
}
.nav-links a:hover{color:var(--azul);border-bottom-color:var(--azul);}
.nav-links a.vuelta{color:var(--gris);}
@media(max-width:820px){.nav-links li:not(:last-child){display:none;}}

/* ---------- botones ---------- */
.pill{
  display:inline-block;font-family:var(--mono);font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  color:var(--tinta);border:1px solid var(--linea-fuerte);border-radius:999px;
  padding:9px 18px;transition:border-color .22s,background .22s,color .22s;
  background:transparent;
}
.pill:hover{border-color:var(--azul);color:var(--azul);}
.pill.solid{background:var(--azul);border-color:var(--azul);color:var(--papel);}
.pill.solid:hover{background:transparent;color:var(--azul);}

/* ---------- secciones ---------- */
section{padding:clamp(64px,9vw,118px) 0;border-top:1px solid var(--linea);}
section:first-of-type{border-top:none;}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:38px;}
.sec-head .sig{font-family:var(--mono);font-size:13px;color:var(--azul);font-weight:500;}
.sec-head .tit{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);}
.sec-head::after{content:'';flex:1;height:1px;background:var(--linea);}

/* ---------- hero ---------- */
header.hero{
  padding:clamp(56px,8vw,96px) 0 clamp(56px,8vw,104px);
  border-bottom:1px solid var(--linea);
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);
  align-items:center;
}
/* sin esto, el ancho intrinseco del SVG del grafo estira la columna
   y en movil la pagina se sale por la derecha */
.hero-grid>*{min-width:0;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero-kicker{display:flex;align-items:center;gap:12px;margin-bottom:26px;}
.hero-kicker::before{content:'';width:36px;height:1px;background:var(--linea-fuerte);}
.hero h1 .des{
  font-family:var(--mono);font-weight:400;font-size:.42em;
  letter-spacing:.01em;color:var(--gris);text-transform:lowercase;
  vertical-align:.28em;
}
.hero-sub{margin-top:26px;max-width:520px;}
.hero-acciones{margin-top:34px;display:flex;flex-wrap:wrap;gap:11px;align-items:center;}

/* ---------- el grafo (ancla, en todas sus escalas) ---------- */
.grafo{width:100%;max-width:100%;height:auto;display:block;overflow:hidden;}
.grafo .arista{
  stroke:var(--azul);stroke-width:1.1;fill:none;opacity:.5;
  /* pathLength="1" en el marcado: así todas las aristas se trazan
     a la misma velocidad sin tener que medir ninguna a mano */
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:trazar 1.1s cubic-bezier(.5,0,.2,1) forwards;
  animation-delay:calc(1.15s + var(--i,0)*.055s);
}
.grafo .vertice{
  fill:var(--papel);stroke:var(--tinta);stroke-width:1.4;
  transform:translate(var(--dx,0px),var(--dy,0px));
  opacity:0;
  animation:asentar 1s cubic-bezier(.3,1.1,.35,1) forwards;
  animation-delay:calc(var(--i,0)*.07s);
}
.grafo .vertice.marcado{fill:var(--azul);stroke:var(--azul);}
.grafo text{font-family:var(--mono);font-size:9px;fill:var(--gris);letter-spacing:.06em;}
@keyframes trazar{to{stroke-dashoffset:0;}}
@keyframes asentar{to{transform:translate(0,0);opacity:1;}}

/* ---------- fichas de línea de investigación ---------- */
.lineas{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);}
.linea{
  background:var(--papel);padding:clamp(24px,3.4vw,40px);
  display:grid;grid-template-columns:88px 1fr 190px;gap:clamp(18px,3vw,40px);
  align-items:start;transition:background .25s ease;
}
.linea:hover{background:var(--papel-2);}
@media(max-width:860px){.linea{grid-template-columns:1fr;gap:16px;}}
.linea .id{font-family:var(--mono);font-size:13px;color:var(--azul);font-weight:500;padding-top:5px;}
.linea h3{margin-bottom:12px;}
.linea .porque{margin-top:14px;font-size:15px;color:var(--gris);font-style:italic;}
.linea .estado{display:flex;flex-direction:column;gap:9px;}

/* etiqueta de estado: honesta, sin adornos */
.etq{
  display:inline-flex;align-items:center;gap:7px;align-self:start;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--linea-fuerte);border-radius:999px;padding:4px 11px;color:var(--tinta-2);
  white-space:nowrap;
}
.etq::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--linea-fuerte);}
.etq.abierta::before{background:var(--azul);}
.etq.curso::before{background:var(--azul);box-shadow:0 0 0 3px var(--azul-suave);}
.etq.sin-abrir{color:var(--gris);}

/* ---------- lista de notas (índice de publicación) ---------- */
.notas{border-top:1px solid var(--linea);}
.nota-fila{
  display:grid;grid-template-columns:96px 1fr auto;gap:clamp(14px,3vw,34px);
  align-items:baseline;padding:24px 4px;border-bottom:1px solid var(--linea);
  text-decoration:none;color:inherit;transition:padding-left .25s ease,background .25s ease;
}
a.nota-fila:hover{background:var(--papel-2);padding-left:14px;}
.nota-fila .id{font-family:var(--mono);font-size:12.5px;color:var(--azul);font-weight:500;}
.nota-fila h3{font-size:clamp(19px,2vw,23px);margin-bottom:6px;}
.nota-fila .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);}
.nota-fila .flecha{font-family:var(--mono);font-size:15px;color:var(--azul);}
.nota-fila.muda{cursor:default;}
.nota-fila.muda h3{color:var(--gris);}
@media(max-width:700px){.nota-fila{grid-template-columns:1fr;gap:8px;}.nota-fila .flecha{display:none;}}

/* ---------- bloque de aviso / honestidad ---------- */
.aviso{
  border-left:2px solid var(--azul);background:var(--azul-suave);
  padding:22px 26px;font-size:16px;line-height:1.55;
}
.aviso .mono{color:var(--azul);display:block;margin-bottom:8px;}

/* ---------- pasos numerados del método ---------- */
.pasos{counter-reset:paso;display:grid;gap:0;border-top:1px solid var(--linea);}
.paso{
  counter-increment:paso;display:grid;grid-template-columns:56px 1fr;
  gap:clamp(14px,2.5vw,28px);padding:22px 0;border-bottom:1px solid var(--linea);
}
.paso::before{
  content:counter(paso,decimal-leading-zero);
  font-family:var(--mono);font-size:13px;color:var(--azul);padding-top:4px;
}
.paso h4{font-size:19px;margin-bottom:5px;}

/* ---------- ficha de publicación (páginas de nota) ---------- */
.ficha{
  border:1px solid var(--linea);background:var(--papel-2);
  padding:clamp(20px,3vw,30px);display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.ficha div span{display:block;}
.ficha .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:3px;}
.ficha .v{font-size:15.5px;}

/* prosa larga de una nota */
.texto{max-width:var(--texto);}
.texto h2{margin:56px 0 16px;font-size:clamp(24px,2.6vw,31px);}
.texto h2:first-child{margin-top:0;}
.texto h3{margin:34px 0 10px;font-size:20px;}
.texto ul,.texto ol{margin:14px 0 14px 22px;}
.texto li{margin-bottom:8px;}
.texto li::marker{color:var(--azul);}
.texto .aviso{margin:28px 0;}
.texto figure{margin:34px 0;}
/* una figura puede salirse de la medida de lectura: el diagrama respira */
.texto figure.ancha{width:min(88vw,880px);}
.texto figcaption{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);margin-top:12px;line-height:1.6;
}
/* fórmula desplegada: se lee como en un cuaderno */
.formula{
  font-family:var(--mono);font-size:15px;line-height:1.8;
  background:var(--papel-2);border-left:2px solid var(--linea-fuerte);
  padding:16px 20px;margin:22px 0;overflow-x:auto;white-space:pre;
}
.tabla-wrap{overflow-x:auto;margin:26px 0;}
table{border-collapse:collapse;width:100%;font-size:15px;}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--linea);vertical-align:top;}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);font-weight:500;}

/* ---------- pie ---------- */
footer{border-top:1px solid var(--linea);padding:34px 0 46px;}
.pie-inner{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;}

/* ---------- revelado al scroll: el mismo gesto del grafo ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1);}
.reveal.visible{opacity:1;transform:none;}

/* ---------- sin movimiento: ni animación de entrada ni trazado ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
  .grafo .arista{stroke-dashoffset:0;}
  .grafo .vertice{opacity:1;transform:translate(0,0);}
}
/* modo ?static: para capturar sin animación (regla de la casa) */
html.static *,html.static *::before,html.static *::after{animation:none!important;transition:none!important;}
html.static .reveal{opacity:1;transform:none;}
html.static .grafo .arista{stroke-dashoffset:0;}
html.static .grafo .vertice{opacity:1;transform:translate(0,0);}