/* =========================================================
   CENTRO DE JUBILACIÓN — extiende el sistema de diseño de ernestoflores.com.pe
   TEMA CLARO — evolución directa del bloque "Centro de Planificación de
   Jubilación" (jubcentro) del sitio principal: mismo fondo crema, mismas
   tarjetas de vidrio claras, mismo dorado oscuro en textos, mismo dorado
   brillante en botones/rellenos, mismas sombras cálidas.
   Espaciado compacto: objetivo, que la mayor parte del contenido de
   cada paso quepa en una laptop 1366x768 sin scroll excesivo.
========================================================= */

/* Fondo único crema para toda la app — continuación directa del bloque
   "Centro de Planificación de Jubilación" del sitio principal. El header
   (.nav) se mantiene navy oscuro, igual que en TODO el sitio (incluido
   el principal), así que esto no rompe nada — es el mismo patrón. */
body{background:#F4EDDC !important;}

/* ---- Reasignación de los tokens de texto/borde a su equivalente en
   tema claro. Estas tres variables (--ink, --ink-dim, --ink-faint) y
   --glass-border se usan en esta página EXCLUSIVAMENTE como texto o
   borde (nunca como fondo), así que redefinirlas aquí propaga el tema
   claro a casi todos los componentes de golpe, sin tocarlos uno por uno. ---- */
:root{
  --ink: #001B28;
  --ink-dim: #5A5140;
  --ink-faint: #8C8272;
  --glass-border: rgba(0,27,40,0.1);
}

.nav__brandsub{color:#B8860B;}
.nav__brandtag{
  color:var(--ink-faint); font-size:0.62rem; font-weight:500; letter-spacing:0.02em;
  margin-top:1px;
}
.cj-nav-back{
  display:flex; align-items:center; gap:6px;
  font-size:0.85rem; color:var(--ink-dim); font-weight:600;
}
.cj-nav-back svg{width:16px;height:16px;}

/* =========================================================
   LANDING
========================================================= */
.cj-landing{
  display:none;
  padding:44px 24px 32px; max-width:640px; margin:0 auto; text-align:center;
}
.cj-landing.is-active{display:block;}
.cj-landing__eyebrow{
  font-family:var(--mono); font-size:0.8rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:#B8860B; margin-bottom:10px;
}
.cj-landing__title{font-size:clamp(2rem,4.6vw,3rem); margin-bottom:14px; color:var(--ink);}
.cj-landing__lead{font-size:1.02rem; margin-bottom:22px; color:var(--ink-dim);}
.cj-landing__trust{
  display:flex; flex-direction:column; gap:8px; margin-top:18px; text-align:left;
}
.cj-trust-item{
  display:flex; align-items:center; gap:10px; font-size:0.86rem; color:var(--ink-dim);
}
.cj-trust-item svg{width:20px;height:20px;flex-shrink:0;color:#B8860B;}

/* =========================================================
   WIZARD
========================================================= */
.cj-wizard{display:none; max-width:640px; margin:0 auto; padding:26px 24px 50px;}
.cj-wizard.is-active{display:block;}

.cj-wizard__progress{
  height:4px; border-radius:4px; background:var(--glass-border); overflow:hidden; margin-bottom:8px;
}
.cj-wizard__progress-bar{
  height:100%; width:33.33%; background:linear-gradient(90deg, #B8860B, #D9A93B);
  transition:width .4s ease;
}
.cj-wizard__steps-label{
  font-family:var(--mono); font-size:0.75rem; color:var(--ink-faint); margin-bottom:18px;
  letter-spacing:0.04em; text-transform:uppercase;
}
.cj-wizard__steps-label span{color:#B8860B;}

.cj-step{display:none;}
.cj-step.is-active{display:block; animation:cjFadeIn .35s ease;}
@keyframes cjFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.cj-step__eyebrow{
  font-family:var(--mono); font-size:0.75rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:#B8860B; margin-bottom:5px;
}
.cj-step__title{font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:5px; color:var(--ink);}
.cj-step__sub{margin-bottom:16px; font-size:0.92rem; color:var(--ink-dim);}
.cj-step__mini-heading{
  font-size:0.78rem; font-weight:700; color:var(--ink); text-transform:uppercase;
  letter-spacing:0.04em; margin-bottom:12px; padding-top:14px; border-top:1px dashed var(--glass-border);
}

/* ---- Resumen del Paso 1 — recuperado del sitio principal, no se
   vuelve a calcular. Mismo lenguaje de tarjeta que el resto del sistema. ---- */
.cj-resumen-p1{
  background:rgba(255,255,255,0.5); border:1px solid rgba(184,134,11,0.25);
  border-radius:14px; padding:16px 18px; margin-bottom:22px;
}
.cj-resumen-p1__label{
  font-family:var(--mono); font-size:0.7rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:#B8860B; margin-bottom:10px;
}
.cj-resumen-p1__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.cj-resumen-p1__item{display:flex; flex-direction:column; gap:3px;}
.cj-resumen-p1__k{font-size:0.72rem; color:var(--ink-dim); line-height:1.3;}
.cj-resumen-p1__v{font-family:var(--mono); font-weight:700; font-size:1rem; color:var(--ink);}
.cj-resumen-p1__empty{font-size:0.85rem; color:var(--ink-dim); line-height:1.5; margin:0;}
.cj-resumen-p1__empty a{color:#B8860B; font-weight:700; border-bottom:1px solid rgba(184,134,11,0.35);}

@media (max-width:640px){
  .cj-resumen-p1__grid{grid-template-columns:1fr;}
}
.cj-step__note{
  font-size:0.8rem; color:var(--ink-dim); margin-top:10px; line-height:1.5;
  padding:9px 12px; background:rgba(255,255,255,0.5); border-radius:10px;
  border-left:3px solid #B8860B;
}
.cj-step__error{color:#C0392B; font-size:0.83rem; margin-top:8px; min-height:1.2em;}

.cj-field-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;}
.cj-field-grid .cj-field--full{grid-column:1 / -1;}
.cj-field{display:flex; flex-direction:column; gap:4px; margin-bottom:10px;}
.cj-field__label{font-size:0.82rem; font-weight:600; color:var(--ink);}
.cj-field__hint{font-size:0.74rem; color:var(--ink-faint); line-height:1.4; margin-top:-1px;}
.cj-field__row{display:flex; justify-content:space-between; align-items:baseline;}
.cj-field__val{color:#B8860B; font-weight:700;}

.cj-field input[type=text], .cj-field input[type=email], .cj-field input[type=tel],
.cj-field input[type=number], .cj-field input[type=date], .cj-field select, .cj-field textarea{
  background:rgba(255,255,255,0.5); border:1px solid var(--glass-border); border-radius:10px;
  padding:9px 12px; color:var(--ink); font-size:0.9rem; font-family:var(--sans);
  transition:background-color .28s ease, color .28s ease, border-color .2s ease;
}
/* Progreso visual: un campo ya completado pasa a blanco sólido, con transición suave */
.cj-field input.is-filled, .cj-field textarea.is-filled{
  background:#FFFFFF; color:#001B28; border-color:rgba(184,134,11,0.4);
}
/* El <select> se maneja aparte y en una sola regla autocontenida: usar la
   propiedad abreviada "background" aquí reseteaba background-repeat a su
   valor por defecto ('repeat'), lo que tileaba el ícono de la flecha por
   toda la casilla en vez de dejarlo fijo a la derecha. */
.cj-field select.is-filled{
  background-color:#FFFFFF; color:#001B28; border-color:rgba(184,134,11,0.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23001B28' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.cj-money-input{font-family:var(--mono); font-weight:700; letter-spacing:0.02em;}
.cj-field input:focus, .cj-field select:focus{border-color:#B8860B; outline:none;}
.cj-field select{appearance:none; -webkit-appearance:none; font-weight:700;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A5140' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.cj-field select option{color:#001B28; background:#fff; font-weight:700; padding:8px;}

.cj-toggle{
  display:flex; align-items:center; gap:8px; margin-bottom:12px; cursor:pointer;
  font-size:0.88rem; color:var(--ink-dim);
}
.cj-toggle input{width:18px;height:18px;accent-color:#B8860B;flex-shrink:0;}

.cj-plazo-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px;
}
.cj-plazo-opt{
  padding:10px 6px; text-align:center; border-radius:10px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.5); cursor:pointer; transition:all .2s ease;
}
.cj-plazo-opt span{display:block;}
.cj-plazo-opt__num{font-family:var(--mono); font-weight:700; font-size:1.05rem; color:var(--ink);}
.cj-plazo-opt__label{font-size:0.65rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; margin-top:1px;}
.cj-plazo-opt.is-selected{border-color:#B8860B; background:rgba(184,134,11,0.1);}
.cj-plazo-opt.is-selected .cj-plazo-opt__num{color:#B8860B;}

.cj-step__actions{display:flex; gap:12px; margin-top:20px;}
.cj-step__actions .btn{flex:1;}
.cj-download-btn{margin-top:14px; display:flex; align-items:center; justify-content:center;}

/* =========================================================
   RUTA ESPECIAL +50
========================================================= */
.cj-special{display:none; padding:44px 24px; max-width:560px; margin:0 auto;}
.cj-special.is-active{display:block;}
.cj-special__card{text-align:center;}
.cj-special__icon{
  display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
  border-radius:50%; background:rgba(184,134,11,0.12); color:#B8860B; margin-bottom:14px;
}
.cj-special__icon svg{width:28px;height:28px;}
.cj-special__eyebrow{
  font-family:var(--mono); font-size:0.75rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:#B8860B; margin-bottom:8px;
}
.cj-special__title{font-size:clamp(1.6rem,3.4vw,2.1rem); margin-bottom:10px; color:var(--ink);}
.cj-special__lead{margin-bottom:20px; font-size:0.95rem; color:var(--ink-dim);}
.cj-special__actions{display:flex; flex-direction:column; gap:10px;}

/* =========================================================
   RESULTADOS — BOLSÓN
========================================================= */
.cj-results{display:none; padding:36px 24px 50px; max-width:720px; margin:0 auto;}
.cj-results.is-active{display:block;}
.cj-results__eyebrow{
  font-family:var(--mono); font-size:0.75rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:#B8860B; margin-bottom:5px; text-align:center;
}
.cj-results__title{font-size:clamp(1.6rem,3.4vw,2.2rem); margin-bottom:5px; text-align:center; color:var(--ink);}
.cj-results__sub{margin-bottom:18px; text-align:center; color:var(--ink-dim);}

.cj-bolson-total{
  background:linear-gradient(135deg, rgba(184,134,11,0.12), rgba(255,255,255,0.55));
  border:1px solid rgba(184,134,11,0.3); border-radius:18px; padding:18px 20px; margin-bottom:16px;
  text-align:center;
  box-shadow:0 16px 34px rgba(184,134,11,0.08), 0 6px 14px rgba(0,27,40,0.05);
}
.cj-bolson-total__label{
  font-size:0.82rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em;
  display:block; margin-bottom:10px;
}
.cj-bolson-total__grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.cj-bolson-total__item{display:flex; flex-direction:column; gap:4px;}
.cj-bolson-total__amount{font-size:clamp(1.2rem,3.6vw,1.6rem); font-weight:700; color:var(--ink);}
.cj-bolson-total__item:first-child .cj-bolson-total__amount{color:#2E7D9A;}
.cj-bolson-total__item:last-child .cj-bolson-total__amount{color:#B8860B;}
.cj-bolson-total__tag{font-size:0.76rem; color:var(--ink-faint);}

.cj-timeline{
  display:flex; flex-direction:column; gap:0; margin-bottom:16px;
  border-left:2px solid var(--glass-border); padding-left:18px; margin-left:8px;
}
.cj-timeline__point{position:relative; padding-bottom:12px;}
.cj-timeline__point:last-child{padding-bottom:0;}
.cj-timeline__point::before{
  content:''; position:absolute; left:-25px; top:2px; width:10px; height:10px; border-radius:50%;
  background:#B8860B; border:2px solid #F4EDDC;
}
.cj-timeline__age{font-family:var(--mono); font-size:0.78rem; color:#B8860B; font-weight:700;}
.cj-timeline__desc{font-size:0.82rem; color:var(--ink-dim); margin-top:1px;}

.cj-results__adjust{
  border-radius:18px; padding:16px 18px; margin-bottom:16px;
  background:rgba(255,255,255,0.4); border:1px solid var(--glass-border);
}
.cj-results__adjust-title{font-size:0.92rem; font-weight:600; color:var(--ink); margin-bottom:10px;}
.cj-results__disclaimer{font-size:0.76rem; color:var(--ink-faint); text-align:center; margin-bottom:14px; line-height:1.5;}

/* =========================================================
   CONTRATAR / BIFURCACIÓN
========================================================= */
.cj-contratar{display:none; padding:36px 24px 50px; max-width:640px; margin:0 auto;}
.cj-contratar.is-active{display:block;}
.cj-contratar__eyebrow{
  font-family:var(--mono); font-size:0.75rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:#B8860B; margin-bottom:5px; text-align:center;
}
.cj-contratar__title{font-size:clamp(1.6rem,3.4vw,2.1rem); margin-bottom:18px; text-align:center; color:var(--ink);}
/* Una vez elegida la ruta, el encabezado genérico "Último paso / ¿Cómo prefieres continuar?"
   ya no debe repetirse en cada pantalla del cuestionario. */
.cj-contratar.is-step-active .cj-contratar__eyebrow,
.cj-contratar.is-step-active .cj-contratar__title{display:none;}

.cj-contratar__options{display:flex; flex-direction:column; gap:10px; margin-bottom:8px;}
.cj-contratar__option{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  padding:16px 18px; border-radius:14px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.5); cursor:pointer; transition:all .2s ease;
}
.cj-contratar__option:hover, .cj-contratar__option.is-selected{border-color:#B8860B; background:rgba(184,134,11,0.1);}
.cj-contratar__option-icon{color:#B8860B;}
.cj-contratar__option-icon svg{width:24px;height:24px;}
.cj-contratar__option-title{font-weight:700; font-size:0.98rem; color:var(--ink);}
.cj-contratar__option-sub{font-size:0.82rem; color:var(--ink-dim);}

.cj-docs, .cj-asesor, .cj-confirmacion{display:none; margin-top:18px;}
.cj-docs.is-active, .cj-asesor.is-active, .cj-confirmacion.is-active{display:block; animation:cjFadeIn .35s ease;}

.cj-kyc{display:none; margin-top:18px;}
.cj-kyc.is-active{display:block;}
.cj-kyc-step{display:none;}
.cj-kyc-step.is-active{display:block; animation:cjFadeIn .35s ease;}
.cj-kyc-step__title{font-size:1.15rem; margin-bottom:4px; color:var(--ink);}
.cj-kyc-step__sub{font-size:0.85rem; color:var(--ink-dim); margin-bottom:12px;}
.cj-kyc-checklist{display:grid; grid-template-columns:1fr 1fr; gap:3px 14px; margin-bottom:10px;}
.cj-kyc-checklist .cj-toggle{margin-bottom:0;}
.cj-docs__title, .cj-asesor__title{font-size:1.15rem; margin-bottom:6px; color:var(--ink);}
.cj-docs__note, .cj-asesor__note{margin-bottom:14px; font-size:0.87rem; color:var(--ink-dim);}

/* ---- Beneficiarios: bloques repetibles ---- */
.cj-benef-count{display:flex; gap:8px; margin-bottom:16px;}
.cj-benef-count button{
  flex:1; padding:9px 6px; border-radius:10px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.5); color:var(--ink); font-weight:700; cursor:pointer; transition:all .2s ease;
}
.cj-benef-count button.is-selected{border-color:#B8860B; background:rgba(184,134,11,0.1); color:#B8860B;}
.cj-benef-block{
  border:1px solid var(--glass-border); border-radius:14px; padding:14px 16px; margin-bottom:14px;
  background:rgba(255,255,255,0.35);
}
.cj-benef-block__title{font-size:0.85rem; font-weight:700; color:#B8860B; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.04em;}

.cj-upload{
  position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:8px;
  border:1.5px dashed var(--glass-border); border-radius:12px; cursor:pointer;
  transition:border-color .25s ease, background .25s ease;
}
.cj-upload.is-done{border-style:solid; border-color:#4C9A4C; background:rgba(76,154,76,0.08);}
.cj-upload input{display:none;}
.cj-upload__icon{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.6); color:var(--ink-faint); transition:all .25s ease;
}
.cj-upload__icon svg{width:16px;height:16px;}
.cj-upload.is-done .cj-upload__icon{background:#4C9A4C; color:#fff;}
.cj-upload__body{flex:1; min-width:0;}
.cj-upload__label{font-weight:600; font-size:0.88rem; color:var(--ink); display:block;}
.cj-upload__hint{font-size:0.78rem; color:var(--ink-faint); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cj-upload.is-done .cj-upload__hint{color:#4C9A4C;}
.cj-upload__bar{
  position:absolute; left:14px; right:14px; bottom:5px; height:3px; border-radius:3px;
  background:rgba(0,27,40,0.1); overflow:hidden; display:none;
}
.cj-upload.is-uploading .cj-upload__bar{display:block;}
.cj-upload__bar-fill{height:100%; width:0%; background:#B8860B; border-radius:3px; transition:width .15s linear;}
.cj-upload.is-done .cj-upload__bar-fill{background:#4C9A4C; width:100%;}

.cj-confirmacion{text-align:center; max-width:520px; margin:0 auto;}
.cj-confirmacion__icon{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:50%; background:rgba(76,154,76,0.12); color:#3F7D3F; margin-bottom:12px;
}
.cj-confirmacion__icon svg{width:26px;height:26px;}
#cj-confirmacion-title{font-size:1.3rem; margin-bottom:6px; color:var(--ink);}
#cj-confirmacion-text{font-size:0.92rem; color:var(--ink-dim); margin-bottom:24px;}

.cj-confirmacion__next{text-align:left; margin-bottom:18px;}
.cj-confirmacion__next-title{
  font-family:var(--mono); font-size:0.75rem; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:#B8860B; margin-bottom:10px;
}
.cj-confirmacion__checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.cj-confirmacion__checklist li{
  display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; color:var(--ink-dim); line-height:1.4;
}
.cj-confirmacion__checklist svg{
  width:16px; height:16px; flex-shrink:0; margin-top:2px; color:#3F7D3F;
}

.cj-confirmacion__importante{
  text-align:left; background:rgba(184,134,11,0.08); border:1px solid rgba(184,134,11,0.25);
  border-radius:12px; padding:14px 16px; margin-bottom:22px;
}
.cj-confirmacion__importante-title{
  font-size:0.78rem; font-weight:700; color:#B8860B; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px;
}
.cj-confirmacion__importante p:last-child{font-size:0.86rem; color:var(--ink-dim); line-height:1.5; margin:0;}

.cj-confirmacion__actions{display:flex; flex-direction:column; gap:10px;}
.cj-confirmacion__actions .btn{display:flex; align-items:center; justify-content:center; gap:9px;}
.cj-confirmacion__actions svg{width:18px; height:18px; flex-shrink:0;}

/* =========================================================
   ASISTENTE — BANCO DE PREGUNTAS FIJAS
   (se mantiene en navy oscuro a propósito, igual que el header:
   es un elemento flotante superpuesto, no una tarjeta de contenido)
========================================================= */
.cj-chat-fab{
  position:fixed; right:20px; bottom:96px; z-index:120; width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, #FFBD00, #FFE08A); color:#001B28;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
  box-shadow:0 8px 24px rgba(184,134,11,0.35);
}
.cj-chat-fab svg{width:24px;height:24px;}
.cj-chat-fab.cj-fab-pulse{animation:cjFabPulse 1.6s ease-in-out;}
@keyframes cjFabPulse{
  0%, 100%{transform:scale(1);}
  30%{transform:scale(1.12);}
  50%{transform:scale(0.97);}
  70%{transform:scale(1.05);}
}

.cj-chat-reminder{
  display:none; position:fixed; right:20px; bottom:154px; z-index:119; max-width:230px;
  background:#001B28; border:1px solid rgba(255,255,255,0.1); border-radius:14px 14px 4px 14px;
  padding:11px 14px; font-size:0.82rem; color:#EAF1F5; box-shadow:0 10px 30px rgba(0,27,40,0.3);
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;
}
.cj-chat-reminder.is-visible{display:block; opacity:1; transform:translateY(0);}

.cj-chat-panel{
  display:none; position:fixed; right:16px; bottom:158px; left:16px; max-width:360px; margin-left:auto;
  z-index:121; background:#001B28; border:1px solid rgba(255,255,255,0.1); border-radius:18px;
  box-shadow:0 20px 50px rgba(0,27,40,0.4); overflow:hidden; max-height:70vh;
}
.cj-chat-panel.is-open{display:flex; flex-direction:column;}
.cj-chat-panel__header{
  display:flex; justify-content:space-between; align-items:center; padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,0.1); font-weight:700; font-size:0.95rem; color:#EAF1F5;
}
.cj-chat-panel__header button{background:none; border:none; color:#9FBAC7; font-size:1.4rem; cursor:pointer;}
.cj-chat-panel__list{overflow-y:auto; padding:8px 10px; flex:1;}
.cj-chat-panel__q{
  display:block; width:100%; text-align:left; padding:12px 10px; background:none; border:none;
  color:#9FBAC7; font-size:0.85rem; border-radius:10px; cursor:pointer;
}
.cj-chat-panel__q:hover{background:rgba(255,255,255,0.06); color:#EAF1F5;}
.cj-chat-panel__answer{display:none; padding:14px 16px; font-size:0.85rem; color:#9FBAC7; border-top:1px solid rgba(255,255,255,0.1);}
.cj-chat-panel__answer.is-active{display:block;}
.cj-chat-panel__whatsapp{
  display:flex; align-items:center; gap:8px; padding:14px 16px; font-size:0.8rem; color:#FFBD00;
  border-top:1px solid rgba(255,255,255,0.1);
}

@media (max-width:640px){
  .cj-landing{padding:36px 20px 26px;}
  .cj-wizard{padding:20px 20px 60px;}
  .cj-field-grid{grid-template-columns:1fr;}
  .cj-plazo-grid{grid-template-columns:repeat(3,1fr); gap:6px;}
  .cj-step__actions{flex-direction:column-reverse;}
  .cj-bolson-total__grid{grid-template-columns:1fr;}
  .cj-contratar{padding:28px 20px 60px;}
  .cj-chat-fab{bottom:88px;}
  .cj-chat-panel{bottom:150px;}
  .cj-chat-reminder{bottom:146px;}
}

/* =========================================================
   PROGRESO DEL ECOSISTEMA — mismo lenguaje visual que el
   stepper de "Centro de Planificación de Jubilación" del
   sitio principal (línea dorada, kicker mono, check dorado).
   Comunica que el Paso 1 ya se completó allá, y en qué punto
   del recorrido de 4 pasos está el usuario aquí. Vive sobre el
   mismo fondo crema del body — es la continuación visual directa
   del header oscuro hacia el contenido claro.
========================================================= */
.cj-eco{
  background:#F4EDDC;
  border-bottom:1px solid rgba(0,27,40,0.1);
  padding:14px 24px;
}
.cj-eco__top{
  max-width:var(--container); margin:0 auto 10px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.cj-eco__done{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:0.7rem; font-weight:600; letter-spacing:0.04em;
  color:#B8860B; text-transform:uppercase;
}
.cj-eco__done svg{
  width:13px !important; height:13px !important; flex-shrink:0; display:block;
  background:#B8860B; color:#001B28; border-radius:50%; padding:2px; box-sizing:content-box;
}
.cj-eco__label{
  font-family:var(--mono); font-size:0.72rem; font-weight:600; letter-spacing:0.04em;
  color:var(--ink-dim); text-transform:uppercase;
}
.cj-eco__track{
  max-width:var(--container); margin:0 auto;
  height:3px; border-radius:3px; background:rgba(0,27,40,0.1); overflow:hidden;
}
.cj-eco__fill{
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, #B8860B, #D9A93B);
  width:50%;
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}

@media (max-width:640px){
  .cj-eco{padding:12px 20px;}
  .cj-eco__top{margin-bottom:8px;}
  .cj-eco__done span, .cj-eco__done{font-size:0.64rem;}
  .cj-eco__label{font-size:0.64rem;}
}