/* Estilos generales */
body {
    font-family: Courier New, sans-serif;
    /*font-family: Helsinki Narrow - OCR-A BT -Ink Free - Bradley Hand ITC, sans-serif; */
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    /* background-color: #f4f4f4; */
    color: #333;
    padding-top: 85px; /* Ajustar según la altura real del header */
}

/* Estilos del encabezado - Fija el encabezado */
header {
    position: fixed; /* Deja fijo el header */
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0073e6; /* Color del header */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 2.0); /* Sombra bajo la línea del header para que se distinga mejor */
    padding: 15px 20px;
    color: white;
    z-index: 999; /* Asegura que el header quede por encima del contenido */
}


header .logo img {
    height: 50px;
}

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

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #ffcc00; /* color menús al pasar el ratón */
}

/* Para alinear la imagen y el texto en la misma línea */
.logo {
    display: flex; /* Activa el modo flexbox */
    align-items: center; /* Alinea verticalmente */
    gap: 10px; /* Espacio entre la imagen y el texto */
}

.logo img {
    height: 50px; /* Ajusta el tamaño de la imagen según sea necesario */
    width: auto; /* Mantiene la proporción */
}

.logo h3 {
    font-size: 18px; /* Tamaño del texto */
    margin: 0; /* Elimina márgenes innecesarios */
    color: #222; /* Color del texto */
}



/* Estilo del área principal con imagen destacada INICIO */
.hero {
    text-align: center;
    padding: 200px 20px;
    background: url('images/img_header.jpg') no-repeat center center/cover;
    color: whitesmoke;
}

.hero h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.2em;
}

/* Estilo del área principal con imagen destacada Coming soon*/
.h_obras {
    text-align: center;
    padding: 50px 20px;
    background: url('images/IMG_6048.jpg') no-repeat center center/cover;
    color: white;
}

.h_obras h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_obras p {
    font-size: 1.2em;
}


/* Estilo del área principal con imagen destacada PROGRAMACIÓN */
.h_programacion {
    text-align: center;
    padding: 50px 20px;
    background: url('images/Programacion.jpg') no-repeat center center/cover;
    color: white;
}

.h_programacion h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_programacion p {
    font-size: 1.2em;
}

/* Estilo del área principal con imagen destacada SOFTWARE*/
.h_software {
    text-align: center;
    padding: 50px 20px;
    background: url('images/programas-comerciales.jpg') no-repeat center center/cover;
    color: gray;
}

.h_software h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_software p {
    font-size: 1.2em;
}


/* Estilo del área principal con imagen destacada HARDWARE*/
.h_hardware {
    text-align: center;
    padding: 50px 20px;
    background: url('images/hardware2.png') no-repeat center center/cover;
    color: white;
}

.h_hardware h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_hardware p {
    font-size: 1.2em;
}
/* Estilo del área principal con imagen destacada DISEÑO Y WEB*/
.h_web {
    text-align: center;
    padding: 50px 20px;
    background: url('images/Abeja en boca.jpeg') no-repeat center center/cover;
    color: yellowgreen;
}

.h_web h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_web p {
    font-size: 1.2em;
}


/* Estilo del área principal con imagen destacada SOPORTE TÉCNICO*/
.h_soporte {
    text-align: center;
    padding: 50px 20px;
    background: url('images/sat.jpg') no-repeat center center/cover;
    color: whitesmoke;
}

.h_soporte h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_soporte p {
    font-size: 1.2em;
}

/* Estilo del área principal con imagen destacada CPM MANTENIMIENTO*/
.h_cpm {
    text-align: center;
    padding: 50px 20px;
    background: url('images/contrato-mantenimiento.jpg') no-repeat center center/cover;
    color: black;
}

.h_cpm h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_cpm p {
    font-size: 1.2em;
}

/* Estilo del área principal con imagen destacada NETWORKS*/
.h_redes {
    text-align: center;
    padding: 50px 20px;
    background: url('images/infraStructure.bmp') no-repeat center center/cover;
    color: white;
}

.h_redes h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_redes p {
    font-size: 1.2em;
}

/* Estilo del área principal con imagen destacada SISTEMAS*/
.h_sistemas {
    text-align: center;
    padding: 50px 20px;
    background: url('images/Administrador Sistemas.png') no-repeat center center/cover;
    color: white;
}

.h_sistemas h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_sistemas p {
    font-size: 1.2em;
}

/* Estilo del área principal con imagen destacada DISASTER RECOVERY*/
.h_recupera {
    text-align: center;
    padding: 50px 20px;
    background: url('images/recupera1.jpg') no-repeat center center/cover;
    color: white;
}

.h_recupera h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_recupera p {
    font-size: 1.2em;
}


/* Estilo del área principal con imagen destacada VIRTUALIZACIÓN*/
.h_vm {
    text-align: center;
    padding: 50px 20px;
    background: url('images/virtualizacion.jpeg') no-repeat center center/cover;
    color: dimgrey;
}

