@font-face {
	font-family: Lato-Light;
	src: url('fonts/Lato-Light.ttf');
}

@font-face {
	font-family: Lato-Bold;
	src: url('fonts/Lato-Bold.ttf');
}

@font-face {
	font-family: Lato-Regular;
	src: url('fonts/Lato-Regular.ttf');
}

body{
	font-family: Lato-Regular;
	font-size: 16px;
	margin: 0 0 0 0;
	padding:0 0 0 0;
}

p{
	font-family: Lato-Regular;
	font-size:1.2em;
}

h1{
	font-family: Lato-Bold;
	font-size: 3em;
	color: #0068AC;
}

h2{
	font-family: Lato-Bold;
	font-size: 2.7em;
	color: #0068AC;
}

h3{
	font-family: Lato-Bold;
	font-size: 1.5em;
}

.fondo-azul{
	background-color: #0068AC;
	padding: 10px 10px;
	font-family: Lato-Regular;
}

.fondo-azul h3{
  font-size: clamp(24px, 2.5vw, 30px);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 35px;
}

.fondo-azul p{
  max-width: 880px;
  margin: 0 auto 25px auto;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  color: #ffffff;
}

.fondo-azul a{
	font-family: Lato-Regular;
	color: #ffffff;
}

.fondo-azul .titulo {
	font-weight: bold;
	font-size: 1.4em;
	margin: 20px 0px;
}

.fondo-azul h2{
	font-family: Lato-Bold;
	font-size: 2em;
	color: #ffffff;
	text-align: center;
}

.fondo-azul ul li{
	color: #ffffff;
	font-size: 1.2em;
}

.fondo-negro{
	background-color: #121D22;
	padding: 10px 10px;
	font-family: Lato-Regular;
}

.fondo-negro p{
	font-family: Lato-Regular;
  font-size: clamp(14px, 1.5vw, 20px);
	margin: 10px 0px;
	color: #DDE6EB;
  line-height: 1.3;
}

.fondo-negro li{
  line-height: 1;
  margin: 0 0;
  padding: 0 0;
}

.fondo-negro a{
	font-family: Lato-Regular;
	color: #DDE6EB;
}

.fondo-negro .titulo {
	font-weight: bold;
	font-size: 1.4em;
	color: #DDE6EB;
	margin: 20px 0px;
}

.fondo-negro h2{
	font-family: Lato-Bold;
	font-size: 2em;
	color: #DDE6EB;
	text-align: center;
}

.fondo-azul-claro{
	background-color: #DDE6EB;
	padding: 10px 10px;
	font-family: Lato-Regular;
}

.fondo-azul-claro p{
	font-family: Lato-Regular;
	color: #121D22;
	margin-top:10px;

}

.fondo-blanco{
	background-color: #ffffff;
	padding: 10px 10px;
	font-family: Lato-Regular;
}

.fondo-blanco p{
  max-width: 880px;
  margin: 0 auto 25px auto;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.7;
  color: #3a4a5a;;
}

.fondo-blanco .titulo {
	font-weight: bold;
	font-size: 1.4em;
	margin: 20px 0px;
}

.fondo-blanco h2{
	font-family: Lato-Bold;
	font-size: 2em;
	color: #0068AC;
	text-align: center;
}

.fondo-blanco ul li{
	color: #ffffff;
	
}

.fondo-blanco a:hover, .fondo-blanco a:active,  .fondo-blanco a:link{
	color: #0068AC;
}

.fondo-verde{
	background-color: #20A8A8;
	padding: 50px 50px 80px;
	color: #082b53;
	font-family: Lato-Regular;
}

.fondo-verde p{
	font-family: Lato-Regular;
	color: #ffffff;
}

.fondo-verde li{
	font-family: Lato-Regular;
	color: #ffffff;
	font-weight: bold;
	font-size:1.3em;
}

.fondo-verde .titulo {
	font-weight: bold;
	font-size: 1.4em;
	margin: 20px 0px;
	text-align:left;
}

.fondo-web-socios{
	background: url('img/websocios.jpg') no-repeat fixed center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 110%;
   width: 110% ;
   text-align: center;	padding: 50px 50px 80px;
}

