/* ═══════════════════════════════════════════════════════════════════
   WEBEXPERTSITE — foglio di stile della home nuova
   ═══════════════════════════════════════════════════════════════════

   Questo file vale SOLO per index.html. Le altre pagine continuano a
   usare stile.css e non le tocca.

   Qui i nomi delle classi dicono cosa sono in italiano (.scheda,
   .prezzo, .passo) invece di essere una fila di sigle. Se un domani
   devi cambiare un colore o una misura, cerchi la parola e la trovi.

   I colori stanno tutti nelle variabili qui sotto: cambiane uno e
   cambia in tutta la pagina.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --nero:        #050508;   /* lo sfondo della pagina */
  --nero-2:      #0a0a0f;   /* le fasce leggermente piu' chiare */
  --pannello:    #0d0d13;   /* il fondo dei riquadri */
  --pannello-2:  #101018;   /* i riquadri in evidenza */

  --oro:         #D4AF37;   /* l'oro principale */
  --oro-chiaro:  #F3D98B;   /* l'oro dei titoli e dei bordi accesi */
  --oro-scuro:   #A8842A;

  --bianco:      #FFFFFF;
  --grigio:      #A9A9B2;   /* il testo normale */
  --grigio-2:    #75757F;   /* le note piccole */

  --bordo:       rgba(255,255,255,.09);
  --bordo-oro:   rgba(212,175,55,.42);

  --serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:   'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --largo:  1400px;         /* quanto e' larga la parte scritta */
  --raggio: 14px;           /* quanto sono arrotondati i riquadri */
}

/* ─────────────────────────── BASI ─────────────────────────── */

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--nero);
  color:var(--grigio);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }

::selection{ background:var(--oro); color:var(--nero) }

/* La barra di scorrimento in tinta col sito.
   scrollbar-color serve per Chrome moderno e Firefox; le due righe
   -webkit- servono per Safari, che quella non la capisce. */
html{ scrollbar-width:thin; scrollbar-color:#2a2a38 var(--nero) }
::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--nero) }
::-webkit-scrollbar-thumb{ background:#2a2a38; border-radius:99px }
::-webkit-scrollbar-thumb:hover{ background:var(--oro) }

/* La striscia centrale in cui sta tutto il contenuto */
.contenitore{
  width:100%;
  max-width:var(--largo);
  margin:0 auto;
  padding:0 clamp(20px, 3vw, 46px);
}

/* Su un monitor da 1900px una colonna da 1200 lascia mezzo schermo
   vuoto ai lati e il testo sembra cominciare a meta' pagina. */
@media (min-width:1620px){ :root{ --largo:1560px } }
@media (min-width:1900px){ :root{ --largo:1720px } }

/* quando si clicca una voce del menu, la sezione non deve
   finire nascosta sotto la barra fissa in cima */
section[id]{ scroll-margin-top:86px }

.sezione{ padding:76px 0 }
.sezione--stretta{ padding:56px 0 }

/* Di base si vede tutto. L'effetto di comparsa si accende solo se lo
   script arriva in fondo: se qualcosa lo blocca, la pagina resta
   leggibile invece di restare bianca. */
.appare{ opacity:1; transform:none }
html.animazioni .appare{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
html.animazioni .appare.mostrato{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  html.animazioni .appare{ opacity:1; transform:none; transition:none }
  html{ scroll-behavior:auto }
}

/* ─────────────────────── TITOLI E TESTI ─────────────────────── */

h1, h2, h3{
  font-family:var(--serif);
  font-weight:500;
  color:var(--bianco);
  margin:0;
  line-height:1.15;
  letter-spacing:-.01em;
}

.oro{ color:var(--oro-chiaro) }

/* Il titolo di sezione: parola, filo d'oro che attraversa, nota a destra.
   Su telefono il filo sparisce e la nota va a capo. */
.testata{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-bottom:30px;
}
/* niente white-space:nowrap qui: su una larghezza di mezzo il titolo
   o la nota a destra spingevano la pagina fuori schermo */
.testata h2{ font-size:clamp(25px, 3.4vw, 37px); min-width:0 }
.testata .filo{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--oro-scuro), rgba(212,175,55,.12));
  transform:translateY(-6px);
}
.testata .nota{
  font-size:12px;
  color:var(--grigio-2);
  max-width:26em;
  text-align:right;
}

@media (max-width:820px){
  .testata{ flex-wrap:wrap; gap:10px }
  .testata h2{ width:100% }
  .testata .filo{ display:none }
}

/* ─────────────────────────── BOTTONI ─────────────────────────── */

.bottone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 26px;
  border-radius:8px;
  border:1px solid var(--bordo-oro);
  background:transparent;
  color:var(--oro-chiaro);
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.bottone:hover{ border-color:var(--oro); transform:translateY(-2px) }

