/* ═══════════════════════════════════════════════
   TEST HORMONAL MASCULINO — Dr. Job Monobe
   v1.0.0 · Centro Médico Monobe
═══════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────── */
#ht-wrapper {
    --ht-primary:   #7B2FBE;
    --ht-secondary: #00D4AA;
    --ht-accent:    #FF6B35;
    --ht-dark:      #1A1A2E;
    --ht-text:      #2D2D2D;
    --ht-muted:     #6B7280;
    --ht-bg:        #F8F9FF;
    --ht-white:     #FFFFFF;
    --ht-radius:    16px;
    --ht-shadow:    0 8px 32px rgba(0,0,0,0.12);
    --ht-transition: 0.35s cubic-bezier(0.4,0,0.2,1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ht-text);
    background: var(--ht-bg);
}

/* ── Screens ───────────────────────────────── */
.ht-wrapper { max-width: 780px; margin: 0 auto; padding: 16px; }
.ht-screen  { display: none; }
.ht-screen.active { display: block; animation: htFadeIn .4s ease; }
@keyframes htFadeIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* ── INTRO ─────────────────────────────────── */
.ht-intro-hero {
    position: relative;
    background: linear-gradient(135deg, #1A1A2E 0%, #16213E 40%, #0F3460 100%);
    border-radius: 24px;
    padding: 48px 32px;
    overflow: hidden;
    text-align: center;
    min-height: 580px;
    display: flex; align-items: center; justify-content: center;
}
.ht-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    animation: htOrb 8s ease-in-out infinite alternate;
}
.ht-orb-1 { width:280px;height:280px; background:#7B2FBE; top:-80px; right:-60px; }
.ht-orb-2 { width:200px;height:200px; background:#00D4AA; bottom:-60px; left:-40px; animation-delay:2s; }
.ht-orb-3 { width:150px;height:150px; background:#FF6B35; top:50%; left:20%; animation-delay:4s; }
@keyframes htOrb { from{transform:translate(0,0) scale(1);} to{transform:translate(20px,20px) scale(1.1);} }

.ht-intro-content { position:relative; z-index:2; max-width:600px; margin:0 auto; }
.ht-intro-icon { font-size:72px; margin-bottom:16px; display:block; animation: htPulse 2s ease-in-out infinite; }
@keyframes htPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
.ht-intro-title { font-size: clamp(24px,5vw,38px); font-weight:800; color:#FFFFFF; margin:0 0 8px; line-height:1.2; }
.ht-intro-subtitle { font-size:16px; color:rgba(255,255,255,0.7); margin:0 0 28px; }
.ht-intro-description p { font-size:15px; color:rgba(255,255,255,0.85); line-height:1.7; margin-bottom:24px; }

.ht-intro-features {
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px;
}
.ht-feat {
    background:rgba(255,255,255,0.1); border-radius:12px; padding:14px 8px;
    text-align:center; border:1px solid rgba(255,255,255,0.15);
}
.ht-feat span { font-size:28px; display:block; margin-bottom:8px; }
.ht-feat p { margin:0; font-size:12px; color:rgba(255,255,255,0.85); line-height:1.4; }
.ht-feat strong { display:block; font-size:14px; color:#FFFFFF; }

.ht-intro-disclaimer {
    display:flex; gap:10px; align-items:flex-start;
    background:rgba(255,107,53,0.2); border:1px solid rgba(255,107,53,0.4);
    border-radius:10px; padding:14px; margin-bottom:28px; text-align:left;
}
.ht-intro-disclaimer span { font-size:20px; flex-shrink:0; }
.ht-intro-disclaimer p { margin:0; font-size:13px; color:rgba(255,255,255,0.8); }

.ht-btn-start {
    display:inline-flex; align-items:center; gap:12px;
    background:linear-gradient(135deg, #7B2FBE, #00D4AA);
    color:#FFF; font-size:18px; font-weight:700;
    padding:18px 40px; border-radius:50px; border:none; cursor:pointer;
    transition:var(--ht-transition); box-shadow:0 8px 24px rgba(123,47,190,0.4);
}
.ht-btn-start:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(123,47,190,0.6); }
.ht-btn-arrow { font-size:22px; transition:transform .3s; }
.ht-btn-start:hover .ht-btn-arrow { transform:translateX(6px); }

/* ── PROGRESS ──────────────────────────────── */
.ht-progress-bar-wrap {
    background:#FFF; border-radius:12px; padding:16px 20px; margin-bottom:20px;
    box-shadow:0 2px 12px rgba(0,0,0,0.08);
}
.ht-progress-info { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ht-seccion-label { font-size:13px; font-weight:600; color:var(--ht-primary); }
#ht-progress-text { font-size:13px; color:var(--ht-muted); }
.ht-progress-track { height:8px; background:#E8E8F0; border-radius:4px; overflow:hidden; }
.ht-progress-fill {
    height:100%; border-radius:4px;
    background:linear-gradient(90deg, var(--ht-primary), var(--ht-secondary));
    transition:width .4s ease;
}

/* ── QUESTION ──────────────────────────────── */
.ht-question-area { position:relative; min-height:400px; }
.ht-question-slide { display:none; animation:htFadeIn .35s ease; }
.ht-question-slide.active { display:block; }

.ht-q-header {
    display:flex; align-items:center; gap:10px;
    margin-bottom:20px;
    padding:10px 16px; border-radius:10px;
    background:color-mix(in srgb, var(--q-color) 15%, transparent);
    border-left:4px solid var(--q-color);
}
.ht-q-emoji { font-size:28px; }
.ht-q-seccion { font-size:13px; font-weight:600; color:var(--q-color); }

.ht-q-text {
    font-size:clamp(17px,4vw,22px); font-weight:700; color:var(--ht-dark);
    line-height:1.4; margin:0 0 24px;
}

.ht-options-grid { display:grid; gap:12px; }

.ht-option-btn {
    width:100%; text-align:left; padding:18px 20px 18px 52px;
    font-size:15px; font-weight:500; color:var(--ht-dark);
    background:#FFF; border:2px solid #E5E7EB; border-radius:14px;
    cursor:pointer; transition:var(--ht-transition);
    position:relative; line-height:1.4;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.ht-opt-indicator {
    position:absolute; left:18px; top:50%; transform:translateY(-50%);
    width:20px; height:20px; border-radius:50%;
    border:2px solid #D1D5DB;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; color:transparent;
    transition:var(--ht-transition);
}
.ht-option-btn:hover {
    border-color:var(--q-color,#7B2FBE);
    background:color-mix(in srgb, var(--q-color,#7B2FBE) 6%, #FFF);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,0.1);
}
.ht-option-btn:hover .ht-opt-indicator {
    border-color:var(--q-color,#7B2FBE);
    color:var(--q-color,#7B2FBE);
}
.ht-option-btn.selected {
    border-color:var(--q-color,#7B2FBE);
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--q-color,#7B2FBE) 12%, #FFF),
        color-mix(in srgb, var(--q-color,#7B2FBE) 6%, #FFF)
    );
    color:var(--ht-dark);
    transform:translateY(-2px);
    box-shadow:0 6px 20px color-mix(in srgb, var(--q-color,#7B2FBE) 25%, transparent);
}
.ht-option-btn.selected .ht-opt-indicator {
    background:var(--q-color,#7B2FBE);
    border-color:var(--q-color,#7B2FBE);
    color:#FFF;
}

/* ── NAV / DOTS ────────────────────────────── */
.ht-quiz-nav { display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.ht-nav-btn {
    padding:10px 22px; border-radius:8px; border:2px solid #E5E7EB;
    background:#FFF; color:var(--ht-text); font-size:14px; cursor:pointer;
    transition:var(--ht-transition);
}
.ht-nav-btn:hover { border-color:var(--ht-primary); color:var(--ht-primary); }
.ht-dots-wrap { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:60%; }
.ht-dot {
    width:8px; height:8px; border-radius:50%; background:#D1D5DB;
    transition:var(--ht-transition);
}
.ht-dot.active { background:var(--ht-primary); width:20px; border-radius:4px; }
.ht-dot.answered { background:var(--ht-secondary); }

/* ── FORM ──────────────────────────────────── */
.ht-form-wrap {
    background:#FFF; border-radius:24px; padding:40px 32px;
    box-shadow:var(--ht-shadow);
}
.ht-form-hero { text-align:center; margin-bottom:32px; }
.ht-form-icon { font-size:56px; display:block; margin-bottom:12px; }
.ht-form-hero h2 { font-size:24px; font-weight:800; color:var(--ht-dark); margin:0 0 8px; }
.ht-form-hero p { font-size:15px; color:var(--ht-muted); margin:0; }
.ht-form-fields { max-width:480px; margin:0 auto; }
.ht-field-group { margin-bottom:20px; }
.ht-field-group label { display:block; font-size:14px; font-weight:600; margin-bottom:7px; color:var(--ht-dark); }
.ht-field-group input,
.ht-field-group select {
    width:100%; padding:14px 16px; font-size:15px;
    border:2px solid #E5E7EB; border-radius:12px; background:#FAFAFA;
    transition:var(--ht-transition); outline:none; box-sizing:border-box;
}
.ht-field-group input:focus,
.ht-field-group select:focus { border-color:var(--ht-primary); background:#FFF; box-shadow:0 0 0 4px rgba(123,47,190,0.1); }
.ht-privacy-note {
    font-size:13px; color:var(--ht-muted); padding:12px; background:#F3F4F6;
    border-radius:8px; margin-bottom:24px; text-align:center;
}
.ht-btn-result {
    width:100%; padding:18px; font-size:17px; font-weight:700;
    background:linear-gradient(135deg, #7B2FBE, #00D4AA);
    color:#FFF; border:none; border-radius:50px; cursor:pointer;
    transition:var(--ht-transition); box-shadow:0 6px 20px rgba(123,47,190,0.3);
}
.ht-btn-result:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(123,47,190,0.45); }
.ht-btn-result:disabled { opacity:0.6; cursor:not-allowed; transform:none; }

/* ── RESULT CARD ───────────────────────────── */
.ht-result-card {
    background:#FFF; border-radius:24px; overflow:hidden;
    box-shadow:var(--ht-shadow); margin-bottom:20px;
}
.ht-result-header {
    padding:40px 32px; text-align:center;
    background:linear-gradient(135deg, #1A1A2E 0%, #16213E 60%, #0F3460 100%);
    color:#FFF;
}
.ht-res-brand {
    display:flex; align-items:center; gap:12px; justify-content:center;
    margin-bottom:24px; opacity:0.85;
}
.ht-res-logo { font-size:28px; }
.ht-res-brand div { text-align:left; }
.ht-res-brand strong { display:block; font-size:14px; font-weight:700; }
.ht-res-brand span { font-size:12px; opacity:0.7; }
.ht-res-emoji { font-size:60px; display:block; margin-bottom:12px; animation:htPulse 2s ease infinite; }
.ht-result-header h2 { font-size:clamp(18px,4vw,26px); font-weight:800; margin:0 0 8px; }
.ht-res-nombre { font-size:16px; color:rgba(255,255,255,0.75); margin:0 0 24px; }

.ht-score-ring-wrap { display:flex; justify-content:center; margin:24px 0 16px; }
.ht-score-ring {
    width:110px; height:110px; border-radius:50%;
    border:6px solid rgba(255,255,255,0.2);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.1); position:relative;
}
.ht-score-ring span { font-size:30px; font-weight:800; color:#FFF; line-height:1; }
.ht-score-ring small { font-size:11px; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:1px; }
.ht-riesgo-badge {
    display:inline-block; padding:6px 20px; border-radius:50px;
    font-size:13px; font-weight:700; color:#FFF;
    background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3);
    margin-top:12px;
}

.ht-result-body { padding:32px; }
.ht-res-descripcion { font-size:15px; line-height:1.7; color:var(--ht-muted); margin-bottom:28px; }

/* Chart sections */
.ht-chart-section, .ht-bars-section, .ht-labs-section, .ht-consejos-section {
    margin-bottom:32px;
}
.ht-chart-section h3, .ht-bars-section h3,
.ht-labs-section h3, .ht-consejos-section h3 {
    font-size:17px; font-weight:700; color:var(--ht-dark);
    margin:0 0 16px; padding-bottom:10px;
    border-bottom:2px solid #F0F0F8;
}
.ht-radar-wrap { max-width:380px; margin:0 auto; }

/* Hormone bars */
.ht-bar-item { margin-bottom:14px; }
.ht-bar-label {
    display:flex; justify-content:space-between; align-items:center;
    font-size:13px; font-weight:600; margin-bottom:6px;
}
.ht-bar-track { height:12px; background:#F0F0F8; border-radius:6px; overflow:hidden; }
.ht-bar-fill { height:100%; border-radius:6px; transition:width .8s cubic-bezier(0.4,0,0.2,1); }

/* Labs grid */
.ht-labs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.ht-lab-item {
    display:flex; align-items:center; gap:8px;
    padding:10px 14px; background:#F8F9FF;
    border-radius:10px; border:1px solid #E8E8F5;
    font-size:13px; font-weight:500; color:var(--ht-dark);
}
.ht-lab-item::before { content:'🧪'; font-size:14px; }

/* Consejos */
.ht-consejos-grid { display:grid; gap:14px; }
.ht-consejo-card {
    padding:20px; border-radius:16px; border:1px solid #E8E8F5;
    background:#FFF; transition:var(--ht-transition);
}
.ht-consejo-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.ht-consejo-card.especial {
    background:linear-gradient(135deg, #FFF8F0, #FFF3F3);
    border-color:#FFD0C0;
}
.ht-consejo-card.link-card {
    background:linear-gradient(135deg, #F0F4FF, #F0FFF8);
    border-color:#C0D8FF;
}
.ht-consejo-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ht-consejo-icon { font-size:28px; }
.ht-consejo-titulo { font-size:15px; font-weight:700; color:var(--ht-dark); }
.ht-consejo-texto { font-size:14px; line-height:1.6; color:var(--ht-muted); margin:0; }
.ht-consejo-texto a { color:var(--ht-primary); font-weight:600; }

/* CTA section */
.ht-cta-section { margin-top:8px; }
.ht-cta-card {
    background:linear-gradient(135deg, #1A1A2E 0%, #0F3460 100%);
    border-radius:20px; padding:32px; text-align:center; color:#FFF;
}
.ht-cta-card h3 { font-size:20px; font-weight:800; margin:0 0 12px; }
.ht-cta-card p { font-size:14px; line-height:1.7; color:rgba(255,255,255,0.8); margin:0 0 24px; }
.ht-cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ht-cta-btn {
    padding:14px 28px; border-radius:50px; font-size:15px; font-weight:700;
    text-decoration:none; transition:var(--ht-transition);
}
.ht-cta-btn.primary {
    background:linear-gradient(135deg, #7B2FBE, #00D4AA);
    color:#FFF; box-shadow:0 4px 16px rgba(123,47,190,0.4);
}
.ht-cta-btn.secondary {
    background:rgba(255,255,255,0.15); color:#FFF;
    border:2px solid rgba(255,255,255,0.3);
}
.ht-cta-btn:hover { transform:translateY(-2px); opacity:.9; }
.ht-res-fecha { font-size:12px; color:var(--ht-muted); text-align:center; margin-top:16px; }

/* ── EXPORT BAR ────────────────────────────── */
.ht-export-bar {
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:8px;
}
.ht-export-btn {
    padding:13px 22px; border-radius:50px; border:none; font-size:14px; font-weight:600;
    cursor:pointer; transition:var(--ht-transition);
}
.ht-export-btn.jpg { background:linear-gradient(135deg,#FF6B35,#FF8E53); color:#FFF; }
.ht-export-btn.pdf { background:linear-gradient(135deg,#E63946,#C1121F); color:#FFF; }
.ht-export-btn.share { background:linear-gradient(135deg,#7B2FBE,#9B59B6); color:#FFF; }
.ht-export-btn.repeat { background:#F3F4F6; color:var(--ht-dark); border:2px solid #E5E7EB; }
.ht-export-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.15); }

/* ── LOADING ───────────────────────────────── */
.ht-loading {
    position:fixed; inset:0; background:rgba(26,26,46,0.85);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    z-index:9999; backdrop-filter:blur(6px);
}
.ht-spinner {
    width:56px; height:56px; border:5px solid rgba(255,255,255,0.2);
    border-top-color:#00D4AA; border-radius:50%;
    animation:htSpin .8s linear infinite; margin-bottom:16px;
}
@keyframes htSpin { to{transform:rotate(360deg);} }
.ht-loading p { color:#FFF; font-size:16px; font-weight:600; }

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width:600px) {
    .ht-wrapper { padding: 8px; }
    .ht-intro-hero { padding: 32px 20px; min-height: auto; }
    .ht-intro-features { grid-template-columns: repeat(2,1fr); }
    .ht-form-wrap { padding: 28px 20px; }
    .ht-result-body { padding: 20px; }
    .ht-result-header { padding: 28px 20px; }
    .ht-option-btn { padding: 16px 16px 16px 44px; font-size: 14px; }
    .ht-cta-btns { flex-direction: column; }
    .ht-labs-grid { grid-template-columns: 1fr; }
    .ht-export-bar { flex-direction: column; }
    .ht-export-btn { width: 100%; }
}
@media (max-width:400px) {
    .ht-intro-title { font-size:22px; }
    .ht-q-text { font-size:16px; }
    .ht-dots-wrap { max-width:80%; }
}