/* ===========================================================================
   Ujier — sistema visual
   ---------------------------------------------------------------------------
   Tres colores y nada más: blanco, negro y el rojo de la marca.
   Todo lo demás —jerarquía, estados, urgencia— se dice con peso tipográfico,
   espacio, borde e ícono, no con colores nuevos.

   POR QUÉ ESTE ARCHIVO EXISTE
   Antes cada página traía su propio bloque <style>, repetido cuatro veces
   entre las legales, y los colores salían de la paleta de fábrica de Tailwind:
   red-500 para los botones, azul para los avisos, amarillo para las
   advertencias, verde para el éxito. Seis familias de color en un producto que
   tiene tres. Además el rojo de la interfaz (#ef4444) no era el rojo del logo
   (#E8112D): la marca decía una cosa y la pantalla otra.

   SOBRE EL ROJO
   El logo usa #E8112D. Para texto blanco encima, ese rojo da 4,3:1 y no llega
   al mínimo de accesibilidad. Por eso hay dos:
     --rojo        #D40000  el de la interfaz: botones, foco, enlaces (5,3:1)
     --rojo-marca  #E8112D  el del logo, solo para identidad y decoración
   Así el botón principal es legible sin que la marca se corra de tono.
   =========================================================================== */

/* --- Tipografía ------------------------------------------------------------
   Las mismas dos que usa el software, y por el mismo motivo: que la web y el
   programa se vean como un solo producto y no como dos cosas parecidas.

   Se sirven desde ujier.com.ar, no desde un CDN de fuentes. Eso evita una
   dependencia de terceros en el camino crítico del render, evita que un
   tercero vea quién entra a la página, y hace que la web siga funcionando
   igual el día que ese CDN esté caído. Son 116 KB en total.

   font-display: swap — el texto se lee con la tipografía del sistema mientras
   la nuestra carga. Nunca hay un momento en blanco esperando una fuente.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Superficies */
  --papel:        #FFFFFF;
  --papel-2:      #F7F7F5;   /* superficie; gris apenas cálido, no azulado */
  --papel-3:      #EDEDEA;   /* cajas, canaletas, estados vacíos */
  --tinta:        #0F0F0E;   /* fondos oscuros y titulares */
  --tinta-2:      #181817;

  /* Texto */
  --texto:        #0F0F0E;   /* 19,2:1 sobre blanco */
  --texto-2:      #54544E;   /*  7,6:1 — texto secundario */
  --texto-3:      #6E6E67;   /*  5,1:1 — el mínimo que se permite acá */
  --sobre-oscuro: #EDEDE9;

  /* Líneas */
  --linea:        #E4E4E0;
  --linea-2:      #D2D2CC;
  --linea-fuerte: #0F0F0E;

  /* Acento */
  --rojo:         #D40000;
  --rojo-oscuro:  #A80000;   /* hover y pulsado */
  --rojo-marca:   #E8112D;   /* identidad: logo, detalles */
  --rojo-tenue:   #FBE9E9;   /* fondo de aviso, apenas teñido */
  --rojo-linea:   #F3C9C9;

  /* Formas */
  /* Apenas redondeado, como el software: es una herramienta de trabajo, no un
     juguete. Antes eran 10px, que con las sombras largas hacía que todo
     pareciera levitar. */
  --radio:        4px;
  --radio-chico:  3px;
  --sombra:       0 1px 2px rgba(15,15,14,.05);
  --sombra-alta:  0 12px 40px rgba(15,15,14,.14);

  /* Las mismas dos del software. La pila del sistema queda de respaldo, así la
     página se lee igual mientras la tipografía carga o si no llega a cargar. */
  --fuente: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fuente-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
                 Menlo, Consolas, monospace;
}

/* --- Base ---------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Los precios y los contadores se leen en columna: sin esto, cambiar de $69 a
   $129 mueve el ancho y el número "salta" delante del usuario. */
.tabular, .precio, td.num { font-variant-numeric: tabular-nums; }

h1, h2, h3 { text-wrap: balance; letter-spacing: -0.022em; }

/* Todo lo contable —precios, expedientes, horas, fechas— va en monoespaciada,
   igual que en el software. Es lo que hace que dos columnas de números se
   alineen solas. */
