/* Índice DLAF — hereda variables y tipografía de assets/css/styles.css */

body{
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* Fondo de partículas fijo (mismo del hero) */
.diag-canvas{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}

.diag-header{
  position:relative; z-index:2;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.diag-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
}
.diag-header .logo{display:inline-flex; align-items:center;}
.diag-header .logo img{height:32px; width:auto;}
.diag-header .back{font-size:14px; color:var(--muted); font-weight:500;}
.diag-header .back:hover{color:var(--gold);}

.diag-main{
  flex:1; display:flex; align-items:center;
  padding:56px 0 80px;
  position:relative;
  overflow:hidden;
}
.diag-main{z-index:1;}
.diag-main .glow{
  position:absolute; width:clamp(300px, 90vw, 800px); height:clamp(300px, 90vw, 800px); border-radius:50%;
  background:radial-gradient(circle, rgba(217,164,41,0.18) 0%, transparent 65%);
  top:-25%; right:-15%; pointer-events:none;
  animation:diagGlowDrift 12s ease-in-out infinite alternate;
}
.diag-main .glow-plum{
  background:radial-gradient(circle, rgba(185,143,203,0.18) 0%, transparent 65%);
  top:auto; right:auto; bottom:-25%; left:-20%;
  animation-delay:-4s;
}
@keyframes diagGlowDrift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-30px, 34px) scale(1.12); }
}

.diag-view{display:none; width:100%; position:relative; z-index:1;}
.diag-view.active{display:block;}

/* INTRO */
.diag-intro{max-width:560px; margin:0 auto; text-align:center;}
.diag-kicker{
  display:inline-block; font-size:13px; font-weight:600; color:var(--gold);
  margin-bottom:16px; letter-spacing:0.02em;
  opacity:0; animation:fadeUp 0.7s ease forwards;
}
.diag-intro h1{
  font-size:clamp(30px,4.4vw,46px);
  opacity:0; animation:fadeUp 0.8s ease forwards; animation-delay:0.1s;
}
.diag-intro .diag-sub{
  margin-top:16px; font-size:17px; color:var(--muted); max-width:44ch; margin-left:auto; margin-right:auto;
  opacity:0; animation:fadeUp 0.8s ease forwards; animation-delay:0.2s;
}
.diag-intro form{
  margin-top:36px; display:flex; flex-direction:column; gap:16px; align-items:center;
  opacity:0; animation:fadeUp 0.8s ease forwards; animation-delay:0.32s;
}
.diag-input{
  width:100%; max-width:360px;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
  padding:15px 18px; font-size:16px; font-family:'Work Sans'; color:var(--paper);
  transition:border-color .3s ease;
}
.diag-input::placeholder{color:var(--muted);}
.diag-input:focus{outline:none; border-color:var(--gold);}
.diag-intro .diag-meta{
  margin-top:18px; font-size:13px; color:var(--muted);
  opacity:0; animation:fadeUp 0.8s ease forwards; animation-delay:0.44s;
}

/* QUIZ */
.diag-quiz{max-width:640px; margin:0 auto;}
.diag-progress-track{
  height:6px; border-radius:100px; background:var(--bg-panel);
  overflow:hidden; margin-bottom:36px;
}
.diag-progress-fill{
  height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius:100px; width:0%;
  transition:width .45s cubic-bezier(.16,.84,.44,1);
}
.diag-progress-label{
  display:flex; justify-content:space-between; font-size:13px; color:var(--muted);
  margin-bottom:10px;
}
.diag-progress-label .diag-block-tag{
  font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:0.04em; font-size:12px;
}
.diag-question-card{
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:24px;
  padding:48px 44px; text-align:center;
}
.diag-question-card h2{
  font-size:clamp(22px,2.6vw,30px); line-height:1.3;
}
.diag-answers{
  display:flex; gap:16px; justify-content:center; margin-top:36px; flex-wrap:wrap;
}
.diag-answer-btn{
  min-width:140px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 32px; border-radius:100px;
  font-weight:600; font-size:16px;
  border:1.5px solid var(--line); background:transparent; color:var(--paper);
  cursor:pointer; transition:transform .2s ease, border-color .2s ease, background .2s ease;
  font-family:'Work Sans';
}
.diag-answer-btn:hover{transform:translateY(-2px);}
.diag-answer-btn.yes:hover{background:var(--gold); border-color:var(--gold); color:var(--bg-deep);}
.diag-answer-btn.no:hover{border-color:var(--plum); color:var(--plum);}
.diag-back-link{
  display:block; margin-top:28px; text-align:center; font-size:13.5px; color:var(--muted); cursor:pointer;
}
.diag-back-link:hover{color:var(--gold);}

