@charset "UTF-8";

/*---------------------------------------------------------
[Master Stylesheet]
Theme Name: Gamra – Movies & Series HTML Template
Version: 1.0.0
Author: LeeuCode
----------------------------------------------------------*/


/*----------------------------------------------------------
[Table of contents]
01. Global Styles
02. Helper Classes
03. Hover CSS
03. Preloader
04. Header
05. Home Banner
06. Card Icon
-------------------------------------------------------------*/


/*=============================
	[01. Global Styles]
===============================*/
@font-face{
    font-family:'fuente-externa';
    src:url('/font/Havetime.ttf');
}

:root {
    --primary-color: #13161c;
    --sucondry-color: #0e1116;
    --glass-color: #ffffff0d;
	--white: #eaecee;
	--black: #0e0f0f;
	--accent: #ffb743;
	--secondary: #212529;
}

.accent {
	color: var(--accent);
}

.secondary {
	color: #262b30;
}

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

* {
    font-family: 'Tajawal', sans-serif;
}

*::selection {
	color: var(--secondary);
	background-color: var(--accent);
}

*:link,
*:visited {
	color: inherit
}

code {
	color: inherit;
}

img {
	pointer-events: none;
	user-select: none;
}

.tag {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8vw;
	font-weight: 700;
	color: var(--black);
	background-color: var(--accent);
}

.insert{
    font-size:1.7rem;
}
ul {
    margin: 0;
    list-style: none;
    padding: 0;
}
.position{
    position: absolute !important;
    width:100%;
   z-index:100;
    top:0;
    left:0;
}
p{
    margin: 0;
}

a{
    text-decoration: none;
}

.bg-glass {
    background-color: var(--glass-color);
}.nombreTabla h2{
    color:white;
    font-family:'fuente-externa';
    font-size:2rem;
    text-align:  center;
    height:100%;
    text-shadow:7px 7px 10px rgb(0,0,0);
}.imgItem{
    border: 2px solid red;
    height:250px;
}.bg-primary-dark {
    background-color: #13161c !important;
}.border-dark {
    border-color: #ffffff46 !important;
}

.page-image {
    background:rgba(59,59,59,.9);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: -1;
}

