/* La Pratica — modulística del registro civil italiano */

:root {
  --carta: #FAF9F3;
  --ink: #1B1A15;
  --muted: #5F5C50;
  --fincatura: rgba(27, 26, 21, .16);
  --fincatura-forte: rgba(27, 26, 21, .32);
  --modulo: #4A5A7C;
  --timbro: #4B3A8C;
  --timbro-ok: #2F6B4F;
  --avviso: #A3352B;
  --verde-it: #238B45;
  --font-ui: "Archivo", system-ui, sans-serif;
  --font-mono: "Courier Prime", "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--carta);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* rayado de formulario, muy tenue */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 31px,
    rgba(74, 90, 124, .05) 31px, rgba(74, 90, 124, .05) 32px
  );
}

.mono { font-family: var(--font-mono); }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--modulo); }
a:hover { color: var(--modulo); }

:focus-visible { outline: 2px solid var(--timbro); outline-offset: 2px; }

/* ── Testata ── */
.tricolore {
  height: 4px;
  background: linear-gradient(to right,
    var(--verde-it) 0 33.3%, var(--carta) 33.3% 66.6%, var(--avviso) 66.6% 100%);
  border-block: 1px solid var(--fincatura-forte);
}

.testata-riga {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  max-width: 60rem; margin: 0 auto; padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--fincatura);
  flex-wrap: wrap;
}

.marchio { font-weight: 800; letter-spacing: .08em; font-size: .9rem; }
.marchio-sub { font-weight: 400; letter-spacing: .01em; color: var(--muted); font-size: .85rem; }
.paese { font-size: .8rem; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .45rem; }

.bandiera {
  width: 21px; height: 14px;
  border: 1px solid var(--fincatura-forte);
  display: inline-block;
  flex: none;
}
.bandiera-firma { width: 18px; height: 12px; vertical-align: -2px; }

/* chips de origen: bandera uruguaya / tricolor italiano */
.origine-uy::before, .origine-it::before {
  content: "";
  display: inline-block;
  width: 14px; height: 9px;
  margin-right: .4rem;
  vertical-align: -1px;
  border: 1px solid var(--fincatura-forte);
  background-size: cover;
}
.origine-uy::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 18'%3E%3Crect width='27' height='18' fill='%23fff'/%3E%3Cg fill='%230038A8'%3E%3Crect y='2' width='27' height='2'/%3E%3Crect y='6' width='27' height='2'/%3E%3Crect y='10' width='27' height='2'/%3E%3Crect y='14' width='27' height='2'/%3E%3C/g%3E%3Crect width='10' height='10' fill='%23fff'/%3E%3Ccircle cx='5' cy='5' r='2.4' fill='%23D9A404'/%3E%3C/svg%3E");
}
.origine-it::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 18'%3E%3Crect width='9' height='18' fill='%23238B45'/%3E%3Crect x='9' width='9' height='18' fill='%23fff'/%3E%3Crect x='18' width='9' height='18' fill='%23A3352B'/%3E%3C/svg%3E");
}
.paese-prossimo { color: var(--muted); }

/* ── Layout ── */
main { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

section { margin-top: 3.25rem; }
section[id] { scroll-margin-top: 3.75rem; } /* el índice fijo no tapa el título */

/* ── Hero ── */
.hero { padding-top: 3.5rem; position: relative; }
.hero > *:not(.scrivania) { position: relative; z-index: 1; }

/* ── Banderas de escritorio consular ── */
.scrivania {
  position: absolute;
  top: 1.5rem; right: 0;
  width: 200px; height: 140px;
  z-index: 0;
  pointer-events: none;
  opacity: .92;
}

.asta { position: absolute; bottom: 8px; width: 2px; height: 116px; background: var(--muted); transform-origin: bottom center; }
.asta::before { /* remate del asta */
  content: ""; position: absolute; top: -5px; left: -2px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--modulo);
}
.asta-it { left: 78px; transform: rotate(-13deg); }
.asta-uy { left: 118px; transform: rotate(13deg); }

.peana {
  position: absolute; bottom: 0; left: 68px;
  width: 62px; height: 8px;
  background: var(--key);
  border: 1px solid var(--fincatura-forte);
  border-radius: 2px;
}

.drappo {
  position: absolute; top: 6px; left: 2px;
  width: 74px; height: 50px;
  transform-origin: left center;
  clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
  box-shadow: 1px 1px 0 rgba(27, 26, 21, .18);
  animation: sventolio 3.4s ease-in-out infinite;
}
.drappo::after { /* pliegues del paño viajando con el viento */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(100deg,
    rgba(27, 26, 21, .16) 0 6px,
    rgba(255, 255, 255, .22) 6px 15px,
    rgba(27, 26, 21, 0) 15px 30px);
  background-size: 30px 100%;
  animation: pieghe 3.4s linear infinite;
}

