/* ==========================================================================
   MiPOS ONLINE — sistema de diseño del sitio
   --------------------------------------------------------------------------
   Los colores NO son inventados: salen de los tokens reales de la aplicación
   (src/app/globals.css), convertidos de oklch a hex. Si el sistema cambia de
   color, este archivo es el único lugar del sitio que hay que tocar.

       --azul  #1b66ea   =  oklch(0.55 0.212 261)   (--primary)
       --tinta #111826   =  oklch(0.21 0.03 265)    (--foreground)
       --papel #f9fafc   =  oklch(0.985 0.003 264)  (--background)

   El sitio anterior era verde (#059669) y ya no se parecía en nada a la
   aplicación: quien venía del sitio entraba a un producto que parecía otro.
   ========================================================================== */

:root {
  --azul: #1b66ea;
  --azul-600: #1550c4;
  --azul-400: #5097ff;
  --azul-100: #dbe8fe;
  --azul-50: #eff5ff;

  --tinta: #111826;
  --tinta-2: #3f4a5f;
  --tinta-3: #6b7688;
  --papel: #f9fafc;
  --blanco: #fff;
  --linea: #e4e8ef;

  --verde: #0f8a5f;
  --verde-fondo: #e7f6ef;
  --ambar: #b26a00;
  --ambar-fondo: #fdf3e2;

  --radio: 14px;
  --radio-sm: 10px;
  --sombra: 0 1px 2px rgba(17, 24, 38, .06), 0 8px 24px -12px rgba(17, 24, 38, .16);
  --sombra-alta: 0 2px 4px rgba(17, 24, 38, .05), 0 24px 56px -20px rgba(27, 102, 234, .28);

  --ancho: 1140px;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Equivalencias con el sitio anterior --------------------------------
     Las páginas internas conservan su HTML, y ahí quedaron atributos style
     que apuntan a variables del CSS viejo. Sin estas líneas esas reglas no
     resuelven a nada: los textos pierden color, los bordes desaparecen y los
     radios se van a cero. Se mapean al equivalente de la paleta nueva en vez
     de editar 160 atributos a mano en 13 archivos. */
  --blue: #1b66ea;
  --primary: #1b66ea;
  --primary-dark: #1550c4;
  --grad-primary: linear-gradient(135deg, #123a86, #1b66ea);
  --grad-hero: linear-gradient(135deg, #123a86 0%, #1b66ea 55%, #3d84ff 100%);
  --ink: #111826;
  --ink-soft: #3f4a5f;
  --mid: #6b7688;
  --bg: #f9fafc;
  --bg-dark: #0d1424;
  --surface: #fff;
  --card: #fff;
  --border: #e4e8ef;
  --green: #0f8a5f;
  --r: 14px;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(17,24,38,.06), 0 8px 24px -12px rgba(17,24,38,.16);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Nadie debería marearse por una animación decorativa. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta-2);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--tinta); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -.03em; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

/* Foco visible para quien navega con teclado. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--azul-400);
  outline-offset: 3px;
  border-radius: 6px;
}

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.seccion { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.centrado { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Etiqueta de sección ------------------------------------------------ */
.etiqueta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--azul); background: var(--azul-50);
  border: 1px solid var(--azul-100); border-radius: 999px;
  padding: .35rem .85rem; margin-bottom: 1rem;
}

.bajada { font-size: 1.12rem; color: var(--tinta-3); max-width: 62ch; }
.centrado .bajada { margin-inline: auto; }

/* --- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: inherit; font-weight: 700; font-size: 1rem;
  padding: .85rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none !important;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primario { background: var(--azul); color: #fff; box-shadow: 0 10px 24px -10px rgba(27,102,234,.7); }
.btn-primario:hover { background: var(--azul-600); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(27,102,234,.75); }

.btn-secundario { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
.btn-secundario:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); }

.btn-wsp { background: #25d366; color: #fff; }
.btn-wsp:hover { background: #1eb356; transform: translateY(-2px); }

/* Flecha que se corre al pasar el mouse: microinteracción barata y efectiva. */
.btn .flecha { transition: transform .18s cubic-bezier(.2,.8,.3,1); }
.btn:hover .flecha { transform: translateX(4px); }