.fondo-web-andy{
	background: url('img/Portada.png') no-repeat fixed center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 100%;
   width: 100% ;
   text-align: center;	padding: 50px 50px 80px;
}

.fondo-blanco-transparente{
	padding: 10px 40px 30px;
	float:left;
	position:relative;
	text-align: center;
	background-color:rgba(255,255,255,0.6);
}

.fondo-blanco-transparente p{
	color: #082b53;
}

.fondo-blanco-transparente .titulo {
	font-weight: bold;
	font-size: 1.4em;
	margin-top:20px;
}

  .bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
.pull-right {
     float: right !important;
}

.tw {
        display:inline-block;
        background: url('img/iconotw.png');
		width:40px;
		height:40px;
		margin: 10px 10px;
}
.fb {
        display:inline-block;
        background: url('img/iconofb.png');
		width:40px;
		height:40px;
		margin: 10px 10px;
}
.ln {
        display:inline-block;
        background: url('img/iconoln.png');
		width:40px;
		height:40px;
		margin: 10px 10px;
}

/*portal index pie de página */

.footer-contact {
  display: flex;
  align-items: center;
  gap: 14px;
}

.telefono {
  color: #ffffff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.social-icon {
  color: #0a66c2; /* azul corporativo */
  font-size: 1.1rem;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
  color: #ffffff; /* efecto hover elegante */
  transform: translateY(-2px);
}



.btn-primary {
    color: #FFFFFF;
    background-color: #037D8A;
	border-color: #037D8A;
}

.btn-primary:hover {
    color: #037D8A;
    background-color: #7DC2CA;
	border-color: #7DC2CA;
	transition-duration:0.5s;
}

.negrita{
	font-weight: bold;
}

