body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    color: #333;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: 'Roboto', sans-serif;
    font-weight:900;
}

h2 {
    font-size: 2.5rem;
    color: rgb(91 90 95);
}

h2, h3, h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #000;
}

.btn, .nav-link.btn {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.img-bg-generic {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

    .img-bg-generic::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 1) 100%);
        pointer-events: none;
    }

.img-bg-genericEnd {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

    .img-bg-genericEnd::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 1) 100%);
        pointer-events: none;
    }


html {
  font-size: 14px;
}


@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}


/*Specific page-related styles*/

.hero {
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.footer-bg {
    background-color: #ffffff;
    color: #4b5563; /* text-gray-700 */
}

.text-doc-red {
    color: #ef4444; /* red-500 */
}

.text-doc-blue {
    color: #2563eb; /* blue-600 */
}

.list-disc-custom li {
    list-style-type: disc;
    margin-left: 1.5rem;
}

.card {
    background: hsl(0deg 0% 96.21%) !important;
}

    .card h3 {
        color: rgb(91 90 95) !important;
        font-size: 1.55rem;
    }

    .card p {
        color: rgb(91 90 95) !important;
    }

.btn-cardDM {
    background-color: hsl(215.73deg 52.19% 49.22%);
    color: #fff;
    min-width: 150px;
}

.rc-anchor-light {
    background: none !important;
    color: #fff !important;
    font-weight:bold !important;
}

.no-padding-margin {
    padding: 0 !important;
    margin: -10px 0px -10px 0px !important;
}

.colorPrimarygray {
    color: hsl(0deg 0% 38.43%) !important;
    font-weight: bold;
}

.colorPrimarygrayNFW {
    color: hsl(0deg 0% 38.43%) !important;
}



.card-custom {
    border-radius: 22px;
    overflow: hidden;
    padding-top: 10px;
}

.card-icon {
    padding-left: 18px;
    padding-top: 10px;
}

    .card-icon img {
        width: 110px;
        height: auto;
        display: block;
        border-radius: 18px;
        box-shadow: 0 2px 10px rgba(0,0,0,.12);
    }


.icon-orange {
    background-color: #ffedd5;
    border: 1px solid #fdba74;
}

.icon-green {
    background-color: #dcfce7;
    border: 1px solid #4ade80;
}

.icon-blue {
    background-color: #dbeafe;
    border: 1px solid #60a5fa;
}

.icon-purple {
    background-color: #e9d5ff;
    border: 1px solid #a855f7;
}

.icon-yellow {
    background-color: #fef9c3;
    border: 1px solid #facc15;
}

.btn-custom {
    background-color: #3b82f6; /* Blue-600 */
    color: white;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem;
    font-weight: 500;
}

    .btn-custom:hover {
        background-color: #2563eb; /* Blue-700 */
        color: white;
    }

.site-header {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* El nav se queda a la derecha */
    padding: 10px 20px;
    position: relative;
}

.logo {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1000; /* siempre arriba del nav */
}

    .logo img {
        height: 160px; /* Tamaño controlado */
        width: auto;
    }

.lang-switch .btn-outline-secondary:hover {
    background-color: #ed3b25;
    color: #fff;
    border-color: #ed3b25;
}

.lang-switch_hover {
    background-color: #ed3b25;
    color: #fff;
    border-color: #ed3b25;
}

#carouselExampleIndicators {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 70vh; 
    width: 100%; 
}

.client-logo {
    max-height: 60px; /* altura uniforme */
    object-fit: contain; /* mantiene proporción */
    transition: transform 0.3s ease;
}

    .client-logo:hover {
        transform: scale(1.1); /* zoom suave al pasar el mouse */
    }

/*

@media (min-width: 768px) {
    .carousel-inner {
        display: flex;
    }

    .carousel-item {
        margin-right: 0;
        flex: 0 0 33.333333%;
        display: block;
    }
}
    */

.carousel-inner-custom {
    padding: 1em;
}


