/* re.theproduser.com — «tavola tecnica»: inchiostro, carta, linee da 1 px e un solo colore, l'ottone (Vera, 2026-10-10) */
@font-face{font-family:"Instrument Serif";src:url(font/serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(font/serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(font/sans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(font/mono.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --inchiostro:#0f1217;--inchiostro-2:#171c24;--carta:#f2eee6;--carta-2:#e8e2d6;
  --ottone:#e3ae4a;--ottone-scuro:#8a5a12;--testo-chiaro:#e9e5dc;--testo-tenue:#a7a399;--testo-scuro:#1b1d21;--tenue-scuro:#5b5a55;
  --linea-chiara:rgba(233,229,220,.11);--linea-scura:rgba(27,29,33,.14);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --margine:clamp(20px,5vw,72px);--max:1280px;--raggio:2px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.6 var(--sans);color:var(--testo-scuro);background:var(--inchiostro);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}
p{text-wrap:pretty}
em{font-style:italic}
.salta{position:absolute;left:-999px;top:8px;background:var(--ottone);color:var(--inchiostro);padding:8px 14px;z-index:100}
.salta:focus{left:8px}
:focus-visible{outline:2px solid var(--ottone);outline-offset:3px}

/* superfici */
.scuro{background:var(--inchiostro);color:var(--testo-chiaro);position:relative;isolation:isolate}
.chiaro{background:var(--carta);color:var(--testo-scuro)}
.griglia-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--linea-chiara) 1px,transparent 1px),linear-gradient(90deg,var(--linea-chiara) 1px,transparent 1px);
  background-size:80px 80px;background-position:-1px -1px;
  mask-image:radial-gradient(ellipse 90% 80% at 60% 40%,#000 30%,transparent 85%)}

/* testata */
.testata{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:18px;padding:16px var(--margine);color:var(--testo-chiaro);transition:background .3s,padding .3s,border-color .3s;border-bottom:1px solid transparent}
.testata.su{background:var(--inchiostro);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-block:10px;border-color:var(--linea-chiara)}
.testata{--logo:146px}
.marchio img{width:var(--logo);height:auto}
/* «Real Estate» alto come le lettere del logo e sulla stessa linea di base; il filetto è alto quanto il logo intero */
.marchio-re{display:flex;align-items:flex-end;height:calc(var(--logo)*.2383);padding:0 0 calc(var(--logo)*.031) calc(var(--logo)*.11);border-left:1px solid var(--linea-chiara);font:600 calc(var(--logo)*.142)/.73 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ottone);white-space:nowrap}
.menu{display:flex;gap:26px;margin-left:auto;font-size:14px}
.menu a{text-decoration:none;color:var(--testo-tenue);transition:color .2s}
.menu a:hover{color:var(--testo-chiaro)}

/* bottoni */
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ottone);color:var(--inchiostro);font:600 16px/1 var(--sans);padding:17px 26px;border:0;border-radius:var(--raggio);text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.bottone:hover{background:#f0c46c;transform:translateY(-1px)}
.bottone span{transition:transform .2s}
.bottone:hover span{transform:translateX(4px)}
.bottone-piccolo{font-size:14px;padding:11px 16px}
.collegamento{color:var(--testo-chiaro);text-underline-offset:5px;text-decoration-color:var(--ottone);font-weight:500}
.collegamento:hover{color:var(--ottone)}
.bottone-fisso{display:none}

/* etichette */
.etichetta{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ottone);margin:0 0 22px;display:flex;align-items:center;gap:10px}
.chiaro .etichetta{color:var(--ottone-scuro)}
.punto{width:7px;height:7px;border-radius:50%;background:var(--ottone);box-shadow:0 0 0 0 rgba(227,174,74,.6);animation:pulsa 2.4s infinite}
@keyframes pulsa{70%{box-shadow:0 0 0 10px rgba(227,174,74,0)}100%{box-shadow:0 0 0 0 rgba(227,174,74,0)}}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(30px,5vw,80px);padding:140px var(--margine) 80px;max-width:calc(var(--max) + 2*var(--margine));margin:auto}
.hero h1{font:400 clamp(44px,6.4vw,92px)/.98 var(--serif);letter-spacing:-.015em}
.hero h1 em,.sezione h2 em{color:var(--ottone)}
.chiaro h2 em{color:var(--ottone-scuro)}
.hero-sotto{font-size:clamp(17px,1.4vw,20px);color:var(--testo-tenue);max-width:34em;margin:28px 0 36px}
.azioni{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.tavola{margin:0;border:1px solid var(--linea-chiara);background:rgba(23,28,36,.55)}
.disegno{width:100%;height:auto;padding:28px 28px 8px}
.disegno .linee path{fill:none;stroke:var(--testo-chiaro);stroke-width:1.4;stroke-linejoin:round;stroke-dasharray:var(--l,900);stroke-dashoffset:var(--l,900);animation:traccia 2.2s cubic-bezier(.6,.1,.2,1) forwards}
.disegno .linee path:nth-child(2){animation-delay:.25s}.disegno .linee path:nth-child(3){animation-delay:.5s;stroke:var(--ottone)}
.disegno .linee path:nth-child(n+4){animation-delay:.9s;stroke-width:1}
.disegno .quote path{fill:none;stroke:var(--ottone);stroke-width:1;opacity:0;animation:appare .8s 2s forwards}
.quota-testo{font:500 11px var(--mono);fill:var(--ottone);text-anchor:middle;letter-spacing:.08em;opacity:0;animation:appare .8s 2.2s forwards}
@keyframes traccia{to{stroke-dashoffset:0}}
@keyframes appare{to{opacity:1}}
.cartiglio{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea-chiara)}
.cartiglio div{padding:12px 14px;border-left:1px solid var(--linea-chiara)}
.cartiglio div:first-child{border-left:0}
.cartiglio span{display:block;font:500 10px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--testo-tenue)}
.cartiglio b{font-weight:500;font-size:14px}

