/* ═══════════════════════════════════════════════════════════════════════════
   ADO Legal — wow-round.css  ·  Release ?v=20260607a
   ───────────────────────────────────────────────────────────────────────────
   Layer "wow" top-tier, sovrapposto a visual-round2.css (R2 + R2.1).
   Caricato DOPO visual-round2.css per cascade.

   Filosofia: emozionante ma mai rumoroso. Boutique legal cinematografico,
   sobrio, internazionale. L'oro è una luce, non un riempimento.

   Sezioni:
     §W1  Hero overlay stratificato (oro + petrolio) + texture griglia
     §W2  Hero entrance animation (CSS only, no-CLS, prefers-reduced-motion)
     §W3  Card wow — luce diagonale che attraversa
     §W4  CTA wow — micro-luce che scorre + bordo oro
     §W5  Sezioni con ritmo cromatico — gradienti sottilissimi
     §W6  Pattern archivio legale — griglia editoriale leggerissima
     §W7  Footer — separatore oro tenue + micro-pattern
     §W8  Lawyer photo — cornice oro + profondità su hover
     §W9  Mobile — riduzione effetti
     §W10 Reduced motion — blanket
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §W1  HERO OVERLAY STRATIFICATO (oro + petrolio) + texture griglia
   ───────────────────────────────────────────────────────────────────────────
   Sovrascrive il background dell'overlay R2 (.editorial-hero-bg::after) con
   uno stack più ricco: radial oro alto-dx + radial petrolio basso-sx +
   gradient orizzontale + gradient verticale. Stessa specificità di R2 +
   selettore figlio diretto → vince per cascade order (file caricato dopo).
   ═══════════════════════════════════════════════════════════════════════════ */

.editorial-hero,
.page-header-outer {
  isolation: isolate;
}

/* Hero con video: overlay wow stratificato a 4 strati */
.editorial-hero.has-video > .editorial-hero-bg::after,
.page-header-outer.has-video > .editorial-hero-bg::after {
  background:
    radial-gradient(circle at 78% 30%, rgba(201, 164, 92, 0.16), transparent 34%),
    radial-gradient(circle at 12% 85%, rgba(21, 45, 39, 0.22), transparent 42%),
    linear-gradient(90deg, rgba(10, 8, 6, 0.86) 0%, rgba(10, 8, 6, 0.62) 45%, rgba(10, 8, 6, 0.76) 100%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.08) 0%, rgba(10, 8, 6, 0.76) 100%);
}

