body {
    background-color: #000;
    /* Fondo negro */
    color: #fff;
    /* Color del texto en blanco */
    font-family: 'Montserrat', sans-serif;
    /* O la fuente que prefieras */
}

h1,
h2,
h3,
p,
a {
    color: #fff;
    /* Asegura que todos los textos sean blancos */
}

a {
    color: #ffdf08;
    /* Opcional: Cambia el color de los enlaces a un tono visible sobre fondo negro */
}

button,
.btn,
.warning {
    background-color: #ffdf08;
    /* Ejemplo de un botón amarillo */
    color: #000;
    /* Texto en negro */
}

button:hover,
.btn:hover {
    background-color: #ffcc00;
    /* Color de fondo al pasar el cursor */
}

.footer {
    background-color: #000 !important;
}


.navbar {
    width: 100%;
    /* El navbar ocupa todo el ancho */
    position: absolute;
    /* Lo posicionamos en la parte superior del hero */
    top: 0;
    left: 0;
    z-index: 10;
    /* Asegura que el navbar esté encima de cualquier otro contenido del hero */
    background-color: rgba(0, 0, 0, 0.6);
    /* Fondo semitransparente */
    padding: 10px 0;
    margin-bottom: 100px;
}


/* SOBRE MI */

.about-section {
    background: url('../../assets/images/about.jpg') no-repeat center center / cover;
}

.home-section {
    background: url('../../assets/images/collage.png') no-repeat center center / cover;
}

.contact-section {
    background: url('../../assets/images/contact.jpg') no-repeat center center / cover;
}

.stock-section {
    background: url('../../assets/images/stock.jpg') no-repeat center center / cover;
}

.style-section {
    padding: 0;
    /* Eliminar el padding aquí si quieres que el fondo cubra todo */
    color: #fff;
    text-align: center;
    min-height: 1000px;
    display: flex;
    align-items: center;
    /* Centra el contenedor verticalmente */
    justify-content: center;
    /* Centra el contenedor horizontalmente */
}

.style-section .contenedor {
    width: 100%;
    /* Extiende el contenedor al ancho completo */
    height: 100%;
    /* Extiende el contenedor a la altura completa */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.5);
    /* Fondo semitransparente */
    padding: 0 0 80px 0;
    margin: 60px 0 0;
    min-height: 1000px;
}

.style-section .contenedor h1 {
    margin: 200px 0 0;
}

.about-title {
    margin-top: 50px;
}

.about-text {
    line-height: 1.6;
    max-width: 400px;
    /* Ajusta el ancho máximo para un mejor control del diseño */
    margin: 0 auto;
    /* Centra el texto horizontalmente */
    padding: 0 25px;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .navbar {
        background-color: #000;
        /* Color negro solo para dispositivos móviles */
    }

    .bloque {
        max-height: 500px;
    }
}


.bloque {
    max-height: 500px;
    /* Limita la altura para que el contenedor no crezca demasiado */
    overflow: hidden;
    /* Oculta el desbordamiento si el contenido supera el tamaño máximo */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    /* Transición suave para el cambio de opacidad */
}

.bloque .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo semitransparente */
    transition: background-color 0.3s ease;
    /* Transición suave */
    z-index: 1;
    /* Asegura que esté detrás del contenido */
}

.bloque:hover .overlay {
    background-color: rgba(0, 0, 0, 0.3);
    /* Fondo transparente en hover */
}

.bloque .position-absolute {
    z-index: 2;
    /* Asegura que el contenido esté por encima del fondo */
}

.bloque img {
    width: 100%;
    /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 100%;
    /* Ocupa toda la altura del contenedor */
    object-fit: cover;
    /* Ajusta la imagen sin distorsionar ni hacer zoom */
    object-position: center;
    /* Centra la imagen dentro del contenedor */
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo semitransparente para mejorar la visibilidad del texto */
}

/* Contenido dentro del bloque */
.bloque .position-relative {
    max-height: 100%;
    /* Mantener dentro del contenedor */
    overflow: auto;
    /* Permite el desplazamiento si el contenido se desborda */
}

.bloque h5 {
    font-size: 2.8rem;
    /* Tamaño de fuente adecuado para dispositivos móviles */
    font-weight: bold;
}

.bloque p {}

