/* ===== Offerte Condizionatori — foglio di stile condiviso ===== */
:root{
  --ink:#0b1f24; --muted:#4a5d62; --bg:#eef3f3; --surface:#ffffff; --line:#d4e0e0;
  --primary:#0a5e6b; --primary-ink:#073f48; --primary-soft:#e2f0f0;
  --accent:#bb4a26; --accent-soft:#f6e7df; --good:#1f6b3a;
  --shadow:0 1px 2px rgba(11,31,36,.06), 0 12px 30px -18px rgba(11,31,36,.35);
  --radius:16px; --maxw:1140px;
  --font-display:"Bricolage Grotesque", Georgia, serif;
  --font-body:"Public Sans", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:clamp(16px,1.6vw,17px); line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display); line-height:1.1; letter-spacing:-.01em; margin:0 0 .4em}
h1{font-size:clamp(2rem,5vw,3.2rem); font-weight:800}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem); font-weight:700}
h3{font-size:1.2rem; font-weight:700}
p{margin:0 0 1em}
a{color:var(--primary-ink); text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img{max-width:100%; display:block}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
.skip{position:absolute; left:-999px; top:0; z-index:200; background:var(--ink); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 10px 0}
.skip:focus{left:0}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Header */
.site-header{position:sticky; top:0; z-index:100; background:rgba(238,243,243,.85);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:1rem; min-height:64px}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display);
  font-weight:800; font-size:1.15rem; color:var(--ink); text-decoration:none}
.brand .mark{width:34px;height:34px;border-radius:9px;
  background:linear-gradient(145deg,var(--primary),#0a7d8c); display:grid;place-items:center;color:#fff;flex:0 0 auto}
.brand .mark svg{width:20px;height:20px}
.nav{margin-left:auto}
.nav ul{list-style:none; display:flex; gap:.3rem; margin:0; padding:0; flex-wrap:wrap}
.nav a{display:inline-block; padding:.5rem .8rem; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{background:var(--primary-soft)}

.btn{display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-family:var(--font-body);
  font-weight:600; font-size:1rem; padding:.8rem 1.3rem; border-radius:12px; border:2px solid transparent;
  text-decoration:none; transition:transform .12s ease, background .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-ink)}
.btn-ghost{background:transparent; color:var(--primary-ink); border-color:var(--primary)}
.btn-ghost:hover{background:var(--primary-soft)}

/* Breadcrumb */
.breadcrumb{padding:1rem 0 0}
.breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; font-size:.88rem; color:var(--muted)}
.breadcrumb li::after{content:"›"; margin-left:.4rem; color:var(--line)}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--muted)}

/* Hero */
.hero{position:relative; overflow:hidden; padding:clamp(2.5rem,7vw,5rem) 0 clamp(2rem,5vw,3.5rem)}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 80% at 85% -10%, rgba(10,125,140,.22), transparent 60%),
            radial-gradient(50% 60% at 0% 110%, rgba(187,74,38,.14), transparent 55%)}
.hero-grid{display:grid; gap:2.5rem; grid-template-columns:1.1fr .9fr; align-items:center}
.eyebrow{display:inline-block; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  font-size:.78rem; color:var(--accent); margin-bottom:.8rem}
.lead{font-size:clamp(1.05rem,2vw,1.25rem); color:var(--muted); max-width:48ch}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem}
.hero-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.6rem}
.hero-card h2{font-size:1.15rem}
.quickstat{display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap}
.quickstat div{flex:1 1 120px; background:var(--primary-soft); border-radius:12px; padding:.9rem}
.quickstat strong{display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--primary-ink)}
.quickstat span{font-size:.85rem; color:var(--muted)}

section{padding:clamp(2.5rem,6vw,4rem) 0}
.section-head{max-width:62ch; margin-bottom:2rem}
.section-head p{color:var(--muted)}
.page-intro{max-width:65ch; color:var(--muted)}

