body{
	font-family: "Cormorant", serif;
  	font-optical-sizing: auto;
  	font-size: 12px;
  	line-height: 14px;
 	font-weight: 500;
  	font-style: normal;
  	background-image: url("imagenes/paper.png");
  	display: flex;
  	flex-direction: column;
  	min-height: 100vh;
  	margin: 0px;
}

h1{
	font-family: "Playfair Display SC", serif;
  font-weight: 900;
  font-size: 4em;
  color: #43259c;
  text-transform: capitalize;
  font-style: normal;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 25px;
}

h2{
	font-family: "Playfair Display SC", serif;
  font-weight: 900;
  font-size: 3.5em;
  color: #43259c;
  text-transform: capitalize;
  font-style: normal;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 25px;
}

h3{
	font-size: 2.2em;
	line-height: 2.2em;
	color: #43259c;
	margin-bottom: 0px;
	margin-top: 0px;
	font-family: "Playfair Display SC", serif;
  font-weight: 900;
	text-transform: capitalize;
  font-style: normal;
  text-align: center;
}

h4{
	font-size: 1.8em;
	line-height: 1.8em;
	color: #43259c;
	margin-bottom: 0px;
	margin-top: 0px;
}

h5{
	font-size: 1.6em;
	line-height: 1.6em;
	margin-bottom: 0px;
	margin-top: 0px;
}

ul{
	padding-left: 20px;
}

li{
	padding-left: 10px;
	margin-bottom: 1em;
}

ul li::marker {
	color: #43259c;
	content: '✦';
	margin-right: 10px;
}
ul li:hover::marker {
	color: #DFB268;
}

a{
	text-decoration: none;
	color: #43259c;
}

a:hover{
	color: #DFB268;
}

/* ANIMACIONES */ 

.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.blink-2 {
	-webkit-animation: blink-2 3s infinite both;
	        animation: blink-2 3s infinite both;
}

/* Nav bar */

