:root{
  --km-bg-0:#06101f;
  --km-bg-1:#08182d;
  --km-bg-2:#0c213d;
  --km-bg-3:#102949;
  --km-line:rgba(75,136,233,.22);
  --km-line-2:rgba(122,166,255,.15);
  --km-text:#eaf2ff;
  --km-soft:#9bb0cb;
  --km-muted:#6f87a8;
  --km-cyan:#39d3ff;
  --km-blue:#3a86ff;
  --km-violet:#9d6bff;
  --km-green:#37e5b3;
  --km-yellow:#ffd166;
  --km-pink:#ff62c7;
  --km-shadow:0 22px 65px rgba(0,0,0,.34);
  --km-radius:24px;
  --km-radius-sm:18px;
}

.kmore-shell{
  width:min(1440px,100%);
  margin:0 auto;
  padding:28px 22px 48px;
}

.kmore-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:18px;
  padding:24px;
  margin-bottom:20px;
  border-radius:28px;
  background:
    radial-gradient(circle at 18% 20%, rgba(58,134,255,.16), transparent 28%),
    radial-gradient(circle at 85% 30%, rgba(57,211,255,.12), transparent 22%),
    linear-gradient(180deg, rgba(11,28,52,.96), rgba(7,19,35,.98));
  border:1px solid var(--km-line);
  box-shadow:var(--km-shadow);
}

.kmore-hero::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(57,211,255,.55), rgba(157,107,255,.45), transparent);
  opacity:.9;
}

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

.kmore-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  margin:0 0 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#dff4ff;
  background:rgba(16,41,73,.6);
  border:1px solid rgba(57,211,255,.22);
}

.kmore-eyebrow .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--km-cyan),var(--km-violet));
  box-shadow:0 0 18px rgba(57,211,255,.65);
}

.kmore-title{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--km-text);
}

.kmore-desc{
  max-width:760px;
  margin:0;
  color:var(--km-soft);
  font-size:15px;
  line-height:1.7;
}

.kmore-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.kmore-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 14px;
  border-radius:999px;
  background:rgba(9,24,46,.86);
  border:1px solid rgba(95,149,255,.18);
  color:#e6f0ff;
  font-size:13px;
  font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.kmore-badge i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--km-green),var(--km-cyan));
  box-shadow:0 0 16px rgba(55,229,179,.55);
}

.kmore-side{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-content:start;
}

.kmore-mini{
  position:relative;
  overflow:hidden;
  min-height:112px;
  padding:16px 16px 15px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(12,33,61,.92), rgba(8,24,45,.98));
  border:1px solid var(--km-line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.kmore-mini::after{
  content:"";
  position:absolute;
  inset:auto -18px -24px auto;
  width:110px;
  height:110px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(58,134,255,.22), transparent 70%);
  pointer-events:none;
}