.sombra {
-webkit-box-shadow: 10px 10px 10px #037D8A;
  -moz-box-shadow: 10px 10px 10px #037D8A;
  filter: shadow(color=#037D8A, direction=135, strength=2);
}


.engrane {
        display:inline-block;
        background: url('img/engrane.png');
		width:100px;
		height:100px;
		margin: 30px 0px 0px 0px;
		text-align:center;
}

.estrella {
        display:inline-block;
        background: url('img/estrella.png');
		width:100px;
		height:100px;
		margin: 30px 0px 0px 0px;
		text-align:center;
}

footer{
	font-size: 0.8em;
	line-height:0.8em;
}

.footerlnk{
	color: #FFFFFF;
	
}

/* Carrusel Testimonial */
.testimonial{
	text-align:center;
	padding:30px 30px 50px;
	margin: 0 15px 100px;
	position: relative;
	margin-top: 40px;
	background-color: #fff;
}

.testimonial:before,
.testimonial:after{
	content:"";
	border-top:40px solid #fff;
	border-right: 125px solid transparent;
	position: absolute;
	bottom: -40px;
	left: 0;
}

.testimonial:after{
	border-right:none;
	border-left: 125px solid transparent;
	left: auto;
	right: 0;
}

.testimonial .description{
	font-size: 16px;
	text-align: justify;
	margin-bottom: 30px;
	opacity: 0.9;
	color: #ffffff;
}

.testimonial .testimonial-content{
	width: 100%;
	position: absolute;
	left:0;
}

.testimonial .pic{
	display: inline-block;
	border: 0px solid #004669;
	/* border-radius: 50%; */
	/* box-shadow: 0 0 2px 2px #f4770b; */
	overflow: hidden;
	z-index: 1;
	position: relative;
}

.testimonial .pic img {
	width: 100%;
	height: auto;
	
}

.testimonial .title{
	font-size: 15px;
	font-weight: bold;
	color: #004669;
	text-transform: capitalize;
	margin: 0 0 5px 0;
	
}

.testimonial .post{
	display: block;
	font-size: 14px;
	color: #004669;
}

.pic img{
	width: 100px !important;
	height: 50px;
}

.owl-theme .owl-controls{
	margin-top: 60px
}

.owl-dots{
	text-align: center;
}
.owl-dot{
	display: inline-block;
	height: 15px !important;
	width: 15px !important;
	background-color: #000000;
	opacity: 0.8;
	border-radius: 50%;
	margin: 50px 50px 0;
}

.feature-box-icon {
	font-size: 2em;
	border-radius: 50px 50px 50px 15px;
  border: 2px solid #0068AC;
  padding: 10px 17px;
  width: 70px;
  height: 70px;	
}

.feature-box-icon:hover {
  font-size: 2em;
  border-radius: 50px 50px 50px 15px;
  border: 2px solid #121D22;
  background: #0068AC;
  padding: 10px 17px;
  width: 70px;
  height: 70px;	
  color: #DDE6EB;
}


video {
    width: 100%;
    max-height: 100%;
}
	/* .TituloVideo { */
	/* font-weight: bold; */
	/* font-size: 2em; */
	/* } */

@media (min-width: 768px) {
	.bd-placeholder-img-lg {
	  font-size: 3.5rem;
	}
  }


@media screen and (max-width: 600px) {
	.TituloVideo p{
		font-size: 1.1rem;
	}
  }

@media screen and (max-width: 768px) {
	.TituloVideo p{
		font-size: 1rem;
	}
  }

@media screen and (min-width: 780px) {
	.TituloVideo p{
		font-size: 2.5rem;
		padding: 70px 0px 0px 0px;
	}
  }
  
  
  
/* Portal de proveedores */

/* Ajuste de nitidez y altura del banner */
.banner-img {
  height: 500px; /* Altura fija para mantener uniformidad */
  object-fit: cover; /* Ajusta la imagen sin deformarla */
  filter: brightness(0.8); /* Oscurece un poco la imagen para que el texto resalte */
}

/* Estilo del texto en el carrusel */
/* .carousel-caption h1 { */
  /* font-size: 3.5rem; */
  /* text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); */
  /* margin-bottom: 20px; */
/* } */

/* .carousel-caption p { */
  /* font-size: 1.7rem; */
  /* text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); */
/* } */

/* Responsivo para celulares */
@media (max-width: 768px) {
	.banner-img {
	height: 300px;
	}
	/* .carousel-caption h1 { */
	/* font-size: 1.4rem; */
	/* } */
	/* .carousel-caption p { */
	  /* font-size: 1.1rem; */
	/* } */
}
/* .carousel-caption.text-end { */
    /* left: auto;         /* Desactiva el margen izquierdo automático */ */
    /* right: 5%;          /* Lo acerca al borde derecho */ */
    /* text-align: right;  /* Alinea las líneas de texto a la derecha */ */
    /* max-width: 600px;   /* Evita que el texto sea demasiado largo y difícil de leer */ */
    /* bottom: 25%;        /* Ajusta la altura vertical si lo deseas más arriba */ */
/* } */

/* /* Opcional: Mejora la visibilidad si el fondo es claro */ */
/* .carousel-caption h1 { */
    /* text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); */
/* } */
/* .carousel-item img { */
  /* width: 100%; */
  /* height: auto; */
  /* object-fit: contain; /* o cover si quieres que rellene */ */
/* } */
/* .carousel-caption { */
  /* top: 45%; */
  /* right: 5%; */
  /* left: auto; */
  /* bottom: auto; */
  /* transform: none; */
/* } */
.texto-azul {
  color: #3a4a5a;
  font-size: clamp(18px, 1.8vw, 24px);
  max-width: 880px;
  margin: 0 auto 25px auto;
  line-height: 1.7;
}
.fondo-proveedores {
  background-image: 
    url('img/factfondo20190329.png'), /* imagen superior */
    url('img/fondoPortal320190329.jpg'); /* imagen de fondo */

  background-repeat: 
    no-repeat,
    no-repeat;

  background-position: 
    right center,   /* imagen flotante */
    center center;  /* fondo */

  background-size: 
    auto 80%,            /* controla la ALTURA */
    cover;          /* fondo completo */

  background-attachment: 
    scroll,
    fixed;

  /*width: 100%;*/
  min-height: 120vh;
  padding:80px 80px;
}


/* 1. EL CONTENEDOR: Es vital que tenga display flex para que la simetría funcione */
.contenedor-transparente {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important; /* Esto obliga a igualar el alto */
    justify-content: center;
    gap: 20px;
    width: 100%;
}

/* 2. LA TARJETA: Quitamos anchos fijos que puedan estorbar y forzamos el alto */
.card-interna-proveedores {
    background: #ffffff;
    color: #3a4a5a;
    flex: 1;                 /* Hace que ambas crezcan igual horizontalmente */
    min-width: 300px;        /* Evita que se compriman demasiado */
    max-width: 420px;
    
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    
    padding: 28px 30px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    
    /* ELIMINAR NEGRITAS Y FIJAR TAMAÑO */
    font-size: clamp(18px, 1.8vw, 24px) !important;
    font-weight: 400 !important; 
}

/* 3. HIJOS: Forzamos que títulos y párrafos pierdan la negrita de Bootstrap */
.card-interna-proveedores h3{
    font-weight: 400 !important; /* Fuerza el texto normal */
	font-size: clamp(24px, 2.5vw, 24px);
    /* font-size: clamp(18px, 1.8vw, 24px) !important; */
    margin-bottom: 15px;
	color: #0b2a4a;
}

.card-interna-proveedores p,
.card-interna-proveedores ul,
.card-interna-proveedores li {
    font-weight: 400 !important; /* Fuerza el texto normal */
    font-size: clamp(18px, 1.8vw, 24px) !important;
    margin-bottom: 15px;
}

/* Ajuste para que el título no sea azul oscuro si lo quieres normal */
.card-interna-proveedores h3 {
    margin-top: 0;
    color: #3a4a5a; 
}
.titulo-seccion-proveedores {
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: bold;
  color: #0b2a4a;
  text-align: center;
  margin-bottom: 35px;
  position: relative;
  z-index: 10;

  /* Fondo blanco tipo caja */
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px 45px;
  border-radius: 50px;
  display: inline-block; /* Esto hace que el fondo se ajuste al texto */
  
  /* Sombra para resaltar */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* NUEVO: Contenedor para forzar el centrado */
.contenedor-titulo {
  display: flex;
  justify-content: center; /* Centra horizontalmente el contenido inline-block */
  width: 100%;
}
@media (max-width: 768px) {
  .titulo-seccion-proveedores {
    font-size: 1.8rem; /* Se hace más pequeño en celulares */
    padding: 10px 20px;
  }
}

.fondo-procesos-adicionales {
  background-color: #DDE6EB;
  padding: 60px 0;
  color: #000;
}

/* AGREGADO: Estilos para los textos y listas dentro de la sección */
.fondo-procesos-adicionales p, 
.fondo-procesos-adicionales ul {
  max-width: 880px;
  margin: 0 auto 25px auto;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.7;
  color: #3a4a5a;
}

/* Imagen responsiva y centrada */
.imagen-placeholder {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imagen-placeholder img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Media Query para pantallas pequeñas */
@media (max-width: 768px) {
  .titulo-seccion-proveedores {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }
  
  .imagen-placeholder {
    width: 90%;
    margin: 30px auto;
  }
}

/* Espacio reservado para imágen de fondo ERP */
.fondo-ERP {
  background-image: url('img/fondoERP.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 55svh;
  display: flex;
}
/* Este contenedor cubre la imagen de fondo ERP */
.contenedor-transparente-ERP {
  width: 100%;
  min-height: 60vh;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 40px;
}
/* CARD centrada */
.card-interna-ERP {
  background: rgba(255, 255, 255, 0.95); /*  translúcida */
  color: #1A1A1A;

  max-width: 860px;   /* más horizontal */
  width: 100%;

  padding: 30px 45px; /* menos alto, más ancho */
  border-radius: 14px;

  text-align: left;
  line-height: 1.7;

  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  
}
.card-interna-ERP p {
  font-size: clamp(18px, 1.8vw, 24px);
  color: #3a4a5a;
}

.card-interna-ERP li{
	list-style: none;    /* Doble seguridad para quitar el punto negro */
    position: relative;
    padding-left: 5px;   /* Ajustado para que no se separe tanto del punto azul */
    margin-bottom: 12px;
    font-size: clamp(18px, 1.8vw, 24px);
    color: #444;
	
}
/* El punto de la lista estilo corporativo */
.card-interna-ERP li::before {
    content: "•";
    color: #0068AC; /* El azul de tu marca */
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
    font-size: 1.5rem;
    vertical-align: middle;
}

@media (max-width: 768px) {
  .card-interna-ERP {
    max-width: 95%;
    padding: 20px;
  }

  .card-interna-ERP ul {
    list-style: none; /* Esto elimina los puntos negros por defecto */
    padding: 0;       /* Opcional: ajusta el espacio izquierdo si es necesario */
    margin: 0;
  }
}

.titulo-ERP {
  color: #0b2a4a;
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 700;
  margin-bottom: 35px;
  text-align: center;
}
.contenedor-transparente-ERP {
  width: 100%;
  min-height: 60vh;

  display: flex;
  flex-direction: column; /* IMPORTANTE */
  justify-content: center;
  align-items: center;

  background: rgba(255, 255, 255, 0.25);
  padding: 40px;
}
@media (max-width: 768px) {
  .titulo-ERP {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }
}

/*Screenshots*/

.owl-carousel .item {
  padding: 10px;
}

.owl-carousel .item img {
  width: 100%;
  height: 220px;          /* altura fija */
  object-fit: cover;      /* recorta sin deformar */
  border-radius: 10px;
}
.owl-carousel .item figure {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.owl-carousel figcaption {
  padding: 12px;
  text-align: center;
  background: rgba(0,0,0,0.6);
}

.owl-carousel figcaption h4 {
  font-size: 14px;
  margin: 0;
  color: #fff;
}
.carousel-wrap {
  margin-top: 40px;
}

.owl-carousel {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .owl-carousel .item img {
    height: 180px;
  }
}

figure {
  position: relative;
}

a.view {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.v-smash-text-large-2x {
  text-align: center;
}

.v-smash-text-large-2x span {
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 700;
  color: #0b2a4a;   /* azul */
  margin-bottom: 35px;
}
.v-smash-text-large-2x::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #0068AC;
  margin: 18px auto 0;
  border-radius: 2px;
}


/* Sección Explota tu Información */
#app {
  background-color: #EAF2F7; /* azul clarito */
  padding: 80px 0;

  display: flex;
  align-items: center;
}
#app .container {
  min-height: 60vh;
  display: flex;
  align-items: center;
}
#app .v-smash-text-large-2x {
  text-align: left;
}

#app .v-smash-text-large-2x span {
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 700;
  color: #0b2a4a;
  margin-bottom: 35px;
}
#app .v-lead {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

#app ul.v-list-v2 li {
  margin-bottom: 10px;
}
#app .phone-image {
  max-width: 115%;
  height: auto;
  display: block;
}
#app .col-sm-6:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  #app {
    padding: 60px 0;
  }

  #app .container {
    min-height: auto;
  }

  #app .v-smash-text-large-2x span {
    font-size: 1.8rem;
    text-align: center;
  }

  #app .col-sm-6 {
    text-align: center;
  }

  #app ul.v-list-v2 {
    text-align: left;
  }
}
/* Quitar puntos de la lista */
#app ul.v-list-v2 {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Alinear icono + texto */
#app ul.v-list-v2 li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

