@font-face {
    font-family: 'Avenir Roman';
    font-style: normal;
    font-weight: normal;
    src: local('Avenir Roman'), url('../fonts/avenir_roman_12.woff') format('woff');
}

body,h1,h2,h3,h4,h5,h6 {font-family: "Avenir Roman", sans-serif !important;}
p {font-family: "Avenir Roman", sans-serif !important;}
a { 
  text-decoration: none;
}
body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}
html { scroll-behavior: smooth; }
.w3-blue-gradient-kh{
	background:
	url('../images/background-transparent.png') right bottom/contain no-repeat,
    linear-gradient(90deg, rgba(12,190,204,1) 0%, rgba(80,157,249,1) 100%);
	color: white;

}
.w3-border-gradient,.w3-hover-border-gradient:hover{border-color:#0CBECC!important}
.w3-background-kh{
	background-image: url(../images/background-transparent.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}
.w3-blue-kh,.w3-hover-blue-kh:hover{color:#fff!important;background-color:#22355d!important}

.w3-text-blue-kh,.w3-hover-text-blue-kh:hover{color:#22355d!important}


/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}




.bgimg-1{
	background-image: url(../images/background-main.jpg);
	min-height: 100%;
}


.bgimg-3{
	background-image: url(../images/background-footer.jpg);
	min-height: 400px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			transition: transform 1000ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
			transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
			z-index: 9999;
		}

		.hidden {
			transform: translateY(-100%);
		}
		#menu-principal { position: sticky; top: 0; z-index: 1000; width: 100%; display: flex; justify-content: center; align-items: center; padding: 10px 0; }


@media (max-width: 768px){

  .bgimg-1{
    min-height: 100vh;
    padding-top: 120px;
  }

  .w3-display-middle{
    position: relative;
    transform: none;
    top: auto;
    left: auto;
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }

  .w3-display-middle h1{
    font-size: 28px !important;
    line-height: 1.2;
  }

  .w3-display-middle h3{
    font-size: 16px !important;
  }

  .w3-display-middle p{
    font-size: 14px !important;
  }

  .w3-display-middle a{
    display: block;
    width: 100%;
    margin: 12px 0;
  }

}

/* Turn off parallax scrolling for tablets and phones */
@media (max-width: 768px) {
  .bgimg-1{
    background-attachment: scroll;
    min-height: 100vh;
  }
}



.proceso-section{
    background:#fff;
    padding:90px 20px 110px;
    text-align:center;
}

/* TÍTULO */
.proceso-title{
    font-size:30px;
    color:#1e3264;
    position:relative;
    display:inline-block;
    margin-bottom:30px;
}



/* TEXTO */
.proceso-texto{
    max-width:900px;
    margin:0 auto 70px;
   
    color:#6c6c6c;
    line-height:1.3;
}

/* GRID DE PASOS */
.proceso-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    max-width:1000px;
    margin:0 auto;
    gap:40px;
}

/* ITEM */
.proceso-item{
    text-align:center;
}

/* ROMBO */
.proceso-icono{
    display:inline-block;
    width:16px;
    height:16px;
    background:#4a8fe7;
    transform:rotate(45deg);
    margin-bottom:12px;
}

/* TEXTO DEBAJO */
.proceso-item p{
    
    color:#000;
    margin:0;
}

/* RESPONSIVE */
@media(max-width:991px){
    .proceso-grid{
        grid-template-columns:repeat(3,1fr);
        gap:35px;
    }
}

@media(max-width:576px){
    .proceso-grid{
        grid-template-columns:1fr;
    }
}


/* ===== SUBRAYADO GENERAL ===== */
.title-underline{
    position:relative;
    display:inline-block;
}

.title-underline::after{
    content:"";
    display:block;
    width:100px;
    height:4px;
    margin:6px auto 0;
    background:#ffffff; /* 🔥 por defecto BLANCA */
}

/* ===== SUBRAYADO AZUL ===== */
.title-underline.blue::after{
    background:#1bb5e8;
}




.habilidades-section {
    background:
        url('../images/background-transparent.png') right bottom/1000px no-repeat,
        linear-gradient(90deg, rgba(12,190,204,1) 0%, rgba(80,157,249,1) 100%);
    padding: 80px 40px;
    color: #ffffff;
    text-align: center;
}

/* TITULO */
.habilidades-title {
    font-size: 30px;
    color: #1e3264;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    padding-bottom: 0;
}

/* SUBTITULO */
.habilidades-subtitle {
    line-height: 1.45;
    opacity: 0.9;
    margin-bottom: 70px;
}



/* TITULOS INTERNOS (ahora aplican a w3-quarter y w3-half) */
.w3-quarter h5,
.w3-half h5 {
    margin: 12px 0 8px;
    min-height: 38px;
}

/* TEXTOS INTERNOS */
.w3-quarter p,
.w3-half p {
    line-height: 1.45;
    opacity: 0.9;
    max-width: none;
    margin: 0;
}

.w3-quarter i,
.w3-half i {
    margin-top: 25px;
    margin-bottom: 10px;
    display: block;
}



.sectores-section{
    width:100%;
    background:#fff;
    padding:90px 20px 100px;
    text-align:center;
}

.sectores-title{
    font-size:30px;
   
    color:#1e3264;
    position:relative;
    display:inline-block;
    margin-bottom:70px;
}



.sectores-textos{
    max-width:1100px;
    margin:0 auto 80px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:70px;
}

.sectores-textos p{
   
    color:#6c6c6c;
    line-height:1.2;
    margin:0;
}

.sectores-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px; /* espacio entre logos */
    margin-top: 50px;
    flex-wrap: wrap;
}

.sectores-logos img {
    width: 120px; /* ajusta tamaño si quieres */
    height: auto;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    opacity: 0.7;
}

.sectores-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}







