/* ===========================================
   Sapiens Academy — Diagnóstico de Negocio Operable
   Colores tomados del PDF original
   =========================================== */
:root{
  --navy-900: #0E1B2E;   /* fondo principal */
  --navy-800: #142943;   /* tarjetas oscuras */
  --navy-700: #1B3253;
  --navy-600: #243F66;
  --orange:   #F26A1B;   /* acento naranja */
  --orange-2: #FF7A30;
  --white:    #FFFFFF;
  --gray-100: #F4F4F4;
  --gray-300: #D8DEE5;
  --gray-500: #8A98AC;
  --gray-600: #6B7A91;
  --text-dark: #1B2A40;
  --radius: 14px;
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.35);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--gray-100);
  color: var(--text-dark);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ============== PROGRESS ============== */
.progress-wrap{
  position:sticky; top:0; z-index:50;
  background: var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.progress-inner{ max-width:980px; margin:0 auto; padding:14px 24px; }
.progress-meta{
  display:flex; justify-content:space-between; align-items:center;
  color: var(--white); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:10px;
}
.progress-meta .brand strong{ color: var(--orange); }
.progress-bar{
  height:4px; background: rgba(255,255,255,.08); border-radius:99px; overflow:hidden;
}
.progress-fill{
  height:100%; width:0%; background: var(--orange);
  transition: width .4s cubic-bezier(.2,.7,.2,1);
}

/* ============== APP / STEP ============== */
.app{ position:relative; }
.step{ display:none; animation: fadeUp .45s ease both; }
.step.active{ display:block; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform:none; }
}

.container{
  max-width:820px; margin:0 auto;
  background: var(--white);
  padding:56px 56px 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  margin-top:40px; margin-bottom:40px;
}
.container.dark-mode{
  background: var(--navy-900); color: var(--white);
}
.container.dark-mode .qtext, .container.dark-mode .italic, .container.dark-mode p{ color: rgba(255,255,255,.85); }

/* ============== COVER (Step 0 & Thanks) ============== */
.cover{
  background: var(--navy-900);
  color: var(--white);
  min-height: 100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 64px 8vw;
  position:relative;
}
.cover::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background: var(--orange);
}
.cover-brand{ letter-spacing:.12em; font-size:14px; margin-bottom:64px; }
.brand strong{ color: var(--orange); }

/* Logo Sapiens */
.brand-logo{
  display:block;
  height:auto; width:auto;
  align-self: flex-start; /* evita stretch en flex column del .cover */
  flex-shrink: 0;
  max-width: 100%;
}
.brand-logo--sm{ height: 28px; }
.brand-logo--cover{ height: 56px; margin-bottom:56px; }
@media (max-width: 720px){
  .brand-logo--cover{ height: 44px; margin-bottom:40px; }
  .brand-logo--sm{ height: 22px; }
}
.tag{
  display:inline-block; color: var(--orange);
  font-size:12px; letter-spacing:.18em; font-weight:700;
  text-transform:uppercase; margin-bottom:24px;
}
.cover h1{
  font-size: clamp(48px, 8vw, 92px);
  line-height:1.02; font-weight:800; letter-spacing:-0.02em;
  margin:0 0 36px;
}
.cover .accent{ color: var(--orange); }
.divider{ width:60px; height:3px; background: var(--orange); margin: 0 0 28px; border-radius:2px; }
.lead{ font-size: 18px; max-width: 640px; opacity:.92; }
.cover .btn.primary{ margin-top: 48px; align-self:flex-start; }
.foot-note{
  position:absolute; bottom:32px; left:8vw;
  color: rgba(255,255,255,.4); font-size:11px; letter-spacing:.15em;
}
.thanks{ min-height: 100vh; }

