/* ============================================================
   estilos.css  –  Alex Cubillos | Unidos Avanzamos!
   ✅ v3: Autocomplete barrio, Dirección estructurada,
          Colores lider-box alineados con paleta del sitio,
          Botón encuesta adicional.
   ============================================================ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  /* Paleta principal */
  --blue-dark:    #1a2a5e;
  --blue-main:    #3b6fd4;
  --blue-mid:     #5a8fe8;
  --blue-light:   #7aabff;
  --blue-glow:    #a0c4ff;

  /* Pastel */
  --pastel-blue:  #dce8ff;
  --pastel-lav:   #ede4ff;
  --pastel-peach: #ffe8d6;
  --pastel-mint:  #d6f5e8;
  --pastel-bg:    #f0f4ff;

  /* Neutros */
  --white:        #ffffff;
  --gold:         #f4b942;
  --gold-dark:    #c9882a;
  --gray-soft:    #eef3fd;
  --gray-text:    #6b7a99;
  --success:      #22c55e;
  --error:        #e53935;

  /* Sombras */
  --shadow-sm:    0 4px 12px rgba(60,90,180,.08);
  --shadow-md:    0 12px 32px rgba(60,90,180,.12);
  --shadow-lg:    0 24px 64px rgba(60,90,180,.16);
}

/* ── Reset global ──────────────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--pastel-bg);
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--blue-dark);
}

/* ── Partículas (se ocultan en el hero pastel) ─────────── */
#particles { display: none; }

/* ══════════════════════════════════════════════════════════
   SPLIT HERO – 50% Collage │ 50% Perfil
   ══════════════════════════════════════════════════════════ */
.split-hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow: hidden;
}

/* Grid verdadero 50/50 */
.split-hero__inner {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* ── LADO IZQUIERDO: Collage sin bordes ───────────────── */
.split-hero__left {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #1B3145; /* fallback mientras cargan fotos */
}

.collage {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 0;              /* SIN bordes entre imágenes */
  background:#1B3145; /* fallback azul oscuro para celdas sin imagen */
}

.collage__item {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%; /* Prioriza la parte superior → caras visibles */
  display: block;
  transition: transform .7s ease;
}

.collage__item:hover img {
  transform: scale(1.08);
}

/* Gradiente suave en el borde derecho del collage */
.split-hero__left::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 100%;
  background: linear-gradient(to right, transparent, #1B3145);
  pointer-events: none;
  z-index: 1;
}

/* ── LADO DERECHO: Tarjeta de perfil pastel ────────────── */
.split-hero__right {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    140deg,
    #161925 0%,
    #1B3145 40%,
    #1F4964 70%,
    #2B334C 100%
  );
  padding: 48px 36px;
  overflow-y: auto;
}

/* Tarjeta de perfil */
.profile-card {

  width: 100%;
  max-width: 460px;
background: rgba(27, 49, 69, 0.96);

  border-radius: 28px;

  padding: 52px 40px 46px;

  text-align: center;

  border: 1px solid rgba(150,170,220,.25);

  backdrop-filter: blur(14px);

  box-shadow:
  0 10px 30px rgba(0,0,0,.18),
  0 30px 70px rgba(0,0,0,.28);
}

