/* ============================================================
   BIO · sobre mí
   ------------------------------------------------------------
   Bloque de marca personal con foto y comentario.
   El .bio-grid (estructura de columnas) vive en layout.css
   porque es layout, no estilo de componente.

   Detalles visuales:
     · Foto grande con cabeza asomando del recuadro
     · Rombo verde decorativo detrás de la foto
     · Eyebrow mono verde + título bold + lead generoso
     · Separador con guion verde ("— Atiendo en español…")
     · Micro-CTA "Ver cómo trabajo ↓" con underline verde
   ============================================================ */
.bio {
  /* Mismo background que la sección servicios (body): el verde abismo
     oscuro deja que el rombo verde y la foto resalten sobre el fondo. */
  background: var(--color-bg);
  position: relative;
}

/* Líneas verdes largas difuminadas que reemplazan los bordes de
   sección. ::before = arriba (división hero ↔ bio), ::after = abajo
   (división bio ↔ servicios). Verde clorofila centrado, transparente
   en los extremos, para que se vea como separador elegante y no como
   una línea dura. */
.bio::before,
.bio::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
      transparent 0%,
      var(--color-accent) 50%,
      transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}

.bio::before {
  top: 0;
}

.bio::after {
  bottom: 0;
}

/* ---------- Foto + rombo decorativo ---------- */
.bio-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  /* El rombo se posiciona absolutamente relativo a .bio-photo */
}

.bio-photo__diamond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  /* Verde Clorofila del accent con opacity baja: el rombo se ve pero
     no brilla tanto, dejando que la foto sea la protagonista.
     Tamaño más chico que la foto (440px) para que solo asome por las
     4 puntas y NO por los lados (eso creaba la ilusión de "borde"). */
  background: var(--color-accent);
  opacity: 0.55;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 12px;
  z-index: 0;
}

.bio-photo__img {
  display: block;
  width: 340px;
  height: 340px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: none;
  /* Sin box-shadow: la referencia no tiene sombra rectangular.
     Solo el rombo verde detrás marca la profundidad. */
  transform: translateY(-20%);
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  .bio-photo__diamond {
    width: 300px;
    height: 300px;
  }

  .bio-photo__img {
    width: 440px;
    height: 440px;
    /* Desktop: 25% de asomar, equivalente a ~80px por encima */
    transform: translateY(-30%);
  }
}

/* ---------- Texto ---------- */
.bio-text {
  /* Cap de lectura cómoda: 65ch evita líneas demasiado largas
     ahora que .bio-grid ocupa el ancho completo del .container. */
  max-width: 65ch;
  position: relative;
}

.bio-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.75rem;
  font-weight: 500;
}

.bio-title {
  color: var(--color-text);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  line-height: 1.15;
}

.bio-lead {
  color: var(--color-text);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
  opacity: 0.92;
}

.bio-lead strong {
  color: var(--color-accent);
  font-weight: 600;
}

/* ---------- Separador con guion verde ---------- */
.bio-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text);
  font-size: 0.95rem;
  margin: 1.5rem 0 0.5rem;
}

.bio-divider__dash {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.bio-divider__text {
  color: var(--color-text);
  /* Sin opacity: con 0.88 el contraste contra #0D1B1E cae a 4.7:1
     y falla WCAG AA (necesita ≥4.5:1 — borderline). Usamos el
     color sólido del token y dejamos el tono apagado via el
     color mismo, no via opacity, para garantizar el contraste. */
}

.bio-divider__sep {
  color: var(--color-text-muted);
  margin: 0 0.15rem;
}

/* ---------- Micro-CTA "Ver cómo trabajo" ---------- */
.bio-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid var(--color-accent);
  margin-top: 1rem;
  transition: opacity 0.18s ease;
}

.bio-cta:hover {
  opacity: 0.8;
}

/* Focus visible · accesibilidad WCAG 2.4.7 */
.bio-cta:focus-visible {
  opacity: 0.8;
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.bio-cta__arrow {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
}