:root {
  color-scheme: light dark;

  --papel: #fcfcfa;
  --papel-hundido: #f5f4f0;
  --superficie: #ffffff;
  --superficie-alt: #faf9f6;

  /* Bordes finos y de bajo contraste: se ven cuando se los busca. */
  --linea: #e7e5df;
  --linea-fuerte: #d5d2ca;

  --tinta: #14130f;
  --tinta-media: #56534a;
  --tinta-suave: #837f74;
  --tinta-tenue: #a8a498;

  /* Acción primaria: tinta. No hay color de marca. */
  --accion: #14130f;
  --accion-texto: #fcfcfa;
  --accion-hover: #2c2a24;

  /* Color = estado. Cuatro y nada más. Elegidos apagados a propósito: en una
     tabla de cien filas un verde saturado grita más que el error. */
  --ok: #2f6b45;
  --ok-fondo: #eef4ef;
  --aviso: #8a5b12;
  --aviso-fondo: #f8f2e6;
  --error: #9c2f28;
  --error-fondo: #f9eeed;
  --info: #3c5a70;
  --info-fondo: #eef2f5;

  /* Una sola sombra, ambiental y amplia. Se usa en el panel y en el modal. En
     ninguna otra parte. */
  --sombra: 0 1px 2px rgba(20, 19, 15, 0.03), 0 12px 32px -12px rgba(20, 19, 15, 0.10);
  --foco: 0 0 0 3px rgba(20, 19, 15, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0f0f0e;
    --papel-hundido: #0a0a09;
    --superficie: #161614;
    --superficie-alt: #1c1c19;

    --linea: #2a2a26;
    --linea-fuerte: #3d3d37;

    --tinta: #f4f3ee;
    --tinta-media: #b0ada3;
    --tinta-suave: #8b877d;
    --tinta-tenue: #66635b;

    --accion: #f4f3ee;
    --accion-texto: #14130f;
    --accion-hover: #ffffff;

    --ok: #7fb894;
    --ok-fondo: #16221a;
    --aviso: #d3a35c;
    --aviso-fondo: #241c10;
    --error: #e08a82;
    --error-fondo: #251515;
    --info: #93b2c9;
    --info-fondo: #141c22;

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
    --foco: 0 0 0 3px rgba(244, 243, 238, 0.24);
  }
}


:root {
  --tipo: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Mono para datos de sistema: CUIT, identificadores, hashes, versiones,
     fechas, estados. No invade el resto de la interfaz. */
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  --t-micro: 0.6875rem;
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.0625rem;
  --t-xl: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --t-3xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --t-4xl: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);
  --display: clamp(3rem, 1.6rem + 6.4vw, 6.5rem);
  /*
    Los dos tamanos que hacen que una portada se lea como producto y no como
    documentacion.

      --t-portada  el titulo de la portada. 44px en un telefono, 88px en 1440.
      --t-cifra    un numero que ES el dato. Ocupa como una imagen.

    No son un --t-5xl y un --t-6xl a proposito: la escala normal termina en
    --t-4xl y sigue sirviendo para todo lo demas. Estos dos se usan pocas veces
    por pagina, y tener que nombrarlos obliga a decidir cuando.
  */
  --t-portada: clamp(2.75rem, 1.55rem + 5.4vw, 5.5rem);
  --t-cifra: clamp(3.5rem, 1.9rem + 7.2vw, 7.5rem);

  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4.5rem;
  --e9: 7rem;
  --e10: 10rem;

  /* Radios: chico para controles, grande sólo para superficies que son objetos. */
  --radio-ctl: 8px;
  --radio-obj: 20px;

  /*
    Tres anchos, y son tres cosas distintas.

    Se confundían en uno solo, y el resultado era una portada entera viviendo
    adentro de una columna de 34rem en un monitor de 1440: aire de sobra a la
    derecha, pero ninguna composicion. Un texto largo se lee a 34-45rem y eso no
    va a cambiar; lo que no tiene por que encogerse a esa medida es la pagina.

      --lectura  la medida de un parrafo largo. Solo para prosa.
      --texto    la medida de una bajada o una descripcion. Un poco mas ancha.
      --pagina   el lienzo. Es lo que ocupa una composicion, no un renglon.
  */
  --lectura: 34rem;
  --texto: 42rem;
  --pagina: 92rem;
  --panel: 92rem;

  /* Easing natural, duración lenta pero no pesada. */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lento: 320ms;
  --medio: 200ms;
}


*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--tipo);
  font-size: var(--t-base);
  line-height: 1.6;
  letter-spacing: -0.006em;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.02em; }
h4 { font-size: var(--t-lg); letter-spacing: -0.012em; font-weight: 550; }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration-color: var(--tinta-tenue); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }

ul, ol { margin: 0; padding-left: 1.15em; }
li::marker { color: var(--tinta-tenue); }

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.92em; }
pre { margin: 0; overflow-x: auto; }

img, svg { max-width: 100%; height: auto; display: block; }

table { border-collapse: collapse; width: 100%; }

/* El anillo de foco no se apaga nunca: es cómo navega quien usa teclado, y
   "queda feo" no es motivo para dejar a alguien sin saber dónde está parado. */
:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--tinta); color: var(--papel); }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Primer elemento enfocable de toda página. Sin esto, quien navega con teclado
   atraviesa la navegación entera en cada página. */
.saltar {
  position: absolute;
  left: var(--e4); top: -6rem;
  z-index: 100;
  background: var(--accion);
  color: var(--accion-texto);
  padding: var(--e2) var(--e4);
  border-radius: var(--radio-ctl);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: top var(--medio) var(--curva);
}
.saltar:focus { top: var(--e4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


.marco {
  width: 100%;
  max-width: var(--pagina);
  margin-inline: auto;
  padding-inline: var(--e5);
}
@media (min-width: 900px) { .marco { padding-inline: var(--e7); } }

.lectura { max-width: var(--lectura); }
.medida { max-width: 46rem; }
.texto { max-width: var(--texto); }

.pila { display: flex; flex-direction: column; align-items: flex-start; }
.pila-1 { gap: var(--e1); } .pila-2 { gap: var(--e2); } .pila-3 { gap: var(--e3); }
.pila-4 { gap: var(--e4); } .pila-5 { gap: var(--e5); } .pila-6 { gap: var(--e6); }
.pila-7 { gap: var(--e7); } .pila-8 { gap: var(--e8); }
.pila-estira { align-items: stretch; }

.fila { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.fila-entre { justify-content: space-between; }
.fila-fin { justify-content: flex-end; }
.fila-arriba { align-items: flex-start; }
.fila-firme { flex-wrap: nowrap; }
.crece { flex: 1 1 auto; min-width: 0; }

/*
  El ancho del 100% no es decorativo.

  .pila alinea sus hijos a flex-start, así que una rejilla adentro de una pila se
  encoge hasta el contenido y auto-fit no tiene ancho que repartir: las tres
  columnas salen apiladas una abajo de la otra. Se vio en la portada, con los
  tres números del catálogo en fila vertical. Vale igual para .desparejo.

  ⚠️ Y una nota para quien edite este archivo: adentro de estos bloques NO se
  pueden usar acentos graves ni siquiera en un comentario. El CSS vive en una
  plantilla de JavaScript, y el primero que aparezca la cierra — el error que
  sale es un "','  expected" en una línea de CSS, que no se parece en nada a la
  causa.
*/
.auto {
  display: grid;
  width: 100%;
  gap: var(--e6) var(--e7);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 17rem), 100%), 1fr));
}
.auto-ancho { --min: 24rem; }
/* Un mínimo grande fuerza tres columnas anchas en vez de cuatro apretadas: es
   la diferencia entre una composición y la fila de KPIs de cualquier tablero. */
.auto-tres { --min: 15rem; gap: var(--e6) var(--e8); }

/* Composición asimétrica: el contenido pesa más que el margen de contexto.
   Es la forma editorial de un "sidebar" sin que sea una barra. */
.desparejo { display: grid; width: 100%; gap: var(--e6); }
@media (min-width: 900px) {
  .desparejo { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: var(--e8); }
  .desparejo-inverso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
}

.centro { text-align: center; }
.derecha { text-align: right; }

.solo-chico { display: none; }
@media (max-width: 839px) {
  .solo-chico { display: revert; }
  .desde-mediano { display: none !important; }
}


.display {
  font-size: var(--display);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 480;
  font-variant-numeric: tabular-nums;
}

/*
  Tres escalas de titulo, y la distancia entre ellas es la que hace la jerarquia.

  El titulo de una pantalla del panel puede ser grande sin volverse una portada:
  lo que lo separa de un encabezado de landing no es el tamano sino que abajo hay
  densidad —tablas, estados, controles— y no aire.

  El peso baja de 500 a 460 al crecer: a 48px, 500 se lee pesado. Es la misma
  correccion optica que hace la portada.
*/
.titulo-pantalla { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -0.034em; font-weight: 460; }
.titulo-seccion { font-size: var(--t-xl); letter-spacing: -0.024em; font-weight: 500; }

/* El rótulo de arriba de un bloque: chico, espaciado, apagado. Reemplaza al
   encabezado de tarjeta sin necesitar la tarjeta. */
.rotulo {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 560;
  color: var(--tinta-suave);
  font-family: var(--mono);
}

.guia { font-size: var(--t-lg); line-height: 1.55; color: var(--tinta-media); letter-spacing: -0.01em; }
.nota { font-size: var(--t-sm); color: var(--tinta-suave); line-height: 1.5; }
.micro { font-size: var(--t-xs); color: var(--tinta-suave); }
/* Lo mismo, cuando lo que dice es algo que la persona tiene que hacer. Sube de
   contraste en vez de cambiar de color: el aviso ya lo da la píldora de estado,
   y dos señales de color para el mismo hecho compiten entre sí. */
.micro-atencion { color: var(--tinta); }
.apagado { color: var(--tinta-suave); }
.tenue { color: var(--tinta-tenue); }

