body {
    font-family: "Outfit", sans-serif;
    color: #260254;
    margin: 0;
    padding: 0;
}
/* ESTILOS GENERALES */
section { padding: 2%; }
h1 { 
    font-size: 70px; 
    font-weight: 600; 
    text-transform: uppercase;
}
h2 {
    font-size: 40px; 
    font-weight: 600; 
    text-transform: uppercase;
}
p { 
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0.02em;
}
.btn-primary {
    background-color: #E04D26;
    color: #FFFFFF;
    border: 0;
    text-transform: uppercase;
    font-weight: 600;
}
.btn-primary:hover {
    background-color: #A13517;
}
/* NAVBAR */
.navbar {
    height: 60px;
    width: 90vw;
    margin: 2em auto;
    padding: 0 5em;
    background-color: #F7F2ED;
    border-radius: 9px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.15), 0px 10px 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
} 
.navbar .navbar-nav {
    gap: 2rem;
}
.logo {
    height: 65px;
}
.logo { height: 65px; }
.navbar .nav-link { text-transform: uppercase; } 
/* HERO SECTION */
.hero-section {
    background-image: url('../assets/fondo-hero.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    color: #FFFFFF;
    display: flex;          
    align-items: center;
    padding-top: 90px;  
}
.hero-section .col-lg-6 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-section h1 { line-height: normal; }
.hero-section span { 
    background-color: #E04D26; 
    padding: 0 10px;
    margin-bottom: 20px;
}
.hero-section .btn-primary { 
    width: 100%; 
    font-size: 24px; 
}
.hero-section img {
    object-fit: contain;
    height: 70vh;
    max-width: 100%;
}
/* SECTION COMO */
#como_lo_hacemos {
    position: relative;
    background-image: url('../assets/fondo-1.jpg');
    background-size: cover;
    background-position: center; 
    z-index: 1;
}
#como_lo_hacemos::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: -1;
}
#como_lo_hacemos h2 {
    font-size: 80px;
    text-align: center;
    margin-bottom: 2%;
}
#como_lo_hacemos p { padding: 0 10%;}
.image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-container img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Botones */
.floating-btn {
    position: absolute;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    transition: 0.2s;
    font-size: 28px;
    text-transform: none;
}
.floating-btn:hover {
    transform: scale(1.05);
}
.btn-1 {
    top: 46%;
    left: 22%;
}
.btn-2 {
    top: 46%;
    left: 65%;
}
.btn-3 {
    top: 93%;
    left: 38%;
}
/* SECTION INVESTIGACION */
#investigacion {
    background-color: #F7B5A7B2;
