/* --- Importar Fuentes --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* --- Definir Variables --- */
:root {

    /* Colores */
     --ColorOscuro: #141414;
     --ColorClaro: #ffffff;
     --ColorClaroHover: #dfdfdf;
     --ColorContraste: #f0f2f1;
     --ColorAcento: #17c64f;
     --ColorAcentoHover: #12af44;
     /* Tipografías */
     --FuenteTipografia: "Poppins", sans-serif;
     --FontSizeH1: 40px;
     --FontSizeH2: 30px;
     --FontSizeH3: 26px;
     --FontSizeH4: 18px;
     /* Configuraciones */
     --MaxWidth: 1024px;
     --WidthBoxed: 88vw;
     --RadioEsquinasBotones: 10px;
     --RadioEsquinasSecciones:30px;
     --PaddingBotones: 14px 20px;
     --PaddingSecciones:35px;
     --AlturaSeparadorSecciones:60px;
     --AlturaSeparadorBeneficio:60px;
     --CambioDireccionMovil:column;
     --CambioAnchoColumnaMovil:100%;
     --CambioDireccionBeneficio:column;
     --CambioAnchoColumnaBeneficio:100%;
     --DisplayBreakRenglones: none;
     /* Elementos Página */
     --MenuHeaderOrdenMenu:3;
     --MenuHeaderOrdenLogin:2;
     --MenuAnchoElemento50:50%;
     --MenuAnchoElemento100:100%;
     --ImgWidthAplicativoMovil:65%;
     --ImgMarginBottomAplicativoMovil:-200px;
     --TamanoFuenteEstadisticaTitulo:14px;
     --BeneficioOrdenTexto:1;
     --BeneficioOrdenImagen:2;
     --CambioAnchoImagenBeneficio:100%;
     --CambioAnchoColumnaPlanesMovil:100%;
     --CambioDireccionPlanes: column;
     --DisplayImgPlanes:none;
     --DisplayImgPlanesMovil:block;
     --CambioDireccionLogos: column;
     --CambioDireccionFooterEnlaces:column;
     --CambioDireccionFooterMenus:column;
     --DisplayLoginInferior:none;
     --PosicionFooterSuperior: center;
     --CambioDireccionLegal:column;
}

/* --- Configuración General --- */
* {
    margin:0;
    padding:0;
    font-family: var(--FuenteTipografia);
    box-sizing: border-box;
    transition: background-color 0.5s, color 0.05s, filter 0.5s, border 0.5s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    text-align: center;
}

html {
    scroll-behavior: smooth;
  }

body{
    background-color: var(--ColorClaro);
    overflow-x: hidden;
}

h1{
    font-size: var(--FontSizeH1);
    line-height: 1em;
    font-weight: 500;
}

h2{
    font-size: var(--FontSizeH2);
    line-height: 1em;
    font-weight: 500;
}

h3{
    font-size: var(--FontSizeH3);
    line-height: 1em;
    font-weight: 500;
}

h4{
    font-size: var(--FontSizeH4);
    line-height: 1em;
    font-weight: 500;
}

p, li{
    font-size: 14px;
}

a, a:visited, a:active{
    color:var(--ColorClaro);
    text-decoration: none;
}

.Boxed{
    max-width: var(--MaxWidth);
    width: var(--WidthBoxed);
    margin: 0 auto;
    
}

.Positivo{
    background-color: var(--ColorClaro);
    color: var(--ColorOscuro);
}

.Negativo{
    background-color: var(--ColorOscuro);
    color: var(--ColorClaro);
}

.Boton{
    border-radius: var(--RadioEsquinasBotones);
    border:0;
    padding: var(--PaddingBotones);
    cursor:pointer
}

.TextoVerde{
    color:var(--ColorAcento);
}

.BotonPositivo{
    background-color: var(--ColorAcento);
    color: var(--ColorClaro);
}

.BotonPositivo:hover{
    background-color: var(--ColorAcentoHover);
}

.BotonNegativo{
    background-color: var(--ColorClaro);
    color: var(--ColorOscuro);
}

.BotonNegativo:hover{
    background-color: var(--ColorClaroHover);
}

.SeparacionSeccion{
    height: var(--AlturaSeparadorSecciones);
    display:block;
}

.SeparacionBeneficio{
    height: var(--AlturaSeparadorBeneficio);
    display:block;
}

.ImgWidth{
    width:100%;
}

.ImgBright{
    filter: brightness(100);
}

.BreakRenglones{
    display: var(--DisplayBreakRenglones);
}

/* ---------------------------- Configuración Secciones ---------------------------- */

/* ------------------- Configuración Header ------------------- */
.HeaderContent{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 30px 0;
flex-wrap: wrap;
row-gap: 30px;
}

.Logo img{
    width:130px;
    order: 1;
    flex-basis: var(--MenuAnchoElemento50);
}
/* ----------- Configuración Menú ----------- */
.Menu{
display: flex;
flex-direction: row;
justify-content: center;
gap:20px;
order: var(--MenuHeaderOrdenMenu);
flex-basis: var(--MenuAnchoElemento100);
}

.HeaderLogin{
    order: var(--MenuHeaderOrdenLogin);
    flex-basis: var(--MenuAnchoElemento50);
    text-align: end;
}

/* ------------------- Configuración Franja Imagen ------------------- */

.FranjaImagen{
    background-color: var(--ColorOscuro);
    border-radius: 0 0 var(--RadioEsquinasSecciones) var(--RadioEsquinasSecciones);
}

.ImgAplicativo{
    margin-bottom:-200px;
}

/* ------------------- Configuración Franja Estadísticas ------------------- */

