/* ══════════════════════════════════════════════════════════════════════════
   edosorio.mx — capa de movimiento
   Regla del sistema: el movimiento EXPLICA o no existe. Nada decorativo que
   distraiga de un documento judicial. Tres familias, y ninguna más:

     1. revelar   — el documento se descubre conforme se lee (foja que entra).
     2. trazar    — un razonamiento se dibuja paso a paso (dos diagramas).
     3. contar    — una cifra verificable se levanta desde cero.

   Todo respeta `prefers-reduced-motion`: con la preferencia activa, el estado
   final se pinta de golpe y no se mueve una sola cosa.
   ══════════════════════════════════════════════════════════════════════════ */

/* La cabecera va fija: sin este respiro, saltar a #contacto deja el título
   escondido detrás de ella. */
html { scroll-padding-top: 6rem; }

/* ── 1 · revelar ─────────────────────────────────────────────────────────── */
.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--retraso, 0ms);
  will-change: opacity, transform;
}
.revelar.visible { opacity: 1; transform: none; }

/* Hilo de rúbrica: el avance de lectura, del grosor de una línea de tinta. */
#hilo-lectura {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--rubrica-viva);
  opacity: .7; z-index: 50; pointer-events: none;
}

/* ── 2 · trazar: los diagramas que explican ──────────────────────────────── */
.diagrama {
  margin: 2.5rem 0 .5rem;
  padding: 1.75rem 0 1.25rem;
  border-top: 1px solid var(--linea-tenue);
  border-bottom: 1px solid var(--linea-tenue);
}
.diagrama svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagrama figcaption {
  font: 400 .9375rem/1.6 var(--sans);
  color: var(--foja);
  margin-top: 1rem;
  max-width: var(--medida);
}

.diagrama .trazo {
  stroke-dasharray: var(--largo, 400);
  stroke-dashoffset: var(--largo, 400);
  transition: stroke-dashoffset 1.15s cubic-bezier(.65, 0, .35, 1);
  transition-delay: var(--retraso, 0ms);
}
.diagrama.andando .trazo { stroke-dashoffset: 0; }

/* Un trazo que YA es punteado no puede dibujarse con esta técnica: el
   `stroke-dasharray` de la animación pisaría el patrón de guiones y la línea
   acabaría sólida — que es justo lo contrario de lo que el pie de figura
   promete. Ese trazo entra apareciendo, y conserva su punteado. */
.diagrama .trazo-punteado {
  opacity: 0;
  transition: opacity .8s ease;
  transition-delay: var(--retraso, 700ms);
}
.diagrama.andando .trazo-punteado { opacity: 1; }

.diagrama .nodo,
.diagrama .etiqueta {
  opacity: 0;
  transition: opacity .55s ease;
  transition-delay: var(--retraso, 0ms);
}
.diagrama.andando .nodo,
.diagrama.andando .etiqueta { opacity: 1; }

.diagrama .rotulo-svg {
  font: 500 .74rem var(--sans);
  fill: var(--tinta-suave);
  letter-spacing: .01em;
}
/* En la variante vertical el lienzo es angosto, así que el texto puede ir a
   su tamaño real: en un teléfono se lee a ~14 px, no a 6. */
.diagrama .rotulo-svg.grande { font-size: 14px; }

/* Un diagrama por ancho de pantalla: el apaisado en escritorio, el vertical
   en el teléfono. El que no se muestra tampoco se anuncia al lector de voz. */
.diagrama .solo-angosto { display: none; }
@media (max-width: 680px) {
  .diagrama .solo-ancho   { display: none; }
  .diagrama .solo-angosto { display: block; }
}
.diagrama .rotulo-svg.tenue { fill: var(--foja); font-weight: 400; }
.diagrama .rotulo-svg.fuerte { fill: var(--rubrica); font-weight: 600; }
.diagrama .caja {
  fill: var(--papel-hondo);
  stroke: var(--linea);
  stroke-width: 1;
}
.diagrama .caja.viva { stroke: var(--rubrica); }

/* El punto de destino late una vez que la línea llegó: señala, no adorna. */
@media (prefers-reduced-motion: no-preference) {
  .diagrama.andando .late { animation: latir 2.8s ease-in-out 1.4s infinite; }
}
@keyframes latir {
  0%, 100% { r: 4; opacity: 1; }
  50%      { r: 6; opacity: .75; }
}