/* Cards / griglie */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.2rem; list-style:none; margin:0; padding:0}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.3rem; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card .type{font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent)}
.card h3{margin:.2rem 0 .1rem}
.card h3 a{text-decoration:none; color:var(--ink)}
.card h3 a:hover{color:var(--primary-ink)}
.card .brand-name{color:var(--muted); font-size:.9rem; margin-bottom:1rem}
.specs{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.specs li{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--line); font-size:.92rem}
.specs li span:first-child{color:var(--muted)}
.specs li span:last-child{font-weight:600; text-align:right}
.badge{display:inline-block; font-size:.78rem; font-weight:700; padding:.15rem .5rem; border-radius:6px; background:var(--primary-soft); color:var(--primary-ink)}
.card .price{margin-top:auto; padding-top:1rem; font-family:var(--font-display); font-size:1.3rem; font-weight:700}
.card .price small{font-family:var(--font-body); font-size:.8rem; font-weight:400; color:var(--muted)}

/* Hub tiles (marche/tipologie/potenza) */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; list-style:none; padding:0; margin:0}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.3rem; box-shadow:var(--shadow)}
.tile a{text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink)}
.tile a:hover{color:var(--primary-ink)}
.tile span{display:block; color:var(--muted); font-size:.88rem; margin-top:.2rem}

/* Catalogo: filtri */
.filters{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.2rem; margin-bottom:1.5rem}
.field{margin-bottom:0}
.field label{display:block; font-weight:600; margin-bottom:.35rem}
input[type=number], select{width:100%; font:inherit; color:var(--ink); background:#fbfdfd;
  border:1.5px solid var(--line); border-radius:10px; padding:.7rem .8rem}
input[type=number]:focus, select:focus{border-color:var(--primary)}
.results-meta{margin:0 0 1rem; color:var(--muted); font-weight:500}

.databanner{background:var(--accent-soft); border:1px solid #e7cdc1; color:#6b3018;
  border-radius:12px; padding:.8rem 1rem; font-size:.9rem; margin-bottom:1.6rem}
