:root {
     --red: #e30613;
     --yellow: #ffe600;
     --black: #000;
     --gray: #555;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     background: #f1f1f1;
     color: var(--black);
     font-family: 'Roboto', Arial, sans-serif;
     font-size: 18px;
     line-height: 1.6;
 }

 img {
     max-width: 100%;
     display: block;
 }

 /* ---------- HEADER ---------- */
 .header {
     background: var(--red);
     padding: 10px 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .logo {
     background: var(--red);
     color: #fff;
     font: 36px/1 'Anton', sans-serif;
     letter-spacing: 1px;
     border: 3px solid #fff;
     padding: 2px 10px;
 }

 .header .date {
     color: #fff;
     font-size: 12px;
     font-weight: 700;
     text-align: right;
 }

 .nav {
     background: var(--black);
     overflow-x: auto;
     white-space: nowrap;
 }

 .nav ul {
     list-style: none;
     display: flex;
     gap: 20px;
     padding: 10px 16px;
     font: 900 13px 'Roboto', sans-serif;
     text-transform: uppercase;
     color: #fff;
 }

 .nav li.active {
     color: var(--yellow);
 }

 .wrap {
     max-width: 760px;
     margin: 0 auto;
     background: #fff;
     padding: 18px 16px 50px;
 }

 .label {
     display: inline-block;
     background: var(--yellow);
     color: var(--black);
     font: 900 14px 'Roboto', sans-serif;
     text-transform: uppercase;
     padding: 4px 10px;
     margin-bottom: 8px;
 }

 .kicker {
     font: 900 20px/1.2 'Roboto', sans-serif;
     color: var(--red);
     text-transform: uppercase;
     margin-bottom: 4px;
 }

 /* H1 GRITANTE */
 h1 {
     font: 52px/1.3 'Anton', Impact, sans-serif;
     text-transform: uppercase;
     letter-spacing: .5px;
     margin-bottom: 14px;
 }

 h1 .hl {
     background: var(--yellow);
     padding: 0 6px;
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
 }

 .teaser {
     font-size: 20px;
     font-weight: 700;
     line-height: 1.45;
     margin-bottom: 16px;
 }

 .byline {
     font-size: 13px;
     color: var(--gray);
     border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
     padding: 8px 0;
     margin-bottom: 18px;
 }

 /* ---------- FOTOS (borda fina) ---------- */
 .pic {
     position: relative;
     border: 1px solid #000;
     margin: 20px 0;
 }

 .pic img {
     width: 100%;
 }

 .pic .cap {
     background: var(--black);
     color: #fff;
     font-size: 14px;
     font-weight: 700;
     padding: 8px 10px;
 }

 .pic .cap span {
     color: var(--yellow);
 }

 /* flagra paparazzi */
 .paparazzi img {
     filter: contrast(1.15) saturate(.85) brightness(.92);
 }

 .paparazzi::before {
     content: "";
     position: absolute;
     inset: 0;
     bottom: 38px;
     pointer-events: none;
     z-index: 1;
     background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45) 100%);
 }

 .paparazzi .stamp {
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 2;
     background: var(--red);
     color: #fff;
     font: 22px/1 'Anton', sans-serif;
     padding: 6px 10px;
     transform: rotate(-4deg);
     text-transform: uppercase;
 }

 .paparazzi .blur-circle {
     position: absolute;
     z-index: 2;
     top: 18%;
     left: 42%;
     width: 22%;
     aspect-ratio: 1;
     border: 3px solid var(--yellow);
     border-radius: 50%;
 }

 /* print de TV */
 .tvprint {
     background: #000;
 }

 .tvprint .screen {
     position: relative;
     overflow: hidden;
 }

 .tvprint img {
     filter: saturate(1.2) contrast(1.05) blur(.3px);
 }

 .tvprint .screen::after {
     content: "";
     position: absolute;
     inset: 0;
     pointer-events: none;
     background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
 }

 .tvprint .live {
     position: absolute;
     top: 10px;
     right: 10px;
     z-index: 2;
     background: var(--red);
     color: #fff;
     font: 900 12px 'Roboto', sans-serif;
     padding: 3px 8px;
     letter-spacing: 1px;
 }

 .tvprint .chyron {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 14px;
     z-index: 2;
     display: flex;
     font-weight: 900;
     font-size: 13px;
     text-transform: uppercase;
 }

 .tvprint .chyron b {
     background: var(--yellow);
     color: #000;
     padding: 4px 8px;
 }

 .tvprint .chyron span {
     background: rgba(0, 0, 0, .8);
     color: #fff;
     padding: 4px 8px;
     flex: 1;
 }

 .article p {
     margin-bottom: 18px;
 }

 .article h2 {
     font: 30px/1.1 'Anton', sans-serif;
     text-transform: uppercase;
     color: var(--red);
     margin: 30px 0 12px;
 }

 .article strong {
     background: var(--yellow);
     padding: 0 3px;
 }

 .shock {
     background: var(--red);
     color: #fff;
     padding: 18px 16px;
     margin: 24px 0;
     font: 26px/1.2 'Anton', sans-serif;
     text-transform: uppercase;
     text-align: center;
     border: 3px solid var(--black);
 }

 .cta {
     display: block;
     background: var(--yellow);
     color: var(--black);
     border: 3px solid var(--black);
     text-align: center;
     text-decoration: none;
     font: 26px/1.2 'Anton', sans-serif;
     text-transform: uppercase;
     padding: 16px;
     margin: 30px 0;
     box-shadow: 6px 6px 0 var(--red);
 }

 .cta:hover {
     transform: translate(2px, 2px);
     box-shadow: 4px 4px 0 var(--red);
 }

 .footer {
     background: var(--black);
     color: #aaa;
     text-align: center;
     font-size: 12px;
     padding: 22px 16px;
 }

 @media (max-width: 768px) {
     h1 {
         font-size: 42px;
     }
 }

 @media (min-width: 768px) {
     h1 {
         font-size: 76px;
     }
 }