/* La página de perfil. La cabecera está en base.css. */

.hoja {
  max-inline-size: 820px;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 4.5rem);
}

/* Aquí la separación ya la pone el hueco entre bloques. */
.cabeza { margin-block-end: 0; }
.cabeza h1 { font-size: clamp(2rem, 5vw, 2.9rem); max-inline-size: 18ch; }

.tramo { display: flex; flex-direction: column; gap: 1.1rem; }

.rotulo {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--texto-3);
}


/* ------------------------------------------------------- Lo que sé hacer */

/* Una línea por cosa, en texto normal. */
.saber {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.saber li { color: var(--texto-2); }

/* --------------------------------------------------------- Dónde estudio */

.etapa {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.85rem;
}

.anios { font-family: var(--mono); font-size: 0.72rem; color: var(--acento); }
.etapa h3 { font-size: 1.05rem; font-weight: 500; }
.centro { margin-block-start: 0.15rem; color: var(--texto-2); font-size: 0.9rem; }


/* -------------------------------------------------------------- Hablamos */

.invitacion { max-inline-size: 46ch; color: var(--texto-2); }

.vias {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.vias li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding-block: 0.55rem;
}

.via-et {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.vias a {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  color: var(--acento);
  font-size: 0.94rem;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklab, var(--acento) 40%, transparent);
  overflow-wrap: anywhere;
}
.vias a:hover { text-decoration-color: currentColor; }

.via-txt { font-size: 0.94rem; color: var(--texto); }

/* Sin JavaScript el correo se lee igual, sólo que no es un enlace. La arroba
   la pone el CSS, así que la dirección entera no está escrita en ninguna
   parte del código. */
.correo span + span::before { content: "@"; }

.correo { color: var(--texto); text-decoration: none; }
.correo[href] { color: var(--acento); text-decoration: underline; }


@media (pointer: coarse), (max-width: 860px) {
  .vias a { min-block-size: 44px; }
}

@media (max-width: 620px) {
  .etapa, .vias li { grid-template-columns: 1fr; gap: 0.45rem; }
  .vias li { padding-block: 0.85rem; gap: 0.2rem; }
}