:root{
  --burdeos: #8C1D40;
  --turquesa: #009688;
  --gris-claro: #F5F5F5;
  --gris-oscuro: #333333;
  --max-width: 1100px;
}

*{box-sizing:border-box}
body{font-family: 'Open Sans', sans-serif; margin:0; color:var(--gris-oscuro); background:#fff;}
.container{max-width:var(--max-width); margin:0 auto; padding:40px 20px;}

.site-header{background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:1000;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:15px 20px;}
.logo{height:56px;}
.main-nav a{margin:0 12px; text-decoration:none; color:var(--gris-oscuro); font-weight:600;}
.btn-primary{background:var(--burdeos); color:#fff; padding:10px 18px; border-radius:30px; text-decoration:none; display:inline-block;}

.hero{height:60vh; background-image: url('assets/mockup-homepage.png'); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center;}
.hero-overlay{background:rgba(0,0,0,0.45); width:100%; text-align:center; padding:80px 20px;}
.hero h1{font-family:'Montserrat',sans-serif; color:#fff; font-size:2.4rem; margin:0 0 16px;}

.section{padding:60px 0;}
.section--alt{background:var(--gris-claro); padding:40px 0;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start;}
.icons-row{display:flex; gap:18px; flex-wrap:wrap; margin-top:20px;}
.icon{flex:1 1 45%; text-align:center;}
.icon-figure{width:70px; height:70px; border-radius:50%; border:3px solid var(--turquesa); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-size:1.4rem; color:var(--turquesa);}

.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px;}
.service-card{background:#fff; border-radius:10px; padding:20px; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,0.05);}
.service-icon{font-size:36px; margin-bottom:8px; color:var(--turquesa);}

.projects-gallery{display:flex; gap:20px; align-items:center;}
.projects-gallery img{width:50%; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,0.08);}
.project-meta{max-width:40%;}

.team-card{display:flex; gap:20px; align-items:center;}
.team-photo{width:160px; border-radius:8px; object-fit:cover;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start;}
.contact-form label{display:block; margin-bottom:10px;}
.contact-form input, .contact-form textarea{width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; font-size:0.95rem; margin-top:6px;}

.site-footer{background:#fff; border-top:1px solid #eee; padding:20px 0; margin-top:40px;}
.footer-inner{display:flex; gap:20px; align-items:center; justify-content:space-between;}
.logo-small{height:36px;}

@media (max-width:900px){
  .two-col{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .projects-gallery{flex-direction:column;}
  .hero h1{font-size:1.6rem;}
}