.h_vm h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_vm p {
    font-size: 1.2em;
}


/* Estilo del área principal con imagen destacada ÁREA DE DESCARGAS*/
.h_descargas {
    text-align: center;
    padding: 50px 20px;
    background: url('images/Descargas.jpg') no-repeat center center/cover;
    color: white;
}

.h_descargas h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.h_descargas p {
    font-size: 1.2em;
}

/* Sección sobre nosotros */
.about {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 0px 25%; /* separación con el bloque inferior */ 
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

/* .about-texto {
    text-align: center;
    padding: 40px 400px;
    background-color: white;
    font-size: 13px;
    color: white;
    background: url('images/Matrix.jpeg') no-repeat center center/cover;
} */

.about-texto {
    text-align: center;
    padding: 40px 25%;
    /*max-width: 1080px; límita el ancho a 1080px */
    margin: 0 auto;
    background-color: white;
    font-size: 13px;
    color: white;
    background: url('images/Imagen MDS 1985.png') no-repeat center center/cover;
}

/* Contenedor Sobre Nosotros */
.contenedor-about {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

.menu-about h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}

/* Sección Comming soon */
.obras {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_obras {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: white;
    font-size: 13px;
    color: whitesmoke;           /* Color de las letras */
    /* background-color: blue;    /* Fondo detrás de las letras */
    background: url('images/fondo_software.jpg') no-repeat center center/cover;
}

/* Contenedor Software */
.contenedor-obras {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-obras h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
} 



/* Sección programación */
.programacion {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

/*.texto_programacion {
    text-align: center;
    padding: 40px 400px;
    background-color: white;
    font-size: 13px;
    color: white;
    background: url('images/Binario.jpg') no-repeat center center/cover;
} */

.texto_programacion {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    /*max-width: 800px; */
    margin: 0 auto;
    background-color: white;
    font-size: 13px;
    color: white;
    background: url('images/Binario.jpg') no-repeat center center/cover;
}

/* Contenedor Programación */
.contenedor-programacion {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-programacion h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}    

/* Sección software */
.software {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_software {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: white;
    font-size: 13px;
    color: whitesmoke;           /* Color de las letras */
    /* background-color: blue;    /* Fondo detrás de las letras */
    background: url('images/fondo_software.jpg') no-repeat center center/cover;
}

/* Contenedor Software */
.contenedor-software {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-software h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}  

/* Sección hardware */
.hardware {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_hardware {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: white;
    font-size: 13px;
    color: whitesmoke;
    background: url('images/Imagen turquesa.jpg') no-repeat center center/cover;
}


/* Contenedor hardware */
.contenedor-hardware {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-hardware h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}  

/* Sección web */
.web {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_web {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: white;
    font-size: 13px;
    color: black;
    background: url('images/Fondo nubes.jpg') no-repeat center center/cover;
}


/* Contenedor web */
.contenedor-web {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-web h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}  


/* Sección soporte técnico */
.soporte {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: darkslateblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_soporte {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: darkslateblue;
    font-size: 13px;
    color: whitesmoke;
    /* background: linear-gradient(to top, yellow 50%, transparent 50%); */
    background: url('images/sat3.jpg') no-repeat center center/cover;
}


/* Contenedor soporte técnico */
.contenedor-soporte {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-soporte h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}  


/* Sección mantenimiento */
.cpm {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_cpm {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: white;
    font-size: 13px;
    color: white;
    background: url('images/Imagen azul.jpg') no-repeat center center/cover;
}


/* Contenedor mantenimiento */
.contenedor-cpm {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-cpm h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}  


/* Sección networks */
.redes {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_redes {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: white;
    font-size: 13px;
    color: black;
    background: url('images/nubes 1.png') no-repeat center center/cover;
}


/* Contenedor networks */
.contenedor-redes {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-redes h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}  


/* Sección sistemas */
.sistemas {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_sistemas {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: white;
    font-size: 13px;
    color: black;
    background: url('images/Fondo nubes.jpg') no-repeat center center/cover;
}


/* Contenedor sistemas */
.contenedor-sistemas {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-sistemas h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}  


/* Sección desaster recovery */
.recupera {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_recupera {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: white;
    font-size: 13px;
    color: black;
    background: url('images/Fondo nubes.jpg') no-repeat center center/cover;
}


/* Contenedor desaster recovery */
.contenedor-recupera {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-recupera h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}  


/* Sección virtualización */
.vm {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_vm {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: white;
    font-size: 13px;
    color: black;
    background: url('images/Fondo nubes.jpg') no-repeat center center/cover;
}


/* Contenedor virtualización */
.contenedor-vm {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-vm h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}  


/* Sección área de descargas */
.descargas {
    text-align: center;
    /*padding: 40px 20px; */
    padding: 40px 25%;
    background-color: white;
    color: midnightblue;
    background: url('images/Imagen blanca.jpg') no-repeat center center/cover;
}

.texto_descargas {
    text-align: center;
    /*padding: 40px 400px; */
    padding: 40px 25%;
    background-color: white;
    font-size: 13px;
    color: black;
    background: url('images/Fondo nubes.jpg') no-repeat center center/cover;
}


/* Contenedor área de descargas */
.contenedor-descargas {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: justify;
}

    .menu-descargas h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 23px;
    color: lightslategray;
}  


/* Sección de servicios */
.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
     /*padding: 40px 20px; */
    padding: 40px 25%;
    text-align: center;
}

.service-item {
    background: white;
    padding: 20px;
    border-radius: 10px; /* Redondeo esquinas marco servicios */
    box-shadow: 0 0 13px rgba(0, 0, 0, 0.2);
}

.service-item img {
    width: 100%;
    border-radius: 10px; /* Redondeo esquinas imágenes servicios */
}

.service-item h3 {
    margin-top: 15px;
    color: #0073e6; /* Color texto título servicios */
}

/* BOTÓN IR PRINCIPIO PÁGINA -  DE MOMENTO NO FUNCIONA*/
/* Botón fijo en la esquina inferior derecha */
#btn-subir {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 24px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999;
}

/* Mostrar el botón */
#btn-subir.mostrar {
  opacity: 1;
  visibility: visible;
}

/* Opcional: efecto al pasar el ratón */
#btn-subir:hover {
  background: rgba(0, 0, 0, 0.8);
}
/*-------------------------------------------------------------------*/


/* Pie de página */

footer {
    background-color: black; /* Color de fondo */
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: whitesmoke;
}

.contenedor-footer {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Crea 6 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    text-align: left;
}

.menu-pie h4,
.social-media h4 {
    margin-bottom: 15px; /* Separación con los elementos de abajo */
    font-size: 22px;
    color: lightslategray;
}

.menu-pie ul {
    list-style: none;
    padding: 0;
}

.menu-pie li {
    margin-bottom: 5px;
    font-size: 16px;
}

.menu-pie a,
.social-media a {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}

.menu-pie a:hover,
.social-media a:hover {
    color: grey; /* Color al pasar el cursor */
}



/* Define como se comportan los enlaces */
a {
    text-decoration: none; /* Quita el subrayado */
    color: gray; /* inherit Hereda el color del texto circundante */
}

a:hover {
    color: grey; /* Cambia el color al pasar el cursor (ejemplo: naranja) */
}



/* Diseño responsivo */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        text-align: center;
    }

    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin: 10px 0;
    }

    .hero {
        padding: 30px 15px;
    }
}

/* Sección de contacto */
.contact {
    text-align: center;
    padding: 40px 20px;
    background-color: white;
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.contact-item {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    width: 200px;
}

.contact-item h3 {
    margin-bottom: 5px;
    color: #0073e6;
}

/* Estilos del formulario */
form {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

label {
    font-weight: bold;
    margin: 10px 0 5px;
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #0073e6;
    color: white;
    border: none;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

button:hover {
    background-color: #005bb5;
}

/* Diseño responsivo */
@media (max-width: 768px) {
    .contact-info {
        flex-direction: column;
        align-items: center;
    }

    .contact-item {
        width: 80%;
    }
}

/* Estilos generales del menú */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #0073e6;
}

nav ul li {
    position: relative;
}

nav ul li a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

nav ul li a:hover {
    background: #005bb5;
}

/* Estilos del submenú */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0073e6;
    flex-direction: column;
    width: 200px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.submenu li {
    width: 100%;
}

.submenu li a {
    padding: 10px;
    display: block;
    color: white;
    transition: background 0.3s;
}

.submenu li a:hover {
    background: #005bb5;
}

/* Mostrar submenú cuando el usuario pasa el ratón */
.dropdown:hover .submenu {
    display: block;
}

/* Estilos del carrusel */
.carousel {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
}

.carousel-container {
    position: relative;
    width: 100%;
}

.slide {
    display: none;
}

.slide img {
    width: 100%;
    height: auto;
}

/* Botones de navegación */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Efecto de transición */
.fade {
    animation: fadeEffect 1s ease-in-out;
}

@keyframes fadeEffect {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

  /* Contenedor del carrusel Webs Clientes */
  #mi-carrusel .carrusel {
    position: relative;
    align-content:center /* Alínea el carrusel al centro de la página */
    width: 840px;
    height: 260px;
    overflow: hidden;
    background-color: transparent;
    border: 0px solid #ccc; /* Borde opcional */
    margin: 0 auto;
  }

  /* Pista de imágenes */
  #mi-carrusel .pista {
    display: flex;
    transition: transform 0.3s ease;
    will-change: transform;
  }

  /* Imágenes */
  #mi-carrusel .pista img {
    width: 430px;
    height: 260px;
    flex-shrink: 0;
  }

  /* Flechas */
  #mi-carrusel .flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
    z-index: 2;
    user-select: none;
  }
  #mi-carrusel .izquierda {
    left: 10px;
  }
  #mi-carrusel .derecha {
    right: 10px;
  }