/*
Theme Name: Loreti
Author: VA Design
Description: Tema a blocchi di Loreti Arredamenti. Home copiata dalla struttura di lago.it (misure in RIFERIMENTO-LAGO.md), approvata da Vitaliano il 28/09/2026.
Version: 0.1.0
Requires at least: 6.9
Requires PHP: 7.4
Text Domain: loreti
*/

/* Misure prese da lago.it il 27-28/09/2026; colori dal kit Loreti (theme.json) */
:root { --testata-h: 65px; --colonna: 1024px; --blu: var(--wp--preset--color--blu); }
html, body { height: 100%; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }

/* Testata: fissa, 65 px, bianco al 50% come Lago */
.testata { position: fixed; inset: 0 0 auto 0; height: var(--testata-h); z-index: 20; background: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
body.admin-bar .testata { top: 32px; }
.testata .interno { height: 100%; display: flex; align-items: center; padding: 0 24px 0 0; }
/* Logo QUADRATO in riquadro blu (Vitaliano 28/09; confermato il 29/09 sera) */
/* Logo ORIZZONTALE, quello dei social (richiesta di Loreti, 30/09): fascia ferma + girasole tagliato a meta' sul bordo
   destro che gira mentre si scorre. Misure del file ufficiale: la zona del fiore e' larga 0,83 volte l'altezza, il fiore
   e' circa 1,3 volte l'altezza e ha il centro sul bordo destro. #1860ae = colore misurato sul bordo destro della fascia. */
.testata .logo { --lh: var(--testata-h); position: absolute; top: 0; left: 0; height: var(--lh); margin: 0; display: flex; overflow: hidden; z-index: 2; background: #1860ae; }
.logo-banda { height: 100%; width: auto; }
/* Variante D scelta da Vitaliano (30/09): testata tutta blu, lo sfumato del logo CONTINUA nella barra del menu, filetto
   giallo sotto a tutta larghezza. Misure dal file: nella fascia il #312783 resta pieno fino a meta', arriva a #165baa sul
   bordo della scritta e il fondo del girasole e' #1860ae. Qui gli stessi punti in pixel (fascia larga 296 px a 65 di altezza). */
.testata { background: linear-gradient(90deg, #312783 0, #312783 148px, #1860ae 296px, #1860ae 355px, #2176cc 100%);
  border-bottom: 2px solid var(--wp--preset--color--giallo); backdrop-filter: none; }
.testata .menu a, .testata .icone a, .testata .icone button { color: #fff; }
/* ⛔ Vitaliano 30/09: «il girasole intero non si può usare, il logo deve rimanere in un box»: resta tagliato a meta'
   dentro il riquadro, come nel file ufficiale (provato e scartato: girasole libero a destra). Il filetto giallo a destra
   chiude il riquadro e si unisce a quello sotto, come nella variante D mostrata */
.testata .logo { box-shadow: 2px 0 0 var(--wp--preset--color--giallo); }
.testata.menu-aperto { background: linear-gradient(90deg, #312783 0, #312783 148px, #1860ae 296px, #1860ae 355px, #2176cc 100%) !important; }
@media (max-width: 900px) { /* logo alto 52: fascia larga 237 */
  .testata, .testata.menu-aperto { background: linear-gradient(90deg, #312783 0, #312783 118px, #1860ae 237px, #1860ae 284px, #2176cc 100%) !important; }
}
.logo-fiore-box { position: relative; width: calc(var(--lh) * .83); height: 100%; }
.logo-fiore { position: absolute; width: calc(var(--lh) * 1.3); height: calc(var(--lh) * 1.3); max-width: none; left: calc(var(--lh) * (.83 - .65)); top: calc(var(--lh) * -.1); object-fit: contain; will-change: transform; }
.testata .interno { padding-left: 380px; } /* il logo orizzontale e' largo ~350 px: il menu si centra nello spazio che resta */
.testata .menu { margin-inline: auto; display: flex; gap: 32px; }
@media (max-width: 1180px) and (min-width: 901px) { .testata .menu { display: none; } } /* poco spazio: resta il pulsante Menu */
.testata .menu a { text-decoration: none; font-weight: 500; }
.icone { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.icone a, .icone button { display: grid; place-items: center; min-width: 44px; height: 44px; color: #000; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.apri-menu { display: flex !important; align-items: center; gap: 12px; }
.scritta-menu { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* Contenitore che scorre a scatti, come #main-container di Lago */
#main-container { height: 100svh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; margin: 0; }
.scena.wp-block-cover { height: 100svh; min-height: 100svh; padding: 0 24px 64px; scroll-snap-align: start; color: #fff; margin: 0; }
/* velatura piu' scura dove sta il testo + ombra leggera sulle lettere (Vitaliano 30/09: «poco leggibili») */
.scena .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.5) 30%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 70%) !important; }
.scena .wp-block-cover__inner-container { width: 100% !important; max-width: var(--colonna); margin: 0 auto !important; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.scena h2 { margin: 0; font-weight: 600; font-size: 40px; line-height: 50px; }
.scena p { margin: 0; padding-top: 12px; font-weight: 500; font-size: 17px; line-height: 26px; }
.scena .wp-block-button__link { text-shadow: none; font-weight: 600; }
.scena .wp-block-buttons { margin-top: 32px; }

/* Pallini a destra: uno per scena */
.pallini { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 15; display: grid; gap: 16px; }
.pallini a { width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; }
.pallini a.attivo { background: #fff; }

/* Dopo le scene: un solo blocco più alto dello schermo, dentro si scorre libero fino al fondo */
.coda { scroll-snap-align: start; }
.presentazione { padding: 96px 24px 80px; }
.presentazione > * { max-width: 612px; margin-inline: auto !important; }
.presentazione h1 { margin-bottom: 24px; font-weight: 400; font-size: 32px; line-height: 44px; }
.presentazione p { margin-bottom: 16px; }

/* Riquadro coi campi (Lago: «Iscriviti alla newsletter») */
.modulo { background: var(--wp--preset--color--scuro); padding: 0 24px; }
.modulo .carta { background: #fff; border-radius: 0 0 24px 24px; padding: 72px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1392px; margin-inline: auto; }
.modulo h2 { margin: 0 0 16px; font-weight: 500; font-size: 48px; line-height: 58px; }
.modulo form { display: grid; gap: 28px; }
.modulo label { display: grid; gap: 4px; font-size: 14px; }
.modulo input, .modulo textarea { font: inherit; border: 0; border-bottom: 1px solid #000; padding: 8px 0; background: none; }
.modulo .consenso { display: flex; gap: 10px; font-size: 13px; line-height: 20px; }
.modulo .trappola { position: absolute; left: -9999px; }
.modulo .nota-modulo { justify-self: end; margin: -16px 0 0; font-size: 12px; color: #555; }
.pagina .wp-block-table { overflow-x: auto; }
.pagina .wp-block-table table { border-collapse: collapse; font-size: 14px; min-width: 560px; }
.pagina .wp-block-post-content a { overflow-wrap: anywhere; }
.pagina .wp-block-post-content > ul.wp-block-list:not(.elenco-marchi) { padding-left: 40px; }
.pagina .wp-block-table td, .pagina .wp-block-table th { border: 1px solid #ddd; padding: 8px; vertical-align: top; }
.modulo .errore-modulo { color: #b00020; margin: 0; }
.modulo button { justify-self: end; border: 0; border-radius: 9999px; background: #000; color: #fff; font: inherit; padding: 12px 24px; cursor: pointer; }

/* Footer (Vitaliano 30/09: «scarno, poco comprensibile»): invito con i tre modi di contattarci, quattro colonne chiare, riga legale */
.piede { display: flow-root; /* il margine del primo figlio resta DENTRO il fondo scuro: niente fascia bianca sopra il footer */ background: var(--wp--preset--color--scuro); color: #fff; padding: 0 24px 32px; font-size: 15px; line-height: 24px; }
.piede a { color: inherit; text-decoration: none; }
.piede-invito { position: relative; overflow: hidden; max-width: 1392px; margin: 0 auto; transform: translateY(0); padding: 56px 56px; border-radius: 0 0 28px 28px;
  background: radial-gradient(120% 140% at 0% 0%, #1c6fd0 0%, var(--blu) 45%, #00336e 100%); display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
.girasole-piede { position: absolute; width: 420px; height: 420px; left: -120px; bottom: -200px; background: url("assets/img/girasole.webp") center/contain no-repeat; opacity: .16; animation: gira 80s linear infinite; pointer-events: none; }
.invito-testo, .invito-azioni { position: relative; }
.occhiello-giallo { margin: 0 0 8px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--giallo); }
.invito-titolo { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; font-weight: 600; }
.invito-azioni { display: grid; gap: 10px; }
.invito-azioni a { display: block; text-align: center; padding: 14px 20px; border-radius: 999px; font-weight: 600; transition: transform .25s var(--morbido), background .25s; }
.invito-azioni .giallo { background: var(--wp--preset--color--giallo); color: #000; }
.invito-azioni .chiaro { border: 1.5px solid rgba(255,255,255,.45); }
.invito-azioni a:hover { transform: translateY(-2px); }
.invito-azioni .chiaro:hover { background: rgba(255,255,255,.1); }
.piede-colonne { max-width: 1392px; margin: 64px auto 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; }
.piede-marchio img { width: 100%; max-width: 280px; height: auto; margin-bottom: 18px; border-radius: 4px; }
.piede-marchio p { margin: 0 0 18px; color: rgba(255,255,255,.75); max-width: 300px; }
.piede-titolo { margin: 0 0 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--giallo); }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.piede ul a, .piede-showroom a { color: rgba(255,255,255,.85); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--morbido), color .2s; }
.piede ul a:hover, .piede-showroom a:hover { color: #fff; background-size: 100% 1px; }
.piede-showroom p { margin: 0 0 12px; color: rgba(255,255,255,.85); }
.piede-orari { font-size: 14px; }
.piede .come-arrivare { display: inline-block; margin-top: 4px; color: var(--wp--preset--color--giallo); font-weight: 600; }
.piede .social { display: flex; gap: 10px; }
.piede .social a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: grid; place-items: center; transition: background .25s, color .25s, border-color .25s; }
.piede .social a:hover { background: var(--wp--preset--color--giallo); color: #000; border-color: var(--wp--preset--color--giallo); }
.piede .legale { max-width: 1392px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.65); }
.piede .legale a { text-decoration: underline; }
@media (max-width: 900px) {
  .piede { padding: 0 0 100px; }
  .piede-invito { grid-template-columns: 1fr; padding: 40px 24px; border-radius: 0 0 22px 22px; }
  .piede-colonne { grid-template-columns: 1fr 1fr; gap: 32px 20px; margin-top: 44px; padding: 0 24px; }
  .piede-marchio, .piede-showroom { grid-column: 1 / -1; }
  .piede .legale { margin: 40px 24px 0; flex-direction: column; gap: 6px; }
}

/* Pagine interne: colonna di Lago, il modulo resta largo */
.pagina { padding: 150px 0 80px; }
.pagina > .wp-block-post-title, .pagina .wp-block-post-content > :not(.modulo):not(.alignfull) { max-width: var(--colonna); margin-inline: auto; padding-inline: 24px; }
.pagina > .wp-block-post-title { font-weight: 400; font-size: 40px; line-height: 52px; margin-bottom: 32px; }
.pagina h2 { font-weight: 500; font-size: 24px; line-height: 32px; margin-top: 40px; }
.pagina .modulo { margin-top: 64px; }
.wp-block-button.scuro .wp-block-button__link { background: #000; color: #fff; }
.elenco-marchi { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.elenco-marchi li { border: 1px solid #ddd; border-radius: 12px; padding: 20px; font-weight: 500; text-align: center; }

/* Catalogo: griglia di foto 4:3, marchio piccolo sopra il nome */
.catalogo > *:not(.modulo), .scheda > *:not(.modulo) { max-width: 1392px; margin-inline: auto; padding-inline: 24px; }
.reparti { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 auto 40px; }
.reparti li a { display: inline-block; padding: 8px 16px; border: 1px solid #000; border-radius: 9999px; text-decoration: none; }
/* Filtri dei reparti (Vitaliano 30/09: «icone svg che si compongono e tasti su tutta la larghezza») */
.catalogo .filtri { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin: 0 auto 48px; }
.filtri a { position: relative; display: grid; justify-items: center; gap: 8px; padding: 18px 10px 16px; border: 1.5px solid #e3e6ec; border-radius: 16px; background: #fff;
  color: #111; text-decoration: none; text-align: center; overflow: hidden; transition: border-color .25s, color .25s, transform .3s var(--morbido), box-shadow .3s; }
.filtri a::before { content: ""; position: absolute; inset: auto 0 0 0; height: 0; background: var(--blu); transition: height .45s var(--morbido); z-index: 0; }
.filtri a > * { position: relative; z-index: 1; }
/* il tratto e' pieno di suo: solo l'animazione lo fa partire vuoto (con «meno animazioni» l'icona si vede subito) */
.filtri .icona { width: 34px; height: 34px; color: var(--blu); stroke-dasharray: 90; stroke-dashoffset: 0; animation: disegna 1.1s calc(.1s + var(--i, 0) * 90ms) var(--morbido) both; transition: color .25s; }
@keyframes disegna { from { stroke-dashoffset: 90; } }
.filtri .nome { font-weight: 600; font-size: 15px; line-height: 20px; }
.filtri .conta { font-size: 12px; color: #6b7280; transition: color .25s; }
.filtri a:hover { border-color: var(--blu); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,73,154,.14); }
.filtri a:hover .icona { animation: ridisegna .9s var(--morbido); }
@keyframes ridisegna { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
.filtri a[aria-current] { border-color: var(--blu); color: #fff; }
.filtri a[aria-current]::before { height: 100%; }
.filtri a[aria-current] .icona { color: var(--wp--preset--color--giallo); }
.filtri a[aria-current] .conta { color: rgba(255,255,255,.75); }
@media (max-width: 900px) {
  .catalogo .filtri { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 32px; }
  .filtri a:first-child { grid-column: 1 / -1; grid-auto-flow: column; justify-content: center; align-items: center; padding: 12px; }
  .filtri a { padding: 12px 4px; gap: 4px; border-radius: 14px; }
  .filtri .icona { width: 28px; height: 28px; }
  .filtri .nome { font-size: 13px; line-height: 17px; }
}
/* Filtro Stile: stessa grafica, riga piu' bassa e accanto (sotto) a quella dei reparti */
.catalogo .filtri--stile { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: -28px; }
.filtri--stile a { grid-auto-flow: column; justify-content: center; padding: 10px 14px; gap: 8px; }
.filtri--stile .icona { width: 20px; height: 20px; }
.filtri--stile .nome { font-size: 13px; }
@media (max-width: 900px) {
  .catalogo .filtri--stile { grid-template-columns: repeat(2, 1fr); margin-top: -12px; }
  .filtri--stile a:first-child { grid-column: auto; }
}
.griglia-prodotti .wp-block-post-template { gap: 40px 24px; }
.griglia-prodotti .wp-block-post-featured-image { margin-bottom: 12px; }
.griglia-prodotti .wp-block-post-featured-image img { border-radius: 12px; }
.marchio { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #555; }
.marchio a { text-decoration: none; }
.griglia-prodotti .wp-block-post-title { font-size: 18px; line-height: 26px; font-weight: 500; margin: 4px 0 0; }
.griglia-prodotti .wp-block-post-title a { text-decoration: none; }
.wp-block-query-pagination { margin-top: 48px; gap: 12px; }
/* Scheda prodotto: foto a sinistra, testo a destra che resta fermo mentre si guardano le foto (Vitaliano 30/09) */
.scheda-prodotto { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
.galleria-prodotto { display: grid; gap: 12px; }
.foto-grande { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #f3f4f6; }
.foto-grande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, transform .6s var(--morbido); }
.foto-grande img.cambia { opacity: 0; transform: scale(1.02); }
.miniature { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.miniature button { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: none; cursor: pointer; aspect-ratio: 1; transition: border-color .2s, opacity .2s; opacity: .7; }
.miniature button img { width: 100%; height: 100%; object-fit: cover; }
.miniature button:hover, .miniature button[aria-current] { opacity: 1; border-color: var(--blu); }
.testo-prodotto { position: sticky; top: calc(var(--testata-h) + 32px); }
.marchio-prodotto { display: inline-block; margin-bottom: 18px; }
.marchio-prodotto img { height: 42px; width: 170px; object-fit: contain; object-position: left; }
.testo-prodotto h1 { margin: 0 0 14px; font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
.pillola-reparto { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: #eef3fa; color: var(--blu); text-decoration: none; font-weight: 600; font-size: 14px; }
.pillola-reparto .icona { width: 22px; height: 22px; }
.descrizione { margin-top: 24px; font-size: 17px; line-height: 28px; color: #222; }
.descrizione p { margin: 0 0 14px; }
.descrizione p:first-child { font-size: 19px; line-height: 30px; font-weight: 500; color: #000; }
.fonte-testo { font-size: 12px; color: #6b7280; margin: 4px 0 0; }
.dove { margin: 24px 0 0; padding: 16px 18px; border-left: 3px solid var(--wp--preset--color--giallo); background: #fafafa; font-size: 15px; line-height: 23px; }
.azioni-prodotto { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.azioni-prodotto a { flex: 1 1 180px; text-align: center; padding: 15px 22px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: transform .25s var(--morbido), box-shadow .25s; }
.azioni-prodotto .primario { background: var(--blu); color: #fff; }
.azioni-prodotto .secondario { border: 1.5px solid #25d366; color: #128c4a; }
.azioni-prodotto a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.14); }
.altri-prodotti { margin: 88px auto 24px; }
.altri-prodotti h2 { font-weight: 600; font-size: 28px; margin: 0 0 24px; }
.altri-prodotti ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.altri-prodotti a { display: grid; gap: 10px; color: inherit; text-decoration: none; font-weight: 500; }
.altri-prodotti .foto { display: block; position: relative; height: 0; padding-bottom: 75%; border-radius: 14px; overflow: hidden; }
.altri-prodotti img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--morbido); }
.altri-prodotti a:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
  .scheda-prodotto { grid-template-columns: 1fr; gap: 28px; }
  .testo-prodotto { position: static; }
  .foto-grande { border-radius: 16px; }
  .miniature { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .altri-prodotti ul { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.scheda .wp-block-post-title { margin: 8px 0 8px; }
.scheda .reparto { margin-bottom: 32px; }
.scheda .wp-block-gallery { gap: 12px; }
.scheda .wp-block-gallery img { border-radius: 12px; }
.scheda .vedilo { font-size: 18px; line-height: 28px; margin-top: 32px; }

/* Reparti: introduzione; domande frequenti apribili */
.intro-reparto { max-width: 820px !important; margin: 0 0 32px !important; font-size: 17px; line-height: 28px; }
.faq { margin-top: 64px; }
.presentazione.faq-home { padding-top: 0; }
.faq-home .faq { margin-top: 0; }
.faq h2 { font-weight: 500; font-size: 24px; line-height: 32px; margin-bottom: 16px; }
.faq details { border-top: 1px solid #ddd; padding: 16px 0; }
.faq details:last-child { border-bottom: 1px solid #ddd; }
.faq summary { cursor: pointer; font-weight: 500; }
.faq p { margin: 12px 0 0; }

/* Marchi: griglia dei loghi, ognuno porta alla pagina del marchio (Vitaliano 30/09) */
.griglia-marchi { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-flow: dense; gap: 16px; } /* dense: la card doppia (logo-largo) non lascia un buco quando non entra nella riga */
.griglia-marchi a { display: grid; place-items: center; height: 120px; padding: 20px; border: 1px solid #e5e5e5; border-radius: 16px; background: #fff; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.griglia-marchi a:hover, .griglia-marchi a:focus-visible { border-color: var(--blu); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.griglia-marchi img { width: 100%; height: 60px; object-fit: contain; } /* stesso riquadro per tutti: gli SVG non hanno misura propria */
.griglia-marchi li.logo-largo { grid-column: span 2; } /* colombini, nicoletti: scritte larghe e basse, servono due colonne per restare leggibili */
.nome-marchio { font-weight: 600; font-size: 18px; text-align: center; }
.logo-scuro { filter: brightness(0); } /* loghi bianchi (Biel, Nicoletti): scuri sul fondo chiaro */
/* Pagina del marchio: foto grande, logo su riquadro bianco, presentazione + tre foto (Vitaliano 30/09) */
.pagina.pagina-marchio { padding-top: 0; }
.pagina-marchio > .testata-marchio { max-width: none; padding: 0; }
.testata-marchio { position: relative; height: 72svh; min-height: 420px; max-height: 680px; overflow: hidden; display: flex; align-items: flex-end; color: #fff; }
.testata-marchio .sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testata-marchio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.1) 55%, rgba(0,0,0,0)); }
.testata-marchio.senza-foto { background: linear-gradient(135deg, var(--blu), #002a5c); height: 48svh; max-height: 420px; min-height: 320px; }
.testata-marchio .dentro { position: relative; z-index: 1; width: min(var(--colonna), 100% - 48px); margin: 0 auto 48px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.carta-logo { background: #fff; border-radius: 20px; padding: 22px 30px; box-shadow: 0 12px 40px rgba(0,0,0,.25); display: grid; place-items: center; min-width: 200px; }
.carta-logo img { height: 64px; width: 220px; object-fit: contain; }
.carta-logo .nome-marchio { color: #000; font-size: 22px; }
.testata-marchio h1 { margin: 0; font-size: 44px; line-height: 52px; font-weight: 600; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.presenta-marchio { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; margin: 56px auto 72px !important; }
.presenta-marchio .testo p { font-size: 18px; line-height: 30px; margin: 0 0 16px; }
.presenta-marchio .testo p:first-child::first-letter { font-size: 1.4em; font-weight: 600; color: var(--blu); }
.mini-galleria { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-galleria a:first-child { grid-column: 1 / -1; }
.mini-galleria img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; display: block; }
.mini-galleria a:first-child img { aspect-ratio: 16/9; }
.titolo-sezione { font-weight: 600; font-size: 28px; margin: 0 auto 24px !important; }
@media (max-width: 900px) {
  .testata-marchio { height: 58svh; min-height: 360px; max-height: 520px; }
  .testata-marchio .dentro { margin-bottom: 28px; gap: 16px; }
  .carta-logo { padding: 14px 18px; min-width: 150px; border-radius: 14px; }
  .carta-logo img { height: 44px; width: 160px; }
  .testata-marchio h1 { font-size: 32px; line-height: 38px; }
  .presenta-marchio { grid-template-columns: 1fr; gap: 24px; margin: 32px auto 48px !important; }
  .presenta-marchio .testo p { font-size: 17px; line-height: 28px; }
}
.logo-marchio img { height: 72px; width: 260px; object-fit: contain; object-position: left; margin-bottom: 24px; }
.logo-marchio .nome-marchio { display: none; } /* senza logo basta il titolo */
.torna-marchi { margin-top: 32px; }
/* 01/10: collegamenti dalle pagine marchio/reparto alle pagine Google corrispondenti ([loreti_collegamenti_google]) */
.leggi-anche { max-width: var(--colonna); margin: 40px auto 0; padding-inline: 24px; }
.leggi-anche .piede-titolo { color: var(--blu); }
.leggi-anche ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.leggi-anche a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .griglia-marchi { grid-template-columns: 1fr 1fr; gap: 12px; } .griglia-marchi a { height: 96px; padding: 14px; } .griglia-marchi img { height: 44px; } }

/* WhatsApp fisso in basso a destra, su tutte le pagine (Vitaliano 30/09). Sul telefono sta sopra la barra. */
.whatsapp { box-sizing: border-box; position: fixed; right: 24px; bottom: 24px; z-index: 35; display: flex; align-items: center; gap: 0; height: 60px; min-width: 60px; padding: 0 15px;
  border-radius: 999px; background: #25d366; color: #fff; text-decoration: none; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,.22);
  transition: gap .35s var(--morbido), transform .25s var(--morbido), box-shadow .25s; }
.whatsapp::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25d366; animation: onda 2.6s ease-out infinite; }
@keyframes onda { from { transform: scale(1); opacity: .7; } to { transform: scale(1.45); opacity: 0; } }
.whatsapp-testo { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .4s var(--morbido); }
.whatsapp:hover, .whatsapp:focus-visible { gap: 10px; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.whatsapp:hover .whatsapp-testo, .whatsapp:focus-visible .whatsapp-testo { max-width: 90px; }
body:has(.pannello.aperto) .whatsapp { opacity: 0; pointer-events: none; }

/* Barra fissa contatti, solo telefono (metodo-design: target >= 60 px; decisa 28/09; WhatsApp ora e' il pulsante tondo) */
.barra-contatti { display: none; }
@media (max-width: 900px) {
  .whatsapp { right: 16px; bottom: 76px; }
  .barra-contatti { display: grid; grid-template-columns: repeat(2, 1fr); position: fixed; inset: auto 0 0 0; z-index: 30; background: var(--blu); }
  .barra-contatti a { min-height: 60px; display: grid; place-items: center; color: #fff; text-decoration: none; font-weight: 500; }
  .barra-contatti a + a { border-left: 1px solid rgba(255,255,255,.25); }
  .barra-contatti a:last-child { background: var(--wp--preset--color--giallo); color: #000; }
  .scena.wp-block-cover { padding: 0 24px 124px; }
  .piede { padding-bottom: 100px; }
}
@media (max-width: 900px) {
  .testata .interno { justify-content: flex-end; gap: 4px; padding-right: 8px; padding-left: 0; }
  .testata .menu { display: none; }
  .scritta-menu { display: none; }
  /* 01/10 Vitaliano: «la linea gialla deve combaciare con lo schermo su e con la parte bassa della testata, come su
     desktop» → niente logo ridotto e centrato (lasciava un margine sopra e sotto): testata più bassa, logo a tutta altezza. */
  :root { --testata-h: 56px; }
  .pallini { display: none; }
  .scena h2 { font-size: 28px; line-height: 34px; }
  .presentazione h1 { font-size: 28px; line-height: 36px; }
  .modulo { padding: 0; }
  .modulo .carta { grid-template-columns: 1fr; padding: 48px 24px; border-radius: 0 0 20px 20px; gap: 24px; }
  .modulo h2 { font-size: 36px; line-height: 44px; }
  .griglia-prodotti .wp-block-post-template { grid-template-columns: 1fr 1fr !important; gap: 24px 12px; }
  .griglia-prodotti .wp-block-post-title { font-size: 15px; line-height: 21px; }
  .pagina > .wp-block-post-title, .catalogo .wp-block-post-title:first-child { font-size: 30px; line-height: 38px; }
}
/* ===== Prenotazione a passi (Vitaliano 30/09: «molto più accattivante, il logo in trasparenza, stupisci») ===== */
.prenota-nuova { padding: 0 24px; }
.carta-prenota { position: relative; overflow: hidden; max-width: 1392px; margin: 0 auto; border-radius: 0 0 28px 28px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, #1c6fd0 0%, var(--blu) 38%, #00336e 100%); padding: 72px 64px;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; }
.filigrana { position: absolute; width: 620px; height: 620px; right: -170px; top: -150px; background: url("assets/img/girasole.webp") center/contain no-repeat;
  opacity: .2; filter: saturate(.8); pointer-events: none; animation: gira 90s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.carta-prenota > :not(.filigrana) { position: relative; min-width: 0; } /* il girasole resta sfondo, non occupa spazio */
.intestazione .occhiello { margin: 0 0 12px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--giallo); font-weight: 600; }
.intestazione h2 { margin: 0 0 16px; font-weight: 600; font-size: 46px; line-height: 54px; }
.intestazione > p { font-size: 17px; line-height: 27px; opacity: .92; margin: 0 0 32px; max-width: 420px; }
.passi { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.passi li { display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: .6; transition: opacity .3s; }
.passi li span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; font-weight: 600; transition: background .3s, color .3s, border-color .3s; }
.passi li + li::before { content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: .5; }
.passi li.attivo, .passi li.fatto { opacity: 1; }
.passi li.attivo span { background: var(--wp--preset--color--giallo); border-color: var(--wp--preset--color--giallo); color: #000; }
.passi li.fatto span { background: #fff; color: var(--blu); border-color: #fff; }
.corpo-prenota { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; padding: 32px; backdrop-filter: blur(6px); }
.prenota-nuova fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.prenota-nuova legend { font-size: 24px; font-weight: 600; margin-bottom: 20px; padding: 0; }
.prenota-js .passo:not(.corrente) { display: none; }
.prenota-js .passo.corrente { animation: entra-passo .45s var(--morbido, ease) both; }
@keyframes entra-passo { from { opacity: 0; transform: translateX(24px); } }
.giorni { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.giorni button, .orari button, .ambienti span { font: inherit; color: #fff; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.35); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s; }
.giorni button { flex: 0 0 76px; scroll-snap-align: start; border-radius: 16px; padding: 10px 0; display: grid; gap: 2px; text-align: center; }
.giorni button small { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.giorni button strong { font-size: 24px; font-weight: 600; line-height: 28px; }
.giorni.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; overflow: visible; padding: 0; }
.calendario .nome-giorno { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; text-align: center; opacity: .7; padding-bottom: 4px; }
.calendario button { flex: none; width: 100%; min-width: 0; border-radius: 12px; padding: 6px 0; min-height: 48px; gap: 0; align-content: center; justify-items: center; }
.calendario button strong { font-size: 18px; line-height: 22px; }
.calendario button small { font-size: 10px; min-height: 12px; }
.calendario button:disabled { opacity: .25; cursor: not-allowed; }
.giorni button:not(:disabled):hover, .orari button:hover, .ambienti label:hover span { border-color: #fff; transform: translateY(-2px); }
.giorni button[aria-pressed="true"], .orari button[aria-pressed="true"], .ambienti input:checked + span { background: var(--wp--preset--color--giallo); color: #000; border-color: var(--wp--preset--color--giallo); }
.orari { margin-top: 18px; min-height: 60px; }
.orari h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin: 12px 0 10px; opacity: .8; }
.orari .gruppo { display: flex; flex-wrap: wrap; gap: 8px; }
.orari button { border-radius: 999px; padding: 9px 16px; font-size: 15px; }
.suggerimento { opacity: .75; margin: 8px 0; }
.ambienti { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.ambienti input { position: absolute; opacity: 0; }
.ambienti span { display: inline-block; border-radius: 999px; padding: 10px 18px; font-size: 15px; }
.ambienti input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.prenota-nuova .campo { display: grid; gap: 6px; font-size: 14px; color: rgba(255,255,255,.9); }
.prenota-nuova .campo em { font-style: normal; opacity: .7; }
.prenota-nuova .campo input, .prenota-nuova .campo textarea { font: inherit; font-size: 16px; color: #fff; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 12px; padding: 12px 14px; transition: border-color .2s, background .2s; }
.prenota-nuova .campo input:focus, .prenota-nuova .campo textarea:focus { outline: none; border-color: var(--wp--preset--color--giallo); background: rgba(255,255,255,.14); }
.prenota-nuova .campo input::placeholder, .prenota-nuova .campo textarea::placeholder { color: rgba(255,255,255,.55); }
.griglia-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.riepilogo:not(:empty) { margin: 20px 0 16px; padding: 14px 16px; border-radius: 14px; background: rgba(255,221,0,.14); border: 1px solid rgba(255,221,0,.5); font-size: 15px; line-height: 22px; }
.prenota-nuova .consenso { display: flex; gap: 10px; font-size: 13px; line-height: 20px; margin-top: 12px; color: rgba(255,255,255,.9); }
.prenota-nuova .consenso a { color: #fff; }
.comandi { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.comandi button { font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: 13px 26px; cursor: pointer; transition: transform .2s, box-shadow .2s, opacity .2s; }
.comandi .avanti, .comandi [type="submit"] { margin-left: auto; background: var(--wp--preset--color--giallo); color: #000; }
.comandi .indietro { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.comandi button:disabled { opacity: .4; cursor: not-allowed; }
.comandi button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.prenota-nuova .nota-modulo { font-size: 12px; opacity: .75; margin: 14px 0 0; text-align: right; }
.prenota-nuova .errore-modulo { color: #fff; background: #b00020; padding: 8px 12px; border-radius: 10px; }
@media (max-width: 900px) {
  .prenota-nuova { padding: 0; }
  .carta-prenota { grid-template-columns: 1fr; padding: 48px 24px 40px; gap: 28px; border-radius: 0 0 22px 22px; }
  .filigrana { width: 380px; height: 380px; right: -110px; top: -90px; opacity: .24; }
  .intestazione h2 { font-size: 34px; line-height: 40px; }
  .corpo-prenota { padding: 22px 18px; border-radius: 18px; }
  .griglia-campi { grid-template-columns: 1fr; }
  .giorni button { flex-basis: 68px; }
}

/* ===== Movimento (Vitaliano 30/09: «più animazioni, fluido come Castelli Solari»): solo CSS nativo + IntersectionObserver,
   niente librerie. Tutto si ferma con prefers-reduced-motion. ===== */
:root { --morbido: cubic-bezier(.22, .61, .36, 1); }
/* passaggio morbido fra una pagina e l'altra (View Transitions fra documenti: Chrome, Edge, Safari recenti) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 260ms var(--morbido) both svanisce; }
::view-transition-new(root) { animation: 420ms var(--morbido) both compare; }
@keyframes svanisce { to { opacity: 0; } }
@keyframes compare { from { opacity: 0; transform: translateY(12px); } }

/* comparsa mentre si scorre: loreti.js mette .rivela e poi .visibile */
.rivela { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--morbido), transform .8s var(--morbido); transition-delay: calc(var(--i, 0) * 70ms); }
.rivela.visibile { opacity: 1; transform: none; }

/* scene della home: la foto si avvicina piano, il testo sale quando la scena e' in vista */
.movimento .scena .wp-block-cover__image-background { transform: scale(1.08); transition: transform 6s var(--morbido); }
.movimento .scena.in-vista .wp-block-cover__image-background { transform: scale(1); }
.movimento .scena .wp-block-cover__inner-container > * { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--morbido), transform .9s var(--morbido); }
.movimento .scena.in-vista .wp-block-cover__inner-container > * { opacity: 1; transform: none; }
.movimento .scena.in-vista .wp-block-cover__inner-container > :nth-child(2) { transition-delay: .15s; }
.movimento .scena.in-vista .wp-block-cover__inner-container > :nth-child(3) { transition-delay: .3s; }
.pallini a { transition: background .3s, transform .3s var(--morbido); }
.pallini a.attivo { transform: scale(1.3); }

/* bottoni e schede */
.wp-block-button__link, .modulo button, .pillola { transition: transform .25s var(--morbido), box-shadow .25s, background .25s; }
.wp-block-button__link:hover, .modulo button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.griglia-prodotti .wp-block-post-featured-image, .mini-galleria a { overflow: hidden; border-radius: 12px; display: block; }
.griglia-prodotti .wp-block-post-featured-image img, .mini-galleria img { transition: transform .7s var(--morbido); }
.griglia-prodotti li:hover .wp-block-post-featured-image img, .mini-galleria a:hover img { transform: scale(1.05); }
.testata-marchio .sfondo { animation: avvicina 7s var(--morbido) both; }
@keyframes avvicina { from { transform: scale(1.1); } }
.carta-logo { animation: compare .9s .2s var(--morbido) both; }
.testata-marchio h1 { animation: compare .9s .35s var(--morbido) both; }

/* menu del computer: riga che cresce sotto la voce */
.testata .menu a { position: relative; }
.testata .menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--morbido); }
.testata .menu a:hover::after, .testata .menu a:focus-visible::after { transform: scaleX(1); }

/* pulsante a tre righe che diventa una X */
.apri-menu path { transition: transform .35s var(--morbido), opacity .2s; transform-origin: center; transform-box: fill-box; }
.apri-menu.x .r1 { transform: translateY(7px) rotate(45deg); }
.apri-menu.x .r2 { opacity: 0; transform: scaleX(0); }
.apri-menu:hover .r2 { transform: translateX(-8px) scaleX(1.45); }
.apri-menu.x .r3 { transform: translateY(-7px) rotate(-45deg); }

/* Pannello del menu, telefono e computer (Vitaliano 30/09: «un hamburger oltre al menu, che si apre come Lago»):
   scende come una tenda blu, le voci salgono una dopo l'altra, accanto la foto cambia al passaggio del mouse.
   Sta sotto la testata (la testata ha backdrop-filter: un elemento fisso resterebbe chiuso dentro). */
.testata.menu-aperto { background: #fff; }
/* 03/10 Vitaliano: «le scritte finiscono sotto lo schermo e non si leggono, sia mobile che desktop» → il padding
   (64+64 px) si SOMMAVA all'altezza: il fondo del pannello stava 128 px sotto lo schermo e non si poteva scorrere. */
.pannello { box-sizing: border-box; position: absolute; top: var(--testata-h); left: 0; right: 0; height: calc(100svh - var(--testata-h)); z-index: 1; overflow-y: auto;
  background: var(--blu); color: #fff; display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; padding: 72px max(24px, (100vw - 1392px) / 2) 48px 160px;
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--morbido), visibility 0s .7s; }
.pannello.aperto { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--morbido), visibility 0s; }
/* margin-block:auto e non justify-content:center: se lo schermo e' basso il contenuto parte dall'alto e si scorre
   (centrato, la parte che sborda in alto non si raggiunge mai — Vitaliano 30/09: «non riesco a scendere») */
.pannello { align-items: start; overscroll-behavior: contain; }
.pannello .voci { display: flex; flex-direction: column; margin-block: auto; }
.pannello .voci a { display: flex; align-items: center; gap: 20px; color: #fff; text-decoration: none; font-weight: 500; font-size: clamp(26px, min(4vw, 5vh), 58px); line-height: 1.2;
  padding: 6px 0; overflow: hidden; opacity: 0; transform: translateY(40px); transition: opacity .6s var(--morbido), transform .6s var(--morbido), color .25s; }
.pannello.aperto .voci a { opacity: 1; transform: none; transition-delay: calc(.18s + var(--i, 0) * 70ms), calc(.18s + var(--i, 0) * 70ms), 0s; }
.pannello .freccia { flex: none; color: var(--wp--preset--color--giallo); opacity: 0; transform: translateX(-16px); transition: opacity .3s, transform .35s var(--morbido); }
.pannello .voci a:hover, .pannello .voci a:focus-visible { color: var(--wp--preset--color--giallo); }
.pannello .voci a:hover .freccia, .pannello .voci a:focus-visible .freccia { opacity: 1; transform: none; }
.pannello .lato { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin-block: auto; opacity: 0; transform: translateY(24px); transition: opacity .6s .45s var(--morbido), transform .6s .45s var(--morbido); }
.pannello.aperto .lato { opacity: 1; transform: none; }
.pannello .anteprima { grid-column: 1 / -1; margin: 0; aspect-ratio: 16 / 10; max-height: 42vh; width: 100%; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.08); }
.pannello .anteprima { position: relative; }
.pannello .anteprima img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform 1.2s var(--morbido); }
.pannello .anteprima img.cambia { opacity: 0; transform: scale(1.04); }
.pannello .lato p { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--giallo); font-weight: 600; }
.pannello .lato a, .pannello .lato span { display: block; color: #fff; text-decoration: none; font-size: 15px; line-height: 26px; }
.pannello .lato a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .pannello { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px 96px; align-content: start; }
  .pannello .voci a { font-size: 32px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.15); justify-content: space-between; }
  .pannello .freccia { opacity: .6; transform: none; }
  .pannello .anteprima { display: none; }
}

/* ===== News (Vitaliano 30/09) ===== */
.schede-news { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.schede-news a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
/* riquadro della foto a misura fissa (75% della larghezza): la foto non puo' allungarlo. Il 30/09 nel Chrome di Vitaliano
   il riquadro cresceva oltre la foto e spingeva i testi sotto il pulsante «Tutte le news» */
.schede-news .foto { display: block; position: relative; flex: none; height: 0; padding-bottom: 75%; margin: 0 0 16px; border-radius: 16px; overflow: hidden; background: #eef1f5; }
.schede-news .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--morbido); }
.schede-news a:hover figure img { transform: scale(1.05); }
.schede-news .occhiello { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blu); font-weight: 600; margin-bottom: 8px; }
.schede-news strong { font-size: 21px; line-height: 28px; font-weight: 600; margin-bottom: 10px; }
.schede-news .riassunto { color: #444; font-size: 15px; line-height: 24px; flex: 1; }
.schede-news .leggi { margin-top: 14px; font-weight: 600; color: var(--blu); }
.schede-news .leggi::after { content: "→"; margin-left: 8px; display: inline-block; transition: transform .3s var(--morbido); }
.schede-news a:hover .leggi::after { transform: translateX(6px); }
.news-home { padding: 24px 24px 88px; max-width: 1392px; margin: 0 auto; }
.tutte-news { text-align: center; margin-top: 40px; }
.tutte-news a { display: inline-block; padding: 12px 26px; border: 1.5px solid #000; border-radius: 999px; text-decoration: none; font-weight: 600; }
.pagina-news > *:not(.prenota-nuova) { max-width: 1392px; margin-inline: auto; padding-inline: 24px; }
.pagina-news .schede-news { margin-bottom: 80px; }
.articolo .testa-articolo, .articolo .corpo-articolo > *, .articolo .altre-news { max-width: 760px; margin-inline: auto; padding-inline: 24px; }
.articolo .altre-news { max-width: 1392px; margin: 88px auto 64px; }
.occhiello-articolo { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--blu); font-weight: 600; }
.articolo .wp-block-post-title { font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; margin: 0 0 12px; }
.data-articolo { color: #6b7280; font-size: 14px; margin-bottom: 32px; }
.copertina-articolo { max-width: 1100px; margin: 0 auto 48px !important; padding-inline: 24px; }
.copertina-articolo img { border-radius: 20px; }
.corpo-articolo { font-size: 18px; line-height: 30px; }
.corpo-articolo h2 { font-size: 26px; line-height: 34px; font-weight: 600; margin: 44px auto 12px; }
.corpo-articolo > p:first-child { font-size: 21px; line-height: 33px; }
.corpo-articolo a { color: var(--blu); }
@media (max-width: 900px) {
  .schede-news { grid-template-columns: 1fr; gap: 36px; }
  .corpo-articolo { font-size: 17px; line-height: 28px; }
}

/* ===== Pagine a tutta larghezza: Contatti e Promozioni ===== */
.pagina.pagina-piena { padding-top: var(--testata-h); }
/* le sezioni di queste pagine hanno i loro margini: qui si toglie solo la colonna stretta delle pagine interne */
.pagina.pagina-piena .wp-block-post-content > :not(.prenota-nuova) { max-width: none; margin-inline: 0; padding-inline: 24px; }
.pagina.pagina-piena .wp-block-post-content > .contatti-testa, .pagina.pagina-piena .wp-block-post-content > .promo-testa { padding-inline: 24px; }
.pagina.pagina-piena .wp-block-post-content > .canali, .pagina.pagina-piena .wp-block-post-content > .dove-siamo,
.pagina.pagina-piena .wp-block-post-content > .foto-showroom, .pagina.pagina-piena .wp-block-post-content > .promo-reparti { max-width: calc(var(--colonna) + 48px); margin-inline: auto; }
.pagina.pagina-piena .wp-block-post-content > .promo-reparti { max-width: 1392px; }
.pagina-piena .prenota-nuova { margin-top: 72px; }

/* Contatti (Vitaliano 30/09: «un girasole inserito in modo artistico animato, dai un po' di senso grafico») */
.contatti-testa { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: center; padding: 72px 24px 88px;
  background: radial-gradient(110% 120% at 100% 0%, #1c6fd0 0%, var(--blu) 45%, #00336e 100%); color: #fff; }
.contatti-testa .dentro { position: relative; width: min(var(--colonna), 100%); margin: 0 auto; }
.occhiello-blu { margin: 0 0 12px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--giallo); }
.contatti-testa h1 { margin: 0 0 14px; font-size: clamp(40px, 6vw, 76px); line-height: 1; font-weight: 600; }
.contatti-testa .sotto { margin: 0; max-width: 480px; font-size: 18px; line-height: 28px; opacity: .92; }
/* il girasole entra ruotando e poi gira piano, mezzo fuori dal riquadro */
.girasole-grande { position: absolute; right: -140px; top: 50%; width: 560px; height: 560px; translate: 0 -50%; pointer-events: none; }
.girasole-grande img { width: 100%; height: 100%; object-fit: contain; animation: fiore-entra 1.6s var(--morbido) both, gira 60s 1.6s linear infinite; filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
@keyframes fiore-entra { from { transform: rotate(-120deg) scale(.4); opacity: 0; } }
.stato-negozio { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 600; font-size: 15px; }
.lucina { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; }
.stato-negozio.aperto .lucina { background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: battito 2s infinite; }
@keyframes battito { to { box-shadow: 0 0 0 10px rgba(74,222,128,0); } }
.canali { list-style: none; margin: -48px auto 0; padding: 0 24px; position: relative; z-index: 2; max-width: calc(var(--colonna) + 48px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.canali a { display: grid; gap: 4px; padding: 26px 24px; border-radius: 20px; background: #fff; color: #111; text-decoration: none; box-shadow: 0 16px 40px rgba(0,30,70,.12); transition: transform .3s var(--morbido), box-shadow .3s; }
.canali a:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,30,70,.18); }
.canali svg { color: var(--blu); margin-bottom: 10px; }
.canali .tipo { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; font-weight: 600; }
.canali strong { font-size: 21px; font-weight: 600; }
.canali small { color: #6b7280; font-size: 14px; }
.dove-siamo { max-width: calc(var(--colonna) + 48px); margin: 72px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }
.mappa { position: relative; display: block; border-radius: 24px; overflow: hidden; aspect-ratio: 15 / 8; box-shadow: 0 16px 40px rgba(0,30,70,.12); }
.mappa > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--morbido); }
.mappa:hover > img { transform: scale(1.04); }
.spillo { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: var(--blu); box-shadow: 0 8px 20px rgba(0,0,0,.3); animation: spillo-cade .9s .3s var(--morbido) both; }
.spillo img { width: 40px; height: auto; animation: gira 12s linear infinite; }
.spillo .onda { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blu); animation: onda 2.4s ease-out infinite; }
@keyframes spillo-cade { from { transform: translateY(-60px); opacity: 0; } }
.mappa .apri { position: absolute; left: 16px; bottom: 16px; padding: 10px 18px; border-radius: 999px; background: #fff; color: #000; font-weight: 600; font-size: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.mappa .osm { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: #333; background: rgba(255,255,255,.75); padding: 1px 6px; border-radius: 4px; }
.indirizzo h2 { margin: 0 0 12px; font-size: 22px; font-weight: 600; }
.indirizzo h2 + p { margin-top: 0; }
.indirizzo p { font-size: 17px; line-height: 27px; }
.indirizzo .come { color: #444; font-size: 15px; line-height: 24px; margin-bottom: 32px; }
.orari-negozio { border-collapse: collapse; width: 100%; font-size: 16px; }
.orari-negozio th, .orari-negozio td { text-align: left; vertical-align: top; padding: 12px 0; border-top: 1px solid #e5e7eb; }
.orari-negozio th { font-weight: 500; padding-right: 16px; }
.orari-negozio tr.oggi th, .orari-negozio tr.oggi td { color: var(--blu); font-weight: 600; }
.foto-showroom { max-width: calc(var(--colonna) + 48px); margin: 72px auto 0; padding: 0 24px; }
.foto-showroom img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 62%; border-radius: 24px; }
.foto-showroom figcaption { margin-top: 10px; font-size: 14px; color: #6b7280; }
@media (max-width: 900px) {
  .contatti-testa { min-height: 400px; padding: 56px 24px 96px; align-items: flex-start; }
  .girasole-grande { width: 320px; height: 320px; right: -110px; top: auto; bottom: -110px; translate: none; opacity: .9; }
  .canali { grid-template-columns: 1fr; gap: 10px; margin-top: -56px; }
  .canali a { grid-template-columns: auto 1fr; grid-template-areas: "i t" "i s" "i m"; column-gap: 16px; padding: 18px 20px; align-items: center; }
  .canali svg { grid-area: i; margin: 0; }
  .dove-siamo { grid-template-columns: 1fr; margin-top: 48px; gap: 28px; }
  .mappa { aspect-ratio: 4 / 3; border-radius: 18px; }
  .foto-showroom img { aspect-ratio: 4 / 5; }
}

/* Promozione «Sconti veri»: ripresa dalle grafiche approvate (blu notte, nastro giallo, 60% gigante) */
.promo-testa { position: relative; overflow: hidden; min-height: calc(100svh - var(--testata-h)); display: grid; place-items: center; text-align: center; padding: 64px 24px;
  background: radial-gradient(90% 80% at 50% 30%, #243a6b 0%, #1b2b50 55%, #111c36 100%); color: #fff; }
.promo-fiore { position: absolute; width: 900px; max-width: none; left: 50%; top: 50%; translate: -50% -50%; opacity: .08; animation: gira 120s linear infinite; pointer-events: none; }
.promo-testa .dentro { position: relative; }
.nastro { margin: 0 auto 8px; display: inline-block; transform: rotate(-4deg); }
.nastro span { display: inline-block; padding: 10px 44px 14px; background: linear-gradient(180deg, #ffe44d, var(--wp--preset--color--giallo) 60%, #e9c400);
  color: #1b2b50; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(44px, 9vw, 112px); line-height: 1; letter-spacing: -.01em;
  clip-path: polygon(3% 0, 100% 6%, 97% 100%, 0 94%); animation: nastro-srotola 1s .2s var(--morbido) both; }
@keyframes nastro-srotola { from { clip-path: polygon(3% 0, 3% 6%, 0 100%, 0 94%); } }
.percentuale { margin: 12px 0 0; font-size: clamp(26px, 4vw, 44px); font-style: italic; color: var(--wp--preset--color--giallo); font-weight: 500; text-transform: uppercase; }
.percentuale strong { font-style: normal; font-size: clamp(120px, 22vw, 260px); line-height: .9; font-weight: 700; letter-spacing: -.04em; vertical-align: -0.12em; margin-left: 8px; display: inline-block; animation: compare .9s .5s var(--morbido) both; }
.su-tutto { margin: 8px 0 0; font-size: clamp(20px, 2.6vw, 30px); font-style: italic; }
.scadenza { margin: 6px 0 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; font-style: italic; color: var(--wp--preset--color--giallo); text-transform: uppercase; }
.conto { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.conto span { display: grid; min-width: 86px; padding: 12px 8px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.conto b { font-size: 34px; line-height: 40px; letter-spacing: 0; }
.promo-azioni { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.promo-azioni a { padding: 15px 28px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: transform .25s var(--morbido); }
.promo-azioni a:hover { transform: translateY(-2px); }
.promo-azioni .primario { background: var(--wp--preset--color--giallo); color: #1b2b50; }
.promo-azioni .secondario { border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.promo-testa.finita .percentuale, .promo-testa.finita .su-tutto { opacity: .55; }
.promo-testa.finita .percentuale strong { text-decoration: line-through; text-decoration-thickness: 6px; text-decoration-color: rgba(255,221,0,.7); }
.nota-finita { max-width: 520px; margin: 18px auto 0; font-size: 17px; line-height: 26px; }
.promo-reparti { max-width: 1392px; margin: 80px auto 0; padding: 0 24px; }
.promo-reparti h2 { text-align: center; font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; margin: 0 0 32px; }
.promo-reparti ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promo-reparti a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; color: #fff; text-decoration: none; }
.promo-reparti img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--morbido); }
.promo-reparti a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,28,54,.85), rgba(17,28,54,0) 60%); }
.promo-reparti span { position: absolute; left: 22px; bottom: 18px; z-index: 1; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.promo-reparti li:nth-child(even) span { color: var(--wp--preset--color--giallo); }
.promo-reparti a:hover img { transform: scale(1.06); }
.promo-frase { text-align: center; padding: 88px 24px 0; }
.promo-frase p { margin: 0 auto; max-width: 900px; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.25; color: #1b2b50; }
.promo-frase em { color: var(--blu); }
@media (max-width: 900px) {
  .promo-testa { min-height: auto; padding: 56px 20px 64px; }
  .promo-fiore { width: 560px; }
  .conto span { min-width: 72px; }
  .promo-reparti ul { grid-template-columns: 1fr 1fr; gap: 10px; }
  .promo-reparti a { border-radius: 14px; aspect-ratio: 1; }
  .promo-reparti span { left: 12px; bottom: 10px; font-size: 15px; }
}

/* ===== Correzioni dalla revisione visiva del 30/09 (collaudo-visivo) ===== */
/* il riquadro prenotazione poggia sul footer scuro: niente fascia bianca in mezzo; e l'invito del footer non si ripete
   dove il modulo c'e' gia' (diceva due volte «Prenota una visita») */
.pagina:has(.prenota-nuova), .wp-block-group.coda:has(.prenota-nuova) { padding-bottom: 0; }
.prenota-nuova { background: var(--wp--preset--color--scuro); }
body:has(.prenota-nuova) .piede-invito { display: none; }
body:has(.prenota-nuova) .piede-colonne { margin-top: 56px; }
/* numeri di pagina del catalogo */
.wp-block-query-pagination { align-items: center; flex-wrap: wrap; }
.wp-block-query-pagination-numbers { display: flex; gap: 6px; flex-wrap: wrap; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px;
  border: 1.5px solid #e3e6ec; border-radius: 999px; text-decoration: none; font-weight: 600; color: #111; transition: border-color .2s, background .2s; }
.wp-block-query-pagination a:hover { border-color: var(--blu); }
.wp-block-query-pagination .page-numbers.current { background: var(--blu); border-color: var(--blu); color: #fff; }
.wp-block-query-pagination .page-numbers.dots { border: 0; min-width: 0; }
/* domande frequenti: stessa colonna ovunque, segno + al posto del triangolino */
.faq { max-width: 820px; margin-inline: auto !important; }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; color: var(--blu); transition: transform .3s var(--morbido); }
.faq details[open] summary::after { transform: rotate(45deg); }
/* «Avanti» spento: non verde oliva */
.comandi .avanti:disabled { background: rgba(255,255,255,.14); color: rgba(255,255,255,.65); opacity: 1; }
/* paragrafi staccati (articoli, privacy, pagine) */
.pagina .wp-block-post-content p, .corpo-articolo p { margin-block: 0 18px; }
.pagina .wp-block-post-content h2, .pagina .wp-block-post-content h3 { margin-block: 40px 14px; }
/* tabella privacy sul telefono: righe una sotto l'altra invece che fuori schermo */
@media (max-width: 700px) {
  .pagina .wp-block-table table { min-width: 0; }
  .pagina .wp-block-table thead { display: none; }
  .pagina .wp-block-table tr { display: block; border: 1px solid #ddd; border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; }
  .pagina .wp-block-table td { display: block; border: 0; padding: 4px 0; }
  .pagina .wp-block-table td:first-child { font-weight: 600; }
}
/* marchi: aria fra le frasi e la griglia, loghi pareggiati, nome scritto come un logo quando il logo non c'e' */
.griglia-marchi { margin-block: 32px !important; }
.griglia-marchi img { height: 52px; max-width: 78%; }
.griglia-marchi li.logo-largo img { max-width: 92%; } /* la scritta usa la colonna doppia, non solo il 78% */
.griglia-marchi .nome-marchio { font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--blu); }
@media (max-width: 900px) { .griglia-marchi img { height: 40px; } .pannello .voci a { font-size: 28px; } }
/* titoli allineati al testo sotto (articolo) */
.articolo .testa-articolo .wp-block-post-title { padding: 0; }

@media (prefers-reduced-motion: reduce) {
  #main-container { scroll-snap-type: none; }
  *, *::before, *::after, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; transition: none !important; }
  .rivela, .scena .wp-block-cover__inner-container > *, .pannello .voci a, .pannello .lato { opacity: 1 !important; transform: none !important; }
}

/* ===== Prima scena dinamica (Vitaliano 05/10: «qualcosa di carino e dinamico sfruttando sempre il girasole») =====
   Quattro battute da 4,5 s in giro continuo (18 s): chi siamo · marchi · cosa trovi · dove siamo. Solo CSS. */
.eroe .wp-block-cover__background { background: linear-gradient(100deg, rgba(0,43,96,.90) 0%, rgba(0,73,154,.66) 48%, rgba(0,73,154,.22) 100%) !important; }
.eroe .wp-block-cover__inner-container { position: relative; }
.eroe-fiore { position: absolute; z-index: 0; right: -14vmin; bottom: 4vh; width: min(88vmin, 760px); aspect-ratio: 1; background: url("assets/img/girasole.webp") center/contain no-repeat; opacity: .95; animation: gira 70s linear infinite; pointer-events: none; }
.eroe-battute { position: relative; z-index: 1; display: grid; min-height: 270px; align-content: end; }
.eroe .battuta { grid-area: 1 / 1; align-self: end; opacity: 0; animation: battuta 18s calc(var(--b) * 4.5s) infinite both; }
.eroe .battuta:first-child { opacity: 1; }
.eroe .battuta p { margin: 0; padding-top: 10px; max-width: 560px; }
.eroe .battuta .occhiello-giallo { padding: 0 0 8px; }
.eroe .battuta h2 { max-width: 640px; }
.eroe-marchi, .eroe-servizi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; }
.eroe-marchi li { background: #fff; border-radius: 10px; height: 52px; width: 108px; display: grid; place-items: center; padding: 8px 10px; opacity: 0; animation: battuta 18s calc(4.5s + var(--k) * 110ms) infinite both; }
.eroe-marchi img { max-height: 32px; max-width: 100%; width: auto; object-fit: contain; }
.eroe-servizi li { padding: 9px 16px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; font-weight: 600; font-size: 17px; opacity: 0; animation: battuta 18s calc(9s + var(--k) * 130ms) infinite both; }
.eroe-servizi li:nth-child(odd) { background: var(--wp--preset--color--giallo); border-color: var(--wp--preset--color--giallo); color: #000; text-shadow: none; }
.eroe-tempo { position: relative; z-index: 1; display: flex; gap: 6px; margin: 20px 0 0; max-width: 220px; }
.eroe-tempo i { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; position: relative; overflow: hidden; }
.eroe-tempo i::after { content: ""; position: absolute; inset: 0; background: var(--wp--preset--color--giallo); transform-origin: left; transform: scaleX(0); animation: tempo 18s calc(var(--b) * 4.5s) infinite both; }
.eroe .wp-block-buttons { position: relative; z-index: 1; margin-top: 24px; }
@keyframes battuta { 0% { opacity: 0; transform: translateY(26px); } 3.5% { opacity: 1; transform: none; } 22% { opacity: 1; transform: none; } 25% { opacity: 0; transform: translateY(-18px); } 100% { opacity: 0; } }
@keyframes tempo { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@media (max-width: 900px) {
  .eroe-fiore { width: 118vw; right: -46vw; bottom: auto; top: 6svh; opacity: .8; }
  .eroe-battute { min-height: 300px; }
  .eroe-marchi { gap: 6px; }
  .eroe-marchi li { width: calc(33.3% - 4px); height: 46px; }
  .eroe-servizi li { font-size: 15px; padding: 8px 13px; }
}
.eroe .battuta { width: 100%; }
.eroe .battuta p { max-width: 460px; }
.eroe-marchi img { max-height: none; height: 100%; width: 100%; object-fit: contain; }
.eroe-marchi li { padding: 6px 8px; }
@media (max-width: 900px) { .eroe .battuta p { max-width: 100%; } .eroe-marchi { max-width: 100%; } }
.eroe-marchi li { position: relative; }
.eroe-marchi img { position: absolute; inset: 7px 9px; width: calc(100% - 18px); height: calc(100% - 14px); }
.eroe-marchi li[data-m="nicoletti"] { background: var(--blu); } /* il file e' scritto in bianco: su bianco sparisce */
.eroe-servizi li:nth-child(even) { background: rgba(0,43,96,.78); }
/* 05/10: sul telefono il girasole sta SOPRA il testo (non dietro): il bianco sul giallo non si leggeva */
@media (max-width: 900px) {
  .eroe-fiore { width: 104vw; right: -26vw; top: auto; bottom: 100%; margin-bottom: 4px; opacity: .92; }
  .eroe .wp-block-cover__background { background: linear-gradient(to top, rgba(0,43,96,.94) 0%, rgba(0,43,96,.72) 42%, rgba(0,73,154,.28) 100%) !important; }
}
@media (max-width: 900px) { .eroe-fiore { margin-bottom: -160px; } }
@media (max-width: 900px) { .eroe-fiore { margin-bottom: 4px; } } /* la battuta dei marchi e' la piu' alta: il fiore resta sopra, mai sull'etichetta */

/* ===== 07/10, rilievi di Loreti ===== */
/* Progettazione e le altre pagine con foto in testa: il testo non deve attaccarsi alla foto, e un elenco non si attacca al paragrafo dopo */
.pagina-google > .wp-block-post-content > :first-child { margin-top: 56px; }
.pagina-google .wp-block-post-content ul + p, .pagina-google .wp-block-post-content ol + p { margin-top: 20px; }
/* Appuntamento: niente titolo, la prenotazione occupa tutto lo schermo sotto la testata */
.pagina.pagina-appuntamento { padding: 0; }
.pagina-appuntamento .prenota-nuova { padding: 0; margin-top: 0; }
.pagina-appuntamento .carta-prenota { max-width: none; min-height: 100vh; min-height: 100svh; border-radius: 0; align-content: center;
  padding: calc(var(--testata-h) + 40px) max(24px, calc((100vw - 1392px) / 2 + 24px)) 56px; }
@media (max-width: 900px) { .pagina-appuntamento .carta-prenota { padding: calc(var(--testata-h) + 28px) 24px 40px; } }

/* Titolo per Google e lettori di schermo, non visibile (pagina Appuntamento, 22/10) */
.solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }