/* components.css — le superfici di movement_studio.
Registro: studio di PRATICA del movimento. Riferimento primario BeAromatherapy (fondo scuro continuo
con aloni di colore, display serif leggero a corpo alto, bottoni a pillola, mosaico sfalsato,
cerchi-icona su fondo scuro), con l'apporto di BeMassage2 (tessere PIENE fra tessere chiare).
I due dispositivi propri del verticale:
1. L'ONDA come confine fra le bande. È il segno del marchio del primo cliente ed è forma pura, quindi
vive in un SVG inline nel CSS (mask), non in un file raster: scala a ogni larghezza senza perdere.
2. Il MOSAICO SFALSATO delle fotografie. È la risposta al vincolo che comanda questo mestiere: le
sorgenti fotografiche sono murate in risoluzione (il primo cliente: 800px), e un primo piano
gigante le tradirebbe. Il carattere lo portano le tessere PIENE di colore, non l'ingrandimento.
========================================================================= */
/* =========================================================================
BOTTONI — pillola piena. La categoria usa gli ESTREMI del raggio (0 oppure 25-40px): il raggio medio
è il segno più anonimo. Qui la curva è anche il segno del marchio.
⚠ Sul bottone MENTA il testo è --ink (9,29). Il bianco su menta fa 1,84: mai.
========================================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
padding: .9rem 1.7rem; border-radius: var(--radius-pill); border: 1px solid transparent;
font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); line-height: 1.1;
background: var(--menta); color: var(--ink);
transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--menta-soft); transform: translateY(-2px); }
.btn--sm { padding: .62rem 1.15rem; font-size: var(--text-sm); }
/* Fantasma su fondo SCURO: filetto e testo menta. */
.btn--ghost { background: transparent; color: var(--menta); border-color: rgba(147,204,160,.55); }
.btn--ghost:hover { background: rgba(147,204,160,.14); color: var(--menta-soft); border-color: var(--menta); transform: translateY(-2px); }
/* Fantasma su fondo CHIARO: il verde-inchiostro, perché la menta su crema non si legge. */
.btn--ghost-ink { background: transparent; color: var(--menta-ink); border-color: rgba(76,106,83,.45); }
.btn--ghost-ink:hover { background: rgba(76,106,83,.08); border-color: var(--menta-ink); transform: translateY(-2px); }
/* Pieno navy su fondo chiaro. */
.btn--navy { background: var(--navy); color: var(--on-dark); }
.btn--navy:hover { background: var(--indaco); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn--ghost:hover, .btn--ghost-ink:hover, .btn--navy:hover { transform: none; } }
/* =========================================================================
ONDA — il confine fra due bande. Riproduce in SVG la curva del marchio del primo cliente.
Si applica come pseudo-elemento in fondo alla banda che la porta; il colore lo dà `background`, così
la stessa forma serve ogni accostamento di superfici.
========================================================================= */
.wave { position: relative; }
.wave::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(38px, 4.2vw, 74px);
z-index: 2; pointer-events: none; background: var(--wave-color, var(--surface));
-webkit-mask: var(--wave-shape) no-repeat bottom center / 100% 100%;
mask: var(--wave-shape) no-repeat bottom center / 100% 100%;
}
:root {
--wave-shape: url('data:image/svg+xml;utf8, ad allinearsi a destra: sono DUE ANTENATI, e correggere il figlio non serve.
Misurato risalendo la catena: `ul.wp-block-navigation__container` porta un `margin-left: 305px`
(lo genera `justifyContent:"right"` del blocco, che serve al desktop) e sia la sia il
`__responsive-container-content` portano `align-items: flex-end` — che in un flex a COLONNA è
l'asse orizzontale. Finché restano, l' a larghezza piena resta comunque spinto a destra. */
.site-header .site-nav .is-menu-open .wp-block-navigation__container,
.site-header .site-nav .is-menu-open .wp-block-navigation__responsive-container-content {
margin-left: 0; margin-right: 0; width: 100%;
align-items: stretch; justify-content: flex-start;
}
.site-header .site-nav .is-menu-open .wp-block-navigation-item { align-items: stretch; }
/* L' è display:block e si stringe: senza width piena resterebbe largo quanto il proprio testo. */
.site-header .site-nav .is-menu-open .wp-block-navigation-item__content { width: 100%; text-align: left; padding: var(--space-4) var(--gutter); font-size: 1.16rem; }
/* I due pulsanti del menu sono 24px senza padding: sotto il minimo di tocco. */
.site-header .site-nav .wp-block-navigation__responsive-container-open,
.site-header .site-nav .wp-block-navigation__responsive-container-close { padding: 10px; }
.site-header__cta { display: none; }
}
/* =========================================================================
TESTATA DELLA PAGINA (hero) — due campi: il titolo su PANNELLO pieno accanto al mosaico fotografico.
⚠ È una scelta strutturale, non estetica: le sorgenti di questo mestiere sono murate a 800px e il
contrasto di un titolo sopra una fotografia dipenderebbe dal fotogramma. Sul pannello è garantito.
========================================================================= */
/* ⚠ L'altezza della testata si MISURA sulla resa, non si dichiara: a 1440x900 con il padding pieno la
testata usciva a 923px = 1,03 del viewport, cioè costringeva a scorrere per capire di che sito si tratta
(regola di gusto `hero.height_range`, atteso 0,55–0,92). Il padding è tarato su quella misura: a colonna
piena il mosaico porta 713px, e 109px di respiro totale li tengono dentro. */
.hero { position: relative; background: var(--navy); color: var(--on-dark); overflow: hidden; padding-block: clamp(2.2rem, 1.2rem + 2.4vw, 3.2rem) clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem); }
.hero::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(56% 46% at 8% 0%, var(--glow-menta), transparent 66%),
radial-gradient(60% 52% at 96% 96%, var(--glow-indaco), transparent 72%);
}
.hero > * { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(2rem, 1rem + 3.4vw, 4.4rem); align-items: center; }
.hero__panel { max-width: 34rem; }
.hero h1 { margin-block: var(--space-4) var(--space-5); }
.hero .lead { color: var(--on-dark-muted); }
.hero__checks { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-block: var(--space-6) var(--space-6); }
.hero__checks li { display: flex; align-items: center; gap: var(--space-2); font-size: .95rem; color: var(--on-dark-muted); }
.hero__checks li::before {
content: ""; width: 18px; height: 18px; flex: none; background: var(--menta);
-webkit-mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Mosaico della testata: due colonne sfalsate — la seconda scende di mezzo passo. È l'asse 4 della
categoria (mai griglia piatta) e regge foto di misura media senza chiedere loro un primo piano. */
.hero__mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.hero__shot { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--indaco); }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; }
.hero__shot:nth-child(1) { aspect-ratio: 1 / 1; }
.hero__shot:nth-child(2) { aspect-ratio: 1 / 1; margin-top: clamp(1.6rem, 4vw, 3.4rem); }
.hero__shot:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
/* Tessera PIENA fra le fotografie: il carattere senza chiedere nulla agli scatti (asse 5).
⚠ Niente `aspect-ratio` imposto: con un rapporto 3:4 e una sola voce la tessera restava per tre quarti
VUOTA. L'altezza la decide il contenuto, e il contenuto sono le tre voci che il cliente scrive. */
.hero__badge {
display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg);
background: var(--menta); color: var(--ink);
/* ⚠ La targa è la GEMELLA della fotografia accanto: stessa altezza, stessa quota. Con `align-self:
start` e l'altezza da contenuto restava più corta e più bassa, e le due tessere non si leggevano
come una coppia. Si stira sulla riga, che la foto 1:1 ha già dimensionato: nessun numero da tenere
allineato a mano fra le due. */
align-self: stretch; margin-top: 0;
}
.hero__badge > div + div { border-top: 1px solid rgba(20,26,51,.20); padding-top: var(--space-4); }
.hero__badge b { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; line-height: 1.1; }
.hero__badge span { display: block; margin-top: .15rem; font-size: .88rem; line-height: 1.35; }
@media (max-width: 900px) {
.hero__grid { grid-template-columns: 1fr; }
.hero__panel { max-width: none; }
.hero__shot:nth-child(2), .hero__badge { margin-top: 0; }
}
/* =========================================================================
INTESTAZIONE DI SEZIONE
========================================================================= */
.section-intro { max-width: 46rem; margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); }
/* ⚠ Regola 5: il testo prende la larghezza UTILE, non solo la colonna di sinistra. La misura di lettura
però resta sul PARAGRAFO, non sul contenitore: per questo l'intestazione si apre a due campi invece di
allargare la riga a 120 caratteri, che sarebbe illeggibile. */
.section-intro--split {
max-width: none; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: clamp(1.4rem, .8rem + 2.4vw, 3.4rem); align-items: start;
}
.section-intro--split .lead { max-width: 58ch; }
/* Il capoverso lungo scavalca le due colonne e parte da SINISTRA, sotto il titolo: è ciò che riempie
l'area che altrimenti resta vuota sotto l'intestazione. Va a capo da solo sulla larghezza piena. */
.section-intro--split .prosa-piena { grid-column: 1 / -1; margin-top: var(--space-5); max-width: none; }
.section-intro--split > div:first-child { min-width: 0; }
@media (max-width: 860px) { .section-intro--split { grid-template-columns: 1fr; align-items: start; } }
.section-intro h2 { margin-block: var(--space-4) var(--space-4); }
.section-intro--center { margin-inline: auto; text-align: center; }
.section-intro--center .eyebrow { justify-content: center; }
.section-intro--center .lead { margin-inline: auto; }
/* =========================================================================
TESSERE — la maglia comune di discipline, percorsi e prove. Fondo scuro o chiaro secondo la banda.
========================================================================= */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--space-5); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tiles--3, .tiles--4 { grid-template-columns: 1fr; } }
.tile {
display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-6); border-radius: var(--radius-lg);
border: var(--border-dark); background: rgba(255,255,255,.035);
transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.tile:hover { transform: translateY(-4px); background: rgba(147,204,160,.09); border-color: rgba(147,204,160,.42); }
.tile h3 { color: var(--on-dark); }
.tile p { color: var(--on-dark-muted); font-size: .97rem; }
/* Cerchio-icona: il dispositivo di BeMassage2 e BeAromatherapy. */
.tile__ico {
width: 58px; height: 58px; flex: none; display: grid; place-items: center;
border-radius: 50%; background: rgba(147,204,160,.14); border: 1px solid rgba(147,204,160,.34);
margin-bottom: var(--space-2);
}
.tile__ico span { width: 26px; height: 26px; display: block; background: var(--menta); }
/* Tessera PIENA: una sola per griglia, a rompere la ripetizione (asse 5). */
.tile--filled { background: var(--menta); border-color: var(--menta); }
.tile--filled h3, .tile--filled p { color: var(--ink); }
.tile--filled p { opacity: .84; }
.tile--filled .tile__ico { background: rgba(20,26,51,.10); border-color: rgba(20,26,51,.22); }
.tile--filled .tile__ico span { background: var(--ink); }
.tile--filled:hover { background: var(--menta-soft); border-color: var(--menta-soft); }
/* Sulle bande CHIARE la tessera ribalta i colori: ereditare quelli scuri darebbe testo invisibile. */
.section--tint .tile, .section--paper .tile { background: var(--paper); border: 1px solid var(--line); }
.section--tint .tile h3, .section--paper .tile h3 { color: var(--ink); }
.section--tint .tile p, .section--paper .tile p { color: var(--ink-muted); }
.section--tint .tile:hover, .section--paper .tile:hover { background: var(--tint); border-color: rgba(76,106,83,.34); }
.section--tint .tile__ico, .section--paper .tile__ico { background: var(--tint); border-color: rgba(76,106,83,.26); }
.section--tint .tile__ico span, .section--paper .tile__ico span { background: var(--menta-ink); }
.section--tint .tile--filled, .section--paper .tile--filled { background: var(--navy); border-color: var(--navy); }
.section--tint .tile--filled h3, .section--paper .tile--filled h3 { color: var(--on-dark); }
.section--tint .tile--filled p, .section--paper .tile--filled p { color: var(--on-dark-muted); opacity: 1; }
.section--tint .tile--filled .tile__ico, .section--paper .tile--filled .tile__ico { background: rgba(147,204,160,.16); border-color: rgba(147,204,160,.36); }
.section--tint .tile--filled .tile__ico span, .section--paper .tile--filled .tile__ico span { background: var(--menta); }
.section--tint .tile--filled:hover, .section--paper .tile--filled:hover { background: var(--indaco); border-color: var(--indaco); }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }
/* =========================================================================
IL METODO — due campi: la prosa e i tre principi, con numerali serif.
========================================================================= */
.metodo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 3.6vw, 4.6rem); align-items: start; }
@media (max-width: 900px) { .metodo { grid-template-columns: 1fr; } }
.metodo__checks { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.metodo__checks li { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.5; }
.metodo__checks li::before {
content: ""; width: 20px; height: 20px; flex: none; margin-top: .22rem; background: var(--menta-ink);
-webkit-mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
}
.principi { display: grid; gap: var(--space-5); }
.principio { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.principio:last-child { border-bottom: 0; padding-bottom: 0; }
.principio__n { font-family: var(--font-display); font-size: var(--text-num); line-height: .84; color: var(--menta-ink); font-weight: 400; }
.principio h3 { margin-bottom: var(--space-2); }
.principio p { color: var(--ink-muted); }
/* =========================================================================
MOSAICO DEI PERCORSI — il dispositivo del verticale. Tessere di misura MEDIA a quote sfalsate: è la
forma che regge fotografie murate in risoluzione. Su ogni tessera, il testo sta su un velo in fondo.
⚠ L'altezza di riga è dichiarata da --tile-row, e la usano SIA `grid-auto-rows` SIA la tessera che
scavalca: togliendole lo stiramento, senza altezza dichiarata prenderebbe quella della propria foto.
========================================================================= */
.mosaico { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: var(--tile-row); gap: var(--space-4); }
.mosaico__cell { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--indaco); }
.mosaico__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mosaico__cell:hover img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { .mosaico__cell:hover img { transform: none; } }
/* Campate: 3+3 sopra, 2+2+2 sotto — la maglia si chiude, niente celle vuote. */
.mosaico__cell:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.mosaico__cell:nth-child(2) { grid-column: span 3; grid-row: span 1; }
.mosaico__cell:nth-child(3) { grid-column: span 3; grid-row: span 1; }
.mosaico__cell:nth-child(4) { grid-column: span 2; grid-row: span 1; }
.mosaico__cell:nth-child(5) { grid-column: span 2; grid-row: span 1; }
.mosaico__cell:nth-child(6) { grid-column: span 2; grid-row: span 1; }
/* ⚠⚠ Il velo si tara sul fotogramma PEGGIORE, non su quello medio: con una fotografia chiara sotto,
il gradiente al 55% dava 1,74 sul titolo e 2,95 sull'occhiello MISURATI DAL PIXEL. Qui il velo parte
quasi pieno e resta alto per tutta l'altezza della didascalia; sotto, il contrasto non dipende più da
quale scatto capita in quella cella. */
.mosaico__cap {
position: absolute; inset: auto 0 0 0; padding: var(--space-6) var(--space-5) var(--space-5);
background: linear-gradient(to top, rgba(16,20,44,.96) 0%, rgba(16,20,44,.90) 55%, rgba(16,20,44,.62) 82%, transparent 100%);
color: var(--on-dark);
}
.mosaico__cap b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
.mosaico__cap span { display: block; margin-top: .25rem; font-size: .9rem; color: #E3E7F2; }
/* Tessera PIENA dentro il mosaico: regge la maglia quando le fotografie non bastano, e dà colore. */
/* Il contenuto sta al CENTRO, non in fondo: con la riga alta, allineato in basso lasciava
due terzi di tessera vuoti — lo stesso difetto della targa della testata. */
.mosaico__cell--filled { background: var(--menta); display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: var(--space-6) var(--space-5); }
.mosaico__cell--filled b { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); color: var(--ink); }
.mosaico__cell--filled span { font-size: .9rem; color: var(--ink); opacity: .82; }
@media (max-width: 900px) {
.mosaico { grid-template-columns: repeat(2, 1fr); }
.mosaico__cell:nth-child(n) { grid-column: span 2; grid-row: span 1; }
.mosaico__cell:nth-child(1) { grid-row: span 2; }
}
/* =========================================================================
LO STUDIO — il video, in una cornice che scavalca il confine della banda.
⚠ Il video è servito dal NOSTRO dominio (nessun embed terzo, nessun cookie) e non parte da solo:
`preload="none"` + `controls`, così non costa banda a chi non lo guarda.
========================================================================= */
.studio { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2rem, 1rem + 3.4vw, 4.2rem); align-items: center; }
@media (max-width: 900px) { .studio { grid-template-columns: 1fr; } }
.studio__checks { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.studio__checks li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--on-dark-muted); line-height: 1.5; }
.studio__checks li::before {
content: ""; width: 20px; height: 20px; flex: none; margin-top: .22rem; background: var(--menta);
-webkit-mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
}
.studio__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-deep); border: var(--border-dark); }
.studio__media video, .studio__media img { display: block; width: 100%; height: auto; }
/* =========================================================================
FASCIA D'INVITO — banda menta piena. Il testo sopra è --ink (9,29), mai bianco.
========================================================================= */
.cta-band { background: var(--menta); color: var(--ink); padding-block: clamp(3rem, 2rem + 3vw, 5rem); text-align: center; }
/* ⚠ Sulla banda menta l'occhiello NON è --menta-ink: misurato dal pixel fa 3,26. Ci va
l'inchiostro (9,29). È lo stesso token che porta il corpo su questo fondo. */
.cta-band .eyebrow { color: var(--ink); justify-content: center; }
.cta-band h2 { margin-block: var(--space-4) var(--space-4); }
.cta-band p { max-width: 54ch; margin-inline: auto; color: var(--ink); opacity: .84; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }
.cta-band .btn { background: var(--navy); color: var(--on-dark); }
.cta-band .btn:hover { background: var(--navy-deep); }
.cta-band .btn--ghost { background: transparent; color: var(--ink); border-color: rgba(20,26,51,.34); }
.cta-band .btn--ghost:hover { background: rgba(20,26,51,.08); border-color: var(--ink); }
/* =========================================================================
DOMANDE FREQUENTI — / nativi: la fisarmonica costruita con div perde lo stato per
l'assistiva e senza JS non si apre. Il segno di apertura è decorativo e non sostituisce la domanda.
========================================================================= */
/* Due colonne su schermo largo: a colonna singola la fisarmonica lasciava vuota metà banda. */
.faq { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.faq__item[open] { border-color: rgba(76,106,83,.38); }
.faq__q {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
padding: var(--space-5); cursor: pointer; list-style: none;
font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
content: ""; width: 22px; height: 22px; flex: none; background: var(--menta-ink);
-webkit-mask: url("../assets/img/icons/chevron.svg") no-repeat center / contain;
mask: url("../assets/img/icons/chevron.svg") no-repeat center / contain;
transition: transform .3s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }
.faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--ink-muted); max-width: 62ch; }
/* =========================================================================
RECAPITI — scheda navy a sinistra, modulo a destra (regola 19).
========================================================================= */
.contatti { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(1.6rem, 1rem + 2.6vw, 3rem); align-items: start; }
@media (max-width: 900px) { .contatti { grid-template-columns: 1fr; } }
.scheda { background: var(--navy-deep); color: var(--on-dark); border-radius: var(--radius-lg); padding: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); border: var(--border-dark); }
.scheda h3 { color: var(--on-dark); margin-bottom: var(--space-4); }
.scheda dl { display: grid; gap: var(--space-4); margin-block: var(--space-4); }
.scheda dt { font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--menta); margin-bottom: .3rem; }
.scheda dd { margin: 0; color: var(--on-dark); }
.scheda dd a:hover { color: var(--menta); }
.scheda .hours-rows { display: grid; gap: .35rem; }
.scheda .hours-rows li { display: flex; justify-content: space-between; gap: var(--space-4); font-size: .95rem; color: var(--on-dark-muted); }
.scheda .btn { width: 100%; margin-top: var(--space-4); }
.social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.social__link { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--on-dark); }
.social__link:hover { color: var(--menta); }
.social__ico { width: 20px; height: 20px; display: block; background: currentColor; }
/* Modulo. Su fondo chiaro: campi crema profonda, filetto sottile, bottone menta col testo inchiostro. */
.modulo { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); }
.modulo h3 { color: var(--ink); margin-bottom: var(--space-5); }
.contact-form { display: grid; gap: var(--space-4); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .contact-form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--text-sm); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.field input, .field textarea {
font: inherit; color: var(--ink); background: var(--surface-2);
border: 1px solid var(--line); border-radius: var(--radius); padding: .78rem .95rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--menta-ink); outline-offset: 2px; }
/* ⚠ `.consent` è un flex: un dentro il testo si stacca in un flex-item a sé. Il testo va tutto in uno span. */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: .92rem; color: var(--ink-muted); }
.consent input { margin-top: .28rem; width: 18px; height: 18px; flex: none; accent-color: var(--menta-ink); }
.consent a { color: var(--menta-ink); text-decoration: underline; }
.form-note { font-size: .86rem; color: var(--ink-muted); }
/* =========================================================================
PIÈ DI PAGINA
========================================================================= */
.site-footer { background: var(--navy-deep); color: var(--on-dark); padding-block: clamp(3rem, 2rem + 2.6vw, 4.6rem) var(--space-6); }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--menta); margin-bottom: var(--space-4); font-weight: 600; }
.site-footer li { color: var(--on-dark-muted); line-height: 1.75; }
.site-footer a:hover { color: var(--menta); }
.site-footer .hours-rows li { display: flex; justify-content: space-between; gap: var(--space-4); }
/* ⚠ Il wordmark è CONDIVISO fra testata e piè: sul fondo profondo il tag va ricontrollato. */
.site-footer .wordmark__tag { color: var(--menta); }
.site-footer__bottom { margin-top: clamp(2rem, 1.4rem + 1.6vw, 3rem); padding-top: var(--space-5); border-top: 1px solid rgba(147,204,160,.16); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; font-size: .86rem; color: var(--on-dark-muted); }
/* Nota dei marchi registrati: è testo di terzi riportato VERBATIM, e va reso leggibile, non nascosto. */
/* ⚠ La nota dei marchi sta su una banda CHIARA (i recapiti): con --on-dark-muted misurava 1,81 —
un avviso legale illeggibile. Su chiaro il secondario è --ink-muted (7,26). */
.trademark-note { font-size: .84rem; line-height: 1.6; color: var(--ink-muted); max-width: 68ch; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.powered { display: inline-flex; align-items: center; gap: .45rem; }
.powered img { width: 20px; height: 20px; }
/* =========================================================================
BARRA FISSA MOBILE + pulsante WhatsApp pulsante.
⚠ La guardia prefers-reduced-motion NON si toglie: la pulsazione è decorativa e per chi ha disattivato
le animazioni deve sparire, non rallentare.
========================================================================= */
.cta-bar { display: none; }
@media (max-width: 900px) {
.cta-bar {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
position: fixed; inset: auto 0 0 0; z-index: 60;
background: var(--navy); border-top: 1px solid rgba(147,204,160,.2);
padding: .55rem var(--space-3) calc(.55rem + env(safe-area-inset-bottom));
gap: var(--space-3);
}
.cta-bar .btn { width: 100%; padding-block: .78rem; }
body { padding-bottom: 4.6rem; }
}
.wa-fab {
position: fixed; right: clamp(1rem, 2vw, 1.8rem); bottom: clamp(1rem, 2vw, 1.8rem); z-index: 55;
width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
background: var(--menta); color: var(--ink); box-shadow: var(--shadow-2);
transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.wa-fab__ico { width: 28px; height: 28px; background: currentColor;
-webkit-mask: url("../assets/img/icons/social-whatsapp.svg") no-repeat center / contain;
mask: url("../assets/img/icons/social-whatsapp.svg") no-repeat center / contain; }
.wa-fab::before, .wa-fab::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
border: 2px solid var(--menta); pointer-events: none;
animation: fp-wa-pulse 2600ms var(--ease) infinite;
}
.wa-fab::after { animation-delay: 1300ms; }
.wa-fab:hover { background: var(--menta-soft); transform: translateY(-2px); }
@keyframes fp-wa-pulse {
from { transform: scale(1); opacity: .55; }
to { transform: scale(2.1); opacity: 0; }
}
@media (max-width: 900px) { .wa-fab { bottom: 5.2rem; width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) {
.wa-fab::before, .wa-fab::after { animation: none; opacity: 0; }
.wa-fab:hover { transform: none; }
}
/* =========================================================================
PAGINE INTERNE (privacy, 404)
========================================================================= */
.page-head { background: var(--navy); color: var(--on-dark); padding-block: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem); }
/* ⚠ La page-head NON riusa la size della hero: è una testata di pagina, non un hero (regola 6). */
.page-head h1 { font-size: var(--text-2xl); }
.prose { max-width: var(--container-narrow); color: var(--ink); }
.prose h2 { margin-block: var(--space-7) var(--space-4); }
.prose h3 { margin-block: var(--space-5) var(--space-3); }
.prose p, .prose li { margin-bottom: var(--space-3); color: var(--ink-muted); }
.prose ul { list-style: disc; padding-left: 1.2rem; }
.prose a { color: var(--menta-ink); text-decoration: underline; }
.notfound { text-align: center; padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
.notfound .btn { margin-top: var(--space-6); }
/* Icone delle discipline. ⚠ Legate al data-ico (il SIGNIFICATO della voce), mai all'indice: un'icona
agganciata alla posizione finisce sulla disciplina sbagliata appena l'elenco si riordina. */
.tile[data-ico="attrezzo"] .tile__ico span { -webkit-mask: url("../assets/img/icons/attrezzo.svg") no-repeat center / contain; mask: url("../assets/img/icons/attrezzo.svg") no-repeat center / contain; }
.tile[data-ico="corpo-libero"] .tile__ico span { -webkit-mask: url("../assets/img/icons/corpo-libero.svg") no-repeat center / contain; mask: url("../assets/img/icons/corpo-libero.svg") no-repeat center / contain; }
.tile[data-ico="yoga"] .tile__ico span { -webkit-mask: url("../assets/img/icons/yoga.svg") no-repeat center / contain; mask: url("../assets/img/icons/yoga.svg") no-repeat center / contain; }
.tile[data-ico="massaggio"] .tile__ico span { -webkit-mask: url("../assets/img/icons/massaggio.svg") no-repeat center / contain; mask: url("../assets/img/icons/massaggio.svg") no-repeat center / contain; }
/* Icone dei canali social nella scheda contatti e nel piè: stessa regola, il canale è il significato. */
.social__ico[data-social="whatsapp"] { -webkit-mask: url("../assets/img/icons/social-whatsapp.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-whatsapp.svg") no-repeat center / contain; }
.social__ico[data-social="facebook"] { -webkit-mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain; }
.social__ico[data-social="instagram"] { -webkit-mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain; }
/* Variante design-only di «dentro lo studio»: senza fotografie il posto non resta vuoto e non si riempie
di un'immagine finta — le prove diventano un quadro numerato, che è contenuto vero del cliente. */
.studio--design { align-items: start; }
.prove { display: grid; gap: var(--space-4); }
.prova { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: baseline;
padding: var(--space-5); border: var(--border-dark); border-radius: var(--radius-lg); background: rgba(255,255,255,.035); }
.prova__n { font-family: var(--font-display); font-size: var(--text-lg); color: var(--menta); line-height: 1; }
.prova > span:last-child { color: var(--on-dark-muted); line-height: 1.5; }
/* La tessera piena del mosaico è un COLLEGAMENTO: senza questo l' resterebbe inline e uscirebbe
dalla maglia. Il fondo menta porta l'inchiostro (9,29), mai il bianco. */
a.mosaico__cell--filled { display: flex; text-decoration: none; transition: background-color .3s var(--ease); }
a.mosaico__cell--filled:hover { background: var(--menta-soft); }