/* giuseppedefeo.it — variante B "Cielo e terracotta" (scelta di Beppe, 26/10/2026) */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/font/figtree-latin.woff2) format('woff2'); }

:root {
  --fondo: #FBF7F2;
  --fondo-2: #F4EDE3;
  --cielo: #DCEBFA;
  --cielo-scuro: #BFD8F2;
  --blu: #174A7C;
  --terra: #B4532A;
  --terra-scura: #93411F;
  --pesca: #FDE7D3;
  --pesca-testo: #8A3412;
  --testo: #1F2937;
  --testo-2: #4B5563;
  --linea: #E6DCCF;
  --bianco: #FFFFFF;
  --ok: #1F6B45;
  --errore: #A3261B;
  --r: 14px;
  --r-grande: 24px;
  --ombra: 0 1px 2px rgba(31, 41, 55, .06), 0 8px 24px -12px rgba(31, 41, 55, .18);
  --larghezza: 72rem;
  --gutter: clamp(16px, 4vw, 40px);
  --sezione: clamp(64px, 9vw, 120px);
  font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--testo);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
  accent-color: var(--terra);
  scroll-padding-top: 88px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-size: 1.125rem; line-height: 1.6; text-rendering: optimizeLegibility; padding-bottom: 76px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blu); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--pesca); color: var(--testo); }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.3rem, 6vw, 4.1rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
.salta { position: absolute; left: -999px; top: 8px; background: var(--testo); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 99; }
.salta:focus { left: 8px; }
.contenitore { width: min(100% - 2 * var(--gutter), var(--larghezza)); margin-inline: auto; }
.sezione { padding-block: var(--sezione); }
.intro { max-width: 40rem; display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.intro p { color: var(--testo-2); font-size: 1.15rem; }

/* ---------- Pulsanti ---------- */
.pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-radius: 12px;
  background: var(--terra); color: #fff; font-family: inherit; font-weight: 700; font-size: 1.05rem; line-height: 1.2; text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 1px 1px rgba(147, 65, 31, .3), 0 8px 18px -10px rgba(147, 65, 31, .6); transition: background .2s, transform .2s cubic-bezier(.16, 1, .3, 1); }
.pulsante:hover { background: var(--terra-scura); transform: translateY(-1px); }
.pulsante:active { transform: translateY(0); }
.pulsante[aria-disabled="true"], .pulsante:disabled { background: #C9B8A8; box-shadow: none; cursor: not-allowed; transform: none; }
.pulsante.secondario { background: var(--bianco); color: var(--testo); box-shadow: inset 0 0 0 2px var(--testo); }
.pulsante.secondario:hover { background: var(--cielo); }
.pulsante svg { width: 20px; height: 20px; flex: none; }
.collegamento { font-weight: 700; color: var(--testo); }

/* ---------- Testata ---------- */
.testata { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.testata.scrollata { border-bottom-color: var(--linea); }
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.marchio { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--testo); text-decoration: none; font-size: 1.05rem; }
.gdf { width: 64px; height: 64px; display: block; flex: none; }
.menu { display: none; gap: 28px; }
.menu a { color: var(--testo); text-decoration: none; font-weight: 600; font-size: 1rem; }
.menu a:hover { color: var(--terra); }
.testata .pulsante { display: none; min-height: 44px; padding: 10px 18px; font-size: .98rem; }
@media (min-width: 900px) { .menu { display: flex; } .testata .pulsante { display: inline-flex; } }

/* Barra fissa sul telefono: il pulsante principale sempre a portata di pollice */
.barra-telefono { position: fixed; inset: auto 0 0 0; z-index: 30; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--bianco); border-top: 1px solid var(--linea); box-shadow: 0 -8px 24px -16px rgba(31, 41, 55, .35); }
.barra-telefono .pulsante { width: 100%; }
@media (min-width: 900px) { .barra-telefono { display: none; } }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(24px, 5vw, 72px) var(--sezione); }
.hero .contenitore { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .hero .contenitore { grid-template-columns: 1.15fr .85fr; } }
.hero-testo { display: grid; gap: 22px; }
.hero h1 em { font-style: normal; color: var(--terra); }
.hero .sotto { font-size: clamp(1.15rem, 1.8vw, 1.3rem); color: var(--testo-2); max-width: 34em; }
.azioni { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.foto { position: relative; margin: 0; }
.foto img, .foto .segnaposto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-grande); background: var(--cielo); }
.foto .segnaposto { display: grid; place-items: center; color: var(--blu); font-weight: 800; font-size: 4rem; }
@media (max-width: 899px) { .foto img, .foto .segnaposto { aspect-ratio: 4 / 3; object-position: 50% 16%; } }
.passi { position: absolute; left: -18px; bottom: 22px; right: 18px; background: var(--bianco); border-radius: var(--r); box-shadow: var(--ombra); padding: 14px 16px; display: grid; gap: 6px; font-size: .95rem; }
@media (max-width: 899px) { .passi { position: relative; z-index: 1; left: auto; right: auto; bottom: auto; margin-top: -36px; margin-inline: 14px; } }
.passi ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: passo; }
.passi li { display: flex; gap: 10px; align-items: baseline; counter-increment: passo; }
.passi li::before { content: counter(passo); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--pesca); color: var(--pesca-testo); font-weight: 800; font-size: .85rem; display: grid; place-items: center; transform: translateY(2px); }
.passi strong { font-size: 1rem; }

