/* #15 — Bloque credencial de founders, en el teléfono.
 *
 * El bloque se arma en escritorio con el sistema de diseño del sitio y no lleva ni un valor
 * inventado; acá sólo vive lo que cambia por debajo de 768, que es el reparto del espacio.
 *
 * Nada de esto toca el contrato del export: la sección de founders original no se modifica, este
 * bloque es una adición y estas reglas viven en la hoja propia como todas las demás.
 */

@media (max-width: 767px) {
  /* La banda de stats pasa a 2×2. Cuatro columnas a 360px dejarían ~70px por columna, y rótulos
   * como "del rubro Advertising, Marketing & PR" quedarían en cinco líneas cada uno: la banda
   * mediría más que el resto de la tarjeta junta. */
  [data-cred-stats] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* En 2×2 el separador vertical corresponde sólo a la segunda columna: la tercera stat abre fila
   * nueva y su borde izquierdo quedaría pegado al filo del card sin nada que separar. Entre las
   * dos filas va la misma línea del sistema, para que el lenguaje de la banda no cambie. */
  [data-cred-stat]:nth-child(3) {
    border-left: none !important;
  }
  [data-cred-stat]:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
  /* la banda a sangre usa el margen negativo del padding de escritorio (26); en el teléfono el
   * card tiene 22, así que el margen se corrige o la banda se saldría 4px por lado */
  [data-cred-stats] {
    margin: 0 -22px !important;
  }

  /* La cifra baja a 19px en el teléfono: es el tamaño de métrica del hero ("US$ 40M"), o sea un
   * valor del sistema y no inventado. A 22px, "1.867%" al 150% de escala de texto medía 105px en
   * una columna de 84 y asomaba 7px fuera del card. El estándar del sitio es limpio hasta 150%
   * —la degradación aceptada arranca en 175%— y una cifra NUNCA quiebra, así que el único grado
   * de libertad era el cuerpo. */
  [data-cred-stat] > span:first-child {
    font-size: 19px !important;
  }
  [data-cred-stat] {
    padding: 16px 10px !important;
  }

  /* En el teléfono el piso 1 se apila EN EL ORDEN DEL DOM: píldora, tile, cita — la píldora
   * arriba del Inc.5000, como pidió Nicolás — y TODO CENTRADO. La grilla de escritorio se desarma
   * a columna; el hueco en blanco que había bajo la cita era el flex-basis de 260px del layout
   * anterior vuelto altura, y con la grilla ya no existe. */
  [data-cred-piso1] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  [data-cred-piso1] > p {
    text-align: center;
  }

  /* Los dos botones de citas ocupan el ancho completo, uno por fila. Envueltos por `flex-wrap`
   * quedaban de anchos distintos —el texto de cada uno manda— y dos píldoras desparejas una
   * encima de la otra se leen como un error de armado, no como un par. */
  /* La flecha viaja CON el texto, no clavada al borde. El botón es flex y su texto es un nodo
   * anónimo: cuando envuelve en dos líneas, ese ítem llena todo el ancho disponible y empuja la
   * flecha al filo derecho — el justify-content:center computaba bien y aun así se veía
   * descentrado, porque el ítem de texto ERA todo el ancho. En flujo inline la flecha queda
   * pegada a la última palabra y el centrado es real, con una o con dos líneas. */
  [data-cred-citas] > a {
    flex: 1 1 100%;
    display: block !important;
    text-align: center;
  }

  [data-credencial] {
    padding: 22px !important;
  }
}