/* RESULTS */
.diag-results{max-width:760px; margin:0 auto;}
.diag-results-greeting{text-align:center; margin-bottom:48px;}
.diag-results-greeting h1{font-size:clamp(26px,3.4vw,38px); max-width:20ch; margin:0 auto;}

.diag-gauges{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
  margin-bottom:48px;
}
.diag-gauge-card{
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:20px;
  padding:32px 24px; text-align:center;
}
.diag-gauge-card .diag-gauge-title{font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:18px;}
.diag-gauge-svg{width:180px; height:100px; margin:0 auto;}
.diag-gauge-pct{
  font-family:'Bricolage Grotesque'; font-size:36px; font-weight:800;
  margin-top:8px;
}
.diag-gauge-level{
  display:inline-block; margin-top:8px; padding:5px 16px; border-radius:100px;
  font-size:12.5px; font-weight:700;
}
.diag-level-bajo{background:rgba(226,87,76,0.16); color:#E2574C;}
.diag-level-medio{background:rgba(217,164,41,0.16); color:var(--gold-bright);}
.diag-level-alto{background:rgba(63,174,122,0.16); color:#3FAE7A;}

.diag-section{margin-bottom:40px;}
.diag-section h3{font-size:19px; margin-bottom:16px;}
.diag-list{list-style:none; display:flex; flex-direction:column; gap:10px;}
.diag-list li{
  font-size:15px; color:var(--muted); padding:14px 18px; border-radius:12px;
  background:var(--bg-panel); border-left:3px solid var(--line);
}
.diag-list.strengths li{border-left-color:#3FAE7A;}
.diag-list.gaps li{border-left-color:#E2574C;}

.diag-plans{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.diag-plan-card{
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:18px;
  padding:26px 24px;
}
.diag-plan-card .diag-plan-cat{font-size:12.5px; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:0.03em;}
.diag-plan-card h4{font-size:20px; margin-top:6px;}
.diag-plan-card .diag-plan-price{font-family:'Bricolage Grotesque'; font-size:24px; font-weight:800; color:var(--gold); margin-top:10px;}
.diag-plan-card .diag-plan-price small{display:block; font-family:'Work Sans'; font-size:12px; font-weight:500; color:var(--muted); margin-top:2px;}
.diag-plan-card a{
  display:inline-block; margin-top:16px; font-size:14px; font-weight:600; color:var(--paper);
  border-bottom:1px solid var(--gold);
}
.diag-plan-card a:hover{color:var(--gold);}

/* Regalo en la pantalla de inicio */
.diag-gift{
  display:flex; align-items:center; justify-content:center; gap:12px; text-align:left;
  max-width:460px; margin:0 auto 22px; padding:12px 16px;
  border:1px solid rgba(217,164,41,0.55); border-radius:14px;
  background:rgba(217,164,41,0.10); color:var(--paper); font-size:14.5px; line-height:1.4;
}
.diag-gift svg{flex-shrink:0; color:var(--gold-bright);}
.diag-gift strong{color:var(--gold-bright);}
.diag-gift em{font-style:normal; color:var(--muted); font-size:13px;}

/* Oferta Landing Page (30 días · 15%) */
.diag-offer{
  position:relative; margin-top:44px; padding:34px 22px 26px; text-align:center;
  border:1.5px solid var(--gold); border-radius:22px;
  background:linear-gradient(160deg, rgba(217,164,41,0.14), rgba(44,70,108,0.55));
  overflow:hidden;
}
.diag-offer-badge{
  display:inline-block; margin-bottom:14px; padding:5px 12px; border-radius:6px;
  background:var(--gold); color:var(--bg-deep);
  font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
}
.diag-offer h3{font-size:clamp(22px,5.4vw,30px); margin-bottom:10px;}
.diag-offer-lead{color:var(--muted); font-size:15px; max-width:44ch; margin:0 auto 22px;}
.diag-offer-plans{display:grid; grid-template-columns:1fr; gap:14px; text-align:left;}
.diag-offer-plan{
  position:relative; padding:20px 20px 18px; border-radius:16px;
  background:var(--bg-panel); border:1px solid var(--line);
}
.diag-offer-plan.featured{border-color:var(--gold);}
.diag-offer-pop{
  position:absolute; top:-11px; right:16px; padding:3px 10px; border-radius:6px;
  background:var(--gold); color:var(--bg-deep); font-size:11px; font-weight:700;
}
.diag-offer-name{font-family:'Bricolage Grotesque'; font-size:20px; font-weight:700; color:var(--paper);}
.diag-offer-desc{font-size:13.5px; color:var(--muted); margin-top:2px;}
.diag-offer-price{margin-top:12px; display:flex; align-items:baseline; gap:10px;}
.diag-offer-price s{color:var(--muted); font-size:15px;}
.diag-offer-price strong{font-family:'Bricolage Grotesque'; font-size:32px; font-weight:800; color:var(--gold-bright);}
.diag-offer-note{font-size:12.5px; color:var(--muted); margin-top:2px;}
.diag-offer-fine{margin-top:18px; font-size:12.5px; color:var(--muted); max-width:52ch; margin-left:auto; margin-right:auto;}
@media (min-width:640px){
  .diag-offer{padding:38px 36px 30px;}
  .diag-offer-plans{grid-template-columns:1fr 1fr;}
}

.diag-cta{
  text-align:center; margin-top:52px; padding:40px 32px;
  background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
  border:1px solid var(--line); border-radius:24px;
}
.diag-cta p{color:var(--muted); font-size:15px; max-width:42ch; margin:0 auto 24px;}
.diag-cta .diag-cta-buttons{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

.diag-cta-title{font-size:clamp(22px,5vw,28px); margin-bottom:12px;}
.diag-email-form{
  display:flex; margin-top:20px; gap:12px; flex-wrap:wrap; justify-content:center;
}
.diag-email-form .btn{width:100%; justify-content:center;}
@media (min-width:600px){ .diag-email-form .btn{width:auto;} }
.diag-cta-alt{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); display:flex; flex-direction:column; gap:4px; align-items:center;}
.diag-cta-alt a{color:var(--gold); font-weight:600;}
.diag-cta-alt a:hover{color:var(--gold-bright);}
.diag-email-form input{
  flex:1; min-width:200px; max-width:340px; width:100%;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; font-size:14px; font-family:'Work Sans'; color:var(--paper);
}
.diag-email-form input::placeholder{color:var(--muted);}
.diag-email-note{font-size:12.5px; color:var(--muted); margin-top:12px;}
.diag-email-note a{color:var(--gold); text-decoration:underline; text-underline-offset:2px;}
.diag-email-success{display:none; color:#3FAE7A; font-size:14px; margin-top:14px; font-weight:600;}

@media (max-width: 700px){
  .diag-question-card{padding:36px 24px;}
  .diag-gauges{grid-template-columns:1fr;}
  .diag-plans{grid-template-columns:1fr;}
}