/* PTEK · la veste delle pagine interne.
   Le 64 pagine di contenuto hanno classi diverse l'una dall'altra ma la stessa ossatura:
   sezioni, un contenitore, titoli, griglie di schede, immagini, bottoni. Questo foglio veste
   l'ossatura, non le singole classi: una pagina nuova scritta allo stesso modo esce già a posto. */

body.interna { background: var(--neve); }

/* ── Sezioni ─────────────────────────────────────────────────── */
body.interna section { padding: clamp(3rem, 7vw, 5.5rem) 1.25rem; }
body.interna section > * { max-width: var(--largo); margin-left: auto; margin-right: auto; }
body.interna section .container, body.interna section [class$="-container"] { width: 100%; padding: 0; }
body.interna:not(.offerte) section:nth-of-type(even):not(.apertura):not(.invito) { background: var(--granito-100); }
body.interna section.invito { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: 0; background: transparent; }
body.interna .piede { margin-top: clamp(3rem, 7vw, 5rem); }

/* ── L'apertura: la prima sezione di ogni pagina ─────────────── */
body.interna .apertura {
  background: var(--notte-950); color: var(--su-scuro-2);
  background-image: radial-gradient(52rem 30rem at 100% 0%, rgba(208,60,26,.34), transparent 62%), radial-gradient(46rem 26rem at 0% 100%, rgba(31,95,168,.22), transparent 60%);
  padding-top: clamp(8rem, 12vw, 10.5rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
/* Quando l'apertura non è una <section> (il volantino la scrive come <div>). */
body.interna div.apertura { padding-left: 1.25rem; padding-right: 1.25rem; min-height: 0; }
body.interna div.apertura > * { max-width: var(--largo); margin-left: auto; margin-right: auto; }
body.interna .apertura:has(> [class*="media"]), body.interna .apertura:has(> [class*="visual"]), body.interna .apertura:has(> [class*="image"]) {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding-left: max(1.25rem, calc((100vw - var(--largo)) / 2)); padding-right: max(1.25rem, calc((100vw - var(--largo)) / 2));
}
body.interna .apertura:has(> [class*="media"]) > *, body.interna .apertura:has(> [class*="visual"]) > *, body.interna .apertura:has(> [class*="image"]) > * { max-width: none; margin: 0; }
body.interna .apertura h1 { color: var(--bianco); font-stretch: 118%; font-weight: 800; font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
body.interna .apertura h2, body.interna .apertura h3, body.interna .apertura strong { color: var(--bianco); }
body.interna .apertura p { color: var(--su-scuro-2); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 58ch; margin-top: 1rem; }
body.interna .apertura img { border-radius: var(--r-xl); width: 100%; max-height: 30rem; object-fit: cover; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
@media (max-width: 56rem) {
  body.interna .apertura:has(> [class*="media"]), body.interna .apertura:has(> [class*="visual"]), body.interna .apertura:has(> [class*="image"]) { grid-template-columns: 1fr; }
}

/* ── Testi ───────────────────────────────────────────────────── */
body.interna main h2, body.interna section h2 { font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; margin-bottom: 1rem; }
body.interna section h3 { font-weight: 750; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); line-height: 1.2; letter-spacing: -.02em; }
body.interna section h4 { font-weight: 700; font-size: 1.05rem; }
body.interna section p { margin-top: .75rem; }
body.interna section h2 + p, body.interna section h1 + p { margin-top: .9rem; }
body.interna section p, body.interna section li { max-width: 72ch; }
body.interna [class*="card"] p, body.interna article p, body.interna [class*="grid"] p { max-width: none; }
body.interna .center, body.interna [class*="center"] { text-align: center; }
body.interna .center p, body.interna h2.center + p { margin-left: auto; margin-right: auto; }
body.interna section a:not([class]) { color: var(--brace-500); text-underline-offset: 3px; font-weight: 600; }
body.interna section ul:not([class]), body.interna section ol:not([class]) { padding-left: 1.2rem; margin: .9rem 0 0; display: grid; gap: .45rem; }
body.interna section li::marker { color: var(--verde-600); }
/* Il grassetto prende il colore di dove sta: scurirlo sempre lo rendeva invisibile nei riquadri scuri
   delle offerte («da CHF 12'000» blu notte su blu notte, 4 ottobre 2026). */
body.interna strong { font-weight: 700; }
body.interna hr { border: 0; border-top: 1px solid var(--granito-200); margin: 2rem 0; }

/* Le etichette sopra i titoli */
body.interna [class*="kicker"], body.interna [class*="eyebrow"], body.interna [class$="-badge"], body.interna [class~="badge"], body.interna [class$="-tag"], body.interna [class~="tag"], body.interna .section-title > span {
  display: inline-block; font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-700); margin-bottom: .7rem;
}
body.interna .apertura div > span:first-child:not([class]):has(+ h1) { display: inline-block; font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .7rem; }
body.interna .apertura [class*="kicker"], body.interna .apertura [class*="eyebrow"], body.interna .apertura [class*="badge"], body.interna .apertura div > span:first-child:not([class]):has(+ h1) { color: var(--ambra-300); }

/* ── Griglie ─────────────────────────────────────────────────── */
body.interna [class*="grid"], body.interna [class*="gallery"]:not(section), body.interna [class$="-cards"], body.interna [class$="-list"]:not(ul):not(ol),
body.interna .catalogo-container, body.interna [class*="-steps"], body.interna [class*="-columns"] {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin-top: 1.75rem; list-style: none; padding: 0;
}
body.interna [class*="layout"]:not(section), body.interna [class*="split"]:not(section), body.interna [class*="two-col"] {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; margin-top: 1.75rem;
}
body.interna [class*="title-row"], body.interna [class*="heading"]:not(h1):not(h2):not(h3) { margin-bottom: .5rem; }

/* ── Schede ──────────────────────────────────────────────────── */
body.interna .card, body.interna [class*="-card"]:not([class*="floating"]), body.interna section article, body.interna a.link-card, body.interna [class*="-item"]:not(li):not(nav *),
body.interna [class*="-box"], body.interna [class*="-panel"], body.interna [class*="-step"]:not([class*="-steps"]) {
  display: block; background: var(--bianco); border: 1px solid var(--granito-200); border-radius: var(--r-xl); padding: 1.4rem; color: inherit; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow: hidden;
}
body.interna a.link-card:hover, body.interna a[class*="-card"]:hover, body.interna a[class*="-item"]:hover { transform: translateY(-3px); box-shadow: var(--ombra-xl); border-color: var(--notte-700); }
body.interna [class*="-card"] > img:first-child, body.interna a.link-card > img:first-child, body.interna article > img:first-child, body.interna [class*="-item"] > img:first-child {
  width: calc(100% + 2.8rem); max-width: none; margin: -1.4rem -1.4rem 1.1rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0;
}
body.interna .apertura [class*="-card"], body.interna .apertura .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--su-scuro-2); }
/* Le schede «galleggianti» delle vecchie aperture: qui stanno ferme, sotto la foto. */
body.interna [class*="floating"] { position: static; display: block; margin-top: .9rem; padding: 1rem 1.15rem; border-radius: var(--r-lg); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: var(--su-scuro); font-size: .95rem; }
body.interna section:not(.apertura) [class*="floating"] { background: var(--verde-100); border-color: rgba(47,125,59,.3); color: var(--testo); }

