/* ============================================================================
   InfoComuni — SCHEDA-COMUNE · "Civic Editorial" REDESIGN
   ----------------------------------------------------------------------------
   Strada (A): redesign ad altissima specificita che neutralizza gli stili
   legacy (ic-kiosk-skin / comune-restyle / force-light) SENZA toccare il
   markup ne il JS dinamico (calendario, flipbook, picker, leaflet, tts).
   Carica DOPO tutti gli altri CSS. Le regole replicano il prefisso piu forte
   del legacy ( :root.force-light body section.comune-hero.comune-hero--map )
   e aggiungono una classe ripetuta come tie-breaker, cosi vincono sempre.

   Token brand (dalla home / prototipo "Civic Editorial"):
     navy   #09223A / #0B2340 / #14466B
     oro    #5BC4FF (bright su navy) · #3A8FCC (accent) · #1A72B8 (testo su chiaro)
     paper  #F4F6F9 / #E9EEF4   ·  ink #0F1A30 / #334155 / #5A6B82
     font   Oswald (display) · Titillium Web (body) · JetBrains Mono (label/kicker)
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --cr-navy-900:#09223A; --cr-navy-800:#0B2340; --cr-navy-700:#0E2F4A;
  --cr-navy-600:#14466B; --cr-navy-500:#2A6CA6; --cr-navy-400:#5E93C4;
  --cr-gold-600:#1A72B8; --cr-gold-500:#3A8FCC; --cr-gold-400:#5BC4FF; --cr-gold-100:#E8F3FF;
  --cr-paper:#F3F9FF; --cr-paper-2:#E5F2FF; --cr-bg:#FFFFFF;
  --cr-ink:#0F1A30; --cr-ink-2:#334155; --cr-ink-3:#5A6B82;
  --cr-line:#E2E8F0; --cr-line-cool:#D3DCE6;
  --cr-display:'Oswald','Arial Narrow',system-ui,sans-serif;
  --cr-body:'Titillium Web',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cr-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --cr-r-md:10px; --cr-r-lg:16px; --cr-r-xl:22px; --cr-r-pill:999px;
  --cr-sh-sm:0 1px 2px rgba(9,34,58,.07);
  --cr-sh-md:0 6px 20px rgba(9,34,58,.10);
  --cr-sh-lg:0 18px 44px rgba(9,34,58,.16);
  --cr-focus:0 0 0 3px rgba(58,143,204,.6);
  --cr-maxw:1180px;
}

/* ---- abbreviazioni di prefisso (usate ovunque) -----------------------------
   PFX-HERO  = selettore hero che batte il force-light legacy
   PFX-BODY  = selettore generico forte
----------------------------------------------------------------------------- */

/* ============================================================================
   0. RITMO TIPOGRAFICO GLOBALE DELLA SCHEDA  (problema 1 + 3)
   Corpo Titillium leggibile, niente grigi slavati, ink AA.
   ============================================================================ */
html body main#main,
html body main#main p,
html body main#main li,
html body main#main td,
html body main#main .comune-panel,
html body main#main .comune-section,
html body main#main .ic-tourism{
  font-family:var(--cr-body)!important;
  color:var(--cr-ink-2)!important;
}
html body main#main h1, html body main#main h2,
html body main#main h3, html body main#main h4{
  font-family:var(--cr-display)!important;
}