.carousel-control-prev, .carousel-control-next {
    background-color: #e1e1e1;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-inner-custom {
    position: relative;
    width: 90%;
    overflow: hidden;
    margin-left: 50px;
}

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: flex !important;
    justify-content:space-around;
}




/* --- Scope específico: solo afecta .hero-carousel --- */
.hero-carousel {
    position: relative;
    overflow: hidden;
}

/* Imagen que ocupa toda la pantalla */
.carousel-hero-img {
    height: 100vh; /* alto = 100% del viewport */
    object-fit: cover; /* cubre todo el área, recortando si hace falta */
    width: 100%;
    display: block;
}

/* Caption (texto) encima de la imagen, alineado a la izquierda como en tu diseño */
.hero-carousel .carousel-caption {
    position: absolute;
    top: 0;
    left: 10%;
    right: auto;
    bottom: auto;
    padding-top: 6.5rem; /* ajusta para que el título quede verticalmente donde quieras */
    text-align: left;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
    padding-right: 20px;
}

/* Controles agrupados debajo y centrados */
.hero-controls {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
    margin-top: 0;
    padding: 18px 0 30px; /* separacion respecto al viewport */
    background: transparent;
    position: relative; /* no absolute para que no tape la imagen */
    z-index: 20;
}

/* Botones prev/next estilo redondo y discreto */
.btn-control {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    cursor: pointer;
}

    .btn-control:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
    }

.custom-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
}

.custom-indicators .active {
    background-color: #000; /* color del activo */
}

.custom-indicators {
    position: relative !important;
}


/* Responsive tweaks (opcional) */
@media (max-width: 768px) {
    .hero-carousel .carousel-caption {
        left: 6%;
        padding-top: 4.5rem;
    }

    .btn-control {
        width: 36px;
        height: 36px;
    }

    .indicators-wrapper button {
        width: 8px;
        height: 8px;
        margin: 0 4px;
    }
}


.benefit-card {
    background: #fff;
    transition: transform 0.2s ease-in-out;
    text-align: left; /* alinea título y texto a la izquierda */
}

    .benefit-card:hover {
        transform: translateY(-5px);
    }

    .benefit-card .icon {
        max-height: 130px; /* altura uniforme */
        object-fit: contain; /* mantiene proporción */
        margin-top: -50px;
        margin-left: -50px;
    }

.card-custom-s {
    border-radius: 1rem;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

    .card-custom-s:hover {
        transform: translateY(-5px);
    }


.indicador-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out;
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .indicador-card:hover {
        transform: translateY(-5px);
    }

.indicador-card-text{

}

.indicador-icon {
    max-height: 130px; /* altura uniforme */
    object-fit: contain; /* mantiene proporción */
}

.btn-control .carousel-control-prev-icon,
.btn-control .carousel-control-next-icon {
    background-size: 100% 100%;
    filter: invert(1) grayscale(100%) brightness(0.2); /* negro */
    width: 1rem;
    height: 1rem;
}

.icon-footer {
    width: 50px;
    height: 50px;
    margin-top: -10px;
}

.icon-linkedin {
    width: 80px;
    height: 80px;
}

.logo-footer {
    max-width: 140px;
}

.footer-logo{
    padding-left: 0px !important;
}

#carouselExampleControls2{
    display: flex;
}

.leadc {
    font-size: 2.5rem !important;
    color: rgb(91 90 95);
    font-weight: 500;
}

.leadb {
    font-size: 2rem !important;
    font-weight: 500;
}

@media (min-width: 1200px) {
    .col-xl-2 {
        flex: 0 0 auto;
        width: 20%;
    }
}


.full-width-section {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background-image: url("/img/FONDO.jpg");
    background-size: cover;
    background-position: center;
}

.card-body, .benefit-card {
    box-shadow: rgb(143 143 143 / 12%) 2px -18px 20px 0px inset;
    border-radius: 0px 0px 16px 16px;
}

.indicador-card-dm {
    /* background: #fff; */
    border-radius: 12px;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); */
    transition: transform 0.2s ease-in-out;
    display: flex;
    flex-direction: row;
    align-items: center;
}