.mono, .num-mono {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

/* --- Foco visible --------------------------------------------------------
   Los inputs ya tenían anillo de foco; los botones y los enlaces no tenían
   ninguno, así que quien navega con teclado no sabía dónde estaba parado. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}
/* Sobre fondo negro el rojo pierde contraste: ahí el foco es blanco. */
.gradient-bg a:focus-visible,
.gradient-bg button:focus-visible,
footer a:focus-visible {
  outline-color: #FFFFFF;
}

/* --- Saltar al contenido -------------------------------------------------- */
.saltar {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--tinta);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radio-chico);
  font-weight: 600;
  transition: top .15s ease;
}
.saltar:focus { top: 12px; }

/* --- Fondos y marca ------------------------------------------------------- */
.gradient-bg { background: linear-gradient(135deg, #000000 0%, #171717 100%); }

.nav-link { position: relative; }
nav .nav-link::after {
  content: '';
  position: absolute;
  width: 0; height: 2px;
  bottom: -2px; left: 0;
  background-color: var(--rojo-marca);
  transition: width .3s ease;
}
nav .nav-link:hover::after,
nav .nav-link:focus-visible::after { width: 100%; }

.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floating { animation: float 6s ease-in-out infinite; }

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(212, 0, 0, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(212, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 0, 0, 0); }
}
.pulse-animation { animation: latido 2s infinite; }

.feature-icon { transition: transform .25s ease; }
.feature-card:hover .feature-icon { transform: scale(1.08); }

/* ===========================================================================
   ESTADOS
   ---------------------------------------------------------------------------
   Con una sola familia de color, el estado no se puede decir con el tono. Se
   dice con la BARRA de la izquierda y con el ícono:

     éxito      barra negra llena      ✓
     atención   barra negra punteada   !
     error      barra roja llena       ✕
     info       barra gris llena       i

   Se lee igual en una pantalla en blanco y negro y para alguien que no
   distingue colores, que es la prueba de que el estado está dicho de verdad y
   no solo pintado.
   =========================================================================== */

.aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--linea);
  border-left-width: 3px;
  background: var(--papel-3);
  color: var(--texto);
  font-size: .9rem;
  line-height: 1.5;
}
.aviso .icono { flex: none; font-style: normal; font-weight: 700; line-height: 1.45; }

.aviso--ok        { border-left-color: var(--tinta); background: var(--papel-3); }
.aviso--atencion  { border-left-color: var(--tinta); border-left-style: dashed; background: var(--papel-3); }
.aviso--error     { border-left-color: var(--rojo); background: var(--rojo-tenue); border-color: var(--rojo-linea); }
.aviso--error .icono { color: var(--rojo); }
.aviso--info      { border-left-color: var(--linea-2); background: var(--papel-3); }

/* --- Etiquetas de estado (el "Activa" / "Vencida" de Mi Cuenta) ----------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.etiqueta--activa   { color: var(--tinta);   background: var(--papel-3); }
.etiqueta--atencion { color: var(--texto-2); background: var(--papel-3); border-style: dashed; }
.etiqueta--critica  { color: var(--rojo);    background: var(--rojo-tenue); }
.etiqueta--neutra   { color: var(--texto-3); background: var(--papel-3); }

/* --- Avisos flotantes ----------------------------------------------------- */
.brindis {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}
.brindis > * { pointer-events: auto; }

.brindis-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-alta);
  font-size: .9rem;
  line-height: 1.45;
  background: var(--tinta);
  color: #fff;
  animation: entraBrindis .18s ease-out;
}
.brindis-item--error { background: var(--rojo-oscuro); }
.brindis-item .cerrar {
  margin-left: auto;
  flex: none;
  background: none;
  border: 0;
  color: inherit;
  opacity: .7;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
}
.brindis-item .cerrar:hover { opacity: 1; }