.FranjaEstadisticasContent{
    margin-top: 200px;
    border: 2px solid var(--ColorContraste);
    border-radius: var(--RadioEsquinasSecciones);
    padding:20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    column-gap: 15px;
}

.Estadistica{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:10px;
}

.EstadisticaCifra{
    text-align: left;
    font-weight: 500;
    font-size:24px;
    line-height: 1em;
}

.EstadisticaTitulo{
    text-align: left;
    font-size: var(--TamanoFuenteEstadisticaTitulo);
    line-height: 1em;
}

.IconoEstadistica{
    width:36px;
}

/* ------------------- Configuración Franja Nosotros ------------------- */

.FranjaNosotrosContent{
    background-color: var(--ColorAcento);
    border-radius: var(--RadioEsquinasSecciones);
    color: var(--ColorClaro);
    display: flex;
    flex-direction: var(--CambioDireccionMovil);
    align-items: center;
    gap:20px;
    padding: var(--PaddingSecciones);
}

.ColumnaNosotros{
    text-align: left;
    width: var(--CambioAnchoColumnaMovil);
}

.ColumnaNosotrosCentrar{
    text-align: center;
}

.ImgAplicativoMovil{
    margin-bottom: var(--ImgMarginBottomAplicativoMovil);
    width: var(--ImgWidthAplicativoMovil);
}

.SeparacionSeccionMarginNegativoImgAplicativoMovil{
    height: calc(var(--AlturaSeparadorSecciones) - calc(var(--ImgMarginBottomAplicativoMovil) / 2));
    display:block;
}

.FranjaNosotrosContent h2, .FranjaNosotrosContent p, .FranjaEstadisticasContent button{
    text-align: left;
}

/* ------------------- Configuración Franja Beneficios ------------------- */

.SeccionBeneficios{
    background-color: var(--ColorContraste);
    border-radius: var(--RadioEsquinasSecciones);
    padding: var(--PaddingSecciones);
}

.Beneficio{
    display:flex;
    flex-direction: var(--CambioDireccionBeneficio);
    align-items: center;
    gap:35px;
}

.ColumnaBeneficio{
    width:var(--CambioAnchoColumnaBeneficio);
}
.ColumnaBeneficio p, .ColumnaBeneficio h2{
    text-align: left;
}

.ImgBeneficio{
    width:var(--CambioAnchoImagenBeneficio);
}

.BotonesBeneficios{
    display: flex;
    gap:20px;
}

.OrdenColumnaBeneficioImagen{
    order: var(--BeneficioOrdenImagen)
}

.OrdenColumnaBeneficioTexto{
    order: var(--BeneficioOrdenTexto)
}

/* ------------------- Configuración Franja Planes ------------------- */

.Planes{
    display:flex;
    flex-direction: var(--CambioDireccionPlanes);
    gap:20px;
}

.Plan{
    width:var(--CambioAnchoColumnaPlanesMovil);
    border-radius: var(--RadioEsquinasSecciones);
    padding: 40px;
    text-align: left;
}

.Plan h3, .Plan p, .Plan h4, .Plan li, .Plan button{
     text-align: left;
    
}

.PlanVerde{
    background-color: var(--ColorAcento);
    color: var(--ColorClaro);
}

.PlanGris{
    background-color: var(--ColorContraste);
    color: var(--ColorOscuro);
}

.ImagenPlanes{
    width:20%;
    background-image: url("../Images/Planes.jpg");
    background-position: center center;
    border-radius: var(--RadioEsquinasSecciones);
    background-size: cover;
    display: var(--DisplayImgPlanes);
}

.ImagenPlanesMovil{
    width:100%;
    background-image: url("../Images/PlanesMovil.jpg");
    background-position: center center;
    border-radius: var(--RadioEsquinasSecciones);
    background-size: cover;
    display: var(--DisplayImgPlanesMovil);
    height:200px;
    margin-top:20px;
}

.ListaBeneficios{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:10px;
}

.ImgCaracteristica{
    width:20px;
}

/* ------------------- Configuración Sección Logos ------------------- */

.SeccionLogos{
    display: flex;
    flex-direction: var(--CambioDireccionLogos);
    justify-content: center;
    gap:2vw;
}

.SeccionLogos img{
    width:100%;
    max-width: 380px;
}

/* ------------------- Configuración Footer ------------------- */

.Footer{
    border-radius: var(--RadioEsquinasSecciones) var(--RadioEsquinasSecciones) 0 0;
    padding: 80px 0 60px 0;
}

.FooterSuperior{
    display:flex;
    flex-direction: row;
    justify-content:var(--PosicionFooterSuperior);
}
.FooterInferior{
    display:flex;
    flex-direction: var(--CambioDireccionFooterEnlaces);
    justify-content:space-between;
    align-items: center;
    row-gap: 15px;
}
.MenuFooter{
    display:flex;
    flex-direction: var(--CambioDireccionFooterMenus);
    gap:15px;
}

.LoginInferior{
    display: var(--DisplayLoginInferior);
}

.Legal{
    background-color: var(--ColorContraste);
    color: var(--ColorOscuro);
    padding:15px;
}

.LegalContent{
    display: flex;
    flex-direction: var(--CambioDireccionLegal);
    gap: 16px;
    row-gap: 6px;
    justify-content: center;
}

.EnlacePowered, .EnlacePowered:visited, .EnlacePowered:active{
    color: var(--ColorOscuro);
}

/* ------------------- Configuración Footer ------------------- */
.WhatsAppPermanente{
    position: fixed;
    right:10px;
    bottom: 10px;
}

.WhatsAppPermanente img{
    width:60px;
    animation: AparecerLogo 3s;
    animation-iteration-count: 1;
}

@keyframes AparecerLogo {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }