/* ============================================================
   AVIARIUM SOLARIS — Lonato del Garda
   Direzione: carta avorio calda + i COLORI VERI dei pappagalli.
   Ogni sezione ha il suo colore. Niente fondo nero.
   ============================================================ */

:root{
  /* carta */
  --paper:   #FDF8EE;
  --cream:   #FFFDF8;
  --sand:    #F6EBD9;

  /* inchiostro */
  --ink:     #241A12;
  --ink-2:   #6A5946;
  --ink-3:   #94806A;
  --line:    #E7D9C3;
  --line-2:  #D8C4A6;

  /* i colori dei pappagalli */
  --verde:   #17794E;
  --verde-d: #0C5236;
  --turch:   #0F8AA6;
  --blu:     #2B4FC7;
  --arancio: #E4611F;
  --corallo: #DE4E63;
  --giallo:  #F0A81A;

  /* marchio */
  --oro:     #B8862F;
  --bruno:   #22150C;

  --wa:      #25D366;

  --f-disp:  'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-brand: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --f-body:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

  --pad:  clamp(20px, 5vw, 64px);
  --wrap: 1220px;
  --sec:  clamp(74px, 10vw, 138px);
  --r:    18px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* colore corrente della sezione: lo ridefiniscono le classi .c-* */
  --c: var(--verde);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,picture{max-width:100%; display:block}
img{height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:400; line-height:1.06; letter-spacing:-.014em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--cream); padding:12px 20px; font-weight:600}
.skip:focus{left:12px; top:12px}
:focus-visible{outline:2px solid var(--arancio); outline-offset:3px; border-radius:4px}