/* --- Tarjetas ----------------------------------------------------------- */
.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.6rem;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: #cfdaea; }

.grilla { display: grid; gap: 1.25rem; }
.grilla-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grilla-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.icono {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--azul-50); color: var(--azul); margin-bottom: .9rem;
}
.icono svg { width: 22px; height: 22px; }

/* --- Aparición al hacer scroll ------------------------------------------
   La clase .revelar la agrega el JS solo si hay soporte; sin JS el contenido
   se ve igual, que es lo que importa para el buscador y para el usuario. */
.js .revelar { opacity: 0; transform: translateY(18px); }
.js .revelar.visible {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1);
}

/* --- Encabezado --------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(249,250,252,.82); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s, background .25s;
}
.cabecera.pegada { border-bottom-color: var(--linea); background: rgba(249,250,252,.95); }
.cabecera-int { display: flex; align-items: center; gap: 1.5rem; padding: .8rem 0; }

.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none !important; }
.marca-glifo {
  width: 38px; height: 38px; border-radius: 11px; background: var(--azul); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(27,102,234,.8);
}
.marca-glifo svg { width: 62%; height: 62%; }
.marca-texto { font-weight: 800; font-size: .98rem; letter-spacing: -.02em; color: var(--tinta); line-height: 1.1; }
.marca-texto span { color: var(--azul); }
.marca-sub { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }

.menu { display: flex; gap: 1.35rem; margin-left: auto; }
.menu a { color: var(--tinta-2); font-weight: 600; font-size: .94rem; text-decoration: none; position: relative; padding: .2rem 0; }
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--azul); border-radius: 2px; transition: width .22s cubic-bezier(.2,.8,.3,1);
}
.menu a:hover { color: var(--tinta); }
.menu a:hover::after { width: 100%; }

.acciones-cab { display: flex; gap: .6rem; align-items: center; }
.acciones-cab .btn { padding: .6rem 1.15rem; font-size: .92rem; }

.hamburguesa { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--tinta); }
.hamburguesa svg { width: 24px; height: 24px; }

@media (max-width: 940px) {
  .menu {
    position: fixed; inset: 64px 0 auto; flex-direction: column; gap: 0;
    background: var(--blanco); border-bottom: 1px solid var(--linea);
    padding: .5rem 1.25rem 1.25rem; margin: 0;
    transform: translateY(-120%); transition: transform .3s cubic-bezier(.2,.8,.3,1);
    box-shadow: var(--sombra);
  }
  .menu.abierto { transform: none; }
  .menu a { padding: .85rem 0; border-bottom: 1px solid var(--linea); }
  .menu a::after { display: none; }
  .hamburguesa { display: block; margin-left: auto; }
  .acciones-cab .oculto-movil { display: none; }
}

/* --- Héroe -------------------------------------------------------------- */
.heroe { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5.5rem) 0 0; }
.heroe::before {
  content: ""; position: absolute; inset: -30% 0 auto; height: 620px; z-index: -1;
  background:
    radial-gradient(60% 60% at 20% 30%, rgba(27,102,234,.10), transparent 70%),
    radial-gradient(50% 50% at 85% 10%, rgba(80,151,255,.14), transparent 70%);
}
.heroe-grilla { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1.05fr .95fr; }
@media (max-width: 900px) { .heroe-grilla { grid-template-columns: 1fr; } }

.heroe h1 span { color: var(--azul); }
.heroe-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.2rem; }
.heroe-nota { font-size: .9rem; color: var(--tinta-3); display: flex; align-items: center; gap: .45rem; }

