/* ADK Radar — sistema visual de marca (copiado de app/static/estilos.css de
   ADK SEO Audit: mismos tokens, para que toda la suite ADK se vea como una
   sola familia. Radar es un servicio Railway aparte, por eso vive su propia
   copia en vez de importarla en runtime). */
:root {
  --paper: #f4f6fa;
  --card: #ffffff;
  --ink: #14223b;
  --ink-2: #1e2f4a;
  --muted: #5b6b82;
  --faint: #8a97ad;
  --line: #e6ebf3;
  --line-2: #d4dbe6;
  --accent: #e96c3a;
  --accent-2: #eb8400;
  --accent-ink: #c9531f;
  --ok: #2ea05a;
  --ok-wash: #e6f4ec;
  --warn: #eb8400;
  --crit: #c02b2b;
  --menor-wash: #eef2f8;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(20, 34, 59, .03), 0 10px 30px rgba(20, 34, 59, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Banda superior con marca ---------- */
.band {
  background: linear-gradient(120deg, #14223b, #1e2f4a 78%);
  color: #fff;
  padding: 26px 0 30px;
  position: relative;
  overflow: hidden;
}
.band::after {
  content: "";
  position: absolute; right: -60px; top: -50px;
  width: 260px; height: 260px;
  background: radial-gradient(circle at 30% 30%, rgba(233, 108, 58, .30), transparent 60%);
}
.band .wrap { position: relative; }
.band img { height: 30px; display: block; margin-bottom: 18px; }
.kicker {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #f0a877; font-weight: 800; margin: 0 0 8px;
}
.band h1 {
  font-size: clamp(26px, 4.4vw, 38px); font-weight: 800;
  letter-spacing: -.025em; margin: 0; max-width: 18ch;
}
.band p.sub { color: #aab7ce; font-size: 15px; margin: 12px 0 0; max-width: 52ch; }
.accentline { height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radio); padding: 26px;
  margin: 22px 0; box-shadow: var(--sombra);
}
.eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 800; margin: 0 0 6px;
  display: flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ""; width: 16px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
h2.sec { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
p.hint { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; }

/* ---------- Formulario ---------- */
.campo { margin-bottom: 16px; }
label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="tel"] {
  width: 100%; font-family: var(--sans); font-size: 15px;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px;
  background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(233, 108, 58, .14);
}
input::placeholder { color: var(--faint); }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.error { color: var(--crit); font-size: 13px; margin-top: 10px; font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff; font-family: var(--sans); font-weight: 800; font-size: 15px;
  padding: 13px 26px; border: none; border-radius: 10px; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; width: 100%;
  box-shadow: 0 6px 16px rgba(233, 108, 58, .25);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(233, 108, 58, .32); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.ghost {
  background: none; color: var(--muted); box-shadow: none; font-weight: 700;
  font-size: 13.5px; padding: 10px; text-decoration: underline;
}
.btn.ghost:hover { transform: none; color: var(--ink); }

/* ---------- Resultado gratis ---------- */
.nivel { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.punto { width: 15px; height: 15px; border-radius: 50%; flex: none; }
.punto.sano { background: var(--ok); box-shadow: 0 0 0 5px var(--ok-wash); }
.punto.vulnerable { background: var(--warn); box-shadow: 0 0 0 5px #fdf0dd; }
.punto.critico { background: var(--crit); box-shadow: 0 0 0 5px #fae4e4; }
.nivel .txt { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.conteo { font-size: 13px; color: var(--muted); margin: 0 0 4px; }

ul.tops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.top {
  display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: start;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px;
  background: #fff;
}
.top .num { font-size: 15px; font-weight: 800; color: var(--faint); }
.top .tt { font-weight: 700; font-size: 14.5px; margin: 0 0 3px; }
.top .tw { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------- CTA de pago ---------- */
.cta {
  background: linear-gradient(125deg, #14223b, #1e2f4a); border: none; color: #fff;
}
.cta .eyebrow { color: #f0a877; }
.cta h2.sec { color: #fff; }
.cta p.hint { color: #b9c4d8; }
/* El campo de competidor es EL diferenciador del pagado: que no pase
   desapercibido (label más grande que el resto del formulario). */
.cta label { color: #ffffff; font-size: 15.5px; margin-bottom: 8px; }
.cta label .opcional { font-size: 13px; font-weight: 600; color: #8ea0bd; }
.cta input { background: rgba(255,255,255,.06); border-color: #34496b; color: #fff; }
.cta input::placeholder { color: #7f8ea8; }
/* FAQ dentro de la tarjeta oscura del CTA: discreta, cerrada por defecto, para
   resolver la objeción sin competir con el botón de compra. */
.faq { margin-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.faq details { border-bottom: 1px solid rgba(255,255,255,.09); }
.faq summary {
  cursor: pointer; list-style: none; padding: 13px 26px 13px 0; position: relative;
  font-size: 14.5px; font-weight: 600; color: #e8edf5;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: #fff; }
.faq details p {
  margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: #b9c4d8;
}
.faq details p b { color: #e8edf5; }
.faq-pie { margin: 16px 0 0; font-size: 12.5px; color: #8ea0bd; line-height: 1.7; }
.faq-pie a { color: #b9c4d8; }
.faq-pie a:hover { color: var(--accent); }

.precio { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 4px; flex-wrap: wrap; }
.precio .amt { font-size: 30px; font-weight: 800; }
.precio .det { font-size: 13px; color: #8ea0bd; }
ul.incluye { list-style: none; padding: 0; margin: 0 0 4px; font-size: 14px; color: #cfd8e6; }
ul.incluye li { padding: 5px 0 5px 24px; position: relative; }
ul.incluye li::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ---------- Estados ---------- */
.oculto { display: none !important; }
.cargando { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.spin {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2.5px solid var(--line-2); border-top-color: var(--accent);
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* Aparición escalonada (un solo momento de deleite, al revelar el resultado). */
.reveal > * { opacity: 0; transform: translateY(8px); animation: sube .5s ease forwards; }
.reveal > *:nth-child(1) { animation-delay: .05s; }
.reveal > *:nth-child(2) { animation-delay: .13s; }
.reveal > *:nth-child(3) { animation-delay: .21s; }
.reveal > *:nth-child(4) { animation-delay: .29s; }
.reveal > *:nth-child(5) { animation-delay: .37s; }
@keyframes sube { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal > * { animation: none; opacity: 1; transform: none; }
  .spin { animation-duration: 2s; }
}

.volver {
  display: inline-block; color: var(--accent-ink); font-size: 14px; font-weight: 700;
  text-decoration: none; padding: 8px 0; transition: color .15s, transform .15s;
}
.volver:hover { color: var(--accent); transform: translateX(-2px); }

footer { text-align: center; color: var(--faint); font-size: 12.5px; padding: 26px 0 40px; line-height: 1.9; }
footer b { color: var(--muted); font-weight: 700; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }
footer .copy { opacity: .8; }

p.consentimiento { font-size: 12.5px; color: var(--faint); text-align: center; margin: 12px 0 0; line-height: 1.6; }
p.consentimiento a { color: var(--muted); }
p.consentimiento a:hover { color: var(--accent); }