/* Diseno del articulo del blog: cabecera, indice, prosa, compartir y
   relacionados. Lo traian los 60 posts en su propiedad `cssPagina`, la
   misma copia de 10 KB sesenta veces; aqui se sirve una sola vez y con
   cache. La carga Views/PostBlog.cshtml por la seccion `Styles`, no
   Master: fuera del blog estas reglas no pintan nada.

   Las migas (.crumb) NO estan aqui aunque venian en el mismo bloque: ya
   viven en cms.css, que se carga en todas las paginas.

   Cuatro articulos traen ademas reglas propias en `cssPagina` (la tabla
   comparativa a cuatro columnas, las capas de integracion y la topologia
   multicentro). Van despues de esta hoja y la sobreescriben. */

/* Cabecera del artículo */
.art-head{padding:clamp(40px,6vw,64px) 0 clamp(28px,4vw,40px);background:linear-gradient(180deg,var(--teal-50),transparent)}
.art-head .wrap{max-width:820px}
.art-cat{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--coral-700);background:var(--coral-50);border:1px solid var(--coral-100);padding:6px 13px;border-radius:var(--r-pill)}
.art-title{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:18px 0 0;text-wrap:balance}
.art-dek{margin-top:18px;font-size:1.18rem;line-height:1.6;color:var(--muted);max-width:680px}
.art-meta{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.art-author{display:flex;align-items:center;gap:10px}
.art-author img{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);padding:5px;background:var(--surface)}
.art-author b{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:.92rem;display:block;line-height:1.2}
.art-author span{font-size:.82rem}
.art-dot{width:4px;height:4px;border-radius:50%;background:var(--line);flex-shrink:0}

/* Imagen destacada */
.art-figure{max-width:980px;margin:0 auto;padding-inline:var(--gutter)}
.art-figure .viz-card{margin-top:8px}

/* visual rendimiento web */
.perf{padding:26px}
.perf-top{display:flex;align-items:center;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line-soft)}
.perf-score{flex-shrink:0;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:2.1rem;color:#1f9d57;background:conic-gradient(#1f9d57 0 100%,var(--line-soft) 0);position:relative}
.perf-score::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--surface)}
.perf-score span{position:relative;z-index:1}
.perf-top div b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink)}
.perf-top div span{font-size:.88rem;color:var(--muted)}
.perf-bars{display:flex;flex-direction:column;gap:15px;padding-top:20px}
.perf-bar span{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink-soft);margin-bottom:7px;font-weight:600}
.perf-bar span b{font-family:var(--font-display);color:#1f9d57}
.perf-track{height:8px;border-radius:5px;background:var(--line-soft);overflow:hidden}
.perf-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--teal),#1f9d57)}

/* visual factura verificable */
.invoice{padding:0;overflow:hidden}
.inv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:var(--teal-700);color:#fff}
.inv-top b{font-family:var(--font-display);font-weight:700;font-size:1rem}
.inv-badge{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;background:rgba(255,255,255,.16);padding:5px 11px;border-radius:var(--r-pill)}
.inv-badge svg{width:14px;height:14px}
.inv-body{display:grid;grid-template-columns:1fr auto;gap:20px;padding:22px}
.inv-rows{display:flex;flex-direction:column;gap:11px}
.inv-row{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:.9rem;border-bottom:1px dashed var(--line-soft);padding-bottom:11px}
.inv-row:last-child{border-bottom:0;padding-bottom:0}
.inv-row span{color:var(--muted)}
.inv-row b{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.inv-row.total b{color:var(--teal-700);font-size:1.05rem}
.inv-qr{display:flex;flex-direction:column;align-items:center;gap:8px;align-self:start}
.inv-qr svg{width:92px;height:92px;border-radius:10px;border:1px solid var(--line)}
.inv-qr small{font-size:.72rem;color:var(--muted);text-align:center;max-width:96px;line-height:1.3}
@media(max-width:520px){.inv-body{grid-template-columns:1fr}.inv-qr{flex-direction:row;align-self:stretch}}

/* Layout cuerpo + aside */
/* minmax(0,1fr) y no 1fr: `1fr` es `minmax(auto,1fr)`, o sea que el minimo de
   la columna es el min-content del articulo. Un bloque ancho dentro de .prose
   --la tabla comparativa lleva min-width:620px-- inflaba la columna a 620 px
   dentro de un contenedor de 335, y con ella todo el texto: en movil la pagina
   se salia por la derecha. .cmp-scroll no lo aisla porque el minimo automatico
   de 0 solo lo tienen los items flex y grid, no un bloque en flujo normal. */
.art-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:820px;margin-inline:auto}

