* {
    font-family: DINPro, arial;
    margin: 0;
    padding: 0;
}

:root {
    --GrisClaro: #F8F9FB;
    --GrisMedio: #BABABA;
    --GrisLine: #D1D1D1;
    --GrisLine50: #d1d1d18c;
    --AzulProfundo: #204780;
    --AzulClaro: #14C1EA;
    --AzulNeon: #00FFFF;
    --Naranjado: #FF5C39;
    --AlternativoNegro: #333333;
    --Negro: #000000;
    --Blanco: #FFFFFF;
}

body{
    margin:0;
}

a {
    text-decoration:none;
}
.ContenidoGeneral{
    height:800px;
    margin-top: 77px;
}

#myHeader {
    position: fixed;
    width: 100%;
    top: 0;
    transition: top ease .3s;
    z-index: 1000;
    height: auto;
    overflow: initial;
}

header a {
    text-decoration: none !important;
}

/* 
=============================================================================
============================================================================= HEADER CONTACT 
=============================================================================  
*/
.GOV_CO {
    margin-left: 30px;
}

.Header__Contact {
    height: auto;
    background-color: var(--GrisClaro);
    display: flex;
    flex-wrap: wrap;
}

.Header__Contact a {
    font-size: 70%;
    margin-right: 30px;
    color: var(--AzulProfundo);
    transition: .2s all ease-in-out;
}