/* Texture griglia editoriale leggerissima sul lato destro hero */
.editorial-hero.has-video > .editorial-hero-bg::before,
.page-header-outer.has-video > .editorial-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, rgba(0, 0, 0, 0.65) 80%);
          mask-image: linear-gradient(90deg, transparent 35%, rgba(0, 0, 0, 0.65) 80%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

/* Mobile: disabilita texture griglia (sez 14 brief — mobile pulito) */
@media (max-width: 700px) {
  .editorial-hero.has-video > .editorial-hero-bg::before,
  .page-header-outer.has-video > .editorial-hero-bg::before {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §W2  HERO ENTRANCE ANIMATION — CSS only, fail-safe, no-CLS
   ───────────────────────────────────────────────────────────────────────────
   - animation-fill-mode:both garantisce stato finale visibile anche se
     l'animazione non parte (no flash invisibile)
   - Solo se prefers-reduced-motion:no-preference esplicito
   - Delays scaglionati micro-cinematografici (0/80/140/200ms)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes adoHeroRise {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page-header-shell > *,
  .editorial-hero-copy > * {
    animation: adoHeroRise 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .page-header-shell > *:nth-child(2),
  .editorial-hero-copy > *:nth-child(2) {
    animation-delay: 80ms;
  }

  .page-header-shell > *:nth-child(3),
  .editorial-hero-copy > *:nth-child(3) {
    animation-delay: 140ms;
  }

  .page-header-shell > *:nth-child(4),
  .editorial-hero-copy > *:nth-child(4) {
    animation-delay: 200ms;
  }

  .page-header-shell > *:nth-child(5),
  .editorial-hero-copy > *:nth-child(5) {
    animation-delay: 260ms;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §W3  CARD WOW — luce diagonale che attraversa
   ───────────────────────────────────────────────────────────────────────────
   Target: .when-card, .insight-item, .diff-item, .scenari article
   Pattern: pseudo ::after grande con gradient diagonale, translateX 720ms.
   R2 ha già linea oro verticale ::before — qui ::after è separato, niente
   collisioni.
   ═══════════════════════════════════════════════════════════════════════════ */

.when-card,
.insight-item,
.diff-item,
.scenari article {
  position: relative;
  overflow: hidden;
}

.when-card::after,
.insight-item::after,
.diff-item::after,
.scenari article::after {
  content: '';
  position: absolute;
  inset: -45% -90%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(201, 164, 92, 0.12) 50%,
    transparent 62%
  );
  transform: translateX(-60%);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.when-card:hover::after,
.insight-item:hover::after,
.diff-item:hover::after,
.scenari article:hover::after {
  transform: translateX(60%);
}

/* Assicura che il contenuto card resti sopra la luce diagonale */
.when-card > *,
.insight-item > *,
.diff-item > *,
.scenari article > * {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §W4  CTA WOW — micro-luce che scorre + bordo oro al hover
   ───────────────────────────────────────────────────────────────────────────
   Target: .btn-accent, .home-cta-primary, .hero-cta
   Pattern: pseudo ::before con gradient bianco translucido, translateX
   650ms al hover. isolation:isolate + z-index:-1 sul ::before per restare
   sotto il testo del bottone.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-accent,
.home-cta-primary,
.hero-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-accent::before,
.home-cta-primary::before,
.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 45%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: -1;
}

.btn-accent:hover::before,
.home-cta-primary:hover::before,
.hero-cta:hover::before {
  transform: translateX(120%);
}

/* Hover ricco: bordo oro tenue + leggera elevazione (R2 ha già translateY) */
.btn-accent:hover {
  border-color: rgba(201, 164, 92, 0.42);
  box-shadow:
    0 8px 28px rgba(10, 8, 6, 0.28),
    0 0 0 1px rgba(201, 164, 92, 0.18);
}

.home-cta-primary:hover,
.hero-cta:hover {
  box-shadow:
    0 8px 24px rgba(10, 8, 6, 0.32),
    0 0 0 1px rgba(201, 164, 92, 0.22);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §W5  SEZIONI CON RITMO CROMATICO — gradienti sottilissimi
   ───────────────────────────────────────────────────────────────────────────
   Differenzia visivamente sezioni esistenti senza cambiarne il contenuto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Surface (chiara): velo dall'alto per dare profondità */
.section--surface {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0%, transparent 50%);
}

/* Ruled: bordo top + bottom oro tenue (oltre quello esistente in upgrade.css) */
.section--ruled {
  border-top-color: rgba(201, 164, 92, 0.18);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §W6  PATTERN ARCHIVIO LEGALE — griglia editoriale leggerissima
   ───────────────────────────────────────────────────────────────────────────
   Solo su sezioni scure (.section--monument) con mask per evitare
   distribuzione uniforme che diventerebbe rumore.
   ═══════════════════════════════════════════════════════════════════════════ */

.section--monument {
  position: relative;
}

.section--monument::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 75%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 75%, transparent 100%);
}

.section--monument > * {
  position: relative;
  z-index: 1;
}

/* Mobile: pattern più discreto */
@media (max-width: 700px) {
  .section--monument::after {
    opacity: 0.32;
    background-size: 32px 32px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §W7  FOOTER — separatore oro tenue + micro-pattern scuro
   ───────────────────────────────────────────────────────────────────────────
   Selettori generici per beccare sia footer (root) sia footer in partial.
   ═══════════════════════════════════════════════════════════════════════════ */

footer,
.site-footer {
  position: relative;
}

footer::before,
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 164, 92, 0.42) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Mobile: separatore più stretto e meno luminoso */
@media (max-width: 700px) {
  footer::before,
  .site-footer::before {
    width: 80%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(201, 164, 92, 0.28) 50%,
      transparent 100%
    );
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §W8  LAWYER PHOTO — cornice oro + profondità su hover
   ───────────────────────────────────────────────────────────────────────────
   Non altera immagine. Aggiunge ombra ricca + cornice oro 1px al hover.
   ═══════════════════════════════════════════════════════════════════════════ */

.lawyer-editorial-photo {
  position: relative;
  box-shadow:
    0 2px 18px rgba(10, 8, 6, 0.14),
    0 0 0 1px rgba(201, 164, 92, 0);
  transition:
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 360ms ease;
}

.lawyer-editorial:hover .lawyer-editorial-photo {
  box-shadow:
    0 12px 36px rgba(10, 8, 6, 0.32),
    0 0 0 1px rgba(201, 164, 92, 0.32);
}

/* Velo oro diagonale sottilissimo sulla foto in hover */
.lawyer-editorial-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 55%,
    rgba(201, 164, 92, 0.08) 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms ease;
  z-index: 2;
}

.lawyer-editorial:hover .lawyer-editorial-photo::after {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §W9  MOBILE — riduzione effetti per pulizia/performance
   ───────────────────────────────────────────────────────────────────────────
   Su mobile elimino:
   - luce diagonale card (transizione lunga, non necessaria su touch)
   - luce CTA scorrevole (touch non ha hover prolungato)
   - velo lawyer photo (hover irrilevante su touch)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .when-card::after,
  .insight-item::after,
  .diff-item::after,
  .scenari article::after,
  .btn-accent::before,
  .home-cta-primary::before,
  .hero-cta::before,
  .lawyer-editorial-photo::after {
    display: none;
  }

  /* Hero entrance: ridotta su mobile per velocità percepita */
  @media (prefers-reduced-motion: no-preference) {
    .page-header-shell > *,
    .editorial-hero-copy > * {
      animation-duration: 480ms;
    }
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §W10  REDUCED MOTION — blanket override
   ───────────────────────────────────────────────────────────────────────────
   Disattiva tutte le animazioni/transizioni introdotte dal layer wow
   (e in generale dal sito) per utenti che richiedono ridotto movimento.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Per sicurezza, garantisce stato finale visibile (animation-fill-mode:both
     funziona solo se animation gira; con duration 0 manteniamo opacità 1) */
  .page-header-shell > *,
  .editorial-hero-copy > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FINE wow-round.css  ·  Release ?v=20260607a
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 4 — WOW++ AMPLIFICATION (integrato in wow-round.css, ex wow-plus.css)
   ───────────────────────────────────────────────────────────────────────────
   Cache-buster bumped: ?v=20260605d → ?v=20260607a
   Contenuto sotto era originariamente in /css/wow-plus.css, integrato qui
   per mantenere il deploy su CSS canonici.
   ═══════════════════════════════════════════════════════════════════════════ */


   §P1  HOME HERO (.home-hero) — luce oro radiale + texture archivio
   ───────────────────────────────────────────────────────────────────────────
   Nel Round Wow l'home hero è stata toccata solo con `text-wrap: balance`.
   Qui aggiungo:
   - overlay più profondo con radial oro top-right + petrolio bottom-left
   - texture archivio leggera lato destro con mask
   - subtle vignette
   La home hero usa `.home-hero-bg` come container per il poster/video.
   Per non collidere con wow-round (che NON ha selettori su .home-hero-bg::*),
   uso direttamente questi pseudo.
   ═══════════════════════════════════════════════════════════════════════════ */

.home-hero {
  isolation: isolate;
}

.home-hero .home-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 24%, rgba(201, 164, 92, 0.14), transparent 36%),
    radial-gradient(circle at 14% 86%, rgba(21, 45, 39, 0.20), transparent 44%);
  pointer-events: none;
  z-index: 1;
}

.home-hero .home-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, rgba(0, 0, 0, 0.55) 85%);
          mask-image: linear-gradient(90deg, transparent 40%, rgba(0, 0, 0, 0.55) 85%);
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
}

/* Contenuto hero sempre sopra gli overlay */
.home-hero .home-hero-content,
.home-hero .home-meta,
.home-hero .home-title,
.home-hero .home-sub,
.home-hero .home-hero-ctas {
  position: relative;
  z-index: 3;
}

/* Home title — letter-spacing fine, refinement editoriale */
.home-title {
  letter-spacing: -0.024em;
}

/* Home sub — leggermente più editoriale */
.home-sub {
  letter-spacing: 0.002em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P2  HOME STATEMENT — atmosfera istituzionale profonda
   ───────────────────────────────────────────────────────────────────────────
   La sezione statement (se esiste nella home) riceve un fondo più ricco con
   gradient sottilissimo dall'alto e linee guida laterali oro tenui.
   Selettori conservativi: solo `.home-statement` e `.statement-block`.
   ═══════════════════════════════════════════════════════════════════════════ */

.home-statement,
.statement-block {
  position: relative;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, transparent 55%);
}

.home-statement::before,
.statement-block::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(201, 164, 92, 0.32) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 700px) {
  .home-statement::before,
  .statement-block::before {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P3  HOME INDEX (voci numerate) — micro-luce hover
   ───────────────────────────────────────────────────────────────────────────
   La home può avere un indice con voci numerate (.home-index .index-item).
   Aggiungo:
   - numero romano con leggera saturazione su hover
   - sottile separator oro che cresce su hover
   ═══════════════════════════════════════════════════════════════════════════ */

.home-index .index-item {
  position: relative;
  transition: color 240ms ease;
}

.home-index .index-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 164, 92, 0.68), transparent);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.home-index .index-item:hover::after,
.home-index .index-item:focus-visible::after {
  width: 100%;
}

.home-index .index-item span {
  transition: color 240ms ease, opacity 240ms ease;
}

.home-index .index-item:hover span {
  color: rgba(201, 164, 92, 0.78);
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P4  SECTION DIVIDERS EDITORIALI
   ───────────────────────────────────────────────────────────────────────────
   Per le sezioni .section--ruled (che hanno già border-top in upgrade.css),
   aggiungo una micro-etichetta superiore con linea oro centrale che fa da
   separatore editoriale. Sub-selettore `.section--ruled-label` già esistente
   in alcuni HTML, oppure pattern decorativo via ::before sulla sezione.
   ═══════════════════════════════════════════════════════════════════════════ */

.section--ruled {
  position: relative;
}

.section--ruled::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 164, 92, 0.58) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Section--monument: rafforza il pattern archivio in basso con divider */
.section--monument {
  position: relative;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P5  CARD AREE — bordo oro animato top-line
   ───────────────────────────────────────────────────────────────────────────
   Le card .diff-item, .when-card, .insight-item hanno già:
   - R2 §6: linea oro verticale ::before sul lato sinistro al hover
   - Round Wow §W3: luce diagonale ::after al hover

   Qui aggiungo un terzo livello: bordo TOP oro che cresce orizzontalmente
   da centro su hover. Usa :focus-within e :focus-visible.
   ═══════════════════════════════════════════════════════════════════════════ */

.diff-item,
.when-card,
.insight-item {
  border-top: 1px solid transparent;
  transition: border-color 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 0.1, 0.36, 1);
}

.diff-item:hover,
.diff-item:focus-within,
.when-card:hover,
.when-card:focus-within,
.insight-item:hover,
.insight-item:focus-within {
  border-top-color: rgba(201, 164, 92, 0.32);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P6  CTA FINALE CLOSING SCENE (.cta-section)
   ───────────────────────────────────────────────────────────────────────────
   La sezione `.cta-section` chiude ogni pillar. Qui diventa una "closing
   scene" memorabile:
   - background con velo dall'alto + radial oro discreto
   - separator gold sopra la sezione
   - CTA con micro-shadow oro più presente
   ═══════════════════════════════════════════════════════════════════════════ */

.cta-section {
  position: relative;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(201, 164, 92, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, transparent 50%);
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 164, 92, 0.46) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* CTA primario closing — leggermente più "presente" del default */
.cta-section .btn-accent,
.cta-section .home-cta-primary,
.cta-section .hero-cta {
  box-shadow: 0 4px 16px rgba(10, 8, 6, 0.16);
  transition:
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 360ms ease,
    transform 240ms cubic-bezier(0.22, 0.1, 0.36, 1);
}

.cta-section .btn-accent:hover,
.cta-section .home-cta-primary:hover,
.cta-section .hero-cta:hover {
  box-shadow:
    0 12px 32px rgba(10, 8, 6, 0.34),
    0 0 0 1px rgba(201, 164, 92, 0.28);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P7  LAWYER PHOTO — spotlight aggiuntivo
   ───────────────────────────────────────────────────────────────────────────
   Round Wow §W8 ha già box-shadow ricca + ring oro + velo diagonale al hover.
   Qui aggiungo un sottile "spotlight" superiore (radial top) costante che dà
   percezione di luce calda sulla foto, anche senza hover.
   ═══════════════════════════════════════════════════════════════════════════ */

.lawyer-editorial-photo {
  position: relative;
}

.lawyer-editorial-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(201, 164, 92, 0.06) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0.72;
}

/* L'immagine deve restare sotto il pseudo ma sopra altro */
.lawyer-editorial-photo img,
.lawyer-editorial-photo picture {
  position: relative;
  z-index: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P8  NAV SCROLL-STATE — più profondo (se nav già lo prevede)
   ───────────────────────────────────────────────────────────────────────────
   La nav `<ado-nav>` ha già stato `data-scrolled` o classe scroll. Se attiva,
   amplifico:
   - background più scuro
   - subtle gold underline bottom (1px gradient)
   ═══════════════════════════════════════════════════════════════════════════ */

ado-nav[data-scrolled="true"] .nav,
ado-nav.scrolled .nav,
header.scrolled ado-nav {
  position: relative;
}

ado-nav[data-scrolled="true"] .nav::after,
ado-nav.scrolled .nav::after,
header.scrolled ado-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 164, 92, 0.32) 30%,
    rgba(201, 164, 92, 0.32) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P9  FOOTER — presenza istituzionale aumentata
   ───────────────────────────────────────────────────────────────────────────
   Round Wow §W7 ha già separator oro tenue. Qui aggiungo:
   - micro-pattern editoriale sul footer
   - corner accent gold (top-left e top-right) tipo "marchio"
   ═══════════════════════════════════════════════════════════════════════════ */

footer,
.site-footer {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.008) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.006) 1px, transparent 1px);
  background-size: 64px 64px;
}

footer::after,
.site-footer::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 4%;
  width: 18px;
  height: 1px;
  background: rgba(201, 164, 92, 0.42);
  pointer-events: none;
  z-index: 2;
  box-shadow:
    /* corner top-right speculare */
    calc(92vw - 4vw) 0 0 0 rgba(201, 164, 92, 0.42);
}

