/* =========================================================
   CrediSense · Crédito AMPF para Empleados Públicos
   Paleta institucional: teal/navy como protagonistas (mutual,
   confianza), ámbar reservado como acento puntual (progreso,
   checks), no como color dominante de botones/badges.
   ========================================================= */

:root {
  --cs-navy: #0a3743;
  --cs-teal-dark: #0e6e7f;
  --cs-teal: #159aae;
  --cs-cyan: #22b8ce;
  --cs-mint: #79e8d6;
  --cs-amber: #f2a93b;
  --cs-amber-dark: #d68c1f;
  --cs-bg: #f5fafb;
  --cs-bg-alt: #eef7f8;
  --cs-ink: #132a30;
  --cs-ink-soft: #4c6a72;
  --cs-border: #dcebee;
  --cs-white: #ffffff;

  --cs-radius: 14px;
  --cs-radius-sm: 8px;
  --cs-shadow: 0 10px 30px -12px rgba(10, 55, 67, 0.25);
  --cs-shadow-sm: 0 4px 14px -6px rgba(10, 55, 67, 0.18);

  --cs-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --cs-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
  background: var(--cs-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display-font {
  font-family: var(--cs-font-display);
  font-weight: 600;
  color: var(--cs-navy);
  letter-spacing: -0.01em;
}

a { color: var(--cs-teal-dark); }

.text-teal { color: var(--cs-teal-dark) !important; }
.bg-cs-bg-alt { background: var(--cs-bg-alt); }

/* Skip link (accesibilidad) */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--cs-navy);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 2000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* Focus visible consistente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.form-control:focus,
.form-select:focus {
  outline: 3px solid var(--cs-amber);
  outline-offset: 2px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--cs-teal);
  box-shadow: 0 0 0 .2rem rgba(21, 154, 174, .18);
}

/* ============ NAVBAR ============ */
.cs-navbar {
  background: var(--cs-white);
  border-bottom: 1px solid var(--cs-border);
  padding: .65rem 0;
}
.cs-navbar .navbar-brand img { height: 46px; }
.cs-navbar .nav-link {
  color: var(--cs-navy);
  font-weight: 500;
  font-size: .95rem;
}
.cs-navbar .nav-link:hover { color: var(--cs-teal-dark); }
.btn-cta-nav {
  background: var(--cs-amber);
  color: var(--cs-navy);
  font-weight: 700;
  border: none;
  text-decoration: none;
}
.btn-cta-nav:hover { background: var(--cs-amber-dark); color: #fff; }

/* ============ HERO ============ */
/* Contraste marcado tipo "landing de crédito": fondo claro, texto muy
   oscuro y grande a la izquierda, form card oscuro a la derecha. El H1
   pasa a Inter bold mayúscula (voz propia del hero, distinta del resto
   de la página que usa Fraunces) porque es el momento de mayor impacto
   visual — el resto de las secciones se mantiene con el sistema editorial. */
.cs-hero {
  position: relative;
  background: var(--cs-bg);
  color: var(--cs-ink);
  overflow: hidden;
  padding: 3rem 0 3.6rem;
}
/* Panel diagonal (puro CSS, sin imagen) detrás de la mitad derecha del
   hero, mismo recurso que usa la referencia: dos tonos de fondo muy
   sutiles separados por un corte oblicuo. */
.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cs-bg-alt);
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 40% 100%);
  pointer-events: none;
}
.cs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(21,154,174,.10) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(242,169,59,.08) 0%, transparent 40%);
  pointer-events: none;
}
.cs-hero .container { position: relative; z-index: 1; }

.cs-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border);
  color: var(--cs-navy);
  padding: .4rem .9rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.cs-badge-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cs-teal);
  box-shadow: 0 0 0 3px rgba(21,154,174,.18);
}

