.contenedor-titulo{
    width: 100%;
    max-width: 80%;

    margin: 100px auto;

    text-align: center;

    color: #01A198;
}

.contenedor-titulo-duo{
    width: 100%;
    max-width: 50%;

    margin: 100px auto;

    text-align: center;

    color: #01A198;
}

.icono-acordion {
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.3s ease; /* Transición suave */
}

.accordion-button:not(.collapsed) .icono-acordion {
    transform: rotate(180deg); /* Rotar 180 grados cuando el acordeón está expandido */
}

.contenedor-elementos-fibra{

    width: 100%;
    max-width: 80%;

    margin: auto;

}

.contenedor-planes-fibra{

    display: flex;

    width: 100%;
    max-width: 100%;

    gap: 50px; 

    overflow-x: scroll; 

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Ocultar la barra de desplazamiento */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}

.contenedor-planes-fibra::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.contenedor-planes-duo{
    width: 100%;
    max-width: 70%;

    margin: auto auto 100px auto;

    display: flex;
    flex-wrap: wrap;

    gap: 80px;
}

.contenedor-plan-tv-digital{
    width: 100%;
    max-width: 45%;

    margin: auto auto 100px auto;

    display: flex;
    flex-wrap: wrap;
    gap: 80px;
}

.senior{
    display: inline-block;

    text-transform: uppercase;
    background-color: #B2E3DF;
    padding: 2px 5px 2px 5px;
    border-radius: 4px;



    font-size: 13px;
}

.item-fibra{

    background-color: #F7F7F7;
    border-radius: 20px;

    height: 100%;

    padding: 15px;

    flex: 0 0 25%;
    scroll-snap-align: start;

    text-align: start;
    box-sizing: border-box;
}

.contenedor-btn-carousel{
    display: flex;
    flex-direction: row;

    justify-content: end;
}

.carousel-button {
    background-color: #E0E0E3;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    color: #6A6A6C;

    border: 1px solid #ccc;
    border-radius: 50%;

    width: 40px;
    height: 40px;

    margin: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 1;

    transition: background-color 0.3s, transform 0.3s;
}

.item-duo{
    height: 100%;

    background-color: #F7F7F7;
    border-radius: 20px;

    padding: 15px;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;

    flex-grow: 1;
    flex-basis: 6.25rem;

    text-align: start;
}

.titulo-plan{
    
    width: 100%;

    border-bottom: 1.5px solid #9a9a9a;

}

.cantidad-plan{

    font-family: 'arkibal_display_ltlight';
    font-weight: bold;

    margin-bottom: 5px;

}

.wifi-6{

    display: inline-block;

    text-transform: uppercase;
    background-color: #B2E3DF;
    padding: 2px 5px 2px 5px;
    border-radius: 4px;

    margin: 5px;
}

.monto-plan{
    font-size: 30px;
    color: #01A198;

    margin: 0;
}

.modo-pago{
    font-weight: bold;

    margin-bottom: 5px;
}

.font-acordion{
    color: #01A198 !important;
}

.icono-detalles{
    margin-right: 20px;

    font-size: 22px;

    color: #01A198;
}

.texto-detalles{
    font-family: 'arkibal_display_ltlight';
    font-weight: bolder;

    font-size: 0.9rem;

    margin-bottom: 10px;

}

.accordion-body p:last-child{
    text-align: center;
}

.btn-terminos-planes{
    background: none;
    border: none;

    font-family: 'arkibal_display_ltlight';
    font-weight: bolder;

    font-size: 0.9rem;
    color: #6A6A6C;

    margin-bottom: 10px;
}

.btn-terminos-planes:hover{

    color: #00365f;

}

.contenedor-cuerpo-btn{
    display: flex;
    flex-direction: column;

    justify-content: center;
}

.contenedor-btn-close{
    width: 100%;

    display: flex;
    justify-content: flex-end;
}

.titulo-opc-btn-contratar{
    color: #00365f;
    text-align: center;
    font-weight: bolder;
}

.grupo-btn-form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 50px 0px 50px 0px;
}

.contenedor-dataclient{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 16px 0;
    width: 100%;
    max-width: 80%;

    text-align: start;
}

.contenedor-dataclient label{
    width: 100%;
    max-width: 90%;

    font-size: 12px;

    font-family: 'arkibal_display_ltlight';
    font-weight: bold;

    margin: 0 !important;

    color: #868686;
}

.contenedor-dataclient input{
    width: 100%;
    max-width: 10%;
}

.input-error-data{
    color: red !important;
}