@keyframes entraBrindis {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Esqueletos de carga -------------------------------------------------
   Un "Cargando…" en gris no dice cuánto falta ni qué va a aparecer. Un
   esqueleto con la forma del contenido hace que la espera se sienta más
   corta y evita que la página salte cuando llegan los datos. */
.esqueleto {
  background: linear-gradient(90deg, var(--papel-3) 25%, #E6E6E4 37%, var(--papel-3) 63%);
  background-size: 400% 100%;
  animation: brillo 1.3s ease-in-out infinite;
  border-radius: var(--radio-chico);
  color: transparent !important;
  user-select: none;
}
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --- Estado vacío --------------------------------------------------------- */
.vacio {
  text-align: center;
  padding: 28px 16px;
  color: var(--texto-3);
  font-size: .9rem;
  border: 1px dashed var(--linea-2);
  border-radius: var(--radio);
  background: var(--papel);
}
.vacio .icono { display: block; font-size: 1.5rem; margin-bottom: 8px; color: var(--linea-2); }

/* --- Botones -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: var(--radio-chico);
  padding: 12px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }

.btn--principal { background: var(--rojo); color: #fff; }
.btn--principal:hover:not([disabled]) { background: var(--rojo-oscuro); }

.btn--oscuro { background: var(--tinta); color: #fff; }
.btn--oscuro:hover:not([disabled]) { background: #2A2A2A; }

.btn--borde { background: transparent; color: var(--texto); border-color: var(--linea-2); }
.btn--borde:hover:not([disabled]) { border-color: var(--tinta); }

/* --- Modales -------------------------------------------------------------- */
.modal-fondo { background: rgba(10, 10, 10, .62); backdrop-filter: blur(2px); }
.modal-caja  { box-shadow: var(--sombra-alta); }

/* --- Legales -------------------------------------------------------------- */
.legal-h2 { font-size: 1.15rem; font-weight: 700; color: var(--texto); margin: 2rem 0 .6rem; }
.legal-p  { color: var(--texto-2); line-height: 1.75; margin-bottom: .9rem; }
.legal-ul { color: var(--texto-2); line-height: 1.75; margin: 0 0 .9rem 1.2rem; list-style: disc; }
.legal-nota {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--tinta);
  background: var(--papel-3);
  border-radius: var(--radio-chico);
  padding: 12px 14px;
  color: var(--texto);
  font-size: .9rem;
}

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

/* ===========================================================================
   El lenguaje del producto, en la página
   ---------------------------------------------------------------------------
   La web y el software se ven como una sola cosa. No por usar los mismos
   colores —eso ya estaba— sino por usar las mismas formas: reglas de 1px en
   vez de sombras, numeración en vez de íconos decorativos, y la monoespaciada
   para todo lo contable.
   =========================================================================== */

/* --- La etiqueta que abre una sección ------------------------------------- */
.etiqueta-seccion {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--rojo);
}

/* --- El bloque de datos del hero ------------------------------------------
   No es una ilustración: es una corrida real, con el formato con el que el
   software la muestra. Dice de qué se trata Ujier mejor que un dibujo. */
.hero-caja {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--papel);
}

.hero-caja__cab {
  display: flex;
  align-items: center;
  padding: 13px 17px;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
}

.hero-caja__cab span:last-child { margin-left: auto; letter-spacing: 0; }

.hero-caja__fila {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px;
  border-bottom: 1px solid var(--linea);
  font-size: 13px;
  color: var(--texto-2);
}

.hero-caja__num {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.8px;
  color: var(--texto);
  width: 58px;
  text-align: right;
  flex: none;
}

/* El único acento de la caja va sobre lo que salió mal, que es el dato que
   el abogado necesita ver. */
.hero-caja__num--rojo { color: var(--rojo); }

.hero-caja__pie {
  margin: 0;
  padding: 14px 17px;
  font-size: 11px;
  color: var(--texto-3);
}

/* --- Las automatizaciones, numeradas --------------------------------------
   01 a 08, sin íconos. En un producto que trabaja con expedientes la
   numeración ES el idioma, y de paso dice cuántas herramientas hay de un
   vistazo. Los íconos, además, venían de un CDN de terceros. */
.rejilla-autom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}

@media (max-width: 1024px) { .rejilla-autom { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .rejilla-autom { grid-template-columns: 1fr; } }

.autom {
  background: var(--papel);
  padding: 24px 22px 26px;
}

.autom__num {
  font-family: var(--fuente-mono);
  font-size: 10.5px;
  color: var(--texto-3);
}

.autom__nombre {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
  margin: 11px 0 0;
}

.autom__que {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--texto-3);
}

