/* ════════════════════════════════════════════════════════════════
   articulo.css — plantilla única de los artículos del blog
   Se carga después de shared.css solo en /blog/<artículo>.
   Reúne lo que antes iba repetido en el <style> de cada artículo
   y las piezas de la plantilla del 13-oct-2026 (T04, T22, T25, T27, T33).
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Estructura: <main><article> con la cabecera dentro ── */
.articulo-cab.page-hero{padding-bottom:56px;}
.articulo-titulo{font-size:var(--fs-d4);max-width:820px;}
.articulo-titulo.largo{font-size:var(--fs-d3);max-width:860px;}
.article-author picture,.article-hero-img-wrap picture{display:contents;}
.articulo picture > source{display:none;} /* con display:contents, <source> ocupaba un hueco en el flex de la firma */
.article-tax time{white-space:nowrap;}
.article-author .aa-name a{color:inherit;text-decoration:none;}
@media (hover:hover){.article-author .aa-name a:hover{color:var(--gold);}}
.breadcrumb .cat{color:var(--ink);}
/* El relleno del cuerpo (.page-main) lo da shared.css; aquí ya no se repite. */

/* ── 2. Imagen principal (LCP): apaisada también en el celular ── */
.article-hero-img-wrap{max-width:var(--shell);margin:0 auto;padding:0 clamp(20px,5vw,48px);}
.article-hero-img-wrap img{width:100%;height:auto;aspect-ratio:1200/669;max-height:480px;object-fit:cover;object-position:center;border-radius:var(--r-sm);display:block;}
.article-hero-img-wrap img.foco-arriba{object-position:center top;}

/* ── 3. Lectura: medida de línea de unos 68 caracteres ──
   39rem = 624 px: con Inter a 18 px salen entre 64 y 72 caracteres por línea
   (68ch medido sobre 16 px daba 686 px y unos 75). */
.articulo .page-main-inner{max-width:39rem;}

/* ── 4. Piezas del cuerpo ── */
.law-callout.resumen ul{margin:10px 0 0 18px;display:grid;gap:6px}
.law-callout.resumen li{font-size:var(--fs-3);line-height:1.6}

.actualizado{font-size:var(--fs-1);letter-spacing:.06em;color:var(--ink-soft);margin:-6px 0 22px;}
.respuesta-directa{font-size:var(--fs-4);line-height:1.65;padding:18px 22px;border-left:2px solid var(--gold);background:color-mix(in srgb,var(--gold) 5%,transparent);border-radius:var(--r-sm);}
.tabla-wrap{overflow-x:auto;margin:22px 0;}
.tabla-wrap table{width:100%;border-collapse:collapse;font-size:var(--fs-3);}
.tabla-wrap th,.tabla-wrap td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
.tabla-wrap th{font-weight:600;color:var(--ink);}
/* Tablas sin envoltorio: en el celular se desplazan dentro de su caja y no ensanchan la página */
@media (max-width:520px){.prose > .article-table{display:block;overflow-x:auto;}}

.prose a.norma{color:var(--gold);text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:inherit;}
@media (hover:hover){.prose a.norma:hover{text-decoration-style:solid;background:color-mix(in srgb,var(--gold) 10%,transparent);}}

.cta-medio{margin:40px 0;padding:26px 28px;border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--r-md);background:color-mix(in srgb,var(--gold) 5%,transparent);}
.cta-medio .cm-t{font-family:var(--ff-serif);font-size:var(--fs-5);font-weight:600;color:var(--ink);margin:0 0 8px;}
.cta-medio p{font-size:var(--fs-3);color:var(--ink-soft);margin:0 0 18px;max-width:58ch;}
.cm-btns{display:flex;gap:12px;flex-wrap:wrap;}
.cm-btns .btn{padding:13px 24px;}
@media (max-width:520px){.cm-btns .btn{width:100%;}}

