/* Estilos de la landing de captación. Solo consume tokens de tokens.css (sin hex sueltos). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  /* I mayúscula con remates: sin esto "HanIa" se lee "Hanla" en Inter. */
  font-feature-settings: "cv08" 1;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--enlace); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.75rem; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 3.75rem); font-weight: 760; letter-spacing: -0.03em; max-width: 19ch; }
:lang(en) h1 { max-width: 22ch; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); font-weight: 720; margin-bottom: 1rem; }
h3 { font-size: 1.1rem; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; text-wrap: pretty; }
code { font-family: var(--fuente-cifras); font-size: 0.92em; font-variant-numeric: tabular-nums; }
ul, ol { margin: 0; padding: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }

/* Íconos de trazo (SVG inline estático, decorativo, aria-hidden). Color neutro: nunca teal ni magenta. */
.icono {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.saltar {
  position: absolute; left: var(--gutter); top: -3rem;
  background: var(--superficie); color: var(--texto); padding: 0.5rem 0.75rem; border-radius: var(--radio);
  z-index: 20;
}
.saltar:focus { top: 0.5rem; }

/* Cabecera fija: en móvil quedan marca, "Solicitar acceso" y el idioma (sin JS, sin menú). */
.cabecera {
  position: sticky; top: 0; z-index: 10;
  background: var(--fondo); border-bottom: 1px solid var(--borde);
}
@supports (backdrop-filter: blur(1px)) {
  .cabecera { background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(10px); }
}
.cabecera__fila { display: flex; align-items: center; gap: 0.5rem; min-height: 4rem; }
.cabecera__secciones { margin-left: auto; display: none; }
.cabecera__secciones ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem; }
.cabecera__secciones a, .cabecera__idioma a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem;
  color: var(--texto-suave); text-decoration: none; font-size: 0.95rem; font-weight: 550; border-radius: 999px;
  transition: color 150ms ease, background-color 150ms ease;
}
.cabecera__secciones a:hover, .cabecera__idioma a:hover { color: var(--texto); background: var(--fondo-alterno); }
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }
.cabecera__idioma a { padding: 0 0.6rem; color: var(--texto); }
@media (min-width: 52rem) {
  .cabecera__fila { gap: 1.5rem; }
  .cabecera__acciones { margin-left: 0; gap: 0.5rem; }
  .cabecera__secciones { display: block; }
  .cabecera__idioma a { padding: 0 0.85rem; border: 1px solid var(--texto-suave); }
}

/* Marca (PROVISIONAL) */
.marca { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--texto); text-decoration: none; }
.marca__monograma { color: var(--texto); flex: none; }
.marca__trazo { stroke: var(--fondo); }
.marca__texto { font-weight: 760; font-size: 1.15rem; letter-spacing: -0.02em; }