/* --- Las horas que se recuperan -------------------------------------------
   Tres cifras con una regla roja al costado. La tabla comparativa que había
   antes pedía leer nueve filas para llegar a la misma conclusión. */
.cifras-tiempo {
  display: flex;
  gap: 22px;
  margin-top: 44px;
}

@media (max-width: 768px) { .cifras-tiempo { flex-direction: column; } }

.cifra-tiempo {
  flex: 1;
  border-left: 2px solid var(--rojo);
  padding: 4px 0 4px 22px;
}

.cifra-tiempo__num {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1;
}

.cifra-tiempo__unidad { font-size: 15px; font-weight: 500; margin-top: 9px; }
.cifra-tiempo__detalle { font-size: 12.5px; color: var(--texto-3); margin-top: 5px; }

/* --- Tablas ---------------------------------------------------------------
   La comparativa de horas se queda: es la evidencia de las tres cifras de
   abajo y sacarla dejaría los números sin respaldo. Lo que cambia es la
   forma: cabecera con la etiqueta chica en mayúsculas y filas separadas por
   una regla de 1px, igual que las tablas del software. */
.tabla-datos { width: 100%; border-collapse: collapse; }

.tabla-datos th {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--texto-3);
  text-align: left;
  padding: 10px 14px;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
}

.tabla-datos td {
  font-size: 12.5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
}

.tabla-datos tbody tr:last-child td { border-bottom: 0; }

/* Los números van en monoespaciada para que las dos columnas se comparen de
   un vistazo, que es todo el punto de la tabla. */
.tabla-datos td:nth-child(n+2) {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

/* La fila del total se distingue por peso y por una regla más marcada, no
   por un fondo de color. */
.tabla-datos tfoot td,
.tabla-datos tr.total td {
  font-weight: 600;
  border-top: 2px solid var(--linea-fuerte);
  background: var(--papel-2);
}

/* --- Bloques de sección ---------------------------------------------------
   Una regla arriba y el texto. Antes eran tarjetas blancas con sombra sobre
   una franja gris: tres capas para decir lo mismo que dice una línea. */
.bloque-regla {
  border-top: 2px solid var(--linea-fuerte);
  padding: 17px 0 0;
}

.bloque-regla h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
}

.bloque-regla p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--texto-3);
}

/* ===========================================================================
   La página, con el mismo idioma visual que el software
   ---------------------------------------------------------------------------
   Mismas tipografías, misma retícula de líneas finas, mismo acento rojo y la
   misma numeración. Alguien que ve la web y después abre el programa tiene
   que reconocer que son la misma cosa.

   Las clases de Tailwind que quedan en el HTML son las del andamiaje
   (container, grid, hidden). Todo lo que define el ASPECTO vive acá.
   =========================================================================== */

/* ── Barra de navegación ─────────────────────────────────────────────────── */
.wnav {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linea);
}

/* El `:not(.hidden)` no es un adorno: esta hoja carga después de tailwind.css,
   así que un `display: flex` suelto le gana a la clase `.hidden` con la que
   Tailwind esconde el menú en el teléfono. Sin esto el menú de escritorio se
   dibuja igual en una pantalla de 390 px y empuja la página a lo ancho. Es el
   mismo motivo por el que `.wmovil` está escrito así más abajo. */
.wmenu:not(.hidden) { display: flex; }
.wmenu { gap: 24px; margin-left: 14px; }

.wmenu a {
  font-size: 13px;
  color: var(--texto-2);
  text-decoration: none;
}

.wmenu a:hover { color: var(--texto); }

/* ── Secciones ───────────────────────────────────────────────────────────── */
.wsec { padding: 74px 0; border-bottom: 1px solid var(--linea); }
.wsec--gris { background: var(--papel-2); }

.wet {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--rojo);
  text-transform: uppercase;
}

.wh1 {
  margin: 16px 0 0;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  letter-spacing: -2.2px;
  font-weight: 600;
  color: var(--texto);
}

