/* Novedades — índice y artículo. Monta sobre inicio.css (barra, menú, pie,
   botones, .wrap) y soluciones.css (.cierre). */

/* ---------- Encabezado de la sección ---------- */

.nhead{background:var(--g-050);border-bottom:1px solid var(--g-200)}

.nhead__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(24px,4vw,64px);
  padding-block:clamp(72px,11vh,124px) clamp(32px,5vh,56px);
}

.nhead h1{
  margin-block:var(--sp-4) var(--sp-4);
  font-size:clamp(32px,4.4vw,56px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.05;
}
.nhead p{color:var(--g-700);font-size:var(--fs-sm);max-width:56ch}

.nhead .vert{position:static;justify-items:end;color:var(--g-500);text-shadow:none}

/* ---------- Lista de notas ---------- */

.lista{padding-block:clamp(12px,2vh,24px) clamp(44px,7vh,80px)}

.nota{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(18px,3vw,48px);
  padding-block:clamp(20px,3vh,30px);
  border-bottom:1px solid var(--g-200);
}
.nota:first-child{border-top:1px solid var(--g-200)}

.nota__no{
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--g-300);
  font-variant-numeric:tabular-nums;
  align-self:start;
  padding-top:4px;
}

.nota__in{display:grid;gap:var(--sp-2);min-width:0}

.nota__cat{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
}

.nota__t{
  font-family:var(--font-display);
  font-size:clamp(19px,2.1vw,25px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.22;
  max-width:34ch;
  transition:color var(--tr-fast);
}
.nota:hover .nota__t{color:var(--blue)}

.nota__r{font-size:var(--fs-sm);color:var(--g-700);max-width:62ch}

.nota__go{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid var(--g-300);
  border-radius:50%;
  color:var(--g-700);
  transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast);
}
.nota:hover .nota__go{background:var(--blue);border-color:var(--blue);color:var(--white)}

/* ---------- Artículo ---------- */

.post{padding-block:clamp(88px,13vh,128px) clamp(44px,7vh,80px)}

.post__volver{
  display:flex;
  margin:0 0 clamp(20px,3vh,32px);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--g-700);
}
.post__volver a{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  transition:color var(--tr-fast),gap var(--tr-fast);
}
.post__volver a:hover{color:var(--black);gap:var(--sp-3)}

.post__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(20px,4vw,64px);
  padding-bottom:clamp(24px,4vh,40px);
  border-bottom:1px solid var(--g-200);
  margin-bottom:clamp(28px,4vh,48px);
}
.post__head .eyebrow{color:var(--blue);grid-column:1;letter-spacing:.16em}
.post__head h1{
  grid-column:1;
  margin-block:var(--sp-4) var(--sp-4);
  font-size:clamp(27px,3.4vw,44px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.14;
  max-width:24ch;
}
.post__lede{
  grid-column:1;
  font-size:var(--fs-md);
  color:var(--g-700);
  max-width:60ch;
}

.post__min{
  grid-column:2;
  grid-row:1/4;
  display:grid;
  gap:var(--sp-3);
  justify-items:end;
  text-align:right;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--g-500);
  white-space:nowrap;
}
.post__min::after{
  content:'';
  width:34px;
  height:1px;
  background:var(--g-300);
}

/* ---------- Cuerpo y sumario ---------- */

.post__in{
  display:grid;
  grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:0;
  align-items:start;
}

.post__toc{order:-1;position:sticky;top:104px}

.post__toc-in{display:grid;gap:var(--sp-3);counter-reset:ind}
.post__toc-in b{
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:600;
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--g-200);
}
.post__toc-in a{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--g-700);
  line-height:1.4;
  transition:color var(--tr-fast);
}
.post__toc-in a::before{
  counter-increment:ind;
  content:counter(ind) ".";
  color:var(--g-500);
  font-variant-numeric:tabular-nums;
}
.post__toc-in a:hover{color:var(--blue)}

/* sin min-width:0 la tabla ancha impide que la celda se encoja en celular */
.post__body{
  counter-reset:sec;
  max-width:70ch;
  min-width:0;
  padding-left:clamp(28px,5vw,80px);
  border-left:1px solid var(--g-200);
}
.post__toc{min-width:0}
.post__body > *{margin:0}
.post__body p{margin-bottom:var(--sp-5);line-height:1.7}

.post__body h2{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-3);
  margin-block:clamp(32px,5vh,52px) var(--sp-5);
  padding-top:clamp(24px,4vh,36px);
  border-top:1px solid var(--g-200);
  font-size:clamp(19px,2.1vw,24px);
  font-weight:600;
  letter-spacing:-.02em;
  scroll-margin-top:110px;
}
.post__body h2::before{
  counter-increment:sec;
  content:counter(sec) ".";
  color:var(--g-500);
  font-variant-numeric:tabular-nums;
}
.post__body h2:first-child{margin-top:0;padding-top:0;border-top:0}

.post__body .note{
  padding:var(--sp-4) var(--sp-5);
  background:var(--g-050);
  border-left:2px solid var(--blue);
  font-size:var(--fs-sm);
  color:var(--g-700);
}

.spec__wrap{overflow-x:auto;margin-bottom:var(--sp-5);border:1px solid var(--g-200)}
.spec{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:460px}
.spec th,.spec td{
  padding:var(--sp-3) var(--sp-4);
  text-align:left;
  border-bottom:1px solid var(--g-200);
}
.spec thead th{font-size:var(--fs-xs);font-weight:600;color:var(--g-500);background:var(--g-050)}
.spec tbody th{font-weight:500;color:var(--g-700)}
.spec tbody td{font-weight:600;font-variant-numeric:tabular-nums}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}

/* ---------- Responsive ---------- */

@media (max-width:1024px){
  .nhead__in{grid-template-columns:1fr}
  .nhead .vert{display:none}

  .post__head{grid-template-columns:1fr}
  .post__head h1{max-width:none}
  .post__min{grid-column:1;grid-row:auto;justify-items:start;text-align:left;margin-top:var(--sp-4)}
  .post__min::after{display:none}

  .post__in{grid-template-columns:1fr;gap:var(--sp-6)}
  .post__toc{position:static}
  .post__toc-in{
    padding:var(--sp-5);
    background:var(--g-050);
    border:1px solid var(--g-200);
  }
  .post__body{max-width:none;padding-left:0;border-left:0}
}

@media (max-width:640px){
  .nota{grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4)}
  .nota__t{max-width:none}
  .nota__go{display:none}
}