@import url('https://fonts.cdnfonts.com/css/circular-std');


/* Reset simples */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body { font-family: "Segoe UI", Roboto, Arial, sans-serif; background: #0f0f10; color: #eaeaea; -webkit-font-smoothing:antialiased; }

/* Container */
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }

/* Header */
.site-header { border-bottom: 1px solid rgba(255,255,255,0.04); background: linear-gradient(180deg, rgba(15,15,16,0.95), rgba(15,15,16,0.9)); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { height:48px; object-fit:contain; }
.nav a { color:#ddd; text-decoration:none; margin-left:18px; font-size:0.95rem; }
.nav .cta { background:#e50914; color:#fff; padding:8px 12px; border-radius:6px; margin-left:14px; }

/* Hero */
.hero { padding:60px 0; }
.hero-inner { display:flex; flex-direction:column; gap:16px; }
.hero h1 { font-size:2rem; line-height:1.05; }
.lead { color:#cfcfcf; max-width:720px; }
.hero-actions { margin-top:12px; display:flex; gap:12px; }
.btn { display:inline-block; padding:10px 16px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.08); border-radius:6px; text-decoration:none; }
.btn.primary { background:#e50914; border-color:#e50914; }

/* Sections */
.section { padding:40px 0; }
.section.alt { background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }

/* Projetos */
.projetos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.card { background: rgba(255,255,255,0.02); padding:12px; border-radius:8px; min-height:180px; display:flex; flex-direction:column; gap:8px; }
.card img { width:100%; height:120px; object-fit:cover; border-radius:6px; }

/* Equipe */
.equipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.member { text-align:center; background: rgba(255,255,255,0.02); padding:12px; border-radius:8px; }
.member img { width:100%; height:140px; object-fit:cover; border-radius:8px; }
.member img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/* Garante que a grid da equipe não force altura das imagens */
.equipe-grid .member img {
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Contato */
.contact-grid { display:flex; gap:16px; margin:16px 0 24px; flex-wrap:wrap; }
.contact-card { background: rgba(255,255,255,0.02); padding:12px; border-radius:8px; min-width:200px; }
.contact-form { display:flex; flex-direction:column; gap:10px; max-width:640px; }
.contact-form input, .contact-form textarea { padding:10px; border-radius:6px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); color:#fff; }
.contact-form button { width:fit-content; }

/* Footer */
.site-footer { border-top:1px solid rgba(255,255,255,0.04); padding:18px 0; margin-top:32px; color:#bdbdbd; }
.footer-inner { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.footer-links a { color:#bdbdbd; text-decoration:none; margin-left:12px; }

/* Responsividade */
@media (max-width: 700px) {
    #main { text-align: center; }
    .box-info { flex-direction: column; text-align: center; }
    #input { width: 100%; max-width: none; margin-bottom: 8px; }
    .footer-inner { flex-direction: column; text-align: center; }
}
@media (max-width:900px) {
	.projetos-grid, .equipe-grid { grid-template-columns:repeat(2,1fr); }
	.header-inner { flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (max-width:600px) {
	.projetos-grid, .equipe-grid { grid-template-columns:1fr; }
	.hero h1 { font-size:1.6rem; }
	.footer-inner { flex-direction:column; text-align:center; }
	.nav a { margin-left:10px; font-size:0.9rem; }
}

.fit-img {
	max-height: 220px;
	width: 100%;
	object-fit: contain;
	background: #222;
	opacity: 0;
	transform: scale(0.96);
	animation: fadeInZoom 1.1s cubic-bezier(.4,1.4,.6,1) 0.2s forwards;
	transition: transform 0.3s cubic-bezier(.4,1.4,.6,1), box-shadow 0.3s;
}
.fit-img:hover, .fit-img:focus {
	transform: scale(1.04);
	box-shadow: 0 6px 24px 0 rgba(229,9,20,0.12);
}

@keyframes fadeInZoom {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}