/*
 * Strutture Alveolari — foglio di stile unico.
 *
 * L'azienda fa una cosa sola da quarant'anni: carta che regge il peso. Il sito
 * prova a dire la stessa cosa — niente decorazione, materiali a vista, molto
 * spazio bianco e fotografie grandi, perche' il prodotto e' bello di suo e non
 * ha bisogno di essere presentato.
 *
 * Nessun JavaScript e nessuna richiesta a server esterni: i caratteri stanno in
 * /font, le fotografie in /immagini. Un foglio solo, scritto a mano, che si
 * legge dall'alto in basso come una pagina.
 */

/* ---------- caratteri ---------- */
/*
 * Archivo per i titoli: e' una grottesca larga, un po' industriale, adatta a
 * un'azienda che produce pannelli. Inter per il testo, che non chiede
 * attenzione. Due file variabili, un peso qualsiasi fra 400 e 700.
 */
@font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url(/font/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;
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url(/font/inter-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 {
    /* i colori vengono dalle fotografie: carta, kraft, cartone bagnato */
    --carta: #faf8f4;
    --carta-scura: #f1ebe1;
    --inchiostro: #1b1916;
    --inchiostro-tenue: #5b5449;
    --kraft: #a9702f;
    --kraft-chiaro: #c99a5e;
    --linea: #e3d9c9;
    --scuro: #23201c;

    --colonna: 1180px;
    --testo: 66ch;

    --titolo: "Archivo", "Segoe UI", system-ui, sans-serif;
    --corpo: "Inter", "Segoe UI", system-ui, sans-serif;
}

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

body {
    margin: 0;
    background: var(--carta);
    color: var(--inchiostro);
    font-family: var(--corpo);
    font-size: 1.03rem;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--titolo);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.005em; }

p { margin: 0 0 1.15rem; max-width: var(--testo); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* <picture> non deve entrare nel calcolo del layout: conta solo l'<img>. */
picture { display: contents; }

.contenitore { width: min(100% - 2.6rem, var(--colonna)); margin-inline: auto; }
.stretta { max-width: 72ch; }
.sezione { padding-block: clamp(3.4rem, 7vw, 6.5rem); }
.sezione-crema { background: var(--carta-scura); }

/*
 * Il maiuscoletto spaziato: e' l'unico ornamento del sito, e serve a dire
 * "questa e' un'etichetta, non una frase". Definito una volta per tutti.
 */
.sopratitolo {
    display: block;
    font-family: var(--titolo);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kraft);
    margin-bottom: 0.9rem;
}

.occhiello {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.5;
    color: var(--inchiostro-tenue);
    max-width: 48ch;
}

/* ---------- barra ---------- */
.barra {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(250, 248, 244, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--linea);
}
.barra-interno { display: flex; align-items: center; gap: 1.2rem; padding-block: 0.9rem; }

.marchio { display: flex; align-items: baseline; gap: 0.55rem; text-decoration: none; }
.marchio b { font-family: var(--titolo); font-weight: 700; font-size: 1.16rem; letter-spacing: -0.02em; }
.marchio span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inchiostro-tenue); }

.menu { display: flex; gap: 1.5rem; align-items: center; margin-left: clamp(1rem, 3vw, 2.6rem); }
.menu a {
    text-decoration: none;
    font-size: 0.96rem;
    color: var(--inchiostro-tenue);
    padding-block: 0.25rem;
    border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--inchiostro); }
.menu a.attivo { color: var(--inchiostro); border-bottom-color: var(--kraft); }

.lingue { margin-left: auto; display: flex; gap: 0.6rem; font-size: 0.78rem; letter-spacing: 0.1em; }
.lingue a { text-decoration: none; color: var(--inchiostro-tenue); padding: 0.2rem 0.1rem; }
.lingue a.attivo { color: var(--inchiostro); font-weight: 600; }

