/* Fraunces, SIL Open Font License 1.1: ridotto ai glifi italiani e ospitato qui, senza chiamate a Google Fonts. */
@font-face { font-family: Fraunces; font-weight: 600; font-style: normal; font-display: swap; src: url(/assets/fraunces-600.woff2) format("woff2"); }
@font-face { font-family: Fraunces; font-weight: 500; font-style: italic; font-display: swap; src: url(/assets/fraunces-500i.woff2) format("woff2"); }

:root {
  --inchiostro: #2a1a17;
  --tenue: #6a5a52;
  --crema: #fbf6ec;
  --sabbia: #f4eadb;
  --linea: #e8dcc8;
  --bordeaux: #84101a;
  --bordeaux-scuro: #65090f;
  --notte: #3a0a0e;
  --oro: #f2c64d;
  --oro-scuro: #d9a92b;
  --panna: #f6ead9;
  --verde: #128c4a;
  --verde-scuro: #0d7a3f;
  --titoli: Fraunces, Georgia, "Times New Roman", serif;
  --testo: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --barra: 58px;
  --raggio: 14px;
  --scanalature: repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 15px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--inchiostro);
  font: 17px/1.55 var(--testo);
  padding-bottom: calc(var(--barra) + 20px + env(safe-area-inset-bottom));
  font-synthesis: none;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--bordeaux); }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--titoli); font-weight: 600; line-height: 1.14; margin: 0; }