.page-image::after {
    content: '';
    background: linear-gradient(180deg, #13161c41, #0e1116 88%);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

.x-small {
    font-size: .6rem;
}

.mt-min-170 {
    margin-top: -170px;
}

.mt-min-150 {
    margin-top: -150px;
}

.mt-min-130 {
    margin-top: -130px;
}

.logo {
    height: 100px;
}

.header-navbar {
    background: transparent;
    background-image: linear-gradient(180deg, rgba(19, 22, 28, .8) 0%, rgba(19, 22, 28, 0) 70%);
    z-index: 999;
}

.navbar-watching .nav-link {
    padding: .5rem 1rem !important;
    font-size: .90rem;
    font-weight: 600;
    color: #fff;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
}

.navbar-watching .nav-link.active,
.navbar-watching .nav-link:hover {
    background-color: #fff;
    color: #0e1116;
}

ul.dropdown-menu {
    border-radius: 0;
    background-color: #171b20;
}

a.dropdown-item {
    color: #a2a2a2;
}

a.dropdown-item:hover {
    background-color: #0e1116;
    color: #fff;
}

.dropdown-item .form-check-label {
    color: #a2a2a2;
}

.dropdown-item:hover {
    background-color: #0b5ed7;
}

.dropdown-item:hover .form-check-label {
    color: #fff;
    cursor: pointer;
}

.form-check-input[type=checkbox] {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.carousel-1-items .slider-item {
    width: 100%;
    height: 100vh !important;
    background-size: cover;
    background-position: center;
    position: relative;
}

.carousel-1-items .slider-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(19, 22, 28);
    background: linear-gradient(90deg, rgba(19, 22, 28, 1) 0%, rgba(255, 255, 255, 0) 50%);
}

.carousel-1-items .slider-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(19, 22, 28);
    background: linear-gradient(0deg, rgba(19, 22, 28, 1) 0%, rgba(255, 255, 255, 0) 40%);
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    background: 0 0;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    background: #13161cd1;
    color: #fff;
    width: 3%;
    height: 93%;
    position: absolute;
    top: 0;
}

.owl-carousel .owl-nav button.owl-prev {
    left: 0;
}

.owl-carousel .owl-nav button.owl-next {
    right: 0;
}

.gredent-80deg {
    background: rgb(19, 22, 28);
    background: linear-gradient(86deg, rgba(19, 22, 28, 1) 0%, rgba(255, 193, 7, 1) 100%);
}

.play-video,
.play-video-primary {
    background-color: #ffffff2f;
    color: #ffc107;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    border-radius: 20px;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
}

.play-video i,
.play-video-primary i {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 2px solid #ffc107;
    font-size: 1.8rem;
    color: #fff;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
}

.play-video:hover {
    background-color: #ffc107;
    color: var(--sucondry-color);
}

.play-video:hover i {
    background-color: #fff;
    color: var(--sucondry-color);
    border-color: #fff;
}

.play-video-primary {
    background-color: #0b5ed7;
    color: #fff;
}

.play-video-primary i {
    background-color: #fff;
    border-color: #fff;
    color: #0b5ed7;
}

.play-video-primary:hover {
    background-color: #fff;
    color: #0b5ed7;
}

.play-video-primary:hover i {
    background-color: #0b5ed7;
    color: #fff;
}

.slider-thumb .item {
    padding-bottom: 50%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: 2px solid #0e1116;
    position: relative;
    opacity: .3;
    cursor: pointer;
}

.slider-thumb .current .item {
    opacity: .7;
    border-color: #13161c;
}

.media-card {
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    position: relative;
    transform-origin: bottom;
}

.media-card .media-thumb-2 {
    padding-bottom: 58%;
    background-size: cover;
    background-position: top;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    object-fit:contain !important;
    background-position: center;
    background-size: cover;

}.carrusel-movies{
    padding-left:1rem;
    border:5px solid red;
    height:auto;
    width:100%;
    overflow-x: auto; /* Permite el desplazamiento horizontal */ 
    overflow-y: visible; /* Muestra el contenido desbordado en vertical */
    scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */ -ms-overflow-style: none; /* Oculta la barra de desplazamiento en Internet Explorer y Edge */
    white-space: nowrap; /* Evita que las imágenes se envuelvan a la siguiente línea */
}
.carrusel-movies::-webkit-scrollbar { display: none; /* Oculta la barra de desplazamiento en Chrome, Safari y Opera */ }
.imagen-carrusel-movies{
    width:100%;
    height:100%;
    background-position: center;
    background-attachment: fixed;
    background-size:cover;
}.imagen{
    width:100%; /* Ancho largo para las imágenes */
    height:100%; /* Mantiene la proporción de las imágenes */
    border: 4px solid blue;
}.menuOcultoDentroOtro{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items: center;
    gap:1rem;
    width:100%;
    padding:.5rem;
}.contenidoOculto{
    display: none;
    position:relative;
    z-index:10;
    border:5px solid violet; 
    top:0;
    left:0;
    width:100%;
    background:rgb(39, 46, 58);

}.mainContainer{
    display:inline-block;
    position: relative;
    width: 300px; /* Ancho largo para las imágenes */
    height:360px;
    border: 4px dashed orange;
    margin-left:.5rem;
}.mainContainer:hover .contenidoOculto{
    display: block;
   
}.titulo{
    width:100%;
    border:3px solid gold;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
    padding:1rem 0;
}
.media-card .media-details {
    background-color: rgb(39 46 58 / 1);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
    -webkit-transition: all .1s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.media-card:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    z-index: 2;
}

.media-card:hover .media-thumb-2 {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
}

.media-card:hover .media-details {
    visibility: visible;
    opacity: 1;
}

.media-details .btn-watch {
    color: #ddd;
    text-decoration: none;
    line-height: 0;
}

.media-details .btn-watch .icon {
    /* background-color: #0b5ed7; */
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5rem;
    color: #ddd;
    position: relative;
}

.media-details .btn-watch .icon::after {
    content: '';
    background: linear-gradient(86deg, rgba(255, 193, 7, 1) 0%, rgba(11, 94, 215, 1) 100%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.media-details .btn-watch .icon::before {
    content: '';
    background-color: #272e3a;
    width: 95%;
    height: 95%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.media-details .btn-watch .icon i {
    line-height: normal;
    position: relative;
    z-index: 2;
}

.media-details .btn-watch:hover .icon::after,
.media-details .btn-watch:hover .icon::before {
    z-index: 0;
    content: unset;
}

.media-details .btn-watch:hover .icon {
    background-color: #0b5ed7;
}

.media-carousel .owl-stage-outer {
    overflow: visible;
}

.media-carousel .owl-item {
    position: relative;
    z-index: 1;
}

.media-carousel .owl-item:hover {
    z-index: 2;
}

.slick-list {
    overflow: visible;
}

.carousel-4-items:hover {
    z-index: 300;
}

.media-cover {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 80vh;
    z-index: -1;
}

.media-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(19, 22, 28);
    background: linear-gradient(0deg, rgba(19, 22, 28, 1) 0%, rgba(255, 255, 255, 0) 50%);
}

.media-thumb {
    padding-bottom: 150%;
    background-size: cover;
    background-position: center;
    border: 3px solid #272e3a;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    z-index: 2;
}

.media-iframe-player {
    width: 100%;
    position: relative;
    padding-bottom: 50%;
    border-top: 0;
}
.frame-play{
    position: absolute;
    width:100%;
    height:100%;
    top: 0;
    left: 0;
}
.media-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

li.play-server-link {
    text-wrap: nowrap;
    background-color: #0e1116;
    border: 1px solid #202428;
    cursor: pointer;
    padding: .8rem 1rem;
    color: #fff;
    text-align: center;
    flex: 1;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

li.play-server-link i {
    color: #ffc107;
}

li.play-server-link.active,
li.play-server-link:hover {
    background-color: #13161c;
    border-color: #13161c;
}

.downloads-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    /* overflow-x: scroll; */
}

.downloads-list li {
    flex: 1;
}

.downloads-list li a {
    text-decoration: none;
    text-wrap: nowrap;
    background-color: #0e1116;
    border: 1px solid #0e1116;
    border-radius: 5px;
    color: #fff;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.downloads-list li a i {
    padding: 10px;
    background: #ffc107;
    color: #0e1116;
    border-radius: 50px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.text-secondary-light {
    color: #a2a2a2;
}

.h-100vh {
    height: 100vh;
}

.pagination-dark .page-link {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
    color: #fff;
}

.pagination-dark .page-link:hover,
.pagination-dark .active>.page-link {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #0e1116;
}

.icon-md {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #171b20;
    color: #fff;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.icon-md:hover {
    background-color: #fff;
    color: #13161c;
}

.side-menu {
    width: 250px;
    height: 100%;
    position: fixed;
    top: 0;
    left: -100%;
    visibility: hidden;
    background-color: #1f2327;
    z-index: 999;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
}

.side-menu.active {
    left: 0;
    visibility: visible;
}

.side-menu .dropdown-menu {
    position: relative !important;
    transform: translate(0, 0) !important;
    -webkit-transform: translate(0, 0) !important;
    -moz-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    -o-transform: translate(0, 0) !important;
}

.close-side-menu {
    position: absolute;
    top: 4%;
    right: 4%;
    color: #fff;
    opacity: 0.5;
}

.close-side-menu:hover {
    color: #ffc107;
}

.library {
	display: flex;
	flex-direction: column;
	padding-bottom: 1rem;
	gap: 4vw;
	z-index: 1;
}

.library > .banner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.library > .banner > .images {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.library > .banner > .images > li {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.library > .banner > .images > li > .wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	height: 100%;
	overflow: hidden;
}

.library > .banner > .images > li > .wrapper > .ym8uGp {
	position: absolute;
	inset: 0;
	opacity: 0;
	background: linear-gradient(to top, #0e1116, #0e111600 33.42%);
	transition: opacity 0s .5s;
}

.library > .banner > .images > li.active > .wrapper > .ym8uGp {
	opacity: 1;
}

.library > .banner > .images > li > .wrapper > .ym8uGp::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right, 
		#0e1116 0%,
		rgba(14, 17, 22, 0.8) 20%,
		#0e111600 80%
	);
}

.library > .banner > .images > li > .wrapper > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .15s .38s ease-out;
}

.library > .banner > .images > li.active > .wrapper > img {
	opacity: 1;
	transition: opacity .15s .6s ease-out;
}

.library > .banner > .images > li > .wrapper > div:last-child {
	display: flex;
	flex-direction: column;
	align-items: start;
	position: absolute;
	top: 32%;
	left: 4vw;
	max-width: 45vw;
	opacity: 0;
	z-index: -1;
	animation: toLeft 400ms cubic-bezier(0.5, 0, 0.1, 1) forwards;
	transition: z-index 0s .2s;
}

.library > .banner > .images > li.active > .wrapper > div:last-child {
	animation-name: fromRight;
	z-index: 1;
	transition: z-index 0s .2s;
}

.library > .banner > .images > li.backwards > .wrapper > div:last-child {
	animation-name: toRight;
}

.library > .banner > .images > li.active.backwards > .wrapper > div:last-child {
	animation-name: fromLeft;
	z-index: 1;
	transition: z-index 0s .2s;
}

@keyframes toLeft {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		transform: translateX(-4vw);
	}
}

@keyframes fromLeft {
	67% {
		opacity: 0;
		transform: translateX(-4vw);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes toRight {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		transform: translateX(1vw);
	}
}

@keyframes fromRight {
	67% {
		opacity: 0;
		transform: translateX(1vw);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.library > .banner > .images > li > .wrapper > div:last-child > .logo {
	position: absolute;
	top: -4.5vw;
	left: -1.2vw;
	width: 6vw;
    height: auto;
    aspect-ratio: 1;
}

.library > .banner > .images > li > .wrapper > div:last-child > h4 {
	margin-top: 1vw;
	font-size: 3vw;
	font-weight: 900;
	color: var(--white);
}

.library > .banner > .images > li > .wrapper > div:last-child > p {
	display: -webkit-box;
    margin-top: 1vw;
    font-size: 1.4vw;
    font-weight: 700;
    letter-spacing: 1px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
	line-clamp: 2;
    color: var(--white);
    overflow: hidden;
}

.library > .banner > .images > li > .wrapper > div:last-child > div {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: .5vw;
	gap: 1vw;
}

.library > .banner > .images > li > .wrapper > div:last-child > div > .tag {
	display: flex;
    align-items: center;
    justify-content: center;
    width: 7vw;
    height: 2vw;
	border-radius: 5px;
    font-size: 1vw;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.library > .banner > .images > li > .wrapper > div:last-child > div > div:last-child {
	font-size: 1.17vw;
	font-weight: 600;
	letter-spacing: 1px;
	color: #8e959e;
	opacity: 1;
}

.library > .banner > .images > li > .wrapper > div:last-child > a {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3vw;
	width: 20vw;
	height: 4vw;
	border-radius: 10px;
	font-size: 2vw;
	font-weight: 700;
	color: var(--accent);
	background-color: #1e2224;
	gap: 2vw;
	transition: color .2s cubic-bezier(0.5, 0, 0.1, 1), background-color .2s cubic-bezier(0.5, 0, 0.1, 1);
}

.library > .banner > .images > li > .wrapper > div:last-child > a:hover {
	color: var(--black);
	background-color: var(--white);
}

.library > .banner > .navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 2vw;
	gap: .5vw;
}

.library > .banner > .navigation > li {
	padding: .35vw;
	cursor: pointer;
}

.library > .banner > .navigation > li.active {
	cursor: default;
}

.library > .banner > .navigation > li > span {
	display: block;
	width: 1vw;
	border-radius: 9999px;
	background-color: var(--white);
	aspect-ratio: 1;
	opacity: .3;
	transition: opacity .2s cubic-bezier(0.5, 0, 0.1, 1), background-color .2s cubic-bezier(0.5, 0, 0.1, 1);
}

.library > .banner > .navigation > li:hover > span {
	background-color: var(--accent);
	opacity: .5;
}

.library > .banner > .navigation > li.active > span {
	background-color: var(--accent);
	opacity: 1;
}

.library > .banner > button {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 80%;
	margin-inline: .5vw;
	padding: 1vw;
	border-radius: 9999px;
	background-color: #1e2224c9;
	cursor: pointer;
	aspect-ratio: 1;
	overflow: hidden;
	transition: background-color .2s cubic-bezier(0.5, 0, 0.1, 1);
}

.library > .banner > .left {
	left: 0;
}

.library > .banner > .right {
	right: 0;
}

.library > .banner > button:hover {
	background-color: #1e2224e8;
}

.library > .banner > button > i {
	color: var(--white);
	will-change: transform;
	transition: transform .2s cubic-bezier(0.5, 0, 0.1, 1);
}

.library > .banner > button:hover > i {
	transform: scale(1.4);
}

.library > .banner > button:active > i {
	transform: scale(1);
}

.info {
	display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-inline: auto;
    padding: 2vw 1.3vw;
	max-width: 49vw;
    border: #262b2e solid .1vw;
    border-radius: 10px;
	gap: 1vw;
	cursor: default;
}

.info > i {
	margin-top: .5vw;
	font-size: 2vw;
	color: var(--accent);
}

.info > div {
	display: flex;
	flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
	gap: 1vw;
}

.info > div > p {
	font-size: 1.3vw;
    color: var(--white);
}

.info > div > .pd {
	font-size: 1.25vw;
	font-style: italic;
	opacity: .6;
}

.library > section {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.library > section > h3 {
	font-size: 1.7vw;
	font-weight: 700;
	color: var(--white);
	margin-left: 4%;
}

.library > section.scroll > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding-inline: 4%;
	width: 100%;
	user-select: none;
}

.library > section.scroll > div > :is(.left, .right) {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 4%;
	height: 101%;
    background-color: #10101066;
	z-index: 2;
	cursor: pointer;
	transition: background-color .2s cubic-bezier(0.5, 0, 0.1, 1);
}

.library > section.scroll > div > :is(.left, .right).show {
	display: flex;
}

.library > section.scroll > div > :is(.left, .right):hover {
	background-color: #141414b3;
}

.library > section.scroll > div > .left {
	left: -2px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.library > section.scroll > div > .right {
	right: -2px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.library > section.scroll > div > :is(.left, .right) > i {
	font-size: 2em;
	color: var(--white);
	opacity: 0;
}

.library > section.scroll > div:hover > :is(.left, .right) > i {
	opacity: 1;
	transition: transform .2s cubic-bezier(0.5, 0, 0.1, 1);
}

.library > section.scroll > div > :is(.left, .right):hover > i {
	transform: scale(1.4);
}

.library > section ul {
	--cw: 20%;
	display: flex;
	width: 100%;
	height: fit-content;
	transform: translateX(var(--tx));
	z-index: 0;
	transition: transform .8s cubic-bezier(0.5, 0, 0.1, 1), z-index 0s .4s;
}

.library > section:not(.scroll) ul {
	padding-inline: 4%;
	flex-wrap: wrap;
	row-gap: .2vw;
}

.library > section ul:has(li > .wrapper > div:hover) {
	z-index: 1;
}

.library > section ul > li {
	display: flex;
    flex-direction: column;
    padding-inline: .2vw;
    min-width: var(--cw);
    width: var(--cw);
    aspect-ratio: 16/9;
}

.library > section ul > li.vertical {
    aspect-ratio: 9 / 12;
}

.library > section ul > li > .wrapper {
	position: relative;
}

.library > section ul > li > .wrapper > div {
	display: flex;
	flex-direction: column;
	position: absolute;
	width: 100%;
	border-radius: 5px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0);
	overflow: hidden;
	z-index: 0;
	transition: transform .25s cubic-bezier(0.5, 0, 0.1, 1), box-shadow .25s cubic-bezier(0.5, 0, 0.1, 1), z-index 0s .4s;
	will-change: transform;
}

.library > section ul > li > .wrapper > div.tl {
	transform-origin: left;
}

.library > section ul > li > .wrapper > div.tr {
	transform-origin: right;
}

.library > section ul > li > .wrapper > div:has(a:hover, div:hover) {
	transform: scale(1.4813) translateY(-25px);
	z-index: 2;
	box-shadow: 0 0 6px rgb(0 0 0 / 25%);
	transition: transform .3s .4s cubic-bezier(0.5, 0, 0.1, 1), box-shadow .3s .4s cubic-bezier(0.5, 0, 0.1, 1), z-index 0s .4s;
}

.library > section ul > li.vertical > .wrapper > div:has(a:hover, div:hover) {
	transform: scale(1.15) translateY(-25px);
}

.library > section ul > li > .wrapper > div > a {
	display: flex;
	justify-content: center;
	position: relative;
	margin: 0;
	height: 100%;
    aspect-ratio: 16 / 9;
	border-radius: 0 0 5px 5px;
	overflow: hidden;
	transition: border-radius .3s;
}

.library > section ul > li.vertical > .wrapper > div > a {
    aspect-ratio: 9 / 12;
}

.library > section ul > li > .wrapper > div:has(a:hover, div:hover) > a {
	border-radius: unset;
	transition: border-radius .3s .4s;
}

.library > section ul > li > .wrapper > div > a > img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

.library > section ul > li > .wrapper > div > a > .logo {
	position: absolute;
    top: -.3vw;
    left: -.3vw;
    height: 4vw;
    object-fit: contain;
    z-index: 1;
	will-change: transform;
}

.library > section ul > li > .wrapper > div > a > .tag {
	margin-bottom: -1px;
	position: absolute;
	bottom: 0;
	padding: .1vw .7vw;
	border-radius: 3px 3px 0 0;
	z-index: 1;
	will-change: transform;
}

.library > section ul > li > .wrapper > div > div {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 0;
	background-color: rgb(25, 28, 29);
	opacity: 0;
	z-index: -1;
	pointer-events: none;
	transition: opacity .3s cubic-bezier(0.5, 0, 0.1, 1), height 0s .4s, margin-top 0s .4s, padding 0s .4s;
}

.library > section ul > li > .wrapper > div:has(a:hover, div:hover) > div {
	margin-top: -1px;
	padding: 0.8vw 0.8vw;
	height: 100%;
	opacity: 1;
	z-index: 2;
	pointer-events: initial;
	transition: opacity .2s .4s cubic-bezier(0.5, 0, 0.1, 1), z-index 0s .4s, pointer-events 0s .4s;
}

.library > section ul > li > .wrapper > div > div > h4 {
	font-size: 1.2vw;
	font-weight: 600;
	color: var(--white);
	will-change: transform;
}

.library > section ul > li > .wrapper > div > div > a {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: .5em;
	padding-block: .2em;
	border-radius: 5px;
	font-size: 1.2vw;
	font-weight: 500;
	color: var(--black);
	background-color: var(--accent);
	gap: .6em;
	will-change: transform;
}

.library > section ul > li > .wrapper > div > div > div {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: .5em;
	font-size: 1vw;
	font-weight: 600;
	color: #787f8a;
	gap: .8vw;
}

/* Material */

.material {
	display: flex;
	flex-direction: column;
	margin: 10vw 4vw;
	gap: 3vw;
	cursor: default;
}

.material > .linksContainer {
	display: flex;
	flex-direction: column;
	gap: 5vw;
}

.material > .linksContainer > .navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-inline: 20vw;
}

.material > .linksContainer > .navigation > .type {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .3vw .8vw;
	border-radius: 5px;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 1.2vw;
	font-weight: 900;
	text-transform: capitalize;
	color: var(--white);
	cursor: pointer;
	transition: background-color .1s ease-out, color .1s ease-out;
	user-select: none;
}

.material > .linksContainer > .navigation > .type.currentSelected {
	color: var(--secondary);
	background-color: var(--accent);
	cursor: default;
}

.material > .linksContainer > .typeContainer {
	display: flex;
	align-items: center;
	justify-content: center;
}

.material > .linksContainer > .typeContainer > .typeContent {
	--gap: 3vw;
	display: none;
	flex-wrap: wrap;
	width: 100%;
	gap: var(--gap);
}

.material > .linksContainer > .typeContainer > .typeContent.show {
	display: flex;
}

.material > .linksContainer > .typeContainer > .typeContent > article {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2vw;
	width: calc(30% - (var(--gap) / 3) + 2vw);
	border-radius: 15px;
	color: var(--white);
	background-color: #161a1d;
	gap: 2vw;
}

@supports (background-color: color-mix(in srgb, var(--accent) 3%, var(--accent) 0%)) {
	.material > .linksContainer > .typeContainer > .typeContent > article {
		background-color: color-mix(in srgb, var(--accent) 3%, var(--accent) 0%);
	}
}

.material > .linksContainer > .typeContainer > .typeContent > article * {
	margin: 0;
}

.material > .linksContainer > .typeContainer > .typeContent > article > main {
	display: flex;
	flex-direction: column;
	gap: 1vw;
}

.material > .linksContainer > .typeContainer > .typeContent > article > main > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.material > .linksContainer > .typeContainer > .typeContent > article > main > div > h2 {
	all: unset;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 2vw;
	font-weight: 900;
}

.material > .linksContainer > .typeContainer > .typeContent > article > main > div > figure {
	display: flex;
	position: absolute;
	top: -4.2vw;
	right: -.5vw;
	width: 7vw;
	aspect-ratio: 1;
}

.material > .linksContainer > .typeContainer > .typeContent > article > main > p {
	font-size: 1.1vw;
}

.material > .linksContainer > .typeContainer > .typeContent > article > footer > a {
	display: inline-flex;
	align-items: center;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 1.18vw;
	color: var(--accent);
	gap: .8vw;
}

.material > .linksContainer > .typeContainer > .typeContent > article > footer > a:hover > span {
	text-decoration: underline;
}

.material > .linksContainer > .typeContainer > .typeContent > article > footer > a > :last-child {
	color: var(--white);
}

.material > .linksContainer > .typeContainer > .typeContent > article > footer > a > svg {
	width: 16px;
}

body:has(.affiliation) {
	display: flex;
	flex-direction: column;
}

.affiliation {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	margin: 10vw 4vw;
	cursor: default;
}

.affiliation > .hero {
	--mx: 7vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-inline: var(--mx);
	width: calc(100% - var(--mx));
	height: calc(100vh - 20vw);
}

.affiliation > .hero::before {
	content: '';
	position: absolute;
	inset: 0;
	height: 120vh;
	border-radius: 100%;
	background-image: conic-gradient(from 180deg at 60% 40%, #9aabbd 0deg, 180deg, var(--accent) 0deg);
	filter: blur(100px);
	z-index: -1;
	opacity: .15;
}

.affiliation > .hero > .bg-lines {
	position: absolute;
    inset: 0;
    z-index: -2;
}

.affiliation > .hero > .title {
	flex: 1;
}

.affiliation > .hero > .title > h1 {
	all: unset;
	font-size: 7vw;
	font-weight: 700;
	line-height: 6vw;
	white-space: pre-line;
	color: var(--white);
	text-transform: uppercase;
}

.affiliation > .hero > .title > h1 > span {
	font-weight: 900;
	color: var(--accent);
	animation: glowBlink 5s ease-in-out infinite;
}

@keyframes glowBlink {
	0%, 20%, 40%, 60%, 100% {
		filter: drop-shadow(0px 0px 10px rgba(255, 227, 151, 0.1));
	}
	15% {
		filter: drop-shadow(0px 0px 13px rgba(255, 227, 151, 0.2));
	}
	25% {
		filter: drop-shadow(0px 0px 16px rgba(255, 227, 151, 0.3));
	}
	55% {
		filter: drop-shadow(0px 0px 13px rgba(255, 227, 151, 0.2));
	}
	65% {
		filter: drop-shadow(0px 0px 10px rgba(255, 227, 151, 0.3));
	}
}

.affiliation > .hero > .icon {
	color: var(--accent);
	min-width: 35%;
}

.affiliation > .welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	margin-top: 23vw;
	width: 100%;
	height: calc(100vh - 15vw);
	color: white;
}

.affiliation > .welcome > header {
	font-size: 3vw;
	color: transparent;
	background-image: linear-gradient(to right, var(--accent), #ffcc79);
	background-clip: text;
}

.affiliation > .welcome > header > h2 {
	display: inline;
	font-size: inherit;
	font-weight: 700;
}

.affiliation > .welcome > main > p {
	font-size: 1.5vw;
	text-align: center;
	white-space: pre-line;
	color: #d7dce2;
}

.affiliation > .welcome > svg {
	margin-top: 3vw;
	height: 100%;
}

.affiliation > .step {
	--mx: 7vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 23vw;
	width: calc(100% - var(--mx));
	height: 75vh;
	gap: 5vw;
}

.affiliation > .step > .content > h3 {
	all: unset;
	font-size: 2.5vw;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--accent);
	filter: drop-shadow(2px 2px 0px #9c4400);
}

.affiliation > .step > .content > p {
	position: relative;
	margin-top: 2vw;
	max-width: 35ch;
	font-size: 1.7vw;
	white-space: pre-line;
	color: #d7dce2;
}

.affiliation > .step > .content > p > a {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	gap: .4vw;
}

.affiliation > .step > .content > p > a:has(code) {
	font-size: 1.5vw;
}

.affiliation > .step > .content > p > a > svg {
	width: 1.5vw;
	height: auto;
}

.affiliation > .step > .content > p > a > :first-child {
	transition: color .1s ease-out, background-color .1s ease-out;
}

.affiliation > .step > .content > p > a:hover > :first-child {
	color: var(--secondary);
	background-color: var(--accent);
}

.affiliation > .step > .content > ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin-top: 3vh;
	list-style: square inside;
}

.affiliation > .step > .content > ul > li {
	max-width: 38vw;
	font-size: 1.3vw;
	color: #c0c4c9;
}

.affiliation > .step > .content > ul > li::marker {
	margin-right: 1px;
	color: #7a7d80;
}

.affiliation > .step > .content > ul > li > strong {
	font-weight: 900;
	color: #d1d6db;
}

.affiliation > .step > .content .info {
	margin-top: 2vw;
    margin-inline: unset;
    padding: 1.2vw 1vw;
    max-width: 40vw;
}

.affiliation > .step > .content > .infoContainer > .info {
	margin-top: 1vw;
}

.affiliation > .step > .content .info > i {
	font-size: 1.5vw;
}

.affiliation > .step > .content .info > div > p {
	font-size: 1.1vw;
}

.affiliation > .step > .content > p > code,
.affiliation .resource > .window code {
	padding: .5vw 1vw;
	border: .1vw solid var(--secondary);
	border-radius: .3vw;
	background-color: var(--black);
}

.affiliation > .register {
	align-items: flex-start;
}

.affiliation > .register > .content > p::after {
	content: '';
	position: absolute;
	left: 40%;
	bottom: -.5vw;
	width: 70%;
	height: 0.4vw;
	background-color: var(--accent);
}

.affiliation > .register > .content > p > strong {
	color: rgb(60, 238, 134);
}

.affiliation > .register > .resource {
	position: relative;
	height: 100%;
}

.affiliation > .register > .resource::before {
	content: '';
	position: absolute;
	right: -.7vw;
	bottom: -.7vw;
	width: 100%;
	height: 100%;
	border: 0.2vw solid var(--accent);
}

.affiliation > .register > .resource > lite-youtube {
	height: 100%;
}

.affiliation > .complete > .resource {
	display: flex;
	padding-block: 7vh;
    min-width: 50%;
    max-width: 50%;
	height: 100%;
    gap: 3vw;
}

.affiliation > .complete > .resource > figure {
	display: flex;
	height: 100%;
}

.affiliation > .complete > .resource > figure > div > img {
    width: 100%;
	height: fit-content;
    object-fit: contain;
}

.affiliation > .complete > .resource > .register {
	align-items: start;
}

.affiliation > .complete > .resource > .register > div,
.affiliation > .complete > .resource > .welcome > div {
	position: relative;
	width: 19.4vw;
}

.affiliation > .complete > .resource > .register > div::before {
	content: '';
	position: absolute;
	left: -.7vw;
	bottom: -.7vw;
	width: 100%;
	height: 100%;
	border: .2vw solid var(--accent);
	z-index: -2;
}

.affiliation > .complete > .resource > .welcome {
	align-items: end;
}

.affiliation > .complete > .resource > .welcome > div::before {
	content: 'Captura de pantalla';
	position: absolute;
	top: -2.5vw;
	left: -.5vw;
	font-size: 1.2vw;
	font-weight: 700;
	color: transparent;
	background-image: linear-gradient(to right, var(--accent), #ffcc79);
	background-clip: text;
}

.affiliation > .complete > .resource > .welcome > div::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	outline: .2vw dashed var(--secondary);
    outline-offset: .5vw;
}

.affiliation > .complete > .content > p > a > :first-child,
.affiliation > .validate > .content > p > a > :first-child {
	position: relative;
}

.affiliation > .complete > .content > p > a > :first-child:before,
.affiliation > .validate > .content > p > a > :first-child:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -.2vw;
	width: 100%;
	height: .15vw;
	background-color: var(--accent);
	z-index: -1;
	transition: background-color .1s ease-out;
}

.affiliation > complete > .content > p > a:hover > code {
	color: var(--accent);
	background-color: unset;
}

.affiliation > .complete > .content > p > a:hover > :first-child::before,
.affiliation > .validate > .content > p > a:hover > :first-child::before {
	background-color: transparent;
}

.affiliation > .pay > .content > .origin {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: .5vw;
	gap: 1vw;
}

.affiliation > .pay > .content > .origin > div {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: .3vw 1.2vw;
	border-radius: .22vw;
	font-size: 1.8vw;
	cursor: pointer;
}

.affiliation > .pay > .content > .origin > .selected {
	cursor: default;
}

.affiliation > .pay > .content > .origin > div::before {
	content: '';
	position: absolute;
	left: 0;
	top: .3vw;
	width: 100%;
	height: calc(100% - .3vw);
	border-radius: .37vw;
	background-color: #9c4400;
	z-index: -1;
	transition: background-color .1s ease-out;
}

.affiliation > .pay > .content > .origin > div::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100% - .3vw);
	border: .2vw solid #9c4400;
	border-radius: .37vw;
	background-color: color-mix(in srgb, var(--accent) 85%, black);
	z-index: 0;
	transition: transform .1s ease-out, border-color .1s ease-out, background-color .1s ease-out;
}

.affiliation > .pay > .content > .origin > div:not(.selected):hover::after {
	border-color: #9c4400;
	background-color: var(--accent);
}

.affiliation > .pay > .content > .origin > .selected::after {
	background-color: color-mix(in srgb, var(--accent) 70%, black);
	transform: translateY(.3vw);
}

.affiliation > .pay > .content > .origin > div > span {
	font-size: 1.8vw;
	color: var(--secondary);
	transform: translateY(-.1vw);
	transition: color .1s ease-out, transform .1s ease-out;
	z-index: 1;
	will-change: transform;
}

.affiliation > .pay > .content > .origin > .selected > span {
	transform: translateY(.2vw);
}

.affiliation > .pay > .resource,
.affiliation > .validate > .resource {
	height: 100%;
}

.affiliation > .pay > .resource > .window {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #262b30;
	border-radius: 5px;
	aspect-ratio: 1;
}

.affiliation > .pay > .resource > .window > .tabs > ul {
	display: flex;
	padding: .3vw;
	width: 100%;
	border-bottom: 1px solid #262b30;
	gap: .3vw;
}

.affiliation > .pay > .resource > .window > .tabs > ul > li {
	--secondary: var(--black);

	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: .1vw 1vw;
	border: 1px solid transparent;
	border-radius: calc(5px - .3vw);
	font-size: 1.17vw;
	font-weight: 700;
	color: #929faa;
	cursor: pointer;
	transition: color .1s ease-out, background-color .1s ease-out, border-color .1s ease-out;
	user-select: none;
}

.affiliation > .pay > .resource > .window > .tabs > ul > li[data-tab='pm'] {
	--accent: #0067b1;
}

.affiliation > .pay > .resource > .window > .tabs > ul > li:not(.selected):hover {
	color: var(--accent);
	border-color: var(--accent);
}

.affiliation > .pay > .resource > .window > .tabs > ul > .selected {
	color: var(--secondary);
	background-color: var(--accent);
	cursor: default;
}

.affiliation > .pay > .resource > .window > .contentContainer:has(.selected.pm) {
	--accent: #0067b1;
	--secondary: var(--black);
	--bg-color: #212121;
}

.affiliation > .pay > .resource > .window > .contentContainer:has(.selected.bnc) {
	--bg-color: #1f2630;
}

.affiliation > .pay > .resource > .window > .contentContainer {
	padding: 1vw;
	width: 100%;
	height: 100%;
	background-color: var(--bg-color);
}

.affiliation > .pay > .resource > .window > .contentContainer > .content {
	display: none;
	width: 100%;
	height: 100%;
}

.affiliation > .pay > .resource > .window > .contentContainer > .content.selected {
	display: flex;
}

.affiliation > .pay > .resource > .window > .contentContainer > .pm {
	padding: 1vh 4vw;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc {
	flex-direction: column;
	gap: 3.1vh;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > header {
	display: flex;
	justify-content: center;
	height: 4vh;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > header > svg {
	height: 100%;
}

.affiliation > .pay > .resource > .window > .contentContainer main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	gap: 2.1vh;
}

.affiliation > .pay > .resource > .window > .contentContainer main > .qrContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 1.05vh;
}

.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > .qrContainer {
	gap: 1.5vh;
}

.affiliation > .pay > .resource > .window > .contentContainer main > .qrContainer > p {
	max-width: 60%;
	font-size: 2.5vh;
	text-align: center;
	line-height: 2.5vh;
	color: #8b919d;
}

.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > .qrContainer > p {
	max-width: 80%;
}

.affiliation > .pay > .resource > .window > .contentContainer main > .qrContainer > .qr {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 1.5vh;
    height: 25vh;
	border-radius: 1vh;
	background-color: #fff;
	pointer-events: none;
	user-select: none;
}

.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > .qrContainer > .qr {
    height: 27vh;
}

.affiliation > .pay > .resource > .window > .contentContainer main > .qrContainer > .qr > img {
	width: auto;
	height: 100%;
	aspect-ratio: 1;
	image-rendering: pixelated;
}

.affiliation > .pay > .resource > .window > .contentContainer main > .qrContainer > .qr > svg {
	position: absolute;
	height: 31%;
	aspect-ratio: 1;
}

.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > .qrContainer > .qr > svg {
	height: 23%;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 1vw;
	width: 100%;
	border-radius: 1vh;
	background-color: #29313c;
	gap: 1vw;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > img {
	width: 4vh;
	border-radius: .5vh;
	aspect-ratio: 1;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > li {
	font-size: 2.3vh;
	color: #8b919d;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > li:first-child {
	font-size: 2.5vh;
	font-weight: 700;
	color: var(--white);
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > .separator {
	margin-block: 2vh;
	width: 100%;
	height: 1px;
	background-color: #373e48;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > li:has(.supportAmount) {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1vw;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > li:has(.supportAmount) > img {
	height: 4.7vh;
}

.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > li:has(.supportAmount) > span {
	font-size: 3.7vh;
	font-weight: 700;
	color: var(--white);
}

.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-items: flex-start;
	width: 100%;
	color: var(--white);
	gap: .5vh;
}

.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > ul > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: 2.7vh;
	letter-spacing: 1px;
}

.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > ul > li > span:first-child {
	font-weight: 700;
}

.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > ul > li:has(.supportAmount) {
	justify-content: center;
	margin-top: 2vh;
	padding-block: 1vh;
	border-radius: 1vh;
	font-size: 3.7vh;
	background-color: #2c2c2c;
}

.affiliation > .validate > .content > p {
	max-width: 39ch;
}

.affiliation > .validate > .content > p > a > :first-child::before {
	bottom: 0;
}

.affiliation > .validate > .resource > .chat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	width: 57vh;
	height: 100%;
	border-radius: 5px;
    background-color: #0e0f0f;
	overflow: hidden;
}

.affiliation > .validate > .resource > .chat::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle 55vh at top right, #6b6038, transparent),
		radial-gradient(circle 55vh at top left, #ff7000, transparent),
		radial-gradient(circle 55vh at bottom left, #e7dc8f, transparent),
		radial-gradient(circle 55vh at bottom right, var(--accent), transparent);
	mask-image: url(/nuevaPresentacion/assets/images/tg_pattern_30.svg);
	opacity: .3;
}

.affiliation > .validate > .resource > .chat > header,
.affiliation > .validate > .resource > .chat > footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5vh 2vw;
	width: 100%;
	height: 10vh;
	border-bottom: .5px solid #00020862;
	color: var(--white);
	background-color: #222126e6;
    backdrop-filter: blur(2.5vh);
	gap: 2vw;
	z-index: 1;
}

.affiliation > .validate > .resource > .chat > header > i {
	font-size: 2.45vh;
	cursor: pointer;
}

.affiliation > .validate > .resource > .chat > header > .group {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 1vw;
	overflow: hidden;
}

.affiliation > .validate > .resource > .chat > header > .group > img {
	width: auto;
	height: 100%;
	border-radius: 9999px;
	aspect-ratio: 1;
}

.affiliation > .validate > .resource > .chat > header > .group > span {
	mask-image: linear-gradient(to right, black 90%, transparent 98%);
	font-size: 1.171vw;
	font-weight: 700;
	text-wrap: nowrap;
    overflow: hidden;
}

.affiliation > .validate > .resource > .chat > main {
	display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    position: relative;
    padding-block: 1.3vh;
    padding-right: .5vh;
    width: 100%;
    height: 100%;
	overflow-x: hidden;
    overflow-y: auto;
	scrollbar-gutter: stable;
}

@supports selector(::-webkit-scrollbar) {
	.affiliation > .validate > .resource > .chat > main:not(:hover)::-webkit-scrollbar-thumb,
	.affiliation > .validate > .resource > .chat > main:not(:hover)::-webkit-scrollbar-track,
	.affiliation > .validate > .resource > .chat > main:not(:hover)::-webkit-scrollbar-corner {
		visibility: hidden;
	}

	.affiliation > .validate > .resource > .chat > main::-webkit-scrollbar {
		width: 1.8vh;
	}

	.affiliation > .validate > .resource > .chat > main::-webkit-scrollbar-thumb {
		border: .5vh solid transparent;
		border-radius: 1vh;
		background-color: color-mix(in srgb, var(--accent) 50%, transparent);
		background-clip: content-box;
	}

	.affiliation > .validate > .resource > .chat > main::-webkit-scrollbar-thumb:active,
	.affiliation > .validate > .resource > .chat > main::-webkit-scrollbar-thumb:hover {
		background-color: color-mix(in srgb, var(--accent) 70%, transparent);
	}

	.affiliation > .validate > .resource > .chat > main::-webkit-scrollbar-track,
	.affiliation > .validate > .resource > .chat > main::-webkit-scrollbar-corner {
		border: .5vh solid transparent;
		border-radius: 1vh;
		background-color: color-mix(in srgb, var(--accent) 10%, transparent);
		background-clip: content-box;
	}

	.affiliation > .validate > .resource > .chat > main::-webkit-scrollbar-track:hover,
	.affiliation > .validate > .resource > .chat > main::-webkit-scrollbar-corner:hover {
		background-color: color-mix(in srgb, var(--accent) 15%, transparent);
	}
}

@supports not selector(::-webkit-scrollbar) {
	.affiliation > .validate > .resource > .chat > main {
		scrollbar-color: color-mix(in srgb, var(--accent) 50%, transparent) color-mix(in srgb, var(--accent) 20%, transparent);
		scrollbar-width: thin;
	}
}

.affiliation > .validate > .resource > .chat > main > ul {
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    gap: 1.5vh;
    z-index: 0;
}

.affiliation > .validate > .resource > .chat > main > ul > li {
	position: relative;
	padding: 0.3vh;
    max-width: 65%;
    border-radius: 2.7vh;
    color: var(--white);
    background-color: #486994;
}

.affiliation > .validate > .resource > .chat > main > ul > li:last-child {
    border-bottom-right-radius: 0;
}

.affiliation > .validate > .resource > .chat > main > ul > li:last-child::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	border: 2vh solid transparent;
	border-left-color: #486994;
	border-right: 0;
	border-bottom: 0;
	margin-right: -.7vh;
	z-index: -1;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer {
	all: unset;
    display: flex;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1.1;
    border-radius: calc(2.7vh - 0.3vh);
    border-bottom-left-radius: 0.5vh;
    border-bottom-right-radius: .5vh;
	overflow: hidden;
	gap: 0.3vh;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer:has(.selected.pm) {
	--accent: #0067b1;
	--bg-color: #212121;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer:has(.selected.bnc) {
	--bg-color: #1f2630;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > img {
	min-width: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 50%;
	height: 100%;
	background-color: var(--bg-color);
	overflow: hidden;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.selected {
	display: flex;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.pm {
	padding: 2vh 3vh;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.pm > .bdv {
	min-height: 3.5vh;
    max-height: 3.5vh;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.pm > span {
	font-size: 2vh;
	font-weight: 700;
	text-wrap: nowrap;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.pm > i {
	font-size: 2.7vh;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.pm > div {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 1vh;
	width: 230%;
	border-radius: 1vh;
	font-size: 2vh;
	background-color: #2c2c2c;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.pm > div > span {
	font-weight: 700;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.pm > ul {
	display: flex;
	flex-direction: column;
	margin-top: .5vh;
	width: 230%;
	font-size: 1.5vh;
	gap: .1vh;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.pm > ul > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.pm > ul > li > span:first-child {
	font-weight: 700;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc {
	padding-block: 1.5vh;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > .check {
	display: flex;
	align-items: center;
	justify-content: center;
	border: .8vh solid color-mix(in srgb, #2de59d 30%, transparent);
	border-radius: 9999px;
	width: 5.5vh;
	aspect-ratio: 1;
	color: #2de59d;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > span {
	font-size: 1.8vh;
	font-weight: 700;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > div:has(.supportAmount) > .supportAmount {
	font-size: 2.5vh;
	font-weight: 700;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > p {
	padding-inline: 3vh;
	width: 180%;
	font-size: 1.4vh;
	text-align: center;
	opacity: .5;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > .separator {
	margin-block: 1vh;
	width: 100%;
	height: .1vh;
	background-color: #373e48;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > ul {
	display: flex;
	flex-direction: column;
	padding-inline: 2vh;
	width: 200%;
	gap: .5vh;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > ul > li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	font-size: 1.6vh;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > ul > li > span:first-child,
.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > ul > li > span > i {
	color: #8b919d;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > ul > li > .toList {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > ul > li > .toList > :first-child {
	font-weight: 700;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > ul > li > .toList > .email {
	color: #8b919d;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > ul > li > .toList > :last-child {
	color: var(--accent);
}

.affiliation > .validate > .resource > .chat > main > ul > li > p {
    margin-top: 1.4vh;
	padding-inline: 1.4vh;
	font-size: 2vh;
    white-space: pre-line;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .time {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-right: .5vw;
	font-size: 2vh;
	user-select: none;
	pointer-events: none;
	gap: .5vw;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .time > time {
	opacity: .6;
}

.affiliation > .validate > .resource > .chat > main > ul > li > .time > i {
	opacity: .8;
}

.affiliation > .validate > .resource > .chat > footer {
	align-items: flex-end;
	padding-inline: 1vw;
	height: unset;
	border-top: 1px solid #00020862;
	border-bottom: unset;
}

.affiliation > .validate > .resource > .chat > footer i,
.affiliation > .validate > .resource > .chat > footer svg {
	display: flex;
	align-items: center;
    justify-content: center;
	min-width: 1.7vw;
    aspect-ratio: 1;
    font-size: 3.5vh;
    color: #787878;
    cursor: pointer;
    transition: color .1s ease-out;
}

.affiliation > .validate > .resource > .chat > footer .send {
	display: none;
}

.affiliation > .validate > .resource > .chat > footer:has(textarea:not(:placeholder-shown)) .micro {
	display: none;
}

.affiliation > .validate > .resource > .chat > footer:has(textarea:not(:placeholder-shown)) .send {
	display: flex;
}

.affiliation > .validate > .resource > .chat > footer i:hover,
.affiliation > .validate > .resource > .chat > footer svg:hover {
	color: #ccd3d6;
}

.affiliation > .validate > .resource > .chat > footer > textarea {
	all: unset;
    width: 100%;
    height: 100%;
	max-height: 6lh;
    field-sizing: content;
	font-size: 2.45vh;
    cursor: text;
    overflow-wrap: break-word;
	overscroll-behavior: contain;
}

.affiliation > .validate > .resource > .chat > footer > textarea::-webkit-scrollbar {
	display: none;
}

.affiliation > .validate > .resource > .chat > footer > textarea::placeholder {
	opacity: .5;
	user-select: none;
	pointer-events: none;
}

.affiliation > .validate > .resource > .chat > footer > div {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2.5vw;
}

lite-youtube {
    --lite-youtube-aspect-ratio: 2 / 3;
	--lite-youtube-frame-shadow-visible: no;
}

@media (max-width: 1024px) {
	.library {
		gap: 3vh;
	}

	.library > .banner {
		flex-direction: column;
		height: 59vh;
		gap: 4vw;
	}

	.library > .banner > .images > li > .wrapper {
		align-items: flex-start;
	}

	.library > .banner > .images > li > .wrapper > img {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.library > .banner > .images > li > .wrapper > .ym8uGp {
		aspect-ratio: 16 / 9;
	}

	.library > .banner > .images > li > .wrapper > div:last-child {
		padding-inline: 4vw;
		top: 48%;
		left: unset;
		width: 100%;
		max-width: unset;
	}

	.library > .banner > .images > li > .wrapper > div:last-child > .logo {
		top: -10.5vw;
    	left: 1.1vw;
		width: 15vw;
	}

	.library > .banner > .images > li > .wrapper > div:last-child > h4 {
		margin-top: 3vw;
		font-size: 6vw;
	}

	.library > .banner > .images > li > .wrapper > div:last-child > p {
		font-size: 3.4vw;
	}

	.library > .banner > .images > li > .wrapper > div:last-child > div {
		margin-top: 2vw;
	}

	.library > .banner > .images > li > .wrapper > div:last-child > div > .tag {
		width: 14vw;
		height: 5vw;
		font-size: 2.5vw;
	}

	.library > .banner > .images > li > .wrapper > div:last-child > div > div:last-child {
		font-size: 2.7vw;
	}

	.library > .banner > .images > li > .wrapper > div:last-child > a {
		margin-top: 5vw;
		width: 100%;
		height: 13vw;
		border-radius: 5px;
		font-size: 5vw;
		gap: 5vw;
	}

	.library > .banner > .navigation {
		position: unset;
		top: unset;
    	gap: 2vw;
	}

	.library > .banner > .navigation > li {
		padding: 1vw;
	}

	.library > .banner > .navigation > li > span {
		width: 2vw;
	}

	.info,
	.affiliation > .step > .content .info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-inline: 4vw;
		padding: 3vw 3.3vw;
		max-width: unset;
		gap: 3vw;
	}

	.affiliation > .step > .content .info {
		margin-top: 3vh;
		margin-inline: unset;
	}
	
	.info > i,
	.affiliation > .step > .content .info > i {
		margin-top: unset;
		font-size: 7vw;
	}
	
	.info > div {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 3vw;
	}
	
	.info > div > p,
	.affiliation > .step > .content .info > div > p {
		font-size: 3vw;
	}
	
	.info > div > .pd {
		font-size: 2.7vw;
	}

	.library > section > h3 {
		font-size: 4.5vw;
	}

    .library > section.scroll > div > :is(.left, .right).show {
        display: none;
    }

	.library > section ul:has(li > .wrapper > div:hover) {
		z-index: unset;
	}
    
    .library > section ul {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    
    .library > section ul > li {
        min-width: 47%;
        width: 47%;
        scroll-snap-align: start;
    }

	.library > section:not(.scroll) ul {
		row-gap: 1vw;
	}

	.library > section ul > li {
		padding-inline: .5vw;
	}

	.library > section:not(.scroll) ul > li {
        min-width: 50%;
        width: 50%;
	}
    
    .library > section ul > li > .wrapper > div:has(a:hover, div:hover),
	.library > section ul > li.vertical > .wrapper > div:has(a:hover, div:hover) {
	    transform: unset;
	    box-shadow: unset;
        z-index: 0;
    }

	.library > section ul > li > .wrapper > div:has(a:hover, div:hover) > a {
		border-radius: 0 0 5px 5px;
	}

	.library > section ul > li > .wrapper > div:has(a:hover, div:hover) > div {
		margin-top: unset;
		padding: unset;
		height: 0;
		opacity: 0;
		z-index: unset;
		pointer-events: unset;
	}

	.material {
		margin: 30vw 4vw;
    	gap: 7vw;
	}

	.material > .linksContainer {
		gap: 14vw;
	}

	.material > .linksContainer > .navigation {
		justify-content: center;
		margin-inline: 0;
    	gap: 1vw;
	}

	.material > .linksContainer > .navigation > .type {
		padding: .3vw 1.8vw;
		font-size: 3vw;
	}

	.material > .linksContainer > .typeContainer > .typeContent {
		--gap: 13vw;
	}

	.material > .linksContainer > .typeContainer > .typeContent.show {
		flex-direction: column;
    	flex-wrap: nowrap;
	}

	.material > .linksContainer > .typeContainer > .typeContent > article {
		padding: 5vw;
    	width: 100%;
		gap: 7vw;
	}

	.material > .linksContainer > .typeContainer > .typeContent > article > main {
		gap: 7vw;
	}

	.material > .linksContainer > .typeContainer > .typeContent > article > main > div > h2 {
		font-size: 6.3vw;
	}

	.material > .linksContainer > .typeContainer > .typeContent > article > main > div > figure {
		top: -12.2vw;
		right: 0;
		width: 22vw;
	}

	.material > .linksContainer > .typeContainer > .typeContent > article > main > p {
		font-size: 3.9vw;
	}

	.material > .linksContainer > .typeContainer > .typeContent > article > footer > a {
		font-size: 4.18vw;
		gap: 2.8vw;
	}

	.affiliation {
		margin: 37vw 2vw;
	}

	.affiliation > .hero {
		flex-direction: column;
		justify-content: flex-start;
		gap: 5vh;
	}

	.affiliation > .hero > .title {
		flex: unset;
		text-align: center;
	}

	.affiliation > .hero > .title > h1 {
		font-size: 6vh;
		line-height: 6vh;
	}

	.affiliation > .hero > .icon {
		width: 100%;
	}

	.affiliation > .welcome {
		justify-content: space-between;
		min-height: 75vh;
		height: auto;
	}

	.affiliation > .welcome > header {
		font-size: 11vw;
    	line-height: 11vw;
		text-align: center;
	}

	.affiliation > .welcome > main {
		margin-top: 3vh;
	}

	.affiliation > .welcome > main > p {
		padding-inline: 4vw;
    	font-size: 4.5vw;
	}

	.affiliation > .welcome > svg {
		margin-top: 3vh;
		width: 100%;
		height: auto;
	}

	.affiliation > .step {
		flex-direction: column;
		justify-content: flex-start;
		margin-top: 23vh;
		min-height: 75vh;
		height: auto;
	}

	.affiliation > .step:nth-child(2n+2) {
		flex-direction: column-reverse;
	}

	.affiliation > .step > .content {
		width: 100%;
	}

	.affiliation > .step > .content > h3 {
		display: block;
		font-size: 8vw;
		text-align: center;
	}

	.affiliation > .step > .content > p {
		max-width: 100%;
		font-size: 3.5vw;
		line-height: 5.4vw;
		white-space: unset;
	}

	.affiliation > .register > .content > p::after {
		display: none;
	}

	.affiliation > .step > .content > p > a:has(code) {
		display: block;
		margin-block: 3vw;
		font-size: 3.5vw;
	}

	.affiliation > .step > .content > p > a:has(code) > code {
		text-decoration: underline;
        text-decoration-color: var(--accent);
	}

	.affiliation > .step > .content > p > a > svg {
		width: 2.5vw;
	}

	.affiliation > .step > .content > p > code {
		display: block;
    	margin-block: 2vh;
		padding: .5vh 1vh;
		width: fit-content;
		border-radius: .3vh;
	}

	.affiliation > .register {
		align-items: center;
	}

	.affiliation > .register > .resource {
		width: 85%;
	}

	.affiliation > .complete > .resource {
		padding-block: 4vh;
		min-width: unset;
		max-width: unset;
		width: 100%;
	}

	.affiliation > .complete > .content > p > a > :first-child:before,
	.affiliation > .validate > .content > p > a > :first-child:before {
		display: none;
	}

	.affiliation > .register > .resource::before {
		right: -1.7vw;
		bottom: -1.7vw;
		border-width: 0.5vw;
	}

	.affiliation > .complete > .resource > .register > div,
	.affiliation > .complete > .resource > .welcome > div {
		width: 100%;
	}

	.affiliation > .complete > .resource > .register > div::before {
		left: -.7vh;
		bottom: -.7vh;
		border-width: .3vh;
	}

	.affiliation > .complete > .resource > .welcome > div::before {
		top: -5.5vw;
		font-size: 3.2vw;
	}

	.affiliation > .complete > .resource > .welcome > div::after {
		outline-width: .3vh;
	}

	.affiliation > .pay > .content > .origin {
		justify-content: center;
		margin-top: 2vh;
	}

	.affiliation > .pay > .content > .origin > div {
		padding: .7vh 1.7vh;
        border-radius: .3vh;
	}

	.affiliation > .pay > .content > .origin > div::before {
		top: 0.5vw;
    	height: calc(100% - 0.5vw);
	}

	.affiliation > .pay > .content > .origin > div > span {
		font-size: 2vh;
		transform: translateY(-0.2vw);
	}

	.affiliation > .pay > .content > .origin > div::after {
		height: calc(100% - .5vh);
		border-width: .3vh;
	}

	.affiliation > .pay > .content > .origin > .selected::after {
		transform: translateY(.3vh);
	}

	.affiliation > .pay > .resource,
	.affiliation > .validate > .resource {
		width: 100%;
	}

	.affiliation > .pay > .resource > .window {
		aspect-ratio: unset;
        width: 100%;
        height: 60vh;
	}

	.affiliation > .pay > .resource > .window > .tabs > ul {
		padding: .5vh;
		border-bottom: 1px solid #262b30;
		gap: 1vh;
	}

	.affiliation > .pay > .resource > .window > .tabs > ul > li {
		border-radius: calc(.5vh - .3vh);
		font-size: 2vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer {
		overflow: hidden;
		padding: 1vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > .qrContainer > p {
		font-size: 1.7vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > .qrContainer > .qr {
		height: 20vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > ul {
		padding-inline: .5vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .pm > main > ul > li {
		font-size: 2vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc {
		gap: 2vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc > header {
		height: 2.5vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .qrContainer > p {
		font-size: 1.7vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .qrContainer > .qr {
		height: 20vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card {
		padding: 1.5vh;
		gap: 1.5vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > img {
		width: 3.5vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > li {
		font-size: 1.7vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > li:first-child {
		font-size: 2vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > li:has(.supportAmount) {
		gap: 1.5vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > li:has(.supportAmount) > img {
		height: 3.5vh;
	}

	.affiliation > .pay > .resource > .window > .contentContainer > .bnc > main > .card.beneficiary > ul > li:has(.supportAmount) > span {
		font-size: 3vh;
	}

	.affiliation > .step > .content > ul > li {
		max-width: unset;
		font-size: 1.5vh;
	}

	.affiliation > .step > .content > ul > li:not(:first-child) {
		margin-top: .5vh;
	}

	.affiliation > .step > .content > .infoContainer > .info {
		margin-top: 2vh;
	}

	.affiliation > .validate > .resource > .chat {
		max-width: 100%;
		height: 75vh;
		border-radius: .5vh;
	}

	.affiliation > .validate > .resource > .chat > header,
	.affiliation > .validate > .resource > .chat > footer {
		padding: 1.5vh 2vh;
	}

	.affiliation > .validate > .resource > .chat > header > .group > span {
		font-size: 2vh;
	}

	.affiliation > .validate > .resource > .chat > main > ul > li {
		max-width: 75%;
	}

	.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer {
		aspect-ratio: unset;
		height: 41vh;
	}

	.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.pm > ul {
		width: 270%;
		font-size: 1.4vh;
	}

	.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > p {
		width: 205%;
		font-size: 1.3vh;
	}

	.affiliation > .validate > .resource > .chat > main > ul > li > .mediaContainer > .media.bnc > ul > li {
		font-size: 1.4vh;
	}

	.affiliation > .validate > .resource > .chat > main > ul > li > p {
		font-size: 1.7vh;
	}

	.affiliation > .validate > .resource > .chat > main > ul > li > .time {
		font-size: 1.7vh;
	}

	.affiliation > .validate > .resource > .chat > footer {
		gap: 2vh;
	}

	.affiliation > .validate > .resource > .chat > footer > textarea {
		font-size: 2vh;
	}

	.affiliation > .validate > .resource > .chat > footer > div {
		gap: 2.5vh;
	}

	.affiliation > .validate > .resource > .chat > footer i {
		min-width: auto;
		font-size: 2.5vh;
	}

	.affiliation > .validate > .resource > .chat > footer svg {
		width: 2.5vh;
	}
}

@media (max-width: 575.98px) {
    .mt-xs-min-55 {
        margin-top: -55px !important;
    }
}


/* Small devices (landscape phones, less than 768px) */

@media (min-width: 768px) and (max-width: 991.98px) {
    .media-cover {
        height: 60vh;
    }
}


/* Medium devices (tablets, less than 992px) */


/* @media (max-width: 991.98px) {
    ...
} */