.profile-card__photoWrap {

  width: 290px;
  height: 290px;

  margin: 0 auto 26px;

  border-radius: 50%;

  padding: 8px;

  background: linear-gradient(
    135deg,
    #1F4964,
    #2B334C,
    #312840
  );

  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.profile-card__photo {

  width: 100%;
  height: 100%;

  border-radius: 50%;

  object-fit: cover;
  object-position: 50% 25%;

  display: block;

  background: #fff;
}


/* Nombre */
.profile-card__name {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-top: 10px;
}

/* Descripción */
.profile-card__intro {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.80;
  color: #d6deed;
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
  padding: 0 4px;
}

/* Detalles de perfil */
.profile-details {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(244,185,66,.35);
  background: rgba(22,25,37,.55);
}

.profile-detail {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px dashed rgba(255,255,255,.15);
  font-size: 13px;
  color: #f1f5ff;
}
.profile-detail:last-child { border-bottom: none; }
.profile-detail .k { font-weight: 700; color: #ffffff; }
.profile-detail .v { color: #c9d4e8; }

/* Botón suave del hero */
.btn-soft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  border: none;
  border-radius: 50px;
  padding: 13px 26px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #09cec4 0%, #24bfca 55%, #25b9d3 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .22s ease, box-shadow .22s ease;
}

.btn-soft:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.profile-card__micro {
  margin-top: 14px;
  font-size: 11px;
  color: rgba(255,255,255,.65);
}

/* ── Responsive Hero ────────────────────────────────────── */
@media (max-width: 900px) {
  .split-hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: 55vw auto;
  }
  .split-hero__left {
    min-height: 55vw;
  }
  .split-hero__left::after { width: 0; }
  .split-hero__right {
    padding: 36px 20px;
  }
  .profile-card {
    max-width: 100%;
  }
  .collage {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }
}

@media (max-width: 520px) {
  .profile-card__name { font-size: 1.6rem; }
  .profile-card__photoWrap { width: 190px; height: 190px; }
  .profile-card { padding: 32px 20px; }
  .collage {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════
   TAGLINE STRIP
   ══════════════════════════════════════════════════════════ */
.tagline-strip {
  position: relative; z-index: 1;
   background: linear-gradient(
    135deg,
    #1F4964,
    #2B334C,
    #282a40
  );
  border-top: none;
  border-bottom: none;
  padding: 13px 0;
  overflow: hidden;
}

.tagline-track {
  display: flex;
  gap: 60px;
  animation: scrollLeft 22s linear infinite;
  white-space: nowrap;
}

@keyframes scrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tagline-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  font-weight: 600;
}
.tagline-item i { color: var(--gold); }

/* ══════════════════════════════════════════════════════════
   FORMULARIO – Pastel & Moderno
   ══════════════════════════════════════════════════════════ */
.form-section {
  position: relative; z-index: 1;
 background: linear-gradient(160deg, #161925 0%, #1B3145 35%, #1F4964 70%, #2B334C 100%);
  display: flex;
  justify-content: center;
  padding: 64px 20px 90px;
}

.form-card {
  background: var(--white);
  border-radius: 28px;
  max-width: 740px;
  width: 100%;
  box-shadow:
    0 2px 8px rgba(10, 20, 80, .12),
    0 28px 72px rgba(10, 20, 80, .28);
  overflow: hidden;
  border: 1.5px solid rgba(59, 111, 212, .25);
}

/* Header del formulario */
.form-header {
 background: linear-gradient(160deg, #1B3145 0%, #1F4964 60%, #2B334C 100%);
  padding: 34px 40px 30px;
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.form-header::before {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  top: -60px; right: -40px;
}

.form-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 32px;
  background: var(--white);
  clip-path: ellipse(54% 100% at 50% 100%);
}

.form-header-avatar {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  border: 2px solid rgba(255, 255, 255, .28);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin: 0 auto 14px;
  position: relative; z-index: 1;
}

.form-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  position: relative; z-index: 1;
}

.form-header p {
  font-size: 13px;
  opacity: .78;
  margin-top: 5px;
  position: relative; z-index: 1;
}

/* Badge de referido */
.ref-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
 background: rgba(31, 73, 100, .15);
  border: 1px solid rgba(31, 73, 100, .35);
  border-radius: 50px;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8ff;
  margin-top: 12px;
  position: relative; z-index: 1;
  animation: fadeInDown .5s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Steps */
.steps-wrap { padding: 36px 40px 0; background: #fff; }

.steps-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  margin-bottom: 34px;
}

.steps-bar::before {
  content: '';
  position: absolute;
  top: 18px; left: 8%; right: 8%;
  height: 3px;
  background: rgba(31, 73, 100, .25);
  border-radius: 4px; z-index: 0;
}

.progress-line {
  position: absolute;
  top: 18px; left: 8%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-main), var(--blue-glow));
  border-radius: 4px; z-index: 1;
  transition: width .5s ease;
}

.step-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  position: relative; z-index: 2; flex: 1;
}

