/* =====================================================================
   ADMOS · la hoja comun de admos.app

   La usan la portada y las paginas de cada sistema. Lo que es de UNA
   sola pagina (la calculadora de la portada, por ejemplo) vive en esa
   pagina, no aqui. Antes cada pagina llevaba su propia copia entera del
   CSS y el diseno se iba desviando de una a otra sin que nadie lo notara.

   Las herramientas (/cambio/ y /punto-de-equilibrio/) NO la usan: son
   piezas autonomas que tienen que funcionar aunque falle todo lo demas.

   Marca: marca/LEEME.md del repo. Sobre oscuro, crema #E9F1F4 y celeste
   #6FB1E8. Dial: ENERGY 2 / RHYTHM 2 / MOTION 2.
   ===================================================================== */

:root {
  color-scheme: dark;              /* scroll y campos nativos, en oscuro */
  --fondo: #080807;
  --tinta: #E9F1F4;
  --azul: #6FB1E8;
  --suave: #9FAEB8;
  --tenue: #7F8A93;
  --linea: rgba(233, 241, 244, 0.12);
  --tarjeta: #101113;
  --alerta: #E2805F;
  --dato: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --aire: clamp(2.75rem, 8vh, 4.5rem);   /* el espacio entre tramos */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo); color: var(--tinta);
  font-family: 'Montserrat', 'Avenir Next', system-ui, sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  min-height: 100dvh; display: flex; flex-direction: column;
}
main { flex: 1; }

/* Sin esto el telefono espera el doble toque antes de cada clic. */
a, button, input, label { touch-action: manipulation; }
a, button, [role="button"] { cursor: pointer; }
:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px;
}

/* 1120 para que en escritorio haya DOS columnas de verdad. Antes era una
   tira de 680 px flotando en el vacio en cualquier pantalla grande. */
.ancho { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
/* OJO: las secciones que llevan .ancho fijan su espacio con padding-block,
   NUNCA con "padding: X 0". Ese 0 borra el margen lateral de .ancho, y en el
   telefono el texto queda pegado al borde. En escritorio no se nota porque
   el contenido va centrado en 1120 px: por eso se escapo una vez. */

/* UNA sola etiqueta en versalitas en todo el sitio. Antes habia cinco
   estilos distintos gritando al mismo volumen.
   SUELO: 0,7rem (11,2 px) para toda etiqueta en versalitas, aqui y en
   .estado. Lo fijo un arreglo de accesibilidad el 2026-11-01 y al rehacer
   las paginas se piso una vez sin querer (quedaron en 9,9 px). No bajar. */
.rotulo {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tenue); margin: 0 0 1rem;
}

/* ---- Cabecera --------------------------------------------------------- */
/* En el telefono el logotipo va arriba y la navegacion debajo, en su
   propia linea: con los dos enlaces al lado no caben en 375 px. */
