@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --fondo:#F3F5F2;
  --papel:#FAFBF9;
  --tinta:#131B1A;
  --gris:#667571;
  --teal:#0E5F58;
  --teal-hondo:#093F3A;
  --teal-suave:#CFE0DD;
  --marca:#C0342A;
  --grilla:rgba(14,95,88,.11);
  --grilla-fina:rgba(14,95,88,.055);
  --display:'Fraunces',Georgia,serif;
  --texto:'IBM Plex Sans',system-ui,sans-serif;
  --dato:'IBM Plex Mono',ui-monospace,monospace;
  --ancho:1080px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}

a{color:var(--teal-hondo);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--marca)}
:focus-visible{outline:2px solid var(--marca);outline-offset:3px}

/* ---------- encabezado ---------- */
.barra{
  border-bottom:1px solid var(--teal-suave);
  background:var(--papel);
  position:sticky;top:0;z-index:20;
}
.barra .contenedor{
  display:flex;align-items:baseline;gap:2rem;
  padding:.9rem 0;flex-wrap:wrap;
}
.logo{
  font-family:var(--display);
  font-weight:600;font-size:1.35rem;letter-spacing:-.01em;
  color:var(--tinta);text-decoration:none;line-height:1;
}
.logo span{color:var(--marca)}
.menu{display:flex;gap:1.4rem;flex-wrap:wrap;margin-left:auto}
.menu a{
  font-family:var(--dato);font-size:.76rem;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);text-decoration:none;
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--teal);text-decoration:underline}

/* ---------- portada ---------- */
.portada{
  padding:4.5rem 0 3rem;
  background-color:var(--papel);
  background-image:
    repeating-linear-gradient(to right,var(--grilla) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(to bottom,var(--grilla) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(to right,var(--grilla-fina) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(to bottom,var(--grilla-fina) 0 1px,transparent 1px 8px);
  border-bottom:1px solid var(--teal-suave);
}
.portada h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem,7vw,4.7rem);
  line-height:1.02;letter-spacing:-.025em;
  margin:0 0 1.1rem;max-width:16ch;
}
.portada h1 em{font-style:italic;color:var(--teal)}
.bajada{font-size:1.12rem;color:var(--gris);max-width:56ch;margin:0}

/* ---------- regla de magnitudes ---------- */
.regla{margin:3.4rem 0 0}
.regla-titulo{
  font-family:var(--dato);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin:0 0 1rem;
}
.escalas{
  display:flex;align-items:flex-end;gap:0;
  border-bottom:2px solid var(--tinta);
  padding-bottom:0;overflow-x:auto;
}
.paso{
  flex:1 1 0;min-width:104px;
  background:none;border:0;padding:0 0 .55rem;
  cursor:pointer;text-align:left;
  font-family:var(--dato);color:var(--gris);
  border-left:1px solid var(--tinta);
  transition:color .18s ease;
}
.paso:first-child{border-left:0}
.paso .tic{display:block;height:34px;position:relative}
.paso .tic::before{
  content:"";position:absolute;left:-1px;bottom:0;
  width:1px;height:100%;background:transparent;
}
.paso .exp{display:block;font-size:.92rem;color:var(--tinta);padding-left:.45rem}
.paso .nom{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding-left:.45rem}
.paso:hover .exp{color:var(--teal)}
.paso[aria-selected="true"]{border-left-color:var(--marca)}
.paso[aria-selected="true"] .exp,
.paso[aria-selected="true"] .nom{color:var(--marca)}
.paso[aria-selected="true"] .tic::before{background:var(--marca);width:2px}

.lectura{
  margin:1.1rem 0 0;min-height:3.2rem;
  font-family:var(--display);font-size:1.28rem;line-height:1.45;
  max-width:52ch;
}
.lectura b{font-weight:600;color:var(--teal)}

/* ---------- secciones ---------- */
.seccion{padding:3.6rem 0}
.seccion + .seccion{border-top:1px solid var(--teal-suave)}
.rotulo{
  font-family:var(--dato);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);
  margin:0 0 1.5rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--teal-suave);
}

.rejilla{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.ficha{
  background:var(--papel);border:1px solid var(--teal-suave);
  padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .18s ease,transform .18s ease;
}
.ficha:hover{border-color:var(--teal);transform:translateY(-2px)}
.ficha .orden{font-family:var(--dato);font-size:.78rem;color:var(--marca)}
.ficha h3{font-family:var(--display);font-weight:600;font-size:1.24rem;line-height:1.22;margin:0}
.ficha h3 a{color:var(--tinta);text-decoration:none}
.ficha h3 a:hover{color:var(--teal)}
.ficha p{margin:0;font-size:.95rem;color:var(--gris)}

/* ---------- artículo ---------- */
.articulo{padding:3.2rem 0 4rem}
.articulo .cabecera{max-width:62ch;margin-bottom:2.4rem}
.migas{font-family:var(--dato);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin:0 0 1rem}
.migas a{color:var(--gris)}
.articulo h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.08;
  letter-spacing:-.02em;margin:0 0 .9rem;
}
.entradilla{font-size:1.13rem;color:var(--gris);margin:0}
.cuerpo{max-width:66ch}
.cuerpo h2{
  font-family:var(--display);font-weight:600;font-size:1.5rem;
  line-height:1.25;margin:2.6rem 0 .8rem;
}
.cuerpo p{margin:0 0 1.15rem}
.cuerpo ul{margin:0 0 1.3rem;padding-left:1.1rem}
.cuerpo li{margin-bottom:.5rem}
.cuerpo strong{font-weight:600}

.dato{
  border-left:2px solid var(--marca);
  background:var(--papel);
  padding:1.1rem 1.3rem;margin:2rem 0;
}
.dato p{margin:0;font-family:var(--display);font-size:1.1rem;line-height:1.45}
.dato .etiqueta{
  display:block;font-family:var(--dato);font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gris);
  margin-bottom:.45rem;
}

.tabla{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.94rem}
.tabla th,.tabla td{
  text-align:left;padding:.6rem .8rem;
  border-bottom:1px solid var(--teal-suave);
}
.tabla th{
  font-family:var(--dato);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris);font-weight:500;
}
.tabla td:first-child{font-family:var(--dato);color:var(--teal)}

.siguiente{
  margin-top:3rem;padding-top:1.6rem;
  border-top:1px solid var(--teal-suave);
  font-family:var(--dato);font-size:.82rem;
}

/* ---------- pie ---------- */
.pie{
  border-top:1px solid var(--teal-suave);
  background:var(--papel);padding:2.6rem 0;
  font-size:.9rem;color:var(--gris);
}
.pie .contenedor{display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between}
.pie p{margin:0 0 .4rem}
.pie .marca-pie{font-family:var(--display);font-size:1.1rem;color:var(--tinta)}

@media (max-width:640px){
  body{font-size:16px}
  .barra .contenedor{gap:.8rem}
  .menu{gap:1rem;margin-left:0;width:100%}
  .portada{padding:3rem 0 2.2rem}
  .lectura{font-size:1.12rem}
}