/********** Template CSS **********/
.separator{
    background:#6f1029;
    border-radius:5px;
    width:100%;
    height:1px;
}

@media (min-width:960px){
    .separator{
        width:8px;
        height:auto;
        min-height:100%;
    }
}
.letrero-circulo{
    background-color: #001e32!important;
    border-radius: 50px;
    color: white!important;
}
.process-box{
    background:#fff;
    border-radius:40px;
    box-shadow:0 15px 30px rgba(0,0,0,.18);
    overflow:hidden;
}
.text-dark-blue{ color:#08223D; }
.text-primary-custom{ color:#41B8C4; }
.title-big{
    font-size:28px;
    line-height:0.9;
}
.separator2{
    padding-top: -10px;
}
.especialidad{
    background-color: #6f1029;
    border-radius: 30px;
    color: white!important;
    width: fit-content!important;
    padding: 8px 20px;
    margin: 8px 5px;
}
.cuadro1{
    border: 3px solid #63aeae!important;
    border-radius: 30px;
    padding: 10px;
    text-align: center;
}
.cuadro2{
    border: 3px solid #001c31!important;
    border-radius: 30px;
    padding: 10px;
    text-align: center;
}

/* ==========================
   CONTENEDOR GENERAL
========================== */
.faq-box{
    background:#f5fafc;
    border-radius:70px;
    padding:60px 80px;
    box-shadow:0 15px 25px rgba(0,0,0,.18);
}


/* ==========================
   TÍTULO FAQ
========================== */
.faq-title{ gap:25px; margin-bottom:40px; }
.faq-title h2{
    color:#061e38;
    font-size:3.5rem;
    font-weight:900;
}

.faq-icon{
    color:#3bb4bf;
    font-size:100px;
    font-weight:900;
    line-height:.05;
    margin-top: 30px;
    font-family: "muli", sans-serif!important;
}

/* ==========================
   ACCORDION
========================== */
.faq-accordion{
    max-width:1000px;
    margin:auto;
}
.faq-accordion .accordion-item{
    border:0;
    background:transparent;
    margin-bottom:30px;
}

/* ==========================
   BOTÓN / PREGUNTA
========================== */
.faq-accordion .accordion-button{
    position:relative;
    background:transparent;
    border:0;
    box-shadow:none;
    padding: 10px 20px 10px 35px;
    color:#061e38;
    font-size:22px;
    font-weight:700;
}

/* Quitamos la flecha de Bootstrap */
.faq-accordion .accordion-button::after{ display:none; }

/* ==========================
   BARRA LATERAL
========================== */
.faq-accordion .accordion-button::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:10px;
    height:100%;
    background:#061e38;
}

/* Pregunta abierta */
.faq-accordion .accordion-button:not(.collapsed)::before{
    background:#86152d;
}

/* ==========================
   RESPUESTA
========================== */
.faq-accordion .accordion-body{
    padding: 0 30px 10px 55px;
    color:#17283f;
    font-size:1.5rem;
    line-height:1.5;
}

/* Texto destacado */
.faq-accordion .accordion-body strong{
    color:#86152d;
    font-weight:700;
    font-style:italic;
}

/* ==========================
   RESPONSIVE
========================== */
@media(max-width:768px){
    .faq-box{
        border-radius:35px;
        padding:40px 25px;
    }
    .faq-title{
        gap:15px;
        margin-bottom:30px;
    }
    .faq-title h2{ font-size:2.7rem; }
    .faq-icon{ font-size:70px; }
    .faq-accordion .accordion-button{
        font-size:1.25rem;
        padding-left:25px;
    }
    .faq-accordion .accordion-button::before{ width:7px; }
    .faq-accordion .accordion-body{
        font-size:1.1rem;
        padding-left:35px;
    }
}


/* =========================================
   CONTENEDOR
========================================= */
.start-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 40px;
    overflow: hidden;
    background: #f7f9fa;
    border: 0px solid #fff;
    border-radius: 60px;
    box-shadow: 0 18px 25px rgba(0,0,0,.22);
}

/* =========================================
   CONTENIDO
========================================= */
.start-box-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}
.start-box-title {
    margin: 0 0 10px;
    color: #087c91;
    font-size: clamp(1.0rem, 3vw, 4rem);
    font-weight: 800;
    line-height: 1;
}

.start-box-text {
    margin: 0;
    color: #071d38;
    font-size: clamp(1.0rem, 1.5vw, 2.0rem);
    line-height: 1.15;
}