header.cima {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.9rem 1.4rem; padding-top: 1.6rem;
}
.logotipo { width: 168px; height: auto; display: block; }
.cima .a-casa { display: block; border-radius: 6px; }
.navega { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.volver {
  font-size: 0.86rem; font-weight: 500; color: var(--suave);
  text-decoration: none; text-underline-offset: 4px;
}
.volver:hover, .volver:focus-visible { color: var(--tinta); text-decoration: underline; }
/* Las herramientas gratis son lo UNICO del sitio que funciona hoy: por
   eso su enlace es el que lleva color en la cabecera, no "los sistemas". */
.navega .a-gratis {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.86rem; font-weight: 600; color: var(--azul); text-decoration: none;
  border: 1px solid rgba(111, 177, 232, 0.4); border-radius: 999px;
  padding: 0.4rem 0.85rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.navega .a-gratis:hover, .navega .a-gratis:focus-visible {
  background: rgba(111, 177, 232, 0.12); border-color: var(--azul);
}

/* Ninguna celda de rejilla se ensancha por lo que lleva dentro: sin esto
   una celda mide como minimo lo que su contenido mas ancho, y una sola
   palabra o boton largo saca la pagina de la pantalla en el telefono. */
.heroe-sistema > *, .tramo > *, .par > *, .lista > *,
.utiles .pareja > *, .otros .tres > * { min-width: 0; }

/* ---- Tipografia ------------------------------------------------------- */
h1 {
  font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--azul); }
h2 {
  font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.22; letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
.entrada { color: var(--suave); margin: 1.2rem 0 0; font-size: 1.02rem; max-width: 48ch; }
.entrada strong { color: var(--tinta); font-weight: 600; }

/* ---- El apellido y su estado ------------------------------------------ */
.apellido { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.apellido .ap { font-weight: 700; font-size: 1.05rem; line-height: 1; }
.apellido .ap span { color: var(--azul); font-weight: 500; }
/* El estado es un hecho, no un adorno: dice si el sistema existe o no. */
.estado {
  /* align-self: en una columna flex (la tarjeta de herramienta) se estiraba
     a todo el ancho; una insignia mide lo que dice, no lo que hay. */
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.42rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--linea); border-radius: 999px; padding: 0.26rem 0.6rem;
  color: var(--tenue); white-space: nowrap;
}
.estado.vivo { color: var(--azul); border-color: rgba(111, 177, 232, 0.45); }
/* El punto no late: "en uso todos los dias" es un hecho estable. */
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--azul); flex-shrink: 0; }

/* ---- Enlaces y botones ------------------------------------------------ */
.ver {
  align-self: flex-start; font-weight: 600; font-size: 0.9rem; color: var(--azul);
  text-decoration: none; text-underline-offset: 4px;
}
.ver:hover, .ver:focus-visible { text-decoration: underline; }