/* TOC */
.toc{margin:6px 0 8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px}
.toc h2{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:9px}
.toc li{counter-increment:toc;display:flex;gap:11px;align-items:baseline}
.toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-display);font-weight:700;font-size:.78rem;color:var(--teal);flex-shrink:0}
.toc a{font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--ink-soft)}
.toc a:hover{color:var(--primary-strong)}

/* Prosa */
.prose{font-size:1.075rem;line-height:1.75;color:var(--ink-soft)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.45rem,2.6vw,1.85rem);line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin-top:1.9em;scroll-margin-top:90px}
.prose h3{font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:var(--ink);margin-top:1.5em}
.prose p{text-wrap:pretty}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--primary-strong);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--teal-200)}
.prose a:hover{text-decoration-color:var(--teal)}
.prose ul,.prose ol{padding-left:1.3em;display:flex;flex-direction:column;gap:.55em}
.prose li{padding-left:.3em}
.prose li::marker{color:var(--teal)}
.prose blockquote{margin:1.5em 0;padding:4px 0 4px 22px;border-left:3px solid var(--coral);font-size:1.18rem;font-style:italic;color:var(--ink);line-height:1.55}

/* Tabla comparativa */
.cmp{margin:1.6em 0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cmp-row{display:grid;grid-template-columns:1.1fr 1fr 1fr}
.cmp-row+.cmp-row{border-top:1px solid var(--line)}
.cmp-row>div{padding:14px 16px;font-size:.94rem;line-height:1.45}
.cmp-row>div+div{border-left:1px solid var(--line)}
.cmp-head{background:var(--bg)}
.cmp-head>div{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:.92rem}
.cmp-head>div:nth-child(2){color:var(--teal-700)}
.cmp-head>div:nth-child(3){color:var(--coral-700)}
.cmp-row b{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.cmp-row .lbl{background:var(--surface);font-weight:600;color:var(--ink)}
@media(max-width:600px){.prose .cmp-row{grid-template-columns:1fr}.cmp-row>div+div{border-left:0;border-top:1px solid var(--line-soft)}}

/* Caja puntos clave */
.keybox{margin:1.8em 0;border-radius:var(--r-lg);background:linear-gradient(125deg,var(--teal-50),var(--coral-50));border:1px solid var(--teal-100);padding:24px 26px}
.keybox b{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--ink);margin-bottom:14px}
.keybox b svg{width:20px;height:20px;color:var(--coral)}
.keybox ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px;margin:0}
.keybox li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;line-height:1.5;color:var(--ink-soft)}
.keybox li svg{width:19px;height:19px;flex-shrink:0;margin-top:3px;color:var(--teal)}

/* Banda CTA dentro del artículo */
.art-cta{margin:2em 0 0;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(125deg,var(--teal-800),var(--teal-600));color:#fff;padding:clamp(30px,4vw,42px);text-align:center}
.art-cta h2{font-family:var(--font-display);font-weight:800;color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0}
.art-cta p{color:rgba(255,255,255,.9);margin:12px auto 0;max-width:480px;font-size:1.02rem}
.art-cta .btn{margin-top:22px;color:#fff;text-decoration:none}

/* Aviso */
.art-note{margin-top:2em;font-size:.92rem;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;line-height:1.55}

/* Compartir + autor pie */
.art-foot{max-width:820px;margin:40px auto 0;padding-top:28px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.share{display:flex;align-items:center;gap:10px}
.share span{font-size:.86rem;color:var(--muted);font-weight:600}
.share a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);transition:transform .18s ease,border-color .18s ease,color .18s ease}
.share a:hover{transform:translateY(-2px);border-color:var(--teal-200);color:var(--primary-strong)}
.share a svg{width:18px;height:18px}

/* Relacionados */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.related{grid-template-columns:1fr}}
.rel-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--teal-200)}
.rel-cat{font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-700)}
.rel-card h3{font-family:var(--font-display);font-weight:700;font-size:1.12rem;color:var(--ink);line-height:1.3}
.rel-card p{font-size:.94rem;color:var(--muted);line-height:1.5;flex:1}
.rel-more{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--primary-strong);display:inline-flex;align-items:center;gap:7px}
.rel-more svg{width:15px;height:15px}