/* ==========================================================================
   FE BLOCKS v4 — sistema visivo
   --------------------------------------------------------------------------
   Il difetto delle versioni precedenti era la monotonia: tutto scuro, tutte
   le griglie uguali, tutto centrato. Qui cambia l'impianto.

   1. ALTERNANZA CHIARO/SCURO — sezioni crema con testo scuro fra le scure.
      È ciò che dà ritmo: l'occhio riposa e riparte.
   2. GRIGLIE ASIMMETRICHE — una tessera grande e tre piccole, non quattro
      caselle identiche. L'occhio ha un punto d'ingresso.
   3. SOVRAPPOSIZIONI — blocchi che sconfinano nella sezione successiva, così
      le sezioni si legano invece di impilarsi.
   4. NUMERI GIGANTI IN FILIGRANA dietro i titoli: profondità senza rumore.
   5. TAGLI DIAGONALI fra una sezione e l'altra.
   ========================================================================== */

:root{
  --fe-green:#75AD00;--fe-green-dark:#5C8701;--fe-green-darker:#37520A;--fe-lime:#C7F564;
  --fe-orange:#F14307;--fe-ink:#12150F;--fe-ink-2:#1B1F17;
  --fe-cream:#F4F2EA;--fe-cream-2:#EAE7DB;
  /* Due superfici chiare in piu'. Non sono colori nuovi: sono la pietra e
     l'acqua che la valle ha gia' addosso, portate a luminosita' molto alta.
     Servono perche' con due terzi del sito chiaro un crema solo diventa
     monotono, e perche' il documento chiede una fascia di verdi e azzurri
     intermedi fra il chiaro e lo scuro di marchio. */
  --fe-pietra:#EFF1EC;   /* grigio pietra chiarissimo */
  --fe-acqua:#E8F0F1;    /* azzurro d'acqua molto chiaro */
  --fe-gray-700:#4A4E44;--fe-gray-500:#6E7266;--fe-gray-300:#B9BCB2;
  --fe-white:#fff;
  --fe-dark:#1B1F17;--fe-dark-2:#151811;--fe-dark-3:#0F120C;
  --fe-soft:rgba(255,255,255,.055);--fe-line:rgba(255,255,255,.1);
  --fe-line-ink:rgba(18,21,15,.12);
  --fe-r:26px;--fe-r-sm:14px;--fe-pill:50px;
  --fe-shadow:0 24px 64px rgba(0,0,0,.38);
  --fe-shadow-light:0 18px 48px rgba(18,21,15,.13);
  /* Due famiglie, non quattro. Schibsted Grotesk regge i titoli, Inter tutto
     il resto — cifre comprese: le sue figure sono già ben disegnate e
     Montserrat era una terza famiglia caricata per pochi numeri.
     Le pile complete stanno in fe-fonts.css. */
  --fe-fh:var(--fe-font-display,"Schibsted Grotesk",Arial,sans-serif);
  --fe-fb:var(--fe-font-text,"Inter",Arial,sans-serif);
  --fe-fa:var(--fe-font-display,"Schibsted Grotesk",Arial,sans-serif);
  --fe-ease:cubic-bezier(.22,.61,.36,1);
  --fe-wide:1260px;--fe-read:64ch;

  /* Margine laterale delle sezioni. A 390px valeva 18px e il testo
     arrivava quasi a toccare il bordo: 22 e' la misura che si respira
     su un telefono senza rubare riga. */
  --fe-gutter:clamp(1.4rem,.5rem + 2.4vw,2.5rem);
}
html,body{overflow-x:hidden;max-width:100%}
.fe-page{background:var(--fe-dark);color:var(--fe-white)}
.fe-page :is(h1,h2){font-family:var(--fe-fh);font-weight:600;line-height:1.04;letter-spacing:-.022em}
.fe-page :is(h3,h4){font-family:var(--fe-fb);font-weight:600;line-height:1.22;letter-spacing:-.012em}
.fe-page{font-family:var(--fe-fb);font-weight:400}
.fe-page strong{font-weight:600}   /* Inter 700 su fondo scuro impasta */

/* ==========================================================================
   1. SEZIONE — scura o CHIARA
   ========================================================================== */
.fe-section{position:relative;padding:clamp(4.5rem,3rem + 6vw,9rem) var(--fe-gutter);
  background:var(--fe-dark);color:var(--fe-white);overflow:hidden;isolation:isolate}
.fe-section > *{position:relative;z-index:2;max-width:var(--fe-wide);margin-left:auto;margin-right:auto}
.fe-section :is(h1,h2,h3,h4){color:var(--fe-white)}
.fe-section a{color:var(--fe-lime)}
/* Anche lo scuro respira: un alone verde molto basso, come muschio bagnato. */
.fe-section.is-deep{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.42%22%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(100% 70% at 82% 0%, rgba(117,173,0,.10) 0%, transparent 58%),
    linear-gradient(178deg, #191E14 0%, var(--fe-dark-2) 60%, #12160E 100%);
  background-color:var(--fe-dark-2);   /* ripiego sotto i gradienti */
  background-size:240px 240px, auto, auto;
  background-blend-mode:overlay, normal, normal;
}

/* --- CHIARA: il contrappunto che mancava --- */
/* ==========================================================================
   SUPERFICI — sfumature naturali, non pannelli
   --------------------------------------------------------------------------
   Le quattro superfici chiare erano tinte piatte. Una campitura uniforme,
   soprattutto in grigio o azzurro pallido, legge come un'interfaccia
   software: e' il linguaggio sbagliato per un sito che parla di fiume e
   montagna.

   Ognuna ha ora una luce che cade da un punto, come su una parete di roccia
   o su uno specchio d'acqua, piu' una grana finissima di carta. Le sfumature
   restano dentro la stessa famiglia cromatica: non e' un colore nuovo, e'
   lo stesso colore che respira.
   ========================================================================== */
.fe-section.is-light{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.42%22%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.9) 0%, transparent 55%),
    radial-gradient(90% 70% at 88% 100%, rgba(117,173,0,.09) 0%, transparent 60%),
    linear-gradient(168deg, #F7F5EE 0%, var(--fe-cream) 52%, #EFEDE2 100%);
  color:var(--fe-ink);
  background-color:var(--fe-cream);   /* ripiego sotto i gradienti */
  background-size:240px 240px, auto, auto, auto;
  background-blend-mode:multiply, normal, normal, normal;
}
.fe-section.is-light :is(h1,h2,h3,h4){color:var(--fe-ink)}
.fe-section.is-light a{color:var(--fe-green-darker)}
.fe-section.is-light strong{color:var(--fe-ink)}
.fe-section.is-light .fe-prose{color:var(--fe-gray-700)}
.fe-section.is-light .fe-section-sub{color:var(--fe-gray-500)}
.fe-section.is-light .fe-kicker{color:var(--fe-green-darker)}
.fe-section.is-light .fe-kicker::after{background:var(--fe-green-darker)}
.fe-section.is-light .fe-accent{color:var(--fe-green-darker)}
/* Sabbia calda, luce bassa da destra: e' la sezione delle prossime tappe e
   della chiusura, e deve dare l'ora del tramonto. */
.fe-section.is-light.is-warm{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.42%22%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(100% 75% at 92% 8%, rgba(255,246,225,.95) 0%, transparent 58%),
    radial-gradient(85% 65% at 6% 96%, rgba(194,90,28,.07) 0%, transparent 62%),
    linear-gradient(190deg, #F2EEE0 0%, var(--fe-cream-2) 58%, #E3DFD0 100%);
  background-color:var(--fe-cream-2);   /* ripiego sotto i gradienti */
  background-size:240px 240px, auto, auto, auto;
  background-blend-mode:multiply, normal, normal, normal;
}
/* Pietra con un velo di lichene: il verde e' quasi impercettibile ma toglie
   il grigio da ufficio. */
.fe-section.is-light.is-pietra{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.42%22%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(110% 80% at 78% 0%, rgba(255,255,255,.92) 0%, transparent 52%),
    radial-gradient(80% 60% at 12% 92%, rgba(92,135,1,.10) 0%, transparent 58%),
    linear-gradient(172deg, #F3F5F0 0%, var(--fe-pietra) 50%, #E6E9E2 100%);
  background-color:var(--fe-pietra);   /* ripiego sotto i gradienti */
  background-size:240px 240px, auto, auto, auto;
  background-blend-mode:multiply, normal, normal, normal;
}
/* Acqua di torrente vista dall'alto: verde-azzurro che si schiarisce dove
   batte la luce. Non l'azzurro freddo dei fondali marini. */
.fe-section.is-light.is-acqua{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.42%22%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(115% 85% at 20% 4%, rgba(255,255,255,.9) 0%, transparent 56%),
    radial-gradient(90% 70% at 90% 96%, rgba(67,81,82,.10) 0%, transparent 62%),
    linear-gradient(176deg, #EDF4F3 0%, var(--fe-acqua) 54%, #DEE9EA 100%);
  background-color:var(--fe-acqua);   /* ripiego sotto i gradienti */
  background-size:240px 240px, auto, auto, auto;
  background-blend-mode:multiply, normal, normal, normal;
}
/* L'accento verde su pietra e acqua resta il verde scuro: sono superfici
   quasi bianche e il verde chiaro ci sparirebbe sopra. */
.fe-section.is-pietra .fe-accent,
.fe-section.is-acqua .fe-accent{color:var(--fe-green-darker)}

/* aloni */
.fe-section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(56% 50% at 86% 4%,rgba(117,173,0,.13),transparent 62%),
             radial-gradient(44% 40% at 4% 96%,rgba(117,173,0,.07),transparent 60%)}
.fe-section.is-light::before{background:radial-gradient(60% 52% at 88% 2%,rgba(117,173,0,.16),transparent 64%),
             radial-gradient(46% 42% at 2% 98%,rgba(117,173,0,.09),transparent 62%)}

/* anelli */
.fe-section.has-rings::after{content:"";position:absolute;z-index:1;pointer-events:none;
  width:min(34vw,380px);aspect-ratio:1;border-radius:50%;border:clamp(15px,2.6vw,30px) solid rgba(117,173,0,.09);
  top:-10%;right:-8%;animation:fe-float 17s ease-in-out infinite}
.fe-section.is-light.has-rings::after{border-color:rgba(117,173,0,.16)}
.fe-section.has-rings.rings-left::after{right:auto;left:-10%;top:auto;bottom:-12%;animation-duration:21s;animation-direction:reverse}
@keyframes fe-float{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-22px,0) rotate(11deg)}}

/* --- TAGLIO DIAGONALE fra sezioni --- */
.fe-section.cut-top{clip-path:polygon(0 3.2vw,100% 0,100% 100%,0 100%);margin-top:-3.2vw;padding-top:calc(clamp(4.5rem,3rem + 6vw,9rem) + 3.2vw)}
.fe-section.cut-bottom{clip-path:polygon(0 0,100% 0,100% calc(100% - 3.2vw),0 100%);padding-bottom:calc(clamp(4.5rem,3rem + 6vw,9rem) + 3.2vw)}

/* ==========================================================================
   2. NUMERO/PAROLA GIGANTE IN FILIGRANA
   ========================================================================== */
.fe-ghost{position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--fe-fh);font-weight:700;font-size:clamp(9rem,26vw,24rem);line-height:.75;
  letter-spacing:-.06em;color:rgba(255,255,255,.028);top:-.1em;right:-.04em;text-transform:uppercase}
.fe-section.is-light .fe-ghost{color:rgba(18,21,15,.045)}
.fe-ghost.is-left{right:auto;left:-.04em}

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
.fe-kicker{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fe-fb);font-size:.68rem;
  font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--fe-green);margin-bottom:1rem}
.fe-kicker::before{content:"";width:26px;height:2px;background:currentColor;flex:0 0 auto}
.fe-kicker.is-center{justify-content:center}

.fe-section-title{font-size:clamp(2.1rem,1.3rem + 3.4vw,4.2rem);margin:0 0 1.6rem;max-width:17ch;text-transform:uppercase}
.fe-section-title.is-center{text-align:center;margin-left:auto;margin-right:auto}
.fe-accent{color:var(--fe-green)}
.fe-mark{position:relative;white-space:nowrap}
.fe-mark::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;height:.34em;
  background:rgba(117,173,0,.32);z-index:-1;border-radius:2px}
.fe-section-sub{font-size:clamp(1.02rem,1rem + .35vw,1.22rem);line-height:1.7;color:rgba(255,255,255,.7);
  max-width:58ch;margin:0 auto 3.4rem;text-align:center}
.fe-lead{font-size:clamp(1.18rem,1rem + .9vw,1.7rem);line-height:1.5;font-weight:300;letter-spacing:-.015em}
.fe-lead strong{font-weight:600}
.fe-meta{font-size:.78rem;font-style:italic;opacity:.55}

/* ==========================================================================
   4. HERO
   ========================================================================== */
.fe-hero{position:relative;min-height:clamp(560px,88vh,900px);display:flex;align-items:flex-end;
  padding:clamp(3rem,2rem + 4vw,6rem) var(--fe-gutter) clamp(4.5rem,3rem + 4vw,7.5rem);
  background-size:cover;background-position:center;overflow:hidden;isolation:isolate;background-color:var(--fe-dark)}
.fe-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(102deg,rgba(10,12,8,.9) 0%,rgba(10,12,8,.62) 44%,rgba(10,12,8,.18) 76%),
             linear-gradient(0deg,var(--fe-dark) 0%,rgba(27,31,23,0) 32%)}
.fe-hero__inner{position:relative;width:100%;max-width:var(--fe-wide);margin:0 auto;text-align:left}
.fe-hero__eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;padding:.5rem 1.15rem;
  border:1px solid rgba(199,245,100,.4);border-radius:var(--fe-pill);background:rgba(10,12,8,.4);
  backdrop-filter:blur(8px);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fe-lime)}
.fe-hero__eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fe-lime);
  box-shadow:0 0 0 0 rgba(199,245,100,.7);animation:fe-pulse 2.6s infinite}
@keyframes fe-pulse{70%{box-shadow:0 0 0 10px rgba(199,245,100,0)}100%{box-shadow:0 0 0 0 rgba(199,245,100,0)}}
.fe-hero__title{color:var(--fe-white);font-family:var(--fe-fh);font-weight:700;
  font-size:clamp(2.6rem,1.2rem + 6.4vw,6.6rem);line-height:.94;letter-spacing:-.04em;margin:0 0 1.4rem;
  max-width:15ch;text-transform:uppercase;text-shadow:0 4px 44px rgba(0,0,0,.5)}
