/* Trámites y Derechos — tokens de marca v2.0 (agosto 2026) */

:root{
  /* Núcleo */
  --td-toga:        #202950;  /* fondo dominante · texto sobre blanco */
  --td-codice:      #141B3A;  /* profundidad · base de degradados · anclas */
  --td-papel:       #FDFDFD;  /* aire · texto sobre azul */
  --td-ambar:       #FFB55E;  /* acento — SOLO sobre fondo oscuro */

  /* Apoyo */
  --td-ambar-tinta: #A85A12;  /* el ámbar para fondos claros */
  --td-bruma:       #B1C4E4;  /* texto secundario sobre azul */
  --td-vigilia:     #5A4180;  /* solo extremo de degradado */
  --td-senal:       #2A2F9E;  /* solo extremo de degradado */
  --td-sepia:       #7A6E63;  /* solo trama de puntos, al 20% */

  /* Funcionales — interfaz, no marca */
  --td-exito:  #00794A;
  --td-error:  #B3261E;
  --td-info:   #2A2F9E;

  /* Degradados — siempre 165° */
  --td-g01-toga:    linear-gradient(165deg,#141B3A 0%,#2A2F9E 100%);
  --td-g02-vigilia: linear-gradient(165deg,#202950 0%,#5A4180 100%);
  --td-g03-ambar:   linear-gradient(165deg,#FFB55E 0%,#D9822B 100%);
  --td-g04-bruma:   linear-gradient(165deg,#202950 0%,#141B3A 100%);

  /* Tipografía */
  --td-display:   'Archivo','Archivo Narrow','Arial Narrow',Impact,sans-serif;
  --td-texto:     'Figtree','Segoe UI',system-ui,-apple-system,sans-serif;
  --td-editorial: 'Crimson Pro',Georgia,serif;
  --td-acento:    'Caveat','Bradley Hand','Segoe Script',cursive;

  /* Escala modular 1,25 */
  --td-fs-1: 12px; --td-fs-2: 14px; --td-fs-3: 16px; --td-fs-4: 20px;
  --td-fs-5: 25px; --td-fs-6: 31px; --td-fs-7: 39px; --td-fs-8: 49px;
  --td-fs-9: 61px; --td-fs-10: 76px;

  /* Espaciado, múltiplos de 4 */
  --td-sp-1: 4px;  --td-sp-2: 8px;  --td-sp-3: 12px; --td-sp-4: 16px;
  --td-sp-5: 24px; --td-sp-6: 32px; --td-sp-7: 48px; --td-sp-8: 64px;

  /* Radios */
  --td-r-sm: 8px; --td-r-md: 12px; --td-r-pill: 99px;

  /* Línea divisoria sobre fondo oscuro */
  --td-line: rgba(253,253,253,.14);
}

/* Titulares: hay que forzar el eje de ancho de la variable */
.td-display{
  font-family:var(--td-display);font-weight:900;
  font-variation-settings:'wdth' 87.5;
  text-transform:uppercase;line-height:.92;letter-spacing:-.01em;
}
.td-display--narrow{font-variation-settings:'wdth' 75}

/* Marcador ámbar: se aplica a la palabra que decide.
   El rectángulo es la caja de contenido de la fuente (~1,15 em de alto), no la
   caja de línea. Con el interlineado 0,92 de los titulares se monta sobre el
   renglón de arriba —se come tildes y signos de apertura— y queda pegado al de
   abajo. Por eso todo bloque que lo use afloja el interlineado: ver la regla
   `:has(.td-mark)` de sitio.css. */
.td-mark{
  background:var(--td-ambar);color:var(--td-toga);
  padding:0 .22em;border-radius:3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* Acento manuscrito: máximo 6 palabras, nunca para datos */
.td-script{font-family:var(--td-acento);font-weight:600;color:var(--td-ambar)}

/* Botones */
.td-btn{font-family:var(--td-texto);font-weight:800;font-size:15px;
  padding:13px 26px;border-radius:var(--td-r-sm);display:inline-block;text-decoration:none}
.td-btn--primario{background:var(--td-ambar);color:var(--td-toga)}
.td-btn--secundario{border:2px solid var(--td-papel);color:var(--td-papel)}
.td-btn--terciario{color:var(--td-ambar);border-bottom:2px solid var(--td-ambar);border-radius:0;padding:4px 0}

/* Trama de puntos: una sola esquina, nunca bajo texto */
.td-trama{
  background-image:radial-gradient(var(--td-sepia) 24%,transparent 25%);
  background-size:13px 13px;opacity:.2;
  -webkit-mask-image:radial-gradient(circle at 70% 70%,#000 20%,transparent 72%);
          mask-image:radial-gradient(circle at 70% 70%,#000 20%,transparent 72%);
}

/* Foco de teclado visible: accesibilidad, no decoración */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--td-ambar);outline-offset:2px;
}

/* Modo claro: TODOS los ámbares de texto pasan a Ámbar Tinta */
.td-claro{background:var(--td-papel);color:var(--td-toga)}
.td-claro a,.td-claro .td-script,.td-claro .td-btn--terciario{color:var(--td-ambar-tinta)}
.td-claro .td-btn--terciario{border-bottom-color:var(--td-ambar-tinta)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}