/* ============================================================
 * MOBILE.CSS · la "version celular" del sitio
 *
 * Que es: TODA regla vive dentro de un @media max-width:991.98px
 * (tablet chica hacia abajo). Desktop queda intocable porque esta
 * hoja solo puede actuar ahi abajo. Se carga ULTIMA, despues de
 * override.css, en cada pagina publica.
 *
 * Para que existe: la plantilla achica los display con calc()
 * pero deja el cuerpo y el eyebrow igual que en desktop, y hereda
 * line-height pensado para 48px. En el celular la jerarquia
 * titulo/bajada se aplasta (1.37x en vez de 1.71x) y el
 * interlineado queda apretado ("amontonado").
 *
 * OJO CON LAS UNIDADES: la plantilla fija el root en 20px
 * (--bs-root-font-size), NO 16px. Por eso aca se usan PX
 * explicitos, no rem — un rem vale 20px y descuadra la escala.
 *
 * Lo que NO hace: no duplica HTML, no toca copy, no cambia color
 * ni marca. Es tipografia y espacio, nada mas. Para ajustar algo
 * del celular, se edita ACA y solo aca.
 * ============================================================ */

@media (max-width: 991.98px) {

  /* ---- Interlineado de titulos: mas aire entre renglones ----
     La plantilla hereda 1.15-1.30 pensado para 40-48px; a menor
     tamano el interlineado relativo tiene que subir. */

  .display-1 { line-height: 1.25 !important; }
  .display-2,
  .display-3 { line-height: 1.28 !important; }
  .display-4,
  .display-5,
  .display-6 { line-height: 1.32 !important; }

  h1, .h1 { line-height: 1.25 !important; }
  h2, .h2 { line-height: 1.30 !important; }
  h3, .h3 { line-height: 1.33 !important; }

  /* ---- Bajada: baja para devolver la jerarquia ----
     Desktop: titulo display-4 36px vs bajada lead 21px = 1.71x.
     Sin esto mobile queda 28.8 vs 21 = 1.37x (aplastado).
     Bajando la bajada a 17px se recupera ~1.65x.
     (21px = 1.05rem x root 20px; en px explicitos: 17px.) */

  .lead,
  .lead.fs-lg,
  .hero-lead {
    font-size: 17px !important;
    line-height: 1.62 !important;
  }

  /* El eyebrow no es una clase propia: es fs-15 + text-uppercase +
     text-muted. Se ataja por el patron. 15px -> 13px. */
  .fs-15.text-uppercase.text-muted {
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
  }

  /* ---- Cards de modulo: el cuerpo baja a 13.6px via plantilla,
     pero el interlineado 1.28 queda apretado a ese tamano ---- */
  .modulo-card-body { line-height: 1.45 !important; }

  /* ---- Respiro entre titulo de seccion y su bajada ---- */
  .display-4 + .lead,
  .display-3 + .lead { margin-top: 6px !important; }
}

/* ============================================================
 * MENU MOBILE PROPIO · panel desde arriba
 *
 * Por que existe: el megamenu de desktop (880px, grid de 2
 * columnas, offcanvas de Bootstrap) esta roto en mobile — el
 * drawer de la plantilla no abre estable y el contenido queda
 * fuera de pantalla. Un megamenu asi no tiene version digna en
 * un celular.
 *
 * Solucion: en mobile el offcanvas de Bootstrap se oculta y se
 * muestra ESTE panel propio, que entra desde arriba, ocupa todo
 * el ancho y lista los 14 modulos en texto plano (sin iconos ni
 * cards, que en mobile son ruido). El JS vive inline al final
 * del body, junto al markup.
 *
 * Desktop (>= 992px) no se toca: el megamenu sigue igual y este
 * panel no existe.
 * ============================================================ */

/* El offcanvas roto y el megamenu desaparecen solo en mobile. */
@media (max-width: 991.98px) {
  .navbar-collapse.offcanvas-nav { display: none !important; }
}

/* El panel no existe en desktop. */
@media (min-width: 992px) {
  .mmnav { display: none !important; }
}

.mmnav {
  position: fixed;
  /* cuelga de abajo del navbar (78px), no tapa el header del sitio */
  top: 78px;
  left: 0;
  right: 0;
  max-height: calc(100dvh - 78px);   /* nunca mas bajo que la pantalla */
  overflow-y: auto;
  background: #ffffff;               /* blanco: en linea con la home */
  color: #343f52;
  z-index: 1045;                     /* por encima del backdrop (1040) del offcanvas viejo */
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease, visibility 0.28s;
  box-shadow: 0 24px 60px rgba(30,36,48,0.22);
  border-bottom: 1px solid #eceff3;
  -webkit-overflow-scrolling: touch;
}
.mmnav.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* El navbar queda fijo arriba en mobile para que el panel cuelgue de el
   y el logo + hamburguesa sean los del sitio. */