/* numeri */
.numeri{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea-chiara);border-bottom:1px solid var(--linea-chiara);background:var(--inchiostro-2)}
.numero{padding:38px var(--margine) 38px 32px;border-left:1px solid var(--linea-chiara)}
.numero:first-child{border-left:0;padding-left:var(--margine)}
.numero b{display:block;font:400 clamp(44px,5vw,68px)/1 var(--serif);color:var(--testo-chiaro);margin-bottom:10px}
.numero span{font-size:14px;color:var(--testo-tenue);display:block;max-width:22em}
.numero b span{display:inline;font:inherit;color:inherit}

/* sezioni */
.sezione{padding:clamp(80px,11vw,150px) var(--margine)}
.sezione>*{max-width:var(--max);margin-inline:auto}
.sezione-testa{margin-bottom:clamp(44px,6vw,80px)}
.sezione h2{font:400 clamp(38px,5vw,72px)/1.02 var(--serif);letter-spacing:-.01em;max-width:16em}
.sezione-testa>p:last-child:not(.etichetta){font-size:clamp(17px,1.3vw,19px);max-width:38em;margin:22px 0 0;color:var(--tenue-scuro)}
.scuro .sezione-testa>p:last-child:not(.etichetta){color:var(--testo-tenue)}

/* passi */
.passi{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea-scura)}
.passo{padding:30px 26px 10px 0;border-right:1px solid var(--linea-scura);margin-right:26px;position:relative}
.passo:last-child{border-right:0;margin-right:0}
.passo::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--ottone-scuro);transition:width 1s .2s cubic-bezier(.6,.1,.2,1)}
.passo.visto::before{width:calc(100% - 26px)}
.passo-n{font:500 12px var(--mono);color:var(--ottone-scuro);letter-spacing:.1em}
.passo h3{font:400 30px/1.1 var(--serif);margin:16px 0 12px}
.passo p{margin:0;color:var(--tenue-scuro);font-size:16px}

