/* ==========================================================================
   Home — sezioni nell'ordine in cui compaiono
   ========================================================================== */

/* 1. Immagine iniziale con presentazione di 4 foto */
.hero { position: relative; min-height: 90vh; background: #1C2018; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--bianco); }
.hero__foto { position: absolute; left: 0; top: 0; width: 100%; height: auto; min-height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.hero__foto.attiva { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(16, 18, 13, .72) 0%, rgba(16, 18, 13, .52) 34%, rgba(16, 18, 13, .2) 64%, rgba(16, 18, 13, .12) 100%), linear-gradient(180deg, rgba(16, 18, 13, .16) 0%, rgba(16, 18, 13, .36) 100%); }
.hero__testo { position: relative; z-index: 2; width: 608px; max-width: 100%; }
.hero h1, .hero h2 { font: 400 56.16px/60.65px var(--f-titoli); color: var(--bianco); }
.hero p { font: 400 18px/29px var(--f-testo); color: var(--bianco); margin-top: 41px; text-shadow: 0 3px 14px rgba(0, 0, 0, .55); }
.hero__azioni { display: flex; justify-content: center; gap: 14px; margin-top: 21px; }

/* 2. Fascia scorrevole */
.fascia { background: var(--verde-scuro); height: 90px; overflow: hidden; display: flex; align-items: center; }
.fascia__pista { display: flex; align-items: center; flex: 0 0 auto; animation: scorri 40s linear infinite; }
.fascia__voce { display: flex; align-items: center; flex: 0 0 auto; }
.fascia__voce a { font: 400 28.23px/33px var(--f-titoli); color: var(--bianco); text-transform: capitalize; white-space: nowrap; }
.fascia__voce img { width: 50px; height: 50px; margin: 0 58px; }
.fascia__voce a { margin-left: 58px; }
@keyframes scorri { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fascia__pista { animation: none; } }

/* 3. Introduzione "Chi siamo" */
.intro { position: relative; text-align: center; padding: 84px 0 0; height: 391px; }
.intro .etichetta { display: block; letter-spacing: .1em; }
.intro h2 { font: 400 45.07px/58px var(--f-titoli); color: var(--testo); max-width: 940px; margin: 14px auto 0; }
.intro p { font: 400 18px/29px var(--f-testo); color: var(--testo); max-width: 929px; margin: 13px auto 0; }
.intro__pianta { position: absolute; top: 72%; width: clamp(280px, 26vw, 460px); height: clamp(420px, 42vw, 680px); background: url("../img/botanica-3.svg") center / contain no-repeat; transform: translateY(-50%); pointer-events: none; z-index: 0; }
.intro__pianta--sx { left: 0; }
.intro__pianta--dx { right: 0; transform: translateY(-50%) scaleX(-1); }
.intro::after { content: ""; position: absolute; left: 50%; top: 100%; width: clamp(72px, 7vw, 118px); aspect-ratio: 1 / 1; transform: translate(-50%, -46%); background: url("../img/logo.png") center / contain no-repeat; opacity: .28; pointer-events: none; z-index: 2; }
.intro > .etichetta, .intro > h2, .intro > p { position: relative; z-index: 1; }

/* 4. Quattro punti di forza */
.punti { padding: 100px 30px; }
.punti__riga { display: grid; grid-template-columns: repeat(4, 330px); gap: 20px; justify-content: center; align-items: start; }
.punto { border: 1px solid transparent; padding: 52px 41px 46px; text-align: center; }
.punto img { width: 85px; height: 85px; margin: 0 auto 29px; }
.punto h5 { font: 400 24px/29px var(--f-serif); color: var(--verde); text-transform: capitalize; }
.punto p { font: 400 18px/28.8px var(--f-testo); color: var(--verde); margin-top: 14px; }

/* 5. Categorie */
.categorie { padding: 0 30px 70px; }
.categorie__griglia { display: grid; grid-template-columns: 542px 808px; grid-template-rows: 324px 324px; gap: 30px; justify-content: center; }
.cat-card { position: relative; display: block; background-size: cover; background-position: center; overflow: hidden; color: var(--bianco); }
.cat-card--alta { grid-row: 1 / span 2; }
.cat-card::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .12); transition: background .3s ease; }
.cat-card:hover::after { background: rgba(0, 0, 0, .2); }
.cat-card__box { position: absolute; z-index: 2; top: 36px; left: 36px; padding: 14px 15px 12px; text-align: center; background: rgba(44, 62, 42, .3); border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r); box-shadow: 0 8px 20px rgba(16, 24, 12, .08); backdrop-filter: blur(3px); }
.cat-card--alta .cat-card__box { left: 80px; max-width: 352px; }
.cat-card__etichetta { display: block; font: 600 14px/16px var(--f-testo); text-transform: uppercase; letter-spacing: 1px; color: var(--bianco); }
.cat-card h2 { font: 400 45.07px/56px var(--f-serif); color: var(--bianco); text-transform: capitalize; margin-top: 24px; }
.categorie__tutte { display: flex; justify-content: center; margin-top: 108px; }

