:root{
  --white:#FFFFFF; --cream:#F0E6C8; --cream-line:#E4D6AE; --cream-soft:#FBF6FC;
  --navy:#0D1B3E; --ink-soft:#4B5876; --ink-faint:#7A85A0;
  --plum:#5C2060; --plum-2:#431748;
  --gold:#C9A84C; --gold-deep:#A98A38;
  --good:#3F8F5F; --good-soft:#E4EFE7;
  --warn:#B8862E; --warn-soft:#F5EBD8;
  --crit:#B23B3B; --crit-soft:#F5E1E1;
  --shadow:0 20px 50px rgba(13,27,62,.10);
  --radius:20px;
}
*{box-sizing:border-box;}
html{background:var(--white);}
body{
  margin:0; background:var(--white); color:var(--navy); font-family:"DM Sans",sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; padding-bottom:0;
}
h1,h2,h3{margin:0; font-family:"Playfair Display",serif; font-weight:700; letter-spacing:-.01em; text-wrap:balance; color:var(--navy);}
p{margin:0;}
.voice{font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:400;}
.label-font{font-family:"Josefin Sans",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.13em;}
button{font-family:inherit; cursor:pointer;}
svg.icon{width:1em;height:1em; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; display:block;}
@media (prefers-reduced-motion: reduce){ *{transition-duration:.01ms !important; animation-duration:.01ms !important;} }

.shell{max-width:1120px; margin:0 auto; padding:0 24px;}
.eyebrow{font-size:12px; color:var(--plum); margin-bottom:16px; display:flex; align-items:center; gap:8px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}

/* nav */
.nav-wrap{position:sticky; top:16px; z-index:40; display:flex; justify-content:center; padding:0 20px;}
.nav{
  max-width:760px; width:100%; margin-top:0; background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  border:1px solid var(--cream-line); border-radius:999px; padding:10px 10px 10px 20px;
  display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow);
}
.nav .word{font-family:"Playfair Display"; font-weight:700; font-size:16px; color:var(--navy);}
.nav .links{display:flex; gap:22px; font-size:14px; color:var(--ink-soft);}
.nav .links a{color:inherit; text-decoration:none;}
.nav .links a:hover{color:var(--plum);}
@media (max-width:640px){ .nav .links{display:none;} }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; border:none; border-radius:10px;
  padding:15px 26px; font-family:"Josefin Sans"; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:13px; transition:transform .12s, box-shadow .12s, background .15s;
}
.btn:active{transform:scale(.97);}
.btn--plum{background:var(--plum); color:var(--white);}
.btn--plum:hover{background:var(--plum-2);}
.btn--white{background:var(--white); color:var(--plum);}
.btn--white:hover{background:var(--cream);}
.btn--ghost{background:transparent; color:var(--navy); border:1.5px solid var(--cream-line);}
.btn--ghost:hover{border-color:var(--plum);}
.btn--text{background:none; color:var(--plum); padding:8px 4px; text-decoration:underline; text-underline-offset:3px; text-transform:none; letter-spacing:0; font-family:"DM Sans"; font-weight:600;}
.btn:disabled{opacity:.35; cursor:not-allowed; box-shadow:none; transform:none;}
.btn--sm{padding:11px 18px; font-size:11.5px; border-radius:999px;}
.btn--lg{padding:17px 30px; font-size:14px;}
.btn--block{width:100%; justify-content:center;}

/* HERO */
.hero{padding:104px 0 88px;}
.hero h1{font-size:clamp(30px,5vw,50px); line-height:1.12; max-width:17ch;}
.hero h1 em{font-style:italic; color:var(--plum);}
.hero .lead{margin-top:22px; color:var(--ink-soft); font-size:17px; max-width:56ch;}
.hero .cta-row{margin-top:32px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.hero .cta-row .microcopy{font-family:"Josefin Sans"; font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:11px; color:var(--ink-faint);}

.feature-grid{margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:860px){ .feature-grid{grid-template-columns:repeat(2,1fr);} }
.feature-card{background:var(--cream); border:1px solid var(--cream-line); border-radius:16px; padding:20px 18px;}
.feature-card .ic{
  width:36px;height:36px; border-radius:10px; background:var(--white); color:var(--plum);
  display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px;
}
.feature-card p{font-size:14px; color:var(--ink-soft); line-height:1.4;}

/* SECTION generic */
.section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:clamp(26px,3.6vw,36px);}
.section-head .lead{margin-top:14px; color:var(--ink-soft); font-size:15.5px;}

hr.div{border:none; border-top:1px solid var(--cream-line);}

