/* =========================================================
   Toelettatura Vicino a Me — foglio di stile
   Palette: acqua della vasca, rosa fiocchetto, schiuma, miele
   Firma: il voto si legge in bolle di sapone
   ========================================================= */

:root {
  --acqua: #0f6b72;
  --acqua-scuro: #073e44;
  --acqua-chiara: #a9dcdc;
  --schiuma: #eef6f5;
  --cipria: #f4b3c2;
  --cipria-tenue: #fde7ec;
  --miele: #e0952c;
  --inchiostro: #1b2430;
  --grigio: #64727f;
  --carta: #ffffff;
  --bordo: #dfe9e8;

  --raggio: 18px;
  --raggio-piccolo: 10px;
  --ombra: 0 10px 30px -18px rgba(7, 62, 68, .5);
  --ombra-alta: 0 22px 50px -28px rgba(7, 62, 68, .65);

  --display: "Fraunces", Georgia, serif;
  --testo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --utile: "DM Mono", ui-monospace, "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--schiuma);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--acqua); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acqua-scuro); }

:focus-visible {
  outline: 3px solid var(--miele);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.25rem); }
h3 { font-size: 1.25rem; }

.contenitore { width: min(1180px, 100% - 2.4rem); margin-inline: auto; }
.stretto { width: min(760px, 100% - 2.4rem); margin-inline: auto; }

.etichetta {
  font-family: var(--utile);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acqua);
}

.salta {
  position: absolute; left: -9999px;
  background: var(--inchiostro); color: #fff; padding: .7rem 1rem; z-index: 99;
}
.salta:focus { left: 1rem; top: 1rem; }

/* ---------------- Testata ---------------- */

.testata {
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  position: sticky; top: 0; z-index: 40;
}
.testata__riga {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 0;
  justify-content: space-between;
}
.marchio { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.marchio__segno {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50% 50% 46% 54% / 54% 46% 50% 50%;
  background: radial-gradient(circle at 32% 30%, #fff 0 12%, var(--acqua-chiara) 13%, var(--acqua) 78%);
  box-shadow: inset -3px -4px 8px rgba(7, 62, 68, .35);
  position: relative;
}
.marchio__segno::after {
  content: ""; position: absolute; right: -5px; bottom: -3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 16%, var(--cipria) 17%, #e58ba0 100%);
}
.marchio__nome { font-family: var(--display); font-size: 1.12rem; font-weight: 600; line-height: 1.1; }
.marchio__nome span { display: block; font-family: var(--utile); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grigio); }

.menu { display: flex; align-items: center; gap: 1.4rem; }
.menu a { font-size: .95rem; text-decoration: none; color: var(--inchiostro); font-weight: 500; }
.menu a:hover { color: var(--acqua); }
.menu__apri { display: none; }

@media (max-width: 820px) {
  .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--carta); flex-direction: column; align-items: flex-start;
    gap: 0; padding: .5rem 1.2rem 1.2rem; border-bottom: 1px solid var(--bordo);
    box-shadow: var(--ombra);
  }
  .menu.aperto { display: flex; }
  .menu a { padding: .7rem 0; width: 100%; border-bottom: 1px solid var(--schiuma); }
  .menu__apri {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--schiuma); border: 1px solid var(--bordo); color: var(--inchiostro);
    border-radius: 999px; padding: .5rem .9rem; font: 500 .9rem var(--testo); cursor: pointer;
  }
}