/* ---------- tipografia ---------- */
.eyebrow{
  font-family:var(--f-brand);
  font-size:clamp(10px,1.05vw,11.5px);
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--c); margin:0 0 1.15em; font-weight:600;
}
.h2{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(32px,5.2vw,63px); line-height:1.04; letter-spacing:-.022em;
}
.h2 em{font-style:italic; color:var(--c); font-weight:400}
.h2 + .lead, .h2 + p{margin-top:.75em}
.lead{font-size:clamp(16px,1.35vw,19px); line-height:1.66; color:var(--ink-2); max-width:56ch}
.sec{padding-block:var(--sec); position:relative}
.sec__head{max-width:64ch; margin:0 auto clamp(42px,5vw,72px); text-align:center}
.sec__head .lead{margin-inline:auto; margin-top:1.1em}
.sec__head--left{text-align:left; margin-inline:0}
.sec__head--left .lead{margin-inline:0}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-body); font-weight:700; font-size:14.5px; letter-spacing:.01em;
  padding:.98em 1.75em; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .45s var(--ease), background-color .3s, border-color .3s, color .3s, box-shadow .45s var(--ease);
}
.btn .ico{width:1.15em; height:1.15em; fill:currentColor; flex:none}
.btn--gold{background:var(--arancio); color:#fff; box-shadow:0 12px 26px -14px rgba(228,97,31,.9)}
.btn--gold:hover{transform:translateY(-2px); background:#CF5416; box-shadow:0 18px 34px -14px rgba(228,97,31,1)}
.btn--ghost{border-color:var(--line-2); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink); background:var(--sand); transform:translateY(-2px)}
.btn--wa{background:var(--ink); color:var(--cream); padding:.74em 1.3em; font-size:13.5px}
.btn--wa:hover{background:var(--verde)}
.btn--big{font-size:16.5px; padding:1.08em 2.1em}

/* bottoni sopra un blocco a tinta piena */
.su-scuro .btn--gold{background:var(--giallo); color:#2A1B06; box-shadow:0 12px 26px -14px rgba(240,168,26,.85)}
.su-scuro .btn--gold:hover{background:#FFBE3D}

/* ============================================================
   HEADER
   ============================================================ */
.site{position:fixed; inset:0 0 auto; z-index:90; border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), border-color .4s, backdrop-filter .4s}
.site.is-stuck{background:rgba(253,248,238,.9); backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom-color:var(--line)}
.site__in{display:flex; align-items:center; gap:24px; min-height:76px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.brand__mark{width:42px; height:42px; padding:5px; border-radius:50%; background:var(--bruno); flex:none}
.brand__txt{display:flex; flex-direction:column; line-height:1; font-family:var(--f-brand); font-weight:600}
.brand__txt b{font-size:14px; letter-spacing:.18em; color:var(--ink)}
.brand__txt i{font-size:10.5px; letter-spacing:.33em; color:var(--oro); font-style:normal; margin-top:3px}

.nav{display:flex; gap:28px}
.nav a{font-size:14px; color:var(--ink-2); position:relative; padding-block:6px; font-weight:500; transition:color .3s}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:2px; height:2px; background:var(--arancio); border-radius:2px; transition:right .4s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}

.burger{display:none; width:44px; height:44px; background:var(--cream); border:1.5px solid var(--line-2); border-radius:999px; padding:0; cursor:pointer; position:relative}
.burger span{position:absolute; left:13px; right:13px; height:2px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){bottom:17px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding:clamp(100px,11vw,126px) 0 clamp(14px,2.2vw,30px); overflow:hidden; isolation:isolate}
.hero::before{
  content:""; position:absolute; inset:-14% -20% auto; height:80%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(36% 50% at 10% 30%, rgba(23,121,78,.42), transparent 68%),
    radial-gradient(34% 46% at 90% 18%, rgba(43,79,199,.38), transparent 68%),
    radial-gradient(46% 44% at 50% -6%, rgba(240,168,26,.50), transparent 70%),
    radial-gradient(32% 44% at 78% 68%, rgba(228,97,31,.34), transparent 70%),
    radial-gradient(30% 40% at 18% 78%, rgba(222,78,99,.28), transparent 70%);
}
.hero__in{position:relative; text-align:center; display:flex; flex-direction:column; align-items:center}

.hero__logo{
  width:clamp(112px,11vw,142px); aspect-ratio:1; display:grid; place-items:center;
  background:var(--bruno); border-radius:50%; padding:clamp(14px,1.7vw,22px);
  margin-bottom:clamp(16px,2vw,24px);
  box-shadow:0 24px 52px -26px rgba(34,21,12,.7);
}
.hero__logo img, .hero__logo svg{width:100%; height:auto}

.hero__h1{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(37px,5.9vw,80px); line-height:1.03; letter-spacing:-.03em; margin:0 0 .38em;
}
.hero__h1 span{display:block}
.hero__h1 em{font-style:italic; color:var(--arancio)}
.hero__sub{max-width:47ch; color:var(--ink-2); font-size:clamp(15.5px,1.35vw,18.5px)}
.hero__cta{display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:clamp(20px,2.4vw,28px)}

/* la fila di archi: è qui che il sito si riempie di colore */
.arcate{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(7px,1.2vw,18px);
  align-items:end; margin-top:clamp(30px,3.6vw,50px);
  padding-inline:var(--pad); max-width:var(--wrap); margin-inline:auto; width:100%;
}
.arco{
  position:relative; border-radius:999px 999px 8px 8px; overflow:hidden;
  border:3px solid var(--c); background:var(--c); aspect-ratio:.72;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.arco:nth-child(odd){transform:translateY(clamp(10px,2vw,26px))}
.arco:hover{transform:translateY(0) scale(1.03); box-shadow:0 20px 34px -20px rgba(36,26,18,.5)}
.arco:nth-child(odd):hover{transform:translateY(clamp(6px,1.4vw,18px)) scale(1.03)}
.arco img{width:100%; height:100%; object-fit:cover; object-position:50% 32%}
.arco b{
  position:absolute; inset:auto 0 0 0; padding:24px 6px 8px;
  background:linear-gradient(to top, rgba(20,12,6,.88), transparent);
  color:#fff; font-family:var(--f-brand); font-weight:600;
  font-size:clamp(8px,.85vw,11px); letter-spacing:.09em; text-transform:uppercase; text-align:center;
}

/* ============================================================
   NUMERI — banda verde profondo
   ============================================================ */
.numeri{background:var(--verde-d); color:var(--cream)}
.numeri__grid{display:grid; grid-template-columns:repeat(4,1fr)}
.num{padding:clamp(30px,4vw,50px) 18px; text-align:center; position:relative}
.num + .num::before{content:""; position:absolute; left:0; top:24%; bottom:24%; width:1px; background:rgba(255,255,255,.22)}
.num b{display:block; font-family:var(--f-disp); font-weight:400; font-size:clamp(40px,4.8vw,62px); line-height:1; color:var(--giallo)}
.num span{display:block; margin-top:9px; font-size:12.5px; letter-spacing:.05em; color:rgba(255,253,248,.78); line-height:1.5}

/* ============================================================
   SPLIT
   ============================================================ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px); align-items:center}
.split__txt .ticks{margin-top:1.6em; display:grid; gap:.75em}
.ticks li{position:relative; padding-left:30px; color:var(--ink-2); font-size:15.2px}
.ticks li::before{content:""; position:absolute; left:0; top:.5em; width:15px; height:15px; border-radius:50%; background:var(--c); opacity:.2}
.ticks li::after{content:""; position:absolute; left:4.5px; top:calc(.5em + 4.5px); width:6px; height:6px; border-radius:50%; background:var(--c)}
.split__img{position:relative; border-radius:var(--r) var(--r) 999px 999px; overflow:hidden; border:4px solid var(--c)}
.split__img img{width:100%; aspect-ratio:4/5; object-fit:cover}

/* ============================================================
   MARQUEE — a colori, non si ferma mai
   ============================================================ */
.marquee{overflow:hidden; background:var(--sand); border-block:1px solid var(--line); padding-block:16px}
.marquee__track{display:flex; align-items:center; gap:26px; width:max-content; animation:mq 44s linear infinite}
.marquee span{font-family:var(--f-brand); font-weight:600; font-size:clamp(13px,1.5vw,18px);
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap}
.marquee i{font-style:normal; font-size:10px; color:var(--oro)}
.marquee .m1{color:var(--giallo)}
.marquee .m2{color:var(--corallo)}
.marquee .m3{color:var(--verde)}
.marquee .m4{color:var(--blu)}
.marquee .m5{color:var(--verde-d)}
.marquee .m6{color:var(--oro)}
.marquee .m7{color:var(--arancio)}
@keyframes mq{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ============================================================
   SPECIE — una card, un colore
   ============================================================ */
.specie{background:var(--cream)}
.grid-specie{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.7vw,24px)}
.card{
  background:var(--paper); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; border:1px solid var(--line);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s;
}
.card::before{content:""; display:block; height:6px; background:var(--c); flex:none}
.card:hover{transform:translateY(-6px); border-color:var(--c); box-shadow:0 26px 40px -26px rgba(36,26,18,.4)}
.card__img{overflow:hidden; aspect-ratio:4/3}
.card__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.card:hover .card__img img{transform:scale(1.06)}
.card__body{padding:clamp(17px,1.7vw,24px); display:flex; flex-direction:column; gap:.62em; flex:1}
.card__body h3{font-family:var(--f-disp); font-weight:500; font-size:clamp(22px,2.1vw,28px); color:var(--ink)}
.card__body p{font-size:14.2px; line-height:1.6; color:var(--ink-2); margin:0}
.card__cta{margin-top:auto; padding-top:.55em; font-size:12.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--c); display:inline-flex; gap:.5em; align-items:center}
.card__cta span{transition:transform .4s var(--ease)}
.card:hover .card__cta span{transform:translateX(5px)}
.card--ask{background:var(--sand); border-style:dashed; border-color:var(--line-2)}
.card--ask .card__body{justify-content:center; min-height:200px}

.prossimi{margin-top:clamp(36px,4.4vw,60px); border-top:1px solid var(--line); padding-top:clamp(24px,3vw,38px)}
.prossimi__lab{font-family:var(--f-brand); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px; font-weight:600}
.prossimi__row{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.7vw,24px)}
.pross{position:relative; border-radius:var(--r); overflow:hidden; border:3px solid var(--c)}
.pross img{width:100%; aspect-ratio:16/7; object-fit:cover; transition:transform 1.1s var(--ease)}
.pross:hover img{transform:scale(1.05)}
.pross span{position:absolute; inset:auto 0 0 0; padding:26px 20px 16px;
  background:linear-gradient(to top, rgba(20,12,6,.9), transparent);
  font-family:var(--f-disp); font-size:clamp(20px,2vw,26px); color:#fff}

/* ============================================================
   COME NASCONO — cinque passi, cinque colori
   ============================================================ */
.steps{position:relative; display:grid; gap:clamp(20px,2.4vw,32px); max-width:1020px; margin-inline:auto}
.step{
  display:grid; grid-template-columns:clamp(52px,5.4vw,68px) 1fr clamp(190px,24vw,300px);
  gap:clamp(18px,2.6vw,36px); align-items:center;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(18px,2vw,26px); position:relative; overflow:hidden;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.step::before{content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--c)}
.step:hover{transform:translateY(-4px); box-shadow:0 24px 40px -28px rgba(36,26,18,.45)}
.step__n{display:grid; place-items:center}
.step__n span{
  width:clamp(52px,5.4vw,68px); height:clamp(52px,5.4vw,68px); border-radius:50%;
  display:grid; place-items:center; background:var(--c); color:#fff;
  font-family:var(--f-brand); font-weight:600; font-size:14px; letter-spacing:.04em;
}
.step__txt h3{font-family:var(--f-disp); font-weight:500; font-size:clamp(24px,2.7vw,35px); margin-bottom:.32em; color:var(--ink)}
.step__txt p{color:var(--ink-2); font-size:15.4px; max-width:46ch; margin:0}
.step__img{border-radius:calc(var(--r) - 5px); overflow:hidden}
.step__img img{width:100%; aspect-ratio:5/4; object-fit:cover; transition:transform 1.1s var(--ease)}
.step:hover .step__img img{transform:scale(1.05)}

/* ============================================================
   DOMANDE — sabbia calda
   ============================================================ */
.domande{background:var(--sand)}
.qa{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px)}
.qa__item{background:var(--cream); border-radius:var(--r); padding:clamp(22px,2.4vw,32px); border-top:6px solid var(--c)}
.qa__q{font-family:var(--f-disp); font-style:italic; font-weight:500; font-size:clamp(24px,2.6vw,33px); color:var(--c); margin-bottom:.62em; line-height:1.13}
.qa__item p{font-size:15px; color:var(--ink-2); margin-bottom:.8em}
.qa__item p b{color:var(--ink); font-weight:700}
.qa__note{font-size:13.6px !important; color:var(--ink-3) !important; border-left:3px solid var(--c); padding-left:13px; margin-top:1.15em !important}

/* ============================================================
   BAND — blocco a tinta piena
   ============================================================ */
.band{position:relative; padding-block:clamp(74px,9vw,124px); overflow:hidden; isolation:isolate; text-align:center; background:var(--blu); color:#fff}
.band__bg{position:absolute; inset:0; z-index:-2; opacity:.32}
.band__bg img{width:100%; height:100%; object-fit:cover}
.band::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, var(--blu) 16%, rgba(43,79,199,.7))}
.band__in{max-width:70ch; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:1.3em}
.band .h2 em{color:var(--giallo)}
.band .lead{margin-inline:auto; color:rgba(255,255,255,.9)}

