/* ============================================================
   URWAN CHECKLIST — COMPLEMENTO de form.css
   form.css ya estiliza: checkboxes (label::before/after) y
   botones del footer. AQUI se añade lo que falta:
   titulo, subrayado, barra progreso, instrucciones,
   boton DOWNLOAD (ghost) y diferenciar PREVIOUS / NEXT.
   Mismo wrapper que form.css: .gform_wrapper.gravity-theme
   Paleta alineada: navy #003399, teal claro #c1e6db.
   ============================================================ */

:root {
  --urwan-navy:      #003399;   /* checkbox marcado, botones, labels (igual que form.css) */
  --urwan-navy-2:    #023397;
  --urwan-teal:      #1f9e8e;   /* acento: bullets, subrayado, titulo, borde download */
  --urwan-teal-soft: #c1e6db;   /* checkbox base / barra progreso fondo (igual que form.css) */
  --urwan-text:      #2b2b3a;
  --urwan-bg:        #f2f3f4;
  --urwan-card:      #ffffff;
  --urwan-radius:    6px;
  --urwan-shadow:    0 8px 30px rgba(0,0,0,.06);
}

/* ---------- Pagina / contenedor ---------- */
.urwan-wrap {
  background: var(--urwan-bg);
  padding: 40px 20px 60px;
  color: var(--urwan-text);
}

/* ---------- Titulo + subrayado dos tonos ---------- */
.urwan-title {
  text-align: center;
  color: var(--urwan-teal);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.urwan-title-underline {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 30px;
}
.urwan-title-underline span { height: 4px; border-radius: 2px; background: var(--urwan-teal); }
.urwan-title-underline span:nth-child(1) { width: 28px; }
.urwan-title-underline span:nth-child(2) { width: 70px; }

/* ---------- Tarjeta blanca ---------- */
.urwan-card {
  max-width: 980px;
  margin: 0 auto;
  background: var(--urwan-card);
  border-radius: var(--urwan-radius);
  box-shadow: var(--urwan-shadow);
  padding: 34px 40px;
}

/* ---------- Instrucciones: bullets cuadrados verdes ---------- */
.urwan-instructions h3 { color: var(--urwan-navy); font-weight: 700; margin: 0 0 18px; }
.urwan-instructions ul  { list-style: none; padding: 0; margin: 0; }
.urwan-instructions li  {
  position: relative;
  padding-left: 26px;
  margin-bottom: 18px;
  line-height: 1.5;
  font-size: 14px;
}
.urwan-instructions li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 10px; height: 10px;
  background: var(--urwan-teal);
}

/* botones zona instrucciones (alineados derecha) */
.urwan-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 30px; }

/* ============================================================
   GRAVITY FORMS — mismo wrapper que form.css
   ============================================================ */

/* titulo del paso ("Choose elements...") ya viene de
   .gfield_label_before_complex en form.css. Aqui solo color teal->navy ok */

