/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/

html, body {
  height: 100%;
}

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

.alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

.alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}

.aligncenter {
  display: block;
  margin: 0 auto 15px;
}

a:focus {
  outline: 0px solid;
}

img {
  max-width: 100%;
  height: auto;
}

.fix {
  overflow: hidden;
}



.title-black {
    color: black !important;

}
/*----------TITULOS------------------------------*/
.title-categoria {
    color: var(--azul-stark) !important;
   font-family: 'Raleway', sans-serif; 
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 1px;
padding: 20px 20px;
text-align: center;
}

@media (max-width: 900px) {
.title-categoria { font-size: 2.7rem; margin: 0; line-height: 1.2;  padding-left: 15px; padding-right: 15px;  margin-top: 1px; text-align: center; }
}
/*----------FIN------------------------------*/

h3 {
  font-size: 30px;
  line-height: 32px;
}

h4 {
  font-size: 24px;
  line-height: 26px;
}

h5 {
  font-size: 20px;
  line-height: 22px;
}

h6 {
  font-size: 16px;
  line-height: 20px;
}

a {
  transition: all 0.3s ease 0s;
  text-decoration: none;
}

a:hover {
  color: #3EC1D5;
  text-decoration: none;
}

a:active, a:hover {
  outline: 0 none;
}

body {
  background: #fff none repeat scroll 0 0;
  color: #444;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  text-align: left;
  overflow-x: hidden;
  line-height: 22px;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  display: none;
  background: #3EC1D5;
  color: #fff;
  padding: 6px 12px 9px 12px;
  font-size: 16px;
  border-radius: 2px;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 15px;
  }
}

.back-to-top:focus {
  background: #3EC1D5;
  color: #fff;
  outline: none;
}

.back-to-top:hover {
  background: #3cd6ed;
  color: #fff;
}

.clear {
  clear: both;
}

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

input, select, textarea, input[type="text"], input[type="date"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"], button, button[type="submit"] {
  -moz-appearance: none;
  box-shadow: none !important;
}

#preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #001a33; /* Azul oscuro corporativo */
    display: flex; justify-content: center; align-items: center;
    z-index: 99999;
}

.jh-loader-container { text-align: center; }

/* Efecto de brillo que recorre el logo */
.jh-logo-scan {
    width: 150px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 5px rgba(0, 64, 128, 0.5));
    animation: jh-scan 2.5s infinite linear;
}

/* Barra de carga técnica */
.jh-progress-bar {
    width: 200px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.jh-progress-line {
    width: 40%;
    height: 100%;
    background: #ffcc00; /* El amarillo de tus acentos en el menú */
    position: absolute;
    animation: jh-progress-move 1.5s infinite ease-in-out;
}

.jh-loading-text {
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    margin-top: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Animaciones */
@keyframes jh-scan {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.5) drop-shadow(0 0 15px #004080); }
    100% { filter: brightness(1); }
}

@keyframes jh-progress-move {
    0% { left: -40%; }
    100% { left: 100%; }
}

::-moz-selection {
  background: #3EC1D5;
  text-shadow: none;
}

::selection {
  background: #3EC1D5;
  text-shadow: none;
}

.area-padding {
  padding: 70px 0px 80px;
}

.area-padding-2 {
  padding: 70px 0px 50px;
}

.padding-2 {
  padding-bottom: 90px;
}

.section-headline h2 {
  display: inline-block;
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 70px;
  position: relative;
  text-transform: capitalize;
}

.section-headline h2::after {
  border: 1px solid #333;
  bottom: -20px;
  content: "";
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 40%;
}

.sec-head {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 0;
  padding: 0 0 10px;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
}

/*--------------------------------*/

/*  2. Header top Area
/*--------------------------------*/


:root {
    --azul-oscuro: #001a2d;
    --azul-degradado: linear-gradient(180deg, #001a2d 0%, #00335c 100%);
    --cian-jh: yellow;
    --blanco: #ffffff;
    --hover-bg: rgba(255, 255, 255, 0.1);
}

/* Ocultar botón hamburguesa en escritorio */
.jh-mobile-toggle {
    display: none;
}

/* --- ESTILOS GENERALES --- */
.jh-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
     box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

.jh-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- BARRA SUPERIOR (CONTACTO Y REDES) --- */
.jh-top-bar {
    background-color: var(--azul-oscuro);
    color: var(--blanco);
    padding: 8px 0; /* Un poco más de aire */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.jh-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jh-contact-group {
    display: flex;
    gap: 20px;
}

.jh-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.jh-contact-item i {
    color: var(--cian-jh);
    font-size: 18px;
}

.jh-label {
    line-height: 1.2;
    color: var(--cian-jh);
    font-weight: bold;
}

.jh-label small {
    display: block;
    color: var(--blanco);
    font-weight: normal;
}

.jh-data {
    color: var(--blanco);
    text-decoration: none;
}

.jh-data:hover {
    color: yellow;
    text-decoration: none;
}

/* Redes Sociales Mejoradas */
.jh-social-icons {
    display: inline-flex;
    gap: 8px;
    margin-left: 10px;
}

.jh-social-icons a {
    color: var(--blanco);
    background: #081624;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.jh-social-icons a:hover {
    background: var(--cian-jh);
    color: var(--azul-oscuro); /* El icono cambia a oscuro para que no se pierda */
    transform: translateY(-2px);
}

/* --- BARRA DE NAVEGACIÓN --- */
.jh-nav-area {
    background: var(--azul-degradado);
    height: 80px; 
}

.jh-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.jh-logo, .jh-logo a, .jh-logo img {
    height: 100%;
    display: flex;
    align-items: center;
}

.jh-logo img {
    padding: 15px 0; /* Menos espacio arriba/abajo para que la imagen use todo el alto */
    max-height: 90px; /* El logo ahora es más grande */
    width: auto;
    transition: transform 0.3s ease;
}

.jh-logo img:hover {
    transform: scale(1.05); /* Efecto sutil al pasar el mouse por el logo */
}

/* Menú Horizontal Desktop */
.jh-menu {
    display: flex;
    list-style: none;
    height: 100%;
    align-items: center;
font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 700; /* Peso ligero para elegancia */
    font-size: 16px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.jh-menu > li {
    height: 100%;
}

.jh-link {
    color: var(--blanco);
    text-decoration: none;
    padding: 0 18px;
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: 500;
    transition: 0.3s;
    font-size: 14px;
    text-transform: uppercase;
}

.jh-link:hover {
    background-color: var(--hover-bg);
 padding: 18px;
color: yellow;
}

.jh-link i {
    margin-left: 6px;
    font-size: 11px;
    color: var(--cian-jh);
}

/* Botón Cotizar Mejorado */
.jh-btn-cotizar {
    background: transparent !important; /* Quitamos el amarillo chillón */
    color: white;
border: 3px solid #00adee !important; /* Borde en color Cian Tecnológico */
    padding: 12px 15px;
     font-weight: bold;
    text-decoration: none;
    display: inline-block;
font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 900; /* Negrita para el llamado a la acción */
    border-radius: 5px !important;

}

.jh-btn-cotizar:hover {
  background-color: #ffffff !important; /* Fondo blanco limpio */
    color: #000b16 !important; /* El texto cambia al color del borde */
    box-shadow: 10px 5px 15px rgba(0, 173, 238, 0.3) !important; /* Un brillo sutil */
font-weight: 900; /* Negrita para el llamado a la acción */

}

/* --- DROPDOWN DESKTOP --- */
.jh-has-dropdown {
    position: relative;
}

.jh-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--azul-oscuro);
    min-width: 240px;
    list-style: none;
    display: none;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    padding: 10px 0;
}

.jh-dropdown li a {
    color: var(--blanco);
    padding: 12px 20px;
    display: block;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.jh-dropdown li a:hover {
    background-color: var(--hover-bg);
    padding-left: 25px; /* Efecto sutil de desplazamiento */
}

.jh-has-dropdown:hover .jh-dropdown {
    display: block;
}

/* Estado activo para resaltar la sección actual */
.jh-link.active {
     background-color: var(--hover-bg);
     padding: 18px;
    color: #FFFF00 !important; /* Amarillo vibrante como se ve en la imagen */
    font-weight: 700;          /* Negrita para mayor impacto visual */
    text-shadow: 0px 0px 5px rgba(255, 255, 0, 0.3); /* Un ligero brillo para que destaque sobre el fondo oscuro */
}

/* Si quieres que la flecha (icon) también cambie a amarillo */
.jh-link.active i {
    color: #FFFF00;
}

/* --- RESPONSIVE MÓVIL (FONDO AZUL) --- */
@media (max-width: 992px) {
    /* Ocultar barra superior */
    .jh-top-bar { display: none !important; }

    /* Botón Hamburguesa */
    .jh-mobile-toggle {
        display: block !important;
        color: var(--blanco) !important;
        font-size: 28px;
        cursor: pointer;
        padding: 10px;
        position: absolute;
        right: 15px;
        top: 20px;
        z-index: 10001;
    }

    /* Menú con FONDO AZUL */
    .jh-menu {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 80px; 
        left: 0;
        width: 100%;
        background-color: var(--azul-oscuro) !important; /* Cambiado a Azul */
        padding: 0;
        z-index: 9999;
         box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
        height: auto;
font-family: 'Montserrat', sans-serif;
font-weight: 400; /* Normal para los enlaces */
    text-transform: uppercase; /* Para mantener el estilo profesional */
    letter-spacing: 1px; /* Un poco de espacio entre letras mejora la lectura */
    }

    .jh-menu.active {
        display: flex !important;
    }

    /* Enlaces Principales (Texto en Blanco) */
    .jh-menu > li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Línea divisoria sutil */
        height: auto;
    }

    .jh-link {
        width: 100%;
        padding: 18px 25px;
        color: var(--blanco) !important; /* Texto blanco para resaltar en azul */
        font-size: 15px;
        font-weight: 600;
        justify-content: space-between;
        text-transform: uppercase;
        background-color: transparent; /* Deja ver el azul de fondo */
        height: auto;
    }

    /* Flecha lateral en color Cian */
    .jh-link i {
        font-size: 14px;
        color: var(--cian-jh); 
        transition: transform 0.3s ease;
    }

    /* Estilo para el Submenú (Dropdown) */
    .jh-dropdown {
        position: relative;
        display: none !important;
        background-color: rgba(0, 0, 0, 0.2); /* Azul un poco más oscuro para profundidad */
        width: 100%;
        box-shadow: none;
        padding: 5px 0;
        top: 0;
    }

    /* Cuando el submenú está abierto */
    .jh-has-dropdown.is-open > .jh-dropdown {
        display: block !important;
    }

    /* Items dentro del submenú (Texto en Cian) */
    .jh-dropdown li a {
        padding: 15px 45px !important; 
        color: white !important; /* Color llamativo para servicios */
        font-size: 14px;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    }

    .jh-dropdown li a:hover {
        background-color: var(--hover-bg);
        padding-left: 50px !important;
    }

    /* Rotar flecha */
    .jh-has-dropdown.is-open > .jh-link i {
        transform: rotate(180deg);
    }

    /* Botón Cotizar al final */
    .jh-cta-item {
        padding: 25px;
        background-color: var(--azul-oscuro);
    }
}
/*------------------------------
  3. About Area - JHARDSYSTEX
--------------------------------*/

.about-area {
    background-color: #EDF2FC;
    padding: 24px 0px;
    padding-bottom: 40px !important; 
    margin-bottom: 0px !important;
    position: relative; /* OBLIGATORIO: para que las partículas no se salgan */
    overflow: hidden;
}

/* --- CONTENEDOR DE PARTÍCULAS --- */
#particles-js-nosotros {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Al fondo */
    pointer-events: none; /* Para que no interfiera con los clics */
}

/* Aseguramos que el contenido esté por encima de las partículas */
.about-area .container, 
.about-area .contenedor-cobertura {
    position: relative;
    z-index: 10; 
}

.titulo-nosotros {
 font-family: 'Raleway', sans-serif;
    padding-top: 3px !important;
    margin-top: 0px !important;  
    color: #003366; /* Azul oscuro Jhardsystex */
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 2px;
line-height: 1.1;     /* Ajusta esto: prueba con 1.1, 1.2 o 1.3 */
    margin-bottom: 20px;  /* Dale un poco de espacio abajo también */
}

.subtitulo-nosotros {
 font-family: 'Raleway', sans-serif;
    padding-top: 5px !important;
    color: black;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
letter-spacing: 2px;
}

.about-image img {
    width: 100%;
    border-radius: 15px;
     box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

/* --- DISEÑO DE PESTAÑAS (TABS) --- */

/* 1. Base de las pestañas */
.about-area .nav-tabs {
    border-bottom: 0 solid #ced4da !important; /* Línea gris base muy fina */
    position: relative;
    z-index: 20;
}


.about-area .nav-tabs li a {
    background-color: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    color: #666 !important; /* Gris para no activos */
    font-weight: 700;
    position: relative;
    padding: 10px 25px;
    transition: all 0.3s ease;
}

/* 2. Pestaña ACTIVA */
.about-area .nav-tabs li.active a {
    color: black !important; /* Azul corporativo */
    opacity: 1 !important;
}

/* 3. El Subrayado Tecnológico (La línea cian) */
.about-area .nav-tabs li a::after {
    content: '';
    position: absolute;
    width: 0%; 
    height: 6px; /* Grosor profesional, ni muy gordo ni muy flaco */
    bottom: -2px; /* Queda justo encima de la línea gris base */
    left: 0;
    background-color: #003366; /* Cyan Jhardsystex */
    transition: all 0.3s ease;
}

/* Activación de la línea */
.about-area .nav-tabs li.active a::after {
    width: 100%;

}

/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 767px) {
    .titulo-nosotros {
 font-family: 'Raleway', sans-serif;
        text-align: center !important;
        font-size: 24px;
        box-sizing: border-box !important;
    }

    .subtitulo-nosotros {
 font-family: 'Raleway', sans-serif;
        text-align: center !important;
        font-size: 18px;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .tab-menu .nav-tabs {
        display: flex;
        justify-content: center;
        border-bottom: none;
    }
}

/*--------------------------------*/

/* 4.Services Area
/*--------------------------------*/

.services-icon {
  color: black;
  display: inline-block;
  font-size: 36px;
  line-height: 36px;
  margin-bottom: 20px;
}

.section-headline.services-head>h2 {
  margin-bottom: 25px;
}

.services-details {
  padding-top: 40px;
  transition: all 0.5s ease 0s;
}

.services-details:hover h4, .services-details:hover .services-icon {
  color: #3EC1D5;
}

.row.second-row {
  margin-top: 40px;
}

.section-head>h2 {
  color: #333;
}

.single-services>h4 {
  color: #444;
  font-size: 24px;
  font-weight: 500;
}

.single-services>p {
  color: black;
  font-size: 14px;
}

/*----------------------------------------
  6.Faq Area
----------------------------------------*/

.faq-details .panel-heading {
  padding: 0;
}

.panel-default>.panel-heading {
  background-color: transparent;
  border: medium none;
  color: #333;
}

.faq-details h4.check-title a {
  color: #333;
  display: block;
  font-weight: 700;
  letter-spacing: 2px;
  margin-left: 40px;
  padding: 6px 10px;
  text-decoration: none;
}

.panel-body {
  padding: 15px 15px 0px 50px;
}

.faq-details h4.check-title {
  color: #444;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0;
}

.faq-details a span.acc-icons {
  position: relative;
}

.faq-details a span.acc-icons::before {
  color: #333;
  content: "";
  font-family: fontawesome;
  font-size: 24px;
  height: 40px;
  left: -51px;
  line-height: 39px;
  position: absolute;
  text-align: center;
  top: -10px;
  width: 42px;
}

.faq-details h4.check-title a.active, .faq-details a.active span.acc-icons::before {
  color: #3ec1d5;
}

.faq-details a.active span.acc-icons::before {
  content: "";
  font-family: fontawesome;
  font-size: 24px;
  height: 40px;
  left: -51px;
  line-height: 39px;
  position: absolute;
  text-align: center;
  top: -10px;
  width: 42px;
}

.second-row {
  margin-top: 30px;
}

.event-content.head-team h4 {
  background: transparent none repeat scroll 0 0;
  color: #333;
  padding: 30px 0 10px;
  font-weight: 500;
  text-transform: capitalize;
margin-bottom: 20px;
    line-height: 1.8; /* Mejora la legibilidad del texto técnico */
}

.tab-menu .nav-tabs>li>a:hover {
  border-color: #eee #eee #ddd;
color: #003366 (--azul-corporativo);
    border-bottom: 4px solid var(--azul-corporativo);
    margin-bottom: -2px;

}

.tab-menu {
  display: block;
  text-align: center;
}

.tab-menu ul.nav {
  margin: 0;
  padding: 0;
}

.tab-menu ul.nav li {
  border: medium none;
  display: inline-block;
  color: white !important; /* El celeste de acento que usas */
    background: none !important;
    border-bottom: 5px solid none !important; /* Línea de énfasis inferior */ 
}

.tab-content {

   padding: 17px 17px !important; /* Espacio generoso y profesional */
    border: 3px solid #e0e0e0;
    background-color: #ffffff;
    border-radius: 9px; /* Un redondeado sutil es más moderno */
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
   animation: fadeIn 0.5s ease;
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

.tab-menu ul.nav li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border-radius: 0;
  color: black;
  display: block;
  font-weight: 500;
  margin-right: 5px;
  padding: 10px 20px;
  font-family: raleway;
  font-size: 18px;
}

.tab-menu ul li.active a, .tab-menu ul li.hover a, .tab-menu ul li.focus a {
  border-bottom: 1px solid #fff;
  color: #293494 !important;
}

.tab-menu .nav-tabs {
  border-bottom: none;
}

.tab-main-img a {
  position: relative;
  display: block;
}

.tab-main-img a:hover span.events-offer {
  height: 20%;
}

.tab-main-img a span.events-offer {
  background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
  bottom: 0;
  color: #fff;
  content: "";
  font-size: 20px;
  font-weight: 700;
  height: 0%;
  left: 0;
  line-height: 70px;
  padding: 0;
  position: absolute;
  text-align: left;
  transition: all 0.5s ease 0s;
  width: 100%;
  padding: 0px 10px;
}


/*----------------------------------------*/

/*  17.Home Page 3  CSS
/*----------------------------------------*/

.home-video {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.header-image.home-3 {
  width: 100%;
  height: 100%;
  position: relative;
}

.table {
  width: 100%;
  height: 100%;
  display: table;
}

.table-cell {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
/*----------------------------------------*/
/*  20. CLIENTES CARRUSEL
/*----------------------------------------*/
.logros-section {
    padding-top: 25px !important;
    margin-top: 0px !important;
    padding: 40px 0;
    background-color:  white;
    text-align: center;
    font-family: 'Montserrat', sans-serif; /* Fuente técnica y limpia */    
    border-top: 1px solid #e1e8e6; /* Línea de división casi invisible */
    border-bottom: 1px solid #e1e8e6;
} 



.titulo-clientes {
    padding-top: 3px !important;
    margin-top: 0px !important; 
    font-weight: 800;
    font-weight: bold;
    margin-bottom: 10px;
 color:  #003366;
letter-spacing: 2px;
font-size: 3.9rem;

}

.subtitulo-clientes {
 padding-top: 5px !important;
    color: #333;
 font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 55px;
letter-spacing: 2px;
}


.slider-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap; /* Evita que los logos se bajen a otra línea */
    position: relative;
    background: white;
    padding: 15px 0px;
}

.slider-track {
    display: flex;
    width: calc(250px * 20); /* Ancho del logo * número total de slides */
    animation: scroll 30s linear infinite; /* Movimiento constante */
}

.slide {
    width: 250px; /* Aumentamos el ancho total del contenedor para dar aire */
    flex-shrink: 0; /* Obligatorio: evita que los logos se achiquen */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px; /* Espacio lateral obligatorio entre logos */
}

.slide img {
    max-width: 200px;
    height: 70px;
    object-fit: contain; /* Esto es CLAVE: evita que el logo se deforme */
    filter: grayscale(60%); /* Logos en gris para elegancia */
    opacity: 0.6;
    transition: all 0.3s ease;
}

.slide img:hover {
    filter: grayscale(0%); /* Color al pasar el mouse */
    opacity: 1;
    transform: scale(1.05); /* Ligero zoom */
}

/* Animación del movimiento */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 10)); } /* Se mueve la mitad del track */
}


