:root{

  /* Colores principales */
  --bs-primary: #0B0B52;
  --bs-primary-rgb: 11,11,82;

  --bs-secondary: #1E3A8A;
  --bs-secondary-rgb: 30,58,138;

  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;

  /* Colores propios ZOE */
  --zoe-primary: #0B0B52;
  --zoe-secondary: #1E3A8A;
  --zoe-accent: #F15A24;
  --zoe-accent-hover: #D94F1F;

  --zoe-dark: #111827;
  --zoe-light: #F8F9FA;

  /* Bordes */
  --bs-border-radius: 1rem;
  --bs-border-radius-sm: .75rem;
  --bs-border-radius-lg: 1.25rem;

  /* Sombras */
  --zoe-shadow:
      0 10px 30px rgba(0,0,0,.15);

}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #111827, #1e3a8a);
  display: flex;
  align-items: center;
}


.card{

    border:none;

    border-radius:20px;

    box-shadow:var(--zoe-shadow);
}


.btn-primary{

    background-color:var(--zoe-primary);
    border-color:var(--zoe-primary);

}

.btn-primary:hover{

    background-color:#07073D;
    border-color:#07073D;
}


.btn-accent{

    background-color:var(--zoe-accent);
    border-color:var(--zoe-accent);
    color:white;
}

.btn-accent:hover{

    background-color:var(--zoe-accent-hover);
    border-color:var(--zoe-accent-hover);
    color:white;
}


.progress{

    height:12px;
    border-radius:20px;
}

.progress-bar{

    background-color:var(--zoe-accent);
}


.question-title{

    color:var(--zoe-primary);

    font-weight:700;
}


.option-btn{

    padding:16px;
    text-align:left;

    border-radius:16px;

    transition:.3s;
}


.option-btn.correct{

    background:#198754;
    border-color:#198754;
    color:white;
}

.option-btn.incorrect{

    background:#dc3545;
    border-color:#dc3545;
    color:white;
}

.result-score{

    font-size:4rem;
    font-weight:bold;

    color:var(--zoe-primary);
}

.hero-title{

    color:white;

    font-weight:700;

    font-size:2rem;
}

.hero-subtitle{

    color:rgba(255,255,255,.8);
}


.app-card {
  max-width: 520px;
  border-radius: 20px;
}

.option-btn {
  text-align: left;
  padding: 14px;
  border: 2px solid #dee2e6;
  background: #fff;
  border-radius: 14px;
}

.option-btn.selected {
  background-color: rgba(241, 90, 36, .12);
  border-color: var(--zoe-accent);
  color: var(--zoe-primary);
  box-shadow: 0 0 0 .2rem rgba(241, 90, 36, .18);
  font-weight: 700;
}

.option-btn.correct {
  background-color: #198754;
  color: white;
  border-color: #198754;
}

.option-btn.incorrect {
  background-color: #dc3545;
  color: white;
  border-color: #dc3545;
}