.ctn-interno-cuerpo{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 25px 0;
}
.interno-cuerpo{
    max-width: 1500px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 5%;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.interno-cuerpo a:hover svg{
    fill: var(--red-one);
}

/* RUTA */
.pre-cuerpo-ruta{
    display: flex;
    gap: 5px;
}

.pre-cuerpo-ruta-desglosable{
    height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 5px;
}

.pre-cuerpo-ruta a{
    font-family: roboto-medium;
}
.pre-cuerpo-ruta .actual{
    color: var(--red-one);
    font-family: roboto-bold;
}

.ctn-pre-cuerpo-desglosable{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 250px;
    height: 100%;
    position: relative;
}
.ctn-pre-cuerpo-desglosable .rojo-actual{
    color: var(--red-one);
    font-family: roboto-medium;
}
.ctn-pre-cuerpo-desglosable .otros-desplegables svg{
    fill: var(--gray-txt) !important;
}
.ctn-pre-cuerpo-desglosable.active .otros-desplegables svg{
    fill: var(--red-one) !important;
}
.ctn-pre-cuerpo-desglosable.active .otros-desplegables{
    color: var(--red-one);
}
.ctn-pre-cuerpo-desglosable.active .otros-desplegables svg{
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.pre-cuerpo-desglosable{
    display: flex;
    align-items: center;
    justify-content:space-between; 
    border-radius: 10px;
    background-color: var(--pie-pagina);
    padding: 5px 15px;
    box-sizing: border-box;
    color: var(--gray-txt);
    font-family: roboto-medium;
    box-shadow: 0 0 4px #8b8b8b;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    height: 100%;
}
.otros-desplegables-contenido{
    display: none;
    z-index: 1;
    overflow: hidden;
    justify-content: start;
    align-items: center;
    position: absolute;
    top: 110%;
    box-sizing: border-box;
    gap: 10px;
    border-radius: 15px;
    box-shadow: 0 0 4px #8b8b8b;
    background-color: var(--pie-pagina);
}

.otros-desplegables-contenido ul{
    display: flex;
    flex-direction: column;
    padding: 10px 30px;
    gap: 5px;
}

.otros-desplegables-contenido ul li::marker{
    color: var(--red-one);
}
.otros-desplegables-contenido ul li{
    list-style-type: square;
}
.otros-desplegables-contenido ul li a:hover{
    color: var(--red-one);
}

.otros-desplegables, .otros-desplegables-contenido{
    max-width: 250px;
    width: 100%;
}

/* FIN DE RUTA */


/* VENTAJAS Y BTN */
.pre-cuerpo-ventajas-btn-izq{
    /* width: auto; */
    width: 100%;
    gap: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.pre-cuerpo-ventajas-btn-izq-title{
    font-size: 20px;
    font-family: roboto-bold;
    color: var(--gray-txt);
}
.pre-cuerpo-ventajas-btn{
    display: flex;
    justify-content: center;
}
.ventajas-info{
    display: flex;
    justify-content: space-around;
}
.ventajas-info p{
    font-size: 16px;
    line-height: 24px;
}

.ventajas-info-item{
    width: 180px;
}
.ventajas-info-item-title{
    font-size: 16px;
    font-family: roboto-medium;
}

.ventajas-info-item-txt{
    font-size: 14px;
}

/* derecha */
.pre-cuerpo-ventajas-btn-der{
    width: 210px;
    padding: 0 0 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}
.pre-cuerpo-ventajas-btn-der-btn{
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--red-one);
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    width: 200px;
    min-width: 90px !important;
    height: 50px;
    color: var(--red-one);
    font-family: roboto-bold;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transition: all 0.25s ease-in-out;
}
.pre-cuerpo-ventajas-btn-der-btn:hover{
    background: var(--red-one);
    color: white !important;
    transition: all 0.25s ease-in-out;
}
.pre-cuerpo-ventajas-btn-der-btn:hover img{
    filter: drop-shadow(0 0 12px white);
}

.pre-cuerpo-ventajas-btn-der-btn img{
    height: 80%;
}


/*DESGLOSABLES*/

.pie-pagina {
    background-color: var(--pie-pagina);
    display: flex;
    width: 90%;
    height: 280px;
    padding: 30px 5%;
    gap: 5%;
}

.ctn-title-desglosable-general {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    gap: 5px;
}

.ctn-pre-txt-title svg{
    display: block;
    fill: var(--gray-txt);
    width: 24px;
    transition: transform 0.3s ease;
}
.pp-txt-enlaces{
    padding-left: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 16px;
    overflow: hidden;
    height: 0;
    margin-left: 10px;
    transition: height 0.5s ease;
}

.pp-txt-enlaces p{
    font-size: 16px;
    
}
.pp-txt-enlaces a:hover svg{
    fill: var(--red-one);
}

 /* para desplegar */
.informacion,
.atc-presencial,
.atc-cliente {
    gap: 0px;
}

.pie-pagina .pp-title {
    padding: 20px 0;
}

.svc-cliente-title .pp-title {
    padding: 0px;
}


.activo .pp-title {
    color: var(--red-one) !important;
}

.activo svg {
    fill: var(--red-one);
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.ctn-pre-txt-title {
    /* position: sticky;
    top: 69px; */
    width: 100%;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 15px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    background-color: #F7F7F7;
    border-bottom: 1px solid #CCCCCC;
    border-radius: 5px;
    font-family: roboto-medium;
    font-size: 16px;
    color: var(--gray-txt);
    /* color: black !important; */
}
.ctn-pre-txt-title.activo{
    color: var(--red-one) !important;
}
.ctn-pre-txt-title .pp-title{
    font-family: roboto-medium ;
    font-size: 16px;
    color: var(--gray-txt);
}
.pp-txt-enlaces-txt{
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    gap: 5px;
}

.pp-txt-enlaces-txt ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nivel-1{
    padding: 5px 0 10px 0 ;
}

.nivel-1 > li{
    width: fit-content;
    font-family: roboto-bold;
    font-size: 16px;
    line-height: 24px;
}

.nivel-1 > li::marker{
    list-style-type: disc;
    color: var(--red-one);
    font-size: 18px;
    font-family: roboto-bold;
}

.nivel-2 li{
    width: fit-content;
    font-size: 16px;
    font-family: roboto-regular;
}

.nivel-2 li::marker{
    /* color: var(--gray-txt); */
    color: #818181;
    font-size: 18px;
}

.nivel-1-numeracion > li{
    list-style-type: decimal !important;
    color: var(--red-one);
    font-family: roboto-bold;
}

.nivel-1-numeracion > li::marker {
    font-size: 16px;
}
.nivel-1-numeracion > ul{
    margin-left: 20px;
}

.numero > li{
    list-style-type: decimal !important;
}

.numero-r > li{
    color: var(--red-one)!important;
    list-style-type: decimal !important;
}

.letra > li{
    list-style-type: lower-alpha !important;
}
.romano > li {
    list-style-type: lower-roman !important;
}
.romano-ma > li{
    list-style-type: upper-roman !important;
}

.numero li::marker, .letra li::marker, .romano li::marker, .romano-ma li::marker{
    font-size: 18px;
    font-family: roboto-bold;
}

.nivel-2{
    margin-left: 20px;
}
.nivel-3{
    margin-left: 20px;
}
.nivel-4{
    margin-left: 20px;
}

.nivel-2 li{
    line-height: 24px;
    list-style-type: disc;
}

.nivel-3 li{
    width: fit-content;
    line-height: 24px;
    list-style-type: circle;
}
.sin-lista li{
    list-style: none;
}

a:hover{
    color: var(--red-one)!important;
}

a:hover svg{
    fill: var(--red-one)!important;
}

/* .nivel-2 a{
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 5px;
} */

/* aplicaremos a todos los li dentro de .sin-estilos-txt, pero no a los hijos */
.sin-estilos-txt > li{
    font-family: roboto-regular;
}
/* fin de aplicación */

.lista-bold > li {
    font-family: roboto-bold;
}

.lista-medium > li {
    font-family: roboto-medium;
}

.lista-regular > li {
    font-family: roboto-regular;
}

.lista-light > li {
    font-family: roboto-light;
}

.lista-sin-estilo > li{
    font-family: roboto-regular !important;
    margin-left: -20px;
    list-style-type: none !important;
}

/* fin de aplicación */

.sin-estilo-lista{
    font-family: roboto-regular !important;
    margin-left: -20px;
    list-style-type: none !important;
}
.hover-rojo li a:hover{
    color: var(--red-one);
}


.sin-estilo-lista-nivel-2 ul li{
    margin-left: -20px;
    list-style-type: none !important;
}


.enlaces-documentos:hover, .enlaces-documentos:hover svg{
    color: var(--red-one);
    fill: var(--red-one);
    text-decoration: underline !important;
}

.enlaces-documentos,.enlaces-documentos span{
    width: fit-content;
    gap: 5px;
    font-family: roboto-regular;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* vertical-align: middle; */
    text-decoration: none !important;
}

.ff-medium,.ff-m{
    font-family: roboto-medium !important;
}

.ff-bold,.ff-b{
    font-family: roboto-bold !important;
}

.ff-regular,.ff-r{
    font-family: roboto-regular !important;
}

.ff-a-r{
    font-family: Aalto-regular !important;
}

.ff-a-m{
    font-family: Aalto-medium !important;
}

.ff-a-b{
    font-family: Aalto-Bold !important;
}

.svg-green svg{
    fill: var(--green);
}
.svg-green:hover svg{
    fill: var(--green);
}
.pl-20{
    padding-left: 20px;
}
.ml_-20{
    margin-left: -20px;
    line-height: 24px;
}

.pl-40{
    padding-left: 40px;
}

.a-enlaces-s{
    font-family: roboto-medium;
    text-decoration: underline;
}


.a-enlaces{
    font-family: roboto-medium;
}

.a-enlaces:hover svg{
    text-decoration: none !important;
    fill: var(--red-one);
}

.a-enlaces:hover{
    text-decoration: underline;
    color: var(--red-one);
}
.a-enlaces-s:hover{
    color: var(--red-one) !important;
}
/* ENLACE PLOMO */
.txt-enlace-plomo > li{
    line-height: 24px;
    list-style-type: disc;
    width: fit-content; 
}
.txt-enlace-plomo >li::marker{
    font-size: 18px;
    color: #818181;
}
.txt-enlace-plomo a{
    /* text-decoration: underline; */
    font-family: roboto-medium;
}
.txt-enlace-plomo a:hover{
    color: var(--red-one);
}
/* ENLACE PLOMO */
.disc-rojo >li::marker{
    color: var(--red-one) !important;
}

h3{
    font-family: roboto-bold;
}

.fs-16{
    font-size: 16px;
    line-height: 22px;
}
.pe{
    pointer-events: none;
}
/* HACEMOS QUE EVITE EL SALTO DE LINEA  */

/* para desplegar */

/* Boton enviar solicitud */
.ctn-btn-enviar-solicitud{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: start;
}

.btn-enviar-solicitud{
    padding: 15px;
    border: 1.5px solid var(--red-one);
    color: var(--red-one);
    font-family: roboto-medium;
    max-width: fit-content;
    border-radius: 15px;
    transition: all 0.2s ease-in-out;
}

.btn-enviar-solicitud:hover{
    background: var(--red-one);
    transition: all 0.2s ease-in-out;
    color: white;
}

.letras-s{
    font-size: 14px;
    font-family: roboto-medium;
}

.pantalla-completa{
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
}

h2{
    font: 20px roboto-bold;
    color: var(--gray-txt);
}