@font-face{
	font-family:'Poppins';
	src:url("/assets/webfonts/poppins.ttf") 
	format("truetype");
	font-weight:normal; 
	font-style:normal; 
	font-display:swap;
}

:root{
	--grad-a: #2a569d;          /* degradado boton: inicio (default; se sobreescribe por dominio) */
	--grad-b: #1a2663;          /* degradado boton: fin     */
	--accent-rgb: 74,130,219;   /* acento en RGB: focus, orbes, brillos */
	--dark:   #1A1615;          /* columna izquierda        */
	--ink:    #2B2624;          /* texto principal          */
	--muted:  #B9AFA9;          /* textos suaves / iconos   */
	--line:   #E8E3E1;          /* bordes finos de inputs   */
	--radius: 24px;             /* esquinas de la tarjeta   */
}

*,*::before,*::after {
	 box-sizing:border-box; 
	 margin:0; 
	 padding:0 
	}
html,body {
	font-size:62.5%; 
	height:100%; 
	overflow:hidden;
	font-family:"Poppins","Open Sans",Helvetica,Arial,sans-serif;
}
a { 
	text-decoration:none 
}

.cont {
	position:relative;
	height:100%;
	overflow:hidden;
	background:linear-gradient(135deg,#16121F 0%,#1A1615 40%,#241426 75%,#120E1A 100%);
	background-size: cover, cover !important;
	background-repeat: no-repeat, no-repeat !important;  
	perspective:1400px;                    
}
.cont::before,
.cont::after {
	content:""; 
	position:absolute; 
	border-radius:50%;
	filter:blur(70px); 
	pointer-events:none; 
	z-index:0;
}
.cont::before {
	width:46rem; 
	height:46rem; 
	top:-12rem; 
	left:-10rem;
	background:radial-gradient(circle, rgba(var(--accent-rgb),.34), transparent 65%);
	animation:orb1 14s ease-in-out infinite;
}
.cont::after {
	width:52rem; 
	height:52rem; 
	bottom:-16rem; 
	right:-12rem;
	background:radial-gradient(circle, rgba(var(--accent-rgb),.28), rgba(var(--accent-rgb),.14) 55%, transparent 70%);
	animation:orb2 18s ease-in-out infinite;
}
@keyframes orb1 {
	0%,100%{ transform:translate(0,0) scale(1) }
	50%    { transform:translate(9rem,7rem) scale(1.15) }
}
@keyframes orb2 {
	0%,100%{ transform:translate(0,0) scale(1) }
	50%    { transform:translate(-11rem,-6rem) scale(1.1) }
}

.demo {
	position:absolute; 
	top:50%; 
	left:54%;
	transform:translateY(-50%) !important;
	width:45rem; 
	max-width:88%;
	display:none;              
	animation:cardIn .8s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes cardIn {
	from{ opacity:0; transform:translate(-50%,-38%) scale(.88) rotateX(10deg) }
	to  { opacity:1; transform:translate(-50%,-50%) scale(1) rotateX(0deg) }
}
.login {
    position: relative;
    min-height: 29rem;
    border-radius: 16px !important;
    overflow: hidden;
    background: linear-gradient(135deg, rgb(45 73 120 / 81%), rgb(0 0 0 / 62%));
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
 	border: var(--card-border, 1px solid rgb(46 114 235));   
	box-shadow: var(--card-shadow, 0 0 8px rgb(80 95 190), 0 0 22px rgb(125 132 172 / 45%), 0 0 55px rgb(13 18 29), inset 0 0 25px rgb(10 11 11), inset 0 1px 0 rgba(255, 255, 255, 0.16));   /* sombra por dominio (brandConfig) */
    transform-style: preserve-3d;
    transition: transform .25s ease-out, box-shadow .3s ease, border-color .3s ease;
    will-change: transform;
	isolation: isolate;
}
.login::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    box-shadow: inset 0 0 20px rgba(0, 220, 255, 0.10);
    z-index: 1;
}
.login::before {
	content:""; 
	position:absolute; 
	top:0; 
	left:-70%; 
	z-index:5;
	width:45%; 
	height:100%; 
	pointer-events:none;
	background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
	transform:skewX(-18deg);
	transition:left .65s ease;
}
.login.shine::before { 
	left:130%
}
.login.inactive { 
	opacity:0; 
	transform:scale(1.1) rotateX(8deg) 
}
.login > .alert {
	position:absolute; 
	top:0; 
	left:0; 
	right:0; 
	z-index:7;
	margin:0; 
	border:none; 
	border-radius:0; 
	font-size:1.3rem;
}
@keyframes
float{ 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-14px) rotate(1.5deg)} }  

.split__right {
	background:linear-gradient(363deg, rgb(19 19 26) 0%, rgb(22 27 46 / 32%) 50%, rgb(0 0 0 / 60%) 100%) !important; 
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	color:var(--ink);
	display:flex; 
	flex-direction:column; 
	padding:3.2rem 2.5rem 4rem;
}
.split__top { 
	display:flex; 
	margin-top: -2%;
    margin-bottom: 8%;
	align-items:center; 
	justify-content: center;
}
.split__logo {    
	height: 7.4rem;
    width: 88%;
}
.split__body {
	flex:1; 
	display:flex; 
	flex-direction:column; 
	justify-content:center;
	max-width:40rem; 
	width:100%; 
	margin:0 auto;
}

