/* ═══════════════════════════════════════════════════════════════════════
   RESET Verifica — hoja compartida de la landing, la documentación,
   el registro y el panel.

   Sigue el mismo sistema que cada micrositio de resetparatodos.com: fondo
   #050A10, Sora + Inter + JetBrains Mono, encabezado sticky de vidrio,
   campo de partículas de fondo, aparición de bloques al hacer scroll y pie
   con redes. Lo único que cambia por sección es --acento, que es también el
   color al que viran las partículas: apps/libros/notas usan lima, iNeni
   menta, fsf magenta, y nmc y Verifica este ámbar (#E4A24C).

   Las clases históricas (header.sitio, .bloque-factual, ul.limpia,
   .etiqueta-ok/.etiqueta-no, .tarjetas) se conservan tal cual para no
   tocar el contenido de las páginas que ya las usan.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Tokens idénticos a los de la home */
  --fondo: #050A10;
  --claro: #EDF2F7;          /* 18.3:1 sobre el fondo */
  --claro-2: #A7B4C0;        /* 8.2:1 sobre el fondo */
  --azul: #38A6E8;
  --lima: #9BD117;

  /* El acento de la sección, como en cada micrositio: apps/libros/notas
     usan lima, iNeni menta, fsf magenta, nmc y Verifica este ámbar. Es la
     variable que el campo del fondo usa como destino de las partículas. */
  --acento: #E4A24C;
  --acento-2: #F1BA6C;

  /* Nombres propios de Verifica (alias del acento) */
  --oro: #E4A24C;
  --oro-2: #E7A83C;
  --oro-luz: #F7CE78;

  --halo: 0 1px 2px rgba(5, 10, 16, .95), 0 4px 18px rgba(5, 10, 16, .85),
          0 0 42px rgba(5, 10, 16, .7);

  --t-micro: .8125rem;
  --t-cuerpo: 1.0625rem;
  --t-lead: 1.25rem;
  --max: 1180px;
  --lectura: 74ch;
  --radio: 18px;
  --borde: rgba(170, 198, 220, .15);
  --vidrio: rgba(10, 18, 28, .46);
  --vidrio-luz: rgba(170, 198, 220, .07);

  /* Semánticos heredados del estilo anterior */
  --texto: var(--claro);
  --texto-suave: var(--claro-2);
  --panel: rgba(170, 198, 220, .05);
  --ok: #9BD117;
  --aviso: var(--oro-luz);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--claro);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-cuerpo);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* ── EL CAMPO ─────────────────────────────────────────────────────────────
   El fondo vivo del sitio: partículas que nacen azules a la izquierda y
   viran al acento al cruzar. Idéntico al de la home y los micrositios; el
   bucle vive en /assets/campo.js. El velo lo hunde detrás del texto sin
   apagarlo. */
#campo { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: block; }
.velo {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130vw 100vh at 50% 40%, transparent 0%,
              rgba(5, 10, 16, .30) 62%, rgba(5, 10, 16, .62) 100%);
}
/* Todo el contenido flota por encima del campo */
header.sitio, main, footer.sitio { position: relative; z-index: 2; }

/* Aparición de los bloques al entrar en pantalla, como en el resto del sitio */
.pieza {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1),
              transform .7s cubic-bezier(.2, .7, .3, 1);
}
.pieza.dentro { opacity: 1; transform: none; }

/* En teléfono el campo no se crea (el bucle no debe correr): en su lugar,
   los mismos radiales fijos que usan los micrositios. */
@media (max-width: 900px), (pointer: coarse) {
  #campo, .velo { display: none; }
  body {
    background:
      radial-gradient(120vw 58vh at 8% -4%, rgba(56, 166, 232, .20), transparent 62%),
      radial-gradient(118vw 56vh at 94% 104%, rgba(228, 162, 76, .16), transparent 60%),
      var(--fondo);
    background-attachment: fixed;
  }
}

h1, h2, h3, h4 {
  font-family: "Sora", system-ui, sans-serif;
  margin: 0;
  line-height: 1.14;
  letter-spacing: -.03em;
  text-wrap: balance;
}
p { margin: 0 0 1.05rem; text-wrap: pretty; }

a { color: var(--oro); text-decoration-color: rgba(228, 162, 76, .38);
    text-underline-offset: 3px; }
a:hover { color: var(--oro-luz); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; position: relative; }
@media (min-width: 900px) { .wrap { padding: 0 40px; } }