/* caso */
.confronti{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--linea-chiara)}
.confronto{padding:28px;border-left:1px solid var(--linea-chiara)}
.confronto:first-child{border-left:0}
.confronto-titolo{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--testo-tenue);margin:0 0 20px}
.barra{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.barra span{display:block;height:10px;width:0;transition:width 1.4s cubic-bezier(.6,.1,.2,1)}
.visto .barra span{width:calc(var(--v) * 1%)}
.barra-oggi{background:#5d5a55}
.barra-nuovo{background:var(--ottone)}
.barra b{font:400 30px/1 var(--serif);min-width:2ch}
.legenda{grid-column:1/-1;margin:0;padding:14px 28px;border-top:1px solid var(--linea-chiara);font-size:13px;color:var(--testo-tenue);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.legenda span{display:inline-block;width:18px;height:6px}
.l-oggi{background:#5d5a55}.l-nuovo{background:var(--ottone);margin-left:10px}
.caso-fatti{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:60px}
.caso-fatti b{display:block;font:400 clamp(30px,3vw,42px)/1.1 var(--serif);color:var(--ottone);margin-bottom:8px}
.caso-fatti span{color:var(--testo-tenue);font-size:15px}

/* pannelli */
.pannelli{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linea-scura);background:var(--carta)}
.pannello{padding:34px 30px 30px;border-left:1px solid var(--linea-scura);transition:background .3s}
.pannello:first-child{border-left:0}
.pannello:hover{background:var(--carta-2)}
.pannello-n{font:500 12px var(--mono);color:var(--ottone-scuro);border:1px solid currentColor;width:30px;height:30px;display:grid;place-items:center}
.pannello h3{font:400 36px/1.1 var(--serif);margin:26px 0 16px}
.pannello ul{list-style:none;padding:0;margin:0}
.pannello li{padding:11px 0;border-top:1px solid var(--linea-scura);font-size:15.5px;color:#34363a}

/* investimento */
.investimento{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:end;max-width:none}
.investimento>*{margin:0}
.inv-grande{justify-self:end;max-width:600px}
.inv-grande>p{color:var(--testo-tenue);font-size:18px;margin-top:22px}
.inv-motivi{margin-top:34px;border-top:1px solid var(--linea-chiara)}
.inv-motivi>div{padding:22px 0 20px;border-bottom:1px solid var(--linea-chiara)}
.inv-motivi h3{font:400 28px/1.1 var(--serif);color:var(--testo-chiaro)}
.inv-motivi .inv-sotto{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ottone);margin:8px 0 12px}
.inv-motivi p:last-child{margin:0;font-size:16px;color:var(--testo-tenue)}
.listino{margin:0;border-top:1px solid var(--linea-chiara);max-width:560px}
.listino div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--linea-chiara)}
.listino dt{font-size:16px}
.listino .listino-nota{font-size:13px;color:var(--testo-tenue);margin-top:8px;max-width:22em}
.listino-nota a{color:var(--ottone);white-space:nowrap}
.listino dd{margin:0;font:400 34px/1 var(--serif);color:var(--ottone);text-align:right}
.listino small{display:block;font:400 12px/1.4 var(--sans);color:var(--testo-tenue);margin-top:6px}
.nota-iva a{color:var(--ottone)}
.nota-iva{grid-column:1/-1;justify-self:center;font-size:13px;color:var(--testo-tenue);margin-top:10px}

/* domande */
.domande{border-top:1px solid var(--linea-scura)}
.domande summary,.domande details p{max-width:900px}
.domande details{border-bottom:1px solid var(--linea-scura);scroll-margin-top:var(--testata,58px)}
/* le ancore non finiscono sotto la testata fissa; la domanda raggiunta da un link si accende un momento */
section[id]{scroll-margin-top:60px}
.domande details.raggiunta summary{animation:accendi 2.2s ease-out}
@keyframes accendi{0%,35%{color:var(--ottone-scuro)}}
.domande summary{cursor:pointer;list-style:none;font:400 clamp(22px,2.2vw,28px)/1.25 var(--serif);padding:24px 50px 24px 0;position:relative}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"+";position:absolute;right:6px;top:50%;translate:0 -50%;font:300 30px var(--sans);color:var(--ottone-scuro);transition:rotate .3s}
.domande details[open] summary::after{rotate:45deg}
.domande details p{margin:0 0 26px;color:var(--tenue-scuro);max-width:42em}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .domande details::details-content{height:0;overflow:clip;transition:height .35s,content-visibility .35s allow-discrete}
  .domande details[open]::details-content{height:auto}
}

