/* AdiosMulta — «Cómo funciona»: el viaje de tu multa.
   Cinco momentos unidos por un raíl que se llena de azul con el scroll, cada uno
   con su escena viva hecha con el lenguaje del logo (el papel, las líneas que se
   escriben, el check y el sello). Sin tarjetas: el papel ES la escena. Las
   escenas arrancan una vez, al entrar en pantalla (.is-on, como-funciona.js), aunque
   el sistema pida menos movimiento: lo vivo que enseña el producto no se apaga. */

.qh {
    --qh-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --qh-papel-sombra: 0 1px 2px rgba(10, 10, 10, 0.04), 0 30px 70px -30px rgba(46, 114, 252, 0.35);
    max-width: 1120px;
    margin: 0 auto;
    padding: 72px 24px 40px;
}

/* La letra de la marca en toda la página, como en Recurrir y en la portada; también en su «Volver al inicio». */
.qh, .legal-back { font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }

/* ----- Cabecera ----- */
.qh-cabecera { text-align: center; margin: 0 auto clamp(24px, 4vh, 48px); max-width: 1072px; }
.qh-cabecera h1 {
    /* Siempre en una línea, en el móvil y en el ordenador (Juan, 27-oct): el tamaño sale del ancho que hay, hasta 88 px.
       12,2 = lo que mide el título a 1 px con su cursiva (11,87, medido en Inter e Instrument Serif) y un margen. */
    font-size: min(88px, calc(min(100vw - 48px, 1072px) / 12.2));
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: var(--fg);
    margin: 0 0 22px;
}
.qh-cabecera h1 em {
    font-family: 'Instrument Serif', 'Instrument Serif Fallback', 'Instrument Serif Fallback Noto', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--accent);
}
.qh-cabecera p {
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    color: var(--muted);
    margin: 0 auto;
    max-width: 34em;
    text-wrap: balance;
}

/* ----- El viaje: raíl + pasos ----- */
.qh-viaje { position: relative; --qh-rail-x: 36px; }
.qh-rail {
    position: absolute;
    left: var(--qh-rail-x);
    top: 0;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--border);
    /* nace y muere en el centro del primer y del último nodo: lo mide
       como-funciona.js (el final depende del alto del último texto) */
    height: 0;
}
.qh-rail-luz {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 70%, #7fb0ff));
    box-shadow: 0 0 14px rgba(46, 114, 252, 0.45);
    transform-origin: top;
    transform: scaleY(var(--qh-progreso, 0));
}

.qh-paso {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: center;
    column-gap: clamp(28px, 4vw, 64px);
    padding: clamp(64px, 14vh, 140px) 0;
}
/* El viaje empieza cerca de su cabecera, en su punto medio (Juan, 27-oct): ni el aire entero entre paso y paso ni pegado. */
.qh-paso:first-of-type { padding-top: clamp(48px, 10vh, 100px); }
.qh-nodo {
    position: relative;
    z-index: 1;
    justify-self: center;
    align-self: start;
    margin-top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--muted-soft);
    background: var(--bg);
    border: 1px solid var(--border);
    transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease, box-shadow 0.6s ease, transform 0.6s var(--qh-ease);
}
.qh-paso.is-on .qh-nodo {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 6px rgba(46, 114, 252, 0.12), 0 8px 24px rgba(46, 114, 252, 0.35);
    transform: scale(1.06);
}

.qh-texto { align-self: start; padding-top: 2px; }
.qh-etiqueta {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.qh-texto h2 {
    /* Nunca más grande que el título de la página, que en el móvil va en una línea. */
    font-size: clamp(22px, 3.9vw, 52px);
    font-weight: 800;
    letter-spacing: -0.032em;
    line-height: 1.04;
    color: var(--fg);
    margin: 0 0 18px;
    text-wrap: balance;
}
.qh-texto > p:last-child {
    font-size: clamp(16.5px, 1.35vw, 19px);
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
    max-width: 28em;
}
/* el texto entra con su escena */
.qh-texto, .qh-escena { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.9s ease, transform 1.1s var(--qh-ease); }
.qh-paso.is-on .qh-texto, .qh-paso.is-on .qh-escena { opacity: 1; transform: none; }
.qh-paso.is-on .qh-escena { transition-delay: 0.12s; }

/* ----- La escena y su papel ----- */
.qh-escena { position: relative; justify-self: center; width: 100%; max-width: 460px; }
.qh-escena::before {                       /* un halo azul muy tenue detrás */
    content: "";
    position: absolute;
    inset: -18% -12%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(46, 114, 252, 0.11), transparent);
    pointer-events: none;
}
.qh-papel {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 26px 28px 28px;
    box-shadow: var(--qh-papel-sombra);
    overflow: hidden;
}
@media (min-width: 861px) {
    .qh-papel { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); transition: transform 1.4s var(--qh-ease); }
    .qh-paso.is-on .qh-papel { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
}

