:root {
  --clay:       #C17A5E;
  --clay-dark:  #A85D52;
  --clay-light: #E8C4B0;
  --clay-pale:  #F5E4DA;
  --clay-bg:    #FBF0EA;
  --ink:        #1A1410;
  --ink-mid:    #5C4A42;
  --ink-soft:   #9C8880;
  --paper:      #FAF7F2;
  --paper-warm: #FFF8F2;
  --sage:       #7D9E8C;
  --sage-light: #C2D8CB;
  --sage-pale:  #EAF2ED;
  --amber:      #C9A052;
  --rose:       #B85C6E;
  --border:     rgba(193,122,94,0.18);
  --shadow:     rgba(26,20,16,0.06);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(193,122,94,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 75%, rgba(125,158,140,0.08) 0%, transparent 60%);
  pointer-events:none;
  z-index:0;
}

.wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px 100px;
  position: relative;
  z-index: 1;
}

/* ── LANG ── */
.lang-bar {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0 0;
}

.lang-toggle {
  display: flex;
  background: white;
  border: 1px solid var(--border);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow);
}

.lang-btn {
  padding: 7px 18px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  transition: all .25s;
}

.lang-btn.active { background: var(--clay); color: white; }

/* ── HEADER ── */
.header {
  padding: 48px 0 36px;
  text-align: center;
  animation: riseUp .9s ease both;
}

.eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
  margin-bottom: 18px;
  display: block;
}

h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 16px;
}

h1 em { font-style: italic; color: var(--clay); }

.header-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-mid);
  max-width: 480px;
  margin: 0 auto 24px;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.orn-line {
  width: 48px; height: 1px;
  background: linear-gradient(to right, transparent, var(--clay-light));
}

.orn-line:last-child {
  background: linear-gradient(to left, transparent, var(--clay-light));
}

.orn-dot { width:5px; height:5px; border-radius:50%; background:var(--clay); }

/* ── PROGRESS ── */
.progress-wrap {
  margin: 0 0 32px;
  display: none;
  animation: riseUp .5s ease both;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.progress-n { font-size: 12px; color: var(--ink-mid); font-weight: 500; }

.progress-track {
  height: 3px;
  background: var(--clay-light);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--clay), var(--amber));
  border-radius: 3px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

/* ── STEP PILL ── */
.step-label { text-align: center; margin-bottom: 24px; }

.step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 30px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
  background: white;
}

/* ── CARDS ── */
.card {
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 30px;
  margin-bottom: 12px;
  box-shadow: 0 2px 16px var(--shadow);
  transition: border-color .3s, transform .3s, box-shadow .3s;
  animation: riseUp .5s ease both;
}

.card:hover {
  border-color: rgba(193,122,94,0.35);
  box-shadow: 0 6px 24px rgba(193,122,94,0.1);
  transform: translateY(-1px);
}

.card.answered { border-color: rgba(193,122,94,0.3); }

/* ── CONTEXT ── */
.ctx-q {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.ctx-opts { display: flex; flex-wrap: wrap; gap: 8px; }

.ctx-btn {
  padding: 8px 16px;
  border: 1.5px solid var(--clay-light);
  border-radius: 30px;
  background: transparent;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: var(--ink-mid);
  cursor: pointer;
  transition: all .2s;
}

.ctx-btn:hover { border-color: var(--clay); color: var(--clay); }
.ctx-btn.active { background: var(--clay); border-color: var(--clay); color: white; }

/* ── SECTION DIVIDERS ── */
.sec-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 14px;
  animation: riseUp .4s ease both;
}

.sec-line { flex:1; height:1px; background:var(--clay-pale); }

.sec-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--clay);
  white-space: nowrap;
}

/* ── QUESTIONS ── */
.q-num {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.q-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 18px;
  font-weight: 400;
}

.scale-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.scale-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px;
  border: 1.5px solid var(--clay-light);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Jost', sans-serif;
}

.scale-btn:hover { border-color: var(--clay); background: var(--clay-pale); }
.scale-btn.sel { border-color: var(--clay); background: var(--clay); }

.scale-n { font-size: 16px; font-weight: 600; color: var(--ink-mid); transition: color .2s; }
.scale-btn.sel .scale-n { color: white; }

.scale-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.3;
  transition: color .2s;
}

