/* Victoria's Beauty World — SECONDO RIFACIMENTO (05/10/2026, lead 5164). Il verdetto di Francesco
sulla versione nero/avorio/oro precedente: "non noto molta differenza rispetto a prima se non
per i colori". Aveva ragione: lo schema era rimasto hero testo|foto, elenco, griglia, citazione,
due colonne — solo la tinta era cambiata. Qui cambia l'esperienza, non solo la palette: prima
schermata a tutto schermo con zoom lento, una fascia che scorre, servizi come composizioni
asimmetriche a tutta larghezza con numeri giganti che si sovrappongono a foto e testo, una
galleria con apertura a schermo intero, una chiusura a tutto schermo. Vedi index.html per il
commento completo (ricevuta design, foto, font, riferimenti).
Palette: INVARIATA rispetto al giro precedente (nero profondo, avorio caldo, oro antico, vino
borgogna) — regge benissimo con le nuove foto (oro vero nei gioielli, pennelli su luce calda,
ombretto oro): cambiarla senza motivo avrebbe solo mascherato che la struttura è nuova. Quello
che DEVE cambiare, e cambia, è la messa in scena.
Tipografia: cambiata. Non più Cormorant/Montserrat (già vista nella versione bocciata): ora
Libre Bodoni (titoli, abbinamento "Magazine Style" della base dati: contrasto di tratto alto,
terminali a goccia, voce da copertina di rivista) + Public Sans (testo, geometrico e pulito,
lascia parlare il titolo). Scelta dichiarata in index.html con gli scarti. */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(../font/bodoni-moda.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 700;font-display:swap;src:url(../font/bodoni-moda-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 700;font-display:swap;src:url(../font/jost.woff2) format("woff2")}
:root{
--nero:#15110D;
--nero-2:#221B15;
--avorio:#F7F2EA;
--avorio-2:#EFE4D2;
--bianco:#FFFFFF;
--oro-scuro:#8A5A22;
--oro:#C9A24B;
--vino:#6E1F30;
--muted:#6B6058;
--avorio-muted:#BDB3A8;
--bordo-chiaro:rgba(138,90,34,.22);
--bordo-scuro:rgba(201,162,75,.28);
--focus:#8A5A22;
--raggio:3px;
--ombra-scura: 0 18px 46px rgba(21,17,13,.38);
--serif:"Bodoni Moda",Georgia,serif;
--sans:"Jost",-apple-system,"Segoe UI",sans-serif;
/* Oro metallico del logo (decimo giro, 07/10/2026): un gradiente solo, usato
nelle tre misure del logo (barra, hero, footer) e nel suo riflesso. */
--gradiente-oro:linear-gradient(135deg,#6e5110 0%,#b8902a 14%,#f3df9a 27%,#fff6cf 33%,#d4af37 44%,#8a6814 56%,#c9a227 66%,#f7e7a6 76%,#fff3c4 81%,#b08a24 92%,#7a5a12 100%);
/* Altezza reale della barra in alto (undicesimo giro, 07/10/2026): la scrive
js/interazioni.js leggendo .intestazione con un ResizeObserver, così vale sia
quando la barra è su una riga (computer) sia su due (telefono, dove il nome più
l'icona del menu più le tre lingue non ci stanno affiancati). Finché il JS non è
ancora girato resta 0px: nessuna differenza dal comportamento di prima. */
--h-intestazione:0px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
body{
margin:0;
font-family:var(--sans);
font-weight:300;
color:var(--nero);
background:var(--avorio);
line-height:1.7;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tema-scuro{--focus:#C9A24B}
h1,h2,h3,blockquote{font-family:var(--serif);font-weight:400;margin:0 0 .4em;line-height:1.05;letter-spacing:-.01em}
/* Bodoni Moda è variabile (400-900): il corsivo segna le parole chiave dei titoli (lo stile
italico arriva già dal font-face registrato, qui solo il peso), il nome resta nel peso alto. */
h1 em,h2 em,h3 em,blockquote em{font-style:italic;font-weight:500}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h3{font-size:1.5rem;margin-bottom:.3em;font-weight:500}
p{margin:0 0 1em}
.contenitore{max-width:1280px;margin:0 auto;padding:0 28px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kicker{display:block;font-family:var(--sans);font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;margin-bottom:18px}
.kicker-oro{color:var(--oro-scuro)}
.tema-scuro .kicker-oro{color:var(--oro)}
/* ---------- grana fine sulle fasce scure: rumore disegnato via filtro SVG inline, nessuna
immagine esterna. Molto leggero (opacità bassa), solo un dettaglio da vicino. ---------- */
.grana{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
background-image:url('data:image/svg+xml;utf8,');
}
/* ---------- comparsa all'ingresso in viewport: stessa convenzione .mov/.appare/.vista degli
altri siti (vedi b-b-superior-a11820), così ops/schermata.py (che forza .appare visibile per lo
scatto statico) funziona qui senza toccare lo script. Senza JS o con "riduci i movimenti" il
contenuto resta visibile da subito. ---------- */
.mov .appare{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)}
.mov .appare.vista{opacity:1;transform:none}
.mov .lavoro-item.appare:nth-child(2){transition-delay:.05s}
.mov .lavoro-item.appare:nth-child(3){transition-delay:.1s}
.mov .lavoro-item.appare:nth-child(4){transition-delay:.15s}
.mov .lavoro-item.appare:nth-child(5){transition-delay:.2s}
.mov .lavoro-item.appare:nth-child(6){transition-delay:.25s}
.mov .lavoro-item.appare:nth-child(7){transition-delay:.28s}
.mov .lavoro-item.appare:nth-child(8){transition-delay:.31s}
.mov .lavoro-item.appare:nth-child(9){transition-delay:.34s}
.mov .lavoro-item.appare:nth-child(10){transition-delay:.37s}
.mov .lavoro-item.appare:nth-child(11){transition-delay:.4s}
.mov .lavoro-item.appare:nth-child(12){transition-delay:.43s}
.mov .lavoro-item.appare:nth-child(13){transition-delay:.46s}
.mov .lavoro-item.appare:nth-child(14){transition-delay:.49s}
.mov .lavoro-item.appare:nth-child(15){transition-delay:.52s}
.mov .lavoro-item.appare:nth-child(16){transition-delay:.55s}
.mov .lavoro-item.appare:nth-child(17){transition-delay:.58s}
.mov .passo.appare:nth-child(2){transition-delay:.1s}
.mov .passo.appare:nth-child(3){transition-delay:.2s}
/* ======================================================================
LOGO ORO — DECIMO GIRO (07/10/2026). Francesco ha scelto in un mockup della
sola prima schermata (variante A "oro") il logo vero di Victoria, preso dal
suo PDF Canva, non più a colore piatto ma in oro metallico lucido, con un
riflesso che lo attraversa di tanto in tanto. Perché conta per chi guarda:
un salone di bellezza vende cura e dettaglio — un logo che sembra metallo
vero, non un colore stampato, è lo scarto che fa notare "questo è diverso",
lo stesso lavoro che prima faceva solo la tipografia del nome.
Tecnica: una sagoma trasparente (img/logo-victoria-sagoma.png, solo il
canale alfa conta) ritaglia con mask-image un gradiente oro — sempre lo
stesso, --gradiente-oro, una sola fonte — in tre misure (barra, prima
schermata, footer): solo quella grande, in hero, ha il riflesso animato.
Dove il browser non sa ritagliare con una maschera (vecchio Safari e
altri) torna il PNG piatto di prima (logo-victoria-280.png/@2x): mai un
rettangolo d'oro pieno. */
.logo-oro-contorno{
display:inline-flex;flex-shrink:0;
filter:drop-shadow(0 4px 14px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.4));
}
.logo-oro{
position:relative;display:block;aspect-ratio:1272/1400;overflow:hidden;
background:var(--gradiente-oro);background-size:220% 220%;background-position:30% 20%;
-webkit-mask:url(../img/logo-victoria-sagoma.png) center/contain no-repeat;
mask:url(../img/logo-victoria-sagoma.png) center/contain no-repeat;
}
.logo-oro-fallback{display:none;width:100%;height:100%;object-fit:contain}
@supports not ((mask-image:url()) or (-webkit-mask-image:url())){
.logo-oro{background:none}
.logo-oro-fallback{display:block}
}
.logo-oro--barra{height:34px}
.logo-oro--footer{width:40px;height:auto}
.logo-oro--hero{height:clamp(110px,18vw,240px)}
@media (max-width:480px){.logo-oro--hero{height:clamp(64px,24vw,110px)}}
/* Riflesso, solo sulla variante grande della prima schermata: una banda di
luce che attraversa il disegno in diagonale in circa 1,4s, una volta ogni
6,5s, la prima poco dopo il caricamento. La maschera (la stessa immagine)
ritaglia anche lui, così la luce resta dentro il disegno. */
.logo-oro--riflesso::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 40%,rgba(255,250,225,.9) 50%,transparent 60%);
-webkit-mask:url(../img/logo-victoria-sagoma.png) center/contain no-repeat;
mask:url(../img/logo-victoria-sagoma.png) center/contain no-repeat;
transform:translateX(-140%);
animation:riflesso-logo-oro 6.5s ease-in-out infinite;
animation-delay:.7s;
}
@keyframes riflesso-logo-oro{
0%{transform:translateX(-140%)}
21%{transform:translateX(140%)}
100%{transform:translateX(140%)}
}
@media (prefers-reduced-motion:reduce){
.logo-oro--riflesso::after{animation:none;opacity:0}
}
/* ---------- header: sottile, sopra tutto, nome in tipografia + il logo oro
accanto (dal settimo giro; grande dal nono; oro metallico dal decimo). ---------- */
.intestazione{
position:sticky;top:0;z-index:80;
background:rgba(21,17,13,.82);
backdrop-filter:saturate(1.1) blur(10px);
border-bottom:1px solid var(--bordo-scuro);
}
.intestazione .contenitore{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-top:10px;padding-bottom:10px}
.logo-link{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;min-height:44px}
.logo-link span{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--avorio);font-size:1.25rem;white-space:nowrap;letter-spacing:.01em}
.nav-principale{display:none;gap:26px;margin-left:auto}
.nav-principale a{display:inline-flex;align-items:center;min-height:44px;color:var(--avorio-muted);text-decoration:none;font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:0 2px;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.nav-principale a:hover{color:var(--avorio);border-bottom-color:var(--oro)}
@media (min-width:860px){.nav-principale{display:flex}}
/* DODICESIMO GIRO (07/10/2026): .nav-mobile non è più il contenitore posizionato del
pannello. Sotto gli 860px la barra va su due righe (riga 1: logo + hamburger; riga 2:
cambia-lingua), e il pannello era ancorato al solo hamburger (riga 1): si apriva sopra
la riga 2, coprendo IT/ES/EN. Il pannello resta dentro .nav-mobile nell'HTML ma si
posiziona rispetto a .intestazione (sticky, quindi già un contenitore di posizionamento):
top:100% è il fondo della barra intera, qualunque sia la sua altezza in quel momento
(una riga sopra gli 860px — dove però il pannello non si apre mai — o due sotto), senza
bisogno della variabile JS. right:28px replica il padding di .contenitore (il pannello
non vive più dentro quel padding). */
.nav-mobile{margin-left:auto}
.nav-mobile summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;color:var(--avorio);border-radius:50%;border:1px solid transparent;transition:border-color .2s ease}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile summary svg{width:22px;height:22px}
.nav-mobile summary:hover{border-color:var(--bordo-scuro)}
.nav-mobile[open] summary{background:var(--oro);color:var(--nero);border-color:var(--oro)}
.nav-mobile .pannello-sezioni{
position:absolute;top:calc(100% + 10px);right:28px;z-index:90;
display:flex;flex-direction:column;gap:2px;min-width:200px;
background:var(--nero-2);border:1px solid var(--bordo-scuro);border-radius:var(--raggio);
box-shadow:var(--ombra-scura);padding:8px;
}
.nav-mobile .pannello-sezioni a{display:flex;align-items:center;min-height:44px;padding:0 14px;color:var(--avorio);text-decoration:none;font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border-radius:2px}
.nav-mobile .pannello-sezioni a:hover{background:rgba(201,162,75,.12);color:var(--oro)}
@media (min-width:860px){.nav-mobile{display:none}}
.cambia-lingua{display:flex;gap:4px;margin-left:auto;font-size:.76rem}
@media (min-width:860px){.cambia-lingua{margin-left:28px}}
.cambia-lingua a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;box-sizing:border-box;color:var(--avorio-muted);text-decoration:none;font-weight:600;letter-spacing:.04em;padding:6px 8px;border:1px solid transparent;transition:border-color .2s ease,color .2s ease}
.cambia-lingua a:hover{border-color:var(--bordo-scuro);color:var(--avorio)}
.cambia-lingua a[aria-current="page"]{background:var(--oro);color:var(--nero)}
/* ---------- pulsanti ---------- */
.pulsante{
display:inline-flex;align-items:center;justify-content:center;gap:12px;
padding:16px 30px;border-radius:var(--raggio);font-weight:600;font-size:.82rem;
letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);
text-decoration:none;cursor:pointer;border:1.5px solid transparent;
transition:transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
min-height:48px;
}
.pulsante-primario{background:var(--vino);color:var(--avorio)}
.pulsante-primario:hover{background:#852540;box-shadow:0 16px 32px rgba(110,31,48,.4);transform:translateY(-2px)}
.pulsante-secondario{background:rgba(247,242,234,.08);color:var(--avorio);border-color:var(--avorio-muted)}
.pulsante-secondario:hover{background:var(--avorio);color:var(--nero);border-color:var(--avorio);transform:translateY(-2px)}
.pulsante svg{width:18px;height:18px;flex-shrink:0}
/* ======================================================================
HERO — a tutto schermo (100svh), foto vera, zoom lento (Ken Burns),
titolo enorme che entra con una maschera. Niente colonne testo|foto.
====================================================================== */
.hero{
position:relative;isolation:isolate;overflow:hidden;
min-height:100vh;min-height:100svh;
color:var(--avorio);background:var(--nero);
}
/* UNDICESIMO GIRO (07/10/2026): la barra in alto è sticky ma resta nel flusso (occupa il suo
spazio sopra la .hero, non è fuori come un position:fixed), quindi barra + hero alta 100svh
insieme superano l'altezza della finestra — il contenuto della hero, ancorato in basso
(.hero-contenuto, align-items:flex-end), finiva sotto la piega. Solo sotto gli 860px (lo
stesso punto dove la barra passa da riga unica a riga con il menu a scomparsa, sopra):
l'altezza della hero si riduce di quanto occupa davvero la barra in quel momento, letta da
js/interazioni.js. Sopra gli 860px non cambia nulla: lì la barra è già una riga sola e la
composizione del computer non si deve toccare. */
@media (max-width:859px){
.hero{min-height:calc(100svh - var(--h-intestazione))}
}
.hero-sfondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-sfondo picture{position:absolute;inset:0;display:block}
/* La foto è verticale (2:3): su schermi larghi e bassi object-fit:cover taglia solo in verticale
(la larghezza combacia sempre), quindi conta la posizione Y — 48% inquadra il bracciale e gli
anelli, che nell'originale stanno fra il 35% e il 67% dell'altezza. Su telefono (stretto e
alto) succede il contrario: l'altezza combacia e si taglia in orizzontale, quindi conta la X —
16% porta il grappolo mano+gioielli (centrato al 38% della larghezza originale) dentro la
finestra visibile. Verificato a 1280×800, 1440×900, 1920×1080 e 390×844 con ops/schermata.py. */
.hero-sfondo img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;
animation:hero-zoom 24s ease-in-out infinite alternate;will-change:transform}
@media (max-width:700px){.hero-sfondo img{object-position:16% 50%}}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.hero-sfondo img{animation:none}}
/* il velo scuro è un ::before di hero-contenuto (non più un div a parte): così lo strumento di
misura, che cammina la pila di elementi dietro ogni testo, lo riconosce come "velo sopra una
foto" e rimanda il contrasto all'occhio (come già faceva il divisore) invece di calcolarlo
come se il testo stesse su un colore piatto bianco — errore scoperto misurando questo giro. */
.hero-contenuto{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end}
.hero-contenuto::before{
content:"";position:absolute;inset:0;z-index:0;
background:linear-gradient(180deg,rgba(21,17,13,.55) 0%,rgba(21,17,13,.18) 38%,rgba(21,17,13,.5) 72%,rgba(21,17,13,.92) 100%);
}
.hero-testo{position:relative;z-index:1;width:100%;padding:0 28px 64px;max-width:1280px;margin:0 auto}
/* La foto ha il bracciale e gli anelli proprio nella fascia dove cade l'etichetta (object-position
48%/50%, vedi sopra): oro su oro si leggeva male. Un velo scuro sagomato solo sul testo (non un
rettangolo largo che coprirebbe i gioielli accanto) risolve senza nascondere il bracciale. */
/* L'etichetta (TRUCCO E UNGHIE…) resta sola in questa riga dal decimo giro: il
logo che le stava accanto (46px/34px) si è spostato, grande e dorato, a
fianco del titolo — vedi .hero-titolo-blocco più sotto. */
.hero-marca{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-bottom:22px}
.hero-kicker{display:inline-block;font-family:var(--sans);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.78rem;color:var(--oro);margin-bottom:0;
background:rgba(15,12,9,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
padding:9px 16px;border-radius:var(--raggio);box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* DECIMO GIRO (07/10/2026): il logo oro, grande, accanto al titolo — riga
flessibile che su schermi stretti impila il logo sopra il titolo (wrap)
invece di stringere "Beauty World" su più righe. Il margine inferiore che
prima stava sul titolo è passato qui, che ora è il blocco intero. */
.hero-titolo-blocco{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(18px,3vw,40px);margin-bottom:26px}
.hero-titolo{margin:0;font-size:clamp(2.4rem,8.2vw,6.6rem);font-weight:800;line-height:.98;color:var(--avorio);text-shadow:0 6px 30px rgba(0,0,0,.35)}
.hero-titolo em{font-weight:500}
.hero-titolo-riga{display:block;overflow:hidden}
.hero-titolo-riga span{display:block;transform:translateY(112%);animation:rivela-riga .95s cubic-bezier(.16,.84,.44,1) forwards}
.hero-titolo-riga:nth-child(2) span{animation-delay:.14s}
@keyframes rivela-riga{to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hero-titolo-riga span{animation:none;transform:none}}
.hero-sottotitolo{font-size:1.1rem;color:var(--avorio-muted);max-width:46ch;font-weight:300;margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px}
/* ======================================================================
MARQUEE — fascia che scorre, servizi in corsivo grande
====================================================================== */
.marquee{background:var(--oro);color:var(--nero);overflow:hidden;white-space:nowrap;position:relative;border-top:1px solid var(--nero);border-bottom:1px solid var(--nero)}
.marquee-pista{display:inline-flex;animation:marquee-scorri 30s linear infinite}
@media (prefers-reduced-motion:reduce){
.marquee{overflow-x:auto}
.marquee-pista{animation:none}
.marquee-copia-2{display:none}
}
@keyframes marquee-scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-gruppo{display:inline-flex;align-items:center;flex-shrink:0;padding:22px 0}
.marquee-gruppo span{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.3rem,3.2vw,2.3rem);padding:0 .5em}
.marquee-gruppo .punto{font-style:normal;color:var(--vino);padding:0 .35em}
/* ======================================================================
SERVIZI — composizioni asimmetriche a tutta larghezza, non schede
====================================================================== */
#servizi{padding:0}
.servizi-intro{padding:88px 0 0}
.titolo-sezione{max-width:64ch;margin-bottom:0}
.titolo-sezione p{color:var(--muted);font-size:1.05rem}
.tema-scuro .titolo-sezione p{color:var(--avorio-muted)}
.servizio{position:relative;padding:56px 0 0}
.servizio-corpo{position:relative;display:grid;grid-template-columns:1fr;max-width:1280px;margin:0 auto;padding:0 28px}
.servizio-media{position:relative;z-index:1;overflow:hidden;background:var(--nero-2)}
.servizio-media picture{display:block;height:100%}
.servizio-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform .7s cubic-bezier(.16,.84,.44,1)}
.servizio:hover .servizio-media img{transform:scale(1.045)}
.servizio-testo{position:relative;z-index:2;background:var(--avorio);padding:40px 34px 44px;margin-top:-56px;box-shadow:0 24px 50px rgba(21,17,13,.16)}
.servizio-chip{
position:absolute;top:-30px;left:34px;z-index:3;
display:inline-flex;align-items:baseline;
background:var(--nero);color:var(--oro);
font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,6vw,3.6rem);line-height:1;
padding:8px 22px 14px;box-shadow:0 14px 30px rgba(21,17,13,.3);
}
.servizio-testo h3{margin-top:14px;color:var(--nero)}
.servizio-testo p{color:var(--muted);font-size:1.03rem;max-width:48ch;margin-bottom:0}
/* ≥860px: la card di testo riempie l'intera colonna che le spetta (colonna + lo sconfinamento di
-90px sulla foto), invece di fermarsi a un max-width stretto — era lì il fondo crema vuoto
segnalato da Francesco: una card di 460px, con la sua ombra visibile, dentro una colonna da
~540-680px dello stesso colore dello sfondo. Ora il blocco di testo è un flex verticale centrato
che usa tutta l'altezza della riga (come la foto), con tipografia più grande e un numero
gigante che scavalca la cucitura fra foto e testo. */
@media (min-width:860px){
.servizi-intro{padding:120px 0 0}
.servizio{padding:70px 0 0}
.servizio-corpo{grid-template-columns:1.2fr 1fr;align-items:stretch;min-height:640px}
.servizio-media{aspect-ratio:auto;height:100%;align-self:stretch}
.servizio-media picture{height:100%}
.servizio-testo{
align-self:stretch;display:flex;flex-direction:column;justify-content:center;
margin-top:0;margin-left:-96px;width:calc(100% + 96px);
padding:60px 64px;
}
.servizio-chip{top:-44px;left:-56px;font-size:clamp(3.2rem,6.8vw,5rem);padding:10px 26px 16px}
.servizio-testo h3{margin-top:22px;font-size:clamp(1.9rem,2.6vw,2.5rem)}
.servizio-testo p{font-size:1.12rem;max-width:40ch}
/* alternanza: servizi pari con foto a destra, testo che sborda a sinistra */
.servizio:nth-child(even) .servizio-corpo{grid-template-columns:1fr 1.2fr}
.servizio:nth-child(even) .servizio-media{order:2}
.servizio:nth-child(even) .servizio-testo{order:1;margin-left:0;margin-right:-96px;justify-self:end}
.servizio:nth-child(even) .servizio-chip{left:auto;right:-56px}
}
/* ======================================================================
DIVISORE — fascia fotografica a piena larghezza fra Servizi e Lavori,
un respiro prima della galleria, con una breve citazione in corsivo.
====================================================================== */
.divisore{position:relative;isolation:isolate;overflow:hidden;min-height:56vh;min-height:56svh;
display:flex;align-items:center;justify-content:center;color:var(--avorio);margin:64px 0 0}
.divisore picture{position:absolute;inset:0;display:block;z-index:0}
.divisore img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.divisore::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(21,17,13,.55),rgba(21,17,13,.3) 50%,rgba(21,17,13,.6))}
.divisore blockquote{position:relative;z-index:2;max-width:38ch;text-align:center;font-style:italic;font-weight:500;font-size:clamp(1.5rem,3.6vw,2.4rem);margin:0;padding:0 28px;text-shadow:0 4px 20px rgba(0,0,0,.4)}
/* ======================================================================
LAVORI — galleria su fondo scuro, scorrimento orizzontale, apertura a
schermo intero. Solo le sei foto vere di Victoria.
====================================================================== */
/* .lavori ha anche la classe tema-scuro (nell'HTML) per usare le varianti chiare di kicker e
testo del titolo-sezione, invariato già nel giro precedente — qui il paragrafo introduttivo
usava ancora il muted scuro: su fondo nero il contrasto scendeva a 3,1:1. */
.lavori{background:var(--nero);color:var(--avorio);padding:96px 0;position:relative;overflow:hidden}
.lavori .titolo-sezione{margin-bottom:40px}
.lavori-scroll{
display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;
padding:4px 0 18px;margin:0 -28px;padding-left:28px;padding-right:28px;
-webkit-overflow-scrolling:touch;
}
.lavori-scroll::-webkit-scrollbar{height:8px}
.lavori-scroll::-webkit-scrollbar-thumb{background:var(--bordo-scuro);border-radius:4px}
.lavoro-item{
flex:0 0 auto;width:240px;scroll-snap-align:start;
background:none;border:1px solid var(--bordo-scuro);padding:0;cursor:pointer;
position:relative;overflow:hidden;min-height:44px;
transition:transform .3s ease,border-color .3s ease;
}
.lavoro-item:nth-child(even){transform:translateY(22px)}
.lavoro-item:hover{transform:translateY(-6px) scale(1.02);border-color:var(--oro)}
.lavoro-item:nth-child(even):hover{transform:translateY(16px) scale(1.02)}
.lavoro-item picture{display:block}
.lavoro-item img{width:100%;height:320px;object-fit:cover;display:block}
/* il velo dietro l'etichetta è un ::before del bottone (non un gradiente sull'etichetta stessa):
stesso motivo dell'hero sopra — così lo strumento di misura lo riconosce come "velo sopra una
foto" invece di calcolarlo come testo su un colore piatto. */
.lavoro-item::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:0;
background:linear-gradient(180deg,transparent,rgba(21,17,13,.9));
}
.lavoro-item .lavoro-etichetta{
position:absolute;left:0;right:0;bottom:0;z-index:1;padding:10px 12px;
font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--avorio);text-align:left;
}
.lavoro-item .lavoro-apri{
position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
background:rgba(21,17,13,.65);display:flex;align-items:center;justify-content:center;
color:var(--oro);opacity:0;transition:opacity .25s ease;
}
.lavoro-item:hover .lavoro-apri,.lavoro-item:focus-visible .lavoro-apri{opacity:1}
.lavoro-apri svg{width:16px;height:16px}
/* lightbox: