:root{

--primary:#1E3A5F;
--accent:#e74c3c;
--gold:#b08d57;
--bg:#f8fafc;
--white:#ffffff;

}

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

body{

font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
background:var(--bg);
color:#1e293b;
line-height:1.6;

}

/* HEADER */

.site-header{

background:#fff;
border-bottom:1px solid #e2e8f0;
position:sticky;
top:0;
z-index:9999;

}

.nav-container{

max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
position:relative;

}

.logo a{

font-weight:800;
color:var(--primary);
text-decoration:none;
font-size:20px;

}

#menu-toggle{
display:none;
}

.hamburguer{

display:flex;
flex-direction:column;
gap:5px;
cursor:pointer;

}

.hamburguer span{

width:25px;
height:3px;
background:var(--primary);
border-radius:2px;

}

.nav-menu{

position:absolute;
top:100%;
left:0;
width:100%;
background:white;
display:none;
flex-direction:column;
padding:20px;
list-style:none;
box-shadow:0 10px 15px rgba(0,0,0,0.05);

}

.nav-menu a{

display:block;
padding:12px 0;
text-decoration:none;
color:var(--primary);
font-weight:600;
border-bottom:1px solid #f5f5f5;

}

#menu-toggle:checked ~ .nav-menu{

display:flex;

}

/* HERO */

.hero{

background:linear-gradient(135deg,var(--primary) 0%,#0f172a 100%);
color:white;
padding:90px 20px;
text-align:center;

}

.hero h1{

font-size:clamp(28px,6vw,48px);
line-height:1.1;
margin-bottom:20px;
font-weight:800;

}

.hero p{

font-size:clamp(16px,2vw,20px);
opacity:0.9;
max-width:800px;
margin:auto;

}

/* CONTAINER */

.container{

max-width:900px;
margin:auto;
padding:60px 20px;

}

/* HERO IMAGE */

.hero-img{

width:100%;
border-radius:10px;
margin-bottom:40px;

}

/* TITLES */

h2{

font-size:28px;
margin-bottom:30px;
color:var(--primary);

}

h3{

font-size:18px;

}

/* FAQ */

.faq-item{

margin-bottom:35px;
padding-bottom:20px;
border-bottom:1px solid #e5e7eb;

}

.faq-item h3{

margin-bottom:10px;
font-weight:700;

}

.faq-item p{

color:#475569;

}

/* LINKS */

a{

color:var(--primary);

}

a:hover{

color:var(--accent);

}

/* FOOTER */

.site-footer{

background:#0f172a;
color:white;
padding:60px 20px;
text-align:center;

}

.site-footer p{

opacity:0.7;

}

/* RESPONSIVE */

@media (min-width:851px){

.hamburguer{
display:none;
}

.nav-menu{

position:static;
display:flex!important;
flex-direction:row;
width:auto;
background:none;
box-shadow:none;
padding:0;

}

.nav-menu a{

border:none;
padding:0 15px;

}

}
.hero-img{

width:100%;
height:auto;
border-radius:10px;
margin-bottom:40px;

}
/* BREADCRUMBS */

.breadcrumbs{

max-width:1100px;
margin:25px auto 0 auto;
padding:0 20px;
font-size:14px;
color:#64748b;

}

.breadcrumbs a{

text-decoration:none;
color:#1E3A5F;
font-weight:600;
transition:0.2s;

}

.breadcrumbs a:hover{

color:#e74c3c;

}

.breadcrumbs span{

color:#94a3b8;
font-weight:500;

}

/* separadores automáticos */

.breadcrumbs a::after{

content:"›";
margin:0 8px;
color:#94a3b8;

}

.breadcrumbs a:last-of-type::after{

display:none;

}
.casos-reales{

max-width:900px;
margin:60px auto;
padding:0 20px;

}

.casos-reales h2{

color:#1E3A5F;
font-size:28px;
margin-bottom:25px;
text-align:center;

}

.casos-reales p{

margin-bottom:15px;
color:#475569;

}

.casos-reales ul{

margin:15px 0 20px 20px;

}

.casos-reales li{

margin-bottom:6px;

}
.relacionados{

max-width:1000px;
margin:80px auto;
padding:0 20px;

}

.relacionados h2{

text-align:center;
font-size:28px;
color:#1E3A5F;
margin-bottom:40px;

}

.relacionados-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;

}

.relacionado-card{

background:#ffffff;
border:1px solid #e5e7eb;
border-radius:10px;
padding:20px;
text-decoration:none;
color:#1e293b;
transition:all .25s ease;

}

.relacionado-card:hover{

transform:translateY(-4px);
border-color:#b08d57;

}

.relacionado-card h3{

font-size:18px;
margin-bottom:10px;
color:#1E3A5F;

}

.relacionado-card p{

font-size:14px;
color:#475569;
margin-bottom:10px;

}

.relacionado-card span{

font-size:13px;
font-weight:600;
color:#b08d57;

}
.casos-reales{
margin-top:60px;
}

.caso-card{
background:#ffffff;
padding:28px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
margin-bottom:28px;
}

.caso-card h3{
margin-top:0;
color:#1E3A5F;
font-size:20px;
}

.caso-card p{
line-height:1.7;
margin-bottom:14px;
}