:root{

--bg:#b3e5fc;
--primary:#0288d1;
--dark:#17465c;
--card:#ffffffee;
--muted:#607d8b;

}

*{

box-sizing:border-box;

}

html{

height:100%;

}

body{

margin:0;

min-height:100vh;

font-family:

Arial,
Helvetica,
sans-serif;

background:

linear-gradient(
180deg,
#b3e5fc,
#d8f2fb
);

color:

var(--dark);

overflow-x:hidden;

}

/* PANTALLA */

.screen{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:

24px
18px
60px;

animation:

fade
.25s
ease;

}

/* TARJETA */

.card{

width:

min(
440px,
100%
);

background:

var(--card);

backdrop-filter:

blur(8px);

border-radius:

28px;

padding:

28px
22px;

box-shadow:

0
18px
55px
rgba(
0,
88,
121,
0.18
);

text-align:center;

}

/* LOGO */

.logo{

width:170px;

max-width:60%;

display:block;

margin:

0 auto
18px;

border-radius:24px;

}

/* TITULOS */

.title{

font-size:22px;

font-weight:800;

line-height:1.2;

margin-bottom:18px;

text-transform:uppercase;

}

.subtitle{

font-size:14px;

font-weight:700;

color:var(--muted);

margin-bottom:18px;

}

/* INPUTS */

.input{

width:100%;

padding:

15px
16px;

margin:

8px
0;

font-size:16px;

border:

1px solid
#d7edf6;

border-radius:

18px;

background:#fff;

outline:none;

}

.input:focus{

border-color:

var(--primary);

}

/* BOTONES */

.btn{

width:100%;

padding:

15px
16px;

margin:

9px
0;

border:none;

border-radius:

18px;

font-size:16px;

font-weight:800;

cursor:pointer;

background:

var(--primary);

color:white;

box-shadow:

0
8px
20px
rgba(
2,
136,
209,
0.22
);

transition:

.2s;

}

.btn:hover{

transform:

translateY(-2px);

}

.btn.secondary{

background:#fff;

color:

var(--primary);

border:

2px solid
var(--primary);

box-shadow:none;

}

.btn.gray{

background:#78909c;

}

.btn.danger{

background:#d32f2f;

}

/* LINK */

.link{

border:none;

background:none;

color:#01579b;

font-weight:700;

margin-top:10px;

cursor:pointer;

}

/* MENU */

.menu{

display:grid;

gap:10px;

}

/* LISTA */

.list{

max-height:350px;

overflow:auto;

text-align:left;

}

.item{

background:white;

padding:14px;

border-radius:18px;

margin:10px 0;

border:

1px solid
#e0f1f8;

}

/* FOTO */

.preview{

width:100%;

border-radius:18px;

margin-top:14px;

}

/* VIDEO */

video{

width:100%;

border-radius:18px;

background:black;

}

/* PEQUEÑO */

.small{

font-size:12px;

color:

var(--muted);

}

/* CREDITO */

.credit{

position:fixed;

left:12px;

bottom:8px;

font-size:11px;

color:#35515d;

}

/* TRANSICIONES */

.slideIn{

animation:

slideIn
.25s
ease;

}

@keyframes slideIn{

from{

opacity:.4;

transform:

translateX(
35px
);

}

to{

opacity:1;

transform:

translateX(
0
);

}

}

@keyframes fade{

from{

opacity:0;

transform:

translateY(
10px
);

}

to{

opacity:1;

transform:

translateY(
0
);

}

}