/* Responsive */
@media(max-width:991px){
    .sectores-textos{
        grid-template-columns:1fr;
        gap:35px;
    }

    .sectores-title{
        font-size:34px;
    }

    .sectores-logos span{
        font-size:36px;
    }
}


.sectores-logos img{
    width:150px;
    filter: grayscale(100%);
    opacity:.6;
    transition: all .4s ease;
}

.sectores-logos img:hover{
    filter: grayscale(0%);
    opacity:1;
    transform: scale(1.05);
}

.banner-servicios{
    position:relative;
    width:100%;
    height:320px;
   background:url('../images/fondo.jpg') center center / cover no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.banner-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(14,32,70,.85), rgba(14,32,70,.65));
    z-index:1;
}

.banner-contenido{
    position:relative;
    z-index:2;
    text-align:center;
    padding:0 20px;
}

.banner-contenido h2{
    color:#fff;
    font-size:30px;
    font-weight:500;
    letter-spacing:1px;
}

/* Responsive */
@media(max-width:768px){
    .banner-servicios{
        height:240px;
    }

    .banner-contenido h2{
        font-size:26px;
    }
}


.modalidad-section{
    padding:110px 20px 100px;
    background:#fff;
    text-align:center;
}

/* TITULO */
.modalidad-title{
    font-size:30px;
    color:#1e3264;
    margin-bottom:15px;
    position:relative;
    display:inline-block;
}



/* SUBTITULO */
.modalidad-subtitle{
    max-width:none;
    margin:0 auto 55px;
    font-size:16px;
    color:#6c6c6c;
    line-height:1.45;
}


/* GRID */
.modalidad-grid{
    max-width:780px;
    margin:0 auto 70px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:140px;
    row-gap:60px;
    justify-items:start; 
}

/* ITEMS */
.modalidad-item{
    max-width:320px;
    margin:0;           
    text-align:left;
}

.modalidad-item h3{
    font-size:17px;
    font-weight:600;
    margin-bottom:8px;
    color:#000;
  
}

/* TEXTO */
.modalidad-item p{
   
    color:#5f5f5f;
    line-height:1.45;
    margin:0;
}

/* TEXTO MODALIDAD (COMPARTIDO) */
.modalidad-text{
   
    color:#1e3264;
    line-height:1.3;
    max-width:420px;
    margin:0 auto 75px;
}

/* RESPONSIVE */
@media(max-width:991px){
    .modalidad-grid{
        grid-template-columns:1fr;
        row-gap:45px;
        column-gap:0;
    }

    .modalidad-highlight{
        font-size:20px;
    }

    .modalidad-footer{
        font-size:18px;
    }
}

/* ===== METODOLOGIA ===== */
.metodologia-section{
    position:relative;
      padding: 70px 20px 80px;
    color:#fff;
    text-align:center;
    overflow:hidden;

    background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.08) 0%, transparent 40%),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.07) 0%, transparent 45%),
    url('../images/background-transparent.png') right bottom/1000px no-repeat,
    linear-gradient(90deg, rgba(12,190,204,1) 0%, rgba(80,157,249,1) 100%);
}

.metodologia-title{
    font-size:34px;
    color:#002d72;
   margin-bottom: 45px; 
    position:relative;
    display:inline-block;
}



/* CONTENIDO */
.metodologia-contenido{
    width:100%;
    max-width:1400px;
    margin:0 auto 40px;
    display:grid;
    grid-template-columns:420px 1fr;
    align-items:center;
    gap:60px;
}