.fe-hero__lead{font-size:clamp(1.05rem,1rem + .55vw,1.38rem);line-height:1.58;max-width:50ch;margin:0 0 2.3rem;
  color:rgba(255,255,255,.86);font-weight:300}
.fe-hero .wp-block-buttons,.fe-hero__btns{display:flex;flex-wrap:wrap;gap:.9rem}
.fe-hero__scroll{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);width:24px;height:40px;
  border:2px solid rgba(255,255,255,.28);border-radius:var(--fe-pill);z-index:2}
.fe-hero__scroll::after{content:"";position:absolute;top:7px;left:50%;width:3px;height:8px;border-radius:2px;
  background:var(--fe-lime);transform:translateX(-50%);animation:fe-wheel 2s ease-in-out infinite}
@keyframes fe-wheel{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,13px)}}

/* ==========================================================================
   5. FASCIA FOTOGRAFICA
   ========================================================================== */
.fe-band{position:relative;min-height:clamp(400px,56vh,620px);display:flex;align-items:center;
  padding:clamp(3.5rem,2.5rem + 4vw,6rem) var(--fe-gutter);
  background-size:cover;background-position:center;background-attachment:fixed;overflow:hidden;isolation:isolate}
@media(max-width:900px),(hover:none){.fe-band{background-attachment:scroll}}
.fe-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,12,8,.92) 0%,rgba(10,12,8,.6) 50%,rgba(10,12,8,.2) 100%)}
.fe-band.is-right::before{background:linear-gradient(270deg,rgba(10,12,8,.92) 0%,rgba(10,12,8,.6) 50%,rgba(10,12,8,.2) 100%)}
.fe-band__inner{position:relative;width:100%;max-width:var(--fe-wide);margin:0 auto}
.fe-band.is-right .fe-band__inner{display:flex;justify-content:flex-end}
.fe-band__box{max-width:42ch}
.fe-band__t{color:var(--fe-white);font-size:clamp(1.8rem,1.2rem + 2.6vw,3.4rem);margin:0 0 1rem;text-transform:uppercase}
.fe-band__p{font-size:clamp(1.02rem,1rem + .4vw,1.22rem);line-height:1.62;color:rgba(255,255,255,.88);margin:0 0 1.6rem}

/* ==========================================================================
   6. BENTO — griglia asimmetrica: una tessera grande e tre piccole
   È il rimedio alle "caselle tutte uguali buttate lì".
   ========================================================================== */
.fe-bento{display:grid;gap:clamp(1rem,.8rem + 1vw,1.5rem);grid-template-columns:1fr}
@media(min-width:760px){
  .fe-bento{grid-template-columns:repeat(2,1fr)}
  .fe-bento > :first-child{grid-column:span 2}
}
@media(min-width:1060px){
  .fe-bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,auto)}
  .fe-bento > :first-child{grid-column:span 2;grid-row:span 2}
  .fe-bento.is-5 > :nth-child(4){grid-column:span 2}
}
/* tessera */
.fe-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:210px;padding:1.7rem;border-radius:var(--fe-r);overflow:hidden;isolation:isolate;
  background:var(--fe-dark-2);border:1px solid var(--fe-line);text-decoration:none;color:var(--fe-white);
  transition:transform .42s var(--fe-ease),box-shadow .42s var(--fe-ease),border-color .42s}
.fe-tile:hover{transform:translateY(-8px);box-shadow:var(--fe-shadow);border-color:rgba(117,173,0,.45);color:var(--fe-white)}
.fe-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--fe-ease)}
.fe-tile:hover img{transform:scale(1.08)}
.fe-tile::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,12,8,.15) 0%,rgba(10,12,8,.88) 72%);transition:background .42s}
.fe-tile:hover::before{background:linear-gradient(180deg,rgba(117,173,0,.3) 0%,rgba(10,12,8,.92) 72%)}
.fe-tile > :first-child{grid-column:span 2}
.fe-tile__num{position:absolute;top:1.1rem;left:1.4rem;font-family:var(--fe-fa);font-size:2.4rem;font-weight:700;
  line-height:1;color:rgba(255,255,255,.2);z-index:1}
.fe-tile__kick{font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fe-lime);margin-bottom:.5rem}
.fe-tile__t{font-family:var(--fe-fh);font-weight:700;font-size:1.18rem;line-height:1.16;margin:0 0 .5rem;
  text-transform:uppercase;letter-spacing:-.025em;color:var(--fe-white)}
.fe-tile__d{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.76);margin:0}
.fe-tile__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fe-lime)}
.fe-tile__go::after{content:"→";transition:transform .3s var(--fe-ease)}
.fe-tile:hover .fe-tile__go::after{transform:translateX(6px)}
/* la tessera grande respira di più */
.fe-bento > .fe-tile:first-child{min-height:340px;padding:2.2rem}
.fe-bento > .fe-tile:first-child .fe-tile__t{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem)}
.fe-bento > .fe-tile:first-child .fe-tile__d{font-size:1rem;max-width:44ch}
.fe-bento > .fe-tile:first-child .fe-tile__num{font-size:3.6rem}

/* ==========================================================================
   7. CARD SU FONDO CHIARO
   ========================================================================== */
.fe-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));gap:clamp(1.1rem,.9rem + 1vw,1.6rem)}
@media(min-width:820px){.fe-cards.is-4{grid-template-columns:repeat(2,1fr)}.fe-cards.is-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1140px){.fe-cards.is-4{grid-template-columns:repeat(4,1fr)}}
.fe-card{position:relative;background:var(--fe-white);color:var(--fe-ink);border-radius:var(--fe-r);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--fe-shadow-light);
  transition:transform .42s var(--fe-ease),box-shadow .42s var(--fe-ease)}
.fe-card:hover{transform:translateY(-10px);box-shadow:0 30px 70px rgba(18,21,15,.22)}
.fe-section:not(.is-light):not(.is-offerta) .fe-card{background:var(--fe-dark-2);color:var(--fe-white);border:1px solid var(--fe-line);box-shadow:none}
.fe-section:not(.is-light):not(.is-offerta) .fe-card:hover{box-shadow:var(--fe-shadow);border-color:rgba(117,173,0,.42)}
.fe-card__img{position:relative;aspect-ratio:16/10;overflow:hidden}
.fe-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .95s var(--fe-ease)}
.fe-card:hover .fe-card__img img{transform:scale(1.09)}
.fe-card__num{position:absolute;top:.9rem;left:.9rem;z-index:2;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--fe-green);color:var(--fe-white);
  font-family:var(--fe-fa);font-size:.86rem;font-weight:700}
.fe-card__in{padding:1.5rem 1.5rem 1.7rem;flex:1;display:flex;flex-direction:column}
.fe-card__title{font-size:1.06rem;margin:0 0 .6rem;letter-spacing:-.022em;text-transform:uppercase;line-height:1.2;color:inherit}
.fe-card p{font-size:.92rem;line-height:1.62;margin:0 0 .8rem;color:var(--fe-gray-700)}
.fe-section:not(.is-light):not(.is-offerta) .fe-card p{color:rgba(255,255,255,.74)}
.fe-card__metas{display:grid;gap:.4rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--fe-line-ink)}
.fe-section:not(.is-light):not(.is-offerta) .fe-card__metas{border-top-color:var(--fe-line)}
.fe-card__meta{display:flex;justify-content:space-between;gap:1rem;font-size:.83rem}
.fe-card__meta strong{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fe-green-darker);font-weight:700}
.fe-section:not(.is-light):not(.is-offerta) .fe-card__meta strong{color:var(--fe-green)}
.fe-price{display:block;font-family:var(--fe-fa);font-size:1.7rem;font-weight:700;letter-spacing:-.02em;
  color:var(--fe-green-darker);margin:.2rem 0 .8rem}
.fe-section:not(.is-light):not(.is-offerta) .fe-price{color:var(--fe-green)}
.fe-price__from{display:block;font-family:var(--fe-fb);font-size:.62rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fe-gray-500);margin-bottom:.1rem}

/* ==========================================================================
   8. SPLIT con immagine che sconfina
   ========================================================================== */
.fe-split{display:grid;grid-template-columns:1fr;gap:clamp(2rem,1.5rem + 3vw,4rem);align-items:center}
@media(min-width:920px){
  .fe-split{grid-template-columns:1.05fr .95fr}
  .fe-split.is-reverse > :first-child{order:2}
  /* l'immagine esce dal contenitore: rompe la scatola */
  .fe-split.is-bleed > :last-child{margin-right:calc(-1 * var(--fe-gutter))}
  .fe-split.is-reverse.is-bleed > :first-child{margin-right:0;margin-left:calc(-1 * var(--fe-gutter))}
}
.fe-split h2{font-size:clamp(1.8rem,1.25rem + 2.3vw,3.1rem);margin:0 0 1.1rem;text-transform:uppercase}
.fe-split p{font-size:1.04rem;line-height:1.75}
.fe-shot{position:relative;border-radius:var(--fe-r);overflow:hidden;box-shadow:var(--fe-shadow)}
.fe-shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;transition:transform 1.1s var(--fe-ease)}
.fe-shot:hover img{transform:scale(1.05)}
.fe-shot__tag{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;padding:.42rem 1rem;border-radius:var(--fe-pill);
  background:rgba(10,12,8,.72);backdrop-filter:blur(8px);font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fe-lime)}

/* foto circolare del marchio */
.fe-orb{position:relative;width:min(78%,430px);aspect-ratio:1;margin:0 auto}
@media(min-width:920px){.fe-orb{width:min(100%,430px)}}
.fe-orb img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
  border:6px solid var(--fe-green);box-shadow:var(--fe-shadow),0 0 70px rgba(117,173,0,.28)}
.fe-orb::before,.fe-orb::after{content:"";position:absolute;border-radius:50%;border-style:solid;pointer-events:none}
.fe-orb::before{width:31%;aspect-ratio:1;top:-6%;right:-8%;border-width:clamp(12px,2.1vw,23px);border-color:var(--fe-green);
  animation:fe-float 14s ease-in-out infinite}
.fe-orb::after{width:16%;aspect-ratio:1;bottom:5%;left:-10%;border-width:clamp(8px,1.3vw,13px);border-color:rgba(255,255,255,.42);
  animation:fe-float 18s ease-in-out infinite reverse}
.fe-section.is-light .fe-orb::after{border-color:rgba(18,21,15,.2)}
.fe-orb.is-flip::before{right:auto;left:-8%}.fe-orb.is-flip::after{left:auto;right:-10%}

/* ==========================================================================
   9. FEATURE
   ========================================================================== */
.fe-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:clamp(1.1rem,.9rem + 1vw,1.7rem)}
.fe-feat{position:relative;padding:2.1rem 1.6rem;border-radius:var(--fe-r-sm);overflow:hidden;
  background:var(--fe-soft);border:1px solid var(--fe-line);transition:all .4s var(--fe-ease)}
.fe-section.is-light .fe-feat{background:var(--fe-white);border-color:var(--fe-line-ink);box-shadow:0 4px 18px rgba(18,21,15,.05)}
.fe-feat::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--fe-lime),var(--fe-green));transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--fe-ease)}
.fe-feat:hover{transform:translateY(-6px);border-color:rgba(117,173,0,.42)}
.fe-section:not(.is-light) .fe-feat:hover{background:rgba(117,173,0,.075)}
.fe-section.is-light .fe-feat:hover{box-shadow:0 16px 40px rgba(18,21,15,.1)}
.fe-feat:hover::before{transform:scaleX(1)}
.fe-feat__num{font-family:var(--fe-fa);font-size:2.5rem;font-weight:700;line-height:1;color:rgba(117,173,0,.3);margin-bottom:.5rem}
.fe-section.is-light .fe-feat__num{color:rgba(117,173,0,.45)}
.fe-feat h3{font-size:1.06rem;margin:0 0 .55rem;letter-spacing:-.02em}
.fe-feat p{font-size:.93rem;line-height:1.68;margin:0;color:rgba(255,255,255,.75)}
.fe-section.is-light .fe-feat p{color:var(--fe-gray-700)}

/* ==========================================================================
   10. NUMERI — su fondo verde pieno, così spiccano
   ========================================================================== */
.fe-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:0;
  border-radius:var(--fe-r);overflow:hidden;
  background:linear-gradient(120deg,#84C500,var(--fe-green) 52%,var(--fe-green-dark));
  box-shadow:0 20px 50px rgba(117,173,0,.24)}
.fe-stats > *{padding:2.3rem 1.2rem;text-align:center;border-right:1px solid rgba(255,255,255,.18)}
.fe-stats > *:last-child{border-right:0}
@media(max-width:719px){.fe-stats{grid-template-columns:repeat(2,1fr)}
  .fe-stats > *{border-bottom:1px solid rgba(255,255,255,.18)}
  .fe-stats > *:nth-child(2n){border-right:0}}
.fe-stat__n{display:block;font-family:var(--fe-fa);font-size:clamp(2.1rem,1.5rem + 2.1vw,3.1rem);font-weight:700;
  line-height:1;color:var(--fe-white);letter-spacing:-.03em}
.fe-stat__l{display:block;margin-top:.6rem;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.86)}

/* ==========================================================================
   11. PROSA
   ========================================================================== */
.fe-prose{max-width:var(--fe-read);margin:0 auto;font-size:1.05rem;line-height:1.82;color:rgba(255,255,255,.84)}
.fe-prose > p{margin:0 0 1.4rem}
.fe-prose h2{font-size:clamp(1.55rem,1.2rem + 1.7vw,2.3rem);margin:3.2rem 0 1rem;text-transform:uppercase}
.fe-prose h3{position:relative;font-size:clamp(1.16rem,1.05rem + .65vw,1.45rem);margin:2.6rem 0 .85rem;padding-left:1.15rem;letter-spacing:-.022em}
.fe-prose h3::before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--fe-lime),var(--fe-green))}
.fe-prose ul{margin:0 0 1.5rem;padding:0;list-style:none}
.fe-prose li{position:relative;padding-left:1.75rem;margin-bottom:.75rem;line-height:1.7}
.fe-prose li::before{content:"";position:absolute;left:.15rem;top:.66em;width:7px;height:7px;border-radius:50%;
  background:var(--fe-green);box-shadow:0 0 0 4px rgba(117,173,0,.15)}