/* ============== TYPOGRAPHY HELPERS ============== */
.eyebrow{
  display:inline-block;
  color: var(--orange);
  font-size:12px; letter-spacing:.18em; font-weight:700;
  text-transform:uppercase; margin-bottom:14px;
}
.eyebrow.accent{ color: var(--orange); }
.container h2{
  font-size: clamp(32px, 4.4vw, 44px);
  font-weight: 800; line-height:1.1; letter-spacing:-0.01em;
  margin: 0 0 18px;
  color: var(--text-dark);
}
.container.dark-mode h2{ color: var(--white); }
.accent-line{ color: var(--text-dark); position:relative; }
.container h2 .accent-line{ color: var(--text-dark); }
.huge{
  font-size: clamp(72px, 14vw, 160px);
  font-weight: 900; line-height:.95; letter-spacing:-0.04em;
  margin: 16px 0 24px;
}
.italic{ font-style: italic; color: var(--gray-600); margin:0 0 32px; max-width:680px; }
.sub{ color: var(--gray-600); margin-top:-8px; margin-bottom:32px; }
.bold-q{
  font-size: 22px; font-weight: 600; line-height:1.35;
  margin:0 0 40px; max-width:640px;
}

/* ============== RULES (Step 1) ============== */
.rules{ display:flex; flex-direction:column; gap:20px; margin-top:24px; }
.rule{
  display:flex; gap:24px; align-items:flex-start;
  padding:20px 24px;
  background: var(--gray-100);
  border-radius: 10px;
  border-left: 3px solid var(--orange);
}
.rule .num{
  color: var(--orange); font-weight:900;
  font-size: 28px; line-height:1; flex-shrink:0;
}
.rule h3{ margin:0 0 4px; font-size:17px; font-weight:700; color: var(--text-dark); }
.rule p{ margin:0; color: var(--gray-600); font-size:14px; }

.callout{
  margin-top:40px;
  background: var(--navy-900); color: var(--white);
  padding:24px 28px; border-radius: 10px;
}
.callout p{ margin:6px 0 0; color: rgba(255,255,255,.85); font-size:14px; }

/* ============== FORM ============== */
.form-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:20px;
  margin-top:8px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1 / -1; }
.field > span{
  font-size:13px; font-weight:600; color: var(--text-dark);
  letter-spacing:.02em;
}
.field input,
.field select,
.q textarea,
.q input[type=text]{
  width:100%;
  font-family: inherit; font-size: 15px;
  padding: 14px 16px;
  background: var(--white);
  color: var(--text-dark);
  border:1px solid var(--gray-300);
  border-radius: 8px;
  outline:none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus,
.field select:focus,
.q textarea:focus,
.q input[type=text]:focus{
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(242,106,27,.12);
}

/* ============== QUESTIONS ============== */
.q{
  padding: 24px 0;
  border-top: 1px solid var(--gray-300);
  position:relative;
}
.q:first-of-type{ border-top:none; padding-top: 32px; }
.qnum{
  display:inline-block; font-size:11px; letter-spacing:.18em;
  font-weight:700; color: var(--gray-500); margin-bottom: 10px;
}
.qnum.accent{ color: var(--orange); }
.qtext{
  font-size:16px; font-weight:600; line-height:1.45;
  margin:0 0 16px; color: var(--text-dark);
}
.container.dark-mode .qtext{ color: var(--white); }
.q textarea{ resize: vertical; min-height: 100px; }

/* radio stack */
.radio-stack{ display:flex; flex-direction:column; gap:10px; }
.radio-stack label{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 18px;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  cursor:pointer;
  transition: all .18s ease;
  background: var(--white);
}
.radio-stack label:hover{ border-color: var(--navy-600); }
.radio-stack input[type=radio]{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; border:2px solid var(--gray-300);
  border-radius:50%; margin-top:2px; flex-shrink:0;
  cursor:pointer; position:relative; background: var(--white);
}
.radio-stack input[type=radio]:checked{ border-color: var(--orange); }
.radio-stack input[type=radio]:checked::after{
  content:""; position:absolute; inset:3px;
  border-radius:50%; background: var(--orange);
}
.radio-stack label:has(input:checked){
  border-color: var(--orange);
  background: #FFF6EF;
}
.radio-stack span{ font-size:15px; color: var(--text-dark); line-height:1.4; }

/* self-rating */
.self-rating{
  margin-top: 24px;
  padding: 22px 24px;
  background: var(--gray-100);
  border-radius: 10px;
  border-left: 3px solid var(--orange);
}
.self-rating p{ margin: 4px 0 14px; font-weight:600; }
.rating{ display:flex; gap:10px; flex-wrap: wrap; }
.rating button{
  width:54px; height:54px;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  font-size: 16px; font-weight:700;
  cursor:pointer; color: var(--text-dark);
  transition: all .15s ease;
  font-family: inherit;
}
.rating button:hover{ border-color: var(--navy-600); transform: translateY(-1px); }
.rating button.selected{
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  box-shadow: 0 8px 20px -8px rgba(242,106,27,.6);
}

/* yes/no (5 días) */
.yes-no{ display:flex; gap:16px; margin: 24px 0 40px; flex-wrap:wrap; }
.yn-card{
  flex:1; min-width: 220px;
  display:flex; align-items:center; gap:16px;
  padding: 24px 28px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 10px;
  cursor:pointer; color: var(--white);
  font-size: 22px;
  transition: all .18s ease;
}
.yn-card:hover{ border-color: var(--orange); }
.yn-card input{ display:none; }
.yn-box{
  width:24px; height:24px; border:2px solid rgba(255,255,255,.4);
  border-radius:4px; flex-shrink:0; position:relative;
}
.yn-card:has(input:checked) .yn-box{
  background: var(--orange); border-color: var(--orange);
}
.yn-card:has(input:checked) .yn-box::after{
  content:"✓"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color: var(--white); font-weight:900;
}
.yn-card:has(input:checked){ border-color: var(--orange); background: rgba(242,106,27,.08); }

/* ============== SCORE CARD ============== */
.score-card{
  margin: 40px 0 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding: 28px 32px;
  background: var(--navy-900);
  color: var(--white);
  border-radius: 12px;
}
.score-card p{ margin:6px 0 0; color: rgba(255,255,255,.7); font-size: 14px; max-width: 380px; }
.score-hint{ color: var(--orange) !important; font-weight:600; }
.score-num{
  display:flex; align-items:baseline; gap:6px;
  background: var(--white); color: var(--text-dark);
  padding: 14px 26px;
  border-radius: 8px;
  border: 2px solid var(--orange);
}
.score-num #scoreValue{
  font-size: 52px; font-weight: 900; line-height:1; color: var(--orange);
}
.score-total{ font-size: 22px; font-weight:600; color: var(--gray-500); }