/* =========================================
   IMAGOTIPO
========================================= */
.start-box-decoration {
    position: absolute;
    top: 15%;
    right: -85px;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.start-box-logo {
    display: block;
    width: clamp(180px, 16vw, 320px);
    height: auto;
    opacity: .25;
}

@media (max-width: 1199.98px) {
    .start-box { padding: 40px 40px; }
    .start-box-decoration { right: -95px; top: 70%; }
    .start-box-logo { width: 220px; }

    .start-box-title { font-size: clamp(2.0rem, 3vw, 3rem); }
    .start-box-text { font-size: clamp(1.5rem, 2vw, 2.5rem);}
}



/* ==============================
   FORMULARIO
============================== */
.contact-form{
    max-width:1400px;
    margin:auto;
}
/* ==============================
   ETIQUETAS
============================== */
.contact-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:68px;
    background:#82102d;
    color:#fff;
    border-radius:28px;
    padding:8px 20px;
    font-size:16px;
    font-weight:400;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    font-family: "muli", sans-serif;
}

/* ==============================
   INPUTS
============================== */
.contact-input{
    height:70px;
    background:rgba(255,255,255,.55);
    border:3px solid #82102d;
    border-radius:30px;
    padding:10px 30px;
    color:#071d38;
    font-size:18px;
    box-shadow:none;
    font-family: "muli", sans-serif;
}
.contact-input:focus{
    background:#fff;
    border-color:#82102d;
    box-shadow: 0 0 0 .25rem rgba(130,16,45,.15);
    color:#071d38;
}

/* ==============================
   BOTÓN SEND
============================== */
.contact-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    min-width:200px;
    min-height:80px;
    font-family: "muli", sans-serif;
    padding:10px 10px;
    background:#06213b;
    color:#fff;
    border:0;
    border-radius:30px;
    font-size:24px;
    font-weight:700;
    transition: transform .2s ease, background-color .2s ease,  box-shadow .2s ease;
}

.contact-submit-icon{
    margin-top: -5px!important;
}

.contact-submit:hover{
    background:#0a3155;
    transform:translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.contact-submit:active{
    transform:translateY(0);
}


/* ==============================
   RESPONSIVE
============================== */
@media(max-width:991.98px){
    .contact-form{
        padding:0 10px;
    }

    .contact-label{
        width:100%;
        min-height:50px;
        border-radius:20px;
        font-size:1.2rem;
        padding:10px 20px;
    }
    .contact-input{
        height:55px;
        border-width:3px;
        border-radius:22px;
        font-size:1.2rem;
    }
    .contact-submit{
        min-width:200px;
        min-height:65px;
        border-radius:25px;
        font-size:1.8rem;
    }
    .contact-submit-icon{
        font-size:2.7rem;
    }
}

.contact-input.is-invalid,
.was-validated .contact-input:invalid {

    border-color: #dc3545;
}


.contact-input.is-valid,
.was-validated .contact-input:valid {

    border-color: #198754;
}


.invalid-feedback {

    padding-left: 25px;

    margin-top: 8px;

    text-align: left;

    font-size: .95rem;
}


#contactMessage {

    max-width: 750px;

    margin-left: auto;

    margin-right: auto;
}


.contact-submit:disabled {

    opacity: .7;

    cursor: not-allowed;

    transform: none;
}

.contact-success {

    padding: 80px 20px;
}


.contact-success-icon {

    color: #39b7c3;

    font-size: 7rem;

    font-weight: 900;

    line-height: .7;
}


.contact-success h3 {

    margin-top: 25px;

    color: #08223D;

    font-size: 3.5rem;

    font-weight: 800;
}


.contact-success p {

    color: #17283f;

    font-size: 1.8rem;

    line-height: 1.3;
}



/* =====================================================
   SECCIÓN GENERAL
===================================================== */

.thankyou-section {

    min-height: 100vh;

    overflow: hidden;

    background: #fff;
}


/* =====================================================
   MENSAJE
===================================================== */

.thankyou-content {

    padding-top: 20px;
}


.thankyou-message {

    max-width: 850px;

    margin: auto;
}


.thankyou-title {
    margin: 0;
    color: #82102d;
    font-size: clamp(2rem, 4vw, 5rem);
    font-weight: 900;
    line-height: .9;
}
.thankyou-line {
    width: 60%;
    height: 6px;
    margin: 0px 35% 20px;
    background: #08223d;
}

.thankyou-subtitle {
    margin: 0;
    color: #00788d;
    font-size: clamp(1.3rem, 2.5vw, 3.5rem);
    font-weight: 900;
    line-height: .9;
}

.thankyou-description {
    margin: 20px 0 0;
    color: #08223d;
    font-size: clamp(0.7rem, 1.5vw, 2rem);
    font-weight: 400;
    line-height: 1.1;
}


/* =====================================================
   COMPOSICIÓN DE IMÁGENES
===================================================== */

.thankyou-images-column {

    position: relative;
}


.thankyou-images {

    position: relative;

    width: 100%;

    max-width: 680px;

    height: 720px;

    margin: auto;
}


/* LOGO */

.thankyou-logo {

    position: absolute;

    top: 30px;

    left: 25px;

    z-index: 5;

    width: 230px;

    height: auto;
}


