/*
 * Rubino Prefabbricati — foglio di stile del sito pubblico.
 *
 * Il protagonista è il materiale: fotografie di pavimentazioni posate a
 * tutta larghezza e titoli in Archivo molto stretto, alti come pilastri
 * prefabbricati. Le fasce scure (antracite, la tinta della vecchia testata)
 * si alternano al grigio freddo del calcestruzzo. Il rosso del logo è
 * riservato ai comandi e alla cornice sfalsata del marchio, che compare
 * attorno alle immagini quando le si punta.
 *
 * Nessuna dipendenza e nessuna build.
 */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('../fonts/archivo-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;
}

:root {
    --rubino: #D3002D;
    --rubino-scuro: #A60024;
    --salmone: #EFAE93;
    --antracite: #1F2029;
    --grafite: #2B2C36;
    --grafite-chiara: #3A3B47;
    --calcestruzzo: #E4E4E0;
    --pagina: #F1F1EE;
    --bordo: #D6D6D1;
    --acciaio: #59636E;
    --nebbia: #B4B6BF;
    --inchiostro: #17181F;
    --bianco: #FFFFFF;

    --carattere: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --stretto: 64%;
    --largo: 112%;
    --larghezza: 1280px;
    --margine: clamp(16px, 4vw, 48px);
    --testata: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--testata) + 64px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--carattere);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--inchiostro);
    background: var(--pagina);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--rubino-scuro); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--rubino); }
:focus-visible { outline: 3px solid var(--rubino); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.05; margin: 0; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
    position: absolute; left: 16px; top: -100px; z-index: 200;
    background: var(--bianco); color: var(--inchiostro); padding: 10px 16px; font-weight: 600;
}
.salta:focus { top: 12px; }
main:focus { outline: none; }

.contenitore {
    width: 100%;
    max-width: calc(var(--larghezza) + 2 * var(--margine));
    margin: 0 auto;
    padding: 0 var(--margine);
}

/* ------------------------------------------------------------------ titoli
 * Una sola voce tipografica per i titoli: Archivo stretto e pesante.
 */
