/* -------------------------
   1) Root, Reset & Utilities
   ------------------------- */
:root {
  --bg: #fcfbf8;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #6b7280; /* grigio caldo */
  --brand: #2f855a; /* verde scuro */
  --brand-2: #3ea76a; /* verde medio */
  --accent: #d97706; /* arancio miele */
  --border: #e5e7eb;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; font-weight: 800; }
h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }

p { margin: 0 0 1em; }

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.section { padding: clamp(48px, 6vw, 96px) 0; }
.section--tight { padding-block: clamp(32px, 4vw, 64px); }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

.btn {
  --_bg: var(--brand);
  --_fg: #fff;
  --_ring: 0 0 0 0 rgba(63, 195, 128, 0);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .75rem 1.1rem; border-radius: 999px;
  background: var(--_bg); color: var(--_fg); text-decoration: none;
  font-weight: 700; border: 1px solid transparent; transition: .2s ease;
  box-shadow: var(--shadow);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.02); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(63, 195, 128, .25); }

.btn-outline { --_bg: transparent; --_fg: var(--brand); border-color: var(--brand); box-shadow: none; }
.btn-ghost { --_bg: transparent; --_fg: var(--text); border-color: transparent; box-shadow: none; }
.btn-small { padding: .55rem .9rem; font-weight: 600; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.badge { display: inline-block; padding: .35em .7em; font-size: .8rem; border-radius: 999px; background: #eef2ff; color: #3730a3; font-weight: 700; }

.muted { color: var(--muted); }
.center { text-align: center; }
.hidden { display: none !important; }

/* -------------------------
   2) Header / Navbar sticky
   ------------------------- */
.header {
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: saturate(140%) blur(6px);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border-bottom: 1px solid var(--border);
}
.navbar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem; }

.navbar .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); font-weight: 900; letter-spacing: .2px; }
.navbar .brand img { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; }

.navbar nav { display: flex; align-items: center; gap: .75rem; }
.navbar nav a { color: var(--text); text-decoration: none; font-weight: 700; padding: .55rem .8rem; border-radius: 10px; transition: .2s;
}
.navbar nav a:hover { background: #f3f4f6; }

.nav-actions { display: flex; align-items: center; gap: .5rem; }

/* Burger per mobile */
.nav-toggle { display: none; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: .5rem .7rem; }

@media (max-width: 900px) {
  .navbar nav { position: fixed; inset-inline: 0; top: 64px; background: var(--surface); border-bottom: 1px solid var(--border); display: grid; gap: .25rem; padding: .75rem; transform: translateY(-120%); transition: .25s ease; }
  .navbar nav[aria-expanded="true"] { transform: translateY(0); }
  .nav-toggle { display: inline-flex; }
}
/* Evidenziazione link attivo (Scroll Spy) */
.navbar nav a.active {
  background: #ecfdf5;
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* ------------------------------------
   3) Hero migliorata (immagine + overlay)
   ------------------------------------ */
.hero {
    position: relative;
    min-height: clamp(420px, 60vh, 720px);
    display: grid; place-items: center; text-align: center;
    overflow: clip; border-bottom: 1px solid var(--border);
  }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(62,167,106,.35), transparent),
                linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
    z-index: 1;
  }
  .bg-slideshow {
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%;
  }
  .hero img.bg {
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: saturate(105%) contrast(95%);
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .hero img.bg.active {
    opacity: 1;
  }
  .hero .content { 
    position: relative; 
    z-index: 2; 
    color: #fff; 
    width: min(100% - 2rem, 960px); 
    margin-inline: auto; 
  }
  .hero .eyebrow { 
    text-transform: uppercase; 
    letter-spacing: .12em; 
    font-weight: 900; 
    opacity: .9; 
    margin-bottom: .5rem; 
  }
  .hero h1 { 
    font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); 
    margin-bottom: .5rem; 
  }
  .hero p { 
    font-size: clamp(1rem, .95rem + .5vw, 1.25rem); 
    opacity: .95; 
  }
  .hero .actions { 
    margin-top: 1.25rem; 
    display: inline-flex; 
    gap: .6rem; 
    flex-wrap: wrap; 
    justify-content: center; 
  }
/* --------------------------------------
   4) Novità & Offerte (griglia prodotti)
   Compatibile con markup PHP esistente
   -------------------------------------- */
