/* Extracted from empresarial-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; }
    }

/* Ideal para / chart */
.ideal-section{
  position: relative;
  overflow: hidden;
}
.ideal-section::after{
  content:"";
  position:absolute;
  width: 18rem;
  height: 18rem;
  right: -6rem;
  top: -7rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(122,201,67,.18), transparent 68%);
  pointer-events:none;
}
.use-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.use-card{
  display:flex;
  gap: .9rem;
  min-height: 8.2rem;
  padding: 1rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(31,63,147,.12);
  background: rgba(255,255,255,.68);
  box-shadow: 0 16px 36px rgba(31,63,147,.08);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.use-card:hover{
  transform: translateY(-4px);
  border-color: rgba(31,63,147,.24);
  background: rgba(255,255,255,.9);
  box-shadow: 0 22px 48px rgba(31,63,147,.14);
}
.use-icon{
  flex: 0 0 auto;
  display:inline-grid;
  place-items:center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 1rem;
  color: var(--brand-700);
  font-size: .82rem;
  font-weight: 900;
  background: linear-gradient(145deg, rgba(31,63,147,.10), rgba(122,201,67,.16));
  border: 1px solid rgba(31,63,147,.14);
}
.use-card h3{
  margin: 0 0 .35rem;
  color: var(--brand-700);
  font-size: 1rem;
  font-weight: 900;
}
.use-card p{
  margin: 0;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.45;
}
.chart-card{
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 27rem;
  padding: 1.2rem;
  border-radius: 1.6rem;
  border: 1px solid rgba(31,63,147,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  box-shadow: 0 24px 56px rgba(31,63,147,.12);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.chart-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 64px rgba(31,63,147,.16);
}
.chart-card-head h3{
  margin: 0 0 .35rem;
  color: var(--brand-700);
  font-size: 1.28rem;
  font-weight: 900;
}
.chart-card-head p{
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}
.chart-wrap{
  height: 20rem;
  margin-top: 1rem;
}
.chart-wrap canvas{
  max-width: 100%;
}
@media (max-width: 991.98px){
  .use-grid{
    grid-template-columns: 1fr;
  }
  .chart-card{
    min-height: 24rem;
  }
  .chart-wrap{
    height: 17rem;
  }
}
@media (max-width: 575.98px){
  .use-card{
    min-height: auto;
  }
}