/* ── Immagini e video ────────────────────────────────────────── */
body.interna section img { height: auto; border-radius: var(--r-lg); }
body.interna [class*="gallery"] img, body.interna [class*="grid"] > img, body.interna [class*="grid"] > a > img, body.interna [class*="grid"] > figure > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
body.interna figure { margin: 0; }
body.interna figcaption { font-size: .9rem; color: var(--granito-500); margin-top: .5rem; }
body.interna iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-lg); }
/* I marchi. Attenzione: `[class*="logo"]` prende anche «catalogo-item», e le foto del catalogo uscivano
   grandi come un logo (4 ottobre 2026). Si cerca «-logo» o la parola intera. `node strumenti/classi.mjs`
   elenca cosa prende ogni frammento. */
body.interna [class*="-logo"]:not(.testata-logo):not(.piede-logo) img, body.interna [class~="logo"] img, body.interna img[class*="-logo"], body.interna img[class~="logo"] { width: auto; max-height: 4rem; aspect-ratio: auto; object-fit: contain; border-radius: 0; }

/* L'ingrandimento delle foto */
body.interna [class*="zoom-modal"], body.interna #zoomModal { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(10,22,34,.92); align-items: center; justify-content: center; padding: 1.5rem; cursor: zoom-out; }
body.interna [class*="zoom-modal"] img, body.interna #zoomModal img { max-width: min(96vw, 1200px); max-height: 92vh; width: auto; border-radius: var(--r-lg); }

