/*
 * Descripción: CUSTOM
 * Copyright (c) 2023
*/


/*===================================
			Google Fonts 
=====================================*/

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,600;6..12,700&display=swap');
/*
	font-family: 'Nunito Sans', sans-serif;
*/


/*===================================
       Colores light / dark
=====================================*/

:root {
  --ep-body-font-size: 1em;
  --ep-body-font-weight: 400;
  --ep-body-line-height: 1.5;
  --ep-fuente-principal:'Nunito Sans', sans-serif, Arial, Helvetica;
  
  --ep-colordest: #2898ee;
  --ep-colordest-hover: #2898ee;
  --ep-colordest-active: #2898ee;
  --ep-colordest-txt:#fff;
  --ep-colordest-fill: #2898ee;
  --ep-filter-colordest: brightness(0) saturate(100%) invert(56%) sepia(30%) saturate(6009%) hue-rotate(182deg) brightness(98%) contrast(90%);
                        
  --ep-filter-grisclaro: brightness(0) saturate(100%) invert(49%) sepia(7%) saturate(617%) hue-rotate(175deg) brightness(94%) contrast(85%);
  --ep-filter-grisoscuro: brightness(0) saturate(100%) invert(26%) sepia(84%) saturate(252%) hue-rotate(172deg) brightness(84%) contrast(88%);
  --ep-filter-blanco: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7475%) hue-rotate(236deg) brightness(112%) contrast(100%);
  --ep-filter-rojo: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(5878%) hue-rotate(9deg) brightness(88%) contrast(121%);
  --ep-filter-color-principal: brightness(0) saturate(100%) invert(18%) sepia(6%) saturate(3549%) hue-rotate(178deg) brightness(97%) contrast(88%);

  --ep-color-principal:#2b394f;
  --ep-color-principal-hover:#2b394f;
  --ep-color-principal-focus:#2b394f;

  --ep-color-fondo-active:#ffcf35;
  --ep-color-texto-active:#000;
  
  --ep-rojo:#cf2121;
  --ep-rojo-txt:#fff;
  --ep-verde:#21cfa3;
  --ep-verde-oscuro:#2fd565;

  --ep-grisclaro:#717984;
  --ep-grisoscuro:#364a63;

  --ep-purpura:#7729c9;
  --ep-granate:#551d4d;
  --ep-morado: #626ed4;
  --ep-amarillo:#ffcf35;
  --ep-azul: #2898ee;
  --ep-cian:#09c2de;
  --ep-light:#8D8D8D;
  --ep-dark:#3c3346;
  --ep-blanco: #ffffff;
  --ep-negro: #000;
  --ep-rosa:#fdc8d6;
  --ep-naranja:#ffa600;
  
  --ep-fondoweb:#fff;
  --ep-fondoweb-transparente:rgba(255,255,255,0.7);
  --ep-fondoinfo:#ebeef2;
  --ep-fondoclaro:#f4f6fa;
  --ep-fondoscuro:#788391;
   
  --ep-linea: rgba(0,0,0,0.16);
 	
  --ep-color-borde:#dce0e5;

  --ep-msg-rojo-borde:#f7c1bd;
  --ep-msg-rojo-fondo:#fceae9;
  --ep-msg-amarillo-borde:#fbe7a8;
  --ep-msg-amarillo-fondo:#fef7e2;
  --ep-msg-verde-borde:#aef4e1;
  --ep-msg-verde-fondo:#e4fbf5;
  
  --ep-form-txt:#000;
  --ep-form-color: #8D8D8D;
  --ep-form-fondo:#ffffff;
  --ep-form-borde: #dce0e5;
  --ep-form-borde-hover:#dce0e5;
  --ep-form-borde-active:#000;
  --ep-form-txt-active:#000;
  --ep-form-disabled:#c2c2c2;
  
  --ep-form-label-top: #8D8D8D;
  --ep-form-label-top-active: #000;
  
  --ep-form-color-light: #364a63;
  --ep-form-fondo-light:#e9ecef;
  --ep-form-borde-light: #d3d9df;
  
  --ep-form-color-disabled:#8D8D8D;
  --ep-form-fondo-disabled:#dce0e5;
  --ep-form-borde-disabled:#dce0e5;

}

