/* EASYTM 2026 — aggiunte al foglio del mockup (style.css è generato dal mockup e non si tocca a mano).
   Qui: Montserrat sul nostro server, azzeramenti di WordPress, testata fissa, menu del telefono, modulo demo,
   rifiniture al passaggio del mouse, animazioni d'entrata (spente per chi le ha disattivate), accessibilità. */

/* ---------- Montserrat variabile 100-900 (licenza OFL: assets/fonts/MONTSERRAT-OFL.txt) ---------- */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-latin-wght-normal.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: Montserrat; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Montserrat; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-latin-wght-italic.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: Montserrat; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-latin-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- WordPress: niente margini né contenitori in più ---------- */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + *, .is-layout-flow > * + *, .is-layout-constrained > * + * { margin-block-start: 0; }
main.contenuto, .wp-block-post-content { display: block; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { scroll-padding-top: 90px; }

/* ---------- accessibilità ---------- */
.salta { position: absolute; left: -999px; top: 10px; z-index: 100; background: var(--blu); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.salta:focus { left: 12px; text-decoration: none; }
/* contorno del fuoco da tastiera: blu del marchio sui fondi chiari (4,93:1 sul bianco), azzurro sui fondi scuri (7,90:1 su #0E1216,
   dove il blu farebbe 3,59-3,81). Prima era azzurro ovunque, 2,38:1 sul bianco (esperto di interfaccia, 27/09/2026). */
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 6px; }
.band.dark :focus-visible, .cta-dark :focus-visible, footer.site :focus-visible { outline-color: #4FB3DD; }
.btn:focus-visible, .btn-ghost:focus-visible, .btn-light:focus-visible { outline-offset: 4px; }

/* ---------- testata fissa in alto (il mockup lo prevede per il sito vero) ---------- */
header.site { position: sticky; top: 0; z-index: 40; transition: box-shadow .25s ease; }
header.site.scorso { box-shadow: 0 8px 28px rgba(16, 40, 60, .08); }
header.site .logo { display: block; flex-shrink: 0; line-height: 0; }
header.site .logo img { height: 26px; width: auto; display: block; }
nav.menu a { transition: color .2s ease, border-color .2s ease; }
/* Col menu a 13 px del mockup logo, menu e pulsante misurano 1156 px e la colonna ne ha 1124: il pulsante usciva
   a destra e fra 981 e 1179 px la pagina scorreva di lato. A 12 px la riga misura 1100 px e sta nella colonna. */
nav.menu { font-size: 12px; }

/* pulsante del menu: compare sotto i 950 px, dove non ci stanno più nemmeno i nomi corti. Dal 28/09/2026 pomeriggio, con il
   passaggio di lingua «EN» / «IT» accanto al pulsante della testata: nomi interi da 1470 px, nomi corti fra 950 e 1469 px (regole
   nel foglio del mockup; misure in Verifiche\2026-09-28_inglese\misura_testata.py). Dal 28/09 notte, con cinque voci: 1410 e 890 px;
   dal 27/09 al 28/09, con quattro voci: 1240 e 800 px; prima ancora il pulsante compariva sotto i 1180 px */
.menu-apri { display: none; background: none; border: 0; padding: 4px; margin: 0; cursor: pointer; color: var(--nero); line-height: 0; border-radius: 8px; }
.menu-apri .icona-chiudi { display: none; }
header.site.aperta .menu-apri .icona-menu { display: none; }
header.site.aperta .menu-apri .icona-chiudi { display: inline; }
nav.menu .solo-tel { display: none; }
@media (max-width: 949px) {
	nav.menu { display: none; }
	.menu-apri { display: inline-flex; }
	/* passaggio di lingua e pulsante a destra, accanto al pulsante del menu, non in mezzo alla testata (dal 28/09/2026 il margine
	   automatico sta sul passaggio di lingua, che viene prima del pulsante: regola nel foglio del mockup) */
	header.site.aperta nav.menu { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; position: absolute; top: 74px; left: 0; right: 0; background: #fff; padding: 12px 28px 20px; border-bottom: 1px solid var(--bordo); box-shadow: 0 16px 32px rgba(16, 40, 60, .12); font-size: 15px; animation: menu-giu .22s ease; }
	header.site.aperta nav.menu .nome-intero { display: inline; } /* nel menu aperto i nomi interi (27/09/2026) */
	header.site.aperta nav.menu .nome-corto { display: none; }
	header.site.aperta nav.menu a { white-space: normal; padding: 9px 0; text-wrap: balance; } /* i nomi lunghi a capo in modo bilanciato, mai una parola sola sull'ultima riga (27/09/2026) */
}
@media (max-width: 760px) {
	/* il pulsante della testata sparisce sotto i 760 px: dal 27/09/2026 la regola sta nel foglio del mockup (style.css), qui era doppia */
	header.site.aperta nav.menu .solo-tel { display: inline-block; color: var(--blu); font-weight: 700; }
}
@keyframes menu-giu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- rifiniture al passaggio del mouse (lo stato fermo resta quello del mockup) ---------- */
.btn, .btn-ghost, .btn-light { transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0, 120, 169, .28); }
.btn-ghost:hover { background: var(--tinta); text-decoration: none; }
.btn-light:hover { background: var(--tinta); text-decoration: none; }
.card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.band.light .card:hover, .band.alt .card:hover, .hero .card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16, 40, 60, .11); }
.band.dark .card:hover { border-top-color: var(--blu-chiaro); transform: translateY(-3px); }
.door .more { transition: padding-left .2s ease; }
.door:hover .more { padding-left: 4px; text-decoration: none; }
.faq summary { transition: color .2s ease; }
.faq summary:hover { color: var(--blu); }
.faq summary:hover h3 { color: var(--blu); }
.faq details[open] > p { animation: faq-giu .3s ease; }
@keyframes faq-giu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
footer.site a { transition: color .2s ease; }
footer.site a:hover { color: #fff; text-decoration: none; }

/* ---------- animazioni d'entrata: solo con JavaScript e solo per chi non le ha disattivate ---------- */
html.js-anim .anim { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
html.js-anim .anim.visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js-anim .anim { opacity: 1; transform: none; transition: none; } .faq details[open] > p { animation: none; } }

/* ---------- la tabella di confronto sul telefono: una scheda per riga (nel mockup sbordava a 390 px) ---------- */
@media (max-width: 760px) {
	table.ctable, table.ctable tbody, table.ctable tr, table.ctable td { display: block; width: 100%; }
	table.ctable thead { display: none; }
	table.ctable tr { padding: 12px 0 6px; border-bottom: 1px solid var(--bordo); }
	table.ctable tr:last-child { border-bottom: 0; }
	table.ctable td { border: 0; padding: 4px 18px; }
	table.ctable td:first-child { font-weight: 700; color: var(--nero); padding-bottom: 6px; }
	table.ctable td:nth-child(2)::before, table.ctable td:nth-child(3)::before { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); font-weight: 600; }
	table.ctable td:nth-child(2)::before { content: "Con il report autodichiarato"; }
	table.ctable td:nth-child(3)::before { content: "Con EASYTM®"; }
}