.login__submit {
	position:relative; 
	overflow:hidden;
	width:100%; 
	height:5rem; 
	border:none; 
	cursor:pointer;
	border-radius:999px;
	background:linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%);
	background-size:200% 100%;
	color:#fff; 
	font-size:1.5rem; 
	font-weight:600; 
	letter-spacing:.03em;
	font-family:inherit;
	box-shadow:0 12px 24px rgb(71 78 113 / 50%), 0 0 0 1px rgba(255,255,255,.08) inset;
	transition:transform .18s ease, 
	box-shadow .25s ease, 
	background-position .5s ease, 
	filter .2s;
}
.login__submit::after {
	content:""; 
	position:absolute; 
	top:0; 
	left:-80%;
	width:50%; 
	height:100%;
	background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
	transform:skewX(-20deg);
	animation:btnShine 3.2s ease-in-out infinite;
}
@keyframes btnShine {
	0%       { left:-80% }
	55%,100% { left:130% }
}
.login__submit:hover {
	transform:translateY(-2px) scale(1.01);
	background-position:100% 0;
	box-shadow:0 16px 34px rgb(71 78 113 / 95%), 0 0 24px rgba(129,131,141,.35);
}
.login__submit:active { 
	transform:translateY(0) scale(.98) 
}
.login__submit:disabled { 
	opacity:.75; 
	cursor:default; 
	transform:none 
}
.login__submit--danger {
	background:linear-gradient(90deg,#D9534F,#C9302C);
	box-shadow:0 10px 20px rgba(217,83,79,.30);
}

#step2 {
	position:absolute; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	z-index:6;
	background:linear-gradient(160deg, rgba(26,22,21,.92), rgba(16,12,10,.96));
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	border-radius:var(--radius);
}
.step2__wrap {
	height:100%; 
	display:flex; 
	flex-direction:column;
	align-items:center; 
	justify-content:center; 
	gap:2rem;
	padding:3rem; 
	text-align:center;
}
.step2__title { 
	color:#F5EFEF; 
	font-size:1.6rem; 
	max-width:32rem; 
	line-height:1.5 
}
#step2 img { 
	width:15rem; 
	margin:0 auto; 
	display:block; 
	animation:float 3.5s ease-in-out infinite 
}

/*Responsive*/

.login__form { 
	margin:0 
}
.login__row { 
	position:relative; 
	margin-bottom:1.6rem; 
	transition:transform .25s ease 
}
.login__row .login__input {
	width:100%; height:5rem;
	background:rgba(255,255,255,.055);
	color:#F5EFEF;
	border:1px solid rgba(255,255,255,.13);
	border-radius:1rem;
	padding:0 4.8rem 0 1.8rem;
	font-size:1.4rem; font-family:inherit;
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	transition:border-color .2s, box-shadow .25s, background .25s, transform .25s;
}
.login__row .login__input::placeholder { 
	color:#8C8480
}
.login__row .login__input:focus {
	outline:none;
	border-color:rgba(var(--accent-rgb),.65);
	box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14), 0 10px 24px rgba(0,0,0,.25);
}
.login__row:focus-within { 
	transform:translateY(-3px) 
}
.login__icon {
	position:absolute; 
	right:1.4rem; 
	top:1.5rem;
	width:2rem; 
	height:2rem; 
	fill:none; 
	stroke:#8C8480;
	stroke-width:1.6; 
	pointer-events:none;
	transition:stroke .25s;
}
.login__row:focus-within .login__icon { 
	stroke:rgb(var(--accent-rgb)) 
}
.brand-castro {
	background-position-y: 27%, 0% !important;
	background-size: cover, 107% !important;
}

@media (max-width:1366px) {
	.demo { 
		width:44rem ;
	    left: 50%;
		max-width: 75%;
		transform: translate(-50%, -50%) !important;
	}

	.brand-castro {
		background-position-y: 27%, 0% !important;
		background-size: cover, cover !important;
	}
}
@media (max-width:768px){
	
	html,body { 
		font-size:55%
	}
	.demo { 
		width:92%; 
	    left: 50%;
		max-width: 75%;
		transform: translate(-50%, -50%) !important;
	}
	.split__right { 
		padding: 5rem 2.4rem 
	}

	/* ---------- CASTRO */
	.brand-castro .split__top { 
		margin:-2.4rem -2.4rem 8% 
	}
	.brand-castro .split__logo {
		height: 7rem;
		width: 85%;
	}
	.brand-castro {
		background-position-y: 27%, 0% !important;
		background-size: cover, cover !important;
	}
	.brand-castro .login__form { 
		margin: 2rem 0rem !important;
	}
}
.brand-castro .split__top {
	background: transparent;
	margin: -4.2rem -2.5rem 6%;
    padding: 2.2rem 3.5rem 0.2rem;
	box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.3);
}
.brand-castro .login {
	min-height: 30rem;
	background: linear-gradient(135deg, rgb(30 42 56 / 55%) 0%, rgb(52 63 76 / 34%) 50%, rgba(50, 64, 80, 0.70) 100%) !important;
}
 .brand-castro .demo {
	height: 55rem;
	top: 49%;
    left: 50%;
	margin: 0;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

/* CNB */
.brand-cnb .login {
	background: linear-gradient(135deg, rgb(8 10 15 / 35%), rgb(0 0 0 / 40%));
}
@media (max-height:600px) {         
	.cont { 
		overflow:hidden 
	}
	.demo { 
		position:relative; 
		top:0; 
		left:0; 
		transform:none !important;
		margin:3rem auto 
	}
}