.titolo-sezione,
.gruppo-titolo,
.intestazione-titolo,
.apertura-titolo,
.scheda-nome,
.riquadro-titolo,
.indice-nome,
.titolo-blocco,
.novita-titolo,
.tessera-pavimento-nome {
    font-stretch: var(--stretto);
    font-weight: 800;
    letter-spacing: -.005em;
    line-height: .92;
    /* Una parola non si spezza mai: è il corpo ad adattarsi (vedi sotto). */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

/*
 * Corpo dei titoli grandi. Ognuno porta in --em-parola la larghezza, in em,
 * della sua parola più lunga (filtro Twig em_parola); il corpo scelto dal
 * clamp viene ridotto quanto basta perché quella parola stia nel
 * contenitore. «Mattoncino» nella colonna della scheda o «Fotocatalitici»
 * su un telefono restano interi.
 */
.apertura-testo,
.intestazione-interno,
.scheda-testata-testo,
.riquadro-testo,
.indice-categorie li,
.tessera-pavimento,
.novita-testi { container-type: inline-size; }
.indivisibile { white-space: nowrap; }
.titolo-sezione { font-size: clamp(2.8rem, 6.4vw, 5.6rem); }
.titolo-chiaro { color: var(--bianco); }
.gruppo-titolo { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 24px; }
.titolo-blocco { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 20px; }

.sezione-intestazione {
    display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap;
    gap: 16px 48px; margin-bottom: clamp(32px, 5vw, 56px);
}
.sezione-intestazione p { max-width: 36ch; margin: 0; font-size: 1.15rem; color: var(--acciaio); }

/* ------------------------------------------------------------------ pulsanti */
.pulsante {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px;
    background: var(--rubino); color: var(--bianco);
    font-weight: 600; font-stretch: var(--largo); font-size: 1rem;
    text-decoration: none; border: 0;
    transition: background-color .15s;
}
.pulsante:hover { background: var(--rubino-scuro); color: var(--bianco); }
.pulsante-chiaro { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.pulsante-chiaro:hover { background: var(--bianco); color: var(--inchiostro); }

.documento {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: var(--inchiostro); color: var(--bianco);
    text-decoration: none;
    font-weight: 600; font-size: .92rem; font-stretch: 105%;
    white-space: nowrap;
    transition: background-color .15s;
}
.documento:hover { background: var(--rubino); color: var(--bianco); }
.documento-icona { flex: none; }

/* ------------------------------------------------------------------ testata */
.testata {
    position: sticky; top: 0; z-index: 100;
    background: var(--antracite);
    color: var(--bianco);
    transition: background-color .25s;
}
/* In home la barra galleggia sulla foto e diventa piena scorrendo. */
.testata-trasparente .testata {
    position: fixed; left: 0; right: 0;
    background: linear-gradient(rgba(23, 24, 31, .55), rgba(23, 24, 31, 0));
}
.testata-trasparente .testata.piena { background: var(--antracite); }

.testata-interno {
    max-width: calc(var(--larghezza) + 2 * var(--margine));
    margin: 0 auto;
    padding: 0 var(--margine);
    height: var(--testata);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.marchio img { width: 150px; height: auto; }

.menu-voci { list-style: none; display: flex; align-items: center; gap: 2px; }
.menu-voci > li { position: relative; }
.menu-voci > li > a {
    display: block; padding: 10px 14px;
    color: var(--bianco); text-decoration: none;
    font-weight: 500; font-stretch: 105%; font-size: .98rem;
}
.menu-voci > li > a:hover,
.menu-voci > li > a[aria-current="page"],
.menu-voci > li > a.attivo { color: var(--salmone); }
.menu-voci > li > a.voce-contatti { background: var(--rubino); margin-left: 10px; padding: 10px 18px; }
.menu-voci > li > a.voce-contatti:hover { background: var(--rubino-scuro); color: var(--bianco); }

.con-sottomenu { display: flex; align-items: center; }
.con-sottomenu > a { padding-right: 4px !important; }
.apri-sottomenu {
    background: none; border: 0; color: var(--bianco); padding: 10px 8px 10px 2px; cursor: pointer; display: inline-flex;
}
.apri-sottomenu svg { transition: transform .15s; }
.con-sottomenu.aperto .apri-sottomenu svg { transform: rotate(180deg); }

.sottomenu {
    position: absolute; top: calc(100% + 8px); left: -16px;
    width: 600px;
    background: var(--antracite); color: var(--bianco);
    padding: 24px 28px;
    border-top: 3px solid var(--rubino);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
    visibility: hidden; opacity: 0; transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.con-sottomenu:hover .sottomenu,
.con-sottomenu:focus-within .sottomenu,
.con-sottomenu.aperto .sottomenu {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .15s, transform .15s;
}
/* Ponte invisibile fra voce e pannello: il puntatore non lo perde passando. */
.sottomenu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.sottomenu > ul { list-style: none; columns: 2; column-gap: 32px; }
.sottomenu li { break-inside: avoid; }
.sottomenu a { display: block; padding: 6px 0; color: var(--bianco); text-decoration: none; font-weight: 500; }
.sottomenu a:hover, .sottomenu a[aria-current="page"] { color: var(--salmone); }
.sottovoci { list-style: none; margin: 0 0 8px; padding: 0 0 0 14px; border-left: 1px solid var(--grafite-chiara); }
.sottovoci a { font-weight: 400; font-size: .92rem; padding: 3px 0; color: var(--nebbia); }

.apri-menu {
    display: none;
    background: none; border: 1px solid rgba(255, 255, 255, .35); color: var(--bianco);
    padding: 8px 12px; gap: 10px; align-items: center; font: inherit; font-weight: 600; cursor: pointer;
}
.apri-menu-icona, .apri-menu-icona span, .apri-menu-icona::before, .apri-menu-icona::after {
    display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s, opacity .2s;
}
.apri-menu-icona { background: none; height: 14px; }
.apri-menu-icona::before, .apri-menu-icona::after { content: ''; position: absolute; left: 0; }
.apri-menu-icona::before { top: 0; }
.apri-menu-icona span { top: 6px; }
.apri-menu-icona::after { top: 12px; }
.apri-menu[aria-expanded="true"] .apri-menu-icona span { opacity: 0; }
.apri-menu[aria-expanded="true"] .apri-menu-icona::before { transform: translateY(6px) rotate(45deg); }
.apri-menu[aria-expanded="true"] .apri-menu-icona::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
    .apri-menu { display: inline-flex; }
    .menu {
        position: fixed; left: 0; right: 0; top: var(--testata); bottom: 0;
        background: var(--antracite); overflow-y: auto;
        padding: 8px var(--margine) 32px; display: none;
    }
    .menu.aperto { display: block; }
    .testata-trasparente .testata:has(.menu.aperto) { background: var(--antracite); }
    .menu-voci { flex-direction: column; align-items: stretch; gap: 0; }
    .menu-voci > li { border-bottom: 1px solid var(--grafite-chiara); }
    .menu-voci > li > a { padding: 14px 0; font-size: 1.6rem; font-stretch: var(--stretto); font-weight: 700; }
    .menu-voci > li > a.voce-contatti { margin: 16px 0 0; text-align: center; font-size: 1.1rem; font-stretch: 105%; }
    .con-sottomenu { flex-wrap: wrap; justify-content: space-between; }
    .apri-sottomenu { padding: 14px 4px; }
    .sottomenu {
        position: static; width: 100%; box-shadow: none; border-top: 0; padding: 0 0 12px;
        display: none; visibility: visible; opacity: 1; transform: none; transition: none;
    }
    .con-sottomenu:hover .sottomenu, .con-sottomenu:focus-within .sottomenu { display: none; }
    .con-sottomenu.aperto .sottomenu { display: block; }
    .sottomenu > ul { columns: 1; }
    .sottomenu a { color: #D9DADF; padding: 8px 0 8px 12px; }
    body.menu-aperto { overflow: hidden; }
}

/* ------------------------------------------------------------------ apertura (home) */
.apertura {
    position: relative;
    min-height: min(100svh, 940px);
    display: flex; align-items: flex-end;
    background: var(--antracite);
    color: var(--bianco);
    overflow: hidden;
}
.apertura-sfondo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    animation: avvicina 14s ease-out both;
}
@keyframes avvicina { from { transform: scale(1.08); } to { transform: scale(1); } }
.apertura::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(23, 24, 31, .92) 0%, rgba(23, 24, 31, .7) 45%, rgba(23, 24, 31, .15) 100%),
        linear-gradient(0deg, rgba(23, 24, 31, .75) 0%, rgba(23, 24, 31, 0) 50%);
}
.apertura-interno {
    position: relative; z-index: 1;
    width: 100%;
    max-width: calc(var(--larghezza) + 2 * var(--margine));
    margin: 0 auto;
    padding: calc(var(--testata) + 64px) var(--margine) clamp(40px, 7vw, 88px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    gap: 40px clamp(32px, 6vw, 96px);
    align-items: end;
}
.apertura-luogo {
    color: var(--salmone);
    font-weight: 600; font-stretch: var(--largo); font-size: 1.05rem;
    margin-bottom: 18px;
}
.apertura-titolo {
    font-size: min(clamp(3.4rem, 8vw, 8rem), calc(100cqi / var(--em-parola, .01)));
    max-width: 14ch;
    margin-bottom: 36px;
    text-wrap: balance;
}
.apertura-azioni { display: flex; flex-wrap: wrap; gap: 12px; }

.novita-intestazione {
    font-size: 1rem; font-weight: 600; font-stretch: var(--largo);
    color: var(--salmone); margin-bottom: 12px;
    display: flex; align-items: center; gap: 12px;
}
.novita-intestazione::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .3); }
.novita-elenco { list-style: none; display: grid; gap: 12px; }
.novita-scheda {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center;
    background: var(--bianco); color: var(--inchiostro);
    padding: 10px; text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
a.novita-scheda:hover { transform: translateX(-6px); color: var(--inchiostro); box-shadow: 6px 0 0 var(--rubino); }
.novita-scheda img { width: 112px; height: 84px; object-fit: cover; background: var(--calcestruzzo); }
.novita-testi { display: flex; flex-direction: column; gap: 2px; }
.novita-occhiello { font-size: .8rem; font-weight: 600; font-stretch: var(--largo); color: var(--rubino-scuro); }
.novita-titolo { font-size: min(1.6rem, calc(100cqi / var(--em-parola, .01))); line-height: 1; }
.novita-descrizione { font-size: .88rem; line-height: 1.35; color: var(--acciaio); }

@media (max-width: 900px) {
    .apertura-interno { grid-template-columns: minmax(0, 1fr); }
    .apertura::after { background: linear-gradient(0deg, rgba(23, 24, 31, .95) 0%, rgba(23, 24, 31, .6) 60%, rgba(23, 24, 31, .35) 100%); }
}

/* ------------------------------------------------------------------ prodotti (home) */
.prodotti { padding: clamp(72px, 10vw, 136px) 0 clamp(64px, 8vw, 112px); }

.mosaico {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-auto-rows: clamp(180px, 17vw, 230px);
    gap: 16px;
    margin-bottom: clamp(48px, 7vw, 88px);
}
.mosaico-voce:first-child { grid-row: span 3; }
.mosaico[data-riquadri="1"] { grid-template-columns: minmax(0, 1fr); }
.mosaico[data-riquadri="1"] .mosaico-voce:first-child,
.mosaico[data-riquadri="2"] .mosaico-voce:first-child { grid-row: span 2; }
.mosaico[data-riquadri="2"] .mosaico-voce:last-child { grid-row: span 2; }

.mosaico-voce { position: relative; }
/* La cornice rossa del logo, sfalsata dietro la foto. */
.mosaico-voce::before {
    content: ''; position: absolute; inset: 0;
    border: 5px solid var(--rubino);
    opacity: 0;
    transition: transform .25s ease-out, opacity .2s;
}
.mosaico-voce:hover::before,
.mosaico-voce:focus-within::before { opacity: 1; transform: translate(-12px, -12px); }

.riquadro {
    position: relative; display: block; height: 100%;
    overflow: hidden; color: var(--bianco); text-decoration: none;
    background: var(--antracite);
}
.riquadro img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease-out;
}
.riquadro::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(23, 24, 31, .88) 0%, rgba(23, 24, 31, .15) 55%, rgba(23, 24, 31, 0) 100%);
}
.riquadro:hover img { transform: scale(1.04); }
.riquadro:hover { color: var(--bianco); }
.riquadro-testo {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: clamp(18px, 2.4vw, 32px);
    display: flex; flex-direction: column; gap: 8px;
}
.riquadro-titolo { font-size: min(clamp(2rem, 3.6vw, 3.2rem), calc(100cqi / var(--em-parola, .01))); }
.mosaico-voce:first-child .riquadro-titolo { font-size: min(clamp(2.6rem, 6vw, 5.4rem), calc(100cqi / var(--em-parola, .01))); }
.riquadro-nota { font-size: .95rem; font-weight: 500; font-stretch: var(--largo); color: var(--salmone); }
.riquadro-freccia {
    position: absolute; top: 0; right: 0; z-index: 1;
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    background: var(--rubino); color: var(--bianco);
    transform: translate(100%, -100%); transition: transform .25s ease-out;
}
.riquadro:hover .riquadro-freccia, .riquadro:focus-visible .riquadro-freccia { transform: none; }

