:root{
	--header-height:64px;
	--max-width:1100px;
	--accent: #7cafe9;
	--text: #222;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	display:flex;
	flex-direction:column;
	min-height:100vh;
    background-color: #222;
    overflow-x: hidden;
}

.site-header{
    background-color: #222;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.header-inner{
	max-width:var(--max-width);
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:var(--header-height);
	padding:0 1rem;
}
.logo{width:40px;height:40px;object-fit:contain;display:block}
.logo-link{display:inline-flex;align-items:center}

.main-nav .nav-link{
	color:var(--text);
	text-decoration:none;
	font-weight:600;
	padding:8px 12px;
	border-radius:6px;
    color: #ffff;
    transition: 500ms
}
.main-nav .nav-link:hover{background:rgba(124,175,233,0.08);color:var(--accent)}

.hero{
    margin-top: 6rem;
	display:flex;
    flex-direction: column;
	align-items:center;
	justify-content:center;
	text-align:center;
	flex:1 0 auto;
	/* aumentar padding inferior para empujar el footer más abajo */
	padding:3rem 2rem 6rem;
    color: rgb(219, 219, 219);
}
.hero-title{
	margin:0;
	line-height:1;
	font-weight:700;
	font-size:clamp(2rem, 6vw, 5rem);
    color: #61ff53;
}

@media (max-width:420px){
	.header-inner{padding:0 0.75rem}
	.logo{width:36px;height:36px}
	.main-nav .nav-link{padding:6px 8px}
}

/* Background slogan styles (decorative) */
:root{
	--bg-slogan-font: "Bruno Ace SC", sans-serif;
	--bg-slogan-color: rgba(255, 255, 255, 0.021);
}

background.bg-slogan{
	position:fixed;
	inset:0; /* top:0; right:0; bottom:0; left:0; */
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:0; /* keep behind page content */
	pointer-events:none; /* decorative only */
	overflow:hidden;
}

.site-header,
.hero{position:relative;z-index:1}

.bg-slogan-title{
	margin:0;
	padding:0 5vw;
	font-family:var(--bg-slogan-font);
	color:var(--bg-slogan-color);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	line-height:0.9;
	font-weight:800;
	font-size:clamp(4rem, 18vw, 12rem);
	text-transform:none;
	letter-spacing: -0.02em;
	white-space:nowrap;
}

.bg-word{display:block}

@media (max-width:700px){
	.bg-slogan-title{font-size:clamp(3.2rem, 16vw, 8rem)}
}

@media (max-width:420px){
	.bg-slogan-title{font-size:clamp(2.2rem, 18vw, 6rem);padding:0 3vw}
}

/* Footer styles */
.site-footer{
	background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.08));
	color: #e6eef7;
	padding: 2rem 1rem 1rem;
	/* margen superior para separar el footer del contenido y colocarlo más abajo */
	margin-top:10rem;
	position:relative;
	z-index:1; /* above background */
}
.footer-inner{
	max-width:var(--max-width);
	margin:0 auto;
	display:flex;
	gap:2rem;
	align-items:flex-start;
	justify-content:space-between;
	flex-wrap:wrap;
}
.contact-info h4{margin:0 0 .5rem 0}
.contact-list{list-style:none;margin:0;padding:0}
.contact-item{margin:0 0 .375rem;color:#dfeef5}
.contact-item a{color:var(--accent);text-decoration:none}
.contact-item a:hover{text-decoration:underline}
.contact-edit-note{font-size:.85rem;color:rgba(255,255,255,0.45);margin-top:.5rem}

.contact-form{
	display:flex;
	gap:.5rem;
	flex-direction:column;
	min-width:220px;
	max-width:420px;
}
.contact-form input,
.contact-form textarea{
	padding:.6rem .8rem;
	border-radius:6px;
	border:1px solid rgba(255,255,255,0.08);
	background: rgba(255,255,255,0.02);
	color: #fff;
	font:inherit;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:rgba(255,255,255,0.45)}
.btn-send{
	padding:.6rem .9rem;
	border-radius:6px;
	border:0;
	background:var(--accent);
	color:#08304a;
	font-weight:700;
	cursor:pointer;
}
.btn-send:hover{opacity:.95}

.footer-note{max-width:var(--max-width);margin:1rem auto 0;text-align:center;color:rgba(255,255,255,0.35);font-size:.9rem}

/* Accessibility helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:720px){
	.footer-inner{flex-direction:column;align-items:stretch}
	.contact-form{width:100%}
}