/* ============================================================================
   1. HERO — overlay NAVY trasparente (NON grigio)  (problema 5)
   Replica esatta del prefisso force-light + classe doppia come tie-breaker.
   ============================================================================ */
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__overlay,
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__overlay{
  position:absolute!important; inset:0!important; z-index:1!important; pointer-events:none!important;
  background:
    radial-gradient(125% 95% at 22% 28%, rgba(9,34,58,.66) 0%, rgba(9,34,58,.34) 46%, rgba(11,35,64,.06) 82%),
    linear-gradient(180deg, rgba(9,34,58,.38) 0%, rgba(9,34,58,.18) 42%, rgba(7,18,32,.52) 100%)!important;
}
/* la mappa di sfondo: tinta navy (toglie il grigio) invece del grayscale puro */
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__map,
:root.force-light body section.comune-hero.comune-hero--map .leaflet-container,
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__map,
html body section.comune-hero.comune-hero--map.comune-hero--map .leaflet-container{
  background:var(--cr-navy-900)!important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__map .leaflet-tile-pane,
:root.force-light body section.comune-hero.comune-hero--map .leaflet-tile,
html body section.comune-hero.comune-hero--map.comune-hero--map .leaflet-tile{
  filter:saturate(1.35) brightness(.85) hue-rotate(182deg) contrast(1.08)!important;
  -webkit-filter:saturate(1.35) brightness(.85) hue-rotate(182deg) contrast(1.08)!important;
  opacity:.95!important;
}

/* hero: piu respiro verticale + righello oro alla base */
:root.force-light body section.comune-hero.comune-hero--map,
html body section.comune-hero.comune-hero--map.comune-hero--map{
  padding:0!important; background:var(--cr-navy-900)!important; position:relative!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__content{
  position:relative!important; z-index:3!important;
  max-width:var(--cr-maxw)!important; margin:0 auto!important;
  padding:62px 28px 70px!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map::after{
  content:''!important; position:absolute!important; left:0; right:0; bottom:0;
  height:4px!important; z-index:4!important;
  background:linear-gradient(90deg,var(--cr-gold-400),var(--cr-gold-600))!important;
}

/* breadcrumb hero: mono, leggibile */
html body section.comune-hero.comune-hero--map.comune-hero--map .breadcrumb,
html body section.comune-hero.comune-hero--map.comune-hero--map .breadcrumb a,
html body section.comune-hero.comune-hero--map.comune-hero--map .breadcrumb span{
  font-family:var(--cr-mono)!important; font-size:12.5px!important; letter-spacing:.08em!important;
  color:#cdd9e8!important; text-transform:none!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .breadcrumb a{ color:var(--cr-gold-400)!important; }

/* badge provincia */
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__badges{
  display:flex!important; align-items:center!important; gap:12px!important; margin:18px 0 6px!important; flex-wrap:wrap!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__badge{
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:600!important;
  letter-spacing:.12em!important; text-transform:uppercase!important;
  color:#dbe6f3!important; background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.18)!important; border-radius:var(--cr-r-pill)!important;
  padding:6px 13px!important; backdrop-filter:blur(6px)!important; -webkit-backdrop-filter:blur(6px)!important;
}

/* titolo comune: display Oswald grande */
:root.force-light body section.comune-hero.comune-hero--map h1,
html body section.comune-hero.comune-hero--map.comune-hero--map #comune-title,
html body section.comune-hero.comune-hero--map.comune-hero--map h1{
  font-family:var(--cr-display)!important; font-weight:700!important;
  font-size:clamp(46px,6.4vw,76px)!important; line-height:1.0!important; letter-spacing:-.015em!important;
  color:#fff!important; margin:6px 0 0!important; text-shadow:0 2px 18px rgba(0,0,0,.35)!important; text-wrap:balance!important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__subtitle,
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__subtitle{
  font-family:var(--cr-body)!important; font-size:18px!important; line-height:1.55!important;
  color:#e7eef6!important; max-width:54ch!important; margin:14px 0 28px!important; text-shadow:0 1px 10px rgba(0,0,0,.3)!important;
}

/* meta-grid hero: card glass navy, label oro, valore mono */
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta{
  display:grid!important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
  gap:12px!important; max-width:760px!important; margin:0 0 8px!important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-item,
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta-item{
  background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.16)!important;
  border-radius:var(--cr-r-md)!important; padding:14px 16px!important;
  backdrop-filter:blur(12px) saturate(140%)!important; -webkit-backdrop-filter:blur(12px) saturate(140%)!important;
  transition:border-color .2s, background .2s!important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-item:hover,
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta-item:hover{
  background:rgba(255,255,255,.1)!important; border-color:rgba(91,196,255,.42)!important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-label,
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta-label{
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:600!important;
  letter-spacing:.14em!important; text-transform:uppercase!important;
  color:var(--cr-gold-400)!important; opacity:1!important; margin:0 0 6px!important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-value,
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-value a,
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta-value,
html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__meta-value a{
  font-family:var(--cr-mono)!important; font-size:15px!important; font-weight:600!important;
  font-variant-numeric:tabular-nums!important; color:#fff!important;
}

/* ---- HERO-V2 (ricostruito a runtime da ic-fixes.js per Brindisi) ----------
   ic-fixes.js nasconde .comune-hero__meta e crea .hero-v2 + .hv2-box.
   Le sue regole sono in un <style> con selettori a bassa specificita:
   qui le sovrascrivo con html body section.comune-hero--map ... (vince sempre).
----------------------------------------------------------------------------- */
html body section.comune-hero.comune-hero--map.comune-hero--map .hero-v2{
  position:relative!important; z-index:5!important; padding:0!important; margin-top:8px!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .hero-v2-sub{
  font-family:var(--cr-body)!important; font-size:18px!important; line-height:1.55!important;
  color:#e7eef6!important; margin-top:14px!important; text-shadow:0 1px 10px rgba(0,0,0,.3)!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .hero-v2-sub .cap-pill{
  display:inline-block!important; font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:600!important;
  letter-spacing:.1em!important; color:var(--cr-navy-900)!important;
  background:var(--cr-gold-400)!important; border-radius:var(--cr-r-pill)!important; padding:3px 12px!important; margin-right:10px!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .hero-v2-boxes{
  display:grid!important; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
  gap:12px!important; margin-top:24px!important; max-width:880px!important; align-items:stretch!important;
}
@media(max-width:900px){ html body section.comune-hero.comune-hero--map.comune-hero--map .hero-v2-boxes{ grid-template-columns:1fr 1fr!important; } }
@media(max-width:500px){ html body section.comune-hero.comune-hero--map.comune-hero--map .hero-v2-boxes{ grid-template-columns:1fr!important; } }
html body section.comune-hero.comune-hero--map.comune-hero--map .hv2-box{
  background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.16)!important;
  border-radius:var(--cr-r-md)!important; padding:16px 18px!important; min-height:0!important;
  backdrop-filter:blur(12px) saturate(140%)!important; -webkit-backdrop-filter:blur(12px) saturate(140%)!important;
  display:flex!important; flex-direction:column!important; justify-content:space-between!important; gap:12px!important;
  transition:border-color .2s, background .2s, transform .2s!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .hv2-box:hover{
  background:rgba(255,255,255,.1)!important; border-color:rgba(91,196,255,.42)!important; transform:translateY(-2px)!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .hv2-box__label{
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:600!important;
  letter-spacing:.14em!important; text-transform:uppercase!important; color:var(--cr-gold-400)!important;
  margin-bottom:0!important; display:flex!important; align-items:center!important; gap:8px!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .hv2-box__label svg{
  width:14px!important; height:14px!important; opacity:1!important; color:var(--cr-gold-400)!important; flex:none!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .hv2-box__value,
html body section.comune-hero.comune-hero--map.comune-hero--map .hv2-box__value a{
  font-family:var(--cr-mono)!important; font-weight:600!important; font-size:14.5px!important;
  font-variant-numeric:tabular-nums!important; color:#fff!important; line-height:1.3!important; word-break:break-word!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .hv2-box__action{
  display:inline-flex!important; align-items:center!important; gap:5px!important;
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:700!important; letter-spacing:.04em!important;
  color:var(--cr-navy-900)!important; text-decoration:none!important; white-space:nowrap!important; flex-shrink:0!important;
  padding:6px 13px!important; border-radius:var(--cr-r-pill)!important; border:0!important;
  background:linear-gradient(180deg,#7BCEFF,#3BAFF0 60%,#1A8AD4)!important;
  box-shadow:0 3px 10px rgba(58,143,204,.32)!important; transition:transform .18s, filter .18s, box-shadow .18s!important;
}
html body section.comune-hero.comune-hero--map.comune-hero--map .hv2-box__action:hover{
  filter:brightness(1.05)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; transform:translateY(-1px)!important;
  box-shadow:0 6px 16px rgba(58,143,204,.45)!important;
}

/* ============================================================================
   2. BOTTONI HERO (Telefono / PEC / Sito) — eleganti, brand  (problema 4)
   Primario oro pieno (Telefono), gli altri ghost-glass. Niente "tasti banali".
   ============================================================================ */
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-buttons,
html body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons{
  display:flex!important; flex-wrap:wrap!important; gap:10px!important; margin-top:22px!important;
}
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-btn,
html body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-btn{
  display:inline-flex!important; align-items:center!important; gap:9px!important;
  font-family:var(--cr-body)!important; font-size:14.5px!important; font-weight:700!important;
  letter-spacing:.01em!important; text-transform:none!important; text-decoration:none!important;
  padding:12px 20px!important; border-radius:var(--cr-r-pill)!important;
  background:rgba(255,255,255,.07)!important; color:#fff!important;
  border:1.5px solid rgba(255,255,255,.26)!important;
  backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important;
  transition:transform .18s, background .18s, border-color .18s, color .18s, box-shadow .18s!important;
}
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-btn svg,
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-btn .ic-icon,
html body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-btn svg{
  width:17px!important; height:17px!important; color:var(--cr-gold-400)!important; stroke:var(--cr-gold-400)!important;
}
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-btn:hover,
html body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-btn:hover{
  background:rgba(255,255,255,.14)!important; border-color:rgba(91,196,255,.6)!important;
  color:#fff!important; transform:translateY(-2px)!important; box-shadow:0 8px 22px rgba(0,0,0,.28)!important;
}
/* PRIMARIO oro pieno = Telefono */
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-btn.ms-btn-phone,
html body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-btn.ms-btn-phone{
  background:linear-gradient(180deg,#7BCEFF,#3BAFF0 60%,#1A8AD4)!important;
  color:#fff!important; -webkit-text-fill-color:#fff!important; border-color:transparent!important;
  box-shadow:0 6px 18px rgba(58,143,204,.4)!important;
}
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-btn.ms-btn-phone svg,
html body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-btn.ms-btn-phone svg{
  color:#fff!important; -webkit-text-fill-color:#fff!important; stroke:#fff!important;
}
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-btn.ms-btn-phone:hover,
html body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-btn.ms-btn-phone:hover{
  filter:brightness(1.04)!important; color:var(--cr-navy-900)!important;
  box-shadow:0 10px 26px rgba(58,143,204,.5)!important;
}

/* ============================================================================
   3. SECONDO MENU (tab) — PILL, gia in brand; rifinitura ritmo/sticky
   ============================================================================ */
html body .comune-tabs.comune-tabs{
  background:var(--cr-paper)!important; border-bottom:1px solid var(--cr-line)!important;
  box-shadow:0 6px 18px rgba(11,35,64,.07)!important;
}
html body .comune-tabs .comune-tabs__scroll{
  max-width:var(--cr-maxw)!important; margin:0 auto!important; gap:9px!important; padding:14px 28px!important;
}
html body .comune-tabs .comune-tabs__btn{
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:600!important;
  letter-spacing:.07em!important; text-transform:uppercase!important;
  border-radius:var(--cr-r-pill)!important; padding:9px 17px!important;
  border:1px solid var(--cr-line)!important; background:#fff!important; color:var(--cr-navy-800)!important;
  box-shadow:var(--cr-sh-sm)!important; transition:all .18s!important;
}
html body .comune-tabs .comune-tabs__btn:hover{
  border-color:var(--cr-gold-500)!important; box-shadow:0 4px 12px rgba(9,34,58,.1)!important; transform:translateY(-1px)!important;
}
html body .comune-tabs .comune-tabs__btn.is-active,
html body .comune-tabs .comune-tabs__btn[aria-selected="true"]{
  background:var(--cr-navy-800)!important; color:#fff!important; border-color:var(--cr-navy-800)!important;
  box-shadow:0 6px 16px rgba(9,34,58,.24)!important;
}

/* ============================================================================
   4. SUPERFICI SEZIONE — paper/navy coerenti, NO grigi  (problema 5 + 6)
   Ritmo verticale generoso e regolare.
   ============================================================================ */
/* I pannelli vivono dentro .container.comune-panels (gia centrato/padded):
   qui regolo solo il RITMO verticale, non ri-vincolo la larghezza. */
html body main#main .comune-panel,
html body main#main [role="tabpanel"].comune-panel{
  background:transparent!important; padding:56px 0 64px!important;
}
/* sfondo della "tela" sotto le sezioni: paper caldo (no grigio piatto),
   cosi le card bianche/paper respirano in stile editoriale */
html body main#main{ background:var(--cr-paper)!important; }
html body main#main .comune-panels{ background:transparent!important; padding-top:8px!important; padding-bottom:8px!important; }

/* titolo di pannello (h2 diretto del tab) = display grande + KICKER editoriale
   (sostituisce il trattino 48x1px: niente piu tacche)  (problema 2) */
html body main#main .comune-panel > h2{
  font-family:var(--cr-display)!important; font-weight:700!important;
  font-size:clamp(30px,4vw,46px)!important; line-height:1.04!important; letter-spacing:-.015em!important;
  color:var(--cr-ink)!important; margin:0 0 10px!important; padding:0!important; position:relative!important;
}
html body main#main .comune-panel > h2::before{
  /* il trattino 1px legacy -> KICKER mono "SCHEDA · BRINDISI" sopra al titolo */
  content:'Scheda Comune'!important;
  display:block!important; position:static!important;
  width:auto!important; height:auto!important; background:none!important;
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:600!important;
  letter-spacing:.18em!important; text-transform:uppercase!important;
  color:var(--cr-gold-600)!important; margin:0 0 10px!important;
}
html body main#main .comune-panel > h2 .section-icon{ display:none!important; }

html body main#main .comune-panel__lead{
  font-family:var(--cr-body)!important; font-size:18px!important; line-height:1.6!important;
  color:var(--cr-ink-2)!important; max-width:62ch!important; margin:0 0 36px!important;
}

/* card-sezione interna: bordo caldo, raggio, ombra soft (no grigio piatto) */
html body main#main .comune-section{
  background:var(--cr-bg)!important; border:1px solid var(--cr-line)!important;
  border-radius:var(--cr-r-lg)!important; box-shadow:var(--cr-sh-sm)!important;
  padding:32px 30px!important; margin:0 0 24px!important;
}
/* titolo sezione interna: Oswald + EYEBROW pallino oro (niente tacca 1px) */
html body main#main .comune-section > h2{
  font-family:var(--cr-display)!important; font-weight:600!important;
  font-size:clamp(20px,2.6vw,28px)!important; line-height:1.12!important; letter-spacing:-.01em!important;
  color:var(--cr-ink)!important; margin:0 0 20px!important; padding:0 0 0 20px!important; position:relative!important;
}
html body main#main .comune-section > h2::before{
  content:''!important; position:absolute!important; left:0!important;
  top:50%!important; transform:translateY(-50%)!important;
  width:8px!important; height:8px!important; border-radius:50%!important;
  background:rgba(58,143,204,.55)!important; box-shadow:0 0 0 3px rgba(58,143,204,.12)!important;
}

/* ============================================================================
   5. LISTE DATI (uffici, scuole, ricettivita, sanita…)  (problema 1 + 3)
   Righe leggibili, ink AA, niente "muted" slavato. Hover navy soft.
   ============================================================================ */
html body main#main .info-list{
  list-style:none!important; margin:0!important; padding:0!important;
  display:grid!important; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important; gap:14px!important;
}
html body main#main .info-list > li{
  background:var(--cr-bg)!important; border:1px solid rgba(91,196,255,.22)!important;
  border-left:3px solid rgba(91,196,255,.45)!important; border-radius:var(--cr-r-md)!important;
  padding:16px 18px!important; transition:box-shadow .18s, transform .18s, border-color .18s!important;
}
html body main#main .info-list > li:hover{
  box-shadow:var(--cr-sh-md)!important; transform:translateY(-2px)!important; border-left-color:var(--cr-navy-600)!important;
}
html body main#main .info-list .item-title{
  font-family:var(--cr-display)!important; font-weight:600!important; font-size:18px!important;
  color:var(--cr-ink)!important; line-height:1.2!important; margin:0 0 8px!important; letter-spacing:-.01em!important;
}
html body main#main .item-meta,
html body main#main .item-meta__row,
html body main#main .numero-utile{
  font-family:var(--cr-body)!important; font-size:14px!important; line-height:1.5!important;
  color:var(--cr-ink-2)!important; margin:3px 0!important; display:flex!important; align-items:center!important; gap:7px!important;
}
html body main#main .item-meta a{
  color:var(--cr-navy-600)!important; font-weight:600!important;
  text-decoration:none!important; border-bottom:1px solid var(--cr-line)!important;
}
html body main#main .item-meta a:hover{ border-bottom-color:var(--cr-gold-500)!important; color:var(--cr-navy-800)!important; }

/* ──────────────────────────────────────────────────────────────────
   SCUOLE-GRUPPO (usato anche per Ospitalità, Trasporti ecc.)
   comune-restyle.css forza color:#51677F !important sui badge navy
   → testo illeggibile. Qui lo sovrascriviamo con specificità > 2 classi.
   ────────────────────────────────────────────────────────────────── */
html body main#main .scuole-gruppo__titolo{
  font-family:var(--cr-display)!important; font-weight:700!important;
  font-size:12px!important; letter-spacing:.1em!important; text-transform:uppercase!important;
  color:rgba(42,92,166,.85)!important; -webkit-text-fill-color:rgba(42,92,166,.85)!important;
  display:flex!important; align-items:center!important; gap:10px!important;
  border-bottom:1px solid rgba(91,196,255,.22)!important;
  padding-bottom:10px!important; margin-bottom:14px!important;
}
/* badge contatore: tenue azzurro su sfondo ghost */
html body main#main .scuole-gruppo__count{
  background:rgba(58,111,176,.12)!important;
  color:#2A5FA8!important; -webkit-text-fill-color:#2A5FA8!important;
  font-family:var(--cr-mono)!important; font-size:11px!important; font-weight:600!important;
  min-width:1.55rem!important; height:1.55rem!important; padding:0 5px!important;
  border-radius:999px!important; display:inline-flex!important;
  align-items:center!important; justify-content:center!important;
  margin-left:auto!important; flex-shrink:0!important;
}

/* card "tipo" (servizio/numero/scuola/farmacia/struttura/luogo): paper+oro */
html body main#main .servizio-card,
html body main#main .numero-card,
html body main#main .scuola-card,
html body main#main .farmacia-card,
html body main#main .luogo-card,
html body main#main .struttura-card{
  background:var(--cr-paper)!important; border:1px solid rgba(91,196,255,.18)!important;
  border-radius:var(--cr-r-md)!important; box-shadow:0 1px 3px rgba(10,37,64,.04)!important;
  padding:12px 14px!important;
}
html body main#main .servizio-card h3,
html body main#main .numero-card h3,
html body main#main .scuola-card h3,
html body main#main .farmacia-card h3,
html body main#main .struttura-card h3{
  font-family:var(--cr-display)!important; font-weight:600!important; font-size:18px!important;
  color:var(--cr-ink)!important; letter-spacing:-.01em!important;
}
html body main#main .numero-tel, html body main#main .tel{
  font-family:var(--cr-mono)!important; font-variant-numeric:tabular-nums!important; color:var(--cr-navy-700)!important;
}

/* ============================================================================
   6. OVERVIEW GRID — card di accesso (Panoramica)  (problema 6)
   Card editoriali raffinate, 3-col, hover navy/oro. Niente grid 1px grigio.
   ============================================================================ */
html body main#main .overview-grid,
html body main#main [class*="overview-grid"]{
  display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important; margin:8px 0 8px!important; padding:0!important;
  background:transparent!important; border:0!important; border-radius:0!important; overflow:visible!important;
}
@media(max-width:900px){
  html body main#main .overview-grid,
  html body main#main [class*="overview-grid"]{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media(max-width:560px){
  html body main#main .overview-grid,
  html body main#main [class*="overview-grid"]{ grid-template-columns:1fr!important; }
}
/* ---- CARD stile "Cammini di Puglia": barra-accento verticale a sx,
   tile icona beige, titolo Oswald, divisore, meta mono colorata ----
   L'accento ruota per nth-child → scalabile per tutti i 257 comuni.    */
html body main#main .overview-card,
html body main#main [class*="overview-card"]:not(.overview-card__icon):not(.overview-card__title):not(.overview-card__desc):not(.overview-card__meta){
  --ovc-accent:var(--cr-gold-600);
  display:flex!important; flex-direction:column!important; gap:13px!important;
  background:var(--cr-bg)!important; border:1px solid var(--cr-line)!important;
  border-radius:var(--cr-r-lg)!important; box-shadow:var(--cr-sh-sm)!important;
  padding:24px 24px 20px 28px!important; min-height:0!important; text-decoration:none!important; color:var(--cr-ink)!important;
  position:relative!important; overflow:hidden!important;
  transition:transform .18s, box-shadow .18s, border-color .18s!important;
}
/* barra-accento verticale a sinistra (sempre visibile, colore = accento card) */
html body main#main .overview-card::before{
  content:''!important; position:absolute!important; left:0; top:0; bottom:0; width:5px!important;
  background:var(--ovc-accent)!important; opacity:1!important; transition:width .18s!important;
}
/* rotazione colori accento (oro, blu, terracotta, viola, teal, rosso, navy, gold-scuro, verde) */
html body main#main .overview-card:nth-child(9n+1){ --ovc-accent:#1A72B8!important; }
html body main#main .overview-card:nth-child(9n+2){ --ovc-accent:#2A6CA6!important; }
html body main#main .overview-card:nth-child(9n+3){ --ovc-accent:#C0532B!important; }
html body main#main .overview-card:nth-child(9n+4){ --ovc-accent:#6E4B9E!important; }
html body main#main .overview-card:nth-child(9n+5){ --ovc-accent:#1B8A8A!important; }
html body main#main .overview-card:nth-child(9n+6){ --ovc-accent:#B23A48!important; }
html body main#main .overview-card:nth-child(9n+7){ --ovc-accent:#0E2F4A!important; }
html body main#main .overview-card:nth-child(9n+8){ --ovc-accent:#A87C00!important; }
html body main#main .overview-card:nth-child(9n+9){ --ovc-accent:#3F7D3F!important; }
html body main#main .overview-card:hover{
  transform:translateY(-4px)!important; box-shadow:var(--cr-sh-md)!important; border-color:var(--cr-line-cool)!important;
}
html body main#main .overview-card:hover::before{ width:7px!important; }
html body main#main .overview-card__icon{
  width:54px!important; height:54px!important; border-radius:13px!important;
  background:var(--cr-paper)!important; display:flex!important; align-items:center!important; justify-content:center!important;
  color:var(--cr-navy-700)!important; margin:0!important; grid-row:auto!important; grid-column:auto!important;
  transition:background .18s, color .18s!important;
}
html body main#main .overview-card:hover .overview-card__icon{
  background:var(--cr-navy-800)!important;
}
html body main#main .overview-card__icon svg{
  width:30px!important; height:30px!important; color:var(--cr-navy-700)!important; stroke:var(--cr-navy-700)!important;
}
html body main#main .overview-card:hover .overview-card__icon svg,
html body main#main .overview-card:hover .overview-card__icon svg path{
  color:var(--cr-gold-400)!important; stroke:var(--cr-gold-400)!important;
}
html body main#main .overview-card__title,
html body main#main .overview-card h3, html body main#main .overview-card h4{
  font-family:var(--cr-display)!important; font-weight:600!important; font-size:21px!important;
  letter-spacing:-.01em!important; color:var(--cr-ink)!important; -webkit-text-fill-color:var(--cr-ink)!important;
  grid-row:auto!important; grid-column:auto!important; margin:0!important;
}
html body main#main .overview-card__desc,
html body main#main .overview-card p{
  font-family:var(--cr-body)!important; font-size:14.5px!important; line-height:1.55!important;
  color:var(--cr-ink-2)!important; -webkit-text-fill-color:var(--cr-ink-2)!important;
  grid-row:auto!important; grid-column:auto!important; margin:0!important; flex:1 1 auto!important;
}
/* divisore sottile + meta mono colorata dell'accento (generata via ::after → vale per tutti i 257) */
html body main#main .overview-card::after{
  content:'VAI ALLA SEZIONE →'!important;
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:700!important;
  letter-spacing:.1em!important; text-transform:uppercase!important;
  color:var(--ovc-accent)!important; -webkit-text-fill-color:var(--ovc-accent)!important;
  margin-top:4px!important; padding-top:13px!important;
  border-top:1px solid var(--cr-line)!important; display:block!important;
}
/* se in futuro una card ha una meta esplicita, ha priorità sul ::after generato */
html body main#main .overview-card:has(.overview-card__meta)::after{ content:none!important; }
html body main#main .overview-card__meta{
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:700!important;
  letter-spacing:.1em!important; text-transform:uppercase!important;
  color:var(--ovc-accent)!important; -webkit-text-fill-color:var(--ovc-accent)!important;
  margin-top:4px!important; padding-top:13px!important; border-top:1px solid var(--cr-line)!important;
}
/* card ATTIVA (selezionata) — ben evidente e LEGGIBILE: tinta paper-2, accento spesso, testo navy */
html body main#main .overview-card.is-active,
html body main#main .overview-card[aria-current="true"]{
  background:var(--cr-paper)!important; border-color:var(--ovc-accent)!important;
  box-shadow:var(--cr-sh-md)!important;
}
html body main#main .overview-card.is-active::before,
html body main#main .overview-card[aria-current="true"]::before{ width:7px!important; }
html body main#main .overview-card.is-active .overview-card__title,
html body main#main .overview-card[aria-current="true"] .overview-card__title{
  color:var(--cr-navy-900)!important; -webkit-text-fill-color:var(--cr-navy-900)!important;
}
html body main#main .overview-card.is-active .overview-card__desc,
html body main#main .overview-card[aria-current="true"] .overview-card__desc{
  color:var(--cr-ink)!important; -webkit-text-fill-color:var(--cr-ink)!important;
}

