:root{
  /* Paleta y fuentes del handoff "Mockup 3a" (mismas que css/style.css) — nombres de variable
     conservados para no reescribir cada regla, solo los valores cambian. */
  --background: #FAFAF8;
  --foreground: #262A2C;
  --card: #FFFFFF;
  --primary: #0098BC;
  --primary-deep: #00728F;
  --muted: #EAE8E3;
  --muted-foreground: #5B5F60;
  --muted-on-dark: #B9C0C1;
  --border: #DCDAD3;
  --dark: #262A2C;
  --dark-2: #1B1F20;
  --dark-border: rgba(255,255,255,0.14);
  --good: #6E8B7C;
  --good-deep: #3F5B48;
  --warn: #7A5220;
  --bad: #A85C32;
  --font-sans: "Source Sans 3","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --font-word: "Archivo",var(--font-sans);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{margin:0;overflow-x:hidden;background:var(--background);color:var(--foreground);font-family:var(--font-sans);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
.shell{max-width:820px;margin:0 auto;padding:0 24px;}

/* ===== Nav ===== */
header.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:color-mix(in oklch,var(--background) 78%,transparent);border-bottom:1px solid var(--border);}
header.nav .shell{height:64px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0;}
.logo-word{font-family:var(--font-word);font-size:19px;font-weight:600;letter-spacing:-0.01em;}
.logo-word .t2{background:linear-gradient(135deg,#45EBD9,#0098BC);-webkit-background-clip:text;background-clip:text;color:transparent;}
.logo-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);border-left:1px solid var(--border);padding-left:9px;margin-left:2px;}
.back-link{font-size:13px;color:var(--muted-foreground);text-decoration:none;display:flex;align-items:center;gap:5px;flex-shrink:0;}
.back-link:hover{color:var(--foreground);}

/* ===== Header / hero ===== */
.diag-top{background:var(--dark);color:#fafaf8;padding:34px 0 30px;margin-bottom:28px;border-bottom:1px solid var(--dark-border);}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#45EBD9;font-weight:700;}
.diag-top h1{font-family:var(--font-word);font-weight:600;font-size:clamp(24px,3.6vw,32px);margin:6px 0 6px;letter-spacing:-0.01em;}
.diag-top p{margin:0;color:var(--muted-on-dark);font-size:14.5px;max-width:56ch;}

.vital{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.vital-label{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-on-dark);letter-spacing:.06em;white-space:nowrap;}
.vital-track{flex:1;min-width:100px;height:3px;background:var(--dark-border);position:relative;overflow:hidden;border-radius:2px;}
.vital-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#45EBD9,var(--primary));transition:width .4s ease;}
.vital-count{font-family:var(--font-mono);font-size:12.5px;color:#fafaf8;font-weight:700;white-space:nowrap;}

/* ===== Cards / stepper ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.04);}
.stepper-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.stepper-count{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--primary-deep);letter-spacing:.03em;white-space:nowrap;}
.stepper-name{font-family:var(--font-word);font-size:18px;font-weight:600;}
.step-panel{display:none;}
.step-panel.active{display:block;}
.stepper-nav{display:flex;justify-content:space-between;gap:12px;margin:26px 0 60px;}
.stepper-nav button{min-width:120px;justify-content:center;}
.stepper-nav button:disabled{opacity:.35;cursor:not-allowed;}

.section-title{font-family:var(--font-word);font-size:19px;font-weight:600;margin:0 0 4px;}

/* ===== Categoria / dolor rows ===== */
.categoria{border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden;margin-bottom:14px;}
.categoria:last-child{margin-bottom:0;}
.cat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--muted);}
.cat-name{font-weight:700;font-size:14.5px;}
.cat-badge{font-family:var(--font-mono);font-size:10.5px;padding:3px 9px;border-radius:20px;background:var(--card);color:var(--muted-foreground);border:1px solid var(--border);white-space:nowrap;}
.cat-badge.hot{background:color-mix(in oklch,var(--bad) 12%,transparent);color:var(--bad);border-color:color-mix(in oklch,var(--bad) 35%,transparent);}
.cat-body{padding:2px 18px 14px;}
.dolor-row{padding:11px 0;border-bottom:1px dashed var(--border);}
.dolor-row:last-child{border-bottom:none;}
.dolor-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.dolor-text{font-size:14px;font-weight:500;flex:1;min-width:170px;}

.hrs-select{font-family:var(--font-sans);font-size:12.5px;font-weight:600;padding:7px 26px 7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--muted);color:var(--foreground);flex-shrink:0;cursor:pointer;}
.hrs-select:focus{outline:2px solid var(--primary);outline-offset:1px;}

