/* ============================================================
   articulo.css — sistema de contenido largo
   Extiende styles.css. No redefine ningún token: todo sale de :root.
   Lenguaje: ficha técnica operativa, no post de blog.
   ============================================================ */

/* ---------- cabecera de artículo ---------- */
.art-head {
  padding-block: clamp(38px, 5.4vw, 78px) clamp(26px, 3.2vw, 40px);
  border-bottom: 1px solid var(--line);
}
.art-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint);
  text-decoration: none; margin-bottom: clamp(20px, 2.6vw, 30px);
  transition: color .2s var(--ease-sine);
}
.art-back svg { width: 14px; height: 14px; transition: transform .22s var(--ease-cubic); }
.art-back:hover { color: var(--brand-2); }
.art-back:hover svg { transform: translateX(-3px); }

.art-title {
  font-family: var(--font-head);
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 500; letter-spacing: -0.025em; line-height: 1.06;
  max-width: 20ch; margin: 0; text-wrap: balance;
}
.art-title .kw { font-weight: 700; }
.art-standfirst {
  font-size: clamp(17px, 1.45vw, 20px); line-height: 1.65;
  color: var(--text-dim); max-width: 62ch;
  margin: clamp(18px, 2vw, 26px) 0 0; text-wrap: pretty;
}

/* barra de metadatos: fecha real + alcance. Es la firma de "documento vivo". */
.art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: clamp(24px, 3vw, 34px);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em;
  color: var(--text-faint);
}
.art-meta b { color: var(--text-dim); font-weight: 500; }
.art-meta-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 3px rgba(63,206,143,.14); }

/* ---------- layout: índice pegajoso + cuerpo ---------- */
.art-layout {
  display: grid; grid-template-columns: 214px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(34px, 4.4vw, 62px) clamp(48px, 6vw, 92px);
  align-items: start;
}
.art-toc { position: sticky; top: 84px; }
.art-toc h2 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 14px; font-weight: 500;
}
.art-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.art-toc a {
  display: block; padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; line-height: 1.4; color: var(--text-faint); text-decoration: none;
  border: 1px solid transparent;
  transition: color .2s var(--ease-sine), background .2s var(--ease-sine);
}
.art-toc a:hover { color: var(--text); background: rgba(236,237,239,.045); }
.art-toc a.is-current { color: var(--text); background: rgba(18,115,235,.12); border-color: var(--line-brand); }

@media (max-width: 940px) {
  .art-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .art-toc { position: static; margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
  .art-toc ol { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px 10px; }
  /* Táctil: 35px de alto no alcanza. Se sube a 45px sin tocar el desktop. */
  .art-toc a { padding-block: 12px; }
}

/* ---------- prosa ---------- */
.prose { max-width: 66ch; }
.prose > * + * { margin-top: 1.15em; }
.prose p { font-size: 16.5px; line-height: 1.72; color: var(--text-dim); margin: 0; text-wrap: pretty; }
.prose strong, .prose b { color: var(--text); font-weight: 600; }
.prose a { color: var(--brand-300); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(125,180,244,.35); transition: text-decoration-color .2s var(--ease-sine); }
.prose a:hover { text-decoration-color: var(--brand-300); }

.prose h2 {
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(25px, 2.5vw, 34px); letter-spacing: -0.018em; line-height: 1.16;
  color: var(--text); max-width: 26ch; text-wrap: balance;
  margin: clamp(48px, 5.4vw, 76px) 0 0; scroll-margin-top: 82px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 18px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.35;
  color: var(--text); margin: clamp(30px, 3.4vw, 42px) 0 0; scroll-margin-top: 82px;
}

.prose ul, .prose ol { margin: 1.05em 0 0; padding-left: 0; list-style: none; display: grid; gap: 11px; }
.prose li { position: relative; padding-left: 24px; font-size: 16.5px; line-height: 1.68; color: var(--text-dim); }
.prose ul > li::before {
  content: ""; position: absolute; left: 4px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); opacity: .7;
}
.prose ol { counter-reset: paso; }
.prose ol > li { counter-increment: paso; }
.prose ol > li::before {
  content: counter(paso); position: absolute; left: 0; top: .12em;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--brand-2);
}

/* ---------- respuesta directa: el bloque que las IAs extraen ----------
   Va arriba de cada sección. Deliberadamente breve y autocontenido:
   si un modelo cita una sola frase de la página, tiene que ser ésta. */
.answer {
  margin: 18px 0 0;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  border: 1px solid var(--line-brand); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(18,115,235,.09), rgba(18,115,235,.03));
}
.answer p { font-size: 16.5px; line-height: 1.65; color: var(--text); margin: 0; max-width: none; }
.answer p + p { margin-top: .8em; }
.answer-tag {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-2); margin-bottom: 9px;
}