/* ============================================================================
   7. "PER IL TURISTA" (ic-tourism) — EDITORIALE  (problemi 1·2·3·4·6)
   Niente trattini brutti: kicker mono + numerazione. Bottoni eleganti.
   ============================================================================ */
html body main#main .ic-tourism{
  background:var(--cr-bg)!important; border:1px solid var(--cr-line)!important;
  border-radius:var(--cr-r-xl)!important; box-shadow:var(--cr-sh-lg)!important;
  overflow:hidden!important; margin:0 0 56px!important;
}
/* head navy con kicker oro */
html body main#main .ic-tourism .ic-tourism__head{
  background:
    radial-gradient(900px 320px at 82% -20%, rgba(42,108,166,.4), transparent 60%),
    linear-gradient(150deg,var(--cr-navy-900) 0%,var(--cr-navy-700) 55%,var(--cr-navy-600) 120%)!important;
  color:#fff!important; border-bottom:0!important;
  padding:40px 38px 44px!important;
}
html body main#main .ic-tourism .ic-tourism__title{
  display:flex!important; align-items:center!important; gap:14px!important;
  font-family:var(--cr-display)!important; font-weight:700!important;
  font-size:clamp(28px,3.6vw,40px)!important; line-height:1.05!important; color:#fff!important; margin:0!important;
}
/* kicker mono SOPRA "Per il turista" RIMOSSO (2026-06-09): diceva 'BRINDISI' su tutti i
   comuni (testo hardcoded) + fascia colorata. Rimosso testo e fascia da tutti i comuni. */