.fe-prose > p:first-of-type::first-letter{float:left;font-family:var(--fe-fh);font-weight:700;font-size:3.5em;
  line-height:.8;margin:.08em .14em 0 0;color:var(--fe-green)}
.fe-prose.no-drop > p:first-of-type::first-letter{float:none;font-size:inherit;margin:0;color:inherit;line-height:inherit}
.fe-section.is-light .fe-prose > p:first-of-type::first-letter{color:var(--fe-green-darker)}

/* ==========================================================================
   12. CITAZIONE GRANDE
   ========================================================================== */
.fe-pull{position:relative;max-width:58ch;margin:3.2rem auto;padding:2.5rem 2.2rem 2.5rem 4.4rem;
  background:linear-gradient(120deg,rgba(117,173,0,.14),rgba(117,173,0,.02));
  border-radius:var(--fe-r);border-left:4px solid var(--fe-green)}
.fe-section.is-light .fe-pull{background:linear-gradient(120deg,rgba(117,173,0,.14),rgba(255,255,255,.5))}
.fe-pull::before{content:"\201C";position:absolute;left:1rem;top:.04em;font-family:Georgia,serif;font-size:5.8rem;
  line-height:1;color:rgba(117,173,0,.42)}
.fe-pull p{margin:0;font-family:var(--fe-fh);font-size:clamp(1.2rem,1rem + .9vw,1.72rem);line-height:1.34;
  font-weight:600;letter-spacing:-.02em}
.fe-pull p + p{margin-top:.85rem;font-size:.98rem;font-weight:400;font-family:var(--fe-fb);letter-spacing:0;opacity:.8}

/* ==========================================================================
   13. CALLOUT / TABELLE / FAQ
   ========================================================================== */
.fe-callout{position:relative;border:1px solid var(--fe-line);border-left:4px solid var(--fe-green);
  background:var(--fe-soft);border-radius:0 var(--fe-r-sm) var(--fe-r-sm) 0;padding:1.7rem 1.9rem;
  margin:2.3rem auto;max-width:var(--fe-read)}
.fe-section.is-light .fe-callout{background:var(--fe-white);border-color:var(--fe-line-ink);border-left-color:var(--fe-green)}
.fe-callout > :first-child{margin-top:0}.fe-callout > :last-child{margin-bottom:0}
.fe-callout.is-alert{border-left-color:var(--fe-orange);background:linear-gradient(120deg,rgba(241,67,7,.1),rgba(241,67,7,.02))}
.fe-callout__title{font-family:var(--fe-fh);font-weight:700;font-size:1.08rem;color:var(--fe-green);margin:0 0 .45rem;letter-spacing:-.02em}
.fe-section.is-light .fe-callout__title{color:var(--fe-green-darker)}
.fe-callout.is-alert .fe-callout__title{color:#E0400A}

.wp-block-table.fe-table{overflow-x:auto;margin:2.3rem auto;max-width:var(--fe-wide);
  border-radius:var(--fe-r-sm);border:1px solid var(--fe-line);background:var(--fe-soft)}
.fe-section.is-light .fe-table{background:var(--fe-white);border-color:var(--fe-line-ink);box-shadow:0 6px 22px rgba(18,21,15,.06)}
.fe-table table{width:100%;min-width:30rem;border-collapse:collapse;font-size:.93rem}
.fe-table :is(th,td){padding:1rem 1.15rem;border-bottom:1px solid var(--fe-line);text-align:left;vertical-align:top}
.fe-section.is-light .fe-table :is(th,td){border-bottom-color:var(--fe-line-ink)}
.fe-table thead th{background:rgba(117,173,0,.12);border-bottom:2px solid var(--fe-green);color:var(--fe-lime);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;font-weight:700}
.fe-section.is-light .fe-table thead th{background:var(--fe-green);color:var(--fe-white);border-bottom-color:var(--fe-green-dark)}
.fe-table tbody tr{transition:background .22s}
.fe-table tbody tr:hover{background:rgba(117,173,0,.07)}
.fe-table tbody tr:last-child :is(th,td){border-bottom:0}
.fe-table.is-prices td:last-child{font-family:var(--fe-fa);font-weight:700;color:var(--fe-green);white-space:nowrap}
.fe-section.is-light .fe-table.is-prices td:last-child{color:var(--fe-green-darker)}

.fe-faq{max-width:840px;margin:0 auto}
.fe-faq .wp-block-details{background:var(--fe-soft);border:1px solid var(--fe-line);border-radius:var(--fe-r-sm);
  margin-bottom:.6rem;transition:all .3s}
.fe-section.is-light .fe-faq .wp-block-details{background:var(--fe-white);border-color:var(--fe-line-ink)}
.fe-faq .wp-block-details[open]{border-color:rgba(117,173,0,.45);background:rgba(117,173,0,.06)}
.fe-faq summary{position:relative;padding:1.25rem 3.4rem 1.25rem 1.45rem;cursor:pointer;list-style:none;
  font-family:var(--fe-fh);font-weight:700;font-size:1rem;transition:color .25s;letter-spacing:-.02em}
.fe-faq summary:hover{color:var(--fe-green)}
.fe-faq summary::-webkit-details-marker{display:none}
.fe-faq summary::before,.fe-faq summary::after{content:"";position:absolute;right:1.35rem;top:50%;width:12px;height:2px;
  background:var(--fe-green);transform:translateY(-50%)}
.fe-faq summary::before{transform:translateY(-50%) rotate(90deg);transition:transform .35s var(--fe-ease)}
.fe-faq [open] summary::before{transform:translateY(-50%) rotate(0)}
.fe-faq summary:focus-visible{outline:3px solid var(--fe-green);outline-offset:2px}
.fe-faq .wp-block-details > :not(summary){padding:0 1.45rem 1.35rem;line-height:1.78;margin:0;opacity:.82}

/* ==========================================================================
   14. BOTTONI
   ========================================================================== */
.fe-btn .wp-block-button__link,.fe-btn-a{display:inline-flex;align-items:center;gap:.6rem;background:transparent;
  color:var(--fe-white);border:2px solid rgba(255,255,255,.5);border-radius:var(--fe-pill);padding:1rem 2.3rem;
  font-family:var(--fe-fb);font-size:.9rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;transition:all .34s var(--fe-ease)}
.fe-btn .wp-block-button__link:hover{background:var(--fe-white);color:var(--fe-ink);border-color:var(--fe-white);transform:translateY(-3px)}
.fe-section.is-light .fe-btn .wp-block-button__link{color:var(--fe-ink);border-color:rgba(18,21,15,.35)}
.fe-section.is-light .fe-btn .wp-block-button__link:hover{background:var(--fe-ink);color:var(--fe-white);border-color:var(--fe-ink)}
.fe-btn.is-solid .wp-block-button__link{background:var(--fe-green);color:var(--fe-white);border-color:var(--fe-green);
  box-shadow:0 10px 30px rgba(117,173,0,.32)}
.fe-btn.is-solid .wp-block-button__link:hover{background:var(--fe-lime);color:var(--fe-ink);border-color:var(--fe-lime);
  box-shadow:0 18px 44px rgba(199,245,100,.4)}
.wp-block-buttons{gap:.85rem;margin:1.8rem 0}

/* ==========================================================================
   15. CTA
   ========================================================================== */
.fe-cta{position:relative;background:linear-gradient(130deg,#8ACF00 0%,var(--fe-green) 44%,var(--fe-green-dark) 100%);
  color:var(--fe-white);text-align:center;padding:clamp(4rem,2.5rem + 4.5vw,6.8rem) var(--fe-gutter);
  overflow:hidden;isolation:isolate}
.fe-cta::before{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  width:330px;height:330px;top:-120px;left:-90px;border:24px solid rgba(255,255,255,.13);
  animation:fe-float 19s ease-in-out infinite}
.fe-cta :is(h2,h3){color:var(--fe-white);font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem);max-width:19ch;margin:0 auto 1.1rem;text-transform:uppercase}
.fe-cta p{max-width:54ch;margin:0 auto 2rem;font-size:1.06rem;line-height:1.62;color:rgba(255,255,255,.95)}
.fe-cta .wp-block-buttons{justify-content:center}
.fe-cta .fe-btn .wp-block-button__link{color:var(--fe-white);border-color:rgba(255,255,255,.7);background:transparent;box-shadow:none}
.fe-cta .fe-btn .wp-block-button__link:hover{background:var(--fe-white);color:var(--fe-green-darker);border-color:var(--fe-white)}
.fe-cta .fe-btn.is-solid .wp-block-button__link{background:var(--fe-ink);border-color:var(--fe-ink);box-shadow:0 10px 30px rgba(0,0,0,.26)}
.fe-cta .fe-btn.is-solid .wp-block-button__link:hover{background:var(--fe-white);color:var(--fe-ink)}
.fe-nap{font-size:.89rem;line-height:1.9;color:rgba(255,255,255,.9);margin-top:1.7rem}
.fe-nap a{color:var(--fe-white);text-decoration:underline}

/* ==========================================================================
   16. IMMAGINI E SEGNAPOSTO
   ========================================================================== */
.fe-page .wp-block-image img{border-radius:var(--fe-r);box-shadow:var(--fe-shadow)}
.fe-page .wp-block-image.is-round img{border-radius:50%;aspect-ratio:1;object-fit:cover}
.fe-slot{border:2px dashed var(--fe-green);border-radius:var(--fe-r);background:rgba(117,173,0,.08);padding:1.5rem;text-align:center}
.fe-slot p{margin:0;font-size:.9rem;opacity:.85}.fe-slot strong{color:var(--fe-green)}

/* ==========================================================================
   17. ANIMAZIONI
   ========================================================================== */
.js-fe-anim .fe-anim{opacity:0;transform:translateY(40px);transition:opacity .9s var(--fe-ease),transform .9s var(--fe-ease)}
.js-fe-anim .fe-anim.from-left{transform:translateX(-54px)}
.js-fe-anim .fe-anim.from-right{transform:translateX(54px)}
.js-fe-anim .fe-anim.zoom{transform:scale(.9)}
.js-fe-anim .fe-anim.is-visible{opacity:1;transform:none}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats) > *{opacity:0;transform:translateY(36px) scale(.985);
  transition:opacity .8s var(--fe-ease),transform .8s var(--fe-ease)}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats).is-visible > *{opacity:1;transform:none}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats).is-visible > :nth-child(2){transition-delay:.1s}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats).is-visible > :nth-child(3){transition-delay:.2s}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats).is-visible > :nth-child(4){transition-delay:.3s}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats).is-visible > :nth-child(5){transition-delay:.4s}
/* Nessun clip-path sui titoli: se l'osservatore non scatta — JavaScript
   lento, errore, pagina aperta a metà — il titolo resterebbe invisibile.
   La dissolvenza con risalita fallisce in modo sicuro: al massimo appare
   senza animazione. */

/* ==========================================================================
   18. BARRA + TORNA SU
   ========================================================================== */
.fe-progress{position:fixed;top:0;left:0;height:3px;z-index:210;width:0;
  background:linear-gradient(90deg,var(--fe-green),var(--fe-lime));transition:width .1s linear}
.fe-top{position:fixed;left:clamp(1rem,.5rem + 2vw,2rem);bottom:clamp(1rem,.5rem + 2vw,2rem);width:50px;height:50px;
  border-radius:50%;background:rgba(18,21,15,.9);backdrop-filter:blur(8px);border:2px solid var(--fe-green);
  color:var(--fe-green);display:grid;place-items:center;z-index:190;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(12px);transition:all .34s var(--fe-ease)}
.fe-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.fe-top:hover{background:var(--fe-green);color:var(--fe-white);transform:translateY(-3px)}
.fe-top svg{width:19px;height:19px}

/* ==========================================================================
   19. MOBILE
   ========================================================================== */
@media(max-width:879px){
  .fe-section.has-rings::after{width:min(48vw,240px);top:-4%;right:-16%}
  .fe-section.has-rings.rings-left::after{left:-18%;bottom:-6%}
  .fe-cta::before{width:180px;height:180px;top:-70px;left:-60px;border-width:16px}
  .fe-orb::before{width:28%;top:-4%;right:-5%}
  .fe-orb::after{width:15%;bottom:4%;left:-6%}
  .fe-band{min-height:350px}
  .fe-band__box{max-width:none}
  .fe-band.is-right .fe-band__inner{justify-content:flex-start}
  .fe-band::before,.fe-band.is-right::before{background:linear-gradient(180deg,rgba(10,12,8,.48),rgba(10,12,8,.9))}
  .fe-ghost{font-size:clamp(6rem,32vw,12rem)}
  .fe-section.cut-top,.fe-section.cut-bottom{clip-path:none;margin-top:0;
    padding-top:clamp(4.5rem,3rem + 6vw,9rem);padding-bottom:clamp(4.5rem,3rem + 6vw,9rem)}
}

/* ==========================================================================
   20. RIDUZIONE DEL MOVIMENTO
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .js-fe-anim .fe-anim,.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats) > *{opacity:1!important;transform:none!important;transition:none!important}
  .fe-section.has-rings::after,.fe-orb::before,.fe-orb::after,.fe-cta::before,
  .fe-hero__eyebrow::before,.fe-hero__scroll::after{animation:none!important}
  .fe-band{background-attachment:scroll}
  .fe-card,.fe-feat,.fe-tile,.fe-btn .wp-block-button__link,.fe-top,.fe-shot img,.fe-card__img img,.fe-tile img{transition:none!important}
  .fe-card:hover,.fe-feat:hover,.fe-tile:hover,.fe-btn .wp-block-button__link:hover{transform:none!important}
}


/* ==========================================================================
   22. INNESTO EDITORIALE
   --------------------------------------------------------------------------
   Tre tratti presi dal linguaggio "Editorial Cinematic" e innestati sul
   sistema esistente, senza toccare impianto, colori e contenuti:

     · Schibsted Grotesk sui titoli grandi
     · ingresso a cascata con risalita di 24px
     · bottoni a pillola più netti

   Perché i titoli grandi restano in MINUSCOLO: alle dimensioni dell'eroe
   il maiuscolo con spaziatura negativa impasta le lettere e allunga le
   righe. Il minuscolo si legge più in fretta e lascia respirare la pagina.
   Il maiuscolo resta dove la gerarchia è corta: occhielli, etichette,
   bottoni, titoli di card.

   Per togliere l'innesto basta cancellare questo blocco.
   ========================================================================== */

