:root {
  --navy:#1C3149;
  --navy2:#2C4763;
  --gray:#87898A;
  --light:#F1F4F7;
  --text:#2B3440;
  --line:#E4E8ED
}

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

html {
  scroll-behavior:smooth
}

body {
  font-family:'Inter',-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:#fff
}

h1,h2,h3 {
  font-family:'Playfair Display',Georgia,serif;
  color:var(--navy);
  line-height:1.15
}

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

.wrap {
  max-width:1120px;
  margin:0 auto;
  padding:0 24px
}

.btn {
  display:inline-block;
  background:var(--navy);
  color:#fff;
  padding:14px 26px;
  border-radius:8px;
  font-weight:600;
  font-size:15px;
  transition:.2s;
  border:2px solid var(--navy)
}

.btn:hover {
  background:#16283b
}

.btn.ghost {
  background:transparent;
  color:var(--navy)
}

.btn.ghost:hover {
  background:var(--light)
}

.btn.wa {
  background:#25D366;
  border-color:#25D366
}

.btn.wa:hover {
  background:#1eb457
}

/* header */
header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)
}

.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px
}

.nav img {
  height:54px
}

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

.nav .links a {
  font-size:15px;
  font-weight:500;
  color:var(--navy)
}

.nav .links a:hover {
  color:var(--gray)
}

/* hero */
.hero {
  padding:88px 0 72px;
  text-align:center
}

.hero h1 {
  font-size:clamp(34px,5vw,56px);
  max-width:16ch;
  margin:0 auto 22px
}

.hero p.lead {
  font-size:clamp(16px,2vw,20px);
  color:var(--text);
  max-width:60ch;
  margin:0 auto 34px
}

.hero .cta {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap
}

/* stats */
.stats {
  background:var(--navy);
  color:#fff
}

.stats .wrap {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 56px;
  padding:38px 24px;
  text-align:center
}

.stat b {
  font-family:'Playfair Display',serif;
  font-size:30px;
  color:#fff;
  display:block;
  line-height:1.1
}

.stat span {
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#AEB8C4
}

/* sections */
section.pad {
  padding:76px 0
}

.eyebrow {
  text-align:center;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gray);
  margin-bottom:10px
}

h2.center {
  text-align:center;
  font-size:clamp(28px,4vw,40px);
  margin-bottom:14px
}

.sub {
  text-align:center;
  color:var(--gray);
  max-width:60ch;
  margin:0 auto 46px
}

/* services grid */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px
}

.card {
  background:var(--light);
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px
}

.card h3 {
  font-size:21px;
  margin-bottom:10px
}

.card p {
  color:var(--gray);
  font-size:15px
}

/* cobertura */
.cobs {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;
  text-align:center
}

.cob {
  padding:34px 20px;
  border:1px solid var(--line);
  border-radius:14px
}

.cob h3 {
  font-size:26px;
  margin-bottom:6px
}

.cob span {
  color:var(--gray);
  font-size:14px
}

/* compromisos */
.commits {
  background:var(--navy)
}

.commits .wrap {
  padding:76px 24px
}

.commits h2,.commits .eyebrow {
  color:#fff
}

.commits h2 {
  text-align:center;
  font-size:clamp(28px,4vw,40px);
  margin-bottom:46px;
  color:#fff
}

.clist {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px 48px
}

.commit {
  display:flex;
  gap:20px
}

.commit .num {
  font-family:'Playfair Display',serif;
  font-size:34px;
  color:var(--navy2);
  font-weight:700;
  line-height:1
}

.commit h3 {
  color:#fff;
  font-size:19px;
  margin-bottom:4px
}

.commit p {
  color:#AEB8C4;
  font-size:15px
}

/* contacto */
.contact {
  text-align:center
}

.contact .rows {
  display:inline-flex;
  flex-direction:column;
  gap:14px;
  margin:8px 0 34px;
  text-align:left
}

.contact .row {
  font-size:17px
}

.contact .row b {
  color:var(--navy);
  display:inline-block;
  min-width:150px
}

/* footer */
footer {
  background:var(--navy);
  color:#AEB8C4;
  text-align:center;
  padding:54px 24px
}

footer img {
  height:110px;
  margin-bottom:18px
}

footer .tag {
  font-style:italic;
  color:#C7D0DA;
  margin-bottom:18px
}

footer .fine {
  font-size:13px;
  color:#7f8ea0;
  margin-top:16px
}

.wrap.narrow {
  max-width:620px
}

.cform {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0 auto 26px;
  text-align:left
}

.cform .frow {
  display:flex;
  gap:14px
}

.cform .frow>* {
  flex:1;
  min-width:0
}

.cform input,.cform textarea {
  width:100%;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
  font-size:15px;
  background:#fff;
  color:var(--text)
}

.cform input:focus,.cform textarea:focus {
  outline:none;
  border-color:var(--navy)
}

.cform button {
  align-self:center;
  cursor:pointer
}

.cform .hp {
  position:absolute;
  left:-9999px
}

.alt {
  color:var(--gray);
  font-size:15px;
  margin-bottom:18px
}

.alt .btn {
  margin-left:12px;
  vertical-align:middle;
  padding:11px 22px
}

.cinfo {
  color:var(--gray);
  font-size:13px;
  line-height:1.8
}

@media(max-width:520px) {
  .cform .frow {
  flex-direction:column
}


}

@media(max-width:760px) {
  .nav .links a:not(.btn) {
  display:none
}

.clist {
  grid-template-columns:1fr;
  gap:26px
}

.contact .row b {
  display:block;
  min-width:0
}


}