/* servizi-serp.css — isola serp: simulazione dichiarata di una ricerca (agente servizi). */

/* ---------------------------------------------------------------- simulazione SERP -------- */
.serp { display: grid; overflow: hidden; }
.serp__testa { display: grid; gap: 14px; padding: clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--linea); }
.serp__cerca { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; border-radius: 999px; background: var(--nero); box-shadow: inset 0 0 0 1px var(--linea-forte); font-size: clamp(16px, 1.3vw, 19px); color: var(--carta); overflow: hidden; }
.serp__cerca svg { flex: none; width: 18px; height: 18px; color: var(--carta-3); }
.serp__cursore { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.15em; background: var(--viola-luce); animation: serp-cursore 1s steps(1) infinite; }
@keyframes serp-cursore { 50% { opacity: 0; } }
.serp__leve { display: flex; flex-wrap: wrap; gap: 8px; }
.serp__leva { gap: 10px; }
.serp__leva i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; }
.serp__leva[aria-pressed="true"] i { background: var(--viola); box-shadow: none; }
.serp__corpo { display: grid; }
.serp__lista { position: relative; margin: 0; padding: 0; list-style: none; height: calc(var(--righe) * var(--h)); --h: 96px; }
.serp__ris {
  position: absolute; left: 0; right: 0; top: 0; height: var(--h);
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 12px; align-content: center;
  padding: 0 clamp(16px, 2vw, 26px); border-top: 1px solid var(--linea);
  transform: translateY(calc(var(--pos) * var(--h)));
  transition: transform .9s var(--curva-sipario), background-color .6s;
}
.serp__ris.is-tuo { background: linear-gradient(90deg, rgba(121, 64, 224, .2), rgba(121, 64, 224, 0) 80%); }
.serp__pos { font: 500 13px/1 var(--font-mono); color: var(--carta-3); padding-top: 4px; }
.serp__ris.is-tuo .serp__pos { color: var(--viola-luce); }
.serp__dominio { font: 500 12px/1.3 var(--font-mono); color: var(--carta-3); }
.serp__titolo { font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; line-height: 1.25; color: #b6a4ff; }
.serp__descr { font-size: 14px; line-height: 1.4; color: var(--carta-2); }
.serp__extra { display: flex; gap: 14px; font: 500 12px/1.3 var(--font-mono); color: var(--viola-luce); }
.serp__piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 14px clamp(16px, 2vw, 26px); border-top: 1px solid var(--linea); }
.serp__punti { display: flex; align-items: baseline; gap: 12px; }
.serp__punti b { font: var(--peso-display) clamp(28px, 3vw, 44px)/1 var(--font-display); letter-spacing: -.04em; color: var(--viola-luce); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .serp__lista { --h: 162px; } .serp__ris { align-content: start; padding-top: 16px; } }