/* ================================
RESET
================================ */

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

body{
font-family:'Inter','Poppins',sans-serif;
background:#F8FAFC;
color:#1F2937;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}

a{
text-decoration:none;
color:inherit;
}

img{
max-width:100%;
display:block;
}

/* ================================
VARIABLES (DESIGN SYSTEM)
================================ */

:root{

--primary:#1F6FE5;
--primary-dark:#114ABF;

--accent:#F47A2A;

--bg:#F8FAFC;
--card:#FFFFFF;

--text:#1F2937;
--text-light:#6B7280;

--radius:12px;

--shadow-sm:0 4px 12px rgba(0,0,0,.05);
--shadow-md:0 8px 20px rgba(0,0,0,.08);
--shadow-lg:0 12px 25px rgba(0,0,0,.12);

}

/* ================================
LAYOUT
================================ */

.container{
width:90%;
max-width:1200px;
margin:auto;
padding:0 1em;
}

section{
padding:4em 0;
}

h1{
font-size:2rem;
margin-bottom:1em;
}

h2{
font-size:1.8rem;
margin-bottom:1em;
text-align:center;
}

h3{
margin-bottom:.5em;
}

p{
margin-bottom:1em;
text-align:center;
color:var(--text-light);
}

/* ================================
CARDS
================================ */

.card{
background:var(--card);
padding:2em;
border-radius:16px;
text-align:center;
box-shadow:var(--shadow-sm);
transition:.25s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-md);
}

/* ================================
BOTONES
================================ */

button{
border:none;
cursor:pointer;
font-family:inherit;
}

.btn-primary{
background:var(--primary);
color:white;
padding:.8em 1.6em;
border-radius:8px;
font-weight:600;
transition:.25s;
display:inline-block;
}

.btn-primary:hover{
background:var(--primary-dark);
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(31,111,229,.25);
}

.btn-secondary{
border:2px solid var(--primary);
color:var(--primary);
padding:.7em 1.4em;
border-radius:8px;
font-weight:600;
transition:.25s;
display:inline-block;
}

.btn-secondary:hover{
background:var(--primary);
color:white;
}

.btn-large{
font-size:1.2rem;
padding:1em 2em;
}

/* ================================
INPUTS / FORMS
================================ */

input,
textarea,
select{

width:100%;
padding:12px 14px;

border:1px solid #1F6FE5;
border-radius:10px;

font-size:14px;

background:white;

}

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

outline:none;
border-color:var(--primary);
box-shadow:0 6px 14px rgba(31,111,229,.25);

transform:translateY(-1px);

}

input:hover,
select:hover{

border-color:#114ABF;

}

label{
font-weight:600;
margin-bottom:6px;
display:block;
}

/* ================================
NAVBAR
================================ */

.navbar{
background:white;
position:sticky;
top:0;
z-index:1000;
box-shadow:var(--shadow-sm);
}

.navbar-container{
display:flex;
align-items:center;
justify-content:space-between;
padding:.8em 0;
}

.logo img{
height:60px;
width:auto;
}

.nav-links{
display:flex;
align-items:center;
}

.nav-links a{
margin:0 1em;
font-weight:600;
}

.nav-buttons{
display:flex;
align-items:center;
}

.nav-buttons a{
margin-left:1em;
}

/* ================================
HAMBURGER
================================ */

.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
width:30px;
}

.hamburger span{
height:3px;
width:100%;
background:var(--primary);
margin:4px 0;
border-radius:2px;
}

/* ================================
SITE BANNER
================================ */

#construction-banner{

width:100%;
background:#ffb020;

color:#1a1a1a;

text-align:center;
padding:10px;

font-weight:600;
font-size:14px;

}

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

footer{
background:white;
padding:2em 0;
box-shadow:0 -2px 6px rgba(0,0,0,.05);
}

.footer-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
align-items:center;
}

.footer-links a{
margin:0 1em;
}

.socials a{
margin-left:1em;
font-size:1.2rem;
}

/* ================================
RESPONSIVE
================================ */

@media(max-width:900px){

.navbar-container{
flex-wrap:wrap;
}

.nav-links,
.nav-buttons{
display:none;
flex-direction:column;
width:100%;
text-align:center;
gap:12px;
margin-top:10px;
}

.nav-links.active,
.nav-buttons.active{
display:flex;
}

.logo{
order:1;
}

.hamburger{
display:flex;
order:2;
margin-left:auto;
}

.nav-links{
order:3;
}

.nav-buttons{
order:4;
}

.footer-container{
flex-direction:column;
text-align:center;
gap:1em;
}

}

@media(max-width:600px){

body{
font-size:14px;
}

h1{
font-size:1.5rem;
}

h2{
font-size:1.5rem;
}

.btn-primary,
.btn-secondary{
font-size:.9rem;
padding:10px 16px;
}

.btn-large{
font-size:.95rem;
padding:12px 18px;
}

}

.socials a {
  font-size: 22px;
  margin: 0 10px;
  color: #333;
  transition: 0.3s;
}

.socials a:hover {
  color: #1F6FE5; /* o tu color de marca */
}