.intro {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 50px 50px 0px 50px;
    font-size: 35px;
    font-weight: 500;
    text-align: center;
    color: rgb(91 90 95) !important;
}

    .intro h2 {
        font-size: 2.9rem !important;
        color: rgb(91 90 95) !important;
        font-weight: 600 !important;
    }

    .intro h1 {
        text-align: center;
        font-weight: 500;
        font-size: 1.7rem !important;
    }




.dm-section {
    padding: 2rem 0;
    background-color: #f9f9f9;
}

.benefits-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f9f9f9;
    z-index: -1;
}

/*.dm-wrapper {
    max-width: 95%;
}

    .dm-wrapper.left {
        margin-right: auto;
    }

    .dm-wrapper.right {
        margin-left: auto;
    }*/


/*.dm-card {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    box-shadow: 0 2px 3px rgba(0,0,0,.06);
}*/

.dm-card {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 10px 10px 20px rgb(0 0 0 / 8%);
}

.dm-wrapper.right .dm-card {
    max-width: 85%;
    margin-left: auto;
    flex-direction: row; /* Imagen izquierda, texto derecha */
    border-radius: 20px 0px 0px 20px;
}

.dm-wrapper.left .dm-card {
    max-width: 85%;
    margin-right: auto;
    flex-direction: row-reverse; /* Imagen derecha, texto izquierda */
    border-radius: 0px 20px 20px 0px;
}

.dm-image img {
    width: 260px;
    border-radius: 20px;
    object-fit: cover;
}

.dm-text {
    flex: 1;
    max-width: 70%;
}

    .dm-text h3 {
        font-size: 38px;
        margin-bottom: 15px;
        font-weight: 800;
        color: rgb(91 90 95) !important;
    }

    .dm-text p {
        line-height: 1.5;
        font-size: 21px;
        text-align: justify;
        hyphens: auto;
        color: rgb(91 90 95) !important;
        font-weight: 500;
    }

.text-white h3 {
    color: #fff !important;
}

.text-white p {
    color: #fff !important;
}

.dm-image {
    width: 290px;
    height: 290px;
    border-radius: 22px;
    overflow: hidden;
    flex-shrink: 0;
}

    .dm-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.dm-image-cta-content {
    max-width: 80%;
    margin: auto;
}

    .dm-image-cta-content h2 {
        font-size: 4rem !important;
        font-weight: bold !important;
        text-align: center !important;
    }

    .dm-image-cta-content p {
        font-size: 2.1rem !important;
        text-align: center !important;
        line-height: 1.2;
    }

@media (max-width: 768px) {
    .intro h2 {
        font-size: 2.1rem !important;
    }

    .intro  {
        font-size: 1.8rem !important;
    }

    .intro {
        padding: 30px 30px 0px 30px;
    }

    .dm-card {
        flex-direction: column !important;
        padding: 1rem;
        gap: 1.5rem;
    }

    .card-left, .card-right {
        border-radius: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .dm-wrapper.left, .dm-wrapper.right, .dm-card {
        padding: 20px 20px 0 20px;
        max-width: 100% !important;
    }

    .dm-text h3 {
        font-size: 30px;
    }

    .dm-text p {
        font-size: 14px;
        font-weight: 550;
        line-height: 1.3;
    }

    .dm-image {
        width: 100%;
        height: 250px;
    }

    .dm-text {
        max-width: 90%;
    }

    .dm-text p{
        max-width: 100%;
        text-align: justify !important;
    }

    .dm-image-cta-content {
        max-width: 100%;
        margin: auto;
    }

        .dm-image-cta-content h2 {
            font-size: 1.8rem !important;
            font-weight: bold !important;
            text-align: center !important;
        }

        .dm-image-cta-content p {
            font-size: 1.2rem !important;
            text-align: justify !important;
            font-weight: 550;
            color: hsl(0deg 0% 51.33%) !important;
        }
}







.form-section {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 500px;
}

    .form-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
    }





.form-section {
    position: relative;
    min-height: 520px;
    padding: 2rem 5% 2rem 5%;
    background-size: cover;
    background-position: center;
}


