@import "fuentes.css";
@import "colores.css";

/* ==========================================================
    GENERAL
========================================================== */

/* WIDTH */
.wh100 { width: 100%; }
.wh90 { width: 90%; }
.wh80 { width: 80%; }
.wh70 { width: 70% ; }
.wh60 { width: 60%; }
.wh50 { width: 50%; }
.wh40 { width: 40%; }
.wh30 { width: 30%; }
.wh20 { width: 20%; }
.wh10 { width: 10%; }
.wh0 { width: 0%; }

/* HEIGHT */
.hg10 { height: 10%; }
.hg70 { height: 70%; }
.hg80 { height: 80%; }
.hg90 { height: 90%; }
.hg100 { height: 100%; }

.mb-100 { margin-bottom: 100px; }
.mb-40 { margin-bottom: 40px; }

.pb-100 { padding-bottom: 100px; }
.pb-40 { padding-bottom: 40px; }

.px-20 { padding: 0 20px; }

/* GAPS */
.c-gap-8 { column-gap: 8px; }
.c-gap-10 { column-gap: 10px; }
.c-gap-16 { column-gap: 16px; }
.c-gap-20 { column-gap: 15px; }
.c-gap-30 { column-gap: 15px; }
.c-gap-40 { column-gap: 40px; }

.r-gap-16 { row-gap: 16px; }
.r-gap-24 { row-gap: 24px; }
.r-gap-40 { row-gap: 40px; }

/* FADES */
.fadeOut { opacity: 0; }
.fadeIn { opacity: 100%; }
.transition-mid { transition: all ease-in-out 0.5s; }

html {
    scroll-behavior: smooth;
}

p {
    margin-bottom: 0;
}




.base-btn {
    border-radius: 20px;
    border: 2px solid #FFF;
    text-decoration: none;
    padding: 16px 24px;
    width: 351px;
    text-align: center;
    color: #FFF;
    background-color: transparent;
}

.base-btn-transparent, .base-btn-blue, .base-btn-white  {
    border-radius: 20px;
    border: 2px solid #FFF;
    text-decoration: none;
    font-size: 18px;
    padding: 16px 24px;
    width: 271px;
    text-align: center;
    color: #FFF;
    background-color: transparent;
}

.base-btn-transparent {
    border: 2px solid #FFF;
    color: #FFF;
    background-color: transparent;
}

.base-btn-blue {
    border: 2px solid #67D2FF;
    color: #FFF;
    background-color: #009CDE;
}

.base-btn-white {
    border: 2px solid #67D2FF;
    color: #062554;
    background-color: #FFF;
}

.necesito-ayuda-btn-cotizacion {
    width: 239px;
    background-color: #4dd834;
    border: none;
    position: fixed;
    bottom: 48px;
    right: 48px;
    opacity: 100%;
    z-index: 100000;
}

.header {
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    padding: 32px;
    transition: all ease-in-out 0.2s;
    z-index: 10;
}

#headerblock-mobile button{
    background-color: transparent;
    border: none;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

#headerblock-mobile img:nth-child(2){
    width: 168px;
}

.header-scrolled {
    background-color: #002454cc;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.header-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    background-color: transparent;
    border: none;
}



/* VARIABLES ============================================= */
:root {
    --max-width: 1160px;
}

.headerblock-hydro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

.top-advice {
    background-color: #FA7D09;
    padding: 8px;
    width: 100%;
}

.headerblock-hydro-inner {
    max-width: var(--max-width);
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px 15px;
}



/* EYECATCHER ========================================= */
#eyecatcher {
    position: relative;
    background-image: url(../imgs/pcp_eyecatcher.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eyecatcher-inner {
    max-width: var(--max-width);
    color: #FFF;
    width: 100%;
    padding: 160px 15px;
}

#eyecatcher-title {
    width: 60%;
}

#eyecatcher-subtitle {
    width: 40%;
    padding: 24px 0;
}

.base-btn-yellow {
    border-radius: 32px;
    border: solid 4px rgba(255, 255, 255, 0.2);
    background: #FA7D09;
    padding: 16px 12px;
    color: #FFF;
    font-size: 14px;
    width: 230px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.eyecatcher-dots {
    position: absolute;
    bottom: 59px;
    transform: translateX(-50%);
    left: 50%;
    display: flex;
    gap: 12px;
}

.eyecatcher-dot {
    background-color: #FFF;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    transition: all ease-in-out 0.5s;
    border: none;
}

.eyecatcher-dot-selected {
    background-color: #00B9F3;
    width: 69px;
    border-radius: 11px;
}

@media screen and (max-width: 768px) {
    #eyecatcher-title {
        width: 90%;
        font-size: 40px;
    }
    
    #eyecatcher-subtitle {
        width: 80%;
        padding: 24px 0;
    }
}

@media screen and (max-width: 576px) {
    .eyecatcher-inner {
        padding: 200px 15px;
    }
}



/* INVIERTE EN TU FUTURO ============================================ */
.invierte-en-tu-futuro {
    padding: 35px 15px 70px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F5F7FB;
}

.invierte-en-tu-futuro-inner {
    max-width: var(--max-width);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 60px;
}

.invierte-cards {
    display: flex;
    gap: 24px;
}

.invierte-card {
    background-color: #FFF;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: start;
    border-radius: 10px;
    width: 33%;
}

.pb-16 {
padding-bottom: 16px;
}

