/* Web Dentist — dal 27/10/2026 (v0.2.0) la pagina è il cartoncino dell'appuntamento dello studio: campo verde petrolio
   #0e6670, facce bianco-menta da compilare, linea di strappo, timbro. Archivo (il carattere del logo, larghezza variabile)
   per tutto. I caratteri stanno nel tema: nessuna chiamata a Google. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* palette della presentazione (stessi nomi del logo) */
:root {
	--petrolio: #0e6670;       /* colore guida: logo, bottoni, accenti */
	--petrolio-scuro: #0a4d55; /* passaggio del mouse, fondi scuri caldi */
	--tinta: #a8d8da;         /* secondo colore del logo: scelte e evidenze */
	--velo: #e8f3f4;           /* fondi di sezione e card */
	--alba: #f6fafa;          /* fondo delle pagine */
	--inchiostro: #0f2f34;         /* testi e fondi scuri */
	--grafite: #3c3c3b;        /* testi secondari */
	--bianco: #fff;
	--grigio: #566a6d;         /* didascalie: 5,9:1 sul crema */
	--riga: #d3e4e6;
	--ombra: 0 30px 60px -32px rgba(10, 77, 85, .35);
	--titoli: 'Archivo', system-ui, sans-serif;
	--menta: #eef6f5;          /* faccia del cartoncino */
	--strappo: #7fb5b9;        /* linea tratteggiata e righe da compilare sul petrolio */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--alba); color: var(--inchiostro); font: 400 18px/1.6 'Archivo', system-ui, sans-serif; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--petrolio); outline-offset: 3px; }
.wds-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { margin: 0; font-family: var(--titoli); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
h2 { font-size: clamp(32px, 4.4vw, 52px); max-width: 20ch; }
h3 { font-size: 20px; letter-spacing: -.01em; line-height: 1.2; }
.wds-sezione { padding: 96px 0; }
.wds-intro { font-size: 19px; max-width: 54ch; margin: 18px 0 0; color: var(--grafite); }
.wds-intro a { color: var(--petrolio); font-weight: 600; }
.wds-didascalia { font-size: 14px; color: var(--grigio); margin: 16px 0 0; }
.wds-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; font: 600 16.5px/1.1 'Archivo', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
/* «smalto» è il nome storico della classe del bottone pieno: ora è bordeaux */
.wds-btn-smalto { background: var(--petrolio); color: #fff; }
.wds-btn-smalto:hover { background: var(--petrolio-scuro); }
.wds-btn-chiaro { background: transparent; color: var(--petrolio); box-shadow: inset 0 0 0 1.5px var(--petrolio); }
.wds-btn-chiaro:hover { background: var(--velo); }
.wds-icona { flex-shrink: 0; width: 1em; height: 1em; }

/* testata */
.wds-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--riga); }
.wds-header-in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.wds-marchio { display: inline-flex; align-items: center; color: var(--inchiostro); }
.wds-logo { display: block; height: 36px; width: auto; }
.wds-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; font-weight: 500; font-size: 15.5px; color: var(--grafite); }
.wds-nav a:not(.wds-btn) { text-decoration: none; }
.wds-nav a:not(.wds-btn):hover { color: var(--petrolio); }
.wds-nav .wds-btn { min-height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 1000px) { .wds-nav a:not(.wds-btn) { display: none; } }
@media (max-width: 420px) { .wds-header-in { gap: 12px; } .wds-logo { height: 26px; } .wds-nav .wds-btn { padding: 0 13px; font-size: 14px; } }
.wds-marchio, .wds-btn { white-space: nowrap; }
/* sui telefoni i bottoni della testata dicono «Demo» e «Info»: le frasi intere accanto al nome non ci stanno (05/10/2026);
   dal 06/10 (v0.3.8) ci sono tutti e due, quindi logo un po' più piccolo per starci anche in 320 px */
