/* Extracted from credi-express.php. Keep page-specific rules here. */
body{
      font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(1000px 600px at 10% -10%, rgba(122,201,67,.18), transparent 55%),
        radial-gradient(900px 560px at 95% 5%, rgba(31,63,147,.16), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 42%, #ffffff 100%);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      min-height: 100vh;
    }

    /* ========= WAVES BACKGROUND (global) ========= */
    body::before,
    body::after{
      content:"";
      position: fixed;
      inset: -20%;
      z-index: -1;
      pointer-events: none;
      filter: blur(80px);
      opacity: .9;
    }
    body::before{
      background:
        radial-gradient(40% 35% at 20% 30%, var(--wave-blue-1), transparent 70%),
        radial-gradient(45% 40% at 80% 20%, var(--wave-blue-2), transparent 72%),
        radial-gradient(35% 30% at 60% 80%, var(--wave-blue-3), transparent 75%);
      animation: waveMoveA 22s linear infinite;
    }
    body::after{
      background:
        radial-gradient(35% 30% at 30% 70%, var(--wave-blue-2), transparent 70%),
        radial-gradient(40% 35% at 70% 60%, var(--wave-blue-1), transparent 72%);
      animation: waveMoveB 28s linear infinite;
      opacity: .7;
    }
    @keyframes waveMoveA{
      0%   { transform: translate(0,0) scale(1); }
      50%  { transform: translate(-6%, -4%) scale(1.05); }
      100% { transform: translate(0,0) scale(1); }
    }
    @keyframes waveMoveB{
      0%   { transform: translate(0,0) scale(1); }
      50%  { transform: translate(5%, 6%) scale(1.08); }
      100% { transform: translate(0,0) scale(1); }
    }
/* ========= PAGE ========= */
    .page{
      padding: 2.2rem 0 3.6rem;
    }
    .page-hero{
      padding: 1.25rem 0 1rem;
    }
    .kicker{
      display:inline-flex; gap:.45rem; align-items:center;
      font-weight: 900; font-size: .85rem;
      color: var(--brand-700);
      background: rgba(31,63,147,.08);
      border: 1px solid rgba(31,63,147,.12);
      border-radius: 999px;
      padding: .28rem .6rem;
    }
    .dot{
      width: 8px; height: 8px; border-radius: 99px; background: var(--accent);
      box-shadow: 0 0 0 4px rgba(122,201,67,.18);
    }
    .page-title{
      font-weight: 900;
      letter-spacing: -.02em;
      color: var(--brand-700);
      font-size: clamp(2rem, 3vw + 1rem, 3.2rem);
      line-height: 1.05;
      margin: .55rem 0 0;
    }
    .page-sub{
      color: var(--muted);
      max-width: 68ch;
      margin-top: .75rem;
      font-size: 1.06rem;
    }

    /* ========= CONTENT CARDS ========= */
    .card-pro{
      border-radius: var(--r-lg);
      border: 1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow-1);
      transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
    }
    .card-pro:hover{
      transform: translateY(-3px);
      box-shadow: var(--shadow-2);
    }
    .section{
      padding: 2.2rem 0;
    }
    .section-title{
      font-weight: 900;
      color: var(--brand-700);
      letter-spacing: -.01em;
      font-size: clamp(1.55rem, 1.8vw + 1rem, 2.25rem);
      margin: 0 0 .8rem;
    }

    /* Imagen con marco */
    .img-frame{
      border-radius: var(--r-lg);
      overflow:hidden;
      border: 1px solid rgba(15,23,42,.10);
      box-shadow: var(--shadow-2);
      background:#0b1220;
    }
    .img-frame picture{ display:block; }
    .img-frame img{ width:100%; height:auto; display:block; }
    .caption{ font-size:.92rem; color: var(--muted); }

    /* List bullets */
    .benefit-list{ padding-left:0; margin:0; list-style:none; }
    .benefit-list li{
      position:relative;
      padding-left:1.65rem;
      margin:.50rem 0;
      color: var(--ink);
    }
    .benefit-list li::before{
      content:"";
      width:.8rem; height:.8rem; border-radius:50%;
      background:var(--accent);
      position:absolute; left:0; top:.34rem;
      box-shadow:0 0 0 3px rgba(122,201,67,.18);
    }
/* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{ animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; scroll-behavior:auto!important; }
      body::before, body::after{ animation:none!important; }
    }

/* CrediExpress charts */
.credit-visual{
  position: relative;
  overflow: hidden;
}
.credit-visual::before{
  content:"";
  position:absolute;
  inset: auto -8rem -10rem auto;
  width: 22rem;
  height: 22rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(122,201,67,.18), transparent 68%);
  pointer-events:none;
}
.chart-panel{
  position: relative;
  z-index: 1;
  padding: 1.15rem;
  border-radius: 1.45rem;
  border: 1px solid rgba(31,63,147,.13);
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 42px rgba(31,63,147,.09);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.chart-panel:hover{
  transform: translateY(-4px);
  border-color: rgba(31,63,147,.24);
  box-shadow: 0 26px 58px rgba(31,63,147,.15);
}
.chart-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.chart-panel-head h3{
  margin: 0 0 .35rem;
  color: var(--brand-700);
  font-weight: 900;
  font-size: 1.15rem;
}
.chart-panel-head p{
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}
.chart-panel-head strong{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height: 2.25rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  color: var(--brand-700);
  background: rgba(122,201,67,.16);
  border: 1px solid rgba(122,201,67,.26);
  font-size: .88rem;
}
.credit-chart-wrap{
  height: 14rem;
}
.credit-chart-wrap.is-compact{
  height: 13rem;
}
.credit-chart-wrap canvas{
  max-width: 100%;
}
.credit-stats{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.credit-stat-card{
  padding: 1rem;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.64));
  border: 1px solid rgba(31,63,147,.11);
  box-shadow: 0 14px 30px rgba(31,63,147,.08);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.credit-stat-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(31,63,147,.13);
}
.credit-stat-card span{
  display:block;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.credit-stat-card strong{
  display:block;
  margin-top: .2rem;
  color: var(--brand-700);
  font-size: 1.15rem;
  font-weight: 900;
}
.credit-stat-card p{
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.4;
}
@media (max-width: 991.98px){
  .credit-stats{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px){
  .chart-panel-head{
    display:block;
  }
  .chart-panel-head strong{
    margin-top: .75rem;
  }
  .credit-chart-wrap,
  .credit-chart-wrap.is-compact{
    height: 12rem;
  }
}