.promo-products {
  background: linear-gradient(180deg, transparent, #fafaf9 20%, #fafaf9 80%, transparent);
}

.promo-products h2 {
  font-weight: 900;
  letter-spacing: .2px;
}

.promo-products .under {
  color: var(--muted);
  margin-top: -.5rem;
  margin-bottom: 1.5rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
@media (max-width: 960px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* Card prodotto */
.product-card {
  position: relative; /* per badge */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: visible; /* permette alla card di uscire dalla griglia in hover */
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}
.product-card img {
  aspect-ratio: 4/3;
  width: 100%;
  object-fit: cover;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.product-card h3 {
  padding: .9rem 1rem 0;
  font-size: 1.05rem;
}
.product-card .desc {
  padding: .35rem 1rem .9rem;
  color: var(--muted);
  font-size: .95rem;
}
.product-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem 1.05rem;
  border-top: 1px solid var(--border);
}
.product-card .price {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--brand);
}

/* Hover sfizioso */
.product-card:hover {
  transform: translateY(-8px) scale(1.03) rotateZ(-0.5deg);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
  z-index: 5;
}

/* Badge "In offerta" */
.product-card::before {
  content: "In offerta";
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 2;
}

/* Pulsanti */
.product-card .btn,
.promo-products .btn {
  border-radius: 12px;
}

/* Titolo centrato */
#novita .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#novita .section-title {
  margin-bottom: 1.5rem;
  text-align: center;
}
#novita .product-grid {
  width: 100%;
}
/* Effetto zoom in sulla foto */
.product-card img {
  transition: transform 0.4s ease;
}

.product-card:hover img {
  transform: scale(1.08);
}
/* ============================================
   SEZIONE "Perché scegliere Mielecomp" (WOW)
   ============================================ */
#valori[data-style="v2"] {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 7vw, 90px) 0;
  background:
    radial-gradient(1200px 500px at 0% 0%, rgba(234, 179, 8, .22), transparent 60%),
    radial-gradient(1200px 600px at 100% 0%, rgba(251, 191, 36, .18), transparent 60%),
    #fffaf3;
}

/* banda morbida dietro il titolo */
#valori[data-style="v2"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(252, 211, 77, .32), transparent 65%);
  opacity: .9;
  z-index: -1;
}

/* contenitore */
#valori[data-style="v2"] .container {
  max-width: 1100px;
}

/* TITOLO + LEAD */
#valori[data-style="v2"] .section-title {
  text-align: center;
  margin-bottom: clamp(30px, 4vw, 40px);
}

#valori[data-style="v2"] .section-title h2 {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.4rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

#valori[data-style="v2"] .section-title h2 span {
  display: inline-block;
  padding: .25rem .85rem;
  border-radius: 999px;
  background: rgba(234, 179, 8, .16);
  border: 1px solid rgba(250, 204, 21, .5);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #92400e;
  margin-bottom: .4rem;
}

#valori[data-style="v2"] .section-title .lead {
  max-width: 640px;
  margin: 0 auto;
  color: #4b5563;
  font-size: .98rem;
}

/* se vuoi il “bollino” sopra il titolo, basta racchiudere il testo in <span> nel tuo H2:
   <h2><span>Perché scegliere</span>Mielecomp</h2>
*/

/* LAYOUT DUE CARD */
#valori[data-style="v2"] .cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 26px);
  align-items: stretch;
}
@media (max-width: 800px) {
  #valori[data-style="v2"] .cols {
    grid-template-columns: 1fr;
  }
}

/* CARD BASE */
#valori[data-style="v2"] .card {
  position: relative;
  border-radius: 18px;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(253, 230, 138, .9);
  box-shadow:
    0 18px 45px rgba(146, 64, 14, .18),
    0 0 0 1px rgba(250, 250, 249, .9);
  overflow: hidden;
  transform-origin: center;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

/* riflesso miele in fondo alla card */
#valori[data-style="v2"] .card::after {
  content: "";
  position: absolute;
  inset: auto -40px -60px;
  height: 140px;
  background:
    radial-gradient(220px 120px at 10% 0%, rgba(252, 211, 77, .35), transparent 60%),
    radial-gradient(220px 120px at 90% 0%, rgba(250, 204, 21, .25), transparent 65%);
  opacity: .7;
  pointer-events: none;
}

