@charset "utf-8";
/* CSS Document */



        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body, html {
            font-family: Arial, sans-serif;
            height: 100%;
            display: flex;
            flex-direction: column;
			}

a:link {
    color: white;
    text-decoration: none;
}

/* Estilo para enlaces visitados */
a:visited {
    color: #e9e6e6;
    text-decoration: underline;
}

/* Estilo para enlaces activos (al hacer clic) */
a:active {
    color: #b8b4b4;
    text-decoration: none;
}

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


a.texto-gris {
  color: #494949;
}




        /* Banner */
        header {
            background-color: #fff;
            padding: 3px;
            text-align: left;
            font-size: 24px;
            font-weight: bold;
        }

        /* Menú de navegación */
  .menu-toggle {
    display: none;
}

nav {
    background-color: #002762;
    color: white;
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

nav ul li {
    position: relative;
    padding: 15px 20px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover: cambia el color de fondo y texto */
nav ul li:hover {
    background-color: #0050b5;
    color: #fff;
}

/* Active: cambia el estilo al hacer clic */
nav ul li:active {
    background-color: #001844;
    color: #f0f0f0;
    transform: scale(0.95); /* Efecto de clic visual */
    transition: transform 0.1s ease;
}

/* Estilo para la sección activa */
nav ul li.active {
    background-color: #779afa; /* Color distintivo para el ítem activo */
    color: #fff;
}

.active{
	 background-color: #779afa; /* Color distintivo para el ítem activo */
	
}


nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #444;
    list-style: none;
    padding: 10px 0;
    width: 150px;
}

/* Muestra el submenú al pasar el ratón */
nav ul li:hover ul {
    display: block;
}

/* Estilo para los ítems del submenú */
nav ul li ul li {
    padding: 10px 15px;
    background-color: #444;
    color: white;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover y Active para los submenús */
nav ul li ul li:hover {
    background-color: #555;
    color: #fff;
}

nav ul li ul li:active {
    background-color: #333;
    color: #e0e0e0;
    transform: scale(0.95);
    transition: transform 0.1s ease;
}






        /* Menú alineado a la izquierda */
        .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
			
        }

        .menu-items {
            display: flex;
			
			
        }

        /* Menú responsive */
        .menu-toggle-label {
            display: none;
            padding: 15px;
            background-color: #333;
            color: white;
            text-align: center;
            cursor: pointer;
        }

        .menu-toggle:checked + .menu-toggle-label + nav ul {
            display: flex;
            flex-direction: column;
        }



        @media (max-width: 768px) {
            .menu-items {
                display: none;
                flex-direction: column;
                width: 100%;
            }

            .menu-toggle-label {
                display: block;
            }
        }

        /* Contenido central */
        .content {
            flex: 1;
            display: flex;
            padding: 20px;
            gap: 20px;
        }

        .column {
            padding: 20px;
            background-color: #f8fbfd;
            border-radius: 5px;
			padding-top: 50PX;
        }

        .column-40 {
            width: 30%;
        }

        .column-60 {
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .icon-container {
            display: flex;
            justify-content: space-around;
            width: 100%;
            margin-bottom: 30px;
        }

 		.icon-container_bop {
            display: flex;
            justify-content: space-around;
            width: 100%;
			margin-top: 200px;
            margin-bottom: 30px;
        }

        .icon {
            width: 22%;
            height: auto;
            background-color: #fff;
            border-radius: 5px;
            text-align: center;
            line-height: 30px;
            font-size: 18px;
            cursor: pointer;
        }
		
		.icon_bop {
            width: 94%;
            height: 355px;
            background-color: #010626;
            border-radius: 8px;
            text-align: center;
            line-height: 80px;
            font-size: 18px;
            cursor: pointer;
        }
		
		

        /* Footer */
        footer {
            background-color: #20315f;
            color: white;
            height: 300px;
            display: flex;
            padding: 20px;
            justify-content: space-between;
        }

        .footer-section {
            width: 23%;
        }

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

            .column-40, .column-60 {
                width: 100%;
            }

            footer {
                flex-direction: column;
                height: auto;
            }

            .footer-section {
                width: 100%;
                margin-bottom: 20px;
            }
        }
		
		
		 .bop {
            width: 154px;
            height: 192px;
            display: flex;
            flex-direction: column;
            border: 2px solid #008acf;
            border-radius: 10px;
            overflow: hidden;
            font-family: Arial, sans-serif;
            text-align: center;
        }

        .icon-bop {
			background-color: #008acf;
            color: white;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
        }
		
		.icon-bop-cambio {
			background-color: #838383;
            color: white;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
        }

 .bop_c {
            width: 154px;
            height: 192px;
            display: flex;
            flex-direction: column;
            border: 2px solid #838383;
            border-radius: 10px;
            overflow: hidden;
            font-family: Arial, sans-serif;
            text-align: center;
        }



        .icon-bottom {
			background-color: white;
            color: #008acf;
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
        }

		 /* Contenedor del banner */
        .banner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            background-color: #FFF;
            padding: 1px 0;
        }

        /* Parte izquierda del banner */
        .banner-left {
            width: 170px;
            background-color: #FFF;
            color: white;
            padding: 2px;
			padding-left: 150px;
            text-align: center;
            font-size: 18px;
        }

        /* Parte derecha del banner */
        .banner-right {
            width: 200px;
            background-color: #FFF;
            padding: 2px;
            text-align: center;
            font-size: 18px;
			padding-right: 300px;
        }

        /* Ajuste responsive */
        @media (max-width: 500px) {
            .banner {
                flex-direction: column;
                align-items: center;
            }

            .banner-left, .banner-right {
                width: 100%;
                padding: 15px;
                font-size: 16px;
            }
        }
		
		  .col {
            width: 870px;
            
            
        }
		
		/*-------------------------------------------------------*/


