  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      background-color: #000000;
      color: #333;
    }

    header {
      position: relative;
      background: linear-gradient(135deg, rgba(30, 60, 114, 0.8), rgba(42, 82, 152, 0.8));
      color: white;
      text-align: center;
      padding: 5rem;
      overflow: hidden;
      z-index: 1;
    }

    header .backdrop-carousel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      white-space: nowrap;
      animation: slideCarousel 1200s linear infinite;
      z-index: -1;
      will-change: transform;
    }

    header .backdrop-carousel:hover,
    footer .backdrop-carousel:hover {
      animation-play-state: paused;
    }

    header .backdrop-carousel img {
      width: 100vw;
      height: 100%;
      object-fit: cover;
      flex-shrink: 0;
      opacity: 0.5;
    }

    header h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
      position: relative;
      z-index: 2;
    }

    header p {
      position: relative;
      z-index: 2;
    }

    .menu {
      position: fixed;
      top: 0;
      width: 100%;
      background: rgba(30, 60, 114, 0.9);
      padding: 1rem;
      z-index: 100;
    }

    .menu ul {
      list-style: none;
      display: flex;
      justify-content: center;
      gap: 2rem;
    }

    .menu ul li {
      color: white;
      cursor: pointer;
      font-size: 1.2rem;
    }

    .menu ul li:hover {
      text-decoration: underline;
    }

    .content {
      margin-top: 60px;
      max-width: 1200px;
      margin: 60px auto 0;
      padding: 2rem;
    }

    .main-content, .menu-content {
      display: none;
    }

    .main-content.active, .menu-content.active {
      display: block;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }

    .channel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .channel-card {
      background: rgba(51, 51, 51, 0.5);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .channel-card:hover {
      transform: scale(1.05);
    }

    .channel-card img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }

    .channel-card h3 {
      text-align: center;
      padding: 1rem;
      font-size: 1.2rem;
      color: #ffffff;
    }

    .channel-details {
      max-height: 0;
      overflow: hidden;
      background: rgba(51, 51, 51, 0.5);
      border-radius: 10px;
      margin-bottom: 1rem;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: max-height 0.5s ease;
    }

    .channel-details.active {
      max-height: 500px;
      padding: 1.5rem;
    }

    .channel-details .channel-logo {
      max-width: 100px;
      margin-bottom: 1rem;
    }

    .channel-details p.description {
      line-height: 1.6;
      color: #cccccc;
      margin-bottom: 1rem;
    }

    .channel-details .program-info {
      margin-top: 1rem;
    }

    .channel-details .program-info h4 {
      font-size: 1.1rem;
      color: #1e3c72;
      margin-bottom: 0.5rem;
    }

    .channel-details .program-info p {
      font-size: 0.95rem;
      color: #cccccc;
    }

    .channel-details .program-info .loading {
      color: #777;
      font-style: italic;
    }

    .channel-details .program-info .error {
      color: #F44336;
      font-weight: bold;
    }

    .rating {
      display: inline-block;
      padding: 2px 6px;
      color: white;
      font-size: 0.9rem;
      border-radius: 3px;
      margin-left: 0.5rem;
    }

    .rating-livre { background-color: #4CAF50; }
    .rating-6-anos { background-color: #42A5F5; }
    .rating-10-anos { background-color: #2196F3; }
    .rating-12-anos { background-color: #FFEB3B; color: #000000; }
    .rating-14-anos { background-color: #FF9800; }
    .rating-16-anos { background-color: #F44336; }
    .rating-18-anos { background-color: #000000; }
    .rating-não-informado { background-color: #777; }

    .subscription-info {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 1.5rem;
      background: rgba(51, 51, 51, 0.5);
      border-radius: 10px;
      text-align: center;
    }

    .subscription-info h2 {
      font-size: 1.8rem;
      color: #1e3c72;
      margin-bottom: 1rem;
    }

    .subscription-info p {
      font-size: 1.1rem;
      color: #cccccc;
      margin-bottom: 1rem;
    }

    .subscription-info img {
      max-width: 250px;
      margin-bottom: 1rem;
    }

    .subscription-info a {
      color: #42A5F5;
      text-decoration: none;
      font-weight: bold;
    }

    .subscription-info a:hover {
      text-decoration: underline;
    }

    .now-playing, .popular-movies, .popular-series {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 1rem;
      overflow: hidden;
      background: rgba(51, 51, 51, 0.5);
      border-radius: 10px;
    }

    .now-playing h2, .popular-movies h2, .popular-series h2 {
      text-align: center;
      margin-bottom: 1.5rem;
      font-size: 1.8rem;
      color: #1e3c72;
    }

    .now-playing .movie-carousel, .popular-movies .movie-carousel, .popular-series .movie-carousel {
      display: flex;
      white-space: nowrap;
      animation: slideMovies 40s linear infinite;
      will-change: transform;
    }

    .now-playing .movie-carousel:hover, 
    .popular-movies .movie-carousel:hover, 
    .popular-series .movie-carousel:hover {
      animation-play-state: paused;
    }

    .now-playing .movie-card, .popular-movies .movie-card, .popular-series .movie-card {
      flex: 0 0 200px;
      margin-right: 1rem;
      position: relative;
      text-align: center;
    }

    .now-playing .movie-card img, .popular-movies .movie-card img, .popular-series .movie-card img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }

    .popular-movies .movie-card .popularity-circle, .popular-series .movie-card .popularity-circle {
      position: absolute;
      bottom: 20px;
      left: 10px;
      width: 40px;
      height: 40px;
      background-color: #1e3c72;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      font-weight: bold;
    }

    .popular-movies .movie-card .popularity-circle svg, .popular-series .movie-card .popularity-circle svg {
      position: absolute;
      top: -2px;
      left: -2px;
      width: 44px;
      height: 44px;
    }

    .popular-movies .movie-card .popularity-circle .progress-ring__circle, 
    .popular-series .movie-card .popularity-circle .progress-ring__circle {
      fill: transparent;
      stroke: #4caf50;
      stroke-width: 2;
      stroke-dasharray: 125.6;
      stroke-dashoffset: 0;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

    .now-playing .movie-card h3, .popular-movies .movie-card h3, .popular-series .movie-card h3 {
      margin-top: 1rem;
      font-size: 1rem;
      color: #ffffff;
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .popular-series .movie-card .trailer-label {
      position: absolute;
      top: 5px;
      left: 5px;
      background: rgba(0, 0, 0, 0.6);
      color: red;
      font-size: 13px;
      font-weight: bold;
      padding: 2px 6px;
      transform: rotate(-45deg);
      transform-origin: 5px 5px;
      border: 1px solid white;
      z-index: 10;
    }

    .trailer-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }

    .trailer-modal.active {
      display: flex;
    }

    .trailer-modal .modal-content {
      background: white;
      border-radius: 10px;
      padding: 1rem;
      max-width: 800px;
      width: 90%;
      position: relative;
    }

    .trailer-modal iframe {
      width: 100%;
      height: 450px;
      border: none;
    }

    .trailer-modal .close-button {
      position: absolute;
      top: -30px;
      right: 0;
      color: white;
      font-size: 2rem;
      cursor: pointer;
    }

    footer {
      position: relative;
      background: linear-gradient(135deg, rgba(30, 60, 114, 0.8), rgba(42, 82, 152, 0.8));
      color: white;
      text-align: center;
      padding: 1rem;
      width: 100%;
      overflow: hidden;
      z-index: 1;
    }

    footer .backdrop-carousel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      white-space: nowrap;
      animation: slideCarousel 1200s linear infinite;
      z-index: -1;
      will-change: transform;
    }

    footer .backdrop-carousel img {
      width: 100vw;
      height: 100%;
      object-fit: cover;
      flex-shrink: 0;
      opacity: 0.5;
    }

    footer p {
      position: relative;
      z-index: 2;
    }

    @keyframes slideCarousel {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @keyframes slideMovies {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @media (max-width: 600px) {
      header {
        padding-top: 7rem;
      }

      header h1 {
        font-size: 1.8rem;
      }

      .channel-grid {
        grid-template-columns: 1fr;
      }

      .channel-card img {
        height: 120px;
      }

      .now-playing .movie-card, .popular-movies .movie-card, .popular-series .movie-card {
        flex: 0 0 150px;
      }

      .now-playing .movie-card img, .popular-movies .movie-card img, .popular-series .movie-card img {
        height: 225px;
      }

      .now-playing .movie-card h3, .popular-movies .movie-card h3, .popular-series .movie-card h3 {
        font-size: 0.9rem;
      }

      .trailer-modal iframe {
        height: 200px;
      }

      .popular-series .movie-card .trailer-label {
        font-size: 11px;
        padding: 2px 5px;
        top: 4px;
        left: 4px;
        transform-origin: 4px 4px;
      }

      .channel-details .channel-logo {
        max-width: 80px;
      }

      .channel-details .program-info h4 {
        font-size: 1rem;
      }

      .channel-details .program-info p {
        font-size: 0.85rem;
      }

      .subscription-info h2 {
        font-size: 1.5rem;
      }

      .subscription-info p {
        font-size: 1rem;
      }

      .subscription-info img {
        max-width: 250px;
      }

      .menu ul {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
      }
    }

    .menu-content .product-item {
      margin-bottom: 2rem;
    }

    .menu-content .product-item img {
      margin: 1rem auto;
      display: block;
      background: rgba(51, 51, 51, 0.5);
      padding: 10px;
      border-radius: 5px;
    }

    .menu-content .product-item img {
      max-width: 200px;
      width: 100%;
      height: auto;
    }

    .menu-content .product-item.products-img img {
      max-width: 500px;
      width: 100%;
      height: auto;
    }

    .menu-content .product-text {
      color: #cccccc;
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    .menu-content .close-menu-btn {
      display: block;
      margin: 1rem auto;
      padding: 0.5rem 1rem;
      background-color: #1e3c72;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
    }

    .menu-content .close-menu-btn:hover {
      background-color: #2a5298;
    }
  </style>