/* Importamos la tipografía */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;700&display=swap');

/* Estilo general para la sección de inicio */
#inicio {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: #f5f5f5; /* Color de fondo opcional */
}

/* Estilo para la clase hero-content */
.hero-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Ejemplo de CSS Grid para un portafolio */
.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}


img {
    max-width: 100%;
    height: auto;
}



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

body {
    font-family: 'Readex Pro', sans-serif;
    background-color: #ffffff;
    color: #000000; /* Cambié el color del texto a negro para mejorar la legibilidad */
}



nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #f5f5f5;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.logo a {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #00b7ff;
}


.cta .btn {
    background-color: #003883; /* Color de fondo inicial */
    color: #fff; /* Color del texto */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 50px; /* Botón redondeado */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Añadimos una transición suave */
    font-weight: bold; /* Texto en negrita */
}

.cta .btn:hover {
    background-color: #008DC5; /* Cambia el color de fondo al pasar el mouse */
    transform: scale(1.05); /* Hace un pequeño zoom cuando el mouse pasa por encima */
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #003883;
    font-size: 1rem;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #008DC5; /* Cambio de color en el texto al hacer hover */
}



.social-icons a {
    text-decoration: none;
    color: #008DC5;
    margin-left: 20px;
    transition: color 0.3s ease;
}

/* Código para alinear los íconos de redes sociales */
.social-icons {
    display: flex;
    justify-content: center; /* Alinea los íconos horizontalmente */
    align-items: center; /* Alinea los íconos verticalmente */
    gap: 10px; /* Espacio entre los íconos */
}

.social-icons {
    display: flex;
    gap: 10px; /* Espacio entre iconos */
}

.social-icons i {
    color: #bdbdbd; /* Gris claro */
    font-size: 24px; /* Ajusta el tamaño del icono */
    transition: color 0.3s ease; /* Transición suave en hover */
}

.social-icons i:hover {
    color: #000000; /* Cambia a blanco al pasar el ratón */
}




/* Fondo sólido blanco para la sección de Inicio */

#inicio {
    background: linear-gradient(to right, #e2ecf1, #d7e7ee); /* Fondo degradado celeste a azul oscuro */
    color: #ffffff; /* Color del texto blanco para contraste */
    padding: 20px; /* Espaciado interno */
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea los elementos a la izquierda */
    justify-content: center;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    text-align: left; /* Alinea el texto a la izquierda */
    padding-left: 20px; /* Espaciado a la izquierda */
}

h1 {
    margin-bottom: 10px; /* Ajusté el margen inferior para separar mejor el título del subtítulo */
    line-height: 1.2; /* Altura de línea para mejorar la legibilidad */
}


.subtitulo {
    max-width: 50%; /* Ocupa 1/3 de la pantalla */
    font-size: 16px; /* Ajusta el tamaño del texto según tu diseño */
    margin-top: 40px; /* Aumenta el espaciado entre el título y el subtítulo */
}

.highlight {
    color: #ffcc00; /* Mantengo el color resaltado amarillo */
    font-weight: bold;
}





.subtitulo {
    font-size: 1.1em; /* Tamaño del subtítulo */
    color: #000000; /* Color gris del subtítulo */
    margin-bottom: 20px; /* Espacio entre el subtítulo y el GIF */
  }
  
  .subtitulo p {
    margin: 0px 0; /* Espacio entre los párrafos */
  }


/* Estilos del texto principal */
.hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #003883; /* Texto en gris oscuro */
    text-align: left; /* Alineación a la izquierda */
    line-height: 1.2;
    text-transform: none;
}


/* Estilo para el texto destacado en celeste */
.hero-content .highlight {
    color: #008DC5; /* Color celeste para "marcas que impactan" */
    font-weight: 700;
}