.accordion {
    width: 100%;
   
}

.accordion-item {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
}

.accordion-header {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    text-align: left;
    background-color: #20315f;
    color: white;
    border-radius: 12px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
	
	
	
	
}

.accordion-header:hover {
    background-color: #1788ca;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: white;
}

.accordion-content p {
    padding: 15px;
    margin: 0;
}
.bop_sombra {

	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
}



/*  social red */



.social-icons {
            
			display:flex;
            gap: 35px;
            justify-content: flex-end; /* Cambiado de center a flex-end */
            align-items: center;
			margin-left: 100px;
        }




        .social-icons a {
            text-decoration: none;
            color: #fff;
            font-size: 20px;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        /* Hover: Cambia el color según la red social */
        .social-icons a:hover {
            transform: scale(1.2);
        }

        .social-icons a.youtube:hover {
            color: #FF0000;
        }

        .social-icons a.instagram:hover {
            color: #E1306C;
        }

        .social-icons a.facebook:hover {
            color: #1877F2;
        }

        .social-icons a.twitter:hover {
            color: #1DA1F2;
        }

        .social-icons a.linkedin:hover {
            color: #0A66C2;
        }






/* Estilos para las columnas */
    .columna {
        box-sizing: border-box; /* Considerar el borde y el relleno en el ancho total de la columna */
        padding: 10px; /* Espaciado interno de las columnas */
        width: calc(20% - 20px); /* Ancho de las columnas (50% para dos columnas, 100% para una columna, 33.33% para tres columnas) */
        margin-bottom: 20px; /* Espacio inferior entre las columnas */
    }
	 
	  .columna1 {
        box-sizing: border-box; /* Considerar el borde y el relleno en el ancho total de la columna */
        padding: 10px; /* Espaciado interno de las columnas */
        width: calc(50% - 20px); /* Ancho de las columnas (50% para dos columnas, 100% para una columna, 33.33% para tres columnas) */
        margin-bottom: 20px; /* Espacio inferior entre las columnas */
    }
	 
	 .columna_bop {
        box-sizing: border-box; /* Considerar el borde y el relleno en el ancho total de la columna */
        padding: 10px; /* Espaciado interno de las columnas */
        width: calc(100% - 20px); /* Ancho de las columnas (50% para dos columnas, 100% para una columna, 33.33% para tres columnas) */
        margin-bottom: 20px; /* Espacio inferior entre las columnas */
    }
		
		
		
	/*-------------------------------------------------*/
		


.caja {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(33.33% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }
    
    
    .cajab {
      background-color: #eefcf7;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(33.33% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }




.caja1 {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(98% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }

.caja1a {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(57% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }


 .caja2 {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(25% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }

.caja3 {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(50% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }


img.izquierda {
  float: left;
 margin: 0px 15px 5px 0px;
	
}



    .row {
      display: flex;
      flex-wrap: wrap;
    }
    @media only screen and (max-width: 768px) {
      .caja {
        width: calc(50% - 20px);
      }
    }
    @media only screen and (max-width: 480px) {
      .caja {
        width: 100%;
      }
    }
		
	
		



.cajabop {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(43% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }


   
    @media only screen and (max-width: 768px) {
      .caja {
        width: calc(50% - 20px);
      }
	.caja3 {
        width: calc(100% - 20px);
      }	
		
		 }
		
   
    @media only screen and (max-width: 480px) {
      .caja {
        width: 100%;
      }
		
	.caja3 {
        width: calc(100% - 20px);
      }		
		
		
    }