/* ============================================================
   BlackPrint — navegación de teléfono (estilos)
   ------------------------------------------------------------
   Todo vive dentro de la media query: en tablet y escritorio el
   botón y el panel no existen para el ojo ni para el lector de
   pantalla.
   ============================================================ */

.bp-menu-boton { display: none; }
.bp-menu { display: none; }

@media (max-width: 860px) {

  /* ---------- El botón ---------- */
  /* Fijo en la esquina, no dentro del encabezado: el runtime repinta el
     encabezado y se lleva cualquier nodo inyectado. Las medidas lo
     dejan alineado con los botones de la barra en las dos variantes de
     encabezado (68px de alto en el inicio, 61px en las internas). */
  .bp-menu-boton {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    position: fixed;
    top: 12px;
    right: 14px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    box-sizing: border-box;
    background: none;
    border: none;
    cursor: pointer;
    color: #f6f5f5;
    /* Por encima del panel para poder cerrarlo con el mismo dedo. */
    z-index: 1002;
  }

  /* El encabezado ya no necesita espacio para "Agenda una demo" a la
     derecha del todo: se le deja hueco al botón del menú. */
  [style*="position: absolute"][style*="z-index: 60"],
  [style*="position: sticky"][style*="z-index: 90"] {
    padding-right: 58px !important;
  }

  .bp-menu-boton span {
    display: block;
    height: 1.5px;
    width: 100%;
    border-radius: 1px;
    background: currentColor;
    color: inherit;
    transition: transform 220ms cubic-bezier(.16,1,.3,1), opacity 160ms;
  }

  /* El encabezado del inicio va sobre fondo oscuro y el de las
     internas también; currentColor hereda el blanco del nav. */
  [style*="z-index: 60"] .bp-menu-boton,
  [style*="z-index: 90"] .bp-menu-boton { color: #f6f5f5; }

  .bp-menu-boton[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }
  .bp-menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .bp-menu-boton[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  /* ---------- El panel ---------- */
  .bp-menu {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    inset: 0;
    z-index: 1001;
    padding: 88px 24px 32px;
    box-sizing: border-box;
    background: #121011;
    /* Se mantiene montado y solo se oculta: así la transición corre en
       los dos sentidos y el lector de pantalla no lo anuncia cerrado. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 240ms ease, transform 300ms cubic-bezier(.16,1,.3,1), visibility 0s 240ms;
  }

  .bp-menu.abierto {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 200ms ease, transform 340ms cubic-bezier(.16,1,.3,1), visibility 0s;
  }

  .bp-menu-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .bp-menu-lista a,
  .bp-menu-lista button {
    display: block;
    width: 100%;
    padding: 17px 4px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: none;
    text-align: left;
    font: 500 22px 'Bai Jamjuree', sans-serif;
    letter-spacing: -0.025em;
    color: #f6f5f5;
    cursor: pointer;
  }

  .bp-menu-lista a:active,
  .bp-menu-lista button:active { color: #52bcf5; }

  .bp-menu-pie {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .bp-menu-cta,
  .bp-menu-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 26px;
    font: 500 16px 'Work Sans', sans-serif;
    letter-spacing: -0.015em;
    text-decoration: none;
  }

  .bp-menu-cta {
    background: #0875e3;
    color: #ffffff;
  }

  .bp-menu-sec {
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bp-menu, .bp-menu-boton span { transition: none; }
}

@media (max-width: 860px) {
  /* ---------- Encabezado del inicio ----------
     El index del diseño trae su propio encabezado (absoluto, z-index 60)
     y NO el nav compartido con botón que usan las otras páginas. En 390px
     sus enlaces se envuelven en cuatro renglones —Productos/Soluciones/
     Modelos, Empresa, ES/EN + Iniciar sesión, Agenda una demo— y el
     inicio se quedaba sin menú, que es lo que reportó Mauricio.

     Se compacta a un renglón: logo y Agenda una demo. Las secciones se
     alcanzan por el botón, que monta bp-movil.js. */
  [style*="position: absolute"][style*="z-index: 60"] {
    flex-wrap: nowrap !important;
    padding-left: 14px !important;
    padding-right: 58px !important;
    /* Sin esto la barra se cierra a 0px al ocultarle los enlaces y el
       logo desaparece con ella. */
    min-height: 60px !important;
  }

  [style*="position: absolute"][style*="z-index: 60"] > [style*="gap: 32px"] {
    display: none !important;
  }

  [style*="position: absolute"][style*="z-index: 60"] [style*="gap: 18px"] {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  [style*="position: absolute"][style*="z-index: 60"] [style*="gap: 18px"] > *:not(a),
  [style*="position: absolute"][style*="z-index: 60"] a[style*="border: 1px solid"] {
    display: none !important;
  }

  [style*="position: absolute"][style*="z-index: 60"] a {
    white-space: nowrap !important;
  }

  [style*="position: absolute"][style*="z-index: 60"] a[style*="height: 38px"] {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}

/* ---------- Espacio para la barra de acción fija ----------
   La barra de "¿Cuál es tu pregunta de dónde? · Agenda" mide 67px y va
   fija abajo. Sin colchón, al llegar al final de la página tapa de forma
   permanente las últimas líneas del pie — medido: "Aviso de privacidad"
   y las coordenadas quedaban inalcanzables, no hay scroll que los saque.
   72px = la barra más un respiro. */
@media (max-width: 860px) {
  /* El colchón va en el PIE, no en el body. Probado con body: la regla
     se aplica —72px computados— pero no alarga el área de scroll, porque
     el contenedor que hace scroll no es el body en esta página. Medido:
     con la página hasta el fondo, "Aviso de privacidad" seguía 39px por
     debajo del borde superior de la barra. En el pie, que es un bloque
     normal en el flujo, sí funciona. */
  [data-screen-label="Footer"] { padding-bottom: 84px !important; }
}

@media (max-width: 860px) {
  /* ---------- Una sola hamburguesa en el inicio ----------
     El index trae el nav compartido con su propio botón, pero colocado
     de forma que solo aparece al hacer scroll — medido: al abrir la
     página está a 2,552px de altura, mientras que en Soluciones está en
     y=0. Por eso el inicio se veía sin menú arriba, y al bajar salían
     DOS botones: el suyo y el nuestro.

     Se oculta el suyo. El nuestro es fijo, está desde el primer momento
     y lleva a las cuatro secciones. Uno solo, siempre en el mismo sitio. */
  [data-bpnav="1"] [data-m="mob"] { display: none !important; }
}

@media (max-width: 860px) {
  /* ---------- Las preguntas frecuentes ----------
     La fila es un flex con justify-content:space-between y flex-wrap:wrap.
     Cuando la pregunta ocupa dos renglones, llena el ancho y empuja el
     signo "+" a una línea propia debajo — un hueco raro de 45px que
     rompe la lista. Se ve en "¿De dónde vienen los datos y cómo cuidan
     la privacidad?".

     Con nowrap el signo se queda a la derecha y la pregunta se ajusta.
     El min-width:0 es obligatorio: sin él un hijo flex no baja de su
     ancho de contenido y el "+" se saldría de la caja. */
  [data-screen-label="FAQ"] [style*="justify-content: space-between"] {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  [data-screen-label="FAQ"] [style*="justify-content: space-between"] > *:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  [data-screen-label="FAQ"] [style*="justify-content: space-between"] > *:last-child {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 860px) {
  /* ---------- El pie, en dos columnas ----------
     En teléfono la rejilla del pie (1.4fr 1fr 1fr 1fr) colapsa a una
     sola columna y deja los dieciséis enlaces en una tira de 789px —
     casi una pantalla entera de puro menú, que es lo que se sentía
     apretado y monótono.

     Con dos columnas los tres grupos caben en la mitad del alto y se
     leen como grupos, no como una lista interminable. El bloque de
     marca ocupa el ancho completo porque su frase no cabe en media
     columna. */
  [data-screen-label="Footer"] [style*="1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 20px !important;
  }

  [data-screen-label="Footer"] [style*="1.4fr 1fr 1fr 1fr"] > *:first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 860px) {
  /* ---------- Empresa: dos recortes medidos ----------
     Decisión de Mauricio tras ver los números. La página iba en 10
     pantallas de teléfono y el peso estaba concentrado, no repartido.

     1. VACANTES — 1,325px para listar puestos. Quien busca trabajo llega
        por LinkedIn; quien entra desde el celular a conocer la empresa
        no necesita pantalla y media de convocatorias. Sigue completa en
        escritorio, que es donde alguien se sienta a leerlas. */
  [data-screen-label="06 Vacantes"] { display: none !important; }

  /*  2. "DE NACIONAL A PREDIO" — 2,590px, un tercio de la página. Se
        queda el encabezado y la escala de zoom, que son el argumento; se
        van los dos visuales, que son decoración:

          · el recuadro de 566px con la rejilla de puntos y el rótulo
            "LA PREGUNTA QUE SE RESUELVE AQUÍ", pensado para verse ancho
          · la rejilla decorativa de 16 columnas dentro de la tarjeta de
            cobertura: 795px sin una palabra, solo celdas vacías

        Con eso la sección baja ~1,360px sin perder una sola frase. */
  [data-screen-label="03 De nacional a predio"] [style*="height: 566px"] {
    display: none !important;
  }

  [data-screen-label="03 De nacional a predio"] [style*="repeat(16, 1fr)"] {
    display: none !important;
  }
}