/* Icono */
#app ul.v-list-v2 li i {
  color: #0068AC;
  margin-top: 4px;
  font-size: 14px;
}

/* Contenedor imagen + botones */
.app-image-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Contenedor botones
.app-buttons {
  margin-top: 25px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}*/ 

/* Botón base
.btn-app {
  padding: 12px 26px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
} */

/* Botón principal
.btn-primary {
  background-color: #0068AC;
  color: #fff;
}

.btn-primary:hover {
  background-color: #005a95;
}

/* Botón secundario
.btn-secondary {
  background-color: transparent;
  color: #0068AC;
  border: 2px solid #0068AC;
}

.btn-secondary:hover {
  background-color: #0068AC;
  color: #fff;
}

/*Pagina de SEGURIDAD*/

/* 1. FORZAR AL PADRE (La fila de Bootstrap) */
/* Usamos selectores más específicos para que Bootstrap no nos ignore */
.fondo-SGSI .row.justify-content-center .row.align-items-center {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important; /* ESTO obliga a que las columnas midan lo mismo */
}

/* 2. FORZAR A LAS COLUMNAS */
/* Esto asegura que el "hijo" de la fila (la columna) transmita el alto a la card */
.fondo-SGSI .col-md-6 {
    display: flex;
}

/* 3. TU CLASE CARD-INTERNA */
.card-interna {
    background: #ffffff !important;
    backdrop-filter: none;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    
    /* ESTIRAMIENTO DEFINITIVO */
    width: 100%;
    height: 100% !important; /* Fuerza a la card a llenar toda la columna */
    display: flex !important;
    flex-direction: column;

    max-width: 880px;
    margin: 0 auto;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.7;
    color: #3a4a5a;
}

