/*
 * Custom styles 
 * Date:   dec 18, 2025
 * Author: rabbit
*/

.small-code {
  font-size: 0.8em;			/* - 0.7em significa 70% del tamaño normal */
}

/* =========== Ejemplo de uso: ==================
   <section>
		<div class="columns">
			<div class="column" style="flex: 2;">
				Columna principal (66%)
			</div>
			<div class="column" style="flex: 1;">
				Columna secundaria (33%)
			</div>
		</div>
	</section>
 */

/*
  .columns {
    display: flex;
    gap: 40px;
  }

  .column {
    flex: 1;
  }
*/

/* =========== Ejemplo de uso: ==================
   <section class="two-columns">
		<div>
			Columna principal (48%)
		</div>
		
		<div>
			Columna secundaria (48%)
		</div>
	</section>

*/

.two-columns {
  display: flex;
  justify-content: space-between;
}
.two-columns > div {
  width: 48%;					/* 48% + 4% (inter espacio) + 48% */
}

/* Línea vertical en la primera columna */
.two-columns > div:first-child {
  border-right: 2px solid #ccc; /* color gris claro */
  padding-right: 10px;          /* espacio para que el texto no pegue a la línea */
}

/* Opcional: espacio en la segunda columna */
.two-columns > div:last-child {
  padding-left: 10px;
}