/* AdiosMulta — «Qué hacemos»: 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, que-hacemos.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;
}

/* ----- Cabecera ----- */
.qh-cabecera { text-align: center; margin: 0 auto clamp(56px, 10vh, 112px); max-width: 860px; }
.qh-cabecera h1 {
    font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(40px, 7.2vw, 88px);
    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
       que-hacemos.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;
}
.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 {
    font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(30px, 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); }
.qh-campos { margin: 0; }
.qh-campos > div {
    display: grid;
    grid-template-columns: 92px 1fr;
    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;
    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-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 > div { grid-template-columns: 74px 1fr; }
    .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; }
}