/* ═══════════════════════════════════════════════════════
   COTIZADOR DE DIVORCIO v3 — Estilos finales
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --cd-az:      #1a5fa8;
  --cd-az-osc:  #134d8a;
  --cd-azc:     #e8f1fb;
  --cd-azb:     #b5d4f4;
  --cd-ac:      #2d8cf0;
  --cd-tx:      #1c2b3a;
  --cd-gr:      #64748b;
  --cd-bd:      #d1dce8;
  --cd-bg:      #f5f8fc;
  --cd-wh:      #ffffff;
  --cd-er:      #e24b4a;
  --cd-ok:      #1d9e75;
  --cd-wn:      #ef9f27;
  --cd-t:       .22s ease;
  --cd-radio:   14px;
}

/* ── Wrapper ── */
.cd-app {
  font-family: 'Plus Jakarta Sans', sans-serif;
  max-width: 580px;
  margin: 2rem auto;
  background: var(--cd-wh);
  border-radius: 20px;
  border: 1px solid var(--cd-bd);
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(26,95,168,.1), 0 1px 3px rgba(0,0,0,.04);
}

/* ── Header ── */
.cd-hdr {
  padding: 28px 28px 8px;
  animation: cd-slideIn .28s ease both;
}
.cd-titulo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cd-tx);
  margin: 0 0 6px;
  line-height: 1.3;
}
.cd-desc {
  font-size: .86rem;
  color: var(--cd-gr);
  line-height: 1.6;
  margin: 0;
}

/* ── Card ── */
.cd-card {
  margin: 16px 20px;
  background: var(--cd-bg);
  border: 1px solid var(--cd-bd);
  border-radius: var(--cd-radio);
  padding: 16px;
  animation: cd-slideIn .28s ease both;
}

/* ── Opciones ── */
.cd-opts { display: flex; flex-direction: column; gap: 8px; }

.cd-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--cd-wh);
  border: 1.5px solid var(--cd-bd);
  border-radius: 10px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  color: var(--cd-tx);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--cd-t), background var(--cd-t), transform var(--cd-t), box-shadow var(--cd-t);
  position: relative;
  overflow: hidden;
}
.cd-opt::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cd-az);
  opacity: 0;
  transition: opacity var(--cd-t);
}
.cd-opt:hover {
  border-color: var(--cd-ac);
  background: var(--cd-azc);
  transform: translateX(3px);
}
.cd-opt:hover::before { opacity: 1; }
.cd-opt.cd-sel {
  border-color: var(--cd-az);
  background: var(--cd-azc);
  box-shadow: 0 0 0 3px rgba(45,140,240,.14);
  transform: translateX(3px);
}
.cd-opt.cd-sel::before { opacity: 1; }

/* Radio circle */
.cd-opt-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--cd-bd);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--cd-t);
  background: var(--cd-wh);
}
.cd-opt.cd-sel .cd-opt-check {
  background: var(--cd-az);
  border-color: var(--cd-az);
}
.cd-opt.cd-sel .cd-opt-check::after {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* ── Nota ── */
.cd-nota {
  font-size: .73rem;
  color: #854f0b;
  margin: 12px 0 0;
  padding: 9px 12px;
  background: #faeeda;
  border-left: 3px solid var(--cd-wn);
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
}

/* ── Fila de navegación ── */
.cd-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20px 16px;
  gap: 10px;
}
.cd-btn-back {
  background: transparent;
  border: 0.5px solid var(--cd-bd);
  border-radius: 8px;
  font-family: inherit;
  font-size: .83rem;
  color: var(--cd-gr);
  cursor: pointer;
  padding: 7px 14px;
  transition: all var(--cd-t);
  display: flex;
  align-items: center;
  gap: 5px;
}
.cd-btn-back svg { width: 14px; height: 14px; }
.cd-btn-back:hover { color: var(--cd-tx); border-color: var(--cd-ac); background: var(--cd-bg); }

.cd-btn-next {
  background: var(--cd-az);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  padding: 7px 18px;
  transition: all var(--cd-t);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(8px);
}
.cd-btn-next.cd-show { opacity: 1; pointer-events: auto; transform: translateX(0); }
.cd-btn-next svg { width: 14px; height: 14px; transition: transform var(--cd-t); }
.cd-btn-next:hover svg { transform: translateX(3px); }

/* ── Barra de progreso por etapas ── */
.cd-progress-strip {
  padding: 14px 20px 20px;
  display: flex;
  align-items: center;
  border-top: 0.5px solid var(--cd-bd);
  background: var(--cd-bg);
}
.cd-ps-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
}
.cd-ps-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 11px;
  left: calc(50% + 11px);
  right: calc(-50% + 11px);
  height: 2px;
  background: var(--cd-bd);
  z-index: 0;
  transition: background .4s ease;
}
.cd-ps-step.cd-done:not(:last-child)::after { background: var(--cd-az); }

