@import url("../fonts/fonts.css");

/* ============================================================
   GOG Lab — foglio di stile principale
   Palette presa dal logo: arancione #FF9525 su fondo scuro
   ============================================================ */

:root{
  /* --- tema CHIARO (predefinito) --- */
  --bg:        #FFFFFF;
  --bg-soft:   #F5F7FA;
  --surface:   #FFFFFF;
  --surface-2: #F1F4F8;
  --border:    #E4E8EE;
  --border-2:  #CFD6E0;
  --fg:        #12161C;
  --fg-2:      #414A56;
  --muted:     #68727F;
  --accent:      #FF9525;
  --accent-2:    #FFB25C;
  --accent-3:    #E87C0A;
  --accent-text: #B45E06;            /* arancione leggibile su fondo chiaro */
  --accent-soft: rgba(255,149,37,.10);
  --green:     #2E7D46;
  --green-2:   #3F9E5D;

  --header-bg-stuck: rgba(255,255,255,.88);
  --nav-panel:       rgba(255,255,255,.98);
  --nav-hover:       rgba(0,0,0,.05);
  --grid-line:       rgba(0,0,0,.05);
  --placeholder:     #8A94A2;
  --tint-app:        rgba(46,125,70,.10);
  --tint-accent:     rgba(255,149,37,.10);

  --ok-bg: rgba(46,125,70,.10); --ok-border: rgba(46,125,70,.35); --ok-fg: #1E5B33;
  --err-bg: rgba(200,60,40,.08); --err-border: rgba(200,60,40,.32); --err-fg: #9B2C1A;

  --shadow-s: 0 2px 10px rgba(16,24,40,.06);
  --shadow-m: 0 12px 30px rgba(16,24,40,.10);
  --shadow-l: 0 24px 60px rgba(16,24,40,.14);

  --radius:   16px;
  --radius-s: 10px;
  --radius-l: 24px;

  --maxw: 1180px;
  --gutter: 24px;

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  --header-h: 86px;
}

/* --- tema SCURO: segue l'impostazione del sistema --- */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
    --bg:        #0B0D10;
    --bg-soft:   #101318;
    --surface:   #14181F;
    --surface-2: #1A1F28;
    --border:    #242A34;
    --border-2:  #313846;
    --fg:        #EEF1F6;
    --fg-2:      #C3CAD6;
    --muted:     #8F98A6;
    --accent-text: #FF9525;
    --accent-soft: rgba(255,149,37,.12);

    --header-bg-stuck: rgba(11,13,16,.86);
    --nav-panel:       rgba(11,13,16,.98);
    --nav-hover:       rgba(255,255,255,.05);
    --grid-line:       rgba(255,255,255,.028);
    --placeholder:     #5F6875;
    --tint-app:        rgba(46,125,70,.16);
    --tint-accent:     rgba(255,149,37,.13);

    --ok-bg: rgba(63,158,93,.12); --ok-border: rgba(63,158,93,.4); --ok-fg: #B7E6C6;
    --err-bg: rgba(232,96,76,.1); --err-border: rgba(232,96,76,.38); --err-fg: #F3B7AD;

    --shadow-s: 0 2px 10px rgba(0,0,0,.28);
    --shadow-m: 0 12px 34px rgba(0,0,0,.38);
    --shadow-l: 0 26px 70px rgba(0,0,0,.5);
  }
}
/* scelta scura fatta a mano (tasto del tema) */
:root[data-theme="dark"]{
    --bg:        #0B0D10;
    --bg-soft:   #101318;
    --surface:   #14181F;
    --surface-2: #1A1F28;
    --border:    #242A34;
    --border-2:  #313846;
    --fg:        #EEF1F6;
    --fg-2:      #C3CAD6;
    --muted:     #8F98A6;
    --accent-text: #FF9525;
    --accent-soft: rgba(255,149,37,.12);

    --header-bg-stuck: rgba(11,13,16,.86);
    --nav-panel:       rgba(11,13,16,.98);
    --nav-hover:       rgba(255,255,255,.05);
    --grid-line:       rgba(255,255,255,.028);
    --placeholder:     #5F6875;
    --tint-app:        rgba(46,125,70,.16);
    --tint-accent:     rgba(255,149,37,.13);

    --ok-bg: rgba(63,158,93,.12); --ok-border: rgba(63,158,93,.4); --ok-fg: #B7E6C6;
    --err-bg: rgba(232,96,76,.1); --err-border: rgba(232,96,76,.38); --err-fg: #F3B7AD;

    --shadow-s: 0 2px 10px rgba(0,0,0,.28);
    --shadow-m: 0 12px 34px rgba(0,0,0,.38);
    --shadow-l: 0 26px 70px rgba(0,0,0,.5);
  }


*,*::before,*::after{ box-sizing:border-box; }

/* niente rettangolo azzurro quando si tocca un pulsante sul telefono */
html{ -webkit-tap-highlight-color:transparent; }
a, button, label, summary, [role="button"], input, select, textarea{
  -webkit-tap-highlight-color:transparent;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
label:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible){ outline:none; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }

a{ color:var(--accent-text); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--accent-3); }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.18; letter-spacing:-.02em; margin:0 0 .5em; }
h1{ font-size:clamp(34px,5.2vw,60px); }
h2{ font-size:clamp(27px,3.6vw,42px); }
h3{ font-size:clamp(20px,2.2vw,25px); }
h4{ font-size:19px; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--accent); color:#101010; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.container--narrow{ max-width:840px; }
.container--mid{ max-width:1000px; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--accent); color:#111;
  padding:10px 16px; z-index:999; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------- utility ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body); font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); border:1px solid rgba(255,149,37,.28);
  padding:7px 14px; border-radius:999px; margin-bottom:20px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

.lead{ font-size:clamp(17px,1.9vw,20px); color:var(--fg-2); line-height:1.75; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }

.section{ padding:clamp(64px,8vw,112px) 0; position:relative; }
.section--tight{ padding:clamp(48px,5vw,74px) 0; }
.section--soft{ background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.section-head{ max-width:720px; margin:0 0 clamp(34px,4vw,56px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ color:var(--fg-2); font-size:clamp(16px,1.7vw,18.5px); }

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:15.5px; line-height:1;
  padding:15px 26px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn--primary{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-3) 100%);
  color:#14100A; box-shadow:0 8px 24px rgba(255,149,37,.22);
}
.btn--primary:hover{ color:#14100A; transform:translateY(-2px); box-shadow:0 14px 32px rgba(255,149,37,.32); }
.btn--ghost{ background:transparent; border-color:var(--border-2); color:var(--fg); }
.btn--ghost:hover{ color:var(--fg); border-color:var(--accent); background:var(--accent-soft); transform:translateY(-2px); }
.btn--sm{ padding:11px 18px; font-size:14px; border-radius:10px; }
.btn--block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-row.center{ justify-content:center; }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.is-stuck{
  background:var(--header-bg-stuck);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:66px; width:auto; }
@media (max-width: 560px){ .brand img{ height:58px; } }

.nav{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav a{
  color:var(--fg-2); font-size:15px; font-weight:500; padding:9px 14px; border-radius:9px;
  transition:color .18s ease, background .18s ease;
}
.nav a:hover{ color:var(--fg); background:var(--nav-hover); }
.nav .current-menu-item > a,
.nav .current_page_parent > a,
.nav .current-menu-ancestor > a{ color:var(--accent); }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px; }
.nav-cta-mobile{ display:none; }
.nav li{ position:relative; }

/* sottomenu */
.nav .sub-menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:220px; display:block;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:8px; box-shadow:var(--shadow-m); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav .sub-menu li{ width:100%; }
.nav .sub-menu a{ display:block; width:100%; }

.header-cta{ flex:none; margin-left:8px; }

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--border-2); border-radius:11px;
  background:transparent; cursor:pointer; align-items:center; justify-content:center; flex:none;
}
.nav-toggle span{ display:block; width:19px; height:2px; background:var(--fg); border-radius:2px; position:relative; transition:background .2s; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:19px; height:2px; background:var(--fg); border-radius:2px; transition:transform .25s ease, top .25s ease;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width: 960px){
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
  .nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    background:var(--nav-panel); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    flex-direction:column; align-items:stretch; gap:0; padding:14px var(--gutter) 26px;
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
    transform:translateY(-14px); opacity:0; visibility:hidden; transition:.25s ease;
    pointer-events:none;   /* chiuso: NON deve rubare i tocchi (i sotto-menu restavano cliccabili) */
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav:not(.is-open) *{ pointer-events:none; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:2px; width:100%; }
  .nav a{ padding:14px 12px; font-size:17px; border-radius:10px; }
  .nav .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    background:transparent; border:none; border-left:2px solid var(--border); border-radius:0;
    margin:2px 0 6px 12px; padding:0 0 0 8px;
  }
  .nav .nav-cta-mobile{ display:inline-flex; margin-top:14px; }
}

.site-main{ padding-top:var(--header-h); }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(60px,9vw,110px) 0 clamp(60px,8vw,100px); }
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:820px; z-index:0;
  background:
    radial-gradient(680px 420px at 78% 8%, rgba(255,149,37,.16), transparent 62%),
    radial-gradient(760px 520px at 12% 0%, rgba(90,120,255,.07), transparent 60%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 32%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 32%, #000 0%, transparent 72%);
}
.hero .container{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,64px); align-items:center; }
.hero h1{ margin-bottom:22px; }
.hero h1 .hl{ color:var(--accent); }
.hero .lead{ max-width:560px; margin-bottom:32px; }
.hero-points{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; }
.hero-points li{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--muted); }
.hero-points svg{ width:17px; height:17px; color:var(--accent); flex:none; }

