/* =========================================================
   Centro Poste Osmannoro — UI Light (Poste-inspired)
   Palette: Poste Yellow + White + Royal Blue
   Accessibile: focus visibile, reduced motion, contrasti ok
   Performance: CSS snello, niente font esterni, niente immagini via CSS
========================================================= */

:root{
  /* Brand */
  --blue: #005BBB;          /* royal blue */
  --blue-600:#0B4BA3;
  --yellow:#FFCC00;         /* poste yellow */
  --yellow-600:#E7B800;

  /* Neutrals */
  --bg: #F6F8FC;
  --surface: #FFFFFF;
  --surface-2: #F2F6FF;
  --text: #0B1220;
  --muted: #4B5563;
  --line: rgba(15, 23, 42, .14);

  /* Effects */
  --shadow: 0 10px 24px rgba(2, 6, 23, .10);
  --shadow-2: 0 16px 40px rgba(2, 6, 23, .12);
  --r: 18px;

  --container: 1120px;

  /* Focus */
  --focus: rgba(255, 204, 0, .95);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

html:focus-within{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 500px at 12% 0%, rgba(0, 91, 187, .10), transparent 60%),
    radial-gradient(900px 480px at 92% 10%, rgba(255, 204, 0, .14), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; height:auto; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ width:min(var(--container), 100% - 32px); margin:0 auto; }

/* Accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto;
  background:var(--blue);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  box-shadow: var(--shadow);
}

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

/* =========================================================
   Header / Nav
========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
/* FIX: colore testo bottoni in header */
.site-header .site-nav a.btn,
.site-header .site-nav a.btn:visited{
  color: #fff !important;
  text-decoration: none !important;
}


.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}

.brand{
  display:flex; gap:10px; align-items:center;
  font-weight:850;
  color:var(--text);
  text-decoration:none !important;
}
.brand-mark{
  width:50px; height:50px;
  display:grid; place-items:center;
  /* background: var(--yellow); */
  border-radius: 12px;
  /* box-shadow: var(--shadow); */
}
.brand-text{ letter-spacing: .2px; }

.site-nav{
  display:flex; gap:10px; align-items:center;
}

.site-nav a{
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none !important;
  font-weight:650;
}
.site-nav a:hover{
  background: rgba(0,91,187,.06);
}
.site-nav a.active{
  background: rgba(0,91,187,.10);
  border:1px solid rgba(0,91,187,.18);
}

.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background: var(--surface);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  box-shadow: 0 6px 18px rgba(2,6,23,.08);
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(0,91,187,.18);
  background: var(--blue);
  color:#fff;
  box-shadow: var(--shadow);
  text-decoration:none !important;
  font-weight:800;
  letter-spacing: .2px;
}
.btn:hover{ filter: brightness(1.03); }
.btn:active{ transform: translateY(1px); }

.btn-ghost{
  background: var(--surface);
  color: var(--blue);
  border:1px solid rgba(0,91,187,.25);
  box-shadow:none;
}
.btn-ghost:hover{ background: rgba(0,91,187,.05); }

.btn-small{
  padding:10px 12px;
  border-radius:12px;
}

/* =========================================================
   Hero
========================================================= */
.hero{ padding:46px 0 12px; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.35fr .9fr;
  gap:18px;
  align-items:stretch;
}

.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255, 204, 0, .20);
  border:1px solid rgba(255, 204, 0, .40);
  color: #3A2F00;
  font-weight:750;
  margin:0 0 12px;
}

h1{
  font-size: clamp(30px, 3.5vw, 44px);
  line-height:1.08;
  margin:0 0 10px;
  letter-spacing: -0.2px;
}
.lead{
  font-size: clamp(15px, 1.6vw, 18px);
  color:var(--muted);
  margin:0 0 16px;
  max-width: 68ch;
}
.cta-row{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:16px 0;
}

.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.85));
  border:1px solid var(--line);
  border-radius: var(--r);
  padding:18px;
  box-shadow: var(--shadow-2);
}

.hero-card-title{
  font-weight:900;
  margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.hero-card-title::before{
  content:"";
  width:10px; height:10px;
  border-radius:999px;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,91,187,.12);
}

.divider{ height:1px; background:var(--line); margin:14px 0; }

/* Quick info */
.quick-info{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:18px;
}

.qi{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r);
  padding:12px;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
}
.qi-k{ color:var(--muted); font-size:13px; }
.qi-v{ font-weight:800; color:var(--text); }