.boton {
  /* Sin nowrap: un boton largo en el telefono no cabia, y como estaba
     dentro de una celda de rejilla, la celda se ensanchaba hasta caberlo y
     empujaba la pagina entera fuera de la pantalla. Mejor dos lineas. */
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none;
  background: rgba(111, 177, 232, 0.1); color: var(--tinta);
  border: 1px solid rgba(111, 177, 232, 0.4); border-radius: 12px;
  padding: 0.78rem 1.15rem; font-weight: 600; font-size: 0.92rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.boton:hover, .boton:focus-visible { background: rgba(111, 177, 232, 0.18); border-color: var(--azul); }
/* El primario lleva el azul lleno. Uno por pantalla, no mas. */
.boton.primario { background: var(--azul); color: #06121C; border-color: var(--azul); }
.boton.primario:hover, .boton.primario:focus-visible { background: #86BEED; }

/* ---- Las capturas ----------------------------------------------------- */
.captura { margin: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.captura img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--linea); background: var(--tarjeta);
}
.captura figcaption { font-size: 0.85rem; color: var(--tenue); max-width: 62ch; }
.captura figcaption b { color: var(--tinta); font-weight: 600; }

/* De donde salen los datos. No es letra pequena legal: es lo que hace
   creible la captura, asi que va pegada a ella y legible. */
.nota-demo {
  font-size: 0.82rem; color: var(--tenue); max-width: 62ch;
  border-left: 2px solid var(--linea); padding-left: 0.9rem; margin: 0;
}
.nota-demo b { color: var(--suave); font-weight: 600; }

/* ---- Las fichas de cada sistema --------------------------------------- */
.ficha {
  border: 1px solid var(--linea); border-radius: 18px; background: var(--tarjeta);
  overflow: hidden; display: flex; flex-direction: column;
}
.ficha img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--linea); }
.ficha .cuerpo { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.ficha h3 { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.ficha p { margin: 0; flex: 1; font-size: 0.88rem; color: var(--suave); }

/* ---- Las herramientas gratis ------------------------------------------ */
/* Se ENSENAN, igual que los sistemas, en vez de describirse: con su captura
   y su estado. Y el estado es verdad: estas si funcionan hoy. Toda la
   tarjeta es el enlace, un solo blanco grande en el telefono; el "Abrir"
   tiene cara de boton pero no es otro control, asi el teclado no pasa dos
   veces por la misma puerta. */
.utiles { border-top: 1px solid var(--linea); padding-block: var(--aire); }
.utiles .intro { margin: 0.6rem 0 1.8rem; color: var(--suave); max-width: 60ch; }
.utiles .pareja { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .utiles .pareja { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }

.util {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(111, 177, 232, 0.28); border-radius: 18px;
  background: linear-gradient(180deg, rgba(111, 177, 232, 0.06), var(--tarjeta) 46%);
  color: inherit; text-decoration: none;
}
.util img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--linea); }
.util .cuerpo { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.util h3 { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.22; text-wrap: balance; }
.util p { margin: 0; flex: 1; font-size: 0.9rem; color: var(--suave); }
.util .abrir {
  align-self: flex-start; margin-top: 0.4rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--azul); color: #06121C; border-radius: 11px;
  padding: 0.66rem 1.1rem; font-size: 0.9rem; font-weight: 700;
  transition: background-color 160ms ease;
}
.util:hover .abrir, .util:focus-visible .abrir { background: #86BEED; }

/* Una sola herramienta: a lo ancho, captura a un lado y texto al otro. */
@media (min-width: 820px) {
  .util.ancha { flex-direction: row; align-items: stretch; }
  .util.ancha img { width: 56%; border-bottom: 0; border-right: 1px solid var(--linea); object-fit: cover; }
  .util.ancha .cuerpo { justify-content: center; padding: 1.8rem 2rem; }
  /* En la columna estrecha el parrafo empuja el boton al fondo para que
     las dos tarjetas lo tengan a la misma altura; a lo ancho, eso abria un
     hueco: aqui el bloque va centrado y junto. */
  .util.ancha p { flex: 0 0 auto; }
}

/* ---- El aviso ---------------------------------------------------------- */
.aviso { border-top: 1px solid var(--linea); padding-block: var(--aire); }
.aviso h2 { margin: 0 0 0.6rem; font-size: clamp(1.4rem, 4vw, 1.9rem); }
.aviso p { margin: 0; color: var(--suave); max-width: 56ch; }
.suscribir { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.2rem; max-width: 30rem; }
.suscribir input[type="email"] {
  flex: 1 1 15rem; min-width: 0; background: var(--tarjeta); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 11px;
  padding: 0.74rem 0.9rem; font: inherit; font-size: 0.95rem;
}
.suscribir input[type="email"]::placeholder { color: var(--tenue); }
.suscribir input[type="email"]:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(111, 177, 232, 0.16);
}
.suscribir button {
  background: var(--azul); color: #06121C; border: 0; border-radius: 11px;
  padding: 0.74rem 1.2rem; font: inherit; font-size: 0.95rem; font-weight: 700;
  transition: filter 160ms ease;
}
.suscribir button:hover:not(:disabled) { filter: brightness(1.08); }
.suscribir button:disabled { opacity: 0.55; cursor: not-allowed; }
/* La trampa para robots: fuera de la vista y del recorrido del teclado. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.resp { margin: 0.7rem 0 0; font-size: 0.88rem; min-height: 1.2em; }
.resp.bien { color: var(--azul); }
.resp.mal { color: var(--alerta); }
.enlaces { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.enlaces a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; font-size: 0.92rem; text-decoration: none; color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 11px; padding: 0.62rem 0.95rem;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.enlaces a:hover, .enlaces a:focus-visible {
  color: var(--azul); border-color: rgba(111, 177, 232, 0.5); background: rgba(111, 177, 232, 0.07);
}
.enlaces svg { flex-shrink: 0; }
.de-paso { margin: 1.4rem 0 0; font-size: 0.86rem; color: var(--tenue); max-width: 60ch; }
.de-paso a { color: var(--suave); text-underline-offset: 3px; }
.de-paso a:hover, .de-paso a:focus-visible { color: var(--azul); }

/* ---- Pie --------------------------------------------------------------- */
footer { border-top: 1px solid var(--linea); padding: 1.4rem 1.5rem 1.8rem; }
footer p { margin: 0; text-align: center; color: var(--tenue); }
footer .legal { font-size: 0.72rem; line-height: 1.55; }
/* La linea legal en caja normal: en versalitas se vuelve un muro en el
   telefono. La fiscal si, que es corta y se lee como un dato. */
footer .fiscal { font-size: 0.63rem; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.6; margin-top: 0.3rem; }
/* El RIF no se parte NUNCA: cortado a la mitad se lee como un error. */
footer .fiscal span { white-space: nowrap; }


/* =====================================================================
   LAS PAGINAS DE CADA SISTEMA
   ===================================================================== */

/* El heroe: la pregunta a la izquierda, la captura que la responde a la
   derecha. En el telefono, primero la pregunta. */
.heroe-sistema {
  display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center;
  padding-block: clamp(2rem, 6vh, 4rem) clamp(1.5rem, 4vh, 2.5rem);
}
@media (min-width: 900px) { .heroe-sistema { grid-template-columns: 0.92fr 1.08fr; gap: clamp(2.5rem, 5vw, 3.5rem); } }
.heroe-sistema .apellido { margin-bottom: 1.2rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }

/* Un tramo: texto y captura lado a lado. Alternan de lado para que la
   pagina tenga ritmo en vez de ser una tira de imagenes apiladas. */
.tramo {
  display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: center;
  border-top: 1px solid var(--linea); padding-block: var(--aire);
}
@media (min-width: 900px) {
  .tramo { grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 5vw, 3.5rem); }
  .tramo.al-reves { grid-template-columns: 1.2fr 0.8fr; }
  .tramo.al-reves .texto { order: 2; }
}
.tramo .texto p, .bloque p, .par p { margin: 0.8rem 0 0; color: var(--suave); max-width: 52ch; }
.tramo .texto p strong, .bloque p strong, .par p strong { color: var(--tinta); font-weight: 600; }

