*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#faf8ff;--bg2:#f3f0fa;--bg3:#ece7f5;--card:#fff;--violet:#7c3aed;--violet-deep:#6d28d9;--violet-dark:#5b21b6;--purple:#a855f7;--purple-light:#c084fc;--purple-pale:#ede9fe;--purple-ghost:rgba(124,58,237,.06);--purple-glow:rgba(124,58,237,.18);--warm:#d97706;--warm-light:#fbbf24;--ink:#1a1023;--ink2:#3d2e52;--ink3:#7c6f8a;--muted:#a89bb8;--border:rgba(124,58,237,.12);--border-solid:#e4ddf0;--border-hover:rgba(124,58,237,.4);--wa:#25d366;--wa-dark:#1da855;--radius:20px;--radius-sm:16px;--shadow-card:0 2px 12px rgba(124,58,237,.06),0 1px 3px rgba(0,0,0,.04);--shadow-hover:0 8px 32px rgba(124,58,237,.14),0 2px 8px rgba(0,0,0,.06);--shadow-lg:0 20px 50px rgba(124,58,237,.08);--font-display:'Playfair Display',Georgia,serif;--font-body:'Outfit',-apple-system,sans-serif}html{-webkit-tap-highlight-color:transparent}html,body{overflow-x:hidden;scroll-behavior:auto}body{font-family:var(--font-body);background:linear-gradient(160deg,#f0ebff 0%,#faf8ff 40%,#f5f0fe 100%);color:var(--ink);min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;-webkit-font-smoothing:antialiased;padding:20px 16px 40px}.app{max-width:460px;width:100%;min-height:100vh;min-height:100dvh;background:var(--card);position:relative;box-shadow:0 24px 80px rgba(124,58,237,.13),0 4px 24px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);overflow-x:hidden;border-radius:28px;margin:20px auto}.topbar{position:sticky;top:0;left:0;right:0;max-width:100%;width:100%;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-solid);padding:12px 20px;border-radius:28px 28px 0 0}.topbar-inner{display:flex;align-items:center;gap:12px}.topbar-back{background:none;border:none;cursor:pointer;color:var(--violet);padding:4px;border-radius:8px;transition:all .2s}.topbar-back:hover{background:var(--bg2)}.progress-wrap{flex:1;display:flex;align-items:center;gap:10px}.progress-track{flex:1;height:6px;background:var(--bg2);border-radius:50px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--purple),var(--warm-light));border-radius:50px;transition:width .6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(124,58,237,.3)}.progress-label{font-size:12px;font-weight:600;color:var(--ink3);white-space:nowrap;min-width:32px;text-align:right}.screen{display:none;min-height:calc(100vh - 40px);padding-top:0}.screen.active{display:flex;align-items:flex-start;animation:screenIn .4s ease}@keyframes screenIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.sc-inner{width:100%;padding:24px 24px 40px}.landing-sc{padding:0 0 40px;text-align:center}.landing-badge{padding:20px 24px 8px}.landing-logo{max-width:140px;height:auto;filter:drop-shadow(0 4px 12px rgba(124,58,237,.15))}.logo-fallback{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--violet-deep);display:block;text-align:center}.landing-hero-wrap{position:relative;margin:0;overflow:hidden;border-radius:0 0 28px 28px}.landing-hero-img{width:100%;height:280px;object-fit:cover;display:block;border-radius:28px 28px 0 0}.hero-placeholder{width:100%;height:260px;background:linear-gradient(135deg,var(--purple-pale),var(--bg2));display:flex;align-items:center;justify-content:center}.hero-placeholder span{font-size:72px;filter:drop-shadow(0 4px 12px rgba(124,58,237,.2))}.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(26,16,35,.35))}.landing-body{padding:28px 28px 0;text-align:center}.landing-h1{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--ink);line-height:1.1;margin-bottom:14px;letter-spacing:-.5px}.landing-p{font-size:15px;color:var(--ink3);line-height:1.6;margin-bottom:24px;max-width:360px;margin-left:auto;margin-right:auto}.landing-p strong{color:var(--violet-deep)}.landing-location{font-size:13px;color:var(--ink3);margin-top:16px;font-weight:500}.trust-bar{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:28px;padding:16px 12px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border-solid)}.trust-item{text-align:center}.trust-num{display:block;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);line-height:1}.trust-txt{font-size:11px;color:var(--ink3);font-weight:500;letter-spacing:.3px}.trust-sep{width:1px;height:28px;background:var(--border-solid)}.btn-main{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:18px;background:linear-gradient(135deg,var(--violet-deep) 0%,var(--purple) 60%,var(--purple-light) 100%);color:#fff;border:none;border-radius:50px;font-size:16px;font-weight:700;font-family:var(--font-body);cursor:pointer;box-shadow:0 8px 28px rgba(124,58,237,.3),0 2px 6px rgba(0,0,0,.08);transition:all .25s;letter-spacing:.2px;position:relative;overflow:hidden}.btn-main::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .6s}.btn-main:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(124,58,237,.35)}.btn-main:hover::before{left:100%}.btn-main:active{transform:translateY(0)}.q-header{text-align:center;margin-bottom:28px}.q-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--violet);background:var(--purple-pale);padding:7px 16px;border-radius:50px;margin-bottom:16px;border:1px solid var(--border)}.q-title{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--ink);line-height:1.15;margin-bottom:8px;letter-spacing:-.3px}.q-sub{font-size:14px;color:var(--ink3);line-height:1.5}.cards-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.card-lg{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 0 16px;background:var(--card);border:2px solid var(--border-solid);border-radius:var(--radius);cursor:pointer;font-family:var(--font-body);overflow:hidden;transition:all .3s;box-shadow:var(--shadow-card)}.card-lg:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-hover)}.card-lg.selected{border-color:var(--violet);background:linear-gradient(145deg,var(--purple-ghost),var(--card));box-shadow:var(--shadow-hover)}.card-lg-img-wrap{width:100%;height:160px;overflow:hidden;background:var(--bg2)}.card-lg-img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.card-lg:hover .card-lg-img{transform:scale(1.06)}.card-lg-emoji{width:100%;height:160px;display:flex;align-items:center;justify-content:center;font-size:56px;background:linear-gradient(135deg,var(--purple-pale),var(--bg2))}.card-lg-label{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.2px}.cards-grid{display:grid;gap:12px}.g-2{grid-template-columns:1fr 1fr}.card-sm{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;background:var(--card);border:2px solid var(--border-solid);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-body);overflow:hidden;text-align:center;transition:all .3s;box-shadow:var(--shadow-card);position:relative}.card-sm:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-hover)}.card-sm.selected{border-color:var(--violet);background:linear-gradient(145deg,var(--purple-ghost),var(--card));box-shadow:var(--shadow-hover)}.card-sm.selected::before{content:'✓';position:absolute;top:8px;right:8px;width:24px;height:24px;background:linear-gradient(135deg,var(--violet),var(--purple));color:#fff;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 8px rgba(124,58,237,.3)}.card-sm-img{width:100%;height:70px;object-fit:cover}.card-sm-emoji{font-size:28px;padding:14px 0 4px}.card-sm-body{padding:8px 10px 14px}.card-sm-body strong{display:block;font-size:13px;color:var(--ink);font-weight:700;margin-bottom:2px}.card-sm-body small{font-size:11px;color:var(--ink3)}.card-sm.compact{padding:16px 10px}.card-sm.compact .card-sm-body{padding:4px 0 0}.card-sm.with-img{padding:0}.card-sm.with-img .card-sm-body{padding:8px 10px 14px}.pills-list{display:flex;flex-direction:column;gap:10px}.pill{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;background:var(--card);border:2px solid var(--border-solid);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-body);text-align:left;transition:all .3s;box-shadow:var(--shadow-card);overflow:hidden}.pill:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-hover)}.pill.selected{border-color:var(--violet);background:var(--purple-pale)}.pill-icon{font-size:24px;flex-shrink:0}.pill-img{width:48px;height:48px;border-radius:12px;object-fit:cover;flex-shrink:0}.pill-text{flex:1}.pill-text strong{display:block;font-size:15px;color:var(--ink);font-weight:700}.pill-text small{font-size:12px;color:var(--ink3)}.skip-btn{display:block;width:100%;margin-top:16px;padding:12px;background:none;border:none;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink3);cursor:pointer;transition:color .2s}.skip-btn:hover{color:var(--violet)}.loading-sc{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 80px);text-align:center;padding-top:24px!important}.analysis-chart{position:relative;width:220px;height:220px;margin-bottom:28px}.radar-svg{width:100%;height:100%}.radar-shape{fill:rgba(124,58,237,.1);stroke:var(--violet);stroke-width:2;transition:all .05s;filter:drop-shadow(0 0 8px rgba(124,58,237,.2))}.radar-lbl{font-size:8px;fill:var(--ink3);font-family:var(--font-body);font-weight:600}.scan-sweep{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(124,58,237,.15) 30deg,transparent 60deg);animation:sweep 2s linear infinite}@keyframes sweep{to{transform:rotate(360deg)}}.loader-h2{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);margin-bottom:24px}.loader-checks{width:100%;max-width:260px;text-align:left;margin-bottom:24px}.lc-item{padding:8px 0;font-size:14px;color:var(--ink3);display:flex;align-items:center;gap:10px;transition:color .3s}.lc-item.done{color:var(--ink)}.lc-dot{width:8px;height:8px;border-radius:50%;background:var(--bg3);flex-shrink:0;transition:all .3s}.lc-item.done .lc-dot{background:var(--violet);box-shadow:0 0 10px rgba(124,58,237,.4)}.loader-track{width:100%;max-width:260px;height:6px;background:var(--bg3);border-radius:50px;overflow:hidden}.loader-fill{height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--purple),var(--warm-light));transition:width .08s;border-radius:50px;box-shadow:0 0 8px rgba(124,58,237,.3)}.result-sc{text-align:center;padding-top:32px;padding-bottom:48px}.result-crown{font-size:48px;margin-bottom:8px;filter:drop-shadow(0 4px 12px rgba(124,58,237,.2))}.result-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--violet);background:var(--purple-pale);padding:8px 18px;border-radius:50px;border:1px solid var(--border);margin-bottom:20px}.result-h2{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--violet-deep);line-height:1.15;margin-bottom:14px}.result-desc{font-size:15px;color:var(--ink3);line-height:1.6;margin-bottom:28px;padding:0 8px}.result-promo{display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(135deg,var(--purple-pale),rgba(124,58,237,.06));border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:24px}.rp-icon{font-size:28px}.rp-text{font-size:14px;color:var(--ink2);text-align:left;line-height:1.4}.rp-text strong{color:var(--violet-deep)}.result-checks{margin-bottom:28px}.rc-item{font-size:14px;color:var(--ink3);padding:5px 0}.form-sc{padding-top:24px;padding-bottom:40px}.form-h2{font-family:var(--font-display);font-size:26px;font-weight:700;text-align:center;color:var(--ink);margin-bottom:6px}.form-sub{font-size:14px;color:var(--ink3);text-align:center;margin-bottom:20px}.form-result-mini{background:var(--purple-pale);border-left:4px solid var(--violet);border-radius:var(--radius-sm);padding:14px 16px;font-size:14px;color:var(--ink);margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,.04)}.form-result-mini strong{color:var(--violet-deep)}form label{display:block;font-size:12px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.8px;margin:16px 0 6px}form label:first-of-type{margin-top:0}form input[type="text"],form input[type="tel"],form input[type="email"]{width:100%;padding:16px 18px;background:var(--bg);border:2px solid var(--border-solid);border-radius:var(--radius-sm);color:var(--ink);font-size:15px;font-family:var(--font-body);transition:all .25s}form input::placeholder{color:var(--muted)}form input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px var(--purple-glow);background:var(--card)}.btn-wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:24px;padding:18px;background:linear-gradient(135deg,var(--wa),var(--wa-dark));color:#fff;border:none;border-radius:50px;font-size:16px;font-weight:700;font-family:var(--font-body);cursor:pointer;box-shadow:0 8px 28px rgba(37,211,102,.3);transition:all .25s;position:relative;overflow:visible}.btn-wa:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(37,211,102,.4)}.btn-wa:disabled{opacity:.5;cursor:not-allowed;transform:none}.wa-svg{width:22px;height:22px;flex-shrink:0}.pulse-ring{position:absolute;inset:-4px;border-radius:50px;border:2px solid var(--wa);animation:pulse 2s ease-out infinite;pointer-events:none}@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.06);opacity:0}}.form-legal{text-align:center;font-size:12px;color:var(--ink3);margin-top:16px}.cookie-bar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(150%);max-width:460px;width:calc(100% - 32px);background:var(--card);border-radius:var(--radius);padding:18px 20px;box-shadow:0 12px 40px rgba(124,58,237,.12),0 4px 12px rgba(0,0,0,.08);border-top:3px solid var(--violet);display:flex;align-items:center;gap:14px;z-index:9999;transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}.cookie-bar.show{transform:translateX(-50%) translateY(0)}.cookie-bar p{flex:1;font-size:13px;color:var(--ink3);line-height:1.45;margin:0}.cookie-ok{flex-shrink:0;background:linear-gradient(135deg,var(--violet),var(--purple));color:#fff;border:none;padding:11px 24px;border-radius:50px;font-weight:700;font-size:14px;cursor:pointer;font-family:var(--font-body);box-shadow:0 4px 14px rgba(124,58,237,.25);transition:all .2s}.cookie-ok:hover{box-shadow:0 8px 20px rgba(124,58,237,.35)}@media(max-width:480px){.cookie-bar{flex-direction:column;align-items:stretch}.cookie-ok{width:100%}}@media(max-width:480px){.app{border-radius:20px;margin:12px 10px 32px;min-height:auto;width:calc(100% - 20px)}.topbar{border-radius:20px 20px 0 0}.landing-hero-img{border-radius:0}body{padding:12px 0 32px;align-items:flex-start}}@media(max-width:400px){.sc-inner{padding:20px 18px 32px}.landing-h1{font-size:28px}.q-title{font-size:24px}.cards-grid{gap:8px}.card-sm.compact{padding:12px 8px}.landing-body{padding:24px 20px 0}.trust-bar{gap:10px;padding:12px 8px}.trust-num{font-size:18px}.card-lg-img-wrap{height:130px}.analysis-chart{width:180px;height:180px}}

