/* ════════════════════════════════════════════════════════════
   VARCO · strumenti gratuiti (valutazione immobile, imposte d'acquisto)
   Stesso linguaggio della home: riquadro blu con la foto, scheda bianca sopra,
   scelte grandi a "pillole" e schede, risultato in evidenza.
   ════════════════════════════════════════════════════════════ */

/* ── Riquadro in alto ─────────────────────────────────────── */
.tl-hero{position:relative;margin:.5rem 0 0;padding:2rem 1.25rem 6.5rem;border-radius:var(--r-xl);color:#fff;overflow:hidden;
  background:linear-gradient(160deg,rgba(11,51,181,.9),rgba(6,25,92,.78) 55%,rgba(6,25,92,.62)),url('img/home-casa.jpg') center 60%/cover no-repeat,var(--brand)}
.tl-hero .seo-crumbs{padding:0 0 1.25rem}
.tl-hero .seo-crumbs,.tl-hero .seo-crumbs a,.tl-hero .seo-crumbs span[aria-hidden]{color:rgba(255,255,255,.75)}
.tl-hero .seo-crumbs > span:last-child{color:#fff}
.tl-hero h1{margin:0 0 .6rem;max-width:20ch;font-size:clamp(1.8rem,5.5vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.tl-hero p{margin:0;max-width:56ch;font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.88)}

/* ── Scheda di calcolo sovrapposta al riquadro + risultato ── */
.tl-main{position:relative;z-index:2;display:grid;gap:1.25rem;margin:-5rem .5rem 0}
.tl-card{padding:1.25rem;border-radius:var(--r-xl);background:var(--surface);box-shadow:0 18px 50px rgba(3,14,60,.18),0 2px 6px rgba(3,14,60,.06)}
.tl-step{display:flex;align-items:center;gap:.6rem;margin:1.5rem 0 .7rem;font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.tl-step:first-child{margin-top:0}
.tl-step b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--tl-accent,var(--tx));color:var(--surface);display:flex;align-items:center;justify-content:center;font-size:.78rem}
.tl-step small{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--tm)}

/* campi grandi, come la barra di ricerca della home */
.tl-field{position:relative;display:flex;align-items:center;gap:.6rem;min-height:56px;padding:0 1rem;border-radius:16px;background:var(--surface2);transition:box-shadow .2s,background .2s}
.tl-field:focus-within{background:var(--surface);box-shadow:0 0 0 2px var(--tx)}
.tl-field > svg{flex-shrink:0;width:20px;height:20px;color:var(--tm)}
.tl-field input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--font);font-size:1.05rem;font-weight:600;color:var(--tx);padding:.9rem 0}
.tl-field input::placeholder{color:var(--tm);font-weight:500}
.tl-field .tl-unit{flex-shrink:0;font-weight:700;color:var(--tm)}
.tl-field .pt-sug{top:calc(100% + 6px)}
.tl-range{width:100%;margin:.9rem 0 0;accent-color:var(--brand)}
.tl-range-lbl{display:flex;justify-content:space-between;font-size:.75rem;color:var(--ts)}

/* scelte a pillola (stato, dotazioni) */
.tl-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.tl-chips label{position:relative;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1rem;border:1.5px solid var(--br);border-radius:var(--pill);
  font-size:.9rem;font-weight:600;cursor:pointer;user-select:none;transition:border-color .15s,background .15s,transform .15s var(--spring)}
.tl-chips label:hover{border-color:var(--tx)}
.tl-chips label:active{transform:scale(.96)}
.tl-chips input{position:absolute;opacity:0;pointer-events:none}
.tl-chips label:has(input:checked){border-color:var(--tx);background:var(--tx);color:var(--surface)}
.tl-chips label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

/* scelte a scheda con icona (tipologia, chi vende, prima casa) */
.tl-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem}
.tl-options.two{grid-template-columns:1fr 1fr}
.tl-opt{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem;border:1.5px solid var(--br);border-radius:16px;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s var(--spring)}
.tl-opt:hover{border-color:var(--tx)}
.tl-opt:active{transform:scale(.98)}
.tl-opt input{position:absolute;opacity:0;pointer-events:none}
.tl-opt i{width:34px;height:34px;border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--tx)}
.tl-opt i svg{width:19px;height:19px}
.tl-opt b{font-size:.95rem}
.tl-opt span{font-size:.8rem;line-height:1.4;color:var(--tm)}
.tl-opt:has(input:checked){border-color:var(--tx);box-shadow:inset 0 0 0 1px var(--tx)}
.tl-opt:has(input:checked) i{background:var(--tl-accent,var(--brand));color:#fff}
.tl-opt:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

.tl-more{margin-top:1.25rem;border-top:1px solid var(--br);padding-top:.25rem}
.tl-more summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;font-weight:700;list-style:none}
.tl-more summary::-webkit-details-marker{display:none}
.tl-more summary::after{content:'';width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-right:.3rem}
.tl-more[open] summary::after{transform:rotate(-135deg)}
.tl-grid2{display:grid;gap:.75rem}
.tl-lbl{display:block;margin:0 0 .4rem;font-size:.84rem;font-weight:700}
.tl-hint{margin:.4rem 0 0;font-size:.8rem;line-height:1.45;color:var(--tm)}
.tl-check{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;font-size:.86rem;line-height:1.45;cursor:pointer}
.tl-check input{margin-top:.1rem;width:18px;height:18px;accent-color:var(--tx);flex-shrink:0}

