/* —— Palette —— */


:root {


  --bg-claro: #a87344;


  --text-dark: #ffffff;


  --accent: #a87344;


  --accent-light: #35392a;


}





/* —— Base —— */


body {


  margin: 0;


  font-family: "Helvetica Neue", sans-serif;


  background: var(--bg-claro);


  color: var(--text-dark);


}





.percorsi-section {


  position: relative;


  padding: 12vh 5vw;


  display: flex;


  justify-content: center;


  clear: both;


  z-index: 1;


  overflow: hidden;


}





.video-bg-percorsi {


  position: absolute;


  inset: 0;


  width: 100%;


  height: 100%;


  object-fit: cover;


  z-index: 0;


  opacity: 0.1;


  pointer-events: none;


}





/* —— Card Container —— */


.card-wrapper {


  display: flex;


  gap: 3vw;


  max-width: 1200px;


  width: 100%;


  justify-content: center;


  flex-wrap: nowrap;


  z-index: 2;


}





/* —— Card —— */


.percorso-card {


  /* spazio ex-icona per mantenere il titolo nella stessa posizione di prima */


  --icon-slot: 60px;





  /* default per l’artwork (personalizzabili per card via inline style) */


  --card-icon: none;


  --card-icon-size: 180px;


  --card-icon-pos-y: 100px;


  --card-icon-opacity: 0.85;





  position: relative;


  background: #545e53;             /* verde base che DEVE restare visibile */


  border-radius: 20px;


  overflow: hidden;


  box-shadow: 0 10px 40px rgba(0,0,0,.08);


  border: 1px solid var(--accent-light);


  width: 340px;


  height: 600px;


  display: flex;


  flex-direction: column;


  padding: 64px 32px 48px;


  text-align: left;


  z-index: 2;





  /* fade-in: stato iniziale */


  opacity: 0;


  transform: translateY(40px);


  transition: opacity .6s ease-out, transform .6s ease-out,


              transform .3s ease, box-shadow .3s ease;


}





.percorso-card[data-delay="1"] { transition-delay: 0.15s; }


.percorso-card[data-delay="2"] { transition-delay: 0.30s; }





.percorso-card:hover {


  transform: translateY(-6px);


  box-shadow: 0 16px 40px rgba(0,0,0,0.12);


}





/* —— Layer ARTWORK: sopra il verde, sotto testi e kicker —— */


.percorso-card .card-art {


  position: absolute;


  top: var(--card-icon-pos-y);


  left: 50%;


  transform: translateX(-50%);


  width: var(--card-icon-size);


  height: var(--card-icon-size);


  background-image: var(--card-icon);


  background-size: contain;


  background-repeat: no-repeat;


  background-position: center;


  opacity: var(--card-icon-opacity);


  pointer-events: none;


  z-index: 1; /* sotto contenuti, sopra background verde */


}





/* —— Kicker: sempre in cima alla pila —— */


.kicker {


  position: absolute;


  top: 0; left: 0;


  width: 100%; height: 44px;


  background: var(--accent);


  color: #fff;


  display: flex;


  align-items: center;


  padding-left: 24px;


  font-size: 0.90rem;


  font-weight: 700;


  letter-spacing: 0.6px;


  text-transform: uppercase;


  z-index: 3;


}





/* —— Titolo —— */


.percorso-card h3 {


  margin: var(--icon-slot) 0 24px; /* mantiene la spaziatura come quando c’era l’icona <img> */


  font-family: "Georgia", serif;


  font-size: 1.8rem;


  line-height: 1.2;


  text-align: center;


  color: var(--text-dark);


  position: relative;


  z-index: 2; /* sopra all’artwork */


}





/* —— Lista bullet —— */


.benefit-list {


  list-style: none;


  padding: 0;


  margin: 0 0 24px;


  position: relative;


  z-index: 2;


}


.benefit-list li {


  position: relative;


  padding-left: 28px;


  margin-bottom: 12px;


  font-size: 1rem;


  color: var(--text-dark);


}


.benefit-list li::before {


  content: "✔";


  position: absolute;


  left: 0; top: 0;


  color: var(--accent);


  font-weight: bold;


}





/* —— Prezzo —— */


.price {


  margin-top: auto;


  font-size: 1rem;


  text-align: right;


  font-weight: 600;


  color: var(--text-dark);


  position: relative;


  z-index: 2;


}


.price span {


  font-family: "Georgia", serif;


  font-size: 1.4rem;


  margin-left: 0.3rem;


}





/* —— Responsive —— */