/* ============================================================
   CURE — quattro tessere, quattro colori
   ============================================================ */
.cure{background:var(--cream)}
.grid-cure{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.7vw,24px)}
.cura{
  padding:clamp(24px,2.4vw,34px); border-radius:var(--r);
  background:color-mix(in srgb, var(--c) 9%, var(--cream));
  border:1px solid color-mix(in srgb, var(--c) 28%, transparent);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.cura:hover{transform:translateY(-5px); box-shadow:0 24px 40px -28px rgba(36,26,18,.4)}
.cura__n{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--c); color:#fff; font-family:var(--f-brand); font-weight:600; font-size:12px; margin-bottom:1.1em}
.cura h3{font-family:var(--f-disp); font-weight:500; font-size:clamp(20px,2vw,26px); margin-bottom:.42em; color:var(--ink); line-height:1.14}
.cura p{font-size:14.2px; color:var(--ink-2); margin:0; line-height:1.6}

.cure__img{margin:clamp(34px,4.2vw,56px) 0 0; position:relative; border-radius:var(--r); overflow:hidden}
.cure__img img{width:100%; aspect-ratio:21/8; object-fit:cover}
.cure__img figcaption{position:absolute; inset:auto 0 0 0; padding:clamp(20px,3vw,34px);
  background:linear-gradient(to top, rgba(20,12,6,.9), rgba(20,12,6,.4) 62%, transparent);
  font-family:var(--f-disp); font-style:italic; font-size:clamp(16px,1.9vw,24px); color:#fff; max-width:46ch}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--paper)}
.faq__in{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,5vw,76px); align-items:start}
.faq .sec__head{margin-bottom:0; position:sticky; top:106px}
.acc__i{border-bottom:1px solid var(--line)}
.acc__i:first-child{border-top:1px solid var(--line)}
.acc__i summary{list-style:none; cursor:pointer; padding:1.2em 2.4em 1.2em 0; position:relative;
  font-family:var(--f-disp); font-size:clamp(20px,2vw,26px); font-weight:500; color:var(--ink);
  transition:color .3s; line-height:1.28}
.acc__i summary::-webkit-details-marker{display:none}
.acc__i summary:hover{color:var(--arancio)}
.acc__i summary::after{content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--arancio); border-bottom:2px solid var(--arancio);
  transform:translateY(-70%) rotate(45deg); transition:transform .4s var(--ease)}