:root{
  /* Schibsted Grotesk: grottesca asciutta, aste dritte e aperture strette.
     Non ha vezzi da mostrare e il grassetto e' pieno: a corpo grande si vede
     da lontano, che e' quello che serve a un'apertura. Non ha asse di
     dimensione ottica, quindi la compensazione la fa la spaziatura: negativa
     sui corpi grandi, quasi nulla sui piccoli. */
  --fe-display:var(--fe-font-display,"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif);
}

/* --- Titolo dell'eroe ---------------------------------------------------- */
.fe-hero__title{
  font-family:var(--fe-display);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.038em;
  line-height:.97;
  font-size:clamp(2.6rem,1.3rem + 6.1vw,5.9rem);
}
/* <em> come variante di colore, non corsivo */
.fe-hero__title em{font-style:normal;color:var(--fe-lime)}

/* --- Titoli di sezione --------------------------------------------------- */
.fe-section-title{
  font-family:var(--fe-display);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.034em;
  line-height:1.02;
  font-size:clamp(2.1rem,1.25rem + 3.4vw,4rem);
  max-width:20ch;
}

/* --- Titoli delle fasce fotografiche ------------------------------------- */
.fe-band__t{
  font-family:var(--fe-display);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.034em;
  line-height:1.04;
  font-size:clamp(1.85rem,1.15rem + 2.7vw,3.35rem);
}

/* --- Titolo della chiamata all'azione ------------------------------------ */
.fe-cta :is(h2,h3){
  font-family:var(--fe-display);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.036em;
  line-height:1.02;
  font-size:clamp(2rem,1.25rem + 2.7vw,3.4rem);
  max-width:22ch;
}

/* --- Titoli dentro la prosa ---------------------------------------------- */
.fe-prose h2{
  font-family:var(--fe-display);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.03em;
  font-size:clamp(1.7rem,1.15rem + 1.9vw,2.55rem);
}

/* --- Citazione grande ----------------------------------------------------
   Il serif vuole respiro: in colonna stretta sembra sacrificato. Qui va
   oltre la misura di lettura e diventa un vero stacco nella pagina. */
.fe-pull{
  max-width:min(74ch,100%);
  padding:clamp(2.4rem,2rem + 1.6vw,3.4rem) clamp(2rem,1.5rem + 2vw,3.2rem)
          clamp(2.4rem,2rem + 1.6vw,3.4rem) clamp(3.6rem,3rem + 2.6vw,5.4rem);
  margin:clamp(3rem,2.5rem + 1.5vw,4.4rem) auto;
}
.fe-pull::before{font-size:clamp(5rem,4rem + 2.4vw,7rem);left:clamp(.9rem,.6rem + .8vw,1.6rem)}
.fe-pull p{
  font-family:var(--fe-display);
  font-weight:700;
  letter-spacing:-.028em;
  line-height:1.24;
  font-size:clamp(1.4rem,1rem + 1.5vw,2.3rem);
}
.fe-pull p + p{font-family:var(--fe-fb);font-size:.98rem;letter-spacing:0;line-height:1.7}

/* --- Titoli di prosa minori: Inter, sono struttura non voce -------------- */
.fe-prose :is(h3,h4){font-family:var(--fe-fb);font-weight:600;letter-spacing:-.012em}

/* --- Titoli di card e tessere: Inter, sono etichette --------------------- */
.fe-tile__t,.fe-card__t{font-family:var(--fe-fb);font-weight:600;letter-spacing:-.014em}

/* --- Cifre: il carattere dei titoli, con le cifre a larghezza fissa ------
   `tabular-nums` incolonna i numeri nelle tabelle prezzi e nelle statistiche:
   senza, "80" e "150" partono da due posizioni diverse e la fila balla. */
.fe-price,.fe-stat__n,.fe-feat__num,.fe-tile__num,.fe-table.is-prices td:last-child{
  font-family:var(--fe-fa);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

/* --------------------------------------------------------------------------
   PUNTI NUMERATI
   Il convertitore emetteva `.fe-points` da sempre, ma il foglio di stile non
   li aveva mai previsti: 28 blocchi su 7 pagine uscivano come testo nudo,
   con il numero grande quanto una nota a piè di pagina.

   Non sono card come `.fe-feats`: sono una sequenza. Quindi niente riquadri,
   ma una colonna di numeri grandi e una riga sottile a separare i passaggi —
   la forma che si legge come "primo, secondo, terzo".
   -------------------------------------------------------------------------- */
.fe-points{
  margin:clamp(2rem,1.5rem + 1.6vw,3.2rem) auto;   /* stessa colonna di .fe-prose */
  max-width:var(--fe-read);
}
.fe-point{
  display:grid;
  grid-template-columns:clamp(3.2rem,2.4rem + 2.4vw,4.6rem) 1fr;
  gap:0 clamp(1rem,.7rem + 1vw,1.6rem);
  padding:clamp(1.4rem,1.1rem + 1vw,2rem) 0;
  border-top:1px solid var(--fe-line);
}
.fe-point:last-child{border-bottom:1px solid var(--fe-line)}
.fe-section.is-light .fe-point{border-color:var(--fe-line-ink)}

.fe-point__num{
  grid-row:1 / span 2;
  font-family:var(--fe-fa);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:clamp(2.1rem,1.5rem + 2.1vw,3.1rem);
  line-height:.9;
  letter-spacing:-.04em;
  color:rgba(117,173,0,.34);
}
.fe-section.is-light .fe-point__num{color:rgba(117,173,0,.55)}

.fe-point h3{
  font-family:var(--fe-fb);
  font-weight:600;
  font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);
  line-height:1.3;
  letter-spacing:-.014em;
  margin:0 0 .45rem;
}
.fe-point p{
  margin:0;
  font-size:.95rem;
  line-height:1.7;
  color:rgba(255,255,255,.75);
}
.fe-section.is-light .fe-point p{color:var(--fe-gray-700)}

/* Sotto i 560px la colonna del numero mangia troppa larghezza al testo:
   il numero passa sopra, piccolo e in linea. */
@media (max-width:560px){
  .fe-point{grid-template-columns:1fr;gap:0}
  .fe-point__num{grid-row:auto;font-size:1.5rem;margin-bottom:.3rem}
}

/* --- Ingresso a cascata, misure della specifica -------------------------- */
.js-fe-anim .fe-anim{
  transform:translateY(24px);
  transition:opacity .8s ease-out,transform .8s ease-out;
}
.js-fe-anim .fe-anim.from-left{transform:translateX(-24px)}
.js-fe-anim .fe-anim.from-right{transform:translateX(24px)}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats) > *{
  transform:translateY(24px);
  transition:opacity .8s ease-out,transform .8s ease-out;
}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats).is-visible > :nth-child(2){transition-delay:.2s}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats).is-visible > :nth-child(3){transition-delay:.4s}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats).is-visible > :nth-child(4){transition-delay:.6s}
.js-fe-anim :is(.fe-cards,.fe-feats,.fe-bento,.fe-stats).is-visible > :nth-child(5){transition-delay:.8s}

/* Cascata dell'eroe: titolo, testo, bottone a 0 / 0,2 / 0,4 s */
@keyframes fe-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fe-hero__inner > *{opacity:0;animation:fe-rise .8s ease-out forwards}
.fe-hero__eyebrow{animation-delay:0s}
.fe-hero__title{animation-delay:.1s}
.fe-hero__lead{animation-delay:.3s}
.fe-hero .wp-block-buttons,.fe-hero__btns{animation-delay:.5s}

/* --- Pillole più nette --------------------------------------------------- */
.fe-btn .wp-block-button__link,.fe-btn-a{
  border-radius:9999px;
  transition:transform .2s ease-in-out,background-color .2s ease-in-out,
             color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out;
}
.fe-btn .wp-block-button__link:hover,.fe-btn-a:hover{transform:scale(1.03) translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .fe-hero__inner > *{animation:none;opacity:1;transform:none}
  .fe-btn .wp-block-button__link:hover{transform:none}
}

/* --------------------------------------------------------------------------
   STRUTTURE CONVENZIONATE
   I loghi sono insegne e biglietti da visita fotografati: fondi scuri, fondi
   chiari, proporzioni tutte diverse. L'unico modo per farli convivere senza
   sembrare un collage è dare a ciascuno la stessa cornice bianca e lasciarlo
   respirare dentro, con object-fit:contain.
   -------------------------------------------------------------------------- */
