/* =========================
   HERC0B THEME (premium)
   ========================= */

/* Font (agrega Inter en el HTML, abajo te digo) */
:root{
  --ink: #0b1f3a;
  --muted: #51607a;
  --line: rgba(11,31,58,.10);
  --bg: #ffffff;
  --soft: #f6f9fc;
  --soft2:#eef5ff;

  --blue: #0b4aa2;
  --blue2:#0a67c2;
  --btn: #0b2f5f;

  --radius: 18px;
  --shadow: 0 14px 40px rgba(11,31,58,.10);
  --shadow2: 0 10px 22px rgba(11,31,58,.08);

  --container: 1120px;
}

/* Reset base */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
.container{
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

/* Header / Nav (estilo JPM: limpio + aire + borde) */
.header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 0;
  gap: 20px;
}
.nav-logo{
  display:flex;
  align-items:baseline;
  gap: 6px;
  font-size: 20px;
  letter-spacing: -0.2px;
}
.logo-main{ font-weight: 700; color: var(--ink); }
.logo-sub{ font-weight: 500; color: var(--blue2); }

.nav-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 22px;
}
.nav-link{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  opacity:.92;
  position: relative;
  padding: 8px 2px;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: var(--blue2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover::after{ transform: scaleX(1); }

/* Secciones */
section{ padding: 88px 0; }
.section-kicker{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.section-title{
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.6px;
}
.section-subtitle{
  margin-top: 14px;
  color: var(--muted);
  font-size: 18px;
  max-width: 820px;
}

/* =========================
   HERO (Inicio)
   ========================= */
.hero{
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0b1f3a; /* fallback si la imagen falla */
  padding: 120px 0 90px;
}

.hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.02);
  filter: saturate(1.05);
}

/* Oscurece y “suaviza” como banca premium */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(120deg, rgba(11,31,58,.86), rgba(11,31,58,.50));
}

.hero-inner{
  position: relative;
  z-index: 2;
}

.hero-copy{
  max-width: 880px;
  color: #fff;
}

.hero-kicker{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 14px;
}

.hero-copy h1{
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -1px;
  margin-bottom: 14px;
  text-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.hero-copy p{
  font-size: 18px;
  max-width: 720px;
  color: rgba(255,255,255,.90);
  text-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.hero-actions{
  margin-top: 26px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Botones (premium) */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.btn-primary{
  background: #ffffff;
  color: #0b1f3a;
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
}

.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(0,0,0,.24);
}

.btn-secondary{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
}

.btn-secondary:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.70);
}

/* Micro “trust line” como banca */
.hero-trust{
  margin-top: 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

@media (max-width: 520px){
  .hero{
    padding: 110px 0 70px;
    min-height: 78vh;
  }
}


/* About (limpio) */
.about p{
  margin-top: 18px;
  color: var(--muted);
  font-size: 18px;
  max-width: 980px;
}

/* =========================
   SERVICIOS (estilo IBP pero HERC0B)
   - módulos grandes
   - imagen + contenido + bullets
   ========================= */
.services{
  background: var(--soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.services-grid{
  margin-top: 34px;
  display: grid;
  gap: 18px;
}

.service-module{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  overflow:hidden;
  display:grid;
  grid-template-columns: 360px 1fr;
}
.service-media{
  position:relative;
  min-height: 240px;
  background: var(--soft2);
}
.service-media img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.service-body{
  padding: 28px 28px 26px;
}
.service-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.service-title{
  font-size: 22px;
  letter-spacing: -0.3px;
}
.badge{
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  background: rgba(11,74,162,.08);
  border: 1px solid rgba(11,74,162,.12);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.service-desc{
  color: var(--muted);
  margin-top: 6px;
  font-size: 16px;
  max-width: 740px;
}
.service-list{
  margin-top: 14px;
  display:grid;
  gap: 10px;
  padding-left: 0;
  list-style: none;
}
.service-list li{
  position:relative;
  padding-left: 22px;
  color: var(--ink);
  font-size: 14px;
}
.service-list li::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue2);
  position:absolute;
  left: 0;
  top: 7px;
}
.service-meta{
  margin-top: 16px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.meta-chip{
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff;
}
.service-cta{
  margin-top: 18px;
}

@media (max-width: 920px){
  .service-module{ grid-template-columns: 1fr; }
  .service-media{ min-height: 210px; }
}

/* Beneficios (tarjetas más premium) */
.benefits .benefit-cards{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.benefits .benefit-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow2);
}
.benefits .benefit-card h3{ font-size: 16px; margin-bottom: 8px; }
.benefits .benefit-card p{ color: var(--muted); font-size: 14px; }
@media (max-width: 920px){
  .benefits .benefit-cards{ grid-template-columns: 1fr; }
}

/* ¿Te pasa esto? (más JPM: bloque con aire) */
.identification{
  background:#fff;
}
.identification .identification-list{
  margin-top: 18px;
  max-width: 760px;
  margin-left:auto;
  margin-right:auto;
  list-style:none;
  display:grid;
  gap: 12px;
}
.identification .identification-list li{
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}
.identification-message{
  margin-top: 18px;
  color: var(--blue);
  font-weight: 600;
  max-width: 820px;
  margin-left:auto;
  margin-right:auto;
}

/* Contacto (más premium) */
.contact{
  background: var(--soft);
  border-top: 1px solid var(--line);
}
.contact-form{
  margin-top: 22px;
  background:#fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 22px;
  display:grid;
  gap: 12px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border: 1px solid rgba(11,31,58,.18);
  border-radius: 12px;
  padding: 14px 14px;
  font-size: 14px;
  outline: none;
}
.contact-form textarea{ min-height: 120px; resize: vertical; }
.contact-form button{
  margin-top: 4px;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-weight: 700;
  background: var(--btn);
  color:#fff;
  cursor:pointer;
}
.contact-form button:hover{ filter: brightness(1.05); }
.process-grid{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.process-card{
  background:#fff;
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 22px rgba(11,31,58,.08);
}

.process-num{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  color:#0b4aa2;
  background: rgba(11,74,162,.10);
  border: 1px solid rgba(11,74,162,.14);
  margin-bottom: 12px;
}

.process-card h3{
  font-size: 16px;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.process-card p{
  font-size: 14px;
  color: #51607a;
}

@media (max-width: 920px){
  .process-grid{ grid-template-columns: 1fr; }
}
/* =========================
   ABOUT (JPM 2 columnas)
   ========================= */
.about-jpm{
  padding: 92px 0;
  background: #fff;
  border-bottom: 1px solid rgba(11,31,58,.10);
}

.about-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;
  align-items: center;
}

.about-lead{
  margin-top: 16px;
  font-size: 18px;
  color: rgba(11,31,58,.85);
  max-width: 760px;
}

.about-text{
  margin-top: 12px;
  font-size: 16px;
  color: #51607a;
  max-width: 760px;
}

.about-highlights{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.highlight-card{
  background: #f6f9fc;
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 16px;
  padding: 14px 14px;
}

.highlight-title{
  font-weight: 700;
  font-size: 13px;
  color: #0b1f3a;
  margin-bottom: 6px;
}

.highlight-text{
  font-size: 13px;
  color: #51607a;
}

.about-actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.about-media{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(11,31,58,.12);
  border: 1px solid rgba(11,31,58,.10);
  background: #eef5ff;
}

.about-media img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

@media (max-width: 980px){
  .about-grid{
    grid-template-columns: 1fr;
  }
  .about-media img{
    height: 300px;
  }
  .about-highlights{
    grid-template-columns: 1fr;
  }
}
/* =========================
   BENEFICIOS (JPM feel)
   ========================= */
.benefits-jpm{
  padding: 96px 0;
  background: #fff;
  border-top: 1px solid rgba(11,31,58,.10);
  border-bottom: 1px solid rgba(11,31,58,.10);
}

.benefits-head{
  max-width: 860px;
}

.benefits-stats{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.stat{
  background: #f6f9fc;
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  padding: 16px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.stat-number{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color: #0b4aa2;
  background: rgba(11,74,162,.10);
  border: 1px solid rgba(11,74,162,.14);
}

.stat-text{
  color: #51607a;
  font-size: 14px;
  font-weight: 600;
}

.benefits-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.benefit-card{
  background: #ffffff;
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  padding: 20px 20px;
  box-shadow: 0 10px 22px rgba(11,31,58,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.benefit-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(11,31,58,.12);
}

.benefit-card h3{
  font-size: 16px;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
  color: #0b1f3a;
}

.benefit-card p{
  font-size: 14px;
  color: #51607a;
}

@media (max-width: 980px){
  .benefits-stats{ grid-template-columns: 1fr; }
  .benefits-grid{ grid-template-columns: 1fr; }
}
/* Fix para stats largos como 30–60–90 */
.stat{
  align-items: center;
}

.stat-number{
  width: auto;              /* antes era fijo */
  min-width: 44px;          /* mantiene consistencia con 10 y 3 */
  height: 44px;
  padding: 0 12px;          /* espacio lateral para “30–60–90” */
  border-radius: 14px;
  white-space: nowrap;      /* evita que se parta en líneas */
  font-size: 14px;          /* un poco más chico */
  line-height: 1;
}
/* =========================
   SERVICIOS (IBP layout + JPM feel)
   ========================= */
.services-jpm{
  padding: 110px 0;
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(10,103,194,.10), rgba(255,255,255,0) 55%),
    radial-gradient(800px 480px at 85% 40%, rgba(11,31,58,.08), rgba(255,255,255,0) 60%),
    #f7f9fc;
  border-top: 1px solid rgba(11,31,58,.10);
  border-bottom: 1px solid rgba(11,31,58,.10);
}

.svc-list{
  margin-top: 26px;
  display: grid;
  gap: 18px;
}

.svc{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(11,31,58,.10);
}
.svc-kicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(81,96,122,.9);
  margin-bottom: 10px;
}

.svc-body{

  position: relative;
}

.svc-body::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 1px;
  background: rgba(11,31,58,.08);
}

.svc-reverse{
  grid-template-columns: 1fr 420px;
}
.svc-reverse .svc-media{ order: 2; }
.svc-reverse .svc-body{ order: 1; }

.svc-media{
  background: #eef5ff;
  min-height: 320px;
}
.svc-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-body{
  padding: 26px 26px 24px;
}

.svc-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.svc-title{
  font-size: 20px;
  letter-spacing: -0.3px;
  color: #0b1f3a;
}

.svc-badge{
  font-size: 12px;
  font-weight: 700;
  color: #0b4aa2;
  background: rgba(11,74,162,.10);
  border: 1px solid rgba(11,74,162,.14);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.svc-desc{
  margin-top: 6px;
  color: #51607a;
  font-size: 15px;
  max-width: 780px;
}

.svc-points{
  margin-top: 14px;
  list-style: none;
  display: grid;
  gap: 10px;
  padding-left: 0;
}

.svc-points li{
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: #0b1f3a;
}

.svc-points li::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0a67c2;
  position: absolute;
  left: 0;
  top: 7px;
}

.svc-chips{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip{
  font-size: 12px;
  color: #51607a;
  border: 1px solid rgba(11,31,58,.10);
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff;
}

.svc-cta{
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 980px){
  .svc,
  .svc-reverse{
    grid-template-columns: 1fr;
  }
  .svc-reverse .svc-media{ order: 0; }
  .svc-media{ min-height: 220px; }
}
.process-jpm{
  padding: 96px 0;
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(10,103,194,.08), rgba(255,255,255,0) 60%),
    #ffffff;
  border-top: 1px solid rgba(11,31,58,.10);
  border-bottom: 1px solid rgba(11,31,58,.10);
}

.process-head{
  max-width: 900px;
}

.process-steps{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.step{
  background: #f6f9fc;
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 22px rgba(11,31,58,.06);
}

.step-num{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #0b4aa2;
  background: rgba(11,74,162,.10);
  border: 1px solid rgba(11,74,162,.14);
  margin-bottom: 12px;
}

.step h3{
  font-size: 16px;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.step p{
  font-size: 14px;
  color: #51607a;
}

.process-cta{
  margin-top: 18px;
  background: #0b1f3a;
  color: #fff;
  border-radius: 18px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.process-cta-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.process-cta-text span{
  color: rgba(255,255,255,.82);
  font-size: 14px;
}

@media (max-width: 980px){
  .process-steps{ grid-template-columns: 1fr; }
  .process-cta{ flex-direction: column; align-items: flex-start; }
}
/* =========================
   PROCESO: tarjetas más premium
   (solo CSS, sin tocar HTML)
   ========================= */

.process-steps{
  position: relative;
  margin-top: 28px;
}

/* (Opcional pero recomendado) Línea sutil de proceso en desktop */
@media (min-width: 981px){
  .process-steps::before{
    content:"";
    position:absolute;
    left: 18px;
    right: 18px;
    top: 34px;
    height: 2px;
    background: linear-gradient(90deg, rgba(10,103,194,.18), rgba(11,31,58,.08), rgba(10,103,194,.18));
    border-radius: 999px;
    z-index: 0;
  }
}

.step{
  position: relative;
  z-index: 1;
  overflow: hidden;

  /* fondo con profundidad, no blanco plano */
  background:
    radial-gradient(420px 220px at 15% 10%, rgba(10,103,194,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), #f6f9fc);

  border: 1px solid rgba(11,31,58,.12);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 14px 28px rgba(11,31,58,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* “Acento” vertical elegante (tipo banca) */
.step::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.10));
}

/* Detalle creativo: “blob” sutil en esquina (no invade) */
.step::after{
  content:"";
  position:absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -70px;
  background: radial-gradient(circle, rgba(10,103,194,.14), rgba(10,103,194,0) 70%);
  filter: blur(2px);
  pointer-events: none;
}

.step:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(11,31,58,.12);
  border-color: rgba(10,103,194,.22);
}

/* Badge del número: más “premium” (glass) */
.step-num{
  width: auto;
  height: auto;
  padding: 10px 12px;
  border-radius: 14px;
  display: inline-flex;
  align-items:center;
  justify-content:center;

  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;

  color: #0b4aa2;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(10,103,194,.20);
  box-shadow: 0 10px 18px rgba(11,31,58,.10);

  backdrop-filter: blur(8px);
  margin-bottom: 12px;
}

/* Tipografía un poco más “banca” */
.step h3{
  font-size: 16px;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
  color: #0b1f3a;
}

.step p{
  font-size: 14px;
  line-height: 1.55;
  color: #51607a;
}
@media (min-width: 981px){
  .step{ min-height: 170px; }
}
/* =========================
   Proceso tipo TIMELINE
   ========================= */
.process-timeline{
  margin-top: 26px;
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 14px;
}

.tl-item{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
}

/* Columna izquierda (número + línea) */
.tl-marker{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.tl-num{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  font-weight: 800;
  font-size: 13px;
  color: #0b4aa2;

  background: rgba(255,255,255,.75);
  border: 1px solid rgba(10,103,194,.22);
  box-shadow: 0 12px 22px rgba(11,31,58,.10);
  backdrop-filter: blur(10px);
}

/* Línea vertical que conecta pasos */
.tl-line{
  width: 2px;
  flex: 1;
  background: linear-gradient(180deg, rgba(10,103,194,.35), rgba(11,31,58,.08));
  border-radius: 999px;
}

/* Card del paso */
.tl-card{
  background:
    radial-gradient(420px 220px at 15% 10%, rgba(10,103,194,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), #f6f9fc);
  border: 1px solid rgba(11,31,58,.12);
  border-radius: 20px;
  padding: 18px 18px;
  box-shadow: 0 14px 28px rgba(11,31,58,.08);
  position: relative;
  overflow: hidden;
}

/* Acento lateral para “banca” */
.tl-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.10));
}

.tl-card h3{
  font-size: 16px;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
  color: #0b1f3a;
}

.tl-card p{
  font-size: 14px;
  line-height: 1.55;
  color: #51607a;
}

/* Quitar línea del último */
.tl-last .tl-line{ display:none; }

/* Desktop: 2 columnas de timeline para que no quede larguísimo */
@media (min-width: 981px){
  .process-timeline{
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }
}
/* =========================
   PROCESO - Accordion look estático
   ========================= */
/* =========================
   PROCESO sobre IMAGEN (Opción 6)
   ========================= */

.process-image{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 18px 50px rgba(11,31,58,.12);
  margin-top: 22px;
  min-height: 520px;
}

.process-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.02);
  z-index: 0;
}

/* Overlay sobrio tipo banca para legibilidad */
.process-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    linear-gradient(120deg, rgba(11,31,58,.82), rgba(11,31,58,.45));
}

.process-content{
  position: relative;
  z-index: 2;
  padding: 26px;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Contenedor de “pins” (bloques ligeros) */
.process-pins{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
}

/* Cada pin: glass premium */
.pin{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 16px 16px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: start;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.pin:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}

/* Badge integrado (ya no “solo”) */
.pin-badge{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
  color: #0b4aa2;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(10,103,194,.22);
}

.pin-text h3{
  font-size: 15px;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
  color: rgba(255,255,255,.96);
}

.pin-text p{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.78);
}

/* Responsive */
@media (max-width: 980px){
  .process-image{ min-height: auto; }
  .process-content{ padding: 18px; }
  .process-pins{ grid-template-columns: 1fr; }
}
/* ===== Ajuste: Proceso sobre imagen (mejor proporción) ===== */

/* ===== FIX: Proceso sobre imagen (más armonía, menos scroll) ===== */

/* 1) Que el bloque no quede gigante */
.process-image{
  aspect-ratio: 16 / 8;     /* menos alto que antes */
  min-height: 380px;        /* evita exceso de altura */
}

/* 2) Convertimos el contenedor interno en overlay completo */
.process-content{
  position: absolute;
  inset: 0;
  padding: 0;
  display: block;
}

/* 3) Banda glass pegada abajo, no centrada */
.process-band{
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;

  max-width: var(--container); /* mismo ancho que tu sitio */
  margin: 0 auto;

  padding: 14px;
  border-radius: 20px;
}

/* 4) Pins: ocupar ancho, mejor balance visual */
.process-pins{
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3x2 como antes */
  gap: 12px;
}

/* 5) Pins más “finos” (menos altos) */
.pin{
  padding: 14px;
  grid-template-columns: 52px 1fr;
  gap: 12px;
}

.pin-text h3{
  font-size: 15px;
  margin-bottom: 5px;
}

/* 6) Texto: recorte elegante para no verse pesado */
.pin-desc{
  display: -webkit-box;
  -webkit-line-clamp: 2;     /* máximo 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 7) Responsive */
@media (max-width: 980px){
  .process-image{
    aspect-ratio: auto;
    min-height: 0;
  }
  .process-band{
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 14px;
  }
  .process-pins{ grid-template-columns: 1fr; }
}
/* ===== FIX: Banner CTA (menos alto, mismo ancho del container) ===== */

.process-cta{
  max-width: var(--container);
  margin: 14px auto 0;   /* lo pega al bloque, menos scroll */
  padding: 14px 16px;    /* más compacto */
  border-radius: 18px;
}

.process-cta .btn{
  padding: 10px 14px;    /* botón un poco más chico */
  border-radius: 999px;
}
/* ===== Ajuste final: menos espacio y sin cortar texto ===== */

/* 1) Menos altura del bloque (reduce espacio sobrante arriba) */
.process-image{
  aspect-ratio: 16 / 7;     /* antes 16/8 */
  min-height: 340px;        /* antes 380 */
}

/* 2) Sube un poco la banda para “llenar” la imagen visualmente */
.process-band{
  bottom: 16px;             /* antes 22px */
  padding: 12px;            /* un poco más compacta */
}

/* 3) NO cortar texto en desktop (así ya no salen “...”) */
@media (min-width: 981px){
  .pin-desc{
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
  }
}

/* 4) En móvil sí cortamos para que no se haga larguísimo */
@media (max-width: 980px){
  .pin-desc{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* ===== NUEVO FORMATO: banda glass full-height + 2x3 ===== */

.process-image{
  /* Mantén un bloque estable y no gigante */
  aspect-ratio: 16 / 7;
  min-height: 360px;
}

/* El overlay sigue igual, solo nos aseguramos que el contenido sea absoluto */
.process-content{
  position: absolute;
  inset: 0;
  padding: 0;
}

/* Banda: ahora ocupa casi toda la altura de la imagen (adiós espacio arriba) */
.process-band{
  position: absolute;
  left: 22px;
  right: 22px;
  top: 22px;
  bottom: 22px;

  max-width: var(--container);
  margin: 0 auto;

  padding: 18px;
  border-radius: 22px;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);

  display: flex;
  align-items: center; /* centra la grilla dentro de la banda */
}

/* Grilla 2 columnas x 3 filas que se distribuye en altura */
.process-pins{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
  align-content: stretch;
}

/* Cards un poco más “alto valor” (sin inflarse demasiado) */
.pin{
  padding: 16px;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}

.pin-badge{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: 14px;
}

.pin-text h3{
  font-size: 15px;
  margin-bottom: 6px;
  color: rgba(255,255,255,.96);
}

.pin-desc{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.80);

  /* ya NO cortamos en desktop */
  display: block;
  overflow: visible;
}

/* Responsive */
@media (max-width: 980px){
  .process-image{
    aspect-ratio: auto;
    min-height: 0;
  }
  .process-band{
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    margin-top: 14px;
    display: block;
  }
  .process-pins{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  /* En móvil sí cortamos a 2 líneas para que sea rápido */
  .pin-desc{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* =========================
   Footer estilo JPM
   ========================= */
.footer-jpm{
  background: #151515;
  color: rgba(255,255,255,.86);
  padding: 56px 0 0;
}

.footer-inner{
  display: grid;
  gap: 26px;
}

.footer-brand{
  max-width: 520px;
}

.footer-logo{
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: #fff;
}
.footer-logo span{
  color: rgba(255,255,255,.78);
  font-weight: 700;
}

.footer-tagline{
  margin-top: 10px;
  color: rgba(255,255,255,.70);
  line-height: 1.5;
  font-size: 14px;
}

.footer-cols{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding-top: 6px;
}

.footer-col h4{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 12px;
}

.footer-col a{
  display: block;
  text-decoration: none;
  color: rgba(255,255,255,.72);
  padding: 6px 0;
  font-size: 14px;
}
.footer-col a:hover{
  color: #fff;
}

.footer-mini{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.64);
}
.footer-mini-title{
  color: rgba(255,255,255,.78);
  margin-bottom: 4px;
}

.footer-bottom{
  margin-top: 10px;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-social{
  display: flex;
  gap: 12px;
  align-items: center;
}

.social{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.social:hover{
  background: rgba(255,255,255,.12);
}
.social svg{
  width: 16px;
  height: 16px;
  fill: rgba(255,255,255,.80);
}

.footer-copy{
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

/* Legal mini-sections */
.footer-legal{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 14px 0;
}
.footer-legal p{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
}
.footer-legal strong{
  color: rgba(255,255,255,.82);
}

/* Responsive */
@media (max-width: 980px){
  .footer-cols{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .footer-cols{
    grid-template-columns: 1fr;
  }
}

/* ===== Servicios (formato premium estable) ===== */
.hc-services{ padding: 56px 0; background: radial-gradient(1200px 500px at 10% 0%, rgba(0,82,204,.08), transparent 55%); }
.hc-services-head{ max-width: 980px; margin-bottom: 22px; }
.hc-eyebrow{ letter-spacing:.18em; font-size:12px; text-transform:uppercase; opacity:.65; margin:0 0 10px; }
.hc-title{ margin:0 0 10px; font-size: clamp(30px, 3.2vw, 46px); line-height:1.08; }
.hc-subtitle{ margin:0; opacity:.75; max-width: 80ch; }

.hc-svc-card{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(10,25,47,.10);
  box-shadow: 0 18px 60px rgba(10,25,47,.08);
  margin: 18px 0;
}
.hc-svc-content{ padding: 22px 24px; }
.hc-svc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 6px; }

.hc-pill{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight:700;
  font-size: 13px;
  background: rgba(0,82,204,.08);
  border: 1px solid rgba(0,82,204,.18);
}

.hc-svc-h{ margin: 6px 0 10px; font-size: 22px; }
.hc-svc-lead{ margin: 0 0 12px; opacity: .82; max-width: 60ch; }

.hc-bullets{ margin:0 0 14px; padding-left: 18px; display:grid; gap: 8px; }
.hc-chips{ display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: 12px; }
.hc-chip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,25,47,.10);
  background: rgba(10,25,47,.02);
  font-size: 13px;
  opacity: .85;
}

.hc-actions{ display:flex; align-items:center; gap: 16px; margin-top: 10px; }
.hc-link{ font-weight:800; text-decoration:none; }
.hc-link:hover{ text-decoration: underline; }

.hc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  background: #0b1f3a;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  border: 1px solid rgba(255,255,255,.12);
}
.hc-btn:hover{ filter: brightness(1.05); }

.hc-fine{ margin: 12px 0 0; opacity:.72; }

.hc-svc-media{ position: relative; min-height: 340px; }
.hc-svc-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

/* Alternada */
.hc-reverse{ grid-template-columns: .95fr 1.05fr; }
.hc-reverse .hc-svc-content{ order: 2; }
.hc-reverse .hc-svc-media{ order: 1; }

/* Responsive */
@media (max-width: 980px){
  .hc-svc-card, .hc-reverse{ grid-template-columns: 1fr; }
  .hc-reverse .hc-svc-content, .hc-reverse .hc-svc-media{ order: initial; }
  .hc-svc-media{ min-height: 220px; }
}
/* Dropdown Servicios - override fuerte */
.nav-dropdown { position: relative; }

.nav-dropdown > .dropdown{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;

  min-width: 290px;
  background: #fff;
  border: 1px solid rgba(10,25,47,.12);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(10,25,47,.14);
  padding: 10px;

  display: none !important;    /* clave */
  flex-direction: column;       /* por si hereda flex */
  gap: 2px;
  z-index: 9999;
}

.nav-dropdown:hover > .dropdown,
.nav-dropdown:focus-within > .dropdown{
  display: flex !important;     /* lo abrimos como columna */
}

.nav-dropdown > .dropdown a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
}

.nav-dropdown > .dropdown a:hover{
  background: rgba(0,82,204,.08);
}
/* Servicios: reducir tamaño general */
.hc-services{ padding: 38px 0 !important; }

.hc-services-head{ margin-bottom: 16px !important; }
.hc-title{ font-size: clamp(26px, 2.6vw, 38px) !important; }
.hc-subtitle{ max-width: 72ch; }

.hc-svc-card{ margin: 14px 0 !important; }
.hc-svc-content{ padding: 18px 18px !important; }

.hc-svc-h{ font-size: 20px !important; margin: 6px 0 8px !important; }
.hc-svc-lead{ margin-bottom: 10px !important; }

.hc-bullets{ gap: 6px !important; margin-bottom: 10px !important; }

.hc-chip{ padding: 7px 9px !important; font-size: 12.5px !important; }

.hc-svc-media{ min-height: 260px !important; } /* antes se ve enorme */
@media (max-width: 980px){
  .hc-svc-media{ min-height: 200px !important; }
}
/* ===== Servicios: imagen más chica (sin cambiar texto) ===== */

/* 1) Menos ancho para la imagen, más ancho para el texto */
.hc-svc-card{
  grid-template-columns: 1.25fr .75fr !important; /* antes estaba casi mitad/mitad */
}

/* 2) Limitar altura de la imagen (recorte pro) */
.hc-svc-media{
  min-height: 0 !important;
  height: 240px !important;     /* ajusta aquí: 220–260 según te guste */
  overflow: hidden !important;
}

.hc-svc-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* En móvil */
@media (max-width: 980px){
  .hc-svc-card{ grid-template-columns: 1fr !important; }
  .hc-svc-media{ height: 200px !important; }
}
.hc-actions{ margin-top: 4px !important; }
.hc-bullets{ margin-bottom: 8px !important; }
/* ===== FIX: imágenes servicios alineadas (sin huecos) ===== */

/* La imagen no debe tener altura fija */
.hc-svc-media{
  height: auto !important;
  min-height: unset !important;
  overflow: hidden !important;
}

/* La imagen debe llenar TODO el alto/ancho del bloque de imagen */
.hc-svc-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important; /* por si había zoom */
  display: block !important;
}

/* Para que el bloque de imagen se estire al alto de la tarjeta */
.hc-svc-card{
  align-items: stretch !important;
}

/* Para que se vea MENOS grande: haz la columna de imagen más angosta */
.hc-svc-card{
  grid-template-columns: 1.4fr .6fr !important;
}

/* Reverse también respeta proporción */
.hc-svc-card.hc-reverse{
  grid-template-columns: .6fr 1.4fr !important;
}

/* Móvil: apilado */
@media (max-width: 980px){
  .hc-svc-card,
  .hc-svc-card.hc-reverse{
    grid-template-columns: 1fr !important;
  }
  .hc-svc-media{
    height: 220px !important; /* aquí sí fija en móvil para que no sea enorme */
  }
}
.hc-svc-card{ grid-template-columns: 1.5fr .8fr !important; }
/* === Alternancia automática: imagen izquierda/derecha por tarjeta === */
.hc-svc-card{
  grid-template-columns: 1.38fr .62fr !important; /* más texto, menos imagen */
}

.hc-svc-card:nth-of-type(even){
  grid-template-columns: .62fr 1.38fr !important;
}

/* Orden: por default texto->imagen (imagen derecha) */
.hc-svc-card .hc-svc-content{ order: 1; }
.hc-svc-card .hc-svc-media{ order: 2; }

/* En pares: imagen izquierda */
.hc-svc-card:nth-of-type(even) .hc-svc-media{ order: 1; }
.hc-svc-card:nth-of-type(even) .hc-svc-content{ order: 2; }
/* === Compactar tipografía/espacios (sin perder look premium) === */
.hc-svc-content{
  padding: 14px 16px !important;
  font-size: 15px !important;
}

.hc-svc-h{
  font-size: 19px !important;
  margin: 4px 0 6px !important;
}

.hc-svc-lead{
  font-size: 14.5px !important;
  margin: 0 0 8px !important;
  opacity: .82;
}

.hc-bullets{
  font-size: 14px !important;
  line-height: 1.45 !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

/* Chips más finos */
.hc-chip{
  font-size: 12px !important;
  padding: 6px 9px !important;
}

/* Botones más chicos */
.hc-btn{
  padding: 9px 13px !important;
  font-size: 13.5px !important;
}

.hc-actions{ margin-top: 6px !important; gap: 12px !important; }
/* === Mejor acabado visual === */
.hc-svc-card{
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(10,25,47,.08) !important;
}

.hc-svc-media{
  overflow: hidden !important;
}

.hc-svc-media img{
  filter: contrast(1.03) saturate(1.03);
}

/* Línea sutil premium al lado del contenido */
.hc-svc-content{
  position: relative;
}
.hc-svc-content::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:99px;
  background: rgba(0,82,204,.25);
}
/* ================================
   H E R C O B  -  SERVICIOS FINAL
   (pegar al final del styles.css)
================================ */

/* Fondo para que no se vea vacío */
.hc-services{
  position: relative;
  padding: 44px 0 !important;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 8% 8%, rgba(0,82,204,.10), transparent 55%),
    radial-gradient(700px 360px at 92% 18%, rgba(0,82,204,.06), transparent 55%),
    linear-gradient(180deg, rgba(10,25,47,.02), rgba(10,25,47,0) 55%);
}

/* “Noise / grid” ultra sutil para textura (no se nota de más) */
.hc-services::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(10,25,47,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,25,47,.03) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .14;
  pointer-events:none;
  mask-image: radial-gradient(800px 420px at 20% 12%, #000 0%, transparent 70%);
}

/* Encabezado más “banca” */
.hc-services-head{ margin-bottom: 14px !important; }
.hc-title{ font-size: clamp(26px, 2.6vw, 40px) !important; }
.hc-subtitle{ font-size: 15px !important; line-height: 1.55 !important; opacity:.78; }

/* Tarjetas: premium */
.hc-svc-card{
  border-radius: 18px !important;
  border: 1px solid rgba(10,25,47,.10) !important;
  box-shadow: 0 14px 44px rgba(10,25,47,.08) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(6px);
  align-items: stretch !important;
  margin: 14px 0 !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

.hc-svc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 58px rgba(10,25,47,.12) !important;
}

/* Acento lateral sutil */
.hc-svc-content{
  position: relative;
  padding: 14px 16px !important;
}
.hc-svc-content::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:99px;
  background: rgba(0,82,204,.25);
}

/* Tipografía compacta */
.hc-svc-h{ font-size: 19px !important; margin: 4px 0 6px !important; }
.hc-svc-lead{ font-size: 14.5px !important; margin: 0 0 8px !important; opacity:.82; }
.hc-bullets{ font-size: 14px !important; line-height: 1.45 !important; gap: 6px !important; margin-bottom: 10px !important; }

/* Chips más finos */
.hc-chips{ gap: 6px !important; margin-bottom: 8px !important; }
.hc-chip{ font-size: 12px !important; padding: 6px 9px !important; }

/* Botones más pequeños */
.hc-actions{ margin-top: 6px !important; gap: 12px !important; }
.hc-btn{ padding: 9px 13px !important; font-size: 13.5px !important; }

/* Imagen integrada (sin huecos raros) */
.hc-svc-media{ overflow: hidden !important; }
.hc-svc-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display:block !important;
  filter: contrast(1.03) saturate(1.03);
}

/* Proporción: más texto, menos imagen (compacto) */
.hc-svc-card{
  grid-template-columns: 1.38fr .62fr !important;
}
.hc-svc-card:nth-of-type(even){
  grid-template-columns: .62fr 1.38fr !important;
}

/* Alternancia automática (imagen izq/der) sin tocar HTML */
.hc-svc-card .hc-svc-content{ order: 1; }
.hc-svc-card .hc-svc-media{ order: 2; }
.hc-svc-card:nth-of-type(even) .hc-svc-media{ order: 1; }
.hc-svc-card:nth-of-type(even) .hc-svc-content{ order: 2; }

/* === PREMIUM: en la home mostrar solo 3 bullets (lo demás en “Más detalles”) === */
.hc-services .hc-bullets li:nth-child(n+4){
  display: none !important;
}

/* Frase final más discreta (si la quieres conservar) */
.hc-fine{
  font-size: 13px !important;
  margin-top: 8px !important;
  opacity: .65 !important;
}

/* Mobile */
@media (max-width: 980px){
  .hc-svc-card,
  .hc-svc-card:nth-of-type(even){
    grid-template-columns: 1fr !important;
  }
  .hc-svc-media{ height: 210px !important; }
  .hc-svc-content::before{ top:12px; bottom:12px; }
}
/* ===== Servicios: alternancia invertida (arranca con imagen a la izquierda) ===== */

/* En general: 1a columna = imagen (pequeña), 2a columna = texto (grande) */
.hc-svc-card{
  grid-template-columns: .62fr 1.38fr !important;
}

/* Orden por default: imagen izquierda / texto derecha */
.hc-svc-card .hc-svc-media{ order: 1 !important; }
.hc-svc-card .hc-svc-content{ order: 2 !important; }

/* En pares: se invierte (imagen derecha / texto izquierda) */
.hc-svc-card:nth-of-type(even){
  grid-template-columns: 1.38fr .62fr !important;
}
.hc-svc-card:nth-of-type(even) .hc-svc-content{ order: 1 !important; }
.hc-svc-card:nth-of-type(even) .hc-svc-media{ order: 2 !important; }
/* =========================
   SERVICIOS V2 (premium estable)
========================= */

.hc-services2{
  padding: 56px 0;
  background:
    radial-gradient(900px 480px at 10% 0%, rgba(0,82,204,.10), transparent 60%),
    radial-gradient(700px 420px at 95% 10%, rgba(15,23,42,.08), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
}

.hc2-head{ max-width: 980px; margin-bottom: 18px; }
.hc2-eyebrow{
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
  opacity:.65;
  margin:0 0 10px;
}
.hc2-title{
  margin:0 0 10px;
  font-size: clamp(28px, 3vw, 44px);
  line-height:1.08;
}
.hc2-subtitle{
  margin:0;
  opacity:.78;
  max-width: 80ch;
  line-height: 1.55;
}

.hc2-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hc2-card{
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,25,47,.10);
  box-shadow: 0 16px 46px rgba(10,25,47,.10);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hc2-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 64px rgba(10,25,47,.14);
}

.hc2-media{
  height: 210px;               /* aquí se luce la imagen */
  overflow:hidden;
  background: rgba(10,25,47,.04);
}
.hc2-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
  filter: contrast(1.03) saturate(1.05);
}

.hc2-body{ padding: 16px 16px 18px; }

.hc2-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.hc2-tag{
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,82,204,.10);
  border: 1px solid rgba(0,82,204,.18);
}
.hc2-mini{
  font-size: 12px;
  opacity:.7;
  font-weight: 700;
}

.hc2-h{
  margin: 6px 0 8px;
  font-size: 18px;
  line-height: 1.25;
}
.hc2-p{
  margin: 0 0 10px;
  opacity:.82;
  line-height: 1.5;
  font-size: 14.5px;
}

/* bullets más premium (sin puntos enormes) */
.hc2-list{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display:grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
}
.hc2-list li{
  position: relative;
  padding-left: 18px;
}
.hc2-list li::before{
  content: "•";
  position:absolute;
  left: 4px;
  top: 0;
  opacity: .55;
}

/* chips compactos */
.hc2-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.hc2-chips span{
  font-size: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(10,25,47,.10);
  background: rgba(10,25,47,.02);
  opacity:.88;
}

.hc2-actions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.hc2-link{
  text-decoration:none;
  font-weight: 900;
}
.hc2-link:hover{ text-decoration: underline; }

.hc2-btn{
  text-decoration:none;
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0b1f3a;
  color:#fff;
  border: 1px solid rgba(255,255,255,.10);
}
.hc2-btn:hover{ filter: brightness(1.06); }

/* Responsive */
@media (max-width: 980px){
  .hc2-grid{ grid-template-columns: 1fr; }
  .hc2-media{ height: 190px; }
}
/* =========================
   SERVICIOS V2 - DARK (JPM vibe)
   (pegar al final)
========================= */

.hc-services2{
  padding: 64px 0;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(0,82,204,.22), transparent 58%),
    radial-gradient(700px 420px at 92% 12%, rgba(30,64,175,.14), transparent 60%),
    linear-gradient(180deg, #071427 0%, #050f1d 45%, #040b16 100%);
  color: rgba(255,255,255,.92);
}

/* Grid “noise” sutil (como textura) */
.hc-services2::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .10;
  pointer-events:none;
  mask-image: radial-gradient(900px 520px at 18% 10%, #000 0%, transparent 70%);
}

/* Encabezado */
.hc2-eyebrow{ opacity:.72; color: rgba(255,255,255,.78); }
.hc2-title{ color: rgba(255,255,255,.96); }
.hc2-subtitle{ color: rgba(255,255,255,.74); }

/* Cards sobre fondo oscuro */
.hc2-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.hc2-card:hover{
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}

/* Imagen más “premium” en dark */
.hc2-media{
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.hc2-media img{
  filter: contrast(1.05) saturate(1.08);
}

/* Textos dentro card */
.hc2-mini{ color: rgba(255,255,255,.70); }
.hc2-h{ color: rgba(255,255,255,.94); }
.hc2-p{ color: rgba(255,255,255,.74); }

.hc2-list{ color: rgba(255,255,255,.78); }
.hc2-list li::before{ opacity:.60; }

/* Tag azul suave */
.hc2-tag{
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.30);
  color: rgba(255,255,255,.92);
}

/* Chips */
.hc2-chips span{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
}

/* Link / botón */
.hc2-link{
  color: rgba(255,255,255,.90);
}
.hc2-link:hover{ text-decoration: underline; }

.hc2-btn{
  background: #ffffff;
  color: #071427;
  border: 1px solid rgba(255,255,255,.18);
}
.hc2-btn:hover{ filter: brightness(0.95); }
/* ===== SERVICIOS: volver a light premium (split) ===== */

.hc-services{
  position: relative;
  padding: 56px 0;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(0,82,204,.10), transparent 58%),
    radial-gradient(700px 360px at 92% 18%, rgba(10,25,47,.06), transparent 60%),
    linear-gradient(180deg, rgba(10,25,47,.03), rgba(10,25,47,0));
}

/* quitar “líneas azules” que metimos antes */
.hc-svc-content::before{ display:none !important; }
.hc-svc-card::before{ display:none !important; }

.hc-services-head{ max-width: 980px; margin-bottom: 18px; }
.hc-eyebrow{
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
  opacity:.65;
  margin:0 0 10px;
}

.hc-svc-card{
  display:grid;
  grid-template-columns: 1.22fr .78fr;
  gap: 0;
  margin: 14px 0;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(10,25,47,.10);
  box-shadow: 0 16px 50px rgba(10,25,47,.10);
  overflow:hidden;
}

.hc-svc-card.hc-reverse{
  grid-template-columns: .78fr 1.22fr;
}

/* compactar un poco texto (premium) */
.hc-svc-content{ padding: 16px 18px; }
.hc-svc-h{ font-size: 19px; margin: 6px 0 8px; }
.hc-svc-lead{ font-size: 14.5px; opacity:.82; margin:0 0 10px; }
.hc-bullets{ font-size:14px; line-height:1.45; margin:0 0 12px; display:grid; gap:8px; }

/* chips finitos */
.hc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 10px; }
.hc-chip{
  font-size:12px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(10,25,47,.10);
  background: rgba(10,25,47,.02);
}

/* botones */
.hc-actions{ display:flex; align-items:center; gap:14px; margin-top: 6px; }
.hc-link{ font-weight:900; text-decoration:none; }
.hc-link:hover{ text-decoration:underline; }
.hc-btn{
  text-decoration:none;
  font-weight:900;
  padding:10px 14px;
  border-radius:999px;
  background:#0b1f3a;
  color:#fff;
}

/* imagen: que se vea “alta” y elegante (no aplastada) */
.hc-svc-media{ min-height: 280px; }
.hc-svc-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
  filter: contrast(1.03) saturate(1.05);
}

/* pill */
.hc-svc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.hc-kicker{ font-size:12px; letter-spacing:.18em; opacity:.65; }
.hc-pill{
  font-size:12px;
  font-weight:800;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(0,82,204,.10);
  border: 1px solid rgba(0,82,204,.18);
}

/* responsive */
@media (max-width: 980px){
  .hc-svc-card,
  .hc-svc-card.hc-reverse{
    grid-template-columns: 1fr;
  }
  .hc-svc-media{ min-height: 210px; }
}
/* ===== Servicios (split): 4 viñetas + más grande + imagen 40% ===== */

/* 1) Asegurar que NO se oculten viñetas (por si quedó la regla de “solo 3”) */
.hc-services .hc-bullets li{
  display: list-item !important;
}
.hc-services .hc-bullets li:nth-child(n+4){
  display: list-item !important; /* muestra desde la 4 en adelante */
}

/* 2) Más grande el bloque en general */
.hc-services{
  padding: 72px 0 !important; /* más aire arriba/abajo */
}

/* 3) Proporción 60/40 (texto/imagen) */
.hc-svc-card{
  grid-template-columns: 60% 40% !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 60px rgba(10,25,47,.12) !important;
}

.hc-svc-card.hc-reverse{
  grid-template-columns: 40% 60% !important;
}

/* 4) Card un poco más “alta” y contenido más generoso */
.hc-svc-content{
  padding: 22px 22px !important;
}

/* 5) Imagen más grande (más presencia, menos “aplastada”) */
.hc-svc-media{
  min-height: 340px !important;
}
.hc-svc-media img{
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 6) bullets más legibles con 4 puntos */
.hc-bullets{
  margin: 0 0 14px !important;
  gap: 10px !important;
}

/* Mobile mantiene una buena altura */
@media (max-width: 980px){
  .hc-svc-card,
  .hc-svc-card.hc-reverse{
    grid-template-columns: 1fr !important;
  }
  .hc-svc-media{
    min-height: 230px !important;
  }
}
/* ===== Servicios: proporción como tu captura (60/40) + tamaño normal ===== */

/* Proporción EXACTA */
.hc-svc-card{
  grid-template-columns: 60% 40% !important;
}

.hc-svc-card.hc-reverse{
  grid-template-columns: 40% 60% !important;
}

/* Tamaño del cuadro (sin exagerar) */
.hc-svc-content{
  padding: 18px 20px !important;   /* antes lo habíamos inflado */
}

/* Imagen: más “alta” y elegante (sin que se haga gigante) */
.hc-svc-media{
  min-height: 300px !important;     /* esto evita que se vea bajita/aplastada */
}

.hc-svc-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Mantener 4 viñetas visibles */
.hc-bullets li{ display: list-item !important; }

/* Si el texto se siente grande, lo compactamos un poquito */
.hc-svc-lead{ font-size: 14.5px !important; }
.hc-bullets{ font-size: 14px !important; line-height: 1.45 !important; }

/* Responsive */
@media (max-width: 980px){
  .hc-svc-card,
  .hc-svc-card.hc-reverse{
    grid-template-columns: 1fr !important;
  }
  .hc-svc-media{ min-height: 220px !important; }
}
/* ===== FIX DEFINITIVO: 60/40 real (texto/imagen) aunque haya CSS previo ===== */

/* Fuerza layout horizontal */
.hc-svc-card{
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* Texto = 60% */
.hc-svc-card > .hc-svc-content{
  flex: 0 0 60% !important;
  max-width: 60% !important;
}

/* Imagen = 40% */
.hc-svc-card > .hc-svc-media{
  flex: 0 0 40% !important;
  max-width: 40% !important;
  min-height: 300px !important;
}

/* Reverse (cuando le pones hc-reverse) */
.hc-svc-card.hc-reverse{
  flex-direction: row-reverse !important;
}

/* Imagen siempre “llena” bonito */
.hc-svc-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Responsive */
@media (max-width: 980px){
  .hc-svc-card{
    flex-direction: column !important;
  }
  .hc-svc-card > .hc-svc-content,
  .hc-svc-card > .hc-svc-media{
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
  .hc-svc-card > .hc-svc-media{
    min-height: 220px !important;
  }
}
/* Alternar imagen/texto en Servicios (desktop) sin tocar HTML */
@media (min-width: 981px){
  .hc-services .hc-svc-card:nth-of-type(even){
    flex-direction: row-reverse !important;
  }
}
/* Que NO se esconda la 4ta viñeta */
.hc-services .hc-bullets li{
  display: list-item !important;
}

/* Por si quedó una regla vieja que ocultaba desde la 4ta */
.hc-services .hc-bullets li:nth-child(n+4){
  display: list-item !important;
}
/* ===== SERVICIOS: alternar + imágenes mismo tamaño (desktop) ===== */

@media (min-width: 981px){

  /* Asegura layout consistente */
  .hc-services .hc-svc-card{
    display: flex !important;
    align-items: stretch !important;
    min-height: 340px !important;   /* <- clave: todas mismas alturas */
    overflow: hidden !important;
  }

  /* 60/40 fijo */
  .hc-services .hc-svc-card .hc-svc-content{
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }
  .hc-services .hc-svc-card .hc-svc-media{
    flex: 0 0 40% !important;
    max-width: 40% !important;
    min-height: 340px !important;   /* mismo alto que la card */
  }

  /* Alternado automático: 2,4,6... invierten */
  .hc-services .hc-svc-card:nth-child(odd){
    flex-direction: row !important;
  }

  /* Imagen siempre igual: llena el contenedor */
  .hc-services .hc-svc-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}

/* Mobile: stack normal */
@media (max-width: 980px){
  .hc-services .hc-svc-card{
    display: block !important;
    min-height: unset !important;
  }
  .hc-services .hc-svc-media{
    min-height: 220px !important;
  }
  .hc-services .hc-svc-content,
  .hc-services .hc-svc-media{
    max-width: 100% !important;
  }
}
/* ===== Igualar tamaño real de imágenes (la 1ra ya no se “verá más grande”) ===== */
@media (min-width: 981px){

  /* 1) TODAS las cards de servicios tienen el mismo alto */
  .hc-services .hc-svc-card{
    height: 360px !important;         /* ajusta si quieres: 340 / 360 / 380 */
    overflow: hidden !important;
    align-items: stretch !important;
  }

  /* 2) La columna de imagen ocupa el 40% y el alto completo */
  .hc-services .hc-svc-card .hc-svc-media{
    flex: 0 0 40% !important;
    max-width: 40% !important;
    height: 100% !important;
    min-height: unset !important;
  }

  /* 3) La imagen se estira al alto del contenedor, recortando parejo */
  .hc-services .hc-svc-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* 4) Texto 60% */
  .hc-services .hc-svc-card .hc-svc-content{
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }
}
/* =========================
   BENEFICIOS (look premium)
   ========================= */

#beneficios,
.hc-beneficios {
  position: relative;
  padding: 88px 0;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(9, 61, 128, .08), transparent 60%),
              radial-gradient(900px 500px at 90% 30%, rgba(0, 160, 220, .06), transparent 55%),
              linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  overflow: hidden;
}

/* blobs suaves */
#beneficios::before,
#beneficios::after,
.hc-beneficios::before,
.hc-beneficios::after{
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  pointer-events: none;
}

#beneficios::before,
.hc-beneficios::before{
  left: -180px;
  top: -160px;
  background: rgba(0, 140, 255, .18);
}
#beneficios::after,
.hc-beneficios::after{
  right: -220px;
  top: 120px;
  background: rgba(0, 180, 160, .12);
}

/* contenedor */
#beneficios .container,
.hc-beneficios .container{
  position: relative;
  z-index: 1;
}

/* subtítulo “BENEFICIOS” */
#beneficios .kicker,
.hc-beneficios .kicker{
  letter-spacing: .18em;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(11, 31, 59, .55);
  margin-bottom: 10px;
}

/* chips de arriba (10 / 3 / 30-60-90) */
#beneficios .benefit-metrics,
.hc-beneficios .benefit-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 18px;
}

#beneficios .metric,
.hc-beneficios .metric{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(11, 31, 59, .10);
  box-shadow: 0 10px 28px rgba(11, 31, 59, .06);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(6px);
}

#beneficios .metric-badge,
.hc-beneficios .metric-badge{
  min-width: 54px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #0b1f3b;
  background: linear-gradient(180deg, rgba(0,140,255,.18), rgba(0,140,255,.08));
  border: 1px solid rgba(0,140,255,.18);
}

#beneficios .metric-text,
.hc-beneficios .metric-text{
  font-weight: 650;
  color: rgba(11, 31, 59, .78);
}

/* grid de cards */
#beneficios .benefit-grid,
.hc-beneficios .benefit-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

#beneficios .benefit-card,
.hc-beneficios .benefit-card{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(11, 31, 59, .10);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 14px 40px rgba(11, 31, 59, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#beneficios .benefit-card:hover,
.hc-beneficios .benefit-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 56px rgba(11, 31, 59, .12);
  border-color: rgba(0, 140, 255, .22);
}

#beneficios .benefit-card h3,
.hc-beneficios .benefit-card h3{
  margin: 0 0 8px;
  font-size: 18px;
  color: #0b1f3b;
}

#beneficios .benefit-card p,
.hc-beneficios .benefit-card p{
  margin: 0;
  color: rgba(11, 31, 59, .72);
  line-height: 1.55;
  font-size: 14.5px;
}

/* responsive */
@media (max-width: 980px){
  #beneficios .benefit-metrics,
  .hc-beneficios .benefit-metrics{
    grid-template-columns: 1fr;
  }
  #beneficios .benefit-grid,
  .hc-beneficios .benefit-grid{
    grid-template-columns: 1fr;
  }
}
:root{
  --hc-navy:#0b1f3b;
  --hc-blue:#1f66ff;
  --hc-text:#0b1f3b;
  --hc-muted:#5a6b86;
  --hc-border:rgba(12, 32, 60, .10);
  --hc-bg1:#f5f8ff;
  --hc-bg2:#ffffff;
}

.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.beneficios-editorial{
  padding: 84px 0;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(31,102,255,.08), transparent 55%),
    radial-gradient(900px 500px at 90% 30%, rgba(11,31,59,.06), transparent 55%),
    linear-gradient(180deg, var(--hc-bg1), var(--hc-bg2));
  border-top: 1px solid var(--hc-border);
  border-bottom: 1px solid var(--hc-border);
}

.beneficios-grid{
  display: grid;
  grid-template-columns: 1.05fr 1.35fr .85fr;
  gap: 26px;
  align-items: start;
}

/* Intro (editorial) */
.beneficios-intro .eyebrow{
  letter-spacing: .22em;
  font-size: 12px;
  color: rgba(11,31,59,.55);
  margin: 0 0 10px;
}

.beneficios-intro h2{
  margin: 0 0 12px;
  color: var(--hc-text);
  font-size: 44px;
  line-height: 1.08;
}

.beneficios-intro .lead{
  margin: 0 0 18px;
  color: var(--hc-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 42ch;
}

.intro-divider{
  height: 1px;
  background: linear-gradient(90deg, rgba(11,31,59,.20), transparent);
  margin: 18px 0;
}

.mini-points{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.mini-points li{
  color: var(--hc-text);
  font-size: 14px;
  line-height: 1.55;
}
.mini-points strong{
  color: var(--hc-text);
}

/* Antes / Después */
.beneficios-compare{
  padding: 18px 18px 18px;
  border: 1px solid var(--hc-border);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px rgba(11,31,59,.06);
}

.compare-kicker{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(11,31,59,.55);
}

.compare-wrap{
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 16px;
  align-items: start;
}

.compare-divider{
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(11,31,59,.18), transparent);
}

.compare-col h3{
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--hc-text);
}

.compare-col ul{
  margin: 0;
  padding-left: 18px;
  color: var(--hc-muted);
  font-size: 14px;
  line-height: 1.6;
}
.compare-col li{ margin: 0 0 8px; }

.compare-col.before h3{ color: rgba(11,31,59,.75); }
.compare-col.after h3{ color: var(--hc-blue); }

.deliverables{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,31,59,.10);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,59,.12);
  background: rgba(245,248,255,.9);
  color: rgba(11,31,59,.75);
  font-size: 12.5px;
}

/* Tarjeta tipo JPM */
.beneficios-spotlight .spot-card{
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(11,31,59,.92), rgba(11,31,59,.98));
  color: #fff;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(11,31,59,.18);
  position: sticky;
  top: 92px;
}

.spot-eyebrow{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.72);
}

.spot-metric{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.spot-metric:first-of-type{ border-top: 1px solid rgba(255,255,255,.12); }

.metric-value{
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.metric-value.wide{
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  width: fit-content;
  background: rgba(255,255,255,.06);
}

.metric-title{
  font-weight: 700;
  font-size: 14px;
}
.metric-sub{
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.35;
}

.spot-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.spot-link:hover{
  background: rgba(255,255,255,.14);
}

/* Responsive */
@media (max-width: 980px){
  .beneficios-grid{
    grid-template-columns: 1fr;
  }
  .beneficios-spotlight .spot-card{
    position: static;
  }
  .beneficios-intro h2{
    font-size: 36px;
  }
  .compare-wrap{
    grid-template-columns: 1fr;
  }
  .compare-divider{ display: none; }
}
/* ====== BENEFICIOS: Ajustes de jerarquía y “aire” ====== */
.beneficios-intro h2{
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 18ch; /* evita que se haga “bloque” muy ancho */
  margin-bottom: 14px;
}

.beneficios-intro .lead{
  font-size: 17px;
  line-height: 1.7;
  max-width: 52ch;
}

.mini-points li{
  font-size: 14.5px;
}

/* Caja central “antes/después” un poco más elegante */
.beneficios-compare{
  padding: 20px 20px 18px;
}

.compare-col ul{
  font-size: 14.5px;
  line-height: 1.65;
}

/* Pills ligeramente más legibles */
.pill{
  font-size: 13px;
  padding: 8px 12px;
}

/* ====== Tarjeta oscura: contraste + tipografía ====== */
.beneficios-spotlight .spot-card{
  background: linear-gradient(180deg, rgba(11,31,59,.94), rgba(11,31,59,.99));
}

.spot-eyebrow{
  color: rgba(255,255,255,.82);
}

.metric-title{
  color: rgba(255,255,255,.92);
}

.metric-sub{
  color: rgba(255,255,255,.86);
  font-size: 13.5px;
}

.metric-value{
  color: #fff;
}

/* 30-60-90 con aire y legible */
.spot-metric.is-wide{
  grid-template-columns: 1fr;
  gap: 10px;
}

.metric-value.wide{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 22px;
  padding: 8px 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
}

.metric-value.wide span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-weight: 700;
}

/* Link CTA en tarjeta oscura más visible */
.spot-link{
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
}
.spot-link:hover{
  background: rgba(255,255,255,.16);
}

/* ====== Separador tipo “premium” ====== */
.hc-divider{
  padding: 26px 0 8px;
  background: linear-gradient(180deg, #ffffff, #ffffff);
}

.divider-line{
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,31,59,.18), transparent);
}

.divider-line span{
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(11,31,59,.65);
  background: #fff;
  border: 1px solid rgba(11,31,59,.10);
}

/* ====== FAQ ====== */
.faq-section{
  padding: 54px 0 84px;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(31,102,255,.06), transparent 58%),
    linear-gradient(180deg, #ffffff, #ffffff);
}

.faq-grid{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 26px;
  align-items: start;
}

.faq-intro .eyebrow{
  letter-spacing: .22em;
  font-size: 12px;
  color: rgba(11,31,59,.55);
  margin: 0 0 10px;
}

.faq-intro h3{
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.15;
  color: var(--hc-text);
  max-width: 22ch;
}

.faq-intro .lead{
  margin: 0 0 16px;
  color: var(--hc-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 52ch;
}

.faq-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 800;
  color: #fff;
  background: var(--hc-navy);
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(11,31,59,.18);
}
.faq-cta:hover{
  filter: brightness(1.06);
}

.faq-list{
  border: 1px solid rgba(11,31,59,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px rgba(11,31,59,.06);
  overflow: hidden;
}

.faq-item{
  border-top: 1px solid rgba(11,31,59,.10);
  padding: 0;
}
.faq-item:first-child{ border-top: 0; }

.faq-item summary{
  cursor: pointer;
  padding: 16px 18px;
  list-style: none;
  font-weight: 800;
  color: var(--hc-text);
  position: relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary::after{
  content: "＋";
  position: absolute;
  right: 18px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(11,31,59,.75);
  border: 1px solid rgba(11,31,59,.12);
  background: rgba(245,248,255,.9);
  font-weight: 900;
}

.faq-item[open] summary::after{
  content: "—";
}

.faq-body{
  padding: 0 18px 16px;
  color: var(--hc-muted);
  line-height: 1.7;
  font-size: 15px;
}

/* Responsive */
@media (max-width: 980px){
  .faq-grid{
    grid-template-columns: 1fr;
  }
}
/* ===== CONTACTO premium ===== */
.hc-contact{
  padding: 84px 0;
  background:
    radial-gradient(1100px 520px at 10% 0%, rgba(31,102,255,.08), transparent 55%),
    radial-gradient(900px 520px at 90% 35%, rgba(11,31,59,.06), transparent 55%),
    linear-gradient(180deg, #ffffff, #ffffff);
  border-top: 1px solid rgba(11,31,59,.10);
}

.hc-contact-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: start;
}

.hc-contact-copy h2{
  margin: 0 0 10px;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  color:#0b1f3b;
}
.hc-contact-copy .lead{
  margin: 0 0 18px;
  color: rgba(11,31,59,.72);
  line-height: 1.7;
  font-size: 16.5px;
  max-width: 60ch;
}

.hc-contact-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 18px;
}
.hc-mini-card{
  border: 1px solid rgba(11,31,59,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px rgba(11,31,59,.06);
  padding: 14px;
}
.hc-mini-title{
  font-weight: 900;
  color:#0b1f3b;
  margin-bottom: 6px;
}
.hc-mini-text{
  color: rgba(11,31,59,.70);
  line-height: 1.55;
  font-size: 14.5px;
}

.hc-contact-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.hc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  background:#0b1f3b;
  color:#fff;
  border: 1px solid rgba(255,255,255,.14);
}
.hc-btn.ghost{
  background: rgba(255,255,255,.0);
  color:#0b1f3b;
  border: 1px solid rgba(11,31,59,.18);
}
.hc-btn:hover{ filter: brightness(1.05); }

.hc-small{
  margin-top: 12px;
  color: rgba(11,31,59,.65);
}
.hc-small a{ color:#0b1f3b; font-weight: 800; text-decoration: none; }
.hc-small a:hover{ text-decoration: underline; }

/* Form */
.hc-form{
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(11,31,59,.10);
  box-shadow: 0 18px 50px rgba(11,31,59,.10);
  padding: 18px;
}
.hc-form-head h3{ margin:0 0 4px; color:#0b1f3b; }
.hc-form-head .muted{ margin:0 0 14px; color: rgba(11,31,59,.65); }

.hc-field{ margin-bottom: 12px; }
.hc-field label{
  display:block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,31,59,.58);
  margin-bottom: 6px;
  font-weight: 800;
}
.hc-field input,
.hc-field textarea,
.hc-field select{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(11,31,59,.14);
  padding: 12px 12px;
  font-size: 15px;
  outline: none;
  background: rgba(255,255,255,.92);
}
.hc-field input:focus,
.hc-field textarea:focus,
.hc-field select:focus{
  border-color: rgba(31,102,255,.55);
  box-shadow: 0 0 0 4px rgba(31,102,255,.12);
}

.hc-field.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hc-submit{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: none;
  background: #0b1f3b;
  color:#fff;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  margin-top: 6px;
}
.hc-submit:hover{ filter: brightness(1.05); }

.hc-form-note{
  margin: 10px 0 0;
  font-size: 12.5px;
  color: rgba(11,31,59,.60);
}

@media (max-width: 980px){
  .hc-contact-grid{ grid-template-columns: 1fr; }
  .hc-contact-cards{ grid-template-columns: 1fr; }
  .hc-field.two{ grid-template-columns: 1fr; }
}

/* =========================
   SERVICE PAGES (setup/mensual/expansion)
   Diseño consistente con Home
   ========================= */

.svc-hero{
  position: relative;
  padding: 74px 0 28px;
  overflow: hidden;
}
.svc-hero::before{
  content:"";
  position:absolute;
  inset:-160px -120px auto -120px;
  height: 460px;
  background:
    radial-gradient(520px 320px at 12% 35%, rgba(11,74,162,.12), transparent 62%),
    radial-gradient(520px 320px at 88% 22%, rgba(10,103,194,.10), transparent 62%),
    radial-gradient(520px 320px at 55% 95%, rgba(11,31,58,.06), transparent 62%);
  pointer-events:none;
}
.svc-hero .container{ position: relative; z-index: 1; }

.svc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(11,74,162,.88);
  background: var(--soft2);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 999px;
}

.svc-title{
  margin-top: 14px;
  font-size: clamp(34px, 3.3vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.svc-lead{
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
  max-width: 820px;
}

.svc-chips{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.svc-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11,74,162,.06);
  border: 1px solid rgba(11,74,162,.14);
  color: rgba(11,31,58,.90);
  font-weight: 650;
  font-size: 13px;
}
.svc-chip b{ color: rgba(11,31,58,.92); font-weight: 800; }

.svc-actions{
  margin-top: 18px;
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items:center;
}

.svc-section{
  padding: 44px 0;
}
.svc-section.soft{
  background: radial-gradient(1200px 420px at 50% 0%, rgba(11,74,162,.06), transparent 65%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.svc-grid-3{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.svc-card{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow2);
}
.svc-card h3{
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.svc-card p{
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.svc-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:start;
  margin-top: 16px;
}
.svc-panel{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow2);
}
.svc-panel h3{ margin:0 0 10px; font-size: 16px; letter-spacing:-.01em; }
.svc-panel .muted{ color: var(--muted); }

.svc-list{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:grid;
  gap: 10px;
}
.svc-list li{
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}
.svc-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-weight: 900;
  color: var(--blue2);
}

.svc-steps{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.svc-step{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: var(--shadow2);
}
.svc-step b{ color: var(--ink); }
.svc-step p{ margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height:1.45; }

.svc-cta{
  margin-top: 22px;
  border-radius: 22px;
  padding: 18px 18px;
  border: 1px solid rgba(11,74,162,.18);
  background: linear-gradient(135deg, #0b2f5f 0%, #0a67c2 100%);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  overflow:hidden;
  position: relative;
}
.svc-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.16) 0 2px, transparent 3px) 0 0/22px 22px;
  opacity: .20;
  pointer-events:none;
}
.svc-cta > *{ position: relative; z-index: 1; }
.svc-cta h3{ margin:0 0 6px; font-size: 16px; }
.svc-cta p{ margin:0; color: rgba(255,255,255,.86); font-size: 14px; }
.svc-cta .svc-cta-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content:flex-end;
}

@media (max-width: 980px){
  .svc-grid-3{ grid-template-columns: 1fr; }
  .svc-two{ grid-template-columns: 1fr; }
  .svc-steps{ grid-template-columns: 1fr; }
  .svc-cta{ flex-direction: column; align-items:flex-start; }
  .svc-cta .svc-cta-actions{ justify-content:flex-start; }
}
/* ============================
   Identificación / ¿Te pasa esto?
   ============================ */

.identification{
  position: relative;
  padding: 56px 0 60px;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(11,74,162,.09), transparent 62%),
    radial-gradient(900px 520px at 88% 8%, rgba(11,74,162,.06), transparent 60%),
    linear-gradient(#ffffff, #ffffff);
  border-top: 1px solid rgba(11,74,162,.08);
}

.identification .section-head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 14px auto;
}

.identification .eyebrow{
  display: inline-block;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(11,74,162,.88);
  background: rgba(11,74,162,.06);
  border: 1px solid rgba(11,74,162,.12);
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.identification .lead{
  margin-top: 10px;
  color: rgba(15,23,42,.65);
  font-size: 16px;
}

/* Grid */
.identification .pain-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Cards */
.identification .pain-card{
  background:
    linear-gradient(180deg, rgba(11,74,162,.06), transparent 55%),
    #fff;
  border: 1px solid rgba(11,74,162,.12);
  border-radius: 18px;
  padding: 18px 18px 16px 18px;
  box-shadow: 0 12px 40px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
}

.identification .pain-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 56px rgba(15,23,42,.10);
  border-color: rgba(11,74,162,.18);
}

.identification .pain-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: rgba(11,74,162,.95);
  background: rgba(11,74,162,.08);
  border: 1px solid rgba(11,74,162,.18);
  margin-bottom: 12px;
}

.identification .pain-card h3{
  font-size: 15px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,.92);
}

.identification .pain-card p{
  color: rgba(15,23,42,.62);
  font-size: 13.5px;
}

/* Callout azul */
.identification .pain-callout{
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, #0b2f5f 0%, #0a67c2 100%);
  color: #fff;
  box-shadow: 0 18px 60px rgba(15,23,42,.16);

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.identification .pain-callout::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.16) 0 2px, transparent 3px) 0 0/22px 22px;
  opacity: .22;
  pointer-events:none;
}

.identification .pain-copy,
.identification .pain-actions{
  position: relative;
  z-index: 1;
}

.identification .pain-callout h3{
  font-size: 16px;
  margin-bottom: 6px;
}

.identification .pain-callout p{
  color: rgba(255,255,255,.88);
  font-size: 13.5px;
  margin-bottom: 12px;
  max-width: 680px;
}

/* Bullets */
.identification .pain-bullets{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.identification .pain-bullets li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  white-space: nowrap;
}

.identification .pain-bullets li::before{
  content: "✓";
  width: 16px;
  height: 16px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800;
  font-size: 11px;
}

/* Botones a la derecha, en horizontal */
.identification .pain-actions{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

@media (max-width: 980px){
  .identification .pain-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px){
  .identification .pain-callout{ grid-template-columns: 1fr; }
  .identification .pain-actions{ justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 640px){
  .identification .pain-grid{ grid-template-columns: 1fr; }
}
/* ===========================
   Dropdown Servicios: no se cierra “rápido”
   =========================== */

.nav-dropdown{
  position: relative;
}

/* Estado oculto (suave, sin click-through) */
.nav-dropdown .dropdown{
  position: absolute;
  top: calc(100% + 8px);       /* separa visualmente */
  left: 0;
  min-width: 320px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;

  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index: 9999;
}

/* Estado abierto: hover en el padre o foco dentro (teclado/click) */
.nav-dropdown:hover .dropdown,
.nav-dropdown:focus-within .dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* “Puente invisible” para que el mouse no pierda el hover al bajar */
.nav-dropdown::after{
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 14px;               /* <- esto evita el cierre rápido */
}

/* Opcional: área clic/hover del link un poquito más cómoda */
.nav-dropdown > .nav-link{
  padding-bottom: 10px;
}
/* ==========================================================
   SERVICE PAGES – Compatibility layer (no rompe lo existente)
   Soporta: .service-* + .chips/.chip + tus estilos .svc-*
   ========================================================== */

/* Variables por servicio (opcional si luego quieres “toque único”) */
body.svc-setup    { --svc-accent: #0052cc; --svc-accent2:#27a6ff; }
body.svc-mensual  { --svc-accent: #0b1f3a; --svc-accent2:#0052cc; }
body.svc-expansion{ --svc-accent: #1d4ed8; --svc-accent2:#0b1f3a; }

/* Layout base */
.service-page{
  padding: 0 0 40px;
}

/* HERO (alias de .svc-hero) */
.service-hero{
  position: relative;
  padding: 110px 0 44px;
  overflow: hidden;
}
.service-hero::before{
  content:"";
  position:absolute; inset:-120px -120px auto -120px;
  height: 420px;
  background:
    radial-gradient(closest-side, rgba(0,82,204,.10), transparent 70%),
    radial-gradient(closest-side, rgba(11,31,58,.08), transparent 70%);
  pointer-events:none;
}
.service-hero .container{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 980px){
  .service-hero .container{ grid-template-columns: 1fr; }
}

/* Kicker + título */
.service-hero .kicker,
.service-hero .eyebrow{
  display:inline-flex;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,31,58,.70);
  margin-bottom: 10px;
}
.service-hero h1,
.service-hero h2{
  margin: 0 0 10px;
  line-height: 1.05;
}
.service-hero .lead{
  margin: 0 0 14px;
  opacity: .85;
  max-width: 62ch;
}

/* Chips (alias de .svc-chips) */
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,25,47,.10);
  background: rgba(10,25,47,.02);
  font-size: 13px;
  opacity: .9;
}

/* CTA en hero */
.service-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items:center;
  margin-top: 8px;
}

/* Botones compatibles con tu look (si no existen en la página) */
.service-actions .btn,
.service-actions a{
  text-decoration:none;
  font-weight: 800;
}

/* Secciones internas */
.service-section{
  padding: 34px 0;
}
.service-section.soft{
  background: rgba(0,82,204,.03);
  border-top: 1px solid rgba(10,25,47,.06);
  border-bottom: 1px solid rgba(10,25,47,.06);
}

/* Grid reusable */
.service-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .service-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.service-card{
  background: #fff;
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(10,25,47,.06);
  padding: 18px;
}
.service-card h3{ margin: 0 0 8px; }
.service-card ul{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

/* Mini separación “pro” entre bloques para que no se vea vacío */
.service-section .section-head{
  margin-bottom: 14px;
}
/* =========================================================
   SERVICE PAGE (Setup) — Premium skin (JPM vibe)
   Pegar al FINAL de styles.css
   ========================================================= */

:root{
  --svc-accent: #1d4ed8;   /* azul principal */
  --svc-accent2:#60a5fa;   /* azul claro */
  --svc-ink: #0b1f3a;
  --svc-muted: rgba(11,31,58,.70);
  --svc-line: rgba(11,31,58,.10);
  --svc-card: #ffffff;
  --svc-shadow: 0 22px 70px rgba(15,23,42,.10);
  --svc-radius: 18px;
}

/* ===== Layout base ===== */
.svc-wrap{
  position: relative;
}

.svc-section{
  padding: 56px 0;
}

.svc-section.soft{
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(29,78,216,.08), transparent 62%),
    radial-gradient(900px 420px at 85% 10%, rgba(96,165,250,.08), transparent 62%),
    linear-gradient(#fff, #fff);
  border-top: 1px solid var(--svc-line);
  border-bottom: 1px solid var(--svc-line);
}

.svc-head{
  max-width: 920px;
  margin: 0 0 18px;
}

.svc-kicker{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.14);
  padding: 8px 12px;
  border-radius: 999px;
}

.svc-title{
  margin: 12px 0 10px;
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.svc-lead{
  color: var(--svc-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 68ch;
}

/* ===== Hero ===== */
.svc-hero{
  padding: 110px 0 40px;
  position: relative;
  overflow: hidden;
}

.svc-hero::before{
  content:"";
  position:absolute;
  inset:-160px -140px auto -140px;
  height: 520px;
  background:
    radial-gradient(300px 260px at 18% 35%, rgba(29,78,216,.14), transparent 65%),
    radial-gradient(320px 280px at 85% 28%, rgba(96,165,250,.12), transparent 65%),
    radial-gradient(260px 240px at 55% 90%, rgba(11,31,58,.08), transparent 70%);
  pointer-events:none;
}

.svc-hero-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: center;
}

@media (max-width: 980px){
  .svc-hero-grid{ grid-template-columns: 1fr; }
}

/* chips */
.svc-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 16px;
}

.svc-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(10,25,47,.10);
  background: rgba(10,25,47,.02);
  color: var(--svc-ink);
  font-weight: 700;
  font-size: 13px;
}

.svc-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
  margin-top: 8px;
}

/* ===== Visual card (derecha) ===== */
.svc-visual{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 22px;
  box-shadow: var(--svc-shadow);
  padding: 16px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.svc-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 25%, rgba(29,78,216,.18) 0 2px, transparent 3px) 0 0/22px 22px;
  opacity: .12;
  pointer-events:none;
}

.svc-visual-top{
  position: relative;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.svc-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.06);
  font-weight: 800;
  font-size: 12px;
  color: rgba(29,78,216,.95);
}

.svc-mini{
  position: relative;
  background: #fff;
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 16px 50px rgba(15,23,42,.08);
}

.svc-mini h4{
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--svc-ink);
}

.svc-lines{
  display:grid;
  gap: 8px;
}

.svc-line{
  height: 10px;
  border-radius: 999px;
  background: rgba(10,25,47,.06);
  border: 1px solid rgba(10,25,47,.06);
  overflow:hidden;
  position: relative;
}

.svc-line::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: var(--w, 60%);
  background: linear-gradient(90deg, rgba(29,78,216,.85), rgba(96,165,250,.75));
  border-radius: 999px;
}

.svc-mini-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 980px){
  .svc-mini-grid{ grid-template-columns: 1fr; }
}

/* ===== Cards grid ===== */
.svc-grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .svc-grid-3{ grid-template-columns: 1fr; }
}

.svc-card{
  background: var(--svc-card);
  border: 1px solid rgba(10,25,47,.10);
  border-radius: var(--svc-radius);
  padding: 16px;
  box-shadow: 0 18px 58px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
}

.svc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(15,23,42,.10);
  border-color: rgba(29,78,216,.18);
}

.svc-card h3{
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--svc-ink);
}

.svc-card p{
  margin: 0;
  color: var(--svc-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ===== Timeline (Proceso mejorado) ===== */
.svc-steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 980px){
  .svc-steps{ grid-template-columns: 1fr; }
}

.svc-step{
  background:#fff;
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 58px rgba(15,23,42,.06);
  position: relative;
}

.svc-step .n{
  display:inline-grid;
  place-items:center;
  width: 40px; height: 40px;
  border-radius: 14px;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.18);
  color: rgba(29,78,216,.95);
  font-weight: 900;
  margin-bottom: 10px;
}

.svc-step b{
  display:block;
  margin-bottom: 6px;
  color: var(--svc-ink);
}

.svc-step span{
  color: var(--svc-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ===== CTA band ===== */
.svc-cta{
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, #0b2f5f 0%, #0a67c2 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 80px rgba(15,23,42,.16);

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.svc-cta p{
  margin: 0;
  color: rgba(255,255,255,.88);
}

.svc-cta-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}

/* ===== “Ejemplo de entrega” (mock) ===== */
.svc-delivery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 980px){
  .svc-delivery{ grid-template-columns: 1fr; }
}

.svc-preview{
  background:#fff;
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 58px rgba(15,23,42,.06);
}

.svc-preview .tag{
  display:inline-flex;
  font-weight: 800;
  font-size: 12px;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.14);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.svc-preview h4{
  margin: 0 0 8px;
  color: var(--svc-ink);
}

.svc-preview .thumb{
  border-radius: 14px;
  border: 1px solid rgba(10,25,47,.10);
  background:
    linear-gradient(180deg, rgba(29,78,216,.08), transparent 55%),
    #fff;
  padding: 12px;
}

.svc-preview .thumb .row{
  height: 10px;
  border-radius: 999px;
  background: rgba(10,25,47,.06);
  margin: 8px 0;
}
/* =========================================================
   Service page blocks: Checklist + FAQ (premium)
   ========================================================= */

.svc-split{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px){
  .svc-split{ grid-template-columns: 1fr; }
}

.svc-panel{
  background: #fff;
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 18px;
  box-shadow: 0 18px 58px rgba(15,23,42,.06);
  padding: 18px;
}

.svc-panel h3{
  margin: 0 0 8px;
  color: rgba(11,31,58,.92);
  font-size: 16px;
}

.svc-panel p{
  margin: 0 0 12px;
  color: rgba(11,31,58,.70);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Lista con checks */
.svc-check{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.svc-check li{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: rgba(11,31,58,.78);
  font-size: 13.5px;
  line-height: 1.5;
}

.svc-check li::before{
  content: "✓";
  width: 18px;
  height: 18px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(29,78,216,.10);
  border: 1px solid rgba(29,78,216,.20);
  color: rgba(29,78,216,.95);
  font-weight: 900;
  font-size: 12px;
  margin-top: 2px;
}

/* “Entrega” mini preview */
.svc-deliver-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

.svc-deliver-item{
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(29,78,216,.06), transparent 60%),
    #fff;
  padding: 14px;
}

.svc-deliver-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.svc-deliver-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.14);
  font-weight: 800;
  font-size: 12px;
  color: rgba(29,78,216,.95);
}

.svc-thumb{
  border-radius: 14px;
  border: 1px solid rgba(10,25,47,.10);
  background: #fff;
  padding: 10px;
}

.svc-thumb .row{
  height: 10px;
  border-radius: 999px;
  background: rgba(10,25,47,.06);
  margin: 8px 0;
  overflow: hidden;
  position: relative;
}

.svc-thumb .row::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: var(--w, 60%);
  background: linear-gradient(90deg, rgba(29,78,216,.85), rgba(96,165,250,.75));
  border-radius: 999px;
}

/* FAQ acordeón */
.svc-faq{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.svc-acc{
  border-radius: 16px;
  border: 1px solid rgba(10,25,47,.10);
  background: #fff;
  box-shadow: 0 18px 58px rgba(15,23,42,.06);
  overflow: hidden;
}

.svc-acc summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 800;
  color: rgba(11,31,58,.92);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.svc-acc summary::-webkit-details-marker{ display:none; }

.svc-acc summary::after{
  content:"+";
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(10,25,47,.10);
  background: rgba(10,25,47,.02);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: rgba(11,31,58,.75);
  flex: 0 0 auto;
  transition: transform .15s ease;
}

.svc-acc[open] summary::after{
  content:"—";
}

.svc-acc .svc-acc-body{
  padding: 0 16px 14px 16px;
  color: rgba(11,31,58,.72);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Botoncito de apoyo */
.svc-mini-cta{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
}
.svc-mini-cta p{
  margin: 0;
  color: rgba(11,31,58,.78);
  font-size: 13.5px;
}
/* ===== Qué decides con esto (bloque premium) ===== */
.svc-decide{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 12px;
}

@media (max-width: 980px){
  .svc-decide{ grid-template-columns: 1fr; }
}

.svc-decision{
  background: #fff;
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 58px rgba(15,23,42,.06);
  position: relative;
  overflow: hidden;
}

.svc-decision::before{
  content:"";
  position:absolute;
  inset:-60px -60px auto -60px;
  height: 180px;
  background:
    radial-gradient(220px 160px at 20% 35%, rgba(29,78,216,.10), transparent 60%),
    radial-gradient(220px 160px at 85% 40%, rgba(96,165,250,.10), transparent 60%);
  pointer-events:none;
}

.svc-decision-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
}

.svc-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.18);
  color: rgba(29,78,216,.95);
  font-weight: 900;
  font-size: 18px;
  flex: 0 0 auto;
}

.svc-decision h3{
  margin: 0;
  font-size: 15px;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.01em;
}

.svc-decision p{
  margin: 0;
  color: rgba(11,31,58,.72);
  font-size: 13.5px;
  line-height: 1.55;
  position: relative;
}

.svc-decision ul{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(11,31,58,.70);
  font-size: 13.5px;
  line-height: 1.55;
  position: relative;
  display:grid;
  gap: 6px;
}

/* mini franja “resultado” */
.svc-microband{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
}

.svc-microband b{
  color: rgba(11,31,58,.92);
}

.svc-microband span{
  color: rgba(11,31,58,.70);
  font-size: 13.5px;
}
/* FIX: texto roto por saltos/copias de PDF SOLO en el panel izquierdo (info mínima) */
#info-minima.svc-panel:first-child br{
  display: none !important;
}

/* También neutraliza cualquier regla rara de white-space/word-break */
#info-minima.svc-panel:first-child,
#info-minima.svc-panel:first-child *{
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
  hyphens: none;
}
/* =========================================================
   FIX definitivo: texto roto en .svc-check (solo esa lista)
   ========================================================= */

/* Reestructura la lista para que sea estable */
.svc-check{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

/* Convierte cada item a flex (más robusto que grid para texto mixto) */
.svc-check li{
  display: flex !important;
  gap: 12px;
  align-items: flex-start;

  /* clave: anula cualquier regla global que rompa palabras */
  white-space: normal !important;
  word-break: normal !important;       /* <- NO break-all */
  overflow-wrap: normal !important;    /* <- NO anywhere */
  hyphens: none !important;

  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(10,25,47,.10);
  background: #fff;
  box-shadow: 0 14px 44px rgba(15,23,42,.06);
  color: rgba(11,31,58,.76);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Asegura que el texto interno tampoco herede "break-all" */
.svc-check li *{
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Check a la izquierda (tu estilo actual) */
.svc-check li::before{
  content: "✓";
  width: 22px;
  height: 22px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(29,78,216,.10);
  border: 1px solid rgba(29,78,216,.20);
  color: rgba(29,78,216,.95);
  font-weight: 900;
  font-size: 12px;
  margin-top: 2px;
  flex: 0 0 auto;
}

/* El título en negrita arriba y el detalle abajo */
.svc-check li b{
  display: block;
  margin-bottom: 4px;
  color: rgba(11,31,58,.92);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.25;
}
/* =========================================================
   Sistema de fondos (variantes) para evitar repetición
   ========================================================= */

:root{
  --hc-accent: 29, 78, 216; /* azul base */
  --hc-ink: 11, 31, 58;
}

.svc-section{
  position: relative;
  overflow: hidden;
}

/* opcional: separador suave arriba de una sección */
.svc-section.sep::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(11,31,58,.08);
  opacity: .65;
}

.bg-plain{ background:#fff; }

.bg-soft{
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(var(--hc-accent), .08), transparent 62%),
    radial-gradient(900px 420px at 85% 10%, rgba(96,165,250,.08), transparent 62%),
    #fff;
}

.bg-dots{
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(var(--hc-accent), .07), transparent 62%),
    radial-gradient(900px 420px at 85% 10%, rgba(96,165,250,.06), transparent 62%),
    radial-gradient(rgba(11,31,58,.08) 1px, transparent 1px);
  background-size: auto, auto, 18px 18px;
  background-position: 0 0, 0 0, 0 0;
  background-color: #fff;
}

.bg-grid{
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(var(--hc-accent), .07), transparent 62%),
    repeating-linear-gradient(
      0deg,
      rgba(11,31,58,.04),
      rgba(11,31,58,.04) 1px,
      transparent 1px,
      transparent 26px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(11,31,58,.04),
      rgba(11,31,58,.04) 1px,
      transparent 1px,
      transparent 26px
    );
  background-color: #fff;
}

.bg-sheen{
  background:
    linear-gradient(120deg,
      rgba(var(--hc-accent), .06) 0%,
      rgba(255,255,255,0) 40%,
      rgba(var(--hc-accent), .04) 100%
    ),
    #fff;
}
/* ===== Lo que cambia (flow) ===== */
.hc-change-head{
  max-width: 820px;
  margin-bottom: 18px;
}
.hc-change-title{
  margin: 8px 0 8px;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: rgba(11,31,58,1);
}
.hc-change-lead{
  margin: 0;
  color: rgba(11,31,58,.72);
  font-size: 16.5px;
  line-height: 1.6;
}

/* grid */
.hc-change-flow{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  position: relative;
}

/* cards */
.hc-change-card{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 48px rgba(11,31,58,.08);
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}

/* subtle top glow per type */
.hc-change-card.is-before::before,
.hc-change-card.is-after::before,
.hc-change-card.is-result::before{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(700px 220px at 10% 0%,
    rgba(29,78,216,.10), transparent 55%);
  opacity: .85;
  pointer-events:none;
}
.hc-change-card.is-after::before{
  background: radial-gradient(700px 220px at 10% 0%,
    rgba(96,165,250,.12), transparent 55%);
}
.hc-change-card.is-result::before{
  background: radial-gradient(700px 220px at 10% 0%,
    rgba(29,78,216,.14), transparent 55%);
}

/* header row */
.hc-change-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.hc-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.18);
  color: rgba(11,31,58,.90);
}
.hc-icon{
  font-size: 18px;
  opacity: .9;
}

/* content */
.hc-change-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  color: rgba(11,31,58,1);
  position: relative;
  z-index: 1;
}
.hc-bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,31,58,.74);
  line-height: 1.55;
  font-size: 14.5px;
  position: relative;
  z-index: 1;
}
.hc-bullets li{ margin: 6px 0; }

/* “imanes” / chips */
.hc-magnets{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.hc-magnet{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  color: rgba(11,31,58,.86);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,31,58,.12);
  box-shadow: 0 10px 22px rgba(11,31,58,.06);
}

/* arrows between cards (desktop) */
.hc-change-card:not(:last-child)::after{
  content:"";
  position:absolute;
  top: 50%;
  right: -10px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.55)),
    linear-gradient(180deg, rgba(29,78,216,.30), rgba(29,78,216,.10));
  border: 1px solid rgba(29,78,216,.22);
  box-shadow: 0 16px 30px rgba(11,31,58,.10);
}

.hc-change-card:not(:last-child)::before
  /* dejamos el glow del card, no el arrow */


/* quote block */
.hc-quote{
  margin-top: 18px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(11,31,58,.06);
  border: 1px solid rgba(11,31,58,.10);
  position: relative;
  overflow: hidden;
}
.hc-quote::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(700px 240px at 10% 0%,
    rgba(29,78,216,.12), transparent 60%);
  opacity: .8;
  pointer-events:none;
}
.hc-quote-mark{
  position:absolute;
  top: -10px;
  left: 14px;
  font-size: 72px;
  line-height: 1;
  color: rgba(29,78,216,.18);
  font-weight: 800;
}
.hc-quote-text{
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(11,31,58,.88);
  font-weight: 600;
  max-width: 920px;
}
.hc-quote-sub{
  margin-top: 8px;
  position: relative;
  z-index: 1;
  color: rgba(11,31,58,.60);
  font-size: 13px;
  font-weight: 600;
}

/* responsive */
@media (max-width: 980px){
  .hc-change-flow{ grid-template-columns: 1fr; }
  .hc-change-card:not(:last-child)::after{ display:none; }
}
/* =========================================
   SETUP HERO — Más creativo / premium
   (pegar al FINAL de styles.css)
   ========================================= */

.svc-setup .svc-hero--setup{
  position: relative;
  overflow: hidden;

  /* Fondo con profundidad (no “blanco plano”) */
  background:
    radial-gradient(900px 520px at 10% 5%, rgba(29,78,216,.12), transparent 62%),
    radial-gradient(780px 520px at 92% 12%, rgba(96,165,250,.12), transparent 62%),
    linear-gradient(180deg, rgba(11,31,58,.03), rgba(11,31,58,0) 58%),
    #fff;

  padding-bottom: 62px; /* espacio para la onda */
}

/* Capa de patrón ultra sutil */
.svc-setup .svc-hero--setup::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(rgba(11,31,58,.10) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .10;

  /* Enmascarado para que se note más arriba y se pierda */
  mask-image: radial-gradient(900px 480px at 35% 20%, #000 0%, transparent 70%);
}

/* Decoraciones (orbes + sheen + ticker) */
.svc-setup .svc-hero-decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
}

/* Orbes */
.svc-setup .svc-hero-decor .orb{
  position:absolute;
  border-radius: 999px;
  filter: blur(2px);
  opacity: .9;
  transform: translateZ(0);
  animation: orbFloat 10s ease-in-out infinite;
}

.svc-setup .svc-hero-decor .orb-a{
  width: 320px; height: 320px;
  left: -90px; top: 120px;
  background: radial-gradient(circle at 30% 30%, rgba(29,78,216,.26), rgba(29,78,216,0) 65%);
  animation-duration: 12s;
}

.svc-setup .svc-hero-decor .orb-b{
  width: 260px; height: 260px;
  right: -70px; top: 70px;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.22), rgba(96,165,250,0) 65%);
  animation-duration: 14s;
}

.svc-setup .svc-hero-decor .orb-c{
  width: 220px; height: 220px;
  left: 42%; bottom: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(11,31,58,.16), rgba(11,31,58,0) 70%);
  animation-duration: 16s;
}

@keyframes orbFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* Sheen diagonal (tipo banca) */
.svc-setup .svc-hero-decor .grid-sheen{
  position:absolute;
  inset: -120px -120px auto -120px;
  height: 420px;
  background:
    linear-gradient(120deg,
      rgba(29,78,216,.10) 0%,
      rgba(255,255,255,0) 45%,
      rgba(96,165,250,.08) 100%
    );
  opacity: .55;
}

/* Ticker inferior discreto */
.svc-setup .svc-ticker{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;

  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,.65);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 14px 34px rgba(11,31,58,.10);
  backdrop-filter: blur(10px);

  color: rgba(11,31,58,.74);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
}

/* Asegurar que el contenido del hero quede sobre las decoraciones */
.svc-setup .svc-hero--setup .container{
  position: relative;
  z-index: 1;
}

/* Onda inferior */
.svc-setup .svc-hero-wave{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  width:100%;
  height: 82px;
  z-index: 1;
}

.svc-setup .svc-hero-wave path{
  fill: #ffffff; /* como tu siguiente sección */
  opacity: 1;
}

/* Detalle: chips más “glass” para que se sienta menos plano */
.svc-setup .svc-chip{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}
/* Onda más sutil (evita “franja blanca” que se ve como corte) */
.svc-setup .svc-hero-wave{
  height: 46px;           /* más bajita */
  opacity: 1;
}

.svc-setup .svc-hero-wave path{
  fill: #f6f9fc;          /* mismo tono “soft” */
}
/* FIX final: que nada se vea tapado por la onda */
.svc-setup .svc-hero--setup{
  padding-bottom: 110px;  /* más espacio antes de la wave */
}

.svc-setup .svc-ticker{
  bottom: 46px;   /* más abajo (si quieres más, prueba 40px o 36px) */
  z-index: 5;
}


/* Baja un poco la wave para que no se meta visualmente */
.svc-setup .svc-hero-wave{
  bottom: -14px;          /* empuja hacia abajo */
  z-index: 1;
  pointer-events: none;
}

/* =========================================
   MOCKUP: Excel + entregables (Setup)
   ========================================= */

.svc-setup .mock-window{
  margin-top: 14px;
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 46px rgba(11,31,58,.12);
  overflow: hidden;
}

.svc-setup .mock-topbar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.85);
}

.svc-setup .mock-dots{
  display:flex;
  gap: 6px;
}
.svc-setup .mock-dots span{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(11,31,58,.18);
}
.svc-setup .mock-title{
  font-weight: 700;
  font-size: 13px;
  color: rgba(11,31,58,.88);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-setup .mock-pill{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,74,162,.16);
  background: rgba(11,74,162,.10);
  color: #0b4aa2;
}

.svc-setup .mock-body{
  padding: 14px;
  background:
    radial-gradient(800px 320px at 20% 0%, rgba(29,78,216,.10), transparent 60%),
    #fff;
}

/* KPI chips */
.svc-setup .mock-kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.svc-setup .kpi{
  border-radius: 14px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.92);
  padding: 10px 10px;
}
.svc-setup .kpi-label{
  font-size: 12px;
  color: rgba(81,96,122,.95);
  font-weight: 700;
  margin-bottom: 6px;
}
.svc-setup .kpi-value{
  font-size: 16px;
  letter-spacing: -0.2px;
  font-weight: 900;
  color: rgba(11,31,58,.92);
}

/* Zona “Excel grid” */
.svc-setup .mock-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 10px;
}
.svc-setup .mock-chart,
.svc-setup .mock-table{
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.10);
  background:
    repeating-linear-gradient(0deg, rgba(11,31,58,.05), rgba(11,31,58,.05) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(11,31,58,.05), rgba(11,31,58,.05) 1px, transparent 1px, transparent 20px),
    #ffffff;
  padding: 10px;
  overflow: hidden;
}
.svc-setup .chart-head,
.svc-setup .table-head{
  font-weight: 800;
  font-size: 12px;
  color: rgba(11,31,58,.82);
  margin-bottom: 10px;
}

/* “Barras” del gráfico */
.svc-setup .bars{
  display:flex;
  align-items:flex-end;
  gap: 8px;
  height: 84px;
  padding: 6px 4px 2px;
}
.svc-setup .bars span{
  width: 14px;
  height: var(--h);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(96,165,250,.55));
  box-shadow: 0 10px 18px rgba(11,31,58,.10);
}

/* “Tabla” */
.svc-setup .rows{
  display:grid;
  gap: 8px;
}
.svc-setup .row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.svc-setup .row span{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,31,58,.12);
}
.svc-setup .row span:last-child{
  background: rgba(10,103,194,.18);
}

/* Cards de entregables */
.svc-setup .mock-files{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}

.svc-setup .file-card{
  display:flex;
  gap: 12px;
  align-items:center;
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(255,255,255,.80);
  box-shadow: 0 12px 26px rgba(11,31,58,.08);
}

.svc-setup .file-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(246,249,252,.9);
  color: rgba(11,31,58,.82);
}
.svc-setup .file-ico.pdf{
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.18);
  color: rgba(185,28,28,.92);
}
.svc-setup .file-ico.xls{
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.18);
  color: rgba(21,128,61,.95);
}

.svc-setup .file-title{
  font-weight: 900;
  font-size: 14px;
  color: rgba(11,31,58,.92);
}
.svc-setup .file-sub{
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(81,96,122,.92);
}

/* Responsive */
@media (max-width: 980px){
  .svc-setup .mock-kpis{ grid-template-columns: 1fr; }
  .svc-setup .mock-grid{ grid-template-columns: 1fr; }
}
/* =========================================
   COMPACTAR mockup (para que no se vea gigante)
   ========================================= */

.svc-setup .svc-visual{
  max-width: 560px;         /* limita el “tamaño” visual */
}

/* Hace el bloque un poco más compacto sin deformar */
.svc-setup .mock-window{
  border-radius: 20px;
}

.svc-setup .mock-topbar{
  padding: 10px 12px;
}

.svc-setup .mock-title{
  font-size: 12.5px;
}

.svc-setup .mock-pill{
  padding: 5px 9px;
  font-size: 11.5px;
}

.svc-setup .mock-body{
  padding: 12px;            /* antes 14px */
}

/* KPI más compactos */
.svc-setup .mock-kpis{
  gap: 8px;
  margin-bottom: 10px;
}

.svc-setup .kpi{
  padding: 9px 9px;
  border-radius: 13px;
}

.svc-setup .kpi-label{
  font-size: 11.5px;
  margin-bottom: 5px;
}

.svc-setup .kpi-value{
  font-size: 14px;          /* antes 16px */
}

/* Chart y tabla más compactos */
.svc-setup .mock-grid{
  gap: 8px;
}

.svc-setup .mock-chart,
.svc-setup .mock-table{
  padding: 9px;
  border-radius: 14px;
}

.svc-setup .bars{
  height: 72px;             /* antes 84px */
  gap: 7px;
}

.svc-setup .bars span{
  width: 12px;
}

/* Cards de archivos más chicos */
.svc-setup .mock-files{
  gap: 9px;
}

.svc-setup .file-card{
  padding: 10px 10px;
  border-radius: 14px;
  gap: 10px;
}

.svc-setup .file-ico{
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 11px;
}

.svc-setup .file-title{
  font-size: 13.5px;
}

.svc-setup .file-sub{
  font-size: 12px;
}

/* =========================================
   Preview gráficos en los cards (PDF/XLS)
   ========================================= */

.svc-setup .file-meta{
  flex: 1;                  /* empuja el preview a la derecha */
}

.svc-setup .file-preview{
  width: 140px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.95);
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 8px 10px;
  overflow: hidden;
}

/* PDF: líneas tipo “resumen” */
.svc-setup .file-preview--pdf .p-line{
  height: 6px;
  border-radius: 999px;
  background: rgba(11,31,58,.14);
}

.svc-setup .file-preview--pdf .w80{ width: 80%; }
.svc-setup .file-preview--pdf .w60{ width: 60%; }
.svc-setup .file-preview--pdf .w70{ width: 70%; }

/* XLS: mini barras tipo gráfico */
.svc-setup .file-preview--xls{
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 8px;

  /* grid sutil (excel vibes) */
  background:
    repeating-linear-gradient(0deg, rgba(11,31,58,.05), rgba(11,31,58,.05) 1px, transparent 1px, transparent 16px),
    repeating-linear-gradient(90deg, rgba(11,31,58,.05), rgba(11,31,58,.05) 1px, transparent 1px, transparent 16px),
    rgba(246,249,252,.95);
  padding: 8px 10px;
}

.svc-setup .file-preview--xls .x-bar{
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(96,165,250,.55));
  box-shadow: 0 10px 16px rgba(11,31,58,.10);
}

/* alturas */
.svc-setup .file-preview--xls .h55{ height: 55%; }
.svc-setup .file-preview--xls .h80{ height: 80%; }
.svc-setup .file-preview--xls .h62{ height: 62%; }
.svc-setup .file-preview--xls .h90{ height: 90%; }

/* Responsive: en móvil que no se apachurre */
@media (max-width: 520px){
  .svc-setup .file-preview{
    width: 110px;
  }
}
/* ================================
   Excel chrome: ribbon + formula + sheets
   ================================ */

.svc-setup .mock-ribbon{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.75);
}

.svc-setup .mock-ribbon .tab{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(11,31,58,.70);
  border: 1px solid transparent;
  background: transparent;
}
.svc-setup .mock-ribbon .tab.active{
  color: #0b4aa2;
  background: rgba(11,74,162,.10);
  border-color: rgba(11,74,162,.14);
}

.svc-setup .mock-formula{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.92);
  min-width: 320px;
  max-width: 420px;
  overflow:hidden;
}

.svc-setup .mock-formula .fx{
  font-weight: 900;
  color: rgba(11,31,58,.65);
  font-size: 12px;
}
.svc-setup .mock-formula .ref{
  font-weight: 900;
  font-size: 12px;
  color: #0b4aa2;
  background: rgba(11,74,162,.10);
  border: 1px solid rgba(11,74,162,.14);
  padding: 4px 8px;
  border-radius: 999px;
}
.svc-setup .mock-formula .formula{
  font-size: 12px;
  color: rgba(11,31,58,.75);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* KPI subtexto (para que no se vean “vacíos”) */
.svc-setup .kpi-sub{
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(81,96,122,.90);
}

/* Sheets abajo */
.svc-setup .mock-sheets{
  display:flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.75);
}

.svc-setup .mock-sheets .sheet{
  font-size: 12px;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(11,31,58,.10);
  color: rgba(11,31,58,.70);
  background: rgba(255,255,255,.80);
}

.svc-setup .mock-sheets .sheet.active{
  color: #0b4aa2;
  border-color: rgba(11,74,162,.18);
  background: rgba(11,74,162,.10);
}

/* En pantallas pequeñas, que no explote el ribbon */
@media (max-width: 980px){
  .svc-setup .mock-formula{ display:none; }
}
/* ================================
   Columna izquierda más premium
   ================================ */

.svc-setup .svc-hero-left{
  display:grid;
  gap: 14px;
}

/* Panel glass */
.svc-setup .svc-hero-panel{
  padding: 18px 18px;
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(11,31,58,.10);
}

/* Mini cards abajo del panel (para que no se vea “solo texto”) */
.svc-setup .svc-hero-mini{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.svc-setup .mini-card{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.85);
  box-shadow: 0 12px 26px rgba(11,31,58,.08);
}

.svc-setup .mini-top{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(81,96,122,.92);
  margin-bottom: 6px;
}

.svc-setup .mini-main{
  font-size: 14px;
  font-weight: 900;
  color: rgba(11,31,58,.92);
}

.svc-setup .mini-sub{
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(81,96,122,.92);
}

@media (max-width: 980px){
  .svc-setup .svc-hero-mini{ grid-template-columns: 1fr; }
}
/* FIX: títulos en mock-chart / mock-table no se cortan feo */
.svc-setup .mock-chart,
.svc-setup .mock-table{
  min-width: 0; /* importante en grids */
}

.svc-setup .chart-head,
.svc-setup .table-head{
  display: block;
  max-width: 100%;
  padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* en vez de “corte” */
}
/* ==========================
   Previews más detallados
   ========================== */

/* PDF: portada + líneas + bullets */
.svc-setup .file-preview--pdf{
  position: relative;
  gap: 6px;
}

.svc-setup .file-preview--pdf .p-cap{
  height: 8px;
  width: 46%;
  border-radius: 999px;
  background: rgba(220,38,38,.22);
  border: 1px solid rgba(220,38,38,.18);
}

.svc-setup .file-preview--pdf .p-line{
  height: 6px;
  border-radius: 999px;
  background: rgba(11,31,58,.14);
}

.svc-setup .file-preview--pdf .w88{ width: 88%; }
.svc-setup .file-preview--pdf .w70{ width: 70%; }
.svc-setup .file-preview--pdf .w80{ width: 80%; }

.svc-setup .file-preview--pdf .p-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(11,31,58,.12);
  box-shadow: 14px 0 0 rgba(11,31,58,.12), 28px 0 0 rgba(11,31,58,.12);
}

/* XLS: mini tabla + celda resaltada + sparkline */
.svc-setup .file-preview--xls{
  display: grid;
  grid-template-columns: 1fr 56px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;

  background:
    repeating-linear-gradient(0deg, rgba(11,31,58,.05), rgba(11,31,58,.05) 1px, transparent 1px, transparent 16px),
    repeating-linear-gradient(90deg, rgba(11,31,58,.05), rgba(11,31,58,.05) 1px, transparent 1px, transparent 16px),
    rgba(246,249,252,.95);
}

.svc-setup .xls-mini{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.svc-setup .xls-mini .cell{
  height: 10px;
  border-radius: 8px;
  background: rgba(11,31,58,.12);
}

.svc-setup .xls-mini .cell.head{
  background: rgba(10,103,194,.18);
}

.svc-setup .xls-mini .cell.hl{
  background: rgba(10,103,194,.30);
  border: 1px solid rgba(10,103,194,.22);
}

/* Sparkline derecha */
.svc-setup .xls-spark{
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(11,31,58,.10);
  background:
    linear-gradient(135deg, rgba(10,103,194,.0) 0%,
                           rgba(10,103,194,.18) 35%,
                           rgba(10,103,194,.0) 70%),
    rgba(255,255,255,.70);
  box-shadow: 0 10px 18px rgba(11,31,58,.08);
}
/* ==========================
   Lado izquierdo: “Resultados clave” elegante
   ========================== */

.svc-setup .svc-keyout{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.svc-setup .ko{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;

  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(11,31,58,.08);
}

.svc-setup .ko-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  font-weight: 900;
  background: rgba(11,74,162,.10);
  border: 1px solid rgba(11,74,162,.14);
}

.svc-setup .ko-txt b{
  display:block;
  font-size: 14px;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.2px;
}

.svc-setup .ko-txt span{
  display:block;
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(81,96,122,.92);
}
/* Íconos serios (sin emojis) */
.svc-setup .ko-svg{
  width: 22px;
  height: 22px;
  stroke: #0b4aa2;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Mock grid: en vez de 2 cajitas angostas, 1 columna (full width) */
.svc-setup .mock-grid{
  grid-template-columns: 1fr !important;
}

/* Asegura que los títulos se lean completos */
.svc-setup .chart-head,
.svc-setup .table-head{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
/* Tag elegante a la derecha (reemplaza previews) */
.svc-setup .file-tag{
  font-size: 12px;
  font-weight: 800;
  color: rgba(81,96,122,.95);
  background: rgba(246,249,252,.95);
  border: 1px solid rgba(11,31,58,.10);
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Por si quedó CSS viejo de previews, lo apagamos */
.svc-setup .file-preview{
  display: none !important;
}
/* =========================
   SETUP — Ajustes mock Excel
   ========================= */

/* Fuerza 2 columnas para los widgets (Tendencia/Resumen) */
.svc-setup .mock-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

/* Caja bonita (por si tus widgets usan estos contenedores) */
.svc-setup .mock-widget{
  min-width: 0;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 28px rgba(11,31,58,.08);
}

.svc-setup .mock-widget .widget-title{
  font-size: 12px;
  font-weight: 700;
  color: rgba(11,31,58,.85);
  margin-bottom: 8px;
}

/* En móvil: vuelve a 1 columna */
@media (max-width: 520px){
  .svc-setup .mock-grid{ grid-template-columns: 1fr; }
}
/* File cards dentro del panel derecho */
.svc-setup .svc-visual .file-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  opacity: 1;
  filter: none;
}

/* Por si alguno trae clases “muted” */
.svc-setup .svc-visual .file-card.muted,
.svc-setup .svc-visual .file-card.is-muted,
.svc-setup .svc-visual .file-card.disabled,
.svc-setup .svc-visual .file-card.is-disabled{
  opacity: 1;
  filter: none;
}
.svc-setup .file-badges{
  margin-top: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.svc-setup .file-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(29,78,216,.08);
  color: rgba(29,78,216,.95);
  border: 1px solid rgba(29,78,216,.18);
}
/* FORZAR Tendencia + Resumen en 2 columnas */
.svc-setup .mock-body .mock-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch;
}

/* En móvil sí se apilan */
@media (max-width: 520px){
  .svc-setup .mock-body .mock-grid{
    grid-template-columns: 1fr !important;
  }
}
/* Archivos: SIEMPRE uno encima del otro */
.svc-setup .svc-visual .mock-files{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

/* Asegura que cada card ocupe todo el ancho */
.svc-setup .svc-visual .mock-files .file-card{
  width: 100%;
}
/* ================================
   SETUP - EXCEL MOCK (fix cortes)
   ================================ */

.svc-visual .sheet{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(15,23,42,.07);
}

.svc-visual .sheet-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(10,25,47,.02);
  border-bottom: 1px solid rgba(10,25,47,.08);
}

.svc-visual .sheet-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0; /* CLAVE para que no se corte texto */
}

.svc-visual .sheet-dots{
  display:flex;
  gap: 8px;
  flex: 0 0 auto;
}
.svc-visual .sheet-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(10,25,47,.18);
}

.svc-visual .sheet-title{
  font-weight: 850;
  color: rgba(11,31,58,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.svc-visual .sheet-pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.18);
  background: rgba(29,78,216,.07);
  font-weight: 850;
  color: rgba(29,78,216,.92);
  flex: 0 0 auto;
}

.svc-visual .sheet-tabs{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(10,25,47,.08);
  overflow:auto;
}

.svc-visual .sheet-tab{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(10,25,47,.10);
  background: rgba(10,25,47,.02);
  font-weight: 800;
  color: rgba(11,31,58,.70);
  white-space: nowrap;
  flex: 0 0 auto;
}
.svc-visual .sheet-tab.is-active{
  border-color: rgba(29,78,216,.22);
  background: rgba(29,78,216,.08);
  color: rgba(29,78,216,.95);
}

.svc-visual .sheet-tools{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}
.svc-visual .sheet-fx{
  font-weight: 900;
  color: rgba(11,31,58,.55);
}
.svc-visual .sheet-cell{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,25,47,.10);
  background: rgba(10,25,47,.02);
  font-weight: 850;
  color: rgba(11,31,58,.75);
}

.svc-visual .sheet-body{
  padding: 12px;
  background: radial-gradient(420px 240px at 20% 20%, rgba(29,78,216,.06), transparent 60%);
}

.svc-visual .sheet-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.svc-visual .sheet-kpi{
  background: rgba(10,25,47,.02);
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 14px;
  padding: 10px 10px 9px;
  min-width: 0;
}

.svc-visual .sheet-kpi .k{
  font-weight: 850;
  color: rgba(11,31,58,.70);
  font-size: 12.5px;
  margin-bottom: 6px;
}
.svc-visual .sheet-kpi .v{
  font-weight: 950;
  color: rgba(11,31,58,.92);
  font-size: 18px;
  letter-spacing: -0.2px;
}
.svc-visual .sheet-kpi .s{
  margin-top: 4px;
  font-weight: 750;
  color: rgba(11,31,58,.62);
  font-size: 12.5px;
}

/* ✅ AQUI está el fix para que NO se corten y queden horizontales */
.svc-visual .sheet-panels{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.svc-visual .sheet-panel{
  background: #fff;
  border: 1px solid rgba(10,25,47,.10);
  border-radius: 14px;
  padding: 12px;
  min-width: 0;     /* CLAVE */
  overflow: hidden; /* CLAVE */
}

.svc-visual .sheet-panel h5{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,31,58,.65);
  font-weight: 900;
}

.svc-visual .sheet-chart{
  height: 86px;
  display:flex;
  align-items:flex-end;
  gap: 6px;
}
.svc-visual .sheet-bar{
  flex: 1 1 0;
  min-width: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(29,78,216,.85), rgba(96,165,250,.35));
  box-shadow: 0 10px 24px rgba(29,78,216,.12);
}

.svc-visual .sheet-summary{
  display:grid;
  gap: 10px;
}

.svc-visual .sheet-row{
  display:flex;
  align-items:center;
  gap: 10px;
}

.svc-visual .sheet-line{
  height: 10px;
  border-radius: 999px;
  background: rgba(10,25,47,.10);
}
.svc-visual .sheet-line.b{
  background: rgba(29,78,216,.18);
}

/* ✅ Archivos: uno debajo del otro */
.svc-visual .sheet-files{
  display:grid;
  gap: 10px;
}

.svc-visual .sheet-file{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(10,25,47,.10);
  min-width: 0;
}

.svc-visual .sheet-file-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.svc-visual .sheet-file-ico{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: 12px;
  flex: 0 0 auto;
  border: 1px solid rgba(10,25,47,.10);
}

.svc-visual .sheet-file-ico.pdf{
  background: rgba(239,68,68,.08);
  color: rgba(185,28,28,.92);
  border-color: rgba(239,68,68,.22);
}
.svc-visual .sheet-file-ico.xls{
  background: rgba(34,197,94,.09);
  color: rgba(21,128,61,.95);
  border-color: rgba(34,197,94,.22);
}

.svc-visual .sheet-file-meta{
  min-width: 0;
}
.svc-visual .sheet-file-title{
  font-weight: 900;
  color: rgba(11,31,58,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-visual .sheet-file-sub{
  margin-top: 2px;
  color: rgba(11,31,58,.62);
  font-weight: 650;
  font-size: 12.5px;
}

/* Responsive: que no se apriete en móvil */
@media (max-width: 520px){
  .svc-visual .sheet-kpis{ grid-template-columns: 1fr; }
  .svc-visual .sheet-panels{ grid-template-columns: 1fr; }
}
/* =========================================
   FONDO PREMIUM (VISIBLE) - patrón + textura
   ========================================= */

/* 1) Fondo base del body */
body.service-page{
  background: #f6f9fc;
}

/* 2) PATRÓN grande detrás de todo (se nota) */
body.service-page::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image: url("/assets/bg-lines.svg");
  background-size: cover;
  background-position: center top;
  opacity: .55;            /* súbelo/bájalo si lo quieres más/menos visible */
  pointer-events: none;
  z-index: -2;
}

/* 3) Textura (quita lo “plano/blanco”) */
body.service-page::after{
  content:"";
  position: fixed;
  inset: 0;
  background-image: url("/assets/noise.svg");
  background-size: 240px 240px;
  opacity: .16;            /* si quieres más textura: .22 */
  pointer-events: none;
  z-index: -1;
}

/* 4) Para que las secciones no tapen el fondo con blanco sólido:
      en vez de blanco 100%, quedan “glass” y dejan ver el patrón */
.svc-section.bg-plain,
.svc-section.bg-soft,
.svc-section.bg-dots,
.svc-section.bg-grid,
.svc-section.bg-sheen{
  background-color: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(10px);
}

/* 5) Un borde suave arriba/abajo para que se “sienta diseñado” */
.svc-section{
  border-top: 1px solid rgba(11,31,58,.06);
  border-bottom: 1px solid rgba(11,31,58,.06);
}
/* =========================================================
   MENSUAL — look premium (scoped)  |  Hercob
   (No afecta Setup ni Expansión)
========================================================= */
body.svc-mensual{
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(var(--hc-accent), .12), transparent 62%),
    radial-gradient(1100px 520px at 88% 8%, rgba(96,165,250,.12), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

/* HERO con “sheet” elegante */
.svc-mensual .svc-hero{
  position: relative;
  overflow: hidden;
}
.svc-mensual .svc-hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(rgba(11,31,58,.08) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .18;
  pointer-events:none;
  mask-image: radial-gradient(circle at 50% 25%, rgba(0,0,0,1) 0%, rgba(0,0,0,.75) 35%, rgba(0,0,0,0) 72%);
}

/* Card del hero: más “banca” */
.svc-mensual .svc-hero-card--mensual{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 22px 70px rgba(11,31,58,.12);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* ---------- Cockpit (mock tablero) ---------- */
.svc-mensual .m-cockpit{
  padding: 16px 16px 12px;
}

.svc-mensual .m-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.svc-mensual .m-pill{
  display:inline-flex;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  color: rgba(11,31,58,.88);
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(255,255,255,.85);
}
.svc-mensual .m-pill--ghost{
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.22);
  color: rgba(11,31,58,.85);
}

.svc-mensual .m-window{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.90);
  overflow: hidden;
}

.svc-mensual .m-window-bar{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(11,31,58,.08);
  background: rgba(248,252,255,.92);
}
.svc-mensual .m-dots{
  display:flex;
  gap: 6px;
}
.svc-mensual .m-dots span{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(11,31,58,.16);
}
.svc-mensual .m-title{
  flex: 1;
  font-weight: 800;
  color: rgba(11,31,58,.88);
  font-size: 13.5px;
  letter-spacing: .01em;
}
.svc-mensual .m-chip{
  font-weight: 800;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,.22);
  background: rgba(59,130,246,.08);
  color: rgba(11,31,58,.85);
}

.svc-mensual .m-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(59,130,246,.06), rgba(255,255,255,0));
}
.svc-mensual .m-kpi{
  border-radius: 14px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.88);
  padding: 10px 10px;
}
.svc-mensual .m-kpi .k{
  font-weight: 800;
  color: rgba(11,31,58,.65);
  font-size: 12.5px;
}
.svc-mensual .m-kpi .v{
  margin-top: 4px;
  font-weight: 900;
  color: rgba(11,31,58,.92);
  font-size: 18px;
  letter-spacing: -0.02em;
}
.svc-mensual .m-kpi .s{
  margin-top: 2px;
  font-weight: 700;
  color: rgba(11,31,58,.55);
  font-size: 12px;
}

.svc-mensual .m-main{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
  padding: 0 12px 12px;
}
.svc-mensual .m-card{
  border-radius: 14px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.90);
  padding: 10px 10px;
}
.svc-mensual .m-card-h{
  font-weight: 900;
  color: rgba(11,31,58,.88);
  font-size: 13px;
  margin-bottom: 8px;
}

.svc-mensual .m-spark{
  height: 80px;
  border-radius: 12px;
  border: 1px solid rgba(11,31,58,.08);
  background:
    repeating-linear-gradient(90deg, rgba(11,31,58,.05), rgba(11,31,58,.05) 1px, transparent 1px, transparent 26px),
    repeating-linear-gradient(0deg, rgba(11,31,58,.05), rgba(11,31,58,.05) 1px, transparent 1px, transparent 26px);
  display:flex;
  align-items:flex-end;
  gap: 10px;
  padding: 10px;
  overflow:hidden;
}
.svc-mensual .m-spark span{
  width: 16px;
  height: var(--h);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(59,130,246,.90), rgba(59,130,246,.22));
}

.svc-mensual .m-todo{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.svc-mensual .m-todo li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-weight: 700;
  color: rgba(11,31,58,.78);
  font-size: 12.5px;
  line-height: 1.35;
}
.svc-mensual .m-todo li i{
  width: 12px; height: 12px;
  border-radius: 4px;
  margin-top: 2px;
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(59,130,246,.28);
  flex: 0 0 12px;
}

.svc-mensual .m-card-sub{
  margin-top: 8px;
  font-weight: 800;
  color: rgba(11,31,58,.50);
  font-size: 12px;
}

.svc-mensual .m-footer{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(11,31,58,.08);
  background: rgba(248,252,255,.92);
}
.svc-mensual .m-tab{
  font-weight: 800;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.12);
  color: rgba(11,31,58,.70);
  background: rgba(255,255,255,.9);
}
.svc-mensual .m-tab.is-on{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.25);
  color: rgba(11,31,58,.86);
}

/* Puntos del hero: que se vean premium */
.svc-mensual .svc-hero-points{
  margin: 12px 16px 0 !important;
  padding: 0 !important;
}
.svc-mensual .svc-hero-points li{
  color: rgba(11,31,58,.78) !important;
  font-weight: 650;
}

/* ---------- Nueva sección Ritmo mensual ---------- */
.svc-mensual .m-rhythm{
  position: relative;
}
.svc-mensual .m-rhythm-head{
  max-width: 860px;
}
.svc-mensual .m-rhythm-title{
  margin: 8px 0 8px;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: rgba(11,31,58,1);
}

.svc-mensual .m-rhythm-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}
.svc-mensual .m-rhythm-grid::before{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 22px;
  height: 2px;
  background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(11,31,58,.10));
  border-radius: 999px;
  opacity: .9;
}
.svc-mensual .m-rhythm-item{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 55px rgba(11,31,58,.08);
  backdrop-filter: blur(8px);
  padding: 16px 16px 14px;
  overflow: hidden;
}
.svc-mensual .m-rhythm-n{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(11,31,58,.86);
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.22);
  margin-bottom: 10px;
}
.svc-mensual .m-rhythm-b b{
  display:block;
  color: rgba(11,31,58,.92);
  font-size: 14.5px;
}
.svc-mensual .m-rhythm-b span{
  display:block;
  margin-top: 4px;
  color: rgba(11,31,58,.64);
  font-weight: 650;
  font-size: 13px;
}

/* Ajustes visuales en “Qué incluye” para que no se vea plano */
.svc-mensual .svc-grid-3 .svc-card{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 55px rgba(11,31,58,.08);
  backdrop-filter: blur(6px);
  overflow: hidden;
  position: relative;
}
.svc-mensual .svc-grid-3 .svc-card::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(700px 240px at 10% 0%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(700px 240px at 90% 0%, rgba(var(--hc-accent), .08), transparent 60%);
  opacity: .8;
  pointer-events:none;
}
.svc-mensual .svc-grid-3 .svc-card > *{
  position: relative;
}

/* “Lo que cambia” más fino (sin parecer app) */
.svc-mensual .svc-three .svc-card.accent{
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 18px 55px rgba(11,31,58,.08);
}
.svc-mensual .svc-quote{
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 55px rgba(11,31,58,.08);
}

/* Responsive */
@media (max-width: 980px){
  .svc-mensual .m-kpis{
    grid-template-columns: 1fr;
  }
  .svc-mensual .m-main{
    grid-template-columns: 1fr;
  }
  .svc-mensual .m-rhythm-grid{
    grid-template-columns: 1fr;
  }
  .svc-mensual .m-rhythm-grid::before{
    display:none;
  }
}
/* =========================================
   MENSUAL — HOTFIX HERO (layout + tamaño + lista)
   ========================================= */

/* 1) Quitar el “vacío” a la derecha: forzar 2 columnas desde 901px
   (tu CSS general baja a 1 columna en 980px; aquí lo ajustamos solo para mensual) */
@media (min-width: 901px){
  body.svc-mensual .svc-hero-grid{
    grid-template-columns: 1.05fr .95fr !important;
    align-items: start !important;
  }
  body.svc-mensual .svc-hero-left{
    padding-top: 8px; /* evita sensación de “amontonado” */
  }
}

/* 2) Cuando SÍ esté en 1 columna (<=900px), que no quede pegado a la izquierda */
@media (max-width: 900px){
  body.svc-mensual .svc-hero-right--mensual{
    justify-self: center;
  }
}

/* 3) El card derecho: limitar tamaño para que NO se vea gigante */
body.svc-mensual .svc-hero-card--mensual{
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 18px; /* para que la lista NO se corte abajo */
}

/* Si tu mock vive dentro de un wrapper tipo “m-cockpit” o similar, lo escalamos.
   (Si no existe esa clase, no pasa nada) */
body.svc-mensual .svc-hero-card--mensual .m-cockpit{
  transform: scale(.92);
  transform-origin: top center;
}

/* Si tu mock usa “svc-illustration--mensual” como contenedor, también lo limitamos */
body.svc-mensual .svc-hero-card--mensual .svc-illustration--mensual{
  max-width: 640px;
  margin: 0 auto 10px;
}

/* 4) Formato premium de la lista (adiós bullets crudos) */
body.svc-mensual .svc-hero-card--mensual .svc-hero-points{
  list-style: none;
  padding: 0;
  margin: 14px 18px 10px;
  display: grid;
  gap: 10px;
}

body.svc-mensual .svc-hero-card--mensual .svc-hero-points li{
  position: relative;
  padding-left: 28px;
  font-weight: 650;
  color: rgba(11,31,58,.82);
  line-height: 1.35;
}

/* check elegante */
body.svc-mensual .svc-hero-card--mensual .svc-hero-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.22);
}

body.svc-mensual .svc-hero-card--mensual .svc-hero-points li::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 7px;
  height: 4px;
  border-left: 2px solid rgba(29,78,216,.85);
  border-bottom: 2px solid rgba(29,78,216,.85);
  transform: rotate(-45deg);
}

/* “Formatos aceptados…” que se vea tipo nota, no texto suelto */
body.svc-mensual .svc-hero-card--mensual .svc-hero-stat{
  margin: 10px 18px 0;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.92);
  color: rgba(11,31,58,.70);
  font-weight: 650;
  font-size: 13px;
}
/* =========================
   MENSUAL: Dashboard izquierda / texto derecha (solo hero)
   ========================= */
.svc-mensual .svc-hero .svc-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: start;
}

/* Cambiamos el orden: cuadro primero (izquierda), texto segundo (derecha) */
.svc-mensual .svc-hero .svc-hero-right{
  order: 1;
}
.svc-mensual .svc-hero .svc-hero-left{
  order: 2;
}

/* La lista ya no “flota” feo: se ve premium del lado derecho */
.svc-mensual .svc-hero-points--side{
  margin-top: 16px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.svc-mensual .svc-hero-points--side li{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(10,25,47,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 12px 40px rgba(10,25,47,.06);
}

/* Responsive */
@media (max-width: 980px){
  .svc-mensual .svc-hero .svc-hero-grid{
    grid-template-columns: 1fr;
  }
  .svc-mensual .svc-hero .svc-hero-right,
  .svc-mensual .svc-hero .svc-hero-left{
    order: initial;
  }
}
/* ===============================
   Gestión Mensual – panel derecho premium
   =============================== */

.mensual-value{
  margin-top: 24px;
}

.mensual-eyebrow{
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(30,64,175,.9);
}

.mensual-cards{
  display: grid;
  gap: 14px;
}

.mensual-card{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 14px 40px rgba(15,23,42,.06);
  backdrop-filter: blur(10px);
}

.mensual-card--highlight{
  border-color: rgba(30,64,175,.25);
  background: linear-gradient(
    180deg,
    rgba(30,64,175,.06),
    rgba(255,255,255,.85)
  );
}

.mensual-card-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.mensual-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e40af;
  flex-shrink: 0;
}

.mensual-card h4{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.mensual-card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(15,23,42,.75);
}
/* MENSUAL: subir "Qué obtienes" y compactar */
.mensual-value{
  margin-top: 10px !important;     /* antes estaba muy abajo */
}

.mensual-eyebrow{
  margin-bottom: 10px !important;
}

.mensual-cards{
  gap: 12px !important;            /* menos separación entre cards */
}

.mensual-card{
  padding: 14px 16px !important;   /* un poco más compacto */
}

.mensual-card p{
  margin-top: 6px;
}
/* MENSUAL: cards en 2 columnas (solo en desktop) */
@media (min-width: 1100px){
  .mensual-cards{
    grid-template-columns: 1fr 1fr;
  }

  /* La card destacada ocupa todo el ancho abajo, se ve elegante */
  .mensual-card--highlight{
    grid-column: 1 / -1;
  }
}
/* MENSUAL: reducir espacio bajo botones */
.svc-mensual .svc-actions{
  margin-bottom: 10px !important;
}
/* =========================================
   MENSUAL — Executive Brief (JP-style)
   ========================================= */

.svc-mensual .mensual-brief{
  position: relative;
  padding: 8px 6px 6px;
}

/* Encabezado */
.svc-mensual .mb-tag{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.18);
  background: rgba(29,78,216,.06);
  font-weight: 800;
  letter-spacing: .10em;
  font-size: 12px;
  color: rgba(29,78,216,.95);
}

.svc-mensual .mb-title{
  margin: 12px 0 10px;
  font-size: clamp(38px, 3.1vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.svc-mensual .mb-lead{
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(15,23,42,.72);
  font-weight: 520;
}

/* Key facts (tabla ejecutiva) */
.svc-mensual .mb-facts{
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.svc-mensual .mb-fact{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid rgba(15,23,42,.08);
}
.svc-mensual .mb-fact:first-child{ border-top: 0; }

.svc-mensual .mb-fact .k{
  font-weight: 800;
  color: rgba(15,23,42,.65);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.svc-mensual .mb-fact .v{
  font-weight: 800;
  color: rgba(15,23,42,.88);
  font-size: 14px;
}

/* CTA (serio, tipo banca) */
.svc-mensual .mb-cta{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.svc-mensual .mb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.72);
  color: rgba(15,23,42,.86);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 45px rgba(15,23,42,.06);
  backdrop-filter: blur(10px);
}
.svc-mensual .mb-btn--primary{
  border-color: rgba(29,78,216,.20);
  background: linear-gradient(180deg, rgba(29,78,216,.10), rgba(255,255,255,.80));
}

/* Secciones */
.svc-mensual .mb-section{
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px);
  padding: 14px;
}

.svc-mensual .mb-h{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 12px;
}
.svc-mensual .mb-hk{
  font-weight: 900;
  color: rgba(15,23,42,.90);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
.svc-mensual .mb-hs{
  font-weight: 700;
  color: rgba(15,23,42,.55);
  font-size: 13px;
}

/* Entregables (executive blocks) */
.svc-mensual .mb-deliverables{
  display:grid;
  gap: 10px;
}

.svc-mensual .mb-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
}

.svc-mensual .mb-badge{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.18);
  flex: 0 0 34px;
}

.svc-mensual .mb-body b{
  display:block;
  color: rgba(15,23,42,.92);
  font-weight: 900;
  font-size: 14px;
}
.svc-mensual .mb-body span{
  display:block;
  margin-top: 2px;
  color: rgba(15,23,42,.70);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.45;
}

/* Cadencia (horizontal, seria) */
.svc-mensual .mb-flow{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.svc-mensual .mb-step{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  padding: 12px;
}
.svc-mensual .mb-step span{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.18);
  margin-bottom: 8px;
}
.svc-mensual .mb-step b{
  display:block;
  font-weight: 900;
  color: rgba(15,23,42,.90);
  font-size: 13.5px;
}
.svc-mensual .mb-step em{
  display:block;
  margin-top: 2px;
  font-style: normal;
  color: rgba(15,23,42,.62);
  font-weight: 650;
  font-size: 12.5px;
}

/* Trust strip */
.svc-mensual .mb-trust{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.svc-mensual .mb-trust-item{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.58);
  padding: 12px;
  backdrop-filter: blur(10px);
}
.svc-mensual .mb-trust-item b{
  display:block;
  font-weight: 900;
  color: rgba(15,23,42,.90);
  font-size: 13px;
}
.svc-mensual .mb-trust-item span{
  display:block;
  margin-top: 4px;
  color: rgba(15,23,42,.66);
  font-weight: 650;
  font-size: 12.5px;
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 980px){
  .svc-mensual .mb-flow{
    grid-template-columns: 1fr;
  }
  .svc-mensual .mb-trust{
    grid-template-columns: 1fr;
  }
}
/* ==============================
   MENSUAL — Entregables debajo del dashboard (compact pro)
   ============================== */

.svc-mensual .mensual-deliverables{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
}

.svc-mensual .md-head{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}

.svc-mensual .md-k{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(15,23,42,.80);
}

.svc-mensual .md-s{
  font-weight: 700;
  font-size: 13px;
  color: rgba(15,23,42,.55);
}

/* Grid ligero (3 columnas) */
.svc-mensual .md-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Card mini: menos padding, más “banca” */
.svc-mensual .md-item{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  padding: 12px 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  box-shadow: 0 12px 36px rgba(15,23,42,.06);
}

/* Badge discreto */
.svc-mensual .md-badge{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.18);
  flex: 0 0 34px;
}

.svc-mensual .md-body b{
  display:block;
  font-weight: 900;
  font-size: 13.5px;
  color: rgba(15,23,42,.92);
}

.svc-mensual .md-body span{
  display:block;
  margin-top: 2px;
  font-weight: 650;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(15,23,42,.65);
}

/* Responsive */
@media (max-width: 980px){
  .svc-mensual .md-grid{
    grid-template-columns: 1fr;
  }
}

/* ==============================
   MENSUAL — Soporte mini (solo 1 línea)
   ============================== */

.svc-mensual .mb-support-mini{
  margin-top: 12px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  color: rgba(15,23,42,.75);
  font-weight: 750;
  font-size: 13px;
}

.svc-mensual .mb-support-mini b{
  color: rgba(15,23,42,.88);
  font-weight: 900;
}

.svc-mensual .mbs-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(29,78,216,.95);
  box-shadow: 0 0 0 4px rgba(29,78,216,.12);
}
/* Trust strip debajo del hero para que no descuadre columnas */
.svc-mensual .mb-trust--below{
  margin-top: 18px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 980px){
  .svc-mensual .mb-trust--below{
    padding: 0 16px;
  }
}
/* Hace que ambas columnas se estiren parejo en alto */
.svc-mensual .svc-hero-grid{
  align-items: stretch;
}
.svc-mensual .svc-hero-left,
.svc-mensual .svc-hero-right{
  height: 100%;
}
/* =========================
   Mensual: Soporte como botón y subir layout
   ========================= */

/* Soporte como tercer "botón" igualito */
.svc-mensual .mb-btn--support{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.svc-mensual .mb-btn--support b{
  font-weight: 900;
  color: rgba(15,23,42,.90);
}

/* Sube todo el lado derecho (menos aire arriba) */
.svc-mensual .mb-title{
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

.svc-mensual .mb-lead{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* Si tuvieras algún bloque que deja mucho aire antes del CTA */
.svc-mensual .mb-cta{
  margin-top: 12px !important;
}

/* Opcional: compacta un poco el hero para que todo “suba” */
.svc-mensual .svc-hero{
  padding-top: 48px; /* si tienes mucho padding arriba, baja este número */
}
/* =========================
   Soporte pill (estilo original, no botón)
   ========================= */

.svc-mensual .mb-cta{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; /* por si en móvil baja */
}

.svc-mensual .mb-support-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);

  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.75);
  white-space: nowrap;
}

.svc-mensual .mb-support-pill b{
  font-weight: 900;
  color: rgba(15,23,42,.9);
}

.svc-mensual .mb-support-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(29,78,216,.95);
  box-shadow: 0 0 0 4px rgba(29,78,216,.12);
}
/* ==================================
   CTA mensual: que quepan 2 botones + soporte en 1 fila (desktop)
   ================================== */

.svc-mensual .mb-cta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;           /* en escritorio NO baja */
}

/* Botones un poco más compactos */
.svc-mensual .mb-cta .mb-btn{
  padding: 13px 17px;          /* antes más grande */
  font-size: 13px;
}

/* Pill de soporte más compacto para que entre */
.svc-mensual .mb-support-pill{
  padding: 8px 11px;
  font-size: 12px;
  gap: 6px;
}

/* Punto más discreto (ahorra espacio) */
.svc-mensual .mb-support-dot{
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}

/* Si aun así está muy justo, esto permite que el texto no se “estire” */
.svc-mensual .mb-support-pill b{
  font-weight: 900;
}

/* En pantallas chicas sí permitimos que baje */
@media (max-width: 900px){
  .svc-mensual .mb-cta{
    flex-wrap: wrap;
  }
}

/* =========================================================
   MENSUAL — Secciones premium (Ritmo + Incluye)
   ========================================================= */

.svc-mensual .m2-section{
  padding: 84px 0;
  position: relative;
  overflow: hidden;
}

.svc-mensual .m2-wrap{
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

/* Fondo con color/patrón visible */
.svc-mensual .m2-ritmo{
  background:
    radial-gradient(900px 500px at 18% 10%, rgba(29,78,216,.10), transparent 60%),
    radial-gradient(700px 420px at 86% 22%, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(180deg, rgba(241,246,255,.85), rgba(255,255,255,.92));
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.svc-mensual .m2-incluye{
  background:
    radial-gradient(800px 520px at 70% 0%, rgba(29,78,216,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,249,255,.92));
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* Layout */
.svc-mensual .m2-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}

/* Copy */
.svc-mensual .m2-kicker{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.20);
  background: rgba(29,78,216,.08);
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 12px;
  color: rgba(29,78,216,.95);
}

.svc-mensual .m2-title{
  margin: 14px 0 10px;
  font-size: clamp(34px, 2.8vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.svc-mensual .m2-sub{
  margin: 0;
  max-width: 78ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(15,23,42,.72);
  font-weight: 650;
}

/* Timeline */
.svc-mensual .m2-timeline{
  margin-top: 22px;
  display: grid;
  gap: 12px;
  position: relative;
  padding-left: 14px;
}

.svc-mensual .m2-timeline:before{
  content:"";
  position:absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(29,78,216,.35), rgba(29,78,216,.05));
}

.svc-mensual .m2-step{
  display:flex;
  gap: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  padding: 16px 16px;
  box-shadow: 0 18px 60px rgba(15,23,42,.06);
}

.svc-mensual .m2-step-n{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.10);
  border: 1px solid rgba(29,78,216,.20);
  flex: 0 0 38px;
}

.svc-mensual .m2-step-b h3{
  margin: 1px 0 4px;
  font-size: 15px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
}

.svc-mensual .m2-step-b p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(15,23,42,.66);
  font-weight: 650;
}

.svc-mensual .m2-step-b p b{
  color: rgba(15,23,42,.88);
  font-weight: 900;
}

/* Art block */
.svc-mensual .m2-art-card{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(12px);
  box-shadow: 0 26px 90px rgba(15,23,42,.10);
  overflow: hidden;
}

.svc-mensual .m2-art-top{
  padding: 14px 14px 10px;
  display:flex;
  gap: 10px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, rgba(29,78,216,.06), rgba(255,255,255,0));
}

.svc-mensual .m2-pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  font-weight: 850;
  font-size: 13px;
  color: rgba(15,23,42,.78);
}
.svc-mensual .m2-pill--soft{
  border-color: rgba(29,78,216,.18);
  background: rgba(29,78,216,.08);
  color: rgba(29,78,216,.92);
}

.svc-mensual .m2-art-body{
  padding: 14px;
}

.svc-mensual .m2-svg{
  width: 100%;
  height: auto;
  display:block;
}

.svc-mensual .m2-art-foot{
  margin-top: 12px;
  display:flex;
  gap: 10px;
}

.svc-mensual .m2-mini{
  flex: 1;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.74);
  padding: 10px 12px;
}

.svc-mensual .m2-mini-k{
  display:block;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(15,23,42,.55);
}
.svc-mensual .m2-mini-v{
  display:block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 850;
  color: rgba(15,23,42,.85);
}

.svc-mensual .m2-note{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.60);
  padding: 12px 14px;
  color: rgba(15,23,42,.70);
  font-weight: 650;
  box-shadow: 0 18px 60px rgba(15,23,42,.06);
}

/* Incluye */
.svc-mensual .m2-inc-head{
  margin-bottom: 16px;
}

.svc-mensual .m2-inc-title{
  margin: 0;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.svc-mensual .m2-inc-sub{
  margin: 8px 0 0;
  font-size: 15px;
  color: rgba(15,23,42,.70);
  font-weight: 650;
}

.svc-mensual .m2-inc-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.svc-mensual .m2-feature{
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(10px);
  padding: 18px;
  box-shadow: 0 22px 70px rgba(15,23,42,.08);
  position: relative;
}

.svc-mensual .m2-feature--accent{
  border-color: rgba(29,78,216,.18);
  background: linear-gradient(180deg, rgba(29,78,216,.10), rgba(255,255,255,.80));
}

.svc-mensual .m2-ic{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.10);
  border: 1px solid rgba(29,78,216,.18);
  margin-bottom: 10px;
}
.svc-mensual .m2-ic svg{ width: 22px; height: 22px; }

.svc-mensual .m2-feature h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 950;
  color: rgba(15,23,42,.92);
}

.svc-mensual .m2-feature p{
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(15,23,42,.66);
  font-weight: 650;
}

.svc-mensual .m2-meta{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  font-weight: 750;
  color: rgba(15,23,42,.70);
  font-size: 13px;
}
.svc-mensual .m2-meta b{
  color: rgba(15,23,42,.90);
  font-weight: 950;
  margin-left: 4px;
}

/* Proof block ocupa espacio y da credibilidad */
.svc-mensual .m2-proof{
  grid-column: 1 / -1;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(520px 220px at 10% 0%, rgba(29,78,216,.12), transparent 60%),
    rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  padding: 18px 18px;
  box-shadow: 0 22px 80px rgba(15,23,42,.08);
}

.svc-mensual .m2-proof h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 950;
  color: rgba(15,23,42,.92);
}

.svc-mensual .m2-proof p{
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(15,23,42,.66);
  font-weight: 650;
  max-width: 90ch;
}

.svc-mensual .m2-proof-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(15,23,42,.78);
  font-weight: 850;
}

.svc-mensual .m2-proof-row span{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}

/* Responsive */
@media (max-width: 980px){
  .svc-mensual .m2-grid{
    grid-template-columns: 1fr;
  }
  .svc-mensual .m2-inc-grid{
    grid-template-columns: 1fr;
  }
  .svc-mensual .m2-section{
    padding: 56px 0;
  }
}
/* ===========================
   RITMO — cards 2x2 (más pro)
   =========================== */

.svc-mensual .m2-timeline{
  display: none; /* ocultamos el layout viejo si aún existe */
}

/* Nuevo grid */
.svc-mensual .m2-stepsGrid{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}

/* Línea/flujo sutil detrás (se nota pero elegante) */
.svc-mensual .m2-stepsGrid:before{
  content:"";
  position:absolute;
  inset: 18px 18px 18px 18px;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(29,78,216,.16), rgba(29,78,216,0) 55%),
    linear-gradient(180deg, rgba(29,78,216,.10), rgba(29,78,216,0) 55%);
  filter: blur(0.2px);
  pointer-events: none;
  opacity: .55;
}

.svc-mensual .m2-step2{
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  padding: 18px;
  box-shadow: 0 22px 70px rgba(15,23,42,.08);
}

.svc-mensual .m2-step2--accent{
  border-color: rgba(29,78,216,.20);
  background: linear-gradient(180deg, rgba(29,78,216,.10), rgba(255,255,255,.82));
}

.svc-mensual .m2-step2-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

.svc-mensual .m2-step2-n{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.10);
  border: 1px solid rgba(29,78,216,.20);
}

.svc-mensual .m2-step2-tag{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.62);
}

.svc-mensual .m2-step2 h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 950;
  color: rgba(15,23,42,.92);
}

.svc-mensual .m2-step2 p{
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(15,23,42,.68);
  font-weight: 650;
  max-width: 62ch;
}

.svc-mensual .m2-step2-foot{
  display:flex;
  align-items:center;
  gap: 6px;
  font-size: 13px;
  color: rgba(15,23,42,.65);
  font-weight: 750;
  padding-top: 10px;
  border-top: 1px solid rgba(15,23,42,.06);
}

.svc-mensual .m2-step2-foot b{
  color: rgba(15,23,42,.90);
  font-weight: 950;
}

/* Micro interacción (pro, no infantil) */
.svc-mensual .m2-step2:hover{
  transform: translateY(-1px);
  transition: transform .18s ease;
}

/* Responsive */
@media (max-width: 980px){
  .svc-mensual .m2-stepsGrid{
    grid-template-columns: 1fr;
  }
  .svc-mensual .m2-stepsGrid:before{
    display:none;
  }
}
/* =========================================
   MENSUAL HERO — “Banca premium” (solo diseño)
   - más alto
   - fondo con luz + textura
   - orbes animados
   - panel glass detrás del texto
========================================= */

body.svc-mensual .svc-hero{
  position: relative;
  overflow: hidden;
  padding: 120px 0 110px;          /* más aire vertical */
  min-height: 86vh;                /* llena pantalla (evita “se ve chiquito”) */
  background:
    radial-gradient(900px 520px at 12% 25%, rgba(10,103,194,.16), rgba(255,255,255,0) 60%),
    radial-gradient(980px 560px at 88% 55%, rgba(11,31,58,.12), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 55%, #ffffff 100%);
}

/* Decor general */
.mensual-hero-decor{
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 0;
}

/* Textura tipo “papel fino / grano” */
.mensual-hero-decor::before{
  content:"";
  position:absolute;
  inset:-20%;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(11,31,58,.06) 1px, rgba(255,255,255,0) 0);
  background-size: 26px 26px;
  opacity: .18;
  transform: rotate(-6deg);
}

/* Rejilla sutil (muy JP) */
.mh-grid{
  position:absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(11,31,58,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,31,58,.05) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: .10;
  mask-image: radial-gradient(closest-side at 30% 40%, rgba(0,0,0,.9), rgba(0,0,0,0));
}

/* “Sheen” diagonal (brillo suave) */
.mh-sheen{
  position:absolute;
  inset: -40% -30%;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 65%
  );
  opacity: .28;
  transform: rotate(8deg);
  animation: mhSheen 9s ease-in-out infinite;
}

@keyframes mhSheen{
  0%   { transform: translateX(-6%) rotate(8deg); opacity: .20; }
  50%  { transform: translateX(6%) rotate(8deg);  opacity: .32; }
  100% { transform: translateX(-6%) rotate(8deg); opacity: .20; }
}

/* Orbes (luces) */
.mh-orb{
  position:absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .9;
  transform: translateZ(0);
}

.mh-orb-1{
  width: 520px; height: 520px;
  left: -140px; top: -140px;
  background: radial-gradient(circle, rgba(10,103,194,.25), rgba(10,103,194,0) 70%);
  animation: mhFloat1 10s ease-in-out infinite;
}
.mh-orb-2{
  width: 640px; height: 640px;
  right: -240px; top: 80px;
  background: radial-gradient(circle, rgba(11,31,58,.18), rgba(11,31,58,0) 68%);
  animation: mhFloat2 12s ease-in-out infinite;
}
.mh-orb-3{
  width: 420px; height: 420px;
  right: 140px; bottom: -190px;
  background: radial-gradient(circle, rgba(10,103,194,.16), rgba(10,103,194,0) 70%);
  animation: mhFloat3 11s ease-in-out infinite;
}

@keyframes mhFloat1{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(18px, 22px) scale(1.04); }
  100%{ transform: translate(0,0) scale(1); }
}
@keyframes mhFloat2{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-22px, 18px) scale(1.03); }
  100%{ transform: translate(0,0) scale(1); }
}
@keyframes mhFloat3{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-14px, -18px) scale(1.05); }
  100%{ transform: translate(0,0) scale(1); }
}

/* Asegura que el contenido quede arriba de decor */
body.svc-mensual .svc-hero .container{ position: relative; z-index: 1; }

/* Grid del hero: más separación y equilibrio visual */
body.svc-mensual .svc-hero-grid{
  align-items: center;
  gap: 34px;  /* más “respiro” */
}

/* Panel glass detrás del texto (para que llene y se vea premium) */
body.svc-mensual .mensual-brief{
  position: relative;
  padding: 26px 26px 22px;
  border-radius: 22px;
  background:
    radial-gradient(520px 240px at 15% 10%, rgba(10,103,194,.12), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.65);
  border: 1px solid rgba(11,31,58,.12);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
  backdrop-filter: blur(12px);
}

/* Línea/acentos finos a la izquierda del panel */
body.svc-mensual .mensual-brief::before{
  content:"";
  position:absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.12));
  opacity: .9;
}

/* Sombra suave para el tag y el título (más “presencia”) */
body.svc-mensual .mb-tag{
  box-shadow: 0 10px 22px rgba(11,31,58,.10);
}
body.svc-mensual .mb-title{
  text-shadow: 0 14px 40px rgba(11,31,58,.10);
}

/* Botones/CTA un poco más “flotantes” */
body.svc-mensual .mb-cta{
  margin-top: 18px;
}
body.svc-mensual .mb-btn,
body.svc-mensual .mb-support-pill{
  box-shadow: 0 14px 30px rgba(11,31,58,.10);
}

/* Tarjetas trust: que se vean más premium y llenen más */
body.svc-mensual .mb-trust{
  margin-top: 18px;
  gap: 12px;
}
body.svc-mensual .mb-trust-item{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,31,58,.12);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(11,31,58,.08);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.svc-mensual .mb-trust-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(11,31,58,.12);
  border-color: rgba(10,103,194,.22);
}

/* Dashboard: lo “ancla” visualmente para que no flote raro en vacío */
body.svc-mensual .svc-hero-right--mensual .svc-hero-card{
  position: relative;
}
body.svc-mensual .svc-hero-right--mensual .svc-hero-card::before{
  content:"";
  position:absolute;
  inset: -18px -18px -18px -18px;
  border-radius: 26px;
  background: radial-gradient(520px 260px at 65% 35%, rgba(10,103,194,.12), rgba(255,255,255,0) 60%);
  z-index: -1;
}

/* Responsive: que no se vea apretado */
@media (max-width: 980px){
  body.svc-mensual .svc-hero{
    padding: 110px 0 90px;
    min-height: auto;
  }
  body.svc-mensual .mensual-brief{
    padding: 22px 18px 18px;
  }
  .mh-grid{ opacity: .07; }
}

/* =========================
   MENSUAL HERO: panel editorial con imagen (derecha)
========================= */

body.svc-mensual .svc-hero{
  position: relative;
  overflow: hidden;
  min-height: 86vh;
  padding: 120px 0 110px;
  background:
    radial-gradient(900px 520px at 12% 25%, rgba(10,103,194,.14), rgba(255,255,255,0) 60%),
    radial-gradient(980px 560px at 88% 55%, rgba(11,31,58,.10), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 55%, #ffffff 100%);
}

body.svc-mensual .svc-hero .container{
  position: relative;
  z-index: 1;
}

/* Balance de columnas: izquierda tarjeta / derecha imagen */
body.svc-mensual .svc-hero-grid{
  align-items: center;
  gap: 42px;
}

/* Panel derecho */
.mh-photoPane{
  display:flex;
  justify-content: flex-end;
}

.mh-photoCard{
  position: relative;
  width: min(620px, 48vw);
  height: min(520px, 56vh);
  border-radius: 26px;
  overflow: hidden;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,31,58,.12);
  box-shadow: 0 30px 90px rgba(11,31,58,.18);
  backdrop-filter: blur(12px);

  /* look “editorial” */
  transform: translateY(6px);
}

/* Imagen */
.mh-photoImg{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: saturate(1.02) contrast(1.03);
}

/* Overlay para integrarlo con tu paleta (azul/blanco) */
.mh-photoOverlay{
  position:absolute;
  inset: 0;
  background:
    radial-gradient(700px 420px at 18% 20%, rgba(10,103,194,.20), rgba(10,103,194,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(0deg, rgba(11,31,58,.10), rgba(11,31,58,0) 55%);
  opacity: .95;
}

/* Líneas sutiles tipo banca (detalle pro) */
.mh-photoLines{
  position:absolute;
  inset: -40px;
  background:
    linear-gradient(to right, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: .35;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,.9), rgba(0,0,0,0) 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,.9), rgba(0,0,0,0) 70%);
  pointer-events:none;
}

/* Tu tarjeta izquierda sigue premium */
body.svc-mensual .mensual-brief{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,31,58,.12);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
  backdrop-filter: blur(12px);
}

/* Responsive */
@media (max-width: 980px){
  .mh-photoPane{ display:none; } /* en móvil se oculta para no estorbar */
  body.svc-mensual .svc-hero{ min-height:auto; padding:110px 0 90px; }
}
/* =========================================
   MENSUAL HERO FULL: imagen ancho completo + info debajo
========================================= */

body.svc-mensual .mh-heroFull{
  padding: 0;                 /* el banner ya da altura */
  min-height: auto;
  background: #fff;
}

/* Banner */
.mh-banner{
  position: relative;
  width: 100%;
  height: clamp(360px, 58vh, 640px); /* alto hero tipo banca */
  overflow: hidden;
  border-bottom: 1px solid rgba(11,31,58,.10);
}

.mh-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* llena */
  filter: saturate(1.02) contrast(1.03);
  transform: scale(1.03);     /* un pelín para evitar bordes */
}

/* Overlay para que se sienta “premium” y se funda con tu paleta */
.mh-bannerOverlay{
  position:absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 15% 25%, rgba(10,103,194,.22), rgba(10,103,194,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.55) 70%, rgba(255,255,255,.95) 100%);
}

/* Contenido debajo */
.mh-below{
  padding: 34px 0 70px;
}

/* Card centrada, con presencia */
.mh-cardWrap{
  display: flex;
  justify-content: center;
}

/* Tu tarjeta existente: más ancha para “llenar” */
body.svc-mensual .mensual-brief{
  width: min(1040px, 100%);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,31,58,.12);
  border-radius: 24px;
  box-shadow: 0 26px 90px rgba(11,31,58,.14);
  backdrop-filter: blur(12px);
  padding: 28px;
  margin-top: -78px;          /* sube la tarjeta encima del banner (pro) */
}

/* Acento vertical bancario */
body.svc-mensual .mensual-brief::before{
  content:"";
  position:absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.10));
  opacity: .95;
}

/* Evita que el pseudo-elemento falle si tu .mensual-brief no es relative */
body.svc-mensual .mensual-brief{
  position: relative;
}

/* Responsive */
@media (max-width: 980px){
  .mh-banner{
    height: clamp(280px, 44vh, 440px);
  }
  body.svc-mensual .mensual-brief{
    margin-top: -44px;
    padding: 20px;
    border-radius: 20px;
  }
}
/* =========================
   MENSUAL — HERO FULL LIMPIO
========================= */

body.svc-mensual .mh-heroFull{
  padding: 0;
  background: #fff;
}

/* Banner */
body.svc-mensual .mh-banner{
  position: relative;
  width: 100%;
  height: clamp(360px, 56vh, 620px);
  overflow: hidden;
  border-bottom: 1px solid rgba(11,31,58,.10);
}

/* Imagen (ajusta el encuadre para que no corte raro caras / gráficos) */
body.svc-mensual .mh-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%; /* 👈 mueve el “foco” hacia arriba */
  filter: saturate(1.02) contrast(1.03);
  transform: scale(1.02);
}

/* Overlay MÁS PRO: oscurece ligeramente arriba, aclara abajo (para transición suave) */
body.svc-mensual .mh-bannerOverlay{
  position:absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,31,58,.35) 0%, rgba(11,31,58,0) 40%),
    radial-gradient(900px 520px at 15% 20%, rgba(10,103,194,.18), rgba(10,103,194,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.72) 78%, rgba(255,255,255,1) 100%);
}

/* Zona abajo */
body.svc-mensual .mh-below{
  padding: 36px 0 76px;
}

body.svc-mensual .mh-cardWrap{
  display: block;
}

/* Tarjeta centrada perfectamente */
body.svc-mensual .mensual-brief{
  position: relative;
  width: min(1040px, 100%);
  margin: -90px auto 0;     /* 👈 centrado + sube sobre el banner */
  padding: 28px;
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(11,31,58,.12);
  box-shadow: 0 26px 90px rgba(11,31,58,.14);
  backdrop-filter: blur(12px);
}

/* Acento vertical */
body.svc-mensual .mensual-brief::before{
  content:"";
  position:absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.10));
  opacity: .95;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-mensual .mh-banner{
    height: clamp(280px, 44vh, 440px);
  }
  body.svc-mensual .mensual-brief{
    margin: -52px auto 0;
    padding: 20px;
    border-radius: 20px;
  }
}
body.svc-mensual .mh-bannerOverlay{
  position:absolute;
  inset: 0;

  /* Menos “niebla” blanca, más transición limpia */
  background:
    /* Oscurece MUY leve arriba para que la imagen se sienta “premium” */
    linear-gradient(180deg,
      rgba(11,31,58,.22) 0%,
      rgba(11,31,58,0) 42%
    ),

    /* Tinte azul sutil para integrarlo con tu paleta */
    radial-gradient(900px 520px at 18% 22%,
      rgba(10,103,194,.14),
      rgba(10,103,194,0) 62%
    ),

    /* Transición al contenido: en vez de blanco “lavado”, un fade más corto */
    linear-gradient(180deg,
      rgba(255,255,255,0) 58%,
      rgba(255,255,255,.55) 80%,
      rgba(255,255,255,.92) 100%
    );
}
body.svc-mensual .mh-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%; /* 👈 sube el foco (menos zona blanca abajo) */
  filter: saturate(1.02) contrast(1.05);
  transform: scale(1.02);
}
body.svc-mensual .mh-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* 👇 blur suave + baja un poco el impacto */
  filter: blur(2.5px) saturate(.95) contrast(.95) brightness(.95);
  transform: scale(1.06); /* para que el blur no deje bordes */
}
body.svc-mensual .mh-bannerOverlay{
  position:absolute;
  inset: 0;
  background:
    /* vignette suave para quitar protagonismo a la foto */
    radial-gradient(1200px 700px at 50% 40%, rgba(11,31,58,.10), rgba(11,31,58,0) 60%),
    /* tinte azul muy sutil */
    radial-gradient(900px 520px at 18% 22%, rgba(10,103,194,.12), rgba(10,103,194,0) 62%),
    /* transición limpia al contenido */
    linear-gradient(180deg,
      rgba(255,255,255,0) 52%,
      rgba(255,255,255,.65) 78%,
      rgba(255,255,255,1) 100%
    );
}
body.svc-mensual .mb-trust{
  margin-top: 18px;
  gap: 12px;
}

body.svc-mensual .mb-trust-item{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(11,31,58,.12);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(11,31,58,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-mensual .mb-trust-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 70px rgba(11,31,58,.14);
  border-color: rgba(10,103,194,.22);
}
body.svc-mensual .mh-banner{
  height: clamp(320px, 48vh, 560px);
}
/* =========================================
   HERO: imagen ocupa TODA la sección + contenido dentro
   (sin negro, estilo azul/blanco, con marco redondeado)
========================================= */

body.svc-mensual .svc-hero--imageCover{
  padding: 110px 0 70px;
}

/* Marco de toda la sección */
body.svc-mensual .hc-heroFrame{
  position: relative;
  border-radius: 28px;
  overflow: hidden;

  /* “marco”/card estilo tu web */
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,31,58,.12);
  box-shadow: 0 28px 110px rgba(11,31,58,.14);
  backdrop-filter: blur(10px);

  /* alto del hero (ajustable) */
  min-height: 560px;
}

/* Imagen cubre todo el frame */
body.svc-mensual .hc-heroBg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}

/* Overlay blanco/azul (para legibilidad y armonía) */
body.svc-mensual .hc-heroOverlay{
  position: absolute;
  inset: 0;

  /* Esto es clave: crea una “zona de lectura” a la izquierda y deja ver la imagen */
  background:
    radial-gradient(900px 520px at 18% 30%, rgba(10,103,194,.16), rgba(10,103,194,0) 60%),
    linear-gradient(90deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.84) 36%,
      rgba(255,255,255,.55) 56%,
      rgba(255,255,255,.16) 76%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.55) 70%,
      rgba(255,255,255,.75) 100%
    );

  pointer-events: none;
}

/* Contenido dentro de la imagen */
body.svc-mensual .hc-heroContent{
  position: relative;
  z-index: 2;

  /* el texto NO va en full width: como Deloitte, ancho controlado */
  max-width: 760px;

  padding: 54px 56px 44px;
}

/* “Borde interior” fino para que se sienta diseñado */
body.svc-mensual .hc-heroFrame::after{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.35);
  pointer-events:none;
  z-index: 3;
}

/* Jerarquía: que el texto mande */
body.svc-mensual .svc-hero--imageCover .mb-title{
  font-size: clamp(50px, 4.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -1.1px;
  text-shadow: 0 18px 55px rgba(11,31,58,.12);
}

body.svc-mensual .svc-hero--imageCover .mb-lead{
  font-size: 18px;
  color: rgba(11,31,58,.80);
  max-width: 68ch;
}

/* Trust cards: glass dentro de la imagen */
body.svc-mensual .svc-hero--imageCover .mb-trust{
  margin-top: 18px;
}

body.svc-mensual .svc-hero--imageCover .mb-trust-item{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(11,31,58,.12);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
  backdrop-filter: blur(10px);
}

/* Responsive */
@media (max-width: 980px){
  body.svc-mensual .svc-hero--imageCover{
    padding: 95px 0 60px;
  }

  body.svc-mensual .hc-heroFrame{
    min-height: 640px;
    border-radius: 22px;
  }

  body.svc-mensual .hc-heroContent{
    max-width: 100%;
    padding: 34px 22px 26px;
  }

  /* En móvil el overlay se hace más vertical (mejor lectura) */
  body.svc-mensual .hc-heroOverlay{
    background:
      radial-gradient(900px 520px at 20% 20%, rgba(10,103,194,.14), rgba(10,103,194,0) 60%),
      linear-gradient(180deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.78) 42%,
        rgba(255,255,255,.40) 72%,
        rgba(255,255,255,0) 100%
      );
  }
}
body.svc-mensual .hc-heroFrame{
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;     /* full real */
}

/* evita scroll horizontal por cualquier 100vw o sombras */
body{ overflow-x: hidden; }
body.svc-mensual .hc-heroOverlay{
  position: absolute;
  inset: 0;

  /* Menos blanco: la lectura sigue bien pero la foto se ve más */
  background:
    radial-gradient(900px 520px at 18% 30%,
      rgba(10,103,194,.10),
      rgba(10,103,194,0) 62%
    ),
    linear-gradient(90deg,
      rgba(255,255,255,.64) 0%,
      rgba(255,255,255,.52) 30%,
      rgba(255,255,255,.30) 48%,
      rgba(255,255,255,.10) 68%,
      rgba(255,255,255,0) 100%
    );

  pointer-events: none;
}
body.svc-mensual .hc-heroBg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.01);

  /* Más nítida y con mejor presencia */
  filter: saturate(1.06) contrast(1.08) brightness(.98);
}
/* Quitar espacios arriba/abajo: que solo se vea la imagen */
body.svc-mensual .svc-hero--imageCover{
  padding: 0 !important;
  margin: 0 !important;
}

/* El frame pegado al navbar */
body.svc-mensual .hc-heroFrame{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;  /* si lo quieres 100% pegado a los bordes */
}

/* Si tu navbar es fixed/sticky, compensa para que no tape la imagen */
body.svc-mensual .hc-heroFrame{
  padding-top: 0;
}
body.svc_mensual .hc-heroOverlay,
body.svc-mensual .hc-heroOverlay{
  position:absolute;
  inset:0;

  /* SOLO degradado lateral (izq → der). Sin blanco abajo */
  background:
    radial-gradient(900px 520px at 18% 30%,
      rgba(10,103,194,.10),
      rgba(10,103,194,0) 62%
    ),
    linear-gradient(90deg,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.48) 32%,
      rgba(255,255,255,.26) 50%,
      rgba(255,255,255,.08) 70%,
      rgba(255,255,255,0) 100%
    );

  pointer-events:none;
}
/* =========================================
   Quitar el hueco blanco entre HERO y la siguiente sección
   (sin “cortar” el diseño de la sección azul)
========================================= */

/* Asegura que el hero no empuje abajo */
body.svc-mensual .svc-hero--imageCover{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Sube la siguiente sección para que toque el hero */
body.svc-mensual .svc-hero--imageCover + section,
body.svc-mensual .svc-hero--imageCover + .svc-section,
body.svc-mensual .svc-hero--imageCover + .section,
body.svc-mensual .svc-hero--imageCover + div{
  margin-top: -120px !important;   /* 👈 ESTE ES EL HUECO (ajústalo) */
  padding-top: 120px !important;   /* 👈 MISMO VALOR para no aplastar contenido */
}
/* ===== FIX: Mensual hero clean (sin “marco raro”) ===== */
body.svc-mensual .svc-hero--imageCover{
  padding: 0 !important;
  margin: 0 !important;
}

body.svc-mensual .hc-heroFrame{
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  min-height: clamp(520px, 72vh, 760px) !important;

  display: flex;
  align-items: center;
}

body.svc-mensual .hc-heroFrame::after{
  display: none !important; /* quita el borde interior */
}

body.svc-mensual .hc-heroContent{
  max-width: 820px !important;
  padding: 72px 0 64px !important;
}

/* overlay más limpio (menos “gris lavado”) */
body.svc-mensual .hc-heroOverlay{
  background:
    radial-gradient(900px 520px at 18% 30%, rgba(10,103,194,.10), rgba(10,103,194,0) 62%),
    linear-gradient(90deg,
      rgba(255,255,255,.70) 0%,
      rgba(255,255,255,.58) 30%,
      rgba(255,255,255,.34) 52%,
      rgba(255,255,255,.14) 70%,
      rgba(255,255,255,0) 100%
    ) !important;
}

@media (max-width: 980px){
  body.svc-mensual .hc-heroContent{
    padding: 44px 0 34px !important;
  }
  body.svc-mensual .hc-heroFrame{
    min-height: 640px !important;
  }
}
/* Overlay más balanceado: no deja el “velo blanco” a la izquierda */
.hc-heroOverlay{
  background:
    radial-gradient(900px 520px at 18% 30%, rgba(10,103,194,.08), rgba(10,103,194,0) 62%),
    linear-gradient(90deg,
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.22) 30%,
      rgba(255,255,255,.10) 55%,
      rgba(255,255,255,0) 78%
    );
}
.hc-heroOverlay{
  background:
    radial-gradient(900px 520px at 18% 30%, rgba(10,103,194,.06), rgba(10,103,194,0) 62%),
    linear-gradient(90deg,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.16) 32%,
      rgba(255,255,255,.07) 58%,
      rgba(255,255,255,0) 80%
    );
}
.hc-heroOverlay{ opacity: .55; } /* prueba entre .45 y .65 */
/* ===== MENSUAL: cuadro SOLO para el texto (se ve pro, no “popup”) ===== */

/* quita el cuadro grande si lo tienes aplicado a hc-heroContent */
body.svc-mensual .hc-heroContent{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  max-width: 980px;
}

/* cuadro elegante para SOLO el bloque del texto */
body.svc-mensual .mb-top{
  display: inline-block;
  max-width: 840px;

  padding: 18px 20px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,31,58,.12);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 18px 55px rgba(11,31,58,.12);
}

/* title + lead más limpios dentro del cuadro */
body.svc-mensual .mb-title{ color:#0b1f3a; }
body.svc-mensual .mb-lead{ color: rgba(11,31,58,.78); }

/* botones y trust cards: se quedan “flotando” bien sin verse raros */
body.svc-mensual .mb-cta{ margin-top: 14px; }
body.svc-mensual .mb-trust{ margin-top: 14px; }

/* móvil: cuadro más compacto */
@media (max-width: 720px){
  body.svc-mensual .mb-top{
    max-width: 100%;
    padding: 14px 14px 12px;
  }
}
/* ===== Cuadro título: premium, integrado al fondo (sin verse básico) ===== */
body.svc-mensual .mb-top{
  max-width: 700px;
  padding: 20px 22px 16px;
  border-radius: 20px;

  /* Fondo con tinte azul + degradado sutil (combina con tu paleta) */
  background:
    radial-gradient(600px 260px at 20% 15%, rgba(10,103,194,.14), rgba(10,103,194,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.70), rgba(245,249,255,.52));

  /* Borde elegante (no “marco básico”) */
  border: 1px solid rgba(10,103,194,.16);

  /* Sombra profunda tipo banca */
  box-shadow:
    0 18px 50px rgba(11,31,58,.18),
    0 1px 0 rgba(255,255,255,.45) inset;

  /* Blur suave (muy leve, no sucio) */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  position: relative;
  overflow: hidden;
}

/* Detalle visual para que NO se vea vacío: “accent bar” lateral */
body.svc-mensual .mb-top::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.10));
}

/* Detalle sutil en esquina: glow (muy leve) */
body.svc-mensual .mb-top::after{
  content:"";
  position:absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  top: -90px;
  background: radial-gradient(circle, rgba(10,103,194,.18), rgba(10,103,194,0) 70%);
  pointer-events:none;
}

/* Texto un poquito más “banca” dentro del cuadro */
body.svc-mensual .mb-title{
  letter-spacing: -0.9px;
  line-height: 1.02;
}
body.svc-mensual .mb-lead{
  color: rgba(11,31,58,.76);
}

/* Móvil */
@media (max-width: 720px){
  body.svc-mensual .mb-top{
    max-width: 92%;
    padding: 16px 16px 12px;
  }
}
/* ===== Qué incluye: premium "midnight" (NO tan oscuro, NO encimado) ===== */
.includes-alt{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0c2747 0%, #123a63 55%, #0f2d52 100%);
  padding: 92px 0;
  border-top: 1px solid rgba(11,31,58,.10);
  border-bottom: 1px solid rgba(11,31,58,.10);
}

/* Glow suave atrás (NO encima del contenido) */
.includes-alt::before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(620px 360px at 20% 25%, rgba(120,190,255,.35), transparent 62%),
    radial-gradient(520px 320px at 80% 35%, rgba(10,103,194,.22), transparent 60%),
    radial-gradient(520px 320px at 55% 85%, rgba(255,255,255,.10), transparent 65%);
  filter: blur(18px);
  opacity: .85;
  pointer-events:none;
  z-index: 0;  /* importante: atrás */
}

/* Patrón súper sutil (opcional, ayuda a que no se vea plano) */
.includes-alt::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .06;
  pointer-events:none;
  z-index: 0; /* atrás */
}

/* Asegura que TODO el contenido quede arriba */
.includes-alt .container{
  position: relative;
  z-index: 1;
}

/* Títulos y texto en claro */
.includes-alt h2,
.includes-alt .section-title{
  color: #ffffff;
}
.includes-alt p{
  color: rgba(255,255,255,.78);
}

/* Tarjetas: glass claro (para que combine y no se vea “encimado”) */
.includes-alt .m2-card,
.includes-alt .hc-card,
.includes-alt .card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Texto dentro de tarjetas */
.includes-alt .m2-card h3,
.includes-alt .hc-card h3,
.includes-alt .card h3{
  color: rgba(255,255,255,.92);
}
.includes-alt .m2-card p,
.includes-alt .hc-card p,
.includes-alt .card p{
  color: rgba(255,255,255,.74);
}

/* Chips/pastillas */
.includes-alt .chip,
.includes-alt .pill,
.includes-alt .tag{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.86);
}

/* Si tienes un recuadro grande abajo ("Cómo se ve un buen mes") que se vea integrado */
.includes-alt .m2-panel,
.includes-alt .hc-panel{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

/* =========================================
   FONDO GENERAL NUEVO para #incluye (NO tarjetas)
   - ribbon diagonal + halos + grain sutil
========================================= */

#m2-incluye,
#incluye.m2-section.m2-incluye,
.m2-section.m2-incluye{
  position: relative;
  overflow: hidden;

  /* Base limpia */
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

/* Halos CONTROLADOS (sin repetir el mismo “manchón” típico) */
.m2-section.m2-incluye::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:
    radial-gradient(700px 420px at 14% 22%, rgba(10,103,194,.12), rgba(10,103,194,0) 62%),
    radial-gradient(720px 420px at 88% 18%, rgba(11,31,58,.08), rgba(11,31,58,0) 60%),
    radial-gradient(680px 420px at 70% 92%, rgba(10,103,194,.08), rgba(10,103,194,0) 62%);
  filter: blur(14px);
  opacity: .9;
  pointer-events:none;
  z-index: 0;
}

/* Ribbon diagonal (esto es lo que cambia el “look”) */
.m2-section.m2-incluye .m2-wrap::before{
  content:"";
  position:absolute;
  left: -20%;
  top: 10%;
  width: 140%;
  height: 46%;
  transform: rotate(-6deg);

  background: linear-gradient(90deg,
    rgba(10,103,194,.14) 0%,
    rgba(255,255,255,.00) 38%,
    rgba(10,103,194,.06) 100%
  );

  border-top: 1px solid rgba(11,31,58,.06);
  border-bottom: 1px solid rgba(11,31,58,.06);

  pointer-events:none;
  z-index: 0;
}

/* Grain sutil (textura, evita que se vea plano/repetido) */
.m2-section.m2-incluye::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(11,31,58,.18) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .03;
  pointer-events:none;
  z-index: 0;
}

/* Asegura que el contenido quede por encima del fondo */
.m2-section.m2-incluye .m2-wrap{
  position: relative;
  z-index: 1;
}

/* Opcional: una línea superior/inferior para separar la sección */
.m2-section.m2-incluye{
  border-top: 1px solid rgba(11,31,58,.08);
  border-bottom: 1px solid rgba(11,31,58,.08);
}

/* =========================
   LO QUE CAMBIA (flow premium)
========================= */

/* Fondo distinto (no repetitivo) */
.m2-change{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 14% 22%, rgba(10,103,194,.10), rgba(10,103,194,0) 62%),
    radial-gradient(780px 460px at 88% 18%, rgba(11,31,58,.08), rgba(11,31,58,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  border-top: 1px solid rgba(11,31,58,.08);
  border-bottom: 1px solid rgba(11,31,58,.08);
}

/* Ribbon diagonal MUY sutil para que se sienta “otra vista” */
.m2-change::before{
  content:"";
  position:absolute;
  left:-25%;
  top: 18%;
  width: 150%;
  height: 44%;
  transform: rotate(-5deg);
  background: linear-gradient(90deg,
    rgba(10,103,194,.10) 0%,
    rgba(255,255,255,0) 42%,
    rgba(10,103,194,.06) 100%
  );
  border-top: 1px solid rgba(11,31,58,.06);
  border-bottom: 1px solid rgba(11,31,58,.06);
  pointer-events:none;
}

/* Head */
.m2-change-head{
  max-width: 820px;
}
.m2-change-kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(81,96,122,.95);
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.75);
  padding: 8px 12px;
  border-radius: 999px;
}
.m2-change-title{
  margin-top: 14px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.6px;
  color: #0b1f3a;
}
.m2-change-sub{
  margin-top: 10px;
  color: rgba(11,31,58,.72);
  font-size: 16px;
}

/* Flow layout: 3 cards + flechas */
.m2-change-flow{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}

/* Cards */
.m2-change-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(11,31,58,.10);
  padding: 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.m2-change-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(11,31,58,.14);
  border-color: rgba(10,103,194,.22);
}

/* Top row */
.m2-change-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.m2-change-badge{
  font-weight: 800;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,103,194,.16);
  background: rgba(10,103,194,.08);
  color: #0b1f3a;
}
.m2-change-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(11,31,58,.10);
  color: #0b4aa2;
}
.m2-change-ico svg{ width: 22px; height: 22px; }

/* Text + bullets */
.m2-change-text{
  color: rgba(11,31,58,.82);
  font-size: 14px;
  margin-bottom: 12px;
  font-weight: 600;
}
.m2-change-list{
  list-style:none;
  display:grid;
  gap: 8px;
  padding-left: 0;
}
.m2-change-list li{
  position: relative;
  padding-left: 18px;
  color: rgba(11,31,58,.72);
  font-size: 13px;
}
.m2-change-list li::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(10,103,194,.85);
  position:absolute;
  left:0;
  top: 6px;
}

/* Resultado: un poquito más “especial” sin repetir el azul típico */
.m2-change-card.is-result{
  background:
    radial-gradient(520px 260px at 20% 20%, rgba(10,103,194,.10), rgba(10,103,194,0) 60%),
    rgba(255,255,255,.92);
}

/* Flechas */
.m2-change-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
}
.m2-change-arrow span{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-size: 18px;
  font-weight: 900;
  color: #0b4aa2;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 12px 26px rgba(11,31,58,.10);
}

/* Chips en resultado */
.m2-change-chips{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.m2-chip{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,31,58,.10);
  color: rgba(11,31,58,.86);
}

/* Quote premium */
.m2-change-quote{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 14px 34px rgba(11,31,58,.08);
  position: relative;
}
.m2-change-quote::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.10));
}
.m2-change-quote p{
  color: rgba(11,31,58,.82);
  font-weight: 700;
}
.m2-change-quote cite{
  display:block;
  margin-top: 6px;
  color: rgba(11,31,58,.62);
  font-style: normal;
  font-size: 13px;
}

/* Responsive: en móvil se apila y las flechas se vuelven “↓” */
@media (max-width: 980px){
  .m2-change-flow{
    grid-template-columns: 1fr;
  }
  .m2-change-arrow span{
    transform: rotate(90deg);
  }
}
/* =========================================
   FIX: Tarjeta "Resultado" (derecha)
   - quita tinte azul
   - efecto premium (no plano) sin salirse del estilo
========================================= */

/* 1) Quitar el fondo azul del Resultado */
.m2-change-card.is-result{
  /* fondo blanco limpio (sin azul) */
  background: rgba(255,255,255,.94) !important;

  /* borde más “premium” y menos plano */
  border: 1px solid rgba(11,31,58,.12) !important;
  box-shadow:
    0 18px 46px rgba(11,31,58,.12),        /* sombra suave */
    0 1px 0 rgba(255,255,255,.85) inset,   /* brillo interior arriba */
    0 -1px 0 rgba(11,31,58,.06) inset !important; /* base interior */
  position: relative;
  overflow: hidden;
}

/* 2) Efecto “shine” sutil (como los ejemplos, sin ser exagerado) */
.m2-change-card.is-result::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    radial-gradient(420px 220px at 110% 18%, rgba(11,31,58,.08), rgba(11,31,58,0) 62%);
  opacity: .85;
  pointer-events:none;
}

/* 3) “Borde degradado” muy sutil (da look pro sin meter azul fuerte) */
.m2-change-card.is-result{
  border: 1px solid transparent !important;
  background:
    rgba(255,255,255,.94) padding-box,
    linear-gradient(135deg, rgba(11,31,58,.18), rgba(11,31,58,.06)) border-box !important;
}

/* 4) Chips del resultado: quita tintes azules si quedaron */
.m2-change-card.is-result .m2-chip{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(11,31,58,.12) !important;
  color: rgba(11,31,58,.86) !important;
}

/* 5) Hover premium (opcional, se siente “vivo”) */
.m2-change-card.is-result:hover{
  transform: translateY(-3px);
  box-shadow:
    0 26px 62px rgba(11,31,58,.16),
    0 1px 0 rgba(255,255,255,.88) inset,
    0 -1px 0 rgba(11,31,58,.06) inset !important;
}
/* =========================================
   CORRECCIÓN DEFINITIVA — Card Resultado
   Igualarla a “Después” + jerarquía sutil
========================================= */

.m2-change-card.is-result{
  /* MISMO fondo que las demás */
  background: rgba(255,255,255,.92) !important;

  /* MISMO borde */
  border: 1px solid rgba(11,31,58,.10) !important;
  border-radius: 18px;

  /* MISMA sombra base */
  box-shadow: 0 14px 34px rgba(11,31,58,.10) !important;

  position: relative;
  overflow: hidden;
}

/* Quitar cualquier overlay anterior */
.m2-change-card.is-result::after{
  display: none !important;
}

/* Jerarquía limpia: línea lateral (igual sistema que ya usas) */
.m2-change-card.is-result::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  background: rgba(10,103,194,.85);
}

/* Texto: MISMO contraste que “Después” */
.m2-change-card.is-result .m2-change-text{
  color: rgba(11,31,58,.82) !important;
}

/* Chips: bajar protagonismo */
.m2-change-card.is-result .m2-chip{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.12);
  color: rgba(11,31,58,.78);
}

/* Hover consistente con el resto */
.m2-change-card.is-result:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(11,31,58,.14) !important;
}
/* =========================
   Información mínima (premium)
========================= */

.m2-min-head{
  max-width: 760px;
}
.m2-min-title{
  color: #0b1f3a;
  letter-spacing: -0.6px;
  line-height: 1.08;
}
.m2-min-sub{
  color: rgba(11,31,58,.72);
  margin-top: 10px;
}

/* Layout */
.m2-min-layout{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 18px;
  align-items: start;
}

/* Grid cards */
.m2-min-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Cards */
.m2-min-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(11,31,58,.10);
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}

.m2-min-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 220px at 18% 0%, rgba(10,103,194,.08), transparent 60%),
    radial-gradient(420px 220px at 110% 25%, rgba(11,31,58,.06), transparent 62%);
  opacity: .65;
  pointer-events:none;
}
.m2-min-card > *{ position: relative; z-index: 1; }

.m2-min-top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.m2-min-top h3{
  margin: 0;
  color: #0b1f3a;
  font-size: 16px;
}

/* Icon */
.m2-min-ic{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(10,103,194,.08);
  border: 1px solid rgba(10,103,194,.14);
  color: rgba(10,103,194,.95);
  box-shadow: 0 12px 26px rgba(11,31,58,.10);
}
.m2-min-ic svg{ width: 22px; height: 22px; }

/* List */
.m2-min-card ul{
  list-style: none;
  padding: 0;
  margin: 10px 0 12px;
  display: grid;
  gap: 8px;
}
.m2-min-card li{
  position: relative;
  padding-left: 18px;
  color: rgba(11,31,58,.74);
  font-size: 13px;
  line-height: 1.35;
}
.m2-min-card li::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(10,103,194,.85);
  position:absolute;
  left:0;
  top: 6px;
}

/* Meta */
.m2-min-meta{
  color: rgba(11,31,58,.65);
  font-size: 12.5px;
}

/* Panel lateral */
.m2-min-panel{
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(10,103,194,.10), transparent 60%),
    rgba(255,255,255,.90);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(11,31,58,.10);
  padding: 16px;
  position: sticky;
  top: 96px;
}

.m2-min-pill{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,31,58,.10);
  color: rgba(11,31,58,.78);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.m2-min-panel h3{
  margin: 10px 0 6px;
  color: #0b1f3a;
  font-size: 18px;
}
.m2-min-panel p{
  margin: 0 0 14px;
  color: rgba(11,31,58,.72);
  font-size: 13.5px;
  line-height: 1.5;
}

.m2-min-panel-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 14px;
}
.m2-min-stat{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
}
.m2-min-num{
  font-weight: 900;
  font-size: 22px;
  color: #0b4aa2;
  line-height: 1;
}
.m2-min-lbl{
  margin-top: 6px;
  font-size: 11.5px;
  color: rgba(11,31,58,.65);
}

/* CTA */
.m2-min-cta{
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 14px 16px;
  border-radius: 999px;
  background: rgba(10,103,194,.10);
  border: 1px solid rgba(10,103,194,.18);
  color: #0b1f3a;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(11,31,58,.12);
}
.m2-min-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 52px rgba(11,31,58,.16);
}

.m2-min-note{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(11,31,58,.62);
}

/* Responsive */
@media (max-width: 980px){
  .m2-min-layout{
    grid-template-columns: 1fr;
  }
  .m2-min-grid{
    grid-template-columns: 1fr;
  }
  .m2-min-panel{
    position: relative;
    top: auto;
  }
}
/* =========================================
   ESTILO “VOLUMEN” (como tu ejemplo)
   - sin blur / sin glass
   - sombras dobles + highlight interno
   - azul MUY sutil (no fuerte)
   - NO cambia layout
========================================= */

/* 1) TARJETAS normales: volumen premium */
.m2-min-card{
  background: #ffffff !important;
  border: 1px solid rgba(11,31,58,.10) !important;
  border-radius: 18px !important;

  /* Volumen (como tu ejemplo) */
  box-shadow:
    0 18px 45px rgba(11,31,58,.10),    /* sombra principal */
    0 2px 0 rgba(11,31,58,.04),        /* “base” sutil */
    0 1px 0 rgba(255,255,255,.95) inset, /* highlight interior */
    0 -1px 0 rgba(11,31,58,.05) inset !important; /* borde inferior interior */

  position: relative;
  overflow: hidden;
}

/* Quita overlays anteriores */
.m2-min-card::after{ display:none !important; }

/* Detalle sutil en la esquina (NO azul fuerte) */
.m2-min-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(10,103,194,.06), transparent 40%) 0 0/240px 160px no-repeat;
}

/* Hover muy fino */
.m2-min-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 60px rgba(11,31,58,.12),
    0 2px 0 rgba(11,31,58,.04),
    0 1px 0 rgba(255,255,255,.97) inset,
    0 -1px 0 rgba(11,31,58,.05) inset !important;
  border-color: rgba(11,31,58,.12) !important;
}

/* Icono como “pastilla” suave (similar a tu ejemplo) */
.m2-min-ic{
  background: rgba(10,103,194,.06) !important;
  border: 1px solid rgba(10,103,194,.14) !important;
  color: rgba(10,103,194,.95) !important;
  box-shadow: none !important;
  border-radius: 16px !important;
}

/* Bullets: más discretos */
.m2-min-card li::before{
  background: rgba(10,103,194,.75) !important;
}

/* 2) CUADRO DERECHO: mantener layout, solo darle el MISMO estilo de volumen */
.m2-min-panel{
  background: #ffffff !important;
  border: 1px solid rgba(11,31,58,.10) !important;
  border-radius: 18px !important;

  box-shadow:
    0 18px 45px rgba(11,31,58,.10),
    0 2px 0 rgba(11,31,58,.04),
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(11,31,58,.05) inset !important;

  color: rgba(11,31,58,.90) !important;
}

/* Quita estilos oscuros o fuertes previos sin tocar estructura */
.m2-min-panel::before{ display:none !important; }

/* Badge superior: sobrio */
.m2-min-panel .m2-min-pill{
  background: rgba(10,103,194,.06) !important;
  border: 1px solid rgba(10,103,194,.14) !important;
  color: rgba(11,31,58,.70) !important;
}

/* Botón del panel: azul MUY controlado */
.m2-min-panel .m2-min-cta{
  background: rgba(10,103,194,.08) !important;
  border: 1px solid rgba(10,103,194,.16) !important;
  color: rgba(11,31,58,.92) !important;
  box-shadow:
    0 12px 28px rgba(11,31,58,.10) !important;
}
.m2-min-panel .m2-min-cta:hover{
  background: rgba(10,103,194,.11) !important;
  border-color: rgba(10,103,194,.22) !important;
}

/* Texto del panel normal */
.m2-min-panel h3{ color: rgba(11,31,58,.95) !important; }
.m2-min-panel p{ color: rgba(11,31,58,.72) !important; }
.m2-min-panel .m2-min-note{ color: rgba(11,31,58,.62) !important; }
/* =========================================
   SECCIÓN “Información mínima” — menos blanco, más diseñada (SIN blur)
   Requiere: el <section> tenga id="minimo"
========================================= */

#minimo{
  position: relative;
  overflow: hidden;
  background: #f3f7ff;            /* color general (ya no blanco vacío) */
  border-top: 1px solid rgba(11,31,58,.06);
  border-bottom: 1px solid rgba(11,31,58,.06);
}

/* Patrón diagonal muy sutil (NO blur, NO glow) */
#minimo::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(11,31,58,.05) 0 1px,
      transparent 1px 16px
    );
  opacity: .30;
  pointer-events:none;
}

/* Banda sólida detrás de las tarjetas (da “estructura” y quita blanco) */
#minimo::after{
  content:"";
  position:absolute;
  left: 24px;
  right: 24px;
  top: 165px;               /* ajusta si tu título queda muy alto */
  height: 440px;
  background: #e6efff;      /* band sólido */
  border: 1px solid rgba(11,31,58,.06);
  border-radius: 26px;
  pointer-events:none;
}

/* Asegura que el contenido quede arriba de los fondos */
#minimo .m2-wrap{
  position: relative;
  z-index: 1;
}

/* =========================
   Tarjetas: más diseño (volumen + barra + badge)
========================= */
#minimo .m2-min-card{
  background:#fff !important;
  border: 1px solid rgba(11,31,58,.10) !important;
  border-radius: 18px !important;
  position: relative;
  overflow: hidden;

  box-shadow:
    0 18px 45px rgba(11,31,58,.10),
    0 2px 0 rgba(11,31,58,.04),
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(11,31,58,.05) inset !important;
}

/* Quita overlays viejos */
#minimo .m2-min-card::after{ display:none !important; }

/* Barra superior de color (diseño) */
#minimo .m2-min-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: var(--a, #0b4aa2);
}

/* Badge 01/02/03/04 (como tu ejemplo) */
#minimo .m2-min-grid > .m2-min-card{
  padding-top: 18px;
}
#minimo .m2-min-grid > .m2-min-card:nth-child(1)::after{ content:"01"; }
#minimo .m2-min-grid > .m2-min-card:nth-child(2)::after{ content:"02"; }
#minimo .m2-min-grid > .m2-min-card:nth-child(3)::after{ content:"03"; }
#minimo .m2-min-grid > .m2-min-card:nth-child(4)::after{ content:"04"; }

#minimo .m2-min-grid > .m2-min-card::after{
  position:absolute;
  top: 14px;
  left: 14px;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-weight: 900;
  font-size: 20px;
  color: var(--a, #0b4aa2);

  background: #f2f6ff;
  border: 1px solid rgba(10,103,194,.16);
}

/* Ajusta el header de cada card para convivir con el badge */
#minimo .m2-min-top{
  padding-left: 78px;   /* hace espacio al “01” */
}

/* Acentos por tarjeta (suaves, sin azul gritón) */
#minimo .m2-min-grid > .m2-min-card:nth-child(1){ --a:#0b4aa2; }
#minimo .m2-min-grid > .m2-min-card:nth-child(2){ --a:#1b6de0; }
#minimo .m2-min-grid > .m2-min-card:nth-child(3){ --a:#0b1f3a; }
#minimo .m2-min-grid > .m2-min-card:nth-child(4){ --a:#0f6ba8; }

/* Iconos más finos y consistentes */
#minimo .m2-min-ic{
  background: rgba(10,103,194,.06) !important;
  border: 1px solid rgba(10,103,194,.14) !important;
  color: rgba(10,103,194,.95) !important;
  box-shadow: none !important;
}

/* Hover elegante */
#minimo .m2-min-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 60px rgba(11,31,58,.12),
    0 2px 0 rgba(11,31,58,.04),
    0 1px 0 rgba(255,255,255,.97) inset,
    0 -1px 0 rgba(11,31,58,.05) inset !important;
  border-color: rgba(11,31,58,.14) !important;
}

/* =========================
   CTA derecha: estilo “oscuro pro” como tu referencia (SIN cambiar layout)
========================= */
#minimo .m2-min-panel{
  background: linear-gradient(180deg, #132842 0%, #0f223a 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  color: rgba(255,255,255,.92) !important;

  box-shadow: 0 26px 70px rgba(7,18,34,.35) !important;
  align-self: center !important;
}

/* textos del panel */
#minimo .m2-min-panel h3{ color: rgba(255,255,255,.96) !important; }
#minimo .m2-min-panel p{ color: rgba(255,255,255,.78) !important; }
#minimo .m2-min-panel .m2-min-note{ color: rgba(255,255,255,.70) !important; }

/* pill del panel */
#minimo .m2-min-panel .m2-min-pill{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.70) !important;
}

/* botón del panel */
#minimo .m2-min-panel .m2-min-cta{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}
#minimo .m2-min-panel .m2-min-cta:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.24) !important;
}
#minimo::after{ top: 165px; height: 440px; }
/* =========================================================
   INFO MÍNIMA — Fondo grande centrado + cubre todo + volumen + textura
   (sin blur, mantiene líneas azules)
========================================================= */

/* 0) Apaga los fondos anteriores para no pelearse */
#minimo::after{ display:none !important; }
#minimo .m2-wrap::after{ display:none !important; }

/* 1) EL FONDO GRANDE: ahora vive detrás del GRID (perfecto centrado) */
#minimo .m2-min-layout{
  position: relative;
  z-index: 1;
  align-items: center;       /* centra el panel derecho vs las tarjetas */
  overflow: visible;         /* deja que el fondo grande se vea completo */
}

/* Fondo grande azul claro (como el que te gustaba) y MÁS GRANDE */
#minimo .m2-min-layout::before{
  content:"";
  position:absolute;

  /* Abarca TODO (más grande) */
  inset: -26px -26px -26px -26px;

  /* Tono claro azul (no blanco vacío) */
  background: #e6efff;

  border: 1px solid rgba(11,31,58,.08);
  border-radius: 26px;

  /* Volumen del fondo grande */
  box-shadow:
    0 30px 80px rgba(11,31,58,.12),
    0 1px 0 rgba(255,255,255,.90) inset;

  z-index: 0;
  pointer-events:none;
}

/* Asegura que cards y panel estén arriba del fondo grande */
#minimo .m2-min-grid,
#minimo .m2-min-panel{
  position: relative;
  z-index: 1;
}

/* 2) PANEL DERECHO: vuelve a centrarse */
#minimo .m2-min-panel{
  align-self: center !important;
  margin-top: 0 !important;
}

/* 3) TARJETAS: volumen + textura (sin blur) y manteniendo línea azul */
#minimo .m2-min-card{
  --acc: #0b4aa2;

  background:
    /* textura sutil tipo “diseñado” (sin blur) */
    repeating-linear-gradient(
      135deg,
      rgba(11,31,58,.035) 0 1px,
      transparent 1px 14px
    ),
    /* acento en esquina */
    linear-gradient(135deg, rgba(11,74,162,.08), transparent 42%),
    #ffffff !important;

  border: 1px solid rgba(11,31,58,.10) !important;
  border-radius: 18px !important;

  box-shadow:
    0 18px 45px rgba(11,31,58,.11),
    0 2px 0 rgba(11,31,58,.04),
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(11,31,58,.05) inset !important;

  overflow: hidden;
  position: relative;
}

/* Mantener línea superior azul */
#minimo .m2-min-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: var(--acc);
  opacity: .95;
}

/* Variación ligera por tarjeta (misma familia azul, más “dinámico”) */
#minimo .m2-min-grid > .m2-min-card:nth-child(1){ --acc:#0b4aa2; }
#minimo .m2-min-grid > .m2-min-card:nth-child(2){ --acc:#155ad1; }
#minimo .m2-min-grid > .m2-min-card:nth-child(3){ --acc:#0b1f3a; }
#minimo .m2-min-grid > .m2-min-card:nth-child(4){ --acc:#0f6ba8; }

/* Hover fino */
#minimo .m2-min-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 26px 60px rgba(11,31,58,.13),
    0 2px 0 rgba(11,31,58,.04),
    0 1px 0 rgba(255,255,255,.97) inset,
    0 -1px 0 rgba(11,31,58,.05) inset !important;
}

/* 4) BOTÓN “Agendar llamada” más protagonista */
#minimo .m2-min-panel .m2-min-cta{
  background: #0b4aa2 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-weight: 800;

  box-shadow:
    0 18px 40px rgba(0,0,0,.28) !important;
}

#minimo .m2-min-panel .m2-min-cta:hover{
  background: #0a3f8d !important;
  transform: translateY(-2px);
  box-shadow:
    0 24px 58px rgba(0,0,0,.32) !important;
}
/* =========================================================
   INFO MÍNIMA — estilo BURBUJA + fondo grande centrado vertical
   (sin blur / sin glass / sin rayas)
   Usa #minimo (si tu sección tiene otro id, cámbialo aquí)
========================================================= */

/* 0) Apaga cualquier textura de rayas del fondo de la sección */
#minimo::before{
  display: none !important;
}

/* 1) Fondo grande (el rectángulo claro) centrado verticalmente y más grande */
#minimo .m2-min-layout{
  position: relative;
  z-index: 1;
  align-items: center;          /* mantiene el panel centrado */
  overflow: visible;
}

/* Esto es EL “cuadro grande” */
#minimo .m2-min-layout::before{
  content:"";
  position:absolute;

  /* centrado vertical REAL */
  top: 50%;
  transform: translateY(-50%);

  /* más grande para abarcar TODO */
  left: -30px;
  right: -30px;
  height: calc(100% + 60px);

  /* tono como el que traías + burbujas */
  background:
    radial-gradient(420px 320px at 18% 20%, rgba(255,255,255,.70), transparent 70%),
    radial-gradient(520px 380px at 82% 28%, rgba(255,255,255,.55), transparent 72%),
    radial-gradient(420px 320px at 70% 92%, rgba(10,103,194,.10), transparent 68%),
    #e6efff;

  border: 1px solid rgba(11,31,58,.08);
  border-radius: 26px;

  /* volumen del fondo grande */
  box-shadow:
    0 30px 80px rgba(11,31,58,.12),
    0 1px 0 rgba(255,255,255,.90) inset;

  z-index: 0;
  pointer-events:none;
}

/* Asegura que cards/panel queden arriba del fondo grande */
#minimo .m2-min-grid,
#minimo .m2-min-panel{
  position: relative;
  z-index: 1;
}

/* 2) Tarjetas: burbuja + volumen (manteniendo la línea azul superior) */
#minimo .m2-min-card{
  --acc: #0b4aa2;

  background:
    radial-gradient(240px 170px at 18% 18%, rgba(10,103,194,.10), transparent 62%),
    radial-gradient(260px 190px at 92% 88%, rgba(11,31,58,.05), transparent 64%),
    #ffffff !important;

  border: 1px solid rgba(11,31,58,.10) !important;
  border-radius: 18px !important;

  box-shadow:
    0 18px 45px rgba(11,31,58,.11),
    0 2px 0 rgba(11,31,58,.04),
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(11,31,58,.05) inset !important;

  position: relative;
  overflow: hidden;
}

/* Mantener línea azul superior */
#minimo .m2-min-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: var(--acc);
  opacity: .95;
}

/* Variación sutil (misma familia, no “azul fuerte”) */
#minimo .m2-min-grid > .m2-min-card:nth-child(1){ --acc:#0b4aa2; }
#minimo .m2-min-grid > .m2-min-card:nth-child(2){ --acc:#155ad1; }
#minimo .m2-min-grid > .m2-min-card:nth-child(3){ --acc:#0b1f3a; }
#minimo .m2-min-grid > .m2-min-card:nth-child(4){ --acc:#0f6ba8; }

/* Hover elegante */
#minimo .m2-min-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 26px 60px rgba(11,31,58,.13),
    0 2px 0 rgba(11,31,58,.04),
    0 1px 0 rgba(255,255,255,.97) inset,
    0 -1px 0 rgba(11,31,58,.05) inset !important;
}

/* 3) Panel derecho: que no se des-centre */
#minimo .m2-min-panel{
  align-self: center !important;
  margin-top: 0 !important;
}

/* 4) Botón CTA: más protagonista */
#minimo .m2-min-panel .m2-min-cta{
  background: #0b4aa2 !important;
  color: #fff !important;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.28) !important;
}
#minimo .m2-min-panel .m2-min-cta:hover{
  background: #0a3f8d !important;
  transform: translateY(-2px);
  box-shadow: 0 24px 58px rgba(0,0,0,.32) !important;
}
/* CENTRAR el cuadro derecho (panel oscuro) */
#minimo .m2-min-panel{
  align-self: center !important;     /* si el contenedor es flex */
  justify-self: center !important;   /* si el contenedor es grid */
  margin: auto 0 !important;         /* centra vertical dentro de su columna */
  height: fit-content !important;
}
/* Evita que el layout estire y fuerza centrado vertical */
#minimo .m2-min-layout{
  align-items: center !important;     /* flex */
  align-content: center !important;   /* grid */
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.05fr;
  gap: 24px;
  align-items: stretch;
}

.info-card--cta {
  align-self: center; /* 🔴 ESTO es lo que faltaba */
}
.m2-ed-grid{
  display:grid;
  grid-template-columns: 1.1fr 1.1fr .9fr;
  gap: 22px;
  align-items: start;
}

.m2-ed-numbers{
  align-self: center; /* centra vertical el panel oscuro */
}
/* ===== INFO MÍNIMA (mejoras extra, sin duplicar tu #minimo base) ===== */
#minimo .m2-min-kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 800;
  color: rgba(11,31,58,.70);
  margin-bottom: 10px;
}

#minimo .m2-min-badges{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#minimo .m2-min-chip{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  color: rgba(11,31,58,.80);
  box-shadow: 0 10px 22px rgba(11,31,58,.06);
}

#minimo .m2-min-panel-row{
  display: grid;
  gap: 10px;
  margin: 14px 0 16px;
}

#minimo .m2-min-step{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}

#minimo .m2-min-step-n{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.22);
}

#minimo .m2-min-step b{
  display:block;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  margin-bottom: 2px;
}

#minimo .m2-min-step span{
  display:block;
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
  line-height: 1.35;
}
/* =========================================================
   #minimo — Refinamiento JPM (menos saturación, más premium)
   Pegar al FINAL de styles.css
   ========================================================= */

#minimo{
  /* Fondo más sobrio (menos azul plano) */
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(10,103,194,.10), rgba(255,255,255,0) 60%),
    radial-gradient(820px 420px at 85% 55%, rgba(11,31,58,.08), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #ffffff, #f7f9fc);
  border-top: 1px solid rgba(11,31,58,.08);
}

#minimo .m2-min-head{
  max-width: 920px;
}

#minimo .m2-min-title{
  letter-spacing: -0.4px;
}

#minimo .m2-min-sub{
  color: rgba(81,96,122,.92);
}

/* Chips: más discretos (menos “pastillas grandes”) */
#minimo .m2-min-badges{
  margin-top: 12px;
  gap: 8px;
}

#minimo .m2-min-chip{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 18px rgba(11,31,58,.05);
  padding: 6px 10px;
  font-size: 12.5px;
}

/* Layout general: menos “bloque gigante” */
#minimo .m2-min-layout{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 16px;
  align-items: start;
}

/* Contenedor visual: más limpio */
#minimo .m2-min-grid{
  background:
    radial-gradient(780px 320px at 12% 10%, rgba(10,103,194,.08), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(246,249,252,.85));
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(11,31,58,.08);
}

/* Tarjetas: menos sombra + acento elegante (no borde grueso arriba) */
#minimo .m2-min-card{
  position: relative;
  background:
    radial-gradient(360px 160px at 12% 10%, rgba(10,103,194,.06), rgba(255,255,255,0) 62%),
    #ffffff;
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  padding: 16px 16px;
  box-shadow: 0 10px 22px rgba(11,31,58,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Acento lateral (JPM feel) */
#minimo .m2-min-card::before{
  content:"";
  position:absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.10));
}

#minimo .m2-min-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(11,31,58,.10);
  border-color: rgba(10,103,194,.18);
}

#minimo .m2-min-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

#minimo .m2-min-ic{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(10,103,194,.08);
  border: 1px solid rgba(10,103,194,.14);
  color: rgba(11,31,58,.82);
}

#minimo .m2-min-card h3{
  font-size: 15.5px;
  letter-spacing: -0.2px;
  color: rgba(11,31,58,.95);
}

/* Lista dentro de card: más “aire” */
#minimo .m2-min-card ul{
  margin-top: 6px;
  display: grid;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

#minimo .m2-min-card ul li{
  position: relative;
  padding-left: 18px;
  color: rgba(81,96,122,.95);
  font-size: 13.5px;
  line-height: 1.35;
}

#minimo .m2-min-card ul li::before{
  content:"";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  position:absolute;
  left: 0;
  top: 7px;
  background: rgba(10,103,194,.75);
}

/* Panel derecho: más “executive” y menos dominante */
#minimo .m2-min-panel{
  position: sticky; /* sensación premium al scrollear */
  top: 92px;
  border-radius: 22px;
  padding: 18px;
  background:
    radial-gradient(520px 280px at 15% 10%, rgba(10,103,194,.18), rgba(10,103,194,0) 60%),
    linear-gradient(180deg, #0b1f3a, #081b32);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(11,31,58,.18);
  overflow: hidden;
}

/* Pill superior */
#minimo .m2-min-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  margin-bottom: 10px;
}

#minimo .m2-min-panel h3{
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.3px;
}

#minimo .m2-min-panel p{
  color: rgba(255,255,255,.78);
}

/* Pasos: en vertical (más JPM, menos apretado) */
#minimo .m2-min-panel-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0 16px;
}

#minimo .m2-min-step{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

#minimo .m2-min-step-n{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}

#minimo .m2-min-step b{
  display:block;
  font-size: 13.5px;
  color: rgba(255,255,255,.92);
  margin-bottom: 2px;
}

#minimo .m2-min-step span{
  display:block;
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
  line-height: 1.35;
}

/* CTA: más “banca” (menos botón enorme) */
#minimo .m2-min-cta{
  display:flex;
  justify-content:center;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 800;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(10,103,194,.95), rgba(11,74,162,.92));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
  transition: transform .16s ease, filter .16s ease;
}

#minimo .m2-min-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

#minimo .m2-min-note{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.70);
}

/* Responsive */
@media (max-width: 980px){
  #minimo .m2-min-layout{
    grid-template-columns: 1fr;
  }
  #minimo .m2-min-panel{
    position: relative;
    top: auto;
  }
  #minimo .m2-min-grid{
    padding: 14px;
  }
}
/* =========================================================
   #minimo — Ajuste final: menos capas, más “JPM”
   (pegar AL FINAL)
   ========================================================= */

/* 1) Quita/neutraliza el “marco grande” (si existe por CSS previo) */
#minimo .m2-min-layout{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2) Quita el contenedor interno del lado izquierdo (deja solo cards) */
#minimo .m2-min-grid{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* (Por si tu CSS anterior no definía bien el grid) */
#minimo .m2-min-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* 3) Cards: un poco más sobrias (menos glow, menos sombra) */
#minimo .m2-min-card{
  box-shadow: 0 10px 18px rgba(11,31,58,.06) !important;
  border: 1px solid rgba(11,31,58,.10) !important;
}

#minimo .m2-min-card:hover{
  box-shadow: 0 16px 28px rgba(11,31,58,.10) !important;
}

/* Bullet dots un poco menos “brillosos” */
#minimo .m2-min-card ul li::before{
  background: rgba(10,103,194,.60) !important;
}

/* 4) Chips: separador sutil para que no “floten” sobre el contenido */
#minimo .m2-min-badges{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(11,31,58,.08);
}

/* Ajuste fino del panel derecho: un poquito menos dominante */
#minimo .m2-min-panel{
  box-shadow: 0 16px 44px rgba(11,31,58,.16) !important;
  border-radius: 20px !important;
}

/* Responsive */
@media (max-width: 980px){
  #minimo .m2-min-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   #minimo — Limpieza JPM: quitar cuadro grande + armonía
   Pegar AL FINAL de styles.css
   ========================================================= */

/* 1) QUITA el “cuadro grande” detrás (m2-min-layout::before) */
#minimo .m2-min-layout::before{
  display: none !important;
  content: none !important;
}

/* 2) Fondo de la sección (sutil, tipo banca) */
#minimo{
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(10,103,194,.10), rgba(255,255,255,0) 60%),
    radial-gradient(820px 420px at 86% 62%, rgba(11,31,58,.07), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #ffffff, #f7f9fc);
  border-top: 1px solid rgba(11,31,58,.08);
}

/* 3) Contenedor layout: sin caja, solo grid */
#minimo .m2-min-layout{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 18px !important;
  align-items: start !important;
}

/* 4) Surface solo para el grid izquierdo (limpia y premium) */
#minimo .m2-min-grid{
  background: rgba(255,255,255,.70) !important;
  border: 1px solid rgba(11,31,58,.10) !important;
  border-radius: 22px !important;
  padding: 16px !important;
  box-shadow: 0 18px 42px rgba(11,31,58,.08) !important;
}

/* 5) Tarjetas: menos ruido + más “banca” */
#minimo .m2-min-card{
  box-shadow: 0 10px 18px rgba(11,31,58,.06) !important;
  border: 1px solid rgba(11,31,58,.10) !important;
  background: #fff !important;
}

/* Quita la línea superior (puntito) y conviértela en acento lateral */
#minimo .m2-min-card::before{
  left: 0 !important;
  right: auto !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 3px !important;
  height: auto !important;
  border-radius: 999px !important;
  opacity: .95 !important;
}

/* Hover sobrio */
#minimo .m2-min-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(11,31,58,.10) !important;
  border-color: rgba(10,103,194,.18) !important;
}

/* Bullets un poco más discretos */
#minimo .m2-min-card ul li::before{
  background: rgba(10,103,194,.60) !important;
}

/* 6) Chips: menos “inflados” */
#minimo .m2-min-chip{
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  box-shadow: 0 10px 18px rgba(11,31,58,.05) !important;
}

/* 7) Panel derecho: se queda premium pero más equilibrado */
#minimo .m2-min-panel{
  border-radius: 22px !important;
  box-shadow: 0 16px 44px rgba(11,31,58,.16) !important;
}

/* Mobile */
@media (max-width: 980px){
  #minimo .m2-min-grid{
    padding: 14px !important;
  }
  #minimo .m2-min-panel{
    position: relative !important;
    top: auto !important;
  }
}
/* ===== Ajuste fino: alineación visual izquierda / derecha ===== */
#minimo .m2-min-layout{
  align-items: stretch;
}

#minimo .m2-min-grid,
#minimo .m2-min-panel{
  height: 100%;
}
/* Quitar micro-punto superior de las cards */
#minimo .m2-min-card::after{
  display: none !important;
}
/* CTA un poco más sobrio (más JPM) */
#minimo .m2-min-cta{
  background: linear-gradient(
    90deg,
    rgba(10,103,194,.90),
    rgba(11,74,162,.88)
  );
  font-weight: 700;
}
/* ===== FIX: números 1-2-3 centrados en su cajita ===== */
#minimo .m2-min-step-n{
  display: grid !important;
  place-items: center !important;

  /* estabilidad visual */
  line-height: 1 !important;
  padding: 0 !important;
}
/* ===== Cards del grid: más “executive” sin agregar texto ===== */
#minimo .m2-min-card{
  position: relative;
  overflow: hidden;
}

/* header bar sutil dentro de la tarjeta */
#minimo .m2-min-card::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 62px;                 /* cae justo bajo el título/ícono */
  height: 1px;
  background: rgba(11,31,58,.08);
}

/* un “sheen” sutil para que no se vea plano */
#minimo .m2-min-card{
  background:
    radial-gradient(520px 220px at 12% 10%, rgba(10,103,194,.05), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.75));
}

/* iconito más serio (menos juguete) */
#minimo .m2-min-ic{
  background: rgba(10,103,194,.06) !important;
  border: 1px solid rgba(10,103,194,.12) !important;
}

/* bullets con “rail” para estructura visual */
#minimo .m2-min-card ul{
  margin-top: 14px !important;      /* separa del header bar */
  padding-left: 18px !important;
  position: relative;
}

/* rail vertical tenue */
#minimo .m2-min-card ul::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(11,31,58,.06);
}

/* bullets más sobrios */
#minimo .m2-min-card ul li{
  padding-left: 16px !important;
  font-size: 13.5px !important;
}

/* puntitos alineados al rail */
#minimo .m2-min-card ul li::before{
  width: 6px !important;
  height: 6px !important;
  top: 7px !important;
  left: 0 !important;
  background: rgba(10,103,194,.65) !important;
}

/* hover más profesional */
#minimo .m2-min-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(11,31,58,.10) !important;
}
/* ===== Bullets → checks minimalistas (más serio) ===== */
#minimo .m2-min-card ul li{
  padding-left: 22px !important; /* espacio para el check */
}

#minimo .m2-min-card ul li::before{
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 6px !important;
  position: absolute !important;
  left: 0 !important;
  top: 5px !important;

  /* “check” en SVG (sin imágenes) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230a67c2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;

  /* base sobria */
  background-color: rgba(10,103,194,.07) !important;
  border: 1px solid rgba(10,103,194,.14) !important;
}
/* ===== Cards: menos aire inútil, más estructura “executive” ===== */

/* Menos padding (sin que se vea apretado) */
#minimo .m2-min-card{
  padding: 18px 18px !important;
}

/* Título ligeramente más grande (sin verse raro) */
#minimo .m2-min-card h3{
  font-size: 16.5px !important;
  letter-spacing: -0.25px !important;
}

/* Lista: un poco más grande y con mejor altura */
#minimo .m2-min-card ul li{
  font-size: 14.2px !important;
  line-height: 1.42 !important;
}

/* Ajuste del “header bar” para que tenga intención */
#minimo .m2-min-card::after{
  top: 66px !important;
  background: rgba(11,31,58,.10) !important;
}

/* Footer visual (sin texto) para que la card no se sienta vacía abajo */
#minimo .m2-min-card{
  position: relative;
  overflow: hidden;
}

#minimo .m2-min-card .m2-min-card-foot{
  display:none; /* por si existe algo */
}

#minimo .m2-min-card::marker{
  content: "";
}

/* Un “fade” elegante en la esquina inferior derecha */


/* Usamos un nuevo glow con ::after? ya lo usamos, entonces creamos otra capa con box-shadow interno */
#minimo .m2-min-card{
  box-shadow:
    0 10px 18px rgba(11,31,58,.06),
    inset 0 -34px 60px rgba(10,103,194,.035) !important;
}
/* =========================================================
   #minimo — Cards uniformes + header a la izquierda
   (Pegar AL FINAL)
   ========================================================= */

/* 1) Grid: 2x2 parejo y cards estiradas igual */
#minimo .m2-min-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

#minimo .m2-min-card{
  height: 100% !important;
  min-height: 182px !important;  /* ajusta altura uniforme */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* 2) Header (ícono + título) alineado a la IZQUIERDA */
#minimo .m2-min-top{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

/* Quita cualquier centrado accidental */
#minimo .m2-min-card h3{
  text-align: left !important;
  margin: 0 !important;
}

/* Ícono: que no se vaya al centro */
#minimo .m2-min-ic{
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* 3) Lista: ocupa el espacio de forma consistente */
#minimo .m2-min-card ul{
  margin-top: 10px !important;
  gap: 8px !important;
}

/* 4) Normalizar padding para que las 4 queden iguales visualmente */
#minimo .m2-min-card{
  padding: 16px 16px !important;
}

/* 5) Reducir “aire” extra de las dos de arriba (Resumen/Gastos)
   y dar un poco más a las dos de abajo para igualar alturas.
   OJO: esto depende del orden 1-4 en el HTML (como lo tienes). */
#minimo .m2-min-card:nth-child(1),
#minimo .m2-min-card:nth-child(2){
  padding-bottom: 14px !important;
}

#minimo .m2-min-card:nth-child(3),
#minimo .m2-min-card:nth-child(4){
  padding-bottom: 18px !important;
}

/* 6) (Opcional) Si alguna tarjeta queda 1–2px distinta por el texto,
   esto fuerza que la lista distribuya mejor el espacio */
#minimo .m2-min-card ul{
  flex: 1 1 auto !important;
}
/* =========================================================
   #minimo — FIX header izquierda + bullets nuevos + sin línea
   Pegar AL FINAL de styles.css
   ========================================================= */

/* 1) Header (ícono + título) FORZADO a la izquierda */
#minimo .m2-min-card .m2-min-top{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
  padding-left: 0 !important;
}

#minimo .m2-min-card .m2-min-ic{
  margin: 0 !important;              /* quita cualquier centrado */
  margin-right: 0 !important;
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}

#minimo .m2-min-card .m2-min-top h3{
  margin: 0 !important;
  text-align: left !important;
}

/* Por si tu CSS metía centrado en el contenido de la card */
#minimo .m2-min-card{
  text-align: left !important;
}

/* 2) Quitar la línea vertical junto a las bullets */
#minimo .m2-min-card ul::before{
  display: none !important;
  content: none !important;
}

/* 3) Cambiar el ícono de bullets (adiós check),
      lo dejamos como “dot premium” sobrio */
#minimo .m2-min-card ul{
  list-style: none !important;
  padding-left: 0 !important; /* sin sangría rara */
}

#minimo .m2-min-card ul li{
  position: relative !important;
  padding-left: 18px !important;  /* espacio para el dot */
}

/* Dot serio, tipo banca (no infantil) */
#minimo .m2-min-card ul li::before{
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;

  background: rgba(10,103,194,.70) !important;
  box-shadow: 0 6px 14px rgba(10,103,194,.18) !important;

  /* quitamos cualquier SVG que se haya quedado */
  background-image: none !important;
  border: none !important;
}

/* (Opcional) si quieres aún más sobrio: dot con borde en vez de relleno
   — descomenta este bloque y comenta el de arriba
*/
/*
#minimo .m2-min-card ul li::before{
  background: transparent !important;
  border: 2px solid rgba(10,103,194,.55) !important;
  box-shadow: none !important;
}
*/
/* =========================================================
   #minimo — Tipografía + bullets únicos + textura glass/agua
   Pegar AL FINAL de styles.css
   ========================================================= */

/* 1) Texto un poco más grande (sin verse raro) */
#minimo .m2-min-card h3{
  font-size: 17px !important;
  letter-spacing: -0.25px !important;
}

#minimo .m2-min-card ul li{
  font-size: 14.7px !important;
  line-height: 1.48 !important;
  color: rgba(81,96,122,.98) !important;
}

/* 2) Bullets “únicos” sobrios (mini-tick editorial, no llamativo) */
#minimo .m2-min-card ul{
  list-style: none !important;
  padding-left: 0 !important;
}

#minimo .m2-min-card ul li{
  position: relative !important;
  padding-left: 22px !important; /* espacio para el icono */
}

/* Mini tick fino (no animado, no grande) */
#minimo .m2-min-card ul li::before{
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  border-radius: 6px !important;

  /* base tipo “glass” */
  background: rgba(10,103,194,.06) !important;
  border: 1px solid rgba(10,103,194,.16) !important;
  box-shadow: 0 10px 18px rgba(11,31,58,.06) !important;

  /* tick ultra minimal */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230b4aa2' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M20 7L10 17l-5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* 3) Textura tipo vidrio/agua/burbujas: MUY sutil y premium */
#minimo .m2-min-card{
  position: relative !important;
  overflow: hidden !important;

  /* “agua/vidrio”: brillo suave + profundidad */
  background:
    radial-gradient(420px 220px at 18% 12%, rgba(10,103,194,.08), rgba(255,255,255,0) 60%),
    radial-gradient(360px 220px at 82% 22%, rgba(11,31,58,.06), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.82)) !important;

  backdrop-filter: blur(6px);
}

/* “Sheen” (reflejo) diagonal tipo espejo */
#minimo .m2-min-card::after{
  content:"" !important;
  position:absolute !important;
  inset: -40% -60% auto auto !important;
  width: 180% !important;
  height: 120% !important;
  transform: rotate(18deg) !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 40%,
    rgba(255,255,255,0) 70%
  ) !important;
  pointer-events:none !important;
  opacity: .55 !important;
}

/* “Burbujas” ultra sutiles (no se ven como lunares; se ven como agua) */
#minimo .m2-min-card::before{
  content:"" !important;
  position:absolute !important;
  inset: 0 !important;
  pointer-events:none !important;

  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.35) 0 10px, rgba(255,255,255,0) 11px),
    radial-gradient(circle at 76% 22%, rgba(255,255,255,.26) 0 8px, rgba(255,255,255,0) 9px),
    radial-gradient(circle at 68% 78%, rgba(255,255,255,.22) 0 12px, rgba(255,255,255,0) 13px),
    radial-gradient(circle at 28% 82%, rgba(255,255,255,.18) 0 9px, rgba(255,255,255,0) 10px);
  opacity: .22 !important;
}

/* Mantén el contenido arriba de la textura */
#minimo .m2-min-card > *{
  position: relative;
  z-index: 1;
}

/* Quitar la línea vertical al lado de bullets si quedó por algo */
#minimo .m2-min-card ul::before{
  display:none !important;
  content:none !important;
}
/* =========================================================
   #minimo — bullets nuevos (sin palomita) + jerarquía de encabezado
   Pegar AL FINAL de styles.css
   ========================================================= */

/* ---------- 1) Bullets NUEVOS (sin palomita) ---------- */
/* Opción A (recomendada): "dash editorial" tipo banca */
#minimo .m2-min-card ul li{
  position: relative !important;
  padding-left: 18px !important;
}

#minimo .m2-min-card ul li::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 11px !important;

  width: 10px !important;
  height: 2px !important;
  border-radius: 999px !important;

  background: rgba(10,103,194,.70) !important;
  box-shadow: none !important;
  border: none !important;
  background-image: none !important;
}

/* Quita cualquier línea vertical si quedara de antes */
#minimo .m2-min-card ul::before{
  display: none !important;
  content: none !important;
}

/* ---------- 2) Texto más legible sin verse “zoom” ---------- */
#minimo .m2-min-card h3{
  font-size: 16.5px !important;
  letter-spacing: -0.25px !important;
}

#minimo .m2-min-card ul li{
  font-size: 14.6px !important;
  line-height: 1.5 !important;
  color: rgba(81,96,122,.95) !important;
}

/* ---------- 3) Encabezado de la sección: coherente con la página ---------- */
/* Kicker como el resto (sobrio, espaciado) */
#minimo .m2-min-kicker{
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: rgba(81,96,122,.90) !important;
  margin-bottom: 12px !important;
}

/* Título: igualar a tus títulos grandes */
#minimo .m2-min-title{
  font-size: clamp(28px, 3.2vw, 44px) !important; /* mismo “look” que .section-title */
  line-height: 1.08 !important;
  letter-spacing: -0.6px !important;
  color: var(--ink) !important;
  margin-bottom: 12px !important;
}

/* Subtítulo: como section-subtitle */
#minimo .m2-min-sub{
  font-size: 18px !important;
  color: var(--muted) !important;
  max-width: 820px !important;
  margin-bottom: 14px !important;
}

/* Chips: más discretos para no competir con el título */
#minimo .m2-min-chip{
  font-size: 13px !important;
  padding: 6px 10px !important;
  box-shadow: 0 10px 18px rgba(11,31,58,.05) !important;
}
#minimo .m2-min-card ul li::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;

  width: 8px !important;
  height: 8px !important;
  transform: rotate(45deg) !important;

  background: transparent !important;
  border: 1.6px solid rgba(10,103,194,.65) !important;
  border-radius: 2px !important;
}
/* ===== Fix: bullet (diamond) perfectamente centrado con la línea ===== */
#minimo .m2-min-card ul li{
  position: relative !important;
}

#minimo .m2-min-card ul li::before{
  top: 0.72em !important;          /* se ajusta al tamaño real del texto */
  transform: translateY(-50%) rotate(45deg) !important;
}
/* =========================
   FAQ (Mensual) — look banca / JPM
   ========================= */

.faq2-head{ margin-bottom: 14px; }

.faq2-grid{
  display: grid;
  grid-template-columns: .95fr 1.25fr;
  gap: 16px;
  align-items: start;
  margin-top: 10px;
}

@media (max-width: 980px){
  .faq2-grid{ grid-template-columns: 1fr; }
}

.faq2-card{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background:
    radial-gradient(520px 240px at 18% 10%, rgba(10,103,194,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), #f6f9fc);
  box-shadow: 0 18px 50px rgba(11,31,58,.10);
  padding: 18px;
}

.faq2-card h3{
  margin: 0 0 6px;
  letter-spacing: -0.3px;
  color: rgba(11,31,58,.95);
}

.faq2-trust{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.faq2-trust-item{
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.70);
}

.faq2-dot{
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(10,103,194,.75);
}

.faq2-trust-item b{
  display:block;
  font-size: 13.5px;
  color: rgba(11,31,58,.92);
  margin-bottom: 2px;
}

.faq2-trust-item span{
  display:block;
  font-size: 13.5px;
  color: rgba(81,96,122,.92);
  line-height: 1.4;
}

.faq2-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.faq2-mini{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(81,96,122,.92);
  padding-top: 12px;
  border-top: 1px solid rgba(11,31,58,.08);
}

/* Etiquetas dentro de summary (derecha) */
.faq2-list .svc-acc summary{
  gap: 10px;
}

.faq2-q{
  font-weight: 800;
}

.faq2-tag{
  font-size: 12px;
  font-weight: 800;
  color: rgba(10,103,194,.90);
  background: rgba(10,103,194,.08);
  border: 1px solid rgba(10,103,194,.14);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Estado open: un poco más “premium” */
.faq2-list .svc-acc[open]{
  border-color: rgba(10,103,194,.16);
  box-shadow: 0 20px 60px rgba(11,31,58,.08);
}

.faq2-list .svc-acc[open] .svc-acc-body{
  animation: faqFade .18s ease both;
}

@keyframes faqFade{
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faq2-foot{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.faq2-foot b{ color: rgba(11,31,58,.92); }
/* =========================
   FAQ v3 — chips + 2 columnas (banca, sin “cuadro grande”)
   ========================= */

.faq3-head{
  margin-bottom: 14px;
}

.faq3-meta{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.faq3-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(11,31,58,.85);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 18px rgba(11,31,58,.05);
  white-space: nowrap;
}

/* CTA pegado a los chips pero sin amontonarse */
.faq3-actions{
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .faq3-actions{ margin-left: 0; }
}

/* Grid de FAQs: 2 columnas para evitar “letanía” */
.faq3-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.faq3-col{
  display: grid;
  gap: 10px;
}

@media (max-width: 980px){
  .faq3-grid{ grid-template-columns: 1fr; }
}

/* Pequeño ajuste visual para tags dentro del summary */
#faq .svc-acc summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Footer */
.faq3-foot{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.faq3-foot b{ color: rgba(11,31,58,.92); }
/* =========================
   FAQ (mensual) — chips + 2 columnas, sin cuadro grande
   ========================= */

.faq3-head{ margin-bottom: 14px; }

.faq3-meta{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.faq3-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(11,31,58,.85);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 18px rgba(11,31,58,.05);
  white-space: nowrap;
}

.faq3-actions{
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .faq3-actions{ margin-left: 0; }
}

/* 2 columnas para evitar “letanía” */
.faq3-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.faq3-col{
  display: grid;
  gap: 10px;
}

@media (max-width: 980px){
  .faq3-grid{ grid-template-columns: 1fr; }
}

/* Tag a la derecha dentro del summary */
.faq3-q{ font-weight: 900; }

.faq3-tag{
  font-size: 12px;
  font-weight: 900;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.14);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Footer */
.faq3-foot{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.faq3-foot b{ color: rgba(11,31,58,.92); }
/* =========================================================
   FAQ — quitar “cuadro izquierdo” y dejar SOLO chips
   + preguntas ocupan todo el ancho
   ========================================================= */

/* 1) La grilla del FAQ deja de ser 2 columnas (ya no hay cuadro izquierdo) */
#faq .faq2-grid{
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* 2) Convertir el bloque izquierdo en “barra de chips” */
#faq .faq2-intro{
  grid-column: 1 / -1 !important;
  order: -1 !important;
}

/* Quitar apariencia de “card grande” */
#faq .faq2-card{
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Ocultar el título y párrafo del cuadro (solo queremos chips) */
#faq .faq2-card h3,
#faq .faq2-card p{
  display: none !important;
}

/* Trust items -> chips */
#faq .faq2-trust{
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Cada item se vuelve chip */
#faq .faq2-trust-item{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 7px 12px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(11,31,58,.10) !important;
  box-shadow: 0 10px 18px rgba(11,31,58,.05) !important;

  grid-template-columns: initial !important;
}

/* Ocultar el texto largo (solo “títulos”) */
#faq .faq2-trust-item span{
  display: none !important;
}

/* Punto/ícono del chip */
#faq .faq2-dot{
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(10,103,194,.75) !important;
}

/* 3) Botones (si quieres dejarlos): compactos y alineados */
#faq .faq2-actions{
  margin-top: 10px !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* La línea y “respuesta típica” no como bloque grande */
#faq .faq2-mini{
  margin-top: 10px !important;
  padding-top: 0 !important;
  border-top: none !important;
  display: inline-flex !important;
  align-items: center !important;

  padding: 7px 12px !important;
  border-radius: 999px !important;

  background: rgba(29,78,216,.06) !important;
  border: 1px solid rgba(29,78,216,.14) !important;
  box-shadow: 0 10px 18px rgba(11,31,58,.05) !important;
}

/* 4) Preguntas ocupan TODO el ancho */
#faq .faq2-list{
  grid-column: 1 / -1 !important;
}

/* Opcional: para que no se vea “letanía”, 2 columnas de preguntas en desktop */
#faq .faq2-list{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: start !important;
}

/* En móvil: 1 columna */
@media (max-width: 980px){
  #faq .faq2-list{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   FAQ v4 (nuevo) — estilo banca / Deloitte, sin columna izquierda
   ========================================================= */

#faq.faq4{
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(29,78,216,.10), transparent 58%),
    radial-gradient(900px 520px at 92% 22%, rgba(11,31,58,.06), transparent 58%),
    linear-gradient(180deg, rgba(246,249,252,.92), rgba(255,255,255,.98));
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.faq4-head{ margin-bottom: 14px; }

/* Barra: chips + botones alineados (nada flotando) */
.faq4-bar{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.faq4-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faq4-chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 26px rgba(11,31,58,.06);
  font-weight: 850;
  font-size: 13px;
  color: rgba(11,31,58,.86);
}

.faq4-chip.is-soft{
  border-color: rgba(29,78,216,.16);
  background: rgba(29,78,216,.06);
  color: rgba(29,78,216,.92);
}

.faq4-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Lista: una sola columna, se ve ordenado siempre */
.faq4-list{
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

/* Acordeón “pro” (no dependemos del .svc-acc para evitar conflictos) */
.faq4-item{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(15,23,42,.06);
  overflow: hidden;
}

.faq4-item summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq4-item summary::-webkit-details-marker{ display:none; }

.faq4-q{
  font-weight: 950;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.2px;
  flex: 1 1 auto;
}

/* Tag */
.faq4-tag{
  font-size: 12px;
  font-weight: 900;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.14);
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Icono chevron (más Deloitte, menos +) */
.faq4-item summary::after{
  content: "⌄";
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(11,31,58,.02);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: rgba(11,31,58,.70);
  flex: 0 0 auto;
  transition: transform .18s ease, background .18s ease;
}

/* Open state */
.faq4-item[open]{
  border-color: rgba(29,78,216,.18);
  box-shadow: 0 26px 90px rgba(15,23,42,.08);
}

.faq4-item[open] summary{
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(29,78,216,.10), transparent 60%),
    rgba(255,255,255,.92);
}

.faq4-item[open] summary::after{
  transform: rotate(-180deg);
  background: rgba(29,78,216,.06);
}

/* Body */
.faq4-body{
  padding: 0 18px 16px 18px;
  color: rgba(11,31,58,.74);
  font-size: 14.5px;
  line-height: 1.7;
}

/* Hover fino */
.faq4-item:hover{
  border-color: rgba(29,78,216,.16);
}
/* =========================================================
   FAQ v8 — “board” premium: buscador + filtros + grid cards
   ========================================================= */

#faq.faq8{
  background:
    radial-gradient(1000px 520px at 10% 0%, rgba(10,103,194,.10), transparent 58%),
    radial-gradient(900px 520px at 92% 26%, rgba(11,31,58,.06), transparent 58%),
    linear-gradient(180deg, rgba(246,249,252,.92), rgba(255,255,255,.98));
  border-top: 1px solid rgba(11,31,58,.08);
  border-bottom: 1px solid rgba(11,31,58,.08);
}

.faq8-topline{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.faq8-chips{ display:flex; flex-wrap:wrap; gap:10px; }

.faq8-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.80);
  box-shadow: 0 14px 30px rgba(11,31,58,.06);
  font-weight: 800;
  font-size: 13px;
  color: rgba(11,31,58,.86);
}

.faq8-chip.is-soft{
  border-color: rgba(10,103,194,.18);
  background: rgba(10,103,194,.07);
  color: rgba(10,103,194,.98);
}

.faq8-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Controls: buscador + filtros */
.faq8-controls{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;

  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(11,31,58,.08);
}

.faq8-search{
  flex: 1 1 320px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(255,255,255,.85);
}

.faq8-search input{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: rgba(11,31,58,.86);
}

.faq8-search-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(10,103,194,.08);
  border: 1px solid rgba(10,103,194,.16);
  flex: 0 0 auto;
}

.faq8-svg{
  width: 18px;
  height: 18px;
  stroke: rgba(11,31,58,.86);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq8-filters{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content:flex-end;
  flex: 1 1 420px;
}

.faq8-filter{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 13px;
  color: rgba(11,31,58,.78);
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.faq8-filter:hover{
  transform: translateY(-1px);
  border-color: rgba(10,103,194,.20);
}

.faq8-filter.is-active{
  background: rgba(10,103,194,.08);
  border-color: rgba(10,103,194,.22);
  color: rgba(10,103,194,.98);
}

/* Grid de tarjetas */
.faq8-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px){
  .faq8-grid{ grid-template-columns: 1fr; }
}

/* Card */
.faq8-card{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(11,31,58,.06);
  overflow:hidden;
  position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.faq8-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.12));
}

.faq8-card::after{
  content:"";
  position:absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  top: -90px;
  background: radial-gradient(circle, rgba(10,103,194,.12), rgba(10,103,194,0) 70%);
  pointer-events:none;
}

.faq8-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(11,31,58,.09);
  border-color: rgba(10,103,194,.18);
}

.faq8-card[open]{
  border-color: rgba(10,103,194,.24);
  box-shadow: 0 24px 70px rgba(11,31,58,.10);
}

/* Summary */
.faq8-card summary{
  list-style:none;
  cursor:pointer;
  padding: 14px 14px 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.faq8-card summary::-webkit-details-marker{ display:none; }

.faq8-q{
  font-weight: 850;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.2px;
  font-size: 15.5px;
  line-height: 1.25;
  max-width: 52ch;
}

.faq8-meta{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.faq8-tag{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.90);
  color: rgba(11,31,58,.78);
  font-weight: 800;
  font-size: 12px;
}

/* + / - pro */
.faq8-plus{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 18px rgba(11,31,58,.07);
  background-image:
    linear-gradient(rgba(11,31,58,.70), rgba(11,31,58,.70)),
    linear-gradient(rgba(11,31,58,.70), rgba(11,31,58,.70));
  background-size: 14px 2px, 2px 14px;
  background-position: center, center;
  background-repeat: no-repeat;
}

.faq8-card[open] .faq8-plus{
  background-image: linear-gradient(rgba(11,31,58,.70), rgba(11,31,58,.70));
  background-size: 14px 2px;
}

/* Body */
.faq8-body{
  padding: 0 14px 14px 18px;
  color: rgba(11,31,58,.72);
  line-height: 1.7;
  font-size: 14.5px;
}

/* Ocultar cards por filtro/búsqueda */
.faq8-card.is-hidden{ display:none; }

/* CTA final */
.faq8-cta{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;

  padding: 16px 16px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background:
    radial-gradient(520px 280px at 18% 20%, rgba(10,103,194,.14), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,252,.96));
  box-shadow: 0 18px 60px rgba(11,31,58,.07);
}

.faq8-cta-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.faq8-cta-text b{
  color: rgba(11,31,58,.92);
  letter-spacing: -0.2px;
}

.faq8-cta-text span{
  color: rgba(11,31,58,.70);
  font-size: 13.5px;
}
/* =========================================================
   FAQ Prime — diseño único (2 columnas) alineado a Hercob
   ========================================================= */

#faq.faqPrime{
  background:
    radial-gradient(980px 540px at 10% 0%, rgba(10,103,194,.10), transparent 60%),
    radial-gradient(900px 520px at 92% 28%, rgba(11,31,58,.06), transparent 58%),
    linear-gradient(180deg, rgba(246,249,252,.92), rgba(255,255,255,.98));
  border-top: 1px solid rgba(11,31,58,.08);
  border-bottom: 1px solid rgba(11,31,58,.08);
}

/* Head */
.faqPrime-head{ max-width: 980px; }

.faqPrime-kicker{
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;
  color: rgba(11,31,58,.55);
  text-transform: uppercase;
}

.faqPrime-title{
  margin: 10px 0 0;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.8px;
  color: rgba(11,31,58,.95);
}

.faqPrime-sub{
  margin-top: 10px;
  color: rgba(81,96,122,.92);
  font-size: 17px;
  max-width: 900px;
}

.faqPrime-topActions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* Grid */
.faqPrime-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: .95fr 1.25fr;
  gap: 18px;
  align-items:start;
}

@media (max-width: 980px){
  .faqPrime-grid{ grid-template-columns: 1fr; }
}

/* Left panel */
.faqPrime-panel{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 80px rgba(11,31,58,.10);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.faqPrime-panel::after{
  content:"";
  position:absolute;
  width: 340px;
  height: 340px;
  left: -160px;
  top: -180px;
  background: radial-gradient(circle, rgba(10,103,194,.14), rgba(10,103,194,0) 70%);
  pointer-events:none;
}

.faqPrime-panelTitle{
  font-weight: 900;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

.faqPrime-panelText{
  color: rgba(11,31,58,.72);
  line-height: 1.7;
  font-size: 15px;
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
}

.faqPrime-miniCards{
  display:grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.faqPrime-miniCard{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 14px 34px rgba(11,31,58,.06);
}

.faqPrime-miniCard b{
  display:block;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.2px;
}

.faqPrime-miniCard span{
  display:block;
  margin-top: 2px;
  color: rgba(11,31,58,.70);
  font-size: 13.5px;
}

.faqPrime-miniIcon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(10,103,194,.08);
  border: 1px solid rgba(10,103,194,.16);
  flex: 0 0 auto;
}

.faqPrime-svg{
  width: 18px;
  height: 18px;
  stroke: rgba(11,31,58,.86);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faqPrime-leftCta{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;

  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(10,103,194,.16);
  background: rgba(10,103,194,.06);
  position: relative;
  z-index: 1;
}

.faqPrime-leftCta b{ color: rgba(11,31,58,.92); }
.faqPrime-leftCta span{
  display:block;
  margin-top: 4px;
  color: rgba(11,31,58,.70);
  font-size: 13.5px;
}

/* Right accordion card */
.faqPrime-accordionCard{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 26px 90px rgba(11,31,58,.10);
  overflow:hidden;
  position: relative;
}

.faqPrime-accordionCard::after{
  content:"";
  position:absolute;
  width: 360px;
  height: 360px;
  right: -170px;
  top: -190px;
  background: radial-gradient(circle, rgba(10,103,194,.12), rgba(10,103,194,0) 70%);
  pointer-events:none;
}

.faqPrime-accHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.65);
}

.faqPrime-accKicker{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,31,58,.55);
}

.faqPrime-accTitle{
  font-weight: 900;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.25px;
  margin-top: 6px;
}

.faqPrime-accHint{
  font-size: 12.5px;
  color: rgba(11,31,58,.55);
}

/* Items */
.faqPrime-item{
  border-bottom: 1px solid rgba(11,31,58,.08);
  position: relative;
}

.faqPrime-item:last-child{ border-bottom: none; }

/* Barra lateral “propia” (marca Hercob) */
.faqPrime-item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 3px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.10));
  opacity: 0;
  transition: opacity .16s ease;
}

.faqPrime-item[open]::before{ opacity: 1; }

.faqPrime-item summary{
  list-style:none;
  cursor:pointer;
  padding: 16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.faqPrime-item summary::-webkit-details-marker{ display:none; }

.faqPrime-q{
  font-weight: 900;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.2px;
  font-size: 16px;
  line-height: 1.25;
  max-width: 62ch;
}

.faqPrime-meta{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.faqPrime-tag{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.90);
  color: rgba(11,31,58,.78);
  font-weight: 800;
  font-size: 12px;
}

/* Chevron único (no el + típico) */
.faqPrime-chevron{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 22px rgba(11,31,58,.08);
  position: relative;
}

.faqPrime-chevron::before{
  content:"";
  position:absolute;
  inset: 0;
  margin:auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(11,31,58,.70);
  border-bottom: 2px solid rgba(11,31,58,.70);
  transform: rotate(45deg);
  transition: transform .18s ease;
}

.faqPrime-item[open] .faqPrime-chevron::before{
  transform: rotate(-135deg);
}

.faqPrime-body{
  padding: 0 16px 16px 16px;
  color: rgba(11,31,58,.74);
  font-size: 15px;
  line-height: 1.75;
}

/* Footer inside accordion */
.faqPrime-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
  padding: 14px 16px;
  border-top: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.65);
  color: rgba(11,31,58,.62);
  font-size: 13px;
}
/* =========================================================
   FAQ Obj2 — Temas colapsados + preguntas internas
   ========================================================= */

#faq.faqObj2{
  background:
    radial-gradient(980px 540px at 10% 0%, rgba(10,103,194,.10), transparent 60%),
    radial-gradient(900px 520px at 92% 28%, rgba(11,31,58,.06), transparent 58%),
    linear-gradient(180deg, rgba(246,249,252,.92), rgba(255,255,255,.98));
  border-top: 1px solid rgba(11,31,58,.08);
  border-bottom: 1px solid rgba(11,31,58,.08);
}

.faqObj2-kicker{
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;
  color: rgba(11,31,58,.55);
  text-transform: uppercase;
}
.faqObj2-title{
  margin: 10px 0 0;
  font-size: clamp(34px, 3.1vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.8px;
  color: rgba(11,31,58,.95);
}
.faqObj2-sub{
  margin-top: 10px;
  color: rgba(81,96,122,.92);
  font-size: 17px;
  max-width: 920px;
}
.faqObj2-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.faqObj2-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: .95fr 1.35fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .faqObj2-grid{ grid-template-columns: 1fr; }
}

/* Panel izquierdo */
.faqObj2-panel{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 80px rgba(11,31,58,.10);
  padding: 16px;
  position: relative;
  overflow:hidden;
}
.faqObj2-panel::after{
  content:"";
  position:absolute;
  width: 340px; height: 340px;
  left:-170px; top:-190px;
  background: radial-gradient(circle, rgba(10,103,194,.14), rgba(10,103,194,0) 70%);
  pointer-events:none;
}
.faqObj2-panelHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.faqObj2-panelKicker{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,31,58,.55);
}
.faqObj2-panelTitle{
  font-weight: 900;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.25px;
  margin-top: 6px;
}
.faqObj2-pill{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,103,194,.18);
  background: rgba(10,103,194,.07);
  color: rgba(10,103,194,.98);
  font-weight: 900;
  font-size: 12px;
}

.faqObj2-keyList{
  margin-top: 12px;
  display:grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.faqObj2-key{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(11,31,58,.06);
  overflow:hidden;
  position: relative;
}
.faqObj2-key summary{
  list-style:none;
  cursor:pointer;
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-weight: 900;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.2px;
}
.faqObj2-key summary::-webkit-details-marker{ display:none; }

.faqObj2-body{
  padding: 0 14px 14px 14px;
  color: rgba(11,31,58,.74);
  font-size: 14.8px;
  line-height: 1.75;
}

.faqObj2-panelCta{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;

  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(10,103,194,.16);
  background: rgba(10,103,194,.06);
  position: relative;
  z-index: 1;
}
.faqObj2-panelCta b{ color: rgba(11,31,58,.92); }
.faqObj2-panelCta span{
  display:block;
  margin-top: 4px;
  color: rgba(11,31,58,.70);
  font-size: 13.5px;
}

/* Derecha */
.faqObj2-rightHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.faqObj2-rightKicker{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,31,58,.55);
}
.faqObj2-rightTitle{
  font-weight: 900;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.25px;
  margin-top: 6px;
}
.faqObj2-rightHint{
  font-size: 13px;
  color: rgba(11,31,58,.55);
}

/* TOPICS: tarjetas cerradas (solo título) */
.faqObj2-topics{
  display:grid;
  gap: 10px;
}

.faqObj2-topic{
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(11,31,58,.08);
  overflow:hidden;
  position: relative;
}

.faqObj2-topic::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, rgba(10,103,194,.95), rgba(10,103,194,.10));
  opacity: .85;
}

.faqObj2-topic summary{
  list-style:none;
  cursor:pointer;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.faqObj2-topic summary::-webkit-details-marker{ display:none; }

.faqObj2-topicTitle{
  font-weight: 900;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.2px;
  font-size: 15.5px;
}

.faqObj2-topicMeta{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.faqObj2-topicCount{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.88);
  font-weight: 900;
  font-size: 12px;
  color: rgba(11,31,58,.70);
}

.faqObj2-chev{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 22px rgba(11,31,58,.08);
  position: relative;
}
.faqObj2-chev::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(11,31,58,.70);
  border-bottom: 2px solid rgba(11,31,58,.70);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faqObj2-topic[open] .faqObj2-chev::before{
  transform: rotate(-135deg);
}

.faqObj2-topicInner{
  border-top: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.40);
  padding: 10px;
  display:grid;
  gap: 8px;
}

/* Preguntas internas (compactas) */
.faqObj2-q{
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.92);
  overflow:hidden;
}

.faqObj2-q summary{
  list-style:none;
  cursor:pointer;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight: 850;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.15px;
  font-size: 14.4px;
}
.faqObj2-q summary::-webkit-details-marker{ display:none; }

/* Botón + / - reutilizable */
.faqObj2-plus{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(246,249,252,.88);
  box-shadow: 0 10px 18px rgba(11,31,58,.07);
  flex: 0 0 auto;

  background-image:
    linear-gradient(rgba(11,31,58,.70), rgba(11,31,58,.70)),
    linear-gradient(rgba(11,31,58,.70), rgba(11,31,58,.70));
  background-size: 14px 2px, 2px 14px;
  background-position: center, center;
  background-repeat: no-repeat;
}

details[open] > summary .faqObj2-plus{
  background-image: linear-gradient(rgba(11,31,58,.70), rgba(11,31,58,.70));
  background-size: 14px 2px;
}
/* ===== FAQ Obj2 — Mejor contraste al desplegar temas/preguntas ===== */

/* 1) Tema abierto: que “salte” y no se confunda con los temas de abajo */
.faqObj2-topic[open]{
  border-color: rgba(10,103,194,.28);
  box-shadow: 0 28px 92px rgba(11,31,58,.14);
}
.faqObj2-topic[open] > summary{
  background: linear-gradient(90deg, rgba(10,103,194,.10), rgba(255,255,255,0));
}
.faqObj2-topic > summary{
  transition: background .18s ease;
}
.faqObj2-topic > summary:hover{
  background: rgba(10,103,194,.06);
}

/* 2) Panel interno (preguntas) con look “inset” para diferenciarlo del listado de temas */
.faqObj2-topicInner{
  border-top: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.40);
  padding: 10px;
  display:grid;
  gap: 8px;

  /* nuevo: contador para numerar preguntas */
  counter-reset: faqQ;
}
.faqObj2-topic[open] .faqObj2-topicInner{
  background: linear-gradient(180deg, rgba(10,103,194,.07), rgba(246,249,252,.70));
  border-top-color: rgba(10,103,194,.18);
  box-shadow: inset 0 0 0 1px rgba(10,103,194,.14);
}

/* 3) Preguntas internas: tono distinto (azul suave), numeración y resaltado al abrir */
.faqObj2-q{
  border-radius: 16px;
  border: 1px solid rgba(10,103,194,.14);
  background: rgba(255,255,255,.95);
  overflow:hidden;
}

.faqObj2-q summary{
  list-style:none;
  cursor:pointer;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  /* nuevo: fondo azul suave para que NO parezca “otro tema” */
  background: rgba(10,103,194,.06);
  font-weight: 850;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.15px;
  font-size: 14.2px;
  transition: background .18s ease;
}
.faqObj2-q summary::-webkit-details-marker{ display:none; }

.faqObj2-q summary:hover{
  background: rgba(10,103,194,.09);
}

/* Numeración “01.” para orientar dentro de cada tema */
.faqObj2-q summary > span:first-child::before{
  counter-increment: faqQ;
  content: counter(faqQ, decimal-leading-zero) ". ";
  color: rgba(10,103,194,.98);
  font-weight: 950;
  margin-right: 6px;
}

/* Estado abierto de la pregunta */
.faqObj2-q[open]{
  border-color: rgba(10,103,194,.26);
  box-shadow: 0 14px 40px rgba(11,31,58,.10);
}
.faqObj2-q[open] > summary{
  background: rgba(10,103,194,.12);
  border-bottom: 1px solid rgba(10,103,194,.18);
}
.faqObj2-q[open] > summary .faqObj2-plus{
  border-color: rgba(10,103,194,.26);
  background: rgba(10,103,194,.10);
}

/* Opcional: cuerpo un poquito más aireado SOLO en preguntas internas */
.faqObj2-q .faqObj2-body{
  padding-top: 10px;
}
/* =========================================================
   DINAMISMO VISUAL (solo mensual) — sin mover estructura
   ========================================================= */
.page-mensual{
  /* Ajusta estos 3 si quieres */
  --ink: rgba(11,31,58,.92);
  --muted: rgba(11,31,58,.66);
  --line: rgba(11,31,58,.10);

  --bandA: rgba(255,255,255,1);
  --bandB: rgba(10,103,194,.04);
  --accent: rgba(10,103,194,1);
}

/* 1) Fondo general con “blobs” súper sutiles */
.page-mensual body,
.page-mensual{
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 10% 8%, rgba(10,103,194,.10), transparent 55%),
    radial-gradient(900px 600px at 92% 22%, rgba(10,103,194,.07), transparent 60%),
    radial-gradient(900px 600px at 35% 95%, rgba(11,31,58,.06), transparent 60%),
    linear-gradient(180deg, rgba(248,250,253,1), rgba(255,255,255,1) 40%, rgba(248,250,253,.9));
}

/* 2) Bandas por sección (si tu contenido usa <main><section>...) */
.page-mensual main section{
  position: relative;
}
.page-mensual main section:nth-of-type(odd){
  background: var(--bandA);
}
.page-mensual main section:nth-of-type(even){
  background: var(--bandB);
}

/* Si tus secciones NO son <section> y son .section, activa esto:
.page-mensual .section:nth-of-type(odd){ background: var(--bandA); }
.page-mensual .section:nth-of-type(even){ background: var(--bandB); }
*/

/* 3) Separadores sutiles arriba de cada banda (no intrusivos) */
.page-mensual main section::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  opacity: .9;
}
.page-mensual main section:first-of-type::before{ display:none; }

/* 4) Títulos: underline elegante para guiar el ojo */
.page-mensual h2{
  position: relative;
  color: var(--ink);
}
.page-mensual h2::after{
  content:"";
  display:block;
  width: 56px;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(10,103,194,.95), rgba(10,103,194,.08));
}

/* 5) Cards/paneles: un pelín más “premium” para evitar monotonía */
.page-mensual .card,
.page-mensual .panel,
.page-mensual .faqObj2-topic,
.page-mensual .faqObj2-q,
.page-mensual .faqCard{
  border-color: rgba(11,31,58,.10);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
}

/* 6) Texto secundario un poco más suave (menos cansado) */
.page-mensual p,
.page-mensual .muted,
.page-mensual .subtext{
  color: var(--muted);
}

/* 7) Botones/link “ghost” con hover más notable pero elegante */
.page-mensual a:hover{
  text-decoration-color: rgba(10,103,194,.35);
}
/* =========================================
   SERVICIO: EXPANSIÓN — premium polish
   (sin mover estructura)
========================================= */
body.svc-expansion .svc-hero--expansion{
  position: relative;
  overflow: hidden;
  padding: 120px 0 88px;
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(29,78,216,.10), rgba(29,78,216,0) 60%),
    radial-gradient(760px 460px at 85% 25%, rgba(96,165,250,.10), rgba(96,165,250,0) 60%),
    linear-gradient(180deg, rgba(246,249,252,1) 0%, rgba(255,255,255,1) 70%);
}

body.svc-expansion .svc-hero-wave--exp{
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  width:100%;
  height: 84px;
  z-index: 2;
}
body.svc-expansion .svc-hero-wave--exp path{
  fill: #ffffff;
  opacity: 1;
}

/* Decor (orbes suaves tipo banca) */
body.svc-expansion .exp-decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
}
body.svc-expansion .exp-orb{
  position:absolute;
  border-radius: 999px;
  filter: blur(0px);
  animation: expFloat 14s ease-in-out infinite;
}
body.svc-expansion .exp-orb-a{
  width: 320px; height: 320px;
  left: -90px; top: 120px;
  background: radial-gradient(circle at 30% 30%, rgba(29,78,216,.18), rgba(29,78,216,0) 65%);
  animation-duration: 12s;
}
body.svc-expansion .exp-orb-b{
  width: 260px; height: 260px;
  right: -70px; top: 70px;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.16), rgba(96,165,250,0) 65%);
  animation-duration: 14s;
}
body.svc-expansion .exp-orb-c{
  width: 220px; height: 220px;
  left: 46%; bottom: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(11,31,58,.12), rgba(11,31,58,0) 70%);
  animation-duration: 16s;
}
body.svc-expansion .exp-sheen{
  position:absolute;
  inset: -120px -120px auto -120px;
  height: 420px;
  background: linear-gradient(120deg,
    rgba(29,78,216,.08) 0%,
    rgba(255,255,255,0) 45%,
    rgba(96,165,250,.07) 100%
  );
  opacity: .60;
}
@keyframes expFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* Trust cards del hero */
body.svc-expansion .exp-trust{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.svc-expansion .exp-trust-item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(11,31,58,.12);
  border-radius: 18px;
  padding: 12px 12px;
  box-shadow: 0 14px 32px rgba(11,31,58,.08);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.svc-expansion .exp-trust-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(11,31,58,.12);
  border-color: rgba(29,78,216,.22);
}
body.svc-expansion .exp-ti-ico{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.16);
  font-size: 18px;
  flex: 0 0 auto;
}
body.svc-expansion .exp-ti-txt b{
  display:block;
  color: rgba(11,31,58,.92);
  font-weight: 900;
  font-size: 13.5px;
  margin-bottom: 2px;
}
body.svc-expansion .exp-ti-txt span{
  display:block;
  color: rgba(11,31,58,.68);
  font-weight: 650;
  font-size: 12.5px;
  line-height: 1.35;
}

body.svc-expansion .exp-hero-note{
  margin-top: 10px;
  color: rgba(11,31,58,.70);
  font-size: 13.5px;
}

/* Mini nota bajo el scorecard */
body.svc-expansion .exp-mini-note{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
  color: rgba(11,31,58,.74);
  font-size: 13px;
}

/* Meta discreta en cards */
body.svc-expansion .exp-card-meta{
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(11,31,58,.66);
  font-weight: 700;
}

/* Píldoras “Sí / No / Sí con condiciones” */
body.svc-expansion .exp-pillrow{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
body.svc-expansion .exp-pill{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.16);
  background: rgba(29,78,216,.06);
  color: rgba(11,31,58,.86);
  font-weight: 850;
  font-size: 12.5px;
}

/* Lista mini numerada (panel derecho info mínima) */
body.svc-expansion .exp-steps-mini{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(11,31,58,.72);
  font-size: 13.5px;
  line-height: 1.55;
  display:grid;
  gap: 8px;
}

/* Ajustes responsive */
@media (max-width: 980px){
  body.svc-expansion .exp-trust{ grid-template-columns: 1fr; }
  body.svc-expansion .svc-hero--expansion{ padding: 105px 0 70px; }
}
/* =========================================
   HERO NUEVO — Evaluación de Expansión
   (premium, sin “dashboard” y sin emojis)
========================================= */

body.svc-expansion .expHero{
  position: relative;
  overflow: hidden;
  padding: 112px 0 72px;
}

body.svc-expansion .expHero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(29,78,216,.12), rgba(29,78,216,0) 60%),
    radial-gradient(760px 460px at 88% 24%, rgba(96,165,250,.10), rgba(96,165,250,0) 62%),
    linear-gradient(180deg, rgba(246,249,252,1) 0%, rgba(255,255,255,1) 72%);
  z-index: 0;
}

/* pattern muy sutil tipo “banca” */
body.svc-expansion .expHero::before{
  content:"";
  position:absolute;
  inset:-40px -40px -40px -40px;
  background:
    linear-gradient(90deg, rgba(11,31,58,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11,31,58,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 25% 25%, rgba(0,0,0,.55), transparent 60%);
  opacity: .22;
  z-index: 0;
  pointer-events:none;
}

body.svc-expansion .expHero .container{ position: relative; z-index: 1; }

body.svc-expansion .expHero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: start;
}

body.svc-expansion .expHero__title{
  margin: 10px 0 10px;
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

body.svc-expansion .expHero__lead{
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(11,31,58,.74);
}

body.svc-expansion .expHero__points{
  display:grid;
  gap: 10px;
  margin: 12px 0 16px;
}

body.svc-expansion .expPoint{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,31,58,.12);
  box-shadow: 0 16px 42px rgba(11,31,58,.08);
  backdrop-filter: blur(10px);
}

body.svc-expansion .expPoint__icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.16);
  color: rgba(29,78,216,.95);
  flex: 0 0 auto;
}
body.svc-expansion .expPoint__icon svg{
  width: 18px; height: 18px;
}

body.svc-expansion .expPoint__text b{
  display:block;
  font-weight: 900;
  color: rgba(11,31,58,.92);
  font-size: 13.8px;
  margin-bottom: 2px;
}
body.svc-expansion .expPoint__text span{
  display:block;
  color: rgba(11,31,58,.68);
  font-weight: 650;
  font-size: 12.8px;
  line-height: 1.35;
}

body.svc-expansion .expHero__note{
  margin-top: 10px;
  color: rgba(11,31,58,.68);
  font-size: 13.5px;
}

/* Panel derecho (brief) — nuevo look */
body.svc-expansion .expHero__panel{
  position: relative;
}

body.svc-expansion .expBrief{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.14);
  background: rgba(255,255,255,.82);
  box-shadow: 0 26px 90px rgba(11,31,58,.14);
  backdrop-filter: blur(14px);
  overflow:hidden;
}

body.svc-expansion .expBrief__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(29,78,216,.10), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(11,31,58,.10);
}

body.svc-expansion .expBrief__title{
  font-weight: 950;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.01em;
}
body.svc-expansion .expBrief__sub{
  margin-top: 2px;
  font-size: 12.6px;
  color: rgba(11,31,58,.66);
  font-weight: 650;
}

body.svc-expansion .expBrief__tag{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.18);
  background: rgba(29,78,216,.06);
  color: rgba(11,31,58,.86);
  font-weight: 850;
  font-size: 12px;
}

body.svc-expansion .expBrief__body{
  padding: 14px 16px 16px;
}

body.svc-expansion .expRow{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
}
body.svc-expansion .expRow__k{
  color: rgba(11,31,58,.70);
  font-weight: 750;
  font-size: 12.8px;
}
body.svc-expansion .expRow__v{
  color: rgba(11,31,58,.92);
  font-weight: 900;
  font-size: 12.8px;
}

body.svc-expansion .expDivider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,31,58,.12), transparent);
  margin: 10px 0 12px;
}

body.svc-expansion .expMeterBlock{
  display:grid;
  gap: 8px;
  margin-bottom: 12px;
}
body.svc-expansion .expMeterTop{
  display:flex;
  justify-content:space-between;
  align-items: baseline;
  gap: 12px;
}
body.svc-expansion .expMeterTop span{
  font-weight: 850;
  font-size: 12.8px;
  color: rgba(11,31,58,.86);
}
body.svc-expansion .expMeterTop small{
  font-weight: 700;
  font-size: 12px;
  color: rgba(11,31,58,.58);
}

body.svc-expansion .expMeter{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,31,58,.08);
  overflow:hidden;
  border: 1px solid rgba(11,31,58,.10);
}
body.svc-expansion .expMeter span{
  display:block;
  height: 100%;
  background: linear-gradient(90deg, rgba(29,78,216,.92), rgba(96,165,250,.75));
  border-radius: 999px;
}

body.svc-expansion .expMiniList{
  display:grid;
  gap: 10px;
}
body.svc-expansion .expMiniItem b{
  display:block;
  font-weight: 900;
  color: rgba(11,31,58,.92);
  font-size: 12.8px;
  margin-bottom: 2px;
}
body.svc-expansion .expMiniItem span{
  display:block;
  color: rgba(11,31,58,.66);
  font-weight: 650;
  font-size: 12.6px;
  line-height: 1.35;
}

body.svc-expansion .expHero__panelNote{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
  color: rgba(11,31,58,.70);
  font-size: 13px;
  font-weight: 650;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion .expHero{ padding: 100px 0 60px; }
  body.svc-expansion .expHero__grid{ grid-template-columns: 1fr; }
  body.svc-expansion .expHero__title{ font-size: 40px; }
}
/* =========================================
   HERO EXPANSIÓN — Variante 2 (Fintech premium)
   PÉGALO DESPUÉS del CSS del hero para sobre-escribirlo
========================================= */

/* Fondo más profundo y con contraste */
body.svc-expansion .expHero__bg{
  background:
    radial-gradient(1000px 600px at 12% 18%, rgba(29,78,216,.18), rgba(29,78,216,0) 62%),
    radial-gradient(840px 520px at 86% 22%, rgba(96,165,250,.16), rgba(96,165,250,0) 64%),
    radial-gradient(900px 520px at 55% 0%, rgba(11,31,58,.10), rgba(11,31,58,0) 60%),
    linear-gradient(180deg, rgba(244,248,255,1) 0%, rgba(255,255,255,1) 72%);
}

/* Pattern un poco más visible (sin ensuciar) */
body.svc-expansion .expHero::before{
  opacity: .30;
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 25% 20%, rgba(0,0,0,.70), transparent 62%);
}

/* Cards “glass” más premium */
body.svc-expansion .expPoint{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(11,31,58,.14);
  box-shadow: 0 22px 60px rgba(11,31,58,.14);
}

/* Iconos con más punch */
body.svc-expansion .expPoint__icon{
  background: rgba(29,78,216,.10);
  border-color: rgba(29,78,216,.20);
  color: rgba(29,78,216,1);
}

/* Panel derecho con “ring” + sombra más fuerte */
body.svc-expansion .expBrief{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(11,31,58,.16);
  box-shadow: 0 34px 120px rgba(11,31,58,.18);
  position: relative;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.svc-expansion .expBrief::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 22px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(29,78,216,.22), rgba(96,165,250,.10), rgba(255,255,255,0));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  opacity: .85;
}
body.svc-expansion .expBrief:hover{
  transform: translateY(-4px);
  box-shadow: 0 42px 150px rgba(11,31,58,.22);
  border-color: rgba(29,78,216,.22);
}

/* Header del panel con más “sheen” */
body.svc-expansion .expBrief__head{
  background: linear-gradient(90deg, rgba(29,78,216,.14), rgba(255,255,255,0));
  border-bottom-color: rgba(11,31,58,.12);
}

/* Barras más vivas */
body.svc-expansion .expMeter{
  background: rgba(11,31,58,.10);
  border-color: rgba(11,31,58,.12);
}
body.svc-expansion .expMeter span{
  background: linear-gradient(90deg, rgba(29,78,216,1), rgba(96,165,250,.85));
}

/* Nota inferior más marcada (sin verse agresiva) */
body.svc-expansion .expHero__panelNote{
  background: rgba(29,78,216,.06);
  border-color: rgba(29,78,216,.18);
  box-shadow: 0 16px 44px rgba(11,31,58,.10);
}
/* =========================================
   AJUSTE FINO HERO EXPANSIÓN (más sobrio/premium)
   PÉGALO AL FINAL del styles.css
========================================= */

/* Menos “aire” arriba/abajo (se veía muy vacío) */
body.svc-expansion .expHero{
  padding: 96px 0 56px;
}

/* Fondo: menos brillo, más profundidad y mejor contraste */
body.svc-expansion .expHero__bg{
  background:
    radial-gradient(980px 600px at 12% 18%, rgba(29,78,216,.12), rgba(29,78,216,0) 62%),
    radial-gradient(820px 520px at 86% 22%, rgba(96,165,250,.10), rgba(96,165,250,0) 64%),
    radial-gradient(960px 560px at 55% 0%, rgba(11,31,58,.08), rgba(11,31,58,0) 60%),
    linear-gradient(180deg, rgba(246,249,252,1) 0%, rgba(255,255,255,1) 72%);
}

/* Grid/pattern: más sutil para que no “ensucie” */
body.svc-expansion .expHero::before{
  opacity: .16;
  background-size: 86px 86px;
  mask-image: radial-gradient(circle at 25% 20%, rgba(0,0,0,.55), transparent 66%);
}

/* Título y texto: un poco más compacto y con lead menos gris */
body.svc-expansion .expHero__title{
  font-size: 46px;
  letter-spacing: -0.02em;
}
body.svc-expansion .expHero__lead{
  color: rgba(11,31,58,.78);
  max-width: 62ch;
}

/* Cards de puntos: menos “glass”, más sólidos y definidos */
body.svc-expansion .expPoint{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(11,31,58,.14);
  box-shadow: 0 16px 46px rgba(11,31,58,.10);
}

/* Iconos: un poco más discretos */
body.svc-expansion .expPoint__icon{
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: rgba(29,78,216,.07);
  border-color: rgba(29,78,216,.14);
}
body.svc-expansion .expPoint__icon svg{
  width: 17px;
  height: 17px;
}

/* Chips: más ligeros para que no “pesen” tanto visualmente */
body.svc-expansion .svc-chips{
  gap: 10px;
}
body.svc-expansion .svc-chip{
  background: rgba(255,255,255,.78);
  border-color: rgba(11,31,58,.12);
  box-shadow: 0 10px 26px rgba(11,31,58,.08);
}

/* Panel derecho: menos halo, más “banca sobria” */
body.svc-expansion .expBrief{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(11,31,58,.14);
  box-shadow: 0 30px 110px rgba(11,31,58,.16);
}

/* “Ring” degradado: bajar mucho la presencia (era demasiado) */
body.svc-expansion .expBrief::after{
  opacity: .35;
}

/* Header del panel: más sutil */
body.svc-expansion .expBrief__head{
  background: linear-gradient(90deg, rgba(29,78,216,.10), rgba(255,255,255,0));
}

/* Barras: menos saturadas */
body.svc-expansion .expMeter span{
  background: linear-gradient(90deg, rgba(29,78,216,.92), rgba(96,165,250,.70));
}

/* Nota inferior: menos “caja llamativa”, más elegante */
body.svc-expansion .expHero__panelNote{
  background: rgba(29,78,216,.045);
  border-color: rgba(29,78,216,.14);
  box-shadow: 0 12px 34px rgba(11,31,58,.08);
}
/* =========================================
   #que-decides — más visual, profesional (sin emojis)
========================================= */
body.svc-expansion #que-decides .svc-decide{
  counter-reset: expDec;
}

/* Cards: profundidad + barra lateral + número */
body.svc-expansion #que-decides .svc-decision{
  position: relative;
  counter-increment: expDec;
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-expansion #que-decides .svc-decision:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 90px rgba(11,31,58,.14);
  border-color: rgba(29,78,216,.18);
}

/* Barra lateral elegante */
body.svc-expansion #que-decides .svc-decision::before{
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, rgba(29,78,216,.85), rgba(96,165,250,.55));
  opacity: .75;
}

/* Número 01/02/03 arriba derecha */
body.svc-expansion #que-decides .svc-decision::after{
  content: counter(expDec, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 14px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(29,78,216,.92);
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.14);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Icono institucional */
body.svc-expansion #que-decides .svc-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(29,78,216,.07);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.95);
}

body.svc-expansion #que-decides .svc-ico svg{
  width: 20px;
  height: 20px;
}

/* Micro-tags (dan textura y guían la lectura) */
body.svc-expansion #que-decides .svc-miniTags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 10px;
}

body.svc-expansion #que-decides .svc-tag{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.90);
  color: rgba(11,31,58,.76);
  font-weight: 800;
  font-size: 12.2px;
}

/* Lista un poquito más respirable */
body.svc-expansion #que-decides .svc-decision ul{
  margin-top: 10px;
}
body.svc-expansion #que-decides .svc-decision li{
  line-height: 1.6;
}
/* =========================================
   #que-decides — Microband más premium
========================================= */
body.svc-expansion #que-decides .svc-microband{
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid rgba(29,78,216,.14);
  background:
    linear-gradient(90deg, rgba(29,78,216,.08), rgba(255,255,255,0) 55%),
    rgba(255,255,255,.82);
  box-shadow: 0 16px 50px rgba(11,31,58,.10);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

/* sheen sutil */
body.svc-expansion #que-decides .svc-microband::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto -40px;
  height: 120px;
  background: linear-gradient(120deg, rgba(96,165,250,.18), rgba(255,255,255,0) 55%);
  opacity: .55;
  pointer-events:none;
}

/* Separador vertical entre los dos textos */
body.svc-expansion #que-decides .svc-microband > span{
  position: relative;
}
body.svc-expansion #que-decides .svc-microband > span + span{
  padding-left: 18px;
}
body.svc-expansion #que-decides .svc-microband > span + span::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(11,31,58,.14);
  opacity: .9;
}

/* =========================================
   #que-decides — Hover más dinámico (sobrio)
========================================= */

/* brillo diagonal en hover */
body.svc-expansion #que-decides .svc-decision{
  will-change: transform, box-shadow;
}
body.svc-expansion #que-decides .svc-decision::marker{ display:none; } /* por si */
body.svc-expansion #que-decides .svc-decision .svc-decision-top{
  position: relative;
}

/* Sheen diagonal (solo se ve en hover) */
body.svc-expansion #que-decides .svc-decision .svc-decision-top::after{
  content:"";
  position:absolute;
  inset: -12px -12px auto -12px;
  height: 64px;
  background: linear-gradient(120deg, rgba(29,78,216,.10), rgba(255,255,255,0) 55%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}

body.svc-expansion #que-decides .svc-decision:hover .svc-decision-top::after{
  opacity: .75;
}

/* Barra lateral “enciende” */
body.svc-expansion #que-decides .svc-decision::before{
  opacity: .60; /* default */
  transition: opacity .18s ease, width .18s ease;
}
body.svc-expansion #que-decides .svc-decision:hover::before{
  opacity: 1;
  width: 8px;
}

/* Número: más marcado y con “ring” al hover */
body.svc-expansion #que-decides .svc-decision::after{
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
body.svc-expansion #que-decides .svc-decision:hover::after{
  transform: translateY(-1px);
  background: rgba(29,78,216,.10);
  border-color: rgba(29,78,216,.22);
}

/* Icono: un toque más vivo en hover */
body.svc-expansion #que-decides .svc-decision:hover .svc-ico{
  border-color: rgba(29,78,216,.22);
  background: rgba(29,78,216,.09);
}

/* Tags: micro-contraste en hover */
body.svc-expansion #que-decides .svc-decision:hover .svc-tag{
  border-color: rgba(29,78,216,.18);
  background: rgba(29,78,216,.05);
}
/* =========================================================
   #que-decides — Ajuste fino (barra + cards menos cuadradas)
   PÉGALO AL FINAL para que sobre-escriba cambios previos
========================================================= */

/* 1) Barra: del largo de la tarjeta, más delgada, menos agresiva
   (se queda en el borde, pero no toca las esquinas) */
body.svc-expansion #que-decides .svc-decision::before{
  left: 0;
  top: 14px;       /* más larga */
  bottom: 14px;    /* más larga */
  width: 3px;
  border-radius: 999px;
  opacity: .50;
  background: linear-gradient(180deg, rgba(29,78,216,.85), rgba(96,165,250,.45));
  transition: opacity .18s ease, width .18s ease;
}


body.svc-expansion #que-decides .svc-decision:hover::before{
  opacity: .85;
  width: 4px;                 /* un toque, sin “gritar” */
}

/* 2) Cards: menos altas (más “rectangulares”), pero sin amontonarse */
body.svc-expansion #que-decides .svc-decision{
  padding: 16px 20px 14px;    /* baja altura, mantiene limpieza */
  border-radius: 22px;        /* conserva el look premium */
}

/* ritmo interno (menos “amontonado” pero más compacto que antes) */
body.svc-expansion #que-decides .svc-decision-top{
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}

body.svc-expansion #que-decides .svc-decision-top h3{
  margin: 0;
  line-height: 1.22;
}

body.svc-expansion #que-decides .svc-decision p{
  margin: 8px 0 0;
  line-height: 1.55;
}

/* tags: siguen dando textura pero sin empujar todo hacia abajo */
body.svc-expansion #que-decides .svc-miniTags{
  margin: 10px 0 10px;
  gap: 8px;
}

body.svc-expansion #que-decides .svc-tag{
  padding: 6px 10px;
  font-size: 12px;
}

/* bullets: más limpios, sin hacer la card enorme */
body.svc-expansion #que-decides .svc-decision ul{
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
}

body.svc-expansion #que-decides .svc-decision li{
  line-height: 1.55;
}
/* =========================================
   #incluye — Diseño distinto (Value panel + Rows)
   Profesional / vendedor / no “cards”
========================================= */

body.svc-expansion #incluye .expInclude{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  align-items:start;
  margin-top: 18px;
}

/* Panel de valor (izquierda) */
body.svc-expansion #incluye .expInclude__value{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.12);
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(29,78,216,.10), rgba(29,78,216,0) 60%),
    radial-gradient(700px 260px at 90% 18%, rgba(96,165,250,.08), rgba(96,165,250,0) 62%),
    rgba(255,255,255,.92);
  box-shadow: 0 24px 90px rgba(11,31,58,.12);
  padding: 18px 18px 16px;
}

body.svc-expansion #incluye .expValue__head h3{
  margin: 0 0 6px;
  color: rgba(11,31,58,.92);
  font-weight: 950;
  letter-spacing: -0.01em;
}
body.svc-expansion #incluye .expValue__head p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
}

body.svc-expansion #incluye .expValue__stats{
  display:grid;
  gap: 10px;
  margin-top: 14px;
}
body.svc-expansion #incluye .expStat{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.82);
  padding: 12px 12px;
}
body.svc-expansion #incluye .expStat__k{
  font-weight: 980;
  color: rgba(11,31,58,.92);
  font-size: 18px;
  letter-spacing: -0.01em;
}
body.svc-expansion #incluye .expStat__t{
  margin-top: 2px;
  font-weight: 900;
  color: rgba(29,78,216,.92);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.svc-expansion #incluye .expStat__s{
  margin-top: 2px;
  color: rgba(11,31,58,.64);
  font-weight: 650;
  font-size: 12.5px;
}

body.svc-expansion #incluye .expValue__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
body.svc-expansion #incluye .expChip{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
  color: rgba(11,31,58,.80);
  font-weight: 800;
  font-size: 12.2px;
}

body.svc-expansion #incluye .expValue__note{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.75);
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

/* Rows (derecha) — se ve distinto a cards */
body.svc-expansion #incluye .expInclude__rows{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(255,255,255,.88);
  box-shadow: 0 24px 90px rgba(11,31,58,.10);
  overflow:hidden;
}

body.svc-expansion #incluye .expRow{
  display:grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  padding: 16px 16px;
  position: relative;
}

body.svc-expansion #incluye .expRow + .expRow{
  border-top: 1px solid rgba(11,31,58,.10);
}

body.svc-expansion #incluye .expRow::before{
  content: attr(data-step);
  position:absolute;
  top: 14px;
  right: 14px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(29,78,216,.92);
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.14);
  padding: 6px 10px;
  border-radius: 999px;
}

body.svc-expansion #incluye .expRow__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(29,78,216,.07);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.95);
}

body.svc-expansion #incluye .expRow__icon svg{
  width: 20px;
  height: 20px;
}

body.svc-expansion #incluye .expRow__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
}
body.svc-expansion #incluye .expRow__top h3{
  margin: 0;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-size: 16px;
}
body.svc-expansion #incluye .expRow__tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.95);
  color: rgba(11,31,58,.70);
  font-weight: 850;
  font-size: 12px;
  white-space: nowrap;
}

body.svc-expansion #incluye .expRow__content p{
  margin: 8px 0 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

body.svc-expansion #incluye .expRow__content ul{
  margin: 10px 0 0;
  padding-left: 18px;
  display:grid;
  gap: 7px;
}
body.svc-expansion #incluye .expRow__content li{
  color: rgba(11,31,58,.70);
  line-height: 1.55;
}

/* Hover sobrio (más “premium” sin ser agresivo) */
body.svc-expansion #incluye .expRow{
  transition: background .18s ease;
}
body.svc-expansion #incluye .expRow:hover{
  background: rgba(29,78,216,.03);
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion #incluye .expInclude{
    grid-template-columns: 1fr;
  }
}
/* =========================================
   #incluye — “Decision Pack” (visual + framework)
   Distinto a cards normales. Profesional.
========================================= */

body.svc-expansion #incluye .incGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

/* ===== LEFT: Pack ===== */
body.svc-expansion #incluye .incPack{
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.12);
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(29,78,216,.12), rgba(29,78,216,0) 62%),
    radial-gradient(700px 280px at 92% 22%, rgba(96,165,250,.10), rgba(96,165,250,0) 62%),
    rgba(255,255,255,.92);
  box-shadow: 0 26px 110px rgba(11,31,58,.12);
  padding: 18px;
  overflow:hidden;
  position: relative;
}

body.svc-expansion #incluye .incPack::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 24px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(29,78,216,.18), rgba(96,165,250,.10), rgba(255,255,255,0));
  opacity: .45;
}

body.svc-expansion #incluye .incPack__top{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-start;
  margin-bottom: 10px;
}

body.svc-expansion #incluye .incPill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
  color: rgba(11,31,58,.74);
  font-weight: 850;
  font-size: 12px;
}
body.svc-expansion #incluye .incPill--strong{
  border-color: rgba(29,78,216,.16);
  background: rgba(29,78,216,.06);
  color: rgba(11,31,58,.88);
}

body.svc-expansion #incluye .incPack__title{
  margin: 0 0 12px;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.01em;
}

body.svc-expansion #incluye .incFiles{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
  z-index: 1;
}

body.svc-expansion #incluye .incFile{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.86);
  padding: 12px 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  box-shadow: 0 14px 44px rgba(11,31,58,.08);
}

body.svc-expansion #incluye .incFile__ico{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.06);
  color: rgba(29,78,216,.95);
  font-weight: 950;
  font-size: 12px;
  flex: 0 0 auto;
}
body.svc-expansion #incluye .incFile__ico--pdf{ color: rgba(11,31,58,.92); }
body.svc-expansion #incluye .incFile__ico--xls{ color: rgba(29,78,216,.95); }
body.svc-expansion #incluye .incFile__ico--plan{ color: rgba(11,31,58,.92); }
body.svc-expansion #incluye .incFile__ico--call svg{ width: 20px; height: 20px; }

body.svc-expansion #incluye .incFile__txt b{
  display:block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  line-height: 1.2;
  margin-bottom: 2px;
}
body.svc-expansion #incluye .incFile__txt span{
  display:block;
  color: rgba(11,31,58,.66);
  font-weight: 650;
  font-size: 12.5px;
}

/* mini diagrama */
body.svc-expansion #incluye .incDiagram{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}

body.svc-expansion #incluye .incNode{
  flex: 1 1 0;
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.85);
  padding: 10px 10px;
}
body.svc-expansion #incluye .incNode--accent{
  border-color: rgba(29,78,216,.16);
  background: rgba(29,78,216,.05);
}
body.svc-expansion #incluye .incNode__k{
  display:block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  font-size: 12.5px;
  margin-bottom: 2px;
}
body.svc-expansion #incluye .incNode__v{
  display:block;
  color: rgba(11,31,58,.64);
  font-weight: 650;
  font-size: 12.2px;
  line-height: 1.25;
}
body.svc-expansion #incluye .incArrow{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.85);
  position: relative;
}
body.svc-expansion #incluye .incArrow::before{
  content:"";
  position:absolute;
  inset: 0;
  margin:auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(29,78,216,.9);
  border-bottom: 2px solid rgba(29,78,216,.9);
  transform: rotate(-45deg);
}

/* badges */
body.svc-expansion #incluye .incBadges{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}
body.svc-expansion #incluye .incBadge{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
  color: rgba(11,31,58,.78);
  font-weight: 850;
  font-size: 12.2px;
}

/* ===== RIGHT: Framework ===== */
body.svc-expansion #incluye .incFramework{
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(255,255,255,.92);
  box-shadow: 0 26px 110px rgba(11,31,58,.10);
  overflow: hidden;
  position: relative;
}

body.svc-expansion #incluye .incStep{
  padding: 16px 16px;
  position: relative;
}
body.svc-expansion #incluye .incStep + .incStep{
  border-top: 1px solid rgba(11,31,58,.10);
}

/* numeración */
body.svc-expansion #incluye .incStep::before{
  content: attr(data-n);
  position:absolute;
  top: 14px;
  right: 14px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(29,78,216,.92);
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.14);
  padding: 6px 10px;
  border-radius: 999px;
}

/* head */
body.svc-expansion #incluye .incStep__head{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
body.svc-expansion #incluye .incStep__ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.06);
  color: rgba(29,78,216,.95);
  flex: 0 0 auto;
}
body.svc-expansion #incluye .incStep__ico svg{ width: 20px; height: 20px; }

body.svc-expansion #incluye .incStep h3{
  margin: 0;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-size: 16px;
}
body.svc-expansion #incluye .incStep p{
  margin: 6px 0 0;
  color: rgba(11,31,58,.68);
  font-weight: 650;
  line-height: 1.45;
}

/* chips */
body.svc-expansion #incluye .incChips{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
body.svc-expansion #incluye .incChip{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.90);
  color: rgba(11,31,58,.76);
  font-weight: 850;
  font-size: 12.2px;
}

/* Impact strip */
body.svc-expansion #incluye .incImpact{
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(90deg, rgba(29,78,216,.07), rgba(255,255,255,0));
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.svc-expansion #incluye .incImpact__item b{
  display:block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  margin-bottom: 2px;
}
body.svc-expansion #incluye .incImpact__item span{
  display:block;
  color: rgba(11,31,58,.66);
  font-weight: 650;
  line-height: 1.35;
  font-size: 12.8px;
}

/* Hover sobrio */
body.svc-expansion #incluye .incStep{
  transition: background .18s ease;
}
body.svc-expansion #incluye .incStep:hover{
  background: rgba(29,78,216,.03);
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion #incluye .incGrid{
    grid-template-columns: 1fr;
  }
  body.svc-expansion #incluye .incImpact{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   #incluye — Versión consultora (color + dossier + editorial)
   Pegar al FINAL del styles.css
========================================================= */

body.svc-expansion #incluye .inc2-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 18px;
  margin-top: 18px;
  align-items:start;
}

/* ===== IZQ: Folder / Dossier ===== */
body.svc-expansion #incluye .inc2-folder{
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.12);
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(29,78,216,.14), rgba(29,78,216,0) 62%),
    radial-gradient(720px 320px at 90% 18%, rgba(96,165,250,.12), rgba(96,165,250,0) 62%),
    rgba(255,255,255,.95);
  box-shadow: 0 26px 110px rgba(11,31,58,.12);
  padding: 18px;
  overflow:hidden;
}

/* Efecto “papeles” (más web/consultora, menos app) */
body.svc-expansion #incluye .inc2-folder::before,
body.svc-expansion #incluye .inc2-folder::after{
  content:"";
  position:absolute;
  width: 220px;
  height: 160px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
  transform: rotate(-8deg);
  opacity: .55;
  pointer-events:none;
}
body.svc-expansion #incluye .inc2-folder::before{
  right: -70px;
  top: 52px;
}
body.svc-expansion #incluye .inc2-folder::after{
  right: -96px;
  top: 84px;
  transform: rotate(-14deg);
  opacity: .35;
}

body.svc-expansion #incluye .inc2-folderTop{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

body.svc-expansion #incluye .inc2-ribbon{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.18);
  background: rgba(29,78,216,.08);
  color: rgba(11,31,58,.90);
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 12.5px;
}

body.svc-expansion #incluye .inc2-subTag{
  color: rgba(11,31,58,.64);
  font-weight: 750;
  font-size: 13px;
}

body.svc-expansion #incluye .inc2-h3{
  margin: 0 0 6px;
  color: rgba(11,31,58,.92);
  font-weight: 950;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

body.svc-expansion #incluye .inc2-p{
  margin: 0 0 12px;
  color: rgba(11,31,58,.70);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

body.svc-expansion #incluye .inc2-docGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
  z-index: 1;
}

body.svc-expansion #incluye .inc2-doc{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.88);
  padding: 12px 12px;
  box-shadow: 0 14px 44px rgba(11,31,58,.08);
  position: relative;
  overflow:hidden;
}

/* Barra superior de acento (web/consultora) */
body.svc-expansion #incluye .inc2-doc::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(29,78,216,.95), rgba(96,165,250,.60));
  opacity: .85;
}

body.svc-expansion #incluye .inc2-docTag{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.90);
  color: rgba(11,31,58,.78);
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 8px;
}

body.svc-expansion #incluye .inc2-docBody b{
  display:block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
body.svc-expansion #incluye .inc2-docBody span{
  display:block;
  color: rgba(11,31,58,.66);
  font-weight: 650;
  font-size: 12.8px;
  line-height: 1.35;
}

body.svc-expansion #incluye .inc2-note{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
  color: rgba(11,31,58,.72);
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

/* ===== DER: Steps “editorial” ===== */
body.svc-expansion #incluye .inc2-steps{
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(255,255,255,.95);
  box-shadow: 0 26px 110px rgba(11,31,58,.10);
  overflow:hidden;
  position: relative;
}

/* Línea vertical (framework) */
body.svc-expansion #incluye .inc2-steps::before{
  content:"";
  position:absolute;
  left: 30px;
  top: 16px;
  bottom: 86px;
  width: 2px;
  background: linear-gradient(180deg, rgba(29,78,216,.35), rgba(11,31,58,.10));
  opacity: .9;
}

body.svc-expansion #incluye .inc2-step{
  position: relative;
  padding: 16px 16px 16px 60px;
}
body.svc-expansion #incluye .inc2-step + .inc2-step{
  border-top: 1px solid rgba(11,31,58,.10);
}

body.svc-expansion #incluye .inc2-stepNo{
  position:absolute;
  left: 16px;
  top: 18px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.18);
  background: rgba(29,78,216,.08);
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,31,58,.90);
  font-size: 12px;
  letter-spacing: .06em;
}

body.svc-expansion #incluye .inc2-stepBody h3{
  margin: 0;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-size: 16px;
}
body.svc-expansion #incluye .inc2-stepBody p{
  margin: 6px 0 0;
  color: rgba(11,31,58,.68);
  font-weight: 650;
  line-height: 1.45;
}

body.svc-expansion #incluye .inc2-bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  display:grid;
  gap: 7px;
}
body.svc-expansion #incluye .inc2-bullets li{
  color: rgba(11,31,58,.70);
  line-height: 1.55;
}

/* Tag lateral (da diseño sin “iconitos”) */
body.svc-expansion #incluye .inc2-sideTag{
  position:absolute;
  top: 16px;
  right: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.92);
  color: rgba(11,31,58,.72);
  font-weight: 850;
  font-size: 12px;
}

/* Impact band */
body.svc-expansion #incluye .inc2-impact{
  border-top: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(90deg, rgba(29,78,216,.07), rgba(255,255,255,0));
  padding: 14px 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.svc-expansion #incluye .inc2-impactItem b{
  display:block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  margin-bottom: 2px;
}
body.svc-expansion #incluye .inc2-impactItem span{
  display:block;
  color: rgba(11,31,58,.66);
  font-weight: 650;
  line-height: 1.35;
  font-size: 12.8px;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion #incluye .inc2-grid{
    grid-template-columns: 1fr;
  }
  body.svc-expansion #incluye .inc2-impact{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   #incluye — Diseño horizontal (mismo look de tarjetas)
   Pegar AL FINAL del styles.css
========================================================= */

body.svc-expansion #incluye .incH{
  margin-top: 18px;
  display: grid;
  gap: 16px;
}

/* Top band */
body.svc-expansion #incluye .incH-top{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
  align-items: start;
}

body.svc-expansion #incluye .incH-pitch{
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.12);
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(29,78,216,.14), rgba(29,78,216,0) 62%),
    radial-gradient(720px 320px at 92% 22%, rgba(96,165,250,.12), rgba(96,165,250,0) 62%),
    rgba(255,255,255,.95);
  box-shadow: 0 26px 110px rgba(11,31,58,.12);
  padding: 18px;
}

body.svc-expansion #incluye .incH-ribbon{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.18);
  background: rgba(29,78,216,.08);
  color: rgba(11,31,58,.90);
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 12.5px;
  margin-bottom: 10px;
}

body.svc-expansion #incluye .incH-pitch h3{
  margin: 0 0 6px;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.01em;
}

body.svc-expansion #incluye .incH-pitch p{
  margin: 0;
  color: rgba(11,31,58,.70);
  line-height: 1.6;
}

body.svc-expansion #incluye .incH-proof{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.svc-expansion #incluye .incH-proofItem{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.88);
  padding: 12px 12px;
  box-shadow: 0 14px 44px rgba(11,31,58,.08);
}

body.svc-expansion #incluye .incH-proofItem b{
  display:block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  margin-bottom: 2px;
}
body.svc-expansion #incluye .incH-proofItem span{
  display:block;
  color: rgba(11,31,58,.66);
  font-weight: 650;
  font-size: 12.6px;
  line-height: 1.35;
}

body.svc-expansion #incluye .incH-note{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(29,78,216,.14);
  background: rgba(29,78,216,.05);
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

/* Deliverables row (4 cards) — mismo estilo que te gustó */
body.svc-expansion #incluye .incH-docs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.svc-expansion #incluye .incH-doc{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.90);
  padding: 12px 12px;
  box-shadow: 0 14px 44px rgba(11,31,58,.08);
  position: relative;
  overflow: hidden;
}

/* Barra superior de acento (igual que antes) */
body.svc-expansion #incluye .incH-doc::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(29,78,216,.95), rgba(96,165,250,.60));
  opacity: .85;
}

body.svc-expansion #incluye .incH-docTag{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.90);
  color: rgba(11,31,58,.78);
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 8px;
}

body.svc-expansion #incluye .incH-docBody b{
  display:block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
body.svc-expansion #incluye .incH-docBody span{
  display:block;
  color: rgba(11,31,58,.66);
  font-weight: 650;
  font-size: 12.8px;
  line-height: 1.35;
}

/* Modules row (3) */
body.svc-expansion #incluye .incH-mods{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.svc-expansion #incluye .incH-mod{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.12);
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}

/* acento superior también aquí para coherencia */
body.svc-expansion #incluye .incH-mod::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(29,78,216,.95), rgba(96,165,250,.60));
  opacity: .75;
}

body.svc-expansion #incluye .incH-modTop{
  display:flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}

body.svc-expansion #incluye .incH-num{
  display:inline-grid;
  place-items:center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.18);
  background: rgba(29,78,216,.08);
  font-weight: 950;
  color: rgba(11,31,58,.90);
  font-size: 12px;
  letter-spacing: .06em;
  flex: 0 0 auto;
}

body.svc-expansion #incluye .incH-mod h3{
  margin: 0;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-size: 15.5px;
  flex: 1 1 auto;
}

body.svc-expansion #incluye .incH-tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.92);
  color: rgba(11,31,58,.72);
  font-weight: 850;
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}

body.svc-expansion #incluye .incH-mod p{
  margin: 10px 0 0;
  color: rgba(11,31,58,.70);
  line-height: 1.55;
}

body.svc-expansion #incluye .incH-mod ul{
  margin: 10px 0 0;
  padding-left: 18px;
  display:grid;
  gap: 7px;
}
body.svc-expansion #incluye .incH-mod li{
  color: rgba(11,31,58,.70);
  line-height: 1.55;
}

/* Impact strip */
body.svc-expansion #incluye .incH-impact{
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(90deg, rgba(29,78,216,.07), rgba(255,255,255,0));
  box-shadow: 0 14px 44px rgba(11,31,58,.08);
  padding: 14px 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.svc-expansion #incluye .incH-impactItem b{
  display:block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  margin-bottom: 2px;
}
body.svc-expansion #incluye .incH-impactItem span{
  display:block;
  color: rgba(11,31,58,.66);
  font-weight: 650;
  line-height: 1.35;
  font-size: 12.8px;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion #incluye .incH-top{
    grid-template-columns: 1fr;
  }
  body.svc-expansion #incluye .incH-mods{
    grid-template-columns: 1fr;
  }
  body.svc-expansion #incluye .incH-impact{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   #incluye — TOP combinado (tarjeta única con entregables dentro)
   Pegar AL FINAL del styles.css
========================================================= */

body.svc-expansion #incluye .incH-pitch--full{
  grid-column: 1 / -1; /* ocupa todo el ancho del grid de incH-top */
}

body.svc-expansion #incluye .incH-pitchGrid{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 16px;
  align-items: start;
}

body.svc-expansion #incluye .incH-pitchCopy,
body.svc-expansion #incluye .incH-pitchDeliver{
  min-width: 0;
}

body.svc-expansion #incluye .incH-pitchDeliver{
  padding-left: 14px;
  border-left: 1px solid rgba(11,31,58,.10);
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion #incluye .incH-pitchGrid{
    grid-template-columns: 1fr;
  }
  body.svc-expansion #incluye .incH-pitchDeliver{
    padding-left: 0;
    border-left: 0;
    margin-top: 10px;
  }
}

@media (max-width: 520px){
  body.svc-expansion #incluye .incH-docs{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   EXPANSIÓN — "Qué incluye" (tarjeta azul + entregables integrados)
   Ajuste visual premium para que el lado derecho se vea parte del pack
========================================================= */

body.svc-expansion #incluye .incH-pitchGrid{
  gap: 14px; /* más compacto */
}

/* Quita la sensación de “columna aparte” y crea un panel interno */
body.svc-expansion #incluye .incH-pitchDeliver{
  border-left: 0 !important;
  padding-left: 0 !important;

  background:
    radial-gradient(700px 320px at 90% 0%, rgba(10,103,194,.14), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.55);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 22px rgba(11,31,58,.06);
  backdrop-filter: blur(10px);
}

/* Grid de entregables: más armonía y menos “separado” */
body.svc-expansion #incluye .incH-docs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; /* reduce separación */
}

/* Mini-tarjetas: más premium, mismas “reglas visuales” que el resto */
body.svc-expansion #incluye .incH-doc{
  display: flex;
  gap: 12px;
  align-items: flex-start;

  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,252,.92));
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: 0 12px 20px rgba(11,31,58,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-expansion #incluye .incH-doc:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(11,31,58,.10);
  border-color: rgba(10,103,194,.20);
}

/* Tag (PDF/XLS/30–60–90/90 min) como “pill” bancaria */
body.svc-expansion #incluye .incH-docTag{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;

  color: #0b4aa2;
  background: rgba(10,103,194,.10);
  border: 1px solid rgba(10,103,194,.18);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Texto del entregable: más “banca”, menos simple */
body.svc-expansion #incluye .incH-docBody b{
  display: block;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: #0b1f3a;
  margin-bottom: 2px;
}

body.svc-expansion #incluye .incH-docBody span{
  display: block;
  font-size: 12.5px;
  color: rgba(81,96,122,.92);
  line-height: 1.35;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion #incluye .incH-docs{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   EXPANSIÓN — Entregables dentro del Decision Pack (fill height)
========================================================= */

/* Asegura que ambas columnas se estiren a la misma altura */
body.svc-expansion #incluye .incH-pitchGrid{
  align-items: stretch !important;
}

/* El panel derecho se vuelve contenedor flexible para “llenar” */
body.svc-expansion #incluye .incH-pitchDeliver{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* El grid de 4 tarjetas ocupa todo el alto disponible */
body.svc-expansion #incluye .incH-docs{
  flex: 1;
  height: 100%;

  /* 2x2 y filas que se estiran */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;          /* <- clave: filas iguales */
  align-content: stretch;       /* estira el contenido */
  gap: 12px;                    /* un poco más de aire */
}

/* Cada tarjeta ocupa toda su “celda” */
body.svc-expansion #incluye .incH-doc{
  height: 100%;
  padding: 14px;                /* más presencia */
  justify-content: flex-start;
}

/* Opcional: un mínimo de altura para que se sientan “premium” */
body.svc-expansion #incluye .incH-doc{
  min-height: 94px;
}

/* En móvil: una columna, sin forzar alturas */
@media (max-width: 980px){
  body.svc-expansion #incluye .incH-docs{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  body.svc-expansion #incluye .incH-doc{
    height: auto;
    min-height: unset;
  }
}
/* =========================================================
   EXPANSIÓN — Ajuste armonía visual entregables (sin tarjetas gigantes)
========================================================= */

/* Mantén el panel derecho alto, pero centra su contenido */
body.svc-expansion #incluye .incH-pitchDeliver{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente el bloque */
}

/* Grid 2x2 con alturas controladas (evita “tarjetas vacías”) */
body.svc-expansion #incluye .incH-docs{
  flex: 0;                         /* deja de forzar que “estire” */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(130px, 160px); /* 👈 tamaño premium */
  gap: 12px;
  align-content: center;           /* centra filas en el espacio disponible */
}

/* Tarjetas: ya no fuerces height 100% */
body.svc-expansion #incluye .incH-doc{
  height: auto !important;
  padding: 14px 14px;
}

/* Opcional (se ve más “banca”): apila un poquito mejor el contenido */
body.svc-expansion #incluye .incH-docBody span{
  line-height: 1.35;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion #incluye .incH-pitchDeliver{
    justify-content: flex-start;
  }
  body.svc-expansion #incluye .incH-docs{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}
/* =========================================================
   EXPANSIÓN — "Qué incluye" | Bloque derecho integrado y vendedor
   (rectangular, compacto, centrado y con separación elegante)
========================================================= */

/* Más separación entre columnas (que no se sienta pegado) */
body.svc-expansion #incluye .incH-pitchGrid{
  column-gap: 26px !important;
  align-items: start;
}

/* Panel derecho: integrado + separación visual real */
body.svc-expansion #incluye .incH-pitchDeliver{
  position: relative;
  margin-left: 10px; /* lo aleja del lado izquierdo */
  padding: 16px 16px 14px;
  border-radius: 16px;

  background:
    radial-gradient(760px 340px at 90% 0%, rgba(10,103,194,.14), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.55);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 22px rgba(11,31,58,.06);
  backdrop-filter: blur(10px);

  display: flex;
  flex-direction: column;
  justify-content: center; /* centra todo el bloque dentro */
}

/* Línea elegante de separación (no borde feo) */
body.svc-expansion #incluye .incH-pitchDeliver::before{
  content:"";
  position:absolute;
  left:-16px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(10,103,194,.26), rgba(11,31,58,.06));
  border-radius: 999px;
  opacity: .9;
}

/* Head vendedor */
body.svc-expansion #incluye .incH-deliverHead{
  margin-bottom: 10px;
}

body.svc-expansion #incluye .incH-deliverKicker{
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(81,96,122,.90);
  margin-bottom: 6px;
}

body.svc-expansion #incluye .incH-deliverTitle{
  font-size: 16px;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
  color: #0b1f3a;
}

body.svc-expansion #incluye .incH-deliverSub{
  font-size: 13px;
  color: rgba(81,96,122,.92);
  line-height: 1.35;
}

/* Wrapper: hace el bloque TOTAL más chico y centrado */
body.svc-expansion #incluye .incH-deliverWrap{
  width: 100%;
  max-width: 560px;   /* 👈 reduce tamaño total del 2x2 */
  margin: 0 auto;     /* 👈 centra horizontalmente */
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Grid 2x2 compacto (rectangular, no gigante) */
body.svc-expansion #incluye .incH-docs--tight{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(118px, 132px); /* 👈 rectángulo premium */
  gap: 12px;
  justify-content: center;
  align-content: center;
}

/* Tarjeta individual: menos “vacía”, más llena */
body.svc-expansion #incluye .incH-doc{
  display: flex;
  gap: 12px;
  align-items: flex-start;

  padding: 12px 12px;
  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,252,.92));
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 12px 20px rgba(11,31,58,.06);
}

/* Tag tipo banca */
body.svc-expansion #incluye .incH-docTag{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #0b4aa2;
  background: rgba(10,103,194,.10);
  border: 1px solid rgba(10,103,194,.18);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Texto compacto (sin desperdicio) */
body.svc-expansion #incluye .incH-docBody b{
  display:block;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: #0b1f3a;
  margin-bottom: 2px;
}

body.svc-expansion #incluye .incH-docBody span{
  display:block;
  font-size: 12.5px;
  color: rgba(81,96,122,.92);
  line-height: 1.25;
}

/* Mini bullets para “llenar” y vender sin texto largo */
body.svc-expansion #incluye .incH-mini{
  margin-top: 8px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

body.svc-expansion #incluye .incH-mini li{
  position: relative;
  padding-left: 14px;
  font-size: 12.2px;
  color: rgba(81,96,122,.92);
  line-height: 1.2;
}

body.svc-expansion #incluye .incH-mini li::before{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(10,103,194,.65);
  position:absolute;
  left: 0;
  top: 6px;
}

/* Nota final (cierre vendedor) */
body.svc-expansion #incluye .incH-deliverFoot{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(81,96,122,.90);
  text-align: center;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion #incluye .incH-pitchDeliver{
    margin-left: 0;
  }
  body.svc-expansion #incluye .incH-pitchDeliver::before{
    display:none;
  }
  body.svc-expansion #incluye .incH-deliverWrap{
    max-width: 100%;
  }
  body.svc-expansion #incluye .incH-docs--tight{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}
/* =========================================================
   EXPANSIÓN — Entregables (solo 4 tarjetas, bien centradas)
========================================================= */

body.svc-expansion #incluye .incH-pitchGrid{
  column-gap: 28px !important;   /* más separación entre izquierda y derecha */
  align-items: stretch !important;
}

/* Panel derecho */
body.svc-expansion #incluye .incH-pitchDeliver{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;           /* centra vertical */
  justify-content: center;       /* centra horizontal */
  padding: 18px;
  margin-left: 12px;             /* alejar un poco del lado izquierdo */
  border-radius: 16px;

  background:
    radial-gradient(760px 340px at 90% 0%, rgba(10,103,194,.14), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.55);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 22px rgba(11,31,58,.06);
  backdrop-filter: blur(10px);
}

/* Línea separadora elegante */
body.svc-expansion #incluye .incH-pitchDeliver::before{
  content:"";
  position:absolute;
  left:-18px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(10,103,194,.26), rgba(11,31,58,.06));
  border-radius: 999px;
  opacity: .9;
}

/* Wrap: reduce tamaño total y lo centra dentro del panel */
body.svc-expansion #incluye .incH-deliverWrap{
  width: 100%;
  max-width: 560px;  /* ↓ cambia a 520px si lo quieres aún más compacto */
  margin: 0 auto;
}

/* Grid 2x2: más rectangular, menos “alto vacío” */
body.svc-expansion #incluye .incH-docs--tight{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(110px, 128px); /* rectangulares */
  gap: 12px;
  align-content: center;
}

/* Tarjeta: estructura interna limpia (tag arriba + texto con aire) */
body.svc-expansion #incluye .incH-doc{
  height: 100%;
  padding: 14px;
  border-radius: 14px;

  display: flex;
  flex-direction: column;
  justify-content: center; /* centra el contenido dentro de la tarjeta */
  gap: 8px;

  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,252,.92));
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 12px 20px rgba(11,31,58,.06);
}

/* Tag */
body.svc-expansion #incluye .incH-docTag{
  align-self: flex-start;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;

  color: #0b4aa2;
  background: rgba(10,103,194,.10);
  border: 1px solid rgba(10,103,194,.18);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

/* Texto (sin amontonarse) */
body.svc-expansion #incluye .incH-docBody{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.svc-expansion #incluye .incH-docBody b{
  font-size: 14px;
  letter-spacing: -0.2px;
  color: #0b1f3a;
  margin: 0;
}

body.svc-expansion #incluye .incH-docBody span{
  font-size: 12.6px;
  color: rgba(81,96,122,.92);
  line-height: 1.25;
}

body.svc-expansion #incluye .incH-docBody small{
  font-size: 12.2px;
  color: rgba(81,96,122,.86);
  line-height: 1.25;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion #incluye .incH-pitchDeliver{
    margin-left: 0;
  }
  body.svc-expansion #incluye .incH-pitchDeliver::before{
    display:none;
  }
  body.svc-expansion #incluye .incH-docs--tight{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}
/* =========================================================
   EXPANSIÓN — FIX centrado real + tarjetas bien acomodadas
========================================================= */

/* Más separación entre columnas */
body.svc-expansion #incluye .incH-pitchGrid{
  column-gap: 30px !important;
  align-items: stretch !important; /* clave: el panel derecho se estira */
}

/* Panel derecho: usar GRID para centrar el bloque 2x2 */
body.svc-expansion #incluye .incH-pitchDeliver{
  align-self: stretch !important;   /* clave: llena altura de la fila */
  display: grid !important;
  place-items: center !important;   /* centra vertical y horizontal */
  padding: 20px 24px !important;
  margin-left: 14px !important;

  background:
    radial-gradient(760px 340px at 90% 0%, rgba(10,103,194,.14), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.55) !important;
  border: 1px solid rgba(11,31,58,.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(11,31,58,.06) !important;
  backdrop-filter: blur(10px);
}

/* Línea elegante al lado izquierdo */
body.svc-expansion #incluye .incH-pitchDeliver::before{
  content:"";
  position:absolute;
  left:-18px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(10,103,194,.26), rgba(11,31,58,.06));
  border-radius: 999px;
  opacity: .9;
}

/* Contenedor del 2x2: tamaño controlado y centrado */
body.svc-expansion #incluye .incH-deliverWrap{
  width: min(560px, 100%) !important;
  margin: 0 auto !important;
}

/* 2x2 más compacto, pero sin cortar texto */
body.svc-expansion #incluye .incH-docs--tight{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-rows: 146px !important; /* suficiente para 3 líneas cómodas */
  gap: 12px !important;
  place-content: center !important;
}

/* Tarjeta: tag arriba, texto centrado en el espacio */
body.svc-expansion #incluye .incH-doc{
  height: 100% !important;
  padding: 14px 14px !important;
  border-radius: 14px !important;

  display: grid !important;
  grid-template-rows: auto 1fr !important; /* tag + cuerpo */
  row-gap: 10px !important;

  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,252,.92)) !important;
  border: 1px solid rgba(11,31,58,.10) !important;
  box-shadow: 0 12px 20px rgba(11,31,58,.06) !important;
}

/* Tag */
body.svc-expansion #incluye .incH-docTag{
  justify-self: start !important;
  align-self: start !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: #0b4aa2 !important;
  background: rgba(10,103,194,.10) !important;
  border: 1px solid rgba(10,103,194,.18) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
}

/* Body centrado verticalmente */
body.svc-expansion #incluye .incH-docBody{
  align-self: center !important;
  display: grid !important;
  gap: 6px !important;
}

body.svc-expansion #incluye .incH-docBody b{
  margin: 0 !important;
  font-size: 15px !important;
  letter-spacing: -0.2px !important;
  color: #0b1f3a !important;
}

body.svc-expansion #incluye .incH-docSub{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(81,96,122,.92) !important;
  line-height: 1.25 !important;
}

body.svc-expansion #incluye .incH-docWhy{
  font-size: 12.6px !important;
  color: rgba(81,96,122,.88) !important;
  line-height: 1.25 !important;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-expansion #incluye .incH-pitchDeliver{
    margin-left: 0 !important;
  }
  body.svc-expansion #incluye .incH-pitchDeliver::before{
    display:none !important;
  }
  body.svc-expansion #incluye .incH-docs--tight{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
}
/* =========================================================
   EXPANSIÓN — tarjetas entregables: pill + título en la misma línea
   (compacto, congruente y bien alineado)
========================================================= */

body.svc-expansion #incluye .incH-docs--tight{
  grid-auto-rows: 140px !important; /* un poco más compacto, sin cortar */
}

/* Card: menos aire vertical, mejor balance */
body.svc-expansion #incluye .incH-doc{
  padding: 14px 14px !important;
  row-gap: 10px !important;
}

/* Header: pill + título juntos */
body.svc-expansion #incluye .incH-docHead{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
}

/* Pill: un poco más chica para que no compita con el título */
body.svc-expansion #incluye .incH-docTag{
  font-size: 10.5px !important;
  padding: 6px 10px !important;
  letter-spacing: .10em !important;
}

/* Título al lado del pill: tamaño congruente */
body.svc-expansion #incluye .incH-docTitle{
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  color: #0b1f3a !important;
  line-height: 1.05 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* si se pasa, se recorta elegante */
}

/* Texto: compacto y ordenado */
body.svc-expansion #incluye .incH-docText{
  display: grid !important;
  gap: 6px !important;
  align-content: start !important;
}

body.svc-expansion #incluye .incH-docSub{
  font-size: 12.8px !important;
  font-weight: 650 !important;
  color: rgba(81,96,122,.92) !important;
  line-height: 1.2 !important;
}

body.svc-expansion #incluye .incH-docWhy{
  font-size: 12.3px !important;
  color: rgba(81,96,122,.88) !important;
  line-height: 1.25 !important;
}

/* En pantallas chicas: permite que el título baje si hace falta */
@media (max-width: 520px){
  body.svc-expansion #incluye .incH-docTitle{
    white-space: normal;
  }
}
/* =========================================================
   EXPANSIÓN — Compactar sección #incluye (vista laptop)
   Objetivo: verla completa sin “scroll” adicional
========================================================= */

/* 1) Reduce el padding vertical de la sección (en tu CSS global es grande) */
body.svc-expansion #incluye{
  padding: 56px 0 !important;
}

/* 2) Compacta el espacio interno de la tarjeta grande (Decision Pack) */
body.svc-expansion #incluye .incH-top{
  margin-top: 14px !important;
}

body.svc-expansion #incluye .incH-pitch{
  padding: 18px !important;
}

body.svc-expansion #incluye .incH-pitchGrid{
  column-gap: 22px !important;   /* separación pero sin gastar altura */
}

/* 3) Lado izquierdo: tipografías y espacios un poco más compactos */
body.svc-expansion #incluye .incH-pitchCopy h3{
  font-size: 24px !important;
  line-height: 1.08 !important;
  margin-bottom: 8px !important;
}

body.svc-expansion #incluye .incH-pitchCopy p{
  font-size: 15.5px !important;
  line-height: 1.35 !important;
  margin-top: 8px !important;
}

body.svc-expansion #incluye .incH-proof{
  margin-top: 12px !important;
  gap: 10px !important;
}

body.svc-expansion #incluye .incH-proofItem{
  padding: 12px !important;
}

body.svc-expansion #incluye .incH-proofItem b{
  font-size: 14px !important;
}

body.svc-expansion #incluye .incH-proofItem span{
  font-size: 13px !important;
  line-height: 1.25 !important;
}

body.svc-expansion #incluye .incH-note{
  margin-top: 12px !important;
  padding: 14px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* 4) Panel derecho: menos padding, y bloque 2x2 más pequeño */
body.svc-expansion #incluye .incH-pitchDeliver{
  padding: 16px 18px !important;
}

body.svc-expansion #incluye .incH-deliverWrap{
  width: min(520px, 100%) !important; /* reduce el bloque total */
}

/* 4 tarjetas: más bajitas para que no “sobren” pixeles */
body.svc-expansion #incluye .incH-docs--tight{
  gap: 10px !important;
  grid-auto-rows: 126px !important;  /* 👈 clave para caber en laptop */
}

/* Dentro de cada tarjeta: compacto y con armonía */
body.svc-expansion #incluye .incH-doc{
  padding: 12px !important;
  row-gap: 8px !important;
}

body.svc-expansion #incluye .incH-docTag{
  font-size: 10px !important;
  padding: 5px 9px !important;
}

body.svc-expansion #incluye .incH-docTitle{
  font-size: 14px !important;
  line-height: 1.05 !important;
}

body.svc-expansion #incluye .incH-docSub{
  font-size: 12.2px !important;
  line-height: 1.2 !important;
}

body.svc-expansion #incluye .incH-docWhy{
  font-size: 11.8px !important;
  line-height: 1.2 !important;
}

/* =========================================================
   EXTRA: Si la laptop tiene poca altura (pantallas “chaparras”)
   (esto hace aún más compacto SOLO cuando es necesario)
========================================================= */
@media (max-height: 780px){
  body.svc-expansion #incluye{ padding: 44px 0 !important; }

  body.svc-expansion #incluye .incH-pitch{ padding: 16px !important; }

  body.svc-expansion #incluye .incH-pitchCopy h3{ font-size: 22px !important; }
  body.svc-expansion #incluye .incH-pitchCopy p{ font-size: 15px !important; }

  body.svc-expansion #incluye .incH-docs--tight{ grid-auto-rows: 118px !important; }
  body.svc-expansion #incluye .incH-docTitle{ font-size: 13.6px !important; }
  body.svc-expansion #incluye .incH-docWhy{ font-size: 11.4px !important; }
}
/* Reparte mejor los elementos internos para aprovechar el ancho */
body.svc-expansion #incluye .incH-proof{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* tus 3 mini tarjetas en 3 columnas */
  gap: 12px !important;
}

@media (max-width: 980px){
  body.svc-expansion #incluye .incH-proof{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   EXPANSIÓN — Decision Pack (solo contenido izquierdo) FULL WIDTH
   (revierte grids raros y evita que se alargue hacia abajo)
========================================================= */

/* 1) El contenedor vuelve a 1 columna (no 2 columnas internas) */
body.svc-expansion #incluye .incH-pitchGrid{
  grid-template-columns: 1fr !important;
  column-gap: 0 !important;
}

/* 2) Revierte cualquier display:grid anterior del contenido */
body.svc-expansion #incluye .incH-pitchCopy{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

/* 3) Deja que el párrafo use más ancho (evita el “bloque angosto”) */
body.svc-expansion #incluye .incH-pitchCopy p{
  max-width: none !important;
}

/* 4) Las 3 cajitas se estiran a lo ancho (sin dejar huecos raros) */
body.svc-expansion #incluye .incH-proof{
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

/* 5) El objetivo también full-width */
body.svc-expansion #incluye .incH-note{
  width: 100% !important;
  max-width: none !important;
}

/* 6) Por si quedó algún panel derecho “fantasma”, lo ocultamos */
body.svc-expansion #incluye .incH-pitchDeliver{
  display: none !important;
}

/* Responsive: en móvil una columna */
@media (max-width: 980px){
  body.svc-expansion #incluye .incH-proof{
    grid-template-columns: 1fr !important;
  }
}
/* Botón secondary visible en paneles claros (ej. Tip en Expansion) */
body.svc-expansion .svc-mini-cta .btn-secondary{
  background: rgba(10,103,194,.10);
  color: rgba(11,31,58,.92);
  border: 1px solid rgba(10,103,194,.28);
  box-shadow: 0 12px 26px rgba(11,31,58,.08);
}

body.svc-expansion .svc-mini-cta .btn-secondary:hover{
  background: rgba(10,103,194,.14);
  border-color: rgba(10,103,194,.40);
  transform: translateY(-1px);
}
/* =========================================================
   EXPANSIÓN — Lo que cambia (Tabs / selector dinámico, sin JS)
   Distinto a “tarjetas copiadas”: paneles + selector + diagramas
========================================================= */

body.svc-expansion #lo-que-cambia .expTabs{
  margin-top: 18px;
}

/* radios ocultos */
body.svc-expansion #lo-que-cambia .expTabs__input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* NAV tipo “segmented control” */
body.svc-expansion #lo-que-cambia .expTabs__nav{
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
}

body.svc-expansion #lo-que-cambia .expTabs__btn{
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 13px;
  color: rgba(11,31,58,.82);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

body.svc-expansion #lo-que-cambia .expTabs__dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(10,103,194,.30);
  box-shadow: 0 8px 18px rgba(11,31,58,.10);
}

/* estado activo */
body.svc-expansion #lo-que-cambia #tab-antes:checked ~ .expTabs__nav label[for="tab-antes"],
body.svc-expansion #lo-que-cambia #tab-reglas:checked ~ .expTabs__nav label[for="tab-reglas"],
body.svc-expansion #lo-que-cambia #tab-resultado:checked ~ .expTabs__nav label[for="tab-resultado"]{
  background: rgba(10,103,194,.10);
  color: rgba(11,31,58,.92);
  transform: translateY(-1px);
}

body.svc-expansion #lo-que-cambia #tab-antes:checked ~ .expTabs__nav label[for="tab-antes"] .expTabs__dot{
  background: rgba(245,158,11,.55);
}
body.svc-expansion #lo-que-cambia #tab-reglas:checked ~ .expTabs__nav label[for="tab-reglas"] .expTabs__dot{
  background: rgba(10,103,194,.65);
}
body.svc-expansion #lo-que-cambia #tab-resultado:checked ~ .expTabs__nav label[for="tab-resultado"] .expTabs__dot{
  background: rgba(34,197,94,.60);
}

/* STAGE: donde viven paneles superpuestos */
body.svc-expansion #lo-que-cambia .expTabs__stage{
  position: relative;
  margin-top: 14px;
  min-height: 360px;
}

/* PANEL base */
body.svc-expansion #lo-que-cambia .expPanel{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;

  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background:
    radial-gradient(950px 420px at 10% 0%, rgba(10,103,194,.12), rgba(255,255,255,0) 55%),
    rgba(255,255,255,.82);
  box-shadow: 0 30px 90px rgba(11,31,58,.12);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* variantes sutiles */
body.svc-expansion #lo-que-cambia .expPanel--antes{
  background:
    radial-gradient(950px 420px at 10% 0%, rgba(245,158,11,.12), rgba(255,255,255,0) 55%),
    rgba(255,255,255,.82);
}
body.svc-expansion #lo-que-cambia .expPanel--resultado{
  background:
    radial-gradient(950px 420px at 10% 0%, rgba(34,197,94,.12), rgba(255,255,255,0) 55%),
    rgba(255,255,255,.82);
}

/* panel activo según radio */
body.svc-expansion #lo-que-cambia #tab-antes:checked ~ .expTabs__stage #panel-antes,
body.svc-expansion #lo-que-cambia #tab-reglas:checked ~ .expTabs__stage #panel-reglas,
body.svc-expansion #lo-que-cambia #tab-resultado:checked ~ .expTabs__stage #panel-resultado{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* layout interno del panel */
body.svc-expansion #lo-que-cambia .expPanel__grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  padding: 20px;
}

body.svc-expansion #lo-que-cambia .expPanel__eyebrow{
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,31,58,.78);
}

body.svc-expansion #lo-que-cambia .expPanel__title{
  margin: 10px 0 0;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.4px;
  color: rgba(11,31,58,.92);
}

body.svc-expansion #lo-que-cambia .expPanel__text{
  margin-top: 10px;
  color: rgba(81,96,122,.92);
  font-weight: 650;
  line-height: 1.55;
}

/* bullets */
body.svc-expansion #lo-que-cambia .expBullets{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: rgba(81,96,122,.92);
  line-height: 1.5;
}
body.svc-expansion #lo-que-cambia .expBullets b{
  color: rgba(11,31,58,.92);
}

/* chips */
body.svc-expansion #lo-que-cambia .expChips{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.svc-expansion #lo-que-cambia .expChips span{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.92);
  font-weight: 850;
  font-size: 12.2px;
  color: rgba(11,31,58,.74);
}

/* riesgo line */
body.svc-expansion #lo-que-cambia .expRiskLine{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
  padding: 12px;
}
body.svc-expansion #lo-que-cambia .expRiskLine__label{
  font-weight: 900;
  color: rgba(11,31,58,.88);
  font-size: 13px;
  margin-bottom: 8px;
}
body.svc-expansion #lo-que-cambia .expRiskLine__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,31,58,.08);
  overflow: hidden;
}
body.svc-expansion #lo-que-cambia .expRiskLine__fill{
  display:block;
  width: 76%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(245,158,11,.65), rgba(239,68,68,.55));
}

/* framework (no cards tradicionales) */
body.svc-expansion #lo-que-cambia .expFramework{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
body.svc-expansion #lo-que-cambia .expFw{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
}
body.svc-expansion #lo-que-cambia .expFw__k{
  display:block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  font-size: 13px;
}
body.svc-expansion #lo-que-cambia .expFw__v{
  display:block;
  margin-top: 4px;
  font-weight: 650;
  color: rgba(81,96,122,.92);
  font-size: 12.6px;
  line-height: 1.25;
}

/* rulebook mini-art */
body.svc-expansion #lo-que-cambia .expRulebook{
  border-radius: 22px;
  border: 1px solid rgba(10,103,194,.16);
  background:
    radial-gradient(600px 260px at 90% 0%, rgba(10,103,194,.14), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.70);
  padding: 14px;
  box-shadow: 0 20px 60px rgba(11,31,58,.10);
}
body.svc-expansion #lo-que-cambia .expRulebook__title{
  font-weight: 950;
  color: rgba(11,31,58,.92);
  margin-bottom: 10px;
}
body.svc-expansion #lo-que-cambia .expRulebook__row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
body.svc-expansion #lo-que-cambia .expRulebook__row span{
  height: 10px;
  border-radius: 999px;
  background: rgba(10,103,194,.14);
  border: 1px solid rgba(10,103,194,.10);
}

/* outcome */
body.svc-expansion #lo-que-cambia .expOutcome{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
body.svc-expansion #lo-que-cambia .expOutcome__item{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
}
body.svc-expansion #lo-que-cambia .expOutcome__item b{
  display:block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  font-size: 13px;
}
body.svc-expansion #lo-que-cambia .expOutcome__item span{
  display:block;
  margin-top: 4px;
  font-weight: 650;
  color: rgba(81,96,122,.92);
  font-size: 12.6px;
  line-height: 1.25;
}

/* stamp */
body.svc-expansion #lo-que-cambia .expStamp{
  margin-top: 10px;
  border-radius: 22px;
  border: 1px dashed rgba(11,31,58,.22);
  padding: 16px 14px;
  background: rgba(255,255,255,.70);
  text-align: center;
}
body.svc-expansion #lo-que-cambia .expStamp__a{
  display:block;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(81,96,122,.92);
  font-size: 12px;
}
body.svc-expansion #lo-que-cambia .expStamp__b{
  display:block;
  font-weight: 950;
  letter-spacing: -0.4px;
  color: rgba(11,31,58,.92);
  font-size: 18px;
  margin-top: 4px;
}

/* responsive */
@media (max-width: 980px){
  body.svc-expansion #lo-que-cambia .expTabs__stage{
    min-height: 520px;
  }
  body.svc-expansion #lo-que-cambia .expPanel__grid{
    grid-template-columns: 1fr;
  }
  body.svc-expansion #lo-que-cambia .expOutcome{
    grid-template-columns: 1fr;
  }
  body.svc-expansion #lo-que-cambia .expFramework{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   EXPANSIÓN — Tabs: que se sientan como botones + dots siempre visibles
========================================================= */

/* A) Pista visual: “Haz clic…” (sin tocar HTML) */
body.svc-expansion #lo-que-cambia .expTabs__nav{
  position: relative;
  padding-top: 28px; /* hace espacio para el hint */
}

body.svc-expansion #lo-que-cambia .expTabs__nav::before{
  content: "Haz clic para cambiar";
  position: absolute;
  top: 6px;
  left: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(81,96,122,.85);
}

/* B) Botones más obvios (parecen “clickables”) */
body.svc-expansion #lo-que-cambia .expTabs__btn{
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(11,31,58,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

body.svc-expansion #lo-que-cambia .expTabs__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(11,31,58,.12);
  border-color: rgba(10,103,194,.25);
}

/* C) Estado activo más claro */
body.svc-expansion #lo-que-cambia #tab-antes:checked ~ .expTabs__nav label[for="tab-antes"],
body.svc-expansion #lo-que-cambia #tab-reglas:checked ~ .expTabs__nav label[for="tab-reglas"],
body.svc-expansion #lo-que-cambia #tab-resultado:checked ~ .expTabs__nav label[for="tab-resultado"]{
  background: rgba(10,103,194,.12);
  border-color: rgba(10,103,194,.30);
  box-shadow: 0 18px 40px rgba(11,31,58,.14);
}

/* D) Dots con color FIJO por botón (siempre visibles) */
body.svc-expansion #lo-que-cambia .expTabs__nav label[for="tab-antes"] .expTabs__dot{
  background: rgba(245,158,11,.75);
}
body.svc-expansion #lo-que-cambia .expTabs__nav label[for="tab-reglas"] .expTabs__dot{
  background: rgba(10,103,194,.80);
}
body.svc-expansion #lo-que-cambia .expTabs__nav label[for="tab-resultado"] .expTabs__dot{
  background: rgba(34,197,94,.75);
}

/* E) Cuando está activo, el dot “brilla” un poquito (más notorio) */
body.svc-expansion #lo-que-cambia #tab-antes:checked ~ .expTabs__nav label[for="tab-antes"] .expTabs__dot,
body.svc-expansion #lo-que-cambia #tab-reglas:checked ~ .expTabs__nav label[for="tab-reglas"] .expTabs__dot,
body.svc-expansion #lo-que-cambia #tab-resultado:checked ~ .expTabs__nav label[for="tab-resultado"] .expTabs__dot{
  box-shadow: 0 0 0 6px rgba(10,103,194,.08), 0 10px 22px rgba(11,31,58,.14);
}

/* F) Cursor de toda la barrita (refuerza que es interactivo) */
body.svc-expansion #lo-que-cambia .expTabs__nav *{
  cursor: pointer;
}
/* Tabs — quitar hint y acomodar botones */
body.svc-expansion #lo-que-cambia .expTabs__nav{
  padding-top: 6px !important;      /* quita el espacio extra */
  display: flex !important;
  width: fit-content;
  margin: 0 auto;                   /* centrado */
  flex-wrap: wrap;                  /* por si en pantallas chicas no caben */
  gap: 6px;
}

body.svc-expansion #lo-que-cambia .expTabs__nav::before{
  content: none !important;
  display: none !important;
}

/* Botones: que se vean “botón” y alineados bonito */
body.svc-expansion #lo-que-cambia .expTabs__btn{
  justify-content: center;
  min-width: 120px;                 /* consistencia visual */
}
/* Regla del juego — ya no vacío, ahora mini-resumen ejecutivo */
body.svc-expansion #lo-que-cambia .expRuleItems{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

body.svc-expansion #lo-que-cambia .expRuleItem{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
}

body.svc-expansion #lo-que-cambia .expRuleDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(10,103,194,.80);
  margin-top: 6px;
  box-shadow: 0 10px 18px rgba(11,31,58,.10);
  flex: 0 0 auto;
}

body.svc-expansion #lo-que-cambia .expRuleText b{
  display: block;
  font-weight: 950;
  color: rgba(11,31,58,.92);
  font-size: 13.5px;
  line-height: 1.15;
}

body.svc-expansion #lo-que-cambia .expRuleText span{
  display: block;
  margin-top: 4px;
  color: rgba(81,96,122,.92);
  font-weight: 650;
  font-size: 12.6px;
  line-height: 1.3;
}
/* =========================================================
   EXPANSIÓN — Lo que cambia / Con reglas
   "Reglas del juego" estilo rulebook (lista premium, no tarjetas)
========================================================= */

body.svc-expansion #lo-que-cambia .expRulebook{
  padding: 16px !important;             /* un poco menos */
  border-radius: 22px !important;
}

/* Quita la sensación de "4 tarjetas" y lo vuelve lista */
body.svc-expansion #lo-que-cambia .expRuleItems{
  margin-top: 10px !important;
  gap: 0 !important;
}

body.svc-expansion #lo-que-cambia .expRuleItem{
  background: transparent !important;
  border: 0 !important;
  padding: 12px 6px !important;
  border-radius: 0 !important;
}

body.svc-expansion #lo-que-cambia .expRuleItem + .expRuleItem{
  border-top: 1px solid rgba(11,31,58,.10) !important;
}

/* Punto más fino (menos “pesado”) */
body.svc-expansion #lo-que-cambia .expRuleDot{
  width: 8px !important;
  height: 8px !important;
  margin-top: 8px !important;
  box-shadow: 0 10px 18px rgba(11,31,58,.08) !important;
}

/* Tipografía más compacta y congruente */
body.svc-expansion #lo-que-cambia .expRuleText b{
  font-size: 14px !important;
  line-height: 1.15 !important;
}

body.svc-expansion #lo-que-cambia .expRuleText span{
  font-size: 12.8px !important;
  line-height: 1.28 !important;
  color: rgba(81,96,122,.92) !important;
}

/* Opcional: evita que el texto se “desparrame” muy ancho */
body.svc-expansion #lo-que-cambia .expRuleText{
  max-width: 46ch;
}


/* =========================
   CONTACTO: tip "3 datos"
   ========================= */
.hc-contact-tip{
  margin-top: 14px;
  background: radial-gradient(420px 220px at 15% 10%, rgba(10,103,194,.10), rgba(255,255,255,0) 60%),
              #f6f9fc;
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(11,31,58,.06);
}
.hc-tip-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(11,31,58,.92);
  margin-bottom: 4px;
}
.hc-tip-text{
  font-size: 13.5px;
  color: rgba(81,96,122,.92);
  line-height: 1.5;
}

/* Evitar que los chips se rompan raro */
.hc-chips, .svc-chips{
  align-items: center;
}


/* =========================
   CONTACTO (página nueva)
   ========================= */
.page-contact .contact-hero{
  position: relative;
  padding: 96px 0 56px;
  overflow: hidden;
  background: #061a33;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.page-contact .contact-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: saturate(.95) contrast(1.05) brightness(.55);
}

.page-contact .contact-hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 18% 15%, rgba(29,78,216,.40), transparent 55%),
    radial-gradient(820px 420px at 85% 25%, rgba(11,31,58,.40), transparent 58%),
    linear-gradient(90deg, rgba(6,26,51,.92) 0%, rgba(6,26,51,.82) 46%, rgba(6,26,51,.66) 100%);
}

.page-contact .contact-hero-grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: start;
}

.page-contact .contact-kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 800;
  color: rgba(230,242,255,.82);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.page-contact .contact-title{
  margin: 0 0 12px;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: #ffffff;
}

.page-contact .contact-lead{
  margin: 0 0 18px;
  color: rgba(235,244,255,.82);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 62ch;
}

.page-contact .contact-hero-list{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 64ch;
}

.page-contact .contact-hero-list li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: rgba(235,244,255,.88);
  line-height: 1.6;
}

.page-contact .contact-check{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.18);
  border: 1px solid rgba(37,99,235,.28);
  color: rgba(240,248,255,.95);
  font-weight: 900;
  margin-top: 1px;
}

.page-contact .contact-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.page-contact .contact-badge{
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(238,246,255,.9);
  backdrop-filter: blur(8px);
}

.page-contact .contact-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.page-contact .contact-note{
  margin: 0;
  color: rgba(235,244,255,.72);
  font-size: 14px;
}
.page-contact .contact-note a{
  color: rgba(160,212,255,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Form en hero */
.page-contact .contact-form{
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  border: 1px solid rgba(11,31,58,.14);
}

/* Barra de beneficios */
.page-contact .contact-strip{
  padding: 36px 0 64px;
  background: linear-gradient(180deg, #ffffff, #ffffff);
}

.page-contact .contact-strip-inner{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(90deg, rgba(16,123,255,.92), rgba(10,103,194,.92));
  box-shadow: 0 16px 44px rgba(11,31,58,.16);
  border: 1px solid rgba(11,31,58,.08);
  overflow: hidden;
}

.page-contact .contact-strip-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 16px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 28px rgba(11,31,58,.10);
}

.page-contact .contact-strip-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(10,103,194,.10);
  border: 1px solid rgba(10,103,194,.18);
  flex: 0 0 auto;
}

.page-contact .contact-strip-ico svg{
  width: 22px;
  height: 22px;
  stroke: rgba(10,103,194,.95);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-contact .contact-strip-txt b{
  display:block;
  font-size: 14.5px;
  letter-spacing: -0.2px;
  color: rgba(11,31,58,.92);
}
.page-contact .contact-strip-txt span{
  display:block;
  margin-top: 2px;
  font-size: 13px;
  color: rgba(11,31,58,.64);
}

/* Botones flotantes (solo en contacto) */
.page-contact .contact-fab{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.page-contact .fab-btn{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 26px rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,103,194,.96);
}

.page-contact .fab-btn svg{
  width: 22px;
  height: 22px;
  fill: #ffffff;
}

.page-contact .fab-wa{
  background: #22c55e;
}

/* Responsive */
@media (max-width: 980px){
  .page-contact .contact-hero{
    padding: 84px 0 52px;
  }
  .page-contact .contact-hero-grid{
    grid-template-columns: 1fr;
  }
  .page-contact .contact-strip-inner{
    grid-template-columns: 1fr;
  }
  .page-contact .contact-fab{
    top: auto;
    bottom: 18px;
    transform: none;
  }
}

/* 3) Unir visualmente la barra de beneficios al hero (que no se vea separada) */
.page-contact .contact-hero{
  padding-bottom: 88px !important;        /* da “espacio” para que la barra suba */
  border-bottom: none !important;         /* evita línea/corte */
}

.page-contact .contact-strip{
  margin-top: -52px !important;           /* sube la barra para pegarla al hero */
  padding-top: 0 !important;
  background: transparent !important;
  position: relative;
  z-index: 3;
}

/* Si tu barra tiene un contenedor grande con fondo, lo hacemos transparente */
.page-contact .contact-strip > .container{
  background: transparent !important;
}

/* Ajuste móvil */
@media (max-width: 980px){
  .page-contact .contact-hero{ padding-bottom: 72px !important; }
  .page-contact .contact-strip{ margin-top: -34px !important; }
}
/* ================================
   CONTACTO — Reducir espacio bajo navbar
   (PEGAR AL FINAL)
   ================================ */

.page-contact .contact-hero{
  padding-top: 72px !important;   /* prueba 72; si quieres más pegado baja a 64 o 56 */
}

/* Si en móvil se ve muy abajo, también lo ajustamos */
@media (max-width: 980px){
  .page-contact .contact-hero{
    padding-top: 56px !important; /* prueba 56; si quieres más pegado baja a 48 */
  }
}
/* =========================================
   PÁGINAS NAVBAR — Estilos (AISLADOS)
   Pega al final de styles.css
   ========================================= */

.hc-container{ max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hc-section{ padding: 72px 0; }
.hc-section--tight{ padding: 52px 0; }

.hc-hero{
  background: radial-gradient(1200px 600px at 15% 20%, rgba(15,111,255,.22), transparent 60%),
              radial-gradient(900px 500px at 80% 15%, rgba(15,111,255,.14), transparent 55%),
              #061a33;
  color: #fff;
  padding: 96px 0 72px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hc-hero .hc-kicker{
  display:inline-flex; gap:10px; align-items:center;
  font-size: 12px; letter-spacing:.16em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.16);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.hc-hero h1{
  margin: 16px 0 10px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.hc-hero p{
  margin: 0;
  max-width: 60ch;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.6;
}
.hc-hero .hc-cta{ margin-top: 18px; display:flex; gap:12px; flex-wrap:wrap; }

.hc-grid-2{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }
.hc-grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.hc-grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; }

.hc-card{
  background: #fff;
  border: 1px solid rgba(11,31,58,.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(11,31,58,.08);
}
.hc-card--soft{
  background: #f6f9ff;
  border-color: rgba(15,111,255,.14);
}
.hc-card h3{ margin: 0 0 6px; font-size: 16px; }
.hc-card p{ margin: 0; color: rgba(11,31,58,.74); line-height: 1.55; }

.hc-list{ margin: 10px 0 0; padding-left: 18px; color: rgba(11,31,58,.74); }
.hc-list li{ margin: 6px 0; }

.hc-strip{
  margin-top: -36px;
  padding: 0 0 56px;
}
.hc-strip-inner{
  background: linear-gradient(90deg, rgba(16,123,255,.92), rgba(10,103,194,.92));
  border-radius: 26px;
  padding: 16px;
  box-shadow: 0 16px 44px rgba(11,31,58,.14);
  border: 1px solid rgba(11,31,58,.08);
}
.hc-pill{
  display:flex; gap: 12px; align-items:center;
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(11,31,58,.08);
}
.hc-pill b{ display:block; color:#0b1f3a; }
.hc-pill span{ display:block; color: rgba(11,31,58,.68); font-size: 13px; margin-top: 2px; }

.hc-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12px;
  color: rgba(11,31,58,.72);
  background: #f2f6ff;
  border: 1px solid rgba(15,111,255,.16);
  padding: 8px 10px;
  border-radius: 999px;
}

.hc-steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.hc-step{
  background:#fff;
  border:1px solid rgba(11,31,58,.08);
  border-radius: 18px;
  padding: 16px;
}
.hc-step .n{
  width: 28px; height: 28px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background:#f2f6ff;
  border:1px solid rgba(15,111,255,.16);
  color:#0b1f3a;
  font-weight: 700;
  margin-bottom: 10px;
}

.hc-faq details{
  border:1px solid rgba(11,31,58,.08);
  border-radius: 14px;
  background:#fff;
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: 0 12px 30px rgba(11,31,58,.06);
}
.hc-faq summary{
  cursor:pointer;
  font-weight: 700;
  color:#0b1f3a;
  list-style: none;
}
.hc-faq summary::-webkit-details-marker{ display:none; }
.hc-faq .a{ margin-top: 10px; color: rgba(11,31,58,.74); line-height: 1.6; }

.hc-split-card{
  background: #fff;
  border: 1px solid rgba(11,31,58,.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(11,31,58,.08);
}

@media (max-width: 980px){
  .hc-hero{ padding: 84px 0 64px; }
  .hc-grid-2{ grid-template-columns: 1fr; }
  .hc-grid-3{ grid-template-columns: 1fr; }
  .hc-grid-4{ grid-template-columns: 1fr; }
  .hc-steps{ grid-template-columns: 1fr; }
  .hc-strip{ margin-top: -20px; }
}

/* =========================================================
   QUIÉNES SOMOS (page-quienes) — contenido + confianza
   Solo aplica a esta página (aislado).
========================================================= */
body.page-quienes .qs-manifest{
  margin-top: 12px;
  max-width: 70ch;
  line-height: 1.6;
  color: rgba(11,31,58,.78);
}

body.page-quienes .qs-trustline{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.66);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 46px rgba(11,31,58,.08);
  font-weight: 750;
  color: rgba(11,31,58,.70);
  font-size: 12.6px;
}
body.page-quienes .qs-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(29,78,216,.75);
  box-shadow: 0 0 0 4px rgba(29,78,216,.14);
}

body.page-quienes .qs-miniCtas{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Head común */
body.page-quienes .qs-head{
  max-width: 980px;
  margin: 0 0 18px;
}
body.page-quienes .qs-head h2{
  margin: 0 0 8px;
  color:#0b1f3a;
  letter-spacing: -0.02em;
}
body.page-quienes .qs-head p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
  max-width: 80ch;
}

/* MVV */
body.page-quienes .qs-mvv{
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(29,78,216,.10), transparent 60%),
    radial-gradient(700px 420px at 96% 10%, rgba(11,31,58,.08), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
}
body.page-quienes .qs-mvv-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
body.page-quienes .qs-mvv-card{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
  padding: 16px 16px 18px;
}
body.page-quienes .qs-tag{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.16);
  background: rgba(29,78,216,.06);
  color: rgba(29,78,216,.92);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.page-quienes .qs-mvv-card h3{
  margin: 10px 0 6px;
  color:#0b1f3a;
  letter-spacing: -0.02em;
}
body.page-quienes .qs-mvv-card p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.5;
}

/* Valores */
body.page-quienes .qs-values-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
body.page-quienes .qs-val{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 50px rgba(11,31,58,.08);
}
body.page-quienes .qs-ic{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(29,78,216,.95);
  background: rgba(29,78,216,.10);
  border: 1px solid rgba(29,78,216,.18);
  flex: 0 0 auto;
}
body.page-quienes .qs-val b{
  display:block;
  color:#0b1f3a;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
body.page-quienes .qs-val span{
  display:block;
  color: rgba(11,31,58,.70);
  line-height: 1.35;
  font-weight: 650;
  font-size: 12.8px;
}

/* Bullets */
body.page-quienes .qs-bullets{
  margin: 12px 0 0;
  padding-left: 0;
  list-style: none;
  display:grid;
  gap: 8px;
}
body.page-quienes .qs-bullets li{
  position: relative;
  padding-left: 16px;
  color: rgba(11,31,58,.76);
  line-height: 1.45;
}
body.page-quienes .qs-bullets li::before{
  content:"";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(29,78,216,.70);
  position:absolute;
  left: 0;
  top: 8px;
}

/* Story */
body.page-quienes .qs-storyText{
  margin: 10px 0 0;
  color: rgba(11,31,58,.74);
  line-height: 1.55;
}
body.page-quienes .qs-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(246,249,252,.80);
  color: rgba(11,31,58,.70);
  font-weight: 650;
  font-size: 12.6px;
}

/* Método */
body.page-quienes .qs-method-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
body.page-quienes .qs-stepCard{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.90);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
  padding: 14px 14px 16px;
}
body.page-quienes .qs-stepTop{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
body.page-quienes .qs-stepN{
  width: 34px; height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(255,255,255,.96);
  background: rgba(29,78,216,.90);
  box-shadow: 0 12px 30px rgba(29,78,216,.18);
  flex: 0 0 auto;
}
body.page-quienes .qs-stepTop b{
  display:block;
  color:#0b1f3a;
  margin-top: 1px;
}
body.page-quienes .qs-stepTop span{
  display:block;
  margin-top: 4px;
  color: rgba(11,31,58,.70);
  line-height: 1.35;
  font-weight: 650;
  font-size: 12.8px;
}
body.page-quienes .qs-stepCtas{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Bloque confidencialidad */
body.page-quienes .qs-process{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(11,31,58,.08);
}
body.page-quienes .qs-processTitle{
  font-weight: 900;
  color:#0b1f3a;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
body.page-quienes .qs-processGrid{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
body.page-quienes .qs-chip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
  color: rgba(11,31,58,.74);
  font-weight: 800;
  font-size: 12.3px;
}
body.page-quienes .qs-lockCtas{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* CTA final */
body.page-quienes .qs-finalCta{
  padding-top: 0;
}
body.page-quienes .qs-finalInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;

  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 60px rgba(11,31,58,.10);
  padding: 16px 16px;
}
body.page-quienes .qs-finalTitle{
  font-size: 16px;
  color:#0b1f3a;
}
body.page-quienes .qs-finalSub{
  color: rgba(11,31,58,.72);
  margin-top: 4px;
}
body.page-quienes .qs-finalBtns{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .qs-mvv-grid,
  body.page-quienes .qs-values-grid,
  body.page-quienes .qs-method-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   QUIÉNES SOMOS — HERO + FONDOS (AISLADO)
   Pega al final de styles.css
   ========================================================= */

/* Fondo general (quita sensación plana/blanca) */
body.page-quienes{
  background:
    radial-gradient(1000px 600px at 12% 12%, rgba(10,103,194,.12), transparent 62%),
    radial-gradient(900px 560px at 88% 18%, rgba(11,74,162,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5f8ff 55%, #ffffff 100%);
}

/* Layout base de los bloques hc-* (solo aquí) */
body.page-quienes .hc-container{
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

body.page-quienes .hc-grid-2{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}

body.page-quienes .hc-grid-3{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

body.page-quienes .hc-list{
  margin: 10px 0 0;
  padding-left: 18px;
}

body.page-quienes .hc-cta{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* HERO con profundidad (premium) */
body.page-quienes .hc-hero{
  position: relative;
  padding: 110px 0 76px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1100px 620px at 18% 18%, rgba(15,111,255,.22), transparent 62%),
    radial-gradient(900px 520px at 82% 14%, rgba(10,103,194,.16), transparent 60%),
    #061a33;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.page-quienes .hc-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
  pointer-events:none;
}

body.page-quienes .hc-hero > *{
  position: relative;
  z-index: 2;
}

body.page-quienes .hc-kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size: 12px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.16);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

body.page-quienes .hc-hero h1{
  margin: 16px 0 10px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -.02em;
}

body.page-quienes .hc-hero p{
  margin: 0;
  max-width: 62ch;
  color: rgba(255,255,255,.84);
  font-size: 16px;
  line-height: 1.6;
}

/* Bloque derecho del hero (imagen + tarjeta) */
body.page-quienes .qs-hero-right{
  display:grid;
  gap: 12px;
}

/* Imagen empática */
body.page-quienes .qs-hero-photo{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 240px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 90px rgba(0,0,0,.35);
}

body.page-quienes .qs-hero-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

body.page-quienes .qs-hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(6,26,51,0) 18%, rgba(6,26,51,.82) 100%);
}

body.page-quienes .qs-hero-caption{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  color:#fff;
}

body.page-quienes .qs-hero-caption b{
  display:block;
  font-size: 14px;
  letter-spacing: -.01em;
}

body.page-quienes .qs-hero-caption span{
  display:block;
  margin-top: 3px;
  font-size: 12.8px;
  opacity: .86;
}

/* Tarjetas / profundidad (para que no se vea plano) */
body.page-quienes .hc-split-card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 22px 80px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
}

body.page-quienes .hc-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

body.page-quienes .hc-split-card .hc-list{
  color: rgba(255,255,255,.88);
}

/* Barra de 3 “pills” (que se vea integrada y premium) */
body.page-quienes .hc-strip{
  margin-top: -40px;
  padding: 0 0 56px;
  position: relative;
  z-index: 3;
}

body.page-quienes .hc-strip-inner{
  background: linear-gradient(90deg, rgba(16,123,255,.92), rgba(10,103,194,.92));
  border-radius: 26px;
  padding: 16px;
  box-shadow: 0 18px 60px rgba(11,31,58,.14);
  border: 1px solid rgba(11,31,58,.08);
}

body.page-quienes .hc-pill{
  display:flex;
  gap: 12px;
  align-items:center;
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(11,31,58,.08);
}

body.page-quienes .hc-pill b{ display:block; color:#0b1f3a; }
body.page-quienes .hc-pill span{ display:block; color: rgba(11,31,58,.68); font-size: 13px; margin-top: 2px; }

/* Secciones (para quitar sensación “vacía”) */
body.page-quienes .hc-section{ padding: 72px 0; }
body.page-quienes .hc-section--tight{ padding: 52px 0; }

body.page-quienes .hc-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(11,31,58,.10);
}

body.page-quienes .hc-card--soft{
  background: rgba(246,249,255,.94);
  border-color: rgba(15,111,255,.14);
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-grid-2{ grid-template-columns: 1fr; }
  body.page-quienes .hc-grid-3{ grid-template-columns: 1fr; }
  body.page-quienes .hc-hero{ padding: 92px 0 68px; }
  body.page-quienes .qs-hero-photo{ min-height: 220px; }
  body.page-quienes .hc-strip{ margin-top: -22px; }
}
/* =========================================================
   QUIÉNES SOMOS — Armonizar las 3 tarjetas (Control/Claridad/Crecimiento)
   NO toca el hero. Solo la barra de 3 "pills".
   ========================================================= */

/* Fondo del strip: menos brillante, más integrado */
body.page-quienes .hc-strip-inner{
  background: linear-gradient(
    90deg,
    rgba(9, 47, 92, .92),
    rgba(7, 35, 74, .92)
  ) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 60px rgba(11,31,58,.20) !important;
}

/* Tarjetas: menos blancas, más “premium” (gris-azulado) */
body.page-quienes .hc-pill{
  background: rgba(255,255,255,.08) !important;          /* antes casi blanco */
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px);
}

/* Texto: claro pero suave */
body.page-quienes .hc-pill b{
  color: rgba(255,255,255,.92) !important;
}

body.page-quienes .hc-pill span{
  color: rgba(255,255,255,.70) !important;
  font-weight: 600;
}

/* Si notas que la barra se ve “muy pesada”, baja un poco el contraste */
@media (max-width: 980px){
  body.page-quienes .hc-strip-inner{
    background: linear-gradient(
      180deg,
      rgba(9, 47, 92, .92),
      rgba(7, 35, 74, .92)
    ) !important;
  }
}
/* =========================================================
   QUIÉNES SOMOS — 3 tarjetas con blanco premium (sin choque)
   PÉGALO AL FINAL de styles.css
   ========================================================= */

/* Mantén el fondo del strip sobrio */
body.page-quienes .hc-strip-inner{
  background: linear-gradient(
    90deg,
    rgba(9, 47, 92, .92),
    rgba(7, 35, 74, .92)
  ) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Tarjetas: blanco “roto” (no blanco duro), con brillo suave */
body.page-quienes .hc-pill{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.10) 100%
    ) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.14) !important;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

/* “Sheen” (reflejo) para que se vea más vivo */
body.page-quienes .hc-pill::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-25%;
  width: 70%;
  height: 140%;
  background: linear-gradient(120deg,
    rgba(255,255,255,.00) 0%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,.00) 100%
  );
  transform: rotate(18deg);
  opacity: .75;
  pointer-events:none;
}

/* Textos: vuelven a oscuro (para que “meta blanco”) pero suave */
body.page-quienes .hc-pill b{
  color: rgba(11,31,58,.92) !important;
}

body.page-quienes .hc-pill span{
  color: rgba(11,31,58,.66) !important;
  font-weight: 650;
}

/* En móvil, un poquito menos “brillo” para que no se vea raro */
@media (max-width: 980px){
  body.page-quienes .hc-pill{
    background: linear-gradient(180deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.09) 100%
    ) !important;
  }
  body.page-quienes .hc-pill::before{ opacity: .55; }
}
/* =========================================================
   QUIÉNES SOMOS — Fix legibilidad (3 tarjetas)
   PÉGALO AL FINAL de styles.css
   ========================================================= */

body.page-quienes .hc-pill{
  /* un poco más claro para que no se vea opaco */
  background: linear-gradient(180deg,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.14) 100%
  ) !important;

  /* menos “blur” para que no se lave el texto */
  backdrop-filter: blur(8px);
}

/* Título: más oscuro y definido */
body.page-quienes .hc-pill b{
  color: rgba(11,31,58,.96) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Subtítulo: subimos contraste */
body.page-quienes .hc-pill span{
  color: rgba(11,31,58,.78) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

/* Reflejo: más sutil para que no “ensucie” */
body.page-quienes .hc-pill::before{
  opacity: .45 !important;
}

/* Si quieres aún MÁS legible, descomenta esto:
body.page-quienes .hc-pill{
  border: 1px solid rgba(255,255,255,.24) !important;
}
*/
/* =========================================================
   QUIÉNES SOMOS — FIX: 3 tarjetas (legibilidad + armonía)
   Pegar al FINAL de styles.css
   ========================================================= */

/* Mantén el contenedor azul, pero un poco menos pesado */
body.page-quienes .hc-strip-inner{
  background: linear-gradient(
    90deg,
    rgba(9,47,92,.86),
    rgba(7,35,74,.86)
  ) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Tarjetas: más blancas (premium) para que el texto se vea */
body.page-quienes .hc-pill{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.92) 0%,
    rgba(246,249,255,.86) 100%
  ) !important;
  border: 1px solid rgba(11,31,58,.10) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.18) !important;
  backdrop-filter: none !important; /* quita “lavado” */
}

/* Título y descripción: alto contraste */
body.page-quienes .hc-pill b{
  color: #0b1f3a !important;
  text-shadow: none !important;
}
body.page-quienes .hc-pill span{
  color: rgba(11,31,58,.70) !important;
  text-shadow: none !important;
  font-weight: 650;
}

/* Si tu texto no usa <b>/<span>, este fallback lo asegura */
body.page-quienes .hc-pill,
body.page-quienes .hc-pill *{
  opacity: 1 !important;
  filter: none !important;
}
/* =========================================================
   QUIÉNES SOMOS — 3 tarjetas (regresar a opaco + mejorar “blanco” y legibilidad)
   PÉGALO AL FINAL de styles.css
   ========================================================= */

/* Mantén el contenedor azul sobrio (no lo hagas “neón”) */
body.page-quienes .hc-strip-inner{
  background: linear-gradient(
    90deg,
    rgba(9,47,92,.88),
    rgba(7,35,74,.88)
  ) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 60px rgba(11,31,58,.20) !important;
}

/* Tarjetas: vuelven a glass/opaco PERO con “frost” más blanco */
body.page-quienes .hc-pill{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.08) 100%
  ) !important;

  border: 1px solid rgba(255,255,255,.18) !important;

  /* clave: esto les da “blanco premium” sin volverlas sólidas */
  box-shadow:
    0 16px 44px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -16px 30px rgba(0,0,0,.10) !important;

  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

/* Reflejo sutil (sheen) — bonito pero SIN apagar texto */
body.page-quienes .hc-pill::before{
  content:"";
  position:absolute;
  top:-55%;
  left:-35%;
  width: 85%;
  height: 190%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.20) 48%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(18deg);
  opacity: .35 !important; /* bajo para que no “lave” */
  pointer-events:none;
}

/* TEXTO: ahora sí que se vea (blanco nítido, coherente con el strip oscuro) */
body.page-quienes .hc-pill b{
  color: rgba(255,255,255,.94) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.28);
}

body.page-quienes .hc-pill span{
  color: rgba(255,255,255,.74) !important;
  font-weight: 650;
  text-shadow: 0 1px 10px rgba(0,0,0,.22);
}

/* Por si algún override previo dejó opacidad rara: lo neutralizamos */
body.page-quienes .hc-pill,
body.page-quienes .hc-pill *{
  opacity: 1 !important;
  filter: none !important;
}
/* =========================================================
   QUIÉNES SOMOS — 3 tarjetas (glass opaco, pero BLANCO / claro)
   PÉGALO AL FINAL de styles.css
   ========================================================= */

/* Contenedor (barra): deja de ser tan azul oscuro y se vuelve “frost” claro */
body.page-quienes .hc-strip-inner{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.58),
    rgba(235,245,255,.42)
  ) !important;

  border: 1px solid rgba(11,31,58,.10) !important;
  box-shadow: 0 18px 60px rgba(11,31,58,.14) !important;
}

/* Tarjetas: glass/blanco premium (no “blanco duro”) */
body.page-quienes .hc-pill{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.86) 0%,
    rgba(255,255,255,.62) 100%
  ) !important;

  border: 1px solid rgba(11,31,58,.10) !important;

  /* mismo vibe opaco + profundidad */
  box-shadow:
    0 14px 40px rgba(11,31,58,.14),
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -18px 30px rgba(15,111,255,.06) !important;

  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

/* Reflejo sutil (sheen) pero ahora claro y elegante */
body.page-quienes .hc-pill::before{
  content:"";
  position:absolute;
  top:-55%;
  left:-35%;
  width: 85%;
  height: 190%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 48%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(18deg);
  opacity: .22 !important; /* sutil para que no “manche” */
  pointer-events:none;
}

/* TEXTO: ahora oscuro (para leerse perfecto sobre blanco) */
body.page-quienes .hc-pill b{
  color: rgba(11,31,58,.96) !important;
  text-shadow: none !important;
}

body.page-quienes .hc-pill span{
  color: rgba(11,31,58,.70) !important;
  font-weight: 650;
  text-shadow: none !important;
}

/* Por si algún override previo dejó opacidad rara: neutralizamos */
body.page-quienes .hc-pill,
body.page-quienes .hc-pill *{
  opacity: 1 !important;
  filter: none !important;
}
/* =========================================================
   QUIÉNES SOMOS — 3 tarjetas (azul dominante + blanco acento + “rayitas”)
   PÉGALO AL FINAL de styles.css
   ========================================================= */

/* Contenedor: azul dominante, premium (no tan claro) */
body.page-quienes .hc-strip-inner{
  background: linear-gradient(
    90deg,
    rgba(16,123,255,.88) 0%,
    rgba(10,103,194,.86) 45%,
    rgba(7,35,74,.88) 100%
  ) !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 60px rgba(11,31,58,.22) !important;
}

/* Tarjetas: glass opaco con tinte azul (blanco solo como brillo) */
body.page-quienes .hc-pill{
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.08) 100%
    ) !important;

  border: 1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    0 16px 44px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -18px 28px rgba(0,0,0,.14) !important;

  backdrop-filter: blur(12px);
}

/* Sheen/reflejo diagonal (la “línea bonita” que te gustaba) */
body.page-quienes .hc-pill::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width: 90%;
  height: 210%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 48%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(18deg);
  opacity: .45 !important;
  pointer-events:none;
  z-index: 0;
}

/* “Rayitas” internas (sutiles, no invaden) */
body.page-quienes .hc-pill::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.14) 0px,
    rgba(255,255,255,.14) 1px,
    rgba(255,255,255,0) 10px,
    rgba(255,255,255,0) 20px
  );
  opacity: .14 !important;           /* si quieres más rayitas, sube a .18 */
  pointer-events:none;
  z-index: 0;
  mix-blend-mode: overlay;
}

/* Asegura que el texto quede encima de los efectos */
body.page-quienes .hc-pill > *{
  position: relative;
  z-index: 1;
}

/* Texto: claro y legible sobre glass azul */
body.page-quienes .hc-pill b{
  color: rgba(255,255,255,.94) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.26);
}

body.page-quienes .hc-pill span{
  color: rgba(255,255,255,.74) !important;
  font-weight: 650;
  text-shadow: 0 1px 10px rgba(0,0,0,.22);
}

/* Por si algún override anterior dejó opacidades raras */
body.page-quienes .hc-pill,
body.page-quienes .hc-pill *{
  opacity: 1 !important;
  filter: none !important;
}
/* =========================================================
   QUIÉNES SOMOS — oscurecer inicio (lado izquierdo) del strip
   PÉGALO AL FINAL de styles.css
   ========================================================= */

body.page-quienes .hc-strip-inner{
  background: linear-gradient(
    90deg,
    rgba(7, 28, 58, .92) 0%,          /* MÁS oscuro al inicio (izquierda) */
    rgba(10, 103, 194, .86) 42%,
    rgba(7, 35, 74, .90) 100%
  ) !important;
}
/* =========================================================
   QUIÉNES SOMOS — FIX botón "Agendar diagnóstico" (se ve solo texto)
   Pega al FINAL de styles.css
   ========================================================= */

/* 1) Asegura que cualquier overlay del hero quede detrás */
body.page-quienes .hc-hero::before,
body.page-quienes .hc-hero::after{
  z-index: 0 !important;
}

/* 2) Asegura que el contenido del hero (incluidos botones) esté arriba */
body.page-quienes .hc-hero .hc-container{
  position: relative;
  z-index: 2 !important;
}

/* 3) Fuerza que el botón tenga "forma" visible (borde + fondo sutil) */
body.page-quienes .hc-hero .hc-cta .btn-ghost,
body.page-quienes .hc-hero .hc-cta .btn-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 16px !important;
  border-radius: 14px !important;

  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(255,255,255,.10) !important;

  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;

  position: relative;
  z-index: 3 !important;
}
/* =========================================================
   QUIÉNES SOMOS — Botones ghost/secondary (píldora + visibles)
   Arregla: "Agendar diagnóstico" y "Ver señales típicas"
   PÉGALO AL FINAL de styles.css
   ========================================================= */

/* Asegura capas: overlays abajo, botones arriba */
body.page-quienes .hc-hero::before,
body.page-quienes .hc-hero::after{
  z-index: 0 !important;
}
body.page-quienes .hc-hero .hc-container{
  position: relative;
  z-index: 2 !important;
}

/* Estilo “píldora” visible para botones tipo ghost/secondary */
body.page-quienes .hc-hero .btn-ghost,
body.page-quienes .hc-hero .btn-secondary,
body.page-quienes .qs-diff-card .btn-ghost,
body.page-quienes .qs-diff-card .btn-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 18px !important;
  border-radius: 999px !important; /* <- píldora, no rectángulo */

  border: 1px solid rgba(255,255,255,.36) !important;
  background: rgba(255,255,255,.10) !important;

  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;

  position: relative;
  z-index: 5 !important;
}

/* Hover: un poquito más claro (premium) */
body.page-quienes .hc-hero .btn-ghost:hover,
body.page-quienes .hc-hero .btn-secondary:hover,
body.page-quienes .qs-diff-card .btn-ghost:hover,
body.page-quienes .qs-diff-card .btn-secondary:hover{
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.44) !important;
}

/* Por si algún CSS global les quita fondo/borde */
body.page-quienes .hc-hero .btn-ghost::before,
body.page-quienes .hc-hero .btn-ghost::after,
body.page-quienes .hc-hero .btn-secondary::before,
body.page-quienes .hc-hero .btn-secondary::after,
body.page-quienes .qs-diff-card .btn-ghost::before,
body.page-quienes .qs-diff-card .btn-ghost::after,
body.page-quienes .qs-diff-card .btn-secondary::before,
body.page-quienes .qs-diff-card .btn-secondary::after{
  content: none !important;
}
/* =========================================================
   QUIÉNES SOMOS — Forzar botones en óvalo (los 2 que siguen rectangulares)
   PÉGALO AL FINAL de styles.css
   ========================================================= */

/* 1) Botón 2 del hero (al lado de "Ver servicios") */
body.page-quienes .hc-hero .hc-cta > a:nth-child(2){
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* 2) Botón 2 del bloque “Lo que nos distingue” ("Ver señales típicas") */
body.page-quienes .qs-miniCtas > a:nth-child(2){
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* Refuerzo extra por si una regla global lo vuelve rectangular */
body.page-quienes .hc-hero .hc-cta > a:nth-child(2).btn,
body.page-quienes .qs-miniCtas > a:nth-child(2).btn{
  border-radius: 999px !important;
}

/* Si tu CSS global usa ::before/::after para “marcos” que cuadren el botón */
body.page-quienes .hc-hero .hc-cta > a:nth-child(2)::before,
body.page-quienes .hc-hero .hc-cta > a:nth-child(2)::after,
body.page-quienes .qs-miniCtas > a:nth-child(2)::before,
body.page-quienes .qs-miniCtas > a:nth-child(2)::after{
  border-radius: 999px !important;
}
/* =========================================================
   QUIÉNES SOMOS — POR QUÉ EXISTIMOS + VALORES (AISLADO)
   Pega al final de styles.css
========================================================= */
body.page-quienes .hc-exist{
  position: relative;
  padding: 56px 0 34px;
  background:
    radial-gradient(900px 520px at 16% 12%, rgba(64,140,255,.18), transparent 62%),
    radial-gradient(780px 520px at 86% 22%, rgba(30,203,255,.12), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.06), rgba(7,22,48,0) 55%);
}

body.page-quienes .hc-exist::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(rgba(11,31,58,.05) 1px, transparent 1px) 0 0/28px 28px;
  opacity:.35;
  mask-image: radial-gradient(900px 520px at 40% 20%, #000 50%, transparent 75%);
}

body.page-quienes .hc-exist-head{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: start;
}

body.page-quienes .hc-eyebrow{
  display:inline-flex;
  letter-spacing:.14em;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

body.page-quienes .hc-exist-copy{
  padding: 22px 22px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(11,31,58,.76), rgba(11,31,58,.62));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 50px rgba(7,22,48,.22);
  color: rgba(255,255,255,.90);
  position: relative;
  overflow:hidden;
}

body.page-quienes .hc-exist-copy::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(900px 220px at 30% 0%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(900px 260px at 80% 10%, rgba(64,140,255,.18), transparent 58%);
  opacity:.85;
}

body.page-quienes .hc-exist-copy > *{
  position: relative;
  z-index: 1;
}

body.page-quienes .hc-exist-title{
  margin: 14px 0 10px;
  font-size: 34px;
  line-height: 1.1;
  color: #fff;
}

body.page-quienes .hc-exist-lead{
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  max-width: 58ch;
}

body.page-quienes .hc-exist-proof{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 14px 0 16px;
}

body.page-quienes .hc-proof{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}

body.page-quienes .hc-proof b{
  display:block;
  font-size: 13px;
  color: rgba(255,255,255,.96);
  margin-bottom: 4px;
}

body.page-quienes .hc-proof span{
  display:block;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.76);
}

body.page-quienes .hc-exist-cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* MVV cards */
body.page-quienes .hc-mvv{
  display: grid;
  gap: 12px;
}

body.page-quienes .hc-mvv-card{
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 18px 40px rgba(7,22,48,.12);
  padding: 16px 16px 14px;
  position: relative;
  overflow:hidden;
}

body.page-quienes .hc-mvv-card::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(260px 160px at 20% 0%, rgba(64,140,255,.16), transparent 60%),
    radial-gradient(220px 160px at 90% 20%, rgba(30,203,255,.10), transparent 60%),
    linear-gradient(90deg, rgba(11,31,58,.05) 1px, transparent 1px) 0 0/22px 22px;
  opacity:.55;
}

body.page-quienes .hc-mvv-card > *{
  position: relative;
  z-index: 1;
}

body.page-quienes .hc-chip{
  display:inline-flex;
  font-size: 11px;
  font-weight: 800;
  letter-spacing:.12em;
  color: rgba(11,31,58,.74);
  background: rgba(11,31,58,.06);
  border: 1px solid rgba(11,31,58,.10);
  padding: 7px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

body.page-quienes .hc-mvv-card h3{
  margin: 10px 0 6px;
  font-size: 16px;
  color: #0b1f3a;
}

body.page-quienes .hc-mvv-card p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.5;
  font-size: 14px;
}

body.page-quienes .hc-mvv-card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
}

/* Barra inferior de confianza */
body.page-quienes .hc-exist-bar{
  margin-top: 14px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(11,31,58,.86), rgba(11,31,58,.72));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(7,22,48,.16);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;
  overflow:hidden;
}

body.page-quienes .hc-exist-barItem{
  padding: 14px 16px;
  border-right: 1px solid rgba(255,255,255,.12);
}

body.page-quienes .hc-exist-barItem:last-child{
  border-right: 0;
}

body.page-quienes .hc-exist-barItem b{
  display:block;
  color: rgba(255,255,255,.95);
  font-size: 13px;
  margin-bottom: 4px;
}

body.page-quienes .hc-exist-barItem span{
  display:block;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.35;
}

/* Valores */
body.page-quienes .hc-values{
  padding: 34px 0 56px;
  background:
    radial-gradient(820px 520px at 18% 20%, rgba(64,140,255,.10), transparent 62%),
    radial-gradient(760px 520px at 86% 10%, rgba(30,203,255,.08), transparent 58%);
}

body.page-quienes .hc-values-head{
  margin-bottom: 16px;
}

body.page-quienes .hc-values-title{
  margin: 10px 0 8px;
  font-size: 30px;
  color:#0b1f3a;
}

body.page-quienes .hc-values-lead{
  margin: 0;
  color: rgba(11,31,58,.72);
  max-width: 70ch;
}

body.page-quienes .hc-values-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

body.page-quienes .hc-value{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 16px 36px rgba(7,22,48,.10);
  position: relative;
  overflow:hidden;
}

body.page-quienes .hc-value::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(260px 140px at 20% 0%, rgba(64,140,255,.14), transparent 60%),
    linear-gradient(90deg, rgba(11,31,58,.05) 1px, transparent 1px) 0 0/26px 26px;
  opacity:.55;
}

body.page-quienes .hc-value > *{
  position: relative;
  z-index: 1;
}

body.page-quienes .hc-value-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: #0b1f3a;
  background: rgba(11,31,58,.08);
  border: 1px solid rgba(11,31,58,.10);
  flex: 0 0 auto;
}

body.page-quienes .hc-value h3{
  margin: 0 0 4px;
  font-size: 15px;
  color:#0b1f3a;
}

body.page-quienes .hc-value p{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(11,31,58,.72);
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-exist-head{
    grid-template-columns: 1fr;
  }
  body.page-quienes .hc-exist-proof{
    grid-template-columns: 1fr;
  }
  body.page-quienes .hc-exist-bar{
    grid-template-columns: 1fr;
  }
  body.page-quienes .hc-exist-barItem{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  body.page-quienes .hc-exist-barItem:last-child{
    border-bottom: 0;
  }
  body.page-quienes .hc-values-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   QUIÉNES SOMOS — Existimos + Valores (más AZUL, micro-interacciones, más volumen barra)
   PÉGALO AL FINAL de styles.css
========================================================= */

/* ---------- 1) Más azul / menos gris (tokens locales) ---------- */
body.page-quienes{
  --hcBlue-1: rgba(16,123,255,1);   /* azul principal */
  --hcBlue-2: rgba(10,103,194,1);   /* azul profundo */
  --hcInk: #0b1f3a;                 /* texto oscuro */
  --hcInk2: rgba(11,31,58,.72);
  --hcWhite: rgba(255,255,255,.92);
  --hcGlass: rgba(255,255,255,.10);
  --hcGlass2: rgba(255,255,255,.14);
}

/* Sección fondo: elimina sensación grisácea, empuja a azul */
body.page-quienes .hc-exist{
  background:
    radial-gradient(900px 520px at 16% 12%, rgba(16,123,255,.20), transparent 62%),
    radial-gradient(780px 520px at 86% 22%, rgba(10,103,194,.14), transparent 58%),
    linear-gradient(180deg, rgba(16,123,255,.06), rgba(255,255,255,0) 55%) !important;
}

/* Eyebrow (POR QUÉ EXISTIMOS / VALORES): que sea azul/blanco, no gris */
body.page-quienes .hc-eyebrow{
  color: rgba(255,255,255,.92) !important;
  background: rgba(16,123,255,.22) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

/* Card izquierda (copy): más azul, menos “plomo” */
body.page-quienes .hc-exist-copy{
  background: linear-gradient(180deg, rgba(6,34,75,.84), rgba(6,34,75,.68)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
body.page-quienes .hc-exist-copy::after{
  background:
    radial-gradient(900px 220px at 30% 0%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(900px 260px at 80% 10%, rgba(16,123,255,.22), transparent 58%) !important;
}

/* “Proof” (Sin humo / Documentado / Ligero): azul y más limpio */
body.page-quienes .hc-proof{
  background: rgba(16,123,255,.12) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
body.page-quienes .hc-proof span{
  color: rgba(255,255,255,.78) !important;
}

/* MVV (propósito/misión/visión): chips más azules, menos grises */
body.page-quienes .hc-chip{
  color: rgba(11,31,58,.86) !important;
  background: rgba(16,123,255,.10) !important;
  border: 1px solid rgba(16,123,255,.18) !important;
}

/* Valores: iconos con tinte azul */
body.page-quienes .hc-value-ico{
  background: rgba(16,123,255,.12) !important;
  border: 1px solid rgba(16,123,255,.18) !important;
  color: var(--hcInk) !important;
}

/* ---------- 2) Micro-interacciones (premium, sutiles) ---------- */
body.page-quienes .hc-mvv-card,
body.page-quienes .hc-value,
body.page-quienes .hc-proof,
body.page-quienes .hc-exist-barItem{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* Hover “lift” suave */
body.page-quienes .hc-mvv-card:hover,
body.page-quienes .hc-value:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(7,22,48,.16) !important;
  border-color: rgba(16,123,255,.20) !important;
}

/* Proof boxes: micro “lift” */
body.page-quienes .hc-proof:hover{
  transform: translateY(-2px);
  background: rgba(16,123,255,.16) !important;
}

/* Focus accesible (teclado) */
body.page-quienes a:focus-visible,
body.page-quienes button:focus-visible{
  outline: 3px solid rgba(16,123,255,.40);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  body.page-quienes .hc-mvv-card,
  body.page-quienes .hc-value,
  body.page-quienes .hc-proof,
  body.page-quienes .hc-exist-barItem{
    transition: none !important;
  }
}

/* ---------- 3) Barra inferior: más volumen + más presencia ---------- */
body.page-quienes .hc-exist-bar{
  margin-top: 18px !important;
  border-radius: 22px !important;
  background: linear-gradient(90deg, rgba(6,34,75,.92), rgba(6,34,75,.78)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 22px 70px rgba(7,22,48,.18) !important;
  overflow: hidden;
}

/* cada item más grande, con mejor jerarquía */
body.page-quienes .hc-exist-barItem{
  padding: 18px 18px !important;          /* antes flaco */
  min-height: 78px;                        /* más “volumen” */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  position: relative;
}

/* acento azul lateral para “vender” visualmente */
body.page-quienes .hc-exist-barItem::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(16,123,255,.95), rgba(10,103,194,.85));
  opacity: .85;
}

/* tipografía más “sólida” */
body.page-quienes .hc-exist-barItem b{
  font-size: 14.5px !important;
  letter-spacing: -.01em;
}

body.page-quienes .hc-exist-barItem span{
  font-size: 13.2px !important;
  color: rgba(255,255,255,.78) !important;
}

/* hover leve en barra */
body.page-quienes .hc-exist-barItem:hover{
  background: rgba(16,123,255,.08);
}

/* Responsive: que no se vea “aplastado” en móvil */
@media (max-width: 980px){
  body.page-quienes .hc-exist-barItem{
    min-height: 70px;
    padding: 16px 16px !important;
  }
}
/* =========================================================
   QUIÉNES SOMOS — Más volumen con GLASS (barra 3 items)
   PÉGALO AL FINAL de styles.css
========================================================= */

/* Contenedor: profundidad (shadow + borde + brillo) */
body.page-quienes .hc-exist-bar{
  position: relative;
  border-radius: 24px !important;

  /* glass base */
  background: linear-gradient(90deg,
    rgba(6,34,75,.92),
    rgba(6,34,75,.78)
  ) !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  /* volumen real: varias capas de sombra */
  box-shadow:
    0 26px 80px rgba(7,22,48,.22),     /* sombra grande */
    0 10px 24px rgba(7,22,48,.18),     /* sombra media */
    0 2px 0 rgba(255,255,255,.08) inset, /* brillo interno */
    0 -18px 40px rgba(0,0,0,.18) inset !important; /* sombra interna abajo */

  backdrop-filter: blur(14px);
  overflow: hidden;
  transform: translateZ(0);
}

/* Highlight superior (specular) para “vidrio” */
body.page-quienes .hc-exist-bar::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(900px 180px at 25% 0%,
      rgba(255,255,255,.16), transparent 60%),
    radial-gradient(700px 220px at 85% 10%,
      rgba(16,123,255,.14), transparent 58%);
  opacity: .9;
}

/* Patrón ultra sutil (textura) */
body.page-quienes .hc-exist-bar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.10) 0px,
    rgba(255,255,255,.10) 1px,
    rgba(255,255,255,0) 12px,
    rgba(255,255,255,0) 24px
  );
  opacity: .06; /* sutil para no ensuciar */
  mix-blend-mode: overlay;
}

/* Items: “tarjetas” reales dentro de la barra (más volumen) */
body.page-quienes .hc-exist-barItem{
  position: relative;
  padding: 18px 18px !important;
  min-height: 86px !important;

  /* separa visualmente cada item con una tarjeta glass propia */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.06) 100%
    ) !important;

  border-right: 1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 10px 26px rgba(0,0,0,.14),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -14px 26px rgba(0,0,0,.16) inset;

  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* Quita borde derecho del último */
body.page-quienes .hc-exist-barItem:last-child{
  border-right: 0 !important;
}

/* Acento azul lateral más “profundo” (ya lo tenías, lo reforzamos) */
body.page-quienes .hc-exist-barItem::before{
  width: 5px !important;
  opacity: .95 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}

/* Highlight dentro de cada item (parece vidrio) */
body.page-quienes .hc-exist-barItem::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: radial-gradient(420px 140px at 28% 0%,
    rgba(255,255,255,.18), transparent 60%);
  opacity: .8;
}

/* Tipografía un poco más “presente” */
body.page-quienes .hc-exist-barItem b{
  font-size: 15px !important;
  color: rgba(255,255,255,.96) !important;
}

body.page-quienes .hc-exist-barItem span{
  font-size: 13.4px !important;
  color: rgba(255,255,255,.78) !important;
}

/* Micro interacción: tilt MUY leve (da volumen percibido) */
body.page-quienes .hc-exist-barItem{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  transform: translateZ(0);
}

body.page-quienes .hc-exist-barItem:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.08) 100%
  ) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -14px 26px rgba(0,0,0,.18) inset;
}

/* Móvil: evita que se vea “aplastado” */
@media (max-width: 980px){
  body.page-quienes .hc-exist-barItem{
    min-height: 78px !important;
  }
}
/* =========================================================
   QUIÉNES SOMOS — Barra 3 items (más vidrio + arreglar esquinas + acento blanco)
   PÉGALO AL FINAL de styles.css
========================================================= */

/* Más “vidrio” (más transparente) + asegura esquinas limpias */
body.page-quienes .hc-exist-bar{
  border-radius: 24px !important;
  overflow: hidden !important;

  /* más glass */
  background: linear-gradient(90deg,
    rgba(6,34,75,.78),
    rgba(6,34,75,.62)
  ) !important;

  backdrop-filter: blur(18px) !important;

  /* volumen sin ensuciar */
  box-shadow:
    0 28px 90px rgba(7,22,48,.22),
    0 10px 26px rgba(7,22,48,.16),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -18px 38px rgba(0,0,0,.18) inset !important;

  border: 1px solid rgba(255,255,255,.14) !important;
}

/* CRÍTICO: cualquier overlay del contenedor debe respetar el radio */
body.page-quienes .hc-exist-bar::before,
body.page-quienes .hc-exist-bar::after{
  border-radius: inherit !important;
}

/* Items: también con glass pero sutil */
body.page-quienes .hc-exist-barItem{
  position: relative;
  overflow: hidden !important;

  background: linear-gradient(180deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.06) 100%
  ) !important;

  /* separador sutil entre items */
  border-right: 1px solid rgba(255,255,255,.12) !important;

  backdrop-filter: blur(14px) !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -14px 24px rgba(0,0,0,.14) inset !important;
}

/* Quita el borde del último */
body.page-quienes .hc-exist-barItem:last-child{
  border-right: 0 !important;
}

/* Esquinas perfectas en los extremos (para que no se “encime” nada) */
body.page-quienes .hc-exist-barItem:first-child{
  border-top-left-radius: 24px !important;
  border-bottom-left-radius: 24px !important;
}
body.page-quienes .hc-exist-barItem:last-child{
  border-top-right-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
}

/* CRÍTICO: overlays de cada item deben heredar radius (evita las “esquinas raras”) */
body.page-quienes .hc-exist-barItem::before,
body.page-quienes .hc-exist-barItem::after{
  border-radius: inherit !important;
}

/* Acento lateral: ahora BLANCO, más fino y “inset” (no pegado a todo el alto) */
body.page-quienes .hc-exist-barItem::before{
  content:"";
  position:absolute;
  left: 12px;               /* se mete un poco */
  top: 12px;
  bottom: 12px;             /* deja aire arriba/abajo */
  width: 3px;

  background: linear-gradient(180deg,
    rgba(255,255,255,.95),
    rgba(255,255,255,.55)
  ) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 10px 26px rgba(0,0,0,.18) !important;

  opacity: .92 !important;
  pointer-events:none;
  z-index: 1;
}

/* Highlight interno suave para look vidrio (sin “cuadrar” las esquinas) */
body.page-quienes .hc-exist-barItem::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(420px 140px at 28% 0%,
    rgba(255,255,255,.16), transparent 60%);
  opacity: .70 !important;
  pointer-events:none;
  z-index: 0;
}

/* Asegura que el texto quede arriba */
body.page-quienes .hc-exist-barItem > *{
  position: relative;
  z-index: 2;
}

/* Un poquito más de padding a la izquierda para que el acento no choque con texto */
body.page-quienes .hc-exist-barItem{
  padding-left: 22px !important;
}

/* Hover: más vidrio (solo un toque) */
body.page-quienes .hc-exist-barItem:hover{
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  background: linear-gradient(180deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.08) 100%
  ) !important;
}
/* =========================================================
   QUIÉNES SOMOS — Barra 3 items: quitar rayas y poner divisores claros
   PÉGALO AL FINAL de styles.css
========================================================= */

/* Quita el acento lateral (rayas) y el highlight interno del item */
body.page-quienes .hc-exist-barItem::before,
body.page-quienes .hc-exist-barItem::after{
  content: none !important;
}

/* Regresa padding normal (ya no hace falta espacio para la raya) */
body.page-quienes .hc-exist-barItem{
  padding-left: 18px !important;
}

/* Divisor visible entre items: línea + “glow” sutil para que se note */
body.page-quienes .hc-exist-barItem{
  border-right: 1px solid rgba(255,255,255,.22) !important;
  position: relative;
}

/* Glow vertical (súper sutil) para que se sienta más premium */
body.page-quienes .hc-exist-barItem:not(:last-child)::after{
  content:"";
  position:absolute;
  top: 10px;
  bottom: 10px;
  right: -1px;
  width: 1px;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 16px rgba(255,255,255,.18);
  pointer-events:none;
}

/* Asegura que el último no tenga divisor */
body.page-quienes .hc-exist-barItem:last-child{
  border-right: 0 !important;
}
/* =========================================================
   QUIÉNES SOMOS — FIX botón "Ver servicios" (sección Por qué existimos)
   PÉGALO AL FINAL de styles.css
========================================================= */

/* Asegura capas: el contenido siempre arriba */
body.page-quienes .hc-exist-copy{
  position: relative;
}
body.page-quienes .hc-exist-copy > *{
  position: relative;
  z-index: 2;
}

/* Botón ghost visible (forma + borde + fondo sutil) dentro del CTA de esa sección */
body.page-quienes .hc-exist-cta .btn-ghost,
body.page-quienes .hc-exist-cta .btn-secondary{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 18px !important;
  border-radius: 999px !important; /* ovalado como tu diseño */

  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.34) !important;

  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;

  position: relative;
  z-index: 5 !important;
}

/* Hover */
body.page-quienes .hc-exist-cta .btn-ghost:hover,
body.page-quienes .hc-exist-cta .btn-secondary:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.44) !important;
}

/* Por si el botón trae pseudo-elementos que “tapan” el borde */
body.page-quienes .hc-exist-cta .btn-ghost::before,
body.page-quienes .hc-exist-cta .btn-ghost::after,
body.page-quienes .hc-exist-cta .btn-secondary::before,
body.page-quienes .hc-exist-cta .btn-secondary::after{
  content: none !important;
}
/* =========================================================
   QUIÉNES SOMOS — VALORES (más azul, más volumen, más premium)
   PÉGALO AL FINAL de styles.css
========================================================= */

body.page-quienes .hc-values{
  position: relative;
  padding: 46px 0 72px !important;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(16,123,255,.16), transparent 62%),
    radial-gradient(760px 520px at 86% 10%, rgba(10,103,194,.10), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.04), rgba(255,255,255,0) 60%) !important;
}

body.page-quienes .hc-values::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(rgba(11,31,58,.05) 1px, transparent 1px) 0 0/28px 28px;
  opacity:.28;
  mask-image: radial-gradient(900px 520px at 40% 20%, #000 55%, transparent 80%);
}

body.page-quienes .hc-values-head{
  position: relative;
  z-index: 1;
}

/* Título + lead con un poquito más de “venta” visual */
body.page-quienes .hc-values-title{
  margin-top: 12px !important;
  letter-spacing: -0.02em;
}

body.page-quienes .hc-values-lead{
  color: rgba(11,31,58,.74) !important;
  max-width: 70ch;
}

/* ---------- Strip de garantías (nuevo) ---------- */
body.page-quienes .hc-values-strip{
  position: relative;
  z-index: 1;
  margin-top: 16px;
  border-radius: 22px;
  padding: 14px;
  background: linear-gradient(90deg, rgba(6,34,75,.92), rgba(6,34,75,.78));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(7,22,48,.16);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  overflow: hidden;
}

body.page-quienes .hc-values-strip::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 200px at 25% 0%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(820px 240px at 85% 12%, rgba(16,123,255,.18), transparent 58%);
  opacity:.9;
}

body.page-quienes .hc-values-stripItem{
  position: relative;
  z-index: 1;
  padding: 12px 14px;
  border-right: 1px solid rgba(255,255,255,.12);
}

body.page-quienes .hc-values-stripItem:last-child{
  border-right: 0;
}

body.page-quienes .hc-values-stripItem b{
  display:block;
  color: rgba(255,255,255,.95);
  font-size: 14px;
  margin-bottom: 4px;
}

body.page-quienes .hc-values-stripItem span{
  display:block;
  color: rgba(255,255,255,.76);
  font-size: 12.8px;
  line-height: 1.35;
}

/* ---------- Cards de valores: más volumen + micro interacción ---------- */
body.page-quienes .hc-values-grid{
  position: relative;
  z-index: 1;
  margin-top: 18px !important;
  gap: 14px !important;
}

body.page-quienes .hc-value{
  border-radius: 18px !important;
  background:
    radial-gradient(320px 160px at 18% 0%, rgba(16,123,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.90)) !important;

  border: 1px solid rgba(11,31,58,.10) !important;

  box-shadow:
    0 22px 70px rgba(7,22,48,.10),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset !important;

  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.page-quienes .hc-value::before{
  opacity: .30 !important; /* tu textura, pero más fina */
}

body.page-quienes .hc-value:hover{
  transform: translateY(-3px);
  border-color: rgba(16,123,255,.18) !important;
  box-shadow:
    0 30px 90px rgba(7,22,48,.12),
    0 12px 26px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.75) inset !important;
}

/* Icono: más “premium” azul, no gris */
body.page-quienes .hc-value-ico{
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(16,123,255,.18), rgba(16,123,255,.10)) !important;
  border: 1px solid rgba(16,123,255,.20) !important;
  box-shadow: 0 14px 30px rgba(7,22,48,.10);
}

/* Texto un toque más “vendible” (más contraste y jerarquía) */
body.page-quienes .hc-value h3{
  font-size: 15.5px !important;
  letter-spacing: -0.01em;
}

body.page-quienes .hc-value p{
  color: rgba(11,31,58,.74) !important;
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-values-strip{
    grid-template-columns: 1fr;
  }
  body.page-quienes .hc-values-stripItem{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  body.page-quienes .hc-values-stripItem:last-child{
    border-bottom: 0;
  }
}
/* =========================================================
   QUIÉNES SOMOS — VALORES: más completa sin banner repetitivo
   PÉGALO AL FINAL de styles.css
========================================================= */

body.page-quienes .hc-values{
  position: relative;
  padding: 64px 0 88px !important; /* más grande */
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(16,123,255,.14), transparent 62%),
    radial-gradient(760px 520px at 86% 10%, rgba(10,103,194,.10), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.03), rgba(255,255,255,0) 62%) !important;
}

body.page-quienes .hc-values::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(rgba(11,31,58,.05) 1px, transparent 1px) 0 0/28px 28px;
  opacity:.22;
  mask-image: radial-gradient(900px 520px at 45% 10%, #000 55%, transparent 82%);
}

/* El grid de valores: más aire */
body.page-quienes .hc-values-grid{
  position: relative;
  z-index: 1;
  margin-top: 18px !important;
  gap: 14px !important;
}

/* Cards de valores: un poco más “premium” (sin cambiar tu estilo actual) */
body.page-quienes .hc-value{
  box-shadow:
    0 22px 70px rgba(7,22,48,.10),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset !important;
}

/* ---------- Paneles extra (llenan la sección sin banner) ---------- */
body.page-quienes .hc-values-panels{
  position: relative;
  z-index: 1;
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

body.page-quienes .hc-values-panel{
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  padding: 18px 18px;
  box-shadow: 0 18px 52px rgba(7,22,48,.10);
  position: relative;
  overflow: hidden;
}

body.page-quienes .hc-values-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 180px at 18% 0%, rgba(16,123,255,.14), transparent 60%),
    radial-gradient(360px 180px at 92% 18%, rgba(10,103,194,.10), transparent 60%);
  opacity:.9;
}

body.page-quienes .hc-values-panel > *{
  position: relative;
  z-index: 1;
}

body.page-quienes .hc-values-panel--blue{
  background: linear-gradient(180deg, rgba(6,34,75,.92), rgba(6,34,75,.78));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(7,22,48,.16);
  color: rgba(255,255,255,.88);
}

body.page-quienes .hc-values-panel--blue h3{
  color: #fff;
}

body.page-quienes .hc-values-chip{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,31,58,.78);
  background: rgba(11,31,58,.06);
  border: 1px solid rgba(11,31,58,.10);
}

body.page-quienes .hc-values-panel--blue .hc-values-chip{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

body.page-quienes .hc-values-panel h3{
  margin: 10px 0 10px;
  font-size: 18px;
  color: #0b1f3a;
}

body.page-quienes .hc-values-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  line-height: 1.55;
  font-size: 14px;
}

body.page-quienes .hc-values-panel--blue .hc-values-list{
  color: rgba(255,255,255,.84);
}
body.page-quienes .hc-values-panel--blue .hc-values-list b{
  color:#fff;
}

body.page-quienes .hc-values-standards{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

body.page-quienes .hc-std{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(11,31,58,.04);
  border: 1px solid rgba(11,31,58,.08);
}

body.page-quienes .hc-std-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: #0b1f3a;
  background: rgba(16,123,255,.12);
  border: 1px solid rgba(16,123,255,.18);
  flex: 0 0 auto;
}

body.page-quienes .hc-std b{
  display:block;
  color:#0b1f3a;
  margin-bottom: 2px;
  font-size: 14px;
}
body.page-quienes .hc-std span{
  display:block;
  color: rgba(11,31,58,.70);
  font-size: 13px;
  line-height: 1.45;
}

body.page-quienes .hc-values-quote{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(16,123,255,.08);
  border: 1px solid rgba(16,123,255,.14);
}
body.page-quienes .hc-values-quote p{
  margin: 0;
  color: rgba(11,31,58,.78);
  line-height: 1.5;
}

/* Micro-interacción sutil en paneles (no banner) */
body.page-quienes .hc-values-panel{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.page-quienes .hc-values-panel:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 80px rgba(7,22,48,.14);
  border-color: rgba(16,123,255,.18);
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-values-panels{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   QUIÉNES SOMOS — VALORES (DISEÑO FINAL)
   Azul/blanco · más volumen · micro-interacciones
   PÉGALO AL FINAL de styles.css
========================================================= */

/* Sección: más presencia + fondo azul suave (sin banner) */
body.page-quienes .hc-values{
  position: relative;
  padding: 64px 0 88px !important;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(16,123,255,.14), transparent 62%),
    radial-gradient(760px 520px at 86% 10%, rgba(10,103,194,.10), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.03), rgba(255,255,255,0) 62%) !important;
  overflow: hidden;
}

/* Textura sutil (estable, sin mask) */
body.page-quienes .hc-values::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 45% 10%, rgba(11,31,58,.10), transparent 75%),
    linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(rgba(11,31,58,.05) 1px, transparent 1px) 0 0/28px 28px;
  opacity:.16;
}

/* Encabezado */
body.page-quienes .hc-values-head{
  position: relative;
  z-index: 1;
}

body.page-quienes .hc-values-title{
  margin: 10px 0 8px;
  font-size: 30px;
  letter-spacing: -0.02em;
  color:#0b1f3a;
}

body.page-quienes .hc-values-lead{
  margin: 0;
  color: rgba(11,31,58,.74);
  max-width: 70ch;
}

/* Grid de valores */
body.page-quienes .hc-values-grid{
  position: relative;
  z-index: 1;
  margin-top: 18px !important;
  gap: 14px !important;
}

/* Card valor: más volumen + azul suave + hover premium */
body.page-quienes .hc-value{
  border-radius: 18px !important;

  background:
    radial-gradient(320px 160px at 18% 0%, rgba(16,123,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.90)) !important;

  border: 1px solid rgba(11,31,58,.10) !important;

  box-shadow:
    0 22px 70px rgba(7,22,48,.10),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset !important;

  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.page-quienes .hc-value:hover{
  transform: translateY(-3px);
  border-color: rgba(16,123,255,.18) !important;
  box-shadow:
    0 30px 90px rgba(7,22,48,.12),
    0 12px 26px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.75) inset !important;
}

/* Icono check: más “premium” azul */
body.page-quienes .hc-value-ico{
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: #0b1f3a;

  background: linear-gradient(180deg, rgba(16,123,255,.18), rgba(16,123,255,.10)) !important;
  border: 1px solid rgba(16,123,255,.20) !important;
  box-shadow: 0 14px 30px rgba(7,22,48,.10);
}

body.page-quienes .hc-value h3{
  margin: 0 0 4px;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color:#0b1f3a;
}

body.page-quienes .hc-value p{
  margin: 0;
  color: rgba(11,31,58,.74);
  line-height: 1.45;
  font-size: 13.5px;
}

/* Paneles extra (para que la sección se vea completa) */
body.page-quienes .hc-values-panels{
  position: relative;
  z-index: 1;
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

/* Panel base */
body.page-quienes .hc-values-panel{
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  padding: 18px 18px;
  box-shadow: 0 18px 52px rgba(7,22,48,.10);
  position: relative;
  overflow: hidden;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.page-quienes .hc-values-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 180px at 18% 0%, rgba(16,123,255,.14), transparent 60%),
    radial-gradient(360px 180px at 92% 18%, rgba(10,103,194,.10), transparent 60%);
  opacity:.9;
}

body.page-quienes .hc-values-panel > *{
  position: relative;
  z-index: 1;
}

body.page-quienes .hc-values-panel:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 80px rgba(7,22,48,.14);
  border-color: rgba(16,123,255,.18);
}

/* Panel azul (izquierdo) */
body.page-quienes .hc-values-panel--blue{
  background: linear-gradient(180deg, rgba(6,34,75,.92), rgba(6,34,75,.78));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(7,22,48,.16);
  color: rgba(255,255,255,.88);
}

body.page-quienes .hc-values-panel--blue::before{
  background:
    radial-gradient(820px 220px at 22% 0%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(720px 260px at 86% 16%, rgba(16,123,255,.22), transparent 58%) !important;
  opacity: .95;
}

body.page-quienes .hc-values-panel--blue h3{
  color: #fff;
}

body.page-quienes .hc-values-chip{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,31,58,.78);
  background: rgba(11,31,58,.06);
  border: 1px solid rgba(11,31,58,.10);
}

body.page-quienes .hc-values-panel--blue .hc-values-chip{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

body.page-quienes .hc-values-panel h3{
  margin: 10px 0 10px;
  font-size: 18px;
  color: #0b1f3a;
}

/* Lista del panel azul */
body.page-quienes .hc-values-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  line-height: 1.55;
  font-size: 14px;
}
body.page-quienes .hc-values-panel--blue .hc-values-list{
  color: rgba(255,255,255,.84);
}
body.page-quienes .hc-values-panel--blue .hc-values-list b{
  color:#fff;
}

/* Standards (panel derecho) */
body.page-quienes .hc-values-standards{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

body.page-quienes .hc-std{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(11,31,58,.04);
  border: 1px solid rgba(11,31,58,.08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.page-quienes .hc-std:hover{
  transform: translateY(-2px);
  border-color: rgba(16,123,255,.16);
  box-shadow: 0 18px 50px rgba(7,22,48,.10);
}

body.page-quienes .hc-std-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: #0b1f3a;
  background: rgba(16,123,255,.12);
  border: 1px solid rgba(16,123,255,.18);
  flex: 0 0 auto;
}

body.page-quienes .hc-std b{
  display:block;
  color:#0b1f3a;
  margin-bottom: 2px;
  font-size: 14px;
}
body.page-quienes .hc-std span{
  display:block;
  color: rgba(11,31,58,.70);
  font-size: 13px;
  line-height: 1.45;
}

/* Quote */
body.page-quienes .hc-values-quote{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(16,123,255,.08);
  border: 1px solid rgba(16,123,255,.14);
}
body.page-quienes .hc-values-quote p{
  margin: 0;
  color: rgba(11,31,58,.78);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-values-panels{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   QUIÉNES SOMOS — VALORES: orden, jerarquía y legibilidad
   PÉGALO AL FINAL de styles.css
========================================================= */

/* 1) Balance: ambos paneles con la misma altura visual */
body.page-quienes .hc-values-panels{
  align-items: stretch !important;   /* misma altura de fila */
}

body.page-quienes .hc-values-panel{
  height: 100% !important;
  display: flex;
  flex-direction: column;
}

/* Empuja la quote al fondo para que el panel derecho “llene” bonito */
body.page-quienes .hc-values-panel .hc-values-quote{
  margin-top: auto !important;
}

/* 2) Panel azul: menos contraste feo, más glass claro (y texto legible) */
body.page-quienes .hc-values-panel--blue{
  /* menos “pared”: más claro y con glass */
  background:
    radial-gradient(700px 240px at 25% 10%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(820px 320px at 85% 30%, rgba(16,123,255,.20), transparent 62%),
    linear-gradient(180deg, rgba(6,34,75,.82), rgba(6,34,75,.60)) !important;

  border: 1px solid rgba(255,255,255,.16) !important;
  backdrop-filter: blur(14px);

  /* un poquito más de padding para respirar */
  padding: 20px 20px !important;
}

/* Texto del panel azul: sube legibilidad */
body.page-quienes .hc-values-panel--blue h3{
  color: rgba(255,255,255,.98) !important;
}

body.page-quienes .hc-values-panel--blue,
body.page-quienes .hc-values-panel--blue p,
body.page-quienes .hc-values-panel--blue li{
  color: rgba(255,255,255,.86) !important;
}

body.page-quienes .hc-values-panel--blue .hc-values-list{
  line-height: 1.6 !important;
}

body.page-quienes .hc-values-panel--blue .hc-values-list b{
  color: rgba(255,255,255,.98) !important;
}

/* Chip del panel azul: que destaque sin ensuciar */
body.page-quienes .hc-values-panel--blue .hc-values-chip{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.90) !important;
}

/* 3) Panel derecho: que no se vea “chiquito/apagado” */
body.page-quienes .hc-values-panel:not(.hc-values-panel--blue){
  padding: 20px 20px !important;
  background:
    radial-gradient(520px 220px at 22% 10%, rgba(16,123,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.88)) !important;
}

/* 4) Organización: títulos y chips más claros (punto de entrada) */
body.page-quienes .hc-values-chip{
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
}

body.page-quienes .hc-values-panel h3{
  font-size: 18.5px !important;
  letter-spacing: -0.01em;
  margin-bottom: 12px !important;
}

/* 5) Standards: mejora lectura y jerarquía */
body.page-quienes .hc-std{
  background: rgba(16,123,255,.06) !important;
  border-color: rgba(16,123,255,.12) !important;
  padding: 13px 13px !important;
}

body.page-quienes .hc-std b{
  font-size: 14px !important;
}

body.page-quienes .hc-std span{
  font-size: 13px !important;
  color: rgba(11,31,58,.72) !important;
}

/* 6) “Dónde mirar primero”: crea un foco visual consistente */
body.page-quienes .hc-values-panel--blue{
  box-shadow:
    0 26px 86px rgba(7,22,48,.16),
    0 10px 22px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.10) inset !important;
}

body.page-quienes .hc-values-panel:not(.hc-values-panel--blue){
  box-shadow:
    0 24px 78px rgba(7,22,48,.12),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset !important;
}

/* 7) Responsive: que en móvil no se rompa la jerarquía */
@media (max-width: 980px){
  body.page-quienes .hc-values-panel{
    height: auto !important;
  }
}
/* =========================================================
   QUIÉNES SOMOS — Panel azul: menos vacío, más diseño (glass + textura + bullets premium)
   PÉGALO AL FINAL de styles.css
========================================================= */

/* 1) Fondo con más “capas” + frame interno (deja de verse básico) */
body.page-quienes .hc-values-panel--blue{
  position: relative;
  overflow: hidden !important;

  background:
    radial-gradient(900px 260px at 18% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(900px 360px at 92% 30%, rgba(16,123,255,.22), transparent 62%),
    linear-gradient(180deg, rgba(6,34,75,.88), rgba(6,34,75,.64)) !important;

  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 28px 92px rgba(7,22,48,.18),
    0 12px 26px rgba(7,22,48,.12),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -18px 44px rgba(0,0,0,.18) inset !important;

  backdrop-filter: blur(16px);
}

/* Brillo diagonal ultra sutil (firma visual) */
body.page-quienes .hc-values-panel--blue::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,.08) 60%,
      rgba(255,255,255,0) 85%
    );
  opacity: .22;
  transform: translateZ(0);
}

/* “Borde interno” para que se vea diseñado, no plano */
body.page-quienes .hc-values-panel--blue::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 16px;
  pointer-events:none;
  border: 1px solid rgba(255,255,255,.10);
  opacity: .9;
}

/* 2) Chip y título con mejor jerarquía (no “texto blanco plano”) */
body.page-quienes .hc-values-panel--blue .hc-values-chip{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}

body.page-quienes .hc-values-panel--blue h3{
  color: rgba(255,255,255,.98) !important;
  text-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* 3) Lista: bullets premium con “puntos” y separadores (llena y guía la lectura) */
body.page-quienes .hc-values-panel--blue .hc-values-list{
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 10px !important;
  display: grid;
  gap: 10px;
}

body.page-quienes .hc-values-panel--blue .hc-values-list li{
  position: relative;
  padding: 10px 12px 10px 40px; /* espacio para el bullet */
  border-radius: 14px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 12px 30px rgba(0,0,0,.14),
    0 1px 0 rgba(255,255,255,.10) inset;

  color: rgba(255,255,255,.86) !important;
  line-height: 1.55;
}

/* Bullet circular con glow (visual “pro”) */
body.page-quienes .hc-values-panel--blue .hc-values-list li::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow:
    0 0 0 4px rgba(16,123,255,.18),
    0 10px 26px rgba(0,0,0,.22);
  opacity: .95;
}

/* Bold más brillante para “scan” rápido */
body.page-quienes .hc-values-panel--blue .hc-values-list b{
  color: rgba(255,255,255,.98) !important;
}

/* Hover suave en cada bullet-card */
body.page-quienes .hc-values-panel--blue .hc-values-list li{
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
body.page-quienes .hc-values-panel--blue .hc-values-list li:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
/* Cápsula "VALORES": más contraste y más azul (no se pierde) */
body.page-quienes .hc-values .hc-eyebrow{
  color: rgba(255,255,255,.94) !important;
  background: rgba(6,34,75,.62) !important;              /* azul dominante */
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 14px 34px rgba(7,22,48,.14),
    0 1px 0 rgba(255,255,255,.12) inset !important;

  backdrop-filter: blur(10px);
}
/* =========================================================
   QUIÉNES SOMOS — Panel azul: chips/botones visuales al fondo (sin tocar HTML)
   PÉGALO AL FINAL de styles.css
========================================================= */

/* Deja espacio abajo para los chips */
body.page-quienes .hc-values-panel--blue{
  padding-bottom: 64px !important; /* espacio para la fila de chips */
}

/* Fila de chips (decorativa) */
body.page-quienes .hc-values-panel--blue::marker{ content: ""; } /* por si acaso */
body.page-quienes .hc-values-panel--blue .hc-values-list{
  margin-bottom: 12px !important;
}

/* “Chips” al fondo usando ::after */
body.page-quienes .hc-values-panel--blue{
  position: relative;
}

body.page-quienes .hc-values-panel--blue .hc-values-list{
  position: relative;
  z-index: 2;
}

/* Barra de chips */
body.page-quienes .hc-values-panel--blue::after{
  content: "Entregables claros · Reglas y límites · Seguimiento mensual";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 18px 50px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.10) inset;

  color: rgba(255,255,255,.82);
  font-size: 12.5px;
  letter-spacing: .02em;

  backdrop-filter: blur(12px);
  pointer-events: none; /* no estorba clicks */
  z-index: 2;
}

/* Opcional: un “mini-botón” de CTA visual a la derecha */
body.page-quienes .hc-values-panel--blue .hc-values-chip{
  box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
}
/* =========================================================
   FIX: Revertir chips/pseudo del panel azul (evita blur y sobreposición)
   PÉGALO AL FINAL de styles.css
========================================================= */

body.page-quienes .hc-values-panel--blue{
  padding-bottom: 20px !important; /* revierte el padding extra */
}

/* mata el ::after que metimos para "chips" y cualquier pseudo extra */
body.page-quienes .hc-values-panel--blue::after{
  content: none !important;
}

/* por si algún pseudo extra estaba tapando */
body.page-quienes .hc-values-panel--blue::before{
  opacity: .22 !important; /* regresa a sutil */
}

/* evita que algo dentro quede "blurred" por accidente */
body.page-quienes .hc-values-panel--blue *{
  filter: none !important;
}
/* =========================================================
   Chips reales (no pseudo): no se enciman y no borrosos
========================================================= */

body.page-quienes .hc-values-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

body.page-quienes .hc-values-panel--blue .hc-chipTag{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);

  color: rgba(255,255,255,.86);
  font-size: 12.5px;
  letter-spacing: .01em;

  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
/* =========================================================
   QUIÉNES SOMOS — PRINCIPIOS + HISTORIA (emocional + premium)
   PÉGALO AL FINAL de styles.css
========================================================= */

body.page-quienes .hc-origin{
  position: relative;
  padding: 70px 0 90px;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(16,123,255,.12), transparent 62%),
    radial-gradient(760px 520px at 86% 10%, rgba(10,103,194,.10), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.03), rgba(255,255,255,0) 62%);
  overflow: hidden;
}

body.page-quienes .hc-origin::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(rgba(11,31,58,.05) 1px, transparent 1px) 0 0/28px 28px;
  opacity:.14;
  mask-image: radial-gradient(900px 520px at 45% 10%, #000 55%, transparent 82%);
}

body.page-quienes .hc-origin-head{
  position: relative;
  z-index: 1;
  max-width: 920px;
}

body.page-quienes .hc-origin-title{
  margin: 12px 0 10px;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #0b1f3a;
}

body.page-quienes .hc-origin-lead{
  margin: 0;
  color: rgba(11,31,58,.74);
  line-height: 1.6;
  max-width: 75ch;
}

body.page-quienes .hc-origin-ctas{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Grid de 2 tarjetas */
body.page-quienes .hc-origin-grid{
  position: relative;
  z-index: 1;
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

/* Tarjeta base */
body.page-quienes .hc-origin-card{
  border-radius: 20px;
  padding: 20px 20px;
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(16,123,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.88));
  border: 1px solid rgba(16,123,255,.14);
  box-shadow:
    0 26px 86px rgba(7,22,48,.12),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.page-quienes .hc-origin-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 34px 110px rgba(7,22,48,.14),
    0 12px 26px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.75) inset;
  border-color: rgba(16,123,255,.18);
}

body.page-quienes .hc-origin-cardHead h3{
  margin: 0 0 6px;
  font-size: 18px;
  color: #0b1f3a;
  letter-spacing: -0.01em;
}
body.page-quienes .hc-origin-cardHead p{
  margin: 0 0 12px;
  color: rgba(11,31,58,.70);
}

/* PRINCIPIOS (lista) */
body.page-quienes .hc-principles{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

body.page-quienes .hc-principles li{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(16,123,255,.06);
  border: 1px solid rgba(16,123,255,.10);
  box-shadow: 0 12px 34px rgba(7,22,48,.08);
}

body.page-quienes .hc-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 4px;
  background: rgba(16,123,255,.95);
  box-shadow: 0 0 0 4px rgba(16,123,255,.16);
}

body.page-quienes .hc-principles b{
  display: block;
  color: #0b1f3a;
  margin-bottom: 3px;
}
body.page-quienes .hc-principles span{
  color: rgba(11,31,58,.72);
  line-height: 1.45;
  font-size: 13.5px;
}

/* Tags */
body.page-quienes .hc-origin-tags{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
body.page-quienes .hc-tag{
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(6,34,75,.08);
  border: 1px solid rgba(16,123,255,.14);
  color: rgba(11,31,58,.78);
  font-size: 12.5px;
}

/* HISTORIA (timeline) */
body.page-quienes .hc-timeline{
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

body.page-quienes .hc-step{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(16,123,255,.12);
}

body.page-quienes .hc-stepMark{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: #0b1f3a;
  background: rgba(16,123,255,.14);
  border: 1px solid rgba(16,123,255,.18);
}

body.page-quienes .hc-stepBody b{
  display:block;
  margin-bottom: 3px;
  color:#0b1f3a;
}
body.page-quienes .hc-stepBody span{
  display:block;
  color: rgba(11,31,58,.72);
  line-height: 1.45;
  font-size: 13.5px;
}

/* Quote historia */
body.page-quienes .hc-story-quote{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(16,123,255,.07);
  border: 1px solid rgba(16,123,255,.14);
  color: rgba(11,31,58,.78);
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-origin-grid{
    grid-template-columns: 1fr;
  }
  body.page-quienes .hc-origin-title{
    font-size: 30px;
  }
}
/* =========================================================
   QUIÉNES SOMOS — HISTORIA (institucional + empática, sin timeline)
   PÉGALO AL FINAL de styles.css
========================================================= */

body.page-quienes .hc-origin-card--story{
  /* un poco más “premium” y balanceado */
  background:
    radial-gradient(520px 220px at 18% 10%, rgba(16,123,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.88)) !important;
}

/* Layout interno: narrativa + aside (orden de lectura claro) */
body.page-quienes .hc-story{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  margin-top: 6px;
  align-items: start;
}

body.page-quienes .hc-story-paragraph{
  margin: 0 0 10px;
  color: rgba(11,31,58,.74);
  line-height: 1.65;
  font-size: 13.8px;
}

body.page-quienes .hc-story-paragraph b{
  color: rgba(11,31,58,.92);
}

/* Quote: firma visual, no banner */
body.page-quienes .hc-origin-card--story .hc-story-quote{
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(6,34,75,.06);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow: 0 18px 50px rgba(7,22,48,.08);
}
body.page-quienes .hc-origin-card--story .hc-story-quote p{
  margin: 0;
  color: rgba(11,31,58,.80);
  line-height: 1.55;
}

/* Tags bajo la narrativa */
body.page-quienes .hc-story-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* Aside: “pills” institucionales para credibilidad */
body.page-quienes .hc-story-aside{
  display: grid;
  gap: 10px;
}

body.page-quienes .hc-story-pill{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(16,123,255,.06);
  border: 1px solid rgba(16,123,255,.12);
  box-shadow: 0 16px 44px rgba(7,22,48,.08);
}

body.page-quienes .hc-story-pill b{
  display:block;
  color:#0b1f3a;
  margin-bottom: 4px;
  font-size: 13.8px;
}
body.page-quienes .hc-story-pill span{
  display:block;
  color: rgba(11,31,58,.72);
  line-height: 1.5;
  font-size: 13.2px;
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-story{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   QUIÉNES SOMOS — PRINCIPIOS + HISTORIA: más protagonismo a Historia
   (Historia full width + más aire + mejor jerarquía)
   PÉGALO AL FINAL de styles.css
========================================================= */

/* Grid general: Principios arriba, Historia abajo a todo lo ancho */
body.page-quienes .hc-origin-grid{
  grid-template-columns: 1fr 1fr !important;
}

body.page-quienes .hc-origin-card--principles{
  grid-column: 1 / 3 !important;   /* ocupa toda la fila de arriba */
}

body.page-quienes .hc-origin-card--story{
  grid-column: 1 / 3 !important;   /* historia full width */
  margin-top: 6px;
  padding: 26px 26px !important;   /* más padding */
}

/* Encabezado de historia más grande */
body.page-quienes .hc-origin-card--story .hc-origin-cardHead h3{
  font-size: 22px !important;
  margin-bottom: 6px !important;
}
body.page-quienes .hc-origin-card--story .hc-origin-cardHead p{
  font-size: 14px !important;
  max-width: 90ch;
}

/* Dentro de historia: 2 columnas amplias (más respiro) */
body.page-quienes .hc-story{
  grid-template-columns: 1.35fr .65fr !important;
  gap: 18px !important;
  margin-top: 12px !important;
}

/* Párrafos: más grandes y legibles */
body.page-quienes .hc-story-paragraph{
  font-size: 14.6px !important;
  line-height: 1.75 !important;
  margin-bottom: 12px !important;
  max-width: 86ch;
}

/* Quote con más presencia */
body.page-quienes .hc-origin-card--story .hc-story-quote{
  padding: 14px 16px !important;
  border-radius: 18px !important;
}
body.page-quienes .hc-origin-card--story .hc-story-quote p{
  font-size: 14.2px !important;
}

/* Pills del aside: menos “apretadas”, más premium */
body.page-quienes .hc-story-pill{
  padding: 14px 14px !important;
  border-radius: 18px !important;
}
body.page-quienes .hc-story-pill b{
  font-size: 14.2px !important;
}
body.page-quienes .hc-story-pill span{
  font-size: 13.6px !important;
  line-height: 1.6 !important;
}

/* Tags: un poquito más grandes */
body.page-quienes .hc-story-tags .hc-tag{
  padding: 10px 14px !important;
  font-size: 12.8px !important;
}

/* Principios: al ser full width, lo hacemos en 2 columnas para que no sea un bloque enorme */
@media (min-width: 981px){
  body.page-quienes .hc-principles{
    grid-template-columns: 1fr 1fr;
  }
  body.page-quienes .hc-principles li{
    margin: 0;
  }
}

/* Responsive: todo en una columna en móvil */
@media (max-width: 980px){
  body.page-quienes .hc-origin-grid{
    grid-template-columns: 1fr !important;
  }
  body.page-quienes .hc-origin-card--principles,
  body.page-quienes .hc-origin-card--story{
    grid-column: auto !important;
  }
  body.page-quienes .hc-story{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   QUIÉNES SOMOS — PRINCIPIOS + HISTORIA (jerarquía correcta)
   Historia = protagonista (izq) · Principios = compacto (der)
   + Fondo premium en historia · Menos alto total (menos scroll)
   PÉGALO AL FINAL de styles.css
========================================================= */

/* Grid: historia grande izquierda, principios derecha */
body.page-quienes .hc-origin-grid{
  grid-template-columns: 1.25fr .75fr !important;
  align-items: start !important;
}

/* Historia: más protagonista y NO comprimida */
body.page-quienes .hc-origin-card--story{
  grid-column: auto !important;
  padding: 22px 22px !important;
}

/* Principios: más compacto (que no se coma la pantalla) */
body.page-quienes .hc-origin-card--principles{
  grid-column: auto !important;
  padding: 18px 18px !important;
}

/* Principios en una columna (para que no crezca en alto) */
body.page-quienes .hc-principles{
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

body.page-quienes .hc-principles li{
  padding: 10px 10px !important;
}

/* Historia: layout interno más simple (evita “amontonado”) */
body.page-quienes .hc-story{
  grid-template-columns: 1fr !important; /* 1 columna dentro, para que sea legible */
  gap: 12px !important;
  margin-top: 10px !important;
}

/* Párrafos más grandes y con aire, sin volverlo largo */
body.page-quienes .hc-story-paragraph{
  font-size: 14.4px !important;
  line-height: 1.7 !important;
  margin-bottom: 10px !important;
  max-width: 78ch;
}

/* Aside (pills) dentro de historia: en fila para que no alargue */
body.page-quienes .hc-story-aside{
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  display: grid !important;
  gap: 10px !important;
  margin-top: 8px;
}

body.page-quienes .hc-story-pill{
  padding: 12px 12px !important;
  border-radius: 16px !important;
}

/* Quote: más “hero” sin ocupar demasiado */
body.page-quienes .hc-origin-card--story .hc-story-quote{
  padding: 12px 14px !important;
  border-radius: 16px !important;
}

/* =========================
   FONDO PREMIUM EN HISTORIA
   ========================= */
body.page-quienes .hc-origin-card--story{
  position: relative;
  overflow: hidden !important;

  background:
    radial-gradient(900px 320px at 18% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(900px 380px at 86% 30%, rgba(16,123,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(6,34,75,.10), rgba(255,255,255,.92)) !important;

  border: 1px solid rgba(16,123,255,.14) !important;

  box-shadow:
    0 28px 92px rgba(7,22,48,.14),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset !important;
}

/* Textura sutil tipo “líneas” para que no se vea plano */
body.page-quienes .hc-origin-card--story::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(11,31,58,.10) 0px,
      rgba(11,31,58,.10) 1px,
      rgba(11,31,58,0) 14px,
      rgba(11,31,58,0) 28px
    );
  opacity: .06;
  mix-blend-mode: overlay;
}

/* Glow azul suave en una esquina */
body.page-quienes .hc-origin-card--story::after{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  right: -240px;
  top: -280px;
  background: radial-gradient(circle, rgba(16,123,255,.22), transparent 62%);
  opacity: .6;
  pointer-events:none;
}

/* Asegura que el contenido esté arriba del fondo */
body.page-quienes .hc-origin-card--story > *{
  position: relative;
  z-index: 1;
}

/* CTA del header: que no empuje demasiado */
body.page-quienes .hc-origin-ctas{
  margin-top: 14px !important;
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-origin-grid{
    grid-template-columns: 1fr !important;
  }
  body.page-quienes .hc-story-aside{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   FIX: Historia debe ser protagonista (izq) y Principios compacto (der)
   Sin tocar HTML — forzamos el orden con grid areas
   PÉGALO AL FINAL de styles.css
========================================================= */

body.page-quienes .hc-origin-grid{
  display: grid !important;
  grid-template-columns: 1.25fr .75fr !important;   /* historia grande, principios compacto */
  grid-template-areas: "story principles" !important;
  gap: 14px !important;
  align-items: start !important;
}

/* Asignación por área (esto “voltea” el orden visual) */
body.page-quienes .hc-origin-card--story{ grid-area: story !important; }
body.page-quienes .hc-origin-card--principles{ grid-area: principles !important; }

/* Historia: más presencia visual */
body.page-quienes .hc-origin-card--story{
  padding: 24px 24px !important;
}

/* Principios: más compacto (para que no domine) */
body.page-quienes .hc-origin-card--principles{
  padding: 18px 18px !important;
}
body.page-quienes .hc-principles{
  gap: 8px !important;
}
body.page-quienes .hc-principles li{
  padding: 10px 10px !important;
}

/* Pills del aside de historia: que no se amontonen */
body.page-quienes .hc-story-aside{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 10px !important;
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-origin-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "story"
      "principles" !important;
  }
  body.page-quienes .hc-story-aside{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   HISTORIA — 2 columnas + imagen con PRESENCIA (sin “cajita”)
   PRINCIPIOS — compactar y hacerlo más “diseñado” (sin crecer)
   PÉGALO AL FINAL de styles.css
========================================================= */

/* 1) GRID: Historia protagonista a la IZQ, Principios compacta a la DER */
body.page-quienes .hc-origin-grid{
  grid-template-columns: 1.35fr .65fr !important;
  gap: 14px !important;
  align-items: start !important;
  grid-template-areas: "story principles" !important;
}
body.page-quienes .hc-origin-card--story{ grid-area: story !important; }
body.page-quienes .hc-origin-card--principles{ grid-area: principles !important; }

/* 2) HISTORIA: fondo con imagen “grande” tipo JPM (no en tarjeta) */
body.page-quienes .hc-origin-card--story{
  /* Cambia aquí la imagen cuando la tengas */
  --story-img: url("img/quienes-somos-historia.jpg");

  position: relative;
  overflow: hidden;
  padding: 22px 22px !important;

  background:
    radial-gradient(920px 360px at 18% 0%, rgba(16,123,255,.22), transparent 60%),
    radial-gradient(900px 420px at 92% 18%, rgba(6,34,75,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.88)) !important;

  border: 1px solid rgba(16,123,255,.16) !important;

  box-shadow:
    0 28px 92px rgba(7,22,48,.14),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset !important;
}

/* Imagen con presencia: ocupa el lado derecho como “fondo editorial” */
body.page-quienes .hc-origin-card--story::after{
  content:"";
  position:absolute;
  top: -40px;
  right: -120px;
  width: 520px;
  height: 520px;
  background-image: var(--story-img);
  background-size: cover;
  background-position: center;
  border-radius: 999px;
  opacity: .22;                     /* presencia sin estorbar el texto */
  filter: saturate(1.05) contrast(1.05);
  box-shadow: 0 40px 140px rgba(7,22,48,.22);
  transform: rotate(-8deg);
  pointer-events: none;
}

/* “Veladura” para que el texto siempre gane */
body.page-quienes .hc-origin-card--story::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 58%, rgba(255,255,255,.62) 100%);
  opacity: .85;
}

/* Asegura contenido encima */
body.page-quienes .hc-origin-card--story > *{
  position: relative;
  z-index: 1;
}

/* 3) Historia: “dinamismo” con strip de chips */
body.page-quienes .hc-story-strip{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 10px 0 12px;
}
body.page-quienes .hc-story-pillTag{
  display:inline-flex;
  align-items:center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(16,123,255,.08);
  border: 1px solid rgba(16,123,255,.14);
  color: rgba(11,31,58,.78);
  font-size: 12.5px;
  box-shadow: 0 14px 34px rgba(7,22,48,.08);
}

/* 4) Texto en 2 columnas (desktop) */
body.page-quienes .hc-story-columns{
  column-count: 2;
  column-gap: 22px;
  margin-top: 4px;
}
body.page-quienes .hc-story-columns p{
  margin: 0 0 12px;
  break-inside: avoid;
  color: rgba(11,31,58,.74);
  line-height: 1.75;
  font-size: 14px;
}
body.page-quienes .hc-story-columns b{
  color: rgba(11,31,58,.92);
}

/* Quote con presencia */
body.page-quienes .hc-origin-card--story .hc-story-quote{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(6,34,75,.06);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow: 0 18px 50px rgba(7,22,48,.08);
}
body.page-quienes .hc-origin-card--story .hc-story-quote p{
  margin: 0;
  color: rgba(11,31,58,.80);
  line-height: 1.55;
}

/* KPIs: bloque escaneable (reduce flojera) */
body.page-quienes .hc-story-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}
body.page-quienes .hc-kpi{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(16,123,255,.12);
  box-shadow: 0 16px 44px rgba(7,22,48,.08);
}
body.page-quienes .hc-kpi b{
  display:block;
  color:#0b1f3a;
  margin-bottom: 4px;
  font-size: 13.8px;
}
body.page-quienes .hc-kpi span{
  display:block;
  color: rgba(11,31,58,.72);
  line-height: 1.5;
  font-size: 13.2px;
}

/* 5) PRINCIPIOS: que no crezca (evita scroll) + más “premium” */
body.page-quienes .hc-origin-card--principles{
  padding: 16px 16px !important;
}
body.page-quienes .hc-principles{
  gap: 8px !important;
}
body.page-quienes .hc-principles li{
  padding: 10px 10px !important;
  border-radius: 14px !important;
  background: rgba(16,123,255,.05) !important;
  border: 1px solid rgba(16,123,255,.12) !important;
  box-shadow: 0 10px 26px rgba(7,22,48,.06) !important;
}
body.page-quienes .hc-dot{
  width: 10px !important;
  height: 10px !important;
  box-shadow: 0 0 0 3px rgba(16,123,255,.16) !important;
}
body.page-quienes .hc-origin-tags{
  margin-top: 10px !important;
  gap: 8px !important;
}
body.page-quienes .hc-origin-tags .hc-tag{
  padding: 7px 10px !important;
  font-size: 12px !important;
}

/* 6) Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-origin-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "story"
      "principles" !important;
  }
  body.page-quienes .hc-story-columns{
    column-count: 1;
  }
  body.page-quienes .hc-story-kpis{
    grid-template-columns: 1fr;
  }
  body.page-quienes .hc-origin-card--story::after{
    right: -220px;
    opacity: .18;
  }
}
/* =========================================================
   FIX GLOBAL: evitar que estilos de "cápsulas/pills" de Quiénes Somos
   afecten el INDEX (servicios) u otras páginas
   PÉGALO AL FINAL de styles.css
========================================================= */

/* 1) Resetea "hc-pill" fuera de Quiénes Somos */
body:not(.page-quienes) .hc-pill{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

/* 2) Resetea "hc-tag" fuera de Quiénes Somos */
body:not(.page-quienes) .hc-tag{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 3) Si tus “píldoras” del index usan hc-chip/hc-chipTag, también se resetean */
body:not(.page-quienes) .hc-chipTag,
body:not(.page-quienes) .hc-story-pillTag{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* =========================================================
   INDEX — FIX tarjetas de servicios (layout imagen + contenido)
   Pega al final de styles.css
   ========================================================= */

/* 1) Encuentra el contenedor real de tus 3 tarjetas y ponlo aquí.
   Yo asumo que tus tarjetas tienen una clase tipo .service-card o .svc-card.
   Si no, cambia SOLO ese selector. */

body:not(.page-quienes) .service-card,
body:not(.page-quienes) .svc-card,
body:not(.page-quienes) .service-item{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;      /* clave: ambas columnas misma altura */
  overflow: hidden !important;           /* que nada se “salga” */
}

/* 2) La columna de imagen debe estirar y la imagen debe ocupar todo */
body:not(.page-quienes) .service-card .media,
body:not(.page-quienes) .svc-card .media,
body:not(.page-quienes) .service-item .media,
body:not(.page-quienes) .service-card .image,
body:not(.page-quienes) .svc-card .image,
body:not(.page-quienes) .service-item .image{
  height: 100% !important;
}

body:not(.page-quienes) .service-card img,
body:not(.page-quienes) .svc-card img,
body:not(.page-quienes) .service-item img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 3) La columna de contenido: que se distribuya y el CTA se vaya al fondo */
body:not(.page-quienes) .service-card .content,
body:not(.page-quienes) .svc-card .content,
body:not(.page-quienes) .service-item .content{
  display: flex !important;
  flex-direction: column !important;
}

body:not(.page-quienes) .service-card .content .cta,
body:not(.page-quienes) .svc-card .content .cta,
body:not(.page-quienes) .service-item .content .cta{
  margin-top: auto !important;  /* empuja "Más detalles / Agendar" hacia abajo */
}
/* =========================================================
   INDEX / SERVICIOS — 4 chips en 1 sola fila + botones sin cortarse
   (NO cambia direcciones ni el layout principal)
   ========================================================= */

/* 1) Los chips en una sola fila (4 columnas) */
#servicios .hc-chips{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 12px;
}

/* 2) Cada chip compacto, sin saltos, con "..." si no cabe */
#servicios .hc-chip{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 10px !important;
  font-size: 11.5px !important;
  line-height: 1.1 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* 3) Asegura espacio para los botones (y que no queden “a la mitad”) */
#servicios .hc-actions{
  margin-top: 14px !important;
}

/* 4) Si algo los está cortando, esto lo evita sin romper diseño */
#servicios .hc-svc-content{
  overflow: visible !important;
}
#servicios .hc-svc-card{
  overflow: visible !important;
}

/* 5) En pantallas chicas, sí o sí no caben 4: entonces bajamos a 2x2 (solo móvil) */
@media (max-width: 980px){
  #servicios .hc-chips{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* =========================================================
   QUIÉNES SOMOS — PRINCIPIOS + HISTORIA (v2) — dinámico y legible
   PÉGALO AL FINAL de styles.css
========================================================= */

body.page-quienes .hc-origin2{
  position: relative;
  padding: 72px 0 92px;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(16,123,255,.12), transparent 62%),
    radial-gradient(760px 520px at 86% 10%, rgba(10,103,194,.10), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.03), rgba(255,255,255,0) 62%);
  overflow: hidden;
}

body.page-quienes .hc-origin2-head{
  max-width: 980px;
  margin-bottom: 18px;
}

body.page-quienes .hc-origin2-eyebrow{
  color: rgba(11,31,58,.80) !important;
  background: rgba(16,123,255,.10) !important;
  border: 1px solid rgba(16,123,255,.16) !important;
}

body.page-quienes .hc-origin2-title{
  margin: 12px 0 10px;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0b1f3a;
}

body.page-quienes .hc-origin2-lead{
  margin: 0;
  color: rgba(11,31,58,.74);
  line-height: 1.6;
  max-width: 80ch;
}

body.page-quienes .hc-origin2-ctas{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Layout principal */
body.page-quienes .hc-origin2-grid{
  display: grid;
  grid-template-columns: 1.35fr .65fr; /* historia | principios */
  gap: 14px;
  align-items: start;
}

/* --------------------------
   HISTORIA (protagonista)
-------------------------- */
body.page-quienes .hc-story2{
  --storyImg: url("img/quienes-somos-historia.jpg");
  border-radius: 22px;
  border: 1px solid rgba(16,123,255,.16);
  background:
    radial-gradient(920px 360px at 18% 0%, rgba(16,123,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.88));
  box-shadow:
    0 30px 96px rgba(7,22,48,.14),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset;
  overflow: hidden;
}

/* Hero editorial dentro de la historia */
body.page-quienes .hc-story2-hero{
  position: relative;
  padding: 20px 20px;
  background:
    linear-gradient(90deg, rgba(6,34,75,.90) 0%, rgba(6,34,75,.72) 55%, rgba(6,34,75,.26) 100%),
    var(--storyImg) center/cover no-repeat;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Para que el texto siempre se lea */
body.page-quienes .hc-story2-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 260px at 85% 10%, rgba(16,123,255,.18), transparent 62%);
  opacity: .9;
  pointer-events:none;
}

body.page-quienes .hc-story2-heroCopy{
  position: relative;
  z-index: 1;
  max-width: 68ch;
  color: rgba(255,255,255,.86);
}

body.page-quienes .hc-story2-kicker{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

body.page-quienes .hc-story2-heroCopy h3{
  margin: 10px 0 6px;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.01em;
}

body.page-quienes .hc-story2-heroCopy p{
  margin: 0;
  line-height: 1.6;
}

body.page-quienes .hc-story2-marks{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.page-quienes .hc-mark{
  display:inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  font-size: 12.5px;
}

/* Body */
body.page-quienes .hc-story2-body{
  padding: 18px 20px 20px;
}

/* Columnas editoriales de lectura */
body.page-quienes .hc-story2-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

body.page-quienes .hc-story2-col h4{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}

body.page-quienes .hc-story2-col p{
  margin: 0 0 10px;
  color: rgba(11,31,58,.74);
  line-height: 1.75;
  font-size: 14px;
}

body.page-quienes .hc-story2-col b{
  color: rgba(11,31,58,.92);
}

body.page-quienes .hc-story2-callout{
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(16,123,255,.07);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow: 0 16px 44px rgba(7,22,48,.08);
}
body.page-quienes .hc-story2-callout b{
  display:block;
  color:#0b1f3a;
  margin-bottom: 4px;
}
body.page-quienes .hc-story2-callout span{
  color: rgba(11,31,58,.72);
  line-height: 1.5;
  display:block;
}

body.page-quienes .hc-story2-quote{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(6,34,75,.06);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow: 0 18px 50px rgba(7,22,48,.08);
}
body.page-quienes .hc-story2-quote p{
  margin: 0;
  color: rgba(11,31,58,.80);
  line-height: 1.55;
}

/* KPIs */
body.page-quienes .hc-story2-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
body.page-quienes .hc-kpi2{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(16,123,255,.12);
  box-shadow: 0 16px 44px rgba(7,22,48,.08);
}
body.page-quienes .hc-kpi2 b{
  display:block;
  color:#0b1f3a;
  margin-bottom: 4px;
  font-size: 13.8px;
}
body.page-quienes .hc-kpi2 span{
  display:block;
  color: rgba(11,31,58,.72);
  line-height: 1.5;
  font-size: 13.2px;
}

/* Details (historia larga sin cansar) */
body.page-quienes .hc-story2-details{
  margin-top: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(16,123,255,.12);
  padding: 10px 12px;
  box-shadow: 0 14px 40px rgba(7,22,48,.08);
}
body.page-quienes .hc-story2-details summary{
  cursor: pointer;
  color: rgba(11,31,58,.88);
  font-weight: 800;
  list-style: none;
}
body.page-quienes .hc-story2-details summary::-webkit-details-marker{ display:none; }
body.page-quienes .hc-story2-details summary::after{
  content:"＋";
  float:right;
  opacity:.7;
}
body.page-quienes .hc-story2-details[open] summary::after{ content:"－"; }

body.page-quienes .hc-story2-detailsBody{
  margin-top: 10px;
}
body.page-quienes .hc-story2-detailsBody p{
  margin: 0 0 10px;
  color: rgba(11,31,58,.72);
  line-height: 1.7;
  font-size: 13.8px;
}

body.page-quienes .hc-story2-sign{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(16,123,255,.12);
}
body.page-quienes .hc-signLabel{
  display:block;
  color:#0b1f3a;
  font-weight: 900;
}
body.page-quienes .hc-signNote{
  display:block;
  color: rgba(11,31,58,.70);
  margin-top: 2px;
}

/* --------------------------
   PRINCIPIOS (compacto)
-------------------------- */
body.page-quienes .hc-principles2{
  border-radius: 22px;
  border: 1px solid rgba(16,123,255,.16);
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(16,123,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.88));
  box-shadow:
    0 26px 86px rgba(7,22,48,.12),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset;
  padding: 18px 18px;
}

body.page-quienes .hc-principles2-head h3{
  margin: 0 0 6px;
  color:#0b1f3a;
  font-size: 18px;
}
body.page-quienes .hc-principles2-head p{
  margin: 0 0 10px;
  color: rgba(11,31,58,.70);
}

body.page-quienes .hc-principles2-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

body.page-quienes .hc-principles2-list li{
  padding: 10px 10px;
  border-radius: 16px;
  background: rgba(16,123,255,.06);
  border: 1px solid rgba(16,123,255,.12);
  box-shadow: 0 10px 26px rgba(7,22,48,.06);
}

body.page-quienes .hc-principles2-list b{
  display:block;
  color:#0b1f3a;
  margin-bottom: 3px;
  font-size: 13.8px;
}
body.page-quienes .hc-principles2-list span{
  display:block;
  color: rgba(11,31,58,.72);
  line-height: 1.5;
  font-size: 13.2px;
}

/* Ver más */
body.page-quienes .hc-principles2-more{
  margin-top: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(16,123,255,.12);
  padding: 10px 12px;
}
body.page-quienes .hc-principles2-more summary{
  cursor: pointer;
  color: rgba(11,31,58,.88);
  font-weight: 800;
  list-style: none;
}
body.page-quienes .hc-principles2-more summary::-webkit-details-marker{ display:none; }
body.page-quienes .hc-principles2-more summary::after{
  content:"＋";
  float:right;
  opacity:.7;
}
body.page-quienes .hc-principles2-more[open] summary::after{ content:"－"; }

/* Tags + CTA */
body.page-quienes .hc-principles2-tags{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
body.page-quienes .hc-tag2{
  display:inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(6,34,75,.08);
  border: 1px solid rgba(16,123,255,.14);
  color: rgba(11,31,58,.78);
  font-size: 12.5px;
}

body.page-quienes .hc-principles2-cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 980px){
  body.page-quienes .hc-origin2-grid{
    grid-template-columns: 1fr;
  }
  body.page-quienes .hc-story2-cols{
    grid-template-columns: 1fr;
  }
  body.page-quienes .hc-story2-kpis{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   CONSULTORÍA — HERC0B
   Pegar este bloque al final de styles.css
========================================================= */

body.page-consultoria .cfx-hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(950px 480px at 10% 10%, rgba(33, 110, 255, .22), transparent 60%),
    radial-gradient(760px 380px at 90% 14%, rgba(33, 110, 255, .10), transparent 56%),
    linear-gradient(135deg, #071a34 0%, #092247 45%, #081d39 100%);
  color: #fff;
  padding: 96px 0 92px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.page-consultoria .cfx-hero-grid{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: center;
}

body.page-consultoria .cfx-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.76);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 800;
}

body.page-consultoria .cfx-hero-copy h1{
  margin: 18px 0 14px;
  font-size: clamp(38px, 4.6vw, 70px);
  line-height: 1.02;
  letter-spacing: -.05em;
  max-width: 12ch;
}

body.page-consultoria .cfx-lead{
  max-width: 62ch;
  color: rgba(255,255,255,.86);
  font-size: 18px;
  line-height: 1.65;
}

body.page-consultoria .cfx-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

body.page-consultoria .btn.cfx-btn-light{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: none;
}
body.page-consultoria .btn.cfx-btn-light:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.56);
}

body.page-consultoria .btn.cfx-btn-dark{
  background: #0b2f5f;
  color: #fff;
  box-shadow: 0 14px 34px rgba(11,31,58,.16);
}
body.page-consultoria .btn.cfx-btn-dark:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(11,31,58,.20);
}

body.page-consultoria .btn.cfx-btn-ghost{
  background: #fff;
  color: #0b1f3a;
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 30px rgba(11,31,58,.08);
}
body.page-consultoria .btn.cfx-btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(11,31,58,.12);
}

body.page-consultoria .cfx-trust{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.page-consultoria .cfx-trust span{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  font-weight: 700;
}

body.page-consultoria .cfx-hero-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  padding: 22px;
  backdrop-filter: blur(10px);
}

body.page-consultoria .cfx-badge{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 800;
}

body.page-consultoria .cfx-checklist{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
body.page-consultoria .cfx-checklist li{
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.84);
  line-height: 1.5;
}
body.page-consultoria .cfx-checklist li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(145, 187, 255, .95);
  box-shadow: 0 0 0 5px rgba(145, 187, 255, .14);
}

body.page-consultoria .cfx-mini-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
body.page-consultoria .cfx-mini-pills span{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.74);
  font-size: 12px;
  font-weight: 700;
}

body.page-consultoria .cfx-band{
  margin-top: -34px;
  padding: 0 0 18px;
}

body.page-consultoria .cfx-band-wrap{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(29,78,216,.98), rgba(13,110,193,.96));
  box-shadow: 0 18px 50px rgba(11,31,58,.16);
}

body.page-consultoria .cfx-band-item{
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
body.page-consultoria .cfx-band-item span{
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.74);
}
body.page-consultoria .cfx-band-item strong{
  display: block;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -.01em;
}

body.page-consultoria .cfx-section{
  padding: 84px 0;
}

body.page-consultoria .cfx-fit,
body.page-consultoria .cfx-deliver,
body.page-consultoria .cfx-guard,
body.page-consultoria .cfx-final{
  background:
    radial-gradient(900px 380px at 0% 0%, rgba(29,78,216,.06), transparent 56%),
    linear-gradient(180deg, rgba(246,249,252,.9), rgba(246,249,252,.9));
}

body.page-consultoria .cfx-head{
  max-width: 900px;
  margin-bottom: 22px;
}
body.page-consultoria .cfx-head-kicker{
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.07);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.page-consultoria .cfx-head h2{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-consultoria .cfx-head p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
  font-size: 17px;
  max-width: 72ch;
}

body.page-consultoria .cfx-fit-grid,
body.page-consultoria .cfx-guard-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

body.page-consultoria .cfx-fit-card,
body.page-consultoria .cfx-guard-card{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.90);
  box-shadow: 0 20px 60px rgba(11,31,58,.08);
  padding: 22px;
}

body.page-consultoria .cfx-fit-card--dark{
  background: linear-gradient(145deg, rgba(20,52,101,.96), rgba(50,85,140,.90));
  border-color: rgba(255,255,255,.08);
  color: #fff;
}
body.page-consultoria .cfx-fit-card--dark h3,
body.page-consultoria .cfx-fit-card--dark .cfx-list li{
  color: #fff;
}
body.page-consultoria .cfx-fit-card h3,
body.page-consultoria .cfx-guard-card h3{
  margin: 0 0 12px;
  color: #0b1f3a;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.03em;
}
body.page-consultoria .cfx-fit-card--dark h3{
  color: #fff;
}

body.page-consultoria .cfx-tag{
  display: inline-flex;
  margin-bottom: 14px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.page-consultoria .cfx-tag--soft{
  background: rgba(29,78,216,.06);
  border-color: rgba(29,78,216,.12);
  color: rgba(29,78,216,.92);
}

body.page-consultoria .cfx-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
body.page-consultoria .cfx-list li{
  position: relative;
  padding-left: 16px;
  color: rgba(11,31,58,.76);
  line-height: 1.5;
}
body.page-consultoria .cfx-fit-card--dark .cfx-list li{
  color: rgba(255,255,255,.88);
}
body.page-consultoria .cfx-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29,78,216,.72);
}
body.page-consultoria .cfx-fit-card--dark .cfx-list li::before{
  background: rgba(145, 187, 255, .92);
}

body.page-consultoria .cfx-note{
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(246,249,252,.9);
  border: 1px solid rgba(11,31,58,.08);
  color: rgba(11,31,58,.72);
  line-height: 1.5;
}

body.page-consultoria .cfx-pack-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

body.page-consultoria .cfx-pack-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(11,31,58,.08);
  padding: 22px;
}

body.page-consultoria .cfx-pack-card--featured{
  position: relative;
  border-color: rgba(29,78,216,.18);
  box-shadow: 0 20px 60px rgba(29,78,216,.12);
}
body.page-consultoria .cfx-pack-card--featured::before{
  content: "Más completo";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.12);
  color: rgba(29,78,216,.9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-consultoria .cfx-pack-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
body.page-consultoria .cfx-pack-kicker{
  display: inline-flex;
  margin-bottom: 6px;
  color: rgba(29,78,216,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
body.page-consultoria .cfx-pack-top h3{
  margin: 0;
  color: #0b1f3a;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.03em;
}
body.page-consultoria .cfx-price{
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(246,249,252,.9);
  border: 1px solid rgba(11,31,58,.08);
  color: rgba(11,31,58,.76);
  font-size: 12px;
  font-weight: 800;
}

body.page-consultoria .cfx-pack-lead{
  margin: 0 0 14px;
  color: rgba(11,31,58,.72);
  line-height: 1.58;
}

body.page-consultoria .cfx-pack-meta{
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,31,58,.08);
}
body.page-consultoria .cfx-pack-meta span{
  color: rgba(11,31,58,.72);
  font-size: 13px;
  font-weight: 700;
}

body.page-consultoria .cfx-pack-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

body.page-consultoria .cfx-deliver-grid{
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 18px;
  align-items: stretch;
}

body.page-consultoria .cfx-deliver-cards{
  display: grid;
  gap: 12px;
}

body.page-consultoria .cfx-deliver-card{
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: start;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 44px rgba(11,31,58,.06);
  padding: 16px;
}

body.page-consultoria .cfx-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(29,78,216,.10);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.92);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

body.page-consultoria .cfx-deliver-card h3{
  margin: 2px 0 4px;
  color: #0b1f3a;
  font-size: 17px;
  line-height: 1.2;
}
body.page-consultoria .cfx-deliver-card p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

body.page-consultoria .cfx-mock{
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,251,255,.96));
  box-shadow: 0 22px 60px rgba(11,31,58,.10);
  padding: 18px;
}

body.page-consultoria .cfx-mock-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
body.page-consultoria .cfx-mock-top > span{
  color: #0b1f3a;
  font-size: 14px;
  font-weight: 900;
}
body.page-consultoria .cfx-mock-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.page-consultoria .cfx-mock-tabs span{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.08);
  background: #fff;
  color: rgba(11,31,58,.68);
  font-size: 12px;
  font-weight: 800;
}

body.page-consultoria .cfx-metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
body.page-consultoria .cfx-metric{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.86);
}
body.page-consultoria .cfx-metric small{
  display: block;
  margin-bottom: 6px;
  color: rgba(11,31,58,.58);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
}
body.page-consultoria .cfx-metric strong{
  display: block;
  color: #0b1f3a;
  font-size: 22px;
  letter-spacing: -.03em;
}
body.page-consultoria .cfx-metric span{
  display: block;
  margin-top: 4px;
  color: rgba(11,31,58,.62);
  font-size: 12px;
  font-weight: 700;
}

body.page-consultoria .cfx-bars{
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
body.page-consultoria .cfx-bars span{
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(29,78,216,.86), rgba(13,110,193,.54));
}

body.page-consultoria .cfx-action-box{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.82);
}
body.page-consultoria .cfx-action-box h4{
  margin: 0 0 10px;
  color: #0b1f3a;
  font-size: 16px;
}
body.page-consultoria .cfx-action-box ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
body.page-consultoria .cfx-action-box li{
  position: relative;
  padding-left: 16px;
  color: rgba(11,31,58,.74);
  line-height: 1.45;
}
body.page-consultoria .cfx-action-box li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(29,78,216,.72);
}
body.page-consultoria .cfx-mock-note{
  margin-top: 14px;
  color: rgba(11,31,58,.62);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
}

body.page-consultoria .cfx-process-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

body.page-consultoria .cfx-step{
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 46px rgba(11,31,58,.06);
  padding: 18px;
}
body.page-consultoria .cfx-step-n{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: rgba(29,78,216,.92);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(29,78,216,.18);
}
body.page-consultoria .cfx-step h3{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: 18px;
  line-height: 1.2;
}
body.page-consultoria .cfx-step p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

body.page-consultoria .cfx-process-note{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.86);
  color: rgba(11,31,58,.72);
  line-height: 1.6;
}

body.page-consultoria .cfx-guard-card--soft{
  background: linear-gradient(180deg, rgba(248,250,255,.96), rgba(240,246,255,.96));
}

body.page-consultoria .cfx-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
body.page-consultoria .cfx-chip-row span{
  padding: 8px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(11,31,58,.08);
  color: rgba(11,31,58,.68);
  font-size: 12px;
  font-weight: 800;
}

body.page-consultoria .cfx-faq-wrap{
  background: #fff;
}

body.page-consultoria .cfx-faq{
  display: grid;
  gap: 10px;
}
body.page-consultoria .cfx-faq details{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(11,31,58,.05);
  overflow: hidden;
}
body.page-consultoria .cfx-faq summary{
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 18px;
  color: #0b1f3a;
  font-weight: 800;
  line-height: 1.4;
}
body.page-consultoria .cfx-faq summary::-webkit-details-marker{
  display: none;
}
body.page-consultoria .cfx-faq summary::after{
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(29,78,216,.08);
  color: rgba(29,78,216,.94);
  font-size: 18px;
  font-weight: 900;
}
body.page-consultoria .cfx-faq details[open] summary::after{
  content: "–";
}
body.page-consultoria .cfx-answer{
  padding: 0 18px 18px;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
}

body.page-consultoria .cfx-final-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,252,.96));
  box-shadow: 0 20px 60px rgba(11,31,58,.08);
  padding: 24px;
}
body.page-consultoria .cfx-final-card h2{
  margin: 0 0 6px;
  color: #0b1f3a;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-consultoria .cfx-final-card p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
  max-width: 64ch;
}
body.page-consultoria .cfx-final-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1100px){
  body.page-consultoria .cfx-hero-grid,
  body.page-consultoria .cfx-deliver-grid,
  body.page-consultoria .cfx-fit-grid,
  body.page-consultoria .cfx-guard-grid{
    grid-template-columns: 1fr;
  }

  body.page-consultoria .cfx-pack-grid{
    grid-template-columns: 1fr;
  }

  body.page-consultoria .cfx-process-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px){
  body.page-consultoria .cfx-hero{
    padding: 82px 0 76px;
  }

  body.page-consultoria .cfx-band{
    margin-top: -20px;
  }

  body.page-consultoria .cfx-band-wrap,
  body.page-consultoria .cfx-process-grid{
    grid-template-columns: 1fr;
  }

  body.page-consultoria .cfx-hero-copy h1{
    max-width: none;
  }

  body.page-consultoria .cfx-pack-top,
  body.page-consultoria .cfx-mock-top,
  body.page-consultoria .cfx-final-card{
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-consultoria .cfx-metrics{
    grid-template-columns: 1fr;
  }

  body.page-consultoria .cfx-section{
    padding: 72px 0;
  }
}
/* =========================================================
   BENEFICIOS — HERC0B
   Pegar este bloque al final de styles.css
========================================================= */

body.page-beneficios .bfx-hero{
  position: relative;
  overflow: hidden;
  padding: 96px 0 88px;
  color: #fff;
  background:
    radial-gradient(980px 500px at 8% 10%, rgba(34, 110, 255, .18), transparent 60%),
    radial-gradient(760px 420px at 92% 18%, rgba(112, 172, 255, .10), transparent 56%),
    linear-gradient(135deg, #061730 0%, #082247 44%, #071b37 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.page-beneficios .bfx-hero-grid{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: center;
}

body.page-beneficios .bfx-kicker{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 900;
}

body.page-beneficios .bfx-copy h1{
  margin: 18px 0 14px;
  font-size: clamp(38px, 4.8vw, 72px);
  line-height: 1.01;
  letter-spacing: -.05em;
  max-width: 11ch;
}

body.page-beneficios .bfx-lead{
  max-width: 62ch;
  color: rgba(255,255,255,.86);
  font-size: 18px;
  line-height: 1.65;
}

body.page-beneficios .bfx-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

body.page-beneficios .bfx-btn-ghost{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: none;
}
body.page-beneficios .bfx-btn-ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.56);
}

body.page-beneficios .bfx-btn-dark{
  background: #0b2f5f;
  color: #fff;
  box-shadow: 0 16px 34px rgba(11,31,58,.16);
}
body.page-beneficios .bfx-btn-dark:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 38px rgba(11,31,58,.20);
}

body.page-beneficios .bfx-inline-proof{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
body.page-beneficios .bfx-inline-proof span{
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  font-weight: 700;
}

body.page-beneficios .bfx-hero-panel{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  padding: 22px;
  backdrop-filter: blur(10px);
}

body.page-beneficios .bfx-badge{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 800;
}

body.page-beneficios .bfx-panel-block{
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
body.page-beneficios .bfx-panel-block small{
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.64);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}
body.page-beneficios .bfx-panel-block p{
  margin: 0;
  color: rgba(255,255,255,.88);
  line-height: 1.55;
}
body.page-beneficios .bfx-panel-block--accent{
  background: rgba(132, 182, 255, .12);
  border-color: rgba(132, 182, 255, .18);
}

body.page-beneficios .bfx-panel-arrow{
  margin: 10px 0;
  color: rgba(255,255,255,.68);
  font-size: 22px;
  font-weight: 900;
}

body.page-beneficios .bfx-panel-list{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
body.page-beneficios .bfx-panel-list li{
  position: relative;
  padding-left: 16px;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}
body.page-beneficios .bfx-panel-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(145, 187, 255, .95);
  box-shadow: 0 0 0 5px rgba(145, 187, 255, .14);
}

body.page-beneficios .bfx-section{
  padding: 84px 0;
}

body.page-beneficios .bfx-shift,
body.page-beneficios .bfx-final{
  background:
    radial-gradient(960px 420px at 0% 0%, rgba(29,78,216,.06), transparent 56%),
    linear-gradient(180deg, rgba(246,249,252,.92), rgba(246,249,252,.92));
}

body.page-beneficios .bfx-proof{
  background:
    radial-gradient(920px 420px at 100% 10%, rgba(29,78,216,.05), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
}

body.page-beneficios .bfx-head{
  max-width: 920px;
  margin-bottom: 24px;
}
body.page-beneficios .bfx-head-kicker{
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.07);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.page-beneficios .bfx-head h2{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-beneficios .bfx-head p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
  font-size: 17px;
  max-width: 72ch;
}

/* BENEFITS GRID */
body.page-beneficios .bfx-card-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
body.page-beneficios .bfx-card{
  grid-column: span 4;
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(11,31,58,.08);
  padding: 22px;
}
body.page-beneficios .bfx-card--xl{
  grid-column: span 6;
  background: linear-gradient(145deg, rgba(20,52,101,.98), rgba(52,88,145,.92));
  border-color: rgba(255,255,255,.08);
}
body.page-beneficios .bfx-card--soft{
  background: linear-gradient(180deg, rgba(248,250,255,.98), rgba(241,246,255,.98));
}

body.page-beneficios .bfx-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
body.page-beneficios .bfx-card-no{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(29,78,216,.10);
  color: rgba(29,78,216,.92);
  border: 1px solid rgba(29,78,216,.14);
  font-size: 12px;
  font-weight: 900;
}
body.page-beneficios .bfx-card--xl .bfx-card-no{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}
body.page-beneficios .bfx-pill{
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.88);
  color: rgba(11,31,58,.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.page-beneficios .bfx-card--xl .bfx-pill{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.84);
}

body.page-beneficios .bfx-card h3{
  margin: 0 0 10px;
  color: #0b1f3a;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.03em;
}
body.page-beneficios .bfx-card p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
}
body.page-beneficios .bfx-card--xl h3,
body.page-beneficios .bfx-card--xl p{
  color: #fff;
}

body.page-beneficios .bfx-mid-cta{
  margin-top: 20px;
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.98));
  box-shadow: 0 18px 48px rgba(11,31,58,.06);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
body.page-beneficios .bfx-mid-cta strong{
  display: block;
  color: #0b1f3a;
  font-size: 18px;
}
body.page-beneficios .bfx-mid-cta p{
  margin: 4px 0 0;
  color: rgba(11,31,58,.68);
}

/* SHIFT */
body.page-beneficios .bfx-shift-wrap{
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  gap: 18px;
  align-items: center;
}
body.page-beneficios .bfx-shift-card{
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 18px 50px rgba(11,31,58,.08);
  padding: 24px;
}
body.page-beneficios .bfx-shift-card--before{
  background: #fff;
}
body.page-beneficios .bfx-shift-card--after{
  background: linear-gradient(180deg, rgba(244,248,255,.98), rgba(236,243,255,.98));
}

body.page-beneficios .bfx-shift-tag{
  display: inline-flex;
  margin-bottom: 12px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.page-beneficios .bfx-shift-card h3{
  margin: 0 0 12px;
  color: #0b1f3a;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.03em;
}
body.page-beneficios .bfx-shift-card ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
body.page-beneficios .bfx-shift-card li{
  position: relative;
  padding-left: 16px;
  color: rgba(11,31,58,.74);
  line-height: 1.55;
}
body.page-beneficios .bfx-shift-card li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29,78,216,.72);
}

body.page-beneficios .bfx-shift-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
body.page-beneficios .bfx-shift-line{
  width: 2px;
  height: 72px;
  background: linear-gradient(180deg, rgba(29,78,216,.10), rgba(29,78,216,.50), rgba(29,78,216,.10));
}
body.page-beneficios .bfx-shift-dot{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(29,78,216,.95), rgba(13,110,193,.88));
  box-shadow: 0 16px 34px rgba(29,78,216,.18);
}
body.page-beneficios .bfx-shift-dot::before{
  content: "→";
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

body.page-beneficios .bfx-days-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
body.page-beneficios .bfx-day{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 34px rgba(11,31,58,.05);
  padding: 18px;
}
body.page-beneficios .bfx-day span{
  display: inline-flex;
  margin-bottom: 8px;
  color: rgba(29,78,216,.92);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.page-beneficios .bfx-day h4{
  margin: 0 0 6px;
  color: #0b1f3a;
  font-size: 18px;
}
body.page-beneficios .bfx-day p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

/* PROOF */
body.page-beneficios .bfx-proof-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}
body.page-beneficios .bfx-proof-copy h2{
  margin: 0 0 10px;
  color: #0b1f3a;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-beneficios .bfx-proof-copy p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
  font-size: 17px;
}
body.page-beneficios .bfx-proof-list{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
body.page-beneficios .bfx-proof-list li{
  position: relative;
  padding-left: 16px;
  color: rgba(11,31,58,.74);
  line-height: 1.55;
}
body.page-beneficios .bfx-proof-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29,78,216,.72);
}
body.page-beneficios .bfx-proof-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

body.page-beneficios .bfx-proof-mock{
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
  box-shadow: 0 22px 58px rgba(11,31,58,.10);
  padding: 18px;
}
body.page-beneficios .bfx-mock-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
body.page-beneficios .bfx-mock-head > span{
  color: #0b1f3a;
  font-size: 14px;
  font-weight: 900;
}
body.page-beneficios .bfx-mock-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.page-beneficios .bfx-mock-tabs span{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.08);
  background: #fff;
  color: rgba(11,31,58,.68);
  font-size: 12px;
  font-weight: 800;
}

body.page-beneficios .bfx-mock-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
body.page-beneficios .bfx-stat{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.88);
}
body.page-beneficios .bfx-stat small{
  display: block;
  margin-bottom: 6px;
  color: rgba(11,31,58,.58);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
}
body.page-beneficios .bfx-stat strong{
  display: block;
  color: #0b1f3a;
  font-size: 22px;
  letter-spacing: -.03em;
}
body.page-beneficios .bfx-stat span{
  display: block;
  margin-top: 4px;
  color: rgba(11,31,58,.62);
  font-size: 12px;
  font-weight: 700;
}

body.page-beneficios .bfx-mock-chart{
  height: 150px;
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 16px 10px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(245,248,253,.95), rgba(237,243,251,.95));
  border: 1px solid rgba(11,31,58,.08);
}
body.page-beneficios .bfx-mock-chart span{
  flex: 1;
  display: block;
  border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, rgba(29,78,216,.92), rgba(13,110,193,.55));
}

body.page-beneficios .bfx-mock-note{
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.86);
}
body.page-beneficios .bfx-mock-note-title{
  margin-bottom: 10px;
  color: #0b1f3a;
  font-size: 16px;
  font-weight: 900;
}
body.page-beneficios .bfx-mock-note ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
body.page-beneficios .bfx-mock-note li{
  position: relative;
  padding-left: 16px;
  color: rgba(11,31,58,.74);
  line-height: 1.5;
}
body.page-beneficios .bfx-mock-note li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(29,78,216,.72);
}

/* FAQ */
body.page-beneficios .bfx-faq-wrap{
  background: #fff;
}
body.page-beneficios .bfx-faq{
  display: grid;
  gap: 10px;
}
body.page-beneficios .bfx-faq details{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(11,31,58,.05);
  overflow: hidden;
}
body.page-beneficios .bfx-faq summary{
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 18px;
  color: #0b1f3a;
  font-weight: 800;
  line-height: 1.4;
}
body.page-beneficios .bfx-faq summary::-webkit-details-marker{
  display: none;
}
body.page-beneficios .bfx-faq summary::after{
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(29,78,216,.08);
  color: rgba(29,78,216,.94);
  font-size: 18px;
  font-weight: 900;
}
body.page-beneficios .bfx-faq details[open] summary::after{
  content: "–";
}
body.page-beneficios .bfx-answer{
  padding: 0 18px 18px;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
}

/* FINAL CTA */
body.page-beneficios .bfx-final-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.98));
  box-shadow: 0 20px 60px rgba(11,31,58,.08);
  padding: 24px;
}
body.page-beneficios .bfx-final-copy h2{
  margin: 0 0 6px;
  color: #0b1f3a;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-beneficios .bfx-final-copy p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
  max-width: 64ch;
}
body.page-beneficios .bfx-final-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1100px){
  body.page-beneficios .bfx-hero-grid,
  body.page-beneficios .bfx-proof-grid{
    grid-template-columns: 1fr;
  }

  body.page-beneficios .bfx-card-grid{
    grid-template-columns: 1fr 1fr;
  }
  body.page-beneficios .bfx-card,
  body.page-beneficios .bfx-card--xl{
    grid-column: auto;
  }

  body.page-beneficios .bfx-shift-wrap{
    grid-template-columns: 1fr;
  }

  body.page-beneficios .bfx-shift-center{
    flex-direction: row;
    justify-content: center;
  }
  body.page-beneficios .bfx-shift-line{
    width: 80px;
    height: 2px;
  }

  body.page-beneficios .bfx-days-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  body.page-beneficios .bfx-hero{
    padding: 82px 0 76px;
  }

  body.page-beneficios .bfx-copy h1{
    max-width: none;
  }

  body.page-beneficios .bfx-card-grid{
    grid-template-columns: 1fr;
  }

  body.page-beneficios .bfx-mock-stats{
    grid-template-columns: 1fr;
  }

  body.page-beneficios .bfx-final-card,
  body.page-beneficios .bfx-mid-cta,
  body.page-beneficios .bfx-mock-head{
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-beneficios .bfx-section{
    padding: 72px 0;
  }
}
/* =========================================================
   ¿TE PASA ESTO? — HERCOB
   Pegar este bloque al final de styles.css
========================================================= */

body.page-te-pasa .tpx-hero{
  position: relative;
  overflow: hidden;
  padding: 96px 0 90px;
  color: #fff;
  background:
    radial-gradient(980px 520px at 8% 10%, rgba(34,110,255,.18), transparent 60%),
    radial-gradient(760px 400px at 92% 18%, rgba(112,172,255,.10), transparent 56%),
    linear-gradient(135deg, #061730 0%, #082247 44%, #071b37 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.page-te-pasa .tpx-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}

body.page-te-pasa .tpx-kicker{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 900;
}

body.page-te-pasa .tpx-hero-copy h1{
  margin: 18px 0 14px;
  font-size: clamp(38px, 4.7vw, 70px);
  line-height: 1.02;
  letter-spacing: -.05em;
  max-width: 11.5ch;
}

body.page-te-pasa .tpx-lead{
  max-width: 62ch;
  color: rgba(255,255,255,.86);
  font-size: 18px;
  line-height: 1.65;
}

body.page-te-pasa .tpx-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

body.page-te-pasa .tpx-btn-light{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: none;
}
body.page-te-pasa .tpx-btn-light:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.56);
}

body.page-te-pasa .tpx-btn-dark{
  background: #0b2f5f;
  color: #fff;
  box-shadow: 0 16px 34px rgba(11,31,58,.16);
}
body.page-te-pasa .tpx-btn-dark:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 38px rgba(11,31,58,.20);
}

body.page-te-pasa .tpx-btn-ghost{
  background: #fff;
  color: #0b1f3a;
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 30px rgba(11,31,58,.08);
}
body.page-te-pasa .tpx-btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(11,31,58,.12);
}

body.page-te-pasa .tpx-hero-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
body.page-te-pasa .tpx-hero-pills span{
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  font-weight: 700;
}

body.page-te-pasa .tpx-hero-panel{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  padding: 22px;
  backdrop-filter: blur(10px);
}

body.page-te-pasa .tpx-badge{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 800;
}

body.page-te-pasa .tpx-signal-list{
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

body.page-te-pasa .tpx-signal{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

body.page-te-pasa .tpx-signal strong{
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
}

body.page-te-pasa .tpx-signal p{
  margin: 0;
  color: rgba(255,255,255,.76);
  line-height: 1.55;
}

body.page-te-pasa .tpx-panel-note{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(132,182,255,.12);
  border: 1px solid rgba(132,182,255,.18);
  color: rgba(255,255,255,.84);
  line-height: 1.55;
}

body.page-te-pasa .tpx-section{
  padding: 84px 0;
}

body.page-te-pasa .tpx-map,
body.page-te-pasa .tpx-entry,
body.page-te-pasa .tpx-final{
  background:
    radial-gradient(940px 420px at 0% 0%, rgba(29,78,216,.06), transparent 56%),
    linear-gradient(180deg, rgba(246,249,252,.92), rgba(246,249,252,.92));
}

body.page-te-pasa .tpx-process{
  background:
    radial-gradient(920px 420px at 100% 0%, rgba(29,78,216,.05), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
}

body.page-te-pasa .tpx-head{
  max-width: 900px;
  margin-bottom: 24px;
}

body.page-te-pasa .tpx-head-kicker{
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.07);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.page-te-pasa .tpx-head h2{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

body.page-te-pasa .tpx-head p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
  font-size: 17px;
  max-width: 72ch;
}

/* MAPA */
body.page-te-pasa .tpx-map-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

body.page-te-pasa .tpx-map-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(11,31,58,.08);
  padding: 22px;
}

body.page-te-pasa .tpx-map-card--featured{
  position: relative;
  background: linear-gradient(180deg, rgba(248,250,255,.98), rgba(240,246,255,.98));
  border-color: rgba(29,78,216,.18);
  box-shadow: 0 20px 60px rgba(29,78,216,.10);
}
body.page-te-pasa .tpx-map-card--featured::before{
  content: "Más frecuente";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.12);
  color: rgba(29,78,216,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-te-pasa .tpx-map-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

body.page-te-pasa .tpx-no{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(29,78,216,.10);
  color: rgba(29,78,216,.92);
  border: 1px solid rgba(29,78,216,.14);
  font-size: 12px;
  font-weight: 900;
}

body.page-te-pasa .tpx-chip{
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.88);
  color: rgba(11,31,58,.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.page-te-pasa .tpx-map-card h3{
  margin: 0 0 10px;
  color: #0b1f3a;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.03em;
}

body.page-te-pasa .tpx-map-card p{
  margin: 0 0 14px;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
}

body.page-te-pasa .tpx-map-card ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

body.page-te-pasa .tpx-map-card li{
  position: relative;
  padding-left: 16px;
  color: rgba(11,31,58,.74);
  line-height: 1.55;
}

body.page-te-pasa .tpx-map-card li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29,78,216,.72);
}

body.page-te-pasa .tpx-map-result{
  margin: 16px 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(246,249,252,.92);
  border: 1px solid rgba(11,31,58,.08);
  color: rgba(11,31,58,.76);
  line-height: 1.5;
}

/* CASES */
body.page-te-pasa .tpx-case-stack{
  display: grid;
  gap: 14px;
}

body.page-te-pasa .tpx-case{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  align-items: center;
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
  box-shadow: 0 18px 48px rgba(11,31,58,.06);
  padding: 22px;
}

body.page-te-pasa .tpx-case-left h3{
  margin: 8px 0 0;
  color: #0b1f3a;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.03em;
}

body.page-te-pasa .tpx-case-label{
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.page-te-pasa .tpx-case-right p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
  font-size: 16px;
}

body.page-te-pasa .tpx-case-link{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

body.page-te-pasa .tpx-case-link span{
  color: rgba(11,31,58,.60);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

body.page-te-pasa .tpx-case-link a{
  color: #0b2f5f;
  font-weight: 800;
  text-decoration: none;
}
body.page-te-pasa .tpx-case-link a:hover{
  text-decoration: underline;
}

/* ENTRY */
body.page-te-pasa .tpx-entry-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

body.page-te-pasa .tpx-entry-card{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(11,31,58,.08);
  padding: 22px;
}

body.page-te-pasa .tpx-entry-card--soft{
  background: linear-gradient(180deg, rgba(248,250,255,.98), rgba(240,246,255,.98));
}

body.page-te-pasa .tpx-entry-card h3{
  margin: 0 0 12px;
  color: #0b1f3a;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.03em;
}

body.page-te-pasa .tpx-entry-card ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

body.page-te-pasa .tpx-entry-card li{
  position: relative;
  padding-left: 16px;
  color: rgba(11,31,58,.74);
  line-height: 1.55;
}

body.page-te-pasa .tpx-entry-card li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29,78,216,.72);
}

body.page-te-pasa .tpx-inline-box{
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.98));
  box-shadow: 0 18px 48px rgba(11,31,58,.06);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

body.page-te-pasa .tpx-inline-box strong{
  display: block;
  color: #0b1f3a;
  font-size: 18px;
}

body.page-te-pasa .tpx-inline-box p{
  margin: 4px 0 0;
  color: rgba(11,31,58,.68);
}

/* PROCESS */
body.page-te-pasa .tpx-process-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

body.page-te-pasa .tpx-step{
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 46px rgba(11,31,58,.06);
  padding: 18px;
}

body.page-te-pasa .tpx-step-no{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: rgba(29,78,216,.92);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(29,78,216,.18);
}

body.page-te-pasa .tpx-step h3{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: 18px;
  line-height: 1.2;
}

body.page-te-pasa .tpx-step p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

/* FAQ */
body.page-te-pasa .tpx-faq-wrap{
  background: #fff;
}

body.page-te-pasa .tpx-faq-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

body.page-te-pasa .tpx-faq-col{
  display: grid;
  gap: 10px;
}

body.page-te-pasa .tpx-faq-col details{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(11,31,58,.05);
  overflow: hidden;
}

body.page-te-pasa .tpx-faq-col summary{
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 18px;
  color: #0b1f3a;
  font-weight: 800;
  line-height: 1.4;
}

body.page-te-pasa .tpx-faq-col summary::-webkit-details-marker{
  display: none;
}

body.page-te-pasa .tpx-faq-col summary::after{
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(29,78,216,.08);
  color: rgba(29,78,216,.94);
  font-size: 18px;
  font-weight: 900;
}

body.page-te-pasa .tpx-faq-col details[open] summary::after{
  content: "–";
}

body.page-te-pasa .tpx-answer{
  padding: 0 18px 18px;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
}

/* FINAL CTA */
body.page-te-pasa .tpx-final-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.98));
  box-shadow: 0 20px 60px rgba(11,31,58,.08);
  padding: 24px;
}

body.page-te-pasa .tpx-final-copy h2{
  margin: 0 0 6px;
  color: #0b1f3a;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

body.page-te-pasa .tpx-final-copy p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
  max-width: 64ch;
}

body.page-te-pasa .tpx-final-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1100px){
  body.page-te-pasa .tpx-hero-grid,
  body.page-te-pasa .tpx-entry-grid,
  body.page-te-pasa .tpx-faq-grid,
  body.page-te-pasa .tpx-case{
    grid-template-columns: 1fr;
  }

  body.page-te-pasa .tpx-map-grid{
    grid-template-columns: 1fr;
  }

  body.page-te-pasa .tpx-process-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px){
  body.page-te-pasa .tpx-hero{
    padding: 82px 0 76px;
  }

  body.page-te-pasa .tpx-hero-copy h1{
    max-width: none;
  }

  body.page-te-pasa .tpx-process-grid{
    grid-template-columns: 1fr;
  }

  body.page-te-pasa .tpx-final-card,
  body.page-te-pasa .tpx-inline-box{
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-te-pasa .tpx-section{
    padding: 72px 0;
  }
}
/* =========================================================
   RECURSOS — HERCOB
   Pegar este bloque al final de styles.css
========================================================= */

body.page-recursos .rfx-hero{
  position: relative;
  overflow: hidden;
  padding: 96px 0 90px;
  color: #fff;
  background:
    radial-gradient(980px 520px at 8% 10%, rgba(34,110,255,.18), transparent 60%),
    radial-gradient(760px 400px at 92% 18%, rgba(112,172,255,.10), transparent 56%),
    linear-gradient(135deg, #061730 0%, #082247 44%, #071b37 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.page-recursos .rfx-hero-grid{
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 28px;
  align-items: center;
}

body.page-recursos .rfx-kicker{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 900;
}

body.page-recursos .rfx-copy h1{
  margin: 18px 0 14px;
  font-size: clamp(38px, 4.8vw, 70px);
  line-height: 1.02;
  letter-spacing: -.05em;
  max-width: 11.5ch;
}

body.page-recursos .rfx-lead{
  max-width: 62ch;
  color: rgba(255,255,255,.86);
  font-size: 18px;
  line-height: 1.65;
}

body.page-recursos .rfx-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

body.page-recursos .rfx-btn-ghost{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: none;
}
body.page-recursos .rfx-btn-ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.56);
}

body.page-recursos .rfx-btn-dark{
  background: #0b2f5f;
  color: #fff;
  box-shadow: 0 16px 34px rgba(11,31,58,.16);
}
body.page-recursos .rfx-btn-dark:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 38px rgba(11,31,58,.20);
}

body.page-recursos .rfx-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
body.page-recursos .rfx-tags span{
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  font-weight: 700;
}

body.page-recursos .rfx-panel{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  padding: 22px;
  backdrop-filter: blur(10px);
}

body.page-recursos .rfx-badge{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 800;
}

body.page-recursos .rfx-panel-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

body.page-recursos .rfx-mini{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
body.page-recursos .rfx-mini strong{
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
}
body.page-recursos .rfx-mini p{
  margin: 0;
  color: rgba(255,255,255,.76);
  line-height: 1.55;
}

body.page-recursos .rfx-panel-note{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(132,182,255,.12);
  border: 1px solid rgba(132,182,255,.18);
  color: rgba(255,255,255,.84);
  line-height: 1.55;
}

body.page-recursos .rfx-section{
  padding: 84px 0;
}

body.page-recursos .rfx-purpose,
body.page-recursos .rfx-library,
body.page-recursos .rfx-final{
  background:
    radial-gradient(940px 420px at 0% 0%, rgba(29,78,216,.06), transparent 56%),
    linear-gradient(180deg, rgba(246,249,252,.92), rgba(246,249,252,.92));
}

body.page-recursos .rfx-framework,
body.page-recursos .rfx-faq-wrap{
  background:
    radial-gradient(920px 420px at 100% 0%, rgba(29,78,216,.05), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
}

body.page-recursos .rfx-head{
  max-width: 920px;
  margin-bottom: 24px;
}
body.page-recursos .rfx-head-kicker{
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.07);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.page-recursos .rfx-head h2{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-recursos .rfx-head p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
  font-size: 17px;
  max-width: 72ch;
}

/* PURPOSE */
body.page-recursos .rfx-purpose-card{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.98));
  box-shadow: 0 20px 56px rgba(11,31,58,.08);
  padding: 24px;
}

body.page-recursos .rfx-purpose-copy h2{
  margin: 0 0 10px;
  color: #0b1f3a;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-recursos .rfx-purpose-copy p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
  font-size: 17px;
}
body.page-recursos .rfx-purpose-points{
  display: grid;
  gap: 12px;
}
body.page-recursos .rfx-purpose-item{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.86);
}
body.page-recursos .rfx-purpose-item b{
  display: block;
  margin-bottom: 6px;
  color: #0b1f3a;
  font-size: 16px;
}
body.page-recursos .rfx-purpose-item span{
  display: block;
  color: rgba(11,31,58,.72);
  line-height: 1.5;
}

/* GUIDES */
body.page-recursos .rfx-guide-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

body.page-recursos .rfx-guide{
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(11,31,58,.08);
  padding: 22px;
}

body.page-recursos .rfx-guide--featured{
  background: linear-gradient(145deg, rgba(20,52,101,.98), rgba(52,88,145,.92));
  border-color: rgba(255,255,255,.08);
}
body.page-recursos .rfx-guide--featured h3,
body.page-recursos .rfx-guide--featured p,
body.page-recursos .rfx-guide--featured li{
  color: #fff;
}
body.page-recursos .rfx-guide--featured .rfx-guide-type,
body.page-recursos .rfx-guide--featured .rfx-guide-time{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
}

body.page-recursos .rfx-guide-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
body.page-recursos .rfx-guide-type,
body.page-recursos .rfx-guide-time{
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.88);
  color: rgba(11,31,58,.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.page-recursos .rfx-guide h3{
  margin: 0 0 10px;
  color: #0b1f3a;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.03em;
}
body.page-recursos .rfx-guide p{
  margin: 0 0 14px;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
}
body.page-recursos .rfx-guide ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
body.page-recursos .rfx-guide li{
  position: relative;
  padding-left: 16px;
  color: rgba(11,31,58,.74);
  line-height: 1.55;
}
body.page-recursos .rfx-guide li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29,78,216,.72);
}
body.page-recursos .rfx-guide--featured li::before{
  background: rgba(145, 187, 255, .95);
}

body.page-recursos .rfx-guide-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 18px;
}
body.page-recursos .rfx-text-link{
  color: #0b2f5f;
  font-weight: 800;
  text-decoration: none;
}
body.page-recursos .rfx-text-link:hover{
  text-decoration: underline;
}
body.page-recursos .rfx-guide--featured .rfx-text-link{
  color: #fff;
}

/* FRAMEWORK */
body.page-recursos .rfx-framework-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
body.page-recursos .rfx-fw-card{
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 46px rgba(11,31,58,.06);
  padding: 18px;
}
body.page-recursos .rfx-fw-no{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: rgba(29,78,216,.92);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(29,78,216,.18);
}
body.page-recursos .rfx-fw-card h3{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: 18px;
  line-height: 1.2;
}
body.page-recursos .rfx-fw-card p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

/* LIBRARY */
body.page-recursos .rfx-library-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}
body.page-recursos .rfx-library-copy h2{
  margin: 0 0 10px;
  color: #0b1f3a;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-recursos .rfx-library-copy p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
  font-size: 17px;
}
body.page-recursos .rfx-library-list{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
body.page-recursos .rfx-library-list li{
  position: relative;
  padding-left: 16px;
  color: rgba(11,31,58,.74);
  line-height: 1.55;
}
body.page-recursos .rfx-library-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29,78,216,.72);
}

body.page-recursos .rfx-library-mock{
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
  box-shadow: 0 22px 58px rgba(11,31,58,.10);
  padding: 18px;
}
body.page-recursos .rfx-library-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
body.page-recursos .rfx-library-head > span{
  color: #0b1f3a;
  font-size: 14px;
  font-weight: 900;
}
body.page-recursos .rfx-library-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.page-recursos .rfx-library-filters span{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.08);
  background: #fff;
  color: rgba(11,31,58,.68);
  font-size: 12px;
  font-weight: 800;
}

body.page-recursos .rfx-library-cards{
  display: grid;
  gap: 10px;
}
body.page-recursos .rfx-library-item{
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(246,249,252,.88);
}
body.page-recursos .rfx-library-item b{
  display: block;
  color: #0b1f3a;
  font-size: 15px;
  line-height: 1.35;
}
body.page-recursos .rfx-library-item span{
  display: block;
  margin-top: 4px;
  color: rgba(11,31,58,.62);
  font-size: 12.5px;
  font-weight: 700;
}
body.page-recursos .rfx-library-note{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(246,249,252,.86);
  border: 1px solid rgba(11,31,58,.08);
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

/* BY CASE */
body.page-recursos .rfx-by-case-card{
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.98));
  box-shadow: 0 20px 60px rgba(11,31,58,.08);
  padding: 24px;
}
body.page-recursos .rfx-by-case-copy h2{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-recursos .rfx-by-case-copy p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
  max-width: 64ch;
}
body.page-recursos .rfx-by-case-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
body.page-recursos .rfx-case-pill{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: #fff;
}
body.page-recursos .rfx-case-pill b{
  display: block;
  margin-bottom: 6px;
  color: #0b1f3a;
  font-size: 16px;
}
body.page-recursos .rfx-case-pill span{
  display: block;
  color: rgba(11,31,58,.70);
  line-height: 1.5;
}
body.page-recursos .rfx-by-case-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* FAQ */
body.page-recursos .rfx-faq{
  display: grid;
  gap: 10px;
}
body.page-recursos .rfx-faq details{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(11,31,58,.05);
  overflow: hidden;
}
body.page-recursos .rfx-faq summary{
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 18px;
  color: #0b1f3a;
  font-weight: 800;
  line-height: 1.4;
}
body.page-recursos .rfx-faq summary::-webkit-details-marker{
  display: none;
}
body.page-recursos .rfx-faq summary::after{
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(29,78,216,.08);
  color: rgba(29,78,216,.94);
  font-size: 18px;
  font-weight: 900;
}
body.page-recursos .rfx-faq details[open] summary::after{
  content: "–";
}
body.page-recursos .rfx-answer{
  padding: 0 18px 18px;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
}

/* FINAL CTA */
body.page-recursos .rfx-final-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.98));
  box-shadow: 0 20px 60px rgba(11,31,58,.08);
  padding: 24px;
}
body.page-recursos .rfx-final-copy h2{
  margin: 0 0 6px;
  color: #0b1f3a;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-recursos .rfx-final-copy p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
  max-width: 64ch;
}
body.page-recursos .rfx-final-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1100px){
  body.page-recursos .rfx-hero-grid,
  body.page-recursos .rfx-purpose-card,
  body.page-recursos .rfx-library-grid{
    grid-template-columns: 1fr;
  }

  body.page-recursos .rfx-guide-grid{
    grid-template-columns: 1fr;
  }

  body.page-recursos .rfx-framework-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  body.page-recursos .rfx-by-case-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  body.page-recursos .rfx-hero{
    padding: 82px 0 76px;
  }

  body.page-recursos .rfx-copy h1{
    max-width: none;
  }

  body.page-recursos .rfx-panel-grid{
    grid-template-columns: 1fr;
  }

  body.page-recursos .rfx-framework-grid{
    grid-template-columns: 1fr;
  }

  body.page-recursos .rfx-final-card,
  body.page-recursos .rfx-library-head{
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-recursos .rfx-section{
    padding: 72px 0;
  }
}
/* =========================
   HS3 — sección aislada (sin choques con hc-*)
   ========================= */

.hs3{
  padding: 72px 0 92px;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(16,123,255,.12), transparent 62%),
    radial-gradient(760px 520px at 86% 10%, rgba(10,103,194,.10), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.03), rgba(255,255,255,0) 62%);
}

.hs3__head{ max-width: 980px; margin-bottom: 18px; }
.hs3__eyebrow{
  display:inline-flex; padding:8px 12px; border-radius:999px;
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.16);
  color: rgba(11,31,58,.82);
  font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:11px;
}
.hs3__title{ margin:12px 0 10px; font-size:36px; line-height:1.1; letter-spacing:-.02em; color:#0b1f3a; }
.hs3__lead{ margin:0; color: rgba(11,31,58,.74); line-height:1.6; max-width:80ch; }
.hs3__ctas{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

/* layout */
.hs3__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas:
    "story photo"
    "principles principles";
  gap:14px;
  align-items: stretch; /* foto paralelo a historia */
}
.hs3__story{ grid-area: story; }
.hs3__photo{ grid-area: photo; }
.hs3__principles{ grid-area: principles; }

/* story card */
.hs3__story{
  border-radius:22px;
  border:1px solid rgba(16,123,255,.16);
  background: radial-gradient(900px 360px at 18% 0%, rgba(16,123,255,.14), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.88));
  box-shadow: 0 30px 96px rgba(7,22,48,.14), 0 10px 22px rgba(7,22,48,.08), 0 1px 0 rgba(255,255,255,.70) inset;
  overflow: hidden;
}
.hs3__storyTop{ padding:18px 20px 0; }
.hs3__kicker{
  display:inline-flex; padding:8px 10px; border-radius:999px;
  background: rgba(6,34,75,.08);
  border:1px solid rgba(16,123,255,.14);
  color: rgba(11,31,58,.78);
  font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:11px;
}
.hs3__h3{ margin:10px 0 6px; font-size:22px; color:#0b1f3a; }
.hs3__intro{ margin:0; color: rgba(11,31,58,.72); line-height:1.6; }
.hs3__marks{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.hs3__mark{
  display:inline-flex; padding:9px 12px; border-radius:999px;
  background: rgba(16,123,255,.08);
  border:1px solid rgba(16,123,255,.14);
  color: rgba(11,31,58,.78);
  font-size:12.5px;
}
.hs3__storyBody{ padding:14px 20px 20px; }
.hs3__cols{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.hs3__h4{ margin:0 0 8px; color:#0b1f3a; font-size:15.5px; }
.hs3__p{ margin:0 0 10px; color: rgba(11,31,58,.74); line-height:1.75; font-size:14px; }
.hs3__callout{
  margin-top:8px; padding:12px; border-radius:16px;
  background: rgba(16,123,255,.07);
  border:1px solid rgba(16,123,255,.14);
  box-shadow: 0 16px 44px rgba(7,22,48,.08);
}
.hs3__callout b{ display:block; color:#0b1f3a; margin-bottom:4px; }
.hs3__callout span{ display:block; color: rgba(11,31,58,.72); line-height:1.5; }

.hs3__quote{
  margin-top:10px; padding:12px 14px; border-radius:16px;
  background: rgba(6,34,75,.06);
  border:1px solid rgba(16,123,255,.14);
  box-shadow: 0 18px 50px rgba(7,22,48,.08);
}
.hs3__quote p{ margin:0; color: rgba(11,31,58,.80); line-height:1.55; }

.hs3__kpis{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:14px; }
.hs3__kpi{
  padding:12px; border-radius:16px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(16,123,255,.12);
  box-shadow: 0 16px 44px rgba(7,22,48,.08);
}
.hs3__kpi b{ display:block; color:#0b1f3a; margin-bottom:4px; font-size:13.8px; }
.hs3__kpi span{ display:block; color: rgba(11,31,58,.72); line-height:1.5; font-size:13.2px; }

.hs3__details{
  margin-top:12px; border-radius:16px;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(16,123,255,.12);
  padding:10px 12px;
  box-shadow: 0 14px 40px rgba(7,22,48,.08);
}
.hs3__details summary{ cursor:pointer; font-weight:800; color: rgba(11,31,58,.88); list-style:none; }
.hs3__details summary::-webkit-details-marker{ display:none; }
.hs3__details summary::after{ content:"＋"; float:right; opacity:.7; }
.hs3__details[open] summary::after{ content:"－"; }
.hs3__detailsBody{ margin-top:10px; }

/* photo parallel */
.hs3__photo{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(16,123,255,.16);
  box-shadow: 0 30px 96px rgba(7,22,48,.16);
  height:100%;
  min-height:0;
}
.hs3__photo img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); filter:saturate(1.05) contrast(1.05); }
.hs3__photoOverlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,34,75,.12), rgba(6,34,75,.55)),
              radial-gradient(900px 420px at 20% 0%, rgba(16,123,255,.18), transparent 62%);
  pointer-events:none;
}
.hs3__photoCaption{
  position:absolute; left:16px; right:16px; bottom:16px;
  padding:12px 14px; border-radius:18px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.88);
  box-shadow: 0 18px 50px rgba(0,0,0,.20);
}
.hs3__photoCaption b{ display:block; color:#fff; margin-bottom:4px; }
.hs3__photoCaption span{ display:block; color: rgba(255,255,255,.80); line-height:1.4; font-size:13px; }

/* principles horizontal */
.hs3__principles{
  border-radius:22px;
  border:1px solid rgba(16,123,255,.16);
  background: radial-gradient(900px 320px at 18% 0%, rgba(16,123,255,.12), transparent 62%),
              linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.88));
  box-shadow: 0 26px 86px rgba(7,22,48,.12), 0 10px 22px rgba(7,22,48,.08), 0 1px 0 rgba(255,255,255,.70) inset;
  padding:18px;
}
.hs3__prHead{ margin-bottom:12px; }
.hs3__prLead{ margin:0; color: rgba(11,31,58,.70); }
.hs3__prGrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.hs3__prItem{
  padding:12px; border-radius:16px;
  background: rgba(16,123,255,.06);
  border:1px solid rgba(16,123,255,.12);
  box-shadow: 0 12px 34px rgba(7,22,48,.08);
}
.hs3__prItem b{ display:block; color:#0b1f3a; margin-bottom:4px; font-size:13.8px; }
.hs3__prItem span{ display:block; color: rgba(11,31,58,.72); line-height:1.45; font-size:13.2px; }

@media (max-width: 980px){
  .hs3__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "story"
      "photo"
      "principles";
  }
  .hs3__cols{ grid-template-columns: 1fr; }
  .hs3__kpis{ grid-template-columns: 1fr; }
  .hs3__prGrid{ grid-template-columns: 1fr; }
  .hs3__photo img{ height:auto; aspect-ratio: 4 / 3; }
}
/* =========================================================
   HS3 — Principios más delgada (menos alto)
   PÉGALO AL FINAL de styles.css
========================================================= */

.hs3__principles{
  padding: 12px 14px !important;         /* antes 18px */
}

.hs3__prHead{
  margin-bottom: 8px !important;         /* antes 12px */
}

.hs3__prHead .hs3__h3{
  margin: 0 0 4px !important;
  font-size: 17px !important;            /* un poquito menor */
}

.hs3__prLead{
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* Grid más compacto */
.hs3__prGrid{
  gap: 8px !important;                   /* antes 10px */
}

/* Cada item más bajo */
.hs3__prItem{
  padding: 10px 10px !important;         /* antes 12px */
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(7,22,48,.07) !important;
}

.hs3__prItem b{
  margin-bottom: 3px !important;
  font-size: 13.4px !important;
}

.hs3__prItem span{
  font-size: 12.9px !important;
  line-height: 1.35 !important;
}
/* =========================================================
   HS3 — Principios: más personalidad sin aumentar altura
   PÉGALO AL FINAL de styles.css
========================================================= */

/* Tarjeta: textura + glow + frame interno */
.hs3__principles{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 220px at 16% 0%, rgba(16,123,255,.16), transparent 62%),
    radial-gradient(820px 240px at 92% 10%, rgba(10,103,194,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.88)) !important;
}

/* línea/acento superior (personalidad) */
.hs3__principles::before{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,123,255,.95), rgba(10,103,194,.75), rgba(16,123,255,.20));
  opacity: .85;
  pointer-events:none;
}

/* textura sutil (para que no se vea “plana”) */
.hs3__principles::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    115deg,
    rgba(11,31,58,.10) 0px,
    rgba(11,31,58,.10) 1px,
    rgba(11,31,58,0) 18px,
    rgba(11,31,58,0) 36px
  );
  opacity: .04;
  mix-blend-mode: overlay;
}

/* Encabezado: chip + mejor jerarquía */
.hs3__prHead{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  padding-top: 6px; /* se separa del acento */
}

.hs3__prHead .hs3__h3{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hs3__prHead .hs3__h3::after{
  content:"Marco de trabajo";
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,31,58,.78);
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.16);
}

/* Grid de principios: cada item con “micro-card” más definida */
.hs3__prGrid{
  position: relative;
  z-index: 1;
}

.hs3__prItem{
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62)) !important;
  border: 1px solid rgba(16,123,255,.14) !important;
  box-shadow:
    0 14px 34px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.60) inset !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Hover leve (premium) */
.hs3__prItem:hover{
  transform: translateY(-2px);
  border-color: rgba(16,123,255,.20) !important;
  box-shadow:
    0 22px 70px rgba(7,22,48,.12),
    0 1px 0 rgba(255,255,255,.65) inset !important;
}

/* Bold más “firme” para escaneo rápido */
.hs3__prItem b{
  color: rgba(11,31,58,.95) !important;
}

/* Añade un “punto” azul antes del título (se lee más rápido) */
.hs3__prItem b::before{
  content:"";
  display:inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(16,123,255,.90);
  box-shadow: 0 0 0 3px rgba(16,123,255,.14);
  margin-right: 8px;
  transform: translateY(-1px);
}

/* Micro CTA discreto (sin botones grandes) */
.hs3__principles .hs3__prHead p{
  position: relative;
}

.hs3__principles .hs3__prHead p::after{
  content:"Agendar diagnóstico →";
  display:inline-block;
  margin-left: 10px;
  color: rgba(16,123,255,.92);
  font-weight: 800;
  white-space: nowrap;
}

/* En móvil, no metas la flecha para no apretar */
@media (max-width: 980px){
  .hs3__principles .hs3__prHead p::after{ content:""; }
}
/* =========================================================
   RECURSOS EDITORIAL / NEWS HUB — HERCOB
   Pegar este bloque al final de styles.css
========================================================= */

body.page-recursos-hub .reh-hero{
  position: relative;
  overflow: hidden;
  padding: 98px 0 92px;
  color: #fff;
  background:
    radial-gradient(980px 520px at 8% 10%, rgba(34,110,255,.18), transparent 60%),
    radial-gradient(760px 400px at 92% 18%, rgba(112,172,255,.10), transparent 56%),
    linear-gradient(135deg, #061730 0%, #082247 44%, #071b37 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.page-recursos-hub .reh-hero-grid{
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 28px;
  align-items: center;
}

body.page-recursos-hub .reh-kicker{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 900;
}

body.page-recursos-hub .reh-hero-copy h1{
  margin: 18px 0 14px;
  font-size: clamp(40px, 4.8vw, 74px);
  line-height: 1.01;
  letter-spacing: -.05em;
  max-width: 10.8ch;
}

body.page-recursos-hub .reh-lead{
  max-width: 62ch;
  color: rgba(255,255,255,.86);
  font-size: 18px;
  line-height: 1.65;
}

body.page-recursos-hub .reh-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

body.page-recursos-hub .reh-btn-light{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: none;
}
body.page-recursos-hub .reh-btn-light:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.56);
}

body.page-recursos-hub .reh-btn-dark{
  background: #0b2f5f;
  color: #fff;
  box-shadow: 0 16px 34px rgba(11,31,58,.16);
}
body.page-recursos-hub .reh-btn-dark:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 38px rgba(11,31,58,.20);
}

body.page-recursos-hub .reh-btn-ghost{
  background: #fff;
  color: #0b1f3a;
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 30px rgba(11,31,58,.08);
}
body.page-recursos-hub .reh-btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(11,31,58,.12);
}

body.page-recursos-hub .reh-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
body.page-recursos-hub .reh-tags span{
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  font-weight: 700;
}

body.page-recursos-hub .reh-hero-panel{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  padding: 22px;
  backdrop-filter: blur(10px);
}

body.page-recursos-hub .reh-badge{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 800;
}

body.page-recursos-hub .reh-panel-list{
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

body.page-recursos-hub .reh-panel-item{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
body.page-recursos-hub .reh-panel-item strong{
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 16px;
}
body.page-recursos-hub .reh-panel-item p{
  margin: 0;
  color: rgba(255,255,255,.76);
  line-height: 1.55;
}
body.page-recursos-hub .reh-panel-note{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(132,182,255,.12);
  border: 1px solid rgba(132,182,255,.18);
  color: rgba(255,255,255,.84);
  line-height: 1.55;
}

body.page-recursos-hub .reh-section{
  padding: 84px 0;
}

body.page-recursos-hub .reh-feature,
body.page-recursos-hub .reh-reports,
body.page-recursos-hub .reh-cta{
  background:
    radial-gradient(940px 420px at 0% 0%, rgba(29,78,216,.06), transparent 56%),
    linear-gradient(180deg, rgba(246,249,252,.92), rgba(246,249,252,.92));
}

body.page-recursos-hub .reh-radar,
body.page-recursos-hub .reh-series{
  background:
    radial-gradient(920px 420px at 100% 0%, rgba(29,78,216,.05), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
}

body.page-recursos-hub .reh-meaning{
  background:
    radial-gradient(920px 420px at 0% 0%, rgba(29,78,216,.05), transparent 56%),
    linear-gradient(180deg, rgba(252,253,255,.98), rgba(245,249,255,.98));
}

body.page-recursos-hub .reh-head{
  max-width: 920px;
  margin-bottom: 24px;
}
body.page-recursos-hub .reh-head-kicker{
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.07);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.page-recursos-hub .reh-head h2{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-recursos-hub .reh-head p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
  font-size: 17px;
  max-width: 72ch;
}

/* FEATURE */
body.page-recursos-hub .reh-feature-grid{
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
  align-items: stretch;
}

body.page-recursos-hub .reh-feature-main{
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(145deg, rgba(20,52,101,.98), rgba(52,88,145,.92));
  box-shadow: 0 22px 58px rgba(11,31,58,.10);
  padding: 24px;
  color: #fff;
}

body.page-recursos-hub .reh-source-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
body.page-recursos-hub .reh-source,
body.page-recursos-hub .reh-date{
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.page-recursos-hub .reh-feature-main .reh-source,
body.page-recursos-hub .reh-feature-main .reh-date{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.84);
}
body.page-recursos-hub .reh-report .reh-source,
body.page-recursos-hub .reh-report .reh-date,
body.page-recursos-hub .reh-side-card .reh-source,
body.page-recursos-hub .reh-side-card .reh-date{
  background: rgba(246,249,252,.88);
  border: 1px solid rgba(11,31,58,.08);
  color: rgba(11,31,58,.70);
}

body.page-recursos-hub .reh-feature-main h3{
  margin: 0 0 12px;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
body.page-recursos-hub .reh-feature-lead{
  margin: 0 0 18px;
  color: rgba(255,255,255,.88);
  line-height: 1.62;
  font-size: 17px;
}

body.page-recursos-hub .reh-feature-points{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.page-recursos-hub .reh-point{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
body.page-recursos-hub .reh-point small{
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}
body.page-recursos-hub .reh-point strong{
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  color: #fff;
}
body.page-recursos-hub .reh-point span{
  display: block;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}
body.page-recursos-hub .reh-feature-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

body.page-recursos-hub .reh-feature-side{
  display: grid;
  gap: 14px;
}
body.page-recursos-hub .reh-side-card{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(11,31,58,.08);
  padding: 20px;
}
body.page-recursos-hub .reh-side-card--soft{
  background: linear-gradient(180deg, rgba(248,250,255,.98), rgba(240,246,255,.98));
}
body.page-recursos-hub .reh-side-card h4{
  margin: 0 0 10px;
  color: #0b1f3a;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -.03em;
}
body.page-recursos-hub .reh-side-card p{
  margin: 0 0 14px;
  color: rgba(11,31,58,.72);
  line-height: 1.58;
}
body.page-recursos-hub .reh-side-card a{
  color: #0b2f5f;
  font-weight: 800;
  text-decoration: none;
}
body.page-recursos-hub .reh-side-card a:hover{
  text-decoration: underline;
}

/* RADAR */
body.page-recursos-hub .reh-radar-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
body.page-recursos-hub .reh-radar-card{
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,.08);
  background: #fff;
  box-shadow: 0 16px 40px rgba(11,31,58,.06);
  padding: 18px;
}
body.page-recursos-hub .reh-radar-tag{
  display: inline-flex;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.page-recursos-hub .reh-radar-card h3{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
body.page-recursos-hub .reh-radar-card p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

/* REPORTS */
body.page-recursos-hub .reh-reports-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

body.page-recursos-hub .reh-report{
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(11,31,58,.08);
  padding: 22px;
}

body.page-recursos-hub .reh-report--featured{
  background: linear-gradient(180deg, rgba(248,250,255,.98), rgba(240,246,255,.98));
  border-color: rgba(29,78,216,.16);
}

body.page-recursos-hub .reh-report h3{
  margin: 0 0 10px;
  color: #0b1f3a;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.03em;
}
body.page-recursos-hub .reh-report p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
}
body.page-recursos-hub .reh-report-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

/* MEANING */
body.page-recursos-hub .reh-meaning-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
body.page-recursos-hub .reh-meaning-card{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(11,31,58,.08);
  padding: 22px;
}
body.page-recursos-hub .reh-meaning-card--dark{
  background: linear-gradient(145deg, rgba(20,52,101,.98), rgba(52,88,145,.92));
  border-color: rgba(255,255,255,.08);
}
body.page-recursos-hub .reh-meaning-label{
  display: inline-flex;
  margin-bottom: 12px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.14);
  color: rgba(29,78,216,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.page-recursos-hub .reh-meaning-card--dark .reh-meaning-label{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
}
body.page-recursos-hub .reh-meaning-card h3{
  margin: 0 0 10px;
  color: #0b1f3a;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.03em;
}
body.page-recursos-hub .reh-meaning-card p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
}
body.page-recursos-hub .reh-meaning-card--dark h3,
body.page-recursos-hub .reh-meaning-card--dark p{
  color: #fff;
}

/* SERIES */
body.page-recursos-hub .reh-series-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
body.page-recursos-hub .reh-series-card{
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,.10);
  background: #fff;
  box-shadow: 0 18px 46px rgba(11,31,58,.06);
  padding: 18px;
}
body.page-recursos-hub .reh-series-no{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: rgba(29,78,216,.92);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(29,78,216,.18);
}
body.page-recursos-hub .reh-series-card h3{
  margin: 0 0 8px;
  color: #0b1f3a;
  font-size: 18px;
  line-height: 1.2;
}
body.page-recursos-hub .reh-series-card p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

/* CTA */
body.page-recursos-hub .reh-cta-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.98));
  box-shadow: 0 20px 60px rgba(11,31,58,.08);
  padding: 24px;
}
body.page-recursos-hub .reh-cta-copy h2{
  margin: 0 0 6px;
  color: #0b1f3a;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.page-recursos-hub .reh-cta-copy p{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
  max-width: 64ch;
}
body.page-recursos-hub .reh-cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1100px){
  body.page-recursos-hub .reh-hero-grid,
  body.page-recursos-hub .reh-feature-grid{
    grid-template-columns: 1fr;
  }

  body.page-recursos-hub .reh-radar-grid,
  body.page-recursos-hub .reh-series-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  body.page-recursos-hub .reh-reports-grid,
  body.page-recursos-hub .reh-meaning-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  body.page-recursos-hub .reh-hero{
    padding: 82px 0 76px;
  }

  body.page-recursos-hub .reh-hero-copy h1{
    max-width: none;
  }

  body.page-recursos-hub .reh-feature-points,
  body.page-recursos-hub .reh-radar-grid,
  body.page-recursos-hub .reh-series-grid{
    grid-template-columns: 1fr;
  }

  body.page-recursos-hub .reh-cta-card{
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-recursos-hub .reh-section{
    padding: 72px 0;
  }
}
/* =========================
   HS4 — Cómo trabajamos (institucional, dinámico, azul/blanco)
   PÉGALO AL FINAL de styles.css
========================= */

.hs4{
  padding: 70px 0 90px;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(16,123,255,.10), transparent 62%),
    radial-gradient(760px 520px at 86% 10%, rgba(10,103,194,.08), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.02), rgba(255,255,255,0) 62%);
}

.hs4__head{ max-width: 980px; margin-bottom: 18px; }
.hs4__eyebrow{
  display:inline-flex; padding:8px 12px; border-radius:999px;
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.16);
  color: rgba(11,31,58,.82);
  font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:11px;
}
.hs4__title{ margin:12px 0 10px; font-size:32px; line-height:1.12; letter-spacing:-.02em; color:#0b1f3a; }
.hs4__lead{ margin:0; color: rgba(11,31,58,.74); line-height:1.6; max-width:80ch; }

/* Steps */
.hs4__steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  align-items: stretch;
  position: relative;
}

/* Conector sutil (guía la lectura) */
.hs4__steps::before{
  content:"";
  position:absolute;
  left: 6%;
  right: 6%;
  top: 44px;
  height: 2px;
  background: linear-gradient(90deg, rgba(16,123,255,.25), rgba(16,123,255,.08), rgba(16,123,255,.25));
  opacity:.8;
  pointer-events:none;
}

.hs4__step{
  border-radius: 20px;
  border: 1px solid rgba(16,123,255,.16);
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(16,123,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.88));
  box-shadow: 0 26px 86px rgba(7,22,48,.10), 0 10px 22px rgba(7,22,48,.08), 0 1px 0 rgba(255,255,255,.70) inset;
  padding: 16px 16px;
  display:flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.hs4__step:hover{
  transform: translateY(-3px);
  border-color: rgba(16,123,255,.22);
  box-shadow: 0 34px 110px rgba(7,22,48,.12), 0 12px 26px rgba(7,22,48,.10), 0 1px 0 rgba(255,255,255,.75) inset;
}

.hs4__stepTop{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}

.hs4__num{
  width: 34px; height: 34px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900; color:#0b1f3a;
  background: rgba(16,123,255,.14);
  border: 1px solid rgba(16,123,255,.18);
  box-shadow: 0 14px 34px rgba(7,22,48,.10);
}

.hs4__step h3{ margin:0; color:#0b1f3a; font-size: 17px; letter-spacing:-.01em; }
.hs4__step p{ margin:0 0 10px; color: rgba(11,31,58,.74); line-height:1.55; font-size: 13.8px; }

.hs4__mini{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.hs4__mini span{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(16,123,255,.08);
  border: 1px solid rgba(16,123,255,.14);
  color: rgba(11,31,58,.78);
  font-size: 12px;
}

.hs4__link{
  margin-top: auto;
  display:inline-flex;
  font-weight: 800;
  color: rgba(16,123,255,.92);
  text-decoration: none;
  padding-top: 10px;
}

/* Cred blocks */
.hs4__cred{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.hs4__card{
  border-radius: 20px;
  border: 1px solid rgba(16,123,255,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 70px rgba(7,22,48,.10);
  padding: 16px 16px;
}

.hs4__card h3{
  margin: 0 0 8px;
  color:#0b1f3a;
  font-size: 17px;
}

.hs4__card ul{ margin:0; padding-left: 18px; color: rgba(11,31,58,.74); line-height: 1.6; }

.hs4__card--blue{
  background: linear-gradient(180deg, rgba(6,34,75,.92), rgba(6,34,75,.72));
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
}
.hs4__card--blue h3{ color:#fff; }
.hs4__card--blue ul{ color: rgba(255,255,255,.84); }
.hs4__card--blue b{ color:#fff; }

.hs4__cta{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .hs4__steps{ grid-template-columns: 1fr; }
  .hs4__steps::before{ display:none; }
  .hs4__cred{ grid-template-columns: 1fr; }
}
/* Quitar línea azul que atraviesa las 3 tarjetas */
.hs4__steps::before{
  content: none !important;
}
/* =========================
   HS5 — FAQ institucional premium
   PÉGALO AL FINAL de styles.css
========================= */

.hs5{
  padding: 70px 0 90px;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(16,123,255,.10), transparent 62%),
    radial-gradient(760px 520px at 86% 10%, rgba(10,103,194,.08), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.02), rgba(255,255,255,0) 62%);
}

.hs5__head{ max-width: 980px; margin-bottom: 18px; }
.hs5__eyebrow{
  display:inline-flex; padding:8px 12px; border-radius:999px;
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.16);
  color: rgba(11,31,58,.82);
  font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:11px;
}
.hs5__title{ margin:12px 0 10px; font-size:32px; line-height:1.12; letter-spacing:-.02em; color:#0b1f3a; }
.hs5__lead{ margin:0; color: rgba(11,31,58,.74); line-height:1.6; max-width:80ch; }

.hs5__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items: start;
}

/* FAQ items */
.hs5__item{
  border-radius: 18px;
  border: 1px solid rgba(16,123,255,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 70px rgba(7,22,48,.08);
  padding: 12px 14px;
  margin-bottom: 10px;
  overflow: hidden;
}

.hs5__item summary{
  cursor: pointer;
  font-weight: 900;
  color: rgba(11,31,58,.88);
  list-style: none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.hs5__item summary::-webkit-details-marker{ display:none; }

.hs5__item summary::after{
  content:"＋";
  font-weight: 900;
  opacity: .7;
}

.hs5__item[open] summary::after{
  content:"－";
}

.hs5__body{
  margin-top: 10px;
  color: rgba(11,31,58,.74);
  line-height: 1.65;
  font-size: 14px;
}

/* Side card */
.hs5__sideCard{
  border-radius: 22px;
  border: 1px solid rgba(16,123,255,.16);
  background: linear-gradient(180deg, rgba(6,34,75,.92), rgba(6,34,75,.72));
  box-shadow: 0 30px 96px rgba(7,22,48,.16);
  padding: 18px 18px;
  color: rgba(255,255,255,.86);
  overflow: hidden;
  position: sticky;
  top: 86px; /* se queda visible al scrollear */
}

.hs5__sideCard h3{ margin:0 0 8px; color:#fff; font-size:18px; }
.hs5__sideCard p{ margin:0 0 12px; line-height:1.6; }

.hs5__bullets{
  display:grid;
  gap: 10px;
  margin: 12px 0;
}

.hs5__bullet{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

.hs5__bullet span{
  width: 28px; height: 28px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
}

.hs5__cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.hs5__note{
  margin: 10px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
}

/* Responsive */
@media (max-width: 980px){
  .hs5__grid{ grid-template-columns: 1fr; }
  .hs5__sideCard{ position: relative; top: 0; }
}
/* =========================================================
   HS5 — Ajuste tarjeta lateral: subir/centrar + botones con más punch
   PÉGALO AL FINAL de styles.css
========================================================= */

/* 1) Alineación con FAQs: súbela y quítale “top” tan grande */
.hs5__sideCard{
  top: 64px !important;         /* antes 86px (la sube) */
  margin-top: -6px !important;  /* la acerca un poco al inicio del bloque */
}

/* 2) Si la columna derecha se siente “desfasada”, asegura que arranque al mismo nivel */
.hs5__grid{
  align-items: start !important;
}

/* 3) Botón primario: más contraste y volumen */
.hs5__cta .btn-primary{
  box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
  transform: translateZ(0);
}

/* 4) Botón ghost: que NO se pierda (fondo + borde + texto) */
.hs5__cta .btn-ghost{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.95) !important;
}

/* Hover para ambos */
.hs5__cta .btn-primary:hover{
  box-shadow: 0 24px 70px rgba(0,0,0,.32) !important;
}

.hs5__cta .btn-ghost:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.28) !important;
}

/* Móvil: que no se “pegue” raro */
@media (max-width: 980px){
  .hs5__sideCard{
    margin-top: 0 !important;
    top: 0 !important;
  }
}
/* =========================================================
   HS5 — Centrar tarjeta derecha verticalmente vs FAQs (desktop)
   PÉGALO AL FINAL de styles.css
========================================================= */

/* 1) Que el grid estire filas (para poder centrar) */
.hs5__grid{
  align-items: stretch !important;
}

/* 2) Centrar la tarjeta en su columna */
.hs5__side{
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;  /* centra verticalmente */
}

/* 3) En desktop, quita sticky para que de verdad se centre */
@media (min-width: 981px){
  .hs5__sideCard{
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
  }
}
/* =========================================================
   HS5 — Centrar VERTICALMENTE las FAQs (columna izquierda)
   La tarjeta derecha se queda como está
   PÉGALO AL FINAL de styles.css
========================================================= */

/* El grid debe estirar para que exista “alto” contra el cual centrar */
.hs5__grid{
  align-items: stretch !important;
}

/* Columna izquierda (FAQs): se centra verticalmente */
.hs5__faq{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;  /* ✅ esto centra las FAQs */
}

/* Evita que cada item tenga margen raro que rompa el centrado */
.hs5__item{
  margin-bottom: 10px !important;
}
.hs5__faq .hs5__item:last-child{
  margin-bottom: 0 !important;
}

/* En móvil no hace sentido centrar; vuelve a normal */
@media (max-width: 980px){
  .hs5__faq{
    justify-content: flex-start !important;
  }
}
/* =========================================================
   CONSULTORÍA — Fix HERO + STRIP (cfx-band) cortado/enterrado
   Aislado a body.page-consultoria
========================================================= */

/* 1) Recorta el aire inferior del hero para que no haya tanto hueco */
body.page-consultoria .cfx-hero{
  padding-bottom: 42px !important;  /* ajusta 36–56 si quieres */
  position: relative;
  z-index: 1;
}

/* 2) Sube el strip para que se “pegue” al hero (sin cortarse) */
body.page-consultoria .cfx-band{
  position: relative;
  margin-top: -28px !important;     /* sube el strip sobre el hero */
  padding-bottom: 18px;             /* evita que se sienta cortado abajo */
  z-index: 2;
}

/* 3) Asegura que nada lo recorte */
body.page-consultoria .cfx-band,
body.page-consultoria .cfx-band .container,
body.page-consultoria .cfx-band-wrap{
  overflow: visible !important;
}

/* 4) Dale “cierre” visual al strip (si se ve como que flota raro) */
body.page-consultoria .cfx-band-wrap{
  box-shadow: 0 30px 90px rgba(7,22,48,.14);
}
/* =========================================================
   CONSULTORÍA — Pulido del STRIP (cfx-band): más realismo y armonía
========================================================= */

body.page-consultoria .cfx-band{
  /* que el blanco de abajo no se sienta “corte” */
  background: transparent !important;
}

/* Contenedor del strip: glass sobrio, sin azul plástico */
body.page-consultoria .cfx-band-wrap{
  border-radius: 22px !important;
  padding: 14px 14px !important;

  background:
    radial-gradient(900px 280px at 18% 0%, rgba(16,123,255,.18), transparent 62%),
    radial-gradient(900px 320px at 86% 18%, rgba(10,103,194,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(241,247,255,.62)) !important;

  border: 1px solid rgba(16,123,255,.16) !important;

  box-shadow:
    0 30px 90px rgba(7,22,48,.14),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.75) inset !important;

  backdrop-filter: blur(10px);
}

/* Items: menos “bloque”, más tarjeta pro */
body.page-consultoria .cfx-band-item{
  border-radius: 16px !important;
  padding: 14px 14px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58)) !important;

  border: 1px solid rgba(11,31,58,.10) !important;

  box-shadow:
    0 16px 44px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.70) inset !important;

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Hover sutil (realismo) */
body.page-consultoria .cfx-band-item:hover{
  transform: translateY(-2px);
  border-color: rgba(16,123,255,.18) !important;
  box-shadow:
    0 24px 70px rgba(7,22,48,.12),
    0 1px 0 rgba(255,255,255,.75) inset !important;
}

/* Tipografía: etiqueta y título con mejor contraste */
body.page-consultoria .cfx-band-item span{
  display: inline-flex;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;

  color: rgba(11,31,58,.65) !important;

  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.14);
  padding: 7px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

body.page-consultoria .cfx-band-item strong{
  display:block;
  color: rgba(11,31,58,.92) !important;
  line-height: 1.2;
  font-size: 14px;
}

/* Divisores entre items (si tu wrap es flex) */
body.page-consultoria .cfx-band-wrap{
  gap: 12px !important;
}

/* Responsive: que no se vea apretado */
@media (max-width: 980px){
  body.page-consultoria .cfx-band-wrap{
    padding: 12px !important;
  }
  body.page-consultoria .cfx-band-item{
    padding: 12px 12px !important;
  }
}
/* =========================================================
   CONSULTORÍA — STRIP (cfx-band) versión AZULES (más destaque)
========================================================= */

body.page-consultoria .cfx-band-wrap{
  border-radius: 22px !important;
  padding: 14px 14px !important;

  /* Azul dominante + glass */
  background:
    radial-gradient(900px 280px at 18% 0%, rgba(16,123,255,.28), transparent 62%),
    radial-gradient(900px 320px at 86% 18%, rgba(0,210,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(6,34,75,.88), rgba(6,34,75,.68)) !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  box-shadow:
    0 34px 110px rgba(7,22,48,.22),
    0 12px 26px rgba(7,22,48,.14),
    0 1px 0 rgba(255,255,255,.10) inset !important;

  backdrop-filter: blur(12px);
}

/* Tarjetas internas: vidrio claro para contraste */
body.page-consultoria .cfx-band-item{
  border-radius: 16px !important;
  padding: 14px 14px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  box-shadow:
    0 18px 50px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.10) inset !important;

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

body.page-consultoria .cfx-band-item:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10)) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.12) inset !important;
}

/* Etiqueta (Claridad/Control/Crecimiento): más azul y más visible */
body.page-consultoria .cfx-band-item span{
  display: inline-flex;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;

  color: rgba(255,255,255,.92) !important;

  background: rgba(16,123,255,.28) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  padding: 7px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* Texto principal: blanco legible */
body.page-consultoria .cfx-band-item strong{
  display:block;
  color: rgba(255,255,255,.92) !important;
  line-height: 1.2;
  font-size: 14px;
}

/* Espaciado entre items */
body.page-consultoria .cfx-band-wrap{
  gap: 12px !important;
}
/* =========================================================
   CONSULTORÍA — STRIP (cfx-band) idea: Highlight Cards claras, premium
   ========================================================= */

body.page-consultoria .cfx-band{
  background: transparent !important;
}

/* Wrap claro, no oscuro */
body.page-consultoria .cfx-band-wrap{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;

  padding: 12px !important;
  border-radius: 22px !important;

  background:
    radial-gradient(900px 260px at 18% 0%, rgba(16,123,255,.12), transparent 62%),
    radial-gradient(900px 300px at 86% 10%, rgba(0,210,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,247,255,.86)) !important;

  border: 1px solid rgba(16,123,255,.14) !important;

  box-shadow:
    0 30px 90px rgba(7,22,48,.12),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.75) inset !important;
}

/* Cada item como tarjeta premium */
body.page-consultoria .cfx-band-item{
  position: relative;
  border-radius: 18px !important;
  padding: 16px 16px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.88)) !important;

  border: 1px solid rgba(11,31,58,.10) !important;

  box-shadow:
    0 18px 55px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.80) inset !important;

  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Barra superior (personalidad, sin verse “plástico”) */
body.page-consultoria .cfx-band-item::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,123,255,.95), rgba(0,210,255,.45), rgba(16,123,255,.20));
  opacity: .9;
}

/* Icono minimal (sin imágenes) */
body.page-consultoria .cfx-band-item::after{
  content:"";
  position:absolute;
  width: 38px;
  height: 38px;
  right: 14px;
  top: 14px;
  border-radius: 16px;
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.16);
  box-shadow: 0 14px 34px rgba(7,22,48,.10);
}

/* Etiqueta */
body.page-consultoria .cfx-band-item span{
  display: inline-flex;
  margin-top: 10px; /* deja espacio para la barra */
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;

  color: rgba(11,31,58,.68) !important;
  background: rgba(16,123,255,.10) !important;
  border: 1px solid rgba(16,123,255,.14) !important;

  padding: 7px 10px;
  border-radius: 999px;
}

/* Texto principal */
body.page-consultoria .cfx-band-item strong{
  display:block;
  margin-top: 10px;
  color: rgba(11,31,58,.92) !important;
  line-height: 1.25;
  font-size: 14.2px;
  max-width: 46ch;
}

/* Hover */
body.page-consultoria .cfx-band-item:hover{
  transform: translateY(-2px);
  border-color: rgba(16,123,255,.18) !important;
  box-shadow:
    0 26px 80px rgba(7,22,48,.12),
    0 1px 0 rgba(255,255,255,.85) inset !important;
}

/* Mobile */
@media (max-width: 980px){
  body.page-consultoria .cfx-band-wrap{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   CONSULTORÍA — STRIP (cfx-band) AZUL DOMINANTE (sin blanco)
   ========================================================= */

body.page-consultoria .cfx-band-wrap{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;

  padding: 12px !important;
  border-radius: 22px !important;

  /* Azul dominante, pero con vida */
  background:
    radial-gradient(900px 280px at 18% 0%, rgba(255,255,255,.12), transparent 62%),
    radial-gradient(900px 320px at 86% 18%, rgba(0,210,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(10,103,194,.95), rgba(6,34,75,.88)) !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  box-shadow:
    0 34px 110px rgba(7,22,48,.22),
    0 12px 26px rgba(7,22,48,.14),
    0 1px 0 rgba(255,255,255,.10) inset !important;

  backdrop-filter: blur(10px);
}

/* Items: glass azul (no blanco) */
body.page-consultoria .cfx-band-item{
  position: relative;
  border-radius: 18px !important;
  padding: 16px 16px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  box-shadow:
    0 18px 50px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.10) inset !important;

  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

/* Accent superior por tarjeta (personalidad sin “raro”) */
body.page-consultoria .cfx-band-item::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,210,255,.85), rgba(255,255,255,.25), rgba(0,210,255,.35));
  opacity: .95;
}

/* Etiqueta (Claridad/Control/Crecimiento): azul claro */
body.page-consultoria .cfx-band-item span{
  display: inline-flex;
  margin-top: 10px;

  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;

  color: rgba(255,255,255,.92) !important;

  background: rgba(0,210,255,.16) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  padding: 7px 10px;
  border-radius: 999px;
}

/* Texto principal: blanco legible */
body.page-consultoria .cfx-band-item strong{
  display:block;
  margin-top: 10px;
  color: rgba(255,255,255,.94) !important;
  line-height: 1.25;
  font-size: 14.2px;
}

/* Hover */
body.page-consultoria .cfx-band-item:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.12) inset !important;
}

/* Mobile */
@media (max-width: 980px){
  body.page-consultoria .cfx-band-wrap{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   CONSULTORÍA — STRIP (cfx-band) más delgado + azul menos brilloso
   PÉGALO AL FINAL de styles.css
========================================================= */

body.page-consultoria .cfx-band-wrap{
  padding: 10px !important;     /* antes 12px */
  gap: 10px !important;         /* antes 12px */

  /* azul más sobrio / menos brillante */
  background:
    radial-gradient(900px 280px at 18% 0%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 320px at 86% 18%, rgba(0,210,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(12,90,170,.94), rgba(6,34,75,.90)) !important;
}

body.page-consultoria .cfx-band-item{
  padding: 12px 12px !important;   /* antes 16px */
  border-radius: 16px !important;  /* un poco más minimal */
}

/* barra superior más fina */
body.page-consultoria .cfx-band-item::before{
  left: 12px !important;
  right: 12px !important;
  top: 10px !important;
  height: 2px !important;
  opacity: .85 !important;
}

/* etiqueta (Claridad/Control/Crecimiento) más compacta */
body.page-consultoria .cfx-band-item span{
  margin-top: 8px !important;
  padding: 6px 9px !important;
  font-size: 10.5px !important;
}

/* texto principal un poco más compacto */
body.page-consultoria .cfx-band-item strong{
  margin-top: 8px !important;
  font-size: 13.8px !important;
  line-height: 1.22 !important;
}
/* =========================================================
   CONSULTORÍA — PAQUETES: quitar badge, alinear y resaltar cards
   ========================================================= */

/* 1) Quitar badge "MÁS COMPLETO" (por si es elemento real o pseudo) */
body.page-consultoria .cfx-pack-card--featured .cfx-badge,
body.page-consultoria .cfx-pack-card--featured .badge,
body.page-consultoria .cfx-pack-card--featured .tag,
body.page-consultoria .cfx-pack-card--featured [data-badge],
body.page-consultoria .cfx-pack-card--featured::before,
body.page-consultoria .cfx-pack-card--featured::after{
  content: none !important;
  display: none !important;
}

/* 2) Alinear mejor el TOP (kicker/título/precio) */
body.page-consultoria .cfx-pack-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body.page-consultoria .cfx-pack-top > div{
  min-width: 0;
}

body.page-consultoria .cfx-price{
  white-space: nowrap;
  align-self: flex-start;
}

/* 3) Dar un poco más de tono a TODAS las cards (sin blanco plano) */
body.page-consultoria .cfx-pack-card{
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(16,123,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,247,255,.86)) !important;

  border: 1px solid rgba(16,123,255,.16) !important;

  box-shadow:
    0 22px 70px rgba(7,22,48,.10),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset !important;

  overflow: hidden;
}

/* 4) La del medio: destacar con borde azul + glow sutil + lift */
body.page-consultoria .cfx-pack-card--featured{
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(16,123,255,.18), transparent 62%),
    radial-gradient(900px 360px at 86% 12%, rgba(0,210,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.86)) !important;

  border: 1px solid rgba(16,123,255,.28) !important;

  box-shadow:
    0 34px 110px rgba(7,22,48,.16),
    0 12px 26px rgba(7,22,48,.10),
    0 0 0 6px rgba(16,123,255,.06) !important; /* halo */
}

/* 5) Micro-interacción: hover igual para todas, pero el featured un poquito más */
body.page-consultoria .cfx-pack-card{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.page-consultoria .cfx-pack-card:hover{
  transform: translateY(-3px);
  border-color: rgba(16,123,255,.22) !important;
  box-shadow:
    0 30px 96px rgba(7,22,48,.14),
    0 12px 26px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.75) inset !important;
}
body.page-consultoria .cfx-pack-card--featured:hover{
  transform: translateY(-4px);
  box-shadow:
    0 40px 130px rgba(7,22,48,.18),
    0 14px 30px rgba(7,22,48,.12),
    0 0 0 6px rgba(16,123,255,.08) !important;
}
/* =========================================================
   CONSULTORÍA — PAQUETES: más blanco, solo toque azul
========================================================= */

body.page-consultoria .cfx-pack-card{
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(16,123,255,.06), transparent 62%),
    radial-gradient(900px 260px at 86% 8%, rgba(0,210,255,.03), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.92)) !important;

  border: 1px solid rgba(16,123,255,.12) !important;
}

/* La del medio: destaca pero sin “pintarse” */
body.page-consultoria .cfx-pack-card--featured{
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(16,123,255,.10), transparent 62%),
    radial-gradient(900px 360px at 86% 12%, rgba(0,210,255,.05), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,255,.92)) !important;

  border: 1px solid rgba(16,123,255,.18) !important;

  /* halo más sutil */
  box-shadow:
    0 34px 110px rgba(7,22,48,.14),
    0 12px 26px rgba(7,22,48,.10),
    0 0 0 5px rgba(16,123,255,.04) !important;
}
/* =========================================================
   CONSULTORÍA — PAQUETES: todas blancas con toque azul + centro un poco más
========================================================= */

/* TODAS */
body.page-consultoria .cfx-pack-grid .cfx-pack-card{
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(16,123,255,.06), transparent 62%),
    radial-gradient(900px 260px at 86% 8%, rgba(0,210,255,.03), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.92)) !important;

  border: 1px solid rgba(16,123,255,.12) !important;

  box-shadow:
    0 22px 70px rgba(7,22,48,.10),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset !important;
}

/* SOLO LA DEL MEDIO */
body.page-consultoria .cfx-pack-grid .cfx-pack-card.cfx-pack-card--featured{
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(16,123,255,.10), transparent 62%),
    radial-gradient(900px 360px at 86% 12%, rgba(0,210,255,.05), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,255,.92)) !important;

  border: 1px solid rgba(16,123,255,.18) !important;

  box-shadow:
    0 34px 110px rgba(7,22,48,.14),
    0 12px 26px rgba(7,22,48,.10),
    0 0 0 5px rgba(16,123,255,.04) !important;
}
body.page-consultoria .cfx-mini-table{
  margin-top: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(11,31,58,.10);
  padding: 10px 12px;
}

body.page-consultoria .cfx-mini-table .row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(11,31,58,.08);
}
body.page-consultoria .cfx-mini-table .row:last-child{ border-bottom: 0; }

body.page-consultoria .cfx-mini-table span{ color: rgba(11,31,58,.72); }
body.page-consultoria .cfx-mini-table b{ color:#0b1f3a; }
body.page-consultoria .cfx-mini-table i{
  font-style: normal;
  color: rgba(16,123,255,.92);
  font-weight: 800;
}
/* =========================================================
   CONSULTORÍA — Mini tabla: más pegada (menos interlineado)
========================================================= */

body.page-consultoria .cfx-mini-table{
  padding: 8px 10px !important;
}

body.page-consultoria .cfx-mini-table .row{
  padding: 4px 0 !important;                /* antes 6–8 */
  gap: 8px !important;
}

body.page-consultoria .cfx-mini-table span,
body.page-consultoria .cfx-mini-table b,
body.page-consultoria .cfx-mini-table i{
  line-height: 1.2 !important;              /* 👈 esto es lo que quieres */
}

body.page-consultoria .cfx-mini-table .row:not(:last-child){
  border-bottom: 1px solid rgba(11,31,58,.06) !important;
}
/* =========================================================
   CONSULTORÍA — ENTREGABLES: cfx-bars -> 4 barras VERTICALES (mini chart)
========================================================= */

body.page-consultoria .cfx-bars{
  margin-top: 12px !important;
  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(16,123,255,.05);
  border: 1px solid rgba(16,123,255,.10);

  display: flex !important;
  align-items: flex-end !important;   /* barras desde abajo */
  justify-content: space-between !important;
  gap: 12px !important;

  height: 96px;                       /* tamaño del “mini chart” */
}

/* Cada span ya no es barra horizontal, ahora es barra vertical */
body.page-consultoria .cfx-bars span{
  width: 18% !important;              /* 4 barras con espacio */
  height: auto !important;            /* lo controlamos con CSS abajo */

  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(16,123,255,.78), rgba(6,34,75,.45)) !important;

  box-shadow: 0 10px 22px rgba(7,22,48,.10) !important;
  opacity: .95;

  /* Ignoramos el width inline original para que no afecte */
  flex: 1 1 0;
}

/* Mapeo simple de alturas (puedes ajustar si quieres) */
body.page-consultoria .cfx-bars span:nth-child(1){ height: 78% !important; }
body.page-consultoria .cfx-bars span:nth-child(2){ height: 60% !important; }
body.page-consultoria .cfx-bars span:nth-child(3){ height: 46% !important; }
body.page-consultoria .cfx-bars span:nth-child(4){ height: 68% !important; }
/* =========================================================
   CONSULTORÍA — ENTREGABLES: cfx-bars -> 6 barras verticales MÁS DELGADAS
========================================================= */

body.page-consultoria .cfx-bars{
  height: 92px !important;
  gap: 10px !important;
}

/* barras más delgadas */
body.page-consultoria .cfx-bars span{
  width: 10% !important;       /* más delgadas */
  border-radius: 10px !important;
}

/* alturas (puedes ajustar) */
body.page-consultoria .cfx-bars span:nth-child(1){ height: 82% !important; }
body.page-consultoria .cfx-bars span:nth-child(2){ height: 64% !important; }
body.page-consultoria .cfx-bars span:nth-child(3){ height: 48% !important; }
body.page-consultoria .cfx-bars span:nth-child(4){ height: 72% !important; }
body.page-consultoria .cfx-bars span:nth-child(5){ height: 58% !important; }
body.page-consultoria .cfx-bars span:nth-child(6){ height: 40% !important; }
/* =========================================================
   CONSULTORÍA — ENTREGABLES: cfx-bars estilo dashboard (como referencia)
========================================================= */

body.page-consultoria .cfx-bars{
  margin-top: 12px;
  height: 180px;                 /* más alto como tu ejemplo */
  padding: 22px 22px 18px;
  border-radius: 28px;

  /* panel claro con borde y sombra suave */
  background:
    radial-gradient(900px 280px at 18% 0%, rgba(16,123,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,247,255,.86));
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 18px 60px rgba(7,22,48,.10);

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
}

/* barra */
body.page-consultoria .cfx-bars span{
  /* ancho “gordo” */
  flex: 1 1 0;
  max-width: 120px;              /* evita que se vuelvan gigantes en pantallas grandes */
  height: var(--h, 60%);         /* 👈 usa --h del HTML */

  border-radius: 22px;           /* radio grande como tu ejemplo */
  background: linear-gradient(180deg, rgba(35,99,255,.92), rgba(35,99,255,.35));
  box-shadow: 0 16px 40px rgba(7,22,48,.12);

  transform: translateZ(0);
}

/* un poco de variación sutil para realismo */
body.page-consultoria .cfx-bars span:nth-child(2){
  background: linear-gradient(180deg, rgba(35,99,255,.88), rgba(35,99,255,.30));
}
body.page-consultoria .cfx-bars span:nth-child(4){
  background: linear-gradient(180deg, rgba(35,99,255,.95), rgba(35,99,255,.38));
}

/* responsive */
@media (max-width: 980px){
  body.page-consultoria .cfx-bars{
    height: 150px;
    gap: 12px;
    padding: 18px 18px 14px;
  }
  body.page-consultoria .cfx-bars span{
    border-radius: 18px;
    max-width: none;
  }
}
/* =========================================================
   CONSULTORÍA — Mock tabs: evitar salto cuando el título crece
========================================================= */

body.page-consultoria .cfx-mock-top{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
  gap: 12px !important;
}

/* Permite que el título haga wrap sin empujar tabs raro */
body.page-consultoria .cfx-mock-top > span{
  min-width: 0 !important;
  line-height: 1.15;
}

/* Tabs siempre en una sola línea */
body.page-consultoria .cfx-mock-tabs{
  display: inline-flex !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;     /* 👈 clave */
  white-space: nowrap !important;   /* 👈 clave */
  justify-self: end !important;
}

/* Tabs un poco más compactos para que quepan */
body.page-consultoria .cfx-mock-tabs span{
  padding: 10px 14px !important;
  font-size: 14px !important;
}
/* =========================================================
   CONSULTORÍA — Mock top: título a lo largo (1 línea) + tabs ordenados
========================================================= */

body.page-consultoria .cfx-mock-top{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

/* Título: 1 sola línea */
body.page-consultoria .cfx-mock-top > span{
  white-space: nowrap !important;     /* 👈 a lo largo */
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* por si en pantallas chicas no cabe */
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Tabs: siempre juntos en una línea */
body.page-consultoria .cfx-mock-tabs{
  display: inline-flex !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Compacta un poco los tabs para que quepan mejor */
body.page-consultoria .cfx-mock-tabs span{
  padding: 10px 14px !important;
  font-size: 14px !important;
}

/* En pantallas pequeñas: baja TODO el bloque de tabs (no uno por uno) */
@media (max-width: 680px){
  body.page-consultoria .cfx-mock-top{
    flex-wrap: wrap !important;
  }
  body.page-consultoria .cfx-mock-tabs{
    width: 100% !important;
    justify-content: flex-start !important;
  }
  body.page-consultoria .cfx-mock-top > span{
    flex: 0 0 100% !important;
    text-overflow: clip !important; /* ya que va en su propia fila */
  }
}
/* =========================================================
   CONSULTORÍA — ENTREGABLES: presencia “institucional” con rail lateral
   (sin sombras exageradas, sin look juguete)
========================================================= */

body.page-consultoria .cfx-deliver-card{
  position: relative;
  border-radius: 20px !important;
  padding: 18px 18px 18px 18px !important;

  /* blanco limpio con leve tono */
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.95)) !important;

  border: 1px solid rgba(11,31,58,.10) !important;
  box-shadow: 0 14px 40px rgba(7,22,48,.08) !important;

  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

/* Barra lateral (la “presencia”) */
body.page-consultoria .cfx-deliver-card::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, rgba(16,123,255,.95), rgba(6,34,75,.65));
  opacity: .95;
}

/* Fondo sutil tipo “grid” MUY leve (dashboard feeling) */
body.page-consultoria .cfx-deliver-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,31,58,.05) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(11,31,58,.04) 1px, transparent 1px) 0 0 / 34px 34px;
  opacity: .10;
  mask-image: radial-gradient(520px 220px at 18% 0%, #000 55%, transparent 78%);
}

/* Asegura contenido arriba del fondo */
body.page-consultoria .cfx-deliver-card > *{
  position: relative;
  z-index: 1;
}

/* “01–05” más pequeño y serio (badge) */
body.page-consultoria .cfx-deliver-card .cfx-ico{
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-weight: 900 !important;
  letter-spacing: .10em !important;

  background: rgba(16,123,255,.08) !important;
  border: 1px solid rgba(16,123,255,.16) !important;
  color: rgba(6,34,75,.88) !important;

  box-shadow: none !important; /* 👈 sin look “botón” */
}

/* Tipografía más ejecutiva */
body.page-consultoria .cfx-deliver-card h3{
  margin: 0 0 6px !important;
  color: rgba(11,31,58,.95) !important;
  letter-spacing: -0.01em;
}

body.page-consultoria .cfx-deliver-card p{
  margin: 0 !important;
  color: rgba(11,31,58,.70) !important;
  line-height: 1.55 !important;
}

/* Hover muy sutil (institucional) */
body.page-consultoria .cfx-deliver-card:hover{
  transform: translateY(-2px);
  border-color: rgba(16,123,255,.18) !important;
  box-shadow: 0 22px 70px rgba(7,22,48,.10) !important;
}
/* =========================================================
   CONSULTORÍA — Mock: separar tabla + compactar action-box
========================================================= */

/* 1) Más separación entre la mini-tabla y el plan de acciones */
body.page-consultoria .cfx-mini-table{
  margin-bottom: 14px !important;   /* súbelo/bájalo a gusto */
}

/* 2) Plan de acciones: menos padding vertical (más compacto) */
body.page-consultoria .cfx-action-box{
  padding: 12px 14px !important;    /* antes más alto */
  border-radius: 16px;              /* mantiene estilo */
}

/* 3) Título y lista más compactos */
body.page-consultoria .cfx-action-box h4{
  margin: 0 0 8px !important;
  line-height: 1.2;
}

body.page-consultoria .cfx-action-box ul{
  margin: 0 !important;
  padding-left: 18px !important;
}

body.page-consultoria .cfx-action-box li{
  margin: 6px 0 !important;         /* menos aire entre bullets */
  line-height: 1.35 !important;     /* menos alto */
}
/* =========================================================
   CONSULTORÍA — cfx-action-box: compactar SOLO interlineado (sin cambiar font-size)
========================================================= */

body.page-consultoria .cfx-action-box h4{
  line-height: 1.15 !important;
  margin-bottom: 6px !important;   /* menos aire debajo del título */
}

body.page-consultoria .cfx-action-box ul{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.page-consultoria .cfx-action-box li{
  line-height: 1.1 !important;    /* 👈 interlineado más pegado */
  margin: 1px 0 !important;        /* menos separación entre bullets */
}
/* =========================================================
   CONSULTORÍA — PROCESO: minimalista con textura (sin elementos extra)
========================================================= */

/* Fondo sutil en la sección (textura muy leve) */
body.page-consultoria #proceso.cfx-section{
  position: relative;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(16,123,255,.06), transparent 62%),
    radial-gradient(900px 520px at 86% 10%, rgba(0,210,255,.035), transparent 62%),
    linear-gradient(180deg, rgba(7,22,48,.018), rgba(255,255,255,0) 62%);
}

/* Grid: solo aire */
body.page-consultoria #proceso .cfx-process-grid{
  gap: 14px !important;
}

/* Cards: volumen suave (minimal) */
body.page-consultoria #proceso .cfx-step{
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(11,31,58,.10) !important;

  box-shadow:
    0 22px 70px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.75) inset !important;
}

/* Micro textura interna muy sutil (no se siente “decoración”) */
body.page-consultoria #proceso .cfx-step{
  position: relative;
  overflow: hidden;
}
body.page-consultoria #proceso .cfx-step::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px) 0 0/42px 42px,
    linear-gradient(rgba(11,31,58,.05) 1px, transparent 1px) 0 0/42px 42px;
  opacity: .06;
  mask-image: radial-gradient(520px 220px at 18% 0%, #000 55%, transparent 78%);
}
body.page-consultoria #proceso .cfx-step > *{
  position: relative;
  z-index: 1;
}
/* =========================================================
   CONSULTORÍA — PROCESO: que las cards resalten más (sin tocar cfx-step-n)
========================================================= */

body.page-consultoria #proceso .cfx-step{
  border-radius: 22px !important;

  /* blanco limpio con toque azul muy leve */
  background:
    radial-gradient(700px 220px at 18% 0%, rgba(16,123,255,.07), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.94)) !important;

  /* borde más claro pero presente */
  border: 1px solid rgba(16,123,255,.16) !important;

  /* más presencia (sin exagerar) */
  box-shadow:
    0 28px 90px rgba(7,22,48,.12),
    0 12px 26px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.85) inset !important;

  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Hover sutil para que se sienta “sección” (no afecta en móvil si no hay hover) */
body.page-consultoria #proceso .cfx-step:hover{
  transform: translateY(-3px);
  border-color: rgba(16,123,255,.22) !important;
  box-shadow:
    0 38px 120px rgba(7,22,48,.14),
    0 14px 30px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.88) inset !important;
}

/* Tipografía un poco más contrastada (sin cambiar tamaños) */
body.page-consultoria #proceso .cfx-step h3{
  color: rgba(11,31,58,.95) !important;
}
body.page-consultoria #proceso .cfx-step p{
  color: rgba(11,31,58,.72) !important;
}
/* =========================================================
   ¿TE PASA ESTO? — Quitar pseudo chip "MÁS FRECUENTE"
========================================================= */

body.page-te-pasa .tpx-map-card--featured::before,
body.page-te-pasa .tpx-map-card--featured::after,
body.page-te-pasa .tpx-map-card--featured .tpx-map-top::before,
body.page-te-pasa .tpx-map-card--featured .tpx-map-top::after{
  content: none !important;
  display: none !important;
}
/* =========================================================
   ¿TE PASA ESTO? — Alinear Ruta sugerida + botón (bajar 01 y 02 hasta 03)
========================================================= */

/* 1) Las 3 cards como columnas flex */
body.page-te-pasa .tpx-map-card{
  display: flex !important;
  flex-direction: column !important;
}

/* 2) Empuja el bloque de Ruta sugerida hacia abajo SOLO en 01 y 02 */
body.page-te-pasa .tpx-map-grid > .tpx-map-card:nth-child(1) .tpx-map-result,
body.page-te-pasa .tpx-map-grid > .tpx-map-card:nth-child(2) .tpx-map-result{
  margin-top: auto !important;   /* 👈 esto las baja al fondo */
}

/* 3) Botón debajo, consistente */
body.page-te-pasa .tpx-map-card > .btn{
  margin-top: 14px !important;
  width: 100%;
}
/* =========================================================
   ¿TE PASA ESTO? — Solo hover “brinco” en cards del mapa
========================================================= */

body.page-te-pasa .tpx-map-card{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.page-te-pasa .tpx-map-card:hover{
  transform: translateY(-3px);
}
/* =========================================================
   ¿TE PASA ESTO? — Casos típicos (tpx-cases): más presencia, minimal
========================================================= */

/* Fondo sutil para que la sección “se sienta” */
body.page-te-pasa .tpx-cases{
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(16,123,255,.06), transparent 62%),
    radial-gradient(900px 520px at 86% 10%, rgba(0,210,255,.03), transparent 62%);
  padding-top: 78px !important;
  padding-bottom: 78px !important;
}

/* Cards: un poquito más premium */
body.page-te-pasa .tpx-case{
  border: 1px solid rgba(16,123,255,.12) !important;
  box-shadow:
    0 22px 70px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.75) inset !important;
  border-radius: 22px !important;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Accent minimal (barra muy fina) */
body.page-te-pasa .tpx-case::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(16,123,255,.85), rgba(6,34,75,.55));
  opacity: .85;
}

/* Asegura que el accent no tape contenido */
body.page-te-pasa .tpx-case{
  position: relative;
}
body.page-te-pasa .tpx-case-left,
body.page-te-pasa .tpx-case-right{
  position: relative;
  z-index: 1;
}

/* Hover sutil (si ya tienes hover en otras cards, se siente consistente) */
body.page-te-pasa .tpx-case:hover{
  transform: translateY(-2px);
  border-color: rgba(16,123,255,.18) !important;
  box-shadow:
    0 30px 96px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.80) inset !important;
}
/* =========================================================
   ¿TE PASA ESTO? — Casos típicos: más color (sin recargar)
========================================================= */

/* Fondo más azul y con más presencia */
body.page-te-pasa .tpx-cases{
  background:
    radial-gradient(1000px 520px at 18% 0%, rgba(16,123,255,.10), transparent 62%),
    radial-gradient(900px 560px at 86% 10%, rgba(0,210,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(16,123,255,.035), rgba(255,255,255,0) 62%) !important;
}

/* Cards: un toque azul (siguen viéndose “blancas”) */
body.page-te-pasa .tpx-case{
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(16,123,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,255,.94)) !important;

  border-color: rgba(16,123,255,.16) !important;
}

/* Accent rail: más visible */
body.page-te-pasa .tpx-case::before{
  width: 5px !important;
  opacity: .95 !important;
  background: linear-gradient(180deg, rgba(16,123,255,.95), rgba(0,210,255,.45), rgba(6,34,75,.60)) !important;
}

/* Link de “Normalmente…” un poquito más azul para amarrar */
body.page-te-pasa .tpx-case-link a{
  color: rgba(16,123,255,.92) !important;
}
/* =========================================================
   ¿TE PASA ESTO? — PROCESO: misma estructura, identidad distinta (sutil)
========================================================= */

/* Fondo suave SOLO en esta sección (no banner, no panel grande) */
body.page-te-pasa .tpx-process{
  background:
    radial-gradient(1000px 520px at 18% 0%, rgba(16,123,255,.07), transparent 62%),
    radial-gradient(900px 560px at 86% 10%, rgba(0,210,255,.035), transparent 62%);
}

/* Cards: look más “compacto” y menos parecido al otro */
body.page-te-pasa .tpx-step{
  border-radius: 22px !important;
  border: 1px solid rgba(16,123,255,.12) !important;

  /* textura ligera en diagonal (firma visual distinta) */
  background:
    linear-gradient(135deg, rgba(16,123,255,.05), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.94)) !important;

  box-shadow:
    0 22px 70px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.75) inset !important;

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Mantén tus círculos iguales: NO tocamos tamaños, solo un halo MUY leve */
body.page-te-pasa .tpx-step-no{
  box-shadow: 0 14px 34px rgba(7,22,48,.10) !important;
}

/* Hover “brinquito” consistente */
body.page-te-pasa .tpx-step:hover{
  transform: translateY(-2px);
  border-color: rgba(16,123,255,.18) !important;
  box-shadow: 0 30px 96px rgba(7,22,48,.10) !important;
}
/* =========================================================
   ¿TE PASA ESTO? — PROCESO: panel azul que cubre TODO el contenido (tpx-head + cards)
   (solo dentro del container)
========================================================= */

body.page-te-pasa .tpx-process > .container{
  position: relative;
  padding: 28px 22px !important;
  border-radius: 28px !important;

  background:
    radial-gradient(1100px 560px at 18% 10%, rgba(16,123,255,.20), transparent 62%),
    radial-gradient(900px 620px at 86% 12%, rgba(0,210,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(6,34,75,.92), rgba(6,34,75,.74)) !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 30px 96px rgba(7,22,48,.18) !important;
  overflow: hidden;
}

/* Texto del encabezado dentro del panel */
body.page-te-pasa .tpx-process .tpx-head-kicker{
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

body.page-te-pasa .tpx-process .tpx-head h2{
  color: #fff !important;
}
body.page-te-pasa .tpx-process .tpx-head p{
  color: rgba(255,255,255,.78) !important;
}

/* El grid ya no necesita su propio panel */
body.page-te-pasa .tpx-process-grid{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Cards blancas sobre el panel azul */
body.page-te-pasa .tpx-process .tpx-step{
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.14) !important;
}
/* =========================================================
   ¿TE PASA ESTO? — Contraste de fondo para que el panel no “flote”
========================================================= */

/* 1) Fondo de la sección (muy sutil) */
body.page-te-pasa .tpx-process{
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(16,123,255,.06), transparent 62%),
    radial-gradient(900px 560px at 86% 10%, rgba(0,210,255,.03), transparent 62%),
    linear-gradient(180deg, rgba(7,22,48,.02), rgba(255,255,255,0) 62%) !important;
}

/* 2) Panel: sombra más “anclada” + borde interior */
body.page-te-pasa .tpx-process > .container{
  box-shadow:
    0 38px 120px rgba(7,22,48,.22),   /* más peso abajo */
    0 12px 26px rgba(7,22,48,.14),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -18px 40px rgba(0,0,0,.18) inset !important; /* profundidad */
  border-color: rgba(255,255,255,.16) !important;
}

/* 3) Opcional: “base” muy leve debajo para que se asiente */
body.page-te-pasa .tpx-process > .container::after{
  content:"";
  position:absolute;
  left: 26px;
  right: 26px;
  bottom: -10px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(7,22,48,.25), transparent 70%);
  opacity: .35;
  filter: blur(6px);
  pointer-events:none;
}
/* =========================================================
   ¿TE PASA ESTO? — PROCESO: contraste MÁS notorio + cards con MÁS presencia
========================================================= */

/* 1) Fondo de la sección: contraste más fuerte (sin pintar toda la página) */
body.page-te-pasa .tpx-process{
  background:
    radial-gradient(1200px 560px at 18% 0%, rgba(16,123,255,.10), transparent 60%),
    radial-gradient(1000px 620px at 86% 10%, rgba(0,210,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(7,22,48,.06), rgba(255,255,255,0) 58%) !important;
}

/* 2) Panel: sombra más “anclada” y más separación visual */
body.page-te-pasa .tpx-process > .container{
  box-shadow:
    0 44px 140px rgba(7,22,48,.26),
    0 18px 40px rgba(7,22,48,.18),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -20px 44px rgba(0,0,0,.22) inset !important;
}

/* 3) “Base” más notoria debajo (ancla visual) */
body.page-te-pasa .tpx-process > .container::after{
  opacity: .55 !important;
  filter: blur(8px) !important;
  background: radial-gradient(closest-side, rgba(7,22,48,.32), transparent 70%) !important;
}

/* =========================================================
   4) Cards (4 pasos): más presencia (sin tocar .tpx-step-no)
========================================================= */

body.page-te-pasa .tpx-process .tpx-step{
  border-radius: 22px !important;
  background:
    radial-gradient(700px 220px at 18% 0%, rgba(16,123,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.94)) !important;

  border: 1px solid rgba(16,123,255,.16) !important;

  box-shadow:
    0 28px 90px rgba(0,0,0,.16),
    0 12px 26px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.80) inset !important;
}

/* Hover un poquito más notorio (mantiene el “brinco”) */
body.page-te-pasa .tpx-process .tpx-step:hover{
  transform: translateY(-3px);
  box-shadow:
    0 38px 120px rgba(0,0,0,.18),
    0 14px 30px rgba(0,0,0,.12),
    0 1px 0 rgba(255,255,255,.85) inset !important;
}
/* =========================================================
   ¿TE PASA ESTO? — PROCESO: fondo con MÁS contraste + cards con textura
========================================================= */

/* 1) Fondo de la sección: más fuerte y notorio */
body.page-te-pasa .tpx-process{
  background:
    radial-gradient(1200px 620px at 18% 0%, rgba(16,123,255,.14), transparent 58%),
    radial-gradient(1000px 680px at 86% 10%, rgba(0,210,255,.09), transparent 62%),
    linear-gradient(180deg, rgba(7,22,48,.10), rgba(255,255,255,0) 54%) !important;
}

/* Panel: sombra más pesada + “base” más marcada */
body.page-te-pasa .tpx-process > .container{
  box-shadow:
    0 54px 170px rgba(7,22,48,.30),
    0 22px 52px rgba(7,22,48,.20),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -22px 48px rgba(0,0,0,.24) inset !important;
}

body.page-te-pasa .tpx-process > .container::after{
  opacity: .75 !important;
  filter: blur(10px) !important;
  background: radial-gradient(closest-side, rgba(7,22,48,.42), transparent 70%) !important;
}

/* =========================================================
   2) Cards: más presencia + textura (sin tocar los círculos)
========================================================= */

body.page-te-pasa .tpx-process .tpx-step{
  position: relative;
  overflow: hidden;

  border-radius: 22px !important;
  background:
    radial-gradient(700px 240px at 18% 0%, rgba(16,123,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.985), rgba(247,250,255,.94)) !important;

  border: 1px solid rgba(16,123,255,.18) !important;

  box-shadow:
    0 32px 100px rgba(0,0,0,.16),
    0 14px 30px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.82) inset !important;
}

/* Textura sutil tipo “grid” + brillo suave (dashboard feel) */
body.page-te-pasa .tpx-process .tpx-step::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px) 0 0/36px 36px,
    linear-gradient(rgba(11,31,58,.05) 1px, transparent 1px) 0 0/36px 36px,
    radial-gradient(520px 220px at 18% 0%, rgba(16,123,255,.10), transparent 60%);

  opacity: .22;
  mask-image: radial-gradient(520px 220px at 18% 0%, #000 55%, transparent 78%);
}

/* Asegura que el contenido quede arriba de la textura */
body.page-te-pasa .tpx-process .tpx-step > *{
  position: relative;
  z-index: 1;
}

/* Hover: mismo brinco, un poco más premium */
body.page-te-pasa .tpx-process .tpx-step:hover{
  transform: translateY(-3px);
  box-shadow:
    0 44px 140px rgba(0,0,0,.18),
    0 16px 34px rgba(0,0,0,.12),
    0 1px 0 rgba(255,255,255,.86) inset !important;
}
/* =========================================================
   ¿TE PASA ESTO? — PROCESO: cards con efecto GLASS (más notorio)
========================================================= */

body.page-te-pasa .tpx-process .tpx-step{
  /* glass base */
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(255,255,255,.22) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* más “cristal” */
  box-shadow:
    0 34px 110px rgba(0,0,0,.16),
    0 14px 30px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.65) inset,
    0 -18px 36px rgba(16,123,255,.08) inset !important;

  position: relative;
  overflow: hidden;
}

/* brillo especular (gota/glass) */
body.page-te-pasa .tpx-process .tpx-step::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(520px 240px at 18% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(520px 240px at 90% 20%, rgba(16,123,255,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 55%);

  opacity: .55; /* más notorio */
}

/* Asegura que el contenido quede encima del glass */
body.page-te-pasa .tpx-process .tpx-step > *{
  position: relative;
  z-index: 1;
}
/* =========================================================
   BENEFICIOS — HERO: invertir orientación (panel a la izquierda, texto a la derecha)
========================================================= */

body.page-beneficios .bfx-hero-grid{
  direction: rtl;                 /* invierte el orden visual */
}

body.page-beneficios .bfx-hero-grid > *{
  direction: ltr;                 /* mantiene el texto normal */
}
/* =========================================================
   BENEFICIOS — HERO: invertir lados SIN que se apile (flex row-reverse)
========================================================= */

@media (min-width: 900px){
  body.page-beneficios .bfx-hero-grid{
    display: flex !important;
    flex-direction: row-reverse !important; /* 👈 invierte: panel izq, texto der */
    align-items: center !important;
    gap: 22px !important;
  }

  body.page-beneficios .bfx-copy{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  body.page-beneficios .bfx-hero-panel{
    flex: 0 0 44% !important;      /* ajusta si quieres: 40–48% */
    min-width: 380px !important;   /* evita que se comprima raro */
  }
}
/* =========================================================
   BENEFICIOS — HERO: volver a orientación original (texto izq, panel der)
========================================================= */

@media (min-width: 900px){
  body.page-beneficios .bfx-hero-grid{
    flex-direction: row !important;   /* 👈 vuelve a lo normal */
  }
}
/* =========================================================
   SETUP — SOLO PARTES AZULES DEL BLOQUE ANTERIOR
   (recorte literal de los cambios azules)
========================================================= */

body.svc-setup{
  --st-blue:#295dc9;
  --st-blue-soft:#eaf2ff;
  --st-sky:#f1f6fb;
}

/* Base */
body.svc-setup{
  background: #fbfcfe;
  color: #10233b;
}

/* HERO: solo parte azul del fondo original */
body.svc-setup .svc-hero--setup{
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(41,93,201,.10), transparent 58%),
    linear-gradient(135deg, #f7efe3 0%, #eef5fb 48%, #f7fafc 100%);
}

/* Decor hero: solo orbes azules */
body.svc-setup .svc-hero-decor .orb{
  filter: blur(3px);
  opacity: .85;
}

body.svc-setup .svc-hero-decor .orb-a{
  background: radial-gradient(circle at 30% 30%, rgba(41,93,201,.26), rgba(41,93,201,.06) 62%, transparent 72%);
}

body.svc-setup .svc-hero-decor .orb-c{
  background: radial-gradient(circle at 30% 30%, rgba(27,64,110,.12), rgba(27,64,110,.04) 62%, transparent 72%);
}

/* Iconos hero */
body.svc-setup .ko-ico{
  background: linear-gradient(145deg, #16304f, #295dc9);
  box-shadow: 0 10px 22px rgba(22,48,79,.18);
}

body.svc-setup .ko-svg{
  stroke: #fff;
}

/* Chip azul destacado */
body.svc-setup .svc-chip:nth-child(2){
  background: linear-gradient(145deg, #173252, #21446d);
  color: rgba(255,255,255,.92);
  border-color: rgba(23,50,82,.18);
}

body.svc-setup .svc-chip:nth-child(2) b{
  color: #fff;
}

/* Sheet pill */
body.svc-setup .sheet-pill{
  background: rgba(41,93,201,.08);
  color: #2150b6;
  border: 1px solid rgba(41,93,201,.10);
}

/* Gráfica azul */
body.svc-setup .sheet-bar{
  background: linear-gradient(180deg, #2a61d1, rgba(41,93,201,.55));
}

/* Fondo dark azul de "Lo que cambia" */
body.svc-setup .svc-section.bg-sheen{
  background:
    radial-gradient(840px 380px at 100% 0%, rgba(41,93,201,.12), transparent 54%),
    linear-gradient(135deg, #132944 0%, #1a3556 46%, #23456e 100%);
}

body.svc-setup .bg-sheen .hc-change-title,
body.svc-setup .bg-sheen .hc-change-lead{
  color: #fff;
}

body.svc-setup .bg-sheen .svc-kicker{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
}

/* Microband azul */
body.svc-setup .svc-microband{
  background: linear-gradient(145deg, #16304f, #22446d);
  border: 1px solid rgba(22,48,79,.12);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 44px rgba(16,35,59,.08);
}

body.svc-setup .svc-microband span{
  color: rgba(255,255,255,.78);
}

body.svc-setup .svc-microband .btn-secondary{
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
}

/* Sección decisiones: cards azuladas que sí había puesto */
body.svc-setup .svc-decision:nth-child(1){
  background: linear-gradient(180deg, #ffffff, #f4f8fc);
}

body.svc-setup .svc-decision:nth-child(3){
  background: linear-gradient(180deg, #f2f7fd, #ffffff);
}

/* Panels azules */
body.svc-setup .svc-two .svc-panel:first-child,
body.svc-setup .svc-split .svc-panel:first-child{
  background: linear-gradient(180deg, #ffffff, #f3f7fb);
}

/* Steps azules */
body.svc-setup .svc-step:nth-child(1){
  background: linear-gradient(180deg, #ffffff, #f3f8fd);
}

body.svc-setup .svc-step:nth-child(3){
  background: linear-gradient(180deg, #ffffff, #f7f9fc);
}

body.svc-setup .svc-step .n{
  background: linear-gradient(145deg, #173252, #295dc9);
  color: #fff;
  box-shadow: 0 10px 24px rgba(23,50,82,.16);
}

/* Cards de "Lo que cambia" que sí eran azules */
body.svc-setup .hc-change-card.is-before{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,249,253,.96));
}

body.svc-setup .hc-change-card.is-result{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(236,243,251,.96));
}

body.svc-setup .hc-quote{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}

body.svc-setup .hc-quote-mark,
body.svc-setup .hc-quote-text{
  color: #fff;
}

body.svc-setup .hc-quote-sub{
  color: rgba(255,255,255,.68);
}

/* Deliverables azul */
body.svc-setup .svc-deliver-item:nth-child(1){
  background: linear-gradient(180deg, #f3f8ff, #ffffff);
}

body.svc-setup .svc-thumb{
  background: linear-gradient(180deg, #f4f8fc, #eaf1f7);
  border: 1px solid rgba(16,35,59,.08);
}

body.svc-setup .svc-thumb .row{
  background: linear-gradient(90deg, #2a61d1, rgba(41,93,201,.34));
}

/* Mini CTA azul */
body.svc-setup .svc-mini-cta{
  background: linear-gradient(145deg, #16304f, #22446d);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(22,48,79,.12);
  box-shadow: 0 18px 44px rgba(16,35,59,.08);
}

body.svc-setup .svc-mini-cta p{
  color: rgba(255,255,255,.82);
}

/* FAQ azul */
body.svc-setup .svc-acc:nth-child(odd){
  background: linear-gradient(180deg, #ffffff, #f5f9fc);
}

/* Form focus azul */
body.svc-setup .hc-field input:focus,
body.svc-setup .hc-field select:focus,
body.svc-setup .hc-field textarea:focus{
  border-color: rgba(41,93,201,.40);
  box-shadow: 0 0 0 4px rgba(41,93,201,.10);
}

/* Botón submit azul */
body.svc-setup .hc-submit{
  background: linear-gradient(145deg, #16304f, #295dc9);
  box-shadow: 0 14px 28px rgba(16,35,59,.14);
}

/* Responsive hero: solo parte azul original */
@media (max-width: 1100px){
  body.svc-setup .svc-hero--setup{
    background:
      radial-gradient(700px 300px at 10% 0%, rgba(41,93,201,.10), transparent 58%),
      linear-gradient(135deg, #f7efe3 0%, #eef5fb 48%, #f7fafc 100%);
  }
}
/* =========================================================
   SETUP HERO — PULIDO PREMIUM
   Solo afecta la primera sección de setup
========================================================= */

body.svc-setup .svc-hero--setup{
  position: relative;
  overflow: hidden;
  padding-top: 72px;
  padding-bottom: 96px;
  background:
    radial-gradient(900px 440px at 8% 0%, rgba(40, 92, 201, .10), transparent 58%),
    radial-gradient(760px 360px at 95% 10%, rgba(64, 128, 255, .09), transparent 56%),
    linear-gradient(180deg, #f7f9fc 0%, #f4f7fb 46%, #eef3f8 100%);
  border-bottom: 1px solid rgba(16,35,59,.06);
}

body.svc-setup .svc-hero--setup::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, transparent 0 58%, rgba(255,255,255,.28) 58% 63%, transparent 63%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
}

body.svc-setup .svc-hero-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  gap: 34px;
  align-items: center;
}

/* decoración de fondo */
body.svc-setup .svc-hero-decor .orb{
  filter: blur(6px);
  opacity: .95;
}

body.svc-setup .svc-hero-decor .orb-a{
  background: radial-gradient(circle at 30% 30%, rgba(41,93,201,.18), rgba(41,93,201,.06) 60%, transparent 74%);
}
body.svc-setup .svc-hero-decor .orb-b{
  background: radial-gradient(circle at 30% 30%, rgba(125,168,255,.16), rgba(125,168,255,.04) 60%, transparent 74%);
}
body.svc-setup .svc-hero-decor .orb-c{
  background: radial-gradient(circle at 30% 30%, rgba(21,47,88,.10), rgba(21,47,88,.03) 60%, transparent 74%);
}

body.svc-setup .svc-hero-decor .grid-sheen{
  opacity: .18;
  mix-blend-mode: multiply;
}

body.svc-setup .svc-ticker{
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(16,35,59,.08);
  color: rgba(16,35,59,.68);
  box-shadow: 0 14px 28px rgba(16,35,59,.06);
  backdrop-filter: blur(10px);
}

/* izquierda */
body.svc-setup .svc-kicker{
  display:inline-flex;
  align-items:center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(41,93,201,.12);
  color: #2a59bf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  box-shadow: 0 10px 22px rgba(16,35,59,.04);
  backdrop-filter: blur(8px);
}

body.svc-setup .svc-title{
  color: #0b1f3a;
  letter-spacing: -.055em;
  line-height: .96;
  text-wrap: balance;
}

body.svc-setup .svc-hero--setup .svc-title{
  margin-top: 18px;
  margin-bottom: 10px;
  font-size: clamp(52px, 6vw, 84px);
}

body.svc-setup .svc-lead{
  max-width: 15ch;
  color: rgba(11,31,58,.74);
  font-size: 18px;
  line-height: 1.58;
}

body.svc-setup .svc-hero--setup .svc-lead{
  max-width: 680px;
}

/* tarjetas de highlights */
body.svc-setup .svc-keyout{
  margin-top: 26px;
  display: grid;
  gap: 12px;
}

body.svc-setup .svc-keyout .ko{
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,249,253,.92));
  border: 1px solid rgba(16,35,59,.07);
  box-shadow:
    0 16px 34px rgba(16,35,59,.06),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}

body.svc-setup .svc-keyout .ko::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(41,93,201,.035), transparent 32%);
}

body.svc-setup .ko-ico{
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display:grid;
  place-items:center;
  background: linear-gradient(145deg, #173252, #285cc7);
  box-shadow:
    0 12px 24px rgba(23,50,82,.18),
    inset 0 1px 0 rgba(255,255,255,.20);
}

body.svc-setup .ko-svg{
  width: 22px;
  height: 22px;
  stroke: #fff;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.svc-setup .ko-txt b{
  display:block;
  margin-bottom: 2px;
  color:#10233b;
  font-size: 16px;
  line-height: 1.25;
}

body.svc-setup .ko-txt span{
  color: rgba(16,35,59,.66);
  font-size: 15px;
  line-height: 1.4;
}

/* chips */
body.svc-setup .svc-chips{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

body.svc-setup .svc-chip{
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(16,35,59,.08);
  color: rgba(16,35,59,.74);
  box-shadow: 0 10px 22px rgba(16,35,59,.05);
  backdrop-filter: blur(8px);
}

body.svc-setup .svc-chip b{
  color:#0b1f3a;
}

body.svc-setup .svc-chip:nth-child(2){
  background: linear-gradient(145deg, #173252, #21466f);
  border-color: rgba(23,50,82,.12);
  color: rgba(255,255,255,.88);
  box-shadow: 0 14px 28px rgba(23,50,82,.16);
}
body.svc-setup .svc-chip:nth-child(2) b{
  color:#fff;
}

/* botones */
body.svc-setup .svc-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 18px;
}

body.svc-setup .svc-actions .btn{
  border-radius: 999px;
  min-height: 50px;
  padding: 0 24px;
  font-weight: 700;
  box-shadow: 0 14px 28px rgba(16,35,59,.08);
}

body.svc-setup .svc-actions .btn-primary{
  background: linear-gradient(145deg, #173252, #295dc9);
  border: 1px solid rgba(23,50,82,.10);
  color:#fff;
}

body.svc-setup .svc-actions .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(16,35,59,.12);
}

body.svc-setup .svc-actions .btn-secondary{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(16,35,59,.08);
  color:#16304f;
  backdrop-filter: blur(8px);
}

body.svc-setup .svc-actions .btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(16,35,59,.10);
}

/* texto pequeño debajo de botones */
body.svc-setup .svc-actions + p{
  color: rgba(11,31,58,.62) !important;
  font-size: 13.5px;
}

/* =========================================================
   PANEL DERECHO
   Solo tono / color / sombra. Sin tocar estructura.
========================================================= */

body.svc-setup .svc-visual{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,250,253,.96));
  border: 1px solid rgba(16,35,59,.08);
  box-shadow:
    0 28px 80px rgba(16,35,59,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
  border-radius: 30px;
}

body.svc-setup .svc-visual-top{
  margin-bottom: 14px;
}

body.svc-setup .svc-badge{
  background: rgba(41,93,201,.07);
  border: 1px solid rgba(41,93,201,.10);
  color: #2557bf;
  box-shadow: 0 8px 18px rgba(16,35,59,.04);
}

body.svc-setup .sheet{
  background: linear-gradient(180deg, #ffffff, #f7f9fc);
  border: 1px solid rgba(16,35,59,.08);
  box-shadow: 0 18px 44px rgba(16,35,59,.06);
}

body.svc-setup .sheet-head{
  background: linear-gradient(180deg, #fcfdff, #f5f8fc);
  border-bottom: 1px solid rgba(16,35,59,.08);
}

body.svc-setup .sheet-pill{
  background: rgba(41,93,201,.08);
  border: 1px solid rgba(41,93,201,.10);
  color: #2557bf;
}

body.svc-setup .sheet-tabs{
  background: #f8fafc;
  border-bottom: 1px solid rgba(16,35,59,.08);
}

body.svc-setup .sheet-tab{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(16,35,59,.06);
  color: rgba(16,35,59,.62);
}

body.svc-setup .sheet-tab.is-active{
  background: rgba(41,93,201,.08);
  border-color: rgba(41,93,201,.12);
  color: #2557bf;
}

body.svc-setup .sheet-kpi{
  background: linear-gradient(180deg, #ffffff, #f7f9fc);
  border: 1px solid rgba(16,35,59,.08);
}

body.svc-setup .sheet-panel{
  background: linear-gradient(180deg, #fcfdff, #f5f8fc);
  border: 1px solid rgba(16,35,59,.08);
}

body.svc-setup .sheet-bar{
  background: linear-gradient(180deg, #2a61d1, rgba(68,116,226,.62));
}

body.svc-setup .sheet-line.b{
  background: rgba(41,93,201,.22);
}

body.svc-setup .sheet-file{
  background: linear-gradient(180deg, #ffffff, #f9fbfd);
  border: 1px solid rgba(16,35,59,.08);
}

/* wave */
body.svc-setup .svc-hero-wave path{
  fill: #f8fafc;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px){
  body.svc-setup .svc-hero-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.svc-setup .svc-hero--setup .svc-title{
    font-size: clamp(44px, 8vw, 72px);
  }
}

@media (max-width: 720px){
  body.svc-setup .svc-hero--setup{
    padding-top: 56px;
    padding-bottom: 72px;
  }

  body.svc-setup .svc-keyout .ko{
    grid-template-columns: 48px 1fr;
    padding: 13px 14px;
  }

  body.svc-setup .svc-actions .btn{
    width: 100%;
    justify-content: center;
  }
}
/* =========================================================
   SETUP HERO — CORRECCIÓN FINA
   - no tocar tamaño del panel derecho
   - solo acomodar vertical izquierdo
   - quitar ola blanca
========================================================= */

/* quitar ola */
body.svc-setup .svc-hero-wave{
  display: none;
}

/* hero un poco más limpio abajo */
body.svc-setup .svc-hero--setup{
  padding-bottom: 64px;
}

/* IMPORTANTE:
   volver a dejar el grid sin estirar el panel derecho */
body.svc-setup .svc-hero-grid{
  align-items: center;
}

/* revertir cualquier estiramiento previo del panel derecho */
body.svc-setup .svc-visual{
  height: auto !important;
  display: block !important;
}

body.svc-setup .sheet{
  flex: initial !important;
}

/* no tocar ancho horizontal del bloque izquierdo,
   solo darle respiración vertical */
body.svc-setup .svc-hero-grid > div:first-child{
  display: block !important;
  height: auto !important;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* asegurar que el kicker no se estire */
body.svc-setup .svc-kicker{
  display: inline-flex;
  width: auto;
  max-width: max-content;
}

/* acomodar mejor la secuencia vertical del lado izquierdo */
body.svc-setup .svc-hero--setup .svc-title{
  margin-top: 18px;
  margin-bottom: 10px;
}

body.svc-setup .svc-hero--setup .svc-lead{
  margin-bottom: 0;
}

body.svc-setup .svc-keyout{
  margin-top: 22px;
}

body.svc-setup .svc-keyout .ko{
  margin-bottom: 0;
}

body.svc-setup .svc-chips{
  margin-top: 16px;
}

body.svc-setup .svc-actions{
  margin-top: 18px;
  padding-top: 0 !important;
}

/* si quitaste el texto de formatos, evitamos huecos raros */
body.svc-setup .svc-actions + p{
  display: none !important;
}

/* un poco menos de aire en mobile */
@media (max-width: 1100px){
  body.svc-setup .svc-hero--setup{
    padding-bottom: 56px;
  }

  body.svc-setup .svc-hero-grid{
    align-items: start;
  }

  body.svc-setup .svc-hero-grid > div:first-child{
    padding-top: 0;
    padding-bottom: 0;
  }
}
/* =========================================================
   SETUP HERO — BAJAR SOLO LA COLUMNA IZQUIERDA
   No toca el panel derecho / Dashboard
========================================================= */

/* mantener sin ola */
body.svc-setup .svc-hero-wave{
  display: none;
}

/* un poco menos de aire abajo general */
body.svc-setup .svc-hero--setup{
  padding-bottom: 58px;
}

/* NO tocar el dashboard */
body.svc-setup .svc-visual,
body.svc-setup .sheet{
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  display: block !important;
}

/* SOLO la columna izquierda */
body.svc-setup .svc-hero-grid > div:first-child{
  min-height: 850px;          /* ajusta la altura visual del lado izquierdo */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* que el chip no se estire horizontalmente */
body.svc-setup .svc-kicker{
  align-self: flex-start;
  width: auto !important;
  max-width: max-content;
}

/* orden vertical más limpio */
body.svc-setup .svc-hero--setup .svc-title{
  margin-top: 18px;
  margin-bottom: 10px;
}

body.svc-setup .svc-hero--setup .svc-lead{
  margin-bottom: 0;
}

body.svc-setup .svc-keyout{
  margin-top: 22px;
}

body.svc-setup .svc-chips{
  margin-top: 16px;
}

/* ESTO es lo importante:
   empuja los botones hacia abajo dentro de la columna izquierda */
body.svc-setup .svc-actions{
  margin-top: auto;
  padding-top: 22px;
}

/* por si quedara algún hueco del texto que eliminaste */
body.svc-setup .svc-actions + p{
  display: none !important;
}

/* responsive: quitar esta lógica en tablet/mobile */
@media (max-width: 1100px){
  body.svc-setup .svc-hero-grid > div:first-child{
    min-height: auto;
    display: block;
  }

  body.svc-setup .svc-actions{
    margin-top: 18px;
    padding-top: 0;
  }
}
/* =========================================================
   SUBIR EL TICKER / CHIP LARGO DE ABAJO
========================================================= */

body.svc-setup .svc-ticker{
  bottom: 60px !important;
}
/* Reducir espacio superior del hero de Setup */
body.svc-setup .svc-hero--setup{
  padding-top: 30px !important;
}
body.svc-setup .svc-hero--setup{
  padding-bottom: 20px !important;
}
/* =========================================================
   SETUP HERO — BACKGROUND MÁS PREMIUM / MÁS OSCURO
========================================================= */

body.svc-setup .svc-hero--setup{
  background:

  radial-gradient(900px 420px at 10% 0%, rgba(88, 132, 255, .16), transparent 58%),
  radial-gradient(760px 360px at 92% 12%, rgba(80, 132, 255, .11), transparent 56%),
  linear-gradient(135deg, #c8d4e4 0%, #b8c7da 24%, #9fb3cb 52%, #8ea5c1 78%, #849cba 100%) !important;
  border-bottom: 1px solid rgba(16,35,59,.10);
}

body.svc-setup .svc-hero--setup::before{
  background:
    linear-gradient(135deg, transparent 0 56%, rgba(255,255,255,.10) 56% 61%, transparent 61%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)) !important;
}

/* decoración */
body.svc-setup .svc-hero-decor .orb-a{
  background: radial-gradient(circle at 30% 30%, rgba(56, 103, 214, .22), rgba(56, 103, 214, .06) 60%, transparent 74%);
}

body.svc-setup .svc-hero-decor .orb-b{
  background: radial-gradient(circle at 30% 30%, rgba(119, 163, 255, .16), rgba(119, 163, 255, .05) 60%, transparent 74%);
}

body.svc-setup .svc-hero-decor .orb-c{
  background: radial-gradient(circle at 30% 30%, rgba(17, 39, 72, .12), rgba(17, 39, 72, .04) 60%, transparent 74%);
}

/* para que el contenido destaque más sobre fondo oscuro */
body.svc-setup .svc-hero--setup .svc-title{
  color: #071b34;
}

body.svc-setup .svc-hero--setup .svc-lead{
  color: rgba(7,27,52,.78);
}

body.svc-setup .svc-kicker{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(7,27,52,.10);
  color: rgba(20,49,94,.84);
}

body.svc-setup .svc-ticker{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(7,27,52,.10);
  color: rgba(7,27,52,.68);
}

body.svc-setup .svc-hero-wave path{
  fill: #eef3f8;
}
/* =========================================================
   FIX — evitar que el hero afecte títulos/subtítulos del resto
========================================================= */

/* Reset general para toda la página Setup */
body.svc-setup .svc-title,
body.svc-setup .svc-lead{
  max-width: none;
  width: auto;
  text-wrap: normal;
}

/* Solo el hero conserva su tratamiento especial */
body.svc-setup .svc-hero--setup .svc-title{
  max-width: 9ch;
  text-wrap: balance;
}

body.svc-setup .svc-hero--setup .svc-lead{
  max-width: 680px;
}

/* Subtítulos de secciones internas: que respiren normal */
body.svc-setup .svc-head .svc-lead{
  max-width: 72ch;
  width: auto;
  text-wrap: pretty;
}

/* Por si algún h2 o título interno tomó restricciones raras */
body.svc-setup .svc-head .svc-title,
body.svc-setup .svc-section h2{
  max-width: none;
  width: auto;
  text-wrap: pretty;
}
/* =========================================================
   SETUP — SECCIÓN "QUÉ DECIDES"
   - quita emojis
   - pone numeración seria
   - cards más premium/minimalistas
   - "Resultado" en blanco
========================================================= */

body.svc-setup #que-decides .svc-decide{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

body.svc-setup #que-decides .svc-decision{
  position: relative;
  padding: 24px 24px 22px;
  border-radius: 24px;
  border: 1px solid rgba(16,35,59,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,252,.96));
  box-shadow:
    0 18px 44px rgba(16,35,59,.06),
    inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.svc-setup #que-decides .svc-decision:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 54px rgba(16,35,59,.09),
    inset 0 1px 0 rgba(255,255,255,.72);
  border-color: rgba(41,93,201,.14);
}

/* variación sutil por card */
body.svc-setup #que-decides .svc-decision:nth-child(1){
  background: linear-gradient(180deg, #ffffff, #f4f8fc);
}
body.svc-setup #que-decides .svc-decision:nth-child(2){
  background: linear-gradient(180deg, #f7faff, #ffffff);
}
body.svc-setup #que-decides .svc-decision:nth-child(3){
  background: linear-gradient(180deg, #f4f8fd, #ffffff);
}

/* línea superior discreta */
body.svc-setup #que-decides .svc-decision::before{
  content:"";
  position:absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(41,93,201,.90), rgba(41,93,201,.18));
}

/* encabezado interno */
body.svc-setup #que-decides .svc-decision-top{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

body.svc-setup #que-decides .svc-decision h3{
  margin: 0;
  color: #10233b;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

body.svc-setup #que-decides .svc-decision p{
  margin: 0 0 14px;
  color: rgba(16,35,59,.72);
  line-height: 1.55;
  font-size: 15px;
}

/* quitar emojis y reemplazarlos por numeración */
body.svc-setup #que-decides .svc-ico{
  position: relative;
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 0;              /* oculta el emoji */
  color: transparent;
  background:
    linear-gradient(180deg, rgba(41,93,201,.08), rgba(41,93,201,.04));
  border: 1px solid rgba(41,93,201,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 20px rgba(16,35,59,.05);
}

body.svc-setup #que-decides .svc-decision:nth-child(1) .svc-ico::before{
  content: "01";
}
body.svc-setup #que-decides .svc-decision:nth-child(2) .svc-ico::before{
  content: "02";
}
body.svc-setup #que-decides .svc-decision:nth-child(3) .svc-ico::before{
  content: "03";
}

body.svc-setup #que-decides .svc-ico::before{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #2557bf;
}

/* listas más sobrias */
body.svc-setup #que-decides .svc-decision ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

body.svc-setup #que-decides .svc-decision li{
  position: relative;
  padding-left: 18px;
  color: rgba(16,35,59,.74);
  line-height: 1.5;
}

body.svc-setup #que-decides .svc-decision li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(41,93,201,.72);
}

/* panel inferior */
body.svc-setup #que-decides .svc-microband{
  margin-top: 22px;
  border-radius: 24px;
  background: linear-gradient(145deg, #16304f, #22446d);
  border: 1px solid rgba(22,48,79,.12);
  box-shadow: 0 18px 44px rgba(16,35,59,.10);
}

body.svc-setup #que-decides .svc-microband b{
  color: #ffffff !important;
}

body.svc-setup #que-decides .svc-microband span{
  color: rgba(255,255,255,.88);
}

body.svc-setup #que-decides .svc-microband .btn-secondary{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: #ffffff;
  box-shadow: none;
}

body.svc-setup #que-decides .svc-microband .btn-secondary:hover{
  background: rgba(255,255,255,.16);
}

/* responsive */
@media (max-width: 1100px){
  body.svc-setup #que-decides .svc-decide{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — números más pequeños + contraste más fuerte
========================================================= */

body.svc-setup #que-decides .svc-ico{
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,42,74,.12), rgba(20,42,74,.06));
  border: 1px solid rgba(20,42,74,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 18px rgba(16,35,59,.08);
}

body.svc-setup #que-decides .svc-ico::before{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #0f2f63;
}

/* cards con más contraste */
body.svc-setup #que-decides .svc-decision{
  background: linear-gradient(180deg, #f6f9fd, #eaf0f7);
  border: 1px solid rgba(16,35,59,.12);
  box-shadow:
    0 18px 44px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-setup #que-decides .svc-decision:nth-child(1){
  background: linear-gradient(180deg, #f8fbff, #e9f0f8);
}
body.svc-setup #que-decides .svc-decision:nth-child(2){
  background: linear-gradient(180deg, #f4f8fd, #e5edf7);
}
body.svc-setup #que-decides .svc-decision:nth-child(3){
  background: linear-gradient(180deg, #f7fbff, #e7eef7);
}

body.svc-setup #que-decides .svc-decision::before{
  height: 4px;
  background: linear-gradient(90deg, #173252, #295dc9);
}

body.svc-setup #que-decides .svc-decision h3{
  color: #0b1f3a;
}

body.svc-setup #que-decides .svc-decision p,
body.svc-setup #que-decides .svc-decision li{
  color: rgba(11,31,58,.78);
}

body.svc-setup #que-decides .svc-decision li::before{
  background: #295dc9;
}
/* Número más grande dentro del cuadro */
body.svc-setup #que-decides .svc-ico::before{
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
/* Cuadro más pequeño y número centrado */
body.svc-setup #que-decides .svc-ico{
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

body.svc-setup #que-decides .svc-ico::before{
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  display: block;
  text-align: center;
}
/* =========================================================
   SETUP — SECCIÓN ENTREGABLES / INFO MÍNIMA
   Nueva personalidad visual, sin tocar HTML
========================================================= */

body.svc-setup #entregables{
  position: relative;
  overflow: hidden;
  padding-top: 86px;
  padding-bottom: 92px;
  background:
    radial-gradient(780px 320px at 8% 0%, rgba(41,93,201,.08), transparent 58%),
    radial-gradient(720px 320px at 96% 0%, rgba(88,132,255,.06), transparent 56%),
    linear-gradient(180deg, #eef4fa 0%, #f7fafc 52%, #fbfcfe 100%);
}

body.svc-setup #entregables::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(16,35,59,.04) 49.8% 50.2%, transparent 50.2% 100%);
  opacity:.35;
}

body.svc-setup #entregables h2{
  margin: 0 0 30px;
  color: #0b1f3a;
  font-size: clamp(36px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.05em;
  position: relative;
}

body.svc-setup #entregables h2::after{
  content:"";
  display:block;
  width: 72px;
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #173252, #2a61d1);
  opacity: .92;
}

body.svc-setup #entregables .svc-two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* base común de cards */
body.svc-setup #entregables .svc-panel{
  position: relative;
  padding: 30px 28px 28px;
  border-radius: 28px;
  border: 1px solid rgba(16,35,59,.08);
  box-shadow: 0 22px 54px rgba(16,35,59,.08);
  overflow: hidden;
}

/* -------------------------
   PANEL IZQUIERDO
   "Entregable ejecutivo"
------------------------- */
body.svc-setup #entregables .svc-panel:first-child{
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(77,123,232,.16), transparent 56%),
    linear-gradient(145deg, #10233b 0%, #173252 46%, #21466f 100%);
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 30px 70px rgba(16,35,59,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

body.svc-setup #entregables .svc-panel:first-child::before{
  content:"ENTREGABLE EJECUTIVO";
  position: absolute;
  top: 20px;
  right: 22px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

body.svc-setup #entregables .svc-panel:first-child h3{
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

body.svc-setup #entregables .svc-panel:first-child .svc-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

body.svc-setup #entregables .svc-panel:first-child .svc-list li{
  position: relative;
  padding-left: 34px;
  color: rgba(255,255,255,.86);
  line-height: 1.55;
  font-size: 16px;
}

body.svc-setup #entregables .svc-panel:first-child .svc-list li::before{
  content:"";
  position:absolute;
  left:0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

body.svc-setup #entregables .svc-panel:first-child .svc-list li::after{
  content:"";
  position:absolute;
  left: 7px;
  top: 12px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #9fc0ff;
  border-bottom: 2px solid #9fc0ff;
  transform: rotate(-45deg);
}

body.svc-setup #entregables .svc-panel:first-child .svc-list li strong,
body.svc-setup #entregables .svc-panel:first-child .svc-list li b{
  color: #fff;
}

/* -------------------------
   PANEL DERECHO
   "Brief de inicio"
------------------------- */
body.svc-setup #entregables .svc-panel:last-child{
  background:
    radial-gradient(460px 200px at 100% 0%, rgba(41,93,201,.08), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,252,.98));
  border: 1px solid rgba(16,35,59,.08);
  box-shadow:
    0 22px 54px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.65);
}

body.svc-setup #entregables .svc-panel:last-child::before{
  content:"LO MÍNIMO NECESARIO";
  position: absolute;
  top: 20px;
  right: 22px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(41,93,201,.08);
  border: 1px solid rgba(41,93,201,.10);
  color: #295dc9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

body.svc-setup #entregables .svc-panel:last-child::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 5px;
  background: linear-gradient(180deg, #173252, #2a61d1);
  border-radius: 999px;
  opacity:.95;
}

body.svc-setup #entregables .svc-panel:last-child h3{
  margin: 0 0 12px;
  color: #10233b;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

body.svc-setup #entregables .svc-panel:last-child .muted{
  margin-bottom: 18px;
  color: rgba(16,35,59,.66);
  font-size: 16px;
  line-height: 1.55;
}

body.svc-setup #entregables .svc-panel:last-child .svc-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

body.svc-setup #entregables .svc-panel:last-child .svc-list li{
  position: relative;
  padding-left: 34px;
  color: rgba(16,35,59,.78);
  line-height: 1.55;
  font-size: 16px;
}

body.svc-setup #entregables .svc-panel:last-child .svc-list li::before{
  content:"";
  position:absolute;
  left:0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(41,93,201,.08);
  border: 1px solid rgba(41,93,201,.12);
}

body.svc-setup #entregables .svc-panel:last-child .svc-list li::after{
  content:"";
  position:absolute;
  left: 7px;
  top: 12px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #2a61d1;
  border-bottom: 2px solid #2a61d1;
  transform: rotate(-45deg);
}

/* Hover sutil */
body.svc-setup #entregables .svc-panel:hover{
  transform: translateY(-2px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.svc-setup #entregables .svc-panel:first-child:hover{
  box-shadow:
    0 34px 78px rgba(16,35,59,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

body.svc-setup #entregables .svc-panel:last-child:hover{
  box-shadow:
    0 28px 64px rgba(16,35,59,.10),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* Responsive */
@media (max-width: 1100px){
  body.svc-setup #entregables .svc-two{
    grid-template-columns: 1fr;
  }

  body.svc-setup #entregables::before{
    display: none;
  }
}

@media (max-width: 720px){
  body.svc-setup #entregables{
    padding-top: 72px;
    padding-bottom: 76px;
  }

  body.svc-setup #entregables .svc-panel{
    padding: 24px 20px 22px;
    border-radius: 24px;
  }

  body.svc-setup #entregables .svc-panel:first-child::before,
  body.svc-setup #entregables .svc-panel:last-child::before{
    position: static;
    display: inline-flex;
    margin-bottom: 14px;
  }
}
/* =========================================================
   SETUP — ENTREGABLES / INFO MÍNIMA
   Ajuste de tipografía para uniformidad
========================================================= */

body.svc-setup #entregables h2{
  font-size: 40px !important;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

body.svc-setup #entregables .svc-panel h3{
  font-size: 18px !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

body.svc-setup #entregables .svc-panel .muted{
  font-size: 14px !important;
  line-height: 1.55;
}

body.svc-setup #entregables .svc-panel .svc-list li{
  font-size: 14px !important;
  line-height: 1.55;
}

/* chips/labels superiores de cada card */
body.svc-setup #entregables .svc-panel:first-child::before,
body.svc-setup #entregables .svc-panel:last-child::before{
  font-size: 10px !important;
  letter-spacing: 0.14em;
  padding: 7px 10px;
}

/* un poco menos de aire interno para que se vea más fino */
body.svc-setup #entregables .svc-panel{
  padding: 24px 24px 22px;
}

@media (max-width: 720px){
  body.svc-setup #entregables h2{
    font-size: 34px !important;
  }

  body.svc-setup #entregables .svc-panel h3{
    font-size: 17px !important;
  }

  body.svc-setup #entregables .svc-panel .muted,
  body.svc-setup #entregables .svc-panel .svc-list li{
    font-size: 14px !important;
  }
}
/* =========================================================
   SETUP — PROCESO
   Más diseño, no más tamaño
   Tipografía uniforme
========================================================= */

body.svc-setup #proceso{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 260px at 8% 0%, rgba(41,93,201,.06), transparent 58%),
    linear-gradient(180deg, #f4f8fc 0%, #f8fbfd 100%);
}

body.svc-setup #proceso .svc-head{
  margin-bottom: 26px;
}

body.svc-setup #proceso .svc-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* Cards */
body.svc-setup #proceso .svc-step{
  position: relative;
  padding: 22px 20px 20px;
  border-radius: 22px;
  border: 1px solid rgba(16,35,59,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,253,.96));
  box-shadow:
    0 16px 34px rgba(16,35,59,.05),
    inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-setup #proceso .svc-step:hover{
  transform: translateY(-2px);
  box-shadow:
    0 20px 40px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
  border-color: rgba(41,93,201,.12);
}

/* Variación visual sutil sin cambiar estructura */
body.svc-setup #proceso .svc-step:nth-child(1){
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,253,.98));
}
body.svc-setup #proceso .svc-step:nth-child(2){
  background:
    linear-gradient(180deg, rgba(248,251,255,.98), rgba(255,255,255,.98));
}
body.svc-setup #proceso .svc-step:nth-child(3){
  background:
    linear-gradient(180deg, rgba(245,249,254,.98), rgba(255,255,255,.98));
}

/* Línea superior fina */
body.svc-setup #proceso .svc-step::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,50,82,.95), rgba(42,97,209,.55));
}

/* Número */
body.svc-setup #proceso .svc-step .n{
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: linear-gradient(145deg, #173252, #295dc9);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow:
    0 10px 22px rgba(23,50,82,.14),
    inset 0 1px 0 rgba(255,255,255,.16);
}

/* Título de card */
body.svc-setup #proceso .svc-step b{
  display: block;
  margin-bottom: 10px;
  color: #10233b;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Cuerpo uniforme */
body.svc-setup #proceso .svc-step span{
  display: block;
  color: rgba(16,35,59,.72);
  font-size: 14px;
  line-height: 1.65;
}

/* Kicker y lead uniformes */
body.svc-setup #proceso .svc-kicker{
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(41,93,201,.10);
  color: #2a59bf;
}

body.svc-setup #proceso .svc-title{
  color: #0b1f3a;
}

body.svc-setup #proceso .svc-lead{
  font-size: 14px;
  line-height: 1.65;
  color: rgba(16,35,59,.72);
}

/* Responsive */
@media (max-width: 1100px){
  body.svc-setup #proceso .svc-steps{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — PROCESO
   Título más arriba + cards con glass effect
========================================================= */

body.svc-setup #proceso .svc-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

body.svc-setup #proceso .svc-step{
  position: relative;
  padding: 20px 20px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.22)),
    radial-gradient(140px 90px at 12% 10%, rgba(255,255,255,.28), transparent 65%),
    linear-gradient(135deg, rgba(234,242,255,.58), rgba(255,255,255,.30) 52%, rgba(226,236,248,.42));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 18px 38px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.58);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-setup #proceso .svc-step:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.46);
  box-shadow:
    0 24px 44px rgba(16,35,59,.10),
    inset 0 1px 0 rgba(255,255,255,.66);
}

/* textura fina */
body.svc-setup #proceso .svc-step::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 38%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 1.2px);
  background-size: auto, 14px 14px;
  opacity: .45;
}

body.svc-setup #proceso .svc-step::after{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,50,82,.92), rgba(42,97,209,.58));
  opacity: .95;
}

/* número */
body.svc-setup #proceso .svc-step .n{
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 13px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 12px;
  background: linear-gradient(145deg, #173252, #295dc9);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 10px 20px rgba(23,50,82,.14),
    inset 0 1px 0 rgba(255,255,255,.16);
}

/* título más arriba, más cerca del número */
body.svc-setup #proceso .svc-step b{
  display: block;
  margin: 0 0 10px;
  color: #10233b;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* cuerpo uniforme */
body.svc-setup #proceso .svc-step span{
  display: block;
  color: rgba(16,35,59,.72);
  font-size: 14px;
  line-height: 1.65;
}

/* si quieres todavía más pegado el título al número */
body.svc-setup #proceso .svc-step .n + b{
  margin-top: -2px;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-setup #proceso .svc-steps{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   Minimalista / glass sutil / resultado destacado
========================================================= */

body.svc-setup #lo-que-cambia{
  padding-bottom: 70px;
}

/* GRID */
body.svc-setup #lo-que-cambia .hc-change-flow{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* CARD BASE */
body.svc-setup #lo-que-cambia .hc-change-card{
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,248,252,.92));
  box-shadow:
    0 14px 28px rgba(7,22,44,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-setup #lo-que-cambia .hc-change-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px rgba(7,22,44,.16),
    inset 0 1px 0 rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.28);
}

/* textura sutil tipo gota de agua */
body.svc-setup #lo-que-cambia .hc-change-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(42px 42px at 88% 18%, rgba(255,255,255,.20), rgba(255,255,255,0) 72%),
    radial-gradient(28px 28px at 92% 52%, rgba(255,255,255,.14), rgba(255,255,255,0) 72%),
    radial-gradient(18px 18px at 78% 70%, rgba(255,255,255,.12), rgba(255,255,255,0) 74%);
  opacity: .9;
}

body.svc-setup #lo-que-cambia .hc-change-card::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(159,192,255,.82), rgba(255,255,255,.18));
  opacity: .95;
}

/* quitar icono */
body.svc-setup #lo-que-cambia .hc-icon{
  display: none !important;
}

/* top */
body.svc-setup #lo-que-cambia .hc-change-top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

/* etiquetas ANTES / DESPUÉS / RESULTADO con más presencia */
body.svc-setup #lo-que-cambia .hc-pill{
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(16,35,59,.08);
  border: 1px solid rgba(16,35,59,.10);
  color: rgba(16,35,59,.82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}

/* títulos de card */
body.svc-setup #lo-que-cambia .hc-change-card h3{
  position: relative;
  z-index: 2;
  margin: 0 0 12px;
  color: #10233b;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* bullets */
body.svc-setup #lo-que-cambia .hc-bullets{
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .hc-bullets li{
  position: relative;
  padding-left: 14px;
  color: rgba(16,35,59,.74);
  font-size: 14px;
  line-height: 1.55;
}

body.svc-setup #lo-que-cambia .hc-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(41,93,201,.74);
}

/* pills inferiores */
body.svc-setup #lo-que-cambia .hc-magnets{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

body.svc-setup #lo-que-cambia .hc-magnet{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(16,35,59,.08);
  color: rgba(16,35,59,.72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(16,35,59,.04);
}

/* variaciones suaves */
body.svc-setup #lo-que-cambia .hc-change-card.is-before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(243,247,252,.92));
}

body.svc-setup #lo-que-cambia .hc-change-card.is-after{
  background:
    linear-gradient(180deg, rgba(247,251,255,.95), rgba(240,245,251,.92));
}

/* RESULTADO destacado */
body.svc-setup #lo-que-cambia .hc-change-card.is-result{
  background:
    linear-gradient(180deg, rgba(248,252,255,.98), rgba(238,245,253,.95));
  border-color: rgba(159,192,255,.34);
  box-shadow:
    0 18px 34px rgba(7,22,44,.16),
    0 0 0 1px rgba(159,192,255,.08),
    inset 0 1px 0 rgba(255,255,255,.78);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result::after{
  background: linear-gradient(90deg, rgba(255,255,255,.78), #9fc0ff, rgba(42,97,209,.28));
  height: 4px;
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-pill{
  background: rgba(41,93,201,.10);
  border-color: rgba(41,93,201,.12);
  color: #2557bf;
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3{
  color: #0c2242;
}

/* QUOTE: quitar fondo, mantener texto */
body.svc-setup #lo-que-cambia .hc-quote{
  display: block !important;
  margin-top: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body.svc-setup #lo-que-cambia .hc-quote-mark{
  display: none;
}

body.svc-setup #lo-que-cambia .hc-quote-text{
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

body.svc-setup #lo-que-cambia .hc-quote-sub{
  color: rgba(255,255,255,.70);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .hc-change-flow{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   versión con más diseño + banner inferior
========================================================= */

body.svc-setup #lo-que-cambia{
  position: relative;
  overflow: hidden;
  padding-bottom: 78px;
}

/* GRID */
body.svc-setup #lo-que-cambia .hc-change-flow{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* =========================
   CARDS BASE
========================= */
body.svc-setup #lo-que-cambia .hc-change-card{
  position: relative;
  padding: 20px 20px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.16);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 36px rgba(4,14,31,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.svc-setup #lo-que-cambia .hc-change-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 48px rgba(4,14,31,.22),
    inset 0 1px 0 rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
}

/* textura + reflejo + profundidad */
body.svc-setup #lo-que-cambia .hc-change-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(140px 80px at 88% 12%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(70px 42px at 78% 78%, rgba(255,255,255,.08), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 32%);
  background-size: auto, auto, 15px 15px, auto;
  opacity: .8;
}

body.svc-setup #lo-que-cambia .hc-change-card::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(121,171,255,.92), rgba(255,255,255,.12));
  opacity: .95;
}

/* =========================
   CARD 1
========================= */
body.svc-setup #lo-que-cambia .hc-change-card.is-before{
  background:
    radial-gradient(220px 120px at 0% 0%, rgba(130,166,230,.18), transparent 70%),
    linear-gradient(180deg, rgba(248,251,255,.96), rgba(234,241,248,.93));
}

/* =========================
   CARD 2
========================= */
body.svc-setup #lo-que-cambia .hc-change-card.is-after{
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(88,141,255,.18), transparent 70%),
    linear-gradient(180deg, rgba(244,249,255,.97), rgba(229,238,248,.94));
}

/* =========================
   CARD 3 DESTACADA
========================= */
body.svc-setup #lo-que-cambia .hc-change-card.is-result{
  background:
    radial-gradient(240px 140px at 100% 0%, rgba(97,157,255,.24), transparent 70%),
    radial-gradient(160px 90px at 0% 100%, rgba(44,89,170,.18), transparent 72%),
    linear-gradient(180deg, rgba(238,246,255,.98), rgba(221,233,247,.96));
  border-color: rgba(151,191,255,.28);
  box-shadow:
    0 22px 46px rgba(4,14,31,.24),
    0 0 0 1px rgba(130,180,255,.08),
    inset 0 1px 0 rgba(255,255,255,.14);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result::after{
  background: linear-gradient(90deg, rgba(255,255,255,.76), #9fc0ff, rgba(42,97,209,.28));
  height: 5px;
}

/* =========================
   TOP ROW
========================= */
body.svc-setup #lo-que-cambia .hc-change-top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

/* quitar icono */
body.svc-setup #lo-que-cambia .hc-icon{
  display: none !important;
}

/* etiquetas ANTES / DESPUÉS / RESULTADO */
body.svc-setup #lo-que-cambia .hc-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(14,31,58,.08);
  border: 1px solid rgba(14,31,58,.10);
  color: rgba(16,35,59,.82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-pill{
  background: rgba(41,93,201,.12);
  border-color: rgba(41,93,201,.14);
  color: #2557bf;
}

/* =========================
   TITULOS MÁS PRESENTES
========================= */
body.svc-setup #lo-que-cambia .hc-change-card h3{
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  padding-bottom: 12px;
  color: #10233b;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  border-bottom: 1px solid rgba(16,35,59,.08);
}

body.svc-setup #lo-que-cambia .hc-change-card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width: 70px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #173252, #2a61d1);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3{
  color: #0b2244;
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3::after{
  width: 86px;
  background: linear-gradient(90deg, #173252, #4c89f2);
}

/* =========================
   BULLETS
========================= */
body.svc-setup #lo-que-cambia .hc-bullets{
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

body.svc-setup #lo-que-cambia .hc-bullets li{
  position: relative;
  padding-left: 16px;
  color: rgba(16,35,59,.76);
  font-size: 14px;
  line-height: 1.58;
}

body.svc-setup #lo-que-cambia .hc-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(41,93,201,.78);
  box-shadow: 0 0 0 4px rgba(41,93,201,.08);
}

/* =========================
   PILLS INFERIORES
========================= */
body.svc-setup #lo-que-cambia .hc-magnets{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

body.svc-setup #lo-que-cambia .hc-magnet{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(16,35,59,.08);
  color: rgba(16,35,59,.74);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(16,35,59,.05);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-magnet{
  background: rgba(255,255,255,.88);
  border-color: rgba(41,93,201,.12);
}

/* =========================
   BANNER INFERIOR
========================= */
body.svc-setup #lo-que-cambia .hc-quote{
  display: block !important;
  margin-top: 16px;
  padding: 16px 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:
    0 14px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-setup #lo-que-cambia .hc-quote-mark{
  display: none;
}

body.svc-setup #lo-que-cambia .hc-quote-text{
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

body.svc-setup #lo-que-cambia .hc-quote-sub{
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .hc-change-flow{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   Cards más ricas, minimalistas, premium
========================================================= */

body.svc-setup #lo-que-cambia{
  position: relative;
  overflow: hidden;
  padding-bottom: 78px;
}

body.svc-setup #lo-que-cambia .hc-change-flow{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* =========================
   CARD BASE
========================= */
body.svc-setup #lo-que-cambia .hc-change-card{
  position: relative;
  padding: 20px 20px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  overflow: hidden;
  box-shadow:
    0 18px 36px rgba(4,14,31,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.svc-setup #lo-que-cambia .hc-change-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 48px rgba(4,14,31,.20),
    inset 0 1px 0 rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
}

/* Textura tipo cristal / gota */
body.svc-setup #lo-que-cambia .hc-change-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120px 70px at 88% 12%, rgba(255,255,255,.18), transparent 72%),
    radial-gradient(70px 40px at 78% 72%, rgba(255,255,255,.10), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%);
  background-size: auto, auto, 15px 15px, auto;
  opacity: .82;
}

body.svc-setup #lo-que-cambia .hc-change-card::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(121,171,255,.92), rgba(255,255,255,.12));
  opacity: .95;
}

/* Variaciones de fondo */
body.svc-setup #lo-que-cambia .hc-change-card.is-before{
  background:
    radial-gradient(220px 120px at 0% 0%, rgba(130,166,230,.14), transparent 70%),
    linear-gradient(180deg, rgba(248,251,255,.96), rgba(234,241,248,.93));
}

body.svc-setup #lo-que-cambia .hc-change-card.is-after{
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(88,141,255,.15), transparent 70%),
    linear-gradient(180deg, rgba(244,249,255,.97), rgba(229,238,248,.94));
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result{
  background:
    radial-gradient(240px 140px at 100% 0%, rgba(97,157,255,.22), transparent 70%),
    radial-gradient(160px 90px at 0% 100%, rgba(44,89,170,.16), transparent 72%),
    linear-gradient(180deg, rgba(238,246,255,.98), rgba(221,233,247,.96));
  border-color: rgba(151,191,255,.28);
  box-shadow:
    0 22px 46px rgba(4,14,31,.22),
    0 0 0 1px rgba(130,180,255,.08),
    inset 0 1px 0 rgba(255,255,255,.14);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result::after{
  background: linear-gradient(90deg, rgba(255,255,255,.76), #9fc0ff, rgba(42,97,209,.28));
  height: 5px;
}

/* =========================
   TOP
========================= */
body.svc-setup #lo-que-cambia .hc-change-top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

body.svc-setup #lo-que-cambia .hc-icon{
  display: none !important;
}

body.svc-setup #lo-que-cambia .hc-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(14,31,58,.08);
  border: 1px solid rgba(14,31,58,.10);
  color: rgba(16,35,59,.82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-pill{
  background: rgba(41,93,201,.12);
  border-color: rgba(41,93,201,.14);
  color: #2557bf;
}

/* =========================
   TITULO + INTRO
========================= */
body.svc-setup #lo-que-cambia .hc-change-card h3{
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
  color: #10233b;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

body.svc-setup #lo-que-cambia .hc-card-intro{
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  color: rgba(16,35,59,.72);
  font-size: 14px;
  line-height: 1.58;
}

/* =========================
   BULLETS
========================= */
body.svc-setup #lo-que-cambia .hc-bullets{
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .hc-bullets li{
  position: relative;
  padding-left: 16px;
  color: rgba(16,35,59,.76);
  font-size: 14px;
  line-height: 1.55;
}

body.svc-setup #lo-que-cambia .hc-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(41,93,201,.78);
  box-shadow: 0 0 0 4px rgba(41,93,201,.08);
}

/* =========================
   BLOQUES EXTRA DE CONTENIDO
========================= */
body.svc-setup #lo-que-cambia .hc-card-note{
  position: relative;
  z-index: 2;
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(16,35,59,.08);
  color: rgba(16,35,59,.74);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

body.svc-setup #lo-que-cambia .hc-card-note strong{
  color: #10233b;
}

body.svc-setup #lo-que-cambia .hc-proof-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

body.svc-setup #lo-que-cambia .hc-proof{
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(41,93,201,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

body.svc-setup #lo-que-cambia .hc-proof strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 13px;
  line-height: 1.3;
}

body.svc-setup #lo-que-cambia .hc-proof span{
  display: block;
  color: rgba(16,35,59,.70);
  font-size: 12px;
  line-height: 1.45;
}

/* =========================
   PILLS INFERIORES
========================= */
body.svc-setup #lo-que-cambia .hc-magnets{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

body.svc-setup #lo-que-cambia .hc-magnet{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(16,35,59,.08);
  color: rgba(16,35,59,.74);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(16,35,59,.05);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-magnet{
  background: rgba(255,255,255,.88);
  border-color: rgba(41,93,201,.12);
}

/* =========================
   BANNER INFERIOR MÁS PRESENTE
========================= */
body.svc-setup #lo-que-cambia .hc-quote{
  display: block !important;
  margin-top: 18px;
  padding: 18px 20px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(145deg, rgba(18,44,79,.86), rgba(31,68,116,.86));
  box-shadow:
    0 18px 36px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-setup #lo-que-cambia .hc-quote-mark{
  display: none;
}

body.svc-setup #lo-que-cambia .hc-quote-text{
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

body.svc-setup #lo-que-cambia .hc-quote-sub{
  color: rgba(255,255,255,.76);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .hc-change-flow{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia .hc-proof-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   override: menos texto aburrido, más identidad
========================================================= */

/* cards con más color / identidad */
body.svc-setup #lo-que-cambia .hc-change-card{
  border-radius: 24px;
  box-shadow:
    0 20px 42px rgba(4,14,31,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-before{
  background:
    radial-gradient(260px 140px at 0% 0%, rgba(114,156,231,.18), transparent 72%),
    radial-gradient(120px 70px at 86% 16%, rgba(255,255,255,.18), transparent 72%),
    linear-gradient(180deg, rgba(247,250,255,.97), rgba(230,239,249,.95));
  border-color: rgba(114,156,231,.18);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-after{
  background:
    radial-gradient(260px 140px at 100% 0%, rgba(70,136,255,.20), transparent 72%),
    radial-gradient(120px 70px at 84% 18%, rgba(255,255,255,.18), transparent 72%),
    linear-gradient(180deg, rgba(243,248,255,.98), rgba(224,236,250,.95));
  border-color: rgba(70,136,255,.18);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result{
  background:
    radial-gradient(280px 150px at 100% 0%, rgba(88,157,255,.28), transparent 72%),
    radial-gradient(180px 100px at 0% 100%, rgba(36,84,168,.18), transparent 72%),
    radial-gradient(120px 70px at 86% 18%, rgba(255,255,255,.20), transparent 72%),
    linear-gradient(180deg, rgba(235,245,255,.99), rgba(214,229,247,.97));
  border-color: rgba(137,188,255,.28);
  box-shadow:
    0 24px 50px rgba(4,14,31,.22),
    0 0 0 1px rgba(121,171,255,.08),
    inset 0 1px 0 rgba(255,255,255,.16);
}

/* títulos y pills con más presencia */
body.svc-setup #lo-que-cambia .hc-pill{
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: .18em;
  background: rgba(14,31,58,.09);
  color: rgba(16,35,59,.86);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-pill{
  background: rgba(41,93,201,.14);
  border-color: rgba(41,93,201,.18);
  color: #1f56c3;
}

body.svc-setup #lo-que-cambia .hc-change-card h3{
  font-size: 18px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  color: #0d2343;
}

body.svc-setup #lo-que-cambia .hc-change-card h3::after{
  width: 86px;
  height: 3px;
  background: linear-gradient(90deg, #173252, #3474ea);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3{
  color: #0a2145;
}

/* intro un poco más apretado */
body.svc-setup #lo-que-cambia .hc-card-intro{
  margin-bottom: 12px;
  color: rgba(16,35,59,.74);
  font-size: 14px;
  line-height: 1.48;
}

/* viñetas: menos interlineado y más tensión visual */
body.svc-setup #lo-que-cambia .hc-bullets{
  gap: 8px;
}

body.svc-setup #lo-que-cambia .hc-bullets li{
  padding-left: 15px;
  font-size: 14px;
  line-height: 1.38;
  color: rgba(16,35,59,.80);
}

body.svc-setup #lo-que-cambia .hc-bullets li::before{
  top: 7px;
  width: 5px;
  height: 5px;
  background: #2d67dd;
  box-shadow: 0 0 0 4px rgba(45,103,221,.10);
}

/* PANEL NOTA: mucho más visible */
body.svc-setup #lo-que-cambia .hc-card-note{
  margin-top: 14px;
  padding: 14px 14px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(244,248,253,.78));
  border: 1px solid rgba(41,93,201,.12);
  box-shadow:
    0 10px 22px rgba(16,35,59,.06),
    inset 0 1px 0 rgba(255,255,255,.48);
  position: relative;
  overflow: hidden;
}

body.svc-setup #lo-que-cambia .hc-card-note::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  background: linear-gradient(180deg, #173252, #3474ea);
}

body.svc-setup #lo-que-cambia .hc-card-note strong{
  display: inline-block;
  margin-right: 4px;
  color: #10233b;
}

body.svc-setup #lo-que-cambia .hc-card-note{
  font-size: 13px;
  line-height: 1.42;
  color: rgba(16,35,59,.78);
}

/* PANEL RESULTADO: que venda más */
body.svc-setup #lo-que-cambia .hc-proof-grid{
  margin-top: 14px;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .hc-proof{
  position: relative;
  padding: 14px 13px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(240,247,255,.80));
  border: 1px solid rgba(41,93,201,.14);
  box-shadow:
    0 12px 24px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.50);
  overflow: hidden;
}

body.svc-setup #lo-que-cambia .hc-proof::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  background: linear-gradient(180deg, #2b61d0, #7fb0ff);
}

body.svc-setup #lo-que-cambia .hc-proof strong{
  font-size: 13px;
  line-height: 1.25;
  color: #0d2444;
  margin-bottom: 4px;
}

body.svc-setup #lo-que-cambia .hc-proof span{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(16,35,59,.74);
}

/* chips un poco más compactos para que no roben tanto */
body.svc-setup #lo-que-cambia .hc-magnets{
  margin-top: 13px;
}

body.svc-setup #lo-que-cambia .hc-magnet{
  padding: 9px 11px;
  font-size: 12px;
  border-color: rgba(16,35,59,.09);
}

/* banner inferior más presente */
body.svc-setup #lo-que-cambia .hc-quote{
  margin-top: 18px;
  padding: 18px 20px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(280px 120px at 100% 0%, rgba(88,157,255,.16), transparent 72%),
    linear-gradient(145deg, rgba(17,44,79,.96), rgba(28,68,119,.94));
  box-shadow:
    0 18px 36px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.svc-setup #lo-que-cambia .hc-quote-text{
  font-size: 16px;
  line-height: 1.45;
}

body.svc-setup #lo-que-cambia .hc-quote-sub{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   Más textura + menos interlineado + lectura más dinámica
========================================================= */

body.svc-setup #lo-que-cambia .hc-change-flow{
  gap: 16px;
}

/* =========================
   CARDS: más textura / más diseño
========================= */
body.svc-setup #lo-que-cambia .hc-change-card{
  padding: 18px 18px 16px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 20px 40px rgba(4,14,31,.20),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.05);
}

/* textura más marcada */
body.svc-setup #lo-que-cambia .hc-change-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(180px 90px at 92% 12%, rgba(255,255,255,.20), transparent 72%),
    radial-gradient(90px 54px at 12% 88%, rgba(255,255,255,.08), transparent 72%),
    radial-gradient(36px 36px at 84% 70%, rgba(255,255,255,.10), transparent 74%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 28%);
  background-size: auto, auto, auto, 12px 12px, auto;
  opacity: .95;
}

body.svc-setup #lo-que-cambia .hc-change-card::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 23px;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 28%, transparent 72%, rgba(255,255,255,.05));
  opacity: .9;
}

/* fondos con más identidad */
body.svc-setup #lo-que-cambia .hc-change-card.is-before{
  background:
    radial-gradient(260px 140px at 0% 0%, rgba(118,162,237,.20), transparent 72%),
    radial-gradient(140px 90px at 100% 100%, rgba(255,255,255,.10), transparent 74%),
    linear-gradient(180deg, rgba(246,250,255,.98), rgba(225,236,248,.96));
  border-color: rgba(118,162,237,.18);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-after{
  background:
    radial-gradient(260px 140px at 100% 0%, rgba(78,143,255,.24), transparent 72%),
    radial-gradient(140px 90px at 0% 100%, rgba(255,255,255,.10), transparent 74%),
    linear-gradient(180deg, rgba(241,248,255,.99), rgba(218,232,249,.97));
  border-color: rgba(78,143,255,.20);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result{
  background:
    radial-gradient(300px 170px at 100% 0%, rgba(92,160,255,.30), transparent 72%),
    radial-gradient(170px 100px at 0% 100%, rgba(33,86,178,.22), transparent 74%),
    radial-gradient(60px 60px at 86% 62%, rgba(255,255,255,.12), transparent 74%),
    linear-gradient(180deg, rgba(232,244,255,.99), rgba(205,224,245,.98));
  border-color: rgba(140,191,255,.34);
  box-shadow:
    0 24px 50px rgba(4,14,31,.24),
    0 0 0 1px rgba(140,191,255,.08),
    inset 0 1px 0 rgba(255,255,255,.16);
}

/* =========================
   TOP / PILLS / TÍTULOS
========================= */
body.svc-setup #lo-que-cambia .hc-change-top{
  margin-bottom: 10px;
}

body.svc-setup #lo-que-cambia .hc-pill{
  padding: 8px 11px;
  font-size: 10px;
  letter-spacing: .18em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 6px 12px rgba(16,35,59,.04);
}

body.svc-setup #lo-que-cambia .hc-change-card h3{
  margin: 0 0 10px;
  padding-bottom: 10px;
  font-size: 18px;
  line-height: 1.08;
  border-bottom: 1px solid rgba(16,35,59,.08);
}

body.svc-setup #lo-que-cambia .hc-change-card h3::after{
  width: 92px;
  height: 3px;
  background: linear-gradient(90deg, #173252, #3c7af0);
}

/* =========================
   TEXTO MÁS APRETADO
========================= */
body.svc-setup #lo-que-cambia .hc-card-intro{
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.32;
  color: rgba(16,35,59,.78);
}

body.svc-setup #lo-que-cambia .hc-bullets{
  gap: 6px;
}

body.svc-setup #lo-que-cambia .hc-bullets li{
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.24;
  color: rgba(16,35,59,.82);
}

body.svc-setup #lo-que-cambia .hc-bullets li::before{
  top: 7px;
  width: 5px;
  height: 5px;
  background: #2f69df;
  box-shadow: 0 0 0 4px rgba(47,105,223,.12);
}

/* =========================
   BLOQUES INTERMEDIOS MÁS FUERTES
========================= */
body.svc-setup #lo-que-cambia .hc-card-note{
  margin-top: 12px;
  padding: 12px 13px 11px;
  border-radius: 16px;
  background:
    radial-gradient(80px 40px at 100% 0%, rgba(255,255,255,.18), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(240,246,253,.82));
  border: 1px solid rgba(41,93,201,.14);
  box-shadow:
    0 10px 20px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.48);
  line-height: 1.26;
  font-size: 12.5px;
}

body.svc-setup #lo-que-cambia .hc-card-note::before{
  width: 5px;
}

body.svc-setup #lo-que-cambia .hc-card-note strong{
  display: block;
  margin-bottom: 3px;
  font-size: 12.5px;
}

body.svc-setup #lo-que-cambia .hc-proof-grid{
  gap: 10px;
  margin-top: 12px;
}

body.svc-setup #lo-que-cambia .hc-proof{
  padding: 13px 12px 12px;
  border-radius: 16px;
  background:
    radial-gradient(80px 42px at 100% 0%, rgba(255,255,255,.20), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(236,245,255,.84));
  border: 1px solid rgba(41,93,201,.16);
  box-shadow:
    0 12px 22px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.50);
}

body.svc-setup #lo-que-cambia .hc-proof::before{
  width: 5px;
  background: linear-gradient(180deg, #2b61d0, #8ab7ff);
}

body.svc-setup #lo-que-cambia .hc-proof strong{
  margin-bottom: 3px;
  font-size: 13px;
  line-height: 1.15;
}

body.svc-setup #lo-que-cambia .hc-proof span{
  font-size: 12px;
  line-height: 1.18;
  color: rgba(16,35,59,.76);
}

/* chips más compactos */
body.svc-setup #lo-que-cambia .hc-magnets{
  gap: 7px;
  margin-top: 12px;
}

body.svc-setup #lo-que-cambia .hc-magnet{
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1;
  box-shadow:
    0 6px 12px rgba(16,35,59,.05),
    inset 0 1px 0 rgba(255,255,255,.26);
}

/* banner inferior más visible */
body.svc-setup #lo-que-cambia .hc-quote{
  margin-top: 18px;
  padding: 18px 20px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(260px 110px at 100% 0%, rgba(95,159,255,.20), transparent 74%),
    linear-gradient(145deg, rgba(14,38,69,.98), rgba(27,67,118,.96));
  box-shadow:
    0 18px 38px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.svc-setup #lo-que-cambia .hc-quote-text{
  font-size: 16px;
  line-height: 1.32;
}

body.svc-setup #lo-que-cambia .hc-quote-sub{
  font-size: 13px;
  line-height: 1.2;
}
/* =========================================================
   SETUP — UNIFORMIDAD DE TIPOGRAFÍA + LO QUE CAMBIA
========================================================= */

/* =========================================
   1) UNIFORMIDAD DE TIPOGRAFÍA EN SETUP
   (no toca títulos grandes)
========================================= */

/* subtítulos / textos intro / párrafos */
body.svc-setup .svc-head .svc-lead,
body.svc-setup .svc-decision p,
body.svc-setup .svc-panel p,
body.svc-setup .svc-step span,
body.svc-setup .svc-list li,
body.svc-setup .svc-check li,
body.svc-setup .muted,
body.svc-setup .hc-contact-copy .lead,
body.svc-setup .hc-mini-text,
body.svc-setup .hc-form-note,
body.svc-setup .hc-small{
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* cuerpos dentro de “Lo que cambia” */
body.svc-setup #lo-que-cambia .hc-card-intro,
body.svc-setup #lo-que-cambia .hc-bullets li,
body.svc-setup #lo-que-cambia .hc-card-note,
body.svc-setup #lo-que-cambia .hc-proof span,
body.svc-setup #lo-que-cambia .hc-quote-text{
  font-size: 16px !important;
  line-height: 1.42 !important;
}

/* subtítulos internos de cards y bloques */
body.svc-setup .svc-decision h3,
body.svc-setup .svc-panel h3,
body.svc-setup .svc-step b,
body.svc-setup #lo-que-cambia .hc-change-card h3{
  font-size: 18px !important;
  line-height: 1.18 !important;
}

/* =========================================
   2) LO QUE CAMBIA — MENOS AZUL, MÁS PROFUNDIDAD
========================================= */

body.svc-setup #lo-que-cambia{
  padding-bottom: 78px;
}

body.svc-setup #lo-que-cambia .hc-change-flow{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* BASE DE CARD */
body.svc-setup #lo-que-cambia .hc-change-card{
  position: relative;
  padding: 20px 20px 18px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 34px rgba(7,22,44,.18),
    0 6px 18px rgba(7,22,44,.08),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.svc-setup #lo-que-cambia .hc-change-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 42px rgba(7,22,44,.22),
    0 8px 22px rgba(7,22,44,.10),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* textura fina, menos agresiva */
body.svc-setup #lo-que-cambia .hc-change-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120px 70px at 88% 12%, rgba(255,255,255,.14), transparent 72%),
    radial-gradient(80px 46px at 10% 88%, rgba(255,255,255,.06), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 26%);
  opacity: .85;
}

body.svc-setup #lo-que-cambia .hc-change-card::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(124,153,198,.78), rgba(255,255,255,.10));
  opacity: .95;
}

/* CARD 1 */
body.svc-setup #lo-que-cambia .hc-change-card.is-before{
  background:
    radial-gradient(220px 120px at 0% 0%, rgba(152,170,199,.14), transparent 72%),
    linear-gradient(180deg, rgba(249,250,252,.98), rgba(234,239,245,.96));
  border-color: rgba(170,184,205,.18);
}

/* CARD 2 */
body.svc-setup #lo-que-cambia .hc-change-card.is-after{
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(146,169,206,.14), transparent 72%),
    linear-gradient(180deg, rgba(246,249,252,.98), rgba(229,236,244,.96));
  border-color: rgba(158,178,210,.18);
}

/* CARD RESULTADO — AHORA SÍ DESTACADA */
body.svc-setup #lo-que-cambia .hc-change-card.is-result{
  background:
    radial-gradient(240px 130px at 100% 0%, rgba(175,194,224,.16), transparent 72%),
    radial-gradient(160px 90px at 0% 100%, rgba(108,134,173,.14), transparent 74%),
    linear-gradient(180deg, rgba(244,248,253,.99), rgba(221,231,242,.98));
  border-color: rgba(150,173,210,.34);
  box-shadow:
    0 24px 46px rgba(7,22,44,.26),
    0 10px 26px rgba(7,22,44,.12),
    0 0 0 1px rgba(150,173,210,.12),
    inset 0 1px 0 rgba(255,255,255,.16);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result::after{
  height: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,.68), rgba(98,126,176,.95), rgba(255,255,255,.12));
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result:hover{
  box-shadow:
    0 30px 54px rgba(7,22,44,.30),
    0 12px 30px rgba(7,22,44,.14),
    0 0 0 1px rgba(150,173,210,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* TOP */
body.svc-setup #lo-que-cambia .hc-change-top{
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .hc-icon{
  display: none !important;
}

/* ANTES / DESPUÉS / RESULTADO más presentes */
body.svc-setup #lo-que-cambia .hc-pill{
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(16,35,59,.08);
  border: 1px solid rgba(16,35,59,.10);
  color: rgba(16,35,59,.86);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 6px 12px rgba(16,35,59,.04);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-pill{
  background: rgba(74,102,150,.14);
  border-color: rgba(74,102,150,.18);
  color: #24467a;
}

/* TÍTULOS */
body.svc-setup #lo-que-cambia .hc-change-card h3{
  margin: 0 0 12px;
  padding-bottom: 11px;
  color: #0f233f;
  border-bottom: 1px solid rgba(16,35,59,.08);
}

body.svc-setup #lo-que-cambia .hc-change-card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width: 86px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #173252, #5b7eaf);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3{
  color: #0a2140;
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3::after{
  width: 102px;
  background: linear-gradient(90deg, #173252, #6f8fbe);
}

/* INTRO */
body.svc-setup #lo-que-cambia .hc-card-intro{
  margin-bottom: 10px;
  color: rgba(16,35,59,.76);
}

/* VIÑETAS — menos interlineado */
body.svc-setup #lo-que-cambia .hc-bullets{
  gap: 6px;
}

body.svc-setup #lo-que-cambia .hc-bullets li{
  padding-left: 15px;
  color: rgba(16,35,59,.82);
  line-height: 1.22 !important;
}

body.svc-setup #lo-que-cambia .hc-bullets li::before{
  top: 7px;
  width: 5px;
  height: 5px;
  background: #486b9f;
  box-shadow: 0 0 0 4px rgba(72,107,159,.10);
}

/* PANELES INTERMEDIOS MÁS FUERTES */
body.svc-setup #lo-que-cambia .hc-card-note{
  margin-top: 12px;
  padding: 13px 14px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(240,245,250,.82));
  border: 1px solid rgba(112,141,184,.16);
  box-shadow:
    0 10px 20px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.40);
  position: relative;
  overflow: hidden;
}

body.svc-setup #lo-que-cambia .hc-card-note::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 5px;
  background: linear-gradient(180deg, #2d4f80, #6f8fbe);
}

body.svc-setup #lo-que-cambia .hc-card-note strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
}

/* paneles de resultado destacados */
body.svc-setup #lo-que-cambia .hc-proof-grid{
  gap: 10px;
  margin-top: 12px;
}

body.svc-setup #lo-que-cambia .hc-proof{
  position: relative;
  padding: 14px 13px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(237,243,250,.84));
  border: 1px solid rgba(112,141,184,.18);
  box-shadow:
    0 12px 22px rgba(16,35,59,.09),
    inset 0 1px 0 rgba(255,255,255,.45);
  overflow: hidden;
}

body.svc-setup #lo-que-cambia .hc-proof::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 5px;
  background: linear-gradient(180deg, #355b94, #84a6d8);
}

body.svc-setup #lo-que-cambia .hc-proof strong{
  display:block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.15;
}

body.svc-setup #lo-que-cambia .hc-proof span{
  color: rgba(16,35,59,.76);
  line-height: 1.26 !important;
}

/* chips */
body.svc-setup #lo-que-cambia .hc-magnets{
  gap: 7px;
  margin-top: 12px;
}

body.svc-setup #lo-que-cambia .hc-magnet{
  padding: 9px 11px;
  font-size: 12px;
  border-color: rgba(16,35,59,.09);
  color: rgba(16,35,59,.76);
  background: rgba(255,255,255,.84);
}

/* BANNER inferior más visible */
body.svc-setup #lo-que-cambia .hc-quote{
  margin-top: 18px;
  padding: 18px 20px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(123,156,204,.18), transparent 74%),
    linear-gradient(145deg, rgba(16,37,67,.98), rgba(34,67,109,.96));
  box-shadow:
    0 18px 38px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.svc-setup #lo-que-cambia .hc-quote-text{
  font-size: 16px;
  line-height: 1.3 !important;
}

body.svc-setup #lo-que-cambia .hc-quote-sub{
  font-size: 13px;
  line-height: 1.2 !important;
}

@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .hc-change-flow{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia .hc-proof-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — TIPOGRAFÍA UNIFORME + LO QUE CAMBIA REDISEÑADO
   Escala igual a la que veníamos usando en otras páginas
========================================================= */

/* -------------------------
   ESCALA TIPOGRÁFICA SETUP
------------------------- */

/* títulos internos de cards / bloques */
body.svc-setup .svc-decision h3,
body.svc-setup .svc-panel h3,
body.svc-setup .svc-step b,
body.svc-setup #lo-que-cambia .hc-change-card h3{
  font-size: 18px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em;
}

/* subtítulos/intro de sección */
body.svc-setup .svc-head .svc-lead,
body.svc-setup .svc-panel p,
body.svc-setup .svc-decision p,
body.svc-setup .svc-step span,
body.svc-setup .muted,
body.svc-setup .hc-contact-copy .lead,
body.svc-setup .hc-mini-text,
body.svc-setup .hc-form-note,
body.svc-setup .hc-small{
  font-size: 17px !important;
  line-height: 1.6 !important;
}

/* cuerpos y listas */
body.svc-setup .svc-list li,
body.svc-setup .svc-check li,
body.svc-setup #lo-que-cambia .hc-card-intro,
body.svc-setup #lo-que-cambia .hc-bullets li,
body.svc-setup #lo-que-cambia .hc-block-copy{
  font-size: 15px !important;
  line-height: 1.42 !important;
}

/* microtextos */
body.svc-setup #lo-que-cambia .hc-magnet,
body.svc-setup #lo-que-cambia .hc-proof span,
body.svc-setup #lo-que-cambia .hc-quote-sub{
  font-size: 13px !important;
  line-height: 1.32 !important;
}

/* -------------------------
   SECCIÓN LO QUE CAMBIA
------------------------- */

body.svc-setup #lo-que-cambia{
  position: relative;
  overflow: hidden;
  padding-bottom: 78px;
}

body.svc-setup #lo-que-cambia .hc-change-flow{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* base */
body.svc-setup #lo-que-cambia .hc-change-card{
  position: relative;
  padding: 18px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 36px rgba(4,14,31,.18),
    0 8px 20px rgba(4,14,31,.08),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.svc-setup #lo-que-cambia .hc-change-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 46px rgba(4,14,31,.22),
    0 10px 24px rgba(4,14,31,.10),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* textura más sobria y profunda */
body.svc-setup #lo-que-cambia .hc-change-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(110px 65px at 88% 14%, rgba(255,255,255,.12), transparent 72%),
    radial-gradient(70px 42px at 10% 86%, rgba(255,255,255,.05), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 26%);
  opacity:.9;
}

body.svc-setup #lo-que-cambia .hc-change-card::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(109,137,181,.82), rgba(255,255,255,.10));
}

/* fondos menos azulados */
body.svc-setup #lo-que-cambia .hc-change-card.is-before{
  background:
    radial-gradient(220px 120px at 0% 0%, rgba(166,179,197,.12), transparent 72%),
    linear-gradient(180deg, rgba(248,250,252,.98), rgba(233,238,243,.96));
  border-color: rgba(181,192,208,.18);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-after{
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(150,170,202,.12), transparent 72%),
    linear-gradient(180deg, rgba(246,249,252,.98), rgba(228,236,244,.96));
  border-color: rgba(169,184,210,.18);
}

/* resultado sí destaca */
body.svc-setup #lo-que-cambia .hc-change-card.is-result{
  background:
    radial-gradient(240px 130px at 100% 0%, rgba(168,188,220,.14), transparent 72%),
    radial-gradient(150px 84px at 0% 100%, rgba(118,142,181,.12), transparent 74%),
    linear-gradient(180deg, rgba(244,248,253,.99), rgba(219,230,242,.98));
  border-color: rgba(133,158,197,.34);
  box-shadow:
    0 24px 50px rgba(4,14,31,.26),
    0 0 0 1px rgba(133,158,197,.12),
    0 12px 28px rgba(4,14,31,.12),
    inset 0 1px 0 rgba(255,255,255,.16);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result::after{
  height: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,.64), rgba(88,118,171,.98), rgba(255,255,255,.10));
}

/* top */
body.svc-setup #lo-que-cambia .hc-change-top{
  margin-bottom: 10px;
}

body.svc-setup #lo-que-cambia .hc-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(16,35,59,.08);
  border: 1px solid rgba(16,35,59,.10);
  color: rgba(16,35,59,.84);
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 6px 12px rgba(16,35,59,.04);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-pill{
  background: rgba(58,88,138,.14);
  border-color: rgba(58,88,138,.18);
  color: #294777;
}

/* títulos */
body.svc-setup #lo-que-cambia .hc-change-card h3{
  margin: 0 0 10px;
  padding-bottom: 10px;
  color: #0f233f;
  border-bottom: 1px solid rgba(16,35,59,.08);
  position: relative;
}

body.svc-setup #lo-que-cambia .hc-change-card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width: 86px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #173252, #5a7dac);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3{
  color: #0a2140;
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3::after{
  width: 102px;
  background: linear-gradient(90deg, #173252, #708fbb);
}

/* intro */
body.svc-setup #lo-que-cambia .hc-card-intro{
  margin: 0 0 12px;
  color: rgba(16,35,59,.76);
}

/* subdivisiones internas */
body.svc-setup #lo-que-cambia .hc-sections{
  display: grid;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .hc-block{
  position: relative;
  padding: 13px 14px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(240,245,250,.80));
  border: 1px solid rgba(117,140,176,.14);
  box-shadow:
    0 10px 20px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.40);
}

body.svc-setup #lo-que-cambia .hc-block--soft{
  background:
    linear-gradient(180deg, rgba(248,250,252,.84), rgba(236,242,248,.82));
}

body.svc-setup #lo-que-cambia .hc-block--result{
  background:
    linear-gradient(180deg, rgba(249,251,254,.88), rgba(234,241,248,.86));
  border-color: rgba(94,121,165,.16);
}

body.svc-setup #lo-que-cambia .hc-block-label{
  display: inline-flex;
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(16,35,59,.07);
  border: 1px solid rgba(16,35,59,.09);
  color: rgba(16,35,59,.78);
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .hc-block-copy{
  margin: 0;
  color: rgba(16,35,59,.78);
}

/* viñetas más compactas */
body.svc-setup #lo-que-cambia .hc-bullets{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

body.svc-setup #lo-que-cambia .hc-bullets li{
  position: relative;
  padding-left: 15px;
  color: rgba(16,35,59,.82);
  line-height: 1.22 !important;
}

body.svc-setup #lo-que-cambia .hc-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #516f9e;
  box-shadow: 0 0 0 4px rgba(81,111,158,.10);
}

/* bloque prueba resultado */
body.svc-setup #lo-que-cambia .hc-proof-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .hc-proof{
  position: relative;
  padding: 14px 13px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(236,243,250,.84));
  border: 1px solid rgba(112,141,184,.18);
  box-shadow:
    0 12px 22px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.44);
}

body.svc-setup #lo-que-cambia .hc-proof::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 5px;
  background: linear-gradient(180deg, #355b94, #86a7d6);
}

body.svc-setup #lo-que-cambia .hc-proof strong{
  display:block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px !important;
  line-height: 1.18 !important;
}

/* chips */
body.svc-setup #lo-que-cambia .hc-magnets{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

body.svc-setup #lo-que-cambia .hc-magnet{
  padding: 9px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(16,35,59,.09);
  color: rgba(16,35,59,.76);
  font-weight: 700;
  box-shadow:
    0 6px 12px rgba(16,35,59,.05),
    inset 0 1px 0 rgba(255,255,255,.24);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-magnet{
  border-color: rgba(94,121,165,.14);
  background: rgba(255,255,255,.88);
}

/* banner inferior */
body.svc-setup #lo-que-cambia .hc-quote{
  margin-top: 18px;
  padding: 18px 20px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(123,156,204,.18), transparent 74%),
    linear-gradient(145deg, rgba(16,37,67,.98), rgba(34,67,109,.96));
  box-shadow:
    0 18px 38px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.svc-setup #lo-que-cambia .hc-quote-text{
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 16px !important;
  line-height: 1.32 !important;
  font-weight: 700;
}

body.svc-setup #lo-que-cambia .hc-quote-sub{
  color: rgba(255,255,255,.78);
  font-weight: 600;
}

@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .hc-change-flow{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia .hc-proof-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   Nueva estructura dinámica + banner visible
========================================================= */

/* escala tipográfica uniforme */
body.svc-setup #lo-que-cambia .hc-change-card h3{
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

body.svc-setup #lo-que-cambia .hc-card-intro,
body.svc-setup #lo-que-cambia .hc-bullets li,
body.svc-setup #lo-que-cambia .hc-mini-block p{
  font-size: 15px;
  line-height: 1.34;
}

body.svc-setup #lo-que-cambia .hc-proof span,
body.svc-setup #lo-que-cambia .hc-magnet,
body.svc-setup #lo-que-cambia .hc-quote-sub{
  font-size: 13px;
  line-height: 1.28;
}

/* layout principal */
body.svc-setup #lo-que-cambia .hc-change-flow--mosaic{
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  grid-template-areas:
    "before result"
    "after result";
  gap: 18px;
  align-items: stretch;
}

body.svc-setup #lo-que-cambia .hc-change-card.is-before{ grid-area: before; }
body.svc-setup #lo-que-cambia .hc-change-card.is-after{ grid-area: after; }
body.svc-setup #lo-que-cambia .hc-change-card.is-result{ grid-area: result; }

/* cards base */
body.svc-setup #lo-que-cambia .hc-change-card{
  position: relative;
  padding: 20px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 36px rgba(4,14,31,.18),
    0 8px 18px rgba(4,14,31,.08),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.svc-setup #lo-que-cambia .hc-change-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 46px rgba(4,14,31,.22),
    0 10px 22px rgba(4,14,31,.10),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* texturas más interesantes */
body.svc-setup #lo-que-cambia .hc-change-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(140px 80px at 92% 12%, rgba(255,255,255,.12), transparent 72%),
    radial-gradient(90px 54px at 12% 86%, rgba(255,255,255,.05), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 26%);
  opacity:.95;
}

body.svc-setup #lo-que-cambia .hc-change-card::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(107,136,182,.82), rgba(255,255,255,.10));
}

/* fondos menos aburridos */
body.svc-setup #lo-que-cambia .hc-change-card.is-before{
  background:
    radial-gradient(240px 130px at 0% 0%, rgba(166,179,197,.14), transparent 72%),
    linear-gradient(180deg, rgba(248,250,252,.98), rgba(232,238,244,.96));
  border-color: rgba(181,192,208,.18);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-after{
  background:
    radial-gradient(240px 130px at 100% 0%, rgba(150,170,202,.14), transparent 72%),
    linear-gradient(180deg, rgba(246,249,252,.98), rgba(228,236,244,.96));
  border-color: rgba(169,184,210,.18);
}

/* resultado sí resalta */
body.svc-setup #lo-que-cambia .hc-change-card.is-result{
  background:
    radial-gradient(260px 150px at 100% 0%, rgba(165,186,220,.16), transparent 72%),
    radial-gradient(180px 100px at 0% 100%, rgba(112,137,178,.14), transparent 74%),
    linear-gradient(180deg, rgba(244,248,253,.99), rgba(218,229,242,.98));
  border-color: rgba(130,157,201,.32);
  box-shadow:
    0 26px 52px rgba(4,14,31,.28),
    0 12px 26px rgba(4,14,31,.12),
    0 0 0 1px rgba(130,157,201,.12),
    inset 0 1px 0 rgba(255,255,255,.16);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result::after{
  height: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,.66), rgba(82,113,170,.98), rgba(255,255,255,.10));
}

/* top */
body.svc-setup #lo-que-cambia .hc-change-top{
  margin-bottom: 10px;
}

body.svc-setup #lo-que-cambia .hc-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(16,35,59,.08);
  border: 1px solid rgba(16,35,59,.10);
  color: rgba(16,35,59,.84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 6px 12px rgba(16,35,59,.04);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-pill{
  background: rgba(58,88,138,.14);
  border-color: rgba(58,88,138,.18);
  color: #294777;
}

/* títulos */
body.svc-setup #lo-que-cambia .hc-change-card h3{
  margin: 0 0 10px;
  padding-bottom: 10px;
  color: #0f233f;
  border-bottom: 1px solid rgba(16,35,59,.08);
  position: relative;
}

body.svc-setup #lo-que-cambia .hc-change-card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width: 86px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #173252, #5a7dac);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3::after{
  width: 106px;
  background: linear-gradient(90deg, #173252, #6b8fca);
}

body.svc-setup #lo-que-cambia .hc-card-intro{
  margin: 0 0 12px;
  color: rgba(16,35,59,.78);
}

/* bloques internos */
body.svc-setup #lo-que-cambia .hc-mini-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .hc-mini-block{
  padding: 13px 13px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(240,245,250,.82));
  border: 1px solid rgba(117,140,176,.14);
  box-shadow:
    0 10px 20px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.38);
}

body.svc-setup #lo-que-cambia .hc-mini-label{
  display: inline-flex;
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(16,35,59,.07);
  border: 1px solid rgba(16,35,59,.09);
  color: rgba(16,35,59,.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .hc-mini-block p{
  margin: 0;
  color: rgba(16,35,59,.78);
}

/* bullets compactas */
body.svc-setup #lo-que-cambia .hc-bullets{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

body.svc-setup #lo-que-cambia .hc-bullets li{
  position: relative;
  padding-left: 15px;
  color: rgba(16,35,59,.82);
  line-height: 1.22;
}

body.svc-setup #lo-que-cambia .hc-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #516f9e;
  box-shadow: 0 0 0 4px rgba(81,111,158,.10);
}

/* strip superior de resultado */
body.svc-setup #lo-que-cambia .hc-result-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .hc-result-strip-item{
  padding: 13px 12px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(236,243,250,.84));
  border: 1px solid rgba(112,141,184,.18);
  box-shadow:
    0 12px 22px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.44);
}

body.svc-setup #lo-que-cambia .hc-result-strip-item strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-setup #lo-que-cambia .hc-result-strip-item span{
  display: block;
  color: rgba(16,35,59,.76);
  font-size: 13px;
  line-height: 1.28;
}

/* layout interno resultado */
body.svc-setup #lo-que-cambia .hc-result-layout{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .hc-result-panel{
  padding: 13px 14px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(249,251,254,.88), rgba(234,241,248,.86));
  border: 1px solid rgba(94,121,165,.16);
  box-shadow:
    0 10px 20px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.38);
}

body.svc-setup #lo-que-cambia .hc-result-proof{
  display: grid;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .hc-proof{
  position: relative;
  padding: 14px 13px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(236,243,250,.84));
  border: 1px solid rgba(112,141,184,.18);
  box-shadow:
    0 12px 22px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.44);
}

body.svc-setup #lo-que-cambia .hc-proof::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 5px;
  background: linear-gradient(180deg, #355b94, #86a7d6);
}

body.svc-setup #lo-que-cambia .hc-proof strong{
  display:block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.18;
}

/* chips */
body.svc-setup #lo-que-cambia .hc-magnets{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

body.svc-setup #lo-que-cambia .hc-magnet{
  padding: 9px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(16,35,59,.09);
  color: rgba(16,35,59,.76);
  font-weight: 700;
  box-shadow:
    0 6px 12px rgba(16,35,59,.05),
    inset 0 1px 0 rgba(255,255,255,.24);
}

/* banner visible sobre fondo azul */
body.svc-setup #lo-que-cambia .hc-quote{
  margin-top: 18px;
}

body.svc-setup #lo-que-cambia .hc-quote--banner{
  display: block;
}

body.svc-setup #lo-que-cambia .hc-quote-inner{
  padding: 18px 20px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(255,255,255,.16), transparent 74%),
    linear-gradient(145deg, rgba(248,251,255,.94), rgba(231,240,249,.92));
  box-shadow:
    0 20px 40px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.40);
}

body.svc-setup #lo-que-cambia .hc-quote-text{
  margin: 0 0 4px;
  color: #10233b;
  font-size: 16px;
  line-height: 1.32;
  font-weight: 700;
}

body.svc-setup #lo-que-cambia .hc-quote-sub{
  color: rgba(16,35,59,.72);
  font-weight: 600;
}

@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .hc-change-flow--mosaic{
    grid-template-columns: 1fr;
    grid-template-areas:
      "before"
      "after"
      "result";
  }

  body.svc-setup #lo-que-cambia .hc-mini-grid,
  body.svc-setup #lo-que-cambia .hc-result-strip,
  body.svc-setup #lo-que-cambia .hc-result-layout{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   2 cards arriba + resultado ancho completo abajo
========================================================= */

/* layout */
body.svc-setup #lo-que-cambia .hc-change-flow--two-up{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "before after"
    "result result";
  gap: 18px;
  align-items: stretch;
}

body.svc-setup #lo-que-cambia .hc-change-card.is-before{ grid-area: before; }
body.svc-setup #lo-que-cambia .hc-change-card.is-after{ grid-area: after; }
body.svc-setup #lo-que-cambia .hc-change-card.is-result{ grid-area: result; }

/* cards base */
body.svc-setup #lo-que-cambia .hc-change-card{
  position: relative;
  padding: 20px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 36px rgba(4,14,31,.18),
    0 8px 18px rgba(4,14,31,.08),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.svc-setup #lo-que-cambia .hc-change-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 46px rgba(4,14,31,.22),
    0 10px 22px rgba(4,14,31,.10),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* texturas */
body.svc-setup #lo-que-cambia .hc-change-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(140px 80px at 92% 12%, rgba(255,255,255,.12), transparent 72%),
    radial-gradient(90px 54px at 10% 88%, rgba(255,255,255,.05), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 26%);
  opacity:.95;
}

body.svc-setup #lo-que-cambia .hc-change-card::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(95,128,182,.82), rgba(255,255,255,.10));
}

/* fondo individual */
body.svc-setup #lo-que-cambia .hc-change-card.is-before{
  background:
    radial-gradient(240px 140px at 0% 0%, rgba(145,165,198,.16), transparent 72%),
    linear-gradient(180deg, rgba(248,250,252,.98), rgba(233,239,245,.96));
  border-color: rgba(170,185,208,.18);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-after{
  background:
    radial-gradient(240px 140px at 100% 0%, rgba(136,162,203,.18), transparent 72%),
    linear-gradient(180deg, rgba(245,249,252,.98), rgba(228,236,244,.96));
  border-color: rgba(156,178,210,.18);
}

/* resultado más protagonista */
body.svc-setup #lo-que-cambia .hc-change-card.is-result{
  background:
    radial-gradient(320px 170px at 100% 0%, rgba(120,156,215,.20), transparent 72%),
    radial-gradient(220px 110px at 0% 100%, rgba(85,116,170,.16), transparent 74%),
    linear-gradient(180deg, rgba(242,247,253,.99), rgba(219,230,242,.98));
  border-color: rgba(118,148,197,.34);
  box-shadow:
    0 26px 52px rgba(4,14,31,.28),
    0 12px 26px rgba(4,14,31,.12),
    0 0 0 1px rgba(118,148,197,.12),
    inset 0 1px 0 rgba(255,255,255,.16);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result::after{
  height: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,.66), rgba(76,111,177,.98), rgba(255,255,255,.10));
}

/* top */
body.svc-setup #lo-que-cambia .hc-change-top{
  margin-bottom: 10px;
}

body.svc-setup #lo-que-cambia .hc-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(16,35,59,.08);
  border: 1px solid rgba(16,35,59,.10);
  color: rgba(16,35,59,.84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 6px 12px rgba(16,35,59,.04);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-pill{
  background: rgba(55,87,140,.14);
  border-color: rgba(55,87,140,.18);
  color: #284777;
}

/* títulos */
body.svc-setup #lo-que-cambia .hc-change-card h3{
  margin: 0 0 10px;
  padding-bottom: 10px;
  color: #0f233f;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  border-bottom: 1px solid rgba(16,35,59,.08);
  position: relative;
}

body.svc-setup #lo-que-cambia .hc-change-card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width: 86px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #173252, #5a7dac);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3::after{
  width: 110px;
  background: linear-gradient(90deg, #173252, #6f8fbe);
}

body.svc-setup #lo-que-cambia .hc-card-intro{
  margin: 0 0 12px;
  color: rgba(16,35,59,.78);
  font-size: 15px;
  line-height: 1.34;
}

/* bloques internos arriba */
body.svc-setup #lo-que-cambia .hc-mini-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .hc-mini-block{
  padding: 13px 13px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(239,245,250,.82));
  border: 1px solid rgba(117,140,176,.14);
  box-shadow:
    0 10px 20px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.38);
}

body.svc-setup #lo-que-cambia .hc-mini-label{
  display: inline-flex;
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(16,35,59,.07);
  border: 1px solid rgba(16,35,59,.09);
  color: rgba(16,35,59,.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .hc-mini-block p{
  margin: 0;
  color: rgba(16,35,59,.78);
  font-size: 15px;
  line-height: 1.3;
}

/* bullets */
body.svc-setup #lo-que-cambia .hc-bullets{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

body.svc-setup #lo-que-cambia .hc-bullets li{
  position: relative;
  padding-left: 15px;
  color: rgba(16,35,59,.82);
  font-size: 15px;
  line-height: 1.22;
}

body.svc-setup #lo-que-cambia .hc-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #516f9e;
  box-shadow: 0 0 0 4px rgba(81,111,158,.10);
}

/* resultado: strip superior */
body.svc-setup #lo-que-cambia .hc-result-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .hc-result-strip-item{
  padding: 14px 13px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(236,243,250,.84));
  border: 1px solid rgba(112,141,184,.18);
  box-shadow:
    0 12px 22px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.44);
}

body.svc-setup #lo-que-cambia .hc-result-strip-item strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-setup #lo-que-cambia .hc-result-strip-item span{
  display: block;
  color: rgba(16,35,59,.76);
  font-size: 13px;
  line-height: 1.28;
}

/* resultado: layout central */
body.svc-setup #lo-que-cambia .hc-result-main{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .hc-result-panel{
  padding: 14px 14px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(249,251,254,.88), rgba(234,241,248,.86));
  border: 1px solid rgba(94,121,165,.16);
  box-shadow:
    0 10px 20px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.38);
}

body.svc-setup #lo-que-cambia .hc-result-proof{
  display: grid;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .hc-proof{
  position: relative;
  padding: 14px 13px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(236,243,250,.84));
  border: 1px solid rgba(112,141,184,.18);
  box-shadow:
    0 12px 22px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.44);
}

body.svc-setup #lo-que-cambia .hc-proof::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 5px;
  background: linear-gradient(180deg, #355b94, #86a7d6);
}

body.svc-setup #lo-que-cambia .hc-proof strong{
  display:block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-setup #lo-que-cambia .hc-proof span{
  color: rgba(16,35,59,.76);
  font-size: 13px;
  line-height: 1.28;
}

/* chips */
body.svc-setup #lo-que-cambia .hc-magnets{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

body.svc-setup #lo-que-cambia .hc-magnet{
  padding: 9px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(16,35,59,.09);
  color: rgba(16,35,59,.76);
  font-size: 13px;
  font-weight: 700;
  box-shadow:
    0 6px 12px rgba(16,35,59,.05),
    inset 0 1px 0 rgba(255,255,255,.24);
}

/* banner visible */
body.svc-setup #lo-que-cambia .hc-quote{
  margin-top: 18px;
}

body.svc-setup #lo-que-cambia .hc-quote-inner{
  padding: 18px 20px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(255,255,255,.16), transparent 74%),
    linear-gradient(145deg, rgba(248,251,255,.95), rgba(231,240,249,.93));
  box-shadow:
    0 20px 40px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.40);
}

body.svc-setup #lo-que-cambia .hc-quote-text{
  margin: 0 0 4px;
  color: #10233b;
  font-size: 16px;
  line-height: 1.32;
  font-weight: 700;
}

body.svc-setup #lo-que-cambia .hc-quote-sub{
  color: rgba(16,35,59,.72);
  font-size: 13px;
  line-height: 1.28;
  font-weight: 600;
}

@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .hc-change-flow--two-up{
    grid-template-columns: 1fr;
    grid-template-areas:
      "before"
      "after"
      "result";
  }

  body.svc-setup #lo-que-cambia .hc-mini-grid,
  body.svc-setup #lo-que-cambia .hc-result-strip,
  body.svc-setup #lo-que-cambia .hc-result-main{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   Override compacto / minimalista / más color sutil
========================================================= */

body.svc-setup #lo-que-cambia .hc-change-flow--two-up{
  gap: 14px;
}

/* cards más compactas */
body.svc-setup #lo-que-cambia .hc-change-card{
  padding: 16px 16px 14px;
  border-radius: 20px;
  box-shadow:
    0 12px 24px rgba(4,14,31,.14),
    0 4px 10px rgba(4,14,31,.06),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.svc-setup #lo-que-cambia .hc-change-card:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 28px rgba(4,14,31,.18),
    0 6px 12px rgba(4,14,31,.08),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* menos blanco, más identidad */
body.svc-setup #lo-que-cambia .hc-change-card.is-before{
  background:
    radial-gradient(180px 90px at 0% 0%, rgba(108,139,190,.14), transparent 72%),
    linear-gradient(180deg, rgba(243,247,252,.98), rgba(228,235,243,.96));
  border-color: rgba(138,158,190,.18);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-after{
  background:
    radial-gradient(180px 90px at 100% 0%, rgba(88,132,210,.16), transparent 72%),
    linear-gradient(180deg, rgba(241,246,252,.98), rgba(224,232,242,.96));
  border-color: rgba(122,149,194,.20);
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result{
  background:
    radial-gradient(220px 110px at 100% 0%, rgba(70,117,194,.18), transparent 72%),
    radial-gradient(120px 70px at 0% 100%, rgba(118,142,181,.12), transparent 74%),
    linear-gradient(180deg, rgba(236,243,251,.99), rgba(214,226,240,.98));
  border-color: rgba(96,128,184,.30);
  box-shadow:
    0 18px 34px rgba(4,14,31,.22),
    0 8px 18px rgba(4,14,31,.10),
    0 0 0 1px rgba(96,128,184,.10),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* textura más sutil */
body.svc-setup #lo-que-cambia .hc-change-card::before{
  background:
    radial-gradient(90px 52px at 90% 14%, rgba(255,255,255,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 24%);
  opacity: .9;
}

body.svc-setup #lo-que-cambia .hc-change-card::after{
  left: 14px;
  right: 14px;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.45), rgba(91,122,173,.80), rgba(255,255,255,.08));
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result::after{
  height: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,.52), rgba(66,104,170,.96), rgba(255,255,255,.08));
}

/* pill superior */
body.svc-setup #lo-que-cambia .hc-pill{
  padding: 7px 10px;
  font-size: 9px;
  letter-spacing: .16em;
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result .hc-pill{
  background: rgba(51,88,150,.14);
  color: #23457d;
}

/* títulos más pequeños */
body.svc-setup #lo-que-cambia .hc-change-card h3{
  margin: 0 0 8px;
  padding-bottom: 8px;
  font-size: 17px;
  line-height: 1.12;
}

body.svc-setup #lo-que-cambia .hc-change-card h3::after{
  width: 68px;
  height: 2px;
}

body.svc-setup #lo-que-cambia .hc-change-card.is-result h3::after{
  width: 84px;
}

/* intro */
body.svc-setup #lo-que-cambia .hc-card-intro{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.32;
}

/* mini bloques */
body.svc-setup #lo-que-cambia .hc-mini-grid{
  gap: 8px;
  margin-bottom: 10px;
}

body.svc-setup #lo-que-cambia .hc-mini-block{
  padding: 11px 11px 10px;
  border-radius: 14px;
  box-shadow:
    0 8px 14px rgba(16,35,59,.06),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .hc-mini-label{
  margin-bottom: 6px;
  padding: 6px 9px;
  font-size: 9px;
  letter-spacing: .14em;
}

body.svc-setup #lo-que-cambia .hc-mini-block p{
  font-size: 14px;
  line-height: 1.24;
}

/* bullets más compactas */
body.svc-setup #lo-que-cambia .hc-bullets{
  gap: 5px;
}

body.svc-setup #lo-que-cambia .hc-bullets li{
  padding-left: 13px;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-setup #lo-que-cambia .hc-bullets li::before{
  top: 6px;
  width: 4px;
  height: 4px;
  box-shadow: 0 0 0 3px rgba(81,111,158,.10);
}

/* strip de resultado */
body.svc-setup #lo-que-cambia .hc-result-strip{
  gap: 8px;
  margin-bottom: 10px;
}

body.svc-setup #lo-que-cambia .hc-result-strip-item{
  padding: 11px 11px 10px;
  border-radius: 14px;
}

body.svc-setup #lo-que-cambia .hc-result-strip-item strong{
  font-size: 13px;
  line-height: 1.15;
  margin-bottom: 3px;
}

body.svc-setup #lo-que-cambia .hc-result-strip-item span{
  font-size: 12px;
  line-height: 1.2;
}

/* layout central resultado */
body.svc-setup #lo-que-cambia .hc-result-main{
  gap: 8px;
  margin-bottom: 10px;
}

body.svc-setup #lo-que-cambia .hc-result-panel{
  padding: 11px 12px 10px;
  border-radius: 14px;
}

body.svc-setup #lo-que-cambia .hc-proof{
  padding: 11px 11px 10px;
  border-radius: 14px;
}

body.svc-setup #lo-que-cambia .hc-proof strong{
  font-size: 13px;
  line-height: 1.15;
  margin-bottom: 3px;
}

body.svc-setup #lo-que-cambia .hc-proof span{
  font-size: 12px;
  line-height: 1.18;
}

/* chips inferiores */
body.svc-setup #lo-que-cambia .hc-magnets{
  gap: 6px;
  margin-top: 10px;
}

body.svc-setup #lo-que-cambia .hc-magnet{
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
}

/* banner más visible pero compacto */
body.svc-setup #lo-que-cambia .hc-quote{
  margin-top: 14px;
}

body.svc-setup #lo-que-cambia .hc-quote-inner{
  padding: 14px 16px 13px;
  border-radius: 16px;
  background:
    radial-gradient(180px 70px at 100% 0%, rgba(255,255,255,.14), transparent 74%),
    linear-gradient(145deg, rgba(240,246,253,.96), rgba(221,231,243,.94));
  border: 1px solid rgba(123,150,191,.18);
  box-shadow:
    0 14px 24px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .hc-quote-text{
  font-size: 15px;
  line-height: 1.26;
  color: #10233b;
}

body.svc-setup #lo-que-cambia .hc-quote-sub{
  font-size: 12px;
  line-height: 1.2;
  color: rgba(16,35,59,.72);
}

@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .hc-change-flow--two-up{
    grid-template-columns: 1fr;
    grid-template-areas:
      "before"
      "after"
      "result";
  }

  body.svc-setup #lo-que-cambia .hc-mini-grid,
  body.svc-setup #lo-que-cambia .hc-result-strip,
  body.svc-setup #lo-que-cambia .hc-result-main{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   REDISEÑO NUEVO / COMPLETO
   (para la versión HTML con clases lc-...)
========================================================= */

body.svc-setup #lo-que-cambia{
  position: relative;
  overflow: hidden;
  padding: 82px 0 84px;
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(255,255,255,.05), transparent 58%),
    radial-gradient(700px 280px at 100% 10%, rgba(88,132,210,.10), transparent 58%);
}

/* =========================
   CABECERA DE LA SECCIÓN
========================= */
body.svc-setup #lo-que-cambia .hc-change-head{
  max-width: 920px;
  margin-bottom: 22px;
}

body.svc-setup #lo-que-cambia .hc-change-title{
  margin: 0 0 10px;
  color: #ffffff;
}

body.svc-setup #lo-que-cambia .hc-change-lead{
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 17px;
  line-height: 1.55;
}

/* =========================
   WRAPPER GENERAL
========================= */
body.svc-setup #lo-que-cambia .lc-section{
  position: relative;
}

/* =========================
   RUTA SUPERIOR
========================= */
body.svc-setup #lo-que-cambia .lc-path{
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

body.svc-setup #lo-que-cambia .lc-path-step{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

body.svc-setup #lo-que-cambia .lc-path-step.is-result{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
}

body.svc-setup #lo-que-cambia .lc-path-line{
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
}

/* =========================
   GRID SUPERIOR
========================= */
body.svc-setup #lo-que-cambia .lc-grid-top{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

/* =========================
   CARD BASE
========================= */
body.svc-setup #lo-que-cambia .lc-card,
body.svc-setup #lo-que-cambia .lc-result{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 20px 44px rgba(4,14,31,.20),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* texturas / reflejos */
body.svc-setup #lo-que-cambia .lc-card::before,
body.svc-setup #lo-que-cambia .lc-result::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(140px 80px at 90% 10%, rgba(255,255,255,.12), transparent 72%),
    radial-gradient(90px 52px at 12% 90%, rgba(255,255,255,.05), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 24%);
  opacity: .95;
}

body.svc-setup #lo-que-cambia .lc-card::after,
body.svc-setup #lo-que-cambia .lc-result::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

/* =========================
   FONDOS DIFERENCIADOS
========================= */
body.svc-setup #lo-que-cambia .lc-card--before{
  background:
    radial-gradient(220px 120px at 0% 0%, rgba(174,188,209,.16), transparent 72%),
    linear-gradient(180deg, rgba(248,250,253,.98), rgba(231,238,245,.96));
}

body.svc-setup #lo-que-cambia .lc-card--during{
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(146,170,208,.18), transparent 72%),
    linear-gradient(180deg, rgba(245,249,253,.98), rgba(226,235,244,.96));
}

body.svc-setup #lo-que-cambia .lc-result{
  background:
    radial-gradient(280px 140px at 100% 0%, rgba(110,151,216,.22), transparent 72%),
    radial-gradient(200px 100px at 0% 100%, rgba(78,112,168,.16), transparent 72%),
    linear-gradient(180deg, rgba(241,247,253,.99), rgba(215,228,243,.98));
  border-color: rgba(118,150,199,.30);
  box-shadow:
    0 26px 56px rgba(4,14,31,.24),
    0 0 0 1px rgba(118,150,199,.10),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* =========================
   INTERIOR
========================= */
body.svc-setup #lo-que-cambia .lc-card{
  padding: 18px 18px 16px;
}

body.svc-setup #lo-que-cambia .lc-result{
  padding: 18px 18px 16px;
}

/* =========================
   HEADING INTERNO
========================= */
body.svc-setup #lo-que-cambia .lc-card-top{
  margin-bottom: 10px;
}

body.svc-setup #lo-que-cambia .lc-eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(16,35,59,.08);
  border: 1px solid rgba(16,35,59,.10);
  color: rgba(16,35,59,.84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .lc-eyebrow--result{
  background: rgba(49,83,140,.14);
  border-color: rgba(49,83,140,.18);
  color: #24467c;
}

body.svc-setup #lo-que-cambia .lc-card h3,
body.svc-setup #lo-que-cambia .lc-result h3{
  margin: 10px 0 0;
  padding-bottom: 10px;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #0f233f;
  border-bottom: 1px solid rgba(16,35,59,.08);
  position: relative;
}

body.svc-setup #lo-que-cambia .lc-card h3::after,
body.svc-setup #lo-que-cambia .lc-result h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 74px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #173252, #5678aa);
}

body.svc-setup #lo-que-cambia .lc-result h3::after{
  width: 104px;
  background: linear-gradient(90deg, #173252, #6b8fca);
}

/* =========================
   INTRO
========================= */
body.svc-setup #lo-que-cambia .lc-intro,
body.svc-setup #lo-que-cambia .lc-result-intro{
  margin: 12px 0 0;
  color: rgba(16,35,59,.80);
  font-size: 15px;
  line-height: 1.34;
}

/* =========================
   MINI BLOQUES
========================= */
body.svc-setup #lo-que-cambia .lc-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .lc-mini{
  padding: 12px 12px 11px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(240,245,250,.86));
  border: 1px solid rgba(117,140,176,.14);
  box-shadow:
    0 10px 18px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .lc-mini-label{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 8px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(16,35,59,.07);
  border: 1px solid rgba(16,35,59,.09);
  color: rgba(16,35,59,.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .lc-mini p{
  margin: 0;
  color: rgba(16,35,59,.78);
  font-size: 15px;
  line-height: 1.28;
}

/* =========================
   LISTAS
========================= */
body.svc-setup #lo-que-cambia .lc-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

body.svc-setup #lo-que-cambia .lc-list li{
  position: relative;
  padding-left: 15px;
  color: rgba(16,35,59,.82);
  font-size: 15px;
  line-height: 1.24;
}

body.svc-setup #lo-que-cambia .lc-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #516f9e;
  box-shadow: 0 0 0 4px rgba(81,111,158,.10);
}

/* =========================
   TAGS
========================= */
body.svc-setup #lo-que-cambia .lc-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

body.svc-setup #lo-que-cambia .lc-tags span{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(16,35,59,.09);
  color: rgba(16,35,59,.76);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow:
    0 6px 12px rgba(16,35,59,.05),
    inset 0 1px 0 rgba(255,255,255,.24);
}

/* =========================
   RESULTADO
========================= */
body.svc-setup #lo-que-cambia .lc-result-head{
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .lc-result-highlights{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .lc-highlight{
  padding: 13px 13px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(236,243,250,.84));
  border: 1px solid rgba(112,141,184,.18);
  box-shadow:
    0 10px 18px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .lc-highlight strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-setup #lo-que-cambia .lc-highlight span{
  display: block;
  color: rgba(16,35,59,.76);
  font-size: 13px;
  line-height: 1.28;
}

body.svc-setup #lo-que-cambia .lc-result-grid{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 10px;
  align-items: stretch;
}

body.svc-setup #lo-que-cambia .lc-result-box{
  padding: 13px 13px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(249,251,254,.88), rgba(234,241,248,.86));
  border: 1px solid rgba(94,121,165,.16);
  box-shadow:
    0 10px 18px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .lc-proof-stack{
  display: grid;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .lc-proof{
  position: relative;
  padding: 13px 13px 12px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(236,243,250,.84));
  border: 1px solid rgba(112,141,184,.18);
  box-shadow:
    0 10px 18px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .lc-proof::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #355b94, #86a7d6);
}

body.svc-setup #lo-que-cambia .lc-proof strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-setup #lo-que-cambia .lc-proof span{
  color: rgba(16,35,59,.76);
  font-size: 13px;
  line-height: 1.28;
}

/* =========================
   BANNER
========================= */
body.svc-setup #lo-que-cambia .lc-banner{
  margin-top: 16px;
  padding: 16px 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(255,255,255,.16), transparent 74%),
    linear-gradient(145deg, rgba(246,250,254,.95), rgba(229,238,247,.93));
  box-shadow:
    0 16px 30px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .lc-banner p{
  margin: 0 0 4px;
  color: #10233b;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

body.svc-setup #lo-que-cambia .lc-banner span{
  display: block;
  color: rgba(16,35,59,.72);
  font-size: 13px;
  line-height: 1.24;
  font-weight: 600;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .lc-grid-top,
  body.svc-setup #lo-que-cambia .lc-result-highlights,
  body.svc-setup #lo-que-cambia .lc-result-grid,
  body.svc-setup #lo-que-cambia .lc-split{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia .lc-path{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.svc-setup #lo-que-cambia .lc-path-line{
    display: none;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA (lc2): rediseño completo
========================================================= */

body.svc-setup #lo-que-cambia.lc2{
  background:
    radial-gradient(1100px 560px at 18% 0%, rgba(16,123,255,.10), transparent 62%),
    radial-gradient(900px 560px at 86% 10%, rgba(0,210,255,.05), transparent 62%),
    linear-gradient(180deg, rgba(7,22,48,.02), rgba(255,255,255,0) 60%);
}

body.svc-setup .lc2-head{
  margin-bottom: 18px;
}
body.svc-setup .lc2-title{
  margin: 10px 0 10px;
  font-size: 40px;
  letter-spacing: -0.02em;
}
body.svc-setup .lc2-lead{
  margin: 0;
  color: rgba(11,31,58,.72);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 780px;
}

/* Panel contenedor (para que se sienta sección importante) */
body.svc-setup .lc2-wrap{
  border-radius: 28px;
  border: 1px solid rgba(16,123,255,.12);
  background:
    radial-gradient(1200px 520px at 18% 0%, rgba(16,123,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.90));
  box-shadow: 0 30px 96px rgba(7,22,48,.10);
  padding: 18px;
}

/* Grid 3 columnas */
body.svc-setup .lc2-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

/* Cards */
body.svc-setup .lc2-card{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.92);
  box-shadow:
    0 22px 70px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.75) inset;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  position: relative;
}

/* Acento superior sutil (marca visual) */
body.svc-setup .lc2-card::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,123,255,.75), rgba(0,210,255,.20), rgba(16,123,255,.10));
  opacity: .9;
}

/* Top */
body.svc-setup .lc2-top{
  padding-top: 10px; /* por la línea */
}
body.svc-setup .lc2-pill{
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,31,58,.72);
  background: rgba(11,31,58,.05);
  border: 1px solid rgba(11,31,58,.08);
}
body.svc-setup .lc2-top h3{
  margin: 10px 0 0;
  font-size: 20px;
  color: rgba(11,31,58,.95);
}

/* Texto */
body.svc-setup .lc2-text{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

/* Bullets */
body.svc-setup .lc2-bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,31,58,.78);
  display: grid;
  gap: 8px;
  line-height: 1.5;
}

/* Chips */
body.svc-setup .lc2-chips{
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.svc-setup .lc2-chips span{
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(16,123,255,.06);
  border: 1px solid rgba(16,123,255,.10);
  color: rgba(11,31,58,.70);
  font-weight: 700;
  font-size: 13px;
}

/* Resultado: highlights */
body.svc-setup .lc2-highlights{
  display: grid;
  gap: 10px;
}
body.svc-setup .lc2-hl{
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(16,123,255,.06);
  border: 1px solid rgba(16,123,255,.12);
}
body.svc-setup .lc2-hl b{
  display:block;
  color: rgba(11,31,58,.95);
  margin-bottom: 3px;
}
body.svc-setup .lc2-hl span{
  display:block;
  color: rgba(11,31,58,.72);
  line-height: 1.45;
}

/* Barra final */
body.svc-setup .lc2-bar{
  margin-top: 14px;
  border-radius: 18px;
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(6,34,75,.92), rgba(6,34,75,.78));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(7,22,48,.14);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
body.svc-setup .lc2-bar p{
  margin: 0;
  color: rgba(255,255,255,.88);
  line-height: 1.5;
}
body.svc-setup .lc2-bar span{
  color: rgba(255,255,255,.78);
  font-weight: 800;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-setup .lc2-title{ font-size: 34px; }
  body.svc-setup .lc2-grid{ grid-template-columns: 1fr; }
  body.svc-setup .lc2-bar{
    flex-direction: column;
    align-items: flex-start;
  }
  body.svc-setup .lc2-bar span{ white-space: normal; }
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   REDISEÑO NUEVO REAL
========================================================= */

body.svc-setup #lo-que-cambia{
  position: relative;
  overflow: hidden;
  padding: 84px 0;
  background:
    radial-gradient(1000px 420px at 8% 0%, rgba(120,168,255,.10), transparent 60%),
    radial-gradient(820px 340px at 100% 0%, rgba(70,126,226,.12), transparent 58%),
    linear-gradient(180deg, #0d2849 0%, #14375f 100%);
}

body.svc-setup #lo-que-cambia .reframe-head{
  max-width: 860px;
  margin-bottom: 24px;
}

body.svc-setup #lo-que-cambia .reframe-head .svc-kicker{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  box-shadow: none;
}

body.svc-setup #lo-que-cambia .reframe-head .svc-title{
  color: #fff;
}

body.svc-setup #lo-que-cambia .reframe-head .svc-lead{
  color: rgba(255,255,255,.82);
  font-size: 17px;
  line-height: 1.58;
}

/* board principal */
body.svc-setup #lo-que-cambia .reframe-board{
  position: relative;
  padding: 18px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 26px 60px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

body.svc-setup #lo-que-cambia .reframe-board::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(180px 90px at 90% 10%, rgba(255,255,255,.08), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%);
}

/* línea superior */
body.svc-setup #lo-que-cambia .reframe-topline{
  display: grid;
  grid-template-columns: auto auto 1fr auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

body.svc-setup #lo-que-cambia .reframe-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8eb7ff;
  box-shadow: 0 0 0 8px rgba(142,183,255,.10);
}

body.svc-setup #lo-que-cambia .reframe-label{
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .reframe-label--strong{
  color: #ffffff;
}

body.svc-setup #lo-que-cambia .reframe-line{
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
}

/* grid nuevo */
body.svc-setup #lo-que-cambia .reframe-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "before install"
    "outcome outcome";
  gap: 16px;
}

body.svc-setup #lo-que-cambia .reframe-pane--before{ grid-area: before; }
body.svc-setup #lo-que-cambia .reframe-pane--install{ grid-area: install; }
body.svc-setup #lo-que-cambia .reframe-outcome{ grid-area: outcome; }

/* panes */
body.svc-setup #lo-que-cambia .reframe-pane,
body.svc-setup #lo-que-cambia .reframe-outcome{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 36px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.svc-setup #lo-que-cambia .reframe-pane{
  padding: 18px;
}

body.svc-setup #lo-que-cambia .reframe-outcome{
  padding: 18px;
}

/* texturas */
body.svc-setup #lo-que-cambia .reframe-pane::before,
body.svc-setup #lo-que-cambia .reframe-outcome::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120px 70px at 92% 10%, rgba(255,255,255,.14), transparent 72%),
    radial-gradient(70px 40px at 10% 90%, rgba(255,255,255,.05), transparent 72%);
}

body.svc-setup #lo-que-cambia .reframe-pane::after,
body.svc-setup #lo-que-cambia .reframe-outcome::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(96,140,214,.92), rgba(255,255,255,.08));
}

/* fondos */
body.svc-setup #lo-que-cambia .reframe-pane--before{
  background:
    radial-gradient(220px 120px at 0% 0%, rgba(180,198,222,.14), transparent 72%),
    linear-gradient(180deg, rgba(247,250,253,.98), rgba(232,238,245,.96));
}

body.svc-setup #lo-que-cambia .reframe-pane--install{
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(138,171,221,.18), transparent 72%),
    linear-gradient(180deg, rgba(243,248,253,.98), rgba(223,234,246,.96));
}

body.svc-setup #lo-que-cambia .reframe-outcome{
  background:
    radial-gradient(340px 150px at 100% 0%, rgba(103,151,231,.20), transparent 72%),
    radial-gradient(180px 100px at 0% 100%, rgba(72,110,176,.14), transparent 74%),
    linear-gradient(180deg, rgba(241,247,253,.99), rgba(215,228,243,.98));
  border-color: rgba(126,160,214,.26);
  box-shadow:
    0 24px 50px rgba(0,0,0,.20),
    0 0 0 1px rgba(126,160,214,.10),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.svc-setup #lo-que-cambia .reframe-outcome::after{
  height: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,.65), rgba(59,102,183,.98), rgba(255,255,255,.08));
}

/* encabezados */
body.svc-setup #lo-que-cambia .reframe-pane-head{
  margin-bottom: 10px;
}

body.svc-setup #lo-que-cambia .reframe-chip{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(16,35,59,.08);
  border: 1px solid rgba(16,35,59,.10);
  color: rgba(16,35,59,.84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .reframe-chip--result{
  background: rgba(51,86,146,.14);
  border-color: rgba(51,86,146,.18);
  color: #26467c;
}

body.svc-setup #lo-que-cambia .reframe-pane h3,
body.svc-setup #lo-que-cambia .reframe-outcome h3{
  margin: 12px 0 0;
  padding-bottom: 10px;
  color: #10233b;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -.02em;
  border-bottom: 1px solid rgba(16,35,59,.08);
  position: relative;
}

body.svc-setup #lo-que-cambia .reframe-pane h3::after,
body.svc-setup #lo-que-cambia .reframe-outcome h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width: 86px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #173252, #5e86c0);
}

body.svc-setup #lo-que-cambia .reframe-outcome h3::after{
  width: 108px;
  background: linear-gradient(90deg, #173252, #5d8fe2);
}

/* texto */
body.svc-setup #lo-que-cambia .reframe-copy,
body.svc-setup #lo-que-cambia .reframe-outcome-copy{
  margin: 12px 0 0;
  color: rgba(16,35,59,.80);
  font-size: 15px;
  line-height: 1.36;
}

/* notas antes */
body.svc-setup #lo-que-cambia .reframe-note-list{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

body.svc-setup #lo-que-cambia .reframe-note{
  padding: 13px 13px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(239,245,250,.86));
  border: 1px solid rgba(117,140,176,.14);
  box-shadow:
    0 10px 18px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .reframe-note small{
  display: block;
  margin-bottom: 6px;
  color: rgba(16,35,59,.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .reframe-note strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-setup #lo-que-cambia .reframe-note span{
  display: block;
  color: rgba(16,35,59,.76);
  font-size: 13px;
  line-height: 1.28;
}

/* bullets */
body.svc-setup #lo-que-cambia .reframe-bullets{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

body.svc-setup #lo-que-cambia .reframe-bullets li{
  position: relative;
  padding-left: 15px;
  color: rgba(16,35,59,.82);
  font-size: 15px;
  line-height: 1.24;
}

body.svc-setup #lo-que-cambia .reframe-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4f72a5;
  box-shadow: 0 0 0 4px rgba(79,114,165,.10);
}

body.svc-setup #lo-que-cambia .reframe-bullets--dark{
  margin-top: 10px;
}

/* pills */
body.svc-setup #lo-que-cambia .reframe-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

body.svc-setup #lo-que-cambia .reframe-pills span{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(16,35,59,.09);
  color: rgba(16,35,59,.76);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 12px rgba(16,35,59,.05);
}

body.svc-setup #lo-que-cambia .reframe-pills--result span{
  border-color: rgba(79,114,165,.14);
}

/* steps instalación */
body.svc-setup #lo-que-cambia .reframe-steps{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

body.svc-setup #lo-que-cambia .reframe-step{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 12px 11px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(239,245,250,.86));
  border: 1px solid rgba(117,140,176,.14);
  box-shadow:
    0 10px 18px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .reframe-step-no{
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #204f95, #4c84de);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(0,0,0,.14);
}

body.svc-setup #lo-que-cambia .reframe-step-copy strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-setup #lo-que-cambia .reframe-step-copy span{
  display: block;
  color: rgba(16,35,59,.76);
  font-size: 13px;
  line-height: 1.28;
}

/* resultado */
body.svc-setup #lo-que-cambia .reframe-outcome-bar{
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .reframe-outcome-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

body.svc-setup #lo-que-cambia .reframe-highlight{
  padding: 14px 13px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(236,243,250,.84));
  border: 1px solid rgba(112,141,184,.18);
  box-shadow:
    0 10px 18px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .reframe-highlight strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-setup #lo-que-cambia .reframe-highlight span{
  display: block;
  color: rgba(16,35,59,.76);
  font-size: 13px;
  line-height: 1.28;
}

body.svc-setup #lo-que-cambia .reframe-outcome-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .reframe-outcome-box{
  padding: 14px 14px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(249,251,254,.88), rgba(234,241,248,.86));
  border: 1px solid rgba(94,121,165,.16);
  box-shadow:
    0 10px 18px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .reframe-outcome-box small{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 8px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(16,35,59,.07);
  border: 1px solid rgba(16,35,59,.09);
  color: rgba(16,35,59,.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .reframe-proof-stack{
  display: grid;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .reframe-proof{
  position: relative;
  padding: 14px 13px 12px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(236,243,250,.84));
  border: 1px solid rgba(112,141,184,.18);
  box-shadow:
    0 10px 18px rgba(16,35,59,.07),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .reframe-proof::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 5px;
  background: linear-gradient(180deg, #355b94, #86a7d6);
}

body.svc-setup #lo-que-cambia .reframe-proof strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-setup #lo-que-cambia .reframe-proof span{
  display: block;
  color: rgba(16,35,59,.76);
  font-size: 13px;
  line-height: 1.28;
}

/* banner */
body.svc-setup #lo-que-cambia .reframe-banner{
  margin-top: 16px;
  padding: 16px 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(255,255,255,.14), transparent 74%),
    linear-gradient(145deg, rgba(245,249,253,.96), rgba(229,238,247,.94));
  box-shadow:
    0 16px 30px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .reframe-banner strong{
  color: #10233b;
  font-size: 15px;
  line-height: 1.30;
}

body.svc-setup #lo-que-cambia .reframe-banner span{
  color: rgba(16,35,59,.76);
  font-size: 15px;
  line-height: 1.30;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .reframe-grid,
  body.svc-setup #lo-que-cambia .reframe-outcome-strip,
  body.svc-setup #lo-que-cambia .reframe-outcome-grid{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia .reframe-topline{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.svc-setup #lo-que-cambia .reframe-line{
    display: none;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA (lc2): +contraste +panel por card +hover +CTA bar
========================================================= */

/* Más contraste general (menos blanco) */
body.svc-setup #lo-que-cambia.lc2{
  background:
    radial-gradient(1100px 560px at 18% 0%, rgba(16,123,255,.14), transparent 62%),
    radial-gradient(900px 560px at 86% 10%, rgba(0,210,255,.07), transparent 62%),
    linear-gradient(180deg, rgba(7,22,48,.04), rgba(255,255,255,0) 60%) !important;
}

body.svc-setup .lc2-wrap{
  background:
    radial-gradient(1200px 520px at 18% 0%, rgba(16,123,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,249,255,.86)) !important;
  border-color: rgba(16,123,255,.16) !important;
  box-shadow: 0 38px 120px rgba(7,22,48,.14) !important;
}

/* Hover pro (todas las tarjetas) */
body.svc-setup .lc2-card{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.svc-setup .lc2-card:hover{
  transform: translateY(-3px);
  border-color: rgba(16,123,255,.22);
  box-shadow:
    0 38px 120px rgba(7,22,48,.12),
    0 14px 30px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.80) inset;
}

/* Panel único por tarjeta (ANTES / INSTALAMOS) */
body.svc-setup .lc2-panel{
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(16,123,255,.07);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow: 0 14px 32px rgba(7,22,48,.08);
}
body.svc-setup .lc2-panel b{
  display:block;
  color: rgba(11,31,58,.95);
  margin-bottom: 4px;
}
body.svc-setup .lc2-panel span{
  display:block;
  color: rgba(11,31,58,.72);
  line-height: 1.45;
}

/* Barra final: CTA + mejor layout */
body.svc-setup .lc2-bar{
  align-items: stretch !important;
}

body.svc-setup .lc2-bar-copy{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

body.svc-setup .lc2-bar-actions{
  display:flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* Botones en la barra: consistentes y no gigantes */
body.svc-setup .lc2-bar-actions .btn{
  padding: 12px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Responsive bar */
@media (max-width: 980px){
  body.svc-setup .lc2-bar{
    flex-direction: column;
    gap: 12px;
  }
  body.svc-setup .lc2-bar-actions{
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA (lc2) — versión azul + contraste
========================================================= */

body.svc-setup #lo-que-cambia.lc2--blue{
  background:
    radial-gradient(1200px 620px at 18% 0%, rgba(16,123,255,.18), transparent 60%),
    radial-gradient(900px 680px at 86% 10%, rgba(0,210,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(6,34,75,.96), rgba(6,34,75,.82)) !important;
}

/* Head en blanco */
body.svc-setup .lc2--blue .lc2-title{
  color:#fff;
}
body.svc-setup .lc2--blue .lc2-lead{
  color: rgba(255,255,255,.78);
}
body.svc-setup .lc2--blue .lc2-kicker{
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

/* Contenedor interno (para que no “flote”) */
body.svc-setup .lc2--blue .lc2-wrap{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 44px 140px rgba(0,0,0,.22);
  padding: 18px;
}

/* Grid */
body.svc-setup .lc2--blue .lc2-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

/* Cards claras sobre azul */
body.svc-setup .lc2--blue .lc2-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.92);
  box-shadow:
    0 26px 86px rgba(0,0,0,.16),
    0 1px 0 rgba(255,255,255,.70) inset;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Hover */
body.svc-setup .lc2--blue .lc2-card:hover{
  transform: translateY(-3px);
  border-color: rgba(16,123,255,.22);
  box-shadow:
    0 38px 120px rgba(0,0,0,.18),
    0 14px 30px rgba(0,0,0,.12),
    0 1px 0 rgba(255,255,255,.80) inset;
}

/* Pill + títulos */
body.svc-setup .lc2--blue .lc2-pill{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,31,58,.72);
  background: rgba(11,31,58,.05);
  border: 1px solid rgba(11,31,58,.08);
}

body.svc-setup .lc2--blue .lc2-top h3{
  margin: 10px 0 0;
  font-size: 20px;
  color: rgba(11,31,58,.95);
}

body.svc-setup .lc2--blue .lc2-text{
  margin: 0;
  color: rgba(11,31,58,.72);
  line-height: 1.55;
}

body.svc-setup .lc2--blue .lc2-bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,31,58,.78);
  display: grid;
  gap: 8px;
  line-height: 1.5;
}

/* Panel único: siempre abajo */
body.svc-setup .lc2--blue .lc2-panel{
  margin-top: auto;
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(16,123,255,.08);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow: 0 14px 32px rgba(7,22,48,.08);
}
body.svc-setup .lc2--blue .lc2-panel b{
  display:block;
  color: rgba(11,31,58,.95);
  margin-bottom: 4px;
}
body.svc-setup .lc2--blue .lc2-panel span{
  display:block;
  color: rgba(11,31,58,.74);
  line-height: 1.45;
}

/* Barra final + CTAs */
body.svc-setup .lc2--blue .lc2-bar{
  margin-top: 14px;
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

body.svc-setup .lc2--blue .lc2-bar-copy p{
  margin: 0;
  color: rgba(255,255,255,.86);
  line-height: 1.5;
}
body.svc-setup .lc2--blue .lc2-bar-copy span{
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

body.svc-setup .lc2--blue .lc2-bar-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-setup .lc2--blue .lc2-grid{ grid-template-columns: 1fr; }
  body.svc-setup .lc2--blue .lc2-bar{
    flex-direction: column;
    align-items: flex-start;
  }
  body.svc-setup .lc2--blue .lc2-bar-actions{
    justify-content:flex-start;
    flex-wrap: wrap;
  }
}
/* =========================================================
   SETUP — Ajustes finos lc2 (contraste, barra CTA, profundidad)
========================================================= */

/* 1) Que el wrap no se vea “gris” y tenga profundidad real */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-wrap{
  background: rgba(255,255,255,.05) !important;              /* menos gris */
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    0 50px 160px rgba(0,0,0,.28),                            /* más anclado */
    0 18px 40px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 2) Cards con más “pop” (sin exagerar) */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-card{
  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 34px 110px rgba(0,0,0,.18),
    0 12px 26px rgba(0,0,0,.12),
    0 1px 0 rgba(255,255,255,.78) inset !important;
}

/* 3) Panel inferior dentro de cada card: más contraste y menos “lavado” */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-panel{
  background: rgba(16,123,255,.10) !important;              /* más azul */
  border-color: rgba(16,123,255,.18) !important;
}

/* 4) Barra CTA: legibilidad + botones con presencia */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-bar{
  background: rgba(6,34,75,.48) !important;                 /* ya no blanca */
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.22) !important;
}

body.svc-setup #lo-que-cambia.lc2--blue .lc2-bar-copy p{
  color: rgba(255,255,255,.92) !important;                  /* se lee */
}
body.svc-setup #lo-que-cambia.lc2--blue .lc2-bar-copy span{
  color: rgba(255,255,255,.78) !important;
}

/* Botón secundario en barra: que no se vea “muerto” */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-bar-actions .btn.btn-secondary{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}

/* 5) Un poco menos de “bloque” general */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-wrap{
  padding: 16px !important;                                  /* antes 18 */
}
/* =========================================================
   SETUP — LO QUE CAMBIA (lc2)
   Contraste, color y barra superior
========================================================= */

body.svc-setup #lo-que-cambia.lc2{
  position: relative;
  overflow: hidden;
  padding: 84px 0;
  background:
    radial-gradient(1000px 420px at 8% 0%, rgba(93, 148, 246, .11), transparent 58%),
    radial-gradient(760px 360px at 100% 8%, rgba(62, 112, 202, .14), transparent 56%),
    linear-gradient(180deg, #0c2747 0%, #12355d 100%);
}

/* Cabecera */
body.svc-setup #lo-que-cambia .lc2-head{
  max-width: 900px;
  margin-bottom: 24px;
}

body.svc-setup #lo-que-cambia .lc2-kicker{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  box-shadow: none;
}

body.svc-setup #lo-que-cambia .lc2-title{
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(40px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.05em;
}

body.svc-setup #lo-que-cambia .lc2-lead{
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 17px;
  line-height: 1.58;
}

/* Caja general */
body.svc-setup #lo-que-cambia .lc2-wrap{
  position: relative;
  padding: 18px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:
    0 28px 64px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

body.svc-setup #lo-que-cambia .lc2-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(180px 80px at 94% 10%, rgba(255,255,255,.08), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%);
}

/* ========================================
   BARRA SUPERIOR
======================================== */
body.svc-setup #lo-que-cambia .lc2-track{
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 0 16px;
  margin-bottom: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.svc-setup #lo-que-cambia .lc2-track-dot{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #86b1ff;
  box-shadow:
    0 0 0 10px rgba(134,177,255,.10),
    0 0 18px rgba(134,177,255,.35);
}

body.svc-setup #lo-que-cambia .lc2-track-item{
  display: inline-flex;
  align-items: center;
}

body.svc-setup #lo-que-cambia .lc2-track-item span{
  color: rgba(255,255,255,.84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .lc2-track-item.is-active span{
  color: #ffffff;
}

body.svc-setup #lo-que-cambia .lc2-track-line{
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
}

/* Grid cards */
body.svc-setup #lo-que-cambia .lc2-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Cards */
body.svc-setup #lo-que-cambia .lc2-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px 24px 22px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.svc-setup #lo-que-cambia .lc2-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130px 70px at 92% 10%, rgba(255,255,255,.22), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 26%);
}

body.svc-setup #lo-que-cambia .lc2-card::after{
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 20px;
  height: 4px;
  border-radius: 999px;
}

/* Cada card con identidad distinta */
body.svc-setup #lo-que-cambia .lc2-card--before{
  background:
    radial-gradient(220px 120px at 0% 0%, rgba(181,197,221,.16), transparent 72%),
    linear-gradient(180deg, rgba(248,250,253,.98), rgba(233,239,245,.96));
}

body.svc-setup #lo-que-cambia .lc2-card--before::after{
  background: linear-gradient(90deg, #7fa7e9, rgba(127,167,233,.18));
}

body.svc-setup #lo-que-cambia .lc2-card--during{
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(151,178,220,.18), transparent 72%),
    linear-gradient(180deg, rgba(245,249,253,.98), rgba(226,235,245,.96));
}

body.svc-setup #lo-que-cambia .lc2-card--during::after{
  background: linear-gradient(90deg, #6d95da, rgba(109,149,218,.18));
}

body.svc-setup #lo-que-cambia .lc2-card--after{
  background:
    radial-gradient(260px 140px at 100% 0%, rgba(109,153,226,.24), transparent 72%),
    radial-gradient(140px 90px at 0% 100%, rgba(91,123,177,.14), transparent 72%),
    linear-gradient(180deg, rgba(241,247,253,.99), rgba(215,228,243,.98));
  border-color: rgba(126,158,210,.26);
  box-shadow:
    0 24px 48px rgba(0,0,0,.18),
    0 0 0 1px rgba(126,158,210,.10),
    inset 0 1px 0 rgba(255,255,255,.60);
}

body.svc-setup #lo-que-cambia .lc2-card--after::after{
  background: linear-gradient(90deg, #4d7fd8, rgba(77,127,216,.18));
}

/* Top */
body.svc-setup #lo-que-cambia .lc2-top{
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
}

body.svc-setup #lo-que-cambia .lc2-pill{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(16,35,59,.07);
  border: 1px solid rgba(16,35,59,.10);
  color: rgba(16,35,59,.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .lc2-card--after .lc2-pill{
  background: rgba(63,95,152,.12);
  border-color: rgba(63,95,152,.16);
  color: #26477d;
}

body.svc-setup #lo-que-cambia .lc2-card h3{
  margin: 14px 0 0;
  padding-bottom: 10px;
  color: #10233b;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -.02em;
  border-bottom: 1px solid rgba(16,35,59,.08);
  position: relative;
}

body.svc-setup #lo-que-cambia .lc2-card h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 88px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #173252, #6086bf);
}

body.svc-setup #lo-que-cambia .lc2-card--after h3::after{
  background: linear-gradient(90deg, #173252, #4f82db);
}

/* Textos */
body.svc-setup #lo-que-cambia .lc2-text{
  position: relative;
  z-index: 2;
  margin: 12px 0 0;
  color: rgba(16,35,59,.80);
  font-size: 16px;
  line-height: 1.46;
}

/* Bullets */
body.svc-setup #lo-que-cambia .lc2-bullets{
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

body.svc-setup #lo-que-cambia .lc2-bullets li{
  position: relative;
  padding-left: 17px;
  color: rgba(16,35,59,.82);
  font-size: 16px;
  line-height: 1.42;
}

body.svc-setup #lo-que-cambia .lc2-bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5d82b8;
  box-shadow: 0 0 0 4px rgba(93,130,184,.10);
}

/* Panel inferior */
body.svc-setup #lo-que-cambia .lc2-panel{
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid rgba(121,154,206,.22);
  box-shadow:
    0 12px 24px rgba(16,35,59,.08),
    inset 0 1px 0 rgba(255,255,255,.34);
}

body.svc-setup #lo-que-cambia .lc2-panel b{
  display: block;
  margin-bottom: 8px;
  color: #10233b;
  font-size: 17px;
  line-height: 1.2;
}

body.svc-setup #lo-que-cambia .lc2-panel span{
  display: block;
  color: rgba(16,35,59,.78);
  font-size: 16px;
  line-height: 1.45;
}

body.svc-setup #lo-que-cambia .lc2-panel--before{
  background:
    linear-gradient(180deg, rgba(234,241,252,.92), rgba(222,232,247,.88));
}

body.svc-setup #lo-que-cambia .lc2-panel--during{
  background:
    linear-gradient(180deg, rgba(230,239,252,.92), rgba(216,229,246,.88));
}

body.svc-setup #lo-que-cambia .lc2-panel--after{
  background:
    linear-gradient(180deg, rgba(226,237,253,.94), rgba(210,224,245,.90));
  border-color: rgba(95,136,206,.24);
}

/* Barra final */
body.svc-setup #lo-que-cambia .lc2-bar{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(120,163,241,.12), transparent 74%),
    linear-gradient(145deg, rgba(23,49,88,.96), rgba(32,64,110,.94));
  box-shadow:
    0 18px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.svc-setup #lo-que-cambia .lc2-bar-copy p{
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.38;
  font-weight: 700;
}

body.svc-setup #lo-que-cambia .lc2-bar-copy span{
  display: block;
  color: rgba(255,255,255,.74);
  font-size: 14px;
  line-height: 1.32;
  font-weight: 600;
}

body.svc-setup #lo-que-cambia .lc2-bar-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.svc-setup #lo-que-cambia .lc2-bar-actions .btn{
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: none;
}

body.svc-setup #lo-que-cambia .lc2-bar-actions .btn-primary{
  background: #ffffff;
  color: #10233b;
  border: 1px solid rgba(255,255,255,.24);
}

body.svc-setup #lo-que-cambia .lc2-bar-actions .btn-secondary{
  background: rgba(255,255,255,.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.14);
}

/* Responsive */
@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .lc2-grid{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia .lc2-bar{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia .lc2-bar-actions{
    justify-content: flex-start;
  }

  body.svc-setup #lo-que-cambia .lc2-track{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }

  body.svc-setup #lo-que-cambia .lc2-track-line,
  body.svc-setup #lo-que-cambia .lc2-track-dot{
    display: none;
  }
}
/* =========================================================
   SETUP — Track superior: quitar panel y dejar SOLO la línea
========================================================= */

/* 1) Quita el “panel/cápsula” del contenedor */
body.svc-setup #lo-que-cambia .lc2-track{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 2) Si el panel viene por pseudo-elementos */
body.svc-setup #lo-que-cambia .lc2-track::before,
body.svc-setup #lo-que-cambia .lc2-track::after{
  content: none !important;
  display: none !important;
}

/* 3) Deja la línea visible y más “clean” */
body.svc-setup #lo-que-cambia .lc2-track-line{
  height: 2px !important;
  background: rgba(255,255,255,.18) !important; /* si tu fondo es azul */
  border-radius: 999px;
}

/* 4) Items: sin cajita, solo texto */
body.svc-setup #lo-que-cambia .lc2-track-item{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 5) Texto */
body.svc-setup #lo-que-cambia .lc2-track-item span{
  color: rgba(255,255,255,.78) !important; /* fondo azul */
  letter-spacing: .14em;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}

/* 6) Activo: más marcado */
body.svc-setup #lo-que-cambia .lc2-track-item.is-active span{
  color: rgba(255,255,255,.95) !important;
}

/* 7) Dot: más sutil */
body.svc-setup #lo-que-cambia .lc2-track-dot{
  background: rgba(255,255,255,.35) !important;
  box-shadow: none !important;
}
/* =========================================================
   SETUP — LO QUE CAMBIA: sección clara + panel azul SOLO en wrap + track pegado
========================================================= */

/* 1) Quita el background azul de la SECCIÓN completa */
body.svc-setup #lo-que-cambia.lc2--blue{
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(16,123,255,.08), transparent 62%),
    radial-gradient(900px 520px at 86% 10%, rgba(0,210,255,.04), transparent 62%),
    linear-gradient(180deg, rgba(245,249,255,1), rgba(255,255,255,1)) !important;
}

/* Head vuelve a tonos oscuros (porque el fondo ya es claro) */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-title{
  color: rgba(11,31,58,.95) !important;
}
body.svc-setup #lo-que-cambia.lc2--blue .lc2-lead{
  color: rgba(11,31,58,.72) !important;
}
body.svc-setup #lo-que-cambia.lc2--blue .lc2-kicker{
  color: rgba(11,31,58,.72) !important;
  background: rgba(11,31,58,.05) !important;
  border: 1px solid rgba(11,31,58,.08) !important;
}

/* 2) Deja el AZUL SOLO en el panel que cubre las cards (.lc2-wrap) */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-wrap{
  background:
    radial-gradient(1200px 560px at 18% 10%, rgba(16,123,255,.18), transparent 62%),
    radial-gradient(900px 620px at 86% 12%, rgba(0,210,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(6,34,75,.94), rgba(6,34,75,.80)) !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 46px 150px rgba(7,22,48,.22),
    0 18px 40px rgba(7,22,48,.14) !important;

  padding: 16px !important;           /* un poco más compacto */
}

/* 3) Track: sin panel (ya lo tenías), pero PEGADO a las cards */
body.svc-setup #lo-que-cambia .lc2-track{
  margin: 0 0 10px 0 !important;      /* menos espacio abajo */
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Si había pseudo panel */
body.svc-setup #lo-que-cambia .lc2-track::before,
body.svc-setup #lo-que-cambia .lc2-track::after{
  content: none !important;
  display: none !important;
}

/* Línea e items en BLANCO porque están sobre el panel azul */
body.svc-setup #lo-que-cambia .lc2-track-line{
  height: 2px !important;
  background: rgba(255,255,255,.18) !important;
  border-radius: 999px;
}
body.svc-setup #lo-que-cambia .lc2-track-item{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.svc-setup #lo-que-cambia .lc2-track-item span{
  color: rgba(255,255,255,.78) !important;
  letter-spacing: .14em;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
}
body.svc-setup #lo-que-cambia .lc2-track-item.is-active span{
  color: rgba(255,255,255,.95) !important;
}
body.svc-setup #lo-que-cambia .lc2-track-dot{
  background: rgba(255,255,255,.35) !important;
  box-shadow: none !important;
}

/* 4) Cards sobre azul: más contraste */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-card{
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 30px 96px rgba(0,0,0,.16),
    0 12px 26px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.80) inset !important;
}

/* Panel interno de cada card (abajo) */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-panel{
  background: rgba(16,123,255,.09) !important;
  border: 1px solid rgba(16,123,255,.16) !important;
}

/* 5) Barra CTA: que no se vea “gris” ni deslavada */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-bar{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
body.svc-setup #lo-que-cambia.lc2--blue .lc2-bar-copy p{
  color: rgba(255,255,255,.90) !important;
}
body.svc-setup #lo-que-cambia.lc2--blue .lc2-bar-copy span{
  color: rgba(255,255,255,.74) !important;
}

/* Botón secundario visible sobre azul */
body.svc-setup #lo-que-cambia.lc2--blue .lc2-bar .btn.btn-secondary{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
/* =========================================================
   SETUP — Track pegado a cards (menos aire)
========================================================= */

/* reduce espacio debajo del track */
body.svc-setup #lo-que-cambia .lc2-track{
  margin-bottom: 4px !important;   /* antes 10px */
}

/* reduce espacio arriba del grid/cards */
body.svc-setup #lo-que-cambia .lc2-grid{
  margin-top: 4px !important;
}

/* si tu wrap tiene padding grande, bájalo un poco */
body.svc-setup #lo-que-cambia .lc2-wrap{
  padding-top: 12px !important;    /* ajusta: 10–14 */
}
/* =========================================================
   SETUP — LO QUE CAMBIA (lc3): réplica “Mapa rápido”
========================================================= */

body.svc-setup #lo-que-cambia.lc3{
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(16,123,255,.08), transparent 62%),
    radial-gradient(900px 520px at 86% 10%, rgba(0,210,255,.04), transparent 62%),
    linear-gradient(180deg, rgba(245,249,255,1), rgba(255,255,255,1));
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Head */
body.svc-setup .lc3-kicker{
  display:inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(16,123,255,.95);
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.18);
}
body.svc-setup .lc3-title{
  margin: 14px 0 10px;
  font-size: 46px;
  letter-spacing: -0.03em;
  color: rgba(11,31,58,.95);
}
body.svc-setup .lc3-lead{
  margin: 0 0 18px;
  max-width: 900px;
  color: rgba(11,31,58,.70);
  line-height: 1.55;
  font-size: 16.5px;
}

/* Track: solo línea (pegada a cards) */
body.svc-setup .lc3-track{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 0;
  margin: 6px 0 10px; /* pegado */
}
body.svc-setup .lc3-track-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(16,123,255,.45);
}
body.svc-setup .lc3-track-line{
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: rgba(11,31,58,.14);
}
body.svc-setup .lc3-track-item span{
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(11,31,58,.55);
  white-space: nowrap;
}
body.svc-setup .lc3-track-item.is-active span{
  color: rgba(11,31,58,.88);
}

/* Grid 3 cards */
body.svc-setup .lc3-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* Card base (como tu screenshot) */
body.svc-setup .lc3-card{
  border-radius: 26px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(16,123,255,.12);
  box-shadow:
    0 28px 90px rgba(7,22,48,.10),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.85) inset;
  padding: 22px;
  display:flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Acento superior */
body.svc-setup .lc3-card::before{
  content:"";
  position:absolute;
  left: 18px; right: 18px; top: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,123,255,.85), rgba(16,123,255,.15));
  opacity: .95;
}

body.svc-setup .lc3-card:hover{
  transform: translateY(-3px);
  border-color: rgba(16,123,255,.20);
  box-shadow:
    0 38px 120px rgba(7,22,48,.12),
    0 14px 30px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.88) inset;
}

/* Featured (card del medio) */
body.svc-setup .lc3-card--featured{
  border-color: rgba(16,123,255,.26);
  box-shadow:
    0 40px 140px rgba(16,123,255,.14),
    0 28px 90px rgba(7,22,48,.10),
    0 10px 22px rgba(7,22,48,.08);
}

/* Top: número + chip */
body.svc-setup .lc3-top{
  display:flex;
  align-items:center;
  gap: 10px;
  padding-top: 6px; /* por la línea */
}
body.svc-setup .lc3-no{
  width: 44px; height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(16,123,255,.92);
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.18);
}
body.svc-setup .lc3-chip{
  margin-left: auto;
  display:inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(11,31,58,.65);
  background: rgba(11,31,58,.04);
  border: 1px solid rgba(11,31,58,.08);
}

/* Text */
body.svc-setup .lc3-h{
  margin: 2px 0 0;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: rgba(11,31,58,.95);
}
body.svc-setup .lc3-p{
  margin: 0;
  color: rgba(11,31,58,.70);
  line-height: 1.55;
}

/* Bullets con punto azul */
body.svc-setup .lc3-bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}
body.svc-setup .lc3-bullets li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(11,31,58,.72);
  line-height: 1.5;
}
body.svc-setup .lc3-bullets li::before{
  content:"";
  width: 8px; height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  background: rgba(16,123,255,.70);
  flex: 0 0 auto;
}

/* Panel tipo “Ruta sugerida” */
body.svc-setup .lc3-route{
  margin-top: auto;
  border-radius: 16px;
  padding: 14px;
  background: rgba(16,123,255,.06);
  border: 1px solid rgba(16,123,255,.14);
}
body.svc-setup .lc3-route b{
  display:block;
  margin-bottom: 6px;
  color: rgba(11,31,58,.90);
}
body.svc-setup .lc3-route span{
  color: rgba(11,31,58,.70);
  line-height: 1.45;
}

/* Botón ancho abajo (como el screenshot) */
body.svc-setup .lc3-btn{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  height: 54px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  color: #fff;
  background: rgba(6,34,75,.96);
  border: 1px solid rgba(6,34,75,.20);
  box-shadow: 0 18px 55px rgba(7,22,48,.18);
}
body.svc-setup .lc3-btn:hover{
  filter: brightness(1.05);
}

/* Responsive */
@media (max-width: 980px){
  body.svc-setup .lc3-title{ font-size: 36px; }
  body.svc-setup .lc3-grid{ grid-template-columns: 1fr; }
  body.svc-setup .lc3-track{ gap: 10px; }
  body.svc-setup .lc3-track-line{ display:none; }
}
/* =========================================================
   SETUP — LO QUE CAMBIA (lc3): panel azul envolvente + barra CTA + track intacto
========================================================= */

/* Fondo general de sección (claro) */
body.svc-setup #lo-que-cambia.lc3{
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(16,123,255,.08), transparent 62%),
    radial-gradient(900px 520px at 86% 10%, rgba(0,210,255,.04), transparent 62%),
    linear-gradient(180deg, rgba(245,249,255,1), rgba(255,255,255,1)) !important;
}

/* Panel azul que cubre track + cards + barra CTA */
body.svc-setup #lo-que-cambia .lc3-wrap{
  border-radius: 28px;
  padding: 14px 14px 16px;
  background:
    radial-gradient(1200px 560px at 18% 10%, rgba(16,123,255,.18), transparent 62%),
    radial-gradient(900px 620px at 86% 12%, rgba(0,210,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(6,34,75,.94), rgba(6,34,75,.80));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 46px 150px rgba(7,22,48,.22),
    0 18px 40px rgba(7,22,48,.14);
}

/* Track: NO panel, pegado a cards, y texto en blanco (porque está sobre azul) */
body.svc-setup #lo-que-cambia .lc3-track{
  margin: 0 0 8px 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.svc-setup #lo-que-cambia .lc3-track-line{
  background: rgba(255,255,255,.18) !important;
}
body.svc-setup #lo-que-cambia .lc3-track-item span{
  color: rgba(255,255,255,.78) !important;
}
body.svc-setup #lo-que-cambia .lc3-track-item.is-active span{
  color: rgba(255,255,255,.95) !important;
}
body.svc-setup #lo-que-cambia .lc3-track-dot{
  background: rgba(255,255,255,.35) !important;
}

/* Grid: un pelín más pegado */
body.svc-setup #lo-que-cambia .lc3-grid{
  gap: 14px;
}

/* Cards estilo “mapa rápido” SOBRE panel azul */
body.svc-setup #lo-que-cambia .lc3-card{
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 30px 96px rgba(0,0,0,.16),
    0 12px 26px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.80) inset !important;
}

/* Featured un poco más pro */
body.svc-setup #lo-que-cambia .lc3-card--featured{
  box-shadow:
    0 44px 140px rgba(16,123,255,.16),
    0 30px 96px rgba(0,0,0,.16),
    0 12px 26px rgba(0,0,0,.10) !important;
}

/* Panel inferior dentro de cards (ruta) */
body.svc-setup #lo-que-cambia .lc3-route{
  background: rgba(16,123,255,.09) !important;
  border: 1px solid rgba(16,123,255,.16) !important;
}

/* Barra CTA inferior dentro del wrap */
body.svc-setup #lo-que-cambia .lc3-bar{
  margin-top: 12px;
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

body.svc-setup #lo-que-cambia .lc3-bar-copy p{
  margin: 0;
  color: rgba(255,255,255,.90);
  line-height: 1.5;
}
body.svc-setup #lo-que-cambia .lc3-bar-copy span{
  color: rgba(255,255,255,.74);
  font-weight: 800;
}

body.svc-setup #lo-que-cambia .lc3-bar-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}

/* Secundario visible sobre azul */
body.svc-setup #lo-que-cambia .lc3-bar-actions .btn.btn-secondary{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-setup #lo-que-cambia .lc3-bar{
    flex-direction: column;
    align-items: flex-start;
  }
  body.svc-setup #lo-que-cambia .lc3-bar-actions{
    justify-content:flex-start;
    flex-wrap: wrap;
  }
}
/* =========================================================
   SETUP — Harmonía visual: wrap azul integrado + CTA bar con vida
========================================================= */

/* 1) Fondo de la sección: un puente suave para que el azul no choque con blanco */
body.svc-setup #lo-que-cambia.lc3{
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(16,123,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(245,249,255,1), rgba(255,255,255,1)) !important;
}

/* 2) Wrap azul: menos “bloque”, más premium (gradiente + halo) */
body.svc-setup #lo-que-cambia .lc3-wrap{
  background:
    radial-gradient(1200px 560px at 18% 10%, rgba(16,123,255,.22), transparent 62%),
    radial-gradient(900px 620px at 86% 12%, rgba(0,210,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(9,44,92,.92), rgba(6,34,75,.76)) !important;

  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 50px 160px rgba(7,22,48,.20),
    0 18px 40px rgba(7,22,48,.12) !important;

  /* un poco más “ligero” */
  padding: 12px 14px 14px !important;
}

/* 3) Track: que siga limpio, pero un poquito más nítido */
body.svc-setup #lo-que-cambia .lc3-track-line{
  background: rgba(255,255,255,.22) !important;
}
body.svc-setup #lo-que-cambia .lc3-track-item span{
  color: rgba(255,255,255,.82) !important;
}
body.svc-setup #lo-que-cambia .lc3-track-item.is-active span{
  color: rgba(255,255,255,.96) !important;
}
body.svc-setup #lo-que-cambia .lc3-track{
  margin: 0 0 6px 0 !important;
}

/* 4) Cards: un toque más cálidas/limpias para que no “griten” contra el azul */
body.svc-setup #lo-que-cambia .lc3-card{
  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.14),
    0 10px 22px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.84) inset !important;
}

/* Featured: destaca sin “romper” */
body.svc-setup #lo-que-cambia .lc3-card--featured{
  border-color: rgba(16,123,255,.30) !important;
  box-shadow:
    0 52px 160px rgba(16,123,255,.16),
    0 28px 90px rgba(0,0,0,.14),
    0 10px 22px rgba(0,0,0,.10) !important;
  transform: translateY(-2px);
}

/* 5) Panel “Ruta” dentro de cards: más definido */
body.svc-setup #lo-que-cambia .lc3-route{
  background: rgba(16,123,255,.085) !important;
  border: 1px solid rgba(16,123,255,.18) !important;
}

/* 6) CTA bar: dejar de verse apagado (glass real + contraste) */
body.svc-setup #lo-que-cambia .lc3-bar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.10) inset !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-setup #lo-que-cambia .lc3-bar-copy p{
  color: rgba(255,255,255,.92) !important;
}
body.svc-setup #lo-que-cambia .lc3-bar-copy span{
  color: rgba(255,255,255,.78) !important;
}

/* Botón secundario: que no parezca deshabilitado */
body.svc-setup #lo-que-cambia .lc3-bar-actions .btn.btn-secondary{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.95) !important;
}
/* =========================================================
   SETUP — LO QUE CAMBIA: SIN wrap azul + sección azul (todo el fondo)
========================================================= */

/* 1) Fondo azul en TODA la sección */
body.svc-setup #lo-que-cambia.lc3{
  background:
    radial-gradient(1200px 620px at 18% 0%, rgba(16,123,255,.20), transparent 60%),
    radial-gradient(900px 680px at 86% 10%, rgba(0,210,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(6,34,75,.96), rgba(6,34,75,.82)) !important;
}

/* Head en blanco */
body.svc-setup #lo-que-cambia.lc3 .lc3-title{
  color:#fff !important;
}
body.svc-setup #lo-que-cambia.lc3 .lc3-lead{
  color: rgba(255,255,255,.78) !important;
}
body.svc-setup #lo-que-cambia.lc3 .lc3-kicker{
  color: rgba(255,255,255,.90) !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* 2) Quitar wrap azul: ahora solo actúa como contenedor (sin panel) */
body.svc-setup #lo-que-cambia.lc3 .lc3-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 3) Track (línea del tiempo) sobre azul */
body.svc-setup #lo-que-cambia.lc3 .lc3-track{
  margin: 8px 0 12px !important;
}
body.svc-setup #lo-que-cambia.lc3 .lc3-track-dot{
  background: rgba(255,255,255,.38) !important;
}
body.svc-setup #lo-que-cambia.lc3 .lc3-track-line{
  background: rgba(255,255,255,.18) !important;
}
body.svc-setup #lo-que-cambia.lc3 .lc3-track-item span{
  color: rgba(255,255,255,.78) !important;
}
body.svc-setup #lo-que-cambia.lc3 .lc3-track-item.is-active span{
  color: rgba(255,255,255,.96) !important;
}

/* 4) Cards: blancas premium sobre azul */
body.svc-setup #lo-que-cambia.lc3 .lc3-card{
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 34px 110px rgba(0,0,0,.18),
    0 12px 26px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.80) inset !important;
}

/* Acento superior de cada card */
body.svc-setup #lo-que-cambia.lc3 .lc3-card::before{
  background: linear-gradient(90deg, rgba(16,123,255,.85), rgba(16,123,255,.18)) !important;
  opacity: 1 !important;
}

/* Featured (card 02) ligeramente más protagonista */
body.svc-setup #lo-que-cambia.lc3 .lc3-card--featured{
  border-color: rgba(16,123,255,.28) !important;
  box-shadow:
    0 56px 170px rgba(16,123,255,.18),
    0 34px 110px rgba(0,0,0,.18),
    0 12px 26px rgba(0,0,0,.10) !important;
  transform: translateY(-2px);
}

/* Panel “Ruta / Se siente así / Lo que cambia / Lo que te llevas” */
body.svc-setup #lo-que-cambia.lc3 .lc3-route{
  background: rgba(16,123,255,.085) !important;
  border: 1px solid rgba(16,123,255,.16) !important;
}

/* 5) Barra CTA inferior: glass real sobre azul (ya no apagado) */
body.svc-setup #lo-que-cambia.lc3 .lc3-bar{
  margin-top: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.22) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-setup #lo-que-cambia.lc3 .lc3-bar-copy p{
  color: rgba(255,255,255,.92) !important;
}
body.svc-setup #lo-que-cambia.lc3 .lc3-bar-copy span{
  color: rgba(255,255,255,.78) !important;
}

/* Botón secundario visible sobre azul */
body.svc-setup #lo-que-cambia.lc3 .lc3-bar-actions .btn.btn-secondary{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.95) !important;
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   versión nueva, limpia y más corta
========================================================= */

body.svc-setup .route-shift{
  padding: 78px 0 82px;
  background:
    radial-gradient(780px 260px at 10% 0%, rgba(47,102,208,.05), transparent 58%),
    radial-gradient(680px 240px at 100% 8%, rgba(47,102,208,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.svc-setup .route-shift__head{
  max-width: 920px;
  margin-bottom: 20px;
}

body.svc-setup .route-shift .svc-kicker{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,34,63,.08);
  color: #2a59bf;
  box-shadow: 0 8px 18px rgba(15,34,63,.04);
}

body.svc-setup .route-shift .svc-title{
  color: #0f223f;
}

body.svc-setup .route-shift .svc-lead{
  color: rgba(15,34,63,.70);
  line-height: 1.48;
}

/* timeline */
body.svc-setup .route-shift__timeline{
  display: grid;
  grid-template-columns: auto auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

body.svc-setup .route-shift__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #8ab0ee;
  box-shadow: 0 0 0 8px rgba(138,176,238,.10);
}

body.svc-setup .route-shift__step{
  color: rgba(15,34,63,.76);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-setup .route-shift__step.is-active{
  color: #173252;
}

body.svc-setup .route-shift__line{
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,50,82,.16), rgba(23,50,82,.05));
}

/* grid */
body.svc-setup .route-shift__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* cards */
body.svc-setup .route-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px 22px 20px;
  border-radius: 28px;
  border: 1px solid rgba(15,34,63,.08);
  box-shadow:
    0 16px 34px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.58);
  overflow: hidden;
}

body.svc-setup .route-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130px 70px at 92% 10%, rgba(255,255,255,.18), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 26%);
}

body.svc-setup .route-card--before{
  background:
    radial-gradient(170px 90px at 0% 0%, rgba(160,183,220,.10), transparent 72%),
    linear-gradient(180deg, rgba(250,251,253,.98), rgba(241,245,249,.96));
}

body.svc-setup .route-card--during{
  background:
    radial-gradient(170px 90px at 100% 0%, rgba(144,171,214,.10), transparent 72%),
    linear-gradient(180deg, rgba(249,251,253,.98), rgba(239,244,249,.96));
}

body.svc-setup .route-card--result{
  background:
    radial-gradient(220px 110px at 100% 0%, rgba(103,150,228,.16), transparent 72%),
    linear-gradient(180deg, rgba(248,251,254,.99), rgba(232,241,250,.97));
  border-color: rgba(47,102,208,.14);
  box-shadow:
    0 20px 38px rgba(15,34,63,.09),
    0 0 0 1px rgba(47,102,208,.05),
    inset 0 1px 0 rgba(255,255,255,.62);
}

/* top */
body.svc-setup .route-card__top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

body.svc-setup .route-card__num{
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #e6ebf7, #d6deef);
  border: 1px solid rgba(47,102,208,.10);
  color: #2f66d0;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

body.svc-setup .route-card--result .route-card__num{
  background: linear-gradient(145deg, #dce8ff, #c9dbff);
  border-color: rgba(47,102,208,.18);
  color: #1f57c4;
}

body.svc-setup .route-card__eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(15,34,63,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-setup .route-card--result .route-card__eyebrow{
  background: rgba(47,102,208,.08);
  border-color: rgba(47,102,208,.10);
  color: #2a5ec7;
}

/* title + copy */
body.svc-setup .route-card h3{
  margin: 0 0 10px;
  color: #10233b;
  font-size: 18px;
  line-height: 1.12;
  letter-spacing: -.02em;
}

body.svc-setup .route-card__text{
  margin: 0 0 12px;
  color: rgba(15,34,63,.78);
  font-size: 16px;
  line-height: 1.34;
}

/* list */
body.svc-setup .route-card__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

body.svc-setup .route-card__list li{
  position: relative;
  padding-left: 15px;
  color: rgba(15,34,63,.82);
  font-size: 16px;
  line-height: 1.26;
}

body.svc-setup .route-card__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6486bc;
  box-shadow: 0 0 0 4px rgba(100,134,188,.10);
}

/* footer info */
body.svc-setup .route-card__footer{
  position: relative;
  margin-top: auto;
  padding-top: 14px;
  padding-left: 14px;
}

body.svc-setup .route-card__footer::before{
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 2px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7ba2e6, #d6e3fb);
}

body.svc-setup .route-card__footer strong{
  display: block;
  margin-bottom: 4px;
  color: #173252;
  font-size: 16px;
  line-height: 1.16;
}

body.svc-setup .route-card__footer span{
  display: block;
  color: rgba(15,34,63,.70);
  font-size: 15px;
  line-height: 1.28;
}

body.svc-setup .route-card__footer--result::before{
  background: linear-gradient(180deg, #4d82de, #c9dcff);
}

/* responsive */
@media (max-width: 1100px){
  body.svc-setup .route-shift__grid{
    grid-template-columns: 1fr;
  }

  body.svc-setup .route-shift__timeline{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.svc-setup .route-shift__line,
  body.svc-setup .route-shift__dot{
    display: none;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA
========================================================= */

body.svc-setup .route-shift{
  padding: 78px 0 82px;
  background:
    radial-gradient(780px 260px at 10% 0%, rgba(47,102,208,.05), transparent 58%),
    radial-gradient(680px 240px at 100% 8%, rgba(47,102,208,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.svc-setup .route-shift__head{
  max-width: 920px;
  margin-bottom: 20px;
}

body.svc-setup .route-shift .svc-kicker{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,34,63,.08);
  color: #2a59bf;
  box-shadow: 0 8px 18px rgba(15,34,63,.04);
}

body.svc-setup .route-shift .svc-title{
  color: #0f223f;
}

body.svc-setup .route-shift .svc-lead{
  color: rgba(15,34,63,.70);
  line-height: 1.48;
}

/* timeline */
body.svc-setup .route-shift__timeline{
  display: grid;
  grid-template-columns: auto auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

body.svc-setup .route-shift__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #8ab0ee;
  box-shadow: 0 0 0 8px rgba(138,176,238,.10);
}

body.svc-setup .route-shift__step{
  color: rgba(15,34,63,.76);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-setup .route-shift__step.is-active{
  color: #173252;
}

body.svc-setup .route-shift__line{
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,50,82,.16), rgba(23,50,82,.05));
}

/* cards */
body.svc-setup .route-shift__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

body.svc-setup .route-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px 22px 20px;
  border-radius: 28px;
  border: 1px solid rgba(15,34,63,.08);
  box-shadow:
    0 16px 34px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.58);
  overflow: hidden;
}

body.svc-setup .route-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130px 70px at 92% 10%, rgba(255,255,255,.18), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 26%);
}

body.svc-setup .route-card--before{
  background:
    radial-gradient(170px 90px at 0% 0%, rgba(160,183,220,.10), transparent 72%),
    linear-gradient(180deg, rgba(250,251,253,.98), rgba(241,245,249,.96));
}

body.svc-setup .route-card--during{
  background:
    radial-gradient(170px 90px at 100% 0%, rgba(144,171,214,.10), transparent 72%),
    linear-gradient(180deg, rgba(249,251,253,.98), rgba(239,244,249,.96));
}

body.svc-setup .route-card--result{
  background:
    radial-gradient(220px 110px at 100% 0%, rgba(103,150,228,.16), transparent 72%),
    linear-gradient(180deg, rgba(248,251,254,.99), rgba(232,241,250,.97));
  border-color: rgba(47,102,208,.16);
  box-shadow:
    0 20px 38px rgba(15,34,63,.09),
    0 0 0 1px rgba(47,102,208,.05),
    inset 0 1px 0 rgba(255,255,255,.62);
}

/* top */
body.svc-setup .route-card__top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

body.svc-setup .route-card__num{
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #e6ebf7, #d6deef);
  border: 1px solid rgba(47,102,208,.10);
  color: #2f66d0;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

body.svc-setup .route-card--result .route-card__num{
  background: linear-gradient(145deg, #dce8ff, #c9dbff);
  border-color: rgba(47,102,208,.18);
  color: #1f57c4;
}

body.svc-setup .route-card__eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(15,34,63,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-setup .route-card--result .route-card__eyebrow{
  background: rgba(47,102,208,.08);
  border-color: rgba(47,102,208,.10);
  color: #2a5ec7;
}

/* title + text */
body.svc-setup .route-card h3{
  margin: 0 0 10px;
  color: #10233b;
  font-size: 18px;
  line-height: 1.12;
  letter-spacing: -.02em;
}

body.svc-setup .route-card__text{
  margin: 0 0 12px;
  color: rgba(15,34,63,.78);
  font-size: 16px;
  line-height: 1.34;
}

/* bullets */
body.svc-setup .route-card__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

body.svc-setup .route-card__list li{
  position: relative;
  padding-left: 15px;
  color: rgba(15,34,63,.82);
  font-size: 16px;
  line-height: 1.26;
}

body.svc-setup .route-card__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6486bc;
  box-shadow: 0 0 0 4px rgba(100,134,188,.10);
}

/* footer */
body.svc-setup .route-card__footer{
  position: relative;
  margin-top: auto;
  padding-top: 14px;
  padding-left: 14px;
}

body.svc-setup .route-card__footer::before{
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 2px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7ba2e6, #d6e3fb);
}

body.svc-setup .route-card__footer strong{
  display: block;
  margin-bottom: 4px;
  color: #173252;
  font-size: 16px;
  line-height: 1.16;
}

body.svc-setup .route-card__footer span{
  display: block;
  color: rgba(15,34,63,.70);
  font-size: 15px;
  line-height: 1.28;
}

body.svc-setup .route-card__footer--result::before{
  background: linear-gradient(180deg, #4d82de, #c9dcff);
}

/* CTA bar */
body.svc-setup .route-shift__bar{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(200px 90px at 100% 0%, rgba(123,163,232,.08), transparent 74%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,246,250,.93));
  box-shadow:
    0 16px 30px rgba(15,34,63,.08),
    inset 0 1px 0 rgba(255,255,255,.44);
}

body.svc-setup .route-shift__bar-copy p{
  margin: 0 0 5px;
  color: #10233b;
  font-size: 16px;
  line-height: 1.28;
  font-weight: 700;
}

body.svc-setup .route-shift__bar-copy span{
  display: block;
  color: rgba(15,34,63,.66);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
}

body.svc-setup .route-shift__bar-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.svc-setup .route-shift__bar-actions .btn{
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: none;
}

body.svc-setup .route-shift__bar-actions .btn-primary{
  background: #173252;
  color: #fff;
  border: 1px solid rgba(23,50,82,.12);
}

body.svc-setup .route-shift__bar-actions .btn-secondary{
  background: rgba(15,34,63,.06);
  color: #173252;
  border: 1px solid rgba(15,34,63,.10);
}

/* responsive */
@media (max-width: 1100px){
  body.svc-setup .route-shift__grid{
    grid-template-columns: 1fr;
  }

  body.svc-setup .route-shift__bar{
    grid-template-columns: 1fr;
  }

  body.svc-setup .route-shift__bar-actions{
    justify-content: flex-start;
  }

  body.svc-setup .route-shift__timeline{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.svc-setup .route-shift__line,
  body.svc-setup .route-shift__dot{
    display: none;
  }
}
/* =========================================================
   FIX REAL — sección "Lo que cambia" según la captura
   Para HTML con clases route-shift
========================================================= */

body.svc-setup #lo-que-cambia.route-shift{
  padding: 78px 0 82px;
  background:
    radial-gradient(760px 240px at 10% 0%, rgba(47,102,208,.05), transparent 58%),
    radial-gradient(680px 220px at 100% 8%, rgba(47,102,208,.04), transparent 56%),
    linear-gradient(180deg, #f4f7fb 0%, #eef3f8 100%) !important;
}

/* Head: hacerlo legible */
body.svc-setup #lo-que-cambia.route-shift .svc-kicker{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15,34,63,.08);
  color: #2a59bf;
  box-shadow: 0 8px 18px rgba(15,34,63,.04);
}

body.svc-setup #lo-que-cambia.route-shift .svc-title{
  color: #0f223f !important;
}

body.svc-setup #lo-que-cambia.route-shift .svc-lead{
  color: rgba(15,34,63,.70) !important;
  line-height: 1.48;
}

/* Timeline: sin perderse en el fondo */
body.svc-setup #lo-que-cambia.route-shift .route-shift__timeline{
  margin-bottom: 18px;
}

body.svc-setup #lo-que-cambia.route-shift .route-shift__dot{
  background: #8ab0ee;
  box-shadow: 0 0 0 8px rgba(138,176,238,.10);
}

body.svc-setup #lo-que-cambia.route-shift .route-shift__step{
  color: rgba(15,34,63,.76);
}

body.svc-setup #lo-que-cambia.route-shift .route-shift__step.is-active{
  color: #173252;
}

body.svc-setup #lo-que-cambia.route-shift .route-shift__line{
  background: linear-gradient(90deg, rgba(23,50,82,.16), rgba(23,50,82,.05));
}

/* Cards */
body.svc-setup #lo-que-cambia.route-shift .route-shift__grid{
  gap: 18px;
}

body.svc-setup #lo-que-cambia.route-shift .route-card{
  padding: 24px 24px 22px;
  border-radius: 30px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,252,.96));
  box-shadow:
    0 18px 36px rgba(15,34,63,.07),
    inset 0 1px 0 rgba(255,255,255,.60);
}

body.svc-setup #lo-que-cambia.route-shift .route-card::before{
  background:
    radial-gradient(130px 70px at 92% 10%, rgba(255,255,255,.18), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 26%);
}

body.svc-setup #lo-que-cambia.route-shift .route-card--before{
  background:
    radial-gradient(160px 90px at 0% 0%, rgba(160,183,220,.09), transparent 72%),
    linear-gradient(180deg, rgba(250,251,253,.98), rgba(241,245,249,.96));
}

body.svc-setup #lo-que-cambia.route-shift .route-card--during{
  background:
    radial-gradient(160px 90px at 100% 0%, rgba(144,171,214,.09), transparent 72%),
    linear-gradient(180deg, rgba(249,251,253,.98), rgba(239,244,249,.96));
}

body.svc-setup #lo-que-cambia.route-shift .route-card--result{
  background:
    radial-gradient(220px 110px at 100% 0%, rgba(103,150,228,.15), transparent 72%),
    linear-gradient(180deg, rgba(247,250,254,.99), rgba(230,240,250,.97));
  border-color: rgba(47,102,208,.16);
  box-shadow:
    0 22px 42px rgba(15,34,63,.10),
    0 0 0 1px rgba(47,102,208,.05),
    inset 0 1px 0 rgba(255,255,255,.62);
}

/* Top */
body.svc-setup #lo-que-cambia.route-shift .route-card__num{
  background: linear-gradient(145deg, #e7ecf8, #d7e0f1);
  border: 1px solid rgba(47,102,208,.10);
  color: #2f66d0;
}

body.svc-setup #lo-que-cambia.route-shift .route-card--result .route-card__num{
  background: linear-gradient(145deg, #dce8ff, #c9dbff);
  border-color: rgba(47,102,208,.18);
  color: #1f57c4;
}

body.svc-setup #lo-que-cambia.route-shift .route-card__eyebrow{
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(15,34,63,.72);
}

body.svc-setup #lo-que-cambia.route-shift .route-card--result .route-card__eyebrow{
  background: rgba(47,102,208,.08);
  border-color: rgba(47,102,208,.10);
  color: #2a5ec7;
}

/* Tipografía */
body.svc-setup #lo-que-cambia.route-shift .route-card h3{
  color: #10233b;
  font-size: 18px;
  line-height: 1.12;
}

body.svc-setup #lo-que-cambia.route-shift .route-card__text{
  color: rgba(15,34,63,.78);
  font-size: 16px;
  line-height: 1.34;
}

/* Bullets compactas */
body.svc-setup #lo-que-cambia.route-shift .route-card__list{
  gap: 7px;
}

body.svc-setup #lo-que-cambia.route-shift .route-card__list li{
  color: rgba(15,34,63,.82);
  font-size: 16px;
  line-height: 1.26;
}

body.svc-setup #lo-que-cambia.route-shift .route-card__list li::before{
  background: #6486bc;
  box-shadow: 0 0 0 4px rgba(100,134,188,.10);
}

/* Footer interno de cada card */
body.svc-setup #lo-que-cambia.route-shift .route-card__footer{
  margin-top: auto;
  padding-top: 14px;
  padding-left: 14px;
}

body.svc-setup #lo-que-cambia.route-shift .route-card__footer::before{
  top: 15px;
  bottom: 2px;
  width: 3px;
  background: linear-gradient(180deg, #7ba2e6, #d6e3fb);
}

body.svc-setup #lo-que-cambia.route-shift .route-card__footer strong{
  color: #173252;
  font-size: 16px;
  line-height: 1.16;
}

body.svc-setup #lo-que-cambia.route-shift .route-card__footer span{
  color: rgba(15,34,63,.70);
  font-size: 15px;
  line-height: 1.28;
}

body.svc-setup #lo-que-cambia.route-shift .route-card__footer--result::before{
  background: linear-gradient(180deg, #4d82de, #c9dcff);
}

/* Barra CTA: sí, bien visible */
body.svc-setup #lo-que-cambia.route-shift .route-shift__bar{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(200px 90px at 100% 0%, rgba(123,163,232,.08), transparent 74%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,246,250,.93));
  box-shadow:
    0 16px 30px rgba(15,34,63,.08),
    inset 0 1px 0 rgba(255,255,255,.44);
}

body.svc-setup #lo-que-cambia.route-shift .route-shift__bar-copy p{
  margin: 0 0 5px;
  color: #10233b;
  font-size: 16px;
  line-height: 1.28;
  font-weight: 700;
}

body.svc-setup #lo-que-cambia.route-shift .route-shift__bar-copy span{
  display: block;
  color: rgba(15,34,63,.66);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
}

body.svc-setup #lo-que-cambia.route-shift .route-shift__bar-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.svc-setup #lo-que-cambia.route-shift .route-shift__bar-actions .btn{
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: none;
}

body.svc-setup #lo-que-cambia.route-shift .route-shift__bar-actions .btn-primary{
  background: #173252;
  color: #fff;
  border: 1px solid rgba(23,50,82,.12);
}

body.svc-setup #lo-que-cambia.route-shift .route-shift__bar-actions .btn-secondary{
  background: rgba(15,34,63,.06);
  color: #173252;
  border: 1px solid rgba(15,34,63,.10);
}

@media (max-width: 1100px){
  body.svc-setup .route-shift__grid{
    grid-template-columns: 1fr;
  }

  body.svc-setup .route-shift__bar{
    grid-template-columns: 1fr;
  }

  body.svc-setup .route-shift__bar-actions{
    justify-content: flex-start;
  }

  body.svc-setup .route-shift__timeline{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.svc-setup .route-shift__line,
  body.svc-setup .route-shift__dot{
    display: none;
  }
}
/* =========================================================
   ROUTE SHIFT — ajustes solicitados (1–5)
   Pegar al FINAL de styles.css
========================================================= */

/* 0) Quitar protagonismo del medio y dárselo a RESULTADO */
body.svc-setup .route-card--during{
  transform: none !important;
  box-shadow:
    0 34px 110px rgba(7,22,48,.10),
    0 12px 26px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.80) inset !important;
  border-color: rgba(16,123,255,.14) !important;
}

/* RESULTADO = protagonista */
body.svc-setup .route-card--result{
  border-color: rgba(16,123,255,.28) !important;
  box-shadow:
    0 60px 180px rgba(16,123,255,.16),
    0 34px 110px rgba(7,22,48,.12),
    0 12px 26px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.84) inset !important;
  transform: translateY(-2px);
}
body.svc-setup .route-card--result::before{
  background: linear-gradient(90deg, rgba(16,123,255,.95), rgba(0,210,255,.22)) !important;
}

/* 3) TIMELINE con más presencia */
body.svc-setup .route-shift__timeline{
  margin: 14px 0 8px !important; /* más pegada a las cards */
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow: 0 18px 50px rgba(7,22,48,.08);
}
body.svc-setup .route-shift__dot{
  width: 12px !important;
  height: 12px !important;
  background: rgba(16,123,255,.62) !important;
  box-shadow: 0 0 0 7px rgba(16,123,255,.14) !important;
}
body.svc-setup .route-shift__line{
  height: 3px !important;
  background: rgba(11,31,58,.12) !important;
}
body.svc-setup .route-shift__step{
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(11,31,58,.55);
}
body.svc-setup .route-shift__step.is-active{
  color: rgba(11,31,58,.92) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

/* 5) HOVER: más pro y consistente */
body.svc-setup .route-card{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
body.svc-setup .route-card:hover{
  transform: translateY(-3px);
  border-color: rgba(16,123,255,.24);
  box-shadow:
    0 44px 140px rgba(7,22,48,.12),
    0 14px 30px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.86) inset;
}

/* 4) FOOTERS con más presencia (panel institucional) */
body.svc-setup .route-card__footer{
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(16,123,255,.18) !important;
  box-shadow:
    0 18px 40px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.75) inset;
  backdrop-filter: blur(8px);
}
body.svc-setup .route-card__footer::before{
  width: 4px !important;
  background: rgba(16,123,255,.70) !important;
}
body.svc-setup .route-card__footer strong{
  color: rgba(11,31,58,.95) !important;
}
body.svc-setup .route-card__footer span{
  color: rgba(11,31,58,.78) !important;
}

/* RESULTADO footer aún más “cierre” */
body.svc-setup .route-card--result .route-card__footer{
  background: rgba(16,123,255,.10) !important;
  border-color: rgba(16,123,255,.22) !important;
}
body.svc-setup .route-card--result .route-card__footer::before{
  background: rgba(16,123,255,.88) !important;
}

/* Barra CTA un poquito más viva */
body.svc-setup .route-shift__bar{
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(16,123,255,.16) !important;
  box-shadow: 0 28px 90px rgba(7,22,48,.10) !important;
  backdrop-filter: blur(10px);
}

/* =========================================================
   1) TIMELINE “ACTIVO” según hover (CSS moderno con :has)
   Si el navegador NO soporta :has(), usa el mini JS de abajo.
========================================================= */

/* Reset visual: por defecto el activo es ANTES (ya lo tienes) */

/* Si tu browser soporta :has(), esto funciona SIN JS */
@supports selector(.route-shift:has(.route-card:hover)) {
  /* por defecto: marca ANTES */
  body.svc-setup .route-shift__timeline .route-shift__step{ color: rgba(11,31,58,.55); }
  body.svc-setup .route-shift__timeline .route-shift__step.is-active{ color: rgba(11,31,58,.92); }

  /* hover BEFORE -> step 1 */
  body.svc-setup .route-shift:has(.route-card--before:hover) .route-shift__timeline .route-shift__step{ color: rgba(11,31,58,.55); }
  body.svc-setup .route-shift:has(.route-card--before:hover) .route-shift__timeline .route-shift__step:nth-of-type(1){
    color: rgba(11,31,58,.92);
  }

  /* hover DURING -> step 2 */
  body.svc-setup .route-shift:has(.route-card--during:hover) .route-shift__timeline .route-shift__step:nth-of-type(3){
    color: rgba(11,31,58,.92);
  }

  /* hover RESULT -> step 3 */
  body.svc-setup .route-shift:has(.route-card--result:hover) .route-shift__timeline .route-shift__step:nth-of-type(5){
    color: rgba(11,31,58,.92);
  }
}
/* =========================================================
   FIX route-shift (#lo-que-cambia) — menos “azulazo”, más pro
   Pegar al FINAL de styles.css
========================================================= */

/* 1) Textura general de sección (sutil pero visible) */
body.svc-setup .route-shift{
  position: relative;
  overflow: hidden;
}
body.svc-setup .route-shift::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(16,123,255,.12), transparent 62%),
    radial-gradient(760px 520px at 86% 8%, rgba(0,210,255,.08), transparent 60%),
    linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px) 0 0/30px 30px,
    linear-gradient(rgba(11,31,58,.05) 1px, transparent 1px) 0 0/30px 30px;
  opacity:.18;
  mask-image: radial-gradient(900px 520px at 50% 12%, #000 60%, transparent 88%);
}

/* 2) Timeline: que se vea más “institucional” sin hacerse enorme */
body.svc-setup .route-shift__timeline{
  position: relative;
  z-index: 1;
  margin: 12px 0 10px !important; /* más pegada */
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow: 0 16px 44px rgba(7,22,48,.08);
}
body.svc-setup .route-shift__dot{
  width: 12px; height: 12px;
  background: rgba(16,123,255,.55);
  box-shadow: 0 0 0 7px rgba(16,123,255,.14);
}
body.svc-setup .route-shift__line{
  height: 3px;
  background: rgba(11,31,58,.12);
}
body.svc-setup .route-shift__step{
  color: rgba(11,31,58,.56);
  font-weight: 900;
  letter-spacing: .18em;
}
body.svc-setup .route-shift__step.is-active{
  color: rgba(11,31,58,.92);
}

/* 3) Cards: textura REAL + sin “azulazo” */
body.svc-setup .route-shift__grid{
  position: relative;
  z-index: 1;
  gap: 14px;
}

/* base */
body.svc-setup .route-card{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow:
    0 34px 110px rgba(7,22,48,.10),
    0 12px 26px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.78) inset;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

/* acento superior fino */
body.svc-setup .route-card::before{
  content:"";
  position:absolute;
  left: 18px; right: 18px; top: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,123,255,.82), rgba(16,123,255,.14));
  opacity: .9;
}

/* sheen + micro grain (esto es la “textura” que no estabas viendo) */
body.svc-setup .route-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 14% 0%, rgba(16,123,255,.12), transparent 60%),
    radial-gradient(420px 220px at 92% 18%, rgba(0,210,255,.08), transparent 62%),
    radial-gradient(rgba(11,31,58,.10) 1px, transparent 1px) 0 0/18px 18px,
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,0) 55%);
  opacity:.60;
  mask-image: radial-gradient(560px 360px at 38% 0%, #000 55%, transparent 88%);
}
body.svc-setup .route-card > *{ position: relative; z-index: 1; }

/* 4) Hover: que se note en TODAS, sin brincar exagerado */
body.svc-setup .route-card:hover{
  transform: translateY(-6px);
  border-color: rgba(16,123,255,.26);
  box-shadow:
    0 52px 160px rgba(7,22,48,.14),
    0 18px 38px rgba(7,22,48,.12),
    0 1px 0 rgba(255,255,255,.86) inset;
}

/* 5) RESULTADO: resalta sin matar la legibilidad */
body.svc-setup .route-card--result{
  background: rgba(255,255,255,.92) !important;   /* adiós azul sólido */
  border-color: rgba(16,123,255,.26) !important;
  box-shadow:
    0 46px 140px rgba(16,123,255,.14),
    0 34px 110px rgba(7,22,48,.12),
    0 12px 26px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.84) inset !important;
}
body.svc-setup .route-card--result::before{
  background: linear-gradient(90deg, rgba(16,123,255,.92), rgba(0,210,255,.18)) !important;
}
body.svc-setup .route-card--result:hover{
  box-shadow:
    0 70px 190px rgba(16,123,255,.18),
    0 52px 160px rgba(7,22,48,.14),
    0 18px 38px rgba(7,22,48,.12),
    0 1px 0 rgba(255,255,255,.88) inset !important;
}

/* 6) Panel inferior de cada card: glass suave + acento lateral bonito */
body.svc-setup .route-card__footer{
  margin-top: auto;
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(16,123,255,.16) !important;
  box-shadow:
    0 18px 44px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.72) inset;
  backdrop-filter: blur(10px);
  position: relative;
  display: grid;
  gap: 6px;
}
body.svc-setup .route-card__footer::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: rgba(16,123,255,.75);
}
body.svc-setup .route-card__footer strong,
body.svc-setup .route-card__footer span{
  padding-left: 12px;
}
body.svc-setup .route-card__footer strong{
  color: rgba(11,31,58,.95);
}
body.svc-setup .route-card__footer span{
  color: rgba(11,31,58,.74);
  line-height: 1.45;
}

/* Resultado footer un poquito más “cierre” (solo un toque) */
body.svc-setup .route-card--result .route-card__footer{
  background: rgba(16,123,255,.08) !important;
  border-color: rgba(16,123,255,.18) !important;
}
body.svc-setup .route-card--result .route-card__footer::before{
  background: rgba(16,123,255,.92);
}

/* 7) Bullets: un poco más “limpias” */
body.svc-setup .route-card__list{
  list-style: none;
  padding-left: 0;
}
body.svc-setup .route-card__list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
body.svc-setup .route-card__list li::before{
  content:"";
  width: 8px; height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  background: rgba(16,123,255,.70);
  box-shadow: 0 0 0 3px rgba(16,123,255,.12);
  flex: 0 0 auto;
}

/* 8) “Lo que instalamos” ya no queda sin vida: misma presencia que las otras */
body.svc-setup .route-card--during{
  border-color: rgba(16,123,255,.16) !important;
}

/* 9) Barra CTA: más “viva” pero sin oscurecer */
body.svc-setup .route-shift__bar{
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.66) !important;
  border: 1px solid rgba(16,123,255,.16) !important;
  box-shadow: 0 28px 90px rgba(7,22,48,.10) !important;
  backdrop-filter: blur(10px);
}
/* =========================================================
   ROUTE SHIFT — Hover UNIFORME en las 3 cards (override)
   Pegar AL FINAL de styles.css
========================================================= */

body.svc-setup .route-shift .route-card:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(16,123,255,.26) !important;
  box-shadow:
    0 52px 160px rgba(7,22,48,.14),
    0 18px 38px rgba(7,22,48,.12),
    0 1px 0 rgba(255,255,255,.86) inset !important;
}

/* Quita el hover “especial” que le habíamos dado a RESULTADO */
body.svc-setup .route-shift .route-card--result:hover{
  box-shadow:
    0 52px 160px rgba(7,22,48,.14),
    0 18px 38px rgba(7,22,48,.12),
    0 1px 0 rgba(255,255,255,.86) inset !important;
  transform: translateY(-6px) !important;
  border-color: rgba(16,123,255,.26) !important;
}
/* =========================================================
   ROUTE SHIFT — Glass premium + menos blanco + resultado pro
   (override) Pegar al FINAL de styles.css
========================================================= */

/* A) Fondo de sección (menos “blanco clínico”) */
body.svc-setup .route-shift{
  position: relative;
  background:
    radial-gradient(1000px 520px at 15% 0%, rgba(16,123,255,.12), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(0,210,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(7,22,48,.04), rgba(255,255,255,0) 55%);
}

/* Panel suave detrás del grid (da “presencia” sin ensuciar) */
body.svc-setup .route-shift__grid{
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 28px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(16,123,255,.12);
  box-shadow: 0 34px 120px rgba(7,22,48,.10);
  backdrop-filter: blur(10px);
}

/* B) Timeline más institucional (y que “mande”) */
body.svc-setup .route-shift__timeline{
  position: relative;
  z-index: 2;
  margin: 10px 0 12px !important;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow: 0 18px 55px rgba(7,22,48,.08);
}
body.svc-setup .route-shift__dot{
  width: 10px; height: 10px;
  background: rgba(16,123,255,.60);
  box-shadow: 0 0 0 7px rgba(16,123,255,.14);
}
body.svc-setup .route-shift__line{
  height: 3px;
  background: rgba(11,31,58,.12);
}
body.svc-setup .route-shift__step{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(11,31,58,.55);
}
body.svc-setup .route-shift__step.is-active{
  color: rgba(11,31,58,.92);
}

/* C) Cards: glass real + textura (sheen) */
body.svc-setup .route-card{
  --acc: rgba(16,123,255,.78);       /* acento por default */
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(16,123,255,.16);
  box-shadow:
    0 30px 100px rgba(7,22,48,.10),
    0 12px 26px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.70) inset;
  backdrop-filter: blur(12px);
}

/* Acento superior fino (premium) */
body.svc-setup .route-card::before{
  content:"";
  position:absolute;
  left: 18px; right: 18px; top: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acc), rgba(16,123,255,.12));
  opacity: .95;
}

/* Sheen + micro textura sutil */
body.svc-setup .route-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 12% 0%, rgba(16,123,255,.14), transparent 60%),
    radial-gradient(420px 220px at 92% 18%, rgba(0,210,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 58%);
  opacity:.70;
  mask-image: radial-gradient(560px 360px at 38% 0%, #000 55%, transparent 88%);
}
body.svc-setup .route-card > *{ position: relative; z-index: 1; }

/* Tipografía dentro: más contraste (para que no se vea “lavado”) */
body.svc-setup .route-card h3{
  color: rgba(11,31,58,.96);
}
body.svc-setup .route-card__text{
  color: rgba(11,31,58,.74);
}

/* D) Resultado con presencia PRO (sin pintar toda la card) */
body.svc-setup .route-card--result{
  --acc: rgba(16,123,255,.92);
  border-color: rgba(16,123,255,.26);
  box-shadow:
    0 34px 120px rgba(16,123,255,.10),
    0 30px 100px rgba(7,22,48,.10),
    0 12px 26px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.72) inset;
}
/* Glow lateral muy sutil (presencia sin “azulazo”) */
body.svc-setup .route-card--result{
  background:
    radial-gradient(520px 340px at 100% 50%, rgba(16,123,255,.12), transparent 60%),
    rgba(255,255,255,.58);
}

/* E) Bullets más limpios */
body.svc-setup .route-card__list{
  list-style: none;
  padding-left: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
body.svc-setup .route-card__list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(11,31,58,.78);
}
body.svc-setup .route-card__list li::before{
  content:"";
  width: 8px; height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  background: rgba(16,123,255,.70);
  box-shadow: 0 0 0 3px rgba(16,123,255,.12);
  flex: 0 0 auto;
}

/* F) Panel inferior: glass bonito, no “cajita” */
body.svc-setup .route-card__footer{
  margin-top: 18px;
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(16,123,255,.16);
  box-shadow: 0 18px 44px rgba(7,22,48,.10);
  backdrop-filter: blur(12px);
  position: relative;
  display: grid;
  gap: 6px;
}
body.svc-setup .route-card__footer::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: rgba(16,123,255,.80);
}
body.svc-setup .route-card__footer strong,
body.svc-setup .route-card__footer span{
  padding-left: 12px;
}
body.svc-setup .route-card__footer strong{
  color: rgba(11,31,58,.94);
}
body.svc-setup .route-card__footer span{
  color: rgba(11,31,58,.72);
  line-height: 1.45;
}

/* G) Hover uniforme (sin diferencias raras) */
body.svc-setup .route-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
body.svc-setup .route-card:hover{
  transform: translateY(-6px);
  border-color: rgba(16,123,255,.26);
  box-shadow:
    0 52px 160px rgba(7,22,48,.14),
    0 18px 38px rgba(7,22,48,.12),
    0 1px 0 rgba(255,255,255,.78) inset;
}

/* H) Barra CTA: más “premium” y menos blanca */
body.svc-setup .route-shift__bar{
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(16,123,255,.14);
  box-shadow: 0 30px 95px rgba(7,22,48,.10);
  backdrop-filter: blur(12px);
}
/* =========================================================
   ROUTE SHIFT — MENOS BLANCO + GLASS AZUL + TIMELINE INTERACTIVO
   Pegar AL FINAL de styles.css
========================================================= */

/* A) Fondo de sección más azul (cero blanco plano) */
body.svc-setup .route-shift{
  position: relative;
  background:
    radial-gradient(1100px 620px at 18% -5%, rgba(16,123,255,.22), transparent 60%),
    radial-gradient(900px 520px at 84% 8%, rgba(0,210,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(7,22,48,.10), rgba(7,22,48,.02) 55%),
    linear-gradient(180deg, #f3f6ff, #eef3ff);
}

/* B) Panel detrás del grid: azul suave (no blanco) */
body.svc-setup .route-shift__grid{
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 28px;
  background: rgba(10, 32, 64, .08); /* azul gris */
  border: 1px solid rgba(16,123,255,.16);
  box-shadow: 0 34px 120px rgba(7,22,48,.14);
  backdrop-filter: blur(12px);
}

/* C) Timeline con más presencia y tint azul (y se anima luego por JS) */
body.svc-setup .route-shift__timeline{
  position: relative;
  z-index: 2;
  margin: 10px 0 12px !important;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(10, 32, 64, .08);
  border: 1px solid rgba(16,123,255,.18);
  box-shadow: 0 18px 55px rgba(7,22,48,.10);
  backdrop-filter: blur(12px);
}
body.svc-setup .route-shift__dot{
  width: 10px; height: 10px;
  background: rgba(16,123,255,.70);
  box-shadow: 0 0 0 7px rgba(16,123,255,.16);
}
body.svc-setup .route-shift__line{
  height: 3px;
  border-radius: 999px;
  background: rgba(11,31,58,.14);
  transition: background .18s ease;
}
body.svc-setup .route-shift__step{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(11,31,58,.58);
  transition: color .18s ease;
}
body.svc-setup .route-shift__step.is-active{
  color: rgba(11,31,58,.94);
}

/* D) Cards: GLASS AZUL (no blanco) */
body.svc-setup .route-card{
  --acc: rgba(16,123,255,.85);
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: rgba(10, 32, 64, .06);   /* tint azul */
  border: 1px solid rgba(16,123,255,.18);
  box-shadow:
    0 30px 100px rgba(7,22,48,.14),
    0 12px 26px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.28) inset; /* mínimo */
  backdrop-filter: blur(14px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
}

/* acento superior */
body.svc-setup .route-card::before{
  content:"";
  position:absolute;
  left: 18px; right: 18px; top: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acc), rgba(16,123,255,.14));
  opacity: .95;
}

/* textura: sheen + grano suave + grid */
body.svc-setup .route-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 12% 0%, rgba(16,123,255,.18), transparent 62%),
    radial-gradient(420px 220px at 92% 18%, rgba(0,210,255,.14), transparent 64%),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  opacity:.55;
  mask-image: radial-gradient(560px 360px at 38% 0%, #000 55%, transparent 88%);
}
body.svc-setup .route-card > *{ position: relative; z-index: 1; }

/* texto con mejor contraste */
body.svc-setup .route-card h3{ color: rgba(11,31,58,.96); }
body.svc-setup .route-card__text{ color: rgba(11,31,58,.74); }

/* E) RESULTADO: presencia con halo, NO más blanco */
body.svc-setup .route-card--result{
  --acc: rgba(16,123,255,.95);
  border-color: rgba(16,123,255,.30);
  background:
    radial-gradient(520px 340px at 100% 50%, rgba(16,123,255,.20), transparent 62%),
    rgba(10, 32, 64, .07);
  box-shadow:
    0 40px 140px rgba(16,123,255,.16),
    0 30px 100px rgba(7,22,48,.16),
    0 12px 26px rgba(7,22,48,.12);
}

/* micro-elemento (badge) en esquina superior derecha */
body.svc-setup .route-card--result{
  padding-top: 26px; /* espacio para badge */
}
body.svc-setup .route-card--result .route-card__badge{
  position:absolute;
  top: 18px; right: 18px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(11,31,58,.70);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

/* F) Hover (uniforme) */
body.svc-setup .route-card:hover{
  transform: translateY(-6px);
  border-color: rgba(16,123,255,.28);
  background: rgba(10, 32, 64, .085); /* un toque más “tinta” */
  box-shadow:
    0 52px 160px rgba(7,22,48,.18),
    0 18px 38px rgba(7,22,48,.14);
}

/* G) Footer/panel inferior: glass azulado */
body.svc-setup .route-card__footer{
  margin-top: 18px;
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(10, 32, 64, .08);
  border: 1px solid rgba(16,123,255,.18);
  box-shadow: 0 18px 44px rgba(7,22,48,.12);
  backdrop-filter: blur(14px);
  position: relative;
  display: grid;
  gap: 6px;
}
body.svc-setup .route-card__footer::before{
  content:"";
  position:absolute;
  left: 12px; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: rgba(16,123,255,.85);
}
body.svc-setup .route-card__footer strong,
body.svc-setup .route-card__footer span{ padding-left: 12px; }
body.svc-setup .route-card__footer strong{ color: rgba(11,31,58,.96); }
body.svc-setup .route-card__footer span{ color: rgba(11,31,58,.74); line-height: 1.45; }

/* H) VIÑETAS: alinear bien el dot con el texto */
body.svc-setup .route-card__list{
  list-style: none;
  padding-left: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
body.svc-setup .route-card__list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(11,31,58,.80);
  line-height: 1.55;
}
body.svc-setup .route-card__list li::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(16,123,255,.72);
  box-shadow: 0 0 0 3px rgba(16,123,255,.14);
  flex: 0 0 auto;
  margin-top: 6px; /* <-- sube/baja aquí para alineación fina */
}

/* I) CTA bar: también menos blanco y más “premium” */
body.svc-setup .route-shift__bar{
  background: rgba(10, 32, 64, .08);
  border: 1px solid rgba(16,123,255,.18);
  box-shadow: 0 30px 95px rgba(7,22,48,.14);
  backdrop-filter: blur(14px);
}
/* =========================================================
   SETUP — LO QUE CAMBIA (route-shift)
   Más AZUL, look "banca", glass premium (override)
   Pegar AL FINAL de styles.css
========================================================= */

body.svc-setup .route-shift{
  position: relative;
  /* Fondo tipo HERO de Setup: navy + orbes */
  background:
    radial-gradient(1100px 620px at 18% -10%, rgba(42,133,255,.34), transparent 62%),
    radial-gradient(820px 520px at 88% 8%, rgba(0,210,255,.22), transparent 64%),
    radial-gradient(980px 640px at 50% 120%, rgba(255,255,255,.08), transparent 62%),
    linear-gradient(180deg, #0a1f3f 0%, #0b2145 38%, #0a1b35 100%);
  color: rgba(255,255,255,.92);
  overflow: hidden;
}

/* Suaviza el salto con la sección blanca de arriba/abajo */
body.svc-setup .route-shift::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%),
    linear-gradient(0deg, rgba(255,255,255,.08), rgba(255,255,255,0) 35%);
  opacity:.9;
}

/* Head en blanco legible sobre fondo azul */
body.svc-setup .route-shift__head .svc-kicker,
body.svc-setup .route-shift__head .svc-title,
body.svc-setup .route-shift__head .svc-lead{
  color: rgba(255,255,255,.92) !important;
}
body.svc-setup .route-shift__head .svc-lead{
  color: rgba(255,255,255,.74) !important;
}

/* Timeline: glass oscuro premium */
body.svc-setup .route-shift__timeline{
  position: relative;
  z-index: 2;
  margin: 14px 0 14px !important;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
}
body.svc-setup .route-shift__dot{
  width: 10px; height: 10px;
  background: rgba(120,170,255,.95);
  box-shadow: 0 0 0 7px rgba(120,170,255,.18);
}
body.svc-setup .route-shift__step{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(255,255,255,.62);
}
body.svc-setup .route-shift__step.is-active{
  color: rgba(255,255,255,.94);
}
body.svc-setup .route-shift__line{
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  transition: background .18s ease;
}

/* Wrap/panel detrás del grid: azul oscuro glass (como tus paneles) */
body.svc-setup .route-shift__grid{
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 30px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 120px rgba(0,0,0,.26);
  backdrop-filter: blur(16px);
}

/* Cards: glass AZULADO (nada de blanco plano) */
body.svc-setup .route-card{
  --acc: rgba(120,170,255,.95);
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 26px 90px rgba(0,0,0,.22),
    0 10px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

/* Acento superior fino */
body.svc-setup .route-card::before{
  content:"";
  position:absolute;
  left: 18px; right: 18px; top: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acc), rgba(255,255,255,.14));
  opacity: .95;
}

/* Textura: sheen + micro grid (premium) */
body.svc-setup .route-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 12% 0%, rgba(120,170,255,.22), transparent 62%),
    radial-gradient(420px 220px at 92% 18%, rgba(0,210,255,.18), transparent 64%),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
  opacity:.55;
  mask-image: radial-gradient(560px 360px at 38% 0%, #000 55%, transparent 88%);
}
body.svc-setup .route-card > *{ position: relative; z-index: 1; }

/* Tipografía dentro de cards (sobre glass oscuro) */
body.svc-setup .route-card h3{ color: rgba(255,255,255,.95); }
body.svc-setup .route-card__text{ color: rgba(255,255,255,.76); }

/* Viñetas alineadas (sube el dot) */
body.svc-setup .route-card__list{
  list-style: none;
  padding-left: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
body.svc-setup .route-card__list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}
body.svc-setup .route-card__list li::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(120,170,255,.92);
  box-shadow: 0 0 0 3px rgba(120,170,255,.18);
  flex: 0 0 auto;
  margin-top: 4px; /* <-- esto arregla que “bajen” */
}

/* Panel inferior dentro de cada card: glass oscuro (NO blanco) */
body.svc-setup .route-card__footer{
  margin-top: 18px;
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.20);
  backdrop-filter: blur(16px);
  position: relative;
  display: grid;
  gap: 6px;
}
body.svc-setup .route-card__footer::before{
  content:"";
  position:absolute;
  left: 12px; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: rgba(120,170,255,.90);
}
body.svc-setup .route-card__footer strong,
body.svc-setup .route-card__footer span{ padding-left: 12px; }
body.svc-setup .route-card__footer strong{ color: rgba(255,255,255,.92); }
body.svc-setup .route-card__footer span{ color: rgba(255,255,255,.72); }

/* RESULTADO destaca con halo + borde + “glow”, sin blanquear */
body.svc-setup .route-card--result{
  border-color: rgba(120,170,255,.34);
  box-shadow:
    0 44px 160px rgba(120,170,255,.18),
    0 26px 90px rgba(0,0,0,.22),
    0 10px 24px rgba(0,0,0,.18);
  filter: saturate(1.05);
}
body.svc-setup .route-card--result::after{
  opacity:.65; /* un toque más de textura/halo */
}

/* Hover uniforme fuerte y visible en las 3 */
body.svc-setup .route-card:hover{
  transform: translateY(-7px);
  border-color: rgba(120,170,255,.34);
  box-shadow:
    0 56px 190px rgba(0,0,0,.26),
    0 22px 44px rgba(0,0,0,.20);
}

/* Barra CTA inferior: glass oscuro y con presencia */
body.svc-setup .route-shift__bar{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 120px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
}
body.svc-setup .route-shift__bar-copy p{
  color: rgba(255,255,255,.88);
}
body.svc-setup .route-shift__bar-copy span{
  color: rgba(255,255,255,.64);
}
/* =========================================================
   SETUP — LO QUE CAMBIA
   Override visual fuerte sobre route-shift
========================================================= */

body.svc-setup #lo-que-cambia.route-shift{
  padding: 82px 0 88px;
  background:
    radial-gradient(820px 320px at 12% 0%, rgba(57,113,214,.18), transparent 58%),
    radial-gradient(720px 280px at 100% 10%, rgba(28,72,150,.20), transparent 56%),
    linear-gradient(180deg, #0d2748 0%, #143964 100%);
}

/* encabezado */
body.svc-setup #lo-que-cambia .svc-kicker{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
  box-shadow: none;
}

body.svc-setup #lo-que-cambia .svc-title{
  color: #ffffff;
}

body.svc-setup #lo-que-cambia .svc-lead{
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}

/* timeline */
body.svc-setup #lo-que-cambia .route-shift__timeline{
  display: grid;
  grid-template-columns: auto auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow:
    0 16px 32px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-setup #lo-que-cambia .route-shift__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #9cc0ff;
  box-shadow: 0 0 0 8px rgba(156,192,255,.12);
}

body.svc-setup #lo-que-cambia .route-shift__step{
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia .route-shift__step.is-active{
  color: #ffffff;
}

body.svc-setup #lo-que-cambia .route-shift__line{
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
}

/* grid */
body.svc-setup #lo-que-cambia .route-shift__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 20px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  box-shadow:
    0 22px 46px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* cards base */
body.svc-setup #lo-que-cambia .route-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px 24px 22px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  box-shadow:
    0 18px 34px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.svc-setup #lo-que-cambia .route-card::before{
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 18px;
  height: 3px;
  border-radius: 999px;
}

body.svc-setup #lo-que-cambia .route-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(160px 90px at 92% 10%, rgba(255,255,255,.14), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%);
}

/* card 1 */
body.svc-setup #lo-que-cambia .route-card--before{
  background:
    radial-gradient(180px 100px at 0% 0%, rgba(168,189,224,.12), transparent 72%),
    linear-gradient(180deg, rgba(244,248,253,.96), rgba(226,235,246,.92));
}

body.svc-setup #lo-que-cambia .route-card--before::before{
  background: linear-gradient(90deg, #9abaf1, rgba(154,186,241,.18));
}

/* card 2 */
body.svc-setup #lo-que-cambia .route-card--during{
  background:
    radial-gradient(180px 100px at 100% 0%, rgba(128,162,222,.14), transparent 72%),
    linear-gradient(180deg, rgba(238,245,252,.96), rgba(217,229,243,.92));
}

body.svc-setup #lo-que-cambia .route-card--during::before{
  background: linear-gradient(90deg, #7da5ec, rgba(125,165,236,.18));
}

/* card 3 destacada */
body.svc-setup #lo-que-cambia .route-card--result{
  transform: translateY(-8px);
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(93,145,232,.22), transparent 72%),
    radial-gradient(140px 90px at 0% 100%, rgba(57,97,170,.14), transparent 72%),
    linear-gradient(180deg, rgba(232,242,255,.98), rgba(212,227,247,.94));
  border-color: rgba(110,162,255,.20);
  box-shadow:
    0 24px 44px rgba(6,22,49,.18),
    0 0 0 1px rgba(110,162,255,.08),
    inset 0 1px 0 rgba(255,255,255,.22);
}

body.svc-setup #lo-que-cambia .route-card--result::before{
  background: linear-gradient(90deg, #5c92eb, rgba(92,146,235,.22));
}

/* textos */
body.svc-setup #lo-que-cambia .route-card h3{
  margin: 18px 0 10px;
  color: #10233b;
  font-size: 18px;
  line-height: 1.12;
  letter-spacing: -.02em;
}

body.svc-setup #lo-que-cambia .route-card__text{
  margin: 0 0 14px;
  color: rgba(16,35,59,.78);
  font-size: 16px;
  line-height: 1.34;
}

body.svc-setup #lo-que-cambia .route-card__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

body.svc-setup #lo-que-cambia .route-card__list li{
  position: relative;
  padding-left: 16px;
  color: rgba(16,35,59,.82);
  font-size: 16px;
  line-height: 1.28;
}

body.svc-setup #lo-que-cambia .route-card__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6d8fc4;
  box-shadow: 0 0 0 4px rgba(109,143,196,.10);
}

/* panel inferior de cada card */
body.svc-setup #lo-que-cambia .route-card__footer{
  margin-top: auto;
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid rgba(93,145,232,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(240,246,253,.38));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 10px 20px rgba(16,35,59,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-setup #lo-que-cambia .route-card__footer strong{
  display: block;
  margin-bottom: 6px;
  color: #173252;
  font-size: 16px;
  line-height: 1.16;
}

body.svc-setup #lo-que-cambia .route-card__footer span{
  display: block;
  color: rgba(16,35,59,.72);
  font-size: 15px;
  line-height: 1.28;
}

body.svc-setup #lo-que-cambia .route-card__footer{
  position: relative;
  padding-left: 18px;
}

body.svc-setup #lo-que-cambia .route-card__footer::before{
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7ba2e6, #d6e3fb);
}

body.svc-setup #lo-que-cambia .route-card__footer--result{
  background:
    linear-gradient(180deg, rgba(240,247,255,.58), rgba(226,238,252,.46));
  border-color: rgba(93,145,232,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 12px 24px rgba(47,102,208,.08);
}

body.svc-setup #lo-que-cambia .route-card__footer--result::before{
  background: linear-gradient(180deg, #4d82de, #c9dcff);
}

/* barra CTA */
body.svc-setup #lo-que-cambia .route-shift__bar{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  padding: 20px 22px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(200px 90px at 100% 0%, rgba(123,163,232,.14), transparent 74%),
    linear-gradient(145deg, rgba(17,41,74,.88), rgba(28,56,98,.82));
  box-shadow:
    0 18px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-setup #lo-que-cambia .route-shift__bar-copy p{
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.28;
  font-weight: 700;
}

body.svc-setup #lo-que-cambia .route-shift__bar-copy span{
  display: block;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
}

body.svc-setup #lo-que-cambia .route-shift__bar-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.svc-setup #lo-que-cambia .route-shift__bar-actions .btn{
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: none;
}

body.svc-setup #lo-que-cambia .route-shift__bar-actions .btn-primary{
  background: #ffffff;
  color: #173252;
  border: 1px solid rgba(255,255,255,.18);
}

body.svc-setup #lo-que-cambia .route-shift__bar-actions .btn-secondary{
  background: rgba(255,255,255,.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.14);
}

@media (max-width: 1100px){
  body.svc-setup #lo-que-cambia .route-shift__grid{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia .route-card--result{
    transform: none;
  }

  body.svc-setup #lo-que-cambia .route-shift__bar{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia .route-shift__bar-actions{
    justify-content: flex-start;
  }

  body.svc-setup #lo-que-cambia .route-shift__timeline{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.svc-setup #lo-que-cambia .route-shift__line,
  body.svc-setup #lo-que-cambia .route-shift__dot{
    display: none;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA (V2)
   Pegar al final de styles.css
========================================================= */

body.svc-setup #lo-que-cambia.route-shift--v2{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 14% 0%, rgba(16,123,255,.16), transparent 58%),
    radial-gradient(900px 540px at 86% 8%, rgba(111,168,255,.12), transparent 60%),
    linear-gradient(180deg, #f4f7fc 0%, #edf2f8 100%);
}

body.svc-setup #lo-que-cambia.route-shift--v2::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.24), rgba(255,255,255,0) 38%),
    radial-gradient(700px 260px at 50% 0%, rgba(255,255,255,.20), transparent 70%);
  opacity:.8;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .container{
  position: relative;
  z-index: 1;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__head{
  max-width: 980px;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__title{
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -1.2px;
  margin-top: 8px;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__lead{
  max-width: 920px;
  font-size: 18px;
  color: rgba(11,31,58,.72);
  margin-top: 14px;
}

/* Etapas superiores */
body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__stages{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__stage{
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.55);
  box-shadow:
    0 18px 45px rgba(11,31,58,.06),
    inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__stage-dot{
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 11px;
  background: #8fb4f3;
  box-shadow: 0 0 0 6px rgba(143,180,243,.16);
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__stage-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(11,31,58,.72);
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__stage--result .route-shift__stage-dot{
  background: #2f66d0;
  box-shadow: 0 0 0 6px rgba(47,102,208,.14);
}

/* Grid principal */
body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__grid{
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* Cards base */
body.svc-setup #lo-que-cambia.route-shift--v2 .route-card{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  border-radius: 28px;
  border: 1px solid rgba(11,31,58,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,251,255,.82));
  box-shadow:
    0 18px 55px rgba(11,31,58,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 24px 70px rgba(11,31,58,.11),
    inset 0 1px 0 rgba(255,255,255,.92);
  border-color: rgba(47,102,208,.18);
}

/* Variantes */
body.svc-setup #lo-que-cambia.route-shift--v2 .route-card--before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(243,247,252,.90));
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card--during{
  background:
    radial-gradient(300px 150px at 50% 0%, rgba(111,168,255,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(246,250,255,.92));
  border-color: rgba(111,168,255,.18);
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card--result{
  background:
    radial-gradient(260px 130px at 90% 0%, rgba(47,102,208,.15), transparent 72%),
    linear-gradient(180deg, rgba(249,252,255,.98), rgba(236,244,255,.96));
  border-color: rgba(47,102,208,.18);
  box-shadow:
    0 22px 65px rgba(11,31,58,.11),
    0 0 0 1px rgba(47,102,208,.04),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* Encabezado interno */
body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__top{
  margin-bottom: 14px;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__pill{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(11,31,58,.68);
  background: rgba(11,31,58,.04);
  border: 1px solid rgba(11,31,58,.07);
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card--result .route-card__pill{
  color: #2b5fc8;
  background: rgba(47,102,208,.08);
  border-color: rgba(47,102,208,.12);
}

/* Tipografía */
body.svc-setup #lo-que-cambia.route-shift--v2 .route-card h3{
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.4px;
  color: #10233b;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__text{
  margin: 0;
  color: rgba(11,31,58,.76);
  font-size: 16px;
  line-height: 1.42;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__list{
  margin-top: 18px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__list li{
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(11,31,58,.84);
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7d9ed8;
  box-shadow: 0 0 0 4px rgba(125,158,216,.12);
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card--result .route-card__list li::before{
  background: #2f66d0;
  box-shadow: 0 0 0 4px rgba(47,102,208,.12);
}

/* Footer interno */
body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__footer{
  margin-top: auto;
  padding: 16px 16px 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(47,102,208,.12);
  box-shadow:
    0 16px 42px rgba(11,31,58,.07),
    inset 0 1px 0 rgba(255,255,255,.88);
  position: relative;
  display: grid;
  gap: 6px;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__footer::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5f93f1, #dce9ff);
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__footer strong,
body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__footer span{
  padding-left: 12px;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__footer strong{
  color: #0f2139;
  font-size: 14px;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__footer span{
  color: rgba(11,31,58,.72);
  line-height: 1.45;
  font-size: 15px;
}

/* Barra inferior */
body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar{
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 26px;
  border: 1px solid rgba(11,31,58,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,249,255,.78));
  box-shadow:
    0 18px 50px rgba(11,31,58,.08),
    inset 0 1px 0 rgba(255,255,255,.88);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar-copy{
  display: grid;
  gap: 6px;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar-copy p{
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
  color: #10233b;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar-copy span{
  font-size: 13px;
  color: rgba(11,31,58,.55);
  font-weight: 600;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar-actions .btn{
  min-width: 178px;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__stages{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__grid{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar{
    flex-direction: column;
    align-items: flex-start;
  }

  body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar-actions{
    width: 100%;
  }

  body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar-actions .btn{
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 640px){
  body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__title{
    font-size: 34px;
  }

  body.svc-setup #lo-que-cambia.route-shift--v2 .route-card{
    padding: 20px 18px 18px;
    border-radius: 22px;
  }

  body.svc-setup #lo-que-cambia.route-shift--v2 .route-card h3{
    font-size: 18px;
  }

  body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__text,
  body.svc-setup #lo-que-cambia.route-shift--v2 .route-card__footer span{
    font-size: 14px;
  }

  body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar{
    padding: 16px;
    border-radius: 22px;
  }

  body.svc-setup #lo-que-cambia.route-shift--v2 .route-shift__bar-copy p{
    font-size: 16px;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA (V3)
========================================================= */

body.svc-setup #lo-que-cambia.route-shift--v3{
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background:
    radial-gradient(1000px 520px at 8% 0%, rgba(67,120,222,.16), transparent 58%),
    radial-gradient(900px 500px at 92% 15%, rgba(27,71,154,.12), transparent 60%),
    linear-gradient(180deg, #eef3f9 0%, #e9eff7 100%);
}

body.svc-setup #lo-que-cambia.route-shift--v3::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%),
    radial-gradient(600px 220px at 50% 0%, rgba(255,255,255,.18), transparent 70%);
  opacity: .9;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .container{
  position: relative;
  z-index: 1;
}

/* Head */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__head{
  max-width: 980px;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__eyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(93,137,220,.24);
  box-shadow:
    0 10px 28px rgba(11,31,58,.06),
    inset 0 1px 0 rgba(255,255,255,.88);
  color: #5a6f92;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__title{
  margin-top: 16px;
  font-size: clamp(36px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -1.8px;
  color: #102846;
  max-width: 980px;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__lead{
  margin-top: 18px;
  max-width: 980px;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(16,40,70,.70);
}

/* Track */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__track{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__track-step{
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(16,40,70,.08);
  box-shadow:
    0 12px 30px rgba(11,31,58,.06),
    inset 0 1px 0 rgba(255,255,255,.90);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__track-step--active{
  background: linear-gradient(135deg, #183b78 0%, #2f5eae 100%);
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 18px 40px rgba(18,46,92,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__track-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 12px;
  background: #7fa5ef;
  box-shadow: 0 0 0 6px rgba(127,165,239,.16);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__track-step span:last-child{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #536786;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__track-step--active .route-shift__track-dot{
  background: #ffffff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.16);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__track-step--active span:last-child{
  color: #ffffff;
}

/* Outer panel */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__panel{
  margin-top: 22px;
  padding: 26px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  border: 1px solid rgba(255,255,255,.42);
  box-shadow:
    0 24px 70px rgba(11,31,58,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Grid */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* Cards base */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 22px;
  border-radius: 28px;
  border: 1px solid rgba(16,40,70,.08);
  box-shadow:
    0 18px 42px rgba(11,31,58,.08),
    inset 0 1px 0 rgba(255,255,255,.86);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card h3{
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.5px;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card__list{
  list-style: none;
  padding-left: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 12px;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card__list li{
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.4;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* BEFORE */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,248,253,.94));
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--before h3{
  color: #102846;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--before .route-card__text,
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--before .route-card__list li{
  color: rgba(16,40,70,.78);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--before .route-card__list li::before{
  background: #8fb0ef;
  box-shadow: 0 0 0 4px rgba(143,176,239,.16);
}

/* DURING */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--during{
  background:
    radial-gradient(280px 180px at 10% 0%, rgba(255,255,255,.12), transparent 65%),
    linear-gradient(145deg, #183b78 0%, #214b93 58%, #2f67c0 100%);
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 24px 60px rgba(18,46,92,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--during h3{
  color: #ffffff;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--during .route-card__text,
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--during .route-card__list li{
  color: rgba(255,255,255,.88);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--during .route-card__list li::before{
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}

/* RESULT */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--result{
  background:
    radial-gradient(240px 140px at 100% 0%, rgba(79,132,228,.12), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,245,255,.96));
  border: 1px solid rgba(76,123,214,.22);
  box-shadow:
    0 22px 58px rgba(11,31,58,.11),
    inset 0 1px 0 rgba(255,255,255,.92);
  position: relative;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--result::before{
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 16px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4b82e5, #d6e6ff);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--result h3{
  margin-top: 18px;
  color: #102846;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--result .route-card__text,
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--result .route-card__list li{
  color: rgba(16,40,70,.80);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--result .route-card__list li::before{
  background: #4b82e5;
  box-shadow: 0 0 0 4px rgba(75,130,229,.14);
}

/* Footer داخلی */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card__footer{
  margin-top: auto;
  padding: 16px 16px 16px 18px;
  border-radius: 18px;
  position: relative;
  display: grid;
  gap: 8px;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card__footer::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card__footer strong,
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card__footer span{
  padding-left: 12px;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card__footer strong{
  font-size: 14px;
  line-height: 1.2;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card__footer span{
  font-size: 15px;
  line-height: 1.45;
}

/* Footer before/result */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--before .route-card__footer,
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--result .route-card__footer{
  background: rgba(241,246,255,.86);
  border: 1px solid rgba(86,133,223,.16);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--before .route-card__footer::before,
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--result .route-card__footer::before{
  background: linear-gradient(180deg, #4b82e5, #d8e7ff);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--before .route-card__footer strong,
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--result .route-card__footer strong{
  color: #102846;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--before .route-card__footer span,
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--result .route-card__footer span{
  color: rgba(16,40,70,.78);
}

/* Footer during */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--during .route-card__footer{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--during .route-card__footer::before{
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.18));
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--during .route-card__footer strong,
body.svc-setup #lo-que-cambia.route-shift--v3 .route-card--during .route-card__footer span{
  color: rgba(255,255,255,.92);
}

/* Bottom bar */
body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__bar{
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    linear-gradient(135deg, #102846 0%, #193a73 100%);
  box-shadow:
    0 22px 55px rgba(16,40,70,.20),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__bar-copy{
  display: grid;
  gap: 6px;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__bar-copy p{
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
  color: #ffffff;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__bar-copy span{
  font-size: 13px;
  color: rgba(255,255,255,.72);
  font-weight: 600;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__bar-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__bar-actions .btn{
  min-width: 178px;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-btn-soft{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #ffffff;
  font-weight: 700;
}

body.svc-setup #lo-que-cambia.route-shift--v3 .route-btn-soft:hover{
  background: rgba(255,255,255,.14);
}

/* Responsive */
@media (max-width: 980px){
  body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__track,
  body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__grid{
    grid-template-columns: 1fr;
  }

  body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__bar{
    flex-direction: column;
    align-items: flex-start;
  }

  body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__bar-actions{
    width: 100%;
  }

  body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__bar-actions .btn,
  body.svc-setup #lo-que-cambia.route-shift--v3 .route-btn-soft{
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px){
  body.svc-setup #lo-que-cambia.route-shift--v3{
    padding: 78px 0;
  }

  body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__title{
    font-size: 40px;
    letter-spacing: -1px;
  }

  body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__lead{
    font-size: 16px;
  }

  body.svc-setup #lo-que-cambia.route-shift--v3 .route-shift__panel{
    padding: 18px;
    border-radius: 24px;
  }

  body.svc-setup #lo-que-cambia.route-shift--v3 .route-card{
    padding: 22px 18px 18px;
    border-radius: 22px;
  }

  body.svc-setup #lo-que-cambia.route-shift--v3 .route-card h3{
    font-size: 20px;
  }
}
/* =========================================================
   SETUP — LO QUE CAMBIA (route-shift--v3)
   Override aislado (no toca otras páginas)
========================================================= */

body.svc-setup .route-shift--v3{
  position: relative;
  padding: 64px 0 80px;
  /* fondo azulado suave para contraste (sin “muro”) */
  background:
    radial-gradient(900px 520px at 16% 0%, rgba(16,123,255,.12), transparent 60%),
    radial-gradient(820px 520px at 86% 10%, rgba(0,210,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(7,22,48,.04), rgba(255,255,255,0) 60%);
}

body.svc-setup .route-shift--v3::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* textura sutil tipo grid */
  background:
    linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px) 0 0/30px 30px,
    linear-gradient(rgba(11,31,58,.05) 1px, transparent 1px) 0 0/30px 30px;
  opacity:.18;
  mask-image: radial-gradient(900px 520px at 42% 10%, #000 55%, transparent 85%);
}

/* Head */
body.svc-setup .route-shift--v3 .route-shift__head{
  position:relative;
  z-index:1;
}
body.svc-setup .route-shift--v3 .route-shift__eyebrow{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.18);
  color: rgba(11,31,58,.78);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px;
}
body.svc-setup .route-shift--v3 .route-shift__title{
  margin: 14px 0 10px;
}
body.svc-setup .route-shift--v3 .route-shift__lead{
  max-width: 820px;
}

/* Track (línea del tiempo) */
body.svc-setup .route-shift--v3 .route-shift__track{
  position:relative;
  z-index:1;
  margin-top: 16px;
  display:flex;
  gap: 12px;
  align-items:center;
}
body.svc-setup .route-shift--v3 .route-shift__track-step{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 30px rgba(7,22,48,.10);
}
body.svc-setup .route-shift--v3 .route-shift__track-step span:last-child{
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(11,31,58,.62);
}
body.svc-setup .route-shift--v3 .route-shift__track-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(11,31,58,.18);
  box-shadow: 0 0 0 6px rgba(11,31,58,.06);
}
body.svc-setup .route-shift--v3 .route-shift__track-step--active{
  background: rgba(16,123,255,.12);
  border-color: rgba(16,123,255,.22);
}
body.svc-setup .route-shift--v3 .route-shift__track-step--active .route-shift__track-dot{
  background: rgba(16,123,255,.92);
  box-shadow: 0 0 0 7px rgba(16,123,255,.18);
}
body.svc-setup .route-shift--v3 .route-shift__track-step--active span:last-child{
  color: rgba(11,31,58,.82);
}

/* Panel que envuelve grid + bar (glass premium) */
body.svc-setup .route-shift--v3 .route-shift__panel{
  position:relative;
  z-index:1;
  margin-top: 14px;
  padding: 18px;
  border-radius: 26px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow:
    0 36px 120px rgba(7,22,48,.16),
    0 14px 34px rgba(7,22,48,.10);
  backdrop-filter: blur(14px);
  overflow:hidden;
}
body.svc-setup .route-shift--v3 .route-shift__panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 14% 0%, rgba(16,123,255,.14), transparent 62%),
    radial-gradient(460px 240px at 92% 18%, rgba(0,210,255,.10), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,0) 58%);
  opacity:.95;
}
body.svc-setup .route-shift--v3 .route-shift__panel > *{
  position:relative;
  z-index:1;
}

/* Grid */
body.svc-setup .route-shift--v3 .route-shift__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Cards (más aire + glass + textura) */
body.svc-setup .route-shift--v3 .route-card{
  position:relative;
  border-radius: 22px;
  padding: 22px 22px 18px; /* + espacio */
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow:
    0 24px 80px rgba(7,22,48,.12),
    0 10px 22px rgba(7,22,48,.10);
  backdrop-filter: blur(10px);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* textura dentro de cada card */
body.svc-setup .route-shift--v3 .route-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 190px at 16% 0%, rgba(16,123,255,.10), transparent 60%),
    radial-gradient(360px 180px at 92% 18%, rgba(0,210,255,.06), transparent 62%);
  opacity:.95;
}
body.svc-setup .route-shift--v3 .route-card > *{
  position:relative;
  z-index:1;
}

/* Hover visible y uniforme */
body.svc-setup .route-shift--v3 .route-card:hover{
  transform: translateY(-6px);
  border-color: rgba(16,123,255,.18);
  box-shadow:
    0 34px 110px rgba(7,22,48,.16),
    0 16px 34px rgba(7,22,48,.12);
}

/* Tipos */
body.svc-setup .route-shift--v3 .route-card h3{
  margin: 0 0 10px;
  font-size: 22px;
  color: #0b1f3a;
}
body.svc-setup .route-shift--v3 .route-card__text{
  margin: 0 0 14px;
  color: rgba(11,31,58,.72);
  line-height: 1.65;
}

/* Bullets alineadas (corrige dots “caídos”) */
body.svc-setup .route-shift--v3 .route-card__list{
  list-style:none;
  padding:0;
  margin: 0 0 16px;
  display:grid;
  gap: 10px;
}
body.svc-setup .route-shift--v3 .route-card__list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(11,31,58,.72);
  line-height: 1.6;
}
body.svc-setup .route-shift--v3 .route-card__list li::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(16,123,255,.80);
  box-shadow: 0 0 0 3px rgba(16,123,255,.14);
  flex: 0 0 auto;
  margin-top: 6px; /* clave para alinear */
}

/* Footer panel dentro de cada card (abajo) */
body.svc-setup .route-shift--v3 .route-card__footer{
  margin-top: 10px;
  padding: 14px 14px 14px 16px;
  border-radius: 16px;
  background: rgba(16,123,255,.07);
  border: 1px solid rgba(16,123,255,.14);
  position:relative;
  display:grid;
  gap: 6px;
}
body.svc-setup .route-shift--v3 .route-card__footer::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: rgba(16,123,255,.70);
}
body.svc-setup .route-shift--v3 .route-card__footer strong,
body.svc-setup .route-shift--v3 .route-card__footer span{
  padding-left: 12px;
}
body.svc-setup .route-shift--v3 .route-card__footer strong{
  color:#0b1f3a;
}
body.svc-setup .route-shift--v3 .route-card__footer span{
  color: rgba(11,31,58,.72);
}

/* ✅ RESULTADO: resalta sin exagerar ni blanquear */
body.svc-setup .route-shift--v3 .route-card--result{
  background: rgba(255,255,255,.66); /* NO más blanca que las otras */
  border-color: rgba(16,123,255,.26);
  box-shadow:
    0 46px 140px rgba(16,123,255,.14),
    0 26px 90px rgba(7,22,48,.14),
    0 12px 26px rgba(7,22,48,.10);
}
body.svc-setup .route-shift--v3 .route-card--result::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 55% 0%, rgba(16,123,255,.22), transparent 60%),
    radial-gradient(520px 260px at 100% 45%, rgba(0,210,255,.12), transparent 64%);
  opacity:.85;
}
body.svc-setup .route-shift--v3 .route-card--result > *{ position:relative; z-index:1; }

/* Card medio: NO resaltar */
body.svc-setup .route-shift--v3 .route-card--during{
  border-color: rgba(11,31,58,.10);
}

/* Barra CTA inferior: ahora SÍ se ve (antes “se perdía”) */
body.svc-setup .route-shift--v3 .route-shift__bar{
  margin-top: 14px;
  border-radius: 20px;
  padding: 16px 16px;
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
  background: rgba(11,31,58,.92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 80px rgba(7,22,48,.22);
  overflow:hidden;
  position:relative;
}
body.svc-setup .route-shift--v3 .route-shift__bar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 180px at 14% 0%, rgba(16,123,255,.18), transparent 60%),
    radial-gradient(420px 180px at 92% 18%, rgba(0,210,255,.12), transparent 62%);
  opacity:.95;
}
body.svc-setup .route-shift--v3 .route-shift__bar > *{
  position:relative;
  z-index:1;
}

body.svc-setup .route-shift--v3 .route-shift__bar-copy p{
  margin:0;
  color: rgba(255,255,255,.92);
  font-weight: 700;
}
body.svc-setup .route-shift--v3 .route-shift__bar-copy span{
  display:block;
  margin-top: 4px;
  color: rgba(255,255,255,.70);
  font-weight: 600;
}

/* Botones dentro del bar (un poco más premium) */
body.svc-setup .route-shift--v3 .route-shift__bar-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex: 0 0 auto;
}
body.svc-setup .route-shift--v3 .route-shift__bar-actions .route-btn-soft{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}

/* Responsive */
@media (max-width: 980px){
  body.svc-setup .route-shift--v3 .route-shift__grid{
    grid-template-columns: 1fr;
  }
  body.svc-setup .route-shift--v3 .route-shift__bar{
    flex-direction: column;
    align-items: stretch;
  }
  body.svc-setup .route-shift--v3 .route-shift__bar-actions{
    justify-content: flex-start;
  }
}
/* =========================================================
   FIXES — route-shift--v3 (setup) AJUSTES FINOS
   (pegar DESPUÉS del override anterior)
========================================================= */

/* 1) Más azul en el background general de la sección */
body.svc-setup .route-shift--v3{
  background:
    radial-gradient(1100px 600px at 18% 0%, rgba(16,123,255,.16), transparent 62%),
    radial-gradient(980px 620px at 88% 8%, rgba(0,210,255,.12), transparent 64%),
    linear-gradient(180deg, rgba(7,22,48,.08), rgba(255,255,255,0) 62%) !important;
}

body.svc-setup .route-shift--v3::before{
  opacity: .16 !important;
}

/* 2) Quitar el “azul” de la card de en medio (during) */
body.svc-setup .route-shift--v3 .route-card--during::before{
  /* neutralizamos los halos azules internos */
  background:
    radial-gradient(420px 190px at 16% 0%, rgba(11,31,58,.05), transparent 60%),
    radial-gradient(360px 180px at 92% 18%, rgba(11,31,58,.04), transparent 62%) !important;
}

/* 3) Pasar la presencia/azul a RESULTADO (sin volverla “más blanca”) */
body.svc-setup .route-shift--v3 .route-card--result{
  border-color: rgba(16,123,255,.30) !important;
  box-shadow:
    0 52px 160px rgba(16,123,255,.14),
    0 26px 90px rgba(7,22,48,.14),
    0 12px 26px rgba(7,22,48,.10) !important;
}

body.svc-setup .route-shift--v3 .route-card--result::before{
  /* halo azul controlado */
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(16,123,255,.18), transparent 62%),
    radial-gradient(520px 240px at 100% 45%, rgba(0,210,255,.10), transparent 66%) !important;
}

/* 4) Hover uniforme en las 3 cards (mismo “brinco” y misma sombra) */
body.svc-setup .route-shift--v3 .route-card:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(16,123,255,.18) !important;
  box-shadow:
    0 34px 110px rgba(7,22,48,.16),
    0 16px 34px rgba(7,22,48,.12) !important;
}

/* 5) El panel/bar inferior “no se ve”: lo hacemos MUCHO más presente */
body.svc-setup .route-shift--v3 .route-shift__bar{
  background: linear-gradient(180deg, rgba(9,33,69,.96), rgba(9,33,69,.88)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 28px 110px rgba(7,22,48,.28),
    0 12px 26px rgba(7,22,48,.18) !important;
}

body.svc-setup .route-shift--v3 .route-shift__bar::before{
  opacity: 1 !important;
  background:
    radial-gradient(560px 190px at 14% 0%, rgba(16,123,255,.22), transparent 60%),
    radial-gradient(460px 190px at 92% 18%, rgba(0,210,255,.14), transparent 62%),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/36px 36px !important;
}

/* texto del bar más legible */
body.svc-setup .route-shift--v3 .route-shift__bar-copy p{
  color: rgba(255,255,255,.94) !important;
}
body.svc-setup .route-shift--v3 .route-shift__bar-copy span{
  color: rgba(255,255,255,.72) !important;
}

/* botón secundario del bar que no “muera” */
body.svc-setup .route-shift--v3 .route-shift__bar-actions .route-btn-soft,
body.svc-setup .route-shift--v3 .route-shift__bar-actions .btn.btn-secondary{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color: rgba(255,255,255,.95) !important;
}

/* opcional: un pelín más de “aire” en el bar */
body.svc-setup .route-shift--v3 .route-shift__bar{
  padding: 18px 18px !important;
}
/* =========================================================
   route-shift--v3 — Ajustes: background general + compacto + bar sin grid
========================================================= */

/* 1) BACKGROUND GRANDE (de toda la sección) más azulado */
body.svc-setup .route-shift--v3{
  padding: 44px 0 56px !important; /* un poco menos alto */
  background:
    radial-gradient(1200px 640px at 18% 0%, rgba(16,123,255,.20), transparent 62%),
    radial-gradient(980px 640px at 88% 10%, rgba(0,210,255,.14), transparent 66%),
    linear-gradient(180deg, rgba(7,22,48,.10), rgba(255,255,255,0) 64%) !important;
}

/* si tu ::before tenía grid en el fondo, lo bajamos más para que no “ensucie” */
body.svc-setup .route-shift--v3::before{
  opacity: .10 !important;
}

/* 2) COMPACTAR ARRIBA: head + track + panel pegados a las cards */
body.svc-setup .route-shift--v3 .route-shift__head{
  margin-bottom: 10px !important;
}
body.svc-setup .route-shift--v3 .route-shift__title{
  margin: 10px 0 6px !important;
}
body.svc-setup .route-shift--v3 .route-shift__lead{
  margin: 0 0 10px !important;
}
body.svc-setup .route-shift--v3 .route-shift__track{
  margin-top: 10px !important;
}

/* reduce padding del panel que envuelve todo para que “quepa” */
body.svc-setup .route-shift--v3 .route-shift__panel{
  margin-top: 10px !important;
  padding: 14px !important; /* menos borde alrededor */
  border-radius: 22px !important;
}

/* el grid de cards un pelín más apretado */
body.svc-setup .route-shift--v3 .route-shift__grid{
  gap: 12px !important;
}

/* cards: un toque menos de padding vertical (sin aplastar texto) */
body.svc-setup .route-shift--v3 .route-card{
  padding: 18px 20px 16px !important;
}
body.svc-setup .route-shift--v3 .route-card h3{
  margin-bottom: 8px !important;
}
body.svc-setup .route-shift--v3 .route-card__text{
  margin-bottom: 12px !important;
}
body.svc-setup .route-shift--v3 .route-card__list{
  gap: 8px !important;
  margin-bottom: 12px !important;
}

/* footer panel interno: un pelín más compacto */
body.svc-setup .route-shift--v3 .route-card__footer{
  padding: 12px 12px 12px 14px !important;
}

/* 3) PANEL FINAL (bar) más compacto + sin “cuadrícula” */
body.svc-setup .route-shift--v3 .route-shift__bar{
  margin-top: 12px !important;
  padding: 14px 14px !important;
  border-radius: 18px !important;
}

/* quitar la cuadrícula/líneas del bar (si venían del ::before) */
body.svc-setup .route-shift--v3 .route-shift__bar::before{
  background:
    radial-gradient(560px 190px at 14% 0%, rgba(16,123,255,.22), transparent 60%),
    radial-gradient(460px 190px at 92% 18%, rgba(0,210,255,.14), transparent 62%) !important;
}

/* botones del bar más compactos para que no empujen altura */
body.svc-setup .route-shift--v3 .route-shift__bar-actions{
  gap: 10px !important;
}
body.svc-setup .route-shift--v3 .route-shift__bar-actions .btn{
  padding: 10px 14px !important;
}

/* responsive: en pantallas medianas, todavía quepa mejor */
@media (max-width: 980px){
  body.svc-setup .route-shift--v3{
    padding: 36px 0 46px !important;
  }
}
/* =========================================================
   MENSUAL — REDISEÑO PREMIUM / UNIFORMIDAD VISUAL
   Pegar al FINAL de styles.css
========================================================= */

/* =========================
   Base general
========================= */
body.svc-mensual{
  background:
    linear-gradient(180deg, #f7fafe 0%, #eef4fb 100%);
  color: #0f2139;
}

body.svc-mensual main.service-page{
  background:
    radial-gradient(1100px 520px at 8% 0%, rgba(67,120,222,.10), transparent 58%),
    radial-gradient(900px 460px at 92% 20%, rgba(15,31,58,.08), transparent 62%);
}

body.svc-mensual .svc-section,
body.svc-mensual .m2-section{
  position: relative;
}

body.svc-mensual .m2-wrap{
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

/* =========================
   HERO
========================= */
body.svc-mensual .svc-hero--imageCover{
  padding: 92px 0 28px;
  background: transparent;
}

body.svc-mensual .hc-heroFrame{
  position: relative;
  min-height: 680px;
  overflow: hidden;
  border-radius: 0 0 34px 34px;
  box-shadow: 0 24px 80px rgba(11,31,58,.16);
}

body.svc-mensual .hc-heroBg{
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}

body.svc-mensual .hc-heroOverlay{
  background:
    radial-gradient(1100px 620px at 12% 16%, rgba(255,255,255,.66), rgba(255,255,255,.16) 46%, rgba(255,255,255,0) 70%),
    linear-gradient(95deg, rgba(248,251,255,.94) 0%, rgba(244,248,255,.80) 36%, rgba(255,255,255,.14) 72%, rgba(255,255,255,0) 100%);
}

body.svc-mensual .hc-heroFrame::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(10,25,47,.06), rgba(10,25,47,0) 35%);
  pointer-events:none;
  z-index:1;
}

body.svc-mensual .hc-heroContent{
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 58px 58px 44px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 30px;
  box-shadow:
    0 24px 80px rgba(11,31,58,.10),
    inset 0 1px 0 rgba(255,255,255,.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-top: 28px;
}

body.svc-mensual .mb-tag{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #2d5eb9;
  background: rgba(45,94,185,.08);
  border: 1px solid rgba(45,94,185,.16);
}

body.svc-mensual .mb-title{
  margin: 16px 0 14px;
  font-size: clamp(46px, 4.8vw, 78px);
  line-height: .98;
  letter-spacing: -1.3px;
  color: #0f2139;
  text-shadow: none;
}

body.svc-mensual .mb-lead{
  max-width: 760px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(15,33,57,.76);
}

body.svc-mensual .mb-cta{
  margin-top: 24px;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

body.svc-mensual .mb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid rgba(15,33,57,.14);
  background: rgba(255,255,255,.70);
  color: #0f2139;
  box-shadow: 0 14px 34px rgba(11,31,58,.08);
}

body.svc-mensual .mb-btn:hover{
  transform: translateY(-1px);
}

body.svc-mensual .mb-btn--primary{
  background: linear-gradient(135deg, #102848 0%, #1c4d98 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(16,40,72,.20);
}

body.svc-mensual .mb-support-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(15,33,57,.10);
  color: rgba(15,33,57,.74);
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(11,31,58,.08);
}

body.svc-mensual .mb-support-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2d5eb9;
  box-shadow: 0 0 0 5px rgba(45,94,185,.12);
}

body.svc-mensual .mb-trust{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

body.svc-mensual .mb-trust-item{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,33,57,.10);
  border-radius: 18px;
  padding: 15px 16px;
  box-shadow: 0 18px 42px rgba(11,31,58,.08);
  backdrop-filter: blur(10px);
}

body.svc-mensual .mb-trust-item b{
  display:block;
  margin-bottom: 4px;
  color: #102848;
  font-size: 14px;
}

body.svc-mensual .mb-trust-item span{
  color: rgba(15,33,57,.68);
  font-size: 13.5px;
  line-height: 1.45;
}

/* =========================
   RITMO
   (sin tocar la lógica del panel derecho)
========================= */
body.svc-mensual .m2-ritmo{
  background:
    radial-gradient(980px 520px at 16% 8%, rgba(45,94,185,.12), transparent 60%),
    radial-gradient(720px 420px at 88% 24%, rgba(83,140,232,.12), transparent 60%),
    linear-gradient(180deg, rgba(242,246,252,.92), rgba(249,251,255,.98));
  border-top: 1px solid rgba(15,33,57,.06);
  border-bottom: 1px solid rgba(15,33,57,.06);
}

body.svc-mensual .m2-grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 30px;
  align-items: start;
}

body.svc-mensual .m2-copy{
  position: relative;
}

body.svc-mensual .m2-kicker{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(45,94,185,.18);
  background: rgba(45,94,185,.08);
  font-weight: 900;
  letter-spacing: .14em;
  font-size: 11px;
  color: #2d5eb9;
  text-transform: uppercase;
}

body.svc-mensual .m2-title{
  margin: 16px 0 10px;
  font-size: clamp(34px, 3vw, 52px);
  line-height: 1.04;
  letter-spacing: -1px;
  color: #102848;
  max-width: 780px;
}

body.svc-mensual .m2-sub{
  margin: 0;
  max-width: 760px;
  font-size: 16.5px;
  line-height: 1.62;
  color: rgba(15,33,57,.72);
  font-weight: 650;
}

body.svc-mensual .m2-stepsGrid{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

body.svc-mensual .m2-step2{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(15,33,57,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,255,.90));
  padding: 18px 18px 16px;
  box-shadow:
    0 18px 42px rgba(11,31,58,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
  overflow: hidden;
}

body.svc-mensual .m2-step2::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height: 4px;
  background: linear-gradient(90deg, rgba(45,94,185,.95), rgba(209,227,255,.95));
}

body.svc-mensual .m2-step2-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 12px;
}

body.svc-mensual .m2-step2-n{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: #2d5eb9;
  background: rgba(45,94,185,.10);
  border: 1px solid rgba(45,94,185,.18);
}

body.svc-mensual .m2-step2-tag{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,33,57,.10);
  background: rgba(255,255,255,.82);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(15,33,57,.58);
}

body.svc-mensual .m2-step2 h3{
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -.2px;
  color: #102848;
}

body.svc-mensual .m2-step2 p{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.62;
  color: rgba(15,33,57,.72);
}

body.svc-mensual .m2-step2-foot{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15,33,57,.62);
  padding-top: 12px;
  border-top: 1px solid rgba(15,33,57,.08);
}

body.svc-mensual .m2-step2-foot b{
  color: #102848;
}

body.svc-mensual .m2-art-card{
  border-radius: 28px;
  border: 1px solid rgba(15,33,57,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,249,255,.90));
  box-shadow:
    0 24px 70px rgba(11,31,58,.10),
    inset 0 1px 0 rgba(255,255,255,.90);
  overflow: hidden;
}

body.svc-mensual .m2-art-top{
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(15,33,57,.08);
  background:
    linear-gradient(180deg, rgba(45,94,185,.08), rgba(255,255,255,0));
}

body.svc-mensual .m2-pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,33,57,.10);
  background: rgba(255,255,255,.84);
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,33,57,.72);
}

body.svc-mensual .m2-pill--soft{
  background: rgba(45,94,185,.10);
  border-color: rgba(45,94,185,.14);
  color: #2d5eb9;
}

body.svc-mensual .m2-art-body{
  padding: 16px;
}

body.svc-mensual .m2-mini{
  border-radius: 16px;
  border: 1px solid rgba(15,33,57,.08);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 28px rgba(11,31,58,.06);
}

body.svc-mensual .m2-note{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,33,57,.08);
  background:
    linear-gradient(135deg, #102848 0%, #1c4d98 100%);
  padding: 14px 16px;
  color: rgba(255,255,255,.88);
  font-weight: 650;
  box-shadow: 0 18px 40px rgba(16,40,72,.16);
}

body.svc-mensual .m2-note b{
  color: #fff;
}

/* =========================
   QUÉ INCLUYE
========================= */
body.svc-mensual .m2-incluye{
  background:
    radial-gradient(860px 480px at 78% 0%, rgba(45,94,185,.10), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,255,.96));
  border-top: 1px solid rgba(15,33,57,.06);
  border-bottom: 1px solid rgba(15,33,57,.06);
}

body.svc-mensual .m2-inc-head{
  margin-bottom: 20px;
  max-width: 760px;
}

body.svc-mensual .m2-inc-title{
  margin: 0;
  font-size: clamp(34px, 3vw, 50px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: #102848;
}

body.svc-mensual .m2-inc-sub{
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(15,33,57,.70);
}

body.svc-mensual .m2-inc-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

body.svc-mensual .m2-feature{
  position: relative;
  border-radius: 22px;
  padding: 22px;
  border: 1px solid rgba(15,33,57,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,255,.90));
  box-shadow:
    0 18px 46px rgba(11,31,58,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
  overflow: hidden;
}

body.svc-mensual .m2-feature::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height: 4px;
  background: linear-gradient(90deg, rgba(45,94,185,.92), rgba(213,229,255,.92));
}

body.svc-mensual .m2-feature:nth-child(2),
body.svc-mensual .m2-feature--accent{
  background:
    radial-gradient(260px 180px at 10% 0%, rgba(255,255,255,.12), transparent 65%),
    linear-gradient(145deg, #15376f 0%, #1d4d99 60%, #2b64bf 100%);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 24px 60px rgba(18,46,92,.22);
}

body.svc-mensual .m2-feature:nth-child(2)::before,
body.svc-mensual .m2-feature--accent::before{
  background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.18));
}

body.svc-mensual .m2-feature:nth-child(2) h3,
body.svc-mensual .m2-feature:nth-child(2) p,
body.svc-mensual .m2-feature:nth-child(2) .m2-meta,
body.svc-mensual .m2-feature:nth-child(2) .m2-meta b,
body.svc-mensual .m2-feature--accent h3,
body.svc-mensual .m2-feature--accent p,
body.svc-mensual .m2-feature--accent .m2-meta,
body.svc-mensual .m2-feature--accent .m2-meta b{
  color: rgba(255,255,255,.92);
}

body.svc-mensual .m2-ic{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: #2d5eb9;
  background: rgba(45,94,185,.10);
  border: 1px solid rgba(45,94,185,.18);
  margin-bottom: 12px;
}

body.svc-mensual .m2-feature:nth-child(2) .m2-ic,
body.svc-mensual .m2-feature--accent .m2-ic{
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

body.svc-mensual .m2-ic svg{
  width: 22px;
  height: 22px;
}

body.svc-mensual .m2-feature h3{
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.1;
  color: #102848;
}

body.svc-mensual .m2-feature p{
  margin: 0;
  font-size: 14.6px;
  line-height: 1.6;
  color: rgba(15,33,57,.72);
}

body.svc-mensual .m2-meta{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,33,57,.08);
  font-size: 13px;
  color: rgba(15,33,57,.64);
}

/* =========================
   SECCIONES GENÉRICAS
   Entregables / Proceso / CTA
========================= */
body.svc-mensual main > .svc-section{
  padding: 92px 0;
  background: transparent;
}

body.svc-mensual main .svc-section .container > h2{
  margin: 0;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.06;
  letter-spacing: -1px;
  color: #102848;
}

body.svc-mensual main .svc-section .container > h2 + p{
  margin-top: 10px;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(15,33,57,.70);
}

body.svc-mensual .svc-panels{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

body.svc-mensual .svc-panel{
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(15,33,57,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,249,255,.92));
  padding: 24px;
  box-shadow:
    0 20px 50px rgba(11,31,58,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
  overflow: hidden;
}

body.svc-mensual .svc-panel::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  background: linear-gradient(180deg, #2d5eb9, #d7e8ff);
}

body.svc-mensual .svc-panel h3{
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.1;
  color: #102848;
}

body.svc-mensual .svc-panel p{
  color: rgba(15,33,57,.72);
  line-height: 1.6;
}

body.svc-mensual .svc-list{
  list-style:none;
  padding-left: 0;
  margin: 16px 0 0;
  display:grid;
  gap: 10px;
}

body.svc-mensual .svc-list li{
  position: relative;
  padding-left: 20px;
  color: rgba(15,33,57,.78);
  line-height: 1.5;
}

body.svc-mensual .svc-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2d5eb9;
  box-shadow: 0 0 0 4px rgba(45,94,185,.12);
}

body.svc-mensual .svc-steps{
  margin-top: 24px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

body.svc-mensual .svc-step{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(15,33,57,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,249,255,.92));
  padding: 20px 20px 18px;
  box-shadow:
    0 16px 40px rgba(11,31,58,.07),
    inset 0 1px 0 rgba(255,255,255,.92);
  overflow: hidden;
}

body.svc-mensual .svc-step::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  background: linear-gradient(180deg, #2d5eb9, #d7e8ff);
}

body.svc-mensual .svc-step b{
  display:block;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.25;
  color: #102848;
}

body.svc-mensual .svc-step p{
  margin: 0;
  color: rgba(15,33,57,.70);
  line-height: 1.55;
}

body.svc-mensual .svc-cta{
  margin-top: 24px;
  border-radius: 26px;
  padding: 22px 24px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  background:
    linear-gradient(135deg, #102848 0%, #1c4d98 100%);
  box-shadow:
    0 24px 60px rgba(16,40,72,.20),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.svc-mensual .svc-cta h3{
  margin: 0 0 6px;
  color: #fff;
  font-size: 24px;
  line-height: 1.08;
}

body.svc-mensual .svc-cta p{
  margin: 0;
  color: rgba(255,255,255,.76);
  line-height: 1.55;
}

body.svc-mensual .svc-cta-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

body.svc-mensual .svc-cta .btn-primary{
  background: #fff;
  color: #102848;
}

body.svc-mensual .svc-cta .btn-secondary{
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}

/* =========================
   IMPACTO
========================= */
body.svc-mensual .soft{
  background:
    radial-gradient(940px 420px at 10% 0%, rgba(45,94,185,.10), transparent 58%),
    linear-gradient(180deg, rgba(244,248,255,.96), rgba(237,244,252,.98));
  border-top: 1px solid rgba(15,33,57,.06);
  border-bottom: 1px solid rgba(15,33,57,.06);
}

body.svc-mensual .m2-change-head{
  max-width: 760px;
  margin-bottom: 20px;
}

body.svc-mensual .m2-change-kicker{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(45,94,185,.18);
  background: rgba(45,94,185,.08);
  font-weight: 900;
  letter-spacing: .14em;
  font-size: 11px;
  color: #2d5eb9;
  text-transform: uppercase;
}

body.svc-mensual .m2-change-title{
  margin: 16px 0 8px;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.06;
  letter-spacing: -1px;
  color: #102848;
}

body.svc-mensual .m2-change-sub{
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(15,33,57,.70);
}

body.svc-mensual .m2-change-flow{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.08fr);
  gap: 16px;
  align-items: stretch;
}

body.svc-mensual .m2-change-card{
  border-radius: 24px;
  border: 1px solid rgba(15,33,57,.10);
  padding: 22px 20px;
  box-shadow:
    0 18px 46px rgba(11,31,58,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

body.svc-mensual .m2-change-card.is-before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,255,.92));
}

body.svc-mensual .m2-change-card.is-after{
  background:
    radial-gradient(260px 180px at 8% 0%, rgba(255,255,255,.12), transparent 65%),
    linear-gradient(145deg, #15376f 0%, #1d4d99 60%, #2b64bf 100%);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 24px 60px rgba(18,46,92,.22);
}

body.svc-mensual .m2-change-card:last-of-type{
  background:
    radial-gradient(240px 160px at 100% 0%, rgba(79,132,228,.12), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(239,245,255,.96));
  border-color: rgba(76,123,214,.22);
}

body.svc-mensual .m2-change-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

body.svc-mensual .m2-change-badge{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  background: rgba(45,94,185,.08);
  border: 1px solid rgba(45,94,185,.16);
  color: #2d5eb9;
}

body.svc-mensual .m2-change-card.is-after .m2-change-badge{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}

body.svc-mensual .m2-change-ico{
  color: rgba(15,33,57,.38);
}

body.svc-mensual .m2-change-card.is-after .m2-change-ico{
  color: rgba(255,255,255,.72);
}

body.svc-mensual .m2-change-text{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 700;
  color: #102848;
}

body.svc-mensual .m2-change-card.is-after .m2-change-text,
body.svc-mensual .m2-change-card.is-after .m2-change-list li,
body.svc-mensual .m2-change-card.is-after .m2-chip{
  color: rgba(255,255,255,.92);
}

body.svc-mensual .m2-change-list{
  list-style:none;
  padding-left:0;
  margin: 18px 0 0;
  display:grid;
  gap: 10px;
}

body.svc-mensual .m2-change-list li{
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(15,33,57,.78);
}

body.svc-mensual .m2-change-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2d5eb9;
  box-shadow: 0 0 0 4px rgba(45,94,185,.12);
}

body.svc-mensual .m2-change-card.is-after .m2-change-list li::before{
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}

body.svc-mensual .m2-change-arrow{
  display:grid;
  place-items:center;
}

body.svc-mensual .m2-change-arrow span{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,33,57,.10);
  box-shadow: 0 14px 34px rgba(11,31,58,.08);
  color: #2d5eb9;
  font-size: 24px;
  font-weight: 900;
}

body.svc-mensual .m2-change-chips{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

body.svc-mensual .m2-chip{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(15,33,57,.10);
  background: rgba(255,255,255,.84);
  color: rgba(15,33,57,.64);
}

body.svc-mensual .m2-change-card.is-after .m2-chip{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

body.svc-mensual .m2-change-quote{
  margin-top: 18px;
  border-radius: 24px;
  padding: 18px 22px;
  background:
    linear-gradient(135deg, #102848 0%, #1c4d98 100%);
  box-shadow:
    0 24px 60px rgba(16,40,72,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.svc-mensual .m2-change-quote p{
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.42;
  font-weight: 800;
}

body.svc-mensual .m2-change-quote cite{
  display:block;
  margin-top: 8px;
  color: rgba(255,255,255,.70);
  font-style: normal;
  font-size: 13px;
}

/* =========================
   INFORMACIÓN MÍNIMA
========================= */
body.svc-mensual #minimo{
  background:
    radial-gradient(960px 420px at 16% 10%, rgba(45,94,185,.10), transparent 58%),
    radial-gradient(760px 420px at 88% 62%, rgba(15,33,57,.07), transparent 62%),
    linear-gradient(180deg, #ffffff, #f7fafe);
  border-top: 1px solid rgba(15,33,57,.06);
}

body.svc-mensual #minimo .m2-min-head{
  max-width: 860px;
}

body.svc-mensual #minimo .m2-min-kicker{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(45,94,185,.18);
  background: rgba(45,94,185,.08);
  font-weight: 900;
  letter-spacing: .14em;
  font-size: 11px;
  color: #2d5eb9;
  text-transform: uppercase;
}

body.svc-mensual #minimo .m2-min-title{
  margin: 16px 0 8px;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.06;
  letter-spacing: -1px;
  color: #102848;
}

body.svc-mensual #minimo .m2-min-sub{
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(15,33,57,.70);
}

body.svc-mensual #minimo .m2-min-badges{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15,33,57,.08);
}

body.svc-mensual #minimo .m2-min-chip{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,33,57,.10);
  background: rgba(255,255,255,.82);
  color: rgba(15,33,57,.68);
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(11,31,58,.05);
}

body.svc-mensual #minimo .m2-min-layout{
  margin-top: 24px;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px;
  align-items: start;
}

body.svc-mensual #minimo .m2-min-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.svc-mensual #minimo .m2-min-card{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(15,33,57,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,249,255,.92));
  padding: 18px;
  box-shadow:
    0 16px 36px rgba(11,31,58,.07),
    inset 0 1px 0 rgba(255,255,255,.92);
  overflow: hidden;
  text-align:left !important;
}

body.svc-mensual #minimo .m2-min-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height: 4px;
  background: linear-gradient(90deg, rgba(45,94,185,.92), rgba(213,229,255,.92));
}

body.svc-mensual #minimo .m2-min-top{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 12px;
}

body.svc-mensual #minimo .m2-min-ic{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  color: #2d5eb9;
  background: rgba(45,94,185,.10);
  border: 1px solid rgba(45,94,185,.18);
}

body.svc-mensual #minimo .m2-min-top h3{
  margin: 0 !important;
  color: #102848;
  font-size: 17px !important;
  letter-spacing: -0.25px !important;
  line-height: 1.2;
}

body.svc-mensual #minimo .m2-min-card ul{
  list-style:none !important;
  padding-left:0 !important;
  margin:0;
}

body.svc-mensual #minimo .m2-min-card ul li{
  position: relative !important;
  padding-left: 20px !important;
  font-size: 14.6px !important;
  line-height: 1.5 !important;
  color: rgba(15,33,57,.74) !important;
}

body.svc-mensual #minimo .m2-min-card ul li + li{
  margin-top: 8px;
}

body.svc-mensual #minimo .m2-min-card ul li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:8px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(45,94,185,.78) !important;
  box-shadow: 0 0 0 4px rgba(45,94,185,.12) !important;
  border: none !important;
}

body.svc-mensual #minimo .m2-min-panel{
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, #102848 0%, #1c4d98 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 24px 60px rgba(16,40,72,.20),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow: hidden;
}

/* =========================
   Responsive
========================= */
@media (max-width: 1100px){
  body.svc-mensual .mb-trust{
    grid-template-columns: 1fr;
  }

  body.svc-mensual .m2-grid,
  body.svc-mensual #minimo .m2-min-layout{
    grid-template-columns: 1fr;
  }

  body.svc-mensual .m2-inc-grid,
  body.svc-mensual .svc-panels,
  body.svc-mensual .svc-steps{
    grid-template-columns: 1fr;
  }

  body.svc-mensual .m2-change-flow{
    grid-template-columns: 1fr;
  }

  body.svc-mensual .m2-change-arrow{
    display:none;
  }

  body.svc-mensual .svc-cta{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 980px){
  body.svc-mensual .hc-heroFrame{
    min-height: auto;
    border-radius: 0 0 24px 24px;
  }

  body.svc-mensual .hc-heroContent{
    max-width: 100%;
    padding: 34px 22px 26px;
    border-radius: 22px;
    margin-top: 16px;
  }

  body.svc-mensual .mb-title{
    font-size: 48px;
  }

  body.svc-mensual .m2-stepsGrid,
  body.svc-mensual #minimo .m2-min-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  body.svc-mensual .svc-hero--imageCover{
    padding: 84px 0 18px;
  }

  body.svc-mensual .mb-title{
    font-size: 40px;
    letter-spacing: -1px;
  }

  body.svc-mensual .mb-lead,
  body.svc-mensual .m2-sub,
  body.svc-mensual .m2-inc-sub,
  body.svc-mensual .m2-change-sub,
  body.svc-mensual #minimo .m2-min-sub{
    font-size: 15px;
  }

  body.svc-mensual .m2-section,
  body.svc-mensual .svc-section{
    padding: 74px 0;
  }

  body.svc-mensual .m2-wrap{
    width: min(100%, calc(100% - 28px));
  }

  body.svc-mensual .m2-feature,
  body.svc-mensual .m2-step2,
  body.svc-mensual .svc-panel,
  body.svc-mensual .svc-step,
  body.svc-mensual .m2-change-card,
  body.svc-mensual #minimo .m2-min-card{
    border-radius: 18px;
  }

  body.svc-mensual .svc-cta{
    border-radius: 20px;
    padding: 18px;
  }

  body.svc-mensual .svc-cta h3{
    font-size: 20px;
  }
}
/* =========================================================
   MENSUAL — CAPA 2
   TIPOGRAFÍA + JERARQUÍA + UNIFORMIDAD DE FORMATO
   Pegar al final de styles.css, debajo del bloque anterior
========================================================= */

body.svc-mensual{
  --m-h1: clamp(44px, 5vw, 72px);
  --m-h2: clamp(34px, 3.2vw, 50px);
  --m-h3: 22px;
  --m-h4: 18px;

  --m-kicker: 11px;
  --m-chip: 11px;
  --m-meta: 13px;
  --m-body-lg: 18px;
  --m-body: 16px;
  --m-body-sm: 14.5px;
  --m-caption: 12.5px;

  --m-title-color: #102848;
  --m-text-strong: rgba(15,33,57,.84);
  --m-text: rgba(15,33,57,.72);
  --m-text-soft: rgba(15,33,57,.58);
}

/* =========================
   REGLA GENERAL
========================= */
body.svc-mensual h1,
body.svc-mensual h2,
body.svc-mensual h3,
body.svc-mensual h4{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--m-title-color);
}

body.svc-mensual p,
body.svc-mensual li,
body.svc-mensual span,
body.svc-mensual strong,
body.svc-mensual b,
body.svc-mensual a,
body.svc-mensual label,
body.svc-mensual input,
body.svc-mensual textarea,
body.svc-mensual select,
body.svc-mensual small{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   HERO — escala principal
========================= */
body.svc-mensual .mb-title{
  font-size: var(--m-h1);
  line-height: .96;
  letter-spacing: -1.6px;
  font-weight: 800;
  max-width: 760px;
}

body.svc-mensual .mb-lead{
  font-size: var(--m-body-lg);
  line-height: 1.58;
  font-weight: 500;
  max-width: 760px;
}

body.svc-mensual .mb-tag{
  font-size: var(--m-kicker);
  letter-spacing: .16em;
  font-weight: 900;
}

body.svc-mensual .mb-btn,
body.svc-mensual .mb-btn--primary,
body.svc-mensual .mb-support-pill{
  font-size: 14px;
  font-weight: 800;
}

body.svc-mensual .mb-trust-item b{
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}

body.svc-mensual .mb-trust-item span{
  font-size: var(--m-body-sm);
  line-height: 1.52;
  font-weight: 500;
}

/* =========================
   TÍTULOS DE SECCIÓN
========================= */
body.svc-mensual .m2-title,
body.svc-mensual .m2-inc-title,
body.svc-mensual .m2-change-title,
body.svc-mensual .m2-min-title,
body.svc-mensual main .svc-section .container > h2{
  font-size: var(--m-h2) !important;
  line-height: 1.04 !important;
  letter-spacing: -1px !important;
  font-weight: 800 !important;
  color: var(--m-title-color) !important;
  max-width: 860px;
}

body.svc-mensual .m2-sub,
body.svc-mensual .m2-inc-sub,
body.svc-mensual .m2-change-sub,
body.svc-mensual .m2-min-sub,
body.svc-mensual main .svc-section .container > h2 + p{
  font-size: var(--m-body) !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
  color: var(--m-text) !important;
  max-width: 780px;
}

body.svc-mensual .m2-kicker,
body.svc-mensual .m2-change-kicker,
body.svc-mensual .m2-min-kicker{
  font-size: var(--m-kicker) !important;
  letter-spacing: .16em !important;
  font-weight: 900 !important;
}

body.svc-mensual .m2-inc-head{
  margin-bottom: 22px;
}

body.svc-mensual .m2-change-head,
body.svc-mensual #minimo .m2-min-head{
  margin-bottom: 22px;
}

/* =========================
   BLOQUE RITMO
========================= */
body.svc-mensual .m2-step2 h3{
  font-size: var(--m-h4);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.2px;
}

body.svc-mensual .m2-step2 p{
  font-size: var(--m-body-sm);
  line-height: 1.6;
  font-weight: 500;
  color: var(--m-text);
}

body.svc-mensual .m2-step2-tag{
  font-size: var(--m-chip);
  letter-spacing: .12em;
  font-weight: 800;
}

body.svc-mensual .m2-step2-foot{
  font-size: var(--m-meta);
  line-height: 1.55;
  font-weight: 500;
  color: var(--m-text-soft);
}

body.svc-mensual .m2-step2-foot b{
  font-weight: 800;
}

body.svc-mensual .m2-note{
  font-size: var(--m-body-sm);
  line-height: 1.55;
  font-weight: 600;
}

body.svc-mensual .m2-note b{
  font-weight: 800;
}

/* panel derecho de RITMO — sin cambiar acomodo */
body.svc-mensual .m2-pill,
body.svc-mensual .m2-pill--soft{
  font-size: var(--m-chip);
  letter-spacing: .10em;
  font-weight: 800;
}

body.svc-mensual .m-card-h{
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.svc-mensual .m-big{
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.5px;
  font-weight: 800;
}

body.svc-mensual .m-cap{
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--m-text-soft);
}

body.svc-mensual .m-card-sub,
body.svc-mensual .m-footer .m-tab{
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 700;
}

body.svc-mensual .m-todo li{
  font-size: 13.5px;
  line-height: 1.48;
  font-weight: 500;
}

/* =========================
   QUÉ INCLUYE
========================= */
body.svc-mensual .m2-feature h3{
  font-size: var(--m-h3);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.3px;
}

body.svc-mensual .m2-feature p{
  font-size: var(--m-body-sm);
  line-height: 1.62;
  font-weight: 500;
}

body.svc-mensual .m2-meta{
  font-size: var(--m-meta);
  line-height: 1.45;
  font-weight: 600;
}

body.svc-mensual .m2-meta b{
  font-weight: 800;
}

/* =========================
   ENTREGABLES / PANELES
========================= */
body.svc-mensual .svc-panel h3{
  font-size: var(--m-h3);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.3px;
}

body.svc-mensual .svc-panel p{
  font-size: var(--m-body-sm);
  line-height: 1.62;
  font-weight: 500;
}

body.svc-mensual .svc-list li{
  font-size: var(--m-body-sm);
  line-height: 1.55;
  font-weight: 500;
}

/* =========================
   PROCESO
========================= */
body.svc-mensual .svc-step b{
  font-size: 17px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -.2px;
}

body.svc-mensual .svc-step p{
  font-size: var(--m-body-sm);
  line-height: 1.58;
  font-weight: 500;
  color: var(--m-text);
}

/* CTA de sección */
body.svc-mensual .svc-cta h3{
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -.4px;
  font-weight: 800;
}

body.svc-mensual .svc-cta p{
  font-size: 14.5px;
  line-height: 1.58;
  font-weight: 500;
}

body.svc-mensual .svc-cta .btn,
body.svc-mensual .svc-cta .btn-primary,
body.svc-mensual .svc-cta .btn-secondary{
  font-size: 14px;
  font-weight: 800;
}

/* =========================
   IMPACTO
========================= */
body.svc-mensual .m2-change-badge{
  font-size: var(--m-chip);
  font-weight: 900;
  letter-spacing: .10em;
}

body.svc-mensual .m2-change-text{
  font-size: 18px;
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -.2px;
}

body.svc-mensual .m2-change-list li{
  font-size: var(--m-body-sm);
  line-height: 1.55;
  font-weight: 500;
}

body.svc-mensual .m2-chip{
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 800;
}

body.svc-mensual .m2-change-quote p{
  font-size: 18px;
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -.2px;
}

body.svc-mensual .m2-change-quote cite{
  font-size: var(--m-meta);
  line-height: 1.4;
  font-weight: 500;
}

/* =========================
   INFORMACIÓN MÍNIMA
========================= */
body.svc-mensual #minimo .m2-min-chip{
  font-size: var(--m-meta);
  line-height: 1.35;
  font-weight: 700;
}

body.svc-mensual #minimo .m2-min-top h3{
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

body.svc-mensual #minimo .m2-min-card ul li{
  font-size: var(--m-body-sm) !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

body.svc-mensual #minimo .m2-min-panel .m2-pill,
body.svc-mensual #minimo .m2-min-panel .m2-pill--soft,
body.svc-mensual #minimo .m2-min-panel .m-card-h,
body.svc-mensual #minimo .m2-min-panel .m-card-sub,
body.svc-mensual #minimo .m2-min-panel .m-footer .m-tab{
  font-size: 12px;
  font-weight: 800;
}

body.svc-mensual #minimo .m2-min-panel .m-big{
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
}

/* =========================
   CONTACTO / FORMULARIO
========================= */
body.svc-mensual .contact-kicker,
body.svc-mensual .contact-form-title,
body.svc-mensual .contact-mini-kicker{
  font-size: var(--m-kicker);
  letter-spacing: .16em;
  font-weight: 900;
  text-transform: uppercase;
}

body.svc-mensual .contact-title{
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.04;
  letter-spacing: -1px;
  font-weight: 800;
}

body.svc-mensual .contact-lead{
  font-size: var(--m-body);
  line-height: 1.65;
  font-weight: 500;
}

body.svc-mensual .contact-hero-list li,
body.svc-mensual .contact-meta-card p,
body.svc-mensual .contact-note,
body.svc-mensual .contact-form label,
body.svc-mensual .contact-form input,
body.svc-mensual .contact-form textarea,
body.svc-mensual .contact-form select{
  font-size: var(--m-body-sm);
  line-height: 1.5;
}

body.svc-mensual .contact-meta-card h3,
body.svc-mensual .contact-form h3{
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}

body.svc-mensual .contact-form button,
body.svc-mensual .contact-hero-copy .btn{
  font-size: 14px;
  font-weight: 800;
}

/* =========================
   BOTONES GLOBALES EN MENSUAL
========================= */
body.svc-mensual .btn,
body.svc-mensual a.btn{
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

/* =========================
   ESPACIADO MÁS FINO ENTRE BLOQUES
========================= */
body.svc-mensual .m2-inc-head,
body.svc-mensual .m2-change-head,
body.svc-mensual #minimo .m2-min-head,
body.svc-mensual main .svc-section .container > h2 + p{
  margin-bottom: 0;
}

body.svc-mensual .m2-inc-grid,
body.svc-mensual .svc-panels,
body.svc-mensual .svc-steps,
body.svc-mensual .m2-change-flow,
body.svc-mensual #minimo .m2-min-layout{
  margin-top: 24px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  body.svc-mensual{
    --m-h1: 48px;
    --m-h2: 38px;
    --m-h3: 20px;
    --m-h4: 17px;
    --m-body-lg: 17px;
    --m-body: 15.5px;
    --m-body-sm: 14px;
  }

  body.svc-mensual .svc-cta h3{
    font-size: 22px;
  }

  body.svc-mensual .m2-change-text,
  body.svc-mensual .m2-change-quote p{
    font-size: 17px;
  }

  body.svc-mensual .m-big{
    font-size: 24px;
  }
}

@media (max-width: 640px){
  body.svc-mensual{
    --m-h1: 40px;
    --m-h2: 32px;
    --m-h3: 19px;
    --m-h4: 16px;
    --m-body-lg: 16px;
    --m-body: 15px;
    --m-body-sm: 13.8px;
    --m-meta: 12.5px;
  }

  body.svc-mensual .mb-title{
    line-height: .98;
  }

  body.svc-mensual .svc-cta h3{
    font-size: 20px;
  }

  body.svc-mensual .m2-change-text,
  body.svc-mensual .m2-change-quote p{
    font-size: 16.5px;
  }

  body.svc-mensual .m-big,
  body.svc-mensual #minimo .m2-min-panel .m-big{
    font-size: 22px;
  }
}
/* =========================================================
   MENSUAL — HERO SIN IMAGEN + TÍTULOS MÁS PERSUASIVOS
   + TEXTURAS Y PROFUNDIDAD
========================================================= */

/* ---------- HERO SIN IMAGEN ---------- */
body.svc-mensual .svc-hero--noImage{
  padding: 96px 0 28px;
  background: transparent;
}

body.svc-mensual .mb-heroShell{
  position: relative;
  overflow: hidden;
  border-radius: 0 0 34px 34px;
  background:
    linear-gradient(135deg, #0f2744 0%, #14396e 52%, #2b63bf 100%);
  box-shadow:
    0 28px 90px rgba(11,31,58,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.svc-mensual .mb-heroGlow{
  position: absolute;
  border-radius: 999px;
  filter: blur(30px);
  pointer-events: none;
  opacity: .9;
}

body.svc-mensual .mb-heroGlow--a{
  width: 420px;
  height: 420px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(128,174,255,.34), rgba(128,174,255,0) 70%);
}

body.svc-mensual .mb-heroGlow--b{
  width: 520px;
  height: 520px;
  right: -120px;
  bottom: -180px;
  background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 72%);
}

body.svc-mensual .mb-heroGrid{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.15));
}

body.svc-mensual .mb-heroLayout{
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: stretch;
  padding: 54px 0 42px;
}

body.svc-mensual .mb-heroCopy{
  padding: 10px 0 0;
}

body.svc-mensual .svc-hero--noImage .mb-tag{
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

body.svc-mensual .svc-hero--noImage .mb-title{
  color: #fff;
  max-width: 780px;
}

body.svc-mensual .svc-hero--noImage .mb-lead{
  color: rgba(255,255,255,.80);
  max-width: 760px;
}

body.svc-mensual .svc-hero--noImage .mb-btn{
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 34px rgba(11,31,58,.12);
}

body.svc-mensual .svc-hero--noImage .mb-btn--primary{
  background: #fff;
  color: #102848;
  border-color: transparent;
}

body.svc-mensual .svc-hero--noImage .mb-support-pill{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 34px rgba(11,31,58,.12);
}

body.svc-mensual .svc-hero--noImage .mb-support-dot{
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,.14);
}

body.svc-mensual .svc-hero--noImage .mb-trust-item{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}

body.svc-mensual .svc-hero--noImage .mb-trust-item b{
  color: #fff;
}

body.svc-mensual .svc-hero--noImage .mb-trust-item span{
  color: rgba(255,255,255,.76);
}

body.svc-mensual .mb-miniBand{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(11,31,58,.14);
}

body.svc-mensual .mb-miniBand-item{
  padding: 14px 16px;
  background: rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.12);
  display:grid;
  gap: 4px;
}

body.svc-mensual .mb-miniBand-item:last-child{
  border-right: none;
}

body.svc-mensual .mb-miniBand-item span{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,.58);
}

body.svc-mensual .mb-miniBand-item strong{
  font-size: 14px;
  line-height: 1.35;
  color: #fff;
  font-weight: 800;
}

/* ---------- PANEL HERO DERECHO ---------- */
body.svc-mensual .mb-heroPanel{
  align-self: stretch;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  box-shadow:
    0 28px 70px rgba(8,22,44,.24),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px;
  display:flex;
  flex-direction: column;
}

body.svc-mensual .mb-panelTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

body.svc-mensual .mb-panelKicker{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.svc-mensual .mb-panelPill{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.70);
  font-size: 12px;
  font-weight: 800;
}

body.svc-mensual .mb-panelTitle{
  margin: 0;
  font-size: 28px;
  line-height: 1.06;
  letter-spacing: -.5px;
  color: #fff;
}

body.svc-mensual .mb-panelLead{
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(255,255,255,.76);
}

body.svc-mensual .mb-panelMetrics{
  margin-top: 18px;
  display:grid;
  gap: 12px;
}

body.svc-mensual .mb-metric{
  display:grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items:center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

body.svc-mensual .mb-metricValue{
  min-height: 56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
}

body.svc-mensual .mb-metricText b{
  display:block;
  font-size: 14px;
  line-height: 1.25;
  color: #fff;
  font-weight: 800;
}

body.svc-mensual .mb-metricText span{
  display:block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255,255,255,.72);
}

body.svc-mensual .mb-panelList{
  margin-top: 16px;
  display:grid;
  gap: 10px;
}

body.svc-mensual .mb-panelListItem{
  position: relative;
  padding-left: 18px;
  font-size: 13.8px;
  line-height: 1.45;
  color: rgba(255,255,255,.80);
}

body.svc-mensual .mb-panelListItem::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}

body.svc-mensual .mb-panelFooter{
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:grid;
  gap: 4px;
}

body.svc-mensual .mb-panelFooter span{
  font-size: 13px;
  color: rgba(255,255,255,.60);
}

body.svc-mensual .mb-panelFooter strong{
  font-size: 16px;
  line-height: 1.35;
  color: #fff;
  font-weight: 800;
}

/* ---------- TÍTULOS DE SECCIÓN MÁS EXPRESIVOS ---------- */
body.svc-mensual .m2-title,
body.svc-mensual .m2-inc-title,
body.svc-mensual .m2-change-title,
body.svc-mensual .m2-min-title,
body.svc-mensual .faqObj2-title,
body.svc-mensual .hc-contact h2,
body.svc-mensual main .svc-section .container > h2{
  position: relative;
}

body.svc-mensual .m2-title::after,
body.svc-mensual .m2-inc-title::after,
body.svc-mensual .m2-change-title::after,
body.svc-mensual .m2-min-title::after,
body.svc-mensual .faqObj2-title::after,
body.svc-mensual .hc-contact h2::after,
body.svc-mensual main .svc-section .container > h2::after{
  content:"";
  display:block;
  width: 74px;
  height: 4px;
  border-radius: 999px;
  margin-top: 16px;
  background: linear-gradient(90deg, #2d5eb9, rgba(213,229,255,.95));
  box-shadow: 0 8px 20px rgba(45,94,185,.14);
}

/* ---------- PROFUNDIDAD EXTRA EN CARDS ---------- */
body.svc-mensual .m2-step2,
body.svc-mensual .m2-feature,
body.svc-mensual .svc-panel,
body.svc-mensual .svc-step,
body.svc-mensual .m2-change-card,
body.svc-mensual #minimo .m2-min-card,
body.svc-mensual .faqObj2-topic,
body.svc-mensual .faqObj2-panel,
body.svc-mensual .hc-mini-card{
  box-shadow:
    0 16px 40px rgba(11,31,58,.07),
    0 2px 10px rgba(11,31,58,.03),
    inset 0 1px 0 rgba(255,255,255,.92);
}

body.svc-mensual .m2-step2:hover,
body.svc-mensual .m2-feature:hover,
body.svc-mensual .svc-panel:hover,
body.svc-mensual .svc-step:hover,
body.svc-mensual .m2-change-card:hover,
body.svc-mensual #minimo .m2-min-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 24px 60px rgba(11,31,58,.10),
    0 4px 14px rgba(11,31,58,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

body.svc-mensual .m2-step2,
body.svc-mensual .m2-feature,
body.svc-mensual .svc-panel,
body.svc-mensual .svc-step,
body.svc-mensual .m2-change-card,
body.svc-mensual #minimo .m2-min-card{
  transition: transform .18s ease, box-shadow .18s ease;
}

/* textura sutil interna */
body.svc-mensual .m2-step2::after,
body.svc-mensual .m2-feature::after,
body.svc-mensual .svc-panel::after,
body.svc-mensual .svc-step::after,
body.svc-mensual .m2-change-card::after,
body.svc-mensual #minimo .m2-min-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background-image:
    linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0));
}

/* paneles oscuros: menos vacíos */
body.svc-mensual .m2-feature:nth-child(2),
body.svc-mensual .m2-feature--accent,
body.svc-mensual .m2-change-card.is-after,
body.svc-mensual .svc-cta,
body.svc-mensual .m2-note{
  position: relative;
  overflow: hidden;
}

body.svc-mensual .m2-feature:nth-child(2)::before,
body.svc-mensual .m2-feature--accent::before,
body.svc-mensual .m2-change-card.is-after::before,
body.svc-mensual .svc-cta::before,
body.svc-mensual .m2-note::before{
  box-shadow: none;
}

body.svc-mensual .m2-feature:nth-child(2)::after,
body.svc-mensual .m2-feature--accent::after,
body.svc-mensual .m2-change-card.is-after::after,
body.svc-mensual .svc-cta::after,
body.svc-mensual .m2-note::after{
  content:"";
  position:absolute;
  width: 240px;
  height: 240px;
  right: -80px;
  top: -80px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
  opacity: .9;
  pointer-events:none;
}

/* ---------- FAQ HEAD ---------- */
body.svc-mensual .faqObj2-kicker{
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 900;
  text-transform: uppercase;
  color: #2d5eb9;
}

body.svc-mensual .faqObj2-title{
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.05;
  letter-spacing: -1px;
  font-weight: 800;
  color: #102848;
}

body.svc-mensual .faqObj2-sub{
  max-width: 760px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(15,33,57,.72);
}

/* ---------- CONTACTO MÁS INTEGRADO ---------- */
body.svc-mensual .hc-contact{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(860px 420px at 8% 0%, rgba(45,94,185,.10), transparent 60%),
    linear-gradient(180deg, #f7fafe, #f1f6fc);
}

body.svc-mensual .hc-contact::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%);
  opacity:.9;
}

body.svc-mensual .hc-contact-grid{
  position: relative;
  z-index: 1;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
  body.svc-mensual .mb-heroLayout{
    grid-template-columns: 1fr;
  }

  body.svc-mensual .mb-miniBand{
    grid-template-columns: 1fr;
  }

  body.svc-mensual .mb-miniBand-item{
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  body.svc-mensual .mb-miniBand-item:last-child{
    border-bottom: none;
  }
}

@media (max-width: 640px){
  body.svc-mensual .svc-hero--noImage{
    padding: 84px 0 18px;
  }

  body.svc-mensual .mb-heroShell{
    border-radius: 0 0 24px 24px;
  }

  body.svc-mensual .mb-heroLayout{
    padding: 34px 0 26px;
  }

  body.svc-mensual .mb-panelTitle{
    font-size: 24px;
  }

  body.svc-mensual .mb-metric{
    grid-template-columns: 62px 1fr;
  }

  body.svc-mensual .mb-metricValue{
    font-size: 19px;
    min-height: 50px;
  }
}
/* ✅ PEGA ESTE OVERRIDE AL FINAL DE styles.css
   (solo afecta Setup / sección “Información mínima”) */

body.service-page.svc-setup #info-minima{
  position: relative;
  background:
    radial-gradient(900px 540px at 18% 8%, rgba(16,123,255,.10), transparent 60%),
    radial-gradient(760px 520px at 88% 18%, rgba(10,103,194,.08), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.04), rgba(255,255,255,0) 60%);
}

body.service-page.svc-setup #info-minima .svc-panel{
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.88);
  box-shadow:
    0 22px 70px rgba(7,22,48,.10),
    0 10px 22px rgba(7,22,48,.06),
    inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}

body.service-page.svc-setup #info-minima .svc-panel:hover{
  border-color: rgba(16,123,255,.16);
  box-shadow:
    0 26px 86px rgba(7,22,48,.12),
    0 12px 26px rgba(7,22,48,.07),
    inset 0 1px 0 rgba(255,255,255,.78);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.service-page.svc-setup #info-minima .svc-check li{
  background: rgba(11,31,58,.03);
  border: 1px solid rgba(11,31,58,.06);
}

/* --------- Entregables: header + tipografía --------- */
body.service-page.svc-setup #entregables-setup .svc-deliver-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

body.service-page.svc-setup #entregables-setup .svc-deliver-meta{
  font-weight:800;
  font-size:12px;
  color: rgba(11,31,58,.60);
}

/* --------- Mock base --------- */
body.service-page.svc-setup #entregables-setup .svc-deliver-item--mock{
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.70);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 16px 44px rgba(7,22,48,.08);
  overflow:hidden;
}

body.service-page.svc-setup #entregables-setup .svc-deliver-desc{
  margin: 10px 0 0;
  color: rgba(11,31,58,.72);
  font-size: 13.5px;
  line-height: 1.45;
}

/* --------- Mock Dashboard --------- */
body.service-page.svc-setup #entregables-setup .svc-mock{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
  overflow:hidden;
}

body.service-page.svc-setup #entregables-setup .svc-mock--dash{
  padding: 10px;
}

body.service-page.svc-setup #entregables-setup .svc-mock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 6px 10px;
}

body.service-page.svc-setup #entregables-setup .svc-mock-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:12px;
  color: rgba(11,31,58,.78);
}

body.service-page.svc-setup #entregables-setup .svc-mock-title .dot{
  width:8px;height:8px;border-radius:50%;
  background: rgba(11,31,58,.18);
  display:inline-block;
}

body.service-page.svc-setup #entregables-setup .svc-mock-tabs{
  display:flex; gap:6px; flex-wrap:wrap;
}

body.service-page.svc-setup #entregables-setup .svc-mock-tabs span{
  font-size:11px;
  font-weight:800;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(11,31,58,.66);
  background: rgba(11,31,58,.06);
  border: 1px solid rgba(11,31,58,.08);
}

body.service-page.svc-setup #entregables-setup .svc-mock-tabs span.is-active{
  color: rgba(255,255,255,.92);
  background: linear-gradient(135deg, #183b78 0%, #2f5eae 100%);
  border-color: rgba(255,255,255,.16);
}

body.service-page.svc-setup #entregables-setup .svc-mock-kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
  padding: 0 6px 10px;
}

body.service-page.svc-setup #entregables-setup .svc-kpi{
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(11,31,58,.04);
  border: 1px solid rgba(11,31,58,.07);
}

body.service-page.svc-setup #entregables-setup .svc-kpi small{
  display:block;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(11,31,58,.52);
}

body.service-page.svc-setup #entregables-setup .svc-kpi strong{
  display:block;
  font-size:14px;
  color:#0b1f3a;
  margin-top:4px;
}

body.service-page.svc-setup #entregables-setup .svc-kpi em{
  display:block;
  font-style:normal;
  font-size:11px;
  color: rgba(11,31,58,.62);
  margin-top:2px;
}

body.service-page.svc-setup #entregables-setup .svc-mock-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:8px;
  padding: 0 6px 6px;
}

body.service-page.svc-setup #entregables-setup .svc-mock-card{
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(11,31,58,.08);
}

body.service-page.svc-setup #entregables-setup .svc-mock-card-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}

body.service-page.svc-setup #entregables-setup .svc-mock-card-h b{
  font-size:12px;
  color:#0b1f3a;
}
body.service-page.svc-setup #entregables-setup .svc-mock-card-h span{
  font-size:11px;
  color: rgba(11,31,58,.60);
  font-weight:700;
}

body.service-page.svc-setup #entregables-setup .svc-mini-chart{
  height: 64px;
  display:flex;
  gap:6px;
  align-items:flex-end;
  padding: 6px 2px 2px;
}

body.service-page.svc-setup #entregables-setup .svc-mini-chart span{
  width: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(16,123,255,.85), rgba(16,123,255,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

body.service-page.svc-setup #entregables-setup .svc-mini-table{
  display:grid;
  gap:6px;
  margin-top: 2px;
}

body.service-page.svc-setup #entregables-setup .svc-mini-table .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(11,31,58,.04);
  border: 1px solid rgba(11,31,58,.06);
  font-size: 11.5px;
}

body.service-page.svc-setup #entregables-setup .svc-mini-table .k{
  color: rgba(11,31,58,.72);
  font-weight:700;
}
body.service-page.svc-setup #entregables-setup .svc-mini-table .v{
  font-weight:900;
  color:#0b1f3a;
}
body.service-page.svc-setup #entregables-setup .svc-mini-table .v.pos{ color: rgba(16,123,255,.95); }
body.service-page.svc-setup #entregables-setup .svc-mini-table .v.neg{ color: rgba(11,31,58,.85); }

body.service-page.svc-setup #entregables-setup .svc-mini-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top: 8px;
}

body.service-page.svc-setup #entregables-setup .svc-mini-actions .pill{
  font-size: 11px;
  font-weight:800;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(11,31,58,.78);
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.14);
}

/* --------- Mock PDF --------- */
body.service-page.svc-setup #entregables-setup .svc-mock--pdf{
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
}

body.service-page.svc-setup #entregables-setup .svc-pdf-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 6px 10px;
}

body.service-page.svc-setup #entregables-setup .svc-pdf-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  font-size:12px;
  color: rgba(11,31,58,.78);
}

body.service-page.svc-setup #entregables-setup .pdf-dot{
  width:10px;height:10px;border-radius:3px;
  background: rgba(16,123,255,.28);
  border: 1px solid rgba(16,123,255,.30);
}

body.service-page.svc-setup #entregables-setup .svc-pdf-badge{
  font-size:11px;
  font-weight:900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,31,58,.06);
  border: 1px solid rgba(11,31,58,.08);
  color: rgba(11,31,58,.72);
}

body.service-page.svc-setup #entregables-setup .svc-pdf-block{
  border-radius: 14px;
  padding: 10px;
  background: rgba(11,31,58,.03);
  border: 1px solid rgba(11,31,58,.06);
  margin: 0 6px 8px;
}

body.service-page.svc-setup #entregables-setup .svc-pdf-h{
  font-weight:900;
  font-size:12px;
  color:#0b1f3a;
  margin-bottom: 8px;
}

body.service-page.svc-setup #entregables-setup .svc-pdf-lines{
  display:grid;
  gap:6px;
}
body.service-page.svc-setup #entregables-setup .svc-pdf-lines span{
  height:8px;
  border-radius: 999px;
  background: rgba(11,31,58,.10);
}

body.service-page.svc-setup #entregables-setup .svc-pdf-callout{
  margin-top: 10px;
  border-radius: 12px;
  padding: 10px;
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.14);
}
body.service-page.svc-setup #entregables-setup .svc-pdf-callout b{
  display:block;
  font-size: 11px;
  font-weight: 900;
  color:#0b1f3a;
}
body.service-page.svc-setup #entregables-setup .svc-pdf-callout span{
  display:block;
  font-size: 11.5px;
  color: rgba(11,31,58,.72);
  margin-top: 2px;
}

body.service-page.svc-setup #entregables-setup .svc-pdf-bullets{
  display:grid;
  gap:8px;
}
body.service-page.svc-setup #entregables-setup .svc-pdf-bullets span{
  width:8px;height:8px;border-radius:50%;
  background: rgba(16,123,255,.60);
  display:inline-block;
}
body.service-page.svc-setup #entregables-setup .svc-pdf-bullets i{
  height:8px;
  border-radius: 999px;
  background: rgba(11,31,58,.10);
  display:inline-block;
  margin-left:8px;
}
body.service-page.svc-setup #entregables-setup .svc-pdf-bullets{
  grid-template-columns: 8px 1fr;
  align-items:center;
}
body.service-page.svc-setup #entregables-setup .svc-pdf-bullets span:nth-child(odd){ justify-self:start; }
body.service-page.svc-setup #entregables-setup .svc-pdf-bullets i:nth-child(even){ justify-self:start; }

body.service-page.svc-setup #entregables-setup .svc-pdf-foot{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding: 2px 6px 6px;
}

body.service-page.svc-setup #entregables-setup .svc-pdf-foot .chip{
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(11,31,58,.08);
  color: rgba(11,31,58,.70);
}

/* Responsive: que no se rompa el mock */
@media (max-width: 980px){
  body.service-page.svc-setup #entregables-setup .svc-mock-grid{
    grid-template-columns: 1fr;
  }
  body.service-page.svc-setup #entregables-setup .svc-mock-kpis{
    grid-template-columns: 1fr;
  }
}
/* ================================
   SETUP · INFO MÍNIMA (pulido + que quepa)
   Scope: solo esta sección del Setup
=================================== */
body.svc-setup #info-minima{
  /* fondo sutil azulado para menos “blanco que lastima” */
  background:
    radial-gradient(900px 420px at 12% 12%, rgba(24,59,120,.10), transparent 60%),
    radial-gradient(760px 420px at 88% 8%, rgba(47,94,174,.10), transparent 58%),
    linear-gradient(180deg, rgba(6,22,48,.02), rgba(255,255,255,0) 62%);
}

body.svc-setup #info-minima .svc-head{
  margin-bottom: 18px !important; /* compacta arriba */
}

body.svc-setup #info-minima .svc-title{
  letter-spacing: -0.02em;
}

body.svc-setup #info-minima .svc-lead{
  max-width: 860px;
}

/* Layout 2 columnas más “tight” para que quepa en pantalla */
body.svc-setup #info-minima .svc-split{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 18px;
  align-items: start;
}

/* Tarjetas/paneles con textura y profundidad (sin exagerar) */
body.svc-setup #info-minima .svc-panel{
  position: relative;
  border-radius: 22px;
  padding: 20px 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow:
    0 22px 70px rgba(7,22,48,.10),
    0 10px 22px rgba(7,22,48,.06);
  overflow: hidden;
}

body.svc-setup #info-minima .svc-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(24,59,120,.10), transparent 62%),
    radial-gradient(420px 220px at 92% 18%, rgba(47,94,174,.10), transparent 62%),
    linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px) 0 0/26px 26px;
  opacity:.35;
  mask-image: radial-gradient(900px 420px at 40% 0%, #000 58%, transparent 86%);
}

body.svc-setup #info-minima .svc-panel > *{
  position: relative;
  z-index: 1;
}

/* Checklist izquierda: más “institucional” y menos simple */
body.svc-setup #info-minima .svc-check{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

body.svc-setup #info-minima .svc-check li{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 10px 24px rgba(7,22,48,.06);
}

/* CTA azul en izquierda: más “premium” */
body.svc-setup #info-minima .svc-mini-cta{
  margin-top: 14px;
  border-radius: 18px;
  padding: 14px 14px;
  background: linear-gradient(135deg, #183b78 0%, #2f5eae 100%);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 44px rgba(18,46,92,.18);
}
body.svc-setup #info-minima .svc-mini-cta p{
  color: rgba(255,255,255,.88) !important;
}
body.svc-setup #info-minima .svc-mini-cta .btn{
  background: rgba(255,255,255,.92) !important;
  color: #0b1f3a !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Panel derecho “entregables”: que NO se haga gigante */
body.svc-setup #info-minima .svc-deliver-grid{
  display: grid;
  gap: 14px;
}

body.svc-setup #info-minima .svc-deliver-item{
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 38px rgba(7,22,48,.08);
  overflow: hidden;
  position: relative;
}

body.svc-setup #info-minima .svc-deliver-item::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 160px at 18% 0%, rgba(24,59,120,.10), transparent 65%),
    radial-gradient(360px 160px at 92% 20%, rgba(47,94,174,.10), transparent 65%);
  opacity:.9;
}

body.svc-setup #info-minima .svc-deliver-item > *{
  position: relative;
  z-index: 1;
}

/* ========== Mocks nuevos (dashboard / reporte) ==========
   Compactos para que quepa todo y se vean más reales
*/
body.svc-setup #info-minima .hc-mock{
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(247,249,255,.92);
  box-shadow: 0 10px 24px rgba(7,22,48,.08);
  overflow: hidden;
  height: 140px;              /* clave: evita que se “alargue” */
}

body.svc-setup #info-minima .hc-mock--dash{
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(244,247,255,.92));
}

body.svc-setup #info-minima .hc-mock-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(11,31,58,.08);
}
body.svc-setup #info-minima .hc-mock-title{
  font-size: 12px;
  font-weight: 800;
  color: rgba(11,31,58,.78);
}
body.svc-setup #info-minima .hc-mock-badge{
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(24,59,120,.10);
  color: rgba(11,31,58,.78);
  border: 1px solid rgba(24,59,120,.14);
}

body.svc-setup #info-minima .hc-kpi-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 10px 8px;
}
body.svc-setup #info-minima .hc-kpi{
  border-radius: 12px;
  padding: 8px 8px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(11,31,58,.08);
}
body.svc-setup #info-minima .hc-kpi small{
  display:block;
  font-size: 10px;
  font-weight: 800;
  color: rgba(11,31,58,.55);
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.svc-setup #info-minima .hc-kpi b{
  display:block;
  font-size: 13px;
  color: #0b1f3a;
  margin-top: 2px;
}
body.svc-setup #info-minima .hc-kpi span{
  display:block;
  font-size: 10.5px;
  color: rgba(11,31,58,.60);
  margin-top: 2px;
}

body.svc-setup #info-minima .hc-mini-chart{
  display:flex;
  gap: 6px;
  align-items:flex-end;
  padding: 0 10px 10px;
}
body.svc-setup #info-minima .hc-mini-bar{
  width: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(47,94,174,.92), rgba(47,94,174,.35));
  border: 1px solid rgba(47,94,174,.18);
}

/* Reporte PDF: estructura tipo “página” */
body.svc-setup #info-minima .hc-mock--pdf{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,248,255,.92));
}
body.svc-setup #info-minima .hc-pdf-body{
  padding: 10px 10px 10px;
  display: grid;
  gap: 8px;
}
body.svc-setup #info-minima .hc-pdf-h{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
body.svc-setup #info-minima .hc-pdf-h b{
  font-size: 12px;
  color:#0b1f3a;
}
body.svc-setup #info-minima .hc-pdf-h span{
  font-size: 10px;
  color: rgba(11,31,58,.55);
  font-weight: 800;
  letter-spacing:.08em;
  text-transform: uppercase;
}
body.svc-setup #info-minima .hc-pdf-lines{
  display:grid;
  gap: 6px;
}
body.svc-setup #info-minima .hc-line{
  height: 8px;
  border-radius: 999px;
  background: rgba(11,31,58,.08);
}
body.svc-setup #info-minima .hc-line.is-strong{
  background: rgba(47,94,174,.22);
}
body.svc-setup #info-minima .hc-pdf-callout{
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(24,59,120,.10);
  border: 1px solid rgba(24,59,120,.14);
}
body.svc-setup #info-minima .hc-pdf-callout b{
  display:block;
  font-size: 11px;
  color:#0b1f3a;
}
body.svc-setup #info-minima .hc-pdf-callout span{
  display:block;
  font-size: 10.5px;
  color: rgba(11,31,58,.68);
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-setup #info-minima .svc-split{ grid-template-columns: 1fr; }
  body.svc-setup #info-minima .hc-mock{ height: 150px; }
}
/* ============================
   Mock PDF ejecutivo (sin “líneas”)
   Solo Setup / info-minima
============================ */
body.svc-setup #info-minima .hc-mock--pdf{
  /* lo dejamos compacto y premium */
  height: 160px; /* un poquito más que el dashboard, pero controlado */
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,248,255,.92));
}

/* Layout interno en 2 columnas */
body.svc-setup #info-minima .hc-pdf2{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 10px;
  padding: 10px;
}

body.svc-setup #info-minima .hc-pdf2-section{
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.86);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 10px 24px rgba(7,22,48,.06);
}

body.svc-setup #info-minima .hc-pdf2-label{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,31,58,.55);
  margin-bottom: 6px;
}

/* KPI mini */
body.svc-setup #info-minima .hc-pdf2-kpis{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.svc-setup #info-minima .hc-pdf2-kpi{
  border-radius: 10px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(247,249,255,.92);
  padding: 6px 8px;
}
body.svc-setup #info-minima .hc-pdf2-kpi .k{
  display:block;
  font-size: 10px;
  font-weight: 800;
  color: rgba(11,31,58,.58);
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.svc-setup #info-minima .hc-pdf2-kpi .v{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
  color: #0b1f3a;
}

/* Alertas */
body.svc-setup #info-minima .hc-pdf2-alerts{
  display: grid;
  gap: 6px;
}
body.svc-setup #info-minima .hc-pdf2-alert{
  display:flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.25;
  color: rgba(11,31,58,.80);
}
body.svc-setup #info-minima .hc-pdf2-alert .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 3px;
  background: rgba(47,94,174,.90);
  box-shadow: 0 0 0 3px rgba(47,94,174,.14);
  flex: 0 0 auto;
}

/* Callout Plan 30–60–90 */
body.svc-setup #info-minima .hc-pdf2-callout{
  border-radius: 12px;
  padding: 9px 10px;
  background: linear-gradient(135deg, rgba(24,59,120,.12), rgba(47,94,174,.10));
  border: 1px solid rgba(24,59,120,.16);
  box-shadow: 0 12px 30px rgba(18,46,92,.10);
}
body.svc-setup #info-minima .hc-pdf2-callout-title{
  font-size: 12px;
  font-weight: 900;
  color: #0b1f3a;
}
body.svc-setup #info-minima .hc-pdf2-callout-sub{
  font-size: 10.5px;
  color: rgba(11,31,58,.62);
  margin-top: 2px;
}

body.svc-setup #info-minima .hc-pdf2-steps{
  margin-top: 8px;
  display: grid;
  gap: 6px;
}
body.svc-setup #info-minima .hc-pdf2-step{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(11,31,58,.10);
}
body.svc-setup #info-minima .hc-pdf2-step .tag{
  width: 30px;
  height: 22px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 10px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  background: linear-gradient(135deg, #183b78 0%, #2f5eae 100%);
  border: 1px solid rgba(255,255,255,.12);
}
body.svc-setup #info-minima .hc-pdf2-step .txt{
  font-size: 11px;
  color: rgba(11,31,58,.78);
  font-weight: 700;
  line-height: 1.2;
}

/* Mini tabla (muy compacta) */
body.svc-setup #info-minima .hc-pdf2-mini-table{
  margin-top: 8px;
  border-radius: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 24px rgba(7,22,48,.06);
}
body.svc-setup #info-minima .hc-pdf2-mini-table .t-h{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,31,58,.55);
  margin-bottom: 6px;
}
body.svc-setup #info-minima .hc-pdf2-mini-table .t-r{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 10px;
  font-size: 11px;
  color: rgba(11,31,58,.80);
  padding: 4px 0;
  border-top: 1px solid rgba(11,31,58,.06);
}
body.svc-setup #info-minima .hc-pdf2-mini-table .t-r:first-of-type{
  border-top: none;
  color: rgba(11,31,58,.55);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.svc-setup #info-minima .hc-pdf2-mini-table .c2{
  text-align: right;
  color: rgba(11,31,58,.72);
}

/* Responsive: que no se rompa */
@media (max-width: 980px){
  body.svc-setup #info-minima .hc-mock--pdf{ height: 170px; }
  body.svc-setup #info-minima .hc-pdf2{ grid-template-columns: 1fr; }
}
body.svc-setup #info-minima .svc-minimum-proof{
  margin-top: 12px;
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(247,249,255,.92);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 12px 30px rgba(7,22,48,.06);
}

body.svc-setup #info-minima .svc-minimum-proof__title{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,31,58,.60);
  margin-bottom: 8px;
}

body.svc-setup #info-minima .svc-minimum-proof__list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
  color: rgba(11,31,58,.78);
  font-size: 13px;
  line-height: 1.45;
}

body.svc-setup #info-minima .svc-minimum-proof__note{
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 10px;
  background: linear-gradient(135deg, rgba(24,59,120,.10), rgba(47,94,174,.08));
  border: 1px solid rgba(24,59,120,.14);
  color: rgba(11,31,58,.78);
  font-size: 13px;
}
/* ============================
   INFO MINIMA (Setup) — polish final
============================ */
body.svc-setup #info-minima{
  position: relative;
  background:
    radial-gradient(900px 520px at 18% 6%, rgba(24,59,120,.10), transparent 62%),
    radial-gradient(820px 520px at 84% 18%, rgba(47,94,174,.08), transparent 58%),
    linear-gradient(180deg, rgba(7,22,48,.02), rgba(255,255,255,0) 55%);
}

body.svc-setup #info-minima::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,31,58,.05) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(rgba(11,31,58,.045) 1px, transparent 1px) 0 0/34px 34px;
  opacity:.18;
  mask-image: radial-gradient(900px 520px at 45% 0%, #000 55%, transparent 84%);
}

body.svc-setup #info-minima .container{
  position: relative;
  z-index: 1;
}

/* Paneles principales (izq/der) más “premium” */
body.svc-setup #info-minima .svc-panel{
  border-radius: 22px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.88);
  box-shadow:
    0 22px 70px rgba(7,22,48,.10),
    0 10px 22px rgba(7,22,48,.08),
    0 1px 0 rgba(255,255,255,.75) inset;
  overflow: hidden;
  position: relative;
}

body.svc-setup #info-minima .svc-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(24,59,120,.10), transparent 58%),
    radial-gradient(520px 220px at 92% 18%, rgba(47,94,174,.08), transparent 60%);
  opacity:.85;
}

/* Hover sutil en paneles (no exagerado) */
body.svc-setup #info-minima .svc-panel{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.svc-setup #info-minima .svc-panel:hover{
  transform: translateY(-2px);
  border-color: rgba(47,94,174,.18);
  box-shadow:
    0 28px 90px rgba(7,22,48,.12),
    0 12px 28px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.75) inset;
}

/* Checklist del panel izquierdo más pro */
body.svc-setup #info-minima .svc-check li{
  background: rgba(247,249,255,.90);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 10px 26px rgba(7,22,48,.06);
}

/* CTA izquierdo: más presencia sin “gritar” */
body.svc-setup #info-minima .svc-mini-cta{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(11,31,58,.96), rgba(11,31,58,.82));
  box-shadow: 0 22px 70px rgba(7,22,48,.16);
}

/* “Cómo lo usamos” integrado, con textura */
body.svc-setup #info-minima .svc-minimum-proof{
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 16px 44px rgba(7,22,48,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Entregables (derecha) – tarjetas internas con más profundidad */
body.svc-setup #info-minima .svc-deliver-item{
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 52px rgba(7,22,48,.10);
  overflow: hidden;
  position: relative;
}

body.svc-setup #info-minima .svc-deliver-item::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 180px at 18% 0%, rgba(24,59,120,.10), transparent 60%),
    radial-gradient(380px 180px at 92% 30%, rgba(47,94,174,.08), transparent 60%);
  opacity:.9;
}

/* Tabs/etiquetas del mock (más pro, menos “flat”) */
body.svc-setup #info-minima .hc-mock-topbar{
  border-bottom: 1px solid rgba(11,31,58,.10);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* ============================
   SETUP · INFO MINIMA — v2
   - CTA al final
   - Paneles misma altura
   - Más presencia / menos blanco
============================ */

body.svc-setup #info-minima{
  position: relative;
  padding-top: 54px;   /* un poco más compacto si quieres que quepa todo */
  padding-bottom: 54px;
  background:
    radial-gradient(1000px 560px at 18% 5%, rgba(24,59,120,.14), transparent 60%),
    radial-gradient(980px 560px at 86% 10%, rgba(47,94,174,.10), transparent 62%),
    linear-gradient(180deg, rgba(11,31,58,.035), rgba(255,255,255,0) 60%);
}

body.svc-setup #info-minima::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* textura suave (no cuadricula marcada) */
  background:
    radial-gradient(circle at 1px 1px, rgba(11,31,58,.06) 1px, transparent 1.6px) 0 0/22px 22px;
  opacity:.22;
  mask-image: radial-gradient(900px 520px at 48% 0%, #000 55%, transparent 86%);
}

body.svc-setup #info-minima .container{ position:relative; z-index:1; }

/* --- layout: paneles misma altura --- */
body.svc-setup #info-minima .svc-split{
  align-items: stretch !important;
}

body.svc-setup #info-minima .svc-panel{
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  /* menos blanco, más “tinta” azul */
  background: linear-gradient(180deg, rgba(240,246,255,.92), rgba(233,241,255,.86));
  box-shadow:
    0 26px 90px rgba(7,22,48,.12),
    0 12px 28px rgba(7,22,48,.10),
    0 1px 0 rgba(255,255,255,.70) inset;
  overflow: hidden;
  position: relative;
}

body.svc-setup #info-minima .svc-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 14% 0%, rgba(24,59,120,.16), transparent 58%),
    radial-gradient(520px 220px at 92% 20%, rgba(47,94,174,.12), transparent 62%);
  opacity:.9;
}

/* títulos/intro arriba siempre visibles */
body.svc-setup #info-minima .svc-panel > *{ position:relative; z-index:1; }

/* --- checklist items con más presencia --- */
body.svc-setup #info-minima .svc-check li{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,31,58,.10);
  box-shadow: 0 14px 34px rgba(7,22,48,.08);
}

/* --- panel "Cómo lo usamos" más premium --- */
body.svc-setup #info-minima .svc-minimum-proof{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(11,31,58,.06);
  box-shadow: 0 16px 44px rgba(7,22,48,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --- derecha: tarjetas entregables con más “cuerpo” --- */
body.svc-setup #info-minima .svc-deliver-item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 54px rgba(7,22,48,.12);
}

/* evita que el contenido se “desborde” hacia abajo y rompa alturas */
body.svc-setup #info-minima .svc-deliver-grid{
  margin-top: 12px;
  gap: 14px;
}

/* --- CTA final (debajo de ambos paneles) --- */
body.svc-setup #info-minima .svc-minima-cta{
  margin-top: 16px;
  border-radius: 22px;
  padding: 18px 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(11,31,58,.94), rgba(24,59,120,.86));
  box-shadow: 0 26px 90px rgba(7,22,48,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body.svc-setup #info-minima .svc-minima-cta__copy b{
  display:block;
  color:#fff;
  font-size: 16px;
  margin-bottom: 4px;
}

body.svc-setup #info-minima .svc-minima-cta__copy span{
  display:block;
  color: rgba(255,255,255,.80);
  line-height: 1.35;
  font-size: 13.5px;
}

body.svc-setup #info-minima .svc-minima-cta__actions{
  display:flex;
  gap: 10px;
  flex: 0 0 auto;
}

/* responsive */
@media (max-width: 980px){
  body.svc-setup #info-minima .svc-minima-cta{
    flex-direction: column;
    align-items: flex-start;
  }
  body.svc-setup #info-minima .svc-minima-cta__actions{
    width: 100%;
  }
  body.svc-setup #info-minima .svc-minima-cta__actions .btn{
    width: 100%;
    justify-content: center;
  }
}
/* =========================================
   SETUP · INFO MINIMA — compact + panel azul
   (Override: pega al FINAL de styles.css)
========================================= */

body.svc-setup #info-minima{
  /* compacta la sección completa */
  padding-top: 42px !important;
  padding-bottom: 44px !important;
}

/* compacta encabezado (chip/título/lead) */
body.svc-setup #info-minima .svc-head{
  margin-bottom: 14px !important;
}
body.svc-setup #info-minima .svc-head .svc-title{
  font-size: 36px !important; /* antes 40 */
  line-height: 1.06 !important;
  margin: 10px 0 8px !important;
}
body.svc-setup #info-minima .svc-head .svc-lead{
  margin: 0 !important;
  line-height: 1.35 !important;
  max-width: 72ch;
}

/* compacta el gap entre paneles */
body.svc-setup #info-minima .svc-split{
  gap: 16px !important;  /* antes 14–18 según tengas */
  align-items: stretch !important;
}

/* reduce padding interno de paneles */
body.svc-setup #info-minima .svc-panel{
  padding: 18px 18px !important;
  border-radius: 20px !important;
}

/* reduce espacio entre elementos dentro del panel */
body.svc-setup #info-minima .svc-panel h3{
  margin: 0 0 6px !important;
}
body.svc-setup #info-minima .svc-panel > p{
  margin: 0 0 12px !important;
}

/* -------------------------
   PANEL IZQUIERDO = AZUL (el de antes)
   ------------------------- */

/* OJO: primer panel dentro de .svc-split (izquierdo) */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child{
  background: linear-gradient(135deg, #183b78 0%, #2f5eae 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 22px 70px rgba(18,46,92,.22),
    0 10px 26px rgba(18,46,92,.18),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
}

/* quita el sheen claro del panel azul para que no “ensucie” */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child::after{
  opacity: .55 !important;
  background:
    radial-gradient(520px 240px at 20% 0%, rgba(255,255,255,.14), transparent 62%),
    radial-gradient(520px 240px at 92% 30%, rgba(255,255,255,.10), transparent 62%) !important;
}

/* títulos y texto del panel azul */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child h3{
  color: #fff !important;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child p,
body.svc-setup #info-minima .svc-split > .svc-panel:first-child li,
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .muted{
  color: rgba(255,255,255,.82) !important;
}

/* checklist dentro del panel azul: tarjetas “glass” */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 16px 40px rgba(7,22,48,.18) !important;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check b{
  color: #fff !important;
}

/* íconos/checks (si usas .svc-check con un cuadrito a la izquierda) */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li::marker{
  color: rgba(255,255,255,.75);
}

/* si tienes un “proof” o panel extra dentro del izquierdo */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-minimum-proof{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 48px rgba(7,22,48,.22) !important;
}

/* -------------------------
   PANEL DERECHO: ajusta para armonía
   ------------------------- */

body.svc-setup #info-minima .svc-split > .svc-panel:last-child{
  background: linear-gradient(180deg, rgba(240,246,255,.92), rgba(233,241,255,.86)) !important;
  border: 1px solid rgba(11,31,58,.10) !important;
}

/* compacta los entregables */
body.svc-setup #info-minima .svc-deliver-grid{
  gap: 12px !important;
  margin-top: 10px !important;
}
body.svc-setup #info-minima .svc-deliver-item{
  padding: 12px 12px !important;
  border-radius: 16px !important;
}
body.svc-setup #info-minima .svc-deliver-item p{
  margin-top: 8px !important;
}

/* -------------------------
   CTA final más compacto (si lo tienes)
   ------------------------- */
body.svc-setup #info-minima .svc-minima-cta{
  margin-top: 14px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
}
body.svc-setup #info-minima .svc-minima-cta__copy b{
  font-size: 15px !important;
}
body.svc-setup #info-minima .svc-minima-cta__copy span{
  font-size: 13px !important;
}

/* Responsive: reduce un poco más para pantallas medianas */
@media (max-width: 980px){
  body.svc-setup #info-minima .svc-head .svc-title{
    font-size: 32px !important;
  }
  body.svc-setup #info-minima{
    padding-top: 36px !important;
    padding-bottom: 38px !important;
  }
}
/* ===========================
   SETUP · INFO MÍNIMA (panel izquierdo)
   Más oscuro + más contraste en items
   =========================== */

body.svc-setup #info-minima .svc-split > .svc-panel:first-child{
  /* Fondo oscuro tipo CTA */
  background: linear-gradient(135deg, #0f2b55 0%, #163a6f 55%, #1a3f78 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 22px 60px rgba(10, 25, 55, .28),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Tipografía dentro del panel oscuro */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child h3{
  color: rgba(255,255,255,.94) !important;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child p{
  color: rgba(255,255,255,.78) !important;
}

/* Lista "svc-check" (las 4 tarjetas internas) */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check{
  margin-top: 14px !important;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Texto dentro de cada item */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li b{
  color: rgba(255,255,255,.94) !important;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li{
  color: rgba(255,255,255,.82) !important;
}

/* Si tus checks usan un circulito/ícono (muy común), lo reforzamos sin romper nada */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li::before{
  filter: brightness(1.25);
  opacity: .95;
}

/* Panel "CÓMO LO USAMOS" (si existe dentro del panel izquierdo) */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-how,
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-usage,
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-mini-usage,
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-note{
  background: rgba(0,0,0,.14) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
  color: rgba(255,255,255,.80) !important;
}

/* El CTA interno del panel izquierdo (si todavía lo tienes ahí) */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-mini-cta{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-mini-cta p{
  color: rgba(255,255,255,.86) !important;
}

/* Extra: mejora sutil al hover para dar “volumen” */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}
/* ===========================
   SETUP · INFO MÍNIMA (panel izquierdo)
   Items internos: más blancos (ice), no azul-azul
   =========================== */

/* Mantén el panel grande oscuro (esto NO cambia) */
/* ... (tu regla del panel grande puede quedarse igual) ... */

/* Cards internas (Ventas/Gastos/Caja/Objetivo): blanco con toque azul */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.92)) !important;
  border: 1px solid rgba(92, 140, 220, .28) !important; /* azul MUY sutil */
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),                 /* volumen contra fondo oscuro */
    0 0 0 1px rgba(255,255,255,.55) inset,       /* filo premium */
    0 10px 26px rgba(40, 90, 170, .08) inset !important; /* “tinte” leve */
  border-radius: 16px !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Texto dentro de cada item (para que contraste sobre blanco) */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li{
  color: rgba(11,31,58,.70) !important;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li b{
  color: #0b1f3a !important;
}

/* “Check”/ícono: más legible sobre blanco (sin saber tu estructura exacta) */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li::before{
  filter: none;
  opacity: 1;
}

/* Hover: sube y resalta con azul MUY sutil (sin volverlos azules) */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li:hover{
  transform: translateY(-2px);
  border-color: rgba(92, 140, 220, .42) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.70) inset,
    0 0 0 6px rgba(92, 140, 220, .10) !important; /* halo suave */
}

/* Si el título “Lo mínimo que necesitamos” se ve muy plano, súbele un poquito */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child h3{
  color: rgba(255,255,255,.96) !important;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child p{
  color: rgba(255,255,255,.78) !important;
}
/* ===========================
   SETUP · INFO MÍNIMA (panel izquierdo)
   Rellenar hueco + panel "Cómo lo usamos"
   =========================== */

/* Panel izquierdo como columna para manejar alturas */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Checklist no tan separado */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check{
  margin: 10px 0 0 !important;
}

/* Tus items blancos/ice (lo que ya querías) */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.92)) !important;
  border: 1px solid rgba(92,140,220,.28) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.55) inset,
    0 10px 26px rgba(40,90,170,.08) inset !important;
  border-radius: 16px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li:hover{
  transform: translateY(-2px);
  border-color: rgba(92,140,220,.42) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.70) inset,
    0 0 0 6px rgba(92,140,220,.10) !important;
}

body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li{
  color: rgba(11,31,58,.70) !important;
}
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-check li b{
  color: #0b1f3a !important;
}

/* ---------------------------
   Panel "Cómo lo usamos"
   --------------------------- */

/* Este es el truco para rellenar el hueco: que crezca */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child .svc-howuse{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 14px 14px;
  border-radius: 18px;

  /* blanco/ice con textura sutil */
  background:
    radial-gradient(520px 220px at 15% 0%, rgba(47,94,174,.10), transparent 60%),
    radial-gradient(520px 220px at 90% 20%, rgba(24,59,120,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.86));
  border: 1px solid rgba(92,140,220,.22);
  box-shadow:
    0 18px 48px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.55) inset;
}

/* Header del panel */
body.svc-setup #info-minima .svc-howuse-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.svc-setup #info-minima .svc-howuse-kicker{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,31,58,.70);
}

body.svc-setup #info-minima .svc-howuse-pill{
  font-size: 12px;
  font-weight: 700;
  color: rgba(11,31,58,.62);
  background: rgba(16,123,255,.10);
  border: 1px solid rgba(16,123,255,.16);
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Lista con mejor “presencia” */
body.svc-setup #info-minima .svc-howuse-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

body.svc-setup #info-minima .svc-howuse-list li{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(11,31,58,.08);
  box-shadow: 0 10px 26px rgba(7,22,48,.08);
}

body.svc-setup #info-minima .svc-howuse-list b{
  display: block;
  color: #0b1f3a;
  margin-bottom: 3px;
  font-size: 14px;
}
body.svc-setup #info-minima .svc-howuse-list span{
  display: block;
  color: rgba(11,31,58,.70);
  font-size: 13px;
  line-height: 1.45;
}

/* Mini-métricas para “credibilidad visual” */
body.svc-setup #info-minima .svc-howuse-mini{
  margin-top: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

body.svc-setup #info-minima .svc-howuse-metric{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(11,31,58,.04);
  border: 1px solid rgba(11,31,58,.08);
}

body.svc-setup #info-minima .svc-howuse-metric small{
  display: block;
  color: rgba(11,31,58,.58);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 3px;
}
body.svc-setup #info-minima .svc-howuse-metric strong{
  display: block;
  color: #0b1f3a;
  font-size: 13px;
}

/* Nota final: rellena y cierra elegante */
body.svc-setup #info-minima .svc-howuse-note{
  margin-top: auto; /* empuja la nota hacia abajo y “rellena” el hueco */
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(24,59,120,.08);
  border: 1px solid rgba(24,59,120,.14);
  color: rgba(11,31,58,.72);
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 980px){
  body.svc-setup #info-minima .svc-howuse-mini{
    grid-template-columns: 1fr;
  }
}
/* =========================================
   SETUP · Info mínima — “Cómo lo usamos”
   Compactar 3 items (Validamos / Documentamos / Definimos)
   ========================================= */


body.svc-setup #info-minima .svc-howuse-list{
  /* en vez de una lista larga vertical: grid compacto */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}

/* Si quieres 3 en una fila cuando haya espacio */
@media (min-width: 1100px){
  body.svc-setup #info-minima .svc-howuse-list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
  }
}

body.svc-setup #info-minima .svc-howuse-list li{
  /* mini-card compacta */
  padding: 10px 12px !important;
  border-radius: 14px !important;

  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,251,255,.78)) !important;
  border: 1px solid rgba(92,140,220,.22) !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,255,255,.55) inset !important;
}

/* Título y texto más compactos SOLO en estos items */
body.svc-setup #info-minima .svc-howuse-list li b{
  display: block !important;
  margin: 0 0 4px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  color: #0b1f3a !important;
}

body.svc-setup #info-minima .svc-howuse-list li span{
  display: block !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  color: rgba(11,31,58,.70) !important;
}

/* Si el wrapper está ocupando demasiado alto, reduce el gap general */
body.svc-setup #info-minima .svc-split > .svc-panel:first-child{
  gap: 12px !important;
}

/* Mobile: que vuelvan a 1 columna para legibilidad */
@media (max-width: 720px){
  body.svc-setup #info-minima .svc-howuse-list{
    grid-template-columns: 1fr !important;
  }
}
/* SETUP · Info mínima — “Cómo lo usamos” (compacto pero legible) */
body.svc-setup #info-minima .svc-howuse-list{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

/* El 3er punto ocupa todo el ancho (para que no se vea apretado) */
body.svc-setup #info-minima .svc-howuse-list li:nth-child(3){
  grid-column: 1 / -1;
}

body.svc-setup #info-minima .svc-howuse-list li{
  padding: 14px 14px;
  border-radius: 16px;

  /* blanco con textura, para que contraste en el panel azul */
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);

  box-shadow:
    0 14px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.22);

  color: rgba(255,255,255,.90);
  font-size: 14px;
  line-height: 1.35;
}

body.svc-setup #info-minima .svc-howuse-list li b{
  color: rgba(255,255,255,.98);
  font-weight: 800;
}

/* Mobile: 1 columna para que se lea */
@media (max-width: 720px){
  body.svc-setup #info-minima .svc-howuse-list{
    grid-template-columns: 1fr;
  }
  body.svc-setup #info-minima .svc-howuse-list li:nth-child(3){
    grid-column: auto;
  }
}
/* FIX: “Cómo lo usamos” texto oscuro (solo esta lista) */
body.svc-setup #info-minima .svc-howuse-list li{
  color: rgba(11,31,58,.78) !important;
}

body.svc-setup #info-minima .svc-howuse-list li b{
  color: #0b1f3a !important;
}

/* Por si el panel padre estuviera forzando blanco a todo */
body.svc-setup #info-minima .svc-howuse-list{
  color: rgba(11,31,58,.78) !important;
}
/* FIX DURO: fuerza texto oscuro en "Cómo lo usamos" aunque el panel sea azul */
body.service-page.svc-setup #info-minima ul.svc-howuse-list,
body.service-page.svc-setup #info-minima ul.svc-howuse-list li,
body.service-page.svc-setup #info-minima ul.svc-howuse-list li *{
  color: rgba(11,31,58,.82) !important;
}

/* títulos en negrita aún más oscuros */
body.service-page.svc-setup #info-minima ul.svc-howuse-list li b,
body.service-page.svc-setup #info-minima ul.svc-howuse-list li strong{
  color: #0b1f3a !important;
}
/* FIX REAL: texto oscuro SOLO dentro de .svc-howuse (aunque el panel padre sea azul) */
body.service-page.svc-setup #info-minima .svc-howuse,
body.service-page.svc-setup #info-minima .svc-howuse *{
  color: rgba(11,31,58,.82) !important;
}

body.service-page.svc-setup #info-minima .svc-howuse .svc-howuse-kicker{
  color: rgba(11,31,58,.72) !important;
}

body.service-page.svc-setup #info-minima .svc-howuse .svc-howuse-pill{
  color: rgba(11,31,58,.66) !important;
  background: rgba(16,123,255,.10) !important;
  border: 1px solid rgba(16,123,255,.16) !important;
}

body.service-page.svc-setup #info-minima .svc-howuse .svc-howuse-list li{
  color: rgba(11,31,58,.78) !important;
}

body.service-page.svc-setup #info-minima .svc-howuse .svc-howuse-list li b{
  color: #0b1f3a !important;
}/* FAQ Obj2 — matiz sutil para Setup (sin cambiar estructura) */
body.svc-setup #faq.faqObj2{
  background:
    radial-gradient(980px 540px at 10% 0%, rgba(16,123,255,.10), transparent 60%),
    radial-gradient(900px 520px at 92% 28%, rgba(11,31,58,.06), transparent 58%),
    linear-gradient(180deg, rgba(246,249,252,.92), rgba(255,255,255,.98));
}
body.svc-setup .faqObj2-panelTag{
  color: rgba(16,123,255,.95);
  background: rgba(16,123,255,.08);
  border-color: rgba(16,123,255,.16);
}
/* =========================================================
   EXPANSIÓN — CAPA FINAL DE PULIDO
   Pegar al FINAL de styles.css
   No cambia estructura; solo remata estilo, tipografía y profundidad.
========================================================= */

body.svc-expansion{
  --ex-h1: clamp(44px, 5vw, 70px);
  --ex-h2: clamp(34px, 3.2vw, 48px);
  --ex-h3: 22px;
  --ex-body-lg: 18px;
  --ex-body: 16px;
  --ex-body-sm: 14.5px;
  --ex-kicker: 11px;
  --ex-text: rgba(15,33,57,.74);
  --ex-text-soft: rgba(15,33,57,.58);
  --ex-title: #102848;
}

/* ---------- HERO ---------- */
body.svc-expansion .expHero{
  padding-top: 98px;
  padding-bottom: 30px;
}

body.svc-expansion .expHero__bg{
  background:
    radial-gradient(740px 430px at 10% 12%, rgba(132,172,255,.24), transparent 62%),
    radial-gradient(540px 360px at 90% 16%, rgba(255,255,255,.10), transparent 68%),
    linear-gradient(135deg, #102848 0%, #163a73 54%, #2557ab 100%) !important;
  box-shadow: 0 28px 90px rgba(11,31,58,.18);
}

body.svc-expansion .svc-eyebrow{
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  font-size: var(--ex-kicker);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .expHero__title{
  margin: 18px 0 14px;
  font-size: var(--ex-h1);
  line-height: .96;
  letter-spacing: -1.6px;
  font-weight: 800;
  color: #fff;
  max-width: 800px;
}

body.svc-expansion .expHero__lead{
  max-width: 760px;
  font-size: var(--ex-body-lg);
  line-height: 1.58;
  font-weight: 500;
  color: rgba(255,255,255,.80);
}

body.svc-expansion .expHero__points{
  margin-top: 24px;
  gap: 14px;
}

body.svc-expansion .expPoint{
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(8,22,44,.10);
}

body.svc-expansion .expPoint__icon{
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}

body.svc-expansion .expPoint__text b{
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

body.svc-expansion .expPoint__text span{
  font-size: 14.2px;
  line-height: 1.55;
  color: rgba(255,255,255,.74);
}

body.svc-expansion .expHero__actions{
  margin-top: 24px;
}

body.svc-expansion .expHero__actions .btn-primary{
  background: #fff;
  color: #102848;
}

body.svc-expansion .expHero__actions .btn-secondary{
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}

body.svc-expansion .expHero__chips{
  margin-top: 20px;
  gap: 10px;
}

body.svc-expansion .expHero__chips span{
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  font-weight: 700;
}

body.svc-expansion .expPanel{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  box-shadow:
    0 28px 70px rgba(8,22,44,.24),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-expansion .expPanel__title{
  font-size: 28px;
  line-height: 1.06;
  color: #fff;
  font-weight: 800;
}

body.svc-expansion .expMetric{
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

body.svc-expansion .expMetric__value{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}

body.svc-expansion .expMetric__copy b{
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

body.svc-expansion .expMetric__copy span{
  color: rgba(255,255,255,.72);
  font-size: 13.4px;
}

body.svc-expansion .expMiniItem,
body.svc-expansion .expHero__panelNote{
  box-shadow: 0 18px 40px rgba(8,22,44,.14);
}

/* ---------- TITULOS Y ESCALA ---------- */
body.svc-expansion .svc-kicker,
body.svc-expansion .faqObj2-kicker,
body.svc-expansion .eyebrow{
  font-size: var(--ex-kicker);
  letter-spacing: .16em;
  font-weight: 900;
  text-transform: uppercase;
  color: #2d5eb9;
}

body.svc-expansion .svc-title,
body.svc-expansion .faqObj2-title,
body.svc-expansion .hc-contact h2{
  margin: 16px 0 10px;
  font-size: var(--ex-h2);
  line-height: 1.04;
  letter-spacing: -1px;
  font-weight: 800;
  color: var(--ex-title);
  max-width: 900px;
}

body.svc-expansion .svc-title::after,
body.svc-expansion .faqObj2-title::after,
body.svc-expansion .hc-contact h2::after{
  content:"";
  display:block;
  width: 74px;
  height: 4px;
  border-radius: 999px;
  margin-top: 16px;
  background: linear-gradient(90deg, #2d5eb9, rgba(213,229,255,.95));
  box-shadow: 0 8px 20px rgba(45,94,185,.14);
}

body.svc-expansion .svc-lead,
body.svc-expansion .faqObj2-sub,
body.svc-expansion .lead{
  font-size: var(--ex-body);
  line-height: 1.65;
  font-weight: 500;
  color: var(--ex-text);
  max-width: 780px;
}

/* ---------- TEXTURA Y PROFUNDIDAD GLOBAL ---------- */
body.svc-expansion #que-decides .svc-decision,
body.svc-expansion .svc-panel,
body.svc-expansion .faqObj2-topic,
body.svc-expansion .faqObj2-panel,
body.svc-expansion .hc-mini-card{
  box-shadow:
    0 18px 46px rgba(11,31,58,.08),
    0 2px 12px rgba(11,31,58,.03),
    inset 0 1px 0 rgba(255,255,255,.92);
}

body.svc-expansion #que-decides .svc-decision:hover,
body.svc-expansion .svc-panel:hover,
body.svc-expansion .faqObj2-topic:hover{
  transform: translateY(-3px);
  box-shadow:
    0 24px 60px rgba(11,31,58,.10),
    0 4px 14px rgba(11,31,58,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

body.svc-expansion #que-decides .svc-decision,
body.svc-expansion .svc-panel,
body.svc-expansion .faqObj2-topic{
  transition: transform .18s ease, box-shadow .18s ease;
}

/* ---------- QUE DECIDES ---------- */
body.svc-expansion #que-decides .svc-decision h3{
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
}

body.svc-expansion #que-decides .svc-decision p{
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ex-text);
}

body.svc-expansion #que-decides .svc-microband{
  border-radius: 18px;
  border: 1px solid rgba(29,78,216,.14);
  background:
    linear-gradient(90deg, rgba(29,78,216,.08), rgba(255,255,255,0) 55%),
    rgba(255,255,255,.86);
  box-shadow: 0 16px 50px rgba(11,31,58,.10);
}

/* ---------- INCLUYE ---------- */
body.svc-expansion #incluye{
  background:
    radial-gradient(860px 480px at 78% 0%, rgba(45,94,185,.10), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,255,.96));
}

body.svc-expansion #incluye .incH-pitch{
  box-shadow:
    0 24px 70px rgba(11,31,58,.10),
    inset 0 1px 0 rgba(255,255,255,.92);
}

body.svc-expansion #incluye .incH-pitchCopy h3{
  font-size: 30px;
  line-height: 1.08;
  font-weight: 800;
  color: #102848;
}

body.svc-expansion #incluye .incH-pitchCopy p{
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ex-text);
}

body.svc-expansion #incluye .incH-proofItem{
  box-shadow: 0 12px 28px rgba(11,31,58,.06);
}

body.svc-expansion #incluye .incH-note{
  box-shadow: 0 18px 40px rgba(16,40,72,.16);
}

body.svc-expansion #incluye .incH-modTop h3{
  font-size: 18px;
  line-height: 1.12;
  font-weight: 800;
}

body.svc-expansion #incluye .incH-mod p{
  font-size: 14.5px;
  line-height: 1.6;
}

body.svc-expansion #incluye .incH-impactItem{
  box-shadow: 0 14px 34px rgba(11,31,58,.06);
}

/* ---------- ENTREGABLES / PROCESO / CAMBIO ---------- */
body.svc-expansion #entregables .svc-panel h3,
body.svc-expansion #proceso .svc-step b,
body.svc-expansion #lo-que-cambia .route-card h3{
  font-weight: 800;
}

body.svc-expansion #entregables .svc-panel p,
body.svc-expansion #entregables .svc-list li,
body.svc-expansion #proceso .svc-step p,
body.svc-expansion #lo-que-cambia .route-card__text,
body.svc-expansion #lo-que-cambia .route-card__footer span{
  font-size: 14.5px;
  line-height: 1.58;
}

body.svc-expansion #proceso .svc-cta{
  box-shadow:
    0 24px 60px rgba(16,40,72,.20),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---------- INFO MINIMA ---------- */
body.svc-expansion #info-minima{
  background:
    radial-gradient(960px 420px at 16% 10%, rgba(45,94,185,.10), transparent 58%),
    linear-gradient(180deg, #ffffff, #f7fafe);
}

body.svc-expansion .svc-panel h3{
  font-size: 22px;
  line-height: 1.08;
  font-weight: 800;
}

body.svc-expansion .svc-list li,
body.svc-expansion .exp-steps-mini li{
  font-size: 14.5px;
  line-height: 1.55;
}

body.svc-expansion .svc-mini-cta{
  box-shadow: 0 18px 40px rgba(16,40,72,.16);
}

/* ---------- FAQ ---------- */
body.svc-expansion .faqObj2{
  background:
    radial-gradient(860px 420px at 10% 0%, rgba(45,94,185,.08), transparent 58%),
    linear-gradient(180deg, #f6fafe, #eff5fc);
}

body.svc-expansion .faqObj2-panelTitle,
body.svc-expansion .faqObj2-rightTitle{
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}

body.svc-expansion .faqObj2-body{
  font-size: 14.8px;
  line-height: 1.72;
}

/* ---------- CONTACTO ---------- */
body.svc-expansion .hc-contact{
  background:
    radial-gradient(860px 420px at 8% 0%, rgba(45,94,185,.10), transparent 60%),
    linear-gradient(180deg, #f7fafe, #f1f6fc);
}

body.svc-expansion .hc-mini-title{
  font-size: 14px;
  font-weight: 800;
  color: #102848;
}

body.svc-expansion .hc-mini-text{
  font-size: 13.8px;
  line-height: 1.5;
  color: var(--ex-text);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  body.svc-expansion{
    --ex-h1: 48px;
    --ex-h2: 38px;
    --ex-body-lg: 17px;
    --ex-body: 15.5px;
  }
}

@media (max-width: 640px){
  body.svc-expansion{
    --ex-h1: 40px;
    --ex-h2: 32px;
    --ex-body-lg: 16px;
    --ex-body: 15px;
  }

  body.svc-expansion .expHero{
    padding-top: 84px;
    padding-bottom: 18px;
  }

  body.svc-expansion .expHero__title{
    letter-spacing: -1px;
  }
}
/* =========================================================
   EXPANSIÓN — OVERRIDE FINAL
   Hero mejor acomodado + contraste + textura + uniformidad
========================================================= */

body.svc-expansion{
  --ex-h1: clamp(40px, 4.4vw, 68px);
  --ex-h2: clamp(34px, 3vw, 48px);
  --ex-h3: 22px;
  --ex-body-lg: 18px;
  --ex-body: 16px;
  --ex-body-sm: 14.5px;
  --ex-kicker: 11px;
  --ex-text: rgba(15,33,57,.74);
  --ex-text-soft: rgba(15,33,57,.58);
  --ex-title: #102848;
}

/* ---------- escala tipográfica uniforme ---------- */
body.svc-expansion .svc-title,
body.svc-expansion .faqObj2-title,
body.svc-expansion .hc-contact h2{
  font-size: var(--ex-h2) !important;
  line-height: 1.04 !important;
  letter-spacing: -1px !important;
  font-weight: 800 !important;
  color: var(--ex-title) !important;
}

body.svc-expansion .svc-lead,
body.svc-expansion .faqObj2-sub,
body.svc-expansion .lead{
  font-size: var(--ex-body) !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
  color: var(--ex-text) !important;
}

body.svc-expansion .svc-kicker,
body.svc-expansion .faqObj2-kicker,
body.svc-expansion .eyebrow{
  font-size: var(--ex-kicker) !important;
  letter-spacing: .16em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

/* ---------- HERO: altura, alineación y contraste ---------- */
body.svc-expansion .expHero{
  position: relative;
  overflow: hidden;
  padding-top: 88px !important;
  padding-bottom: 20px !important;
}

body.svc-expansion .expHero__bg{
  background:
    radial-gradient(760px 430px at 8% 8%, rgba(120,170,255,.28), transparent 60%),
    radial-gradient(540px 360px at 88% 12%, rgba(255,255,255,.09), transparent 68%),
    linear-gradient(135deg, #0f2744 0%, #14396e 54%, #2255a8 100%) !important;
  box-shadow: 0 28px 90px rgba(11,31,58,.18);
}

body.svc-expansion .expHero__mesh{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.15));
}

body.svc-expansion .expHero__orbs{
  position:absolute;
  inset:0;
  pointer-events:none;
}

body.svc-expansion .expHero__orb{
  position:absolute;
  border-radius:999px;
  filter: blur(30px);
  opacity:.9;
}

body.svc-expansion .expHero__orb--a{
  width: 300px;
  height: 300px;
  left: -80px;
  top: -80px;
  background: radial-gradient(circle, rgba(141,180,255,.34), rgba(141,180,255,0) 70%);
}

body.svc-expansion .expHero__orb--b{
  width: 360px;
  height: 360px;
  right: -120px;
  bottom: -140px;
  background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 72%);
}

body.svc-expansion .expHero .container{
  position: relative;
  z-index: 2;
}

body.svc-expansion .expHero__grid{
  display: grid !important;
  grid-template-columns: 1.08fr .92fr !important;
  gap: 22px !important;
  align-items: stretch !important;
  min-height: calc(100svh - 118px);
  padding-block: 18px 8px;
}

body.svc-expansion .expHero__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width: 0;
}

body.svc-expansion .svc-eyebrow{
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
}

body.svc-expansion .expHero__title{
  margin: 16px 0 12px !important;
  font-size: var(--ex-h1) !important;
  line-height: .95 !important;
  letter-spacing: -1.5px !important;
  font-weight: 800 !important;
  color: #fff !important;
  max-width: 760px !important;
}

body.svc-expansion .expHero__lead{
  max-width: 720px !important;
  font-size: 17px !important;
  line-height: 1.54 !important;
  color: rgba(255,255,255,.80) !important;
}

body.svc-expansion .expHero__points{
  margin-top: 18px !important;
  display:grid;
  gap: 10px !important;
}

body.svc-expansion .expPoint{
  display:grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items:start;
  padding: 12px 13px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 14px 34px rgba(8,22,44,.10);
}

body.svc-expansion .expPoint__icon{
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
}

body.svc-expansion .expPoint__text b{
  font-size: 14.2px !important;
  color: #fff !important;
  font-weight: 800 !important;
}

body.svc-expansion .expPoint__text span{
  font-size: 13.2px !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,.74) !important;
}

body.svc-expansion .svc-chips{
  margin-top: 16px !important;
  gap: 8px !important;
}

body.svc-expansion .svc-chip{
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.80);
  font-size: 12px;
  font-weight: 700;
}

body.svc-expansion .svc-actions{
  margin-top: 18px !important;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.svc-expansion .svc-actions .btn-primary{
  background: #fff;
  color: #102848;
}

body.svc-expansion .svc-actions .btn-secondary{
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}

body.svc-expansion .expHero__note{
  margin-top: 12px !important;
  color: rgba(255,255,255,.66) !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}

/* ---------- PANEL DERECHO: más completo y con mejor contraste ---------- */
body.svc-expansion .expHero__panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 12px;
  min-width: 0;
}

body.svc-expansion .expBrief{
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,248,254,.96)) !important;
  box-shadow:
    0 28px 70px rgba(8,22,44,.22),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 18px !important;
  color: #102848 !important;
}

body.svc-expansion .expBrief__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
}

body.svc-expansion .expBrief__title{
  color: #102848 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

body.svc-expansion .expBrief__sub{
  margin-top: 4px;
  color: rgba(15,33,57,.62);
  font-size: 12.6px;
  line-height: 1.35;
  font-weight: 600;
}

body.svc-expansion .expBrief__tag{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(45,94,185,.08);
  border: 1px solid rgba(45,94,185,.16);
  color: #2d5eb9;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

body.svc-expansion .expBrief__body{
  display:grid;
  gap: 14px;
}

body.svc-expansion .expBrief__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.svc-expansion .expBrief__metric{
  border-radius: 16px;
  border: 1px solid rgba(15,33,57,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,250,255,.96));
  padding: 12px;
  box-shadow: 0 10px 24px rgba(11,31,58,.05);
}

body.svc-expansion .expBrief__k{
  display:block;
  color: rgba(15,33,57,.56);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

body.svc-expansion .expBrief__v{
  display:block;
  color: #102848;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.4px;
}

body.svc-expansion .expBrief__metric small{
  display:block;
  margin-top: 4px;
  color: rgba(15,33,57,.60);
  font-size: 12px;
  line-height: 1.35;
}

body.svc-expansion .expDivider{
  height: 1px;
  background: linear-gradient(90deg, rgba(15,33,57,.08), rgba(15,33,57,.16), rgba(15,33,57,.08)) !important;
}

body.svc-expansion .expMeterTop span{
  color: #102848 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

body.svc-expansion .expMeterTop small{
  color: rgba(15,33,57,.54) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

body.svc-expansion .expMeter{
  height: 9px !important;
  background: rgba(15,33,57,.08) !important;
}

body.svc-expansion .expMeter span{
  background: linear-gradient(90deg, #4f86e4, #9ec0ff) !important;
}

body.svc-expansion .expBrief__proforma{
  border-radius: 18px;
  border: 1px solid rgba(15,33,57,.08);
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(45,94,185,.10), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,248,255,.96));
  padding: 14px;
  box-shadow: 0 12px 28px rgba(11,31,58,.05);
}

body.svc-expansion .expBrief__proformaHead span{
  display:inline-flex;
  align-items:center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(45,94,185,.08);
  border: 1px solid rgba(45,94,185,.16);
  color: #2d5eb9;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

body.svc-expansion .expBrief__list{
  list-style:none;
  padding:0;
  margin: 12px 0 0;
  display:grid;
  gap: 8px;
}

body.svc-expansion .expBrief__list li{
  position: relative;
  padding-left: 18px;
  font-size: 13.2px;
  line-height: 1.45;
  color: rgba(15,33,57,.76);
}

body.svc-expansion .expBrief__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2d5eb9;
  box-shadow: 0 0 0 4px rgba(45,94,185,.10);
}

body.svc-expansion .expHero__panelNote{
  border-radius: 16px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  padding: 12px 14px !important;
  box-shadow: 0 18px 40px rgba(8,22,44,.14);
}

/* ---------- profundidad y textura en toda la página ---------- */
body.svc-expansion #que-decides,
body.svc-expansion #incluye,
body.svc-expansion #entregables.soft,
body.svc-expansion #info-minima,
body.svc-expansion .faqObj2,
body.svc-expansion .hc-contact{
  position: relative;
  overflow: hidden;
}

body.svc-expansion #que-decides::before,
body.svc-expansion #incluye::before,
body.svc-expansion #entregables.soft::before,
body.svc-expansion #info-minima::before,
body.svc-expansion .faqObj2::before,
body.svc-expansion .hc-contact::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background-image:
    linear-gradient(rgba(255,255,255,.75) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.75) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0));
}

body.svc-expansion #que-decides .svc-decision,
body.svc-expansion .svc-panel,
body.svc-expansion .incH-mod,
body.svc-expansion .incH-impactItem,
body.svc-expansion .faqObj2-topic,
body.svc-expansion .faqObj2-panel,
body.svc-expansion .hc-mini-card{
  box-shadow:
    0 18px 46px rgba(11,31,58,.08),
    0 2px 12px rgba(11,31,58,.03),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body.svc-expansion #que-decides .svc-decision:hover,
body.svc-expansion .svc-panel:hover,
body.svc-expansion .incH-mod:hover,
body.svc-expansion .faqObj2-topic:hover{
  transform: translateY(-3px);
  box-shadow:
    0 24px 60px rgba(11,31,58,.10),
    0 4px 14px rgba(11,31,58,.04),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body.svc-expansion #que-decides .svc-decision,
body.svc-expansion .svc-panel,
body.svc-expansion .incH-mod,
body.svc-expansion .faqObj2-topic{
  transition: transform .18s ease, box-shadow .18s ease;
}

/* dar más presencia a bloques clave */
body.svc-expansion #que-decides .svc-decision--featured,
body.svc-expansion .svc-mini-cta,
body.svc-expansion #proceso .svc-cta,
body.svc-expansion .incH-note{
  position: relative;
  overflow: hidden;
}

body.svc-expansion #que-decides .svc-decision--featured::after,
body.svc-expansion .svc-mini-cta::after,
body.svc-expansion #proceso .svc-cta::after,
body.svc-expansion .incH-note::after{
  content:"";
  position:absolute;
  width: 240px;
  height: 240px;
  right: -80px;
  top: -80px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
  pointer-events:none;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px){
  body.svc-expansion .expHero__grid{
    min-height: auto;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-block: 20px 6px;
  }

  body.svc-expansion .expBrief__grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px){
  body.svc-expansion{
    --ex-h1: 36px;
    --ex-h2: 30px;
    --ex-body-lg: 15.5px;
    --ex-body: 14.8px;
    --ex-body-sm: 13.6px;
  }

  body.svc-expansion .expHero{
    padding-top: 82px !important;
    padding-bottom: 16px !important;
  }

  body.svc-expansion .expHero__title{
    letter-spacing: -1px !important;
  }

  body.svc-expansion .expBrief__grid{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expPoint{
    grid-template-columns: 42px 1fr;
  }

  body.svc-expansion .expPoint__icon{
    width: 42px !important;
    height: 42px !important;
  }
}
/* =========================================================
   SETUP — CAPA DE UNIFORMIDAD TIPOGRÁFICA Y FORMATO
   Pegar al FINAL de styles.css
========================================================= */

body.svc-setup{
  --st-h1: clamp(44px, 5vw, 72px);
  --st-h2: clamp(34px, 3.1vw, 48px);
  --st-h3: 22px;
  --st-h4: 18px;

  --st-kicker: 11px;
  --st-chip: 12px;
  --st-meta: 13px;
  --st-body-lg: 18px;
  --st-body: 16px;
  --st-body-sm: 14.5px;
  --st-caption: 12.5px;

  --st-title: #102848;
  --st-text: rgba(15,33,57,.74);
  --st-text-soft: rgba(15,33,57,.58);
}

/* =========================
   Base tipográfica general
========================= */
body.svc-setup h1,
body.svc-setup h2,
body.svc-setup h3,
body.svc-setup h4,
body.svc-setup h5,
body.svc-setup h6,
body.svc-setup p,
body.svc-setup li,
body.svc-setup span,
body.svc-setup strong,
body.svc-setup b,
body.svc-setup small,
body.svc-setup label,
body.svc-setup input,
body.svc-setup textarea,
body.svc-setup select,
body.svc-setup button,
body.svc-setup a{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =========================
   Hero
========================= */
body.svc-setup .svc-hero--setup .svc-kicker{
  font-size: var(--st-kicker);
  line-height: 1;
  letter-spacing: .16em;
  font-weight: 900;
  text-transform: uppercase;
}

body.svc-setup .svc-hero--setup .svc-title{
  font-size: var(--st-h1);
  line-height: .96;
  letter-spacing: -1.5px;
  font-weight: 800;
  color: var(--st-title);
  max-width: 720px;
  margin-top: 16px;
}

body.svc-setup .svc-hero--setup .svc-lead{
  font-size: var(--st-body-lg);
  line-height: 1.56;
  font-weight: 500;
  color: var(--st-text);
  max-width: 700px;
  margin-top: 14px;
}

/* keyout left */
body.svc-setup .svc-keyout{
  margin-top: 22px;
}

body.svc-setup .ko-txt b{
  display:block;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}

body.svc-setup .ko-txt span{
  display:block;
  font-size: var(--st-body-sm);
  line-height: 1.48;
  font-weight: 500;
}

/* chips + acciones */
body.svc-setup .svc-chip{
  font-size: var(--st-chip);
  line-height: 1.2;
  font-weight: 700;
}

body.svc-setup .svc-chip b{
  font-weight: 800;
}

body.svc-setup .svc-actions .btn,
body.svc-setup .btn{
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}

/* visual derecha */
body.svc-setup .svc-badge{
  font-size: 11px;
  line-height: 1;
  letter-spacing: .12em;
  font-weight: 800;
  text-transform: uppercase;
}

body.svc-setup .sheet-title{
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
}

body.svc-setup .sheet-pill{
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
}

body.svc-setup .sheet-tab,
body.svc-setup .sheet-fx,
body.svc-setup .sheet-cell{
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

body.svc-setup .sheet-kpi .k{
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

body.svc-setup .sheet-kpi .v{
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.4px;
  font-weight: 800;
}

body.svc-setup .sheet-kpi .s{
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
}

body.svc-setup .sheet-panel h5{
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.svc-setup .sheet-file-title{
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}

body.svc-setup .sheet-file-sub{
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
}

/* =========================
   Títulos de sección
========================= */
body.svc-setup .svc-head .svc-title,
body.svc-setup #que-decides .svc-title,
body.svc-setup #proceso .svc-title,
body.svc-setup #info-minima .svc-title,
body.svc-setup .route-shift__title,
body.svc-setup .faqObj2-title,
body.svc-setup .hc-contact h2{
  font-size: var(--st-h2) !important;
  line-height: 1.04 !important;
  letter-spacing: -1px !important;
  font-weight: 800 !important;
  color: var(--st-title) !important;
  max-width: 860px;
}

body.svc-setup .svc-head .svc-lead,
body.svc-setup #que-decides .svc-lead,
body.svc-setup #proceso .svc-lead,
body.svc-setup #info-minima .svc-lead,
body.svc-setup .route-shift__lead,
body.svc-setup .faqObj2-sub,
body.svc-setup .hc-contact .lead{
  font-size: var(--st-body);
  line-height: 1.65;
  font-weight: 500;
  color: var(--st-text);
  max-width: 780px;
}

body.svc-setup .svc-head .svc-kicker,
body.svc-setup .route-shift__eyebrow,
body.svc-setup .faqObj2-kicker,
body.svc-setup .hc-contact .eyebrow{
  font-size: var(--st-kicker);
  line-height: 1;
  letter-spacing: .16em;
  font-weight: 900;
  text-transform: uppercase;
}

/* =========================
   Qué decides
========================= */
body.svc-setup #que-decides .svc-decision h3{
  font-size: var(--st-h4);
  line-height: 1.14;
  letter-spacing: -.2px;
  font-weight: 800;
}

body.svc-setup #que-decides .svc-decision p{
  font-size: var(--st-body-sm);
  line-height: 1.6;
  font-weight: 500;
  color: var(--st-text);
}

body.svc-setup #que-decides .svc-decision li{
  font-size: var(--st-body-sm);
  line-height: 1.55;
  font-weight: 500;
}

body.svc-setup #que-decides .svc-microband,
body.svc-setup #que-decides .svc-microband span,
body.svc-setup #que-decides .svc-microband b{
  font-size: 14px;
  line-height: 1.45;
}

body.svc-setup #que-decides .svc-microband b{
  font-weight: 800;
}

/* =========================
   Entregables / panels
========================= */
body.svc-setup .svc-panel h3{
  font-size: var(--st-h3);
  line-height: 1.1;
  letter-spacing: -.3px;
  font-weight: 800;
  color: var(--st-title);
}

body.svc-setup .svc-panel p,
body.svc-setup .svc-panel .muted{
  font-size: var(--st-body-sm);
  line-height: 1.62;
  font-weight: 500;
  color: var(--st-text);
}

body.svc-setup .svc-list li,
body.svc-setup .svc-check li{
  font-size: var(--st-body-sm);
  line-height: 1.55;
  font-weight: 500;
}

body.svc-setup .svc-howuse-kicker{
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: .14em;
  font-weight: 900;
  text-transform: uppercase;
}

body.svc-setup .svc-howuse-pill{
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

body.svc-setup .svc-howuse-list li{
  font-size: 13.8px;
  line-height: 1.55;
  font-weight: 500;
}

/* mocks entregables */
body.svc-setup .svc-deliver-tag{
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
}

body.svc-setup .svc-deliver-meta{
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

body.svc-setup .svc-deliver-desc{
  font-size: 13.6px;
  line-height: 1.52;
  font-weight: 500;
  color: var(--st-text);
}

body.svc-setup .hc-mock-title{
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
}

body.svc-setup .hc-mock-badge{
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
}

body.svc-setup .hc-kpi small,
body.svc-setup .hc-pdf2-label,
body.svc-setup .hc-pdf2-kpi .k,
body.svc-setup .t-h,
body.svc-setup .t-r .c,
body.svc-setup .t-r .c2{
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

body.svc-setup .hc-kpi b{
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.4px;
}

body.svc-setup .hc-kpi span,
body.svc-setup .hc-pdf2-kpi .v,
body.svc-setup .hc-pdf2-alert span,
body.svc-setup .hc-pdf2-callout-sub,
body.svc-setup .hc-pdf2-step .txt,
body.svc-setup .t-r span{
  font-size: 12.4px;
  line-height: 1.35;
  font-weight: 500;
}

body.svc-setup .hc-pdf2-callout-title{
  font-size: 15px;
  line-height: 1.15;
  font-weight: 800;
}

body.svc-setup .hc-pdf2-step .tag{
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
}

/* =========================
   Proceso
========================= */
body.svc-setup .svc-step .n{
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
}

body.svc-setup .svc-step b{
  display:block;
  font-size: 17px;
  line-height: 1.22;
  letter-spacing: -.2px;
  font-weight: 800;
}

body.svc-setup .svc-step span{
  display:block;
  margin-top: 8px;
  font-size: var(--st-body-sm);
  line-height: 1.58;
  font-weight: 500;
  color: var(--st-text);
}

/* =========================
   Lo que cambia
========================= */
body.svc-setup .route-shift__track-step span:last-child{
  font-size: 12px;
  line-height: 1;
  letter-spacing: .16em;
  font-weight: 800;
}

body.svc-setup .route-card h3{
  font-size: var(--st-h3);
  line-height: 1.08;
  letter-spacing: -.3px;
  font-weight: 800;
}

body.svc-setup .route-card__text{
  font-size: var(--st-body);
  line-height: 1.52;
  font-weight: 500;
}

body.svc-setup .route-card__list li{
  font-size: var(--st-body-sm);
  line-height: 1.55;
  font-weight: 500;
}

body.svc-setup .route-card__footer strong{
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}

body.svc-setup .route-card__footer span{
  font-size: var(--st-body-sm);
  line-height: 1.5;
  font-weight: 500;
}

body.svc-setup .route-shift__bar-copy p{
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
}

body.svc-setup .route-shift__bar-copy span{
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

/* =========================
   FAQ
========================= */
body.svc-setup .faqObj2-panelKicker,
body.svc-setup .faqObj2-rightKicker{
  font-size: 11px;
  line-height: 1;
  letter-spacing: .14em;
  font-weight: 900;
  text-transform: uppercase;
}

body.svc-setup .faqObj2-panelTitle,
body.svc-setup .faqObj2-rightTitle{
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.2px;
  font-weight: 800;
}

body.svc-setup .faqObj2-panelTag,
body.svc-setup .faqObj2-pill,
body.svc-setup .faqObj2-topicCount{
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
}

body.svc-setup .faqObj2-key summary,
body.svc-setup .faqObj2-q summary,
body.svc-setup .faqObj2-topicTitle{
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 700;
}

body.svc-setup .faqObj2-body{
  font-size: var(--st-body-sm);
  line-height: 1.68;
  font-weight: 500;
  color: var(--st-text);
}

body.svc-setup .faqObj2-panelCta b{
  display:block;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}

body.svc-setup .faqObj2-panelCta span{
  display:block;
  margin-top: 4px;
  font-size: 13.4px;
  line-height: 1.45;
  font-weight: 500;
}

body.svc-setup .faqObj2-rightHint{
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
}

/* =========================
   Contacto
========================= */
body.svc-setup .hc-contact .lead{
  margin-top: 10px;
}

body.svc-setup .hc-mini-title{
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--st-title);
}

body.svc-setup .hc-mini-text{
  font-size: 13.6px;
  line-height: 1.48;
  font-weight: 500;
  color: var(--st-text);
}

body.svc-setup .hc-btn,
body.svc-setup .hc-submit{
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}

body.svc-setup .hc-small,
body.svc-setup .hc-small a,
body.svc-setup .hc-form-note{
  font-size: 12.8px;
  line-height: 1.4;
  font-weight: 500;
}

body.svc-setup .hc-form-head h3{
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.3px;
  font-weight: 800;
  color: var(--st-title);
}

body.svc-setup .hc-form-head p{
  font-size: var(--st-body-sm);
  line-height: 1.55;
  font-weight: 500;
}

body.svc-setup .hc-field label{
  font-size: 11px;
  line-height: 1;
  letter-spacing: .14em;
  font-weight: 800;
  text-transform: uppercase;
}

body.svc-setup .hc-field input,
body.svc-setup .hc-field textarea,
body.svc-setup .hc-field select{
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}

/* =========================
   Footer
========================= */
body.svc-setup .footer-logo{
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}

body.svc-setup .footer-logo span{
  font-weight: 700;
}

body.svc-setup .footer-tagline{
  font-size: 13.8px;
  line-height: 1.55;
  font-weight: 500;
}

body.svc-setup .footer-col h4,
body.svc-setup .footer-mini-title{
  font-size: 12px;
  line-height: 1;
  letter-spacing: .14em;
  font-weight: 900;
  text-transform: uppercase;
}

body.svc-setup .footer-col a,
body.svc-setup .footer-mini,
body.svc-setup .footer-copy,
body.svc-setup .footer-legal p{
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

/* =========================
   Espaciados de jerarquía
========================= */
body.svc-setup .svc-head{
  max-width: 860px;
}

body.svc-setup .svc-head .svc-kicker,
body.svc-setup .route-shift__eyebrow,
body.svc-setup .faqObj2-kicker,
body.svc-setup .hc-contact .eyebrow{
  margin-bottom: 12px;
}

body.svc-setup .svc-head .svc-title,
body.svc-setup .route-shift__title,
body.svc-setup .faqObj2-title,
body.svc-setup .hc-contact h2{
  margin-bottom: 10px;
}

body.svc-setup .svc-head .svc-lead,
body.svc-setup .route-shift__lead,
body.svc-setup .faqObj2-sub,
body.svc-setup .hc-contact .lead{
  margin-bottom: 0;
}

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  body.svc-setup{
    --st-h1: 48px;
    --st-h2: 38px;
    --st-h3: 20px;
    --st-h4: 17px;
    --st-body-lg: 17px;
    --st-body: 15.5px;
    --st-body-sm: 14px;
  }

  body.svc-setup .sheet-kpi .v{
    font-size: 22px;
  }

  body.svc-setup .hc-form-head h3{
    font-size: 20px;
  }
}

@media (max-width: 640px){
  body.svc-setup{
    --st-h1: 40px;
    --st-h2: 32px;
    --st-h3: 19px;
    --st-h4: 16px;
    --st-body-lg: 16px;
    --st-body: 15px;
    --st-body-sm: 13.8px;
    --st-meta: 12.5px;
  }

  body.svc-setup .svc-hero--setup .svc-title{
    letter-spacing: -1px;
  }

  body.svc-setup .sheet-kpi .v{
    font-size: 20px;
  }

  body.svc-setup .faqObj2-panelTitle,
  body.svc-setup .faqObj2-rightTitle{
    font-size: 17px;
  }

  body.svc-setup .hc-form-head h3{
    font-size: 19px;
  }
}
/* =========================================================
   EXPANSIÓN — HERO FIX REAL
   Más presencia + más contraste + que quepa mejor en pantalla
   SIN tocar tamaños de tipografía
========================================================= */

body.svc-expansion .expHero{
  position: relative;
  padding-top: 72px !important;
  padding-bottom: 10px !important;
  overflow: hidden;
}

body.svc-expansion .expHero__bg{
  background:
    radial-gradient(820px 460px at 10% 10%, rgba(132,172,255,.28), transparent 60%),
    radial-gradient(560px 360px at 90% 14%, rgba(255,255,255,.10), transparent 68%),
    linear-gradient(135deg, #0f2744 0%, #163a73 54%, #2457aa 100%) !important;
  box-shadow: 0 30px 90px rgba(11,31,58,.22) !important;
}

body.svc-expansion .expHero__mesh{
  opacity: .10 !important;
}

body.svc-expansion .expHero__grid{
  display: grid !important;
  grid-template-columns: 1.08fr .92fr !important;
  gap: 18px !important;
  align-items: center !important;
  min-height: calc(100svh - 92px) !important;
  padding-block: 6px 0 !important;
}

body.svc-expansion .expHero__copy{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

body.svc-expansion .svc-eyebrow{
  margin-bottom: 0 !important;
}

body.svc-expansion .expHero__title{
  margin: 12px 0 8px !important;
  max-width: 760px !important;
}

body.svc-expansion .expHero__lead{
  margin: 0 !important;
  max-width: 720px !important;
  color: rgba(255,255,255,.84) !important;
}

body.svc-expansion .expHero__points{
  margin-top: 12px !important;
  gap: 8px !important;
}

body.svc-expansion .expPoint{
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.11) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 14px 34px rgba(8,22,44,.16) !important;
}

body.svc-expansion .expPoint__icon{
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}

body.svc-expansion .expPoint__icon svg{
  width: 17px !important;
  height: 17px !important;
}

body.svc-expansion .expPoint__text b{
  color: #fff !important;
}

body.svc-expansion .expPoint__text span{
  color: rgba(255,255,255,.76) !important;
}

body.svc-expansion .svc-chips{
  margin-top: 12px !important;
  gap: 7px !important;
}

body.svc-expansion .svc-chip{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.82) !important;
  box-shadow: none !important;
}

body.svc-expansion .svc-actions{
  margin-top: 12px !important;
  gap: 10px !important;
}

body.svc-expansion .expHero__note{
  margin-top: 10px !important;
  color: rgba(255,255,255,.68) !important;
}

body.svc-expansion .expHero__panel{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.svc-expansion .expBrief{
  padding: 16px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,248,255,.97)) !important;
  box-shadow:
    0 32px 110px rgba(8,22,44,.26),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body.svc-expansion .expBrief__head{
  margin-bottom: 10px !important;
}

body.svc-expansion .expBrief__grid{
  gap: 10px !important;
}

body.svc-expansion .expHero__panelNote{
  margin-top: 8px !important;
  background: rgba(255,255,255,.11) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.80) !important;
  box-shadow: 0 16px 36px rgba(8,22,44,.14) !important;
}

/* Tablet y abajo */
@media (max-width: 1180px){
  body.svc-expansion .expHero{
    padding-top: 80px !important;
    padding-bottom: 14px !important;
  }

  body.svc-expansion .expHero__grid{
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-block: 6px 0 !important;
  }
}

@media (max-width: 640px){
  body.svc-expansion .expHero{
    padding-top: 82px !important;
    padding-bottom: 14px !important;
  }
}
/* =========================================================
   EXPANSIÓN — HERO más compacto + más textura + más presencia
   Pegar al FINAL de styles.css
========================================================= */

body.svc-expansion .expHero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 56px !important;
  padding-bottom: 8px !important;
}

/* Fondo más profundo y con más capas */
body.svc-expansion .expHero__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(860px 500px at 8% 10%, rgba(122,169,255,.24), transparent 58%),
    radial-gradient(540px 340px at 86% 14%, rgba(255,255,255,.10), transparent 68%),
    radial-gradient(760px 420px at 56% -6%, rgba(9,28,58,.26), transparent 62%),
    linear-gradient(135deg, #0a1b34 0%, #0e2b55 46%, #1c4c96 100%) !important;
  box-shadow: inset 0 -80px 120px rgba(4,12,26,.10);
  z-index: 0;
}

/* Grid / textura más visible */
body.svc-expansion .expHero::before{
  content: "";
  position: absolute;
  inset: -30px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 18% 18%, rgba(0,0,0,.85), transparent 68%);
  opacity: .18 !important;
  pointer-events: none;
  z-index: 0;
}

/* Sheen / luz diagonal */
body.svc-expansion .expHero::after{
  content: "";
  position: absolute;
  inset: -12% auto auto -8%;
  width: 56%;
  height: 85%;
  background: linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,0) 58%);
  filter: blur(8px);
  opacity: .55;
  transform: rotate(-7deg);
  pointer-events: none;
  z-index: 0;
}

body.svc-expansion .expHero .container{
  position: relative;
  z-index: 2;
}

/* Compactar la altura útil para que entre mejor */
body.svc-expansion .expHero__grid{
  display: grid !important;
  grid-template-columns: 1.08fr .92fr !important;
  gap: 18px !important;
  align-items: center !important;
  min-height: calc(100svh - 78px) !important;
  padding-block: 0 !important;
}

/* Lado izquierdo */
body.svc-expansion .expHero__copy{
  align-self: center !important;
  min-width: 0;
}

body.svc-expansion .svc-eyebrow{
  display: inline-flex !important;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 34px rgba(5,14,30,.18);
  backdrop-filter: blur(8px);
}

body.svc-expansion .expHero__title{
  margin: 12px 0 10px !important;
  text-shadow: 0 14px 34px rgba(2,8,18,.24);
}

body.svc-expansion .expHero__lead{
  margin: 0 !important;
  max-width: 760px !important;
  color: rgba(255,255,255,.86) !important;
  text-shadow: 0 8px 22px rgba(2,8,18,.18);
}

/* Las palabras en negrita del lead ya no se pierden */
body.svc-expansion .expHero__lead b,
body.svc-expansion .expHero__lead strong{
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Paneles del lado izquierdo: más sólidos y visibles */
body.svc-expansion .expHero__points{
  margin-top: 10px !important;
  gap: 9px !important;
}

body.svc-expansion .expPoint{
  display: grid !important;
  grid-template-columns: 46px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 12px 13px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.09)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 22px 50px rgba(4,12,26,.22),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px);
}

body.svc-expansion .expPoint__icon{
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

body.svc-expansion .expPoint__icon svg{
  width: 18px !important;
  height: 18px !important;
}

body.svc-expansion .expPoint__text b{
  color: #fff !important;
  text-shadow: 0 4px 14px rgba(2,8,18,.16);
}

body.svc-expansion .expPoint__text span{
  color: rgba(255,255,255,.82) !important;
}

/* Chips y botones del hero */
body.svc-expansion .svc-chips{
  margin-top: 10px !important;
  gap: 8px !important;
}

body.svc-expansion .svc-chip{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: 0 12px 28px rgba(4,12,26,.12);
}

body.svc-expansion .svc-actions{
  margin-top: 10px !important;
  gap: 10px !important;
}

body.svc-expansion .expHero__note{
  margin-top: 8px !important;
  color: rgba(255,255,255,.72) !important;
}

/* Panel derecho con más presencia */
body.svc-expansion .expHero__panel{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
}

body.svc-expansion .expBrief{
  position: relative;
  border-radius: 24px !important;
  padding: 16px !important;
  background:
    radial-gradient(260px 120px at 100% 0%, rgba(74,129,233,.16), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,255,.97)) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow:
    0 34px 100px rgba(4,12,26,.28),
    0 10px 28px rgba(4,12,26,.10),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body.svc-expansion .expBrief::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

body.svc-expansion .expHero__panelNote{
  margin-top: 8px !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: 0 18px 42px rgba(4,12,26,.18) !important;
}

/* Tablet */
@media (max-width: 1180px){
  body.svc-expansion .expHero{
    padding-top: 64px !important;
    padding-bottom: 12px !important;
  }

  body.svc-expansion .expHero__grid{
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Móvil */
@media (max-width: 640px){
  body.svc-expansion .expHero{
    padding-top: 78px !important;
    padding-bottom: 14px !important;
  }
}
/* Expansión — solo color de texto en chips del hero */
body.svc-expansion .svc-chip{
  color: rgba(255,255,255,.96) !important;
}

body.svc-expansion .svc-chip b,
body.svc-expansion .svc-chip strong{
  color: #ffffff !important;
}
/* =========================================================
   EXPANSIÓN — SECCIÓN "QUÉ DECIDES"
   Más presencia, contraste y jerarquía
   Sin tocar tamaños de letra
========================================================= */

body.svc-expansion #que-decides{
  position: relative;
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(37,99,235,.08), transparent 58%),
    radial-gradient(760px 360px at 88% 12%, rgba(147,197,253,.10), transparent 60%),
    linear-gradient(180deg, #f7faff 0%, #f3f7fd 100%);
}

body.svc-expansion #que-decides .svc-head{
  position: relative;
  z-index: 2;
}

body.svc-expansion #que-decides .svc-head::after{
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(147,197,253,.35));
  box-shadow: 0 8px 22px rgba(37,99,235,.18);
}

body.svc-expansion #que-decides .svc-decide{
  margin-top: 24px;
  position: relative;
  z-index: 2;
}

/* Cards */
body.svc-expansion #que-decides .svc-decision{
  background:
    radial-gradient(260px 120px at 12% 0%, rgba(37,99,235,.08), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.96));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow:
    0 22px 54px rgba(15,23,42,.07),
    0 6px 18px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.85);
  overflow: visible;
}

/* Barra lateral más elegante */
body.svc-expansion #que-decides .svc-decision::before{
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  opacity: .9;
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(96,165,250,.45));
  box-shadow: 0 0 18px rgba(59,130,246,.22);
}

/* Número más limpio y mejor colocado */
body.svc-expansion #que-decides .svc-decision::after{
  top: 18px;
  right: 18px;
  min-width: 42px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,246,255,.98));
  border: 1px solid rgba(59,130,246,.16);
  box-shadow:
    0 10px 24px rgba(37,99,235,.10),
    inset 0 1px 0 rgba(255,255,255,.92);
  color: rgba(37,99,235,.92);
}

/* Top de cada card con mejor respiración */
body.svc-expansion #que-decides .svc-decision-top{
  padding-right: 64px;
}

/* Icono con más presencia */
body.svc-expansion #que-decides .svc-ico{
  background: linear-gradient(180deg, rgba(37,99,235,.09), rgba(96,165,250,.08));
  border: 1px solid rgba(37,99,235,.16);
  box-shadow:
    0 10px 24px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
  color: rgba(37,99,235,.98);
}

/* Tags más premium */
body.svc-expansion #que-decides .svc-tag{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,253,.96));
  border: 1px solid rgba(15,23,42,.09);
  color: rgba(15,23,42,.74);
  box-shadow: 0 6px 14px rgba(15,23,42,.04);
}

/* Lista un poco más nítida */
body.svc-expansion #que-decides .svc-decision li::marker{
  color: rgba(37,99,235,.82);
}

/* Hover uniforme y sobrio */
body.svc-expansion #que-decides .svc-decision{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-expansion #que-decides .svc-decision:hover{
  transform: translateY(-4px);
  border-color: rgba(37,99,235,.14);
  box-shadow:
    0 28px 64px rgba(15,23,42,.10),
    0 10px 24px rgba(37,99,235,.05),
    inset 0 1px 0 rgba(255,255,255,.88);
}

/* Microband inferior con más peso */
body.svc-expansion #que-decides .svc-microband{
  margin-top: 22px;
  border-radius: 22px;
  border: 1px solid rgba(37,99,235,.16);
  background:
    radial-gradient(420px 140px at 0% 0%, rgba(96,165,250,.18), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.96));
  box-shadow:
    0 20px 50px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.85);
}

body.svc-expansion #que-decides .svc-microband > span:first-child{
  color: rgba(11,31,58,.88);
}

body.svc-expansion #que-decides .svc-microband > span:last-child{
  color: rgba(11,31,58,.72);
  font-weight: 700;
}
/* =========================================================
   EXPANSIÓN — FIX hover raro + más profundidad en cards
   Sección: #que-decides
========================================================= */

body.svc-expansion #que-decides .svc-decision{
  position: relative;
  overflow: hidden;
  border-radius: 24px !important;
  background:
    radial-gradient(240px 120px at 10% 0%, rgba(59,130,246,.08), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.96)) !important;
  box-shadow:
    0 26px 70px rgba(11,31,58,.10),
    0 10px 24px rgba(11,31,58,.05),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-expansion #que-decides .svc-decision:hover{
  transform: translateY(-4px);
  box-shadow:
    0 34px 88px rgba(11,31,58,.14),
    0 12px 28px rgba(37,99,235,.06),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* El brillo del hover deja de verse cuadrado */
body.svc-expansion #que-decides .svc-decision .svc-decision-top{
  position: relative;
  z-index: 1;
}

body.svc-expansion #que-decides .svc-decision .svc-decision-top::after{
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: -10px;
  height: 108px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(59,130,246,.10), rgba(255,255,255,0) 58%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}

body.svc-expansion #que-decides .svc-decision:hover .svc-decision-top::after{
  opacity: .9;
}

/* Icono y badge un poco más integrados con la profundidad */
body.svc-expansion #que-decides .svc-ico{
  box-shadow:
    0 10px 24px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.78);
}

body.svc-expansion #que-decides .svc-decision::after{
  box-shadow:
    0 10px 20px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.88);
}
/* =========================================================
   EXPANSIÓN — REDISEÑO COMPLETO SECCIÓN ALCANCE (#incluye)
   Compacta, premium, vendible y dentro del estilo Hercob
========================================================= */

body.svc-expansion .inc2{
  position: relative;
  overflow: hidden;
  padding-top: 56px;
  padding-bottom: 56px;
  background:
    radial-gradient(920px 440px at 8% 0%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(760px 340px at 92% 12%, rgba(147,197,253,.12), transparent 60%),
    linear-gradient(180deg, #f7faff 0%, #f2f7fd 100%);
}

body.svc-expansion .inc2::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.26) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.20) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 18% 8%, rgba(0,0,0,.75), transparent 72%);
  opacity: .18;
  pointer-events: none;
}

body.svc-expansion .inc2 .container{
  position: relative;
  z-index: 1;
}

body.svc-expansion .inc2-head{
  margin-bottom: 16px;
}

body.svc-expansion .inc2-board{
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  grid-template-areas:
    "copy deliver"
    "strip strip";
  gap: 16px 18px;
  padding: 20px;
  border-radius: 30px;
  border: 1px solid rgba(11,31,58,.10);
  background:
    radial-gradient(720px 260px at 14% 0%, rgba(37,99,235,.12), rgba(255,255,255,0) 58%),
    radial-gradient(640px 260px at 100% 10%, rgba(147,197,253,.12), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,249,255,.94));
  box-shadow:
    0 30px 90px rgba(11,31,58,.12),
    0 10px 28px rgba(11,31,58,.05),
    inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: min(72svh, 760px);
}

body.svc-expansion .inc2-board::before{
  content: "";
  position: absolute;
  inset: -8% auto auto -6%;
  width: 48%;
  height: 55%;
  background: linear-gradient(120deg, rgba(255,255,255,.30), rgba(255,255,255,0) 58%);
  filter: blur(12px);
  opacity: .55;
  pointer-events: none;
}

/* ---------- copy ---------- */
body.svc-expansion .inc2-copy{
  grid-area: copy;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 10px 4px 8px;
}

body.svc-expansion .inc2-ribbon{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.16);
  color: #2253a6;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow:
    0 10px 22px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.78);
}

body.svc-expansion .inc2-copy h3{
  color: #102848;
  line-height: 1.06;
  max-width: 620px;
}

body.svc-expansion .inc2-text{
  color: rgba(11,31,58,.78);
  max-width: 640px;
}

body.svc-expansion .inc2-proof{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}

body.svc-expansion .inc2-proofItem{
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.92));
  box-shadow:
    0 14px 28px rgba(11,31,58,.06),
    inset 0 1px 0 rgba(255,255,255,.86);
}

body.svc-expansion .inc2-proofItem b{
  display: block;
  color: #102848;
}

body.svc-expansion .inc2-proofItem span{
  display: block;
  margin-top: 2px;
  color: rgba(11,31,58,.66);
}

body.svc-expansion .inc2-note{
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(37,99,235,.14);
  background:
    linear-gradient(180deg, rgba(37,99,235,.07), rgba(37,99,235,.04));
  box-shadow:
    0 14px 28px rgba(37,99,235,.07),
    inset 0 1px 0 rgba(255,255,255,.72);
  color: rgba(11,31,58,.82);
}

/* ---------- deliverables ---------- */
body.svc-expansion .inc2-deliver{
  grid-area: deliver;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: center;
  min-width: 0;
}

body.svc-expansion .inc2-doc{
  position: relative;
  overflow: hidden;
  min-height: 170px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,.10);
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(37,99,235,.08), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.93));
  box-shadow:
    0 18px 34px rgba(11,31,58,.07),
    inset 0 1px 0 rgba(255,255,255,.88);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.svc-expansion .inc2-doc::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(147,197,253,.55));
}

body.svc-expansion .inc2-doc:hover{
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.16);
  box-shadow:
    0 22px 42px rgba(11,31,58,.09),
    inset 0 1px 0 rgba(255,255,255,.90);
}

body.svc-expansion .inc2-docTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

body.svc-expansion .inc2-docTag{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.14);
  color: #2253a6;
  font-weight: 700;
}

body.svc-expansion .inc2-docNo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,246,255,.96));
  border: 1px solid rgba(37,99,235,.14);
  color: #2d5eb9;
  font-weight: 800;
  box-shadow:
    0 8px 18px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.88);
}

body.svc-expansion .inc2-doc h4{
  color: #102848;
  margin-bottom: 8px;
}

body.svc-expansion .inc2-doc ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,31,58,.72);
  display: grid;
  gap: 4px;
}

body.svc-expansion .inc2-doc li::marker{
  color: rgba(37,99,235,.84);
}

/* ---------- strip ---------- */
body.svc-expansion .inc2-strip{
  grid-area: strip;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 2px;
}

body.svc-expansion .inc2-mini{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,249,255,.92));
  box-shadow:
    0 14px 28px rgba(11,31,58,.06),
    inset 0 1px 0 rgba(255,255,255,.84);
}

body.svc-expansion .inc2-miniNo{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37,99,235,.09);
  border: 1px solid rgba(37,99,235,.14);
  color: #2253a6;
  font-weight: 800;
  box-shadow:
    0 10px 20px rgba(37,99,235,.07),
    inset 0 1px 0 rgba(255,255,255,.80);
}

body.svc-expansion .inc2-mini h4{
  color: #102848;
  margin-bottom: 4px;
}

body.svc-expansion .inc2-mini p{
  color: rgba(11,31,58,.68);
  margin: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px){
  body.svc-expansion .inc2-board{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "deliver"
      "strip";
    min-height: auto;
  }
}

@media (max-width: 820px){
  body.svc-expansion .inc2{
    padding-top: 48px;
    padding-bottom: 48px;
  }

  body.svc-expansion .inc2-proof,
  body.svc-expansion .inc2-deliver,
  body.svc-expansion .inc2-strip{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   EXPANSIÓN — ALCANCE / REDISEÑO INSTITUCIONAL
   Sección nueva: .inc3
========================================================= */

body.svc-expansion .inc3{
  position: relative;
  overflow: hidden;
  padding-top: 52px;
  padding-bottom: 52px;
  background:
    radial-gradient(920px 440px at 8% 0%, rgba(37,99,235,.07), transparent 60%),
    radial-gradient(760px 340px at 92% 12%, rgba(147,197,253,.10), transparent 60%),
    linear-gradient(180deg, #f7faff 0%, #f2f7fd 100%);
}

body.svc-expansion .inc3::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 18% 8%, rgba(0,0,0,.72), transparent 72%);
  opacity: .16;
  pointer-events: none;
}

body.svc-expansion .inc3 .container{
  position: relative;
  z-index: 1;
}

body.svc-expansion .inc3-head{
  margin-bottom: 14px;
}

body.svc-expansion .inc3-board{
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  grid-template-areas:
    "copy summary"
    "strip strip";
  gap: 14px 16px;
  padding: 18px;
  border-radius: 30px;
  border: 1px solid rgba(11,31,58,.10);
  background:
    radial-gradient(680px 240px at 12% 0%, rgba(37,99,235,.10), rgba(255,255,255,0) 58%),
    radial-gradient(560px 220px at 100% 10%, rgba(147,197,253,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,255,.94));
  box-shadow:
    0 28px 80px rgba(11,31,58,.11),
    0 10px 26px rgba(11,31,58,.05),
    inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-expansion .inc3-board::before{
  content: "";
  position: absolute;
  inset: -8% auto auto -6%;
  width: 46%;
  height: 52%;
  background: linear-gradient(120deg, rgba(255,255,255,.28), rgba(255,255,255,0) 58%);
  filter: blur(12px);
  opacity: .55;
  pointer-events: none;
}

/* Left */
body.svc-expansion .inc3-copy{
  grid-area: copy;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 8px 4px 6px;
}

body.svc-expansion .inc3-ribbon{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.14);
  color: #2457aa;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow:
    0 10px 22px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.78);
}

body.svc-expansion .inc3-copy h3{
  color: #102848;
  line-height: 1.06;
  max-width: 650px;
}

body.svc-expansion .inc3-text{
  color: rgba(11,31,58,.78);
  max-width: 650px;
}

body.svc-expansion .inc3-comfort{
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

body.svc-expansion .inc3-comfortItem{
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,249,255,.93));
  box-shadow:
    0 14px 28px rgba(11,31,58,.06),
    inset 0 1px 0 rgba(255,255,255,.86);
}

body.svc-expansion .inc3-comfortItem b{
  display: block;
  color: #102848;
  margin-bottom: 2px;
}

body.svc-expansion .inc3-comfortItem span{
  color: rgba(11,31,58,.68);
}

body.svc-expansion .inc3-proofBar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

body.svc-expansion .inc3-proofBar span{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.09);
  background: rgba(255,255,255,.72);
  color: rgba(11,31,58,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}

/* Right summary */
body.svc-expansion .inc3-summary{
  grid-area: summary;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.10);
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(37,99,235,.10), rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(245,249,255,.86));
  box-shadow:
    0 22px 46px rgba(11,31,58,.08),
    inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.svc-expansion .inc3-summaryTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

body.svc-expansion .inc3-summaryTag,
body.svc-expansion .inc3-summaryPill{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.14);
  background: rgba(255,255,255,.72);
  color: #2457aa;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}

body.svc-expansion .inc3-summaryBody{
  display: grid;
  gap: 10px;
}

body.svc-expansion .inc3-line{
  display: grid;
  gap: 4px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,58,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.92));
  box-shadow:
    0 12px 24px rgba(11,31,58,.05),
    inset 0 1px 0 rgba(255,255,255,.84);
}

body.svc-expansion .inc3-line b{
  color: #102848;
}

body.svc-expansion .inc3-line span{
  color: rgba(11,31,58,.68);
}

body.svc-expansion .inc3-summaryFoot{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.svc-expansion .inc3-summaryFoot span{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,31,58,.08);
  background: rgba(255,255,255,.74);
  color: rgba(11,31,58,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}

/* Bottom strip */
body.svc-expansion .inc3-strip{
  grid-area: strip;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.svc-expansion .inc3-mini{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,249,255,.92));
  box-shadow:
    0 12px 24px rgba(11,31,58,.05),
    inset 0 1px 0 rgba(255,255,255,.84);
}

body.svc-expansion .inc3-miniNo{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37,99,235,.09);
  border: 1px solid rgba(37,99,235,.14);
  color: #2457aa;
  font-weight: 800;
  box-shadow:
    0 10px 20px rgba(37,99,235,.07),
    inset 0 1px 0 rgba(255,255,255,.80);
}

body.svc-expansion .inc3-mini h4{
  color: #102848;
  margin-bottom: 4px;
}

body.svc-expansion .inc3-mini p{
  margin: 0;
  color: rgba(11,31,58,.68);
}

/* Responsive */
@media (max-width: 1180px){
  body.svc-expansion .inc3-board{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "summary"
      "strip";
  }
}

@media (max-width: 820px){
  body.svc-expansion .inc3{
    padding-top: 46px;
    padding-bottom: 46px;
  }

  body.svc-expansion .inc3-strip{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   EXPANSIÓN — ALCANCE / VERSIÓN FILOSA Y ABIERTA
   Sin panel gordo, sin mucho texto, distinta a #que-decides
========================================================= */

body.svc-expansion .inc9{
  position: relative;
  overflow: hidden;
  padding: 52px 0 56px;
  background:
    radial-gradient(920px 360px at 10% 0%, rgba(37,99,235,.05), transparent 60%),
    radial-gradient(760px 280px at 92% 14%, rgba(147,197,253,.08), transparent 58%),
    linear-gradient(180deg, #f7faff 0%, #f2f7fd 100%);
}

body.svc-expansion .inc9-head{
  max-width: 900px;
  margin-bottom: 18px;
}

body.svc-expansion .inc9-head .svc-kicker{
  display: block;
  margin-bottom: 8px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: rgba(11,31,58,.50) !important;
}

body.svc-expansion .inc9-head .svc-title{
  max-width: 11ch;
}

body.svc-expansion .inc9-head .svc-lead{
  max-width: 58ch;
}

/* Escalera editorial */
body.svc-expansion .inc9-ladder{
  display: grid;
  gap: 12px;
}

body.svc-expansion .inc9-row{
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 20px 20px 18px;
  border-radius: 24px;
  border: 1px solid rgba(11,31,58,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,249,255,.93));
  box-shadow:
    0 18px 40px rgba(11,31,58,.06),
    inset 0 1px 0 rgba(255,255,255,.86);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.svc-expansion .inc9-row::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(37,99,235,.92), rgba(96,165,250,.42));
}

body.svc-expansion .inc9-row:hover{
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.14);
  box-shadow:
    0 24px 52px rgba(11,31,58,.08),
    inset 0 1px 0 rgba(255,255,255,.88);
}

/* ritmo visual distinto */
body.svc-expansion .inc9-row:nth-child(2){
  margin-left: 44px;
}

body.svc-expansion .inc9-row:nth-child(3){
  margin-right: 44px;
}

body.svc-expansion .inc9-no{
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  color: rgba(37,99,235,.78);
}

body.svc-expansion .inc9-copy h3{
  margin: 0 0 4px;
  color: #0b1f3a;
  line-height: 1.06;
}

body.svc-expansion .inc9-copy p{
  margin: 0;
  color: rgba(11,31,58,.70);
  line-height: 1.55;
}

body.svc-expansion .inc9-tail{
  white-space: nowrap;
  color: rgba(11,31,58,.48);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* prueba final limpia */
body.svc-expansion .inc9-proof{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

body.svc-expansion .inc9-proof span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(11,31,58,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,249,255,.91));
  box-shadow:
    0 12px 26px rgba(11,31,58,.04),
    inset 0 1px 0 rgba(255,255,255,.84);
  color: #0b1f3a;
  font-weight: 700;
  text-align: center;
}

/* responsive */
@media (max-width: 980px){
  body.svc-expansion .inc9-row{
    grid-template-columns: 60px 1fr;
  }

  body.svc-expansion .inc9-tail{
    grid-column: 2;
  }

  body.svc-expansion .inc9-row:nth-child(2),
  body.svc-expansion .inc9-row:nth-child(3){
    margin-left: 0;
    margin-right: 0;
  }

  body.svc-expansion .inc9-proof{
    grid-template-columns: 1fr 1fr;
  }

  body.svc-expansion .inc9-head .svc-title{
    max-width: none;
  }
}

@media (max-width: 640px){
  body.svc-expansion .inc9-proof{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   EXPANSION — ALCANCE
========================================================= */

body.svc-expansion .exp-scope{
  padding: 88px 0;
  background:
    radial-gradient(780px 260px at 12% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(720px 260px at 100% 10%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.svc-expansion .exp-scope__head{
  max-width: 980px;
  margin-bottom: 26px;
}

body.svc-expansion .exp-scope__board{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(260px 130px at 100% 0%, rgba(113,158,235,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,247,252,.94));
  box-shadow:
    0 18px 36px rgba(15,34,63,.07),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .exp-scope__board-copy{
  padding: 8px 4px 8px 4px;
}

body.svc-expansion .exp-scope__eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(46,96,200,.08);
  border: 1px solid rgba(46,96,200,.12);
  color: #2e60c8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-expansion .exp-scope__board-copy h3{
  margin: 14px 0 12px;
  color: #10233b;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -.04em;
}

body.svc-expansion .exp-scope__board-copy > p{
  margin: 0;
  color: rgba(16,35,59,.74);
  font-size: 17px;
  line-height: 1.58;
  max-width: 620px;
}

body.svc-expansion .exp-scope__proof{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}

body.svc-expansion .exp-scope__proof-item{
  padding: 16px 16px 14px;
  border-radius: 20px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(243,247,252,.84));
  box-shadow:
    0 10px 22px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .exp-scope__proof-item strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 15px;
  line-height: 1.15;
}

body.svc-expansion .exp-scope__proof-item span{
  display: block;
  color: rgba(16,35,59,.64);
  font-size: 13px;
  line-height: 1.24;
}

body.svc-expansion .exp-scope__quote{
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(46,96,200,.10);
  background:
    linear-gradient(180deg, rgba(236,243,253,.92), rgba(227,237,249,.88));
  color: rgba(16,35,59,.78);
  font-size: 15px;
  line-height: 1.38;
}

body.svc-expansion .exp-scope__quote b{
  color: #173252;
}

/* pack derecho */
body.svc-expansion .exp-scope__board-pack{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

body.svc-expansion .exp-scope__pack-item{
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(140px 70px at 100% 0%, rgba(112,158,236,.10), transparent 72%),
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(237,244,250,.95));
  box-shadow:
    0 12px 24px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .exp-scope__pack-item::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7fa8ec, rgba(127,168,236,.16));
}

body.svc-expansion .exp-scope__pack-tag{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(15,34,63,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .exp-scope__pack-item h4{
  margin: 12px 0 10px;
  color: #10233b;
  font-size: 18px;
  line-height: 1.1;
}

body.svc-expansion .exp-scope__pack-item ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

body.svc-expansion .exp-scope__pack-item li{
  position: relative;
  padding-left: 14px;
  color: rgba(16,35,59,.74);
  font-size: 14px;
  line-height: 1.3;
}

body.svc-expansion .exp-scope__pack-item li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6b8ec4;
  box-shadow: 0 0 0 4px rgba(107,142,196,.10);
}

/* módulos */
body.svc-expansion .exp-scope__modules{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

body.svc-expansion .exp-scope__module{
  padding: 22px 22px 20px;
  border-radius: 26px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,252,.96));
  box-shadow:
    0 16px 30px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .exp-scope__module--focus{
  border-color: rgba(46,96,200,.14);
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(94,143,227,.14), transparent 72%),
    linear-gradient(180deg, rgba(242,248,255,.99), rgba(227,238,251,.96));
  box-shadow:
    0 18px 34px rgba(15,34,63,.08),
    0 0 0 1px rgba(46,96,200,.04),
    inset 0 1px 0 rgba(255,255,255,.58);
}

body.svc-expansion .exp-scope__module-top{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

body.svc-expansion .exp-scope__num{
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #e6edf9, #d8e3f4);
  border: 1px solid rgba(46,96,200,.10);
  color: #2f66d0;
  font-size: 13px;
  font-weight: 800;
}

body.svc-expansion .exp-scope__module-top h3{
  margin: 0 0 4px;
  color: #10233b;
  font-size: 19px;
  line-height: 1.12;
  letter-spacing: -.02em;
}

body.svc-expansion .exp-scope__module-top p{
  margin: 0;
  color: rgba(16,35,59,.60);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}

body.svc-expansion .exp-scope__module-copy{
  margin: 0 0 12px;
  color: rgba(16,35,59,.76);
  font-size: 15px;
  line-height: 1.36;
}

body.svc-expansion .exp-scope__module ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

body.svc-expansion .exp-scope__module li{
  position: relative;
  padding-left: 14px;
  color: rgba(16,35,59,.78);
  font-size: 15px;
  line-height: 1.3;
}

body.svc-expansion .exp-scope__module li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6486bc;
  box-shadow: 0 0 0 4px rgba(100,134,188,.10);
}

/* impacto */
body.svc-expansion .exp-scope__impact{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(123,163,232,.08), transparent 74%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,246,250,.93));
  box-shadow:
    0 14px 28px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.42);
}

body.svc-expansion .exp-scope__impact-item{
  padding: 4px 8px;
}

body.svc-expansion .exp-scope__impact-item strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 15px;
  line-height: 1.14;
}

body.svc-expansion .exp-scope__impact-item span{
  display: block;
  color: rgba(16,35,59,.68);
  font-size: 14px;
  line-height: 1.28;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .exp-scope__board{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .exp-scope__board-pack,
  body.svc-expansion .exp-scope__modules,
  body.svc-expansion .exp-scope__impact,
  body.svc-expansion .exp-scope__proof{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   EXPANSION — ALCANCE (rediseño completo)
========================================================= */

body.svc-expansion .expScope2{
  padding: 88px 0;
  background:
    radial-gradient(780px 260px at 10% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(720px 260px at 100% 10%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.svc-expansion .expScope2-head{
  max-width: 980px;
  margin-bottom: 28px;
}

body.svc-expansion .expScope2-board{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(98,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,247,252,.94));
  box-shadow:
    0 18px 36px rgba(15,34,63,.07),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expScope2-copy{
  padding: 6px 4px;
}

body.svc-expansion .expScope2-eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(46,96,200,.08);
  border: 1px solid rgba(46,96,200,.12);
  color: #2e60c8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-expansion .expScope2-copy h3{
  margin: 14px 0 12px;
  color: #10233b;
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: -.04em;
}

body.svc-expansion .expScope2-copy p{
  margin: 0;
  color: rgba(16,35,59,.74);
  font-size: 17px;
  line-height: 1.58;
  max-width: 640px;
}

body.svc-expansion .expScope2-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

body.svc-expansion .expScope2-pills span{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(16,35,59,.76);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(15,34,63,.04);
}

/* summary */
body.svc-expansion .expScope2-summary-card{
  height: 100%;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(46,96,200,.14);
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(102,150,231,.18), transparent 72%),
    linear-gradient(145deg, #17355f 0%, #204a86 52%, #315e9f 100%);
  box-shadow:
    0 22px 42px rgba(8,24,52,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.svc-expansion .expScope2-summary-kicker{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-expansion .expScope2-summary-item{
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

body.svc-expansion .expScope2-summary-item:last-child{
  padding-bottom: 0;
  border-bottom: 0;
}

body.svc-expansion .expScope2-summary-item b{
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.18;
}

body.svc-expansion .expScope2-summary-item span{
  display: block;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.34;
}

/* cards medias */
body.svc-expansion .expScope2-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

body.svc-expansion .expScope2-card{
  padding: 22px 22px 20px;
  border-radius: 28px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,252,.96));
  box-shadow:
    0 16px 30px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expScope2-card--focus{
  border-color: rgba(46,96,200,.14);
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(96,144,228,.14), transparent 72%),
    linear-gradient(180deg, rgba(242,248,255,.99), rgba(226,238,251,.96));
  box-shadow:
    0 18px 34px rgba(15,34,63,.08),
    0 0 0 1px rgba(46,96,200,.04),
    inset 0 1px 0 rgba(255,255,255,.58);
}

body.svc-expansion .expScope2-card-tag{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(15,34,63,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-expansion .expScope2-card h3{
  margin: 14px 0 12px;
  color: #10233b;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.03em;
}

body.svc-expansion .expScope2-card ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

body.svc-expansion .expScope2-card li{
  position: relative;
  padding-left: 15px;
  color: rgba(16,35,59,.76);
  font-size: 15px;
  line-height: 1.32;
}

body.svc-expansion .expScope2-card li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6486bc;
  box-shadow: 0 0 0 4px rgba(100,134,188,.10);
}

/* focus card */
body.svc-expansion .expScope2-decision{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

body.svc-expansion .expScope2-decision-row{
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(46,96,200,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(237,244,251,.80));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 8px 18px rgba(15,34,63,.04);
}

body.svc-expansion .expScope2-decision-row span{
  color: rgba(16,35,59,.58);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.svc-expansion .expScope2-decision-row b{
  color: #173252;
  font-size: 15px;
  line-height: 1.26;
}

/* decision pack */
body.svc-expansion .expScope2-pack{
  margin-top: 18px;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(113,158,235,.08), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,247,252,.94));
  box-shadow:
    0 18px 36px rgba(15,34,63,.07),
    inset 0 1px 0 rgba(255,255,255,.52);
}

body.svc-expansion .expScope2-pack-head{
  max-width: 760px;
  margin-bottom: 18px;
}

body.svc-expansion .expScope2-pack-kicker{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(46,96,200,.08);
  border: 1px solid rgba(46,96,200,.12);
  color: #2e60c8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-expansion .expScope2-pack-head h3{
  margin: 12px 0 8px;
  color: #10233b;
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -.04em;
}

body.svc-expansion .expScope2-pack-head p{
  margin: 0;
  color: rgba(16,35,59,.70);
  font-size: 16px;
  line-height: 1.48;
}

body.svc-expansion .expScope2-pack-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

body.svc-expansion .expScope2-pack-item{
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(250,251,253,.98), rgba(241,246,251,.95));
  box-shadow:
    0 12px 24px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expScope2-pack-item-tag{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(15,34,63,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .expScope2-pack-item h4{
  margin: 12px 0 8px;
  color: #10233b;
  font-size: 19px;
  line-height: 1.12;
}

body.svc-expansion .expScope2-pack-item p{
  margin: 0;
  color: rgba(16,35,59,.70);
  font-size: 14px;
  line-height: 1.34;
}

/* banda final */
body.svc-expansion .expScope2-band{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(123,163,232,.08), transparent 74%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,246,250,.93));
  box-shadow:
    0 14px 28px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.44);
}

body.svc-expansion .expScope2-band-copy{
  color: rgba(16,35,59,.76);
  font-size: 15px;
  line-height: 1.38;
}

body.svc-expansion .expScope2-band-copy b{
  color: #10233b;
}

body.svc-expansion .expScope2-band-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.svc-expansion .expScope2-band-pills span{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15,34,63,.06);
  border: 1px solid rgba(15,34,63,.08);
  color: #173252;
  font-size: 13px;
  font-weight: 700;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expScope2-board,
  body.svc-expansion .expScope2-grid,
  body.svc-expansion .expScope2-pack-grid,
  body.svc-expansion .expScope2-band,
  body.svc-expansion .expScope2-proof{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   EXPANSION — ALCANCE (versión compacta, 1 sola sección)
========================================================= */

body.svc-expansion .expScope3{
  padding: 82px 0 88px;
  background:
    radial-gradient(780px 260px at 10% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(720px 260px at 100% 10%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.svc-expansion .expScope3-head{
  max-width: 980px;
  margin-bottom: 24px;
}

body.svc-expansion .expScope3-shell{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(98,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,247,252,.94));
  box-shadow:
    0 18px 36px rgba(15,34,63,.07),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* izquierda */
body.svc-expansion .expScope3-main{
  padding: 4px 4px 0 4px;
}

body.svc-expansion .expScope3-eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(46,96,200,.08);
  border: 1px solid rgba(46,96,200,.12);
  color: #2e60c8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-expansion .expScope3-main h3{
  margin: 14px 0 12px;
  color: #10233b;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -.04em;
  max-width: 720px;
}

body.svc-expansion .expScope3-copy{
  margin: 0;
  color: rgba(16,35,59,.74);
  font-size: 16px;
  line-height: 1.52;
  max-width: 680px;
}

body.svc-expansion .expScope3-proof{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}

body.svc-expansion .expScope3-proofItem{
  padding: 14px 14px 13px;
  border-radius: 18px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(243,247,252,.84));
  box-shadow:
    0 10px 22px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expScope3-proofItem strong{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 14px;
  line-height: 1.14;
}

body.svc-expansion .expScope3-proofItem span{
  display: block;
  color: rgba(16,35,59,.64);
  font-size: 12.5px;
  line-height: 1.24;
}

body.svc-expansion .expScope3-listGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

body.svc-expansion .expScope3-listBlock{
  padding: 16px 16px 14px;
  border-radius: 20px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(250,251,253,.98), rgba(241,246,251,.95));
  box-shadow:
    0 10px 24px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expScope3-listBlock b{
  display: block;
  margin-bottom: 8px;
  color: #173252;
  font-size: 15px;
  line-height: 1.16;
}

body.svc-expansion .expScope3-listBlock ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

body.svc-expansion .expScope3-listBlock li{
  position: relative;
  padding-left: 14px;
  color: rgba(16,35,59,.74);
  font-size: 14px;
  line-height: 1.28;
}

body.svc-expansion .expScope3-listBlock li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6486bc;
  box-shadow: 0 0 0 4px rgba(100,134,188,.10);
}

/* panel azul derecho */
body.svc-expansion .expScope3-focus{
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(46,96,200,.14);
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(102,150,231,.18), transparent 72%),
    linear-gradient(145deg, #17355f 0%, #204a86 52%, #315e9f 100%);
  box-shadow:
    0 22px 42px rgba(8,24,52,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.svc-expansion .expScope3-focusKicker{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.svc-expansion .expScope3-focus h3{
  margin: 14px 0 10px;
  color: #ffffff;
  font-size: 31px;
  line-height: 1.04;
  letter-spacing: -.04em;
}

body.svc-expansion .expScope3-focus > p{
  margin: 0 0 16px;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.5;
}

body.svc-expansion .expScope3-focusList{
  display: grid;
  gap: 10px;
}

body.svc-expansion .expScope3-focusItem{
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.svc-expansion .expScope3-focusItem b{
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.16;
}

body.svc-expansion .expScope3-focusItem span{
  display: block;
  color: rgba(255,255,255,.76);
  font-size: 13.5px;
  line-height: 1.28;
}

/* franja inferior integrada */
body.svc-expansion .expScope3-bottom{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(123,163,232,.08), transparent 74%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,246,250,.93));
  box-shadow:
    0 14px 28px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.44);
}

body.svc-expansion .expScope3-bottomCopy{
  color: rgba(16,35,59,.74);
  font-size: 15px;
  line-height: 1.34;
}

body.svc-expansion .expScope3-bottomCopy b{
  color: #10233b;
}

body.svc-expansion .expScope3-bottomPills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.svc-expansion .expScope3-bottomPills span{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15,34,63,.06);
  border: 1px solid rgba(15,34,63,.08);
  color: #173252;
  font-size: 13px;
  font-weight: 700;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expScope3-shell,
  body.svc-expansion .expScope3-proof,
  body.svc-expansion .expScope3-listGrid,
  body.svc-expansion .expScope3-bottom{
    grid-template-columns: 1fr;
  }
}
/* ===== Expansion / Alcance — pulido de presencia y compactación ===== */

body.svc-expansion .expScope3{
  padding: 84px 0 88px;
  background:
    radial-gradient(860px 280px at 12% 0%, rgba(46,96,200,.06), transparent 58%),
    radial-gradient(760px 260px at 100% 10%, rgba(46,96,200,.05), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.svc-expansion .expScope3-head{
  max-width: 920px;
  margin-bottom: 22px;
}

body.svc-expansion .expScope3-head .svc-title{
  max-width: 980px;
  color: #0f223f;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.05em;
}

body.svc-expansion .expScope3-head .svc-lead{
  max-width: 860px;
  color: rgba(16,35,59,.70);
}

/* contenedor general con más presencia */
body.svc-expansion .expScope3-shell{
  gap: 20px;
  padding: 24px;
  border-radius: 34px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(260px 140px at 100% 0%, rgba(98,144,228,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(241,246,251,.95));
  box-shadow:
    0 22px 44px rgba(15,34,63,.08),
    inset 0 1px 0 rgba(255,255,255,.60);
}

/* lado izquierdo: ahora sí más sólido y sin huecos tontos */
body.svc-expansion .expScope3-main{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 18px 16px;
  border-radius: 28px;
  border: 1px solid rgba(15,34,63,.07);
  background:
    radial-gradient(220px 100px at 0% 0%, rgba(144,180,235,.08), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(244,248,252,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 14px 30px rgba(15,34,63,.04);
  min-height: 100%;
}

body.svc-expansion .expScope3-eyebrow{
  margin-bottom: 10px;
}

body.svc-expansion .expScope3-main h3{
  margin: 0 0 12px;
  max-width: 690px;
  color: #10233b;
  font-size: clamp(28px, 3vw, 44px);
  line-height: .98;
  letter-spacing: -.045em;
}

body.svc-expansion .expScope3-copy{
  max-width: 700px;
  margin: 0;
  color: rgba(16,35,59,.74);
  font-size: 16px;
  line-height: 1.5;
}

/* prueba: más compacta y menos “bloquecitos sueltos” */
body.svc-expansion .expScope3-proof{
  margin-top: 16px;
  gap: 10px;
}

body.svc-expansion .expScope3-proofItem{
  padding: 13px 14px 12px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,246,251,.86));
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expScope3-proofItem strong{
  font-size: 14px;
}

body.svc-expansion .expScope3-proofItem span{
  font-size: 12.5px;
}

/* bloques inferiores izquierda: más presencia, menos vacío */
body.svc-expansion .expScope3-listGrid{
  margin-top: 12px;
  gap: 12px;
}

body.svc-expansion .expScope3-listBlock{
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid rgba(46,96,200,.09);
  background:
    radial-gradient(140px 70px at 100% 0%, rgba(112,158,236,.08), transparent 72%),
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(239,245,251,.94));
  box-shadow:
    0 10px 22px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expScope3-listBlock b{
  margin-bottom: 8px;
  font-size: 15px;
  color: #173252;
}

body.svc-expansion .expScope3-listBlock li{
  font-size: 14px;
  line-height: 1.28;
}

/* panel azul derecho más premium y con más textura */
body.svc-expansion .expScope3-focus{
  position: relative;
  padding: 24px;
  border-radius: 30px;
  border: 1px solid rgba(66,115,205,.30);
  background:
    linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04)),
    radial-gradient(260px 160px at 100% 0%, rgba(104,157,255,.18), transparent 72%),
    linear-gradient(145deg, #17355f 0%, #204a86 52%, #315e9f 100%);
  box-shadow:
    0 24px 44px rgba(8,24,52,.20),
    inset 0 1px 0 rgba(255,255,255,.10);
  overflow: hidden;
}

body.svc-expansion .expScope3-focus::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.35), transparent 75%);
  opacity: .45;
}

/* items azules internos con más cuerpo */
body.svc-expansion .expScope3-focusList{
  gap: 12px;
}

body.svc-expansion .expScope3-focusItem{
  padding: 15px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 18px rgba(6,20,45,.10);
}

/* franja inferior más integrada y menos flotante */
body.svc-expansion .expScope3-bottom{
  margin-top: 4px;
  padding: 16px 18px;
  border-radius: 22px;
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(123,163,232,.10), transparent 74%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(240,245,250,.90));
  box-shadow:
    0 12px 24px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.44);
}

body.svc-expansion .expScope3-bottomCopy{
  font-size: 14px;
  line-height: 1.32;
}

body.svc-expansion .expScope3-bottomPills span{
  min-height: 34px;
  padding: 0 13px;
  font-size: 12.5px;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expScope3-shell,
  body.svc-expansion .expScope3-proof,
  body.svc-expansion .expScope3-listGrid,
  body.svc-expansion .expScope3-bottom{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expScope3-main h3{
    max-width: none;
  }
}
/* Ajuste fino de jerarquía tipográfica — Alcance / Expansión */
body.svc-expansion .expScope3-main h3{
  margin: 0 0 12px;
  max-width: 640px;
  color: #10233b;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -.03em;
}
/* Ajuste fino — subtítulo izquierdo + huecos */
body.svc-expansion .expScope3-main{
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 14px;
  justify-content: stretch;
}

body.svc-expansion .expScope3-main h3{
  margin: 0;
  max-width: 680px;
  color: #10233b;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.035em;
}

body.svc-expansion .expScope3-copy{
  margin: 0;
  max-width: 700px;
}

body.svc-expansion .expScope3-proof{
  margin-top: 0;
}

body.svc-expansion .expScope3-listGrid{
  margin-top: 0;
  align-items: stretch;
}

body.svc-expansion .expScope3-listBlock{
  height: 100%;
}
/* Mismo tamaño para subtítulo izquierdo y derecho */
body.svc-expansion .expScope3-main h3,
body.svc-expansion .expScope3-focus h3{
  font-size: 31px;
  line-height: 1.04;
  letter-spacing: -.04em;
}
body.svc-expansion .expScope3-main{
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 14px;
}
/* =========================================================
   EXPANSION — ENTREGABLES
   rediseño más visual y distinto
========================================================= */

body.svc-expansion .expDeliver6{
  padding: 84px 0 88px;
  background:
    radial-gradient(760px 240px at 10% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(700px 240px at 100% 10%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.svc-expansion .expDeliver6-head{
  max-width: 960px;
  margin-bottom: 24px;
}

body.svc-expansion .expDeliver6-shell{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px;
  align-items: start;
}

/* =========================
   IZQUIERDA
========================= */
body.svc-expansion .expDeliver6-stage{
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(98,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(242,247,252,.95));
  box-shadow:
    0 22px 44px rgba(15,34,63,.08),
    inset 0 1px 0 rgba(255,255,255,.60);
}

body.svc-expansion .expDeliver6-memo,
body.svc-expansion .expDeliver6-model,
body.svc-expansion .expDeliver6-route{
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(249,251,254,.99), rgba(239,245,251,.96));
  box-shadow:
    0 16px 32px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.60);
  overflow: hidden;
}

body.svc-expansion .expDeliver6-memo::before,
body.svc-expansion .expDeliver6-model::before,
body.svc-expansion .expDeliver6-route::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 14px;
  height: 3px;
  border-radius: 999px;
}

body.svc-expansion .expDeliver6-memo::before{
  background: linear-gradient(90deg, #97b7eb, rgba(151,183,235,.16));
}

body.svc-expansion .expDeliver6-model::before{
  background: linear-gradient(90deg, #7fa8ec, rgba(127,168,236,.16));
}

body.svc-expansion .expDeliver6-route::before{
  background: linear-gradient(90deg, #5f8fe2, rgba(95,143,226,.16));
}

body.svc-expansion .expDeliver6-memo{
  padding: 20px;
  margin-bottom: 14px;
}

body.svc-expansion .expDeliver6-lower{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 14px;
}

body.svc-expansion .expDeliver6-model,
body.svc-expansion .expDeliver6-route{
  padding: 18px;
}

body.svc-expansion .expDeliver6-cardTop{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

body.svc-expansion .expDeliver6-chip{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(46,96,200,.08);
  border: 1px solid rgba(46,96,200,.12);
  color: #2e60c8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .expDeliver6-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.svc-expansion .expDeliver6-badges span{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(15,34,63,.72);
  font-size: 12px;
  font-weight: 700;
}

body.svc-expansion .expDeliver6-memo h3,
body.svc-expansion .expDeliver6-model h3,
body.svc-expansion .expDeliver6-route h3{
  margin: 0 0 12px;
  color: #10233b;
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: -.03em;
}

/* memo */
body.svc-expansion .expDeliver6-verdict{
  padding: 16px 18px;
  margin-bottom: 12px;
  border-radius: 20px;
  border: 1px solid rgba(46,96,200,.14);
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(96,144,228,.14), transparent 72%),
    linear-gradient(180deg, rgba(242,248,255,.98), rgba(229,239,251,.95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 10px 22px rgba(15,34,63,.05);
}

body.svc-expansion .expDeliver6-verdict span{
  display: block;
  margin-bottom: 5px;
  color: rgba(16,35,59,.56);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .expDeliver6-verdict b{
  display: block;
  margin-bottom: 5px;
  color: #173252;
  font-size: 25px;
  line-height: 1.02;
  letter-spacing: -.04em;
}

body.svc-expansion .expDeliver6-verdict small{
  display: block;
  color: rgba(16,35,59,.68);
  font-size: 13px;
  line-height: 1.3;
}

body.svc-expansion .expDeliver6-lines{
  display: grid;
  gap: 10px;
}

body.svc-expansion .expDeliver6-line{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,34,63,.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(243,247,252,.84));
}

body.svc-expansion .expDeliver6-line span{
  color: rgba(16,35,59,.62);
  font-size: 13px;
  font-weight: 700;
}

body.svc-expansion .expDeliver6-line b{
  color: #173252;
  font-size: 13px;
  line-height: 1.2;
  text-align: right;
}

/* model */
body.svc-expansion .expDeliver6-modelGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

body.svc-expansion .expDeliver6-metric{
  padding: 13px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(241,246,251,.86));
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expDeliver6-metric span{
  display: block;
  color: rgba(16,35,59,.58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

body.svc-expansion .expDeliver6-metric b{
  display: block;
  color: #10233b;
  font-size: 17px;
  line-height: 1.08;
  margin-bottom: 4px;
}

body.svc-expansion .expDeliver6-metric small{
  display: block;
  color: rgba(16,35,59,.64);
  font-size: 12px;
  line-height: 1.24;
}

/* gráfica vertical */
body.svc-expansion .expDeliver6-chart{
  position: relative;
  height: 168px;
  padding: 0 4px 14px;
}

body.svc-expansion .expDeliver6-bars{
  height: 100%;
  display: flex;
  align-items: end;
  gap: 12px;
}

body.svc-expansion .expDeliver6-bars span{
  flex: 1;
  display: block;
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, #7da7ef 0%, #5f8fe2 100%);
  box-shadow: 0 10px 18px rgba(95,143,226,.18);
}

body.svc-expansion .expDeliver6-chartBase{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(15,34,63,.10);
}

/* route */
body.svc-expansion .expDeliver6-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

body.svc-expansion .expDeliver6-step{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(241,246,251,.86));
  text-align: center;
}

body.svc-expansion .expDeliver6-step b{
  display: block;
  margin-bottom: 4px;
  color: #173252;
  font-size: 22px;
  line-height: 1;
}

body.svc-expansion .expDeliver6-step span{
  display: block;
  color: rgba(16,35,59,.68);
  font-size: 12px;
  line-height: 1.24;
}

body.svc-expansion .expDeliver6-routeNotes{
  display: grid;
  gap: 10px;
}

body.svc-expansion .expDeliver6-noteRow{
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,34,63,.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(243,247,252,.84));
}

body.svc-expansion .expDeliver6-noteRow span{
  display: block;
  margin-bottom: 4px;
  color: rgba(16,35,59,.60);
  font-size: 12px;
  font-weight: 700;
}

body.svc-expansion .expDeliver6-noteRow b{
  display: block;
  color: #173252;
  font-size: 13px;
  line-height: 1.28;
}

/* callout */
body.svc-expansion .expDeliver6-callout{
  margin-top: 14px;
  padding: 15px 16px;
  border-radius: 20px;
  border: 1px solid rgba(46,96,200,.10);
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(96,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(239,245,251,.94));
  color: rgba(16,35,59,.72);
  font-size: 14px;
  line-height: 1.34;
}

body.svc-expansion .expDeliver6-callout b{
  color: #173252;
}

body.svc-expansion .expDeliver6-callout span{
  color: #2c5fc6;
  font-weight: 700;
}

/* =========================
   DERECHA
========================= */
body.svc-expansion .expDeliver6-side{
  display: grid;
  gap: 14px;
}

body.svc-expansion .expDeliver6-sideHead{
  padding: 20px 20px 18px;
  border-radius: 26px;
  border: 1px solid rgba(46,96,200,.10);
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(96,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(239,245,251,.95));
  box-shadow:
    0 14px 30px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.60);
}

body.svc-expansion .expDeliver6-sideKicker{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(46,96,200,.08);
  border: 1px solid rgba(46,96,200,.12);
  color: #2e60c8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .expDeliver6-sideHead h3{
  margin: 14px 0 10px;
  color: #10233b;
  font-size: 30px;
  line-height: 1.04;
  letter-spacing: -.04em;
}

body.svc-expansion .expDeliver6-sideHead p{
  margin: 0;
  color: rgba(16,35,59,.72);
  font-size: 16px;
  line-height: 1.48;
}

body.svc-expansion .expDeliver6-valueGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

body.svc-expansion .expDeliver6-value{
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,247,252,.92));
  box-shadow:
    0 10px 22px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expDeliver6-value--dark{
  background:
    radial-gradient(200px 90px at 100% 0%, rgba(102,150,231,.18), transparent 72%),
    linear-gradient(145deg, #17355f 0%, #204a86 52%, #315e9f 100%);
  border-color: rgba(66,115,205,.26);
  box-shadow:
    0 18px 34px rgba(8,24,52,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.svc-expansion .expDeliver6-value span{
  display: block;
  margin-bottom: 8px;
  color: rgba(16,35,59,.56);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .expDeliver6-value b{
  display: block;
  margin-bottom: 6px;
  color: #173252;
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -.02em;
}

body.svc-expansion .expDeliver6-value small{
  display: block;
  color: rgba(16,35,59,.68);
  font-size: 13px;
  line-height: 1.3;
}

body.svc-expansion .expDeliver6-value--dark span{
  color: rgba(255,255,255,.62);
}

body.svc-expansion .expDeliver6-value--dark b{
  color: #fff;
}

body.svc-expansion .expDeliver6-value--dark small{
  color: rgba(255,255,255,.76);
}

body.svc-expansion .expDeliver6-noBox{
  padding: 18px;
  border-radius: 22px;
  border: 1px dashed rgba(15,34,63,.14);
  background:
    linear-gradient(180deg, rgba(250,251,253,.96), rgba(243,247,252,.92));
}

body.svc-expansion .expDeliver6-noTop{
  margin-bottom: 10px;
}

body.svc-expansion .expDeliver6-noTop b{
  display: block;
  margin-bottom: 4px;
  color: #10233b;
  font-size: 15px;
  line-height: 1.16;
}

body.svc-expansion .expDeliver6-noTop span{
  display: block;
  color: rgba(16,35,59,.60);
  font-size: 13px;
  line-height: 1.28;
}

body.svc-expansion .expDeliver6-noTags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.svc-expansion .expDeliver6-noTags span{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(16,35,59,.72);
  font-size: 12.5px;
  font-weight: 700;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expDeliver6-shell,
  body.svc-expansion .expDeliver6-lower,
  body.svc-expansion .expDeliver6-modelGrid,
  body.svc-expansion .expDeliver6-steps,
  body.svc-expansion .expDeliver6-valueGrid{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expDeliver6-line{
    flex-direction: column;
    align-items: flex-start;
  }

  body.svc-expansion .expDeliver6-line b{
    text-align: left;
  }
}
/* =========================================================
   EXPANSION — ENTREGABLES
   ajuste de compactación + alineación
========================================================= */

body.svc-expansion .expDeliver6-shell{
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 16px;
  align-items: stretch;
}

body.svc-expansion .expDeliver6-stage,
body.svc-expansion .expDeliver6-side{
  height: 100%;
}

/* Convertimos ambos lados en columnas controladas */
body.svc-expansion .expDeliver6-stage{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

body.svc-expansion .expDeliver6-side{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================
   IZQUIERDA — compactar
========================= */
body.svc-expansion .expDeliver6-memo{
  padding: 16px;
  margin-bottom: 0;
}

body.svc-expansion .expDeliver6-model,
body.svc-expansion .expDeliver6-route{
  padding: 14px;
}

body.svc-expansion .expDeliver6-lower{
  gap: 12px;
  align-items: stretch;
}

body.svc-expansion .expDeliver6-cardTop{
  margin-bottom: 10px;
}

body.svc-expansion .expDeliver6-chip{
  min-height: 30px;
  padding: 0 10px;
  font-size: 9.5px;
}

body.svc-expansion .expDeliver6-badges span{
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

body.svc-expansion .expDeliver6-memo h3{
  font-size: 19px;
  line-height: 1.08;
  margin-bottom: 10px;
}

body.svc-expansion .expDeliver6-model h3,
body.svc-expansion .expDeliver6-route h3{
  font-size: 17px;
  line-height: 1.08;
  margin-bottom: 10px;
}

/* bloque principal */
body.svc-expansion .expDeliver6-verdict{
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 18px;
}

body.svc-expansion .expDeliver6-verdict b{
  font-size: 20px;
  line-height: 1.02;
}

body.svc-expansion .expDeliver6-verdict small{
  font-size: 12px;
  line-height: 1.28;
}

/* filas del memo */
body.svc-expansion .expDeliver6-lines{
  gap: 8px;
}

body.svc-expansion .expDeliver6-line{
  padding: 11px 12px;
  border-radius: 14px;
}

body.svc-expansion .expDeliver6-line span{
  font-size: 12px;
}

body.svc-expansion .expDeliver6-line b{
  font-size: 12px;
}

/* métricas del modelo */
body.svc-expansion .expDeliver6-modelGrid{
  gap: 8px;
  margin-bottom: 10px;
}

body.svc-expansion .expDeliver6-metric{
  padding: 11px 12px 10px;
  border-radius: 16px;
}

body.svc-expansion .expDeliver6-metric span{
  font-size: 10px;
  margin-bottom: 4px;
}

body.svc-expansion .expDeliver6-metric b{
  font-size: 15px;
  margin-bottom: 3px;
}

body.svc-expansion .expDeliver6-metric small{
  font-size: 11px;
  line-height: 1.22;
}

/* gráfica vertical real, más corta */
body.svc-expansion .expDeliver6-chart{
  height: 110px;
  padding: 0 2px 10px;
}

body.svc-expansion .expDeliver6-bars{
  gap: 10px;
}

body.svc-expansion .expDeliver6-bars span{
  border-radius: 12px 12px 5px 5px;
}

/* ruta */
body.svc-expansion .expDeliver6-steps{
  gap: 8px;
  margin-bottom: 10px;
}

body.svc-expansion .expDeliver6-step{
  padding: 12px 10px;
  border-radius: 16px;
}

body.svc-expansion .expDeliver6-step b{
  font-size: 18px;
}

body.svc-expansion .expDeliver6-step span{
  font-size: 11px;
}

body.svc-expansion .expDeliver6-routeNotes{
  gap: 8px;
}

body.svc-expansion .expDeliver6-noteRow{
  padding: 11px 12px;
  border-radius: 14px;
}

body.svc-expansion .expDeliver6-noteRow span{
  font-size: 11px;
}

body.svc-expansion .expDeliver6-noteRow b{
  font-size: 12px;
  line-height: 1.24;
}

/* callout lo mandamos abajo del todo y más compacto */
body.svc-expansion .expDeliver6-callout{
  margin-top: auto;
  padding: 13px 14px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.3;
}

/* =========================
   DERECHA — alinear y compactar
========================= */
body.svc-expansion .expDeliver6-sideHead{
  padding: 18px 18px 16px;
  border-radius: 24px;
}

body.svc-expansion .expDeliver6-sideHead h3{
  font-size: 24px;
  line-height: 1.06;
  margin: 12px 0 8px;
}

body.svc-expansion .expDeliver6-sideHead p{
  font-size: 14px;
  line-height: 1.4;
}

body.svc-expansion .expDeliver6-valueGrid{
  gap: 10px;
}

body.svc-expansion .expDeliver6-value{
  padding: 15px;
  border-radius: 18px;
  min-height: 118px;
}

body.svc-expansion .expDeliver6-value span{
  margin-bottom: 6px;
  font-size: 10px;
}

body.svc-expansion .expDeliver6-value b{
  font-size: 15px;
  margin-bottom: 5px;
}

body.svc-expansion .expDeliver6-value small{
  font-size: 12px;
  line-height: 1.24;
}

/* caja de no incluye se pega abajo para alinear fondo */
body.svc-expansion .expDeliver6-noBox{
  margin-top: auto;
  padding: 16px;
  border-radius: 20px;
}

body.svc-expansion .expDeliver6-noTop{
  margin-bottom: 8px;
}

body.svc-expansion .expDeliver6-noTop b{
  font-size: 14px;
}

body.svc-expansion .expDeliver6-noTop span{
  font-size: 12px;
}

body.svc-expansion .expDeliver6-noTags{
  gap: 8px;
}

body.svc-expansion .expDeliver6-noTags span{
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expDeliver6-shell,
  body.svc-expansion .expDeliver6-lower,
  body.svc-expansion .expDeliver6-modelGrid,
  body.svc-expansion .expDeliver6-steps,
  body.svc-expansion .expDeliver6-valueGrid{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expDeliver6-line{
    flex-direction: column;
    align-items: flex-start;
  }

  body.svc-expansion .expDeliver6-line b{
    text-align: left;
  }

  body.svc-expansion .expDeliver6-stage,
  body.svc-expansion .expDeliver6-side{
    height: auto;
  }

  body.svc-expansion .expDeliver6-noBox,
  body.svc-expansion .expDeliver6-callout{
    margin-top: 0;
  }
}
/* =========================================================
   EXPANSION — ENTREGABLES
   lower cards compactas + título arriba junto al chip
========================================================= */

/* compactación general del bloque izquierdo */
body.svc-expansion .expDeliver6-stage{
  gap: 10px;
  padding: 16px;
}

body.svc-expansion .expDeliver6-lower{
  grid-template-columns: 1fr;
  gap: 10px;
}

/* ambas tarjetas inferiores: más compactas y horizontales */
body.svc-expansion .expDeliver6-model,
body.svc-expansion .expDeliver6-route{
  position: relative;
  padding: 58px 12px 12px;
  min-height: 0;
  border-radius: 20px;
}

/* card top fijo arriba */
body.svc-expansion .expDeliver6-model .expDeliver6-cardTop,
body.svc-expansion .expDeliver6-route .expDeliver6-cardTop{
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  margin: 0;
  z-index: 3;
}

/* títulos arriba, al lado del chip */
body.svc-expansion .expDeliver6-model h3,
body.svc-expansion .expDeliver6-route h3{
  position: absolute;
  top: 18px;
  left: clamp(210px, 28%, 250px);
  right: 120px;
  margin: 0;
  font-size: 15px;
  line-height: 1.02;
  letter-spacing: -.02em;
  z-index: 2;
  max-width: none;
}

/* chips y badges más chicos */
body.svc-expansion .expDeliver6-chip{
  min-height: 27px;
  padding: 0 9px;
  font-size: 9px;
}

body.svc-expansion .expDeliver6-badges span{
  min-height: 27px;
  padding: 0 9px;
  font-size: 10px;
}

/* =========================
   MODELO EDITABLE
========================= */
body.svc-expansion .expDeliver6-model{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body.svc-expansion .expDeliver6-modelGrid{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
  margin: 0;
}

body.svc-expansion .expDeliver6-metric{
  padding: 9px 10px 8px;
  border-radius: 14px;
}

body.svc-expansion .expDeliver6-metric span{
  font-size: 9px;
  margin-bottom: 3px;
}

body.svc-expansion .expDeliver6-metric b{
  font-size: 13px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-metric small{
  font-size: 10px;
  line-height: 1.14;
}

/* gráfica más corta y compacta */
body.svc-expansion .expDeliver6-chart{
  height: 72px;
  padding: 0 2px 8px;
  margin-top: 2px;
}

body.svc-expansion .expDeliver6-bars{
  gap: 8px;
}

body.svc-expansion .expDeliver6-bars span{
  border-radius: 10px 10px 4px 4px;
}

/* =========================
   RUTA DE AVANCE
========================= */
body.svc-expansion .expDeliver6-route{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body.svc-expansion .expDeliver6-steps{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
  margin: 0;
}

body.svc-expansion .expDeliver6-step{
  padding: 10px 8px;
  border-radius: 14px;
}

body.svc-expansion .expDeliver6-step b{
  font-size: 16px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-step span{
  font-size: 10px;
  line-height: 1.12;
}

body.svc-expansion .expDeliver6-routeNotes{
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body.svc-expansion .expDeliver6-noteRow{
  padding: 10px 11px;
  border-radius: 12px;
}

body.svc-expansion .expDeliver6-noteRow span{
  font-size: 10px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-noteRow b{
  font-size: 11px;
  line-height: 1.18;
}

/* callout final más compacto */
body.svc-expansion .expDeliver6-callout{
  padding: 11px 12px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.24;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expDeliver6-model h3,
  body.svc-expansion .expDeliver6-route h3{
    position: static;
    margin: 0 0 8px;
    font-size: 15px;
  }

  body.svc-expansion .expDeliver6-model,
  body.svc-expansion .expDeliver6-route{
    padding: 12px;
  }

  body.svc-expansion .expDeliver6-model .expDeliver6-cardTop,
  body.svc-expansion .expDeliver6-route .expDeliver6-cardTop{
    position: static;
    margin-bottom: 8px;
  }

  body.svc-expansion .expDeliver6-modelGrid,
  body.svc-expansion .expDeliver6-steps,
  body.svc-expansion .expDeliver6-routeNotes{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   EXPANSION — ENTREGABLES
   unir modelo editable + ruta de avance
========================================================= */

body.svc-expansion .expDeliver6-lower{
  grid-template-columns: 1fr;
  gap: 0;
}

body.svc-expansion .expDeliver6-model,
body.svc-expansion .expDeliver6-route{
  display: none;
}

/* card unificada */
body.svc-expansion .expDeliver6-combo{
  position: relative;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(249,251,254,.99), rgba(239,245,251,.96));
  box-shadow:
    0 16px 32px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.60);
  overflow: hidden;
}

body.svc-expansion .expDeliver6-combo::before{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6f9cec, rgba(111,156,236,.16));
}

body.svc-expansion .expDeliver6-combo .expDeliver6-cardTop{
  margin-bottom: 10px;
}

body.svc-expansion .expDeliver6-comboGrid{
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  grid-template-areas:
    "intro metrics"
    "chart route";
  gap: 10px 14px;
  align-items: start;
}

/* intro */
body.svc-expansion .expDeliver6-comboIntro{
  grid-area: intro;
}

body.svc-expansion .expDeliver6-comboIntro h3{
  margin: 0 0 8px;
  color: #10233b;
  font-size: 17px;
  line-height: 1.06;
  letter-spacing: -.02em;
}

body.svc-expansion .expDeliver6-comboIntro p{
  margin: 0 0 10px;
  color: rgba(16,35,59,.68);
  font-size: 12px;
  line-height: 1.28;
}

body.svc-expansion .expDeliver6-comboTags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.svc-expansion .expDeliver6-comboTags span{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(15,34,63,.72);
  font-size: 10.5px;
  font-weight: 700;
}

/* métricas */
body.svc-expansion .expDeliver6-comboMetrics{
  grid-area: metrics;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-metric{
  padding: 10px 10px 9px;
  border-radius: 14px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-metric span{
  font-size: 9px;
  margin-bottom: 3px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-metric b{
  font-size: 13px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-metric small{
  font-size: 10px;
  line-height: 1.14;
}

/* gráfica */
body.svc-expansion .expDeliver6-comboChartWrap{
  grid-area: chart;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-chart{
  height: 84px;
  padding: 0 2px 8px;
  margin-top: 2px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-bars{
  gap: 8px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-bars span{
  border-radius: 10px 10px 4px 4px;
}

/* ruta */
body.svc-expansion .expDeliver6-comboRoute{
  grid-area: route;
  display: grid;
  gap: 8px;
}

body.svc-expansion .expDeliver6-steps--compact{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
  margin: 0;
}

body.svc-expansion .expDeliver6-steps--compact .expDeliver6-step{
  padding: 10px 8px;
  border-radius: 14px;
}

body.svc-expansion .expDeliver6-steps--compact .expDeliver6-step b{
  font-size: 16px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-steps--compact .expDeliver6-step span{
  font-size: 10px;
  line-height: 1.12;
}

body.svc-expansion .expDeliver6-routeNotes--compact{
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body.svc-expansion .expDeliver6-routeNotes--compact .expDeliver6-noteRow{
  padding: 10px 11px;
  border-radius: 12px;
}

body.svc-expansion .expDeliver6-routeNotes--compact .expDeliver6-noteRow span{
  font-size: 10px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-routeNotes--compact .expDeliver6-noteRow b{
  font-size: 11px;
  line-height: 1.18;
}

/* callout final más integrado */
body.svc-expansion .expDeliver6-callout{
  margin-top: 0;
  padding: 11px 12px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.24;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expDeliver6-comboGrid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "metrics"
      "chart"
      "route";
  }

  body.svc-expansion .expDeliver6-comboMetrics,
  body.svc-expansion .expDeliver6-steps--compact,
  body.svc-expansion .expDeliver6-routeNotes--compact{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   FIX — cortar SOLO modelo + ruta
   y quitar título/texto de esa pieza
========================================================= */

/* 1) Deshacer el recorte incorrecto de todo el lado izquierdo */
body.svc-expansion .expDeliver6-stage{
  min-height: auto;
  max-height: none;
  overflow: visible;
  isolation: auto;
}

body.svc-expansion .expDeliver6-stage::after{
  display: none;
}

body.svc-expansion .expDeliver6-memo,
body.svc-expansion .expDeliver6-lower,
body.svc-expansion .expDeliver6-callout{
  transform: none !important;
  width: 100% !important;
  margin-left: 0 !important;
}

/* 2) Ajustar lower normal */
body.svc-expansion .expDeliver6-lower{
  grid-template-columns: 1fr;
  gap: 10px;
}

/* 3) SOLO la pieza unificada MODELO + RUTA se vuelve preview recortado */
body.svc-expansion .expDeliver6-combo{
  position: relative;
  padding: 12px;
  max-height: 255px;
  overflow: hidden;
  border-radius: 20px;
}

/* fade inferior solo en combo */
body.svc-expansion .expDeliver6-combo::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78px;
  background: linear-gradient(
    180deg,
    rgba(239,245,251,0) 0%,
    rgba(239,245,251,.70) 46%,
    rgba(239,245,251,.95) 82%,
    rgba(239,245,251,1) 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* 4) Dejar solo el chip de arriba: ocultar título y texto innecesarios */
body.svc-expansion .expDeliver6-comboIntro{
  display: none;
}

/* 5) Reestructurar el combo para que use mejor el ancho */
body.svc-expansion .expDeliver6-comboGrid{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "metrics"
    "chart"
    "route";
  gap: 8px;
  align-items: start;
}

body.svc-expansion .expDeliver6-comboMetrics{
  grid-area: metrics;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-metric{
  padding: 10px 10px 9px;
  border-radius: 14px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-metric span{
  font-size: 9px;
  margin-bottom: 3px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-metric b{
  font-size: 13px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-metric small{
  font-size: 10px;
  line-height: 1.14;
}

/* 6) Gráfica más compacta */
body.svc-expansion .expDeliver6-comboChartWrap{
  grid-area: chart;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-chart{
  height: 72px;
  padding: 0 2px 8px;
  margin-top: 0;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-bars{
  gap: 8px;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-bars span{
  border-radius: 10px 10px 4px 4px;
}

/* 7) Ruta de avance compactísima */
body.svc-expansion .expDeliver6-comboRoute{
  grid-area: route;
  display: grid;
  gap: 7px;
  margin-top: 2px;
}

body.svc-expansion .expDeliver6-steps--compact{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
  margin: 0;
}

body.svc-expansion .expDeliver6-steps--compact .expDeliver6-step{
  padding: 10px 8px;
  border-radius: 14px;
}

body.svc-expansion .expDeliver6-steps--compact .expDeliver6-step b{
  font-size: 16px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-steps--compact .expDeliver6-step span{
  font-size: 10px;
  line-height: 1.12;
}

body.svc-expansion .expDeliver6-routeNotes--compact{
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body.svc-expansion .expDeliver6-routeNotes--compact .expDeliver6-noteRow{
  padding: 10px 11px;
  border-radius: 12px;
}

body.svc-expansion .expDeliver6-routeNotes--compact .expDeliver6-noteRow span{
  font-size: 10px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-routeNotes--compact .expDeliver6-noteRow b{
  font-size: 11px;
  line-height: 1.18;
}

/* 8) Callout normal, sin recorte raro */
body.svc-expansion .expDeliver6-callout{
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.24;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expDeliver6-combo{
    max-height: none;
    overflow: visible;
  }

  body.svc-expansion .expDeliver6-combo::after{
    display: none;
  }

  body.svc-expansion .expDeliver6-comboMetrics,
  body.svc-expansion .expDeliver6-steps--compact,
  body.svc-expansion .expDeliver6-routeNotes--compact{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   EXPANSION — ENTREGABLES
   preview real: gráfica cuadrada izquierda + contenido derecha
========================================================= */

body.svc-expansion .expDeliver6-lower{
  grid-template-columns: 1fr;
  gap: 10px;
}

/* escondemos las versiones viejas si quedaron */
body.svc-expansion .expDeliver6-model,
body.svc-expansion .expDeliver6-route{
  display: none;
}

body.svc-expansion .expDeliver6-combo{
  position: relative;
  padding: 12px;
  height: 250px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(249,251,254,.99), rgba(239,245,251,.96));
  box-shadow:
    0 16px 32px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.60);
}

body.svc-expansion .expDeliver6-combo::before{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6f9cec, rgba(111,156,236,.16));
}

/* sin fades */
body.svc-expansion .expDeliver6-combo::after{
  display: none;
}

body.svc-expansion .expDeliver6-combo .expDeliver6-cardTop{
  margin-bottom: 10px;
}

body.svc-expansion .expDeliver6-preview{
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  align-items: start;
}

/* izquierda */
body.svc-expansion .expDeliver6-previewChart{
  display: grid;
  gap: 8px;
}

body.svc-expansion .expDeliver6-chart--box{
  height: 150px;
  padding: 10px 8px 8px;
  border-radius: 16px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(241,246,251,.86));
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expDeliver6-chart--box .expDeliver6-bars{
  height: 100%;
  display: flex;
  align-items: end;
  gap: 8px;
}

body.svc-expansion .expDeliver6-chart--box .expDeliver6-bars span{
  flex: 1;
  display: block;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #88abef 0%, #6d93e4 100%);
  box-shadow: 0 8px 14px rgba(95,143,226,.16);
}

body.svc-expansion .expDeliver6-chart--box .expDeliver6-chartBase{
  margin-top: 6px;
  height: 2px;
  border-radius: 999px;
  background: rgba(15,34,63,.10);
}

body.svc-expansion .expDeliver6-previewCaption b{
  display: block;
  margin-bottom: 3px;
  color: #173252;
  font-size: 12px;
  line-height: 1.16;
}

body.svc-expansion .expDeliver6-previewCaption span{
  display: block;
  color: rgba(16,35,59,.62);
  font-size: 10.5px;
  line-height: 1.18;
}

/* derecha */
body.svc-expansion .expDeliver6-previewSide{
  display: grid;
  gap: 8px;
}

body.svc-expansion .expDeliver6-previewRows{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewRow{
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(241,246,251,.86));
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expDeliver6-previewRow--wide{
  grid-column: 1 / -1;
}

body.svc-expansion .expDeliver6-previewRow span{
  display: block;
  margin-bottom: 3px;
  color: rgba(16,35,59,.58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.svc-expansion .expDeliver6-previewRow b{
  display: block;
  margin-bottom: 2px;
  color: #173252;
  font-size: 12.5px;
  line-height: 1.15;
}

body.svc-expansion .expDeliver6-previewRow small{
  display: block;
  color: rgba(16,35,59,.64);
  font-size: 10px;
  line-height: 1.16;
}

/* ruta visible pero recortada con overflow real */
body.svc-expansion .expDeliver6-previewRoute{
  max-height: 92px;
  overflow: hidden;
  display: grid;
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewSteps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewSteps .expDeliver6-step{
  padding: 9px 7px;
  border-radius: 13px;
}

body.svc-expansion .expDeliver6-previewSteps .expDeliver6-step b{
  font-size: 15px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-previewSteps .expDeliver6-step span{
  font-size: 9.5px;
  line-height: 1.1;
}

body.svc-expansion .expDeliver6-previewNotes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewNotes .expDeliver6-noteRow{
  padding: 9px 10px;
  border-radius: 12px;
}

body.svc-expansion .expDeliver6-previewNotes .expDeliver6-noteRow span{
  font-size: 9.5px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-previewNotes .expDeliver6-noteRow b{
  font-size: 10.5px;
  line-height: 1.14;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expDeliver6-combo{
    height: auto;
    overflow: visible;
  }

  body.svc-expansion .expDeliver6-preview{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expDeliver6-previewRows,
  body.svc-expansion .expDeliver6-previewSteps,
  body.svc-expansion .expDeliver6-previewNotes{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expDeliver6-previewRoute{
    max-height: none;
    overflow: visible;
  }
}
/* =========================================================
   EXPANSION — preview MODELO + RUTA
   gráfico más presente + copy corto
========================================================= */

body.svc-expansion .expDeliver6-combo{
  height: 262px;
  padding: 12px;
  overflow: hidden;
}

body.svc-expansion .expDeliver6-preview{
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 10px;
  align-items: stretch;
}

body.svc-expansion .expDeliver6-previewChart{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  align-self: stretch;
  min-height: 0;
}

body.svc-expansion .expDeliver6-previewCaption{
  display: grid;
  gap: 2px;
}

body.svc-expansion .expDeliver6-previewCaption span{
  color: rgba(16,35,59,.56);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.svc-expansion .expDeliver6-previewCaption b{
  display: block;
  color: #173252;
  font-size: 14px;
  line-height: 1.08;
}

body.svc-expansion .expDeliver6-previewCaption small{
  display: block;
  color: rgba(16,35,59,.62);
  font-size: 10px;
  line-height: 1.14;
}

body.svc-expansion .expDeliver6-chart--box{
  height: auto;
  min-height: 0;
  padding: 10px 8px 8px;
  border-radius: 16px;
}

body.svc-expansion .expDeliver6-chart--box .expDeliver6-bars{
  height: 100%;
  display: flex;
  align-items: end;
  gap: 8px;
}

body.svc-expansion .expDeliver6-chart--box .expDeliver6-bars span{
  flex: 1;
  border-radius: 10px 10px 4px 4px;
}

body.svc-expansion .expDeliver6-previewSide{
  display: grid;
  gap: 8px;
  min-height: 0;
}

body.svc-expansion .expDeliver6-previewRows{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewRow{
  padding: 10px 11px;
  border-radius: 14px;
}

body.svc-expansion .expDeliver6-previewRow span{
  margin-bottom: 3px;
  font-size: 9px;
  letter-spacing: .12em;
}

body.svc-expansion .expDeliver6-previewRow b{
  margin-bottom: 2px;
  font-size: 12.5px;
  line-height: 1.12;
}

body.svc-expansion .expDeliver6-previewRow small{
  font-size: 10px;
  line-height: 1.14;
}

body.svc-expansion .expDeliver6-previewRoute{
  max-height: 88px;
  overflow: hidden;
  display: grid;
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewSteps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewSteps .expDeliver6-step{
  padding: 9px 7px;
  border-radius: 13px;
}

body.svc-expansion .expDeliver6-previewSteps .expDeliver6-step b{
  font-size: 15px;
  margin-bottom: 1px;
}

body.svc-expansion .expDeliver6-previewSteps .expDeliver6-step span{
  font-size: 9.5px;
  line-height: 1.08;
}

body.svc-expansion .expDeliver6-previewNotes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewNotes .expDeliver6-noteRow{
  padding: 9px 10px;
  border-radius: 12px;
}

body.svc-expansion .expDeliver6-previewNotes .expDeliver6-noteRow span{
  font-size: 9px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-previewNotes .expDeliver6-noteRow b{
  font-size: 10.5px;
  line-height: 1.12;
}

@media (max-width: 1100px){
  body.svc-expansion .expDeliver6-combo{
    height: auto;
  }

  body.svc-expansion .expDeliver6-preview{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expDeliver6-previewRows,
  body.svc-expansion .expDeliver6-previewSteps,
  body.svc-expansion .expDeliver6-previewNotes{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expDeliver6-previewRoute{
    max-height: none;
    overflow: visible;
  }
}
/* =========================================================
   EXPANSION — ajuste fino entregables
   cerrar huecos + bajar gráfica + llenar lado derecho
========================================================= */

/* 1) quitar hueco entre encabezado y paneles */
body.svc-expansion .expDeliver6{
  padding-top: 58px;
}

body.svc-expansion .expDeliver6-head{
  margin-bottom: 10px;
}

body.svc-expansion .expDeliver6-head .svc-title{
  margin-bottom: 8px;
}

body.svc-expansion .expDeliver6-head .svc-lead{
  margin-bottom: 0;
  max-width: 980px;
}

body.svc-expansion .expDeliver6-shell{
  margin-top: 0;
  gap: 16px;
  align-items: start;
}

/* 2) preview modelo+ruta */
body.svc-expansion .expDeliver6-combo{
  height: 262px;
  padding: 12px;
  overflow: hidden;
}

body.svc-expansion .expDeliver6-preview{
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 10px;
  align-items: stretch;
}

/* izquierda: escenario arriba, gráfica abajo tocando el fondo */
body.svc-expansion .expDeliver6-previewChart{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  min-height: 0;
  align-self: stretch;
}

body.svc-expansion .expDeliver6-previewCaption{
  display: grid;
  gap: 5px;
  align-content: start;
}

body.svc-expansion .expDeliver6-previewCaption span{
  color: rgba(16,35,59,.56);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.svc-expansion .expDeliver6-scenarioPills{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.svc-expansion .expDeliver6-scenarioPills em{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: #173252;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

body.svc-expansion .expDeliver6-scenarioPills em:nth-child(1){
  opacity: .68;
}

body.svc-expansion .expDeliver6-scenarioPills em:nth-child(2){
  opacity: .84;
}

body.svc-expansion .expDeliver6-scenarioPills em:nth-child(3){
  opacity: 1;
}

body.svc-expansion .expDeliver6-previewCaption small{
  display: block;
  color: rgba(16,35,59,.60);
  font-size: 10px;
  line-height: 1.14;
}

/* la gráfica baja hasta tocar fondo */
body.svc-expansion .expDeliver6-chart--box{
  align-self: end;
  margin-top: auto;
  height: 122px;
  min-height: 122px;
  padding: 10px 8px 8px;
  border-radius: 16px;
}

body.svc-expansion .expDeliver6-chart--box .expDeliver6-bars{
  height: 100%;
  display: flex;
  align-items: end;
  gap: 8px;
}

body.svc-expansion .expDeliver6-chart--box .expDeliver6-bars span{
  flex: 1;
  border-radius: 10px 10px 4px 4px;
}

/* derecha del preview */
body.svc-expansion .expDeliver6-previewSide{
  display: grid;
  gap: 8px;
  min-height: 0;
}

body.svc-expansion .expDeliver6-previewRows{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewRow{
  padding: 10px 11px;
  border-radius: 14px;
}

body.svc-expansion .expDeliver6-previewRow span{
  margin-bottom: 3px;
  font-size: 9px;
  letter-spacing: .12em;
}

body.svc-expansion .expDeliver6-previewRow b{
  margin-bottom: 2px;
  font-size: 12px;
  line-height: 1.12;
}

body.svc-expansion .expDeliver6-previewRow small{
  font-size: 10px;
  line-height: 1.12;
}

body.svc-expansion .expDeliver6-previewRoute{
  max-height: 96px;
  overflow: hidden;
  display: grid;
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewSteps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewSteps .expDeliver6-step{
  padding: 9px 7px;
  border-radius: 13px;
}

body.svc-expansion .expDeliver6-previewSteps .expDeliver6-step b{
  font-size: 15px;
  margin-bottom: 1px;
}

body.svc-expansion .expDeliver6-previewSteps .expDeliver6-step span{
  font-size: 9.5px;
  line-height: 1.08;
}

body.svc-expansion .expDeliver6-previewNotes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body.svc-expansion .expDeliver6-previewNotes .expDeliver6-noteRow{
  padding: 9px 10px;
  border-radius: 12px;
}

body.svc-expansion .expDeliver6-previewNotes .expDeliver6-noteRow span{
  font-size: 9px;
  margin-bottom: 2px;
}

body.svc-expansion .expDeliver6-previewNotes .expDeliver6-noteRow b{
  font-size: 10.5px;
  line-height: 1.12;
}

/* 3) llenar hueco del lado derecho con una pieza ligera */
body.svc-expansion .expDeliver6-side{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.svc-expansion .expDeliver6-valueGrid{
  gap: 10px;
}

body.svc-expansion .expDeliver6-sideBand{
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(46,96,200,.10);
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(96,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(239,245,251,.94));
  box-shadow:
    0 10px 22px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expDeliver6-sideBandK{
  display: block;
  margin-bottom: 8px;
  color: rgba(16,35,59,.56);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .expDeliver6-sideBandTags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

body.svc-expansion .expDeliver6-sideBandTags span{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: #173252;
  font-size: 11px;
  font-weight: 700;
}

body.svc-expansion .expDeliver6-sideBand p{
  margin: 0;
  color: rgba(16,35,59,.64);
  font-size: 12px;
  line-height: 1.2;
}

/* la caja de no incluye sube y no deja tanto aire */
body.svc-expansion .expDeliver6-noBox{
  margin-top: 0;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expDeliver6-preview{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expDeliver6-previewRows,
  body.svc-expansion .expDeliver6-previewSteps,
  body.svc-expansion .expDeliver6-previewNotes{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expDeliver6-previewRoute{
    max-height: none;
    overflow: visible;
  }
}
/* =========================================================
   EXPANSION — ajuste final entregables
========================================================= */

/* cerrar hueco entre texto de arriba y paneles */
body.svc-expansion .expDeliver6{
  padding-top: 28px;
  padding-bottom: 72px;
}

body.svc-expansion .expDeliver6 .svc-head,
body.svc-expansion .expDeliver6-head{
  margin-bottom: 8px !important;
}

body.svc-expansion .expDeliver6-head .svc-title{
  margin-bottom: 6px;
}

body.svc-expansion .expDeliver6-head .svc-lead{
  margin-bottom: 0;
}

body.svc-expansion .expDeliver6-shell{
  margin-top: 0;
  gap: 16px;
  align-items: start;
}

/* =========================
   preview MODELO + RUTA
========================= */
body.svc-expansion .expDeliver6-combo{
  height: 272px;
  overflow: hidden;
}

body.svc-expansion .expDeliver6-preview{
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 10px;
  align-items: stretch;
}

body.svc-expansion .expDeliver6-previewChart{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

/* copy corto arriba */
body.svc-expansion .expDeliver6-previewCaption{
  display: grid;
  gap: 2px;
}

body.svc-expansion .expDeliver6-previewCaption span{
  color: rgba(16,35,59,.56);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.svc-expansion .expDeliver6-previewCaption b{
  display: block;
  color: #173252;
  font-size: 14px;
  line-height: 1.08;
}

body.svc-expansion .expDeliver6-previewCaption small{
  display: block;
  color: rgba(16,35,59,.62);
  font-size: 10px;
  line-height: 1.14;
}

/* gráfica más abajo y más protagonista */
body.svc-expansion .expDeliver6-chart--box{
  align-self: end;
  margin-top: auto;
  height: 126px;
  min-height: 126px;
  padding: 10px 8px 8px;
  border-radius: 16px;
}

body.svc-expansion .expDeliver6-chart--box .expDeliver6-bars{
  height: 100%;
  display: flex;
  align-items: end;
  gap: 8px;
}

body.svc-expansion .expDeliver6-chart--box .expDeliver6-bars span{
  flex: 1;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #88abef 0%, #6d93e4 100%);
  box-shadow: 0 8px 14px rgba(95,143,226,.16);
}

/* 3 escenarios debajo, recortados */
body.svc-expansion .expDeliver6-scenarioStrip{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  display: flex;
  gap: 8px;
  padding: 0 2px;
}

body.svc-expansion .expDeliver6-scenarioStrip span{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,246,251,.88));
  color: #173252;
  font-size: 10px;
  font-weight: 700;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expDeliver6-scenarioStrip .is-low{
  opacity: .72;
}

body.svc-expansion .expDeliver6-scenarioStrip .is-base{
  opacity: .86;
}

body.svc-expansion .expDeliver6-scenarioStrip .is-up{
  opacity: 1;
}

/* =========================
   lado derecho: llenar hueco con algo nuevo
========================= */
body.svc-expansion .expDeliver6-side{
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

body.svc-expansion .expDeliver6-valueGrid{
  gap: 10px;
}

/* pieza nueva */
body.svc-expansion .expDeliver6-criteriaMap{
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(46,96,200,.10);
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(96,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(239,245,251,.94));
  box-shadow:
    0 10px 22px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expDeliver6-criteriaMap-top{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

body.svc-expansion .expDeliver6-criteriaMap-top span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: rgba(16,35,59,.70);
  font-size: 10px;
  font-weight: 700;
}

body.svc-expansion .expDeliver6-criteriaMap-core{
  padding: 12px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(241,246,251,.86));
  border: 1px solid rgba(15,34,63,.08);
}

body.svc-expansion .expDeliver6-criteriaMap-core b{
  display: block;
  margin-bottom: 3px;
  color: #173252;
  font-size: 13px;
  line-height: 1.14;
}

body.svc-expansion .expDeliver6-criteriaMap-core small{
  display: block;
  color: rgba(16,35,59,.62);
  font-size: 10.5px;
  line-height: 1.18;
}

/* no incluye sube y alinea mejor */
body.svc-expansion .expDeliver6-noBox{
  margin-top: 0;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expDeliver6-preview{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expDeliver6-criteriaMap-top{
    grid-template-columns: 1fr 1fr;
  }

  body.svc-expansion .expDeliver6-scenarioStrip{
    position: static;
    margin-top: 8px;
    bottom: auto;
  }
}
/* =========================================================
   EXPANSION — PROCESO
   estilo editorial / cards como referencia
========================================================= */

body.svc-expansion .expProcCards{
  padding: 78px 0 84px;
  background:
    radial-gradient(760px 220px at 8% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(700px 240px at 100% 10%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.svc-expansion .expProcCards-head{
  max-width: 980px;
  margin-bottom: 24px;
}

body.svc-expansion .expProcCards-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 18px;
}

/* layout como la referencia */
body.svc-expansion .expProcCards-card--hero{
  grid-column: span 5;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2){
  grid-column: span 7;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3),
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4),
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
  grid-column: span 4;
}

/* card base */
body.svc-expansion .expProcCards-card{
  padding: 28px 28px 26px;
  border-radius: 30px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.95));
  box-shadow:
    0 16px 32px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
  min-height: 250px;
}

body.svc-expansion .expProcCards-card--hero{
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(102,150,231,.18), transparent 72%),
    linear-gradient(145deg, #17355f 0%, #204a86 52%, #315e9f 100%);
  border-color: rgba(66,115,205,.24);
  box-shadow:
    0 24px 42px rgba(8,24,52,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* top */
body.svc-expansion .expProcCards-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

body.svc-expansion .expProcCards-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(46,96,200,.08);
  border: 1px solid rgba(46,96,200,.12);
  color: #2e60c8;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}

body.svc-expansion .expProcCards-pill{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(15,34,63,.04);
  border: 1px solid rgba(15,34,63,.07);
  color: rgba(16,35,59,.70);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.svc-expansion .expProcCards-card--hero .expProcCards-num{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}

body.svc-expansion .expProcCards-card--hero .expProcCards-pill{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.84);
}

/* text */
body.svc-expansion .expProcCards-card h3{
  margin: 0 0 14px;
  color: #10233b;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 95%;
}

body.svc-expansion .expProcCards-card p{
  margin: 0;
  color: rgba(16,35,59,.72);
  font-size: 16px;
  line-height: 1.48;
  max-width: 92%;
}

body.svc-expansion .expProcCards-card--hero h3{
  color: #fff;
  font-size: clamp(26px, 2.35vw, 40px);
  max-width: 92%;
}

body.svc-expansion .expProcCards-card--hero p{
  color: rgba(255,255,255,.84);
  max-width: 88%;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expProcCards-grid{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expProcCards-card--hero,
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
    grid-column: auto;
  }

  body.svc-expansion .expProcCards-card{
    min-height: auto;
  }

  body.svc-expansion .expProcCards-top{
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.svc-expansion .expProcCards-pill{
    white-space: normal;
  }
}
/* =========================================================
   EXPANSION — PROCESO
   3 cards arriba / 2 abajo
   card 5 larga + azul
========================================================= */

/* fila superior: 1, 2 y 3 */
body.svc-expansion .expProcCards-grid{
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1),
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2),
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3){
  grid-column: span 4;
}

/* fila inferior: 4 y 5 */
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4){
  grid-column: span 4;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
  grid-column: span 8;
}

/* card 1 deja de ser la azul */
body.svc-expansion .expProcCards-card--hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.95));
  border-color: rgba(15,34,63,.08);
  box-shadow:
    0 16px 32px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expProcCards-card--hero .expProcCards-num{
  background: rgba(46,96,200,.08);
  border-color: rgba(46,96,200,.12);
  color: #2e60c8;
}

body.svc-expansion .expProcCards-card--hero .expProcCards-pill{
  background: rgba(15,34,63,.04);
  border-color: rgba(15,34,63,.07);
  color: rgba(16,35,59,.70);
}

body.svc-expansion .expProcCards-card--hero h3{
  color: #10233b;
  font-size: clamp(22px, 2vw, 30px);
  max-width: 95%;
}

body.svc-expansion .expProcCards-card--hero p{
  color: rgba(16,35,59,.72);
  max-width: 92%;
}

/* card 5 ahora es la protagonista azul */
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(102,150,231,.18), transparent 72%),
    linear-gradient(145deg, #17355f 0%, #204a86 52%, #315e9f 100%);
  border-color: rgba(66,115,205,.24);
  box-shadow:
    0 24px 42px rgba(8,24,52,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5)::before{
  background: linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.08));
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) .expProcCards-num{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) .expProcCards-pill{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.84);
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) h3{
  color: #fff;
  font-size: clamp(26px, 2.3vw, 38px);
  line-height: 1.03;
  max-width: 88%;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) p{
  color: rgba(255,255,255,.84);
  max-width: 78%;
}

/* para que la card 5 se sienta más larga y más premium */
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expProcCards-grid{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
    grid-column: auto;
  }

  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) p{
    max-width: 100%;
  }
}
/* =========================================================
   EXPANSION — PROCESO
   3 arriba pequeñas / 2 abajo grandes
========================================================= */

/* -----------------------------
   FILA SUPERIOR = 1, 2, 3
   Más chicas, como la referencia
----------------------------- */
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1),
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2),
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3){
  min-height: 250px;
  padding: 24px 24px 22px;
  border-radius: 28px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) .expProcCards-top,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) .expProcCards-top,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) .expProcCards-top{
  margin-bottom: 18px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) .expProcCards-num,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) .expProcCards-num,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) .expProcCards-num{
  width: 42px;
  height: 42px;
  border-radius: 15px;
  font-size: 17px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) .expProcCards-pill,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) .expProcCards-pill,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) .expProcCards-pill{
  min-height: 38px;
  padding: 0 14px;
  font-size: 10px;
  letter-spacing: .15em;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) h3,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) h3,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) h3{
  font-size: clamp(22px, 1.9vw, 31px);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 10px;
  max-width: 94%;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) p,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) p,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) p{
  font-size: 15px;
  line-height: 1.42;
  max-width: 92%;
}

/* card 1 deja de verse grande */
body.svc-expansion .expProcCards-card--hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.95));
  border-color: rgba(15,34,63,.08);
  box-shadow:
    0 16px 32px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expProcCards-card--hero .expProcCards-num{
  background: rgba(46,96,200,.08);
  border-color: rgba(46,96,200,.12);
  color: #2e60c8;
}

body.svc-expansion .expProcCards-card--hero .expProcCards-pill{
  background: rgba(15,34,63,.04);
  border-color: rgba(15,34,63,.07);
  color: rgba(16,35,59,.70);
}

body.svc-expansion .expProcCards-card--hero h3{
  color: #10233b;
}

body.svc-expansion .expProcCards-card--hero p{
  color: rgba(16,35,59,.72);
}

/* -----------------------------
   FILA INFERIOR = 4 y 5
   Más grandes
----------------------------- */
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4),
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
  min-height: 300px;
  padding: 30px 30px 28px;
  border-radius: 32px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) .expProcCards-top,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) .expProcCards-top{
  margin-bottom: 24px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) .expProcCards-num,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) .expProcCards-num{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: 20px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) .expProcCards-pill,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) .expProcCards-pill{
  min-height: 44px;
  padding: 0 18px;
  font-size: 11px;
  letter-spacing: .16em;
}

/* card 4 grande blanca */
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) h3{
  font-size: clamp(28px, 2.35vw, 40px);
  line-height: 1.03;
  letter-spacing: -.04em;
  margin-bottom: 14px;
  max-width: 92%;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) p{
  font-size: 17px;
  line-height: 1.5;
  max-width: 88%;
}

/* card 5 grande azul */
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(102,150,231,.18), transparent 72%),
    linear-gradient(145deg, #17355f 0%, #204a86 52%, #315e9f 100%);
  border-color: rgba(66,115,205,.24);
  box-shadow:
    0 24px 42px rgba(8,24,52,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5)::before{
  background: linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.08));
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) .expProcCards-num{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) .expProcCards-pill{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.84);
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) h3{
  color: #fff;
  font-size: clamp(28px, 2.35vw, 40px);
  line-height: 1.03;
  letter-spacing: -.04em;
  margin-bottom: 14px;
  max-width: 84%;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) p{
  color: rgba(255,255,255,.84);
  font-size: 17px;
  line-height: 1.5;
  max-width: 76%;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4),
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
    min-height: auto;
    padding: 22px;
  }

  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) h3,
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) h3,
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) h3,
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) h3,
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) h3{
    max-width: 100%;
  }

  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) p,
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) p,
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) p,
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) p,
  body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) p{
    max-width: 100%;
  }
}
/* =========================================
   EXPANSION — PROCESO
   compactar cards 4 y 5 en vertical
========================================= */

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4),
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
  min-height: 248px;
  padding: 24px 26px 22px;
  border-radius: 28px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) .expProcCards-top,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) .expProcCards-top{
  margin-bottom: 18px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) .expProcCards-num,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) .expProcCards-num{
  width: 44px;
  height: 44px;
  border-radius: 15px;
  font-size: 18px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) .expProcCards-pill,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) .expProcCards-pill{
  min-height: 40px;
  padding: 0 16px;
  font-size: 10px;
}

/* card 4 */
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) h3{
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.03;
  margin-bottom: 10px;
  max-width: 90%;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(4) p{
  font-size: 15px;
  line-height: 1.42;
  max-width: 86%;
}

/* card 5 */
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5){
  justify-content: flex-start;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) h3{
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.03;
  margin-bottom: 10px;
  max-width: 80%;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(5) p{
  font-size: 15px;
  line-height: 1.42;
  max-width: 72%;
}
/* =========================================
   EXPANSION — PROCESO
   compactar ligeramente cards 1, 2 y 3
========================================= */

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1),
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2),
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3){
  min-height: 228px;
  padding: 21px 22px 20px;
  border-radius: 26px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) .expProcCards-top,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) .expProcCards-top,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) .expProcCards-top{
  margin-bottom: 15px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) .expProcCards-num,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) .expProcCards-num,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) .expProcCards-num{
  width: 38px;
  height: 38px;
  border-radius: 13px;
  font-size: 16px;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) .expProcCards-pill,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) .expProcCards-pill,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) .expProcCards-pill{
  min-height: 34px;
  padding: 0 13px;
  font-size: 9.5px;
  letter-spacing: .14em;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) h3,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) h3,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) h3{
  font-size: clamp(20px, 1.75vw, 28px);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin-bottom: 8px;
  max-width: 94%;
}

body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(1) p,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(2) p,
body.svc-expansion .expProcCards-grid > .expProcCards-card:nth-child(3) p{
  font-size: 14px;
  line-height: 1.36;
  max-width: 92%;
}
/* =========================
   EXPANSION — LO QUE CAMBIA
========================= */

body.svc-expansion .shiftLens{
  padding: 82px 0 88px;
  background:
    radial-gradient(760px 220px at 8% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(700px 240px at 100% 10%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.svc-expansion .shiftLens-head{
  max-width: 980px;
  margin-bottom: 22px;
}

body.svc-expansion .shiftLens-input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.svc-expansion .shiftLens-nav{
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(239,245,251,.94));
  box-shadow:
    0 12px 24px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
  margin-bottom: 18px;
}

body.svc-expansion .shiftLens-tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(15,34,63,.06);
  background: rgba(15,34,63,.04);
  color: rgba(16,35,59,.72);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: .22s ease;
}

body.svc-expansion #shiftLens-before:checked ~ .shiftLens-nav label[for="shiftLens-before"],
body.svc-expansion #shiftLens-rules:checked ~ .shiftLens-nav label[for="shiftLens-rules"],
body.svc-expansion #shiftLens-result:checked ~ .shiftLens-nav label[for="shiftLens-result"]{
  background: rgba(46,96,200,.08);
  border-color: rgba(46,96,200,.14);
  color: #2e60c8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

body.svc-expansion .shiftLens-stage{
  position: relative;
}

body.svc-expansion .shiftLens-panel{
  display: none;
  padding: 28px;
  border-radius: 32px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(98,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.95));
  box-shadow:
    0 20px 38px rgba(15,34,63,.07),
    inset 0 1px 0 rgba(255,255,255,.58);
}

body.svc-expansion #shiftLens-before:checked ~ .shiftLens-stage .shiftLens-panel--before,
body.svc-expansion #shiftLens-rules:checked ~ .shiftLens-stage .shiftLens-panel--rules,
body.svc-expansion #shiftLens-result:checked ~ .shiftLens-stage .shiftLens-panel--result{
  display: block;
}

body.svc-expansion .shiftLens-panelGrid{
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 22px;
  align-items: start;
}

body.svc-expansion .shiftLens-eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(46,96,200,.08);
  border: 1px solid rgba(46,96,200,.12);
  color: #2e60c8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

body.svc-expansion .shiftLens-main h3{
  margin: 0 0 10px;
  color: #10233b;
  font-size: clamp(28px, 2.3vw, 42px);
  line-height: 1.02;
  letter-spacing: -.04em;
  max-width: 92%;
}

body.svc-expansion .shiftLens-main p{
  margin: 0 0 16px;
  color: rgba(16,35,59,.72);
  font-size: 17px;
  line-height: 1.46;
  max-width: 92%;
}

/* tiles / framework / outcomes */
body.svc-expansion .shiftLens-tiles,
body.svc-expansion .shiftLens-framework,
body.svc-expansion .shiftLens-outcomes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

body.svc-expansion .shiftLens-tile,
body.svc-expansion .shiftLens-fw,
body.svc-expansion .shiftLens-outcome{
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,246,251,.88));
  box-shadow:
    0 10px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .shiftLens-tiles .shiftLens-tile:last-child,
body.svc-expansion .shiftLens-framework .shiftLens-fw:last-child,
body.svc-expansion .shiftLens-outcomes .shiftLens-outcome:last-child{
  grid-column: 1 / -1;
}

body.svc-expansion .shiftLens-tile b,
body.svc-expansion .shiftLens-fw b,
body.svc-expansion .shiftLens-outcome b{
  display: block;
  margin-bottom: 4px;
  color: #173252;
  font-size: 15px;
  line-height: 1.16;
}

body.svc-expansion .shiftLens-fw span{
  display: block;
  margin-bottom: 4px;
  color: rgba(16,35,59,.56);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.svc-expansion .shiftLens-tile span,
body.svc-expansion .shiftLens-outcome span{
  display: block;
  color: rgba(16,35,59,.66);
  font-size: 13px;
  line-height: 1.28;
}

/* right side */
body.svc-expansion .shiftLens-sideCard{
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,247,252,.92));
  box-shadow:
    0 12px 22px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .shiftLens-sideCard--soft{
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(96,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(239,245,251,.94));
}

body.svc-expansion .shiftLens-sideCard--result{
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(102,150,231,.18), transparent 72%),
    linear-gradient(145deg, #17355f 0%, #204a86 52%, #315e9f 100%);
  border-color: rgba(66,115,205,.24);
  box-shadow:
    0 18px 32px rgba(8,24,52,.14),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.svc-expansion .shiftLens-sideK{
  display: block;
  margin-bottom: 14px;
  color: rgba(16,35,59,.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .shiftLens-sideCard--result .shiftLens-sideK{
  color: rgba(255,255,255,.68);
}

body.svc-expansion .shiftLens-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 12px;
}

body.svc-expansion .shiftLens-list li{
  color: rgba(16,35,59,.72);
  font-size: 14px;
  line-height: 1.4;
}

body.svc-expansion .shiftLens-list li b{
  color: #173252;
}

body.svc-expansion .shiftLens-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.svc-expansion .shiftLens-badges span{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1100px){
  body.svc-expansion .shiftLens-panelGrid,
  body.svc-expansion .shiftLens-tiles,
  body.svc-expansion .shiftLens-framework,
  body.svc-expansion .shiftLens-outcomes{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .shiftLens-nav{
    width: 100%;
    grid-template-columns: 1fr;
  }

  body.svc-expansion .shiftLens-main h3,
  body.svc-expansion .shiftLens-main p{
    max-width: 100%;
  }
}
/* =========================================
   EXPANSION — LO QUE CAMBIA
   pulido / compactar / igualar alturas
========================================= */

body.svc-expansion .shiftLens{
  padding: 72px 0 78px;
}

body.svc-expansion .shiftLens-head{
  margin-bottom: 18px;
}

body.svc-expansion .shiftLens-head .svc-title{
  margin-bottom: 10px;
}

body.svc-expansion .shiftLens-head .svc-lead{
  margin-bottom: 0;
}

/* tabs más compactos */
body.svc-expansion .shiftLens-nav{
  gap: 8px;
  padding: 8px;
  margin-bottom: 14px;
}

body.svc-expansion .shiftLens-tab{
  min-height: 40px;
  padding: 0 18px;
  font-size: 12px;
}

/* paneles: mismo alto visual */
body.svc-expansion .shiftLens-stage{
  position: relative;
}

body.svc-expansion .shiftLens-panel{
  padding: 22px;
  border-radius: 28px;
  min-height: 510px;
  background:
    radial-gradient(260px 120px at 100% 0%, rgba(98,144,228,.12), transparent 72%),
    linear-gradient(180deg, rgba(252,253,255,.98), rgba(238,244,250,.95));
  box-shadow:
    0 16px 30px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.60);
}

body.svc-expansion .shiftLens-panelGrid{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 16px;
  min-height: 466px;
  align-items: stretch;
}

body.svc-expansion .shiftLens-main,
body.svc-expansion .shiftLens-side{
  min-height: 100%;
}

body.svc-expansion .shiftLens-main{
  display: flex;
  flex-direction: column;
}

body.svc-expansion .shiftLens-side{
  display: flex;
}

body.svc-expansion .shiftLens-sideCard{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,246,251,.90));
}

body.svc-expansion .shiftLens-sideCard--soft{
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(96,144,228,.12), transparent 72%),
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(239,245,251,.94));
}

body.svc-expansion .shiftLens-sideCard--result{
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(102,150,231,.20), transparent 72%),
    linear-gradient(145deg, #17355f 0%, #204a86 52%, #315e9f 100%);
}

/* copy más compacto y con más fuerza */
body.svc-expansion .shiftLens-eyebrow{
  margin-bottom: 12px;
}

body.svc-expansion .shiftLens-main h3{
  margin: 0 0 8px;
  font-size: clamp(24px, 2.1vw, 36px);
  line-height: 1.02;
  max-width: 96%;
}

body.svc-expansion .shiftLens-main p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.42;
  max-width: 96%;
}

/* grids internas más apretadas y mejor llenadas */
body.svc-expansion .shiftLens-tiles,
body.svc-expansion .shiftLens-framework,
body.svc-expansion .shiftLens-outcomes{
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.svc-expansion .shiftLens-tile,
body.svc-expansion .shiftLens-fw,
body.svc-expansion .shiftLens-outcome{
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,245,250,.88));
  box-shadow:
    0 8px 16px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.56);
}

body.svc-expansion .shiftLens-tile--impact,
body.svc-expansion .shiftLens-fw--wide,
body.svc-expansion .shiftLens-outcome--impact{
  grid-column: 1 / -1;
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(96,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(246,250,255,.96), rgba(236,243,250,.92));
}

body.svc-expansion .shiftLens-tile b,
body.svc-expansion .shiftLens-fw b,
body.svc-expansion .shiftLens-outcome b{
  font-size: 14px;
  line-height: 1.14;
  margin-bottom: 4px;
}

body.svc-expansion .shiftLens-fw span{
  margin-bottom: 4px;
  font-size: 9px;
}

body.svc-expansion .shiftLens-tile span,
body.svc-expansion .shiftLens-outcome span{
  font-size: 12px;
  line-height: 1.24;
}

/* side */
body.svc-expansion .shiftLens-sideK{
  margin-bottom: 12px;
  font-size: 9px;
}

body.svc-expansion .shiftLens-list{
  gap: 10px;
  margin: 0 0 12px;
}

body.svc-expansion .shiftLens-list li{
  font-size: 13px;
  line-height: 1.34;
}

body.svc-expansion .shiftLens-sideNote{
  margin-top: auto;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(242,247,252,.84));
}

body.svc-expansion .shiftLens-sideNote b{
  display: block;
  margin-bottom: 4px;
  color: #173252;
  font-size: 13px;
  line-height: 1.14;
}

body.svc-expansion .shiftLens-sideNote span{
  display: block;
  color: rgba(16,35,59,.66);
  font-size: 12px;
  line-height: 1.24;
}

body.svc-expansion .shiftLens-sideNote--result{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.10);
}

body.svc-expansion .shiftLens-sideNote--result b{
  color: #fff;
}

body.svc-expansion .shiftLens-sideNote--result span{
  color: rgba(255,255,255,.78);
}

body.svc-expansion .shiftLens-badges{
  gap: 8px;
  margin-bottom: 12px;
}

body.svc-expansion .shiftLens-badges span{
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
}

/* responsive */
@media (max-width: 1100px){
  body.svc-expansion .shiftLens-panel{
    min-height: auto;
    padding: 18px;
  }

  body.svc-expansion .shiftLens-panelGrid{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  body.svc-expansion .shiftLens-main h3,
  body.svc-expansion .shiftLens-main p{
    max-width: 100%;
  }

  body.svc-expansion .shiftLens-tiles,
  body.svc-expansion .shiftLens-framework,
  body.svc-expansion .shiftLens-outcomes{
    grid-template-columns: 1fr;
    margin-top: 0;
  }
}
/* =========================================
   LO QUE CAMBIA — llenar mejor paneles derechos
========================================= */

body.svc-expansion .shiftLens-sideCard{
  justify-content: flex-start;
  gap: 0;
}

body.svc-expansion .shiftLens-sideBlock{
  margin-top: 2px;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(242,247,252,.84));
}

body.svc-expansion .shiftLens-sideBlock--result{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.10);
}

body.svc-expansion .shiftLens-sideBlockK{
  display: block;
  margin-bottom: 10px;
  color: rgba(16,35,59,.56);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .shiftLens-sideBlock--result .shiftLens-sideBlockK{
  color: rgba(255,255,255,.68);
}

body.svc-expansion .shiftLens-sideRows{
  display: grid;
  gap: 8px;
}

body.svc-expansion .shiftLens-sideRow{
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(15,34,63,.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(240,245,250,.86));
}

body.svc-expansion .shiftLens-sideRow--result{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.08);
}

body.svc-expansion .shiftLens-sideRow b{
  display: block;
  margin-bottom: 3px;
  color: #173252;
  font-size: 12px;
  line-height: 1.14;
}

body.svc-expansion .shiftLens-sideRow span{
  display: block;
  color: rgba(16,35,59,.66);
  font-size: 11px;
  line-height: 1.18;
}

body.svc-expansion .shiftLens-sideRow--result b{
  color: #fff;
}

body.svc-expansion .shiftLens-sideRow--result span{
  color: rgba(255,255,255,.76);
}

body.svc-expansion .shiftLens-sideNote{
  margin-top: auto;
}
/* =========================================
   LO QUE CAMBIA
   ajustar spans + cards azules inferiores
========================================= */

/* 1) Panel ANTES:
   "Decisión reactiva" a lo ancho */
body.svc-expansion .shiftLens-panel--before .shiftLens-tiles .shiftLens-tile:nth-child(3){
  grid-column: 1 / -1;
}

/* 2) Panel RESULTADO:
   la 3ra card también a lo ancho */
body.svc-expansion .shiftLens-panel--result .shiftLens-outcomes .shiftLens-outcome:nth-child(3){
  grid-column: 1 / -1;
}

/* 3) Las cards inferiores especiales de los 3 paneles en azul */
body.svc-expansion .shiftLens-tile--impact,
body.svc-expansion .shiftLens-fw--wide,
body.svc-expansion .shiftLens-outcome--impact{
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(102,150,231,.18), transparent 72%),
    linear-gradient(145deg, #17355f 0%, #204a86 52%, #315e9f 100%) !important;
  border-color: rgba(66,115,205,.24) !important;
  box-shadow:
    0 18px 32px rgba(8,24,52,.14),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* 4) Texto blanco dentro de esas cards azules */
body.svc-expansion .shiftLens-tile--impact b,
body.svc-expansion .shiftLens-fw--wide b,
body.svc-expansion .shiftLens-outcome--impact b{
  color: #fff !important;
}

body.svc-expansion .shiftLens-tile--impact span,
body.svc-expansion .shiftLens-outcome--impact span{
  color: rgba(255,255,255,.80) !important;
}

body.svc-expansion .shiftLens-fw--wide span{
  color: rgba(255,255,255,.68) !important;
}

/* 5) Un poco más de presencia para esas cards azules */
body.svc-expansion .shiftLens-tile--impact,
body.svc-expansion .shiftLens-fw--wide,
body.svc-expansion .shiftLens-outcome--impact{
  padding: 16px 18px;
  border-radius: 18px;
}
/* =========================================
   LO QUE CAMBIA
   tabs: mismo tamaño, solo color + centrados
========================================= */

/* contenedor centrado */
body.svc-expansion .shiftLens-tabs{
  text-align: center;
}

body.svc-expansion .shiftLens-nav{
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px;
  padding: 10px;
  margin: 0 auto 18px;
  border-radius: 999px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(239,245,251,.94));
  box-shadow:
    0 12px 24px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* quitamos el texto extra para no mover alturas */
body.svc-expansion .shiftLens-nav::after{
  display: none;
}

/* mismo tamaño base, solo mejor color y feedback */
body.svc-expansion .shiftLens-tab{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(15,34,63,.06);
  background: rgba(15,34,63,.04);
  color: rgba(16,35,59,.72);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  box-shadow:
    0 6px 14px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.62);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

body.svc-expansion .shiftLens-tab::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(46,96,200,.34);
  box-shadow: 0 0 0 5px rgba(46,96,200,.10);
  transition: .18s ease;
}

body.svc-expansion .shiftLens-tab:hover{
  border-color: rgba(46,96,200,.18);
  box-shadow:
    0 10px 18px rgba(15,34,63,.08),
    inset 0 1px 0 rgba(255,255,255,.66);
}

body.svc-expansion #shiftLens-before:checked ~ .shiftLens-nav label[for="shiftLens-before"],
body.svc-expansion #shiftLens-rules:checked ~ .shiftLens-nav label[for="shiftLens-rules"],
body.svc-expansion #shiftLens-result:checked ~ .shiftLens-nav label[for="shiftLens-result"]{
  background:
    radial-gradient(180px 70px at 100% 0%, rgba(111,156,236,.18), transparent 72%),
    linear-gradient(180deg, rgba(231,240,255,.98), rgba(218,231,249,.94));
  border-color: rgba(46,96,200,.18);
  color: #1f4d9d;
  box-shadow:
    0 10px 18px rgba(46,96,200,.10),
    inset 0 1px 0 rgba(255,255,255,.72);
}

body.svc-expansion #shiftLens-before:checked ~ .shiftLens-nav label[for="shiftLens-before"]::before,
body.svc-expansion #shiftLens-rules:checked ~ .shiftLens-nav label[for="shiftLens-rules"]::before,
body.svc-expansion #shiftLens-result:checked ~ .shiftLens-nav label[for="shiftLens-result"]::before{
  background: #4a7fe0;
  box-shadow: 0 0 0 6px rgba(74,127,224,.16);
}
/* =========================================
   LO QUE CAMBIA
   centrar solo los botones, no toda la sección
========================================= */

/* devolver alineación normal a la sección */
body.svc-expansion .shiftLens-tabs{
  text-align: left;
}

/* centrar únicamente la barra de botones */
body.svc-expansion .shiftLens-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto 18px;
}

/* por si algún texto interno se había centrado de más */
body.svc-expansion .shiftLens-stage,
body.svc-expansion .shiftLens-panel,
body.svc-expansion .shiftLens-head{
  text-align: left;
}
/* =========================================
   FIX FUERTE — colores visibles en cuadros derechos
========================================= */

/* ---------- ANTES ---------- */
body.svc-expansion .shiftLens-panel--before .shiftLens-sideCard{
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(223,176,92,.22), transparent 72%),
    linear-gradient(180deg, #fff9ef 0%, #f7efe2 100%) !important;
  border-color: rgba(197,157,86,.18) !important;
  box-shadow:
    0 14px 26px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.60) !important;
}

body.svc-expansion .shiftLens-panel--before .shiftLens-sideK{
  color: #8a5b11 !important;
}

body.svc-expansion .shiftLens-panel--before .shiftLens-list li{
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(250,241,226,.88)) !important;
  border-color: rgba(197,157,86,.16) !important;
}

body.svc-expansion .shiftLens-panel--before .shiftLens-list li::before{
  background: #d79a35 !important;
}

body.svc-expansion .shiftLens-panel--before .shiftLens-sideBlock{
  background:
    radial-gradient(140px 60px at 100% 0%, rgba(223,176,92,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,241,227,.88)) !important;
  border-color: rgba(197,157,86,.16) !important;
}

body.svc-expansion .shiftLens-panel--before .shiftLens-sideRow{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,240,225,.90)) !important;
  border-color: rgba(197,157,86,.14) !important;
}

body.svc-expansion .shiftLens-panel--before .shiftLens-sideNote{
  background:
    radial-gradient(140px 60px at 100% 0%, rgba(223,176,92,.14), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,241,227,.88)) !important;
  border-color: rgba(197,157,86,.16) !important;
}

/* ---------- CON REGLAS ---------- */
body.svc-expansion .shiftLens-panel--rules .shiftLens-sideCard{
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(102,150,231,.24), transparent 72%),
    linear-gradient(180deg, #f3f8ff 0%, #e6effb 100%) !important;
  border-color: rgba(92,136,216,.18) !important;
  box-shadow:
    0 14px 28px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

body.svc-expansion .shiftLens-panel--rules .shiftLens-sideK{
  color: #2f61c8 !important;
}

body.svc-expansion .shiftLens-panel--rules .shiftLens-list li{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(233,242,252,.90)) !important;
  border-color: rgba(92,136,216,.16) !important;
}

body.svc-expansion .shiftLens-panel--rules .shiftLens-list li::before{
  background: #5f8fe2 !important;
}

body.svc-expansion .shiftLens-panel--rules .shiftLens-sideBlock{
  background:
    radial-gradient(140px 60px at 100% 0%, rgba(102,150,231,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(232,241,251,.90)) !important;
  border-color: rgba(92,136,216,.16) !important;
}

body.svc-expansion .shiftLens-panel--rules .shiftLens-sideRow{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(232,241,251,.90)) !important;
  border-color: rgba(92,136,216,.14) !important;
}

body.svc-expansion .shiftLens-panel--rules .shiftLens-sideNote{
  background:
    radial-gradient(140px 60px at 100% 0%, rgba(102,150,231,.14), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,241,251,.88)) !important;
  border-color: rgba(92,136,216,.16) !important;
}
/* =========================================
   FIX — quitar cajas raras detrás del texto
========================================= */

/* ANTES */
body.svc-expansion .shiftLens-panel--before .shiftLens-list li{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0 18px !important;
  border-radius: 0 !important;
}

body.svc-expansion .shiftLens-panel--before .shiftLens-list li::before{
  left: 0 !important;
  top: 10px !important;
}

/* CON REGLAS */
body.svc-expansion .shiftLens-panel--rules .shiftLens-list li{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0 18px !important;
  border-radius: 0 !important;
}

body.svc-expansion .shiftLens-panel--rules .shiftLens-list li::before{
  left: 0 !important;
  top: 10px !important;
}

/* mantenemos respiración limpia */
body.svc-expansion .shiftLens-list{
  gap: 12px !important;
}
/* =========================================
   EXPANSION — INFO MÍNIMA / PARA INICIAR
========================================= */

body.svc-expansion .expStart3{
  padding: 82px 0 88px;
  background:
    radial-gradient(760px 220px at 8% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(700px 240px at 100% 10%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.svc-expansion .expStart3-head{
  max-width: 980px;
  margin-bottom: 22px;
}

body.svc-expansion .expStart3-grid{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 20px;
  align-items: stretch;
}

body.svc-expansion .expStart3-card{
  position: relative;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(98,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.95));
  box-shadow:
    0 18px 34px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.58);
}

body.svc-expansion .expStart3-card::before{
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #85acef, rgba(133,172,239,.14));
}

body.svc-expansion .expStart3-cardTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

body.svc-expansion .expStart3-chip,
body.svc-expansion .expStart3-badge{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,34,63,.08);
  background: rgba(15,34,63,.04);
  color: rgba(16,35,59,.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.svc-expansion .expStart3-badge{
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}

body.svc-expansion .expStart3-card h3{
  margin: 0 0 10px;
  color: #10233b;
  font-size: clamp(25px, 2.1vw, 36px);
  line-height: 1.03;
  letter-spacing: -.035em;
  max-width: 92%;
}

body.svc-expansion .expStart3-intro{
  margin: 0 0 16px;
  color: rgba(16,35,59,.72);
  font-size: 15px;
  line-height: 1.42;
  max-width: 92%;
}

/* IZQUIERDA */
body.svc-expansion .expStart3-reqs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

body.svc-expansion .expStart3-req{
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,245,250,.88));
  box-shadow:
    0 10px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.56);
}

body.svc-expansion .expStart3-req--wide{
  grid-column: 1 / -1;
  background:
    radial-gradient(160px 70px at 100% 0%, rgba(96,144,228,.10), transparent 72%),
    linear-gradient(180deg, rgba(246,250,255,.96), rgba(236,243,250,.92));
}

body.svc-expansion .expStart3-reqK{
  display: block;
  margin-bottom: 6px;
  color: rgba(16,35,59,.56);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

body.svc-expansion .expStart3-req b{
  display: block;
  margin-bottom: 4px;
  color: #173252;
  font-size: 14px;
  line-height: 1.18;
}

body.svc-expansion .expStart3-req small{
  display: block;
  color: rgba(16,35,59,.66);
  font-size: 12px;
  line-height: 1.24;
}

/* DERECHA */
body.svc-expansion .expStart3-side{
  display: flex;
}

body.svc-expansion .expStart3-card--side{
  width: 100%;
  display: flex;
  flex-direction: column;
}

body.svc-expansion .expStart3-steps{
  display: grid;
  gap: 10px;
  margin: 4px 0 14px;
}

body.svc-expansion .expStart3-step{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,245,250,.88));
  box-shadow:
    0 8px 16px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.56);
}

body.svc-expansion .expStart3-stepNum{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(46,96,200,.08);
  border: 1px solid rgba(46,96,200,.12);
  color: #2e60c8;
  font-size: 16px;
  font-weight: 800;
}

body.svc-expansion .expStart3-step b{
  display: block;
  margin-bottom: 3px;
  color: #173252;
  font-size: 14px;
  line-height: 1.16;
}

body.svc-expansion .expStart3-step small{
  display: block;
  color: rgba(16,35,59,.66);
  font-size: 12px;
  line-height: 1.22;
}

body.svc-expansion .expStart3-note{
  margin-top: auto;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(46,96,200,.12);
  background:
    radial-gradient(160px 70px at 100% 0%, rgba(102,150,231,.12), transparent 72%),
    linear-gradient(180deg, rgba(246,250,255,.96), rgba(236,243,250,.92));
}

body.svc-expansion .expStart3-note b{
  display: block;
  margin-bottom: 4px;
  color: #173252;
  font-size: 14px;
  line-height: 1.16;
}

body.svc-expansion .expStart3-note span{
  display: block;
  color: rgba(16,35,59,.68);
  font-size: 12.5px;
  line-height: 1.26;
}

body.svc-expansion .expStart3-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

/* STRIP ABAJO */
body.svc-expansion .expStart3-strip{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,34,63,.08);
  background:
    linear-gradient(180deg, rgba(248,251,254,.98), rgba(239,245,251,.94));
  box-shadow:
    0 12px 24px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
}

body.svc-expansion .expStart3-stripCopy{
  color: rgba(16,35,59,.72);
  font-size: 14px;
  line-height: 1.34;
}

body.svc-expansion .expStart3-stripCopy b{
  color: #10233b;
}

body.svc-expansion .expStart3-stripTags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.svc-expansion .expStart3-stripTags span{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(15,34,63,.05);
  border: 1px solid rgba(15,34,63,.08);
  color: #173252;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1100px){
  body.svc-expansion .expStart3-grid,
  body.svc-expansion .expStart3-strip{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expStart3-reqs{
    grid-template-columns: 1fr;
  }

  body.svc-expansion .expStart3-card h3,
  body.svc-expansion .expStart3-intro{
    max-width: 100%;
  }
}
/* =========================================================
   HOME — QUIÉNES SOMOS
   ajuste fino: misma estructura, menos huecos, sin crecer
========================================================= */

.about-jpm{
  padding: 72px 0 78px;
}

.about-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .92fr);
  gap: 34px;
  align-items: stretch;
}

/* columna izquierda */
.about-copy{
  max-width: 700px;
}

.about-jpm .section-kicker{
  min-height: 36px;
  padding: 0 16px;
  margin-bottom: 14px;
  font-size: 11px;
}

.about-jpm .section-title{
  margin: 0 0 14px;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.01;
  letter-spacing: -.045em;
  max-width: 11ch;
}

.about-lead{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.48;
  max-width: 38ch;
}

.about-text{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.46;
  max-width: 42ch;
}

/* línea inferior menos invasiva */
.about-copy::after{
  width: 96px;
  height: 4px;
  margin-top: 18px;
}

/* cards de apoyo más compactas */
.about-highlights{
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 18px;
}

.highlight-card{
  padding: 16px 16px 15px;
  border-radius: 20px;
}

.highlight-card::before{
  left: 16px;
  right: 16px;
  top: 10px;
  height: 3px;
}

.highlight-title{
  margin: 4px 0 6px;
  font-size: 14px;
  line-height: 1.14;
}

.highlight-text{
  font-size: 13px;
  line-height: 1.36;
}

/* botones */
.about-actions{
  gap: 10px;
}

.about-actions .btn{
  min-height: 46px;
  padding: 0 20px;
}

/* columna derecha */
.about-media{
  position: relative;
  height: 100%;
  min-height: 100%;
  display: flex;
}

.about-media::before{
  inset: -10px 12px 16px -10px;
  border-radius: 28px;
}

.about-media::after{
  width: 96px;
  height: 96px;
  right: -8px;
  bottom: -6px;
  border-radius: 22px;
  filter: blur(7px);
}

/* IMPORTANTE:
   la imagen ya no se infla; llena la altura del bloque izquierdo */
.about-media img{
  width: 100%;
  height: 100%;
  min-height: 520px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 26px;
  display: block;
}

/* para que la altura visual de la imagen acompañe al texto */
.about-copy,
.about-media{
  align-self: stretch;
}

/* responsive */
@media (max-width: 1100px){
  .about-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-copy{
    max-width: 100%;
  }

  .about-jpm .section-title,
  .about-lead,
  .about-text{
    max-width: 100%;
  }

  .about-media{
    order: -1;
    height: auto;
  }

  .about-media img{
    min-height: 360px;
    height: auto;
    aspect-ratio: 1.18 / 1;
  }
}

@media (max-width: 720px){
  .about-jpm{
    padding: 64px 0 70px;
  }

  .about-highlights{
    grid-template-columns: 1fr;
  }

  .about-jpm .section-title{
    font-size: clamp(34px, 10vw, 46px);
  }

  .about-lead{
    font-size: 15px;
  }

  .about-text{
    font-size: 14px;
  }

  .about-media img{
    min-height: 300px;
  }
}
/* =========================================================
   HOME — QUIÉNES SOMOS
   corregir separación texto/imagen + chip estilo resto
========================================================= */

.about-jpm{
  padding: 68px 0 74px;
}

.about-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: 26px;
  align-items: center;
}

/* quitar sensación de que el texto quedó arrinconado */
.about-copy{
  max-width: none;
  padding-left: 4px;
}

.about-jpm .section-title{
  margin: 0 0 14px;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -.045em;
  max-width: 13ch; /* antes estaba demasiado angosto */
}

.about-lead{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.48;
  max-width: 44ch;
}

.about-text{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.46;
  max-width: 48ch;
}

.about-highlights{
  max-width: 100%;
  gap: 12px;
  margin-bottom: 18px;
}

.highlight-card{
  min-height: 124px;
}

/* chip / kicker como el resto de páginas */
.about-jpm .section-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  margin-bottom: 14px;
  border-radius: 999px;
  border: 1px solid rgba(46,96,200,.14);
  background:
    linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92));
  color: #4167bb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64);
}

/* la línea decorativa más discreta */
.about-copy::after{
  width: 88px;
  height: 4px;
  margin-top: 16px;
}

/* imagen: misma presencia visual, pero mejor alineada con el texto */
.about-media{
  display: flex;
  align-items: stretch;
  min-height: 100%;
}

.about-media img{
  width: 100%;
  height: 100%;
  min-height: 500px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 28px;
  display: block;
}

.about-media::before{
  inset: -8px 10px 12px -8px;
  border-radius: 30px;
}

.about-media::after{
  right: -6px;
  bottom: -4px;
}

/* botones un poco más pegados al bloque */
.about-actions{
  gap: 10px;
}

.about-actions .btn{
  min-height: 46px;
  padding: 0 20px;
}

/* responsive */
@media (max-width: 1100px){
  .about-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .about-copy{
    padding-left: 0;
  }

  .about-jpm .section-title{
    max-width: 100%;
  }

  .about-lead,
  .about-text{
    max-width: 100%;
  }

  .about-media{
    order: -1;
  }

  .about-media img{
    min-height: 340px;
    height: auto;
    aspect-ratio: 1.18 / 1;
  }
}
/* =========================================================
   FIX FUERTE — QUIÉNES SOMOS
   chip visible + texto más cerca de imagen + mismo formato
========================================================= */

#quienes-somos.about-jpm{
  padding: 68px 0 74px !important;
  background:
    radial-gradient(720px 220px at 8% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(620px 220px at 100% 18%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%) !important;
}

#quienes-somos.about-jpm .about-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
  gap: 20px !important;
  align-items: center !important;
}

#quienes-somos.about-jpm .about-copy{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
}

#quienes-somos.about-jpm .section-kicker{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

#quienes-somos.about-jpm .section-title{
  margin: 0 0 14px !important;
  font-size: clamp(36px, 4.3vw, 58px) !important;
  line-height: 1.01 !important;
  letter-spacing: -.045em !important;
  max-width: 10ch !important;
  color: #10233b !important;
}

#quienes-somos.about-jpm .about-lead{
  margin: 0 0 14px !important;
  font-size: 15px !important;
  line-height: 1.48 !important;
  max-width: 42ch !important;
  color: rgba(16,35,59,.82) !important;
}

#quienes-somos.about-jpm .about-text{
  margin: 0 0 18px !important;
  font-size: 14px !important;
  line-height: 1.46 !important;
  max-width: 46ch !important;
  color: rgba(16,35,59,.68) !important;
}

#quienes-somos.about-jpm .about-highlights{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
}

#quienes-somos.about-jpm .highlight-card{
  min-height: 124px !important;
  padding: 16px 16px 15px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  background:
    radial-gradient(180px 70px at 100% 0%, rgba(98,144,228,.08), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,246,251,.94)) !important;
  box-shadow:
    0 16px 28px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

#quienes-somos.about-jpm .highlight-title{
  margin: 0 0 6px !important;
  color: #173252 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
}

#quienes-somos.about-jpm .highlight-text{
  color: rgba(16,35,59,.68) !important;
  font-size: 13px !important;
  line-height: 1.36 !important;
}

#quienes-somos.about-jpm .about-actions{
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#quienes-somos.about-jpm .about-actions .btn{
  min-height: 46px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
}

#quienes-somos.about-jpm .about-media{
  display: flex !important;
  align-items: stretch !important;
  min-height: 100% !important;
}

#quienes-somos.about-jpm .about-media img{
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 28px !important;
  display: block !important;
  box-shadow:
    0 24px 42px rgba(15,34,63,.09),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

@media (max-width: 1100px){
  #quienes-somos.about-jpm .about-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #quienes-somos.about-jpm .about-media{
    order: -1 !important;
  }

  #quienes-somos.about-jpm .section-title,
  #quienes-somos.about-jpm .about-lead,
  #quienes-somos.about-jpm .about-text{
    max-width: 100% !important;
  }

  #quienes-somos.about-jpm .about-media img{
    min-height: 340px !important;
    height: auto !important;
    aspect-ratio: 1.18 / 1 !important;
  }
}
/* =========================================================
   HOME — QUIÉNES SOMOS
   cerrar hueco texto/imagen + CTAs con presencia real
========================================================= */

#quienes-somos.about-jpm .about-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* columna izquierda más aprovechada */
#quienes-somos.about-jpm .about-copy{
  max-width: none !important;
  width: 100% !important;
  padding-right: 6px !important;
}

#quienes-somos.about-jpm .section-title{
  max-width: 12ch !important;
  margin: 0 0 14px !important;
}

#quienes-somos.about-jpm .about-lead{
  max-width: 50ch !important;
  margin: 0 0 14px !important;
}

#quienes-somos.about-jpm .about-text{
  max-width: 56ch !important;
  margin: 0 0 18px !important;
}

/* que las cards y botones ocupen mejor el bloque */
#quienes-somos.about-jpm .about-highlights{
  max-width: 100% !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
}

#quienes-somos.about-jpm .about-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

/* CTA principal */
#quienes-somos.about-jpm .about-actions .btn-primary{
  background: linear-gradient(135deg, #17355f 0%, #2b5fa9 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(24,57,101,.24) !important;
  box-shadow: 0 14px 26px rgba(16,35,59,.16) !important;
}

/* CTA secundario visible y con presencia */
#quienes-somos.about-jpm .about-actions .btn-secondary{
  background: rgba(236,242,251,.92) !important;
  color: #234a8b !important;
  border: 1px solid rgba(46,96,200,.18) !important;
  box-shadow:
    0 12px 22px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#quienes-somos.about-jpm .about-actions .btn-secondary:hover{
  background: rgba(228,237,250,.98) !important;
  color: #17355f !important;
  border-color: rgba(46,96,200,.26) !important;
}

/* ambos botones con la misma presencia */
#quienes-somos.about-jpm .about-actions .btn{
  min-height: 48px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* imagen más pegada visualmente al texto */
#quienes-somos.about-jpm .about-media{
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

#quienes-somos.about-jpm .about-media img{
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* responsive */
@media (max-width: 1100px){
  #quienes-somos.about-jpm .about-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #quienes-somos.about-jpm .about-copy{
    padding-right: 0 !important;
  }

  #quienes-somos.about-jpm .section-title,
  #quienes-somos.about-jpm .about-lead,
  #quienes-somos.about-jpm .about-text{
    max-width: 100% !important;
  }
}
/* =========================================
   QUIÉNES SOMOS
   hacer que el texto sí use todo el ancho disponible
========================================= */

#quienes-somos.about-jpm .about-grid{
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#quienes-somos.about-jpm .about-copy{
  max-width: none !important;
  width: 100% !important;
  padding-right: 0 !important;
}

/* ESTE ERA EL PROBLEMA REAL */
#quienes-somos.about-jpm .about-lead,
#quienes-somos.about-jpm .about-text{
  max-width: none !important;
  width: 100% !important;
  display: block !important;
}

/* si quieres que el título también aproveche más ancho */
#quienes-somos.about-jpm .section-title{
  max-width: 12ch !important;
}

/* las cards también ocupan todo el bloque */
#quienes-somos.about-jpm .about-highlights,
#quienes-somos.about-jpm .about-actions{
  width: 100% !important;
}

/* imagen alineada y sin abrir hueco raro */
#quienes-somos.about-jpm .about-media{
  width: 100% !important;
  height: 100% !important;
}

#quienes-somos.about-jpm .about-media img{
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 1100px){
  #quienes-somos.about-jpm .about-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #quienes-somos.about-jpm .section-title,
  #quienes-somos.about-jpm .about-lead,
  #quienes-somos.about-jpm .about-text{
    max-width: 100% !important;
  }
}
/* =========================================
   QUIÉNES SOMOS
   hacer que título + lead usen todo el ancho
========================================= */

#quienes-somos.about-jpm .about-copy{
  width: 100% !important;
  max-width: none !important;
}

/* TÍTULO */
#quienes-somos.about-jpm .section-title{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin: 0 0 14px !important;
  line-height: 1.01 !important;
  text-wrap: pretty;
}

/* LEAD */
#quienes-somos.about-jpm .about-lead{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin: 0 0 14px !important;
  line-height: 1.46 !important;
}

/* SEGUNDO PÁRRAFO */
#quienes-somos.about-jpm .about-text{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin: 0 0 18px !important;
  line-height: 1.46 !important;
}

/* texto alineado y aprovechando mejor el bloque */
#quienes-somos.about-jpm .section-title,
#quienes-somos.about-jpm .about-lead,
#quienes-somos.about-jpm .about-text{
  text-align: justify !important;
  text-justify: inter-word;
}

/* si el navegador no aplica bien justify en títulos,
   al menos que no quede estrecho */
#quienes-somos.about-jpm .section-title br{
  display: none;
}

/* la columna izquierda un poco más dominante */
#quienes-somos.about-jpm .about-grid{
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr) !important;
  gap: 12px !important;
}

/* responsive */
@media (max-width: 1100px){
  #quienes-somos.about-jpm .section-title,
  #quienes-somos.about-jpm .about-lead,
  #quienes-somos.about-jpm .about-text{
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
  }

  #quienes-somos.about-jpm .about-grid{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================
   QUIÉNES SOMOS
   mantener texto ancho pero recuperar separación con la imagen
========================================= */

#quienes-somos.about-jpm .about-grid{
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

#quienes-somos.about-jpm .about-copy{
  width: 100% !important;
  max-width: none !important;
  padding-right: 6px !important;
}

#quienes-somos.about-jpm .section-title,
#quienes-somos.about-jpm .about-lead,
#quienes-somos.about-jpm .about-text{
  max-width: none !important;
  width: 100% !important;
}

/* responsive */
@media (max-width: 1100px){
  #quienes-somos.about-jpm .about-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #quienes-somos.about-jpm .about-copy{
    padding-right: 0 !important;
  }
}
/* =========================================================
   HOME — SERVICIOS
   adaptación visible al estilo nuevo
   sin cambiar estructura ni tamaños base
========================================================= */

#servicios.hc-services{
  position: relative;
  padding: 74px 0 82px !important;
  background:
    radial-gradient(760px 220px at 8% 0%, rgba(46,96,200,.06), transparent 58%),
    radial-gradient(700px 240px at 100% 8%, rgba(46,96,200,.05), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%) !important;
  overflow: hidden;
}

#servicios.hc-services::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 18%, transparent 82%, rgba(255,255,255,.10));
  pointer-events: none;
}

#servicios.hc-services .container{
  position: relative;
  z-index: 1;
}

/* =========================
   HEAD
========================= */

#servicios.hc-services .hc-services-head{
  position: relative;
  margin: 0 0 24px !important;
}

#servicios.hc-services .hc-services-head::after{
  content: "";
  display: block;
  width: 96px;
  height: 4px;
  margin-top: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5f8fe2 0%, rgba(95,143,226,.10) 100%);
}

#servicios.hc-services .hc-eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background:
    linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

/* =========================
   CARDS
========================= */

#servicios.hc-services .hc-svc-card,
#servicios.hc-services .hc-svc-card.hc-reverse{
  position: relative;
  overflow: hidden !important;
  border-radius: 30px !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  box-shadow:
    0 18px 34px rgba(15,34,63,.07),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  backdrop-filter: blur(6px);
}

#servicios.hc-services .hc-svc-card::before{
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 12px;
  height: 3px;
  border-radius: 999px;
  z-index: 3;
  background: linear-gradient(90deg, #8cb0ef 0%, rgba(140,176,239,.10) 100%);
}

#servicios.hc-services .hc-svc-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(260px 120px at 100% 0%, rgba(97,145,228,.08), transparent 72%);
  z-index: 1;
}

/* cada card con personalidad sutil */
#servicios.hc-services .hc-svc-card:nth-of-type(1){
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(93,138,224,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,246,251,.95)) !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2){
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(77,104,165,.11), transparent 72%),
    linear-gradient(180deg, rgba(252,253,255,.98), rgba(241,245,250,.95)) !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(3){
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(52,108,205,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,245,250,.95)) !important;
}

/* =========================
   MEDIA
========================= */

#servicios.hc-services .hc-svc-media{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(231,239,249,.80), rgba(222,234,247,.70));
}

#servicios.hc-services .hc-svc-media::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,25,48,.08), rgba(10,25,48,0) 36%, rgba(255,255,255,.04));
  z-index: 1;
  pointer-events: none;
}

#servicios.hc-services .hc-svc-media::after{
  content: "";
  position: absolute;
  inset: auto 18px 16px 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.42), rgba(255,255,255,.08));
  z-index: 2;
  pointer-events: none;
}

#servicios.hc-services .hc-svc-media img{
  position: relative;
  z-index: 0;
  filter: saturate(1.04) contrast(1.02);
}

/* =========================
   CONTENT
========================= */

#servicios.hc-services .hc-svc-content{
  position: relative;
  z-index: 2;
}

#servicios.hc-services .hc-svc-top{
  margin-bottom: 14px !important;
}

#servicios.hc-services .hc-kicker,
#servicios.hc-services .hc-pill{
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(239,245,250,.86)) !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  box-shadow:
    0 8px 16px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  color: rgba(16,35,59,.72) !important;
}

#servicios.hc-services .hc-pill{
  color: #2f61c8 !important;
  border-color: rgba(46,96,200,.14) !important;
  background:
    linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
}

#servicios.hc-services .hc-svc-h{
  color: #10233b !important;
}

#servicios.hc-services .hc-svc-lead{
  color: rgba(16,35,59,.72) !important;
}

/* =========================
   BULLETS
========================= */

#servicios.hc-services .hc-bullets{
  list-style: none !important;
  padding: 0 !important;
}

#servicios.hc-services .hc-bullets li{
  position: relative;
  padding-left: 18px !important;
}

#servicios.hc-services .hc-bullets li::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 7px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #5f8fe2 !important;
  box-shadow: 0 0 0 4px rgba(95,143,226,.10) !important;
}

/* =========================
   CHIPS
========================= */

#servicios.hc-services .hc-chip{
  border: 1px solid rgba(15,34,63,.08) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,246,251,.88)) !important;
  color: #173252 !important;
  box-shadow:
    0 8px 16px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.56) !important;
}

/* =========================
   ACTIONS
========================= */

#servicios.hc-services .hc-link{
  border: 1px solid rgba(46,96,200,.16) !important;
  background:
    linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #2f61c8 !important;
  box-shadow:
    0 10px 20px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

#servicios.hc-services .hc-btn{
  background: linear-gradient(135deg, #17355f 0%, #2b5fa9 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(24,57,101,.24) !important;
  box-shadow: 0 14px 26px rgba(16,35,59,.16) !important;
}

/* hover sutil, sin romper layout */
#servicios.hc-services .hc-svc-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#servicios.hc-services .hc-svc-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 40px rgba(15,34,63,.09),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  border-color: rgba(46,96,200,.12) !important;
}

#servicios.hc-services .hc-link,
#servicios.hc-services .hc-btn{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

#servicios.hc-services .hc-link:hover,
#servicios.hc-services .hc-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px){
  #servicios.hc-services .hc-svc-card,
  #servicios.hc-services .hc-svc-card.hc-reverse{
    border-radius: 26px !important;
  }
}
/* =========================================================
   HOME — SERVICIOS
   limpieza visual + tipografía uniforme
========================================================= */

/* -------------------------
   LIMPIEZA DE ARTEFACTOS
------------------------- */
#servicios.hc-services .hc-svc-card,
#servicios.hc-services .hc-svc-card.hc-reverse{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#servicios.hc-services .hc-svc-card::after{
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(97,145,228,.06), transparent 72%) !important;
}

#servicios.hc-services .hc-svc-content h3,
#servicios.hc-services .hc-svc-content p,
#servicios.hc-services .hc-svc-content ul,
#servicios.hc-services .hc-svc-content li{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* por si algún estilo viejo está metiendo bloques raros */
#servicios.hc-services .hc-svc-content p::before,
#servicios.hc-services .hc-svc-content p::after,
#servicios.hc-services .hc-svc-content li::after,
#servicios.hc-services .hc-svc-content h3::before,
#servicios.hc-services .hc-svc-content h3::after{
  display: none !important;
  content: none !important;
}

/* -------------------------
   HEAD — UNIFORME
------------------------- */
#servicios.hc-services{
  padding: 72px 0 80px !important;
}

#servicios.hc-services .hc-services-head{
  margin: 0 0 22px !important;
}

#servicios.hc-services .hc-eyebrow{
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 0 14px !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
}

#servicios.hc-services .hc-title{
  margin: 0 0 10px !important;
  font-size: clamp(34px, 4vw, 48px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  max-width: none !important;
  width: 100% !important;
}

#servicios.hc-services .hc-subtitle{
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.46 !important;
  color: rgba(16,35,59,.68) !important;
  max-width: none !important;
  width: 100% !important;
}

/* -------------------------
   CARDS — PROPORCIÓN ESTABLE
------------------------- */
#servicios.hc-services .hc-svc-card,
#servicios.hc-services .hc-svc-card.hc-reverse{
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
  border-radius: 28px !important;
  margin: 0 0 18px !important;
}

#servicios.hc-services .hc-svc-content{
  padding: 22px 22px 20px !important;
}

#servicios.hc-services .hc-svc-media img{
  min-height: 300px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* -------------------------
   TEXTO — JERARQUÍA UNIFORME
------------------------- */
#servicios.hc-services .hc-svc-top{
  margin: 0 0 14px !important;
  gap: 10px !important;
}

#servicios.hc-services .hc-kicker,
#servicios.hc-services .hc-pill{
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 10px !important;
}

#servicios.hc-services .hc-pill{
  font-size: 11px !important;
}

#servicios.hc-services .hc-svc-h{
  margin: 0 0 10px !important;
  font-size: clamp(24px, 2vw, 32px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  color: #10233b !important;
  max-width: none !important;
  width: 100% !important;
}

#servicios.hc-services .hc-svc-lead{
  margin: 0 0 14px !important;
  font-size: 14px !important;
  line-height: 1.44 !important;
  color: rgba(16,35,59,.72) !important;
  max-width: none !important;
  width: 100% !important;
}

/* cuerpos en 14px, como hemos venido manejando */
#servicios.hc-services .hc-bullets{
  margin: 0 0 14px !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 8px !important;
}

#servicios.hc-services .hc-bullets li{
  position: relative !important;
  padding-left: 17px !important;
  font-size: 14px !important;
  line-height: 1.34 !important;
  color: rgba(16,35,59,.72) !important;
}

#servicios.hc-services .hc-bullets li::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 7px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #5f8fe2 !important;
  box-shadow: 0 0 0 4px rgba(95,143,226,.10) !important;
}

/* chips y acciones más discretos para no competir con el copy */
#servicios.hc-services .hc-chips{
  gap: 8px !important;
  margin: 0 0 16px !important;
}

#servicios.hc-services .hc-chip{
  min-height: 32px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

#servicios.hc-services .hc-actions{
  gap: 10px !important;
}

#servicios.hc-services .hc-link{
  min-height: 42px !important;
  padding: 0 15px !important;
  font-size: 13px !important;
}

#servicios.hc-services .hc-btn{
  min-height: 44px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
}

/* quitar autolímites internos para que no se corten raro */
#servicios.hc-services .hc-svc-content > *,
#servicios.hc-services .hc-services-head > *{
  max-width: none !important;
}

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 1100px){
  #servicios.hc-services .hc-svc-card,
  #servicios.hc-services .hc-svc-card.hc-reverse{
    grid-template-columns: 1fr !important;
  }

  #servicios.hc-services .hc-svc-media{
    order: -1 !important;
  }

  #servicios.hc-services .hc-svc-media img{
    min-height: 240px !important;
  }

  #servicios.hc-services .hc-title,
  #servicios.hc-services .hc-subtitle,
  #servicios.hc-services .hc-svc-h,
  #servicios.hc-services .hc-svc-lead{
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* =========================================================
   HOME — SERVICIOS
   fix SOLO para Setup + CTA "Más detalles" con más presencia
========================================================= */

/* ---------------------------------------------------------
   1) SOLO SETUP: devolver compactación sin mover las otras cards
--------------------------------------------------------- */
#servicios.hc-services .hc-svc-card:nth-of-type(1){
  min-height: 0 !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-content{
  padding: 20px 22px 16px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-h{
  margin: 0 0 8px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-lead{
  margin: 0 0 10px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-bullets{
  margin: 0 0 10px !important;
  gap: 5px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-bullets li{
  line-height: 1.2 !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-chips{
  margin: 0 0 10px !important;
  gap: 7px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-chip{
  min-height: 31px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-actions{
  margin-top: 0 !important;
  gap: 10px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-link,
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-btn{
  min-height: 41px !important;
}

/* por si la imagen estaba ayudando a "estirar" la card */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-media img{
  min-height: 300px !important;
}

/* ---------------------------------------------------------
   2) CTA "Más detalles" — más claro, más tentador, más usable
   aplica a las 3 cards
--------------------------------------------------------- */
#servicios.hc-services .hc-link{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 0 16px 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.18) !important;
  background:
    radial-gradient(120px 40px at 100% 0%, rgba(111,156,236,.18), transparent 72%),
    linear-gradient(180deg, rgba(236,242,251,.98), rgba(224,235,249,.94)) !important;
  color: #2f61c8 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow:
    0 10px 20px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

#servicios.hc-services .hc-link::before{
  content: "Ver más";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(46,96,200,.10);
  color: #4167bb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#servicios.hc-services .hc-link::after{
  content: "→";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(46,96,200,.10);
  color: #2f61c8;
  font-size: 13px;
  font-weight: 900;
}

#servicios.hc-services .hc-link:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(46,96,200,.26) !important;
  box-shadow:
    0 14px 24px rgba(15,34,63,.08),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

#servicios.hc-services .hc-link:hover::after{
  background: rgba(46,96,200,.16);
}

/* para que entre mejor junto al botón principal */
#servicios.hc-services .hc-actions{
  align-items: center !important;
}

/* móvil */
@media (max-width: 720px){
  #servicios.hc-services .hc-link{
    width: 100% !important;
  }

  #servicios.hc-services .hc-link::before{
    flex: 0 0 auto;
  }
}
/* =========================================================
   HOME — SERVICIOS
   cirugía exacta:
   - NO tocar Setup
   - corregir Mensual y Expansión
   - CTA "Más detalles" minimal
   - destacar Mensual de forma visible
========================================================= */

/* ---------------------------------------------------------
   0) NO tocar estructura ni media de ninguna card
--------------------------------------------------------- */
#servicios.hc-services .hc-svc-card,
#servicios.hc-services .hc-svc-card.hc-reverse{
  transform: none !important;
}

#servicios.hc-services .hc-svc-media,
#servicios.hc-services .hc-svc-media img{
  transform: none !important;
}

/* ---------------------------------------------------------
   1) SOLO MENsUAL + EXPANSIÓN
   igualar espaciado interno a la lógica de Setup
--------------------------------------------------------- */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-content,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-content{
  padding: 20px 22px 16px !important;
  min-height: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* títulos y copy con la misma jerarquía que llevamos */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-h,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-h{
  margin: 0 0 8px !important;
  font-size: clamp(24px, 2vw, 32px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  max-width: none !important;
  width: 100% !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-lead,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-lead{
  margin: 0 0 12px !important;
  font-size: 15px !important;
  line-height: 1.46 !important;
  max-width: none !important;
  width: 100% !important;
}

/* bullets más compactas para abrir espacio abajo */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-bullets,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-bullets{
  margin: 0 0 10px !important;
  gap: 5px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-bullets li,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-bullets li{
  font-size: 15px !important;
  line-height: 1.22 !important;
  padding-left: 18px !important;
}

/* ---------------------------------------------------------
   2) CHIPS SUPERIORES
   SOLO Mensual + Expansión
--------------------------------------------------------- */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-top,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-top{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  flex-wrap: wrap !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-kicker,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-pill,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-kicker,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-pill{
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   3) CHIPS INFERIORES
   SOLO Mensual + Expansión
--------------------------------------------------------- */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-chips,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-chips{
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-chips > .hc-chip,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-chips > .hc-chip{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* chips largos: solo afinarlos, no deformarlos */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-chips > .hc-chip:nth-child(2),
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-chips > .hc-chip:nth-child(3),
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-chips > .hc-chip:nth-child(2){
  font-size: 10.5px !important;
  padding-inline: 11px !important;
}

/* ---------------------------------------------------------
   4) CTAs
   SOLO Mensual + Expansión
--------------------------------------------------------- */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-actions,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-actions{
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-link,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-btn,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-link,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-btn{
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Más detalles: minimalista otra vez */
#servicios.hc-services .hc-link::before,
#servicios.hc-services .hc-link::after{
  content: none !important;
  display: none !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-link,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-link{
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  border: 1px solid rgba(46,96,200,.16) !important;
  color: #2f61c8 !important;
}

/* ---------------------------------------------------------
   5) DESTACAR MENSUAL DE VERDAD
   sin agrandarlo ni moverlo
--------------------------------------------------------- */
#servicios.hc-services .hc-svc-card:nth-of-type(2){
  border-color: rgba(46,96,200,.22) !important;
  background:
    radial-gradient(260px 110px at 100% 0%, rgba(63,111,203,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(236,244,252,.97)) !important;
  box-shadow:
    0 22px 38px rgba(21,57,110,.10),
    0 0 0 1px rgba(46,96,200,.08),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2)::before{
  height: 4px !important;
  background: linear-gradient(90deg, #4b7de0 0%, rgba(75,125,224,.18) 100%) !important;
}

/* pill mensual más visible */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-pill{
  background: linear-gradient(135deg, rgba(232,241,255,.98), rgba(219,232,255,.95)) !important;
  border-color: rgba(46,96,200,.22) !important;
  color: #2f61c8 !important;
  box-shadow:
    0 8px 18px rgba(46,96,200,.08),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
}

/* CTA principal del mensual más protagonista */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-btn{
  background: linear-gradient(135deg, #183a66 0%, #2f67c2 100%) !important;
  box-shadow: 0 16px 28px rgba(27,68,130,.20) !important;
}

/* ---------------------------------------------------------
   6) MÓVIL
--------------------------------------------------------- */
@media (max-width: 720px){
  #servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-chips > .hc-chip,
  #servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-chips > .hc-chip{
    white-space: normal !important;
    line-height: 1.12 !important;
    min-height: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  #servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-actions,
  #servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-actions{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-link,
  #servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-btn,
  #servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-link,
  #servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-btn{
    width: 100% !important;
    justify-content: center !important;
  }
}
/* =========================================================
   HOME — SERVICIOS
   ajuste fino de altura:
   mismo tamaño en las 3 cards
   + espacio moderado bajo CTAs
========================================================= */

/* altura pareja, pero ya no exagerada */
#servicios.hc-services .hc-svc-card:nth-of-type(1),
#servicios.hc-services .hc-svc-card:nth-of-type(2),
#servicios.hc-services .hc-svc-card:nth-of-type(3){
  min-height: 430px !important;
  height: auto !important;
}

/* contenido interno: menos aire general, pero con respiración abajo */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-content,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-content,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-content{
  padding: 22px 24px 22px !important;
}

/* imagen acompaña la altura nueva, sin volver a inflarse */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-media img,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-media img,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-media img{
  min-height: 430px !important;
  height: 100% !important;
}

/* dar el aire justo debajo del CTA */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-actions,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-actions,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-actions{
  margin-top: auto !important;
  padding-top: 6px !important;
}

/* evitar que los chips de abajo abran demasiado la card */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-chips,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-chips,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-chips{
  margin: 0 0 14px !important;
}

/* móvil / tablet */
@media (max-width: 1100px){
  #servicios.hc-services .hc-svc-card:nth-of-type(1),
  #servicios.hc-services .hc-svc-card:nth-of-type(2),
  #servicios.hc-services .hc-svc-card:nth-of-type(3){
    min-height: 0 !important;
  }

  #servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-media img,
  #servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-media img,
  #servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-media img{
    min-height: 240px !important;
  }
}
/* =========================================================
   HOME — SERVICIOS
   altura final 380px + imagen bien acomodada + chips top
========================================================= */

/* 1) MISMA ALTURA EN LAS 3 CARDS */
#servicios.hc-services .hc-svc-card:nth-of-type(1),
#servicios.hc-services .hc-svc-card:nth-of-type(2),
#servicios.hc-services .hc-svc-card:nth-of-type(3){
  min-height: 380px !important;
  height: auto !important;
  align-items: stretch !important;
}

/* 2) CONTENIDO INTERNO */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-content,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-content,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-content{
  min-height: 0 !important;
  height: auto !important;
  padding: 20px 24px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* 3) IMAGENES ACOMODADAS A LA NUEVA ALTURA */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-media,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-media,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-media{
  height: 100% !important;
  min-height: 380px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-media img,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-media img,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-media img{
  width: 100% !important;
  height: 100% !important;
  min-height: 380px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* 4) TIPOGRAFÍA UNIFORME */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-h,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-h,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-h{
  margin: 0 0 8px !important;
  font-size: clamp(24px, 2vw, 31px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  max-width: none !important;
  width: 100% !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-lead,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-lead,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-lead{
  margin: 0 0 12px !important;
  font-size: 15px !important;
  line-height: 1.44 !important;
  max-width: none !important;
  width: 100% !important;
}

/* 5) BULLETS UN POCO MÁS COMPACTOS */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-bullets,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-bullets,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-bullets{
  margin: 0 0 10px !important;
  gap: 5px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-bullets li,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-bullets li,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-bullets li{
  font-size: 15px !important;
  line-height: 1.22 !important;
  padding-left: 18px !important;
}

/* 6) CHIPS SUPERIORES OTRA VEZ BIEN ACOMODADOS */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-top,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-top,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-top{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  flex-wrap: wrap !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-kicker,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-kicker,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-kicker{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,242,251,.94)) !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  color: #73819a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-pill,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-pill,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* 7) CHIPS INFERIORES */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-chips,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-chips,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-chips{
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-chip,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-chip,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-chip{
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* 8) CTAS CON EL ESPACIO JUSTO ABAJO */
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-actions,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-actions,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-actions{
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding-top: 4px !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-link,
#servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-btn,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-link,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-btn,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-link,
#servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-btn{
  min-height: 44px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  border-radius: 999px !important;
}

/* 9) RESPONSIVE */
@media (max-width: 1100px){
  #servicios.hc-services .hc-svc-card:nth-of-type(1),
  #servicios.hc-services .hc-svc-card:nth-of-type(2),
  #servicios.hc-services .hc-svc-card:nth-of-type(3){
    min-height: 0 !important;
  }

  #servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-media,
  #servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-media,
  #servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-media,
  #servicios.hc-services .hc-svc-card:nth-of-type(1) .hc-svc-media img,
  #servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-media img,
  #servicios.hc-services .hc-svc-card:nth-of-type(3) .hc-svc-media img{
    min-height: 240px !important;
  }
}
/* =========================================================
   HOME — SERVICIOS
   RESETEO LIMPIO Y ÚNICO
   - 3 cards con misma altura
   - Setup deja de crecer
   - imágenes bien acomodadas
   - chips top visibles
   - CTAs con aire correcto
========================================================= */

#servicios.hc-services .hc-svc-card,
#servicios.hc-services .hc-svc-card.hc-reverse{
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

#servicios.hc-services .hc-svc-card .hc-svc-content,
#servicios.hc-services .hc-svc-card.hc-reverse .hc-svc-content{
  height: 100% !important;
  min-height: 0 !important;
  padding: 20px 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#servicios.hc-services .hc-svc-card .hc-svc-media,
#servicios.hc-services .hc-svc-card.hc-reverse .hc-svc-media{
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#servicios.hc-services .hc-svc-card .hc-svc-media img,
#servicios.hc-services .hc-svc-card.hc-reverse .hc-svc-media img{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* -------------------------
   CHIP SUPERIOR
------------------------- */
#servicios.hc-services .hc-svc-top{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  flex-wrap: nowrap !important;
}

#servicios.hc-services .hc-kicker,
#servicios.hc-services .hc-pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

#servicios.hc-services .hc-kicker{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,242,251,.94)) !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  color: #73819a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#servicios.hc-services .hc-pill{
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* mensual destacado, pero sin mover tamaño */
#servicios.hc-services .hc-svc-card:nth-of-type(2){
  border-color: rgba(46,96,200,.22) !important;
  box-shadow:
    0 22px 38px rgba(21,57,110,.10),
    0 0 0 1px rgba(46,96,200,.08),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2)::before{
  height: 4px !important;
  background: linear-gradient(90deg, #4b7de0 0%, rgba(75,125,224,.18) 100%) !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-pill{
  background: linear-gradient(135deg, rgba(232,241,255,.98), rgba(219,232,255,.95)) !important;
  border-color: rgba(46,96,200,.22) !important;
  color: #2f61c8 !important;
}

/* -------------------------
   TIPOGRAFÍA UNIFORME
------------------------- */
#servicios.hc-services .hc-svc-h{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 8px !important;
  font-size: 31px !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

#servicios.hc-services .hc-svc-lead{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
}

#servicios.hc-services .hc-bullets{
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 5px !important;
}

#servicios.hc-services .hc-bullets li{
  position: relative !important;
  padding-left: 18px !important;
  font-size: 15px !important;
  line-height: 1.22 !important;
}

#servicios.hc-services .hc-bullets li::before{
  top: 8px !important;
}

/* -------------------------
   CHIPS INFERIORES
------------------------- */
#servicios.hc-services .hc-chips{
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}

#servicios.hc-services .hc-chip{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* -------------------------
   CTAS
------------------------- */
#servicios.hc-services .hc-actions{
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding-top: 6px !important;
}

#servicios.hc-services .hc-link,
#servicios.hc-services .hc-btn{
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#servicios.hc-services .hc-link::before,
#servicios.hc-services .hc-link::after{
  content: none !important;
  display: none !important;
}

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 1100px){
  #servicios.hc-services .hc-svc-card,
  #servicios.hc-services .hc-svc-card.hc-reverse{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #servicios.hc-services .hc-svc-card .hc-svc-media,
  #servicios.hc-services .hc-svc-card .hc-svc-media img,
  #servicios.hc-services .hc-svc-card.hc-reverse .hc-svc-media,
  #servicios.hc-services .hc-svc-card.hc-reverse .hc-svc-media img{
    height: auto !important;
  }
}
/* =========================================================
   HOME — SERVICIOS
   destacar más la card de Mensual
   sin mover tamaños ni estructura
========================================================= */

#servicios.hc-services .hc-svc-card:nth-of-type(2){
  position: relative;
  border: 1px solid rgba(46,96,200,.24) !important;
  background:
    radial-gradient(280px 120px at 100% 0%, rgba(76,124,221,.14), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(237,244,253,.97)) !important;
  box-shadow:
    0 24px 42px rgba(23,58,107,.12),
    0 0 0 1px rgba(46,96,200,.08),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#servicios.hc-services .hc-svc-card:nth-of-type(2)::before{
  height: 5px !important;
  background: linear-gradient(90deg, #4d7fe3 0%, rgba(77,127,227,.18) 100%) !important;
}

/* halo muy sutil */
#servicios.hc-services .hc-svc-card:nth-of-type(2)::after{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 34px;
  background: radial-gradient(circle at 50% 0%, rgba(77,127,227,.08), transparent 58%);
  pointer-events: none;
  z-index: 0;
}

/* que el contenido quede por encima del halo */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-content,
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-media{
  position: relative;
  z-index: 1;
}

/* chip derecho más protagonista */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-pill{
  background: linear-gradient(135deg, rgba(233,241,255,.99), rgba(217,232,255,.96)) !important;
  border-color: rgba(46,96,200,.24) !important;
  color: #2f61c8 !important;
  box-shadow:
    0 10px 18px rgba(46,96,200,.10),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

/* título un poco más firme */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-svc-h{
  color: #10284a !important;
}

/* botón principal ligeramente más premium */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-btn{
  background: linear-gradient(135deg, #173a66 0%, #2f69c6 100%) !important;
  box-shadow:
    0 18px 30px rgba(24,58,108,.22),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* link secundario un poco más vivo */
#servicios.hc-services .hc-svc-card:nth-of-type(2) .hc-link{
  border-color: rgba(46,96,200,.22) !important;
  background: linear-gradient(180deg, rgba(239,245,255,.98), rgba(227,236,251,.94)) !important;
  color: #2f61c8 !important;
}
/* =========================================================
   HOME — PROCESO
   adaptación visual al sistema actual
   sin mover estructura
========================================================= */

#proceso.process-jpm{
  position: relative;
  padding: 76px 0 84px !important;
  background:
    radial-gradient(720px 220px at 8% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(620px 220px at 100% 18%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%) !important;
  overflow: hidden;
}

/* =========================
   HEAD
========================= */

#proceso.process-jpm .process-head{
  margin: 0 0 28px !important;
  max-width: 980px !important;
}

#proceso.process-jpm .section-kicker{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

#proceso.process-jpm .section-title{
  margin: 0 0 12px !important;
  color: #10233b !important;
  font-size: clamp(38px, 4.4vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  max-width: none !important;
}

#proceso.process-jpm .section-subtitle{
  margin: 0 !important;
  color: rgba(16,35,59,.68) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  max-width: 68ch !important;
}

/* =========================
   PANEL PRINCIPAL
========================= */

#proceso.process-jpm .process-image{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 34px !important;
  border: 1px solid rgba(25,52,92,.14) !important;
  background:
    linear-gradient(135deg, #133560 0%, #1a446f 36%, #244f7c 100%) !important;
  box-shadow:
    0 24px 46px rgba(16,35,59,.12),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

#proceso.process-jpm .process-image::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 180px at 12% 0%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(460px 220px at 100% 100%, rgba(113,165,255,.10), transparent 64%),
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 18%, transparent 82%, rgba(255,255,255,.03));
  pointer-events: none;
  z-index: 1;
}

#proceso.process-jpm .process-bg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(.92) contrast(1.02) brightness(.58) !important;
  opacity: .42 !important;
}

#proceso.process-jpm .process-overlay{
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(10,25,46,.44), rgba(11,28,52,.30)),
    linear-gradient(135deg, rgba(18,49,89,.50), rgba(31,70,118,.18)) !important;
  z-index: 1 !important;
}

#proceso.process-jpm .process-content{
  position: relative !important;
  z-index: 2 !important;
  padding: 28px !important;
}

#proceso.process-jpm .process-band{
  position: relative !important;
  border-radius: 30px !important;
  border: 1px solid rgba(188,212,246,.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 32px rgba(6,18,37,.14) !important;
  padding: 22px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================
   GRID DE PASOS
========================= */

#proceso.process-jpm .process-pins{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

#proceso.process-jpm .pin{
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  min-height: 126px !important;
  padding: 22px 20px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(196,218,248,.22) !important;
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(255,255,255,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10)) !important;
  box-shadow:
    0 14px 28px rgba(8,20,40,.12),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

#proceso.process-jpm .pin-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 62px !important;
  height: 62px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,245,250,.94)) !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  color: #2f61c8 !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow:
    0 10px 22px rgba(15,34,63,.08),
    inset 0 1px 0 rgba(255,255,255,.66) !important;
}

#proceso.process-jpm .pin-text{
  min-width: 0 !important;
}

#proceso.process-jpm .pin-text h3{
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  font-weight: 800 !important;
}

#proceso.process-jpm .pin-desc{
  margin: 0 !important;
  color: rgba(240,246,255,.88) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  max-width: none !important;
}

/* =========================
   CTA INFERIOR
========================= */

#proceso.process-jpm .process-cta{
  margin-top: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 20px 22px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(14,45,88,.18) !important;
  background:
    radial-gradient(260px 100px at 100% 0%, rgba(78,126,225,.14), transparent 72%),
    linear-gradient(135deg, #08264a 0%, #0d315a 42%, #143d6d 100%) !important;
  box-shadow:
    0 22px 40px rgba(10,27,52,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#proceso.process-jpm .process-cta-text{
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

#proceso.process-jpm .process-cta-text strong{
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.14 !important;
  letter-spacing: -.02em !important;
}

#proceso.process-jpm .process-cta-text span{
  color: rgba(232,241,255,.82) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

#proceso.process-jpm .process-cta .btn{
  flex: 0 0 auto !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow:
    0 14px 28px rgba(8,21,42,.14),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px){
  #proceso.process-jpm .process-pins{
    grid-template-columns: 1fr !important;
  }

  #proceso.process-jpm .pin{
    min-height: 0 !important;
  }
}

@media (max-width: 760px){
  #proceso.process-jpm{
    padding: 68px 0 76px !important;
  }

  #proceso.process-jpm .process-content{
    padding: 18px !important;
  }

  #proceso.process-jpm .process-band{
    padding: 16px !important;
    border-radius: 24px !important;
  }

  #proceso.process-jpm .pin{
    grid-template-columns: 60px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 18px 16px !important;
    border-radius: 20px !important;
  }

  #proceso.process-jpm .pin-badge{
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    font-size: 24px !important;
  }

  #proceso.process-jpm .pin-text h3{
    font-size: 17px !important;
  }

  #proceso.process-jpm .pin-desc{
    font-size: 13px !important;
  }

  #proceso.process-jpm .process-cta{
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 18px !important;
  }

  #proceso.process-jpm .process-cta .btn{
    width: 100% !important;
    justify-content: center !important;
  }
}
/* =========================================
   PROCESO
   centrar contenido dentro del panel
========================================= */

#proceso.process-jpm .process-image{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#proceso.process-jpm .process-content{
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  padding: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#proceso.process-jpm .process-band{
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 22px !important;
}

#proceso.process-jpm .process-pins{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#proceso.process-jpm .pin{
  min-height: 122px !important;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 20px !important;
}

#proceso.process-jpm .pin-text{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#proceso.process-jpm .pin-text h3{
  margin: 0 0 6px !important;
}

#proceso.process-jpm .pin-desc{
  margin: 0 !important;
  max-width: none !important;
}

@media (max-width: 1100px){
  #proceso.process-jpm .process-content{
    padding: 22px !important;
  }

  #proceso.process-jpm .process-band{
    padding: 18px !important;
  }
}

@media (max-width: 760px){
  #proceso.process-jpm .process-content{
    padding: 18px !important;
  }

  #proceso.process-jpm .process-band{
    padding: 14px !important;
  }

  #proceso.process-jpm .process-pins{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   PROCESO
   centrar visualmente el bloque interior dentro del panel
   sin cambiar tamaño del panel azul
========================================================= */

/* el panel azul no cambia de tamaño */
#proceso.process-jpm .process-image{
  position: relative !important;
  overflow: hidden !important;
}

/* overlay que contiene el bloque interior */
#proceso.process-jpm .process-content{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 24px 30px !important;
  box-sizing: border-box !important;
}

/* este es el bloque que de verdad había que mover */
#proceso.process-jpm .process-band{
  width: 100% !important;
  margin: 0 auto !important;
  padding: 16px !important;
  box-sizing: border-box !important;

  /* lo sube un poco para compensar el peso visual inferior */
  transform: translateY(-12px) !important;
}

/* compactar ligeramente para que sí respire y se vea centrado */
#proceso.process-jpm .process-pins{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

#proceso.process-jpm .pin{
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
}

#proceso.process-jpm .pin-badge{
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  font-size: 24px !important;
  align-self: center !important;
  justify-self: center !important;
}

#proceso.process-jpm .pin-text{
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#proceso.process-jpm .pin-text h3{
  margin: 0 0 5px !important;
  font-size: 17px !important;
  line-height: 1.16 !important;
}

#proceso.process-jpm .pin-desc{
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.34 !important;
  max-width: none !important;
}

/* uniformidad del subtítulo con el resto del sitio */
#proceso.process-jpm .section-subtitle{
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: rgba(16,35,59,.72) !important;
  max-width: 56ch !important;
}

/* responsive */
@media (max-width: 1100px){
  #proceso.process-jpm .process-content{
    position: relative !important;
    inset: auto !important;
    display: block !important;
    padding: 22px !important;
  }

  #proceso.process-jpm .process-band{
    transform: none !important;
  }

  #proceso.process-jpm .process-pins{
    grid-template-columns: 1fr !important;
  }
}
/* ajuste fino final del centrado vertical */
#proceso.process-jpm .process-content{
  padding: 24px 30px !important;
}

#proceso.process-jpm .process-band{
  transform: translateY(-20px) !important;
}
/* =========================================
   PROCESO
   centrado real del panel de 6 cards
   dentro del background azul
========================================= */

/* el background azul no cambia */
#proceso.process-jpm .process-image{
  position: relative !important;
  overflow: hidden !important;
}

/* overlay interno ocupando todo el azul */
#proceso.process-jpm .process-content{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;
  box-sizing: border-box !important;
}

/* AQUÍ está la corrección real:
   quitamos left/translateX heredados
   y lo centramos por ancho + margin auto */
#proceso.process-jpm .process-band{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  width: calc(100% - 64px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;

  transform: translateY(-20px) !important;
  box-sizing: border-box !important;
}

/* por si quedó algún desplazamiento raro en el grid */
#proceso.process-jpm .process-pins{
  width: 100% !important;
  margin: 0 auto !important;
}

/* mobile/tablet */
@media (max-width: 1100px){
  #proceso.process-jpm .process-content{
    position: relative !important;
    inset: auto !important;
    display: block !important;
    padding: 22px !important;
  }

  #proceso.process-jpm .process-band{
    width: 100% !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* solo corregir vertical del panel interior */
#proceso.process-jpm .process-band{
  transform: none !important;
}
/* =========================================================
   HOME — BENEFICIOS
   adaptación al lenguaje visual del sitio
   sin cambiar estructura
========================================================= */

#beneficios.beneficios-editorial{
  position: relative;
  padding: 78px 0 84px !important;
  background:
    radial-gradient(760px 220px at 8% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(680px 240px at 100% 24%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%) !important;
  overflow: hidden;
}

#beneficios.beneficios-editorial::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 18%, transparent 82%, rgba(255,255,255,.06));
  pointer-events: none;
}

#beneficios.beneficios-editorial .container{
  position: relative;
  z-index: 1;
}

/* =========================
   GRID GENERAL
========================= */

#beneficios.beneficios-editorial .beneficios-grid{
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.02fr) minmax(300px, .72fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

/* =========================
   COLUMNA IZQUIERDA
========================= */

#beneficios.beneficios-editorial .beneficios-intro{
  padding-top: 4px !important;
}

#beneficios.beneficios-editorial .eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

#beneficios.beneficios-editorial .beneficios-intro h2{
  margin: 0 0 14px !important;
  color: #10233b !important;
  font-size: clamp(40px, 4.8vw, 68px) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
  max-width: 8ch !important;
}

#beneficios.beneficios-editorial .beneficios-intro .lead{
  margin: 0 !important;
  color: rgba(16,35,59,.70) !important;
  font-size: 15px !important;
  line-height: 1.56 !important;
  max-width: 26ch !important;
}

#beneficios.beneficios-editorial .intro-divider{
  width: 100% !important;
  max-width: 320px !important;
  height: 1px !important;
  margin: 24px 0 20px !important;
  background: linear-gradient(90deg, rgba(16,35,59,.20), rgba(16,35,59,.06)) !important;
}

#beneficios.beneficios-editorial .mini-points{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 14px !important;
}

#beneficios.beneficios-editorial .mini-points li{
  margin: 0 !important;
  color: rgba(16,35,59,.78) !important;
  font-size: 15px !important;
  line-height: 1.46 !important;
}

#beneficios.beneficios-editorial .mini-points strong{
  color: #10233b !important;
  font-weight: 800 !important;
}

/* =========================
   PANEL CENTRAL
========================= */

#beneficios.beneficios-editorial .beneficios-compare{
  position: relative !important;
  border-radius: 28px !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(97,145,228,.08), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.95)) !important;
  box-shadow:
    0 20px 38px rgba(15,34,63,.07),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  padding: 22px 22px 20px !important;
}

#beneficios.beneficios-editorial .beneficios-compare::before{
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8cb0ef 0%, rgba(140,176,239,.10) 100%);
}

#beneficios.beneficios-editorial .compare-kicker{
  margin: 0 0 18px !important;
  color: rgba(16,35,59,.52) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

#beneficios.beneficios-editorial .compare-wrap{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#beneficios.beneficios-editorial .compare-divider{
  width: 1px !important;
  background: linear-gradient(180deg, rgba(16,35,59,.04), rgba(16,35,59,.12), rgba(16,35,59,.04)) !important;
}

#beneficios.beneficios-editorial .compare-col h3{
  margin: 0 0 12px !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}

#beneficios.beneficios-editorial .compare-col.before h3{
  color: #10233b !important;
}

#beneficios.beneficios-editorial .compare-col.after h3{
  color: #2f61c8 !important;
}

#beneficios.beneficios-editorial .compare-col ul{
  margin: 0 !important;
  padding-left: 20px !important;
  display: grid !important;
  gap: 11px !important;
}

#beneficios.beneficios-editorial .compare-col li{
  color: rgba(16,35,59,.72) !important;
  font-size: 15px !important;
  line-height: 1.46 !important;
}

#beneficios.beneficios-editorial .deliverables{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 22px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(16,35,59,.08) !important;
}

#beneficios.beneficios-editorial .deliverables .pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,246,251,.88)) !important;
  color: #173252 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow:
    0 8px 16px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.56) !important;
}

/* =========================
   TARJETA DERECHA
========================= */

#beneficios.beneficios-editorial .beneficios-spotlight{
  position: relative !important;
}

#beneficios.beneficios-editorial .spot-card{
  position: relative !important;
  border-radius: 28px !important;
  border: 1px solid rgba(14,45,88,.18) !important;
  background:
    radial-gradient(260px 100px at 100% 0%, rgba(78,126,225,.14), transparent 72%),
    linear-gradient(135deg, #08264a 0%, #0d315a 42%, #143d6d 100%) !important;
  box-shadow:
    0 22px 40px rgba(10,27,52,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  padding: 22px !important;
  overflow: hidden !important;
}

#beneficios.beneficios-editorial .spot-card::before{
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140,176,239,.80), rgba(140,176,239,.14));
}

#beneficios.beneficios-editorial .spot-eyebrow{
  margin: 0 0 18px !important;
  color: rgba(228,239,255,.86) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

#beneficios.beneficios-editorial .spot-metric{
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

#beneficios.beneficios-editorial .spot-metric:first-of-type{
  border-top: 0 !important;
  padding-top: 2px !important;
}

#beneficios.beneficios-editorial .metric-value{
  color: #ffffff !important;
  font-size: 48px !important;
  line-height: .9 !important;
  font-weight: 800 !important;
  letter-spacing: -.05em !important;
}

#beneficios.beneficios-editorial .metric-text{
  min-width: 0 !important;
}

#beneficios.beneficios-editorial .metric-title{
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.16 !important;
  font-weight: 800 !important;
  margin-bottom: 3px !important;
}

#beneficios.beneficios-editorial .metric-sub{
  color: rgba(232,241,255,.84) !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
}

#beneficios.beneficios-editorial .spot-metric.is-wide{
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

#beneficios.beneficios-editorial .metric-value.wide{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  width: fit-content !important;
}

#beneficios.beneficios-editorial .metric-value.wide span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#beneficios.beneficios-editorial .spot-link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  margin-top: 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 24px rgba(6,18,37,.12) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

#beneficios.beneficios-editorial .spot-link:hover{
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1180px){
  #beneficios.beneficios-editorial .beneficios-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro h2{
    max-width: none !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro .lead{
    max-width: 44ch !important;
  }

  #beneficios.beneficios-editorial .beneficios-spotlight{
    max-width: 420px !important;
  }
}

@media (max-width: 760px){
  #beneficios.beneficios-editorial{
    padding: 68px 0 74px !important;
  }

  #beneficios.beneficios-editorial .compare-wrap{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #beneficios.beneficios-editorial .compare-divider{
    display: none !important;
  }

  #beneficios.beneficios-editorial .beneficios-compare,
  #beneficios.beneficios-editorial .spot-card{
    padding: 18px !important;
    border-radius: 24px !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro h2{
    font-size: clamp(36px, 11vw, 52px) !important;
  }

  #beneficios.beneficios-editorial .metric-value{
    font-size: 42px !important;
  }

  #beneficios.beneficios-editorial .spot-link{
    width: 100% !important;
  }
}
/* =========================================================
   BENEFICIOS
   ajuste de altura, chip y respiración del panel central
========================================================= */

/* 1) grid: darle más espacio al panel central */
#beneficios.beneficios-editorial .beneficios-grid{
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.14fr) minmax(320px, .76fr) !important;
  gap: 30px !important;
  align-items: start !important;
}

/* 2) subir el bloque izquierdo para alinear visualmente con los cards */
#beneficios.beneficios-editorial .beneficios-intro{
  position: relative !important;
  align-self: start !important;
  margin-top: -10px !important;
  padding-top: 0 !important;
}

/* chip BENEFICIOS más arriba y mejor acomodado */
#beneficios.beneficios-editorial .beneficios-intro .eyebrow{
  margin: 0 0 12px !important;
  transform: translateY(-6px) !important;
}

/* título más alineado con los panels de la derecha */
#beneficios.beneficios-editorial .beneficios-intro h2{
  margin: 0 0 14px !important;
  max-width: 7.4ch !important;
}

/* 3) asegurar que los dos panels derechos arranquen a la misma altura */
#beneficios.beneficios-editorial .beneficios-compare,
#beneficios.beneficios-editorial .beneficios-spotlight,
#beneficios.beneficios-editorial .spot-card{
  margin-top: 0 !important;
  align-self: start !important;
}

/* 4) convertir “LO QUE CAMBIA” en chip */
#beneficios.beneficios-editorial .compare-kicker{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  margin: 0 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

/* 5) panel central más ancho visualmente y con mejor respiración */
#beneficios.beneficios-editorial .beneficios-compare{
  padding: 22px 26px 20px !important;
}

/* más aire interno entre columnas */
#beneficios.beneficios-editorial .compare-wrap{
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
  gap: 22px !important;
}

/* encabezados internos */
#beneficios.beneficios-editorial .compare-col h3{
  margin: 0 0 14px !important;
}

/* listas menos amontonadas */
#beneficios.beneficios-editorial .compare-col ul{
  padding-left: 22px !important;
  gap: 13px !important;
}

#beneficios.beneficios-editorial .compare-col li{
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* divider inferior y pills */
#beneficios.beneficios-editorial .deliverables{
  margin-top: 20px !important;
  padding-top: 18px !important;
  gap: 10px !important;
}

/* 6) panel azul derecho alineado visualmente con el central */
#beneficios.beneficios-editorial .spot-card{
  padding: 22px !important;
}

/* responsive */
@media (max-width: 1180px){
  #beneficios.beneficios-editorial .beneficios-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro{
    margin-top: 0 !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro .eyebrow{
    transform: none !important;
  }
}
/* =========================================================
   BENEFICIOS
   alineación real + panel central con más aire
========================================================= */

/* 1) GRID: panel central más ancho, panel azul un poco más angosto */
#beneficios.beneficios-editorial .beneficios-grid{
  display: grid !important;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.22fr) minmax(280px, .64fr) !important;
  gap: 30px !important;
  align-items: start !important;
}

/* 2) LAS 3 COLUMNAS ARRANCAN A LA MISMA ALTURA */
#beneficios.beneficios-editorial .beneficios-intro,
#beneficios.beneficios-editorial .beneficios-compare,
#beneficios.beneficios-editorial .beneficios-spotlight{
  margin-top: 0 !important;
  padding-top: 0 !important;
  align-self: start !important;
}

/* 3) CHIP BENEFICIOS: arriba, limpio, sin mover raro */
#beneficios.beneficios-editorial .beneficios-intro .eyebrow{
  transform: none !important;
  margin: 0 0 18px !important;
}

/* 4) TÍTULO Y LEAD SIN AUTO-LIMITANTE */
#beneficios.beneficios-editorial .beneficios-intro h2{
  max-width: none !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  font-size: clamp(42px, 5vw, 74px) !important;
  line-height: .96 !important;
  letter-spacing: -.05em !important;
}

#beneficios.beneficios-editorial .beneficios-intro .lead{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.56 !important;
}

/* también soltar un poco la línea divisoria */
#beneficios.beneficios-editorial .intro-divider{
  max-width: none !important;
  width: 100% !important;
  margin: 24px 0 20px !important;
}

/* 5) PANEL CENTRAL MÁS AMPLIO Y RESPIRADO */
#beneficios.beneficios-editorial .beneficios-compare{
  margin-top: 0 !important;
  padding: 22px 30px 22px !important;
  border-radius: 28px !important;
}

#beneficios.beneficios-editorial .beneficios-compare::before{
  left: 24px !important;
  right: 24px !important;
}

/* CHIP "LO QUE CAMBIA" más limpio y menos amontonado */
#beneficios.beneficios-editorial .compare-kicker{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  margin: 0 0 18px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  white-space: nowrap !important;
}

/* más aire entre Antes / Después */
#beneficios.beneficios-editorial .compare-wrap{
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
  gap: 28px !important;
}

#beneficios.beneficios-editorial .compare-col h3{
  margin: 0 0 14px !important;
  font-size: 18px !important;
}

#beneficios.beneficios-editorial .compare-col ul{
  padding-left: 22px !important;
  gap: 14px !important;
}

#beneficios.beneficios-editorial .compare-col li{
  font-size: 15px !important;
  line-height: 1.54 !important;
}

/* pills inferiores del panel central */
#beneficios.beneficios-editorial .deliverables{
  margin-top: 22px !important;
  padding-top: 18px !important;
  gap: 10px !important;
}

/* 6) PANEL AZUL DERECHO: un poco más compacto para ceder aire al centro */
#beneficios.beneficios-editorial .beneficios-spotlight{
  margin-top: 0 !important;
}

#beneficios.beneficios-editorial .spot-card{
  margin-top: 0 !important;
  padding: 20px 20px 22px !important;
  border-radius: 28px !important;
}

/* 7) RESPONSIVE */
@media (max-width: 1180px){
  #beneficios.beneficios-editorial .beneficios-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro .eyebrow{
    margin-bottom: 16px !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro h2,
  #beneficios.beneficios-editorial .beneficios-intro .lead{
    max-width: none !important;
  }
}
/* =========================================================
   BENEFICIOS
   alineación real de alturas + balance entre panels
========================================================= */

/* 1) GRID MÁS BALANCEADO
   centro un poco más amplio, derecha ya no tan pequeña */
#beneficios.beneficios-editorial .beneficios-grid{
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) minmax(320px, .78fr) !important;
  gap: 30px !important;
  align-items: start !important;
}

/* 2) COLUMNA IZQUIERDA:
   el chip ya no empuja el título hacia abajo */
#beneficios.beneficios-editorial .beneficios-intro{
  position: relative !important;
  align-self: start !important;
  margin-top: 0 !important;
  padding-top: 6px !important;
}

#beneficios.beneficios-editorial .beneficios-intro .eyebrow{
  position: absolute !important;
  top: -54px !important;
  left: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* título en la escala correcta del sistema */
#beneficios.beneficios-editorial .beneficios-intro h2{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 16px !important;
  font-size: clamp(36px, 4.3vw, 58px) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

/* subtítulo y cuerpo alineados y justificados */
#beneficios.beneficios-editorial .beneficios-intro .lead{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 22px !important;
  font-size: 15px !important;
  line-height: 1.56 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

#beneficios.beneficios-editorial .intro-divider{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 22px !important;
}

#beneficios.beneficios-editorial .mini-points{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#beneficios.beneficios-editorial .mini-points li{
  width: 100% !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* 3) PANEL CENTRAL:
   misma altura de arranque que izquierda y derecha */
#beneficios.beneficios-editorial .beneficios-compare{
  align-self: start !important;
  margin-top: 0 !important;
  padding: 22px 28px 22px !important;
  border-radius: 28px !important;
}

#beneficios.beneficios-editorial .beneficios-compare::before{
  left: 24px !important;
  right: 24px !important;
}

/* chip "LO QUE CAMBIA" más limpio */
#beneficios.beneficios-editorial .compare-kicker{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  margin: 0 0 18px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  white-space: nowrap !important;
}

/* más aire lateral dentro del panel central */
#beneficios.beneficios-editorial .compare-wrap{
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
  gap: 30px !important;
}

#beneficios.beneficios-editorial .compare-col h3{
  margin: 0 0 14px !important;
  font-size: 18px !important;
}

#beneficios.beneficios-editorial .compare-col ul{
  padding-left: 22px !important;
  gap: 14px !important;
}

#beneficios.beneficios-editorial .compare-col li{
  font-size: 15px !important;
  line-height: 1.54 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* 4) PANEL AZUL DERECHO:
   subirlo para que arranque a la misma altura */
#beneficios.beneficios-editorial .beneficios-spotlight{
  align-self: start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#beneficios.beneficios-editorial .spot-card{
  margin-top: 0 !important;
  padding: 20px 20px 22px !important;
  border-radius: 28px !important;
}

/* 5) RESPONSIVE */
@media (max-width: 1180px){
  #beneficios.beneficios-editorial .beneficios-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro{
    padding-top: 0 !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro .eyebrow{
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 0 16px !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro h2,
  #beneficios.beneficios-editorial .beneficios-intro .lead{
    max-width: none !important;
  }
}
/* =========================================
   BENEFICIOS
   ajuste fino final
========================================= */

/* título: mismo tamaño que la sección anterior */
#beneficios.beneficios-editorial .beneficios-intro h2{
  font-size: clamp(38px, 4.4vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

/* panel central: un poco más grande, sin exagerar */
#beneficios.beneficios-editorial .beneficios-grid{
  grid-template-columns: minmax(0, .90fr) minmax(0, 1.14fr) minmax(300px, .72fr) !important;
  gap: 30px !important;
  align-items: start !important;
}

/* panel azul: subirlo para que arranque a la misma altura */
#beneficios.beneficios-editorial .beneficios-spotlight{
  align-self: start !important;
  margin-top: -8px !important;
  padding-top: 0 !important;
}

#beneficios.beneficios-editorial .spot-card{
  margin-top: 0 !important;
}

/* chip "LO QUE CAMBIA" del mismo tamaño que BENEFICIOS */
#beneficios.beneficios-editorial .compare-kicker{
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 0 16px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* un poco más de aire lateral en el panel central */
#beneficios.beneficios-editorial .beneficios-compare{
  padding: 22px 30px 22px !important;
}

#beneficios.beneficios-editorial .compare-wrap{
  gap: 26px !important;
}

/* mantener textos justificados y alineados */
#beneficios.beneficios-editorial .beneficios-intro .lead,
#beneficios.beneficios-editorial .mini-points li,
#beneficios.beneficios-editorial .compare-col li{
  text-align: justify !important;
  text-justify: inter-word !important;
}
/* =========================================================
   BENEFICIOS — override final de alineación y proporciones
   objetivo: mismo aire y acomodo que la referencia
========================================================= */

#beneficios.beneficios-editorial{
  padding: 74px 0 84px !important;
}

#beneficios.beneficios-editorial .beneficios-grid{
  display: grid !important;
  grid-template-columns: minmax(280px, .88fr) minmax(470px, 1.02fr) minmax(270px, .72fr) !important;
  gap: 30px !important;
  align-items: start !important;
}

/* =========================
   COLUMNA IZQUIERDA
========================= */
#beneficios.beneficios-editorial .beneficios-intro{
  align-self: start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#beneficios.beneficios-editorial .beneficios-intro .eyebrow{
  margin: 0 0 20px !important;
  transform: none !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
}

#beneficios.beneficios-editorial .beneficios-intro h2{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 18px !important;
  font-size: clamp(38px, 4.4vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

#beneficios.beneficios-editorial .beneficios-intro .lead{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 26px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

#beneficios.beneficios-editorial .intro-divider{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 22px !important;
}

#beneficios.beneficios-editorial .mini-points{
  gap: 14px !important;
}

#beneficios.beneficios-editorial .mini-points li{
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* =========================
   PANEL CENTRAL
========================= */
#beneficios.beneficios-editorial .beneficios-compare{
  align-self: start !important;
  margin-top: 0 !important;
  padding: 22px 28px 22px !important;
  border-radius: 28px !important;
}

#beneficios.beneficios-editorial .beneficios-compare::before{
  left: 28px !important;
  right: 28px !important;
  top: 12px !important;
}

#beneficios.beneficios-editorial .compare-kicker{
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 0 18px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  white-space: nowrap !important;
}

#beneficios.beneficios-editorial .compare-wrap{
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
  gap: 26px !important;
  align-items: start !important;
}

#beneficios.beneficios-editorial .compare-col h3{
  margin: 0 0 14px !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
}

#beneficios.beneficios-editorial .compare-col ul{
  margin: 0 !important;
  padding-left: 22px !important;
  gap: 14px !important;
}

#beneficios.beneficios-editorial .compare-col li{
  font-size: 15px !important;
  line-height: 1.54 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

#beneficios.beneficios-editorial .deliverables{
  margin-top: 22px !important;
  padding-top: 18px !important;
  gap: 10px !important;
}

/* =========================
   PANEL AZUL DERECHO
========================= */
#beneficios.beneficios-editorial .beneficios-spotlight{
  align-self: start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#beneficios.beneficios-editorial .spot-card{
  align-self: start !important;
  margin-top: 0 !important;
  padding: 20px 20px 22px !important;
  border-radius: 28px !important;
}

#beneficios.beneficios-editorial .spot-card::before{
  left: 20px !important;
  right: 20px !important;
}

#beneficios.beneficios-editorial .spot-eyebrow{
  margin: 0 0 18px !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
}

#beneficios.beneficios-editorial .spot-metric{
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 16px 0 !important;
}

#beneficios.beneficios-editorial .metric-value{
  font-size: 52px !important;
  line-height: .88 !important;
}

#beneficios.beneficios-editorial .metric-title{
  font-size: 15px !important;
  line-height: 1.14 !important;
}

#beneficios.beneficios-editorial .metric-sub{
  font-size: 13px !important;
  line-height: 1.34 !important;
}

#beneficios.beneficios-editorial .metric-value.wide{
  gap: 10px !important;
  padding: 8px 12px !important;
}

#beneficios.beneficios-editorial .metric-value.wide span{
  width: 42px !important;
  height: 42px !important;
  font-size: 23px !important;
}

#beneficios.beneficios-editorial .spot-link{
  margin-top: 18px !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
}

/* =========================
   ALINEACIÓN DE ARRANQUE
   los 3 bloques arrancan igual arriba
========================= */
#beneficios.beneficios-editorial .beneficios-intro,
#beneficios.beneficios-editorial .beneficios-compare,
#beneficios.beneficios-editorial .beneficios-spotlight{
  position: relative !important;
  top: 0 !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1180px){
  #beneficios.beneficios-editorial .beneficios-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #beneficios.beneficios-editorial .beneficios-intro h2,
  #beneficios.beneficios-editorial .beneficios-intro .lead{
    max-width: none !important;
  }
}

@media (max-width: 760px){
  #beneficios.beneficios-editorial{
    padding: 68px 0 74px !important;
  }

  #beneficios.beneficios-editorial .beneficios-compare,
  #beneficios.beneficios-editorial .spot-card{
    padding: 18px !important;
    border-radius: 24px !important;
  }

  #beneficios.beneficios-editorial .compare-wrap{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #beneficios.beneficios-editorial .compare-divider{
    display: none !important;
  }
}
/* =========================================================
   BENEFICIOS
   ajuste fino final de proporciones + panel azul + chip
========================================================= */

/* proporciones más cercanas a la referencia:
   izquierda un poco más compacta, derecha un poco más grande */
#beneficios.beneficios-editorial .beneficios-grid{
  display: grid !important;
  grid-template-columns: minmax(250px, .78fr) minmax(470px, 1.02fr) minmax(300px, .82fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

/* columna izquierda: quitar un poco de aire horizontal */
#beneficios.beneficios-editorial .beneficios-intro{
  align-self: start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#beneficios.beneficios-editorial .beneficios-intro h2{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 14px !important;
  font-size: clamp(38px, 4.4vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

#beneficios.beneficios-editorial .beneficios-intro .lead{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 20px !important;
  font-size: 15px !important;
  line-height: 1.52 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

#beneficios.beneficios-editorial .intro-divider{
  margin: 0 0 20px !important;
}

#beneficios.beneficios-editorial .mini-points li{
  font-size: 15px !important;
  line-height: 1.46 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* panel central: apenas más compacto que el intento pasado */
#beneficios.beneficios-editorial .beneficios-compare{
  align-self: start !important;
  margin-top: 0 !important;
  padding: 22px 26px 22px !important;
}

#beneficios.beneficios-editorial .compare-wrap{
  gap: 24px !important;
}

#beneficios.beneficios-editorial .compare-col li{
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* chip "LO QUE CAMBIA" más pequeño y grisáceo */
#beneficios.beneficios-editorial .compare-kicker{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  margin: 0 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16,35,59,.08) !important;
  background: linear-gradient(180deg, rgba(245,247,250,.98), rgba(236,240,245,.94)) !important;
  color: rgba(16,35,59,.56) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow:
    0 6px 14px rgba(15,34,63,.03),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* panel azul: más grande y mejor alineado arriba */
#beneficios.beneficios-editorial .beneficios-spotlight{
  align-self: start !important;
  margin-top: -2px !important;
  padding-top: 0 !important;
}

#beneficios.beneficios-editorial .spot-card{
  margin-top: 0 !important;
  padding: 22px 22px 22px !important;
  border-radius: 28px !important;
}

/* asegurar mismo arranque visual */
#beneficios.beneficios-editorial .beneficios-intro,
#beneficios.beneficios-editorial .beneficios-compare,
#beneficios.beneficios-editorial .beneficios-spotlight{
  position: relative !important;
  top: 0 !important;
}

/* responsive */
@media (max-width: 1180px){
  #beneficios.beneficios-editorial .beneficios-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #beneficios.beneficios-editorial .beneficios-spotlight{
    margin-top: 0 !important;
  }
}
/* =========================================================
   BENEFICIOS
   fix del panel azul SIN tocar el panel central
========================================================= */

/* solo ajustamos proporciones del grid:
   izquierda un poco más chica, centro igual, azul más grande */
#beneficios.beneficios-editorial .beneficios-grid{
  grid-template-columns: minmax(230px, .72fr) minmax(470px, .98fr) minmax(350px, .92fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

/* reset total del panel azul */
#beneficios.beneficios-editorial .beneficios-spotlight{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;

  /* esto hace que pueda igualar la altura del panel central */
  align-self: stretch !important;
  display: flex !important;
}

/* mismas reglas base de caja del panel central, pero solo para el azul */
#beneficios.beneficios-editorial .spot-card{
  position: relative !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  padding: 22px 26px 22px !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;
}

/* que la línea superior del azul respete el mismo aire del central */
#beneficios.beneficios-editorial .spot-card::before{
  left: 24px !important;
  right: 24px !important;
  top: 12px !important;
}

/* mantener el arranque del azul exactamente arriba */
#beneficios.beneficios-editorial .beneficios-spotlight,
#beneficios.beneficios-editorial .spot-card{
  align-self: stretch !important;
}

/* responsive */
@media (max-width: 1180px){
  #beneficios.beneficios-editorial .beneficios-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #beneficios.beneficios-editorial .beneficios-spotlight{
    align-self: start !important;
    display: block !important;
  }

  #beneficios.beneficios-editorial .spot-card{
    height: auto !important;
    min-height: 0 !important;
  }
}
/* =========================================================
   BENEFICIOS
   acortar panel azul para que no llegue hasta abajo
========================================================= */

/* el contenedor del panel azul ya no se estira */
#beneficios.beneficios-editorial .beneficios-spotlight{
  align-self: start !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

/* la card azul deja de heredar la altura del panel central */
#beneficios.beneficios-editorial .spot-card{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  padding: 20px 20px 50px !important;
}

/* el botón ya no empuja la card hasta abajo */
#beneficios.beneficios-editorial .spot-link{
  margin-top: 18px !important;
  align-self: flex-start !important;
}

/* compactar un poco el bloque final para que cierre antes */
#beneficios.beneficios-editorial .spot-metric{
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

#beneficios.beneficios-editorial .spot-metric.is-wide{
  padding-bottom: 4px !important;
  margin-bottom: 0 !important;
}
/* BENEFICIOS — más aire arriba para separarlo de la sección anterior */
#beneficios.beneficios-editorial{
  padding-top: 108px !important;
}

/* mantener el chip sin pegarse al título */
#beneficios.beneficios-editorial .beneficios-intro .eyebrow{
  margin-bottom: 20px !important;
}
/* =========================================================
   HOME — ¿TE PASA ESTO?
   adaptación al mismo lenguaje visual del sitio
========================================================= */

#identificacion.identification{
  position: relative;
  padding: 82px 0 88px !important;
  background:
    radial-gradient(760px 220px at 10% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(660px 220px at 100% 20%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%) !important;
  overflow: hidden;
}

#identificacion.identification::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 18%, transparent 82%, rgba(255,255,255,.06));
  pointer-events: none;
}

#identificacion.identification .container{
  position: relative;
  z-index: 1;
}

/* =========================
   HEAD
========================= */

#identificacion.identification .section-head{
  max-width: 980px !important;
  margin: 0 auto 30px !important;
  text-align: center !important;
}

#identificacion.identification .section-head .eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  margin: 0 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

#identificacion.identification .section-head h2{
  margin: 0 0 12px !important;
  color: #10233b !important;
  font-size: clamp(38px, 4.4vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

#identificacion.identification .section-head .lead{
  margin: 0 auto !important;
  max-width: 54ch !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* =========================
   GRID DE PAINS
========================= */

#identificacion.identification .pain-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 0 20px !important;
}

#identificacion.identification .pain-card{
  position: relative !important;
  min-height: 196px !important;
  padding: 20px 20px 18px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(97,145,228,.07), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.95)) !important;
  box-shadow:
    0 18px 34px rgba(15,34,63,.06),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  overflow: hidden !important;
}

#identificacion.identification .pain-card::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 10px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140,176,239,.82), rgba(140,176,239,.10));
}

#identificacion.identification .pain-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 0 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  color: #2f61c8 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.66) !important;
}

#identificacion.identification .pain-card h3{
  margin: 0 0 10px !important;
  color: #10233b !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  font-weight: 800 !important;
}

#identificacion.identification .pain-card p{
  margin: 0 !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 15px !important;
  line-height: 1.48 !important;
}

/* =========================
   CALLOUT FINAL
========================= */

#identificacion.identification .pain-callout{
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 22px 22px 20px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(14,45,88,.18) !important;
  background:
    radial-gradient(260px 100px at 100% 0%, rgba(78,126,225,.14), transparent 72%),
    linear-gradient(135deg, #08264a 0%, #0d315a 42%, #143d6d 100%) !important;
  box-shadow:
    0 22px 40px rgba(10,27,52,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow: hidden !important;
}

#identificacion.identification .pain-callout::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .22;
  pointer-events: none;
}

#identificacion.identification .pain-copy,
#identificacion.identification .pain-actions{
  position: relative;
  z-index: 1;
}

#identificacion.identification .pain-copy h3{
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1.14 !important;
  letter-spacing: -.02em !important;
  font-weight: 800 !important;
}

#identificacion.identification .pain-copy p{
  margin: 0 0 14px !important;
  color: rgba(232,241,255,.86) !important;
  font-size: 15px !important;
  line-height: 1.48 !important;
  max-width: 60ch !important;
}

#identificacion.identification .pain-bullets{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

#identificacion.identification .pain-bullets li{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(7,20,40,.10) !important;
}

#identificacion.identification .pain-bullets li::before{
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

#identificacion.identification .pain-actions{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#identificacion.identification .pain-actions .btn{
  min-height: 52px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow:
    0 14px 28px rgba(8,21,42,.14),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

#identificacion.identification .pain-actions .btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,250,.94)) !important;
  color: #10233b !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

#identificacion.identification .pain-actions .btn-secondary{
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1180px){
  #identificacion.identification .pain-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #identificacion.identification .pain-callout{
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
}

@media (max-width: 760px){
  #identificacion.identification{
    padding: 70px 0 76px !important;
  }

  #identificacion.identification .section-head{
    margin-bottom: 24px !important;
  }

  #identificacion.identification .section-head .lead{
    font-size: 15px !important;
    max-width: 100% !important;
  }

  #identificacion.identification .pain-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #identificacion.identification .pain-card{
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  #identificacion.identification .pain-icon{
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
  }

  #identificacion.identification .pain-card h3{
    font-size: 17px !important;
  }

  #identificacion.identification .pain-card p{
    font-size: 14px !important;
  }

  #identificacion.identification .pain-callout{
    padding: 18px !important;
    border-radius: 24px !important;
  }

  #identificacion.identification .pain-actions{
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #identificacion.identification .pain-actions .btn{
    width: 100% !important;
    justify-content: center !important;
  }
}
/* =========================================================
   HOME — ¿TE PASA ESTO?
   compactar cards + optimizar panel final
========================================================= */

/* =========================
   CARDS: número y título en la misma fila
========================= */
#identificacion.identification .pain-grid{
  gap: 16px !important;
}

#identificacion.identification .pain-card{
  min-height: 156px !important;
  padding: 18px 20px 16px !important;

  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon title"
    "text text" !important;
  align-items: start !important;
  column-gap: 14px !important;
  row-gap: 10px !important;
}

#identificacion.identification .pain-icon{
  grid-area: icon !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  border-radius: 17px !important;
  font-size: 18px !important;
  align-self: start !important;
  justify-self: start !important;
}

#identificacion.identification .pain-card h3{
  grid-area: title !important;
  margin: 0 !important;
  align-self: center !important;
  font-size: 17px !important;
  line-height: 1.16 !important;
  letter-spacing: -.02em !important;
}

#identificacion.identification .pain-card p{
  grid-area: text !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.44 !important;
}

/* =========================
   PANEL AZUL INFERIOR MÁS COMPACTO
========================= */
#identificacion.identification .pain-callout{
  grid-template-columns: minmax(0, 1.18fr) auto !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-radius: 28px !important;
  min-height: 0 !important;
}

#identificacion.identification .pain-copy h3{
  margin: 0 0 6px !important;
  font-size: 18px !important;
  line-height: 1.14 !important;
}

#identificacion.identification .pain-copy p{
  margin: 0 0 12px !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
  max-width: 58ch !important;
}

/* =========================
   LOS 3 CHIPS EN UNA SOLA FILA
========================= */
#identificacion.identification .pain-bullets{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 860px !important;
}

#identificacion.identification .pain-bullets li{
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#identificacion.identification .pain-bullets li::before{
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px !important;
  font-size: 11px !important;
  flex: 0 0 auto !important;
}

/* =========================
   CTAs MÁS COMPACTOS Y MEJOR ACOMODADOS
========================= */
#identificacion.identification .pain-actions{
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

#identificacion.identification .pain-actions .btn{
  min-height: 50px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1180px){
  #identificacion.identification .pain-card{
    min-height: 150px !important;
  }

  #identificacion.identification .pain-callout{
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  #identificacion.identification .pain-bullets{
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  #identificacion.identification .pain-bullets li{
    white-space: normal !important;
    justify-content: flex-start !important;
    text-align: left !important;
    min-height: 38px !important;
  }

  #identificacion.identification .pain-actions{
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px){
  #identificacion.identification .pain-card{
    grid-template-columns: 50px minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 16px !important;
    row-gap: 9px !important;
  }

  #identificacion.identification .pain-icon{
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
    font-size: 17px !important;
  }

  #identificacion.identification .pain-card h3{
    font-size: 16px !important;
  }

  #identificacion.identification .pain-card p{
    font-size: 14px !important;
  }

  #identificacion.identification .pain-callout{
    padding: 16px !important;
    border-radius: 24px !important;
  }

  #identificacion.identification .pain-actions{
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #identificacion.identification .pain-actions .btn{
    width: 100% !important;
    justify-content: center !important;
  }
}
/* =========================================================
   ¿TE PASA ESTO?
   fix de chips del panel azul
========================================================= */

/* dar más control al ancho de cada chip */
#identificacion.identification .pain-bullets{
  display: grid !important;
  grid-template-columns: 1.08fr .92fr 1.18fr !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 980px !important;
  align-items: stretch !important;
}

/* cada chip bien contenido */
#identificacion.identification .pain-bullets li{
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}

/* icono del check mejor proporcionado */
#identificacion.identification .pain-bullets li::before{
  width: 16px !important;
  height: 16px !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  font-size: 11px !important;
}

/* un poco más de ancho al 1 y al 3, menos al 2 */
#identificacion.identification .pain-bullets li:nth-child(1){
  padding-inline: 16px !important;
}

#identificacion.identification .pain-bullets li:nth-child(2){
  padding-inline: 12px !important;
}

#identificacion.identification .pain-bullets li:nth-child(3){
  padding-inline: 16px !important;
}

/* responsive */
@media (max-width: 1180px){
  #identificacion.identification .pain-bullets{
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  #identificacion.identification .pain-bullets li{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    justify-content: flex-start !important;
    text-align: left !important;
    min-height: 40px !important;
  }
}
/* =========================================================
   FAQ — adaptación al sistema visual del sitio
========================================================= */

/* separador superior */
.hc-divider{
  position: relative;
  padding: 8px 0 0 !important;
  background:
    linear-gradient(180deg, #eef3f8 0%, #f5f8fc 100%) !important;
}

.hc-divider .divider-line{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
}

.hc-divider .divider-line::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    rgba(16,35,59,.08) 0%,
    rgba(16,35,59,.14) 18%,
    rgba(16,35,59,.14) 82%,
    rgba(16,35,59,.08) 100%
  );
}

.hc-divider .divider-line span{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(46,96,200,.14);
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92));
  color: #4167bb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64);
}

/* sección FAQ */
#faq.faq-section{
  position: relative;
  padding: 72px 0 84px !important;
  background:
    radial-gradient(760px 220px at 10% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(640px 220px at 100% 20%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%) !important;
  overflow: hidden;
}

#faq.faq-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 18%, transparent 82%, rgba(255,255,255,.05));
  pointer-events: none;
}

#faq.faq-section .container{
  position: relative;
  z-index: 1;
}

/* layout */
#faq.faq-section .faq-grid{
  display: grid !important;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.08fr) !important;
  gap: 34px !important;
  align-items: start !important;
}

/* columna izquierda */
#faq.faq-section .faq-intro{
  align-self: start !important;
  padding-top: 6px !important;
}

#faq.faq-section .faq-intro .eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

#faq.faq-section .faq-intro h3{
  margin: 0 0 14px !important;
  color: #10233b !important;
  font-size: clamp(38px, 4.4vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

#faq.faq-section .faq-intro .lead{
  margin: 0 0 22px !important;
  max-width: 22ch !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

#faq.faq-section .faq-cta{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #08264a 0%, #163a67 42%, #2e63bb 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow:
    0 16px 30px rgba(10,27,52,.16),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

#faq.faq-section .faq-cta:hover{
  transform: translateY(-1px) !important;
  box-shadow:
    0 18px 34px rgba(10,27,52,.18),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* columna derecha */
#faq.faq-section .faq-list{
  display: grid !important;
  gap: 12px !important;
}

/* acordeones */
#faq.faq-section .faq-item{
  position: relative !important;
  border-radius: 24px !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(97,145,228,.07), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.95)) !important;
  box-shadow:
    0 14px 28px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  overflow: hidden !important;
}

#faq.faq-section .faq-item::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 10px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140,176,239,.82), rgba(140,176,239,.08));
}

#faq.faq-section .faq-item summary{
  list-style: none !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 24px 74px 22px 24px !important;
  color: #10233b !important;
  font-size: 18px !important;
  line-height: 1.24 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

#faq.faq-section .faq-item summary::-webkit-details-marker{
  display: none !important;
}

/* botón circular del + */
#faq.faq-section .faq-item summary::after{
  content: "+" !important;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92));
  border: 1px solid rgba(46,96,200,.12);
  color: #5a6d8f;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.62);
  transition: transform .18s ease, color .18s ease, background .18s ease;
}

#faq.faq-section .faq-item[open] summary::after{
  content: "–" !important;
  color: #2f61c8;
  transform: translateY(-50%) rotate(0deg);
}

#faq.faq-section .faq-body{
  padding: 0 24px 22px 24px !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 15px !important;
  line-height: 1.52 !important;
  border-top: 1px solid rgba(16,35,59,.08) !important;
  margin-top: 0 !important;
  padding-top: 16px !important;
}

#faq.faq-section .faq-body strong{
  color: #10233b !important;
  font-weight: 800 !important;
}

/* separador inferior limpio */
#faq.faq-section + .hc-divider{
  padding-top: 0 !important;
  background: linear-gradient(180deg, #eef3f8 0%, #f5f8fc 100%) !important;
}

/* responsive */
@media (max-width: 1180px){
  #faq.faq-section .faq-grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  #faq.faq-section .faq-intro .lead{
    max-width: 42ch !important;
  }
}

@media (max-width: 760px){
  #faq.faq-section{
    padding: 66px 0 74px !important;
  }

  #faq.faq-section .faq-intro h3{
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  #faq.faq-section .faq-intro .lead{
    max-width: 100% !important;
    font-size: 15px !important;
  }

  #faq.faq-section .faq-item{
    border-radius: 20px !important;
  }

  #faq.faq-section .faq-item summary{
    padding: 20px 68px 18px 18px !important;
    font-size: 17px !important;
  }

  #faq.faq-section .faq-item summary::after{
    right: 18px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  #faq.faq-section .faq-body{
    padding: 14px 18px 18px 18px !important;
    font-size: 14px !important;
  }
}
/* =========================================================
   FAQ — reset y adaptación correcta con divider-line adentro
========================================================= */

#faq.faq-section{
  position: relative !important;
  padding: 34px 0 84px !important;
  background:
    radial-gradient(760px 220px at 10% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(640px 220px at 100% 20%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%) !important;
  overflow: hidden !important;
}

#faq.faq-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 18%, transparent 82%, rgba(255,255,255,.05));
  pointer-events: none;
}

#faq.faq-section .container{
  position: relative !important;
  z-index: 1 !important;
}

/* =========================
   DIVIDER SUPERIOR
========================= */

#faq.faq-section .divider-line{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  margin: 0 0 42px !important;
}

#faq.faq-section .divider-line::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(
    90deg,
    rgba(16,35,59,.08) 0%,
    rgba(16,35,59,.14) 18%,
    rgba(16,35,59,.14) 82%,
    rgba(16,35,59,.08) 100%
  ) !important;
}

#faq.faq-section .divider-line span{
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

/* =========================
   LAYOUT GENERAL
========================= */

#faq.faq-section .faq-grid{
  display: grid !important;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.12fr) !important;
  gap: 36px !important;
  align-items: start !important;
}

/* =========================
   COLUMNA IZQUIERDA
========================= */

#faq.faq-section .faq-intro{
  align-self: start !important;
  padding-top: 6px !important;
}

#faq.faq-section .faq-intro .eyebrow{
  display: inline-block !important;
  margin: 0 0 14px !important;
  color: rgba(16,35,59,.56) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}

#faq.faq-section .faq-intro h3{
  margin: 0 0 16px !important;
  color: #10233b !important;
  font-size: clamp(34px, 3.4vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  max-width: 10ch !important;
}

#faq.faq-section .faq-intro .lead{
  margin: 0 0 24px !important;
  max-width: 24ch !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 16px !important;
  line-height: 1.56 !important;
}

#faq.faq-section .faq-cta{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #08264a 0%, #163a67 42%, #2e63bb 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow:
    0 16px 30px rgba(10,27,52,.16),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

#faq.faq-section .faq-cta span{
  margin-left: 8px !important;
}

/* =========================
   LISTA DERECHA
========================= */

#faq.faq-section .faq-list{
  display: grid !important;
  gap: 14px !important;
}

/* acordeones */
#faq.faq-section .faq-item{
  position: relative !important;
  border-radius: 24px !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(97,145,228,.05), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.95)) !important;
  box-shadow:
    0 14px 28px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  overflow: hidden !important;
}

#faq.faq-section .faq-item::before{
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 10px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(140,176,239,.82), rgba(140,176,239,.08)) !important;
}

#faq.faq-section .faq-item summary{
  list-style: none !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 24px 82px 22px 26px !important;
  color: #10233b !important;
  font-size: 18px !important;
  line-height: 1.24 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

#faq.faq-section .faq-item summary::-webkit-details-marker{
  display: none !important;
}

#faq.faq-section .faq-item summary::after{
  content: "+" !important;
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  border: 1px solid rgba(46,96,200,.10) !important;
  color: #2f61c8 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

#faq.faq-section .faq-item[open] summary::after{
  content: "–" !important;
}

#faq.faq-section .faq-body{
  padding: 16px 26px 22px !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 15px !important;
  line-height: 1.56 !important;
  border-top: 1px solid rgba(16,35,59,.08) !important;
}

#faq.faq-section .faq-body strong{
  color: #10233b !important;
  font-weight: 800 !important;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1180px){
  #faq.faq-section .faq-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  #faq.faq-section .faq-intro h3{
    max-width: 12ch !important;
  }

  #faq.faq-section .faq-intro .lead{
    max-width: 44ch !important;
  }
}

@media (max-width: 760px){
  #faq.faq-section{
    padding: 70px 0 76px !important;
  }

  #faq.faq-section .divider-line{
    margin-bottom: 28px !important;
  }

  #faq.faq-section .faq-intro h3{
    font-size: clamp(34px, 10vw, 48px) !important;
    max-width: none !important;
  }

  #faq.faq-section .faq-intro .lead{
    max-width: 100% !important;
    font-size: 15px !important;
  }

  #faq.faq-section .faq-item summary{
    padding: 20px 72px 18px 20px !important;
    font-size: 17px !important;
  }

  #faq.faq-section .faq-item summary::after{
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }

  #faq.faq-section .faq-body{
    padding: 14px 20px 20px !important;
    font-size: 14px !important;
  }
}
/* =========================================================
   FAQ — limpieza visual final
   quitar panel detrás, quitar líneas azules, arreglar divider
========================================================= */

#faq.faq-section{
  padding: 34px 0 84px !important;
}

/* -------------------------
   CHIP SUPERIOR / DIVIDER
------------------------- */
#faq.faq-section .divider-line{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 0 36px !important;
  min-height: 42px !important;
  overflow: visible !important;
}

#faq.faq-section .divider-line::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(
    90deg,
    rgba(16,35,59,.06) 0%,
    rgba(16,35,59,.14) 18%,
    rgba(16,35,59,.14) 82%,
    rgba(16,35,59,.06) 100%
  ) !important;
}

#faq.faq-section .divider-line span{
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

/* -------------------------
   GRID GENERAL
------------------------- */
#faq.faq-section .faq-grid{
  display: grid !important;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.08fr) !important;
  gap: 34px !important;
  align-items: start !important;
}

/* -------------------------
   INTRO IZQUIERDA
------------------------- */
#faq.faq-section .faq-intro{
  align-self: start !important;
  padding-top: 6px !important;
}

#faq.faq-section .faq-intro .eyebrow{
  display: inline-block !important;
  margin: 0 0 14px !important;
  color: rgba(16,35,59,.56) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}

#faq.faq-section .faq-intro h3{
  margin: 0 0 16px !important;
  color: #10233b !important;
  font-size: clamp(34px, 3.4vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  max-width: 10ch !important;
}

#faq.faq-section .faq-intro .lead{
  margin: 0 0 24px !important;
  max-width: 24ch !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 16px !important;
  line-height: 1.56 !important;
}

/* -------------------------
   LISTA DERECHA
------------------------- */
/* quitar el panel contenedor detrás */
#faq.faq-section .faq-list{
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* preguntas individuales */
#faq.faq-section .faq-item{
  position: relative !important;
  margin: 0 !important;
  border-radius: 24px !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(97,145,228,.05), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.95)) !important;
  box-shadow:
    0 14px 28px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  overflow: hidden !important;
}

/* quitar por completo la línea azul fea */
#faq.faq-section .faq-item::before{
  content: none !important;
  display: none !important;
}

#faq.faq-section .faq-item summary{
  list-style: none !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 24px 82px 22px 26px !important;
  color: #10233b !important;
  font-size: 18px !important;
  line-height: 1.24 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

#faq.faq-section .faq-item summary::-webkit-details-marker{
  display: none !important;
}

#faq.faq-section .faq-item summary::after{
  content: "+" !important;
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  border: 1px solid rgba(46,96,200,.10) !important;
  color: #2f61c8 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

#faq.faq-section .faq-item[open] summary::after{
  content: "–" !important;
}

#faq.faq-section .faq-body{
  padding: 16px 26px 22px !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 15px !important;
  line-height: 1.56 !important;
  border-top: 1px solid rgba(16,35,59,.08) !important;
}

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 1180px){
  #faq.faq-section .faq-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  #faq.faq-section .faq-intro h3{
    max-width: 12ch !important;
  }

  #faq.faq-section .faq-intro .lead{
    max-width: 44ch !important;
  }
}

@media (max-width: 760px){
  #faq.faq-section{
    padding: 70px 0 76px !important;
  }

  #faq.faq-section .divider-line{
    margin-bottom: 28px !important;
  }

  #faq.faq-section .faq-intro h3{
    font-size: clamp(34px, 10vw, 48px) !important;
    max-width: none !important;
  }

  #faq.faq-section .faq-intro .lead{
    max-width: 100% !important;
    font-size: 15px !important;
  }

  #faq.faq-section .faq-item summary{
    padding: 20px 72px 18px 20px !important;
    font-size: 17px !important;
  }

  #faq.faq-section .faq-item summary::after{
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }

  #faq.faq-section .faq-body{
    padding: 14px 20px 20px !important;
    font-size: 14px !important;
  }
}
/* =========================================================
   FAQ — fix fuerte del bloque superior + contraste sección
========================================================= */

#faq.faq-section{
  position: relative !important;
  padding: 52px 0 88px !important;
  background:
    radial-gradient(900px 260px at 8% 0%, rgba(76,124,221,.07), transparent 58%),
    radial-gradient(780px 260px at 100% 24%, rgba(76,124,221,.05), transparent 58%),
    linear-gradient(180deg, #f8fbff 0%, #eef3f8 100%) !important;
  border-top: 1px solid rgba(16,35,59,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 -24px 40px rgba(16,35,59,.03) !important;
  overflow: hidden !important;
}

/* quitar la línea gris que acompaña al chip */
#faq.faq-section .divider-line{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: auto !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

#faq.faq-section .divider-line::before{
  content: none !important;
  display: none !important;
}

/* mover el chip superior al lugar visual del chip FAQ */
#faq.faq-section > .container:first-child{
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: -6px !important;
}

#faq.faq-section .divider-line span{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

/* ocultar el chip FAQ viejo */
#faq.faq-section .faq-intro .eyebrow{
  display: none !important;
}

/* ajustar layout para que el chip nuevo se sienta en el lugar correcto */
#faq.faq-section .faq-grid{
  display: grid !important;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.08fr) !important;
  gap: 34px !important;
  align-items: start !important;
}

#faq.faq-section .faq-intro{
  align-self: start !important;
  padding-top: 0 !important;
}

#faq.faq-section .faq-intro h3{
  margin: 0 0 16px !important;
  color: #10233b !important;
  font-size: clamp(34px, 3.4vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  max-width: 10ch !important;
}

#faq.faq-section .faq-intro .lead{
  margin: 0 0 24px !important;
  max-width: 24ch !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 16px !important;
  line-height: 1.56 !important;
}

/* dar más contraste también a la zona de preguntas */
#faq.faq-section .faq-list{
  background: transparent !important;
}

#faq.faq-section .faq-item{
  border: 1px solid rgba(15,34,63,.09) !important;
  background:
    radial-gradient(220px 90px at 100% 0%, rgba(97,145,228,.06), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(244,248,252,.96)) !important;
  box-shadow:
    0 14px 28px rgba(15,34,63,.045),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

/* responsive */
@media (max-width: 1180px){
  #faq.faq-section{
    padding-top: 46px !important;
  }

  #faq.faq-section > .container:first-child{
    margin-bottom: 10px !important;
  }

  #faq.faq-section .faq-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}
/* =========================================================
   FAQ — versión limpia y correcta
   chip arriba a la izquierda, sin línea gris,
   sin panel/sombra detrás de preguntas
========================================================= */

#faq.faq-section{
  position: relative !important;
  padding: 78px 0 86px !important;
  background:
    radial-gradient(760px 220px at 10% 0%, rgba(46,96,200,.05), transparent 58%),
    radial-gradient(640px 220px at 100% 20%, rgba(46,96,200,.04), transparent 56%),
    linear-gradient(180deg, #f7faff 0%, #eef3f8 100%) !important;
  border-top: 1px solid rgba(16,35,59,.06) !important;
  overflow: hidden !important;
}

#faq.faq-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 18%, transparent 82%, rgba(255,255,255,.05));
  pointer-events: none;
}

#faq.faq-section .container{
  position: relative !important;
  z-index: 1 !important;
}

/* -------------------------
   layout
------------------------- */
#faq.faq-section .faq-grid{
  display: grid !important;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.08fr) !important;
  gap: 36px !important;
  align-items: start !important;
}

/* -------------------------
   intro izquierda
------------------------- */
#faq.faq-section .faq-intro{
  align-self: start !important;
  padding-top: 6px !important;
}

/* chip nuevo en lugar de FAQ */
#faq.faq-section .faq-chip-line{
  margin: 0 0 18px !important;
}

#faq.faq-section .faq-chip-line::before{
  content: none !important;
  display: none !important;
}

#faq.faq-section .faq-chip-line span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,96,200,.14) !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  color: #4167bb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.04),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

#faq.faq-section .faq-intro h3{
  margin: 0 0 16px !important;
  color: #10233b !important;
  font-size: clamp(34px, 3.5vw, 54px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  max-width: 8ch !important;
}

#faq.faq-section .faq-intro .lead{
  margin: 0 0 24px !important;
  max-width: 24ch !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 16px !important;
  line-height: 1.56 !important;
}

#faq.faq-section .faq-cta{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #08264a 0%, #163a67 42%, #2e63bb 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow:
    0 16px 30px rgba(10,27,52,.16),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

#faq.faq-section .faq-cta span{
  margin-left: 8px !important;
}

/* -------------------------
   lista derecha
------------------------- */
#faq.faq-section .faq-list{
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* quitar panel/sombra rara detrás */
#faq.faq-section .faq-list::before,
#faq.faq-section .faq-list::after{
  content: none !important;
  display: none !important;
}

/* preguntas individuales */
#faq.faq-section .faq-item{
  position: relative !important;
  margin: 0 !important;
  border-radius: 26px !important;
  border: 1px solid rgba(15,34,63,.08) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* quitar línea azul de arriba */
#faq.faq-section .faq-item::before{
  content: none !important;
  display: none !important;
}

#faq.faq-section .faq-item summary{
  list-style: none !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 26px 84px 24px 28px !important;
  color: #10233b !important;
  font-size: 18px !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

#faq.faq-section .faq-item summary::-webkit-details-marker{
  display: none !important;
}

/* botón + limpio */
#faq.faq-section .faq-item summary::after{
  content: "+" !important;
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(236,242,251,.96), rgba(224,235,249,.92)) !important;
  border: 1px solid rgba(46,96,200,.10) !important;
  color: #2f61c8 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

#faq.faq-section .faq-item[open] summary::after{
  content: "–" !important;
}

#faq.faq-section .faq-body{
  padding: 16px 28px 24px !important;
  color: rgba(16,35,59,.72) !important;
  font-size: 15px !important;
  line-height: 1.56 !important;
  border-top: 1px solid rgba(16,35,59,.08) !important;
}

#faq.faq-section .faq-body strong{
  color: #10233b !important;
  font-weight: 800 !important;
}

/* responsive */
@media (max-width: 1180px){
  #faq.faq-section .faq-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  #faq.faq-section .faq-intro h3{
    max-width: 10ch !important;
  }

  #faq.faq-section .faq-intro .lead{
    max-width: 44ch !important;
  }
}

@media (max-width: 760px){
  #faq.faq-section{
    padding: 70px 0 76px !important;
  }

  #faq.faq-section .faq-intro h3{
    font-size: clamp(34px, 10vw, 48px) !important;
    max-width: none !important;
  }

  #faq.faq-section .faq-intro .lead{
    max-width: 100% !important;
    font-size: 15px !important;
  }

  #faq.faq-section .faq-item summary{
    padding: 20px 72px 18px 20px !important;
    font-size: 17px !important;
  }

  #faq.faq-section .faq-item summary::after{
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }

  #faq.faq-section .faq-body{
    padding: 14px 20px 20px !important;
    font-size: 14px !important;
  }
}
/* =========================================================
   FAQ — más textura/profundidad en preguntas + más contraste
========================================================= */

#faq.faq-section{
  background:
    radial-gradient(900px 260px at 0% 0%, rgba(76,124,221,.08), transparent 58%),
    radial-gradient(760px 260px at 100% 18%, rgba(76,124,221,.06), transparent 56%),
    linear-gradient(180deg, #f8fbff 0%, #edf3f9 100%) !important;
  border-top: 1px solid rgba(16,35,59,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 -18px 34px rgba(16,35,59,.03) !important;
}

/* un velo sutil para que se separe más de la sección anterior */
#faq.faq-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.34), transparent 28%),
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 20%, transparent 80%, rgba(255,255,255,.05));
  pointer-events: none;
}

/* preguntas: menos planas, más cuerpo */
#faq.faq-section .faq-item{
  border: 1px solid rgba(16,35,59,.08) !important;
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(119,160,233,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,249,253,.97) 100%) !important;
  box-shadow:
    0 14px 26px rgba(16,35,59,.045),
    0 2px 6px rgba(16,35,59,.025),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(16,35,59,.03) !important;
}

/* una línea superior muy sutil, elegante, no como la azul anterior */
#faq.faq-section .faq-item::after{
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(104,144,220,.18),
    rgba(104,144,220,.04) 35%,
    rgba(104,144,220,.04) 65%,
    rgba(104,144,220,.18)
  );
  pointer-events: none;
}

/* summary con un poco más de densidad */
#faq.faq-section .faq-item summary{
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* botón + con más presencia */
#faq.faq-section .faq-item summary::after{
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(239,244,252,.98), rgba(225,234,248,.94)) !important;
  box-shadow:
    0 8px 18px rgba(15,34,63,.05),
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(16,35,59,.05) !important;
}

/* al abrir, que se sienta más vivo */
#faq.faq-section .faq-item[open]{
  border-color: rgba(46,96,200,.14) !important;
  box-shadow:
    0 18px 30px rgba(16,35,59,.055),
    0 3px 8px rgba(16,35,59,.03),
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(46,96,200,.04) !important;
}

#faq.faq-section .faq-item[open] summary::after{
  color: #2f61c8 !important;
  border-color: rgba(46,96,200,.14) !important;
}
/* =========================================================
   HERO — adaptación al sistema visual del sitio
========================================================= */

#inicio.hero{
  position: relative !important;
  min-height: min(920px, 100svh) !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #0a1f3d !important;
}

/* imagen */
#inicio.hero .hero-bg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.02) !important;
  filter: saturate(.92) contrast(1.02) brightness(.78) !important;
}

/* overlay más premium y más consistente con el resto */
#inicio.hero .hero-overlay{
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(5,18,38,.54) 0%, rgba(8,27,53,.40) 30%, rgba(8,27,53,.54) 100%),
    linear-gradient(90deg, rgba(8,27,53,.62) 0%, rgba(8,27,53,.52) 26%, rgba(8,27,53,.28) 56%, rgba(8,27,53,.40) 100%),
    radial-gradient(900px 420px at 16% 20%, rgba(71,113,196,.18), transparent 58%);
  z-index: 0 !important;
}

/* capa sutil para separar del resto */
#inicio.hero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(238,243,248,0) 0%, rgba(238,243,248,.92) 100%);
  z-index: 1;
  pointer-events: none;
}

/* contenido */
#inicio.hero .hero-inner{
  position: relative !important;
  z-index: 2 !important;
  min-height: inherit !important;
  display: flex !important;
  align-items: center !important;
  padding: 136px 0 106px !important;
}

#inicio.hero .hero-copy{
  position: relative !important;
  max-width: 980px !important;
}

/* backing sutil para integrar con la familia de panels */
#inicio.hero .hero-copy::before{
  content: "";
  position: absolute;
  top: -22px;
  left: -26px;
  width: min(760px, calc(100% + 44px));
  height: calc(100% + 44px);
  border-radius: 34px;
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(255,255,255,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 20px 42px rgba(6,18,37,.14),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}

/* chip superior */
#inicio.hero .hero-kicker{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  margin: 0 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(184,205,244,.20) !important;
  background: linear-gradient(180deg, rgba(240,246,255,.18), rgba(221,234,255,.10)) !important;
  color: rgba(255,255,255,.94) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 10px 22px rgba(7,21,41,.12),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* título */
#inicio.hero h1{
  margin: 0 0 16px !important;
  color: #ffffff !important;
  font-size: clamp(54px, 6.6vw, 96px) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
  font-weight: 800 !important;
  max-width: 11ch !important;
  text-wrap: balance;
  text-shadow: 0 8px 24px rgba(8,20,40,.18);
}

/* subtítulo */
#inicio.hero p{
  margin: 0 !important;
  max-width: 52ch !important;
  color: rgba(242,247,255,.90) !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  text-shadow: 0 3px 12px rgba(8,20,40,.12);
}

/* botones */
#inicio.hero .hero-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 30px !important;
}

#inicio.hero .hero-actions .btn{
  min-height: 54px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow:
    0 16px 30px rgba(8,21,42,.16),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

#inicio.hero .hero-actions .btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,250,.95)) !important;
  color: #10233b !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}

#inicio.hero .hero-actions .btn-secondary{
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* trust row */
#inicio.hero .hero-trust{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

#inicio.hero .hero-trust span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 20px rgba(6,18,37,.10) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* responsive */
@media (max-width: 1180px){
  #inicio.hero .hero-copy::before{
    width: min(700px, calc(100% + 36px));
  }

  #inicio.hero h1{
    max-width: 12ch !important;
  }
}

@media (max-width: 760px){
  #inicio.hero{
    min-height: 760px !important;
  }

  #inicio.hero .hero-inner{
    align-items: flex-end !important;
    padding: 118px 0 92px !important;
  }

  #inicio.hero .hero-copy::before{
    top: -18px;
    left: -14px;
    width: calc(100% + 28px);
    height: calc(100% + 30px);
    border-radius: 26px;
  }

  #inicio.hero .hero-kicker{
    margin-bottom: 16px !important;
  }

  #inicio.hero h1{
    font-size: clamp(42px, 12vw, 62px) !important;
    max-width: none !important;
  }

  #inicio.hero p{
    font-size: 16px !important;
    max-width: 100% !important;
  }

  #inicio.hero .hero-actions{
    gap: 12px !important;
    margin-top: 24px !important;
  }

  #inicio.hero .hero-actions .btn{
    min-height: 50px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
  }

  #inicio.hero .hero-trust{
    gap: 8px !important;
    margin-top: 18px !important;
  }

  #inicio.hero .hero-trust span{
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }
}
/* =========================================================
   HERO — quitar panel y evitar autolimitación del texto
========================================================= */

/* quitar panel detrás del copy */
#inicio.hero .hero-copy::before{
  content: none !important;
  display: none !important;
}

/* que el bloque ya no se encierre visualmente */
#inicio.hero .hero-copy{
  max-width: none !important;
}

/* título de corrido, sin límite artificial */
#inicio.hero h1{
  max-width: none !important;
  width: 100% !important;
  text-wrap: pretty !important;
}

/* subtítulo también libre */
#inicio.hero p{
  max-width: none !important;
  width: 100% !important;
}

/* en tablet/mobile también sin límites */
@media (max-width: 1180px){
  #inicio.hero h1{
    max-width: none !important;
  }
}

@media (max-width: 760px){
  #inicio.hero h1,
  #inicio.hero p{
    max-width: none !important;
  }
}
/* =========================================================
   HERO — compactar altura sin romper el diseño
========================================================= */

#inicio.hero{
  min-height: 760px !important;
}

#inicio.hero .hero-inner{
  padding: 108px 0 72px !important;
  min-height: inherit !important;
  align-items: center !important;
}

/* reducir un poco el bloque completo */
#inicio.hero .hero-kicker{
  margin-bottom: 14px !important;
}

#inicio.hero h1{
  margin-bottom: 12px !important;
}

#inicio.hero .hero-actions{
  margin-top: 22px !important;
}

#inicio.hero .hero-trust{
  margin-top: 18px !important;
}

/* mobile */
@media (max-width: 760px){
  #inicio.hero{
    min-height: 620px !important;
  }

  #inicio.hero .hero-inner{
    padding: 100px 0 60px !important;
    align-items: center !important;
  }

  #inicio.hero .hero-actions{
    margin-top: 18px !important;
  }

  #inicio.hero .hero-trust{
    margin-top: 14px !important;
  }
}
/* =========================================
   HERO — más corto + fade inferior más sutil
========================================= */

#inicio.hero{
  min-height: 620px !important;
}

#inicio.hero .hero-inner{
  padding: 92px 0 54px !important;
  min-height: inherit !important;
}

/* compactar un poco más los espacios internos */
#inicio.hero .hero-kicker{
  margin-bottom: 12px !important;
}

#inicio.hero h1{
  margin-bottom: 10px !important;
}

#inicio.hero .hero-actions{
  margin-top: 18px !important;
}

#inicio.hero .hero-trust{
  margin-top: 14px !important;
}

/* difuminado inferior más corto y menos agresivo */
#inicio.hero::after{
  height: 92px !important;
  background: linear-gradient(
    180deg,
    rgba(238,243,248,0) 0%,
    rgba(238,243,248,.46) 72%,
    rgba(238,243,248,.78) 100%
  ) !important;
}

/* mobile */
@media (max-width: 760px){
  #inicio.hero{
    min-height: 580px !important;
  }

  #inicio.hero .hero-inner{
    padding: 94px 0 46px !important;
  }

  #inicio.hero::after{
    height: 72px !important;
  }
}
/* =========================================================
   QUIÉNES SOMOS
   mejorar lectura, proporción y ritmo visual
========================================================= */

/* layout más equilibrado */
#quienes-somos.about-jpm .about-grid{
  grid-template-columns: minmax(0, .9fr) minmax(380px, .78fr) !important;
  gap: 42px !important;
  align-items: start !important;
}

/* toda la columna izquierda alineada normal */
#quienes-somos.about-jpm .about-copy,
#quienes-somos.about-jpm .about-copy *{
  text-align: left !important;
  text-justify: auto !important;
}

/* chip */
#quienes-somos.about-jpm .section-kicker{
  margin: 0 0 16px !important;
}

/* título: menos raro, mejor bloque */
#quienes-somos.about-jpm .section-title{
  max-width: 8.8ch !important;
  margin: 0 0 18px !important;
  font-size: clamp(38px, 4.4vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance !important;
}

/* lead más claro */
#quienes-somos.about-jpm .about-lead{
  max-width: 31ch !important;
  margin: 0 0 18px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* texto de apoyo más respirado */
#quienes-somos.about-jpm .about-text{
  max-width: 42ch !important;
  margin: 0 0 22px !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
}

/* cards más compactas */
#quienes-somos.about-jpm .about-highlights{
  gap: 14px !important;
  margin-top: 0 !important;
}

#quienes-somos.about-jpm .highlight-card{
  min-height: 132px !important;
  padding: 18px 18px 16px !important;
  border-radius: 24px !important;
}

#quienes-somos.about-jpm .highlight-title{
  margin-bottom: 8px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

#quienes-somos.about-jpm .highlight-text{
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* botones */
#quienes-somos.about-jpm .about-actions{
  margin-top: 22px !important;
  gap: 12px !important;
}

/* imagen: un poco más proporcionada al texto */
#quienes-somos.about-jpm .about-media img{
  width: 100% !important;
  aspect-ratio: 0.94 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* responsive */
@media (max-width: 1180px){
  #quienes-somos.about-jpm .about-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  #quienes-somos.about-jpm .section-title,
  #quienes-somos.about-jpm .about-lead,
  #quienes-somos.about-jpm .about-text{
    max-width: none !important;
  }

  #quienes-somos.about-jpm .about-media img{
    aspect-ratio: 1.15 / 1 !important;
  }
}
/* QUIÉNES SOMOS — quitar autolimitación del texto */
#quienes-somos.about-jpm .about-lead,
#quienes-somos.about-jpm .about-text{
  max-width: none !important;
  width: 100% !important;
}

/* por si el contenedor también lo está frenando */
#quienes-somos.about-jpm .about-copy{
  max-width: none !important;
}
#quienes-somos.about-jpm .section-title{
  max-width: none !important;
  width: 100% !important;
}
/* Scroll global más limpio */
html{
  scroll-behavior: auto !important;
}

/* Compensa header fijo al llegar a secciones */
html{
  scroll-padding-top: 110px;
}

/* Refuerzo por sección ancla */
section[id],
div[id]{
  scroll-margin-top: 110px;
}
/* =========================================================
   CONSENT BANNER — HERCob
========================================================= */
.hc-consent{
  position: fixed;
  inset: auto 18px 18px 18px;
  z-index: 9999;
  display: flex;
  justify-content: center;
}

.hc-consent[hidden]{
  display: none !important;
}

.hc-consent__card{
  width: min(940px, 100%);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(260px 180px at 100% 0%, rgba(79,132,228,.12), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,247,253,.98));
  border: 1px solid rgba(15,33,57,.10);
  box-shadow:
    0 24px 60px rgba(11,31,58,.18),
    inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hc-consent__eyebrow{
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  color: #2d5eb9;
}

.hc-consent__copy h3{
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 800;
  color: #102848;
}

.hc-consent__copy p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(15,33,57,.74);
}

.hc-consent__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hc-consent__btn{
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid rgba(15,33,57,.10);
}

.hc-consent__btn--ghost{
  background: rgba(255,255,255,.72);
  color: #102848;
}

.hc-consent__btn--primary{
  background: linear-gradient(135deg, #102848 0%, #1c4d98 100%);
  color: #fff;
  border-color: transparent;
}

.hc-consent-manage{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,33,57,.10);
  background: rgba(255,255,255,.88);
  color: #102848;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(11,31,58,.10);
  cursor: pointer;
}

@media (max-width: 760px){
  .hc-consent{
    inset: auto 12px 12px 12px;
  }

  .hc-consent__card{
    grid-template-columns: 1fr;
    gap: 14px;
    border-radius: 18px;
    padding: 16px;
  }

  .hc-consent__copy h3{
    font-size: 18px;
  }

  .hc-consent-manage{
    right: 12px;
    bottom: 12px;
  }
}