/* prova */
.prova{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,90px);align-items:start;max-width:none}
.prova>*{margin:0}
.prova-testo{justify-self:end;max-width:520px;position:sticky;top:120px}
.prova-testo>p:not(.etichetta){color:var(--testo-tenue);font-size:18px;margin:22px 0}
.prova-testo a{color:var(--ottone)}
.garanzie{list-style:none;padding:0;margin:30px 0 0}
.garanzie li{padding:10px 0 10px 28px;border-top:1px solid var(--linea-chiara);position:relative;font-size:15px}
.garanzie li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:6px;border-left:1.5px solid var(--ottone);border-bottom:1.5px solid var(--ottone);rotate:-45deg}
.modulo{max-width:640px;background:var(--inchiostro-2);border:1px solid var(--linea-chiara);padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo-largo{grid-column:1/-1}
.campo label{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--testo-tenue)}
.facoltativo{text-transform:none;letter-spacing:0}
.campo input,.campo select,.campo textarea{font:400 16px/1.4 var(--sans);color:var(--testo-chiaro);background:transparent;border:0;border-bottom:1px solid rgba(233,229,220,.28);padding:10px 0;border-radius:0;transition:border-color .2s;width:100%}
.campo select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e3ae4a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center}
.campo select option{background:var(--inchiostro-2)}
.campo textarea{resize:vertical;min-height:80px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--ottone)}
.campo input::placeholder,.campo textarea::placeholder{color:#6f6c65}
/* autocompilazione del browser: i campi restano scuri e leggibili invece del fondo giallo o bianco */
.campo input:-webkit-autofill,.campo input:-webkit-autofill:hover,.campo input:-webkit-autofill:focus,.campo textarea:-webkit-autofill,.campo select:-webkit-autofill{
  -webkit-text-fill-color:var(--testo-chiaro);caret-color:var(--testo-chiaro);-webkit-box-shadow:0 0 0 1000px var(--inchiostro-2) inset;box-shadow:0 0 0 1000px var(--inchiostro-2) inset;transition:background-color 9999s}
.campo input:autofill{background:transparent}
.campo input.errato{border-color:#ff8a7a}
.consenso{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--testo-tenue)}
.consenso input{accent-color:var(--ottone);width:18px;height:18px;margin-top:2px;flex:none}
.consenso a{color:var(--testo-chiaro)}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.avviso{grid-column:1/-1;margin:0;padding:12px 14px;border:1px solid #ff8a7a;color:#ffc2b8;font-size:14px}
.modulo-fatto{display:block}
.modulo-fatto h3{font:400 40px/1.1 var(--serif);margin-bottom:14px}
.modulo-fatto p:last-child{color:var(--testo-tenue)}

/* piede */
.piede{background:var(--inchiostro);color:var(--testo-tenue);padding:50px var(--margine);border-top:1px solid var(--linea-chiara);display:grid;gap:14px;font-size:14px}
.piede a{color:var(--testo-chiaro);text-decoration-color:var(--linea-chiara);text-underline-offset:4px}
.piede p{margin:0}
.piede-nota{font-size:13px}

/* rivelazioni */
.js .rivela{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rivela.visto{opacity:1;transform:none}
.passi .rivela:nth-child(2),.pannelli .rivela:nth-child(2),.confronti .rivela:nth-child(2),.caso-fatti .rivela:nth-child(2){transition-delay:.12s}
.passi .rivela:nth-child(3),.pannelli .rivela:nth-child(3),.confronti .rivela:nth-child(3),.caso-fatti .rivela:nth-child(3){transition-delay:.24s}
.passi .rivela:nth-child(4){transition-delay:.36s}

/* tablet */
@media (max-width:1080px){
  .menu{display:none}
  .testata .bottone-piccolo{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:120px}
  .tavola{max-width:620px}
  .numeri{grid-template-columns:repeat(2,1fr)}
  .numero:nth-child(3){border-left:0;padding-left:var(--margine)}
  .numero:nth-child(n+3){border-top:1px solid var(--linea-chiara)}
  .passi{grid-template-columns:1fr 1fr;row-gap:30px}
  .passo:nth-child(2){border-right:0;margin-right:0}
  .pannelli,.confronti{grid-template-columns:1fr}
  .pannello,.confronto{border-left:0;border-top:1px solid var(--linea-scura)}
  .confronto{border-top-color:var(--linea-chiara)}
  .pannello:first-child,.confronto:first-child{border-top:0}
  .investimento,.prova{grid-template-columns:1fr}
  .inv-grande,.prova-testo{justify-self:start;position:static}
  .nota-iva{justify-self:start}
}
/* telefono */
@media (max-width:640px){
  body{font-size:16px}
  .testata{--logo:118px;gap:14px}
  .testata .bottone-piccolo{display:none}
  .hero{padding-top:104px}
  .cartiglio{grid-template-columns:1fr 1fr}
  .cartiglio div:nth-child(3){border-left:0}
  .cartiglio div:nth-child(n+3){border-top:1px solid var(--linea-chiara)}
  .numeri{grid-template-columns:1fr}
  .numero,.numero:nth-child(3){border-left:0;padding:28px var(--margine)}
  .numero+.numero{border-top:1px solid var(--linea-chiara)}
  .passi{grid-template-columns:1fr}
  .passo{border-right:0;margin-right:0}
  .caso-fatti{grid-template-columns:1fr;gap:28px}
  .modulo{grid-template-columns:1fr}
  .bottone-fisso.nascosto{pointer-events:none}
  .bottone-fisso{display:flex;position:fixed;left:16px;right:16px;bottom:16px;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .3s,opacity .3s}
  .bottone-fisso.nascosto{transform:translateY(120%);opacity:0}
  .piede{padding-bottom:100px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .rivela{opacity:1;transform:none}
}