/* ── 3 · contar ──────────────────────────────────────────────────────────── */
.cifras dd .numero { font-variant-numeric: tabular-nums; }

/* ── Sello «por confirmar»: honestidad visible, no letra chica ───────────── */
.por-confirmar {
  display: inline-block;
  font: 400 .6875rem/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sello);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: .28rem .45rem;
  margin-left: .5rem;
  vertical-align: middle;
  white-space: nowrap;
}
.bloque-por-confirmar {
  border-left: 2px solid var(--sello);
  padding-left: 1.1rem;
  margin: 1.5rem 0;
}
.bloque-por-confirmar .nota {
  font: 400 .9375rem/1.6 var(--sans);
  color: var(--foja);
  margin-top: .6rem;
}

/* ── Prensa ──────────────────────────────────────────────────────────────── */
.prensa { list-style: none; padding: 0; margin: 2rem 0 0; }
.prensa > li {
  padding: 1.35rem 0;
  border-top: 1px solid var(--linea-tenue);
}
.prensa > li:last-child { border-bottom: 1px solid var(--linea-tenue); }
.prensa .medio {
  font: 400 .6875rem var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--foja);
  display: block;
  margin-bottom: .45rem;
}
.prensa h3 {
  font: 600 1.0625rem/1.45 var(--sans);
  margin: 0 0 .5rem;
  max-width: var(--medida);
}
.prensa h3 a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--linea); }
.prensa h3 a:hover { border-bottom-color: var(--rubrica-viva); color: var(--rubrica); }
.prensa .cita-prensa {
  font: italic 400 1.0625rem/1.6 var(--serif);
  color: var(--tinta-suave);
  max-width: var(--medida);
  margin: 0 0 .5rem;
}
.prensa .credito { font: 400 .6875rem var(--mono); letter-spacing: .04em; color: var(--foja); }

/* ── Preguntas ───────────────────────────────────────────────────────────── */
.preguntas { margin-top: 2rem; }
.preguntas > div {
  padding: 1.5rem 0;
  border-top: 1px solid var(--linea-tenue);
}
.preguntas > div:last-child { border-bottom: 1px solid var(--linea-tenue); }
.preguntas h3 {
  font: 600 1.0625rem/1.45 var(--sans);
  color: var(--tinta);
  margin: 0 0 .6rem;
  max-width: var(--medida);
}
.preguntas p {
  font: 400 1.0625rem/1.65 var(--sans);
  color: var(--tinta-suave);
  max-width: var(--medida);
  margin: 0;
}

/* ── Contacto: «cuénteme su caso» ────────────────────────────────────────── */
.dos-canales {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 2rem;
  align-items: start;
}
.canal-contacto h3 {
  font: 400 .6875rem var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--foja);
  margin: 0 0 .9rem;
}
.canal-contacto p { font: 400 1.0625rem/1.65 var(--sans); color: var(--tinta-suave); max-width: 32rem; }

.formulario label {
  display: block;
  font: 500 .78rem var(--sans);
  color: var(--tinta-suave);
  margin: 1rem 0 .35rem;
}
.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  font: 400 .95rem/1.5 var(--sans);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: .6rem .7rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.formulario textarea { min-height: 7.5rem; resize: vertical; font-family: var(--sans); }
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  outline: none;
  border-color: var(--rubrica);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rubrica) 14%, transparent);
}
.formulario .ayuda { font: 400 .78rem/1.55 var(--sans); color: var(--foja); margin-top: .4rem; }
.formulario .fila { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.formulario button {
  margin-top: 1.4rem;
  font: 500 .88rem var(--sans);
  color: var(--papel);
  background: var(--rubrica);
  border: 1px solid var(--rubrica);
  border-radius: 2px;
  padding: .7rem 1.3rem;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.formulario button:hover { background: var(--rubrica-viva); }
.formulario button:active { transform: translateY(1px); }
.formulario button[disabled] { opacity: .5; cursor: not-allowed; }
.formulario .acuse {
  margin-top: 1rem;
  font: 400 .85rem/1.6 var(--sans);
  color: var(--rubrica);
}

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .diagrama .trazo { stroke-dashoffset: 0; transition: none; }
  .diagrama .nodo, .diagrama .etiqueta { opacity: 1; transition: none; }
  #hilo-lectura { display: none; }
}