:root {
  --bg: #060b12;
  --surface: #0e1622;
  --text: #ebf3ff;
  --muted: #b5c3d6;
  --accent: #4db2ff;
  --accent-2: #7de2d1;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
.container { width: min(1120px, 92vw); margin: 0 auto; }
.hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #08121c 0%, #0b1725 60%, #08121c 100%); border-bottom: 1px solid #1a2f46; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 48px 48px; opacity: .16; animation: drift 24s linear infinite; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(48px); } }
.overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 90%, rgba(77,178,255,.12), transparent 40%); pointer-events: none; }
.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; position: relative; z-index: 2; }
.brand { display:flex; align-items:center; color: var(--text); text-decoration: none; }
.brand img { max-width: 260px; height: auto; opacity: .98; }
.nav-cta { display: flex; gap: .75rem; }
.hero-content { position: relative; z-index: 2; padding: 5rem 0 6rem; max-width: 880px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; color: var(--accent-2); font-size: .78rem; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; margin: .3rem 0 1rem; }
.subhead { color: var(--muted); font-size: clamp(1rem, 2vw, 1.2rem); max-width: 72ch; }
.cta-group { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.5rem; }
.btn { display: inline-block; padding: .7rem 1.1rem; border-radius: .6rem; text-decoration: none; font-weight: 600; border: 1px solid transparent; }
.btn-primary { background: #2CCB72; color: #052015; }
.btn-secondary { border-color: #35506c; color: var(--text); }
.section { padding: 4rem 0; }
.section-dark { background: #09121d; }
h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); margin-bottom: 1.25rem; }
.grid { display: grid; gap: 1rem; }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); justify-content: center; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { background: var(--surface); padding: 1.1rem; border-radius: .75rem; border: 1px solid #1d3045; }
.card h3 { margin-top: 0; }
.card p, .card li { color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.metrics div { background: var(--surface); padding: 1.2rem; border-radius: .75rem; border: 1px solid #1d3045; }
.metrics strong { display: block; font-size: 1.65rem; color: var(--accent-2); }
.tags { display: flex; flex-wrap: wrap; gap: .7rem; }
.tags span { background: #102031; border: 1px solid #1f3b56; padding: .45rem .7rem; border-radius: 999px; }
details { background: var(--surface); border: 1px solid #1d3045; border-radius: .7rem; padding: .85rem 1rem; margin-bottom: .6rem; }
summary { cursor: pointer; font-weight: 600; }
.contact { text-align: center; }
.footer { border-top: 1px solid #1a2f46; padding: 1.25rem 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 720px) { .nav-cta { display:none; } }

.section-lead{color:var(--muted);max-width:70ch;margin-bottom:1rem;}
.icon{font-size:1.3rem;margin-bottom:.3rem}
.visual{position:relative;overflow:hidden}
.visual::after{content:"";position:absolute;inset:auto -10% -35% -10%;height:80px;background:radial-gradient(circle, rgba(77,178,255,.25), transparent 70%);}

.centered-grid{max-width:960px;margin:0 auto;}
#soluciones .cards-2{max-width:960px;margin:0 auto;}