html body main#main .ic-tourism .ic-tourism__title::before{
  content:none!important;
  display:none!important; width:100%!important; order:-1!important;
  font-family:var(--cr-mono)!important; font-size:11.5px!important; font-weight:600!important;
  letter-spacing:.20em!important; text-transform:uppercase!important;
  color:var(--cr-gold-400)!important;
  margin-bottom:12px!important;   /* più respiro tra kicker e titolo */
  padding-bottom:10px!important;  /* aria tra testo kicker e linea dorata sottostante */
}
html body main#main .ic-tourism .ic-tourism__title-icon{
  width:34px!important; height:34px!important; color:var(--cr-gold-400)!important; flex:none!important;
}
html body main#main .ic-tourism .ic-tourism__lead{
  font-family:var(--cr-body)!important; font-size:18px!important; line-height:1.6!important;
  color:#e7eef6!important; max-width:70ch!important; margin:16px 0 0!important;
}

/* barra audio: compatta, inline accanto al blocco "Per il turista" (problema 3) */
html body main#main .ic-tourism .ic-tourism__audio{
  display:flex!important; align-items:center!important; gap:14px!important; flex-wrap:wrap!important;
  padding:18px 38px!important; background:var(--cr-paper)!important; border-bottom:1px solid var(--cr-line)!important;
}
/* kicker testuale accanto al bottone-icona, per dare contesto leggibile */
html body main#main .ic-tourism .ic-tourism__audio::before{
  content:'Audio guida'!important; order:-1!important;
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:600!important;
  letter-spacing:.12em!important; text-transform:uppercase!important; color:var(--cr-gold-600)!important;
}
/* BOTTONE "Ascolta la descrizione" = SOLO ICONA, tondo ~44px, oro (problema 3) */
html body main#main .ic-tourism .ic-tourism__audio-btn{
  display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:0!important;
  width:44px!important; height:44px!important; min-width:44px!important; flex:none!important;
  padding:0!important; border-radius:var(--cr-r-pill)!important;
  background:linear-gradient(180deg,#7BCEFF,#3BAFF0 60%,#1A8AD4)!important;
  color:#fff!important; -webkit-text-fill-color:#fff!important; border:0!important;
  box-shadow:0 6px 18px rgba(58,143,204,.38)!important;
  transition:transform .18s, box-shadow .18s, filter .18s!important;
}
html body main#main .ic-tourism .ic-tourism__audio-btn:hover{
  transform:translateY(-2px)!important; filter:brightness(1.04)!important; box-shadow:0 10px 26px rgba(58,143,204,.48)!important;
}
html body main#main .ic-tourism .ic-tourism__audio-btn .ic-tourism__icon{
  width:22px!important; height:22px!important; color:var(--cr-navy-900)!important;
}
/* etichetta mantenuta nel DOM (la aggiorna tourism-overlay.js) ma nascosta visivamente */
html body main#main .ic-tourism .ic-tourism__audio-btn .ic-tourism__btn-label{
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important;
}
html body main#main .ic-tourism .ic-tourism__audio-btn[aria-pressed="true"]{
  background:var(--cr-navy-800)!important; color:#fff!important; box-shadow:0 6px 18px rgba(9,34,58,.3)!important;
}
html body main#main .ic-tourism .ic-tourism__audio-btn[aria-pressed="true"] .ic-tourism__icon{ color:var(--cr-gold-400)!important; }
html body main#main .ic-tourism .ic-tourism__audio-status{
  font-family:var(--cr-mono)!important; font-size:12px!important; color:var(--cr-ink-2)!important; letter-spacing:.04em!important;
}
html body main#main .ic-tourism .ic-tourism__audio-fallback{
  font-family:var(--cr-body)!important; font-size:13px!important; color:var(--cr-ink-2)!important;
}

