/* Pontini Marmi · landing professionisti
   Valori presi dal Design System "Pontini Marmi" (tema Avorio, stile Architectural Editorial).
   Questo file è la base riutilizzabile per il futuro sito aziendale. */

/* ───────── Caratteri (ospitati sul sito: nessuna richiesta a servizi esterni) ───────── */
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url(/font/cormorant-garamond-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url(/font/cormorant-garamond-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url(/font/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url(/font/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url(/font/inter-latin-500-normal.woff2) format("woff2"); }

/* ───────── Token del Design System ───────── */
:root {
  /* colori */
  --rosso-pontini: #b9552e;
  --surface-100: #f4f0e8;  /* fondo pagina */
  --surface-000: #ffffff;  /* schede */
  --surface-200: #eae4d8;  /* fasce arretrate */
  --ink: #292b2a;
  --ink-muted: #5c5850;
  --bronzo-testo: #7a644d;
  --accent: #9e4424;
  --accent-fill: var(--rosso-pontini);
  --on-accent: #ffffff;
  --hairline: #bcb5a7;
  --control-border: #8c755c;
  --focus-ring: #4a6684;

  /* caratteri */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* spazi */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;

  /* forme e griglia */
  --radius-sm: 2px;
  --layout-max-width: 1200px;
  --layout-measure: 680px;
  --margine: 20px;          /* margine laterale su smartphone */
}
@media (min-width: 768px) { :root { --margine: var(--space-12); } }

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface-100);
  color: var(--ink);
  font: 400 16px/26px var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, dl, dd { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, .pulsante:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
[id] { scroll-margin-top: var(--space-6); }

.contenitore { width: 100%; max-width: calc(var(--layout-max-width) + 2 * var(--margine)); margin-inline: auto; padding-inline: var(--margine); }

.salta { position: absolute; left: -9999px; top: 0; background: var(--surface-000); padding: var(--space-3) var(--space-4); z-index: 10; }
.salta:focus { left: var(--space-4); top: var(--space-4); }

/* ───────── Tipografia (stili del Design System) ───────── */
.display    { font: 400 42px/1.2 var(--serif); letter-spacing: -0.005em; }
.display-l  { font: 400 42px/1.2 var(--serif); letter-spacing: -0.005em; }
.display em { display: block; margin-top: 0.12em; }
.titolo-1   { font: 500 32px/1.2 var(--serif); }
.titolo-2   { font: 500 28px/1.25 var(--serif); }
.titolo-3   { font: 500 18px/26px var(--sans); }
.display em, .display-l em { font-style: italic; color: var(--accent); }
.testo-l    { font: 400 17px/27px var(--sans); color: var(--ink-muted); max-width: var(--layout-measure); }
.testo      { font: 400 16px/26px var(--sans); color: var(--ink-muted); max-width: var(--layout-measure); }
.testo-s    { font: 400 14px/22px var(--sans); color: var(--ink-muted); }
.occhiello  { font: 500 12px/16px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronzo-testo); }
.occhiello--tenue { color: var(--ink-muted); }
.didascalia { font: 400 13px/20px var(--sans); color: var(--ink-muted); }
.didascalia a { color: inherit; }

@media (min-width: 768px) {
  .display   { font-size: 64px; }
  .display-l { font-size: 56px; }
  .titolo-1  { font-size: 40px; }
  .titolo-2  { font-size: 34px; }
  .titolo-3  { font-size: 20px; line-height: 28px; }
  .testo-l   { font-size: 18px; line-height: 28px; }
}
@media (min-width: 1100px) { .display { font-size: 76px; } }

/* ───────── Testata ───────── */
.testata { border-bottom: 1px solid var(--hairline); }
.testata__riga { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
.testata__logo img { width: 132px; }
@media (min-width: 768px) { .testata__logo img { width: 168px; } .testata__riga { padding-block: var(--space-6); } }

/* ───────── Apertura ───────── */
.apertura { padding-block: var(--space-12) var(--space-16); }
.apertura .display { margin-top: var(--space-6); max-width: 15ch; }
.apertura__intro { margin-top: var(--space-8); }
.apertura__piede { margin-top: var(--space-8); }

.indice { margin-top: var(--space-12); max-width: var(--layout-measure); }
.indice ol { margin-top: var(--space-3); border-top: 1px solid var(--hairline); }
.indice li { border-bottom: 1px solid var(--hairline); }
.indice a {
  display: grid; grid-template-columns: 2.75rem 1fr auto; align-items: baseline;
  padding-block: var(--space-4); min-height: 56px;
  color: var(--ink); text-decoration: none;
}
.indice__n { font: 500 12px/1 var(--sans); letter-spacing: 0.14em; color: var(--bronzo-testo); }
.indice__t { font: 400 22px/1.2 var(--serif); }
.indice__f { color: var(--ink-muted); }
.indice a:hover .indice__t { color: var(--accent); }

@media (min-width: 960px) {
  .apertura { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--space-16); padding-block: var(--space-24); }
  .apertura > .occhiello, .apertura .display, .apertura__intro, .apertura__piede { grid-column: 1; }
  .indice { grid-column: 2; grid-row: 1 / span 4; align-self: end; margin-top: 0; }
}

/* ───────── Intestazione di sezione ───────── */
.sezione-testa { padding-top: var(--space-12); border-top: 1px solid var(--hairline); }
.sezione-testa .titolo-2 { margin-top: var(--space-2); max-width: 22ch; }
.sezione-testa .testo { margin-top: var(--space-4); }
.sezione-testa__nota { margin-top: var(--space-4); max-width: 46ch; }

/* ───────── Documenti ───────── */
.documenti { padding-bottom: var(--space-8); }
.documento { padding-block: var(--space-12); }
.documento + .documento { border-top: 1px solid var(--hairline); }

/* su smartphone la copertina va da bordo a bordo */
.documento__copertina { display: block; margin-inline: calc(-1 * var(--margine)); background: var(--surface-200); }
.documento__copertina img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.documento__testo { margin-top: var(--space-6); }
.documento__testo .titolo-1 { margin-top: var(--space-2); }
.documento__testo .testo { margin-top: var(--space-4); }
.documento__n { margin-right: var(--space-2); color: var(--accent); }
.documento__info { margin-top: var(--space-4); }
.documento__nota { margin-top: var(--space-4); }

@media (min-width: 768px) {
  .documento__copertina { margin-inline: 0; outline: 1px solid var(--hairline); }
}
@media (min-width: 960px) {
  .documento { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--space-12); align-items: center; padding-block: var(--space-16); }
  .documento__testo { margin-top: 0; }
  .documento:nth-of-type(even) .documento__copertina { order: 2; }
}

/* ───────── Pulsanti ───────── */
.azioni { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.azioni--colonna { flex-direction: column; }
.azioni__riga { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pulsante {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font: 500 15px/1.2 var(--sans); letter-spacing: 0.01em; text-align: center; text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.pulsante--primario { background: var(--accent-fill); color: var(--on-accent); border: 1px solid var(--accent-fill); }
.pulsante--primario:hover { background: var(--accent); border-color: var(--accent); }
.pulsante--secondario { background: transparent; color: var(--ink); border: 1px solid var(--control-border); }
.pulsante--secondario:hover { background: var(--surface-000); }
@media (max-width: 479px) {
  .documento .azioni { flex-direction: column; }
}

/* ───────── Metodo ───────── */
.metodo { padding-bottom: var(--space-16); }
.passi { margin-top: var(--space-8); display: grid; gap: var(--space-6); }
.passi li { border-top: 1px solid var(--hairline); padding-top: var(--space-4); }
.passi__n { display: block; font: 400 28px/1 var(--serif); color: var(--accent); margin-bottom: var(--space-3); }
.passi .testo-s { margin-top: var(--space-1); }
@media (min-width: 768px) { .passi { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }

/* ───────── Contatti ───────── */
.contatti { background: var(--surface-200); padding-block: var(--space-16); }
.contatti__apertura .display-l { margin-top: var(--space-3); }
.contatti__apertura .testo-l { margin-top: var(--space-4); }
.contatti__scheda { margin-top: var(--space-8); background: var(--surface-000); padding: var(--space-6); }
.referente > div { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-bottom: 1px solid var(--hairline); }
.referente > div:first-child { padding-top: 0; }
.referente dd { font-size: 16px; overflow-wrap: anywhere; }
.referente dd a { color: var(--ink); }
.contatti .azioni { margin-top: var(--space-6); }
@media (min-width: 960px) {
  .contatti { padding-block: var(--space-24); }
  .contatti__griglia { display: grid; grid-template-columns: 6fr 5fr; column-gap: var(--space-16); align-items: start; }
  .contatti__scheda { margin-top: 0; padding: var(--space-8); }
}

/* ───────── Pagine di testo (privacy) ───────── */
.testata__etichetta { text-decoration: none; }
.testo-legale { padding-block: var(--space-12) var(--space-16); max-width: calc(var(--layout-measure) + 2 * var(--margine)); margin-inline: 0; }
@media (min-width: 768px) { .testo-legale { margin-inline: auto; } }
.testo-legale .titolo-1 { margin-top: var(--space-2); }
.testo-legale .didascalia { margin-top: var(--space-2); }
.testo-legale .titolo-3 { margin-top: var(--space-8); color: var(--ink); }
.testo-legale .testo { margin-top: var(--space-3); }

/* ───────── Piede ───────── */
.piede { padding-block: var(--space-12) calc(var(--space-12) + env(safe-area-inset-bottom)); }
.piede__riga { display: grid; gap: var(--space-3); }
.piede__marchio { font: 500 20px/1 var(--serif); }
@media (min-width: 960px) { .piede__riga { grid-template-columns: 1fr auto auto; align-items: end; column-gap: var(--space-12); } }