/* =========================================================
   Sections / Typography
========================================================= */
.section{ padding:34px 0; }
.section-alt{
  background: rgba(0,91,187,.04);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

h2{
  margin:0;
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: -0.1px;
}

.muted{ color:var(--muted); }

/* ===== Cards: padding + layout robusto ===== */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}

.card{
  display:block;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:16px;                 /* ✅ padding garantito sempre */
  overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease;
  text-decoration:none !important;
  color: var(--text);
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* Se la card ha un'immagine sopra, la facciamo "uscire" dal padding */
.card-img{
  width: calc(100% + 32px);
  margin: -16px -16px 12px;     /* ✅ immagine a filo card */
  display:block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

/* Se usi <div class="card-body"> ... </div> va bene lo stesso */
.card-body{
  padding: 0;                   /* padding già su .card */
}

.card-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.card-cta{
  display:inline-block;
  margin-top:10px;
  color: var(--blue);
  font-weight:850;
}

.pill{
  font-size:12px;
  color: var(--blue-600);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,91,187,.20);
  background: rgba(0,91,187,.08);
  font-weight:750;
}

/* =========================================================
   Panels / Grids
========================================================= */
.info-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:start;
}

.panel{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r);
  padding:16px;
  box-shadow: var(--shadow);
}

.panel-title{
  font-weight:950;
  margin-bottom:8px;
}

/* Checklist */
.checklist{
  margin:12px 0 0;
  padding:0;
  list-style:none;
}
.checklist li{
  padding-left:28px;
  position:relative;
  margin:10px 0;
  color:var(--muted);
}
.checklist li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color: var(--blue);
  font-weight:950;
}

/* Mini stats */
.mini-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:12px;
}
.ms{
  border:1px solid var(--line);
  border-radius: 14px;
  padding:10px;
  background: linear-gradient(180deg, rgba(0,91,187,.05), rgba(255,204,0,.08));
}
.ms-k{ color:var(--muted); font-size:12px; }
.ms-v{ font-weight:950; font-size:18px; color:var(--text); }

/* =========================================================
   Quotes
========================================================= */
.quotes{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.quote{
  margin:0;
  padding:16px;
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

blockquote{
  margin:0;
  font-weight:750;
  line-height:1.4;
}
figcaption{ margin-top:10px; }

/* =========================================================
   Page layouts
========================================================= */
.page-head{ padding:28px 0 6px; }

.two-col{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  align-items:start;
}

.spacer{ height:14px; }

/* =========================================================
   Forms
========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  align-items:start;
}

.form{ display:grid; gap:12px; }

.field label{
  display:block;
  font-weight:800;
  margin-bottom:6px;
}

.field input,
.field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  outline:none;
}

.field input:focus,
.field textarea:focus{
  border-color: rgba(0,91,187,.55);
  box-shadow: 0 0 0 4px rgba(0,91,187,.12);
}

.field-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.form-msg{
  margin:0;
  color:var(--muted);
  min-height:22px;
  font-weight:650;
}
.form-msg.success{ color:#0B7A3B; }
.form-msg.error{ color:#B00020; }

.hp{ position:absolute; left:-9999px; opacity:0; }

/* =========================================================
   Map
========================================================= */
.map{
  margin-top:10px;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--surface-2);
}
.map iframe{
  width:100%;
  height:260px;
  border:0;
  display:block;
}

/* =========================================================
   Footer
========================================================= */
.site-footer{
  border-top:1px solid var(--line);
  padding:26px 0 18px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:14px;
}

.footer-title{
  font-weight:950;
  margin-bottom:10px;
}

.footer-bottom{
  padding-top:12px;
  border-top:1px solid var(--line);
  margin-top:14px;
}

.hours{
  padding-left:18px;
  margin:0;
  color:var(--muted);
}
.hours.big{ padding-left:18px; }
/* ===== HERO con background dietro + promo bottom-right ===== */
.hero--bg{
  position: relative;
  overflow: hidden;
}

/* layer immagine dietro */
.hero--bg .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.hero--bg .hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: right center;
  display:block;
  transform: scale(1.02);
}

/* overlay per leggibilità testo a sinistra */
.hero--bg .hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(246,248,252,.96) 0%,
      rgba(246,248,252,.92) 40%,
      rgba(246,248,252,.70) 65%,
      rgba(246,248,252,.20) 100%);
}

/* contenuto sopra al background */
.hero--bg .hero-shell{
  position: relative;
  z-index:1;
  padding-bottom: 28px; /* spazio per promo */
}