/* ---------- la tabella dei registri sul telefono: una scheda per sede (a 390 px le intestazioni uscivano dalle celle) ---------- */
@media (max-width: 760px) {
	table.reg, table.reg tbody, table.reg tr, table.reg td { display: block; width: 100%; }
	table.reg thead { display: none; }
	table.reg tr { padding: 10px 0 8px; border-bottom: 1px solid var(--bordo); }
	table.reg tr:last-child { border-bottom: 0; }
	table.reg td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; padding: 5px 16px; }
	table.reg td:first-child { display: block; width: 100%; font-weight: 700; color: var(--nero); padding-bottom: 6px; }
	table.reg td:nth-child(n+2)::before { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--grigio); font-weight: 600; }
	table.reg td:nth-child(2)::before { content: "Ascensore"; }
	table.reg td:nth-child(3)::before { content: "Termico"; }
	table.reg td:nth-child(4)::before { content: "Antincendio"; }
	table.reg td:nth-child(5)::before { content: "DUVRI"; }
}

/* ---------- la tabella dei registri fra 981 e 1179 px: la parte alta su una colonna sola, così le intestazioni non escono
   dalle celle (a 1024 px «Antincendio» usciva di 13 px). Proposta il 24/09/2026, provata in Verifiche\2026-09-24_frase-incontro
   (variante D1179) e con la pagina Aziende rifatta (Verifiche\2026-09-26_pagina-aziende\controlla_proposta.py); tema 1.0.8 ---------- */
