/* #region Variables */
:root {
  --text: #0c0e06;
  --background: #f8f9f3;
  --primary: #a5b560;
  --secondary: #acd099;
  --accent: #93c582;
}

/* #endregion */

/* #region Material icons: Recommended icon sizes */
span.size-20 {
  font-size: 20px;
  font-variation-settings: "OPSZ" 20;
}
span.size-24 {
  font-size: 24px;
  font-variation-settings: "OPSZ" 24;
}
span.size-40 {
  font-size: 40px;
  font-variation-settings: "OPSZ" 40;
}
span.size-48 {
  font-size: 48px;
  font-variation-settings: "OPSZ" 48;
}
/* #endregion */

/* #region Estilado */
.flex-horizontal {
  display: flex;
  flex-direction: row;
}
.flex-vertical {
  display: flex;
  flex-direction: column;
}

@media screen and (width <= 800px) {
  .flex-horizontal {
    flex-direction: column;
  }
}

em {
  font-style: normal;
  font-weight: bold;
  color: var(--accent);
}

.sin-decoraciones {
  text-decoration: none;
  list-style: none;
}

.font-accent {
  color: var(--accent);
}
.font-primary {
  color: var(--primary);
}
.font-text {
  color: var(--text);
}

/* #endregion */

/* #region Main */
* {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: Inter, sans-serif;
  font-optical-sizing: auto;
}
body {
  background: var(--primary);
}
/* #endregion */

/* #region Tarjeta */

.tarjeta h2 {
  margin-bottom: 16px;
}
.tarjeta h3 {
  margin-bottom: 8px;
}
.tarjeta .item:not(:last-child) {
  margin-bottom: 48px;
}

.tarjeta {
  margin: 5vw;
  padding: 2em;

  max-width: 900px;

  /* ya tiene flex */
  gap: 0.5em;

  border-radius: 40px;

  background-color: var(--background);
}

.tarjeta .info {
  /* ya tiene flex */
  gap: 2em;
  margin-bottom: 48px;
}

/* info */
.tarjeta .info p {
  flex: 3;
}
.tarjeta .info ul {
  flex: 2;
}
.tarjeta .info li:not(:last-child) {
  margin-bottom: 8px;
}

/* competencias */
.mostrar-competencias {
  gap: 2em;
}

.tarjeta .competencia {
  gap: 0.5em;
}

/* #endregion */