.hero-visual{ position:relative; }
.hero-card{
  background:linear-gradient(160deg, #14181F 0%, #0B0D10 100%);
  border:1px solid #242A34; border-radius:var(--radius-l); padding:28px;
  box-shadow:var(--shadow-l); position:relative; overflow:hidden;
}
.hero-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,149,37,.6), transparent);
}
.hero-card .dots{ display:flex; gap:7px; margin-bottom:20px; }
.hero-card .dots i{ width:11px; height:11px; border-radius:50%; background:#313846; display:block; }
.hero-card .dots i:first-child{ background:#E8604C; }
.hero-card .dots i:nth-child(2){ background:var(--accent); }
.hero-card .dots i:nth-child(3){ background:var(--green-2); }
.code{
  font-family:'DejaVu Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13.5px; line-height:1.85; color:#C3CAD6; white-space:pre; overflow-x:auto; margin:0;
}
.code .k{ color:var(--accent); } .code .s{ color:#7FD1A0; } .code .c{ color:#5D6675; } .code .n{ color:#7FA9F5; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:560px; width:100%; }        /* sotto al testo, non sopra */
  .hero-card{ padding:22px 20px; }
  .code{ font-size:12px; line-height:1.75; }
}
@media (max-width: 480px){
  .hero-card{ padding:18px 16px; }
  .code{ font-size:11px; }
}

/* ---------- griglie / card ---------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 700px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 26px; position:relative; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card--hover:hover{ transform:translateY(-4px); border-color:var(--border-2); box-shadow:var(--shadow-m); }
.card h3{ margin-bottom:10px; }
.card p{ color:var(--fg-2); font-size:15.5px; margin:0; }
/* usabile sia dentro una .card sia da sola (pagine servizi/chi siamo) */
.card-ico{
  width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid rgba(255,149,37,.25); margin-bottom:18px; color:var(--accent);
  flex:none;
}
.card-ico svg{ width:24px; height:24px; }
.card ul{ margin:14px 0 0; padding:0 0 0 2px; list-style:none; }
.card ul li{ position:relative; padding-left:22px; font-size:14.8px; color:var(--muted); margin-bottom:7px; }
.card ul li::before{ content:""; position:absolute; left:4px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* passi numerati */
.steps{ counter-reset:step; }
.step{ position:relative; }
.step .num{
  font-family:var(--font-display); font-size:17px; font-weight:700; line-height:1; color:var(--accent);
  border:1px solid rgba(255,149,37,.25); background:var(--accent-soft);
  width:50px; height:50px; min-height:50px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex:none;
}

/* strip tecnologie */
.tech{ display:flex; flex-wrap:wrap; gap:10px; }
.tech span{
  font-size:13.5px; color:var(--fg-2); background:var(--surface-2); border:1px solid var(--border);
  padding:8px 15px; border-radius:999px; white-space:nowrap;
}

/* ---------- app / prodotto ---------- */
.app-feature{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,4.5vw,58px); align-items:center;
  background:linear-gradient(150deg, var(--tint-app) 0%, var(--surface) 55%);
  border:1px solid var(--border); border-radius:var(--radius-l);
  padding:clamp(26px,4vw,50px); overflow:hidden; position:relative;
}
.app-feature .app-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.app-feature .app-head img{ width:64px; height:64px; border-radius:16px; box-shadow:var(--shadow-s); }
.app-feature .app-head h3{ margin:0; font-size:clamp(23px,2.6vw,30px); }
.app-feature .app-head .sub{ color:var(--muted); font-size:14.5px; }
.app-shots{ display:flex; gap:16px; justify-content:center; }
.app-shots img{
  width:min(190px,30vw); border-radius:18px; border:1px solid var(--border-2); box-shadow:var(--shadow-l);
}
.app-shots{ align-items:flex-start; }
@media (max-width: 900px){
  .app-feature{ grid-template-columns:1fr; }
}

.badges{ display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; }
.badge-store{
  display:inline-flex; align-items:center; gap:12px; padding:11px 20px 11px 16px;
  border-radius:12px; border:1px solid var(--border-2); background:var(--surface-2); color:var(--fg);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
  width:238px; justify-content:flex-start;
}
@media (max-width: 420px){ .badge-store{ width:100%; } }
.badge-store:hover{ color:var(--fg); transform:translateY(-2px); border-color:var(--accent); background:var(--surface); }
.badge-store svg{ width:26px; height:26px; flex:none; }
.badge-store .txt{ display:flex; flex-direction:column; line-height:1.25; }
.badge-store .txt small{ font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.badge-store .txt b{ font-size:15.5px; font-weight:600; font-family:var(--font-display); }
.badge-store.is-soon{ opacity:.72; cursor:default; }
.badge-store.is-soon:hover{ transform:none; border-color:var(--border-2); background:var(--surface-2); }

/* pagina prodotto */
.product-hero{
  position:relative; overflow:hidden; padding:clamp(52px,7vw,88px) 0 clamp(44px,6vw,72px);
  background:radial-gradient(760px 460px at 20% 0%, var(--tint-app), transparent 62%), var(--bg);
  border-bottom:1px solid var(--border);
}
.product-hero .grid{ grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(30px,5vw,60px); }
@media (max-width:900px){ .product-hero .grid{ grid-template-columns:1fr; } }
.product-hero .app-head{ display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.product-hero .app-head img{ width:78px; height:78px; border-radius:19px; box-shadow:var(--shadow-m); }

.exam-list{ display:grid; gap:14px; }
.exam{
  display:flex; gap:16px; align-items:flex-start; padding:20px 22px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color .2s ease, transform .2s ease;
}
.exam:hover{ border-color:var(--border-2); transform:translateX(3px); }
.exam .ico{ font-size:24px; line-height:1.2; flex:none; }
.exam h4{ margin:0 0 4px; font-size:17.5px; }
.exam p{ margin:0; font-size:15px; color:var(--muted); }

.shots-strip{ display:flex; gap:18px; overflow-x:auto; padding:6px 2px 20px; scroll-snap-type:x mandatory; }
.shots-strip img{
  width:216px; flex:none; border-radius:18px; border:1px solid var(--border-2);
  box-shadow:var(--shadow-m); scroll-snap-align:center;
}
.shots-strip::-webkit-scrollbar{ height:8px; }
.shots-strip::-webkit-scrollbar-track{ background:var(--surface); border-radius:99px; }
.shots-strip::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:99px; }
.shots-strip::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

.note{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:16px 20px; border-radius:0 var(--radius-s) var(--radius-s) 0; font-size:15.5px; color:var(--fg-2);
}

/* ---------- CTA ---------- */
.cta-band{
  background:linear-gradient(140deg, var(--tint-accent) 0%, var(--surface) 62%);
  border:1px solid var(--border); border-radius:var(--radius-l);
  padding:clamp(34px,5vw,58px); text-align:center; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,149,37,.55),transparent);
}
.cta-band h2{ margin-bottom:14px; }
.cta-band p{ color:var(--fg-2); max-width:600px; margin:0 auto 28px; }

/* ---------- contenuto testuale (pagine legali, ecc.) ---------- */
.page-hero{ padding:clamp(44px,5.5vw,76px) 0 0; }
.page-hero h1{ margin-bottom:14px; }
.page-hero .lead{ max-width:720px; }

.prose{ font-size:16.5px; color:var(--fg-2); min-width:0; max-width:100%; }
.prose h2{ font-size:clamp(21px,2.4vw,27px); color:var(--fg); margin:2em 0 .6em; padding-top:.2em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:19.5px; color:var(--fg); margin:1.6em 0 .5em; }
.prose ul,.prose ol{ padding-left:22px; margin:0 0 1.2em; }
.prose li{ margin-bottom:9px; }
.prose li::marker{ color:var(--accent); }
.prose strong{ color:var(--fg); font-weight:600; }
.prose code{
  font-family:'DejaVu Sans Mono', ui-monospace, monospace; font-size:.9em;
  background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:2px 6px; color:var(--accent-2);
}
.prose table{
  width:100%; max-width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:15px;
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.prose table tbody{ display:table; width:100%; min-width:520px; }
.prose th,.prose td{ border:1px solid var(--border); padding:11px 13px; text-align:left; vertical-align:top; }
.prose th{ background:var(--surface-2); color:var(--fg); font-weight:600; }
/* Tabelle legali sul telefono (28/9/2026): con 3-4 colonne lo scorrimento laterale tagliava le parole
   e nascondeva l'ultima colonna. Le tabelle con class="tabella-schede" diventano schede: una riga = una
   scheda, la prima cella fa da titolo e le altre riportano l'etichetta della colonna (data-label). */
@media (max-width: 640px){
  .prose table.tabella-schede{ display:block; overflow:visible; font-size:15px; }
  .prose table.tabella-schede tbody{ display:block; min-width:0; width:auto; }
  .prose table.tabella-schede tr{ display:block; border:1px solid var(--border); border-radius:12px; margin:0 0 12px; background:var(--surface); overflow:hidden; }
  .prose table.tabella-schede tr:first-child{ display:none; }
  .prose table.tabella-schede td{ display:block; border:none; border-top:1px solid var(--border); padding:10px 14px; }
  .prose table.tabella-schede td:first-child{ border-top:none; background:var(--surface-2); color:var(--fg); font-weight:600; }
  .prose table.tabella-schede td[data-label]:not(:first-child)::before{
    content:attr(data-label); display:block; margin-bottom:3px;
    font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  }
}
.prose blockquote{ margin:0 0 1.2em; padding:14px 20px; border-left:3px solid var(--accent); background:var(--surface); border-radius:0 10px 10px 0; }
.prose img{ border-radius:var(--radius-s); margin:1em 0; }
.prose hr{ border:none; border-top:1px solid var(--border); margin:2.2em 0; }
.prose .card{ margin:1.4em 0; }
.prose .card p{ font-size:16px; }

.legal-meta{
  display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); padding:7px 14px; border-radius:999px; margin-bottom:14px;
}
.legal-meta svg{ width:15px; height:15px; flex:none; color:var(--accent); }

/* indice laterale pagine legali */
.legal-layout{ display:grid; grid-template-columns:1fr 244px; gap:clamp(28px,4vw,54px); align-items:start; }
.legal-layout > *{ min-width:0; }
.legal-toc{ position:sticky; top:calc(var(--header-h) + 24px); font-size:14.5px; }
.legal-toc h4{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; font-family:var(--font-body); }
.legal-toc ul{ list-style:none; margin:0; padding:0; border-left:1px solid var(--border); }
.legal-toc li a{ display:block; padding:6px 0 6px 14px; color:var(--muted); border-left:2px solid transparent; margin-left:-1px; }
.legal-toc li a:hover{ color:var(--fg); border-left-color:var(--accent); }
@media (max-width: 980px){ .legal-layout{ grid-template-columns:1fr; } .legal-toc{ display:none; } }

/* ---------- form contatti ---------- */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,52px); align-items:start; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width: 620px){ .form-row{ grid-template-columns:1fr; } }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:14px; font-weight:600; color:var(--fg-2); margin-bottom:7px; }
.field label .req{ color:var(--accent); }
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=password],
.field input[type=number],
.field input[type=url],
.field input[type=search],
.field select,
.field textarea{
  width:100%; background:var(--bg-soft); color:var(--fg); font-family:var(--font-body); font-size:16px;
  border:1px solid var(--border); border-radius:11px; padding:13px 15px; transition:border-color .18s ease, background .18s ease;
}
.field textarea{ min-height:158px; resize:vertical; line-height:1.6; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); background:var(--surface); }
.field input::placeholder, .field textarea::placeholder{ color:var(--placeholder); }
.field select{ appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F98A6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:42px; }

