/* web-nueva/assets/packs.css — componentes de páginas de pack (ley21719 y
   verticales con pre-test). Componentes extraídos de /diagnostico.html (matriz
   aprobada) para complementar assets/styles.css sin duplicar el sistema base.
   Uso: <link rel="stylesheet" href="../assets/styles.css"> + esta hoja. */
.hero-video {max-width:760px;margin:0 auto 34px}
.hero-video .frame {position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 70px -18px rgba(56,150,220,.35);background:#000}
.hero-video video {display:block;width:100%;aspect-ratio:16/9;background:#000}
@media (max-width:640px) {
  .hero-video .frame {border-radius:14px}
}
.hero-bg {position:absolute;inset:0;overflow:hidden;z-index:0;background:radial-gradient(60% 50% at 50% 0,rgba(41,151,255,.18),transparent 70%),#000}
.hero-grid {position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%)}
.status-pill {display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--c-ink-2);letter-spacing:0;padding:7px 14px;border:1px solid var(--c-line);border-radius:980px;background:rgba(255,255,255,.6)}
.dark .status-pill {color:var(--c-ink-2-d);border-color:var(--c-line-d);background:rgba(255,255,255,.04)}
.dot {width:7px;height:7px;border-radius:50%;background:#34c759;box-shadow:0 0 0 0 rgba(52,199,89,.5);animation:2.4s infinite pulse}
@keyframes pulse {0%{box-shadow:0 0 0 0 rgba(52,199,89,.45)}70%{box-shadow:0 0 0 7px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
@keyframes pulseBar {0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
.case-tag {display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#ff453a;margin-bottom:10px}
.case-tag.press {color:#ff9f0a}
.case-src {font-size:13px;color:var(--c-ink-3);margin-top:12px}
.phase-anim {border-radius:14px;overflow:hidden;margin-bottom:22px;border:1px solid var(--c-line-soft);box-shadow:0 14px 30px -20px rgba(0,0,0,.28);background:var(--c-bg-soft);line-height:0}
.phase-anim video {width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.law-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:980px;margin:0 auto}
@media (max-width:820px) {
  .law-grid {grid-template-columns:1fr}
}
.law-card {background:var(--c-bg);border-radius:22px;padding:34px 30px;border:1px solid var(--c-line-soft)}
.law-card h3 {font-size:21px;font-weight:600;letter-spacing:-.014em;margin-bottom:10px}
.law-card p {font-size:16px;color:var(--c-ink-2);line-height:1.55}
.law-card .art {font-family:var(--mono);font-size:12.5px;color:var(--accent);font-weight:600;letter-spacing:.02em}
.fine-row {display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:34px 0 8px}
.fine-chip {background:#fff;border:1px solid var(--c-line-soft);border-radius:16px;padding:18px 24px;text-align:center;min-width:190px}
.fine-chip .n {font-size:30px;font-weight:700;letter-spacing:-.02em;color:#ff453a}
.fine-chip .l {font-size:13px;color:var(--c-ink-2);margin-top:4px}
.map-row {display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:980px;margin:34px auto 0;border:1px solid var(--c-line-soft);border-radius:22px;overflow:hidden}
@media (max-width:720px) {
  .map-row {grid-template-columns:1fr}
}
.map-col {padding:34px 30px}
.map-col.a {background:var(--c-bg-soft)}
.map-col.b {background:#fff}
.map-col h3 {font-size:20px;font-weight:600;margin-bottom:12px}
.map-col p, .map-col li {font-size:15.5px;color:var(--c-ink-2);line-height:1.55}
.map-col ul {list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:10px}
.map-col ul > li::before {content:"— ";color:var(--c-ink-3)}
.map-col ol {list-style:decimal;margin-top:14px;padding-left:26px;display:flex;flex-direction:column;gap:12px}
.map-col ol > li::marker {font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent)}
.test-shell {max-width:760px;margin:0 auto;background:var(--c-bg);border:1px solid var(--c-line-soft);border-radius:26px;padding:clamp(28px,5vw,52px);box-shadow:0 30px 70px -40px rgba(0,0,0,.18)}
.progress {height:5px;border-radius:4px;background:var(--c-line-soft);overflow:hidden;margin-bottom:30px}
.progress span {display:block;height:100%;background:var(--accent);border-radius:4px;width:0;transition:width .35s var(--ease)}
.q-kicker {font-size:12px;font-weight:700;color:#1d1d1f;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;scroll-margin-top:72px}
.q-text {font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.014em;line-height:1.2;margin-bottom:28px;color:#1d1d1f}
.q-options {display:flex;flex-direction:column;gap:12px}
.option {position:relative;display:block;cursor:pointer}
.option input {position:absolute;opacity:0;pointer-events:none}
.option-card {display:flex;align-items:center;gap:14px;border:1.5px solid var(--c-line);border-radius:16px;padding:16px 18px;background:var(--c-bg-soft-2);transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease)}
.option:hover .option-card {border-color:var(--c-ink-3)}
.option input:checked + .option-card {border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,#fff);transform:translateY(-1px)}
.option-dot {flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--c-line);display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.option input:checked + .option-card .option-dot {border-color:var(--accent);background:var(--accent)}
.option input:checked + .option-card .option-dot::after {content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.option-txt {font-size:16px;color:var(--c-ink);letter-spacing:-.005em}
.option input:checked + .option-card .option-txt {color:var(--c-ink)}
.q-nav {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px}
.result-hidden {display:none}
.signal-card {background:linear-gradient(180deg,#161618,#0e0e10);border:1px solid rgba(255,255,255,.1);border-radius:26px;padding:clamp(28px,5vw,52px);color:#d1d1d6;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.sig-head {font-size:11px;font-weight:700;letter-spacing:.08em;color:#f5f5f7;text-transform:uppercase;margin-bottom:18px}
.sig-score-row {display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.sig-score {font-size:clamp(56px,8vw,84px);font-weight:600;letter-spacing:-.02em;font-family:var(--font);color:#fff;line-height:1}
.sig-tag {display:inline-block;margin:0;vertical-align:baseline;font-size:13px;font-weight:700;letter-spacing:.06em;padding:7px 14px;border-radius:980px;text-transform:uppercase}
.sig-tag.critico {background:rgba(255,69,58,.18);color:#ff453a}
.sig-tag.riesgo {background:rgba(255,159,10,.16);color:#ff9f0a}
.sig-tag.camino {background:rgba(255,214,10,.16);color:#ffd60a}
.sig-tag.listo {background:rgba(48,209,88,.16);color:#30d158}
.sig-sub {font-size:16px;color:#a1a1a6;max-width:560px}
.block-bars {margin:28px 0 0;display:flex;flex-direction:column;gap:14px}
.block-bar {display:flex;align-items:center;gap:14px}
.block-lbl {flex:none;width:150px;font-size:13px;font-weight:600;color:#f5f5f7}
.block-track {flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.block-track span {display:block;height:100%;border-radius:4px;width:0;transition:width 1s var(--ease)}
.block-pct {flex:none;width:42px;text-align:right;font-size:13px;color:#a1a1a6;font-family:var(--mono)}
.risk-list {margin-top:34px;display:flex;flex-direction:column;gap:14px}
.risk-item {background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px 20px}
.risk-item .r-art {font-size:11px;font-weight:700;color:#ff453a;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;display:block}
.risk-item p {font-size:15px;color:#f5f5f7;line-height:1.5}
.risk-item .r-fix {margin-top:8px;font-size:13px;color:#a1a1a6}
.prod-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:680px) {
  .prod-grid {grid-template-columns:1fr}
}
.prod-card {background:rgba(41,151,255,.07);border:1px solid rgba(41,151,255,.2);border-radius:16px;padding:20px}
.prod-card h4 {font-size:16px;font-weight:600;color:#fff;margin-bottom:6px}
.prod-card p {font-size:13.5px;color:#a1a1a6;line-height:1.5}
.lead-form {margin-top:34px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px}
.lead-form h4 {font-size:19px;font-weight:600;color:#fff;margin-bottom:4px}
.lead-form .lf-sub {font-size:13.5px;color:#a1a1a6;margin-bottom:18px}
.lead-form form {display:flex;flex-direction:column;gap:12px}
.lead-form input {background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:13px 15px;color:#fff;font-size:15px;outline:0;transition:border-color .2s;font-family:inherit}
.lead-form input:focus {border-color:#2997ff}
.lead-form input::placeholder {color:#86868b} /* #555 sobre signal-card = 2.4:1 */
/* Links dentro de la tarjeta oscura: el accent #0071e3 rinde 3.9:1; en dark el sitio usa #2997ff (6.0:1). */
.signal-card a {color:#2997ff}
.lead-status {font-size:14px;min-height:18px;text-align:center;margin-top:4px}
.lead-status.ok {color:#30d158}
.lead-status.err {color:#ff453a}
.lead-note {font-size:12px;color:#8e8e93;text-align:center;margin-top:10px} /* sobre signal-card oscuro: #666 daba 3.1:1 */
.disclaimer {margin-top:34px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:13px;color:#8e8e93;line-height:1.55}
.disclaimer b {color:#a1a1a6}
.seal-card {max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--c-line-soft);border-radius:26px;padding:clamp(32px,5vw,56px);text-align:center;box-shadow:0 30px 70px -40px rgba(0,0,0,.18)}
.seal-mark {width:84px;height:84px;border-radius:50%;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d1d1f,#0071e3);color:#fff;font-size:34px;font-weight:700}
@media (prefers-reduced-motion:reduce) {
  .dot,html.armed .reveal.in {animation:none}
}

/* ---------- Pre-Test Ley 21.719 (packs/ley21719.html) ---------- */
.q-help { margin: -14px 0 22px; }
.lead-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #a1a1a6; }
.lead-consent input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: #30d158; }
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lead-success { display: flex; flex-direction: column; gap: 6px; }
.phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width:1040px) {
  .phase-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width:620px) {
  .phase-grid { grid-template-columns: 1fr; }
}
.phase-num { display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--accent); margin-bottom: 10px; }
.dark .caption { color: #8e8e93; }


/* ---------- Formularios de pack (captura / operacion / autonomia) ----------
   El textarea del formulario de pack debe verse igual al input: sin esta regla
   el navegador lo pinta blanco sobre la tarjeta oscura y se rompe el contraste. */
.lead-form textarea {background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:13px 15px;color:#fff;font-size:15px;outline:0;transition:border-color .2s;font-family:inherit;resize:vertical;width:100%}
.lead-form textarea:focus {border-color:#2997ff}
.lead-form textarea::placeholder {color:#86868b}