/* Dato de sistema: CUIT, identificadores, hashes, versiones, fechas, estados. */
.dato {
  font-family: var(--mono);
  font-size: 0.9em;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.dato-grande {
  font-family: var(--mono);
  font-size: var(--t-xl);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.numerico { font-variant-numeric: tabular-nums; }

.prosa { max-width: var(--lectura); color: var(--tinta-media); }
.prosa p + p { margin-top: var(--e4); }
.prosa strong { color: var(--tinta); font-weight: 560; }


.accion, .accion-2, .accion-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 520;
  letter-spacing: -0.01em;
  border-radius: var(--radio-ctl);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--medio) var(--curva), border-color var(--medio) var(--curva),
    color var(--medio) var(--curva), opacity var(--medio) var(--curva);
}

.accion {
  background: var(--accion);
  color: var(--accion-texto);
  border: 1px solid var(--accion);
  padding: 0.7rem 1.1rem;
  min-height: 2.75rem;
}
.accion:hover { background: var(--accion-hover); border-color: var(--accion-hover); }

.accion-2 {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
  padding: 0.7rem 1.1rem;
  min-height: 2.75rem;
}
.accion-2:hover { border-color: var(--tinta); }

/* Discreta: casi un enlace. Para lo que se ofrece pero no se propone. */
.accion-3 {
  background: none;
  border: 0;
  color: var(--tinta-media);
  padding: 0.4rem 0;
  text-decoration: underline;
  text-decoration-color: var(--tinta-tenue);
  text-underline-offset: 0.22em;
}
.accion-3:hover { color: var(--tinta); text-decoration-color: currentColor; }

.accion[disabled], .accion-2[disabled], .accion-3[disabled],
.accion[aria-disabled="true"], .accion-2[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* Una acción que va a escribir en ARCA no se ve igual que guardar un rótulo.
   El color es el del riesgo y aparece en el borde, no en el fondo: llamar la
   atención sin volverse el elemento más pesado de la pantalla. */
.accion-riesgo {
  color: var(--error);
  border-color: var(--error);
  background: transparent;
}
.accion-riesgo:hover { background: var(--error-fondo); border-color: var(--error); }

.accion-chica { font-size: var(--t-sm); padding: 0.45rem 0.85rem; min-height: 2.25rem; }

/* La accion principal de una portada, que tiene que tener presencia.

   No es un tamano decorativo: en la version anterior el boton de la portada era
   del mismo cuerpo que un boton de formulario, perdido en el medio de una
   columna de texto. Una llamada a la accion que hay que buscar no es una llamada
   a la accion. */
.accion-grande { font-size: var(--t-base); padding: 0.95rem 1.6rem; min-height: 3.25rem; }

/* Un enlace que continua una seccion, no que la decora.

   Va en cuerpo grande y con la flecha adentro del texto: es el unico enlace de
   su seccion y tiene que competir con un titulo, no con un pie de pagina. */
.enlace-grande {
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linea-fuerte);
  padding-bottom: 0.15em;
  transition: border-color var(--medio) var(--curva);
}
.enlace-grande:hover { border-bottom-color: var(--tinta); }

/* Un botón dentro de una pila estirada no se estira.

   .pila-estira pone align-items: stretch para que las tablas y los bloques de
   texto ocupen el ancho; un botón heredaba eso y salía de borde a borde, con el
   rótulo perdido en el medio. Se vio en la pantalla de descargas, con un
   «Generar un código» de mil cuatrocientos píxeles de ancho. */
.pila-estira > .accion,
.pila-estira > .accion-2,
.pila-estira > .accion-3,
.pila > section > .accion,
.pila > section > .accion-2 { align-self: flex-start; }


.campo { display: flex; flex-direction: column; gap: var(--e2); width: 100%; }

.campo > label {
  font-size: var(--t-sm);
  font-weight: 520;
  color: var(--tinta);
  letter-spacing: -0.008em;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="search"],
.campo input[type="number"],
.campo select,
.campo textarea {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-ctl);
  transition: border-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}

.campo textarea { min-height: 7rem; resize: vertical; }

.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-suave); }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--tinta);
  box-shadow: var(--foco);
}

.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-tenue); }

.campo .ayuda { font-size: var(--t-xs); color: var(--tinta-suave); }
.campo .mal { font-size: var(--t-xs); color: var(--error); font-weight: 520; }
.campo [aria-invalid="true"] { border-color: var(--error); }

/* El input protagonista: cuando el formulario ES la pantalla —ingresar, pegar un
   código de vinculación— el control crece y el resto se calla. */
.campo-protagonista input {
  font-size: var(--t-xl);
  padding: 1rem 1.1rem;
  border-radius: var(--radio-obj);
}
.campo-protagonista input[inputmode="numeric"],
.campo-protagonista input.dato { font-family: var(--mono); letter-spacing: 0.12em; }

fieldset { border: 0; padding: 0; margin: 0; }

/* Casilla con su rótulo y su explicación. El área de toque es la fila entera:
   apuntarle a un cuadrado de 13px con el dedo no es una interacción, es una
   prueba de puntería. */
.casilla {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: var(--e3);
  align-items: start;
  padding: var(--e2) 0;
  cursor: pointer;
}
.casilla input { margin: 0.2rem 0 0; width: 1.1rem; height: 1.1rem; accent-color: var(--accion); }
.casilla > span { display: flex; flex-direction: column; gap: 0.1rem; font-size: var(--t-sm); }
.casilla input:disabled + span { opacity: 0.45; }