.form-title {
    width: 100%;
    margin-bottom: 3rem;
    color: hsl(0deg 0% 38.43%) !important;
    text-align: center;
}


.form-float {
    width: 33%;
    margin-left: auto; 
}


    .form-float .form-control,
    .form-float .dropdown-toggle,
    .form-float textarea {
        background: rgba(255,255,255,0.95);
        border: none;
        border-radius: 999px;
        padding: 0.75rem 1.2rem;
    }

    .form-float textarea {
        border-radius: 20px;
    }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .form-float {
        width: 45%;
    }
}

@media (max-width: 992px) {
    .form-float {
        width: 60%;
    }

}

@media (max-width: 768px) {
    .form-float {
        width: 100%;
        margin: 2rem auto 0;
    }

    .footer-logo {
        padding-left: 0px !important;
        display: flex;
        justify-content: space-between;
    }
}





.benefits-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 880px;
}

.benefit-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 10px 15px 25px rgba(0, 0, 0, 0.3);
}

.progress-ring
{
    position: relative;
    width: 86px;
    height: 86px;
    margin: 10px;
}

.ring-bg {
    fill: none;
    stroke: #e6e6e6;
    stroke-width: 8;
}

.ring-progress {
    fill: none;
    stroke: #00e0dc;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 210;
    stroke-dashoffset: 40;
    transform: rotate(-135deg);
    transform-origin: 50% 50%;
}

.ring-progress {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 281;
    transform: rotate(-30deg);
    transform-origin: 50% 50%;
}

.ring-progress-int {
    stroke: #dddbdb;
    stroke-width: 12;
    stroke-dashoffset: 0;
}

.ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #7a7a7a;
}

.ring-90 {
    stroke-dashoffset: 40;
}

.ring-60 {
    transform: rotate(30deg);
    stroke-dashoffset: 90;
}

.ring-100 {
    stroke: #7ed321;
    stroke-dashoffset: 0;
}


.benefits-section {
    margin: 0px 100px 100px 100px;
}

.benefits-section h2{
    text-align: center;
    padding: 10px;
    font-weight:800;
    font-size:50px;
}

.bg-benefits {
    border-radius: 30px;
    inset: 2rem;
    position: relative;
    z-index: 0;
}

    .bg-benefits::before {
        content: "";
        position: absolute;
        top: 2rem;
        bottom: 2rem;
        left: 1.5rem;
        right: 1.5rem;
        background: url('../img/solutions/tangible-benefits-bg.webp') center / cover no-repeat;
        border-radius: 25px;
        z-index: 0;
    }

    .bg-benefits > .benefits-wrapper {
        position: relative;
        z-index: 1;
    }


@media (max-width: 1150px) {
    .dm-wrapper {
        max-width: 950px;
    }

    .benefits-wrapper {
        max-width: 580px;
    }
}

@media (max-width: 1030px) {
    .benefits-section {
        margin: 0 70px 70px 70px;
    }

        .benefits-section h2 {
            font-size: 40px;
        }

    .dm-wrapper {
        max-width: 840px;
    }

}


@media (max-width: 850px) {
    .benefits-section {
        margin: 0 50px 50px 50px;
    }


    .dm-wrapper {
        max-width: 780px;
    }
}


@media (max-width: 768px) {

    .bg-benefits {
        inset: 0;
    }
}


@media (max-width: 568px) {
    .benefits-section {
        margin: 0px;
    }

    .benefits-wrapper {
        max-width: 400px;
        margin: auto;
    }

    .bg-benefits{
        padding:10px;
    }

    .bg-benefits::before {
        top: 0rem;
        bottom: 0rem;
        left: 0rem;
        right: 0rem;
        border-radius: 25px;
        z-index: 0;
    }
}


.dm2-hero {
    min-height: 420px;
    display: flex;
    align-items: center;
    background-image: url('../img/solutions/hero-bg.webp');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    padding: 0 6%;
}


.dm2-hero-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
}

    .dm2-hero-content h3 {
        font-size: clamp(2rem, 4vw, 3.2rem);
        line-height: 1.15;
        font-weight: 600;
        color: hsl(0deg 0% 51.33%) !important;
        margin: 0;
    }

