:root{
  --navy:#1b2b6b;         /* azul Wix-like */
  --navy-2:#16255d;
  --text:#0d1b3d;
  --muted:#6a6f7a;
  --accent:#d51b2e;       /* rojo del “Inicio” */
  --card:#f4f4f4;
  --shadow:0 18px 50px rgba(0,0,0,.10);
  --max:1160px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial}
body{color:var(--text);background:#fff}

/* helpers */
.container{width:min(var(--max),92%);margin:0 auto}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-weight:500;letter-spacing:.2px;margin:0}
p{margin:0}

/* header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.header-inner{
  height:110px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand-box{
  width:120px;height:70px;
  border:5px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.brand-box span{font-size:34px;font-weight:700;color:var(--navy);line-height:1}

.nav{
  display:flex;
  gap:68px;
  align-items:center;
  justify-content:center;
  flex:1;
}
.nav-link{
  font-size:18px;
  color:var(--navy);
  font-weight:500;
}
.nav-link.is-active{color:var(--accent)}
.nav-link:hover{opacity:.85}

.burger{
  display:none;
  width:46px;height:46px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
}
.burger span{display:block;height:2px;background:#111;margin:6px 10px;border-radius:2px}

/* social rail */
.social-rail{
  position:fixed;
  right:28px;
  top:48%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:24px;
  z-index:60;
}
.social-rail a{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  color:#111;
}
.social-rail a:hover{opacity:.7}

/* hero */
.hero{
  position:relative;
  height:680px;
  overflow:hidden;
  background:#e9eef7;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.06) 100%),
    url("../img/hero.jpg") center/cover no-repeat;
  transform:scale(1.02);
}
.hero-caption{
  position:absolute;
  right:220px;
  top:140px;
  background:#e8e8e8;
  border:1px solid rgba(0,0,0,.15);
  padding:6px 10px;
  font-size:14px;
  color:#333;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.hero-title-card{
  position:absolute;
  right:220px;
  bottom:90px;
  width:min(740px,70vw);
  background:#f3f3f3;
  padding:56px 56px 46px;
  box-shadow:var(--shadow);
}
.hero-title-card h1{
  font-size:76px;
  line-height:0.98;
  color:var(--navy);
  font-weight:500;
}

/* services section */
.services-top{
  background:var(--navy);
  color:#fff;
  padding:64px 0 120px; /* espacio para cards superiores */
}
.services-head h2{
  font-size:56px;
  font-weight:500;
  margin-bottom:14px;
}
.services-head p{
  max-width:640px;
  opacity:.9;
  line-height:1.55;
}

/* grid cards */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:56px;
  align-items:stretch;
}
.cards-grid--top{ margin-top:58px; }

.svc-card{
  background:var(--card);
  color:#2a2a2a;
  padding:36px 34px 28px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  position:relative;
  min-height:300px;
}
.svc-card h3{
  font-size:28px;
  color:var(--navy);
  margin-bottom:16px;
  font-weight:500;
}
.svc-card p{
  color:#4a4a4a;
  line-height:1.7;
  font-size:15px;
  margin-bottom:18px;
}
.readmore{
  color:var(--accent);
  font-size:14px;
  font-weight:500;
}
.readmore:hover{opacity:.8}

/* “marco” atrás como en Wix */
.svc-card.has-frame::before{
  content:"";
  position:absolute;
  left:18px; top:18px;
  width:100%; height:100%;
  border:2px solid rgba(255,255,255,.55);
  z-index:-1;
}

/* bottom part */
.services-bottom{
  background:#fff;
  padding:80px 0 90px;
}
.services-bottom .svc-card{
  background:#f5f5f5;
}

/* plain sections */
.plain{
  padding:90px 0;
  background:#fff;
}
.plain-inner h2{
  color:var(--navy);
  font-size:44px;
  margin-bottom:14px;
  font-weight:500;
}
.plain-inner p{
  color:var(--muted);
  line-height:1.75;
  max-width:820px;
}

/* testimonials */
.testimonials{
  padding:90px 0 0;
  background:#fff;
  position:relative;
}
.testi-inner{ text-align:center; }
.testi-kicker{
  color:var(--navy);
  font-size:28px;
  margin-bottom:34px;
  font-weight:500;
}
.testi-stage{
  display:grid;
  grid-template-columns: 160px 1fr 160px;
  align-items:center;
  gap:10px;
}
.testi-quote{
  color:var(--navy);
  font-size:44px;
  line-height:1.25;
  font-weight:500;
  margin:0 auto 24px;
  max-width:920px;
}
.testi-name{
  color:var(--accent);
  font-size:20px;
  margin-top:8px;
}
.testi-role{
  color:var(--accent);
  font-size:18px;
  margin-top:6px;
}

.arrow{
  border:0;
  background:transparent;
  cursor:pointer;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}
.arrow:hover{opacity:.65}
.arrow .line{
  width:90px;height:2px;background:var(--navy);
  position:relative;
}
.arrow.left .line::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:16px;height:16px;
  border-left:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  transform:translateY(-50%) rotate(45deg);
}
.arrow.right .line::after{
  content:"";
  position:absolute;right:0;top:50%;
  width:16px;height:16px;
  border-right:2px solid var(--navy);
  border-top:2px solid var(--navy);
  transform:translateY(-50%) rotate(45deg);
}

.dots{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:38px;
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background:var(--navy);
  opacity:.25;
  cursor:pointer;
}
.dot.is-active{opacity:1}

.bottom-bar{
  height:12px;
  margin-top:70px;
  background:var(--navy);
}

/* footer */
.footer{
  background:#fff;
  padding:22px 0 34px;
}
.footer-inner{
  color:#6b6f7a;
  font-size:13px;
  text-align:center;
}

/* responsive */
@media (max-width: 1100px){
  .nav{gap:26px}
  .hero-title-card{right:8%; width:min(740px,82vw)}
  .hero-title-card h1{font-size:62px}
  .hero-caption{right:8%}
}
@media (max-width: 980px){
  .header-inner{height:90px}
  .brand-box{width:110px;height:60px}
  .brand-box span{font-size:30px}

  .burger{display:inline-block}
  .nav{
    position:fixed;
    top:96px;
    left:16px; right:16px;
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    border-radius:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.10);
    padding:12px;
    display:none;
    flex-direction:column;
    gap:12px;
  }
  .nav.is-open{display:flex}

  .social-rail{right:14px}
  .hero{height:560px}
  .hero-title-card{padding:34px 28px 28px}
  .hero-title-card h1{font-size:48px}
  .cards-grid{grid-template-columns:1fr;gap:24px}
  .svc-card.has-frame::before{display:none}

  .testi-stage{grid-template-columns:1fr;gap:18px}
  .arrow{display:none}
  .testi-quote{font-size:30px}
}