.tl-cta{margin-top:1.5rem}
.tl-cta .vx-btn{min-height:54px;font-size:1rem}
.tl-card .vx-alert{margin:1rem 0 0}

/* ── Risultato ───────────────────────────────────────────── */
.tl-res{display:flex;flex-direction:column}
.tl-res-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;min-height:220px;text-align:center;color:var(--tm)}
.tl-res-empty i{width:56px;height:56px;border-radius:18px;background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--tx)}
.tl-res-empty i svg{width:26px;height:26px}
.tl-res-empty b{color:var(--tx);font-size:1.02rem}
.tl-kicker{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--tm)}
.tl-big{margin:.25rem 0 .2rem;font-size:clamp(1.9rem,6vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.tl-big small{font-size:.5em;font-weight:700;letter-spacing:-.01em;color:var(--tm)}
.tl-sub{margin:0;font-size:.92rem;line-height:1.55;color:var(--tm)}
.tl-sub b{color:var(--tx)}
.tl-pop{animation:tlPop .45s var(--spring)}
@keyframes tlPop{from{opacity:.3;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* forchetta di prezzo */
.tl-span{position:relative;height:12px;margin:1.4rem 0 .5rem;border-radius:var(--pill);background:linear-gradient(90deg,var(--tl-accent-dim,var(--brand-dim)),var(--tl-accent,var(--brand)))}
.tl-span i{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--surface);border:4px solid var(--tl-accent,var(--brand));transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.tl-span-lbl{display:flex;justify-content:space-between;font-size:.82rem;font-weight:700}
.tl-span-lbl span{color:var(--tm);font-weight:600}

/* barra delle spese */
.tl-bar{display:flex;height:14px;margin:1.2rem 0 .9rem;border-radius:var(--pill);overflow:hidden;background:var(--surface2)}
.tl-bar i{display:block;height:100%;transition:width .5s var(--ease)}
.tl-lines{list-style:none;margin:0;padding:0}
.tl-lines li{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--br);font-size:.92rem}
.tl-lines li em{flex:0 0 10px;height:10px;border-radius:3px}
.tl-lines li span{flex:1;color:var(--tm);line-height:1.35}
.tl-lines li b{white-space:nowrap}
.tl-lines li.tot{border-bottom:0;padding-top:.9rem;font-size:1.02rem}
.tl-lines li.tot span{color:var(--tx);font-weight:800}
.tl-note{margin:1rem 0 0;font-size:.8rem;line-height:1.5;color:var(--ts)}

.tl-ex{display:grid;gap:.5rem;margin-top:1.25rem}
.tl-ex > span{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--tm)}
.tl-ex a{display:flex;justify-content:space-between;gap:1rem;padding:.75rem .9rem;border-radius:12px;background:var(--surface2);text-decoration:none;color:var(--tx);font-size:.88rem;transition:background .15s}
.tl-ex a:hover{background:var(--br)}
.tl-ex a b{white-space:nowrap}

/* richiesta di valutazione precisa */
.tl-lead{margin-top:1.4rem;padding:1.1rem;border-radius:18px;background:var(--tl-accent-dim,var(--brand-dim))}
.tl-lead h3{margin:0 0 .25rem;font-size:1.05rem}
.tl-lead > p{margin:0 0 .9rem;font-size:.88rem;color:var(--tm)}
.tl-lead .vx-inputs{gap:.6rem}
.tl-lead .vx-btn{margin-top:1rem}
.tl-ok{display:flex;gap:.55rem;align-items:flex-start;margin-top:.9rem;font-size:.8rem;color:var(--tm);line-height:1.5}
.tl-ok a{color:inherit;text-decoration:underline}
.tl-ok input{margin-top:.15rem;width:18px;height:18px;accent-color:var(--tx);flex-shrink:0}
.tl-done{margin-top:1.25rem;padding:1rem 1.1rem;border-radius:16px;background:var(--green-dim);color:var(--green);display:grid;gap:.2rem}

/* ── Sezioni di contenuto sotto ──────────────────────────── */
.tl-sections{margin-top:3.5rem}
.tl-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:3rem}
.tl-band > div{padding:1.25rem;border:1px solid var(--br);border-radius:var(--r-lg)}
.tl-band i{width:40px;height:40px;border-radius:12px;background:var(--tl-accent-dim,var(--brand-dim));color:var(--tl-accent,var(--brand));display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
.tl-band i svg{width:20px;height:20px}
.tl-band b{display:block;margin-bottom:.3rem}
.tl-band p{margin:0;font-size:.9rem;line-height:1.55;color:var(--tm)}

.tl-table-wrap{overflow-x:auto;border:1px solid var(--br);border-radius:var(--r-lg)}
.tl-table{width:100%;border-collapse:collapse;font-size:.92rem}
.tl-table th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tm);padding:.8rem 1rem;background:var(--surface2)}
.tl-table td{padding:.8rem 1rem;border-top:1px solid var(--br)}
.tl-table td:not(:first-child),.tl-table th:not(:first-child){text-align:right;white-space:nowrap}