/* Un grupo de casillas: su rótulo arriba y las opciones sangradas. El sangrado
   es lo que hace legible la jerarquía sin dibujar una caja alrededor. */
.grupo-de-casillas { padding-block: var(--e2); }
.grupo-de-casillas > .rotulo { margin-bottom: var(--e1); }
.grupo-de-casillas > .casilla { padding-left: var(--e2); }
legend { padding: 0; font-size: var(--t-sm); font-weight: 550; }


.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: -0.01em;
  color: var(--tinta-media);
  white-space: nowrap;
}
.estado::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--tinta-tenue);
  flex: none;
}
.estado-ok::before { background: var(--ok); }
.estado-aviso::before { background: var(--aviso); }
.estado-error::before { background: var(--error); }
.estado-info::before { background: var(--info); }
.estado-ok { color: var(--ok); }
.estado-aviso { color: var(--aviso); }
.estado-error { color: var(--error); }
.estado-info { color: var(--info); }

/* Respiración muy sutil para lo que está pasando ahora mismo. No parpadea: se
   nota si se lo mira, no si no. */
.estado-vivo::before { animation: respirar 2.6s var(--curva) infinite; }
@keyframes respirar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Un aviso en bloque: qué pasó y qué hacer. Se distingue por una línea al
   costado, no por un fondo saturado con un ícono adentro de un círculo. */
.aviso {
  border-left: 2px solid var(--linea-fuerte);
  padding: var(--e1) 0 var(--e1) var(--e4);
  font-size: var(--t-sm);
  color: var(--tinta-media);
  max-width: var(--lectura);
}
.aviso strong { color: var(--tinta); font-weight: 560; display: block; margin-bottom: 0.15em; }
.aviso-ok { border-color: var(--ok); }
.aviso-atencion { border-color: var(--aviso); }
.aviso-error { border-color: var(--error); }
.aviso-error strong { color: var(--error); }

/* Vacío: dice qué va a aparecer, por qué todavía no hay nada, y qué hacer. */
.vacio {
  padding: var(--e7) 0;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  align-items: flex-start;
}
.vacio h3 { font-size: var(--t-lg); font-weight: 550; letter-spacing: -0.012em; }
.vacio p { color: var(--tinta-suave); font-size: var(--t-sm); }

/* Esqueleto de carga: dimensiones finales, para que nada salte al llegar. */
.esqueleto {
  background: linear-gradient(90deg, var(--papel-hundido) 25%, var(--superficie-alt) 50%, var(--papel-hundido) 75%);
  background-size: 200% 100%;
  animation: correr 1.6s var(--curva) infinite;
  border-radius: 4px;
  color: transparent;
  user-select: none;
}
@keyframes correr {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}


.tabla { width: 100%; font-size: var(--t-sm); }
.desplegable, .desplegable-cuerpo { width: 100%; }

.tabla th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 560;
  color: var(--tinta-suave);
  padding: 0 var(--e4) var(--e3) 0;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}

.tabla td {
  padding: var(--e4) var(--e4) var(--e4) 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .id { font-family: var(--mono); font-size: var(--t-xs); color: var(--tinta-media); }

/* Las acciones de una fila aparecen cuando hacen falta: al pasar por encima, al
   enfocar con teclado, y siempre en táctil —donde no hay "pasar por encima"—. */
.tabla .acciones { opacity: 0; transition: opacity var(--medio) var(--curva); text-align: right; }
.tabla tr:hover .acciones,
.tabla tr:focus-within .acciones { opacity: 1; }
@media (hover: none) { .tabla .acciones { opacity: 1; } }

@media (max-width: 767px) {
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { display: none; }
  .tabla tr {
    padding: var(--e4) 0;
    border-bottom: 1px solid var(--linea);
    display: flex;
    flex-direction: column;
    gap: var(--e2);
  }
  .tabla tbody tr:last-child { border-bottom: 0; }
  .tabla td { padding: 0; border: 0; display: flex; gap: var(--e4); justify-content: space-between; align-items: baseline; }
  .tabla td::before {
    content: attr(data-rotulo);
    font-family: var(--mono);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--tinta-suave);
    flex: none;
  }
  .tabla td:empty { display: none; }
  .tabla .num, .tabla .acciones { text-align: left; opacity: 1; }
  /* La primera celda es el título de la ficha: sin rótulo y más pesada. */
  .tabla td:first-child { font-size: var(--t-base); font-weight: 520; }
  .tabla td:first-child::before { content: none; }
}

/* Lista de definiciones para "la ficha de algo". Reemplaza a la tarjeta de
   detalle: dos columnas, sin caja. */
.ficha { display: grid; gap: var(--e3) var(--e5); margin: 0; }
@media (min-width: 640px) { .ficha { grid-template-columns: minmax(8rem, auto) 1fr; } }
.ficha dt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--tinta-suave);
  padding-top: 0.25em;
}
.ficha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }


.objeto {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-obj);
  padding: var(--e6);
  box-shadow: var(--sombra);
}
@media (min-width: 640px) { .objeto { padding: var(--e7); } }

/* Divisor con rótulo: separa dos zonas de una pantalla sin encerrar ninguna. */
.divisor { border-top: 1px solid var(--linea); padding-top: var(--e5); width: 100%; }

/* La columna de un formulario que es toda la pantalla. Pegada arriba y no
   centrada verticalmente: con el teclado del teléfono abierto, centrar deja el
   título fuera de la vista. */
.columna-angosta { max-width: 26rem; width: 100%; }

/* Centrada horizontalmente y **no** verticalmente. Pegada al margen izquierdo
   dejaba dos tercios de pantalla vacíos a la derecha, que no se lee como espacio
   negativo sino como una página a medio dibujar. */
.columna-centrada { margin-inline: auto; }

.lista-limpia { list-style: none; padding: 0; margin: 0; }

/* Un <select> chico para elegir dentro de una fila de tabla, sin volverse el
   elemento más pesado de la fila. */
.select-chico {
  font: inherit;
  font-size: var(--t-xs);
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-ctl);
  padding: 0.3rem 0.4rem;
  max-width: 12rem;
}

/* La marca de un paso en la línea de tiempo: ancho fijo para que los nombres
   queden alineados aunque los estados midan distinto. */
.paso-marca { flex: none; min-width: 11rem; }
@media (max-width: 639px) { .paso-marca { min-width: 0; } }

/*
  Contenido progresivo: un plegable de texto, sin caja y sin fondo.

  El triángulo por omisión del navegador se reemplaza por una línea fina para que
  no parezca un control de sistema operativo dentro de una página editorial. Y
  funciona sin JavaScript, que es la razón por la que es un <details> y no un
  panel con estado.
*/
.desplegable > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-sm);
  color: var(--tinta-media);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--linea-fuerte);
  transition: color var(--medio) var(--curva), border-color var(--medio) var(--curva);
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary:hover { color: var(--tinta); border-color: var(--tinta); }
.desplegable > summary::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.12rem);
  transition: transform var(--medio) var(--curva);
}
.desplegable[open] > summary::after { transform: rotate(-135deg) translateY(-0.12rem); }
.desplegable-cuerpo { padding-top: var(--e5); }

/* El dato que ES la pantalla, con su rótulo arriba y su contexto abajo. */
.instrumento { display: flex; flex-direction: column; gap: var(--e2); }
.instrumento .valor { font-size: var(--t-4xl); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; font-weight: 480; }
.instrumento .contexto { font-size: var(--t-sm); color: var(--tinta-suave); }


/*
  La barra tiene altura, y eso no contradice que la navegacion desaparezca.

  Desaparecer es no tener fondo, ni borde permanente, ni iconos, ni un
  desplegable siempre abierto. Lo que tenia antes era otra cosa: 11px de
  navegacion sobre una marca de 16px en un lienzo de 1440, o sea que no
  desaparecia por discreta sino por insignificante.
*/
.sitio-encabezado {
  padding-block: var(--e5);
  position: relative;
  z-index: 20;
}
@media (min-width: 900px) { .sitio-encabezado { padding-block: var(--e5) var(--e6); } }

.marca {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font-size: var(--t-lg);
  font-weight: 570;
  letter-spacing: -0.028em;
  text-decoration: none;
  color: var(--tinta);
}
.marca .marca-2 { color: var(--tinta-suave); font-weight: 420; }

.nav-sitio { display: flex; align-items: center; gap: var(--e5); }
.nav-sitio a {
  font-size: var(--t-sm);
  color: var(--tinta-media);
  text-decoration: none;
  transition: color var(--medio) var(--curva);
}
.nav-sitio a:hover { color: var(--tinta); }

/*
  Los enlaces de seccion van juntos y las acciones aparte.

  Sin agrupar, el ojo lee siete cosas en fila y ninguna es la principal. Con el
  grupo hay dos zonas: donde se navega y donde se decide. La separacion es
  espacio, no un separador dibujado.
*/
.nav-enlaces { display: none; align-items: center; gap: var(--e5); }
@media (min-width: 980px) { .nav-enlaces { display: flex; margin-inline-end: var(--e4); } }
.nav-ingresar { font-weight: 500; color: var(--tinta); }

/*
  El pie es parte del producto, no el final del documento.

  Antes era una lista de enlaces en 11px que ocupaba menos que un parrafo. Ahora
  tiene la marca a escala real, una linea que dice que es esto para quien llego
  hasta abajo, y columnas que se leen. Sigue sin tener fondo propio ni iconos.
*/
.sitio-pie {
  margin-top: var(--e9);
  padding-block: var(--e8) var(--e8);
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
  color: var(--tinta-suave);
}
.sitio-pie a { color: var(--tinta-media); text-decoration: none; }
.sitio-pie a:hover { color: var(--tinta); text-decoration: underline; }

.pie-cuerpo { display: grid; gap: var(--e8); width: 100%; }
@media (min-width: 1040px) {
  .pie-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: var(--e8); }
}
.pie-marca { display: grid; gap: var(--e4); align-content: start; }
.pie-lema { font-size: var(--t-sm); color: var(--tinta-suave); line-height: 1.6; max-width: 32ch; }