/* Marco de la captura: simula la ventana de la aplicación. */
.marco {
  border-radius: var(--radio); overflow: hidden; background: var(--blanco);
  border: 1px solid var(--linea); box-shadow: var(--sombra-alta);
}
.marco-barra { display: flex; gap: .4rem; padding: .6rem .8rem; background: #f2f5f9; border-bottom: 1px solid var(--linea); }
.marco-barra i { width: 10px; height: 10px; border-radius: 50%; background: #d5dbe5; }
.marco img { display: block; width: 100%; }

/* Flotación muy suave del marco del héroe. */
@media (prefers-reduced-motion: no-preference) {
  .flota { animation: flotar 7s ease-in-out infinite; }
  @keyframes flotar { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
}

/* --- Cifras ------------------------------------------------------------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1rem; }
.cifra { text-align: center; padding: 1.2rem .8rem; }
.cifra b { display: block; font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--tinta); font-weight: 800; letter-spacing: -.03em; }
.cifra span { font-size: .88rem; color: var(--tinta-3); }

/* --- Pestañas de módulos ------------------------------------------------ */
.pestanas { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.pestana {
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta-2);
  transition: all .18s;
}
.pestana:hover { border-color: var(--azul); color: var(--azul); }
.pestana[aria-selected="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.panel[hidden] { display: none; }
.panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items: center; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } }
.panel ul { list-style: none; padding: 0; }
.panel li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; }
.panel li svg { flex: none; width: 20px; height: 20px; color: var(--verde); margin-top: .18rem; }

/* --- Precios ------------------------------------------------------------ */
.planes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,290px),1fr)); align-items: start; }
.plan { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; padding: 2rem 1.7rem; transition: transform .22s, box-shadow .22s; }
.plan:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.plan.destacado { border: 2px solid var(--azul); box-shadow: var(--sombra-alta); }
.plan-cinta {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--azul); color: #fff; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .3rem .9rem; border-radius: 999px;
  white-space: nowrap;
}
.plan-precio { font-size: 2.5rem; font-weight: 800; color: var(--tinta); letter-spacing: -.04em; line-height: 1.1; }
.plan-precio small { font-size: .95rem; font-weight: 600; color: var(--tinta-3); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 1.4rem 0; }
.plan li { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .6rem; font-size: .95rem; }
.plan li svg { flex: none; width: 19px; height: 19px; color: var(--verde); margin-top: .2rem; }
.plan .btn { width: 100%; }

/* --- Preguntas ---------------------------------------------------------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq details {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-sm);
  margin-bottom: .7rem; overflow: hidden; transition: border-color .2s;
}
.faq details[open] { border-color: var(--azul-100); }
.faq summary {
  cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 700; color: var(--tinta);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; border-right: 2.5px solid var(--azul);
  border-bottom: 2.5px solid var(--azul); transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
.faq .respuesta { padding: 0 1.3rem 1.2rem; color: var(--tinta-3); }

/* --- Cierre ------------------------------------------------------------- */
.cierre {
  background: linear-gradient(135deg, #123a86 0%, var(--azul) 55%, #3d84ff 100%);
  color: #fff; border-radius: 22px; padding: clamp(2.5rem, 6vw, 4rem); text-align: center;
  position: relative; overflow: hidden;
}
.cierre h2 { color: #fff; }
.cierre p { color: rgba(255,255,255,.9); }
.cierre .btn-primario { background: #fff; color: var(--azul); box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); }
.cierre .btn-primario:hover { background: #f0f5ff; }
.cierre .btn-secundario { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.cierre .btn-secundario:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

/* --- Pie ---------------------------------------------------------------- */
.pie { background: #0d1424; color: #93a0b8; padding: 3.5rem 0 2rem; margin-top: 4rem; }
.pie h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.pie a { color: #93a0b8; display: block; padding: .28rem 0; font-size: .94rem; }
.pie a:hover { color: #fff; text-decoration: none; }
.pie-grilla { display: grid; gap: 2rem; grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 800px) { .pie-grilla { grid-template-columns: 1fr 1fr; } }
.pie-legal { border-top: 1px solid #1e293f; margin-top: 2.5rem; padding-top: 1.5rem; font-size: .87rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* --- WhatsApp flotante -------------------------------------------------- */
.wsp-flota {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 26px -8px rgba(37,211,102,.85);
  transition: transform .2s;
}
.wsp-flota:hover { transform: scale(1.08); }
.wsp-flota svg { width: 28px; height: 28px; }

/* --- Texto largo (SEO) -------------------------------------------------- */
.prosa { max-width: 76ch; }
.prosa h2 { margin-top: 2.2rem; }
.prosa h3 { margin-top: 1.6rem; }
.prosa ul { padding-left: 1.15rem; }
.prosa li { margin-bottom: .45rem; }

/* ==========================================================================
   PÁGINAS INTERNAS (landings, blog, privacidad)
   --------------------------------------------------------------------------
   Estas páginas conservan su HTML original —son activos de posicionamiento y
   reescribirlas a mano era arriesgar contenido— y se rediseñan desde acá.
   Los nombres de clase vienen del sitio anterior; lo que cambia es todo lo
   visual: paleta azul, tipografía, espaciado, sombras y bordes.
   ========================================================================== */

/* Encabezado de artículo y landing ---------------------------------------- */
.article-header, .local-hero, .blog-hero {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(60% 70% at 15% 0%, rgba(27,102,234,.09), transparent 70%),
    radial-gradient(50% 60% at 90% 10%, rgba(80,151,255,.10), transparent 70%);
}
/* El encabezado se acota con su propio relleno lateral, no dándole ancho a
   cada hijo uno por uno. Ese enfoque anterior fallaba con la etiqueta: al
   devolverle su ancho natural perdía el centrado y quedaba pegada al borde
   izquierdo de la ventana. Con relleno, todos los hijos caen solos en su
   lugar sin importar si son bloque o en línea. */
.article-header, .local-hero, .blog-hero {
  padding-inline: max(1.25rem, (100% - var(--ancho)) / 2);
}
.article-header h1, .local-hero h1, .blog-hero h1 { max-width: 24ch; }

/* El blog y las landings tienen el encabezado centrado; los artículos no,
   porque un texto largo se lee mejor alineado a la izquierda. */
.blog-hero, .local-hero { text-align: center; }
.blog-hero h1, .local-hero h1,
.blog-hero > p, .local-hero > p { margin-inline: auto; }
.blog-hero > p, .local-hero > p { max-width: 62ch; }
.blog-hero .article-breadcrumb { justify-content: center; display: flex; gap: .4rem; }

.article-breadcrumb { font-size: .88rem; color: var(--tinta-3); margin-bottom: 1rem; }
.article-breadcrumb a { color: var(--tinta-3); }
.article-breadcrumb a:hover { color: var(--azul); }

.article-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; font-size: .9rem; color: var(--tinta-3); }
.article-meta-item { display: inline-flex; align-items: center; gap: .4rem; }

/* Cuerpo + barra lateral --------------------------------------------------- */
.article-body-wrap {
  width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 2.5rem;
  padding: clamp(1.5rem,4vw,3rem) 0 clamp(3rem,6vw,5rem); align-items: start;
}
@media (max-width: 900px) { .article-body-wrap { grid-template-columns: 1fr; } }

.article-body { font-size: 1.06rem; }
.article-body h2 { font-size: clamp(1.5rem,3vw,2rem); margin-top: 2.4rem; }
.article-body h3 { font-size: 1.2rem; margin-top: 1.8rem; }
.article-body ul, .article-body ol { padding-left: 1.25rem; }
.article-body li { margin-bottom: .5rem; }
.article-body img { border-radius: var(--radio); border: 1px solid var(--linea); margin: 1.5rem 0; }

/* Bloque destacado dentro del artículo */
.article-callout, .local-callout {
  background: var(--azul-50); border: 1px solid var(--azul-100);
  border-left: 4px solid var(--azul); border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  padding: 1.15rem 1.4rem; margin: 1.8rem 0;
}
.article-callout p:last-child, .local-callout p:last-child { margin-bottom: 0; }

.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.article-tag-item, .article-tag, .city-tag, .blog-article-tag, .blog-card-tag, .modulo-tag {
  display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; color: var(--azul); background: var(--azul-50);
  border: 1px solid var(--azul-100); border-radius: 999px; padding: .3rem .8rem;
  text-decoration: none;
}
a.article-tag-item:hover, a.city-tag:hover { background: var(--azul-100); text-decoration: none; }

/* Barra lateral */
.article-sidebar, .blog-sidebar { position: sticky; top: 84px; display: grid; gap: 1.2rem; }
@media (max-width: 900px) { .article-sidebar, .blog-sidebar { position: static; } }
.sidebar-widget, .toc-widget {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.3rem;
}
.sidebar-widget h3, .toc-widget h3, .toc-widget strong {
  font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-3); display: block; margin-bottom: .8rem;
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin-bottom: .1rem; }
.toc-list a {
  display: block; padding: .4rem .6rem; border-radius: 8px; font-size: .92rem;
  color: var(--tinta-2); border-left: 2px solid var(--linea); transition: all .18s;
}
.toc-list a:hover { background: var(--azul-50); color: var(--azul); border-left-color: var(--azul); text-decoration: none; }
.sidebar-links { list-style: none; padding: 0; margin: 0; }
.sidebar-links li { margin-bottom: .45rem; }
.sidebar-links a { font-size: .93rem; }
.sidebar-cta {
  background: linear-gradient(135deg, #123a86, var(--azul)); color: #fff; border: 0;
}
.sidebar-cta h3, .sidebar-cta strong { color: rgba(255,255,255,.75); }
.sidebar-cta p { color: rgba(255,255,255,.92); font-size: .95rem; }
.sidebar-cta .btn { width: 100%; background: #fff; color: var(--azul); }

/* Tarjetas de artículo ----------------------------------------------------- */
.related-grid, .blog-grid, .related-articles .related-grid {
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr));
}
.blog-card, .blog-article-card {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.blog-card:hover, .blog-article-card:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: #cfdaea; }
.blog-card-img, .blog-article-thumb {
  aspect-ratio: 16/9; display: grid; place-items: center; font-size: 2.2rem;
  background: linear-gradient(135deg, var(--azul-50), var(--azul-100));
  color: var(--azul);
}
.blog-card-body, .blog-article-content { padding: 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.blog-card-body h3, .blog-article-content h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.blog-card-meta, .blog-article-meta, .blog-card-date {
  font-size: .85rem; color: var(--tinta-3); display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}
.blog-card-link, .blog-read-more { font-weight: 700; font-size: .93rem; margin-top: auto; }
.blog-article-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.blog-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.filter-btn {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: .5rem 1.05rem; border-radius: 999px; border: 1px solid var(--linea);
  background: var(--blanco); color: var(--tinta-2); transition: all .18s;
}
.filter-btn:hover, .filter-btn.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.blog-main-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .blog-main-grid { grid-template-columns: 1fr; } }
.blog-see-all { text-align: center; margin-top: 2rem; }

/* Módulos de sistema.html --------------------------------------------------- */
.modulo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center;
  padding: clamp(2rem,4vw,3.2rem) 0; border-bottom: 1px solid var(--linea);
}
.modulo:last-child { border-bottom: 0; }
.modulo.reverse > .modulo-img-wrap { order: -1; }
@media (max-width: 860px) { .modulo, .modulo.reverse { grid-template-columns: 1fr; } .modulo.reverse > .modulo-img-wrap { order: 0; } }
.modulo-img-wrap {
  position: relative; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--linea); box-shadow: var(--sombra); background: var(--blanco);
}
.modulo-img-badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border: 1px solid var(--linea); border-radius: 999px; padding: .3rem .8rem;
  font-size: .78rem; font-weight: 700; color: var(--tinta);
}
.modulo-number {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--azul); color: #fff; font-weight: 800; font-size: .95rem; margin-bottom: .7rem;
}
.modulo-features { list-style: none; padding: 0; margin-top: 1rem; }
.modulo-features li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.modulo-features li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--azul);
}

/* Comparativas y zonas ------------------------------------------------------ */
.comp-row, .compare-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--linea); align-items: center;
}
.compare-header { font-weight: 700; color: var(--tinta); background: var(--azul-50); }
.comp-yes, .c-yes { color: var(--verde); font-weight: 700; }
.comp-no, .c-no { color: var(--tinta-3); }
.zone-card, .cluster-card, .seo-card, .seo-landing-card, .privacy-card, .feat-card {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.5rem; transition: transform .22s, box-shadow .22s, border-color .22s;
}
.zone-card:hover, .cluster-card:hover, .seo-landing-card:hover, .feat-card:hover {
  transform: translateY(-4px); box-shadow: var(--sombra); border-color: #cfdaea;
}
.cluster-card-icon, .feat-icon, .seo-card-title::before {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--azul-50); color: var(--azul); margin-bottom: .8rem; font-size: 1.3rem;
}
.local-zones, .seo-landing-grid, .features-grid, .cluster-grid {
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr));
}
.local-ctas, .hero-ctas, .cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0; }
.local-trust, .hero-trust { font-size: .9rem; color: var(--tinta-3); }
.local-body { padding: clamp(2rem,5vw,3.5rem) 0; }