/* ---------------- Bottoni ---------------- */

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--acqua); color: #fff; border: 0;
  padding: .8rem 1.35rem; border-radius: 999px;
  font: 600 .98rem var(--testo); cursor: pointer; text-decoration: none;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.bottone:hover { background: var(--acqua-scuro); color: #fff; transform: translateY(-1px); box-shadow: var(--ombra); }
.bottone--cipria { background: var(--cipria); color: #59202f; }
.bottone--cipria:hover { background: #eb9db0; color: #59202f; }
.bottone--vuoto { background: transparent; color: var(--acqua); border: 1.5px solid var(--acqua); }
.bottone--vuoto:hover { background: var(--acqua); color: #fff; }
.bottone--piccolo { padding: .5rem 1rem; font-size: .88rem; }

/* ---------------- Firma: bolle di sapone ---------------- */

.bolle { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.bolla {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--acqua-chiara);
  background: transparent;
}
.bolla--piena {
  border-color: transparent;
  background: radial-gradient(circle at 33% 28%, #fff 0 18%, var(--acqua-chiara) 19%, var(--acqua) 100%);
}
.voto-numero { font-family: var(--utile); font-size: .9rem; color: var(--acqua-scuro); }

/* Divisore a festone: il bordo di schiuma */
.festone {
  height: 22px;
  background:
    radial-gradient(circle at 11px 0, transparent 0 11px, var(--carta) 12px) repeat-x;
  background-size: 22px 22px;
}
.festone--schiuma { background-image: radial-gradient(circle at 11px 0, transparent 0 11px, var(--schiuma) 12px); }

/* ---------------- Copertina ---------------- */

.copertina {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, var(--acqua-scuro) 0%, var(--acqua) 58%, #158089 100%);
  color: #fff;
  padding: clamp(2.6rem, 7vw, 5rem) 0 0;
}
.copertina h1 { color: #fff; max-width: 16ch; }
.copertina h1 em { font-style: normal; color: var(--cipria); }
.copertina__testo { max-width: 52ch; color: #dff1f0; font-size: 1.05rem; }
.copertina__griglia { display: grid; gap: 2rem; align-items: center; }
.copertina .etichetta { color: var(--acqua-chiara); }
.copertina__sotto { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.8rem; padding-bottom: 2.6rem; }
.dato { font-family: var(--utile); font-size: .82rem; color: #cfe9e8; }
.dato b { display: block; font-family: var(--display); font-size: 1.6rem; color: #fff; font-weight: 600; }

.bolle-sfondo { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.bolle-sfondo span {
  position: absolute; bottom: -60px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 14%, rgba(255,255,255,.18) 15%, rgba(255,255,255,.05) 70%);
  border: 1px solid rgba(255,255,255,.25);
  animation: sale 16s linear infinite;
}
@keyframes sale {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translateY(-115vh) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bolle-sfondo span { animation: none; opacity: .3; }
  html { scroll-behavior: auto; }
}

/* Barra di ricerca */
.cerca-barra {
  display: flex; gap: .6rem; flex-wrap: wrap;
  background: var(--carta); padding: .55rem; border-radius: 999px;
  box-shadow: var(--ombra-alta); max-width: 620px; margin-top: 1.6rem;
}
.cerca-barra input[type="search"], .cerca-barra input[type="text"] {
  flex: 1 1 220px; border: 0; background: transparent; padding: .65rem 1rem;
  font: 400 1rem var(--testo); color: var(--inchiostro); min-width: 0;
}
.cerca-barra input:focus { outline: none; }
.cerca-barra .bottone { flex: 0 0 auto; }
.suggerimenti {
  position: relative; width: 100%;
}
.suggerimenti__lista {
  position: absolute; z-index: 30; top: calc(100% + .5rem); left: 0; right: 0;
  background: var(--carta); border-radius: var(--raggio); box-shadow: var(--ombra-alta);
  padding: .4rem; list-style: none; margin: 0; max-height: 300px; overflow: auto;
}
.suggerimenti__lista li a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem .8rem; border-radius: var(--raggio-piccolo); text-decoration: none; color: var(--inchiostro);
}
.suggerimenti__lista li a:hover, .suggerimenti__lista li a:focus { background: var(--schiuma); }
.suggerimenti__lista small { color: var(--grigio); font-family: var(--utile); font-size: .75rem; }

/* ---------------- Sezioni ---------------- */

.sezione { padding: clamp(2.4rem, 6vw, 4.2rem) 0; }
.sezione--carta { background: var(--carta); }
.sezione__intro { max-width: 62ch; margin-bottom: 2rem; }
.sezione__intro p { color: var(--grigio); }

.griglia { display: grid; gap: 1.1rem; }
.griglia--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.griglia--3 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.griglia--4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* Riquadro regione */
.regione-card {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.3rem; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .45rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative; overflow: hidden;
}
.regione-card::after {
  content: ""; position: absolute; right: -28px; top: -28px; width: 84px; height: 84px;
  border-radius: 50%; background: var(--cipria-tenue); transition: background .2s ease;
}
.regione-card:hover { transform: translateY(-3px); box-shadow: var(--ombra); border-color: var(--acqua-chiara); }
.regione-card:hover::after { background: var(--acqua-chiara); }
.regione-card h3 { margin: 0; position: relative; }
.regione-card p { margin: 0; color: var(--grigio); font-size: .92rem; position: relative; }

/* Scheda toelettatura */
.toel {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .6rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.toel:hover { transform: translateY(-2px); box-shadow: var(--ombra); }
.toel__alto { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.toel h3 { margin: 0; font-size: 1.14rem; }
.toel h3 a { text-decoration: none; color: inherit; }
.toel h3 a:hover { color: var(--acqua); }
.toel__riga { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.toel__indirizzo { color: var(--grigio); font-size: .92rem; margin: 0; }
.toel__descrizione { margin: 0; font-size: .95rem; color: #3d4a57; }
.toel__piede { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--bordo); }
.telefono { font-family: var(--utile); font-size: .92rem; color: var(--acqua-scuro); text-decoration: none; }

.pastiglia {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--schiuma); color: var(--acqua-scuro);
  border-radius: 999px; padding: .22rem .7rem;
  font: 500 .78rem var(--testo);
}
.pastiglia--cipria { background: var(--cipria-tenue); color: #8c3a4e; }
.pastiglia--aperto { background: #e4f3e6; color: #206b34; }
.pastiglia--aperto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2e9c4c; }
.pastiglia--chiuso { background: #f3e5e5; color: #8e3b3b; }
.pastiglia--miele { background: #fbedd6; color: #8a5a12; }
.pastiglia--bozza { background: #efe6f7; color: #5d3d86; }

/* Briciole */
.briciole { font-size: .85rem; color: var(--grigio); padding: 1rem 0 0; }
.briciole a { color: var(--grigio); text-decoration: none; }
.briciole a:hover { color: var(--acqua); text-decoration: underline; }
.briciole span { margin: 0 .35rem; opacity: .6; }

/* Filtri della pagina città */
.filtri { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.filtro {
  border: 1px solid var(--bordo); background: var(--carta); color: var(--inchiostro);
  border-radius: 999px; padding: .45rem 1rem; font: 500 .88rem var(--testo); cursor: pointer;
}
.filtro:hover { border-color: var(--acqua); }
.filtro[aria-pressed="true"] { background: var(--acqua); border-color: var(--acqua); color: #fff; }

/* ---------------- Pagina scheda ---------------- */

.scheda-testa { background: var(--carta); border-bottom: 1px solid var(--bordo); padding-bottom: 1.8rem; }
.scheda-testa h1 { margin-bottom: .3rem; }
.scheda-testa .sotto { color: var(--grigio); margin: 0 0 1rem; }
.scheda-azioni { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }

.doppia { display: grid; gap: 1.6rem; align-items: start; padding: 2rem 0 3rem; }
@media (min-width: 900px) { .doppia { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 2.4rem; } }

.blocco {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 1.4rem 1.5rem; margin-bottom: 1.2rem;
}
.blocco h2 { font-size: 1.35rem; }
.blocco h3 { margin-top: 1.4rem; }
.blocco p:last-child { margin-bottom: 0; }

.dati-lista { list-style: none; margin: 0; padding: 0; }
.dati-lista li { display: flex; gap: .8rem; padding: .55rem 0; border-bottom: 1px dashed var(--bordo); font-size: .95rem; }
.dati-lista li:last-child { border-bottom: 0; }
.dati-lista b { flex: 0 0 108px; font-weight: 600; color: var(--grigio); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; font-family: var(--utile); }

.tabella-orari { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabella-orari th, .tabella-orari td { text-align: left; padding: .5rem .2rem; border-bottom: 1px dashed var(--bordo); }
.tabella-orari th { font-weight: 500; color: var(--grigio); }
.tabella-orari tr.oggi th, .tabella-orari tr.oggi td { color: var(--acqua-scuro); font-weight: 700; }
.tabella-orari td { font-family: var(--utile); font-size: .88rem; text-align: right; }

.elenco-segni { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }

.mappa { border: 0; width: 100%; height: 300px; border-radius: var(--raggio); display: block; }

.avviso {
  background: var(--cipria-tenue); border-left: 4px solid var(--cipria);
  padding: 1rem 1.2rem; border-radius: var(--raggio-piccolo); font-size: .95rem;
}
.avviso--verde { background: #e6f4ee; border-left-color: #2e9c6c; }

/* Moduli pubblici */
.campo { display: block; margin-bottom: .9rem; }
.campo span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: .7rem .85rem; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo);
  font: 400 1rem var(--testo); background: var(--schiuma); color: var(--inchiostro);
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 2px solid var(--acqua); background: #fff; }
.campo textarea { min-height: 130px; resize: vertical; }
.trappola { position: absolute; left: -9999px; }

/* Paginazione */
.pagine-nav { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.pagine-nav a, .pagine-nav span {
  min-width: 40px; text-align: center; padding: .5rem .7rem; border-radius: var(--raggio-piccolo);
  background: var(--carta); border: 1px solid var(--bordo); text-decoration: none; color: var(--inchiostro); font-size: .92rem;
}
.pagine-nav .attuale { background: var(--acqua); border-color: var(--acqua); color: #fff; font-weight: 600; }

/* Testo lungo */
.testo-lungo p { margin: 0 0 1rem; }
.testo-lungo ul { padding-left: 1.2rem; }
.testo-lungo li { margin-bottom: .4rem; }

/* Domande frequenti */
.faq details {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: .9rem 1.2rem; margin-bottom: .7rem;
}
.faq summary { cursor: pointer; font-weight: 600; font-family: var(--display); font-size: 1.05rem; }
.faq summary::marker { color: var(--cipria); }
.faq p { margin: .7rem 0 0; color: #3d4a57; }

/* ---------------- Piede ---------------- */

.piede { background: var(--inchiostro); color: #c9d3dc; padding: 3rem 0 2rem; margin-top: 2rem; }
.piede a { color: #fff; text-decoration: none; }
.piede a:hover { color: var(--cipria); text-decoration: underline; }
.piede__griglia { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.piede h4 { font-family: var(--display); color: #fff; font-size: 1.05rem; margin-bottom: .8rem; }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin-bottom: .45rem; font-size: .93rem; }
.piede__nota { border-top: 1px solid #2f3947; margin-top: 2rem; padding-top: 1.2rem; font-size: .85rem; color: #8f9aa6; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Colonne di elenchi lunghi */
.colonne { columns: 2; column-gap: 2rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .colonne { columns: 3; } }
.colonne li { break-inside: avoid; margin-bottom: .45rem; font-size: .95rem; }

@media (min-width: 900px) {
  .copertina__griglia { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}

/* I riquadri chiari dentro la copertina scura tengono il testo scuro */
.copertina .blocco { color: var(--inchiostro); }
.copertina .blocco h2, .copertina .blocco h3 { color: var(--inchiostro); }
.copertina .blocco .tabella-orari td { color: var(--acqua-scuro); }
.copertina .blocco .etichetta { color: var(--acqua); }