.Header__Contact-left {
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.Header__Contact-right {
    width: 60%;
    display: flex;
    justify-content: end;
    align-items: center;
}

.Header__Contact-PagarFactura {
    display: flex;
    align-items: center;
    transition: .3s all ease-in-out;
}

.Header__Contact-PagarFactura img:hover {
    fill: var(--AzulProfundo);
}

.Header__Contact-PagarFactura:hover {
    transform: scale(1.1);
}

.Header__Contact-PagarFactura span {
    color: var(--AzulProfundo);
    margin-left: 8px;
    font-weight: 800;
}

.Header__Contact-right a:hover {
    color: var(--AzulProfundo);
    font-weight: 800;
}

/* 
============================================================================= FIN HEADER CONTACT 
============================================================================= 
============================================================================= INICIO HEADER NAV
*/
.Header__Nav {
    width: 100%;
    height: 50px;
    background-color: var(--AzulProfundo);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.Header__LogoETB {
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Header__Enlaces {
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    list-style: none;
    z-index: 1;
}

.Header__BtnBurgerContainer {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Header__LogoETBlink {
    display: flex;
}

.Header__Enlaces>li {
    height: 100%;
    transition: .3s all ease-in-out;
}

.Header__Nav-BtnHam {
    width: 30px;
    height: 50px;
}

.Header__Nav-BtnBurger {
    display: flex;
    cursor: pointer;
}

.Header__Option--a {
    position: relative;
    color: var(--Blanco);
    height: 100%;
    padding: 0 17px;
    font-size: 88%;
    transition: .3s all ease-in-out;
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.Header__Option--a:hover {
    color: var(--AzulNeon)
}

.MenuTriangulo {
    width: 20px;
    height: 20px;
    background-color: var(--GrisClaro);
    position: absolute;
    top: 40px;
    left: 36px;
    transform: rotate(45deg);
    display: none;
    transition: .3s all ease-in-out;
}

.MenuTrianguloNegocios {
    margin: 0 0 0 30px;
}

.MenuTrianguloEmpresas {
    margin: 0 0 0 80px;
}

.MenuTrianguloSomos {
    margin: 0 0 0 24px;
}
.MenuTrianguloInfo{
    margin: 0 0 0 8px;
}
.MenuDesplegable {
    width: 100%;
    height: auto;
    padding: 35px;
    background-color: var(--GrisClaro);
    display: flex;
    gap: 30px;
    justify-content: center;
    position: absolute;
    left: 0;
    z-index: 1;
    transition: .3s all ease-in-out;
    /* opacity: 0; */
    visibility: hidden;
}
.VerDesplegable{
    visibility: visible;
    /* opacity: 100; */
}
.MenuDesplegable:hover {
    /* opacity: 100; */
    visibility: visible;
}
.OpcionMenu::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--GrisClaro);
    position: absolute;
    top: 40px;
    left: 36px;
    transform: rotate(45deg);
    /* display: none; */
    display: flex;
    transition: .3s all ease-in-out;
    /* opacity: 0; */
    visibility: hidden;
}

.OpcionMenu:hover+.MenuDesplegable,
.OpcionMenu:hover::before {
    transition-delay:.3s ;
    opacity: 100;
    visibility: visible;
}
/* .OpcionHogares::before {
    opacity: var(--OpacityHogares) ;
    visibility: var(--VisibilityHogares) ;
}
.OpcionMoviles::before {
    opacity: var(--OpacityMoviles) ;
    visibility: var(--VisibilityMoviles) ;
} */
.OpcionNegocios::before {
    top: 40px;
    left: 66px;
    /* opacity: var(--OpacityNegocios) ;
    visibility: var(--VisibilityNegocios) ; */
}

.OpcionEmpresas::before {
    top: 40px;
    left: 116px;
    /* opacity: var(--OpacityEmpresas) ;
    visibility: var(--VisibilityEmpresas) ; */
}

.OpcionSomos::before {
    top: 40px;
    left: 60px;
    /* opacity: var(--OpacitySomos) ;
    visibility: var(--VisibilitySomos) ; */
}
.OpcionInfo::before {
    top: 40px;
    left: 44px;
     /* opacity: var(--OpacityInfo) ;
    visibility: var(--VisibilityInfo) ;  */
}


.Header__ul {
    margin-top: 5px;
}

.Header__Li {
    background-image: url('../img/iconos-menu/arrow-right.svg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
    display: flex;
    border-bottom: 1px dashed var(--GrisLine50);
    padding: 7px;
}

.Header__BtnCaja {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header__Btn {
    width: 100%;
    height: 80px;
    background-color: var(--Blanco);
    border-radius: 20px;
    border: 1px solid var(--GrisLine);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--AlternativoNegro);
    transition: transform 1s cubic-bezier(.5, 0, 0, 1), opacity 1s cubic-bezier(.5, 0, 0, 1);
    ;
}

.header__Btn:hover {
    transform: scale(1.1);
}

.header__Btn--icon {
    margin: 0 20px;
}

.header__Btn--Arrow {
    width: 40px;
    height: auto;
    margin-right: 10px;
    transition: transform 1s cubic-bezier(.5, 0, 0, 1), opacity 1s cubic-bezier(.5, 0, 0, 1);
}

.header__Btn--Arrow:hover {
    transform: translateX(10px);
}

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



.Title {
    color: var(--AzulProfundo);
    font-size: 15px;
    font-weight: 900;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;
    margin: 0 0 10px 0;
}

.Title2 {
    color: var(--AzulProfundo);
    font-size: 15px;
    font-weight: 900;
}

.Title-Blue {
    font-weight: 700;
    color: var(--AzulClaro);
    font-size: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;
}
.SubMenuPospago {
    margin-left: 20px;
}
.TitleNormal {
    font-weight: 700;
    color: var(--AlternativoNegro);
    font-size: .81rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;
}
.TitleNormal2{
    font-weight: 500;
    color: var(--AlternativoNegro);
    font-size: .81rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
}
.LogoETB {
    width: 45px;
    height: 35px;
}

.Enlace-Desplegable {
    color: var(--AlternativoNegro);
    margin-left: 15px;
    font-size:.8rem;
    text-align: inherit;
}

.Enlace-Desplegable:hover {
    color: var(--Naranjado);
    font-weight: 800;
    transition: .2s ease all;
}

.LineMenuResponsive {
    display: none;
}

.LineGeneral {
    width: 0;
    height: 50%;
    margin-left: 30px;
    border-right: 1px dashed var(--AzulClaro);
    position: relative;
    top: 0;
    right: 0;
}

.slider1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contentHogares,
.ContentMoviles,
.ContentNegocios,
.ContentEmpresas,
.ContentSomos,
.ContentInfo,
.ContentMiETB,
.ContentTienda {
    width: 100%;
    height: 100%;
}

.ContentMoviles {
    width: 100%;
    height: 100%;
}

.OpcionMenu {
    height: 50px;
}

.btn-left {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.btn-leftNoIcon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.Header__Btn--cerrar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.Header__Btn--cerrar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--AlternativoNegro);
    cursor: pointer;
}

.Header__Btn--cerrar a img {
    width: 40px;
    height: 40px;
}

.rotar {
    transform: rotate(90deg);
}

.arrow_rotar {
    display: none;
}

.arrow_rotarAlternativo {
    display: flex;
    width: 25px;
}

.EmpresasCerrarBtn {
    position: relative;
}

.DesplegableEmpresas {
    gap: 20px;
    width: 100vw;
    padding: 35px 0px;
}

.DesplegableEmpresas .LineGeneral {
    margin-left: 30px;
}

.DesplegableEmpresas div {
    width: 220px;
}

.expanded,
.expanded2 {
    height: auto !important;
}

.OcultarOpciones {
    height: 40px;
    overflow: hidden;
    border-bottom: 1px dashed var(--GrisLine50);
    margin: 0 0 10px 0;
}
.OcultarOpciones2{
    height: 30px;
    overflow: hidden;
    border-bottom: 1px dashed var(--GrisLine50);
}
.Activo {
    color: var(--AzulClaro);
}

.MenuInterior {
    margin: 10px 0 0 0;
    padding: 0 0 0 40px;
}
.MenuInterior2 {
    padding: 0;
    margin: 0 0 0 20px;
}
.header__BtnCorto{
    height: 50px;
}
.header__BtnCorto img {
    width: 1.5rem;
}
.SubMenuInterior {
    height: 40px;
    overflow: hidden;
    border-bottom: 1px dashed var(--GrisLine);
    text-align: left;
    color: #333333;
    margin-bottom: 10px;
}

.OcultarAlgoGeneral {
    display: none;
}

.MostrarAlgoGeneral {
    display: flex;
}

.DesplegableInfo {
    width: auto;
}

.BtnHeaderTienda {
    background-color: var(--AzulClaro);
    display: flex;
    padding: 10px 20px 10px 15px;
    width: 119px;
    justify-content: center;
    gap: 5px;
    margin: 0 0 0 10px;
    height: 50px;
}

.BtnTiendaAlternativo {
    padding: 0;
    margin:0;
}

.BtnTiendaAlternativo:hover {
    color: var(--Blanco);
}
.Add_OptionsResponsive{
    display: flex;
    list-style: none;
}
.SubMenu9 {
    display: flex;
    gap: 20px;
}
.LineGeneral2{
    margin: 0;
    height: 32vh;
}
.Header__CajaConBtn{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.DesplegableNegocios{
    gap: 20px;
    width: 95vw;
}

.expandedNegocios{
    height: auto;
}
.NegociosAjuste{
    justify-content: center;
}
.ContentSubMenu10{
    display: flex;
    gap: 10px;
}
.SubMenu10 {
    width: 470px !important;
}
.Title_PlanETBTotal{
    color: var(--AlternativoNegro);
    font-size: .8rem;
    font-weight: 500;
}

.Title_PlanETBTotal:hover {
    color: var(--Naranjado);
    font-weight: 800;
    transition: .2s ease all;
}

@media (max-width: 1164px){
    .expandedNegocios{
        height: 60px;
    }
    .BorderTop{
    border-top: 1px dashed var(--GrisLine);
    }
    .Header__BtnBurgerContainer{
        display: flex;
    }
    .ContentSubMenu10{
        flex-direction: column;
    }
    .SubMenu10{
        width: 100% !important;
    }
    .BtnHeaderTienda{
        background: none;
    }
    .IconBtnHeaderTienda {
        display: none;
    }
}
/* 
============================================================================= FIN GENERALES
============================================================================= 
============================================================================= INICIO SECTION SOMOS
*/
.ContentCajaSomos {
    width: 75%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 20px;
}

.ContentCajaSomos a:hover {
    transform: scale(1.1);
}

.SubCajaSomos1 {
    width: 320px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #efefef;
    border-radius: 20px;
    padding: 30px;
    transition: transform 1s cubic-bezier(.5, 0, 0, 1), opacity 1s cubic-bezier(.5, 0, 0, 1);
}

.SubCajaSomos1 div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.SubCajaSomos2 {
    width: auto;
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
    justify-content: center;
    max-width: 1000px;
}

.cajainterna {
    width: 100%;
    height: 80px;
    background-color: var(--Blanco);
    border-radius: 20px;
    border: 1px solid var(--GrisLine);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--AlternativoNegro)
}

.CajaSomosInterna {
    /*width: 150px;*/
    width: 216px;
    background-color: #fff;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    border: 3px solid #efefef;
    border-radius: 20px;
    text-align: center;
    padding: 30px;
    transition: transform 1s cubic-bezier(.5, 0, 0, 1), opacity 1s cubic-bezier(.5, 0, 0, 1);
}

.CajaSomosInterna:hover {
    transform: scale(1.1);
}

.CajaInfoUsuario {
    width: auto;
    display: none;
}

.li-noBorder {
    border: none;
}

/* 
============================================================================= FIN SECTION SOMOS
============================================================================= 
============================================================================= INICIO RESPONSIVE
*/

@media(min-width: 1164px)  {
    .Header__Nav-BtnBurger{
        display: none;
    }
    .Header__BtnBurgerContainer{
        display: none;
    }
}

@media(min-width: 1500px) {
    .DesplegableNegocios{
        width: 97vw;
    }

    .Header__CajaDesplegable div{
        width: 100% !important;
        max-width: 480px;
    }
}
@media (max-width:1164px) {
    #myHeader {
        position: relative;
    }
    .Header__Enlaces {
        display: none;
    }
    .OpcionMenu:hover::before {
        display: none;
    }

    .Header__Enlaces {
        flex-direction: column;
        position: absolute;
        top: 50px;
        background-color: var(--AzulProfundo);
        width: 100%;
        height: auto;
    }

    .Header__Enlaces>li {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .Header__Option--a {
        width: auto;
        height: 60px;
        justify-content: center;
        transition: all .3s ease-in-out;
        font-size: 18px;
    }

    .Header__Option--a:hover {
        color: var(--Blanco);
    }

    .Header__Hogares,
    .Header__Moviles,
    .Header__Negocios,
    .Header__Empresas,
    .Header__Somos,
    .Header__Info,
    .Header__MiETB,
    .Header__Tienda {
        overflow: hidden;
        flex-direction: column;
        justify-content: initial;
        height: auto;
    }

    .MenuDesplegable {
        width: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 0px;
        padding: 18px;
    }

    .Header__Caja {
        flex-direction: column;
    }

    .LineGeneral {
        width: 100%;
        margin: 0;
        border-bottom: 1px dashed var(--GrisLine);
        height: 1px;
        border-right: none;
    }

    .MenuTriangulo {
        display: none;
    }

    .SubMenu {
        height: 60px;
        overflow: hidden;
        transition: height 0.3s ease-out;
    }

    .Title {
        display: flex;
        height: 60px;
        width: 100%;
        cursor: pointer;
        align-items: center;
        color: var(--AzulProfundo);
        justify-content: space-between;
        text-align: center;
    }

    .Title-Blue {
        color: var(--AzulProfundo);
    }

    .Submenu1 {
        height: 60px;
    }

    .expanded,
    .expanded2 {
        height: auto;
    }

    .contentHogares,
    .ContentMoviles,
    .ContentNegocios,
    .ContentEmpresas,
    .ContentSomos,
    .ContentInfo,
    .ContentMiETB,
    .ContentTienda {
        width: 100%;
        height: 60px;
    }

    .selectedBtn {
        background-color: var(--AzulClaro);
        color: var(--Blanco);
    }

    .submenuInterno {
        height: 50px;
        width: 90%;
        overflow: hidden;
        margin-left: 10%;
        border-bottom: 1px dashed var(--GrisLine);
    }

    .OpcionMenu {
        height: 60px;
    }

    .SubMenuInterno3 {
        border: none;
        margin-bottom: 20px;
    }

    .lineFinal {
        display: none;
    }

    .Header__BtnBurgerContainer {
        width: 20%;
    }

    .Header__LogoETB {
        width: 20%;
    }

    .Header__Contact-PagarFactura {
        margin-left: 35px;
    }

    .arrow_rotar {
        display: flex;
        transition: .3s all ease-in-out;
    }

    .ArrowSmall {
        width: 25px;
    }

    .Header__Btn--cerrar {
        display: none;
    }

    .submenu_title {
        display: flex;
        align-items: center;
        margin: 8px 0 0 0;
    }

    .Cards {
        flex-direction: column;
        align-items: center;
    }

    .Card {
        width: 80%;
    }

    .SubMenuInterior {
        height: 50px;
        width: 90%;
        overflow: hidden;
        margin-left: 10%;
        border-bottom: 1px dashed var(--GrisLine);
        text-align: left;
        color: #333333;
    }

    .MenuInterior {
        padding: 0 0 0 24px;
    }

    .DesplegableEmpresas div {
        width: auto;
    }

    .ContentCajaSomos {
        width: auto;
    }

    .CajaSomosInterna {
        width: 60px;
    }

    .LineMenuResponsive {
        display: inline-block;
        width: 70%;
        border-style: dashed;
        color: #ffffff4a;
        margin: 0;
    }
}

@media (max-width: 820px) {
    .Header__Contact-PagarFactura {
        margin-left: 35px;
        margin-bottom: 5px;
    }

    .Header__Contact-right {
        margin-bottom: 5px;
    }

    .Header__BtnBurgerContainer {
        width: 20%;
    }

    .Header__LogoETB {
        width: 20%;
    }
}

@media (max-width: 475px) {
    .Header__Contact {
        flex-direction: column;
        justify-content: center;
    }

    .Header__Contact-right {
        width: 90%;
        margin: 5px auto;
        gap: 10px;
        font-size: 12px;
    }

    .Header__Contact-left {
        width: 100%;
        flex-wrap: initial;
    }

    .Header__BtnBurgerContainer {
        width: 15%;
        display: flex;
        justify-content: start;
    }

    .Header__Contact-PagarFactura {
        margin: 0;
    }

    .Header__Contact-right a {
        margin: 0;
    }

    .Header__LogoETB {
        width: 20%;
        justify-content: end;
    }

}
@media screen and (min-width: 1165px) and (max-width:1257px){
    .DesplegableHogares{
        width: auto;
    }
    .CajaSomosInterna{
        width: 130px;
    }
}


@media (min-width: 1165px){
    .Add_OptionsResponsive{
        display: none;
    }
}
.OcultarH {
    display: none !important;
}

.MostrarH {
    display: flex;
}