/* LE VOCI DEI LETTORI - V4 */
:root{
  --v4-navy:#061826;
  --v4-navy2:#0a2f45;
  --v4-cyan:#18d8ef;
  --v4-orange:#ff8735;
  --v4-yellow:#ffd44b;
  --v4-ink:#eff9fc;
  --v4-muted:#c9dde5;
}
html{scroll-behavior:smooth}
body{background:#eef7f6}

/* Hero superiore della pagina */
main>.intro,
.intro{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 28%,rgba(255,135,53,.18),transparent 24%),
    radial-gradient(circle at 18% 35%,rgba(24,216,239,.14),transparent 28%),
    linear-gradient(135deg,#061826 0%,#0a3047 100%)!important;
  color:#fff!important;
  border-radius:0 0 34px 34px;
  padding-top:78px!important;
  padding-bottom:70px!important;
  box-shadow:0 18px 45px rgba(11,51,67,.12)
}
main>.intro:after,.intro:after{
  content:"";
  position:absolute;
  width:260px;height:260px;border-radius:50%;
  right:-95px;top:-80px;
  border:14px solid rgba(255,136,53,.36);
  box-shadow:0 0 50px rgba(255,126,41,.22),inset 0 0 34px rgba(255,126,41,.09);
  animation:v4PortalPulse 5s ease-in-out infinite
}
.intro .eyebrow{color:var(--v4-orange)!important;letter-spacing:.18em!important;font-weight:900!important}
.intro h1{
  color:#fff!important;
  font-size:clamp(3rem,7vw,6rem)!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
  max-width:900px
}
.intro h1 em{color:var(--v4-cyan)!important;font-style:normal!important;text-shadow:0 0 28px rgba(24,216,239,.26)}
.intro .lead{color:#d9ebf0!important;max-width:720px!important;font-size:1.08rem!important}

/* Sezione lettori */
#commenti{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 10% 15%,rgba(24,216,239,.15),transparent 25%),
    radial-gradient(circle at 91% 8%,rgba(255,135,53,.16),transparent 23%),
    linear-gradient(180deg,#061826 0%,#092b40 52%,#061824 100%)!important;
  padding:86px 0 100px!important;
  color:var(--v4-ink)!important
}
#commenti:before{
  content:"";position:absolute;width:350px;height:350px;border-radius:50%;
  right:-185px;top:70px;border:2px solid rgba(255,144,52,.28);
  box-shadow:0 0 70px rgba(255,126,41,.15);pointer-events:none;
  animation:v4Ring 6s ease-in-out infinite
}
#commenti>.wrap{position:relative;z-index:1}
#commenti .eyebrow{color:var(--v4-orange)!important;letter-spacing:.17em!important;font-weight:900!important}
#commenti h2{
  color:#fff!important;
  font-size:clamp(2.55rem,5.2vw,4.8rem)!important;
  line-height:.98!important;
  letter-spacing:-.04em!important;
  margin:0 0 24px!important
}

/* Modulo editoriale inserito dal pacchetto */
.v4-community{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  margin:30px 0 38px;
  border:1px solid rgba(106,214,235,.24);
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  box-shadow:0 22px 60px rgba(0,0,0,.19);
  backdrop-filter:blur(8px)
}
.v4-community-copy{padding:34px 36px}
.v4-community-kicker{
  display:inline-block;color:var(--v4-cyan);font-size:.76rem;
  font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px
}
.v4-community h3{
  color:#fff!important;font-size:clamp(1.85rem,3.2vw,3rem)!important;
  line-height:1.03!important;margin:0 0 13px!important
}
.v4-community h3 span{color:var(--v4-orange)}
.v4-community p{color:var(--v4-muted)!important;line-height:1.7;margin:0 0 20px}
.v4-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 23px}
.v4-pills span{
  padding:7px 11px;border-radius:999px;border:1px solid rgba(122,216,235,.23);
  background:rgba(255,255,255,.06);color:#eaf8fb;font-size:.79rem;font-weight:780
}
.v4-community a{
  display:inline-block;text-decoration:none!important;color:#fff!important;
  background:linear-gradient(135deg,#ff913b,#ff6d34);
  padding:12px 18px;border-radius:11px;font-weight:900!important;
  box-shadow:0 11px 28px rgba(255,110,47,.19);
  transition:transform .2s ease,box-shadow .2s ease
}
.v4-community a:hover{transform:translateY(-2px);box-shadow:0 16px 35px rgba(255,110,47,.28)}
.v4-community-visual{
  min-height:300px;position:relative;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,rgba(255,134,39,.22),transparent 45%)
}
.v4-portal{
  width:205px;height:205px;border-radius:50%;
  border:12px solid var(--v4-orange);
  box-shadow:0 0 38px rgba(255,128,38,.75),inset 0 0 30px rgba(255,128,38,.3);
  position:relative;animation:v4PortalPulse 4.2s ease-in-out infinite
}
.v4-portal:before,.v4-portal:after{
  content:"";position:absolute;border-radius:50%;inset:18px;
  border:2px dashed rgba(74,222,245,.75)
}
.v4-portal:after{inset:48px;border-color:rgba(255,215,75,.76);animation:v4Spin 11s linear infinite}
.v4-quote{
  position:absolute;inset:0;display:grid;place-items:center;
  font:7rem/1 Georgia,serif;color:#fff;text-shadow:0 0 24px rgba(30,216,240,.45)
}