.drappo-it {
  background: linear-gradient(to right,
    var(--verde-it) 0 33.3%, #FFFFFF 33.3% 66.6%, var(--avviso) 66.6% 100%);
}
.drappo-uy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 18' preserveAspectRatio='none'%3E%3Crect width='27' height='18' fill='%23fff'/%3E%3Cg fill='%230038A8'%3E%3Crect y='2' width='27' height='2'/%3E%3Crect y='6' width='27' height='2'/%3E%3Crect y='10' width='27' height='2'/%3E%3Crect y='14' width='27' height='2'/%3E%3C/g%3E%3Crect width='10' height='10' fill='%23fff'/%3E%3Cg transform='translate(5,5)' fill='%23D9A404'%3E%3Cpath d='M0-4.4 L.6-1.6 L-.6-1.6 Z'/%3E%3Cpath d='M0-4.4 L.6-1.6 L-.6-1.6 Z' transform='rotate(45)'/%3E%3Cpath d='M0-4.4 L.6-1.6 L-.6-1.6 Z' transform='rotate(90)'/%3E%3Cpath d='M0-4.4 L.6-1.6 L-.6-1.6 Z' transform='rotate(135)'/%3E%3Cpath d='M0-4.4 L.6-1.6 L-.6-1.6 Z' transform='rotate(180)'/%3E%3Cpath d='M0-4.4 L.6-1.6 L-.6-1.6 Z' transform='rotate(225)'/%3E%3Cpath d='M0-4.4 L.6-1.6 L-.6-1.6 Z' transform='rotate(270)'/%3E%3Cpath d='M0-4.4 L.6-1.6 L-.6-1.6 Z' transform='rotate(315)'/%3E%3Ccircle r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  animation-delay: -1.1s;
}
.drappo-uy::after { animation-delay: -1.1s; }

@keyframes sventolio {
  0%, 100% { transform: perspective(220px) rotateY(0deg) skewY(0deg); }
  30%      { transform: perspective(220px) rotateY(-9deg) skewY(1.2deg); }
  65%      { transform: perspective(220px) rotateY(6deg) skewY(-1deg); }
}
@keyframes pieghe {
  from { background-position-x: 0; }
  to   { background-position-x: 30px; }
}

.scrivania.ferma .drappo, .scrivania.ferma .drappo::after { animation-play-state: paused; }

@media (max-width: 860px) {
  .scrivania { top: .5rem; transform: scale(.7); transform-origin: top right; opacity: .6; }
}
@media (max-width: 600px) {
  /* se retira al aire del encabezado para no pisar el protocolo */
  .scrivania { top: -2.25rem; right: -.5rem; transform: scale(.5); opacity: .5; }
}

.protocollo {
  color: var(--modulo);
  font-size: .85rem;
  letter-spacing: .06em;
  border-bottom: 1px dashed var(--fincatura-forte);
  display: inline-block;
  padding-bottom: .15rem;
  min-height: 1.4em;
}

h1 {
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-top: 1rem;
  text-wrap: balance;
}

.hero-sotto {
  max-width: 46rem;
  margin-top: 1.25rem;
  color: var(--muted);
}
.hero-sotto strong { color: var(--ink); }

.riepilogo {
  margin-top: 2.25rem;
  border: 1px solid var(--fincatura-forte);
  padding: 1rem 1.25rem 1.25rem;
  background: rgba(255, 255, 255, .55);
}

.riepilogo-testa {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem;
}

.etichetta {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--modulo);
}

.riepilogo-count { font-size: .95rem; }