.tl-article{max-width:780px}
.tl-article h3{margin:1.6rem 0 .4rem;font-size:1.05rem}
.tl-article p,.tl-article li{line-height:1.7;color:var(--tm)}
.tl-article b{color:var(--tx)}
.tl-example{margin:1rem 0;padding:1rem 1.15rem;border-left:4px solid var(--tl-accent,var(--brand));border-radius:0 var(--r) var(--r) 0;background:var(--surface2)}
.tl-example p{margin:.3rem 0 0}

@media (min-width:768px){
  .tl-hero{padding:2.5rem 2.5rem 7.5rem}
  .tl-main{margin:-6rem 1.5rem 0}
  .tl-card{padding:1.75rem}
  .tl-grid2{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .tl-main{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;margin:-6.5rem 2rem 0}
  .tl-res{position:sticky;top:calc(var(--hdr,64px) + 1rem)}
}
@media (max-width:420px){.tl-options.two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tl-pop{animation:none}.tl-bar i{transition:none}}

/* Caselle di spunta personalizzate (mai quelle del browser) */
.tl-check input,.tl-ok input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex-shrink:0;border:2px solid var(--br2,#c9c9c9);border-radius:7px;
  background:var(--surface) center/14px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s,transform .15s var(--spring)}
.tl-check input:hover,.tl-ok input:hover{border-color:var(--tx)}
.tl-check input:active,.tl-ok input:active{transform:scale(.9)}
.tl-check input:checked,.tl-ok input:checked{border-color:var(--tx);background-color:var(--tx);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")}
.tl-check input:focus-visible,.tl-ok input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tl-check{align-items:center}

/* testo solo per lettori di schermo */
.vx-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ════════════════════════════════════════════════════════════
   Due strumenti, due identità: chi VENDE (valutazione, verde) e chi COMPRA (imposte, blu)
   ════════════════════════════════════════════════════════════ */
.tl-sell{--tl-accent:#1E7A47;--tl-accent-dim:rgba(30,122,71,.12)}
.tl-buy{--tl-accent:var(--brand);--tl-accent-dim:var(--brand-dim)}
.tl-sell .tl-hero{background:linear-gradient(160deg,rgba(14,84,48,.9),rgba(9,58,33,.76) 55%,rgba(9,58,33,.55)),url('img/tool-vendere.jpg') center 55%/cover no-repeat,#1E7A47}
.tl-buy .tl-hero{background:linear-gradient(160deg,rgba(11,51,181,.92),rgba(6,25,92,.8) 55%,rgba(6,25,92,.6)),url('img/tool-comprare.jpg') center 45%/cover no-repeat,var(--brand)}
.tl-sell .tl-cta .vx-btn-primary{background:var(--tl-accent);border-color:var(--tl-accent)}
.tl-sell .tl-cta .vx-btn-primary:hover{background:#17653a}

/* rimando all'altro strumento */
.tl-other{display:flex;align-items:center;gap:1rem;margin-top:3rem;padding:1.25rem 1.35rem;border-radius:var(--r-xl);text-decoration:none;color:#fff;
  transition:transform .2s var(--spring),box-shadow .2s}
.tl-other:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.16)}
.tl-other.to-sell{background:linear-gradient(135deg,#1E7A47,#0E5430)}
.tl-other.to-buy{background:linear-gradient(135deg,var(--brand),var(--brand-lo))}
.tl-other i{flex:0 0 48px;height:48px;border-radius:14px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.tl-other i svg{width:24px;height:24px}
.tl-other div{flex:1;min-width:0}
.tl-other small{display:block;font-size:.8rem;font-weight:700;opacity:.8;text-transform:uppercase;letter-spacing:.06em}
.tl-other b{display:block;font-size:1.1rem;letter-spacing:-.01em}
.tl-other span{font-size:.9rem;opacity:.85}
.tl-other em{font-style:normal;font-size:1.4rem}