/* Pagina /social (giro 5, variante A col claim): stile della pagina. Apertura e carattere come il sito (bozza E),
   pulsanti di tasti.css (vetro con il filo di metallo che gira). Mobile first. */
@font-face { font-family: 'Montserrat'; src: url('asset/fonts/montserrat-var-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('asset/fonts/inter-var-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('asset/fonts/inter-var-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --nero: #08090A; --testo: #F7F8F8; --sec: #A3A9B3; --lilla: #C9A9E9; --viola: #8B6FB8; --g: 20px;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --cromo: linear-gradient(100deg, #B994E3 0%, #F4EAFF 18%, #C9A9E9 34%, #8B6FB8 52%, #DFC9F0 70%, #FFFFFF 80%, #C9A9E9 100%);
  --vetro: 0 2px 8px rgba(0, 0, 0, 0.3), inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.12), inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.7),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.45), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.45), inset 0 0 6px 6px rgba(255, 255, 255, 0.03);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nero); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; min-height: 100svh; background: transparent; color: var(--testo);
  font: 400 16px/1.55 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
:focus-visible { outline: 2px solid var(--lilla); outline-offset: 3px; border-radius: 12px; }
.cromo { background: var(--cromo); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
@media (prefers-reduced-motion: no-preference) { .cromo { animation: luce 7s ease-in-out infinite alternate; } }
@keyframes luce { to { background-position: 100% 50%; } }
.cielo { position: fixed; inset: 0; width: 100%; height: 100%; height: 100lvh; pointer-events: none; z-index: -1; }

/* ── the opening of the site: the stars build the mark, then we fly in (about 2 s, a tap skips it) ── */
.apertura { display: none; }
html.intro .apertura { display: block; position: fixed; inset: 0; z-index: 60; background: var(--nero); cursor: pointer; touch-action: none; }
html.intro body { overflow: hidden; }
.apertura__tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.apertura__firma { position: absolute; left: 0; right: 0; bottom: calc(15svh + env(safe-area-inset-bottom)); display: grid; justify-items: center;
  opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--curva), transform 700ms var(--curva); pointer-events: none; }
.apertura.firma .apertura__firma { opacity: 1; transform: none; }
.apertura.via .apertura__firma { opacity: 0; transform: translateY(-6px); transition-duration: 200ms; }
.apertura__scritta { width: min(46vw, 200px); height: auto; }

/* ── page ── */
.pagina { width: 100%; max-width: 480px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) var(--g) calc(32px + env(safe-area-inset-bottom)); }
.testata { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.logo__marchio { width: 30px; height: auto; }
.logo__scritta { height: 34px; width: auto; }

.cta { width: 100%; justify-content: space-between; min-height: 62px; }
.nota { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--sec); }

/* contact rows: clear glass, the platform logo in colour */
.link { margin-top: 30px; display: grid; gap: 10px; }
.riga { display: grid; grid-template-columns: 46px minmax(0, 1fr) 34px; align-items: center; gap: 14px;
  min-height: 74px; padding: 13px 14px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.025); -webkit-backdrop-filter: blur(6px) saturate(1.5); backdrop-filter: blur(6px) saturate(1.5);
  box-shadow: var(--vetro); transition: transform 120ms ease, filter 120ms ease; touch-action: manipulation; }
.riga:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .riga:hover { filter: brightness(1.12); } }
.riga__nome { display: block; font-size: 17px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.riga__det { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--sec); overflow-wrap: break-word; }
.riga__va { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: var(--vetro); }
.freccia { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo-p { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff; }
.logo-p svg { width: 24px; height: 24px; }
.logo-p--whatsapp { background: #25D366; }
.logo-p--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.logo-p--tiktok { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.logo-p--tiktok svg { filter: drop-shadow(-1.3px -1.1px 0 #25F4EE) drop-shadow(1.3px 1.1px 0 #FE2C55); }
.logo-p--facebook { background: #1877F2; }
.logo-p--chiama, .logo-p--email { background: linear-gradient(160deg, #F4EAFF 0%, #DFC9F0 30%, #C9A9E9 62%, #8B6FB8 100%); color: var(--nero); }
.logo-p--sito { background: radial-gradient(circle at 50% 35%, #241B33, #0F1011 70%); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.35); }
.logo-p--sito img { width: 27px; height: auto; transform: translateX(-1px); }

.piede { margin-top: 34px; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--sec); }

/* entrance after the opening */
html.js .entra { opacity: 0; transform: translateY(16px); }
html.js.pronto .entra { opacity: 1; transform: none; transition: opacity 600ms ease-out, transform 850ms var(--curva); transition-delay: calc(var(--d, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
  html.js .entra { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* ── the page: claim of the site, the services, the call, the contacts ── */
.titolo { margin-top: 26px; font-size: clamp(40px, 11.6vw, 52px); line-height: 1; font-weight: 750; letter-spacing: -0.032em; text-wrap: balance; }
.titolo .cromo { white-space: nowrap; }
.servizi { margin-top: 14px; font-size: 16.5px; line-height: 1.45; color: var(--sec); max-width: 22em; }
.servizi b { color: var(--testo); font-weight: 600; }
.prenota { margin-top: 26px; }
/* the variant hides the platform the visitor is already on */
html[data-da="instagram"] .riga[data-k="instagram"],
html[data-da="tiktok"] .riga[data-k="tiktok"],
html[data-da="facebook"] .riga[data-k="facebook"] { display: none; }
.servizi .dove { display: inline-block; margin-top: 6px; font-size: 14.5px; }
/* each service line wraps as a whole after the colon, never in the middle of the list */
.servizi__riga { display: block; }
.servizi__riga + .servizi__riga { margin-top: 4px; }
.servizi__riga > span { white-space: nowrap; }