/********** ESTILO CSS - NAF **********/
html, body, div, span, applet, object, iframe,  p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, dl, dt, dd {
	/*font-style: normal;*/
	vertical-align: baseline;
	margin: 0;
	padding: 0;
	border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block;
}
audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline
}
img {
	vertical-align: top;
	max-width: 100%;
	height: auto;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    font-size: 16px;
}

body {
    font-family: "Figtree", sans-serif;
    color: var(--G500);
    min-width: 358px;
    background-color: #FFF !important;
}

a {
    outline: none;
    color: var(--M500);
    text-decoration: none;
}

/* Variables de color*/
:root {

    /* Primario */
 	--P700: #ED1B2A;
    --P800: #AF1712;
    --P900: #860904;

    /* Grayscale */
	--G50: #F8FAFC;
    --G100: #F1F5F9;
    --G200: #E2E8F0;
    --G300: #CBD5E1;
    --G400: #94A3B8;
    --G500: #64748B;
    --G600: #475569;
    --G700: #334155;
    --G800: #1E293B;
    --G900: #0F172A;
    --G950: #020617;

    /* Danger */
    --D50: #FEF2F2;
    --D100: #FEE2E2;
    --D200: #FECACA;
    --D300: #FCA5A5;
    --D400: #F87171;
    --D500: #EF4444;
    --D600: #DC2626;
    --D700: #B91C1C;
    --D800: #991B1B;
    --D900: #7F1D1D;
    --D950: #450A0A;

    /* Exito */
    --exito50: #f0fdf5;
    --exito100: #dcfce8;
    --exito200: #bbf7d1;
    --exito300: #86efad;
    --exito400: #4ade80;
    --exito500: #22c55e;
    --exito600: #16a34a;
    --exito700: #15803c;
    --exito800: #166533;
    --exito900: #14532b;
    --exito950: #052e14;

    /* Alerta - warning */
    --alerta50: #FEF9E8;
    --alerta100: #FEF0C3;
    --alerta200: #FEE28A;
    --alerta300: #FDD147;
    --alerta400: #FAC215;
    --alerta500: #EAB308;
    --alerta600: #CA9A04;
    --alerta700: #A17C07;
    --alerta800: #85680E;
    --alerta900: #715A12;
    --alerta950: #423306;

    /* Información */
    --info50: #EFF5FF;
    --info100: #DBE8FE;
    --info200: #BFD7FE;
    --info300: #93BBFD;
    --info400: #609AFA;
    --info500: #3B82F6;
    --info600: #2570EB;
    --info700: #1D64D8;
    --info800: #1E55AF;
    --info900: #1E478A;
    --info950: #172E54;

    /* Variables de espacio */
    --medida8: 0.5rem;
    --medida12: 0.75rem;
    --medida16: 1rem;
    --medida20: 1.25rem;
    --medida24: 1.5rem;
    --medida28: 1.75rem;
    --medida32: 2rem;
    --medida36: 2.25rem;
    --medida40: 2.5rem;
    --medida44: 2.75rem;
    --medida48: 3rem;
    --medida52: 3.25rem;
    --medida56: 3.5rem;

    /* Variables de bordes radius */
	--radius-none: 0px;
    --radiusSm: 0.5rem;
    --radiusMd: 0.75rem;
    --radiusLg: 1.25rem;
    --radiusFull: 50%;
}


/* TEXTOS */

h1,h2,h3,h4 {
    color: var(--G700);
    font-weight: 600;
    margin: 0px;
}

h1 {
    font-size: var(--medida28);
    line-height: var(--medida32);
}

h2 {
    font-size: var(--medida28);
    line-height: var(--medida32);
}

h2 small {
	color:#64748B;
    font-size: var(--medida16);
    line-height: var(--medida20);
}
h3, .txt-20 {
    font-size: var(--medida20);
    line-height: var(--medida24);
}

h4 {
    font-size: var(--medida20);
    line-height: 1.25rem;
    font-weight: bold;
}

ul {
	list-style-type: none;
}
.txt-12, .text-12{
    font-size: 12px;
}
.txt-16{
    font-size: 16px;
}
.txt-24{
    font-size: 24px;
}
.txt-40{
    font-size: 40px;
	line-height: 48px;
}
.txt-48{
    font-size: 48px;
}

label, p, li,dt, dd{
    font-size: 16px;
    line-height: 20px;
}
.font-semibold { font-weight: 600;}