.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
  }
  
  .whatsapp-button a {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  
  .whatsapp-button img {
    width: 50px; /* Ajusta el tamaño del icono según tu preferencia */
    height: auto;
    border-radius: 50%;
  }
  
  .whatsapp-tooltip {
    display: none;
    background-color: #25D366; /* Color de WhatsApp */
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    bottom: 60px; /* Ajusta según el tamaño del icono */
    right: 0;
    width: 200px; /* Ajusta según el tamaño del mensaje */
    text-align: center;
    font-size: 14px;
  }
  
  .whatsapp-button:hover .whatsapp-tooltip {
    display: block;
  }

  .social-icons {
    display: flex;
    gap: 10px; /* Espacio entre los iconos */
}

.social-icon {
    width: 24px; /* Ajusta el tamaño según tus necesidades */
    height: auto; /* Mantiene la proporción de las imágenes */
}


/* Estilo general para el contenedor de servicios */
.contenedor-servicios {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Asegura que los servicios se acomoden en múltiples filas si no caben en una sola */
    gap: 15px; /* Espacio entre los servicios (ajusta según sea necesario) */
    margin-top: 50px; /* Espacio superior para separar la sección de servicios de la sección anterior */
    margin-bottom: 50px; /* Espacio inferior para separar la sección de servicios de la siguiente sección */
    padding: 0 20px; /* Espacio a los lados del contenedor de servicios */
    box-sizing: border-box; /* Incluye el padding en el ancho total del contenedor */
}

/* Estilo para la sección de servicios */
#servicios {
    background-color: #ffffff; /* Cambia el color de fondo de la sección de servicios */
    padding: 50px 0; /* Espacio superior e inferior en la sección de servicios */
}

/* Estilo general para el contenedor de servicios */
.contenedor-servicios {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Asegura que los servicios se acomoden en múltiples filas si no caben en una sola */
    gap: 15px; /* Espacio entre los servicios (ajusta según sea necesario) */
    margin-top: 50px; /* Espacio superior para separar la sección de servicios de la sección anterior */
    margin-bottom: 50px; /* Espacio inferior para separar la sección de servicios de la siguiente sección */
    padding: 0 20px; /* Espacio a los lados del contenedor de servicios */
    box-sizing: border-box; /* Incluye el padding en el ancho total del contenedor */
}

/* Estilo para la sección de servicios */
#servicios {
    background-color: #f1f1f1; /* Cambia el color de fondo de la sección de servicios */
    padding: 50px 0; /* Espacio superior e inferior en la sección de servicios */
}

/* Estilo para el título y subtítulo de los servicios */
.titulo-servicios {
    text-align: center; /* Alinea el texto al centro */
    margin-bottom: 30px; /* Espacio inferior para separar el título y subtítulo de los rectángulos */
}

.titulo-servicios h2 {
    color: #333; /* Color del título */
    margin: 0; /* Elimina el margen por defecto */
}

.titulo-servicios p {
    color: #666; /* Color del subtítulo */
    margin: 0px 0 0; /* Ajusta el espaciado entre el título y el subtítulo */
}



/* Estilo general para el contenedor de servicios */
.contenedor-servicios {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Asegura que los servicios se acomoden en múltiples filas si no caben en una sola */
    gap: 15px; /* Espacio entre los servicios (ajusta según sea necesario) */
    margin: 0 20px; /* Espacio a los lados del contenedor de servicios */
    box-sizing: border-box; /* Incluye el padding en el ancho total del contenedor */
}

/* Estilo general para los rectángulos alrededor de los textos */
.servicio {
    position: relative;
    text-align: center;
    width: calc(33.333% - 15px); /* Ajusta el ancho para que el margen entre rectángulos se respete */
    padding: 30px 20px; /* Ajusta el espaciado interno del rectángulo */
    box-sizing: border-box;
    border-radius: 10px; /* Bordes redondeados del rectángulo */
    background: #ffffff; /* Fondo blanco para el rectángulo */
}

/* Estilo para los íconos dentro de los rectángulos */
.icono {
    font-size: 40px;
    color: #008DC5; /* Color del ícono */
    margin-bottom: 15px; /* Espaciado entre el ícono y el texto del servicio */
}

/* Estilo para los títulos dentro de los rectángulos */
.servicio h2 {
    color: #003883; /* Cambia el color del texto del título */
    margin: 0; /* Elimina el margen por defecto */
}

/* Estilo para las descripciones dentro de los rectángulos */
.servicio p {
    color: #666; /* Cambia el color del texto de la descripción */
    margin-top: 10px; /* Ajusta el espaciado entre el título y la descripción del servicio */
}


/* Estilo para la sección de proyectos */
#proyectos {
    padding: 40px 0;
    text-align: center;
}