.wh2 {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 30px);
  letter-spacing: -1px;
  font-weight: 600;
  text-align: center;
  color: var(--texto);
}

.wp {
  margin: 18px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--texto-2);
}

.wcentro { text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; }
.wnota { font-size: 11.5px; color: var(--texto-3); margin-top: 17px; }

/* ── El primer bloque ────────────────────────────────────────────────────── */
.whero { display: flex; gap: 64px; align-items: center; flex-wrap: wrap; }
.whero > div:first-child { flex: 1 1 420px; min-width: 0; }

/* La caja de la derecha no es un dibujo: es el idioma de datos del producto,
   el mismo que se ve al abrir el programa. */
.wcaja {
  flex: 1 1 360px;
  min-width: 0;
  border: 1px solid var(--linea);
  border-radius: 4px;
  overflow: hidden;
}

.wcaja-cab {
  display: flex;
  padding: 13px 17px;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
  font-family: var(--fuente-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
}

.wcaja-cab span:last-child { margin-left: auto; color: var(--texto-3); font-weight: 400; }

.wcaja-fila {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px;
  border-bottom: 1px solid var(--linea);
}

.wcaja-num {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 500;
  width: 58px;
  text-align: right;
  letter-spacing: -.8px;
  flex: none;
}

.wcaja-num--alerta { color: var(--rojo); }
.wcaja-que { font-size: 13px; color: var(--texto-2); }

.wcaja-pie {
  padding: 14px 17px;
  font-family: var(--fuente-mono);
  font-size: 11px;
  color: var(--texto-3);
}

/* ── Las cifras de tiempo ────────────────────────────────────────────────── */
.wtres { display: flex; gap: 22px; margin-top: 44px; flex-wrap: wrap; }

/* Las tres columnas de "para quién es" y "nuestros valores".
   Misma regla arriba que los pasos de "cómo empezar": en esta página lo que
   separa un bloque de otro es una línea, no una caja con sombra. Así tres
   columnas de texto se leen como tres columnas y no como tres tarjetas. */
.wcol {
  flex: 1 1 240px;
  min-width: 0;
  border-top: 1px solid var(--linea-2);
  padding-top: 15px;
}

.wcol-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--texto);
}

.wcol-texto {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--texto-3);
}

.wcifra {
  flex: 1 1 220px;
  border-left: 2px solid var(--rojo);
  padding: 4px 0 4px 22px;
}

.wnum {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--texto);
}

.wun { font-size: 15px; font-weight: 500; margin-top: 9px; }
.wdet { font-size: 12.5px; color: var(--texto-3); margin-top: 5px; }

/* ── La tabla de la comparación ──────────────────────────────────────────── */
/* Es lo que hace concreta la promesa: no "ahorrás horas" sino "revisar 100
   expedientes pasa de 3-4 hs a 1 h". Por eso vale la pena que esté. */
.wtabla-caja {
  border: 1px solid var(--linea);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 40px;
}

.wtabla-scroll { overflow-x: auto; }

.wtabla {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
}

.wtabla th {
  text-align: left;
  padding: 12px 18px;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--texto-3);
}

.wtabla th:not(:first-child),
.wtabla td:not(:first-child) { text-align: right; width: 22%; }

.wtabla td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--linea);
  font-size: 13px;
  color: var(--texto-2);
}

.wtabla td:first-child { color: var(--texto); }

/* La columna "con Ujier" en monoespaciada y en rojo: es el dato que se
   compara, y compararlo en columna solo funciona si los números se alinean. */
.wtabla .wcon {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rojo);
}

.wtabla .wsin {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--texto-3);
}

.wtabla tr:last-child td {
  border-bottom: 0;
  background: var(--papel-2);
  font-weight: 600;
  color: var(--texto);
}

.wtabla tr:last-child .wsin { color: var(--texto-2); }

/* ── Las automatizaciones ────────────────────────────────────────────────── */
.wgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 4px;
  margin-top: 44px;
  overflow: hidden;
}

.wauto { background: var(--papel); padding: 24px 22px 26px; }

/* La numeración es el idioma del producto: módulos, estados, expedientes.
   Es la identidad jurídica, y es estructural, no decorativa. */
.wn { font-family: var(--fuente-mono); font-size: 10.5px; color: var(--texto-3); }