.bottone--pieno{
  background:linear-gradient(135deg, var(--oro-chiaro), var(--oro));
  border-color:var(--oro-chiaro);
  color:#1a1408;
  font-weight:700;
}
.bottone--pieno:hover{ background:linear-gradient(135deg, #FFE9AE, var(--oro-chiaro)) }

.bottone--chiaro{ border-color:rgba(255,255,255,.22); color:var(--bianco) }
.bottone--chiaro:hover{ border-color:var(--bianco) }

.bottone--piccolo{ padding:9px 18px; font-size:13px }

.freccia{ transition:transform .25s ease }
.bottone:hover .freccia, .collegamento:hover .freccia{ transform:translateX(3px) }

/* Il collegamento dorato con la freccia, sotto alle schede */
.collegamento{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--oro-chiaro);
  font-size:14px;
  font-weight:600;
}
.collegamento:hover{ color:#FFE9AE }

/* ────────────────────────── LA BARRA IN CIMA ────────────────────────── */

.barra{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.barra.attaccata{
  background:rgba(7,7,11,.88);
  border-bottom-color:var(--bordo);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.barra .contenitore{
  display:flex;
  align-items:center;
  gap:26px;
  height:74px;
}

.marchio{ display:flex; align-items:center; gap:11px; flex-shrink:0 }
.marchio svg{ width:34px; height:34px; flex-shrink:0 }
.marchio .nome{
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--bianco);
  line-height:1.1;
}
.marchio .sotto{
  display:block;
  font-size:8.5px;
  font-weight:500;
  letter-spacing:.34em;
  color:var(--oro);
  margin-top:3px;
}

.menu{ display:flex; align-items:center; gap:25px; margin-left:14px }
.menu a{
  font-size:13.5px;
  font-weight:500;
  color:var(--grigio);
  transition:color .2s ease;
  white-space:nowrap;
}
.menu a:hover{ color:var(--bianco) }

.lingue{ display:flex; align-items:center; gap:2px; margin-left:auto }
.lingua{
  padding:5px 9px;
  border-radius:99px;
  font-size:12px;
  font-weight:700;
  color:var(--grigio-2);
  background:transparent;
  border:0;
  cursor:pointer;
  transition:color .2s ease, background .2s ease;
}
.lingua:hover{ color:var(--bianco) }
.lingua.scelta{ background:var(--oro); color:var(--nero) }
.lingue .divisore{ color:var(--grigio-2); font-size:12px }

.barra .bottone{ flex-shrink:0 }

/* Il pulsante col panino, che si vede solo sul telefono */
.panino{
  display:none;
  margin-left:auto;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  border:1px solid var(--bordo);
  border-radius:9px;
  background:transparent;
  cursor:pointer;
}
.panino span{
  display:block; width:18px; height:2px;
  background:var(--bianco); border-radius:2px;
  position:relative;
}
.panino span::before, .panino span::after{
  content:''; position:absolute; left:0;
  width:18px; height:2px; background:var(--bianco); border-radius:2px;
}
.panino span::before{ top:-6px }
.panino span::after{ top:6px }

.menu-telefono{
  display:none;
  border-top:1px solid var(--bordo);
  background:rgba(7,7,11,.97);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:16px 20px 22px;
}
.menu-telefono.aperto{ display:block }
.menu-telefono a{
  display:block;
  padding:11px 0;
  font-size:15px;
  color:var(--grigio);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.menu-telefono a:hover{ color:var(--bianco) }
.menu-telefono .bottone{ width:100%; margin-top:16px }

@media (max-width:1080px){
  .menu, .barra > .contenitore > .bottone, .lingue{ display:none }
  .panino{ display:flex }
  .barra .contenitore{ height:66px }
}

/* ─────────────────────────── IL PEZZO IN CIMA ─────────────────────────── */

.cima{
  position:relative;
  min-height:min(86vh, 860px);
  max-height:920px;
  display:flex;
  align-items:center;
  padding:130px 0 54px;
  overflow:hidden;
}
.cima .sfondo{
  position:absolute; inset:0;
  z-index:0;
  overflow:hidden;
}
.cima .sfondo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;   /* centrata: su schermi larghi si vedeva
                               solo il terzo destro e il resto era nero */
}
/* Il velo scuro che parte da sinistra: serve perche' il testo bianco
   resti leggibile sopra la fotografia. */
/* Il velo scuro serve solo a far leggere il testo bianco sopra la
   fotografia. Prima era troppo carico: su uno schermo largo la meta'
   sinistra diventava nero piatto e la foto spariva. Adesso schiarisce
   prima, e un alone dorato tiene viva la parte vuota. */
.cima .velo{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(70% 90% at 12% 55%, rgba(212,175,55,.07), transparent 70%),
    linear-gradient(90deg, rgba(5,5,8,.93) 0%, rgba(5,5,8,.8) 28%, rgba(5,5,8,.42) 56%, rgba(5,5,8,.14) 82%, transparent 100%),
    linear-gradient(180deg, rgba(5,5,8,.8) 0%, transparent 22%, transparent 78%, var(--nero) 100%);
}
.cima .contenitore{ position:relative; z-index:2 }

.cima h1{
  font-size:clamp(33px, 5.4vw, 60px);
  line-height:1.08;
  max-width:14em;
}
.cima .sottotitolo{
  margin:22px 0 0;
  font-size:clamp(15px, 1.7vw, 18px);
  color:#C8C8CE;
  max-width:36em;
}
.cima .promessa{
  margin:9px 0 0;
  font-size:clamp(17px, 2vw, 21px);
  font-weight:700;
  color:var(--bianco);
}
.cima .pulsanti{ display:flex; flex-wrap:wrap; gap:13px; margin-top:28px }
.cima .puntino{ margin:20px 0 0; font-size:12.5px; color:var(--grigio-2); max-width:44em }

/* La fila di icone in fondo al pezzo in cima */
.capacita{
  display:flex;
  flex-wrap:wrap;
  gap:14px 34px;
  margin-top:46px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.07);
}
.capacita div{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:#C0C0C8 }
.capacita svg{ width:23px; height:23px; stroke:var(--oro); fill:none; stroke-width:1.5; flex-shrink:0 }

@media (max-width:760px){
  .cima{ min-height:0; padding:106px 0 44px }
  /* Sul telefono la foto NON sta dietro al testo: scende SOTTO.
     Il testo bianco sopra una fotografia, su uno schermo piccolo e in
     pieno sole, non si legge. Cosi' il titolo e il pulsante sono
     nitidi e la foto fa comunque la sua figura appena sotto.
     L'ordine lo decide "order": nel codice la foto viene prima, qui
     la mandiamo dopo, senza dover riscrivere la pagina. */
  .cima{ display:flex; flex-direction:column }
  .cima .contenitore{ order:1 }
  .cima .sfondo{
    order:2;
    position:relative; inset:auto;
    width:100%;
    margin:26px 0 0;
    aspect-ratio:16/11;
  }
  .cima .sfondo img{ object-position:center }
  /* il velo scuro non serve piu': il testo non ci sta piu' sopra */
  .cima .velo{ display:none }
  .cima .pulsanti .bottone{ flex:1 1 100%; }
  .capacita{ gap:12px 22px; margin-top:34px }
  .capacita div{ font-size:12.5px }
}

/* ───────────────────────── SCHEDE DEI LAVORI ───────────────────────── */

.griglia-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px }
.griglia-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px }

.scheda{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .3s ease, transform .3s ease;
}
.scheda:hover{ border-color:var(--bordo-oro); transform:translateY(-4px) }

.scheda .foto{
  position:relative;
  aspect-ratio:1000/500;
  overflow:hidden;
  background:#111;
}
.scheda .foto img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform .5s ease;
}
.scheda:hover .foto img{ transform:scale(1.035) }

.scheda .corpo{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1 }
.scheda .corpo h3{ font-size:20px; margin-bottom:5px }
.scheda .corpo p{ margin:0; font-size:13.5px; color:var(--grigio) }
.scheda .corpo .collegamento{ margin-top:auto; padding-top:15px }

/* Una sola scheda a tutta riga.
   Quando una demo resta sola, la griglia a due colonne le darebbe
   meta' pagina e un buco accanto: meglio una scheda larga con la
   foto a sinistra e il testo a destra. */