.card-interna li{
	list-style: none;
	position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size:clamp(18px, 1.8vw, 24px);
    color: #444;
}
.card-interna li::before{
	content: "•";
    color: #0068AC; /* El azul de tu marca */
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
    font-size: 1.5rem;
    vertical-align: middle;
}
.card-interna ul{
	list-style: none; /* Esto elimina los puntos negros por defecto */
    padding: 0;       /* Opcional: ajusta el espacio izquierdo si es necesario */
    margin: 0;
}

.sgsi-elementos {
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
}

.sgsi-elementos h2 {
  font-weight: 600;
  margin-bottom: 10px;
}

.descripcion {
  max-width: 800px;
  margin: 0 auto 40px;
  font-size: 18px;
}



/* BLOQUES GENERALES */
.bloque {
  border-radius: 35px;
  padding: 40px;
  margin: 20px auto;
  max-width: 1100px;
}

/* COLORES */
.riesgos {
  background: #D0E5F7;
  color: #fff;
}

.personas {
  background: #0068AC;
  margin-top: 30px;
}

.procesos {
  background: #DDE6EB;
  margin-top: 30px;
}

.bloque h3 {
  text-align: left;
  font-size: clamp(30px, 3.5vw, 44px);
  margin-bottom: 35px;
  color:  #0b2a4a;
}