/* ============== BUTTONS ============== */
.nav{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--gray-300);
  gap:12px; flex-wrap: wrap;
}
.btn{
  font-family: inherit;
  font-size: 15px; font-weight: 600;
  padding: 14px 28px;
  border-radius: 8px;
  border: none; cursor: pointer;
  transition: all .18s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn.primary{
  background: var(--orange); color: var(--white);
  box-shadow: 0 10px 24px -8px rgba(242,106,27,.6);
}
.btn.primary:hover{ background: var(--orange-2); transform: translateY(-1px); }
.btn.primary:disabled{ opacity:.6; cursor:wait; transform:none; }
.btn.ghost{
  background: transparent; color: var(--gray-600);
  border: 1.5px solid var(--gray-300);
}
.btn.ghost:hover{ color: var(--text-dark); border-color: var(--text-dark); }
.container.dark-mode .btn.ghost{ color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.2); }
.container.dark-mode .btn.ghost:hover{ color: var(--white); border-color: var(--white); }
.container.dark-mode .nav{ border-color: rgba(255,255,255,.1); }

/* ============== TOAST ============== */
.toast{
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text-dark); color: var(--white);
  padding: 14px 22px; border-radius: 8px;
  font-size: 14px; font-weight:500;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.4);
  opacity: 0; transition: all .3s ease;
  z-index: 100;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
.toast.error{ background: #C92A2A; }

/* ============== RESPONSIVE ============== */
@media (max-width: 720px){
  .container{ padding: 36px 24px; margin: 24px 16px; border-radius: 12px; }
  .cover{ padding: 40px 24px; }
  .cover h1{ font-size: 44px; }
  .form-grid{ grid-template-columns: 1fr; }
  .nav{ flex-direction: column-reverse; align-items:stretch; }
  .nav .btn{ width:100%; justify-content:center; }
  .score-card{ flex-direction: column; align-items:flex-start; }
  .rating button{ width:48px; height:48px; }
  .yn-card{ font-size: 18px; padding: 18px 22px; }
}