/* Fuente caligráfica similar */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

:root {
    --primary: #048ABF;
    --secondary: #419BBF;
    --accent: #BF9A56;
    --light: #F2F2F2;
    --dark: #0D0D0D;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}


/* Fondo Hero con opacidad */
.bg-hero {
    background: url('estructuras_metálicas.jpg') no-repeat center center/cover;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Capa oscura con opacidad */
    z-index: 1;
}

#hero .container {
    position: relative;
    z-index: 2;
}

/* Logo */
.logo {
    max-width: 150px; /* Tamaño más pequeño */
    filter: brightness(0) invert(1); /* Convierte colores a blanco */
}

/* Texto Principal */
#hero h2 {
    font-size: 4rem;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    margin-top: 20px;
    line-height: 1.3;
}

/* Botón */
#hero .btn {
    background-color: var(--accent);
    border: none;
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#hero .btn:hover {
    background-color: var(--dark);
    transform: scale(1.1);
}


.nav-link:hover {
    color: var(--accent) !important;
}

.btn-secondary {
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-secondary:hover {
    background-color: var(--dark);
    border-color: var(--dark);
}

footer {
    background-color: var(--dark);
    color: var(--light);
}

/* Estilos Generales para la Sección de Servicios */
#services {
    background-color: #f8f9fa; /* Fondo claro para la sección */
    padding-top: 40px;
    padding-bottom: 40px;
}

#services h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #048ABF; /* Color primario de tu logo */
    margin-bottom: 30px;
}

#services .card {
    border: 0;
    background-color: transparent; /* Sin fondo, mantiene transparencia */
    transition: transform 0.3s ease; /* Efecto suave al pasar el cursor */
}

#services .card:hover {
    transform: translateY(-10px); /* Efecto de elevación al pasar el mouse */
}

/* Estilo para las imágenes circulares */
#services .card-body img {
    max-width: 150px; /* Tamaño de la imagen */
    height: 150px; /* Asegura la forma circular */
    object-fit: cover; /* Mantiene la proporción de la imagen */
    border-radius: 50%; /* Hace que la imagen sea circular */
    margin-bottom: 20px;
}

/* Estilo para los títulos de cada servicio */
#services .card-body h3 {
    font-size: 1.75rem;
    font-weight: bold;
    color: #333; /* Color gris oscuro para los títulos */
    margin-bottom: 15px;
}

/* Estilo para los textos descriptivos */
#services .card-body p {
    font-size: 1rem;
    color: #555; /* Color gris para los párrafos */
    line-height: 1.6;
}

/* Estilo para los textos dentro de las tarjetas */
.card-body {
    text-align: center;
    padding: 20px;
}

/* Responsividad para dispositivos móviles */
@media (max-width: 768px) {
    #services .row {
        flex-direction: column;
        align-items: center;
    }

    #services .card-body img {
        max-width: 120px; /* Ajusta el tamaño de las imágenes en pantallas pequeñas */
        height: 120px;
    }

    #services h2 {
        font-size: 2rem; /* Ajusta el tamaño del título en pantallas pequeñas */
    }
}


/* Estilos para la Sección de Contacto */
#contact {
    background-color: #048ABF; /* Color de fondo similar al de tu logo */
    color: white;
    padding: 60px 0;
}

#contact h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 20px;
}

#contact p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

#contact .form-control {
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
}

#contact button {
    border-radius: 5px;
    padding: 12px 25px;
    font-size: 1.2rem;
    background-color: #F2F2F2; /* Un color neutro que resalte */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#contact button:hover {
    background-color: #BF9A56; /* Cambio de color al pasar el mouse */
}

/* Estilos para la imagen */
#contact img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    #contact .row {
        flex-direction: column-reverse;
    }

    #contact .col-md-6 {
        margin-bottom: 30px;
    }
}

/* Estilos para la Sección de Imagen */
#image-section {
    background-color: white;  /* Fondo blanco */
    padding: 60px 0;          /* Espaciado en la parte superior e inferior */
}

#image-section img {
    max-width: 40%;           /* Limita el tamaño de la imagen */
    height: auto;             /* Mantiene la proporción de la imagen */
    border-radius: 8px;       /* Bordes redondeados para la imagen */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera para dar profundidad */
}

/* Responsividad: Asegura que la imagen ocupe la mayor parte del ancho en pantallas pequeñas */
@media (max-width: 768px) {
    #image-section img {
        max-width: 80%;      /* La imagen ocupa el 100% del ancho en pantallas pequeñas */
    }
}

/* Estilo para la sección de reseñas */
#reviews .stars {
    color: #FFD700; /* Color dorado para las estrellas */
}

#reviews .stars .fa {
    font-size: 1.2rem;
}

#reviews .user-info img {
    border: 3px solid #ddd; /* Borde sutil alrededor de la imagen */
    padding: 5px; /* Espacio entre la imagen y el borde */
}

#reviews .card {
    border: none;
    border-radius: 8px;
}

#reviews .card-body {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#reviews .card-body p {
    font-style: italic;
}

#reviews .user-info p {
    font-size: 1rem;
    color: #555;
}


/* Estilo para el footer */
footer {
    background-color: #212121; /* Fondo oscuro para el footer */
    color: white;  /* Texto blanco para contraste */
    padding-top: 30px;
    padding-bottom: 30px;
}

footer h5 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

/* Responsividad: Ajustes en pantallas pequeñas */
@media (max-width: 768px) {

    footer .row {
        flex-direction: column;
    }

    footer .col-md-3 {
        margin-bottom: 30px;
    }
}