.check{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--muted); line-height:1.6; }
.check input{ margin-top:4px; width:17px; height:17px; accent-color:var(--accent); flex:none; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.alert{ border-radius:12px; padding:16px 20px; margin-bottom:24px; font-size:15.5px; border:1px solid; }
.alert--ok{ background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok-fg); }
.alert--err{ background:var(--err-bg); border-color:var(--err-border); color:var(--err-fg); }

.contact-info .row{ display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--border); }
.contact-info .row:last-child{ border-bottom:none; }
.contact-info .row .ico{ color:var(--accent); flex:none; margin-top:2px; }
.contact-info .row .ico svg{ width:20px; height:20px; }
.contact-info .row b{ display:block; font-size:14px; color:var(--muted); font-weight:600; margin-bottom:2px; }
.contact-info .row span,.contact-info .row a{ font-size:16px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--bg-soft); border-top:1px solid var(--border); padding:clamp(50px,6vw,74px) 0 0; margin-top:0; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,3vw,44px); padding-bottom:44px; }
@media (max-width: 900px){ .footer-top{ grid-template-columns:1fr 1fr; gap:34px 24px; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand img{ height:58px; width:auto; margin-bottom:18px; }
.footer-brand p{ color:var(--muted); font-size:15px; max-width:320px; }
.footer-col h4{ font-family:var(--font-body); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:var(--fg-2); font-size:15px; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{
  border-top:1px solid var(--border); padding:22px 0 30px;
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between;
  font-size:13.5px; color:var(--muted);
}
.footer-bottom a{ color:var(--muted); }
.footer-bottom a:hover{ color:var(--accent); }

/* ---------- 404 / blog ---------- */
.entry-list{ display:grid; gap:20px; }
.entry{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; }
.entry h2{ font-size:23px; margin-bottom:8px; }
.entry .meta{ font-size:13.5px; color:var(--muted); margin-bottom:12px; }

.err-404{ text-align:center; padding:clamp(70px,10vw,140px) 0; }
.err-404 .big{ font-family:var(--font-display); font-size:clamp(80px,16vw,170px); line-height:1; color:var(--accent); opacity:.22; margin-bottom:-.15em; }

/* ---------- animazioni ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- WordPress core ---------- */
.alignleft{ float:left; margin:0 1.5em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.5em; }
.aligncenter{ margin-left:auto; margin-right:auto; }
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px;
  overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal!important;
}
.wp-caption-text{ font-size:13.5px; color:var(--muted); }


/* ---------- logo che segue il tema ---------- */
.logo-ondark{ display:none; }
.logo-onlight{ display:block; }
@media (prefers-color-scheme: dark){
:where(:root:not([data-theme="light"])) .logo-ondark{ display:block; }
:where(:root:not([data-theme="light"])) .logo-onlight{ display:none; }
}
/* scelta scura fatta a mano (tasto del tema) */
:where(:root[data-theme="dark"]) .logo-ondark{ display:block; }
:where(:root[data-theme="dark"]) .logo-onlight{ display:none; }


/* ---------- progetto realizzato per un cliente ---------- */
.cliente{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:16px 22px; text-decoration:none;
  padding:20px 24px; margin:0 0 30px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow-s);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cliente:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-m); }