.dm-image-cta {
    position: relative;
    width: 100%;
    padding: 50px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: -50px;
}

    .dm-image-cta img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

.dm-image-cta-text {
    background: #ff3b1f;
    color: #fff;
    padding: 5px 20px;
    border-radius: 12px;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    white-space: nowrap;
    text-align:center;
    max-width: 300px;
    margin: auto;
}

@media (max-width: 768px) {
    .dm-image-cta-text {
        left: 46px;
        padding: 12px 16px;
        font-size: 2rem;
    }
}

.privacy-content  h2{
    font-size: 15px;
    color: #000;
    font-weight:600;
}


.text-white {
    color: #fff !important;
}


/*DocManager pages*/
.dm2-hero {
    min-height: 420px;
    display: flex;
    align-items: center;
    background-image: url('../img/docmanager/about/banner3-docmanager.webp');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    padding: 0 6%;
}


.dm2-hero-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
}

    .dm2-hero-content h3 {
        font-size: clamp(2rem, 4vw, 3.2rem);
        line-height: 1.15;
        font-weight: 600;
        color: #fff !important;
        margin: 0;
    }

/* Configuración de la Sección */
.dm-intro {
    padding: 60px 20px 20px 20px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #4a4a4a;
    background-color: #f9f9f9; /* Fondo gris muy tenue */
}

    .dm-intro .container {
        max-width: 800px;
        margin: 0 auto;
    }

    /* Encabezado Azul Estilo Pestaña */
    .dm-intro h2 {
        background-color: #3f51b5;
        color: #fff;
        padding: 15px 40px;
        display: inline-block;
        border-radius: 0 30px 30px 0;
        margin-left: -20px;
        font-weight: 700;
        font-size: 3rem;
    }

.dm-intro-container {
    padding: 40px;
}
/* Texto de introducción */
.intro-text, .lego-main-text {
    text-align: justify;
    font-weight: 400;
    font-size: 2.2rem !important;
    font-weight: 500;
    color: #555;
}

.intro-text1 {
    text-align: justify;
    font-weight: 400;
    font-size: 2.2rem !important;
    font-weight: 550;
    color: #000;
}

/* LISTA DE ÍCONOS */
.dm-list {
    list-style: none;
    padding: 40px;
    margin: 0 0 40px 0;
}

    .dm-list li {
        display: flex;
        align-items: center;
        font-size: 1.5rem;
        font-weight: 600;
        color: #444;
        margin-bottom: 25px;
        padding-left: 90px; 
        position: relative;
        min-height: 40px;
    }

        .dm-list li:nth-child(3) {
            color: #3f51b5;
        }

        /* Estilo para los iconos (imágenes) */
        .dm-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 70px;
            height: 70px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* Asignación de imágenes (Ejemplo) */
        .dm-list li:nth-child(1)::before {
            background-image: url('../img/docmanager/about/reglas.webp');
        }

        .dm-list li:nth-child(2)::before {
            background-image: url('../img/docmanager/about/responsables.webp');
        }

        .dm-list li:nth-child(4)::before {
            background-image: url('../img/docmanager/about/documentos.webp');
        }

        .dm-list li:nth-child(5)::before {
            background-image: url('../img/docmanager/about/alertas.webp');
        }

        .dm-list li:nth-child(6)::before {
            background-image: url('../img/docmanager/about/AI.webp');
        }

.intro-footer {
    text-align: start;
    padding: 20px;
    font-weight: 500;
    font-size: 2.2rem !important;
    color: #636363;
}

.intro-footer2 {
    text-align: center;
    padding: 20px;
    font-weight: 500;
    font-size: 2.2rem !important;
    color: #000;
}

.dm-lego {
    padding: 0;
    background: #fff;
}

.lego-header {
    background: #4469b0;
    color: #fff;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 0 30px 30px 0;
    margin-left: -20px;
    font-weight: 700;
    font-size: 3rem;
}


.lego-main-text {
    padding: 40px;
    font-size: 1.2rem;
    color: #555;
}

