/* ═══════════════════════════════════════════════════════════════════════════
   AJURIDIC · despacho-visual.css — la sección «El despacho» de la portada
   (SUD, 2026-10-11 · rama feat/portada-despacho-visual)
   ---------------------------------------------------------------------------
   Nico: «dinamízala un poco, crea elementos visuales que acompañen al texto y
   lo hagan ameno; nadie lee estas parrafadas si ve tanto texto».
   Marcado: _migracion/genera-despacho-visual.py (cinco portadas). Solo lo
   cargan las portadas; no toca style.css.

   Reglas que cumple:
     · Colores, tipos y chaflán, solo por token de style.css.
     · Ninguna línea fina lateral ni filete bajo titular.
     · Movimiento solo con transform y opacity; con prefers-reduced-motion,
       quieto. El estado oculto solo existe bajo html.js-anim y hasta que
       interaccion.js (§10, data-anim) pone .es-visible: sin JS se ve todo.
     · Propiedades lógicas: el árabe sale en espejo sin parche.
     · CLS 0: nada cambia de tamaño al animarse.
   ═══════════════════════════════════════════════════════════════════════════ */

.dv { --dv-hueco: clamp(48px, 3vw + 36px, 88px); }
.dv ul, .dv ol { list-style: none; margin: 0; padding: 0; }
.dv li { margin: 0; }
.dv li::before { content: none; }

/* Icono del sprite en su ficha con chaflán. */
.dv-caso__icono, .dv-paso__icono, .dv-comp__icono, .dv-red__icono {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: var(--verd-suau);
  color: var(--verd);
  clip-path: var(--clip-chafla);
}
[dir="rtl"] :is(.dv-caso__icono, .dv-paso__icono, .dv-comp__icono, .dv-red__icono, .dv-dato, .dv-caso, .dv-comp) {
  clip-path: polygon(var(--chafla) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chafla));
}
:is(.dv-caso__icono, .dv-paso__icono, .dv-comp__icono, .dv-red__icono) svg { width: 24px; height: 24px; }


/* ── 1. Quién: la entrada, cuatro datos y la tarjeta de la titular ──────── */
.dv-quien { display: grid; gap: var(--esp-6); }
@media (min-width: 1024px) {
  .dv-quien { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--esp-8); align-items: start; }
}
.dv-entrada {
  max-width: 58ch;
  margin: 0 0 var(--esp-6);
  font-size: var(--fs-entradilla);
  line-height: 1.55;
  color: var(--tinta);
  text-wrap: pretty;
}
.dv-datos { display: grid; gap: var(--esp-2); }
@media (min-width: 640px) { .dv-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dv-dato {
  display: grid;
  grid-template-columns: 7.6rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--esp-4);
  align-items: start;
  padding: var(--esp-5);
  background: var(--superficie);
  clip-path: var(--clip-chafla);
}
.dv-dato__cifra { grid-row: 1 / span 2; }
@media (max-width: 639.98px) { .dv-dato { padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-5); } }
@media (min-width: 640px) {
  .dv-dato { grid-template-columns: none; grid-template-rows: none; align-content: start; }
  .dv-dato__cifra { grid-row: auto; margin-bottom: var(--esp-3); }
}
.dv-dato__cifra {
  font-family: var(--font-titular);
  font-weight: var(--peso-fuerte);
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--verd);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dv-dato__cifra--texto { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); letter-spacing: -0.02em; padding-top: .2em; }
@media (min-width: 640px) { .dv-dato__cifra--texto { padding-top: 0; line-height: 1.48; } }
[lang="ar"] .dv-dato__cifra { letter-spacing: 0; }
.dv-dato__nombre {
  font-family: var(--font-titular);
  font-weight: var(--peso-semi);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--tinta);
}
.dv-dato__nota {
  margin-top: var(--esp-1);
  font-size: var(--fs-peque);
  line-height: 1.5;
  color: var(--tinta-2);
}
.dv-dato--oscuro { background: var(--fosc); }
.dv-dato--oscuro .dv-dato__cifra { color: var(--verd-clar); }
.dv-dato--oscuro .dv-dato__nombre { color: #FFFFFF; }
.dv-dato--oscuro .dv-dato__nota { color: var(--tinta-inv); }

.dv-quien__titular .tarjeta { margin: 0; }


/* ── 2. Las cinco situaciones, cada una a su área ──────────────────────── */
.dv-casos { margin-top: var(--dv-hueco); }
.dv-casos__titulo { margin: 0; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--track-titular); text-wrap: balance; }
.dv-casos__intro { margin: var(--esp-2) 0 0; color: var(--tinta-2); }