/* 6. Prodotti in evidenza */
.evidenza { background: var(--verde-chiaro); height: 885px; padding: 106px 0 0; position: relative; text-align: center; }
.evidenza .etichetta { display: block; }
.evidenza h2 { font: 400 45.07px/58px var(--f-titoli); color: var(--testo); margin: 11px auto 0; width: max-content; max-width: 100%; }
.slider { position: relative; margin-top: 40px; }
.slider__pista { display: flex; gap: 42px; padding: 0 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px; scrollbar-width: none; scroll-behavior: smooth; }
.slider__pista::-webkit-scrollbar { display: none; }
.prod-card { flex: 0 0 430px; height: 523px; background: var(--bianco); border: 1px solid rgba(79, 101, 59, .15); box-shadow: 0 6px 18px rgba(45, 60, 35, .06); scroll-snap-align: start; text-align: center; }
.prod-card__img { display: block; width: 428px; height: 428px; background: var(--bianco); }
.prod-card__img img { width: 428px; height: 428px; object-fit: contain; }
.prod-card h5 { font: 400 22.82px/30px var(--f-titoli); color: var(--testo); text-transform: capitalize; margin-top: 15px; }
.prod-card h5 a { color: var(--testo); }
.prod-card .prezzo { display: block; font: 600 16px/28.8px var(--f-testo); color: var(--prezzo); margin-top: 0; }
.slider__freccia { position: absolute; top: 255px; width: 36px; height: 36px; background: #2F4A32; border: 0; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(22, 34, 20, .18); z-index: 3; padding: 0; }
.slider__freccia img { width: 14px; height: 14px; filter: invert(1); }
.slider__freccia--sx { left: 0; } .slider__freccia--dx { right: 0; }
.slider__punti { display: flex; justify-content: center; gap: 6px; margin-top: 32px; }
.slider__punti button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: #C3C8BE; }
.slider__punti button.attivo { background: #6C6C6C; }

/* 7. Storia familiare */
.storia { position: relative; height: 704px; }
.storia__immagini { position: absolute; left: 0; top: 0; width: 740px; height: 100%; }
.storia__cornice { position: absolute; left: 116px; top: 71px; width: 518px; height: 488px; }
.storia__cornice::before, .storia__cornice::after { content: ""; position: absolute; width: 74px; height: 74px; border: 19px solid #F5EFE6; }
.storia__cornice::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.storia__cornice::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.storia__interno { position: absolute; left: 135px; top: 90px; width: 480px; height: 450px; background: var(--sfondo); }
.storia__foto-1 { position: absolute; left: 30px; top: 183px; width: 396px; height: 264px; object-fit: cover; }
.storia__foto-2 { position: absolute; left: 456px; top: 189px; width: 264px; height: 348px; object-fit: fill; }
.storia__sigillo { position: absolute; left: 366px; top: 133px; width: 120px; height: 120px; }
.storia__sigillo img { position: absolute; inset: 0; width: 120px; height: 120px; }
.storia__sigillo .stella { animation: ruota 18s linear infinite; }
@keyframes ruota { to { transform: rotate(360deg); } }
.storia__testo { position: absolute; left: 780px; top: 0; width: 593px; padding-top: 0; }
.storia__testo .etichetta { display: block; margin-top: 0; }
.storia__testo h2 { font: 400 45.07px/58px var(--f-titoli); color: var(--testo); margin-top: 17px; }
.storia__testo p { font: 400 18px/29px var(--f-testo); color: var(--testo); margin-top: 20px; }
.numeri { display: flex; gap: 36px; margin-top: 30px; }
.numeri > div { width: 207px; }
.numeri strong { display: block; font: 400 40px/50px var(--f-titoli); color: var(--verde); }
.numeri span { display: block; font: 400 18px/29px var(--f-testo); color: var(--verde); }
.storia .btn { margin-top: 36px; }

/* 8. Banner "Hai bisogno di un consiglio?" */
.banner-consiglio { position: relative; height: 600px; background: #3F5A70 url("../img/banner-consiglio.jpg") center / cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--bianco); }
.banner-consiglio::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .47); }
.banner-consiglio > div { position: relative; z-index: 2; }
.banner-consiglio h2 { font: 400 45.07px/58px var(--f-titoli); color: var(--bianco); }
.banner-consiglio p { font: 400 18px/29px var(--f-testo); color: var(--bianco); margin: 0 auto; width: 576px; max-width: 100%; }
.banner-consiglio .btn { margin-top: 20px; }

/* 9. Recensioni Google */
.recensioni { height: 608px; text-align: center; padding-top: 94px; overflow: hidden; }
.recensioni h2 { font: 400 45.07px/58px var(--f-titoli); color: var(--testo); margin: 14px auto 0; width: max-content; max-width: 100%; }
.valutazione { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; font: 600 22px/48px var(--f-testo); color: #1F1F1F; }
.valutazione b { font: 700 29.7px/48px var(--f-testo); }
.valutazione .stelle { color: #FBBC04; font-size: 22px; letter-spacing: 0; }
.rec-lista { display: flex; gap: 18px; padding: 0 30px; margin-top: 27px; overflow-x: auto; scrollbar-width: none; text-align: left; }
.rec-lista::-webkit-scrollbar { display: none; }
.rec-card { flex: 0 0 320px; height: 208px; background: var(--bianco); border: 1px solid rgba(45, 45, 45, .1); border-radius: var(--r); box-shadow: 0 8px 24px rgba(0, 0, 0, .06); padding: 22px 22px 0; color: inherit; display: block; }
.rec-card__testa { display: flex; align-items: center; gap: 12px; position: relative; }
.rec-card__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--bianco); font: 400 17px/27.2px var(--f-serif); }
.rec-card__nome { font: 600 14.5px/23px var(--f-testo); color: #1F1F1F; }
.rec-card__stelle { font: 400 14px/22.4px var(--f-testo); letter-spacing: 2px; color: #FBBC04; }
.rec-card__g { position: absolute; right: 0; top: 4px; width: 18px; height: 18px; }
.rec-card__testa > div:nth-child(2) { flex: 1; }
.rec-card p { font: 400 14px/21.7px var(--f-testo); color: #3C4043; margin-top: 12px; padding-bottom: 0; }

/* 10. Modulo di contatto */
.sezione-modulo { padding: 39px 0 32px; }
.sezione-modulo .modulo-cornice { width: 1152px; }

/* ==========================================================================
   Telefono (≤ 767 px) — valori misurati sul sito attuale a 390 px
   ========================================================================== */
@media (max-width: 767px) {
  .hero { min-height: 0; height: 608px; align-items: flex-start; }
  .hero__foto { height: 100%; min-height: 0; }
  .hero__testo { width: 100%; padding: 97px 34px 0; }
  .hero h1, .hero h2 { font-size: 42.4px; line-height: 45.8px; font-family: var(--f-titoli); }
  .hero p { font-size: 16px; line-height: 25.6px; margin-top: 32px; font-weight: 400; }
  .hero__azioni { margin-top: 17px; gap: 6px; flex-wrap: nowrap; }
  .hero__azioni .btn { flex: 0 0 158px; width: 158px; height: 34px; padding: 0; font-size: 10.5px; white-space: nowrap; }
  .fascia { height: 70px; }
  .fascia__voce a { font-size: 24.36px; line-height: 30.46px; margin-left: 0; }
  .fascia__voce img { width: 50px; height: 50px; margin: 0 33px; }
  .intro { height: auto; padding: 52px 0 56px; text-align: center; }
  .intro .etichetta { display: block; line-height: 22.4px; }
  .intro h2 { font-size: 34.3px; line-height: 44px; max-width: 310px; margin: 5.6px auto 0; }
  .intro p { font-size: 16px; line-height: 25.6px; max-width: 309px; margin: 12px auto 0; }
  .intro__pianta { display: none; }
  .punti { display: none; }
  .categorie { padding: 0 16px 36px; margin-top: -4px; }
  .categorie__griglia { grid-template-columns: 358px; grid-template-rows: none; gap: 12px; justify-content: center; }
  .cat-card, .cat-card--alta { grid-row: auto; height: 200px; }
  .cat-card__box, .cat-card--alta .cat-card__box { left: 0; top: 12px; right: auto; width: 334px; max-width: none; height: 106px; padding: 14px 15px 0; }
  .cat-card h2 { font-size: 34.3px; line-height: 42.9px; margin-top: 14px; text-align: left; }
  .cat-card__box, .cat-card--alta .cat-card__box { border-radius: 0; background: rgba(44, 62, 42, .34); border-color: rgba(255, 255, 255, .2); }
  .cat-card__etichetta { text-align: left; font-size: 14px; line-height: 22.4px; }
  .categorie__tutte { margin-top: 28px; }
  .evidenza { height: 590px; padding: 52px 0 0; }
  .evidenza .etichetta { display: block; padding: 0 20px; letter-spacing: 0; line-height: 20px; }
  .evidenza h2 { font-size: 34.3px; line-height: 41.17px; padding: 0; width: auto; margin-top: 8px; }
  .slider { margin-top: 26px; }
  .slider__pista { padding: 0; gap: 12px; }
  .prod-card { flex: 0 0 189px; height: 302px; }
  .prod-card__img, .prod-card__img img { width: 187px; height: 187px; }
  .prod-card h5 { font-size: 20.24px; line-height: 25.3px; margin-top: 14px; padding: 0 6px; }
  .prod-card .prezzo { font-size: 13.12px; }
  .slider__freccia { top: 75px; width: 36px; height: 36px; }
  .slider__freccia--sx { left: 4px; } .slider__freccia--dx { right: 4px; }
  .storia { height: auto; padding-bottom: 35px; text-align: center; }
  .storia__immagini { position: relative; width: auto; height: 233px; margin: 30px 20px 0; }
  .storia__cornice, .storia__interno, .storia__foto-1, .storia__foto-2, .storia__sigillo { display: none; }
  .storia__immagini::after { content: ""; position: absolute; inset: 0; background: url("../img/storia-rosmarino.jpg") center / cover no-repeat; }
  .storia__testo { position: relative; left: auto; width: auto; padding: 72px 20px 0; }
  .storia__testo h2 { font-size: 34.307px; line-height: 41.168px; margin-top: 10px; }
  .storia__testo p { font-size: 16px; line-height: 25.6px; margin-top: 20px; }
  .numeri { gap: 31px; margin-top: 9px; justify-content: center; } .numeri > div { width: 159px; }
  .numeri strong { font-size: 32px; line-height: 50px; }
  .numeri span { font-size: 16px; line-height: 25.6px; }
  .storia .btn { margin-top: 30px; }
  .banner-consiglio { height: 500px; padding: 0 20px; }
  .banner-consiglio h2 { font-size: 34.307px; line-height: 44px; max-width: 254px; margin: -2px auto 0; }
  .banner-consiglio p { width: 230px; font-size: 16px; line-height: 25.6px; margin-top: -1px; }
  .recensioni { height: auto; padding: 47px 0 50px; }
  .recensioni h2 { font-size: 34.307px; line-height: 44px; padding: 0 20px; width: auto; margin-top: 7px; }
  .valutazione { display: block; width: 350px; margin: 80px auto 0; padding: 3px 0; text-align: center; font-size: 17px; line-height: 27.2px; }
  .valutazione b { font-size: 22.95px; line-height: 36.72px; }
  .valutazione .stelle { font-size: 17px; }
  .rec-lista { padding: 0 20px; margin-top: 19px; }
  .rec-card { flex-basis: 304px; height: 204px; padding: 19px 19px 0; }
  .rec-card p { margin-top: 10px; }
  .sezione-modulo { padding: 22px 0 14px; }
  .pagina-home .modulo-scheda { padding-bottom: 28px; }
  .sezione-modulo .modulo-cornice { width: 312px; max-width: calc(100% - 78px); }
}