@property --angle{
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@property --angle2{
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.navbar {
	margin: 0px;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: auto;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 99;
	align-content: space-between;
	font-size: 1em;
	line-height: 1em;
	text-transform: uppercase;
	font-family: "Nunito Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
  	letter-spacing: 4px;
  	text-align: center;
}

.navbar-soporte{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #DFB268;
	background: rgb(67,37,156);
	background: conic-gradient(from var(--angle2) at -50% 50%, #24243e, #302b63, #0f0c29, #24243e);
	animation: 10s spin2 linear infinite;
}

.navbar-soporte::after, .navbar-soporte::before{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 4px;
	z-index: -100;
	translate: -50%, -50%;
	background: conic-gradient(from var(--angle), #c32222, rgba(255, 255, 255, 0), #c32222);
	animation: 5s spin linear infinite;
}

.navbar-soporte::before{
	filter: blur(8px);
}

@keyframes spin {
	from {
		--angle: 0deg;
	}

	to {
		--angle: 360deg;
	}
}

@keyframes spin2 {
	from {
		--angle2: 0deg;
	}

	to {
		--angle2: 360deg;
	}
}

.navbar a {
	color: #FFF;
}

.navbar a:hover {
	color: #DFB268;
	font-weight: 1000;
	letter-spacing: 3.7px;
}

.nav-izq, .nav-der{
	display: grid;
	width: 250px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 40px;
	margin-right: 40px;
}

/* body */
.contenedor1200{
	width: 1200px;
	margin: 0px auto;
	box-sizing: border-box;
	position: relative;
	top: 63px;
}

.section{
	width: 1200px;
	display: flex;
	flex-wrap: wrap;
	min-height: 800px;
	align-content: center;
}

.hero-cont{
	display: grid;
	width: 1200px;
	height: 800px;
	grid-template-rows: 1fr 3fr 35px 110px 35px 1fr;
	grid-template-columns: repeat(12, 1fr);
	/*background-image: url("imagenes/fondo1-deg.webp");*/
	background-repeat: none;
}

.hero-back{
	grid-area: 2 / 1 / span 4 / span 12;
	width: auto;
	height: auto;
	outline: double 4px #DFB268;
}

.dio{
	grid-area: 1 / 7 / span 6 / span 4;
	z-index: 1;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.addi{
	grid-area: 1 / 9 / span 6 / span 4;
	z-index: 2;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both;
}

.alejo{
	grid-area: 1 / 5 / span 6 / span 4;
	z-index: 2;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2s both;
}

.adan{
	grid-area: 1 / 3 / span 6 / span 5;
	z-index: 3;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both;
}

.tono{
	grid-area: 1 / 1 / span 6 / span 5 ;
	z-index: 4;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 4s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 4s both;
}

.subtext{
	font-size: 1.6em;
	line-height: 1.8em;
	text-transform: uppercase;
	color: white;
	text-shadow: 1px 1px 2px #000;
	font-family: "Nunito Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
  	letter-spacing: 4px;
  	text-align: center;
  	z-index: 5;
}

.itemhero1{
	z-index: 5;
	grid-row: 3 / 3;
	grid-column: 1 / 13;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 5s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 5s both;
}

.logo {
	z-index: 5;
	grid-row: 4 / 4;
	grid-column: 3 / 11;
	align-content: center;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 6s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 6s both;
}

.brillos{
	z-index: 6;
	grid-row: 3 / 6;
	grid-column: 3 / 11;
	align-content: center;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 6s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 6s both;
}

.itemhero2{
	z-index: 5;
	grid-row: 5 / 5;
	grid-column: 1 / 13;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 7s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 7s both;
}

.contenedor-tabla{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 110px auto auto;
}

.drpsiquiatra{
	grid-row: 1 / 1;
	grid-column: 1 / 3;
	width: auto;
	height: auto;
	align-content: center;
}

.introitem1{
	grid-row: 2 / 2;
	grid-column: 1 / 1;
}
.introitem2{
	grid-row: 2 / 2;
	grid-column: 2 / 2;
}
.introitem3{
	grid-row: 3 / 3;
	grid-column: 1 / 1;
}
.introitem4{
	grid-row: 3 / 3;
	grid-column: 2 / 2;
}

.contenedor-tabla, .limits-bg{
	background-image: url("imagenes/slice2.webp");
	background-repeat: no-repeat;
}

.inttabla{
	font-size: 1.6em;
	line-height: 1.6em;
	align-content: center;
}

.texto-intro{
	padding: 90px 64px 50px 64px;
}

.texto-grande{
	font-size: 1.6em;
	line-height: 1.6em;
	font-weight: 200;
	font-style: italic;

}

.texto-about{
	margin: 32px 64px;
}

.texto-about ul li::marker{
	color: #43259c;
	content: '✎';
	font-size: 1.4em;
}

.texto-about ul li:hover::marker {
	color: #DFB268;
}

.contenedor-WOD{
	width: 1200px;
	height: 800px;
	display: grid;
	grid-template-columns: 2fr 8fr 2fr;
	grid-template-rows: repeat(8, 1fr);
}

.WODrosa{
	grid-row: 2 / 6;
	grid-column: 1 / 3;
	z-index: 2;
}

.WODmarco{
	grid-area: 3 / 1 / span 4 / span 3;
	outline: double 4px #DFB268;
}

.WODtext{
	z-index: 4;
	grid-area: 4 / 2 / span 2 / span 1;
	width: auto;
	height: auto;
	font-size: 2em;
	line-height: 2em;
	color: #FFF;
	text-shadow: 4px 4px 3px #000;
	text-align: center;
	align-content: center;
}

.WODglass{
	z-index: 3;
	grid-area: 4 / 1 / span 2 / span 3;
	width: auto;
	height: auto;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
}

.petalos{
	grid-row: 1 / 8;
	grid-column: 1 / 4;
	z-index: 4;
}

.section-lnf{
	display: grid;
	width: 1200px;
	height: 800px;
	grid-template-rows: 266px 266px auto;
	grid-template-columns: 1fr;
	grid-gap: 20px 0px;
}

.runas{
	grid-row: 1 / 4;
	grid-column: 1 / 1;
	z-index: 3;
}

.titulo-lnf{
	grid-row: 1 / 1;
	grid-column: 1 / 1;
	align-content: center;
}

.lnf-row1, .lnf-row2{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.lnf-row1{
	grid-row: 2 / 2;
	grid-column: 1 / 1;
}

.lnf-row2{
	grid-row: 3 / 3;
	grid-column: 1 / 1;
}

.lnftxt{
	text-align: center;
	align-content: center;
	font-size: 1.4em;
	line-height: 1.6em;
}

.section-limits{
	display: grid;
	width: 1200px;
	height: auto;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr auto auto auto 1fr;
	grid-gap: 20px 20px;
}
.titulo-limits{
	grid-row: 2 / 2;
	grid-column: 1 / 13;
}
.intro-limits{
	grid-row: 3 / 3;
	grid-column: 2 / 12;
	font-size: 1.8em;
	line-height: 1.8em;
	text-align: center;
	align-content: center;
}

.tabla-limits-izq, .tabla-limits-der{
	font-size: 1.4em;
	line-height: 1.6em;
	text-align: left;
	align-content: start;
}
.h4centro{
	font-size: 1.8em;
	line-height: 1.8em;
	font-weight: 700;
	color: #43259c;
	margin-bottom: 0px;
	margin-top: 0px;
	text-align: center;
}


.tabla-limits-izq{
	grid-row: 4 / 4;
	grid-column: 2 / 7;
}
.tabla-limits-der{
	grid-row: 4 / 4;
	grid-column: 7 / 12;
}

#keysita{
	margin-top: 300px;
}

.section-important{
	display: grid;
	width: auto;
	height: 500px;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 0px 20px;
}

.important-text{
	grid-row: 2 / 7;
	grid-column: 2 / 12;
	text-align: center;
	align-content: center;
	border: 1px solid #43259c;
	border-radius: 18px;
	box-shadow: 4px 4px 6px #ccc;
}

.cont-important{
	grid-row: 3 / 5;
	grid-column: 3 / 11;
	z-index: 2;
	font-size: 1.4em;
	line-height: 1.6em;
	text-align: center;
}

.section-about{
	display: grid;
	width: 1200px;
	height: 800px;
	grid-template-rows: 0.5fr 0.5fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 0px 20px;
	background-image: url("imagenes/fondo-bajo.webp");
	background-repeat: no-repeat;
	background-position-y: bottom;
}

.petalos2{
	grid-row: 1 / 5;
	grid-column: 1 / 12;
	z-index: 5;
}

.titulo-about{
	grid-row: 2 / 2;
	grid-column: 1 / 13;
}

.parrilla-about{
	grid-row: 3 / 4;
	grid-column: 2 / 12 ;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 0px 20px;
}

.gridabout{
	align-content: end;
	font-size: 1.6em;
	line-height: 1.8em;
	text-align: center;
}

.smalltxt{
	font-size: 0.5em;
	line-height: 1em;
	text-transform: uppercase;
	color: #43259c;
	font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 10px;
}

/* footer */
.footer-abajo{
	display: block;
	position: relative;
	overflow: visible;
	width: 100%;
	height: 125px;
	font-size: 1em;
	font-weight: 200;
	color: #FFF;
	border-top: 1px solid #DFB268;
	top:300px;
	
}

.full-footer{
	position: relative;
	display: flex;
	width: 100%;
	height: auto;
	justify-content: space-between;
	background: #0f0c29;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	left: 0px;
	margin: 0px;

}
.WODlogo, .disclaimer{
	margin-right: 40px;
	margin-left: 40px;
	margin-top: 20px;
	align-content: start;
	width: 100%;
	height: 180px;

}

.WODlogo{
	width: 100px;
}

.disclaimer{
	width: 300px;
}

/* Card flip */

 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 148px;
  height: 253px;
  border: 1px solid #f1f1f1;
  margin: 0px auto;
  /*perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  z-index: 20;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
} 

/* Chara Page */
.tabla-chara-item1{
	grid-row: 1 / 1;
	grid-column: 1 / 3;
}

.tabla-chara-item2{
	grid-row: 2 / 2;
	grid-column: 1 / 3;
	align-content: center;
	display: flex;
	justify-content: center;
	margin-top: 90px;
}

.tabla-chara-item3{
	grid-row: 3 / 3;
	grid-column: 1 / 2;
	align-content: start;
}

.tabla-chara-item4{
	grid-row: 3 / 3;
	grid-column: 2 / 3;
	align-content: start;
}

/* Chara cards */

.character-grid{
	display: grid;
	grid-template-columns: repeat(12, 81.7px);
	grid-template-rows: repeat(7, 286px);
	grid-gap: 0px 20px;
	font-size: 2em;
	line-height: 2em;
	text-transform: uppercase;
	font-family: "Nunito Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 200;
  	font-style: normal;
  	letter-spacing: 4px;
  	text-align: center;
  	color: #43259c;
}

.cards{
	display: grid;
	align-items: center;
	margin: 0px auto;
	z-index: 1;
	cursor: pointer;
	filter: grayscale(100%);
}

.cards:hover{
	z-index: 10 !important;
	filter: grayscale(0);
}


/* para el borde rojo */
.card-soporte{
	height: 253px;
	width: 148px;
	position: relative;
	border-radius: 10px;
	background: rgba(218, 124, 3, 0);
	transition: transform 500ms, box-shadow 500ms, background 500ms, scale 500ms, opacity 500ms;
}

.card-soporte:hover{
	border: 2px solid #DFB268;
	box-shadow: 0px 0px 10px #c32222;
	background: rgba(218, 124, 3, 1);
	transform: scale(1.5);
}

.card-soporte[data-tip]::before{
	content: attr(data-tip);
	background: #DFB268;
	position: absolute;
	padding: 15px 10px;
	border-radius: 3px;
	width: 183.4px;
	height: 10px;
	left: 50%;
	top: calc(95% + 10px);
	transform: translate(-50%, 0px);
  	opacity: 0;
  	transition: opacity 500ms, top 500ms;
  	font-family: "Playfair Display SC", serif;
  	font-weight: 900;
  	font-size: 0.5em;
  	line-height: 0.5em; 
  	color: #FFF;
  	text-transform: capitalize;
  	font-style: normal;
  	text-align: center;
  	text-shadow: 1px 1px 3px #222;
  	letter-spacing: 0px;
}


.card-soporte[data-tip]:hover::before{
	opacity: 1;
	top: calc(100% + 10px);
	
}

.legend-tops{
	grid-row: 1 / 1;
	grid-column: 2 / 10;
	align-content: end;
	border-bottom: 1px solid #c32222;
	color: #c32222;
	margin-bottom: 16.5px;
}

.legend-bottoms{
	grid-row: 1 / 1;
	grid-column: 11 / 13;
	align-content: end;
	border-bottom: 1px solid #43259c;
	margin-bottom: 16.5px;
}

.core1{
	grid-row: 2 / 2;
	grid-column: 4 / 6;
}

.core2{
	grid-row: 2 / 2;
	grid-column: 6 / 8;
}
.core3{
	grid-row: 3 / 3;
	grid-column: 4 / 6;
}

.core4{
	grid-row: 3 / 3;
	grid-column: 6 / 8;
}
.core5{
	grid-row: 4 / 4;
	grid-column: 4 / 6;
}

.core6{
	grid-row: 4 / 4;
	grid-column: 6 / 8;
}
.secondary1{
	grid-row: 5 / 5;
	grid-column: 2 / 4;
}
.secondary2{
	grid-row: 5 / 5;
	grid-column: 4 / 6;
}
.secondary3{
	grid-row: 5 / 5;
	grid-column: 6 / 8;
}
.secondary4{
	grid-row: 5 / 5;
	grid-column: 8 / 10;
}
.secondary5{
	grid-row: 6 / 6;
	grid-column: 2 / 4;
}
.secondary6{
	grid-row: 6 / 6;
	grid-column: 4 / 6;
}
.secondary7{
	grid-row: 6 / 6;
	grid-column: 6 / 8;
}
.secondary8{
	grid-row: 6 / 6;
	grid-column: 8 / 10;
}
.other1{
	grid-row: 7 / 7;
	grid-column: 2 / 4;
}
.other2{
	grid-row: 7 / 7;
	grid-column: 4 / 6;
}
.other3{
	grid-row: 7 / 7;
	grid-column: 6 / 8;
}
.other4{
	grid-row: 7 / 7;
	grid-column: 8 / 10;
}
.bottom1{
	grid-row: 2 / 2;
	grid-column: 11 / 13;
}
.bottom2{
	grid-row: 3 / 3;
	grid-column: 11 / 13;
}
.bottom3{
	grid-row: 4 / 4;
	grid-column: 11 / 13;
}
.bottom4{
	grid-row: 5 / 5;
	grid-column: 11 / 13;
}
.bottom5{
	grid-row: 6 / 6;
	grid-column: 11 / 13;
}
.bottom6{
	grid-row: 7 / 7;
	grid-column: 11 / 13;
}
.cuadro-core{
	grid-row: 2 / 5;
	grid-column: 4 / 8;
	border: 2px solid #c32222;
	border-radius: 10px;
	background: linear-gradient(45deg, rgba(253,211,45,0.2) 0%, rgba(195,34,34,0.2) 100%); 
}

.cuadro-sec{
	grid-row: 5 / 7;
	grid-column: 2 / 10;
	border: 2px solid #c322b8;
	border-radius: 10px;
	background: linear-gradient(45deg, rgba(253,45,99,0.2) 0%, rgba(195,34,184,0.2) 100%); 
}

.cuadro-other{
	grid-row: 7 / 7;
	grid-column: 2 / 10;
	border: 2px solid #da2dfd;
	border-radius: 10px;
	background: linear-gradient(45deg, rgba(218,45,253,0.2) 0%, rgba(34,36,195,0.2) 100%); 
}

.text-core{
	grid-row: 3 / 3;
	grid-column: 3 / 3;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	color: #c32222;
}

.text-sec{
	grid-row: 5 / 7;
	grid-column: 1 / 1;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	color: #c322b8;
}

.text-other{
	grid-row: 7 / 7;
	grid-column: 1 / 1;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	color: #da2dfd;
}

.rotacion{
	width: 175px;
	display: inline-block;
	height: 50px;
	rotate: -90deg;
	padding-bottom: 40px;
}

/* Character hero */
.hero-character{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(5, 1fr);
	align-content: center;
	grid-gap: 0px 20px;
	width: 1200px;
	height: auto;
}

.nebula{
	grid-row: 1 / 6;
	grid-column: 1 / 13;
}

.cardback1{
	grid-row: 2 / 4;
	grid-column: 1 / 3;
	z-index: 1;
	align-content: center;
	margin: 0px auto;
	rotate: -10deg;
	animation: animcard1 7s linear 9 alternate;
	position: relative;
}

@keyframes animcard1{
	from{
		transform: rotate(0deg) translateX(20px) rotate(0deg);
	}

	to{
		transform: rotate(360deg) translateX(20px) rotate(-360deg);
	}
}

.cardback2{
	grid-row: 2 / 4;
	grid-column: 3 / 5 ;
	z-index: 1;
	align-content: center;
	margin: 0px auto;
	rotate: -5deg;
	animation: animcard2 7s linear 9;
	position: relative;
}

@keyframes animcard2{
	from{
		transform: rotate(0deg) translateX(10px) rotate(0deg);
	}

	to{
		transform: rotate(360deg) translateX(10px) rotate(-360deg);
	}
}

.cardback3{
	grid-row: 2 / 4;
	grid-column: 9 / 11 ;
	z-index: 2;
	align-content: center;
	margin: 0px auto;
	rotate: 10deg;
	animation: animcard3 7s linear 9 alternate;
	position: relative;
}

@keyframes animcard3{
	from{
		transform: rotate(0deg) translateX(20px) rotate(0deg);
	}

	to{
		transform: rotate(360deg) translateX(20px) rotate(-360deg);
	}
}


.cardback4{
	grid-row: 2 / 4;
	grid-column: 11 / 13;
	z-index: 1;
	align-content: center;
	margin: 0px auto;
	rotate: 5deg;
	animation: animcard4 7s linear 9;
	position: relative;
}

@keyframes animcard4{
	from{
		transform: rotate(0deg) translateX(10px) rotate(0deg);
	}

	to{
		transform: rotate(360deg) translateX(10px) rotate(-360deg);
	}
}

.tarjeta-main{
	grid-row: 1 / 5;
	grid-column: 4 / 10;
	z-index: 3	;
	align-content: center;
	margin: 0px auto;
	top:-20px;
	animation: animmain 9s ease-in-out 9;
	position: relative;
}

@keyframes animmain{
from{
		transform: rotate(0deg) translateX(15px) rotate(0deg);
	}

	to{
		transform: rotate(360deg) translateX(15px) rotate(-360deg);
	}
}

@property --anglecardmain{
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.tarjeta-main-soporte{
	width: 350px;
	height: auto;
	border-radius: 20px;
	position: relative;
}

.tarjeta-main-soporte::before{
	content: '';
	position: absolute;
	height: 599px;
	width: 350px;
	border-radius: 20px;
	left: -9px;
	top: -9px;
	padding: 10px;
	z-index: -1;
	/*translate: -50%, -50%;*/
	background: conic-gradient(from var(--anglecardmain), #E6910A 0%, #FDD74F 9%, #E38D06 25%, #FED25A 35%, #F7B23B 45%, #E48E07 58%, #FED25A 71%, #E48D07 84%, #FED74D 92%, #E6910A 100%);
	filter: blur(5px);
	opacity: 0.3;
	animation: 10s spincard linear infinite;
}

@keyframes spincard {
	from {
		--anglecardmain: 0deg;
	}

	to {
		--anglecardmain: 360deg;
	}
}

.nombrewrapper, .nombrewrapper2{
	grid-row: 4 / 4;
	grid-column: 4 / 10;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: end;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2s both;
	animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2s both;
}

.subtitwrapper{
	grid-row: 5 / 5;
	grid-column: 4 / 10;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: start;
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both;
	animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both;
}

.nombrewrapper2{
	z-index: 2;
}

.nombrewrapper3{
	z-index: 1;
	opacity: 0.3;
}


@property --anglename{
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
.nombrechara, .nombrechara2, .titulochara{
	width: fit-content;
	height: fit-content;
	position: relative;
	display: block;
	text-transform: capitalize;
  text-align: center;
  margin: 0px auto;
}


.nombrechara, .nombrechara2{
	font-family: "Playfair Display SC", serif;
  font-weight: 900;
  font-size: 4.7em;
  line-height: 1em;
  font-style: normal;
}

.titulochara{
	font-size: 2em;
	line-height: 2em;
	text-transform: uppercase;
	color: #FFF;
	font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 8px;
}

.nombrechara2{
	color: #000;
	top: 4px;
	filter: blur(1px);
}

.nombrechara{
	background-image: conic-gradient(from var(--anglename) at 50% -50%, #B4903A 0%, #D6B65F 11%, #D5B67A 20%, #FFE5A6 27%, #D6B65F 40%, #957122 57%, #44320C 79%, #957122 80%, #44320C 81%, #8C6A20 96%, #926E22 98%, #B4903A 100%);
	background-clip: text;
	color: transparent;
	animation: namespin 10s linear infinite;
}

@keyframes namespin {
	from {
		--anglename: 0deg;
	}

	to {
		--anglename: 360deg;
	}
}

/*para pagina de personajes */

.corta{
	min-height: 400px;
}

.bio-tabla{
	width: 1200px;
	height: 400px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	align-content: start;
}

.bio-tabla-celda{
	font-size: 1.6em;
	line-height: 1.6em;
}

.tresportres{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 280px 140px 280px;
	gap: 0px 20px;
	width: 1200px;
	height: 700px;
}
.celda{
	font-size: 1.4em;
	line-height: 1.6em;
}

.celda2{
	font-size: 1.4em;
}

.celda-quote{
	grid-row: 2 /2 ;
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	height: 140px;
	font-size: 6em;
	font-style: italic;
	text-align: center;
	justify-content: center;
}

.celdawrapper{
	margin: 0px auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.tresportres-assets{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0px 20px;
}

.smalltxt-bio, .smalltxt-assets{
	font-size: 0.7em;
	line-height: 1em;
	text-transform: uppercase;
	color: #c32222;
	font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.under{
	margin-bottom: 20px;
	margin-top: 0px;
	padding-top: 10px;
	border-top: 2px solid #c32222;
	line-height: 2.5em;
}

.tabla-distin{
	display: grid;
	margin-top: 35px;
	grid-gap: 0px 20px;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 55px repeat(4, 220px);
	width: 1200px;
}

.paradigm{
	grid-row: 2 / 2;
	grid-column: 5 / 9;
	align-content: end;
	z-index: 2;
}

.nature, .demeanor{
	grid-row: 3 / 3;
	align-content: start;
	display: flex;
	flex-direction: column;
	z-index: 2;
}

.nature{
	grid-column: 3 / 5;
}

.demeanor{
	grid-column: 9 / 11;
}

.nature-traits, .demeanor-traits{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-size: 1.8em;
	line-height: 1.8em;
	grid-row: 4 / 6;
	font-style: italic;
	text-align: center;
	color: #777;
}

.nature-traits{
	grid-column: 3 / 5;
}

.demeanor-traits{
	grid-column: 9 / 11;
}

.curva{
	grid-row: 2 / 4;
	grid-column: 3 / 11;
}

.adjust-curva{
	translate: 0% 1%;
}

.centrar{
	margin: 0px auto;
	width: fit-content;
}

.boton-cont{
	display: flex;
	justify-items: start;
	grid-area: 5 / 6 / span 1 / span 2;
}

.boton-alt{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: white;
	font-size: 6.5em;
	font-weight: 400;
	text-align: center;
	background: #DFB268;
	rotate: 45deg;
	margin: 0px auto;
	width: 81px;
	height: 81px;
	transition: background 500ms ease;
}

.boton-alt:hover{
	background: #43259c;
}

.retrato{
	grid-column: 5 / 9;
	grid-row: 3 / 5;
	align-content: center;
}

.retrato img{
	transition: opacity 500ms ease-in-out;
	position: relative;
}

#Retrato1 {
	opacity: 1;
	z-index: 2;
        }
#Retrato2 {
	opacity: 0;
	z-index: 1;
        }

.retrato-border{
	grid-column: 5 / 9;
	grid-row: 3 / 5;
	width: 274px;
	height: 274px;
	rotate: 45deg;
	translate: 20.3% 30%;
	background: conic-gradient(from var(--anglecardmain) at -50% 50%, #B4903A 0%, #D6B65F 11%, #D5B67A 20%, #FFE5A6 27%, #D6B65F 40%, #957122 57%, #44320C 79%, #957122 80%, #44320C 81%, #8C6A20 96%, #926E22 98%, #B4903A 100%);
	animation: 10s spincard linear infinite;
}

.datos{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 35px repeat(8, 1fr);
	align-content: space-evenly;
	grid-gap: 20px 20px;
	height: auto;
	width: 1200px;
}

.boton-cont-datos{
	display: flex;
	justify-items: start;
	grid-area: 5 / 11 / span 2 / span 2;
	z-index: 3;
}

#FB1 {
	opacity: 1;
	z-index: 2;
}

#FB2 {
	opacity: 0;
	z-index: 1;
}

.datos-wrapper{
	display: block;
	width: fit-content;
	border-bottom: 2px solid #c32222;
	padding: 15px 0px 5px 0px;
	font-size: 1.6em;
  text-align: center;
}

.titulo-datos{
	grid-area: span 1 / span 12;
	display: block;
	align-content: center;
	margin: 0px auto;
	margin-top: 150px;
}

.tit-atributes, .tit-distinctions, .tit-skills{
	display: block;
	align-content: center;
	border-bottom: 2px solid #DFB268;
	z-index: 3;
}

.tit-atributes{
	grid-area: 1 / 1 / span 1 / span 2;
}

.tit-skills{
	grid-area: 1 / 11 / span 1 / span 2;
}

.tit-distinctions{
	grid-area: 1 / 3 / span 1 / span 8;
}

.tit-datos-wrapper{
	height: 55px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tabla-data-wrapper{
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	grid-area: 2 / 1 / span 7 / span 7;
	z-index: 2;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
}

.bck-data{
	grid-area: 2 / 1 / span 7 / span 12;
	outline: double 4px #DFB268;
	background-image: url("imagenes/background-datos.webp");
}

.body-container{
	grid-area: 1 / 8 / span 9 / span 4;
	height: 700px;
}

.body-container img{
	object-fit: contain;
	width: 100%;
	height: 100%;
	transition: opacity 500ms ease-in-out;
}

.flecha{
	transform: translate(2%, 20%);
}

.celda3x1, .celda2x1, .celda3x1spheres, .celda3x1assets{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 65px;
	margin: auto 0px;
	grid-area: span 1 / span 3;
}

.fullrow{
	grid-area: span 1 / span 12;
}

.celda2x1{
	grid-area: span 1 / span 2;
}

.tabla-att{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 20px 20px;
	width: 1200px;
}

.backgrd{
	grid-area: 2 / 1 / span 15 / span 12;
	width: 100%;
	z-index: 1;
}

.cuadro-skills, .cuadro-att{
 outline: double 4px #DFB268;
 outline-offset: 20px;
}

.cuadro-att{
 grid-area: 1 / 1 / span 5 / span 2;
}

.cuadro-skills{
 grid-area: 1 / 11 / span 5 / span 2;
}

.col-att, .col-skills{
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: repeat(16, 35px);
	grid-gap: 20px 20px;
	grid-area: 2 / 1 / span 3 / span 2 ;
	z-index: 2;
	margin-top: 20px;
}

.col-skills{
	grid-area: 2 / 11 / span 4 / span 2;
}

.specs{
	color: #777;
	font-style: italic;
	margin: 0px auto;
}

.celda-att{
	grid-area: span 1 / span 2;
	width: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 35px;
	padding: 0px 10px;
}

.nombre-att{
	font-size: 1.6em;
	line-height: 1em;
  text-align: center;
  align-content: center;
}

.cuatroporuna{
	display: grid;
	width: 1200px;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 1fr;
	height: fit-content;
	grid-gap: 0px 20px;
	margin-top: 35px;
}

.align-start{
	margin: 0;
	justify-content: start;
}

.celda3x1spheres{
	height: fit-content;
}

.sphere img, .imgthread img{
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.forms img{
	object-fit: contain;
	width: auto;
	height: auto;
}

.forms{
	width: 261px;
	height: 150px;
	align-content: center;
}

.sphere .imgthread{
	width: 261px;
	height: 81px;
}

.celda4x1{
	grid-area: span 1 / span 4;
}

.grid-assets{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(9, 1fr);
	grid-gap: 20px 20px;
	width: 1200px;
	height: 700px;
}

.bck-assets{
	grid-area: 2 / 1 / span 6 / span 12;
	outline: double 4px #DFB268;
	background-image: url("imagenes/background-nebula.webp");
}

.vamp-disc{
	background-image: url("imagenes/background-vamp.webp");
}

.wolf-disc{
	background-image: url("imagenes/background-wolf.webp");
}

.fae-disc{
	background-image: url("imagenes/background-chang.webp");
}

.dem-disc{
	background-image: url("imagenes/background-hell.webp");
}

.body-container-assets{
	grid-area: 1 / 5 / span 9 / span 4;
	height: 700px;
	z-index: 4;
}

.sag-coin img, .sag-coin-blur img, .sag-coin-comp img, .fc img{
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.fc{
	width: 261px;
	height: 261px;
}

.sag-coin, .sag-coin-blur{
	width: 388px;
	height: 388px;
	grid-area: 2 / 5 / span 4 / span 4;
	z-index: 2;
}

.sag-coin-comp{
	width: 300px;
	height: 300px;
	margin: 30px auto;
	z-index: 2;
}

.sag-coin-blur{
	z-index: 3;
	opacity: 0.4;
}

.sieteportres-left, .sieteportres-right{
	display: grid;
	grid-template-columns: subgrid;
	grid-area: 2 / 1 / span 6 / span 4;
	z-index: 2;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
}

.sieteportres-right{
	grid-area: 2 / 9 / span 6 / span 4;
}

.titulo-bckg{
	grid-area: span 1 / span 4;
}

.celda4x2{
	grid-area: span 2 / span 4;
}

.celdawrapper-assets{
	margin: 0px auto;
	padding: 0px 20px;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.smalltxt-assets{
	text-align: left;
}

.txt-assets{
	font-size: 1.2em;
	line-height: 1.2em;
}

.celda3x1assets{
	align-items: start;
	justify-items: start;
	height: fit-content;
}

.tabla-dice{
	margin-top: 150px;
	width: 1200px;
	height: auto;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 20px;
}

.tabla-dice-izq, .tabla-dice-der{
	width: auto;
	height: auto;
	grid-area: span 1 / span 4;
	text-align: left;
	
}

.tabla-dice-der{
	grid-area: span 1 / span 8;
	font-size: 1.6em;
	line-height: 1.6em;
}

.tabla-dice-row{
	display: grid;
	grid-area: span 1 / span 12;
	grid-template-columns: subgrid;
	grid-template-rows: 1fr;
}

.divider{
	width: 100%;
	height: 2px;
	margin: 30px auto;
	background: radial-gradient( #B4903A 0%, #D6B65F 11%, #D5B67A 20%, #FFE5A6 27%, #D6B65F 40%, #957122 57%, #44320C 79%, #957122 80%, #44320C 81%, #8C6A20 96%, #926E22 98%, #B4903A 100%);
	grid-area: span 1 / span 12;
}

.caja-dados, .postexample{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	align-content: space-between;
	justify-content: space-evenly;
	margin: 40px 0px;
}

.caja-dados img{
	width: 10%;
	height: 10%;
	object-fit: contain;
}

.postexample img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/* ---------- KEYFRAMES ---------------- */

/* ----------------------------------------------
 * Generated by Animista on 2025-4-1 23:21:21
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2025-4-2 1:15:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation blink-2
 * ----------------------------------------
 */
@-webkit-keyframes blink-2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink-2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}