/* ====== Variables & Reset (Black/Red theme) ====== */
:root{
  --bg:#0a0a0a;
  --card:#151515;
  --alt:#0e0e0e;
  --text:#f1f1f1;
  --muted:#c4c4c4;
  --brand:#e31b23;    /* vivid red */
  --brand-2:#8b0000;  /* dark red */
  --stroke:#2a2a2a;
  --container:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(227,27,35,.20), transparent),
    radial-gradient(800px 700px at 100% 10%, rgba(139,0,0,.18), transparent),
    linear-gradient(#0a0a0a,#0a0a0a 60%,#0a0a0a);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.row{display:flex;gap:16px}
.between{justify-content:space-between}
.center{align-items:center}
.wrap{flex-wrap:wrap}
.nowrap{white-space:nowrap}

/* ====== Header ====== */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--stroke);
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.2px}
.brand img{height:32px;width:auto;border-radius:4px}
.brand span{font-size:1.1rem}
.brand.small img{height:24px}
.nav{display:flex;gap:1.2rem}
.nav a{padding:.9rem .2rem;color:var(--muted)}
.nav a:hover{color:var(--text)}
.hamburger{display:none;background:transparent;border:0;color:var(--text);font-size:1.6rem}

@media (max-width:900px){
  .nav{display:none;position:absolute;top:64px;right:16px;flex-direction:column;background:#111;border:1px solid var(--stroke);border-radius:12px;padding:8px;min-width:220px}
  .nav.open{display:flex}
  .hamburger{display:block}
}

/* ====== Buttons ====== */
.btn{display:inline-block;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--stroke);font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border:0}
.btn.ghost{background:transparent;color:var(--text)}
.note{margin:16px 0;padding:12px 14px;border:1px dashed var(--stroke);border-radius:10px;color:#ddd}

/* ====== Hero ====== */
.hero{padding:64px 0;background:
  radial-gradient(600px 300px at 20% 0, rgba(227,27,35,.22), transparent),
  radial-gradient(500px 300px at 80% 10%, rgba(139,0,0,.18), transparent);
}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:32px}
.hero h1{font-size:clamp(30px, 4vw, 48px);line-height:1.1;margin:0 0 8px;font-weight:900}
.hero p{color:var(--muted);margin:0 0 16px;max-width:60ch}
.cta{display:flex;gap:12px;margin:12px 0 8px}
.bullets{list-style:none;padding:0;margin:16px 0 0;color:#e1e1e1}
.bullets li{margin:.2rem 0}
.hero__art{display:flex;justify-content:center;align-items:center}
.hero__art img{border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.4)}

@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* ====== Sections ====== */
.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.section h2{font-size:28px;margin:0 0 20px}
.cards{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.grid-3{grid-template-columns:1fr}}

/* ====== Card ====== */
.card{
  background:linear-gradient(180deg,#121212,#0f0f0f);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.card h3{margin:10px 0 6px}
.card .mini{color:#ddd;margin:.5rem 0 0 1rem}

/* ====== Splits / Panels ====== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.split.two{grid-template-columns:1fr 1fr}
.panel{border:1px solid var(--stroke);border-radius:16px;padding:16px;background:#101010}

/* ====== CTA banner ====== */
.cta-banner{
  padding:36px 0;
  background:linear-gradient(90deg, rgba(227,27,35,.18), rgba(139,0,0,.12));
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.contact-form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.contact-form input,.contact-form textarea{
  background:#111;border:1px solid var(--stroke);border-radius:10px;
  padding:.8rem 1rem;color:var(--text);min-width:220px;width:100%;
}

/* ====== Lists ====== */
.list{margin:0;padding-left:18px}
.list li{margin:.3rem 0}

/* ====== Footer ====== */
.footer{padding:28px 0;background:#0a0a0a;border-top:1px solid var(--stroke)}
.copy{color:#bbb}


/* Mini banners debajo de cada servicio */
.svc-img{
  display:block;
  width:100%;
  max-height:140px;
  object-fit:cover;
  border-radius:10px;
  margin-top:10px;
  border:1px solid var(--stroke);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}