/* ORION Diagnóstico — estilos.
 * Sin frameworks, sin CDN, sin fuentes externas: carga instantáneo y funciona offline.
 *
 * Criterio de diseño (rehecho 2026-10-10 por pedido de Rodrigo): la versión
 * anterior era oscura con acentos neón y degradados, y se notaba "hecha con IA".
 * Esta es clara, sobria y tipográfica: papel, una sola tinta de acento usada con
 * cuentagotas, líneas finas en vez de cajas, y nada de emojis ni sombras.
 */

/* ── PALETA ───────────────────────────────────────────────────────────────
 * Derivada del logo oficial, no elegida al azar: al muestrear
 * assets/logo-iaorion.jpeg los dominantes son negro y azules marinos
 * (#001830, #003078, #0048a8). De ahí sale el acento.
 * Azul marino + hueso cálido + bronce apagado: combinación de impresión
 * clásica. Nada de degradados, neones ni violeta-cian de plantilla.
 * El blanco puro quedaba muerto → el fondo es hueso y las tarjetas blancas. */
:root {
  --fondo:     #ecebe6;     /* hueso cálido: el papel de atrás, nunca blanco */
  --papel:     #ffffff;     /* las tarjetas, que así sí resaltan */
  --papel-2:   #f5f4f0;
  --tinta:     #131722;     /* casi negro con una gota de azul del logo */
  --tinta-2:   #5a606d;
  --linea:     #e0ded7;
  --linea-2:   #cbc8bf;
  --acento:    #16386b;     /* el azul marino de la marca, bajado de brillo */
  --acento-su: #e9edf4;     /* el mismo azul, lavado, para fondos */
  --alerta:    #8a6a2f;     /* bronce apagado: el complemento del marino */
  --sombra:    0 1px 2px rgba(19,23,34,.05), 0 1px 10px rgba(19,23,34,.045);
  --ancho:     660px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--ancho); margin: 0 auto; padding: 28px 22px 80px; }

/* ── cabecera ─────────────────────────────────────────────── */
.top { display: flex; align-items: center; gap: 11px; padding-bottom: 38px; }
.top-marca {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.top-marca:hover .marca { color: var(--tinta); }

/* aviso de sesión retomada */
.reanudado {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  background: var(--acento-su); border: 1px solid var(--linea);
  border-radius: 5px; padding: 10px 14px; margin-bottom: 22px;
  font-size: 14px; color: var(--tinta-2);
}
.reanudado button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--acento);
  text-decoration: underline;
}
.logo {
  width: 34px; height: 34px; border-radius: 50%;    /* pedido de Rodrigo */
  object-fit: cover; flex: 0 0 auto;
}
.marca { font-weight: 600; letter-spacing: .13em; font-size: 12.5px; color: var(--tinta-2); }
.top-sp { flex: 1; }

.lang { display: flex; gap: 2px; }
.lang button {
  background: none; border: 0; color: var(--tinta-2); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 4px;
}
.lang button:hover { color: var(--tinta); }
.lang button[aria-pressed="true"] { color: var(--tinta); background: var(--papel-2); }

/* ── textos ───────────────────────────────────────────────── */
h1 { font-size: clamp(28px, 5.6vw, 40px); line-height: 1.12; margin: 0 0 14px; letter-spacing: -.025em; font-weight: 600; }
h2 { font-size: clamp(21px, 3.4vw, 26px); line-height: 1.3; margin: 0 0 12px; letter-spacing: -.015em; font-weight: 600; }
h3 { font-size: 17px; margin: 0 0 7px; font-weight: 600; letter-spacing: -.01em; }
p  { margin: 0 0 16px; color: var(--tinta-2); }
.lead { font-size: 18.5px; line-height: 1.55; color: var(--tinta-2); }

.badge {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .05em;
  color: var(--acento); margin-bottom: 18px; text-transform: uppercase;
}

/* ── progreso: una línea fina, nada más ──────────────────── */
.prog { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; font-size: 12.5px; color: var(--tinta-2); letter-spacing: .02em; }
.prog-barra { flex: 1; height: 2px; background: var(--linea); }
.prog-fill { display: block; height: 100%; background: var(--acento); transition: width .25s ease; }

/* ── nichos: agrupados en tarjetas.
 * Antes era una lista de 16 renglones con líneas finas y se leía como una
 * hoja plana de texto. Ahora: grupos con título + tarjetas en dos columnas. */