/* Título de la sección */
#proyectos h2 {
    margin-bottom: 30px;
}

/* Contenedor de la cuadrícula de proyectos */
.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Separación entre los rectángulos */
    padding: 0 20px; /* Separación con los márgenes del contenedor */
}

/* Estilo para cada proyecto */
.proyecto {
    position: relative;
    overflow: hidden;
    border: 1px solid #eeeeee;
    border-radius: 10px;
}

/* Imagen del proyecto */
.proyecto img {
    width: 100%;
    height: auto;
    display: block;
}

/* Overlay de texto */
.texto-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    padding: 10px;
    border-radius: 8px;
}

/* Efecto de hover */
.proyecto:hover .texto-overlay {
    opacity: 1;
}

/* Efecto de hover en el contenedor */
.proyecto:hover {
    background-color: #999999; /* Celeste claro */
}

/* Sección de portafolio */
#portfolio {
    position: relative; /* Para posicionar el separador con relación a la sección */
    padding: 0; /* Sin padding en la sección para controlar el espaciado con el separador */
}

.portfolio-separator {
    width: 100%;
    height: 3px;
    background-color: #008DC5; /* Azul Francia */
}

.portfolio-background {
    background-color: #ffffff; /* Gris claro para el fondo */
    padding: 60px 20px; /* Espaciado interno */
}

.portfolio-content {
    max-width: 1200px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrado horizontal */
}

.portfolio-text-content {
    width: 100%; /* Ocupa un máximo de 1/3 de la sección */
    text-align: center; /* Centra el contenido dentro del contenedor */
}

.portfolio-text-content h2 {
    font-size: 36px;
    color: #000;
    margin-bottom: 20px; /* Espacio entre el título y el subtítulo */
    text-align: center; /* Centra el título */
}

.portfolio-subtitle {
    font-size: 18px;
    color: #555; /* Gris oscuro para el subtítulo */
    margin-bottom: 40px; /* Espacio debajo del subtítulo para el botón */
    text-align: center; /* Centra el subtítulo */
}

.portfolio-button-container {
    text-align: center; /* Centra el botón dentro del contenedor */
}

.portfolio-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 16px;
    color: #fff;
    background-color: #008DC5; /* Azul Francia */
    border-radius: 25px; /* Bordes redondeados */
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.portfolio-button:hover {
    background-color: #003883; /* Color más oscuro al pasar el ratón */
}


/* Sección de contacto */
#contact {
    position: relative; /* Para posicionar el separador con relación a la sección */
    padding: 0; /* Sin padding en la sección para controlar el espaciado con el separador */
}


.contact-background {
    background-color: #f9f9f9; /* Gris muy claro para el fondo */
    padding: 60px 20px; /* Espaciado interno */
}

.contact-content {
    max-width: 1200px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrado horizontal */
    display: flex; /* Flexbox para diseño en dos columnas */
    justify-content: space-between; /* Espacio entre columnas */
    gap: 20px; /* Espacio entre columnas */
}

.contact-info {
    width: 50%; /* Ocupa la mitad del ancho disponible */
}

.contact-info h2 {
    font-size: 36px;
    color: #000;
    margin-bottom: 20px; /* Espacio entre el título y el párrafo */
}

.contact-info p {
    font-size: 18px;
    color: #555; /* Gris oscuro para el texto */
    margin-bottom: 10px; /* Espacio entre párrafos */
}

.contact-form {
    width: 50%; /* Ocupa la mitad del ancho disponible */
}

.contact-form h3 {
    font-size: 28px;
    color: #000;
    margin-bottom: 20px; /* Espacio entre el título y el formulario */
}

.contact-form label {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
    color: #333;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Estilo para el botón del formulario de contacto */
.contact-form button {
    background-color: #007BFF; /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    border: none; /* Sin borde */
    border-radius: 50px; /* Bordes redondeados */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de la fuente */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease; /* Efecto de transición */
}

.contact-form button:hover {
    background-color: #0056b3; /* Color de fondo del botón en estado hover */
}



.back-to-top {
    position: fixed; /* Fija la posición en pantalla */
    bottom: 20px; /* Separación desde abajo */
    left: 20px; /* Separación desde el margen izquierdo */
    position: fixed;
    bottom: 20px;
    background-color: #003883; /* Color de fondo de la flecha */
    color: #008DC5; /* Color del icono */
    padding: 10px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    font-size: 24px;
    display: none; /* Inicialmente oculta */
    z-index: 1000; /* Asegura que esté sobre otros elementos */
    transition: opacity 0.3s ease;
}

.back-to-top:hover {
    background-color: #a3a3a3; /* Color cuando se pasa el mouse */
}

.back-to-top.show {
    display: block;
}


/* Estilo para la sección final */
#final {
    background-color: #003366; /* Azul oscuro */
    color: #ffffff;
    text-align: center;
    padding: 20px 0;

}

/* Contenido de la sección final */
.final-content p {
    margin: 5px 0;
    font-size: 14px;
}


/* Esconder redes sociales en pantallas más pequeñas */
@media (max-width: 750px) {
    .social-icons {
        display: none;
    }
}

/* Esconder el navegador en pantallas más pequeñas */
@media (max-width: 700px) {
    .nav-links {
        display: none;
    }
}

/* Ocultar el menú hamburguesa por defecto */
.menu-toggle {
    display: none;
}

/* Mostrar el menú hamburguesa en pantallas más pequeñas */
@media (max-width: 700px) {
    .menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 24px;
        color: #333;
        position: absolute;
        top: 20px;
        right: 20px;
    }

    /* Ocultar las opciones del menú por defecto */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background-color: #fff;
        width: 100%;
        padding: 20px;
        transition: max-height 0.3s ease-in-out;
        max-height: 0;
        overflow: hidden;
    }

    /* Mostrar el menú desplegable con animación */
    .nav-links.active {
        display: flex;
        max-height: 400px; /* Ajustar según la altura esperada del menú */
    }
}

@media (max-width: 1000px) {
    .cta .btn {
        display: none; /* Ocultar el menú de navegación */
    }
}



/* Estilos para pantallas menores a 850px */
@media (max-width: 850px) {
    /* Ajuste de la sección de inicio */
    #inicio {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: calc(100vh - 60px); /* Calcula el tamaño de la pantalla menos el tamaño del navbar */
        margin-top: 60px; /* Asegura que quede por debajo del navbar */
    }

    /* Ajuste del contenido dentro de la sección de inicio */
    #inicio .hero-content {
        width: 100%;
        height: 100%;
        text-align: center;
        padding: 20px; /* Espacio alrededor para evitar que el texto toque los bordes */
        box-sizing: border-box; /* Incluye el padding en el ancho y alto totales */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Alinea verticalmente en el centro */
    }
    @media (max-width: 850px) {
        #inicio .subtitulo {
            max-width: none; /* Elimina la restricción de ancho máximo */
            width: 100%; /* Asegura que ocupe todo el ancho disponible */
            text-align: left; /* Alinea el texto a la izquierda */
        }
    }

    @media (max-width: 820px) {
        .contenedor-servicios {
            display: flex;
            flex-direction: column; /* Cambia la dirección a columna */
            align-items: center; /* Alinea los elementos al centro */
        }
    
        .servicio {
            width: 100%; /* Asegura que cada servicio ocupe el 100% del ancho disponible */
            text-align: center; /* Centra el texto dentro de cada servicio */
            margin-bottom: 20px; /* Agrega un margen entre los servicios */
        }
    }
    @media (max-width: 750px) {
        .contact-content {
            display: flex;
            flex-direction: column; /* Cambia la dirección a columna */
            align-items: center; /* Alinea los elementos al centro */
        }
    
        .contact-info {
            margin-bottom: 20px; /* Agrega un margen inferior para separar el texto del formulario */
            width: 100%; /* Asegura que el texto ocupe el 100% del ancho */
            text-align: center; /* Centra el texto */
        }
    
        .contact-form {
            width: 100%; /* Asegura que el formulario ocupe el 100% del ancho */
        }
    }
    
 /* Ocultar solo el menú de navegación en menor a 700px */