/* Preguntas frecuentes de las páginas internas ------------------------------ */
.faq-wrap, .faq { max-width: 820px; margin-inline: auto; }
.faq-item {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-sm);
  margin-bottom: .7rem; overflow: hidden;
}
.faq-q {
  cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 700; color: var(--tinta);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-ic { color: var(--azul); font-weight: 800; flex: none; transition: transform .25s; }
.faq-item[open] .faq-ic, details[open] .faq-ic { transform: rotate(45deg); }
.faq-a { padding: 0 1.3rem 1.2rem; color: var(--tinta-3); }

/* Bandas y secciones -------------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, #123a86 0%, var(--azul) 55%, #3d84ff 100%);
  color: #fff; padding: clamp(2.5rem,6vw,4rem) 0; text-align: center; margin-top: 3rem;
}
.cta-band h2, .cta-band h3 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); }
.cta-band .cta-actions { justify-content: center; }
.btn-white { background: #fff; color: var(--azul); }
.btn-white:hover { background: #eff5ff; }
.btn-ghost-w { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-w:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.btn-blue { background: var(--azul); color: #fff; }
.btn-blue:hover { background: var(--azul-600); }
.btn-outline { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
.btn-outline:hover { border-color: var(--azul); color: var(--azul); }

.stats-band { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 1rem; padding: 2rem 0; }
.stat-item { text-align: center; }
.stat-item strong, .stat-item b { display: block; font-size: 1.9rem; font-weight: 800; color: var(--tinta); letter-spacing: -.03em; }

.s-label {
  display: inline-flex; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--azul); background: var(--azul-50);
  border: 1px solid var(--azul-100); border-radius: 999px; padding: .35rem .85rem; margin-bottom: 1rem;
}
.s-sub, .hero-desc { font-size: 1.1rem; color: var(--tinta-3); max-width: 62ch; }
.divider { height: 1px; background: var(--linea); border: 0; margin: 2.5rem 0; }
.section-num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--azul-50); color: var(--azul); font-weight: 800; font-size: .88rem; margin-right: .6rem;
}
.privacy-section { margin-bottom: 2rem; }
.afip-badge {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700;
  color: var(--verde); background: var(--verde-fondo); border-radius: 999px; padding: .3rem .8rem;
}

/* Contenido SEO de las landings --------------------------------------------- */
.seo-edu, .seo-content, .seo-landing, .seo-main { padding: clamp(2.5rem,6vw,4rem) 0; }
.seo-edu-inner, .seo-inner { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; max-width: 78ch; }
.seo-list { padding-left: 1.2rem; }
.seo-card-title { font-weight: 700; color: var(--tinta); margin-bottom: .5rem; }

/* La clase de animación del sitio anterior: sin su JS quedaba invisible. */
.reveal { opacity: 1 !important; transform: none !important; }


/* --- Correcciones del listado del blog -----------------------------------
   `.blog-articles` no estaba estilado: sus tarjetas quedaban a lo ancho de
   la columna y la miniatura, con relación 16/9, ocupaba una pantalla entera
   por artículo. Y los bloques sueltos de <main> salían de borde a borde
   porque no tenían contenedor. */
.blog-filters, .blog-main-grid, .related-articles, .blog-see-all {
  width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto;
}
.blog-filters { padding-bottom: .5rem; }
.blog-main-grid { padding-bottom: clamp(3rem, 6vw, 5rem); }

.blog-articles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
@media (min-width: 700px) { .blog-articles { grid-template-columns: repeat(2, 1fr); } }

/* La miniatura es decorativa: se le pone un alto fijo y no una relación de
   aspecto, para que no crezca con el ancho de la tarjeta. */
.blog-article-thumb, .blog-card-img {
  aspect-ratio: auto; height: 132px; font-size: 2rem;
}
.blog-article-card { height: 100%; }
.blog-article-content { padding: 1.2rem; gap: .5rem; }
.blog-article-content h2 { font-size: 1.08rem; line-height: 1.35; margin: 0; letter-spacing: -.01em; }
.blog-article-content p { font-size: .95rem; margin: 0; }
.blog-article-footer { padding: 0 1.2rem 1.2rem; margin-top: auto; }

/* --- Correcciones de maquetación ------------------------------------------
   Dos problemas que solo se ven en pantalla:

   1. Las etiquetas ("Facturación AFIP", "Medios de Pago") son <div>, y dentro
      de un contenedor flex en columna los hijos se estiran a todo el ancho por
      defecto. Se veían como barras celestes de lado a lado en vez de píldoras.

   2. Varias secciones cuelgan directamente de <main> sin contenedor, así que
      su título arrancaba pegado al borde de la ventana. */

.blog-card-body > .blog-card-tag,
.blog-article-content > .blog-article-tag,
.blog-card-body > .blog-card-meta,
.modulo-content > .modulo-tag {
  align-self: flex-start;
}

/* El texto del artículo también acota su ancho: leer líneas de 1100px cansa. */
.article-body > p, .article-body > ul, .article-body > ol,
.article-body > h2, .article-body > h3 { max-width: 72ch; }

/* Secciones sueltas de <main> que necesitaban contenedor. */
.cta-band > h2, .cta-band > h3, .cta-band > p, .cta-band > .cta-actions,
.related-articles > h2, .related-articles > .related-grid,
.article-tags, .stats-band, .faq-wrap, .local-zones {
  width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto;
}
.cta-band > p { max-width: min(100% - 2.5rem, 60ch); }
.related-articles { padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--linea); }
.related-articles > h2 { margin-bottom: 1.5rem; }