/* corpo: griglia editoriale a 2 colonne; le full-span occupano tutta la riga */
html body main#main .ic-tourism .ic-tourism__body{
  display:grid!important; grid-template-columns:1fr 1fr!important; gap:34px 40px!important;
  padding:40px 38px!important;
}
@media(max-width:820px){
  html body main#main .ic-tourism .ic-tourism__body{ grid-template-columns:1fr!important; gap:30px!important; padding:30px 22px!important; }
}
html body main#main .ic-tourism .ic-tourism__section{ margin:0!important; }
html body main#main .ic-tourism .ic-tourism__section[data-span="full"]{ grid-column:1 / -1!important; }

/* TITOLI sezione turismo: KICKER mono numerato (sostituisce la tacca oro 4px) */
html body main#main .ic-tourism .ic-tourism__body{ counter-reset:tsec!important; }
html body main#main .ic-tourism .ic-tourism__h3{
  counter-increment:tsec!important;
  font-family:var(--cr-display)!important; font-weight:600!important;
  font-size:23px!important; line-height:1.12!important; letter-spacing:-.01em!important;
  color:var(--cr-navy-800)!important; margin:0 0 20px!important; padding:0!important; position:relative!important;
}
html body main#main .ic-tourism .ic-tourism__h3::before{
  content:counter(tsec,decimal-leading-zero)!important;
  display:inline-block!important; position:static!important;
  width:auto!important; height:auto!important; background:none!important; border-radius:0!important;
  font-family:var(--cr-mono)!important; font-size:13px!important; font-weight:700!important;
  letter-spacing:.06em!important; color:var(--cr-gold-600)!important; margin-right:10px!important;
  vertical-align:.06em!important;
}
html body main#main .ic-tourism .ic-tourism__h3::after{
  /* righello oro corto e raffinato sotto al titolo, non un trattino davanti */
  content:''!important; display:block!important; width:46px!important; height:3px!important;
  border-radius:2px!important; background:linear-gradient(90deg,var(--cr-gold-500),var(--cr-gold-100))!important;
  margin-top:14px!important;
}
html body main#main .ic-tourism .ic-tourism__section p,
html body main#main .ic-tourism .ic-tourism__body{
  font-family:var(--cr-body)!important;
}
html body main#main .ic-tourism .ic-tourism__section > p{
  font-size:16px!important; line-height:1.65!important; color:var(--cr-ink-2)!important; margin:0!important;
}

/* liste curiosita */
html body main#main .ic-tourism .ic-tourism__list{
  list-style:none!important; margin:0!important; padding:0!important; display:flex!important; flex-direction:column!important; gap:12px!important;
}
html body main#main .ic-tourism .ic-tourism__list li{
  position:relative!important; padding-left:24px!important; font-size:15.5px!important; line-height:1.55!important; color:var(--cr-ink-2)!important;
}
html body main#main .ic-tourism .ic-tourism__list li::before{
  content:''!important; position:absolute!important; left:2px!important; top:.55em!important;
  width:7px!important; height:7px!important; border-radius:50%!important; background:var(--cr-gold-500)!important;
}

/* ═══════════════════════════════════════════════════════════════════
   MONUMENTI ICONICI — design editoriale premio-level
   Niente box/bordo pieno. Accent bar sinistra + ghost counter.
   Ispirazione: Wallpaper* / Monocle / Designers Italia.
   ═══════════════════════════════════════════════════════════════════ */
html body main#main .ic-tourism .ic-tourism__monuments{
  list-style:none!important; margin:0!important; padding:0!important;
  counter-reset:monument!important;
  display:grid!important; grid-template-columns:1fr 1fr!important; gap:14px!important;
}
@media(max-width:600px){ html body main#main .ic-tourism .ic-tourism__monuments{ grid-template-columns:1fr!important; } }

html body main#main .ic-tourism .ic-tourism__monuments > li{
  counter-increment:monument!important;
  /* niente bordo pieno: solo barra sinistra oro */
  background:#fff!important;
  border:none!important;
  border-left:3px solid var(--cr-gold-500)!important;
  border-radius:0 var(--cr-r-md) var(--cr-r-md) 0!important;
  padding:18px 48px 18px 20px!important;
  display:flex!important; flex-direction:column!important; gap:6px!important;
  position:relative!important; overflow:hidden!important;
  box-shadow:0 2px 10px rgba(9,34,58,.055)!important;
  transition:box-shadow .25s ease, border-left-color .22s ease, transform .22s ease!important;
}
html body main#main .ic-tourism .ic-tourism__monuments > li:hover{
  box-shadow:0 8px 28px rgba(9,34,58,.12)!important;
  border-left-color:var(--cr-gold-400)!important;
  transform:translateY(-2px)!important;
}
/* ghost counter — numero grande in filigrana */
html body main#main .ic-tourism .ic-tourism__monuments > li::after{
  content:counter(monument,decimal-leading-zero)!important;
  position:absolute!important; right:10px!important; bottom:6px!important;
  font-family:var(--cr-display)!important; font-size:48px!important; font-weight:700!important;
  color:rgba(9,34,58,.055)!important; -webkit-text-fill-color:rgba(9,34,58,.055)!important;
  line-height:1!important; pointer-events:none!important; user-select:none!important;
  letter-spacing:-.02em!important;
}

html body main#main .ic-tourism .ic-tourism__monuments > li strong{
  font-family:var(--cr-display)!important; font-weight:600!important; font-size:15.5px!important;
  color:var(--cr-navy-800)!important; -webkit-text-fill-color:var(--cr-navy-800)!important;
  line-height:1.22!important; letter-spacing:.01em!important;
}
html body main#main .ic-tourism .ic-tourism__monument-type{
  font-family:var(--cr-mono)!important; font-size:10.5px!important; font-weight:500!important;
  letter-spacing:.07em!important; text-transform:uppercase!important;
  /* colore inchiostro muted — non oro sgargiante */
  color:var(--cr-ink-3)!important; -webkit-text-fill-color:var(--cr-ink-3)!important;
}

