/* servizi-materiale.css — materiale vero: gestione digitale, video, Search Console (agente servizi). */

/* ---------------------------------------------------------------- gestione digitale ------- */
.gd { display: grid; gap: clamp(40px, 7vh, 72px); }
.gd__caso { display: grid; gap: 22px; }
.gd__chi { color: var(--carta-2); }
.gd__scena { position: relative; padding-bottom: 4%; }
.gd__browser { width: 82%; }
.gd__telefono { position: absolute; right: 0; bottom: 0; width: 24%; box-shadow: 0 0 0 1px var(--linea-forte), 0 30px 80px -20px rgba(0, 0, 0, .9); }
.gd__nodi { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.gd__nodo { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.gd__nodo p { color: var(--carta-2); max-width: 46ch; }
.gd__voce { margin: 0; display: grid; gap: 16px; padding-left: clamp(18px, 3vw, 40px); border-left: 2px solid var(--viola); max-width: 980px; }
.gd__voce blockquote { margin: 0; font: 400 clamp(22px, 2.4vw, 36px)/1.25 var(--font-sans); letter-spacing: -.015em; }
.gd__asd { display: grid; gap: 22px; align-items: center; }
.gd__asd-testo { display: grid; gap: 12px; justify-items: start; }
@media (min-width: 820px) {
  .gd__nodi { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 0; }
  .gd__nodo { border-bottom: 0; border-top: 1px solid var(--linea); }
  .gd__asd { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: calc(var(--gutter) * 2); }
}
@media (max-width: 819px) { .gd__browser { width: 100%; } .gd__telefono { width: 34%; right: -2%; bottom: -10%; } .gd__scena { padding-bottom: 14%; } }

/* ---------------------------------------------------------------- video ------------------- */
.vd { display: grid; gap: clamp(40px, 6vh, 64px); }
.vd__profilo { display: grid; gap: 14px; align-content: start; }
.vd__chi { color: var(--carta-2); }
.vd__metodo { display: grid; gap: 24px; padding: clamp(18px, 2.4vw, 32px); background: var(--nero-2); box-shadow: inset 0 0 0 1px var(--linea); }
.vd__formato {
  position: relative; justify-self: center; width: min(62%, 220px); aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
  background: radial-gradient(70% 50% at 50% 38%, rgba(206, 105, 227, .35), rgba(121, 64, 224, .12) 60%, rgba(6, 5, 12, .9)), var(--nero);
  box-shadow: 0 0 0 1px var(--linea-forte), 0 30px 90px -30px rgba(121, 64, 224, .7);
}
.vd__formato::before { content: ""; position: absolute; left: 50%; top: 32%; width: 34%; aspect-ratio: .7; margin-left: -17%; border-radius: 50% 50% 46% 46%; background: rgba(239, 233, 225, .14); animation: vd-balla 1.6s ease-in-out infinite alternate; }
@keyframes vd-balla { from { transform: translateX(-12%) rotate(-6deg); } to { transform: translateX(12%) rotate(6deg); } }
.vd__guida { position: absolute; inset: 9% 7%; border: 1px dashed rgba(239, 233, 225, .28); border-radius: 6px; }
.vd__zona { position: absolute; left: 10%; right: 10%; padding: 5px 6px; text-align: center; background: rgba(6, 5, 12, .62); color: var(--carta); }
.vd__zona--logo { top: 11%; right: auto; }
.vd__zona--sotto { bottom: 24%; }
.vd__zona--cta { bottom: 11%; background: var(--viola); }
.vd__misura { position: absolute; right: 9%; top: 11%; color: var(--carta-2); }
.vd__timeline { position: relative; display: grid; gap: 8px; padding: 10px 0; overflow: hidden; }
.vd__traccia { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 10px; align-items: center; }
.vd__traccia .etichetta { color: var(--carta-3); }
.vd__clip, .vd__onda { position: relative; height: 28px; }
.vd__clip i { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1%); width: calc(var(--w) * 1% - 3px); background: linear-gradient(180deg, rgba(121, 64, 224, .75), rgba(65, 37, 108, .9)); box-shadow: inset 0 0 0 1px rgba(169, 139, 255, .5); border-radius: 3px; }
.vd__clip--grafica i { background: rgba(206, 105, 227, .35); box-shadow: inset 0 0 0 1px rgba(206, 105, 227, .7); height: 60%; top: 20%; }
.vd__onda { display: flex; align-items: center; gap: 2px; }
.vd__onda i { flex: 1; height: calc(var(--h) * 1%); background: rgba(239, 233, 225, .35); border-radius: 1px; }
.vd__battiti { position: absolute; left: calc(5.4em + 10px); right: 0; top: 0; bottom: 0; pointer-events: none; }
.vd__battiti i { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1%); width: 1px; background: rgba(169, 139, 255, .45); }
.vd__testina { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--neon); box-shadow: 0 0 12px var(--neon); animation: vd-testina 6s linear infinite; }
@keyframes vd-testina { from { left: 0; } to { left: calc(100% - 2px); } }
.vd__passi { display: grid; gap: 14px; }
.vd__passi li { display: grid; gap: 6px; }
@media (min-width: 900px) {
  .vd { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: calc(var(--gutter) * 2); }
  .vd__metodo { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); column-gap: 28px; }
  .vd__formato { width: 100%; grid-row: span 2; }
  .vd__passi, .vd__metodo .didascalia { grid-column: 1 / -1; }
}
html.ridotto .vd__testina, html.ridotto .vd__formato::before { animation: none; }

/* ---------------------------------------------------------------- SEO --------------------- */
.seo { display: grid; gap: clamp(64px, 11vh, 120px); }
.seo__gsc { margin: 0; display: grid; gap: 28px; }
.seo__dati { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px var(--gutter); }
.seo__dato { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linea); }
.seo__dato .t-dato { font-size: clamp(36px, 6.4vw, 112px); }
.seo__fonte { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
@media (min-width: 1000px) {
  .seo__gsc { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: calc(var(--gutter) * 2); align-items: start; }
  .seo__dati { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .seo__dato .t-dato { font-size: clamp(48px, 5.2vw, 92px); }
  .seo__fonte { flex-direction: column; align-items: flex-start; }
}