<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test de Doshas · Giacinto Bodywork Lmt </title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #4D2F1C;
--bg2: #37210D;
--bg3: #2E1C0E;
--bg4: #381F0F;
--border: rgba(201,169,110,0.12);
--border2: rgba(201,169,110,0.22);
--gold: #C9A96E;
--gold-dim: rgba(201,169,110,0.12);
--text: #E8DBC1;
--text-dim: rgba(240,232,216,1.00);
--vata: #9B8FD4;
--vata-dim: rgba(155,143,212,0.14);
--vata-glow: rgba(155,143,212,0.30);
--pitta: #E07B30;
--pitta-dim: rgba(224,123,48,0.14);
--pitta-glow:rgba(224,123,48,0.30);
--kapha: #3BAD6A;
--kapha-dim: rgba(59,173,106,0.14);
--kapha-glow:rgba(59,173,106,0.30);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Cormorant Garamond', Georgia, serif;
min-height: 100vh;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 70% 50% at 15% 5%, rgba(155,143,212,0.05) 0%, transparent 65%),
radial-gradient(ellipse 55% 40% at 85% 85%, rgba(59,173,106,0.04) 0%, transparent 65%),
radial-gradient(ellipse 45% 35% at 55% 40%, rgba(224,123,48,0.03) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.wrapper {
position: relative;
z-index: 1;
max-width: 700px;
margin: 0 auto;
padding: 0 20px 72px;
}
/* ── LANG TOGGLE ── */
.lang-bar {
display: flex;
justify-content: flex-end;
padding: 16px 0 0;
gap: 6px;
}
.lang-btn {
background: transparent;
border: 1px solid var(--border2);
color: var(--text-dim);
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 5px 12px;
cursor: pointer;
border-radius: 3px;
transition: all 0.2s;
}
.lang-btn.active {
border-color: var(--gold);
color: var(--gold);
background: var(--gold-dim);
}
/* ── HEADER ── */
.site-header {
text-align: center;
padding: 36px 0 30px;
border-bottom: 1px solid var(--border);
margin-bottom: 32px;
}
.studio-name {
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
opacity: 0.75;
}
.site-header h1 {
font-family: 'Cinzel', serif;
font-size: clamp(20px, 5vw, 30px);
font-weight: 600;
letter-spacing: 0.07em;
line-height: 1.25;
margin-bottom: 10px;
}
.site-header p {
font-size: 15px;
color: var(--text-dim);
font-style: italic;
font-weight: 300;
line-height: 1.55;
}
/* bilingual subtitle spans */
.es-text, .en-text { transition: opacity 0.3s; }
body.lang-en .es-text { display: none; }
body.lang-es .en-text { display: none; }
/* ── PROGRESS ── */
.progress-wrap { margin-bottom: 32px; }
.progress-meta {
display: flex;
justify-content: space-between;
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 7px;
}
.progress-track {
height: 2px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #A07840, var(--gold));
border-radius: 2px;
transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
width: 0%;
}
/* ── SECTION DIVIDER ── */
.section-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 36px 0 20px;
}
.section-divider::before,
.section-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.section-divider span {
font-family: 'Inter', sans-serif;
font-size: 8.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
white-space: nowrap;
opacity: 0.8;
}
/* ── QUESTION CARD ── */
.q-card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px 22px 18px;
margin-bottom: 12px;
transition: border-color 0.25s;
}
.q-card:hover { border-color: var(--border2); }
.q-number {
font-family: 'Inter', sans-serif;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--gold);
opacity: 0.6;
margin-bottom: 4px;
}
.q-title {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--text);
margin-bottom: 14px;
line-height: 1.4;
}
.q-title .sep { color: var(--gold); opacity: 0.4; margin: 0 5px; }
/* ── OPTIONS ── */
.opts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
}
.opt { position: relative; cursor: pointer; }
.opt input[type="radio"] {
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.opt-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
padding: 11px 7px 10px;
border-radius: 7px;
border: 1px solid var(--border);
background: var(--bg3);
cursor: pointer;
transition: all 0.2s ease;
gap: 6px;
min-height: 80px;
}
.opt-label:hover {
border-color: var(--border2);
background: var(--bg4);
}
.opt-badge {
font-family: 'Inter', sans-serif;
font-size: 8px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 10px;
flex-shrink: 0;
}
.badge-vata { background: var(--vata-dim); color: var(--vata); }
.badge-pitta { background: var(--pitta-dim); color: var(--pitta); }
.badge-kapha { background: var(--kapha-dim); color: var(--kapha); }
.opt-es, .opt-en {
font-size: 12px;
line-height: 1.3;
color: var(--text);
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
}
.opt-en { color: var(--text-dim); font-style: italic; font-size: 11px; }
body.lang-en .opt-es { display: none; }
body.lang-en .opt-en { color: var(--text); font-style: normal; font-size: 12px; }
body.lang-es .opt-en { display: none; }
/* Checked states */
.opt input[value="vata"]:checked ~ .opt-label {
background: var(--vata-dim);
border-color: var(--vata);
box-shadow: 0 0 0 1px var(--vata-glow);
}
.opt input[value="vata"]:checked ~ .opt-label .opt-es,
.opt input[value="vata"]:checked ~ .opt-label .opt-en { color: #B8ADDF; }
.opt input[value="pitta"]:checked ~ .opt-label {
background: var(--pitta-dim);
border-color: var(--pitta);
box-shadow: 0 0 0 1px var(--pitta-glow);
}
.opt input[value="pitta"]:checked ~ .opt-label .opt-es,
.opt input[value="pitta"]:checked ~ .opt-label .opt-en { color: #F0A870; }
.opt input[value="kapha"]:checked ~ .opt-label {
background: var(--kapha-dim);
border-color: var(--kapha);
box-shadow: 0 0 0 1px var(--kapha-glow);
}
.opt input[value="kapha"]:checked ~ .opt-label .opt-es,
.opt input[value="kapha"]:checked ~ .opt-label .opt-en { color: #70D898; }
/* ── ACTION ── */
.action-area {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.val-msg {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: #D97070;
letter-spacing: 0.06em;
opacity: 0;
transition: opacity 0.3s;
text-align: center;
}
.val-msg.show { opacity: 1; }
.counter-note {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.07em;
}
#resp-count { color: var(--gold); font-weight: 500; }
.btn-calc {
background: transparent;
border: 1px solid var(--gold);
color: var(--gold);
font-family: 'Cinzel', serif;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 15px 50px;
cursor: pointer;
border-radius: 3px;
position: relative;
overflow: hidden;
transition: color 0.3s;
}
.btn-calc::before {
content: '';
position: absolute;
inset: 0;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
z-index: 0;
}
.btn-calc:hover::before { transform: scaleX(1); }
.btn-calc:hover { color: var(--bg); }
.btn-calc span { position: relative; z-index: 1; }
/* ── RESULT ── */
#result-screen {
display: none;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
#result-screen.show { opacity: 1; transform: translateY(0); }
.result-header {
text-align: center;
padding: 44px 0 32px;
border-bottom: 1px solid var(--border);
margin-bottom: 36px;
}
.result-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.8;
margin-bottom: 10px;
}
.result-dosha {
font-family: 'Cinzel', serif;
font-size: clamp(40px, 9vw, 58px);
font-weight: 700;
letter-spacing: 0.06em;
margin-bottom: 10px;
color: var(--dosha-color, var(--gold));
}
.result-sub {
font-size: 17px;
font-style: italic;
color: var(--text-dim);
font-weight: 300;
line-height: 1.5;
}
/* Prakriti badge */
.prakriti-badge {
display: inline-block;
margin-top: 16px;
padding: 6px 18px;
border: 1px solid var(--border2);
border-radius: 20px;
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
}
/* Bars */
.bars-section { margin-bottom: 36px; }
.bar-row {
display: grid;
grid-template-columns: 80px 1fr 46px;
align-items: center;
gap: 12px;
margin-bottom: 13px;
}
.bar-label {
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: right;
}
.bar-track {
height: 7px;
background: var(--bg3);
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--border);
}
.bar-fill {
height: 100%;
border-radius: 4px;
width: 0%;
transition: width 1.3s cubic-bezier(0.4,0,0.2,1);
}
.bar-pct {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
}
.vata-bar { background: linear-gradient(90deg, #6A60A8, var(--vata)); }
.pitta-bar { background: linear-gradient(90deg, #A85018, var(--pitta)); }
.kapha-bar { background: linear-gradient(90deg, #1A7040, var(--kapha)); }
/* Desc card */
.desc-card {
background: var(--bg2);
border: 1px solid var(--border);
border-top: 3px solid var(--dosha-color, var(--gold));
border-radius: 10px;
padding: 26px 26px 22px;
margin-bottom: 24px;
}
.desc-card h3 {
font-family: 'Cinzel', serif;
font-size: 12px;
letter-spacing: 0.13em;
color: var(--gold);
margin-bottom: 12px;
}
.desc-card p {
font-size: 15.5px;
line-height: 1.78;
color: var(--text);
font-weight: 300;
margin-bottom: 14px;
}
.desc-card p:last-child { margin-bottom: 0; }
.desc-card .rec-title {
font-family: 'Inter', sans-serif;
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.7;
margin-bottom: 8px;
margin-top: 18px;
}
.combo-note {
font-size: 14px;
color: var(--text-dim);
font-style: italic;
text-align: center;
line-height: 1.65;
margin-bottom: 34px;
padding: 0 8px;
}
/* Vikriti note */
.vikriti-note {
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 32px;
font-size: 13px;
color: var(--text-dim);
line-height: 1.6;
text-align: center;
}
.vikriti-note strong { color: var(--gold); font-weight: 500; }
.btn-reset {
display: block;
width: 100%;
max-width: 260px;
margin: 0 auto;
background: transparent;
border: 1px solid var(--border2);
color: var(--text-dim);
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 13px 20px;
cursor: pointer;
border-radius: 3px;
transition: all 0.3s;
}
.btn-reset:hover { border-color: var(--gold); color: var(--gold); }
/* Footer */
.site-footer {
text-align: center;
padding-top: 40px;
border-top: 1px solid var(--border);
margin-top: 60px;
}
.site-footer p {
font-family: 'Inter', sans-serif;
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
opacity: 0.4;
}
/* Mobile */
@media (max-width: 500px) {
.opts { gap: 5px; }
.opt-label { padding: 9px 5px 8px; min-height: 72px; }
.opt-es, .opt-en { font-size: 11px; }
.q-card { padding: 17px 15px 15px; }
.bar-row { grid-template-columns: 64px 1fr 38px; gap: 8px; }
.desc-card { padding: 20px 18px 18px; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.q-card { animation: fadeUp 0.35s ease both; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
</style>
</head>
<body class="lang-es">
<div class="wrapper">
<!-- Lang toggle -->
<div class="lang-bar">
<button class="lang-btn active" onclick="setLang('es')">ES</button>
<button class="lang-btn" onclick="setLang('en')">EN</button>
</div>
<!-- Header -->
<header class="site-header">
<p class="studio-name">Giacinto Bodywork Studio · Katy, TX</p>
<h1>
<span class="es-text">Test de Doshas</span>
<span class="en-text">Dosha Assessment</span>
</h1>
<p>
<span class="es-text">Descubre tu Prakriti — tu naturaleza constitucional según el Ayurveda</span>
<span class="en-text">Discover your Prakriti — your constitutional nature according to Ayurveda</span>
</p>
</header>
<!-- QUIZ -->
<div id="quiz-screen">
<div class="progress-wrap">
<div class="progress-meta">
<span class="es-text">Progreso</span><span class="en-text">Progress</span>
<span id="prog-label">0 / 22</span>
</div>
<div class="progress-track">
<div class="progress-fill" id="prog-fill"></div>
</div>
</div>
<!-- ══ SECTION 1 — FISIOLOGÍA ══ -->
<div class="section-divider">
<span><span class="es-text">Fisiología</span><span class="en-text">Physiology</span></span>
</div>
<!-- Q1 -->
<div class="q-card">
<p class="q-number">01</p>
<p class="q-title">
<span class="es-text">Forma general del cuerpo</span>
<span class="en-text">General body build</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q1" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Delgado, irregular, difícil ganar peso</span>
<span class="opt-en">Thin, irregular, hard to gain weight</span>
</span></label>
<label class="opt"><input type="radio" name="q1" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Mediano, atlético, muscular</span>
<span class="opt-en">Medium, athletic, muscular</span>
</span></label>
<label class="opt"><input type="radio" name="q1" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Robusto, grande, gana peso fácil</span>
<span class="opt-en">Large, solid, gains weight easily</span>
</span></label>
</div>
</div>
<!-- Q2 -->
<div class="q-card">
<p class="q-number">02</p>
<p class="q-title">
<span class="es-text">Digestión natural</span>
<span class="en-text">Natural digestion</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q2" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Irregular, gases, distensión</span>
<span class="opt-en">Irregular, gas, bloating</span>
</span></label>
<label class="opt"><input type="radio" name="q2" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Fuerte, rápida, se irrita si no come</span>
<span class="opt-en">Strong, fast, irritable if skipped</span>
</span></label>
<label class="opt"><input type="radio" name="q2" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Lenta, pesada, saciedad prolongada</span>
<span class="opt-en">Slow, heavy, prolonged fullness</span>
</span></label>
</div>
</div>
<!-- Q3 -->
<div class="q-card">
<p class="q-number">03</p>
<p class="q-title">
<span class="es-text">Temperatura basal</span>
<span class="en-text">Baseline body temperature</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q3" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Frío, manos y pies helados</span>
<span class="opt-en">Cold, icy hands and feet</span>
</span></label>
<label class="opt"><input type="radio" name="q3" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Caliente, sudoración frecuente</span>
<span class="opt-en">Warm, tends to sweat easily</span>
</span></label>
<label class="opt"><input type="radio" name="q3" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Fresco, tolera el calor y el frío</span>
<span class="opt-en">Cool, tolerates both heat and cold</span>
</span></label>
</div>
</div>
<!-- Q4 -->
<div class="q-card">
<p class="q-number">04</p>
<p class="q-title">
<span class="es-text">Piel natural</span>
<span class="en-text">Natural skin type</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q4" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Seca, fina, fría al tacto</span>
<span class="opt-en">Dry, thin, cool to the touch</span>
</span></label>
<label class="opt"><input type="radio" name="q4" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Suave, rojiza, sensible, acné</span>
<span class="opt-en">Soft, reddish, sensitive, acne-prone</span>
</span></label>
<label class="opt"><input type="radio" name="q4" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Gruesa, húmeda, poros visibles</span>
<span class="opt-en">Thick, moist, large pores</span>
</span></label>
</div>
</div>
<!-- Q5 -->
<div class="q-card">
<p class="q-number">05</p>
<p class="q-title">
<span class="es-text">Nivel de energía natural</span>
<span class="en-text">Natural energy level</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q5" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">En ráfagas, se agota rápido</span>
<span class="opt-en">Bursts of energy, tires quickly</span>
</span></label>
<label class="opt"><input type="radio" name="q5" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Alta, intensa pero se agota</span>
<span class="opt-en">High, intense but burns out</span>
</span></label>
<label class="opt"><input type="radio" name="q5" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Sostenida, constante todo el día</span>
<span class="opt-en">Steady, consistent throughout day</span>
</span></label>
</div>
</div>
<!-- Q6 -->
<div class="q-card">
<p class="q-number">06</p>
<p class="q-title">
<span class="es-text">Ritmo mental natural</span>
<span class="en-text">Natural mental pace</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q6" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Rápido, salta de idea en idea</span>
<span class="opt-en">Fast, jumps between ideas</span>
</span></label>
<label class="opt"><input type="radio" name="q6" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Agudo, enfocado, analítico</span>
<span class="opt-en">Sharp, focused, analytical</span>
</span></label>
<label class="opt"><input type="radio" name="q6" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Lento, reflexivo, metódico</span>
<span class="opt-en">Slow, reflective, methodical</span>
</span></label>
</div>
</div>
<!-- Q7 -->
<div class="q-card">
<p class="q-number">07</p>
<p class="q-title">
<span class="es-text">Patrón de sueño natural</span>
<span class="en-text">Natural sleep pattern</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q7" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Ligero, se despierta de noche</span>
<span class="opt-en">Light, wakes up during the night</span>
</span></label>
<label class="opt"><input type="radio" name="q7" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Moderado, sueños vívidos</span>
<span class="opt-en">Moderate, vivid dreams</span>
</span></label>
<label class="opt"><input type="radio" name="q7" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Profundo, difícil despertar</span>
<span class="opt-en">Deep, hard to wake up</span>
</span></label>
</div>
</div>
<!-- Q8 -->
<div class="q-card">
<p class="q-number">08</p>
<p class="q-title">
<span class="es-text">Ojos</span>
<span class="en-text">Eyes</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q8" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Pequeños, secos, nerviosos</span>
<span class="opt-en">Small, dry, darting</span>
</span></label>
<label class="opt"><input type="radio" name="q8" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Penetrantes, rojizos, afilados</span>
<span class="opt-en">Penetrating, reddish, sharp</span>
</span></label>
<label class="opt"><input type="radio" name="q8" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Grandes, calmados, expresivos</span>
<span class="opt-en">Large, calm, expressive</span>
</span></label>
</div>
</div>
<!-- Q9 -->
<div class="q-card">
<p class="q-number">09</p>
<p class="q-title">
<span class="es-text">Manos</span>
<span class="en-text">Hands</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q9" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Frías, secas, delgadas</span>
<span class="opt-en">Cold, dry, thin</span>
</span></label>
<label class="opt"><input type="radio" name="q9" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Calientes, sudorosas, rosadas</span>
<span class="opt-en">Warm, sweaty, pink</span>
</span></label>
<label class="opt"><input type="radio" name="q9" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Frescas, suaves, bien formadas</span>
<span class="opt-en">Cool, soft, well-formed</span>
</span></label>
</div>
</div>
<!-- Q10 -->
<div class="q-card">
<p class="q-number">10</p>
<p class="q-title">
<span class="es-text">Uñas</span>
<span class="en-text">Nails</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q10" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Delgadas, quebradizas, irregulares</span>
<span class="opt-en">Thin, brittle, irregular</span>
</span></label>
<label class="opt"><input type="radio" name="q10" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Suaves, rosadas, bien definidas</span>
<span class="opt-en">Soft, pink, well-defined</span>
</span></label>
<label class="opt"><input type="radio" name="q10" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Gruesas, blancas, fuertes</span>
<span class="opt-en">Thick, white, strong</span>
</span></label>
</div>
</div>
<!-- ══ SECTION 2 — ESTADO ACTUAL ══ -->
<div class="section-divider">
<span><span class="es-text">Estado Actual (Vikriti)</span><span class="en-text">Current State (Vikriti)</span></span>
</div>
<!-- Q11 -->
<div class="q-card">
<p class="q-number">11</p>
<p class="q-title">
<span class="es-text">Tendencia de peso</span>
<span class="en-text">Natural weight tendency</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q11" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Pierdo peso con facilidad</span>
<span class="opt-en">Lose weight easily</span>
</span></label>
<label class="opt"><input type="radio" name="q11" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Peso constante y estable</span>
<span class="opt-en">Stable, consistent weight</span>
</span></label>
<label class="opt"><input type="radio" name="q11" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Gano peso con facilidad</span>
<span class="opt-en">Gain weight easily</span>
</span></label>
</div>
</div>
<!-- Q12 -->
<div class="q-card">
<p class="q-number">12</p>
<p class="q-title">
<span class="es-text">Apetito actual</span>
<span class="en-text">Current appetite</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q12" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Irregular, olvido comer</span>
<span class="opt-en">Irregular, I forget to eat</span>
</span></label>
<label class="opt"><input type="radio" name="q12" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Fuerte, me irrito si no como</span>
<span class="opt-en">Strong, irritable if I skip meals</span>
</span></label>
<label class="opt"><input type="radio" name="q12" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Moderado, puedo saltarme comidas</span>
<span class="opt-en">Moderate, can skip meals easily</span>
</span></label>
</div>
</div>
<!-- Q13 -->
<div class="q-card">
<p class="q-number">13</p>
<p class="q-title">
<span class="es-text">Digestión actual</span>
<span class="en-text">Current digestion</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q13" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Gases, estreñimiento, variable</span>
<span class="opt-en">Gas, constipation, variable</span>
</span></label>
<label class="opt"><input type="radio" name="q13" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Acidez, diarrea, urgente</span>
<span class="opt-en">Acidity, diarrhea, urgent</span>
</span></label>
<label class="opt"><input type="radio" name="q13" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Lenta, pesada, moco</span>
<span class="opt-en">Slow, heavy, mucus</span>
</span></label>
</div>
</div>
<!-- Q14 -->
<div class="q-card">
<p class="q-number">14</p>
<p class="q-title">
<span class="es-text">Eliminación</span>
<span class="en-text">Elimination</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q14" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Irregular, seco, con esfuerzo</span>
<span class="opt-en">Irregular, dry, with effort</span>
</span></label>
<label class="opt"><input type="radio" name="q14" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Frecuente, suave, amarillento</span>
<span class="opt-en">Frequent, soft, yellowish</span>
</span></label>
<label class="opt"><input type="radio" name="q14" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Lento, denso, regular</span>
<span class="opt-en">Slow, heavy, regular</span>
</span></label>
</div>
</div>
<!-- Q15 -->
<div class="q-card">
<p class="q-number">15</p>
<p class="q-title">
<span class="es-text">Sueño actual</span>
<span class="en-text">Current sleep</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q15" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Insomnio, mente activa de noche</span>
<span class="opt-en">Insomnia, active mind at night</span>
</span></label>
<label class="opt"><input type="radio" name="q15" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Me despierto de madrugada, calor</span>
<span class="opt-en">Wake up at 2–3 am, hot</span>
</span></label>
<label class="opt"><input type="radio" name="q15" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Duermo mucho, difícil despertar</span>
<span class="opt-en">Sleep a lot, hard to wake up</span>
</span></label>
</div>
</div>
<!-- Q16 -->
<div class="q-card">
<p class="q-number">16</p>
<p class="q-title">
<span class="es-text">Estado mental actual</span>
<span class="en-text">Current mental state</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q16" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Ansioso, disperso, preocupado</span>
<span class="opt-en">Anxious, scattered, worried</span>
</span></label>
<label class="opt"><input type="radio" name="q16" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Irritable, crítico, perfeccionista</span>
<span class="opt-en">Irritable, critical, perfectionistic</span>
</span></label>
<label class="opt"><input type="radio" name="q16" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Lento, apático, deprimido</span>
<span class="opt-en">Slow, apathetic, low mood</span>
</span></label>
</div>
</div>
<!-- Q17 -->
<div class="q-card">
<p class="q-number">17</p>
<p class="q-title">
<span class="es-text">Nivel de estrés</span>
<span class="en-text">Stress level</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q17" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Me paralizo, huyo, me angustio</span>
<span class="opt-en">I freeze, flee, feel overwhelmed</span>
</span></label>
<label class="opt"><input type="radio" name="q17" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Me enfrento, controlo, me irrito</span>
<span class="opt-en">I confront, control, get angry</span>
</span></label>
<label class="opt"><input type="radio" name="q17" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Me retiro, me bloqueo, me deprimo</span>
<span class="opt-en">I withdraw, shut down, feel low</span>
</span></label>
</div>
</div>
<!-- Q18 -->
<div class="q-card">
<p class="q-number">18</p>
<p class="q-title">
<span class="es-text">Piel actual</span>
<span class="en-text">Current skin condition</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q18" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Seca, descamada, agrietada</span>
<span class="opt-en">Dry, flaky, cracked</span>
</span></label>
<label class="opt"><input type="radio" name="q18" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Inflamada, rojiza, acné</span>
<span class="opt-en">Inflamed, reddish, acne</span>
</span></label>
<label class="opt"><input type="radio" name="q18" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Grasa, poros obstruidos, pálida</span>
<span class="opt-en">Oily, clogged pores, pale</span>
</span></label>
</div>
</div>
<!-- Q19 -->
<div class="q-card">
<p class="q-number">19</p>
<p class="q-title">
<span class="es-text">Antojos frecuentes</span>
<span class="en-text">Cravings</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q19" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Crujiente, salado, estimulantes</span>
<span class="opt-en">Crunchy, salty, stimulants</span>
</span></label>
<label class="opt"><input type="radio" name="q19" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Picante, agrio, alcohol</span>
<span class="opt-en">Spicy, sour, alcohol</span>
</span></label>
<label class="opt"><input type="radio" name="q19" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Dulce, graso, reconfortante</span>
<span class="opt-en">Sweet, fatty, comfort food</span>
</span></label>
</div>
</div>
<!-- Q20 -->
<div class="q-card">
<p class="q-number">20</p>
<p class="q-title">
<span class="es-text">Temperatura corporal actual</span>
<span class="en-text">Current body temperature</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q20" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Siempre tengo frío</span>
<span class="opt-en">Always feel cold</span>
</span></label>
<label class="opt"><input type="radio" name="q20" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Siempre tengo calor, sudo fácil</span>
<span class="opt-en">Always warm, sweat easily</span>
</span></label>
<label class="opt"><input type="radio" name="q20" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Temperatura estable, tolero bien</span>
<span class="opt-en">Stable temp, tolerate changes well</span>
</span></label>
</div>
</div>
<!-- Q21 -->
<div class="q-card">
<p class="q-number">21</p>
<p class="q-title">
<span class="es-text">Ritmo diario</span>
<span class="en-text">Daily rhythm</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q21" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Irregular, cambia cada día</span>
<span class="opt-en">Irregular, changes every day</span>
</span></label>
<label class="opt"><input type="radio" name="q21" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Estructurado, muy productivo</span>
<span class="opt-en">Structured, highly productive</span>
</span></label>
<label class="opt"><input type="radio" name="q21" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Estable, lento para comenzar</span>
<span class="opt-en">Stable, slow to get started</span>
</span></label>
</div>
</div>
<!-- Q22 -->
<div class="q-card">
<p class="q-number">22</p>
<p class="q-title">
<span class="es-text">Nivel de actividad</span>
<span class="en-text">Activity level</span>
</p>
<div class="opts">
<label class="opt"><input type="radio" name="q22" value="vata">
<span class="opt-label">
<span class="opt-badge badge-vata">Vata</span>
<span class="opt-es">Muy activo pero me canso rápido</span>
<span class="opt-en">Very active but tire quickly</span>
</span></label>
<label class="opt"><input type="radio" name="q22" value="pitta">
<span class="opt-label">
<span class="opt-badge badge-pitta">Pitta</span>
<span class="opt-es">Activo, enfocado, competitivo</span>
<span class="opt-en">Active, focused, competitive</span>
</span></label>
<label class="opt"><input type="radio" name="q22" value="kapha">
<span class="opt-label">
<span class="opt-badge badge-kapha">Kapha</span>
<span class="opt-es">Prefiero descanso, me cuesta moverme</span>
<span class="opt-en">Prefer rest, slow to get moving</span>
</span></label>
</div>
</div>
<!-- ACTION -->
<div class="action-area">
<p class="counter-note">
<span class="es-text">Respondidas:</span>
<span class="en-text">Answered:</span>
<span id="resp-count">0</span> / 22 ·
<span class="es-text">mínimo 12</span>
<span class="en-text">minimum 12</span>
</p>
<p class="val-msg" id="val-msg">
<span class="es-text">Por favor responde al menos 12 preguntas para continuar.</span>
<span class="en-text">Please answer at least 12 questions to continue.</span>
</p>
<button class="btn-calc" onclick="calcular()">
<span class="es-text">Calcular mi Dosha</span>
<span class="en-text">Calculate my Dosha</span>
</button>
</div>
</div><!-- /#quiz-screen -->
<!-- ══ RESULT ══ -->
<div id="result-screen">
<div class="result-header">
<p class="result-eyebrow">
<span class="es-text">Tu constitución Ayurvédica · Prakriti</span>
<span class="en-text">Your Ayurvedic Constitution · Prakriti</span>
</p>
<p class="result-dosha" id="res-name"></p>
<p class="result-sub" id="res-subtitle"></p>
<span class="prakriti-badge" id="res-badge"></span>
</div>
<div class="bars-section">
<div class="section-divider">
<span><span class="es-text">Distribución de doshas</span><span class="en-text">Dosha distribution</span></span>
</div>
<div class="bar-row">
<span class="bar-label" style="color:var(--vata)">Vata</span>
<div class="bar-track"><div class="bar-fill vata-bar" id="bar-vata"></div></div>
<span class="bar-pct" id="pct-vata" style="color:var(--vata)">0%</span>
</div>
<div class="bar-row">
<span class="bar-label" style="color:var(--pitta)">Pitta</span>
<div class="bar-track"><div class="bar-fill pitta-bar" id="bar-pitta"></div></div>
<span class="bar-pct" id="pct-pitta" style="color:var(--pitta)">0%</span>
</div>
<div class="bar-row">
<span class="bar-label" style="color:var(--kapha)">Kapha</span>
<div class="bar-track"><div class="bar-fill kapha-bar" id="bar-kapha"></div></div>
<span class="bar-pct" id="pct-kapha" style="color:var(--kapha)">0%</span>
</div>
</div>
<div class="desc-card" id="desc-card">
<h3 id="desc-title"></h3>
<p id="desc-es"></p>
<p class="rec-title" id="rec-title-el"></p>
<p id="rec-es"></p>
</div>
<div class="vikriti-note" id="vikriti-note"></div>
<p class="combo-note" id="combo-note"></p>
<button class="btn-reset" onclick="resetQuiz()">
↺
<span class="es-text">Rehacer el test</span>
<span class="en-text">Retake the test</span>
</button>
</div><!-- /#result-screen -->
<footer class="site-footer">
<p>Giacinto Bodywork Studio · Ayurvedic Therapy · Katy, TX</p>
</footer>
</div><!-- /.wrapper -->
<script>
/* ── LANGUAGE ── */
let currentLang = 'es';
function setLang(lang) {
currentLang = lang;
document.body.className = 'lang-' + lang;
document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
document.querySelector('.lang-btn[onclick="setLang(\'' + lang + '\')"]').classList.add('active');
}
/* ── DOSHA DATA ── */
const DATA = {
vata: {
name: 'Vata',
color: '#9B8FD4',
subtitle_es: 'Aire y Éter — Movimiento y Creatividad',
subtitle_en: 'Air & Ether — Movement & Creativity',
desc_es: 'Vata es la fuerza del movimiento, la creatividad y la comunicación. Las personas con Vata dominante son vivaces, imaginativas y aprenden rápido, pero también olvidan rápido. Físicamente tienden a ser delgadas con piel seca, digestión irregular y energía en ráfagas. Cuando Vata está en equilibrio, la vida fluye con entusiasmo y adaptabilidad. En desequilibrio aparece la ansiedad, el insomnio, la dispersión y el dolor físico.',
desc_en: 'Vata is the force of movement, creativity, and communication. Vata-dominant people are lively, imaginative, and quick to learn — but also quick to forget. Physically they tend to be thin with dry skin, irregular digestion, and energy in bursts. In balance, Vata brings enthusiasm and adaptability. Out of balance, it manifests as anxiety, insomnia, scattered thinking, and physical pain.',
rec_es: 'Práctica recomendada: rutinas estables, calor, alimentos oleosos y nutritivos, masaje Abhyanga con aceite de sésamo, pranayama suave y meditación diaria.',
rec_en: 'Recommended practice: stable routines, warmth, nourishing oily foods, Abhyanga massage with sesame oil, gentle pranayama, and daily meditation.',
},
pitta: {
name: 'Pitta',
color: '#E07B30',
subtitle_es: 'Fuego y Agua — Transformación e Inteligencia',
subtitle_en: 'Fire & Water — Transformation & Intelligence',
desc_es: 'Pitta gobierna la digestión, el metabolismo y la claridad mental. Quienes tienen Pitta dominante son enfocados, decididos, carismáticos y orientados al logro. Poseen un fuego digestivo potente, piel sensible y mente aguda. En equilibrio, Pitta es liderazgo e inteligencia brillante. En desequilibrio se manifiesta como inflamación, acidez, irritabilidad, crítica excesiva y agotamiento por sobreexigencia.',
desc_en: 'Pitta governs digestion, metabolism, and mental clarity. Pitta-dominant people are focused, decisive, charismatic, and goal-oriented. They have a strong digestive fire, sensitive skin, and a sharp mind. In balance, Pitta brings brilliant leadership and intelligence. Out of balance, it shows as inflammation, acidity, irritability, excessive criticism, and burnout.',
rec_es: 'Práctica recomendada: actividades refrescantes, evitar el calor extremo, alimentos dulces y amargos, masaje con aceite de coco, práctica de compasión y tiempo en la naturaleza.',
rec_en: 'Recommended practice: cooling activities, avoid extreme heat, sweet and bitter foods, coconut oil massage, compassion practice, and time in nature.',
},
kapha: {
name: 'Kapha',
color: '#3BAD6A',
subtitle_es: 'Tierra y Agua — Estabilidad y Amor',
subtitle_en: 'Earth & Water — Stability & Love',
desc_es: 'Kapha es la fuerza que sostiene, nutre y une. Las personas con Kapha dominante son amorosas, pacientes, leales y poseen una fortaleza física natural. Su memoria es duradera y aprenden despacio pero retienen todo. En equilibrio, Kapha es amor incondicional y presencia. En desequilibrio puede expresarse como letargo, apego emocional, congestión, aumento de peso y resistencia al cambio.',
desc_en: 'Kapha is the force that sustains, nourishes, and binds. Kapha-dominant people are loving, patient, loyal, and naturally strong. Their memory is long-lasting — they learn slowly but retain everything. In balance, Kapha is unconditional love and steady presence. Out of balance, it shows as lethargy, emotional attachment, congestion, weight gain, and resistance to change.',
rec_es: 'Práctica recomendada: movimiento vigoroso diario, alimentos livianos y picantes, masaje seco Udvartana, estimulación mental constante y apertura a nuevas experiencias.',
rec_en: 'Recommended practice: vigorous daily movement, light and spicy foods, dry Udvartana massage, consistent mental stimulation, and openness to new experiences.',
}
};
/* ── COUNTER ── */
document.addEventListener('change', e => {
if (e.target.type === 'radio') updateCounter();
});
function countAnswered() {
const names = new Set();
document.querySelectorAll('input[type="radio"]:checked').forEach(r => names.add(r.name));
return names.size;
}
function updateCounter() {
const n = countAnswered();
document.getElementById('resp-count').textContent = n;
document.getElementById('prog-fill').style.width = Math.min(100, (n / 22) * 100) + '%';
document.getElementById('prog-label').textContent = n + ' / 22';
}
/* ── CALCULATE ── */
function calcular() {
const answered = countAnswered();
const valMsg = document.getElementById('val-msg');
if (answered < 12) { valMsg.classList.add('show'); return; }
valMsg.classList.remove('show');
let v = 0, p = 0, k = 0;
document.querySelectorAll('input[type="radio"]:checked').forEach(r => {
if (r.value === 'vata') v++;
if (r.value === 'pitta') p++;
if (r.value === 'kapha') k++;
});
const total = v + p + k;
const pV = Math.round((v / total) * 100);
const pP = Math.round((p / total) * 100);
const pK = Math.round((k / total) * 100);
const scores = [
{ key: 'vata', val: v, pct: pV },
{ key: 'pitta', val: p, pct: pP },
{ key: 'kapha', val: k, pct: pK }
].sort((a, b) => b.val - a.val);
showResult(scores[0], scores[1], pV, pP, pK);
}
/* ── SHOW RESULT ── */
function showResult(dom, sec, pV, pP, pK) {
const d = DATA[dom.key];
const s = DATA[sec.key];
const lang = currentLang;
// Set dosha color CSS var
document.getElementById('result-screen').style.cssText = '--dosha-color:' + d.color;
document.getElementById('desc-card').style.borderTopColor = d.color;
document.getElementById('res-name').textContent = d.name;
document.getElementById('res-subtitle').textContent = lang === 'es' ? d.subtitle_es : d.subtitle_en;
document.getElementById('desc-title').textContent = lang === 'es' ? 'Tu naturaleza · ' + d.name : 'Your nature · ' + d.name;
document.getElementById('desc-es').textContent = lang === 'es' ? d.desc_es : d.desc_en;
document.getElementById('rec-title-el').textContent = lang === 'es' ? 'Recomendaciones' : 'Recommendations';
document.getElementById('rec-es').textContent = lang === 'es' ? d.rec_es : d.rec_en;
// Prakriti badge
const diff = dom.pct - sec.pct;
let badge = '', combo = '';
if (diff <= 8) {
badge = d.name + '-' + s.name + ' Prakriti';
combo = lang === 'es'
? 'Tu tipo es ' + d.name + '-' + s.name + '. La influencia de ' + s.name + ' también está fuertemente presente. Ambos doshas merecen atención en tu práctica.'
: 'Your type is ' + d.name + '-' + s.name + '. The influence of ' + s.name + ' is also strongly present. Both doshas deserve attention in your practice.';
} else if (pV <= 35 && pP <= 35 && pK <= 35) {
badge = 'Tridóshica / Tridoshic';
combo = lang === 'es'
? 'Tu constitución es tridóshica — los tres doshas están presentes en proporciones equilibradas.'
: 'Your constitution is tridoshic — all three doshas are present in balanced proportions.';
} else {
badge = d.name + ' Prakriti';
combo = lang === 'es'
? d.name + ' es claramente tu dosha dominante. Mantenerlo en equilibrio es el centro de tu práctica Ayurvédica.'
: d.name + ' is clearly your dominant dosha. Keeping it in balance is the center of your Ayurvedic practice.';
}
document.getElementById('res-badge').textContent = badge;
document.getElementById('combo-note').textContent = combo;
// Vikriti note
document.getElementById('vikriti-note').innerHTML = lang === 'es'
? '<strong>Nota:</strong> Este test evalúa tanto tu Prakriti (naturaleza innata) como tu Vikriti (estado actual). Si notas diferencias entre ambas, consulta con un terapeuta Ayurvédico.'
: '<strong>Note:</strong> This test evaluates both your Prakriti (innate nature) and your Vikriti (current state). If you notice differences between both, consult an Ayurvedic therapist.';
// Hide quiz / show result
document.getElementById('quiz-screen').style.display = 'none';
const rs = document.getElementById('result-screen');
rs.style.display = 'block';
rs.getBoundingClientRect(); // force reflow
setTimeout(() => {
rs.classList.add('show');
document.getElementById('bar-vata').style.width = pV + '%';
document.getElementById('bar-pitta').style.width = pP + '%';
document.getElementById('bar-kapha').style.width = pK + '%';
document.getElementById('pct-vata').textContent = pV + '%';
document.getElementById('pct-pitta').textContent = pP + '%';
document.getElementById('pct-kapha').textContent = pK + '%';
}, 60);
window.scrollTo({ top: 0, behavior: 'smooth' });
}
/* ── RESET ── */
function resetQuiz() {
document.querySelectorAll('input[type="radio"]').forEach(r => r.checked = false);
['bar-vata','bar-pitta','bar-kapha'].forEach(id => document.getElementById(id).style.width = '0%');
const rs = document.getElementById('result-screen');
rs.classList.remove('show');
rs.style.display = 'none';
document.getElementById('quiz-screen').style.display = 'block';
document.getElementById('val-msg').classList.remove('show');
updateCounter();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
updateCounter();
</script>
</body>
</html>