/* ── Bottoni ─────────────────────────────────────────────────── */
body.interna section a[class*="btn"], body.interna .apertura a[class*="btn"], body.interna section button[class*="btn"], body.interna section [type="submit"], body.interna section a.cta, body.interna section a[class*="button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--carattere); font-stretch: 106%; font-weight: 650; font-size: 1rem; line-height: 1.1;
  min-height: 50px; padding: .6rem 1.4rem; border-radius: 999px; border: 1px solid transparent; text-decoration: none; cursor: pointer; text-align: center;
  background: var(--brace-500); color: var(--bianco); transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
}
body.interna section a[class*="btn"]:hover, body.interna section button[class*="btn"]:hover, body.interna section [type="submit"]:hover { background: var(--brace-600); box-shadow: var(--bagliore); transform: translateY(-1px); }
body.interna section a[class*="btn-light"], body.interna section a[class*="btn-secondary"], body.interna section a[class*="btn-outline"], body.interna section a.btn-call, body.interna section a[class*="btn-ghost"] { background: transparent; color: var(--inchiostro); border-color: var(--granito-200); }
body.interna section a[class*="btn-light"]:hover, body.interna section a[class*="btn-secondary"]:hover, body.interna section a.btn-call:hover { background: var(--granito-100); border-color: var(--inchiostro); box-shadow: none; }
body.interna .apertura a[class*="btn-light"], body.interna .apertura a[class*="btn-secondary"], body.interna .apertura a[class*="btn-outline"] { color: var(--bianco); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
body.interna section a.btn-whatsapp { background: var(--verde-600); }
body.interna section a.btn-whatsapp:hover { background: var(--verde-700); box-shadow: none; }
body.interna [class*="buttons"], body.interna [class*="actions"], body.interna [class*="cta-row"] { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
body.interna [class*="card"] [class*="buttons"] { margin-top: 1rem; }

/* ── Tabelle ─────────────────────────────────────────────────── */
body.interna table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; background: var(--bianco); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--granito-200); font-size: .97rem; }
body.interna th { text-align: left; background: var(--notte-900); color: var(--bianco); font-weight: 650; padding: .8rem 1rem; }
body.interna td { padding: .75rem 1rem; border-top: 1px solid var(--granito-200); vertical-align: top; }
body.interna [class*="table-wrap"], body.interna [class*="table-scroll"] { overflow-x: auto; }

/* ── Moduli ──────────────────────────────────────────────────── */
body.interna form { display: grid; gap: 1rem; margin-top: 1.5rem; max-width: 44rem; }
body.interna label { font-weight: 600; color: var(--inchiostro); display: grid; gap: .4rem; font-size: .97rem; }
body.interna input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), body.interna select, body.interna textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--inchiostro); background: var(--bianco); border: 1px solid var(--granito-200); border-radius: var(--r-md); padding: .8rem .95rem; transition: border-color .2s ease, box-shadow .2s ease;
}
body.interna input:focus, body.interna select:focus, body.interna textarea:focus { outline: none; border-color: var(--notte-700); box-shadow: 0 0 0 4px rgba(35,68,95,.16); }
body.interna textarea { min-height: 8rem; resize: vertical; }
body.interna input[type="checkbox"], body.interna input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--brace-500); }

/* ── Domande e risposte ──────────────────────────────────────── */
body.interna details { background: var(--bianco); border: 1px solid var(--granito-200); border-radius: var(--r-lg); padding: 1rem 1.2rem; margin-top: .6rem; }
body.interna summary { font-weight: 700; color: var(--inchiostro); cursor: pointer; }

/* I contatti in fondo alle pagine dei servizi */
body.interna .contact-icon { font-size: 1.6rem; }
body.interna .role { color: var(--granito-500); font-size: .92rem; margin-top: .1rem; }
body.interna .contact-link { display: inline-block; margin-top: .6rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--inchiostro); text-decoration: none; }

/* ── Aggiustamenti visti guardando le pagine (4 ottobre 2026) ─── */

/* L'apertura con la foto messa prima del titolo (contatti): testo a sinistra, foto a destra. */
body.interna .apertura:has(> img) {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding-left: max(1.25rem, calc((100vw - var(--largo)) / 2)); padding-right: max(1.25rem, calc((100vw - var(--largo)) / 2));
}
body.interna .apertura:has(> img) > * { max-width: none; margin: 0; }
body.interna .apertura > img { order: 2; }
@media (max-width: 56rem) { body.interna .apertura:has(> img) { grid-template-columns: 1fr; } body.interna .apertura > img { order: 0; } }

/* La foto in testa a una scheda larga quanto la pagina (i lavori) non diventa alta come uno schermo. */
body.interna [class*="-card"] > img:first-child, body.interna article > img:first-child { max-height: 26rem; }

/* Le file di etichette (incentivi, punti di forza): pillole, non un titolo. */
body.interna [class$="-tags"], body.interna [class$="-badges"], body.interna [class$="-points"] { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; padding: 0; list-style: none; }
body.interna [class$="-tags"] > *, body.interna [class$="-badges"] > *, body.interna [class$="-points"] > * { display: inline-flex; align-items: center; padding: .35rem .8rem; border-radius: 999px; background: var(--verde-100); color: var(--verde-700); font-size: .88rem; font-weight: 650; margin: 0; }
body.interna .apertura [class$="-tags"] > *, body.interna .apertura [class$="-badges"] > *, body.interna .apertura [class$="-points"] > * { background: rgba(255,255,255,.1); color: var(--su-scuro); border: 1px solid rgba(255,255,255,.16); }