@media (max-width: 991.98px) {
  .navbar:not(.navbar-clone) {
    position: sticky;
    top: 0;
    z-index: 1050;
  }
  /* bloqueo de scroll del fondo mientras el menu esta abierto */
  body.mmnav-abierto { overflow: hidden; }
  /* la hamburguesa pasa a X cuando el menu esta abierto.
     Estructura de la plantilla: button::before (linea 1),
     button span (linea 2), button::after (linea 3). */
  .hamburger.active span { background: transparent !important; }
  .hamburger.active::before { transform: translateY(0.4rem) rotate(45deg); }
  .hamburger.active::after  { transform: translateY(-0.4rem) rotate(-45deg); }

  /* Con el menu abierto, los flotantes (WhatsApp, chat Cliengo, subir)
     se esconden: tapaban el pie del menu (Contactanos, mail, telefono).
     El boton de WhatsApp lo inyecta GTM con estilos inline, el chat es
     un iframe de Cliengo, y el "subir" es el .progress-wrap de la
     plantilla. */
  body.mmnav-abierto a[href*="api.whatsapp.com"],
  body.mmnav-abierto a[href*="wa.me"][style*="fixed"],
  body.mmnav-abierto #clgo,
  body.mmnav-abierto #chatIframe,
  body.mmnav-abierto #popupIframe,
  body.mmnav-abierto .progress-wrap {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease;
  }
}

.mmnav-inner {
  padding: 12px 20px 16px;
}

