/* Operix — hoja de estilo de las guías.
 *
 * Compartida por todas las páginas de /guias/. Deliberadamente chica y sin dependencias:
 * la home tiene ~1.500 líneas de CSS que sirven para una landing con mockups animados, y
 * un artículo no necesita nada de eso. Lo que sí comparte son las variables de marca, que
 * son las mismas de public/index.html (--ink, --blue, --cream, --border).
 *
 * POR QUÉ EXISTEN ESTAS PÁGINAS: hasta el 28/08 el sitemap tenía 3 URLs (home, precios,
 * registro). Google solo puede rankear páginas que existan, y con tres no hay superficie.
 * Cada guía apunta a UNA búsqueda con forma de problema — no a "ERP" ni a "software de
 * gestión", donde la pelea está perdida contra dominios con años de autoridad.
 */
:root{
  --ink:#111111; --cream:#F7F7F5; --blue:#2563EB; --blue-dark:#1d4ed8; --blue-light:#EFF6FF;
  --muted:#6B7280; --border:#E5E3DC; --max:720px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
  font-size:18px; line-height:1.68; -webkit-font-smoothing:antialiased;
}

/* ── barra ── */
.top{ border-bottom:1px solid var(--border); background:#fff; position:sticky; top:0; z-index:10; }
.top-in{ max-width:var(--max); margin:0 auto; padding:14px 22px;
         display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lock{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
.lock svg{ width:26px; height:26px; display:block; }
.lock span{ font-size:19px; font-weight:800; letter-spacing:-.4px; }
.lock i{ font-style:normal; color:var(--blue); }
.top a.cta{ font-size:14px; font-weight:600; color:#fff; background:var(--ink);
            padding:9px 16px; border-radius:8px; text-decoration:none; white-space:nowrap; }
.top a.cta:hover{ background:var(--blue); }

/* ── artículo ── */
main{ max-width:var(--max); margin:0 auto; padding:0 22px 64px; }
.migas{ font-size:13px; color:var(--muted); margin:26px 0 0; }
.migas a{ color:var(--muted); }
h1{ font-size:40px; line-height:1.12; letter-spacing:-1.1px; margin:14px 0 18px; font-weight:800; }
.entradilla{ font-size:21px; line-height:1.55; color:#333; margin:0 0 10px; }
.firma{ font-size:14px; color:var(--muted); border-bottom:1px solid var(--border);
        padding-bottom:22px; margin-bottom:34px; }
.firma b{ color:var(--ink); }
h2{ font-size:27px; line-height:1.22; letter-spacing:-.6px; margin:44px 0 14px; font-weight:800; }
h3{ font-size:20px; line-height:1.3; margin:32px 0 10px; font-weight:700; }
p{ margin:0 0 20px; }
a{ color:var(--blue); }
strong{ font-weight:700; }
ul,ol{ margin:0 0 20px; padding-left:22px; }
li{ margin-bottom:9px; }

/* la regla: el bloque que se recuerda */
.regla{ border-left:4px solid var(--blue); background:var(--blue-light);
        padding:20px 24px; margin:30px 0; border-radius:0 8px 8px 0; }
.regla b{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:1.3px;
          color:var(--blue); margin-bottom:8px; font-weight:700; }
.regla p{ margin:0; font-size:21px; line-height:1.45; font-weight:600; letter-spacing:-.3px; }

.aparte{ border:1px solid var(--border); border-radius:10px; padding:20px 24px; margin:30px 0;
         background:var(--cream); font-size:16.5px; }
.aparte p:last-child{ margin-bottom:0; }
.aparte b.rot{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:1.3px;
               color:var(--muted); margin-bottom:8px; }

table{ width:100%; border-collapse:collapse; font-size:16px; margin:0 0 24px; }
th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.8px;
    color:var(--muted); border-bottom:2px solid var(--ink); padding:8px 10px; }
td{ border-bottom:1px solid var(--border); padding:11px 10px; vertical-align:top; }
.tabla-scroll{ overflow-x:auto; }

/* ── cierre ── */
.cierre{ border:1.5px solid var(--ink); border-radius:12px; padding:28px; margin:52px 0 0; }
.cierre h2{ margin:0 0 10px; font-size:24px; }
.cierre p{ font-size:17px; margin-bottom:20px; }
.cierre .botones{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:13px 22px; border-radius:9px; text-decoration:none;
      font-weight:600; font-size:16px; }
.btn-1{ background:var(--blue); color:#fff; }
.btn-1:hover{ background:var(--blue-dark); }
.btn-2{ border:1.5px solid var(--border); color:var(--ink); }
.btn-2:hover{ border-color:var(--ink); }

.otras{ margin-top:48px; border-top:1px solid var(--border); padding-top:26px; }
.otras h2{ font-size:18px; margin:0 0 14px; }
.otras ul{ list-style:none; padding:0; }
.otras li{ margin-bottom:10px; font-size:16.5px; }

footer{ border-top:1px solid var(--border); background:var(--cream); margin-top:64px; }
.foot-in{ max-width:var(--max); margin:0 auto; padding:30px 22px; font-size:14px; color:var(--muted); }
.foot-in a{ color:var(--muted); text-decoration:none; margin-right:16px; line-height:2.2; }
.foot-in a:hover{ color:var(--ink); text-decoration:underline; }
.foot-copy{ margin-top:14px; }

@media (max-width:640px){
  body{ font-size:17px; }
  h1{ font-size:31px; letter-spacing:-.7px; }
  h2{ font-size:23px; }
  .entradilla{ font-size:19px; }
  .regla p{ font-size:19px; }
  main{ padding:0 18px 48px; }
  .top-in{ padding:12px 18px; }
}

/* Indice del hub /guias/ */
.indice{ list-style:none; padding:0; margin:26px 0 0; }
.indice li{ margin:0 0 10px; }
.indice a{ display:block; border:1px solid var(--border); border-radius:10px;
  padding:16px 18px; text-decoration:none; color:var(--ink); background:#fff; }
.indice a:hover{ border-color:var(--ink); }
.indice b{ display:block; font-size:18px; line-height:1.3; letter-spacing:-.3px; margin-bottom:5px; }
.indice span{ display:block; font-size:15px; color:var(--muted); line-height:1.45; }