.video-ref{margin:52px 0 0;padding-top:30px;border-top:1px solid var(--line);}
.vr-lista{display:grid;gap:14px;margin-top:18px;}
.vr-item{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;transition:border-color .25s,background .25s;}
@media (hover:hover){.vr-item:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));background:color-mix(in srgb,var(--gold) 6%,transparent);}}
.vr-item img{width:100%;height:auto;border-radius:var(--r-sm);display:block;}
.vr-txt{display:grid;gap:5px;}
.vr-txt strong{font-family:var(--ff-serif);font-size:var(--fs-4);font-weight:600;color:var(--ink);line-height:1.3;}
.vr-nota{font-size:var(--fs-2);color:var(--ink-soft);line-height:1.5;}
.vr-meta{font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
@media (max-width:640px){.vr-item{grid-template-columns:minmax(0,1fr);gap:12px;}}

/* Nota pequeña bajo una tabla o al cierre (antes, style en línea) */
.prose .nota-fuente{font-size:var(--fs-2);color:var(--ink-soft);}
.prose .nota-fuente.cursiva{font-style:italic;}

/* ── 5. Vista previa de artículos de ley (articulo.js) ── */
.vista-norma{--vn-alerta:#8a3b2a;position:absolute;z-index:300;width:min(430px,calc(100vw - 24px));background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 24px 54px -22px rgba(0,0,0,.4);
  padding:16px 18px 14px;opacity:0;transform:translateY(5px);transition:opacity .16s ease,transform .16s ease;
  display:flex;flex-direction:column;}
body.is-dark .vista-norma{--vn-alerta:#e0957f;}
.vista-norma.visible{opacity:1;transform:none;}
.vista-norma::after{content:'';position:absolute;left:var(--flecha,50%);margin-left:-7px;width:13px;height:13px;
  background:var(--paper);border:1px solid var(--line);transform:rotate(45deg);}
.vista-norma:not(.abajo)::after{bottom:-7px;border-top:none;border-left:none;}
.vista-norma.abajo::after{top:-7px;border-bottom:none;border-right:none;}
.vn-cab{flex:0 0 auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px;}
.vn-num{font-family:var(--ff-serif);font-size:var(--fs-4);font-weight:600;color:var(--ink);}
.vn-cod{font-size:var(--fs-0);letter-spacing:.11em;text-transform:uppercase;color:var(--gold);}
.vn-sum{flex:0 0 auto;font-size:var(--fs-2);color:var(--ink-soft);margin:0 0 10px;font-style:italic;line-height:1.45;}
.vn-txt{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--line);padding-top:10px;}
.vn-txt p{font-size:var(--fs-2);line-height:1.62;color:var(--ink);margin:0 0 9px;}
.vn-txt p:last-child{margin-bottom:0;}
.vn-pie{display:block;flex:0 0 auto;margin-top:11px;padding-top:9px;border-top:1px solid var(--line);
  font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
.vn-derogado{display:inline-block;font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase;
  color:var(--vn-alerta);border:1px solid var(--vn-alerta);border-radius:var(--r-pill);padding:1px 7px;}
@media (prefers-reduced-motion:reduce){.vista-norma{transition:none;transform:none;}}

/* ── 6. Cierre del artículo: firma y aviso de errores (T25) ── */
.autor-caja{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start;margin:56px 0 0;padding-top:28px;border-top:1px solid var(--line);}
.autor-caja picture{display:block;}
.autor-caja img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1px solid var(--line);}
.autor-caja .autor-nombre{font-family:var(--ff-serif);font-size:var(--fs-5);font-weight:600;line-height:1.2;color:var(--ink);margin:2px 0 4px;}
.autor-caja .autor-nombre a{color:inherit;text-decoration:none;}
.autor-caja .autor-cargo{font-size:var(--fs-2);color:var(--ink-soft);margin:0 0 12px;}
.autor-caja .autor-bio{font-size:var(--fs-3);line-height:1.65;color:color-mix(in srgb,var(--ink) 88%,transparent);margin:0 0 12px;text-wrap:pretty;}
.autor-caja .autor-bio a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 55%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;}
.autor-caja .autor-enlace{font-size:var(--fs-2);font-weight:600;color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.reportar-error{margin:22px 0 0;font-size:var(--fs-2);color:var(--ink-soft);}
.reportar-error a{color:var(--ink-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
/* Si la firma va justo después de las preguntas frecuentes, la raya de la última pregunta
   hace de filete: sin la raya propia de la firma no quedan dos líneas seguidas. */
.prose:has(> .faq-item:last-child) + .autor-caja{margin-top:0;border-top:0;}
/* Zona táctil de 44 px para «Conoce mi trayectoria» y «¿Viste un error…?», sin cambiar cómo se ven
   (el área invisible no se cruza con los enlaces de la presentación: entre ambos quedan 12 px). */
.autor-caja .autor-enlace,.reportar-error a{position:relative;}
.autor-caja .autor-enlace::after,.reportar-error a::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);}
@media (hover:hover){
  .autor-caja .autor-nombre a:hover,.autor-caja .autor-bio a:hover,.autor-caja .autor-enlace:hover,.reportar-error a:hover{color:var(--gold);}
}
@media (max-width:520px){.autor-caja{grid-template-columns:52px minmax(0,1fr);gap:14px;}.autor-caja img{width:52px;height:52px;}}

/* ── 7. «Para entender mejor esta guía» fuera de la banda (DV-10) ──
   El bloque lo genera el script de Norma entre <!-- vinculos:inicio --> y
   <!-- vinculos:fin -->, justo antes de la banda. Aquí deja de ser una caja:
   es una sección plana al ancho de lectura y solo las tarjetas llevan borde. */
.articulo-main > .rel-block{width:min(calc(100% - 2 * clamp(20px,5vw,48px)),39rem);margin:clamp(8px,2vw,24px) auto 0;padding:36px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--ink);}
.articulo-main > .rel-block .page-eyebrow{margin-bottom:10px;}
.articulo-main > .rel-block .rel-chips a{background:transparent;}
.articulo-main > .rel-block .rel-card{background:transparent;}

