@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  --verde:#163226;
  --verde-2:#2C4F47;
  --dorado:#B4985D;
  --dorado-light:#CDB37E;
  --marfil:#FDFCFA;
  --marfil-2:#F5F1E8;
  --carbon:#222321;
  --carbon-soft:rgba(34,35,33,0.68);
  --radius:16px;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  font-family:'Montserrat', sans-serif;
  color:var(--carbon);
  background:var(--marfil);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{text-decoration:none;}

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

.eyebrow{
  text-transform:uppercase; letter-spacing:0.14em; font-size:12px;
  font-weight:600; color:var(--dorado); margin-bottom:14px;
}
.eyebrow.on-dark{color:var(--dorado-light);}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat', sans-serif; font-weight:600; font-size:14.5px;
  padding:14px 26px; border-radius:999px; cursor:pointer; border:none;
  transition:all .18s ease;
}
.btn-dorado{background:var(--dorado); color:var(--verde);}
.btn-dorado:hover{background:var(--dorado-light);}
.btn-outline-light{background:transparent; color:var(--marfil); border:1.5px solid rgba(253,252,250,0.45);}
.btn-outline-light:hover{border-color:var(--marfil); background:rgba(253,252,250,0.08);}
.btn-outline-dark{background:transparent; color:var(--verde); border:1.5px solid rgba(22,50,38,0.3);}
.btn-outline-dark:hover{border-color:var(--verde);}

/* ---------- nav ---------- */
.home-nav{
  display:flex; align-items:center; justify-content:flex-end;
  padding:26px 24px 0;
  max-width:1080px; margin:0 auto;
}
.btn-nav{padding:10px 24px; font-size:13.5px;}

/* ---------- hero (fondo verde) ---------- */
.hero{
  background:var(--verde); color:var(--marfil);
  padding-bottom:90px;
}
.hero-inner{
  max-width:1080px; margin:0 auto; padding:70px 24px 0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero-logo{height:190px; width:auto; margin-bottom:52px;}
.hero h1{
  font-size:40px; line-height:1.22; font-weight:700; max-width:720px;
  margin:0 0 20px; color:var(--marfil);
}
.hero .sub{
  font-size:17px; line-height:1.6; color:rgba(253,252,250,0.82);
  max-width:560px; margin:0 0 36px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

/* ---------- cómo funciona (fondo marfil) ---------- */
.section{padding:88px 24px;}
.section-head{text-align:center; max-width:640px; margin:0 auto 56px;}
.section-head h2{font-size:30px; font-weight:700; margin:0; color:var(--verde); line-height:1.3;}

.como-funciona-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
  max-width:1080px; margin:0 auto;
}
.func-card{
  background:var(--marfil-2); border-radius:var(--radius); padding:34px 32px;
  border:1px solid rgba(22,50,38,0.08);
}
.func-card .func-num{
  font-size:13px; font-weight:700; color:var(--dorado); letter-spacing:0.08em;
  margin-bottom:14px;
}
.func-card h3{font-size:20px; font-weight:700; color:var(--verde); margin:0 0 12px;}
.func-card p{font-size:15px; line-height:1.65; color:var(--carbon-soft); margin:0;}

/* ---------- para profesionales independientes (fondo marfil-2) ---------- */
.profesionales{background:var(--marfil-2);}
.profesionales-body{
  max-width:640px; margin:0 auto 44px; text-align:center;
  font-size:16px; line-height:1.7; color:var(--carbon-soft);
}
.profesionales-highlights{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:900px; margin:0 auto 44px;
}
.profesionales-highlights .highlight{
  border:1px solid rgba(22,50,38,0.1); background:var(--marfil);
}
.profesionales-highlights .highlight .h-title{color:var(--verde);}
.profesionales-highlights .highlight .h-text{color:var(--carbon-soft);}
.profesionales-cta{text-align:center;}

/* ---------- para empresas (fondo verde) ---------- */
.empresas{background:var(--verde); color:var(--marfil);}
.empresas .section-head h2{color:var(--marfil);}
.empresas-body{
  max-width:640px; margin:0 auto 44px; text-align:center;
  font-size:16px; line-height:1.7; color:rgba(253,252,250,0.85);
}
.empresas-highlights{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:900px; margin:0 auto;
}
.highlight{
  border:1px solid rgba(253,252,250,0.18); border-radius:var(--radius);
  padding:26px 20px; text-align:center;
}
.highlight .h-title{font-size:14.5px; font-weight:600; color:var(--dorado-light); margin-bottom:8px;}
.highlight .h-text{font-size:13.5px; line-height:1.55; color:rgba(253,252,250,0.78);}

/* ---------- cierre CTA (fondo marfil) ---------- */
.cierre{text-align:center;}
.cierre h2{font-size:30px; font-weight:700; color:var(--verde); margin:0 0 16px;}
.cierre p{font-size:16px; color:var(--carbon-soft); max-width:480px; margin:0 auto 34px; line-height:1.6;}

/* ---------- footer (fondo verde) ---------- */
.home-footer{
  background:var(--verde); padding:40px 24px 34px; text-align:center;
}
.home-footer .logo-mark{height:56px; width:auto; margin:0 auto 18px;}
.home-footer .copy{font-size:12.5px; color:rgba(253,252,250,0.55);}

@media (max-width:720px){
  .hero h1{font-size:30px;}
  .como-funciona-grid{grid-template-columns:1fr;}
  .empresas-highlights{grid-template-columns:1fr;}
  .profesionales-highlights{grid-template-columns:1fr;}
  .section{padding:64px 20px;}
}