:root {
     --color-principal: #0080c3;
     --color-secundario: #e84a90;
     --color-cta: #ffffff;
     --color-soft-bg: #e6f0fa;
     --color-soft-text: #0080c3;
 }

.background-image3 {
  background-image: url(../img/mio/fondos/heartbanner.jpg);
  background-size: cover;
  background-position: center center; 
  background-repeat: no-repeat;
  height: 60vh; 
  width: 100%; 
}
.background-image3 h1 {
    padding: 3.25rem 2rem 0 2rem;
    font-weight: 400;
    text-shadow: 20px 18px 16px rgb(20, 19, 17);
    
}

 /* Contenedores principales */

 .kit-digital-main {
     /* max-width: 1100px; */
     font-family: "Poppins", sans-serif;
     color: #243344;
     background-color: #ffffff;
     padding: 1.8rem 2rem;
     border-radius: 1.2rem;
     box-shadow: 0 4px 24px rgba(0, 32, 64, 0.08);
     line-height: 1.6;
     margin: 2rem 3rem!important;
 }

 h1 {
     font-size: 0.8rem !important;
     font-weight: 900;
     color: #00497a;
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }

 h2 {
     font-size: 1.2rem !important;
     font-weight: 800;
     margin-bottom: 1rem;
     color: #006ead;
     text-transform: uppercase;
     letter-spacing: 0.06em;
 }

 h3 {
     font-size: 1.6rem;
     font-weight: 500 !important;
     color: #0080c3;
 }

 h4 {
     font-weight: 500 !important
 }

 p {
     margin-bottom: 1rem;
     font-size: 1.1rem;
     /* Mayor legibilidad */
 }

 ul {
     margin-left: 1.4rem;
     margin-bottom: 1rem;
     list-style: disc;
 }

 li {
     margin-bottom: 0.35rem;
     font-size: 1.05rem;
 }

 .titlehidden {
     display: none;
 }

 .kdlogo {
     width: 40%;
     margin: 0 0 0 30rem;
 }
 .kdtitle {
    padding: 4rem 2rem 2rem 2rem;
 }

 h2 {
     position: relative;
     padding-left: 2.5rem;
     font-weight: 500 !important;
     color: #006ead;
     margin-bottom: 1rem;
 }

 h2::before {
     content: "";
     position: absolute;
     left: 0;
     top: 60%;
     transform: translateY(-50%);
     width: 0.8rem;
     height: 7rem;
     background: linear-gradient(180deg, #0480d6 0%, #45d8e4 100%);
     border-radius: 0.2rem;
     box-shadow: 0 0 6px rgba(4, 128, 214, 0.6);
 }

 #crm-title,
 #erp-title,
 #efactura-title,
 #puesto-title,
 #kitdigital-comparativa-title {
     margin: 4rem auto 3rem auto !important;
 }

 .text-bold {
     color: var(--color-principal);
     font-weight: 550;
     font-size: 1.25REM;
 }

 .negro {
     color: #000000a4;
 }

 .maxwidth {
     width: 100%;
 }

 .botondown {
     margin: 1rem 3rem 2rem 30rem !important;
 }

 /* Tarjetas resumen */
 .kitdigital-card {
     background: #f7fafc;
     padding: 1.4rem 1.6rem;
     border-radius: 1rem;
     box-shadow: 0 2px 10px rgba(0, 32, 64, 0.06);
     margin: 2rem 0;
 }

 .kitdigital-card h3 {
     color: #0080c3;
     font-weight: 700;
     font-size: 1.3rem;
     margin-bottom: 1rem;
 }

 .kitdigital-card ul {
     list-style-type: circle;
     padding-left: 1.6rem;
     color: #365264;
 }

 .kitdigital-card li {
     margin-bottom: 0.4rem;
 }

 .btn-cta:hover,
 .btn-cta:focus {
     background: #27a4e0;
     outline: none;
 }

 /* Tabla comparativa */
 .kitdigital-table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 2.5rem;
     font-size: 1.1rem;
 }

 .kitdigital-table th,
 .kitdigital-table td {
     border: 1px solid #eaeaea;
     padding: 0.8rem 1.1rem;
     text-align: left;
 }

 .kitdigital-table thead th {
     background-color: #f0f5fa;
     color: #0073a1;
     font-weight: 700;
 }

 .kitdigital-table tbody tr:hover {
     background-color: #e4f0fa;
 }

 /* Texto descriptivo pequeño */
 .kitdigital-comparativa p {
     margin-top: 1rem;
     font-size: 1rem;
     color: #556775;
 }

 .btn-cta {
     margin: 0 auto;
     padding: 0.6rem 1.8rem;
     background: linear-gradient(90deg, #0080c3, #e84a90);
     border: none;
     border-radius: 100px;
     font-weight: 700;
     color: white !important;
     cursor: pointer;
     transition: background 0.3s ease, box-shadow 0.3s ease;
     text-align: center;
     display: inline-block;
     font-size: 1.06rem;
     letter-spacing: 0.06em;
     user-select: none;
     box-shadow: 0 3px 10px rgba(232, 74, 144, 0.3);
 }

 .btn-cta:hover,
 .btn-cta:focus {
     background: linear-gradient(90deg, #e84a90, #0080c3);
     box-shadow: 0 6px 15px rgb(232 74 144 / 0.6);
     outline: none;
     transform: translateY(-1.5px);
 }

 /* Titulos en cards, acorde con tu estilo */
 .card-title {
     margin: 0 0 0.8rem 0;
     color: #0080c3;
     font-weight: 700;
     font-size: 1.45rem;
     text-align: center;
 }

 /* Estilo destacado para los resúmenes de cada sección */
 .kitdigital-card {
     background: linear-gradient(135deg, #f3f9ff, #fef0f7);
     border-radius: 1.2rem;
     box-shadow: 0 12px 20px rgba(232, 74, 145, 0.618);
     padding: 1.8rem 2rem;
     margin: 2rem auto;
     color: #243344;
     font-weight: 600;
     transition: box-shadow 0.3s ease;
     width: 30rem;
     max-width: 90vw;
     box-sizing: border-box;
 }

 .kitdigital-card:hover {
     box-shadow: 0 12px 60px rgba(232, 74, 144, 0.62);
 }

 /* Mejor legibilidad y espaciado */
 .kitdigital-card ul {
     list-style-type: circle;
     margin-left: 1.4rem;
     color: #365264;
     font-weight: 500;
 }

 .kitdigital-card li {
     margin-bottom: 0.45rem;
     font-size: 1.07rem;
 }

 /* Opcional: centra el título dentro de kitdigital-card usando .card-title */
 .kitdigital-card>h3 {
     text-align: center;
     margin-bottom: 1rem;
     color: #e84a90;
     text-transform: uppercase;
     letter-spacing: 0.06em;
 }
 /* =========== VERSIÓN MÓVIL (≤600px) =========== */
@media (max-width: 600px) {
.kdlogo {
    width: 60%;
    margin: 0 auto;
    padding-bottom: 5rem;
}
  /* 1-2: CARDS flexibles, apiladas y perfectamente centradas */
  .kitdigital-bloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.9rem 0.12rem;
    margin-bottom: 1.3rem;
  }
  .kitdigital-card {
    background: linear-gradient(135deg, #f3f9ff, #fef0f7);
     border-radius: 1.2rem;
     box-shadow: 0 12px 20px rgba(232, 74, 145, 0.618);
     padding: 1.8rem 2rem;
     margin: 2rem 0;
     color: #243344;
     font-weight: 600;
     transition: box-shadow 0.3s ease;
     width: 20rem;
     margin: 0 auto;
  }
  .kitdigital-card ul,
  .kitdigital-card li {
    margin-left: 0.5em;
    padding-left: 0.1em;
    text-align: left;
    width: 100%;
  }
  .kitdigital-card h3 {
    text-align: center;
    margin-bottom: 0.45em;
    font-size: 1.05em;
    margin-top: 0.35em;
  }

  /* 3: Disminuir padding/margin de los headings */
  h1, h2, h3, h4, .kdtitle, .kitdigital-comparativa h2 {
    text-align: center !important;
    font-size: 1.02rem !important;
    line-height: 1.19;
    margin: 0.3em 0 0.3em 0 !important;
    padding: 0.1em 0 !important;
  }
.kdtitle {
    text-align: justify;
    padding: 1.5rem!important;
}
  /* 4: Botón de convocatorias perfectamente centrado y flexible */
  .btn-cta.botondown {
    display: block;
    margin: 0.7em auto 1.1em auto !important;
    max-width: 80vw;
    width: 70vw;
    font-size: 1rem;
    text-align: center;
    padding: 0.52em 0.2em;
    border-radius: 6px;
    box-sizing: border-box;
  }

  /* 5: Banner final mucho más grande pero flexible SIEMPRE CENTRADO */
  .kitdigital-banner-final, /* Añade esta clase al div contenedor en HTML */
  .kitdigital-comparativa + img,
  img[alt*="Agentes Digitalizadores"] {
    display: block;
    margin: 4rem 1rem 1.23rem auto;
    width: 98vw;
    max-width: 470px;
    min-width: 120px;
    height: auto;
    object-fit: contain;
  }
}

/* =========== VERSIÓN TABLET (601px a 1024px) =========== */
@media (min-width: 601px) and (max-width: 1024px) {
.kdlogo {
    width: 100%;
    margin: 0 auto;
}
.kdtitle {
    margin-top: 3rem!important;
    padding: 2rem!important;
}
  .kitdigital-bloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0.6rem;
    margin-bottom: 2rem;
  }
  .kitdigital-card {
    width: 85vw;
    max-width: 93vw;
    min-width: 60vw;
    margin: 1.5rem auto !important;
    border-radius: 18px;
    padding: 2rem 1em 1.8rem 1em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
  }
  .kitdigital-card ul,
  .kitdigital-card li {
    margin-left: 1em;
    padding-left: 0.2em;
    text-align: left;
    width: 100%;
  }
  .kitdigital-card h3 {
    text-align: center;
    margin-bottom: 0.5em;
    font-size: 1.09em;
    margin-top: 0.55em;
  }
  h1, h2, h3, h4, .kdtitle, .kitdigital-comparativa h2 {
    text-align: center !important;
    font-size: 1.13rem;
    margin: 0.5em 0 ;
    padding: 0.15em 0 ;
  }
  .btn-cta.botondown {
    display: block;
    margin: 0.8em auto 1.3em auto !important;
    max-width: 80vw;
    width: 60vw;
    font-size: 1.12rem;
    text-align: center;
    padding: 0.66em 0.2em;
    border-radius: 6px;
    box-sizing: border-box;
  }
  .kitdigital-banner-final,
  .kitdigital-comparativa + img,
  img[alt*="Agentes Digitalizadores"] {
    display: block;
    margin: 1.7rem auto 1.4rem auto;
    width: 75vw;
    max-width: 398px;
    min-width: 140px;
    height: auto;
    object-fit: contain;
  }
}
/*  RESPONSIVE MAS PROBLEMATICO */
@media (max-width: 1024px) {
  .kitdigital-card {
    width: 26rem;
    max-width: 90vw;
    margin: 1.5rem auto;
  }
}

/* Tablet pequeño/789px - ancho adaptable y centrado */
@media (max-width: 789px) {
  .kitdigital-card {
    width: 70vw;
    margin: 1rem auto;
    padding: 1.5rem 1.8rem;
  }
  .kdtitle {
    padding:2rem;
  }
   h2::before {
     top: 40%;
     
}
}
/* Mobile/500px - ancho casi total con algo de padding */
@media (max-width: 500px) {
  .kitdigital-card {
    width: 95vw;
    max-width: 20REM;
    margin: 1rem auto;
    padding: 1.2rem 1.4rem;
    font-size: 0.95rem;
  }
  .kit-digital-main{
    padding: 1REM;
    margin:0 0.5rem;
  }
  
  .kitdigital-card a.btn-cta {
    width: 100%;
    display: block;
    text-align: center;
    box-sizing: border-box;
  }
  .kdtitle {
    text-align: justify;
    padding:1rem!important;
}
h2::before {
    height: 10rem;
    top:47%
}