.step-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  background: rgba(31, 73, 100, .20);
  color: #1F4964;
  border: 2px solid rgba(31, 73, 100, .35);
  transition: all .4s ease;
}

.step-item.active .step-circle {
  background: var(--blue-main);
  color: white;
  border-color: var(--blue-main);
  box-shadow: 0 0 0 6px rgba(59, 111, 212, .14);
}

.step-item.done .step-circle {
  background: var(--success);
  color: white;
  border-color: var(--success);
}

.step-label { font-size: 11px; font-weight: 600; color: var(--gray-text); }
.step-item.active .step-label { color: var(--blue-main); }
.step-item.done  .step-label  { color: var(--success); }

/* Body */
.form-body { padding: 0 40px 42px; }

.form-step { display: none; animation: slideIn .35s ease; }
.form-step.active { display: block; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

.step-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.05rem; font-weight: 800;
  color: var(--blue-dark);
  margin-bottom: 22px;
}

.step-title .ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #1F4964, #2B334C);
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-size: 16px; flex-shrink: 0;
}

/* Grid de campos */
.form-grid { display: grid; gap: 16px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.span-2 { grid-column: 1 / -1; }

/* Grupos de campo */
.field-group { display: flex; flex-direction: column; gap: 7px; }

.field-group label {
  font-size: 13px; font-weight: 600;
  color: var(--blue-dark);
}

.field-group label span { color: var(--error); }

/* ── Inputs azul-site ─────────────────────────────────── */
.field-group input,
.field-group select,
.field-group textarea {
 border: 1.5px solid rgba(31, 73, 100, .35);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  color: var(--blue-dark);
  background: #eef4ff;
  transition: all .3s;
  outline: none;
  box-shadow: 0 2px 6px rgba(59, 111, 212, .07);
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  border-color: var(--blue-main);
  background: var(--white);
  box-shadow:
    0 0 0 4px rgba(59, 111, 212, .14),
    0 4px 16px rgba(59, 111, 212, .14);
}

.field-group input.error  { border-color: var(--error); background: #fff5f5; }
.field-group select.error { border-color: var(--error); background: #fff5f5; }
.field-group textarea.error { border-color: var(--error); background: #fff5f5; }

.field-group .error-msg { font-size: 11px; color: var(--error); display: none; }
.field-group input.error ~ .error-msg  { display: block; }
.field-group select.error ~ .error-msg { display: block; }
.field-group input.error + .error-msg  { display: block; }
.field-group select.error + .error-msg { display: block; }
.field-group input.error ~ span.error-msg  { display: block; }
.field-group select.error ~ span.error-msg { display: block; }

.field-group textarea { resize: vertical; min-height: 90px; }

/* Radio buttons */
.radio-group { display: flex; gap: 10px; flex-wrap: wrap; }

.radio-btn {
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid rgba(59, 111, 212, .28);
  border-radius: 14px;
  padding: 11px 16px;
   font-size: 15px;
  background: #eef4ff;
  transition: all .25s;
   color: #1F4964;
  box-shadow: 0 2px 6px rgba(59, 111, 212, .06);
}

.radio-btn input { display: none; }

.radio-btn:hover {
  border-color: var(--blue-light);
  background: var(--pastel-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(60, 90, 180, .10);
}

.radio-btn.selected {
  border-color: var(--blue-main);
  background: linear-gradient(135deg, #e8f0ff, #f0e8ff);
  color: var(--blue-main);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(59, 111, 212, .15);
}

.radio-btn i { font-size: 15px; }

/* ══════════════════════════════════════════════════════════
   AUTOCOMPLETADO BARRIO / VEREDA
   ══════════════════════════════════════════════════════════ */
.autocomplete-wrap {
  position: relative;
}

.autocomplete-wrap > input[type="text"] {
  width: 100%;
}

.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--white);
  border: 1.5px solid rgba(59, 111, 212, .28);
  border-radius: 14px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 28px rgba(59, 111, 212, .18);
  display: none;
  list-style: none;
  padding: 6px 0;
  animation: slideIn .2s ease;
}

.autocomplete-list.open {
  display: block;
}

.autocomplete-item {
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--blue-dark);
  transition: background .15s;
  border-bottom: 1px solid rgba(200, 216, 255, .25);
  font-family: 'Poppins', sans-serif;
}

.autocomplete-item:last-child { border-bottom: none; }

.autocomplete-item:hover {
  background: linear-gradient(135deg, #eef4ff, #f0f4ff);
  color: var(--blue-main);
  font-weight: 600;
}

.autocomplete-item mark {
  background: rgba(59, 111, 212, .18);
  color: var(--blue-main);
  border-radius: 3px;
  padding: 0 2px;
  font-style: normal;
  font-weight: 700;
}

/* Scrollbar personalizada para la lista */
.autocomplete-list::-webkit-scrollbar { width: 5px; }
.autocomplete-list::-webkit-scrollbar-track { background: transparent; }
.autocomplete-list::-webkit-scrollbar-thumb {
  background: rgba(59, 111, 212, .25);
  border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════
   DIRECCIÓN ESTRUCTURADA
   ══════════════════════════════════════════════════════════ */
.dir-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dir-type-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dir-type-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid rgba(31, 73, 100, .35);
  border-radius: 12px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  background: #eef4ff;
  transition: all .25s;
  color: #1F4964;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 2px 6px rgba(59, 111, 212, .06);
  user-select: none;
}

.dir-type-btn input { display: none; }

.dir-type-btn:hover {
  border-color: var(--blue-light);
  background: var(--pastel-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 111, 212, .12);
}

.dir-type-btn.selected {
  border-color: var(--blue-main);
  background: linear-gradient(135deg, #1F4964, #2B334C);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(31, 73, 100, .25);
}

.dir-type-btn.selected i { color: var(--gold); }

.dir-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideIn .3s ease;
}

.dir-prefix {
  background: linear-gradient(135deg, #1F4964, #3b6fd4);
  color: white;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(31, 73, 100, .25);
}

.dir-prefix i { font-size: 12px; color: var(--gold); }

.dir-input-row > input[type="text"] {
  flex: 1;
  border: 1.5px solid rgba(31, 73, 100, .35) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  color: var(--blue-dark);
  background: #eef4ff !important;
  outline: none;
  box-shadow: 0 2px 6px rgba(59, 111, 212, .07);
  transition: all .3s;
}

.dir-input-row > input[type="text"]:focus {
  border-color: var(--blue-main) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 4px rgba(59, 111, 212, .14), 0 4px 16px rgba(59, 111, 212, .14) !important;
}

/* ══════════════════════════════════════════════════════════
   PREGUNTA DE LIDERAZGO – Colores alineados con el sitio
   ══════════════════════════════════════════════════════════ */
.lider-box {
  background: linear-gradient(135deg, #eef4ff 0%, #f0f6ff 50%, #e8f0fa 100%);
  border: 2px solid rgba(31, 73, 100, .35);
  border-radius: 20px;
  padding: 20px;
  margin-top: 4px;
  box-shadow: 0 4px 18px rgba(31, 73, 100, .14);
  position: relative;
}

/* Decoración sutil con el color dorado del sitio */
.lider-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1F4964, var(--gold), #3b6fd4);
  border-radius: 20px 20px 0 0;
}

.lider-question {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.lider-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1F4964, #2B334C);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(31, 73, 100, .30);
}

.lider-text strong {
  display: block;
  font-size: 14.5px;
  color: var(--blue-dark);
  font-weight: 700;
}

.lider-text p {
  font-size: 12px;
  color: var(--blue-main);
  margin-top: 4px;
  line-height: 1.55;
}

/* Radio buttons especiales para la pregunta de liderazgo */
.radio-lider {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.radio-lider-si,
.radio-lider-no {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
}

.radio-lider-si i,
.radio-lider-no i {
  font-size: 22px;
  margin-bottom: 4px;
}

.radio-lider-si i  { color: var(--gold); }
.radio-lider-no i  { color: var(--blue-main); }

.radio-lider-si span,
.radio-lider-no span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.radio-lider-si strong,
.radio-lider-no strong {
  font-size: 13px;
  display: block;
}

.radio-lider-si small,
.radio-lider-no small {
  font-size: 11px;
  color: var(--gray-text);
  font-weight: 400;
}

/* Seleccionado: Sí – destaca con el dorado del sitio */
.radio-lider-si.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, #1F4964, #2B334C);
  color: var(--gold);
  box-shadow: 0 4px 16px rgba(31, 73, 100, .30);
}

.radio-lider-si.selected strong { color: var(--gold); }
.radio-lider-si.selected small  { color: rgba(255,255,255,.65); }

/* Seleccionado: No – usa el azul principal */
.radio-lider-no.selected {
  border-color: var(--blue-main);
  background: linear-gradient(135deg, #1F4964, #2B334C);
  color: var(--blue-glow);
  box-shadow: 0 4px 16px rgba(59, 111, 212, .25);
}

.radio-lider-no.selected strong { color: var(--blue-glow); }
.radio-lider-no.selected small  { color: rgba(255,255,255,.65); }
.radio-lider-no.selected i { color: var(--blue-light); }

/* ── Navegación de pasos ───────────────────────────────── */
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  gap: 12px;
}

.btn {
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .25s;
}

.btn-back {
  background: rgba(59, 111, 212, .10);
  color: var(--blue-main);
  border: 1.5px solid rgba(59, 111, 212, .20);
}
.btn-back:hover {
  background: rgba(59, 111, 212, .18);
  color: var(--blue-dark);
  transform: translateY(-1px);
}

.btn-next {
  background: linear-gradient(135deg, #1F4964, #2B334C);;
  color: white;
  flex: 1;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(59, 111, 212, .30);
}
.btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(59, 111, 212, .40);
}

.btn-submit {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: white;
  flex: 1;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(34, 197, 94, .30);
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(34, 197, 94, .40);
}

/* ── Resumen (Step 5) ─────────────────────────────────── */
.confirm-box {
  background: linear-gradient(135deg, #eaf2ff, #e8f0ff);
  border: 1.5px solid rgba(59, 111, 212, .20);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 20px;
}

.confirm-box h4 {
  font-size: 14px; font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}

.confirm-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(200, 216, 255, .4);
}
.confirm-row:last-child { border-bottom: none; }
.confirm-row span:first-child { color: var(--gray-text); }
.confirm-row span:last-child  { color: var(--blue-dark); font-weight: 600; }

/* Fila especial de liderazgo en resumen */
.confirm-row-lider {
  background: rgba(31, 73, 100, .08);
  border-radius: 8px;
  padding: 9px 8px;
  margin-top: 4px;
}

/* Privacy check */
.privacy-check {
  display: flex; align-items: flex-start;
  gap: 10px; margin-top: 16px;
}
.privacy-check input {
  width: 18px; height: 18px;
  accent-color: var(--blue-main);
  margin-top: 2px; flex-shrink: 0;
}
.privacy-check label {
  font-size: 12px; color: var(--gray-text); line-height: 1.6;
}
.privacy-check label a { color: var(--blue-main); }

/* ══════════════════════════════════════════════════════════
   ENCUESTA ADICIONAL – Al final del Step 5
   ══════════════════════════════════════════════════════════ */
.encuesta-adicional-section {
  margin-top: 24px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #eef4ff 0%, #f0f6ff 100%);
  border: 1.5px solid rgba(59, 111, 212, .22);
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(59, 111, 212, .08);
}

.encuesta-adicional-section p {
  font-size: 14px;
  color: var(--blue-dark);
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
}

.encuesta-adicional-section p i {
  color: var(--blue-main);
  font-size: 16px;
}

.btn-encuesta-adicional {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #1F4964, #3b6fd4);
  color: white;
  border-radius: 50px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 8px 24px rgba(59, 111, 212, .30);
  transition: all .25s;
  letter-spacing: .01em;
}

.btn-encuesta-adicional i { font-size: 15px; }

.btn-encuesta-adicional:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(59, 111, 212, .42);
  background: linear-gradient(135deg, #2B334C, #5a8fe8);
  color: white;
}

/* ── Pantalla de éxito ─────────────────────────────────── */
.success-screen {
  text-align: center;
  padding: 20px 0;
  animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.75); }
  to   { opacity: 1; transform: scale(1); }
}

.success-icon {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: white;
  margin: 0 auto 20px;
  box-shadow: 0 12px 36px rgba(34, 197, 94, .40);
}

.success-screen h3 {
  font-size: 1.6rem; font-weight: 800;
  color: var(--blue-dark);
}

.success-screen p {
  color: var(--gray-text); font-size: 14px;
  margin: 8px auto 0; max-width: 380px;
}

.success-details {
  background: linear-gradient(135deg, #f0f6ff, #f5eeff);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 20px 0;
  text-align: left;
}

.success-details .row {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 6px 0;
  border-bottom: 1px solid rgba(200, 216, 255, .4);
}
.success-details .row:last-child { border-bottom: none; }
.success-details .row span:first-child { color: var(--gray-text); font-weight: 500; }
.success-details .row span:last-child  { color: var(--blue-dark); font-weight: 700; }

/* ── Card de líder en success ──────────────────────────── */
.resultado-lider-card {
  background: linear-gradient(135deg, #fff8e0, #fff3c4);
  border: 2px solid rgba(244, 185, 66, .4);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 20px;
  animation: popIn .4s ease;
}

.resultado-lider-card h2 {
  font-size: 1.3rem; font-weight: 800;
  color: #7a4a00; margin-bottom: 8px;
}

.resultado-lider-card p {
  font-size: 13.5px; color: #9a6010;
  margin-bottom: 14px;
}

.link-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(244, 185, 66, .5);
  background: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
  color: var(--blue-dark);
  outline: none;
}

.link-actions {
  display: flex; gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Botones de link de referido ───────────────────────── */
.btn-copy-ref {
  background: linear-gradient(135deg, var(--blue-main), var(--blue-mid));
  color: #fff; border: none;
  padding: 10px 20px; border-radius: 50px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px;
  transition: transform .2s, box-shadow .2s;
}
.btn-copy-ref:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(59, 111, 212, .35);
}

.btn-wa-ref {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff; border: none;
  padding: 10px 20px; border-radius: 50px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px;
  transition: transform .2s, box-shadow .2s;
}
.btn-wa-ref:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, .35);
}

/* ── Ayuda puesto de votación ──────────────────────────── */
.help-puesto {
  margin-top: 8px;
  font-size: 12px;
  color: var(--gray-text);
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 4px;
}
.help-puesto .fa-question-circle {
  color: var(--blue-light); font-size: 13px; flex-shrink: 0;
}
.help-puesto a {
  color: var(--blue-main); font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .2s;
}
.help-puesto a:hover {
  color: var(--blue-mid);
  text-decoration: underline;
}

/* ── Responsive general ────────────────────────────────── */
@media (max-width: 768px) {
  .radio-lider { grid-template-columns: 1fr; }
  .form-grid.cols-2 { grid-template-columns: 1fr; }
  .steps-wrap, .form-body { padding-inline: 20px; }
  .form-header { padding: 26px 20px 28px; }
  .dir-type-row { flex-direction: column; }
  .dir-type-btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .form-card { border-radius: 20px; }
  .dir-input-row { flex-direction: column; align-items: stretch; }
  .dir-prefix { justify-content: center; }
}

.btn-encuesta{
  display:inline-block;
  margin-top:10px;
  padding:6px 14px;
  font-size:13px;
  background:#f1f1f1;
  color:#333;
  border-radius:6px;
  text-decoration:none;
}

.btn-encuesta:hover{
  background:#e2e2e2;
}

.encuesta-mini{
  margin-top:8px;
}