.wds-marchio { flex-shrink: 0; }
.wds-solo-stretto { display: none; }
@media (max-width: 520px) { .wds-solo-largo { display: none; } .wds-solo-stretto { display: inline; } .wds-nav { gap: 8px; } }
@media (max-width: 374px) { .wds-logo { height: 22px; } .wds-nav .wds-btn { padding: 0 11px; font-size: 13.5px; } }
/* 07/10/2026 (Gabriele): da telefono «Info» era troppo attaccato al bordo: testata con più margine ai lati */
@media (max-width: 700px) { .wds-header .wds-wrap { padding: 0 22px; } }
@media (max-width: 374px) { .wds-header .wds-wrap { padding: 0 18px; } }

/* telefono */
.wds-tel { width: 300px; max-width: 100%; padding: 10px; border-radius: 44px; background: #111; box-shadow: 0 30px 60px -24px rgba(10, 77, 85, .5); }
.wds-tel-schermo { overflow: hidden; border-radius: 34px; background: #fff; aspect-ratio: 390 / 844; }
.wds-tel-schermo img, .wds-tel-schermo video { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* come prenota: passi numerati perché sono una sequenza */
.wds-passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin: 56px 0 0; padding: 0; list-style: none; counter-reset: passo; }
.wds-passo { counter-increment: passo; }
.wds-passo figure { margin: 0 0 20px; overflow: hidden; border: 1px solid var(--riga); border-radius: 22px; background: var(--bianco); aspect-ratio: 390 / 560; box-shadow: 0 18px 40px -28px rgba(10, 77, 85, .3); }
.wds-passo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wds-passo h3 { display: flex; align-items: baseline; gap: 10px; }
.wds-passo h3::before { content: counter(passo); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--petrolio); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0; transform: translateY(-2px); }
.wds-passo p { margin: 8px 0 0 38px; font-size: 16.5px; max-width: 34ch; color: var(--grafite); }
@media (max-width: 900px) { .wds-passi { grid-template-columns: repeat(6, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; } .wds-passo { scroll-snap-align: start; } }

/* il nastro del monogramma: grande e trasparente sui fondi scuri (agenda, richiedi informazioni) */
.wds-nastro { position: relative; overflow: hidden; isolation: isolate; }
.wds-nastro::after { content: ""; position: absolute; z-index: -1; right: -6%; top: -60px; width: min(760px, 70vw); aspect-ratio: 1.34; background: #fff; opacity: .05; -webkit-mask: url(../img/nastro.svg) no-repeat center / contain; mask: url(../img/nastro.svg) no-repeat center / contain; pointer-events: none; }

/* agenda: sezione scura prugna */
.wds-agenda, .wds-sedi { background: var(--inchiostro); color: #fff; }
.wds-agenda .wds-intro, .wds-sedi .wds-intro { color: #cfe4e6; }
.wds-agenda .wds-didascalia, .wds-sedi .wds-didascalia { color: #a9c4c7; }
.wds-agenda :focus-visible, .wds-sedi :focus-visible { outline-color: #fff; }
.wds-agenda-griglia { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 56px; }
.wds-computer { overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.wds-elenco { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.wds-elenco li { position: relative; padding-left: 28px; }
.wds-elenco li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: var(--tinta); }
@media (max-width: 900px) { .wds-agenda-griglia { grid-template-columns: 1fr; } .wds-agenda .wds-tel { margin: 0 auto; } }

/* cosa fa da solo: card bianche con l'icona nel quadratino rosa */
.wds-fa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.wds-fa > div { padding: 28px; border: 1px solid var(--riga); border-radius: 22px; background: var(--bianco); }
.wds-fa .wds-icona { box-sizing: content-box; width: 22px; height: 22px; margin-bottom: 18px; padding: 10px; border-radius: 12px; background: var(--velo); color: var(--petrolio); }
.wds-fa p { margin: 8px 0 0; font-size: 16.5px; color: var(--grafite); }

/* domande */
.wds-domande-elenco { max-width: 820px; margin-top: 40px; }
.wds-domanda { border-top: 1px solid var(--riga); }
.wds-domanda:last-child { border-bottom: 1px solid var(--riga); }
.wds-domanda summary { position: relative; padding: 22px 48px 22px 0; font-size: 18.5px; font-weight: 600; list-style: none; cursor: pointer; }
.wds-domanda summary::-webkit-details-marker { display: none; }
.wds-domanda summary::after { content: ""; position: absolute; right: 0; top: 17px; width: 32px; height: 32px; border-radius: 6px; background: var(--velo) center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%230e6670' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 1v12M1 7h12'/%3E%3C/svg%3E"); }
.wds-domanda[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%230e6670' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 7h12'/%3E%3C/svg%3E"); }
.wds-domanda p { max-width: 62ch; margin: 0 0 22px; color: var(--grafite); }

/* richiedi informazioni: sezione scura prugna con il nastro */
.wds-informazioni { background: var(--inchiostro); color: #fff; }
.wds-informazioni .wds-intro { color: #cfe4e6; }
.wds-informazioni :focus-visible { outline-color: #fff; }
.wds-form { position: relative; display: grid; gap: 16px; max-width: 720px; margin-top: 40px; }
.wds-form-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wds-form label { display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; font-weight: 600; }
.wds-form input, .wds-form select, .wds-form textarea { min-height: 52px; padding: 0 14px; border: 1.5px solid #3f6469; border-radius: 12px; background: #17414a; color: #fff; font: 400 17px 'Archivo', system-ui, sans-serif; }
.wds-form input:focus, .wds-form select:focus, .wds-form textarea:focus { border-color: var(--tinta); }
.wds-form textarea { min-height: 110px; padding: 12px 14px; resize: vertical; }
.wds-form ::placeholder { color: #8fb0b4; }
.wds-form .wds-consenso { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.wds-consenso input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--tinta); flex-shrink: 0; }
.wds-consenso a { color: var(--tinta); }
.wds-form .wds-btn { justify-self: start; margin-top: 8px; }
/* sul fondo scuro il bottone pieno è bianco con il testo bordeaux, come «Scorri e prenota» delle storie */
.wds-informazioni .wds-btn-smalto { background: #fff; color: var(--petrolio); }
.wds-informazioni .wds-btn-smalto:hover { background: var(--velo); }
/* Pagina «Prova la demo»: fondo chiaro, campi bianchi (quelli scuri sono per la sezione Richiedi informazioni) */
.wds-pagina-demo .wds-form input { background: var(--bianco); color: var(--inchiostro); border-color: #b9d3d6; }
.wds-pagina-demo .wds-form input:focus { border-color: var(--petrolio); }
.wds-pagina-demo .wds-form ::placeholder { color: var(--grigio); }
.wds-pagina-demo .wds-form { margin-top: 32px; }
.wds-pagina-demo .wds-consenso input { accent-color: var(--petrolio); }
.wds-pagina-demo .wds-consenso a { color: var(--petrolio); }
/* a destra cosa si riceve: l'agenda sul telefono e i tre passi (v0.3.8); sul telefono vanno sotto il modulo */
.wds-demo-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
.wds-demo-lato { position: sticky; top: 100px; }
.wds-demo-passi { counter-reset: passo; margin-top: 28px; font-size: 16px; color: var(--grafite); }
.wds-demo-passi li { counter-increment: passo; padding-left: 36px; }
.wds-demo-passi li::before { content: counter(passo); top: 0; width: 24px; height: 24px; background: var(--petrolio); color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; text-align: center; }
.wds-demo-passi strong { color: var(--inchiostro); }
.wds-demo-voce { margin: 28px 0 0; font-size: 16px; color: var(--grafite); }
.wds-demo-voce a { color: var(--petrolio); font-weight: 700; }
@media (max-width: 900px) { .wds-demo-griglia { grid-template-columns: 1fr; gap: 56px; } .wds-demo-lato { position: static; } .wds-demo-lato .wds-tel { margin: 0 auto; } }
.wds-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wds-msg { margin: 0; padding: 14px 18px; border-radius: 12px; font-weight: 600; }
.wds-msg-ok { background: #e7f3eb; color: #185c32; }
.wds-msg-err { background: var(--velo); color: var(--petrolio-scuro); }
.wds-chiama { margin: 28px 0 0; font-size: 17px; color: #cfe4e6; }
.wds-chiama a { color: #fff; font-weight: 700; }
@media (max-width: 700px) { .wds-form-riga { grid-template-columns: 1fr; } }

/* piè di pagina e pagine semplici */
.wds-footer { padding: 56px 0 32px; background: #0a1f22; color: #a9c4c7; font-size: 15px; }
.wds-footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 64px; }
.wds-footer .wds-marchio, .wds-footer a { color: #fff; }
.wds-footer .wds-logo { height: 34px; margin-bottom: 16px; }
.wds-footer-sotto { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.wds-pagina { padding: 72px 0; }
.wds-pagina h1 { margin-bottom: 24px; font-size: clamp(32px, 4vw, 48px); }
.wds-pagina-testo { max-width: 70ch; }
.wds-pagina-testo a { color: var(--petrolio); text-decoration: underline; }
.wds-pagina-testo h2 { font-size: 24px; margin: 36px 0 12px; }
/* Testi di Iubenda (inc/iubenda.php): il titolo «Footer» è solo per i lettori di schermo; il triangolo dei servizi sulla stessa riga del nome */
.wds-iubenda h2.sr-only { display: none; }
.wds-iubenda summary { cursor: pointer; }
.wds-iubenda summary > div { display: inline-block; vertical-align: top; margin-left: 6px; }
.wds-iubenda summary h4 { margin: 0 0 4px; }
@media (max-width: 700px) { .wds-sezione { padding: 72px 0; } .wds-wrap { padding: 0 16px; } .wds-fa > div { padding: 24px 22px; } }

/* Web Dentist (0.1.0): pezzi nuovi rispetto a Web Beauty */
.wds-didascalia-visivo { position: relative; max-width: 300px; margin: 22px 0 0; text-align: center; }
.wds-passi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
@media (max-width: 900px) { .wds-passi { grid-template-columns: 1fr; overflow: visible; } }
.wds-richiesta { display: flex; gap: 20px; align-items: flex-start; max-width: 820px; margin-top: 56px; padding: 28px; border: 1px solid var(--riga); border-radius: 22px; background: var(--velo); }
.wds-richiesta .wds-icona { box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 12px; background: var(--bianco); color: var(--petrolio); }
.wds-richiesta p { margin: 8px 0 0; font-size: 16.5px; color: var(--grafite); max-width: 62ch; }
.wds-sedi-griglia { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 56px; }
.wds-sedi-griglia .wds-elenco { margin-top: 0; font-size: 19px; }
@media (max-width: 900px) { .wds-sedi-griglia { grid-template-columns: 1fr; } .wds-sedi .wds-tel { margin: 0 auto; } }
.wds-confronto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.wds-confronto > div { padding: 28px; border: 1px solid var(--riga); border-radius: 22px; background: var(--bianco); }
.wds-confronto .wds-elenco { margin-top: 18px; font-size: 16.5px; }
.wds-accanto .wds-elenco li::before { background: var(--petrolio); }
.wds-accanto .wds-elenco-no li::before { background: none; box-shadow: inset 0 0 0 2px var(--grigio); }
@media (max-width: 800px) { .wds-confronto { grid-template-columns: 1fr; } .wds-richiesta { flex-direction: column; gap: 12px; padding: 24px 22px; } }

.wds-cta { background: var(--velo); }
.wds-cta-azione { margin: 28px 0 0; }

@media (max-width: 1100px) { .wds-fa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .wds-fa { grid-template-columns: 1fr; } }

/* ===== Cartoncino dell'appuntamento (v0.2.0, 27/10/2026): sostituisce l'apertura con foto e portatile ===== */
body { font-stretch: 100%; }
h1, h2 { font-stretch: 112%; font-weight: 800; letter-spacing: -.03em; }
h3 { font-stretch: 106%; }
::selection { background: var(--tinta); color: var(--inchiostro); }
.wds-etichetta, .wds-voci dt, .wds-timbrino {
	font-size: 12.5px; font-weight: 700; font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase; }

/* apertura (v0.2.1, 27/10/2026, Gabriele: «troppo scritta»): foto dello studio a tutta larghezza, velo del petrolio del logo
   dietro al titolo bianco, il cartoncino dell'appuntamento (strappo, righe, timbro) che si posa in basso a destra */
.wds-apertura { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(82vh, 760px); padding: 96px 0 120px; overflow: hidden; background: var(--petrolio); color: #fff; }
.wds-apertura-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.wds-apertura::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(14, 102, 112, .96) 0%, rgba(14, 102, 112, .93) 60%, rgba(14, 102, 112, .5) 74%, rgba(14, 102, 112, 0) 90%); }
.wds-apertura-in { width: 100%; }
.wds-apertura h1 { max-width: 16ch; font-size: clamp(40px, 5.4vw, 80px); line-height: 1; text-wrap: balance; color: #fff; }
.wds-apertura-riga { max-width: 40ch; margin: 24px 0 0; font-size: clamp(18px, 1.6vw, 21px); color: #e3f2f2; }
.wds-apertura-azione { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }
.wds-btn-bianco { min-height: 56px; padding: 0 30px; background: #fff; color: var(--petrolio-scuro); font-weight: 700; font-size: 17px; }
.wds-btn-bianco:hover { background: var(--menta); }
.wds-apertura :focus-visible { outline-color: #fff; }
/* il cartoncino: faccia petrolio, tacche dello strappo del colore della foto sotto (bianco), righe da compilare, timbro */
.wds-cartoncino-mini { position: absolute; right: max(32px, calc((100vw - 1180px) / 2)); bottom: 52px; width: 300px; padding: 18px 22px 20px;
	isolation: isolate; color: #fff; filter: drop-shadow(0 22px 22px rgba(4, 30, 34, .45)); transform: rotate(-3deg); }
.wds-cartoncino-mini::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: var(--petrolio);
	-webkit-mask: radial-gradient(circle 8px at 0 41px, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 41px, #0000 98%, #000) right / 51% 100% no-repeat;
	mask: radial-gradient(circle 8px at 0 41px, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 41px, #0000 98%, #000) right / 51% 100% no-repeat; }
.wds-cartoncino-mini p, .wds-cartoncino-mini dl { margin: 0; }
.wds-cartoncino-mini .wds-etichetta { padding-bottom: 12px; border-bottom: 1.5px dashed rgba(255, 255, 255, .5); color: #d4eeee; }
.wds-cartoncino-mini dl > div { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 10px; padding: 9px 0 5px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.wds-cartoncino-mini dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #d4eeee; }
.wds-cartoncino-mini dd { margin: 0; font-size: 19px; font-weight: 700; font-stretch: 106%; }
.wds-mini-timbro { position: absolute; right: 18px; bottom: 16px; padding: 4px 9px; border: 2px solid var(--tinta); border-radius: 5px; color: var(--tinta);
	font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-8deg); }
@media (prefers-reduced-motion: no-preference) {
	.wds-cartoncino-mini { animation: wds-posa .8s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes wds-posa { from { transform: translateY(18px) rotate(-7deg); } to { transform: rotate(-3deg); } }
@media (max-width: 900px) {
	.wds-apertura { flex-direction: column; align-items: stretch; min-height: 0; padding: 64px 0 48px; }
	.wds-apertura::before { background: linear-gradient(180deg, rgba(14, 102, 112, .95) 0%, rgba(14, 102, 112, .9) 48%, rgba(14, 102, 112, .3) 74%, rgba(14, 102, 112, .08) 100%); }
	.wds-cartoncino-mini { position: relative; right: auto; bottom: auto; align-self: flex-end; width: 260px; margin: 48px 24px 0 0; }
	.wds-cartoncino-mini dl > div { grid-template-columns: 58px 1fr; }
	.wds-cartoncino-mini dd { font-size: 16.5px; }
	.wds-mini-timbro { position: static; display: inline-block; margin-top: 12px; }
}
@media (max-width: 520px) { .wds-apertura { padding: 48px 0 36px; } .wds-apertura-foto { object-position: 40% 60%; } }

/* il timbro dello studio: è il bottone del preventivo nella fascia petrolio */
.wds-timbro { display: inline-block; padding: 6px; border: 2.5px solid var(--petrolio-scuro); border-radius: 10px; color: var(--petrolio-scuro);
	text-decoration: none; transform: rotate(-4deg); transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .15s, color .15s; }
.wds-timbro span { display: block; padding: 14px 20px; border: 1.5px solid currentColor; border-radius: 6px; font-size: 17px; font-weight: 800;
	font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; text-align: center; }
.wds-timbro:hover { background: var(--petrolio-scuro); color: #fff; transform: rotate(-2deg) scale(1.02); }

/* richiami (v0.2.2, Gabriele: «anonima»): sei mesi come caselle di calendario, poi l'email vera come cartoncino di promemoria */
.wds-richiami { background: var(--menta); }
.wds-richiami-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: center; }
.wds-richiami-griglia > * { min-width: 0; }
.wds-mesi { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr) 1.6fr; gap: 8px; margin: 44px 0 0; padding: 0; list-style: none; }
.wds-mesi li { display: flex; flex-direction: column; justify-content: flex-end; min-height: 92px; padding: 10px 12px; border: 2px dashed #b8d6d8; border-radius: 10px; }
.wds-mesi li span { font-size: 13px; color: var(--grigio); }
.wds-mesi b { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.wds-mese-pieno { border: 0 !important; background: var(--tinta); color: var(--inchiostro); }
.wds-mese-pieno span { color: var(--inchiostro) !important; }
.wds-mese-email { border: 0 !important; background: var(--petrolio); color: #fff; }
.wds-mese-email span { color: #d4eeee !important; }
.wds-voci { margin: 40px 0 0; border-top: 1.5px solid #c9dfe0; }
.wds-voci > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1.5px solid #c9dfe0; }
.wds-voci dt { padding-top: 3px; color: var(--petrolio); }
.wds-voci dd { margin: 0; font-size: 17px; color: var(--grafite); }
/* l'email come cartoncino: bordo dell'email del programma, linea di strappo sotto l'etichetta */
.wds-promemoria { margin: 0; }
.wds-promemoria-carta { position: relative; padding: 26px 30px 24px; border-radius: 14px; background: var(--bianco); box-shadow: 0 34px 60px -32px rgba(10, 77, 85, .45), 0 0 0 1px #d7e7e8; transform: rotate(1.5deg); }
.wds-promemoria-carta .wds-etichetta { margin: 0 -30px 18px; padding: 0 30px 14px; border-bottom: 2px dashed #b8d6d8; }
.wds-promemoria-carta p { margin: 0 0 12px; font-size: 16.5px; color: var(--grafite); }
.wds-promemoria-oggetto { font-size: 21px !important; font-weight: 800; font-stretch: 106%; line-height: 1.2; color: var(--inchiostro) !important; }
.wds-promemoria-bottone { display: inline-flex; align-items: center; min-height: 46px; margin: 6px 0 18px; padding: 0 24px; border-radius: 10px; background: var(--petrolio); color: #fff; font-weight: 700; }
.wds-promemoria-piede { padding-top: 14px; border-top: 1px solid #e3eeef; font-size: 13.5px !important; color: var(--grigio) !important; }
.wds-promemoria figcaption { margin-top: 18px; font-size: 14px; color: var(--grigio); text-align: center; }
@media (max-width: 960px) { .wds-richiami-griglia { grid-template-columns: minmax(0, 1fr); gap: 48px; } .wds-promemoria { max-width: 440px; } }
@media (max-width: 640px) {
	.wds-mesi { grid-template-columns: 1.4fr repeat(5, .7fr) 1.4fr; gap: 5px; }
	.wds-mesi li { min-height: 72px; padding: 8px; }
	.wds-mesi li:not(.wds-mese-pieno):not(.wds-mese-email) span { font-size: 11px; }
	.wds-mesi b { font-size: 10.5px; }
	.wds-voci > div { grid-template-columns: 1fr; gap: 4px; }
	.wds-promemoria-carta { padding: 22px 20px 20px; transform: none; }
	.wds-promemoria-carta .wds-etichetta { margin: 0 -20px 16px; padding: 0 20px 12px; }
}

/* come prenota (v0.2.3, Gabriele: «anonime, troppo testo, mancano immagini vere»): le quattro schermate vere del telefono */
.wds-schermi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: passo; }
.wds-schermi li { counter-increment: passo; }
.wds-schermo { margin: 0; overflow: hidden; border: 8px solid #10282c; border-radius: 30px; background: #fff; aspect-ratio: 390 / 844; box-shadow: 0 30px 50px -30px rgba(10, 77, 85, .55); }
.wds-schermo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wds-schermi li:nth-child(even) .wds-schermo { transform: translateY(28px); }
.wds-schermi h3 { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; font-size: 20px; }
.wds-schermi li:nth-child(even) h3 { margin-top: 50px; }
.wds-schermi h3::before { content: counter(passo); font-size: 32px; font-weight: 800; font-stretch: 112%; line-height: 1; color: var(--petrolio); }
#come-prenota > .wds-wrap > .wds-didascalia { margin-top: 28px; }
#come-prenota .wds-didascalia a { color: var(--petrolio); font-weight: 600; }
.wds-richiesta { position: relative; max-width: 720px; margin-top: 32px; padding: 24px 28px; border: 1.5px solid var(--riga); border-radius: 14px; background: var(--menta); }
.wds-richiesta h3 { font-size: 20px; }
.wds-richiesta p { margin: 8px 0 0; font-size: 16.5px; color: var(--grafite); }
.wds-timbrino { position: absolute; top: 18px; right: 22px; margin: 0 !important; padding: 5px 10px; border: 2px solid var(--petrolio); border-radius: 6px; color: var(--petrolio) !important; transform: rotate(4deg); }
@media (max-width: 900px) {
	.wds-schermi { grid-template-columns: repeat(4, 62%); overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding: 0 0 18px; }
	.wds-schermi li { scroll-snap-align: start; }
	.wds-schermi li:nth-child(even) .wds-schermo { transform: none; }
	.wds-schermi li:nth-child(even) h3 { margin-top: 22px; }
}
@media (max-width: 640px) { .wds-timbrino { position: static; display: inline-block; margin-bottom: 12px !important; } }

/* più sedi: l'agenda vera della settimana con il filtro per sede, in una finestra */
.wds-sedi { background: var(--petrolio-scuro); }
.wds-schermo-largo { margin: 44px 0 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .15); }
.wds-schermo-barra { display: flex; gap: 7px; padding: 12px 16px; background: #e6efef; }
.wds-schermo-barra i { width: 11px; height: 11px; border-radius: 50%; background: #b7cdcf; }
.wds-schermo-largo img { width: 100%; }
.wds-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 36px 0 0; padding: 0; list-style: none; }
.wds-tre li { padding-top: 16px; border-top: 2px dashed var(--strappo); font-size: 18px; font-weight: 600; color: #fff; }
@media (max-width: 760px) { .wds-tre { grid-template-columns: 1fr; gap: 16px; } }

/* accanto al gestionale: due blocchi, cosa fa Web Dentist e cosa resta al vostro programma */
.wds-due { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; margin-top: 40px; border-radius: 18px; overflow: hidden; }
.wds-due > div { padding: 36px 40px; }
.wds-due ul { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.wds-due li { font-size: clamp(20px, 2vw, 26px); font-weight: 700; font-stretch: 106%; letter-spacing: -.01em; line-height: 1.2; }
.wds-due-noi { background: var(--petrolio); color: #fff; }
.wds-due-noi .wds-etichetta { color: #d4eeee; }
.wds-due-noi li::before { content: ""; display: inline-block; width: 10px; height: 18px; margin-right: 14px; border: solid var(--tinta); border-width: 0 3px 3px 0; transform: rotate(45deg) translateY(-4px); }
.wds-due-voi { border-left: 2px dashed var(--strappo); background: var(--menta); color: var(--grafite); }
.wds-due-voi li { color: var(--grafite); font-weight: 600; }
#accanto .wds-didascalia { max-width: 70ch; margin-top: 18px; }
@media (max-width: 800px) { .wds-due { grid-template-columns: 1fr; } .wds-due > div { padding: 28px 22px; } .wds-due-voi { border-left: 0; border-top: 2px dashed var(--strappo); } }

/* preventivo: il tagliando da staccare sul campo petrolio */
.wds-cta { background: var(--petrolio); }
.wds-tagliando { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: 44px 48px;
	border: 2px dashed var(--strappo); border-radius: 18px; color: #fff; }
.wds-tagliando h2 { color: #fff; }
.wds-tagliando .wds-intro { color: #dcefef; }
.wds-tagliando .wds-cta-azione { margin: 0; }
.wds-cta .wds-timbro { border-color: #fff; color: #fff; }
.wds-cta .wds-timbro:hover { background: #fff; color: var(--petrolio-scuro); }
.wds-cta :focus-visible { outline-color: #fff; }
@media (max-width: 800px) { .wds-tagliando { grid-template-columns: 1fr; padding: 32px 22px; gap: 28px; } }

/* il modulo: un cartoncino da compilare sul fondo scuro */
.wds-informazioni { background: var(--inchiostro); }
.wds-cart-modulo { max-width: 820px; padding: 48px 52px; border-radius: 18px; background: var(--menta); color: var(--inchiostro); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .6); }
.wds-cart-modulo .wds-intro { color: var(--grafite); }
.wds-cart-modulo :focus-visible { outline-color: var(--petrolio); }
.wds-cart-modulo .wds-form label { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grigio); }
.wds-cart-modulo .wds-form input, .wds-cart-modulo .wds-form select, .wds-cart-modulo .wds-form textarea {
	border: 0; border-bottom: 2px solid var(--strappo); border-radius: 0; background: transparent; color: var(--inchiostro); font-size: 19px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 0 2px; }
.wds-cart-modulo .wds-form textarea { padding: 10px 2px; border: 2px solid var(--riga); border-radius: 10px; background: var(--bianco); }
.wds-cart-modulo .wds-form input:focus, .wds-cart-modulo .wds-form select:focus, .wds-cart-modulo .wds-form textarea:focus { outline: none; border-color: var(--petrolio); }
.wds-cart-modulo .wds-form ::placeholder { color: var(--grigio); }
.wds-cart-modulo .wds-form .wds-consenso { font-size: 15.5px; letter-spacing: 0; text-transform: none; color: var(--inchiostro); font-weight: 400; }
.wds-cart-modulo .wds-consenso input { accent-color: var(--petrolio); }
.wds-cart-modulo .wds-consenso a { color: var(--petrolio); }
.wds-cart-modulo .wds-btn-smalto { background: var(--petrolio); color: #fff; border-radius: 10px; }
.wds-cart-modulo .wds-btn-smalto:hover { background: var(--petrolio-scuro); }
.wds-cart-modulo .wds-chiama { color: var(--grafite); }
.wds-cart-modulo .wds-chiama a { color: var(--petrolio); }
@media (max-width: 700px) { .wds-cart-modulo { padding: 32px 20px; } }

/* testata e bottoni: angoli da cartoncino invece delle pillole */
.wds-btn { border-radius: 10px; }
.wds-nav .wds-btn { border-radius: 10px; }
/* v0.2.3: riquadro della prima visita in colonna, spazio per il timbro; agenda della settimana tagliata in altezza */
.wds-richiesta { display: block; padding-right: 190px; }
@media (max-width: 640px) { .wds-richiesta { padding-right: 22px; } }
.wds-schermo-largo img { aspect-ratio: 1264 / 600; object-fit: cover; object-position: top; }