.fe-loghi{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1rem,.6rem + 1.4vw,1.75rem);
  margin:clamp(2rem,1.4rem + 2vw,3.25rem) 0;
}
.fe-logo{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:1.5rem 1.25rem 1.375rem;
  background:var(--fe-surface-card,#fff);
  border-radius:var(--fe-radius-card,32px);
  box-shadow:var(--fe-shadow-card,5px 5px 20px rgba(0,0,0,.10));
  transition:transform var(--fe-duration,280ms) var(--fe-ease,ease),
             box-shadow var(--fe-duration,280ms) var(--fe-ease,ease);
}
.fe-logo:hover{ transform:translateY(-4px); box-shadow:var(--fe-shadow-lg,0 12px 32px rgba(0,0,0,.28)); }

.fe-logo__img{
  width:100%; height:104px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.125rem;
}
.fe-logo__img img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
}
.fe-logo__n{
  font-family:var(--fe-display,inherit);
  font-weight:700; letter-spacing:-.015em;
  font-size:1.0625rem; line-height:1.2;
  color:var(--fe-text-on-card,#111);
}
.fe-logo__d{
  margin-top:.3125rem;
  font-size:.8125rem; line-height:1.45;
  color:var(--fe-text-on-card-muted,#444);
}
.fe-logo__d:empty{ display:none; }
.fe-logo__tel{
  margin-top:.625rem;
  font-size:.8125rem; font-weight:600;
  letter-spacing:.01em;
  color:var(--fe-green-darker,#3F5D01);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}
.fe-logo__tel:hover{ color:var(--fe-green-dark,#5C8701); }

/* Su fondo scuro le cornici bianche reggono da sole; su fondo chiaro
   servirebbero a nulla, quindi lì si passa al bordo. */
.fe-section.is-light .fe-logo,
.fe-section.is-warm .fe-logo{
  box-shadow:none;
  border:1px solid var(--fe-border-on-card,#E5E5E5);
}
.fe-section.is-light .fe-logo:hover,
.fe-section.is-warm .fe-logo:hover{
  box-shadow:var(--fe-shadow-md,0 4px 16px rgba(0,0,0,.18));
  border-color:transparent;
}

@media (max-width:520px){
  .fe-loghi{ grid-template-columns:repeat(2,1fr); gap:.75rem; }
  .fe-logo{ padding:1.125rem .75rem 1rem; border-radius:20px; }
  .fe-logo__img{ height:72px; margin-bottom:.875rem; }
  .fe-logo__n{ font-size:.9375rem; }
}

/* ==========================================================================
   LE ESPERIENZE — la sezione che vende
   --------------------------------------------------------------------------
   Non è una sezione di contenuto: è il listino, e sta subito sotto l'apertura.

   Formato ORIZZONTALE, due per riga. Quattro card in fila su un contenitore
   da 1260px lasciano 290px l'una: strette e alte, con il prezzo che finisce a
   quote diverse a seconda di quanto va a capo il titolo. Due per riga danno
   600px, la card si sdraia, e il prezzo sta sempre alla stessa altezza perché
   il piede è ancorato in fondo.
   ========================================================================== */
/* Fondo scuro, non piu' crema: e' la sezione che deve fermare chi scorre, e
   su ardesia le card bianche e il verde staccano molto di piu'. */
.fe-section.is-offerta{
  background:
    radial-gradient(90% 60% at 22% 4%, rgba(117,173,0,.20) 0%, transparent 58%),
    radial-gradient(80% 55% at 86% 96%, rgba(67,81,82,.28) 0%, transparent 62%),
    linear-gradient(168deg, #212819 0%, #1A2015 55%, #141910 100%);
  color:var(--fe-white);
  padding-top:clamp(4.2rem,3rem + 4vw,6.5rem);
  position:relative;
  /* `clip` invece di `hidden`: con overflow-clip-margin il sigillo puo'
     sporgere sopra il bordo e stare davvero a cavallo del confine, mentre il
     reticolo e la filigrana restano contenuti. Dove overflow-clip-margin non
     e' supportato si comporta come hidden: il sigillo viene tagliato, nulla
     si rompe. */
  overflow:clip; overflow-clip-margin:90px;
  background-color:#1A2015;
}
.fe-section.is-offerta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--fe-green),var(--fe-lime),var(--fe-green));
}
/* Reticolo appena percepibile: dà una texture alla campitura piatta, che è
   quello che la faceva sembrare una diapositiva vuota. */
.fe-section.is-offerta::after{
  /* Qui c'era un reticolo a maglia quadrata. Su un sito che parla di fiume e
     montagna un reticolo e' il segno sbagliato: e' il fondale di un cruscotto
     software, non di una parete di roccia. Sostituito con la stessa grana
     delle altre sezioni. */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.42%22%2F%3E%3C%2Fsvg%3E");
  background-size:240px 240px;
  opacity:.22; mix-blend-mode:overlay;
}
.fe-section.is-offerta > *:not(.fe-ghost):not(.fe-incisioni):not(.fe-sigillo){position:relative;z-index:1}
/* :not(.fe-ghost) non e' un dettaglio: senza, la regola toglieva il
   posizionamento assoluto alla parola in filigrana, che rientrava nel flusso e
   apriva un vuoto di 245 pixel sopra il titolo. */
.fe-section.is-offerta .fe-section-title{color:var(--fe-white)}
/* Il verde scuro dell'accento su fondo ardesia sparisce: qui va il lime. */
.fe-section.is-offerta .fe-accent{color:var(--fe-lime)}
.fe-section.is-offerta .fe-kicker{color:var(--fe-lime)}
.fe-section.is-offerta .fe-section-sub{color:rgba(255,255,255,.74)}
.fe-section.is-offerta .fe-ghost{opacity:.035}

/* --- la griglia: due per riga, con aria vera ----------------------------- */
.is-offerta .fe-cards,
.is-offerta .fe-cards.is-4,
.is-offerta .fe-cards.is-3{
  grid-template-columns:1fr;
  gap:clamp(1.2rem,.9rem + 1.4vw,2.1rem);
  margin-top:clamp(2rem,1.5rem + 1.6vw,3rem);
}
@media (min-width:900px){
  .is-offerta .fe-cards,
  .is-offerta .fe-cards.is-4,
  .is-offerta .fe-cards.is-3{grid-template-columns:repeat(2,1fr)}
}

/* --- la card sdraiata ---------------------------------------------------- */
.is-offerta .fe-card{
  display:grid; grid-template-columns:1fr;
  background:var(--fe-white);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 44px rgba(0,0,0,.34);
  border-radius:var(--fe-r);
  transition:transform .42s var(--fe-ease), box-shadow .42s var(--fe-ease),
             border-color .42s var(--fe-ease);
}
@media (min-width:620px){
  .is-offerta .fe-card{grid-template-columns:minmax(0,42%) minmax(0,58%)}
}
.is-offerta .fe-card:hover{
  transform:translateY(-6px);
  box-shadow:0 34px 74px rgba(0,0,0,.46);
  border-color:rgba(199,245,100,.5);
}

/* --- la foto ------------------------------------------------------------- */
.is-offerta .fe-card__img{aspect-ratio:4/3;height:100%}
@media (min-width:620px){ .is-offerta .fe-card__img{aspect-ratio:auto;min-height:270px} }
/* Velo verde che si ritira al passaggio: è il movimento che mancava. */
.is-offerta .fe-card__img::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(140deg, rgba(117,173,0,.34), rgba(10,12,8,.34));
  opacity:1; transition:opacity .5s var(--fe-ease);
}
.is-offerta .fe-card:hover .fe-card__img::after{opacity:0}

/* Il numero: grande, cavo, editoriale. Non più un bollino. */
.is-offerta .fe-card__num{
  position:absolute; top:auto; bottom:-.35rem; left:.7rem; z-index:2;
  width:auto; height:auto; background:none; border-radius:0;
  font-family:var(--fe-fa); font-size:5.4rem; font-weight:700; line-height:1;
  letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.72);
  transition:transform .5s var(--fe-ease), -webkit-text-stroke-color .5s;
}
.is-offerta .fe-card:hover .fe-card__num{
  transform:translateY(-6px); -webkit-text-stroke-color:var(--fe-lime);
}

/* --- il contenuto -------------------------------------------------------- */
.is-offerta .fe-card__in{
  padding:clamp(1.3rem,1.1rem + .7vw,1.9rem);
  display:flex; flex-direction:column;
}
.is-offerta .fe-card__title{
  font-family:var(--fe-fh); font-weight:600; text-transform:none;
  font-size:clamp(1.08rem,1rem + .35vw,1.28rem);
  line-height:1.22; letter-spacing:-.022em; margin:0 0 .7rem;
  /* Due righe fisse: è ciò che tiene le pastiglie, il prezzo e il bottone
     alla stessa altezza in tutte le card della riga. */
  min-height:2.44em;
}

/* --- pastiglie ----------------------------------------------------------- */
.fe-card__chips{
  list-style:none; margin:0 0 .85rem; padding:0;
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:.4rem;
}
/* Due righe di pastiglie riservate a tutte: "Impegno medio-alto" e
   "Salmerino alpino" mandano a capo solo una card su quattro, e quella
   cresceva di sessanta pixel disallineando l'intera riga sotto. */
@media (min-width:620px){ .fe-card__chips{min-height:3.5rem} }
.fe-card__chips li{
  padding:.3rem .68rem; border-radius:var(--fe-pill);
  background:rgba(117,173,0,.11); border:1px solid rgba(117,173,0,.24);
  font-family:var(--fe-fb); font-size:.72rem; font-weight:600;
  letter-spacing:.01em; color:var(--fe-green-darker); white-space:nowrap;
}
.fe-section:not(.is-light):not(.is-offerta) .fe-card__chips li{
  background:rgba(199,245,100,.1); border-color:rgba(199,245,100,.26); color:var(--fe-lime);
}
.is-offerta .fe-card p{
  font-size:.9rem; line-height:1.62; margin:0 0 1rem; color:var(--fe-gray-700);
}
/* Tre righe esatte per tutte: riservate anche a chi ne scrive due, tagliate a
   chi ne scriverebbe quattro. E' l'ultimo pezzo che teneva le card di altezze
   diverse e i prezzi a quote diverse fra una riga e l'altra. */
@media (min-width:620px){
  .is-offerta .fe-card p{
    min-height:calc(3 * 1.62em);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* --- il piede: prezzo e bottone sulla stessa riga, ancorati in fondo ----- */
.fe-card__foot{
  margin-top:auto; padding-top:1rem;
  border-top:1px solid rgba(18,21,15,.1);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}
.is-offerta .fe-price{
  font-size:clamp(1.6rem,1.4rem + .7vw,2rem); line-height:1; margin:0;
  color:var(--fe-green-darker);
}
.is-offerta .fe-price__from{
  font-size:.58rem; letter-spacing:.18em; color:var(--fe-gray-500); margin-bottom:.28rem;
}
.fe-price.is-quote{
  font-family:var(--fe-fb); font-size:1rem; font-weight:600; letter-spacing:0;
  color:var(--fe-gray-700); margin:0;
}

/* --- il bottone ---------------------------------------------------------- */
.fe-card__cta{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.05rem; border-radius:var(--fe-pill);
  border:1.5px solid var(--fe-green);
  background:transparent; color:var(--fe-green-darker);
  font-family:var(--fe-fb); font-size:.74rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  transition:background .3s var(--fe-ease), color .3s var(--fe-ease);
}
.fe-card__go{display:inline-block;transition:transform .3s var(--fe-ease)}
.is-offerta .fe-card:hover .fe-card__cta{background:var(--fe-green);color:#fff}
.is-offerta .fe-card:hover .fe-card__go{transform:translateX(4px)}
.fe-card__cta:focus-visible{outline:3px solid var(--fe-green);outline-offset:3px}
.fe-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

.fe-section:not(.is-light):not(.is-offerta) .fe-card__cta{
  border-color:var(--fe-lime); color:var(--fe-lime);
}
.fe-section:not(.is-light):not(.is-offerta) .fe-card:hover .fe-card__cta{
  background:var(--fe-lime); color:var(--fe-dark);
}

@media (max-width:619px){
  .is-offerta .fe-card__title{min-height:0}
  .is-offerta .fe-card__num{font-size:4.2rem}
  .fe-card__foot{flex-direction:column;align-items:stretch;gap:.85rem}
  .fe-card__cta{justify-content:center}
}

/* ==========================================================================
   SECONDA TORNATA — le sezioni che sembravano "buttate lì"
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. L'APERTURA CON LA FOTO TONDA
   Il problema non era grafico: era che una frase di trenta parole in corpo
   normale, accanto a una foto da 430 pixel, lascia mezzo schermo vuoto. La
   frase c'è ed è buona — va detta forte. Corpo da dichiarazione, non da
   paragrafo, e un filo verde che la ancora.
   -------------------------------------------------------------------------- */
.fe-split.is-intro{align-items:center;gap:clamp(2.2rem,1.6rem + 3vw,4.5rem)}
@media(min-width:920px){ .fe-split.is-intro{grid-template-columns:1.42fr .58fr} }
/* La colonna stretta faceva una poesia invece di una dichiarazione: righe da
   tre parole e otto capoversi. Larga, corta e su due voci — una frase forte e
   una di servizio — occupa la pagina invece di lasciarla vuota. */
.fe-split.is-intro .fe-prose{
  /* 48ch valeva 508px contro una colonna da 846: restavano 340px di vuoto in
     mezzo alla sezione. La misura di riga la fa gia' il corpo grande della
     dichiarazione, non serve un tetto in piu'. */
  max-width:none;
  /* .fe-prose centra sé stessa nella colonna: qui va invece appoggiata a
     sinistra, allineata al bordo del contenitore come tutto il resto della
     pagina. Centrata partiva a 255px e sembrava spostata a caso. */
  margin-left:0; margin-right:auto;
}
/* La sezione ha meno contenuto di prima: la spaziatura di sotto era tarata su
   un paragrafo lungo e lasciava una fascia vuota. */
.fe-section.is-tight:has(.fe-split.is-intro){
  padding-top:clamp(2.6rem,2rem + 2.4vw,4rem);
  padding-bottom:clamp(2.6rem,2rem + 2.4vw,4rem);
}
.fe-split.is-intro p{
  font-family:var(--fe-fh);
  /* Da 2,7rem a 2,15rem. A 2,7 una frase di tre righe diventava una colonna
     di quattro parole per riga alta mezzo schermo: il corpo da dichiarazione
     regge una frase breve, non un paragrafo. */
  font-size:clamp(1.4rem,1.05rem + 1.5vw,2.15rem);
  font-weight:600; line-height:1.2; letter-spacing:-.024em;
  color:inherit; margin:0 0 1.1rem;
}
.fe-split.is-intro p + p{
  font-family:var(--fe-fb); font-weight:400;
  font-size:clamp(1rem,.96rem + .3vw,1.1rem); line-height:1.7;
  opacity:.78; letter-spacing:0;
}
.fe-split.is-intro .fe-prose::before{
  content:""; display:block; width:56px; height:4px; border-radius:2px;
  background:var(--fe-green); margin:0 0 1.5rem;
}
.fe-split.is-intro .fe-meta{font-size:.78rem;opacity:.6;margin-bottom:.9rem}

/* --------------------------------------------------------------------------
   2. LA FASCIA FOTOGRAFICA
   Il pannello del testo era un riquadro stretto — 46 caratteri — appoggiato a
   un lato della foto e centrato in verticale, con il resto della fascia vuoto.
   Il cliente l'ha descritto per quello che era: sembrava buttato li'.

   Ora il pannello prende tutta la larghezza del contenuto e sta al centro
   della fascia, con lo stesso spazio sopra e sotto. Dentro, titolo e testo
   stanno su due colonne invece che incolonnati: la fascia si accorcia e la
   foto si vede di piu'.
   -------------------------------------------------------------------------- */
.fe-band{
  min-height:clamp(400px,54vh,600px);
  /* Appoggiato in basso e sbordante sembrava scivolato fuori posto: il
     pannello sta al centro della sua sezione. */
  align-items:center;
  /* le foto di paesaggio hanno il soggetto sotto la meta': il taglio centrato
     mostrava solo cielo. */
  background-position:50% 64%;
}
/* La velatura era piu' scura in basso perche' li' stava il pannello: ora che
   e' al centro, il centro e' la parte che va tenuta leggibile. */
.fe-band::before{
  background:
    linear-gradient(0deg, rgba(10,12,8,.44) 0%, rgba(10,12,8,.30) 50%, rgba(10,12,8,.44) 100%),
    linear-gradient(90deg, rgba(10,12,8,.30) 0%, rgba(10,12,8,.06) 60%, rgba(10,12,8,0) 100%);
}
.fe-band.is-right::before{
  background:
    linear-gradient(0deg, rgba(10,12,8,.44) 0%, rgba(10,12,8,.30) 50%, rgba(10,12,8,.44) 100%),
    linear-gradient(270deg, rgba(10,12,8,.30) 0%, rgba(10,12,8,.06) 60%, rgba(10,12,8,0) 100%);
}
.fe-band.is-right .fe-band__inner{display:block}   /* non serve piu' spingerlo a destra */
.fe-band__box{
  max-width:none;
  padding:clamp(1.5rem,1.2rem + 1.4vw,2.4rem) clamp(1.6rem,1.2rem + 1.6vw,2.8rem);
  border-radius:var(--fe-r);
  background:rgba(12,15,10,.58);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 26px 64px rgba(0,0,0,.38);
}
@media (min-width:900px){
  .fe-band__box{
    display:grid;
    grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr);
    column-gap:clamp(2rem,1.4rem + 2.4vw,3.6rem);
    align-items:center;
  }
  .fe-band__t{grid-column:1; grid-row:1 / -1; align-self:center}
  .fe-band__p, .fe-band .wp-block-buttons{grid-column:2}
}
/* Filo verde sopra al titolo: da' un appiglio al blocco. */
.fe-band__t::before{
  content:""; display:block; width:44px; height:4px; border-radius:2px;
  background:var(--fe-lime); margin-bottom:1rem;
}
.fe-band__t{text-transform:none;letter-spacing:-.028em}
.fe-band__p{margin-bottom:0;color:rgba(255,255,255,.9)}
/* Sotto i 760px il pannello prende tutta la larghezza e si centra: a metà
   schermo su un telefono sarebbe una colonna di sei parole. */
@media(max-width:759px){
  .fe-band__box{max-width:none}
  .fe-band.is-right .fe-band__inner{justify-content:stretch}
}

/* --------------------------------------------------------------------------
   3. I PUNTI NUMERATI: UN PERCORSO A ZIG-ZAG
   Il primo tentativo metteva i blocchi ai due lati di una linea centrale, con
   numeri e pallini posizionati in assoluto e sfalsati da margini negativi a
   cascata. In griglia quei margini non fanno quello che sembra: due blocchi
   finivano sulla stessa riga e numeri e pallini si accavallavano sulla linea.

   Rifatto senza posizionamenti assoluti e senza margini negativi. Ogni punto
   occupa una riga tutta sua — non possono sovrapporsi per costruzione — e
   l'alternanza si ottiene spostando il blocco a destra o a sinistra. Il
   numero sta dentro il blocco, dal lato del margine.
   -------------------------------------------------------------------------- */
.fe-points{
  display:grid; gap:clamp(.9rem,.7rem + .8vw,1.5rem);
  max-width:var(--fe-wide); margin-inline:auto;
}
.fe-point{
  display:grid; grid-template-columns:auto 1fr;
  gap:0 clamp(1rem,.8rem + 1vw,1.7rem);
  align-items:start;
  padding:clamp(1.1rem,.9rem + .8vw,1.7rem) clamp(1.2rem,1rem + 1vw,1.9rem);
  border:1px solid var(--fe-line); border-radius:var(--fe-r-sm);
  background:rgba(255,255,255,.035);
  transition:transform .4s var(--fe-ease), border-color .4s var(--fe-ease),
             background .4s var(--fe-ease);
}
.fe-section.is-light .fe-point,
.fe-section.is-offerta .fe-point{
  border-color:var(--fe-line-ink); background:rgba(255,255,255,.55);
}
.fe-point:hover{border-color:rgba(117,173,0,.42);background:rgba(117,173,0,.07)}

.fe-point__num{
  grid-row:1 / span 2; align-self:start;
  font-family:var(--fe-fa); font-variant-numeric:tabular-nums;
  font-size:clamp(1.9rem,1.5rem + 1.4vw,2.9rem); font-weight:700;
  line-height:.95; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:2px rgba(117,173,0,.6);
  transition:-webkit-text-stroke-color .4s var(--fe-ease);
}
.fe-point:hover .fe-point__num{-webkit-text-stroke-color:var(--fe-lime)}
.fe-section.is-light .fe-point:hover .fe-point__num,
.fe-section.is-offerta .fe-point:hover .fe-point__num{-webkit-text-stroke-color:var(--fe-green)}

.fe-point h3{
  font-family:var(--fe-fb); font-weight:600; margin:0 0 .4rem;
  font-size:clamp(1rem,.96rem + .3vw,1.14rem); line-height:1.3;
}
.fe-point p{margin:0;font-size:.94rem;line-height:1.7;color:rgba(255,255,255,.76)}
.fe-section.is-light .fe-point p,
.fe-section.is-offerta .fe-point p{color:var(--fe-gray-700)}

/* L'alternanza: sopra gli 880px i blocchi si stringono e si spostano ai lati,
   uno a sinistra e uno a destra. Il numero passa dall'altra parte insieme al
   blocco, così resta sempre sul bordo esterno. */
@media (min-width:880px){
  .fe-point{width:min(100%,72%)}
  .fe-point:nth-child(even){
    margin-left:auto; grid-template-columns:1fr auto; text-align:right;
  }
  .fe-point:nth-child(even) .fe-point__num{grid-column:2;grid-row:1 / span 2}
  .fe-point:nth-child(even) h3,
  .fe-point:nth-child(even) p{grid-column:1}
  .fe-point:hover{transform:translateX(4px)}
  .fe-point:nth-child(even):hover{transform:translateX(-4px)}
}

/* --------------------------------------------------------------------------
   4. LE PROSSIME TAPPE
   `.fe-next` non aveva CSS: le tessere cadevano una attaccata all'altra
   perché nessuno aveva mai definito la griglia. Ora tre colonne con aria
   vera, e quella centrale sfalsata verso il basso.
   -------------------------------------------------------------------------- */
.fe-next{
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.2rem,.9rem + 1.4vw,2.2rem);
  margin-top:clamp(2rem,1.5rem + 1.6vw,3rem);
}
@media (min-width:760px){ .fe-next{grid-template-columns:repeat(3,1fr)} }
@media (min-width:980px){
  .fe-next{gap:clamp(1.6rem,1.1rem + 2vw,2.8rem)}
  .fe-next > :nth-child(2){transform:translateY(clamp(1.4rem,1rem + 1.6vw,2.6rem))}
  .fe-next > :nth-child(2):hover{transform:translateY(clamp(1.4rem,1rem + 1.6vw,2.6rem)) translateY(-6px)}
}

/* --------------------------------------------------------------------------
   5. I BLOCCHI NUMERATI SMETTONO DI ESSERE UNA FILA
   `.fe-feats` metteva tre o quattro card affiancate, tutte uguali, tutte alla
   stessa altezza: la lista della spesa. Due per riga e sfalsate danno lo
   stesso contenuto con un ritmo — l'occhio scende a zig-zag invece di
   scorrere una riga piatta.
   -------------------------------------------------------------------------- */
.fe-feats{
  grid-template-columns:1fr;
  gap:clamp(1.1rem,.9rem + 1.2vw,1.9rem);
  max-width:var(--fe-wide); margin-inline:auto;
}
@media (min-width:820px){
  .fe-feats{grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,1rem + 1.6vw,2.4rem)}
  /* le pari scendono: è lo sfalsamento che toglie la sensazione di elenco */
  .fe-feats > :nth-child(even){transform:translateY(clamp(1.6rem,1.1rem + 2vw,3rem))}
  .fe-feats > :nth-child(even):hover{
    transform:translateY(clamp(1.6rem,1.1rem + 2vw,3rem)) translateY(-6px);
  }
  /* l'ultima riga dispari occupa tutta la larghezza invece di lasciare un buco */
  .fe-feats > :nth-child(odd):last-child{grid-column:1 / -1;max-width:none}
}
.fe-feat{padding:clamp(1.6rem,1.3rem + 1vw,2.3rem)}
/* Il numero diventa una cifra cava grande, come sulle card delle esperienze:
   è lo stesso linguaggio, e tiene insieme la pagina. */
.fe-feat__num{
  font-size:clamp(2.6rem,2rem + 2vw,3.8rem); line-height:.9;
  letter-spacing:-.05em; margin-bottom:.7rem;
  color:transparent; -webkit-text-stroke:2px rgba(117,173,0,.55);
  transition:-webkit-text-stroke-color .4s var(--fe-ease);
}
.fe-feat:hover .fe-feat__num{-webkit-text-stroke-color:var(--fe-lime)}
.fe-section.is-light .fe-feat:hover .fe-feat__num,
.fe-section.is-offerta .fe-feat:hover .fe-feat__num{-webkit-text-stroke-color:var(--fe-green)}
.fe-feat h3{font-size:clamp(1.06rem,1rem + .3vw,1.2rem);margin:0 0 .6rem}
.fe-feat p{font-size:.95rem;line-height:1.7}

/* --------------------------------------------------------------------------
   LA PIÙ RICHIESTA
   Una sola card la porta. Due fascette annullano il senso di entrambe, e tre
   lo rendono ridicolo. Il segnale è una pastiglia lime sull'immagine più un
   bordo appena più marcato: si vede al primo colpo d'occhio e non urla.
   -------------------------------------------------------------------------- */
.fe-card__top{
  position:absolute; z-index:3; top:.85rem; right:.85rem;
  padding:.38rem .8rem; border-radius:var(--fe-pill);
  background:var(--fe-lime); color:var(--fe-dark);
  font-family:var(--fe-fb); font-size:.63rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.is-offerta .fe-card.is-top{
  border-color:rgba(199,245,100,.55);
  box-shadow:0 18px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(199,245,100,.22);
}
.is-offerta .fe-card.is-top:hover{
  box-shadow:0 36px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(199,245,100,.4);
}
/* Il velo verde sulla foto si ritira già a riposo: la card segnalata mostra
   subito il colore, le altre lo scoprono al passaggio. */
.is-offerta .fe-card.is-top .fe-card__img::after{opacity:.35}
@media (max-width:400px){
  .fe-card__top{font-size:.58rem;letter-spacing:.1em;padding:.32rem .62rem}
}

/* --------------------------------------------------------------------------
   CARD BIANCHE SU SEZIONE SCURA
   La sezione offerta non porta più `is-light` — gliela toglie il convertitore
   perché `is-warm` vinceva sul suo fondo scuro. Conseguenza: le card, che
   restano bianche, ereditavano i colori pensati per il testo su fondo scuro.
   Il titolo usciva bianco su bianco, contrasto 1.

   Qui si dichiara esplicitamente che DENTRO le card si scrive in scuro,
   indipendentemente dal tono della sezione che le ospita.
   -------------------------------------------------------------------------- */
.fe-section.is-offerta .fe-card :is(h1,h2,h3,h4),
.fe-section.is-offerta .fe-card__title{color:var(--fe-ink)}
.fe-section.is-offerta .fe-card p{color:var(--fe-gray-700)}
.fe-section.is-offerta .fe-card__chips li{
  background:rgba(117,173,0,.12); border-color:rgba(117,173,0,.28);
  color:var(--fe-green-darker);
}
.fe-section.is-offerta .fe-card__foot{border-top-color:rgba(18,21,15,.1)}
.fe-section.is-offerta .fe-price{color:var(--fe-green-darker)}
.fe-section.is-offerta .fe-price__from{color:var(--fe-gray-500)}
.fe-section.is-offerta .fe-card__cta{
  border-color:var(--fe-green); color:var(--fe-green-darker); background:transparent;
}
.fe-section.is-offerta .fe-card:hover .fe-card__cta{background:var(--fe-green);color:#fff}

/* ==========================================================================
   I TRE IMPIANTI DELLA PROSA
   --------------------------------------------------------------------------
   Fino a undici sezioni di testo di fila, ognuna una colonna da 64 caratteri
   centrata dentro un contenitore da 1260: seicento pixel di testo e due fasce
   vuote da trecento ai lati, pagina dopo pagina. Da lì la sensazione di
   articolo di blog invece che di pagina.

   Tre impianti che ruotano, così nessuna pagina ripete due volte di fila la
   stessa forma. Cambia la struttura, non il contenuto — e la misura di
   lettura resta sempre nella fascia leggibile, fra 60 e 72 caratteri.
   ========================================================================== */
.fe-prosa{max-width:var(--fe-wide);margin-inline:auto}
.fe-prosa__c > :first-child{margin-top:0}
.fe-prosa__c > :last-child{margin-bottom:0}

/* --- 1. AFFIANCATA: titolo a sinistra, testo a destra --------------------
   È l'impianto che riempie la larghezza. Il titolo resta fermo mentre il
   testo scorre: chi legge sa sempre di cosa sta leggendo. */
.fe-prosa.is-affiancata{display:grid;gap:clamp(1.4rem,1rem + 2vw,3.2rem)}
@media (min-width:960px){
  /* La spalla si stringe e il testo si allarga. Prima erano .62fr contro 1fr
     con il testo fermo a 66ch: su un blocco da 1260px se ne usavano 680, il
     54%, e il resto restava bianco per tutta l'altezza della sezione. Una
     sezione mezza vuota non sembra ariosa, sembra incompleta. */
  .fe-prosa.is-affiancata{grid-template-columns:minmax(200px,.40fr) minmax(0,1fr)}
  .fe-prosa.is-affiancata .fe-prosa__t{
    position:sticky; top:110px; align-self:start;
    display:flex; flex-direction:column; gap:1.1rem;
  }
}
.fe-prosa.is-affiancata .fe-section-title{
  text-align:left;max-width:14ch;margin:0;
  font-size:clamp(1.8rem,1.2rem + 2.2vw,2.9rem);
}
/* Il numero della sezione, sceso qui dalla filigrana di sfondo. Contornato e
   non pieno: deve reggere la colonna senza competere con il titolo. */
.fe-prosa.is-affiancata .fe-prosa__n{
  font-family:var(--fe-fh); font-weight:700; line-height:.78;
  font-size:clamp(5rem,3rem + 7vw,10rem); letter-spacing:-.05em;
  /* Il contorno prende currentColor, quindi il pieno si toglie con
     text-fill-color e NON con `color:transparent`: quello rende trasparente
     anche il contorno, ed e' esattamente l'errore che aveva reso il numero
     invisibile la prima volta. */
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px currentColor;
  opacity:.20; margin-top:.35rem;
}
.fe-section.is-light .fe-prosa.is-affiancata .fe-prosa__n{opacity:.28}
@media (max-width:959px){
  /* In colonna singola il numero starebbe fra titolo e testo come un ostacolo. */
  .fe-prosa.is-affiancata .fe-prosa__n{display:none}
}
.fe-prosa.is-affiancata .fe-prosa__c{max-width:74ch;font-size:1.03rem;line-height:1.8}

/* --- 2. COLONNE: testo su due colonne da giornale ------------------------
   Per i blocchi lunghi e fattuali. Due colonne da 34 caratteri leggono più in
   fretta di una da 68, ed è così che sono fatti i giornali da due secoli. */
.fe-prosa.is-colonne .fe-prosa__c{max-width:min(100%,1080px);margin-inline:auto}
@media (min-width:900px){
  .fe-prosa.is-colonne .fe-prosa__c{
    column-count:2; column-gap:clamp(2rem,1.4rem + 2.4vw,4rem);
    column-rule:1px solid var(--fe-line);
  }
  .fe-section.is-light .fe-prosa.is-colonne .fe-prosa__c,
  .fe-section.is-offerta .fe-prosa.is-colonne .fe-prosa__c{column-rule-color:var(--fe-line-ink)}
  /* Titoli, citazioni e riquadri non si spezzano fra una colonna e l'altra. */
  .fe-prosa.is-colonne :is(h3,h4,.fe-pull,.fe-callout,figure,ul,.wp-block-buttons){
    break-inside:avoid; column-span:none;
  }
  .fe-prosa.is-colonne .fe-pull{column-span:all;max-width:none}
}

/* --- 3. PANNELLO: il testo dentro un riquadro di tono diverso ------------
   Serve a spezzare: dopo due sezioni piane, una che ha un fondo suo si stacca
   e dà un appiglio all'occhio. */
.fe-prosa.is-pannello .fe-prosa__c{
  /* Da 860 a 960: a 860 il pannello usava il 68% del blocco e i due margini
     laterali da 200px facevano sembrare la sezione mezza vuota. Centrato con
     margini piu' stretti resta una scelta di respiro, non un buco. */
  max-width:min(100%,960px); margin-inline:auto;
  padding:clamp(1.6rem,1.2rem + 2vw,3.2rem);
  border-radius:var(--fe-r);
  background:rgba(255,255,255,.045);
  border:1px solid var(--fe-line);
  font-size:1.03rem; line-height:1.8;
}
.fe-section.is-light .fe-prosa.is-pannello .fe-prosa__c,
.fe-section.is-offerta .fe-prosa.is-pannello .fe-prosa__c{
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  border-color:var(--fe-line-ink);
  box-shadow:0 10px 40px rgba(18,21,15,.06);
}
/* Filo verde a sinistra: dice che è un blocco, non un capitolo. */
.fe-prosa.is-pannello .fe-prosa__c{border-left:3px solid var(--fe-green)}

/* --- 4. SOVRAPPOSTA: la scheda scavalca la foto tonda ---------------------
   Il motivo recuperato dal sito vecchio (vedi VISUAL-MOTIF-INVENTORY.md).
   Il nuovo sito era fatto di rettangoli impilati: ogni sezione cominciava dove
   finiva la precedente, ogni foto stava dentro il suo contenitore. Ordinato, e
   piatto nel senso letterale — non c'era mai un piano davanti a un altro.

   Qui la scheda entra sopra la foto per un decimo della larghezza e comincia
   piu' in basso del cerchio. Sono i due scarti insieme a fare la profondita':
   solo quello orizzontale darebbe una tabella a due colonne mal allineata. */
.fe-prosa.is-sovrapposta{display:grid;gap:clamp(1.2rem,1rem + 1.5vw,2rem)}
/* Il minimo automatico di un elemento di griglia e' la sua larghezza
   min-content, non zero. Con dentro una tabella — che ha min-width 30rem — la
   colonna di testo diventava piu' larga della griglia che la contiene: su
   telefono l'ultima colonna della tabella finiva fuori schermo e veniva
   tagliata invece di scorrere, perche' a scorrere era il contenitore
   sbagliato. Vale per tutti gli impianti di prosa, non solo per quello
   sovrapposto: sono griglie anche loro. */
.fe-prosa > *{min-width:0}
.fe-prosa.is-sovrapposta .fe-prosa__f{
  aspect-ratio:1; border-radius:50%; overflow:hidden;
  width:min(100%,460px); justify-self:center;
}
.fe-prosa.is-sovrapposta .fe-prosa__f img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.fe-prosa.is-sovrapposta .fe-prosa__c{
  padding:clamp(1.5rem,1.2rem + 1.8vw,2.8rem);
  border-radius:var(--fe-r);
  /* Tinta piena, non un velo. Gli altri pannelli usano rgba(255,255,255,.055)
     perche' sotto hanno il fondo della sezione; questo sta sopra una
     fotografia, e con un velo si vedeva il bordo del cerchio attraversare la
     scheda — che legge come un errore, non come trasparenza voluta. */
  background:#20251B;
  border:1px solid var(--fe-line);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  font-size:1.02rem; line-height:1.8;
}
.fe-section.is-light .fe-prosa.is-sovrapposta .fe-prosa__c,
.fe-section.is-offerta .fe-prosa.is-sovrapposta .fe-prosa__c{
  background:#fff; border-color:var(--fe-line-ink);
  box-shadow:0 18px 50px rgba(18,21,15,.10);
}
.fe-prosa.is-sovrapposta .fe-section-title{
  text-align:left; margin:0 0 1rem; max-width:18ch;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem);
}
@media (min-width:980px){
  /* Dodici colonne, e le due aree ne condividono due.
     Il primo tentativo affidava la sovrapposizione a un margine negativo in
     percentuale: ma la percentuale si calcola sulla colonna, e la foto —
     allineata al bordo esterno con justify-self — si allontanava esattamente
     di quanto il margine avvicinava la scheda. Restava un vuoto invece di una
     sovrapposizione. Con le colonne esplicite l'incastro e' garantito
     qualunque sia la larghezza. */
  .fe-prosa.is-sovrapposta{
    grid-template-columns:repeat(12,1fr);
    align-items:start;
  }
  .fe-prosa.is-sovrapposta .fe-prosa__f{
    grid-column:1 / 7; grid-row:1;
    justify-self:start; width:100%; max-width:560px;
  }
  .fe-prosa.is-sovrapposta .fe-prosa__c{
    grid-column:5 / 13; grid-row:1; z-index:2;
    margin-top:clamp(2.5rem,5vw,5.5rem);
  }
  /* La scheda e' larga perche' deve arrivare sopra la foto, ma la riga di
     lettura no: senza questo limite si arrivava a ottanta caratteri per riga,
     che e' il doppio di quanto regga un paragrafo. */
  .fe-prosa.is-sovrapposta .fe-prosa__c :is(p,ul,ol,blockquote){max-width:62ch}
  /* A specchio, cosi' due pagine vicine non ripetono lo stesso verso. */
  .fe-prosa.is-sovrapposta.is-rovescio .fe-prosa__f{
    grid-column:7 / 13; justify-self:end;
  }
  .fe-prosa.is-sovrapposta.is-rovescio .fe-prosa__c{grid-column:1 / 9}
}
/* Sotto i 980px la sovrapposizione coprirebbe il testo: foto sopra, scheda
   sotto, nessuno scarto. */

/* --- Comune ai tre -------------------------------------------------------- */
.fe-prosa__c :is(h3,h4){
  margin:1.9rem 0 .6rem; color:inherit;
  font-size:clamp(1.04rem,1rem + .3vw,1.2rem);
}
.fe-prosa__c > :is(h3,h4):first-child{margin-top:0}
.fe-prosa__c p{margin:0 0 1.05rem}

/* La parola in filigrana passa a sinistra quando l'anello decorativo occupa
   l'angolo destro: sovrapposti erano due macchie sulla stessa zona, ed e'
   proprio quello che il cliente ha segnalato. */
.fe-section.ghost-left .fe-ghost{right:auto;left:-2%}

/* ==========================================================================
   SCHEDE PERSONA
   --------------------------------------------------------------------------
   Prima erano tre sezioni di prosa separate: lunghezze diverse (254 parole
   contro 129 e 122) e, con la rotazione degli impianti, anche tre forme
   diverse. Tre persone presentate con tre pesi diversi sembrano tre
   importanze diverse, che non è il caso.

   Tre schede affiancate, stessa struttura e stessa altezza per costruzione:
   la foto ha proporzione fissa e il contenuto è una griglia in cui la riga
   del riferimento e quella del link stanno sempre in fondo.
   ========================================================================== */
/* --- RITRATTI: i tre volti sulla home ------------------------------------
   Non sono le schede persona di Chi siamo. Li' servono struttura e testo, qui
   servono tre facce e un nome: il master, proprio su questa sezione, dice di
   evitare «tre semplici card identiche». Lo sfalsamento verticale e' quello
   che le tiene fuori dalla griglia — e' l'unico motivo per cui non sembrano
   tre bottoni. */
.fe-ritratti{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(1.2rem,.9rem + 1.6vw,2.6rem);
  /* margin-block e non la scorciatoia `margin`: quella azzerava i margini
     laterali automatici che `.fe-section > *` usa per centrare il blocco, e su
     schermi larghi i ritratti finivano appoggiati a sinistra mentre il titolo
     restava al centro. E' lo stesso errore della scorciatoia `background` che
     azzerava il colore di ripiego. */
  margin-block:clamp(1.8rem,1.4rem + 1.4vw,2.8rem) clamp(1.8rem,1.4rem + 1.4vw,3rem);
}
.fe-ritratto{margin:0; text-align:center; flex:0 0 auto; width:clamp(148px,19vw,236px)}
.fe-ritratto__f{
  display:block; width:100%; aspect-ratio:1;
  border-radius:var(--fe-r); overflow:hidden;
  border:1px solid var(--fe-line-ink);
  box-shadow:0 16px 40px rgba(18,21,15,.16), 0 3px 10px rgba(18,21,15,.10);
  transition:transform .42s var(--fe-ease), box-shadow .42s var(--fe-ease);
}
.fe-section:not(.is-light) .fe-ritratto__f{
  border-color:var(--fe-line);
  box-shadow:0 18px 46px rgba(0,0,0,.42), 0 3px 10px rgba(0,0,0,.30);
}
.fe-ritratto:hover .fe-ritratto__f{
  transform:translateY(-4px);
  box-shadow:0 24px 54px rgba(18,21,15,.22), 0 4px 12px rgba(18,21,15,.12);
}
.fe-ritratto__f img{
  width:100%; height:100%; object-fit:cover; object-position:center 26%; display:block;
}
.fe-ritratto figcaption{display:block; margin-top:.85rem; line-height:1.35}
.fe-ritratto figcaption b{display:block; font-weight:600; font-size:1rem}
.fe-ritratto figcaption span{
  display:block; margin-top:.2rem; font-size:.85rem; opacity:.72;
}

.fe-persone{
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.2rem,.9rem + 1.4vw,2.1rem);
  max-width:var(--fe-wide); margin:clamp(2rem,1.5rem + 1.6vw,3rem) auto 0;
}
@media (min-width:800px){ .fe-persone{grid-template-columns:repeat(3,1fr)} }

.fe-persona{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.045);
  border:1px solid var(--fe-line);
  border-radius:var(--fe-r); overflow:hidden;
  transition:transform .42s var(--fe-ease), border-color .42s var(--fe-ease),
             box-shadow .42s var(--fe-ease);
}
.fe-section.is-light .fe-persona,
.fe-section.is-offerta .fe-persona{
  background:var(--fe-white); border-color:var(--fe-line-ink);
  box-shadow:0 10px 34px rgba(18,21,15,.07);
}
.fe-persona:hover{
  transform:translateY(-6px); border-color:rgba(117,173,0,.42);
  box-shadow:0 28px 62px rgba(0,0,0,.3);
}

/* Proporzione fissa: è ciò che tiene le tre foto alla stessa altezza anche se
   gli originali sono uno verticale e uno orizzontale. */
.fe-persona__f{position:relative;aspect-ratio:4/3;overflow:hidden;flex:0 0 auto}
.fe-persona__f img{
  width:100%; height:100%; object-fit:cover; object-position:center 28%;
  display:block; transition:transform .9s var(--fe-ease);
}
.fe-persona:hover .fe-persona__f img{transform:scale(1.05)}

/* Il monogramma sta al posto della foto quando la foto non c'è. Mettere sotto
   un nome la fotografia di un'altra persona è un errore che non si rimedia:
   meglio un segno dichiaratamente astratto. */
.fe-persona__f.is-vuota{
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(117,173,0,.22), rgba(117,173,0,.06));
}
.fe-persona__f.is-vuota span{
  font-family:var(--fe-fa); font-size:3.2rem; font-weight:700;
  letter-spacing:-.04em; color:transparent;
  -webkit-text-stroke:2px rgba(117,173,0,.7);
}

.fe-persona__c{
  padding:clamp(1.2rem,1rem + .8vw,1.7rem);
  display:flex; flex-direction:column; flex:1; gap:0;
}
.fe-persona__c h3{
  font-family:var(--fe-fh); font-weight:600;
  font-size:clamp(1.1rem,1.02rem + .35vw,1.28rem);
  letter-spacing:-.02em; margin:0 0 .7rem;
}
/* Il primo paragrafo è il ruolo: sta su due righe fisse, così i tre testi
   partono tutti dalla stessa quota. */
.fe-persona__c p:first-of-type{
  font-weight:600; font-size:.9rem; line-height:1.45;
  color:var(--fe-green); margin:0 0 .9rem; min-height:2.9em;
}
.fe-section.is-light .fe-persona__c p:first-of-type,
.fe-section.is-offerta .fe-persona__c p:first-of-type{color:var(--fe-green-darker)}
.fe-persona__c p{margin:0 0 .8rem;font-size:.92rem;line-height:1.68}
/* L'ultima riga — il link — si incolla in fondo: le tre schede finiscono
   allineate anche se un testo è di due parole più corto. */
.fe-persona__c p:last-child{margin:auto 0 0;padding-top:.9rem}
.fe-persona__c em{font-style:normal}
.fe-persona__c a{font-weight:600}

/* ==========================================================================
   IL MODULO CONTATTI
   Stessa classe nell'anteprima statica e nel form di Contact Form 7: il
   markup lo genera un posto solo (blocks/_anteprima/converti.py, CAMPI), e
   fe-seo/moduli/ ne riporta la versione con i tag CF7 dentro.

   Le scelte multiple sono pastiglie e non pallini: su un telefono un radio da
   13px si sbaglia, un'etichetta intera no. E sono le stesse pastiglie dei tag
   sulle schede esperienza, quindi il modulo non sembra un pezzo di un altro
   sito incollato in fondo.
   ========================================================================== */
.fe-modulo{
  display:grid; gap:clamp(1.1rem,.9rem + .6vw,1.5rem);
  max-width:760px; margin:0 auto;
}
@media (min-width:720px){
  .fe-modulo{grid-template-columns:1fr 1fr}
  .fe-campo--select,.fe-campo--radio,.fe-campo--checkbox,.fe-campo--textarea,
  .fe-campo--consenso,.fe-modulo__invio,.fe-modulo__demo{grid-column:1 / -1}
}
.fe-campo{display:flex; flex-direction:column; gap:.45rem; min-width:0}
.fe-campo > label,.fe-campo legend{
  font-weight:600; font-size:.95rem; color:var(--fe-ink); padding:0;
}
.fe-campo abbr{color:var(--fe-green-dark); text-decoration:none; font-weight:700}
.fe-campo small{font-size:.85rem; opacity:.7}
.fe-campo fieldset{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem}

.fe-modulo :is(input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea){
  font:inherit; font-size:1rem; color:var(--fe-ink);
  padding:.78rem .95rem;
  background:var(--fe-white); border:1px solid var(--fe-line-ink);
  border-radius:var(--fe-r-sm);
  transition:border-color .18s, box-shadow .18s;
}
.fe-modulo :is(input,select,textarea):focus-visible{
  outline:none; border-color:var(--fe-green);
  box-shadow:0 0 0 3px rgba(117,173,0,.22);
}
.fe-modulo textarea{resize:vertical; min-height:7.5rem; line-height:1.6}
.fe-modulo select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2312150F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:10px;
  padding-right:2.6rem;
}

