/* ══════════════════════════════════════════════════════════════════════
   Las guías
   ══════════════════════════════════════════════════════════════════════

   Encima de `legal.css`, que ya trae la columna de lectura y casi toda la
   tipografía del documento: `.doc`, sus títulos, `.lista`, `.destacado`,
   `.nota`. Aquí solo va lo que un artículo tiene y un documento legal no —
   subtítulos, migas, guías relacionadas y el cierre— para no duplicar.

   Y por qué existen estas páginas: quien vende lámparas no busca «app para
   fotos nocturnas», porque no sabe que eso existe. Busca «cómo vender más
   lámparas» o «cómo hacer que mi tienda parezca cara». Estas páginas
   responden eso de verdad; el producto aparece donde encaja y no antes.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Las migas ───────────────────────────────────────────────────────── */
.migas {
  margin: 0 0 22px;
  font-size: 12.5px;
  color: var(--tinta-suave);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  transition: color var(--lento) var(--paso);
}
.migas a { color: var(--tinta-media); text-decoration: none; }
.migas a:hover { color: var(--tinta); }
.migas span[aria-hidden] { opacity: 0.5; }

/* ── Subtítulos ──────────────────────────────────────────────────────── */
.doc h3 {
  margin: 30px 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--tinta);
  transition: color var(--lento) var(--paso);
}

/* El minuto de lectura, junto a la fecha. Se pone porque en un listado de
   guías la diferencia entre entrar y no entrar suele ser saber si hay que
   sentarse o no. */
.doc-meta {
  margin: 0 0 34px;
  font-size: 12.5px;
  color: var(--tinta-suave);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  transition: color var(--lento) var(--paso);
}

/* ── El cierre ───────────────────────────────────────────────────────────
   Una sola llamada, al final y no flotando por el medio: el artículo tiene
   que valer aunque nadie pulse. */
.cierre-guia {
  margin: 46px 0 0;
  padding: 26px 26px 28px;
  border: 1px solid var(--linea-fina);
  border-radius: var(--radio);
  background: var(--fondo-alto);
  transition: background var(--lento) var(--paso), border-color var(--lento) var(--paso);
}
.cierre-guia h2 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.018em;
}
.cierre-guia p { margin: 0 0 16px; }
.cierre-guia p:last-of-type { margin-bottom: 0; }
.cierre-guia .boton { margin-top: 4px; }

/* ── Guías relacionadas ──────────────────────────────────────────────── */
.relacionadas {
  margin: 46px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--linea-fina);
  transition: border-color var(--lento) var(--paso);
}
.relacionadas > .etiqueta { margin-bottom: 16px; }
.relacionadas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  /* Dos columnas también aquí: una lista de dos enlaces apilada ocupa una
     pantalla de móvil para decir dos cosas. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.relacionadas a {
  display: block;
  padding: 15px 17px;
  border: 1px solid var(--linea-fina);
  border-radius: var(--radio-chico);
  color: var(--tinta);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 240ms var(--paso), background var(--lento) var(--paso);
}
.relacionadas a:hover { border-color: var(--linea); background: var(--fondo-alto); }

/* ── El índice de guías ──────────────────────────────────────────────── */
.guias {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.guias li { display: flex; }
.guias a {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 22px 22px 24px;
  border: 1px solid var(--linea-fina);
  border-radius: var(--radio);
  background: var(--fondo-alto);
  text-decoration: none;
  transition: border-color 240ms var(--paso), transform 240ms var(--paso),
              background var(--lento) var(--paso);
}
.guias a:hover { border-color: var(--linea); transform: translateY(-2px); }
.guias b {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.016em;
  line-height: 1.25;
  color: var(--tinta);
  transition: color var(--lento) var(--paso);
}
.guias span {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}
.guias em {
  margin-top: auto;
  padding-top: 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}