/* font serviti da noi — nessun CDN, nessuna richiesta a terzi */
/* Spectral: solo i due pesi usati. Instrument Sans: un solo file variabile 400-700. */
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('../font/Spectral-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('../font/Spectral-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url('../font/Spectral-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url('../font/Spectral-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../font/InstrumentSans-var-latin-ext.woff2') format('woff2-variations');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../font/InstrumentSans-var-latin.woff2') format('woff2-variations');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Ripieghi con metriche allineate: quando il carattere vero prende il posto di
   quello di sistema il testo NON cambia altezza, e la pagina non sobbalza. */
@font-face{font-family:'Spectral-ripiego';src:local('Georgia'),local('Times New Roman'),local('Times');
  size-adjust:103%;ascent-override:95%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'InstrumentSans-ripiego';src:local('Segoe UI'),local('Helvetica Neue'),local('Arial');
  size-adjust:101%;ascent-override:96%;descent-override:25%;line-gap-override:0%}

/* ══ FRONTE STRADA — Romana Negozi di Claudio Gennarelli ══════════════════
   Palette campionata dal logo originale del cliente.
   Nessuna richiesta a terzi: font e script serviti da questo dominio.      */

:root{
  --basalto:#1E1D1B;          /* i sampietrini */
  --basalto-2:#2A2825;
  --travertino:#E9E4DA;       /* la pietra di Roma */
  --travertino-2:#F3F0E9;
  --carta:#FFFFFF;
  --arancio:#F08228;          /* logo, Colosseo in luce */
  --bruciato:#C8461E;         /* logo, lettering */
  --ombra:#8A8578;
  --linea:#D6D0C4;
  --testo:#26241F;
  --testo-2:#57534A;

  --tit:'Spectral','Spectral-ripiego',Georgia,'Times New Roman',serif;
  --ui:'Instrument Sans','InstrumentSans-ripiego',system-ui,-apple-system,'Segoe UI',sans-serif;

  --max:1200px;
  --gutter:clamp(16px,4vw,40px);
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--travertino);color:var(--testo);
  font-family:var(--ui);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--tit);font-weight:600;line-height:1.1;letter-spacing:-.015em;margin:0}
p{margin:0 0 1em}
:focus-visible{outline:2.5px solid var(--bruciato);outline-offset:3px}

.contenitore{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.salta{position:absolute;left:-9999px}
.salta:focus{left:12px;top:12px;z-index:99;background:var(--arancio);color:#fff;padding:10px 16px;border-radius:var(--r)}

/* ── TESTATA ─────────────────────────────────────────────── */
.testata{
  position:sticky;top:0;z-index:40;background:rgba(233,228,218,.93);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--linea);
}
.testata .riga{display:flex;align-items:center;gap:20px;min-height:66px}
.marchio img{height:38px;width:auto}

.menu{margin-left:auto;display:flex;gap:26px;font-size:14.5px;font-weight:500}
.menu a{text-decoration:none;color:var(--testo-2);padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--testo);border-bottom-color:var(--arancio)}
.tel-testata{
  font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;
  background:var(--basalto);color:var(--travertino);padding:9px 16px;border-radius:var(--r)
}
.tel-testata:hover{background:var(--bruciato)}
@media(max-width:900px){ .menu{display:none} }

/* ── APERTURA: la strada ─────────────────────────────────── */
.apertura{background:var(--basalto);color:var(--travertino);position:relative;overflow:hidden}
.apertura .contenitore{position:relative;z-index:2;padding-block:clamp(48px,7vw,88px) 0}
.occhiello{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--arancio);margin:0 0 18px
}

/* L'INSEGNA — il marchio appeso nella strada scura.
   Il logo NON si ricolora (è il file originale del cliente): il lettering è
   bordeaux e su fondo basalto non si leggerebbe. Quindi si monta come una
   targa chiara, che è poi quello che un'insegna è davvero. */