/* itinerario: pill meta + step numerati eleganti */
html body main#main .ic-tourism .ic-tourism__route-meta{
  display:flex!important; gap:10px!important; flex-wrap:wrap!important; margin:0 0 18px!important;
}
html body main#main .ic-tourism .ic-tourism__route-meta-pill{
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:600!important;
  letter-spacing:.04em!important; color:var(--cr-navy-800)!important;
  background:var(--cr-gold-100)!important; border:1px solid var(--cr-gold-500)!important;
  border-radius:var(--cr-r-pill)!important; padding:6px 14px!important;
}
html body main#main .ic-tourism .ic-tourism__route-meta-pill strong{ color:var(--cr-navy-900)!important; }
html body main#main .ic-tourism .ic-tourism__route-steps{
  list-style:none!important; counter-reset:step!important; margin:0!important; padding:0!important;
  display:flex!important; flex-direction:column!important; gap:12px!important;
}
html body main#main .ic-tourism .ic-tourism__route-steps li{
  counter-increment:step!important; position:relative!important; padding:0 0 0 44px!important;
  min-height:30px!important; display:flex!important; align-items:center!important;
  font-size:15.5px!important; line-height:1.4!important; color:var(--cr-ink)!important; font-weight:600!important;
}
html body main#main .ic-tourism .ic-tourism__route-steps li::before{
  content:counter(step)!important; position:absolute!important; left:0!important; top:50%!important; transform:translateY(-50%)!important;
  width:32px!important; height:32px!important; border-radius:50%!important;
  background:var(--cr-navy-800)!important; color:#5BC4FF!important; -webkit-text-fill-color:#5BC4FF!important;
  font-family:var(--cr-mono)!important; font-size:15px!important; font-weight:700!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
}
/* PROBLEMA 2 — la voce "evidenziata in oro" (hover/focus/active dal legacy tourism-overlay
   o stato di lettura) restava illeggibile (oro su oro / text-fill ereditato).
   Highlight controllato: tinta oro CHIARA + testo navy bold (contrasto AA), niente stato fisso. */
html body main#main .ic-tourism .ic-tourism__route-steps li[role="button"],
html body main#main .ic-tourism .ic-tourism__route-steps li{
  border-radius:8px!important; background:transparent!important;
  color:var(--cr-ink)!important; -webkit-text-fill-color:var(--cr-ink)!important;
  padding:4px 10px 4px 44px!important; transition:background-color .15s ease!important;
}
html body main#main .ic-tourism .ic-tourism__route-steps li[role="button"]:hover,
html body main#main .ic-tourism .ic-tourism__route-steps li[role="button"]:focus,
html body main#main .ic-tourism .ic-tourism__route-steps li[role="button"]:focus-visible,
html body main#main .ic-tourism .ic-tourism__route-steps li[role="button"].is-active,
html body main#main .ic-tourism .ic-tourism__route-steps li.is-reading,
html body main#main .ic-tourism .ic-tourism__route-steps li:target{
  background:var(--cr-gold-100)!important;                 /* oro CHIARO #FBF1D4 */
  color:var(--cr-navy-900)!important; -webkit-text-fill-color:var(--cr-navy-900)!important;
  font-weight:700!important;
  outline:2px solid var(--cr-gold-500)!important; outline-offset:1px!important;
}

/* mappa itinerario */
html body main#main .ic-tourism .ic-tourism__map-wrap{ margin-top:24px!important; }
html body main#main .ic-tourism .ic-tourism__map{
  border-radius:var(--cr-r-lg)!important; overflow:hidden!important; border:1px solid var(--cr-line)!important;
}
html body main#main .ic-tourism .ic-tourism__map-actions{
  display:flex!important; align-items:center!important; gap:14px!important; flex-wrap:wrap!important; margin-top:16px!important;
}
/* BOTTONE "Portami" = navy pieno elegante */
html body main#main .ic-tourism .ic-tourism__nav-btn{
  display:inline-flex!important; align-items:center!important; gap:9px!important;
  font-family:var(--cr-body)!important; font-size:14.5px!important; font-weight:700!important; text-decoration:none!important;
  padding:11px 20px!important; border-radius:var(--cr-r-pill)!important;
  background:var(--cr-navy-800)!important; color:#fff!important; border:0!important;
  box-shadow:0 6px 16px rgba(9,34,58,.22)!important; transition:transform .18s, background .18s, box-shadow .18s!important;
}
html body main#main .ic-tourism .ic-tourism__nav-btn:hover{
  background:var(--cr-navy-600)!important; transform:translateY(-2px)!important; box-shadow:0 10px 24px rgba(9,34,58,.3)!important;
}
html body main#main .ic-tourism .ic-tourism__nav-btn .ic-tourism__icon{ width:18px!important; height:18px!important; color:var(--cr-gold-400)!important; }
html body main#main .ic-tourism .ic-tourism__map-note{
  font-family:var(--cr-mono)!important; font-size:12.5px!important; color:var(--cr-ink-2)!important; letter-spacing:.02em!important;
}

/* footer turismo */
html body main#main .ic-tourism .ic-tourism__footer{
  font-family:var(--cr-body)!important; font-size:13px!important; line-height:1.55!important; color:var(--cr-ink-2)!important;
  background:var(--cr-paper)!important; border-top:1px solid var(--cr-line)!important; padding:18px 38px!important;
}
html body main#main .ic-tourism .ic-tourism__footer a{ color:var(--cr-navy-600)!important; font-weight:600!important; }
html body main#main .ic-tourism .ic-tourism__draft-badge{
  font-family:var(--cr-mono)!important; font-size:12px!important; font-weight:700!important;
  letter-spacing:.1em!important; text-transform:uppercase!important;
  background:var(--cr-gold-100)!important; color:var(--cr-gold-600)!important; border:1px solid var(--cr-gold-500)!important;
  border-radius:var(--cr-r-pill)!important; padding:3px 10px!important; margin-right:8px!important;
}
html body main#main .ic-tourism .ic-tourism__footer code{
  font-family:var(--cr-mono)!important; font-size:12px!important; color:var(--cr-navy-700)!important;
  background:var(--cr-paper-2)!important; padding:1px 6px!important; border-radius:4px!important;
}

/* ============================================================================
   8. FLIPBOOK (Mappa multimediale) — non rompere, solo armonizzare cornice
   ============================================================================ */
html body main#main #ic-flipbook-wrapper{
  background:var(--cr-bg)!important; border:1px solid var(--cr-line)!important;
  border-radius:var(--cr-r-lg)!important; box-shadow:var(--cr-sh-sm)!important; padding:24px!important;
}
html body main#main .ic-flip-title{
  font-family:var(--cr-display)!important; font-weight:600!important; color:var(--cr-ink)!important;
}
html body main#main .ic-flip-lead{ font-family:var(--cr-body)!important; color:var(--cr-ink-2)!important; }
html body main#main .ic-flip-fullscreen-btn{
  font-family:var(--cr-body)!important; font-weight:700!important;
  background:var(--cr-navy-800)!important; color:#fff!important; border:0!important; border-radius:var(--cr-r-pill)!important;
}
html body main#main .ic-flip-fullscreen-btn svg{ color:var(--cr-gold-400)!important; }

/* ============================================================================
   8b. VISITBRINDISI.IT — finestra espandibile (feature esclusiva PRO, problema 5)
   Testata navy+oro, toggle pill, iframe espandibile 0 → 720px, border-radius.
   ============================================================================ */
