/* ==========================================================================
   Il Mio Sito — foglio di stile unico del modello
   Impaginazione misurata al pixel sul layout di riferimento. Per un cliente
   nuovo si cambiano le due variabili di colore in cima (--c-primary,
   --c-secondary); le misure non si toccano.

   Breakpoint dello standard:
   360 / 560 / 768 / 1024 / 1280 / 1440 / 1600 / 1920 / 2560 / 3440
   Usati qui: 768 (tablet), 981 (desktop), 1920 (corpo del testo) e, oltre,
   gli scalini dell'ingrandimento (in fondo al foglio).
   DEROGA DICHIARATA: 981px al posto di 1024px, 480px (riquadro della
   recensione) e 1350px (margine interno del popup): sono le soglie del
   layout misurato, e il layout deve restare identico a ogni larghezza.

   Schermi ampi: la colonna e' il 60% della finestra, 1152px a 1920px; oltre
   i 1920px tutta la pagina si ingrandisce in proporzione (standard §6.9.2,
   blocco "oltre i 1920px" in fondo); recensione, risposte e popup
   hanno un tetto di 90 caratteri (65ch: in Poppins il ch, larghezza dello
   zero, e' piu' largo della lettera media); testata e servizio vanno a
   tutta scheda per scelta del committente (DEROGA DICHIARATA a §6.9.1); il
   corpo del testo passa da 16 a 17px a 1920, poi cresce con l'ingrandimento.
   ========================================================================== */

@layer reset, base, layout, components, pages;

/* angolo dell'anello attorno al logo: dichiarato per poterlo animare */
@property --ring-angle{ syntax:"<angle>"; inherits:false; initial-value:0deg; }

/* ----- Font, ospitati sul dominio -----
   Gli intervalli unicode sono quelli dei file (sottoinsieme latino): i
   caratteri fuori intervallo, come ● e ★, passano al font di sistema
   esattamente come nella pagina di origine. */