.cliente .et{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:700; white-space:nowrap;
}
/* ATTENZIONE: niente `display` qui dentro. I loghi chiaro/scuro si nascondono con
   .logo-ondark{display:none} (specificita 0,1,0): una regola piu specifica che rimette
   display:block li mostra tutti e due. Gia' successo su gabbio.it, non ripeterlo.
   Per togliere lo stacco sotto l'immagine si usa line-height, non display. */
.cliente .cliente-logo{ line-height:0; }
.cliente img{ height:42px; width:auto; max-width:100%; }
.cliente .sett{
  flex:1 1 100%; margin:0; padding-top:14px; border-top:1px solid var(--border);
  font-size:14px; color:var(--muted); line-height:1.55;
}

@media (max-width: 640px){
  .cliente{
    /* in verticale: etichetta, logo, poi la riga dei settori staccata da un filo */
    flex-direction:column; align-items:flex-start; gap:12px;
    padding:20px; margin:0 0 26px;
  }
  .cliente .et{ font-size:10.5px; letter-spacing:.14em; white-space:normal; }
  .cliente .cliente-logo{ margin:2px 0 2px; }
  .cliente img{ height:38px; }
  .cliente .sett{ padding-top:14px; font-size:13.5px; }
}

.badge-cliente{
  display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--border); padding:6px 12px; border-radius:999px;
}
.badge-cliente img{ height:20px; width:auto; }

