/* assets/css/autores.css — /autores y /autores/<slug>.
 *
 * ESTA PÁGINA NO CARGA index.css
 *
 * Igual que las de colección: sus tokens se atan a los de marca aquí arriba.
 * Sin esto la página saldría con la tipografía del navegador y los enlaces
 * azules por defecto — que es exactamente lo que le pasó a /colecciones antes
 * de que hubiera una prueba mirándolo.
 *
 * La rejilla es de cuatro columnas en escritorio, dos en tablet y una en
 * móvil, con `minmax(0, 1fr)`: el `auto` implícito de grid es la causa
 * recurrente de desbordes horizontales en este repositorio, y con tarjetas que
 * llevan nombres largos y listas de destinos volvería a pasar.
 */

.pagina-autores {
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tinta: var(--color-brand-ink);
  --mudo: var(--color-mudo);
  --linea: var(--color-linea);
  --coral: var(--color-brand-coral);
  --crema: var(--color-brand-cream);
  --noche: var(--color-brand-night);

  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  line-height: 1.6;
}

.aut-pagina {
  /* Ancho de lectura acotado; el 100% con padding evita que un hijo ancho
     empuje la página. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) clamp(48px, 7vw, 96px);
}

.pagina-autores h1,
.pagina-autores h2,
.pagina-autores h3 { font-family: var(--serif); letter-spacing: -0.015em; }
.pagina-autores a { color: inherit; }

/* ───────────── Migas ───────────── */
.aut-migas {
  font-size: 0.85rem;
  color: var(--mudo);
  padding: clamp(16px, 3vw, 28px) 0 0;
}
.aut-migas a { color: var(--mudo); text-decoration: none; }
.aut-migas a:hover { color: var(--coral); text-decoration: underline; }
.aut-migas span { margin: 0 4px; }

/* ───────────── Hero ───────────── */
.aut-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 5vw, 64px) 0 clamp(32px, 5vw, 72px);
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 900px) { .aut-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.aut-eyebrow {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--coral);
}
.aut-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.1;
}
.aut-entrada {
  margin: 0 0 28px;
  max-width: 56ch;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  color: var(--mudo);
}
.aut-hero__acciones, .aut-cta__acciones, .aut-ficha__acciones {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 0;
}

.aut-hero__mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.aut-hero__mosaico img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-medium);
  background: var(--color-brand-mist);
}

/* ───────────── Botones ───────────── */
.aut-btn {
  display: inline-flex; align-items: center; gap: 8px;
  /* 44 px de área táctil: mínimo del encargo, y no por casualidad. */
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none;
  background: transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.aut-btn:hover { background: var(--tinta); color: var(--color-white); }
.aut-btn--primario {
  background: var(--coral); border-color: var(--coral); color: var(--color-white);
}
.aut-btn--primario:hover { background: var(--color-brand-coral-oscuro); border-color: var(--color-brand-coral-oscuro); }
.aut-btn--claro { border-color: rgba(255,255,255,.55); color: var(--color-white); }
.aut-btn--claro:hover { background: var(--color-white); color: var(--noche); }

/* ───────────── Directorio ───────────── */
.aut-destacados, .aut-directorio, .aut-equipo { padding: clamp(36px, 5vw, 72px) 0 0; }
.aut-destacados h2, .aut-equipo h2, .aut-directorio h2, .aut-ficha__guias h2 {
  margin: 0;
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 600;
}
.aut-equipo__intro { margin: 10px 0 0; max-width: 62ch; color: var(--mudo); }

.aut-directorio__cab {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px;
  margin-bottom: clamp(18px, 2.5vw, 28px);
}
.aut-cuenta { margin: 0; color: var(--mudo); font-size: 0.92rem; }

.aut-controles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: clamp(22px, 3vw, 34px);
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--linea);
  border-radius: var(--radius-medium);
}
@media (min-width: 720px) { .aut-controles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .aut-controles { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; } }

.aut-filtro {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--mudo);
  min-width: 0;
}
.aut-filtro select, .aut-filtro input {
  min-height: 44px;
  width: 100%;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radius-small);
  background: var(--color-white);
  color: var(--tinta);
  font: inherit;
  font-size: 0.95rem; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.aut-limpiar {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radius-small);
  background: var(--color-white);
  color: var(--tinta);
  font: inherit; font-size: 0.92rem; font-weight: 600;
  cursor: pointer;
}
.aut-limpiar:hover { border-color: var(--tinta); }

