/* ---------------------------------------------------------------------------
   Ajustes de producción — Bull Finance

   El design system exportado por Claude Design no trae ninguna media query, así
   que en pantallas chicas la barra de navegación y el correo desbordaban y
   aparecía scroll horizontal. Esto lo corrige SIN tocar styles.css, que es un
   archivo del design system y se pisa en cada export.

   Se carga desde el bloque helmet de cada página, después del design system,
   para que gane en la cascada sin necesidad de !important.
--------------------------------------------------------------------------- */

/* La barra de navegación es un flex de una sola línea: en un celular el botón
   "Escribinos" se salía de la pantalla y arrastraba scroll horizontal. */
.nav {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

@media (max-width: 640px) {
  /* El logo pasa a ocupar su propia fila y el resto se centra debajo. */
  .nav { justify-content: center; }
  .nav > a:first-of-type {
    width: 100%;
    justify-content: center;
    margin-bottom: var(--space-1);
  }
}

/* El correo es una sola palabra larga que no puede achicarse, así que estiraba
   su columna y desbordaba alrededor de los 1024px. Se permite cortarlo. */
a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* Seguro general: ningún elemento debería poder ensanchar la página. */
html, body {
  overflow-x: hidden;
}

/* Nota: los títulos NO se tocan. Medidos con Cormorant Garamond real a 390px,
   ninguno pasa de dos renglones ni desborda. El "H1 de tres renglones" que
   creí ver era un artefacto de medir con una tipografía de reemplazo. */

/* ---------------------------------------------------------------------------
   Texto justificado

   Justificar obliga al navegador a estirar los espacios entre palabras hasta
   llenar el renglón. Eso funciona en una columna ancha de diario, pero acá
   ninguna columna pasa de unos 550px: la página entera vive dentro de 1160px
   y las tarjetas son de dos columnas. A ese ancho se abren los "ríos", esos
   canales blancos que cruzan el párrafo en diagonal y cansan al leer.

   Probé primero activando el guionado automático, que es la solución elegante,
   pero depende de que el navegador tenga el diccionario de español cargado y
   no se puede garantizar en todos. Alinear a la izquierda es predecible y
   siempre se ve bien.
--------------------------------------------------------------------------- */
[style*="text-align: justify"] {
  text-align: left !important;
}

/* Grilla del pie. Va acá y no en el atributo style para que la media query de
   abajo pueda ganarle sin !important. En escritorio: bloque de marca ancho y
   tres columnas de datos. Por debajo de 760px no entran (250 + 185 + 185 ya
   pasa el ancho de un celular), asi que se apilan en una sola columna.
   OJO: html,body tienen overflow-x hidden mas arriba, asi que un desborde acá
   NO se ve como barra horizontal: se corta en silencio. Medir por elemento. */
.pie-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1.15fr) repeat(auto-fit, minmax(185px, 1fr));
  gap: var(--space-6);
}
@media (max-width: 760px) {
  .pie-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}