.lego-highlight {
    font-style: italic;
    text-align: center;
    margin: 30px 0;
    font-size: 2.5rem;
    font-weight:700;
}

.lego-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
}

.lego-piece {
    padding: 30px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    position: relative;
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.piece-blue {
    background: hsl(230.85deg 52.68% 56.08%);
    border-radius: 10px 0 0 10px;
    font-weight: bold;
}

.piece-gray {
    margin-left: 10px;
    background: hsl(210deg 38.61% 39.61%);
    border-radius: 0 10px 10px 0;
    font-size: 1.2rem;
}

/* Efecto de encaje */
.piece-tab {
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #4a69bd;
    border-radius: 50%;
    z-index: 2;
}

.piece-socket {
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}



/* Stack de cajas con flecha (Efecto Cascada) */
.agile-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.agile-box {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    color: white;
    text-align: center;
    font-style: italic;
    position: relative;
    border-radius: 5px;
    font-size: 1.5rem;
}

    .agile-box:nth-child(1) {
        background: #5c6bc0;
    }

    .agile-box:nth-child(2) {
        background: #4db6ac;
    }

    .agile-box:nth-child(3) {
        background: #4a90e2;
    }

    .agile-box:nth-child(4) {
        background: #37474f;
    }

/* Triángulo/Flecha hacia abajo */
.agile-arrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid inherit; /* Hereda color de la caja */
}



.integration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.integration-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    transition: transform 0.3s ease;
    min-height: 150px;
}

    .card-icon-dm{
        margin-top: -50px;
    }

    .integration-card:hover {
        transform: translateY(-10px);
    }

    .integration-card .card-icon img {
        width: 100%; /* La imagen ya trae el icono y el fondo blanco curvo */
        max-width: 250px; /* Ajusta según el tamaño original de tus webp */
        height: auto;
    }

    .integration-card .card-text {
        padding: 20px;
        font-size: 1.7rem;
        font-weight: 600;
        color: #555;
        line-height: 1.3;
    }



.dm-agile{
    margin: 90px 0px 80px 0;
}
    .dm-agile .container {
        margin-top: 50px;
    }



.dm-securuty-header {
    background: hsl(230.98deg 58.59% 55.49%);
    color: #fff;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 0 30px 30px 0;
    margin-left: -20px;
    font-weight: 700;
    font-size: 3rem;
}

.dm-motto {
    text-align: center;
    margin: 40px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* O la que uses en tu proyecto */
}

.motto-brand {
    font-size: 4rem;
    font-weight: 800; /* Extra bold para el título */
    font-style: italic;
    color: #333;
    margin-bottom: 5px;
}

.motto-text {
    font-size: 3rem;
    font-weight: 600;
    font-style: italic;
    color: #666; /* Gris para el efecto de la imagen */
    margin-top: 0;
}

.ai-header {
    display: flex;
    background-color: #3c7ec5;
    color: #fff;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 0 30px 30px 0;
    margin-left: -20px;
}
.ai-header h2 {
    color: #fff !important;
}

.ai-chip-icon {
    width: 40px;
    height: auto;
}

.ai-features-list {
    list-style: none;
    padding: 50px;
}

    .ai-features-list li {
        margin-bottom: 15px;
        font-size: 1.7rem;
        font-weight: 600;
        display: flex;
        align-items: center;
    }

.dm-ai .container {
    margin-top: 50px;
}

.check-icon {
    background-color: #4a90e2;
    color: white;
    border-radius: 50%;
    min-width: 45px;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    font-size: 1.8rem;
}

.dm-security .container {
    margin-top: 50px;
}

.dm-integration .container {
    margin-top: 50px;
}

    .dm-integration .container .intro-footer {
        margin-bottom: 100px;
    }

.link-hide {
    text-decoration: none;
}

.card-btnContent {
    margin: 0 auto;
}

.list-unstyled li {
    font-size: 22px;
    flex-direction: row;
    align-items: flex-start;
}