/* ---------- selettore di lingua ---------- */
.lang-switch{
  display:inline-flex; align-items:center; gap:2px; flex:none;
  border:1px solid var(--border); border-radius:999px; padding:3px; background:var(--surface);
  font-size:12.5px; font-weight:700; letter-spacing:.04em;
}
.lang-switch a, .lang-switch span{
  display:block; padding:5px 10px; border-radius:999px; line-height:1;
  color:var(--muted); text-decoration:none; transition:color .18s ease, background .18s ease;
}
.lang-switch a:hover{ color:var(--fg); background:var(--nav-hover); }
.lang-switch .is-on{ color:#14100A; background:var(--accent); }
.lang-switch--mobile{ display:none; }
@media (max-width: 960px){
  .lang-switch--desktop{ display:none; }
  .lang-switch--mobile{ display:inline-flex; margin-top:16px; align-self:flex-start; }
}

/* la data di aggiornamento delle pagine legali sta in fondo, prima del footer */
.legal-meta--fondo{
  margin:clamp(34px,4vw,54px) 0 0;
  max-width:none; width:auto;
}
.legal-layout .legal-meta--fondo{ grid-column:1 / -1; }

/* ---------- strisciata dei loghi (scorre da sola, si può anche trascinare) ---------- */
.marquee{
  position:relative; width:100%; padding:18px 0 4px;
  overflow:hidden;                 /* scorre via transform, non via scroll: niente scatti */
  touch-action:pan-y;              /* il trascinamento orizzontale lo gestiamo noi */
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee::-webkit-scrollbar{ display:none; height:0; }
.marquee:active{ cursor:grabbing; }
.marquee-track{
  display:flex; align-items:flex-start; width:max-content;
  gap:clamp(30px,4vw,58px);
  will-change:transform;
}

.tech-item{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:14px; flex:none; min-width:clamp(96px,11vw,132px);
  transition:transform .2s ease;
}
.tech-item img{
  height:clamp(52px,6vw,74px); width:auto; max-width:100%;
  opacity:.92; transition:opacity .2s ease;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}
.tech-item span{
  font-size:clamp(12.5px,1.35vw,15px); font-weight:600; letter-spacing:.01em;
  color:var(--muted); text-align:center; line-height:1.25; white-space:nowrap;
  user-select:none;
}
.marquee:hover .tech-item:hover{ transform:translateY(-3px); }
.marquee:hover .tech-item:hover img{ opacity:1; }
.marquee:hover .tech-item:hover span{ color:var(--fg-2); }
@media (prefers-reduced-motion: reduce){
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee-track{ gap:30px; }
}


/* ---------- video con anteprima locale (YouTube caricato solo al clic) ---------- */
.video-box{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--border);
  background:#000; box-shadow:var(--shadow-m); cursor:pointer;
}
.video-box img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease, filter .3s ease; }
.video-box:hover img{ transform:scale(1.03); filter:brightness(.9); }
.video-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-box .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
}
.video-box .play span{
  width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent); box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .25s ease;
}
.video-box:hover .play span{ transform:scale(1.08); }
.video-box .play svg{ width:26px; height:26px; margin-left:4px; fill:#14100A; }
.video-box .etichetta{
  position:absolute; left:14px; bottom:14px; z-index:2;
  background:rgba(0,0,0,.6); color:#fff; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:999px; backdrop-filter:blur(6px);
}

/* ---------- scelte a pillola al posto del menu a tendina ---------- */
.etichetta-campo{
  display:block; font-size:14px; font-weight:600; color:var(--fg-2); margin-bottom:10px;
}
.scelte{ display:flex; flex-wrap:wrap; gap:9px; }
.scelta{ position:relative; display:inline-flex; cursor:pointer; }
.scelta input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.scelta span{
  display:inline-block; padding:10px 16px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg-soft);
  font-size:14.5px; color:var(--fg-2); line-height:1.2;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.scelta:hover span{ border-color:var(--border-2); color:var(--fg); }
.scelta input:checked + span{
  border-color:var(--accent); background:var(--accent-soft); color:var(--fg); font-weight:600;
}
.scelta input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- sfondo animato della prima schermata ---------- */
.hero-sfondo{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
  opacity:1;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 30%, #000 25%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 60% 30%, #000 25%, transparent 78%);
}
@media (max-width: 700px){
  .hero-sfondo{ -webkit-mask-image:radial-gradient(140% 80% at 50% 22%, #000 20%, transparent 75%);
                        mask-image:radial-gradient(140% 80% at 50% 22%, #000 20%, transparent 75%); }
}

/* ---------- modello 3D che si può girare col dito ---------- */
.modello3d{
  position:relative; width:100%; aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-s); overflow:hidden;
  background:radial-gradient(circle at 50% 42%, var(--surface-2) 0%, var(--surface) 70%);
  cursor:grab; touch-action:pan-y;
}
.modello3d:active{ cursor:grabbing; }
.modello3d .modello3d-poster{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:88%; max-width:420px; height:auto; display:block;
}
.modello3d model-viewer{
  width:100%; height:100%; background:transparent;
  --poster-color:transparent; --progress-bar-color:var(--accent);
}
.modello3d-suggerimento{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--muted); background:var(--surface); border:1px solid var(--border);
  padding:5px 12px; border-radius:999px; white-space:nowrap;
  opacity:.9; pointer-events:none; transition:opacity .3s ease;
}
.modello3d.is-pronto .modello3d-suggerimento{ opacity:.75; }

/* ---------- area account ---------- */
.profilo{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.profilo-foto{
  width:72px; height:72px; border-radius:50%; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid rgba(255,149,37,.28);
}
.profilo-foto img{ width:100%; height:100%; object-fit:cover; }
.profilo-foto span{ font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--accent); }

.dati-account{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.dati-account li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--border); font-size:15px;
}
.dati-account li span{ color:var(--muted); }
.dati-account li strong{ color:var(--fg); font-weight:600; text-align:right; }

.separatore{
  position:relative; text-align:center; margin:22px 0 18px;
  color:var(--muted); font-size:13px;
}
.separatore::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border);
}
.separatore span{ position:relative; background:var(--surface); padding:0 12px; }