/* Movimiento (BRAND-002 §6.5, nota 2026-10-14). El estilo base es el estado final: sin animación
   (navegador sin soporte, prefers-reduced-motion o impresión) todo está visible y quieto.
   M0: transiciones de 150 ms (color, fondo, giro del indicador de las preguntas).
   M1: una vez, en el héroe (trama + filas de la pantalla de ejemplo, ≤ 900 ms en total) y en el cierre
   (trama, 450 ms). M2: solo opacity/transform ≤ 16 px, un bloque por sección (al final del archivo). */
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Héroe con la trama (nivel 2 de BRAND-002 §6.5: patrón solo en héroe y cierre) */
.heroe, .cierre { position: relative; overflow: hidden; }
.heroe::before, .cierre::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--trama-linea) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, var(--trama-linea) 0 1px, transparent 1px 28px);
  mask-image: linear-gradient(to bottom right, black 0%, transparent 65%);
  -webkit-mask-image: linear-gradient(to bottom right, black 0%, transparent 65%);
}
.heroe::before { animation: aparecer 450ms cubic-bezier(0.2, 0, 0, 1) both; }
.heroe__rejilla {
  position: relative; display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center;
  padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
@media (min-width: 60rem) { .heroe__rejilla { grid-template-columns: 1.05fr 0.95fr; } }
.antetitulo {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: 1.25rem;
}
.antetitulo::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--firma); border-radius: 1px; flex: none; }
.heroe__bajada { font-size: clamp(1.1rem, 2.2vw, 1.28rem); color: var(--texto-suave); max-width: 44ch; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.heroe__correo { margin: 0.9rem 0 0; font-size: 0.9375rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.heroe__correo a { color: var(--texto); font-weight: 600; }

/* Pantalla de ejemplo del héroe: réplica HTML/CSS, solo datos sintéticos. Importes en mono tabular.
   El estado lo dicen el texto y la forma de la insignia (llena / vacía), nunca el color. */
.pantalla {
  margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 0.875rem;
  overflow: hidden; box-shadow: var(--sombra);
}
.pantalla__barra, .chat__barra {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap;
  padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--borde); background: var(--fondo-alterno);
  font-size: 0.9rem; font-weight: 650;
}
.pantalla__rotulo {
  font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); letter-spacing: 0.02em;
  border: 1px solid var(--borde); border-radius: 999px; padding: 0.05rem 0.6rem; background: var(--superficie);
}
.pantalla__tabla { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.pantalla__tabla th {
  padding: 0.6rem 1.1rem 0.45rem; text-align: left; font-size: 0.75rem; font-weight: 650;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
}
.pantalla__tabla td { padding: 0.6rem 1.1rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.pantalla__tabla tbody tr:last-child td { border-bottom: 0; }
.pantalla__tabla .num { text-align: right; font-family: var(--fuente-cifras); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pantalla__tabla .cliente { display: block; font-weight: 600; line-height: 1.3; hyphens: none; overflow-wrap: normal; }
.pantalla__tabla .codigo { display: block; margin-top: 0.1rem; font-family: var(--fuente-cifras); font-size: 0.75rem; color: var(--texto-suave); }
.pantalla__tabla .seleccionada td { background: var(--fondo-alterno); }
.pantalla__tabla .seleccionada td:first-child { box-shadow: inset 3px 0 0 var(--texto); }
.insignia {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--texto-suave); color: var(--texto);
}
.insignia::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none; }
.insignia--llena::before { background: var(--texto); }
.insignia--vacia::before { border: 1.5px solid var(--texto); }
.insignia--vacia { border-style: dashed; }
.pantalla__traza { padding: 0.9rem 1.1rem 1.1rem; background: var(--fondo-alterno); border-top: 1px solid var(--borde); }
.pantalla__traza-titulo { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-suave); }
.pantalla__traza ul { list-style: none; display: grid; gap: 0.4rem; }
.pantalla__traza li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; font-weight: 600; }
.pantalla__traza .icono { width: 1.1rem; height: 1.1rem; }
.pantalla__traza code { margin-left: auto; font-size: 0.8125rem; font-weight: 500; color: var(--texto-suave); }
/* M1 del héroe: filas en el orden del hecho (venta → stock → asiento); fin a 660 ms. */
.pantalla__tabla tbody tr, .pantalla__traza li { animation: subir 360ms cubic-bezier(0.2, 0, 0, 1) both; }
.pantalla__tabla tbody tr:nth-child(1) { animation-delay: 60ms; }
.pantalla__tabla tbody tr:nth-child(2) { animation-delay: 110ms; }
.pantalla__tabla tbody tr:nth-child(3) { animation-delay: 160ms; }
.pantalla__tabla tbody tr:nth-child(4) { animation-delay: 210ms; }
.pantalla__traza li:nth-child(1) { animation-delay: 240ms; }
.pantalla__traza li:nth-child(2) { animation-delay: 300ms; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  padding: 0.6rem 1.3rem; border-radius: var(--radio); font-weight: 650; text-decoration: none;
  border: 2px solid transparent; transition: background-color 150ms ease, border-color 150ms ease;
}
.boton--primario { background: var(--accion); color: var(--texto-sobre-accion); }
.boton--primario:hover { background: var(--accion-hover); }
.boton--secundario { border-color: var(--texto-suave); color: var(--texto); background: transparent; }
.boton--secundario:hover { border-color: var(--texto); }
.boton--grande { min-height: 3.25rem; padding: 0.8rem 1.75rem; font-size: 1.05rem; max-width: 100%; }
.boton--compacto { min-height: 2.5rem; padding: 0.4rem 0.9rem; font-size: 0.9rem; white-space: nowrap; }
@media (min-width: 52rem) { .boton--compacto { padding: 0.45rem 1.1rem; font-size: 0.95rem; } }