/* La riga scritta sopra un titolo, quando la pagina la mette in uno `span` senza classe. */
body.interna section span:not([class]):has(+ h2) { display: block; font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-700); margin-bottom: .7rem; }

/* Dentro una scheda il titolo è di scheda, anche quando la pagina lo scrive come titolo di sezione. */
body.interna [class*="-card"]:not(section) h2, body.interna section article h2, body.interna [class*="-box"] h2 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.75rem); letter-spacing: -.02em; margin-bottom: .5rem; }
body.interna [class*="-card"] > a[class*="btn"], body.interna section article > a[class*="btn"], body.interna [class*="-box"] > a[class*="btn"], body.interna [class*="-info"] > a[class*="btn"] { margin-top: 1.1rem; }

/* I collegamenti in fila sotto un testo (telefono, WhatsApp, «tutti i contatti»): bottoni, non righe sottolineate. */
body.interna [class*="actions"] > a:not([class*="btn"]) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .55rem 1.25rem; border-radius: 999px; font-weight: 650; text-decoration: none;
  border: 1px solid var(--granito-200); color: var(--inchiostro); background: var(--bianco); font-variant-numeric: tabular-nums; transition: border-color .2s ease, background .2s ease;
}
body.interna [class*="actions"] > a:not([class*="btn"]):hover { border-color: var(--inchiostro); }
body.interna [class*="actions"] > a[class*="-main"], body.interna [class*="actions"] > a[class*="-primary"]:not([class*="btn"]) { background: var(--brace-500); border-color: var(--brace-500); color: var(--bianco); }
body.interna [class*="actions"] > a[class*="-main"]:hover { background: var(--brace-600); border-color: var(--brace-600); }
body.interna [class$="-trust"] { display: grid; gap: .7rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--granito-200); }
body.interna [class$="-trust"] strong { display: block; }

/* Il testo sotto il titolo d'apertura resta a sinistra anche quando la sezione non ha contenitore. */
body.interna .apertura > p, body.interna .apertura > h1 { max-width: var(--largo); }
@media (min-width: 56rem) { body.interna .apertura > p { padding-right: 38%; } }

/* I numeri dei passi: un tondo, non una scheda. */
body.interna [class*="step-number"], body.interna [class*="-number"], body.interna [class*="-num"]:not([class*="number"]) {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--verde-100); color: var(--verde-700); font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: .8rem;
}

/* Schede prodotto: foto e descrizione affiancate, foto intere su fondo bianco. */
body.interna .prodotto-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
body.interna .prodotto-img img { width: 100%; max-height: 34rem; object-fit: contain; background: var(--bianco); border: 1px solid var(--granito-200); border-radius: var(--r-xl); padding: 1rem; }
@media (min-width: 56rem) { body.interna .prodotto-img { position: sticky; top: 6.5rem; } }
body.interna .specifiche h3 { margin-top: 1.75rem; }
body.interna .specifiche table { margin-top: .75rem; }
body.interna .prodotto-info > a[class*="btn"] { margin-top: 1.5rem; }
/* Le foto del catalogo sono ambienti, non ritagli su fondo bianco: riempiono la scheda. */
body.interna .catalogo-item > img:first-child, body.interna .variante-card > img:first-child { object-fit: cover; aspect-ratio: 4 / 3; }
body.interna .catalogo-container { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
body.interna .variante-card { cursor: pointer; }
body.interna .variante-card:hover, body.interna .variante-card.active, body.interna .variante-card.selected { border-color: var(--brace-500); box-shadow: var(--ombra-lg); }
body.interna .colori-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .75rem; margin-top: 1.5rem; }
body.interna .colori-container img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--bianco); border: 1px solid var(--granito-200); border-radius: var(--r-lg); padding: .4rem; cursor: zoom-in; }
body.interna td.label { color: var(--granito-500); width: 45%; }
body.interna td.value { color: var(--inchiostro); font-weight: 650; font-variant-numeric: tabular-nums; }

/* «Scopri» dentro una scheda che è già tutta un collegamento: una riga di testo con la freccia. */
body.interna a span[class*="btn"] { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font-weight: 700; color: var(--brace-500); }
body.interna a span[class*="btn"]::after { content: "→"; transition: transform .2s ease; }
body.interna a:hover span[class*="btn"]::after { transform: translateX(3px); }

/* I collegamenti «Scopri» in fondo alle schede. */
body.interna a.link-card > span:last-child, body.interna [class*="-card"] > a:last-child:not([class*="btn"]) { display: inline-block; margin-top: .8rem; font-weight: 700; color: var(--brace-500); }