.cd-ps-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--cd-bd);
  background: var(--cd-wh);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: var(--cd-gr);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  z-index: 1;
}
.cd-ps-step.cd-done .cd-ps-dot {
  background: var(--cd-az);
  border-color: var(--cd-az);
  color: #fff;
}
.cd-ps-step.cd-active .cd-ps-dot {
  background: var(--cd-wh);
  border-color: var(--cd-az);
  color: var(--cd-az);
  box-shadow: 0 0 0 4px rgba(45,140,240,.18);
  transform: scale(1.2);
}
.cd-ps-step.cd-done .cd-ps-dot::after {
  content: '';
  display: block;
  width: 6px; height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.cd-ps-label {
  font-size: .62rem;
  color: var(--cd-gr);
  text-align: center;
  line-height: 1.2;
  transition: color var(--cd-t);
  white-space: nowrap;
}
.cd-ps-step.cd-active .cd-ps-label { color: var(--cd-az); font-weight: 600; }
.cd-ps-step.cd-done  .cd-ps-label { color: var(--cd-ok); }

/* ── Stepper numérico ── */
.cd-num-wrap { text-align: center; padding: 6px 0; }
.cd-num-lbl { font-size: .86rem; color: var(--cd-gr); font-weight: 500; margin-bottom: 14px; }
.cd-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--cd-wh);
  border: 1.5px solid var(--cd-bd);
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 18px;
}
.cd-st-btn {
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  color: var(--cd-az);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--cd-t);
}
.cd-st-btn:hover { background: var(--cd-azc); }
.cd-st-val {
  width: 56px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cd-tx);
  border-left: 1px solid var(--cd-bd);
  border-right: 1px solid var(--cd-bd);
  line-height: 44px;
}

/* ── Botón full-width ── */
.cd-btn-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 22px;
  background: var(--cd-az);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--cd-t);
  margin-top: 8px;
}
.cd-btn-full:hover { background: var(--cd-az-osc); transform: translateY(-1px); }
.cd-btn-full:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Formulario de contacto ── */
.cd-campo { margin-bottom: 14px; }
.cd-lbl {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--cd-tx);
  margin-bottom: 5px;
}
.cd-req  { color: var(--cd-er); }
.cd-opc  { color: var(--cd-gr); font-weight: 400; font-size: .74rem; }

.cd-inp {
  width: 100%;
  padding: 10px 13px;
  font-family: inherit;
  font-size: .88rem;
  color: var(--cd-tx);
  background: var(--cd-wh);
  border: 1.5px solid var(--cd-bd);
  border-radius: 10px;
  outline: none;
  transition: border-color var(--cd-t), box-shadow var(--cd-t);
  box-sizing: border-box;
  appearance: none;
}
.cd-inp:focus { border-color: var(--cd-ac); box-shadow: 0 0 0 3px rgba(45,140,240,.13); }
.cd-inp::placeholder { color: #a0aec0; }
textarea.cd-inp { resize: vertical; min-height: 80px; line-height: 1.5; padding-top: 10px; }

.cd-inp-ico { position: relative; }
.cd-inp-ico svg {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--cd-gr);
  pointer-events: none;
}
.cd-inp-ico .cd-inp { padding-left: 34px; }

.cd-chars { text-align: right; font-size: .71rem; color: var(--cd-gr); margin-top: 3px; }
.cd-err   { font-size: .72rem; color: var(--cd-er); display: block; margin-top: 4px; min-height: 14px; }

.cd-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
}
.cd-divider span { font-size: .74rem; color: var(--cd-gr); white-space: nowrap; }
.cd-divider::before,
.cd-divider::after { content: ''; flex: 1; height: 0.5px; background: var(--cd-bd); }

/* Canal de contacto */
.cd-canal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.cd-canal-lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--cd-wh);
  border: 1.5px solid var(--cd-bd);
  border-radius: 10px;
  font-size: .85rem;
  color: var(--cd-tx);
  cursor: pointer;
  transition: all var(--cd-t);
}
.cd-canal-lbl:hover { border-color: var(--cd-ac); background: var(--cd-azc); }
.cd-canal-lbl.cd-checked { border-color: var(--cd-az); background: var(--cd-azc); color: var(--cd-az); }
.cd-canal-lbl input { display: none; }
.cd-canal-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Éxito ── */
.cd-exito { padding: 48px 28px; text-align: center; }
.cd-ex-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  background: #e1f5ee;
  border-radius: 50%;
  margin-bottom: 18px;
  animation: cd-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.cd-ex-ico svg { width: 34px; height: 34px; color: var(--cd-ok); }
.cd-exito h3  { font-size: 1.35rem; font-weight: 700; color: var(--cd-tx); margin: 0 0 8px; }
.cd-exito p   { color: var(--cd-gr); font-size: .88rem; margin: 0 0 24px; line-height: 1.6; }
.cd-btn-nuevo {
  background: transparent;
  border: 1px solid var(--cd-bd);
  border-radius: 10px;
  padding: 9px 22px;
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  color: var(--cd-gr);
  cursor: pointer;
  transition: all var(--cd-t);
}
.cd-btn-nuevo:hover { border-color: var(--cd-ac); color: var(--cd-az); }

/* ── Animaciones ── */
@keyframes cd-slideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cd-pop {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .cd-hdr  { padding: 22px 18px 6px; }
  .cd-card { margin: 12px 14px; padding: 14px; }
  .cd-nav  { margin: 0 14px 14px; }
  .cd-progress-strip { padding: 12px 14px 16px; }
  .cd-titulo { font-size: 1.08rem; }
  .cd-exito  { padding: 36px 20px; }
  .cd-canal-row { grid-template-columns: 1fr; }
}