html body main#main #ic-visit-wrapper.ic-visit{
  grid-column:1 / -1!important;
  margin-top:18px!important;
  background:var(--cr-bg)!important; border:1px solid var(--cr-line)!important;
  border-radius:var(--cr-r-lg)!important; box-shadow:var(--cr-sh-sm)!important; overflow:hidden!important;
}
html body main#main .ic-visit__head{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:18px!important; flex-wrap:wrap!important;
  padding:22px 26px!important;
  background:linear-gradient(150deg,var(--cr-navy-900) 0%,var(--cr-navy-700) 60%,var(--cr-navy-600) 130%)!important;
  border-bottom:4px solid var(--cr-gold-500)!important;
}
html body main#main .ic-visit__titlewrap{ display:flex!important; flex-direction:column!important; gap:6px!important; }
html body main#main .ic-visit__kicker{
  font-family:var(--cr-mono)!important; font-size:12.5px!important; font-weight:600!important;
  letter-spacing:.14em!important; text-transform:uppercase!important; color:var(--cr-gold-400)!important;
}
html body main#main .ic-visit__title{
  display:flex!important; align-items:center!important; gap:11px!important; margin:0!important;
  font-family:var(--cr-display)!important; font-weight:700!important; font-size:clamp(22px,2.6vw,29px)!important;
  line-height:1.05!important; color:#fff!important;
}
html body main#main .ic-visit__toggle{
  display:inline-flex!important; align-items:center!important; gap:9px!important; flex:none!important;
  font-family:var(--cr-body)!important; font-size:14.5px!important; font-weight:700!important;
  padding:11px 20px!important; border-radius:var(--cr-r-pill)!important; cursor:pointer!important;
  background:linear-gradient(180deg,#7BCEFF,#3BAFF0 60%,#1A8AD4)!important;
  color:#fff!important; -webkit-text-fill-color:#fff!important; border:0!important;
  box-shadow:0 6px 18px rgba(58,143,204,.38)!important;
  transition:transform .18s, box-shadow .18s, filter .18s!important;
}
html body main#main .ic-visit__toggle:hover{
  transform:translateY(-2px)!important; filter:brightness(1.04)!important; box-shadow:0 10px 26px rgba(58,143,204,.48)!important;
}
html body main#main .ic-visit__chevron{
  width:18px!important; height:18px!important; color:var(--cr-navy-900)!important;
  transition:transform .3s ease!important;
}
html body main#main #ic-visit-wrapper.is-open .ic-visit__chevron{ transform:rotate(180deg)!important; }
/* pannello espandibile: altezza animata */
html body main#main .ic-visit__panel{
  max-height:0!important; opacity:0!important; overflow:hidden!important;
  padding:0 18px!important; background:var(--cr-bg)!important;
  transition:max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease, padding .45s cubic-bezier(.4,0,.2,1)!important;
}
html body main#main #ic-visit-wrapper.is-open .ic-visit__panel{
  max-height:760px!important; opacity:1!important; padding:18px!important;
}
html body main#main .ic-visit__frame{
  display:block!important; width:100%!important; height:720px!important; border:0!important;
  border-radius:var(--cr-r-md)!important; background:var(--cr-paper)!important;
  box-shadow:inset 0 0 0 1px var(--cr-line)!important;
}
@media(max-width:560px){
  html body main#main .ic-visit__head{ padding:18px 18px!important; }
  html body main#main .ic-visit__toggle{ width:100%!important; justify-content:center!important; }
  html body main#main #ic-visit-wrapper.is-open .ic-visit__panel{ max-height:600px!important; }
  html body main#main .ic-visit__frame{ height:560px!important; }
}

/* ============================================================================
   9. FOCUS RING ORO (a11y AA) su tutti gli interattivi della scheda
   ============================================================================ */
html body main#main a:focus-visible,
html body main#main button:focus-visible,
html body .comune-tabs__btn:focus-visible{
  outline:0!important; box-shadow:var(--cr-focus)!important; border-radius:var(--cr-r-sm,4px)!important;
}

/* ============================================================================
   10. RESPONSIVE — hero meta + bottoni in colonna su mobile
   ============================================================================ */
@media(max-width:640px){
  html body section.comune-hero.comune-hero--map.comune-hero--map .comune-hero__content{ padding:44px 20px 52px!important; }
  html body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-buttons{ flex-direction:column!important; }
  html body section.comune-hero.comune-hero--map.comune-hero--map .ms-hero-btn{ justify-content:center!important; }
  html body main#main .comune-panel{ padding:40px 0 48px!important; }
}

/* ===== FIX leggibilita sottotitolo hero su mappa (overlay piu trasparente) ===== */
/* specificita con ID #main batte "main#main p {color:var(--cr-ink-2)}" */
html body main#main .comune-hero__subtitle,
html body main#main .hero-v2-sub,
html body main#main .comune-hero--map p.comune-hero__subtitle{
  color:#eef3f9!important; text-shadow:0 1px 12px rgba(0,0,0,.5)!important;
}

/* ============================================================
   MASSIMA LEGGIBILITÀ — testi e icone piu grandi, contrasto AA
   ============================================================ */
html body main#main p, html body main#main li, html body main#main td{ font-size:16px!important; line-height:1.62!important; }
html body main#main .overview-card__title{ font-size:21px!important; }
html body main#main .overview-card__desc{ font-size:15px!important; line-height:1.56!important; color:#2a3340!important; -webkit-text-fill-color:#2a3340!important; }
html body main#main .ic-tourism__route-steps li{ font-size:16.5px!important; }
html body main#main .ic-tourism__lead{ font-size:18px!important; }
/* icone sezioni/card piu grandi */
html body main#main .overview-card .ic-icon, html body main#main .overview-card svg{ width:26px!important; height:26px!important; }
html body main#main .comune-section .ic-icon, html body main#main .ic-tourism svg.ic-icon{ width:24px!important; height:24px!important; }
/* label/kicker mono mai sotto 12.5px */
html body main#main [class*="__label"], html body main#main [class*="__kicker"], html body main#main [class*="__meta"]{ font-size:12.5px!important; }

/* via i trattini/connettori verticali tra gli step dell'itinerario */
html body main#main .ic-tourism .ic-tourism__route-steps li::after,
html body main#main .ic-tourism .ic-tourism__route-steps li:not(:last-child)::after{ content:none!important; display:none!important; }

/* ============================================================
   AGID / WCAG AA — palette fredda contemporanea + contrasti
   ============================================================ */
/* superficie pagina fredda (no panna): assicura il neutro anche dove il legacy mette caldo */
html body main#main{ background:#F4F6F9!important; }
/* ORO come TESTO su chiaro -> oro-scuro accessibile (>=4.5:1). Decori (barre/bordi/su-navy) restano oro acceso. */
html body main#main .ic-tourism__monument-type,
html body main#main .ic-tourism__route-meta,
html body main#main [class*="__kicker"],
html body main#main [class*="__eyebrow"],
html body main#main .overview-card__kicker{ color:#004C9C!important; -webkit-text-fill-color:#004C9C!important; }
/* CTA "VAI ALLA SEZIONE" delle card: colore fisso navy (non l'accento) = AA garantito */
html body main#main .overview-card::after{ color:#0E2F4A!important; -webkit-text-fill-color:#0E2F4A!important; }
/* FOCUS visibile AA: anello doppio navy+oro (mai outline:0 senza sostituto) */
html body main#main a:focus-visible,
html body main#main button:focus-visible,
html body main#main .comune-tabs__btn:focus-visible,
html body main#main .overview-card:focus-visible,
html body main#main [tabindex]:focus-visible{ outline:none!important; box-shadow:0 0 0 2px #0B2340, 0 0 0 4px #5BC4FF !important; border-radius:6px!important; }