/* «Studio dentistico Leoncini» — sito d'esempio (attivita' di fantasia).
   Informazione, non promozione (L. 145/2018, c. 525). La cosa che si ricorda e'
   la targa d'ottone sul portone: nome, titoli, albo, piano. Il resto e' una
   pagina che si legge come un buon foglio di istruzioni. */

@font-face{font-family:Newsreader;src:url(../font/newsreader-200-800.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(../font/plus-jakarta-200-800.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --notte:#1F3A4D;          /* testo e bottoni: 11,6:1 su bianco */
  --intonaco:#E6ECEF;       /* il muro dell'androne */
  --ottone:#B8913A;
  --ottone-chiaro:#E2C47A;
  --incisione:#3B2E12;      /* le lettere incise: 7,9:1 sull'ottone chiaro */
  --bianco:#FFFFFF;
  --grigio:#5A6670;         /* testo secondario: 5,9:1 su bianco */
  --titoli:Newsreader,Georgia,serif;
  --testo:"Plus Jakarta Sans",system-ui,sans-serif;
  --bordo:clamp(1rem,4vw,3.5rem);
}
*{box-sizing:border-box;margin:0}
body{background:var(--bianco);color:var(--notte);font:400 1.0625rem/1.6 var(--testo);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--notte)}
:focus-visible{outline:3px solid var(--ottone);outline-offset:3px}
h1,.h1,h2,h3{font-family:var(--titoli);font-weight:500;letter-spacing:-.005em}
h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);line-height:1.12;margin-bottom:1.2rem}
h3{font-size:1.35rem;line-height:1.2;margin-bottom:.6rem}
section{padding:clamp(3rem,7vw,5.5rem) var(--bordo)}

.fascia-esempio{background:var(--notte);color:var(--bianco);font:500 .82rem/1.4 var(--testo);text-align:center;padding:.45rem 1rem}
.fascia-esempio a{color:inherit}
.testata{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 2rem;padding:1rem var(--bordo);border-bottom:1px solid var(--intonaco)}
.marchio{font:500 1.3rem var(--titoli);color:var(--notte);text-decoration:none;margin-right:auto}
.testata nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.testata nav a{text-decoration:none;font-size:.95rem}
.testata nav a:hover{text-decoration:underline}

/* ── la targa ─────────────────────────────────────────────────────────────── */
.apertura{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:center;
  background:var(--intonaco);padding-top:clamp(2.5rem,6vw,5rem);padding-bottom:clamp(2.5rem,6vw,5rem)}
.portone{display:flex;justify-content:center;padding:clamp(1.5rem,4vw,3rem);
  background:linear-gradient(90deg,rgba(0,0,0,.05),transparent 20%,transparent 80%,rgba(0,0,0,.05)),#D9E1E5;border-radius:2px}
.targa{width:min(100%,24rem);padding:2.2rem 2rem 2rem;border-radius:3px;text-align:center;color:var(--incisione);
  background:linear-gradient(110deg,transparent 42%,rgba(255,250,228,.75) 50%,transparent 58%) -60% 0/260% 100% no-repeat,
    linear-gradient(160deg,#F0DCA0 0%,var(--ottone-chiaro) 28%,#C9A24F 62%,#E6CC8A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(80,60,20,.35),0 18px 30px -18px rgba(40,30,10,.55);
  position:relative;animation:riflesso 1.8s cubic-bezier(.4,0,.2,1) .7s both}
/* all'arrivo la luce passa una volta sull'ottone, come sul portone vero */
@keyframes riflesso{from{background-position:160% 0,0 0}to{background-position:-60% 0,0 0}}
/* le quattro viti */
.targa::before,.targa::after{content:"";position:absolute;width:.6rem;height:.6rem;border-radius:50%;top:.7rem;
  background:radial-gradient(circle at 35% 35%,#f4e4b4,#8f6d25);box-shadow:0 1px 1px rgba(0,0,0,.3)}
.targa::before{left:.7rem}.targa::after{right:.7rem}
.targa p{text-shadow:0 1px 0 rgba(255,245,210,.7)}
.t-nome{font:600 clamp(1.5rem,1.1rem + 1.4vw,2.1rem)/1.15 var(--titoli);margin-bottom:.5rem}
.t-titolo{font:400 1.15rem var(--titoli);font-style:italic;margin-bottom:1.1rem}
.t-albo,.t-piano{font:600 .82rem/1.5 var(--testo);letter-spacing:.02em}
.t-piano{margin-top:.8rem;padding-top:.8rem;border-top:1px solid rgba(59,46,18,.35)}
.h1{font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);line-height:1.08;margin-bottom:1.2rem;max-width:18ch}
.sotto{font-size:1.12rem;max-width:42ch;margin-bottom:1.8rem}
.essenziale{display:grid;gap:.9rem;max-width:30rem}
.essenziale div{display:grid;grid-template-columns:10rem 1fr;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid #c7d2d8}
.essenziale dt{color:var(--grigio);font-size:.95rem}
.essenziale dd{font-weight:600}
.essenziale a{font-size:1.25rem;text-decoration:none}

/* ── prestazioni: un tariffario, non un catalogo ──────────────────────────── */
.intro{max-width:44rem;color:var(--grigio);margin-bottom:2rem}
.gruppi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:2rem 4rem}
/* i gruppi sono <section> dentro una <section>: senza questo prendono il
   margine delle sezioni grandi */
.gruppi .gruppo{padding:0}
.gruppo dl div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--intonaco)}
.gruppo dd{font-weight:600;white-space:nowrap;text-align:right}

/* ── lo studio ────────────────────────────────────────────────────────────── */
.studio{background:var(--intonaco)}
.studio-griglia{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.2rem;align-items:start}
.studio-griglia img,.studio-griglia video{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.studio-griglia .grande img{aspect-ratio:4/5}
.studio-griglia figcaption{font-size:.92rem;color:var(--grigio);margin-top:.6rem}

/* ── l'equipe: niente foto di persone che non esistono, le iniziali ───────── */
.equipe ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:2rem}
.equipe li{display:flex;gap:1rem;align-items:flex-start}
.sigla{flex:none;width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--ottone);font:500 1.1rem var(--titoli);color:var(--incisione);background:#F6EFD9}
.equipe strong{display:block;font:500 1.15rem var(--titoli);margin-bottom:.2rem}

.prima ol{max-width:40rem;padding-left:1.3rem}
.prima li{margin-bottom:.5rem}

.dove{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:2rem 4rem;background:var(--intonaco)}
.tab-orari{border-collapse:collapse;width:100%;max-width:26rem}
.tab-orari th,.tab-orari td{text-align:left;padding:.45rem 0;border-bottom:1px solid #c7d2d8;font-weight:400}
.tab-orari th{color:var(--grigio);width:50%}
.dove p{max-width:32rem}

/* ── l'appuntamento ───────────────────────────────────────────────────────── */
.appuntamento>p{max-width:40rem;margin-bottom:1.6rem}
.appuntamento form{display:grid;gap:1.1rem;max-width:40rem}
.riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.1rem}
.appuntamento label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
.appuntamento input,.appuntamento select{font:400 1rem var(--testo);padding:.75rem .8rem;border:1.5px solid #9fb0bb;
  border-radius:4px;background:var(--bianco);color:var(--notte);min-height:3rem}
.appuntamento .spunta{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.appuntamento .spunta input{min-height:auto;width:1.2rem;height:1.2rem;margin-top:.2rem;flex:none}
.appuntamento button{justify-self:start;font:600 1rem var(--testo);background:var(--notte);color:var(--bianco);border:0;
  border-radius:4px;padding:.85rem 1.5rem;cursor:pointer}
.appuntamento button:hover{background:#2b5068}
.esito{min-height:1.6em;font-weight:600}
.piede{padding:2.5rem var(--bordo) 3rem;font-size:.9rem;color:var(--grigio);border-top:1px solid var(--intonaco)}
.piede p+p{margin-top:.3rem}

@media(max-width:760px){
  .apertura{grid-template-columns:1fr}
  .studio-griglia{grid-template-columns:1fr 1fr}
  .studio-griglia .grande{grid-column:1/-1}
  .essenziale div{grid-template-columns:1fr;gap:.1rem}
}
@media(prefers-reduced-motion:reduce){.targa{animation:none}}

/* ── il video in cima: le parole al centro, sullo studio vuoto ───────────── */
.clip{--clip-velo:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(31,58,77,.82),rgba(31,58,77,.45));place-items:center;text-align:center}
.clip{--velo-parole:rgba(31,58,77,.6)}   /* il velo sotto le parole (clip.css) */
.clip-parole{display:flex;flex-direction:column;align-items:center}
.clip-nome{font:500 clamp(2.4rem,1.2rem + 4.4vw,5.4rem)/1.05 var(--titoli);letter-spacing:-.01em}
/* la frase e' un blocco piu' stretto del titolo (max 32ch in clip.css): senza
   margini automatici restava a sinistra, col testo centrato dentro (voce Cowork 26/10 (1)) */
.clip-frase{font:400 clamp(1.1rem,1rem + .5vw,1.4rem)/1.4 var(--testo);color:var(--ottone-chiaro);margin-inline:auto}
.clip-btn{background:#fff;color:var(--notte);border-radius:4px;font-family:var(--testo)}
/* a 320 la colonna da 20rem usciva di 74 px, a 768 di 25 (controllo totale del
   23/10): ora la colonna si stringe, e si stringe la voce, mai il prezzo («50 €»
   resta su una riga) */
.gruppo dt{min-width:0}
.gruppo dd{flex:none}

/* il secondo video (23/10): lo studio vuoto, orizzontale e a tutta larghezza,
   con le due foto sotto; in verticale si sgranava */
.studio-griglia:has(.grande .secondo){grid-template-columns:1fr 1fr}
.studio-griglia .grande:has(.secondo){grid-column:1/-1}
.studio-griglia .grande .secondo{aspect-ratio:16/9;border-radius:2px}
.studio-griglia:has(.grande .secondo) figure:not(.grande) img{aspect-ratio:4/3}