/* Portada */
.portada-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 550px;
    /* Ajusta la altura según tus necesidades */
    width: 100%;
    /* Asegura que el contenedor tome todo el ancho disponible */
    background-size: cover;
    /* La imagen cubrirá el contenedor manteniendo su proporción */
    background-position: center;
    /* Centra la imagen */
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    position: relative;
    overflow: hidden;
    z-index: 0;
}

/* Imagen para la página "index" */
.portada-inicio {
    background-image: url(../images/Portadas/Inicio.png);
}

/* Imagen para la página "nosotros" */
.portada-nosotros {
    background-image: url(../images/Portadas/Nosotros.png);
}

/* Imagen para la página Servicios Maquinados */
.portada-maquinados {
    background-image: url(../images/Portadas/Maquinados.jpg);
}

/* Imagen para la página Servicios Soldadura */
.portada-soldadura {
    background-image: url(../images/Portadas/Soldadura.jpg);
}

/* Imagen para la página Servicios corte */
.portada-corte {
    background-image: url(../images/Portadas/Corte.jpg);
}

/* Imagen para la página Servicios Área de diseño */
.portada-diseno {
    background-image: url(../images/Portadas/Diseno.jpg);
}

/* Imagen para la página Servicios Ejecución de proyectos */
.portada-proyectos {
    background-image: url(../images/Portadas/Proyectos.jpg);
}

/* Imagen para la página Servicios Fabricación de ensambles */
.portada-ensambles {
    background-image: url(../images/Portadas/Ensambles.jpg);
}

/* Imagen para la página Servicios Compras */
.portada-compras {
    background-image: url(../images/Portadas/Compras.jpg);
}


/* Media Queries */

/* Ajustes para pantallas más pequeñas */
@media (max-width: 768px) {
    .portada-content {
        height: 300px;
        /* Ajusta la altura para pantallas más pequeñas */
    }
}

/* Ajustes para pantallas de teléfono */
@media (max-width: 480px) {
    .portada-content {
        height: 200px;
        /* Ajusta aún más la altura para pantallas de teléfono */
        background-size: contain;
        /* Asegúrate de que la imagen se ajuste dentro del contenedor */
    }
}


/* 
.text-container {
    text-align: center;
    color: #fff;
    z-index: 0;
}

.portada-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

.left-text,
.right-text {
    font-size: 1.5em;
    margin: 10px 0;
    opacity: 0;
    position: relative;
}

.left-text {
    animation: slideInLeft 2s forwards;
}

.right-text {
    animation: slideInRight 2s forwards;
}

.buttons {
    margin-top: 20px;
}

.btn-left,
.btn-right {
    padding: 10px 20px;
    margin: 10px;
    font-size: 1em;
    border: none;
    cursor: pointer;
    opacity: 0;
    position: relative;
}

.btn-left {
    background-color: #28a745;
    color: #fff;
    animation: slideInLeft 2s forwards 1s;
}

.btn-right {
    background-color: #007bff;
    color: #fff;
    animation: slideInRight 2s forwards 1s;
}

@keyframes slideInLeft {
    from {
        left: -100%;
        opacity: 0;
    }

    to {
        left: 0;
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        right: -100%;
        opacity: 0;
    }

    to {
        right: 0;
        opacity: 1;
    }
} */

/* Media Queries for Responsiveness
@media (max-width: 768px) {
    .sustentables-content {
        flex-direction: column;
        background: url('../images/Otros/Portada1.png');
    }

    h1 {
        font-size: 2em;
    }

    .left-text,
    .right-text {
        font-size: 1.2em;
    }

    .btn-left,
    .btn-right {
        font-size: 0.9em;
    }
} */