/* ininvoice — producto.css (diseno, 25/10/2026)
 * Hero con la cinta (js/cinta.js) y las maquetas del producto en HTML/CSS (datos de
 * ejemplo, sin capturas). Depende de los tokens de /css/sistema.css.
 */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ii-hero { position: relative; overflow: hidden; margin-top: -77px; padding: calc(77px + 56px) 0 64px; background: var(--ii-bg); isolation: isolate; }
@media (min-width: 940px) { .ii-hero { padding: calc(77px + 40px) 0 72px; } }
.ii-hero__cinta {
  position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 420px; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
}
@media (min-width: 940px) { .ii-hero__cinta { left: 23%; right: auto; width: 97%; height: 100%; -webkit-mask-image: none; mask-image: none; } }
.ii-hero__cinta canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms var(--ii-ease); }
.ii-hero__cinta.is-viva canvas { opacity: 1; }
/* Imagen estática (sin WebGL, movimiento reducido o antes del primer fotograma): la misma cinta en CSS. */
.ii-hero__estatica {
  position: absolute; inset: 0; transition: opacity 900ms var(--ii-ease);
  background: linear-gradient(128deg, transparent 30%, rgba(0, 184, 230, .55) 38%, var(--ii-cinta-1) 46%, var(--ii-cinta-3) 56%, var(--ii-cinta-4) 66%, rgba(255, 210, 122, .85) 72%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent), linear-gradient(90deg, transparent, #000 25%);
  mask-image: linear-gradient(180deg, #000 70%, transparent), linear-gradient(90deg, transparent, #000 25%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  filter: blur(6px) saturate(1.05);
}
.ii-hero__cinta.is-viva .ii-hero__estatica { opacity: 0; }
.ii-hero__rejilla { position: relative; display: grid; gap: 48px; align-items: center; }
@media (min-width: 940px) { .ii-hero__rejilla { grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; } }
.ii-hero__texto { max-width: 720px; }
.ii-hero__dato { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; font-size: 14px; font-weight: 500; color: var(--ii-ink); }
.ii-hero__dato::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ii-ok); box-shadow: 0 0 0 3px var(--ii-ok-soft); }
.ii-hero .ii-h1 { mix-blend-mode: normal; }
.ii-hero .ii-h1 .ii-tono { color: #3F5B85; }
.ii-hero__lead { margin: 24px 0 0; font-size: var(--ii-fs-lead); line-height: var(--ii-lh-lead); color: var(--ii-text); max-width: 34em; }
.ii-hero__lead b { color: var(--ii-ink); font-weight: 500; }
@media (max-width: 939px) { .ii-hero__visual { display: none; } }

/* ── Maquetas del producto (marco, filas, chips) ─────────────────────────── */
.ii-mock {
  position: relative; background: var(--ii-bg); border-radius: var(--ii-radius-lg); box-shadow: var(--ii-shadow-mock);
  font-size: 12.5px; line-height: 1.4; color: var(--ii-ink); overflow: hidden; text-align: left;
  font-variant-numeric: tabular-nums;
}
.ii-mock__barra { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--ii-bg-soft); border-bottom: 1px solid var(--ii-line); }
.ii-mock__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--ii-line-strong); }
.ii-mock__barra span { flex: 1; margin-left: 10px; height: 20px; border-radius: 6px; background: var(--ii-bg); border: 1px solid var(--ii-line); font-size: 11px; line-height: 18px; color: var(--ii-muted); text-align: center; font-style: normal; }
.ii-mock__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.ii-mock__cab b { font-size: 13.5px; font-weight: 600; }
.ii-mock__cab small { color: var(--ii-muted); font-size: 11.5px; }
.ii-mock__ej { font-size: 10.5px; font-weight: 500; color: var(--ii-muted); background: var(--ii-bg-soft); border-radius: 4px; padding: 2px 6px; }
.ii-mock table { width: 100%; border-collapse: collapse; display: table !important; overflow: visible !important; }
.ii-mock th { text-align: left; font-size: 10.5px; font-weight: 500; color: var(--ii-muted); padding: 6px 16px; border-bottom: 1px solid var(--ii-line); white-space: nowrap; }
.ii-mock td { padding: 9px 16px; border-bottom: 1px solid var(--ii-line); white-space: nowrap; }
.ii-mock tr:last-child td { border-bottom: 0; }
.ii-mock .num { text-align: right; }
.ii-mock .apagado { color: var(--ii-muted); }
.ii-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.ii-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ii-chip--ok { color: #0A6644; background: var(--ii-ok-soft); }
.ii-chip--warn { color: #864604; background: var(--ii-warn-soft); }
.ii-chip--bad { color: #9E2A21; background: var(--ii-bad-soft); }
.ii-chip--info { color: #0050C8; background: var(--ii-accent-soft); }
.ii-mock__dif { color: #864604; font-weight: 600; }
.ii-mock__ok { color: #0A6644; font-weight: 500; }
.ii-mock__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--ii-bg-soft); border-top: 1px solid var(--ii-line); }
.ii-mock__botones { display: flex; gap: 6px; flex-wrap: wrap; }
.ii-mock__btn { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 4px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--ii-line-strong); background: var(--ii-bg); color: var(--ii-ink); }
.ii-mock__btn--pri { background: var(--ii-accent); border-color: var(--ii-accent); color: #fff; }
.ii-mock__aviso { margin: 0 16px 14px; padding: 10px 12px; border-radius: var(--ii-radius); background: var(--ii-warn-soft); color: #7A4205; font-size: 12px; }
.ii-mock__aviso b { color: #5C3203; }

/* tarjetas flotantes del hero */
.ii-flota { position: relative; height: 600px; perspective: 1600px; }
.ii-flota .ii-mock { position: absolute; font-size: 11.5px; box-shadow: var(--ii-shadow-mock-lg); transition: transform 600ms var(--ii-ease-out); }
.ii-flota .ii-mock th, .ii-flota .ii-mock td { padding-left: 10px; padding-right: 10px; }
.ii-flota__b td { white-space: normal; }
.ii-flota__b td:first-child, .ii-mock td.num, .ii-mock__cab b { white-space: nowrap; }
.ii-mock__cab small { text-align: right; }
.ii-flota__a { top: 0; right: 0; width: 410px; transform: rotateY(-8deg) rotateX(4deg); }
.ii-flota__b { top: 222px; right: 112px; width: 340px; transform: rotateY(-8deg) rotateX(4deg) translateZ(40px); }
.ii-flota__c { top: 452px; right: -8px; width: 230px; transform: rotateY(-8deg) rotateX(4deg) translateZ(80px); }
.ii-flota:hover .ii-flota__a { transform: rotateY(-4deg) rotateX(2deg); }
.ii-flota:hover .ii-flota__b { transform: rotateY(-4deg) rotateX(2deg) translateZ(40px) translateY(-4px); }
.ii-flota:hover .ii-flota__c { transform: rotateY(-4deg) rotateX(2deg) translateZ(80px) translateY(-8px); }

/* factura leída: documento y campos */
.ii-doc { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px; }
.ii-doc__papel { aspect-ratio: 1 / 1.35; border-radius: 6px; background: var(--ii-bg); box-shadow: var(--ii-shadow-card-rest); padding: 12px; display: grid; gap: 7px; align-content: start; }
.ii-doc__papel i { display: block; height: 6px; border-radius: 3px; background: var(--ii-line); }
.ii-doc__papel i.ancha { width: 70%; height: 9px; background: var(--ii-line-strong); }
.ii-doc__papel i.marca { background: rgba(1, 109, 255, .35); }
.ii-doc__papel i.corta { width: 45%; }
.ii-campos { display: grid; gap: 6px; margin: 0; }
.ii-campos div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 6px; background: var(--ii-bg-soft); }
.ii-campos dt { color: var(--ii-muted); }
.ii-campos dd { margin: 0; font-weight: 500; }

/* sociedades */
.ii-socs { display: grid; gap: 8px; padding: 0 16px 16px; }
.ii-soc { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--ii-line); border-radius: var(--ii-radius); }
.ii-soc b { font-weight: 500; }
.ii-soc small { display: block; color: var(--ii-muted); font-size: 11px; }

/* lienzo del flujo hacia el ERP: los dos SVG (ancho ≥ 1040 px, alto por debajo) y las animaciones de
 * abajo salen de la misma geometría: scripts/generar-lienzo-erp.py (si se mueve un nodo, se regeneran juntos). */
.ii-lienzo { margin: 48px 0 0; max-width: 420px; border-radius: var(--ii-radius-xl); overflow: hidden; background: #F7F9FC; box-shadow: var(--ii-shadow-mock-lg); }
.ii-lienzo__svg { display: block; width: 100%; height: auto; font-family: var(--ii-font); }
.ii-lienzo__ancho { display: none; }
@media (min-width: 1040px) { .ii-lienzo { max-width: none; } .ii-lienzo__ancho { display: block; } .ii-lienzo__alto { display: none; } }
.ii-lz-tit { font-size: 16.5px; font-weight: 500; fill: var(--ii-ink); }
.ii-lz-sub { font-size: 13.5px; fill: var(--ii-muted); }
.ii-lz-tabtxt { font-size: 13px; font-weight: 500; fill: #fff; }
.ii-lz-pilltxt { font-size: 13px; font-weight: 500; }
.ii-lz-rama { font-size: 13px; font-weight: 500; fill: var(--ii-muted); }
.ii-lz-gira { transform-box: fill-box; transform-origin: center; animation: ii-lz-gira 1s linear infinite; }
@keyframes ii-lz-gira { to { transform: rotate(360deg); } }
/* lienzo:animaciones */
@keyframes ii-lz-lza-cometa-a-0 { 0%, 2.61% { stroke-dashoffset: 90; } 45.23%, 100% { stroke-dashoffset: -3440; } }
.ii-lz-lza-cometa-a-0 { animation: ii-lz-lza-cometa-a-0 15.34s linear infinite; }
@keyframes ii-lz-lza-cometa-a-1 { 0%, 2.61% { stroke-dashoffset: 160; } 46.08%, 100% { stroke-dashoffset: -3440; } }
.ii-lz-lza-cometa-a-1 { animation: ii-lz-lza-cometa-a-1 15.34s linear infinite; }
@keyframes ii-lz-lza-cometa-a-2 { 0%, 2.61% { stroke-dashoffset: 90; } 45.23%, 100% { stroke-dashoffset: -3440; } }
.ii-lz-lza-cometa-a-2 { animation: ii-lz-lza-cometa-a-2 15.34s linear infinite; }
@keyframes ii-lz-lza-cometa-a-3 { 0%, 2.61% { stroke-dashoffset: 28; } 44.48%, 100% { stroke-dashoffset: -3440; } }
.ii-lz-lza-cometa-a-3 { animation: ii-lz-lza-cometa-a-3 15.34s linear infinite; }
@keyframes ii-lz-lza-cometa-b-0 { 0%, 53.25% { stroke-dashoffset: 90; } 91.98%, 100% { stroke-dashoffset: -3118; } }
.ii-lz-lza-cometa-b-0 { animation: ii-lz-lza-cometa-b-0 15.34s linear infinite; }
@keyframes ii-lz-lza-cometa-b-1 { 0%, 53.25% { stroke-dashoffset: 160; } 92.83%, 100% { stroke-dashoffset: -3118; } }
.ii-lz-lza-cometa-b-1 { animation: ii-lz-lza-cometa-b-1 15.34s linear infinite; }
@keyframes ii-lz-lza-cometa-b-2 { 0%, 53.25% { stroke-dashoffset: 90; } 91.98%, 100% { stroke-dashoffset: -3118; } }
.ii-lz-lza-cometa-b-2 { animation: ii-lz-lza-cometa-b-2 15.34s linear infinite; }
@keyframes ii-lz-lza-cometa-b-3 { 0%, 53.25% { stroke-dashoffset: 28; } 91.23%, 100% { stroke-dashoffset: -3118; } }
.ii-lz-lza-cometa-b-3 { animation: ii-lz-lza-cometa-b-3 15.34s linear infinite; }
@keyframes ii-lz-lza-n2 { 0% { stroke: #DAE1EB; } 4.31% { stroke: #DAE1EB; } 5.75% { stroke: #016DFF; } 12.28% { stroke: #016DFF; } 13.71% { stroke: #DAE1EB; } 54.95% { stroke: #DAE1EB; } 56.39% { stroke: #016DFF; } 62.92% { stroke: #016DFF; } 64.35% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lza-n2 { animation: ii-lz-lza-n2 15.34s linear infinite; }
@keyframes ii-lz-lza-n3 { 0% { stroke: #DAE1EB; } 9.26% { stroke: #DAE1EB; } 10.7% { stroke: #016DFF; } 17.23% { stroke: #016DFF; } 18.66% { stroke: #DAE1EB; } 59.9% { stroke: #DAE1EB; } 61.34% { stroke: #016DFF; } 67.87% { stroke: #016DFF; } 69.3% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lza-n3 { animation: ii-lz-lza-n3 15.34s linear infinite; }
@keyframes ii-lz-lza-n4 { 0% { stroke: #DAE1EB; } 29.89% { stroke: #DAE1EB; } 31.32% { stroke: #016DFF; } 38.41% { stroke: #016DFF; } 39.84% { stroke: #DAE1EB; } 80.53% { stroke: #DAE1EB; } 81.96% { stroke: #016DFF; } 89.34% { stroke: #016DFF; } 90.77% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lza-n4 { animation: ii-lz-lza-n4 15.34s linear infinite; }
@keyframes ii-lz-lza-n5 { 0% { stroke: #DAE1EB; } 35.95% { stroke: #DAE1EB; } 37.38% { stroke: #11845B; } 43.91% { stroke: #11845B; } 45.35% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lza-n5 { animation: ii-lz-lza-n5 15.34s linear infinite; }
@keyframes ii-lz-lza-n6 { 0% { stroke: #DAE1EB; } 40.9% { stroke: #DAE1EB; } 42.33% { stroke: #016DFF; } 50.64% { stroke: #016DFF; } 52.07% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lza-n6 { animation: ii-lz-lza-n6 15.34s linear infinite; }
@keyframes ii-lz-lza-n7 { 0% { stroke: #DAE1EB; } 87.65% { stroke: #DAE1EB; } 89.08% { stroke: #C77A12; } 97.39% { stroke: #C77A12; } 98.83% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lza-n7 { animation: ii-lz-lza-n7 15.34s linear infinite; }
@keyframes ii-lz-lza-si { 0% { fill: #5B6A84; } 34.06% { fill: #5B6A84; } 35.5% { fill: #016DFF; } 44.63% { fill: #016DFF; } 46.06% { fill: #5B6A84; } 100% { fill: #5B6A84; } }
.ii-lz-lza-si { animation: ii-lz-lza-si 15.34s linear infinite; }
@keyframes ii-lz-lza-no { 0% { fill: #5B6A84; } 84.99% { fill: #5B6A84; } 86.43% { fill: #C77A12; } 95.56% { fill: #C77A12; } 96.99% { fill: #5B6A84; } 100% { fill: #5B6A84; } }
.ii-lz-lza-no { animation: ii-lz-lza-no 15.34s linear infinite; }
@keyframes ii-lz-lzm-cometa-a-0 { 0%, 3.93% { stroke-dashoffset: 60; } 51.27%, 100% { stroke-dashoffset: -1240; } }
.ii-lz-lzm-cometa-a-0 { animation: ii-lz-lzm-cometa-a-0 10.17s linear infinite; }
@keyframes ii-lz-lzm-cometa-a-1 { 0%, 3.93% { stroke-dashoffset: 110; } 53.1%, 100% { stroke-dashoffset: -1240; } }
.ii-lz-lzm-cometa-a-1 { animation: ii-lz-lzm-cometa-a-1 10.17s linear infinite; }
@keyframes ii-lz-lzm-cometa-a-2 { 0%, 3.93% { stroke-dashoffset: 60; } 51.27%, 100% { stroke-dashoffset: -1240; } }
.ii-lz-lzm-cometa-a-2 { animation: ii-lz-lzm-cometa-a-2 10.17s linear infinite; }
@keyframes ii-lz-lzm-cometa-a-3 { 0%, 3.93% { stroke-dashoffset: 20; } 49.82%, 100% { stroke-dashoffset: -1240; } }
.ii-lz-lzm-cometa-a-3 { animation: ii-lz-lzm-cometa-a-3 10.17s linear infinite; }
@keyframes ii-lz-lzm-cometa-b-0 { 0%, 63.91% { stroke-dashoffset: 60; } 87.36%, 100% { stroke-dashoffset: -584; } }
.ii-lz-lzm-cometa-b-0 { animation: ii-lz-lzm-cometa-b-0 10.17s linear infinite; }
@keyframes ii-lz-lzm-cometa-b-1 { 0%, 63.91% { stroke-dashoffset: 110; } 89.18%, 100% { stroke-dashoffset: -584; } }
.ii-lz-lzm-cometa-b-1 { animation: ii-lz-lzm-cometa-b-1 10.17s linear infinite; }
@keyframes ii-lz-lzm-cometa-b-2 { 0%, 63.91% { stroke-dashoffset: 60; } 87.36%, 100% { stroke-dashoffset: -584; } }
.ii-lz-lzm-cometa-b-2 { animation: ii-lz-lzm-cometa-b-2 10.17s linear infinite; }
@keyframes ii-lz-lzm-cometa-b-3 { 0%, 63.91% { stroke-dashoffset: 20; } 85.91%, 100% { stroke-dashoffset: -584; } }
.ii-lz-lzm-cometa-b-3 { animation: ii-lz-lzm-cometa-b-3 10.17s linear infinite; }
@keyframes ii-lz-lzm-n2 { 0% { stroke: #DAE1EB; } 5.05% { stroke: #DAE1EB; } 7.21% { stroke: #016DFF; } 16.04% { stroke: #016DFF; } 18.2% { stroke: #DAE1EB; } 65.03% { stroke: #DAE1EB; } 67.19% { stroke: #016DFF; } 76.02% { stroke: #016DFF; } 78.18% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lzm-n2 { animation: ii-lz-lzm-n2 10.17s linear infinite; }
@keyframes ii-lz-lzm-n3 { 0% { stroke: #DAE1EB; } 10% { stroke: #DAE1EB; } 12.16% { stroke: #016DFF; } 20.99% { stroke: #016DFF; } 23.16% { stroke: #DAE1EB; } 69.98% { stroke: #DAE1EB; } 72.14% { stroke: #016DFF; } 80.97% { stroke: #016DFF; } 83.14% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lzm-n3 { animation: ii-lz-lzm-n3 10.17s linear infinite; }
@keyframes ii-lz-lzm-n4 { 0% { stroke: #DAE1EB; } 14.95% { stroke: #DAE1EB; } 17.12% { stroke: #016DFF; } 30.97% { stroke: #016DFF; } 33.14% { stroke: #DAE1EB; } 74.93% { stroke: #DAE1EB; } 77.09% { stroke: #016DFF; } 87.38% { stroke: #016DFF; } 89.54% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lzm-n4 { animation: ii-lz-lzm-n4 10.17s linear infinite; }
@keyframes ii-lz-lzm-n5 { 0% { stroke: #DAE1EB; } 36.37% { stroke: #DAE1EB; } 38.53% { stroke: #11845B; } 50.71% { stroke: #11845B; } 52.87% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lzm-n5 { animation: ii-lz-lzm-n5 10.17s linear infinite; }
@keyframes ii-lz-lzm-n6 { 0% { stroke: #DAE1EB; } 45.25% { stroke: #DAE1EB; } 47.41% { stroke: #016DFF; } 59.98% { stroke: #016DFF; } 62.14% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lzm-n6 { animation: ii-lz-lzm-n6 10.17s linear infinite; }
@keyframes ii-lz-lzm-n7 { 0% { stroke: #DAE1EB; } 81.34% { stroke: #DAE1EB; } 83.5% { stroke: #C77A12; } 96.07% { stroke: #C77A12; } 98.23% { stroke: #DAE1EB; } 100% { stroke: #DAE1EB; } }
.ii-lz-lzm-n7 { animation: ii-lz-lzm-n7 10.17s linear infinite; }
@keyframes ii-lz-lzm-si { 0% { fill: #5B6A84; } 23.33% { fill: #5B6A84; } 25.49% { fill: #016DFF; } 39.26% { fill: #016DFF; } 41.42% { fill: #5B6A84; } 100% { fill: #5B6A84; } }
.ii-lz-lzm-si { animation: ii-lz-lzm-si 10.17s linear infinite; }
@keyframes ii-lz-lzm-no { 0% { fill: #5B6A84; } 79.74% { fill: #5B6A84; } 81.9% { fill: #C77A12; } 95.67% { fill: #C77A12; } 97.83% { fill: #5B6A84; } 100% { fill: #5B6A84; } }
.ii-lz-lzm-no { animation: ii-lz-lzm-no 10.17s linear infinite; }
/* /lienzo:animaciones */
.ii-js .ii-lienzo:not(.is-visto) * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ii-lz-cometa { display: none; } }

/* sectores */
.ii-sectores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 40px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ii-muted); }
.ii-sectores a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--ii-line); color: var(--ii-ink); text-decoration: none; transition: border-color var(--ii-dur-fast) var(--ii-ease), color var(--ii-dur-fast) var(--ii-ease); }
.ii-sectores a:hover { border-color: var(--ii-accent); color: var(--ii-accent); }

/* guías relacionadas */
.ii-guias { columns: 1; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .ii-guias { columns: 2; } }
@media (min-width: 940px) { .ii-guias { columns: 3; } }
.ii-guias li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--ii-line); }
.ii-guias a { color: var(--ii-ink); text-decoration: none; font-size: 15px; }
.ii-guias a:hover { color: var(--ii-accent); }
.ii-firma { margin: 16px 0 0; font-size: 14px; color: var(--ii-muted); }
.ii-firma a { color: var(--ii-ink); }
@media (max-width: 639px) {
  .ii-doc { grid-template-columns: 84px 1fr; gap: 12px; padding: 12px; }
  .ii-mock { overflow-x: auto; }
  .ii-mock th, .ii-mock td { padding-left: 10px; padding-right: 10px; }
}