.insegna-hero{
  display:inline-block;background:var(--travertino-2);
  padding:clamp(14px,2.2vw,20px) clamp(18px,3vw,30px);
  border-radius:2px;margin:0 0 clamp(24px,3.4vw,34px);
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  border-bottom:4px solid var(--arancio);
}
.insegna-hero img{width:clamp(220px,30vw,340px);height:auto}
.apertura h1{
  font-size:clamp(34px,6.2vw,72px);color:var(--travertino-2);max-width:8.6em;margin:0 0 22px
}
.apertura h1 .parola{color:var(--arancio)}
.apertura .sottotitolo{
  font-size:clamp(16px,1.9vw,19.5px);color:#C3BDB1;max-width:31em;margin:0 0 34px;line-height:1.55
}
.numeri{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,60px);margin:0 0 42px;padding:0;list-style:none}
.numeri b{
  display:block;font-family:var(--tit);font-size:clamp(28px,4.4vw,44px);
  font-weight:700;color:var(--arancio);line-height:1
}
.numeri span{font-size:13.5px;color:#A7A197;letter-spacing:.04em}

/* la fascia di prospetti disegnati sotto l'apertura */
.skyline{display:block;width:100%;height:auto;margin-top:8px;
  /* l'altezza è nota prima che il JS la riempia: senza, l'apertura si gonfia
     a cose fatte e spinge giù tutta la pagina */
  aspect-ratio:1600/110}
.skyline path,.skyline line,.skyline rect{fill:none;stroke:#4A463F;stroke-width:1.4;vector-effect:non-scaling-stroke}
.skyline .ins{fill:#3A352E;stroke:none}
.skyline .suolo{stroke:var(--arancio);stroke-width:3}

/* ── BARRA FILTRI ────────────────────────────────────────── */
.filtri{
  position:sticky;top:66px;z-index:30;background:var(--travertino-2);
  border-bottom:1px solid var(--linea);padding-block:14px
}
.filtri .riga{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filtri label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ombra);font-weight:600;margin-right:2px}
.filtri select,.filtri input{
  font:inherit;font-size:14.5px;padding:9px 12px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--carta);color:var(--testo);min-width:132px
}
.filtri select:hover,.filtri input:hover{border-color:var(--ombra)}
.esito{margin-left:auto;font-size:14px;color:var(--testo-2);font-weight:500}
.esito b{color:var(--bruciato);font-weight:700}

/* da telefono: due per riga, non appiccicata in alto — cinque menu impilati
   e sticky coprirebbero tutto lo schermo prima di far vedere un immobile */
@media(max-width:780px){
  .filtri{position:static;padding-block:12px}
  .filtri .riga{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
  .filtri label{display:none}                 /* i menu si spiegano da soli */
  .filtri select{min-width:0;width:100%;font-size:14px;padding:10px 8px}
  .filtri #f-op{grid-column:1/-1;font-weight:600}
  .azzera{justify-self:start;padding:4px 0}
  .esito{margin:0;justify-self:end;align-self:center;font-size:13px}
}
.azzera{
  font:inherit;font-size:13.5px;background:none;border:none;color:var(--bruciato);
  cursor:pointer;text-decoration:underline;padding:6px
}

/* ── I FRONTI ────────────────────────────────────────────── */
.strada{padding-block:clamp(30px,4vw,48px) clamp(50px,7vw,86px)}
.griglia{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:clamp(14px,2vw,22px);list-style:none;margin:0;padding:0;
  /* lo spazio è riservato prima che le schede arrivino: senza, la pagina
     sobbalza e il salto di impaginazione (CLS) deve restare a zero */
  min-height:min(190vh,1900px)
}
.griglia:has(.fronte){min-height:0}
/* anche il conteggio: comparendo sposterebbe la barra dei filtri */
.esito{min-height:1.3em;min-width:8ch;display:inline-block}
/* 🛒 il catalogo resta SEMPRE a griglia: 2 per riga da telefono, mai uno sotto l'altro */
@media(max-width:700px){
  .griglia{grid-template-columns:repeat(2,1fr);gap:10px}
  .fronte{padding:10px 10px 12px}
  .via{font-size:15px;margin-top:10px;line-height:1.2}
  .zona{font-size:10px;letter-spacing:.07em;margin-bottom:8px}
  .dati{gap:4px;margin-bottom:9px}
  .dati li{font-size:10.5px;padding:2px 6px}
  .prezzo{font-size:17px}
  .prezzo small{font-size:11px}
  .prezzo .secondo{font-size:12px}
  .etichetta{top:9px;right:9px;font-size:9px;padding:3px 6px;letter-spacing:.09em}
}

.fronte{
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);
  padding:16px 16px 18px;position:relative;display:flex;flex-direction:column;
  transition:border-color .18s ease,transform .18s ease;
}
.fronte:hover{border-color:var(--ombra);transform:translateY(-2px)}
.fronte.esce{opacity:0;transform:scale(.97)}
.fronte a.copri{position:absolute;inset:0;z-index:3;border-radius:var(--r)}
.fronte a.copri span{position:absolute;left:-9999px}

.etichetta{
  position:absolute;top:14px;right:14px;z-index:2;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;padding:4px 8px;border-radius:2px
}
.et-libero{background:var(--arancio);color:#fff}
.et-locato{background:var(--basalto);color:var(--travertino)}
.et-cerco{background:var(--bruciato);color:#fff}

.via{font-family:var(--tit);font-size:18px;font-weight:600;margin:14px 0 2px;line-height:1.22}
.zona{
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ombra);
  margin:0 0 11px;font-weight:600
}
.dati{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;padding:0;list-style:none}
.dati li{
  font-size:12px;border:1px solid var(--linea);padding:3px 8px;border-radius:2px;color:var(--testo-2)
}
.dati li b{font-weight:700;color:var(--testo)}
.prezzo{
  margin:auto 0 0;font-family:var(--tit);font-size:20px;font-weight:700;color:var(--bruciato);
  line-height:1.2;padding-top:6px
}
.prezzo small{font-size:12.5px;color:var(--ombra);font-weight:400;font-family:var(--ui)}
.prezzo .secondo{display:block;font-size:14px;color:var(--testo-2);font-weight:600;margin-top:3px}

/* ── IL DISEGNO (la firma) ───────────────────────────────── */
.dis{width:100%;height:auto;display:block}
.dis path,.dis line,.dis rect,.dis polyline{
  fill:none;stroke:var(--basalto);stroke-width:1.6;
  stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke
}
.dis .terra{stroke-width:2.8}
.dis .vetro{fill:#F4F1EA;stroke-width:1.15}
.dis .insegna{fill:var(--arancio);stroke:none}
.dis .sotto{stroke:var(--ombra);stroke-width:1.15;stroke-dasharray:4 3}
.dis .sar line{stroke:var(--ombra);stroke-width:1.1}
.dis text{font-family:var(--ui);font-size:7.5px;fill:var(--ombra);stroke:none;letter-spacing:.12em}
.dis .traccia{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.fronte.vista .dis .traccia{animation:traccia .95s cubic-bezier(.22,.61,.36,1) forwards}
.dis .insegna,.dis .vetro,.dis text{opacity:0}
.fronte.vista .dis .insegna,.fronte.vista .dis .vetro,.fronte.vista .dis text{animation:comparsa .45s ease .62s forwards}
@keyframes traccia{to{stroke-dashoffset:0}}
@keyframes comparsa{to{opacity:1}}

/* ── SEZIONI DI TESTO ────────────────────────────────────── */
.sezione{padding-block:clamp(52px,7vw,84px);border-top:1px solid var(--linea)}
.sezione.scura{background:var(--basalto);color:var(--travertino);border-top:none}
.sezione.scura h2{color:var(--travertino-2)}
.sezione.scura p{color:#C3BDB1}
.sezione h2{font-size:clamp(25px,3.6vw,40px);max-width:11em;margin:0 0 18px}
.sezione .guida{font-size:clamp(16px,1.7vw,18.5px);max-width:32em;color:var(--testo-2)}
.duecol{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,5vw,62px);align-items:start}
@media(max-width:840px){ .duecol{grid-template-columns:1fr} }

.passi{counter-reset:p;list-style:none;margin:0;padding:0;display:grid;gap:18px}
.passi li{counter-increment:p;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.passi li::before{
  content:counter(p);font-family:var(--tit);font-size:26px;font-weight:700;color:var(--arancio);
  line-height:1;min-width:36px
}
.servizi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--linea);border:1px solid var(--linea)}
.servizi li{background:var(--travertino-2);padding:18px 20px;font-size:15.5px}
.servizi li b{display:block;font-family:var(--tit);font-size:17px;margin-bottom:3px}

.riquadro{border:1px solid var(--linea);background:var(--carta);padding:clamp(20px,3vw,30px);border-radius:var(--r)}
.riquadro .dati-legali{font-size:14px;color:var(--testo-2);margin:14px 0 0;line-height:1.75}
.riquadro .dati-legali b{color:var(--testo)}

details.faq{border-bottom:1px solid var(--linea);padding:4px 0}
details.faq summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-family:var(--tit);font-size:18px;font-weight:600
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:'+';position:absolute;right:4px;top:50%;translate:0 -50%;
  font-size:22px;color:var(--arancio);font-family:var(--ui);line-height:1
}
details.faq[open] summary::after{content:'−'}
details.faq p{margin:0 0 16px;color:var(--testo-2);max-width:34em}

/* ── MODULO ──────────────────────────────────────────────── */
.modulo{display:grid;gap:13px}
.campo{display:grid;gap:5px}
.campo label{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ombra)}
.campo input,.campo textarea{
  font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--carta);color:var(--testo);width:100%
}
.campo textarea{min-height:88px;resize:vertical}
.privacy{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--testo-2)}
.privacy input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--bruciato)}