/* La miniatura decorativa: alto fijo y modesto en las tarjetas relacionadas. */
.blog-card-img { height: 120px; }
.blog-card-body { padding: 1.15rem; }
.blog-card-body h3 { font-size: 1rem; }

/* --- Etiqueta de encabezado ("Blog & Recursos", "Facturación AFIP") -------
   Era un rectángulo celeste plano, el mismo tono que las píldoras de
   categoría de las tarjetas, así que no jerarquizaba nada y se leía como un
   error de maquetación.

   Ahora es una cápsula blanca elevada con un punto azul que late: se
   distingue del fondo, no compite con el título y el punto le da un guiño
   al isotipo de la marca, que es una M rematada con un punto. */
.s-label,
.blog-hero .s-label, .article-header .s-label, .local-hero .s-label {
  display: inline-flex; align-items: center; gap: .55rem;
  width: auto; margin: 0 0 1.1rem;
  padding: .42rem 1rem .42rem .8rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul); background: var(--blanco);
  border: 1px solid var(--azul-100); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(17,24,38,.05), 0 6px 18px -10px rgba(27,102,234,.45);
}
.s-label::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--azul); box-shadow: 0 0 0 3px rgba(27,102,234,.16);
}
@media (prefers-reduced-motion: no-preference) {
  .s-label::before { animation: latir 2.6s ease-in-out infinite; }
  @keyframes latir {
    0%, 100% { box-shadow: 0 0 0 3px rgba(27,102,234,.16); }
    50%      { box-shadow: 0 0 0 6px rgba(27,102,234,.05); }
  }
}