/* Mobile: pattern + corner spenti */
@media (max-width: 700px) {
  footer,
  .site-footer {
    background-image: none;
  }
  footer::after,
  .site-footer::after {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P10  INSIGHTS CARDS — più editoriali
   ───────────────────────────────────────────────────────────────────────────
   Aggiungo: data/kicker più presente, titolo con micro-spacing su hover.
   Non aggiungo decorazioni pesanti.
   ═══════════════════════════════════════════════════════════════════════════ */

.insight-item .insight-meta,
.insight-item .insight-date,
.insight-item .insight-kicker {
  transition: color 240ms ease, letter-spacing 320ms ease;
}

.insight-item:hover .insight-meta,
.insight-item:hover .insight-date,
.insight-item:hover .insight-kicker {
  color: rgba(201, 164, 92, 0.92);
  letter-spacing: 0.18em;
}

.insight-item .insight-title {
  transition: color 240ms ease;
}

.insight-item:hover .insight-title {
  color: var(--ink, #0A0806);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P11  HERO TITLE — micro-tracking transition discreta
   ───────────────────────────────────────────────────────────────────────────
   Quando l'utente sposta il mouse sull'area CTA della hero, il titolo
   riceve una variazione di letter-spacing di -0.002em. Effetto minimo,
   percepibile come "il sito è vivo". Solo su desktop con :hover supportato.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .page-header-shell .page-title,
  .editorial-hero-copy h1.page-title,
  .home-title {
    transition: letter-spacing 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .editorial-hero:has(.hero-cta:hover) .page-title,
  .page-header-outer:has(.hero-cta:hover) .page-title,
  .home-hero:has(.home-cta-primary:hover) .home-title,
  .home-hero:has(.home-cta-secondary:hover) .home-title {
    letter-spacing: -0.027em;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P12  MOBILE — riduzione effetti per pulizia
   ───────────────────────────────────────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* Home hero overlay: texture griglia disattivata mobile */
  .home-hero .home-hero-bg::after {
    display: none;
  }

  /* Home statement: linea verticale già disattivata sopra */

  /* Section divider editoriale: ridotto */
  .section--ruled::after {
    width: 40px;
  }

  /* CTA section closing: shadow ridotta */
  .cta-section::before {
    width: 50px;
  }

  /* Card aree: bordo top hover ridotto a 0 (mobile no hover dominante) */
  .diff-item:hover,
  .when-card:hover,
  .insight-item:hover {
    border-top-color: transparent;
  }

  /* Lawyer spotlight: ridotto */
  .lawyer-editorial-photo::before {
    opacity: 0.4;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §P13  REDUCED MOTION — micro-override solo per wow-plus
   ───────────────────────────────────────────────────────────────────────────
   Round Wow §W10 ha già blanket aggressivo `* *::before *::after`.
   Aggiungo qui solo la garanzia che gli stati hover/focus restino visibili
   (no flash invisibile) anche con animazione disattivata.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .home-index .index-item::after,
  .section--ruled::after,
  .cta-section::before,
  .lawyer-editorial-photo::before {
    transition: none !important;
  }

  /* Hero title micro-tracking disabilitato */
  .page-header-shell .page-title,
  .editorial-hero-copy h1.page-title,
  .home-title {
    transition: none !important;
    letter-spacing: -0.025em !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FINE wow-plus.css  ·  Release ?v=20260607a
   ═══════════════════════════════════════════════════════════════════════════ */