/* Ajustes específicos para dispositivos móviles */
@media (max-width: 768px) {
    .bloque {
        max-height: 500px;
        /* Limita más en pantallas pequeñas */
        overflow-y: auto;
        /* Permite desplazamiento vertical si es necesario */
    }

    .bloque h5 {
        font-size: 1.5rem;
        /* Reduce el tamaño del título */
    }

    .bloque p {
        font-size: 0.9rem;
        /* Ajuste en el tamaño del texto */
    }
}


/* FORMULARIO */


/* Estilo general del formulario */
.form-control {
    background-color: rgba(255, 255, 255, 0.8);
    /* Fondo blanco semitransparente */
    border-radius: 0px;
    /* Esquinas ligeramente redondeadas */
    padding: 5px 10px;
    /* Acolchado interno para mejor apariencia */
    font-size: 16px;
    /* Tamaño de fuente adecuado */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Sombra interna para profundidad */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    /* Transición suave para efectos de enfoque */
}

.form-control:focus {
    border-color: #66afe9;
    /* Cambio de color al enfocar */
    outline: 0;
    /* Remover el contorno predeterminado */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 8px rgba(102, 175, 233, 0.6);
    /* Sombra más definida al enfocar */
}

/* Estilos para mejorar la visibilidad del label */
label {
    display: block;
    /* Hacer que el label use todo el ancho disponible */
    margin-bottom: 5px;
    /* Espacio debajo del label */
    font-weight: bold;
    /* Texto en negrita */
}

/* Ajustes adicionales si necesitas para textareas o inputs específicos */
textarea.form-control {
    height: auto;
    /* Altura automática según el contenido */
    min-height: 100px;
    /* Mínima altura para asegurar espacio suficiente para escribir */
}


/* GALERIA */

.galeria .custom-tarjeta {
    position: relative;
    overflow: hidden;
    /* Asegura que nada se salga de los bordes de la tarjeta */
    color: #fff;
    /* Texto blanco */
}

.galeria .tarjeta-img-top {
    width: 100%;
    transition: transform .5s ease;
    /* Efecto suave para el zoom */
}

.galeria .custom-tarjeta:hover .tarjeta-img-top {
    transform: scale(1.1);
    /* Efecto de zoom al pasar el mouse */
}

.galeria .tarjeta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    /* Overlay oscuro para mejorar la legibilidad */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.galeria .tarjeta-body {
    transition: opacity .5s ease;
    /* Transición suave para el texto */
    opacity: 0;
    /* Hace que el texto sea transparente inicialmente */
}

.galeria .custom-tarjeta:hover .tarjeta-body {
    opacity: 1;
    /* Hace que el texto aparezca al pasar el mouse */
}

@media (max-width: 600px) {
    .galeria .tarjeta-title {
        font-size: 2em !important;
        /* Reducimos el tamaño base en pantallas pequeñas */
        padding: 0.5em !important;
        /* Espacio después del título */
        margin: 0px !important;
        /* Espacio después del título */
    }
}

.galeria .tarjeta-title {
    font-size: 120px;
    /* Tamaño grande para el título */
    font-weight: bold;
    /* Negrita para el título */
    padding: 20px;
    /* Espacio después del título */
    max-width: 80%;
}

.galeria .tarjeta-text {
    font-size: 18px;
    /* Tamaño adecuado para el texto */
    padding: 20px;
}


.style-gallery {
    padding: 0;
    /* Eliminar el padding aquí si quieres que el fondo cubra todo */
    color: #fff;
    min-height: 300px;
    display: flex;
    align-items: center;
    /* Centra el contenedor verticalmente */
    justify-content: center;
    /* Centra el contenedor horizontalmente */
}

.style-gallery .galeria {
    width: 100%;
    /* Extiende el contenedor al ancho completo */
    height: 100%;
    /* Extiende el contenedor a la altura completa */
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.1);
    /* Fondo semitransparente */
    min-height: 300px;
}



/* Asegura que las imágenes mantengan una relación de aspecto coherente */
img.img-fluid {
    object-fit: cover;
    /* Hace que las imágenes se ajusten dentro del contenedor sin deformarse */
    height: 100%;
    /* Asegura que la imagen ocupe toda la altura del contenedor */
}

/* Ajuste adicional para el botón */
.btn {
    text-align: center;
    /* Asegura que el texto dentro del botón esté centrado */
    display: inline-block;
    /* Asegura que el botón no ocupe todo el ancho */
}





.gallery {
    width: 100%;
    overflow: hidden;
}

.gallery img {
    height: auto;
    display: block;
    float: left;
    margin-right: 0;
    margin-bottom: 0;
}

.gallery video {
    float: left;
}