/* ── La pagina delle offerte (css/offerte.css è il suo foglio, ritinto da rivesti.mjs) ─────────── */
/* I titoli tutti in maiuscolo erano della veste di prima. */
body.interna h1, body.interna h2, body.interna h3 { text-transform: none; }
/* Il riquadro chiaro sopra la foto del volantino: testo scuro, non il bianco dell'apertura. */
body.interna .apertura .flyer-hero-offer, body.interna .apertura .flyer-hero-offer strong, body.interna .apertura .flyer-hero-offer small { color: var(--inchiostro); }
body.interna .apertura .flyer-hero-offer span { color: var(--brace-600); }
/* La copertina del volantino porta una scritta: si vede intera, non ritagliata. */
body.interna .apertura .flyer-hero-media img { object-fit: contain; max-height: none; height: auto; aspect-ratio: auto; background: var(--bianco); }
/* I riquadri scuri delle offerte restano scuri: la regola delle schede li faceva bianchi, col testo chiaro sopra. */
body.interna section article[class*="-dark"], body.interna [class*="-panel-dark"] { background: var(--notte-900); border-color: rgba(255,255,255,.12); color: var(--su-scuro); }
body.interna section article[class*="-dark"] h2, body.interna section article[class*="-dark"] h3 { color: var(--bianco); }

/* ── Tre punti dove il testo spariva sul fondo, trovati misurando il contrasto di tutte le pagine ── */
/* Il riquadro «In breve» della privacy è scuro: la regola delle schede lo faceva bianco, col testo bianco. */
body.interna .privacy-summary-card.privacy-summary-card { background: var(--notte-900); border-color: transparent; color: var(--su-scuro); } /* classe ripetuta: deve pesare più della regola delle schede */
body.interna .privacy-summary-card h3 { color: var(--bianco); }
body.interna .privacy-summary-card strong { color: var(--ambra-300); }
/* Il cartellino dello sconto sopra la foto della promozione: fondo bianco, quindi testo scuro. */
body.interna .hybrid-offer-card.hybrid-offer-card { color: var(--testo); }
body.interna .hybrid-offer-card strong { color: var(--brace-600); }
body.interna .hybrid-offer-card span { color: var(--testo); }
/* Le due schede con la foto sotto il testo (sostituzioni): la riga sopra il titolo sta su fondo scuro. */
body.interna .replacement-path-grid .section-kicker { color: var(--ambra-300); }
body.interna .replacement-path-grid a { border-radius: var(--r-xl); text-decoration: none; }

/* ── Il percorso in cima alla pagina (Home / Servizi / Stufe a pellet) ─────────────────────────── */
body.interna .briciole { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; margin-bottom: 1.4rem; font-size: .86rem; color: var(--su-scuro-2); grid-column: 1 / -1; order: -1; }
/* «.apertura» in più nel selettore: deve pesare più della regola che colora di rosso i collegamenti nel testo. */
body.interna .apertura .briciole a { color: var(--su-scuro-2); text-decoration: none; font-weight: 500; }
body.interna .apertura .briciole a:hover { color: var(--bianco); text-decoration: underline; text-underline-offset: 3px; }
body.interna .briciole [aria-current] { color: var(--bianco); font-weight: 600; }
body.interna .briciole i { font-style: normal; opacity: .5; }

/* ── L'apertura con la foto, seconda versione: foto grande, più aria, meno cose ─────────────────────
   Il founder, 5 ottobre 2026: «immagine più grande e più minimal, sensazione di design studiato nei minimi
   dettagli». La foto prende più di metà schermata e arriva quasi al bordo; il riquadro che stava sotto
   entra dentro la foto, in basso, come una didascalia di vetro; il titolo è più raccolto. (foto grande) */
body.interna .apertura [class*="media"] { position: relative; }
body.interna .apertura [class*="media"] > img {
  display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 1.75rem;
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
body.interna .apertura [class*="media"] > [class*="floating"] {
  position: absolute; left: 1rem; bottom: 1rem; right: auto; max-width: min(21rem, calc(100% - 2rem)); margin: 0; padding: .85rem 1.05rem;
  background: rgba(10,22,34,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 1.1rem; font-size: .92rem; line-height: 1.45; color: var(--su-scuro);
}
body.interna .apertura [class*="media"] > [class*="floating"] strong { display: block; margin-bottom: .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ambra-300); }
body.interna .apertura:has(> [class*="media"]) h1 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.5rem); font-stretch: 112%; line-height: 1.06; max-width: 16ch; }
body.interna .apertura:has(> [class*="media"]) p { max-width: 42ch; }
body.interna .apertura:has(> [class*="media"]) [class*="buttons"] { margin-top: 2rem; }
@media (min-width: 56rem) {
  body.interna .apertura:has(> [class*="media"]) {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center;
    padding-top: clamp(9.5rem, 13vw, 12rem); padding-bottom: clamp(4.5rem, 8vw, 7rem);
    padding-right: max(1.25rem, calc((100vw - var(--largo)) / 2 - 2.5rem));
  }
  body.interna .apertura [class*="media"] > img { min-height: clamp(24rem, 40vw, 36rem); }
}
@media (max-width: 56rem) {
  body.interna .apertura [class*="media"] > img { aspect-ratio: 4 / 3; border-radius: 1.4rem; }
}