.bottone{
  display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:700;font-size:15.5px;
  background:var(--bruciato);color:#fff;border:none;padding:14px 26px;border-radius:var(--r);
  cursor:pointer;text-decoration:none;transition:background .16s ease
}
.bottone:hover{background:#A93A16}
.bottone.chiaro{background:var(--arancio)}
.bottone.chiaro:hover{background:#D9721C}
.bottone.vuoto{background:transparent;color:var(--bruciato);border:1.5px solid var(--bruciato)}
.bottone.vuoto:hover{background:var(--bruciato);color:#fff}

/* ── PIÈ DI PAGINA ───────────────────────────────────────── */
.piede{background:var(--basalto);color:#A7A197;padding-block:clamp(40px,5vw,60px) 26px;font-size:14.5px}
.piede a{color:var(--travertino);text-decoration:none;border-bottom:1px solid #4A463F}
.piede a:hover{border-bottom-color:var(--arancio)}
.piede h3{font-family:var(--tit);color:var(--travertino-2);font-size:19px;margin:0 0 12px}
.piede .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:34px}
.piede .fine{
  margin-top:34px;padding-top:20px;border-top:1px solid #35312C;
  display:flex;flex-wrap:wrap;gap:12px 26px;font-size:13px;align-items:center
}
.piede .fine .firma{margin-left:auto}

/* ── WHATSAPP ────────────────────────────────────────────── */
.wa{
  position:fixed;right:16px;bottom:16px;z-index:50;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.26)
}
.wa svg{width:30px;height:30px;fill:#fff}
.wa:hover{background:#1FB855}

/* ── ACCESSIBILITÀ / MOVIMENTO RIDOTTO ───────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .dis .traccia{stroke-dashoffset:0}
  .dis .insegna,.dis .vetro,.dis text{opacity:1}
  .fronte.esce{opacity:1;transform:none}
}
/* rete di sicurezza: se il JS non parte, niente resta invisibile */
.no-js .dis .traccia{stroke-dashoffset:0}
.no-js .dis .insegna,.no-js .dis .vetro,.no-js .dis text{opacity:1}