/* ============================================================
   FUNDETEC - Sincelejo
   Colores: Azul principal #1a3a8a / Amarillo #f5c200 / Blanco
   Override completo sobre style.css base (Unimeta rojo)
   ============================================================ */

:root {
  --primary:       #1a3a8a;
  --primary-dark:  #122970;
  --primary-light: #2553c5;
  --accent:        #f5c200;
  --accent-dark:   #d4a900;
  --success:       #1a8a45;
  --success-dark:  #136632;
  --text:          #1a1a2e;
  --text-muted:    #5a5a7a;
  --border:        #d0d8f0;
  --bg:            #f0f4ff;
  --card-bg:       #ffffff;
  --shadow:        0 8px 32px rgba(26,58,138,.14);
}

/* Body & background */
body {
  background: linear-gradient(135deg, #e8eeff 0%, #f0f7ff 50%, #e8f4ff 100%) !important;
}

/* Card principal */
.card {
  box-shadow: 0 12px 40px rgba(26,58,138,.18) !important;
}

/* Barra de progreso */
.bar {
  background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
}

/* Logo wrap — fondo blanco con franja amarilla inferior */
.logo-wrap {
  background: #ffffff !important;
  border-bottom: 4px solid var(--accent) !important;
  padding: 20px !important;
}
.logo {
  color: var(--primary) !important;
  letter-spacing: 3px;
}

/* Hook title */
.hook {
  color: var(--primary) !important;
}

/* Step headers */
h2 {
  color: var(--primary) !important;
}

/* Tarjetas de carreras */
.carrera-card {
  border-color: var(--border) !important;
}
.carrera-card:hover,
.carrera-card.selected {
  border-color: var(--primary) !important;
  background: linear-gradient(135deg, #f0f4ff, #e8eeff) !important;
  box-shadow: 0 4px 16px rgba(26,58,138,.15) !important;
}
.carrera-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: #fff !important;
}
.carrera-title {
  color: var(--primary) !important;
}
.carrera-chip {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important;
  color: var(--primary) !important;
  font-weight: 700;
}

/* Desc box */
.desc-box {
  background: linear-gradient(135deg, #f0f4ff, #e8eeff) !important;
  border-left-color: var(--primary) !important;
}
.desc-box strong {
  color: var(--primary) !important;
}

/* Botón principal */
.btn-success {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  border: none;
}
.btn-success:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,58,138,.35) !important;
}

/* Botón WhatsApp — verde siempre */
.btn-wa {
  background: linear-gradient(135deg, #25d366, #1da851) !important;
  margin-top: 20px;
}
.btn-wa:hover {
  background: linear-gradient(135deg, #1da851, #158a3e) !important;
}

/* Botón WhatsApp grande en gracias */
.btn-wa-grande {
  font-size: 1.15rem !important;
  padding: 18px 28px !important;
  letter-spacing: .5px;
  box-shadow: 0 6px 24px rgba(37,211,102,.4) !important;
  animation: pulse-wa 2s infinite;
}

@keyframes pulse-wa {
  0%   { box-shadow: 0 6px 24px rgba(37,211,102,.4); }
  50%  { box-shadow: 0 8px 32px rgba(37,211,102,.7); }
  100% { box-shadow: 0 6px 24px rgba(37,211,102,.4); }
}

/* Urgencia bajo el botón WA */
.wa-urgencia {
  text-align: center;
  color: var(--success-dark);
  font-weight: 600;
  font-size: .9rem;
  margin: 6px 0 0;
}

/* Frase motivacional (reemplaza video) */
.frase-motivacional {
  background: linear-gradient(135deg, #f0f4ff, #e8f0ff);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 20px 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.frase-icono {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.frase-texto {
  font-size: 1rem;
  color: var(--primary);
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
}

/* Tag carrera seleccionada */
.carrera-tag {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  border: none !important;
}
.carrera-tag span {
  color: rgba(255,255,255,.75) !important;
}
.carrera-tag strong {
  color: var(--accent) !important;
}

/* Check animado */
.check-circle {
  stroke: var(--primary) !important;
}
.check-path {
  stroke: var(--accent) !important;
}

/* Badges */
.badges span {
  background: var(--bg) !important;
  color: var(--primary) !important;
  border-color: var(--border) !important;
}

/* Social cards */
.social-card {
  border-color: var(--border) !important;
}
.social-card:hover {
  border-color: var(--primary) !important;
  background: #f0f4ff !important;
}
.social-name {
  color: var(--primary) !important;
}

/* Back home */
.back-home {
  color: var(--primary) !important;
}
.back-home:hover {
  color: var(--primary-dark) !important;
}

/* Cookie banner */
.cookie-banner {
  border-top-color: var(--primary) !important;
}
.cookie-btn {
  background: var(--primary) !important;
  color: #fff !important;
}

/* Step number */
.step-num {
  color: var(--primary) !important;
}

/* Back arrow */
.back {
  color: var(--primary) !important;
}

/* Input focus */
input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(26,58,138,.12) !important;
}

/* Hint text */
.hint {
  color: var(--text-muted) !important;
}

/* Thanks title */
.thanks-title {
  color: var(--primary) !important;
}