/* ============================================================
   credencial — bloque 2 (Un operador legal y local)
   Anatomy unlike siblings: NO retrato, NO portada. Es una "hoja"
   legal — documento sobre fieltro elevado, con hilo de oro al
   margen y folio volcado en vertical. Las provincias se leen como
   un registro subrayado dentro del propio texto (sin duplicar).
   Animación propia: el hilo de oro se traza de arriba hacia abajo,
   el subrayado del título avanza y el registro se enciende en oro.
   ============================================================ */

.credencial { padding-block: var(--aire-l); }

.credencial__hoja {
  position: relative;
  display: grid;
  grid-template-columns: clamp(6rem, 12vw, 11rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, var(--fieltro-alto), var(--fieltro));
  border: 1px solid var(--linde);
  border-radius: var(--radio);
  padding: clamp(1.9rem, 4vw, 3.6rem);
  overflow: hidden;
}
/* hilo de oro al margen — se traza en la animación */
.credencial__hoja::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(var(--oro), var(--esmeralda));
}

.credencial__margen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}
.credencial__vertical {
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--marfil-tenue);
}

.credencial__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--marfil);
}
.credencial__titulo::after {
  content: "";
  display: block;
  height: 2px;
  width: 3.4rem;
  background: var(--oro);
  margin-top: 1.1rem;
}

.credencial__texto {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.62;
  max-width: 64ch;
  margin: var(--aire-s) 0 var(--aire-m);
}

/* registro de jurisdicciones — realce dentro del texto, no caja */
.juris {
  color: var(--marfil);
  font-weight: 600;
  background: linear-gradient(var(--oro), var(--oro)) left 94% / 100% 1px no-repeat;
  padding-bottom: 2px;
}

@media (max-width: 760px) {
  .credencial__hoja { grid-template-columns: 1fr; gap: 1.4rem; }
  .credencial__margen { flex-direction: row; align-items: center; gap: 1rem; }
  .credencial__vertical { writing-mode: horizontal-tb; }
}

/* — animación propia del bloque (solo desktop, respeta reduce-motion) — */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .credencial__hoja { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
  .credencial__hoja::before { transform: scaleY(0); transform-origin: top; transition: transform .75s ease .15s; }
  .credencial__titulo::after { width: 0; transition: width .55s ease .35s; }
  .juris { background-size: 0% 1px; transition: background-size .5s ease .5s; }

  .credencial.en-vista .credencial__hoja { opacity: 1; transform: none; }
  .credencial.en-vista .credencial__hoja::before { transform: scaleY(1); }
  .credencial.en-vista .credencial__titulo::after { width: 3.4rem; }
  .credencial.en-vista .juris { background-size: 100% 1px; }
}