/* hover miele */
#valori[data-style="v2"] .card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 22px 60px rgba(146, 64, 14, .25),
    0 0 0 1px rgba(245, 158, 11, .6);
  background: #fffbeb;
}

/* ICONCINA circolare sopra il titolo */
#valori[data-style="v2"] .card::before {
  content: "🍯";
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, #fef3c7, #fbbf24);
  box-shadow:
    0 4px 10px rgba(146, 64, 14, .35),
    0 0 0 3px rgba(253, 230, 138, .85);
  font-size: 1.35rem;
}

/* TITOLI CARD */
#valori[data-style="v2"] .card h3 {
  margin: 0 0 .9rem;
  font-size: 1.12rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  position: relative;
  z-index: 1;
}

/* piccola “pill” sotto ai titoli */
#valori[data-style="v2"] .card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.25rem;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  opacity: .85;
}

/* LISTE */
#valori[data-style="v2"] ul.list {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

#valori[data-style="v2"] ul.list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: .55rem;
  color: #374151;
  font-size: .96rem;
}

/* bullet “check miele” */
#valori[data-style="v2"] .list--check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .2rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 2px solid #22c55e;
  color: #166534;
  font-size: .8rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  background: #dcfce7;
  box-shadow: 0 0 0 3px rgba(187, 247, 208, .9);
}

/* bullet “foglia” per Valori */
#valori[data-style="v2"] .list--values li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .35rem;
  width: .85rem;
  height: 1.1rem;
  border-radius: 60% 40% 65% 35% / 80% 60% 60% 40%;
  background: linear-gradient(160deg, #16a34a, #22c55e);
  box-shadow: 0 0 0 3px rgba(187, 247, 208, .8);
  transform: rotate(-14deg);
}

/* ---- Titolo sezione "Perché scegliere Mielecomp" ---- */
#valori[data-style="v2"] .section-title{
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* KICKER: "Perché scegliere" */
#valori[data-style="v2"] .section-kicker{
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .38rem 1.1rem;
  border-radius: 999px;

  /* palette miele */
  background: rgba(255, 200, 80, 0.25);
  border: 1px solid rgba(230, 160, 25, 0.4);
  color: #a16207;

  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Titolo: MIELECOMP */
#valori[data-style="v2"] .section-heading{
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0;
}

/* Testo descrizione */
#valori[data-style="v2"] .lead{
  max-width: 760px;
  margin: 6px auto 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #4a5568;

  /* leggero fade-in estetico */
  animation: fadeIn .6s ease-out forwards;
  opacity: 0;
}

/* Animazione morbida */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* -------------------------
   8) Footer semplice
   ------------------------- */
.footer { background: #0b0f0d; color: #d1d5db; }
.footer .container { display: grid; gap: 1rem; padding-block: 36px; }
.footer a { color: #e5e7eb; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .brand { font-weight: 900; }
.footer .bottom { border-top: 1px solid #111827; padding-top: .75rem; font-size: .9rem; color: #9ca3af; }

/* -------------------------
   9) Spaziature utili
   ------------------------- */
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.5rem}.mt-6{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.5rem}.mb-6{margin-bottom:2rem}
.py-0{padding-block:0}.py-1{padding-block:.25rem}.py-2{padding-block:.5rem}.py-3{padding-block:.75rem}.py-4{padding-block:1rem}.py-5{padding-block:1.5rem}.py-6{padding-block:2rem}
.px-0{padding-inline:0}.px-1{padding-inline:.25rem}.px-2{padding-inline:.5rem}.px-3{padding-inline:.75rem}.px-4{padding-inline:1rem}

/* -------------------------
   10) Correzioni Bootstrap (se presente)
   ------------------------- */
.container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
.btn.btn-primary { background-color: var(--brand); border-color: var(--brand); }
.btn.btn-primary:hover { filter: brightness(1.02); }

/* Assicura che .btn-small esistente erediti lo stile */
.btn.btn-small { padding: .55rem .9rem; border-radius: 12px; }

/* -------------------------
   11) Helper per sezioni con id (menu)
   ------------------------- */
section[id] { scroll-margin-top: 88px; }

/* -------------------------
   12) Accessibilità & Focus visibili
   ------------------------- */
:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(47,133,90,.25); border-radius: 12px; }

/* -------------------------
   13) Specifico per markup portale
   ------------------------- */
/* Titoli sezioni uniformati */
.section .section-title { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.1rem; }
.section .section-title .badge { background: #ecfdf5; color: var(--brand); }

/* Hero: se usi <section class="hero"><img class="bg" ...> */
/* vedi blocco .hero sopra */

/* Novità/Offerte: markup PHP noto */
.promo-products .product-card a.btn.btn-small { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.promo-products .product-card a.btn.btn-small:hover { transform: translateY(-2px); }

/* Link generali */
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -------------------------
   14) Animazioni delicate
   ------------------------- */
.reveal { opacity: 0; transform: translateY(8px); transition: .4s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Riduci motion per preferenze utente */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* style per calendario*/
/* Contenitore calendario */
#fc-container { --pad: 8px; }
#calendar .fc { font-family: inherit; }
#calendar .fc .fc-toolbar-title { font-weight: 800; }
#calendar .fc-button {
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active,
#calendar .fc-button-primary:hover {
  background: #ecfdf5; color: var(--brand); border-color: var(--brand);
}
#calendar .fc-daygrid-day.fc-day-today {
  background: #f3f4f6;
}
#calendar .fc-event {
  border-radius: 10px;
  border: none;
  box-shadow: var(--shadow);
  padding: 2px 4px;
}
/* Ottimizzazione per mobile */
@media (max-width: 640px) {
  .hero {
    min-height: clamp(320px, 70vh, 560px);
  }
  
  .hero::before {
    background: radial-gradient(800px 400px at 20% 10%, rgba(62,167,106,.35), transparent),
                linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.6));
  }
  
  .hero img.bg {
    filter: saturate(110%) contrast(90%);
  }
}