.aut-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 640px)  { .aut-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .aut-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Los destacados van a tres: son un escaparate, no la rejilla completa. */
@media (min-width: 1040px) { .aut-rejilla--destacados { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aut-destacados .aut-rejilla, .aut-equipo .aut-rejilla { margin-top: clamp(18px, 2.5vw, 28px); }

/* ───────────── Tarjeta de autor ───────────── */
.aut-tarjeta {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--linea);
  border-radius: var(--radius-medium);
  overflow: hidden;
}
.aut-tarjeta__foto {
  display: block;
  /* Proporción uniforme para todas: una foto vertical y otra cuadrada en la
     misma fila es lo que hace que una rejilla parezca rota. */
  aspect-ratio: 1 / 1;
  background: var(--color-brand-mist);
}
.aut-tarjeta__foto img, .aut-ficha__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.aut-inicial {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--color-brand-sky);
  color: var(--color-brand-blue);
  font-family: var(--serif); font-size: 2.6rem; font-weight: 600;
}
.aut-tarjeta__cuerpo {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 20px;
  min-width: 0;
}
.aut-tarjeta__cuerpo h3 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.aut-tarjeta__cuerpo h3 a { text-decoration: none; }
.aut-tarjeta__cuerpo h3 a:hover { color: var(--coral); }
.aut-tarjeta__lugar {
  margin: 0;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--coral);
}
.aut-tarjeta__bio {
  margin: 0; color: var(--mudo); font-size: 0.93rem;
  /* Tres líneas: las bios reales tienen longitudes muy distintas y sin esto
     una tarjeta estira la fila entera. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  line-clamp: 3; overflow: hidden;
}
.aut-datos { margin: 4px 0 0; display: grid; gap: 6px; }
.aut-dato { display: grid; grid-template-columns: minmax(0, 88px) minmax(0, 1fr); gap: 10px; font-size: 0.86rem; }
.aut-dato dt { color: var(--mudo); }
.aut-dato dd { margin: 0; overflow-wrap: anywhere; }
.aut-tarjeta__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin: auto 0 0; padding-top: 12px;
  border-top: 1px solid var(--linea);
}
.aut-guias { font-size: 0.84rem; color: var(--mudo); }
.aut-enlace {
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
  /* Área táctil sin romper la línea de base del pie de la tarjeta. */
  display: inline-flex; align-items: center; min-height: 24px;
}
.aut-enlace:hover { color: var(--coral); text-decoration: underline; }

/* ───────────── Estados vacíos ───────────── */
.aut-vacio {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(24px, 4vw, 40px);
  background: var(--color-white);
  border: 1px dashed var(--linea);
  border-radius: var(--radius-medium);
  color: var(--mudo);
}
.aut-vacio p { margin: 0 0 10px; max-width: 62ch; }
.aut-vacio p:last-child { margin-bottom: 0; }
.aut-vacio strong { color: var(--tinta); }
.aut-vacio button {
  min-height: 44px; margin-left: 8px; padding: 8px 16px;
  border: 1px solid var(--linea); border-radius: var(--radius-small);
  background: var(--color-white); color: var(--tinta);
  font: inherit; font-weight: 600; cursor: pointer;
}

/* ───────────── CTA ───────────── */
.aut-cta {
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(32px, 5vw, 64px);
  background: var(--noche);
  color: var(--color-white);
  border-radius: var(--radius-large);
  text-align: center;
}
.aut-cta h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); font-weight: 600; }
.aut-cta p { margin: 0 auto 24px; max-width: 54ch; color: rgba(255,255,255,.82); }
.aut-cta__acciones { justify-content: center; }

/* ───────────── Formulario ───────────── */
.aut-contacto { padding: clamp(40px, 6vw, 80px) 0 0; }
.aut-contacto__intro h2 { margin: 0 0 10px; font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); font-weight: 600; }
.aut-contacto__intro p { margin: 0 0 24px; max-width: 60ch; color: var(--mudo); }