/* barra tipo regla */
.regola {
  position: relative;
  height: 14px;
  border: 1px solid var(--fincatura-forte);
  background:
    repeating-linear-gradient(to right,
      transparent 0 calc(10% - 1px), var(--fincatura) calc(10% - 1px) 10%);
}
.regola-fill {
  height: 100%;
  width: 100%;
  background: var(--timbro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.hero-azioni { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* ── Botones = acciones de oficina ── */
.bottone {
  display: inline-block;
  font: 600 .95rem var(--font-ui);
  letter-spacing: .02em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--fincatura-forte);
  padding: .7rem 1.2rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.bottone:hover { background: var(--ink); color: var(--carta); border-color: var(--ink); }

.bottone-timbro { border: 2px solid var(--timbro); color: var(--timbro); font-weight: 700; }
.bottone-timbro:hover { background: var(--timbro); color: #fff; border-color: var(--timbro); }

.collegamento {
  background: none; border: none; cursor: pointer;
  font: 400 .85rem var(--font-ui);
  color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.collegamento:hover { color: var(--ink); }

/* ── Moduli ── */
.modulo-intestazione {
  border-bottom: 2px solid var(--ink);
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
}
.modulo-intestazione h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: .35rem;
}

.modulo-nota { color: var(--muted); max-width: 50rem; margin-bottom: 1.75rem; }
.modulo-nota strong { color: var(--ink); }
.modulo-nota .mono { font-size: .85em; color: var(--ink); }

/* ── Avviso (doble filete) ── */
.avviso {
  border: 1px solid var(--avviso);
  outline: 1px solid var(--avviso);
  outline-offset: 3px;
  padding: 1.25rem 1.5rem;
  background: rgba(163, 53, 43, .04);
  max-width: 56rem;
}
.avviso-capo {
  font-weight: 800; letter-spacing: .12em; font-size: .8rem;
  color: var(--avviso);
  margin-bottom: .6rem;
}
.avviso p + p { margin-top: .6rem; }
.avviso .mono { font-size: .9em; }

/* el recuadro necesita aire cuando viene después de texto corrido */
.modulo .avviso { margin-top: 1.6rem; }
.modulo .avviso:first-child { margin-top: 0; }

.avviso-neutro { border-color: var(--fincatura-forte); outline-color: var(--fincatura-forte); background: transparent; }
.avviso-neutro .avviso-capo { color: var(--modulo); }

/* ── Quiz (MOD. A) ── */
.quadro {
  border: 1px solid var(--fincatura-forte);
  background: rgba(255, 255, 255, .55);
  padding: 1.75rem;
}

.quiz-domanda { font-size: 1.25rem; font-weight: 700; max-width: 44rem; text-wrap: balance; }
.quiz-num { font: 700 .72rem var(--font-mono); color: var(--modulo); letter-spacing: .1em; }

/* progreso honesto: cuatro pasos como máximo, sin denominador inventado */
.quiz-puntos { display: flex; align-items: center; gap: .35rem; margin-bottom: .9rem; }
.quiz-puntos .punto {
  width: 26px; height: 4px;
  background: var(--fincatura);
  display: block;
}
.quiz-puntos .punto-hecho { background: var(--timbro); }
.quiz-puntos .punto-actual { background: var(--modulo); }
.quiz-puntos .quiz-num { margin-left: .5rem; }

.quiz-texto { color: var(--muted); max-width: 44rem; margin-top: .6rem; }

.quiz-promesa { list-style: none; margin: 1rem 0 1.5rem; max-width: 42rem; }
.quiz-promesa li {
  padding: .3rem 0 .3rem 1.5rem;
  position: relative;
  color: var(--muted);
  font-size: .96rem;
}
.quiz-promesa li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--timbro-ok);
  font-family: var(--font-mono);
  font-weight: 700;
}

.quiz-ayuda { margin-top: .9rem; max-width: 44rem; }
.quiz-ayuda summary {
  cursor: pointer; list-style: none;
  font-size: .85rem; color: var(--modulo);
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-block;
}
.quiz-ayuda summary::-webkit-details-marker { display: none; }
.quiz-ayuda p {
  margin-top: .5rem;
  font-size: .92rem; color: var(--muted);
  border-left: 1px solid var(--fincatura-forte);
  padding-left: .8rem;
}

.verdetto-duda {
  font-size: .9rem; color: var(--avviso);
  border-left: 1px solid var(--avviso);
  padding-left: .8rem;
}
.verdetto-pie { font-size: .88rem; color: var(--muted); margin-top: .25rem; }

/* ayuda de primer uso del fascículo */
.tip-primero {
  border: 1px solid var(--timbro);
  background: rgba(75, 58, 140, .05);
  padding: 1.1rem 1.35rem 1.25rem;
  margin-bottom: 1.5rem;
}
.tip-capo {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--timbro);
  margin-bottom: .6rem;
}
.tip-pasos { margin: 0 0 .9rem 1.1rem; }
.tip-pasos li { color: var(--muted); font-size: .95rem; padding: .18rem 0; }
.tip-pasos li::marker { color: var(--timbro); font-family: var(--font-mono); font-weight: 700; }

.quiz-opzioni { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; max-width: 34rem; }
.quiz-opzioni .bottone { text-align: left; }

.quiz-indietro { margin-top: 1.25rem; }

/* Verdicto con sello */
.verdetto { display: grid; gap: 1rem; }
.verdetto-timbro-riga { margin: .5rem 0 .25rem; }
.verdetto p { max-width: 46rem; }
.verdetto p strong { }
.verdetto-spiega { color: var(--muted); }
.verdetto-spiega strong { color: var(--ink); }

/* ── Timbro (sello de goma) ── */
.timbro {
  display: inline-block;
  font: 700 .78rem var(--font-mono);
  letter-spacing: .08em;
  color: var(--timbro);
  border: 2px solid currentColor;
  border-radius: 3px;
  padding: .3rem .7rem;
  transform: rotate(-1.5deg);
  text-shadow: 0 0 .4px currentColor;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.14) 0%, transparent 60%);
  white-space: nowrap;
}
.timbro-grande {
  font-size: 1.05rem; padding: .5rem 1.1rem; transform: rotate(-2deg);
  /* doble anillo de sello oficial */
  box-shadow: 0 0 0 3px var(--carta), 0 0 0 4px currentColor;
  /* los veredictos largos parten en dos líneas en vez de salirse del cuadro */
  white-space: normal;
  max-width: 100%;
  text-align: center;
  text-wrap: balance;
}