/* BOTONES / PÍLDORAS */
.botones {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 22px;
}

.pill {
  background: linear-gradient(135deg, #e6f2fb, #f3f9fd);
  color: #000;
  padding: 12px 28px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
  border: 1px solid #dbeafe;
}

/* hover profesional */
.pill:hover {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(59,130,246,0.35);
}


/* TECNOLOGÍA */
.tecnologia {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.pill.grande {
  font-size: 22px;
  padding: 18px 60px;
  font-weight: 600;
}

/* texto final de la pagina de seguridad*/

.seccion-cierre {
  padding: 90px 0;
  background: linear-gradient(
    135deg,
    #e6f2fb 0%,
    #f4f9fd 100%
  );
}

/*Todas las páginas cuentas con un Fon-Size con esta clase para justificar texto, titulo*/
.titulo-cierre {
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 700;
  color: #0b2a4a;
  margin-bottom: 35px;
}

.texto-cierre {
  max-width: 880px;
  margin: 0 auto 25px auto;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  color: #3a4a5a;
}
.titulo-cierre-blanco {
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 35px;
}

.texto-cierre-blanco {
  max-width: 880px;
  margin: 0 auto 25px auto;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.7;
  color: #ffffff;
}

.titulo-cierre::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #0068AC;
  margin: 18px auto 0;
  border-radius: 2px;
}

/*página Desarrollo*/
/* Imagen ajustada para no deformarse */
.banner-hero-img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* Overlay personalizado con nombre único */
.banner-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente que protege el texto en el lado izquierdo */
    background: linear-gradient(to right, rgba(10, 25, 47, 0.9) 0%, rgba(10, 25, 47, 0.4) 60%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

/* Caption personalizado que ignora los estilos de Bootstrap por defecto */
.banner-hero-caption {
    position: absolute;
    right: 15%;
    bottom: 0;
    left: 10%; /* Ajustado para dar más aire al texto */
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: left;
    z-index: 2;
}

/* Estilos de tipografía exclusivos */
.banner-hero-title {
    font-size: clamp(2rem, 5vw, 4rem); /* Tamaño fluido: se ajusta solo */
    line-height: 1.1;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.5);
}

.banner-hero-accent {
    color: #00d4ff; /* Azul cian corporativo */
}

.banner-hero-lead {
    font-size: 1.25rem;
    max-width: 550px;
    opacity: 0.9;
}

.banner-img {
  /* Mantiene la proporción original sin estirar */
  object-fit: contain; 
  
  /* Evita que la imagen se vea borrosa al escalar */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  
  /* Asegura que no se pase del alto de la pantalla si es muy grande */
  max-height: 80vh; 
  width: 100%;
}

/* Si quieres que el fondo del carrusel combine con el banner 
   en caso de que la imagen no cubra todo el ancho */
.carousel-item {
  background-color: #ffffff; /* Ajusta al color de fondo de tu imagen */
}

.grid-mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
  width: 100%;
}

