/* servizi-vetrina.css — isola vetrina-siti: 3 siti veri in browser e telefono (agente servizi). */

/* ---------------------------------------------------------------- vetrina siti ------------ */
.vt { display: grid; gap: 22px; }
.vt__comandi { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.vt__comandi[hidden] { display: none; }
.vt__siti { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.vt__tab {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 0;
  font: var(--peso-display) clamp(19px, 1.9vw, 30px)/1.05 var(--font-display); letter-spacing: -.03em; text-transform: uppercase;
  color: var(--carta-3); transition: color .4s;
}
.vt__tab .etichetta { color: inherit; }
.vt__tab:hover, .vt__tab[aria-selected="true"] { color: var(--carta); }
.vt__tab[aria-selected="true"] .etichetta { color: var(--viola-luce); }
.vt__vista { display: inline-flex; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-forte); }
.vt__btn { min-height: 34px; padding: 0 16px; border-radius: 999px; color: var(--carta-2); transition: background-color .4s, color .4s; }
.vt__btn[aria-pressed="true"] { background: var(--carta); color: var(--nero); }
.vt__sito { display: grid; gap: 26px; }
.vt__sito + .vt__sito { margin-top: 48px; }
.vt.is-attiva .vt__sito + .vt__sito { margin-top: 0; }
.vt__scena { position: relative; padding-bottom: 6%; }
.vt__browser { width: 84%; transition: transform 1s var(--curva-sipario), opacity .8s, filter .8s; transform-origin: 0 50%; }
.vt__telefono {
  position: absolute; right: 0; bottom: 0; width: 21%;
  transition: transform 1s var(--curva-sipario); transform-origin: 100% 100%;
  box-shadow: 0 0 0 1px var(--linea-forte), 0 30px 80px -20px rgba(0, 0, 0, .9);
}
.vt[data-vista="telefono"] .vt__browser { transform: scale(.9); opacity: .28; filter: blur(2px); }
.vt[data-vista="telefono"] .vt__telefono { transform: translateX(-180%) scale(1.06); }
.vt__meta { display: grid; gap: 10px; }
.vt__nome { font: var(--peso-display) clamp(26px, 2.6vw, 40px)/1 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; }
.vt__sintesi { max-width: 52ch; }
.vt__link { display: flex; flex-wrap: wrap; gap: 8px 28px; }
@media (min-width: 1000px) {
  .vt__sito { grid-template-columns: minmax(0, 1fr) 300px; align-items: end; gap: calc(var(--gutter) * 2); }
}
@media (max-width: 819px) {
  .vt__browser { width: 100%; }
  .vt__telefono { width: 34%; right: -2%; bottom: -8%; }
  .vt__scena { padding-bottom: 14%; }
  .vt[data-vista="telefono"] .vt__telefono { transform: translateX(-80%) scale(1.45); }
  .vt[data-vista="telefono"] .vt__scena { padding-bottom: 54%; }
}