.kmore-mini .label{
  display:block;
  color:var(--km-muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.kmore-mini .value{
  display:block;
  color:var(--km-text);
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:6px;
}

.kmore-mini .meta{
  color:var(--km-soft);
  font-size:13px;
}

.kmore-section{
  margin-top:20px;
}

.kmore-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.kmore-section-head h2{
  margin:0;
  color:var(--km-text);
  font-size:24px;
  letter-spacing:-.025em;
}

.kmore-section-head p{
  margin:6px 0 0;
  color:var(--km-soft);
  font-size:14px;
}

.kmore-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.kmore-chip{
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(83,141,242,.18);
  background:rgba(10,24,44,.72);
  color:#dce9ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}

.kmore-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.kmore-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:196px;
  padding:18px 18px 16px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(11,27,49,.94), rgba(8,19,37,.98));
  border:1px solid rgba(71,124,211,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 12px 28px rgba(0,0,0,.18);
  text-decoration:none;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.kmore-card::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  opacity:.55;
}

.kmore-card::after{
  content:"";
  position:absolute;
  right:-22px;
  bottom:-28px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(58,134,255,.14), transparent 68%);
  transition:transform .26s ease, opacity .26s ease;
  opacity:.95;
}

.kmore-card:hover{
  transform:translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 34px rgba(0,0,0,.26);
  border-color:rgba(87,157,255,.36);
}

.kmore-card:hover::after{
  transform:scale(1.12);
  opacity:1;
}

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

.kmore-icon{
  width:52px;
  height:52px;
  border-radius:18px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(8,24,45,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 26px rgba(0,0,0,.24);
}

.kmore-icon svg{
  width:25px;
  height:25px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.kmore-arrow{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#dce8ff;
  background:rgba(11,31,57,.86);
  border:1px solid rgba(90,145,255,.14);
  font-size:16px;
  font-weight:800;
  transition:transform .22s ease, background .22s ease;
}

.kmore-card:hover .kmore-arrow{
  transform:translateX(2px) translateY(-2px);
  background:rgba(16,41,73,.96);
}

.kmore-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:var(--km-soft);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.kmore-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  opacity:.95;
  box-shadow:0 0 12px currentColor;
}

.kmore-card h3{
  margin:0 0 8px;
  color:var(--km-text);
  font-size:21px;
  line-height:1.12;
  letter-spacing:-.03em;
}

.kmore-card p{
  margin:0;
  color:var(--km-soft);
  font-size:14px;
  line-height:1.62;
  max-width:34ch;
}

.kmore-footer{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#d8e6ff;
  font-size:13px;
  font-weight:700;
}

.kmore-footer .tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(10,24,45,.78);
  color:#dce7ff;
}

.kmore-footer .tiny{
  color:var(--km-muted);
  font-size:12px;
}

.kmore-card.tone-cyan{ color:var(--km-cyan); }
.kmore-card.tone-blue{ color:var(--km-blue); }
.kmore-card.tone-violet{ color:var(--km-violet); }
.kmore-card.tone-green{ color:var(--km-green); }
.kmore-card.tone-yellow{ color:var(--km-yellow); }
.kmore-card.tone-pink{ color:var(--km-pink); }

.kmore-card.tone-cyan .kmore-icon{
  background:
    radial-gradient(circle at 30% 20%, rgba(57,211,255,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(8,24,45,.88);
}
.kmore-card.tone-blue .kmore-icon{
  background:
    radial-gradient(circle at 30% 20%, rgba(58,134,255,.18), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(8,24,45,.88);
}
.kmore-card.tone-violet .kmore-icon{
  background:
    radial-gradient(circle at 30% 20%, rgba(157,107,255,.18), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(8,24,45,.88);
}
.kmore-card.tone-green .kmore-icon{
  background:
    radial-gradient(circle at 30% 20%, rgba(55,229,179,.18), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(8,24,45,.88);
}
.kmore-card.tone-yellow .kmore-icon{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,209,102,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(8,24,45,.88);
}
.kmore-card.tone-pink .kmore-icon{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,98,199,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(8,24,45,.88);
}

@media (max-width:1240px){
  .kmore-hero{
    grid-template-columns:1fr;
  }
  .kmore-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:980px){
  .kmore-title{
    font-size:34px;
  }
  .kmore-side{
    grid-template-columns:1fr 1fr;
  }
  .kmore-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:680px){
  .kmore-shell{
    padding:20px 14px 36px;
  }
  .kmore-hero{
    padding:18px;
    border-radius:24px;
  }
  .kmore-title{
    font-size:28px;
  }
  .kmore-side{
    grid-template-columns:1fr;
  }
  .kmore-grid{
    grid-template-columns:1fr;
  }
  .kmore-card{
    min-height:180px;
  }
}

/* ==========================================================
   MAS PAGE - SOLID CARD OVERRIDE
   SIN GLOW EN TARJETAS
   ========================================================== */

.kmore-card{
  background:
    linear-gradient(
      180deg,
      #0d2038 0%,
      #0a1a2e 100%
    ) !important;

  border:
    1px solid
    rgba(79,126,188,.24) !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025) !important;

  color:#8fb6e9;
}


/* quitar línea luminosa superior */

.kmore-card::before{
  display:none !important;
}


/* quitar círculo de glow */

.kmore-card::after{
  display:none !important;
}


/* hover sólido */

.kmore-card:hover{
  transform:
    translateY(-3px) !important;

  background:
    linear-gradient(
      180deg,
      #102742 0%,
      #0b1d33 100%
    ) !important;

  border-color:
    rgba(79,143,222,.42) !important;

  box-shadow:
    0 14px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* iconos sólidos */

.kmore-icon,
.kmore-card.tone-cyan .kmore-icon,
.kmore-card.tone-blue .kmore-icon,
.kmore-card.tone-violet .kmore-icon,
.kmore-card.tone-green .kmore-icon,
.kmore-card.tone-yellow .kmore-icon,
.kmore-card.tone-pink .kmore-icon{

  background:
    #102641 !important;

  border:
    1px solid
    rgba(91,143,211,.22) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035) !important;
}


/* cada categoría conserva color SOLO en el icono */

.kmore-card.tone-cyan .kmore-icon{
  color:#39d3ff;
}

.kmore-card.tone-blue .kmore-icon{
  color:#5a9cff;
}

.kmore-card.tone-violet .kmore-icon{
  color:#a98bff;
}

.kmore-card.tone-green .kmore-icon{
  color:#5ce0b4;
}

.kmore-card.tone-yellow .kmore-icon{
  color:#e8c96d;
}

.kmore-card.tone-pink .kmore-icon{
  color:#e77cc7;
}


/* kicker menos brillante */

.kmore-kicker{
  color:#829ab8 !important;
}

.kmore-kicker::before{
  box-shadow:none !important;
  opacity:.8 !important;
}


/* títulos */

.kmore-card h3{
  color:#f0f5fc !important;
}


/* descripciones */

.kmore-card p{
  color:#93a6bd !important;
}


/* flecha más sobria */

.kmore-arrow{
  background:
    #0d223a !important;

  border:
    1px solid
    rgba(85,137,204,.20) !important;

  color:#b8c9dd !important;

  box-shadow:none !important;
}

.kmore-card:hover .kmore-arrow{
  background:
    #132c49 !important;

  color:#ffffff !important;
}


/* tags sólidos */

.kmore-footer .tag{
  background:
    #0b1f35 !important;

  border:
    1px solid
    rgba(88,137,199,.18) !important;

  color:#c7d5e5 !important;
}


/* hero también menos brillante */

.kmore-hero{
  background:
    linear-gradient(
      160deg,
      #0c2038,
      #081829
    ) !important;

  border-color:
    rgba(79,132,201,.23) !important;
}

.kmore-hero::before{
  display:none !important;
}


/* badges sólidos */

.kmore-badge{
  background:
    #0d2239 !important;

  border-color:
    rgba(85,138,205,.20) !important;
}

.kmore-badge i{
  background:#5b8fce !important;
  box-shadow:none !important;
}


/* mini cards sólidas */

.kmore-mini{
  background:
    #0d2138 !important;

  border-color:
    rgba(82,134,197,.20) !important;
}

.kmore-mini::after{
  display:none !important;
}


/* ==========================================================
   MAS PAGE - COMPACT SOLID V2
   ========================================================== */

/* Hero menos alto */

.kmore-hero{
  padding:18px 20px !important;
  margin-bottom:14px !important;
  gap:14px !important;
  border-radius:22px !important;
}

.kmore-title{
  font-size:34px !important;
  margin-bottom:7px !important;
}

.kmore-desc{
  font-size:14px !important;
  line-height:1.55 !important;
}

.kmore-eyebrow{
  margin-bottom:10px !important;
  padding:6px 10px !important;
  font-size:11px !important;
}

.kmore-badges{
  margin-top:12px !important;
  gap:7px !important;
}

.kmore-badge{
  padding:8px 11px !important;
  font-size:11px !important;
}


/* mini cards del hero */

.kmore-side{
  gap:8px !important;
}

.kmore-mini{
  min-height:82px !important;
  padding:12px !important;
  border-radius:16px !important;
}

.kmore-mini .label{
  font-size:10px !important;
  margin-bottom:6px !important;
}

.kmore-mini .value{
  font-size:18px !important;
  margin-bottom:4px !important;
}

.kmore-mini .meta{
  font-size:11px !important;
  line-height:1.35 !important;
}


/* sección */

.kmore-section{
  margin-top:14px !important;
}

.kmore-section-head{
  margin-bottom:10px !important;
}

.kmore-section-head h2{
  font-size:20px !important;
}

.kmore-section-head p{
  margin-top:4px !important;
  font-size:12px !important;
}

.kmore-chip-row{
  gap:7px !important;
}

.kmore-chip{
  padding:7px 10px !important;
  font-size:10px !important;
}


/* grid más denso */

.kmore-grid{
  gap:10px !important;
}


/* TARJETAS */

.kmore-card{
  min-height:142px !important;
  padding:13px 14px 12px !important;
  border-radius:17px !important;
}


/* parte superior */

.kmore-top{
  margin-bottom:8px !important;
}


/* icono */

.kmore-icon{
  width:40px !important;
  height:40px !important;
  border-radius:13px !important;
}

.kmore-icon svg{
  width:20px !important;
  height:20px !important;
}


/* flecha */

.kmore-arrow{
  width:29px !important;
  height:29px !important;
  border-radius:9px !important;
  font-size:13px !important;
}


/* texto */

.kmore-kicker{
  margin-bottom:5px !important;
  font-size:9px !important;
}

.kmore-kicker::before{
  width:6px !important;
  height:6px !important;
}

.kmore-card h3{
  margin-bottom:5px !important;
  font-size:17px !important;
}

.kmore-card p{
  font-size:11px !important;
  line-height:1.45 !important;
}


/* footer */

.kmore-footer{
  margin-top:10px !important;
}

.kmore-footer .tag{
  padding:6px 8px !important;
  font-size:10px !important;
}

.kmore-footer .tiny{
  font-size:10px !important;
}


/* hover más sobrio */

.kmore-card:hover{
  transform:translateY(-2px) !important;
}


/* Desktop: meter más tarjetas horizontalmente */

@media(min-width:1280px){

  .kmore-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;
  }

}


/* pantallas gigantes */

@media(min-width:1700px){

  .kmore-grid{
    grid-template-columns:
      repeat(5,minmax(0,1fr)) !important;
  }

}


/* tablet */

@media(max-width:980px){

  .kmore-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


/* móvil */

@media(max-width:680px){

  .kmore-card{
    min-height:135px !important;
  }

  .kmore-grid{
    grid-template-columns:
      1fr !important;
  }

}


/* ==========================================================
   KONECTA MAS - VECTOR SOLID V3
   CERO BLUR / CERO GLOW
   ========================================================== */


/* ----------------------------------------------------------
   FONDO CON DECORACION VECTORIAL MUY SUTIL
   ---------------------------------------------------------- */

.kmore-shell{
  position:relative;
  isolation:isolate;
}

.kmore-shell::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  top:0;
  height:390px;
  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(62,111,170,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(62,111,170,.045) 1px,
      transparent 1px
    );

  background-size:
    38px 38px;

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      transparent 100%
    );
}


/* ----------------------------------------------------------
   HERO: MAS VECTORIAL, NO LUMINOSO
   ---------------------------------------------------------- */

.kmore-hero{
  position:relative;
  overflow:hidden;

  background:
    #0b1e34 !important;

  border:
    1px solid
    #1e4267 !important;

  box-shadow:
    0 10px 24px
    rgba(0,0,0,.20) !important;
}


/* borde técnico superior */

.kmore-hero::before{
  display:block !important;

  content:"";

  position:absolute;

  top:0;
  left:24px;

  width:110px;
  height:3px;

  background:
    #2e8eea !important;

  opacity:1 !important;

  box-shadow:none !important;
}


/* esquina vectorial */

.kmore-hero::after{
  display:block !important;

  content:"";

  position:absolute;

  right:20px;
  top:18px;

  width:52px;
  height:52px;

  border-top:
    1px solid
    #315f8a;

  border-right:
    1px solid
    #315f8a;

  border-radius:0;

  background:none !important;
}


/* ----------------------------------------------------------
   EYEBROW
   ---------------------------------------------------------- */

.kmore-eyebrow{
  background:
    #102941 !important;

  border:
    1px solid
    #285276 !important;

  color:#cfe2f7 !important;

  box-shadow:none !important;
}

.kmore-eyebrow .dot{
  border-radius:2px !important;

  background:
    #3b9de9 !important;

  box-shadow:none !important;

  transform:rotate(45deg);
}


/* ----------------------------------------------------------
   BADGES SUPERIORES
   ---------------------------------------------------------- */

.kmore-badge{
  position:relative;

  border-radius:8px !important;

  background:
    #0d263e !important;

  border:
    1px solid
    #244763 !important;

  box-shadow:none !important;
}

.kmore-badge i{
  width:7px !important;
  height:7px !important;

  border-radius:2px !important;

  background:
    #3d91cf !important;

  box-shadow:none !important;

  transform:rotate(45deg);
}


/* ----------------------------------------------------------
   MINI INDICADORES HERO
   ---------------------------------------------------------- */

.kmore-mini{
  position:relative;

  background:
    #0e263e !important;

  border:
    1px solid
    #264968 !important;

  box-shadow:none !important;
}


/* línea izquierda de cada indicador */

.kmore-mini::before{
  content:"";

  position:absolute;

  left:0;
  top:12px;
  bottom:12px;

  width:3px;

  background:
    #327db6;
}


/* quitamos decoración circular */

.kmore-mini::after{
  display:none !important;
}


.kmore-mini:nth-child(2)::before{
  background:#785fc1;
}

.kmore-mini:nth-child(3)::before{
  background:#2e9d89;
}

.kmore-mini:nth-child(4)::before{
  background:#bc8b3e;
}


/* ----------------------------------------------------------
   TITULO DE SECCION
   ---------------------------------------------------------- */

.kmore-section-head{
  position:relative;
  padding-left:15px;
}

.kmore-section-head::before{
  content:"";

  position:absolute;

  left:0;
  top:3px;

  width:3px;
  height:32px;

  border-radius:2px;

  background:#368ed3;
}


/* ----------------------------------------------------------
   CHIPS
   ---------------------------------------------------------- */

.kmore-chip{
  border-radius:7px !important;

  background:
    #0d2238 !important;

  border:
    1px solid
    #24445f !important;

  box-shadow:none !important;

  color:#b9cce0 !important;
}


/* ----------------------------------------------------------
   TARJETAS BASE
   ---------------------------------------------------------- */

.kmore-card{
  position:relative;

  overflow:hidden;

  background:
    #0c2036 !important;

  border:
    1px solid
    #234360 !important;

  box-shadow:
    0 7px 15px
    rgba(0,0,0,.17) !important;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}


/* ELIMINAMOS TODOS LOS EFECTOS DE BRILLO ANTERIORES */

.kmore-card::after{
  display:none !important;
}


/* línea vectorial superior */

.kmore-card::before{
  display:block !important;

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:34%;
  height:2px;

  background:
    #337eb7 !important;

  opacity:1 !important;
}


/* variaciones sólidas */

.kmore-card.tone-cyan::before{
  background:#2c9fb8 !important;
}

.kmore-card.tone-blue::before{
  background:#397fd0 !important;
}

.kmore-card.tone-violet::before{
  background:#7059b6 !important;
}

.kmore-card.tone-green::before{
  background:#288d77 !important;
}

.kmore-card.tone-yellow::before{
  background:#a37d39 !important;
}

.kmore-card.tone-pink::before{
  background:#9a517f !important;
}


/* hover SIN glow */

.kmore-card:hover{
  transform:
    translateY(-2px) !important;

  background:
    #102740 !important;

  border-color:
    #38678f !important;

  box-shadow:
    0 9px 18px
    rgba(0,0,0,.21) !important;
}


/* ----------------------------------------------------------
   ESQUINAS VECTORIALES EN TARJETAS
   ---------------------------------------------------------- */

.kmore-top{
  position:relative;
}


/* pequeño marcador tipo circuito */

.kmore-top::after{
  content:"";

  position:absolute;

  right:42px;
  top:7px;

  width:18px;
  height:1px;

  background:#355978;

  box-shadow:
    6px 5px 0 -0.2px #355978;
}


/* ----------------------------------------------------------
   ICONOS
   ---------------------------------------------------------- */

.kmore-icon,
.kmore-card.tone-cyan .kmore-icon,
.kmore-card.tone-blue .kmore-icon,
.kmore-card.tone-violet .kmore-icon,
.kmore-card.tone-green .kmore-icon,
.kmore-card.tone-yellow .kmore-icon,
.kmore-card.tone-pink .kmore-icon{

  position:relative;

  border-radius:10px !important;

  background:
    #112b45 !important;

  border:
    1px solid
    #315271 !important;

  box-shadow:none !important;
}


/* marco interior vectorial */

.kmore-icon::after{
  content:"";

  position:absolute;

  inset:4px;

  border:
    1px solid
    rgba(117,154,190,.18);

  border-radius:7px;
}


/* colores sobrios de los SVG */

.kmore-card.tone-cyan .kmore-icon{
  color:#58bfd2 !important;
}

.kmore-card.tone-blue .kmore-icon{
  color:#69a1e4 !important;
}

.kmore-card.tone-violet .kmore-icon{
  color:#9a84d5 !important;
}

.kmore-card.tone-green .kmore-icon{
  color:#55b9a3 !important;
}

.kmore-card.tone-yellow .kmore-icon{
  color:#d1a95c !important;
}

.kmore-card.tone-pink .kmore-icon{
  color:#c77aa6 !important;
}


/* ----------------------------------------------------------
   FLECHA
   ---------------------------------------------------------- */

.kmore-arrow{
  position:relative;

  border-radius:8px !important;

  background:
    #10283f !important;

  border:
    1px solid
    #2d4d68 !important;

  box-shadow:none !important;

  color:#95adc7 !important;
}

.kmore-card:hover .kmore-arrow{
  background:
    #17324e !important;

  border-color:
    #3a6385 !important;

  color:#d9e6f4 !important;
}


/* ----------------------------------------------------------
   KICKER
   ---------------------------------------------------------- */

.kmore-kicker{
  color:#8299b2 !important;
}


/* cuadrado, no bolita brillante */

.kmore-kicker::before{
  width:7px !important;
  height:7px !important;

  border-radius:2px !important;

  box-shadow:none !important;

  opacity:1 !important;

  transform:rotate(45deg);
}


/* ----------------------------------------------------------
   FOOTER DE CADA TARJETA
   ---------------------------------------------------------- */

.kmore-footer{
  position:relative;

  padding-top:9px;

  border-top:
    1px solid
    rgba(65,100,132,.26);
}


.kmore-footer .tag{
  border-radius:6px !important;

  background:
    #112941 !important;

  border:
    1px solid
    #284864 !important;

  box-shadow:none !important;
}


/* ----------------------------------------------------------
   PEQUEÑO PATRON TÉCNICO EN EL FOOTER
   ---------------------------------------------------------- */

.kmore-footer::after{
  content:"";

  width:24px;
  height:7px;

  background:
    repeating-linear-gradient(
      90deg,
      #345c7a 0 2px,
      transparent 2px 5px
    );

  opacity:.65;
}


/* ----------------------------------------------------------
   FONT:
   NO SE REDUCE RESPECTO AL ACTUAL
   ---------------------------------------------------------- */

.kmore-title{
  font-size:34px !important;
}

.kmore-desc{
  font-size:14px !important;
}

.kmore-card h3{
  font-size:17px !important;
}

.kmore-card p{
  font-size:11px !important;
}

.kmore-kicker{
  font-size:9px !important;
}

.kmore-footer .tag,
.kmore-footer .tiny{
  font-size:10px !important;
}


/* ----------------------------------------------------------
   NUEVO DETALLE: NUMERO VECTORIAL EN TARJETAS
   ---------------------------------------------------------- */

.kmore-card{
  counter-increment:kmoreCards;
}

.kmore-grid{
  counter-reset:kmoreCards;
}

.kmore-card .kmore-body::after{
  content:
    "0" counter(kmoreCards);

  position:absolute;

  right:14px;
  bottom:45px;

  color:
    rgba(99,128,156,.33);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:9px;
  font-weight:700;

  letter-spacing:.12em;
}


/* ----------------------------------------------------------
   MÁS ESTRUCTURA ENTRE FILAS
   ---------------------------------------------------------- */

@media(min-width:980px){

  .kmore-grid{
    position:relative;
  }

  .kmore-grid::before{
    content:"";

    position:absolute;

    left:-10px;
    top:0;
    bottom:0;

    width:1px;

    background:
      repeating-linear-gradient(
        to bottom,
        #264762 0 5px,
        transparent 5px 11px
      );

    opacity:.55;
  }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:680px){

  .kmore-grid::before{
    display:none;
  }

  .kmore-hero::after{
    width:35px;
    height:35px;
  }

}


/* ==========================================================
   KONECTA MAS - VECTOR PANEL V4
   ========================================================== */


/* ==========================================================
   HERO CON ESTRUCTURA TÉCNICA
   ========================================================== */

.kmore-hero{
  border-radius:18px !important;
  background:#0a1d32 !important;
  border:1px solid #274966 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}


/* barra estructural superior */

.kmore-hero::before{
  display:block !important;
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:
    linear-gradient(
      90deg,
      #2d7fc0 0 14%,
      #445a74 14% 16%,
      #715ba5 16% 27%,
      #445a74 27% 29%,
      #27866f 29% 42%,
      transparent 42%
    ) !important;
  box-shadow:none !important;
}


/* esquina técnica derecha */

.kmore-hero::after{
  display:block !important;
  content:"";
  position:absolute;
  top:15px;
  right:15px;
  width:38px;
  height:38px;
  background:
    linear-gradient(#416989,#416989)
      top right/19px 1px no-repeat,
    linear-gradient(#416989,#416989)
      top right/1px 19px no-repeat,
    linear-gradient(#416989,#416989)
      bottom left/19px 1px no-repeat,
    linear-gradient(#416989,#416989)
      bottom left/1px 19px no-repeat !important;
  border:0 !important;
}


/* ==========================================================
   HERO MINI CARDS
   ========================================================== */

.kmore-mini{
  border-radius:12px !important;
  border:1px solid #284964 !important;
  background:#0d243a !important;
  box-shadow:none !important;
  padding-left:17px !important;
}


/* marcador vertical */

.kmore-mini::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:#367da9;
}


/* pequeña esquina */

.kmore-mini::after{
  display:block !important;
  content:"";
  position:absolute;
  right:8px;
  top:8px;
  width:12px;
  height:12px;
  background:
    linear-gradient(#496c87,#496c87)
      top right/10px 1px no-repeat,
    linear-gradient(#496c87,#496c87)
      top right/1px 10px no-repeat !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.kmore-grid{
  gap:11px !important;
}


/* ==========================================================
   TARJETAS
   ========================================================== */

.kmore-card{
  position:relative;
  min-height:142px !important;
  border-radius:14px !important;

  background:
    linear-gradient(
      180deg,
      #0d2238 0%,
      #0a1c30 100%
    ) !important;

  border:
    1px solid
    #294762 !important;

  box-shadow:
    0 6px 13px
    rgba(0,0,0,.16) !important;

  overflow:hidden;
}


/* línea superior corta */

.kmore-card::before{
  display:block !important;
  content:"";
  position:absolute;
  top:0;
  left:14px;
  width:54px;
  height:3px;
  background:#3b83b6 !important;
  opacity:1 !important;
}


/* esquina inferior derecha */

.kmore-card::after{
  display:block !important;
  content:"";
  position:absolute;
  right:7px;
  bottom:7px;
  width:15px;
  height:15px;

  background:
    linear-gradient(#395d77,#395d77)
      bottom right/12px 1px no-repeat,
    linear-gradient(#395d77,#395d77)
      bottom right/1px 12px no-repeat !important;

  border-radius:0 !important;
}


/* colores por categoría */

.kmore-card.tone-cyan::before{
  background:#3a93a7 !important;
}

.kmore-card.tone-blue::before{
  background:#417fc2 !important;
}

.kmore-card.tone-violet::before{
  background:#7962ad !important;
}

.kmore-card.tone-green::before{
  background:#2f8973 !important;
}

.kmore-card.tone-yellow::before{
  background:#9e7b43 !important;
}

.kmore-card.tone-pink::before{
  background:#955678 !important;
}


/* hover sólido */

.kmore-card:hover{
  background:
    #10283f !important;

  border-color:
    #3d6585 !important;

  transform:
    translateY(-2px) !important;

  box-shadow:
    0 8px 16px
    rgba(0,0,0,.20) !important;
}


/* ==========================================================
   CABECERA INTERNA DE TARJETA
   ========================================================== */

.kmore-top{
  position:relative;
  min-height:43px;
  padding-bottom:8px;
  border-bottom:
    1px solid
    rgba(67,102,132,.24);
}


/* puntos tipo circuito */

.kmore-top::before{
  content:"";
  position:absolute;
  left:52px;
  top:20px;
  width:34px;
  height:1px;
  background:#355772;
}

.kmore-top::after{
  content:"";
  position:absolute;
  left:84px;
  top:17px;
  width:6px;
  height:6px;
  border:1px solid #456a85;
  background:#0d2238;
  transform:rotate(45deg);
}


/* ==========================================================
   ICONOS DOBLE MARCO
   ========================================================== */

.kmore-icon,
.kmore-card.tone-cyan .kmore-icon,
.kmore-card.tone-blue .kmore-icon,
.kmore-card.tone-violet .kmore-icon,
.kmore-card.tone-green .kmore-icon,
.kmore-card.tone-yellow .kmore-icon,
.kmore-card.tone-pink .kmore-icon{

  width:40px !important;
  height:40px !important;

  border-radius:9px !important;

  background:#102a43 !important;

  border:
    1px solid
    #365a76 !important;

  box-shadow:none !important;
}


/* marco interior */

.kmore-icon::before{
  content:"";
  position:absolute;
  inset:4px;
  border:
    1px solid
    rgba(115,151,184,.16);
  border-radius:5px;
}


/* ==========================================================
   TITULO Y DESCRIPCIÓN
   ========================================================== */

.kmore-card h3{
  font-size:17px !important;
  color:#edf4fb !important;
}

.kmore-card p{
  font-size:11px !important;
  color:#96a8bb !important;
  line-height:1.5 !important;
}

.kmore-kicker{
  font-size:9px !important;
  color:#8299af !important;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.kmore-footer{
  position:relative;
  margin-top:10px !important;
  padding-top:9px !important;

  border-top:
    1px solid
    rgba(67,102,132,.24);
}


/* tag cuadrado técnico */

.kmore-footer .tag{
  border-radius:5px !important;
  padding:6px 8px !important;

  background:
    #112941 !important;

  border:
    1px solid
    #294961 !important;

  color:
    #c7d6e5 !important;
}


/* barra tipo código */

.kmore-footer::before{
  content:"";
  position:absolute;
  right:0;
  top:11px;
  width:28px;
  height:5px;

  background:
    repeating-linear-gradient(
      90deg,
      #446781 0 3px,
      transparent 3px 6px
    );
}


/* eliminar patrón anterior del after */

.kmore-footer::after{
  display:none !important;
}


/* ==========================================================
   NUMERACIÓN TÉCNICA
   ========================================================== */

.kmore-card .kmore-body::after{
  content:
    "MODULE-" counter(kmoreCards);

  position:absolute;

  right:12px;
  top:48px;

  color:
    rgba(112,139,165,.34);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:8px;

  letter-spacing:.11em;
}


/* ==========================================================
   CHIPS SUPERIORES
   ========================================================== */

.kmore-chip{
  border-radius:5px !important;

  background:
    #0e2439 !important;

  border:
    1px solid
    #29475f !important;

  color:#bbcde0 !important;
}


/* ==========================================================
   TITULO DE SECCION CON LINEA TÉCNICA
   ========================================================== */

.kmore-section-head::after{
  content:"";
  position:absolute;
  left:15px;
  bottom:-6px;
  width:75px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      #3c83b7 0 42px,
      transparent 42px 47px,
      #536a7d 47px 58px,
      transparent 58px 63px,
      #536a7d 63px
    );
}


/* ==========================================================
   DECORACIÓN LATERAL
   ========================================================== */

@media(min-width:1050px){

  .kmore-section{
    position:relative;
  }

  .kmore-section::before{
    content:"01";
    position:absolute;
    left:-26px;
    top:1px;

    color:
      rgba(91,125,153,.44);

    font-family:
      ui-monospace,
      monospace;

    font-size:9px;
    letter-spacing:.12em;
  }

}


/* ==========================================================
   SIN EFECTOS LUMINOSOS
   ========================================================== */

.kmore-card *,
.kmore-mini *,
.kmore-hero *{
  text-shadow:none !important;
}

.kmore-card,
.kmore-card *,
.kmore-icon,
.kmore-mini,
.kmore-badge{
  filter:none !important;
}


/* ==========================================================
   MANTENER FONT
   ========================================================== */

.kmore-title{
  font-size:34px !important;
}

.kmore-desc{
  font-size:14px !important;
}

.kmore-card h3{
  font-size:17px !important;
}

.kmore-card p{
  font-size:11px !important;
}

.kmore-kicker{
  font-size:9px !important;
}

.kmore-footer .tag,
.kmore-footer .tiny{
  font-size:10px !important;
}


/* ==========================================================
   KONECTA MAS - CLEAN BLUE V5
   ESTILO FINTECH LIMPIO
   ========================================================== */


/* ==========================================================
   LIMPIAR DECORACIONES ANTERIORES
   ========================================================== */

.kmore-shell::before,
.kmore-section::before,
.kmore-section-head::after,
.kmore-top::before,
.kmore-top::after,
.kmore-footer::before,
.kmore-footer::after,
.kmore-card .kmore-body::after{
  display:none !important;
  content:none !important;
}


/* ==========================================================
   FONDO NORMAL
   ========================================================== */

.kmore-shell{
  position:relative;
  background:transparent !important;
}


/* ==========================================================
   HERO LIMPIO
   ========================================================== */

.kmore-hero{
  position:relative;

  border-radius:18px !important;

  background:
    #0b1d31 !important;

  border:
    1px solid
    #1d3e5c !important;

  box-shadow:
    0 7px 17px
    rgba(0,0,0,.16) !important;

  overflow:hidden;
}


/* solo una barra azul elegante */

.kmore-hero::before{
  display:block !important;
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:4px;
  height:auto;

  background:
    #2588df !important;

  opacity:1 !important;

  box-shadow:none !important;
}


/* eliminar esquinas técnicas */

.kmore-hero::after{
  display:none !important;
}


/* ==========================================================
   TITULO
   ========================================================== */

.kmore-title{
  font-size:34px !important;
  color:#f4f8fd !important;
}

.kmore-desc{
  font-size:14px !important;
  color:#9eb0c4 !important;
}


/* ==========================================================
   ETIQUETA SUPERIOR
   ========================================================== */

.kmore-eyebrow{
  border-radius:7px !important;

  background:
    #102840 !important;

  border:
    1px solid
    #244b6d !important;

  color:#bcd2e8 !important;

  box-shadow:none !important;
}


.kmore-eyebrow .dot{
  width:7px !important;
  height:7px !important;

  border-radius:50% !important;

  transform:none !important;

  background:
    #278ee8 !important;

  box-shadow:none !important;
}


/* ==========================================================
   BOTONES/BADGES SUPERIORES
   ========================================================== */

.kmore-badge{
  border-radius:7px !important;

  background:
    #0e263d !important;

  border:
    1px solid
    #244764 !important;

  color:#c6d5e5 !important;

  box-shadow:none !important;
}


.kmore-badge i{
  width:6px !important;
  height:6px !important;

  border-radius:50% !important;

  transform:none !important;

  background:
    #2c91e4 !important;

  box-shadow:none !important;
}


/* ==========================================================
   CUADROS SUPERIORES
   ========================================================== */

.kmore-mini{
  position:relative;

  border-radius:12px !important;

  background:
    #0e243a !important;

  border:
    1px solid
    #24445f !important;

  box-shadow:none !important;

  padding-left:15px !important;
}


/* todos usan azul */

.kmore-mini::before{
  content:"";

  position:absolute;

  top:14px;
  left:0;

  width:3px;
  height:28px;

  background:
    #278bdf !important;
}


.kmore-mini:nth-child(2)::before,
.kmore-mini:nth-child(3)::before,
.kmore-mini:nth-child(4)::before{
  background:
    #278bdf !important;
}


.kmore-mini::after{
  display:none !important;
}


.kmore-mini .label{
  color:#7f95aa !important;
}

.kmore-mini .value{
  color:#f0f6fc !important;
}

.kmore-mini .meta{
  color:#91a6ba !important;
}


/* ==========================================================
   CABECERA HERRAMIENTAS
   ========================================================== */

.kmore-section-head{
  padding-left:12px !important;
}


.kmore-section-head::before{
  content:"";

  position:absolute;

  left:0;
  top:4px;

  width:3px;
  height:26px;

  border-radius:3px;

  background:
    #268be0 !important;
}


.kmore-section-head h2{
  color:#eef5fc !important;
}

.kmore-section-head p{
  color:#8298ad !important;
}


/* ==========================================================
   FILTROS
   ========================================================== */

.kmore-chip{
  border-radius:7px !important;

  background:
    #0d2237 !important;

  border:
    1px solid
    #213e58 !important;

  color:#9cafc3 !important;

  box-shadow:none !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease !important;
}


.kmore-chip:hover{
  background:
    #102a43 !important;

  border-color:
    #2b6698 !important;

  color:#e3edf7 !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.kmore-grid{
  gap:10px !important;
}


/* ==========================================================
   TARJETA NUEVA
   ========================================================== */

.kmore-card{
  position:relative;

  min-height:142px !important;

  padding:
    13px 14px 12px !important;

  border-radius:
    14px !important;

  background:
    #0d2137 !important;

  border:
    1px solid
    #23445f !important;

  box-shadow:
    0 5px 12px
    rgba(0,0,0,.14) !important;

  overflow:hidden;

  color:#5da9ed !important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease !important;
}


/* ==========================================================
   AZUL DENTRO DE LA TARJETA
   ========================================================== */

/*
 franja azul sólida arriba.
 Da identidad sin hacerla cargada.
*/

.kmore-card::before{
  display:block !important;

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    #268be0 !important;

  opacity:1 !important;
}


/* pequeño bloque azul lateral */

.kmore-card::after{
  display:block !important;

  content:"";

  position:absolute;

  right:0;
  top:34px;

  width:3px;
  height:30px;

  background:
    #225f94 !important;

  border-radius:
    3px 0 0 3px !important;
}


/* ==========================================================
   TODAS LAS CATEGORIAS MISMO AZUL
   ========================================================== */

.kmore-card.tone-cyan::before,
.kmore-card.tone-blue::before,
.kmore-card.tone-violet::before,
.kmore-card.tone-green::before,
.kmore-card.tone-yellow::before,
.kmore-card.tone-pink::before{
  background:
    #268be0 !important;
}


/* ==========================================================
   HOVER
   ========================================================== */

.kmore-card:hover{
  transform:
    translateY(-2px) !important;

  background:
    #102840 !important;

  border-color:
    #326388 !important;

  box-shadow:
    0 7px 15px
    rgba(0,0,0,.18) !important;
}


/* ==========================================================
   TOP
   ========================================================== */

.kmore-top{
  min-height:40px !important;

  margin-bottom:8px !important;

  padding-bottom:0 !important;

  border-bottom:0 !important;
}


/* ==========================================================
   ICONOS TODOS AZULES
   ========================================================== */

.kmore-icon,
.kmore-card.tone-cyan .kmore-icon,
.kmore-card.tone-blue .kmore-icon,
.kmore-card.tone-violet .kmore-icon,
.kmore-card.tone-green .kmore-icon,
.kmore-card.tone-yellow .kmore-icon,
.kmore-card.tone-pink .kmore-icon{

  position:relative;

  width:40px !important;
  height:40px !important;

  border-radius:
    10px !important;

  color:
    #50a9f2 !important;

  background:
    #102c47 !important;

  border:
    1px solid
    #2d5b80 !important;

  box-shadow:none !important;

  filter:none !important;
}


/* quitar doble marco anterior */

.kmore-icon::before,
.kmore-icon::after{
  display:none !important;
}


.kmore-icon svg{
  width:20px !important;
  height:20px !important;

  stroke:
    #56adf4 !important;
}


/* ==========================================================
   FLECHA AZUL SOBRIA
   ========================================================== */

.kmore-arrow{
  width:29px !important;
  height:29px !important;

  border-radius:
    8px !important;

  color:
    #7cb9ed !important;

  background:
    #102840 !important;

  border:
    1px solid
    #294c68 !important;

  box-shadow:none !important;
}


.kmore-card:hover .kmore-arrow{
  background:
    #14324e !important;

  border-color:
    #36688f !important;

  color:
    #b9dcfa !important;
}


/* ==========================================================
   KICKER
   ========================================================== */

.kmore-kicker{
  font-size:9px !important;

  color:
    #6f8da7 !important;

  margin-bottom:
    5px !important;
}


.kmore-kicker::before{
  width:6px !important;
  height:6px !important;

  border-radius:
    50% !important;

  transform:none !important;

  background:
    #318ed8 !important;

  box-shadow:none !important;
}


/* ==========================================================
   TIPOGRAFIA
   NO BAJAMOS EL FONT
   ========================================================== */

.kmore-card h3{
  margin-bottom:
    5px !important;

  font-size:
    17px !important;

  color:
    #eef5fc !important;
}


.kmore-card p{
  font-size:
    11px !important;

  line-height:
    1.5 !important;

  color:
    #93a8bb !important;
}


/* ==========================================================
   FOOTER LIMPIO
   ========================================================== */

.kmore-footer{
  position:relative;

  margin-top:
    10px !important;

  padding-top:
    9px !important;

  border-top:
    1px solid
    #1d3c56 !important;
}


.kmore-footer .tag{
  border-radius:
    5px !important;

  background:
    #102942 !important;

  border:
    1px solid
    #234963 !important;

  color:
    #a9bdd0 !important;

  box-shadow:none !important;
}


.kmore-footer .tiny{
  color:
    #6fa9dc !important;

  font-size:
    10px !important;
}


/* ==========================================================
   CERO EFECTOS DE LUZ
   ========================================================== */

.kmore-shell *,
.kmore-card,
.kmore-mini,
.kmore-hero,
.kmore-icon{
  text-shadow:
    none !important;

  filter:
    none !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(min-width:1280px){

  .kmore-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr))
      !important;
  }

}


@media(min-width:1700px){

  .kmore-grid{
    grid-template-columns:
      repeat(5,minmax(0,1fr))
      !important;
  }

}


@media(max-width:980px){

  .kmore-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;
  }

}


@media(max-width:680px){

  .kmore-grid{
    grid-template-columns:
      1fr !important;
  }

}


/* ==========================================================
   MAS CLEAN V6
   SIN FRANJAS / SIN FOOTER / MISMO FONT
   ========================================================== */


/* quitar franja superior */

.kmore-card::before{
  display:none !important;
  content:none !important;
}


/* quitar barra lateral */

.kmore-card::after{
  display:none !important;
  content:none !important;
}


/* quitar footer completamente */

.kmore-card .kmore-footer{
  display:none !important;
}


/* tarjeta limpia */

.kmore-card{
  min-height:122px !important;

  padding:
    14px 15px !important;

  background:
    #0d2137 !important;

  border:
    1px solid
    #23445f !important;

  border-radius:
    14px !important;

  box-shadow:
    0 5px 12px
    rgba(0,0,0,.14) !important;
}


/* hover */

.kmore-card:hover{
  transform:
    translateY(-2px) !important;

  background:
    #102840 !important;

  border-color:
    #35678e !important;

  box-shadow:
    0 7px 15px
    rgba(0,0,0,.17) !important;
}


/* top más limpio */

.kmore-top{
  min-height:auto !important;

  margin-bottom:
    10px !important;

  padding:0 !important;

  border:0 !important;
}


/* mantener iconos azules */

.kmore-icon,
.kmore-card.tone-cyan .kmore-icon,
.kmore-card.tone-blue .kmore-icon,
.kmore-card.tone-violet .kmore-icon,
.kmore-card.tone-green .kmore-icon,
.kmore-card.tone-yellow .kmore-icon,
.kmore-card.tone-pink .kmore-icon{

  color:
    #55aaf1 !important;

  background:
    #102c47 !important;

  border:
    1px solid
    #2d5b80 !important;

  box-shadow:
    none !important;
}


.kmore-icon svg{
  stroke:
    #55aaf1 !important;
}


/* todos los kicker azules sobrios */

.kmore-kicker{
  color:
    #6fa9da !important;
}


.kmore-kicker::before{
  background:
    #318ed8 !important;

  box-shadow:
    none !important;
}


/* texto */

.kmore-card h3{
  font-size:
    17px !important;

  color:
    #eef5fc !important;

  margin-bottom:
    5px !important;
}


.kmore-card p{
  font-size:
    11px !important;

  color:
    #93a8bb !important;

  line-height:
    1.5 !important;
}


/* flechita sigue arriba pero discreta */

.kmore-arrow{
  width:
    29px !important;

  height:
    29px !important;

  border-radius:
    8px !important;

  background:
    #102840 !important;

  border:
    1px solid
    #294c68 !important;

  color:
    #78b7eb !important;

  box-shadow:
    none !important;
}


.kmore-card:hover .kmore-arrow{
  background:
    #14324e !important;

  border-color:
    #376991 !important;

  color:
    #c8e4fa !important;
}


/* quitar cualquier resto decorativo anterior */

.kmore-card .kmore-body::after,
.kmore-top::before,
.kmore-top::after{
  display:none !important;
  content:none !important;
}


/* grid ligeramente más limpio */

.kmore-grid{
  gap:
    10px !important;
}


/* mismo font, NO reducir */

.kmore-title{
  font-size:
    34px !important;
}

.kmore-desc{
  font-size:
    14px !important;
}

.kmore-card h3{
  font-size:
    17px !important;
}

.kmore-card p{
  font-size:
    11px !important;
}

.kmore-kicker{
  font-size:
    9px !important;
}


/* ============================================================
   KONECTA MAS - COMMERCIAL HERO SLIDER V7
   ============================================================ */


/* ocultar por completo hero viejo */

.kmore-hero{
  display:none !important;
}


/* ============================================================
   SLIDER
   ============================================================ */

.kmore-commercial{
  position:relative;
  width:100%;
  height:340px;
  margin:0 0 22px;
  overflow:hidden;

  border-radius:20px;

  border:
    1px solid
    #244560;

  background:
    #081a2e;

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.20);
}


.kmore-commercial-track{
  display:flex;

  width:100%;
  height:100%;

  transition:
    transform .65s
    cubic-bezier(.4,0,.2,1);
}


.kmore-commercial-slide{
  position:relative;

  flex:
    0 0 100%;

  width:100%;
  height:100%;

  overflow:hidden;

  background:
    #091b2e;
}


/* imagen */

.kmore-commercial-photo{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  display:block;

  filter:none !important;

  transform:none !important;
}


/* capa sólida para legibilidad, SIN blur */

.kmore-commercial-slide::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(4,14,26,.96) 0%,
      rgba(5,16,29,.90) 30%,
      rgba(5,16,29,.52) 56%,
      rgba(5,16,29,.14) 100%
    );

  pointer-events:none;
}


/* barra superior azul */

.kmore-commercial-slide::before{
  content:"";

  position:absolute;

  z-index:3;

  left:0;
  top:0;

  width:100%;
  height:4px;

  background:
    #268be0;
}


/* contenido */

.kmore-commercial-content{
  position:relative;

  z-index:4;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  width:min(
    670px,
    62%
  );

  height:100%;

  padding:
    34px 38px 42px;
}


.kmore-commercial-kicker{
  display:inline-flex;

  align-items:center;

  margin-bottom:12px;

  padding:
    7px 10px;

  border-radius:6px;

  background:
    #12314e;

  border:
    1px solid
    #2d587b;

  color:
    #89c8f7;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .09em;

  text-transform:
    uppercase;
}


.kmore-commercial-content h2{
  max-width:620px;

  margin:
    0 0 12px;

  color:
    #ffffff;

  font-size:
    34px;

  line-height:
    1.08;

  letter-spacing:
    -.035em;
}


.kmore-commercial-content p{
  max-width:
    570px;

  margin:
    0 0 20px;

  color:
    #b3c3d5;

  font-size:
    14px;

  line-height:
    1.65;
}


/* botón */

.kmore-commercial-btn{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:132px;

  height:42px;

  padding:
    0 17px;

  border-radius:
    8px;

  background:
    #2387df;

  border:
    1px solid
    #3999eb;

  color:
    #ffffff;

  text-decoration:
    none;

  font-size:
    13px;

  font-weight:
    800;

  box-shadow:
    none !important;

  transition:
    background .16s ease,
    transform .16s ease;
}


.kmore-commercial-btn:hover{
  background:
    #3095eb;

  transform:
    translateY(-1px);
}


/* ============================================================
   FLECHAS
   ============================================================ */

.kmore-commercial-arrow{
  position:absolute;

  z-index:7;

  top:50%;

  width:38px;
  height:38px;

  margin-top:-19px;

  display:grid;

  place-items:center;

  border-radius:
    8px;

  border:
    1px solid
    rgba(138,180,220,.28);

  background:
    rgba(7,24,42,.82);

  color:
    #dcecff;

  cursor:pointer;

  font-size:
    20px;

  line-height:
    1;

  box-shadow:none;

  transition:
    background .15s ease,
    border-color .15s ease;
}


.kmore-commercial-arrow:hover{
  background:
    #102e4b;

  border-color:
    #3977a8;
}


.kmore-commercial-prev{
  left:16px;
}


.kmore-commercial-next{
  right:16px;
}


/* ============================================================
   INDICADORES
   ============================================================ */

.kmore-commercial-dots{
  position:absolute;

  z-index:8;

  left:38px;
  bottom:20px;

  display:flex;

  align-items:center;

  gap:7px;
}


.kmore-commercial-dot{
  width:26px;
  height:4px;

  padding:0;

  border:0;

  border-radius:
    99px;

  background:
    rgba(255,255,255,.25);

  cursor:pointer;

  transition:
    width .2s ease,
    background .2s ease;
}


.kmore-commercial-dot.active{
  width:44px;

  background:
    #2b92e8;
}


/* contador */

.kmore-commercial-count{
  position:absolute;

  z-index:8;

  right:24px;
  bottom:18px;

  color:
    #adbed0;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:
    11px;

  letter-spacing:
    .08em;
}


/* ============================================================
   SECCIÓN HERRAMIENTAS SUBE DESPUÉS DEL SLIDER
   ============================================================ */

.kmore-section{
  margin-top:
    0 !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:900px){

  .kmore-commercial{
    height:
      320px;
  }

  .kmore-commercial-content{
    width:
      75%;

    padding:
      30px;
  }

  .kmore-commercial-content h2{
    font-size:
      29px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:680px){

  .kmore-commercial{
    height:
      380px;

    border-radius:
      16px;
  }

  .kmore-commercial-slide::after{
    background:
      linear-gradient(
        90deg,
        rgba(4,14,26,.95),
        rgba(4,14,26,.73)
      );
  }

  .kmore-commercial-content{
    width:
      100%;

    padding:
      26px 22px 48px;
  }

  .kmore-commercial-content h2{
    font-size:
      27px;
  }

  .kmore-commercial-content p{
    font-size:
      13px;
  }

  .kmore-commercial-prev{
    left:
      8px;
  }

  .kmore-commercial-next{
    right:
      8px;
  }

  .kmore-commercial-dots{
    left:
      22px;
  }

}


/* ==============================================================
   MAS SPACING V8
   SOLO DISTRIBUCION Y APROVECHAMIENTO DEL ESPACIO
   NO CAMBIA FONT, ICONOS, TARJETAS NI GRAFICOS
   ============================================================== */


/* --------------------------------------------------------------
   1. USAR MAS ANCHO DE PANTALLA
   -------------------------------------------------------------- */

.kmore-shell{
  width:100% !important;
  max-width:1580px !important;

  margin-left:auto !important;
  margin-right:auto !important;

  padding-left:18px !important;
  padding-right:18px !important;

  padding-top:18px !important;
  padding-bottom:28px !important;
}


/* --------------------------------------------------------------
   2. SLIDER / BANNER
   CONSERVAR SU TAMAÑO, SOLO QUITAR AIRE EXTERIOR
   -------------------------------------------------------------- */

.kmore-commercial{
  width:100% !important;

  margin-top:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;

  margin-bottom:14px !important;
}


/* --------------------------------------------------------------
   3. SECCION DE HERRAMIENTAS MAS CERCA DEL HERO
   -------------------------------------------------------------- */

.kmore-section{
  margin-top:0 !important;

  width:100% !important;
}


/* --------------------------------------------------------------
   4. CABECERA DE HERRAMIENTAS
   USAR LA MISMA FILA MEJOR
   -------------------------------------------------------------- */

.kmore-section-head{
  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  width:100% !important;

  gap:18px !important;

  margin-top:0 !important;
  margin-bottom:10px !important;

  padding-top:0 !important;
}


.kmore-section-head > div:first-child{
  flex:1 1 auto !important;

  min-width:0 !important;
}


.kmore-chip-row{
  flex:0 0 auto !important;

  margin:0 !important;

  justify-content:flex-end !important;
}


/* --------------------------------------------------------------
   5. GRID
   OCUPAR TODO EL ANCHO DISPONIBLE
   -------------------------------------------------------------- */

.kmore-grid{
  width:100% !important;

  margin:0 !important;

  column-gap:10px !important;
  row-gap:10px !important;

  align-items:stretch !important;
}


/* --------------------------------------------------------------
   6. DESKTOP GRANDE
   MÁS COLUMNAS SOLO CUANDO REALMENTE CABEN
   SIN ALTERAR EL CONTENIDO INTERNO
   -------------------------------------------------------------- */

@media(min-width:1500px){

  .kmore-grid{
    grid-template-columns:
      repeat(5,minmax(0,1fr)) !important;
  }

}


/* escritorio normal: cuatro columnas */

@media(min-width:1100px) and (max-width:1499px){

  .kmore-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;
  }

}


/* --------------------------------------------------------------
   7. NO DEJAR UNA ULTIMA TARJETA PERDIDA
   SI HAY 11 ELEMENTOS EN 4 COLUMNAS,
   LA ULTIMA FILA USA MEJOR EL ANCHO
   -------------------------------------------------------------- */

@media(min-width:1100px) and (max-width:1499px){

  .kmore-grid .kmore-card:nth-last-child(3):nth-child(4n+1){
    grid-column:auto !important;
  }

}


/* --------------------------------------------------------------
   8. TARJETAS
   SOLO ELIMINAR MARGEN EXTERNO ACCIDENTAL
   NO CAMBIAMOS TAMAÑO INTERNO
   -------------------------------------------------------------- */

.kmore-card{
  margin:0 !important;

  width:auto !important;

  max-width:none !important;
}


/* --------------------------------------------------------------
   9. ALINEACION INTERNA
   SIN CAMBIAR PADDING, FONT NI ICONOS
   -------------------------------------------------------------- */

.kmore-card .kmore-body{
  width:100% !important;
}


.kmore-top{
  width:100% !important;
}


/* --------------------------------------------------------------
   10. EVITAR AIRE PRODUCIDO POR ELEMENTOS OCULTOS ANTERIORES
   -------------------------------------------------------------- */

.kmore-hero{
  margin:0 !important;
}


.kmore-hero[style*="display: none"],
.kmore-hero{
  margin-bottom:0 !important;
}


/* --------------------------------------------------------------
   11. QUITAR ESPACIOS DE SECCIONES VACIAS
   -------------------------------------------------------------- */

.kmore-shell > section:empty{
  display:none !important;
}


.kmore-shell > div:empty{
  display:none !important;
}


/* --------------------------------------------------------------
   12. MÁS CONTINUIDAD ENTRE CABECERA Y GRID
   -------------------------------------------------------------- */

.kmore-section-head + .kmore-grid{
  margin-top:0 !important;
}


/* --------------------------------------------------------------
   13. TABLET
   -------------------------------------------------------------- */

@media(max-width:1099px){

  .kmore-shell{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .kmore-section-head{
    align-items:flex-start !important;
  }

  .kmore-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


/* --------------------------------------------------------------
   14. MOVIL
   -------------------------------------------------------------- */

@media(max-width:680px){

  .kmore-shell{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .kmore-section-head{
    display:block !important;
  }

  .kmore-chip-row{
    justify-content:flex-start !important;

    margin-top:10px !important;
  }

  .kmore-grid{
    grid-template-columns:
      1fr !important;
  }

}


/* --------------------------------------------------------------
   IMPORTANTE:
   NO CAMBIAR TIPOGRAFIA NI TAMAÑOS
   -------------------------------------------------------------- */

/*
   INTENCIONALMENTE NO HAY:
   font-size
   height
   min-height
   icon width
   icon height
   canvas height
   svg size
*/