/* =====================================================
   BRANCH EMOJI CARDS (placeholder while no photos)
   ===================================================== */
.branch-emoji{
  width:100%;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  background:linear-gradient(135deg,var(--purple-pale),var(--bg2));
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  transition:transform .3s;
}
.card-sm:hover .branch-emoji{
  transform:scale(1.08);
}
.card-sm.selected .branch-emoji{
  background:linear-gradient(135deg,rgba(124,58,237,.12),var(--purple-pale));
}
/* Branch block transitions */
.branch-block{
  animation:screenIn .3s ease;
}

/* =====================================================
   LOADER — CLINICAL SCANNER ANIMATIONS
   ===================================================== */
.anim-wrap {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
}
.clinic-svg {
  width: 220px;
  height: 220px;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(124,58,237,0.2));
}

/* Scanner sweeps — vertical slow pass */
.face-scanner {
  animation: scannerPass 2.8s cubic-bezier(0.4,0,0.6,1) infinite;
  transform-origin: center;
}
.hair-scanner {
  animation: scannerPass 3s cubic-bezier(0.4,0,0.6,1) infinite;
  animation-delay: 0.2s;
}
.body-scanner {
  animation: scannerPass 3.2s cubic-bezier(0.4,0,0.6,1) infinite;
  animation-delay: 0.4s;
}
@keyframes scannerPass {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* Measurement points — subtle pulse */
.mpoint {
  animation: mpointPulse 3s ease-in-out infinite;
}
@keyframes mpointPulse {
  0%, 100% { opacity: 0.3; r: 2; }
  50%       { opacity: 1;   r: 3.5; }
}

/* Face outline — fade in draw */
.face-outline {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawOutline 3.5s ease forwards;
}
@keyframes drawOutline { to { stroke-dashoffset: 0; } }

/* Body parts — staggered draw */
.body-part {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawOutline 2.8s ease forwards;
}

/* Scalp outline */
.scalp-outline {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: drawOutline 3.2s ease forwards;
}

/* Follicles — appear sequentially */
.foliculo {
  opacity: 0;
  animation: folicAppear 0.6s ease forwards;
}
@keyframes folicAppear {
  from { opacity: 0; r: 0; }
  to   { opacity: 1; }
}

/* Pain rings — expand and fade */
.pain-ring {
  animation: painExpand 3.5s ease-out infinite;
  transform-origin: 120px 95px;
}
@keyframes painExpand {
  0%   { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Pain core — slow throb */
.pain-core {
  animation: painCore 2.4s ease-in-out infinite;
  transform-origin: 120px 95px;
}
@keyframes painCore {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%       { transform: scale(1.4); opacity: 1; }
}

/* Branch block transitions */
.branch-block { animation: screenIn 0.3s ease; }

/* =====================================================
   FACE SCANNER HUD — imagen real + overlay SVG
   ===================================================== */
.face-scanner-wrap {
  position: relative;
  width: 220px;
  height: 264px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  filter: drop-shadow(0 0 18px rgba(232,121,249,.25));
}

/* Image container — mix-blend-mode:screen makes black bg transparent */
.face-scan-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scan-img-inner {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  animation: faceImgPulse 5s ease-in-out infinite;
  will-change: filter;
}
@keyframes faceImgPulse {
  0%,100% { filter: brightness(0.9) saturate(1.1); }
  50%      { filter: brightness(1.1) saturate(1.3) drop-shadow(0 0 18px rgba(0,229,255,.4)); }
}

/* SVG overlay — encima de la imagen */
.face-hud-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}

/* Anillo exterior — rota lento */
.hud-ring-outer {
  animation: ringRotate 7s linear infinite;
  transform-origin: 150px 160px;
}
@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Anillo interior — rota en sentido contrario */
.hud-ring-inner {
  animation: ringRotate 10s linear infinite reverse;
  transform-origin: 150px 160px;
}

/* Sweep de escaneo — baja y sube */
.hud-sweep {
  animation: sweepDown 4.6s cubic-bezier(0.4,0,0.6,1) infinite;
}
.hud-sweep-line {
  animation: sweepLineDown 4.6s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes sweepDown {
  0%   { transform: translateY(-360px); }
  100% { transform: translateY(360px); }
}
@keyframes sweepLineDown {
  0%   { transform: translateY(-360px); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform: translateY(360px); opacity:0; }
}

/* Puntos de análisis — aparecen y pulsan */
.hud-dot {
  opacity: 0;
  animation: dotAppear 0.6s ease forwards, dotPulse 3s ease-in-out 0.4s infinite;
}
@keyframes dotAppear {
  from { opacity:0; r:1; }
  to   { opacity:1; r:3; }
}
@keyframes dotPulse {
  0%,100% { opacity:0.7; }
  50%     { opacity:1; filter: drop-shadow(0 0 4px #00e5ff); }
}

/* Líneas de los puntos */
.hud-dot-line {
  opacity: 0;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: lineAppear 0.9s ease forwards;
}
@keyframes lineAppear {
  to { opacity:1; stroke-dashoffset: 0; }
}

/* Labels HUD */
.hud-label {
  opacity: 0;
  animation: labelFade 0.8s ease forwards;
}
@keyframes labelFade {
  to { opacity: 0.85; }
}

/* Datos laterales — parpadeo de terminal */
.hud-data {
  opacity: 0;
  animation: dataType 0.5s ease forwards;
}
@keyframes dataType {
  to { opacity: 0.6; }
}

/* Barra de progreso scan */
.hud-progress {
  animation: scanProgress 4.6s linear infinite;
}
@keyframes scanProgress {
  0%   { width: 0px; }
  100% { width: 140px; }
}

/* =====================================================
   ANIMACIONES POR CATEGORÍA — image crop positions
   ===================================================== */

/* Individual images — no crop needed, just sizing */
.face-scanner-wrap { overflow: hidden; border-radius: 12px; }
.face-scanner-tall { height: 300px !important; }

/* Cuerpo/dolor need slightly taller wrap */
#anim-peso-hombre .face-scanner-wrap,
#anim-peso-mujer .face-scanner-wrap,
#anim-dolor-hombre .face-scanner-wrap,
#anim-dolor-mujer .face-scanner-wrap {
  height: 300px;
}

/* Sweep horizontal (cabello) */
.hud-sweep-h {
  animation: sweepHoriz 5s cubic-bezier(0.4,0,0.6,1) infinite;
}
.hud-sweep-line-h {
  animation: sweepLineHoriz 5s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes sweepHoriz {
  0%   { transform: translateY(-380px); }
  100% { transform: translateY(380px); }
}
@keyframes sweepLineHoriz {
  0%   { transform: translateY(-380px); opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { transform: translateY(380px); opacity:0; }
}

/* Sweep lento para cuerpo completo */
.hud-sweep-slow {
  animation: sweepDown 5.8s cubic-bezier(0.4,0,0.6,1) infinite;
}
.hud-sweep-line-slow {
  animation: sweepLineDown 5.8s cubic-bezier(0.4,0,0.6,1) infinite;
}

/* Líneas de medición — aparecen -->*/
.hud-measure-line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: measureIn 1.8s ease forwards;
}
@keyframes measureIn { to { stroke-dashoffset: 0; } }

/* Columna vertebral */
.hud-spine {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: measureIn 1.8s ease forwards;
}

/* =====================================================
   PANTALLA DE GRACIAS (step 10)
   ===================================================== */
.gracias-sc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px 44px;
}
.gracias-check {
  margin-bottom: 22px;
  animation: gcZoom .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes gcZoom {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.gracias-svg {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 6px 20px rgba(124,58,237,.2));
}
.gracias-h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.2;
}
.gracias-sub {
  font-size: .9rem;
  color: var(--ink3);
  margin: 0 0 28px;
  line-height: 1.6;
  max-width: 300px;
}
/* Tratamiento box */
.gracias-tratamiento-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--purple-pale);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  width: 100%;
  margin-bottom: 28px;
  text-align: left;
}
.gracias-trat-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg,var(--violet-deep),var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(124,58,237,.25);
}
.gracias-trat-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--violet);
  margin-bottom: 4px;
}
.gracias-trat-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
/* Steps */
.gracias-steps {
  width: 100%;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gracias-step {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 4px 0;
}
.gracias-step-line {
  width: 1px;
  height: 16px;
  background: var(--border-solid);
  margin-left: 17px;
}
.gs-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1.5px solid var(--border-solid);
  color: var(--violet);
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gs-text {
  font-size: .88rem;
  color: var(--ink2);
  font-weight: 500;
  line-height: 1.4;
}
/* WA button */
.gracias-wa-btn {
  width: 100%;
  margin-bottom: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Trust line */
.gracias-trust {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: .75rem;
  color: var(--muted);
}
.gracias-trust svg {
  flex-shrink: 0;
  opacity: .6;
}