/* Items de primer nivel (solo Nosotros) */
.mmnav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: #343f52;
  font-size: 18px;
  font-weight: 700;
  padding: 9px 2px;
  text-decoration: none;
  cursor: pointer;
}
.mmnav-item:active { color: #007ACC; }

/* El toggle de Software con chevron */
.mmnav-toggle { display: flex; align-items: center; justify-content: space-between; }
.mmnav-toggle .chev { transition: transform 0.25s ease; font-size: 14px; opacity: 0.55; color: #343f52; }
.mmnav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Sub-panel de Software: entra vertical, condensado en altura */
.mmnav-sub {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.38s ease, opacity 0.28s ease;
}
.mmnav-sub.open { max-height: 1400px; opacity: 1; }

/* Cada seccion tiene su color de acento (--gc): Operacion azul,
   Analisis teal, Cliente final lime. La linea de color arriba y el
   titulo las diferencian. El aire es igual en las tres: mismo margen
   sobre la linea, mismo padding entre linea y titulo, mismo padding
   entre titulo y el primer item. */
.mmnav-group {
  padding: 0;
  border-top: 2px solid var(--gc, #007ACC);
  margin-top: 22px;
}
.mmnav-group:first-of-type { margin-top: 10px; }
.mmnav-group-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gc, #007ACC);
  padding: 10px 2px 8px;
  margin: 0;
}

/* Los dos sistemas: cards en vertical (icono arriba, nombre, subtitulo).
   POS protagonista. */
.mmnav-sistemas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 0 6px;
}
.mmnav-sistema {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 13px;
  background: #f6f8fb;
  border: 1px solid #e8ecf1;
  border-left: 4px solid var(--sc, #007ACC);
  border-radius: 12px;
  text-decoration: none;
}
.mmnav-sistema:active { background: #eef3f8; }
.mmnav-sis-logo { width: 32px; height: 32px; border-radius: 8px; }
.mmnav-sis-nombre { color: #343f52; font-size: 18px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.mmnav-sis-nombre b { color: var(--sc, #007ACC); font-weight: 800; }
.mmnav-sis-sub { font-size: 11px; font-weight: 600; color: #687084; letter-spacing: 0.01em; line-height: 1.2; }

/* AyresPOS, el protagonista: fondo azul suave y mas presencia */
.mmnav-sistema--principal {
  background: #eaf3fc;
  border-color: #cfe3f6;
  border-left-color: var(--sc);
  box-shadow: 0 6px 18px rgba(0, 122, 204, 0.10);
}

/* Los 14 modulos en 2 columnas, condensados */
.mmnav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.mmnav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4a5568;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 2px;
  text-decoration: none;
  border-bottom: 1px solid #f2f4f7;
}
/* el ultimo link de cada grupo no lleva linea: la separacion la da
   la linea de color del siguiente grupo, asi el aire es igual */
.mmnav-grid .mmnav-link:nth-last-child(-n+2):nth-child(odd),
.mmnav-grid .mmnav-link:last-child {
  border-bottom: 0;
}
.mmnav-link:active { color: #007ACC; }
/* Modulo que corresponde a la pagina abierta. El estado tambien lleva
   aria-current="page" en el HTML para no depender solo del color. */
.mmnav-link.is-current {
  color: var(--gc, #007ACC);
  font-weight: 700;
  padding-left: 10px;
  background: #f6f8fb;
  border-radius: 7px;
  box-shadow: inset 3px 0 0 var(--gc, #007ACC);
}
/* el icono toma el color de acento de su seccion (currentColor) */
.mmnav-ico {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  flex-shrink: 0;
  color: var(--gc, #007ACC);
}

/* Flotantes un poco mas chicos en mobile para que estorben menos.
   El de WhatsApp lo inyecta GTM (71px); el chat es un iframe de
   Cliengo cross-origin, no puedo tocar el circulo de adentro, asi
   que escalo el iframe entero con transform. */
@media (max-width: 991.98px) {
  a[href*="api.whatsapp.com"],
  a[href*="wa.me"][style*="fixed"] {
    width: 56px !important;
    height: 56px !important;
    bottom: 12px !important;
    left: 10px !important;
  }
  #chatIframe {
    transform: scale(0.82);
    transform-origin: bottom right;
  }
  .progress-wrap {
    transform: scale(0.82);
    transform-origin: bottom right;
  }
}

/* Pie del panel: pegado a Nosotros, practicamente sin aire */
.mmnav-foot {
  margin-top: 0;
  padding-top: 2px;
}

/* ============================================================
 * FOOTER EN MOBILE
 * La columna "Menu" (AyresPOS / AyresERP / Productos / ...) es
 * redundante con el menu hamburguesa nuevo. Solo en mobile se
 * oculta; en desktop queda.
 * ============================================================ */
@media (max-width: 991.98px) {
  .footer-nav-col { display: none !important; }
}
.mmnav-foot .btn { width: 100%; text-align: center; }
.mmnav-contacto { margin-top: 12px; font-size: 13px; color: #687084; text-align: center; line-height: 1.6; }
.mmnav-contacto a { color: #343f52; text-decoration: none; font-weight: 600; }

/* ============================================================
 * ESPACIADO DE PAGINA EN MOBILE
 * El aire entre secciones NO vive en <section> sino en los
 * .container internos con clases Bootstrap (pt-*, pb-*, py-*).
 * Aca se acotan los que quedan excesivos en un celular.
 * ============================================================ */
@media (max-width: 991.98px) {

  /* El CTA navy final ("Pedir demo"): el container traia pb-14 (90px)
     y quedaba un hueco enorme antes del footer. */
  .wrapper.bg-navy > .container,
  .wrapper.bg-dark > .container {
    padding-bottom: 40px !important;
  }

  /* El footer traia padding-top 140px en el container: el hueco grande
     arriba del logo "Ayres it". */
  footer > .container {
    padding-top: 48px !important;
  }

  /* Titulo de seccion -> bajada: respiro chico y parejo */
  .display-1 + .lead,
  .display-2 + .lead,
  .display-3 + .lead,
  .display-4 + .lead,
  .display-5 + .lead,
  h1 + .lead, h2 + .lead, h3 + .lead {
    margin-top: 6px !important;
  }
}

/* ============================================================
 * FLOTANTES · alineacion fina y que no pisen el footer
 * Medidos en el render: venian con bottom 12/10/110 y el chat pisaba
 * el boton "Pedir cotizacion" del footer por 1px. Aca se alinean los
 * tres al mismo nivel y margen, y se les da aire.
 * WhatsApp lo inyecta GTM (inline), el chat es un iframe cross-origin
 * de Cliengo (solo se puede escalar el iframe), el subir es la plantilla.
 * ============================================================ */
@media (max-width: 991.98px) {
  a[href*="api.whatsapp.com"],
  a[href*="wa.me"][style*="fixed"] {
    width: 54px !important;
    height: 54px !important;
    bottom: 16px !important;
    left: 12px !important;
  }
  #chatIframe {
    transform: scale(0.78);
    transform-origin: bottom right;
    right: 12px !important;
    bottom: 16px !important;
  }
  .progress-wrap {
    transform: scale(0.85);
    transform-origin: bottom right;
    right: 12px !important;
    bottom: 84px !important;   /* arriba del chat, mismo eje derecho */
  }
}