@media (max-width: 760px) {
    .mosaico { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
    .mosaico-voce:first-child { grid-row: span 2; }
    .mosaico[data-riquadri="2"] .mosaico-voce:last-child { grid-row: auto; }
}

/* Indice delle altre categorie: tipografia al posto delle icone. */
.indice-categorie { list-style: none; border-top: 2px solid var(--inchiostro); }
.indice-categorie li { border-bottom: 1px solid var(--bordo); }
.indice-voce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 88px;
    align-items: center; gap: 24px;
    padding: 14px 0;
    color: var(--inchiostro); text-decoration: none;
    position: relative; isolation: isolate;
}
.indice-voce::before {
    content: ''; position: absolute; left: -16px; right: -16px; top: 0; bottom: 0;
    background: var(--bianco); opacity: 0; transition: opacity .15s; z-index: -1;
}
.indice-nome { font-size: min(clamp(1.9rem, 4.2vw, 3.2rem), calc((100cqi - 220px) / var(--em-parola, .01))); transition: color .15s, transform .25s ease-out; }
.indice-conta { font-size: .95rem; font-weight: 500; font-stretch: var(--largo); color: var(--acciaio); font-variant-numeric: tabular-nums; white-space: nowrap; }
.indice-immagine { width: 88px; height: 72px; display: flex; align-items: center; justify-content: center; }
.indice-immagine img { max-height: 72px; width: auto; mix-blend-mode: multiply; transition: transform .25s ease-out; }
.indice-voce:hover { color: var(--inchiostro); }
.indice-voce:hover::before { opacity: 1; }
.indice-voce:hover .indice-nome { color: var(--rubino-scuro); transform: translateX(10px); }
.indice-voce:hover .indice-immagine img { transform: scale(1.12) rotate(-3deg); }
@media (max-width: 560px) {
    .indice-voce { grid-template-columns: minmax(0, 1fr) 64px; gap: 4px 16px; }
    .indice-conta { grid-row: 2; }
    .indice-immagine { grid-row: 1 / span 2; grid-column: 2; width: 64px; }
    .indice-nome { font-size: min(1.9rem, calc((100cqi - 90px) / var(--em-parola, .01))); }
}