/* ---------- tarifario ---------- */
.tabla-wrap { margin-top: 1.3em; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.tabla caption {
  caption-side: top; text-align: left; padding: 14px 18px 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint);
}
.tabla th, .tabla td {
  padding: 12px 18px; text-align: right; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; color: var(--text);
}
.tabla thead th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 500; color: var(--text-faint); white-space: nowrap;
}
.tabla th:first-child, .tabla td:first-child { text-align: left; color: var(--text-dim); font-weight: 400; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .18s var(--ease-sine); }
.tabla tbody tr:hover { background: rgba(236,237,239,.03); }
.tabla .destacado td { background: rgba(18,115,235,.08); }
.tabla .destacado td:first-child { color: var(--text); font-weight: 500; }
/* Especificidad deliberada: .prose p (0,1,1) le gana a .tabla-nota (0,1,0). */
.prose .tabla-nota, .tabla-nota { font-size: 12.5px; line-height: 1.6; color: var(--text-faint); margin-top: 10px; }
.prose .tabla-nota b, .tabla-nota b { color: var(--text-dim); font-weight: 500; }
.prose .tabla-nota a { color: var(--brand-300); }

/* ---------- matriz comparativa ---------- */
.matriz-wrap { margin-top: 1.4em; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); }
.matriz { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.matriz th, .matriz td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top; line-height: 1.5; }
.matriz thead th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 500; color: var(--text-faint); white-space: nowrap;
  border-bottom-color: var(--line-2);
}
.matriz thead th.col-nos { color: var(--brand-2); }
.matriz tbody th { font-weight: 400; color: var(--text-faint); font-size: 13.5px; width: 26%; }
.matriz td { color: var(--text-dim); }
.matriz td.col-nos { color: var(--text); background: rgba(18,115,235,.055); }
.matriz tbody tr:last-child th, .matriz tbody tr:last-child td { border-bottom: 0; }
.matriz tbody tr { transition: background .18s var(--ease-sine); }
.matriz tbody tr:hover th { color: var(--text-dim); }
.matriz tbody tr:hover td:not(.col-nos) { background: rgba(236,237,239,.03); }

/* ---------- veredicto honesto: dos columnas, sin cards ---------- */
.veredicto {
  margin-top: 1.5em; display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.veredicto > div { background: var(--bg-2); padding: clamp(20px, 2.2vw, 28px); }
.veredicto h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 9px; }
.veredicto h3 svg { width: 17px; height: 17px; flex: none; }
.veredicto .v-nos h3 { color: var(--brand-2); }
.veredicto .v-ellos h3 { color: var(--warn); }
.veredicto ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.veredicto li { position: relative; padding-left: 19px; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
.veredicto li::before { content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }

/* ---------- ejemplo trabajado ---------- */
.ejemplo { margin-top: 1.4em; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--bg-2); overflow: hidden; }
.ejemplo-head { padding: 15px clamp(18px, 2vw, 24px); border-bottom: 1px solid var(--line);
  background: var(--bg-3); }
.ejemplo-head p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); max-width: none; }
.ejemplo-head b { color: var(--text); }
.ejemplo-body { padding: clamp(6px, 1vw, 10px) clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px); }
.ejemplo-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); }
.ejemplo-row:last-of-type { border-bottom: 0; }
.ejemplo-row .e-k { font-size: 14.5px; color: var(--text-dim); }
.ejemplo-row .e-k small { display: block; font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.ejemplo-row .e-v { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums;
  color: var(--text); white-space: nowrap; }
.ejemplo-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 12px; padding-top: 15px; border-top: 1px solid var(--line-2); }
.ejemplo-total .e-k { font-size: 15px; color: var(--text); font-weight: 500; }
.ejemplo-total .e-v { font-family: var(--mono); font-size: clamp(21px, 2.2vw, 27px); font-weight: 600;
  color: var(--brand-2); font-variant-numeric: tabular-nums; }

/* ---------- glosario ----------
   Lista de definiciones a dos columnas: se lee como una hoja de referencia,
   no como una tanda de tarjetas. En angosto colapsa a una sola columna. */
.glosario-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.3em; }
.prose .glosario-indice a {
  display: inline-block; padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--bg-2);
  font-size: 13px; line-height: 1.3; color: var(--text-dim);
  text-decoration: none;
  transition: color .2s var(--ease-sine), border-color .2s var(--ease-sine), background .2s var(--ease-sine);
}
.prose .glosario-indice a:hover { color: var(--text); border-color: var(--line-brand); background: var(--bg-3); }

.glosario { margin-top: 1.3em; border-top: 1px solid var(--line); }
.glosario-item {
  display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 8px 28px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.glosario dt {
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.4;
  color: var(--text); scroll-margin-top: 90px;
}
.glosario dd { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--text-dim); }
.glosario dd b, .glosario dd strong { color: var(--text); font-weight: 600; }
.glosario dd + dd { margin-top: .6em; }
/* Resalta el término al que se acaba de saltar desde el índice. */
.glosario dt:target { color: var(--brand-2); }
.glosario dt:target ~ dd { color: var(--text); }
@media (max-width: 700px) {
  .glosario-item { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 18px 0; }
  /* Táctil: los chips pasan de 33px a 45px de alto. */
  .prose .glosario-indice a { padding-block: 13px; }
  .glosario-indice { gap: 9px; }
}