.dv-casos__lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80%, 300px);
  gap: var(--esp-3);
  margin-top: var(--esp-5);
  /* En móvil, tira que sale del contenedor y muere en el borde. Sin JS. */
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--esp-1) var(--gutter) var(--esp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--verd-borde) transparent;
}
.dv-casos__lista > li { scroll-snap-align: start; display: flex; }
@media (min-width: 768px) {
  .dv-casos__lista {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .dv-casos__lista > li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .dv-casos__lista { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); }
  .dv-casos__lista > li:first-child { grid-column: 1; grid-row: 1 / span 2; }
}

.dv-caso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  width: 100%;
  padding: var(--esp-5);
  background: var(--superficie);
  color: var(--tinta);
  text-decoration: none;
  clip-path: var(--clip-chafla);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--trans-lenta), background-color var(--trans);
}
.dv-caso__area {
  font-family: var(--font-titular);
  font-size: var(--fs-kicker);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--verd);
}
[lang="ar"] .dv-caso__area { letter-spacing: 0; font-size: .875rem; }
.dv-caso__texto { font-size: 1.0625rem; line-height: 1.45; font-weight: var(--peso-medio); text-wrap: pretty; }
.dv-caso__ir { margin-top: auto; padding-top: var(--esp-2); color: var(--verd); display: inline-flex; }
.dv-caso__ir svg { width: 22px; height: 22px; transition: transform var(--trans-lenta); }
[dir="rtl"] .dv-caso__ir svg { transform: scaleX(-1); }
/* El chaflán se rellena al pasar: un triángulo que crece desde la esquina. */
.dv-caso::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 30px;
  height: 30px;
  background: var(--verd);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: scale(0);
  transform-origin: top right;
  transition: transform var(--trans-lenta);
}
[dir="rtl"] .dv-caso::after { clip-path: polygon(0 0, 100% 0, 0 100%); transform-origin: top left; }
.dv-caso:hover, .dv-caso:focus-visible { transform: translateY(-3px); }
.dv-caso:hover::after, .dv-caso:focus-visible::after { transform: scale(1); }
.dv-caso:hover .dv-caso__ir svg, .dv-caso:focus-visible .dv-caso__ir svg { transform: translateX(4px); }
[dir="rtl"] .dv-caso:hover .dv-caso__ir svg, [dir="rtl"] .dv-caso:focus-visible .dv-caso__ir svg { transform: scaleX(-1) translateX(4px); }
.dv-caso:active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
/* El chaflán recorta un anillo exterior: el foco va por dentro. */
.dv-caso:focus-visible { outline: 3px solid var(--focus); outline-offset: -5px; }

/* La multa: la única con una cifra en el texto («veinte días»). Oscura. */
.dv-caso--plazo { background: var(--fosc); color: #FFFFFF; }
.dv-caso--plazo .dv-caso__icono { background: rgba(180, 192, 86, .14); color: var(--verd-clar); }
.dv-caso--plazo .dv-caso__area, .dv-caso--plazo .dv-caso__ir { color: var(--verd-clar); }
.dv-caso--plazo::after { background: var(--verd-clar); }
.dv-caso__cifra {
  font-family: var(--font-titular);
  font-weight: var(--peso-fuerte);
  font-size: clamp(2.8rem, 1.6rem + 4vw, 5.6rem);
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--verd-clar);
  font-variant-numeric: tabular-nums;
}
.dv-caso__cifra > span { font-size: .36em; letter-spacing: 0; color: var(--tinta-inv); font-weight: var(--peso-semi); }
@media (min-width: 1024px) {
  .dv-caso--plazo { padding: var(--esp-7); gap: var(--esp-4); }
  .dv-caso--plazo .dv-caso__texto { font-size: 1.3rem; line-height: 1.35; }
}