.cs-hero-headline h1 {
  font-family: var(--cs-font-body);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--cs-ink);
  font-size: clamp(1.9rem, 3.4vw, 2.35rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 1rem 0 .6rem;
}
.cs-hero-headline h2 {
  font-family: var(--cs-font-body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--cs-navy) !important;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.cs-hero-headline h2 strong {
  color: var(--cs-amber-dark) !important;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: var(--cs-amber);
  text-decoration-thickness: 4px;
  text-underline-offset: 4px;
}
.cs-hero .lead {
  color: var(--cs-ink-soft);
  font-size: 1.1rem;
  font-weight: 500;
  max-width: 520px;
}
.cs-hero-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
}
.cs-hero-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .65rem;
  font-size: .96rem;
  color: var(--cs-ink);
}
.cs-hero-list li svg {
  flex: none;
  margin-top: .18rem;
  color: var(--cs-teal-dark);
}

/* Ilustración hero (SVG propio, sin fotos externas) */
.cs-hero-art { width: 100%; max-width: 440px; margin: 0 auto; display: block; }

/* ============ BOX DE CRITERIOS RÁPIDOS (HERO) ============ */
.cs-eligibility-box {
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 1.1rem 1.2rem;
  margin-top: 1.5rem;
  box-shadow: var(--cs-shadow-sm);
  text-align: left;
}
.cs-eligibility-box-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--cs-font-display);
  font-weight: 600;
  color: var(--cs-teal-dark);
  font-size: .95rem;
  margin-bottom: .8rem;
}
.cs-eligibility-box-title svg { margin-right: .1rem; flex: none; }
.cs-eligibility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
}
@media (min-width: 576px) {
  .cs-eligibility-grid { grid-template-columns: 1fr 1fr; }
}
.cs-eligibility-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  padding: .65rem .75rem;
}
.cs-eligibility-item svg { flex: none; margin-top: .1rem; color: var(--cs-teal-dark); }
.cs-eligibility-item strong { display: block; font-size: .88rem; font-weight: 800; color: var(--cs-navy); }
.cs-eligibility-item span { font-size: .8rem; color: var(--cs-ink-soft); line-height: 1.35; }
.cs-eligibility-item--amber { background: rgba(242,169,59,.12); border-color: rgba(242,169,59,.35); }
.cs-eligibility-item--amber svg { color: var(--cs-amber-dark); }