/* ------------------------------------------------------------------ azienda */
.azienda { background: var(--bianco); padding: clamp(72px, 10vw, 136px) 0; }
.azienda-griglia {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 64px) clamp(32px, 6vw, 96px);
    align-items: start;
}
.azienda-titolo { max-width: 11ch; }
.azienda-apertura {
    font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.35; font-weight: 500;
    letter-spacing: -.01em; margin: 0; text-wrap: pretty;
}
.azienda-foto { margin: 0; position: relative; }
.azienda-foto::before { content: ''; position: absolute; inset: 0; border: 5px solid var(--rubino); transform: translate(-14px, 14px); }
.azienda-foto img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.azienda-testo { max-width: 62ch; color: #33343D; align-self: center; }
@media (max-width: 860px) {
    .azienda-griglia { grid-template-columns: minmax(0, 1fr); }
    .azienda-foto { max-width: 420px; margin-left: 14px; }
    .azienda-foto img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------------ fondo nuove competenze */
.fnc { background: var(--calcestruzzo); }
.fnc-interno {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 48px; align-items: center;
    padding-top: 32px; padding-bottom: 32px;
}
.fnc-loghi { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--bianco); padding: 14px 18px; }
.fnc-loghi img { height: auto; max-height: 48px; width: auto; max-width: 100%; }
.fnc p { font-size: .88rem; line-height: 1.55; color: #464853; margin: 0; max-width: 95ch; }
@media (max-width: 900px) { .fnc-interno { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ intestazione pagine */
.intestazione {
    position: relative; overflow: hidden;
    background: var(--antracite); color: var(--bianco);
    padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 5vw, 64px);
}
.intestazione.con-foto { padding-top: clamp(96px, 14vw, 200px); }
.intestazione-sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intestazione.con-foto::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(23, 24, 31, .95) 0%, rgba(23, 24, 31, .55) 60%, rgba(23, 24, 31, .35) 100%);
}
.intestazione-interno { position: relative; z-index: 1; }

.briciole ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .92rem; font-stretch: var(--largo); }
.briciole li + li::before { content: '/'; margin-right: 10px; color: var(--grafite-chiara); }
.briciole a { color: var(--nebbia); text-decoration: none; }
.briciole a:hover { color: var(--bianco); text-decoration: underline; }

