/* PLUMBING_V 1 — reset tecnico canonico (Toolkit/boilerplate/plumbing.css) */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ══════════ STUDIO VETERINARIO GREGORIO-GUELFI — «Trovo fantastico che chiamino il tuo amico a quattro zampe per nome.» ══════════
   Via Giambellino 67. L'identità viene dal loro biglietto (carta bianca, un Helvetica blu scuro, la croce blu col caduceo, «Si riceve
   solo su appuntamento»), il calore dalla loro sala d'attesa (pareti gialle, sedie arancioni, in una foto di un cliente). La firma
   in apertura sono le medagliette coi nomi dei pazienti, appese ai ganci di una barra (_ggu_firma.mjs). */
:root {
  --carta: #F7F6F2;
  --bianco: #FFFFFF;
  --blu: #1D2B4E;
  --blu-2: #14203C;
  --croce: #2553A3;
  --argento: #A7AFB8;
  --giallo: #F4CE4E;
  --giallo-riga: #E2B52C;
  --arancio: #E8842A;
  --grigio: #4E5968;
  --riga: #DCD8CE;
  --f-titoli: 'Funnel Display', 'Arial Black', Arial, sans-serif;
  --f-testo: 'Special Gothic', 'Helvetica Neue', Arial, sans-serif;
  --f-nomi: 'Style Script', 'Brush Script MT', cursive;
  --gutter: 16px;
  --testata-h: 64px;
}
@media (min-width: 760px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--blu); font: 400 1.06rem/1.6 var(--f-testo); background: var(--carta); }
a { color: var(--croce); }
b, strong { font-weight: 700; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: var(--blu); font-weight: 700; text-decoration: none; }
.salta:focus { top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
section[id] { scroll-margin-top: calc(var(--testata-h) + 14px); }
.intero { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--croce); outline-offset: 2px; }
/* finché i caratteri non arrivano il ripiego è più largo: una parola lunga va a capo invece di uscire (riserva-check, #233) */
h1, h2, h3, .marchio__nome, .piede__nome { overflow-wrap: anywhere; }