/* Contenitore delle recensioni */
#commenti .reader-box{
  max-width:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important
}

/* Copre sia la struttura reader-comment sia eventuali article/card presenti */
#commenti .reader-comment,
#commenti .reader-box article,
#commenti .reader-box>div:not(.v4-community):not(.comment-form){
  position:relative;
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.048))!important;
  color:#eff9fc!important;
  border:1px solid rgba(91,203,228,.25)!important;
  border-radius:19px!important;
  padding:27px 26px 24px 68px!important;
  margin:16px 0!important;
  box-shadow:0 17px 40px rgba(0,0,0,.15)!important;
  overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease
}
#commenti .reader-comment:hover,
#commenti .reader-box article:hover{
  transform:translateY(-3px);
  border-color:rgba(42,220,246,.48)!important;
  box-shadow:0 22px 46px rgba(0,0,0,.22)!important
}
#commenti .reader-comment:before,
#commenti .reader-box article:before{
  content:"“";position:absolute;left:18px;top:11px;
  font:5rem/1 Georgia,serif;color:var(--v4-cyan);opacity:.78
}
#commenti .reader-comment strong,
#commenti .reader-box article strong,
#commenti .reader-box h3,
#commenti .reader-box h4{color:#fff!important}
#commenti .reader-comment p,
#commenti .reader-box article p{color:#d6e8ee!important;line-height:1.72!important}
#commenti .reader-box time{color:#91b6c2!important;font-size:.75rem!important}
#commenti .reader-box a:not(.button){
  color:#55e2f4!important;font-weight:800;text-decoration-thickness:1px;
  text-underline-offset:3px
}

/* Form */
#commenti .comment-form{
  max-width:870px!important;
  margin:42px auto 0!important;
  padding:29px!important;
  background:linear-gradient(145deg,rgba(14,69,93,.82),rgba(9,43,62,.84))!important;
  border:1px solid rgba(83,204,231,.29)!important;
  border-radius:20px!important;
  box-shadow:0 20px 48px rgba(0,0,0,.18)!important
}
#commenti .comment-form:before{
  content:"✦ RACCONTA IL TUO PORTALE";
  display:block;color:var(--v4-orange);
  font-size:.75rem;font-weight:900;letter-spacing:.14em;margin-bottom:8px
}
#commenti .comment-form label{color:#f4fbfd!important;font-weight:800!important}
#commenti .comment-form input:not([type=checkbox]),
#commenti .comment-form textarea{
  background:#f7fbfc!important;color:#12323e!important;border:1px solid #84aeb8!important;
  border-radius:10px!important
}
#commenti .comment-form small{color:#abc8d1!important}
#commenti .comment-form .button,
#commenti button{
  background:linear-gradient(135deg,#ff8b35,#ff6935)!important;
  color:#fff!important;border:0!important;border-radius:11px!important;font-weight:900!important
}

/* Se la pagina usa una struttura a schede con "Continua a leggere" */
#commenti details,
#commenti .review-card,
#commenti .reader-card{
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045))!important;
  border:1px solid rgba(92,202,227,.25)!important;
  border-radius:19px!important;
  color:#eff9fc!important;
  box-shadow:0 17px 40px rgba(0,0,0,.14)!important
}

/* Recensione video: la lasciamo integra, ma coerente */
.video-review-section,
.tiktok-review-section{
  border-radius:24px!important;
  overflow:hidden;
  box-shadow:0 22px 55px rgba(0,0,0,.16)!important
}

@keyframes v4PortalPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.035);filter:brightness(1.15)}}
@keyframes v4Ring{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.05);opacity:1}}
@keyframes v4Spin{to{transform:rotate(360deg)}}

@media(max-width:780px){
  .intro{padding-top:58px!important;padding-bottom:54px!important}
  #commenti{padding:60px 0 75px!important}
  .v4-community{grid-template-columns:1fr}
  .v4-community-copy{padding:27px 21px}
  .v4-community-visual{min-height:245px}
  .v4-portal{width:168px;height:168px}
  #commenti .reader-comment,#commenti .reader-box article{padding:24px 18px 22px 58px!important}
  #commenti .comment-form{padding:22px!important}
}
@media(prefers-reduced-motion:reduce){
  .v4-portal,.intro:after,#commenti:before,.v4-portal:after{animation:none!important}
  .v4-community a,#commenti .reader-comment,#commenti .reader-box article{transition:none!important}
}