/* =============================================================
   Cifra - hoja de estilo unica.
   1 Tokens . 2 Reset . 3 Utilidades . 4 Tipografia . 5 Componentes
   6 Secciones . 7 Aplicacion . 8 Responsive . 9 Movimiento reducido
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ink: #0c1424;
  --ink-soft: #41506b;
  --muted: #6b7789;
  --paper: #ffffff;
  --paper-2: #f5f7fa;
  --paper-3: #eaeef4;
  --line: #dde3ec;
  --line-soft: #eceff5;

  --accent: #1b4ae0;
  --accent-ink: #14349f;
  --accent-soft: #e9effd;

  --ok: #0d7a4f;
  --ok-soft: #e5f3ec;
  --warn: #8f5c0c;
  --warn-soft: #fdf2e0;
  --danger: #a5281f;
  --danger-soft: #fbebea;

  --navy: #0a1425;
  --navy-2: #111f36;
  --navy-line: #22314c;

  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --ancho: 1180px;
  --radio: 12px;
  --radio-s: 8px;
  --sombra: 0 1px 2px rgba(12, 20, 36, .05), 0 8px 24px rgba(12, 20, 36, .06);
  --sombra-alta: 0 2px 6px rgba(12, 20, 36, .08), 0 24px 60px rgba(12, 20, 36, .12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ink: #e8ecf4;
    --ink-soft: #b3bdcf;
    --muted: #8b97ac;
    --paper: #0d1522;
    --paper-2: #111a2a;
    --paper-3: #162033;
    --line: #222f45;
    --line-soft: #1a2537;

    --accent: #7d9dff;
    --accent-ink: #a8bdff;
    --accent-soft: #16203a;

    --ok: #4fc58d;
    --ok-soft: #10261e;
    --warn: #dfa54a;
    --warn-soft: #2a2013;
    --danger: #ef8079;
    --danger-soft: #2b1614;

    --navy: #070d18;
    --navy-2: #0d1626;
    --navy-line: #1d2a42;

    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .45);

    color-scheme: dark;
  }
}

/* =============================================================
   2. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.14; letter-spacing: -0.021em; font-weight: 600; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilidades
   ============================================================= */
.envoltorio { width: min(100% - var(--gutter) * 2, var(--ancho)); margin-inline: auto; }
.estrecho { width: min(100% - var(--gutter) * 2, 760px); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salto {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .6rem 1rem; background: var(--ink); color: var(--paper);
  border-radius: var(--radio-s); font-weight: 500;
}
.salto:focus { top: 1rem; }
.oculto { display: none !important; }
.mono { font-family: var(--mono); font-size: .9em; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }

/* =============================================================
   4. Tipografia
   ============================================================= */
.titular {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  line-height: 1.06;
}
.titular em { font-style: italic; color: var(--accent); }
.titular-2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  letter-spacing: -0.02em;
}
.entradilla {
  font-size: clamp(1.03rem, 1.6vw, 1.19rem);
  color: var(--ink-soft);
  max-width: 62ch;
}
.rotulo {
  font-size: .745rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.apunte { font-size: .87rem; color: var(--muted); }

/* =============================================================
   5. Componentes
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.25rem;
  border-radius: var(--radio-s);
  font-weight: 550;
  font-size: .94rem;
  border: 1px solid transparent;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out),
              color .18s var(--ease-out), transform .18s var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-principal { background: var(--accent); color: #fff; }
.btn-principal:hover { background: var(--accent-ink); }
.btn-contorno { border-color: var(--line); background: var(--paper); color: var(--ink); }
.btn-contorno:hover { border-color: var(--ink-soft); background: var(--paper-2); }
.btn-claro { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
.btn-claro:hover { background: rgba(255, 255, 255, .18); }
.btn-suave { background: var(--paper-3); color: var(--ink); }
.btn-suave:hover { background: var(--line); }
.btn-peligro { color: var(--danger); border-color: var(--line); background: var(--paper); }
.btn-peligro:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-s { padding: .45rem .8rem; font-size: .84rem; }
.btn-ancho { width: 100%; }

.tarjeta {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 1.6rem;
}
.tarjeta-elevada { box-shadow: var(--sombra); }

.marca-demo {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .68rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  font-size: .775rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.barra-demo {
  background: var(--warn-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
  color: var(--warn);
  font-size: .83rem;
  font-weight: 500;
  text-align: center;
  padding: .5rem var(--gutter);
}
.barra-demo strong { font-weight: 700; }

.etiqueta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600;
}
.etiqueta-ok { background: var(--ok-soft); color: var(--ok); }
.etiqueta-warn { background: var(--warn-soft); color: var(--warn); }
.etiqueta-mal { background: var(--danger-soft); color: var(--danger); }
.etiqueta-neutra { background: var(--paper-3); color: var(--ink-soft); }

/* Formularios */
.campo { display: grid; gap: .38rem; }
.campo > label { font-size: .82rem; font-weight: 550; color: var(--ink-soft); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .62rem .78rem;
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
  background: var(--paper);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.campo .pista { font-size: .78rem; color: var(--muted); }

/* Avisos en pagina (nunca alert()) */
.aviso {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem 1rem;
  border-radius: var(--radio-s);
  font-size: .89rem;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.aviso-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, transparent); color: var(--ok); }
.aviso-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 28%, transparent); color: var(--warn); }
.aviso-mal { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 28%, transparent); color: var(--danger); }