/* ── Nessuna foto tagliata nell'apertura (foto intera) ───────────────────────────────────────────────
   Il founder, 5 ottobre 2026 sera, guardando la pagina delle offerte: «il volantino con il titolo flyer
   digitale è tagliato, pessimo errore». La regola qui sopra dava a tutte le foto d'apertura la stessa forma
   (5:4) e ritagliava quello che avanzava: va bene per una fotografia, non per un volantino, un logo o uno
   striscione con delle scritte. Misurato su tutte e 20 le aperture: si vedeva dal 42% all'89% della foto.
   Ora ogni foto tiene la SUA forma e si vede intera; il riquadro si stringe attorno alla foto, così la
   didascalia di vetro resta dentro anche quando la foto è alta e stretta. */
body.interna .apertura [class*="media"] { width: fit-content; max-width: 100%; margin-inline: auto; }
body.interna .apertura [class*="media"] > img {
  width: auto; max-width: 100%; height: auto; min-height: 0; max-height: min(34rem, 72vh); aspect-ratio: auto; object-fit: contain;
}
@media (min-width: 56rem) {
  body.interna .apertura [class*="media"] > img { min-height: 0; max-height: min(36rem, 76vh); }
}
@media (max-width: 56rem) {
  body.interna .apertura [class*="media"] > img { aspect-ratio: auto; }
}

/* ── La pagina delle offerte: tre pezzi che le regole generali delle schede rompevano ────────────────
   1. La scheda della caldaia Polygon ha foto a sinistra e testo a destra. La regola generale delle schede
      la rimetteva in colonna e la foto diventava un blocco grigio alto 1200 punti.
   2. «Ingrandisci» stava sopra il titolo dei volantini. Ora è una riga sotto il volantino.
   3. Il riquadro «Fino al -30%» copriva la fascia «Preventivo gratuito» del volantino. Ora sta sotto. */
body.offerte .heating-product-card.heating-product-card { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: stretch; padding: 0; overflow: hidden; }
body.offerte .heating-product-card.heating-product-card > img:first-child {
  width: 100%; max-width: 100%; height: 100%; min-height: 0; max-height: none; margin: 0; padding: 0; aspect-ratio: auto;
  object-fit: cover; object-position: 71% 55%; border-radius: 0;
}
body.offerte .heating-product-card > .hybrid-model-content { padding: clamp(1.4rem, 3vw, 2.2rem); }
@media (max-width: 56rem) {
  body.offerte .heating-product-card.heating-product-card { grid-template-columns: 1fr; }
  body.offerte .heating-product-card.heating-product-card > img:first-child { height: auto; aspect-ratio: 16 / 10; }
}
body.offerte .hybrid-zoom-hint.hybrid-zoom-hint {
  position: static; display: block; left: auto; top: auto; padding: .7rem 1rem; border: 0; border-radius: 0; box-shadow: none;
  background: var(--notte-800, #0F2233); color: var(--su-scuro, #E8EDF2); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; cursor: zoom-in;
}
body.offerte .hybrid-offer-card.hybrid-offer-card {
  position: static; left: auto; right: auto; bottom: auto; max-width: none; margin: 0; padding: 1rem 1.2rem; border: 0; border-top: 1px solid var(--granito-200, #E3DFD7); border-radius: 0; box-shadow: none;
}

/* Nell'apertura delle offerte il riquadro «Promo attive» stava sopra il volantino: ora sta sotto. */
body.offerte .apertura [class*="media"] > .flyer-hero-offer { position: static; left: auto; bottom: auto; margin: 1rem 0 0; max-width: none; }

/* Su telefono la didascalia di vetro sta sotto la foto, non sopra (didascalia sotto): su una foto bassa e
   larga, come lo striscione di SolarFocus, la copriva quasi tutta (113 punti su 124). */
@media (max-width: 56rem) {
  body.interna .apertura [class*="media"] > [class*="floating"] { position: static; left: auto; bottom: auto; max-width: none; margin: .75rem 0 0; }
}

/* ── La luce della brace sul blu (luce della brace) ───────────────────────────────────────────────────
   Il founder, 6 ottobre 2026: «migliora la sfumatura del rosso sul blu nelle pagine, potenziandole lo
   stile e l'identità». Il rosso pieno steso sul blu notte dava un marrone spento. Una brace non è rossa:
   è ambra al centro e rossa ai bordi. Quindi il bagliore parte ambra, passa al rosso e si spegne presto;
   sul blu l'arancio è il colore opposto e resta acceso. In basso un filo di brace chiude l'apertura. */
body.interna .apertura {
  position: relative;
  background-color: var(--notte-950);
  background-image:
    radial-gradient(46rem 27rem at 90% -12%, rgba(255,168,88,.42), rgba(240,104,60,.25) 30%, rgba(208,60,26,.10) 55%, transparent 72%),
    radial-gradient(64rem 36rem at 112% 18%, rgba(208,60,26,.13), transparent 60%),
    radial-gradient(50rem 30rem at -8% 108%, rgba(52,128,204,.20), transparent 62%),
    linear-gradient(180deg, #0A1622 0%, #0C1C2D 100%);
}
body.interna .apertura::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,178,92,.0) 8%, rgba(255,178,92,.7) 38%, rgba(233,88,58,.9) 62%, rgba(208,60,26,0) 92%, transparent 100%);
}