/* 01 · Lectura: un haz de luz recorre el boletín y los datos aparecen */
.qh-papel-cab {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
}
.qh-papel-cab b { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); }
.qh-papel-cab span { font-size: 12px; color: var(--muted-soft); }
/* La columna de la etiqueta mide lo que la más larga («Expediente», con la letra que tenga cada móvil) y las filas la
   comparten (subgrid): un ancho fijo dejaba que una letra un poco más ancha montara la etiqueta sobre su valor. */
.qh-campos { margin: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 12px; }
.qh-campos > div {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 92px 1fr;   /* sin subgrid, como antes */
    grid-template-columns: subgrid;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px dashed var(--border-soft);
}
.qh-campos > div:last-child { border-bottom: 0; }
.qh-campos dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); }
.qh-campos dd { margin: 0; }
.qh-campos dd span {
    display: inline-block;
    font-size: 14.5px;
    font-weight: 600;
    text-wrap: balance;               /* si un valor no cabe en un móvil estrecho, dos líneas parejas, nunca una palabra sola */
    color: transparent;
    border-radius: 6px;
    background: var(--surface);
    transition: color 0.45s ease, background 0.45s ease;
}
.qh-paso.is-on .qh-lectura .qh-campos dd span { color: var(--accent); background: transparent; }
.qh-paso.is-on .qh-lectura .qh-campos > div:nth-child(1) dd span { transition-delay: 0.62s; }
.qh-paso.is-on .qh-lectura .qh-campos > div:nth-child(2) dd span { transition-delay: 0.86s; }
.qh-paso.is-on .qh-lectura .qh-campos > div:nth-child(3) dd span { transition-delay: 1.1s; }
.qh-paso.is-on .qh-lectura .qh-campos > div:nth-child(4) dd span { transition-delay: 1.34s; }
.qh-paso.is-on .qh-lectura .qh-campos > div:nth-child(5) dd span { transition-delay: 1.58s; }
.qh-haz {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 64px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom, transparent, rgba(46, 114, 252, 0.10) 70%, rgba(46, 114, 252, 0.0) 100%);
}
.qh-haz::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent) 82%, transparent);
    box-shadow: 0 0 16px 3px rgba(46, 114, 252, 0.55);
}
.qh-paso.is-on .qh-haz { animation: qh-barrido 1.7s cubic-bezier(0.65, 0, 0.35, 1) 0.4s both; }
@keyframes qh-barrido {
    0% { transform: translateY(-64px); opacity: 0; }
    10% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(var(--qh-alto, 300px)); opacity: 0; }
}
.qh-sello-plazo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0 6px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(46, 114, 252, 0.08);
    border: 1px solid rgba(46, 114, 252, 0.18);
    opacity: 0;
    transform: scale(0.85);
    transform-origin: left center;
    transition: opacity 0.4s ease 2.2s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s;
}
.qh-paso.is-on .qh-sello-plazo { opacity: 1; transform: none; }
.qh-sello-plazo svg, .qh-aviso-ic svg {
    width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
}