small {
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 400;
}
.text-secondary {color:#64748B;}
.editable ul, .editable ol {
	list-style-type: disc;
	display: grid;
	gap: 12px;
	margin-left: 20px;
}
.editable ol {
	list-style-type: decimal;
	margin-left: 25px;
}

/*********************************** layouts LAYOUTS **************************************/
.header-web { padding-top: 52px;}
.bannertufans {
  display: flex;
  justify-content: center;
  width: 100%;
	width: 100%;
	padding: 0 10px;
	position:fixed;
	z-index:2;
	top:0;
	background-color: #e9322c;
}
.bannertufans a{ display: block; text-align:center;}
.bannertufans img { vertical-align: middle; height: 52px;}

.header-container {
	background-color: var(--P700);
	width: 100%;
	position: fixed;
	z-index: 2;
}
.header {
	width: 100%;
	padding: 12px 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1980px;
	margin: 0 auto;
	box-sizing: border-box;
}
.header-group {
	display: flex;
	align-items: center;
	gap: 8px;
}
.dropdown {
	position:absolute;
	right: 0;
	background-color: #FFF;
	display: none;
	overflow:hidden;
	border: 1px solid #E2E8F0;
	border-radius: var(--radiusMd);
	box-shadow: 0px 12px 16px -4px rgba(71, 85, 105, 0.11);
}
.dropdown--notificaciones { width: 440px; top: 59px;}
.dropdown-titulo {
	background-color: #2B4D96;
	align-items: center;
	padding: 24px 18px;
}
.dropdown-titulo, .dropdown-item {
	display:flex;
	justify-content: space-between;
}
.dropdown-titulo .flex { gap: 8px;}
.dropdown-item { font-size: 14px; padding: 18px;  gap: 12px; border-bottom: 1px solid #E2E8F0;}
.dropdown-item:last-child { border-bottom: none;}
.dropdown-item--active { background-color: #EFF5FF;}
.dropdown-item strong{ color:#334155; font-weight: 600;}
.dropdown-itemList {
	width: 148px;
	padding: 8px 8px 4px;
}
.dropdown-itemList.dropdown { top: 32px; z-index: 2;}
.dropdown-itemList .btn.btn--sm { padding: 7px 4px;}
.dropdown-itemList li { margin-bottom: 4px;}
.position-relative { position:relative;}
.btn.btn--sm.icon-more {
	background-color:transparent;
	line-height: 14px;
	padding: 0 2px;
	min-height: 24px;
	border-radius: 4px;
}
.btn.btn--sm.icon-more i{ font-size:  24px;}

.dropdown--user { background-color: #1B3772; width: 370px; padding: 24px; top: 59px;}
.dropdown--user li { color:#F8FAFC;}

.dropdown--user li:first-child {align-items: flex-start; margin-bottom: 24px;}
.dropdown--user li:last-child { margin-top: 12px;}


/* Menu */
.hamburger-button {
	font-size: 24px;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
}

.side-nav .btn.btn--outline { display:none;}
.side-nav .sidebar-btn {
	color: #334155;
	font-size: 20px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 0 21px;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	cursor: pointer;
	transform: rotate(0deg);
	transition: transform 0.3s;
}
.side-nav.side-nav--simple { width: 50px;}
.side-nav.side-nav--collapsed .sidebar-btn {
	transform: rotate(180deg);
}

@-webkit-keyframes intro-top-menu-animation {
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes intro-top-menu-animation {
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@-webkit-keyframes intro-active-top-menu-animation {
  100% {
    z-index: 10;
  }
}

@keyframes intro-active-top-menu-animation {
  100% {
    z-index: 10;
  }
}


.side-nav {
	background-color:#2B4D96;
	width: 245px;
	padding: 24px 10px 0;
	overflow-x: hidden;
	position: fixed;
	top: 74px;
	z-index: 2;
	height: 89%;
	height: 89vh;
	transition: all 300ms;
}
.nav-header { display: none;}
.side-nav li i {
	font-size: 20px;
}

/*.side-nav li {
  border-bottom: 1px solid #B81D23;
}*/

/*@media (max-width: 1279px) {
  .side-nav {
    width: 50px;
  }
}*/


.side-nav.side-nav--simple .side-menu .side-menu__title {
  display: none;
}

.side-nav.side-nav--simple .side-menu .side-menu__title .side-menu__sub-icon {
  display: none;
}

.side-nav.side-nav--simple .side-menu:not(.side-menu--active) .side-menu__icon:before {
  display: none;
}

.side-nav .side-nav__devider {
  width: 100%;
  height: 1px;
  --bg-opacity: 1;
  background-color: #2e51bb;
  background-color: rgba(46, 81, 187, var(--bg-opacity));
  z-index: 10;
  position: relative;
}

.side-nav .side-menu {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  margin-bottom: 8px;
  position: relative;
  border-radius: 8px;
}
.side-nav .side-menu:hover {
	background-color: #254486;
}

.side-nav .side-menu .side-menu__title {
  width: 100%;
  margin-left: 0.75rem;
  display: flex;
  align-items: center;
}

.side-nav .side-menu .side-menu__title .side-menu__sub-icon {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  transition-duration: 100ms;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  margin-right: 1.25rem;
}

@media (max-width: 1279px) {
  .side-nav .side-menu .side-menu__title .side-menu__sub-icon {
    display: none;
  }
}

/*@media (max-width: 1279px) {
  .side-nav .side-menu .side-menu__title {
    display: none;
  }
}*/

.side-nav > ul > li:nth-child(1).side-nav__devider {
  opacity: 0;
  -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
          animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.side-nav > ul > li:nth-child(1) > a:not(.side-menu--active) {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.side-nav > ul > li:nth-child(1) > a.side-menu--active {
  -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
          border-bottom: none;
}

.side-nav > ul > li:nth-child(2).side-nav__devider {
  opacity: 0;
  -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
          animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.side-nav > ul > li:nth-child(2) > a:not(.side-menu--active) {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.side-nav > ul > li:nth-child(2) > a.side-menu--active {
  -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.side-nav > ul > li:nth-child(3).side-nav__devider {
  opacity: 0;
  -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
          animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.side-nav > ul > li:nth-child(3) > a:not(.side-menu--active) {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.side-nav > ul > li:nth-child(3) > a.side-menu--active {
  -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.side-nav > ul > li:nth-child(4).side-nav__devider {
  opacity: 0;
  -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
          animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.side-nav > ul > li:nth-child(4) > a:not(.side-menu--active) {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.side-nav > ul > li:nth-child(4) > a.side-menu--active {
  -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.side-nav > ul > li:nth-child(5).side-nav__devider {
  opacity: 0;
  -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
          animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.side-nav > ul > li:nth-child(5) > a:not(.side-menu--active) {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.side-nav > ul > li:nth-child(5) > a.side-menu--active {
  -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.side-nav > ul > li:nth-child(6).side-nav__devider {
  opacity: 0;
  -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
          animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.side-nav > ul > li:nth-child(6) > a:not(.side-menu--active) {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.side-nav > ul > li:nth-child(6) > a.side-menu--active {
  -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.side-nav > ul > li:nth-child(7).side-nav__devider {
  opacity: 0;
  -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
          animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.side-nav > ul > li:nth-child(7) > a:not(.side-menu--active) {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.side-nav > ul > li:nth-child(7) > a.side-menu--active {
  -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.side-nav > ul > li:nth-child(8).side-nav__devider {
  opacity: 0;
  -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
          animation: 0.4s intro-devider-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.side-nav > ul > li:nth-child(8) > a:not(.side-menu--active) {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.side-nav > ul > li:nth-child(8) > a.side-menu--active {
  -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
          animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/*.side-nav > ul ul {
  display: none;
  --bg-opacity: 1;
  background-color: #1A389F;
  background-color: rgba(26, 56, 159, var(--bg-opacity));
  border-radius: 0.375rem;
}

.side-nav > ul ul li:nth-child(1) > a {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
          animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.side-nav > ul ul li:nth-child(2) > a {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
          animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.side-nav > ul ul li:nth-child(3) > a {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
          animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.side-nav > ul ul li:nth-child(4) > a {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
          animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.side-nav > ul ul li:nth-child(5) > a {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
          animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.side-nav > ul ul li:nth-child(6) > a {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
          animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.side-nav > ul ul li:nth-child(7) > a {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
          animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.side-nav > ul ul li:nth-child(8) > a {
  opacity: 0;
  transform: translateX(50px);
  -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
          animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}*/




.side-nav > ul ul.side-menu__sub-open {
  display: block;
}

.side-nav > ul ul .side-menu__icon:before {
  display: none;
}

.side-nav > ul ul li a:not(.side-menu--active) {
  --text-opacity: 1;
  color: #c7d2ff;
  color: rgba(199, 210, 255, var(--text-opacity));
}

.side-nav > ul ul li a.side-menu--active .side-menu__title {
  font-weight: 500;
}

.side-nav > ul ul ul {
  display: none;
  --bg-opacity: 1;
  background-color: #142C91;
  background-color: rgba(20, 44, 145, var(--bg-opacity));
  border-radius: 0.375rem;
}

.side-nav > ul > li > .side-menu.side-menu--active {
  --bg-opacity: 1;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}

/*.side-nav > ul > li > .side-menu.side-menu--active:before {
  content: "";
  width: 30px;
  height: 30px;
  margin-top: -30px;
  transform: rotate(90deg) scale(1.04);
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23ffffff'/%3E%3C/svg%3E%0A");
  position: absolute;
  top: 0;
  right: 0;
  margin-right: -1.25rem;
}

.side-nav > ul > li > .side-menu.side-menu--active:after {
  content: "";
  width: 30px;
  height: 30px;
  margin-top: 48px;
  transform: scale(1.04);
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23ffffff'/%3E%3C/svg%3E%0A");
  position: absolute;
  top: 0;
  right: 0;
  margin-right: -1.25rem;
}*/

.side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon {
  --text-opacity: 1;
  color: #334155;
}

/*.side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: -1.25rem;
  width: 3rem;
  height: 100%;
  --bg-opacity: 1;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}*/

.side-nav > ul > li > .side-menu.side-menu--active .side-menu__title {
  --text-opacity: 1;
  color: #2d3748;
  color: rgba(45, 55, 72, var(--text-opacity));
  font-weight: 500;
}

.side-nav > ul > li > .side-menu:not(.side-menu--active) .side-menu__icon:before {
  content: "";
  z-index: -1;
  width: 225px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 8px;
  /*border-bottom-left-radius: 9999px;*/
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  transition-duration: 100ms;
}

@media (max-width: 1279px) {
  .side-nav > ul > li > .side-menu:not(.side-menu--active) .side-menu__icon:before {
    display: none;
  }
}

.side-nav > ul > li > .side-menu:hover:not(.side-menu--active):not(.side-menu--open) .side-menu__icon:before {
  --bg-opacity: 1;
  background-color: #254486;
}

@-webkit-keyframes intro-devider-animation {
  100% {
    opacity: 1;
  }
}

@keyframes intro-devider-animation {
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes intro-menu-animation {
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes intro-menu-animation {
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@-webkit-keyframes intro-submenu-animation {
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes intro-submenu-animation {
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@-webkit-keyframes intro-active-menu-animation {
  100% {
    z-index: 10;
  }
}

@keyframes intro-active-menu-animation {
  100% {
    z-index: 10;
  }
}


/********************/

footer {
	background: #2B4D96 url(../imagenes/template/logo-footer.png) 99% center no-repeat;
	display:flex;
	align-items: baseline;
	padding: 30px 24px;
	position: relative;
	z-index: 2;
}
footer div {
	width: 264px;
}
footer div.grid a:hover{
	text-decoration: underline;
}
footer, h4 {
	color: #fff;
}
.redes-sociales {
	display: flex;
	gap: 24px;
}

.redes-sociales li{
	font-size: 40px;
}



/*********************************** CONTENIDO **************************************/
.center {
	width: 96%;
	max-width: 1100px;
	margin: 0 auto;
}

.banner { position:relative;}
.banner img{ vertical-align: top; width: 100%;}
.banner_movil, .hide_movil { display:none;}
.banner__contenido {
	width: 100%;
	position:absolute;
	top: 48px;
}
.banner--caption { align-content: baseline; max-width: 456px; padding-top: 120px; }
.banner--caption h1, .banner--caption p { color:#FFF;}

.banner__contenido form {
	background-color:#FFF;
	max-width: 546px;
	padding: 56px;
	margin-left:auto;
	border-radius: 12px;
	box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08);
}
.banner__contenido form summary {
	font-size: 32px;
	font-weight:600;
	color: #334155;
	text-align:center;
}
.background-formulario {
	background:url(/imagenes/web/background-formulario.png) center 0 repeat-x;
	padding-top: 48px;
	overflow: hidden;
}
.background-formulario .form {
	max-width: 850px;
	width: 90%;
	margin: 0 auto 80px;
	position:relative;
}
.background-formulario form {
	background-color:#FFF;
	padding: 64px 96px;
	margin-top: 12px;
	border-radius: 12px;
	box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08);
}
/*.background-formulario form .btn--outline {
	position:absolute;
	top: 0;
	left: 0;
}*/
.background-formulario .form .form-izq {
	position:absolute;
	top: 62px;
	left: -270px;
}
.background-formulario .form .form-der {
	position:absolute;
	top: 41px;
	right: -280px;
}


.grid {
    display: grid;
    gap: 12px;
}
.grid2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.grid3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

}
.flex {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 12px;
}
.flex--gap4, .grid--gap4 {gap: 4px;}
.flex--gap24, .grid--gap24 {gap: 24px;}
.flex--gap32, .grid--gap32 { gap: 32px;}
.flex--gap36, .grid--gap36 { gap: 36px;}
.flex--gap48, .grid--gap48 { gap: 48px;}
.gridGap--x24-y12{grid-gap: 12px 24px;}
.flex-summary {
	align-content: baseline;
	min-height: 194px;
}
@media (min-width: 700px) {
.flex-summary {
	padding-left: 24px;
	border-left: 1px solid #E2E8F0;
}
.settings-container { position:relative;}
}
.align-content-center {align-content: center;}
.align-content-baseline {align-content: baseline;}
.align-items-start { align-items: start;}
.align-items-baseline { align-items: baseline;}
.justify-content-center{justify-content: center;}
.justify-content-between{justify-content: space-between;}
.text-center { text-align:center;}

.pp-tb70 { padding: 70px 0;}
.pp-x24 { padding: 0 48px;}
.borderT { border-top: 1px solid #E2E8F0;}

.paginacion {
	background-color: #F8FAFC;
	display:flex;
	gap: 8px;
	justify-content: space-between;
	padding: 12px 24px;
	margin: 24px -24px -24px;
	overflow:hidden;
	border-top: 1px solid #E2E8F0;
	border-radius: 0 0 14px 14px;
}
.paginacion ul{
	display:flex;
	gap: 4px;
}
.paginacion ul li a{width: 32px;}


.planes-tabla {}
.plan-categoria {
	font-size: 20px;
	font-weight: normal;
	display: grid;
	width: 175px;
	height: auto;
	padding: 12px;
	margin:0 auto 26px;
	border-radius: 12px;
	box-shadow: 0px 4px 8px -2px rgba(71, 85, 105, 0.08);
}
.plan-categoria.active { background-color:#F1F5F9;}
.plan-categoria strong{
	color: var(--G700);
	font-weight: 700;
	display: grid;
	align-content: center;
	height: 48px;
	margin-bottom: 17px;
}
.planes-tabla tbody span {
	font-size: 12px;
	color: var(--G700);
	text-align:center;
	height: 32px;
	padding: 8px;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
}
.planes-tabla tbody span, .planes-tabla tbody .btn.btn--outline {
	display: block;
	width: 280px;
}
.planes-tabla tbody td { text-align:center; vertical-align:middle; padding: 16px 12px; border-bottom: 1px solid #E2E8F0;}
.planes-tabla tbody td .iconoir-check-circle-solid {
	color: var(--exito500);
	font-size: 20px;
}
.planes-tabla tbody td .iconoir-circle {
	color: var(--G200);
	font-size: 20px;
}
.movil { display: none;}

.galeria-marcas {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	padding: 0 48px;
}
.galeria-marcas figure{ width: 204px;}
.grid-planes {
	display: flex;
	justify-content: center;
	gap: 24px;
}
.grid-planes .plan-categoria {
	text-align: center;
	margin: 0;
}
@media (min-width: 1126px) {
.grid-planes .plan-categoria {
	width: 220px;
}
.background-wrapper { min-height: 700px;}
}
.accordion {}
.accordion dt{
	color: #334155;
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 24px 56px 24px 46px;
	margin-top: 24px;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	list-style-type: decimal;
	position:relative;
}
.accordion dt:after{
	content: ' ';
	display: block;
	background: currentColor;
	mask-size: cover;
	-webkit-mask-size: cover;
	width: 40px;
	height: 40px;
	position: absolute;
	right: 20px;
	transition: transform 0.4s ease-in-out;
	mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.accordion dt .num {
	font-style: normal;
	position: absolute;
	left: 23px;
}
.accordion dt.active{
	border-bottom: none;
	border-radius: 8px 8px 0 0;
}
.accordion dt.active:after { transform: rotate(-180deg);}
.accordion dd{
	color: #334155;
	padding: 0 48px 24px 48px;
	border: 1px solid #E2E8F0;
	border-top: none;
	border-radius: 0 0 8px 8px;
}
.txt--primary { color:#E9322C;}

.pasos_inscripcion{
	display: flex;
	justify-content: space-between;
	width: 540px;
	height: 80px;
	margin: 0 auto;
}
.pasos_inscripcion li{
	display: grid;
	position:relative;
}
.pasos_inscripcion li:before {
	content: ' ';
	border-top: 2px solid var(--G200);
	display: block;
	width: 208px;
	height: 1px;
	position: absolute;
	top: 16px;
	left: 40px;
}
.pasos_inscripcion li.last:before {
	content: ' ';
	border-top: none;
	display: none;
}
.pasos_inscripcion .bcircle {
	display:grid;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #E2E8F0;
}
.pasos_inscripcion .leyenda {
	color: #020617;
	font-size:14px;
	text-align: center;
	position: absolute;
	left: -60%;
	top: 40px;
}
.pasos_inscripcion li .exito {
	color: #16A34A;
	background-color: #F0FDF5;
	border-color: #F0FDF5;
}
.pasos_inscripcion li .error {
	color: #DC2626;
	background-color: #FFF;
	border-color: #DC2626;
}
.pasos_inscripcion li .error i {
	background-color: #DC2626;
	border-radius: 50%;
}
.pasos_inscripcion .last .leyenda {left: -10%;}
.center-md {
	width: 90%;
	max-width:990px;
	margin:0 auto;
}
.background-wrapper {
	background-color:#F8FAFC; padding: 24px 0 60px;
}
.divContenedor {
	background-color:#FFF;
	min-height: 400px;
	padding: 24px;
	margin-top: 12px;
	border-radius: 12px;
}
.divContenedor--border { border: 1px solid #E2E8F0;}
.divContenedor--shadow {
	box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08);
}
.contenido.background-wrapper .divContenedor--shadow {
	box-shadow: 0px 1px 2px 0px rgba(71, 85, 105, 0.1);
}

.btn-exito, .btn-error {
	background-color: #36B44A;
	width: 90%;
	margin: 0 auto;
	padding: 10px;
	border-radius: 8px;
}
.btn-error { background-color:#FF0000;}
.btn-exito h1, .btn-error h1{ color:#FFF;}
.w310 { min-width: 310px;}
.w360 { min-width: 360px;}
.margin-auto { margin: 0 auto;}
.contenido { margin-left: 50px;}
.contenido.background-wrapper {padding-top: 75px; padding-bottom: 50px;}
.titulo {
	background-color: #fff;
	padding: 24px 32px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--G200);
}
.tab .titulo {
  padding: 0 0 24px;
}

.labelCircle {
	line-height: 24px;
	background-color:transparent;
	display: inline-flex;
	align-items: center;
	gap:12px;
	padding: 8px;
	border: none;
	border-radius: 50%;
}
.labelCircle i { font-size: var(--medida24);}
.labelCircle:hover { background-color: var(--G100);}

.img-radius { border-radius: 12px; width: 100%; height:auto;}
.tag {
  color: #334155;
  font-size: 16px !important;
  background-color: #F8FAFC;
  display: flex;
  align-items: center;
  width: max-content;
  padding: 8px 9px;
  gap: 4px;
  border-radius: 8px;
}
.tag--verde {
  color: #16A34A;
  background-color: #F0FDF5;
}
.tag--rojo {
  color: #DC2626;
  background-color: #FEF2F2;
}
.tag--amarillo {
  color: #CA9A04;
  background-color: #FEF9E8;
}
.tabla th {
  color: #64748B;
  font-weight: 400;
  background-color: #F8FAFC;
  text-align: left;
  padding: 12px 16px;
 /* border-bottom: 1px solid #E7E7E7;*/
}
.tabla tr td {
  color: #334155;
  font-size: 14px;
  vertical-align: middle;
  padding: 12px 16px;
  border-bottom: 1px solid #E7E7E7;
}



/*====== Tabs ======*/
.tab {
    display: flex;
    flex-direction: column;
    position: relative;
}

.tab__listado {
    display: flex;
    gap: 4px;
    list-style: none;
    margin-bottom: -25px;
}

.tab__boton {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    gap: 0.75rem;
    padding: 12px 24px;
    cursor: pointer;
}

.tab__nombre {
    color: #64748B;
}

.tab__boton:hover {
    border: 1px solid var(--P400);
    background: #F1F5F9;
}

.tab__boton--active {
    border-bottom: 2px solid #ED1B2A;
}

.tab__boton--active:hover {
    border-bottom: 2px solid #475569;
    background: transparent;
}

.tab__boton--active .tab__nombre {
    color: var(--G900);
}

.tab__botonImg {
    width: 1rem;
}

.tab__contenido {
    display: none;
    width: 100%;
    height: auto;
    padding-top: 10px;
}

.tab__botonAcordeon {
    display: none;
}





/********** FORMULARIO **********/
summary{
	color: var(--G700);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
}

textarea {
    padding: 8px 14px;
    resize: none;
    moz-resize: none;
    -webkit-resize: none;
}

.form__control:-webkit-input-placeholder {
    color: var(--G400);
    opacity: 1;
}

.form__control:-moz-placeholder {
    color: var(--G400);
    opacity: 1;
}

.form__control:-moz-placeholder {
    color: var(--G400);
    opacity: 1;
}

.form__control:-ms-input-placeholder {
    color: var(--G400);
    opacity: 1;
}
.form__form, .form__icon {
    width: 100%;
    position: relative;
}

.form__label {
    color: var(--G700);
	font-size: 14px;
	line-height: 18px;
    display: inline-block;
	margin-bottom: 4px;
}
.form__control, .form__controlSelect, .form__controlGroup {
	font-family: "Figtree", sans-serif;
    color: var(--G700);
    font-size: 14px;
    line-height: 18px;
    display: block;
    width: 100%;
	min-height: 42px;
    padding: 11px 16px;
    background-color: #fff;
    border: 1px solid var(--G200);
    border-radius: var(--radiusSm);
    outline: none;
}
.form__control:hover { border: 1px solid var(--G400); }
.form__control:focus {
    border-color: var(--G600);
    /*box-shadow: 0 0 0 1px var(--G400);*/
}
.form__control:disabled {
    cursor: not-allowed;
}
.form__control[disabled],
.form__control[readonly] {
    color: var(--G400);
    background-color: var(--G100);
    border-color: var(--G100);
    opacity: 1;
}

.form__control[disabled]:hover,
.form__control[readonly]:hover {
    border: 1px solid var(--G100);
}

.msg-error {
    font-size: var(--medida12);
    color: var(--D600);
    text-indent: 1rem;
    display: none;
    padding-top: 2px;
}

/*====== Botones ======*/
.btnGroup, .btnGroupTabla {
	display: inline-flex;
	gap: 12px;
	width: 100%;
	align-items: center;
}
.btnGroupTabla {
	gap: 8px;
}
.btn {
	font-size: 16px;
	font-family: "Figtree", sans-serif;
	line-height: 18px;
    display: inline-flex;
    width: max-content;
    align-items: center;
    border-radius: var(--radiusSm);
    text-decoration: none;
    border: 0;
    cursor: pointer;
    gap: 12px;
    justify-content: center;
    text-decoration: none;
	padding: 12px;
}
.btn i{ font-size: 18px;}

.btn--wfull, .wfull { width: 100% !important;}
.btn--cursorNone {
    cursor: auto !important;
}


/* Botón primario  */
.btn--primary, .btn--primary:visited {
    color: #fff;
    background-color: var(--P700);
}
.btn--primary:hover {
    background-color: var(--P800);
}
.btn--primary:active {
    background-color: var(--P900);
}
.btn--primary:disabled {
	color: #CBD5E1;
	background-color: #F1F5F9;
	cursor: default;
}

/* Botón outline  */
.btn--outline, .btn--outline:visited{
    color: var(--G700);
    background-color: #FFF;
    border: 1px solid var(--G200);
}
.btn--outline:active { background-color: var(--G200);}
/*.btn--outline i, .iconoirPrimary, .btn--link i { color: var(--P800);}*/
.btn--outlinePrimary, .btn--outlinePrimary:visited {
	color: var(--P900);
	background-color: #FEF5EE;
	border: 1px solid #E9322C;
}
.btn--outline:hover, .btn--outlinePrimary:hover { background-color:var(--G100);}
.cursor-default, .default-hover { cursor: default;}
.default-hover.btn--outline:hover { background-color:transparent;}
.btn--link {
  color: var(--G900);
  background-color: transparent;
}
.btn.btn--trash {
  color: #DC2626;
  background-color:transparent;
  padding: 8px;
  border: none;
}
.btn.btn--trash i {
  font-size: 24px;
}
.btn--trash:hover {
  background-color: var(--G100);
}

/* Boton tamaño */
.btn--sm {
    font-size: 12px;
	line-height: 16px;
	min-height:32px;
	padding: 7px 8px;
	gap: 4px;
}
.btn--sm i{ font-size: 16px; }

.btn--lg {
    font-size: 1rem;
    padding: 16px;
	line-height: 20px;
}
.btn--lg i{ font-size: 20px;}
.circle-mail {
	color:#FFF;
	background-color: #1C63EE;
	display:grid;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

/********** Input checkbox y radio **********/
.form__radio,
.form__check {
    box-sizing: border-box;
    padding: 0;
}

.form__checkLabel {
    color: var(--G700);
	font-size: 14px;
	line-height: 18px;
    display: block;
}

.form__checkInput,
.form__radioInput {
    width: 18px;
    height: 18px;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 2px solid var(--G200);
    appearance: none;
    color-adjust: exact;
    float: left;
	margin:0;
}

.form__checkInput { border-radius: 0.25rem;}
.form__checkInput:active { filter: brightness(90%);}
.form__checkInput:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
	background-color: var(--P700);
	border-color: var(--P700);
}
.form__checkInput:disabled {
    background-color: var(--G100);
    border-color: var(--G100);
}
.form__checkInput:disabled,
.form__radioInput:disabled {
    pointer-events: none;
    filter: none;
}
.form__checkInput:disabled:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23AAB3B6' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    border-color: var(--G100);
}

/*****************************/
.form__radioInput { border-radius: 50%;}
.form__radioInput:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2300ACEC'/%3e%3c/svg%3e");
    border-radius: 50%;
    border-color: var(--G200);
}
.form__radioInput:disabled { border-color: var(--G200);}
.form__radioInput:checked:disabled {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23e5e8e8'/%3e%3c/svg%3e");
    border-color: var(--G200);
}


/*******************************************/

.form-separate {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
	border-bottom: 1px solid #E2E8F0;
}
.form-separate-none {
	margin-bottom: 0;
	border-bottom: none;
}
.form-summary { width: 24%;}
.form-content {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	width: 76%;
	padding-bottom: 24px;
}
.form-content .form__group { width: 33%;}
.form-content .form__group.form__group67 { width: 67.5%;}
.grid--tab .tab__listado {
	margin-bottom: -24px;
}
.grid--tab .divContenedor { border-radius: 0 0 12px 12px;}
.grid--tab .tab__listado { gap: 0;}
.grid--tab .tab__boton { border-top: 1px solid #E2E8F0;}
.grid--tab .tab__boton:first-child {
 border-left: 1px solid #E2E8F0;
	border-radius: 12px 0 0 0;
}
.grid--tab .tab__boton:last-child {
	border-right: 1px solid #E2E8F0;
	border-radius: 0 12px 0 0;
}
.pp-left24 {padding-left: 24.8%;}

/*====== Modal ======*/
.contenedorModal {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 999;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.312);
	transition: transform 0.4s ease-in-out;
}
.contenedorModal.modal-bottom{  top: auto;bottom: 0;}
.contenedorModal.modal-bottom.active { }
.modal {
    background: #FFF;
    display: flex;
    gap: 1.5rem;
    flex-direction: column;
    max-width: 620px;
	width: 90%;
    height: auto;
	margin: 0 auto;
    border-radius: var(--radiusMd);
    border: 1px solid var(--G100);
    padding: 30px 32px;
}
.modal_body {
	max-height: 450px;
	overflow-y:auto;
}

.modal_headerTitulo {
	font-size: var(--medida32);
	line-height: var(--medida40);
    margin: 0px;
}
.planes-tabla.modal { border-radius: var(--radiusMd) var(--radiusMd) 0 0;}
.planes-tabla.modal tbody tr:last-child td { border-bottom: none; padding-bottom:0;}

/*********************************** RESPONSIVE **************************************/
@media (min-width: 801px) {
.w-485{ max-width: 485px;}
}
@media (max-width: 1310px) {
.banner__contenido { top: 24px; }
.banner__contenido form { padding: 36px;}
}
@media (max-width: 1260px) {
.bannertufans img { height: 42px;}
.header-web { padding-top: 44px;}
.banner__contenido { top: 12px;}
.banner_web{ height: 540px;}
fieldset.grid.grid--gap24 { gap: 18px !important; }
.plan-categoria { width: 130px; }
.planes-tabla tbody span { width: 100%; height: auto;}
.form-izq, .form-der{ display: none;}
}
@media (max-width: 1260px) {
.grid3 { grid-template-columns: 1fr 1fr;}
}

@media (max-width: 925px) {
footer {
	background-position: 99% 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	padding-bottom: 36px;
}
footer div { width: auto; }
.pp-tb70 { padding: 50px 0;}

.form-content .form__group {width: 70%;}
.form-content .form__group.form__group67 {width: 100%;}
}

@media (max-width: 880px) {
.header-web { padding-top: 30px;}
.bannertufans img { height: 30px;}
.txt-40 { font-size: 32px; line-height: normal;}
.modal_headerTitulo {
	font-size: var(--medida28);
	line-height: var(--medida32);
	margin: 0px;
}
.modal { gap: 18px;}
.banner__contenido form summary { font-size: 26px;}
.background-formulario form { padding: 24px 36px;}
.modal_body { max-height: 300px;}
.flex.justify-content-between.column-reverse {flex-direction: column-reverse !important; align-items: start!important;}
h2 {
  font-size: var(--medida24);
  line-height: var(--medida28);
}
}

@media (max-width: 800px) {
.banner_web, .hide_web { display:none;}
.banner_movil, .hide_movil  { display:block;}
.banner--caption { padding-top: 50px; margin-bottom: 36px;}
.banner--caption, .banner__contenido form { max-width: 100%; }
.banner { min-height: 900px;}
.grid2 { grid-template-columns: 1fr;}
.w310 { min-width: 230px;}
}
@media (max-width: 760px) {
.grid-planes {
  display: grid;
  grid-template-columns: auto auto;
  gap: 24px;
}
.grid3 {grid-template-columns: 1fr;}
.pp-x24 {  padding: 0 24px;}
}
@media (max-width: 720px) {
.pasos_inscripcion { width: 290px;}
.pasos_inscripcion li::before { width: 82px;}
}

@media (max-width: 699px) {
.web { display: none;}
.movil { display: block;}
.planes-tabla.modal .movil { height: 350px; overflow:auto;}
.planes-tabla tbody td {padding: 4px 12px; border: none;}
.planes-tabla .plan-categoria {
	display: flex;
	gap: 18px;
	align-items: center;
	justify-content: center;
	width: 230px;
	height: auto;
	padding: 0 12px;
	margin:36px auto 12px;
}
.planes-tabla .plan-categoria:last-child { height: auto;}
.planes-tabla .plan-categoria span { height: 56px;}
.planes-tabla .plan-categoria strong { height:auto; margin:0;}
.background-formulario .btn { width:auto; justify-content: center;}
.background-formulario .form__checkLabel, .form-summary, .form-content, .form-content .form__group { width: 100%;}
.form-separate { display: grid;}
.pp-x24 { padding: 0 24px;}
.pp-left24 { padding-left: 0;}
.flex.flex--gap24 { display: grid;}
.dropdown--user .flex.flex--gap24 { display: flex;}

}
@media (max-width: 550px) {
.header {  padding: 12px 20px 12px 16px;}
.hamburger-button {	display: flex;}
.side-nav { z-index:2; top: 0; height: 100%; height: 100vh;}
.side-nav .sidebar-btn { display: none;}
.nav-header { display: block; padding-bottom: 8px; border-bottom: 1px solid #FFF; margin-bottom: 24px;}
.side-nav.side-nav--simple { left: -100px;}
.side-nav .btn.btn--outline { display: inline-flex; width: 94%; position:absolute; bottom: 24px;}
.header-logo { width: 170px;}

.contenido { margin-left: 0;}

.center { width: 94%;}
footer {background-size: 34%;background-position: 85% 99%;}
.galeria-marcas{
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0 24px;
}
.galeria-marcas figure { width: 100%;}
.redes-sociales { display: grid; grid-template-columns: 1fr 1fr;}
.background-formulario form { padding: 18px 20px;}
.tab__boton { padding: 12px; text-align: center;}
.tabla tr td, .tabla th {  padding: 12px 8px;}
}
@media (max-width: 480px) {
footer {background-size: 37%;background-position: 85% 92%;}
.bannertufans img { height: 21px !important;}
.header-web { padding-top: 21px;}
.txt-40 { font-size: 28px;}
.w360, .w310 { width: 100%;}
.w310, .w360 {  min-width: inherit;}
}
@media (max-width: 430px) {
.background-formulario .form { width: 94%;}
.pasos_inscripcion { width: 246px;}
.pasos_inscripcion li:before { width: 60px;}

.grid--tab .tab__listado {
	display:grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 12px;
	column-gap: 12px;
	padding: 4px;
	margin-bottom: 0;
	border-radius:12px;
	box-shadow: 0px 12px 16px -4px rgba(71, 85, 105, 0.11);
}
.grid--tab .tab__boton {  border-top: none;}
.tab__boton--active {
	background-color: #2B4D96;
	border-radius: 8px;
	border-bottom: none;
}
.tab__boton--active .tab__nombre {  color: #F8FAFC;}
.grid--tab .tab__boton:first-child, .grid--tab .tab__boton:last-child{
  border: none;
  border-radius: 8px;
}
.grid--tab .divContenedor {border-radius: 8px;}

.pp-x24 {padding: 0 16px;}
.titulo {  padding: 24px;}
}