/* ============ SECCIÓN REQUISITOS ============ */
.cs-req-card {
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 1.7rem 1.5rem;
  height: 100%;
  box-shadow: var(--cs-shadow-sm);
}
.cs-req-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.cs-req-card-icon--teal { background: rgba(21,154,174,.12); color: var(--cs-teal-dark); }
.cs-req-card-icon--amber { background: rgba(242,169,59,.15); color: var(--cs-amber-dark); }
.cs-req-card-icon--white { background: rgba(255,255,255,.14); color: #fff; }
.cs-req-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .88rem;
  color: var(--cs-ink-soft);
}
.cs-req-list li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: .55rem;
  line-height: 1.4;
}
.cs-req-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .5rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cs-teal);
}
.cs-req-card--dark {
  background: linear-gradient(135deg, var(--cs-navy), var(--cs-teal-dark));
  border: none;
}
.cs-req-card--dark h3 { color: #fff; }
.cs-req-list--dark { color: rgba(255,255,255,.85); }
.cs-req-list--dark li::before { background: var(--cs-amber); }

/* ============ FORM CARD ============ */
/* Fondo oscuro (navy→teal-dark) para que contraste fuerte con el hero
   claro, igual que el patrón de referencia. Único form-card del sitio,
   así que se puede tematizar directo sin variantes. */
.cs-form-wrapper {
  margin-top: -2.6rem;
  position: relative;
  z-index: 2;
}
.cs-form-card {
  background: linear-gradient(160deg, var(--cs-navy) 0%, var(--cs-teal-dark) 130%);
  border-radius: var(--cs-radius);
  box-shadow: 0 20px 45px -18px rgba(10,55,67,.55);
  padding: 1.9rem;
  border-top: 4px solid var(--cs-amber);
}
.cs-form-card h2,
.cs-form-card .cs-wizard-step-title {
  font-family: var(--cs-font-display);
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: .15rem;
}
.cs-form-card .form-sub {
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  margin-bottom: 1.3rem;
}
.cs-form-card label {
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  margin-bottom: .35rem;
}
.cs-form-card .form-control,
.cs-form-card .form-select {
  background: rgba(255,255,255,.16);
  border-radius: var(--cs-radius-sm);
  border: 1px solid rgba(255,255,255,.42);
  padding: .68rem .85rem;
  font-size: .93rem;
  color: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cs-form-card .form-control:hover,
.cs-form-card .form-select:hover {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.2);
}
.cs-form-card .form-control:focus,
.cs-form-card .form-select:focus {
  background: rgba(255,255,255,.22);
  border-color: var(--cs-amber);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(242,169,59,.22);
}
.cs-form-card .form-control::placeholder { color: rgba(255,255,255,.68); }

/* ---- UX: campo COMPLETO se distingue claramente del vacío ----
   Inputs de texto: :not(:placeholder-shown) detecta que hay contenido
   tipeado. Selects: :valid detecta que se eligió una opción real (el
   placeholder es <option value="" disabled selected>, así que el select
   queda :invalid hasta que el usuario elige algo distinto). */
.cs-form-card .form-control:not(:placeholder-shown),
.cs-form-card select.form-select:valid {
  background: #fff;
  border-color: var(--cs-mint);
  color: var(--cs-ink);
}
.cs-form-card .form-control:not(:placeholder-shown):focus,
.cs-form-card select.form-select:valid:focus {
  background: #fff;
  border-color: var(--cs-amber);
  color: var(--cs-ink);
}

/* El navegador le pone su propio fondo (celeste/amarillo según el
   browser) a los campos autocompletados, pisando nuestro CSS. Esto lo
   fuerza a usar nuestro blanco + texto oscuro, igual que un campo
   "completo" tipeado a mano. El truco del box-shadow enorme es porque
   background-color no alcanza a vencer el estilo nativo de autofill. */
.cs-form-card .form-control:-webkit-autofill,
.cs-form-card .form-control:-webkit-autofill:hover,
.cs-form-card .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--cs-ink) !important;
  caret-color: var(--cs-ink);
  border-color: var(--cs-mint) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Selects sin elegir (placeholder tipo "Día"/"Mes"/"Año") atenuados; una
   vez elegido un valor válido dejan de estar :invalid y toman blanco. */
.cs-form-card select.form-select:invalid,
.cs-form-card select.form-select option[value=""] {
  color: rgba(255,255,255,.68);
}
.cs-form-card select.form-select option:not([value=""]) {
  color: var(--cs-ink);
}
.cs-amount-display {
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--cs-amber);
}
.form-range::-webkit-slider-thumb { background: var(--cs-amber); }
.form-range::-moz-range-thumb { background: var(--cs-amber); }

.btn-cs-primary {
  background: var(--cs-amber);
  border: none;
  color: var(--cs-navy);
  font-weight: 700;
  font-size: 1.02rem;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  width: 100%;
}
.btn-cs-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(214,140,31,.55);
  background: var(--cs-amber-dark);
  color: #fff;
  text-decoration: none;
}
.btn-cs-primary:disabled {
  opacity: .65;
  transform: none;
  box-shadow: none;
}

/* ============ FORM CARD EN EL HERO (nueva ubicación) ============ */
.cs-form-card--hero {
  max-width: 460px;
  margin-left: auto;
}
@media (max-width: 991.98px) {
  .cs-form-card--hero { max-width: 560px; margin-inline: auto; }
  .cs-hero::before { display: none; }
}

/* ============ WIZARD: progreso ============ */
.cs-wizard-progress { margin-bottom: 1.2rem; }
.cs-wizard-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--cs-bg-alt);
  overflow: hidden;
  margin-bottom: .55rem;
}
.cs-wizard-progress-fill {
  height: 100%;
  width: 33.33%;
  background: linear-gradient(90deg, var(--cs-teal), var(--cs-mint));
  border-radius: 999px;
  transition: width .3s ease;
}
.cs-wizard-progress-steps {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 600;
  color: var(--cs-ink-soft);
}
.cs-wizard-progress-steps .step-dot.is-active { color: var(--cs-teal-dark); }
.cs-wizard-progress-steps .step-dot.is-done { color: var(--cs-teal); }