.acc__i[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.acc__c{padding:0 2.4em 1.5em 0; color:var(--ink-2); font-size:15px; animation:accIn .45s var(--ease)}
@keyframes accIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ============================================================
   CONTATTI — verde profondo
   ============================================================ */
.contatti{background:var(--verde-d); color:var(--cream)}
.contatti .h2{color:var(--cream)}
.contatti .h2 em{color:var(--giallo)}
.contatti .lead{color:rgba(255,253,248,.82)}
.contatti .eyebrow{color:var(--giallo)}
.contatti__in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,6vw,80px); align-items:center}
.contatti .btn{margin-top:1.6em}
.contatti__img{position:relative; border-radius:var(--r) var(--r) 999px 999px; overflow:hidden; border:4px solid var(--giallo)}
.contatti__img img{width:100%; aspect-ratio:4/5; object-fit:cover}
.info{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:26px; margin:2.5em 0 0; padding-top:2em; border-top:1px solid rgba(255,255,255,.2)}
.info dt{font-family:var(--f-brand); font-weight:600; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--giallo); margin-bottom:.72em}
.info dd{margin:0; font-size:14.4px; color:rgba(255,253,248,.85); line-height:1.6}
.info a{border-bottom:1px solid rgba(255,255,255,.35); transition:color .3s, border-color .3s}
.info a:hover{color:var(--giallo); border-color:var(--giallo)}

