body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #f7fdf9;
  color: #14532d;
}
.hero {
  background: linear-gradient(135deg, #14532d, #22c55e);
  color: white;
  text-align: center;
  padding: 40px 20px;
}
.logo {
  width: 140px;
  margin-bottom: 10px;
  filter: drop-shadow(0px 0px 2px white);
}
.subtitle {
  font-size: 1.2rem;
  opacity: 0.95;
}
.cta-button {
  display: inline-block;
  margin-top: 15px;
  background-color: white;
  color: #14532d;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.cta-button:hover {
  background-color: #f0fdf4;
}

.container {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
}
.gallery img {
  width: 100%;
  height: 260px;
  border-radius: 12px;
  object-fit: cover;
  transition: transform 0.3s ease;
}
h1, h2 {
  margin-bottom: 10px;
}

.topbar {
  background: white;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.top-logo {
  width: 100px;
}
.top-title h1 {
  font-size: 2.5rem;
  margin: 0;
}
.top-title .subtitle {
  font-size: 1.1rem;
  color: #4b5563;
  margin-top: 5px;
}
.hero-button {
  text-align: center;
  margin-top: 20px;
}

.topbar {
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
}
.top-title {
  flex-grow: 1;
}
.top-title h1 {
  text-align: center;
  font-size: 3rem;
}
.top-title .subtitle {
  text-align: center;
}

.hero-title-centered {
  font-size: 3rem;
  text-align: center;
  margin-top: 10px;
}
.hero-logo-small {
  display: block;
  margin: auto;
  width: 100px;
  filter: drop-shadow(0px 0px 3px white);
}
.separator {
  border: none;
  border-top: 1px solid #ccc;
  margin: 50px 0;
}
.prezzi-section {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.prezzi-select {
  flex: 1;
  min-width: 220px;
}
.prezzo-output-box {
  flex: 1;
  min-width: 300px;
  background: #f0fdf4;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  color: #14532d;
}
.prezzo-output-box ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.hero-img .subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: #f3f4f6;
  margin-top: 10px;
}

.hero-img {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

main.container {
  background: #ffffff;
  padding: 40px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  margin-top: -350px;
  position: relative;
  z-index: 10;
}

.subtitle-visible {
  color: #22c55e !important;
  font-weight: 500;
  font-size: 1.3rem;
  text-align: center;

  color: #22c55e;
  font-weight: 500;
  font-size: 1.3rem;
  text-align: center;

  color: #22c55e;
  font-weight: 500;
  font-size: 1.3rem;
  
    -1px -1px 0 #22c55e,
     1px -1px 0 #22c55e,
    -1px  1px 0 #22c55e,
     1px  1px 0 #22c55e;
  color: #4ade80;
  font-weight: 500;
  font-size: 1.3rem;

  text-align: center;
  color: white;
  font-size: 1.2rem;
  margin-top: 20px;
}
.cta-wrapper {
  text-align: center;
  margin-top: 20px;
}

.hero-img {
  height: 110vh;
}
.separator {
  border: none;
  border-top: 1px solid #ccc;
  margin: 50px 0;
}
.prezzi-section {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.prezzi-select {
  flex: 1;
  min-width: 220px;
}
.prezzo-output-box {
  flex: 1;
  min-width: 300px;
  background: #f0fdf4;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  color: #14532d;
}
.prezzo-output-box ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.booking-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.booking-form input,
.booking-form textarea,
.booking-form button,
.booking-form label {
  font-size: 1rem;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
.booking-form button {
  background-color: #22c55e;
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
}
.booking-form button:hover {
  background-color: #16a34a;
}

.totale-prezzo {
  font-weight: bold;
  color: #166534;
  background: #dcfce7;
  padding: 10px;
  border-radius: 8px;
}
.cta-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-button-outline {
  background-color: transparent;
  color: #22c55e;
  border: 2px solid #22c55e;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}
.cta-button-outline:hover {
  background-color: #22c55e;
  color: white;
}

.cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cta-secondary-wrapper {
  margin-top: 5px;
}

.separatore {
  margin: 50px auto;
  width: 80%;
  border-bottom: 2px solid #cceccc;
}

section {
  margin-bottom: 40px;
}

section h2 {
  font-size: 2rem;
  color: #14532d;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}



/* Limiter la largeur générale */
.container, .prezzi-section, .gallery, .booking-form {
  max-width: 900px;
  margin: auto;
}

/* Hero section avec sfondo chiaro e titolo verde */
.hero {
  background: #ecfdf5; /* verdino chiaro */
  color: #14532d;
  padding: 60px 20px;
}
.hero h1 {
  font-size: 3.5rem;
  color: #14532d;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  margin-bottom: 10px;
}
@media screen and (max-width: 600px) {
  .hero h1 {
    font-size: 2rem;
  }
}

.hero .subtitle {
  color: #14532d;
  font-size: 1.3rem;
  opacity: 0.85;
}

/* Corps du site */
body {
  font-family: 'Segoe UI', sans-serif;
  background: #f0fdf4; /* verdino molto chiaro */
  color: #14532d;
}

/* Réduction des paddings/marges */
section {
  margin-bottom: 30px;
  padding: 10px 20px;
}

/* FORM DI PRENOTAZIONE */
.form-section {
  padding: 30px 20px;
  background: white;
  margin: 40px auto;
  max-width: 900px;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

.form-section h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #2e8b57;
}

label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
  color: #333;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

button {
  margin-top: 20px;
  padding: 12px 20px;
  background-color: #2e8b57;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #267347;
}

.prezzo {
  margin-top: 15px;
  font-weight: bold;
  color: #2e8b57;
  text-align: center;
}
.contenitore-bottoni {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center; /* centra i bottoni */
  flex-wrap: wrap;         /* per adattamento mobile */
}


.bottone-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  color: white;
  font-weight: bold;
  padding: 14px 22px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 17px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
}



.bottone-cta:hover {
  background-color: #1ebe5d;
  transform: translateY(-2px);
}

.bottone-cta:active {
  transform: scale(0.98);
}

.cta-final {
  background-color: #ecfdf5;
  color: #14532d;
  padding: 30px 20px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  border-top: 2px solid #cceccc;
}

.cta-final a {
  color: #25d366;
  text-decoration: none;
  font-weight: 700;
}

.cta-final a:hover {
  text-decoration: underline;
}

.contatti-section {
  background-color: #f0fdf4;
  padding: 40px 20px;
  border-radius: 12px;
  max-width: 900px;
  margin: 0 auto 40px auto;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.contatti-section h2 {
  text-align: center;
  color: #14532d;
  font-size: 2rem;
  margin-bottom: 20px;
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.contatti-box {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.8;
}

.contatti-box a {
  color: #22c55e;
  text-decoration: none;
  font-weight: bold;
}

.contatti-box a:hover {
  text-decoration: underline;
}

.contatti-blocco {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-top: 2px solid #bbf7d0;
  border-bottom: 2px solid #bbf7d0;
  padding: 60px 20px;
  margin-top: 80px; /* 👉 Spazio maggiore dalla sezione precedente */
  text-align: center;
}


.contenuto-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.icona-whatsapp {
  font-size: 60px;
  color: #22c55e;
}

.testo-whatsapp {
  text-align: left;
  max-width: 500px;
}

.testo-whatsapp p {
  font-size: 1.4rem;
  color: #14532d;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.btn-whatsapp {
  display: inline-block;
  background-color: #25d366;
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #1ebe5d;
}

@media screen and (max-width: 600px) {
  .bottone-cta {
    font-size: 0.95rem;
    padding: 10px 16px;
    border-radius: 10px;
  }
}

@media screen and (max-width: 600px) {
  .tariffe h2,
  .form-section h2,
  .contatti-section h2,
  section h2,
  h2 {
    font-size: 1.4rem !important;
    margin-bottom: 14px !important;
    text-align: center !important;
  }
}
.form-section form {
  margin-top: 25px; /* spazio tra il titolo e il modulo */
}
/* Titolo galleria a tutta larghezza */
.gallery h2 {
  grid-column: 1 / -1;   /* il titolo si estende su tutte le colonne */
  text-align: center;
  margin: 0 0 20px 0;
  font-size: 2rem;
}
/* Spazio tra titolo e form prenotazione */
.form-section form {
  margin-top: 24px;
}
/* --- Card Intro elegante --- */
.intro-card {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 10% -10%, #d1fae5 0%, transparent 60%),
              #ffffff;
  border: 1px solid #cceccc;
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: 0 8px 24px rgba(20, 83, 45, 0.08);
  margin: 24px auto 8px auto;
  max-width: 900px;
}

/* Accento decorativo morbido */
.intro-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(200px 200px at 50% 50%, #bbf7d0 0%, transparent 70%);
  filter: blur(6px);
  opacity: .5;
}

/* Etichetta */
.intro-badge {
  display: inline-block;
  background: #ecfdf5;
  color: #14532d;
  border: 1px solid #bbf7d0;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .2px;
}

/* Titolo intro */
.intro-title {
  margin: 10px 0 6px 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: #14532d;
  line-height: 1.2;
}

/* Testo intro */
.intro-text {
  margin: 6px 0 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #124a28;
}

/* --- Animazioni di entrata morbide --- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.show {
  opacity: 1;
  transform: none;
}

/* Rispetta chi riduce le animazioni */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.show {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* --- Transizioni chic per immagini e bottoni --- */
.gallery img {
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
  border-radius: 12px;
}
.gallery a:hover img {
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

/* CTA già esistenti: aggiungo un micro “lift” */
.bottone-cta {
  transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.bottone-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

/* Spazio tra titolo e form (prenotazione) */
.form-section form {
  margin-top: 24px;
}

/* Titolo Galleria centrato sopra la griglia (se usi <h2> dentro .gallery) */
.gallery h2 {
  text-align: center;
  margin: 0 0 18px 0;
  font-size: 2rem;
  color: #14532d;
}

/* Scroll dolce tra le sezioni */
html { scroll-behavior: smooth; }

/* Header con gradiente molto leggero e animato */
.hero {
  position: relative;
  overflow: hidden;
  background: #ecfdf5; /* resta il tuo verdino */
}

/* pellicola animata sopra lo sfondo */
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(60% 40% at 10% 20%, rgba(34,197,94,.12), transparent 60%),
              radial-gradient(60% 40% at 90% 0%,  rgba(16,185,129,.10), transparent 60%),
              radial-gradient(60% 40% at 50% 100%, rgba(34,197,94,.08), transparent 60%);
  animation: heroFloat 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroFloat {
  0%   { transform: translateY(-6px) scale(1);   filter: blur(0px); }
  100% { transform: translateY(6px)  scale(1.03); filter: blur(0.3px); }
}
/* Stile titoli di sezione */
section h2 {
  position: relative;
  display: block;
  text-align: center;
  font-weight: 800;
  letter-spacing: .2px;
}
section h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #86efac);
  opacity: .7;
}
/* Immagini galleria: micro parallax lift */
.gallery a { display: block; border-radius: 12px; overflow: hidden; }
.gallery img {
  transition: transform .45s cubic-bezier(.22,.61,.36,1), filter .45s ease, box-shadow .45s ease;
}
.gallery a:hover img {
  transform: scale(1.03);
  filter: saturate(1.05);
  box-shadow: 0 16px 32px rgba(0,0,0,.14);
}

/* Bottoni CTA: feedback tattile migliore */
.bottone-cta {
  transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease;
}
.bottone-cta:active { transform: translateY(1px) scale(.99); }

/* Focus gradevole sui campi del form */
input, select, textarea {
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #86efac;
  box-shadow: 0 0 0 4px rgba(134,239,172,.35);
}
/* Evidenziazione prezzo dinamico */
.prezzo-output-box.flash {
  animation: pulseBox .8s ease;
  box-shadow: 0 10px 22px rgba(34,197,94,.15);
}
@keyframes pulseBox {
  0% { transform: scale(1);   }
  50%{ transform: scale(1.015);}
  100%{transform: scale(1);   }
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.gallery-container img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.gallery-container img:hover {
  transform: scale(1.05);
}

.faq {
  padding: 40px 20px;
}

.faq-item {
  margin-bottom: 15px;
  background: #f9f9f9;
  padding: 10px 15px;
  border-radius: 6px;
}

/* Box intro elegante */
.hero-card{
  margin: 18px 0 10px;
  padding: 24px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg,#effaf1,#e9f7ef);
  border: 1px solid #cfe8d6;
  box-shadow: 0 8px 24px rgba(20,101,49,.08);
  text-align: left;
}
.hero-card h1{ margin:0 0 8px; font-size: 32px; color:#124d2c; }
.hero-card p{ margin:0; color:#2b3c33; font-size:1.05rem; line-height:1.55; }

.quality{ margin:22px 0 10px; }
.quality-list{ 
  margin:10px 0 0 0; padding:0; list-style:none; 
  display:grid; gap:10px;
}
.quality-list li{
  background:#fff; border:1px solid #e6efe8; border-radius:14px; padding:14px 16px;
}
.poi-wrap{ margin:22px 0; display:grid; gap:14px; }
.poi{
  display:grid; grid-template-columns: 180px 1fr; gap:14px;
  background:#fff; border:1px solid #e6e6e6; border-radius:16px; padding:12px;
}
.poi figure{ margin:0; overflow:hidden; border-radius:12px; aspect-ratio:4/3; }
.poi img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.poi:hover img{ transform: scale(1.06); }
.poi h3{ margin:0 0 6px; }
@media (max-width:800px){
  .poi{ grid-template-columns: 1fr; }
}
.gallery{ margin:8px 0 4px; }
.grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.ph{ position:relative; aspect-ratio: 4/3; overflow:hidden; border-radius:16px; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.ph img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.ph:hover img{ transform: scale(1.06); }
.ph figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  color:#fff; font-weight:600; font-size:.95rem;
}
@media (max-width:980px){ .grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns: 1fr; } }

.link-elegante {
  color: #1d4ed8;           /* blu elegante */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.link-elegante:hover {
  color: #16a34a;           /* verde elegante al passaggio */
  border-color: #16a34a;
}

/* --- HERO IMPATTO FORTE --- */
.hero-full {
  position: relative;
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0,0,0,.18);
  margin: 18px 0 14px;
}
.hero-full img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.55) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 24px;
}
.hero-overlay h1 {
  margin: 0 0 6px;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff; letter-spacing: .3px;
}
.hero-overlay p {
  margin: 0;
  color: #e7f8ee;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

/* quick-nav più elegante */
.quick-nav{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin: 14px 0 20px;
}
.chip{
  display:inline-block;padding:8px 14px;border-radius:999px;
  background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d;
  font-weight:700;text-decoration:none;transition:background .25s ease, transform .15s ease;
}
.chip:hover{ background:#dcfce7; transform: translateY(-1px); }

/* sezione-box coerenza */
.section-box{
  margin:14px 0;padding:20px 18px;border:1px solid #e2ece5;border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f8fbf8);box-shadow:0 8px 28px rgba(18,77,44,.06)
}
.section-box h2{ margin-top:0; color:#124d2c; }

/* card riassunti */
.card-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.card{background:#fff;border:1px solid #e6efe8;border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.card h3{margin:0 0 6px}
.card p{margin:0}
@media (max-width:980px){ .card-list{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .card-list{grid-template-columns:1fr;} }

/* ========== GRID 2x ========== */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* Box mini eleganti (più compatti) */
.box-mini{
  padding: 16px 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  border: 1px solid #e7efe7 !important;
  background: #fff !important;
}
.box-mini h2{ margin: 0 0 8px; font-size: 1.25rem; color:#124d2c; }
.box-mini .muted{ color:#5b6b61; }

/* Chip nav ordinato (solo piccoli ritocchi) */
.quick-nav{ margin: 10px 0 12px; gap: 8px; }
.chip{ padding: 7px 12px; font-weight: 700; }

/* Liste “pill” compatte */
.pill-list{ gap: 8px; }
.pill{ padding: 7px 10px; font-weight: 600; }

/* Card-list con card un po' più compatte */
.card-list{ gap: 10px; }
.card{ padding: 12px; border-radius: 12px; }
.card h3{ font-size: 1.05rem; }

/* Spazio sezioni più serrato */
.section-box{ margin: 12px 0; padding: 18px; }

/* griglia 2 colonne */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* box mini compatti */
.box-mini{
  padding: 16px 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  border: 1px solid #e7efe7 !important;
  background: #fff !important;
}
.box-mini h2{ margin: 0 0 8px; font-size: 1.25rem; color:#124d2c; }

/* ====== HERO: centrato, senza bordo, più elegante ====== */
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; } /* simmetria dx/sx */

.hero-full{
  position: relative;
  width: 100%;
  margin: 18px auto 10px;       /* centratura orizzontale */
  border: none !important;      /* rimuove quel bordo grigio */
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.16); /* ombra morbida, non “cornice” */
  background: #0b3b2a;          /* fallback sotto la foto */
}
.hero-full img{
  width: 100%;
  height: clamp(320px, 44vw, 520px); /* responsive, niente altezza fissa */
  object-fit: cover;
  object-position: center center;    /* centrata davvero */
  display: block;
}

.hero-overlay{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(18px, 3vw, 26px);
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 65%, rgba(0,0,0,.55) 100%);
}

.hero-overlay h1{
  margin: 0 0 6px;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .2px;
  color: #ffffff;
  text-shadow: 0 3px 16px rgba(0,0,0,.35);
}
.hero-overlay p{
  margin: 0;
  color: #e6f6ed;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* ====== Quick‑nav: più spazio e look migliore ====== */
.quick-nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: 12px;
  margin: 18px 0 24px;        /* più aria sopra/sotto */
}
.chip{
  display:inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #14532d;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .15s ease, background .25s ease, box-shadow .2s ease;
}
.chip:hover{ background:#dcfce7; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.08); }

/* ====== Box: più compatti e allineati 2× ====== */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0;
}
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } }

.section-box{
  margin: 12px 0;
  padding: 18px 18px;
  border: 1px solid #e7efe7;
  border-radius: 18px;
  background: linear-gradient(180deg,#ffffff,#f8fbf8);
  box-shadow: 0 8px 28px rgba(18,77,44,.06);
}
.section-box h2{
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 2.2vw, 1.4rem);
  color:#124d2c;
}

/* card e liste un filo più leggere */
.card-list{ display:grid; grid-template-columns: 1fr; gap: 10px; }
.card{ background:#fff; border:1px solid #e6e6e6; border-radius:12px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.card h3{ margin:0 0 6px; font-size:1.06rem; }
.quality-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.quality-list li{ background:#fff; border:1px solid #e6efe8; border-radius:12px; padding:12px 14px; }

/* Utility per sicurezza di centratura e resa */
img{ max-width:100%; height:auto; display:block; }


/* === LAYOUT PULITO, SIMMETRICO === */
.wrap{ max-width:1120px; margin:0 auto; padding-inline:16px; }

/* === HERO: zero bordo, zero ombra, centrato, più aria sotto === */
.hero-full{
  position:relative;
  width:100%;
  margin: 6px auto 0;           /* niente margini strani ai lati */
  border:none !important;
  box-shadow:none !important;    /* via ogni ombra */
  border-radius:18px;            /* angoli morbidi, senza “cornice” */
  overflow:hidden;
  background:transparent;
}
.hero-full img{
  width:100%;
  height: clamp(360px, 46vw, 560px);
  object-fit:cover;
  object-position:center center;
  display:block;
}
/* overlay più leggero per non “sporcare” la foto */
.hero-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(18px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.36) 100%);
}
.hero-overlay h1{
  margin:0 0 6px;
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height:1.05;
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
  text-shadow:none;              /* niente glow pesante */
}
.hero-overlay p{
  margin:0;
  color:#eaf7f0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight:600;
}

/* === SPAZIO TRA HERO E BOTTONCINI (più respiro) === */
.quick-nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px;
  margin: 28px 0 34px;          /* PIÙ SPAZIO tra immagine e bottoni */
}

/* === CHIP minimal: senza ombre, eleganti === */
.chip{
  padding:9px 16px;
  border-radius:999px;
  background:transparent;        /* pulito */
  border:2px solid #bfead2;      /* tratto fine verde acqua */
  color:#125b37;
  font-weight:700;
  text-decoration:none;
  box-shadow:none;               /* niente ombre */
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .08s ease;
}
.chip:hover{ background:#eafbf1; border-color:#90e0b7; transform: translateY(-1px); }

/* === BOX sezioni: nessuna ombra, bianchi e ariosi === */
.section-box{
  margin: 18px 0;
  padding: 20px 20px;
  background:#fff;
  border:1px solid #e9eee9;     /* linea leggerissima */
  border-radius:18px;
  box-shadow:none;               /* via ombre */
}
.section-box h2{
  margin:0 0 8px;
  font-size: clamp(1.22rem, 2.3vw, 1.42rem);
  font-weight:800;
  color:#124d2c;
}

/* === GRID 2× ordinata (già usata per le coppie sx/dx) === */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;                      /* un filo più largo */
  margin: 16px 0;
}
@media (max-width: 900px){ .grid-2{ grid-template-columns:1fr; } }

/* === LISTE e CARD alleggerite === */
.quality-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.quality-list li{ background:#fff; border:1px solid #edf2ed; border-radius:12px; padding:12px 14px; }

.card-list{ display:grid; grid-template-columns:1fr; gap:10px; }
.card{
  background:#fff; border:1px solid #ececec; border-radius:12px; padding:12px;
  box-shadow:none;               /* niente ombre */
}
.card h3{ margin:0 0 6px; font-size:1.06rem; }

/* === IMMAGINI === */
img{ display:block; max-width:100%; height:auto; }
/* ---------- wrap simmetrico su tutte le pagine ---------- */
.wrap{ max-width:1120px; margin:0 auto; padding-inline:16px; }

/* ---------- HOME: logo centrato ---------- */
/* applica il flex SOLO alle barre orizzontali, non a tutti i header */
.topbar, .site-header{
  display:flex; align-items:center; justify-content:center;
}

.logo, .logo-link, .top-logo{
  display:inline-block; margin:0 auto;
}

/* ---------- HOME: galleria centrata ---------- */
.gallery, .galleria, .photo-grid{
  max-width:1120px; margin:0 auto;
}
.gallery .grid, .galleria .grid, .photo-grid .grid{
  display:grid; gap:12px; justify-items:center;
}

/* ---------- SCOPRI PALINURO: ripristino "Home" + "Prenotazione" in alto ---------- */
.topbar-mini{
  display:flex; gap:14px; align-items:center; justify-content:flex-end;
  padding:10px 0;
}
.topbar-mini a{
  text-decoration:none; font-weight:700;
  color:#14532d; border-bottom:2px solid transparent; padding-bottom:2px;
}
.topbar-mini a:hover{ border-color:#90e0b7; }

/* ---------- SCOPRI PALINURO: hero più basso + più spazio ai bottoncini ---------- */
.hero-full{ margin:8px auto 24px; border:none !important; box-shadow:none !important; border-radius:18px; overflow:hidden; }
.hero-full img{ width:100%; height:clamp(320px, 38vw, 480px); object-fit:cover; object-position:center; }
.hero-overlay{ padding:clamp(16px, 3vw, 24px); background:linear-gradient(180deg,rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.36) 100%); }
.hero-overlay h1{ margin:0 0 4px; font-size:clamp(2rem, 4.2vw, 3rem); font-weight:800; color:#fff; }
.hero-overlay p{ margin:0; color:#eaf7f0; font-weight:600; }

/* più aria tra hero e quick-nav */
.quick-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin: 26px 0 34px; }

/* chip minimal */
.chip{ padding:9px 16px; border-radius:999px; background:transparent; border:2px solid #bfead2; color:#125b37; font-weight:700; text-decoration:none; transition:.2s; }
.chip:hover{ background:#eafbf1; border-color:#90e0b7; }

/* box puliti, senza ombre pesanti */
.section-box{ margin:16px 0; padding:18px 18px; background:#fff; border:1px solid #e9eee9; border-radius:18px; box-shadow:none; }
.section-box h2{ margin:0 0 8px; font-size:clamp(1.22rem, 2.3vw, 1.42rem); font-weight:800; color:#124d2c; }

/* griglia 2× per le coppie sx/dx */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

/* ========== RIPRISTINO HERO HOME "COM'ERA PRIMA" (TUTTO CENTRATO) ========== */

/* Contenitore hero della home */
.home-hero,
header.site-hero,
.site-hero {
  text-align: center !important;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Logo centrato sopra il titolo */
.site-hero .logo-wrap,
.site-hero .logo-link,
.site-hero .logo,
.site-hero img.top-logo {
  display: block !important;
  margin: 0 auto !important;
}
.site-hero img.top-logo {
  height: 92px;      /* regola se serve */
  width: auto;
}

/* Titolo principale centrato */
.site-hero h1 {
  margin: 18px auto 8px !important;
  text-align: center !important;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-weight: 900;
  color: #124d2c;
}

/* Sottotitolo centrato sotto il titolo */
.site-hero .subtitle,
.site-hero p.subtitle {
  margin: 0 auto 18px !important;
  text-align: center !important;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  color: #2e4a3b;
}

/* Bottoni affiancati e centrati (non più in colonna) */
.site-hero .cta-wrapper {
  display: inline-flex !important;   /* inline per restare centrati dentro il text-align:center */
  gap: 24px;                         /* distanza tra i due bottoni */
  align-items: center;
  justify-content: center;
}
.site-hero .cta-wrapper a,
a.bottone-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  color: #fff;
  background: #16a34a;
  border: 1px solid #16a34a;
  box-shadow: 0 8px 22px rgba(22,163,74,.18);
}
.site-hero .cta-wrapper a:hover,
a.bottone-cta:hover {
  background: #128a3e;
}

/* Margine sotto il blocco bottoni per separarlo dal resto della pagina */
.site-hero .cta-wrapper { margin-bottom: 22px; }

/* Galleria centrata (se vedevi decentramento) */
.gallery, .galleria, .photo-grid { max-width: 1120px; margin: 0 auto; }
.gallery .grid, .galleria .grid, .photo-grid .grid { justify-items: center; }

/* ==== HOME HERO: layout verticale centrato ==== */
header.site-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 14px;                 /* spazio verticale tra gli elementi */
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Logo centrato e su una riga a parte */
header.site-hero .logo-link,
header.site-hero .logo-wrap {
  display: block !important;
  margin: 0 auto !important;
}
header.site-hero .top-logo {
  height: 92px;              /* regola se vuoi più piccolo/grande */
  width: auto;
  display: block;
  margin: 0 auto;
}

/* Titolo e sottotitolo sotto il logo */
header.site-hero h1 {
  margin: 8px 0 0;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.1;
  font-weight: 900;
}
header.site-hero .subtitle {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  color: #2e4a3b;
}

/* Bottoni: restano centrati, affiancati su desktop; vanno a capo su mobile */
header.site-hero .cta-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

/* Se da qualche parte avevi messo un header "orizzontale", lo neutralizziamo solo in home */
header.site-hero.site-header,
.site-hero.site-header {
  justify-content: center !important;
}
/* FIX: la hero della HOME deve essere verticale e centrata */
header.hero{
  display: block !important;        /* disattiva il flex globale */
  text-align: center !important;
  padding: 40px 20px;               /* come già usi per la hero */
}
header.hero .logo{
  display: block !important;
  margin: 0 auto 10px !important;
  width: 140px;                     /* la tua dimensione attuale */
}
header.hero h1{
  margin: 12px 0 6px;
  font-weight: 900;
}
header.hero .subtitle{
  margin: 0 0 16px;
}
header.hero .contenitore-bottoni{
  display: inline-flex;             /* centrati dentro il text-align center */
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Spaziatura verticale HERO home --- */
header.hero {
  padding-top: 60px;   /* più spazio sopra la pagina (logo) */
  padding-bottom: 40px;
}

/* logo */
header.hero .logo {
  margin-bottom: 26px; /* spazio tra logo e titolo */
}

/* titolo */
header.hero h1 {
  margin: 0 0 16px;    /* spazio sotto il titolo */
}

/* sottotitolo */
header.hero .subtitle {
  margin-bottom: 22px; /* spazio sotto il sottotitolo prima dei bottoni */
}
/* Thumbnail piccole */
figure.thumb {
  display:inline-block;
  margin:8px 0;
  cursor:pointer;
  max-width: 220px;   /* dimensione massima della miniatura */
}
figure.thumb img {
  width:100%;
  height:auto;
  border-radius:12px;
  transition: transform .2s ease;
}
figure.thumb:hover img { transform: scale(1.04); }

/* Overlay fullscreen */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
.lightbox::after {
  content: "✕";
  position: absolute;
  top: 24px;
  right: 30px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}
/* Thumbnails cliccabili */
figure.thumb{display:inline-block;margin:8px 0;cursor:pointer;max-width:220px}
figure.thumb img{width:100%;height:auto;border-radius:12px;transition:transform .2s ease}
figure.thumb:hover img{transform:scale(1.04)}
/* Overlay fullscreen */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;justify-content:center;align-items:center;z-index:999;opacity:0;pointer-events:none;transition:opacity .25s}
.lightbox img{max-width:90%;max-height:90%;border-radius:8px}
.lightbox.active{opacity:1;pointer-events:auto}
.lightbox::after{content:"✕";position:absolute;top:24px;right:30px;font-size:2rem;color:#fff;cursor:pointer}

/* --- HERO: nessun bordo/ombra + titolo elegante --- */
.hero-full{
  margin: 10px auto 18px !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;        /* niente bordi arrotondati */
  overflow: hidden;
}
.hero-full img{
  height: clamp(340px, 42vw, 520px) !important;
  object-fit: cover; object-position: center;
}
.hero-overlay{
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.30) 65%, rgba(0,0,0,.42) 100%) !important;
  padding: clamp(18px, 3vw, 28px) !important;
}
.hero-overlay h1{
  margin: 0 0 6px !important;
  font-size: clamp(2.4rem, 4.8vw, 3.4rem) !important;
  line-height: 1.04; font-weight: 900; letter-spacing: .2px;
  text-shadow: none !important;
}
.hero-overlay p{ color:#eaf7f0 !important; }

/* --- BLOCCO MEDIA: foto a sinistra, testo a destra (usalo per #storia) --- */
.media{
  display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start;
}
.media figure{ margin:0; border-radius:12px; overflow:hidden; }
.media img{ width:100%; height:auto; display:block; }
@media (max-width: 760px){ .media{ grid-template-columns:1fr; } }

/* --- QUALITÀ: mini-galleria armoniosa --- */
.thumb-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px; margin-top: 10px;
}
.thumb-grid figure{ margin:0; border-radius:12px; overflow:hidden; }
.thumb-grid img{
  width:100%; aspect-ratio: 4 / 3; object-fit: cover; display:block;
}
/* se vuoi micro zoom al passaggio: */
.thumb-grid img{ transition: transform .25s ease; }
.thumb-grid img:hover{ transform: scale(1.04); }

/* Sposta il punto focale dell'immagine verso il basso */
.poi img.focus-bottom { 
  object-position: center 85%;   /* prova 85%, aumenta verso 100% per ancora più “basso” */
}

/* forza il fuoco in basso per la foto del Buon Dormire */
.poi img.focus-bottom{
  object-position: 50% 90% !important; /* aumenta verso 100% per scendere ancora */
}

/* === Dimensioni identiche per tutte le immagini delle card === */

/* larghezza colonna immagine e rapporto */
:root{
  --poi-img-w: 220px;      /* puoi aumentare a 240/260 se le vuoi più grandi */
  --poi-img-ratio: 4 / 3;  /* tutte in 4:3, coerenti e armoniose */
}

/* card "Cosa vedere" */
.poi{
  display: grid;
  grid-template-columns: var(--poi-img-w) 1fr; /* colonna immagine fissa */
  gap: 14px;
}

/* contenitore immagine con ritaglio identico */
.poi figure{
  margin: 0;
  width: var(--poi-img-w);
  aspect-ratio: var(--poi-img-ratio); /* altezza coerente con il rapporto */
  overflow: hidden;
  border-radius: 12px;
}

/* l'immagine riempie e viene ritagliata in modo uniforme */
.poi figure img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* riempie senza deformare */
  object-position: center; /* centrata; cambia se vuoi spostare il fuoco */
}

/* responsivo: su mobile la colonna immagine va in alto ma resta 4:3 */
@media (max-width: 800px){
  .poi{ grid-template-columns: 1fr; }
  .poi figure{ width: 100%; } /* occupa tutta la larghezza card, resta 4:3 */
}
/* === TESTI PIÙ A SINISTRA & ALLINEATI NELLE CARD .poi === */
.poi{
  /* testo più vicino alla foto e layout regolare */
  padding: 12px 12px 12px 10px !important;
  gap: 10px !important;
  align-items: center;               /* allinea verticalmente i contenuti */
}
.poi figure{ margin: 0 !important; }
.poi > div{
  padding-left: 0 !important;        /* niente rientro a sinistra */
  text-align: left !important;
}
.poi h3{
  margin: 0 0 6px !important;
  line-height: 1.2;
}
.poi p{
  margin: 0 !important;
  line-height: 1.55;
}

/* Assicura ritaglio omogeneo per TUTTE le immagini delle card */
.poi figure{
  width: 220px;                       /* se vuoi più grande: 240/260 */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
}
.poi figure img{
  width: 100%;
  height: 100%;
  object-fit: cover !important;       /* riempie senza deformazioni */
}

/* === FOCUS DELLE IMMAGINI SPECIFICHE === */

/* Buon Dormire: mostra di più la parte BASSA (sposta focus in basso) */
.poi img[src$="buondormire.jpg"]{
  object-position: 50% 90% !important;  /* aumenta verso 100% se vuoi ancora più “basso” */
}

/* Arco: sposta il focus MOLTO a destra */
.poi img[src$="arco.jpg"],
.poi img[src$="arco-naturale.jpg"]{
  object-position: 85% 50% !important;  /* prova 90% per ancora più a destra */
}
/* === CARD .poi: testo molto più a destra e zero sovrapposizioni === */

/* 1) Larghezza colonna immagine e spaziatura orizzontale */
:root{
  --poi-img-w: 260px;                 /* prima era ~220px: più largo = layout più stabile */
}
.poi{
  display: grid;
  grid-template-columns: var(--poi-img-w) 1fr !important;
  column-gap: 28px !important;        /* più spazio tra foto e testo (solo orizzontale) */
  row-gap: 14px;                      /* spazio verticale tra card */
  align-items: start !important;      /* NIENTE centratura verticale: evita sovrapp. */
  padding: 12px 12px !important;      /* padding regolare sui bordi della card */
}

/* 2) Blocco immagine: dimensioni fisse e nessuna “spinta” */
.poi figure{
  margin: 0 !important;
  width: var(--poi-img-w) !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  flex-shrink: 0;                     /* non si restringe mai */
  position: relative;
  z-index: 0;
}
.poi figure img{
  width: 100%; height: 100%;
  object-fit: cover !important;
  display: block;
}

/* 3) Blocco testo: spostato MOLTO verso destra e sempre sopra la foto */
.poi > div{
  min-width: 0;                       /* evita overflow della griglia */
  margin-left: 18px !important;       /* ulteriore “stacco” dal bordo della foto */
  position: relative;
  z-index: 1;                         /* il testo sta sempre sopra, mai sotto l’immagine */
  text-align: left !important;
}
.poi h3{
  margin: 0 0 8px !important;
  line-height: 1.2;
}
.poi p{
  margin: 0 !important;
  line-height: 1.55;
}

/* 4) Focus specifico delle foto (come da tua richiesta precedente) */
/* Buon Dormire: mostra più la parte bassa */
.poi img[src$="buondormire.jpg"]{
  object-position: 50% 92% !important;  /* aumenta verso 100% se vuoi ancora più “basso” */
}
/* Arco/Arco Naturale: sposta molto a destra */
.poi img[src$="arco.jpg"],
.poi img[src$="arco-naturale.jpg"]{
  object-position: 90% 50% !important;  /* 90% = molto a destra; prova 95% se serve */
}

/* 5) Mobile: layout a una colonna e testo senza margine extra */
@media (max-width: 800px){
  .poi{ grid-template-columns: 1fr !important; column-gap: 0 !important; }
  .poi figure{ width: 100% !important; }
  .poi > div{ margin-left: 0 !important; }
}
/* — micro shift: testo un po' più a sinistra nelle card .poi — */
.poi{
  column-gap: 18px !important;   /* prima 28px → avvicina di 10px */
}
.poi > div{
  margin-left: 8px !important;    /* prima 18px → avvicina di 10px */
}
/* STORIA: immagine (statua) a sinistra, testo a destra senza cambiare HTML */
.section-box .media{
  display: grid;
  grid-template-columns: 240px 1fr;  /* col sx = immagine, col dx = testo */
  gap: 16px;
  align-items: start;
}

/* Forza il <figure> nella colonna di sinistra */
.section-box .media figure{
  grid-column: 1 !important;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}

/* Tutto il resto (div con titolo + testo) nella colonna di destra */
.section-box .media > :not(figure){
  grid-column: 2 !important;
}

/* Immagine piena nel riquadro */
.section-box .media figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: impila immagine sopra, testo sotto */
@media (max-width: 760px){
  .section-box .media{
    grid-template-columns: 1fr;
  }
  .section-box .media > :not(figure){
    grid-column: 1 !important;
  }
}
/* STORIA E LEGGENDA: statua a sinistra, testo a destra */
.media{
  display: grid !important;
  grid-template-columns: 260px 1fr !important; /* sx = immagine, dx = testo */
  gap: 16px !important;
  align-items: start !important;
}
.media > figure{
  grid-column: 1 !important;
  margin: 0 !important;
  border-radius: 12px;
  overflow: hidden;
}
.media > :not(figure){
  grid-column: 2 !important;   /* h2, p, div ecc. vanno a destra */
}
.media > figure img{
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Mobile: impila immagine sopra, testo sotto */
@media (max-width: 760px){
  .media{
    grid-template-columns: 1fr !important;
  }
  .media > *{
    grid-column: 1 !important;
  }
}
/* layout blocco Storia e leggenda */
.media{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
}
.media figure{
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
.media figure img{
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 760px){
  .media{ grid-template-columns: 1fr; }
}

/* === STORIA vs QUALITÀ affiancati === */
#storia.section-box{
  display: grid;
  grid-template-columns: minmax(320px, 520px) 1fr; /* sx = storia, dx = qualità */
  column-gap: 20px;
  row-gap: 12px;
  align-items: start;
}

/* Storia (sinistra): rendiamo .media un flex-row con foto piccola */
#storia .media{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;         /* niente margini extra */
  padding: 0;
}

/* Foto statua PICCOLA e fissa */
#storia .media figure{
  flex: 0 0 110px;     /* larghezza fissa della foto */
  height: 150px;       /* altezza fissa */
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
#storia .media figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* riempie senza deformare */
  object-position: center;/* regola qui il fuoco se serve */
}

/* Testo storia accanto alla foto */
#storia .media > div{
  flex: 1 1 auto;
  min-width: 0;
}
#storia .media > div h2{ margin-top: 0; }

/* Qualità (destra) va nella colonna 2 */
#storia .quality{
  grid-column: 2;
  margin: 0;              /* togli margini verticali superflui */
}

/* — Responsivo (mobile): impila tutto in una colonna — */
@media (max-width: 760px){
  #storia.section-box{
    grid-template-columns: 1fr;
  }
  #storia .quality{
    grid-column: 1;
  }
  #storia .media{
    flex-direction: column;
  }
  #storia .media figure{
    width: 100%;
    height: 180px;        /* un po' più orizzontale su mobile */
  }
}
/* === STORIA (sx) + QUALITÀ (dx) affiancati con foto statua piccola === */
#storia.storia-qualita{
  display: grid;
  grid-template-columns: minmax(320px, 520px) 1fr; /* sx = Storia, dx = Qualità */
  column-gap: 20px;
  row-gap: 12px;
  align-items: start;
}

/* blocco Storia a sinistra: testo + mini foto affiancati */
#storia.storia-qualita .media{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

/* FOTO STATUA PICCOLA (fissa) */
#storia.storia-qualita .media figure{
  flex: 0 0 110px;   /* larghezza foto */
  height: 150px;     /* altezza foto */
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
#storia.storia-qualita .media figure img{
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}

/* testo Storia accanto alla foto (sx) */
#storia.storia-qualita .media .testo{
  flex: 1 1 auto;
  min-width: 0;
}
#storia.storia-qualita .media .testo h2{ margin-top: 0; }

/* box Qualità a destra */
#storia.storia-qualita #quality{
  grid-column: 2;   /* colonna destra */
  margin: 0;        /* niente margini extra */
}

/* Mobile: impila tutto in una colonna */
@media (max-width: 760px){
  #storia.storia-qualita{
    grid-template-columns: 1fr;
  }
  #storia.storia-qualita #quality{
    grid-column: 1;
    margin-top: 12px;
  }
  #storia.storia-qualita .media{
    flex-direction: column;
  }
  #storia.storia-qualita .media figure{
    width: 100%;
    height: 180px; /* un po' più orizzontale su mobile */
  }
}
/* === DUE BOX AFFIANCATI (Storia / Qualità) === */
.temi.due-colonne{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* due colonne uguali */
  gap: 18px 20px;
  align-items: start;
}

