/* ============================================================
   Tappito — Design System v3 — parte 4 di 4
   I file sono spezzati e tenuti sotto i 16 KB: il proxy Aruba
   tronca a 16384 byte le risposte piu' grandi (vedi CLAUDE.md).
   Vanno caricati in ordine: la cascata dipende dalla sequenza.
   ============================================================ */
.path {
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--tone, var(--blue));
    border-radius: var(--r);
    padding: 28px 26px 30px;
    box-shadow: var(--sh-sm);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.path:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.path-tag {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 7px;
    padding: 5px 12px; margin-bottom: 15px;
    border-radius: var(--r-pill);
    background: var(--tone-soft, var(--blue-soft));
    color: var(--tone, var(--blue));
    font-size: .71rem; font-weight: 700; font-stretch: 88%;
    letter-spacing: .09em; text-transform: uppercase;
}
.path h3 { font-size: 1.18rem; letter-spacing: -0.025em; }
.path > p { margin-top: 10px; color: var(--text-2); font-size: .93rem; }

.path ol { margin-top: 20px; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 13px; }
.path ol li {
    counter-increment: p;
    display: grid; grid-template-columns: 25px 1fr; gap: 12px;
    align-items: start;
    font-size: .91rem; color: var(--text);
}
.path ol li::before {
    content: counter(p);
    width: 25px; height: 25px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--tone-soft, var(--blue-soft));
    color: var(--tone, var(--blue));
    font-family: var(--mono); font-size: .72rem; font-weight: 700;
}
.path-foot {
    margin-top: auto; padding-top: 20px;
    font-size: .82rem; color: var(--text-3);
    display: flex; align-items: center; gap: 8px;
}
.path-foot svg { color: var(--tone, var(--blue)); flex-shrink: 0; }

/* ---- Sezione a due colonne testo + elenco ---- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.split-visual {
    display: grid; gap: 12px;
    background: linear-gradient(160deg, var(--tone-soft, var(--blue-soft)), var(--paper) 72%);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(22px, 3vw, 32px);
}

/* Canali di notifica */
.chan {
    display: flex; align-items: center; gap: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 15px 17px;
    box-shadow: var(--sh-sm);
    color: var(--text);
}
.chan-ico {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--paper-2); color: var(--text-2);
}
.chan b { display: block; font-size: .94rem; font-weight: 600; letter-spacing: -0.015em; }
.chan small { display: block; font-size: .8rem; color: var(--text-2); line-height: 1.45; }

/* La sezione tecnologia scura riusata sulle pagine di dettaglio:
   il tono di settore colora l'icona senza invadere il resto. */
.section-ink .tech-ico { background: color-mix(in srgb, var(--tone, var(--blue)) 26%, transparent); }

@media (max-width: 1080px) {
    .page-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .paths { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .page-hero { padding-top: 108px; }
}

/* ============================================================
   IL GESTO — il braccialetto che tocca il telefono

   Sostituto vettoriale del filmato, finche' non c'e' il girato:
   poche centinaia di byte invece di megabyte, nitido a ogni
   risoluzione e senza i limiti di riproduzione automatica che
   i browser mobili impongono ai video.

   Un solo ciclo di 4,6 s: il braccialetto entra da sinistra,
   appoggia sul telefono, la conferma compare, il braccialetto
   esce. La durata e' la stessa con cui il telefono cambia
   contesto, cosi' i due movimenti restano in fase.
   ============================================================ */
.tap-band {
    position: absolute;
    left: 50%; top: 21%;
    width: 132px;
    margin-left: -286px;
    z-index: 3;
    opacity: 0;
    filter: drop-shadow(0 20px 26px rgba(0,0,0,.55));
    animation: gesto-braccialetto 4.6s cubic-bezier(.42,0,.28,1) infinite;
}
@keyframes gesto-braccialetto {
    0%   { opacity: 0; transform: translate(-24px, 40px) rotate(-16deg); }
    12%  { opacity: 1; }
    32%  { opacity: 1; transform: translate(126px, 4px) rotate(-7deg); }
    50%  { opacity: 1; transform: translate(126px, 4px) rotate(-7deg); }
    70%  { opacity: 0; transform: translate(-24px, 40px) rotate(-16deg); }
    100% { opacity: 0; transform: translate(-24px, 40px) rotate(-16deg); }
}

.tap-ok {
    position: absolute;
    left: 50%; top: 43%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px;
    border-radius: var(--r-pill);
    background: #0E9F76; color: #fff;
    font-size: .76rem; font-weight: 700; font-stretch: 90%;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 12px 30px -8px rgba(14,159,118,.75);
    opacity: 0;
    animation: gesto-conferma 4.6s ease infinite;
}
@keyframes gesto-conferma {
    0%, 30%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.94); }
    38%       { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    56%       { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    66%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.98); }
}

/* Chi ha chiesto meno movimento vede la scena ferma al contatto,
   non un elemento bloccato a meta' corsa. */
@media (prefers-reduced-motion: reduce) {
    .tap-band { opacity: 1; transform: translate(126px, 4px) rotate(-7deg); }
    .tap-ok   { opacity: 1; transform: translateX(-50%); }
}

@media (max-width: 620px) {
    .tap-band { width: 98px; margin-left: -212px; }
    .tap-ok   { font-size: .7rem; padding: 7px 12px; }
}