body{ font-family:Arial,sans-serif; margin:0; line-height:18px; color:#0f172a; background:#fff; } 
.container{ max-width:650px; margin:auto; padding:18px; } 
h1,h2,h3{line-height:1.2;margin:5px 0} /* ========== HERO ========== */ .hero{ text-align:center; padding:5px 5px; } 
.experiences-section{
  margin:15px 0; } 
.experience-grid{
  display:grid;
  gap:14px; } 
.experience-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.05);
  transition:.2s; } 
.experience-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 35px rgba(0,0,0,.1); } 
.experience-img{
  width:100%;

  object-fit:cover; } 
.experience-body{
  padding:14px; } 
.experience-title{
  font-size:16px;
  color:#0f172a;
  margin-bottom:6px; } 
.meta-row{
  display:grid;
  gap:6px;
  font-size:13px;
  color:#475569;
  margin:10px 0; } 
.tag{
  display:inline-block;
  font-size:12px;
  padding:4px 8px;
  border-radius:20px;
  background:#eef6f2;
  color:#2f6f5e;
  margin-right:5px; } 
.bad{
  background:#fff1f1;
  color:#9b2c2c; } 
.review-box{
  font-size:13px;
  padding:10px;
  border-radius:10px;
  background:#f8fafc;
  border-left:3px solid #d6bfa3;
  margin-top:10px; } 
.hero h1{font-size:28px} 
img{ width:100%; border-radius:14px; margin:12px 0; } 
/* ========== BUTTON ========== */ .btn,.cta,.cta-day{ display:inline-block; padding:12px 18px; background:#c8a96a; color:#fff; border-radius:28px; text-decoration:none; font-weight:600; transition:.2s; } 
.btn:hover,.cta:hover,.cta-day:hover{ background:#b89255; transform:translateY(-2px); } 
/* ========== GRID ========== */ .grid{ display:grid; gap:14px; } 


.card,.product-card,.day-card{ background:#fff; border:1px solid #eee; border-radius:16px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,.06); transition:.2s; } 
.card:hover,.product-card:hover,.day-card:hover{ transform:translateY(-4px); box-shadow:0 16px 35px rgba(0,0,0,.1); } 
/* ========== CARD BODY ========== */ .product-body,.day-body{ padding:16px; } 
/* ========== TITOLI PRODOTTI ========== */ .product-title,.day-title{ font-size:18px; color:#0f172a; } 
/* ========== BADGE ========== */ .badge,.badge-day,.badge-experience{ display:inline-block; font-size:12px; padding:5px 10px; border-radius:20px; margin-bottom:8px; } 
/* colori badge differenziati (minimal ma efficace) */ .badge{background:#ecfdf5;color:#047857} .badge-day{background:#fff7ed;color:#c2410c} .badge-experience{background:#0f172a;color:#fff} /* ========== PRICE ========== */ .price,.price-day{ font-size:20px; font-weight:bold; color:#c8a96a; margin:8px 0; } 
/* ========== META TEXT ========== */ .product-meta,.meta-day{ font-size:14px; color:#475569; } 
.story-section{ position:relative; padding:18px 18px; margin:15px 0; background:#fff; border:1px solid #eee; border-radius:18px; box-shadow:0 10px 25px rgba(0,0,0,.05); } 
/* fascia elegante superiore */ .story-section::before{ content:"Consigli utili"; position:absolute; top:-10px; left:18px; background:#0f172a; color:#fff; font-size:12px; padding:4px 10px; border-radius:20px; letter-spacing:.5px; } 
/* titolo principale più “editoriale” */ .story-section h2{ font-size:16px; margin-top:5px; color:#0f172a; } 
/* testo più editoriale (meno “scheda informativa”) */ .story-section p{ color:#475569; font-size:15px; } 
/* immagine storytelling */ .story-section img{ width:100%; border-radius:14px; margin:14px 0; border:1px solid #f1f5f9; } 
/* micro-highlight per date o dati storici */ .story-highlight{ display:inline-block; background:#f8fafc; border-left:3px solid #c8a96a; padding:8px 10px; border-radius:10px; font-size:13px; margin:10px 0; color:#0f172a; } 
/* blocchi informativi (luogo, età) */ .story-meta{ display:grid; gap:10px; margin-top:10px; } 
.story-meta div{ background:#f8fafc; padding:10px 12px; border-radius:12px; font-size:14px; color:#334155; } 
/* ========== CHIAVE MAGICA (SNELLITA MA PREMIUM) ========== */ .chiave-magica{ background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; padding:22px 16px; border-radius:18px; margin:25px 0; position:relative; overflow:hidden; } 
.chiave-magica p{color:#cbd5e1;font-size:14px} .chiave-magica img{ border:2px solid rgba(200,169,106,.3); border-radius:14px; } 
/* lista esperienze più pulita */ .experience-list{ list-style:none; padding:0; margin:15px 0; display:grid; gap:10px; } 
.experience-list li{ background:rgba(255,255,255,.06); padding:10px 12px; border-left:3px solid #c8a96a; border-radius:10px; } 
/* ========== REVIEW ========== */ .review{ background:#f8fafc; border-left:4px solid #c8a96a; padding:12px; border-radius:10px; margin:12px 0; } 
.stars{color:#f59e0b} /* ========== PRO / CONS ========== */ .pro,.cons{ padding:12px; border-radius:12px; } 
.pro{background:#ecfdf5} .cons{background:#fef2f2} /* ========== FOOTER ========== */ .footer{ background:#0f172a; color:#fff; padding:25px 18px; margin-top:35px; } 
.footer a{ color:#c8a96a; display:block; text-decoration:none; margin:6px 0; font-size:14px; } 
.hero{ position:relative; text-align:center; padding:10px; background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%); overflow:hidden; } 
/* glow soft “magico” coerente con Chiave Magica */ .hero::before{ content:""; position:absolute; top:-40%; left:-30%; width:160%; height:160%; background:radial-gradient(circle, rgba(200,169,106,0.18), transparent 60%); animation:heroGlow 10s linear infinite; z-index:0; } 
@keyframes heroGlow{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } .hero h1{ font-size:30px; line-height:1.15; margin-bottom:10px; color:#0f172a; position:relative; z-index:2; } 
.hero p{ font-size:15px; color:#475569; max-width:520px; margin:0 auto; position:relative; z-index:2; } 
/* badge intent SEO (molto importante per AI Overview) */ .hero-badge{ display:inline-block; background:#0f172a; color:#fff; font-size:12px; padding:2px 2px; border-radius:20px; margin-bottom:5px; position:relative; z-index:2; } 
/* CTA migliorata */ .hero .btn{ margin-top:5px; position:relative; z-index:2; box-shadow:0 10px 25px rgba(200,169,106,0.25); } 
/* ===== FAQ WRAPPER ===== */ .faq{ margin-top:35px; padding:20px 18px; background:#fff; border:1px solid #eee; border-radius:18px; box-shadow:0 10px 25px rgba(0,0,0,.05); position:relative; } 
/* badge titolo sezione */ .faq::before{ content:"FAQ & Consigli"; position:absolute; top:-10px; left:18px; background:#0f172a; color:#fff; font-size:12px; padding:4px 10px; border-radius:20px; } 
/* titolo FAQ */ .faq h2{ font-size:20px; margin-bottom:5px; color:#0f172a; } 
/* domanda */ .faq h3{ font-size:15px; margin:12px 0 6px; color:#0f172a; cursor:pointer; padding-left:18px; position:relative; } 
/* icona domanda */ .faq h3::before{ content:"❓"; position:absolute; left:0; } 
/* risposta */ .faq p{ margin:0 0 10px; font-size:14px; color:#475569; padding-left:18px; border-left:2px solid #f1f5f9; } 
/* hover leggero UX (stile accordion soft) */ .faq h3:hover{ color:#c8a96a; } 
/* ===== EXPERT BLOCK ===== */ .expert-box{ margin-top:25px; padding:18px; border-radius:16px; background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; position:relative; overflow:hidden; } 
/* glow soft */ .expert-box::before{ content:""; position:absolute; top:-40%; left:-40%; width:180%; height:180%; background:radial-gradient(circle, rgba(200,169,106,0.2), transparent 60%); animation:expertGlow 10s linear infinite; } 
@keyframes expertGlow{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } .expert-box strong{ color:#f8fafc; position:relative; z-index:2; } 

.expert-box p{ color:#cbd5e1; font-size:14px; position:relative; z-index:2; margin:0; 
}

.experiences-section{
  margin:10px 0;
}

.experience-grid{
  display:grid;
  gap:14px;
}



.experience-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.05);
  transition:.2s;
}

.experience-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 35px rgba(0,0,0,.1);
}

.experience-img{
  width:100%;

  object-fit:cover;
}

.experience-body{
  padding:14px;
}

.experience-title{
  font-size:16px;
  color:#0f172a;
  margin-bottom:6px;
}

.meta-row{
  display:grid;
  gap:6px;
  font-size:13px;
  color:#475569;
  margin:10px 0;
}

.tag{
  display:inline-block;
  font-size:12px;
  padding:4px 8px;
  border-radius:20px;
  background:#eef6f2;
  color:#2f6f5e;
  margin-right:5px;
}

.bad{
  background:#fff1f1;
  color:#9b2c2c;
}

.review-box{
  font-size:13px;
  padding:10px;
  border-radius:10px;
  background:#f8fafc;
  border-left:3px solid #d6bfa3;
  margin-top:10px;
}

/* =========================
   LOGISTIC BOX SYSTEM
========================= */
.info-section{
  margin:35px 0;
}

.info-grid{
  display:grid;
  gap:14px;
}



.info-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.05);
  transition:.2s;
}

.info-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 35px rgba(0,0,0,.1);
}

.info-img{
  width:100%;
  height:170px;
  object-fit:cover;
}

.info-body{
  padding:14px;
}

.info-title{
  font-size:16px;
  margin-bottom:6px;
  color:#0f172a;
}

.info-body p{
  font-size:14px;
  color:#475569;
}

/* highlight chiave magica */
.highlight{
  background:#f8fafc;
  border-left:3px solid var(--accent);
  padding:10px;
  border-radius:10px;
  margin:10px 0;
  font-size:13px;
}

/* pro / contro mini */
.pc{
  margin-top:10px;
  font-size:13px;
}

.pc strong{
  display:block;
  margin-bottom:3px;
}

.pc .pro{color:#2f6f5e}
.pc .contro{color:#9b2c2c}