/* ==========================================================================
   TIPOGRAFÍA
   --------------------------------------------------------------------------
   Estilos base de texto y clases tipográficas reutilizables.
   ========================================================================== */

/* Tamaño base de la página. Todo el sitio usa "rem", así que cambiar este
   valor agranda o reduce TODA la tipografía y los espacios a la vez.
   100% = 16px · 106.25% = 17px · 112.5% = 18px · 118.75% = 19px */
html {
  font-size: 106.25%;
}

@media (min-width: 768px) {
  html {
    font-size: 112.5%;
  }
}

@media (min-width: 1280px) {
  html {
    font-size: 118.75%;
  }
}

/* Escritorio: todo el sitio se muestra al 75 % (equivale a tener el navegador
   en 75 % de zoom). Para cambiar el tamaño, ajusta este valor. */
@media (min-width: 1280px) {
  html {
    zoom: 0.75;
  }
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  color: var(--c-text);
  background-color: var(--c-bg);
}

h1,
h2,
h3,
h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

::selection {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* Etiqueta sobre cada título de sección: rombo + texto + línea.
   Ej: "◆ Sobre mí ——" */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-accent);
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--c-accent);
  transform: rotate(45deg);
}

.eyebrow::after {
  content: "";
  width: 3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}

/* Título grande de sección */
.section-title {
  font-size: var(--fs-2xl);
  max-width: 18ch;
}

/* Palabra destacada del título: gradiente turquesa → índigo */
.section-title em {
  font-style: normal;
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Párrafo introductorio de sección */
.lead {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  max-width: 58ch;
}

.mono {
  font-family: var(--ff-mono);
}

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