/* Secciones */
.seccion { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.seccion--alterna { background: var(--fondo-alterno); }
.seccion__cabecera { max-width: 46rem; margin-bottom: 2.5rem; }
.seccion__ante {
  margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-suave);
}
.seccion__texto { max-width: 60ch; color: var(--texto-suave); font-size: 1.125rem; line-height: 1.65; }
.seccion__cabecera .seccion__texto:last-child { margin-bottom: 0; }

/* El problema: tres dolores, filetes y números, no tarjetas */
.dolores, .beneficios, .roles, .pasos { list-style: none; display: grid; gap: 1.75rem; }
.dolores li, .roles li, .beneficios li { border-top: 1px solid var(--borde); padding-top: 1.1rem; }
.dolores p, .roles p, .beneficios p { color: var(--texto-suave); margin: 0; }
@media (min-width: 48rem) {
  .dolores, .roles, .beneficios--fila { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* La solución: SVG de flujo (horizontal ≥ 40rem, vertical en móvil) + tres beneficios */
.solucion { display: grid; gap: 2.5rem 4rem; align-items: center; }
@media (min-width: 60rem) { .solucion { grid-template-columns: 1.15fr 0.85fr; } }
.beneficios { gap: 1.5rem; }
.flujo { margin: 0; }
.flujo svg { display: block; width: 100%; max-width: 32rem; margin: 0 auto; }
.flujo__h { display: none !important; }
.flujo__v { max-width: 21rem !important; }
@media (min-width: 40rem) { .flujo__h { display: block !important; } .flujo__v { display: none !important; } }
.flujo__linea { fill: none; stroke: var(--texto); stroke-width: 3; stroke-linecap: round; }
.flujo__flecha { fill: var(--texto); stroke: var(--texto); stroke-width: 1.5; stroke-linejoin: round; }
.flujo__nodo { fill: var(--superficie); stroke: var(--borde); stroke-width: 1.5; }
.flujo__nodo--resultado { stroke: var(--texto); stroke-width: 2.5; }
.flujo__regla { fill: none; stroke: var(--borde); stroke-width: 1.5; }
.flujo__centro { fill: var(--texto); stroke: none; }
.flujo__texto { fill: var(--texto); font-family: var(--fuente); font-size: 15px; font-weight: 650; }
.flujo .flujo__texto--centro { fill: var(--fondo); }
.flujo__sub { fill: var(--texto-suave); font-family: var(--fuente); font-size: 12.5px; font-weight: 500; }
.flujo__icono { fill: none; stroke: var(--texto); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.flujo__icono--centro { stroke: var(--fondo); }

/* Módulos (bento): disponibles en la lista principal; "Próximamente" aparte, sin animación */
.bento { display: grid; gap: 1rem; }
.bento__lista, .bento__pronto { display: grid; gap: 1rem; }
.modulo {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 0.875rem;
  padding: 1.4rem 1.4rem 1.5rem;
}
.modulo h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; font-size: 1.1rem; margin-bottom: 0.6rem; }
.modulo p { margin: 0; color: var(--texto-suave); font-size: 0.97rem; max-width: 56ch; }
.modulo--pronto { background: transparent; border-style: dashed; border-color: var(--texto-suave); }
.etiqueta {
  font-size: 0.75rem; font-weight: 650; letter-spacing: 0.04em; color: var(--texto-suave);
  border: 1px solid var(--texto-suave); border-radius: 999px; padding: 0.05rem 0.6rem;
}
@media (min-width: 48rem) {
  .bento__lista { grid-template-columns: repeat(12, 1fr); }
  .modulo--ancho { grid-column: span 7; }
  .modulo--angosto { grid-column: span 5; }
  /* Segunda fila invertida (bento): Contabilidad angosta a la izquierda, HanIa ancha a la derecha */
  .bento__lista > :nth-child(3) { grid-column: 1 / span 5; }
  .bento__lista > :nth-child(4) { grid-column: 6 / span 7; }
  .bento__pronto { grid-template-columns: repeat(2, 1fr); }
}

/* Control y confianza: bloque invertido (par fondo/texto validado en contraste.mjs) */
.seccion--invertida { background: var(--texto); color: var(--fondo); }
.seccion--invertida h2, .seccion--invertida .seccion__ante { color: var(--fondo); }
.confianza { list-style: none; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .confianza { grid-template-columns: repeat(2, 1fr); } }
.confianza li {
  background: var(--invertida-superficie); border: 1px solid var(--invertida-borde);
  border-radius: 0.875rem; padding: 1.4rem 1.4rem 1.5rem;
}
.confianza h3 { color: var(--fondo); margin-bottom: 0.5rem; }
.confianza p { margin: 0; color: var(--fondo); }
.confianza__equipo { border-style: dashed !important; }
@media (min-width: 48rem) { .confianza__equipo { grid-column: 1 / -1; } }

/* HanIa: texto + conversación de ejemplo */
.hania { display: grid; gap: 2.5rem 4rem; align-items: center; }
@media (min-width: 56rem) { .hania { grid-template-columns: 1fr 1fr; } }
.hania .seccion__texto { margin-bottom: 0; }
.chat { margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 0.875rem; overflow: hidden; box-shadow: var(--sombra); }
.chat__titulo { display: inline-flex; align-items: center; gap: 0.5rem; }
.chat__titulo .icono { width: 1.15rem; height: 1.15rem; }
.chat__cuerpo { display: grid; gap: 0.75rem; padding: 1.1rem; }
.chat__mensaje { margin: 0; padding: 0.7rem 0.95rem; border-radius: 0.75rem; font-size: 0.95rem; line-height: 1.55; max-width: 92%; }
.chat__quien { display: block; margin-bottom: 0.15rem; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-suave); }
.chat__mensaje--usuario { justify-self: end; background: var(--fondo-alterno); border: 1px solid var(--borde); }
.chat__mensaje--hania { justify-self: start; background: var(--superficie); border: 1px solid var(--texto-suave); }

/* Cómo empezamos */
.pasos { counter-reset: paso; }
@media (min-width: 48rem) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.pasos li { border-top: 2px solid var(--texto); padding-top: 1rem; }
.pasos__num { display: block; font-family: var(--fuente-cifras); font-size: 0.95rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 0.4rem; }
.pasos h3 { font-size: 1.2rem; margin: 0; }

/* Preguntas frecuentes (details/summary, sin JS) */
.preguntas { max-width: 52rem; }
.faq { border-top: 1px solid var(--borde); }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
  min-height: 3.5rem; padding: 0.9rem 0; font-weight: 650; font-size: 1.05rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 0.6rem; height: 0.6rem; flex: none; margin-right: 0.25rem;
  border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg); transition: transform 150ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--enlace); }