/* ── la testata: il biglietto ── */
.testata { position: sticky; top: 0; z-index: 50; background: var(--bianco); border-bottom: 1px solid var(--riga); box-shadow: 0 6px 14px -12px rgba(29, 43, 78, .5); }
.testata__dentro { display: flex; align-items: center; gap: 10px; max-width: 1180px; margin: 0 auto; padding: 8px var(--gutter); }
.marchio { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; color: var(--blu); text-decoration: none; }
.croce { width: 40px; height: 40px; flex: none; }
.marchio__testo { display: flex; flex-direction: column; min-width: 0; }
.marchio__nome { font: 700 1.06rem/1.15 var(--f-testo); letter-spacing: .06em; text-transform: uppercase; }
.marchio__sotto { font: 400 .78rem/1.3 var(--f-testo); letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); }
.voci { display: none; }
.testata__azioni { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.lingue { display: flex; }
.lingue button { min-width: 34px; min-height: 38px; padding: 0 5px; border: 1px solid #B9C0CB; background: transparent; color: var(--blu); font: 700 .82rem var(--f-testo); cursor: pointer; }
.lingue button + button { border-left: 0; }
.lingue button.is-on { background: var(--blu); border-color: var(--blu); color: #fff; }
.chiama { display: none; align-items: center; min-height: 40px; padding: 0 16px; background: var(--croce); color: #fff; font: 700 .98rem var(--f-testo); text-decoration: none; }
.chiama:hover { background: var(--blu); }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid #B9C0CB; background: transparent; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--blu); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-mobile { position: fixed; top: var(--testata-h); left: 0; right: 0; z-index: 49; max-height: calc(100vh - var(--testata-h)); overflow-y: auto; padding: 10px var(--gutter) 22px; background: var(--bianco); border-bottom: 1px solid var(--riga); box-shadow: 0 10px 24px rgba(29, 43, 78, .22); }
.menu-mobile a { display: block; padding: 12px 2px 10px; border-bottom: 1px solid #E6E2D8; color: var(--blu); font: 500 1.3rem/1.3 var(--f-titoli); text-decoration: none; }
.menu-mobile__chiama { display: flex !important; justify-content: center; gap: 8px; margin-top: 14px; border: 0 !important; background: var(--croce); color: #fff !important; font-family: var(--f-testo) !important; font-weight: 700 !important; font-size: 1.1rem !important; }

/* ── l'apertura ── */
.apertura { padding: 30px 0 38px; }
.apertura__alto { display: grid; gap: 30px; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.apertura__sopra { margin: 0; font: 700 .86rem/1.4 var(--f-testo); letter-spacing: .12em; text-transform: uppercase; color: var(--croce); }
.apertura__titolo { margin: 10px 0 8px; font: 700 clamp(2.2rem, 1.45rem + 2.6vw, 3.55rem)/1.04 var(--f-titoli); letter-spacing: -.01em; text-wrap: balance; }
.per-nome { font-family: var(--f-nomi); font-weight: 400; font-size: 1.14em; color: var(--croce); letter-spacing: 0; }
.apertura__chi { margin: 0 0 12px; font-style: italic; color: var(--grigio); }
.apertura__chi::before { content: '— '; }
.apertura__frase { max-width: 36em; margin: 0 0 12px; font-size: 1.06rem; }
.voto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.voto__n { font: 700 2rem/1 var(--f-titoli); }
.voto__su { color: var(--grigio); font-size: .95rem; }
/* le stelle: una maschera SVG ripetuta e un gradiente fino a --voto (niente testo tagliato, #232) */
.stelle { --piena: #2553A3; --vuota: #C9CFDA; display: inline-block; width: 5.5em; height: 1.05em; font-size: 1.05rem; vertical-align: -.1em; background: linear-gradient(90deg, var(--piena) calc(var(--voto, 1) * 100%), var(--vuota) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21'%3E%3Cpath d='M11 1l2.9 6.2 6.8.8-5 4.6 1.3 6.7L11 16l-6 3.3 1.3-6.7-5-4.6 6.8-.8z'/%3E%3C/svg%3E") 0 0 / 1.1em 1.05em repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21'%3E%3Cpath d='M11 1l2.9 6.2 6.8.8-5 4.6 1.3 6.7L11 16l-6 3.3 1.3-6.7-5-4.6 6.8-.8z'/%3E%3C/svg%3E") 0 0 / 1.1em 1.05em repeat-x; }
.stato { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font-weight: 700; color: var(--grigio); }
.stato::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.stato.is-aperto::before { background: #2E8B57; opacity: 1; box-shadow: 0 0 0 3px rgba(46, 139, 87, .22); }
.apertura__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 1.5px solid var(--blu); background: transparent; color: var(--blu); font: 700 1.02rem/1.1 var(--f-testo); text-decoration: none; transition: background .15s, color .15s; }
.bottone:hover { background: var(--blu); color: #fff; }
.bottone--pieno { border-color: var(--croce); background: var(--croce); color: #fff; }
.bottone--pieno:hover { border-color: var(--blu); background: var(--blu); }
/* la foto: un paziente sul loro pavimento, dietro la sala gialla */
.apertura__foto { margin: 0; }
.apertura__scatto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* intera, senza ritagli: la sala gialla in alto e il cane in basso devono restare tutti e due (ritagli-check) */
.apertura__scatto img { display: block; width: 100%; height: auto; box-shadow: 0 18px 30px -22px rgba(29, 43, 78, .7); }
.apertura__foto figcaption { margin-top: 8px; font-size: .9rem; color: var(--grigio); }

/* ── la firma: le medagliette sui ganci ── */
.apertura__ganci { max-width: 1180px; margin: 26px auto 0; padding: 0 var(--gutter); }
.ganci__metalli { position: absolute; width: 0; height: 0; overflow: hidden; }
.ganci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.gancio { position: relative; padding-top: 13px; }
/* la barra: un pezzo per gancio, uno accanto all'altro; le estremità di ogni fila arrotondate (qui sotto, per larghezza) */
.gancio::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 11px; background: linear-gradient(to bottom, #F3F5F7 0, #CBD1D6 45%, #939CA4 100%); box-shadow: 0 5px 6px -3px rgba(29, 43, 78, .35); }
.gancio__uncino { position: absolute; top: 6px; left: 50%; width: 18px; height: 23px; margin-left: -9px; overflow: visible; z-index: 2; }
.medaglietta { position: relative; width: 92%; max-width: 104px; margin: 0 auto; transform-origin: 50% 3.3%; }
.med { display: block; width: 100%; height: auto; overflow: visible; }
.med__nome, .med__luce { font-family: var(--f-nomi); }
.ganci__nota { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--riga); }
.ganci__nota p { margin: 0; font-size: .95rem; color: var(--grigio); }
.ganci__chiama { min-height: 42px; padding: 0 16px; border: 1.5px solid var(--blu); background: var(--bianco); color: var(--blu); font: 400 1.35rem/1 var(--f-nomi); cursor: pointer; }
.ganci__chiama:hover { background: var(--blu); color: #fff; }
/* senza JS il bottone non serve, ma il suo posto resta (#240, firma-posto-check) */
.no-js .ganci__chiama { visibility: hidden; }
@media (max-width: 639px) {
  .gancio:nth-child(4n+1)::before { left: 6px; border-radius: 6px 0 0 6px; }
  .gancio:nth-child(4n)::before { right: 6px; border-radius: 0 6px 6px 0; }
  .gancio:nth-child(n+5) { margin-top: 10px; }
}
@media (min-width: 640px) and (max-width: 1039px) {
  .ganci { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gancio:nth-child(6n+1)::before { left: 6px; border-radius: 6px 0 0 6px; }
  .gancio:nth-child(6n)::before { right: 6px; border-radius: 0 6px 6px 0; }
  .gancio:nth-child(n+7) { margin-top: 12px; }
}
@media (min-width: 1040px) {
  .ganci { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gancio:first-child::before { left: 4px; border-radius: 6px 0 0 6px; }
  .gancio:last-child::before { right: 4px; border-radius: 0 6px 6px 0; }
}

/* ── i capitoli ── */
.capitolo { max-width: 1120px; margin: 0 auto; padding: 66px var(--gutter) 64px; }
.capitolo--giallo, .capitolo--carta { max-width: none; padding-left: max(var(--gutter), calc((100% - 1120px) / 2)); padding-right: max(var(--gutter), calc((100% - 1120px) / 2)); }
.capitolo--giallo { background: var(--giallo); border-top: 6px solid var(--giallo-riga); }
.capitolo--carta { background: var(--bianco); border-top: 1px solid var(--riga); border-bottom: 1px solid var(--riga); }
.etichetta { margin: 0; font: 700 .86rem/1.3 var(--f-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--croce); text-align: center; }
.capitolo--giallo .etichetta { color: var(--blu); }
.capitolo__titolo { max-width: 22em; margin: 8px auto 26px; font: 700 clamp(1.95rem, 1.35rem + 2.2vw, 3rem)/1.1 var(--f-titoli); text-align: center; text-wrap: balance; }

/* su appuntamento: il loro biglietto, appoggiato sul giallo della sala */
.appuntamento { display: grid; gap: 34px; max-width: 1020px; margin: 0 auto; align-items: start; }
.biglietto-cornice { margin: 0; }
.biglietto { position: relative; padding: 22px 22px 18px; background: #FBFBF8; color: #1B2440; font-family: 'Helvetica Neue', Helvetica, Arial, var(--f-testo); transform: rotate(-1.4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 18px 28px -18px rgba(29, 43, 78, .75); }
.biglietto p { margin: 0; }
.biglietto__croce { float: left; width: 58px; height: 58px; margin: 0 14px 6px 0; }
.biglietto__titolo { font-size: 1.12rem; letter-spacing: .04em; line-height: 1.2; }
.biglietto__nomi { margin-top: 6px !important; font-size: .86rem; font-weight: 700; letter-spacing: .02em; }
.biglietto__orari { clear: both; display: grid; grid-template-columns: auto auto; justify-content: center; gap: 2px 16px; margin: 14px 0 12px; font-size: .95rem; }
.biglietto__orari dt, .biglietto__orari dd { margin: 0; }
.biglietto__orari dt { text-align: right; }
.biglietto__riga { font-size: .88rem; line-height: 1.7; }
.biglietto__riga a { color: inherit; text-decoration: none; }
.biglietto__mail { text-transform: none; }
.biglietto__appuntamento { margin-top: 12px !important; font-weight: 700; text-align: center; }
.biglietto-cornice figcaption { margin-top: 16px; font-size: .9rem; color: var(--blu); }
.appuntamento__come p { margin: 0 0 14px; }
.appuntamento__come .stato { margin-top: 0; color: var(--blu); }
.settimana { width: 100%; max-width: 420px; margin: 4px 0 18px; border-collapse: collapse; }
.settimana th, .settimana td { padding: 7px 6px 6px; border-bottom: 1px solid rgba(29, 43, 78, .22); font: 400 1.02rem/1.3 var(--f-testo); text-align: left; }
.settimana td { text-align: right; font-weight: 700; }
.settimana tr.chiuso th, .settimana tr.chiuso td { color: #7A4A0E; }
.settimana tr.is-today { background: rgba(255, 255, 255, .55); }
.settimana tr.is-today th { font-weight: 700; }
.appuntamento__azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.capitolo--giallo .bottone { background: rgba(255, 255, 255, .5); }
.capitolo--giallo .bottone:hover { background: var(--blu); }
.capitolo--giallo .bottone--pieno { background: var(--blu); border-color: var(--blu); }
.capitolo--giallo .bottone--pieno:hover { background: var(--blu-2); }
.appuntamento__urgenza { padding: 10px 14px; border-left: 4px solid var(--blu); background: rgba(255, 255, 255, .55); }

/* lo studio: cosa raccontano i clienti, ogni voce con la sua medaglietta */
.studio { display: grid; gap: 30px; max-width: 1000px; margin: 0 auto; align-items: start; }
.studio__testo p { margin: 0 0 14px; font-size: 1.12rem; }
.racconti { padding: 22px 22px 16px; background: var(--bianco); border: 1px solid var(--riga); }
.racconti__intro { margin: 0 0 10px; font: 700 .86rem/1.3 var(--f-testo); letter-spacing: .12em; text-transform: uppercase; color: var(--croce); }
.racconti__lista { margin: 0; padding: 0; list-style: none; }
.racconti__lista li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px dashed var(--riga); }
.racconti__lista li:last-child { border-bottom: 0; }
.racconti__lista li::before { content: ''; position: absolute; left: 2px; top: .72em; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #3C4248 0 2.2px, transparent 2.6px), linear-gradient(135deg, #F3DFA2, #C9A55A 55%, #A57E36); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.racconti__lista li:nth-child(2)::before { background: radial-gradient(circle at 50% 28%, #3C4248 0 2.2px, transparent 2.6px), linear-gradient(135deg, #8DB5E4, #3A74B9 55%, #244E83); }
.racconti__lista li:nth-child(3)::before { background: radial-gradient(circle at 50% 28%, #3C4248 0 2.2px, transparent 2.6px), linear-gradient(135deg, #E9837A, #C8473D 55%, #962F27); }
.racconti__lista li:nth-child(4)::before { background: radial-gradient(circle at 50% 28%, #3C4248 0 2.2px, transparent 2.6px), linear-gradient(135deg, #F4F6F8, #C4CBD2 55%, #8E979F); }
.racconti__lista li:nth-child(5)::before { background: radial-gradient(circle at 50% 28%, #3C4248 0 2.2px, transparent 2.6px), linear-gradient(135deg, #8CCBA6, #3E8E62 55%, #285E40); }
.racconti__lista li:nth-child(6)::before { background: radial-gradient(circle at 50% 28%, #3C4248 0 2.2px, transparent 2.6px), linear-gradient(135deg, #B8A0DA, #7E5CA8 55%, #553A7C); }

/* i pazienti: le foto dei clienti, ognuna con la sua targhetta */
.pazienti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; max-width: 1060px; margin: 0 auto; padding: 0; list-style: none; }
.paziente { position: relative; margin: 0; }
.paziente__foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.paziente__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 3px; }
.paziente:nth-child(1) .paziente__foto img { object-position: 45% 35%; }
.paziente:nth-child(2) .paziente__foto img { object-position: 50% 30%; }
.paziente:nth-child(3) .paziente__foto img { object-position: 50% 0%; }
.paziente:nth-child(4) .paziente__foto img { object-position: 50% 40%; }
.paziente__cosa { display: inline-block; margin-top: 10px; padding: 4px 12px 4px 26px; position: relative; border-radius: 14px; background: var(--carta); border: 1px solid var(--riga); font-size: .92rem; }
.paziente__cosa::before { content: ''; position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--bianco); box-shadow: inset 0 0 0 2px var(--argento); }
.pazienti__nota { max-width: 44em; margin: 24px auto 0; font-size: .92rem; color: var(--grigio); text-align: center; }

/* dicono: le recensioni, col nome dell'animale se c'è */
.voto--centro { justify-content: center; margin: -8px 0 28px; }
.recensioni { display: grid; gap: 20px; max-width: 1060px; margin: 0 auto; padding: 0; list-style: none; align-items: start; }
.recensione { position: relative; padding: 24px 20px 16px; background: var(--bianco); border: 1px solid var(--riga); border-top: 4px solid var(--croce); }
.recensione__nome { position: absolute; top: -18px; right: 14px; padding: 2px 14px 4px 22px; border-radius: 16px; background: linear-gradient(135deg, #F3DFA2, #C9A55A 60%, #A57E36); color: #4A3A1C; font: 400 1.35rem/1.2 var(--f-nomi); box-shadow: 0 2px 4px rgba(0, 0, 0, .22); }
.recensione__nome::before { content: ''; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: #3C4248; }
.recensione__testo { margin: 0 0 12px; font-size: 1.04rem; line-height: 1.55; }
.recensione__chi { margin: 0; font-size: .86rem; color: var(--grigio); }
.recensione__chi b { display: block; font-size: 1rem; color: var(--blu); }
.dicono__nota { max-width: 46em; margin: 24px auto 0; font-size: .92rem; color: var(--grigio); text-align: center; }
.dicono__nota a { font-weight: 700; }

/* dove */
.dove { display: grid; gap: 26px; max-width: 1000px; margin: 0 auto; }
.dove__testo p { margin: 0 0 16px; font-size: 1.08rem; }
.dove__azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.mappa { border: 1px solid var(--riga); background: var(--carta); padding: 6px; }
.mappa iframe { display: block; width: 100%; height: 340px; border: 0; }

/* domande */
.domande { max-width: 820px; margin: 0 auto; }
.domande details { border-bottom: 1px solid var(--riga); }
.domande summary { padding: 14px 4px 12px; font: 700 1.14rem/1.3 var(--f-titoli); cursor: pointer; }
.domande details p { max-width: 46em; margin: 0 0 16px; padding: 0 4px; }

/* ── la chiusura: il biglietto in negativo ── */
.piede { background: var(--blu); color: #EEF1F7; }
.piede__dentro { max-width: 900px; margin: 0 auto; padding: 46px var(--gutter) 96px; text-align: center; }
.piede__croce { width: 52px; height: 52px; }
.piede__nome { margin: 8px 0 0; font: 700 1.5rem/1.1 var(--f-testo); letter-spacing: .08em; text-transform: uppercase; }
.piede__sotto { margin: 6px 0 14px; color: #C9D2E6; }
.piede__dove, .piede__orario { margin: 0 0 8px; }
.piede a { color: #FFFFFF; }
.piede__cred { max-width: 54em; margin: 18px auto 10px; font-size: .84rem; color: #C3CCE0; }
.piede__su { font-weight: 700; }

/* ── reveal (plumbing) ── */
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; }
html:not(.js) .reveal { opacity: 1; }
.reduced-motion .reveal { opacity: 1 !important; }

/* ── la barra e la lightbox ── */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; background: var(--blu); transform: translateY(100%); transition: transform .25s; }
.action-bar.is-visible { transform: translateY(0); }
.action-bar a { display: flex; align-items: center; justify-content: center; min-height: 54px; color: #fff; font: 700 1.05rem var(--f-testo); text-decoration: none; }
.action-bar a:first-child { background: var(--croce); }
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 22, 40, .94); }
#lightbox[hidden] { display: none !important; }
#lightbox img { width: auto; max-width: min(1400px, 100%); max-height: 88vh; }
#lightboxClose { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: transparent; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }

/* ── le larghezze ── */
@media (max-width: 359px) {
  .testata__dentro { gap: 6px; }
  .croce { width: 34px; height: 34px; }
  .marchio__nome { font-size: .95rem; letter-spacing: .03em; }
  .lingue button { min-width: 31px; }
}
@media (max-width: 419px) {
  .marchio__sotto { display: none; }
}
/* sul telefono la riga dei nomi del biglietto va sotto la croce, intera */
@media (max-width: 559px) {
  .biglietto__nomi { clear: both; padding-top: 8px; font-size: .8rem; }
}
/* fino a 1040 px la barra delle medagliette viene subito dopo il testo, prima della foto dello studio */
@media (max-width: 1039px) {
  .apertura { display: flex; flex-direction: column; }
  .apertura__alto { display: contents; }
  .apertura__testo { order: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
  .apertura__ganci { order: 2; width: 100%; }
  .apertura__foto { order: 3; width: 100%; max-width: 480px; margin: 30px auto 0; padding: 0 var(--gutter); }
}
@media (min-width: 560px) {
  .chiama { display: inline-flex; }
  .biglietto { padding: 28px 30px 22px; }
  .biglietto__titolo { font-size: 1.35rem; }
  .biglietto__nomi { font-size: 1rem; }
}
@media (min-width: 640px) {
  .pazienti { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .action-bar { display: none; }
  .piede__dentro { padding-bottom: 46px; }
  .appuntamento { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; }
  .studio { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 44px; }
  .recensioni { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .dove { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; }
}
@media (min-width: 1040px) {
  :root { --testata-h: 70px; }
  .testata__dentro { gap: 16px; }
  .marchio { flex: none; }
  .voci { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-left: 30px; }
  .voci a { padding: 4px 1px 2px; color: var(--blu); font: 700 1rem var(--f-testo); text-decoration: none; }
  .voci a:hover, .voci a[aria-current="true"] { color: var(--croce); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .burger { display: none; }
  .apertura { padding-top: 30px; }
  .apertura__alto { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); align-items: end; gap: 44px; }
  .recensioni { grid-template-columns: repeat(3, 1fr); }
}

/*GANCI*/
/* generato da _ggu_firma.mjs: lo stato d'attesa delle medagliette, solo dentro .ganci */
.firma-attesa .ganci .medaglietta { opacity: 0; }
/*/GANCI*/

/*MAPPACLIC*/
/* la mappa Google si carica solo al clic (giro privacy 1/10/2026) */
.mappa-clic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--mappa-h, 320px); box-sizing: border-box; padding: 24px; text-align: center; background: repeating-linear-gradient(0deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px); }
.mappa-clic__velo { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 32em; }
.mappa-clic__btn { display: inline-block; padding: 0.75em 1.4em; border: 2px solid currentColor; border-radius: 999px; color: inherit; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; background: transparent; cursor: pointer; }
.mappa-clic__btn:hover, .mappa-clic__btn:focus-visible { text-decoration: underline; }
.mappa-clic__nota { margin: 0; font-size: 0.85em; line-height: 1.45; }
/*/MAPPACLIC*/