.pie-columnas {
  display: grid;
  gap: var(--e6) var(--e6);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.sitio-pie h4 {
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--tinta-tenue);
  font-weight: 560;
  margin-bottom: var(--e4);
}
.sitio-pie ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.pie-legal {
  font-size: var(--t-xs);
  color: var(--tinta-tenue);
  line-height: 1.6;
  max-width: 62ch;
  padding-top: var(--e6);
  border-top: 1px solid var(--linea);
}


.seccion { padding-block: var(--e9); }
.seccion-primera { padding-block: var(--e8) var(--e9); }
@media (max-width: 767px) {
  .seccion { padding-block: var(--e8); }
  .seccion-primera { padding-block: var(--e6) var(--e8); }
}

/*
  Las clases del titulo y la bajada de la portada NO estan aca.

  Vivian en este bloque y se redefinieron enteras con la escala
  nueva, en portada.ts. Dos definiciones de la misma clase en dos archivos, ganando la del que
  se concatena ultimo, es la clase de trampa que hace que alguien cambie un
  valor y no vea ningun efecto. Se borraron de aca a proposito.
*/

/* Numeración editorial de pasos: el número es una marca al margen, no una
   pelotita de color con un ícono adentro. */
.pasos { display: flex; flex-direction: column; gap: var(--e6); counter-reset: paso; margin: 0; padding: 0; list-style: none; }
.pasos > li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--e4);
  align-items: start;
  counter-increment: paso;
}
.pasos > li::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--tinta-tenue);
  padding-top: 0.35em;
  letter-spacing: 0.05em;
}
.pasos h3 { font-size: var(--t-lg); font-weight: 550; letter-spacing: -0.012em; margin-bottom: var(--e2); }
.pasos p { color: var(--tinta-media); font-size: var(--t-sm); max-width: 52ch; }


.panel {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: 1fr;
  align-content: start;
}

@media (min-width: 900px) {
  .panel { grid-template-columns: 14rem minmax(0, 1fr); }
}

.panel-lado {
  padding: var(--e5) var(--e5) var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}
@media (min-width: 900px) {
  .panel-lado {
    padding: var(--e6) var(--e2) var(--e6) var(--e6);
    position: sticky;
    top: 0;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }
}

.panel-cuerpo {
  padding: 0 var(--e5) var(--e9);
  min-width: 0;
  max-width: var(--panel);
}
@media (min-width: 900px) { .panel-cuerpo { padding: var(--e6) var(--e7) var(--e9) var(--e6); } }

/* La navegación: texto, y nada más. El activo lleva una línea fina al costado. */
.nav-panel { display: flex; flex-direction: column; gap: 0.1rem; }
.nav-panel a {
  display: block;
  font-size: var(--t-sm);
  color: var(--tinta-media);
  text-decoration: none;
  padding: 0.4rem 0 0.4rem var(--e3);
  border-left: 2px solid transparent;
  transition: color var(--medio) var(--curva), border-color var(--medio) var(--curva);
}
.nav-panel a:hover { color: var(--tinta); }
.nav-panel a[aria-current="page"] {
  color: var(--tinta);
  font-weight: 550;
  border-left-color: var(--tinta);
}
.nav-panel .grupo {
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--tinta-tenue);
  margin: var(--e5) 0 var(--e2) var(--e3);
}
.nav-panel .grupo:first-child { margin-top: 0; }

/* Menú del teléfono: <details>, funciona sin guion. */
.menu-chico > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) 0;
  font-size: var(--t-sm);
  color: var(--tinta-media);
}
.menu-chico > summary::-webkit-details-marker { display: none; }
.menu-chico > summary::after {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.1rem);
  transition: transform var(--medio) var(--curva);
}
.menu-chico[open] > summary::after { transform: rotate(-135deg) translateY(-0.1rem); }
.menu-chico > .nav-panel { padding-top: var(--e3); }
/* En escritorio el <details> deja de ser un plegable: no hay resumen que tocar y
   la navegación se ve siempre, esté "cerrado" o no. Van las tres declaraciones
   porque los navegadores esconden el contenido de un <details> cerrado por
   caminos distintos —display, content-visibility y ::details-content— y hace
   falta que ninguno lo tape. Verificado mirando la página a 1440px. */
@media (min-width: 900px) {
  .menu-chico > summary { display: none; }
  .menu-chico > .nav-panel { padding-top: 0; display: flex; content-visibility: visible; }
  .menu-chico > .divisor { display: block; content-visibility: visible; margin-top: var(--e5); }
  .menu-chico::details-content { content-visibility: visible; block-size: auto; }
}

/* Encabezado de pantalla: título, y a la derecha la acción principal. */
.panel-titulo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e5);
  flex-wrap: wrap;
  padding-block: var(--e5) var(--e6);
}
.panel-titulo h1 { font-size: var(--t-3xl); line-height: 1.04; letter-spacing: -0.032em; font-weight: 500; }

/* Selector de organización: un <select> desnudo, del tamaño del texto. No es un
   componente con avatar, iniciales y flechita — es de qué cuenta se trata todo
   lo que se ve debajo, y se lee mejor como un rótulo que como un widget. */
.org {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
.org select {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-radius: var(--radio-ctl);
  padding: 0.2rem 0.3rem 0.2rem 0;
  max-width: 100%;
  cursor: pointer;
}
.org select:hover { color: var(--tinta); }
.org select:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }


/*
  La portada.

  El titulo ocupa el lienzo —26ch a 88px son unos 1150px— y recien debajo se
  abre la banda despareja: a la izquierda lo que se lee, a la derecha el objeto.
  Poner el titulo adentro de la columna izquierda lo encogeria a la mitad, que
  es de donde venia el problema.
*/
.portada { padding-block: var(--e7) var(--e9); }
.portada-titulo {
  font-size: var(--t-portada);
  line-height: 1.0;
  letter-spacing: -0.042em;
  font-weight: 460;
  max-width: 26ch;
  text-wrap: balance;
}
.portada-bajada {
  font-size: var(--t-xl);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--tinta-media);
  max-width: 38ch;
  font-weight: 400;
}
/*
  La banda arranca arriba, no abajo.

  Con align-items: end la columna de texto se hundia hasta el pie de la cadena y
  dejaba un hueco de trescientos pixeles debajo del titulo. Eso no es aire: el
  aire tiene forma, y un vacio en el medio de la composicion se lee como un
  error de maquetado. La asimetria la da que la cadena es mas alta, no que el
  texto este empujado.
*/
.portada-banda {
  display: grid;
  gap: var(--e7);
  align-items: start;
  margin-top: var(--e6);
  width: 100%;
}
@media (min-width: 1040px) {
  .portada-banda { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e8); }
}