.dark {
    --ep-fondoweb:#000000;
    --ep-fondoweb-transparente:rgba(0,0,0,0.7);
    --ep-color-principal:#fff;
	--ep-color-principal-hover:#fff;
	--ep-color-principal-focus:#fff;
    --ep-color-borde:#494d52;

    --ep-filter-color-principal: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7475%) hue-rotate(236deg) brightness(112%) contrast(100%);

    --ep-fondoclaro:#191919;
    --ep-fondoscuro:#464c54;
	
	--ep-linea: rgba(255,255,255,0.16);	

    --ep-msg-rojo-borde:#e5352f;
    --ep-msg-rojo-fondo:#e5352f;
    --ep-msg-amarillo-borde:#fbe969;
    --ep-msg-amarillo-fondo:#fbe969;
    --ep-msg-verde-borde:#7bcdab;
    --ep-msg-verde-fondo:#7bcdab;
	
	--ep-form-txt:#fff;
	--ep-form-color: rgba(255,255,255,.7);
	--ep-form-fondo:#2d3237;
	--ep-form-borde: rgba(255,255,255,.24);
	--ep-form-borde-hover:#8D8D8D;
	--ep-form-borde-active:#fff;
	--ep-form-txt-active:#fff;
	--ep-form-disabled:#c2c2c2;
	
}

/*=========================
        Generales
=========================*/

svg {max-width: inherit;}

.enlinea, .d-inline-block, .contenidos-enlinea{display:inline-block !important;}
.enbloque, .d-block{display:block !important}

.noborder, .sinborde{border:none!important;}

strong, b, .bold{font-weight:700;}
.semibold{font-weight:600;}
.medium{font-weight:500;}
.normal{font-weight:400;}
.light{font-weight:300;}

a{color:inherit; text-decoration:inherit;}
a:hover{color:inherit; text-decoration:inherit;}

a{color: var(--ep-color-principal);}
a:hover {color: var(--ep-color-principal-hover);}
a:focus {color: var(--ep-color-principal-focus);}

a.underline, .underline {
    border-bottom: 0px solid transparent;
    border-bottom-color: initial;
    display: inline;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

#dimensions {background-color:rgba(0, 0, 0, 0.8); color: #fff;}

::selection { background:var(--ep-colordest);  color:var(--ep-colordest-txt);}
::-moz-selection { background:var(--ep-colordest); color:var(--ep-colordest-txt);}

.scrolltop{color:var(--ep-colordest-txt); background:var(--ep-colordest); border-radius:4px; padding:6px 12px;}

blockquote {
    color: var(--ep-color-principal);
    background-color: rgba(151,151,192,0.1);
    border-left: 3px solid var(--ep-colordest);
    border-radius:inherit;
}

.sombra {
    -webkit-box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.1);
    box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.1);
}

.dark .sombra {
    -webkit-box-shadow: 0px 2px 4px 2px rgba(255,255,255,0.1);
    -moz-box-shadow: 0px 2px 4px 2px rgba(255,255,255,0.1);
    box-shadow: 0px 2px 4px 2px rgba(255,255,255,0.1);
}

.linea {background: var(--ep-color-borde);}

.post-texto {padding: 0px 0px 2px 8px;}

.redondo{border-radius: 8px!important;-moz-border-radius: 8px !important; -webkit-border-radius: 8px !important;}
.redondo.borde-l-size{border-radius:12px !important; -moz-border-radius: 12px !important; -webkit-border-radius: 12px !important;}
.redondo.borde-s-size{border-radius:4px !important; -moz-border-radius: 4px !important; -webkit-border-radius: 4px !important;}
.redondo-bottom{border-radius: 0px 0px 8px 8px !important; -moz-border-radius: 0px 0px 8px 8px !important;-webkit-border-radius: 0px 0px 8px 8px !important;}
.redondo-bottom.borde-l-size{border-radius: 0px 0px 8px 8px !important; -moz-border-radius: 0px 0px 8px 8px !important;-webkit-border-radius: 0px 0px 8px 8px !important;}

.img-sidezoom .sidezoom img{border:0px solid rgba(0,0,0,0.1)}

.img.s-size{height: 16px; margin-bottom: 4px;}
.img.xs-size{height: 14px;}

.body-modal img{max-width: 80px}
.cerrar-modal {top: 0px;}