/* ============================================================
   FOOTER — il bruno del marchio
   ============================================================ */
.foot{background:var(--bruno); color:rgba(255,253,248,.78); padding-top:clamp(46px,5.6vw,76px)}
.foot__in{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(28px,5vw,66px); align-items:start; padding-bottom:clamp(36px,4.4vw,56px)}
.foot__brand img{width:clamp(96px,9vw,126px)}
.foot__nav{display:grid; grid-template-columns:repeat(2,max-content); gap:.7em 34px; align-content:start; padding-top:6px}
.foot__nav a{font-size:14px; transition:color .3s}
.foot__nav a:hover{color:var(--giallo)}
.foot__meta{font-size:13.8px; text-align:right; line-height:1.65}
.foot__meta b{color:var(--cream)}
.foot__meta a{border-bottom:1px solid rgba(255,255,255,.3)}
.foot__meta a:hover{color:var(--giallo)}
.foot__legal{color:rgba(255,253,248,.5); font-size:12.4px; margin-top:.85em}
.foot__bot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14); padding-block:20px 26px; font-size:12.6px; color:rgba(255,253,248,.55)}
.foot__bot p{margin:0}
.foot__bot a{color:rgba(255,253,248,.8); border-bottom:1px solid rgba(255,255,255,.3)}
.foot__bot a:hover{color:var(--giallo)}

/* ============================================================
   FAB WhatsApp (mobile)
   ============================================================ */
.wa-fab{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:80;
  display:none; align-items:center; gap:.55em;
  background:var(--wa); color:#052B12; font-weight:700; font-size:14px;
  padding:.85em 1.25em; border-radius:999px; box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
}
.wa-fab svg{width:19px; height:19px; fill:currentColor}

/* ============================================================
   COLORI DI SEZIONE
   ============================================================ */
.c-giallo{--c:var(--giallo)}
.c-corallo{--c:var(--corallo)}
.c-verde{--c:var(--verde)}
.c-verde-d{--c:var(--verde-d)}
.c-blu{--c:var(--blu)}
.c-turch{--c:var(--turch)}
.c-arancio{--c:var(--arancio)}
.c-oro{--c:var(--oro)}

/* ============================================================
   REVEAL — rete di sicurezza: senza JS si vede tutto
   ============================================================ */
.r{opacity:1; transform:none}
html.js .r{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
html.js .r.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html.js .r{opacity:1 !important; transform:none !important; transition:none}
  .marquee__track{animation:none !important}
  *{transition-duration:.01ms !important}
}