@media (max-width: 1000px) {
        .nav-links {
            display: none; /* Ocultar el menú de navegación */
        }
    .menu-toggle {
        display: block; /* Mostrar el botón del menú */
        cursor: pointer; /* Cambiar cursor al pasar por encima */
    }

    .nav-links.active {
        display: flex; /* Mostrar menú cuando está activo */
        flex-direction: column; /* Colocar en columna */
        position: absolute; /* Posicionar debajo del menú */
        top: 60px; /* Ajustar según la altura de tu navbar */
        right: 0; /* Alinear a la derecha */
        background-color: #fff; /* Fondo para el menú */
        width: 100%; /* Ancho completo */
        z-index: 10; /* Asegura que esté por encima de otros elementos */
        font-size: 0.9em; /* Tamaño de letra más pequeño */
         display: flex; /* O 'block', dependiendo de cómo quieras que se vea */
         max-height: 400px; /* Ajusta según la altura esperada del menú */
         transition: max-height 0.3s ease-in-out; /* Añade una transición suave */
    }
    

    .nav-links li a {
        padding: 10px; /* Espaciado */
        display: block; /* Área clickeable mayor */
    }
}


.nav-links {
    list-style: none;
    padding: 0;
    display: none; /* Oculta el menú por defecto */
    flex-direction: row; /* Alinea horizontalmente */
    transition: max-height 0.3s ease;
}

.nav-links.active {
    display: flex; /* Muestra el menú cuando está activo */
}

.nav-links li {
    margin-right: 15px; /* Espaciado entre los elementos */
}

.menu-toggle {
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}


.recursos-section {
  background-color: #f5f5f5;
  padding: 50px 20px;
}

.recursos-container {
  max-width: 1200px;
  margin: 0 auto;
}