/*filtros svg colores*/
.svg-colordest{filter:var(--ep-filter-colordest);}
.svg-blanco{filter:var(--ep-filter-blanco);}
.svg-rojo {filter: var(--ep-filter-rojo);}
.svg-color-principal {filter: var(--ep-filter-color-principal);}
.svg-grisclaro{filter:var(--ep-filter-grisclaro);}
.svg-sombra{filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}

/*==============================
        Cartas de pago
==============================*/

.contenedor.maxsize{max-width: 1080px; margin:15px auto;}
@media (max-width: 991px) {.contenedor.maxsize{max-width: mone;}}

.zona-cartas-pago{
    /*border:1px solid var(--ep-color-borde);*/
    padding:20px 0px;
    margin:0 auto 0px auto;
    display: flex;
    flex-direction: column;
    gap:4px;
    position: relative;
    top: -11px;
    border-top: 0px;
}

.zona-input{
    border:1px solid var(--ep-color-borde);
    height: 48px;
    display: flex;
    align-items: center;
    width: 100%;
    padding:10px 15px;
    margin:0px auto 10px auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.zona-input.ko{border-color:#e92020;}
.zona-input.noborder{border: 0px solid transparent; padding:10px 0px}

.zona-logos{display:flex; flex-wrap: wrap; gap:6px;justify-content: center;}
.zona-logos img{border:1px solid var(--ep-color-borde);background-color: white; border-radius: 4px;padding: 2px 3px;}

.zona-logos.botones{position:relative}
.zona-logos.botones img{width:150px; height:80px;background-color: white; padding: 15px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.zona-logos.botones img:hover{border: 1px solid var(--ep-colordest)}

.zona-logos.cripto{justify-content: left;}
.zona-logos.cripto img{border: none; width: 180px; height: 60px; margin:10px auto 5px auto}
.dark .zona-logos.cripto img{
    filter: drop-shadow(-1px -1px 12px rgba(255,255,255,0.9)) drop-shadow(1px -1px 12px rgba(255,255,255,0.5)) drop-shadow(1px -2px 12px rgba(255,255,255,0.3)) drop-shadow(-1px 1px 12px rgba(255,255,255,0.3))
}
.zona-logos.cripto img:hover{border: none}

.boton_cripto{width:48%; padding:5px;border: 1px solid var(--ep-color-borde); background-color: white; color:black; text-align: center; font-size: 0.8125em; line-height: 1; cursor:pointer;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.boton_cripto:hover{border: 1px solid var(--ep-colordest)}
.boton_cripto p{margin-top:5px; font-weight: 600;}

@media (max-width: 790px){
    .zona-logos.cripto{justify-content: center;}
    .zona-logos.botones img{width:120px; padding:5px}
}

@media (max-width: 430px){
    .boton_cripto{width:100%;}
    .zona-logos.cripto img{width: 240px; height: 80px;}
}

.zona-logos.monedas{justify-content: left;}
.zona-logos.monedas img{border: none;background-color: transparent; max-height: 60px; margin:10px auto 5px auto}
.zona-logos.monedas img{
    filter: drop-shadow(-1px -1px 2px rgba(255,255,255,0.1)) drop-shadow(1px -1px 2px rgba(255,255,255,0.1)) drop-shadow(1px 1px 2px rgba(255,255,255,0.1)) drop-shadow(-1px 1px 2px rgba(255,255,255,0.1))
}
.zona-logos.monedas img:hover{border: none}

.boton_monedas{width:138px; padding:5px;border: 1px solid var(--ep-color-borde); text-align: center; font-size: 0.75em; cursor:pointer;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.boton_monedas:hover{border: 1px solid var(--ep-colordest)}

@media (max-width: 790px){
    .zona-logos.monedas{justify-content: center;}
}

/*==============================
            Tabs
==============================*/

.tabs {border-radius:0px!important;border-bottom: 1px solid var(--ep-color-borde);}
.tabs.tab-estilo-1 a {color:var(--ep-fuente-principal);}
.tabs.tab-estilo-1 a.active {color: var(--ep-colordest);border: 1px solid var(--ep-color-borde); background: var(--ep-fondoweb); border-bottom:0px;}
.tabs.tab-estilo-1 a.active:after {background: var(--ep-fondoweb); border: 1px solid var(--ep-color-borde);}
.tabs.tab-estilo-1 a:hover, .tabs.tab-style-1 a:hover::after, .tabs.tab-style-1 a:focus, .tabs.tab-style-1 a:focus::after {color:var(--ep-colordest);background: var(--ep-fondoweb);}

.tabs.tab-estilo-2 a {background: transparent; color: var(--ep-grisoscuro);}
.tabs.tab-estilo-2 a:hover, .tabs.tab-style-2 a:hover::after, .tabs.tab-style-2 a:focus, .tabs.tab-style-2 a:focus::after {background: transparent; color:var(--ep-color-principal);}
.tabs.tab-estilo-2 a.active {color:var(--ep-colordest); border-bottom:2px solid var(--ep-colordest) !important;}
.tabs.tab-estilo-2 li a.active img {filter: var(--ep-filter-colordest);}
.dark .tabs.tab-estilo-2 a.active img{filter: var(--ep-filter-blanco);}
.dark .tabs.tab-estilo-2 a.active {color: white;}

.tabs.tab-estilo-3 a {background: var(--ep-fondoclaro); color: var(--ep-grisoscuro);}
.tabs.tab-estilo-3 a:hover, .tabs.tab-style-3 a:focus {background: var(--ep-fondoclaro); color:inherit;}
.tabs.tab-estilo-3 a.active {background-color: var(--ep-colordest);}
.tabs.tab-estilo-3 li a.active img, .dark .tabs.tab-estilo-3 li a.active img{filter: var(--ep-filter-blanco);}
.dark .tabs.tab-estilo-3 li a img{filter: var(--ep-filter-grisclaro);}

.dark .tabs.tab-estilo-3 a{color:var(--ep-grisclaro);}
.dark .tabs.tab-estilo-3 a.active{color:#fff;}

.tabs li img{width:21px;}

@media (max-width: 790px){
    .tabs a {padding: 8px 10px;}
}

/*==============================
            Zonas
==============================*/

.zona-top {
  display: flex;
  flex-direction: column;
  width: 100%;
  /*justify-content: space-between;*/
  gap:4px;
  /*margin-bottom:20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--ep-color-borde);*/
}
/*.zona-top div:last-child, .zona-top span:last-child {margin-left: auto;}*/

.zona-top span label.container-radio:last-child {margin-bottom: 0px!important;}


.zona-tarjetas{display:flex; flex-direction: row; flex-wrap: wrap;}
.zona-info{background: var(--ep-fondoclaro); padding: 16px; display: block;font-size:0.8125em}
.info-card{
    position: absolute;
    top:-8px;
    left: 8px;
    font-size:0.625em;
    line-height:1;
    background:var(--ep-colordest);
    color:var(--ep-blanco);
    padding:2px 5px;
    border-radius:4px;
}

.zona-mensajes{width: 100%; padding:20px 20px; margin:15px 0px; border: 2px solid var(--ep-color-borde);}
.zona-mensajes .icono-mensaje{max-width: 180px;}
.zona-mensajes .icono-mensaje.s-size{max-width: 120px;}
.zona-mensajes .icono-mensaje.xs-size{max-width: 80px;}

/*loading fullscreen*/
.loading-container{height: 100%; width: 100%; position: fixed; left: 0; top: 0; overflow-x: hidden; z-index: 1002;background: var(--ep-fondoweb-transparente);}
.loading-zone{
    display: flex;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    text-align: center;
    padding: 15px;
    margin: 0 auto;
}
.loading-zone img{max-width: 40px}

.loading-container.fullcontent{background: var(--ep-fondoweb);}

.loading-container.fullcontent .loading-zone img{max-width: 90px}

/*==============================
            Botones
==============================*/
.boton{position:relative;}

/*.boton:hover::after {
    position:absolute;
    top: 0;
    left:0px;
    bottom:0;
    z-index: 12;
    width: 100%;
    overflow: hidden;
    content: "";
    background: rgba(255,255,255,0.1);
}*/

/*.boton{box-shadow: 0px 3px 6px #00000029;}*/
.boton.redondeado{min-width:176px;}
.boton.mas{min-width:300px;}
.boton.pagar,.boton.alto{height: 48px; display: flex; align-items: center; justify-content: center; gap:4px}
@media (max-width: 1024px) {
    .boton.redondeado, .boton.mas{min-width:auto;padding-right: 25px; padding-left: 25px;}
}

.boton.colordest {background-color: var(--ep-colordest)!important; color: var(--ep-colordest-txt)!important; font-weight:600;}
.boton.colordest:hover{background-color:var(--ep-colordest-hover)!important; color: var(--ep-colordest-txt)!important;}
.boton.colordest.active, .boton.colordest:focus{background-color:var(--ep-colordest-active)!important; color: var(--ep-colordest-txt)!important;}
.boton.colordest.bordered, .boton.colordest.bordered:hover, .boton.colordest.bordered.active {border:1px solid var(--ep-colordest)!important; color: var(--ep-colordest)!important; background:transparent!important}

.boton.verde {background-color: var(--ep-verde)!important; color: var(--ep-blanco)!important; font-weight:600}
.boton.verde:hover{background-color:var(--ep-verde)!important; color: var(--ep-blanco)!important;}
.boton.verde.active, .boton.verde:focus{background-color:var(--ep-verde)!important; color: var(--ep-blanco)!important;}
.boton.verde.bordered, .boton.verde.bordered:hover, .boton.verde.bordered.active {border:1px solid var(--ep-verde)!important; color: var(--ep-txt-principal)!important; background:transparent!important}

.boton.rojo {background-color: var(--ep-rojo)!important; color: var(--ep-blanco)!important; font-weight:600}
.boton.rojo:hover{background-color:var(--ep-rojo)!important; color: var(--ep-blanco)!important;}
.boton.rojo.active, .boton.rojo:focus{background-color:var(--ep-rojo)!important; color: var(--ep-blanco)!important;}
.boton.rojo.bordered, .boton.rojo.bordered:hover, .boton.rojo.bordered.active {border:1px solid var(--ep-rojo)!important; color: var(--ep-txt-principal)!important; background:transparent!important}

.boton.oscuro {background-color: var(--ep-fondoscuro)!important; color: var(--ep-blanco)!important; font-weight:600}
.boton.claro:hover{background-color:var(--ep-fondoscuro)!important; color: var(--ep-blanco)!important;}
.boton.claro.active, .boton.claro:focus{background-color:var(--ep-fondoscuro)!important; color: var(--ep-blanco)!important;}
.boton.claro.bordered, .boton.claro.bordered:hover, .boton.claro.bordered.active {border:1px solid var(--ep-fondoscuro)!important; color: var(--ep-txt-principal)!important; background:transparent!important}

.boton.disabled,.boton[disabled],button[disabled] .boton,fieldset[disabled] .boton {
    cursor:not-allowed !important; filter:alpha(opacity=1); opacity:1; -webkit-box-shadow:inherit; box-shadow:inherit; pointer-events: none;
    background-color:var(--ep-form-fondo-disabled)!important; color: var(--ep-form-color-disabled)!important;
}

/*tarjetas*/
.boton-tarjeta{
    position:relative;
    width: fit-content;
    display:flex;
    flex-direction: column;
    padding:8px 10px;
    border: 2px solid var(--ep-color-borde);
    cursor:pointer;
    margin:5px;
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;
}
.boton-tarjeta:hover{border-color:var(--ep-colordest);}
.boton-tarjeta.active{border-color:var(--ep-colordest); background:var(--ep-fondoclaro); /*background-image: url('../images/check.svg'); background-repeat: no-repeat; background-position: right 5px bottom 5px;*/}

.boton-tarjeta.caducada:hover{border-color:var(--ep-rojo)}
.boton-tarjeta.caducada .texto.s-size{color:var(--ep-rojo)}
.boton-tarjeta.caducada .info-card{background: var(--ep-rojo)}

.boton-tarjeta.anadir{border-color:var(--ep-color-borde); background:var(--ep-fondoclaro);justify-content: center;}

/*help*/
.boton_help{position: relative; cursor:pointer; display: inline-block;font-size:1.25em;line-height:1}
.info-help{
    position: absolute;
    z-index: 1;
    top:19px;
    right:0px;
    cursor: default;
    padding:5px;
    border:1px solid var(--ep-color-borde);
    background: var(--ep-fondoweb);
    display: flex;
    flex-direction: row-reverse;
    gap:4px;
    justify-content: space-between;
}
.info-help img{max-width: 120px}

@media (max-width:359px){
    .info-help{right: auto; left:0px;}
}

/*borrar*/
.boton_borrar{
    border:1px solid var(--ep-color-borde);
    background: var(--ep-fondoweb);
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0px;
    border-radius:4px;
    font-size:  0.8125em;
    cursor: pointer;
    position: absolute; bottom:-9px; right: 8px;
}
.boton_borrar:hover{background-color: var(--ep-rojo); color:var(--ep-blanco); border-color:var(--ep-rojo)}

/*idiomas*/
.boton_idioma{
    border:1px solid var(--ep-color-borde);
    height: 32px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:5px;
    border-radius:6px;
    font-size:  0.8125em;
    gap:2px;
    position: relative;
    cursor: pointer;
}
.boton_idioma::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}
.boton_idioma img{width:24px}

.top-drop-menu{
    position:absolute;
    left: 0px;
    top: 34px;
    z-index:111;
    width: 60px;
    border:1px solid var(--ep-color-borde);
    background: var(--ep-fondoweb);
    border-radius:6px;
}
.top-drop-menu img{width:24px}

.top-drop-menu ul{padding-inline-start: 0px; list-style-type: none; margin-block-start: 0px; margin-block-end: 0px;font-size:0.875em; text-align: center;}
.top-drop-menu ul li{padding:5px;border-bottom: 1px solid var(--ep-color-borde);}
.top-drop-menu ul li:last-child{border-bottom:none}

.top-drop-menu ul li:hover{background: var(--ep-fondoclaro)}
.dark .top-drop-menu ul li:hover{background: rgba(255,255,255,0.1)}

/*==============================
            PLANES
==============================*/

.zona-planes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.boton_plan{
    position: relative;
    background: var(--ep-fondoclaro);
    padding: 20px 10px;
    border-radius: 6px;
    border: 2px solid var(--ep-fondoclaro);
    cursor: pointer;
    max-width: 200px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /*border-right: 6px solid rgba(0,0,0,0.05);
    border-left: 6px solid rgba(0,0,0,0.05);*/
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;
}
.boton_plan:hover{border-color:var(--ep-colordest)}
.boton_plan.active{
    background: var(--ep-color-fondo-active);
    border: 2px solid var(--ep-color-fondo-active);
    background-image: url('../images/check.svg'); background-repeat: no-repeat; background-position: right 5px top 5px;
    color: var(--ep-color-texto-active);
}
.boton_plan img{max-width: 80px; margin: 5px auto;}

/*.boton_plan span{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}*/

.boton_plan .info-plan-izq, .boton_plan .info-plan-cen, .boton_plan .info-plan-der{
    flex-grow: 1;
    flex-shrink: 1;
    /*flex-basis: 0;*/
}


.zona-planes.horizontal .boton_plan .info-plan-izq, .zona-planes.horizontal .boton_plan .info-plan-cen, .zona-planes.horizontal .boton_plan .info-plan-der{
    flex-grow: 0;
    flex-shrink: 0;
    /*flex-basis: 0;*/
}


.zona-planes.horizontal{gap:0px}
.zona-planes.horizontal .boton_plan{
    max-width: none;
    width: 100%;
    padding:10px;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info-plan-izq{
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 2.5em;
    line-height: 1;
    font-weight: bold;
    align-items: center;
    /*text-shadow: 0 1px 2px rgb(0 0 0 / 20%);*/
}
.info-plan-izq span {font-size: 0.35em; font-weight: normal;}

.zona-planes.horizontal .boton_plan .info-plan-izq{align-items: flex-start;}
.zona-planes.horizontal .boton_plan .info-plan-cen{justify-content: center; display: flex;}
.zona-planes.horizontal .boton_plan .info-plan-der{justify-content: flex-end; display: flex;}

.zona-planes.horizontal .boton_plan.active .info-plan-izq, .dark .zona-planes .boton_plan.active .info-plan-izq {color: var(--ep-color-texto-active);}
.dark .zona-planes .boton_plan .info-plan-izq {color: var(--ep-color-fondo-active);}

.info-plan-cen{}

.info-plan-der{flex-direction: column;}

.badge-top{
    color:white;
    position:absolute;
    top:-6px;
    left:15px;
    background: var(--ep-cian);
    /*background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);*/
    padding:2px 8px;
    border-radius: 50px;
    font-size: 0.625em;
    line-height:1
}

.badge-center{
    background: var(--ep-negro);
    color:var(--ep-blanco);
    padding:4px 8px;
    font-size: 0.75em;
    line-height: 0.875em;
    border-radius: 10px;
    text-align: center;
    display: flex;
}

.badge-right{
    text-align: center;
    line-height: 1.3;
    font-size: 0.925em;
    padding: 6px 10px;
    background: rgba(0,0,0,0.04);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    
}


/*==============================
          Animaciones
==============================*/

.loader-puntos {
  display: block;
  position: relative;
  width: 80px;
  height: 20px;
  opacity:0.3;
  margin:16px auto;
}
.loader-puntos div {
  position: absolute;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader-puntos div:nth-child(1) {
  left: 8px;
  animation: loader-puntos1 0.6s infinite;
}
.loader-puntos div:nth-child(2) {
  left: 8px;
  animation: loader-puntos2 0.6s infinite;
}
.loader-puntos div:nth-child(3) {
  left: 32px;
  animation: loader-puntos2 0.6s infinite;
}
.loader-puntos div:nth-child(4) {
  left: 56px;
  animation: loader-puntos3 0.6s infinite;
}
@keyframes loader-puntos1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loader-puntos3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes loader-puntos2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}


.loading {
  top:50%;
  left:50%;
  position:absolute;
  content:"";
  border-radius:50%;
  box-sizing:border-box;
  -webkit-animation:m-loader-rotate .8s linear infinite;
  animation:m-loader-rotate .8s linear infinite;
  width:4.4rem;
  height:4.4rem;
  margin-top:-2.2rem;
  margin-left:-2.2rem;
  border-top:3px solid var(--ep-colordest);
  border-right:2px solid transparent
}
@-webkit-keyframes m-loader-rotate {
  to {
    transform:rotate(1turn)
  }
}
@keyframes m-loader-rotate {
  to {
    transform:rotate(1turn)
  }
}


/*==============================
        Formularios
==============================*/

input, textarea { 
       /*-webkit-appearance: none; */
       -webkit-border-radius:0; /* remove border-radius in iOS*/
       border-radius: 0; 
}

input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; }/*no muestra las flechitas dentro del input tipo number en Mozilla*/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}/*no muestra las flechitas dentro del input tipo number en Mozilla*/

select { 
    -webkit-border-radius:0; /* remove border-radius in iOS*/
    border-radius: 0;
    height:auto !important;
    line-height: 119%;
    border: none;
    outline:0px;

    /* needed */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  
    /* SVG background image */
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='100' filter='brightness(0) saturate(100%) invert(53%) sepia(11%) saturate(589%) hue-rotate(173deg) brightness(98%) contrast(87%)'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
    background-size: 9px;
    background-position: calc(100% - 10px) 55%;
    background-repeat: no-repeat;
}
.dark select > option{background: black; color:white;}

select, input, textarea{border:0px; width: 100%; font-size: 1em; line-height: 1; color:var(--ep-color-principal);}

textarea:focus, input:focus{outline: 0; border:0px}

/* Checkbox */
.container-check {display: block; position: relative; padding-left: 30px; margin-bottom: 15px; cursor: pointer; font-size: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.container-check input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark-check {position: absolute; top: 0; left: 0; height: 22px; width: 22px; background-color: var(--ep-form-fondo); border:1px solid var(--ep-form-borde); border-radius:4px;}
.container-check:hover input ~ .checkmark-check{background-color: var(--ep-form-fondo-disabled);}
.container-check input:disabled ~ .checkmark-check {background-color: var(--ep-form-fondo-disabled);}
.container-check input:checked ~ .checkmark-check {background-color: var(--ep-colordest); border:1px solid var(--ep-colordest)}
.checkmark-check:after {content: ""; position: absolute; display: none;}
.container-check input:checked ~ .checkmark-check:after {display: block;}
.container-check .checkmark-check:after {left: 7px; top: 3px; width: 6px; height: 12px; border:1px solid var(--ep-blanco); border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.container-check.mini{font-size:0.875em; padding-left:25px; line-height:130%;}
.container-check.mini > .checkmark-check{height: 18px; width: 18px;}
.container-check.mini .checkmark-check:after{left:5px; top:2px; width: 5px; height: 10px;}

/* Radio */
.container-radio {display: flex; position: relative;  padding-left: 30px; margin-bottom: 15px; cursor: pointer; font-size: 1em; -webkit-user-select: none; -moz-user-select: none;  -ms-user-select: none; user-select: none;}
.container-radio input {position: absolute; opacity: 0; cursor: pointer;}
.checkmark-radio {position: absolute; top: 0; left: 0; height: 22px; width: 22px; background-color: var(--ep-form-fondo); border:1px solid var(--ep-form-borde); border-radius: 50%;}
.container-radio:hover input ~ .checkmark-radio {background-color: var(--ep-form-fondo-disabled);}
.container-radio  ~ .checkmark-radio {background-color: var(--ep-form-fondo-disabled);}
.container-radio input:disabled ~ .checkmark-radio {background-color: var(--ep-form-fondo-disabled);}
.container-radio input:checked ~ .checkmark-radio {background-color: var(--ep-form-fondo);}
.checkmark-radio:after {content: ""; position: absolute; display: none;}
.container-radio input:checked ~ .checkmark-radio:after {display: block;}
.container-radio .checkmark-radio:after {left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background:  var(--ep-colordest);}

.container-radio.mini{font-size:0.875em; padding-left:25px; line-height:130%;margin-bottom: 10px!important;}
.container-radio.mini > .checkmark-radio{height: 18px; width: 18px;}
.container-radio.mini .checkmark-radio:after{left:5px; top:5px; width: 6px; height: 6px;}

/*==============================
            Textos
==============================*/

.texto{font-size: 1em}/*16px*/
.texto-xxl-size{font-size: 1.5em}/*24*/
.texto.xl-size{font-size: 1.375em}/*22*/
.texto.l-size{font-size:1.125em}/*18px*/
.texto.s-size{font-size:0.8125em}/*13px*/
.texto.xs-size{font-size:0.75em}/*12px*/

.texto-separador {
    overflow: hidden;
    text-align: center;
    font-size: 1em;
    font-weight: normal;
    color:var(--ep-color-principal);
    margin-top: 8px;
    margin-bottom:20px;
}
.texto-separador::before,
.texto-separador::after {
  background-color: var(--ep-color-borde);
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.texto-separador::before {right: 0.8em; margin-left: -50%;}
.texto-separador::after {left: 0.8em; margin-right: -50%;}

.colordest {color:var(--ep-colordest)!important;}
.rojo {color:var(--ep-rojo)!important;}
.amarillo{color:var(--ep-amarillo)!important;}
.naranja{color:var(--ep-naranja)!important;}
.morado{color:var(--ep-morado)!important;}
.purpura{color:var(--ep-purpura)!important;}
.azul{color:var(--ep-azul)!important;}
.cian{color:var(--ep-cian)!important;}
.light{color:var(--ep-light)!important;}
.negro{color:var(--ep-negro)!important;}
.blanco{color:var(--ep-blanco)!important;}

.verde {color:var(--ep-verde)!important;}
.verde-oscuro{color:var(--ep-verde-oscuro)!important}
.gris-claro {color:var(--ep-grisclaro)!important;}
.gris-oscuro {color:var(--ep-grisoscuro)!important;}

.gris {color:var(--ep-gris)!important;}
.gris-clarito {color:var(--ep-gris-clarito)!important;}


/*==============================
      Mensajes a usuario
==============================*/

.info-msg{padding:10px 15px; border:1px solid var(--ep-color-borde); border-left: 4px solid var(--ep-color-borde); background: var(--ep-fondoclaro);}
.info-msg.s-size{padding:5px 10px; line-height: 1.2em}
.info-msg.rojo{border-color:var(--ep-msg-rojo-borde); background:var(--ep-msg-rojo-fondo);color:var(--ep-negro)!important;}
.info-msg.amarillo{border-color:var(--ep-msg-amarillo-borde); background:var(--ep-msg-amarillo-fondo);color:var(--ep-negro)!important;}
.info-msg.verde{border-color:var(--ep-msg-verde-borde); background:var(--ep-msg-verde-fondo);color:var(--ep-negro)!important;}