/* ─────────────────────────────────────────────
       Score C.L.A.R.O. — usa solo variables del template
       Light mode  → body  (default del template)
       Dark mode   → body.dark-theme
    ───────────────────────────────────────────── */
 
    .claro-wrap {
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      padding: 0 1rem;
      font-family: var(--ltr-main-font-f);
    }
 
    /* ── Header ── */
    .claro-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }
    .claro-header .claro-eyebrow {
      /* reutiliza .pre-title del template */
      display: inline-block;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--clr-main);
      background: rgba(var(--clr-main-rgb), .1);
      border: 1px solid rgba(var(--clr-main-rgb), .3);
      padding: 4px 14px;
      border-radius: 99px;
      margin-bottom: 1rem;
    }
    .claro-header h2 {
      font-size: clamp(1.8rem, 5vw, 2.75rem);
      font-weight: 700;
      line-height: 1.15;
      color: var(--clr-dark-blue);
      margin-bottom: .75rem;
    }
    body.dark-theme .claro-header h2 { color: var(--clr-white); }
    .claro-header h2 .claro-accent { color: var(--clr-main); }
    .claro-header p {
      font-size: 1rem;
      color: var(--clr-dark-grey);
      opacity: .85;
    }
    body.dark-theme .claro-header p { color: var(--clr-semi-dark); }
 
    /* ── Progress ── */
    .claro-progress-meta {
      display: flex;
      justify-content: space-between;
      font-size: .8rem;
      font-weight: 500;
      color: var(--clr-dark-grey);
      margin-bottom: .5rem;
    }
    body.dark-theme .claro-progress-meta { color: var(--clr-semi-dark); }
 
    .claro-progress-track {
      height: 4px;
      background: var(--clr-grey);
      border-radius: 99px;
      overflow: hidden;
      margin-bottom: 2rem;
    }
    body.dark-theme .claro-progress-track { background: var(--clr-semi-dark-blue); }
 
    .claro-progress-fill {
      height: 100%;
      background: var(--clr-main);
      border-radius: 99px;
      transition: width .4s ease;
    }
 
    /* ── Question card — reutiliza estilo .service-box ── */
    .claro-card {
      display: none;
      background: var(--clr-white);
      border: 1px solid rgba(var(--clr-main-rgb), .25);
      border-radius: .5rem;
      padding: 2rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 2px 12px rgba(var(--clr-dark-blue-rgb), .08);
      animation: claroFadeUp .28s ease both;
    }
    body.dark-theme .claro-card {
      background: var(--clr-semi-dark-blue);
      border-color: rgba(var(--clr-main-rgb), .2);
      box-shadow: 0 4px 20px rgba(0,0,0,.3);
    }
    .claro-card.active { display: block; }
    @keyframes claroFadeUp {
      from { opacity:0; transform:translateY(12px); }
      to   { opacity:1; transform:translateY(0); }
    }
 
    .claro-q-label {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--clr-main);
      margin-bottom: .6rem;
    }
    .claro-q-text {
      font-size: 1.1rem;
      font-weight: 600;
      line-height: 1.45;
      color: var(--clr-dark-blue);
      margin-bottom: 1.5rem;
    }
    body.dark-theme .claro-q-text { color: var(--clr-white); }
 
    /* ── Options ── */
    .claro-options { display: flex; flex-direction: column; gap: 8px; }
 
    .claro-opt {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      background: var(--clr-grey);
      border: 1.5px solid transparent;
      border-radius: .35rem;
      cursor: pointer;
      text-align: left;
      width: 100%;
      transition: border-color .18s, background .18s;
    }
    body.dark-theme .claro-opt { background: var(--clr-dark-blue); }
    .claro-opt:hover { border-color: var(--clr-main); }
    .claro-opt.selected {
      border-color: var(--clr-main);
      background: rgba(var(--clr-main-rgb), .08);
    }
 
    .claro-opt-badge {
      flex-shrink: 0;
      width: 26px; height: 26px;
      border-radius: 50%;
      background: rgba(var(--clr-main-rgb), .15);
      display: flex; align-items: center; justify-content: center;
      font-size: .75rem; font-weight: 700;
      color: var(--clr-main);
      transition: background .18s, color .18s;
    }
    .claro-opt.selected .claro-opt-badge,
    .claro-opt:hover .claro-opt-badge {
      background: var(--clr-main);
      color: var(--clr-white);
    }
    .claro-opt-text {
      font-size: .9rem;
      line-height: 1.55;
      color: var(--clr-dark-grey);
      padding-top: 3px;
    }
    body.dark-theme .claro-opt-text { color: var(--clr-semi-dark); }
    .claro-opt.selected .claro-opt-text { color: var(--clr-dark-blue); }
    body.dark-theme .claro-opt.selected .claro-opt-text { color: var(--clr-white); }
 
    /* ── Urgency slider ── */
    .claro-urg-num {
      font-size: 3.5rem;
      font-weight: 800;
      color: var(--clr-main);
      text-align: center;
      line-height: 1;
      margin: 1rem 0 .25rem;
    }
    .claro-urg-hint {
      text-align: center;
      font-size: .85rem;
      color: var(--clr-dark-grey);
      opacity: .75;
      min-height: 18px;
      margin-bottom: 1rem;
    }
    body.dark-theme .claro-urg-hint { color: var(--clr-semi-dark); }
    .claro-slider {
      width: 100%;
      accent-color: var(--clr-main);
      cursor: pointer;
    }
    .claro-slider-ends {
      display: flex;
      justify-content: space-between;
      font-size: .75rem;
      color: var(--clr-dark-grey);
      opacity: .6;
      margin-top: 6px;
    }
 
    /* ── Nav buttons — reutiliza .btn-solid / .btn-outline del template ── */
    .claro-nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 1.5rem;
    }
    .claro-nav.has-prev { justify-content: space-between; }
 
    /* ── Result card ── */
    #claro-result { display: none; }
    .claro-result-card {
      background: var(--clr-white);
      border: 1px solid rgba(var(--clr-main-rgb), .25);
      border-top: 4px solid var(--clr-main);
      border-radius: 0 0 .5rem .5rem;
      padding: 2.5rem 2rem;
      text-align: center;
      box-shadow: 0 2px 12px rgba(var(--clr-dark-blue-rgb), .08);
      animation: claroFadeUp .35s ease both;
    }
    body.dark-theme .claro-result-card {
      background: var(--clr-semi-dark-blue);
      box-shadow: 0 4px 20px rgba(0,0,0,.3);
    }
 
    .claro-result-badge {
      display: inline-block;
      padding: 4px 16px;
      border-radius: 99px;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 1.25rem;
    }
    .badge-green  { background:rgba(33,114,52,.12);  color:#217234; border:1px solid rgba(33,114,52,.3); }
    .badge-yellow { background:rgba(155,106,1,.12);  color:#9b6a01; border:1px solid rgba(155,106,1,.3); }
    .badge-orange { background:rgba(var(--clr-main-rgb),.12); color:var(--clr-main); border:1px solid rgba(var(--clr-main-rgb),.35); }
    .badge-violet { background:rgba(72,32,167,.12);  color:#4820a7; border:1px solid rgba(72,32,167,.3); }
 
    body.dark-theme .badge-green  { background:rgba(33,114,52,.2);  color:#4ade80; }
    body.dark-theme .badge-yellow { background:rgba(250,204,21,.15); color:#facc15; }
    body.dark-theme .badge-violet { background:rgba(168,85,247,.15); color:#c084fc; }
 
    .claro-score-ring {
      width: 100px; height: 100px;
      border-radius: 50%;
      border: 4px solid rgba(var(--clr-main-rgb), .3);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      margin: 0 auto 1.5rem;
    }
    .claro-score-ring .snum {
      font-size: 2.2rem; font-weight: 800; line-height: 1;
      color: var(--clr-main);
    }
    .claro-score-ring .sdenom { font-size: .7rem; color: var(--clr-dark-grey); margin-top: 2px; }
    body.dark-theme .claro-score-ring .sdenom { color: var(--clr-semi-dark); }
 
    .ring-green  { border-color: #217234; }
    .ring-yellow { border-color: #9b6a01; }
    .ring-orange { border-color: var(--clr-main); }
    .ring-violet { border-color: #4820a7; }
    body.dark-theme .ring-green  { border-color: #4ade80; }
    body.dark-theme .ring-yellow { border-color: #facc15; }
    body.dark-theme .ring-violet { border-color: #c084fc; }
 
    .txt-green  { color: #217234 !important; }
    .txt-yellow { color: #9b6a01 !important; }
    .txt-orange { color: var(--clr-main) !important; }
    .txt-violet { color: #4820a7 !important; }
    body.dark-theme .txt-green  { color: #4ade80 !important; }
    body.dark-theme .txt-yellow { color: #facc15 !important; }
    body.dark-theme .txt-violet { color: #c084fc !important; }
 
    .claro-result-title {
      font-size: 1.4rem; font-weight: 700;
      color: var(--clr-dark-blue);
      margin-bottom: .75rem; line-height: 1.3;
    }
    body.dark-theme .claro-result-title { color: var(--clr-white); }
 
    .claro-result-desc {
      font-size: .95rem;
      color: var(--clr-dark-grey);
      opacity: .85;
      line-height: 1.7;
      max-width: 460px;
      margin: 0 auto 2rem;
    }
    body.dark-theme .claro-result-desc { color: var(--clr-semi-dark); }
 
    .claro-restart {
      display: block; margin: 1rem auto 0;
      background: none; border: none;
      font-size: .85rem;
      color: var(--clr-dark-grey);
      cursor: pointer; text-decoration: underline;
      opacity: .65;
    }
    .claro-restart:hover { opacity: 1; color: var(--clr-main); }
 
    /* ── Mobile ── */
    @media (max-width: 480px) {
      .claro-card { padding: 1.25rem 1rem; }
      .claro-result-card { padding: 1.75rem 1rem; }
      .claro-q-text { font-size: 1rem; }
    }