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

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

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

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

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

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

}

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

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

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

    --msg-rojo-borde:#e5352f;
    --msg-rojo-fondo:#e5352f;
    --msg-amarillo-borde:#fbe969;
    --msg-amarillo-fondo:#fbe969;
    --msg-verde-borde:#7bcdab;
    --msg-verde-fondo:#7bcdab;
	
	--form-txt:#fff;
	--form-color: rgba(255,255,255,.7);
	--form-fondo:#2d3237;
	--form-borde: rgba(255,255,255,.24);
	--form-borde-hover:#8D8D8D;
	--form-borde-active:#fff;
	--form-txt-active:#fff;
	--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(--color-principal);}
a:hover {color: var(--color-principal-hover);}
a:focus {color: var(--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(--colordest);  color:var(--colordest-txt);}
::-moz-selection { background:var(--colordest); color:var(--colordest-txt);}

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

blockquote {
    color: var(--color-principal);
    background-color: rgba(151,151,192,0.1);
    border-left: 3px solid var(--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(--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(--filter-colordest);}
.svg-blanco{filter:var(--filter-blanco);}
.svg-rojo {filter: var(--filter-rojo);}
.svg-color-principal {filter: var(--filter-color-principal);}
.svg-grisclaro{filter:var(--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: none;}}

.zona-cartas-pago{
    /*border:1px solid var(--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(--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(--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(--colordest)}

.botones img.active{border: 1px solid var(--colordest); background: var(--scollbar-fondo);}

.zona-logos.enfila{
    justify-content: flex-start;
    overflow: hidden;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 5px;
    cursor: grab;
}

.zona-logos.enfila img{
    width: 110px;
    height: 60px;
    padding: 10px;
    cursor: pointer;
}

.scroll-horizontal-js {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    height: auto;
    padding-bottom: 5px;
    gap:8px;
    cursor: default;
    overflow: scroll hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.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(--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(--colordest)}
.boton_cripto p{margin-top:5px; font-weight: 600;}

.zona-icos-cripto{
    border-top:1px solid var(--color-borde)
}/*NUEVO*/
.zona-icos-cripto img{
    width: 30px !important;
    height: 30px!important;
}
/*NUEVO*/

@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(--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(--colordest)}

.boton_monedas.s-size{
    width: 90px;
    min-height: 90px;
    cursor: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
}/*NUEVO*/
.boton_monedas.s-size:hover{border: 1px solid var(--color-borde)}
.boton_monedas.s-size img{
    width: 40px;
    height: 40px;
}/*NUEVO*/

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

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

.tabs {border-radius:0px!important;border-bottom: 1px solid var(--color-borde);}
.tabs.tab-estilo-1 a {color:var(--fuente-principal);}
.tabs.tab-estilo-1 a.active {color: var(--colordest);border: 1px solid var(--color-borde); background: var(--fondoweb); border-bottom:0px;}
.tabs.tab-estilo-1 a.active:after {background: var(--fondoweb); border: 1px solid var(--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(--colordest);background: var(--fondoweb);}

.tabs.tab-estilo-2 a {background: transparent; color: var(--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(--color-principal);}
.tabs.tab-estilo-2 a.active {color:var(--colordest); border-bottom:2px solid var(--colordest) !important;}
.tabs.tab-estilo-2 li a.active img {filter: var(--filter-colordest);}
.dark .tabs.tab-estilo-2 a.active img{filter: var(--filter-blanco);}
.dark .tabs.tab-estilo-2 a.active {color: white;}

.tabs.tab-estilo-3 a {background: var(--fondoclaro); color: var(--grisoscuro); display: flex; gap:4px; align-items:center;}/*NUEVO*/
.tabs.tab-estilo-3 a:hover, .tabs.tab-style-3 a:focus {background: var(--fondoclaro); color:inherit;}
.tabs.tab-estilo-3 a.active {background-color: var(--colordest);}
.tabs.tab-estilo-3 li a.active img, .dark .tabs.tab-estilo-3 li a.active img{filter: var(--filter-blanco);}
.dark .tabs.tab-estilo-3 li a img{filter: var(--filter-grisclaro);}

.dark .tabs.tab-estilo-3 a{color:var(--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(--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-top{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.zona-top > * {
    white-space:wrap
}

.zona-tarjetas{display:flex; flex-direction: row; flex-wrap: wrap;}
.zona-info{background: var(--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(--colordest);
    color:var(--blanco);
    padding:2px 5px;
    border-radius:4px;
}

.zona-mensajes{
    width: 100%;
    padding:20px 20px;
    margin:15px 0px;
    border: 2px solid var(--color-borde);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.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;}
.zona-mensajes .icono-mensaje.xxs-size{max-width: 30px;}/*NUEVO*/

.zona-mensajes-voucher{
    width: 100%;
    padding:20px 20px;
    margin:15px 0px;
    border: 2px solid var(--color-borde);
    display: flex;
    align-items: center;
}
@media (width < 991px) {
    .zona-mensajes-voucher{
        height: 300px;
    }
}
@media (width > 1024px) {
    .zona-mensajes-voucher{
        height: 500px;
    }
}
.zona-mensajes-voucher .icono-mensaje{max-width: 180px;}
.zona-mensajes-voucher .icono-mensaje.s-size{max-width: 120px;}
.zona-mensajes-voucher .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(--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(--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(--colordest)!important; color: var(--colordest-txt)!important; font-weight:600;}
.boton.colordest:hover{background-color:var(--colordest-hover)!important; color: var(--colordest-txt)!important;}
.boton.colordest.active, .boton.colordest:focus{background-color:var(--colordest-active)!important; color: var(--colordest-txt)!important;}
.boton.colordest.bordered, .boton.colordest.bordered:hover, .boton.colordest.bordered.active {border:1px solid var(--colordest)!important; color: var(--colordest)!important; background:transparent!important}

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

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

.boton.oscuro {background-color: var(--fondoscuro)!important; color: var(--blanco)!important; font-weight:600}
.boton.claro:hover{background-color:var(--fondoscuro)!important; color: var(--blanco)!important;}
.boton.claro.active, .boton.claro:focus{background-color:var(--fondoscuro)!important; color: var(--blanco)!important;}
.boton.claro.bordered, .boton.claro.bordered:hover, .boton.claro.bordered.active {border:1px solid var(--fondoscuro)!important; color: var(--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(--form-fondo-disabled)!important; color: var(--form-color-disabled)!important;
}

/*tarjetas*/
.boton-tarjeta{
    position:relative;
    width: fit-content;
    display:flex;
    flex-direction: column;
    padding:8px 10px;
    border: 2px solid var(--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(--colordest);}
.boton-tarjeta.active{border-color:var(--colordest); background:var(--fondoclaro); /*background-image: url('../images/check.svg'); background-repeat: no-repeat; background-position: right 5px bottom 5px;*/}

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

.boton-tarjeta.anadir{border-color:var(--color-borde); background:var(--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(--color-borde);
    background: var(--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(--color-borde);
    background: var(--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(--rojo); color:var(--blanco); border-color:var(--rojo)}

/*idiomas*/
.boton_idioma{
    border:1px solid var(--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(--color-borde);
    background: var(--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(--color-borde);}
.top-drop-menu ul li:last-child{border-bottom:none}

.top-drop-menu ul li:hover{background: var(--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(--fondoclaro);
    padding: 20px 10px;
    border-radius: 6px;
    border: 2px solid var(--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(--colordest)}
.boton_plan.active{
    background: var(--color-fondo-active);
    border: 2px solid var(--color-fondo-active);
    background-image: url('../images/check.svg'); background-repeat: no-repeat; background-position: right 5px top 5px;
    color: var(--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(--color-texto-active);}
.dark .zona-planes .boton_plan .info-plan-izq {color: var(--color-fondo-active);}

.info-plan-cen{}

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

.badge-top{
    color:white;
    position:absolute;
    top:-6px;
    left:15px;
    background: var(--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(--negro);
    color:var(--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(--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(--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(--form-fondo); border:1px solid var(--form-borde); border-radius:4px;}
.container-check:hover input ~ .checkmark-check{background-color: var(--form-fondo-disabled);}
.container-check input:disabled ~ .checkmark-check {background-color: var(--form-fondo-disabled);}
.container-check input:checked ~ .checkmark-check {background-color: var(--colordest); border:1px solid var(--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(--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(--form-fondo); border:1px solid var(--form-borde); border-radius: 50%;}
.container-radio:hover input ~ .checkmark-radio {background-color: var(--form-fondo-disabled);}
.container-radio  ~ .checkmark-radio {background-color: var(--form-fondo-disabled);}
.container-radio input:disabled ~ .checkmark-radio {background-color: var(--form-fondo-disabled);}
.container-radio input:checked ~ .checkmark-radio {background-color: var(--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(--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.{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(--color-principal);
    margin-top: 8px;
    margin-bottom:20px;
}
.texto-separador::before,
.texto-separador::after {
  background-color: var(--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(--colordest)!important;}
.rojo {color:var(--rojo)!important;}
.amarillo{color:var(--amarillo)!important;}
.naranja{color:var(--naranja)!important;}
.morado{color:var(--morado)!important;}
.purpura{color:var(--purpura)!important;}
.azul{color:var(--azul)!important;}
.cian{color:var(--cian)!important;}
.light{color:var(--light)!important;}
.negro{color:var(--negro)!important;}
.blanco{color:var(--blanco)!important;}

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

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


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

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