/* 02 · Motivos: el rotulador marca lo que juega a tu favor */
.qh-motivos .qh-papel { width: 74%; padding: 30px 26px; }
.qh-renglon { position: relative; height: 10px; margin: 0 0 17px; }
.qh-renglon:last-child { margin-bottom: 0; }
.qh-renglon > i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: #ececef; }
.qh-marca::before {                        /* el trazo del rotulador */
    content: "";
    position: absolute;
    left: -6px;
    top: -6px;
    bottom: -6px;
    width: calc(var(--w-marca, 76%) + 12px);
    border-radius: 6px;
    background: rgba(46, 114, 252, 0.16);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.qh-marca > i { transition: background 0.5s ease; }
.qh-marca::after {                         /* su etiqueta, fuera del papel */
    content: attr(data-tag);
    position: absolute;
    left: calc(100% + 34px);
    top: 50%;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 8px 20px rgba(46, 114, 252, 0.32);
    opacity: 0;
    transform: translate(-10px, -50%);
    transition: opacity 0.4s ease, transform 0.6s var(--qh-ease);
}
.qh-motivos .qh-papel { overflow: visible; }
.qh-paso.is-on .qh-marca::before { transform: scaleX(1); }
.qh-paso.is-on .qh-marca > i { background: color-mix(in srgb, var(--accent) 45%, #ececef); }
.qh-paso.is-on .qh-marca::after { opacity: 1; transform: translate(0, -50%); }
.qh-paso.is-on .qh-marca:nth-child(2)::before, .qh-paso.is-on .qh-marca:nth-child(2) > i { transition-delay: 0.5s; }
.qh-paso.is-on .qh-marca:nth-child(2)::after { transition-delay: 1s; }
.qh-paso.is-on .qh-marca:nth-child(5)::before, .qh-paso.is-on .qh-marca:nth-child(5) > i { transition-delay: 1.05s; }
.qh-paso.is-on .qh-marca:nth-child(5)::after { transition-delay: 1.55s; }
.qh-paso.is-on .qh-marca:nth-child(7)::before, .qh-paso.is-on .qh-marca:nth-child(7) > i { transition-delay: 1.6s; }
.qh-paso.is-on .qh-marca:nth-child(7)::after { transition-delay: 2.1s; }
.qh-marca:nth-child(2) { --w-marca: 72%; }
.qh-marca:nth-child(5) { --w-marca: 80%; }
.qh-marca:nth-child(7) { --w-marca: 66%; }

/* 03 y 04 · El escrito: se escribe línea a línea, como el papel del logo */
.qh-destino { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--fg); }
.qh-asunto { margin: 0 0 20px; font-size: 12.5px; color: var(--muted-soft); }
.qh-expediente { white-space: nowrap; }   /* el número no se parte por el guion */
.qh-lineas > i {
    display: block;
    height: 8px;
    width: var(--w);
    margin: 0 0 12px;
    border-radius: 4px;
    background: #dedee5;
    transform: scaleX(0);
    transform-origin: left;
}
.qh-lineas > i.qh-parrafo { margin-top: 22px; }
.qh-paso.is-on .qh-escrito .qh-lineas > i { animation: qh-escribe 0.55s cubic-bezier(0.65, 0, 0.35, 1) both; }
.qh-escrito .qh-lineas > i:nth-child(1) { animation-delay: 0.45s !important; }
.qh-escrito .qh-lineas > i:nth-child(2) { animation-delay: 0.75s !important; }
.qh-escrito .qh-lineas > i:nth-child(3) { animation-delay: 1.05s !important; }
.qh-escrito .qh-lineas > i:nth-child(4) { animation-delay: 1.35s !important; }
.qh-escrito .qh-lineas > i:nth-child(5) { animation-delay: 1.7s !important; }
.qh-escrito .qh-lineas > i:nth-child(6) { animation-delay: 2s !important; }
.qh-escrito .qh-lineas > i:nth-child(7) { animation-delay: 2.3s !important; }
@keyframes qh-escribe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.qh-lineas-quietas > i { transform: none; }
.qh-firma {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.qh-firma span {
    font-family: 'Instrument Serif', 'Instrument Serif Fallback', 'Instrument Serif Fallback Noto', Georgia, serif;
    font-style: italic;
    font-size: 21px;
    color: var(--accent);
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition: opacity 0.6s ease 2.8s, transform 0.8s var(--qh-ease) 2.8s;
}
.qh-paso.is-on .qh-firma span { opacity: 1; transform: none; }

/* 04 · El sello cae con el golpe del sello del logo */
.qh-sello {
    position: absolute;
    right: 24px;
    bottom: 26px;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 12px 18px 11px;
    border: 2.5px solid var(--accent);
    border-radius: 12px;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.86);
    transform: rotate(-9deg) scale(1.9);
    opacity: 0;
}
.qh-sello b { font-size: 19px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.qh-sello span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.qh-paso.is-on .qh-sello { animation: qh-sella 0.62s cubic-bezier(0.34, 1.3, 0.64, 1) 0.75s both; }
.qh-paso.is-on .qh-presentado .qh-papel { animation: qh-golpe 0.4s ease-out 1.05s both; }
@keyframes qh-sella {
    0% { opacity: 0; transform: rotate(-9deg) scale(1.9); }
    55% { opacity: 1; transform: rotate(-9deg) scale(0.94); }
    100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}
@keyframes qh-golpe {
    0%, 100% { translate: 0 0; }
    40% { translate: 0 3px; }
}

/* 05 · Los avisos llegan, uno detrás de otro, en cristal */
.qh-avisos { display: grid; gap: 14px; padding: 18px 0; }
.qh-avisos::after {                        /* la luz de color detrás del cristal */
    content: "";
    position: absolute;
    left: 18%;
    top: 12%;
    width: 64%;
    height: 76%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(46, 114, 252, 0.28), rgba(127, 176, 255, 0.12) 60%, transparent);
    filter: blur(8px);
}
.qh-aviso {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(10, 10, 10, 0.06);
    box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 18px 44px -18px rgba(10, 10, 10, 0.22);
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.97);
    transition: opacity 0.6s ease, transform 0.9s var(--qh-ease);
}
.qh-aviso:nth-child(2) { margin-left: 28px; }
.qh-paso.is-on .qh-aviso { opacity: 1; transform: none; }
.qh-paso.is-on .qh-aviso:nth-child(1) { transition-delay: 0.45s; }
.qh-paso.is-on .qh-aviso:nth-child(2) { transition-delay: 1.4s; }
.qh-aviso-ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent));
    box-shadow: 0 4px 12px rgba(46, 114, 252, 0.35);
}
.qh-aviso-de { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; color: var(--fg); }
.qh-aviso-de small { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--muted-soft); }
.qh-aviso-txt { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-soft); }