.wat {
  font-size: 15px;
  font-weight: 600;
  margin-top: 11px;
  letter-spacing: -.2px;
  color: var(--texto);
}

.wad { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--texto-3); }

/* ── Cómo empezar ────────────────────────────────────────────────────────── */
.wpasos { display: flex; gap: 22px; margin-top: 40px; flex-wrap: wrap; }

.wpaso {
  flex: 1 1 220px;
  border-top: 2px solid var(--texto);
  padding-top: 17px;
}

/* ── Planes ──────────────────────────────────────────────────────────────── */
.wciclo {
  display: inline-flex;
  border: 1px solid var(--linea-2);
  border-radius: 3px;
  overflow: hidden;
  margin: 22px auto 0;
}

.wciclo .billing-btn {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--linea-2);
  padding: 9px 17px;
  font: inherit;
  font-size: 12.5px;
  color: var(--texto-2);
  cursor: pointer;
  white-space: nowrap;
}

.wciclo .billing-btn:last-child { border-right: 0; }
.wciclo .billing-btn:hover:not(.activo) { background: var(--papel-2); }

.wciclo .billing-btn.activo {
  background: var(--texto);
  color: var(--papel);
  font-weight: 500;
}

.wplanes { display: flex; gap: 20px; margin-top: 36px; align-items: stretch; flex-wrap: wrap; }

.wplan {
  flex: 1 1 280px;
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--papel);
}

.wplan--destacado { border-color: var(--texto); border-width: 2px; padding: 25px 23px 23px; }

.wpop {
  position: absolute;
  top: -10px;
  left: 23px;
  background: var(--rojo);
  color: var(--papel);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  padding: 4px 9px;
  border-radius: 2px;
}

.wpn { font-size: 19px; font-weight: 600; letter-spacing: -.4px; color: var(--texto); }
.wpq { font-size: 12px; color: var(--texto-3); margin-top: 5px; }

.wpprecio { display: flex; align-items: baseline; gap: 7px; margin-top: 20px; }

.wpusd {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -1.4px;
  color: var(--texto);
}

.wpmes { font-size: 13px; color: var(--texto-3); }

.wpl { list-style: none; margin: 22px 0 26px; padding: 0; }

.wpl li {
  font-size: 12.5px;
  color: var(--texto-2);
  line-height: 1.5;
  padding: 8px 0 8px 19px;
  border-top: 1px solid var(--linea);
  position: relative;
}

.wpl li::before { content: "—"; position: absolute; left: 0; color: var(--texto-3); }

.wplan .checkout-btn { margin-top: auto; width: 100%; }

/* ── Integración ─────────────────────────────────────────────────────────── */
.wintegra {
  display: flex;
  gap: 44px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--rojo);
  border-radius: 4px;
  padding: 32px 34px;
  flex-wrap: wrap;
  background: var(--papel);
}

.wprecio-unico {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -1.2px;
  color: var(--texto);
}

/* ── Preguntas y contacto ────────────────────────────────────────────────── */
.wfaq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  gap: 26px 44px;
  margin-top: 40px;
}

.wq { border-top: 1px solid var(--linea-2); padding-top: 15px; }

/* El formulario. Reemplaza al mailto suelto: acá la consulta se clasifica
   sola y, si el tema es de los que ya sabemos contestar, la respuesta sale en
   el momento. Los correos siguen abajo para quien prefiera su programa. */
.wform {
  /* Mismo ancho que la rejilla de preguntas y centrado igual: las preguntas y
     el formulario son un solo bloque, y si el formulario se estirara a todo el
     ancho se leerían como dos cosas sueltas. */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 22px;
  background: var(--papel);
}

.wform-titulo {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-3);
  margin: 0 0 16px;
}

.wform-fila { display: flex; gap: 16px; flex-wrap: wrap; }
.wform-campo { flex: 1 1 240px; min-width: 0; margin-bottom: 14px; }

.wform label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto-2);
}

.wform input,
.wform textarea {
  width: 100%;
  background: var(--papel);
  color: var(--texto);
  border: 1px solid var(--linea-2);
  border-radius: 3px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
}

