/*==========================
RESET
==========================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{
width:100%;
height:100%;
overflow:hidden;

font-family:
'Segoe UI',
sans-serif;

}


/*==========================
FONDO
==========================*/

body{

min-height:100vh;

background-image:
url("/static/webinar-bg.png.png");

background-size:
cover;

background-position:
left center;

background-repeat:
no-repeat;

display:flex;

justify-content:flex-end;

align-items:center;

padding-right:5%;

position:relative;

}


/*==========================
OVERLAY MÁS SUAVE
==========================*/

.overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(1,8,35,.02),

rgba(1,8,35,.04),

rgba(1,8,35,.12)

);

z-index:0;

}


/*==========================
CONTENEDOR
==========================*/

.container{

position:relative;

z-index:2;

width:100%;

display:flex;

justify-content:flex-end;

align-items:center;

padding-bottom:40px;

}


/*==========================
FORMULARIO PREMIUM
==========================*/

.form-card{

width:500px;

max-width:95%;

padding:

34px
36px;

border-radius:30px;

/* MÁS TRANSPARENTE */

background:

linear-gradient(

180deg,

rgba(8,20,60,.48),

rgba(5,15,50,.62)

);

backdrop-filter:
blur(14px);

border:

1px solid
rgba(100,170,255,.14);

box-shadow:

0 18px 70px
rgba(0,0,0,.32);

color:white;

}


/*==========================
TITULO
==========================*/

.form-card h2{

text-align:center;

font-size:40px;

line-height:1.08;

font-weight:800;

margin-bottom:28px;

letter-spacing:-1.5px;

}


/*==========================
INPUTS
==========================*/

.input-group{

margin-bottom:14px;

}

input,
select{

width:100%;

height:56px;

padding:

0 20px;

font-size:16px;

color:white;

border-radius:14px;

border:

1px solid
rgba(255,255,255,.08);

background:

rgba(255,255,255,.03);

outline:none;

transition:
all .25s;

}


input::placeholder{

color:
rgba(255,255,255,.45);

}


/*==========================
FOCUS
==========================*/

input:focus,
select:focus{

border-color:
#46a0ff;

background:

rgba(255,255,255,.05);

box-shadow:

0 0 0 4px
rgba(70,160,255,.08);

}


/*==========================
LABEL
==========================*/

.label-select{

display:block;

margin:

8px 0;

font-size:14px;

font-weight:600;

color:

rgba(255,255,255,.90);

}


/*==========================
SELECT
==========================*/

.select-wrapper{

position:relative;

margin-bottom:8px;

}

.select-wrapper::after{

content:"⌄";

position:absolute;

right:18px;

top:50%;

transform:
translateY(-50%);

pointer-events:none;

color:#8fc9ff;

font-size:20px;

}

select{

appearance:none;

cursor:pointer;

}

select option{

background:#071733;

color:white;

}


/*==========================
BOTON
==========================*/

button{

width:100%;

height:62px;

margin-top:22px;

border:none;

border-radius:16px;

font-size:19px;

font-weight:700;

cursor:pointer;

color:white;

background:

linear-gradient(

135deg,

#1886ff,

#0050ff

);

transition:
.25s;

}


button:hover{

transform:

translateY(-2px);

box-shadow:

0 12px 35px
rgba(0,110,255,.28);

}


/*==========================
MENSAJES
==========================*/

.mensaje-exito{

margin-top:14px;

padding:14px;

border-radius:12px;

background:

rgba(0,180,90,.18);

color:#d8ffe8;

}

.mensaje-error{

margin-top:14px;

padding:14px;

border-radius:12px;

background:

rgba(220,30,30,.18);

color:#ffdada;

}


/*==========================
RESPONSIVE
==========================*/

@media(max-width:1200px){

body{

justify-content:center;

padding:25px;

background-position:center;

}

.container{

justify-content:center;

padding-bottom:0;

}

.form-card{

width:100%;
max-width:620px;

}

}


@media(max-width:768px){

body{

padding:14px;

}

.form-card{

padding:

30px
24px;

}

.form-card h2{

font-size:34px;

}

input,
select{

height:54px;

}

button{

height:58px;

}

}