/* Tema Organic — Terra bruciata + Olive desaturato
   Lora italic + Nunito light. Stile hand-crafted, blob shapes, dashed borders.
   Differenziato da Natura con: blob radius organici, card tilt su hover,
   bordi dashed, foto con filtro warm, grid masonry-like, texture paper,
   animazioni fade-up su scroll. */

/* === FONTS === */
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/lora-400.ttf') format('truetype')}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/lora-400i.ttf') format('truetype')}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/lora-700.ttf') format('truetype')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/nunito-300.ttf') format('truetype')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/nunito-400.ttf') format('truetype')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/nunito-600.ttf') format('truetype')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/nunito-700.ttf') format('truetype')}

/* === VARIABLES — Terra bruciata + olive (desaturato) === */
:root {
  --bg:#F5F1E8;--card:#FFFDF6;--ink:#2B3520;--green:#6B7E3D;--green-light:#8A9E53;
  --green-pale:#E8EDD7;--gold:#A9581E;--gold-light:#F3E4D0;--muted:#6B6B50;
  --border:#CFC8B0;--cream:#EDE4CE;
  --font-serif:'Lora',Georgia,serif;
  --font-sans:'Nunito','Segoe UI',sans-serif;
}
::selection{background:#A9581E;color:#F5F1E8}

/* === PAPER TEXTURE BACKGROUND === */
body{
  background-color:#F5F1E8;
  background-image:
    radial-gradient(at 20% 10%,rgba(107,126,61,.05) 0%,transparent 50%),
    radial-gradient(at 80% 70%,rgba(169,88,30,.05) 0%,transparent 50%),
    repeating-radial-gradient(circle at 0 0,transparent 0,rgba(43,53,32,.012) 2px,transparent 4px);
}

/* === KEYFRAMES === */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes blobMorph{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}
@keyframes leafSway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes drawUnderline{from{width:0}to{width:60px}}

/* === GLOBAL SHAPE — Dashed borders + tilt on hover === */
.svc-card,.review-card,.team-card,.offerta-card,.blog-card,.contact-card,.orari-card,.faq-item{
  border:2px dashed #A9581E!important;
  border-radius:18px 6px 18px 6px!important; /* asymmetric */
  background:#FFFDF6;
  box-shadow:6px 6px 0 rgba(107,126,61,.12);
  transition:all .5s cubic-bezier(.34,1.4,.64,1);
  animation:fadeUp .8s ease backwards;
}
.svc-card:nth-child(2n),.offerta-card:nth-child(2n){border-radius:6px 18px 6px 18px!important} /* alternate */
.svc-card:hover,.review-card:hover,.team-card:hover,.offerta-card:hover,.blog-card:hover,.contact-card:hover{
  transform:translateY(-6px) rotate(-1deg);
  box-shadow:12px 12px 0 rgba(169,88,30,.18);
  border-color:#6B7E3D!important;
  border-style:solid!important;
}
.svc-card::after{display:none!important}

/* === Buttons — Irregular blob shapes, wobble on hover === */
.btn-hero,.nav-cta{
  border-radius:40px 14px 40px 14px!important;
  background:#6B7E3D!important;color:#F5F1E8!important;
  padding:1rem 2.4rem!important;
  border:2px solid #2B3520!important;
  box-shadow:4px 4px 0 #2B3520;
  font-weight:700;letter-spacing:.02em;
  transition:all .3s;
}
.btn-hero:hover,.nav-cta:hover{
  background:#A9581E!important;
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 #2B3520;
}
.btn-hero-primary{background:#A9581E!important;color:#F5F1E8!important;border-color:#2B3520!important}
.btn-hero-primary:hover{background:#6B7E3D!important}
.btn-hero-outline{background:transparent!important;color:#2B3520!important;border:2px dashed #2B3520!important;box-shadow:none}
.btn-hero-outline:hover{background:#2B3520!important;color:#F5F1E8!important;border-style:solid!important;box-shadow:4px 4px 0 #A9581E}

/* === Icons — Blob shapes, morph animation === */
.svc-icon,.orari-card-icon,.contact-card-icon{
  width:72px;height:72px;
  background:#E8EDD7;color:#6B7E3D;
  border:2px solid #6B7E3D;
  border-radius:60% 40% 30% 70%/60% 30% 70% 40%!important;
  animation:blobMorph 8s ease-in-out infinite;
  transition:all .4s;
}
.svc-card:hover .svc-icon{
  background:#A9581E;color:#F5F1E8;border-color:#A9581E;
  animation-duration:3s;
}
.contact-card-icon{background:#F3E4D0;color:#A9581E;border-color:#A9581E}

/* === Hero badge — ribbon style === */
.hero-badge{
  background:#A9581E;color:#F5F1E8;
  padding:.6rem 1.5rem .6rem 2rem;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  position:relative;border-radius:0;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%);
}
.hero-badge::before{background:#F5F1E8}

/* === Sections === */
.services,.orari,.reviews,.team,.contact,.gallery,.faq,.offerte-preview,.offerte-section,.turni-section,.booking-section,.blog-section{
  padding:6rem 2.5rem!important;
}
.reviews{background:#EDE4CE}

/* === Hero — FLIPPED layout (visual left, text right) + blob === */
.hero{
  padding:9rem 2.5rem 5rem!important;
  background:linear-gradient(160deg,#F5F1E8 0%,#EDE4CE 60%,#E8EDD7 100%);
  position:relative;overflow:hidden;
}
/* Flip hero grid: visual 3fr, text 2fr */
.hero-inner{
  grid-template-columns:3fr 2fr!important;
  gap:5rem!important;
  direction:rtl;
}
.hero-inner>*{direction:ltr}
.hero-content{order:2}
.hero-visual{order:1;min-height:520px!important}
.hero::before{
  content:'';position:absolute;top:-10%;right:-10%;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(107,126,61,.15),transparent 70%);
  border-radius:60% 40% 30% 70%/60% 30% 70% 40%;
  animation:blobMorph 15s ease-in-out infinite;
}
.hero::after{
  content:'';position:absolute;bottom:10%;left:-5%;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(169,88,30,.1),transparent 70%);
  border-radius:30% 60% 70% 40%/50% 60% 30% 60%;
  animation:blobMorph 12s ease-in-out infinite reverse;
}
.hero h1{
  font-size:clamp(2.8rem,6vw,5rem)!important;
  color:#2B3520!important;
  font-family:'Lora',Georgia,serif!important;
  font-weight:700!important;
  line-height:1.05!important;
}
.hero h1 em{color:#A9581E;font-style:italic;font-weight:400;position:relative;display:inline-block}
.hero h1 em::after{
  content:'';position:absolute;bottom:-6px;left:0;
  height:4px;background:#6B7E3D;
  width:60px;animation:drawUnderline 1.2s ease .5s backwards;
}
.hero .lead,.hero-sub{color:#4A5437;font-weight:400}
.hero-visual-circle{
  width:440px;height:440px;
  background:radial-gradient(circle at 30% 30%,#E8EDD7,#6B7E3D 85%);
  border-radius:60% 40% 30% 70%/60% 30% 70% 40%!important;
  animation:blobMorph 18s ease-in-out infinite;
  border:4px solid #2B3520;
}
.hero-visual-cross::before,.hero-visual-cross::after{background:#A9581E;border-radius:4px}
.hero-stat-num{color:#A9581E;font-size:2.4rem!important;font-family:'Lora',serif!important}
.hero-float{
  border:2px dashed #6B7E3D;background:#FFFDF6;
  box-shadow:4px 4px 0 rgba(43,53,32,.15);
  border-radius:18px 6px 18px 6px!important;
}
.hero-float-icon.green{background:#E8EDD7;color:#6B7E3D;border-radius:60% 40% 30% 70%/60% 30% 70% 40%}
.hero-float-icon.gold{background:#F3E4D0;color:#A9581E;border-radius:30% 60% 70% 40%/50% 60% 30% 60%}

/* === Section headings — Lora diritto, em corsivo con bg highlight === */
.section-heading{
  font-size:clamp(2rem,4.5vw,3.2rem)!important;
  color:#2B3520!important;
  font-family:'Lora',Georgia,serif!important;
  font-weight:700!important;
  line-height:1.1!important;
  transform:none!important;
}
.section-heading em,.about-title em{
  color:#A9581E;font-style:italic;font-weight:400;
  position:relative;display:inline-block;
}
.section-heading em::before{
  content:'';position:absolute;left:-4%;right:-4%;bottom:4px;
  height:10px;background:#F3E4D0;z-index:-1;
  border-radius:4px;
}
.section-tag,.contact-tag{
  color:#A9581E!important;font-size:.78rem!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  font-weight:700!important;font-family:'Nunito',sans-serif!important;
}
.section-tag::before,.contact-tag::before{background:#6B7E3D;height:2px}

/* === Service grid — FEATURED FIRST: 1 big card + small grid === */
.svc-grid{
  gap:1.6rem!important;
  grid-template-columns:repeat(6,1fr)!important;
  grid-auto-rows:minmax(180px,auto)!important;
}
.svc-card{padding:2rem 1.8rem!important}
/* First card: big, spans 3 cols and 2 rows */
.svc-card:nth-child(1){
  grid-column:span 3;grid-row:span 2;
  padding:3rem 2.6rem!important;
  background:linear-gradient(135deg,#6B7E3D 0%,#4A5437 100%);
  color:#F5F1E8;
  border-color:#2B3520!important;
}
.svc-card:nth-child(1) h3{font-size:2rem!important;color:#F5F1E8!important;margin-top:2rem}
.svc-card:nth-child(1) p{color:#E8EDD7!important;font-size:1.05rem}
.svc-card:nth-child(1) .svc-icon{background:#F5F1E8!important;color:#2B3520!important;width:84px;height:84px;border-color:#F5F1E8}
/* Others: span 3 cols, stack */
.svc-card:nth-child(2),.svc-card:nth-child(3){grid-column:span 3}
.svc-card:nth-child(4),.svc-card:nth-child(5),.svc-card:nth-child(6){grid-column:span 2}
.svc-card h3{font-size:1.2rem!important;font-family:'Lora',serif!important;color:#2B3520;margin-top:1.2rem;font-weight:700}
@media(max-width:900px){
  .svc-grid{grid-template-columns:1fr 1fr!important}
  .svc-card:nth-child(1){grid-column:span 2;grid-row:auto}
  .svc-card:nth-child(2),.svc-card:nth-child(3),.svc-card:nth-child(4),.svc-card:nth-child(5),.svc-card:nth-child(6){grid-column:span 1}
}
@media(max-width:600px){
  .svc-grid{grid-template-columns:1fr!important}
  .svc-card:nth-child(n){grid-column:span 1!important}
}
/* Stagger animation on scroll */
.svc-card:nth-child(1){animation-delay:0s}
.svc-card:nth-child(2){animation-delay:.15s}
.svc-card:nth-child(3){animation-delay:.3s}
.svc-card:nth-child(4){animation-delay:.45s}
.svc-card:nth-child(5){animation-delay:.6s}
.svc-card:nth-child(6){animation-delay:.75s}

/* === Nav === */
.nav{background:rgba(245,241,232,.95)!important;backdrop-filter:blur(12px);border-bottom:2px dashed #6B7E3D!important}
.nav-name,.nav .brand{color:#2B3520!important;font-family:'Lora',serif!important;font-weight:700}
.nav-links a{color:#4A5437!important;font-weight:600;position:relative}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;
  height:2px;background:#A9581E;width:0;transition:width .3s;
  transform:skewX(-8deg);
}
.nav-links a:hover{color:#A9581E!important}
.nav-links a:hover::after{width:100%}
.nav-cross::before,.nav-cross::after{background:#A9581E}
.mobile-overlay{background:#2B3520}
.mobile-overlay a{color:#E8EDD7}
.mobile-overlay a:hover{color:#A9581E}

/* === About — Olive gradient === */
.about{
  background:linear-gradient(135deg,#6B7E3D,#4A5437)!important;
  color:#F5F1E8!important;border-radius:0;
  padding:6rem 3rem!important;
}
.about::before,.about::after{border-color:rgba(245,241,232,.1)!important}
.about h1,.about h2,.about h3,.about-title{color:#F5F1E8!important}
.about-title em{color:#F3E4D0;font-style:italic}
.about-stat-num{color:#F3E4D0;font-family:'Lora',serif}
.about-quote{border-color:#A9581E;color:#E8EDD7;font-style:italic;border-left-width:4px}
.about-values li{color:#E8EDD7}
.about-values li::before{background:#A9581E;border-radius:60% 40% 30% 70%}

/* === Reviews === */
.review-card{text-align:center;padding:2.4rem 1.8rem!important}
.review-stars{color:#A9581E;font-size:1.1rem;letter-spacing:.2em}
.review-author{color:#6B7E3D;font-weight:700;font-family:'Lora',serif}
.review-text{color:#4A5437;font-style:italic;font-size:1.02rem}

/* === Team — Blob photos with warm filter === */
.team-photo{
  width:150px!important;height:150px!important;
  border-radius:60% 40% 30% 70%/60% 30% 70% 40%!important;
  border:4px solid #A9581E;
  filter:sepia(15%) saturate(1.1) hue-rotate(-5deg);
  animation:blobMorph 10s ease-in-out infinite;
  transition:all .5s;
}
.team-card:hover .team-photo{
  border-color:#6B7E3D;
  filter:sepia(0%) saturate(1.2);
  animation-duration:4s;
}
.team-card{text-align:center;padding:2rem 1.6rem!important}
.team-role{color:#A9581E;font-weight:700;font-family:'Lora',serif;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.team-name{font-family:'Lora',serif;color:#2B3520;font-size:1.3rem;font-weight:700}

/* === Gallery — foto con bordo asimmetrico e sepia === */
.gallery-grid img{
  border-radius:18px 6px 18px 6px!important;
  border:3px solid #A9581E;
  filter:sepia(10%);
  transition:all .5s cubic-bezier(.34,1.4,.64,1);
}
.gallery-grid img:hover{
  transform:scale(1.05) rotate(-2deg);
  filter:sepia(0%);
  box-shadow:8px 8px 0 rgba(169,88,30,.3);
}

/* === Offerte === */
.offerta-badge{
  background:#A9581E;color:#F5F1E8;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%);
  padding:.4rem 1.3rem .4rem 1rem;
  font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.offerta-scadenza{color:#A9581E}
.offerta-title{font-family:'Lora',serif;color:#2B3520;font-weight:700}
.offerta-card img{border-radius:16px 4px 16px 4px;filter:sepia(12%)}

/* === Blog === */
.cat-news,.cat-offerta,.cat-blog{
  background:#E8EDD7;color:#6B7E3D;
  border:1.5px dashed #6B7E3D;
  border-radius:50px 12px 50px 12px;
  padding:.3rem 1rem;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
}
.cat-offerta{background:#F3E4D0;color:#A9581E;border-color:#A9581E}
.blog-card h3{font-family:'Lora',serif;color:#2B3520;font-weight:700}
.blog-card img{border-radius:18px 6px 0 0;filter:sepia(10%)}

/* === Contact === */
.contact{background:linear-gradient(160deg,#EDE4CE,#E8EDD7)}
.contact-card a{color:#2B3520}
.contact-card a:hover{color:#A9581E}

/* === Footer === */
.site-footer{
  background:#2B3520;color:#E8EDD7;
  border-top:3px dashed #A9581E;
}
.site-footer a{color:#E8EDD7}
.site-footer a:hover{color:#A9581E}
.footer-logo{color:#A9581E;font-family:'Lora',serif;font-weight:700}
.footer-cross::before,.footer-cross::after{background:#A9581E}
.footer-col h4{color:#F5F1E8;font-family:'Lora',serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.88rem}
.footer-bottom a{color:#A9581E}

/* === FAQ — Accordion con indicatore animato === */
.faq-item{
  background:#FFFDF6;
  border:2px dashed #6B7E3D!important;
  border-radius:18px 6px 18px 6px!important;
  box-shadow:4px 4px 0 rgba(107,126,61,.12);
}
.faq-item.open{
  border-style:solid!important;
  border-color:#A9581E!important;
  box-shadow:6px 6px 0 rgba(169,88,30,.18);
  transform:translateX(-4px);
}
.faq-item.open .faq-question{color:#A9581E}
.faq-question{font-family:'Lora',serif;color:#2B3520;font-weight:700}

/* === Turni === */
.turni-day.today{outline-color:#A9581E;outline-width:3px;outline-style:dashed}
.turni-event{border-left-color:#A9581E;border-left-width:4px;border-radius:12px 4px 12px 4px}

/* === Forms === */
.booking-form input,.booking-form textarea,.booking-form select{
  border-radius:14px 6px 14px 6px!important;
  border:2px dashed #CFC8B0!important;background:#FFFDF6;
  transition:all .3s;
}
.booking-form input:focus,.booking-form textarea:focus{
  border-color:#6B7E3D;border-style:solid;outline:none;
  box-shadow:4px 4px 0 rgba(107,126,61,.15);
}

/* === Brands === */
.brands{border-top:2px dashed #CFC8B0;border-bottom:2px dashed #CFC8B0;background:transparent}
.brands img{filter:sepia(20%) saturate(.8);transition:all .3s}
.brands img:hover{filter:sepia(0) saturate(1.1);transform:scale(1.1)}

/* === Filter / Pagination === */
.filter-btn{
  border:2px dashed #6B7E3D;background:transparent;color:#6B7E3D;
  border-radius:20px 6px 20px 6px;font-weight:700;
}
.filter-btn.active,.filter-btn:hover{background:#6B7E3D;color:#F5F1E8;border-style:solid}
.page-btn{border:2px dashed #CFC8B0;border-radius:8px}
.page-btn.active,.page-btn:hover{background:#6B7E3D;color:#F5F1E8;border-color:#6B7E3D;border-style:solid}

/* === Cookie === */
.cookie-banner{background:#2B3520;color:#E8EDD7;border-top:2px dashed #A9581E}
.cookie-banner button{background:#A9581E;color:#F5F1E8;border-radius:14px 4px 14px 4px;font-weight:700}
.cookie-banner button:hover{background:#6B7E3D}

/* === Typography — Lora diritto, solo em/quote in corsivo === */
h1,h2,h3,h4,h5,h6{font-family:'Lora',Georgia,serif;color:#2B3520;font-weight:700;font-style:normal}
h1 em,h2 em,h3 em,h4 em,h5 em,h6 em{font-style:italic;font-weight:400}
a{color:#A9581E;position:relative}
a:hover{color:#6B7E3D}

/* === Scroll reveal — respect reduced motion === */
@media(prefers-reduced-motion:reduce){
  .svc-card,.review-card,.team-card,.offerta-card,.blog-card{animation:none!important}
  .svc-icon,.hero::before,.hero::after,.hero-visual-circle,.team-photo{animation:none!important}
}

/* === Mobile === */
@media(max-width:768px){
  .hero{padding:8rem 1.5rem 5rem!important}
  .hero-visual-circle{width:280px;height:280px}
  .services,.orari,.reviews,.team,.contact,.faq{padding:4rem 1.5rem!important}
  .svc-grid{grid-template-columns:1fr!important}
  .svc-card:nth-child(3),.svc-card:nth-child(6){transform:translateY(0)}
  .gallery-grid>*:nth-child(3n){transform:translateY(0)}
}