.pulsante-google{ gap:10px; }
.pulsante-google svg{ flex:none; }

/* ---------- collegamento all'account nella testata ---------- */
.link-account{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-size:14.5px; font-weight:500; color:var(--fg-2);
  padding:9px 14px; border-radius:9px; text-decoration:none;
  transition:color .18s ease, background .18s ease;
}
.link-account:hover{ color:var(--fg); background:var(--nav-hover); }
.link-account svg{ width:18px; height:18px; flex:none; }
.link-account--mobile{ display:none; }
@media (max-width: 1080px){ .link-account--desktop span{ display:none; } }
@media (max-width: 960px){
  .link-account--desktop{ display:none; }
  .link-account--mobile{
    display:inline-flex; margin-top:10px; align-self:flex-start;
    font-size:17px; padding:14px 12px;
  }
  .link-account--mobile svg{ width:20px; height:20px; }
}

/* pulsante ufficiale di Google, centrato come gli altri */
.posto-google{ display:flex; justify-content:center; margin-top:4px; }

/* ---------- schede dei dati per applicazione ---------- */
.scheda-app-testa{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.scheda-app-testa img{ width:46px; height:46px; border-radius:12px; flex:none; }
.scheda-app-testa h3{ margin:0; font-size:20px; }
.scheda-app-segno{
  width:46px; height:46px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid rgba(255,149,37,.25);
  font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--accent);
}
.dettagli-app{ list-style:none; margin:16px 0 0; padding:0; }
.dettagli-app li{
  font-size:14px; color:var(--muted); padding:6px 0 6px 20px; position:relative;
}
.dettagli-app li::before{
  content:""; position:absolute; left:5px; top:14px; width:6px; height:6px;
  border-radius:50%; background:var(--accent);
}

/* ---------- menu a tendina dell'account ---------- */
.menu-account{ position:relative; flex:none; }
.menu-account .apri-account{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
}
.avatar-testata{
  width:26px; height:26px; border-radius:50%; flex:none; object-fit:cover;
  border:1px solid var(--border-2); background:var(--surface-2);
}
.avatar-lettera{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--accent); background:var(--accent-soft); border-color:rgba(255,149,37,.3);
}
.freccia-menu{ width:14px !important; height:14px !important; opacity:.6; transition:transform .2s ease; }
.apri-account[aria-expanded="true"] .freccia-menu{ transform:rotate(180deg); }

