/* =================================
   JUMBOTRON PRINCIPAL
================================= */

.custom-jumbotron {

    background-image: url("fondosomos.png");

    background-size: cover;

    background-position: right center;

    background-repeat: no-repeat;

    color: white;

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 60px 40px;

    margin-bottom: 0 !important;
    overflow: hidden; /* importante */

}

.custom-jumbotron .content {

    background-color: rgba(0, 0, 0, 0.6);

    padding: 20px;

    border-radius: 10px;

    max-width: 600px;

}

.custom-jumbotron h1,
.custom-jumbotron p {

    color: white;

}


/* =================================
   SECCIÓN EMPRESA
================================= */

.empresa-section {

    background-color: #2c2f36;

    padding: 80px 20px;

    margin-top: 0 !important;

}

.empresa-container {

    max-width: 1200px;

    margin: auto;

    display: flex;

    gap: 30px;

    justify-content: center;

    align-items: stretch;

    padding: 0 20px;

}

.empresa-card {

    background: white;

    padding: 30px;

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.08);

    flex: 1;

    text-align: left;

    transition: all 0.3s ease;

}

.empresa-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 35px rgba(0,0,0,0.25);

}

.empresa-card h2 {

    margin-bottom: 15px;

}

.empresa-card p {

    color: #555;

    line-height: 1.6;

}


/* =================================
   RESPONSIVE JUMBOTRON
================================= */

@media (max-width: 768px) {

    .custom-jumbotron {

        flex-direction: column !important;

        text-align: center;

        padding: 40px 20px;

        min-height: auto;

        background-position: center;

    }

    .custom-jumbotron .content {

        max-width: 100%;

        margin-right: 0 !important;

    }

    .custom-jumbotron img {

        margin-top: 25px;

        max-width: 90%;

        height: auto;

    }

}


/* =================================
   RESPONSIVE EMPRESA SECTION
================================= */

@media (max-width: 768px) {

    .empresa-container {

        flex-direction: column;

    }

}
/* =================================
   JUMBOTRON RESPONSIVE CELULAR
================================= */

@media (max-width: 768px) {

  .custom-jumbotron {

    padding: 40px 20px;
    min-height: auto;

  }

  .custom-jumbotron .content {

    position: relative;
    z-index: 2;

    background-color: rgba(0, 0, 0, 0.45);

    padding: 25px;
    border-radius: 10px;

    max-width: 550px;

  }

  .custom-jumbotron h1 {

    font-size: 32px;
    text-align: left;

  }

  .custom-jumbotron p {

    font-size: 16px;
    text-align: left;

  }

  .custom-jumbotron .btn {

    display: inline-block;
    margin-top: 10px;

  }
  .custom-jumbotron::before {

        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.75) 0%,
            rgba(0,0,0,0.65) 30%,
            rgba(0,0,0,0.45) 55%,
            rgba(0,0,0,0.25) 75%,
            rgba(0,0,0,0.1) 90%,
            rgba(0,0,0,0) 100%
        );

}
/* =================================
   OVERLAY PROFESIONAL
================================= */

.custom-jumbotron::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        to right,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.55) 35%,
        rgba(0,0,0,0.25) 60%,
        rgba(0,0,0,0.05) 80%,
        rgba(0,0,0,0) 100%
    );

    z-index: 1;

}
}