.intestazione-titolo { font-size: min(clamp(3.4rem, 10vw, 8.5rem), calc(100cqi / var(--em-parola, .01))); text-wrap: balance; }
.intestazione-piede { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; margin-top: 24px; }
.intestazione-sottotitolo { margin: 0; font-size: 1.3rem; font-weight: 600; font-stretch: var(--largo); color: var(--salmone); }
.intestazione-dati { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.intestazione-dati li {
    font-size: .9rem; font-weight: 500; font-stretch: var(--largo);
    padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .28); color: #DADBE0;
    font-variant-numeric: tabular-nums;
}

.testo-introduttivo { max-width: 66ch; margin-bottom: 48px; font-size: 1.12rem; }
.testo-introduttivo strong { font-weight: 700; }
.immagine-introduttiva { max-width: 320px; margin: 0 0 24px; }

/* ------------------------------------------------------------------ catalogo */
.catalogo {
    display: grid; grid-template-columns: minmax(0, 1fr);
    padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(64px, 8vw, 112px);
    gap: 40px;
}
.catalogo.con-indice, .catalogo:has(.cerca-catalogo) { grid-template-columns: 250px minmax(0, 1fr); }
.catalogo-lato-interno { position: sticky; top: calc(var(--testata) + 24px); display: flex; flex-direction: column; gap: 28px; }

.cerca-catalogo label { display: block; font-weight: 600; font-size: .92rem; font-stretch: var(--largo); margin-bottom: 8px; }
.cerca-catalogo input {
    width: 100%; font: inherit; padding: 12px 14px;
    border: 0; border-bottom: 2px solid var(--inchiostro); background: var(--bianco);
}
.cerca-catalogo input:focus { outline: none; border-bottom-color: var(--rubino); }
.cerca-esito { font-size: .9rem; color: var(--acciaio); margin: 8px 0 0; min-height: 1.4em; }

.indice-gruppi ul { list-style: none; border-top: 2px solid var(--inchiostro); }
.indice-gruppi li { border-bottom: 1px solid var(--bordo); }
.indice-gruppi a {
    display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
    color: var(--inchiostro); text-decoration: none; font-weight: 600;
    transition: padding .15s;
}
.indice-gruppi a span { color: var(--acciaio); font-weight: 400; font-variant-numeric: tabular-nums; }
.indice-gruppi a:hover, .indice-gruppi a.attivo { color: var(--rubino-scuro); }
.indice-gruppi a.attivo { box-shadow: inset 3px 0 0 var(--rubino); padding-left: 12px; }

.gruppo { margin-bottom: clamp(48px, 6vw, 72px); }
.gruppo[hidden] { display: none; }
.gruppo-titolo { padding-bottom: 14px; border-bottom: 2px solid var(--inchiostro); }