/* ── 8. Banda final: antetítulo, pregunta y botones juntos (T27) ── */
.articulo-main > .article-cta{margin-top:clamp(56px,7vw,80px);margin-bottom:clamp(40px,6vw,72px);}
.article-cta h2{margin-bottom:28px;}
.article-cta .cta-nota{margin:22px auto 0;max-width:56ch;font-size:var(--fs-2);line-height:1.6;color:var(--band-soft);text-wrap:pretty;}

/* ── 9. Bloque de vínculos, etapa 2 (T21, T28) ──
   «¿Lo haces tú mismo?»: la guía de hazlo.pe del mismo trámite. Usa el filete dorado
   a la izquierda de .cta-medio (la pieza de «siguiente paso» del sistema), no una tarjeta más.
   Lo genera scripts/vincular-blog.mjs de Norma, igual que el resto del bloque. */
.rel-hazlo{display:grid;gap:4px;padding:16px 20px;border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--r-sm);background:color-mix(in srgb,var(--gold) 5%,transparent);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);}
.rel-hazlo-de{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-1);font-weight:600;letter-spacing:.04em;color:var(--gold);}
.rel-hazlo-ico{width:14px;height:14px;flex:none;transition:transform var(--dur-2) var(--ease);}
.rel-hazlo strong{font-family:var(--ff-serif);font-size:var(--fs-4);font-weight:600;line-height:1.3;color:var(--ink);text-wrap:pretty;transition:color var(--dur-1) var(--ease);}
.rel-hazlo-nota{font-size:var(--fs-2);line-height:1.5;color:var(--ink-soft);}
.rel-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
@media (hover:hover) and (pointer:fine){
  .rel-hazlo:hover{background:color-mix(in srgb,var(--gold) 10%,transparent);}
  .rel-hazlo:hover strong{color:var(--gold);}
  .rel-hazlo:hover .rel-hazlo-ico{transform:translate(2px,-2px);}
}
.rel-hazlo:active{transform:scale(.985);}
@media (max-width:520px){.rel-hazlo{padding:14px 16px;}}