/* ==========================================================================
   CANALE 21 — Foglio di stile principale
   Identità: TV broadcast (chyron/lower-third) + arcobaleno del logo
   ========================================================================== */

:root{
  /* Ground & paper */
  --ink:#0a1420;            /* navy-charcoal studio dark */
  --ink-2:#111f30;
  --ink-3:#1b2c40;
  --paper:#ffffff;
  --bg:#eef1f5;            /* cool grey app background */
  --line:#e2e8f0;
  --muted:#64748b;
  --muted-2:#94a3b8;

  /* Brand */
  --rosso:#e2001a;         /* Rosso Canale — LIVE / breaking */
  --rosso-scuro:#b80016;
  --blu:#0057b8;
  --ciano:#29b6e6;
  --giallo:#ffcc00;
  --arancio:#f39200;
  --verde:#009640;         /* Sport */
  --magenta:#e5007d;       /* Intrattenimento */
  --viola:#9b26b6;

  --rainbow:linear-gradient(90deg,#e2001a 0%,#f39200 25%,#ffcc00 50%,#29b6e6 75%,#0057b8 100%);

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(10,20,32,.06),0 8px 24px rgba(10,20,32,.08);
  --shadow-lg:0 12px 40px rgba(10,20,32,.16);
  --container:1240px;
  --font-head:'Oswald',Impact,'Arial Narrow',sans-serif;
  --font-body:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blu);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.12;margin:0;
  text-wrap:balance;letter-spacing:.2px}
button{font-family:inherit}
/* default inline-icon size (specific rules below override for decorative icons) */
svg{width:1.05em;height:1.05em;vertical-align:-.15em;flex-shrink:0}
:focus-visible{outline:3px solid var(--ciano);outline-offset:2px;border-radius:4px}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==========================================================================
   TOP UTILITY BAR
   ========================================================================== */