.saltar {
  position: fixed; top: 0; left: 0; z-index: 100; padding: 12px 20px;
  background: var(--oro); color: #1a1206; font-weight: 600; text-decoration: none;
  transform: translateY(-130%); transition: transform .18s ease;
}
.saltar:focus { transform: translateY(0); }

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Sora", sans-serif; font-weight: 600; text-decoration: none;
  border-radius: 999px; padding: 13px 24px; font-size: var(--t-cuerpo);
  border: 0; cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), background .2s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn-oro { background: linear-gradient(135deg, var(--oro-luz), var(--oro-2)); color: #1a1206; }
.btn-oro:hover { color: #1a1206; transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .85); }
.btn-vidrio { background: rgba(170, 198, 220, .10); color: var(--claro);
  backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--borde); }
.btn-vidrio:hover { color: var(--claro); background: rgba(170, 198, 220, .18); transform: translateY(-3px); }

/* ── Encabezado: fila del sitio + fila de la sección ──────────────────── */
header.sitio {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 10, 16, .72);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 -1px 0 var(--borde);
  transition: box-shadow .25s ease;
}
header.sitio.pegado { box-shadow: inset 0 -1px 0 var(--borde), 0 8px 26px -18px #000; }
header.sitio .nav { display: flex; align-items: center; gap: 16px; height: 70px; }
header.sitio .marca { display: flex; align-items: center; text-decoration: none; padding: 7px 0; }
header.sitio .marca img { height: 30px; width: auto; display: block; }
header.sitio .enlaces { margin-left: auto; display: flex; gap: 26px; align-items: center; }
header.sitio .enlaces a:not(.btn) {
  color: var(--claro-2); text-decoration: none; font-size: .98rem; font-weight: 500;
}
header.sitio .enlaces a:not(.btn):hover { color: var(--azul); }
header.sitio .enlaces a[aria-current="page"] { color: var(--claro); }
header.sitio .nav .btn { padding: 9px 18px; font-size: .95rem; }
@media (max-width: 900px) { header.sitio .enlaces a:not(.btn) { display: none; } }

/* Segunda fila: navegación dentro de la documentación */
.subnav {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 9px; padding-bottom: 9px;
  box-shadow: inset 0 -1px 0 var(--borde);
}
.subnav .seccion {
  font-family: "Sora", sans-serif; font-weight: 700; font-size: .95rem;
  letter-spacing: -.02em; white-space: nowrap;
}
.subnav .seccion a { color: var(--claro); text-decoration: none; }
.subnav .seccion .v { color: var(--oro); }
.subnav nav { display: flex; gap: 20px; flex-wrap: wrap; overflow-x: auto; }
.subnav nav a {
  color: var(--claro-2); text-decoration: none; font-size: .92rem;
  white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent;
}
.subnav nav a:hover { color: var(--claro); }
.subnav nav a[aria-current="page"] { color: var(--oro); border-bottom-color: var(--oro); }

/* ── Cuerpo ───────────────────────────────────────────────────────────── */
main { max-width: var(--max); margin: 0 auto; padding: 2.6rem 24px 4.5rem; }
@media (min-width: 900px) { main { padding: 3.2rem 40px 5.5rem; } }
main article { max-width: var(--lectura); }

h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); margin: .2rem 0 1.1rem; }
h2 {
  font-size: 1.42rem; margin: 2.8rem 0 .9rem; padding-bottom: .45rem;
  box-shadow: inset 0 -1px 0 var(--borde);
}
h3 { font-size: 1.12rem; margin: 1.9rem 0 .6rem; color: var(--claro); }

p.intro {
  font-size: var(--t-lead); color: var(--claro-2); line-height: 1.62;
  margin-bottom: 1.6rem;
}

/* Avisos y bloques factuales */
.aviso-lanzamiento {
  background: linear-gradient(var(--vidrio-luz), var(--vidrio-luz)), var(--vidrio);
  box-shadow: inset 0 0 0 1px var(--borde), inset 3px 0 0 var(--oro);
  border-radius: var(--radio);
  padding: .95rem 1.25rem; font-size: .97rem; margin: 1.5rem 0;
}
.bloque-factual {
  background: linear-gradient(var(--vidrio-luz), var(--vidrio-luz)), var(--vidrio);
  box-shadow: inset 0 0 0 1px var(--borde);
  border-radius: var(--radio);
  padding: 1.15rem 1.4rem; margin: 1.7rem 0;
}
.bloque-factual dt {
  font-weight: 600; margin-top: .8rem; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--claro-2);
  font-family: "Sora", sans-serif;
}
.bloque-factual dt:first-of-type { margin-top: 0; }
.bloque-factual dd { margin: .15rem 0 0; }

ul.limpia { padding-left: 1.25rem; }
ul.limpia li { margin: .45rem 0; }
ul.limpia li::marker { color: var(--oro); }

/* Tablas: siempre con scroll propio, nunca desbordan la página.
   El min-width es lo que hace que el scroll sirva de algo: sin él,
   width:100% obliga a la tabla a caber en el contenedor y en el teléfono
   comprime la columna de texto a un par de palabras por renglón en vez de
   dejar que el usuario deslice. */