/* ---------- FAQ del artículo (reusa .faq-item de styles.css) ---------- */
.art-faq { margin-top: 1.3em; display: grid; gap: 0; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); }
.art-faq details { border-bottom: 1px solid var(--line); }
.art-faq details:last-child { border-bottom: 0; }
.art-faq summary {
  cursor: pointer; list-style: none; padding: 16px clamp(18px, 2vw, 22px);
  font-size: 15.5px; font-weight: 500; color: var(--text); line-height: 1.45;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  transition: color .2s var(--ease-sine);
}
.art-faq summary::-webkit-details-marker { display: none; }
.art-faq summary::after { content: "＋"; font-family: var(--mono); font-size: 15px; line-height: 1.2;
  color: var(--brand-2); flex: none; transition: transform .25s var(--ease-cubic); }
.art-faq details[open] summary::after { content: "－"; }
.art-faq summary:hover { color: var(--brand-300); }
.art-faq .faq-a { margin: 0; padding: 0 clamp(18px, 2vw, 22px) 18px;
  font-size: 15px; line-height: 1.68; color: var(--text-dim); max-width: 68ch; }

/* ---------- cierre ---------- */
.art-cta {
  margin-top: clamp(46px, 5.5vw, 74px); padding: clamp(26px, 3.2vw, 40px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background:
    radial-gradient(760px 260px at 12% 0%, rgba(18,115,235,.16), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
}
.art-cta h2 { font-family: var(--font-head); font-weight: 500; font-size: clamp(23px, 2.3vw, 31px);
  letter-spacing: -0.018em; line-height: 1.16; margin: 0; max-width: 22ch; color: var(--text); }
.art-cta p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--text-dim); max-width: 54ch; }
.art-cta .art-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
@media (max-width: 560px) { .art-cta .art-cta-btns .btn { width: 100%; } }

/* ---------- navegación entre artículos ---------- */
.art-sig { margin-top: clamp(34px, 4vw, 52px); padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line); }
.art-sig h2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 16px; font-weight: 500; }
.art-sig ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.art-sig li { background: var(--bg-2); }
.art-sig a { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px clamp(16px, 1.8vw, 20px); text-decoration: none; color: var(--text);
  font-size: 15px; line-height: 1.45; transition: background .2s var(--ease-sine); }
.art-sig a:hover { background: var(--bg-3); }
.art-sig a span { color: var(--text-dim); transition: color .2s var(--ease-sine); }
.art-sig a:hover span { color: var(--brand-2); }
.art-sig svg { width: 16px; height: 16px; flex: none; color: var(--text-faint);
  transition: transform .22s var(--ease-cubic), color .2s var(--ease-sine); }
.art-sig a:hover svg { transform: translateX(4px); color: var(--brand-2); }

/* ---------- fila de recursos del footer ----------
   El .foot-grid de styles.css está fijo en 4 columnas: una quinta lo rompería.
   Los recursos van en su propia fila, que además escala a medida que crecen. */
.foot-recursos { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; }
.foot-recursos > span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); }
.foot-recursos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot-recursos li { font-size: 14px; }
.foot-recursos a { color: var(--text-dim); transition: color .2s var(--ease-sine); }
.foot-recursos a:hover { color: var(--text); }
.foot-recursos [aria-current="page"] { color: var(--text-faint); }
@media (max-width: 620px) { .foot-recursos ul { flex-direction: column; gap: 11px; } }

/* ---------- primera columna como encabezado de fila en tablas etiquetadas ---------- */
.tabla tbody th[scope="row"] { text-align: left; font-weight: 400; color: var(--text-dim);
  padding: 12px 18px; border-bottom: 1px solid var(--line); }
.tabla tbody tr:last-child th { border-bottom: 0; }
.tabla .destacado th[scope="row"] { background: rgba(18,115,235,.08); color: var(--text); font-weight: 500; }

/* ---------- entrada: animación CSS pura, nunca condiciona la visibilidad ----------
   Se anima desde opacidad 1 hacia sí misma vía keyframes de transform; si el CSS
   no corre (crawler, lector), el contenido ya está visible y completo. */
@keyframes art-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .art-head > .wrap > * { animation: art-in .6s var(--ease-cubic) backwards; }
  .art-head > .wrap > *:nth-child(2) { animation-delay: .05s; }
  .art-head > .wrap > *:nth-child(3) { animation-delay: .1s; }
  .art-head > .wrap > *:nth-child(4) { animation-delay: .15s; }
}