.faq details p { margin: 0 0 1.1rem; max-width: 62ch; color: var(--texto-suave); }

/* Cierre */
.cierre { border-top: 1px solid var(--borde); }
.cierre__contenido { position: relative; text-align: center; padding-top: 1rem; padding-bottom: 1rem; }
.cierre__contenido h2 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.03em; }
.cierre__contenido p { margin-left: auto; margin-right: auto; max-width: 50ch; color: var(--texto-suave); }
.cierre__contenido p:has(.boton) { margin-bottom: 0.75rem; }
.cierre__correo { font-family: var(--fuente-cifras); font-size: 0.95rem; overflow-wrap: anywhere; }

/* Página de contacto */
.contacto__rejilla { display: grid; gap: 3rem 4rem; align-items: start; }
@media (min-width: 56rem) { .contacto__rejilla { grid-template-columns: 1fr 1fr; } }
.contacto h1 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 16ch; }
.contacto__correo { text-align: left; margin: 0.25rem 0 0; }
.contacto__detalle { display: grid; gap: 2rem; }
.contacto__detalle h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.lista-pasos, .lista-datos { padding-left: 1.25rem; display: grid; gap: 0.4rem; color: var(--texto-suave); }
.advertencia { border: 2px solid var(--texto); border-radius: 0.875rem; padding: 1.25rem 1.4rem; background: var(--superficie); }
.advertencia h2 { margin-bottom: 0.4rem; }
.advertencia p { margin: 0; color: var(--texto-suave); }