/* promo in basso a destra (dentro container) */
.promo-card--hero{
  position:absolute;
  right:0;
  bottom:0;
  z-index:2;

  width: min(380px, 92%);
  border-radius: 22px;
  padding: 16px;

  border: 1px solid rgba(0,91,187,.18);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(2,6,23,.18);
}

/* “macchia” gialla in alto a sinistra */
.promo-card--hero::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(140px 140px at 0 0,
      rgba(255,204,0,.95) 0 62%,
      rgba(255,204,0,0) 63%),
    linear-gradient(135deg, rgba(0,91,187,.10), rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.promo-card--hero > *{ position:relative; }

.promo-title{
  margin:0;
  font-weight: 950;
  line-height: 1.05;
  color: var(--blue-600);
  font-size: clamp(18px, 2.1vw, 26px);
}

/* pulsante in basso a destra dentro il box */
.promo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top: 14px;
  margin-left: auto;   /* ✅ spinge a destra */
  width: fit-content;

  padding:10px 14px;
  border-radius: 12px;
  background: var(--yellow);
  border:1px solid rgba(0,0,0,.10);
  color: var(--blue-600);
  font-weight: 950;
  text-decoration:none !important;
}
.promo-btn:hover{ filter: brightness(.98); }
.promo-btn:active{ transform: translateY(1px); }
/* Promo box dentro la hero-card (sotto Email) */
.promo-card--inpanel{
  margin-top: 10px;
  border-radius: 22px;
  padding: 16px;

  border: 1px solid rgba(0,91,187,.18);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
  position: relative;
  overflow: hidden;
}

.promo-card--inpanel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(140px 140px at 0 0,
      rgba(255,204,0,.95) 0 62%,
      rgba(255,204,0,0) 63%),
    linear-gradient(135deg, rgba(0,91,187,.10), rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.promo-card--inpanel > *{ position:relative; }

.promo-card--inpanel .promo-btn{
  margin-left: auto; /* pulsante a destra */
  display: inline-flex;
}
/* Cards servizi con immagini */
.card--service{
  padding:16px;
}

.card--service .card-top{
  margin-top: 10px;
}

.card--service h3{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.card--service .muted{
  margin: 10px 0 0;
}

.card--service .card-cta{
  margin-top: 12px;
}

/* immagine: più “appetibile” */
.card--service .card-img{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
}

/* leggero effetto hover */
.card--service:hover .card-img{
  transform: scale(1.01);
  transition: transform .12s ease;
}

/* pill più leggibile */
.pill{
  white-space: nowrap;
}
/* Disattiva full-bleed per immagini nelle card servizi */
.card--service .card-img{
  width: 100%;
  margin: 0 0 12px 0;
}
.panel-hero-img{
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 16px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.panel-hero-img{
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 16px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
/* ===========================
   FIX glow: solo top, non in tutto il sito
=========================== */
body{
  background: var(--bg) !important; /* togli i glow dal body */
  position: relative;
  overflow-x: clip;
}

/* layer luci SOLO nella parte alta */
body::before{
  content:"";
  position: fixed;
  left:0; right:0; top:0;
  height: 520px;                 /* ✅ limita la zona */
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(900px 420px at 14% 0%, rgba(0, 91, 187, .10), transparent 62%),
    radial-gradient(760px 420px at 92% 8%, rgba(255, 204, 0, .14), transparent 60%);
}

/* Le sezioni diventano "pulite" e non lasciano trasparenze strane */
.section{ background: transparent; }
.section-alt{
  background: #EEF4FF !important; /* più pieno, non trasparente */
}

/* Se vuoi proprio zero bleed ovunque, puoi anche usare:
main{ background: var(--bg); }
ma di solito non serve con le regole sopra */
/* =========================
   Cookie banner
========================= */
.cookie-banner[hidden]{ display:none !important; }

.cookie-banner{
  position: fixed;
  inset: auto 0 0 0;
  padding: 14px;
  z-index: 9999;
}

.cookie-card{
  width: min(980px, 100%);
  margin: 0 auto;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,91,187,.18);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(2,6,23,.18);
  backdrop-filter: blur(10px);
  padding: 14px;
}

.cookie-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.cookie-icn{
  width: 42px; height: 42px;
  border-radius: 14px;
  background: rgba(255,204,0,.35);
  display:grid; place-items:center;
  font-size: 20px;
  border: 1px solid rgba(255,204,0,.45);
}

.cookie-title{ font-weight: 950; }
.cookie-sub{ color: var(--muted); margin-top: 2px; }

.cookie-opt{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(0,91,187,.06);
}

.cookie-opt-icn{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,91,187,.18);
}

.cookie-opt-title{ font-weight: 900; }
.cookie-opt-desc{ color: var(--muted); margin-top: 2px; }

.cookie-actions{
  margin-top: 12px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cookie-actions-right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

.cookie-link{
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}
.cookie-link:hover{ text-decoration: underline; }

.footer-linklike{
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--blue);
  font-weight: 800;
  cursor: pointer;
}
.footer-linklike:hover{ text-decoration: underline; }

/* =========================
   Map placeholder (no-consent)
========================= */
.map-embed{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  min-height: 260px;
}

.map-placeholder{
  height: 260px;
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content:center;
  padding: 16px;
  gap: 8px;
  background:
    radial-gradient(140px 140px at 0 0, rgba(255,204,0,.35) 0 60%, transparent 61%),
    linear-gradient(135deg, rgba(0,91,187,.08), rgba(255,255,255,0) 60%);
}

.mp-icon{ font-size: 22px; }
.mp-title{ font-weight: 950; }
.mp-text{ margin:0; color: var(--muted); max-width: 52ch; }
.mp-link{ font-weight: 800; }
.footer-bottom{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  
}
/* =========================
   Back to top
========================= */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;

  width: 52px;
  height: 52px;
  border-radius: 999px;

  border: 1px solid rgba(0,91,187,.22);
  background: rgba(0,91,187,.92);
  color: #fff;

  box-shadow: 0 16px 40px rgba(2,6,23,.22);
  backdrop-filter: blur(8px);

  display: grid;
  place-items: center;

  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}

.to-top:hover{ filter: brightness(1.06); }
.to-top:active{ transform: translateY(1px); }

.to-top-icn{
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

/* ring giallo “poste” */
.to-top::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: inherit;
  border: 3px solid rgba(255,204,0,.85);
  opacity: .25;
  pointer-events:none;
}

/* se c’è il cookie banner, spostalo un filo sopra */
.cookie-banner:not([hidden]) ~ .to-top,
.cookie-banner:not([hidden]) + .to-top{
  bottom: 92px;
}
/* =========================
   Cookie banner FULL-WIDTH
========================= */
.cookie-banner[hidden]{ display:none !important; }

.cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 0; /* ✅ attaccato ai bordi */
}