/* Logo didattica nel footer: visibile ma non invadente */
.footer .footer-logo{
  display: block;
  width: clamp(120px, 22vw, 160px); /* piccolo su mobile, max 160px su desktop */
  height: auto;
  margin-top: .5rem;
  border-radius: 12px;              /* uniforme con il tema */
  opacity: .98;
}


/* layout orizzontale responsive */
.experience-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.5rem;
}
@media (max-width: 992px){
  .experience-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .experience-row{ grid-template-columns:1fr; }
}

/* card */
/* Center sezione "Esperienze in evidenza" */
#in-evidenza .section-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width: 900px;
  margin: 0 auto 1.5rem; /* centra e dà spazio sotto */
}

#in-evidenza .section-title h2{
  margin: 0 0 .4rem;    /* titolo sopra */
  line-height: 1.2;
}

#in-evidenza .section-title .lead{
  margin: .2rem 0 0;    /* sottotitolo sotto al titolo */
  color: #4a5568;       /* tono più soft */
  font-size: 1.05rem;
}

.experience-card{
  background:#fff;border:1px solid #eaeaea;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 6px 15px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.experience-card:hover{ transform:translateY(-6px);box-shadow:0 14px 24px rgba(0,0,0,.12); }

.img-wrap{ aspect-ratio: 16/9; overflow:hidden; }
.card-image{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.experience-card:hover .card-image{ transform:scale(1.04); }

.card-body{ padding:1.25rem; display:flex; flex-direction:column; gap:.75rem; }
.card-title{ font-size:1.15rem; font-weight:700; color:#2d3748; margin:0; }
.card-desc{ color:#4a5568; line-height:1.5; }

.card-meta{ margin-top:auto; display:flex; justify-content:flex-end; }
.card-btn{
  display:inline-block; padding:.55rem 1rem; border-radius:10px;
  background:#2f855a; color:#fff; text-decoration:none; font-weight:600;
}
.card-btn:hover{ background:#276749; }
/* ----- OSPITALITÀ (scoped) ----- */
#ospitalita.section {
  padding: 60px 20px;
  text-align: center;
}

#ospitalita .section-title {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width: 900px;
  margin: 0 auto 1.5rem; /* centra e dà spazio sotto */
}

#ospitalita .card-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

#ospitalita .card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 300px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
}

#ospitalita .card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

#ospitalita .card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#ospitalita .card h3 {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

#ospitalita .card p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 20px;
}

#ospitalita .card:hover {
  transform: translateY(-5px);
}

/* bottone SOLO nella sezione ospitalità */
#ospitalita .btn {
  display: inline-block;
  background: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s;
}

#ospitalita .btn:hover {
  background: #45a049;
}