.telefono-barra {
    display: inline-flex; align-items: center; gap: 0.45rem;
    margin-left: 1.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.92rem;
    white-space: nowrap;
}
.telefono-barra:hover { border-color: var(--kraft); color: var(--kraft); }

/* ---------- apertura ---------- */
.apertura {
    position: relative;
    min-height: min(78vh, 620px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    overflow: hidden;
    background: var(--scuro);
}
.apertura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.apertura::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20,17,14,0.88) 0%, rgba(20,17,14,0.45) 45%, rgba(20,17,14,0.15) 100%);
}
.apertura-testo { position: relative; z-index: 2; color: #fff; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.apertura-testo .sopratitolo { color: var(--kraft-chiaro); }
.apertura-testo p { color: rgba(255,255,255,0.88); font-size: clamp(1.05rem, 1.7vw, 1.25rem); max-width: 46ch; margin-top: 1.2rem; }

/* apertura piu' bassa per le pagine interne */
.apertura-pagina {
    background: var(--scuro);
    color: #fff;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    position: relative;
    overflow: hidden;
}
.apertura-pagina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.apertura-pagina .contenitore { position: relative; z-index: 2; }
.apertura-pagina .sopratitolo { color: var(--kraft-chiaro); }
.apertura-pagina .occhiello { color: rgba(255,255,255,0.82); margin-top: 1.1rem; }

/* ---------- pulsanti ---------- */
.bottone {
    display: inline-block;
    font-family: var(--titolo);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.95rem 1.8rem;
    border: 1px solid var(--inchiostro);
    background: var(--inchiostro);
    color: var(--carta);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bottone:hover { background: var(--kraft); border-color: var(--kraft); }
.bottone-chiaro { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; }
.bottone-chiaro:hover { background: #fff; border-color: #fff; color: var(--inchiostro); }
.bottone-vuoto { background: transparent; color: var(--inchiostro); }
.bottone-vuoto:hover { background: var(--inchiostro); color: var(--carta); }

/* ---------- impaginazioni ricorrenti ---------- */
.affiancata { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.affiancata img { width: 100%; }

.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.quattro { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); }

.carta-voce { background: var(--carta); border: 1px solid var(--linea); display: flex; flex-direction: column; }
.sezione-crema .carta-voce { background: #fff; }
.carta-voce img { width: 100%; height: 210px; object-fit: cover; }
.carta-voce div { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.carta-voce h3 { margin-bottom: 0.55rem; }
.carta-voce p { color: var(--inchiostro-tenue); font-size: 0.97rem; margin-bottom: 1.1rem; }
.carta-voce .vai {
    margin-top: auto;
    font-family: var(--titolo); font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--kraft); text-decoration: none;
}
.carta-voce .vai:hover { color: var(--inchiostro); }

/* i quattro motivi: numerati, senza riquadro */
.motivo { border-top: 2px solid var(--inchiostro); padding-top: 1.1rem; }
.motivo h3 { margin-bottom: 0.5rem; }
.motivo p { color: var(--inchiostro-tenue); font-size: 0.97rem; margin: 0; }

/* ---------- specifiche ---------- */
.specifiche { width: 100%; border-collapse: collapse; margin-top: 1.6rem; max-width: 46rem; }
.specifiche th, .specifiche td { text-align: left; padding: 0.95rem 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.specifiche th { font-family: var(--titolo); font-weight: 600; font-size: 0.97rem; width: 45%; }
.specifiche td { color: var(--inchiostro-tenue); }

/* ---------- elenco di applicazioni ---------- */
.applicazione { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.applicazione + .applicazione { margin-top: clamp(3rem, 6vw, 5rem); }
.applicazione:nth-child(even) .applicazione-foto { order: -1; }
.applicazione img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.applicazione h3 { font-size: 1.45rem; margin-bottom: 0.7rem; }
.applicazione p { color: var(--inchiostro-tenue); margin: 0; }

/* ---------- fascia di richiamo ---------- */
.richiamo { background: var(--scuro); color: #fff; position: relative; overflow: hidden; }
.richiamo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.richiamo .contenitore { position: relative; z-index: 2; text-align: center; }
.richiamo p { color: rgba(255,255,255,0.85); margin-inline: auto; margin-bottom: 2rem; }

/* ---------- piede ---------- */
.pie { background: var(--scuro); color: rgba(255,255,255,0.72); padding-block: 3.4rem 2rem; font-size: 0.93rem; }
.pie-griglia { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2rem; }
.pie h3 {
    font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: #fff; margin-bottom: 1rem; font-weight: 600;
}
.pie p { margin-bottom: 0.4rem; max-width: none; }
.pie a { color: rgba(255,255,255,0.72); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.22); }
.pie a:hover { color: #fff; border-bottom-color: var(--kraft-chiaro); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.45rem; }
.pie-dati { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.pie-dati p { margin-bottom: 0.3rem; }
.pie-fondo { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: space-between; font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.pie-fondo p { margin: 0; }

/* ---------- contatti ---------- */
.recapiti-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.recapito + .recapito { margin-top: 2.2rem; }
.recapito h3 { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kraft); margin-bottom: 0.6rem; }
.recapito p { margin-bottom: 0.3rem; }
.recapito a { color: var(--inchiostro); text-decoration: none; border-bottom: 1px solid var(--linea); }
.recapito a:hover { border-bottom-color: var(--kraft); color: var(--kraft); }
.grande { font-family: var(--titolo); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; }
.grande a { border-bottom: 0; }

/* ---------- la mappa ---------- */
/* E' un'immagine dentro un collegamento: al passaggio del mouse si schiarisce
   appena, e la riga in basso dice dove porta. */
.mappa { display: block; position: relative; text-decoration: none; margin-top: 1.8rem; border: 1px solid var(--linea); }
.mappa img { width: 100%; display: block; }
.mappa-nota {
    position: absolute; left: 0; bottom: 0;
    background: var(--inchiostro); color: var(--carta);
    font-family: var(--titolo); font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.8rem 1.4rem;
}
.mappa:hover .mappa-nota { background: var(--kraft); }

/* ---------- schermi stretti ---------- */
@media (max-width: 980px) {
    .menu { display: none; }
    .telefono-barra { margin-left: auto; }
    .lingue { margin-left: 1rem; }
    .quattro { grid-template-columns: repeat(2, 1fr); }
    .pie-griglia { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
}

@media (max-width: 760px) {
    .affiancata, .tre, .applicazione, .recapiti-griglia { grid-template-columns: 1fr; }
    .applicazione:nth-child(even) .applicazione-foto { order: 0; }
    .apertura { min-height: min(72vh, 520px); }
}

@media (max-width: 520px) {
    .quattro, .pie-griglia { grid-template-columns: 1fr; }
    .barra-interno { flex-wrap: wrap; }
}

/*
 * Il menu per schermi stretti: <details> nativo, che si apre da tastiera e non
 * chiede una riga di JavaScript.
 */
.menu-mobile { display: none; position: relative; }
.menu-mobile summary {
    list-style: none; cursor: pointer;
    padding: 0.55rem 0.7rem; border: 1px solid var(--linea);
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.hamburger { display: block; width: 20px; height: 2px; background: var(--inchiostro); position: relative; }
.hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--inchiostro); }
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }
.menu-mobile-pannello {
    position: absolute; right: 0; top: calc(100% + 0.6rem);
    background: var(--carta); border: 1px solid var(--linea);
    min-width: 15rem; padding: 0.5rem 0; box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}
.menu-mobile-pannello a { display: block; padding: 0.7rem 1.2rem; text-decoration: none; color: var(--inchiostro-tenue); }
.menu-mobile-pannello a:hover { background: var(--carta-scura); color: var(--inchiostro); }
.menu-mobile-pannello a.attivo { color: var(--inchiostro); font-weight: 600; }

@media (max-width: 980px) {
    .menu-mobile { display: block; }
}