@font-face{
  font-family:"Poppins";
  src:url("../fonts/poppins-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
  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:"Poppins";
  src:url("../fonts/poppins-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  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:"Poppins";
  src:url("../fonts/poppins-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  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:"Poppins";
  src:url("../fonts/poppins-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  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:"Poppins";
  src:url("../fonts/poppins-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  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;
}
/* Lora e' un font variabile: un solo file copre i pesi da 400 a 700 */
@font-face{
  font-family:"Lora";
  src:url("../fonts/lora-variable.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  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;
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset{
  *,*::before,*::after{ box-sizing:border-box; }
  html{ font-size:100%; -webkit-text-size-adjust:100%; }
  body,h1,h2,h3,p,ul,dl,dd,figure,blockquote{ margin:0; }
  ul{ padding:0; list-style:none; }
  img,video,iframe{ display:block; max-width:100%; }
  img,video{ height:auto; }
  iframe{ border:0; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
  summary{ list-style:none; cursor:pointer; }
  summary::-webkit-details-marker{ display:none; }
  dialog{ padding:0; border:0; color:inherit; }
}

/* ==========================================================================
   BASE — variabili, tipografia, colori
   ========================================================================== */
@layer base{
  :root{
    color-scheme:only light;

    /* ===== COLORI DEL CLIENTE: di norma si cambiano solo questi due ===== */
    --c-primary:#fff6df;         /* fondo della pagina */
    --c-secondary:#dd7801;       /* pulsanti, barra fissa, link, dettagli */

    /* ===== NEUTRI: bianco e grigi, uguali per tutti i clienti ===== */
    --c-white:#ffffff;
    --c-surface:#f9fafd;         /* schede e footer */
    --c-text:#4f4f4f;
    --c-line:#dddddd;
    --c-line-strong:#9a9a9a;     /* bordo dei pulsanti e della X del banner */
    --c-row-alt:#f7f7f7;         /* righe alterne degli orari */
    --c-panel:#f4f4f4;           /* recensione, domande chiuse, riquadro mappa */
    --c-panel-border:#d9d9d9;
    --c-muted:#cccccc;           /* freccia delle domande, contatore foto */
    --c-dots:#c6c6c6;
    --c-placeholder:#d9d9d9;     /* segnaposto IMMAGINE / VIDEO */
    --c-placeholder-text:#6b6b6b;
    --c-video:#222222;           /* fondo del riquadro video */
    --c-label:rgba(10,10,10,.56);
    --c-shadow:rgba(0,0,0,.13);
    --c-shadow-strong:rgba(0,0,0,.3);
    --c-shadow-soft:rgba(0,0,0,.2);
    --c-shadow-faint:rgba(0,0,0,.03);
    --c-overlay:rgba(0,0,0,.55);
    --c-lightbox:rgba(11,11,11,.8);
    --c-shine:rgba(255,255,255,.32);   /* riflesso che attraversa il pulsante */
    --c-mask:#000000;                  /* parte visibile delle maschere */

    /* ===== FISSI: colori di marchi e di stato, non si cambiano ===== */
    --c-whatsapp:#35b400;
    --c-facebook:#3b5998;
    --c-instagram:#ea2c59;
    --c-star:#f0ad4e;
    --c-status-idle:#9ca3af;
    --c-status-open:#15803d;     /* 4,6:1 su bianco */
    --c-status-pause:#b45309;    /* 4,6:1 su bianco */
    --c-status-closed:#dc2626;

    /* ===== DERIVATI dai due colori del cliente: non si scrivono a mano ===== */
    --c-page:var(--c-primary);
    --c-accent:var(--c-secondary);
    --c-link:var(--c-secondary);
    --c-focus:var(--c-text);
    --c-ring:var(--c-secondary);          /* anello attorno al logo */

    /* font: ospitati sul dominio, con alternative di sistema finche' non arrivano */
    --font-body:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-head:"Lora", Georgia, "Times New Roman", serif;
    --font-display:"Lora", Georgia, "Times New Roman", serif;   /* etichetta del video e titolo del popup */

    /* misure ricorrenti */
    --col:90%;                   /* larghezza della colonna */
    --radius:12px;
    --radius-small:6px;
    --radius-media:4px;          /* foto della galleria e dello staff, foto del servizio, mappe */
    --pad:30px;                  /* margine interno delle schede */
    --gap:10px;
    --shadow-card:0 2px 13px 0 var(--c-shadow);
    --shadow-card-wide:0 2px 18px 0 var(--c-shadow);
    --shadow-btn:0 12px 18px -6px var(--c-shadow-strong);
    --ease:ease-in-out;
    --ease-out:cubic-bezier(.22,.61,.36,1);      /* arrivo morbido */
    --ease-spring:cubic-bezier(.34,1.56,.64,1);  /* arrivo con piccolo rimbalzo */
  }

  html{ overflow-x:clip; }
  /* i collegamenti alle sezioni (barra fissa, ORARI, PRENOTA...) scorrono morbidi, non saltano */
  html{ scroll-behavior:smooth; }
  body{
    background-color:var(--c-white);
    color:var(--c-text);
    font-family:var(--font-body);
    font-size:1rem;
    font-weight:300;
    /* interlinea fissa di 28.8px ereditata da tutti i testi, come nell'originale */
    line-height:1.8rem;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:clip;
  }
  strong{ font-weight:700; }
  :focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; }

  .skip-link{
    position:absolute; left:8px; top:-60px; z-index:100;   /* sopra a tutto quando riceve il focus */
    padding:8px 16px;
    background-color:var(--c-white); color:var(--c-text);
    border-radius:var(--radius-small);
  }
  .skip-link:focus{ top:8px; }

  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }

  /* icone: riquadro alto 1em, largo quanto il glifo di origine */
  .icon{ width:1em; height:1em; fill:currentColor; }
  .icon[data-icon="arrow-left"],
  .icon[data-icon="arrow-right"],
  .icon[data-icon="whatsapp"]{ width:.875em; }
  .icon[data-icon="close"]{ width:.571em; }
}

/* ==========================================================================
   LAYOUT — colonna, sezioni, barra fissa, footer
   ========================================================================== */
@layer layout{
  /* il fondo verde sta anche su main: ai lati della barra fissa, quando
     arriva in fondo alla pagina, non deve comparire il bianco */
  main,
  .section{ background-color:var(--c-page); }
  .container{ width:var(--col); margin-inline:auto; }

  /* barra fissa in fondo alla finestra: resta agganciata finche' non
     raggiunge la sua posizione naturale, prima del footer */
  .action-bar{
    position:sticky; bottom:0; z-index:50;                 /* sopra alle schede, sotto ai popup */
    display:flex; flex-wrap:wrap; gap:8px var(--gap);
    width:100%; margin-inline:auto;
    background-color:var(--c-accent);
    overflow:hidden;
  }
  .action-bar > .btn-wrap{ flex:1 1 calc((100% - 2 * var(--gap)) / 3); }

  .site-footer{
    padding:30px 0 20px;
    background-color:var(--c-surface);
    font-weight:400; text-align:center;
  }
  .footer-inner{ width:80%; max-width:1080px; margin-inline:auto; padding-bottom:16px; }
  .footer-logo{ width:auto; height:25px; margin:0 auto 14px; }
  /* il logo porta a ilmiosito.org; area di tocco di 44px, l'aspetto non cambia */
  .footer-logo-link{ display:block; position:relative; width:fit-content; margin-inline:auto; }
  .footer-logo-link::before{ content:""; position:absolute; inset:-10px 0; }
  .footer-note{ font-size:.8125rem; }
  .footer-note a{ color:var(--c-link); }
  .footer-rule{ display:block; width:40px; height:1px; margin:14px auto; background-color:var(--c-line-strong); }
  .footer-legal{ font-size:.8125rem; line-height:1.6; }

  @media (min-width:981px){
    :root{ --col:min(60%, 1152px); }       /* 60%; oltre i 1920px cresce con l'ingrandimento della pagina */
    .action-bar{ width:var(--col); flex-wrap:nowrap; border-radius:var(--radius) var(--radius) 0 0; }   /* angoli delle schede, solo in alto e solo da computer */
  }
}

/* ==========================================================================
   COMPONENTI — schede, pulsanti, intestazioni di scheda
   ========================================================================== */
@layer components{
  .card{
    background-color:var(--c-surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-card);
    padding:var(--pad);
    overflow:hidden;
  }

  /* ----- pulsanti ----- */
  .btn-row{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px var(--gap);
    margin-block:10px 20px;
  }
  .btn-row-spaced{ margin-block:20px; }
  .btn-wrap{ position:relative; }
  .btn{
    display:block; position:relative;
    padding:13px .7em 13px 2em;
    background-color:var(--c-accent); color:var(--c-white);
    border-radius:999px;                                   /* pillola */
    box-shadow:var(--shadow-btn);
    font-size:clamp(.8125rem, 4.2vw, .9375rem);   /* 15px da 357px in su; sotto scende fino a 13px, cosi' il testo resta su una riga a 320px */
    font-weight:500; line-height:1.7em;
    text-align:center; text-transform:uppercase;
    transition:scale .3s ease;
  }
  /* al passaggio del mouse il pulsante rientra un poco; sugli schermi a
     tocco rientra solo mentre lo si preme (niente effetto che resta dopo il
     tocco, e l'area di tocco e' piena quando il dito arriva). Si usa la
     proprieta' scale, non transform: cosi' la comparsa allo scorrimento (che
     usa transform) non la annulla, e anche i pulsanti con .reveal rientrano */
  .btn:active{ scale:.97; }
  @media (hover:hover){
    .btn:hover{ scale:.97; }
  }
  /* l'icona non occupa spazio nella riga: sta 1.3em prima del testo,
     centrata in altezza sul pulsante */
  .btn-icon{
    position:absolute; top:50%;
    margin-left:-1.3em;
    transform:translateY(-50%);
  }
  .btn-plain{ padding-inline:1em; }
  .btn-small{ display:inline-block; padding:6px 14px; font-size:.75rem; line-height:1.6; box-shadow:none; }
  /* area di tocco di 44px anche sui comandi piccoli: un riquadro invisibile
     attorno, l'aspetto non cambia (standard §10) */
  .btn-small::before,
  .a11y-open::before{ content:""; position:absolute; inset:-8px; }   /* 8px: resta oltre 44px anche col pulsante rientrato */
  /* link di testo (19-29px): solo in verticale, cosi' link vicini sulla stessa riga non si sovrappongono */
  .footer-link::before,
  .footer-note a::before,
  .contact-text a::before{ content:""; position:absolute; inset:-13px 0; }
  .btn-small,
  .footer-link,
  .footer-note a,
  .contact-text a,
  .a11y-open{ position:relative; }
  .btn-whatsapp{ background-color:var(--c-whatsapp); }
  .btn-bar{
    min-height:44px;
    padding-block:10px;
    border-radius:0; box-shadow:none;
    font-size:.8125rem;
  }

  /* ----- intestazione di scheda: icona + titolo ----- */
  /* l'icona ha un margine negativo di 8px: con 8px di padding il suo bordo
     superiore sta esattamente a 30px dal bordo della scheda, come i lati */
  .card-head{ display:flex; align-items:flex-start; padding:8px 0 20px; }
  .card-head-icon{ flex:0 0 auto; width:32px; margin-top:-8px; }
  .card-head-doc .card-head-icon{ width:30.08px; margin-inline:.96px; }
  .card-head-title{
    padding:0 0 10px 15px;
    font-family:var(--font-body); font-size:1rem; font-weight:600; line-height:1em;
  }

  /* ----- segnaposto per immagini e video non ancora forniti -----
     Riquadro grigio con un'etichetta piccola. Le proporzioni si passano
     con le variabili --w e --h (style="--w:2;--h:3"); senza, e' quadrato.
     Gli angoli (tondi per logo e foto della recensione) li da' la classe del
     posto, la stessa che avra' il file vero (hero-logo, review-photo).
     Si sostituisce con <img> o <video> appena il file arriva: in consegna
     non deve restarne nessuno (standard §1.1). */
  .placeholder{
    display:grid; place-items:center;
    width:100%; aspect-ratio:var(--w, 1) / var(--h, 1);
    background-color:var(--c-placeholder); color:var(--c-placeholder-text);
    user-select:none;
  }
  .placeholder-label{
    font-family:var(--font-body); font-size:.625rem; font-weight:500; line-height:1;
    letter-spacing:.12em; text-transform:uppercase;
  }

  /* ----- riflesso dei pulsanti -----
     Attraversa ogni pulsante al passaggio del mouse; sul pulsante grande
     (.btn-shine) passa anche una volta quando compare. Ne restano senza i
     pulsanti piccoli (.btn-small): il loro riquadro di tocco di 44px esce dal
     bordo, e il taglio che serve al riflesso (overflow:hidden) lo annullerebbe. */
  .btn:not(.btn-small){ overflow:hidden; }
  .btn:not(.btn-small)::after{
    content:""; position:absolute; inset:0 auto 0 0;
    width:45%;
    background-image:linear-gradient(100deg, transparent, var(--c-shine), transparent);
    transform:translateX(-130%) skewX(-18deg);
    pointer-events:none;
  }

  /* ----- comparsa allo scorrimento -----
     Lo stato nascosto esiste solo quando lo script e' partito (classe .js
     sull'elemento html): senza JavaScript tutto resta visibile.
     .reveal        elemento singolo
     .stagger       elenco: i figli entrano uno dopo l'altro (--i e' la
                    posizione del figlio, la scrive lo script) */
  @media screen{
    .js .reveal{ opacity:0; }
    .js .reveal-fade{ transform:translate3d(0,28px,0); }
    .js .reveal-slide-bottom{ transform:translate3d(0,100%,0); }
    .js .reveal-right{ transform:translate3d(40px,0,0); }
    .js .reveal-drop{ transform:scale(.4) rotate(-25deg); }
    .js .reveal.is-visible{
      opacity:1; transform:none;
      transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
    }
    .js .reveal-drop.is-visible{
      transition:opacity .4s var(--ease-out) .25s, transform .7s var(--ease-spring) .25s;
    }

    /* i pulsanti che compaiono allo scorrimento tengono il rientro morbido */
    .js .btn.reveal.is-visible{
      transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), scale .3s ease;
    }

    .js .stagger > *{ opacity:0; transform:translate3d(0,18px,0); }
    .js .stagger-side > *{ transform:translate3d(36px,0,0); }
    .js .stagger.is-visible > *{
      opacity:1; transform:none;
      transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
      transition-delay:calc(var(--i, 0) * 80ms + 150ms);
    }

    .btn-shine.is-visible::after{ animation:shine 1s var(--ease-out) .9s; }
    @media (hover:hover){                    /* solo col mouse: sugli schermi a tocco resterebbe dopo il tocco */
      .btn:not(.btn-small):hover::after{
        transform:translateX(330%) skewX(-18deg);
        transition:transform .9s var(--ease-out);
      }
    }
    @keyframes shine{ to{ transform:translateX(330%) skewX(-18deg); } }
  }

  @media (min-width:768px){
    .btn-bar{ font-size:.9375rem; }
    .card-head{ padding:8px 0 28px; }
  }

  @media (min-width:981px){
    .card-head{ padding:8px 0 30px; }

  }
}

/* ==========================================================================
   PAGINE — sezioni della home e pagine legali
   ========================================================================== */
@layer pages{

  /* ----- testata ----- */
  .hero{ padding:60px 0 1px; }
  .hero-badge{
    position:relative; z-index:1;                          /* il tondo sta sopra alla scheda */
    width:130px;
    margin:0 auto 30px;
  }
  .hero-logo{
    width:130px; height:130px; object-fit:cover;
    border:3px solid var(--c-white); border-radius:100px;
  }
  .hero-title-line{ display:block; }
  .hero-intro{ padding-bottom:10px; }
  .hero-card{
    margin-top:-92px;
    padding:82px var(--pad) var(--pad);
    background-color:var(--c-surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-card-wide);
    overflow:hidden;
  }
  .hero-title,
  .service-title{
    padding-bottom:10px;
    font-family:var(--font-head); font-size:1.75rem; font-weight:600;
    text-align:center;
  }
  .hero-title{ margin-bottom:20px; line-height:1.4; }
  .hero-text,
  .service-text,
  .review-text,
  .faq-answer{
    text-align:justify; text-wrap:pretty;
    hyphens:auto; overflow-wrap:break-word;
  }
  .hero-text{ margin-bottom:0; margin-inline:auto; }
  /* nessuna riga oltre i 90 caratteri, anche sugli schermi piu' larghi:
     65ch e non 90ch, perche' il ch e' la larghezza dello zero (misurato:
     90ch = circa 110 caratteri; 65ch resta entro 90 anche con testi pieni
     di cifre e date, che a 70ch arrivavano a 96). Testata e servizio restano a
     tutta scheda per scelta del committente (deroga dichiarata). */
  .review-text,
  .faq-answer,
  .popup-text{ max-width:65ch; }

  /* ----- servizio ----- */
  .service{ padding-bottom:10px; }
  .service-card{ box-shadow:var(--shadow-card-wide); }
  .service-image{ width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:30px; border-radius:var(--radius-media); }
  .service-body{ display:flow-root; }
  .service-title{ margin-bottom:20px; line-height:1.4; }
  .service-text{ margin-bottom:0; }

  /* ----- galleria -----
     Senza script: colonne CSS. Con lo script le immagini vengono distribuite
     in colonne come nell'originale (ognuna nella colonna piu' corta). */
  .gallery{ padding-bottom:10px; }
  .gallery-card{ margin-bottom:10px; }
  .gallery-grid{ columns:2; column-gap:var(--gap); }
  .gallery-grid.is-arranged{ columns:auto; display:flex; gap:var(--gap); }
  .gallery-column{ flex:1 1 0; min-width:0; display:grid; gap:var(--gap); align-content:start; }
  .gallery-item{ display:block; margin-bottom:10px; break-inside:avoid; overflow:hidden; border-radius:var(--radius-media); cursor:zoom-in; }
  .gallery-grid.is-arranged .gallery-item{ margin-bottom:0; }
  .gallery-item > *{ width:100%; }                   /* foto, oppure segnaposto */

  /* ----- chiamata ----- */
  .call{ display:flow-root; padding-bottom:20px; }

  /* ----- staff: carosello ----- */
  .staff{ padding-bottom:10px; }
  .staff-card-wrap{ overflow:visible; }
  .carousel{ position:relative; }
  .carousel-track{
    display:flex; gap:30px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .carousel-track::-webkit-scrollbar{ display:none; }
  /* la larghezza delle schede parte da quella del contenitore arrotondata al
     pixel, come fa il carosello dell'originale; la prima riga vale per i
     browser che non conoscono round() */
  .staff-card{
    --track:100%;
    flex:0 0 var(--track);
    scroll-snap-align:start;
    text-align:center;
  }
  .staff-photo{ width:100%; border-radius:var(--radius-media); }
  .staff-body{ padding:20px 0 0; }
  .staff-name{
    margin-bottom:15px;
    font-family:var(--font-head); font-size:1.4375rem; font-weight:600; line-height:2;
  }
  .staff-text{ text-align:justify; hyphens:auto; overflow-wrap:break-word; }
  /* frecce: nascoste senza script, perche' senza script non farebbero nulla */
  .carousel-arrow{ display:none; }
  .js .carousel-arrow{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%; z-index:10;                /* sopra alle schede del carosello */
    width:44px; height:44px;
    background-color:var(--c-accent); color:var(--c-white);
    border-radius:50%;
    font-size:1.25rem;
    transform:translateY(-50%);
    transition:opacity .3s var(--ease);
  }
  .js .carousel.is-static .carousel-arrow{ display:none; }   /* tutte le schede entrano: niente da scorrere */
  .carousel-prev{ left:-34px; }
  .carousel-next{ right:-34px; }
  @supports (width:round(nearest, 100%, 1px)){
    .staff-card{ --track:round(nearest, 100%, 1px); }
  }
  .carousel-arrow[disabled]{ opacity:.35; cursor:auto; }

  /* ----- il centro: video di sfondo ----- */
  .center{ padding-bottom:10px; }
  .center-frame{
    position:relative;
    height:400px; padding-top:160px;
    background-color:var(--c-video);
  }
  .center-frame:has(> .placeholder){ background-color:var(--c-placeholder); }
  .center-frame{
    border-radius:var(--radius);
    overflow:hidden;
  }
  /* il video (o il segnaposto) riempie il riquadro restando agganciato in alto */
  .center-media{
    position:absolute; inset:0;
    width:100%; height:100%; max-width:none; aspect-ratio:auto;
    object-fit:cover; object-position:50% 0;
  }
  /* l'etichetta del segnaposto video sta in basso, fuori dal riquadro del titolo */
  .center-media > .placeholder-label{ align-self:end; margin-bottom:20px; }
  .center-label{
    position:relative; z-index:1;                          /* sopra al video */
    width:78%; margin-inline:auto;
    padding:10px 36px;
    background-color:var(--c-label);
    border-radius:0 30px 0 30px;
    overflow:hidden;
  }
  .center-title{
    padding-bottom:10px;
    color:var(--c-white);
    font-family:var(--font-display); font-size:1.875rem; font-weight:600; line-height:1;
    text-align:center;
  }

  /* ----- orari ----- */
  .hours{ padding-bottom:10px; }
  .open-pill{
    display:flex; align-items:center; gap:8px; width:fit-content;
    margin-bottom:30px; padding:12px 18px;
    border:1.5px solid var(--c-status-idle); border-radius:999px;
    color:var(--c-status-idle);
    font-family:var(--font-body); font-size:.875rem; font-weight:600; line-height:1.35;
    letter-spacing:.2px;
  }
  .open-pill.is-open{ border-color:var(--c-status-open); color:var(--c-status-open); }
  .open-pill.is-closing,
  .open-pill.is-pause{ border-color:var(--c-status-pause); color:var(--c-status-pause); }
  .open-pill.is-closed{ border-color:var(--c-status-closed); color:var(--c-status-closed); }
  .open-pill[hidden],
  .day-bar[hidden],
  .day-bar-now[hidden]{ display:none; }
  .open-pill-dot{
    position:relative; flex:0 0 auto;
    width:9px; height:9px;
    background-color:currentColor; border-radius:50%;
  }
  .open-pill-dot::after{
    content:""; position:absolute; inset:0;
    background-color:currentColor; border-radius:50%;
    opacity:0;
  }

  /* barra della giornata: va dalla prima apertura all'ultima chiusura di
     oggi. I tratti pieni sono le ore di apertura (li disegna lo script nella
     variabile --bar), il tondo e' l'ora attuale (--now, da 0 a 100). */
  .day-bar{ container-type:inline-size; margin-bottom:26px; }
  .day-bar-track{
    height:6px;
    background-color:var(--c-line); border-radius:999px;
    overflow:hidden;
  }
  .day-bar-fill{
    display:block; height:100%;
    background-image:var(--bar);
    transform-origin:0 50%;
  }
  .day-bar-now{
    display:block; width:28px; height:28px;
    margin:-17px 0 0 -14px;
    background-color:var(--c-white);
    border:3px solid var(--c-accent); border-radius:50%;
    translate:calc(var(--now, 0) * 1cqi) 0;
  }
  .day-bar-scale{
    display:flex; justify-content:space-between;
    margin-top:4px;
    font-size:.75rem; line-height:1rem;
  }
  .hours-list,
  .price-list,
  .faq-list,
  .contact-list{ border-top:1px solid var(--c-line); }
  .hours-list{ padding-top:12px; }
  /* giorno a sinistra, orario spinto a destra: stessa tecnica dell'originale */
  .hours-row{
    display:flow-root;                                     /* se l'orario non entra va a capo e la riga cresce */
    padding:20px 5px 17px;
    border-bottom:1px solid var(--c-line);
    line-height:1rem;
  }
  .hours-row dt{ display:inline; }
  .hours-row dd{ float:right; }
  .hours-row:nth-child(even){ background-color:var(--c-row-alt); }
  .hours-row:last-child{ border-bottom:0; padding-bottom:0; }
  /* riga del giorno corrente: la segna lo script */
  .hours-row.is-today{
    background-color:color-mix(in srgb, var(--c-accent) 70%, var(--c-white));
    color:var(--c-white); font-weight:500;
  }

  /* ----- recensione ----- */
  .review{ padding-bottom:1px; }
  .review-card{ margin-bottom:10px; overflow:visible; }
  .review-track > .review-box{ flex:0 0 100%; scroll-snap-align:start; }
  .review-box{
    padding:10% var(--pad) var(--pad);
    background-color:var(--c-panel);
    border-radius:var(--radius-small);
  }
  .review-photo{
    width:90px; height:90px;
    margin:0 auto 20px;
    border-radius:90px;
    object-fit:cover;
  }
  .review-stars{
    margin-top:16px; padding-bottom:10px;
    color:var(--c-star);
    font-size:1.375rem; line-height:1.5em;
    text-align:center;
  }
  /* come nell'originale: la stella vuota da' la larghezza, quella piena la copre */
  .star{ display:inline-block; position:relative; line-height:.8em; }
  .star::before{ content:"★"; position:absolute; inset:0; overflow:hidden; }
  .star-empty::before{ content:none; }                     /* stella non assegnata */

  /* ----- prezzi ----- */
  .prices{ padding-bottom:10px; }
  .prices-card{ overflow:visible; }
  .price-list{ padding-top:12px; }
  .price-item{ display:flex; align-items:center; padding:8px 0; }
  /* il prezzo in evidenza, come la riga di oggi negli orari */
  .price-value{
    padding:3px 12px;
    background-color:color-mix(in srgb, var(--c-accent) 85%, var(--c-white)); color:var(--c-white);   /* 85%: 5,6:1 sul bianco; al 70% sarebbe 3,9:1 */
    border-radius:999px;
    font-weight:500; line-height:1.5rem;
  }
  .price-item:last-child{ padding-bottom:0; }
  .price-name{ line-height:1.5rem; }
  .price-dots{
    flex:1 1 10%; margin-inline:5px;
    border-bottom:2px dotted var(--c-dots);
  }

  /* ----- domande frequenti ----- */
  .faq{ padding-bottom:10px; }
  .faq-list{ padding-top:28px; }
  .faq-item{
    margin-bottom:10px; padding:20px;
    background-color:var(--c-panel);
    border:1px solid var(--c-panel-border); border-radius:var(--radius-small);
    overflow:hidden;
  }
  .faq-item[open]{ background-color:var(--c-white); }
  .faq-question{ position:relative; padding:10px 40px 10px 0; margin-block:-10px; }   /* almeno 44px di altezza cliccabile */
  .faq-title{ font-size:1rem; font-weight:400; line-height:1.5rem; }
  .faq-icon{
    position:absolute; right:-5px; top:50%;
    margin-top:-12.5px;
    color:var(--c-muted); font-size:1.5625rem;
  }
  .faq-icon-close,
  .faq-item[open] .faq-icon-open{ display:none; }
  .faq-item[open] .faq-icon-close{ display:block; }
  .faq-item:last-child{ margin-bottom:0; }                /* sotto l'ultima domanda: i 30px della scheda */
  .faq-answer{ padding-top:20px; }

  /* ----- contatti ----- */
  .contact{ padding-bottom:20px; }
  .contact-card{ margin-bottom:10px; }
  .contact-list{ padding-top:22px; }
  .contact-item{ display:flex; align-items:flex-start; margin-bottom:10px; }
  .contact-item:last-child{ margin-bottom:0; }
  .contact-icon{ flex:0 0 auto; width:30px; height:30px; margin-inline:1px; }
  .contact-text{ padding-left:15px; }
  .contact-text a{ color:var(--c-link); }

  .social-card{ margin-bottom:10px; padding:10px 0; }
  .social-list{ height:32px; line-height:26px; text-align:center; }
  .social-item{ display:inline-block; vertical-align:top; margin-block:-6px; }
  .social-item:first-child{ margin-right:-2px; }
  /* area di tocco 44px; il riquadro colorato resta di 32px */
  .social-link{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:6px;
    color:var(--c-white);
    border-radius:9px;
    background-clip:content-box;
  }
  .social-link .icon{ transition:opacity .3s ease; }
  .social-link:hover .icon{ opacity:.7; }
  .social-facebook{ background-color:var(--c-facebook); }
  .social-instagram{ background-color:var(--c-instagram); }

  /* ----- mappe: caricate solo su richiesta -----
     Google non viene contattato finche' il visitatore non sceglie Accetta
     nel banner o non preme il pulsante Mostra.
     Pulsante e mappa occupano la stessa cella: la mappa, una volta caricata,
     prende il posto del pulsante. L'iframe resta in riga, come nell'originale:
     sotto di lui rimane lo spazio della riga di testo.
     Senza script il pulsante non potrebbe fare nulla: i riquadri non compaiono
     e resta il collegamento "Naviga su Google Maps". */
  .map-card{ padding-top:29px; }
  .map-frame{ display:none; }
  .js .map-frame{ display:grid; }
  .map-frame > *{ grid-area:1 / 1; }
  .map-frame-second{ padding-top:26px; }
  .map-notice{
    position:relative; z-index:1;                          /* sopra al riquadro ancora vuoto della mappa */
    align-self:center; justify-self:center;
    padding:0 20px;
    text-align:center;
  }
  .map-notice[hidden],
  .map-frame[hidden]{ display:none; }                    /* mappa senza indirizzo: lo script la nasconde */
  .map-load{ display:inline-block; }
  .map-note{ margin-top:12px; font-size:.8125rem; line-height:1.5; }
  .map-embed{ display:inline; width:100%; height:300px; border-radius:var(--radius-media); }
  /* finche' la mappa non e' caricata il suo riquadro e' un pannello grigio chiaro */
  .map-line{ background-color:var(--c-panel); border-radius:var(--radius-small); }
  .map-frame.is-loaded .map-line{ background-color:transparent; }
  .map-button{ margin-top:20px; }

  /* ----- popup -----
     Senza script il contenuto resta in pagina, in coda, come una scheda.
     Con lo script diventa una finestra aperta dal pulsante "Scopri di piu'". */
  .popup{
    position:static; display:block;
    width:var(--col); max-width:none; margin:10px auto;
    background-color:var(--c-white);
    border-radius:var(--radius);
  }
  .js .popup{
    position:fixed; display:none;
    width:calc((100vw / var(--z, 1) - 20px) * .9); max-width:none;
    max-height:calc(100% - 20px);
    margin:auto;
    box-shadow:0 3px 10px -1px var(--c-shadow-strong), 0 2px 50px 2px var(--c-shadow-soft);
    overflow:auto;
  }
  .js .popup[open]{ display:block; }
  .popup::backdrop{
    background-color:var(--c-overlay);
    backdrop-filter:saturate(1.8) blur(5px);
  }
  .popup-box{ position:relative; padding:50px 0; }
  .popup-content{ width:85%; margin-inline:auto; }
  .popup-title{
    margin-bottom:30px; padding-bottom:10px;
    font-family:var(--font-display); font-size:1.75rem; font-weight:700; line-height:1.3;
    text-align:center;
  }
  .popup-text{ text-align:justify; hyphens:auto; overflow-wrap:break-word; }
  .popup-text p + p{ padding-top:1em; }
  /* CHIUDI, lo stesso pulsante della foto ingrandita: resta fermo in alto a
     destra mentre il testo del popup scorre (sticky dentro la finestra, che e'
     lei a scorrere). Il margine in basso negativo gli toglie lo spazio nel
     flusso: il contenuto parte dall'alto come se non ci fosse. */
  .popup-close{ display:none; }
  .js .popup-close{
    display:block; position:sticky; top:8px; z-index:1;   /* sopra al testo del popup */
    width:max-content; min-height:32px;
    margin:8px 8px -40px auto;
  }

  /* ----- ingrandimento delle foto della galleria -----
     Finestra a tutto schermo: foto centrata con 40px sopra e sotto, chiusura
     in alto a destra, contatore in basso a destra, frecce ai lati. */
  .lightbox{
    width:100%; height:100%; max-width:none; max-height:none;
    padding-inline:6px;
    background:none;
    overflow:hidden;
  }
  .lightbox[open]{ display:flex; align-items:center; justify-content:center; }
  .lightbox::backdrop{ background-color:var(--c-lightbox); }
  .lightbox-figure{ position:relative; max-width:100%; line-height:0; touch-action:pan-y pinch-zoom; }   /* il trascinamento orizzontale lo gestisce lo script */
  .lightbox-image{
    width:auto; max-height:calc(100vh / var(--z, 1));
    padding-block:40px;
  }
  .lightbox-counter{
    position:absolute; right:0; bottom:18px;
    color:var(--c-muted); font-size:.75rem; line-height:18px;
  }
  .lightbox-close{ position:absolute; top:8px; right:0; min-height:32px; }
  /* segnaposto ingrandito: stesse proporzioni della miniatura, alto quanto la finestra */
  .lightbox-placeholder{
    width:auto; height:min(100vh / var(--z, 1) - 80px, 90vw / var(--z, 1) * var(--h, 1) / var(--w, 1));
    margin-block:40px;
    border-radius:var(--radius-media);
  }
  .lightbox-placeholder[hidden],
  .lightbox-image[hidden]{ display:none; }
  /* frecce: stesso stile delle frecce dei caroselli, agganciate alla foto */
  .lightbox-arrow{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%;
    width:44px; height:44px;
    background-color:var(--c-accent); color:var(--c-white);
    border-radius:50%;
    font-size:1.25rem;
    transform:translateY(-50%);
    box-shadow:var(--shadow-btn);
  }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }

  /* =====================  PAGINE LEGALI  =====================
     Privacy e cookie policy (src/pages/legal/): una scheda bianca come le
     altre, con il testo largo quanto il paragrafo della testata della home
     (tutta la scheda, meno il suo margine interno). Stessa DEROGA allo
     standard §6.9.1 di testata e servizio, scelta del committente: sugli
     schermi larghi le righe superano i 90 caratteri. Testo a sinistra
     (non giustificato), titoli in Lora, sezioni separate da un filetto,
     titolare e hosting in un riquadro, tabella dei cookie in evidenza: sui
     telefoni scorre dentro il suo riquadro, mai la pagina. */
  .legal{ padding:40px 0 10px; }
  .legal-card{ margin-bottom:10px; }
  .legal-body{ overflow-wrap:break-word; }
  .legal-title{
    margin-bottom:10px;
    font-family:var(--font-head); font-size:1.75rem; font-weight:600; line-height:1.4;
  }
  .legal-date{
    padding-bottom:24px;
    border-bottom:1px solid var(--c-line);
    font-size:.875rem;
  }
  .legal-body h2{
    margin:28px 0 12px; padding-top:28px;
    border-top:1px solid var(--c-line);
    font-family:var(--font-head); font-size:1.25rem; font-weight:600; line-height:1.4;
  }
  .legal-date + h2{ border-top:0; padding-top:0; }       /* il filetto c'e' gia' sotto la data */
  .legal-body p + p,
  .legal-body p + ul,
  .legal-body ul + p,
  .legal-body p + .legal-scroll{ margin-top:12px; }
  .legal-body ul{ padding-left:1.25em; list-style:disc; }
  .legal-body li + li{ margin-top:8px; }
  .legal-body a{ color:var(--c-link); text-decoration:underline; }
  /* riquadro per i dati del titolare e dell'hosting */
  .legal-box{
    padding:16px 20px;
    background-color:var(--c-row-alt);
    border:1px solid var(--c-line); border-radius:var(--radius-small);
  }
  .legal-box strong{ font-weight:600; }
  /* tabella dei cookie: riquadro bordato, intestazione su fondo grigio */
  .legal-scroll{
    overflow-x:auto;
    border:1px solid var(--c-line); border-radius:var(--radius-small);
  }
  .legal-table{ width:100%; min-width:560px; border-collapse:collapse; font-size:.875rem; line-height:1.5; }
  .legal-table th,
  .legal-table td{ padding:12px 14px; border-bottom:1px solid var(--c-line); text-align:left; vertical-align:top; }
  .legal-table th{ background-color:var(--c-row-alt); font-weight:600; }
  .legal-table tbody tr:last-child td{ border-bottom:0; }
  .legal-table code{ font-size:.8125rem; }

  /* banner dei cookie sulle pagine legali: in basso e senza fondo oscurato,
     la pagina resta leggibile. Sta sopra alla barra fissa con margine in
     piu', perche' su iPhone la barra di Safari copre il bordo basso della
     finestra (scelta del committente). */
  .consent:not(:modal){
    position:fixed; inset:auto 0 calc(70px + env(safe-area-inset-bottom, 0px)) 0;
    z-index:100;                                           /* sopra alla barra fissa (50) */
    margin-inline:auto;
  }
  /* spazio in fondo alla pagina alto quanto il banner: footer sempre raggiungibile */
  .legal-page ~ .site-footer{ padding-bottom:calc(20px + var(--consent-space, 0px)); }

  /* =====================  MOVIMENTO  =====================
     Solo trasformazioni, opacita' e ritagli: nessuna misura della pagina
     cambia. Niente gira all'infinito. */
  @media screen{

    /* --- testata: ingresso al caricamento, senza script --- */
    .hero-badge{ animation:badge-in .7s var(--ease-spring) both; }
    .hero-badge::after{
      content:""; position:absolute; inset:-7px;
      border-radius:50%;
      background-image:conic-gradient(var(--c-ring) var(--ring-angle), transparent 0);
      mask-image:radial-gradient(closest-side, transparent calc(100% - 5.5px), var(--c-mask) calc(100% - 5px));
      animation:ring-draw 1.4s var(--ease-out) .2s both;
      pointer-events:none;
    }
    /* testo e scheda partono gia' visibili (solo spostati o attenuati): la
       prima schermata non resta mai vuota in attesa dell'animazione */
    .hero-card{ animation:rise-in .5s var(--ease-out) both; }
    .hero-title{ overflow:hidden; }
    .hero-title-line{ animation:line-up .55s var(--ease-out) .1s both; }
    .hero-text{ animation:soft-in .5s var(--ease-out) .15s both; }
    .hero-actions > .btn-wrap{ animation:pop-in .45s var(--ease-spring) .25s both; }
    .hero-actions > .btn-wrap + .btn-wrap{ animation-delay:.33s; }
    .action-bar{ animation:bar-in .5s var(--ease-out) .4s both; }
    /* con lo script, l'ingresso della testata aspetta la scelta sui cookie */
    .js:not(.is-ready) .hero-badge,
    .js:not(.is-ready) .hero-badge::after,
    .js:not(.is-ready) .hero-card,
    .js:not(.is-ready) .hero-title-line,
    .js:not(.is-ready) .hero-text,
    .js:not(.is-ready) .hero-actions > .btn-wrap,
    .js:not(.is-ready) .action-bar{ animation-play-state:paused; }

    @keyframes badge-in{ from{ transform:translate3d(0,-36px,0) scale(.6); } }
    @keyframes ring-draw{
      0%{ --ring-angle:0deg; opacity:1; }
      65%{ --ring-angle:360deg; opacity:1; }
      100%{ --ring-angle:360deg; opacity:0; }
    }
    @keyframes rise-in{ from{ transform:translate3d(0,24px,0); } }
    @keyframes soft-in{ from{ opacity:.25; transform:translate3d(0,14px,0); } }
    @keyframes line-up{ from{ transform:translate3d(0,115%,0); } }
    @keyframes pop-in{ from{ opacity:.3; transform:scale(.86); } }
    @keyframes bar-in{ from{ transform:translate3d(0,100%,0); } }

    /* --- galleria: ogni foto si apre da piccola a grande --- */
    .js .reveal-zoom{ clip-path:inset(16% round 14px); }
    .js .reveal-zoom > *{ transform:scale(1.28); }
    .js .reveal-zoom.is-visible{
      clip-path:inset(0 round 0);
      transition:opacity .5s var(--ease-out), clip-path .9s var(--ease-out);
      transition-delay:calc(var(--i, 0) * 110ms);
    }
    .js .reveal-zoom.is-visible > *{
      transform:none;
      transition:transform 1.2s var(--ease-out);
      transition-delay:calc(var(--i, 0) * 110ms);
    }
    .js .gallery-item:hover > *,
    .js .gallery-item:focus-visible > *{
      transform:scale(1.06);
      transition:transform .6s var(--ease-out);
    }

    /* --- ingrandimento: comandi e fondo in dissolvenza; la foto la muove lo script --- */
    .lightbox[open]::backdrop{ animation:fade-in .35s ease both; }
    .lightbox[open] .lightbox-counter,
    .lightbox[open] .lightbox-close,
    .lightbox[open] .lightbox-arrow{ animation:fade-in-controls .4s ease .25s backwards; }
    .lightbox.is-closing::backdrop{ animation:fade-out .3s ease both; }
    .lightbox.is-closing .lightbox-counter,
    .lightbox.is-closing .lightbox-close,
    .lightbox.is-closing .lightbox-arrow{ animation:fade-out .15s ease both; }
    @keyframes fade-in{ from{ opacity:0; } }
    @keyframes fade-in-controls{ from{ opacity:0; } }
    @keyframes fade-out{ to{ opacity:0; } }

    /* --- popup --- */
    .js .popup[open]{ animation:popup-in .4s var(--ease-out) both; }
    .popup[open]::backdrop{ animation:fade-in .4s ease both; }
    @keyframes popup-in{ from{ opacity:0; transform:translate3d(0,20px,0) scale(.97); } }

    /* --- orari --- */
    .open-pill.is-open .open-pill-dot::after{ animation:dot-pulse 1.5s ease-out 3; }
    .js .day-bar-fill{ transform:scaleX(0); }
    .js .day-bar.is-visible .day-bar-fill{ transform:none; transition:transform 1.1s var(--ease-out) .2s; }
    .js .day-bar-now{ opacity:0; scale:.2; }
    .js .day-bar.is-visible .day-bar-now{
      opacity:1; scale:1;
      transition:opacity .3s ease 1s, scale .5s var(--ease-spring) 1s;
    }
    @keyframes dot-pulse{
      from{ opacity:.6; transform:scale(1); }
      to{ opacity:0; transform:scale(3.2); }
    }

    /* --- recensione: le stelle si accendono una alla volta --- */
    .js .review-card .star::before{ opacity:0; transform:scale(.2) rotate(-40deg); }
    .js .review-card.is-visible .star::before{
      opacity:1; transform:none;
      transition:opacity .3s ease .5s, transform .5s var(--ease-spring) .5s;
    }
    .js .review-card.is-visible .star:nth-child(2)::before{ transition-delay:.63s; }
    .js .review-card.is-visible .star:nth-child(3)::before{ transition-delay:.76s; }
    .js .review-card.is-visible .star:nth-child(4)::before{ transition-delay:.89s; }
    .js .review-card.is-visible .star:nth-child(5)::before{ transition-delay:1.02s; }

    /* --- prezzi: i puntini si disegnano, il prezzo arriva per ultimo --- */
    .js .price-dots{ transform:scaleX(0); transform-origin:0 50%; }
    .js .price-value{ opacity:0; transform:translate3d(12px,0,0); }
    .js .price-list.is-visible .price-dots{
      transform:none;
      transition:transform .7s var(--ease-out);
      transition-delay:calc(var(--i, 0) * 80ms + 400ms);
    }
    .js .price-list.is-visible .price-value{
      opacity:1; transform:none;
      transition:opacity .4s ease, transform .5s var(--ease-spring);
      transition-delay:calc(var(--i, 0) * 80ms + 900ms);
    }

    /* --- scorrimento: il riquadro del video si allarga entrando e il video
           scivola piano al suo interno. Solo CSS: dove il browser non lo
           conosce (Firefox) il riquadro resta fermo, non rotto. --- */
    @supports (animation-timeline:view()){
      .center-frame{
        animation:frame-grow linear both;
        animation-timeline:view();
        animation-range:entry 0% cover 40%;
      }
      .center-media:not(.placeholder){
        animation:video-drift linear both;
        animation-timeline:view();
        animation-range:cover 0% cover 100%;
      }
      @keyframes frame-grow{ from{ transform:scale(.86); } }
      @keyframes video-drift{
        from{ transform:scale(1.16) translate3d(0,-5%,0); }
        to{ transform:scale(1.16) translate3d(0,5%,0); }
      }
    }
  }

  /* =====================  da 480px  ===================== */
  @media (min-width:480px){
    .review-box{ padding-top:var(--pad); }
  }

  /* =====================  da 768px: tablet  ===================== */
  @media (min-width:768px){
    .hero-card{ margin-top:-96px; }
    .hero-title{ margin:0 0 20px; font-size:1.875rem; }

    .service-title{ margin:0 0 20px; font-size:1.875rem; }

    .gallery-grid{ columns:3; }

    .call .btn-wrap{ margin-top:-1px; }

    .staff-card{ flex-basis:calc((var(--track) - 30px) / 2); }
    /* -66px, ma mai oltre il bordo della finestra (margine 5vw + 20px di scheda) */
    .carousel-prev{ left:max(-66px, calc(-5vw / var(--z, 1) - 30px)); }
    .carousel-next{ right:max(-66px, calc(-5vw / var(--z, 1) - 30px)); }

    .center-frame{ padding-top:150px; }
    .center-label{ width:74%; border-radius:0 50px 0 50px; }
    .center-title{ font-size:2.5rem; }

    .hours-row{ padding-inline:15px; }

    .review-box{ display:flex; align-items:flex-start; }
    .review-photo{ flex:0 0 auto; margin:0 30px 0 0; }
    .review-body{ flex:1 1 0; min-width:0; }
    .review-stars{ text-align:left; }


    .contact-item{ margin-bottom:20px; }

    .lightbox{ padding-inline:8px; }
    .lightbox-prev{ left:-60px; }                          /* 16px fuori dal bordo della foto */
    .lightbox-next{ right:-60px; }

    .js .popup{ width:calc((100vw / var(--z, 1) - 20px) * .5); }
  }

  /* =====================  da 981px: desktop  ===================== */
  @media (min-width:981px){
    .hero-badge{ margin-bottom:1.5%; }
    .hero-card{ margin-top:-74px; }
    .hero-title{ margin:0 0 20px; font-size:1.75rem; }

    .service-title{ margin:0 0 20px; font-size:1.75rem; }


    .call{ padding-bottom:19px; }
    .call .btn-wrap{ margin-top:0; }

    .staff-card{ flex-basis:calc((var(--track) - 60px) / 3); }

    .center-label{ width:60%; }
    .center-title{ font-size:3.0625rem; }

    /* .prices-card senza margine sotto: fra le schede resta il passo di 10px di tutte le altre */


    .map-card{ padding-bottom:29px; }

    .js .popup{ width:calc((90vw / var(--z, 1) - 20px) * .5); }
    .popup-box{ padding-block:calc((90vw / var(--z, 1) - 20px) * .04); }
    .popup-title{ margin-bottom:2.75%; }
  }

  /* =====================  da 1350px  =====================
     Soglia del layout per il margine interno del popup. */
  @media (min-width:1350px){
    .popup-box{ padding-block:54px; }
  }

  /* =====================  schermi ampi: corpo del testo  =====================
     16px fino a 1919, 17px da 1920. Interlinea e misure in rem restano
     quelle del layout. */
  @media (min-width:1920px){
    body{ font-size:1.0625rem; }
  }

  /* =====================  oltre i 1920px: la pagina ingrandita  =====================
     Su TV e monitor 4K la pagina e' la stessa dei 1920px, ingrandita in
     proporzione (scelta del committente): la colonna resta al 60% dello
     schermo e tutto cresce insieme, testi, foto, pulsanti, spazi. A scalini
     del 10% (zoom = larghezza / 1920, arrotondato per difetto), senza script:
     nessuno scatto al caricamento. x2 a 3840px (4K), x4 a 7680px (8K).
     --z ripete lo zoom: le misure legate alla finestra (vw, vh) lo dividono,
     perche' dentro una pagina ingrandita il browser le ingrandirebbe due volte.
     E' la regola dello standard §6.9.2. */
  @media (min-width:2112px){ html{ zoom:1.1; --z:1.1; } }
  @media (min-width:2304px){ html{ zoom:1.2; --z:1.2; } }
  @media (min-width:2496px){ html{ zoom:1.3; --z:1.3; } }
  @media (min-width:2688px){ html{ zoom:1.4; --z:1.4; } }
  @media (min-width:2880px){ html{ zoom:1.5; --z:1.5; } }
  @media (min-width:3072px){ html{ zoom:1.6; --z:1.6; } }
  @media (min-width:3264px){ html{ zoom:1.7; --z:1.7; } }
  @media (min-width:3456px){ html{ zoom:1.8; --z:1.8; } }
  @media (min-width:3648px){ html{ zoom:1.9; --z:1.9; } }
  @media (min-width:3840px){ html{ zoom:2.0; --z:2.0; } }
  @media (min-width:4032px){ html{ zoom:2.1; --z:2.1; } }
  @media (min-width:4224px){ html{ zoom:2.2; --z:2.2; } }
  @media (min-width:4416px){ html{ zoom:2.3; --z:2.3; } }
  @media (min-width:4608px){ html{ zoom:2.4; --z:2.4; } }
  @media (min-width:4800px){ html{ zoom:2.5; --z:2.5; } }
  @media (min-width:4992px){ html{ zoom:2.6; --z:2.6; } }
  @media (min-width:5184px){ html{ zoom:2.7; --z:2.7; } }
  @media (min-width:5376px){ html{ zoom:2.8; --z:2.8; } }
  @media (min-width:5568px){ html{ zoom:2.9; --z:2.9; } }
  @media (min-width:5760px){ html{ zoom:3.0; --z:3.0; } }
  @media (min-width:5952px){ html{ zoom:3.1; --z:3.1; } }
  @media (min-width:6144px){ html{ zoom:3.2; --z:3.2; } }
  @media (min-width:6336px){ html{ zoom:3.3; --z:3.3; } }
  @media (min-width:6528px){ html{ zoom:3.4; --z:3.4; } }
  @media (min-width:6720px){ html{ zoom:3.5; --z:3.5; } }
  @media (min-width:6912px){ html{ zoom:3.6; --z:3.6; } }
  @media (min-width:7104px){ html{ zoom:3.7; --z:3.7; } }
  @media (min-width:7296px){ html{ zoom:3.8; --z:3.8; } }
  @media (min-width:7488px){ html{ zoom:3.9; --z:3.9; } }
  @media (min-width:7680px){ html{ zoom:4.0; --z:4.0; } }

  /* =====================  CONSENSO AI COOKIE  =====================
     Banner fatto in casa, senza servizi esterni. Compare in basso, sopra la
     barra fissa; la scelta si salva nel browser. "Preferenze cookie" nel
     footer lo riapre. Senza script non compare (non ci sarebbe nulla da
     bloccare: statistiche e mappe partono solo con lo script). */
  .consent{
    width:min(100% - 20px, 520px); max-width:none;
    margin:auto; padding:0;
    background-color:var(--c-surface);
    border-radius:var(--radius);
    box-shadow:0 12px 40px -8px var(--c-shadow-strong);
  }
  .consent::backdrop{ background-color:rgba(0,0,0,.72); }
  .consent-box{ position:relative; padding:22px 24px; }
  .consent-title{ margin-bottom:8px; padding-right:30px; font-size:1rem; font-weight:600; line-height:1.4; }   /* spazio per la X */
  /* X in alto a destra: chiude senza consenso (vale "Rifiuta" se non si e'
     ancora scelto). Riquadro visibile 30px bianco, area di tocco 44px. */
  .consent-close{
    position:absolute; top:4px; right:4px;
    width:44px; height:44px; padding:7px;
    background:none;
    color:var(--c-text);
    font-size:1.25rem; line-height:1;
    isolation:isolate;                                     /* il cerchio bianco sta sotto alla X */
  }
  .consent-close::before{
    content:""; position:absolute; inset:7px; z-index:-1;
    background-color:var(--c-white);
    border-radius:50%;
    box-shadow:inset 0 0 0 1.5px var(--c-line-strong);
  }
  .consent-text{ margin-bottom:16px; font-size:.8125rem; line-height:1.5; }
  .consent-text a{ color:var(--c-link); text-decoration:underline; }
  .consent-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .consent-actions .btn{ padding-inline:1em; }
  /* Accetta e Rifiuta hanno lo stesso aspetto, bianchi sul fondo del banner:
     nessuno dei due spinge piu' dell'altro (Garante, linee guida cookie) */
  .btn-ghost{ background-color:var(--c-white); color:var(--c-text); box-shadow:inset 0 0 0 1.5px var(--c-line-strong); }
  .footer-link{ color:var(--c-link); font-size:inherit; }
  .footer-link[hidden]{ display:none; }

  /* =====================  ACCESSIBILITA'  =====================
     Pannello piccolo: dimensione del testo, contrasto alto, scala di grigi.
     Le scelte si salvano nel browser. La dimensione agisce su html, che e'
     la base di tutte le misure in rem: e' una scelta del visitatore,
     esattamente cio' che lo standard §6.2 protegge. */
  html{ font-size:calc(100% * var(--a11y-zoom, 1)); }
  html.a11y-contrast{
    --c-primary:#ffffff; --c-secondary:#000000;
    --c-surface:#ffffff; --c-text:#000000; --c-line:#000000; --c-row-alt:#f2f2f2;
    --c-panel:#f2f2f2; --c-panel-border:#000000; --c-muted:#000000; --c-dots:#000000;
    --c-placeholder:#cccccc; --c-placeholder-text:#000000; --c-label:rgba(0,0,0,.85);
    --c-shadow:rgba(0,0,0,.4); --c-whatsapp:#000000; --c-facebook:#000000; --c-instagram:#000000;
    --c-status-open:#000000; --c-status-pause:#000000; --c-status-closed:#000000; --c-star:#000000;
  }
  html.a11y-contrast main{ background-image:none; }
  html.a11y-contrast .card,
  html.a11y-contrast .hero-card{ box-shadow:0 0 0 2px var(--c-text); }
  html.a11y-contrast .lightbox-counter{ color:var(--c-white); }
  html.a11y-gray main,
  html.a11y-gray .site-footer,
  html.a11y-gray dialog{ filter:grayscale(1); }

  .a11y-open{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:18px; padding:10px 18px;
    background-color:var(--c-accent); color:var(--c-white);
    border-radius:999px;
    font-size:.8125rem; font-weight:500; line-height:1;
    box-shadow:0 0 0 0 var(--c-ring);
  }
  .a11y-open[hidden]{ display:none; }
  .a11y-open .icon{ width:1.1em; height:1.1em; }
  .a11y{
    width:min(100% - 20px, 380px); max-width:none;
    margin:auto; padding:0;
    background-color:var(--c-surface);
    border-radius:var(--radius);
    box-shadow:0 12px 40px -8px var(--c-shadow-strong);
  }
  .a11y::backdrop{ background-color:var(--c-overlay); }
  .a11y-box{ position:relative; padding:24px; }
  .a11y-close{ position:absolute; top:12px; right:12px; }
  .a11y-title{ margin-bottom:18px; font-size:1.125rem; font-weight:600; line-height:1.4; }
  .a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--c-line); }
  .a11y-label{ font-size:.9375rem; }
  .a11y-controls{ display:flex; align-items:center; gap:10px; }
  .a11y-step{ width:44px; min-height:44px; padding-inline:0; font-size:1rem; }
  .a11y-step::before{ content:none; }
  .a11y-value{ min-width:3.5em; text-align:center; font-size:.875rem; font-weight:500; }
  .a11y-switch{ cursor:pointer; }
  .a11y-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
  .a11y-knob{
    position:relative; flex:0 0 auto; width:44px; height:24px;
    background-color:var(--c-line); border-radius:999px;
    transition:background-color .25s;
  }
  .a11y-knob::after{
    content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
    background-color:var(--c-white); border-radius:50%;
    transition:transform .25s var(--ease-out);
  }
  .a11y-switch input:checked + .a11y-knob{ background-color:var(--c-accent); }
  .a11y-switch input:checked + .a11y-knob::after{ transform:translateX(20px); }
  .a11y-switch input:focus-visible + .a11y-knob{ outline:2px solid var(--c-focus); outline-offset:2px; }
  .a11y-reset{ display:block; width:100%; margin-top:18px; }

  @media screen{
    /* il pulsante Accessibilita' pulsa piano (scelta del committente) */
    .a11y-open{ animation:a11y-pulse 2.4s ease-out infinite; }
    @keyframes a11y-pulse{
      0%{ box-shadow:0 0 0 0 var(--c-ring); }
      70%{ box-shadow:0 0 0 12px transparent; }
      100%{ box-shadow:0 0 0 0 transparent; }
    }
    .consent[open]{ animation:popup-in .4s var(--ease-out) both; }
    .consent[open]::backdrop{ animation:fade-in .4s ease both; }
    .a11y[open]{ animation:popup-in .4s var(--ease-out) both; }
    .a11y[open]::backdrop{ animation:fade-in .4s ease both; }
  }

  /* =====================  STAMPA  =====================
     Gli stati nascosti delle comparse valgono solo a schermo (vedi le regole
     "screen and ..."): su carta tutto e' visibile. Qui si tolgono le parti che
     su carta non servono e si srotola cio' che a schermo scorre. */
  @media print{
    .action-bar,
    .consent,
    .a11y,
    .a11y-open,
    .js-consent-open,
    .js .carousel-arrow,
    .js .popup-close,
    .js .map-frame,
    .day-bar,
    .skip-link{ display:none; }
    /* il popup si stampa come una scheda in coda alla pagina */
    .js .popup{
      position:static; display:block;
      width:var(--col); max-height:none; margin:10px auto;
      box-shadow:none; overflow:visible;
    }
    .carousel-track{ flex-wrap:wrap; overflow:visible; }
    .card,
    .faq-item,
    .staff-card{ break-inside:avoid; }
  }
}