@media (min-width: 981px) and (max-width: 1179px) {
	.hero .wrap:has(table.reg) { grid-template-columns: 1fr; }
}

/* ---------- il modulo «Richiedi una demo»: stesso aspetto delle caselle del mockup ---------- */
.form-demo { margin: 0; }
.form-demo .form { margin-top: 28px; }
.form-demo .form input { width: 100%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: 12px 14px; color: #fff; font: inherit; font-size: 14px; line-height: 1.4; transition: border-color .2s ease, background-color .2s ease; }
.form-demo .form input::placeholder { color: var(--soft); opacity: 1; }
.form-demo .form input:focus { border-color: var(--blu-chiaro); background: rgba(255, 255, 255, .09); outline: none; }
.form-demo .form input:user-invalid { border-color: #e0a33a; }
.form-demo .consenso { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13px; color: var(--soft); max-width: 720px; cursor: pointer; }
.form-demo .consenso input { margin: 4px 0 0; accent-color: var(--blu); flex-shrink: 0; }
.form-demo .consenso a { color: var(--txt-dark); text-decoration: underline; }
/* riga dell'informativa sotto la casella degli inviti (27/09/2026): al posto della casella obbligatoria del consenso */
.form-demo .informativa { margin: 12px 0 0; font-size: 13px; color: var(--soft); max-width: 720px; }
.form-demo .informativa a { color: var(--txt-dark); text-decoration: underline; }
.form-demo .cta { margin-top: 22px; }
.form-demo button.btn-light { border: 0; cursor: pointer; font-family: inherit; }
.form-demo .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* campi con il messaggio sotto la casella, scritto da easytm.js prima dell'invio (25/09/2026) */
.form-demo .form .campo { display: block; min-width: 0; }
.form-demo .form input[aria-invalid="true"] { border-color: #f0c36a; }
.errore-campo { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; font-weight: 600; color: #f0c36a; }
.errore-campo[hidden] { display: none; }
.form-demo button.btn-light:disabled { opacity: .7; cursor: wait; }
.form-esito { margin-top: 18px; font-size: 15px; font-weight: 600; max-width: 720px; }
.form-esito.ok { color: var(--blu-chiaro); }
.form-esito.no { color: #f0c36a; }

/* inizio etichette inglesi (etichette_css.py, 28/09/2026) */
/* le intestazioni inglesi delle tabelle, per le schede del telefono delle pagine inglesi */
@media (max-width: 760px) {
	:lang(en) table.ctable td:nth-child(2)::before { content: "With a self-declared report"; }
	:lang(en) table.ctable td:nth-child(3)::before { content: "With EASYTM®"; }
	:lang(en) table.reg td:nth-child(2)::before { content: "Lift"; }
	:lang(en) table.reg td:nth-child(3)::before { content: "Heating"; }
	:lang(en) table.reg td:nth-child(4)::before { content: "Fire safety"; }
	:lang(en) table.reg td:nth-child(5)::before { content: "DUVRI"; }
}
/* fine etichette inglesi */

/* ---------- avviso dei cookie (29/09/2026): riquadro in basso a destra, sotto i 760 px scheda in basso a tutta larghezza.
   Sta sotto la testata (livello 30 contro 40): il menu del telefono, con «Prenota un incontro», gli passa sopra. Mentre è aperto
   il piè di pagina ha in fondo uno spazio alto quanto l'avviso, e la tastiera tiene i campi sopra l'avviso (scroll-padding).
   Due pulsanti identici e non pieni: l'unico pulsante pieno della pagina resta «Prenota un incontro». Esperto di marketing
   strategico, Verifiche\2026-09-29_statistiche\Decisioni-esperto.md, punto 2. ---------- */
.avviso-cookie { position: fixed; right: 24px; bottom: 24px; z-index: 30; box-sizing: border-box; width: calc(100% - 48px); max-width: 400px;
	background: #fff; color: var(--nero); border: 1px solid var(--bordo); border-radius: 14px; box-shadow: 0 18px 48px rgba(16, 40, 60, .24);
	padding: 18px 18px 18px 20px; font-size: 14px; line-height: 1.5; opacity: 0; transition: opacity .18s ease; }
.avviso-cookie[hidden] { display: none; }
.avviso-cookie.visibile { opacity: 1; }
.avviso-cookie p { margin: 0 34px 14px 0; }
.avviso-cookie .avviso-scelta { font-weight: 600; }
.avviso-cookie a { color: var(--blu); text-decoration: underline; }
.avviso-pulsanti { display: flex; gap: 12px; }
.avviso-pulsanti button { flex: 1 1 0; min-height: 44px; background: #fff; color: var(--blu); border: 2px solid var(--blu); border-radius: 10px;
	padding: 10px 14px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.avviso-pulsanti button:hover { background: var(--tinta); }
.avviso-chiudi { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
	background: transparent; color: var(--grigio); font-family: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.avviso-chiudi:hover { color: var(--nero); background: var(--chiaro); }
.avviso-cookie:focus { outline: none; }
.avviso-cookie:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; }
html.avviso-aperto { scroll-padding-bottom: calc(var(--avviso-h, 0px) + 36px); }
html.avviso-aperto footer.site::after { content: ""; display: block; height: calc(var(--avviso-h, 0px) + 24px); }
/* Dal 30/09/2026 due livelli nello stesso riquadro (Verifiche\2026-09-30_linkedin\Decisioni-esperto.md, 1.4): l'avviso non sale
   mai sopra la testata (74 px più i due margini); se il contenuto è più alto scorre il contenitore interno e la X resta in vista.
   «Scegli quali accettare» è un pulsante con l'aspetto di un collegamento; le scelte sono caselle da spuntare. */
.avviso-cookie { display: flex; flex-direction: column; max-height: calc(100vh - 122px); max-height: calc(100dvh - 122px); }
/* 6 px di margine dentro il contenitore che scorre, tolti fuori: il contorno del fuoco (3 px più 3 di distanza) non si taglia */
.avviso-corpo { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 6px; margin: -6px; }
.avviso-scegli { display: inline-flex; align-items: center; min-height: 40px; margin-top: 4px; padding: 0; background: transparent; border: 0;
	color: var(--blu); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: underline; cursor: pointer; }
.avviso-cookie fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.avviso-cookie legend { padding: 0 34px 0 0; margin: 0 0 6px; font-weight: 600; }
.avviso-voce { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; }
.avviso-voce + .avviso-voce { margin-top: 12px; }
.avviso-voce input { grid-column: 1; grid-row: 1; width: 20px; height: 20px; margin: 0; accent-color: var(--blu); cursor: pointer; }
.avviso-voce label { grid-column: 2; grid-row: 1; display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--nero); cursor: pointer; }
.avviso-cookie p.avviso-nota { grid-column: 2; grid-row: 2; margin: 0; font-size: 13px; line-height: 1.45; color: var(--grigio); }
.avviso-livello2 .avviso-pulsanti { margin-top: 16px; }
@media (max-width: 760px) {
	.avviso-cookie { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; padding: 14px 14px 14px 16px;
		max-height: calc(100vh - 98px); max-height: calc(100dvh - 98px); }
	html.avviso-aperto footer.site::after { height: calc(var(--avviso-h, 0px) + 12px); }
}
@media (prefers-reduced-motion: reduce) { .avviso-cookie { transition: none; } }
@media print { .avviso-cookie { display: none !important; } }
/* fine avviso dei cookie */