/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    color: #fff;
    line-height: 1.6;
    background-color: #f4f4f4;
}

.container {
    width: 60%;
	color: #000;
    margin: 0 auto;
}
.container2 {
    /*width: 60%;*/
	color: #000;
    margin: 0 auto;
}

/* Encabezado */
header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
	background-color: #fff;
}

.imagenbots {
    width: 80%; /* Ajusta el tamaño del logo según tu preferencia */
}
.imagenlazo {
    width: 5%; /* Ajusta el tamaño del logo según tu preferencia */
}

/* Menú de navegación */
nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
}

nav ul li a {
    color: #000;
    text-decoration: none;
    padding: 10px;
}

.btn-inscribete {
    background-color: #ff5722;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    float: right;
    margin-left: 5px;
	width: max-content;
}
.btn-conoce {
     background-color: #ff5722;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem;
	font-weight: bold;
	transition: background-color 0.3s, color 0.3s, transform 0.3s; /* Suaviza los cambios */
    /*transition: background-color 0.3s ease;*/
}
.btn-wrapper {
    display: inline-flex; /* Asegura que el botón y la imagen estén en línea */
    align-items: center; /* Centra verticalmente */
    gap: 10px; /* Espacio entre el botón y la imagen */
}

/* Banner principal */
.hero {
    background: url('images/banner-robotica.jpg') no-repeat center center/cover;
    /*height: 40vh;*/
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
	margin-left: 10px;
}
.hero2 {
    height: 35vh;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero .btn {
    background-color: #ff5722;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem;
}
#barracook{
     display:none;
     position:fixed;
     left:0px;
     right:0px;
     bottom:0px;
     padding:20px;
     width:100%;
     min-height:60px;
     background-color:rgba(0,0,0,.7);
     color:#fff;
     z-index:99999;
}
::after ::before{
    box-sizing:inherit;
}
#politicadepriv{
    margin-left:auto;
     margin-right:auto;
     bottom:0px;
     padding:2px;
     width:800px;
     height:400px;
     min-height:60px;
     background-color:rgba(0,0,0,.7);
     color:#fff;
}

/* Selecciona el enlace con el ID "boton_inicio" */
#boton_menu {
    color: #0; /* Cambia el color del texto */
    background-color: #f; /* Cambia el color de fondo */
    padding: 5px 10px; /* Agrega espacio interno alrededor del texto */
    text-decoration: none; /* Elimina el subrayado predeterminado */
    border-radius: 5px; /* Redondea las esquinas */
    font-size: 20px; /* Tamaño de la fuente */
}

/* Cambia el estilo cuando el usuario pasa el ratón por encima */
#boton_menu:hover {
	background-color: #fff; /* Color para el efecto hover */
	color: #5275bc;/* Color del texto al pasar el ratón */
	
}

/* Cambia el estilo cuando el enlace es presionado (activo) */
#boton_menu:active {
    background-color: #003f7f; /* Color de fondo cuando el enlace es presionado */
    color: #e0e0e0;
}


.menu li a {
    text-decoration: none;
    color: #333;
}

/* Imagen dentro del botón */
.btn-icon {
    width: 60px;
    height: 60px;
    margin-right: 10px; /* Espacio entre imagen y texto */
    transition: transform 0.3s ease, filter 0.3s ease; /* Suaviza el cambio de imagen */
}

/* Cambios al pasar el ratón */
.btn-conoce:hover {
    background-color: #007d8a; /* Fondo del botón al pasar el ratón */
    color: #f0f0f0; /* Color del texto al pasar el ratón */
}

.btn-icon:hover {
	transform: rotate(180deg);
    content: url('../images/dentadas-naranja-azul-logo-tras.png'); /* Nueva imagen al pasar el ratón */
    /* transform: scale(1.1);  Hace que la imagen aumente ligeramente */
}