:root {
  --bg: #071427;
  --bg-2: #0b1f3a;
  --panel: #102846;
  --panel-soft: #153354;
  --text: #eef6ff;
  --muted: #b7c7da;
  --line: rgba(255,255,255,.14);
  --accent: #39c7ff;
  --accent-2: #7de3ff;
  --ok: #37d68a;
  --warn: #ffd166;
  --danger: #ff6b6b;
  --critical: #ff4d8d;
  --shadow: 0 24px 80px rgba(0,0,0,.32);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(57,199,255,.15), transparent 36rem),
    radial-gradient(circle at bottom right, rgba(125,227,255,.08), transparent 34rem),
    var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--accent-2); }
a:hover { color: white; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.skip-link {
  position: absolute;
  left: -999px;
  top: 1rem;
  background: white;
  color: #071427;
  padding: .75rem 1rem;
  border-radius: 999px;
  z-index: 10;
}
.skip-link:focus { left: 1rem; }

.hero {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(120deg, rgba(255,255,255,.04), transparent);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: center;
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--accent-2);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
  font-weight: 800;
}
h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.05em;
}
.hero-subtitle {
  margin: 18px 0 0;
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  color: var(--accent-2);
  font-weight: 800;
}

.hero-reassure {
  display: inline-flex;
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(55,214,138,.32);
  background: rgba(55,214,138,.08);
  color: #baf7d8;
  font-weight: 850;
}

.rector {
  display: inline-flex;
  margin: 22px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  font-weight: 800;
}
.hero-copy { max-width: 720px; color: var(--muted); font-size: 1.08rem; }
.hero-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  text-align: center;
}
.shield {
  width: 110px;
  height: 110px;
  border: 2px solid rgba(125,227,255,.5);
  border-radius: 30px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  font-size: 4rem;
  font-weight: 900;
  color: white;
  text-shadow: 0 0 24px rgba(57,199,255,.9);
}
.hero-card p { color: var(--muted); margin: 0 0 6px; }
.hero-card strong { font-size: 1.1rem; }

.main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  padding: 32px 0 56px;
}
.panel, .side-panel, .result-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16,40,70,.76);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.panel { padding: clamp(18px, 4vw, 34px); }
.step {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.step:first-child { padding-top: 0; }
.step-heading {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.step-number {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(57,199,255,.16);
  border: 1px solid rgba(125,227,255,.42);
  color: white;
  font-weight: 900;
}
h2 { margin: 0; font-size: clamp(1.18rem, 2.3vw, 1.65rem); }
.step-heading p { margin: 5px 0 0; color: var(--muted); }

.quick-reassure {
  display: inline-flex;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(55,214,138,.32);
  background: rgba(55,214,138,.08);
  color: #baf7d8 !important;
  font-weight: 850;
}


.option-grid, .chip-grid, .signal-grid {
  display: grid;
  gap: 12px;
}
.big-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option-card, .chip, .signal {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  user-select: none;
}
.option-card:hover, .chip:hover, .signal:hover {
  transform: translateY(-1px);
  border-color: rgba(125,227,255,.48);
  background: rgba(255,255,255,.075);
}
.option-card input, .chip input, .signal input, .acceptance input { accent-color: var(--accent); }
.option-card:has(input:checked), .chip:has(input:checked), .signal:has(input:checked) {
  border-color: var(--accent-2);
  background: rgba(57,199,255,.14);
  box-shadow: 0 0 0 3px rgba(57,199,255,.08) inset;
}
.warning-choice:has(input:checked), .critical-signal:has(input:checked) {
  border-color: rgba(255,77,141,.9);
  background: rgba(255,77,141,.13);
}
.chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.capture-step { background: rgba(57,199,255,.045); margin: 0 -12px; padding: 28px 12px; border-radius: 20px; }
textarea {
  width: 100%;
  min-height: 210px;
  resize: vertical;
  border: 2px solid rgba(125,227,255,.34);
  border-radius: 20px;
  padding: 18px;
  background: rgba(3,11,22,.72);
  color: white;
  font: inherit;
  font-size: 1.04rem;
  outline: none;
  box-shadow: 0 0 0 4px rgba(57,199,255,.05);
}
textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 5px rgba(57,199,255,.14);
}
textarea::placeholder { color: rgba(238,246,255,.54); }
.textarea-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  color: var(--muted);
  font-size: .92rem;
}
.sensitive-note {
  margin-top: 14px;
  border: 1px solid rgba(255,209,102,.38);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,209,102,.08);
}
.sensitive-note summary {
  cursor: pointer;
  font-weight: 800;
  color: #ffe4a3;
}
.sensitive-note p { color: var(--muted); margin: 10px 0 0; }