.scale-btn.sel .scale-lbl { color: rgba(255,255,255,.85); }

.scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.scale-end { font-size: 11px; color: var(--ink-soft); font-style: italic; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: linear-gradient(135deg, var(--clay), var(--amber));
  color: white;
  border: none;
  border-radius: 50px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .3s;
  box-shadow: 0 8px 24px rgba(193,122,94,0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(193,122,94,0.4);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  background: transparent;
  border: 1.5px solid var(--clay);
  color: var(--clay);
  border-radius: 50px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s;
}

.btn-ghost:hover { background: var(--clay); color: white; }

.submit-area {
  text-align: center;
  padding: 28px 0;
  display: none;
}

.submit-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 20px;
  font-style: italic;
}

.error-msg {
  display: none;
  color: var(--rose);
  font-size: 13px;
  margin-top: 14px;
}

/* ── RESULTS ── */
#results { display: none; animation: riseUp .8s ease both; }

.result-hero { text-align: center; padding: 48px 0 36px; }

.result-badge {
  display: inline-block;
  padding: 6px 20px;
  border-radius: 30px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 24px;
}

.score-ring {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 3px solid;
  margin: 0 auto 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.score-ring::before {
  content:'';
  position:absolute;
  inset:6px;
  border-radius:50%;
  opacity:.08;
  background:currentColor;
}

.score-big {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
}

.score-max { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.result-level-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 8px;
}

/* ── PROBLEMATIZACIÓN ── */
.prob-card {
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 36px;
  margin-bottom: 20px;
  box-shadow: 0 4px 24px var(--shadow);
  line-height: 1.8;
}

.prob-card p {
  font-size: 15px;
  color: var(--ink-mid);
  margin-bottom: 14px;
  line-height: 1.8;
}

.prob-card p:last-child { margin-bottom: 0; }

.prob-card strong { color: var(--ink); font-weight: 500; }
.prob-card em { font-style: italic; color: var(--clay-dark); }

/* ── DIMS ── */
.dims-card {
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 16px;
  box-shadow: 0 2px 16px var(--shadow);
}

.dims-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 24px;
  color: var(--ink);
}

.dim-row { margin-bottom: 18px; }

.dim-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

.dim-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.dim-pct { font-size: 13px; font-weight: 600; }

.dim-track { height: 7px; background: var(--clay-pale); border-radius: 7px; overflow: hidden; }

.dim-fill {
  height: 100%;
  border-radius: 7px;
  width: 0%;
  transition: width 1.3s cubic-bezier(.4,0,.2,1);
}

/* ── CTA PAGO ── */
.cta-pago {
  background: var(--ink);
  border-radius: 20px;
  padding: 36px 32px;
  margin-bottom: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-pago::before {
  content:'';
  position:absolute;
  top:-40px; right:-40px;
  width:160px; height:160px;
  border-radius:50%;
  background:rgba(193,122,94,0.15);
}

.cta-pago-eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clay-light);
  margin-bottom: 14px;
  display: block;
}

.cta-pago-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  color: white;
  line-height: 1.2;
  margin-bottom: 10px;
}

.cta-pago-sub {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  max-width: 420px;
  margin: 0 auto 28px;
}

.cta-pago-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 40px;
  background: linear-gradient(135deg, var(--clay), var(--amber));
  color: white;
  border: none;
  border-radius: 50px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all .3s;
  box-shadow: 0 8px 28px rgba(193,122,94,0.35);
  letter-spacing: .3px;
  position: relative;
  z-index: 1;
}

.cta-pago-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(193,122,94,0.45);
}

.cta-pago-note {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  color: rgba(255,255,255,.3);
  position: relative;
  z-index: 1;
}

/* ── DISCLAIMER ── */
.disclaimer {
  background: rgba(201,160,82,0.1);
  border: 1px solid rgba(201,160,82,0.25);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.result-actions {
  text-align: center;
  padding: 8px 0 16px;
}

/* ── ANIMATIONS ── */
@keyframes riseUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── RESPONSIVE ── */
@media (max-width: 520px) {
  .wrap { padding: 0 16px 80px; }
  .card, .prob-card, .dims-card { padding: 20px 18px; }
  .scale-btn { padding: 8px 2px; }
  .scale-n { font-size: 14px; }
  h1 { font-size: 2rem; }
  .cta-pago { padding: 28px 20px; }
}