/* singolo box */
.tema{
  padding: 16px;
  border: 1px solid #e2ece5;
  border-radius: 18px;
  background: linear-gradient(180deg,#fff,#f8fbf8);
  box-shadow: 0 8px 20px rgba(18,77,44,.06);
}

/* layout interno: immagine a sinistra, testo a destra */
.tema .media{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* riquadro immagine compatto (stessa dimensione per entrambi i box) */
.tema .media figure{
  flex: 0 0 160px;         /* larghezza fissa immagine (regola se vuoi) */
  height: 120px;           /* altezza fissa → immagini allineate */
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f7f4;     /* “bordo” neutro attorno a immagini contenute */
  display: flex;           /* centra immagine anche con contain */
  align-items: center;
  justify-content: center;
}

/* IMMAGINE INTERA (no tagli) e centrata */
.tema .media figure img{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* intera */
  object-position: center; /* centrata */
  display: block;
}

/* fine-tuning per posizionamento */
.tema.storia .media figure img{
  object-position: 50% 55%;  /* statua leggermente “più in basso” */
}
.tema.qualita .media figure img{
  object-position: 55% 50%;  /* un filo spostata a destra */
}

/* tipografia */
.tema h2{ margin: 0 0 8px; color:#124d2c; }
.tema .testo p{ margin: 0; line-height: 1.55; }
.tema .testo .quality-list{ margin: 6px 0 0; padding-left: 18px; }

/* Mobile: impila i due box */
@media (max-width: 760px){
  .temi.due-colonne{
    grid-template-columns: 1fr;
  }
}

/* — STORIA & QUALITÀ: allineamento perfetto e immagine intera — */

/* contenitore immagine + testo: allinea in alto */
.temi.due-colonne .tema .media{
  display: flex;
  align-items: flex-start !important;  /* testo e immagine partono allo stesso livello */
  gap: 12px;
}

/* riquadro immagine: SOLO larghezza fissa, NESSUNA altezza forzata */
.temi.due-colonne .tema .media figure{
  flex: 0 0 160px;        /* regola se vuoi la foto più grande/piccola */
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}

/* immagine della statua (e in generale nelle card): mostra TUTTO, niente tagli */
.temi.due-colonne .tema .media figure img{
  display: block;
  width: 100%;
  height: auto !important;            /* annulla height fisse precedenti */
  object-fit: contain !important;     /* immagine intera */
  object-position: center !important; /* centrata nel riquadro */
}

/* titolo/paragrafo: nessun rientro alto, così combacia con la foto */
.temi.due-colonne .tema .media .testo h2{ margin-top: 0; }
/* solo la statua */
.temi.due-colonne .tema.storia .media figure img{
  object-position: 50% 60%;   /* Y più alta = verso il basso (60–70%) */
}
/* === DUE BOX AFFIANCATI (Storia / Qualità) === */
.temi.due-colonne{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* due colonne uguali */
  gap: 18px 20px;
  align-items: start;
}

/* singolo box */
.tema{
  padding: 16px;
  border: 1px solid #e2ece5;
  border-radius: 18px;
  background: linear-gradient(180deg,#fff,#f8fbf8);
  box-shadow: 0 8px 20px rgba(18,77,44,.06);
}

/* layout interno: immagine a sinistra, testo a destra */
.tema .media{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* riquadro immagine compatto (stessa dimensione per entrambi i box) */
.tema .media figure{
  flex: 0 0 160px;         /* larghezza fissa immagine (regola se vuoi) */
  height: 120px;           /* altezza fissa → immagini allineate */
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f7f4;     /* “bordo” neutro attorno a immagini contenute */
  display: flex;           /* centra immagine anche con contain */
  align-items: center;
  justify-content: center;
}

/* IMMAGINE INTERA (no tagli) e centrata */
.tema .media figure img{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* intera */
  object-position: center; /* centrata */
  display: block;
}

/* fine-tuning per posizionamento */
.tema.storia .media figure img{
  object-position: 50% 55%;  /* statua leggermente “più in basso” */
}
.tema.qualita .media figure img{
  object-position: 55% 50%;  /* un filo spostata a destra */
}

/* tipografia */
.tema h2{ margin: 0 0 8px; color:#124d2c; }
.tema .testo p{ margin: 0; line-height: 1.55; }
.tema .testo .quality-list{ margin: 6px 0 0; padding-left: 18px; }

/* Mobile: impila i due box */
@media (max-width: 760px){
  .temi.due-colonne{
    grid-template-columns: 1fr;
  }
}
/* Storia/Qualità – allinea in alto e mostra l'immagine intera */
.temi.due-colonne .tema .media{ display:flex; align-items:flex-start; gap:12px; }
.temi.due-colonne .tema .media figure{ flex:0 0 160px; margin:0; border-radius:12px; overflow:hidden; }
.temi.due-colonne .tema .media figure img{ width:100%; height:auto !important; object-fit:contain !important; display:block; }
.temi.due-colonne .tema .media .testo h2{ margin-top:0; }

/* ==== FIX DEFINITIVO: statua allineata e visibile nella sezione Storia ==== */

/* il blocco Storia (quello con la statua) deve affiancare immagine e testo */
#storia .media{
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;  /* stesso allineamento in alto */
}

/* riquadro immagine: larghezza fissa, niente altezza forzata */
#storia .media figure{
  flex: 0 0 160px !important;          /* cambia 160→180 se la vuoi un po' più grande */
  margin: 0 !important;
  border-radius: 12px;
  overflow: hidden;
}

/* SOLO la statua: mostrala intera e centrata */
#storia .media img[src$="palinuro-leggenda.jpg"]{
  width: 100% !important;
  height: auto !important;              /* annulla qualunque height precedente */
  max-height: none !important;
  object-fit: contain !important;       /* immagine intera, senza tagli */
  object-position: 50% 58% !important;  /* leggermente più “basso”; regola 55–65% a gusto */
  display: block !important;
}

/* --- STORIA: immagine in verticale (ritratto) --- */

/* 1) contenitore immagine: stretto e alto (ritratto) */
#storia .media figure,
.stq-storia .stq-media figure{
  /* scegli la larghezza: aumenta/diminuisci a piacere */
  width: 150px !important;
  flex: 0 0 150px !important;

  /* il trucco: rapporto 3:4 => verticale */
  aspect-ratio: 3 / 4 !important;

  height: auto !important;      /* lascia che sia l'aspect-ratio a dare l'altezza */
  margin: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f7f4;          /* bordo neutro se usi contain */
}

/* 2) immagine: intera, centrata nel riquadro verticale */
#storia .media figure img,
.stq-storia .stq-media figure img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;     /* IMMAGINE INTERA (niente tagli) */
  object-position: 50% 58% !important;/* sposta un filo in basso se serve */
  display: block !important;
}

/* 3) allinea testo e foto perfettamente in alto */
#storia .media,
.stq-storia .stq-media{
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
/* — HOME: contenitore unico per i 3 box, dimensioni maggiorate — */
.section-box.home-usp{
  padding: 18px 20px;
  border: 1px solid #dbe7df;                 /* bordo morbido del contenitore */
  border-radius: 22px;
  background: linear-gradient(180deg,#ffffff,#f6fbf7);
  box-shadow: 0 10px 28px rgba(18,77,44,.08);
}

/* Griglia dei box: più larghi e con più respiro */
.section-box.home-usp .card-list{
  grid-template-columns: repeat(3, minmax(280px, 1fr));  /* PRIMA era più stretta */
  gap: 16px;
}

/* Box singolo: più grande, senza bordino, con un'ombra soft */
.section-box.home-usp .card{
  border: 0;                                    /* via il bordino del box */
  border-radius: 16px;
  padding: 18px 20px;                           /* PRIMA ~14px */
  box-shadow: 0 6px 18px rgba(18,77,44,.06);
}
.section-box.home-usp .card h3{
  font-size: 1.2rem;                            /* titolo un filo più grande */
  margin: 0 0 8px;
}
.section-box.home-usp .card p{
  font-size: 1.02rem;                           /* testo un filo più grande */
  margin: 0;
  line-height: 1.55;
}


/* Responsivo */
@media (max-width: 980px){
  .section-box.home-usp .card-list{
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}
@media (max-width: 600px){
  .section-box.home-usp .card-list{
    grid-template-columns: 1fr;
  }
}
/* Rimuove il contorno dal blocco "Scopri Palinuro" */
.section-box.no-frame{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;      /* niente “cuscinetto” attorno alla foto */
}

/* Niente raggio/ombra anche sull’immagine/figure */
.section-box.no-frame figure,
.section-box.no-frame img{
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Se sotto compariva una riga verde, la annullo per questo blocco */
.section-box.no-frame + .separatore{ display: none !important; }

/* === HOME – 3 box più grandi (Vicino al mare / Piazzole / Accoglienza) === */
.highlights.grid{
  /* colonne più larghe e più spazio */
  grid-template-columns: repeat(3, minmax(340px, 1fr));
  gap: 22px;
  margin-bottom: 18px;
}
/* responsive */
@media (max-width: 1100px){
  .highlights.grid{ grid-template-columns: repeat(2, minmax(300px, 1fr)); }
}
@media (max-width: 640px){
  .highlights.grid{ grid-template-columns: 1fr; }
}

.highlights .card{
  /* niente bordino, più “box” pieno e grande */
  padding: 22px 26px;
  border: none;                     /* rimuove il contorno */
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(18,77,44,.08);
}

.highlights .card h3{
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.2;
}
.highlights .card p{
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.5;
}
/* HOME – 3 box leggermente più piccoli */
.highlights.grid{
  grid-template-columns: repeat(3, minmax(320px, 1fr)); /* prima 340px */
  gap: 20px;                                           /* prima 22px */
}
@media (max-width: 1100px){
  .highlights.grid{ grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width: 640px){
  .highlights.grid{ grid-template-columns: 1fr; }
}

.highlights .card{
  padding: 20px 22px;            /* prima 22px 26px */
  border: none;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(18,77,44,.08);
}
.highlights .card h3{
  font-size: clamp(1.12rem, 2vw, 1.4rem);  /* un filo meno di prima */
  margin: 0 0 8px;
}
.highlights .card p{
  font-size: clamp(0.98rem, 1.3vw, 1.05rem);
  margin: 0;
  line-height: 1.5;
}
/* Spazio tra logo e titolo nell’header */
.topbar img[src*="logo"],
header img[src*="logo"]{
  margin-right: 12px;     /* “un po’, non troppo” – alza a 14/16 se vuoi più spazio */
  vertical-align: middle; /* allinea meglio con il testo */
}

/* (opzionale) se il titolo è troppo attaccato, aggiungi un filo di margine */
.topbar h1, header h1{
  margin-left: 2px;
}
/* — Spazio verticale tra logo e titolo (un po', non troppo) — */

/* Caso più comune: logo sopra al titolo nell'header/hero */
.hero .logo,
header .logo{
  display: block;           /* il logo va su una riga sua */
  margin-bottom: 14px;      /* “un po'” di spazio sotto il logo */
}

/* Se il titolo è troppo attaccato, aggiungi un filo anche sopra */
.hero h1,
header h1{
  margin-top: 4px;
}

/* Se logo e titolo sono nello stesso blocco .topbar, con logo PRIMA del titolo */
.topbar img[src*="logo"] + h1{
  margin-top: 12px;         /* spazio verticale solo quando il titolo segue il logo */
}
/* ================================
   SCOPRI PALINURO — LAYOUT FLUIDO
   ================================ */

/* 3.1) Scala fluida (font + spazi) SOLO per Scopri */
.page-scopri{
  /* spazi “intelligenti” che crescono un filo con lo schermo */
  --space-1: clamp(8px, 1.6vw, 12px);
  --space-2: clamp(12px, 2.2vw, 16px);
  --space-3: clamp(16px, 2.8vw, 22px);
  --space-4: clamp(20px, 3.4vw, 28px);

  /* testi fluidi ma contenuti */
  --fz-h1: clamp(26px, 4.5vw, 42px);
  --fz-h2: clamp(20px, 3.2vw, 28px);
  --fz-h3: clamp(18px, 2.6vw, 22px);
  --fz-p:  clamp(15px, 2.2vw, 17px);
}
.page-scopri h1{ font-size: var(--fz-h1); }
.page-scopri h2{ font-size: var(--fz-h2); }
.page-scopri h3{ font-size: var(--fz-h3); }
.page-scopri p,
.page-scopri li{ font-size: var(--fz-p); line-height: 1.55; }

/* 3.2) Sezioni/box della pagina Scopri */
.page-scopri .section-box{ padding: var(--space-4) var(--space-3); }

/* 3.3) Hero/titolo iniziale della pagina Scopri (se presente) */
.page-scopri .hero-card,
.page-scopri .hero-mini{
  padding: var(--space-3) var(--space-3);
}
.page-scopri .hero-card h1{ margin-top: 0; }

/* 3.4) “Storia e leggenda” + “Qualità” affiancati (entrambe le varianti) */
.page-scopri .temi.due-colonne,
.page-scopri .stq-two-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-3);
  align-items: start;
}
@media (max-width: 760px){
  .page-scopri .temi.due-colonne,
  .page-scopri .stq-two-cols{ grid-template-columns: 1fr; }
}

/* riga interna immagine+testo dei due box */
.page-scopri .tema .media,
.page-scopri .stq-card .stq-media{
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

/* riquadro immagine compatto e FLUIDO nei due box (storia/qualità) */
.page-scopri .tema .media figure,
.page-scopri .stq-card .stq-media figure{
  flex: 0 0 clamp(130px, 28vw, 160px);
  height: clamp(110px, 22vw, 130px);
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f7f4;              /* bordo neutro se l’immagine non riempie */
  display: flex; align-items: center; justify-content: center;
}
.page-scopri .tema .media figure img,
.page-scopri .stq-card .stq-media figure img{
  width: 100%; height: 100%;
  object-fit: contain;               /* immagine intera */
  object-position: center;
  display: block;
}

/* STATUA: verticale e centrata, un filo più “bassa” se serve */
.page-scopri img[src$="palinuro-leggenda.jpg"]{
  object-position: 50% 58%;
}

/* 3.5) Sezione “Cosa vedere” (.poi): immagine/testo proporzionati */
.page-scopri{
  --poi-img-w: clamp(180px, 35vw, 220px);
}
.page-scopri .poi{
  display: grid;
  grid-template-columns: var(--poi-img-w) 1fr;
  column-gap: var(--space-2);
  row-gap: var(--space-2);
  align-items: start;
}
.page-scopri .poi figure{
  width: var(--poi-img-w);
  aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: 12px;
}
.page-scopri .poi figure img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 800px){
  .page-scopri .poi{ grid-template-columns: 1fr; }
  .page-scopri .poi figure{ width: 100%; }
}

/* 3.6) Gallerie della pagina Scopri (.grid / .thumb-grid) */
.page-scopri .grid,
.page-scopri .thumb-grid{ gap: var(--space-2); }
.page-scopri .grid .ph,
.page-scopri .thumb-grid figure{
  aspect-ratio: 4 / 3;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.page-scopri .grid img,
.page-scopri .thumb-grid img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 980px){
  .page-scopri .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .page-scopri .grid{ grid-template-columns: 1fr; }
}

/* 3.7) Quick-nav (chip) più comoda su mobile */
.page-scopri .quick-nav{ gap: var(--space-1); }
.page-scopri .chip{ padding: 8px 12px; }

/* 3.8) Separé coerenti anche su mobile (solo in Scopri) */
.page-scopri .separatore{
  height: clamp(1px, .35vw, 2px);
  background: linear-gradient(90deg, transparent, #bfe6cf, transparent);
  margin: clamp(20px, 4vw, 32px) 0;
  border: 0;
}
/* ===== SCOPRI PALINURO — RIDUZIONE IMMAGINI SU MOBILE ===== */
@media (max-width: 760px){

  /* A) Card "Cosa vedere" (.poi): immagine più piccola e centrata */
  .page-scopri{ --poi-img-w: clamp(150px, 60vw, 200px); }
  .page-scopri .poi{ grid-template-columns: 1fr !important; } /* 1 colonna */
  .page-scopri .poi figure{
    width: var(--poi-img-w) !important;
    aspect-ratio: 4 / 3;
    margin: 0 auto var(--space-2, 16px);    /* centra e lascia un filo di spazio sotto */
    border-radius: 12px; overflow: hidden;
  }
  .page-scopri .poi figure img{
    width: 100%; height: 100%; object-fit: cover; display: block;
  }

  /* B) Box "Storia" e "Qualità": mini-foto ancora più compatte */
  .page-scopri .tema .media figure,
  .page-scopri .stq-card .stq-media figure{
    width: clamp(120px, 45vw, 150px) !important;
    height: clamp(110px, 35vw, 130px) !important;
    flex: 0 0 auto !important;
    margin: 0 auto var(--space-1, 10px);
    border-radius: 12px; overflow: hidden; background:#f3f7f4;
    display:flex; align-items:center; justify-content:center;
  }
  .page-scopri .tema .media figure img,
  .page-scopri .stq-card .stq-media figure img{
    width: 100%; height: 100%;
    object-fit: contain; object-position: center; display:block;
  }

  /* C) (opzionale) Hero della pagina: limita altezza su mobile */
  .page-scopri .hero img,
  .page-scopri .hero-mini img{
    max-height: 220px; width: 100%;
    height: auto; object-fit: cover;
  }
}
/* — SCOPRI PALINURO: statua con focus più in alto (solo mobile) — */
@media (max-width: 760px){

  /* Variante 1: mantieni immagine INTERA (contain), ma sposta il fuoco in alto */
  .page-scopri img[src$="palinuro-leggenda.jpg"]{
    object-fit: contain !important;
    object-position: 50% 30% !important;  /* 30% = più in alto; prova 25% se serve ancora su */
  }

  /* Se preferisci RIEMPIRE il riquadro (croppando sotto), usa questa al posto di sopra:
  .page-scopri .tema .media figure img[src$="palinuro-leggenda.jpg"],
  .page-scopri .stq-card .stq-media figure img[src$="palinuro-leggenda.jpg"]{
    object-fit: cover !important;
    object-position: 50% 20% !important;  // testa ben visibile, taglia un po’ il basso
  }
  */
}

/* === MOBILE: metti il fuoco della statua più in alto (sempre) === */
@media (max-width: 760px){

  /* 1) Assicura che il riquadro abbia una dimensione "contenuta" su mobile */
  #storia .media figure,
  .tema.storia .media figure,
  .stq-storia .stq-media figure{
    width: clamp(120px, 42vw, 160px) !important;
    height: clamp(120px, 42vw, 170px) !important;
    overflow: hidden !important;
  }

  /* 2) COLPISCI la statua in tutti i casi (due nomi possibili del file) e dentro i contenitori più usati */
  #storia .media figure img,
  .tema.storia .media figure img,
  .stq-storia .stq-media figure img,
  img[src$="palinuro-leggenda.jpg"],
  img[src$="Palinuro.leggenda.jpg"]{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;      /* riempie il riquadro */
    object-position: 50% 20% !important; /* FUOCO IN ALTO (20–30%) */
    display: block !important;
  }

  /* 3) Se da qualche regola precedente era rimasto "contain", lo annullo qui */
  .page-scopri img[src$="palinuro-leggenda.jpg"],
  .page-scopri img[src$="Palinuro.leggenda.jpg"]{
    object-fit: cover !important;
    object-position: 50% 20% !important;
  }
}
@media (max-width:760px){
  img.statua{ width:100% !important; height:100% !important;
              object-fit: cover !important; object-position: 50% 20% !important; }
}
@media (max-width: 760px){
  .statua-box{ width: clamp(120px, 42vw, 160px); aspect-ratio: 3/4; overflow:hidden; border-radius:12px; }
  .statua{ width:100% !important; height:100% !important; display:block !important;
           object-fit:cover !important; object-position:50% 18% !important; }
}

.hero-full img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center; /* puoi usare top / bottom / valori % per regolare il focus */
  border-radius: 18px; /* angoli arrotondati più eleganti */
  box-shadow: 0 8px 24px rgba(0,0,0,.25); /* profondità */
}
.hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  color: #fff;
}
.hero-full img {
  transition: transform 6s ease;
}
.hero-full:hover img {
  transform: scale(1.05);
}
.hero-overlay h1, .hero-overlay p {
  animation: fadeInUp 1.2s ease both;
}
@keyframes fadeInUp {
  from { opacity:0; transform: translateY(20px);}
  to { opacity:1; transform: translateY(0);}
}
.hero-full img {
  border: none !important;   /* elimina il bordo grigio */
}
.hero-full {
  border: none !important;
  box-shadow: none !important;  /* elimina eventuale ombra grigia */
}
.hero-full {
  position: relative;
  width: 100%;
  height: 520px;       /* altezza fissa come prima */
  overflow: hidden;    /* taglia eventuali eccedenze */
  border: none;        /* elimina bordi */
  box-shadow: none;    /* elimina ombre */
}

.hero-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* riempie tutto senza deformarsi */
  object-position: center; /* centrata */
  border: none;        /* elimina ogni bordo */
}
/* ====== MOBILE POLISH PACK ====== */
@media (max-width: 760px){

  /* 1) Hero pieno, fermo e leggibile */
  .hero-full{
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio: 16 / 9;       /* proporzione elegante sui telefoni */
    max-height: 72vh;           /* evita che occupi tutto lo schermo */
    overflow:hidden;
    border:none; box-shadow:none;
  }
  .hero-full img{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    border:none !important;
  }
  .hero-overlay{
    position:absolute; left:0; right:0; bottom:0;
    padding:16px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
    color:#fff;
  }
  .hero-overlay h1{
    margin:0 0 4px;
    font-size: clamp(20px, 5.8vw, 26px);
    line-height:1.15;
  }
  .hero-overlay p{
    margin:0;
    font-size: clamp(14px, 4.2vw, 16px);
    line-height:1.35;
    opacity:.95;
  }

  /* 2) Topbar link più “tap-friendly” */
  .topbar-mini a{
    display:inline-block;
    padding: 10px 12px;
    font-size: 14px;
  }

  /* 3) Quick-nav a chip: riga orizzontale scrollabile */
  .quick-nav{
    justify-content:flex-start;
    overflow-x:auto; gap:8px;
    padding: 8px 2px;
    -webkit-overflow-scrolling: touch;
  }
  .quick-nav::-webkit-scrollbar{ display:none; }
  .chip{ white-space:nowrap; font-size:14px; padding:8px 12px; }

  /* 4) Box e testi più ariosi e leggibili */
  .section-box{ padding:16px 14px; border-radius:14px; }
  .section-box h2{ font-size: clamp(18px, 5.5vw, 22px); margin-bottom:8px; }
  .muted, .section-box p{ font-size: 15px; line-height:1.5; }

  /* 5) Card liste a 1 colonna, immagini ben visibili */
  .card-list{ grid-template-columns: 1fr; gap:10px; }
  .poi{ grid-template-columns: 1fr; gap:10px; padding:12px; }
  .poi figure{ aspect-ratio: 16 / 10; border-radius:12px; }
  .poi h3{ font-size: 17px; margin:6px 0; }
  .poi p{ font-size: 15px; }

  /* 6) Galleria: 2 -> 1 colonna su schermi più stretti */
  .grid{ grid-template-columns: 1fr 1fr; gap:10px; }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  /* 7) Sezioni “Quando venire” in colonna */
  .seasons{ grid-template-columns: 1fr; gap:10px; }
  .season{ padding:12px; }
  .season h4{ margin-bottom:4px; }
  .temp{ font-size: 15px; }
}

@media (max-width:760px){
  /* 8) CTA: pulsanti larghi e comodi */
  .cta-row{ gap:8px; margin-top:10px; }
  .cta-row .b{
    flex:1 1 auto; min-width: 46%;
    text-align:center; font-weight:700;
    padding:12px 14px; border-radius:999px;
  }
}

/* 9) Micro-tuning immagini in generale per mobile */
@media (max-width:760px){
  img{ image-rendering: auto; }
  figure.thumb img{ object-fi

/* HERO uguale al primo */
.hero-full{
  position: relative;
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0,0,0,.18);
  margin: 18px 0 14px;
}
.hero-full img{
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}
.hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.55) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 24px;
}
.hero-overlay h1{
  margin: 0 0 6px;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff; letter-spacing: .3px;
}
.hero-overlay p{
  margin: 0;
  color: #e7f8ee;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}
/* --- HERO solo immagine, niente overlay/grigio --- */
.hero-overlay{
  display: none !important;        /* nasconde del tutto il blocco grigio/overlay */
  background: none !important;     /* sicurezza extra */
}

.hero-full{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;     /* niente ombra che può sembrare “bordo grigio” */
  margin: 0;                       /* opzionale: elimina spazio esterno */
}

.hero-full img{
  display: block;                  /* elimina spazi bianchi sotto l’immagine */
  width: 100%;
  height: 520px;                   /* oppure: height:auto; se vuoi l’altezza naturale */
  object-fit: cover;               /* riempie senza deformazioni */
  object-position: center;
  border: 0;
}
/* HERO: solo immagine, nessun overlay, nessun bordo/ombra, nessun pseudo-elemento */
section.hero-full,
section.hero-full.frame,      /* nel tuo HTML c'è la classe "frame" */
.hero-full .hero-overlay {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.hero-full .hero-overlay { 
  display: none !important; 
  padding: 0 !important; 
  margin: 0 !important;
}

/* elimina eventuali gradient o maschere inserite con pseudo-elementi */
section.hero-full::before,
section.hero-full::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* l’immagine riempie e basta */
section.hero-full {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

section.hero-full img {
  display: block !important;
  width: 100% !important;
  height: auto !important;        /* se vuoi altezza fissa usa height:520px + object-fit:cover */
  object-fit: contain !important; /* mostra tutta la foto senza tagli. 
                                     Se vuoi riempire a tutta larghezza/altezza: cover */
  object-position: center !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hero-full{ margin:0; padding:0; border:0; box-shadow:none; background:none; }
.hero-full img{ display:block; width:100%; height:auto; object-fit:contain; object-position:center; }

/* Riattivo l'overlay ma SENZA grigio */
.hero-overlay{
  display: flex !important;     /* riappare */
  background: none !important;  /* niente grigio */
  position: absolute;
  inset: 0;
  align-items: flex-end;         /* testo in basso */
  padding: 24px 20px;
}

/* Testo leggibile senza pannello grigio */
.hero-overlay h1{
  margin: 0 0 6px;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.hero-overlay p{
  margin: 0;
  color: #f2f2f2;
  text-shadow: 0 2px 8px rgba(0,0,0,.30);
}

/* La hero resta SOLO immagine, nessun bordo/ombra */
.hero-full{
  border: none !important;
  box-shadow: none !important;
  margin: 0;
  position: relative;
}
.hero-full img{
  display: block !important;
  width: 100% !important;
  height: 520px !important;   /* o auto */
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
}
/* ======= HERO: mostra solo immagine + testo sopra, senza grigio ======= */
.hero-full{
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  overflow: hidden;
}

.hero-full img{
  display: block !important;
  width: 100% !important;
  height: 520px !important;         /* se vuoi la sua altezza naturale: metti height:auto */
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;                        /* immagine sotto */
}

/* (1) Riattiva overlay SEMPRE, anche se altrove è stato messo display:none */
.hero-overlay{
  display: flex !important;          /* forza la riapparizione */
  position: absolute !important;
  inset: 0 !important;               /* copre tutta la hero */
  background: none !important;       /* niente grigio */
  align-items: flex-end;
  justify-content: flex-end;
  padding: 24px 20px;
  z-index: 2;                        /* sopra l’immagine */
  pointer-events: none;              /* il testo non blocca i click sull’immagine */
}

/* (2) Testo leggibile senza pannelli */
.hero-overlay h1{
  margin: 0 0 6px;
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.hero-overlay p{
  margin: 0;
  color: #f2f2f2;
  text-shadow: 0 2px 8px rgba(0,0,0,.30);
  max-width: 60ch;
}

/* (3) Elimina qualsiasi pseudo-elemento grigio che fosse stato aggiunto altrove */
.hero-full::before,
.hero-full::after{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* (4) Mobile: niente pannelli, ma un leggerissimo gradiente solo per contrasto (opzionale) */
@media (max-width:760px){
  .hero-overlay{
    background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0)) !important;
    padding: 16px 14px;
  }
  .hero-overlay h1{ font-size: clamp(20px, 5.8vw, 26px); }
  .hero-overlay p{ font-size: clamp(14px, 4.2vw, 16px); }
}
@media (max-width: 760px) {
  .hero-full {
    display: none !important;
  }
}
@media (max-width: 760px) {
  .hero-full {
    display: none !important;
  }

  .hero-overlay {
    background: none !important; /* Rimuovi lo sfondo */
    display: flex !important;
    justify-content: center; /* Centra il titolo */
    align-items: center;
    height: 100vh; /* Altezza piena della viewport */
    padding: 0;
  }

  .hero-overlay h1 {
    font-size: 3rem;
    color: #22c55e; /* Verde brillante */
    text-align: center;
    font-weight: 700;
  }
}
.hero-full {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
}

.hero-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* L'immagine rimane centrata */
  transition: transform 0.3s ease;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3); /* Sfondo traslucido per miglior contrasto */
  color: white;
  font-size: 2rem;
  text-align: center;
  padding: 20px;
}

.hero-overlay h1 {
  color: #22c55e; /* Verde brillante */
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
}

/* Rimuove l'immagine e visualizza il titolo sui dispositivi mobili */
@media (max-width: 760px) {
  .hero-full img {
    display: block; /* Mantieni l'immagine visibile */
  }

  .hero-overlay {
    background: rgba(0, 0, 0, 0); /* Rimuove lo sfondo traslucido */
  }
}
.hero-full {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
}

.hero-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* L'immagine rimane centrata */
  transition: transform 0.3s ease;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3); /* Sfondo traslucido per miglior contrasto */
  color: white;
  font-size: 2rem;
  text-align: center;
  padding: 20px;
}

.hero-overlay h1 {
  color: #22c55e; /* Verde brillante */
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
}

.hero-overlay p {
  color: #e7f8ee; /* Testo chiaro per miglior contrasto */
  font-size: 1.2rem;
  font-weight: 400;
  margin-top: 10px;
}

/* Rimuove l'immagine e visualizza il titolo sui dispositivi mobili */
@media (max-width: 760px) {
  .hero-full img {
    display: block; /* Mantieni l'immagine visibile */
  }

  .hero-overlay {
    background: rgba(0, 0, 0, 0); /* Rimuove lo sfondo traslucido */
  }
}
@media (max-width: 760px) {
  .hero-full {
    display: none !important;
  }

  .hero-overlay {
    background: none !important; /* Rimuovi lo sfondo */
    display: flex !important;
    justify-content: center; /* Centra il titolo */
    align-items: center;
    height: 100vh; /* Altezza piena della viewport */
    padding: 0;
  }

  .hero-overlay h1 {
    font-size: 3rem;
    color: #22c55e; /* Verde brillante */
    text-align: center;
    font-weight: 700;
  }
}