/* Páginas interiores (Sobre mí, …). Solo usa tokens --color-* (ver tokens.css). */

.page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* arriba, lo justo para no quedar bajo "← Inicio" (acaba a 4.5rem); abajo,
     lo justo para que el crédito fijo no tape el final. Más, y en pantallas
     grandes la página pasaba justo del alto de la ventana (scroll de más) */
  padding: clamp(5.5rem, 10vh, 7rem) clamp(1.5rem, 5vw, 3rem) 3.5rem;
}

/* Volver: etiqueta malva como las de la portada; se alarga al pasar por encima */

.back-link {
  position: fixed;
  top: 1.75rem;
  left: clamp(1.5rem, 4vw, 3rem);
  z-index: 1;
  display: flex;
  align-items: center;
  width: 8.5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  background: var(--color-tag);
  color: var(--color-text-on-tag);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 2px;
  white-space: nowrap;
  text-decoration: none;
  transition: width 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.back-link:hover,
.back-link:focus-visible,
.back-link:active {
  width: 11.5rem;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* Cabecera */

.page__header {
  margin-bottom: 2rem;
}

.page__title {
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: 0.01em; /* Plus Jakarta viene algo apretada en 700 */
  color: var(--color-heading);
}

.page__lead {
  margin-top: 1.25rem;
  font-size: 1.05rem; /* mismo tamaño que el texto de los apartados */
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-text);
}

/* Apartados: nombre en una columna estrecha a la izquierda, texto a la derecha */

.page__section {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
}

.page__section h2 {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  padding-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.page__section p {
  max-width: 78ch;
  text-align: justify; /* justificado a los dos lados */
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
}

.page__section p + p {
  margin-top: 0.75rem;
}

/* enlaces: de color (azul claro) y sin subrayado; algo más gruesos para que no
   se distingan solo por el color. Naranja al pasar por encima */
.page__section p a {
  color: var(--color-accent-soft);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.page__section p a:hover,
.page__section p a:focus-visible {
  color: var(--color-accent);
}

/* Despedida al final, a la izquierda, con la letra de los nombres de apartado */
.page__thanks {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

/* Contacto: fijo arriba a la derecha, a la altura de "← Inicio"; en azul claro
   (--color-button) porque son botones distintos */
.contact-links {
  position: fixed;
  top: 1.75rem;
  right: clamp(1.5rem, 4vw, 3rem);
  z-index: 1;
  display: flex;
  gap: 0.75rem;
}

.contact-link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--color-button);
  color: var(--color-text-on-button);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.contact-link:hover,
.contact-link:focus-visible,
.contact-link:active {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.contact-link svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* los logos de marca van rellenos, sin trazo */
.contact-link--brand svg {
  fill: currentColor;
  stroke: none;
}

/* Móvil: apartados en una columna. Los botones de arriba y el crédito de abajo
   van sobre franjas opacas para que el texto pase por debajo sin verse; el
   relleno de la página deja que, al final del scroll, todo el texto quede
   fuera de las franjas.
   Arriba, la franja lleva el mismo fondo que la página (halo incluido) y un
   borde recto: no se distingue, solo corta el texto. Para que su halo coincida
   con el de la página, el halo pasa a una capa fija a la pantalla (body::after;
   no con background-attachment: fixed, que en iPhone no funciona) */
@media (max-width: 640px) {
  body {
    background: var(--color-bg);
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: radial-gradient(900px circle at 0% 0%, var(--color-glow), transparent 60%);
    pointer-events: none;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 5.25rem; /* botones: 1.75rem arriba + 2.75rem de alto + margen */
    background:
      radial-gradient(900px circle at 0% 0%, var(--color-glow), transparent 60%),
      var(--color-bg);
    z-index: 1;
    pointer-events: none;
  }

  .back-link,
  .contact-links {
    z-index: 2;
  }

  .credit {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    text-align: right;
    background: var(--color-bg); /* franja de borde recto, sin degradado */
    z-index: 2;
  }

  .page {
    padding-bottom: 8rem; /* el crédito ocupa hasta cuatro líneas en pantallas estrechas */
  }

  .page__section {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.75rem 0;
  }
}