.bloque-texto {
  background-color: #E8EEF7; /* Azul corporativo muy claro */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10% 15%; /* Espaciado generoso para elegancia */
  min-height: 400px;
}

.bloque-texto p {
  color: #3a4a5a;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.7;
  text-align: center;
  margin: 0;
}

.bloque-imagen {
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

/* Imágenes (Links sugeridos abajo) */
.img-coding {
  background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=800&q=80');
}

.img-laptop {
  background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80');
}

/* Responsividad: En celulares se vuelve una sola columna */
@media (max-width: 768px) {
  .grid-mosaico {
    grid-template-columns: 1fr;
  }
  
  /* Reordenar bloques en móvil para que no queden dos imágenes juntas */
  .img-laptop {
    grid-row: 4; 
  }
}

.seccion-talento {
    background-color: #ffffff;
    padding: 0px 0;
}

.texto-principal {
    font-size: 1.2rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 0px;
}

.subtitulo-experiencia {
    font-weight: bold;
    font-size: 1.1rem;
    color: #000;
    margin-bottom: 20px;
}

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

.lista-corporativa li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size:clamp(18px, 1.8vw, 24px);
    color: #444;
}

/* El punto de la lista estilo corporativo */
.lista-corporativa li::before {
    content: "•";
    color: #0068AC; /* El azul de tu marca */
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
    font-size: 1.5rem;
    vertical-align: middle;
}

.contenedor-tecnologias {
    padding: 20px;
}

.img-dashboard {
    max-width: 80%; /* Para que no compita visualmente con el texto */
    margin-top: 20px;
}

.seccion-plataformas {
    /* Imagen de fondo profesional (reemplazar por el link de abajo) */
    background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax elegante */
    position: relative;
}

.overlay-azul {
    /* Capa azul semitransparente */
    background: linear-gradient(135deg, rgba(0, 104, 172, 0.8), rgba(0, 40, 80, 0.8));
    padding: 100px 0;
}

.caja-contenido-blanca {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 60px;
    border-radius: 4px; /* Bordes rectos para un look más serio/corporativo */
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    text-align: center;
}

.texto-plataformas {
    font-size: clamp(18px, 1.8vw, 24px);
    color: #3a4a5a;
    margin-bottom: 50px;
    font-weight: 100;
    line-height: 1.4;
}

.grid-procesos {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas */
    gap: 40px;
}

.proceso-item {
    font-size: 1.25rem;
    color: #121D22;;
    font-weight: 400;
    transition: transform 0.3s ease;
}

.proceso-item:hover {
    transform: translateY(-5px);
    color: #004a7c;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .grid-procesos {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 20px;
    }
    .caja-contenido-blanca {
        padding: 30px;
    }
}

/*Página Soluciones*/

.texto-corporativo {
    max-width: 880px;
    margin: 0 auto 25px auto;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.7;
    color: #3a4a5a;
}

/* Paleta de Colores Corporativos */
:root {
    --azul-primario: #1a3a5f;
    --azul-claro: #007bff;
    --gris-fondo: #f8f9fa;
}