.disclaimer{margin-top:1.4rem; background:#fbfdfd; border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:12px; padding:1rem 1.2rem; font-size:.9rem; color:var(--muted)}
.disclaimer strong{color:var(--ink)}

/* Pagina modello */
.model-top{display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start}
.model-buy{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.4rem; box-shadow:var(--shadow); position:sticky; top:84px}
.model-buy .price{font-family:var(--font-display); font-size:2rem; font-weight:800}
.editorial{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.6rem; margin:1.5rem 0}
.todo{background:#fff7ed; border:1px dashed #d8a675; color:#7a4410; border-radius:10px; padding:.7rem .9rem; font-size:.85rem}

/* Consulente / form */
.tool{background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden}
.tool-grid{display:grid; grid-template-columns:1.4fr 1fr}
.tool form{padding:clamp(1.4rem,3vw,2.2rem)}
fieldset{border:0; padding:0; margin:0 0 1.6rem}
legend{font-family:var(--font-display); font-weight:700; font-size:1.05rem; padding:0; margin-bottom:.8rem}
.field+.field,.fld{margin-top:1.1rem}
.hint{font-size:.85rem; color:var(--muted); font-weight:400; margin-top:.2rem}
.radio-row{display:flex; flex-wrap:wrap; gap:.5rem}
.radio-row label{display:flex; align-items:center; gap:.5rem; font-weight:500; cursor:pointer;
  border:1.5px solid var(--line); border-radius:10px; padding:.55rem .8rem; flex:1 1 auto}
.radio-row input{accent-color:var(--primary); width:1.1em; height:1.1em}
.radio-row label:has(input:checked){border-color:var(--primary); background:var(--primary-soft)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.result{background:linear-gradient(160deg,#0b3a42,#0a5e6b); color:#fff; padding:clamp(1.4rem,3vw,2.2rem); display:flex; flex-direction:column}
.result h3,.result h2{color:#fff}
.result .placeholder{color:#cfe6e7}
.result .big{font-family:var(--font-display); font-size:clamp(2rem,6vw,2.8rem); font-weight:800; line-height:1}
.result .reco{background:rgba(255,255,255,.12); border-radius:14px; padding:1rem 1.1rem; margin:1rem 0}
.result .reco span.tag{display:inline-block; background:#fff; color:var(--primary-ink); font-weight:700; border-radius:999px; padding:.2rem .7rem; font-size:.85rem; margin-bottom:.5rem}
.result ul{margin:.4rem 0 0; padding-left:1.1rem}
.result ul li{margin-bottom:.35rem}
.result .note{font-size:.82rem; color:#cfe6e7; margin-top:auto; padding-top:1rem}

details.faq{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem 1.2rem; margin-bottom:1rem}
details.faq summary{font-weight:600; cursor:pointer}
details.faq p{margin:.8rem 0 0}

/* Footer */
footer.site-footer{background:var(--ink); color:#cdddde; padding:3rem 0 2rem; margin-top:2rem}
footer.site-footer a{color:#fff}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem}
footer h2,footer h3{color:#fff}
footer ul{list-style:none; padding:0; margin:0}
footer ul li{margin-bottom:.5rem}
.legal{border-top:1px solid rgba(255,255,255,.15); margin-top:2rem; padding-top:1.4rem; font-size:.82rem; color:#9fb6b8}

@media (max-width:860px){
  .hero-grid,.tool-grid,.foot-grid,.model-top{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .model-buy{position:static}
  .nav ul{gap:.1rem}
  .nav a{padding:.45rem .55rem; font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

/* ===== Contenuti informativi (guide, brand, bonus) ===== */
.prose{max-width:760px}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.4rem}
.prose ul,.prose ol{margin:0 0 1.1em; padding-left:1.3rem}
.prose li{margin-bottom:.45rem}
.prose .lead{color:var(--muted); font-size:clamp(1.05rem,2vw,1.2rem)}
.callout{background:var(--primary-soft); border:1px solid #bfdedf; border-radius:12px; padding:1rem 1.2rem; margin:1.4rem 0}
.callout strong{color:var(--primary-ink)}
.bonus-table{width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.95rem}
.bonus-table th,.bonus-table td{text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top}
.bonus-table th{background:var(--primary-soft); color:var(--primary-ink); font-family:var(--font-display)}
.bonus-table caption{caption-side:bottom; font-size:.82rem; color:var(--muted); padding-top:.6rem; text-align:left}
.tag-list{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:1rem 0}
.tag-list li{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.3rem .8rem; font-size:.85rem}
.faqwrap{margin-top:1rem}

/* ===== Menu mobile accessibile ===== */
.nav-toggle{display:none; margin-left:auto; width:46px; height:46px; align-items:center;
  justify-content:center; background:var(--surface); border:1.5px solid var(--line);
  border-radius:12px; cursor:pointer; padding:0}
.nav-toggle:hover{border-color:var(--primary)}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{
  display:block; width:22px; height:2.5px; background:var(--ink); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before{content:""; position:absolute; top:-7px; left:0}
.nav-toggle-bars::after{content:""; position:absolute; top:7px; left:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute; top:100%; left:0; right:0; margin:0; background:var(--surface);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:var(--shadow); display:none}
  .nav[data-open]{display:block}
  .nav ul{flex-direction:column; gap:.15rem; max-width:var(--maxw); margin-inline:auto;
    padding:.6rem clamp(1rem,4vw,2rem) 1rem}
  .nav a{display:block; padding:.85rem .8rem; font-size:1.05rem}
}

/* Stampa "ultimo aggiornamento" e note pagine info */
.updated{margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--muted)}
.series-list{list-style:none; padding:0; margin:1rem 0; display:grid; gap:.6rem}
.series-list li{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem}
.series-list .pos{display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--primary-ink); background:var(--primary-soft); border-radius:6px; padding:.1rem .5rem; margin-left:.4rem}