/* Quantico Systems · motor compartido de los demos por rubro.
   Misma identidad que la landing: negro para la barra y el marco del chat, cuerpo blanco y #F7F9FA,
   azul de señal #007BFF (sobre blanco el texto azul usa #0062CC), grises con leve sesgo frío.
   Tema claro solo. Sin imágenes externas. */

:root {
  --azul: #007BFF;
  --azul-hondo: #0062CC;
  --azul-oscuro: #004EA3;
  --azul-tenue: #E8F2FF;
  --azul-borde: #B8D9FF;
  --titulo: #333;
  --texto: #444;
  --suave: #666;
  --tenue: #ABABAB;
  --claro: #C9CDD1;
  --linea: #E9ECEF;
  --linea2: #D3D9DF;
  --gris: #F7F9FA;
  --campo: #7D858D;
  --alerta: #C0392B;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --cuerpo: 'IBM Plex Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  --dato: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; background: #fff; }
body {
  margin: 0; background: #fff; color: var(--texto);
  font: 400 16px/1.6 var(--cuerpo); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--display); color: var(--titulo); margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.1; letter-spacing: -0.024em; }
h3 { font-weight: 700; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 600; color: var(--titulo); }
a { color: var(--azul-hondo); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { margin: 0; }
svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salto { position: absolute; left: 12px; top: -120px; z-index: 100; background: #fff; color: #000; padding: 12px 18px; border-radius: 4px; font-weight: 600; text-decoration: none; }
.salto:focus { top: 12px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }

.rot { margin: 0 0 14px; font: 500 12px/1.3 var(--dato); letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul-hondo); }
.rot--gris { color: var(--suave); }
.micro { font-size: 0.875rem; color: var(--suave); max-width: 56ch; margin: 14px 0 0; }

/* ---------- Botones y etiquetas (mismos que la landing) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 4px; border: 1.5px solid transparent;
  font: 600 15px/1.2 var(--cuerpo); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.btn:hover { text-decoration: none; }
.btn-p { background: var(--azul-hondo); color: #fff; }
.btn-p:hover { background: var(--azul-oscuro); }
.btn-s { background: #fff; color: var(--titulo); border-color: var(--campo); }
.btn-s:hover { border-color: var(--titulo); }
.btn-l { min-height: 54px; font-size: 16px; padding: 0 28px; }
.btn[disabled] { opacity: 0.55; cursor: default; }

.tag { display: inline-flex; align-items: center; padding: 6px 9px; border: 1px solid transparent; border-radius: 3px; font: 500 12px/1.1 var(--dato); letter-spacing: 0.07em; text-transform: uppercase; }
.tag--construido { background: var(--azul-tenue); border-color: var(--azul-borde); color: var(--azul-hondo); }
.tag--piezas { background: #EEF0F2; border-color: var(--linea2); color: var(--titulo); }
.tag--demo { background: #fff; border: 1px dashed var(--suave); color: var(--titulo); }
.tag--medida { background: #fff; border-color: var(--linea2); color: var(--suave); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* ---------- Barra superior de Quantico ---------- */

.qbar { position: sticky; top: 0; z-index: 50; background: #000; color: #fff; border-bottom: 1px solid #1E1E1E; }
.qbar-in { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.marca { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; color: #fff; text-decoration: none; }
.marca-n { font: 700 12px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
.glifo { display: inline-block; width: 20px; height: 20px; border: 1.5px solid var(--azul); border-radius: 50%; position: relative; flex: none; }
.glifo::after { content: ""; position: absolute; inset: 4.5px; background: var(--azul); border-radius: 50%; }
.sello { display: inline-flex; align-items: center; padding: 4px 7px; border: 1px dashed #767676; border-radius: 3px; font: 500 10.5px/1.3 var(--dato); letter-spacing: 0.03em; text-transform: uppercase; color: #fff; text-align: right; max-width: 175px; }
@media (max-width: 380px) { .marca-n { letter-spacing: 0.14em; } .qbar-in { gap: 8px; } }
.qnav { background: #0B0B0B; border-bottom: 1px solid #1E1E1E; }
.qnav-in { display: flex; flex-wrap: wrap; gap: 0 20px; }
.qnav a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: 14px; text-decoration: none; }
.qnav a:hover { text-decoration: underline; }
.qnav a:focus-visible, .qbar a:focus-visible { outline-color: var(--azul); }
@media (min-width: 720px) {
  .sello { max-width: none; font-size: 12px; letter-spacing: 0.08em; padding: 5px 8px; }
  .marca-n { font-size: 13px; letter-spacing: 0.24em; }
}

/* ---------- Encabezado del demo ---------- */

.d-hero { padding-top: 36px; padding-bottom: 28px; }
.d-hero h1 { margin-bottom: 12px; }
.d-hero .suf { display: block; margin-top: 6px; font: 500 14px/1.3 var(--dato); letter-spacing: 0.06em; color: var(--suave); }
.d-lema { font-size: 1.1rem; color: var(--titulo); margin-bottom: 18px; max-width: 60ch; }
.d-hero-g { display: grid; gap: 22px; }
.dolor { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dolor li { position: relative; padding-left: 20px; max-width: 70ch; }
.dolor li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 2px; background: var(--alerta); }
.tasa-nota { margin: 18px 0 0; padding: 10px 12px; border-left: 3px solid var(--titulo); background: var(--gris); font-size: 0.9rem; color: var(--texto); max-width: 70ch; }
.tasa-nota b { font-family: var(--dato); font-weight: 500; }
@media (min-width: 1024px) {
  .d-hero { padding-top: 52px; padding-bottom: 36px; }
  .d-hero-g { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
}

/* ---------- Área del demo: sistema + Nodo ---------- */

.d-demo { padding-bottom: 56px; }
.d-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) {
  .d-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; }
  .nodo-col { position: sticky; top: 72px; }
}
.col-rot { margin: 0 0 10px; font: 500 12px/1.3 var(--dato); letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); }

/* Marco del sistema */
.app { container-type: inline-size; background: #fff; border: 1px solid var(--linea2); border-radius: 8px; overflow: hidden; }
.app-cab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--linea2); background: #fff; flex-wrap: wrap; }
.insignia { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: var(--acento, #333); color: #fff; font: 800 15px/1 var(--display); letter-spacing: 0.02em; flex: none; }
.app-n { display: grid; line-height: 1.2; min-width: 0; margin-right: auto; }
.app-n b { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--titulo); }
.app-n span { font: 400 12px/1.3 var(--dato); color: var(--suave); }
.app-sello { font: 500 11px/1.2 var(--dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--titulo); border: 1px dashed var(--campo); border-radius: 3px; padding: 5px 7px; }

.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linea2); background: var(--gris); }
.tab {
  appearance: none; margin: 0; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer;
  min-height: 56px; padding: 8px 10px; text-align: left; display: grid; align-content: center; gap: 2px;
  font: 500 13.5px/1.25 var(--cuerpo); color: var(--suave);
}
.tab + .tab { border-left: 1px solid var(--linea2); }
.tab .tn { font: 500 11px/1 var(--dato); letter-spacing: 0.1em; color: var(--suave); }
.tab:hover { color: var(--titulo); }
.tab[aria-selected="true"] { background: #fff; color: var(--titulo); border-bottom-color: var(--azul); font-weight: 600; }
.tab[aria-selected="true"] .tn { color: var(--azul-hondo); }
.tab .dz { font: 500 10.5px/1 var(--dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.tab:focus-visible { outline-offset: -3px; }

.panel { padding: 16px 14px 20px; }
.panel:focus-visible { outline-offset: -3px; }
.panel h3 { margin-bottom: 4px; }
.p-nota { font-size: 0.9rem; color: var(--suave); margin: 4px 0 14px; }
.banda { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--campo); border-radius: 4px; background: var(--gris); color: var(--titulo); font-size: 0.9rem; }
.banda b { flex: none; font: 500 11px/1.6 var(--dato); letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--titulo); border-radius: 3px; padding: 0 6px; }
@container (min-width: 600px) { .panel { padding: 20px 22px 24px; } }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.kpi { border: 1px solid var(--linea2); border-radius: 6px; padding: 10px 12px; background: #fff; transition: background-color 400ms, box-shadow 400ms; }
.kpi .k { display: block; font: 500 11px/1.3 var(--dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.kpi .v { display: block; margin-top: 4px; font: 600 20px/1.2 var(--dato); color: var(--titulo); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi .bs { display: block; font: 400 12px/1.3 var(--dato); color: var(--suave); font-variant-numeric: tabular-nums; }

/* Tablas del sistema */
.tabla-w { width: 100%; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font: 500 11px/1.3 var(--dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); padding: 8px 8px; border-bottom: 1.5px solid var(--titulo); vertical-align: bottom; }
.tabla td { padding: 9px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; color: var(--texto); transition: background-color 400ms, box-shadow 400ms; }
.tabla td:first-child { color: var(--titulo); font-weight: 500; }
@container (min-width: 600px) { .tabla td:first-child { white-space: nowrap; } }
.tabla .n, .tabla .u { text-align: right; font-family: var(--dato); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td.n, .tabla td.u { color: var(--titulo); }
.tabla .u .bs { display: block; font-size: 12px; color: var(--suave); }
.tabla td.cero { color: var(--alerta); font-weight: 600; }
.tabla .unidad { color: var(--suave); font-size: 12px; margin-left: 3px; }
.tabla .vacio { color: var(--tenue); }

.chip { display: inline-block; padding: 3px 7px; border-radius: 3px; border: 1px solid var(--linea2); background: #EEF0F2; color: var(--titulo); font: 500 12px/1.35 var(--cuerpo); }
.chip--ok { background: #E8F4EC; border-color: #B5DCC3; color: #1D6339; }
.chip--pend { background: #FFF5DD; border-color: #EDD49A; color: #6E4B00; }
.chip--alerta { background: #FCEBE9; border-color: #F0BFB9; color: #A02D22; }

/* Resaltado de lo que cambió */
.tabla tr.hl td { background: var(--azul-tenue); }
.tabla td.hl-c { box-shadow: inset 0 0 0 2px var(--azul); }
.kpi.hl-k { background: var(--azul-tenue); box-shadow: inset 0 0 0 2px var(--azul); }
@media (prefers-reduced-motion: reduce) { .tabla td, .kpi { transition: none; } }

/* Tabla como tarjetas cuando el sistema es angosto (sin scroll horizontal) */
@container (max-width: 599px) {
  .tabla, .tabla tbody { display: block; width: 100%; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; border: 1px solid var(--linea2); border-radius: 6px; padding: 8px 12px 10px; margin-bottom: 8px; }
  .tabla td { display: block; padding: 5px 0; border: 0; text-align: left; min-width: 0; }
  .tabla td::before { content: attr(data-l); display: block; font: 500 10.5px/1.4 var(--dato); letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); }
  .tabla td:first-child { grid-column: 1 / -1; font-family: var(--display); font-weight: 700; font-size: 15px; padding: 2px 0 4px; border-bottom: 1px solid var(--linea); margin-bottom: 2px; }
  .tabla .n, .tabla .u { text-align: left; white-space: normal; }
  .tabla td .cv { display: block; }
  .tabla tr.hl { border-color: var(--azul); }
}

/* Marco del chat del Nodo */
.nodo { background: #000; color: #fff; border-radius: 12px; padding: 12px; }
.nodo-cab { display: flex; align-items: flex-start; gap: 10px; padding: 4px 4px 12px; }
.nodo-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--acento, #333); color: #fff; font: 800 12px/1 var(--display); flex: none; }
.nodo-t { display: grid; gap: 2px; min-width: 0; }
.nodo-t b { color: #fff; font: 600 14px/1.25 var(--cuerpo); }
.nodo-canal { font: 500 11.5px/1.3 var(--dato); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.nodo-canal i { font-style: normal; color: #000; background: var(--azul); padding: 1px 5px; border-radius: 2px; }
.nodo-est { font-size: 12.5px; line-height: 1.4; color: var(--claro); }

.chat { background: var(--gris); border-radius: 8px; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
@media (min-width: 1024px) { .chat { max-height: 480px; overflow-y: auto; overscroll-behavior: contain; } }
.msg { max-width: 88%; display: grid; gap: 3px; }
.msg-q { font: 500 10.5px/1.2 var(--dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.msg-b { padding: 9px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.msg--c { align-self: flex-start; }
.msg--c .msg-b { background: #fff; border: 1px solid var(--linea2); color: var(--titulo); border-top-left-radius: 3px; }
.msg--n { align-self: flex-end; }
.msg--n .msg-q { text-align: right; color: var(--azul-hondo); }
.msg--n .msg-b { background: var(--azul-hondo); color: #fff; border-top-right-radius: 3px; }
.msg--p { align-self: flex-end; }
.msg--p .msg-q { text-align: right; color: var(--titulo); }
.msg--p .msg-b { background: #333; color: #fff; border-top-right-radius: 3px; }
.msg-nota { align-self: center; max-width: 92%; text-align: center; font: 500 11px/1.4 var(--dato); letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); padding: 4px 10px; border: 1px dashed var(--linea2); border-radius: 20px; background: #fff; }
.adj { display: flex; align-items: center; gap: 10px; margin-top: 7px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35); font-size: 12.5px; line-height: 1.35; }
.msg--c .adj { background: var(--gris); border-color: var(--linea2); color: var(--texto); }
.adj svg { width: 44px; height: 44px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .msg.nuevo, .msg-nota.nuevo { animation: entra 260ms ease-out; }
  @keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

.controles { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 2px; }
.controles .btn { flex: 1 1 auto; min-height: 46px; padding: 0 14px; font-size: 14.5px; }
.nodo .btn-p { background: var(--azul); color: #000; }
.nodo .btn-p:hover { background: #3395FF; }
.nodo .btn-s { background: transparent; color: #fff; border-color: #767676; }
.nodo .btn-s:hover { border-color: #fff; }
.nodo :focus-visible { outline-color: var(--azul); }

/* Lo que hizo el sistema */
.traza { margin-top: 14px; border: 1px solid var(--linea2); border-left: 3px solid var(--titulo); border-radius: 4px; padding: 14px 14px 12px; background: #fff; }
.traza h3 { font: 500 12px/1.3 var(--dato); letter-spacing: 0.14em; text-transform: uppercase; color: var(--titulo); margin-bottom: 8px; }
.traza ol { padding-left: 22px; display: grid; gap: 10px; }
.traza li { font-size: 14px; line-height: 1.5; padding-left: 2px; }
.traza li::marker { font-family: var(--dato); color: var(--suave); font-size: 12px; }
.traza .ver { appearance: none; background: none; border: 0; padding: 0; margin: 2px 0 0; min-height: 44px; display: inline-flex; align-items: center; color: var(--azul-hondo); font: 500 13.5px/1.2 var(--cuerpo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.traza-vacia { font-size: 14px; color: var(--suave); margin: 0; }

/* ---------- Qué es real hoy ---------- */

.real { background: var(--gris); padding: 56px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.real-cab { display: grid; gap: 14px; margin-bottom: 28px; }
.real-g { display: grid; gap: 16px; }
.real-c { background: #fff; border: 1px solid var(--linea2); border-radius: 6px; padding: 18px 18px 20px; }
.real-c h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.real-c h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.real-c--si h3::before { background: var(--azul); }
.real-c--dz h3::before { border: 1.5px dashed var(--campo); }
.real-c--lim h3::before { background: var(--titulo); border-radius: 1px; }
.real-c ul { padding: 0; list-style: none; display: grid; gap: 9px; }
.real-c li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.5; }
.real-c li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 7px; height: 1.5px; background: var(--campo); }
@media (min-width: 900px) {
  .real { padding: 80px 0; }
  .real-g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

/* ---------- CTA ---------- */

.cta { padding: 56px 0; }
.cta-in { display: grid; gap: 20px; align-items: center; }
.cta h2 { max-width: 20ch; }
@media (min-width: 900px) {
  .cta { padding: 80px 0; }
  .cta-in { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
}

/* ---------- Pie ---------- */

.pie { background: #000; color: var(--claro); padding: 28px 0 36px; }
.pie a { color: #fff; }
.pie-nav { display: grid; gap: 8px; margin-bottom: 22px; }
.pie-nav a { display: grid; gap: 2px; min-height: 44px; padding: 10px 14px; border: 1px solid #2A2A2A; border-radius: 6px; text-decoration: none; }
.pie-nav a:hover { border-color: #767676; }
.pie-nav small { font: 500 11px/1.3 var(--dato); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); }
.pie-nav span { font-weight: 600; color: #fff; }
.pie-nav .sig { text-align: right; }
.pie-leg { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 14px; }
.pie-leg a { display: inline-flex; align-items: center; min-height: 44px; }
.pie-leg p { margin: 12px 0 0; flex-basis: 100%; color: var(--tenue); font-size: 13px; }
.pie :focus-visible { outline-color: var(--azul); }
@media (min-width: 720px) { .pie-nav { grid-template-columns: 1fr 1fr; } }

/* ---------- Sin JavaScript ---------- */

.ns { padding-top: 32px; padding-bottom: 32px; }
.ns h1 { margin-bottom: 12px; }
.ns ul { margin: 0 0 18px; }
.d-error { padding-top: 32px; padding-bottom: 32px; }

/* ---------- Galería ---------- */

.gal-hero { padding-top: 40px; padding-bottom: 28px; }
.gal-hero h1 { margin-bottom: 14px; }
.gal-hero .lead { font-size: 1.1rem; color: var(--titulo); max-width: 62ch; }
.leyenda { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; }
.leyenda div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.leyenda dt { margin: 0; }
.leyenda dd { margin: 0; color: var(--suave); }
.gal { padding-top: 8px; padding-bottom: 64px; }
.gal-g { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .gal-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gal-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px 18px 16px; border: 1px solid var(--linea2); border-radius: 8px; background: #fff; }
.card:hover { border-color: var(--campo); }
.card-top { display: flex; align-items: center; gap: 12px; }
.card .insignia { width: 34px; height: 34px; font-size: 13px; }
.card-rub { font: 500 12px/1.3 var(--dato); letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); }
.card h2 { font-size: 1.2rem; letter-spacing: -0.015em; }
.card h2 a { color: var(--titulo); text-decoration: none; }
.card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.card h2 a:hover { text-decoration: underline; }
.card h2 a:focus-visible { outline: none; }
.card:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }
.card .suf { display: block; font: 400 12px/1.3 var(--dato); color: var(--suave); letter-spacing: 0.04em; margin-top: 3px; }
.card p { font-size: 15px; margin: 0; color: var(--texto); }
.card .tags { margin-top: auto; padding-top: 6px; }
.card .tag { font-size: 11px; padding: 5px 7px; }
.card-ver { font: 600 14px/1.2 var(--cuerpo); color: var(--azul-hondo); }