@media screen and (max-width: 768px) {
    .invierte-cards {
        flex-direction: column;
        align-items: center;
    }

    .invierte-card {
        width: 80%;
        align-items: center;
    }

    .invierte-card p {
        text-align: center;
    }
}



/* SOLUCUIONES INTEGRALES ============================================ */
.soluciones-integrales {
    padding: 60px 15px;
    background: linear-gradient(286deg, #0C1D65 11.74%, #1F3FC0 107.76%);
    display: flex;
    justify-content: center;
}

.soluciones-integrales-inner {
    max-width: var(--max-width);
}

.soluciones-cards {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.soluciones-card {
    background-color: #FFF;
    border-radius: 20px;
    max-width: 360px;
    box-shadow: 0 0 2px 10px rgba(255, 255, 255, 0.10);
}

.soluciones-card-top {
    padding: 24px;
}

.form-align {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.greybox {
    background-color: #EDF0F2;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    padding: 8px 16px;
}

.cotizar-btn {
    text-decoration: none;
    background-color: #FA7D09;
    color: #FFF;
    border: solid 4px #F1F1F1;
    border-radius: 32px;
    padding: 12px 16px;
    max-width: 230px !important;
    width: 100%;
}

.soluciones-card-precio {
    padding: 16px 24px;
    background-color: #00B9F3;
    border-radius: 0 0 20px 20px;
}

.hide {
    visibility: hidden;

}

.mb-18 {
    margin-bottom: 18px;
}

.mb-60 {
    margin-bottom: 60px;
}



/* BENEFICIOS ================================================== */
.beneficios {
    padding: 60px 15px;
    background: linear-gradient(286deg, #0C1D65 11.74%, #1F3FC0 107.76%);
    display: flex;
    justify-content: center;
}

.beneficios-inner {
    max-width: var(--max-width);
}

.beneficios-cards {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.beneficios-card {
    background-color: #FFF;
    border-radius: 20px;
    max-width: 360px;
    box-shadow: 0 0 2px 10px rgba(255, 255, 255, 0.10);
    padding: 24px;
}



/* CONOCE CUAL ES LA SOLUCION =========================== */
.conoce-cual-es-la-solucion {
    display: flex;
    justify-content: center;
    padding: 70px 15px;
    background-color: #F1F1F1;
}

.conoce-cual-es-la-solucion-inner {
    max-width: var(--max-width);
}

.conoce-cual-es-la-solucion-bottom {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding-top: 40px;
}

.whitebox {
    background-color: #FFF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    min-height: 86px;
}

.conoce-cual-es-la-solucion-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    width: 43%;
}

@media screen and (max-width: 768px) {

    .conoce-cual-es-la-solucion-bottom {
        flex-direction: column;
    }
    .conoce-cual-es-la-solucion-bottom img {
        width: 100%;
    }

    .conoce-cual-es-la-solucion-form {
        width: 100%;
    }

}



/* PREGUNTAS FRECUENTES ================================ */
.questionbox{
    color: #021225;
    cursor:pointer;
    transform:scale(1);
    transition:all ease .3s;
    display: flex;

}

.questionbox-inner {
    display: flex;
    justify-content: space-between;
}

.answarebox{
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    display:none;
}

.answarebox p{
    padding:10px;
}

.faqline{
    border:none;
    border-bottom: solid thin #005EFF;
}



/* QUIERO CONOCER =========================================   */
input[type="submit"]:disabled {
    background-color: red !important;
    color: green !important;
}

.quiero-conocer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4rem;
}

.quiero-conocer-inner {
    background-color: #DFECFF;
    max-width: var(--max-width);
    display: flex;
    justify-content: center;
    align-items: self-start;
    gap: 32px;
    border-radius: 20px;
    padding: 32px;
}

.quiero-conocer-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.quiero-conocer-form {
    display: flex;
    gap: 16px;
    width: 100%;
}

.quiero-conocer-form-input-wrapper {
    width: 50%;
    position: relative;
    display: flex;
}

.quiero-conocer-form input[type="text"],
.quiero-conocer-form input[type="email"] {
    border: none;
    width: 100%;
    padding-left: 1rem;
}

.quiero-conocer-form-input-wrapper:nth-of-type(1) input {
    border-radius: 20px;
    height: 43px;
    outline: solid 3px #fff;
}

.quiero-conocer-form-input-wrapper:nth-of-type(2) {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 20px;
    outline: solid 3px #fff;
}
.quiero-conocer-form-input-wrapper:nth-of-type(2) input:nth-of-type(1) {
    border-radius: 20px;
}
.quiero-conocer-form-input-wrapper:nth-of-type(2) input:nth-of-type(2) {
    width: 100%;
    max-width: 146px;
    border: none;
    background-color: #FA7D09;
    color: #FFF;
    border-radius: 20px;
    padding: 12px 16px;
}

.error {
    color: red;
    font-size: 14px;
}
#correo-error {
    position: absolute;
    bottom: -25px;
    left: 1rem;
}
#nombre_apellido-error {
    position: absolute;
    bottom: -25px;
    left: 1rem;
}

@media screen and (max-width: 768px) {
    .quiero-conocer-form {
        flex-direction: column;
        gap: 32px;
    }

    .quiero-conocer-form > input:nth-of-type(1) {
        width: 100%;
        height: 51px;
    }

    .quiero-conocer-form-input-wrapper {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .quiero-conocer-inner {
        flex-direction: column;
    }
}



/* FOOTER =========================================   */
footer {
    padding: 2rem;
}