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

/* =========================
VARIÁVEIS (LIGHT)
========================= */

:root{

--bg-gradient: linear-gradient(135deg,#f8fafc,#eef2ff);

--header-bg: rgba(255,255,255,0.6);

--card-bg: rgba(255,255,255,0.7);

--text:#0f172a;

--input-bg: rgba(255,255,255,0.9);

--border: rgba(15,23,42,0.08);

--primary:#6366f1;

--primary-soft:rgba(99,102,241,0.15);

--btn-reset:#f1f5f9;

--btn-reset-hover:#e2e8f0;

}

/* =========================
DARK MODE
========================= */

#theme-toggle:checked ~ .page{

--bg-gradient: linear-gradient(135deg,#020617,#0f172a);

--header-bg: rgba(15,23,42,0.6);

--card-bg: rgba(15,23,42,0.55);

--text:#e5e7eb;

--input-bg: rgba(2,6,23,0.6);

--border: rgba(255,255,255,0.08);

--primary:#818cf8;

--primary-soft:rgba(129,140,248,0.2);

--btn-reset:#020617;

--btn-reset-hover:#020617;

}

/* =========================
BASE
========================= */

body{

font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

-webkit-font-smoothing:antialiased;

}

.page{

display:flex;

flex-direction:column;

min-height:100vh;

background:

radial-gradient(circle at 20% 20%, rgba(99,102,241,.08), transparent 40%),

radial-gradient(circle at 80% 60%, rgba(99,102,241,.05), transparent 40%),

var(--bg-gradient);

transition:.3s;

}

/* transição suave das cores */

.page,
header,
form,
input,
textarea,
select,
button,
footer,
section img{

transition:

background .35s ease,

color .35s ease,

border-color .35s ease,

box-shadow .35s ease;

}

.page{

animation: themeFade 2s ease;

}

@keyframes themeFade{

from{

opacity:.85;

}

to{

opacity:1;

}

}

/* =========================
HEADER
========================= */

header{

position:relative;

display:flex;

align-items:center;

justify-content:center;

padding:4vh 4vw;

backdrop-filter: blur(12px);

background:var(--header-bg);

box-shadow:0 8px 30px rgba(0,0,0,0.05);

border-bottom:1px solid var(--border);

}

header::after{

content:"";

position:absolute;

bottom:0;

left:0;

width:100%;

height:2px;

background:linear-gradient(90deg,var(--primary),transparent);

opacity:.4;

}

header a{

position:absolute;

left:3vw;

display:flex;

align-items:center;

}

header img{

width:55px;

height:55px;

border-radius:1rem;

transition:.2s;

}

header img:hover{

transform:scale(.96);

}

/* TOOLTIP HEADER */
.tooltip-header{

position:absolute;

left:3vw;

display:flex;

align-items:center;

}

/* tooltip */

.tooltip-text-header{

position:absolute;

top:100%;

left:-2vw;

background:var(--primary-soft);

color:var(--text);

padding:.6rem .8rem;

font-size:.75rem;

border-radius:.6rem;

border:1px solid var(--border);

opacity:0;

transition:.2s;

white-space:nowrap;

box-shadow:0 .5rem 1rem rgba(0,0,0,.08);

}

/* aparece no hover */

.tooltip-header:hover .tooltip-text-header{

opacity:1;

transform:translateY(.3rem);

}

header h1{

font-size:1.3rem;

font-weight:600;

letter-spacing:.04em;

color:var(--text);

text-align:center;

}

/* BOTÃO TEMA */

.theme-btn{

position:absolute;

right:3vw;

cursor:pointer;

font-size:1.3rem;

transition:.3s;

border: 1px solid #aaa8a82f;

padding: 1vh .5vw;
border-radius: 10px;

}

.theme-btn:hover{

transform:rotate(15deg) scale(1.1);

}

/* Ícones */

.icon{

display:none;

padding:.4rem;

border-radius:.5rem;

}

#theme-toggle:not(:checked) ~ .page header .moon{

display:inline;

}

#theme-toggle:checked ~ .page header .sun{

display:inline;

}

/* =========================
MAIN
========================= */

main{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

flex:1;

padding:6vh 4vw;

}

/* CARD */

