:root{
  --bg-1:#0f1a2b;
  --card:#101a2b;
  --text:#e9eef7;
  --muted:#b8c3d6;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.25);

  /* Colores de marca */
  --brand-1: #256644; /* verde */
  --brand-2: #154A7C; /* azul */
  --brand-3: #4A84B6; /* celeste */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:#0e1524;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Fondo degradado */
.bg{
  position:fixed; inset:0; z-index:-1;
  background:radial-gradient(1200px 600px at 15% 10%, #ffffff0a, transparent 60%),
             radial-gradient(1100px 600px at 85% 90%, #ff6ea70f, transparent 60%),
             linear-gradient(160deg, #e43d6a22, #1a2742 40%, #0d1322 70%);
  filter:saturate(110%);
}

/* Contenedor */
.wrap{width:100%; max-width:740px; margin:32px auto 64px; padding:0 18px}

/* Tarjeta hero superior */
.card{
  background:linear-gradient(180deg,#111b2e,#0c1424);
  border:1px solid #1d2a45;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}
.hero{ text-align:center; margin-bottom:14px; }
.logo{width:220px; height:auto; display:block; margin:0 auto 10px}
.mini-social{display:flex; gap:10px; justify-content:center; margin-top:14px}
.mini-social .is{
  width:34px; height:34px; display:grid; place-items:center;
  background:#0d1729; border:1px solid #1c2945; border-radius:10px;
  transition:transform .2s ease, background .2s ease;
}
.mini-social .is:hover{transform:translateY(-2px); background:#14213a}
.mini-social svg{width:18px; height:18px; fill:#b8c3d6}

/* ----------- BLOQUES EN CAJAS ----------- */
.box{
  background:linear-gradient(180deg,#101b2d,#0c1526);
  border:1px solid #1d2a45;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  padding:26px;
  margin:16px 0;
}
.hero2 h2{margin:0 0 10px; font-size:28px; line-height:1.15}
.hero2 .lead{margin:0; color:#b8c3d6}

/* Lista / grid de servicios */
.boxlist{display:grid; gap:12px; margin:16px 0}

/* Tarjeta compacta con icono centrado */
.svc-card{
  display:flex;
  gap:12px;
  align-items:center;              /* centra verticalmente todo */
  padding:14px 16px;               /* más compacta */
  border-radius:14px;
  border:1px solid transparent;
  transition:transform .15s ease, border-color .15s ease, background .15s;
}

/* Alternancia de colores */
.svc-card:nth-child(3n+1){ background: var(--brand-1); }
.svc-card:nth-child(3n+2){ background: var(--brand-2); }
.svc-card:nth-child(3n+3){ background: var(--brand-3); }

/* Cuadro del icono */
.svc-card .ico{
  flex:0 0 42px;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:20px;
  line-height:1;
}

/* Textos de la tarjeta */
.svc-card h3{
  margin:0 0 4px;
  font-size:16px;
  line-height:1.25;
  color:#fff;
}
.svc-card p{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:#ffffffd9;
}

/* Hover suave */
.svc-card:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

@media (min-width:720px){
  .boxlist{grid-template-columns:1fr 1fr}
}

/* CTA grande */
.cta{display:grid; gap:18px}
@media (min-width:780px){ .cta{grid-template-columns:1.1fr .9fr; align-items:center} }
.cta-left .bullets{list-style:none; padding:0; margin:10px 0 0}
.cta-left .bullets li{margin:6px 0; color:#c7d4ea}

.btn{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:14px;
  border:1px solid #223153;
  background:linear-gradient(180deg,#10203a,#0c1a2e);
  color:var(--text); text-decoration:none; font-weight:600;
  box-shadow:var(--shadow);
  transition:transform .15s ease, filter .15s ease, border-color .15s;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.08); border-color:#2b4170}
.btn .icon svg{width:20px; height:20px; fill:#9fbbda}

/* si usas <i> de Font Awesome dentro del botón */
.btn .icon i{
  font-size:20px;
  line-height:1;
  color:#cceadf;
}

.btn.big{
  justify-content:center; font-size:16px; padding:16px 18px; width:100%;
  background:linear-gradient(180deg,#173b2b,#0d251b); border-color:#275b45
}
.btn.big .icon svg{fill:#cceadf}

.cta-data{margin-top:12px; color:#c5d3ea}
.cta-data a{color:#cfe2ff; text-decoration:none}
.cta-data a:hover{text-decoration:underline}

/* Redes CTA */
.cta-social{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.cta-social .is{
  width:36px; height:36px; display:grid; place-items:center;
  background:#0d1729; border:1px solid #1c2945; border-radius:10px;
}
.cta-social .is svg{width:18px; height:18px; fill:#b8c3d6}
.cta-social .is i{font-size:18px; color:#c7d4ea} /* si usas <i> */

/* Footer */
.footer{margin:22px 0; text-align:center; color:#9db4d3}

/* Font Awesome en header/CTA */
.mini-social .is i,
.cta-social .is i{
  font-size:18px;
  color:#c7d4ea;
}