.aut-form {
  display: grid; gap: 16px;
  max-width: 680px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--color-white);
  border: 1px solid var(--linea);
  border-radius: var(--radius-medium);
}
.aut-form__fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .aut-form__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aut-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.88rem; font-weight: 600; min-width: 0;
}
.aut-form input, .aut-form select, .aut-form textarea {
  min-height: 44px;
  width: 100%; max-width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--linea); border-radius: var(--radius-small);
  background: var(--color-white); color: var(--tinta);
  font: inherit; font-weight: 400;
}
.aut-form textarea { min-height: 130px; resize: vertical; }
.aut-form__consentimiento {
  flex-direction: row; align-items: flex-start; gap: 10px;
  font-weight: 400; font-size: 0.9rem; color: var(--mudo);
}
.aut-form__consentimiento input {
  width: 20px; height: 20px; min-height: 20px; margin-top: 2px; flex: 0 0 auto;
}
.aut-form button[type="submit"] {
  justify-self: start;
  min-height: 44px; padding: 12px 26px;
  border: 1px solid var(--coral); border-radius: 999px;
  background: var(--coral); color: var(--color-white);
  font: inherit; font-weight: 600; cursor: pointer;
}
.aut-form button[type="submit"]:hover:not(:disabled) { background: var(--color-brand-coral-oscuro); }
.aut-form button[type="submit"]:disabled { opacity: .6; cursor: progress; }

.aviso-form {
  max-width: 680px; margin: 0 0 16px;
  padding: 12px 16px; border-radius: var(--radius-small);
  font-size: 0.93rem;
}
.aviso-form--mal { background: #FDECEA; border: 1px solid #F3B7B1; color: #8A1B12; }

.aut-exito {
  max-width: 680px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--color-white); border: 1px solid var(--linea);
  border-radius: var(--radius-medium);
}
.aut-exito h2 { margin: 0 0 8px; font-size: 1.3rem; }
.aut-exito p { margin: 0 0 16px; color: var(--mudo); }
.aut-exito button {
  min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--tinta); border-radius: 999px;
  background: transparent; color: var(--tinta);
  font: inherit; font-weight: 600; cursor: pointer;
}

/* ───────────── Ficha individual ───────────── */
.aut-ficha__cab {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 4vw, 48px) 0 clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 820px) { .aut-ficha__cab { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; } }
.aut-ficha__foto {
  aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius-large);
  background: var(--color-brand-mist);
}
.aut-ficha h1 { margin: 0 0 10px; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); font-weight: 600; }
.aut-ficha__lugar {
  margin: 0 0 16px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--coral);
}
.aut-ficha__bio { margin: 0 0 20px; max-width: 60ch; color: var(--mudo); }
.aut-datos--ficha { margin-bottom: 20px; max-width: 52ch; }
.aut-ficha__enlaces { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.aut-ficha__enlaces a { font-size: 0.9rem; font-weight: 600; }
.aut-ficha__guias { padding: clamp(32px, 4vw, 56px) 0 0; }
.aut-ficha__guias .aut-rejilla { margin-top: clamp(18px, 2.5vw, 28px); }

.aut-guia {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--color-white); border: 1px solid var(--linea);
  border-radius: var(--radius-medium); overflow: hidden;
}
.aut-guia__foto { display: block; aspect-ratio: 16 / 10; background: var(--color-brand-mist); }
.aut-guia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aut-guia__cuerpo { padding: 16px 16px 20px; min-width: 0; }
.aut-guia__lugar {
  margin: 0 0 6px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--coral);
}
.aut-guia__cuerpo h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 600; }
.aut-guia__cuerpo h3 a { text-decoration: none; }
.aut-guia__cuerpo h3 a:hover { color: var(--coral); }
.aut-guia__cuerpo p { margin: 0; color: var(--mudo); font-size: 0.9rem; }

.aut-404 { padding: clamp(48px, 8vw, 110px) 0; text-align: center; }
.aut-404 h1 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 600; }
.aut-404 p { margin: 0 0 22px; color: var(--mudo); }

/* ───────────── Accesibilidad ───────────── */
.pagina-autores :focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .pagina-autores *, .pagina-autores *::before, .pagina-autores *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}