/* Scelte a pastiglia */
.fe-scelte{display:flex; flex-wrap:wrap; gap:.5rem}
.fe-scelte label{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; cursor:pointer;
  background:var(--fe-white); border:1px solid var(--fe-line-ink);
  border-radius:var(--fe-pill); font-size:.94rem;
  transition:border-color .18s, background .18s;
}
.fe-scelte label:hover{border-color:var(--fe-green)}
.fe-scelte input{accent-color:var(--fe-green); margin:0}
.fe-scelte label:has(input:checked){
  border-color:var(--fe-green); background:rgba(117,173,0,.10); font-weight:600;
}
.fe-scelte label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(117,173,0,.22)}

/* Consenso e antispam */
.fe-campo--consenso label{
  display:flex; gap:.65rem; align-items:flex-start;
  font-weight:400; font-size:.95rem; line-height:1.55; cursor:pointer;
}
.fe-campo--consenso input{margin-top:.25rem; accent-color:var(--fe-green); flex:0 0 auto}
.fe-campo--consenso a{color:var(--fe-green-dark); text-decoration:underline}
.fe-campo--antispam input{max-width:8rem}

.fe-modulo__invio{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:.4rem}
.fe-modulo__btn{
  font:inherit; font-weight:700; letter-spacing:.02em;
  padding:.95rem 2rem; cursor:pointer;
  color:var(--fe-white); background:var(--fe-green);
  border:1px solid var(--fe-green); border-radius:var(--fe-pill);
  transition:background .18s, transform .18s;
}
.fe-modulo__btn:hover{background:var(--fe-green-dark)}
.fe-modulo__btn:active{transform:translateY(1px)}
.fe-modulo__nota{margin:0; font-size:.92rem; opacity:.78; max-width:34ch}
.fe-modulo__nota a{color:var(--fe-green-dark)}
.fe-modulo__demo{
  margin:0; padding:.7rem .95rem; font-size:.88rem;
  background:rgba(241,67,7,.07); border-left:3px solid var(--fe-orange);
  border-radius:var(--fe-r-sm);
}