/* Pie */
.pie { border-top: 1px solid var(--borde); padding: 3rem 0 3.5rem; font-size: 0.9rem; color: var(--texto-suave); }
.pie__rejilla { display: grid; gap: 2rem 4rem; }
@media (min-width: 60rem) { .pie__rejilla { grid-template-columns: 1fr 2fr; align-items: start; } }
.pie__lema { margin: 0.9rem 0 0; max-width: 34ch; color: var(--texto); font-size: 0.95rem; font-weight: 550; line-height: 1.5; }
.pie__firma { margin: 0.75rem 0 0; overflow-wrap: anywhere; }
.pie__texto { display: grid; gap: 1rem; max-width: 70ch; }
.pie__avisos { list-style: none; padding: 0 0 0 1.25rem; border-left: 1px solid var(--borde); display: grid; gap: 0.5rem; }
.pie__lineas { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding-left: 1.25rem; font-weight: 550; }

/* Texto solo para lectores de pantalla */
.oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 404 */
.no-encontrado { padding: 5rem 0; }

/* M1 del cierre: la trama aparece al entrar en vista, una vez (450 ms). */
/* M2, aparición al desplazarse: solo como mejora progresiva, un bloque por sección, solo opacidad
   y desplazamiento ≤ 16 px. Nunca el h1, los llamados a la acción, los estados de los módulos
   (la fila "Próximamente" queda fuera) ni los avisos. */
@supports (animation-timeline: view()) {
  .dolores, .solucion, .bento__lista, .roles, .confianza, .chat, .pasos, .faq {
    animation: subir-desplazamiento linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
  .cierre::before {
    animation: aparecer 450ms cubic-bezier(0.2, 0, 0, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}
@keyframes subir-desplazamiento { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cabecera { position: static; }
}
@media (forced-colors: active) {
  .boton { border-color: ButtonText; }
  .insignia, .modulo, .confianza li { border-color: CanvasText; }
}

/* Pantalla de ejemplo en móvil: celdas más compactas para que la insignia entre en la tarjeta. */
@media (max-width: 39.99rem) {
  .pantalla__tabla th, .pantalla__tabla td { padding-left: 0.6rem; padding-right: 0.6rem; }
  .pantalla__tabla .num { font-size: 0.8125rem; }
  .insignia { padding: 0.1rem 0.45rem; gap: 0.3rem; white-space: normal; border-radius: 0.6rem; line-height: 1.25; }
}
@media (max-width: 22rem) {
  .pantalla__tabla { font-size: 0.8125rem; }
  .pantalla__tabla th, .pantalla__tabla td { padding-left: 0.45rem; padding-right: 0.45rem; }
}