.schede-articoli { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.scheda-articolo {
    display: flex; flex-direction: column;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    transition: border-color .15s;
}
.scheda-articolo[hidden] { display: none; }
.scheda-articolo:hover { border-color: var(--inchiostro); }
.scheda-articolo:target { outline: 3px solid var(--rubino); outline-offset: 2px; }
.scheda-articolo-tavola {
    position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
    background: var(--bianco); border-bottom: 1px solid var(--bordo);
}
.scheda-articolo-tavola img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .35s ease-out; }
.scheda-articolo-tavola:hover img { transform: scale(1.05); }
.scheda-articolo-tavola.vuota { background: repeating-linear-gradient(135deg, var(--calcestruzzo) 0 10px, var(--pagina) 10px 20px); }
.ingrandisci {
    position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--inchiostro); color: var(--bianco);
    opacity: 0; transition: opacity .15s;
}
.scheda-articolo-tavola:hover .ingrandisci, .scheda-articolo-tavola:focus-visible .ingrandisci { opacity: 1; }
.scheda-articolo-nome { font-size: 1.02rem; font-weight: 600; line-height: 1.35; padding: 16px 16px 12px; flex: 1; }
.scheda-articolo-azioni { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }

.vuoto { padding: 40px 0; color: var(--acciaio); }