#datos, #preguntas, #resultado{background:var(--navy);}
#datos .eyebrow, #preguntas .eyebrow, #resultado .eyebrow{color:var(--gold);}
#datos .section-head h2, #preguntas .section-head h2, #resultado .section-head h2{color:var(--white);}
#datos .section-head .lead, #preguntas .section-head .lead, #resultado .section-head .lead{color:rgba(255,255,255,.72);}
#resultado .block-title{color:var(--white);}

/* INTAKE FORM */
.form-card{
  background:var(--cream); border:1px solid var(--cream-line); border-radius:28px; padding:40px 36px;
  box-shadow:var(--shadow); max-width:640px;
}
.field{margin-bottom:20px;}
.field label{display:block; font-family:"Josefin Sans"; font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px;}
.field input[type=text], .field input[type=email]{
  width:100%; padding:14px 16px; border-radius:10px; border:1.5px solid var(--cream-line);
  background:var(--white); color:var(--navy); font-size:15.5px; font-family:"DM Sans";
}
.field input:focus{outline:none; border-color:var(--plum);}
.field .error{color:var(--crit); font-size:13px; margin-top:6px; display:none;}
.field.has-error input{border-color:var(--crit);}
.field.has-error .error{display:block;}

.pillgroup{display:flex; flex-wrap:wrap; gap:8px;}
.pill{
  border:1.5px solid var(--cream-line); background:var(--white); color:var(--ink-soft);
  padding:10px 17px; border-radius:999px; font-size:14px; cursor:pointer; transition:.12s; font-family:"DM Sans"; font-weight:500;
}
.pill:hover{border-color:var(--plum);}
.pill.selected{background:var(--plum); border-color:var(--plum); color:#fff; font-weight:600;}
.pill:focus-visible{outline:2px solid var(--plum); outline-offset:2px;}

.consent{display:flex; gap:10px; align-items:flex-start; margin:26px 0 8px; font-size:13.5px; color:var(--ink-soft);}
.consent input{margin-top:3px;}

/* QUESTIONS CAROUSEL */
.q-frame{
  background:var(--cream); border:1px solid var(--cream-line); border-radius:28px; overflow:hidden; box-shadow:var(--shadow);
}
.q-progress-row{display:flex; align-items:center; justify-content:space-between; padding:26px 32px 0;}
.q-dots{display:flex; gap:8px; flex-wrap:wrap; max-width:60%;}
.q-dots span{width:20px; height:4px; border-radius:99px; background:var(--cream-line); transition:background .2s, width .2s;}
.q-dots span.done{background:var(--gold-deep);}
.q-dots span.active{background:var(--plum); width:30px;}
.q-count{font-family:"Josefin Sans"; font-weight:600; font-size:11px; letter-spacing:.08em; color:var(--ink-faint); white-space:nowrap;}

.q-viewport{overflow:hidden; padding:8px 0 0;}
.q-track{display:flex; transition:transform .5s cubic-bezier(.65,0,.35,1);}
.q-panel{flex:0 0 100%; padding:36px 32px 32px; min-height:380px; display:flex; flex-direction:column;}

.q-area{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.q-area .ic{
  width:34px;height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--plum); font-size:17px; flex:0 0 auto;
}
.q-area .label{font-family:"Josefin Sans"; font-weight:600; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}

.area-banner{
  margin-bottom:20px; background:var(--white); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:3px;
}
.area-banner strong{font-family:"Playfair Display"; font-weight:700; font-size:16px; color:var(--navy);}
.area-banner span.body{font-size:13.5px; color:var(--ink-soft);}

.encourage{font-family:"Josefin Sans"; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--plum); margin-bottom:16px;}

.q-text{font-family:"Playfair Display"; font-weight:700; font-size:clamp(20px,2.6vw,26px); max-width:34ch; margin-bottom:26px; color:var(--navy);}
.q-text:focus{outline:none;}

.q-opts{display:flex; flex-direction:column; gap:10px; flex:1;}
.opt{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  background:var(--white); border:1.5px solid var(--cream-line); border-radius:14px;
  padding:15px 18px; color:var(--navy); font-size:15px; font-weight:500; transition:border-color .12s, background .12s;
  font-family:"DM Sans";
}
.opt:hover{border-color:var(--plum);}
.opt.selected{border-color:var(--plum); background:var(--cream-soft); font-weight:600;}
.opt:focus-visible{outline:2px solid var(--plum); outline-offset:2px;}
.opt .dot{width:9px;height:9px;border-radius:50%; flex:0 0 auto;}
.opt .dot.g{background:var(--good);} .opt .dot.y{background:var(--warn);} .opt .dot.r{background:var(--crit);}