.wform textarea { line-height: 1.6; resize: vertical; }
.wform input::placeholder, .wform textarea::placeholder { color: var(--texto-3); }

.wform input:focus,
.wform textarea:focus {
  outline: none;
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(212, 0, 0, .16);
}

.wform-boton { margin-top: 18px; }

@media (max-width: 520px) { .wform-boton { width: 100%; } }

.wform-aviso {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 3px;
  font-size: 12.5px;
  line-height: 1.55;
}

.wform-aviso--error {
  background: var(--rojo-tenue);
  border: 1px solid var(--rojo-linea);
  border-left: 2px solid var(--rojo);
  color: var(--texto);
}

.wform-aviso--ok {
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-left: 2px solid var(--texto-3);
  color: var(--texto);
}

/* Los tres contactos, en fila y en monoespaciada: son literales que se copian. */
.wcontactos {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.wcontactos a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-2);
  text-decoration: none;
}

.wcontactos a:hover { color: var(--rojo); }
.wcontactos .mono { font-family: var(--fuente-mono); font-size: 12.5px; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.wpie {
  display: flex;
  gap: 64px;
  padding: 52px 0;
  flex-wrap: wrap;
}

.wpie > div { display: flex; flex-direction: column; gap: 8px; }
.wpie > div:first-child { flex: 1 1 260px; gap: 0; }

.wpie a, .wpie span { font-size: 12.5px; color: var(--texto-3); text-decoration: none; }
.wpie a:hover { color: var(--texto); }

.wpt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  margin-bottom: 4px;
  color: var(--texto);
  text-transform: uppercase;
}

/* ── La barra de arriba, pegada ──────────────────────────────────────────── */
/* Tailwind cambia a la barra de escritorio a los 768 px, que es justo el ancho
   donde el logo, los cinco enlaces y los dos botones ya no entran: la barra se
   salía 76 px y la página se podía correr de lado. Acá el corte se hace a los
   900, que es donde de verdad entra. Se declara con !important a propósito:
   son clases de utilidad de Tailwind (`hidden`, `md:flex`, `md:hidden`) y ese
   es el único modo de ganarles sin tocar el archivo compilado. */
@media (max-width: 900px) {
  .wnav .wmenu,
  .wnav .wnav-acciones { display: none !important; }
  .wnav #mobileMenuBtn { display: inline-flex !important; margin-left: auto; }
}

@media (min-width: 901px) {
  .wnav #mobileMenuBtn { display: none !important; }
}

.wnav-fondo {
  background: var(--papel);
  /* Con la barra pegada arriba, el contenido pasa por debajo. Sin un fondo
     opaco se leerían las dos capas superpuestas. */
  backdrop-filter: none;
}

.wlink {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--texto-2);
  cursor: pointer;
}

.wlink:hover { color: var(--texto); }

/* ── El menú del teléfono ────────────────────────────────────────────────── */
.wmovil:not(.hidden) {
  display: flex;
}

.wmovil {
  flex-direction: column;
  gap: 14px;
  padding: 18px 24px 22px;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}

.wmovil a, .wmovil-enlace {
  font-size: 14px;
  color: var(--texto-2);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.wmovil a:hover, .wmovil-enlace:hover { color: var(--texto); }
.wmovil .btn { align-self: flex-start; }

/* ── Descargas ───────────────────────────────────────────────────────────── */
.wdescarga {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 36px;
  padding: 26px 28px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 4px;
}

.wdescarga-version {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--texto);
}

.wdescarga-lado { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.wdescarga-otros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--texto-3);
}

.wdescarga-otros a { color: var(--texto-2); text-decoration: none; }
.wdescarga-otros a:hover { color: var(--rojo); }

/* Un botón que no se puede apretar tiene que verse así, y el motivo se
   explica al lado. `aria-disabled` en vez de `disabled` porque el enlace
   sigue llevando a la lista de instaladores. */
.btn[aria-disabled="true"] { cursor: default; opacity: .75; }

.wpie > div { align-items: flex-start; }

/* Con la barra pegada arriba, un enlace interno dejaba el título tapado
   debajo de ella. Esto reserva su alto al saltar a una sección. */
[id] { scroll-margin-top: 78px; }