@media (max-width: 767px) {
    /* Esto le da aire a los títulos y textos para que no choquen con los bordes */
    .titulo-clientes {
         text-align: center !important;
	font-size: 25px;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    margin-bottom: 10px;
line-height: 1.4;

    }

  
  .subtitulo-clientes {
         text-align: center !important;
	font-size: 15px;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    margin-bottom: 30px;
    }
    /* También para el contenedor de logos de empresas */
    .container, .row {
        padding-left: 15px !important;
        padding-right: 15px !important;

    }
}


/*----------------------------------------
 .PORQUE ELEGIRNOS
----------------------------------------*/

.porque-elegirnos-enterprise {
    padding: 20px 20px !important; 
  
    background: linear-gradient(135deg, #1D2EF5 0%, #001a33 100%) !important; 
    position: relative;
    overflow: hidden;

}
.container-about {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
}
.about-porque { flex: 2; }
.titulo-elegirnos {
    padding-top: 3px !important;
    margin-top: 0px !important; 
    color: #ffffff !important; 
    font-weight: 800 !important;
    margin-bottom: 35px !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9) !important; 
    text-align: center !important;
    font-size: 34px !important;
    text-transform: uppercase;
}

/* Sincronización de alturas para las columnas principales */
.porque-elegirnos-enterprise .row.align-items-center {
    display: flex !important;
    align-items: stretch !important; 
}

/* Grilla Base para los 4 Diferenciales */
.grid-diferenciales {
 display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ==========================================================================
   CARRIL HORIZONTAL: FUERZA AL ICONO A PONERSE AL COSTADO DEL TEXTO
   ========================================================================== */
.card-diferencial {
    background: #ffffff !important; 
    padding: 25px; !important;
    border-radius: 20px !important; 
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05) !important; 
    border: 1px solid #e1e8f0 !important;
transition: all 0.3s ease !important;
  

}

/* CONTENEDOR DEL ICONO: Lo dejamos fijo a la izquierda sin que se deforme */
.diferencial-icon-box {
      display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre icono y texto */
    margin-bottom: 12px;
}

/* FORZADO DE ICONO: Mismo tamaño exacto que el título (20px) */
.card-diferencial i,
.card-diferencial .diferencial-icon-box i,
.porque-elegirnos-enterprise i {
     font-size: 2.5rem; /* Tamaño ajustado para ir al lado del texto */
    color: #0046ad;
}

/* CONTENEDOR DEL TEXTO: Se estira automáticamente a la derecha del icono */
.card-diferencial .service-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
}

/* SUBTÍTULO: Color Azul Marino Profundo (Estilo Corporativo de tu Referencia) */
.card-diferencial .service-text h3 {
    color: #002d72;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
 text-align: center; 
}

/* TEXTO DESCRIPTIVO: Gris Oscuro Profesional alineado a la izquierda */
.card-diferencial .service-text p {
    color: black !important; 
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    text-align: justify !important; /* Forzado a la izquierda como pediste */
}

/* Hover de la Tarjeta */
.card-diferencial:hover {
    transform: translateY(-5px) !important;
    border-color: #1D2EF5 !important; 
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05) !important; 
}

/* ==========================================================================
   IMAGEN DE LA DERECHA: AJUSTE DE ALTURA AL NIVEL DE LOS CUADRADOS
   ========================================================================== */


.tecnico-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 79% !important; 
    display: flex !important;
    align-items: center !important;
}

.tecnico-img {
    border-radius: 20px !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05) !important;
    width: 100% !important;
    height: 100% !important; /* Nivelado exacto arriba y abajo con las tarjetas */
    object-fit: cover !important; 
    display: block !important;
}

/* ==========================================================================
   RESPONSIVIDAD MÓVIL
   ========================================================================== */
@media (max-width: 991px) {
.porque-elegirnos-enterprise {
margin-bottom: 70px;
}

    .porque-elegirnos-enterprise .row.align-items-center {
        display: block !important;
    }
.container-about {flex-direction: column; }
  

    .grid-diferenciales {
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important;
        padding: 5px 10px !important;
        gap: 22px !important; 
    }

    .grid-diferenciales > div { 
        width: 100% !important; 
        max-width: 450px !important; 
        margin: 0 auto !important;
grid-template-columns: 1fr;
    }

    .tecnico-wrapper {
        height: 380px !important; 
        max-width: 450px !important;
        margin: 35px auto 0 auto !important;
    }
}



/*----------------------------------------
 .COBERTURA NACIONAL
----------------------------------------*/
/* --- Estilos de la Sección Cobertura --- */
.seccion-cobertura {
    padding: 60px 5%;
      padding-top: 25px !important;
    background-color:  #E4EBEB; /* Contraste blanco para diferenciar de la anterior azul */
    font-family: 'Arial', sans-serif;
position: relative; /* Obligatorio para que las partículas no se escapen */
margin-top: -70px;

 
}

#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Fondo */
}

.contenedor-cobertura {
position: relative;
    z-index: 2; /* Por encima de las partículas */
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
flex-wrap: wrap;
}

.columna-info { flex: 1; }
.columna-mapa { flex: 1; text-align: center; }

.titulo-cobertura {
    
    font-weight: 800;
    font-weight: bold;
    margin-bottom: 15px;
 color:  #003366;
}

.subtitulo-cobertura {
    color: #555;
     font-size: 15px;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* --- Barras de KPI --- */
.lista-kpis { display: flex; flex-direction: column; gap: 25px; }

.info-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
    font-size: 18px;

}

.barra-fondo {
    background-color: #e0e0e0;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.barra-progreso {
    background-color: #004080; /* Azul fuerte para los indicadores */
    height: 100%;
    transition: width 1s ease-in-out;
}

.img-mapa {
     width: 100%;
    max-width: 400px;
    height: auto;
 filter: drop-shadow(0 10px 20px rgba(0, 74, 173, 0.3));
    animation: latido-jh 3s ease-in-out infinite;
}

/* --- RESPONSIVE (Celulares) --- */
@media (max-width: 991px) {
    .contenedor-cobertura {
        flex-direction: column; /* Apila mapa y texto */
        text-align: center;
    }

    .titulo-cobertura { font-size: 29px; }

    .info-meta { font-size: 13px; }
}

.barra-progreso {
    background-color: #004080;
    height: 100%;
    width: 0%; /* Empieza vacía */
    transition: width 2s cubic-bezier(0.1, 0.5, 0.5, 1); /* Animación fluida */
}


/*----------------------------------------
 .End CSS
----------------------------------------*/

/* ==========================================================
   CSS DEFINITIVO FOOTER JHARDSYSTEX (ESTILO SAPIA)
   ========================================================== */

/* 1. ESTRUCTURA Y FONDO */
.footer-area {
    background-color: #001e36; /* Azul profundo corporativo */
    padding: 60px 0 40px;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    border-top: 4px solid #00aed9; /* Acento celeste tecnológico */
}

/* 2. TEXTOS: BLANCO CON SOMBRA PARA LEGIBILIDAD */
.footer-area p, 
.footer-area h4, 
.footer-area h5, 
.footer-area a, 
.footer-area span {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    text-decoration: none !important;
}

/* 3. COLUMNA IZQUIERDA: LOGO GRANDE */
.footer-box-left {
    padding-right: 30px;
}

.footer-logo-main {
    width: 100% !important; /* Fuerza a ocupar su espacio */
  
    height: auto;
    margin-bottom: 20px;
    display: block;
}

.footer-text-resaltado {
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
    opacity: 0.9;
}

/* 4. COLUMNA CENTRAL: ATENCIÓN, REDES Y POLÍTICAS */
.footer-box-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-title-resaltado {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    width: 80%;
    text-align: center;
}

