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

    body {
      font-family: 'Poppins', sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(-45deg, #00b4d8, #ffb703, #ffd166, #48cae4);
      background-size: 400% 400%;
      animation: fondo 12s ease infinite;
      color: white;
      text-align: center;
    }

    @keyframes fondo {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .card {
      width: min(900px, 92vw);
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(12px);
      border-radius: 25px;
      padding: 30px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    }

    header img {
      width: 120px;
      height: auto;
      border-radius: 15px;
      border: 2px solid #333;
      padding: 4px;
      background-color: #fff;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: 5px;
    }

    .sub {
      opacity: 0.9;
      margin-bottom: 20px;
    }

    .live-badge {
      display: inline-block;
      background: #e63946;
      padding: 8px 16px;
      border-radius: 999px;
      font-weight: bold;
      margin-bottom: 15px;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      50% { transform: scale(1.05); }
    }

    .live-box {
      margin: 20px 0;
      min-height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .media-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
    }

    @media (min-width: 650px) {
      .media-container {
        flex-direction: row;
        gap: 30px;
      }
    }

    .offline-notice {
      background: rgba(255,255,255,0.1);
      padding: 25px;
      border-radius: 15px;
      font-size: 0.95rem;
      max-width: 340px;
      line-height: 1.5;
    }

    .audio-box {
      background: rgba(255, 255, 255, 0.15);
      padding: 15px;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 340px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }

    .audio-box p {
      font-size: 0.95rem;
      font-weight: 500;
    }

    .zeno-wrapper {
      width: 100%;
      max-width: 280px;
      height: 100px;
      border-radius: 12px;
      overflow: hidden;
      background: transparent;
    }

    /* Estilos para el contenedor del botón de Facebook */
    .fb-live-card {
      width: 100%;
      max-width: 340px;
      padding: 25px;
      background: rgba(255,255,255,0.1);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255,255,255,0.15);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .fb-btn {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #1877f2;
      color: white;
      padding: 14px 24px;
      border-radius: 999px;
      font-weight: bold;
      font-size: 1rem;
      box-shadow: 0 4px 15px rgba(24,119,242,0.3);
      transition: transform 0.3s, background 0.3s;
      width: 100%;
      justify-content: center;
    }

    .fb-btn:hover {
      background: #166fe5;
      transform: scale(1.03);
    }

    /* --- SECCIÓN DEL FOOTER --- */
    footer {
      margin-top: 25px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 20px;
    }

    footer h3 {
      font-size: 1.1rem;
      font-weight: 500;
      margin-bottom: 12px;
      opacity: 0.95;
    }

    .socials {
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .socials a {
      text-decoration: none;
      color: white;
      background: rgba(255,255,255,0.15);
      padding: 10px 20px;
      border-radius: 999px;
      transition: 0.3s;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Colores hover personalizados por marca */
    .socials a.fb:hover { background: #1877f2; color: white; }
    .socials a.ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; }
    .socials a.wa:hover { background: #25d366; color: white; }
    .socials a.yt:hover { background: #ff0000; color: white; }

    .contact-box {
      margin-bottom: 15px;
      background: rgba(255, 255, 255, 0.08);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 20px;
      border-radius: 999px;
      font-size: 0.95rem;
    }

    .contact-box i {
      color: #ffd166;
    }
  
    .youtube-box{

    background:rgba(255,255,255,.15);
    padding:15px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:340px;

}

.youtube-player{

    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:12px;

}

.youtube-player iframe{

    width:100%;
    height:100%;
    border:0;

}

.youtube-offline{

    padding:20px;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    text-align:center;

}