.list-items-footer li {
    font-size: 22px;
}

    .list-items-footer li::marker {
        color: #ed3b25; /* Color del punto */
        font-size: 1.2em; /* Tamaño del punto */
    }

    .list-items-footer li a {
        padding: 0px !important;
        color: hsl(0deg 0% 51.33%) !important;
        font-weight: 500;
    }

        .list-items-footer li a:hover, 
        .list-items-footer li a:focus {
            color: hsl(0deg 0% 51.33%) !important;
        }

.f-dm-h3{
    font-size: 1.9rem;
}

.privacy-page {
    margin-top: 50px;
    margin-bottom: -50px;
}

.benefit-card p {
    text-align: justify;
    font-weight: 550;
    color: hsl(0deg 0% 51.33%) !important;
    font-size: 1.1rem;
}


@media (max-width: 768px) {

    .dm-intro h2, .lego-header, .dm-securuty-header {
        font-size: 1.8rem;
    }

        .intro-footer i {
            text-align: center;
            color: #4558c0;
        }

    .intro-text, .lego-main-text {
        text-align: start;
        font-size: 1.7rem !important;
    }

    .agile-box {
        font-size: 1.4rem !important;
    }

    .integration-card {
        min-height: 180px;
    }

    .dm-intro-container {
        padding: 10px;
    }

    .dm-list {
        list-style: none;
        padding: 20px;
        margin: 0 0 40px 0;
    }

    .integration-grid {
        display: grid;
        grid-template-columns: auto;
        gap: 30px;
        margin: 40px 0;
    }

    .ai-features-list {
        list-style: none;
        padding: 10px;
    }
}


/* Mobile: imagen y título en la misma línea */
/* Ocultar título desktop en mobile, mostrar título mobile */
.card-title-desktop {
    display: block;
}

.card-title-mobile {
    display: none;
}

.text-muted0 {
    color: #6c757d !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
}

/* Mobile: imagen y título en línea */
@media (max-width: 767px) {
    .card-title-desktop {
        display: none;
    }

    .card-custom {
        display: flex;
        flex-direction: column;
    }

    .card-title-mobile {
        display: inline-block;
        font-size: 1rem;
        margin: 0;
        vertical-align: middle;
    }

    .card-header-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 15px 0 15px;
    }

        .card-header-row .card-icon {
            width: 125px;
            flex-shrink: 0;
        }

            .card-header-row .card-icon img {
                width: 100%;
                height: auto;
            }

    .card-body {
        padding-top: 10px;
    }


    .indicador-icon {
        max-height: 80px;
    }

    .text-muted0 {
        font-size: 1.2rem !important;
    }

    .text-title {
        font-size: 1.2rem !important;
    }

    .indicators-mobile{
        display: flex;
        align-items: center;
    }

    .logo img{
        max-height: 90px;
    }

    .indicators-mobile > * {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .card-custom img{
        max-height: 180px;
    }

    .benefit-card .icon {
        max-height: 130px;
    }

    .benefit-card {
        display: flex;
        margin-top: 25px;
    }

    .progress-ring {
        top: -50px;
        background: #fff;
        border-radius: 50px;
        margin-bottom: -30px;
    }
}