.cookie-card{
  width: 100%;
  margin: 0;
  border-radius: 0;           /* ✅ full width pulito */
  background: rgba(255,255,255,.94);
  border-top: 1px solid rgba(0,91,187,.18);
  box-shadow: 0 -18px 50px rgba(2,6,23,.14);
  backdrop-filter: blur(10px);
  padding: 14px;
}

.cookie-card .container{
  width:min(var(--container), 100% - 32px);
  margin:0 auto;
}
/* =========================
   Cookie banner fixed full width
========================= */
.cookie-banner[hidden]{ display:none !important; }

.cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.cookie-card{
  width: 100%;
  background: rgba(255,255,255,.94);
  border-top: 1px solid rgba(0,91,187,.18);
  box-shadow: 0 -18px 50px rgba(2,6,23,.14);
  backdrop-filter: blur(10px);
  padding: 14px 0;
}

.cookie-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.cookie-icn{
  width:42px; height:42px;
  border-radius: 14px;
  background: rgba(255,204,0,.35);
  display:grid; place-items:center;
  font-size: 20px;
  border:1px solid rgba(255,204,0,.45);
}

.cookie-title{ font-weight: 950; }
.cookie-sub{ color: var(--muted); margin-top: 2px; }

.cookie-actions{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-links{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.cookie-link{
  color: var(--blue);
  font-weight: 850;
  text-decoration: none;
}
.cookie-link:hover{ text-decoration: underline; }
/* =========================
   Back to top (Material icon)
========================= */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;

  width: 54px;
  height: 54px;
  border-radius: 999px;

  border: 1px solid rgba(0,91,187,.22);
  background: rgba(0,91,187,.92);
  color: #fff;

  box-shadow: 0 16px 40px rgba(2,6,23,.22);
  backdrop-filter: blur(8px);

  display: grid;
  place-items: center;

  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}

.to-top:hover{ filter: brightness(1.06); }
.to-top:active{ transform: translateY(1px); }

.to-top .material-symbols-rounded{
  font-size: 26px;
  line-height: 1;
}

/* ring giallo “poste” */
.to-top::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: inherit;
  border: 3px solid rgba(255,204,0,.85);
  opacity: .22;
  pointer-events:none;
}