/* ============================================================
   LOGO ANIMATO — il pappagallo si posa dentro il sole.
   Le animazioni partono da sole: non possono nascondere il marchio.
   ============================================================ */
.hero__logo svg{overflow:visible}
.hero__logo svg .as-ray,
.hero__logo svg .as-ring,
.hero__logo svg .as-parrot,
.hero__logo svg .as-word{transform-box:view-box; transform-origin:576px 405px}

.hero__logo svg .as-ray{animation:raggio .9s var(--ease) both; animation-delay:calc(1.1s + var(--i,0) * 26ms)}
@keyframes raggio{from{opacity:0; transform:scale(.34)} to{opacity:1; transform:scale(1)}}

.hero__logo svg .as-ring{animation:anello 1.05s var(--ease) .9s both}
@keyframes anello{from{opacity:0; transform:scale(.72) rotate(-14deg)} to{opacity:1; transform:none}}

.hero__logo svg .as-parrot{animation:posa 1.7s cubic-bezier(.19,.72,.24,1) .1s both}
@keyframes posa{
  0%  {opacity:0; transform:translate(-620px,340px) rotate(-24deg) scale(.5)}
  22% {opacity:1}
  70% {transform:translate(24px,-26px) rotate(3deg) scale(1.05)}
  100%{opacity:1; transform:none}
}