.legal-box {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}
.legal-box h2 { font-size: 1.05rem; margin-bottom: 10px; }
.acceptance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 750;
}
.legal-box p { color: var(--muted); margin: 10px 0 0; font-size: .94rem; }
.form-actions { padding-top: 22px; text-align: center; }
.primary-button, .whatsapp-button, .secondary-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 16px 22px;
  font: inherit;
  font-size: 1.06rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}
.primary-button {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #051322;
}
.whatsapp-button { background: #25d366; color: #052914; }
.secondary-button {
  background: rgba(255,255,255,.08);
  color: white;
  border: 1px solid var(--line);
}
.primary-button:hover, .whatsapp-button:hover, .secondary-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.time-note { margin: 10px 0 0; color: var(--muted); }
.error-message {
  margin: 0 0 14px;
  color: #ffe4a3;
  font-weight: 800;
}

.side-panel {
  padding: 24px;
  height: fit-content;
  position: sticky;
  top: 18px;
}
.side-panel h2 { margin-bottom: 12px; }
ol { margin: 0 0 22px; padding-left: 20px; color: var(--muted); }
.service-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.05);
  margin-top: 12px;
}
.service-card strong, .service-card span { display: block; }
.service-card span { color: var(--accent-2); font-size: 1.35rem; font-weight: 900; margin-top: 4px; }
.service-card p { color: var(--muted); margin: 8px 0 0; }
.service-card.urgent { border-color: rgba(255,77,141,.38); }
.reassure-card {
  border: 1px solid rgba(55,214,138,.32);
  border-radius: 18px;
  padding: 16px;
  background: rgba(55,214,138,.06);
  margin-top: 12px;
}
.reassure-card strong { display: block; color: var(--ok); }
.reassure-card p { color: var(--muted); margin: 8px 0 0; }

.result-panel {
  grid-column: 1 / -1;
  padding: clamp(20px, 4vw, 34px);
}
.result-header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.result-badge {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #051322;
}
.result-badge.verde { background: var(--ok); }
.result-badge.amarillo { background: var(--warn); }
.result-badge.rojo { background: var(--danger); }
.result-badge.critico { background: var(--critical); color: white; }
.folio { margin: 4px 0 0; color: var(--accent-2); font-weight: 800; }
.result-reading { font-size: 1.18rem; margin: 0 0 8px; }
.result-recommendation { color: var(--muted); margin: 0 0 20px; }
.next-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.next-actions a:first-child:nth-last-child(1) { grid-column: 1 / -1; }
.result-details {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 16px;
}
.result-details summary { cursor: pointer; font-weight: 850; }
.result-details ul { color: var(--muted); }
.result-disclaimer { color: var(--muted); font-size: .92rem; margin-bottom: 0; }

.footer {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  background: rgba(0,0,0,.18);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.footer p { color: var(--muted); margin: 4px 0 0; }
.footer nav { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.legal-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 42px 18px 72px;
}
.legal-page .doc {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(16,40,70,.76);
  padding: clamp(22px, 4vw, 42px);
  box-shadow: var(--shadow);
}
.legal-page h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.legal-page h2 { margin-top: 28px; }
.legal-page p, .legal-page li { color: var(--muted); }
.back-link { display: inline-block; margin-bottom: 20px; }

@media (max-width: 900px) {
  .hero-grid, .main-layout { grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .side-panel { display: none; }
  .main-layout { padding-top: 20px; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 24px, 1120px); }
  .hero { padding: 36px 0 22px; }
  .big-options, .chip-grid, .signal-grid, .next-actions { grid-template-columns: 1fr; }
  .option-card, .chip, .signal { min-height: 52px; }
  .panel, .side-panel, .result-panel { border-radius: 18px; }
  
.hero-reassure {
  display: inline-flex;
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(55,214,138,.32);
  background: rgba(55,214,138,.08);
  color: #baf7d8;
  font-weight: 850;
}

.rector { border-radius: 18px; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .footer nav { justify-content: flex-start; }
}

.action-link { text-align:center; text-decoration:none; display:block; }
.price-card { border:1px solid rgba(94,168,255,.28); border-radius:18px; padding:16px; background:rgba(9,28,53,.78); color:#eaf3ff; }
.price-card strong { display:block; margin-bottom:6px; color:#ffffff; }
.price-card p { margin:0; color:#b8c7dc; }
.primary-button[disabled] { opacity:.7; cursor:wait; }

.version-ribbon{position:sticky;top:0;z-index:20;margin:0 auto;padding:10px 14px;background:#102b46;color:#dff7ff;border-bottom:1px solid #35d0ff;font-size:13px;line-height:1.35;text-align:center;letter-spacing:.01em}
.version-ribbon strong{color:#35d0ff}
.version-footer{font-size:12px;color:#9fc3da;margin-top:6px}