.timbro-falta      { color: var(--muted); border-style: dashed; }
.timbro-pedida     { color: var(--modulo); }
.timbro-obtenida   { color: var(--timbro); }
.timbro-apostillada{ color: var(--timbro); }
.timbro-traducida  { color: var(--timbro); }
.timbro-lista      { color: var(--timbro-ok); }
.timbro-rosso      { color: var(--avviso); }

@keyframes stampata {
  0%   { transform: scale(1.35) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(.96) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1) rotate(-1.5deg); opacity: 1; }
}
.stampa { animation: stampata .28s cubic-bezier(.16, 1, .3, 1); }

/* ── Bollettino ── */
.timbro-inline { font-size: .68rem; padding: .12rem .45rem; transform: rotate(-1deg); vertical-align: middle; }

.boll-riga { border-top: 1px solid var(--fincatura); padding: 1rem 0 1.1rem; max-width: 52rem; }
#bollettino-lista .boll-riga:first-child { border-top: none; padding-top: 0; }
.boll-testa { display: flex; align-items: center; gap: .75rem; margin-bottom: .3rem; }
.boll-fecha { font-weight: 700; font-size: .9rem; color: var(--timbro); letter-spacing: .04em; }
.boll-testo { color: var(--muted); font-size: .97rem; }

/* ── Albero genealogico ── */
.albero-quadro {
  border: 1px solid var(--fincatura-forte);
  /* sol de mayo como marca de agua, papel sellado uruguayo */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50,50)' fill='%231B1A15' fill-opacity='.045'%3E%3Cg%3E%3Cpath d='M0-46 L4-16 L-4-16 Z'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(30)'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(60)'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(90)'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(120)'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(150)'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(180)'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(210)'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(240)'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(270)'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(300)'/%3E%3Cpath d='M0-46 L4-16 L-4-16 Z' transform='rotate(330)'/%3E%3C/g%3E%3Ccircle r='13'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -30px top -30px / 200px 200px,
    rgba(255, 255, 255, .55);
  padding: 1.25rem 1.5rem 1.5rem;
  margin-bottom: 1.75rem;
}
#albero { display: flex; flex-direction: column; align-items: flex-start; margin-top: 1rem; }

.nodo {
  display: grid;
  gap: .2rem;
  text-align: left;
  font-family: var(--font-ui);
  background: var(--carta);
  border: 1px solid var(--fincatura-forte);
  padding: .75rem 1rem .85rem;
  min-width: min(22rem, 100%);
  cursor: pointer;
  transition: transform .15s, border-color .3s, box-shadow .15s;
  box-shadow: 0 2px 0 var(--fincatura);
}
.nodo:hover { transform: translateY(1px); box-shadow: 0 1px 0 var(--fincatura); }

.nodo-rel { font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--modulo); }
.nodo-nome { font: 700 1rem var(--font-mono); color: var(--ink); }
.nodo-anonimo { color: var(--muted); font-weight: 400; }

.nodo-progresso { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.nodo-bar {
  flex: 1; height: 8px;
  border: 1px solid var(--fincatura-forte);
  display: block; overflow: hidden;
}
.nodo-fill {
  display: block; height: 100%; width: 100%;
  background: var(--timbro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.nodo-count { font-size: .8rem; color: var(--muted); }

.nodo-completo { border-color: var(--timbro-ok); box-shadow: 0 2px 0 rgba(47, 107, 79, .35); }
.nodo-completo .nodo-fill { background: var(--timbro-ok); }
.nodo-timbro { justify-self: start; margin-top: .4rem; }

.nodo-collegamento {
  width: 1px; height: 1.6rem;
  background: var(--fincatura-forte);
  margin-left: 3rem;
}

.nodo-seme { border-style: dashed; box-shadow: none; }
.nodo-seme .nodo-nome { color: var(--muted); font-weight: 400; }
.nodo-seme:hover { border-color: var(--timbro); }

@keyframes lampeggio-k {
  0%, 100% { outline: 2px solid transparent; outline-offset: 4px; }
  25%, 75% { outline: 2px solid var(--timbro); outline-offset: 2px; }
}
.lampeggio { animation: lampeggio-k 1.2s ease-out 1; }

/* ── Fascicolo ── */
.persona {
  border: 1px solid var(--fincatura-forte);
  background: rgba(255, 255, 255, .55);
  margin-bottom: 1.5rem;
}

.persona-testa {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--fincatura-forte);
  flex-wrap: wrap;
}

.persona-chi { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.persona-rel { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--modulo); }

.persona-nome {
  font: 700 1.05rem var(--font-mono);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--fincatura-forte);
  color: var(--ink);
  padding: .1rem .2rem;
  min-width: 14rem;
}
.persona-nome::placeholder { color: var(--muted); opacity: .7; }

.doc-riga {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--fincatura);
  flex-wrap: wrap;
}
.doc-riga:first-of-type { border-top: none; }