.btn-contratar{
    background-color: #00365f;

    padding: 8px 50px 8px 50px;
    margin: 0px 0 20px 0;
    border-radius: 30px;
    border: none;

    width: 100%;
    max-width: 100%;

    text-align: center;
    text-decoration: none;

    color: #fff;

    transition: transform 0.3s;
}

.btn-forms-llamada{
    background-color: #00365f;

    padding: 8px 50px 8px 50px;
    margin: 0px 0 20px 0;
    border-radius: 30px;
    border: none;

    color: #fff;

    transition: transform 0.3s;
}

.btn-contratar:hover,
.btn-forms-llamada:hover{
    transform: translateY(-8px);
}

.contenedor-titulo-form-llamada{
    width: 100%;
    max-width: 85%;
}

.contenedor-form-llamada{

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: start;

    width: 100%;

}

.label-form-llamada{
    font-size: 1rem;

    font-family: 'arkibal_display_ltlight';
    font-weight: bolder;

    padding: 10px 0;

    color: #002942;

    margin-top: 30px;

}

.input-form-llamada{
    border: none;
    background-color: #ECECEC;

    padding: 10px;

    width: 100%;

    margin-bottom: 30px;
}

.contenedor-form-planes{
    margin: 20px;
    margin-top: 0px;
    text-align: center;
}

.titulo-form {
    font-size: 25px;
    font-family: 'arkibal_displayheavy';
    color: #00365f;

    line-height: 1 !important;

    margin-bottom: 0;
  }
  

.form-planes{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contenedor-inputs{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin: 16px;
    width: 100%;
    max-width: 80%;
}

.contenedor-inputs label{
    color: #868686;
}

.contenedor-inputs input{
    width: 100%;
    border: none;
    background: none;
    outline: 0;
    border-bottom: 1px solid #002942;
}

.boton-enviar{
    color: #fff;
    font-size: 1em;
    background-color: #00365f;
    border-radius: 30px;
    border: none;
    padding: 0.5em 2em;
    text-decoration: none;
    justify-content: flex-end!important;

}

.boton-enviar:hover{
    background-color: #00365f;
}


.boton-enviar {
    cursor: pointer;
    position: relative;
    padding: 5px 40px;
    font-size: 16px;
    color: #00365f;
    border: 2px solid #00365f;
    border-radius: 34px;
    background-color: transparent;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
}

.boton-enviar::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    background-color: #00365f;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.boton-enviar:hover::before {
    scale: 3;
}

.boton-enviar:hover {
    color: #fff;
    scale: 1.1;
    box-shadow: 0 0px 20px rgba(0, 54, 95,0.4);
}

.boton-enviar:active {
    scale: 1;
}

.input-error{
    border-bottom: 1px solid red !important;
}

.error-message{
    color: red;
}
  
.style-select{
    margin-top: 16px;
    width: 100%;
    border: none;
    background: none;
    outline: 0;
    text-align: center;
    border-bottom: 1px solid #002942;
    color: #00365f;
}

.style-modal-success{
    border: none !important;
    background-color: #F1F1F1 !important;
}

.btn-cerrar-success {
    cursor: pointer;
    position: relative;
    padding: 5px 40px;
    font-size: 16px;
    color: #ff0000;
    border: 2px solid #ff0000;
    border-radius: 34px;
    background-color: transparent;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
}

.btn-cerrar-success::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    background-color: #ff0000;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.btn-cerrar-success:hover::before {
    scale: 3;
}

.btn-cerrar-success:hover {
    color: #fff;
    scale: 1.1;
    box-shadow: 0 0px 20px rgba(255, 0, 0,0.4);
}

.btn-cerrar-success:active {
    scale: 1;
}

.msj-recibido{
    font-size: 25px ;
    color: #002942;
    font-family: 'arkibal_displayheavy';
}

.responder{
    font-size: 18px;
    color: #002942;
    font-family: 'arkibal_display_ltlight';
    font-weight: bold;
}

.banner-success{
    width: 100%;
    max-width: 20%;
}

.banner-fail{
    width: 100%;
    max-width: 20%;
    transform: rotate(180deg);
}


@media (max-width: 900px) {
    .contenedor-planes-duo,
    .contenedor-plan-tv-digital{
        max-width: 80%;
    }

    .contenedor-titulo-duo{
        max-width: 80%;
    }

    .senior {
        font-size: 12px;
    }
}


@media (max-width : 550px) {

    .modal-body{
        padding: 10px;
    }

    .contenedor-inputs{

        max-width: 100%;
    }

    .contenedor-dataclient {
        max-width: 100%;

    }

    .contenedor-dataclient label{
        max-width: 90%;

    }
    
    .contenedor-dataclient input{
        max-width: 10%;
    }


}