.hero__logo svg .as-word{animation:scritta 1s var(--ease) 1.45s both}
@keyframes scritta{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .hero__logo svg .as-ray,.hero__logo svg .as-ring,
  .hero__logo svg .as-parrot,.hero__logo svg .as-word{animation:none !important; opacity:1 !important; transform:none !important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .grid-specie{grid-template-columns:repeat(3,1fr)}
  .grid-cure{grid-template-columns:repeat(2,1fr)}
  .qa{grid-template-columns:1fr}
  .faq__in{grid-template-columns:1fr; gap:32px}
  .faq .sec__head{position:static}
}

@media (max-width:860px){
  .nav{
    position:fixed; inset:0 0 auto; top:0; padding:100px var(--pad) 40px;
    background:var(--paper); flex-direction:column; gap:2px; border-bottom:1px solid var(--line);
    transform:translateY(-102%); transition:transform .5s var(--ease); z-index:-1;
    box-shadow:0 30px 60px -30px rgba(36,26,18,.4);
  }
  .nav.is-open{transform:none}
  .nav a{font-family:var(--f-disp); font-size:28px; color:var(--ink); padding-block:12px; border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .burger{display:block}
  .site__cta{display:none}
  .split, .contatti__in{grid-template-columns:1fr}
  .split__img, .contatti__img{order:-1; border-radius:var(--r)}
  .split__img img, .contatti__img img{aspect-ratio:5/4}
  .numeri__grid{grid-template-columns:repeat(2,1fr)}
  .num:nth-child(1)::before, .num:nth-child(3)::before{display:none}
  .num:nth-child(3), .num:nth-child(4){border-top:1px solid rgba(255,255,255,.2)}
  .step{grid-template-columns:clamp(46px,11vw,56px) 1fr; gap:14px 16px; align-items:start}
  .step__n{padding-top:2px}
  .step__n span{width:clamp(46px,11vw,56px); height:clamp(46px,11vw,56px); font-size:12.5px}
  .step__img{grid-column:2; margin-top:6px}
  .step__img img{aspect-ratio:16/9}
  .wa-fab{display:inline-flex}
  .foot__in{grid-template-columns:1fr; gap:30px}
  .foot__meta{text-align:left}
  .foot__nav{grid-template-columns:repeat(2,1fr); gap:.6em 20px}
  .foot__bot{padding-bottom:88px}
}

@media (max-width:620px){
  /* 🛒 due per riga su mobile, mai uno sotto l'altro */
  .grid-specie{grid-template-columns:repeat(2,1fr); gap:11px}
  .card__body{padding:14px 14px 16px; gap:.48em}
  .card__body h3{font-size:19px}
  .card__body p{font-size:13px; line-height:1.52}
  .card__cta{font-size:10.5px; letter-spacing:.03em}
  .card__cta span{margin-left:auto}
  .card--ask .card__body{min-height:0; padding-block:24px}
  .grid-cure{grid-template-columns:1fr}
  .prossimi__row{grid-template-columns:1fr}
  .pross img{aspect-ratio:16/8}
  .cure__img img{aspect-ratio:4/3}
  .info{grid-template-columns:1fr; gap:20px}
  .arcate{gap:6px}
  .arco{border-width:2px}
  .arco b{display:none}
}


/* ============================================================
   SFILATA — la hero
   Scorri e i pappagalli si susseguono: lo sfondo prende il colore
   di quello che stai guardando.
   🔴 Rete di sicurezza: senza JS resta il primo pappagallo sul suo
   colore, con tutto il testo leggibile. La sezione è alta una
   schermata sola finché il JS non dichiara di essere vivo.
   ============================================================ */
.sfilata{position:relative; height:100svh}
html.sfilata-on .sfilata{height:calc(100svh + 5 * 84svh)}

.sfilata__stage{
  position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate;
  display:flex; align-items:center;
  background:var(--bg-cap, #0C5236);
  color:var(--ink-cap, #FFFDF8);
  --bg-rgb:12,82,54;
}
.sfilata__bg{position:absolute; inset:0; z-index:-2; background:inherit}
/* 🔴 Velatura di leggibilità. Senza, su arancio e giallo il testo non passa il
   contrasto minimo (4,22 e 2,00 contro i 4,5 richiesti). Con il 40% ogni
   capitolo arriva ad almeno 5,09. Sta sotto il pappagallo: i colori del
   pappagallo restano pieni, si scurisce solo la parte dove c'è scritto. */
.sfilata__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(97deg,
    rgba(0,0,0,.46) 0%, rgba(0,0,0,.42) 28%, rgba(0,0,0,.20) 48%, rgba(0,0,0,0) 64%);
}

/* --- i pappagalli --- */
.sfilata__uccelli{position:absolute; inset:0 -2% 0 50%; z-index:1; pointer-events:none}
.uccello{
  position:absolute; left:54%; bottom:0;
  height:min(74svh, 620px); width:auto; max-width:44vw; object-fit:contain; object-position:50% 100%;
  opacity:var(--o, 0);
  transform:translate(calc(-50% + var(--x, 0vw)), 0) scale(var(--s, 1)) rotate(var(--r, 0deg));
  transform-origin:50% 100%;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.28));
  will-change:transform, opacity;
}
.uccello[data-i="0"]{--o:1}

/* --- il nome della specie --- */
.sfilata__nomi{
  position:absolute; left:50%; translate:-50% 0; bottom:clamp(24px,4.6vh,50px);
  width:100%; max-width:var(--wrap); padding-inline:var(--pad);
  z-index:3; text-align:left; pointer-events:none; height:clamp(56px,7vw,88px);
}
.sfilata__voce{
  position:absolute; left:var(--pad); bottom:0; display:block; opacity:0; white-space:nowrap;
  will-change:opacity, transform;
}
.sfilata__voce b{
  display:block; font-family:var(--f-disp); font-weight:400;
  font-size:clamp(26px,3.5vw,46px); line-height:1; letter-spacing:-.02em;
}
.sfilata__voce i{
  display:block; font-style:normal; font-family:var(--f-brand); font-weight:600;
  font-size:clamp(9px,.85vw,11px); letter-spacing:.24em; text-transform:uppercase;
  opacity:.72; margin-top:9px;
}
.sfilata__voce[data-i="0"]{opacity:1}

/* --- il blocco di marca --- */
.sfilata__wrap{position:relative; z-index:2}
.sfilata__over{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  max-width:min(520px, 46%);
}
.sfilata__over .eyebrow{color:currentColor; opacity:.78}
.sfilata__over .hero__h1{color:currentColor; font-size:clamp(34px,4.2vw,60px); line-height:1.04}
.sfilata__over .hero__h1 em{color:currentColor; opacity:.86}
.sfilata__over .hero__sub{color:currentColor; opacity:.8; text-align:left}
.sfilata__over .hero__cta{justify-content:flex-start}
.sfilata__over .hero__logo{
  width:clamp(84px,7.2vw,104px); margin-bottom:clamp(14px,1.7vw,20px);
  box-shadow:0 22px 46px -22px rgba(0,0,0,.6);
}

/* bottoni che si adattano al colore del capitolo */
.btn--pieno{background:#FFFDF8; color:var(--bg-scuro, #04170F)}
.btn--pieno:hover{transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(0,0,0,.5)}
.btn--filo{border-color:rgba(255,253,248,.75); color:#FFFDF8; background:rgba(0,0,0,.18)}
.btn--filo:hover{background:rgba(0,0,0,.34); border-color:#FFFDF8; transform:translateY(-2px)}

.sfilata__hint{
  position:absolute; right:clamp(20px,5vw,64px); bottom:26px; z-index:4;
  opacity:var(--hint, .7); transition:opacity .3s linear;
  display:flex; align-items:center; gap:11px;
  font-family:var(--f-brand); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
}
.sfilata__hint span{
  width:20px; height:34px; border:1px solid currentColor; border-radius:999px; position:relative;
}
.sfilata__hint span::after{
  content:""; position:absolute; left:50%; top:7px; translate:-50% 0;
  width:2px; height:6px; border-radius:2px; background:currentColor;
  animation:sc 2s var(--ease) infinite;
}
@keyframes sc{0%{opacity:0; transform:translateY(-3px)} 35%{opacity:1} 100%{opacity:0; transform:translateY(13px)}}

@media (max-width:860px){
  html.sfilata-on .sfilata{height:calc(100svh + 5 * 72svh)}

  /* Su telefono il pappagallo occupa la scena come sul computer: non è una
     fascia in fondo. Il testo gli sta sopra, reso leggibile da due velature
     dello stesso colore del capitolo — così la testa resta visibile. */
  .sfilata__stage{align-items:flex-start; padding-top:clamp(84px,12vh,106px)}
  .sfilata__wrap{width:100%}

  .sfilata__uccelli{inset:0; height:auto}
  .uccello{height:61svh; bottom:-2svh; left:50%; max-width:94vw}

  .sfilata__stage::before,
  .sfilata__stage::after{content:""; position:absolute; left:0; right:0; z-index:1; pointer-events:none}
  /* in alto: colore del capitolo per coprire il pappagallo + nero per il contrasto */
  .sfilata__stage::before{
    top:0; height:60%;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.50) 0%, rgba(0,0,0,.44) 38%, rgba(0,0,0,0) 62%),
      linear-gradient(to bottom, rgba(var(--bg-rgb),.86) 0%, rgba(var(--bg-rgb),.44) 34%, rgba(var(--bg-rgb),0) 60%);
  }
  .sfilata__stage::after{
    bottom:0; height:28%;
    background:linear-gradient(to top, rgba(0,0,0,.55) 4%, rgba(0,0,0,0) 100%);
  }

  .sfilata__over{max-width:100%; align-items:center; text-align:center; margin-inline:auto}
  .sfilata__over .hero__logo{width:clamp(60px,15vw,74px); margin-bottom:10px}
  .sfilata__over .hero__h1{font-size:clamp(25px,6.6vw,33px); line-height:1.1}
  /* due righe invece di tre: il titolo resta dentro la zona velata */
  .sfilata__over .hero__h1 span:first-child,
  .sfilata__over .hero__h1 span:nth-child(2){display:inline}
  .sfilata__over .hero__sub{display:none}
  .sfilata__over .hero__cta{justify-content:center; margin-top:14px; gap:9px}
  /* il secondo bottone finiva sulla testa del pappagallo: su telefono
     «Le specie» sta già nel menu e la sezione arriva subito dopo */
  .sfilata__over .btn--filo{display:none}
  .sfilata__over .eyebrow{font-size:9.5px; letter-spacing:.2em; margin-bottom:.9em}

  /* a sinistra e con spazio a destra: sotto non ci passa il pulsante WhatsApp fisso */
  .sfilata__nomi{
    left:0; translate:none; right:0; top:auto; bottom:clamp(20px,3.6vh,32px);
    width:100%; max-width:none; text-align:left; height:auto; z-index:3;
    padding-right:132px;
  }
  .sfilata__voce{left:var(--pad); right:0; bottom:0; text-align:left}
  .sfilata__voce b{font-size:clamp(25px,6.8vw,33px)}
  .sfilata__voce i{font-size:9px; letter-spacing:.18em; margin-top:6px}
  .sfilata__hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  html.sfilata-on .sfilata{height:100svh}
  .uccello{opacity:0}
  .uccello[data-i="0"]{opacity:1; transform:translateX(-50%)}
  .sfilata__hint span::after{animation:none}
}