/* ============ WIZARD: pasos ============ */
.cs-wizard-step { display: none; animation: csStepIn .25s ease; }
.cs-wizard-step.is-active { display: block; }
@keyframes csStepIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.cs-wizard-step-title {
  font-family: var(--cs-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cs-navy);
  padding: 0;
  margin-bottom: .15rem;
  float: none;
  width: auto;
}
.cs-wizard-step-sub {
  font-size: .85rem;
  color: var(--cs-ink-soft);
  margin-bottom: 1.1rem;
}
.cs-wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-top: 1.4rem;
}

/* ============ REVELADO PROGRESIVO (form.php, sin pasos con Atrás/Continuar) ============ */
.cs-progressive-block {
  overflow: hidden;
  margin-top: 1rem;
}
.cs-progressive-block.is-collapsed {
  display: none;
}
.cs-progressive-block.is-revealed {
  animation: csBlockReveal .5s ease;
}
@keyframes csBlockReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.cs-progress-message {
  background: rgba(21, 154, 174, .08);
  border: 1px solid rgba(21, 154, 174, .25);
  color: var(--cs-navy);
  font-size: .86rem;
  padding: .7rem .9rem;
  border-radius: var(--cs-radius-sm);
  margin-bottom: 1rem;
}
.cs-progress-message strong { color: var(--cs-teal-dark); }

.cs-fake-submit-help {
  text-align: center;
  font-size: .78rem;
  color: var(--cs-ink-soft);
  margin-top: .5rem;
}

.cs-field-help {
  font-size: .78rem;
  color: var(--cs-ink-soft);
  margin-top: .3rem;
}

.cs-phone-title {
  font-weight: 700;
  color: var(--cs-navy);
  font-size: .95rem;
}
.cs-phone-subtitle {
  font-size: .82rem;
  color: var(--cs-ink-soft);
  margin-top: .1rem;
}
.cs-field-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cs-navy);
  margin-bottom: .3rem;
}
.cs-phone-help {
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  padding: .6rem .8rem;
  font-size: .78rem;
  color: var(--cs-ink-soft);
}
.cs-phone-help strong { color: var(--cs-navy); }
.cs-wizard-nav .btn-cs-primary { width: auto; flex: 1; }
.btn-cs-secondary {
  background: transparent;
  border: 1px solid var(--cs-border);
  color: var(--cs-navy);
  font-weight: 600;
  font-size: .92rem;
  padding: .8rem 1.1rem;
  border-radius: var(--cs-radius-sm);
}
.btn-cs-secondary:hover { background: var(--cs-bg-alt); }

.cs-trust-mini {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-top: 1rem;
  font-size: .76rem;
  color: var(--cs-ink-soft);
}
.cs-trust-mini span { display: flex; align-items: center; gap: .35rem; }
.cs-trust-mini svg { color: var(--cs-teal); flex: none; }