.grupo { margin-top: 28px; }
.grupo-t {
  font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-2); margin: 0 0 11px; padding-bottom: 7px;
  border-bottom: 1px solid var(--linea-2);
}
.nichos { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 540px) { .nichos { grid-template-columns: 1fr; } }
.nicho {
  display: block; width: 100%; text-align: left;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 5px;
  box-shadow: var(--sombra);
  padding: 13px 14px; cursor: pointer; color: var(--tinta); font: inherit;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.nicho:hover {
  border-color: var(--acento); transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(22,25,30,.07), 0 4px 16px rgba(22,25,30,.06);
}
.nicho-t { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.nicho-s { display: block; font-size: 13.5px; color: var(--tinta-2); margin-top: 3px; line-height: 1.4; }

/* ── opciones ─────────────────────────────────────────────── */
.ops { margin: 22px 0 28px; display: flex; flex-direction: column; gap: 8px; }
.op {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 5px;
  box-shadow: var(--sombra);
  padding: 13px 15px; cursor: pointer; color: var(--tinta); font: inherit; font-size: 16.5px;
  transition: border-color .14s ease, background .14s ease;
}
.op:hover { border-color: var(--linea-2); background: var(--papel-2); }
.op[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-su); }
.op-marca {
  width: 17px; height: 17px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%;
  border: 1.5px solid var(--linea-2); position: relative; transition: border-color .14s;
}
.op.multi .op-marca { border-radius: 3px; }
.op:hover .op-marca { border-color: var(--acento); }
.op[aria-pressed="true"] .op-marca { border-color: var(--acento); background: var(--acento); }
.op[aria-pressed="true"] .op-marca::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}
.ayuda { font-size: 14.5px; color: var(--tinta-2); margin: -6px 0 2px; }

textarea, input[type=text], input[type=email], input[type=tel] {
  width: 100%; background: #fff; color: var(--tinta);
  border: 1px solid var(--linea-2); border-radius: 3px; padding: 11px 12px;
  font: inherit; font-size: 16px;
}
textarea { min-height: 92px; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
label.campo { display: block; margin: 0 0 14px; font-size: 14px; color: var(--tinta-2); }
label.campo span { display: block; margin-bottom: 5px; }

/* ── botones ──────────────────────────────────────────────── */
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn {
  background: var(--tinta); color: var(--papel); border: 1px solid var(--tinta);
  border-radius: 3px; font: inherit; font-weight: 600; font-size: 15.5px;
  padding: 11px 20px; cursor: pointer; text-decoration: none; display: inline-block;
  transition: opacity .14s;
}
.btn:hover { opacity: .85; }
.btn[disabled] { opacity: .28; cursor: not-allowed; }
.btn-ghost { background: none; color: var(--tinta); border-color: var(--linea-2); font-weight: 500; }
.btn-ghost:hover { border-color: var(--tinta); opacity: 1; }
.btn-wa { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-chico { font-size: 14px; padding: 8px 14px; }

/* ── resultado ────────────────────────────────────────────── */
.numeros {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 6px;
  box-shadow: var(--sombra); overflow: hidden;
  margin: 24px 0 26px;
}
@media (max-width: 460px) {
  .numeros { grid-template-columns: 1fr; }
  .num + .num { border-top: 1px solid var(--linea); border-left: 0 !important; }
}
.num { padding: 24px 20px 22px; }
.num + .num { border-left: 1px solid var(--linea); }
.num-v { font-size: clamp(36px, 8vw, 46px); font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.num-l { font-size: 14.5px; font-weight: 600; margin-top: 9px; }
.num-p { font-size: 13px; color: var(--tinta-2); margin-top: 2px; }

.tarjeta {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 6px;
  box-shadow: var(--sombra); padding: 18px 20px 20px; margin: 12px 0;
}
.tarjeta.destacada {
  border-color: var(--acento); background: var(--acento-su);
  padding: 22px; margin: 22px 0;
}
.tarjeta.destacada h3 { font-size: 21px; }
/* La escena concreta se lee como una cita, no como otro párrafo de venta */
.escena {
  border-left: 2px solid var(--linea-2); padding-left: 14px;
  color: var(--tinta); font-size: 16px; margin-bottom: 18px;
}
.etiqueta {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 9px;
}
.chip {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--alerta); border: 1px solid #ded0b2; border-radius: 3px;
  padding: 1px 7px; margin-left: 8px; vertical-align: middle; text-transform: uppercase;
}
.sec { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 540px) { .sec { grid-template-columns: 1fr; } }
.sec .tarjeta { margin: 0; padding: 16px 17px 18px; }
.sec h3 { font-size: 16px; }
.sec p { font-size: 14.5px; margin-bottom: 12px; }

.regalos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.regalo {
  display: inline-block; text-decoration: none; color: var(--tinta);
  border: 1px solid var(--linea-2); border-radius: 3px;
  padding: 7px 13px; font-size: 14.5px;
}
.regalo:hover { border-color: var(--acento); color: var(--acento); }

.detalle { margin: 4px 0 22px; }
.detalle summary { cursor: pointer; font-size: 14.5px; color: var(--acento); }
.detalle table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14.5px; }
.detalle td { padding: 8px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); vertical-align: top; }
.detalle td:last-child { text-align: right; white-space: nowrap; color: var(--tinta); font-weight: 600; }

.aviso {
  font-size: 14.5px; color: var(--tinta-2);
  border-left: 2px solid var(--linea-2); padding: 2px 0 2px 14px; margin: 18px 0;
}
.error { color: #9a2020; font-size: 14.5px; margin: 8px 0 0; }
.nota { font-size: 13px; color: var(--tinta-2); margin-top: 14px; }
.pie { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--tinta-2); }
.pie a { color: var(--tinta-2); }

/* ── impresión = el PDF que se descarga ───────────────────── */
@media print {
  .lang, .no-print { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .tarjeta, .num { break-inside: avoid; }
  .tarjeta.destacada { background: none; }
  a { color: var(--tinta); }
}