.slider-wrap{padding:6px 0 4px;}
.slider-value{font-family:"Playfair Display"; font-weight:700; font-size:32px; color:var(--plum); margin-bottom:14px;}
input[type=range]{width:100%; height:6px; border-radius:999px; background:var(--cream-line); appearance:none; -webkit-appearance:none;}
input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--plum); border:4px solid var(--white); box-shadow:0 0 0 1.5px var(--plum); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--plum); border:4px solid var(--white);
  box-shadow:0 0 0 1.5px var(--plum); cursor:pointer;
}
.slider-endcaps{display:flex; justify-content:space-between; font-family:"Josefin Sans"; font-weight:600; font-size:11px; color:var(--ink-faint); margin-top:8px;}

.number-input-row{display:flex; align-items:baseline; gap:12px;}
.number-input-row input[type=number]{
  font-family:"Playfair Display"; font-weight:700; font-size:30px; width:130px; padding:10px 14px; border-radius:10px;
  border:1.5px solid var(--cream-line); background:var(--white); color:var(--plum);
}
.number-input-row input[type=number]:focus{outline:none; border-color:var(--plum);}
.unit-label{color:var(--ink-faint); font-size:14px; font-family:"DM Sans";}

.q-note{
  margin-top:18px; font-size:13.5px; color:var(--ink-soft); background:var(--white);
  border:1px solid var(--cream-line); border-radius:10px; padding:13px 15px;
}

.q-nav{display:flex; align-items:center; justify-content:space-between; padding:22px 32px 30px; border-top:1px solid var(--cream-line); margin-top:8px; gap:12px;}
.q-nav .save{font-family:"Josefin Sans"; font-weight:600; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap;}

/* dark ciruela block */
.voz-block{background:var(--plum); color:var(--white); padding:72px 0; text-align:center;}
.voz-block .shell{max-width:720px;}
.voz-block .tag{display:inline-block; border:1px solid var(--gold); color:var(--gold); padding:6px 16px; border-radius:999px; font-size:11px; margin-bottom:24px;}
.voz-block h3{color:var(--white); font-size:clamp(24px,3.4vw,32px); margin-bottom:14px;}
.voz-block p.lead{color:rgba(255,255,255,.78); font-size:16px; max-width:52ch; margin:0 auto;}

/* PROCESSING */
.processing{padding:120px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center;}
.spinner{width:44px; height:44px; border-radius:50%; border:3px solid var(--cream-line); border-top-color:var(--plum); animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.processing p{font-family:"Playfair Display"; font-weight:700; font-size:19px; color:var(--white);}

/* GAUGES */
.gauge-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px;}
@media (max-width:720px){ .gauge-row{grid-template-columns:1fr;} }
.gauge-card{background:var(--cream); border:1px solid var(--cream-line); border-radius:var(--radius); padding:26px 24px; display:flex; align-items:center; gap:20px; box-shadow:var(--shadow);}
.gauge{width:104px; height:104px; border-radius:50%; flex:0 0 auto; position:relative; background:conic-gradient(var(--gc) calc(var(--pct)*3.6deg), var(--cream-line) 0deg);}
.gauge::before{content:""; position:absolute; inset:11px; border-radius:50%; background:var(--cream);}
.gauge .gv{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:"Playfair Display"; font-weight:700; font-size:22px; color:var(--navy);}
.gauge-meta .label{font-family:"Josefin Sans"; font-weight:600; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;}
.gauge-meta .tagline{font-size:14.5px; font-weight:600;}
.tag--r{color:var(--crit);} .tag--y{color:#8F651F;} .tag--g{color:var(--good);}

/* STAGE — voice moment inside results */
.stage-voice{background:var(--plum); color:var(--white); border-radius:var(--radius); padding:32px 34px; margin-bottom:16px; text-align:left;}
.stage-voice .tag{display:inline-block; border:1px solid var(--gold); color:var(--gold); padding:5px 14px; border-radius:999px; font-size:10.5px; margin-bottom:16px;}
.stage-voice h3{color:var(--white); font-size:24px; margin-bottom:10px;}
.stage-voice p{color:rgba(255,255,255,.82); font-size:15px; max-width:60ch;}

/* FEATURED PRIORITY CARD */
.priority-featured{background:var(--cream); border:1px solid var(--cream-line); border-radius:var(--radius); padding:34px 32px; margin-bottom:16px; box-shadow:var(--shadow);}
.priority-featured .tophead{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.priority-featured .tophead .ic{width:38px;height:38px;border-radius:11px; background:var(--white); color:var(--plum); display:flex; align-items:center; justify-content:center; font-size:19px;}
.priority-featured .eyebrow2{font-family:"Josefin Sans"; font-weight:600; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--crit);}
.priority-featured .big{font-family:"Playfair Display"; font-weight:700; font-size:clamp(52px,8vw,80px); color:var(--navy); line-height:1; margin:10px 0 6px;}
.priority-featured h3{font-size:19px; margin-bottom:10px;}
.priority-featured p{color:var(--ink-soft); font-size:14.5px; max-width:52ch;}
.chip-row{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;}
.chip{background:var(--white); border:1px solid var(--cream-line); border-radius:10px; padding:8px 13px; font-family:"Josefin Sans"; font-weight:600; font-size:11px; color:var(--ink-soft); display:flex; align-items:center; gap:7px;}
.chip .ic{color:var(--crit); font-size:13px;}

.priority-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:780px){ .priority-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .priority-grid{grid-template-columns:1fr;} }
.priority-card{background:var(--cream); border:1px solid var(--cream-line); border-radius:16px; padding:22px 20px;}
.priority-card .rowtop{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.priority-card .ic{width:32px;height:32px;border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; background:var(--white);}
.priority-card .rank{font-family:"Josefin Sans"; font-weight:600; font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint);}
.priority-card .val{font-family:"Playfair Display"; font-weight:700; font-size:34px; margin-bottom:4px;}
.priority-card .name{font-weight:700; font-size:14.5px; margin-bottom:6px; font-family:"DM Sans"; color:var(--navy);}
.priority-card .why{font-size:13px; color:var(--ink-soft); line-height:1.4;}