.cs-form-card .form-check-label { color: rgba(255,255,255,.8); font-size: .82rem; }
.cs-form-card .form-check-label a { color: var(--cs-mint); text-decoration: underline; }
.cs-form-card .form-check {
  display: flex;
  align-items: flex-start;
  padding-left: 0;
}
.cs-form-card .form-check-input {
  width: 1.05em;
  height: 1.05em;
  margin: .1rem .5rem 0 0;
  flex: none;
  border-color: rgba(255,255,255,.5);
  background-color: transparent;
}
.cs-form-card .form-check-input:checked {
  background-color: var(--cs-teal);
  border-color: var(--cs-teal);
}
.cs-form-card .form-check-input:focus {
  border-color: var(--cs-teal);
  box-shadow: 0 0 0 .2rem rgba(21,154,174,.35);
}
.invalid-feedback { font-size: .78rem; }
.cs-form-card .invalid-feedback { color: #ffb4b4; }

/* ---- Overrides tema oscuro: todo lo que vive dentro de .cs-form-card
   (progreso, mensajes, ayuda de teléfono, trust-mini) estaba pensado
   para una card blanca; acá se adapta para leerse sobre navy/teal. ---- */
.cs-form-card .cs-wizard-step-sub { color: rgba(255,255,255,.72); }
.cs-form-card .cs-wizard-progress-bar { background: rgba(255,255,255,.15); }
.cs-form-card .cs-wizard-progress-steps { color: rgba(255,255,255,.6); }
.cs-form-card .cs-wizard-progress-steps .step-dot.is-active { color: var(--cs-amber); }
.cs-form-card .cs-wizard-progress-steps .step-dot.is-done { color: var(--cs-mint); }
.cs-form-card .cs-progress-message {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.9);
}
.cs-form-card .cs-progress-message strong { color: var(--cs-amber); }
.cs-form-card .cs-fake-submit-help { color: rgba(255,255,255,.6); }
.cs-form-card .cs-field-help { color: rgba(255,255,255,.6); }
.cs-form-card .cs-phone-title { color: #fff; }
.cs-form-card .cs-phone-subtitle { color: rgba(255,255,255,.65); }
.cs-form-card .cs-field-label { color: rgba(255,255,255,.92); }
.cs-form-card .cs-phone-help {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.75);
}
.cs-form-card .cs-phone-help strong { color: #fff; }
.cs-form-card .btn-cs-secondary {
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.cs-form-card .btn-cs-secondary:hover { background: rgba(255,255,255,.1); }
.cs-form-card .cs-trust-mini { color: rgba(255,255,255,.65); }
.cs-form-card .cs-trust-mini svg { color: var(--cs-mint); }
.cs-form-card .cs-form-success .icon-wrap {
  background: rgba(255,255,255,.12);
  color: var(--cs-mint);
}
.cs-form-card .cs-form-success h3,
.cs-form-card .cs-form-success p { color: #fff; }

/* Estado de éxito del formulario */
.cs-form-success {
  text-align: center;
  padding: 1.5rem .5rem;
}
.cs-form-success .icon-wrap {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--cs-bg-alt);
  color: var(--cs-teal-dark);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}

/* ============ SECCIÓN INSTITUCIONAL ============ */
.cs-section { padding: 4.2rem 0; }

/* Encabezado de sección: alineado a la izquierda, con barra de acento de
   color (en vez del típico eyebrow en mayúsculas + título centrado que
   se repite en cualquier landing genérica). El color de la barra puede
   variar según el tono de la sección: --accent por defecto es teal. */
.cs-section-head {
  max-width: 640px;
  padding-left: 1.1rem;
  border-left: 3px solid var(--cs-section-accent, var(--cs-teal));
  margin-bottom: 2.6rem;
}
.cs-section-head .kicker {
  display: block;
  font-family: var(--cs-font-display);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cs-section-accent, var(--cs-teal-dark));
  margin-bottom: .4rem;
}
.cs-section-head h2 {
  font-size: 2rem;
  margin: 0 0 .6rem;
  line-height: 1.18;
}
.cs-section-head p { color: var(--cs-ink-soft); margin: 0; max-width: 46ch; }
.cs-section-head--center { margin-inline: auto; text-align: left; }
.cs-section-head--amber { --cs-section-accent: var(--cs-amber-dark); }
.cs-section-head--navy { --cs-section-accent: var(--cs-navy); }
.cs-section-head--sub { margin-bottom: 1.8rem; }
.cs-section-head--sub h2 { font-size: 1.3rem; }

.cs-stat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: #fff;
  overflow: hidden;
}
.cs-stat-strip-item {
  padding: 1.5rem 1.1rem;
  text-align: center;
  border-right: 1px solid var(--cs-border);
  border-bottom: 1px solid var(--cs-border);
}
.cs-stat-strip-item:nth-child(2n) { border-right: none; }
.cs-stat-strip-item:nth-last-child(-n+2) { border-bottom: none; }
.cs-stat-strip-item svg { color: var(--cs-teal-dark); opacity: .55; margin-bottom: .3rem; }
.cs-stat-strip-item .num {
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--cs-navy);
  line-height: 1;
}
.cs-stat-strip-item .label { font-size: .8rem; color: var(--cs-ink-soft); margin-top: .35rem; }
.cs-stat-strip-item:nth-child(1) .num,
.cs-stat-strip-item:nth-child(3) .num { color: var(--cs-teal-dark); }
.cs-stat-strip-item:nth-child(1) svg,
.cs-stat-strip-item:nth-child(3) svg { color: var(--cs-teal-dark); }
.cs-stat-strip-item:nth-child(2) .num,
.cs-stat-strip-item:nth-child(4) .num { color: var(--cs-amber-dark); }
.cs-stat-strip-item:nth-child(2) svg,
.cs-stat-strip-item:nth-child(4) svg { color: var(--cs-amber-dark); }

