:root{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#22c55e;   /* verde primario */
  --brand-2:#16a34a; /* hover/activo */
  --accent:#f59e0b;
  --danger:#ef4444;
  --ok:#10b981;
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);color:var(--text)
}
a{color:var(--brand);text-decoration:none}
.muted{color:var(--muted);font-size:14px}

/* Layout helpers */
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* Nav / Header */
.nav{
  padding:12px 0;
  border-bottom:1px solid #1e293b;
  background:linear-gradient(180deg, rgba(17,24,39,0.6), rgba(17,24,39,0))
}
.nav-inner{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:10px;align-items:center}
.logo{height:108px;filter:drop-shadow(0 0 8px #22c55e)}
.cta{
  color:#d1fae5;border:1px solid #14532d;padding:8px 12px;border-radius:12px;
  background:rgba(20,83,45,.18)
}
.cta:hover{background:rgba(20,83,45,.32)}

/* Hero */
.hero{padding:0}
.hero-content{
  display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;
  margin:24px auto;padding:24px 0
}
.hero-text h1{font-size:44px;margin:0 0 8px}
.hero-text p{color:var(--muted);font-size:18px}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.badges span{
  background:#0b1227;border:1px solid #1a2340;padding:6px 10px;border-radius:999px;color:#cbd5e1
}

/* Botón primario */
.primary{
  display:inline-block;background:var(--brand);color:#062512;font-weight:600;
  border-radius:12px;padding:12px 18px;border:0;cursor:pointer
}
.primary:hover{background:var(--brand-2)}

/* Slider (derecha del héroe) */
.hero-art{position:relative}
.slider{
  position:relative;border-radius:18px;overflow:hidden;border:1px solid #1f2937;
  min-height:280px;
  background:radial-gradient(120% 100% at 50% 0%, #0b1227 0%, #0a1222 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.45)
}
.slider img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;
  z-index:0;               /* asegura orden de apilado */
  will-change:opacity;     /* evita repintados raros */
  pointer-events:none;
}
.slider img.active{opacity:1; z-index:1;}

/* Features */
/* ==== Features ¡ª carrusel horizontal ==== */
.features{ --gap:16px; --perView:4; position:relative; margin:32px auto; }
.features-viewport{ overflow:hidden; }
.features-rail{ display:flex; gap:var(--gap); will-change:transform; transition:transform .5s ease; }

/* 4 visibles en escritorio; 2 en tablets; 1 en m¨®vil */
.features .card{
  flex:0 0 calc((100% - (var(--gap) * (var(--perView) - 1))) / var(--perView));
  background:var(--card); border:1px solid #1f2937; border-radius:16px;
  padding:16px; text-align:center;
}

.card .thumb{
  height:110px; border-radius:12px; overflow:hidden;
  background:#0b1227; border:1px solid #1f2937; margin-bottom:8px;
  display:block;
}
.card .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

@media (max-width:900px){ .features{ --perView:2; } }
@media (max-width:600px){ .features{ --perView:1; } }

/* Iconos dentro de la tarjeta (SVG inline) */
.card svg{ height:100px; width:auto; margin-bottom:8px; display:inline-block; }

/* Flechas de navegaci¨®n */
.features-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; line-height:34px; text-align:center; font-size:22px;
  border-radius:999px; border:1px solid #1f2937; background:#0b1227; color:#e5e7eb;
  box-shadow:0 6px 20px rgba(0,0,0,.35); cursor:pointer; user-select:none;
}
.features-nav:hover{ background:#0f1a2f; }
.features-nav.prev{ left:-6px; }
.features-nav.next{ right:-6px; }

/* (mant¨¦n tus estilos .card h3, .card p, etc. Si no los tienes, estos funcionan) */
.card h3{ margin:8px 0 6px; }
.card p{ margin:0; color:var(--muted); }

/* Formulario */
.form-section{margin:40px auto}
.lead-form{
  background:var(--card);border:1px solid #1f2937;border-radius:16px;padding:16px;display:grid;gap:12px
}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid > div{display:flex;flex-direction:column;gap:6px}
label{color:#cbd5e1;font-size:14px}
input,textarea{
  background:#0b1227;border:1px solid #1a2340;border-radius:10px;padding:10px;color:#e5e7eb
}
input:focus, textarea:focus{outline:2px solid #2b4f40;border-color:#2b4f40}
.role{display:flex;gap:16px}
.chips{display:flex;gap:12px;flex-wrap:wrap}
.hp{display:none!important}
.hidden{display:none}

/* Footer */
.footer{
  margin:24px 0;padding:16px 0;border-top:1px solid #1f2937;color:#9aa3b2
}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* Center utility + docs */
.center{display:grid;place-items:center;min-height:80vh}
.box{
  background:var(--card);border:1px solid #1f2937;border-radius:16px;padding:24px;max-width:560px;text-align:center
}
.doc .container{
  margin:40px auto;background:var(--card);border:1px solid #1f2937;border-radius:16px;padding:24px
}

/* Responsive */
@media (max-width:900px){
  .hero-content{grid-template-columns:1fr}
  .features{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
}