#avisador {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 200;
  display: grid; gap: .5rem; max-width: min(92vw, 26rem);
}
.tostada {
  padding: .8rem 1rem;
  border-radius: var(--radio-s);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--sombra-alta);
  font-size: .89rem;
  animation: entrar .28s var(--ease-out);
}
.tostada-mal { background: var(--danger); color: #fff; }
.tostada-ok { background: var(--ok); color: #fff; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* Modal */
dialog.modal {
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  width: min(94vw, 34rem);
  box-shadow: var(--sombra-alta);
}
dialog.modal::backdrop { background: rgba(8, 14, 26, .55); backdrop-filter: blur(2px); }
.modal-cuerpo { padding: 1.7rem; display: grid; gap: 1.05rem; }
.modal-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.modal-pie { display: flex; gap: .6rem; flex-wrap: wrap; }

/* =============================================================
   6. Secciones (pagina publica)
   ============================================================= */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.cabecera-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 0;
}
.logo { display: inline-flex; align-items: center; gap: .55rem; font-weight: 650; letter-spacing: -0.02em; font-size: 1.09rem; }
.logo-marca {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent);
  display: grid; place-items: center;
  color: #fff; font-size: .8rem; font-weight: 700; font-family: var(--serif);
}
.menu { display: flex; align-items: center; gap: 1.5rem; }
.menu a { font-size: .92rem; color: var(--ink-soft); transition: color .15s var(--ease-out); }
.menu a:hover { color: var(--ink); }
.cabecera-acciones { display: flex; align-items: center; gap: .6rem; }

.portada { padding: clamp(3.2rem, 8vw, 6rem) 0 clamp(2.4rem, 5vw, 4rem); }
.portada-grid { display: grid; gap: 2.4rem; align-items: center; }
.portada .titular { margin-bottom: 1.1rem; }
.portada-acciones { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.7rem; }
.portada-nota { margin-top: 1rem; font-size: .85rem; color: var(--muted); }

.confianza {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  padding: 1.1rem 0; margin-top: 2.2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.confianza li { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--ink-soft); list-style: none; }
.confianza svg { flex: none; color: var(--ok); }