/*
  La cadena: de donde sale el pedido hasta ARCA.

  Es el objeto visual de la portada, y es el producto: no una ilustracion. Cada
  eslabon es una superficie con su dato tecnico en mono; lo que los une es una
  linea de 1px y no una flecha, porque lo que importa no es el movimiento sino
  que hay un orden y que hay una frontera —la clave fiscal vive de un lado—.
*/
.cadena { display: flex; flex-direction: column; width: 100%; }
.eslabon {
  border: 1px solid var(--linea);
  border-radius: var(--radio-obj);
  background: var(--superficie);
  box-shadow: var(--sombra);
  padding: var(--e5);
  display: grid;
  gap: var(--e2);
}
.eslabon-tenue { background: transparent; box-shadow: none; border-style: dashed; }
.eslabon-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); }
.eslabon-nombre { font-size: var(--t-lg); font-weight: 540; letter-spacing: -0.015em; }
.eslabon-dato { font-family: var(--mono); font-size: var(--t-xs); color: var(--tinta-suave); white-space: nowrap; }
.eslabon-texto { font-size: var(--t-sm); color: var(--tinta-media); line-height: 1.5; }
.cadena-union { width: 1px; height: var(--e5); background: var(--linea-fuerte); margin-inline-start: var(--e6); }
.cadena-corte {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding-block: var(--e4);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.cadena-corte::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

/*
  Una cifra que ES el dato.

  No lleva caja. La unidad la hacen el numero y su rotulo: si hiciera falta un
  borde para entender que van juntos, el numero seria demasiado chico.
*/
.cifra {
  font-size: var(--t-cifra);
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-weight: 430;
  font-variant-numeric: tabular-nums;
  display: block;
}
.cifra-menor { font-size: var(--t-4xl); line-height: 0.95; letter-spacing: -0.038em; }
.cifra-apagada { color: var(--tinta-tenue); }
.cifra-pie { font-size: var(--t-lg); color: var(--tinta-media); letter-spacing: -0.01em; max-width: 26ch; margin-top: var(--e4); }
.cifra-nota { font-size: var(--t-sm); color: var(--tinta-suave); max-width: 34ch; margin-top: var(--e3); line-height: 1.55; }

/*
  El banco de cifras.

  Columnas desparejas, no tres iguales: la primera es la que importa y ocupa mas.
  Tres cajas del mismo tamano no dicen cual mirar, que es lo unico que una
  composicion tiene que hacer.
*/
.cifras { display: grid; gap: var(--e8) var(--e7); width: 100%; }
@media (min-width: 900px) {
  .cifras { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/*
  Una automatizacion, en composicion editorial.

  El identificador va en mono porque es lo que se escribe en el codigo; el
  titulo humano abajo, en cuerpo. La linea de arriba las separa sin
  encajonarlas: no son tarjetas, y por eso no tienen ni borde completo ni fondo.
*/
.muestra { display: grid; gap: var(--e6) var(--e7); width: 100%; }
@media (min-width: 760px) { .muestra { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .muestra { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.muestra-item { display: grid; gap: var(--e2); align-content: start; border-top: 1px solid var(--linea-fuerte); padding-top: var(--e4); }
.muestra-id { font-family: var(--mono); font-size: var(--t-xl); letter-spacing: -0.02em; color: var(--tinta); }
.muestra-titulo { font-size: var(--t-base); font-weight: 500; letter-spacing: -0.01em; }
.muestra-texto { font-size: var(--t-sm); color: var(--tinta-media); line-height: 1.55; }
.muestra-devuelve { font-family: var(--mono); font-size: var(--t-xs); color: var(--tinta-suave); margin-top: var(--e1); }

/*
  La lista de garantias de seguridad.

  Era una lista de definiciones de seis filas —etiqueta a la izquierda, parrafo a
  la derecha—, o sea una tabla de documentacion. Ahora cada punto es un bloque
  con su afirmacion en cuerpo grande y la comprobacion abajo en chico: lo que se
  lee primero es lo que se promete, y lo que lo sostiene esta al lado y no en
  otra columna.
*/
.garantias { display: grid; gap: var(--e7); width: 100%; list-style: none; padding: 0; margin: 0; }
@media (min-width: 820px) { .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e7) var(--e8); } }
.garantias > li { display: grid; gap: var(--e2); align-content: start; }
.garantia-titulo { font-size: var(--t-xl); font-weight: 480; letter-spacing: -0.022em; line-height: 1.2; max-width: 22ch; }
.garantia-texto { font-size: var(--t-sm); color: var(--tinta-media); line-height: 1.6; max-width: 46ch; }

/*
  Las pantallas que SON un formulario: ingresar, crear cuenta, elegir
  organizacion, cambiar la contrasena.

  # Que estaba mal

  Una columna de 416px flotando en el medio de un lienzo de 1440x900, con el
  titulo en cuerpo de subtitulo y nada mas en la pantalla. No es sobriedad: es
  un prototipo. La pagina no decia donde estabas, no tenia escala y el vacio no
  tenia forma.

  # Que se hace en cambio

  Una composicion despareja: el formulario a la izquierda, con su titulo grande y
  sus campos protagonistas, y a la derecha una columna callada que dice **una**
  cosa verdadera sobre el producto. No es un panel de marketing ni un testimonio:
  es el hecho que alguien necesita leer justo antes de escribir su correo.

  ⚠️ En telefono el aparte va DESPUES del formulario, no antes. Lo que la persona
  vino a hacer no puede quedar debajo de un texto por mas cierto que sea.
*/
.autenticacion {
  display: grid;
  gap: var(--e8);
  width: 100%;
  padding-block: var(--e7) var(--e9);
  align-items: start;
}
@media (min-width: 980px) {
  .autenticacion {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--e10);
    padding-block: var(--e8) var(--e10);
  }
}
.autenticacion-forma { display: flex; flex-direction: column; align-items: stretch; gap: var(--e6); max-width: 30rem; }
.titulo-auth {
  font-size: var(--t-4xl);
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: 460;
  max-width: 14ch;
}
/*
  El aire entre el titulo y su bajada lo pone el titulo.

  Con line-height 1.0 y 72px, la cola de una g queda a milimetros del renglon
  siguiente y las dos lineas se leen como una sola. El gap de la pila no alcanza
  porque esta pensado para cuerpos de texto, no para un titulo de portada.
*/
.titulo-auth + .guia { margin-top: var(--e2); }

/*
  El aparte.

  Linea fina arriba y nada mas: ni fondo, ni borde completo, ni sombra. Si
  necesitara una caja para separarse del formulario, es que esta demasiado cerca.
*/
.aparte { display: grid; gap: var(--e5); align-content: start; border-top: 1px solid var(--linea-fuerte); padding-top: var(--e5); }
@media (min-width: 980px) { .aparte { padding-top: var(--e6); } }
.aparte-afirmacion { font-size: var(--t-xl); line-height: 1.32; letter-spacing: -0.02em; font-weight: 440; max-width: 26ch; }
.aparte-lista { display: grid; gap: var(--e4); list-style: none; padding: 0; margin: 0; }
.aparte-lista > li { display: grid; gap: var(--e1); }
.aparte-punto { font-size: var(--t-sm); font-weight: 540; letter-spacing: -0.01em; }
.aparte-texto { font-size: var(--t-sm); color: var(--tinta-media); line-height: 1.55; max-width: 40ch; }

/*
  El bloque de tinta del cierre.

  Uno solo en toda la pagina. Es el cambio de ritmo que hace que el final se lea
  como un final; dos serian un patron y ninguno de los dos diria nada.
*/
.banda-tinta {
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--radio-obj);
  padding: var(--e8) var(--e7);
  display: grid;
  gap: var(--e6);
  justify-items: start;
}
@media (min-width: 900px) { .banda-tinta { padding: var(--e9) var(--e8); } }
.banda-titulo { font-size: var(--t-4xl); line-height: 1.02; letter-spacing: -0.04em; font-weight: 460; max-width: 16ch; }
.banda-tinta .banda-texto { color: rgba(255, 255, 255, 0.7); font-size: var(--t-lg); line-height: 1.55; max-width: 44ch; }
.banda-tinta .accion { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.banda-tinta .accion:hover { background: #ffffff; border-color: #ffffff; }
.banda-tinta .accion-3 { color: rgba(255, 255, 255, 0.78); }
.banda-tinta .accion-3:hover { color: #ffffff; }