.topbar{background:var(--ink);color:#cbd5e1;font-size:.8rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:38px;gap:16px}
.topbar__date{font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;
  font-size:.72rem;color:var(--muted-2)}
.topbar__social{display:flex;align-items:center;gap:6px}
.topbar__social a{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  color:#cbd5e1;transition:.2s}
.topbar__social a:hover{background:rgba(255,255,255,.12);color:#fff}
.topbar__social svg{width:15px;height:15px;fill:currentColor}

/* ==========================================================================
   HEADER
   ========================================================================== */
.masthead{background:var(--paper);position:sticky;top:0;z-index:60;
  box-shadow:0 2px 12px rgba(10,20,32,.07)}
.masthead__inner{display:flex;align-items:center;gap:24px;height:82px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:56px;width:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-head);font-weight:700;font-size:1.15rem;letter-spacing:.5px}
.brand__tag{font-size:.64rem;text-transform:uppercase;letter-spacing:2.4px;color:var(--muted);
  font-family:var(--font-head)}

.mainnav{margin-left:auto}
.mainnav ul{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.mainnav a{font-family:var(--font-head);text-transform:uppercase;font-weight:500;
  font-size:.95rem;letter-spacing:.6px;color:var(--ink);padding:10px 14px;border-radius:8px;
  display:block;transition:.15s;position:relative}
.mainnav a:hover{background:var(--bg);text-decoration:none;color:var(--rosso)}
.mainnav a.active{color:var(--rosso)}
.mainnav a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;
  background:var(--rosso);border-radius:2px}
.mainnav .has-sub{position:relative}
.mainnav .submenu{position:absolute;top:100%;left:0;min-width:210px;background:var(--paper);
  box-shadow:var(--shadow-lg);border-radius:12px;padding:8px;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:.18s;border-top:3px solid var(--rosso)}
.mainnav .has-sub:hover .submenu,.mainnav .has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.mainnav .submenu a{padding:9px 12px;border-radius:7px;font-size:.85rem}
.mainnav .submenu .chip{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle}

.btn-live{display:inline-flex;align-items:center;gap:9px;background:var(--rosso);color:#fff;
  font-family:var(--font-head);text-transform:uppercase;font-weight:600;letter-spacing:1px;
  padding:11px 18px;border-radius:9px;font-size:.9rem;flex-shrink:0;transition:.15s;border:none;cursor:pointer}
.btn-live:hover{background:var(--rosso-scuro);text-decoration:none;color:#fff;transform:translateY(-1px)}
.live-dot{width:9px;height:9px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* rainbow hairline under header */
.rainbow-bar{height:4px;background:var(--rainbow)}

/* hamburger */
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.navtoggle span{display:block;width:26px;height:3px;background:var(--ink);border-radius:2px;margin:5px 0;transition:.25s}
.navtoggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ==========================================================================
   ON-AIR / BREAKING TICKER
   ========================================================================== */
.ticker{background:var(--ink-2);color:#fff;overflow:hidden;position:relative}
.ticker__inner{display:flex;align-items:center;height:42px}
.ticker__label{background:var(--rosso);height:42px;display:flex;align-items:center;gap:8px;
  padding:0 16px;font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;
  font-weight:600;font-size:.82rem;flex-shrink:0;white-space:nowrap}
.ticker__onair{background:var(--ink-3);height:42px;display:flex;align-items:center;gap:8px;
  padding:0 16px;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.5px;
  font-size:.8rem;flex-shrink:0;white-space:nowrap;color:#cbd5e1}
.ticker__onair b{color:#fff}
.ticker__track{flex:1;overflow:hidden;white-space:nowrap;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ticker__move{display:inline-block;padding-left:100%;animation:ticker 38s linear infinite;font-size:.9rem}
.ticker__move a{color:#e2e8f0;margin:0 26px}
.ticker__move a:hover{color:#fff}
.ticker__move .sep{color:var(--rosso);font-weight:700}
.ticker:hover .ticker__move{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */
.section{padding:44px 0}
.section--tight{padding:28px 0}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.sec-title{font-size:1.7rem;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:12px}
.sec-title::before{content:"";width:6px;height:26px;background:var(--rosso);border-radius:3px;display:inline-block}
.sec-title small{display:block;font-family:var(--font-body);text-transform:none;letter-spacing:0;
  font-size:.82rem;color:var(--muted);font-weight:400;margin-top:2px}
.sec-more{font-family:var(--font-head);text-transform:uppercase;font-size:.82rem;letter-spacing:1px;
  color:var(--rosso);white-space:nowrap}
.sec-more:hover{text-decoration:none;color:var(--rosso-scuro)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{background:var(--ink);color:#fff;padding:32px 0 40px;position:relative}
.hero__grid{display:grid;grid-template-columns:2fr 1fr;gap:26px}
.player-wrap{position:relative;background:#000;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);aspect-ratio:16/9}
.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-badge{position:absolute;top:14px;left:14px;z-index:3;background:var(--rosso);color:#fff;
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:7px;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-size:.78rem}
.player-caption{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.player-caption h1{font-size:1.5rem;text-transform:uppercase}
.player-caption p{margin:2px 0 0;color:#9fb3c8;font-size:.9rem}

.hero-rail{background:var(--ink-2);border-radius:var(--radius);padding:6px 18px 14px;display:flex;flex-direction:column}
.hero-rail__head{font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;
  font-size:.95rem;padding:14px 0 12px;border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;gap:9px}
.hero-rail__head .live-dot{background:var(--rosso);box-shadow:0 0 0 0 rgba(226,0,26,.7);animation:pulseRed 1.8s infinite}
@keyframes pulseRed{70%{box-shadow:0 0 0 8px rgba(226,0,26,0)}100%{box-shadow:0 0 0 0 rgba(226,0,26,0)}}
.rail-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.rail-item:last-child{border-bottom:none}
.rail-item time{font-family:var(--font-head);color:var(--ciano);font-size:.72rem;letter-spacing:.5px;
  text-transform:uppercase;flex-shrink:0;padding-top:2px;width:56px}
.rail-item a{color:#e8eef4;font-weight:500;font-size:.92rem;line-height:1.3}
.rail-item a:hover{color:#fff}

/* on-air card inside rail */
.onair-card{margin-top:14px;background:linear-gradient(135deg,var(--ink-3),var(--ink-2));
  border-radius:var(--radius-sm);padding:14px;border-left:4px solid var(--rosso)}
.onair-card .k{font-family:var(--font-head);text-transform:uppercase;letter-spacing:1.5px;
  font-size:.68rem;color:var(--rosso)}
.onair-card .v{font-family:var(--font-head);font-size:1.15rem;text-transform:uppercase;margin-top:3px}
.onair-card .next{font-size:.78rem;color:#9fb3c8;margin-top:8px}
.onair-card .next b{color:#cbd5e1}

/* ==========================================================================
   CARDS
   ========================================================================== */
.grid{display:grid;gap:22px}
.grid-news{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-vid{grid-template-columns:repeat(4,1fr)}

.card{background:var(--paper);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:15px 16px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__title{font-size:1.12rem;line-height:1.18;font-family:var(--font-head);font-weight:600}
.card__title a{color:var(--ink)}
.card__title a:hover{color:var(--rosso);text-decoration:none}
.card__excerpt{font-size:.9rem;color:var(--muted);margin:0;flex:1}
.card__meta{display:flex;align-items:center;gap:10px;font-size:.74rem;color:var(--muted-2);
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.6px;margin-top:auto}

/* category / label chip */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);
  text-transform:uppercase;letter-spacing:.8px;font-size:.68rem;font-weight:600;
  color:#fff;background:var(--rosso);padding:4px 9px;border-radius:5px;line-height:1}
.chip--abs{position:absolute;top:10px;left:10px;z-index:2}

/* feature (big) card */
.feature{position:relative;border-radius:var(--radius);overflow:hidden;min-height:420px;
  display:flex;align-items:flex-end;box-shadow:var(--shadow);color:#fff}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,12,20,.92) 0%,rgba(6,12,20,.35) 55%,transparent 100%)}
.feature__body{position:relative;z-index:2;padding:26px}
.feature__title{font-size:2rem;text-transform:none;line-height:1.08;margin:10px 0 8px}
.feature__title a{color:#fff}
.feature__title a:hover{text-decoration:none;color:#fff;opacity:.92}
.feature__excerpt{color:#cbd5e1;font-size:.98rem;max-width:60ch}

/* ==========================================================================
   VIDEO CARDS (YouTube)
   ========================================================================== */
.play-btn{position:absolute;inset:0;z-index:3;display:grid;place-items:center;cursor:pointer}
.play-btn::before{content:"";position:absolute;width:58px;height:58px;border-radius:50%;
  background:rgba(226,0,26,.92);transition:.2s;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.play-btn svg{position:relative;z-index:1;width:26px;height:26px;fill:#fff;margin-left:3px;transition:.2s}
.vidcard:hover .play-btn::before{transform:scale(1.12);background:var(--rosso)}
.vid-dur{position:absolute;bottom:8px;right:8px;z-index:3;background:rgba(6,12,20,.85);color:#fff;
  font-family:var(--font-head);font-size:.7rem;padding:2px 7px;border-radius:4px;letter-spacing:.5px}

/* peppy highlight strip */
.peppy{background:linear-gradient(135deg,#2a0a2e,#4a0e3f);color:#fff}
.peppy .sec-title{color:#fff}
.peppy .sec-title::before{background:var(--magenta)}
.peppy .card{background:rgba(255,255,255,.04);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.08)}
.peppy .card__title a{color:#fff}
.peppy .card__title a:hover{color:var(--giallo)}
.peppy .card__meta{color:#c9a2c9}

/* ==========================================================================
   PROGRAMMI
   ========================================================================== */
.prog-card{position:relative;border-radius:var(--radius);overflow:hidden;min-height:230px;
  display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s}
.prog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.prog-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prog-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,12,20,.94),rgba(6,12,20,.15) 70%,transparent)}
.prog-card__body{position:relative;z-index:2;padding:20px;width:100%}
.prog-card__name{font-size:1.4rem;text-transform:uppercase;margin:8px 0 4px}
.prog-card__host{font-size:.82rem;color:#cbd5e1}
.prog-card__air{font-size:.76rem;color:#9fb3c8;font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.5px;margin-top:6px;display:flex;align-items:center;gap:6px}

/* genre color chips */
.chip-informazione{background:var(--rosso)}
.chip-sport{background:var(--verde)}
.chip-intrattenimento{background:var(--magenta)}

/* ==========================================================================
   ADS
   ========================================================================== */
.ad-slot{position:relative;margin:0 auto;text-align:center;background:#fff;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;overflow:hidden}
.ad-slot .ad-label{font-family:var(--font-head);text-transform:uppercase;letter-spacing:1.5px;
  font-size:.6rem;color:var(--muted-2);padding:3px 0}
.ad-slot img{border-radius:6px}
.ad-header{padding:14px 0;background:transparent}
.ad-header img{max-height:120px}
.ad-sidebar{box-shadow:var(--shadow);padding:8px}
.ad-footer{padding:16px 0;background:transparent}
.ad-in_article{margin:24px 0;box-shadow:var(--shadow);padding:10px}
.ad-strip{background:#e7ebf1;padding:8px 0}

/* ==========================================================================
   LAYOUT: content + sidebar
   ========================================================================== */
.with-side{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start}
.sidebar{display:flex;flex-direction:column;gap:24px;position:sticky;top:100px}
.widget{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.widget__head{background:var(--ink);color:#fff;font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:1px;font-size:.92rem;padding:12px 16px;display:flex;align-items:center;gap:8px}
.widget__body{padding:14px 16px}
.mostletti{list-style:none;margin:0;padding:0;counter-reset:m}
.mostletti li{counter-increment:m;display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.mostletti li:last-child{border-bottom:none}
.mostletti li::before{content:counter(m);font-family:var(--font-head);font-size:1.5rem;font-weight:700;
  color:var(--line);line-height:1;flex-shrink:0;width:26px}
.mostletti a{color:var(--ink);font-weight:500;font-size:.9rem;line-height:1.25}
.mostletti a:hover{color:var(--rosso)}

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.article__hero{position:relative;aspect-ratio:16/8;background:var(--ink-2)}
.article__hero img{width:100%;height:100%;object-fit:cover}
.article__wrap{padding:28px clamp(20px,4vw,48px) 40px}
.article__title{font-size:clamp(1.8rem,3.5vw,2.6rem);text-transform:none;line-height:1.1;margin:6px 0 14px}
.article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;color:var(--muted);
  font-size:.85rem;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.6px;
  padding-bottom:18px;border-bottom:2px solid var(--line);margin-bottom:22px}
.article__body{font-size:1.09rem;line-height:1.75;max-width:70ch}
.article__body p{margin:0 0 1.15em}
.article__body p:first-of-type{font-size:1.18rem;color:var(--ink)}
.share{display:flex;align-items:center;gap:10px;margin:26px 0 0;flex-wrap:wrap}
.share span{font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;font-size:.8rem;color:var(--muted)}
.share a{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;color:#fff;transition:.15s}
.share a:hover{transform:translateY(-2px);text-decoration:none}
.share svg{width:18px;height:18px;fill:currentColor}
.sh-fb{background:#1877f2}.sh-wa{background:#25d366}.sh-x{background:#0f1419}.sh-tg{background:#0088cc}

/* ==========================================================================
   PAGE HEADER (interne)
   ========================================================================== */
.pagehead{background:var(--ink);color:#fff;padding:34px 0}
.pagehead h1{font-size:clamp(1.8rem,4vw,2.6rem);text-transform:uppercase}
.breadcrumb{font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;font-size:.75rem;
  color:var(--muted-2);margin-bottom:8px}
.breadcrumb a{color:var(--ciano)}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filters a{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.6px;font-size:.82rem;
  padding:8px 15px;border-radius:30px;background:var(--paper);color:var(--ink);box-shadow:var(--shadow);transition:.15s}
.filters a:hover,.filters a.active{background:var(--rosso);color:#fff;text-decoration:none}

/* pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:42px;height:42px;display:grid;place-items:center;
  border-radius:9px;font-family:var(--font-head);font-weight:600;background:var(--paper);
  box-shadow:var(--shadow);color:var(--ink);padding:0 12px}
.pagination a:hover{background:var(--ink);color:#fff;text-decoration:none}
.pagination .current{background:var(--rosso);color:#fff}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(22px,4vw,38px)}
.form-row{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.6px;font-size:.78rem;color:var(--ink)}
.field input,.field select,.field textarea{padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;
  font-family:var(--font-body);font-size:.95rem;background:#fbfcfe;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blu);outline:none;background:#fff}
.field textarea{min-height:140px;resize:vertical}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--rosso);color:#fff;border:none;cursor:pointer;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;font-weight:600;font-size:.95rem;
  padding:14px 28px;border-radius:10px;transition:.15s}
.btn:hover{background:var(--rosso-scuro);text-decoration:none;color:#fff;transform:translateY(-1px)}
.btn--dark{background:var(--ink)}.btn--dark:hover{background:var(--ink-3)}
.btn--ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.alert{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:.95rem}
.alert--ok{background:#e6f7ee;color:#0a6b3b;border:1px solid #bfe8d0}
.alert--err{background:#fdeaec;color:#a01020;border:1px solid #f6c8ce}

/* newsletter band */
.newsletter{background:var(--rainbow);padding:3px;border-radius:var(--radius)}
.newsletter__in{background:var(--ink);border-radius:12px;padding:30px clamp(20px,4vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;color:#fff}
.newsletter__in h3{font-size:1.5rem;text-transform:uppercase}
.newsletter__in p{color:#9fb3c8;margin:6px 0 0;font-size:.92rem}
.newsletter form{display:flex;gap:10px;flex:1;min-width:280px;max-width:460px}
.newsletter input{flex:1;padding:13px 16px;border-radius:9px;border:none;font-size:.95rem}

/* info cards (contatti) */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.info-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;text-align:center}
.info-card .ico{width:56px;height:56px;border-radius:14px;background:var(--bg);display:grid;place-items:center;
  margin:0 auto 14px;color:var(--rosso)}
.info-card .ico svg{width:26px;height:26px;fill:currentColor}
.info-card h3{font-size:1.15rem;text-transform:uppercase;margin-bottom:6px}
.info-card a{font-weight:600}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat b{font-family:var(--font-head);font-size:2.6rem;color:var(--rosso);display:block;line-height:1}
.stat span{font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;font-size:.78rem;color:var(--muted)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--ink);color:#a9b6c5;margin-top:20px}
.footer__top{padding:48px 0 34px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:34px}
.footer__brand img{height:64px;margin-bottom:14px}
.footer__brand p{font-size:.88rem;line-height:1.6;max-width:34ch}
.footer h4{font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;color:#fff;
  font-size:.98rem;margin-bottom:16px;position:relative;padding-bottom:10px}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:var(--rainbow);border-radius:2px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer a{color:#a9b6c5;font-size:.9rem}
.footer a:hover{color:#fff;text-decoration:none}
.footer__social{display:flex;gap:10px;margin-top:8px}
.footer__social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.06);
  display:grid;place-items:center;color:#cbd5e1;transition:.2s}
.footer__social a:hover{background:var(--rosso);color:#fff}
.footer__social svg{width:18px;height:18px;fill:currentColor}
.footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 0}
.footer__bottom .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted)}
.footer__bottom a{color:var(--muted-2)}

/* whatsapp float */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:58px;height:58px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.5);transition:.2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1024px){
  .grid-vid{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:28px}
  .info-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px}
}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .with-side{grid-template-columns:1fr}
  .sidebar{position:static}
  .grid-news{grid-template-columns:repeat(2,1fr)}
  .mainnav{position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:var(--paper);
    box-shadow:var(--shadow-lg);transform:translateX(100%);transition:.28s;padding:80px 18px 30px;
    margin:0;z-index:70;overflow-y:auto}
  .mainnav.open{transform:none}
  .mainnav ul{flex-direction:column;gap:2px}
  .mainnav a{padding:13px 14px;border-radius:9px;font-size:1.05rem}
  .mainnav a.active::after{display:none}
  .mainnav .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    padding:0 0 0 14px;border-top:none;border-left:2px solid var(--line)}
  .navtoggle{display:block;z-index:71}
  .nav-backdrop{position:fixed;inset:0;background:rgba(10,20,32,.5);z-index:65;opacity:0;visibility:hidden;transition:.25s}
  .nav-backdrop.open{opacity:1;visibility:visible}
  .btn-live span.txt{display:none}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid-news,.grid-vid,.grid-4{grid-template-columns:1fr}
  .brand__txt{display:none}
  .sec-title{font-size:1.35rem}
  .topbar__date{display:none}
  .player-caption h1{font-size:1.2rem}
  .newsletter form{max-width:none}
  .footer__grid{grid-template-columns:1fr}
  .ticker__onair{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .ticker__move{animation:none;padding-left:0}
}