/* Migas de pan del encabezado, más discretas para que el foco quede en el
   título y no en la navegación. */
.article-breadcrumb { font-size: .82rem; letter-spacing: .01em; }
.article-breadcrumb span { color: var(--tinta-3); opacity: .6; }

/* La etiqueta de los artículos (.article-tag) recibe el mismo tratamiento
   que .s-label: son lo mismo con otro nombre, heredado del sitio anterior. */
.article-header .article-tag {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1.1rem;
  padding: .42rem 1rem .42rem .8rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul); background: var(--blanco);
  border: 1px solid var(--azul-100); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(17,24,38,.05), 0 6px 18px -10px rgba(27,102,234,.45);
}
.article-header .article-tag::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--azul); box-shadow: 0 0 0 3px rgba(27,102,234,.16);
}
@media (prefers-reduced-motion: no-preference) {
  .article-header .article-tag::before { animation: latir 2.6s ease-in-out infinite; }
}

/* Los datos del artículo, separados por puntos en vez de amontonados. */
.article-meta { gap: .9rem; align-items: center; }
.article-meta-item + .article-meta-item::before {
  content: "·"; margin-right: .9rem; color: var(--tinta-3); opacity: .55;
}
.article-meta-item strong { color: var(--tinta-2); font-weight: 700; }