.titulo-azul {
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 700;
    color: #0b2a4a;
    margin-bottom: 35px;
}

.titulo-azul::after{
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #0068AC;
  margin: 18px auto 0;
  border-radius: 2px;
}

.bg-azul-oscuro {
    background-color: var(--azul-primario);
}

/* Estilo de Lista Profesional */
.lista-checks {
    list-style: none;
    padding-left: 0;
}

.lista-checks li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
	font-size:clamp(18px, 1.8vw, 24px);
    color: #444;
}

.lista-checks li::before {
    content: "•";
    color: #0068AC; /* El azul de tu marca */
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
    font-size: 1.5rem;
    vertical-align: middle;
}

/* Ajustes de Imagen */
.img-fluid {
    transition: transform 0.3s ease;
}

.img-fluid:hover {
    transform: translateY(-5px);
}

.opacidad-8 {
    opacity: 0.85;
}

.contenedor-panal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Espacio entre los hexágonos */
    padding: 20px;
}

.hex {
    width: 150px; /* Ajusta el tamaño según necesites */
    height: 170px;
    object-fit: cover;
    /* Crea la forma de hexágono */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: brightness(0.9);
}

.hex:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
    z-index: 10;
}

/* Posicionamiento para que parezca panal */
.hex:nth-child(2) {
    margin-top: 40px; /* Desplaza el segundo hexágono hacia abajo */
}

@media (max-width: 768px) {
    .hex {
        width: 120px;
        height: 140px;
    }
}

/* Colores Corporativos */
.text-navy { color: #1a2b48; }
.bg-navy { background-color: #1a2b48; }

/* Estilo de Listas */
.corp-list li, .corp-list-small li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: #4a5568;
}

.corp-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #007bff;
    font-weight: bold;
}

.corp-list-small li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #007bff;
    font-size: 1.5rem;
    line-height: 1;
}

/* Efectos de Imagen */
.image-stack img {
    border-left: 5px solid #007bff;
    transition: transform 0.3s ease;
}

.image-stack img:hover {
    transform: translateY(-5px);
}

/* Botones */
.btn-outline-light:hover {
    background-color: #ffffff;
    color: #1a2b48;
}

.btn.btn-azul-redondo {
    background-color: #1e88e5;   /* azul fuerte */
    color: #ffffff;
    border-radius: 50px;
    padding: 14px 36px;
    border: none;
    font-weight: 500;
}

.btn.btn-azul-redondo:hover,
.btn.btn-azul-redondo:focus {
    background-color: #1565c0;   /* azul más oscuro */
    color: #ffffff;
}

.btn-azul-redondo {
    background-color: #1e88e5 !important;
}




/*portal Fe*/

.card-corporativa {
    /* Un degradado lineal profesional */
    background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
    color: #ffffff !important; /* Texto blanco */
    border-radius: 15px; /* Bordes suavizados */
    transition: transform 0.3s ease;
}

.texto-cierre-fa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	background-color: #eaf4ff;
}

.texto-cierre-fa p {
  max-width: 880px;
  margin: 0 auto 25px auto;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.7;
  color: #3a4a5a;
	
}

.imagen-cierre-fa {
    margin-top: 30px;     /* espacio entre texto e imagen */
    width: 100%;
    max-width: 600px;     /* controla el tamaño máximo */
    min-height: 200px;    /* reserva espacio aunque no haya imagen */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* opcional si usas img */
.imagen-cierre-fa img {
    max-width: 100%;
    height: auto;
}

.cfdi-section {
  background-color: #F5F7FA;
  padding: 80px 20px;
}

.container {
  max-width: 1100px;
  margin: auto;
  text-align: center;
}

.cfdi-section h1 {
  font-size: 2.2rem;
  color: #0D3B66;
  margin-bottom: 24px;
}

.description {
  font-size: clamp(18px, 1.8vw, 24px);
  color: #3a4a5a;
  max-width: 880px;
  margin: 0 auto 16px;
  line-height: 1.7;
}

.image-container {
  margin-top: 50px;
}

.image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}