/* Iconos de contacto */
.footer-contact-list {
    width: 100%;
    max-width: 280px;
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.icon-wrap i {
    font-size: 28px;
    color: yellow !important; /* Celeste SAPIA */
    margin-right: 15px;
    text-shadow: none !important;
}

.contact-data h5 {
    font-size: 15px;
    margin: 0;
    font-weight: bold;
}

.contact-data h5 span {
    color: yellow !important;
    font-weight: normal;
}

/* Redes Sociales: Diseño de "Cajitas" de Sapia */
.social-section-wrap {
    text-align: center;
    margin-bottom: 25px;

}

.social-grid-sapia {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;


}

.social-icon-box {
    background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro redondeado */
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Bordes suaves */
    font-size: 18px;
    transition: 0.3s ease;
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

.social-icon-box:hover {
    background-color: black;
    transform: translateY(-3px);
}

/* Políticas: Ubicación debajo de redes */
.legal-section-sapia {
    width: 100%;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.legal-grid a {
    font-size: 15px;
    opacity: 0.7;
    transition: 0.3s;
}

.legal-grid a:hover {
    opacity: 1;
    color: yellow !important;
}

/* 5. COLUMNA DERECHA: FACEBOOK CON SCROLL */
.facebook-widget-container {
    background: #ffffff;
    border-radius: 8px;
    height: 440px; /* Altura para forzar scroll */
    overflow: hidden;
    border: 5px solid #ffffff;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

/* ==========================================
   OPTIMIZACIÓN PARA MÓVIL (RESPONSIVE)
   ========================================== */

@media (max-width: 768px) {
    /* 1. Contenedor principal: Apilado vertical */
    .footer-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 20px;
    }

    /* 2. Logo: Que no sature la pantalla */
    .footer-logo-main {
        max-width: 250px; /* Tamaño ideal para celulares */
        margin: 0 auto 20px;
    }

    /* 3. Columna Central: Quitar bordes laterales que estorban en móvil */
    .footer-box-center {
        border-left: none !important;
        border-right: none !important;
        width: 100%;
        margin: 40px 0;
        padding: 20px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 4. Contactos: Asegurar que los bloques de contacto se vean ordenados */
    .footer-contact-list {
        max-width: 100%;
        display: inline-block;
        text-align: left; /* Mantiene la alineación icono-texto */
    }

    .contact-item {
        justify-content: center; /* Pero centra el bloque entero en la pantalla */
        margin-bottom: 25px;
    }

    /* 5. Redes Sociales: Un poco más de espacio para los dedos */
    .social-icon-box {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    /* 6. Facebook: Ajustar altura para que no sea eterno el scroll */
    .facebook-widget-container {
        height: 400px;
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }

    /* 7. Políticas: En móvil es mejor que no estén tan pegadas */
    .legal-grid {
        gap: 15px;
    }
    
    .legal-grid a {
        font-size: 14px; /* Un poco más grande para facilitar el clic */
        display: block;
        padding: 5px 0;
    }
}


/* --- BARRA FINAL: COPYRIGHT (FONDO NEGRO, LETRAS BLANCAS) --- */
.footer-bottom-bar {
    background-color: #000000; /* Fondo Negro */
    padding: 25px 0;
    text-align: center;
    border-top: 1px solid #1740BD; /* Unión con el azul superior */
}

.footer-bottom-bar p, 
.footer-bottom-bar strong {
    color: #ffffff !important; /* Letras blancas para el 2026 */
    font-size: 14px;
    margin: 0;
}

/* --- AJUSTES RESPONSIVOS (CELULARES) --- */
@media (max-width: 768px) {
    .footer-logo-main {
        margin: 0 auto 25px auto; /* Logo al centro en móviles */
    }
    .footer-text-shadow {
        text-align: center; /* Texto centrado en móviles */
    }
    .footer-facebook-frame {
        max-width: 350px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   PORTAFOLIO INTEGRAL JHARDSYSTEX - VERSION FINAL 2026
   ========================================================================== */

/* --- 1. CONFIGURACIÓN DE SECCIÓN --- */
.portfolio-area {
    display: block !important;
    padding: 30px 0 !important; /* Más aire arriba y abajo para un look premium */
    background-color: #ffffff; /* Fondo blanco limpio para resaltar el marketing */
    height: auto !important;
    min-height: 0 !important;
}

/* --- 2. FILTROS (PROJECT MENU) --- */
.project-menu {

    display: inline-flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 6px 12px !important;
    margin: 0 auto 45px auto !important;
    background: white; /* Contenedor estilo pastilla */
    border-radius: 40px;
  
}

.project-menu li { 
    margin: 4px 6px !important; 


}

.project-menu li a {
    display: inline-block !important;
    padding: 10px 24px !important;
    background: transparent !important;
    border-radius: 30px  !important;
    color: #475569 !important; /* Gris elegante en lugar de azul oscuro puro */
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: 1px solid #475569  !important;
    box-shadow: none !important; /* Eliminamos la sombra pesada por defecto */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interacción premium con tu Azul Corporativo */
.project-menu li a.active, 
.project-menu li a:hover {
    background: #003366 !important; /* Tu azul de marca */
    color: #ffffff !important;
   box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05) !important;
}

/* --- 3. TARJETA DE PROYECTO (LOOK DE MAQUETA FLOTANTE) --- */
.single-awesome-project {
    position: relative !important;
    overflow: hidden !important;
    background: #f8fafc !important; 
    height: 230px !important;
    width: 100% !important;
    margin-bottom: 30px !important;
    border-radius: 20px !important; 
     box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05) !important; 
    border: 4px solid #f0f0f0 !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Efecto de elevación al pasar el mouse */
.single-awesome-project:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05)  !important;
    border-color: rgba(0, 210, 255, 0.3) !important; /* Destello sutil azul Sky */
}

/* Ajuste de imagen simétrica con zoom suave */
.awesome-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3; /* Forzamos proporciones idénticas en todas las fotos */
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important; 
    display: block;
}



.single-awesome-project:hover .awesome-img img {
    transform: scale(1.06); /* Zoom fluido al pasar el mouse */
}

/* --- 4. EFECTO HOVER ELEGANTE (CAPA AZUL CON DEGRADADO) --- */
/* Reutilizamos tus clases de cortinas convirtiéndolas en una sola capa translúcida sofisticada */
.overlay-negro-top, 
.overlay-negro-bottom {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; /* Ocupan todo el espacio */
    background: linear-gradient(to bottom, rgba(0, 51, 102, 0.9), rgba(1, 0, 20, 0.95)) !important; /* Tu azul corporativo degradado */
    z-index: 2 !important;
    opacity: 0; /* Ocultas por defecto */
    transition: opacity 0.4s ease !important;
}

.overlay-negro-top { top: 0 !important; }
.overlay-negro-bottom { bottom: 0 !important; }

.single-awesome-project:hover .overlay-negro-top,
.single-awesome-project:hover .overlay-negro-bottom { 
    opacity: 1 !important; /* Aparecen suavemente sin saltos toscos */
}

/* Contenedor de textos interactivos */
.add-actions {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 0 12% !important;
    box-sizing: border-box !important;
    transform: translateY(10px); /* Ligero desplazamiento hacia arriba al activarse */
}

.single-awesome-project:hover .add-actions { 
    opacity: 1 !important; 
    transform: translateY(0);
}

/* Estilos de Textos Corporativos */
.project-dec h4 { 
    color: #ffffff !important; 
    font-weight: 700 !important; 
    font-size: 18px !important;
    text-shadow: none !important; /* Eliminamos sombras negras toscas */
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Cambiamos el amarillo original por tu Azul Sky Premium */
.project-dec span { 
    color: #00d2ff !important; /* Tu color Sky distintivo */
    font-weight: 600 !important; 
    font-size: 12.5px !important;
    text-transform: none !important; /* Permite lectura natural de mayúsculas y minúsculas */
    display: block;
    line-height: 1.5;
    text-shadow: none !important;
}

/* --- 5. EFECTO BRILLO TECNOLÓGICO SUTIL --- */
.brillo-tecnologico {
    position: absolute !important;
    top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(0, 210, 255, 0.2) 50%, rgba(255,255,255,0) 100%) !important; /* Brillo con tinte azul Sky */
    transform: skewX(-25deg) !important;
    z-index: 3 !important;
}

.single-awesome-project:hover .brillo-tecnologico {
    left: 150%;
    transition: all 0.7s ease;
}

/* ==========================================================================
   REGLAS PARA MÓVIL (MANTIENE TU LOGICA PERO CON Look FINO)
   ========================================================================== */
/* --- CSS COMPLETO PARA MÓVIL --- */
@media (max-width: 767px) {
    /* 1. Limpiamos contenedores de Bootstrap */
    .portfolio-area .container, 
    .portfolio-area .row {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* 2. MENÚ 2x2: Forzamos las filas a dos columnas */
    .project-menu {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Aquí tienes el 2x2 */
        gap: 10px !important;
        padding: 10px !important;
        margin-bottom: 30px !important;
    }

    .project-menu li {
        width: 100% !important;
        margin: 0 !important;
    }

    .project-menu li a {
        width: 100% !important;
        padding: 10px 5px !important;
        font-size: 12px !important;
    }

    /* 3. IMÁGENES: Centradas y tamaño completo */
    .awesome-project-content > div {
        width: 100% !important;
        padding: 0 10px !important; /* Pequeño margen para que no toque los bordes laterales */
        margin-bottom: 20px !important;
    }

    .single-awesome-project {
        width: 100% !important;
        margin: 0 auto !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        height: auto !important;
    }

    .awesome-img {
        width: 100% !important;
        height: auto !important; /* Altura fija para que todas se vean uniformes */
        display: block !important;
    }

    .awesome-img img {
        width: 100% !important;
        height: auto !important;
          object-fit: contain !important;
        object-position: center !important;
 display: block !important;

    }

}
/* ==========================================================
   CSS FINAL WHATSAPP FLOTANTE - JHARDSYSTEX
   ========================================================== */

/* 1. POSICIÓN Y ESTILO DEL BOTÓN PRINCIPAL */
.whatsapp-btn-final {
    position: fixed !important;
    bottom: 30px !important;
    left: 30px !important;
    width: 65px !important;
    height: 65px !important;
    background-color: #25d366 !important; /* El verde original de WhatsApp */
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 35px !important;
    z-index: 10000 !important; /* Prioridad absoluta sobre el slider */
     box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* EFECTO HOVER (PASAR EL MOUSE) */
.whatsapp-btn-final:hover {
    background-color: #128c7e !important; /* Verde más oscuro */
    transform: scale(1.1) rotate(5deg);
     box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
 
}

/* 2. EL EFECTO DE PULSACIÓN (LA CAPA TRASERA) */
.pulsating-circles {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -1 !important; /* Detrás del icono verde */
}

.circle {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background-color: rgba(37, 211, 102, 0.6) !important; /* Verde traslúcido */
    opacity: 0;
    animation: rippleEffect 2s infinite ease-out; /* La animación */
}

/* Capas de la animación para mayor profundidad */
.circle-1 { animation-delay: 0s !important; }
.circle-2 { animation-delay: 0.8s !important; }

/* 3. LA DEFINICIÓN DE LA ANIMACIÓN (LO QUE HACE QUE SE MUEVA) */
@keyframes rippleEffect {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        transform: scale(1.8); /* Se expande hacia afuera */
        opacity: 0;
    }
}

/* FIX PARA MÓVIL: MANTENERLO VISIBLE Y PEQUEÑO */
@media (max-width: 767px) {
    .whatsapp-btn-final {
        width: 55px !important;
        height: 55px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 28px !important;
    }
}



/* ==========================================================
   POLITICAS - JHARDSYSTEX
   ========================================================== */

/* 1. CONTENEDOR PRINCIPAL - DESPEGADO DEL MENÚ */
.contenedor-legal-premium {
    max-width: 1100px;
    margin: 130px auto 50px auto; 
    padding: 30px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;


}

/* 2. CABECERA */



.titulo-principal {
    color: #001a33 !important; 
    font-size: 2.8rem;
    font-weight: 800;
    text-transform: uppercase;
text-align: center;
}

/* 3. GRID DE TARJETAS - MÁS SEPARACIÓN ENTRE ELLAS */
.cuadricula-legal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px; /* Aumentamos el aire ENTRE tarjetas como pediste */
 background: #EDF2FC;
}

.item-legal {
    padding: 20px 25px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #eef2f6; 
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* HOVER: ELEVACIÓN Y LÍNEA CIAN */
.item-legal:hover {
    transform: translateY(-5px);
    border-color: #00ccff;
}

/* SUBTÍTULOS - ELIMINAMOS EL ESPACIO SOBRANTE */
.item-legal h2 {
    color: #001a33 !important; 
    font-size: 1.95rem;
    font-weight: 700;
    margin: 0 !important; /* Quitamos todo el margen */
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f4f8; /* Línea base */
    transition: 0.3s;
}

/* LA LÍNEA SE PONE CIAN EN HOVER */
.item-legal:hover h2 {
    border-bottom-color: #00ccff !important;
}

/* CONCEPTOS - PEGADOS A LA LÍNEA */
.item-legal p {
    color: #444444 !important;
    line-height: 1.5;
    font-size: 1.3rem;
    margin-top: 10px !important; /* Espacio mínimo controlado respecto a la línea */
    margin-bottom: 0;
    text-align: justify;
}

/* 4. SECCIÓN DEL BOTÓN */
.accion-legal {
    margin-top: 40px;
    text-align: center;
}

.btn-corporativo {
    display: inline-block;
    background-color: #001a33; 
    color: #ffffff !important;
    padding: 14px 40px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid #001a33;
    transition: 0.3s;
}

.btn-corporativo:hover {
    background-color: transparent;
    color: #001a33 !important;
}

/* BUSCA TU SECCIÓN @media Y REEMPLÁZALA CON ESTA */
@media (max-width: 850px) {
    .contenedor-legal-premium {
        margin-top: 100px;
        padding: 15px;
        }



 .titulo-principal {
      font-size: 1.75rem !important;
        line-height: 1.5 !important; /* Espacio entre líneas bien cerrado */
        max-width: 100% !important; /* Más ancho para que entren las palabras en 2 líneas */
        margin: 0 auto 22px auto !important; /* Menos espacio con la tarjeta */
        display: block !important;
        text-align: center !important;
        display: block !important;
        letter-spacing: -0.5px;      /* Compacta las letras un poquito */
        word-spacing: -1px;          /* Compacta las palabras */
    
    }

    .cuadricula-legal {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .item-legal h2 {
        font-size: 1.5rem;
    }

 .item-legal p {
        font-size: 1.2rem;
    }
}



/* ==========================================================
   CONTACTENOS - JHARDSYSTEX
   ========================================================== */
/* --- ESTILOS GENERALES JHARDSYSTEX --- */
:root {
    --jh-azul: #002e5b;
    --jh-celeste: #00a8e8;
    --jh-negro: #000000;
}
 

/* PORTADA CON IMAGEN DE FONDO - RESPONSIVE TOTAL */
.jh-hero {
    position: relative; 
    width: 100%;
    /* Altura adaptable: 60% del alto de la pantalla en PC, se ajustará en móvil */
    height: 100%; 
    min-height: 300px;
    background-color: #000; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center;
    overflow: hidden;
}

/* Usaremos la imagen como elemento para que el control sea total */
.jh-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ESTA ES LA CLAVE: 'fill' para que no se coma nada y 'object-fit' para que mande */
    object-fit: fill; 
    z-index: 1;
}

/* CAPA OSCURA (OVERLAY) */
.jh-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 0, 1, 0.7); 
    z-index: 2;
}

.jh-hero-content {
    position: relative;
    z-index: 3; 
    width: 100%;
    padding: 0 20px;
}


    .jh-hero-content h1 {
        font-size: 5.5rem; /* Achicamos un poco la letra para que no se vea tosca */
        padding-top: 110px;
margin-bottom: 5px !important;
        line-height: 1.1;
text-shadow: 2px 1px 8px black;
    }

    .jh-hero-content p {
        font-size: 2.7rem;
text-shadow: 1px 1px 8px black;

    }

#particles-js { position: absolute; width: 100%; height: 100%; z-index: 2; }
.jh-hero-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1; }
.jh-hero-content { position: relative; z-index: 3; text-align: center; }
.jh-text-white { color: #fff !important; font-size: 3.4rem; font-weight: 800;  font-family: 'Raleway', sans-serif;  text-shadow: 5px 3px 11px black; }
.jh-text-sky { color: #facc15 !important; }
.jh-p-small { color: #fff; font-size: 1rem;  text-shadow: 2px 1px 8px black; }

/* TITULOS AZUL CORPORATIVO */
.jh-title-azul { color: var(--jh-azul) !important; font-size: 2.8rem; font-weight: 800; margin-bottom: 20px; }

/* TEXTOS NEGRO VISIBLE */
.jh-tag-negro, .jh-desc-negro, .jh-address-negro { color: var(--jh-negro) !important; font-weight: 700;  }

/* FORMULARIO: BORDES CELESTES Y UNA SOLA LINEA */
.jh-contact-body { padding: 60px 0;   background: #EDF2FC; padding-top: 30px;
}
.jh-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.jh-flex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.jh-input {
    width: 100%; padding: 15px; margin-bottom: 15px;
    border: 2.5px solid black !important;
    border-radius: 8px; outline: none;

}

.jh-sede-box {
    background: #fff; /* Fondo blanco para que el contenido sea legible */
    border: 1px solid #ffffff; /* Borde blanco puro */
    border-radius: 12px; /* Esquinas redondeadas para un look más moderno */
    padding: 10px;
    margin-top: 5px;
    
    /* SOMBRA: Suave y elegante para dar profundidad */
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

    
    transition: transform 0.3s ease; /* Para que reaccione sutilmente */
}

/* Efecto opcional: Que se mueva un poquito al pasar el mouse */
.jh-sede-box:hover {
    transform: translateY(-5px);
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

.jh-form-col {
    background: #fff; /* Fondo blanco para que el contenido sea legible */
    border: 1px solid #ffffff; /* Borde blanco puro */
    border-radius: 12px; /* Esquinas redondeadas para un look más moderno */
    padding: 20px 40px 20px;
    margin-top: 5px;
    
    /* SOMBRA: Suave y elegante para dar profundidad */
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

    
   }

.jh-input::placeholder { color: var(--jh-azul) !important; font-weight: 600;  }

.jh-input-group { display: flex; gap: 15px; }
.jh-input-group .jh-input { flex: 1; }

.jh-input:focus { border-color: var(--jh-celeste) !important; }
.jh-input::placeholder { color: var(--jh-azul) !important; font-weight: 600; }

.jh-btn-submit {
    width: 100%; 
    background: var(--jh-azul); 
    color: #fff; 
    padding: 18px;
    border: 2px solid transparent; /* Reservamos el espacio para que no salte al aparecer el borde */
    border-radius: 8px; 
    font-weight: 800; 
    cursor: pointer;
    transition: all 0.3s ease; /* Esto hace que el efecto sea suave y no brusco */
}

.jh-btn-submit:hover {
    background: #295a8a; /* Un azul un poco más claro que el original */
    border-color: var(--jh-celeste); /* El borde celeste que ya manejas */
     box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05); /* Sombra con el tono celeste */
    transform: translateY(-3px); /* Efecto de que el botón se levanta */
}

.jh-btn-submit:active {
    transform: translateY(-1px); /* Efecto de que se presiona al hacer click */
}

/* MENSAJE FLOTANTE (TOAST) OCULTO */
#jh-toast {
    position: fixed; top: 50%; right: -500px;
 transform: translateY(-50%); /* Centrado vertical exacto */
    background: #fff; padding: 20px 25px; border-radius: 12px;
   box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    border-left: 8px solid var(--jh-azul);
    z-index: 10000; display: flex; align-items: center;
    transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#jh-toast.active { right: 30px; }
#jh-toast i { color: var(--jh-azul); font-size: 25px; margin-right: 15px; }
#jh-toast b { display: block; color: var(--jh-azul); }

/* BOTONES WSP Y LLAMAR */
.jh-actions-row { display: flex; gap: 10px; margin-bottom: 25px; }
.jh-btn-wsp { background:#128c7e; color:#fff; padding:12px; border-radius:8px; text-decoration:none; flex:1; text-align:center; font-weight:700; }
.jh-btn-call { background:var(--jh-azul); color:#fff; padding:12px; border-radius:8px; text-decoration:none; flex:1; text-align:center; font-weight:700; }

@media (max-width: 768px) {
    .jh-flex-grid { grid-template-columns: 1fr; }
    .jh-input-group { flex-direction: column; gap: 0; }

/* --- AJUSTE PARA MÓVIL --- */

    .jh-hero {

height: 40vh; /* Más baja en celular para que no ocupe toda la pantalla */
        min-height: 350px;
    }

    .jh-hero-content h1 {
        font-size: 2.5rem; /* Achicamos un poco la letra para que no se vea tosca */
        padding-top: 120px;
margin-bottom: 5px !important;
        line-height: 1.1;
    }

    .jh-hero-content p {
        font-size: 1.1rem;

    }

}


/* ==========================================================
   CAMARAS DE SEGURIDAD - JHARDSYSTEX
   ========================================================== */
/* --- Servicios --- */
.cctv-intro-servicios { 
    padding: 20px 0; 
    background-color: #EDEDED; 
}

/* Header */
.cctv-intro-servicios-header {
    text-align: center;
    margin-bottom: 30px;
}

.cctv-intro {
    font-size: 1.7rem;
    line-height: 1.5;
    color: black;
    margin-bottom: 15px;
    padding-left: 60px;
    padding-right: 60px;
    text-align: justify;
}

/* Contenedor principal */
.cctv-intro-servicios-container { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 40px; 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* GIF y Badge */
.cctv-intro-servicios-col-gif { text-align: center; }
.cctv-intro-servicios-col-gif img { width: 100%; max-width: 400px; }

.badge-trayectoria { 
    background: #004aad; 
    color: white; 
    padding: 10px; 
    border-radius: 0 0 10px 10px; 
    margin-top: -5px; 
    font-weight: bold; 
    display: inline-block; 
    width: 80%;
}

/* El recuadro blanco con aire */
.cctv-intro-servicios-col-texto { 
    background: #fff; 
    padding: 40px; 
    border-radius: 10px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}

/* Lista de servicios */
.lista-servicios {
    list-style: none;
    padding: 0;
}

.lista-servicios li { 
    display: flex; 
    gap: 20px; 
    margin-bottom: 30px; 
}

/* MODO MÓVIL Y TABLET */
@media (max-width: 768px) {
    .cctv-intro-servicios-container { 
        flex-direction: column; 
        padding: 0 15px; 
    }
    
    .cctv-intro {
        font-size: 1.5rem; /* Ajuste ligero para que no sea tan grande en móvil */
        padding-left: 15px; 
        padding-right: 15px; 
    }

    .cctv-intro-servicios-col-texto { 
        padding: 20px; 
    }
}



/* --- servicios --- */
.cctv-servicios { 
       padding: 20px 0; /* Esto da aire izquierda/derecha en móvil y desktop */

 background-color: #EDEDED; 
}

/* Contenedor principal con aire lateral */
.container-cctv-final { 
    display: flex; align-items: center; justify-content: center; 
    gap: 40px; max-width: 1100px; margin: 0 auto; 
    padding: 0 20px; /* Esto da aire izquierda/derecha en móvil y desktop */
}

/* GIF y Badge */
.col-gif { text-align: center; }
.col-gif img { width: 100%; max-width: 400px; }
.badge-trayectoria { 
    background: #004aad; color: white; padding: 10px; 
    border-radius: 0 0 10px 10px; margin-top: -5px; 
    font-weight: bold; display: inline-block; width: 80%;
}
.cctv-intro {
    font-size: 1.7rem;
    line-height: 1.5;
    color: black;
    margin-bottom: 15px;
    padding-left: 60px;
padding-right: 60px;
text-align: justify;
}
/* El recuadro blanco con aire */
.col-texto-servicios { 
    background: #fff; padding: 40px; border-radius: 10px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}

/* Espaciado de los 4 pilares */
.lista-servicios li { 
    display: flex; gap: 20px; margin-bottom: 30px; 
    padding-right: 15px; /* Aire a los costados */
}

/* MODO MÓVIL: Evita que se pegue a los márgenes */
@media (max-width: 768px) {
    .container-cctv-final { flex-direction: column; padding: 0 15px; }
    .col-texto-servicios { padding: 20px; }
.cctv-intro {font-size: 1.7rem; line-height: 1.5; color: black; margin-bottom: 5px; padding-left: 30px; padding-right: 30px; text-align: justify;}
}


/* --- Estilos Sección 2 --- */
.jh-features-section {
    padding-top: 40px;
padding: 20px 20px 60px;
    background: linear-gradient(135deg, #004aad 0%, #050a14 100%);

}

.jh-container {
    max-width: 1200px;
    margin: 0 auto;
}

.jh-section-header {
    text-align: center;
    margin-bottom: 20px;
}

.jh-title-secondary {
 color: white !important; 
    font-size: 2.8rem;
    font-weight: 900;
    text-transform: uppercase;
text-align: center;
margin-top: 0;
margin-bottom: 5px; /* Reducido espacio con las tarjetas */
 text-shadow: 2px 1px 8px black;
 letter-spacing: 1px;

}

.jh-text-blue { color: white; }

.jh-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 50px;
}

.jh-feature-card {
    background: #ffffff;
    padding: 20px 20px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid transparent;

    margin-top: 5px;
    /* SOMBRA: Suave y elegante para dar profundidad */
   border: 8px solid #e1e8f0;
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    transition: tansform 0.3s ease; /* Para que reaccione sutilmente */
}

.jh-feature-card:hover {
    transform: translateY(-10px);
    border-bottom: 2px solid #003366;
   box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

.jh-icon-box {
    font-size: 45px;
    color: #00BFFF;
    margin-bottom: 20px;
}

.jh-feature-card h3 {
    font-size: 2.0rem;
    color: #051622;
    margin-bottom: 15px;
 font-weight: 700;
}

.jh-feature-card p {
    color: black;
    line-height: 1.6;
    font-size: 1.5rem;
 text-align: justify;
}

/* Responsivo para Móvil */
@media (max-width: 768px) {
    .jh-features-section {  }
    .jh-title-secondary { 
        font-size: 2.2rem; 
margin-bottom: 15px;
line-height: 1.5;

    }
    .jh-features-grid { 
        gap: 15px; /* Casi nada de espacio entre tarjetas en celular */
    }
    .jh-feature-card { padding: 20px; }
}

/* --- Sección 3: Videovigilancia con Azul Corporativo --- */
.jh-sectors-premium {
    padding: 50px 0;
    background: #ffffff;
}


.jh-blue-text { color: black; }

.jh-sector-card {
    background: #ffffff;
    padding: 36px 20px;
    text-align: center;
 border: 2px solid  #EDEBEB; /* Borde blanco puro */ 
    border-radius: 19px ;
    /* Sombra sutil pero elegante */
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    /* Línea superior con el azul de tu marca */
    border-top: 7px solid #003366; 
    height: 100%;
}

.jh-sector-card:hover {
    /* Al pasar el mouse invertimos al azul oscuro */
    background: #003366; 
    transform: translateY(-8px);
}

.jh-sector-card i {
    font-size: 45px;
    /* Icono en el mismo azul para que no sea "aniñado" */
    color: #003366; 
    margin-bottom: 20px;
}

.jh-sector-card h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #003366;
    margin-bottom: 15px;
}

/* Cambio a blanco en Hover para legibilidad */
.jh-sector-card:hover h3, 
.jh-sector-card:hover p, 
.jh-sector-card:hover i {
    color: #ffffff !important;
}

.jh-sector-card p {
    font-size: 1.5rem;
    color: black;
    line-height: 1.5;
}

@media (max-width: 768px) {
    /* 1. Dale espacio a la sección completa */
    .jh-sectors-premium {
        padding: 50px 20px; /* Más espacio arriba y a los lados */
    }

    /* 2. Separa las tarjetas entre sí */
    .jh-sectors-grid {
        gap: 30px; /* Aumenta el espacio vertical entre tarjetas */
    }

    /* 3. Dale más aire interno a cada tarjeta */
    .jh-sector-card {
        padding: 15px 15px; /* Más relleno para que el texto no respire mejor */
        margin-bottom: 10px; 
    }

    /* 4. Ajuste para que el botón de WhatsApp no estorbe */
    /* Si las tarjetas están muy pegadas al borde inferior, 
       añadimos un margen extra a la última tarjeta */
    .jh-sector-card:last-child {
        margin-bottom: 20px; /* Espacio de seguridad para el icono de WhatsApp */
    }

    .jh-sector-card h3 {
        font-size: 1.8rem; /* Mantenemos el título grande y legible */
        margin-bottom: 20px;
    }
  .jh-sector-card p {
        font-size: 1.4rem; /* Mantenemos el título grande y legible */
        margin-bottom: 20px;
    }
}

/* --- SESIÓN 4: PORTAFOLIO TÉCNICO JHARDSYSTEX --- */
.jh-portfolio-section {
    padding: 30px 30px;
       background-color: #EDEDED; /* Un fondo muy claro para resaltar las tarjetas blancas */
}

/* Títulos con peso visual y SEO */
.jh-main-title {
    font-family: 'Raleway', sans-serif;  
    font-size: 3.1rem;
    font-weight: 900;
    color: #003366; /* El azul marino de tu sección de 9 años */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
padding: 10px 10px;
}


/* Contenedor de la foto */
.jh-portfolio-wrapper {
    position: relative;
    overflow: hidden;
    background: #183E99;
    border-radius: 4px; /* Bordes rectos = más técnico */
    margin-bottom: 30px;
      border: 4px solid #ffffff;
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);


}

/* La imagen real de tus técnicos en Cibertec, UPN, etc. */
.jh-portfolio-wrapper img {
    width: 100%;
    height: 300px; /* Altura fija para que toda la grilla esté alineada */
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
}

/* Efecto al pasar el mouse */
.jh-portfolio-wrapper:hover img {
    transform: scale(1.1) rotate(1deg);
    opacity: 0.4;
    filter: grayscale(100%); /* Efecto sofisticado para resaltar el texto */
}

/* Capa de información (Overlay) */
.jh-portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    opacity: 0;
    transition: all 0.4s ease;
    border: 10px solid rgba(255, 255, 255, 0.1); /* Marco interno elegante */
}

.jh-portfolio-wrapper:hover .jh-portfolio-overlay {
    opacity: 1;
}

/* Texto dentro de la foto */
.jh-overlay-text h4 {
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    transform: translateY(20px);
    transition: all 0.4s ease;
text-shadow: 2px 1px 8px black;
}

.jh-overlay-text p {
    color: #ffffff; /* Celeste de acento para resaltar el servicio */
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.4;
    transform: translateY(20px);
    transition: all 0.4s ease;
    transition-delay: 0.1s;
text-shadow: 2px 1px 8px black;
}

.jh-portfolio-wrapper:hover h4,
.jh-portfolio-wrapper:hover p {
    transform: translateY(0);
}

/* AJUSTE MÓVIL: "MAS AIRE" */
@media (max-width: 768px) {
    .jh-portfolio-section {
        padding: 30px 15px;
    }
    
    .jh-main-title {
        font-size: 2.0rem;
line-height: 1.5;
    }

    .jh-portfolio-item {
        margin-bottom: 30px; /* Espacio extra entre fotos en celular */
    }

    /* En móvil, que el texto sea visible sin hover o con toque */
    .jh-portfolio-overlay {
        background: rgba(0, 51, 102, 0.6);
        opacity: 1;
        border: none;
        justify-content: flex-end;
        padding: 15px;

    }

    .jh-overlay-text h4, .jh-overlay-text p {
        transform: translateY(0);
        text-align: left;
    }

    
    .jh-portfolio-wrapper img {
        height: 250px;
        opacity: 1;
    
 
    }
}

/* --- SECCIÓN CLIENTES PREMIUM (CONSOLIDADO) --- */
.clientes-premium {
    padding: 40px 40px; /* Espaciado equilibrado en escritorio */
    background-color: #fcfcfc;
    text-align: center;
}

.header-clientes {
    margin-bottom: 20px;
}


/* Grid forzado a 6 columnas para escritorio */
.grid-clientes {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 15px;
    align-items: center;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px 15px;
}

/* Tarjeta de Cliente Individual */
.cliente-card {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100px;
   border: 8px solid #e1e8f0;
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);


}

.cliente-card img {
    max-width: 100%;
    height: auto;
    filter: grayscale(60%); /* Efecto profesional en PC */
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Efecto Hover para Escritorio */
.cliente-card:hover {
    transform: translateY(-5px);
   box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

.cliente-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- RESPONSIVE (TABLETS Y CELULARES) --- */

/* Tablets: 3 columnas */
@media (max-width: 1024px) {
    .grid-clientes {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Celulares: 2 columnas y corrección de espacios */
@media (max-width: 768px) {
    .clientes-premium {
        padding: 30px 0; /* Elimina espacio excesivo arriba/abajo */
    }

    .header-clientes {
        margin-bottom: 20px;
    }

    .grid-clientes {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .cliente-card {
        padding: 10px;
        min-height: 80px;
    }

    /* En móvil siempre a color para resaltar marcas */
    .cliente-card img {
        filter: grayscale(0%) !important;
        opacity: 1 !important;
        max-width: 90%;
    }
}



/* --- ESTILOS DE SERVICIOS CON LINEICONS --- */
.servicios-detalle {
    padding: 30px 0;
    background-color: #ffffff;
background-color: #EDEDED; /* Un fondo muy claro para resaltar las tarjetas blancas */
 margin-bottom: 5px;
text-align: justify;
}

.row-servicios {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
padding-top: 10px;
   padding: 10px 10px 10px;
 margin-bottom: 5px;

}

.col-gif {
    flex: 3;
    min-width: 300px;
    text-align: center;
}

.col-gif img {
    max-width: 100%;
    height: 100%;

}

.col-texto-servicios {
background-color: white; /* Un fondo muy claro para resaltar las tarjetas blancas */
    flex: 7.3;
padding: 30px 20px 10px;
    min-width: 350px;
 border: 1px solid #ffffff;
    border-radius: 10px;
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

text-align: justify;


}

.intro-servicios {
    font-size: 1.7rem;
    line-height: 1.5;
    color: black;
    margin-bottom: 5px;
    padding-left: 20px;
}

.lista-servicios {
    list-style: none;
    padding: 0;
}

.lista-servicios li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

/* Ajuste específico para iconos de LineIcons */
.lista-servicios i {
    color: #004aad;
    font-size: 4.1rem; /* LineIcons suelen requerir un poco más de tamaño */
    min-width: 40px;
    text-align: center;
    line-height: 1;
    margin-top: 2px;
}

.lista-servicios strong {
    display: block;
    color: #1a2a40;
    font-size: 1.6rem;
    margin-bottom: 5px;
}

.lista-servicios div {
    font-size: 0.95rem;
    color: black;
font-size: 1.4rem;
    line-height: 1.5;
}



@media (max-width: 768px) {
    .servicios-detalle {
        /* Mantenemos tus medidas pero quitamos el desbordamiento lateral */
        padding: 20px 15px 50px; 
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .col-gif img {
        /* Usamos auto en height para que no se estire y ocupe su lugar real */
        width: 80%;
        height: auto; 
        margin: 0 auto;
    }

    .intro-servicios {
        /* Bajamos un poco el tamaño para que los iconos tengan espacio a la izquierda */
        font-size: 1.3rem; 
        line-height: 1.5;
        color: #333;
padding-left: 12px;
padding-right: 20px;
text-align: justify;
  
    }

.col-texto-servicios {

padding-left: 12px;
padding-right: 20px;
}

}

/* --- SECCIÓN MARCAS ALIADAS (OPTIMIZADO) --- */
.marcas-respaldo {
    padding: 50px 0;
    background-color: white;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.tagline-marcas {
    font-size: 4.85rem;
    font-weight: 800;
    color: #004aad; /* Tu azul corporativo */
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 35px;
    text-align: center;
}

.flex-marcas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px; /* Espacio amplio entre logos en PC */
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 20px;
}

.marca-item {
    transition: transform 0.3s ease;
}

.flex-marcas img {
    max-width: 140px; /* Tamaño ideal para que se lean bien los logos */
    height: auto;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.4s ease;
}

/* Efecto hover profesional: el logo recupera su color */
.marca-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* --- AJUSTE PARA MÓVIL (SJL / LIMA) --- */
@media (max-width: 768px) {
    .marcas-respaldo {
        padding: 35px 35px;
    }

    .flex-marcas {
        /* Usamos grid de 2x2 para que las 4 marcas se vean ordenadas */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        justify-items: center;
    }

    .flex-marcas img {
        max-width: 110px;
        filter: grayscale(0%); /* En móvil se muestran a color directamente */
        opacity: 0.9;
    }

    .tagline-marcas {
        font-size: 0.75rem;
        margin-bottom: 25px;
        letter-spacing: 2px;
    }
}



.seccion-cobertura-cctv {

    position: relative;
    padding: 30px 0;
    background-color: #F5F5FF; /* Fondo claro para contraste profesional */
    overflow: hidden;
}



.contenedor-cobertura-cctv {
    position: relative;
    z-index: 5;
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    gap: 40px;
    padding: 0 20px;
}

.columna-info { flex: 1.2; }
.columna-mapa-cctv { flex: 0.8; display: flex; justify-content: center; align-items: center; }

/* --- DISTRIBUCIÓN GRID --- */
.contenido-territorio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Lima a lo largo */
.contenido-territorio .bloque-sede:first-child {
    grid-column: 1 / span 2;
    background: rgba(0, 74, 173, 0.09);
}

.bloque-sede {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    border-left: 6px solid #004aad;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

.bloque-sede h3 {
    color: #004aad;
    font-size: 2.2rem;
    margin-bottom: 5px;
    text-transform: uppercase;
margin-top: 2px;
padding: 2px 2px;
}

.bloque-sede p {
    color: black !important;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 8px;
}

.bloque-sede strong { color: #004aad; font-weight: 700; }

/* --- ANIMACIÓN DE LATIDO --- */
.img-mapa-cctv {
    width: 100%;
    max-width: 600px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 74, 173, 0.3));
    animation: latido-jh 3s ease-in-out infinite;
}

@keyframes latido-jh {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 10px 20px rgba(0, 74, 173, 0.3)); }
    50% { transform: scale(1.04); filter: drop-shadow(0 15px 30px rgba(0, 74, 173, 0.5)); }
}

@media (max-width: 992px) {
    .contenedor-cobertura-cctv { flex-direction: column; }
    .contenido-territorio { grid-template-columns: 1fr; }
    .contenido-territorio 

.bloque-sede:first-child { grid-column: auto; }
    .columna-mapa-cctv { order: -1; margin-bottom: 30px; }
}


/* ==========================================================================
   SECCIÓN HELP DESK - JHARDSYSTEX CORPORATE
   ========================================================================== */

:root {
    --primary-blue: #004aad;    /* Tu azul corporativo */
    --accent-sky: #00aaff;      /* Azul claro para hover */
    --dark-text: #1a1c1e;       /* Gris casi negro para títulos */
    --body-text: #4e5d6c;       /* Gris para descripciones */
    --bg-light: #f8fafd;        /* Fondo suave para la tarjeta de marcas */
    --white: #ffffff;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.help-desk-main {
   background-color: #f4f7f9;
    overflow: hidden;

}

.help-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

/* --- Columna de Información (Izquierda) --- */
.help-col-info {
    flex: 1;
    min-width: 320px;
}

.help-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(0, 74, 173, 0.1);
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 700;
    border-radius: 50px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}



.text-blue { color: var(--primary-blue); }

.help-lead {
    margin-bottom: 10;
   font-size: 1.7rem;
    line-height: 1.5;
    color: black;
    margin-bottom: 35px;
    padding-left: 20px;
}

/* --- Grilla de 6 Servicios --- */
.help-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
margin-bottom: 40px;
}

.service-card {
    display: flex;
    gap: 20px;
    padding: 20px;
    border-radius: 12px;
    background: var(--white);
   border: 1px solid;
 border-color: #e1e8f0;
    transition: var(--transition);
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);


}

.service-card:hover {
    border-color: #e1e8f0;
     box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    transform: translateY(-5px);
}

.service-icon {
    font-size: 30px;
    color: var(--primary-blue);
    transition: var(--transition);
    min-width: 45px;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
    color: var(--accent-sky);
}

.service-text h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 8px;
}

.service-text p {
    font-size: 14px;
    color: black;
    line-height: 1.5;
    margin: 0;
text-align: justify;
}

/* --- Columna de Marcas (Derecha) --- */
.help-col-brands {
    flex: 0 0 400px;
    position: sticky;
    top: 100px;
}

.brands-card-container {
    
    padding: 30px 30px 30px;
   
    text-align: center;
margin-bottom: 30px;
 }

.brands-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-blue);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
padding-top: 10px;
}

.brands-subtitle {
    font-size: 13px;
    color: var(--body-text);
    margin-bottom: 30px;
}

.brands-logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 45px;
    align-items: center;
}

.brand-logo {
    width: 100%;
    filter: grayscale(60%);
    opacity: 0.9;
    transition: var(--transition);
    padding: 5px;
}

.brand-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.brands-footer {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 3px solid #dce4ee;
}

.brands-footer span {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-text);
}

/* --- Media Queries --- */
@media (max-width: 1200px) {
    .help-col-brands { flex: 0 0 350px; }
}

@media (max-width: 991px) {
    .help-row { flex-direction: column; }
    .help-col-brands { flex: 1; width: 100%; position: static; }
    .help-title { font-size: 32px; }
    .help-services-grid { grid-template-columns: 1fr 1fr; }
}



@media (max-width: 576px) {
    .help-services-grid { grid-template-columns: 1fr; }
    .help-title { font-size: 28px; }
    .help-lead { font-size: 1.4rem; padding-right: 20px;}
    .brands-logo-grid { grid-template-columns: repeat(2, 1fr); }

}

/* --- PROCESO DE GESTION DE TICKET--- */
.stark-dashboard-flow {
    background-color: #050a14;
    padding: 30px 0;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

/* Títulos con Sombra de Impacto */
.stark-impact-title {
    font-size: 37px; font-weight: 900; color: #ffffff;
    text-shadow: 0px 4px 20px rgba(0, 74, 173, 0.8);
    text-align: center; margin-bottom: 5px;
 line-height: 1.2;
padding: 20px 10px;

}
.stark-glow-subtitle {
    color: #00d2ff; text-align: center; font-weight: bold;
    letter-spacing: 1px; font-size: 14px; margin-bottom: 30px;
 line-height: 1.2;
padding: 10px 10px;
}

/* El Grid que llena los costados */
.stark-grid-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Divide la pantalla en 3 partes iguales */
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Las Cajas de Paso */
.stark-step-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 30px 30px;
    border-radius: 20px;
    position: relative;
    transition: 0.4s ease;
    text-align: center;

}

.stark-step-box:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #004aad;
    transform: translateY(-15px);
}

.stark-p {
color: white;
    text-align: justify;

}

/* El Número Flotante */
.stark-number {
    width: 60px; height: 60px;
    background: #004aad;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 22px;
    margin: 0 auto 25px;
    box-shadow: 0 0 20px rgba(0, 74, 173, 0.5);
}
.num-cyan { background: #00ffcc; color: #000; box-shadow: 0 0 20px #00ffcc; }

/* Tipografía Blanca con Sombra */
.stark-white-shadow {
    color: #ffffff !important;
    font-weight: 800;
    font-size: 24px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    margin: 15px 0;
}

.stark-tag { font-size: 11px; font-weight: 900; color: #00d2ff; letter-spacing: 2px; }
.text-cyan { color: #00ffcc; }
.stark-step-box p { color: #b0b8c1; line-height: 1.7; font-size: 15px; }

/* Elementos de Acción */
.stark-btn-portal {
    display: inline-block; margin-top: 25px;
    padding: 12px 25px; background: #ffffff; color: #000;
    font-weight: 800; border-radius: 8px; text-decoration: none;
    font-size: 12px; transition: 0.3s;
}
.stark-btn-portal:hover { background: #00d2ff; color: black; }

.stark-badge-status {
    display: inline-block; margin-top: 25px;
    padding: 8px 20px; background: #222; color: #888;
    border-radius: 5px; font-weight: 800; font-size: 11px;
}
.success { background: #00ffcc; color: #000; }

/* RESPONSIVO TOTAL MÓVIL */
@media (max-width: 992px) {
    .stark-grid-steps { grid-template-columns: 1fr; padding: 0 20px; }
    .stark-impact-title { font-size: 22px;  line-height: 1.2;  padding: 0px 10px;  margin-bottom: 30px;}
    .stark-step-box { padding: 20px 20px; }
}

/* --- CONTADOR--- */

.stark-stats-modern {
    background: #ffffff;
    padding: 30px 0; /* Menos espacio, más directo */
    font-family: 'Inter', sans-serif;
margin-bottom: 20px;
}

.stark-stats-header { text-align: center; margin-bottom: 20px;}
.stark-stats-header h2 { font-weight: 900; color: #003366; font-size: 30px; margin: 0; line-height: 1.2; }
.stark-stats-header p { color: black; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; }

.stark-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1100px;
    margin: 0 auto;
    gap: 20px;
}

.stat-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    border-radius: 12px;
    background: #fcfcfc;
    border: 3px solid #f0f0f0;
}

.stat-box i { font-size: 35px; color: #004aad; }

.stat-info span { font-size: 32px; font-weight: 900; color: #050a14; line-height: 1; }

.stat-info p { 
    margin: 0; font-size: 12px; font-weight: 800; 
    color: black; text-transform: uppercase; 
}

/* RESPONSIVO 2 FILAS EN MÓVIL */
@media (max-width: 768px) {
    .stark-stats-grid { grid-template-columns: repeat(2, 1fr);  padding-top: 5px; margin-bottom: 1px; }
    .stat-box { flex-direction: column; text-align: center; padding-top: 5px; }
.stark-stats-header h2 {font-size: 2.9rem; margin: 0; line-height: 1.2;  padding: 10px 20px; margin-top: 1px; }
.stark-stats-header p { font-size: 1.2rem; text-transform: uppercase;  padding: 10px 10px; margin-bottom: 5px; font-weight: 800; }

}

/* ----------- PRECIOS---------------------- */
.stark-pricing-section {
    background: #EDEDED;
    padding: 20px 20px;
margin-top: -30px;
    font-family: 'Inter', sans-serif;
}

/* --- Títulos Corporativos --- */
.stark-title-blue, .title-corp {
    color: #003580 !important; /* Azul Profundo Corporativo */
    font-weight: 900;
}



.stark-glow-subtitle  {
 color: black !important; /* Azul Profundo Corporativo */
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Grid & Cards --- */
.stark-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 30px auto 0;
    gap: 25px;
}

.pricing-card {
    background: #fff;
    border: 6px solid;
    border-radius: 16px;
    padding: 10px 20px;
    text-align: center;
    transition: 0.3s ease;
 border-color: white;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

.pricing-card.featured {
    border: 3px solid #004aad;
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);    
    transform: scale(1.03);
}

/* --- Badge de Tickets (NEGRO) --- */
.ticket-badge-black {
    background: #000000;
    color: #ffffff;
    font-weight: 900;
    font-size: 13px;
    padding: 8px 15px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 25px;
    width: 100%;
}

.price { font-size: 38px; font-weight: 900; color: #003580; margin-bottom: 5px; }
.price small { font-size: 14px; color: #777; }

.features { list-style: none; padding: 0; margin-bottom: 30px; text-align: left; }
.features li { font-size: 14px; color: #333; margin-bottom: 12px; font-weight: 600; display: flex; align-items: flex-start; }
.features i { color: #003580; margin-right: 10px; font-size: 18px; }

/* --- Botones --- */
.btn-price, .btn-price-featured {
    display: block;
    padding: 15px;
    border-radius: 8px;
    font-weight: 900;
    text-decoration: none;
    transition: 0.3s;
}

.btn-price { border: 2px solid #003580; color: #003580; }
.btn-price:hover { background: #003580; color: #fff; }

.btn-price-featured { background: #003580; color: #fff; }
.btn-price-featured:hover { background: #050a14; color: white; }

/* --- CTA Personalizado --- */
.stark-custom-cta {
    margin-top: 50px;
    padding: 30px;
    border: 2px dashed #003580;
    border-radius: 12px;
}

.btn-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: black;
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 900;
    text-decoration: none;
 text-shadow: 2px 2px 5px rgba(0,0,0,0.5);

}
.btn-custom:hover {
   background: #003580;
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 900;
    text-decoration: none;
}

/* Móvil */
@media (max-width: 900px) {
    .stark-pricing-grid { grid-template-columns: 1fr; }
    .pricing-card.featured { transform: scale(1); }

.title-corp {font-weight: 900; font-size: 2.9rem;}

.stark-title-blue { font-size: 3.0rem; margin: 0; line-height: 1.2;  padding: 5px 5px; margin-top: 1px; }
.stark-glow-subtitle {font-size: 1.2rem; padding: 10px 10px; margin-bottom: 5px; font-weight: 800;}
.stark-custom-cta {font-size: 1.8rem;}

}

/* ----------- ESCALAMIENTO---------------------- */
/* --- Variables Corporativas --- */
:root {
    --azul-stark: #003580;
    --celeste-stark: #004aad;
    --glow-stark: #00ffcc;
}

.stark-tech-levels {
    background: white;
    padding: 20px 20px;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

.stark-title-blue {
    color: var(--azul-stark) !important;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: -1px;
padding: 20px 20px;
}

.stark-glow-subtitle {
    color: var(--celeste-stark);
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- Grid Moderno --- */
.stark-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 30px auto;
}

/* --- Card Tecnológica --- */
.tech-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 1px; /* Espacio para el borde de gradiente */
    background: linear-gradient(135deg, #eee 0%, #fff 100%);
    transition: 0.4s ease;
    z-index: 1;
    border: 4px solid #e1e8f0;
     box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
}

.tech-card:hover {
    transform: translateY(-10px);
    background: linear-gradient(135deg, var(--celeste-stark) 0%, var(--glow-stark) 100%);

}

.card-content {
    background: #fff;
    border-radius: 18px;
    padding: 20px 20px;
    height: 100%;
    text-align: center;
color: black,
}


.featured-tag { background: var(--azul-stark); color: #fff; }

.tech-icon i { font-size: 50px; color: var(--celeste-stark); margin: 15px 0; display: block; }

.badge-black {
    background: #000 !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 900;
    padding: 8px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    display: inline-block;
}

.title-corp { color: var(--azul-stark); font-weight: 900; margin-bottom: 15px; }

/* --- Banner Glassmorphism ITSM --- */
/* --- Panel ITSM J-STARK (Call to Action) --- */
.itsm-cta-container { max-width: 1100px; margin: 0 auto; }

.itsm-glass-panel {
    background: var(--primary-blue);
    border-radius: 30px;
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
      box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
}

.pulse-badge {
    background: var(--neon-cyan);
    color: var(--primary-blue);
    padding: 6px 15px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 11px;
    display: inline-block;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

.itsm-info h3 {color: white; font-size: 30px; margin-bottom: 15px; font-weight: 800;  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.itsm-info p { color: white; font-size: 16px; opacity: 0.8; max-width: 500px;  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* BOTÓN CYBER-STYLE */
.btn-jstark-cyber {
    background: #fff;
    color: var(--primary-blue);
    padding: 20px 40px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.btn-jstark-cyber:hover {
    background: black;
    transform: scale(1.05);
color: white;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 204, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(0, 255, 204, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 204, 0); }
}


/* ================================================= */
/* FIX PARA MÓVIL (CORREGIDO ESPACIADO)            */
/* ================================================= */
@media (max-width: 900px) {
    .stark-grid-modern {
        grid-template-columns: 1fr;
        gap: 60px; /* Espacio masivo para que respire en móvil */
        padding: 0 10px;


    }

   .itsm-glass-panel {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
        gap: 30px;
    }
.itsm-info p { margin: 0 auto; }
.btn-jstark-cyber { width: 100%; justify-content: center; }

    .itsm-icon { margin-top: 30px; text-align: center; }
    
    .tech-card {
        max-width: 380px;
        margin: 0 auto;
    }
}
/* --- CORRECCIÓN RESPONSIVE PARA MÓVILES --- */
@media (max-width: 768px) {
    .stark-grid-modern {
        display: block !important; /* Fuerza a que las tarjetas se apilen */
        width: 100% !important;
        padding: 0 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .tech-card {
        margin-bottom: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .card-content {
        padding: 15px !important;
        word-wrap: break-word !important;
    }

    .title-corp {
        font-size: 1.4rem !important; /* Reduce el tamaño para que no se desborde */
        line-height: 1.2 !important;
    }
}



/* ================================================= */
/*       SOPORTE TECNICO                             */
/* ================================================= */

/* Reset y Contenedor */
.st-main-section {
  background: white;

    max-width: 1200px;
    margin: 10px auto;
    font-family: 'Inter', sans-serif;

    padding: 0 20px;
}

.st-main-h1 {
    text-align: center;
    color: #002d72;
    margin-bottom: 40px;
    font-weight: 800;
}

.st-flex-container {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

/* Columnas */
.st-col { min-width: 300px; }
.st-col-left { flex: 2; }
.st-col-right { flex: 1; }

.st-category-title {
    background: #0046ad;
    color: #fff;
    padding: 10px 10px;
    border-radius: 6px;
    font-size: 2.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Tarjetas de Servicio */
.st-service-box {
    background: #fff;
    border: 3px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
   box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
}

.st-service-box h3 {
    color: #0046ad;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 10px;
margin-top: 3px;
    font-size: 2.0rem;
}

/* Mantenimiento vs Soporte */
.st-split {
    display: flex;
    gap: 20px;
}

.st-type { flex: 1; }

.st-type h4 {
    font-size: 1.9rem;
    color: black;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.st-type ul {
    list-style: none;
    padding: 0;
}

.st-type ul li {
    font-size: 1.5rem;
    color: black;
    margin-bottom: 5px;
    padding-left: 15px;
    position: relative;
}

.st-type ul li::before {
    content: "•";
    color: #0046ad;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.st-margin-top { margin-top: 10px; }

/* Responsive */
@media (max-width: 768px) {
    .st-flex-container { flex-direction: column; }
    .st-split { flex-direction: column; }


.st-service-box h3 {
       padding-bottom: 10px;
    margin-bottom: 10px;
margin-top: 3px;
    font-size: 2.0rem;
}

}

/* --- SERVICIOS ADICIONALES --- */

/* Contenedor Principal con fondo celeste */
.st-expert-section {
 background: linear-gradient(135deg, #001f3f 0%, #000b18 100%);

    padding: 10px 10px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.st-container {
    max-width: 1250px;
    margin: 0 auto;
}

.st-main-h2 {
    text-align: center;
    color: #002d72;
    font-size: 2.8rem;
    margin-bottom: 30px;
    font-weight: 800;
}

.st-main-h2 span {
    color: #0046ad;
}

/* Grid de Cuadros */
.st-expert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* Diseño de los Cuadros (Cards) */
.st-expert-card {
    background: #ffffff;
    padding: 15px 10px;
    border-radius: 15px;
    border: 4px solid #CCCCCC ;
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    text-align: center; /* Alineación centrada para los iconos y títulos */
}

.st-expert-card:hover {
    transform: translateY(-8px);
     box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    border-color: yellow;
}

/* Iconos circulares */
.st-card-icon {
    width: 70px;
    height: 70px;
    background: #f0f7ff;
    color: #0046ad;
    font-size: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 2px solid #0046ad;
}

.st-expert-card h3 {
    color: #002d72;
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 700;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Listas internas */
.st-expert-list {
    list-style: none;
    padding: 0;
    text-align: left; /* Volvemos a texto a la izquierda para las listas */

}

.st-expert-list li {
    font-size: 1.5rem;
    color: black;
    margin-bottom: 15px;
    line-height: 1.4;
    padding-left: 22px;
    position: relative;
}

.st-expert-list li::before {
    content: "\ea5e"; /* Icono de flecha de LineIcons o un bullet simple */
    font-family: 'LineIcons';
    position: absolute;
    left: 0;
    color: #0046ad;
    font-weight: bold;
    font-size: 0.8rem;
}

.st-expert-list li strong {
    color: #0046ad;
    display: block;
    font-size: 1.6rem;
}

/* Adaptabilidad para móviles */
@media (max-width: 768px) {
    .st-expert-grid {
        grid-template-columns: 1fr;
    padding: 10px 10px;
    }
}

/* --- parnet --- */
.st-partners-section { padding: 30px 20px; background: white; text-align: center; }
.st-partner-h2 { color: #666; font-size: 1.2rem; margin-bottom: 30px; text-transform: uppercase; }
.st-partner-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; opacity: 0.6; }
.st-partner-logo img { height: 40px; filter: grayscale(70%); transition: 0.3s; }
.st-partner-logo img:hover { filter: grayscale(0%); }


/* --- Sección Confianza --- */
.st-confianza-section {
    padding: 30px 20px;
    background-color: white;
}

.st-flex-confianza {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    max-width: 1260px;
    margin: 0 auto;
}

.st-diferenciales { flex: 2; }

.st-confianza-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Cuadros con Borde Azul a la izquierda */
.st-confianza-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e1e8f0;
    border-left: 5px solid #0046ad; /* EL BORDE AZUL QUE PEDISTE */
    transition: 0.3s ease;
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
}

.st-confianza-card:hover {
    transform: translateX(5px); /* Se mueve un poco a la derecha al pasar el mouse */
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
}

/* Alineación Icono + Título */
.st-card-header {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre icono y texto */
    margin-bottom: 12px;
}

.st-card-header i {
    font-size: 2.5rem; /* Tamaño ajustado para ir al lado del texto */
    color: #0046ad;
}

.st-card-header h4 {
    color: #002d72;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
 text-align: center; 
}


.st-confianza-card p {
    color: black;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0;
    text-align: justify; /* Alineado a la izquierda para mejor lectura con el nuevo estilo */
}

/* Logos en 2 columnas */
.st-clientes-side {
    flex: 0.8;
    background: #ffffff;
    padding: 30px;
   }

.st-clientes-grid-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.st-cliente-logo img {
    width: 100%;
    max-width: 140px;
    filter: grayscale(70%);
    opacity: 0.7;
}

.st-cliente-logo img:hover { filter: grayscale(0%); }

@media (max-width: 992px) {
    .st-flex-confianza { flex-direction: column; }
    .st-confianza-grid { grid-template-columns: 1fr; }
}

/* --- MENSAJE DE ACCION --- */

/* --- Sección CTA Personalizada JHARDSYSTEX --- */
.jh-pro-cta-area {
    padding: 30px 0;
    background-color: #001529;
    font-family: 'Inter', sans-serif;
}

.jh-pro-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.jh-pro-glass-card {
    position: relative;
    background: #001529;
    border-radius: 30px;
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
}

/* El brillo de fondo para que no se vea plano */
.jh-pro-glass-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 112, 243, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(40px);
}

.jh-pro-info {
    flex: 1;
    position: relative;
    z-index: 2;
    text-align: left;
}

.jh-pro-badge {
    color: #00d4ff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
}

.jh-pro-title {
    color: #ffffff;
    font-size: 38px;
    font-weight: 850;
    line-height: 1.1;
    margin-bottom: 20px;
}

.jh-pro-title span {
    background: linear-gradient(to right, #00d4ff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.jh-pro-text {
    color: white;
    font-size: 18px;
    line-height: 1.6;
    max-width: 500px;
}

/* Lado del Botón */
.jh-pro-action {
    flex: 0 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.jh-pro-btn {
    position: relative;
    display: block;
    background: #0070f3;
    color: #ffffff;
    padding: 22px 40px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);



}

.jh-pro-btn:hover {
    transform: scale(1.05);
    background: #ffffff;
    color: #001529;
}

.jh-pro-btn-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jh-pro-subtext {
    color: white;
    font-size: 13px;
    margin-top: 15px;
}

/* Efecto Brillo (Shimmer) */
.jh-pro-btn-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
}

.jh-pro-btn:hover .jh-pro-btn-shimmer {
    left: 100%;
    transition: 0.5s;
}

/* Responsivo para móviles */
@media (max-width: 992px) {
    .jh-pro-glass-card {
        flex-direction: column;
        padding: 40px;
        text-align: center;
    }
    .jh-pro-info { text-align: center; }
    .jh-pro-text { margin: 0 auto 30px; }
    .jh-pro-title { font-size: 30px; }
}

/* ================================================= */
/*       OUTSORCING TI                            */
/* ================================================= */

/* --- SECCIÓN EXCLUSIVA DE OUTSOURCING JHARDSYSTEX --- */
.jh-out-srv-section {
    padding: 20px 0;
    background-color: #ffffff;
margin-bottom: 10px: 
}

.jh-out-srv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.jh-out-srv-main-title {
    font-size: 32px;
    color: #001a33;
    font-weight: 800;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.jh-out-srv-brand {
    color: #001a33;
    border-bottom: 3px solid #001a33;
}

/* Fila de Tarjetas */
.jh-out-srv-pillars-flex {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}


/* Logos Clientes */
.jh-out-srv-clients-title {
    font-size: 16px;
    color: #001a33;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.jh-out-srv-logos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
}

.jh-out-srv-logos-grid img {
    height: 40px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: 0.3s;
}

.jh-out-srv-logos-grid img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Responsivo para celulares */
@media (max-width: 991px) {
    .jh-out-srv-pillars-flex {
        flex-direction: column;
    }
}

/* --- Sección Confianza --- */
/* --- SECCIÓN PERFILES OUTSOURCING GLASSMORPHISM PREMIUM --- */
.jh-out-perfil-premium {
    padding: 30px 0;
    /* Degradado azul oscuro de alta gama para que el cristal destaque */
    background: linear-gradient(135deg, #001f3f 0%, #000b18 100%);
    font-family: 'Arial', sans-serif;
}

.jh-out-perfil-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}

.jh-out-perfil-main-title {
    font-size: 34px;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.jh-out-perfil-highlight {
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
}

.jh-out-perfil-subtitle {
    color: white; /* Gris plata suave */
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 30px;
}

/* Grid de 3 columnas perfectamente alineado */
.jh-out-perfil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

/* El cuadro de cristal mejorado (Glassmorphism de verdad) */
.jh-out-perfil-card {
    background: rgba(255, 255, 255, 0.03); /* Súper transparente y fino */
    backdrop-filter: blur(20px); /* Desenfoque más fuerte para efecto vidrio */
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    /* Borde blanco muy suave que imita el brillo del cristal */
    border: 1px solid rgba(255, 255, 255, 0.12); 
    /* Tu característico borde grueso azul marino a la izquierda */
    border-left: 6px solid #001f3f; 
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto Hover Inteligente */
.jh-out-perfil-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.07); /* Se aclara sutilmente */
    border-left: 6px solid #ffffff; /* El borde cambia a blanco brillante en hover */
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

.jh-out-perfil-body {
    padding: 35px 25px;
}

.jh-out-perfil-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Caja contenedora para el icono dentro del cristal */
.jh-out-perfil-icon-box {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.jh-out-perfil-icon-box i {
    font-size: 24px;
    color: #ffffff; /* Icono blanco limpio */
}

.jh-out-perfil-header h3 {
    font-size: 19px;
    color: #ffffff; /* Título blanco neto */
    font-weight: 700;
    margin: 0;
}

/* Párrafo integrado al cristal (Sin bloques blancos monses) */
.jh-out-perfil-card p {
    color: #cbd5e1; /* Gris claro de alta legibilidad sobre fondo oscuro */
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
    .jh-out-perfil-grid {
        grid-template-columns: 1fr;
    }
}
/* --- SECCIÓN FLUJO Y CTA OUTSOURCING --- */
.jh-out-flow-section {
    padding: 30px 0;
   background-color: #EDEDED;  /* Fondo blanco para romper el azul anterior */
    font-family: 'Arial', sans-serif;
}

.jh-out-flow-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.jh-out-flow-title {
    font-size: 32px;
    color: #001a33; /* Tu Azul Marino */
    font-weight: 800;
    text-transform: uppercase;
}

.jh-out-flow-highlight {
    color: #001a33;
    border-bottom: 3px solid #001a33;
}

.jh-out-flow-subtitle {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
 margin-bottom: 10px;

}

/* Fila de Pasos */
.jh-out-flow-steps {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.jh-out-flow-step-card {
    flex: 1;
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 8px;
    border-left: 6px solid #001a33; /* Manteniendo la línea de diseño de la foto */
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    position: relative;
}

.jh-out-flow-number {
    font-size: 50px;
    font-weight: 900;
    color: rgba(0, 26, 51, 0.1); /* Número gigante sutil de fondo */
    position: absolute;
    top: 15px;
    right: 25px;
    line-height: 1;
}

.jh-out-flow-step-card h3 {
    font-size: 20px;
    color: #001a33;
    font-weight: 800;
    margin-bottom: 15px;
}

.jh-out-flow-step-card p {
    color: #000000; /* Negro Puro */
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
text-align:  justify;
}

/* Caja de Llamado a la Acción (CTA) */
.jh-out-cta-box {
    background: #001a33; /* Tu Azul Marino de fondo */
    padding: 60px 40px;
    border-radius: 15px;
    color: #ffffff;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
}

.jh-out-cta-box h3 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.jh-out-cta-box p {
    font-size: 16px;
    color: #cbd5e1;
    max-width: 700px;
    margin: 0 auto 35px auto;

}

/* Botones de Acción */
.jh-out-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.jh-out-btn-wa {
    background-color: #25d366; /* Verde Oficial WhatsApp */
    color: #ffffff !important;
    padding: 15px 35px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease;
 text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.jh-out-btn-wa:hover {
    background-color: #1ebd59;
    transform: translateY(-3px);
 text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.jh-out-btn-mail {
    background-color: transparent;
    color: #ffffff !important;
    padding: 15px 35px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    border: 2px solid #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease;
 text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.jh-out-btn-mail:hover {
    background-color: #ffffff;
    color: #001a33 !important;
    transform: translateY(-3px);
 text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* Ajuste Móvil */
@media (max-width: 991px) {
    .jh-out-flow-steps {
        flex-direction: column;
    }
}

/* ==========================================================================
   CLASES NETAS: SECCIÓN INFRAESTRUCTURA TI
   ========================================================================== */

.jh-infra-servicios-section {
    background-color: #f8fafc;
    padding: 30px 0;
}

.jh-infra-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Tarjeta base: Fondo blanco uniforme para las 4 tarjetas por igual */
.jh-infra-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-top: 6px solid #003366; /* Borde superior azul oscuro corporativo */
    border-radius: 8px;
    padding: 35px 22px;
    margin-bottom: 30px;
    height: calc(100% - 30px); /* Forzado de simetría en altura */
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}

/* Efecto al pasar el mouse por la tarjeta */
.jh-infra-card:hover {
    transform: translateY(-8px);
 background:  #003366;
   box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

}

/* Encabezado interno: Coloca el icono al costado del subtítulo */
.jh-infra-card-header {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio horizontal entre el icono y el texto */
    margin-bottom: 5px;
    min-height: 60px; /* Asegura que los títulos de 2 líneas no descuadren el diseño */
}

/* Iconos Modernos de LineIcons */
.jh-infra-icon {
    font-size: 68%; /* Tamaño ideal para ir al costado del texto */
    color: #003366;
    transition: color 0.3s ease, transform 0.3s ease;
    flex-shrink: 0; /* Evita que el icono se deforme si el título es largo */
}


/* Subtítulos de las tarjetas */
.jh-infra-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #003366;
    line-height: 1.3;
    margin: 0;
    text-align: left; /* Alineación a la izquierda junto al icono */
}

/* Párrafos descriptivos calibrados y justificados */
.jh-infra-card-text {
    font-size: 14px;
    color: black;
    line-height: 1.7;
    margin-bottom: 0;
    text-align: justify; /* Texto estrictamente justificado como solicitaste */
}

/* --- SECCIÓN MARCAS------------------------- */
.jh-infra-diferenciales {
background: #001a33;
 padding: 30px 0;

}

/* Contenedor con margen superior para separarlo de las tarjetas */
.jh-infra-respaldo-container {

    margin-top: 30px;
    
    }

/* Títulos de las columnas */
.jh-infra-subtitulo-seccion {
    font-size: 23px;
    font-weight: 700;
    color: white;
    margin-bottom: 35px;
    letter-spacing: 0.5px;
    position: relative;
}

/* Estructura de Filas de Beneficios */
.jh-infra-item-beneficio {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}

/* Iconos pequeños para las listas */
.jh-infra-mini-icon {
    font-size: 28px;
    color: white;
    background: #f1f5f9;
    padding: 12px;
    border-radius: 6px;
   
    flex-shrink: 0;
}

.jh-infra-item-beneficio:hover .jh-infra-mini-icon {
border: 1px solid  #00d2ff;
    color: #00d2ff;
    background: rgba(76, 175, 80, 0.1);;

}

.jh-infra-beneficio-texto h4 {
    font-size: 17.5px;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
}

.jh-infra-beneficio-texto p {
    font-size: 14px;
    color: white;
    line-height: 1.6;
    margin-bottom: 0;
text-align: justify;
}

/* Introducción de marcas */
.jh-infra-marcas-intro {
    font-size: 14.5px;
    color: white;
    line-height: 1.7;
    margin-bottom: 25px;
text-align: justify;
}

/* Grid de Marcas */
.jh-infra-marcas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Cajas de Marcas con estilo Minimalista y Corporativo */
.jh-infra-marca-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 1px;
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.jh-infra-marca-box:hover {
    border-color: #00d2ff;
    color: #003366;
    background: #f8fafc;
}


/* --- SECCIÓN PROCESOS-- */

.jh-infra-proceso-container {
    margin-top: 20px;
    padding-top: 10px;
    
}

.jh-infra-proceso-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
margin-bottom: 25px;
}

/* Tarjeta de proceso con borde superior azul oscuro corporativo */
.jh-infra-proceso-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-top: 5px solid #003366; /* Borde superior inicial */
    border-radius: 6px;
    padding: 30px 20px;
    height: calc(100% - 15px); /* Garantiza altura idéntica */
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}

/* Hover: Cambia el borde superior a azul Sky */
.jh-infra-proceso-card:hover {
    transform: translateY(-6px);
    border-top-color: #00d2ff;
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
}

/* Cabecera interna: Icono al costado del título del paso */
.jh-infra-proceso-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    min-height: 40px;
}

/* Subtítulo del paso */
.jh-infra-proceso-title {
    font-size: 20px;
    font-weight: 700;
    color: #003366;
    margin: 0;
    text-align: left;
}

/* Párrafo descriptivo estrictamente justificado (Alineado a 2 líneas exactas) */
.jh-infra-proceso-text {
    font-size: 13px;
    color: black;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: justify;
}

/* ==========================================================================
   DISEÑO WEB- JHARDSYSTEX CORPORATIVE
   ========================================================================== */
/* Degradado y estructura */
.dw-hero-section {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background: linear-gradient(90deg, #1e40af 0%, #0891b2 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 100px 20px;
 justify-content: center;

}

/* Contenedor de olas */
.dw-waves-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
}

.dw-waves {
    width: 100%;
    height: 100%;
}

/* Animación y color de las capas de la ola */
.dw-parallax > use {
    animation: dw-move-waves 25s cubic-bezier(.55,.5,.45,.5) infinite;
    fill: rgba(255, 255, 255, 0.3);
}

.dw-parallax > use:nth-child(4) {
    fill: #ffffff; /* Capa superior blanca */
}

.dw-parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.dw-parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.dw-parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.dw-parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }

@keyframes dw-move-waves {
    0% { transform: translate3d(-90px,0,0); }
    100% { transform: translate3d(85px,0,0); }
}

/* Ajuste de texto para contraste perfecto */
.dw-text-block { color: #ffffff; z-index: 10; position: relative;  }
.dw-main-h1 { color: #ffffff; font-size: clamp(52px, 8vw, 64px); font-weight: 900; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); text-align: center; 

 }
.dw-clean-text { color: #facc15; text-align: center;

}
.dw-description { color: white; font-size: px;  text-shadow: 2px 2px 5px rgba(0,0,0,0.5); text-align: center; }

/* TARJETAS FLOTANTES COMPONENTES */
.dw-service-badge {
    position: absolute;
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    z-index: 20;
    animation: dwFloatBadge 5s ease-in-out infinite;
}

.badge-seo { top: 8%; right: -20px; border-left: 4px solid #34d399; }
.badge-intranet { bottom: 22%; left: -40px; border-left: 4px solid #38bdf8; animation-delay: 1.5s; }
.badge-ecommerce { top: 38%; right: -60px; border-left: 4px solid #f59e0b; animation-delay: 3s; }
.badge-ssl { bottom: 2%; right: 10px; border-left: 4px solid #a855f7; animation-delay: 4.5s; }

/* PUNTOS DE ESTADO INTERNOS */
.dw-status-dot { width: 7px; height: 7px; border-radius: 50%; }
.dw-status-dot.green { background: #34d399; }
.dw-status-dot.blue { background: #38bdf8; }
.dw-status-dot.orange { background: #f59e0b; }
.dw-status-dot.cyan { background: #a855f7; }

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

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

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

@keyframes dwPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; } }

@keyframes dwFlow { to { stroke-dashoffset: -200; } }

@keyframes dwRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

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

@media (max-width: 991px) {
    .dw-container { grid-template-columns: 1fr !important; text-align: center !important; }
    .dw-text-block { margin: 0 auto; text-align: center !important; }
    .dw-main-h1 { font-size: 38px !important; }
    .dw-visual-block { height: 400px; margin-top: 50px; }
    .dw-isometric-scene { transform: scale(0.8); }
    .badge-ecommerce { right: 0; }
    .badge-ssl { bottom: -10px; }
}

/* ==========================================================================
   DW-SERVICES COMPONENT - JHARDSYSTEX PREMIUM WHITE
   ========================================================================== */

.dw-features-section {
    position: relative;
    width: 100%;
    background: white !important; /* Contraste perfecto para romper el negro de la portada */
    padding: 30px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
}

.dw-features-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ENCABEZADO DE LA SECCIÓN */
.dw-section-header {
    text-align: center !important;
    max-width: 750px;
    margin: 0 auto 20px auto;
}

.dw-section-tag {
    color: #2738B0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dw-section-title {
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 12px 0 18px 0 !important;
    color: #001a33 !important;
}

.dw-section-subtitle {
    color: black !important;
    font-size: 17.5px !important;
    line-height: 1.6 !important;
}

/* GRILLA DE 3 COLUMNAS SIMÉTRICAS */
.dw-features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px;
}

/* TARJETAS OSCURAS DE JHARDSYSTEX */
.dw-feature-card {
    background: #010409 !important; /* Mantiene tu negro de branding para las cajas */
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    border: 4px solid #f0f0f0 !important;
    border-radius: 16px;
    padding: 35px 25px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: left !important;
}

.dw-feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(29, 46, 245, 0.4) !important;
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
}

/* CABECERA INTERNA EN UNA SOLA LÍNEA (ÍCONO + TÍTULO) */
.dw-card-header-block {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    width: 100%;
}

.dw-icon-box {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Evita que el SVG se deforme */
}

.dw-feature-card h3 {
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

/* PÁRRAFOS JUSTIFICADOS */
.dw-feature-card p {
    color: white !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    flex-grow: 1;
    margin-bottom: 25px !important;
    text-align: justify !important; /* Justificado perfecto */
}

.dw-card-footer {
    font-size: 11.5px;
    font-weight: 700;
    color: #34d399;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   RESPONSIVE (Ajuste para móviles)
   ========================================================================== */

@media (max-width: 991px) {
    .dw-features-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }
    .dw-section-title {
        font-size: 30px !important;
    }
    .dw-feature-card p {
        text-align: justify !important;
    }
}

/* --- SECCIÓN PORTAFALIO------------------------- */
.dw-pf-seccion { padding: 20px 0; margin-bottom: 20px;  background: linear-gradient(135deg, #001f3f 0%, #000b18 100%); font-family: 'Segoe UI', sans-serif; }
.dw-pf-contenedor { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Filtros */
.dw-pf-filtros { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.dw-pf-btn { padding: 10px 20px; border: 3px solid #e2e8f0; border-radius: 50px; background: white; cursor: pointer; font-weight: 600; transition: 0.3s; }
.dw-pf-btn.active { background: #2738B0; color: white; border-color: #2738B0; }

/* Grilla */
.dw-pf-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }

/* Contenedor de la tarjeta */
.dw-pf-tarjeta { 
    background: white; 
    border-radius: 28px; 
    overflow: hidden;   
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05) !important; 
    border: 5px solid #f0f0f0 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; 
    flex-direction: column;
    height: 100%; /* Asegura que todas sean iguales */
}


.dw-pf-tarjeta:hover { transform: translateY(-12px); box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05); }

.dw-pf-imagen { 
    width: 100%; 
    height: 200px; 
    background-color: #e2e8f0; 
    background-size: cover; 
    background-position: center center; /* Centra el enfoque de la imagen */
    transition: transform 0.5s ease;
}

.dw-pf-tag { font-size: 10px; font-weight: 900; letter-spacing: 1px; color: #2738B0; text-transform: uppercase; }
.dw-pf-info h3 { margin: 10px 0; color: black; }


/* Info y botones */
.dw-pf-info { 
    padding: 25px; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}

.dw-pf-info p { 
    color: #64748b; 
    font-size: 14px; 
    margin-bottom: 20px; 
    line-height: 1.5;
}

.dw-pf-boton-impulso { 
    margin-top: auto; /* Empuja el botón al final de la tarjeta siempre */
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    padding: 12px 20px; 
    background: #000; 
    color: #fff; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 13px;
    align-self: flex-start;
}
.dw-pf-boton-impulso:hover { background: #2738B0; padding-right: 35px; color: white; }
.dw-pf-boton-impulso span { transition: transform 0.3s ease; }
.dw-pf-boton-impulso:hover span { transform: translateX(5px); }

/* ================================================= */
/*       MARKETING                       */
/* ================================================= */
.mk-hero {
    position: relative;
    width: 100%;
    /* Aumentamos la altura mínima para dar más espacio vertical */
    min-height: 70vh; 
    background: linear-gradient(100deg, #1e40af 0%, #0891b2 100%);
    overflow: hidden;
    display: flex;
    align-items: center;    /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    padding: 80px 20px;     /* Mucho más aire arriba y abajo */
    box-sizing: border-box;
}

.mk-hero-content {
    z-index: 10;
    text-align: center;
    color: #ffffff;
    max-width: 900px;
    /* Espaciado interno para que el texto no toque los bordes en móviles */
    padding: 20px;
}

.mk-title {
    font-size: clamp(52px, 8vw, 64px); /* El tamaño se ajusta solo según la pantalla */
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 15px;
padding-top: 100px;
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);

}

.mk-highlight { color: yellow; }

.mk-subtitle { font-size: 20px; color: white; margin-bottom: 30px; text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 }

.mk-hero-btn {
    display: inline-block;
    padding: 18px 35px;
    background: #facc15;
    color: black;
    font-weight: bold;
    border-radius: 20px;
    text-decoration: none;
    z-index: 20;
    position: relative;
 box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
 font-size: 15px;

}
.mk-hero-btn:hover {
    color: black;
   background: yellow;
}


.mk-circles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    margin: 0; padding: 0;
}

.mk-circles li {
    position: absolute;
    background: rgba(59, 180, 646, 2.0);
    animation: mk-animate 10s linear infinite;
    bottom: -150px;
    border-radius: 4px;
    list-style: none;
}

/* Mantenemos tus animaciones originales intactas */
.mk-circles li:nth-child(1) { left: 5%; width: 50px; height: 50px; animation-delay: 0s; }
.mk-circles li:nth-child(2) { left: 15%; width: 30px; height: 30px; animation-delay: 1s; }
.mk-circles li:nth-child(3) { left: 25%; width: 70px; height: 70px; animation-delay: 2s; }
.mk-circles li:nth-child(4) { left: 40%; width: 40px; height: 40px; animation-delay: 0s; }
.mk-circles li:nth-child(5) { left: 60%; width: 90px; height: 90px; animation-delay: 3s; }
.mk-circles li:nth-child(6) { left: 75%; width: 30px; height: 30px; animation-delay: 1.5s; }
.mk-circles li:nth-child(7) { left: 90%; width: 60px; height: 60px; animation-delay: 0.5s; }
.mk-circles li:nth-child(8) { left: 20%; width: 40px; height: 40px; animation-delay: 4s; }
.mk-circles li:nth-child(9) { left: 50%; width: 20px; height: 20px; animation-delay: 2.5s; }
.mk-circles li:nth-child(10) { left: 85%; width: 50px; height: 50px; animation-delay: 1s; }

@keyframes mk-animate {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    100% { transform: translateY(-900px) rotate(360deg); opacity: 0; }
}

/* Ajuste específico para móviles */
@media (max-width: 768px) {
    .mk-hero {
        padding: 20px 15px; /* Menos padding en móviles, pero suficiente para no estar pegado */

    }
    .mk-title {
        margin-bottom: 10px;
    }
}
/* --- SECCIÓN SERVICIOS------------------------- */
.mk-section { padding: 30px 20px; background: #ffffff; position: relative; overflow: hidden; }
.mk-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.mk-main-title { text-align: center; font-size: 2.8rem; color: #000000; margin-bottom: 60px; font-weight: 900; }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.mk-card { 
    background: #ffffff; padding: 45px; border-radius: 24px;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}
.mk-card:hover { transform: translateY(-12px); background: #2563eb; box-shadow: 0 30px 60px -10px rgba(37, 99, 235, 0.3); }
.mk-card h3 { color: #000000; font-weight: 900; font-size: 1.6rem; margin: 15px 0; transition: 0.3s; }
.mk-card p { color: #475569; font-weight: 500; transition: 0.3s; }
.mk-icon { font-size: 4rem; margin-bottom: 20px; transition: 0.3s; }

.mk-card:hover h3, .mk-card:hover p { color: #ffffff !important; }
.mk-card:hover .mk-icon { color: #fbbf24; transform: scale(1.1); }

.mk-rain-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; }
.mk-particle { position: absolute; font-size: 2rem; color: #3b82f6; opacity: 0.3; animation: rain-fall linear infinite; }
@keyframes rain-fall { 0% { transform: translateY(-100px); } 100% { transform: translateY(100vh); } }

.mk-p1 { left: 5%; animation-duration: 8s; } .mk-p2 { left: 15%; animation-duration: 12s; }
.mk-p3 { left: 25%; animation-duration: 10s; } .mk-p4 { left: 35%; animation-duration: 15s; }
.mk-p5 { left: 45%; animation-duration: 9s; } .mk-p6 { left: 55%; animation-duration: 11s; }
.mk-p7 { left: 65%; animation-duration: 14s; } .mk-p8 { left: 75%; animation-duration: 7s; }
.mk-p9 { left: 85%; animation-duration: 13s; } .mk-p10 { left: 95%; animation-duration: 10s; }

@media (max-width: 992px) { .mk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mk-grid { grid-template-columns: 1fr; } }

/* --- SECCIÓN PORTAFOLIO- FYKER------------------------ */
.mk-portfolio-flyers { position: relative; padding: 30px 0; background: #f8f9fa; overflow: hidden; }
.mk-portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; z-index: 1; position: relative;  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05); }

@media (max-width: 992px) { .mk-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }

.mk-p-item { background: #fff; box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
transition: 0.3s; }
.mk-p-item img { width: 100%; aspect-ratio: 1/1; object-fit: contain; padding: 10px; display: block; }

.mk-p-info { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: #0056b3; color: #fff; transition: 0.3s; }
.mk-p-item:hover .mk-p-info { background: #fff; color: #0056b3; border: 1px solid #0056b3; }

/* Partículas */
.mk-rain-container { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.mk-particle { position: absolute; color: #0056b3; opacity: 0.2; font-size: 20px; animation: rain-fall 10s linear infinite; }
@keyframes rain-fall { 0% { transform: translateY(-50px); } 100% { transform: translateY(100vh); } }
.mk-p1 { left: 5%; animation-duration: 7s; } .mk-p2 { left: 15%; animation-duration: 12s; }
.mk-p3 { left: 25%; animation-duration: 9s; } .mk-p4 { left: 35%; animation-duration: 15s; }
.mk-p5 { left: 45%; animation-duration: 8s; } .mk-p6 { left: 55%; animation-duration: 11s; }
.mk-p7 { left: 65%; animation-duration: 14s; } .mk-p8 { left: 75%; animation-duration: 6s; }
.mk-p9 { left: 85%; animation-duration: 13s; } .mk-p10 { left: 95%; animation-duration: 10s; }
.mk-p11 { left: 10%; animation-duration: 18s; } .mk-p12 { left: 90%; animation-duration: 9s; }
/* Esto obliga al modal de Venobox a ajustarse a la pantalla, 
   sin importar qué tan grande sea el archivo original */
.vbox-overlay .vbox-content {
    max-height: 90vh !important;
    max-width: 90vw !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vbox-content img {
    max-height: 85vh !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);

 
}
/* --- SECCIÓN PORTAFOLIO-------PORTADAS------------------ */
/* Contenedor con tu fondo degradado y espaciado */
.mk-portafolio-portadas {
    background: linear-gradient(135deg, #004aad 0%, #050a14 100%);
    padding: 20px 0;
    position: relative;
    overflow: hidden; /* Para que las partículas no se salgan */
}

/* Partículas integradas */
.mk-portafolio-portadas-rain {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
}
.mk-portafolio-portadas-particle {
    position: absolute; color: #fff; opacity: 0.2; font-size: 20px; animation: mk-portafolio-portadas-fall 10s linear infinite;
}
@keyframes mk-portafolio-portadas-fall {
    0% { transform: translateY(-50px); } 100% { transform: translateY(100vh); }
}

/* Grid 4 columnas */
.mk-portafolio-portadas-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    position: relative;
    z-index: 1;

}

/* Item */
.mk-portafolio-portadas-item { background: #fff; transition: 0.3s;  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
 }

.mk-portafolio-portadas-item img { width: 100%; height: auto; display: block; }

/* Botón Blanco / Letra Negra */
.mk-portafolio-portadas-info { 
    padding: 15px; 
    background: #ffffff; 
    color: #000000; 
    display: flex; 
    justify-content: space-between; 
    font-weight: bold;
}

/* HOVER AMARILLO */
.mk-portafolio-portadas-item:hover .mk-portafolio-portadas-info { 
    background: #FFD700; /* Color Amarillo */
    color: #000000; 
}
@media (max-width: 992px) {
    .mk-portafolio-portadas-grid { grid-template-columns: repeat(2, 1fr); }
}

/* RESPONSIVE: Móviles */
@media (max-width: 600px) {
    .mk-portafolio-portadas-grid { grid-template-columns: 1fr; }
}

/* Item, Imagen y Botón */
.mk-portafolio-portadas-item { background: #fff; transition: 0.3s; }
.mk-portafolio-portadas-item img { width: 100%; height: auto; display: block; }

.mk-portafolio-portadas-info { 
    padding: 15px; 
    background: #ffffff; 
    color: #000000; 
    display: flex; 
    justify-content: space-between; 
    font-weight: bold;
}

/* HOVER AMARILLO */
.mk-portafolio-portadas-item:hover .mk-portafolio-portadas-info { 
    background: #FFD700; 
    color: #000000; 
}
/* --- SECCIÓN PORTAFOLIO-------CATALOGOS------------------ */
.mk-catalogo-portafolio {
    background: linear-gradient(135deg, #004aad 0%, #050a14 100%);
    padding: 20px 0;
    position: relative;
    overflow: hidden;
}

/* Partículas bajo nomenclatura mk-catalogo-portafolio */
.mk-catalogo-portafolio-rain { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.mk-catalogo-portafolio-particle { 
    position: absolute; color: #fff; opacity: 0.3; font-size: 20px; animation: mk-catalogo-portafolio-fall 10s linear infinite; 
}
@keyframes mk-catalogo-portafolio-fall { 0% { transform: translateY(-50px); } 100% { transform: translateY(100vh); } }

.mk-catalogo-portafolio-p1 { top: 10%; left: 10%; }
.mk-catalogo-portafolio-p2 { top: 20%; left: 40%; }
.mk-catalogo-portafolio-p3 { top: 40%; left: 70%; }
.mk-catalogo-portafolio-p4 { top: 60%; left: 90%; }

/* Grid 4x1 */
.mk-catalogo-portafolio-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    position: relative; 
    z-index: 1;

}

.mk-catalogo-portafolio-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
 }
.mk-catalogo-portafolio-info { 
    padding: 15px; background: #ffffff; color: #000000; font-weight: bold; display: flex; justify-content: space-between; 
}

/* Hover Amarillo */
.mk-catalogo-portafolio-item:hover .mk-catalogo-portafolio-info { background: #FFD700; color: #000000; }

/* Responsive */
@media (max-width: 992px) { .mk-catalogo-portafolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mk-catalogo-portafolio-grid { grid-template-columns: 1fr; } }

/* --- clientes------------------ */
.mk-clientes-portafolio {
    padding: 30px 0;
       background: #EDEDED; /* Fondo limpio para que resalten los logos */
}

.mk-clientes-portafolio-title {
    font-size: 24px;
    margin-bottom: 40px;
    color: #004aad;
    font-weight: bold;
}

.mk-clientes-portafolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas para escritorio */
    gap: 30px;
    align-items: center;
}

.mk-clientes-portafolio-grid img {
    width: 100%;
    max-width: 150px; /* Tamaño controlado */
    margin: 0 auto;
    filter: grayscale(100%); /* Estilo corporativo */
    transition: 0.3s;
}

.mk-clientes-portafolio-grid img:hover {
    filter: grayscale(0%); /* Se vuelve a color al pasar el mouse */
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 992px) { .mk-clientes-portafolio-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .mk-clientes-portafolio-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }


/* --- clientes-----MK------------- */
.clientes-mk-pu-section { position: relative; overflow: hidden; padding: 20px 0; }
.clientes-mk-pu-title { color: var(--azul-stark) !important;
   font-family: 'Raleway', sans-serif; 
    font-weight: 900;
    font-size: 35px;
    letter-spacing: 1px;
text-align: center;
 }

.clientes-mk-pu-wrapper { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; padding: 20px; margin: 0 auto;
    position: relative; /* Contexto para partículas */
}

@media (max-width: 768px) {
    .clientes-mk-pu-wrapper { grid-template-columns: repeat(2, 1fr); padding: 20px; }
.clientes-mk-pu-title { margin-bottom: 10px; font-size: 2.0rem; margin: 0; line-height: 1.2;  padding-left: 15px; padding-right: 15px;  margin-top: 1px; text-align: center;}
}

.clientes-mk-pu-logo { 
    background: #fff; 
    padding: 15px; /* Padding reducido para mejor control */
    border-radius: 12px;
    animation: clientes-mk-pu-flotar 4s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clientes-mk-pu-logo img { 
    width: 100%; 
    max-width: 160px; /* AQUÍ ESTÁ EL AJUSTE: tamaño controlado */
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Efecto al pasar el mouse (se agranda suavemente) */
.clientes-mk-pu-logo:hover img { 
    transform: scale(1.1); 
}



/* Partículas visibles y activas */
.clientes-mk-pu-particula { 
    position: absolute; width: 8px; height: 8px; 
    background: #004aad; /* Color azul */
    border-radius: 50%; opacity: 0.5;
    pointer-events: none; /* No interfieren con el click */
    animation: clientes-mk-pu-particula-move 6s linear infinite;
}

@keyframes clientes-mk-pu-flotar {
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-15px); }
}

@keyframes clientes-mk-pu-particula-move {
    0% { transform: translateY(0) scale(0); } 
    50% { opacity: 0.8; transform: translateY(-50px) scale(1.5); }
    100% { transform: translateY(-100px) scale(0); opacity: 0; }
}


/* ================================================= */
/*    SISTEMAS                                       */
/* ================================================= */
.software-portada {
    position: relative;
    padding: 80px 40px; /* Reduje el padding para que no sea tan alta */
    background: #00122e;
    color: #fff;
    text-align: center;
    overflow: hidden;
    min-height: 400px; /* Ajusté el alto mínimo */
    display: flex;
    align-items: center;
    justify-content: center;
}

#particles-circulo-js {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;
}

.software-portada-contenido { 
    z-index: 2; 
    position: relative; 
    width: 100%; 
    max-width: 900px; /* Limitamos el ancho para que el texto no se estire demasiado */
}

#software-texto-dinamico {
    padding-top: 90px;
    margin: 20px 0;
    transition: opacity 0.5s ease-in-out;
    color: #fff !important; 
    font-size: 5.4rem; 
    font-weight: 800;  
    font-family: 'Raleway', sans-serif;  
    text-shadow: 5px 3px 12px black;
    line-height: 1.1; /* Ajuste para que las líneas no se peguen */
}

.software-btn-principal {
    background: #ffc107; color: #000; padding: 18px 40px;
    font-weight: 800; border-radius: 12px; text-decoration: none;
    display: inline-block; cursor: pointer;
    margin-top: 20px;
}

/* RESPONSIVE PARA MÓVILES */
@media (max-width: 768px) {
    .software-portada {
        padding: 40px 15px;
        min-height: 300px; /* Más pequeña en móvil */
    }
    
    #software-texto-dinamico {
        font-size: 2.4rem; /* Texto más chico para que no se desborde */
        padding-top: 70px;
    }
    
    .software-btn-principal {
        padding: 14px 30px;
        font-size: 0.9rem;
    }
}

/* --- SERVICIOS SISTEMAS------------------ */

.software-servicios {
  margin-top: 20px;

}

/* Estilos aplicados según referencia */
.software-card {
    background: #fff;
    padding: 30px;
    border-radius: 8px; /* Borde más cuadrado como el ejemplo */
    border: 1px solid #e1e1e1;
    /* Sombra sutil específica */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    transition: all 0.4s ease;
margin-top: 4px;
}

.header-tarjeta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* Icono: tamaño y color del ejemplo */
.header-tarjeta i { font-size: 2.5rem; color: #003366; } 

/* Título: Color y peso del ejemplo */
.header-tarjeta h3 { 
    color: #003366; 
    font-size: 2.5rem; 
    font-weight: 800; 
    margin: 0; 
}

/* Párrafo: Color gris suave del ejemplo */
.software-card p { 
    color: black; 
    font-size: 1.5rem; 
    line-height: 1.5; 
    margin-bottom: 20px; 
text-align: justify;
}

/* Botón: Azul base, naranja hover */
.btn-servicio {
    display: inline-block;
    padding: 10px 20px;
    background: #003366;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
}

/* Efecto Hover */
.software-card:hover {
    background: #003366;
    border-color: #003366;
}
.software-card:hover h3, 
.software-card:hover p, 
.software-card:hover i { color: #ffffff !important; }

.software-card:hover .btn-servicio {
    background: #f39c12; /* Naranja en hover */
    color: #fff;
}

/* Grid layout */
.software-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 40px auto;
margin-top: 10px;
}

/* --- AJUSTES RESPONSIVE PARA EL GRID --- */

/* Para tablets (hasta 1024px de ancho) */
@media (max-width: 1024px) {
    .software-grid {
        grid-template-columns: repeat(2, 1fr); /* Pasa a 2 columnas */
        gap: 20px;
        padding: 0 20px;
    }
}

/* Para móviles (hasta 600px de ancho) */
@media (max-width: 600px) {
    .software-grid {
        grid-template-columns: 1fr; /* Una sola columna: todo apilado */
    }
    
    .software-card {
        padding: 20px; /* Menos padding en celular para aprovechar espacio */
padding-top: 10px;
    }
    
    .header-tarjeta h3 {
        font-size: 1.9rem; /* Ajuste de título para que no se vea gigante */
    }
}


/* --- SAP --- */

.ul-li {
    margin-bottom: 10px;
    color: #cccccc;
    font-size: 0.95em;
    padding-left: 20px;
    position: relative;
 text-align: justify;
}

.ul-li::before {
    content: "•";
    color: #007bff;
    position: absolute;
    left: 0;
 text-align: justify;
}

.btn-sap-final {
    display: block;
    width: 250px;
    margin: 50px auto 0;
    padding: 18px;
    background-color: #0056b3;
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;

}

.btn-sap-final:hover {
    color: black;
  background: #facc15;
}

/* --- productos --- */
.prod-software-giant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.prod-software-block {
    position: relative;
    padding: 30px;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #e9ecef;
padding-bottom: 40px;
}

.color-white { background: #ffffff; }
.color-gray { background: #f8f9fa; }

.prod-software-eyebrow {

    color: black;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.5rem;
    border-bottom: 2px solid #000;
    display: inline-block;
    margin-bottom: 3px;
}

.prod-software-title {
    font-size: 2.6rem;
    margin: 10px 0;
color: #003580 !important; /* Azul Profundo Corporativo */
    font-weight: 900;
}

.prod-software-features {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.prod-software-features li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
    color: black;
}

.prod-software-features li::before {
    content: "•";
    color: #004a99;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.prod-software-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #004a99;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}
.prod-software-btn:hover {
    display: inline-block;
    padding: 12px 24px;
    background: #004a99;
    color: yellow;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

.prod-software-visual {
    position: absolute;
    right: 30px;
    bottom: 30px;
    opacity: 0.08;
}

.prod-software-visual i { font-size: 180px !important; color: #004a99; }

@media (max-width: 768px) {
    .prod-software-giant-grid { grid-template-columns: 1fr; }
}
/* ================================================= */
/* PRODUCTO                                          */
/* ================================================= */

.software-licencias-contenedor { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.software-licencias-card { padding: 20px; }

/* Colores */
.software-licencias-color-1 { background-color: #ffffff; }
.software-licencias-color-2 { background-color: #f5f5f5; }

/* Alineación Superior */
.software-licencias-flex { display: flex; gap: 20px; align-items: flex-start; }

.software-licencias-titulo {font-size: 3.8rem; margin: 0 0 10px 0; color: var(--azul-stark) !important; font-family: bold, sans-serif; 
    font-weight: 900; text-align: center;}
.software-licencias-total {font-size: 2.0rem; margin: 0 0 10px 0; color: var(--azul-stark) !important; font-family: bold, sans-serif; 
    font-weight: 900; padding-top: 10px }
.software-licencias-img { width: 56%; }
.software-licencias-img img { width: 100%; height: auto; }
.software-licencias-info { width: 60%; }

.precio-num { color: #d35400; font-size: 2.9rem; font-weight: bold; }
.software-licencias-desc-titulo { background: #000; color: #fff; padding: 5px; font-weight: bold; margin: 10px 0; }
.software-licencias-lista { list-style: none; padding: 0; }
.software-licencias-lista li::before { content: "✓"; color: var(--azul-stark); font-weight: bold; margin-right: 8px; }
.software-licencias-btn { background: #003399; color: white; border: none; padding: 10px; width: 100%; margin-top: 10px; cursor: pointer; box-shadow: 0 0 30px #00d4ff; }

@media (max-width: 992px) {
    .software-licencias-contenedor { 
        grid-template-columns: 1fr; 
    }
}

/* Móvil (hasta 600px): Todo apilado */
@media (max-width: 600px) {
    .software-licencias-flex { 
        flex-direction: column; 
    }
    .software-licencias-img, .software-licencias-info { 
        width: 100% !important; 
    }
}


/* --- PORTADA --- */
.software-licencias-hero {
    /* Degradado azul (arriba) a negro (abajo) */
    background: linear-gradient(180deg, #001f3f 0%, #000000 100%);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.software-licencias-title {
padding-top: 80px;
    font-size: 4rem;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 20px;
    /* Efecto de sombra brillante */
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.3);
}

.software-licencias-glow {
    color: #00d4ff; /* Azul neón */
    text-shadow: 0 0 15px #00d4ff, 0 0 30px #00d4ff;
}

.software-licencias-subtitle {
    font-size: 1.5rem;
    color: #cccccc;
    margin-bottom: 40px;
}