/* ----- El cierre ----- */
.qh-cierre { text-align: center; padding: clamp(80px, 16vh, 180px) 0 clamp(72px, 12vh, 140px); }
.qh-frase {
    font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(34px, 5.6vw, 76px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.06;
    margin: 0 auto 48px;
    max-width: 15em;
    text-wrap: balance;
    color: var(--fg);
}
.qh-frase .qh-palabra { color: #dcdce2; transition: color 0.35s ease; }
.qh-frase .qh-palabra.is-lit { color: var(--fg); }
.qh-frase .qh-acento .qh-palabra.is-lit { color: var(--accent); }
.qh-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 36px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--accent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 14px 34px -10px rgba(46, 114, 252, 0.6);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.3s ease;
}
.qh-cta:hover { background: var(--accent-hover); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 18px 40px -10px rgba(46, 114, 252, 0.7); }
.qh-cta:active { transform: scale(0.98); }

/* ----- Móvil y tableta: raíl a la izquierda, la escena bajo su texto ----- */
@media (max-width: 860px) {
    .qh { padding-top: 48px; }
    .qh-viaje { --qh-rail-x: 20px; }
    .qh-paso {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 18px;
        row-gap: 34px;
        padding: 56px 0;
    }
    .qh-paso:first-of-type { padding-top: 56px; }
    .qh-nodo { width: 36px; height: 36px; font-size: 12px; }
    .qh-escena { grid-column: 2; max-width: 420px; justify-self: start; }
    .qh-motivos .qh-papel { width: 66%; }
    .qh-campos dd span { font-size: 13.5px; }
    .qh-papel { padding: 22px 20px 24px; }
    .qh-marca::after { left: calc(100% + 22px); font-size: 11.5px; padding: 5px 10px; }
    .qh-aviso:nth-child(2) { margin-left: 16px; }
}