.doc-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.doc-nome { font: 700 .95rem var(--font-mono); }
.doc-meta { font-size: .8rem; color: var(--muted); }
.doc-meta .req { color: var(--timbro); font-weight: 600; }

.doc-azioni { display: flex; align-items: center; gap: .75rem; }

.timbro-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit;
  display: inline-flex; align-items: center; gap: .5rem;
}
.timbro-btn:hover .timbro { filter: brightness(.8); }
.timbro-btn-fin { cursor: default; }

/* qué pasa si lo tocás: visible siempre, también en celular */
.doc-pista {
  font: 400 .74rem var(--font-ui);
  color: var(--muted);
  white-space: nowrap;
}
.doc-pista-flecha { font-family: var(--font-mono); color: var(--modulo); }
.timbro-btn:hover .doc-pista { color: var(--ink); }
.timbro-btn:hover .doc-pista-flecha { color: var(--timbro); }

.doc-undo { font-size: 1rem; }

.persona-piede {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 1.25rem .9rem; flex-wrap: wrap;
}

.doc-add-input {
  font: 700 .95rem var(--font-mono);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--fincatura-forte);
  color: var(--ink);
  padding: .1rem .2rem;
  min-width: 18rem;
}
.doc-add-input::placeholder { color: var(--muted); opacity: .7; }

.fascicolo-azioni {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-top: .5rem;
}
.fascicolo-io { display: flex; gap: 1.25rem; }

.fascicolo-vuoto {
  border: 1px dashed var(--fincatura-forte);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.fascicolo-vuoto .mono { color: var(--ink); }

/* ── Guía (ALLEGATO 1) ── */
.passi { list-style: none; counter-reset: passo; max-width: 52rem; }
.passo {
  counter-increment: passo;
  padding: 1.5rem 0 1.5rem 4.25rem;
  border-top: 1px solid var(--fincatura);
  position: relative;
}
.passi .passo:first-child { border-top: none; }
.passo::before {
  content: counter(passo);
  position: absolute; left: 0; top: 1.4rem;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  font: 700 1.1rem var(--font-mono);
  color: var(--modulo);
  border: 1px solid var(--fincatura-forte);
  border-radius: 50%;
}
.passo h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .4rem; }
.passo p { color: var(--muted); font-size: .98rem; }
.passo p strong, .passo p a { color: var(--ink); }
.passo em { font-style: italic; }

/* ── Consultorio (ALLEGATO 2) ── */
.faq-grupo {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--modulo);
  margin: 2.25rem 0 .5rem;
}
.faq-grupo:first-of-type { margin-top: 1rem; }

.quesito {
  border-top: 1px solid var(--fincatura);
  max-width: 52rem;
}
.quesito:last-of-type { border-bottom: 1px solid var(--fincatura); }

.quesito summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .85rem 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.quesito summary::-webkit-details-marker { display: none; }
.quesito summary::before {
  content: "+";
  font: 700 1rem var(--font-mono);
  color: var(--timbro);
  flex: none;
  width: 1.1rem;
}
.quesito[open] summary::before { content: "−"; }
.quesito summary:hover { color: var(--modulo); }

.quesito-risposta { padding: 0 0 1.1rem 1.9rem; }
.quesito-risposta p { color: var(--muted); font-size: .97rem; max-width: 46rem; }
.quesito-risposta p + p { margin-top: .5rem; }
.quesito-risposta strong, .quesito-risposta a { color: var(--ink); }

.faq-coda {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--fincatura-forte);
  background: rgba(255, 255, 255, .55);
  max-width: 52rem;
  color: var(--muted);
}
.faq-coda a { color: var(--ink); }

/* ── Donaciones (marca da bollo) ── */
.dona {
  /* borde perforado de estampilla fiscal */
  border: 2px dashed var(--timbro-ok);
  outline: 1px solid var(--fincatura);
  outline-offset: 6px;
  padding: 1.75rem 2rem 2rem;
  max-width: 52rem;
  background: rgba(47, 107, 79, .04);
}
.dona .etichetta { color: var(--timbro-ok); }
.dona-titolo {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: .5rem;
  text-wrap: balance;
}
.dona-testo { color: var(--muted); margin-top: .75rem; max-width: 46rem; }
.dona-azioni { display: flex; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }
.dona-azioni .bottone-timbro { border-color: var(--timbro-ok); color: var(--timbro-ok); }
.dona-azioni .bottone-timbro:hover { background: var(--timbro-ok); color: #fff; border-color: var(--timbro-ok); }

/* ── La herramienta como proceso de dos pasos ── */
.pasos-app { list-style: none; margin-top: 2rem; display: grid; gap: 1.5rem; }

.paso-app {
  border: 1px solid var(--fincatura-forte);
  background: rgba(255, 255, 255, .5);
  min-width: 0;   /* que el contenido no pueda estirar la caja fuera de la pantalla */
}

.paso-cabeza {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--fincatura);
  flex-wrap: wrap;
}