/* Un bloque solo de texto, y una pareja de ideas lado a lado. */
.bloque { border-top: 1px solid var(--linea); padding-block: var(--aire); }
.par {
  border-top: 1px solid var(--linea); padding-block: var(--aire);
  display: grid; gap: 2.2rem; grid-template-columns: 1fr;
}
@media (min-width: 860px) { .par { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* Una lista de puntos que pesan lo mismo. */
.lista { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 640px) { .lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .lista { grid-template-columns: repeat(4, 1fr); } }
.lista div {
  border: 1px solid var(--linea); border-radius: 14px; background: var(--tarjeta);
  padding: 1.1rem 1.15rem;
}
.lista b { display: block; font-size: 0.98rem; margin-bottom: 0.35rem; }
.lista p { margin: 0; font-size: 0.86rem; color: var(--suave); }

/* Los otros sistemas, al final: nadie llega a un callejon sin salida. */
.otros { border-top: 1px solid var(--linea); padding-block: var(--aire); }
.otros .tres { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .otros .tres { grid-template-columns: repeat(3, 1fr); } }
.otros .ficha h3 { font-size: 1rem; }


/* =====================================================================
   MOVIMIENTO. Cada uno con su motivo, ninguno en bucle, todos apagados
   con prefers-reduced-motion. El estado final es el normal: si el JS no
   carga, no se esconde nada.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Lo que entra al hacer scroll llega UNA vez. revela.js marca .js en
     <html> y deja ya visible lo que estaba en pantalla al cargar, asi
     que nada parpadea de visible a oculto. */
  .js .aparece {
    opacity: 0; transform: translateY(12px);
    transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js .aparece.dentro { opacity: 1; transform: none; }

  /* La miniatura se acerca al pasar por encima: dice que la ficha es una
     puerta, no una lamina. */
  .ficha { transition: border-color 220ms ease; }
  .ficha img { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
  .ficha:hover, .ficha:focus-within { border-color: rgba(111, 177, 232, 0.4); }
  .ficha:hover img, .ficha:focus-within img { transform: scale(1.025); }
  .util { transition: border-color 220ms ease; }
  .util img { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
  .util:hover, .util:focus-visible { border-color: var(--azul); }
  .util:hover img, .util:focus-visible img { transform: scale(1.02); }
}