/* Página «Enlaces» (link in bio): tarjetas grandes y pulsables, pensada para abrirse desde TikTok.
   Usa las variables y la tipografía de styles.css; el resto del sitio no se toca. */

.bio { padding: 40px 0 72px; }
.bio .wrap { max-width: 520px; }

/* Cabecera: avatar, nombre y línea */
.bio-cab { text-align: center; margin-bottom: 28px; }
.bio-avatar {
  width: 92px; height: 92px; border-radius: 26px; margin: 0 auto 16px;
  box-shadow: 0 18px 36px -18px rgba(28, 27, 24, .55);
}
.bio-nombre {
  font-family: var(--sans); font-weight: 800; font-size: 34px; letter-spacing: -.035em; line-height: 1;
  color: var(--ink);
}
.bio-nombre em { font-family: var(--serif); font-weight: 500; font-style: italic; color: var(--butano); letter-spacing: -.01em; }
.bio-linea { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; }
.bio-linea span { color: var(--muted); }

/* Lista de tarjetas */
.bio-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bio-tarjeta {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  min-height: 72px; padding: 14px 16px;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 18px;
  color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease,
    box-shadow var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.bio-tarjeta:active { transform: scale(.985); }
.bio-tarjeta:hover, .bio-tarjeta:focus-visible { border-color: var(--butano); }
@media (hover: hover) and (pointer: fine) {
  .bio-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(28, 27, 24, .45); }
}
.bio-icono {
  width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--ink);
}
.bio-icono svg { width: 22px; height: 22px; }
.bio-texto { min-width: 0; }
.bio-titulo { display: block; font-weight: 700; font-size: 17px; line-height: 1.25; }
.bio-sub { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.bio-flecha { color: var(--muted); font-size: 20px; line-height: 1; transition: color var(--dur-hover) ease, transform var(--dur-hover) var(--ease-out); }
.bio-tarjeta:hover .bio-flecha { color: var(--butano); transform: translateX(2px); }

/* Etiquetas «Gratis» y «Nuevo» */
.bio-etiqueta {
  position: absolute; top: -9px; right: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--butano-boton); color: var(--white);
}
.bio-etiqueta-nuevo { background: var(--pino); }

/* Tarjeta destacada (boceto): fondo tinta */
.bio-destacada { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.bio-destacada .bio-icono { background: rgba(255, 253, 248, .12); color: var(--paper); }
.bio-destacada .bio-sub { color: #bdb5a5; }
.bio-destacada .bio-flecha { color: #bdb5a5; }
.bio-destacada:hover, .bio-destacada:focus-visible { border-color: var(--butano); background: #000; }

/* Tarjeta de WhatsApp: verde con contraste AA */
.bio-wa { background: #17753f; border-color: #17753f; color: var(--white); }
.bio-wa .bio-icono { background: rgba(255, 253, 248, .16); color: var(--white); }
.bio-wa .bio-sub, .bio-wa .bio-flecha { color: #d6ecdc; }
.bio-wa:hover, .bio-wa:focus-visible { background: #125f33; border-color: #125f33; }

/* Pie corto de la página */
.bio-nota { text-align: center; margin: 28px 0 0; font-size: 14px; color: var(--muted); }
.bio-nota a { color: var(--ink-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bio-nota a:hover { color: var(--butano-dark); }

/* Entrada escalonada de las tarjetas (una sola vez, al cargar) */
@media (prefers-reduced-motion: no-preference) {
  .bio-cab { animation: pc-entra var(--dur-entrada) var(--ease-out) both; }
  .bio-lista > li { animation: pc-entra var(--dur-entrada) var(--ease-out) both; }
  .bio-lista > li:nth-child(1) { animation-delay: 60ms; }
  .bio-lista > li:nth-child(2) { animation-delay: 110ms; }
  .bio-lista > li:nth-child(3) { animation-delay: 160ms; }
  .bio-lista > li:nth-child(4) { animation-delay: 210ms; }
  .bio-lista > li:nth-child(5) { animation-delay: 260ms; }
  .bio-lista > li:nth-child(6) { animation-delay: 310ms; }
  .bio-lista > li:nth-child(7) { animation-delay: 360ms; }
}

@media (max-width: 400px) {
  .bio { padding-top: 28px; }
  .bio-tarjeta { grid-template-columns: 40px 1fr auto; gap: 12px; padding: 12px 14px; }
  .bio-icono { width: 40px; height: 40px; }
  .bio-titulo { font-size: 16px; }
}