@media (max-width: 768px) {
    .benefit-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px; 
        margin-top: 30px;
    }

        .benefit-card .progress-ring {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
        }

        .benefit-card p {
            margin-top: 70px;
            order: 2;
        }

    .benefits-wrapper {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    /* Fondo del card */
    .benefit-card {
        background: white;
        border-radius: 16px;
        padding: 20px 15px 15px 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .intro-footer {
        font-size: 1.4rem !important;
        text-align: center;
    }

    .motto-brand{
        font-size: 3.2rem;
    }

    .motto-text{
        font-size:2.5rem !important;
    }
}

.intro {
    background-color: #f9f9f9;
}

.dm-ai, .dm-security, .dm-integration, .dm-agile, .dm-lego, .dm-intro {
    background: #edeeed;
}

.btn-pill {
    background: hsl(215.04deg 50.61% 48.43%);
    color: #fff;
    padding: 10px 40px 10px 40px;
}


@media (min-width: 2400px) {
    .benefits-wrapper {
        max-width: 1280px;
    }

    .benefit-card p, .ring-text {
        font-size: 1.8rem;
    }

    .progress-ring {
        width: 186px;
        height: 186px;
    }

        .progress-ring svg {
            width: 186px !important;
            height: 186px !important;
        }

    .dm-text h3 {
        font-size: 2.2rem;
    }

    .dm-text p {
        font-size: 1.8rem;
    }

    .dm2-hero {
        min-height: 920px;
    }

    .dm2-hero-content {
        max-width: 1520px;
    }

    .dm2-hero-content h3 {
        font-size: 6rem !important;
    }

    .intro h2 {
        font-size: 3rem !important;
    }

    .intro h1 {
        font-size: 2.4rem !important;
    }

    .nav-link {
        font-size: 1.9rem !important;
    }

    .btn-group-sm > .btn, .btn-sm {
        font-size: 1.9rem;
    }

    .dm-image-cta-text {
        font-size: 3rem;
        max-width: 600px;
    }

    .form-title {
        font-size: 3rem;
    }

    .form-float {
        width: 40%;
    }

        .form-float .form-control, .form-float .dropdown-toggle, .form-float textarea {
            padding: 1.55rem 2rem;
        }

    .form-control {
        padding: 1.075rem 1.55rem;
        font-size: 1.8rem;
        font-weight: 500;
    }

    .btn, .nav-link.btn {
        font-size: 1.8rem;
    }

    .form-check-input {
        width: 1.7em;
        height: 1.7em;
    }
    .form-check-label{
        font-size:1.7rem;
    }

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1820px;
    }

    .card h3 {
        font-size: 1.9rem;
    }
    .card-text {
        font-size: 1.4rem;
    }

    .btn-cardDM {
        font-size: 1.4rem !important;
    }

    .benefit-card p {
        text-align: initial;
        font-size: 1.4rem !important;
    }

    .container h2 {
        font-size: 3.5rem !important;
    }
}

@media (min-width: 3200px) {
    .benefits-wrapper {
        max-width: 2080px;
    }

    .benefit-card p, .ring-text {
        font-size: 2.3rem;
    }

    .progress-ring {
        width: 186px;
        height: 186px;
    }

        .progress-ring svg {
            width: 186px !important;
            height: 186px !important;
        }

    .dm-text h3 {
        font-size: 2.7rem;
    }

    .dm-text p {
        font-size: 2.3rem;
    }

    .intro h2 {
        font-size: 3.5rem !important;
    }

    .intro h1 {
        font-size: 2.9rem !important;
    }

    .nav-link {
        font-size: 2.4rem !important;
    }

    .icon-footer {
        width: 80px;
        height: 80px;
    }

    .list-unstyled li, .list-unstyled li a {
        font-size: 2.3rem;
    }

    .f-title-dm {
        font-size: 2.8rem;
    }

    .dm-image-cta-content h2 {
        font-size: 5rem !important;
    }

    .dm-image-cta-content p {
        font-size: 2.5rem !important;
    }

    .dm-image-cta-text {
        font-size: 5rem;
        max-width: 800px;
    }

    .form-title {
        font-size: 4rem;
    }

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1520px;
    }

    .form-float {
        width: 50%;
    }

        .form-float .form-control, .form-float .dropdown-toggle, .form-float textarea {
            padding: 1.75rem 2.2rem;
        }

    .form-control {
        padding: 1.375rem 1.75rem;
        font-size: 2rem;
        font-weight: 500;
    }

    .form-check-input {
        width: 2em;
        height: 2em;
    }

    .form-check-label {
        font-size: 2rem;
    }

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 2320px;
    }

    .card h3 {
        font-size: 2.4rem;
    }

    .card-text {
        font-size: 1.8rem;
    }

    .btn-cardDM {
        font-size: 1.8rem !important;
    }

    .benefit-card p {
        text-align: initial;
        font-size: 1.8rem !important;
    }

    .container h2 {
        font-size: 3.8rem !important;
    }

    .indicador-card-dm-text .text-muted0 {
        font-size: 2rem !important;
    }
}