/* ============ PANEL INSTITUCIONAL AMPF ============ */
.cs-ampf-panel {
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border);
  border-radius: calc(var(--cs-radius) + 6px);
  padding: 2.2rem;
}
@media (max-width: 767.98px) { .cs-ampf-panel { padding: 1.4rem; } }

/* ============ FICHAS DE ESPECIFICACIONES (reemplazan la tabla plana) ============ */
.cs-specs-card {
  background: #fff;
  border: 1px solid var(--cs-border);
  border-top: 3px solid transparent;
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow-sm);
  padding: 1.4rem 1.5rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.cs-specs-card:hover {
  box-shadow: var(--cs-shadow);
  transform: translateY(-2px);
}
.cs-specs-card--teal { border-top-color: var(--cs-teal); }
.cs-specs-card--amber { border-top-color: var(--cs-amber); }
.cs-specs-card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  color: var(--cs-navy);
  font-size: .95rem;
  padding-bottom: .9rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--cs-border);
}
.cs-specs-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.cs-specs-icon--teal { background: rgba(21,154,174,.12); color: var(--cs-teal-dark); }
.cs-specs-icon--amber { background: rgba(242,169,59,.15); color: var(--cs-amber-dark); }
.cs-specs-list { margin: 0; }
.cs-specs-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .62rem 0;
  border-bottom: 1px dashed var(--cs-border);
  font-size: .88rem;
}
.cs-specs-row:last-child { border-bottom: none; }
.cs-specs-row dt { color: var(--cs-ink-soft); font-weight: 400; margin: 0; }
.cs-specs-row dd {
  color: var(--cs-navy);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin: 0;
}

/* Callout del ejemplo de cuota, ahora vive dentro de la tarjeta "A quién
   va dirigido" (que tiene menos filas que la de al lado) para ocupar
   ese espacio con contenido útil en vez de dejarlo vacío. margin-top:auto
   lo empuja al piso de la tarjeta para que ambas queden a la misma altura. */
.cs-specs-example {
  margin-top: auto;
  padding-top: 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .82rem;
  color: var(--cs-ink-soft);
  line-height: 1.5;
}
.cs-specs-example svg {
  flex: none;
  margin-top: .15rem;
  color: var(--cs-amber-dark);
  background: rgba(242,169,59,.15);
  border-radius: 50%;
  padding: 3px;
  width: 22px; height: 22px;
}
.cs-specs-example strong { color: var(--cs-navy); }

.cs-mutual-badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  padding: .55rem 1.1rem .55rem .6rem;
}
.cs-mutual-badge .icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cs-navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.cs-mutual-badge strong { display: block; font-size: .88rem; color: var(--cs-navy); }
.cs-mutual-badge small { color: var(--cs-ink-soft); font-size: .74rem; }