.paso-num {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  font: 700 1.05rem var(--font-mono);
  border: 2px solid var(--fincatura-forte);
  border-radius: 50%;
  color: var(--muted);
}

.paso-titulo { flex: 1 1 12rem; min-width: 0; }
.paso-titulo h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.paso-sub { font-size: .87rem; color: var(--muted); margin-top: .1rem; }

.paso-estado {
  flex: none;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  color: var(--muted);
  border: 1px solid var(--fincatura-forte);
  padding: .25rem .55rem;
  border-radius: 2px;
}

.paso-cuerpo { padding: 1.25rem; }
.paso-cuerpo > section { margin-top: 0; }
.paso-espera { display: none; color: var(--muted); }

/* paso en curso: se destaca */
.paso-activo { border-color: var(--timbro); box-shadow: 0 2px 0 rgba(75, 58, 140, .18); }
.paso-activo .paso-num { border-color: var(--timbro); color: var(--timbro); }
.paso-activo .paso-estado { color: var(--timbro); border-color: var(--timbro); }

/* paso resuelto: se apaga y deja de pedir atención */
.paso-hecho { border-color: var(--timbro-ok); box-shadow: none; }
.paso-hecho .paso-num { border-color: var(--timbro-ok); color: var(--timbro-ok); }
.paso-hecho .paso-estado { color: var(--timbro-ok); border-color: var(--timbro-ok); }

/* paso que todavía no se puede hacer */
.paso-espera-activa { opacity: .62; }
.paso-espera-activa .paso-cuerpo > *:not(.paso-espera) { display: none; }
.paso-espera-activa .paso-espera { display: block; }

@media (max-width: 600px) {
  .paso-cabeza { padding: .85rem 1rem; gap: .7rem; }
  .paso-cuerpo { padding: 1rem .9rem; }
  .paso-estado { order: 3; }
}

/* salidas laterales del test: presentes pero calladas */
.quiz-otras {
  margin-top: 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  font-size: .85rem;
}
.quiz-otras-sep { color: var(--fincatura-forte); }

/* ── Desplegable liviano para el detalle secundario ── */
.mas { margin-top: .8rem; }
.mas summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .88rem;
  color: var(--modulo);
  font-weight: 600;
}
.mas summary::-webkit-details-marker { display: none; }
.mas summary::before {
  content: "+";
  font: 700 .95rem var(--font-mono);
}
.mas[open] summary::before { content: "−"; }
.mas summary:hover { color: var(--ink); }
.mas > p {
  margin-top: .6rem;
  font-size: .94rem;
  color: var(--muted);
  border-left: 1px solid var(--fincatura-forte);
  padding-left: .85rem;
  max-width: 46rem;
}

/* la acción va después de la explicación, no antes */
.istruzioni-azione { margin-top: 1.75rem; }

/* pasos cortos: tres líneas, no tres párrafos */
.passi-breves .passo { padding-top: 1rem; padding-bottom: 1rem; }
.passi-breves .passo::before { top: 1rem; }
.passi-breves .passo h3 { margin-bottom: .2rem; }
.passi-breves .passo p { font-size: .95rem; }

/* ── Chiusura ── */
/* el pie vive fuera de <main>, así que necesita su propia caja centrada */
.chiusura {
  max-width: 60rem;
  margin: 3.5rem auto 0;
  padding: 0 1.25rem 3rem;
  display: grid;
  gap: 1.4rem;
}
.fonti ul { list-style: none; margin-top: .75rem; padding-left: .85rem; border-left: 1px solid var(--fincatura-forte); }
.fonti li { padding: .4rem 0; border-top: 1px solid var(--fincatura); font-size: .92rem; }
.fonti a { color: var(--muted); }
.fonti a:hover { color: var(--ink); }
.contatto p { font-size: .92rem; color: var(--muted); margin-top: .5rem; max-width: 46rem; }
.contatto a { color: var(--ink); }

.firma {
  font-size: .78rem; color: var(--muted); letter-spacing: .04em;
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
}

/* ── Índice fijo ── */
.indice {
  position: sticky; top: 0; z-index: 20;
  background: var(--carta);
  border-bottom: 1px solid var(--fincatura-forte);
}
.indice-riga {
  max-width: 60rem; margin: 0 auto;
  padding: .5rem 1.25rem;
  display: flex; align-items: center; gap: 1.1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.indice-riga::-webkit-scrollbar { display: none; }
.indice-capo { flex: none; }
.indice a {
  flex: none;
  font-size: .85rem;
  text-decoration: none;
  color: var(--muted);
  padding: .15rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.indice a:hover { color: var(--ink); }
.indice a.attivo { color: var(--ink); font-weight: 600; border-bottom-color: var(--timbro); }

/* ── Prossimo adempimento ── */
.diligenza-quadro {
  border: 1px solid var(--timbro);
  background: rgba(75, 58, 140, .04);
  padding: 1.1rem 1.35rem 1.35rem;
  margin-bottom: 1.75rem;
}
.diligenza-lista { list-style: none; margin-top: .75rem; }
.diligenza-item { padding: .6rem 0; border-top: 1px solid var(--fincatura); }
.diligenza-lista .diligenza-item:first-child { border-top: none; }
.diligenza-accion { font-size: 1.05rem; color: var(--muted); }
.diligenza-accion strong { color: var(--ink); }
.diligenza-prima .diligenza-accion strong { color: var(--timbro); }
.diligenza-quien { font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.diligenza-attesa { margin-top: .75rem; font-size: .88rem; color: var(--muted); font-style: italic; }
.diligenza-fine { margin: .6rem 0 1rem; font-weight: 600; }

/* ── Ejemplo y respaldo ── */
.avviso-demo { border-color: var(--modulo); outline-color: var(--modulo); background: rgba(74, 90, 124, .05); margin-bottom: 1.5rem; }
.avviso-demo .avviso-capo { color: var(--modulo); }
.avviso-demo .bottone { margin-top: .9rem; }

.vuoto-azioni { display: flex; gap: .75rem; justify-content: center; margin-top: 1.25rem; flex-wrap: wrap; }

.backup-nota {
  margin-top: .9rem;
  font-size: .87rem;
  color: var(--muted);
  border-left: 1px solid var(--avviso);
  padding-left: .8rem;
}

/* ── Tariffario ── */
.tariffario { list-style: none; max-width: 46rem; }
.tariffario li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .65rem 0;
  border-top: 1px solid var(--fincatura);
}
.tariffario li:first-child { border-top: none; }
.tar-concepto { flex: none; }
.tar-punteado {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--fincatura-forte);
  transform: translateY(-.28rem);
}
.tar-precio { flex: none; font-weight: 700; color: var(--timbro); }
.computo-nota { margin-top: 1.25rem; font-size: .84rem; color: var(--muted); max-width: 52rem; }

/* ── Cuenta regresiva Prenot@Mi ── */
.turno-conto {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  border: 1px solid var(--fincatura-forte);
  padding: .55rem .8rem;
  margin-bottom: .7rem;
  background: rgba(255, 255, 255, .6);
}
.turno-conto:empty { display: none; }
.conto-capo { font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--modulo); }
.conto-cifra { font-weight: 700; color: var(--timbro); }
.conto-nota { font-size: .8rem; color: var(--muted); }

/* ── Glosario ── */
.termine {
  border-bottom: 1px dotted var(--modulo);
  cursor: help;
  position: relative;
}
.termine::after {
  content: attr(data-def);
  position: absolute;
  left: 0; top: calc(100% + .5rem);
  width: min(20rem, 70vw);
  background: var(--lcd, #1E211C);
  color: #F3F2EC;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.45;
  padding: .6rem .75rem;
  border-radius: 3px;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s, transform .16s;
  z-index: 30;
  pointer-events: none;
}
.termine:hover::after, .termine:focus::after, .termine:focus-visible::after {
  opacity: 1; visibility: visible; transform: none;
}

/* ── Selector de parentesco ── */
.persona-rel-sel {
  font: 700 .7rem var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--modulo);
  background: transparent;
  border: 1px solid var(--fincatura);
  border-radius: 2px;
  padding: .2rem .35rem;
  cursor: pointer;
}
.persona-rel-sel:hover { border-color: var(--modulo); }

.fascicolo-primarie { display: flex; gap: .75rem; flex-wrap: wrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.print-solo { display: none; }

/* ── Impresión: la lista para llevar al mostrador ── */
@media print {
  @page { margin: 1.5cm; }
  body { background: #fff; background-image: none; color: #000; font-size: 11pt; }
  .indice, .scrivania, .hero, .testata-riga, .tricolore,
  .rivela:not(#fascicolo), .fascicolo-azioni, #backup-avviso, #demo-avviso, .modulo-nota,
  .doc-azioni .collegamento, .persona-testa .collegamento, .persona-piede { display: none !important; }
  main { max-width: none; padding: 0; }
  section { margin-top: 0; }
  #fascicolo { opacity: 1 !important; transform: none !important; }
  .print-solo { display: block; margin-top: .3rem; }
  .albero-quadro, .persona, .diligenza-quadro { break-inside: avoid; background: none; }
  .nodo { box-shadow: none; }
  .doc-riga { padding: .35rem 0; }
  /* casilla para tildar a mano en el mostrador */
  .doc-nome::before {
    content: "☐ ";
    font-family: var(--font-mono);
  }
  .timbro { border-width: 1px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}

/* ── Páginas internas ── */
.marchio a { color: inherit; text-decoration: none; }
.marchio a:hover { color: var(--modulo); }

.pagina-testa { padding-top: 3rem; }
.pagina-testa h1 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 22ch;
}
.pagina-testa + .entrada { margin-top: 1.25rem; }

.entrada {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 46rem;
}
.entrada strong { color: var(--ink); }

.lista-simple { list-style: none; max-width: 46rem; margin: .75rem 0; }
.lista-simple li {
  padding: .45rem 0 .45rem 1.4rem;
  position: relative;
  color: var(--muted);
}
.lista-simple li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--modulo);
  font-family: var(--font-mono);
}
.lista-simple strong { color: var(--ink); }

/* tarjetas de navegación entre páginas */
.tarjetas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--fincatura-forte);
  border: 1px solid var(--fincatura-forte);
}
.tarjetas a {
  display: grid; gap: .3rem;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--carta);
  height: 100%;
  text-decoration: none;
  transition: background .15s;
}
.tarjetas a:hover { background: var(--key); }
.tarjetas strong { font-size: 1.02rem; }
.tarjetas span { font-size: .88rem; color: var(--muted); }

