/* FISSO (modello del kit): le regole che servono agli elementi fissi di ogni sito.
Lo stile del sito va negli altri fogli (base.css, componenti.css...), elencati
dopo questo in site.yaml «css». Colori e caratteri qui non si decidono. */
/* campo esca del modulo: mai visibile, mai raggiungibile */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* "Vai al contenuto" per chi naviga da tastiera */
.salta { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: .6rem 1rem; background: #fff; color: #000; }
.salta:focus { top: 1rem; }
/* focus sempre visibile */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* hidden vince su qualunque display */
[hidden] { display: none !important; }
/* torna su */
.su { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; width: 2.75rem; height: 2.75rem;
display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
opacity: 0; transform: translateY(.5rem); pointer-events: none; transition: opacity .25s, transform .25s; }
.su.vis { opacity: 1; transform: none; pointer-events: auto; }
.su svg { width: 1.25rem; height: 1.25rem; }
/* banner cookie: compare con una transizione; posizione e stile sono del sito */
.cookie { position: fixed; z-index: 100; opacity: 0; transform: translateY(1rem); transition: opacity .4s, transform .4s; }
.cookie.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Font self-hosted: nessuna chiamata a Google Fonts. Generato da tools/fonts.py */
/* Karla e Raleway sono font variabili: un file per tutti i pesi (corretto a mano, vedi DOMANDE-APERTE «difetto del kit»). Tenuti solo famiglie e pesi usati dal sito. */
@font-face{font-family:'Amatic SC';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/amaticsc-tuzyzwprpvbs1izr_voebosfqzq.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:'Amatic SC';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/amaticsc-tuzyzwprpvbs1izr_voecusf.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:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlowcondensed-htx3l3i-jcgchyj8vi-l6oo_au7b6x_t2kn3.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:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlowcondensed-htx3l3i-jcgchyj8vi-l6oo_au7b6xht2g.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:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlowcondensed-htxwl3i-jcgchyj8vi-l6oo_au7b4-lwz3jwuzec.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:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlowcondensed-htxwl3i-jcgchyj8vi-l6oo_au7b4-lwz3bwuq.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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlowcondensed-htxwl3i-jcgchyj8vi-l6oo_au7b4873z3jwuzec.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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlowcondensed-htxwl3i-jcgchyj8vi-l6oo_au7b4873z3bwuq.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:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlowsemicondensed-wlpvgxjlbv1hqnzfr-f8seymb0yybp0mudrxdoqqoeo.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:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlowsemicondensed-wlpvgxjlbv1hqnzfr-f8seymb0yybp0mudrxeiqq.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:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlowsemicondensed-wlpigxjlbv1hqnzfr-f8seymb0yybp0mudrfi6m_cwslu50.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:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlowsemicondensed-wlpigxjlbv1hqnzfr-f8seymb0yybp0mudrfi6m_b2sl.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:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlowsemicondensed-wlpigxjlbv1hqnzfr-f8seymb0yybp0mudrfp66_cwslu50.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:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlowsemicondensed-wlpigxjlbv1hqnzfr-f8seymb0yybp0mudrfp66_b2sl.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:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlowsemicondensed-wlpigxjlbv1hqnzfr-f8seymb0yybp0mudrfw6-_cwslu50.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:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlowsemicondensed-wlpigxjlbv1hqnzfr-f8seymb0yybp0mudrfw6-_b2sl.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:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/karla-qkbbxvyc6trat7rbltyg5q.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:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/karla-qkbbxvyc6trat7rvltw.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:'Raleway';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/raleway-1ptug8zys_skggpnycmit5lu.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:'Raleway';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/raleway-1ptug8zys_skggpnyc0itw.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}
/* ==========================================================================
Studio Acocella — base: colori, caratteri, griglia.
Valori presi dal kit Elementor del sito vecchio (elementor-kit-6).
========================================================================== */
:root {
--nero: #1B1B1B; /* primary */
--grigio-verde: #9BAEAF; /* secondary */
--testo: #545454; /* text */
--acqua: #B1E4E8; /* accent */
--bianco: #FFFFFF;
--petrolio: #09464B; /* testo dei bottoni */
--turchese: #6CBDC3; /* link */
--verde-scuro: #628587; /* hover dei link-bottone */
--corpo: #444444; /* colore del testo di base */
--grigio-chiaro: #F3F3F3;
--f-testo: "Karla", system-ui, sans-serif;
--f-titoli: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
--f-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
--f-mano: "Amatic SC", cursive;
--testata-h: 70px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
margin: 0; background: #fff; color: var(--corpo);
font-family: var(--f-testo); font-size: 17px; font-weight: 400; line-height: 28px;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; }
img { border: 0; vertical-align: middle; }
figure { margin: 0; }
p { margin: 0 0 8px; }
ul, ol { margin: 0 0 8px; padding-left: 2.5em; }
b, strong { font-weight: 700; }
a { color: var(--turchese); font-family: var(--f-testo); font-weight: 700; text-decoration: none; transition: color .2s; }
a:hover { color: var(--grigio-verde); }
button { font: inherit; }
hr { border: 0; margin: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---- titoli: gli stili globali del kit Elementor ---- */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: 1.2; }
h1 { font-family: var(--f-cond); font-size: 70px; font-weight: 600; line-height: 1.2; color: var(--acqua); }
h2 { font-family: var(--f-titoli); font-size: 50px; font-weight: 600; line-height: 1.1; color: var(--nero); }
h3 { font-family: var(--f-titoli); font-size: 32px; font-weight: 500; line-height: 1.2; color: var(--nero); }
h4 { font-family: var(--f-testo); font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: 1px; text-transform: uppercase; color: var(--grigio-verde); }
h5, h6 { color: var(--nero); }
/* dentro un blocco di testo i titoli hanno i margini del tema (Hello Elementor) */
.testo h1, .testo h2, .testo h3, .testo h4, .testo h5, .testo h6 { margin: .5rem 0 1rem; }
@media (max-width: 767px) {
h2 { font-size: 40px; }
h4 { line-height: 24px; }
}
/* ---- griglia: fasce (section), contenitori e colonne come in Elementor ----
Ogni fascia, contenitore e colonna si regola con variabili nello style:
--pad / --pad-m spaziatura interna della fascia (computer / telefono)
--mt, --mb / -m margini esterni della fascia
--bg colore di sfondo
--max larghezza massima del contenitore (1280 di base)
--w / --w-m larghezza della colonna (telefono: 100% se non detto)
--cp / --cp-m spaziatura interna della colonna (10px di base, come Elementor)
--allinea allineamento verticale delle colonne (flex-start, center…) */
/* le variabili si azzerano su ogni elemento: non devono passare dalla fascia
o dalla colonna esterna a quelle annidate («initial» = usa il valore di riserva) */
.sez { --pad: 0; --pad-m: initial; --mt: 0; --mt-m: initial; --mb: 0; --mb-m: initial; --bg: transparent; }
.cont { --max: 1280px; --max-t: 1024px; --allinea: stretch; }
.col { --w: 100%; --w-m: initial; --cp: 10px; --cp-m: initial; --col-v: flex-start; }
.sez--foto { --foto-m: initial; --pos: center center; --pos-m: initial; --dim: cover; --velo: transparent; }
.sez {
position: relative; display: block;
padding: var(--pad, 0);
margin-top: var(--mt, 0); margin-bottom: var(--mb, 0);
background: var(--bg, transparent);
}
.cont {
position: relative; z-index: 1;
display: flex; flex-wrap: wrap; align-items: var(--allinea, stretch);
max-width: var(--max); margin: 0 auto;
}
.cont--pieno { max-width: none; }
.cont--stretto { max-width: 950px; }
.col {
position: relative; display: flex; flex-direction: column; align-items: stretch;
justify-content: var(--col-v, flex-start);
width: var(--w, 100%); min-width: 0;
padding: var(--cp, 10px);
}
.col > *:not(:last-child) { margin-bottom: 10px; }
.col > .cont { width: 100%; }
@media (max-width: 1024px) {
.cont { max-width: min(var(--max), var(--max-t)); }
}
@media (max-width: 767px) {
.sez { padding: var(--pad-m, var(--pad, 0)); margin-top: var(--mt-m, var(--mt, 0)); margin-bottom: var(--mb-m, var(--mb, 0)); }
.cont { max-width: min(var(--max), 767px); }
.col { width: var(--w-m, 100%); padding: var(--cp-m, var(--cp, 10px)); }
}
/* ---- fasce con foto di sfondo: --foto, --pos, --dim; velo con --velo ---- */
.sez--foto {
background-image: var(--foto); background-position: var(--pos, center center);
background-size: var(--dim, cover); background-repeat: no-repeat;
}
.sez--foto::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: var(--velo, transparent);
}
@media (max-width: 767px) {
.sez--foto { background-image: var(--foto-m, var(--foto)); background-position: var(--pos-m, var(--pos, center center)); }
}
/* ---- divisori sagomati in fondo alle fasce (shape divider di Elementor) ---- */
.forma-tilt::after, .forma-fan::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
height: var(--forma-h, 100px); pointer-events: none;
background: url(/assets/img/forme/tilt.svg) center bottom / 100% 100% no-repeat;
transform: rotate(180deg) scaleX(-1);
}
.forma-fan::after { background-image: url(/assets/img/forme/fan.svg); transform: rotate(180deg); }
/* su telefono la forma è più larga della fascia (come in Elementor): non deve far scorrere la pagina di lato */
.forma-tilt, .forma-fan { overflow-x: clip; }
@media (max-width: 767px) {
.forma-tilt::after, .forma-fan::after { height: var(--forma-h-m, 45px); left: -15%; right: -15%; }
}
/* ---- testo ---- */
/* come in Elementor, anche l'ultimo paragrafo di un testo tiene i suoi 8px sotto */
.testo ul { padding-left: 40px; }
.centro { text-align: center; }
.destra { text-align: right; }
.sinistra { text-align: left; }
.chiaro, .chiaro h1, .chiaro h2, .chiaro h3 { color: #fff; }
.t15 { font-size: 15px; line-height: 26px; }
.t14 { font-size: 14px; line-height: 22px; }
.t13 { font-size: 13px; line-height: 20px; }
.grigio { color: var(--grigio-verde); }
/* ---- visibilità come nel sito vecchio (elementor-hidden-…) ---- */
@media (min-width: 1025px) { .nascosto-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .nascosto-tablet { display: none !important; } }
@media (max-width: 767px) { .nascosto-mobile { display: none !important; } }
/* ==========================================================================
Studio Acocella — componenti: intestazione, menu, bottoni, divisori,
blocchi ricorrenti, modulo, piè di pagina, banner cookie.
========================================================================== */
/* ---------------------------------------------------------------- bottoni */
/* Bottone del kit: fondo acqua, testo petrolio, ombra «a scalino». */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
min-height: 40px; padding: 12px 24px;
background: var(--acqua); color: var(--petrolio);
font-family: var(--f-testo); font-size: 16px; font-weight: 700; line-height: 1;
text-transform: uppercase; letter-spacing: 2px; text-align: center;
border: 0; border-radius: 4px; cursor: pointer;
box-shadow: 8px 8px 0 -1px rgba(177, 228, 232, .28);
transition: background-color .3s, color .3s, box-shadow .3s;
}
.btn:hover, .btn:focus-visible { background: #82CCD2; color: #fff; box-shadow: 8px 8px 0 -1px rgba(155, 174, 175, .38); }
.btn--lg { min-height: 59px; padding: 20px 40px; }
.btn--xl { min-height: 72px; padding: 25px 50px; }
.btn--md { min-height: 47px; padding: 15px 30px; }
.btn--ombra { box-shadow: 7px 7px 0 0 rgba(177, 228, 232, .3); }
@media (max-width: 767px) {
.btn { font-size: 13px; letter-spacing: 1.2px; }
}
/* Link-bottone: testo petrolio maiuscolo, sottolineato con una riga acqua, freccia */
.btn-link {
display: inline-flex; align-items: center; gap: 12px;
padding: 0 0 3px; background: #fff; color: var(--petrolio);
font-family: var(--f-testo); font-size: 16px; font-weight: 700; line-height: 1;
text-transform: uppercase; letter-spacing: 2px;
box-shadow: 0 5px 0 0 rgba(177, 228, 232, .38); border-radius: 0;
transition: color .3s;
}
.btn-link:hover, .btn-link:focus-visible { color: var(--verde-scuro); }
.btn-link .freccia { width: 1em; height: 1em; fill: currentColor; flex: none; }
.btn-link--tel { font-size: 22px; }
@media (max-width: 767px) {
.btn-link { font-size: 13px; letter-spacing: 1.2px; }
.btn-link--tel { font-size: 22px; }
}
/* telefono grande nelle aperture scure */
.tel-grande {
display: inline-block; padding: 0 0 3px; color: #fff; background: transparent;
font-family: var(--f-testo); font-size: 24px; font-weight: 900; letter-spacing: .2px; line-height: 1;
}
.tel-grande:hover { color: var(--acqua); }
.p-btn { margin: 0; }
.p-btn--centro { text-align: center; }
.p-btn--destra { text-align: right; }
@media (max-width: 767px) { .p-btn--centro-m { text-align: center; } }
/* -------------------------------------------------------------- divisori */
/* A righe oblique (pattern di Elementor), color grigio-verde, alto 14px */
/* Come il divisore di Elementor: una fascia di 12-15px vuota sopra e sotto (--dgap)
attorno alla riga vera e propria. */
.div-righe { --dw: 100%; --dw-m: initial; --dh: 14px; --dc: var(--grigio-verde); --dgap: 15px; }
.div-linea { --dw: 100%; --dc: var(--grigio-verde); --dgap: 15px; }
/* A righe oblique (pattern di Elementor), color grigio-verde, alto 14px */
.div-righe {
display: block; width: var(--dw); height: calc(var(--dh) + 2 * var(--dgap)); margin: 0 auto;
background-color: var(--dc);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%25' viewBox='0 0 20 16' fill='none' stroke='black' stroke-width='1' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cg transform='translate(-12.000000, 0)'%3E%3Cpath d='M28,0L10,18'/%3E%3Cpath d='M18,0L0,18'/%3E%3Cpath d='M48,0L30,18'/%3E%3Cpath d='M38,0L20,18'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%25' viewBox='0 0 20 16' fill='none' stroke='black' stroke-width='1' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cg transform='translate(-12.000000, 0)'%3E%3Cpath d='M28,0L10,18'/%3E%3Cpath d='M18,0L0,18'/%3E%3Cpath d='M48,0L30,18'/%3E%3Cpath d='M38,0L20,18'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-size: 20px var(--dh); mask-size: 20px var(--dh);
-webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
-webkit-mask-position: left center; mask-position: left center;
}
/* Linea semplice: --dw larghezza, --dc colore; a sinistra con .div-linea--sx */
.div-linea {
display: block; width: var(--dw); height: calc(1px + 2 * var(--dgap)); margin: 0 auto; border: 0;
background: linear-gradient(var(--dc), var(--dc)) center / 100% 1px no-repeat;
}
.div-linea--sx { margin-left: 0; }
@media (max-width: 767px) {
.div-righe { width: var(--dw-m, var(--dw)); }
}
/* -------------------------------------------------------------- immagini */
.img { --iw: auto; --iw-m: initial; --ia: center; text-align: var(--ia); }
.img img { width: var(--iw, auto); max-width: 100%; height: auto; display: inline-block; }
.img--sx { --ia: left; }
.img--tondo img { border-radius: 50%; }
.img--angoli img { border-radius: var(--ir, 15px); }
@media (max-width: 767px) { .img img { width: var(--iw-m, var(--iw, auto)); } .img--centro-m { --ia: center; } }
/* -------------------------------------------------------------- icone */
.icona { display: block; line-height: 0; text-align: var(--ia, left); }
.icona svg { width: var(--is, 70px); height: var(--is, 70px); fill: var(--grigio-verde); color: var(--grigio-verde); }
.centro .icona, .icona--centro { --ia: center; }
/* ======================================================== intestazione */
.testata { position: relative; z-index: 100; }
.testata a { font-weight: inherit; }
.testata__nav .menu { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.menu > li { position: relative; display: flex; align-items: center; }
.menu > li > a {
position: relative; display: block; padding: 13px 15px;
font-family: var(--f-testo); font-size: 14px; font-weight: 700; line-height: 1;
text-transform: uppercase; letter-spacing: .4px; color: #fff;
}
.menu > li > a:hover, .menu > li > a[aria-current] { color: var(--acqua); }
/* puntatore «overline» che cresce dal centro (come nel sito vecchio) */
.menu > li > a::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
background: var(--acqua); transform: scaleX(0); transition: transform .3s;
}
.menu > li > a:hover::before { transform: scaleX(1); }
.menu__gruppo > a { padding-right: 6px !important; }
.menu__apri { display: inline-flex; align-items: center; padding: 0 15px 0 2px; border: 0; background: none; color: #fff; cursor: pointer; }
.menu__apri svg { width: 9px; height: 14px; fill: currentColor; }
.menu__sotto {
position: absolute; top: 100%; left: 0; z-index: 10; min-width: 15em;
margin: 0; padding: 0; list-style: none;
background: rgba(27, 27, 27, .89); border-radius: 0 0 6px 6px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .27);
visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s;
}
.menu__gruppo:hover > .menu__sotto, .menu__gruppo:focus-within > .menu__sotto, .menu__gruppo.aperto > .menu__sotto { visibility: visible; opacity: 1; }
.menu__sotto li:not(:last-child) { border-bottom: 1px solid rgba(155, 174, 175, .19); }
.menu__sotto a {
display: block; padding: 13px 20px; color: #D8E3E4;
font-family: var(--f-testo); font-size: 14px; font-weight: 500; line-height: 1; text-transform: uppercase;
}
.menu__sotto a:hover, .menu__sotto a[aria-current] { color: var(--acqua); background: transparent; }
.testata__cta { font-size: 14px; letter-spacing: .6px; padding: 13px 24px 12px; min-height: 0; box-shadow: none; white-space: nowrap; }
.testata__cta:hover { color: #fff; box-shadow: none; }
/* --- intestazione trasparente (home e pagine di sezione) --- */
.testata__alta {
position: absolute; top: 0; left: 0; right: 0;
display: flex; align-items: flex-start; padding: 0 60px 0 30px;
}
.testata__logo { flex: 0 0 15.993%; padding: 25px 10px 10px; }
.testata__logo img { width: 180px; height: auto; }
.testata__alta .testata__nav { flex: 1 1 auto; display: flex; justify-content: flex-end; margin-top: 26px; padding-right: 40px; }
.testata__alta .menu > li > a { font-size: 15px; letter-spacing: .2px; color: #fff; }
.testata__alta .menu > li > a::before { top: auto; bottom: 0; background: #fff; }
.testata__alta .testata__cta { margin-top: 26px; font-size: 15px; letter-spacing: 1px; padding: 13px 24px 12px; }
/* --- barra scura (fissa in alto) --- */
.testata__barra { background: var(--nero); }
.testata-scura .testata__barra { position: sticky; top: 0; }
.testata-scura .testata { position: sticky; top: 0; }
.testata__barra-dentro {
display: flex; align-items: center; height: 86px;
max-width: 1280px; margin: 0 auto; padding: 0;
}
.testata__pitto { flex: 0 0 15%; display: flex; align-items: center; color: #fff; }
.testata__pitto svg { width: 100px; height: auto; }
.testata__barra .testata__nav { flex: 1 1 auto; display: flex; justify-content: flex-end; margin-right: 30px; }
/* nella home e nelle pagine di sezione la barra scende dall'alto quando si scorre */
.testata__barra--scorre {
position: fixed; top: 0; left: 0; right: 0;
transform: translateY(-150px); transition: transform .3s ease;
}
.testata__barra--scorre.vis { transform: none; }
.testata-trasparente .testata { position: absolute; top: 0; left: 0; right: 0; }
/* --- telefono e tablet: barra con logo orizzontale e icona del menu --- */
.testata__mobile { display: none; }
@media (max-width: 1024px) {
.testata__alta, .testata__barra { display: none; }
.testata, .testata-trasparente .testata { position: sticky; top: 0; }
.testata__mobile {
display: flex; align-items: center; justify-content: space-between;
background: var(--nero); padding: 10px;
}
.testata__logo-oriz img { width: 50%; min-width: 180px; height: auto; }
.testata__logo-oriz { flex: 1 1 50%; }
.testata__hamburger { border: 0; background: none; padding: 8px 0 8px 8px; cursor: pointer; line-height: 0; }
.testata__hamburger img { width: 40px; }
}
@media (max-width: 767px) {
.testata__logo-oriz img { width: 100%; min-width: 0; max-width: 175px; }
.testata__hamburger img { width: 36px; }
}
/* --- menu a tutto schermo (era il popup di Elementor) --- */
.menu-mobile {
position: fixed; inset: 0; z-index: 200; overflow-y: auto;
display: flex; align-items: center; justify-content: center;
background: rgba(27, 27, 27, .97); color: #fff; text-align: center;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile__dentro { padding: 40px 20px; }
.menu-mobile__logo img { width: 168px; height: auto; }
.menu-mobile__logo { display: inline-block; margin-bottom: 50px; }
.menu-mobile__voci { list-style: none; margin: 0; padding: 0; }
.menu-mobile__voci li { margin-bottom: 4px; }
.menu-mobile__voci a {
display: inline-block; padding: 12px 24px; color: var(--grigio-verde);
font-family: var(--f-titoli); font-size: 20px; font-weight: 500; line-height: 1;
}
.menu-mobile__voci a:hover, .menu-mobile__voci a[aria-current] { color: var(--acqua); }
.menu-mobile__cta { margin: 20px 0 10px; }
.menu-mobile__cta .btn:hover { background: #fff; color: var(--petrolio); }
.menu-mobile__oppure { margin: 10px 0 -10px; font-size: 16px; font-weight: 300; line-height: 35px; color: #fff; }
.menu-mobile__tel { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: .2px; }
.menu-mobile__tel:hover { color: var(--acqua); }
.menu-mobile__chiudi { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; }
.menu-mobile__chiudi svg { width: 28px; height: 28px; }
/* =========================================================== aperture */
/* Apertura delle pagine di sezione: foto, velo scuro, titolo bianco centrato */
.apertura { --pad: 250px 0; --pad-m: 150px 0; --velo: rgba(27, 27, 27, .4); }
.apertura h1 { font-family: var(--f-cond); font-size: 70px; font-weight: 600; line-height: 80px; color: #fff; text-align: center; }
@media (max-width: 767px) { .apertura h1 { font-size: 57px; line-height: 60px; } }
/* da computer la foto di apertura resta ferma mentre la pagina scorre, come nel sito vecchio */
@media (min-width: 1025px) { .apertura.sez--foto { background-attachment: fixed; } }
/* Riquadro di presentazione sotto l'apertura (sfuma dal grigio al bianco, bordo acqua) */
.presenta { --mt: -110px; --mt-m: -20px; --mb-m: 80px; --pad: 0 20px; --pad-m: 0; z-index: 2; }
.presenta__box {
margin: 0 29px; padding: 80px; text-align: center;
background: linear-gradient(180deg, #F2F2F2 0%, #fff 100%);
border-top: 7px solid var(--acqua);
}
.presenta__box h2 { margin: .5rem 0 1rem; }
@media (max-width: 767px) { .presenta__box { margin: 0; padding: 50px 15px 0; } }
/* ============================================== pagine interne (servizi) */
.pag-sezione { font-family: var(--f-cond); font-size: 36px; font-weight: 400; color: var(--grigio-verde); }
.pag-titolo { font-family: var(--f-cond); font-size: 64px; font-weight: 600; color: var(--nero); line-height: 1.2; }
.pag-sottotitolo { font-family: var(--f-cond); font-size: 36px; font-weight: 600; color: var(--nero); }
.pag-domanda { font-family: var(--f-titoli); font-size: 24px; font-weight: 400; color: var(--nero); }
@media (max-width: 767px) { .pag-titolo { font-size: 52px; line-height: 1em; } }
/* elenco per passi (icon box senza icona del sito vecchio) */
.passo h3, .passo .passo__tit { margin: 0; font-family: var(--f-testo); font-size: 16px; font-weight: 700; line-height: 28px; text-transform: uppercase; letter-spacing: 0; color: var(--turchese); }
.passo p { margin: 0; font-size: 15px; line-height: 26px; }
/* menu laterale (colonna destra, fissa scorrendo) */
.laterale { position: sticky; top: 100px; }
.menu-sezione h4 { margin: 10px 0; }
.menu-sezione ul { list-style: none; margin: 0; padding: 5px 0 0 5px; }
.menu-sezione li:not(:last-child) { margin-bottom: 8px; }
.menu-sezione a {
position: relative; display: block; padding: 13px 0;
font-family: var(--f-testo); font-size: 17px; font-weight: 700; line-height: 1; color: var(--petrolio);
}
.menu-sezione a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: #E1F5F6; opacity: 0; transition: opacity .3s;
}
.menu-sezione a:hover { color: var(--grigio-verde); }
.menu-sezione a[aria-current] { color: var(--turchese); }
.menu-sezione a[aria-current]::after { opacity: 1; }
/* lo stesso elenco in fondo, da telefono */
.altri { --pad-m: 0 15px 55px; }
.altri__elenco { list-style: none; margin: 0; padding: 0; text-align: center; }
.altri__elenco li:not(:last-child) { border-bottom: 1px solid rgba(155, 174, 175, .38); }
.altri__elenco a { display: block; padding: 12px; font-size: 15px; line-height: 1; color: var(--testo); font-weight: 700; }
.altri__elenco a:hover { color: var(--grigio-verde); }
.altri__elenco a[aria-current] { color: var(--turchese); }
/* fascia scura «Chi si occupa…» con le foto tonde */
.chi-occupa { --bg: var(--nero); --pad: 100px 0 116px; --pad-m: 60px 15px; color: #fff; }
.chi-occupa h2 { font-family: var(--f-cond); font-size: 36px; font-weight: 600; color: #fff; text-align: center; }
.chi-occupa h4 { color: #fff; text-align: center; }
.chi-occupa a { color: var(--acqua); }
/* ===================================================== fascia «Prenota» */
.prenota { --mt: 100px; --mb: 100px; --mt-m: 70px; --mb-m: 70px; --pad-m: 0 15px; }
.prenota .col { padding: 10px; }
.prenota__titolo { font-family: var(--f-titoli); font-size: 42px; font-weight: 500; }
.prenota--grande .prenota__titolo { font-size: 50px; }
.prenota__btn { margin: 30px 0 10px !important; }
.prenota__btn .btn { box-shadow: 7px 7px 0 0 rgba(177, 228, 232, .3); }
.prenota__oppure { margin-top: 20px !important; }
@media (max-width: 767px) {
.prenota__titolo { font-size: 32px; }
.prenota--grande .prenota__titolo { font-size: 40px; }
}
/* =============================================================== schede */
/* Schede dei trattamenti: bordo acqua 5px, angoli 10px, retino diagonale dietro */
.schede { --pad: 0 80px; --pad-m: 0; }
.scheda-cella {
width: 33.333%; padding: 0 35px 35px 0;
}
.scheda-cella > .scheda {
height: 100%; display: flex; flex-direction: column; align-items: flex-start;
margin: 0 10px 10px 0; padding: 40px 40px 60px;
background: #fff; border: 5px solid var(--acqua); border-radius: 10px;
box-shadow: 10px 10px 0 -5px rgba(177, 228, 232, .0);
position: relative;
}
.scheda-cella { position: relative; }
.scheda-cella::before {
content: ""; position: absolute; left: 25px; top: 25px; right: 35px; bottom: 35px; z-index: 0;
background: url(/wp-content/uploads/2021/12/pattern-servizi.png) 25px 25px / cover; border-radius: 10px;
}
.scheda { z-index: 1; }
.scheda__tit { margin: 0 0 10px; font-family: var(--f-cond); font-size: 25px; font-weight: 500; letter-spacing: .5px; line-height: 1.2; color: var(--nero); }
.scheda .testo { font-size: 15px; }
.scheda .p-btn { margin-top: 15px; margin-bottom: 4px; }
@media (max-width: 1024px) { .scheda-cella { width: 50%; } }
@media (max-width: 767px) {
.scheda-cella { width: 100%; padding: 0 18px 35px 17px; }
.scheda-cella > .scheda { padding: 30px; }
.scheda-cella::before { left: 17px; top: 0; right: 18px; }
}
/* =============================================================== citazione */
.citazione { margin: 0; padding: 0; border: 0; text-align: center; }
.citazione::before {
content: "\201C"; display: block; height: 70px; margin-bottom: -10px;
font-family: Georgia, serif; font-size: 110px; line-height: 1; color: rgba(115, 178, 183, .54);
}
.citazione p { margin: 0 0 10px; font-family: var(--f-mano); font-size: 29px; font-weight: 400; line-height: 1.4em; color: var(--nero); }
.citazione cite, .citazione footer { display: block; font-family: var(--f-titoli); font-size: 16px; font-weight: 500; font-style: italic; color: var(--testo); }
/* =============================================================== video */
.video { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__vela {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 20px; text-align: center; color: #fff;
background: var(--nero) center / cover no-repeat;
}
.video__vela p { max-width: 34em; margin: 0; font-size: 15px; line-height: 1.5; }
.video--bordo { border: 6px solid #fff; border-radius: 6px; }
@media (max-width: 767px) { .video--bordo { border-width: 0; } }
/* =============================================================== mappa */
.mappa { position: relative; height: var(--h, 450px); background: #e9eeee; }
.mappa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mappa__vela { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; font-size: 15px; line-height: 1.5; }
.mappa__vela p { max-width: 30em; margin: 0; }
/* =============================================================== galleria */
.galleria { display: grid; grid-template-columns: repeat(var(--colonne, 3), 1fr); gap: var(--gg, 10px); margin: 0; padding: 0; list-style: none; }
.galleria a, .galleria figure { display: block; overflow: hidden; }
.galleria img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--rapporto, 1); display: block; transition: transform .4s; }
.galleria a:hover img { transform: scale(1.04); }
@media (max-width: 767px) { .galleria { grid-template-columns: repeat(var(--colonne-m, 2), 1fr); } }
.lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .9); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; }
.lightbox button { position: absolute; border: 0; background: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; padding: 12px; }
.lightbox__chiudi { top: 10px; right: 14px; }
.lightbox__prec { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__succ { right: 10px; top: 50%; transform: translateY(-50%); }
/* =============================================================== scorrimento foto (home) */
.carosello { position: relative; height: var(--h, 780px); overflow: hidden; background: #ddd; }
.carosello__foto { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s; }
.carosello__foto.attiva { opacity: 1; }
.carosello__foto img { width: 100%; height: 100%; object-fit: cover; }
.carosello__punti { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.carosello__punti button { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); cursor: pointer; }
.carosello__punti button[aria-current="true"] { background: var(--nero); }
@media (max-width: 767px) { .carosello { height: var(--h-m, 300px); } }
/* =============================================================== titolo che ruota (home) */
.ruota { display: inline-grid; vertical-align: bottom; color: var(--acqua); }
.ruota > span { grid-area: 1 / 1; transition: opacity .5s, transform .5s; }
.ruota > span:not(.attiva) { opacity: 0; transform: translateY(-.4em); }
.ruota--flip > span:not(.attiva) { transform: rotateX(90deg); }
/* =============================================================== modulo */
.modulo { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.modulo .campo { width: 100%; margin: 0 0 10px; padding: 0 5px; border: 0; }
.modulo .campo--meta { width: 50%; }
.modulo label, .modulo legend { display: block; padding: 0 0 10px; font-size: 17px; line-height: 1.3; color: var(--corpo); }
.modulo .obbl { color: var(--petrolio); }
.modulo input[type=text], .modulo input[type=email], .modulo input[type=tel], .modulo select, .modulo textarea {
width: 100%; min-height: 40px; padding: 5px 14px;
font: 15px/1.4 var(--f-testo); color: var(--grigio-verde);
background: var(--grigio-chiaro); border: 0; border-radius: 3px;
}
.modulo textarea { padding: 10px 14px; resize: vertical; }
.modulo .tendina { position: relative; display: block; }
.modulo .tendina::after { content: ""; position: absolute; right: 14px; top: 50%; margin-top: -3px; border: 5px solid transparent; border-top-color: var(--corpo); pointer-events: none; }
.modulo select { appearance: none; }
.modulo .scelte { display: flex; gap: 18px; }
.modulo .scelte label, .modulo .consenso { display: inline-flex; gap: 6px; align-items: baseline; padding: 0; font-size: 15px; }
.modulo .consenso { display: flex; }
.modulo [aria-invalid=true] { outline: 2px solid #c0392b; outline-offset: 1px; }
.modulo .err, .errore-modulo { margin: 6px 0 0; color: #a12a1e; font-size: 14px; line-height: 1.4; }
.errore-modulo { width: 100%; margin: 0 5px 12px; padding: 10px 14px; background: #fdecea; border-radius: 3px; }
.modulo__invio { width: var(--bw, 40%); padding: 0 5px; margin: 0; }
.modulo--largo .modulo__invio { --bw: 100%; }
.modulo__invio .btn { width: 100%; padding: 19px; border-radius: 6px; font-size: 14px; letter-spacing: .5px; }
@media (max-width: 767px) { .modulo .campo--meta, .modulo__invio { width: 100%; } }
/* ===================================================== piè di pagina */
.piede { background: var(--nero); color: #fff; border-top: 6px solid var(--acqua); padding: 50px 0 10px; }
.piede a { font-weight: 400; }
.piede__colonne { display: flex; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; padding: 0 10px; }
.piede__col { width: 25%; padding: 10px; }
.piede__pitto { width: 73px; height: auto; }
.piede__nome { margin: 5px 0 10px; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.piede__dati p { margin: 0 0 8px; font-size: 14px; line-height: 22px; color: var(--grigio-verde); }
.piede__dati a { font-size: 14px; font-weight: 700; color: var(--turchese); }
.piede__dati a:hover { color: var(--grigio-verde); }
.piede__social { margin: 10px 0 0; }
.piede__social a { color: #fff; display: inline-block; line-height: 0; }
.piede__social a:hover { color: var(--acqua); }
.piede__social svg { width: 20px; height: 20px; fill: currentColor; }
.piede__tit { margin: 0 0 10px; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.piede__tit--spazio { margin-top: 40px; }
.piede__link { margin: 0; font-size: 14px; line-height: 25px; }
.piede__link a { color: var(--grigio-verde); font-size: 14px; }
.piede__link a:hover { color: var(--acqua); }
.piede__sost-tit { margin: 0 0 10px; font-family: var(--f-titoli); font-size: 16px; font-weight: 500; line-height: 1.2; color: #fff; }
.piede__sost-tit strong { font-weight: 700; }
.piede__bacciotti { width: 110px; height: auto; margin-bottom: 10px; }
.piede__trattino { width: 10%; margin: 0 0 10px; border-top: 1px solid var(--grigio-verde); }
.piede__parcheggi { width: 52px; height: auto; }
.piede__fondo { max-width: 1280px; margin: 50px auto 0; padding: 0 10px; text-align: center; font-size: 14px; line-height: 28px; color: #fff; }
.piede__fondo a { color: var(--turchese); font-size: 14px; }
.piede__fondo a:hover { color: var(--grigio-verde); }
.piede__cookie { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--grigio-verde); font-size: 13px; cursor: pointer; text-decoration: underline; }
.piede__cookie:hover { color: var(--acqua); }
@media (max-width: 767px) {
.piede { padding: 30px 15px 20px; }
.piede__col { width: 100%; text-align: center; }
.piede__trattino { margin: 0 auto 10px; }
.piede__sostegno { padding-bottom: 20px; border-bottom: 1px solid rgba(84, 84, 84, .52); margin-bottom: 10px; }
.piede__fondo { margin-top: 0; line-height: 22px; }
}
/* ===================================================== banner cookie */
.cookie {
left: 50%; bottom: 20px; width: min(560px, calc(100% - 32px)); transform: translate(-50%, 1rem);
padding: 24px; background: #fff; color: var(--corpo); border-radius: 6px;
box-shadow: 0 6px 30px rgba(0, 0, 0, .25); font-size: 15px; line-height: 1.5;
}
.cookie.vis { transform: translate(-50%, 0); }
.cookie h2 { font-family: var(--f-titoli); font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.cookie p { margin: 0 0 12px; }
.cookie__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.cookie .btn { min-height: 40px; padding: 11px 16px; font-size: 13px; letter-spacing: 1px; box-shadow: none; }
.btn--fantasma { background: #fff; color: var(--petrolio); box-shadow: inset 0 0 0 2px var(--acqua) !important; }
.btn--fantasma:hover { background: var(--acqua); color: var(--petrolio); }
.cookie__scelte label { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: 14px; }
.cookie__scelte label > span > span { display: block; color: var(--testo); }
.cookie__link { font-size: 13px; margin: 6px 0 0; }
.cookie__link a { font-weight: 700; }
/* torna su */
.su { background: var(--acqua); color: var(--petrolio); }
/* =============================================================== pagina di ringraziamento */
.grazie-titolo { font-family: var(--f-titoli); font-size: 50px; font-weight: 600; line-height: 1.1; color: var(--nero); }
.grazie-ricevuto { font-size: 26px; line-height: 1.4; letter-spacing: -.5px; }
.grazie-mappa-tit { font-size: 26px; font-weight: 600; line-height: 1.4; letter-spacing: -1px; }
.grazie-social a { display: inline-flex; padding: 8px; background: #fff; color: var(--turchese); line-height: 0; }
.grazie-social svg { width: 36px; height: 36px; fill: currentColor; }
@media (max-width: 767px) { .grazie-titolo { font-size: 40px; } .grazie-dove { margin-top: -15px !important; } }
/* Pagine trattamenti, gruppo tratt-a: igiene, conservativa, parodontologia, pedodonzia */
/* titolo dei passi in h4 (icon box con line-height 30px) */
.passo h4.passo__tit { line-height: 30px; }
/* divisore a righe isolato prima della fascia Prenota (igiene) */
.ta-div-fine { margin-top: 30px; }
@media (max-width: 767px) { .ta-div-fine { margin: 10px 0; } }
/* persona singola nella fascia «Chi si occupa» (parodontologia) */
@media (max-width: 767px) { .ta-linea-ultima { margin-bottom: 40px; } }
/* pedodonzia: «Chi si occupa» dentro la colonna (image box con foto a sinistra) */
.pedo-chi h4 { margin: 0; }
.pedo-persona { display: flex; align-items: flex-start; gap: 20px; }
.pedo-persona img { width: 100px; height: auto; border-radius: 50%; flex: none; }
.pedo-persona__nome { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.4; color: var(--nero); }
.pedo-persona__ruolo { margin: 0; font-size: 16px; font-weight: 300; color: var(--testo); }
@media (max-width: 767px) {
.pedo-chi h4 { text-align: center; }
.pedo-persona { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
}
/* pedodonzia: riquadro con il modulo */
.pedo-box {
border: 8px solid var(--acqua); border-radius: 10px; padding: 50px;
}
.pedo-box__tit { margin: 0 0 50px; text-align: center; line-height: 1.3em; }
.pedo-box .modulo__invio { width: 100%; text-align: center; }
.pedo-box .modulo__invio .btn { width: auto; min-height: 47px; padding: 15px 30px; }
.pedo-box__oppure { margin: 50px 0 0 !important; text-align: center; }
.pedo-box__tel { margin: 12px 0 4px !important; text-align: center; }
.pedo-box .modulo .campo { margin-bottom: 20px; }
@media (max-width: 767px) {
.pedo-box { padding: 35px 25px; }
.pedo-box__tit { margin-bottom: 30px; font-size: 21px; }
.pedo-box .modulo { padding-bottom: 20px; }
.pedo-box__oppure { margin: 20px 0 -8px !important; }
}
/* pedodonzia: margini delle due immagini (più stretti da telefono) */
.ta-img-1 { margin-top: 30px; }
.ta-img-2 { margin: 30px 0; }
@media (max-width: 767px) {
.ta-img-1 { margin-top: 10px; }
.ta-img-2 { margin: 10px 0; }
}
/* pagine trattamenti gruppo B: ortodonzia, protesi, intarsi dentali, sbiancamento dentale */
/* icon box con titolo h4 (line-height 30px nell'originale) */
.tb-passo-h4 .passo__tit { line-height: 30px; }
/* icon box "Ortodonzia per i bambini / per gli adulti": titolo 18px nero, non maiuscolo */
.tb-passo-nero .passo__tit { font-size: 18px; line-height: 30px; text-transform: none; color: var(--nero); }
/* titoletto in (heading widget p: Karla 16px maiuscolo turchese) */
.tb-etichetta { margin: 0; font-family: var(--f-testo); font-size: 16px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0; color: var(--turchese); }
@media (max-width: 767px) {
.tb-etichetta { line-height: 1.3em; margin-top: 6px !important; margin-bottom: 0 !important; }
}
/* fascia "Chi si occupa" di ortodonzia: sotto la linea 40px su telefono */
@media (max-width: 767px) { .chi-occupa .tb-ultimo { margin-bottom: 40px; } }
@media (max-width: 767px) { .tb-img-protesi { margin: 0 0 10px !important; } }
/* testi che nell'originale hanno 15px sopra solo su telefono */
@media (max-width: 767px) { .tb-mt15-m { margin-top: 15px !important; } }
/* ==========================================================================
Studio Acocella — pagine: home e contatti.
Solo ciò che il vocabolario comune non copre. Classi .home-… e .contatti-…
========================================================================== */
/* ------------------------------------------------ home: apertura con video */
.home-apertura { overflow: hidden; isolation: isolate; background: var(--nero); }
.home-apertura__video {
position: absolute; inset: 0; z-index: -1;
width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.home-apertura::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, .26); }
.home-apertura .forma, .home-apertura::after { z-index: 1; }
.home-sorriso { font-family: var(--f-titoli); font-size: 95px; font-weight: 700; line-height: 1.2; color: #fff; text-align: center; }
.home-sorriso .ruota { vertical-align: baseline; }
.home-h1 { font-family: var(--f-titoli); font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -.2px; color: #fff; text-align: center; }
.home-oppure { color: #fff; text-align: center; }
.home-apertura .col > * { margin-bottom: 0 !important; }
/* da telefono: 8px sotto il titolo più i 10px fra gli elementi, come nell'originale */
.home-apertura-m .home-sorriso-m { margin-bottom: 18px !important; }
/* telefono: foto e titolo statico */
.home-sorriso-m { font-family: var(--f-titoli); font-size: 54px; font-weight: 700; line-height: 57px; letter-spacing: -.2px; color: #fff; text-align: center; }
.home-h1-m { font-family: var(--f-titoli); font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: -.2px; color: #fff; text-align: center; }
/* ------------------------------------------------ home: «Più salute…» */
.home-salute {
background-image: url(/wp-content/uploads/2021/10/logo-acocella-trasp.svg);
background-position: 500px 195px; background-repeat: no-repeat; background-size: 680px auto;
}
.home-salute .ruota { color: var(--grigio-verde); }
.home-salute-m { font-family: var(--f-cond); font-size: 70px; font-weight: 600; line-height: 1.1; }
@media (max-width: 1024px) { .home-salute { background-position: 0 0; } }
@media (max-width: 767px) { .home-salute-m { font-size: 40px; } }
/* ------------------------------------------------ home: fascia scura «Il nostro Studio» */
.home-studio h2 { font-family: var(--f-cond); font-weight: 600; color: #fff; text-align: center; }
.home-studio .testo { padding: 0 280px; color: #fff; text-align: center; }
@media (max-width: 767px) {
.home-studio h2 { font-size: 40px; line-height: 1.1; }
.home-studio .testo { padding: 0; }
}
/* ------------------------------------------------ home: «Cosa possiamo fare per te» */
.home-fisso { position: sticky; top: 100px; }
.home-voci .div-linea { --dc: rgba(155, 174, 175, .4); margin: 6px 0 !important; }
.home-voci .testo h3 { margin-top: .5rem; }
/* ------------------------------------------------ home: loghi */
.home-loghi .col { align-items: center; justify-content: center; }
.home-loghi-testi .testo { font-size: 13px; line-height: 20px; color: #7B7B7B; text-align: center; }
/* ------------------------------------------------ home: «Paura del dentista?» */
.home-paura h2 { font-weight: 700; color: #fff; text-align: right; }
.home-paura .testo { font-size: 21px; line-height: 1.5em; letter-spacing: -.3px; color: #fff; }
.home-paura .home-paura-m { font-size: 22px; font-weight: 500; }
@media (min-width: 1025px) { .home-paura { background-attachment: fixed; } }
@media (max-width: 767px) {
.home-paura h2 { text-align: center; font-size: 44px; line-height: 46px; }
.home-paura .home-paura-m { font-size: 21px; letter-spacing: -.6px; }
.home-paura .p-btn--destra { text-align: center; }
}
/* ------------------------------------------------ home e contatti: indirizzo, orari, parcheggio */
.home-dati h4, .home-dati .testo { text-align: left; }
.home-orari { font-size: 17px; line-height: 30px; }
.home-orari h4, .contatti-tit h3 { line-height: 0 !important; }
.home-parcheggio { font-size: 14px; line-height: 22px; }
@media (max-width: 767px) {
.home-dati h3, .home-dati h4, .home-dati .testo { text-align: center; }
.home-dati h3 { font-size: 40px; }
.home-parcheggio-tit { text-align: center; }
}
/* ------------------------------------------------ home: fascia finale con Firenze */
.home-firenze h2 { font-family: var(--f-cond); font-weight: 600; color: #fff; text-align: center; }
.home-firenze .home-fiducia { font-family: var(--f-testo); font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -.8px; color: #fff; text-align: center; }
.home-firenze .img img { opacity: .65; }
@media (max-width: 767px) {
.home-firenze h2 { font-size: 34px; }
.home-firenze .home-fiducia { font-size: 22px; letter-spacing: -1px; }
}
/* ------------------------------------------------ contatti */
.contatti-apertura > .cont { min-height: 650px; align-items: center; }
@media (min-width: 1025px) { .contatti-apertura { background-attachment: fixed; } }
.contatti-apertura h1 span { color: var(--acqua); }
.contatti-icona--80 .icona svg { width: 80px; height: 80px; }
.contatti-icona--75 .icona svg { width: 75px; height: 75px; }
.contatti-icona .icona { --ia: right; }
@media (max-width: 767px) {
.contatti-titolo { text-align: left !important; font-size: 40px !important; line-height: 1.2 !important; padding-left: 10px; }
.contatti-icona .icona { --ia: left; }
.contatti-riga .testo { margin-top: -15px; }
}
.contatti-cornice { border: 8px solid var(--acqua); border-radius: 10px; }
.contatti-cornice .modulo .campo { margin-bottom: 30px; }
.contatti-cornice .modulo .campo:last-of-type { margin-bottom: 30px; }
@media (max-width: 767px) { .contatti-cornice { margin: 0 10px; } }
.contatti-tit { font-size: 17px; line-height: 30px; text-align: center; }
.contatti-parcheggio { font-size: 14px; line-height: 22px; }
/* ------------------------------------------------ home: citazione */
.home-citazione { padding: 0 250px; }
.home-citazione footer { margin-top: 16px; }
.home-righe-citazione { margin: 50px auto !important; }
@media (max-width: 767px) {
.home-citazione { padding: 0; }
.home-righe-citazione { margin: 30px auto 0 !important; }
.home-dati > .cont > .col:first-child { margin-bottom: 40px !important; }
}
/* ------------------------------------------------ contatti: misure */
.contatti-cornice { padding: 50px; }
.contatti-parcheggio { margin: 10px 0 0 14px; }
@media (max-width: 767px) {
.contatti-cornice { padding: 35px 20px 45px; }
.contatti-parcheggi-img { margin: 30px 0 0 3px; }
.contatti-parcheggio { margin: 10px 0 50px; padding: 0 15px 20px; }
.contatti-icona--80 .icona { margin-left: -10px; }
.contatti-icona--80 > div { margin-right: 0 !important; }
.contatti-riga + .contatti-riga .contatti-icona--75 .icona { margin-left: 0; }
.contatti-riga { margin-top: 20px; }
}
/* le forme sagomate da telefono sono larghe 130% (left/right -15%): senza questo
la pagina scorre di lato (difetto segnalato nelle note per componenti.css) */
.home-apertura-m, .home-paura, .contatti-apertura { overflow: hidden; }
/* home: spaziature delle quattro voci come nell'originale (icona e paragrafi del tema) */
.home-voci .icona { margin: 0 0 7px -10px; }
.home-voci .p-btn { margin-bottom: 38px !important; }
.home-sorriso { margin-top: 40px !important; }
.testo.home-oppure > p { margin-bottom: 14px; }
/* il titolo che ruota (animated headline di Elementor) usa la tipografia «primary» del kit:
Barlow Condensed 70px/600, interlinea 1.1 */
.home-salute h2.nascosto-mobile { font-family: var(--f-cond); font-size: 70px; font-weight: 600; line-height: 1.4; } /* altezza misurata sull'originale: 98px */
/* Pagine della sezione Chirurgia (/chirurgia/…/) */
/* (i margini sotto tengono conto dei 10px fra un elemento e l'altro)
Voci con titolo h4 turchese (es. «Estrazione dentaria»): heading h4 16px/700, interlinea 30px */
.chir-voce { margin: 0; font-family: var(--f-testo); font-size: 16px; font-weight: 700; line-height: 30px; letter-spacing: 0; text-transform: uppercase; color: var(--turchese); }
.col > .chir-voce { margin: 0 0 10px; }
.col > .chir-voce--stretto { margin: 0 0 2px; }
@media (max-width: 767px) {
.col > .chir-voce { margin: 10px 0 5px; }
.col > .chir-voce--stretto { margin: 0 0 2px; }
.chir-voce--23 { line-height: 23px; }
}
/* Passi: titolo in
con l'interlinea del testo (1.6, come nel sito vecchio), titolo h4 a 30px (rialzo del seno) */
.chir-passo-p .passo__tit { line-height: 1.6; }
.chir-passo-30 .passo__tit { line-height: 30px; }
@media (max-width: 767px) { .chir-passo-m13 .passo__tit { line-height: 1.3em; } }
/* Fascia con foto «I nostri impianti» */
.chir-impianti h2 { font-family: var(--f-cond); font-weight: 600; color: #fff; }
.chir-impianti .testo { font-family: 'Raleway', sans-serif; font-weight: 400; color: #fff; }
@media (max-width: 767px) { .chir-impianti h2 { font-size: 40px; line-height: 1.1em; } }
/* Spazi del blocco «altri» (solo telefono) come nel sito vecchio */
.altri:has(+ .chir-righe) { --pad-m: 0 15px 15px; }
.altri:has(+ .chir-impianti) { --pad-m: 0 15px 70px; }
/* Fascia col solo divisore a righe prima di «Prenota» */
.chir-righe .div-righe { --dgap: 12px; margin: 30px 0 0; }
@media (max-width: 767px) { .chir-righe .div-righe { margin: 10px 0; } }
/* Divisore a righe nel testo: il divisore di Elementor ha 12px di spazio sopra e sotto
oltre al margine (30px computer, 10px telefono) */
.col > .chir-hr { --dgap: 12px; margin: 30px 0 40px; }
@media (max-width: 767px) { .col > .chir-hr { margin: 10px 0 20px; } }
/* Margine sopra i testi: 10px su computer (chir-t10), 15px su telefono (chir-m15) */
.col > .chir-t10 { margin-top: 10px; }
@media (max-width: 767px) { .col > .chir-m15 { margin-top: 15px; } .col > .chir-m0 { margin-top: 0; } }
/* ==========================================================================
Studio Acocella — pagine Chi siamo, Privacy Policy, Cookies.
Classi prefissate: .chi- (chi siamo), .leg- (privacy e cookie).
========================================================================== */
/* ------------------------------------------------------------- chi siamo */
/* apertura: foto ferma mentre si scorre, come nel sito vecchio (solo computer) */
@media (min-width: 1025px) { .chi-apertura { background-attachment: fixed; } }
/* citazione: Amatic SC 40px (30px su telefono), senza firma */
.chi-citazione { padding: 0 100px; }
.chi-citazione p { font-size: 40px; font-weight: 100; line-height: 1.4em; color: var(--nero); }
@media (max-width: 767px) {
.chi-citazione { padding: 0; }
.chi-citazione p { font-size: 30px; }
}
/* fasce scure dei medici */
.chi-scuro { --bg: var(--nero); color: #fff; }
.chi-scuro h1, .chi-scuro h2, .chi-scuro h3, .chi-scuro h4 { color: #fff; }
.chi-scuro a { color: var(--acqua); }
.chi-nome { font-family: var(--f-cond); font-weight: 600; text-align: left; }
@media (max-width: 767px) { .chi-nome { font-size: 40px; line-height: 1.1em; } }
.chi-foto { position: relative; z-index: 50; }
.chi-foto img { width: 100%; }
/* riquadro con bordo acqua (Dott. Giannini) */
.chi-bordo { border: 8px solid var(--acqua); border-radius: 10px; padding: 60px; }
@media (max-width: 767px) { .chi-bordo { padding: 20px; } }
/* assistenti */
.chi-assistenti { --bg: rgba(177, 228, 232, .28); }
.chi-assistenti h2 { font-weight: 500; text-align: center; }
.chi-assistenti h3, .chi-assistenti h4 { text-align: center; }
.chi-assistenti h4 { color: var(--petrolio); }
.chi-assistenti .div-linea { --dc: rgba(155, 174, 175, .8); margin: 0; }
.chi-assistenti--m h3, .chi-assistenti--m h4 { text-align: left; }
/* mission */
.chi-mission h4, .chi-mission h2 { text-align: center; }
.chi-mission .testo { margin: 0 100px; text-align: center; }
@media (max-width: 767px) {
.chi-mission h4, .chi-mission h2, .chi-mission .testo { text-align: left; }
.chi-mission .testo { margin: 0; }
}
/* divisore a righe sopra la fascia Prenota */
.chi-righe { --dw: 100%; margin: 12px 0; }
@media (max-width: 767px) { .chi-righe { margin: 22px 0; } }
/* ------------------------------------------------------ privacy e cookie */
/* l'H1 ha l'aspetto del titolo (h2) della pagina originale */
.leg-titolo, .col > .leg-titolo {
margin: 0 0 50px; font-family: var(--f-titoli); font-size: 50px; font-weight: 600;
line-height: 1.1; color: var(--nero);
}
@media (max-width: 767px) { .leg-titolo { font-size: 40px; } }
/* privacy: testo di Iubenda/Complianz nello stile dei blocchi di testo */
.leg-privacy h3 { margin: .5rem 0 1rem; }
.leg-privacy h4 { margin: .5rem 0 1rem; }
/* cookie policy (documento di Complianz): colonna di 800px, testo 14px */
.leg-cookie { max-width: 800px; font-size: 14px; line-height: 28px; }
.leg-cookie h2 { margin: 20px 0 10px; font-size: 22px; font-weight: 600; line-height: 1.5; }
.leg-cookie h3 { margin: 20px 0 10px; font-size: 20px; font-weight: 500; line-height: 1.5; }
.leg-cookie p { margin: 0 0 10px; }
.leg-cookie ul { padding-left: 50px; }
.leg-cookie a { text-decoration: underline; }
/* servizi e cookie: a tendina come nell'originale */
.leg-servizi { margin: 0 0 10px; }
.leg-servizio { margin: 0 0 10px; background: #F5F5F5; border-radius: 0; }
.leg-servizio summary {
display: flex; align-items: center; gap: 10px; padding: 8px 15px;
list-style: none; cursor: pointer;
}
.leg-servizio summary::-webkit-details-marker { display: none; }
.leg-servizio summary h3 { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; }
.leg-servizio summary p { margin: 0; font-size: 13px; line-height: 1.5; text-align: right; }
.leg-servizio summary::after {
content: ""; flex: none; width: 10px; height: 10px; margin: 0 4px 4px 10px;
border-right: 2px solid var(--nero); border-bottom: 2px solid var(--nero);
transform: rotate(45deg); transition: transform .2s;
}
.leg-servizio[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.leg-servizio__dentro { padding: 5px 15px 15px; }
.leg-servizio h4 { margin: 10px 0 0; font-size: 14px; }
.leg-tab { width: 100%; margin: 5px 0 10px; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.leg-tab th, .leg-tab td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid #e3e3e3; }
.leg-tab th { font-weight: 700; color: var(--nero); }
.leg-tab td { word-break: break-word; }
.leg-cookie .p-btn { margin: 10px 0 15px; }
/* link-bottone «Prenota un appuntamento» sotto le schede dei medici */
.col > .chi-btn { margin: 30px 0 20px; }
@media (max-width: 767px) {
.col > .chi-btn { margin: 5px 0 4px; }
.presenta .testo + .testo { margin-top: 15px !important; }
}
/* testi delle schede dei medici: margine sopra 50px (telefono 20px); Giannini 0 (telefono 20px) */
.col > .chi-su { margin-top: 50px; }
@media (max-width: 767px) { .col > .chi-su, .col > .chi-su-m { margin-top: 20px; } }
/* ==========================================================================
Pagine implantologia (a carico immediato, computer guidata, senza osso)
e tecnologie (diagnostica digitale 3D, impronta ottica).
========================================================================== */
/* divisore a righe dentro il testo: margine del widget (30px di base, --dm)
più i 15px di aria del divisore di Elementor; da telefono 10px (--dm-m) */
.it-div { margin: var(--dm, 30px) 0 !important; }
@media (max-width: 767px) { .it-div { margin: var(--dm-m, 10px) 0 !important; } }
/* testo che da telefono prende 15px di spazio sopra */
@media (max-width: 767px) { .it-m15 { margin-top: 15px !important; } }
/* ---------------------------------------------------- colonna del medico */
.impl-medico__nome { margin: 28px 0 8px !important; font-family: var(--f-cond); font-size: 25px; font-weight: 500; line-height: 1.2; color: var(--corpo); }
.impl-medico__testo { font-size: 15px; }
.impl-medico .btn { line-height: 1.3; }
.impl-medico .p-btn { margin-top: 20px; }
/* ------------------------------------------- fascia scura «altri impianti» */
.impl-altri { --bg: var(--nero); --pad: 60px 0 116px; --pad-m: 40px 15px 80px; color: #fff; }
.impl-altri__icona { display: block; line-height: 0; }
.impl-altri__icona svg { width: auto; height: 50px; fill: var(--grigio-verde); }
.impl-altri__tit { margin: 0 !important; font-family: var(--f-cond); font-size: 25px; font-weight: 500; line-height: 1.2; color: #fff; }
.impl-altri__testo { font-size: 15px; }
.impl-altri .div-linea { margin: 17px 0 10px !important; }
.impl-altri .p-btn { margin-top: 20px; }
.impl-altri .btn-link { background: transparent; color: var(--acqua); }
.impl-altri .btn-link:hover { color: var(--verde-scuro); }
/* -------------------------------------------- riquadro con il modulo */
.impl-contatto { --mt: 100px; --mb: 100px; --mt-m: 50px; --mb-m: 80px; --pad: 0 20px; }
.impl-contatto__box {
display: flex; flex-direction: column; align-items: center;
border: 8px solid var(--acqua); border-radius: 10px; padding: 50px;
}
.impl-contatto__box > * { width: 100%; }
.impl-contatto__tit { width: var(--tw, 70%) !important; margin: 0 0 50px !important; text-align: center; line-height: 1.3; }
.impl-contatto .modulo .campo { margin-bottom: 30px; }
.impl-contatto .modulo__invio { width: 100%; text-align: center; }
.impl-contatto .modulo__invio .btn { width: auto; padding: 15px 30px; }
.impl-contatto__oppure { margin: 50px 0 0 !important; text-align: center; }
.impl-contatto__tel { margin: 15px 0 4px; text-align: center; }
@media (max-width: 1024px) { .impl-contatto__tit { width: 100% !important; } }
@media (max-width: 767px) {
.impl-contatto__box { padding: 35px 25px; }
.impl-contatto__tit { margin-bottom: 30px !important; font-size: var(--tf-m, 21px); }
.impl-contatto .modulo { padding-bottom: 20px; }
.impl-contatto__oppure { margin: 20px 0 -8px !important; }
}
/* ---------------------------------------------- galleria «giustificata» */
.it-giust { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.it-giust li { flex: var(--r) 1 0; }
.it-giust img { display: block; width: 100%; height: auto; }
/* ------------------------------------------------- tecnologie */
.tec-lato { text-align: center; }
.tec-lato > * { margin-bottom: 10px; }
.tec-lato__testo { font-size: 13px; line-height: 20px; color: #7B7B7B; }
.tec-elenco { list-style: none; margin: 0; padding: 0; }
.tec-elenco li { padding: 2px 0; }
.tec-elenco a { font-size: 16px; font-weight: 700; line-height: 28px; text-transform: uppercase; color: var(--turchese); }
.tec-elenco a:hover { color: var(--grigio-verde); }
/* fascia con foto fissa che rimanda all'altra tecnologia */
.tec-banda { --pad: 140px 20px; --pad-m: 60px 15px; --mt: 100px; --mt-m: 40px; --mb-m: 80px; color: #fff; }
.tec-banda h2 { font-weight: 700; color: #fff; }
.tec-banda__testo { margin-top: 10px !important; font-size: 21px; line-height: 1.5em; letter-spacing: -.3px; color: #fff; }
.tec-banda .p-btn { margin: 30px 0 10px !important; }
@media (min-width: 1025px) { .tec-banda { background-attachment: fixed; } }
@media (max-width: 767px) { .tec-banda h2 { font-size: 44px; line-height: 46px; text-align: left; } }
@media (max-width: 767px) { .impl-altri__testo { margin-top: 15px; } }
/* fascia «Prenota» delle tecnologie: titolo 42px, ma 40px da telefono (il blocco comune fa 32px) */
@media (max-width: 767px) { .prenota[style*="--tit-m"] .prenota__titolo { font-size: var(--tit-m); } }
/* spazio fra le foto delle gallerie da telefono (--gg-m) */
@media (max-width: 767px) { .galleria[style*="--gg-m"] { gap: var(--gg-m); } }
/* nelle tecnologie il titolo resta 64px anche da telefono */
@media (max-width: 767px) { .tec-titolo { font-size: 64px; line-height: 1.2; } }
/* ==========================================================================
Pagine di sezione: /trattamenti/, /implantologia/, /chirurgia/, /tecnologie/
Solo quello che i componenti comuni non coprono. Classi con prefisso «sezioni-».
========================================================================== */
/* forma tilt non specchiata (implantologia: nell'originale manca il rotateY) */
.sezioni-tilt-dritto::after { transform: rotate(180deg); }
/* titolo in un blocco di testo allineato a sinistra (implantologia) */
.sezioni-sx { text-align: left; }
/* riquadro di presentazione con meno spazio sotto (tecnologie: 80 80 40 80) */
@media (min-width: 768px) { .sezioni-presenta-basso .presenta__box { padding-bottom: 40px; } }
/* ---- schede: le tre colonne di Elementor hanno margini diversi ---- */
.sezioni-schede .scheda { min-height: var(--sh, 0); }
@media (min-width: 1025px) {
.sezioni-schede .scheda-cella:nth-child(3n+2) { padding: 0 18px 35px 17px; }
.sezioni-schede .scheda-cella:nth-child(3n+2)::before { left: 42px; right: 18px; }
.sezioni-schede .scheda-cella:nth-child(3n) { padding: 0 0 35px 35px; }
.sezioni-schede .scheda-cella:nth-child(3n)::before { left: 60px; right: 0; }
}
@media (max-width: 767px) { .sezioni-schede .scheda { min-height: 0; } }
/* ---- fascia «Il nostro staff si prenderà cura di te» ---- */
.sezioni-staff h2 { font-weight: 700; color: #fff; }
.sezioni-staff .testo { font-size: 21px; line-height: 1.5em; letter-spacing: -.3px; color: #fff; }
.sezioni-staff .p-btn { margin: 30px 0 10px !important; }
@media (min-width: 1025px) { .sezioni-staff { background-attachment: fixed; } }
@media (max-width: 767px) {
.sezioni-staff h2 { font-size: 36px; line-height: 46px; }
.sezioni-staff .testo { font-size: 18px; }
}
/* ---- titoli di servizio (Barlow Condensed 25px, non maiuscoli) ---- */
.sezioni-tit25 {
font-family: var(--f-cond); font-size: 25px; font-weight: 500; line-height: 30px;
letter-spacing: .5px; text-transform: none; color: var(--testo);
}
.sezioni-t15 { font-size: 15px; }
/* didascalie dei loghi (13px grigio) */
.sezioni-logo-testo { font-size: 13px; line-height: 20px; color: #7B7B7B; }
/* ---- implantologia ---- */
.sezioni-impianti-tit {
font-family: var(--f-cond); font-size: 26px; font-weight: 600; color: var(--nero);
}
@media (max-width: 767px) { .sezioni-impianti-tit { line-height: 1.2em; } }
/* colonna con la foto e il bordo acqua di lato */
.sezioni-foto-sx { --w: calc(50% - 20px) !important; margin-left: 20px; border-left: 6px solid var(--acqua); }
.sezioni-foto-dx { --w: calc(50% - 20px) !important; margin-right: 20px; border-right: 6px solid var(--acqua); }
.sezioni-foto-sx img, .sezioni-foto-dx img { width: 100%; }
/* citazione su fondo acqua */
.sezioni-citazione { --bg: var(--acqua); }
.sezioni-citazione .citazione::before { color: #fff; }
.sezioni-citazione .citazione p { font-size: 32px; font-weight: 400; line-height: 1.4em; color: var(--nero); margin: 0; }
@media (max-width: 767px) { .sezioni-citazione .citazione p { font-size: 30px; } }
/* ---- tecnologie: fascia scura ---- */
.sezioni-scura { --bg: var(--nero); color: #fff; }
.sezioni-scura h3, .sezioni-scura h4 { color: #fff; }
.sezioni-scura h3 { line-height: 37px; }
.sezioni-scura .btn-link { background: var(--nero); color: var(--acqua); }
.sezioni-scura .btn-link:hover { color: #fff; }
.sezioni-foto-bordo img { width: 100%; border-bottom: 6px solid var(--acqua); }
/* icona più grande da telefono (chirurgia) */
@media (max-width: 767px) { .sezioni-icona-90 .icona { --is: 90px; } }
/* ---- piccoli aggiustamenti per telefono e tablet ---- */
.sezioni-spazio { height: 20px; }
.sezioni-btn-servizio { margin: 15px 0 4px !important; }
@media (min-width: 768px) and (max-width: 1024px) { .sezioni-col-impianti { --w: 100% !important; --cp: 0 !important; } }
@media (max-width: 767px) {
.sezioni-h2-impianti { margin-top: 30px !important; }
.sezioni-h3-impianti, .sezioni-mt-30m { margin-top: 30px !important; }
.sezioni-mt-10m { margin-top: 10px !important; }
.sezioni-righe-m { width: calc(100% - 10px); margin: 10px 5px !important; }
.sezioni-righe-mb { margin-bottom: 10px !important; }
.sezioni-btn-servizio { margin: 5px 0 20px !important; }
}
@media (max-width: 767px) {
.sezioni-mb-25m { margin-bottom: 25px !important; }
.sezioni-mb-30m { margin-bottom: 30px !important; }
}
/* misure ricavate dal confronto con le schermate originali (spaziatura dei widget di Elementor) */
.sezioni-presenta .presenta__box > .testo:first-child { margin-bottom: 27px; }
@media (min-width: 768px) {
.sezioni-schede { --mb: 30px !important; }
.sezioni-schede .scheda__tit { margin-bottom: 16px; }
.sezioni-schede .scheda .p-btn { margin-top: 33px; }
.sezioni-schede .scheda-cella > .scheda { padding-bottom: 47px; }
}
/* la forma tilt da telefono è più larga della pagina (left/right -15%): si taglia qui
per non far scorrere la pagina di lato (difetto del componente comune, vedi note) */
.sezioni-apertura { overflow: hidden; }
.sezioni-schede .scheda__tit { margin-bottom: 16px; }
@media (max-width: 767px) { .sezioni-presenta .presenta__box > .testo:first-child { margin-bottom: 34px; } }
.testo > .sezioni-h2-impianti { margin-bottom: 16px; }
@media (max-width: 767px) {
.sezioni-loghi > .img { margin-bottom: 20px !important; }
.sezioni-loghi > .sezioni-spazio { height: 35px; }
}
@media (min-width: 768px) { .sezioni-loghi > .sezioni-spazio { height: 28px; } }
@media (max-width: 767px) { .sezioni-prenota .prenota__titolo { font-size: 36px; } }
@media (max-width: 767px) { .sezioni-schede .scheda .p-btn { margin: 14px 0 10px; } }
/* ==========================================================================
Studio Acocella — landing page delle campagne (/dentista-pediatrico/).
Nel sito vecchio era una «landing page» di Elementor: niente intestazione né
piè di pagina del sito (template landing.html). Misure dall'albero Elementor:
computer, tablet (max 1024px) e telefono (max 767px).
========================================================================== */
html:has(body.landing) { scroll-padding-top: 0; }
/* ---------------------------------------------------------------- comuni */
.lp-t19 { font-size: 19px; line-height: 1.7; }
.lp-blocco { display: block; }
.landing .chiaro { color: #fff; }
/* bottone pieno turchese con testo bianco (i bottoni della landing) */
.lp-btn {
min-height: 0; padding: var(--bp, 20px 40px);
background: var(--turchese); color: #fff;
font-size: 20px; letter-spacing: 2px; line-height: 1; border-radius: 3px; box-shadow: none;
}
.lp-btn:hover, .lp-btn:focus-visible { background: var(--acqua); color: var(--petrolio); box-shadow: none; }
.lp-btn--tel { --bp: 20px 40px; gap: 5px; }
.lp-btn__ico { width: 1em; height: 1em; fill: currentColor; flex: none; }
.lp-btn--grande { --bp: 28px 60px; }
.lp-btn--largo { --bp: 25px 60px; }
.lp-btn--bianco { --bp: 25px 60px; background: #fff; color: var(--petrolio); }
/* --------------------------------------------------------------- apertura */
.lp-apertura, .lp-apertura-m {
--foto: url(/wp-content/uploads/2024/09/img-anteprima-video-landing-bambini.jpg);
border-top: 10px solid var(--turchese);
}
.lp-apertura { --pos: 50% 50%; --velo: linear-gradient(180deg, #FFFFFF26 50%, #FFFFFF 100%); padding: 50px 20px 250px; }
.lp-logo img { width: 400px; }
.lp-apertura__tit { margin: 0 0 30px !important; }
.lp-sopra {
font-family: var(--f-testo); font-size: 21px; font-weight: 300; line-height: 1;
letter-spacing: 3px; text-transform: uppercase; color: var(--nero);
}
.lp-h1 {
margin: 0; font-family: var(--f-titoli); font-size: 75px; font-weight: 600; line-height: 1;
letter-spacing: 0; color: var(--nero);
}
.lp-sottotitolo { font-family: var(--f-titoli); font-size: 27px; font-weight: 400; line-height: 1.4; color: var(--nero); }
.lp-apertura__tel { margin-top: 30px !important; }
/* apertura da telefono: foto in fondo, velo bianco in alto */
.lp-apertura-m {
--pos: bottom center; --velo: linear-gradient(180deg, #FFFFFF 55%, #FFFFFF00 100%);
padding: 20px 20px 220px; background-size: 130% auto;
}
.lp-apertura-m__col > *:not(:last-child) { margin-bottom: 50px; }
.lp-apertura-m__col > .lp-apertura-m__tit { margin-bottom: 25px; }
.lp-apertura-m__tit .col > *:not(:last-child) { margin-bottom: 8px; }
.lp-apertura-m .lp-sopra { font-size: 15px; line-height: 1.3; }
.lp-apertura-m .lp-h1 { font-size: 45px; }
.lp-apertura-m .lp-sottotitolo { font-size: 23px; }
.lp-apertura-m__tel { margin-top: -20px; }
.lp-apertura-m .lp-btn--tel { --bp: 17px 25px; font-size: 16px; }
/* ------------------------------------------------- «dove ogni visita è una coccola» */
.lp-coccola h2 { font-family: var(--f-titoli); font-size: 55px; text-align: right; }
.lp-coccola__a { margin-right: 100px; font-weight: 700; }
.lp-coccola__b { font-weight: 400; }
.lp-coccola__m { font-weight: 400; }
/* --------------------------------------------------- Dott.ssa Nardi + testo */
.lp-nardi__foto { position: relative; align-items: center; }
.lp-nardi__img {
margin: -100px 0 0 !important; padding: 0 0 0 25px; width: 100%;
background: url(/wp-content/uploads/2021/07/logo-pittogramma-scuro.svg) 0% 69% / contain no-repeat;
}
.lp-nardi__img img { width: 400px; }
.lp-nardi__nome {
position: absolute; right: -10%; bottom: 20%; z-index: 2;
padding: 15px; background: #fff; border-radius: 4px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}
.lp-nardi__nome p { margin: 0; }
.lp-nardi__tit {
margin-bottom: 9px !important; font-family: var(--f-testo); font-size: 19px; font-weight: 700;
line-height: 1; letter-spacing: 1px; text-transform: uppercase; color: var(--petrolio);
}
.lp-nardi__ruolo { font-size: 19px; font-weight: 400; line-height: 1; color: var(--grigio-verde); }
.lp-nardi__testo > *:not(:last-child) { margin-bottom: 5px; }
.lp-paura { font-size: 26px; font-weight: 700; color: var(--petrolio); }
.lp-nardi__btn { position: absolute; left: 15%; bottom: 20%; }
/* spazio fra gli elementi delle colonne (margin-block-end di Elementor, colonna per colonna) */
.lp-apertura__sx > *:not(:last-child) { margin-bottom: 70px; }
.lp-coccola .col > *:not(:last-child) { margin-bottom: 5px; }
.lp-scura__testa > *:not(:last-child) { margin-bottom: 30px; }
.lp-studio__sx > *:not(:last-child) { margin-bottom: 15px; }
.lp-studio__blocco .col > *:not(:last-child) { margin-bottom: 5px; }
.lp-contatti .col > *:not(:last-child) { margin-bottom: 25px; }
.lp-felici .col > *:not(:last-child) { margin-bottom: 5px; }
/* ------------------------------------------------------------ fascia scura */
.lp-scura__tit { font-family: var(--f-titoli); font-size: 55px; font-weight: 400; line-height: 1.2; color: #fff; text-align: center; }
.lp-scura__righe { margin-top: 90px; }
.lp-scura__voci { margin-right: 40px; width: calc(33.3333% - 40px) !important; }
.lp-scura__voci > *:not(:last-child) { margin-bottom: 10px; }
.lp-voce { display: flex; align-items: center; gap: 15px; }
.lp-voce img { width: 80px; height: 80px; flex: none; }
.lp-voce h3 { font-family: var(--f-titoli); font-size: 32px; font-weight: 500; line-height: 1; color: #fff; }
.lp-voce p { margin: 0; font-size: 19px; line-height: 1.7; color: #fff; }
.lp-scura__video { margin-left: 30px; width: calc(66.667% - 30px) !important; }
.lp-video { display: block; width: 100%; height: auto; aspect-ratio: 813 / 532; object-fit: cover; border: 5px solid #fff; border-radius: 5px; }
/* ------------------------------------------------------ «a tua disposizione» */
.lp-servizi__tit { text-align: center; }
.lp-servizi .col > *:not(:last-child) { margin-bottom: 60px; }
.lp-servizi__riga { margin: 0 0 30px !important; }
.lp-servizi__riga--2 { margin: 30px 0 0 !important; }
.lp-scheda { height: 100%; padding: 50px; border: 1px solid #BFBFBF; border-radius: 20px; }
.lp-scheda--sx { margin-right: 30px; }
.lp-scheda--dx { margin-left: 30px; }
.lp-scheda > *:not(:last-child) { margin-bottom: 20px; }
.lp-scheda__num { font-family: var(--f-titoli); font-size: 56px; font-weight: 500; line-height: .8; color: var(--turchese); }
.lp-scheda__tit { margin-bottom: 30px !important; font-family: var(--f-titoli); font-weight: 500; line-height: .8; color: var(--petrolio); }
.lp-servizi__btn { margin-top: 60px !important; }
/* ---------------------------------------------------------- ancora #studio */
.lp-ancora .col { padding: 10px; }
/* ----------------------------------------------------------- il nostro studio */
.lp-studio__tit { color: #fff; }
.lp-studio__blocco { margin: 20px 0 !important; }
.lp-etichetta {
font-family: var(--f-testo); font-size: 16px; font-weight: 900; line-height: 1;
letter-spacing: 1px; text-transform: uppercase; color: #fff;
}
.lp-mappa .mappa { height: 550px; }
/* ------------------------------------------------------------------- FAQ */
.lp-faq__tit { font-weight: 400; }
.lp-fisarmonica { margin-top: 30px; }
.lp-fisarmonica details { border: 1px solid #E5E7EB; }
.lp-fisarmonica details + details { border-top: 0; }
.lp-fisarmonica summary {
position: relative; display: block; padding: 25px 55px 25px 25px; cursor: pointer; list-style: none;
font-family: var(--f-titoli); font-size: 24px; font-weight: 500; line-height: .85; color: var(--nero);
}
.lp-fisarmonica summary::-webkit-details-marker { display: none; }
.lp-fisarmonica summary::after {
content: ""; position: absolute; right: 25px; top: 50%; width: 17px; height: 17px; margin-top: -8px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 7L10 12L5 7' stroke='%23545454' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lp-fisarmonica details[open] summary::after { transform: rotate(180deg); }
.lp-fisarmonica__testo { padding: 25px; border-top: 1px solid #E5E7EB; font-size: 16px; line-height: 1.7; color: #6C6E77; }
.lp-fisarmonica__testo p:last-child { margin-bottom: 0; }
/* ------------------------------------------------------------- contatti */
.lp-contatti .col { align-items: center; }
.lp-contatti .col > * { width: 100%; }
.lp-contatti__tit { font-family: var(--f-titoli); font-size: 55px; font-weight: 700; text-transform: uppercase; }
.lp-contatti__testo { font-size: 19px; }
.lp-modulo { margin-top: 40px; text-align: left; }
.lp-modulo .modulo .campo { margin-bottom: 30px; }
.lp-modulo .modulo .campo:last-of-type { margin-bottom: 30px; }
.lp-modulo .modulo input[type=text], .lp-modulo .modulo input[type=email], .lp-modulo .modulo input[type=tel],
.lp-modulo .modulo select, .lp-modulo .modulo textarea { background-color: #F3F3F3; border-width: 0; }
.lp-modulo .modulo__invio { text-align: center; }
.lp-modulo .modulo__invio .btn {
width: auto; padding: 20px 50px; border-radius: 6px;
background: var(--turchese); color: #fff; font-size: 20px; letter-spacing: 2px;
}
.lp-modulo .modulo__invio .btn:hover { background: var(--acqua); color: var(--petrolio); }
.lp-oppure { margin: 30px 0 -15px !important; font-family: var(--f-testo); font-size: 19px; font-weight: 500; text-align: center; }
.lp-contatti__tel { margin-bottom: 20px !important; }
.lp-tel { font-size: 28px; letter-spacing: 2px; }
/* ------------------------------------------------------ «bambini felici» */
.lp-felici {
--foto: url(/wp-content/uploads/2024/09/studio-acocella-dentista-bambini.jpg);
--velo: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF33 50%);
padding: 400px 20px 200px; border-bottom: 10px solid var(--acqua);
}
.lp-felici .col { align-items: flex-end; }
.lp-felici h2 { font-family: var(--f-titoli); font-size: 55px; font-weight: 600; text-align: right; }
.lp-felici__a { margin-right: 100px; }
/* ------------------------------------------------------ piè di pagina */
.lp-piede { padding: 30px 20px; background: var(--nero); color: #fff; text-align: center; font-size: 14px; line-height: 1.7; }
.lp-piede p { margin: 0 0 8px; }
.lp-piede a { font-size: 14px; font-weight: 400; }
.lp-piede__logo { display: block; width: 170px; height: auto; margin: 0 auto 10px; }
.lp-piede__legale { margin-bottom: -10px !important; padding-top: 10px; }
.lp-piede__cookie { margin: 18px 0 0 !important; }
.lp-piede .piede__cookie { font-size: 12px; }
/* =============================================================== tablet */
@media (max-width: 1024px) {
.lp-apertura { padding: 50px 20px 200px; }
.lp-apertura__sx { width: 65%; }
.lp-apertura__dx { width: 35%; }
.lp-logo img { width: 300px; }
.lp-sopra { font-size: 18px; }
.lp-h1 { font-size: 57px; line-height: 1.1; }
.lp-apertura__tel { margin-top: 20px !important; }
.lp-btn--tel { --bp: 17px 25px; font-size: 16px; }
.lp-btn { font-size: 16px; }
.lp-btn--largo, .lp-btn--bianco { --bp: 20px 40px; }
.lp-coccola { margin-bottom: 20px; }
.lp-coccola h2 { font-size: 45px; }
.lp-nardi__foto { margin-right: 20px; width: calc(50% - 20px) !important; }
.lp-nardi__img { margin: 0 !important; padding: 0 30px; background-position: 50% 66%; }
.lp-nardi__nome { right: -5%; bottom: 10%; }
.lp-nardi__tit { margin-bottom: 6px !important; font-size: 16px; }
.lp-nardi__ruolo { font-size: 16px; }
.lp-nardi__testo { margin: 0 0 50px 20px; width: calc(50% - 20px) !important; }
.lp-paura { margin-bottom: -10px !important; font-size: 17px; }
.lp-t19 { font-size: 16px; }
.lp-nardi__btn-m .lp-btn { line-height: 1.4; }
.lp-scura { padding: 80px 20px; }
.lp-scura__tit { font-size: 45px; }
.lp-scura__righe { margin-top: 50px; }
.lp-scura__voci { margin-right: 20px; width: calc(33.3333% - 20px) !important; }
.lp-voce { gap: 10px; }
.lp-voce img { width: 59px; height: 59px; }
.lp-voce h3 { font-size: 25px; line-height: .8; }
.lp-voce p { font-size: 16px; line-height: 1.5; }
.lp-servizi { margin-top: 80px; margin-bottom: 80px; }
.lp-servizi__tit { font-size: 45px; }
.lp-servizi__riga { margin: 0 0 15px !important; }
.lp-servizi__riga--2 { margin: 15px 0 0 !important; }
.lp-scheda { padding: 30px; }
.lp-scheda--sx { margin-right: 15px; }
.lp-scheda--dx { margin-left: 15px; }
.lp-scheda__num { font-size: 50px; }
.lp-scheda__tit { margin-bottom: 10px !important; font-size: 28px; line-height: 1.1; }
.lp-servizi__btn { margin-top: 40px !important; }
.lp-studio { padding: 80px 20px; }
.lp-studio__tit { font-size: 35px; }
.lp-studio__blocco { margin: 10px 0 !important; }
.lp-studio__blocco--2 { margin: 10px 0 0 !important; }
.lp-studio__dato { font-size: 15px; }
.lp-mappa .mappa { height: 500px; }
.lp-faq { margin-top: 80px; margin-bottom: 50px; }
.lp-faq__tit { font-size: 25px; }
.lp-fisarmonica { margin-top: 0; }
.lp-fisarmonica summary { padding: 20px 50px 20px 20px; line-height: 1.2; }
.lp-fisarmonica summary::after { right: 20px; }
.lp-fisarmonica__testo { padding: 20px; }
.lp-contatti { margin-top: 50px; margin-bottom: 0; }
.lp-contatti__tit { font-size: 35px; }
.lp-contatti__testo { font-size: 16px; }
.lp-modulo { margin-top: 20px; }
.lp-felici { padding: 80px 20px 220px; }
.lp-felici h2 { font-size: 45px; }
.lp-felici .col > *:not(:last-child) { margin-bottom: 0; }
.lp-felici__a { margin-right: 50px; }
}
/* ============================================================== telefono */
@media (max-width: 767px) {
.lp-inverti-m { flex-direction: column-reverse; }
.lp-coccola { margin-top: 50px; margin-bottom: 0; }
.lp-coccola__m { font-size: 30px !important; line-height: 1.2; text-align: left !important; }
.lp-nardi__foto { margin: 0 10px; width: calc(100% - 20px) !important; }
.lp-nardi__img { background-position: 50% 58%; }
.lp-nardi__img img { width: 180px; }
.lp-logo img { width: 200px; }
.lp-nardi__nome { right: 4%; bottom: 19%; padding: 12px 10px 10px; text-align: right; }
.lp-nardi__tit { font-size: 12px; }
.lp-nardi__ruolo { font-size: 12px; }
.lp-nardi__testo { margin: 0 0 30px; width: 100% !important; }
.lp-nardi__btn-m { margin-top: 20px !important; }
.lp-nardi__btn-m .lp-btn { display: flex; width: 100%; --bp: 15px 20px; }
.lp-scura__tit { font-size: 30px; }
.lp-scura__btn .lp-btn { display: flex; width: 100%; }
.lp-scura__voci { margin: 30px 0 0; width: 100% !important; }
.lp-servizi .col > *:not(:last-child) { margin-bottom: 40px; }
.lp-contatti .col > *:not(:last-child) { margin-bottom: 20px; }
.lp-scura__video { margin-left: 0; width: 100% !important; }
.lp-servizi__tit { font-size: 30px; }
.lp-servizi__riga { margin: 0 0 20px !important; }
.lp-servizi__riga--2 { margin: 0 !important; }
.lp-scheda--sx { margin: 0 0 20px; }
.lp-scheda--dx { margin: 0; }
.lp-servizi__btn .lp-btn { line-height: 1.4; }
.lp-mappa .mappa { height: 300px; }
.lp-faq__sx { margin-bottom: 30px; }
.lp-faq__tit { text-align: center; }
.lp-fisarmonica summary { padding: 15px 36px 15px 15px; font-size: 18px; line-height: 1.1; }
.lp-fisarmonica summary::after { right: 15px; }
.lp-fisarmonica__testo { padding: 15px; }
.lp-divisore .div-righe { margin: 10px 0; }
.lp-modulo { margin-top: 30px; padding-bottom: 20px; }
.lp-modulo .modulo__invio .btn { font-size: 16px; }
.lp-oppure { margin: 20px 0 -8px !important; }
.lp-felici { padding: 60px 20px 230px; --pos: bottom center; }
.lp-felici h2 { font-size: 30px; }
.lp-felici__a { margin-right: 30px; }
}
/* ==========================================================================
Rifiniture (passo /rifiniture): stessi colori, stessi caratteri, stesse
posizioni. Cambiano solo stati, transizioni e piccole comparse.
Ogni voce è elencata in REVISIONE.md, parte D.
========================================================================== */
/* --- bottoni: stati curati, piccolo sollevamento, focus ben visibile --- */
.btn { transition: background-color .2s, color .2s, box-shadow .2s, transform .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); box-shadow: 3px 3px 0 -1px rgba(155, 174, 175, .38); }
.btn:focus-visible, .btn-link:focus-visible, .tel-grande:focus-visible { outline: 2px solid var(--petrolio); outline-offset: 4px; }
.chiaro .btn:focus-visible, .sez--foto .btn:focus-visible { outline-color: #fff; }
/* link-bottone: la riga acqua si accende e la freccia si sposta di poco */
.btn-link { transition: color .2s, box-shadow .2s; }
.btn-link:hover { box-shadow: 0 5px 0 0 rgba(177, 228, 232, .9); }
.btn-link .freccia { transition: transform .2s; }
.btn-link:hover .freccia { transform: translateX(4px); }
@media (max-width: 767px) { .btn, .btn-link { min-height: 44px; } .btn-link { padding-top: 12px; } }
/* --- schede dei servizi: leggero sollevamento, tutta la scheda cliccabile --- */
.scheda { transition: transform .25s, box-shadow .25s; }
.scheda-cella:hover .scheda { transform: translateY(-4px); box-shadow: 0 12px 24px -12px rgba(9, 70, 75, .25); }
.scheda .btn-link::after { content: ""; position: absolute; inset: 0; }
.scheda .btn-link { position: static; }
.scheda:focus-within { box-shadow: 0 0 0 3px rgba(9, 70, 75, .35); }
/* --- menu: apertura morbida e una piccola tolleranza in chiusura --- */
.menu__sotto { transform: translateY(6px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; transition-delay: .15s; }
.menu__gruppo:hover > .menu__sotto, .menu__gruppo:focus-within > .menu__sotto, .menu__gruppo.aperto > .menu__sotto {
transform: none; transition: opacity .2s, transform .2s, visibility 0s; transition-delay: 0s;
}
.menu__apri svg { transition: transform .2s; }
.menu__gruppo.aperto > .menu__apri svg, .menu__gruppo:hover > .menu__apri svg { transform: rotate(180deg); }
.menu__sotto a { transition: color .15s, padding-left .15s; }
.menu__sotto a:hover { padding-left: 24px; }
.menu-sezione a { transition: color .2s; }
.menu-mobile { animation: compari .25s ease-out; }
@keyframes compari { from { opacity: 0; } to { opacity: 1; } }
/* --- comparse allo scroll: solo se lo script è attivo (classe js-comparse) --- */
.js-comparse [data-comparsa] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out; transition-delay: var(--ritardo, 0s); }
.js-comparse [data-comparsa].visto { opacity: 1; transform: none; }
/* galleria e foto tonde: zoom discreto */
.img--tondo img { transition: transform .4s; }
.img--tondo:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
.btn:hover, .scheda-cella:hover .scheda { transform: none; }
.js-comparse [data-comparsa] { opacity: 1; transform: none; }
}