/* Gli esiti di Contact Form 7, vestiti come il resto */
.wpcf7 form .wpcf7-response-output{
  margin:1.2rem 0 0; padding:.9rem 1.1rem; border-radius:var(--fe-r-sm);
  border:1px solid var(--fe-line-ink); font-size:.95rem;
}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--fe-green); background:rgba(117,173,0,.10);
}
.wpcf7 form:is(.invalid,.unaccepted,.failed,.aborted) .wpcf7-response-output{
  border-color:var(--fe-orange); background:rgba(241,67,7,.08);
}
.wpcf7-not-valid-tip{color:var(--fe-orange); font-size:.88rem; margin-top:.3rem}
.fe-modulo .wpcf7-spinner{margin:0 0 0 .6rem}

/* ==========================================================================
   LA SCHEDA — voci e valori, non una tabella
   Sostituisce le tabelle a due colonne con intestazione vuota: durata,
   impegno, specie, prezzo. Non c'e' niente da confrontare fra le righe,
   quindi non serve una tabella — serve un elenco che si legga a colpo
   d'occhio e stia in meta' spazio.
   ========================================================================== */
.fe-scheda{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  margin:clamp(1.6rem,1.2rem + 1.4vw,2.4rem) auto;
  max-width:var(--fe-wide);
  background:var(--fe-line);
  border:1px solid var(--fe-line);
  border-radius:var(--fe-r); overflow:hidden;
}
.fe-section.is-light .fe-scheda{background:var(--fe-line-ink); border-color:var(--fe-line-ink)}
@media (min-width:640px){ .fe-scheda{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .fe-scheda{grid-template-columns:repeat(3,1fr)} }
.fe-scheda__v{
  display:flex; flex-direction:column; gap:.4rem;
  padding:clamp(1.1rem,.9rem + .7vw,1.5rem);
  background:var(--fe-dark-2);
}
.fe-section.is-light .fe-scheda__v{background:var(--fe-white)}
.fe-scheda dt{
  font-family:var(--fe-fb); font-size:.68rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fe-green);
}
.fe-section:not(.is-light) .fe-scheda dt{color:var(--fe-lime)}
.fe-scheda dd{margin:0; font-size:1.02rem; line-height:1.5}
/* La voce con il prezzo pesa come un prezzo. */
.fe-scheda__v:has(dd strong){font-weight:inherit}
.fe-scheda dd strong{font-family:var(--fe-fh); font-size:1.28rem; letter-spacing:-.02em}

/* ==========================================================================
   L'ARTICOLO
   Un pezzo dell'archivio non e' una pagina di servizio. Niente apertura alta
   uno schermo, niente sezioni alternate, niente numeri in filigrana: testata
   compatta, foto, e una colonna sola da leggere dall'inizio alla fine.
   ========================================================================== */
.fe-sez-post{padding-top:clamp(1.6rem,1.2rem + 1.6vw,2.8rem)}
.fe-post{margin:0 auto}

/* --- testata --- */
.fe-post__testa{max-width:820px;margin:0 auto clamp(1.8rem,1.4rem + 1.6vw,2.8rem)}
.fe-post__cat{
  display:inline-block; margin:0 0 1rem; padding:.32rem .7rem;
  border-radius:999px; background:var(--fe-green); color:#fff;
  font-family:var(--fe-fb); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.fe-post__titolo{
  font-family:var(--fe-fh); font-weight:800; letter-spacing:-.03em; line-height:1.06;
  font-size:clamp(1.95rem,1.4rem + 2.6vw,3.4rem);
  margin:0 0 1rem; color:var(--fe-gray-900,#14170F); text-transform:none;
}
.fe-post__meta{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;
  margin:0; font-size:.88rem; color:var(--fe-gray-600,#5B6152);
}
.fe-post__meta span{opacity:.45}

/* --- foto in evidenza --- */
.fe-post__foto{margin:0 0 clamp(2rem,1.5rem + 2vw,3.2rem)}
.fe-post__foto img{
  display:block; width:100%; height:auto; border-radius:var(--fe-r);
  box-shadow:0 22px 54px rgba(0,0,0,.16);
}
.fe-post__foto figcaption{
  margin-top:.7rem; font-size:.82rem; color:var(--fe-gray-600,#5B6152);
}

/* --- il corpo: una colonna, misura da lettura --- */
.fe-post__corpo{max-width:720px;margin:0 auto}
.fe-post__corpo > *{max-width:100%}
.fe-post__lead{
  font-family:var(--fe-fb); font-size:clamp(1.1rem,1.02rem + .45vw,1.28rem);
  line-height:1.66; color:var(--fe-gray-800,#2A2F22); margin:0 0 1.3rem;
}
.fe-post__corpo p{font-size:1.02rem;line-height:1.78;margin:0 0 1.25rem;color:var(--fe-gray-700)}
.fe-post__corpo h2{
  font-family:var(--fe-fh); font-weight:700; text-transform:none;
  font-size:clamp(1.35rem,1.15rem + .9vw,1.78rem); letter-spacing:-.022em;
  line-height:1.2; margin:2.6rem 0 .9rem; color:var(--fe-gray-900,#14170F);
}
.fe-post__corpo h3{
  font-family:var(--fe-fh); font-weight:700; text-transform:none;
  font-size:clamp(1.08rem,1rem + .45vw,1.28rem); letter-spacing:-.014em;
  margin:1.9rem 0 .6rem; color:var(--fe-gray-900,#14170F);
}
.fe-post__corpo ul{margin:0 0 1.4rem;padding-left:1.15rem}
.fe-post__corpo li{margin-bottom:.55rem;line-height:1.7;color:var(--fe-gray-700)}
.fe-post__corpo a{color:var(--fe-green-dark,#5C8701);text-underline-offset:.18em}
/* Le tabelle in un articolo scorrono da sole invece di stringere la colonna. */
.fe-post__corpo .fe-tablewrap,
.fe-post__corpo .wp-block-table{overflow-x:auto;margin:0 0 1.6rem}
.fe-post__corpo table{font-size:.94rem}

/* --- rimando alla pagina pilastro --- */
.fe-post__pilastro{margin:0 0 1.8rem;font-size:.95rem}
.fe-post__pilastro a{
  font-weight:700; color:var(--fe-green-dark,#5C8701); text-decoration:none;
  border-bottom:2px solid rgba(117,173,0,.35); padding-bottom:.1rem;
}
.fe-post__pilastro a::after{content:" →"}
.fe-post__pilastro a:hover{border-bottom-color:var(--fe-green)}

/* --- «In breve»: i punti che restano se leggi solo quelli --- */
.fe-post__breve{
  margin:0 0 2.2rem; padding:clamp(1.2rem,1rem + .8vw,1.7rem);
  border-radius:var(--fe-r); background:rgba(117,173,0,.08);
  border-left:4px solid var(--fe-green);
}
.fe-post__breve h2{
  margin:0 0 .8rem; font-family:var(--fe-fb); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fe-green-dark,#5C8701);
}
.fe-post__breve ul{margin:0;padding-left:1.1rem}
.fe-post__breve li{margin-bottom:.5rem;line-height:1.62;font-size:.98rem;color:var(--fe-gray-800,#2A2F22)}
.fe-post__breve li:last-child{margin-bottom:0}

/* --- le fonti: dichiarate, con il nome del documento --- */
.fe-post__fonti{
  margin:2.8rem 0 0; padding-top:1.6rem; border-top:1px solid rgba(20,23,15,.14);
}
.fe-post__fonti h2{
  margin:0 0 .8rem; font-family:var(--fe-fb); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fe-gray-600,#5B6152);
}
.fe-post__fonti ul{margin:0;padding-left:1.1rem}
.fe-post__fonti li{margin-bottom:.5rem;font-size:.9rem;line-height:1.6;color:var(--fe-gray-600,#5B6152)}

/* --- la firma --- */
.fe-post__firma{
  margin:1.8rem 0 0; padding:1.1rem 1.3rem; border-radius:var(--fe-r);
  background:rgba(20,23,15,.04);
}
.fe-post__firma p{margin:0;font-size:.9rem;line-height:1.6;color:var(--fe-gray-700)}

/* --- la chiamata finale, piccola ---
   Il riquadro e' scuro dentro una sezione chiara: titolo, testo e pulsanti
   vanno ridichiarati, se no ereditano i colori del corpo dell'articolo e
   restano scuri su scuro. */
.fe-post__corpo .fe-post__cta{
  margin:2.6rem 0 0; padding:clamp(1.4rem,1.1rem + 1.2vw,2.2rem);
  border-radius:var(--fe-r); background:var(--fe-dark);
}
.fe-post__corpo .fe-post__cta :is(h2,h3){
  margin:0 0 .6rem; color:var(--fe-white,#fff); text-transform:none;
  font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem); letter-spacing:-.02em;
}
.fe-post__corpo .fe-post__cta p{color:rgba(255,255,255,.82);margin:0 0 1.2rem;font-size:.98rem}
.fe-post__corpo .fe-post__cta p:last-child{margin-bottom:0}
.fe-post__corpo .fe-post__cta a{color:var(--fe-lime,#C7F564)}
.fe-post__corpo .fe-post__cta .wp-block-buttons{margin:0 0 1.2rem}
.fe-post__corpo .fe-post__cta .fe-btn .wp-block-button__link{
  color:var(--fe-white,#fff); border-color:rgba(255,255,255,.55); background:transparent;
}
.fe-post__corpo .fe-post__cta .fe-btn .wp-block-button__link:hover{
  background:var(--fe-white,#fff); color:var(--fe-ink,#14170F); border-color:var(--fe-white,#fff);
}
.fe-post__corpo .fe-post__cta .fe-btn.is-solid .wp-block-button__link{
  background:var(--fe-green); border-color:var(--fe-green); color:#fff;
}
.fe-post__corpo .fe-post__cta .fe-btn.is-solid .wp-block-button__link:hover{
  background:var(--fe-lime,#C7F564); border-color:var(--fe-lime,#C7F564); color:var(--fe-ink,#14170F);
}

@media(max-width:600px){
  .fe-post__meta{font-size:.82rem;gap:.4rem}
  .fe-post__foto img{border-radius:calc(var(--fe-r) * .7)}
}

/* ==========================================================================
   TABELLE SU TELEFONO
   Sotto i 640px la tabella smette di essere una griglia e diventa un elenco
   di schede: ogni riga un blocco, ogni cella «etichetta / valore». Prima
   scorreva in orizzontale, ma nessuno se ne accorgeva: si vedevano due
   colonne su quattro e la terza — quella con il numero che serve — non
   esisteva per chi legge dal telefono.
   ========================================================================== */
@media(max-width:640px){
  .fe-table,.fe-table.is-prices{overflow:visible;background:none;border:0;box-shadow:none;padding:0}
  /* `min-width:30rem` serviva a tenere leggibile la griglia: qui la griglia
     non c'e' piu', e quel minimo spingeva le schede fuori dallo schermo. */
  .fe-table table{display:block;width:100%;min-width:0;border-collapse:separate;border-spacing:0}
  /* L'intestazione sparisce dalla vista ma resta agli assistenti vocali:
     le etichette tornano cella per cella. */
  .fe-table thead{
    display:block;   /* un table-header-group non si posiziona: senza questo
                        le celle restano nel flusso e sporgono dallo schermo */
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .fe-table tbody{display:block}
  .fe-table tbody tr{
    display:block;margin:0 0 .85rem;padding:.9rem 1rem;
    border-radius:calc(var(--fe-r) * .6);
    background:var(--fe-white,#fff);
    border:1px solid rgba(20,23,15,.10);
    box-shadow:0 6px 18px rgba(0,0,0,.05);
  }
  .fe-table tbody tr:last-child{margin-bottom:0}
  .fe-table tbody td{
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    padding:.42rem 0;border:0;text-align:right;
  }
  .fe-table tbody td + td{border-top:1px solid rgba(20,23,15,.07)}
  .fe-table tbody td::before{
    content:attr(data-label);
    flex:0 0 auto;max-width:48%;text-align:left;
    font-family:var(--fe-fb);font-size:.68rem;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;
    color:var(--fe-gray-600,#5B6152);
  }
  /* Una cella fa da titolo della scheda — la colonna che distingue le righe,
     scelta dal generatore. Sopra, grande, senza etichetta. */
  .fe-table tbody td[data-titolo]{
    display:block;text-align:left;padding:0 0 .55rem;order:-1;
    font-family:var(--fe-fh);font-weight:700;font-size:1.02rem;
    color:var(--fe-gray-900,#14170F);border-top:0;
  }
  .fe-table tbody td[data-titolo]::before{display:none}
  .fe-table tbody tr{display:flex;flex-direction:column}
  .fe-table tbody td:first-child{border-top:0}
  .fe-table tbody td[data-titolo] + td{border-top:1px solid rgba(20,23,15,.07)}
  /* Nelle sezioni scure la scheda si scurisce con loro. */
  .fe-section:not(.is-light):not(.is-warm):not(.is-pietra):not(.is-acqua) .fe-table tbody tr{
    background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none;
  }
  .fe-section:not(.is-light):not(.is-warm):not(.is-pietra):not(.is-acqua) .fe-table tbody td{
    color:rgba(255,255,255,.9);
  }
  .fe-section:not(.is-light):not(.is-warm):not(.is-pietra):not(.is-acqua) .fe-table tbody td:first-child{
    color:#fff;
  }
  .fe-section:not(.is-light):not(.is-warm):not(.is-pietra):not(.is-acqua) .fe-table tbody td::before{
    color:rgba(255,255,255,.6);
  }
  .fe-section:not(.is-light):not(.is-warm):not(.is-pietra):not(.is-acqua) .fe-table tbody td + td{
    border-top-color:rgba(255,255,255,.1);
  }
}