h1 { font-size: clamp(2.2rem, 9.6vw, 3.7rem); letter-spacing: -.012em; }
h2 { font-size: clamp(1.7rem, 6.8vw, 2.5rem); letter-spacing: -.008em; margin-bottom: 22px; }
h3 { font-size: 1.16rem; line-height: 1.25; }
p { margin: 0 0 12px; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

.largo { width: min(1120px, 100%); margin-inline: auto; padding-inline: 20px; }
.stretto { width: min(760px, 100%); margin-inline: auto; padding-inline: 20px; }

.ico { width: 21px; height: 21px; fill: currentColor; flex: none; }
.ico-tratto { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Testata */
.testata { position: relative; z-index: 4; background: var(--notte); }
.testata-riga { display: flex; align-items: center; justify-content: space-between; min-height: 66px; }
.marchio { display: inline-flex; align-items: center; min-height: 44px; }
.marchio img { width: 172px; height: auto; }
.testata-orari { padding: 4px 10px; border-radius: 99px; font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap; background: rgba(255, 255, 255, .1); }

/* Apertura: il testo non sta mai sopra la foto */
.eroe { position: relative; overflow: hidden; background: var(--notte); color: #fff; padding: 0 0 76px; --colonna-foto: 46vw; }
.eroe::after { content: ""; position: absolute; inset: 0; background: var(--scanalature); pointer-events: none; }
.eroe-foto { display: block; width: 100%; height: 236px; object-fit: cover; object-position: 50% 12%; }
.eroe-velo { display: none; }
.eroe-corpo { position: relative; z-index: 2; padding-top: 22px; }
.occhiello {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 5px 12px 5px 9px; border-radius: 99px;
  background: rgba(242, 198, 77, .16); color: var(--oro); font-size: .86rem; font-weight: 600; line-height: 1.25;
}
.occhiello .ico-tratto { width: 18px; height: 18px; }
.eroe h1 em { font-style: italic; font-weight: 500; color: var(--oro); }
.intro { font-size: 1.09rem; line-height: 1.5; color: var(--panna); margin: 14px 0 22px; max-width: 34em; }

/* Azioni */
.azioni { display: grid; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 22px; border: 0; border-radius: 12px;
  font: 700 1.05rem/1.2 var(--testo); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-chiama { background: var(--oro); color: #2b1408; box-shadow: 0 10px 24px -10px rgba(242, 198, 77, .75); }
.btn-chiama:hover { background: #f7d166; }
.btn-wa { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.btn-wa:hover { background: rgba(255, 255, 255, .1); }
.btn-invia { width: 100%; background: var(--bordeaux); color: #fff; }
.btn-invia:hover { background: var(--bordeaux-scuro); }

/* A studio chiuso WhatsApp passa davanti */
.studio-chiuso .azioni .btn-wa { order: -1; background: var(--verde); box-shadow: 0 10px 24px -10px rgba(18, 140, 74, .8); }
.studio-chiuso .azioni .btn-chiama { background: transparent; color: var(--oro); box-shadow: inset 0 0 0 1.5px var(--oro); }

.stato { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 0 4px; font-size: .95rem; font-weight: 600; color: var(--panna); }
.stato::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--panna); flex: none; transform: translateY(-1px); }
.studio-aperto .stato::before { background: #39d17f; box-shadow: 0 0 0 4px rgba(57, 209, 127, .22); }
.studio-chiuso .stato::before { background: var(--oro); box-shadow: 0 0 0 4px rgba(242, 198, 77, .2); }

/* Cifre in evidenza, a cavallo dell'apertura */
.fascia-cifre { background: var(--crema); }
.cifre {
  position: relative; z-index: 3; margin-top: -46px; padding: 4px 20px; background: #fff; border-radius: var(--raggio);
  box-shadow: 0 22px 44px -22px rgba(58, 10, 14, .45), 0 0 0 1px rgba(58, 10, 14, .05);
}
.cifra { display: grid; grid-template-columns: minmax(112px, 38%) 1fr; gap: 14px; align-items: center; padding: 15px 0; }
.cifra + .cifra { border-top: 1px solid var(--linea); }
.cifra strong { font: 600 1.5rem/1.1 var(--titoli); color: var(--bordeaux); letter-spacing: -.01em; }
.cifra span { font-size: .93rem; line-height: 1.35; color: var(--tenue); }

/* Sezioni */
.sezione { padding: 46px 0; }
.sezione-crema { background: var(--crema); }
.sezione-sabbia { background: var(--sabbia); }
.scura {
  position: relative; color: #fff; background-color: var(--notte);
  background-image: var(--scanalature), radial-gradient(120% 90% at 85% 0, #641016 0, var(--notte) 62%);
}
.scura h2 { color: #fff; }

/* Situazioni */
.situazioni { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.situazioni li {
  display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; background: #fff; border-radius: 12px;
  box-shadow: 0 1px 0 rgba(58, 10, 14, .07), 0 8px 18px -14px rgba(58, 10, 14, .3); line-height: 1.4;
}
.spunta { width: 26px; height: 26px; padding: 5px; flex: none; border-radius: 50%; background: var(--bordeaux); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.spunta-oro { width: 24px; height: 24px; background: var(--oro); stroke: #3a1a0c; }

/* Aree */
.griglia-aree { display: grid; gap: 12px; }
.area { padding: 18px 20px; background: var(--crema); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linea); }
.area h3 { color: var(--bordeaux); margin-bottom: 6px; }
.area p { margin: 0; color: var(--tenue); font-size: .98rem; line-height: 1.45; }

/* Da sapere */
.sapere { display: grid; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; counter-reset: n; }
.sapere li {
  counter-increment: n; position: relative; padding: 18px 18px 18px 62px; border-radius: 12px;
  background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(242, 198, 77, .22);
}
.sapere li::before { content: counter(n); position: absolute; left: 20px; top: 12px; font: 600 2.2rem/1.1 var(--titoli); color: var(--oro); }
.sapere h3 { margin-bottom: 5px; color: #fff; }
.sapere p { margin: 0; color: var(--panna); font-size: .98rem; line-height: 1.47; }

/* Come funziona */
.foto-studio { margin-bottom: 28px; border-radius: var(--raggio); overflow: hidden; aspect-ratio: 16 / 8; background: var(--sabbia); }
.foto-riempi { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; filter: brightness(1.1) saturate(1.05); }
.passi { margin: 0; padding: 0; list-style: none; counter-reset: p; }
.passi li { counter-increment: p; position: relative; padding: 0 0 26px 58px; }
.passi li::before {
  content: counter(p); position: absolute; left: 0; top: -2px; width: 40px; height: 40px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; background: var(--bordeaux); color: var(--oro); font: 600 1.15rem/1 var(--titoli);
}
.passi li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 38px; bottom: 0; width: 2px; background: linear-gradient(var(--oro-scuro), var(--linea)); }
.passi h3 { margin: 6px 0 4px; }
.passi p { margin: 0; color: var(--tenue); }
.nota { margin: 4px 0 0; padding: 16px 18px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linea); font-size: .97rem; line-height: 1.5; }

/* Chi ti assiste */
.avvocato { display: grid; gap: 34px; }
.avvocato-foto { position: relative; margin: 0 14px 14px 0; }
.avvocato-foto::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: var(--raggio); box-shadow: inset 0 0 0 2px var(--oro); }
.avvocato-foto img { position: relative; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; border-radius: var(--raggio); }
.motto { margin: 0 0 18px; }
.motto p { margin: 0 0 4px; font: italic 500 1.35rem/1.3 var(--titoli); color: var(--bordeaux); }
.motto cite { font-style: normal; font-size: .88rem; color: var(--tenue); }
.fatti { margin: 0; padding: 0; list-style: none; }
.fatti li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); line-height: 1.42; }

/* Domande */
details { background: #fff; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 1px 0 rgba(58, 10, 14, .07); }
summary { position: relative; padding: 16px 52px 16px 18px; font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: 14px; top: 13px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sabbia); color: var(--bordeaux); font: 400 1.25rem/1 var(--testo);
}
details[open] summary::after { content: "–"; background: var(--bordeaux); color: #fff; }
details p { padding: 0 18px 16px; margin: 0; color: var(--tenue); }

/* Argomenti */
.elenco-hub { display: grid; gap: 10px; }
.voce-hub {
  display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; row-gap: 2px; padding: 15px 16px;
  background: #fff; border-radius: 12px; color: inherit; text-decoration: none;
  box-shadow: 0 1px 0 rgba(58, 10, 14, .07), 0 8px 18px -14px rgba(58, 10, 14, .3); transition: transform .15s ease;
}
.voce-hub:hover { transform: translateY(-2px); }
.voce-icona { grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--bordeaux); color: var(--oro); }
.voce-hub strong { font: 600 1.14rem/1.25 var(--titoli); color: var(--bordeaux); }
.voce-testo { font-size: .93rem; line-height: 1.4; color: var(--tenue); }

/* Modulo */
.griglia-modulo { display: grid; gap: 20px; }
.modulo-testo p { color: var(--panna); }
.scheda-modulo { padding: 22px 20px; background: #fff; color: var(--inchiostro); border-radius: var(--raggio); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .6); }
.modulo { display: grid; gap: 14px; }
.modulo label { display: grid; gap: 5px; font-weight: 600; font-size: .95rem; }
.richiesto { font-weight: 400; color: var(--tenue); font-size: .85rem; }
.modulo input[type=text], .modulo input[type=tel], .modulo select, .modulo textarea {
  width: 100%; min-height: 50px; padding: 11px 13px; border: 1px solid #cdbfab; border-radius: 10px;
  background: var(--crema); color: inherit; font: 400 1rem/1.4 var(--testo);
}
.modulo select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a1218' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: 2px solid var(--bordeaux); outline-offset: 0; border-color: transparent; background: #fff; }
.modulo textarea { resize: vertical; }
.nota-campo { margin: -8px 0 0; font-size: .86rem; color: var(--tenue); }
.modulo .spunta-privacy { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; }
.spunta-privacy input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--bordeaux); }
.esca { position: absolute; left: -9999px; height: 1px; overflow: hidden; }
.errore { padding: 12px 14px; margin-bottom: 14px; background: #fbeaea; border-radius: 10px; color: var(--bordeaux-scuro); font-weight: 600; }

/* Dove */
.dove { position: relative; overflow: hidden; background: var(--notte); color: #fff; }
.dove-foto { display: block; width: 100%; height: 200px; object-fit: cover; object-position: 50% 40%; }
.dove-corpo { position: relative; z-index: 2; padding-block: 28px 32px; }
.dove h2 { color: #fff; margin-bottom: 14px; }
.dove-nota { margin: 0 0 16px; color: rgba(255, 255, 255, .86); line-height: 1.45; }
.sedi { display: grid; gap: 10px; }
.sede {
  display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 12px; color: #fff; text-decoration: none; line-height: 1.3;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.sede .ico-tratto { color: var(--oro); }
.sede small { display: block; font-size: .78rem; color: var(--oro); font-weight: 600; }

/* Altri argomenti */
.correlate { padding: 34px 0 40px; background: var(--crema); }
.correlate h2 { font-size: 1.3rem; margin-bottom: 14px; }
.correlate-voci { display: flex; flex-wrap: wrap; gap: 8px; }
.correlate-voci a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px 9px 11px; border-radius: 99px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--linea); font-size: .94rem; font-weight: 600; text-decoration: none; line-height: 1.25;
}
.correlate-voci .ico-tratto { width: 19px; height: 19px; }

/* Piede */
.piede { background: #1e0d0b; color: #c9bcae; padding: 32px 0 26px; font-size: .9rem; }
.piede-logo { width: 164px; height: auto; margin-bottom: 16px; }
.piede a { color: #fff; }
.piede .avviso { color: #98897c; }

/* Barra fissa su mobile */
.barra {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 16px;
  background: rgba(30, 5, 7, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55);
}
.barra a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px;
  font-weight: 700; font-size: 1.03rem; text-decoration: none;
}
.barra-chiama { background: var(--oro); color: #2b1408; }
.barra-wa { background: var(--verde); color: #fff; }
.studio-chiuso .barra-wa { order: -1; }

/* Conferma */
.eroe.eroe-grazie { padding: 36px 0 56px; min-height: 76vh; }
.eroe-grazie .eroe-corpo { padding-top: 0; }
.eroe-grazie::after { display: none; }
.eroe-grazie p { color: var(--panna); }
.eroe-grazie .grazie-segno { width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: #3a1a0c; }
.grazie-segno .ico-tratto { width: 32px; height: 32px; stroke-width: 2.4; }
.eroe-grazie .azioni { margin: 20px 0; }
.torna a { color: var(--oro); }

@media (min-width: 600px) {
  .situazioni, .griglia-aree, .sedi { grid-template-columns: 1fr 1fr; }
  .azioni { display: flex; flex-wrap: wrap; }
  .dove-foto { height: 280px; }
}

/* Da tablet e con il telefono in orizzontale: testo a sinistra, foto a destra, senza sovrapporli */
@media (min-width: 640px), (orientation: landscape) and (min-width: 480px) {
  .eroe { padding: 32px 0 84px; }
  .eroe-foto, .eroe-velo { position: absolute; top: 0; right: 0; width: var(--colonna-foto); height: calc(100% - 60px); }
  .eroe-foto { object-position: 42% 20%; }
  .eroe-velo { display: block; z-index: 1; background: linear-gradient(90deg, var(--notte) 0, rgba(58, 10, 14, 0) 22%), linear-gradient(0deg, var(--notte) 0, rgba(58, 10, 14, 0) 22%); }
  .eroe-corpo { padding-top: 0; }
  .eroe h1 { font-size: clamp(1.9rem, 5.2vw, 2.9rem); }
  .eroe-corpo > * { max-width: min(620px, calc(100vw - var(--colonna-foto) - max(20px, (100vw - 1120px) / 2 + 20px) - 28px)); }
  .dove { --colonna-foto: 46vw; }
  .dove-foto { position: absolute; top: 0; right: 0; width: var(--colonna-foto); height: 100%; }
  .dove-corpo > * { max-width: min(620px, calc(100vw - var(--colonna-foto) - max(20px, (100vw - 1120px) / 2 + 20px) - 28px)); }
  .dove .sedi { grid-template-columns: 1fr; }
  .avvocato { grid-template-columns: minmax(200px, 34%) 1fr; gap: 36px; align-items: center; }
  .foto-studio { aspect-ratio: 16 / 5; }
}

/* Telefono in orizzontale: poca altezza, tutto più compatto */
@media (orientation: landscape) and (max-height: 500px) {
  .testata-riga { min-height: 52px; }
  .eroe { padding: 16px 0 72px; }
  .eroe h1 { font-size: 1.9rem; }
  .occhiello { margin-bottom: 8px; }
  .intro { font-size: 1rem; margin: 8px 0 12px; }
  .azioni { gap: 8px; }
  .azioni .btn { min-height: 46px; padding: 8px 14px; font-size: .95rem; }
  .stato { margin-top: 10px; }
  .eroe-foto, .eroe-velo { height: calc(100% - 44px); }
  .barra { bottom: calc(6px + env(safe-area-inset-bottom)); padding: 3px; }
  .barra a { min-height: 44px; font-size: .95rem; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; font-size: 18px; }
  .barra { display: none; }
  .marchio img { width: 196px; }
  .testata-riga { min-height: 84px; }
  .eroe { padding: 56px 0 128px; }
  .eroe-foto, .eroe-velo { height: calc(100% - 96px); }
  .eroe h1 { font-size: 3.6rem; }
  .cifre { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: -72px; padding: 8px; }
  .cifra { display: block; padding: 18px 24px; }
  .cifra + .cifra { border-top: 0; border-left: 1px solid var(--linea); }
  .cifra strong { display: block; font-size: 2.05rem; margin-bottom: 6px; }
  .sezione { padding: 72px 0; }
  .griglia-aree { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sapere { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
  .foto-studio { aspect-ratio: 16 / 5; }
  .passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 26px; }
  .passi li { padding: 56px 0 0; }
  .passi li:not(:last-child)::after { left: 40px; right: -30px; top: 19px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--oro-scuro), var(--linea)); }
  .avvocato { grid-template-columns: 400px 1fr; gap: 64px; align-items: center; }
  .avvocato-foto img { aspect-ratio: 4 / 5; }
  .elenco-hub { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .griglia-modulo { grid-template-columns: 1fr 480px; gap: 64px; align-items: start; }
  .dove-corpo { padding-block: 64px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .voce-hub { transition: none; }
}