/* ── 3. Se empieza por ahí: documento → plazo → el compromiso ──────────── */
.dv-camino { display: grid; gap: var(--esp-6); margin-top: var(--dv-hueco); }
@media (min-width: 1024px) {
  .dv-camino { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--esp-6); align-items: center; }
}
.dv-camino__intro {
  margin: 0 0 var(--esp-5);
  font-family: var(--font-titular);
  font-weight: var(--peso-semi);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--track-titular);
  color: var(--tinta);
  text-wrap: balance;
}
.dv-pasos { display: grid; gap: var(--esp-6); }
.dv-paso { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--esp-4); align-items: center; }
.dv-paso__icono { width: 56px; height: 56px; background: var(--superficie); }
.dv-paso__icono svg { width: 28px; height: 28px; }
.dv-paso:nth-child(2) .dv-paso__icono { background: var(--verd); color: #FFFFFF; }
.dv-paso__texto { font-family: var(--font-titular); font-weight: var(--peso-semi); font-size: 1.125rem; line-height: 1.3; color: var(--tinta); }
/* Flecha de un paso al siguiente (y del último al compromiso): un chevrón,
   no una línea. Hacia abajo en columna; hacia el lado en fila. */
.dv-paso::after {
  content: "";
  position: absolute;
  inset-inline-start: 22px;
  inset-block-start: calc(100% + 6px);
  width: 12px;
  height: 12px;
  border-right: 2.5px solid var(--verd);
  border-bottom: 2.5px solid var(--verd);
  transform: rotate(45deg);
}
@media (min-width: 640px) {
  .dv-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-7); }
  .dv-paso { grid-template-columns: none; align-items: start; justify-items: start; gap: var(--esp-4); }
  .dv-paso::after { inset-block-start: 22px; inset-inline-start: auto; inset-inline-end: calc(var(--esp-7) / -2 - 6px); transform: rotate(-45deg); }
  [dir="rtl"] .dv-paso::after { transform: rotate(135deg); }
  .dv-paso:last-child::after { content: none; }
}
@media (min-width: 1024px) {
  .dv-paso:last-child::after { content: ""; inset-inline-end: calc(var(--esp-6) / -2 - 4px); }
}

.dv-comp {
  padding: clamp(24px, 2.4vw + 14px, 48px);
  background-color: var(--fosc);
  background-image: radial-gradient(60% 80% at 90% 0%, rgba(180, 192, 86, .13), transparent 70%);
  color: var(--tinta-inv);
  clip-path: var(--clip-chafla);
}
.dv-comp__titulo {
  margin: 0 0 var(--esp-5);
  font-family: var(--font-titular);
  font-size: var(--fs-kicker);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--verd-clar);
}
[lang="ar"] .dv-comp__titulo { letter-spacing: 0; font-size: .875rem; }
.dv-comp__lista { display: grid; gap: var(--esp-4); }
.dv-comp__lista > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--esp-4); align-items: center; }
.dv-comp__icono { width: 40px; height: 40px; background: rgba(180, 192, 86, .14); color: var(--verd-clar); }
.dv-comp__icono svg { width: 22px; height: 22px; }
.dv-comp__lista span:not(.dv-comp__icono) {
  font-family: var(--font-titular);
  font-weight: var(--peso-semi);
  font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem);
  line-height: 1.3;
  color: #FFFFFF;
  text-wrap: balance;
}
.dv-comp em { font-style: normal; color: var(--verd-clar); }
.dv-comp__pie { margin: var(--esp-6) 0 0; max-width: 60ch; color: var(--tinta-inv); line-height: 1.6; }