.recursos-section h2 {
  font-size: 36px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.recursos-section p {
  color: #666;
  text-align: center;
  margin-bottom: 40px;
}

.recursos-items {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.recurso {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: 1;
}

.recurso h3 {
  font-size: 24px;
  color: #007BFF;
  margin-bottom: 10px;
}

.recurso p {
  color: #666;
  margin-bottom: 20px;
}

.btn-recurso {
  background-color: #007BFF;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

.btn-recurso:hover {
  background-color: #0056b3;
}




}

.recursos-section {
    background-color: #f5f5f5;
    padding: 50px 20px;
  }
  
  .recursos-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .recursos-section h2 {
    font-size: 36px;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .recursos-section p {
    color: #666;
    text-align: center;
    margin-bottom: 40px;
  }
  
  .recursos-items {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  
  .recurso {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex: 1;
  }
  
  .recurso h3 {
    font-size: 24px;
    color: #007BFF;
    margin-bottom: 10px;
  }
  
  .recurso p {
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;
  }
  
  .btn-recurso {
    background-color: #007BFF;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
  }
  
  .btn-recurso:hover {
    background-color: #0056b3;
  }
  .carousel-item {
    text-align: center;
    padding: 50px;
  }
  .recurso {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .recurso img {
    max-width: 300px; /* o el tamaño que prefieras */
    height: auto; /* mantiene la proporción */
  }      

  .btn-recurso {
  background-color: #007BFF; /* Celeste */
  color: #fff; /* Tipografía blanca */
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block; /* Para ajustar el tamaño del botón */
}

.btn-recurso:hover {
  background-color: #0056b3; /* Color más oscuro al pasar el mouse */
}

/* Estilo para las flechas */
.carousel-control {
  background-color: #007BFF; /* Color celeste para las flechas */
  color: #fff; /* Color blanco para el icono */
}

.carousel-header {
    text-align: center;
    margin: 40px 0 10px; /* Reduce el margen inferior a 10px */
  }
  
  .carousel-header h2 {
    font-size: 36px; /* Ajusta este tamaño según sea necesario */
    color: #333;
  }
  
  .carousel-header p {
    font-size: 18px; /* Ajusta este tamaño según sea necesario */
    color: #666;
    margin-bottom: -10px; /* Reduce el margen inferior a 5px */
    
  }
  
  .recurso-link {
    margin-bottom: 50px; /* Ajusta el valor según el espacio que desees */
  }
  
  .btn-recurso {
    background-color: #00BFFF;
    color: white;
    padding: 10px 20px;
    font-size: 18px;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .btn-recurso:hover {
    background-color: #007ACC; /* Un tono más oscuro para el hover */
    color: #fff;
  }
  
  body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}

.navbar {
    background-color: #343a40;
    padding: 1rem;
}

.navbar-brand, .nav-link {
    color: white;
    text-decoration: none;
}

.nav-link {
    margin-left: 20px;
}


.recurso h3 {
    font-size: 1.25rem; /* Tamaño de la fuente del título */
    margin: 10px 0; /* Margen arriba y abajo del título */
}

.recurso p {
    font-size: 0.9rem; /* Tamaño de la fuente de la descripción */
    margin: 10px 0; /* Margen arriba y abajo de la descripción */
}

.btn-recurso {
    margin-top: 10px; /* Espacio entre el texto y el botón */
    background-color: #007bff; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    padding: 10px 15px; /* Espaciado del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Sin subrayado */
}

.btn-recurso:hover {
    background-color: #0056b3; /* Color de fondo al pasar el mouse */
}

/* Estilos generales para los recursos */
.recurso {
    text-align: center;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    background-color: #f9f9f9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recurso img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.recurso h3 {
    font-family: 'Readex Pro';
    font-size: 25px;
    margin: 10px 0;
    color: #333;
}

.recurso p {
    font-family: 'Readex Pro';
    font-size: 0.9rem;
    color: #666;
}

.btn-recurso {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-recurso:hover {
    background-color: #0056b3;
}




.resources-header {
    text-align: center;
    margin-top: 50px; /* Añadir espacio superior */
    margin-bottom: 60px; /* Añadir espacio entre el título y la descripción */
    padding: 20px 0;
    background: linear-gradient(to right, #205283, #2980b9); /* Fondo con degradado sutil */
    border-radius: 10px; /* Bordes redondeados para suavizar el diseño */
}

.resources-title {
    font-family: 'Readex Pro', sans-serif;
    font-size: 2.8rem; /* Tamaño grande para destacar el título */
    color: #ffffff; /* Mantén el color blanco para un contraste claro */
    margin-bottom: 20px; /* Espacio inferior entre el título y la descripción */
}

.resources-description {
    font-family: 'Readex Pro';
    font-size: 1.2rem;
    color: #dfe6e9; /* Color gris claro para una descripción elegante */
    margin: 0 auto;
    max-width: 800px; /* Limitar el ancho del texto para mejor legibilidad */
    line-height: 1.6; /* Espaciado de línea para mejorar la legibilidad */
}

.resources-header::before {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: #00a2ff; /* Agrega una barra decorativa antes del título */
    margin: 0 auto 20px auto; /* Centrado y con espacio inferior */
    border-radius: 50px; /* Bordes redondeados */

}

/* Estilos para el mensaje de recursos */
.mensaje-recursos {
    display: flex; /* Usamos Flexbox para centrar el contenido */
    flex-direction: column; /* Alineamos los elementos en columna */
    align-items: center; /* Centramos los elementos horizontalmente */
    justify-content: center; /* Centramos los elementos verticalmente */
    text-align: center; /* Alineamos el texto al centro */
    margin: 40px auto; /* Espacio arriba y abajo del mensaje, y centrado en el eje horizontal */
    background-color: #f8f9fa; /* Fondo claro para destacar el mensaje */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    max-width: 600px; /* Ancho máximo para mantenerlo centrado */
    
}

.mensaje-recursos h2 {
    font-family: 'Readex Pro';
    font-size: 2rem; /* Tamaño de fuente grande para el encabezado */
    color: #007BFF; /* Color llamativo */
    margin-bottom: 10px; /* Espacio debajo del encabezado */
}

.mensaje-recursos p {
    font-family: 'Readex Pro';
    font-size: 15pt; /* Tamaño de fuente más grande para el párrafo */
    color: #333; /* Color del texto */
    line-height: 1.5; /* Altura de línea para mejor legibilidad */
}

/* Estilos para el footer */
.footer {
    background-color: #00BFFF; /* Color de fondo celeste */
    color: white; /* Color del texto blanco */
    padding: 20px; /* Espaciado interno del footer */
    text-align: center; /* Centramos el texto */
    margin-top: 40px; /* Espacio superior para separar del contenido */
    position: relative; /* Asegura que no esté fijo */
    bottom: 0; /* Alinea al fondo si es necesario */
    width: 100%; /* Asegura que el footer ocupe todo el ancho */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave en la parte superior del footer */
}

.footer p {
    margin: 5px 0; /* Espaciado entre párrafos */
    font-size: 1rem; /* Tamaño de fuente */
}

.container {
    font-family: 'Readex Pro';
    font-size: 13px;
    display: flex;
    flex-direction: row; /* Alinea los rectángulos uno al lado del otro */
    gap: 10px; /* Espacio entre los rectángulos */
    justify-content: center; /* Centra los rectángulos horizontalmente */
    flex-wrap: wrap; /* Permite que los rectángulos se vayan a la siguiente línea si no caben */
    padding-left: 20px;
    padding-right: 20px;

}

.rectangle img {
    width: 100%; /* Ajustar la imagen al ancho del rectángulo */
    height: auto; /* Mantener la proporción de la imagen */
}

h2 {
    margin: 10px 0 5px; /* Espaciado del título */
}

p {
    margin: 0 0 10px; /* Espaciado de la descripción */
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.rectangle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    min-height: 400px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

.rectangle img {
    max-width: 100%;
    height: auto;
}

.rectangle h2 {
    margin: 20px 0 10px;
}

.rectangle p {
    flex-grow: 1;
}

.download-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px; /* Espacio entre el texto y el botón */
    margin-bottom: -10px; /* Espacio adicional entre el botón y el borde inferior */
    transition: background-color 0.3s ease;
}

.download-button:hover {
    background-color: #0056b3;
}

/* Achicar toda la sección manteniendo el orden en pantallas menores a 900px */
@media (max-width: 900px) {
    #recursosCarrusel {
        transform: scale(0.8); /* Achica el carrusel al 80% de su tamaño original */
        transform-origin: top center; /* Establece el punto de origen de la escala */
    }

    .carousel-header h2 {
        font-size: 1.8rem; /* Ajustar tamaño del encabezado para que se vea más proporcionado */
    }

    .carousel-header p {
        font-size: 1rem; /* Reducir tamaño del párrafo */
    }

    .recurso h3 {
        font-size: 1.1rem; /* Reducir el tamaño del título de cada recurso */
    }

    .recurso p {
        font-size: 0.9rem; /* Reducir el tamaño del texto de cada recurso */
    }

    .btn-recurso {
        padding: 6px 12px; /* Reducir el tamaño de los botones */
        font-size: 0.8rem; /* Ajustar el tamaño del texto en los botones */
    }
}
/* Ajustes para pantallas menores a 600px */
@media (max-width: 600px) {
    .resources-header {
        text-align: center; /* Centrar el texto */
        padding: 10px; /* Añadir un poco de relleno */
    }

    .resources-title {
        font-size: 1.8rem; /* Reducir el tamaño del título */
        margin-bottom: 10px; /* Reducir el espacio debajo del título */
    }

    .resources-description {
        font-size: 1rem; /* Reducir el tamaño del texto descriptivo */
        line-height: 1.5; /* Mejorar la legibilidad del texto */
        margin-bottom: 15px; /* Agregar algo de espacio debajo del párrafo */
    }
}

.download-info {
    display: flex; /* Usar flexbox para alinear los elementos */
    justify-content: space-between; /* Espacio entre los elementos */
    margin-top: 10px; /* Espacio entre el botón y el contenedor de descarga */
    font-size: 14px; /* Tamaño de la fuente */
    color: #555; /* Color del texto */
}

.download-counter {
    flex: 1; /* Toma espacio en el lado izquierdo */
    text-align: left; /* Alinear a la izquierda */
}

.file-weight {
    flex: 1; /* Toma espacio en el lado derecho */
    text-align: right; /* Alinear a la derecha */
}

/* Para ajustar el espacio entre los elementos, puedes usar un margen */
.download-counter {
    margin-right: 10px; /* Espacio entre el contador y el peso */
}

/* Agregar margen superior para separar del botón de descarga */
.download-info {
    margin-top: 20px; /* Ajusta este valor según tu diseño */
}

.btn-mas-info {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.btn-mas-info:hover {
    background-color: #0056b3;
}

/* Para pantallas de 360px o menos */
@media (max-width: 360px) {
    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .container {
        width: 100%;
        padding: 0 10px;
    }
}

/* Para pantallas de 768px o menos (tabletas y teléfonos grandes) */
@media (max-width: 768px) {
    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .container {
        width: 100%;
        padding: 0 20px;
    }
}