form{

display:flex;

flex-direction:column;

gap:1vh;

width:100%;

max-width:28rem;

background:linear-gradient(

145deg,

var(--card-bg),

rgba(255,255,255,0.35)

);

box-shadow:

0 20px 40px rgba(0,0,0,.08),

inset 0 1px 0 rgba(255,255,255,.2);

backdrop-filter: blur(14px);

padding:6vh 2vw;

border-radius:1.2rem;

border:1px solid var(--border);


animation:fadeUp .5s ease;

}

/* LABEL */

label{

font-size:.85rem;

font-weight:500;

letter-spacing:.03em;

text-transform:uppercase;

opacity:.8;

margin-top:1vh;

color:var(--text);

}

label i{

margin-right:.4rem;

font-size:.9rem;

color:var(--primary);

}

/* INPUTS */

input,
textarea,
select{

padding:1.5vh 1vw;

border-radius:5px;

border:1px solid var(--border);

background:var(--input-bg);

color:var(--text);

font-weight:500;

letter-spacing:.03em;

opacity:.8;

transition:.25s;

margin-bottom: 2vh;

}

/* FOCUS */

input:focus,
textarea:focus,
select:focus{

transform:translateY(-1px) scale(1.01);

box-shadow:

0 0 0 3px var(--primary-soft),

0 8px 20px rgba(0,0,0,.08);

}

/* TEXTAREA */

textarea{

resize:none;

min-height:18vh;

}

/* CHECKBOX */

.checkbox{

display:flex;

align-items:center;

gap:.5rem;

font-size:.85rem;

margin-top:1vh;

}

/* BOTÕES */

.botoes{

display:flex;

gap:1vw;

margin-top:2vh;

}

button{

flex:1;

padding:1.8vh 1vw;

border:none;

border-radius:.6rem;

font-weight:500;

font-size:1rem;

cursor:pointer;

transition:.25s;

position:relative;

overflow:hidden;

}

button::after{

content:"";

position:absolute;

width:100%;

height:100%;

top:0;

left:-100%;

background:linear-gradient(

120deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transition:.4s;

}

button:hover::after{

left:100%;

}

/* ENVIAR */

.enviar{

background:var(--primary);

color:white;

}

.enviar:hover{

transform:translateY(-.2vh);

box-shadow:0 .8vh 2vh var(--primary-soft);

}

/* LIMPAR */

.limpar{

background:var(--btn-reset);

color:var(--text);

border:1px solid var(--border);

}

.limpar:hover{

background:var(--btn-reset-hover);

}

/* =========================
SOCIAL
========================= */

section{

display:flex;

justify-content:center;

gap:2vw;

margin-top:4vh;

}

section img{

width:5vh;

height:5vh;

padding:.6vh;

border-radius:.7rem;

background:var(--card-bg);

border:1px solid var(--border);

transition:.25s;

}

section img:hover{

transform:translateY(-.3vh);

box-shadow:0 .8vh 2vh rgba(0,0,0,.08);

}

/* TOOLTIP SOCIAL */

.tooltip-social{

position:relative;

display:flex;

flex-direction:column;

align-items:center;

}

.tooltip-text-social{

position:absolute;

top:120%;

left:50%;

transform:translateX(-50%);

background:var(--primary-soft);

color:var(--text);

padding:.5vh .8vw;

font-size:.7rem;

border-radius:.6rem;

border:1px solid var(--border);

opacity:0;

transition:.25s;

white-space:nowrap;

box-shadow:0 .6vh 1.5vh rgba(0,0,0,.08);

}

.tooltip-social:hover .tooltip-text-social{

opacity:1;

transform:translateX(-50%) translateY(.5vh);

}

/* =========================
FOOTER
========================= */

footer{

text-align:center;

font-size:.75rem;

padding:2vh;

color:var(--text);

opacity:.7;

}

/* =========================
ANIMAÇÃO
========================= */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(2vh);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* =========================
RESPONSIVO
========================= */

@media(max-width:600px){

form{

padding:4vh 7vw;

}

header h1{

font-size:1rem;

max-width:40vw;

}

header img{

width:50px;

height:50px;

}

.theme-btn{

font-size:1.1rem;

}

section{

gap:6vw;

}

button {
  padding: 2vh 1vw;
}

.botoes {
  gap:2vw;
}

}