.block-title{font-family:"Playfair Display"; font-weight:700; font-size:20px; margin:44px 0 16px; color:var(--navy);}

.strengths{background:var(--good-soft); border-radius:var(--radius); padding:26px 28px;}
.strengths .block-title, #resultado .strengths .block-title{margin-top:0; color:var(--navy);}
.strengths ul{margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.strengths li{display:flex; gap:10px; font-size:15px; align-items:flex-start; color:var(--navy); font-family:"DM Sans";}
.strengths li::before{content:"✓"; color:var(--good); font-weight:700; flex:0 0 auto;}

.bs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media (max-width:860px){ .bs-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .bs-grid{grid-template-columns:1fr;} }
.bs-card{background:var(--cream); border:1px solid var(--cream-line); border-radius:14px; padding:18px;}
.bs-card .tagpill{display:inline-flex; align-items:center; gap:5px; font-family:"Josefin Sans"; font-weight:600; font-size:10px; letter-spacing:.06em; background:var(--white); color:var(--gold-deep); padding:4px 9px; border-radius:99px; margin-bottom:12px;}
.bs-card p{font-size:13.5px; color:var(--navy); line-height:1.4; font-family:"DM Sans";}
.bs-lead-in{font-size:14px; color:rgba(255,255,255,.78); margin-bottom:16px; max-width:70ch;}

.message-block{margin:44px 0; padding:30px 0; border-top:1px solid rgba(255,255,255,.15);}
.message-block h3{font-size:20px; margin-bottom:12px; color:var(--white);}
.message-block p{font-size:16px; color:rgba(255,255,255,.8); max-width:60ch; font-family:"DM Sans";}

/* CTA */
.cta-final{text-align:center; padding:136px 0 104px;}
.cta-final .tag{display:inline-block; border:1px solid var(--gold); color:var(--gold); padding:6px 16px; border-radius:999px; font-size:11px; margin-bottom:26px;}
.cta-final h2{color:var(--white); font-size:clamp(30px,5vw,48px); max-width:20ch; margin:0 auto;}
.cta-final .lead{margin:30px auto 50px; color:rgba(255,255,255,.78); font-size:16px; max-width:46ch;}
.cta-final h2 em{color:var(--gold);}
.cta-final .btn--white{margin-top:16px;}

/* sticky bottom bar */
.stickybar{position:fixed; bottom:0; left:0; right:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-top:1px solid var(--cream-line); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; transform:translateY(100%); transition:transform .3s ease;}
.stickybar.visible{transform:translateY(0);}
.stickybar .info{font-size:13.5px; color:var(--ink-soft);}
.stickybar .info b{color:var(--navy); font-weight:700;}
.stickybar .info .sep{color:var(--ink-faint); margin:0 8px;}
.stickybar .btn{font-weight:700; letter-spacing:.06em;}
body.has-stickybar{padding-bottom:74px;}

::selection{background:var(--gold); color:var(--plum-2);}

@media (max-width:480px){
  .shell{padding-left:16px; padding-right:16px;}
  .q-nav{flex-wrap:wrap;}
  .form-card{padding:28px 22px;}
}