html{scroll-behavior:smooth;}

  body
{
  padding:0px;
  margin:0px;
   font-family: 'Montserrat', sans-serif;  
}

.navbar-brand {
    float: left;
    height: 50px;
    padding: 10px 20px 20px 40px;
    font-size: 18px;
    line-height: 20px
}
.navbarlinksaling
{
  padding-right: 80px;
}
.headlinksaling
{
  padding-right: 180px;
}
.navbar-brand:focus,
.navbar-brand:hover {
    text-decoration: none
}
.navbar-brand>img {
    display: block
}


/*USABILIDAD*/

.float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:20px;
  left:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.my-float{
  margin-top:16px;
  margin-bottom: 16px;
}
.float i.fa-whatsapp {
  font-size: 1.3em;  
 
}

.btn-whatsapp-pulse {
  background: #25d366;
  color: white;
  position: fixed;
  
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 0;
  padding: 35px;
  text-decoration: none !important;
  border-radius: 50%;
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  80% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
}

.btn-whatsapp-pulse-border {
  bottom: 120px;
  right: 20px;
  animation-play-state: paused;
}

.btn-whatsapp-pulse-border::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  padding: 25px;
  border: 5px solid #25d366;
  opacity: 0.75;
  animation-name: pulse-border;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes pulse-border {
  0% {
    padding: 25px;
    opacity: 0.75;
  }
  75% {
    padding: 50px;
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*FIN USABILIDAD*/


/*FOOTER*/   



 footer { background-color:#0c1a1e; min-height:350px; font-family: 'Open Sans', sans-serif; }
.footer-col { margin-top:50px; }
.logofooter { margin-bottom:10px; font-size:25px; color:#fff; font-weight:700;}

.footer-col p { color:#fff; font-size:12px; font-family: 'Open Sans', sans-serif; margin-bottom:15px;}
.footer-col p i { width:20px; color:#999;}

.footer-ul { list-style-type:none;  padding-left:0; margin-left:2px;}
.footer-ul li { line-height:29px; font-size:12px;}
.footer-ul li a { color:#a0a3a4; transition: color 0.2s linear 0s, background 0.2s linear 0s; }
.footer-ul i { margin-right:10px;}
.footer-ul li a:hover {transition: color 0.2s linear 0s, background 0.2s linear 0s; color:#ff670f; }
 .copyright { min-height:40px; background-color:#000000;}
 .copyright p { text-align:left; color:#FFF; padding:10px 0; margin-bottom:0;}
 .heading7 { font-size:21px; font-weight:700; color:#d9d6d6; margin-bottom:22px;}
 .post p { font-size:12px; color:#FFF; line-height:20px;}
 .post p span { display:block; color:#8f8f8f;}
 .bottom_ul { list-style-type:none; float:right; margin-bottom:0;}
 .bottom_ul li { float:left; line-height:40px;}
 .bottom_ul li:after { content:"/"; color:#FFF; margin-right:8px; margin-left:8px;}
 .bottom_ul li a { color:#FFF;  font-size:12px;}
.social-icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
    background-color: blue;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    padding-top: 7px;
    border-radius: 50%;
}
 .footer-social li{
     float:left;
 }
 .linked-in{
     background-color:#007bb6;
 }
 .facebook{
     background-color:#3b5998;
 }
 .twitter{
     background-color:#1da1f2;
 }
 .google{
     background-color:#f63e28;
 }
 .colorU
 {
  color:#3780aa;
 }
 .colortitulo
 {
  color: #3780aa;
 }
 hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.fonttextmain
{
  font-size: 20px;
}  ul.nav a:hover { color: #555555 !important; }

.fontsecundarytext
{
  font-size: 18px;
} 


/*FIN FOOTER*/


/*2026 DETALLES*/
/* ========================================================
   DNP CORP - CONFIGURACIÓN GLOBAL Y ESCRITORIO (min-width: 768px)
   ======================================================== */
@media (min-width: 768px) {
    /* 1. Comportamiento Hover para Desplegar el Menú */
    .navbar-nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
        margin-top: 0; /* Evita zona muerta que cierra el menú */
        opacity: 1;
        visibility: visible;
    }

    /* Animación de entrada suave (Escala y desplazamiento) */
    .dropdown-menu.scale-in-center {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all 0.25s ease-in-out;
        transform: translateY(10px);
    }

    .navbar-nav li.dropdown:hover > .dropdown-menu.scale-in-center {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* 2. Estilo Compacto de los Encabezados (Headers) */
    .dropdown-menu .dropdown-header {
        color: #0056b3; /* Azul corporativo unificado */
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2px; /* Espaciado de letras natural y compacto */
        padding: 8px 20px 4px; /* Padding reducido para menor altura */
        line-height: 1; /* Altura de línea mínima */
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 3px;
    }

    /* 3. Espaciado Compacto de los Enlaces */
    .dropdown-menu > li > a {
        padding: 4px 20px; /* Altura reducida para que no sea muy alto */
        line-height: 1.4;
        font-size: 13.5px; /* Tamaño corporativo ideal */
    }

    /* Ajuste fino de los separadores */
    .dropdown-menu .divider {
        margin: 5px 0;
    }

    /* Alineación perfecta de los iconos */
    .dropdown-menu li a i {
        margin-right: 6px;
        color: #0056b3;
        font-size: 12px;
        width: 15px;
        text-align: center;
    }
}

/* ========================================================
   DNP CORP - CONFIGURACIÓN RESPONSIVA MÓVIL (max-width: 767px)
   ======================================================== */
@media (max-width: 767px) {
    /* 1. Control de Altura y Scroll del Navbar Abierto */
    .navbar-collapse {
        max-height: 380px !important; /* Evita que el menú colapse fuera de pantalla */
        overflow-y: auto !important; /* Permite scroll táctil dentro del menú */
        background-color: #ffffff; /* Fondo sólido para legibilidad */
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    }

    /* 2. Solución Definitiva al Submenú Cortado por la Izquierda */
    .navbar-nav .open .dropdown-menu.big-menu,
    .dropdown-menu-center,
    .scale-in-center {
        position: static !important; /* Desactiva el posicionamiento absoluto flotante */
        float: none !important;
        left: 0 !important; /* Elimina el desvío hacia la izquierda */
        right: 0 !important;
        transform: none !important; /* Quita traslaciones en X que lo saquen de la pantalla */
        width: 100% !important; /* Se adapta limpiamente al ancho de la pantalla del celular */
        box-shadow: none !important;
        background-color: #fafdff !important; /* Fondo sutil para diferenciar las soluciones */
        border: none !important;
        margin-top: 0 !important;
    }

    /* 3. Ajustes de Lectura Táctil en Celulares */
    .dropdown-menu.big-menu .dropdown-header {
        padding: 10px 15px 4px !important;
        border-bottom: 1px dashed #e2e8f0 !important;
        color: #004494 !important;
    }

    .dropdown-menu.big-menu > li > a {
        padding: 8px 25px !important; /* Área de clic más grande para los dedos */
        font-size: 14px !important;
        color: #333333 !important;
        text-align: left !important;
    }

    .dropdown-menu.big-menu li a i {
        margin-right: 8px;
        color: #004494;
    }

    /* Corrección de márgenes para elementos redundantes dentro del nav móvil */
    .navbar-nav li a p {
        margin: 0 !important;
        display: inline-block;
    }
}
/*FIN 2026 DETALLES*/



/*PUNTOS DE RED*/


/* =========================================
  Personalizacion del modal
   ========================================= */
/* --- DISEÑO PREMIUM PARA EL MODAL DNP --- */

/* Contenedor Principal: Sombra profunda y bordes suaves */
.bgmodalform {
    border-radius: 12px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Para que el header respete el radio del borde */
}

/* Header: Azul corporativo con degradado sutil */
.modalhedercolor {
    background: linear-gradient(135deg, #0077b6 0%, #0096d1 100%);
    color: #ffffff;
    padding: 25px;
    border-bottom: none;
}

.modalhedercolor .modal-title {
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modalhedercolor .close {
    color: #ffffff;
    opacity: 0.8;
    font-size: 28px;
    text-shadow: none;
}

/* Cuerpo del Formulario */
.modal-body {
    padding: 30px;
    background-color: #fcfcfc;
}

/* Inputs Modernos: Bordes delgados y foco resaltado */
.formulario .form-control {
    height: 45px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: none;
    font-size: 15px;
    transition: all 0.3s ease;
}

.formulario .form-control:focus {
    border-color: #0096d1;
    box-shadow: 0 0 0 3px rgba(0, 150, 209, 0.1);
    background-color: #ffffff;
}

/* Estilo para el área de mensaje */
.formulario textarea.form-control {
    height: auto;
    padding-top: 12px;
}

/* Botón de Envío: Estilo de "Éxito" del Mockup */
#submit2 {
    background-color: #5cb85c;
    border: none;
    color: #ffffff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(92, 184, 92, 0.3);
}

#submit2:hover {
    background-color: #4cae4c;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(92, 184, 92, 0.4);
}

#submit2 i, #submit2 span {
    margin-right: 8px;
}

/* Texto de Políticas (Pequeño y legible) */
.tinytex {
    font-size: 11px;
    color: #64748b;
    line-height: 1.5;
    margin-top: 20px;
    text-align: center;
}

.tinytex a {
    color: #0077b6;
    font-weight: 600;
    text-decoration: underline;
}

/* Ajustes para ReCaptcha */
.g-recaptcha {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

/* Ajuste específico para el mensaje de error de RUC */
#rucError {
    font-weight: 600;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 10px;
}


/* =========================================
   Sección: Hero Section
   ========================================= */
 
.hero-dnp {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9));
    padding: 140px 0 80px;
    color: #ffffff;
}

.hero-badge {
    background: rgba(0, 150, 209, 0.2);
    color: #0096d1;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #0096d1;
    display: inline-block;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 20px;
    color: #cbd5e1;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* Botones */
.btn-main-dnp {
    background-color: #5cb85c; /* Color verde del mockup */
    color: #ffffff;
    padding: 18px 35px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
    margin: 10px;
}

.btn-main-dnp:hover {
    background-color: #4cae4c;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.btn-whatsapp-hero {
    background-color: transparent;
    color: #ffffff;
    padding: 18px 35px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 4px;
    display: inline-block;
    border: 2px solid #ffffff;
    margin: 10px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-whatsapp-hero:hover {
    background: #ffffff;
    color: #0f172a;
}

/* Características Rápidas */
.hero-features {
    margin-top: 50px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
}

.hero-features span {
    margin: 0 15px;
    font-size: 14px;
    color: #94a3b8;
}

.hero-features i {
    color: #0096d1;
    margin-right: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title { font-size: 32px; }
    .hero-subtitle { font-size: 17px; }
    .btn-main-dnp, .btn-whatsapp-hero { width: 100%; margin: 5px 0; }
}
/* =========================================
   Sección: ¿Qué es la Certificación?
   ========================================= */

.certificacion-intro {
    padding: 70px 0;
    background-color: #ffffff;
}

.cert-title {
    color: #0077b6; /* Azul primario DNP */
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cert-description {
    font-size: 16px;
    color: #4a4a4a;
    line-height: 1.7;
    margin-bottom: 35px;
    text-align: left;
}

/* --- Contenedor de Tarjetas --- */
.boxes-wrapper {
    margin-top: 10px;
}

.benefit-card {
    position: relative; /* Clave para el icono en esquina */
    padding: 65px 15px 20px 20px; /* Padding top amplio para el icono */
    color: #ffffff; /* Texto de la etiqueta en blanco */
    min-height: 155px;
    border-radius: 4px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-end; /* Alinea el texto al fondo */
}

/* Efecto hover profesional */
.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* --- Icono Blanco en Esquina Superior Derecha --- */
.corner-icon {
    position: absolute;
    top: 15px;
    right: 18px;
    font-size: 32px; /* Tamaño Font Awesome */
    color: #ffffff;    /* COLOR BLANCO PARA EL ICONO */
    opacity: 0.8;      /* Sutil transparencia para integrar */
}

.benefit-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    width: 100%;
    display: block;
}

/* --- Colores de Fondo de Tarjetas --- */
.card-cyan {
    background-color: #0096d1;
}

.card-navy {
    background-color: #3d5a80;
}

/* --- Estilos de Imagen --- */
.cert-image-container {
    text-align: center;
}

.cert-img {
    display: inline-block;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border: 1px solid #f0f0f0;
}

/* --- Responsive y Alineación Flex --- */

/* Pantallas Grandes (Desktop) */
@media (min-width: 992px) {
    .section-flex-align {
        display: flex;
        align-items: center; /* Centra verticalmente texto e imagen */
    }
}

/* Pantallas Pequeñas (Móvil) */
@media (max-width: 767px) {
    .cert-title {
        font-size: 26px;
        text-align: center;
    }
    .cert-description {
        text-align: center;
    }
    .cert-image-container {
        margin-top: 45px;
    }
    /* En móvil, reducimos el padding top de la tarjeta */
    .benefit-card {
        min-height: auto;
        padding-top: 55px;
    }
}
 /* === GLOBAL === */
.section {
    padding: 70px 0;
}
.section-light {
    background: #f5f6f7;
}
.section-title {
    font-size: 32px;
    font-weight: 700;
    color: #1b1f3b;
    margin-bottom: 25px;
}

 

/* === CTA BUTTON === */
.btn-dnp {
    background: #00d46a;
    color: #000;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 25px;
}
.btn-dnp:hover {
    background: #00b85a;
    color: #000;
}

/* === Lists === */
.section ul, .section ol {
    padding-left: 20px;
}
.section li {
    font-size: 17px;
    margin-bottom: 10px;
}

/* === FAQ === */
.faq h3 {
    font-size: 20px;
    margin-top: 25px;
    font-weight: 700;
}


/* =========================================
   Sección: Importancia de Certificar
   ========================================= */

/* Contenedor de 5 columnas personalizado */
@media (min-width: 992px) {
    .col-md-20 {
        width: 20%;
        float: left;
        padding: 0 10px;
    }
    
    /* IGUALADOR DE ALTURAS */
    .display-flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    
    .display-flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }

    .importance-card {
        flex: 1; /* Esto obliga a la card a llenar todo el espacio vertical de la columna */
    }
}

/* Estilo de la Tarjeta */
.importance-card {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente si hay poco texto */
    align-items: center;
}

.importance-card:hover {
    border-color: #0096d1;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Iconos de Font Awesome */
.card-icon {
    font-size: 32px;
    color: #0096d1;
    margin-bottom: 25px;
}

/* Texto */
.importance-card p {
    font-size: 14px;
    color: #5a5a5a;
    line-height: 1.6;
    margin: 0;
}

.section-title {
    color: #0077b6;
    font-weight: 700;
    margin-bottom: 50px;
}
/* =========================================
   Sección: FIN Importancia de Certificar
   ========================================= */




/* =======================================================
   Sección: Proceso de Certificación 
   ======================================================= */

/* --- SECCIÓN PROCESO DNP CORP --- */

.dnp-proc-section {
    padding: 90px 0;
    background-color: #ffffff;
}

.dnp-proc-main-title {
    color: #3e607f;
    font-weight: 800;
    font-size: 36px;
    margin-bottom: 70px;
    letter-spacing: -1px;
}

.dnp-proc-margin-bottom {
    margin-bottom: 40px;
}

/* Nivelación de alturas */
@media (min-width: 768px) {
    .dnp-proc-flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .dnp-proc-flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .dnp-proc-card {
        flex: 1;
    }
}

/* Estilo de Tarjeta */
.dnp-proc-col {
    position: relative;
    margin-bottom: 20px;
}

.dnp-proc-card {
    border-radius: 6px;
    padding: 40px 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.dnp-proc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

/* Degradados */
.dnp-proc-grad-cyan {
    background: linear-gradient(135deg, #0096d1 0%, #0077b6 100%);
    color: #ffffff;
}

.dnp-proc-grad-navy {
    background: linear-gradient(135deg, #3d5a80 0%, #1e3a5f 100%);
    color: #ffffff;
}

/* Elementos Internos */
.dnp-proc-icon-box {
    background: rgba(255, 255, 255, 0.15);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.dnp-proc-icon-box i {
    font-size: 24px;
    color: #ffffff;
}

.dnp-proc-phase {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
    opacity: 0.8;
}

.dnp-proc-description {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* Flechas conectoras */
.dnp-proc-arrow {
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    font-size: 28px;
    color: #0096d1;
    z-index: 5;
}

/* Responsive Móvil */
@media (max-width: 767px) {
    .dnp-proc-main-title {
        font-size: 28px;
        text-align: center;
    }
    .dnp-proc-card {
        text-align: center;
    }
    .dnp-proc-icon-box {
        margin: 0 auto 20px auto;
    }
}
/* =========================================
   Sección: FIN Proceso de Certificación
   ========================================= */

/* =======================================================
   Sección: TIPOS DE CERTIFICACION
   ======================================================= */
/* --- SECCIÓN TIPOS DE CERTIFICACIÓN DNP --- */

.dnp-type-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.dnp-type-main-title {
    color: #0077b6; /* Azul DNP */
    font-weight: 800;
    font-size: 36px;
    margin-bottom: 40px;
    letter-spacing: -1px;
}

/* Contenedor Flex para alinear imagen y texto */
@media (min-width: 992px) {
    .dnp-type-flex-container {
        display: flex;
        align-items: center; /* Centra la imagen verticalmente con la lista */
    }
}

/* Estilo de la Imagen */
.dnp-type-image-wrapper {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.dnp-type-img {
    width: 100%;
    transition: transform 0.5s ease;
}

.dnp-type-img:hover {
    transform: scale(1.05);
}

/* Lista de Items */
.dnp-type-list {
    padding-left: 20px;
}

.dnp-type-item {
    background-color: #ffffff;
    border: 1px solid #0096d1; /* Borde Cyan según mockup */
    margin-bottom: 15px;
    border-radius: 4px;
    padding: 18px 25px;
    transition: all 0.3s ease;
    cursor: default;
}

.dnp-type-item:hover {
    background-color: #f0f9ff;
    transform: translateX(10px);
}

.dnp-type-item-content {
    font-size: 18px;
    color: #334155;
    line-height: 1.4;
}

.dnp-type-item-content strong {
    color: #0077b6;
    font-weight: 700;
}

/* Ajuste para el ítem de Fibra Óptica (si quieres resaltarlo más) */
.dnp-type-highlight {
    border-left-width: 5px; /* Un toque visual diferente */
}

/* Responsive */
@media (max-width: 991px) {
    .dnp-type-list {
        padding-left: 0;
        margin-top: 30px;
    }
    
    .dnp-type-main-title {
        text-align: center;
        font-size: 28px;
    }

    .dnp-type-item-content {
        font-size: 16px;
    }
}

   /* =======================================================
   Sección:FIN TIPOS DE CERTIFICACION
   ======================================================= */



   /* =======================================================
   Sección:EQUIPOS
   ======================================================= */

/* --- SECCIÓN EQUIPOS PROFESIONALES DNP --- */

.dnp-equipo-section {
    padding: 100px 0;
    background-color: #f8f9fa; /* Gris muy tenue para diferenciar de la sección anterior */
}

/* Alineación vertical en Desktop */
@media (min-width: 992px) {
    .dnp-equipo-flex-container {
        display: flex;
        align-items: center;
    }
}

/* Tipografía y Textos */
.dnp-equipo-main-title {
    color: #0f172a;
    font-weight: 800;
    font-size: 42px;
    margin-bottom: 25px;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.dnp-equipo-text {
    font-size: 18px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 30px;
}

.dnp-equipo-text strong {
    color: #0077b6;
    font-weight: 700;
}

/* Distintivo de Marca */
.dnp-equipo-badge {
    display: inline-block;
    padding: 10px 20px;
    background-color: rgba(0, 150, 209, 0.1);
    color: #0096d1;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dnp-equipo-badge i {
    margin-right: 8px;
}

/* Contenedor de Imagen */
.dnp-equipo-image-container {
    position: relative;
    padding: 15px;
}

.dnp-equipo-img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}

.dnp-equipo-img:hover {
    transform: scale(1.02);
}

/* Ajustes Responsive */
@media (max-width: 991px) {
    .dnp-equipo-section {
        padding: 60px 0;
    }
    
    .dnp-equipo-content {
        text-align: center;
        margin-bottom: 50px;
    }
    
    .dnp-equipo-main-title {
        font-size: 32px;
    }
    
    .dnp-equipo-text {
        font-size: 16px;
    }
}

     /* =======================================================
   Sección:FIN EQUIPOS
   ======================================================= */

   /* =======================================================
   Sección:BENEFICIOS
   ======================================================= */
/* --- SECCIÓN BENEFICIOS DNP CORP --- */

.dnp-ben-section {
    padding: 80px 0;
    background-color: #ffffff;
    
}

.dnp-ben-main-title {
    color: #3d5a80; /* Azul Navy corporativo */
    font-weight: 700;
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 60px;
}

.dnp-ben-highlight {
    color: #0096d1; /* Azul Cyan DNP */
}

/* Contenedor Flex para Desktop */
@media (min-width: 992px) {
    .dnp-ben-flex-row {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
    }
    /* Forzamos que cada columna ocupe el ancho necesario para 5 items */
    .dnp-ben-item {
        width: 20%; 
        padding: 0 15px;
    }
}

/* Estilo de los Items */
.dnp-ben-item {
    margin-bottom: 40px;
    transition: transform 0.3s ease;
}

.dnp-ben-item:hover {
    transform: translateY(-5px);
}

/* Iconos */
.dnp-ben-icon-wrapper {
    position: relative;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.dnp-ben-icon-wrapper i {
    font-size: 50px;
    color: #0096d1;
}

/* Mini icono para el engranaje (Paso 2) */
.dnp-ben-mini-icon {
    font-size: 18px !important;
    position: absolute;
    background: #ffffff;
    padding: 2px;
    border-radius: 50%;
}

/* Texto de Beneficio */
.dnp-ben-text {
    font-size: 15px;
    color: #64748b;
    line-height: 1.4;
    max-width: 180px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 991px) {
    .dnp-ben-main-title {
        font-size: 26px;
    }
    .dnp-ben-item {
        width: 33.33%;
    }
}

@media (max-width: 767px) {
    .dnp-ben-item {
        width: 100%;
    }
    .dnp-ben-text {
        max-width: 100%;
    }
}

     /* =======================================================
   Sección:FIN BENEFICIOS
   ======================================================= */


     /* =======================================================
   Sección:SECTORES
   ======================================================= */

/* --- SECCIÓN SECTORES DNP CORP --- */

.dnp-sec-section {
    padding: 0px 0;
    background-color: #ffffff;
}

.dnp-sec-main-title {
    color: #3d5a80;
    font-weight: 800;
    font-size: 38px;
    margin-bottom: 50px;
    line-height: 1.1;
}

.dnp-sec-main-title span {
    color: #0096d1;
}

/* Contenedor del Grid */
.dnp-sec-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
}

/* Estilo de los Bloques */
.dnp-sec-box {
    padding: 40px 20px;
    min-height: 200px;
    display: flex;
    align-items: flex-end; /* Alinea el texto al fondo como en el mockup */
    transition: all 0.4s ease;
    border: 2px solid #ffffff; /* Separación entre bloques */
}

.dnp-sec-box:hover {
    transform: translateY(-10px);
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Colores de Fondo */
.dnp-sec-bg-cyan {
    background-color: #0096d1;
}

.dnp-sec-bg-navy {
    background-color: #3d5a80;
}

/* Contenido Interno */
.dnp-sec-content {
    width: 100%;
    color: #ffffff;
}

.dnp-sec-content i {
    font-size: 45px;
    display: block;
    margin-bottom: 25px;
    opacity: 0.9;
    text-align: right; /* Iconos a la derecha como el mockup */
}

.dnp-sec-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    text-align: left;
}

/* Responsive */
@media (max-width: 991px) {
    .dnp-sec-box {
        min-height: 180px;
    }
    .dnp-sec-name {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .dnp-sec-main-title {
        font-size: 30px;
        text-align: center;
    }
    .dnp-sec-box {
        min-height: 160px;
    }
    .dnp-sec-content i {
        font-size: 35px;
    }
}

        /* =======================================================
   Sección:FIN SECTORES
   ======================================================= */


          /* =======================================================
   Sección:CTA
   ======================================================= */
/* --- SECCIÓN CTA DNP CORP --- */

.dnp-cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0077b6 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Efecto decorativo de fondo */
.dnp-cta-section::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(0, 150, 209, 0.1);
    border-radius: 50%;
    z-index: 1;
}

.dnp-cta-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -1px;
    line-height: 1.2;
}

.dnp-cta-subtitle {
    font-size: 20px;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto 40px auto;
    font-weight: 300;
    line-height: 1.6;
}

/* Botones Personalizados */
.dnp-cta-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dnp-cta-btn-primary {
    background-color: #0096d1;
    color: #ffffff;
    padding: 18px 35px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
    border: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.dnp-cta-btn-primary:hover {
    background-color: #0077b6;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.dnp-cta-btn-outline {
    background-color: transparent;
    color: #ffffff;
    padding: 18px 35px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
    border: 2px solid #ffffff;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.dnp-cta-btn-outline:hover {
    background-color: #ffffff;
    color: #0f172a;
    transform: translateY(-3px);
}

/* Ajustes para móviles */
@media (max-width: 767px) {
    .dnp-cta-section {
        padding: 70px 0;
    }
    .dnp-cta-title {
        font-size: 30px;
    }
    .dnp-cta-subtitle {
        font-size: 18px;
    }
    .dnp-cta-btn-primary, .dnp-cta-btn-outline {
        width: 100%;
        margin-bottom: 15px;
    }
    .dnp-cta-actions {
        gap: 0;
    }
}

       /* =======================================================
   Sección:FIN CTA
   ======================================================= */



/*==================================================
    BASE (0 - 575px)
==================================================*/

/* Todo el CSS móvil va aquí */


/*==================================================
    SMALL DEVICES (576px)
==================================================*/

@media (min-width:576px){

}


/*==================================================
    TABLETS (768px)
==================================================*/

@media (min-width:768px){

}


/*==================================================
    LAPTOP (992px)
==================================================*/

@media (min-width:992px){

}


/*==================================================
    DESKTOP (1200px)
==================================================*/

@media (min-width:1200px){

}


/*==================================================
    LARGE DESKTOP (1400px)
==================================================*/

@media (min-width:1400px){

}









/*FIN PUNTOS DE RED*/