/* I numeri dei passi (preventivi, «Dal primo contatto alla soluzione giusta»). Il nome finisce in
   «-number» ma contiene anche «-step», e la regola generale delle schede lo prendeva per una scheda:
   riquadro bianco, margine interno di 22 punti, il numero spinto in un angolo. Qui torna un cerchio, col
   numero al centro e i colori della brace. Il selettore è scritto due volte per pesare più della regola
   delle schede. */
body.interna [class*="step-number"][class*="step-number"] {
  display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; margin: 0 0 1rem; border: 0; border-radius: 50%; overflow: visible;
  background: linear-gradient(140deg, var(--ambra-300) 0%, var(--brace-400) 45%, var(--brace-500) 100%); color: var(--bianco);
  font-stretch: 112%; font-weight: 800; font-size: 1.1rem; line-height: 1; font-variant-numeric: tabular-nums; text-align: center;
  box-shadow: 0 8px 20px rgba(208,60,26,.28), inset 0 1px 0 rgba(255,255,255,.3);
}

/* In fondo a ogni pagina: un solo bottone rosso (un solo bottone rosso). Le regole delle pagine interne
   coloravano di rosso tutti e tre i bottoni dell'invito finale e anche il collegamento alle offerte, che
   rosso sul blu si leggeva male. L'azione principale è una, prenotare: le altre due tornano di vetro e il
   collegamento torna ambra. Trovato nel ripasso del 6 ottobre 2026. */
body.interna .chiusura a.btn.btn-vetro[class] { background: rgba(255,255,255,.10); color: var(--bianco); border: 1px solid rgba(255,255,255,.30); box-shadow: none; }
body.interna .chiusura a.btn.btn-vetro[class]:hover { background: rgba(255,255,255,.20); transform: translateY(-1px); }
body.interna .chiusura .chiusura-offerte a[href] { color: var(--ambra-300); }

/* ── Nessuna foto ritagliata nelle gallerie, nei lavori e nel catalogo (foto intere ovunque) ──────────
   Il founder, 6 ottobre 2026: «sistema anche le foto ritagliate nel catalogo e nei lavori». Tutte le foto
   stavano in riquadri uguali (4:3) e quello che avanzava spariva: nel catalogo si vedeva fino al 45% del
   prodotto, nei lavori fino al 34% della foto. Ora ogni foto tiene la sua forma. «body.interna» è scritto
   due volte per pesare più delle regole generali più sopra. */