/* se cookie banner visibile, sposta su */
.cookie-banner:not([hidden]) ~ .to-top{
  bottom: 92px;
}
/* =========================
   Back to top (mostra SOLO dopo scroll)
========================= */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;

  width: 54px;
  height: 54px;
  border-radius: 999px;

  border: 1px solid rgba(0,91,187,.22);
  background: rgba(0,91,187,.92);
  color: #fff;
  box-shadow: 0 16px 40px rgba(2,6,23,.22);
  backdrop-filter: blur(8px);

  display: grid;
  place-items: center;
  cursor: pointer;

  /* ✅ invisibile di default, anche senza JS */
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .15s ease, transform .15s ease, filter .12s ease;
}

.to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.to-top:hover{ filter: brightness(1.06); }
.to-top:active{ transform: translateY(1px); }

.to-top .material-symbols-rounded{
  font-size: 28px;
  line-height: 1;
}

/* ring giallo “poste” */
.to-top::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: inherit;
  border: 3px solid rgba(255,204,0,.85);
  opacity: .22;
  pointer-events:none;
}

/* se cookie banner visibile, sposta su */
.cookie-banner:not([hidden]) ~ .to-top{
  bottom: 92px;
}
/* =========================
   Cookie banner fixed full width
========================= */
.cookie-banner[hidden]{ display:none !important; }

.cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 0;
}

.cookie-card{
  width: 100%;
  background: rgba(255,255,255,.94);
  border-top: 1px solid rgba(0,91,187,.18);
  box-shadow: 0 -18px 50px rgba(2,6,23,.14);
  backdrop-filter: blur(10px);
  padding: 14px 0;
}

@media (max-width: 640px){
  .to-top{ right: 14px; bottom: 14px; }
  .cookie-banner:not([hidden]) ~ .to-top{ bottom: 150px; }
}

@media (max-width: 640px){
  .to-top{ right: 14px; bottom: 14px; }
  .cookie-banner:not([hidden]) ~ .to-top{ bottom: 150px; }
}

/* Mobile: pulsanti 100% */
@media (max-width: 640px){
  .cookie-actions-right{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cookie-actions-right .btn{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px){
  .to-top{ right: 14px; bottom: 14px; }
  .cookie-banner:not([hidden]) ~ .to-top,
  .cookie-banner:not([hidden]) + .to-top{
    bottom: 140px;
  }
}

/* Responsive: su mobile non copre troppo, va sotto */
@media (max-width: 640px){
  .promo-card--hero{
    position: static;
    margin-top: 12px;
    width: 100%;
  }
  .hero--bg .hero-shell{ padding-bottom: 0; }
}

/* ===== Tablet large (<= 1024px) ===== */
@media (max-width: 1024px){
  .hero{ padding: 36px 0 10px; }
  .hero-grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
  .quotes{ grid-template-columns: 1fr; }
  .info-grid, .contact-grid, .two-col{ grid-template-columns: 1fr; }
}

/* ===== Tablet / Mobile (<= 768px) ===== */
@media (max-width: 768px){
  .section{ padding: 26px 0; }
  .header-inner{ padding: 12px 0; }
  .cta-row{ gap:8px; }

  .quick-info{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; gap:12px; }

  .footer-grid{ grid-template-columns: 1fr; }

  .field-row{ grid-template-columns: 1fr; }
}

/* ===== Small mobile (<= 420px) ===== */
@media (max-width: 420px){
  .container{ width: min(var(--container), 100% - 24px); }
  .card{ padding:14px; }
  .card-img{
    width: calc(100% + 28px);
    margin: -14px -14px 10px;
  }
  .btn{ width: 100%; }          /* CTA comode su mobile */
}
@media (max-width: 768px){
  .nav-toggle{ display:inline-flex; }

  .site-nav{
    position:absolute;
    left:16px; right:16px; top:66px;
    display:none;
    flex-direction:column;
    gap:8px;
    padding:12px;
    border-radius: 16px;
    border:1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-2);
  }
  .site-nav.open{ display:flex; }
}
/* ===========================
   FIX NAV MOBILE: in griglia col container
=========================== */
@media (max-width: 768px){
  .header-inner{ position: relative; }

  .site-nav{
    top: calc(100% + 10px) !important; /* sotto header */
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
}
@media (max-width: 640px){
  .cookie-actions{
    gap: 10px;
  }

  .cookie-actions-right{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr; /* ✅ stack */
    gap: 10px;
  }

  .cookie-actions-right .btn{
    width: 100%;               /* ✅ 100% */
    justify-content: center;
  }
}