/* LISTA IZQUIERDA */
.metodologia-fases{
    text-align:left;
    padding-left:40px;
     justify-self:center; 
}

.fase{
    margin:14px 0;
    cursor:pointer;
    opacity:.7;
    transition:all .3s ease;
    padding:10px 14px;
    border-radius:6px;
    position:relative;
}

/* Efecto hover más notorio */
.fase:hover{
    opacity:1;
    background:rgba(255,255,255,0.08);
    transform:translateX(6px);
}

/* Estado activo más claro */
.fase.active{
    opacity:1;
    font-weight:600;
    background:rgba(255,255,255,0.12);
}

/* Línea activa */
.fase.active::after{
    content:"";
    display:block;
    width:120px;
    height:2px;
    background:#fff;
    margin-top:6px;
}

/* Indicador visual tipo flechita */
.fase::before{
    content:"›";
    position:absolute;
    left:-18px;
    opacity:0;
    transition:.3s;
}

.fase:hover::before{
    opacity:1;
    left:-12px;
}

/* TEXTO DERECHO */
.metodologia-descripcion{
    text-align:left;
    max-width:420px;
    margin:0;
    justify-self:start;
}

.metodologia-descripcion p{
    font-size:15px;
    line-height:1.45;
    opacity:.95;
}

/* FOOTER */
.metodologia-footer{
    max-width:600px;
    margin:60px auto 0;
    opacity:.95;
    text-align:center;
     color:#002d72;
}

/* RESPONSIVE */
@media(max-width:768px){
    .metodologia-contenido{
        grid-template-columns:1fr;
        gap:50px;
        text-align:center;
    }

    .metodologia-fases{
        text-align:center;
        padding-left:0;
    }

    .metodologia-descripcion{
        text-align:center;
        justify-self:center;
        margin:0 auto;
    }
}

/* BOTÓN IR ARRIBA */
#btnTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    transition: all 0.3s ease;
}

#btnTop:hover {
    transform: translateY(-4px);
}

/* Flecha */
#btnTop .flecha {
    width: 14px;
    height: 14px;
    border-left: 3px solid #1f355f; /* azul */
    border-bottom: 3px solid #1f355f;
    transform: rotate(135deg);
    margin-top: 5px;
}


/* =========================
   DESKTOP (intocable)
   ========================= */

#menu-principal{
    position:relative;
    z-index:50;
}

.menu-links{
    display:block;
}

.hamburguesa{
    display:none;
}


/* =========================
   MOVIL
   ========================= */
@media (max-width:768px){

    /* Header fijo tipo app */
    #menu-principal{
        background:transparent;
        padding:15px 0;
    }

    /* quitar sistema columnas w3 */
    #menu-principal .w3-third,
    #menu-principal .w3-twothird{
        width:100% !important;
        float:none !important;
        text-align:center;
    }

    
    /* menú overlay */
    #mainmenu .menu-links{
        display:none;
        position:fixed;   /* <- CLAVE: ya no mueve el parallax */
        top:0;
        left:0;
        width:100%;
        height:100dvh;
        background:rgba(0,0,0,0.96);
        padding-top:90px;
        z-index:9998;
    }

    #mainmenu .menu-links.active{
        display:block;
    }

    #mainmenu li{
        display:block;
        width:100%;
    }

    #mainmenu a{
        display:block;
        padding:18px;
        font-size:20px;
        text-align:center;
    }
}


@media (max-width: 768px){

    .habilidades-frase{
        margin-top: 60px !important;
        transform: none !important;
        height: auto !important;
    }

}

/*logo y botón hamburguesa*/
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    position: relative;
    overflow: visible; 
     margin-top:20px;

}

.logo-container img {
    height: 100px;
    width: auto;
    position: relative;
    z-index: 1; 
}

.hamburguesa {
    position: absolute;
    right: 10px;
    top: 25px; 
    font-size: 30px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    z-index: 9999; 
}

/*vista móvil*/

@media (max-width:768px){

    .hamburguesa{
        display:block;
  position: fixed;   
        top: 20px;
        right: 10px;
        z-index: 9999;

    }
    .logo-container{
    width: 100%;
    display: flex;
    flex-direction: column;  
    margin-top: 80px;
}

.logo-container img{
    width: 150px;
    height: auto;
    margin-bottom: 400px;  
}
#menu-principal{
    display: flex;
    flex-direction: column;  
}



}

@media (max-width:768px){

#footer .w3-bar-item{
    display:block;
    width:100%;
    text-align:center;
    margin-bottom:8px;
}

}