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

body {
    font-family: Arial, sans-serif;
    color: #333;
}

/* Fondo de la página */
body, html {
    height: 100%; /* Asegura que el body ocupe el 100% de la altura */
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Estilo para la imagen de fondo */
.background-image {
    position: absolute; /* Permite que esté detrás de todo */
    top: 0; /* Posiciona al principio del body */
    left: 0; /* Alinea a la izquierda */
    width: 100%; /* Asegura que ocupe todo el ancho */
    height: 100%; /* Asegura que ocupe toda la altura */
    background: url('img/rayas.png') no-repeat center center; /* Imagen de fondo local */
    background-size: cover; /* Ajusta la imagen para cubrir el contenedor */
    z-index: -1; /* Envía la imagen al fondo */
}

#mainView {
    height: auto; /* Permite que el contenedor se ajuste automáticamente */
    width: 100%; /* Asegura que el mainView ocupe el ancho completo */
}

/* Estilos para el contenedor del nuevo contenido */
#contentContainer {
    padding: 20px; /* Espaciado interno */
    background-color: rgba(255, 255, 255, 0.9); /* Fondo ligeramente transparente */
    margin-top: 10px; /* Espacio entre el contenedor y el banner */
    border-radius: 3px; /* Bordes redondeados */
    width: 97%; /* Ancho del contenedor (ajústalo según necesites) */
    max-width: 800px; /* Máximo ancho para el contenedor */
    position: relative; /* Permite posicionar este contenedor encima de otros */
    z-index: 1; /* Asegura que esté encima del fondo */
    text-align: left; /* Justifica el texto a la izquierda */
}

/* Estilos para el contenido adicional */
.additional-content {
    margin-top: 20px; /* Espacio arriba del contenido adicional */
}

/* Estilos para el título */
.main-title {
    font-size: 2.5rem; /* Tamaño de fuente por defecto */
    color: #22458e; /* Color azul oscuro */
    margin-bottom: 15px; /* Espacio entre el título y el texto de abajo */
}

/* Estilos para el input y el botón */
.input-group {
    display: flex; /* Usa flexbox para alinear los elementos */
    margin-top: 20px; /* Espacio arriba del grupo de entrada */
}

.form-control {
    flex: 1; /* Permite que el input ocupe el espacio restante */
    margin-right: 0; /* Elimina el margen derecho */
    border: none; /* Sin borde */
    border-radius: 5px 0 0 5px; /* Bordes redondeados a la izquierda */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra del input */
    padding: 10px; /* Espaciado interno del input */
}

.btn {
    padding: 10px 15px; /* Espaciado del botón */
    background-color: #2d68ff; /* Color del botón */
    color: white; /* Color del texto del botón */
    border: none; /* Sin borde */
    border-radius: 0 5px 5px 0; /* Bordes redondeados a la derecha */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    display: flex; /* Para centrar el ícono */
    align-items: center; /* Centra el ícono verticalmente */
    justify-content: center; /* Centra el ícono horizontalmente */
}

.btn:hover {
    background-color: #1c3a70; /* Color del botón al pasar el ratón */
}

.text-secondary {
    color: #6c757d !important; /* Color del texto secundario */
}

.font-weight-bold {
    font-weight: 700 !important; /* Negrita */
}

/* Responsive font size */
@media (min-width: 320px) and (max-width: 600px) {
    .main-title {
        font-size: 2rem; /* Tamaño de fuente para pantallas pequeñas */
    }
}

/* Banner Container */
.banner-container {
    display: inline-block; /* Ajusta el contenedor al tamaño de la imagen */
    overflow: hidden; /* Evita que el contenido se desborde */
}

/* Banner Image */
.banner-image {
    width: auto; /* La imagen define su propio ancho */
    height: auto; /* La imagen define su propia altura */
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
}

/* Slider Container */
#sliderContainer {
    width: 90%; /* Ancho del slider */
    height: 400px; /* Ajusta la altura del slider */
    overflow: hidden; /* Oculta contenido que exceda el tamaño del contenedor */
    margin: 10px auto; /* Espacio arriba y abajo, centrado */
    border: 2px solid rgba(0, 0, 0, 0.1); /* Borde con sombra */
    border-radius: 10px; /* Bordes redondeados para el contenedor del slider */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para el slider */
}

/* Slider */
.slider {
    display: flex; /* Las imágenes estarán en fila */
    transition: transform 0.5s ease-in-out; /* Transición suave entre imágenes */
}

.slider img {
    width: 100%; /* Ajusta el tamaño de las imágenes al tamaño del slider */
    height: 100%; /* Asegura que las imágenes ocupen todo el alto */
    object-fit: cover; /* Ajusta la imagen para que cubra sin distorsión */
}

/* Contenedores de imágenes individuales alineados debajo del slider */
.single-image-container {
    width: 90%; /* Mismo ancho que el slider */
    height: 220px; /* Ajusta la altura de las imágenes individuales */
    margin: 20px auto; /* Espacio alrededor del contenedor, centrado */
    overflow: hidden; /* Evita que el contenido se desborde */
    border: 2px solid rgba(0, 0, 0, 0.1); /* Borde con sombra */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra */
}

.single-image {
    width: 100%; /* Ocupa el 100% del contenedor */
    height: 100%; /* Ajusta la altura al contenedor */
    object-fit: cover; /* Asegura que las imágenes cubran sin distorsión */
}


.footer {
    background-color: #EEEEEE;
    padding: 40px 15px; /* Espacio de 20px agregado */
    margin-top: 20px; /* Espacio superior */
}

.redes-footer {
    margin-right: 15px; /* Espacio entre los iconos sociales */
}

.redes-footer.instagram { background-image: url('path/to/instagram-icon.png'); }
.redes-footer.twitter { background-image: url('path/to/twitter-icon.png'); }
.redes-footer.facebook { background-image: url('path/to/facebook-icon.png'); }
.redes-footer.youtube { background-image: url('path/to/youtube-icon.png'); }

.footer h6, .footer p {
    font-size: 15px;
    line-height: 1.5;
}

.footer .col-md-4 {
    margin-bottom: 20px; /* Espacio entre columnas en pantallas pequeñas */
}

.footer a {
    color: #333333;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}