/* ---------- barra de progreso custom (inyectada por checklist.js) ---------- */
.urwan-progress { margin: 10px 0 40px; }
.urwan-progress-label { color: var(--urwan-navy); font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.urwan-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: var(--urwan-teal-soft);
  overflow: hidden;
}
.urwan-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--urwan-teal);
  transition: width .35s ease;
}
.urwan-progress-step { color: #9aa0a6; font-size: 13px; margin-top: 6px; }

/* ============================================================
   BOTONES — form.css ya pone footer buttons navy.
   Aqui: diferenciar PREVIOUS (ghost verde) de NEXT/SUBMIT (navy)
   + boton DOWNLOAD ghost para la pantalla de instrucciones.
   ============================================================ */

/* PREVIOUS = ghost verde (sobreescribe el navy de form.css) */
.gf_browser_chrome.gform_wrapper.gravity-theme form .gform_page_footer input.gform_previous_button[type="button"] {
  background: #fff;
  color: var(--urwan-teal);
  border: 2px solid var(--urwan-teal);
}
.gf_browser_chrome.gform_wrapper.gravity-theme form .gform_page_footer input.gform_previous_button[type="button"]:hover {
  background: var(--urwan-teal);
  color: #fff;
}

/* footer botones en fila, a la izquierda (como la imagen) */
.gf_browser_chrome.gform_wrapper.gravity-theme form .gform_page_footer {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

/* botones genericos urwan (instrucciones / fuera del form) */
.urwan-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--urwan-radius);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: all .2s ease;
}
.urwan-btn--navy  { background: var(--urwan-navy); color: #fff; }
.urwan-btn--navy:hover  { background: var(--urwan-navy-2); }
.urwan-btn--ghost { background: #fff; color: var(--urwan-teal); border-color: var(--urwan-teal); }
.urwan-btn--ghost:hover { background: var(--urwan-teal); color: #fff; }

/* ============================================================
   CAMBIO DE PANTALLA (no scroll): intro -> form
   Pon en Divi (Row -> Advanced -> CSS Class):
     fila titulo/intro    ->  urwan-intro
     fila instrucciones   ->  urwan-instructions-row
     fila del form        ->  urwan-form-row
   ============================================================ */
/* todo oculto al cargar; checklist.js revela la pantalla correcta segun #gf_18 */
.urwan-intro,
.urwan-instructions-row,
.urwan-form-row { display: none; }

/* ============================================================
   ACORDEONES (.accordion_in) — abre/cierra via checklist.js (.is-open)
   ============================================================ */
.accordion_in {
  background: #fff;
  border-radius: var(--urwan-radius);
  /* box-shadow: var(--urwan-shadow); */
  margin-bottom: 14px;
  overflow: hidden;
}
.acc_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* padding: 18px 22px; */
  cursor: pointer;
  user-select: none;
  flex-direction: row-reverse;
}
.acc_head p {
  margin: 0;
  color: var(--urwan-navy);
  font-weight: 700;
  font-size: 15px;
}
.acc_head p a.glossaryLink { color: var(--urwan-navy); }

/* icono circular +/- a la derecha */
.acc_icon_expand {
  flex: 0 0 auto;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--urwan-teal-soft);
  transition: background .2s ease;
}
.acc_icon_expand::before,
.acc_icon_expand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--urwan-navy);
  transform: translate(-50%, -50%);
}
.acc_icon_expand::before { width: 12px; height: 2px; }   /* barra horizontal (siempre) */
.acc_icon_expand::after  { width: 2px;  height: 12px; }  /* barra vertical (solo cerrado) */
.accordion_in.is-open .acc_icon_expand::after { display: none; }   /* abierto -> "-" */

/* contenido */
.acc_content { padding: 0 22px 18px; }
.acc_content p {
  position: relative;
  margin: 0 0 12px;
  padding-left: 22px;
  line-height: 1.5;
  font-size: 14px;
  color: var(--urwan-navy);
}
.acc_content p:empty { display: none; }
.acc_content p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--urwan-teal);
}

/* ---------- boton Descargar respuestas (pagina final) ---------- */
.urwan-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--urwan-teal);
  border: 2px solid var(--urwan-teal);
  border-radius: var(--urwan-radius);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
  transition: all .2s ease;
}
.urwan-download-btn:hover { background: var(--urwan-teal); color: #fff; }

/* mensaje pagina final cuando no hay contenido tecnico */
.urwan-final-msg { margin-bottom: 24px; }
.urwan-final-msg h3 { color: var(--urwan-navy); font-weight: 700; margin: 0 0 8px; }
.urwan-final-msg p  { color: var(--urwan-text); margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .gf_browser_chrome.gform_wrapper.gravity-theme form .ginput_container_checkbox .gfield_checkbox {
    width: 100%; margin: 0;
  }
  .gf_browser_chrome.gform_wrapper.gravity-theme form .ginput_container_checkbox .gfield_checkbox .gchoice {
    flex: 0 1 100%;
  }
  .urwan-card { padding: 24px 18px; }
  .urwan-actions { flex-direction: column; }
}