/* ── 4. Generalista por decisión: hoy / mañana, la red y el ámbito ─────── */
.dv-red { display: grid; gap: var(--esp-6); margin-top: var(--dv-hueco); }
@media (min-width: 1024px) {
  .dv-red { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--esp-8); align-items: start; }
}
.dv-red__lema {
  margin: 0;
  font-family: var(--font-titular);
  font-weight: var(--peso-semi);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-wrap: pretty;
}
.dv-red__lema em {
  font-style: normal;
  color: var(--verd-fosc);
  background: linear-gradient(transparent 58%, var(--verd-suau) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.dv-red__lista { display: grid; gap: var(--esp-5); }
.dv-red__lista > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.dv-red__lista p { margin: 0; color: var(--tinta-2); line-height: 1.6; max-width: 60ch; }
.dv-red__lista strong { color: var(--tinta); }


/* ── Movimiento (solo transform y opacity) ─────────────────────────────── */
.js-anim .dv [data-anim] > *,
.js-anim .dv-datos > li,
.js-anim .dv-casos__lista > li,
.js-anim .dv-paso,
.js-anim .dv-comp,
.js-anim .dv-comp__lista > li {
  transition: opacity 520ms cubic-bezier(.2, 0, .2, 1), transform 520ms cubic-bezier(.2, 0, .2, 1);
}
.js-anim .dv-datos:not(.es-visible) > li,
.js-anim .dv-casos__lista:not(.es-visible) > li,
.js-anim .dv-red:not(.es-visible) > * { opacity: 0; transform: translateY(16px); }
.js-anim .dv-camino:not(.es-visible) .dv-camino__intro { opacity: 0; transform: translateY(12px); }
.js-anim .dv-camino:not(.es-visible) .dv-paso { opacity: 0; transform: translateY(12px) scale(.94); }
.js-anim .dv-camino:not(.es-visible) .dv-paso::after { opacity: 0; }
.js-anim .dv-camino:not(.es-visible) .dv-comp { opacity: 0; transform: translateY(20px); }
.js-anim .dv-camino:not(.es-visible) .dv-comp__lista > li { opacity: 0; transform: translateX(-12px); }
[dir="rtl"].js-anim .dv-camino:not(.es-visible) .dv-comp__lista > li { transform: translateX(12px); }
.dv-paso::after { transition: opacity 300ms ease-out; }

/* Escalonado: 80 ms entre piezas, como el resto de la web. */
.dv-datos > li:nth-child(2), .dv-casos__lista > li:nth-child(2), .dv-red > :nth-child(2) { transition-delay: 80ms; }
.dv-datos > li:nth-child(3), .dv-casos__lista > li:nth-child(3) { transition-delay: 160ms; }
.dv-datos > li:nth-child(4), .dv-casos__lista > li:nth-child(4) { transition-delay: 240ms; }
.dv-casos__lista > li:nth-child(5) { transition-delay: 320ms; }
.dv-paso:nth-child(1) { transition-delay: 120ms; }
.dv-paso:nth-child(1)::after { transition-delay: 380ms; }
.dv-paso:nth-child(2) { transition-delay: 420ms; }
.dv-paso:nth-child(2)::after { transition-delay: 680ms; }
.js-anim .dv-comp { transition-delay: 720ms; }
.dv-comp__lista > li:nth-child(1) { transition-delay: 900ms; }
.dv-comp__lista > li:nth-child(2) { transition-delay: 1000ms; }
.dv-comp__lista > li:nth-child(3) { transition-delay: 1100ms; }
/* Pasar el ratón no espera al escalonado. */
.dv-caso { transition-delay: 0s; }

/* Con movimiento reducido interaccion.js pone .es-visible de inmediato (no
   hay estado oculto); aquí solo se quitan las transiciones. */
@media (prefers-reduced-motion: reduce) {
  .dv *, .dv *::before, .dv *::after { transition: none !important; animation: none !important; }
  .dv-caso:hover, .dv-caso:focus-visible, .dv-caso:active { transform: none; }
}