.detail-toggle{background:none;border:none;font-size:11.5px;color:var(--muted-foreground);text-decoration:underline;cursor:pointer;padding:0;flex-shrink:0;display:none;}
.dolor-row.active .detail-toggle{display:inline;}
.dolor-detail{margin-top:9px;display:none;gap:9px;}
.dolor-row.show-detail .dolor-detail{display:grid;}
.detail-grid{display:grid;grid-template-columns:1fr 2fr;gap:9px;}
@media (max-width:600px){.detail-grid{grid-template-columns:1fr;}}
.mini-field label{display:block;font-size:10px;font-weight:600;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
.mini-field select,.mini-field input,.dolor-detail textarea{width:100%;font-size:13px;padding:7px 9px;border:1px solid var(--border);border-radius:6px;background:var(--muted);font-family:var(--font-sans);color:var(--foreground);}
.dolor-detail textarea{grid-column:1/-1;min-height:42px;resize:vertical;}

/* ===== Toast ===== */
#toastHost{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{background:var(--dark);color:#fafaf8;font-size:13px;font-weight:600;padding:11px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;white-space:nowrap;}
.toast.show{opacity:1;transform:translateY(0);}

/* ===== Result screen ===== */
.result-hero{text-align:center;padding:38px 20px;border-radius:18px;background:var(--dark);color:#fafaf8;position:relative;overflow:hidden;}
.result-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,color-mix(in oklch,var(--primary) 35%,transparent),transparent 60%);}
.result-eyebrow{position:relative;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-on-dark);}
.result-num{position:relative;font-family:var(--font-mono);font-weight:700;font-size:clamp(34px,7vw,56px);letter-spacing:-0.02em;margin:8px 0 4px;color:#fafaf8;}
.result-num small{font-size:0.32em;font-weight:600;color:var(--muted-on-dark);margin-left:6px;}
.result-sub{position:relative;font-size:14px;color:var(--muted-on-dark);max-width:44ch;margin:0 auto;}
.result-stats{display:flex;gap:10px;justify-content:center;margin-top:22px;position:relative;flex-wrap:wrap;}
.result-stat{background:var(--dark-2);border:1px solid var(--dark-border);border-radius:10px;padding:10px 16px;text-align:center;min-width:110px;}
.result-stat b{display:block;font-family:var(--font-mono);font-size:18px;color:#45EBD9;}
.result-stat span{font-size:10.5px;color:var(--muted-on-dark);}

.result-block{margin-top:26px;}
.result-block h2{font-family:var(--font-word);font-size:16px;font-weight:700;margin:0 0 12px;}
.stat-cta{margin:0;padding:14px 16px;border-radius:10px;background:color-mix(in oklch,var(--primary) 8%,transparent);border:1px solid color-mix(in oklch,var(--primary) 25%,transparent);font-size:14px;line-height:1.6;font-weight:600;color:var(--primary-deep);}
.stat-cta b{color:var(--foreground);}

.rank-item{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--muted);}
.rank-item:last-child{border-bottom:none;}
.rank-num{font-family:var(--font-mono);font-weight:700;color:var(--primary-deep);font-size:12.5px;}
.rank-name2{font-size:13px;font-weight:500;}
.rank-cat2{font-size:11px;color:var(--muted-foreground);display:block;margin-top:1px;}
.rank-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.rank-hh{font-family:var(--font-mono);font-size:11.5px;color:var(--muted-foreground);white-space:nowrap;}
.quad-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:20px;white-space:nowrap;}
.quad-gana{background:color-mix(in oklch,var(--good) 14%,transparent);color:var(--good-deep);}
.quad-alta{background:color-mix(in oklch,var(--primary) 14%,transparent);color:var(--primary-deep);}
.quad-facil,.quad-baja{background:var(--muted);color:var(--muted-foreground);}

.pkg-card{border-radius:16px;padding:26px;background:var(--card);box-shadow:0 0 0 2px var(--primary),0 16px 40px -20px color-mix(in oklch,var(--primary) 45%,transparent);}
.pkg-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-deep);font-weight:700;}
.pkg-name{font-family:var(--font-word);font-size:22px;font-weight:600;margin:6px 0 4px;}
.pkg-price{font-family:var(--font-mono);font-size:15px;color:var(--muted-foreground);margin-bottom:10px;}
.pkg-why{font-size:13.5px;line-height:1.6;color:var(--muted-foreground);margin:0;}

/* ===== Contact ===== */
.contact-card{padding:26px 24px;margin-top:8px;}
.contact-card h2{font-family:var(--font-word);font-size:17px;font-weight:700;margin:0 0 4px;}
.contact-card p{margin:0 0 16px;font-size:13.5px;color:var(--muted-foreground);}
.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 14px;}
@media (max-width:560px){.field-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:11px;font-weight:600;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.05em;}
.field input,.field select{font-family:var(--font-sans);font-size:14px;padding:9px 10px;border:1px solid var(--border);border-radius:7px;background:var(--muted);color:var(--foreground);}
.field input:focus,.field select:focus{outline:2px solid var(--primary);outline-offset:1px;}

/* ===== Buttons ===== */
.btn{font-family:var(--font-sans);font-weight:600;font-size:13.5px;padding:11px 18px;border-radius:9px;border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:transform .08s,background-color .15s,border-color .15s;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-deep);}
.btn-outline{background:transparent;color:var(--foreground);border-color:var(--border);}
.btn-outline:hover{background:var(--muted);}
.btn-whatsapp{background:#25D366;color:#fff;}
.btn-whatsapp:hover{background:#1EBE5A;}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
.actions-note{margin:10px 0 0;font-size:12px;color:var(--muted-foreground);}

.empty-state{padding:20px 0;text-align:center;color:var(--muted-foreground);font-size:13px;}

footer.foot{margin:50px 0 30px;padding-top:18px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted-foreground);text-align:center;}
footer.foot a{text-decoration:underline;}

/* ===== Legal / prose pages (privacidad.html) ===== */
.legal{padding-top:40px;}
.legal h1{font-family:var(--font-word);font-size:clamp(26px,4vw,34px);font-weight:700;margin:0 0 6px;letter-spacing:-0.01em;}
.legal-updated{font-size:12.5px;color:var(--muted-foreground);margin:0 0 24px;}
.legal h2{font-family:var(--font-word);font-size:18px;font-weight:700;margin:28px 0 8px;}
.legal p{font-size:15px;line-height:1.65;margin:0 0 12px;max-width:70ch;}
.legal a{color:var(--primary);text-decoration:underline;}

@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important;} }