.griglia-1{ display:grid; grid-template-columns:minmax(0,1fr) }
.scheda--evidenza{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) }
.scheda--evidenza .foto{ aspect-ratio:1000/560; height:100% }
.scheda--evidenza .corpo{ padding:26px 28px; justify-content:center }
.scheda--evidenza .corpo h3{ font-size:26px }
.scheda--evidenza .corpo p{ font-size:14.5px; margin-top:4px }
.scheda--evidenza .corpo .collegamento{ margin-top:18px; padding-top:0 }
@media (max-width:760px){
  .scheda--evidenza{ grid-template-columns:minmax(0,1fr) }
  .scheda--evidenza .foto{ aspect-ratio:1000/525 }
  .scheda--evidenza .corpo{ padding:18px 20px 20px }
  .scheda--evidenza .corpo h3{ font-size:20px }
}

/* La scheda grande delle due demo principali */
.scheda--grande .foto{ aspect-ratio:1000/525 }
.scheda--grande .corpo h3{ font-size:24px }

/* Le tre demo piccole in fondo */
.griglia-demo-piccole{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)) auto;
  gap:20px;
  align-items:stretch;
  margin-top:20px;
}
.griglia-demo-piccole .scheda .foto{ aspect-ratio:1000/430 }
.griglia-demo-piccole .scheda .corpo{ padding:14px 16px 16px }
.griglia-demo-piccole .scheda .corpo h3{ font-size:16.5px }
.griglia-demo-piccole .scheda .corpo p{ font-size:12.5px }
.griglia-demo-piccole .vaidemo{
  display:flex; align-items:center; justify-content:center;
  padding-left:6px;
}