body.interna.interna [class*="gallery"] img,
body.interna.interna [class*="grid"] > img,
body.interna.interna [class*="grid"] > a > img,
body.interna.interna [class*="grid"] > figure > img { aspect-ratio: auto; height: auto; object-fit: contain; }
body.interna.interna [class*="gallery"]:not(section) { align-items: start; }
/* I lavori: foto di cantiere, quasi tutte in verticale. A colonne, come un muro di foto, ognuna intera. */
body.interna.interna .lavoro-fasi-grid { display: block; columns: 4 12.5rem; column-gap: 1rem; }
body.interna.interna .lavoro-fasi-grid > img { display: block; width: 100%; margin: 0 0 1rem; break-inside: avoid; border-radius: var(--r-lg); }
/* Le consegne del pellet: due foto orizzontali e due verticali. In tre colonne le orizzontali stanno una sopra l'altra e le verticali accanto, tutte intere e senza buchi (20 ottobre 2026). */
body.interna.interna .pellet-truck-gallery, body.interna.interna .pellet-delivery-gallery { display: block; columns: 3 14rem; column-gap: 1rem; }
body.interna.interna .pellet-truck-gallery > img, body.interna.interna .pellet-delivery-gallery > img { display: block; width: 100%; margin: 0 0 1rem; break-inside: avoid; }
body.interna.interna .pellet-delivery-gallery.galleria-due { columns: auto; display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
body.interna.interna .pellet-delivery-gallery.galleria-due > img { margin: 0; }
@media (max-width: 40rem) { body.interna.interna .pellet-delivery-gallery.galleria-due { grid-template-columns: 1fr; } }
/* Il catalogo: il prodotto si vede intero, su fondo bianco, nel suo riquadro. */
body.interna.interna .catalogo-item > img:first-child,
body.interna.interna .variante-card > img:first-child,
body.interna.interna [class*="feature-card"] > img:first-child,
body.interna.interna .hybrid-model-card:not(.heating-product-card) > img:first-child { object-fit: contain; background: #fff; }

/* La foto in cima a un riquadro semplice (articolo senza nome di scheda) tiene la sua forma: nei sussidi
   se ne vedeva l'89%. Le schede del catalogo restano nel loro riquadro, col prodotto intero. */
body.interna.interna section article:not([class*="item"]):not([class*="card"]) > img:first-child { aspect-ratio: auto; height: auto; max-height: none; object-fit: contain; }

/* I lavori: la foto di copertina del lavoro sta a sinistra del racconto, intera (copertina del lavoro).
   Lasciata alla sua forma e larga quanto la scheda diventava alta due schermate. */
body.interna.interna .lavoro-progetto-cover img { display: block; width: 100%; height: auto; aspect-ratio: auto; max-height: none; object-fit: contain; margin: 0; border-radius: var(--r-lg); }
@media (min-width: 56rem) {
  body.interna.interna .lavoro-progetto-card { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
}
@media (max-width: 56rem) {
  body.interna.interna .lavoro-progetto-cover img { width: auto; max-width: 100%; max-height: 24rem; margin: 0 auto 1rem; }
  body.interna.interna .lavoro-fasi-grid { columns: 2; }
}

/* ── Le schede di solo testo, meno uguali fra loro (schede meno uguali) ───────────────────────────────
   Il founder, 6 ottobre 2026: «nella prima parte del catalogo le card sono monotone, dobbiamo dare
   all'occhio modo di seguire bene e non annoiarsi». Tre cose, valide su tutto il sito:
   1. la prima scheda di un gruppo, quella che introduce, è scura con la luce della brace: l'occhio parte da lì;
      vale solo per le schede di solo testo: una scheda con dentro un bottone (i contatti) resta chiara,
      altrimenti il bottone «Chiama» di Paolo finiva nero su blu (trovato dal founder il 6 ottobre 2026);
   2. le schede che portano a una pagina hanno in cima un filo di brace che si allunga passandoci sopra
      (la scritta «Scopri» con la freccia c'era già);
   3. i marchi hanno il loro logo ufficiale. */
body.interna.interna .card:first-child:not(.link-card):not(:has(a, button)):has(~ .card) {
  background: linear-gradient(160deg, #0A1622 0%, #0E2134 100%); border-color: transparent; color: var(--su-scuro-2); position: relative; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,190,120,.22), 0 18px 44px rgba(10,22,34,.18);
}
body.interna.interna .card:first-child:not(.link-card):not(:has(a, button)):has(~ .card)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(18rem 13rem at 100% -10%, rgba(255,168,88,.42), rgba(240,104,60,.22) 34%, transparent 70%), radial-gradient(16rem 12rem at -10% 110%, rgba(52,128,204,.20), transparent 66%);
}
body.interna.interna .card:first-child:not(.link-card):not(:has(a, button)):has(~ .card) :is(h2, h3, h4, strong) { color: var(--bianco); }
body.interna.interna .card:first-child:not(.link-card):not(:has(a, button)):has(~ .card) p { color: var(--su-scuro-2); }

body.interna.interna a.card.link-card { position: relative; }
body.interna.interna a.card.link-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--ambra-300), var(--brace-400) 55%, var(--brace-500));
  transform: scaleX(.18); transform-origin: left; transition: transform .35s ease;
}
body.interna.interna a.card.link-card:hover::before, body.interna.interna a.card.link-card:focus-visible::before { transform: scaleX(1); }

/* I marchi, col logo vero. Di iDM non abbiamo il file: resta il nome finché PTEK non ce lo manda. */
body.interna.interna a.card.link-card[href$="nobis/nobis.html"] h3, body.interna.interna a.card.link-card[href$="caldaie/solarfocus.html"] h3 { display: flex; flex-direction: column; gap: .9rem; }
body.interna.interna a.card.link-card[href$="nobis/nobis.html"] h3::before, body.interna.interna a.card.link-card[href$="caldaie/solarfocus.html"] h3::before {
  content: ""; display: block; height: 3.4rem; background: left center / contain no-repeat;
}
body.interna.interna a.card.link-card[href$="nobis/nobis.html"] h3::before { background-image: url(../immagini/nobis-logo.png); width: 10rem; height: 5.2rem; background-size: 15.2rem 15.2rem; background-position: center; }
body.interna.interna a.card.link-card[href$="caldaie/solarfocus.html"] h3::before { background-image: url(../immagini/solar-focus-logo.png); height: 5.2rem; }

/* Un logo dentro una scheda del catalogo (i manuali hanno il logo PTEK) sta al centro, con aria attorno. */
body.interna.interna .catalogo-item > img:first-child[src*="logo"] { object-fit: contain; object-position: center; padding: 1.6rem 2.2rem; background: #fff; }