@media (max-width: 1024px) {


  .card-wrapper {


    flex-wrap: wrap;


  }


  .percorso-card {


    width: 90vw;


    height: auto;


    margin-bottom: 6vh;


    --icon-slot: 110px;            /* titolo più vicino su mobile */


    --card-icon-size: 150px;       /* icona un filo più piccola su mobile */


    --card-icon-pos-y: 90px;


  }


}





/* —— Fade-in allo scroll —— */


.will-fade {


  opacity: 0;


  transform: translateY(24px);


  transition: opacity .6s ease, transform .6s ease;


  will-change: opacity, transform;


}


.fade-in {


  opacity: 1 !important;


  transform: translateY(0) !important;


}





/* ——— BG immagine per-card, dentro la card e sotto il kicker ——— */


.percorsi-section .percorso-card {


  position: relative; /* non cambia la resa esistente */


  overflow: hidden;   /* evita sbordi dell’immagine */


}





.percorsi-section .percorso-card::before {


  content: "";


  position: absolute;


  inset: 0;


  background-image: var(--card-bg-image);


  background-size: cover;


  background-position: center;


  background-repeat: no-repeat;


  opacity: var(--card-bg-opacity, 0.10); /* ~10% */


  pointer-events: none;


  z-index: 0; /* sotto contenuti e sotto .card-art (z-index:1), il kicker resta sopra (z-index:3) */


}





.percorsi-section .card-wrapper .percorso-card:nth-child(1) {


  --card-bg-image: url("../Immagini/Icona1_bg_orange.png"); /* o bg-card1.png se preferisci */


}


.percorsi-section .card-wrapper .percorso-card:nth-child(2) {


  --card-bg-image: url("../Immagini/Icona2_bg_orange.png");


}


.percorsi-section .card-wrapper .percorso-card:nth-child(3) {


  --card-bg-image: url("../Immagini/Icona3_bg_orange.png");


}





/* —— Bottone dentro card —— */


.card-btn {


  display: inline-block;


  margin-top: auto;


  padding: 12px 24px;


  background: var(--bg-claro); /* #a87344 — rosso mattone/arancio */


  color: #fff;


  font-weight: 600;


  text-align: center;


  text-decoration: none;


  border-radius: 8px;


  transition: background 0.3s ease, transform 0.2s ease;


  position: relative;


  z-index: 2; /* sopra lo sfondo immagine */


}





.card-btn:hover {


  background: #915d32; /* variante più scura per hover */


  transform: translateY(-2px);


}





/* —— Didascalia sotto la lista —— */


.benefit-sub {


  margin-top: -10px;


  margin-bottom: 20px;


  font-size: 0.9rem;


  font-weight: 300;


  text-align: center;


  color: #ffffffcc; /* bianco attenuato */


  line-height: 1.4;


  position: relative;


  z-index: 2; /* sopra lo sfondo */


}








/* —— Highlight personalizzati per i titoli delle card —— */


.highlight-sicure {


  background: linear-gradient(120deg, #afbdad 0%, #afbdad 100%);


  background-repeat: no-repeat;


  background-size: 100% 1.2em;


  background-position: 0 88%;


}





.highlight-inquiete {


  background: linear-gradient(120deg, #d29661 0%, #d29661 100%);


  background-repeat: no-repeat;


  background-size: 100% 1.2em;


  background-position: 0 88%;


}





.highlight-distanza {


  background: linear-gradient(120deg, #a87344 0%, #a87344 100%);


  background-repeat: no-repeat;


  background-size: 100% 1.2em;


  background-position: 0 88%;


}


/* ===== Titolo sezione percorsi ===== */


.percorsi-section {


  display: flex;            /* layout a colonna */


  flex-direction: column;


  align-items: center;      /* centra il contenuto */


  position: relative;


}





.percorsi-title-container {


  width: 100%;              /* occupa tutta la riga */


  position: relative;


  z-index: 2;               /* sopra al video bg */


  overflow: hidden;         /* nasconde durante l'animazione */


  text-align: center;


  margin-bottom: 3rem;      /* spazio sotto il titolo */


}





.percorsi-title {


  font-family: "Playfair Display", serif; /* stesso font dei tuoi titoli */


  font-size: clamp(1.8rem, 4vw, 2.8rem);


  font-weight: 900;


  color: #fffdf7; /* avorio chiaro */


  line-height: 1.2;





  /* stato iniziale animazione */


  opacity: 0;


  transform: translateX(-60px);  /* entra da sinistra */


  transition: opacity 0.8s ease-out, transform 0.8s ease-out;


}





.percorsi-title.show {


  opacity: 1;


  transform: translateX(0);


}





/* Variante: se vuoi farlo entrare da destra invece che da sinistra


.percorsi-title {


  transform: translateX(60px);


}


*/