.seccion { padding: clamp(3rem, 7vw, 5.2rem) 0; }
.seccion-oscura { background: var(--navy); color: #e9edf5; position: relative; isolation: isolate; }
.seccion-oscura .apunte, .seccion-oscura .entradilla { color: #a9b6cc; }
/* Grano sutil: sin esto el navy queda plano. Muy bajo (5%) para que no se note
   como "efecto", solo como una superficie con algo mas de materia. */
.seccion-oscura::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
.seccion-oscura .rotulo { color: #7f8ea9; }
.seccion-suave { background: var(--paper-2); }
.seccion-cabeza { max-width: 62ch; margin-bottom: 2.4rem; }
.seccion-cabeza .rotulo { margin-bottom: .7rem; }
.seccion-cabeza .titular-2 { margin-bottom: .8rem; }

/* Antes y despues */
.comparativa {
  display: grid; gap: 1.1rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
.comparativa-flecha {
  display: grid; place-items: center;
  color: var(--muted);
}
.comparativa-flecha svg { transform: rotate(90deg); }
.panel-doc, .panel-datos {
  border: 1px solid var(--navy-line);
  border-radius: var(--radio);
  background: var(--navy-2);
  overflow: hidden;
}
.panel-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--navy-line);
  font-size: .8rem; color: #93a2bd; font-weight: 550;
}
.panel-cuerpo { padding: 1.15rem; }

/* La factura de muestra, dibujada en HTML */
.factura-muestra {
  background: #fbfaf7;
  color: #23262d;
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  font-size: .72rem;
  line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transform: rotate(-.5deg);
  font-family: var(--sans);
}
.factura-muestra .fm-cabeza { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #d9d5cb; padding-bottom: .6rem; }
.factura-muestra .fm-nombre { font-weight: 700; font-size: .92rem; letter-spacing: -.01em; }
.factura-muestra .fm-meta { text-align: right; color: #5c6070; }
.factura-muestra table { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.factura-muestra th { text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: #7b8091; border-bottom: 1px solid #d9d5cb; padding-bottom: .25rem; }
.factura-muestra td { padding: .28rem 0; border-bottom: 1px solid #ece9e2; }
.factura-muestra td:last-child, .factura-muestra th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.factura-muestra .fm-totales { margin-left: auto; width: 62%; font-variant-numeric: tabular-nums; }
.factura-muestra .fm-totales div { display: flex; justify-content: space-between; padding: .16rem 0; }
.factura-muestra .fm-total { border-top: 1px solid #23262d; margin-top: .25rem; padding-top: .3rem !important; font-weight: 700; font-size: .82rem; }

/* La ficha de datos extraidos */
.ficha-demo { display: grid; gap: .1rem; }
.ficha-fila {
  display: grid; grid-template-columns: 10.5rem 1fr auto;
  gap: .8rem; align-items: baseline;
  padding: .52rem .2rem;
  border-bottom: 1px solid var(--navy-line);
  font-size: .87rem;
  position: relative;
}
.ficha-fila:last-child { border-bottom: 0; }
.ficha-clave { color: #8fa0bd; font-size: .81rem; }
.ficha-valor { font-weight: 550; color: #f0f4fb; font-variant-numeric: tabular-nums; font-family: var(--mono); letter-spacing: -0.01em; }
.ficha-conf { font-size: .7rem; color: #6f819e; font-variant-numeric: tabular-nums; }
.ficha-fila.revisar .ficha-valor { color: #ffd08a; }
.ficha-fila.revisar .ficha-conf { color: #c9963f; }

/* Variante para fondo claro (la ficha del hero, sobre tarjeta blanca) */
.ficha-demo-clara .ficha-fila { border-color: var(--line); }
.ficha-demo-clara .ficha-clave { color: var(--muted); }
.ficha-demo-clara .ficha-valor { color: var(--ink); }
.ficha-demo-clara .ficha-conf { color: var(--muted); }
.ficha-demo-clara .ficha-fila.revisar .ficha-valor { color: var(--warn); }
.ficha-demo-clara .ficha-fila.revisar .ficha-conf { color: var(--warn); }

/* Efecto de firma: barrido de lectura. Se dispara una vez, cuando la ficha
   entra en pantalla — dramatiza justo lo que hace el producto (leer el
   documento al instante), no es decoracion suelta. Respeta reduced-motion:
   sin JS que la active, las filas se ven siempre en su estado final. */
.ficha-demo.escaneo-activo .ficha-fila:not(.leida) { opacity: 0; transform: translateX(-6px); }
.ficha-demo.escaneo-activo .ficha-fila.leida {
  opacity: 1; transform: none;
  transition: opacity .38s var(--ease-out), transform .38s var(--ease-out);
}
.ficha-demo.escaneo-activo .ficha-fila.leida::before {
  content: ""; position: absolute; inset: 0 -0.4rem;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  animation: barridoLectura .55s var(--ease-out);
  pointer-events: none;
}
@keyframes barridoLectura { from { opacity: 1; } to { opacity: 0; } }

/* Pasos */
.pasos { display: grid; gap: 1.4rem; counter-reset: paso; }
.paso { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.paso-num {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
  font-weight: 650; font-size: .88rem;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.paso h3 { font-size: 1.03rem; margin-bottom: .25rem; }
.paso p { font-size: .92rem; color: var(--ink-soft); }

/* Precios */
.precios { display: grid; gap: 1.15rem; align-items: start; }
.plan {
  display: flex; flex-direction: column; gap: 1.05rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 1.7rem;
  position: relative;
}
.plan-destacado {
  border-color: var(--accent);
  box-shadow: var(--sombra);
}
.plan-cinta {
  position: absolute; top: -.72rem; left: 1.7rem;
  background: var(--accent); color: #fff;
  font-size: .71rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px;
}
.plan h3 { font-size: 1.08rem; }
.plan-precio { display: flex; align-items: baseline; gap: .35rem; }
.plan-precio b { font-size: 2.5rem; font-weight: 650; letter-spacing: -.03em; font-family: var(--serif); }
.plan-precio span { color: var(--muted); font-size: .9rem; }

/* Inclinacion 3D al pasar el raton: la tarjeta sigue el cursor, y el precio
   se adelanta un poco (translateZ) para que la profundidad se note de verdad,
   no solo el giro. Solo en dispositivos con raton (hover:hover) — en movil no
   hay cursor que seguir, asi que ahi no se activa. */
.plan.has-tilt {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-soft), box-shadow .3s var(--ease-out);
}
.plan.has-tilt:hover { transition-duration: .12s, .3s; box-shadow: var(--sombra-alta); }
.plan.has-tilt .plan-precio, .plan.has-tilt .plan-cinta { transform: translateZ(38px); }
.plan.has-tilt .btn-ancho { transform: translateZ(22px); }
.plan-creditos {
  padding: .55rem .8rem; border-radius: var(--radio-s);
  background: var(--paper-2); border: 1px solid var(--line-soft);
  font-size: .87rem; font-weight: 550;
}
.plan ul { list-style: none; display: grid; gap: .52rem; font-size: .89rem; color: var(--ink-soft); }
.plan li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .5rem; align-items: start; }
.plan li svg { margin-top: .3rem; color: var(--ok); flex: none; }
.plan .btn { margin-top: auto; }

.tabla-precios-nota {
  margin-top: 1.6rem; font-size: .86rem; color: var(--muted);
  display: grid; gap: .35rem;
}

/* Preguntas */
.faq { display: grid; gap: .1rem; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}
.faq summary {
  cursor: pointer; font-weight: 550; font-size: 1rem;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--muted); font-size: 1.2rem; line-height: 1; flex: none;
  transition: transform .2s var(--ease-out);
}
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin-top: .65rem; color: var(--ink-soft); font-size: .93rem; max-width: 72ch; }

/* Cierre */
.cierre { text-align: center; }
.cierre .portada-acciones { justify-content: center; }

/* Pie */
.pie {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: 2.6rem 0 1.8rem;
  font-size: .88rem;
}
.pie-grid { display: grid; gap: 1.8rem; }
.pie-col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .7rem; font-weight: 650; }
.pie-col ul { list-style: none; display: grid; gap: .42rem; }
.pie-col a { color: var(--ink-soft); }
.pie-col a:hover { color: var(--accent); text-decoration: underline; }
.pie-legal {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: space-between;
  color: var(--muted); font-size: .82rem;
}

/* Documentos legales */
.doc-legal { padding: clamp(2.4rem, 6vw, 4rem) 0 4rem; }
.doc-legal h1 { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: .5rem; }
.doc-legal h2 { font-size: 1.15rem; margin: 2.2rem 0 .6rem; }
.doc-legal h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.doc-legal p, .doc-legal li { color: var(--ink-soft); font-size: .95rem; }
.doc-legal ul, .doc-legal ol { margin: .6rem 0 .6rem 1.2rem; display: grid; gap: .35rem; }
.doc-legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .89rem; }
.doc-legal th, .doc-legal td { text-align: left; padding: .6rem .7rem; border: 1px solid var(--line); vertical-align: top; }
.doc-legal th { background: var(--paper-2); font-weight: 600; }

/* =============================================================
   7. Aplicacion (app.html, cuenta.html, entrar.html)
   ============================================================= */
body.modo-app { background: var(--paper-2); }

.barra-app {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.barra-app-fila {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .7rem 0;
}
.barra-app-acciones { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.pastilla-creditos {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-weight: 600; font-size: .87rem; font-variant-numeric: tabular-nums;
  transition: transform .3s var(--ease-out);
}
.pastilla-creditos.baja { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.pastilla-creditos.vacia { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.pastilla-creditos.late { transform: scale(1.12); }

.taller { padding: 1.3rem 0 3rem; display: grid; gap: 1.1rem; }

/* Zona de subida */
.soltador {
  border: 1.5px dashed var(--line);
  border-radius: var(--radio);
  background: var(--paper);
  padding: clamp(1.8rem, 5vw, 3rem);
  text-align: center;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.soltador.encima { border-color: var(--accent); background: var(--accent-soft); }
.soltador h1 { font-size: 1.2rem; font-weight: 600; margin-bottom: .4rem; }
.soltador p { color: var(--ink-soft); font-size: .92rem; max-width: 46ch; margin: 0 auto; }
.soltador .btn { margin-top: 1.15rem; }
.soltador-icono { color: var(--muted); margin: 0 auto .9rem; }

/* Cola de documentos */
.cola { display: grid; gap: .5rem; }
.cola-fila {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .8rem; align-items: center;
  padding: .68rem .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
  font-size: .89rem;
}
.cola-fila.activa { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cola-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cola-icono { color: var(--muted); flex: none; }

/* El taller: documento a un lado, ficha al otro */
.taller-grid { display: grid; gap: 1.1rem; align-items: start; }

.visor {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  overflow: hidden;
  position: sticky; top: 4.4rem;
}
.visor-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .6rem .85rem; border-bottom: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-soft);
}
.visor-lienzo {
  background: var(--paper-3);
  display: grid; place-items: center;
  padding: 1rem;
  min-height: 22rem;
  max-height: 74vh;
  overflow: auto;
}
.visor-lienzo canvas, .visor-lienzo img {
  max-width: 100%;
  box-shadow: var(--sombra);
  border-radius: 4px;
  background: #fff;
}
.visor-pies { display: flex; align-items: center; gap: .5rem; justify-content: center; padding: .5rem; border-top: 1px solid var(--line); font-size: .84rem; }

.ficha {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  overflow: hidden;
}
.ficha-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--line);
}
.ficha-cabeza h2 { font-size: 1.02rem; }
.ficha-campos { padding: .4rem 1.1rem 1.1rem; }
.fila-campo {
  display: grid; grid-template-columns: 11rem 1fr;
  gap: .6rem; align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.fila-campo:last-of-type { border-bottom: 0; }
.fila-campo > label { font-size: .84rem; color: var(--ink-soft); font-weight: 500; }
.fila-campo .entrada { display: flex; align-items: center; gap: .5rem; }
.fila-campo input, .fila-campo select {
  width: 100%; padding: .48rem .6rem;
  border: 1px solid transparent; border-radius: var(--radio-s);
  background: var(--paper-2);
  font-variant-numeric: tabular-nums;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.fila-campo input:hover { background: var(--paper-3); }
.fila-campo input:focus, .fila-campo select:focus {
  outline: none; background: var(--paper);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.fila-campo.dudoso input, .fila-campo.dudoso select {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.fila-campo.editado input { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.marca-conf {
  font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums;
  flex: none; width: 2.6rem; text-align: right;
}
.fila-campo.dudoso .marca-conf { color: var(--warn); font-weight: 600; }
.fila-campo.editado .marca-conf { color: var(--ok); font-weight: 600; }

.lineas-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: .5rem; }
.lineas-tabla th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: .4rem .5rem; border-bottom: 1px solid var(--line);
}
.lineas-tabla td { padding: .35rem .5rem; border-bottom: 1px solid var(--line-soft); }
.lineas-tabla td:last-child, .lineas-tabla th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.ficha-pie {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  padding: .9rem 1.1rem; border-top: 1px solid var(--line); background: var(--paper-2);
}

/* Estados de trabajo */
.trabajando { display: grid; gap: .9rem; place-items: center; padding: 3rem 1rem; text-align: center; }
.girador {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Panel de cuenta */
.cuenta-grid { display: grid; gap: 1.1rem; align-items: start; }
.dato-grande { display: grid; gap: .2rem; }
.dato-grande b { font-size: 1.9rem; font-weight: 650; font-family: var(--serif); letter-spacing: -.02em; }
.barra-progreso { height: 7px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.barra-progreso i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .5s var(--ease-out); }
.barra-progreso.baja i { background: var(--warn); }
.barra-progreso.vacia i { background: var(--danger); }

.copiable {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radio-s);
  background: var(--paper-2);
  font-family: var(--mono); font-size: .82rem;
  overflow: hidden;
}
.copiable span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.tabla-datos { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tabla-datos th {
  text-align: left; font-size: .73rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: .5rem .6rem; border-bottom: 1px solid var(--line); font-weight: 650;
}
.tabla-datos td { padding: .55rem .6rem; border-bottom: 1px solid var(--line-soft); }
.tabla-datos tr:last-child td { border-bottom: 0; }
.tabla-datos .num { text-align: right; }
.tabla-scroll { overflow-x: auto; }

/* Entrar / registrarse */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 2rem var(--gutter); }
.acceso-caja { width: min(100%, 26rem); display: grid; gap: 1.15rem; }
.pestanas { display: flex; gap: .3rem; padding: .25rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radio-s); }
.pestanas button {
  flex: 1; padding: .5rem; border-radius: 6px; font-size: .89rem; font-weight: 550; color: var(--muted);
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.pestanas button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--sombra); }

/* Revelados suaves */
.revelar { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.revelar.visible { opacity: 1; transform: none; }
/* Las tarjetas de precio tambien llevan la inclinacion 3D (mas arriba en este
   archivo): sin este empate por especificidad, esta regla (por ir despues)
   les dejaria el transform en "none" en cuanto terminaran de aparecer. */
.plan.has-tilt.revelar.visible { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 720px) {
  .comparativa { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .comparativa-flecha svg { transform: none; }
  .pie-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .cuenta-grid { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2rem; }
}

@media (min-width: 960px) {
  .portada-grid { grid-template-columns: 1.05fr .95fr; gap: 3.2rem; }
  .precios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .taller-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .pasos { grid-template-columns: repeat(4, 1fr); }
  .cuenta-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 860px) {
  .menu { display: none; }
  .visor { position: static; }
}

@media (max-width: 560px) {
  .fila-campo { grid-template-columns: 1fr; gap: .25rem; }
  .cola-fila { grid-template-columns: auto 1fr auto; }
  .cabecera-acciones .btn-contorno { display: none; }
}

/* =============================================================
   9. Movimiento reducido (solo lo intrusivo)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .girador { animation-duration: 1.6s; }
}

/* ---------- Contraseña: ver/ocultar y medidor de fuerza ---------- */
.campo-clave { position: relative; display: flex; align-items: center; }
.campo-clave input { width: 100%; padding-right: 4.2rem; }
.ver-clave {
  position: absolute; right: .5rem;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: .8rem; font-weight: 550;
  padding: .35rem .5rem; border-radius: 6px;
}
.ver-clave:hover { color: var(--ink); background: var(--paper-2); }
.ver-clave:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fuerza-clave {
  height: 4px; border-radius: 99px; background: var(--line);
  margin: .5rem 0 .35rem; overflow: hidden;
}
.fuerza-clave i {
  display: block; height: 100%; width: 0;
  border-radius: 99px; background: var(--danger);
  transition: width .25s var(--ease-out), background .25s var(--ease-out);
}
.fuerza-clave[data-nivel="2"] i { background: var(--warn); }
.fuerza-clave[data-nivel="3"] i { background: var(--ok); }

/* =============================================================
   10. Minuta: lo que Cifra no tenia
   Casilla de autorizacion, logo con firma, contrato de muestra,
   semaforo de riesgos con su cita y calendario de vencimientos.
   ============================================================= */

/* Casilla de autorizacion del registro (CUMPLIMIENTO.md § 1). Que vaya sin
   premarcar lo decide el HTML; aqui solo se le da forma. El texto queda al
   lado de la casilla y todo el bloque es clicable, porque es un <label>. */
.casilla {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
  font-size: .86rem; line-height: 1.5; color: var(--ink-soft);
  cursor: pointer;
}
.casilla input[type="checkbox"] {
  width: 1.1rem; height: 1.1rem; margin-top: .16rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.casilla a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Logo con la firma de la marca debajo, para que "Okana Digital" se vea en la
   cabecera sin robar ancho en un movil de 375 px. */
.logo-texto { display: grid; line-height: 1.12; }
.logo-sub { font-size: .66rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }

/* El contrato de muestra, dibujado en HTML (pareja de .factura-muestra) */
.contrato-muestra {
  background: #fbfaf7;
  color: #23262d;
  border-radius: 6px;
  padding: 1.15rem 1.25rem;
  font-size: .74rem;
  line-height: 1.55;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transform: rotate(-.4deg);
  display: grid; gap: .55rem;
}
.contrato-muestra .cm-titulo {
  text-align: center; font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid #d9d5cb; padding-bottom: .55rem;
}
.contrato-muestra .cm-partes { color: #5c6070; }
.contrato-muestra b { color: #23262d; }

/* La ficha de un contrato: como .ficha-demo, sin columna de seguridad y con
   valores en texto normal (son frases, no importes). */
.ficha-contrato .ficha-fila { grid-template-columns: 8.5rem 1fr; }
.ficha-contrato .ficha-valor { font-family: var(--sans); letter-spacing: 0; }

.panel-sub {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #7f8ea9;
  margin: 1.4rem 0 .65rem;
}

/* Semaforo de riesgos. El color va en el borde y en la luz, nunca solo en el
   texto: el nivel se lee tambien en palabras ("Rojo"), para quien no
   distingue colores. Tonos fijos porque tienen que verse igual sobre la
   tarjeta blanca y sobre el panel oscuro. */
.semaforo { display: grid; gap: .6rem; }
.riesgo {
  display: grid; gap: .4rem;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radio-s);
  background: var(--paper);
}
.riesgo-rojo { border-left-color: #d64236; }
.riesgo-amarillo { border-left-color: #d9961a; }
.riesgo-verde { border-left-color: #1f9d63; }
.riesgo-cabeza { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; font-size: .89rem; line-height: 1.3; }
.riesgo-nivel { font-size: .68rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.luz { width: .62rem; height: .62rem; border-radius: 50%; flex: none; background: var(--muted); }
.luz-rojo { background: #d64236; }
.luz-amarillo { background: #d9961a; }
.luz-verde { background: #1f9d63; }
.riesgo-cita {
  margin: 0;
  padding-left: .7rem;
  border-left: 2px solid var(--line);
  font-size: .83rem; font-style: italic; color: var(--ink-soft);
}
.riesgo-porque { font-size: .83rem; color: var(--ink-soft); }
.conteo { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Calendario de vencimientos */
.fechas { display: grid; gap: .6rem; padding: 0; list-style: none; }
.fecha-fila { display: grid; grid-template-columns: 3.3rem 1fr; gap: .8rem; align-items: start; }
.fecha-dia {
  display: grid; place-items: center;
  padding: .3rem 0;
  border: 1px solid var(--line); border-radius: var(--radio-s);
  background: var(--paper);
  line-height: 1.1; text-align: center;
}
.fecha-dia b { font-size: 1.15rem; font-weight: 650; font-family: var(--serif); }
.fecha-dia span { font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fecha-texto { font-size: .86rem; }
.fecha-texto small { display: block; font-size: .78rem; color: var(--muted); }

/* Las mismas piezas sobre el panel oscuro del antes/despues */
.panel-datos .riesgo, .panel-datos .fecha-dia { background: rgba(255, 255, 255, .03); border-color: var(--navy-line); }
.panel-datos .riesgo-cabeza, .panel-datos .fecha-texto, .panel-datos .fecha-dia b { color: #f0f4fb; }
.panel-datos .riesgo-cita { border-left-color: var(--navy-line); color: #c3cde0; }
.panel-datos .riesgo-porque, .panel-datos .riesgo-nivel,
.panel-datos .fecha-texto small, .panel-datos .fecha-dia span { color: #8fa0bd; }

/* Descargo legal: visible, nunca en letra pequena (CUMPLIMIENTO.md § 2) */
.descargo { margin-top: 1.4rem; font-size: .92rem; color: var(--ink-soft); max-width: 72ch; }
.tarjeta-fila { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: 1rem; }
.tarjeta-fila .rotulo { margin: 0; }
.demo-titulo { font-weight: 600; font-size: .95rem; margin-bottom: .7rem; }
.proximo-aviso {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: .9rem; padding: .7rem .85rem;
  border-radius: var(--radio-s);
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: .85rem;
}
.proximo-aviso svg { flex: none; margin-top: .15rem; }

.plan-creditos small { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); }
.panel-cabeza .etiqueta { white-space: nowrap; }
/* Un boton de ancho completo ya ocupa toda la fila: si el texto no cabe (320 px),
   que parta linea en vez de ensanchar la tarjeta y sacarla de la pantalla. */
.btn-ancho { white-space: normal; text-align: center; }

/* Antes/despues con un contrato: la ficha es mucho mas larga que el extracto,
   asi que el extracto va arriba y se queda a la vista mientras se lee el
   semaforo, en vez de flotar centrado en mitad de un hueco. */
@media (min-width: 720px) {
  .comparativa-contrato { align-items: start; }
  .comparativa-contrato .panel-doc { position: sticky; top: 5rem; }
  .comparativa-contrato .comparativa-flecha { position: sticky; top: 16rem; }
}
@media (max-width: 560px) {
  .ficha-contrato .ficha-fila { grid-template-columns: 1fr; gap: .1rem; }
}

/* Medidor de fuerza de la contrasena: en Cifra la barra se quedaba en ancho 0
   y solo cambiaba de color, asi que nunca se veia. Aqui el nivel da el ancho.
   El nivel 0 se queda sin barra a proposito: clave.js pone "0" tambien con el
   campo vacio, y ahi no debe salir nada. El motivo va escrito en la pista. */
.fuerza-clave[data-nivel="1"] i { width: 40%; }
.fuerza-clave[data-nivel="2"] i { width: 72%; }
.fuerza-clave[data-nivel="3"] i { width: 100%; }

/* Formularios de entrar / registro / recuperar / restablecer */
.acceso-form { display: grid; gap: .95rem; margin-top: 1.2rem; }
.acceso-form .pista a, .acceso-pie a { color: var(--accent); }
.acceso-caja .logo { justify-content: center; }
.acceso-caja .logo-texto { text-align: left; }

/* La barra de la app (app.html, cuenta.html) no envuelve por si sola a 375px:
   con boton principal + pastilla de creditos + Salir no cabe en una fila y
   .barra-app-acciones no puede encogerse por debajo del texto de sus botones
   (.btn tiene white-space:nowrap). Que la fila entera envuelva es mas simple
   y mas legible que truncar texto o encoger botones. */
@media (max-width: 480px) {
  .barra-app-fila { flex-wrap: wrap; row-gap: .5rem; }
  .barra-app-acciones { width: 100%; justify-content: flex-start; }
}

/* .taller es un grid de una sola columna en movil. Sin esto, el "tamano
   minimo automatico" de un hijo con contenido que no envuelve (una fila de
   tabla ancha, un boton con white-space:nowrap) hace crecer la columna entera,
   y de ahi todo lo demas del panel se estira con ella. Ver cuenta.html. */
.taller > * { min-width: 0; }

/* "Cerrar mi cuenta para siempre" se sale 5px a 320px con el nowrap de .btn.
   Un boton de peligro no necesita quedarse en una sola linea. */
.btn-peligro { white-space: normal; text-align: center; }