:root{
  --brand:#ff9a00; --brand-dark:#f28a00; --ink:#121212; --muted:#667085; --ring:#e9eef5; --bg:#ffffff;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
h1{font-size:clamp(32px,6vw,64px);line-height:1.05;margin:0 0 16px;font-weight:900;letter-spacing:-.02em}
.lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted);margin:12px 0 24px}
.btn{display:inline-flex;gap:10px;align-items:center;font-weight:700;text-decoration:none;padding:14px 20px;border-radius:12px;border:1px solid var(--ring);background:#fff;box-shadow:0 1px 0 rgba(16,24,40,.04)}
.btn-primary{background:var(--brand);color:#fff;border-color:transparent}
.btn-primary:hover{background:var(--brand-dark)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--ring);font-size:12px}
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:1.1fr .9fr}
.card{border:1px solid var(--ring);border-radius:16px;padding:18px;background:#fff}
.kpis{display:grid;gap:12px;margin:12px 0}
.kpis li{display:flex;align-items:center;gap:10px;color:#1f2937}
.device{border-radius:24px;border:10px solid #111;box-shadow:0 15px 40px rgba(0,0,0,.12);overflow:hidden}
.hero-clean{background:linear-gradient(180deg,#fcfcff,transparent)}
.hero-gradient{background:radial-gradient(1200px 600px at 20% -10%, #fff7e7 0%, transparent 60%), linear-gradient(180deg, #fff, #fbfbff)}
.hero-center{text-align:center}
.hero-center .actions{justify-content:center}
.actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:960px){ .grid-2{grid-template-columns:1fr} .hero-center{text-align:left} .actions{justify-content:flex-start}}

/* ====== Refuerzos responsive ====== */
img{max-width:100%; height:auto; display:block}
.container{padding-left:16px; padding-right:16px}
@media(min-width:1280px){ .container{padding-left:20px; padding-right:20px} }

/* Grilla hero: apilar en móvil */
.grid-2{display:grid; gap:28px; grid-template-columns:1.1fr .9fr}
@media(max-width:960px){ .grid-2{grid-template-columns:1fr} }

/* Botones fluidos en móvil */
@media(max-width:480px){
  .btn{width:100%; justify-content:center}
}

/* Tipografía ligeramente mayor en desktop */
@media(min-width:1200px){
  h1{font-size:64px}
}

/* Margen inferior al header sticky para que no tape contenido */
.tqr-header + *{ scroll-margin-top:80px }