/* ---------- Credenziali ---------- */
.credenziali { background: var(--cielo); }
.credenziali .contenitore { display: grid; gap: 28px; padding-block: clamp(40px, 6vw, 64px); }
@media (min-width: 900px) { .credenziali .contenitore { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.credenziali .frase { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.3; color: var(--blu); }
.enti { display: grid; gap: 10px; }
.enti p { color: var(--testo); font-size: 1rem; }
.enti ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.enti li { background: var(--bianco); padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .98rem; }

/* ---------- Storia ---------- */
.storia .contenitore { display: grid; gap: 14px; max-width: 46rem; }
.storia p { font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.45; }
.storia .firma { color: var(--testo-2); font-size: 1rem; }

/* ---------- Quiz ---------- */
.quiz-blocco { background: var(--testo); color: #F8F4EE; }
.quiz-blocco .intro p { color: #D7D0C6; }
.quiz { background: #2A3646; border-radius: var(--r-grande); padding: clamp(20px, 4vw, 40px); max-width: 46rem; }
.quiz fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; }
.quiz legend { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 700; margin-bottom: 18px; padding: 0; }
.quiz .avanzamento { font-size: .95rem; color: #D7D0C6; margin-bottom: 10px; }
.scelte { display: grid; gap: 10px; }
@media (min-width: 640px) { .scelte { grid-template-columns: 1fr 1fr; } }
.scelta { position: relative; }
.scelta input { position: absolute; opacity: 0; inset: 0; }
.scelta label { display: block; height: 100%; padding: 16px 18px; border-radius: 12px; background: #354357; cursor: pointer; font-weight: 600; transition: background .2s, box-shadow .2s; }
.scelta label:hover { background: #3F4E64; }
.scelta input:checked + label { background: var(--pesca); color: var(--testo); box-shadow: inset 0 0 0 2px var(--terra); }
.scelta input:focus-visible + label { outline: 3px solid var(--pesca); outline-offset: 3px; }
.quiz .comandi { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.quiz .pulsante.secondario { background: transparent; color: #F8F4EE; box-shadow: inset 0 0 0 2px #6B7A90; }
.quiz .pulsante.secondario:hover { background: #354357; }
.passo-quiz[hidden], .risultato[hidden] { display: none; }
.passo-quiz.entra, .risultato.entra { animation: entra .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.risultato { display: grid; gap: 16px; }
.risultato h3 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--pesca); }
.risultato p { color: #E9E3DA; }

/* ---------- Servizi ---------- */
.formazione { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.formazione details { border-bottom: 1px solid var(--linea); }
.formazione summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-size: 1.2rem; font-weight: 700; }
.formazione summary::-webkit-details-marker { display: none; }
.formazione summary::after { content: ""; width: 12px; height: 12px; border-right: 2.5px solid var(--terra); border-bottom: 2.5px solid var(--terra); transform: rotate(45deg) translateY(-4px); transition: transform .25s; flex: none; }
.formazione details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.formazione .corpo { display: grid; gap: 12px; padding: 0 4px 22px; color: var(--testo-2); }
@media (min-width: 760px) { .formazione .corpo { grid-template-columns: 1fr 1fr; gap: 28px; } }
.formazione .corpo strong { display: block; color: var(--testo); font-size: .95rem; margin-bottom: 2px; }
.colonne { display: grid; gap: clamp(40px, 6vw, 72px); }
@media (min-width: 900px) { .colonne { grid-template-columns: 1fr 1fr; } }
.blocco { display: grid; gap: 16px; align-content: start; }
.blocco > p { color: var(--testo-2); }
.regole { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.regole li { padding-left: 28px; position: relative; }
.regole li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 7px; border-left: 2.5px solid var(--terra); border-bottom: 2.5px solid var(--terra); transform: rotate(-45deg); }
.prezzi { margin: 8px 0 0; padding: 0; list-style: none; background: var(--bianco); border-radius: var(--r); box-shadow: var(--ombra); }
.prezzi li { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.prezzi li:last-child { border-bottom: 0; }
.prezzi .nome { font-weight: 600; }
.prezzi .nome small { display: block; color: var(--testo-2); font-weight: 400; font-size: .92rem; }
.prezzi .punti { flex: 1; border-bottom: 2px dotted #D4C6B6; transform: translateY(-5px); min-width: 16px; }
.prezzi .euro { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preventivo { display: grid; gap: 24px; margin-top: clamp(48px, 7vw, 88px); }
@media (min-width: 900px) { .preventivo { grid-template-columns: repeat(3, 1fr); } }
.preventivo article { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 3px solid var(--testo); }
.preventivo p { color: var(--testo-2); }
.lista-ia { margin: 4px 0 0; padding: 0 0 0 1.1em; color: var(--testo-2); font-size: 1rem; }

/* ---------- Manuali ---------- */
.manuali-blocco { background: var(--fondo-2); }
.vetrina { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .vetrina { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.manuale-in-vendita { display: grid; gap: 22px; background: var(--bianco); border-radius: var(--r-grande); padding: clamp(20px, 3vw, 32px); box-shadow: var(--ombra); }
@media (min-width: 640px) { .manuale-in-vendita { grid-template-columns: 200px 1fr; } }
.manuale-in-vendita img { border-radius: 8px; box-shadow: 0 2px 4px rgba(31, 41, 55, .12), 0 18px 30px -18px rgba(31, 41, 55, .55); width: 200px; }
.manuale-in-vendita .dati { display: grid; gap: 12px; align-content: start; }
.manuale-in-vendita .prezzo { font-size: 2rem; font-weight: 800; }
.nota { font-size: .9rem; color: var(--testo-2); }
.in-arrivo { display: grid; gap: 10px; }
.in-arrivo h3 { font-size: 1.1rem; }
.in-arrivo ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #DCCFBF; }
.in-arrivo li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid #DCCFBF; font-size: 1rem; }
.in-arrivo li span:last-child { color: var(--testo-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.regalo { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 20px; background: var(--pesca); border-radius: var(--r-grande); padding: clamp(22px, 4vw, 40px); }
@media (min-width: 900px) { .regalo { grid-template-columns: 1fr 1.1fr; align-items: center; } }
.regalo h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }

/* ---------- Moduli ---------- */
.modulo { display: grid; gap: 16px; }
.riga { display: grid; gap: 16px; }
@media (min-width: 640px) { .riga.due { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: 6px; }
.campo label, .campo .etichetta-campo { font-weight: 700; font-size: 1rem; }
.campo .aiuto { font-size: .9rem; color: var(--testo-2); }
input[type=text], input[type=email], select, textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--testo); background: var(--bianco); border: 1.5px solid #CFC2B2; border-radius: 10px; padding: 12px 14px; min-height: 50px; }
textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #6B7280; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--terra); outline-offset: 1px; border-color: var(--terra); }
.spunta { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; }
.spunta input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.trappola { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.esito { font-weight: 700; min-height: 1.6em; }
.esito.ok { color: var(--ok); }
.esito.errore { color: var(--errore); }
.richiesta-blocco .colonne { align-items: start; }
.domanda-box { background: var(--cielo); border-radius: var(--r-grande); padding: clamp(22px, 4vw, 36px); display: grid; gap: 16px; }
.contatti-diretti { display: grid; gap: 8px; color: var(--testo-2); }

/* ---------- Piede ---------- */
.piede { background: var(--testo); color: #E9E3DA; padding-block: 56px 40px; }
.piede .contenitore { display: grid; gap: 28px; }
@media (min-width: 900px) { .piede .contenitore { grid-template-columns: 1.3fr 1fr 1fr; } }
.piede a { color: #FFFFFF; }
.piede ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.piede .legale { grid-column: 1 / -1; border-top: 1px solid #3A4658; padding-top: 20px; font-size: .92rem; color: #C3BBB0; }
.whatsapp { display: inline-flex; align-items: center; gap: 10px; background: #1F7A4D; color: #fff !important; padding: 12px 18px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.whatsapp:hover { background: #18633E; }
.whatsapp svg { width: 20px; height: 20px; }

/* ---------- Pagine semplici (privacy, grazie, errore) ---------- */
.pagina-testo { padding-block: clamp(40px, 6vw, 80px); }
.pagina-testo .contenitore { max-width: 46rem; display: grid; gap: 18px; }
.pagina-testo h2 { font-size: 1.4rem; margin-top: 18px; }
.pagina-testo ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.spazio-sopra { margin-top: clamp(56px, 8vw, 104px); }
.lista-manuali { display: grid; gap: clamp(20px, 3vw, 32px); align-content: start; }
.riga-percorso { font-weight: 700; color: var(--terra-scura); }
.comprende { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: .95rem; }
.recensioni-blocco .azioni-recensioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 18px; }
.ancora-vecchia { position: relative; top: -80px; display: block; height: 0; }