.tendina-account{
  position:absolute; top:calc(100% + 10px); right:0; min-width:262px; z-index:120;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:8px; box-shadow:var(--shadow-m);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.menu-account.aperto .tendina-account{ opacity:1; visibility:visible; transform:none; }

.tendina-testa{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px 14px; margin-bottom:6px; border-bottom:1px solid var(--border);
}
.tendina-testa .avatar-testata{ width:40px; height:40px; font-size:17px; }
.tendina-testa strong{ display:block; font-size:15px; color:var(--fg); line-height:1.3; }
.tendina-testa span{ display:block; font-size:13px; color:var(--muted); word-break:break-all; }
.tendina-testa--vuota{ display:block; }

.tendina-account a,
.tendina-account button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; border-radius:10px; border:0; background:transparent;
  font-family:inherit; font-size:14.5px; color:var(--fg-2); text-align:left;
  cursor:pointer; text-decoration:none;
  transition:background .16s ease, color .16s ease;
}
.tendina-account a:hover,
.tendina-account button:hover{ background:var(--nav-hover); color:var(--fg); }
.tendina-account svg{ width:17px; height:17px; flex:none; color:var(--muted); }
.tendina-esci{ margin-top:6px; padding-top:6px; border-top:1px solid var(--border); }

/* ---------- pagina di collegamento delle app ---------- */
.card--centro{ text-align:center; max-width:620px; margin:0 auto; }
.card--centro .card-ico{ margin-left:auto; margin-right:auto; }
.card--centro h3{ margin:0 0 10px; }
.card--centro p{ margin:0 auto; max-width:52ch; }
.card-ico--ok{ background:rgba(34,160,90,.12); border-color:rgba(34,160,90,.3); color:#22a05a; }
.card-ico--err{ background:rgba(200,60,60,.10); border-color:rgba(200,60,60,.28); color:#c83c3c; }
.conferma-collega{ max-width:560px; margin:0 auto; }
.conferma-collega .profilo-foto{ width:64px; height:64px; }
.conferma-collega .profilo-foto img{ width:64px; height:64px; }
.conferma-collega .btn--ghost{ white-space:normal; line-height:1.35; }
@media (max-width:520px){
  .conferma-collega .btn--ghost{ font-size:14.5px; padding-left:14px; padding-right:14px; }
}
.pulsante-facebook svg{ flex:none; }

/* ---------- elenco "quello che non facciamo" ---------- */
.elenco-no{ list-style:none; margin:16px 0 0; padding:0; }
.elenco-no li{ position:relative; padding-left:28px; margin-bottom:10px; color:var(--muted); line-height:1.6; }
.elenco-no li::before{
  content:""; position:absolute; left:4px; top:.62em; width:12px; height:2px;
  border-radius:2px; background:var(--accent);
}

/* ---------- occhio mostra/nascondi password ---------- */
.campo-pass { position: relative; }
.campo-pass input { width: 100%; padding-right: 46px; }
.occhio-pass {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border: 0; background: transparent;
  cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--fg-3, #8a8a94);
}
.occhio-pass:hover { color: var(--accent, #e68800); }
.occhio-pass::before {
  content: ""; width: 22px; height: 22px; background-color: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.occhio-pass[aria-pressed="true"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.check--inline { display: flex; align-items: center; gap: 9px; margin: 4px 0 14px; font-size: 14.5px; cursor: pointer; }
.check--inline input { width: auto; margin: 0; accent-color: var(--accent, #e68800); }

/* ---------- riga di bottoni ben distanziati (pagina Sicurezza) ---------- */
.riga-bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.riga-bottoni .btn { flex: 0 1 auto; }
@media (max-width: 560px) {
  .riga-bottoni { flex-direction: column; align-items: stretch; gap: 10px; }
  .riga-bottoni .btn { width: 100%; text-align: center; justify-content: center; }
}


/* Toglie l'occhio NATIVO che Chrome/Edge aggiungono ai campi password:
   restava un secondo occhio sovrapposto al nostro. */
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear { display: none; }
input[type=password]::-webkit-credentials-auto-fill-button,
input[type=password]::-webkit-strong-password-auto-fill-button { visibility: hidden; display: none !important; }
/* il nostro occhio: nessuno sfondo, niente riquadro blu al tocco */
.occhio-pass { background: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; outline: none; }
.occhio-pass:focus, .occhio-pass:focus-visible, .occhio-pass:active { background: transparent !important; outline: none !important; box-shadow: none !important; }


/* ============ Tasto del tema (identico a cave.gabbio.it) ============ */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) { color-scheme: dark; } }

.cave-tema{
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:38px; height:38px;
    padding:0; margin-left:6px;
    border:1px solid var(--border, rgba(0,0,0,.14));
    border-radius:50%;
    background:transparent;
    color:var(--fg, #1a1a1a);
    cursor:pointer;
    -webkit-appearance:none; appearance:none;
    transition:background .2s, border-color .2s, color .2s, transform .15s;
}
.cave-tema svg{ width:18px; height:18px; display:block; }
.cave-tema:hover{ background:var(--accent-text, #E68800); border-color:var(--accent-text, #E68800); color:#fff; transform:translateY(-1px); }
.cave-tema:focus-visible{ outline:2px solid var(--accent-text, #E68800); outline-offset:2px; }