:root{
    --cor-principal: purple;
}

/* RESET BÁSICO */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family: Arial, Helvetica, sans-serif;
}

/* SCROLL SUAVE */
html{
	scroll-behavior: smooth;
}

body{
	line-height:1.6;
}

/* CONTAINER PADRÃO */
.container{
	max-width:1200px;
	margin:0 auto;
	padding:0 20px;
}

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

header{
	background:white;
	padding:20px 0;
	border-bottom:1px solid #eee;
}

header .container{
	display:flex;
	align-items:center;
	justify-content:space-between;
	position:relative;
	z-index:1000;
}

.logo img{
	width:120px;
}

nav.desktop ul{
	list-style:none;
	display:flex;
	gap:25px;
}

nav.desktop a{
	text-decoration:none;
	color:#333;
	font-weight:bold;
}

/* ÍCONES SOCIAIS */

nav.desktop ul{
	list-style:none;
	display:flex;
	align-items:center;
	gap:25px;
}

nav.desktop ul li.icons a{
	font-size:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:0.3s;
}


/* Linkedin azul royal */
.icons a.linkedin{
	color:mediumblue;
}

nav.desktop ul li.social a:hover{
	transform:scale(1.2);
}




/* ================= HERO (H1) ================= */

h1{
	background:var(--cor-principal);
	color:white;
	text-align:center;
	padding:60px 20px;
	font-size:28px;
}

/* ================= SERVIÇOS ================= */

.Servicos{
	background:white;
	padding:100px 20px;
	text-align:center;
}

/* Título "Escrevo" */
.Servicos p{
	font-weight:bold;
	font-size:26px;
	margin-bottom:40px;
}

/* Lista em 2 colunas */
.Servicos ul{
	list-style:none;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:30px;
	max-width:900px;
	margin:0 auto 50px auto;
}

/* Cards */
.Servicos li{
	background:white;
	border:2px solid black;
	padding:25px;
	border-radius:8px;
	box-shadow:0 4px 10px rgba(0,0,0,0.15);
	font-size:18px;
}

/* h3 destacado */
.Servicos h3{
	font-weight:normal;
	max-width:800px;
	margin:0 auto;
	font-size:18px;
	color:#333;
}

/* Responsivo */
@media(max-width:768px){
	.Servicos ul{
		grid-template-columns:1fr;
	}
}

/* ================= VANTAGENS ================= */

.Vantagens{
	background:var(--cor-principal);
	padding:100px 0; /* maior destaque */
	color:white;
	width:100%;
}

.Vantagens .container{
	max-width:1100px;
	margin:0 auto;
	padding:0 40px; /* evita colar nas bordas */
}

.Vantagens h3{
	text-align:center;
	margin-bottom:40px;
	font-size:26px;
}

.vantagens-lista{
	list-style:none;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
	gap:20px;
}

.vantagens-lista li{
	background:rgba(255,255,255,0.1);
	padding:20px;
	border-radius:8px;
}

/* ================= POR QUE ME CONTRATAR ================= */

.Por-que-me-contratar{
	background:white;
	padding:120px 30px;
	text-align:center;
	font-size:20px;
}

.Por-que-me-contratar h2{
	text-align: center;
	padding-top: 10px;
}


iframe {
    width: 100%;
    height: 600px;
    border: none;
}

.carta-preview{
    max-width:800px;
    margin:0 auto;
    text-align:center;
    background:#ffffff;
    padding:40px;
    border:1px solid #ccc;
    box-shadow:0px 3px 8px rgba(0,0,0,0.1);
}

.carta-preview p{
    margin-bottom:15px;
    font-size:18px;
}

.carta-preview ul{
    margin:20px 0;
    text-align:left;
    display:inline-block;
}

.btn-carta{
    display:inline-block;
    margin-top:25px;
    padding:15px 30px;
    background:deepskyblue;
    color:white;
    text-decoration:none;
    font-weight:bold;
    border-radius:5px;
}

.btn-carta:hover{
    background:darkblue;
}
/* ================= CONTATO ================= */

.Contato{
	background:var(--cor-principal);
	padding:60px 20px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.btn1{
	background:deepskyblue;
	color:white;
	border:none;
	border-radius:30px;
	padding:15px 35px;
	cursor:pointer;
	font-weight:bold;
	font-size:16px;
	transition:0.3s;
	text-decoration: none;
}

.btn1:hover{
	background:darkblue;
	transform:scale(1.05);
}

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

footer{
	background:white;
	text-align:center;
	padding:20px;
	font-size:14px;
	border-top:1px solid #eee;
}

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

@media(max-width:768px){

	header .container{
		flex-direction:column;
		gap:20px;
	}

	nav.desktop ul{
		flex-direction:column;
		align-items:center;
	}

	.Contato{
		flex-direction:column;
		text-align:center;
	}

}


.menu-mobile{
	display:none;
	font-size:28px;
	cursor:pointer;
}

@media screen and (max-width:480px){


nav.desktop{
	display:none;
	width:100%;
	position:relative;
	z-index:999;
}

nav.desktop.open{
	display:block;
}


nav.desktop ul{
	flex-direction:column;
	background:white;
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	padding:20px 0;
	border-top:1px solid #ddd;
	z-index:999;
	max-height:80vh;
	overflow-y:auto;
}


nav.desktop li{
	text-align:center;
	padding:10px 0;
}

.menu-mobile{
	display:block;
}

header .container{
	justify-content:space-between;
}

}