/* RMH Soft – estilos rápidos, sin dependencias */
:root{
  --bg:#0f172a;            /* Un azul oscuro más vibrante */
  --card:#1e293b;
  --text:#e8ebf1;
  --muted:#b6bdc8;
  --brand:#3b82f6;
  --brand-2:#22c55e;
  --maxw:1100px;
  --radius:16px;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  background-color: var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
a{color:var(--brand);text-decoration:none}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.4rem,3vw,2rem); margin-bottom:.75rem}
h3{font-size:1.1rem}

.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(8,10,15,.75); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center}
.nav a{margin-left:1rem;color:var(--muted)}
.nav a:hover{color:var(--text)}

.hero {
  position: relative;
  padding: 96px 0 64px;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(800px 300px at 10% 10%, rgba(103,184,255,.15), transparent),
    radial-gradient(800px 300px at 90% 0%, rgba(135,255,167,.12), transparent);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
  overflow: hidden;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background-image: url(assets/logo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.04;
  z-index: -1;
  animation: rotate 120s linear infinite;
}

.hero .lead{color:var(--muted);max-width:800px}
.br-md{display:none}
.cta{display:flex;gap:.8rem;margin:1rem 0 1.25rem}
.btn{
  display:inline-block; border:1px solid rgba(255,255,255,.2);
  padding:.7rem 1rem; border-radius:999px; color:var(--text); background:transparent;
  transition:.2s; box-shadow:none;
}
.btn:hover{border-color:rgba(255,255,255,.35); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color: var(--bg); border:0; box-shadow: var(--shadow)}

.pill-list{display:flex;flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0}
.pill-list li{
  border:1px solid rgba(255,255,255,.12); padding:.4rem .6rem; border-radius:999px; color:var(--muted);
}

.section{padding:40px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%)}
.grid{display:grid; gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)
}
.projects{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.project{
  padding:16px; border-radius:var(--radius);
  border:1px dashed rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
}

.contact-list{list-style:none; padding:0}
.contact-list li{margin-bottom:.35rem}

.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:32px; padding:20px 0; color:var(--muted)
}

/* Responsive tweaks */
@media (min-width: 760px){
  .br-md{display:inline}
  .hero{padding:96px 0 32px}
}