.tabla-scroll { overflow-x: auto; margin: 1.3rem 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; margin: 1.3rem 0; font-size: .94rem; }
/* El ancho minimo va por tipo de tabla: las de dos columnas (codigo y su
   significado) son legibles en un telefono sin desplazar, y la de precios
   —cinco columnas, uno de ellas un parrafo— necesita bastante mas. Un solo
   valor global obligaba a deslizar de mas en unas y de menos en la otra. */
.tabla-scroll table { margin: 0; min-width: 34rem; }
.tabla-scroll table.ancha { min-width: 56rem; }
/* Las columnas de cifras nunca se parten en dos renglones. */
td.n, th.n { white-space: nowrap; }
th, td {
  border: 1px solid var(--borde); padding: .55rem .8rem;
  text-align: left; vertical-align: top;
}
th { background: rgba(170, 198, 220, .07); font-family: "Sora", sans-serif;
     font-weight: 600; font-size: .88rem; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

/* Código */
code, pre {
  font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .87em;
}
code {
  background: rgba(170, 198, 220, .10); border-radius: 5px;
  padding: .14em .38em; color: var(--oro-luz);
}
pre {
  background: rgba(3, 7, 12, .66); box-shadow: inset 0 0 0 1px var(--borde);
  border-radius: 12px; padding: 1rem 1.15rem; overflow-x: auto;
  line-height: 1.6; color: var(--claro);
}
pre code { background: none; padding: 0; color: inherit; }

/* Tarjetas */
.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem; margin: 1.6rem 0;
}
.tarjeta {
  background: linear-gradient(var(--vidrio-luz), var(--vidrio-luz)), var(--vidrio);
  box-shadow: inset 0 0 0 1px var(--borde);
  border-radius: var(--radio); padding: 1.1rem 1.2rem;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(228, 162, 76, .4); }
.tarjeta h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.tarjeta h3 a { text-decoration: none; }
.tarjeta p { margin: 0; font-size: .92rem; color: var(--claro-2); line-height: 1.55; }

.etiqueta-ok { color: var(--lima); font-weight: 600; }
.etiqueta-no { color: var(--oro-luz); font-weight: 600; }

/* ── Formularios (registro, panel, datos fiscales) ────────────────────── */
label { display: block; font-weight: 600; margin: 1.05rem 0 .3rem; font-size: .95rem; }
input[type=text], input[type=email], input[type=password],
input[type=number], select, textarea {
  width: 100%; padding: .68rem .85rem; border-radius: 10px;
  border: 1px solid var(--borde); background: rgba(3, 7, 12, .55);
  color: var(--claro); font-size: 1rem;
  font-family: "Inter", system-ui, sans-serif;
}
input[type=password], input.mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--oro); outline-offset: 1px; border-color: transparent;
}
input::placeholder { color: rgba(167, 180, 192, .55); }
select option { background: #0d151f; color: var(--claro); }
.ayuda { font-size: .86rem; color: var(--claro-2); margin: .3rem 0 0; }
/* Fila de botones al pie de un formulario. La usaban el registro y el panel
   sin que existiera aqui: el boton quedaba pegado al ultimo campo. */
.fila-btn { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.4rem; }

/* ── Pie: el mismo del sitio ──────────────────────────────────────────── */
footer.sitio { padding: 3.4rem 0 2.4rem; box-shadow: inset 0 1px 0 var(--borde); }
footer.sitio .pie {
  display: flex; flex-wrap: wrap; gap: 26px;
  justify-content: space-between; align-items: flex-start;
}
footer.sitio .marca img { height: 28px; width: auto; display: block; }
footer.sitio .tg { margin-top: 14px; max-width: 32ch; color: var(--claro-2); font-size: .93rem; }
footer.sitio .pie-enlaces { display: flex; gap: 24px; flex-wrap: wrap; max-width: 34rem; }
footer.sitio .pie-enlaces a {
  color: var(--claro-2); text-decoration: none; display: inline-block;
  padding: 7px 0; font-size: .93rem;
}
footer.sitio .pie-enlaces a:hover { color: var(--azul); }
footer.sitio .redes { display: flex; gap: 14px; margin-top: 16px; }
footer.sitio .redes a { color: var(--claro-2); display: block; }
footer.sitio .redes a:hover { color: var(--oro); }
footer.sitio .redes svg { width: 21px; height: 21px; display: block; }
footer.sitio small {
  display: block; width: 100%; margin-top: 2.2rem; padding-top: 1.4rem;
  box-shadow: inset 0 1px 0 var(--borde);
  color: var(--claro-2); font-size: var(--t-micro); line-height: 1.7;
}

:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .pieza { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  #campo { display: none; }
}