@media (max-width:980px){
  .griglia-3{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .griglia-demo-piccole{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .griglia-demo-piccole .vaidemo{ grid-column:1 / -1; padding:0 }
  .griglia-demo-piccole .vaidemo .bottone{ width:100% }
}
@media (max-width:660px){
  .griglia-3, .griglia-2, .griglia-demo-piccole{ grid-template-columns:minmax(0,1fr) }
}

/* ────────────────────── PRIMA LO VEDI, POI DECIDI ────────────────────── */

.passi{ display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap }
.passo{ display:flex; gap:14px; flex:1 1 210px; min-width:210px }
.passo .numero{
  font-family:var(--serif);
  font-size:33px;
  font-weight:600;
  color:var(--oro);
  line-height:1;
  flex-shrink:0;
}
.passo .icona{ flex-shrink:0; margin-top:2px }
.passo .icona svg{ width:25px; height:25px; stroke:var(--oro-chiaro); fill:none; stroke-width:1.4 }
.passo h3{ font-size:17px; margin-bottom:5px }
.passo p{ margin:0; font-size:12.5px; color:var(--grigio) }
.passi .separatore{
  align-self:center;
  color:var(--oro-scuro);
  font-size:19px;
  flex-shrink:0;
}
.passi .avvertenza{
  flex:0 1 250px;
  font-size:11.5px;
  color:var(--grigio-2);
  align-self:center;
}

@media (max-width:980px){
  .passi .separatore{ display:none }
  .passo{ flex:1 1 100% }
  .passi .avvertenza{ flex:1 1 100% }
}

/* ─────────────────────────── I PREZZI ─────────────────────────── */

.prezzi{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px }

.prezzo{
  position:relative;
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:26px 20px 22px;
  display:flex;
  flex-direction:column;
  text-align:center;
  transition:border-color .3s ease, transform .3s ease;
}
.prezzo:hover{ border-color:var(--bordo-oro); transform:translateY(-4px) }

.prezzo--scelto{
  border-color:var(--oro);
  background:var(--pannello-2);
  box-shadow:0 0 0 1px rgba(212,175,55,.25), 0 24px 60px -30px rgba(212,175,55,.45);
}
.prezzo .etichetta{
  position:absolute;
  top:-11px; right:16px;
  background:linear-gradient(135deg, var(--oro-chiaro), var(--oro));
  color:#1a1408;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.1em;
  padding:4px 11px;
  border-radius:99px;
}

.prezzo h3{ font-size:20px; font-weight:500 }
.prezzo .cifra{
  font-family:var(--serif);
  font-size:38px;
  font-weight:600;
  color:var(--bianco);
  margin:9px 0 2px;
  line-height:1;
}
.prezzo--scelto .cifra, .prezzo--alto .cifra{ color:var(--oro-chiaro) }
.prezzo .quando{ font-size:11.5px; color:var(--grigio-2) }

.prezzo ul{
  list-style:none;
  margin:18px 0 0;
  padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.07);
  text-align:left;
  flex:1;
}
.prezzo li{
  display:flex; gap:9px; align-items:flex-start;
  font-size:13px; color:#C0C0C8;
  padding:4px 0;
}
.prezzo li::before{
  content:'\2713';
  color:var(--oro);
  font-size:12px;
  flex-shrink:0;
  line-height:1.5;
}
.prezzo .bottone{ margin-top:18px; width:100% }

@media (max-width:1000px){ .prezzi{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:560px){ .prezzi{ grid-template-columns:minmax(0,1fr) } }

/* ──────────────── QUANDO UN SITO NON BASTA PIU' ──────────────── */

.software{
  position:relative;
  background:var(--nero-2);
  border-top:1px solid rgba(212,175,55,.16);
  border-bottom:1px solid rgba(212,175,55,.16);
  padding:64px 0;
  overflow:hidden;
}
.software .dentro{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px;
  align-items:center;
}
.software h2{ font-size:clamp(25px, 3.4vw, 36px) }
.software .occhiello{ margin:10px 0 0; font-size:15px; color:var(--grigio) }

/* Quattro colonne uguali, tutte allineate in alto: con il flex
   "Gestionali e backend" andava a capo e sballava la fila. */
.tipi{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px;
  margin-top:28px;
  align-items:start;
}
.tipo{ display:flex; flex-direction:column; gap:9px }
.tipo svg{ width:32px; height:32px; stroke:var(--oro-chiaro); fill:none; stroke-width:1.3 }
.tipo span{ font-size:12.5px; color:#C0C0C8; line-height:1.35 }

.software .listino{
  display:flex; gap:0; margin-top:30px;
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:18px;
}
.software .listino > div{
  flex:1;
  padding-right:18px;
}
.software .listino > div + div{
  border-left:1px solid rgba(255,255,255,.07);
  padding-left:18px;
}
.software .listino .nome{ font-size:12.5px; color:var(--grigio-2) }
.software .listino .cifra{ font-size:19px; color:var(--bianco); font-weight:700; margin-top:3px }
.software .listino .cifra small{ font-size:12px; font-weight:500; color:var(--grigio-2); margin-right:3px }
.software .indicativi{ margin:14px 0 0; font-size:11.5px; color:var(--grigio-2) }

.software .elenco{ list-style:none; margin:0 0 22px; padding:0 }
.software .elenco li{
  display:flex; gap:11px; align-items:baseline;
  font-size:14px; color:#C4C4CC; padding:5px 0;
}
.software .elenco li::before{ content:'\25C6'; color:var(--oro); font-size:8px; flex-shrink:0 }
.software .elenco li.evidenza{ color:var(--oro-chiaro); font-weight:600 }

@media (max-width:980px){
  .software .dentro{ grid-template-columns:minmax(0,1fr); gap:30px }
  .software .listino{ flex-wrap:wrap; gap:14px 0 }
  .software .listino > div{ flex:1 1 33% }
}
@media (max-width:560px){
  .tipi{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px }
  .software .listino > div{ flex:1 1 100%; padding:0 }
  .software .listino > div + div{
    border-left:0; border-top:1px solid rgba(255,255,255,.07);
    padding:12px 0 0; margin-top:12px;
  }
}

/* Il finto pannello dell'area clienti.
   E' fatto in HTML e non e' una fotografia: cosi' resta nitido su
   qualunque schermo, pesa quasi niente e si traduce in inglese. */
.finto{
  background:linear-gradient(160deg, #101017, #0a0a0f);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  font-size:11px;
  user-select:none;
}
.finto .testa{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.finto .testa .logo{ display:flex; align-items:center; gap:7px; font-size:9px; letter-spacing:.14em; color:#CFCFD6 }
.finto .testa .logo svg{ width:17px; height:17px }
.finto .testa .cerca{
  flex:1; height:21px; border-radius:6px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.05);
}
.finto .testa .tondo{
  width:20px; height:20px; border-radius:99px;
  background:linear-gradient(135deg, var(--oro-chiaro), var(--oro-scuro));
  flex-shrink:0;
}
.finto .corpo{ display:grid; grid-template-columns:132px minmax(0,1fr) }
.finto .fianco{ border-right:1px solid rgba(255,255,255,.07); padding:12px 10px }
.finto .fianco a{
  display:flex; align-items:center; gap:8px;
  padding:7px 9px; border-radius:7px;
  color:var(--grigio-2); font-size:10.5px;
}
.finto .fianco a.acceso{ background:rgba(212,175,55,.12); color:var(--oro-chiaro) }
.finto .fianco .quadretto{
  width:13px; height:13px; border-radius:4px;
  border:1px solid currentColor; opacity:.65; flex-shrink:0;
}
.finto .principale{ padding:15px 16px }
.finto .principale .titolo{ font-size:13px; color:var(--bianco); font-weight:700 }
.finto .principale .sottile{ font-size:10px; color:var(--grigio-2); margin-top:2px }

.finto .numeri{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:9px; margin-top:13px }
.finto .numeri div{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  padding:10px 11px;
}
.finto .numeri b{ display:block; font-size:19px; color:var(--bianco); line-height:1 }
.finto .numeri span{ font-size:9.5px; color:var(--grigio-2) }

.finto .grafico{ margin-top:13px; height:74px }
.finto .grafico svg{ width:100%; height:100% }

.finto .barrette{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; margin-top:12px }
.finto .barrette div{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px; padding:9px 11px;
}
.finto .barrette .pallino{
  width:17px; height:17px; border-radius:99px;
  border:1px solid var(--bordo-oro); flex-shrink:0;
}
.finto .barrette .righe{ flex:1 }
.finto .barrette .righe i{
  display:block; height:4px; border-radius:99px;
  background:rgba(255,255,255,.14); margin-bottom:4px;
}
.finto .barrette .righe i:last-child{ width:58%; margin:0; background:rgba(212,175,55,.35) }

/* La variante del secondo pannello: avanzamento del progetto */
.finto .passaggi{ display:flex; align-items:center; gap:0; margin:14px 0 4px }
.finto .passaggi .tappa{ display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0 }
.finto .passaggi .bollino{
  width:13px; height:13px; border-radius:99px;
  border:2px solid rgba(255,255,255,.2);
}
.finto .passaggi .tappa.fatta .bollino{ border-color:var(--oro); background:var(--oro) }
.finto .passaggi .tappa.adesso .bollino{ border-color:var(--oro); background:var(--bianco) }
.finto .passaggi .tappa span{ font-size:9px; color:var(--grigio-2) }
.finto .passaggi .linea{ flex:1; height:2px; background:rgba(255,255,255,.14); margin:0 4px 16px }
.finto .passaggi .linea.piena{ background:var(--oro) }

.finto .anteprima-foto{
  border-radius:9px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  aspect-ratio:16/10;
}
.finto .anteprima-foto img{ width:100%; height:100%; object-fit:cover }

.finto .riquadri{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:11px }
.finto .riquadri div{
  aspect-ratio:1;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

@media (max-width:560px){
  .finto .corpo{ grid-template-columns:minmax(0,1fr) }
  .finto .fianco{ display:none }
  .finto .numeri{ grid-template-columns:repeat(3, minmax(0,1fr)) }
}

/* ────────────────────── GLI STRUMENTI GRATUITI ────────────────────── */

.strumento{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:22px;
  display:flex;
  flex-direction:column;
  transition:border-color .3s ease;
}
.strumento:hover{ border-color:var(--bordo-oro) }
.strumento .intestazione{ display:flex; gap:15px; align-items:flex-start }
.strumento .intestazione svg{ width:33px; height:33px; stroke:var(--oro-chiaro); fill:none; stroke-width:1.3; flex-shrink:0 }
.strumento h3{ font-size:19px; margin-bottom:4px }
.strumento p{ margin:0; font-size:13px; color:var(--grigio) }

.strumento form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;   /* il pulsante si allinea in basso, con i campi */
  margin-top:auto;        /* spinge il modulo in fondo: le due schede
                             finiscono alla stessa altezza anche se una
                             ha un campo solo e l'altra tre */
  padding-top:18px;
}
.strumento input[type=url],
.strumento input[type=text],
.strumento select{
  flex:1;
  min-width:0;
  padding:11px 14px;
  border-radius:8px;
  border:1px solid var(--bordo);
  background:rgba(255,255,255,.03);
  color:var(--bianco);
  font-family:var(--sans);
  font-size:13.5px;
  outline:none;
  transition:border-color .2s ease;
}
.strumento input::placeholder{ color:#5a5a64 }
.strumento input:focus, .strumento select:focus{ border-color:var(--oro) }
.strumento select{
  min-width:0;
  text-overflow:ellipsis;
  appearance:none; -webkit-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='%23A9A9B2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:14px;
  padding-right:32px;
  flex:1 1 30%;
}
.strumento select option{ background:#101018; color:var(--bianco) }
.strumento form .bottone{ flex-shrink:0 }

.nota-strumenti{ text-align:center; font-size:11.5px; color:var(--grigio-2); margin:16px 0 0 }

@media (max-width:660px){
  .strumento form{ flex-direction:column }
  .strumento form .bottone, .strumento select{ width:100% }
}

/* ─────────────────────── I PIANI CARE ─────────────────────── */

.care{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:20px 22px 22px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  transition:border-color .3s ease;
}
.care:hover{ border-color:var(--bordo-oro) }
.care > svg{ width:34px; height:34px; stroke:var(--oro-chiaro); fill:none; stroke-width:1.2; flex-shrink:0; margin-top:3px }
.care h3{ font-size:19px }
.care .cifra{
  font-family:var(--serif);
  font-size:27px; font-weight:600;
  color:var(--oro-chiaro);
  margin:5px 0 9px;
  line-height:1;
}
.care .cifra small{ font-size:13px; font-family:var(--sans); color:var(--grigio); font-weight:500 }
.care ul{ list-style:none; margin:0; padding:0 }
.care li{ display:flex; gap:8px; font-size:12.5px; color:#B8B8C0; padding:2.5px 0 }
.care li::before{ content:'\2713'; color:var(--oro); font-size:11px; flex-shrink:0 }

/* Le tre caselle del sito gia' esistente */
.esistente{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)) auto; gap:18px; align-items:stretch }
.esistente .casella{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start;
  transition:border-color .3s ease;
}
.esistente .casella:hover{ border-color:var(--bordo-oro) }
.esistente .casella svg{ width:30px; height:30px; stroke:var(--oro-chiaro); fill:none; stroke-width:1.2; flex-shrink:0; margin-top:2px }
.esistente h3{ font-size:17px }
.esistente .casella .cifra{
  font-family:var(--serif);
  font-size:26px; font-weight:600; color:var(--oro-chiaro);
  margin:4px 0 6px; line-height:1;
}
.esistente .casella .cifra small{
  font-size:12.5px; font-family:var(--sans);
  color:var(--grigio); font-weight:500;
}
.esistente .casella p{ margin:0; font-size:12px; color:var(--grigio-2) }
.esistente .vai{ display:flex; align-items:center; justify-content:center }

@media (max-width:1000px){
  .esistente{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .esistente .vai{ grid-column:1 / -1 }
  .esistente .vai .bottone{ width:100% }
}
@media (max-width:620px){ .esistente{ grid-template-columns:minmax(0,1fr) } }

/* ─────────────── IL TUO PROGETTO SOTTO CONTROLLO ─────────────── */

.controllo{
  background:var(--nero-2);
  border-top:1px solid rgba(212,175,55,.16);
  border-bottom:1px solid rgba(212,175,55,.16);
  padding:60px 0;
  overflow:hidden;
}
.controllo .dentro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:44px;
  align-items:center;
}
.controllo h2{ font-size:clamp(24px, 3.2vw, 34px) }
.controllo p{ margin:12px 0 26px; font-size:14.5px; color:var(--grigio) }

@media (max-width:980px){ .controllo .dentro{ grid-template-columns:minmax(0,1fr); gap:30px } }

/* ─────────────────────── IL RICHIAMO FINALE ─────────────────────── */

.finale{
  position:relative;
  padding:86px 0 78px;
  overflow:hidden;
  text-align:center;
}
.finale .sfondo{
  position:absolute; inset:0; z-index:0;
  background-image:url('sfondi/finale.jpg');
  background-size:cover;
  background-position:center;
}
.finale .velo{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, var(--nero) 0%, rgba(5,5,8,.55) 30%, rgba(5,5,8,.6) 70%, var(--nero) 100%);
}
.finale .contenitore{ position:relative; z-index:2 }
.finale h2{ font-size:clamp(25px, 3.6vw, 38px) }
.finale .sotto{ margin:13px 0 0; font-size:15.5px; color:#CBCBD2 }
.finale .pulsanti{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:26px }
.finale .puntino{ margin:17px 0 0; font-size:12.5px; color:#9A9AA4 }

/* La frase in corsivo a destra */
.finale .motto{
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  max-width:215px;
  text-align:left;
  font-family:var(--serif);
  font-size:15.5px;
  font-style:italic;
  color:#D8D8DE;
  line-height:1.45;
  padding-left:2px;
}
.finale .motto::after{
  content:''; display:block;
  width:52px; height:1px; margin-top:13px;
  background:var(--oro);
}

@media (max-width:1120px){ .finale .motto{ display:none } }
@media (max-width:560px){
  .finale{ padding:64px 0 58px }
  .finale .sfondo{ background-image:url('sfondi/finale-mobile.jpg') }
  .finale .pulsanti .bottone{ flex:1 1 100% }
}

/* ─────────────────────────── IL PIEDE ─────────────────────────── */

.piede{ background:var(--nero); padding:40px 0 26px }
.piede .righe{
  display:flex;
  align-items:flex-start;
  gap:38px;
  flex-wrap:wrap;
}
.piede .collegamenti{
  display:flex; flex-wrap:wrap; gap:9px 26px;
  max-width:560px;
}
.piede .collegamenti a{ font-size:13px; color:var(--grigio) }
.piede .collegamenti a:hover{ color:var(--bianco) }

.piede .social{ display:flex; gap:9px; margin-left:auto }
.piede .social a{
  width:31px; height:31px; border-radius:7px;
  border:1px solid var(--bordo);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s ease;
}
.piede .social a:hover{ border-color:var(--oro) }
.piede .social svg{ width:15px; height:15px; fill:var(--grigio) }
.piede .social a:hover svg{ fill:var(--oro-chiaro) }

.piede .slogan{
  font-size:10px;
  letter-spacing:.24em;
  color:var(--grigio-2);
  line-height:1.9;
  padding-left:26px;
  border-left:1px solid var(--bordo);
}

.piede .chiusura{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:30px; padding-top:20px;
  border-top:1px solid var(--bordo);
  font-size:11.5px; color:var(--grigio-2);
}

@media (max-width:860px){
  .piede .righe{ gap:24px }
  .piede .social{ margin-left:0 }
  .piede .slogan{ padding-left:0; border-left:0; border-top:1px solid var(--bordo); padding-top:16px; width:100% }
}

/* Il bottone verde di WhatsApp, fisso in basso a destra */
.whatsapp-fisso{
  position:fixed;
  right:18px; bottom:18px;
  z-index:55;
  width:52px; height:52px;
  border-radius:99px;
  background:#1EA952;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(30,169,82,.6);
  transition:transform .25s ease;
}
.whatsapp-fisso:hover{ transform:scale(1.07) }
.whatsapp-fisso svg{ width:27px; height:27px; fill:#fff }

@media (max-width:560px){
  .whatsapp-fisso{ width:48px; height:48px; right:14px; bottom:14px }
}

/* ═══════════════════════════════════════════════════════════════════
   PEZZI CHE MANCAVANO
   ═══════════════════════════════════════════════════════════════════ */

/* Il collegamento "Tutti i progetti" dentro la testata di sezione */
.testata .nota-vai{ white-space:nowrap; font-size:13px }

/* La targhetta dorata "GRATIS · SENZA REGISTRAZIONE" */
.testata .distintivo{
  border:1px solid var(--bordo-oro);
  background:rgba(212,175,55,.1);
  color:var(--oro-chiaro);
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  padding:5px 12px;
  border-radius:99px;
}

/* La colonna di destra della sezione software */
.colonna-destra{ display:flex; flex-direction:column; align-items:flex-start; gap:4px }
.colonna-destra .finto{ width:100%; margin-top:24px }

/* Il campo con l'etichetta sopra, nel calcolatore.

   min-width:0 non e' un vezzo: senza quello un <select> si rifiuta di
   diventare piu' stretto della sua opzione piu' lunga ("Edilizia e
   ristrutturazioni"), e su un telefono da 375px trascinava tutta la
   pagina a 865px, facendola sbordare a destra. */
.campo{ display:flex; flex-direction:column; gap:5px; flex:1 1 30%; min-width:0 }
.etichetta-campo{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grigio-2);
}
.campo select{ width:100%; min-width:0 }

/* I due pulsanti lingua dentro al menu del telefono */
.lingue-telefono{ display:flex; gap:8px; margin-top:16px }
.lingue-telefono .lingua{
  flex:1;
  padding:10px;
  border:1px solid var(--bordo);
  border-radius:8px;
}

/* Il panino che diventa una X quando il menu e' aperto */
.panino span::before, .panino span::after{ transition:transform .25s ease, top .25s ease }
.panino.chiudi span{ background:transparent }
.panino.chiudi span::before{ top:0; transform:rotate(45deg) }
.panino.chiudi span::after{ top:0; transform:rotate(-45deg) }

/* Roba che sul telefono non serve */
.solo-grande{ display:block }


/* ═══════════════════════════════════════════════════════════════════
   LA BARRA IN BASSO — SOLO SUL TELEFONO

   E' il pezzo che fa vendere. I due modi per contattarti restano
   sempre sotto il pollice: la persona non deve mai risalire in cima.
   Sparisce da sola sul richiamo finale, dove gli stessi due pulsanti
   ci sono gia' grandi, per non ripetersi.
   ═══════════════════════════════════════════════════════════════════ */

.barra-bassa{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:58;
  gap:9px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(7,7,11,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--bordo);
  transform:translateY(105%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.barra-bassa.visibile{ transform:translateY(0) }
.barra-bassa .bottone{
  flex:1;
  padding:13px 10px;     /* almeno 44px di altezza: si centra col pollice */
  font-size:14px;
  gap:8px;
}

@media (max-width:860px){
  .barra-bassa{ display:flex }
  /* spazio in fondo, se no la barra copre il piede */
  .piede{ padding-bottom:92px }
  /* il tondo verde di WhatsApp sparisce: sarebbe due volte lo stesso pulsante */
  .whatsapp-fisso{ display:none }
}


/* ═══════════════════════════════════════════════════════════════════
   IL TELEFONO

   Non e' il disegno grande schiacciato: e' un'altra impaginazione.
   Le schede alte diventano righe compatte, cosi' i prezzi si vedono
   tutti insieme invece di dover scorrere per mezzo minuto.
   ═══════════════════════════════════════════════════════════════════ */

/* Il pulsante unico sotto ai prezzi: si vede solo sul telefono, dove
   quattro pulsanti uguali uno sotto l'altro sarebbero una muraglia. */
.prezzi-cta-telefono{ display:none }
.prezzi-cta-telefono .bottone{ width:100% }

@media (max-width:660px){

  .sezione{ padding:48px 0 }
  .sezione--stretta{ padding:38px 0 }
  .testata{ margin-bottom:22px }
  .testata h2{ font-size:26px; width:100% }

  /* ── I PREZZI DIVENTANO RIGHE ── */
  .prezzi{ gap:10px }
  .prezzo{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:2px 14px;
    text-align:left;
    padding:15px 17px;
  }
  .prezzo h3{ font-size:17px; grid-column:1; grid-row:1 }
  .prezzo .cifra{
    font-size:24px; margin:0;
    grid-column:2; grid-row:1 / span 2;
    align-self:center;
  }
  .prezzo .quando{ display:none }
  .prezzo ul{
    grid-column:1; grid-row:2;
    margin:0; padding:0; border:0;
    display:flex; flex-wrap:wrap; gap:0;
  }
  .prezzo li{ padding:0; font-size:11.5px; color:var(--grigio-2) }
  .prezzo li::before{ display:none }
  .prezzo li + li::before{
    content:'\00B7';
    display:inline;
    color:var(--grigio-2);
    margin:0 5px;
  }
  .prezzo .bottone{ display:none }       /* il pulsante e' uno solo, qui sotto */
  /* La targhetta resta appoggiata sul bordo in alto, come sul
     computer: dentro la riga occuperebbe una fascia tutta sua. */
  .prezzo .etichetta{ top:-9px; left:17px; right:auto }

  .prezzi-cta-telefono{ display:block; margin-top:14px }

  /* ── I PIANI CARE DIVENTANO RIGHE ── */
  .griglia-3{ gap:10px }
  .care{ align-items:center; padding:14px 17px; gap:13px }
  .care > svg{ width:26px; height:26px; margin:0 }
  .care > div{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:1px 12px; flex:1; width:100%;
  }
  .care h3{ font-size:16px; grid-column:1; grid-row:1 }
  .care .cifra{ font-size:20px; margin:0; grid-column:2; grid-row:1 / span 2; align-self:center }
  .care ul{ grid-column:1; grid-row:2; display:flex; flex-wrap:wrap }
  .care li{ font-size:11.5px; padding:0; color:var(--grigio-2) }
  .care li::before{ display:none }
  .care li + li::before{ content:'\00B7'; display:inline; margin:0 5px }

  /* ── IL SITO GIA' ESISTENTE DIVENTA RIGHE ── */
  .esistente{ gap:10px }
  .esistente .casella{ align-items:center; padding:14px 17px; gap:13px }
  .esistente .casella svg{ width:26px; height:26px; margin:0 }
  .esistente .casella > div{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:1px 12px; flex:1; width:100%;
  }
  .esistente h3{ font-size:16px; grid-column:1; grid-row:1 }
  .esistente .casella .cifra{ font-size:21px; margin:0; grid-column:2; grid-row:1 / span 2; align-self:center }
  .esistente .casella p{ grid-column:1; grid-row:2; font-size:11.5px }

  /* ── LE DEMO PICCOLE: DUE PER RIGA ── */
  .griglia-2{ gap:12px }
  .griglia-demo-piccole{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px }
  .griglia-demo-piccole .scheda:nth-child(3){ grid-column:1 / -1 }
  .griglia-demo-piccole .scheda .corpo h3{ font-size:14.5px }
  .griglia-demo-piccole .scheda .corpo p{ font-size:11.5px }

  /* ── IL SOFTWARE ── */
  .software{ padding:44px 0 }
  .software .listino{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 }
  .software .listino > div{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 0; flex:none;
  }
  .software .listino > div + div{
    border-left:0; border-top:1px solid rgba(255,255,255,.07);
    padding-left:0; margin:0;
  }
  .software .listino .nome{ font-size:14px; color:#C4C4CC }
  .software .listino .cifra{ margin:0; font-size:17px }
  .colonna-destra .bottone{ width:100% }
  .colonna-destra .elenco{ margin-bottom:16px }
  /* il finto pannello qui sparisce: serve lo spazio per il listino, e
     il pannello si vede comunque piu' sotto, nell'area clienti */
  .solo-grande{ display:none }

  /* ── GLI STRUMENTI: restano grandi, sono la cosa che non ha nessuno ── */
  .strumento{ padding:18px 17px }
  .strumento h3{ font-size:17px }
  .strumento .intestazione svg{ width:28px; height:28px }
  /* Sul telefono il modulo diventa una griglia a UNA colonna.
     Non e' un vezzo: minmax(0,1fr) e' l'unico modo sicuro di dire
     "non superare mai questa larghezza". Con flex, Chrome misurava
     il testo delle <option> piu' lunghe ("Edilizia e ristrutturazioni")
     e allargava la pagina a 865px su uno schermo da 375, facendola
     sbordare tutta a destra. */
  .strumento form{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:stretch;
  }
  .campo{ width:100%; min-width:0 }
  .strumento form .bottone{ width:100%; padding:14px }
  /* i campi devono essere almeno 16px: se sono piu' piccoli, iPhone
     ingrandisce da solo tutta la pagina appena ci si clicca dentro */
  .strumento input, .strumento select{ font-size:16px; padding:13px 14px }
  .strumento select{ background-position:right 12px center }

  /* ── L'AREA CLIENTI ── */
  .controllo{ padding:40px 0 }
  .controllo p{ margin:10px 0 20px; font-size:14px }
  .controllo .bottone{ width:100% }
  .finto{ font-size:10.5px }

  /* ── IL PEZZO IN CIMA ── */
  .cima h1{ font-size:31px }
  .cima .sottotitolo{ font-size:15px; margin-top:16px }
  .cima .promessa{ font-size:18px }
  .cima .pulsanti{ margin-top:22px; gap:10px }
  .cima .pulsanti .bottone{ padding:15px 20px }
  .capacita{ margin-top:0; padding-top:22px }
}

/* Schermi molto stretti, tipo iPhone SE */
@media (max-width:380px){
  .contenitore{ padding:0 15px }
  .cima h1{ font-size:27px }
  .testata h2{ font-size:23px }
  .prezzo .cifra{ font-size:21px }
  .barra-bassa .bottone{ font-size:13px; padding:12px 6px }
}

/* ═══════════════════════════════════════════════════════════════════
   PEZZI CHE SERVONO SOLO ALLA PAGINA software-su-misura.html
   ═══════════════════════════════════════════════════════════════════ */

/* Il pezzo in cima delle pagine interne: piu' basso della home e
   senza fotografia a tutto schermo, perche' qui si viene per leggere. */
.cima--interna{
  min-height:0; max-height:none;
  padding:132px 0 52px;
  border-bottom:1px solid var(--bordo);
  background:
    radial-gradient(64% 120% at 16% 0%, rgba(212,175,55,.09), transparent 62%),
    var(--nero);
}
.cima--interna .occhietto{
  display:inline-block;
  font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro);
  margin-bottom:16px;
}
.cima--interna h1{ font-size:clamp(31px, 4.6vw, 54px); max-width:15em }
.cima--interna .sottotitolo{ margin-top:20px; max-width:40em }
.cima--interna .pulsanti{ margin-top:26px }

/* Le tre schede "Tre cose diverse, spesso confuse" */
.tipologia{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:24px 22px;
  display:flex; flex-direction:column;
  transition:border-color .3s ease, transform .3s ease;
}
.tipologia:hover{ border-color:var(--bordo-oro); transform:translateY(-4px) }
.tipologia--forte{ border-color:var(--bordo-oro); background:var(--pannello-2) }
.tipologia > svg{ width:34px; height:34px; stroke:var(--oro-chiaro); fill:none; stroke-width:1.2 }
.tipologia h3{ font-size:21px; margin:14px 0 9px }
.tipologia > p{ margin:0; font-size:13.5px; color:var(--grigio) }
.tipologia ul{
  list-style:none; margin:18px 0 0; padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.07); flex:1;
}
.tipologia li{ display:flex; gap:10px; align-items:baseline; font-size:13px; color:#C0C0C8; padding:4px 0 }
.tipologia li::before{ content:'\25C6'; color:var(--oro); font-size:7px; flex-shrink:0 }
.tipologia .bollo{
  align-self:flex-start;
  font-size:9.5px; font-weight:800; letter-spacing:.1em;
  color:var(--oro-chiaro);
  border:1px solid var(--bordo-oro);
  background:rgba(212,175,55,.1);
  padding:4px 10px; border-radius:99px;
  margin-bottom:14px;
}

/* La tabella del confronto web app / app da store */
.tabella{
  width:100%;
  border-collapse:collapse;
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  overflow:hidden;
  font-size:13.5px;
}
.tabella th, .tabella td{
  padding:13px 16px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}
.tabella thead th{
  font-family:var(--sans);
  font-size:11px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--grigio-2);
  background:rgba(255,255,255,.025);
}
.tabella thead th.nostra{ color:var(--oro-chiaro) }
.tabella tbody th{
  font-family:var(--sans);
  font-weight:600; font-size:13px; color:#C4C4CC;
  width:32%;
}
.tabella td.nostra{ color:var(--bianco); font-weight:600 }
.tabella td.loro{ color:var(--grigio-2) }
.tabella tr:last-child th, .tabella tr:last-child td{ border-bottom:0 }

/* Su telefono la tabella diventa un elenco: tre colonne strette
   sarebbero illeggibili. Ogni riga si legge da sola. */
@media (max-width:660px){
  .tabella, .tabella tbody, .tabella tr, .tabella th, .tabella td{ display:block; width:auto }
  .tabella thead{ display:none }
  .tabella tr{
    border-bottom:1px solid rgba(255,255,255,.07);
    padding:12px 15px;
  }
  .tabella tr:last-child{ border-bottom:0 }
  .tabella th, .tabella td{ border:0; padding:0 }
  .tabella tbody th{ width:auto; font-size:13.5px; color:var(--bianco); margin-bottom:6px }
  .tabella td{ font-size:12.5px; padding:2px 0 }
  .tabella td.nostra::before{ content:'Web App: '; color:var(--oro); font-weight:700 }
  .tabella td.loro::before{ content:'App da store: '; color:var(--grigio-2); font-weight:700 }
}

/* Le tre prove che si possono aprire */
.prova{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:22px;
  display:flex; flex-direction:column;
  transition:border-color .3s ease, transform .3s ease;
}
.prova:hover{ border-color:var(--bordo-oro); transform:translateY(-4px) }
.prova .bollo{
  align-self:flex-start;
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--oro-chiaro);
  border:1px solid var(--bordo-oro);
  background:rgba(212,175,55,.09);
  padding:4px 10px; border-radius:99px;
}
.prova h3{ font-size:19px; margin:13px 0 8px }
.prova p{ margin:0 0 16px; font-size:13px; color:var(--grigio); flex:1 }

/* Le tre fasce di prezzo */
.fascia{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:22px;
  transition:border-color .3s ease;
}
.fascia:hover{ border-color:var(--bordo-oro) }
.fascia h3{ font-size:18px }
.fascia .cifra{
  font-family:var(--serif);
  font-size:32px; font-weight:600; color:var(--oro-chiaro);
  margin:8px 0 10px; line-height:1;
}
.fascia .cifra small{
  font-family:var(--sans); font-size:13px; font-weight:500;
  color:var(--grigio); margin-right:5px;
}
.fascia p{ margin:0; font-size:13px; color:var(--grigio) }

/* I due riquadri manutenzione / come si paga */
.doppio{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:24px;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px;
}
.doppio h3{ font-size:17px; margin-bottom:8px }
.doppio p{ margin:0; font-size:13.5px; color:var(--grigio) }
@media (max-width:660px){ .doppio{ grid-template-columns:minmax(0,1fr); gap:20px; padding:20px } }

/* Il riquadro "restano sempre fuori dal prezzo" */
.avviso{
  border:1px solid var(--bordo);
  background:rgba(255,255,255,.025);
  border-radius:var(--raggio);
  padding:20px 22px;
  font-size:13.5px; color:var(--grigio);
  line-height:1.65;
}
.avviso b{ color:#D6D6DC }

/* Le domande frequenti */
.faq{
  border:1px solid var(--bordo);
  background:var(--pannello);
  border-radius:var(--raggio);
  overflow:hidden;
}
.faq + .faq{ margin-top:10px }
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:16px 50px 16px 20px;
  position:relative;
  font-family:var(--serif);
  font-size:17px;
  color:var(--bianco);
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--oro-chiaro) }
.faq summary::after{
  content:'+';
  position:absolute; right:20px; top:50%;
  transform:translateY(-50%);
  font-family:var(--sans);
  font-size:21px; font-weight:300;
  color:var(--oro);
  transition:transform .25s ease;
}
.faq[open] summary::after{ transform:translateY(-50%) rotate(45deg) }
.faq[open] summary{ color:var(--oro-chiaro) }
.faq .risposta{
  padding:0 20px 18px;
  font-size:13.5px;
  color:var(--grigio);
  line-height:1.7;
}

/* Il richiamo finale di questa pagina, senza fotografia */
.finale--semplice{ padding:70px 0 }
.finale--semplice .sfondo, .finale--semplice .velo{ display:none }
.finale--semplice .contenitore{ max-width:760px }
.finale--semplice .sotto{ font-size:14.5px }

/* L'avviso che compare se si prova uno strumento non ancora pronto */
.strumento .in-arrivo{
  grid-column:1 / -1;
  width:100%;
  margin:4px 0 0;
  font-size:12.5px;
  color:var(--oro-chiaro);
}


/* ═══ LA FASCIA CUSTOM, sotto ai quattro pacchetti ═══
   Non e' una quinta scheda: quello che vende qui non e' un prezzo
   ma il fatto che il prezzo non c'e' ancora. Una fascia larga lo
   dice meglio di una colonna stretta con scritto "su preventivo". */
.custom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:20px 28px;
  margin-top:16px;
  padding:22px 26px;
  border-radius:var(--raggio);
  border:1px solid var(--bordo-oro);
  background:
    radial-gradient(70% 160% at 8% 50%, rgba(212,175,55,.1), transparent 68%),
    var(--pannello-2);
}
.custom h3{ font-size:22px }
.custom h3 .prezzo-custom{
  font-family:var(--sans);
  font-size:12px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--oro-chiaro);
  border:1px solid var(--bordo-oro);
  background:rgba(212,175,55,.1);
  padding:4px 11px; border-radius:99px;
  margin-left:12px; vertical-align:4px;
  white-space:nowrap;
}
.custom p{ margin:8px 0 0; font-size:13.5px; color:var(--grigio); max-width:58em }
.custom .voci{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin:12px 0 0; padding:0; list-style:none;
}
.custom .voci li{ display:flex; gap:8px; font-size:12.5px; color:#C0C0C8 }
.custom .voci li::before{ content:'✓'; color:var(--oro); flex-shrink:0 }
.custom .bottone{ white-space:nowrap }

@media (max-width:760px){
  .custom{ grid-template-columns:minmax(0,1fr); padding:18px 17px; gap:14px }
  .custom h3{ font-size:19px }
  .custom h3 .prezzo-custom{ display:block; margin:8px 0 0; width:fit-content; vertical-align:0 }
  .custom .bottone{ width:100% }
}

/* La targhetta dorata col valore, sulle schede dei lavori e delle demo.
   E' scritta come quella di BR Consulting sul sito vecchio: dice quanto
   vale un lavoro del genere, non quanto ha pagato quel cliente. */
.scheda .valore{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  border:1px solid var(--bordo-oro);
  background:rgba(212,175,55,.1);
  color:var(--oro-chiaro);
  font-size:11px;
  font-weight:700;
  padding:4px 11px;
  border-radius:99px;
  margin-bottom:10px;
  white-space:nowrap;
}
.griglia-demo-piccole .scheda .valore{ font-size:10px; padding:3px 9px; margin-bottom:8px }