/* CONTENEDORES DE FOTOS */

.thankyou-photo {

    position: absolute;

    overflow: hidden;

    z-index: 3;

    background: #fff;
}


.thankyou-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* FOTO SUPERIOR */

.thankyou-photo-top {

    top: 0;

    right: 20px;

    width: 310px;

    height: 470px;

    border-radius: 160px;
}


/* FOTO PRINCIPAL */

.thankyou-photo-main {

    left: 50px;

    bottom: 0;

    width: 350px;

    height: 520px;

    border: 12px solid #fff;

    border-radius: 180px;

    z-index: 4;
}


/* CÍRCULO DECORATIVO */

.thankyou-circle {

    position: absolute;

    left: 10px;

    bottom: -15px;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    border: 25px solid #00788d;

    z-index: 1;
}


/* =====================================================
   CÁPSULA AZUL
===================================================== */

.thankyou-confidence {

    position: relative;

    width: fit-content;

    min-width: 500px;

    margin-top: 10px;

    padding: 15px 60px 15px 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #08223d;

    border-radius: 60px;

    color: #fff;

    text-align: center;

    font-size: 1.2rem;

    line-height: 1.05;
}


.thankyou-confidence strong {

    color: #36b6c2;

    font-size: 1.8rem;
}


.thankyou-confidence-icon {

    position: absolute;

    left: -15px;

    width: 85px;

    height: auto;
}


/* =====================================================
   TARJETAS
===================================================== */

.thankyou-steps {

    margin-top: 45px;
}


.thankyou-card {

    height: 100%;

    min-height: 260px;

    padding: 25px 15px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    background: #f7f8f8;

    border-radius: 35px;

    box-shadow:
        0 12px 15px rgba(0,0,0,.20);

    text-align: center;
}


.thankyou-card h3 {

    min-height: 45px;

    margin: 0;

    color: #35b5c0;

    font-size: 1.2rem;

    font-weight: 700;

    line-height: .95;
}


.thankyou-card-icon {

    display: block;

    width: 85px;

    height: 85px;

    margin: 15px auto;

    object-fit: contain;
}


.thankyou-card p {

    margin: 0;

    color: #08223d;

    font-size: 1rem;

    line-height: 1.05;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1199.98px) {

    .thankyou-images {

        height: 650px;
    }


    .thankyou-photo-top {

        width: 270px;

        height: 420px;
    }


    .thankyou-photo-main {

        width: 310px;

        height: 470px;
    }


    .thankyou-circle {

        width: 380px;

        height: 380px;
    }


    .thankyou-logo {

        width: 190px;
    }

}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 767.98px) {

    .thankyou-section {

        padding-top: 20px !important;
    }


    /* MENSAJE */

    .thankyou-message {

        max-width: 340px;

        text-align: left !important;
    }


    .thankyou-title {

        font-size: 3.7rem;

        line-height: .9;
    }


    .thankyou-line {

        width: 75%;

        height: 5px;

        margin:

            8px
            auto
            18px
            0;
    }


    .thankyou-subtitle {

        font-size: 2.25rem;

        line-height: .95;
    }


    .thankyou-description {

        margin-top: 10px;

        font-size: 1.55rem;

        line-height: 1.3;
    }


    /* IMÁGENES */

    .thankyou-images-column {

        margin-top: -15px;
    }


    .thankyou-images {

        max-width: 360px;

        height: 590px;
    }


    .thankyou-logo {

        top: auto;

        left: auto;

        right: 5px;

        bottom: 55px;

        width: 155px;
    }


    .thankyou-photo-top {

        top: 0;

        right: 0;

        width: 185px;

        height: 320px;

        border-radius: 100px;
    }


    .thankyou-photo-main {

        left: 20px;

        bottom: 0;

        width: 230px;

        height: 390px;

        border-width: 8px;

        border-radius: 120px;
    }


    .thankyou-circle {

        left: -10px;

        bottom: -10px;

        width: 285px;

        height: 285px;

        border-width: 16px;
    }


    /* CÁPSULA */

    .thankyou-confidence {

        min-width: 0;

        width: 90%;

        margin-top: 35px;

        padding:

            12px
            20px
            12px
            55px;

        border-radius: 45px;

        font-size: .85rem;
    }


    .thankyou-confidence strong {

        font-size: 1.4rem;
    }


    .thankyou-confidence-icon {

        left: -10px;

        width: 65px;
    }


    /* TARJETAS */

    .thankyou-steps {

        max-width: 580px;

        margin:

            45px
            auto
            0;
    }


    .thankyou-card {

        min-height: 250px;

        padding:

            20px
            12px;

        border-radius: 25px;
    }


    .thankyou-card h3 {

        font-size: 1rem;
    }


    .thankyou-card-icon {

        width: 70px;

        height: 70px;
    }


    .thankyou-card p {

        font-size: .9rem;
    }

}