padding: 5% 0;
}
#investigacion .row, #diseño .row, #desarrollo .row {
    justify-content: center;
    align-items: center;
}
#investigacion img, 
#diseño img,
#desarrollo img,
#contact img {
    display: block;
    margin: 0 auto;
}
#investigacion h2, 
#diseño h2,
#desarrollo h2 {
    margin-bottom: 5%;
}
#investigacion strong { font-weight: 600; } 
/* SECTION DISEÑO */
#diseño {
    background-color: #AF52DE80;
    padding: 5% 0;
}
#diseño .content {
    padding: 5% 10%;
}
#diseño h2 { color: #E04D26; }
#diseño .content h4 { 
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 1.5rem; 
}
/* SECTION DESSARROLLO */
#desarrollo {
    background-color: #F7B5A7B2;
    padding: 5% 0;
}
#desarrollo .content {
    padding: 5% 10%;
}
#desarrollo .content h4 { 
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 1.5rem; 
}
/* CONTACT */
#contact {
    padding: 5%;
    position: relative;
    background-image: url('../assets/fondo-1.jpg');
    background-size: cover;
    background-position: center; 
    z-index: 1;
}
#contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: -1; 
}
#contact img{
    height: 40vh;
    max-width: 100%;
    margin-bottom: 5%;
}
#contact h2 {
    font-size: 50px;
    padding: 0 10%;
}
#contact span {
    background-color: #E04D26;
    color: #FFFFFF;
    padding: 0 10px;
}
.card { 
    width: 80%;
    border: 0;
    box-shadow: 20px 20px 40px rgba(0, 0, 0, .3);
}
.card-body {
    text-align: center;
    color: #260254;
}
.card-body h4 {
    font-size: 40px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
}
.card-body p { margin-bottom: 0; }
.b24-form-control-container { text-align: left; }
.b24-form-btn { 
    width: 60% !important; 
    font-size: 18px !important;
    text-transform: uppercase;
}
.b24-form-sign span, .b24-form-sign-info span {
    background-color: transparent !important;
    color: #260254 !important;
}
/* FOOTER */
footer {
    background-color: #260254;
    padding: 5%;
    color: #FFFFFF;
    text-transform: uppercase;
}
footer .logo-footer {width: 60%; margin-bottom: 20px;}
footer .icon { width: 24px;}
footer h5 { font-size: 16px; margin-bottom: 10%; font-weight: 700; letter-spacing: 0.1em; }
footer ul { padding-left: 0;}
footer li {
    list-style-type: none;
    margin-bottom: 15px;
    font-size: 14px;
}
footer li a{
    color: #FFFFFF;
    text-decoration: none;
}
footer .contact-info { text-transform: none; }
/* ESTILOS TABLET */
@media (max-width: 1280px) {
    h1 { font-size: 50px; }
    h2 { font-size: 30px; }
    /* COMO */
    #como_lo_hacemos { padding: 5%;}
    #como_lo_hacemos h2 { font-size: 52px; margin-bottom: 5%; }
    #como_lo_hacemos p { padding: 0 5%;}
    /* Botones */
    .floating-btn { font-size: 20px; }
    .btn-1 { top: 46%; left: 14%; }
    .btn-2 { top: 46%; left: 68%; }
    .btn-3 { top: 95%; left: 35%; }
    /* INVESTIGACION - DISEÑO - DESARROLLO */
    #investigacion, #diseño, #desarrollo, #contact { padding: 5%;}
    #diseño .content, #desarrollo .content { padding: 5% 0; }
    /* CONTACT */
    #contact h2 {
        font-size: 50px;
        padding: 0;
    }
    .card { width: 100%; }
}
@media (max-width: 1000px) {
    /* NAVBAR */
    .navbar { 
        margin-bottom: 0; 
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px; 
        padding: 0 1rem;
    }
    .navbar img { height: 55px; }
    .navbar-toggler {
        padding: 0.25rem 0.5rem;
        display: flex;
        align-items: center;
    }
    .navbar-collapse {
        background: #F7F2ED;
        border-radius: 8px;
        padding: 1rem;
    }
    .navbar .navbar-nav { gap: 2rem !important; }
    /* HERO */
    .hero-section h1 { padding-right: 40%;}
    .hero-section .btn-primary { margin: 2% 0; }
    .hero-section img { height: 38vh; margin: 0 auto; display: block; }
    /* COMO - Botones */
    .floating-btn { font-size: 20px; }
    .btn-1 { top: 46%; left: 14%; }
    .btn-2 { top: 46%; left: 65%; }
    .btn-3 { top: 95%; left: 30%; }
    /* INVESTIGACION - DISEÑO - DESARROLLO */
    #investigacion img, #diseño img, #desarrollo img, #contact img { width: 100%; height: auto; }
    /* CONTACT */
    #contact h2 {
        font-size: 45px;
        padding: 0;
        margin-bottom: 5%;
        text-align: center;
    }
    .card { width: 100%; }
    .card-body h4 { font-size: 35px; }
    .b24-form-btn { 
        width: 100% !important; 
        font-size: 20px !important;
    }
    /* FOOTER */
    footer { padding: 10% 5%; text-align: center; }
    footer .logo-footer {width: 40%;}
    footer .icon { width: 32px; margin: 30px 0; }
    footer h5 { font-size: 22px; margin: 5% 0; }
    footer li { font-size: 18px; }
}
/* ESTILOS MOBILE */
@media (max-width: 767px) {
    h1 { font-size: 32px; }
    p { font-size: 20px; }
    /* HERO */
    .hero-section { padding-top: 130px; }
    .hero-section img { height: 35vh;}
    /* COMO */
    #como_lo_hacemos h2 { font-size: 44px; margin-bottom: 10%; }
    /* Botones */
    .floating-btn { font-size: 18px; display: none; }
    .btn-1 { top: 46%; left: 2%; }
    .btn-2 { top: 46%; left: 65%; }
    .btn-3 { top: 93%; left: 15%; }
    /* FOOTER */
    footer .icon { width: 28px;}
    footer h5 { font-size: 18px; margin: 10% 0; }
    footer li { font-size: 16px; }
}