/* escenarios del test: título visible, explicación desplegable */
.scenario {
  border-top: 1px solid var(--fincatura);
  max-width: 50rem;
}
.scenario:first-of-type { border-top: none; }
.scenario summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  padding: .85rem 0;
}
.scenario summary::-webkit-details-marker { display: none; }
.scenario .timbro { flex: none; }
.scenario-capo { font-weight: 700; font-size: 1rem; }
.scenario summary:hover .scenario-capo { color: var(--modulo); }
.scenario > p {
  color: var(--muted);
  font-size: .97rem;
  padding: 0 0 1rem .2rem;
}

.boll-historial { margin-top: .5rem; }

.escenarios-pie {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fincatura);
  font-size: .93rem;
  color: var(--muted);
  max-width: 50rem;
}
.escenarios-pie a { color: var(--ink); }

/* modelo de email */
.modello {
  border: 1px solid var(--fincatura-forte);
  background: rgba(255, 255, 255, .6);
  margin-top: 1.25rem;
}
.modello-capo {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--modulo);
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--fincatura);
}
.modello pre {
  font: 400 .86rem/1.65 var(--font-mono);
  padding: 1.1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}

/* tabla comparativa */
.tabla-envoltura { overflow-x: auto; }
.comparativa { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 34rem; }
.comparativa th, .comparativa td {
  text-align: left; vertical-align: top;
  padding: .65rem .7rem;
  border-bottom: 1px solid var(--fincatura);
}
.comparativa thead th {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--modulo); font-weight: 700;
  border-bottom: 1px solid var(--fincatura-forte);
}
.comparativa tbody th { font-weight: 700; white-space: nowrap; }
.comparativa td { color: var(--muted); }

/* mapa del sitio en el pie */
.mappa ul {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem;
  margin-top: .6rem;
}
.mappa a { font-size: .88rem; color: var(--muted); }
.mappa a:hover { color: var(--ink); }

/* ── Reveal ── */
.rivela { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.rivela.visibile { opacity: 1; transform: none; }

/* cursor de máquina */
.cursore::after { content: "▌"; animation: lampeggia 1s steps(1) infinite; color: var(--modulo); }
@keyframes lampeggia { 50% { opacity: 0; } }

@media (max-width: 620px) {
  /* en celular las tarjetas son un índice de temas, no ocho párrafos */
  .tarjetas a { padding: .8rem 1rem; }
  .tarjetas span { display: none; }
  .tarjetas strong { font-size: .98rem; }

  /* el índice se desliza: el degradado avisa que sigue */
  .indice-riga {
    gap: .9rem;
    mask-image: linear-gradient(to right, #000 86%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent);
  }

  /* el tarifario se apila: concepto arriba, precio abajo */
  .tariffario li { flex-wrap: wrap; gap: .1rem .6rem; }
  .tar-punteado { display: none; }
  .tar-concepto { flex: 1 1 100%; min-width: 0; }
  .tar-precio { flex-basis: 100%; }
}

@media (max-width: 420px) {
  /* en pantallas muy angostas el sello y su pista se acomodan en dos líneas */
  .timbro-btn { flex-wrap: wrap; justify-content: flex-end; gap: .25rem .5rem; }
  .doc-pista { white-space: normal; text-align: right; }
}

@media (max-width: 600px) {
  /* el sello del veredicto entra en pantallas angostas */
  .quadro { padding: 1.25rem 1.1rem; }
  .timbro-grande { font-size: .92rem; padding: .45rem .8rem; transform: rotate(-1deg); letter-spacing: .06em; }

  .doc-riga, .persona-testa { align-items: flex-start; }
  .doc-azioni { width: 100%; justify-content: flex-end; }
  .persona-nome { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stampa { animation: none; }
  .regola-fill, .nodo-fill, .nodo { transition: none; }
  .rivela { opacity: 1; transform: none; transition: none; }
  .cursore::after { content: ""; animation: none; }
  .lampeggio { animation: none; }
  .drappo, .drappo::after { animation: none; }
}