/* ============ CALCULADORA ============ */
.cs-calc-card {
  background: var(--cs-navy);
  color: #fff;
  border-radius: var(--cs-radius);
  padding: 2rem;
}
.cs-calc-card label { color: rgba(255,255,255,.85); font-size: .82rem; font-weight: 600; }
.cs-calc-card .form-range { accent-color: var(--cs-amber); }
.cs-calc-result {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--cs-radius-sm);
  padding: 1.3rem;
  text-align: center;
}
.cs-calc-result .fig { font-family: var(--cs-font-display); font-weight: 700; font-size: 2.1rem; color: var(--cs-amber); }
.cs-calc-warning {
  font-size: .82rem;
  background: rgba(242,169,59,.15);
  border: 1px solid rgba(242,169,59,.4);
  color: #ffe2b0;
  border-radius: var(--cs-radius-sm);
  padding: .6rem .8rem;
  margin-top: .8rem;
  display: none;
}
.cs-calc-warning.show { display: block; }

/* ============ FAQ ============ */
/* ============ FAQ ============ */
.accordion-cs .accordion-item {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius) !important;
  overflow: hidden;
  margin-bottom: .85rem;
  background: #fff;
  transition: box-shadow .15s ease;
}
.accordion-cs .accordion-item:has(.accordion-button:not(.collapsed)) {
  box-shadow: var(--cs-shadow-sm);
  border-color: rgba(21,154,174,.35);
}
.accordion-cs .accordion-button {
  font-weight: 700;
  font-size: .98rem;
  color: var(--cs-navy);
  background: #fff;
  padding: 1.05rem 1.3rem;
  gap: .8rem;
}
.accordion-cs .accordion-button:not(.collapsed) {
  background: var(--cs-bg-alt);
  color: var(--cs-teal-dark);
  box-shadow: none;
}
.accordion-cs .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(21,154,174,.18); }

/* Ícono +/− propio en vez del chevron azul por defecto de Bootstrap:
   un "+" que rota 45° y se convierte visualmente en una "×" al abrir. */
.accordion-cs .accordion-button::after {
  background-image: none !important;
  content: "+";
  width: 26px; height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cs-bg-alt);
  color: var(--cs-teal-dark);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.accordion-cs .accordion-button:not(.collapsed)::after {
  background: var(--cs-teal-dark);
  color: #fff;
  transform: rotate(45deg);
}
.accordion-cs .accordion-body {
  padding: .9rem 1.3rem 1.3rem 1.3rem;
  margin-top: .1rem;
  border-top: 1px solid var(--cs-border);
  color: var(--cs-ink-soft);
  font-size: .92rem;
  line-height: 1.55;
}

/* ============ CTA FLOTANTE MOBILE ============ */
.cs-sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--cs-border);
  padding: .7rem 1rem;
  box-shadow: 0 -6px 20px rgba(10,55,67,.12);
  z-index: 1030;
  display: none;
}
@media (max-width: 767.98px) {
  .cs-sticky-cta { display: block; }
  .cs-sticky-cta.is-hidden { display: none; }
}

/* ============ FOOTER ============ */
.cs-footer {
  background: var(--cs-navy);
  color: rgba(255,255,255,.78);
  padding: 3rem 0 1.5rem;
  font-size: .88rem;
}
.cs-footer h6 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .9rem; }
.cs-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.cs-footer a:hover { color: var(--cs-amber); }
.cs-footer .cs-footer-logo img { height: 30px; margin-bottom: .8rem; }
.cs-footer .trust-logos img {
  height: 32px;
  background: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  margin: 0 .4rem .6rem 0;
}
.cs-footer hr { border-color: rgba(255,255,255,.15); }
.cs-footer-bottom { font-size: .76rem; color: rgba(255,255,255,.55); }

/* ============ UTILIDADES RESPONSIVE ============ */
@media (max-width: 991.98px) {
  .cs-hero { padding-top: 1.6rem; text-align: center; }
  .cs-hero .lead { max-width: none; margin-inline: auto; }
  .cs-hero-list { text-align: left; max-width: 420px; margin-inline: auto; }
  .cs-hero-art { max-width: 300px; margin-top: 1.6rem; }
  .cs-form-wrapper { margin-top: 2rem; }
}
@media (max-width: 575.98px) {
  .cs-section { padding: 3rem 0; }
  .cs-form-card { padding: 1.4rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cs-stat-strip-item, .btn-cs-primary { transition: none; }
}