@media (max-width: 860px) {
    .catalogo.con-indice, .catalogo:has(.cerca-catalogo) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .catalogo-lato-interno { position: static; }
    .indice-gruppi { display: none; }
}
@media (max-width: 520px) {
    .schede-articoli { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .scheda-articolo { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
    .scheda-articolo-tavola { grid-row: span 2; aspect-ratio: auto; height: 100%; min-height: 120px; border-bottom: 0; border-right: 1px solid var(--bordo); }
    .scheda-articolo-nome { padding: 12px 12px 8px; }
    .scheda-articolo-azioni { padding: 0 12px 12px; }
}

/* ------------------------------------------------------------------ pavimenti */
.famiglie-indice {
    position: sticky; top: var(--testata); z-index: 50;
    background: rgba(241, 241, 238, .94); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bordo);
}
.famiglie-indice ul { list-style: none; display: flex; gap: 4px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.famiglie-indice a {
    display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
    padding: 8px 16px; color: var(--inchiostro); text-decoration: none; font-weight: 600;
}
.famiglie-indice a span { color: var(--acciaio); font-weight: 400; font-size: .9em; font-variant-numeric: tabular-nums; }
.famiglie-indice a:hover { background: var(--bianco); }
.famiglie-indice a.attivo { background: var(--inchiostro); color: var(--bianco); }
.famiglie-indice a.attivo span { color: var(--nebbia); }

.pavimenti { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(64px, 8vw, 112px); }
.famiglia { margin-bottom: clamp(56px, 7vw, 88px); }
.famiglia .gruppo-titolo { font-size: clamp(2.6rem, 5vw, 4rem); }

.griglia-pavimenti { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.tessera-pavimento { display: flex; flex-direction: column; height: 100%; color: var(--inchiostro); text-decoration: none; background: var(--bianco); position: relative; padding-bottom: 18px; }
.tessera-pavimento-immagine { display: block; aspect-ratio: 1; padding: 8%; overflow: hidden; }
.tessera-pavimento-immagine img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease-out; }
.tessera-pavimento-nome { display: block; padding: 0 18px; font-size: min(1.8rem, calc((100cqi - 36px) / var(--em-parola, .01))); font-weight: 800; font-stretch: var(--stretto); line-height: 1; }
.tessera-pavimento-dato { display: block; padding: 6px 18px 0; font-size: .88rem; color: var(--acciaio); }
.tessera-pavimento::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: var(--rubino); transform: scaleX(0); transform-origin: left; transition: transform .25s ease-out;
}
.tessera-pavimento:hover { color: var(--inchiostro); }
.tessera-pavimento:hover::before { transform: none; }
.tessera-pavimento:hover .tessera-pavimento-immagine img { transform: scale(1.07); }
@media (max-width: 520px) {
    .griglia-pavimenti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .tessera-pavimento-nome { font-size: min(1.45rem, calc((100cqi - 24px) / var(--em-parola, .01))); padding: 0 12px; }
    .tessera-pavimento-dato { padding: 4px 12px 0; }
}

/* ------------------------------------------------------------------ tecnologia */
.tecnologia { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(64px, 8vw, 112px); }
.tecnologia-apertura {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px clamp(32px, 5vw, 72px); align-items: start; margin-bottom: clamp(56px, 7vw, 96px);
}
.tecnologia-apertura.solo-testo { grid-template-columns: minmax(0, 1fr); }
.tecnologia-apertura .testo-introduttivo { margin-bottom: 0; font-size: 1.2rem; }
.tecnologia-immagine { margin: 0; background: var(--bianco); padding: 32px; }
.tecnologia-immagine img { margin: 0 auto; max-height: 380px; width: auto; }
.tecnologia-galleria ul {
    list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px;
}
.tecnologia-galleria li { scroll-snap-align: start; }
.tecnologia-galleria img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.comandi-galleria { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.comandi-galleria button {
    width: 44px; height: 44px; border: 0; background: var(--inchiostro); color: var(--bianco); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.comandi-galleria button:hover { background: var(--rubino); }
.griglia-massi .tessera-pavimento-immagine { padding: 14%; }
@media (max-width: 860px) { .tecnologia-apertura { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ scheda pavimento */
.scheda-testata { background: var(--antracite); color: var(--bianco); padding: clamp(40px, 6vw, 72px) 0 0; }
.scheda-testata-griglia {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px clamp(32px, 6vw, 96px); align-items: end;
}
.scheda-testata-testo { padding-bottom: clamp(40px, 6vw, 72px); }
.scheda-nome { font-size: min(clamp(4rem, 13vw, 11rem), calc(100cqi / var(--em-parola, .01))); }
.scheda-testata .intestazione-sottotitolo { margin-top: 16px; }
.scheda-documenti { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.scheda-documenti .documento { padding: 14px 20px; font-size: 1rem; background: var(--rubino); }
.scheda-documenti .documento:hover { background: var(--bianco); color: var(--inchiostro); }
.scheda-documenti .documento + .documento { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.scheda-documenti .documento + .documento:hover { background: var(--bianco); }

/* Il masso sta su una lastra chiara che scende oltre la fascia scura,
   con la cornice rossa del logo sfalsata dietro. */
.scheda-masso { margin: 0 0 -72px; position: relative; aspect-ratio: 1; }
.scheda-masso::before { content: ''; position: absolute; inset: 0; border: 6px solid var(--rubino); transform: translate(-18px, -18px); }
.scheda-masso img {
    position: relative; width: 100%; height: 100%; object-fit: contain;
    background: var(--calcestruzzo); padding: 12%;
}

.scheda-pavimento { padding-top: clamp(112px, 12vw, 152px); padding-bottom: clamp(64px, 8vw, 112px); }
.scheda-dati-griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(32px, 6vw, 96px); margin-bottom: clamp(56px, 7vw, 96px); }
.caratteristiche { margin: 0; border-top: 2px solid var(--inchiostro); }
.caratteristiche div { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--bordo); align-items: baseline; }
.caratteristiche dt { color: var(--acciaio); font-weight: 500; }
.caratteristiche dd { margin: 0; font-weight: 600; font-size: 1.12rem; font-variant-numeric: tabular-nums; }

.scheda-sezione { margin-bottom: clamp(56px, 7vw, 96px); }
.griglia-pose, .griglia-realizzazioni, .griglia-colori { list-style: none; display: grid; gap: 12px; }
.griglia-pose { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.griglia-pose a { display: block; background: var(--bianco); padding: 8px; }
.griglia-pose img { width: 100%; aspect-ratio: 1; object-fit: contain; }

.griglia-colori { grid-template-columns: repeat(auto-fill, minmax(min(112px, 26vw), 1fr)); gap: 24px 12px; }
.griglia-colori img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.colore-sigla { display: block; margin-top: 10px; font-size: 1.35rem; font-weight: 800; font-stretch: var(--stretto); line-height: 1; }
.colore-nome { display: block; margin-top: 2px; font-size: .86rem; color: var(--acciaio); line-height: 1.3; }
.nota { margin-top: 24px; color: var(--acciaio); }

/* La prima foto è grande; le altre si dispongono a seconda di quante sono,
   senza lasciare caselle vuote nei casi più comuni. */
.griglia-realizzazioni { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 16vw, 220px); }
.griglia-realizzazioni li:first-child { grid-column: span 2; grid-row: span 2; }
.griglia-realizzazioni[data-quante="1"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: clamp(240px, 36vw, 480px); }
.griglia-realizzazioni[data-quante="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 26vw, 360px); }
.griglia-realizzazioni[data-quante="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia-realizzazioni[data-quante="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia-realizzazioni[data-quante="1"] li:first-child,
.griglia-realizzazioni[data-quante="2"] li:first-child,
.griglia-realizzazioni[data-quante="4"] li:first-child { grid-column: auto; grid-row: auto; }
.griglia-realizzazioni a, .griglia-realizzazioni img { display: block; width: 100%; height: 100%; }
.griglia-realizzazioni img { object-fit: cover; transition: opacity .15s; }
.griglia-realizzazioni a:hover img, .griglia-pose a:hover img { opacity: .85; }

.scheda-tecnologie ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.scheda-tecnologie a {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 180px; padding: 20px; overflow: hidden;
    background: var(--antracite); color: var(--bianco); text-decoration: none;
}
.scheda-tecnologie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .2s, transform .4s; }
.scheda-tecnologie a:hover img { opacity: .75; transform: scale(1.04); }
.tecnologia-nome { position: relative; font-size: 1.9rem; font-weight: 800; font-stretch: var(--stretto); line-height: 1; }
.tecnologia-serie { position: relative; color: var(--salmone); font-weight: 600; font-stretch: var(--largo); font-size: .9rem; margin-top: 6px; }

@media (max-width: 860px) {
    .scheda-testata-griglia, .scheda-dati-griglia { grid-template-columns: minmax(0, 1fr); }
    .scheda-masso { max-width: 360px; margin-left: 18px; }
    .griglia-realizzazioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ contatti */
.contatti { background: var(--antracite); color: var(--bianco); padding: clamp(72px, 10vw, 128px) 0; }
.contatti-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px clamp(32px, 6vw, 96px); }
.contatti .titolo-sezione { margin-bottom: 32px; }
.contatti a { color: var(--bianco); }
.contatti a:hover { color: var(--salmone); }
.telefoni { list-style: none; margin-bottom: 32px; }
.telefoni a {
    display: inline-block; text-decoration: none;
    font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; font-stretch: var(--stretto); line-height: 1.02;
    font-variant-numeric: tabular-nums;
}
.recapiti { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; border-top: 1px solid var(--grafite-chiara); padding-top: 20px; }
.recapiti dt { color: var(--nebbia); }
.recapiti dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.indirizzo { font-size: 1.25rem; line-height: 1.6; margin-bottom: 28px; }
.indirizzo a { font-weight: 600; }
.mappa { aspect-ratio: 16 / 9; background: var(--grafite); position: relative; }
.mappa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mappa-attiva {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--grafite);
    color: var(--bianco); border: 0; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 1.05rem; padding: 24px; text-align: center;
}
.mappa-attiva:hover { box-shadow: inset 0 0 0 2px var(--salmone); }
.mappa-attiva small { font-weight: 400; font-size: .82rem; color: var(--nebbia); max-width: 34ch; }
.mappa-segno { width: 22px; height: 22px; background: var(--salmone); box-shadow: -6px -6px 0 0 var(--rubino); margin-bottom: 6px; }
@media (max-width: 800px) { .contatti-griglia { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ piè di pagina */
.piede { background: #16171D; color: var(--nebbia); font-size: .95rem; padding-top: 48px; }
.piede a { color: var(--nebbia); text-decoration: none; }
.piede a:hover { color: var(--bianco); text-decoration: underline; }
.piede-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; padding-bottom: 36px; }
.piede-griglia img { margin-bottom: 16px; }
.piede-prodotti { list-style: none; columns: 3 180px; column-gap: 24px; }
.piede-prodotti li { padding: 3px 0; break-inside: avoid; }
.piede-fine { border-top: 1px solid var(--grafite); padding-top: 16px; padding-bottom: 20px; font-size: .85rem; color: #8B8D98; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.piede-fine a { color: #8B8D98; }
@media (max-width: 760px) { .piede-griglia { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ visore */
.visore { border: 0; padding: 0; margin: auto; width: min(96vw, 1200px); max-height: 94vh; background: transparent; overflow: visible; }
.visore::backdrop { background: rgba(20, 21, 27, .94); }
.visore figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.visore img { max-width: 100%; max-height: calc(94vh - 60px); width: auto; background: var(--bianco); }
.visore figcaption { color: var(--bianco); margin-top: 12px; text-align: center; font-weight: 500; }
.visore button {
    position: fixed; width: 48px; height: 48px; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: var(--bianco);
    display: inline-flex; align-items: center; justify-content: center;
}
.visore button:hover { background: var(--rubino); }
.visore-chiudi { top: 16px; right: 16px; }
.visore-precedente { left: 16px; top: 50%; transform: translateY(-50%); }
.visore-successiva { right: 16px; top: 50%; transform: translateY(-50%); }
.visore-contatore { position: fixed; left: 20px; top: 26px; color: var(--nebbia); font-size: .9rem; font-variant-numeric: tabular-nums; }
.visore[data-singola] .visore-precedente,
.visore[data-singola] .visore-successiva,
.visore[data-singola] .visore-contatore { display: none; }

/* ------------------------------------------------------------------ errori */
.errore-pagina { padding: clamp(72px, 12vw, 160px) 0; }
.errore-pagina .titolo-sezione { margin-bottom: 24px; }
.errore-pagina p { max-width: 52ch; font-size: 1.15rem; }

/* ------------------------------------------------------------------ preferenze */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .testata, .contatti .mappa, .piede, .cerca-catalogo, .famiglie-indice, .visore, .apertura-sfondo { display: none !important; }
    .intestazione, .scheda-testata, .apertura, .contatti { background: none; color: var(--inchiostro); }
    .documento { background: none; color: var(--inchiostro); padding: 0; }
    .documento::after { content: ' (' attr(href) ')'; font-weight: 400; font-size: .8em; }
}