:root{
      --bg: #0b1220;
      --panel: rgba(255,255,255,.07);
      --panel2: rgba(255,255,255,.09);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --gold: #d6b15e;
      --gold2:#f0d28a;
      --line: rgba(214,177,94,.22);
      --shadow: 0 18px 70px rgba(0,0,0,.45);
      --radius: 18px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1200px 600px at 20% 10%, rgba(214,177,94,.16), transparent 55%),
        radial-gradient(900px 520px at 85% 20%, rgba(123,171,255,.16), transparent 50%),
        radial-gradient(1000px 700px at 50% 100%, rgba(255,255,255,.06), transparent 65%),
        linear-gradient(180deg, #070c16 0%, #0b1220 60%, #050913 100%);
      color:var(--text);
      overflow-x:hidden;
    }

    /* Sutil “vitral” */
    .stained {
      position: fixed;
      inset: -30%;
      pointer-events:none;
      opacity:.38;
      filter: blur(1px);
      background:
        conic-gradient(from 180deg at 50% 50%,
          rgba(214,177,94,.20),
          rgba(123,171,255,.18),
          rgba(240,210,138,.18),
          rgba(214,177,94,.20)
        );
      mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1), rgba(0,0,0,0) 62%);
      transform: rotate(7deg);
    }

    .container{max-width:1100px; margin:0 auto; padding:24px}
    header{
      position: sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(12px);
      background: linear-gradient(180deg, rgba(11,18,32,.78), rgba(11,18,32,.55));
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
      padding:14px 24px;
      max-width:1500px; margin:0 auto;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      text-decoration:none; color:var(--text);
      font-weight:600;
    }
    .logo{
      width:38px; height:38px; border-radius:12px;
      background:
        radial-gradient(circle at 30% 30%, rgba(240,210,138,.9), rgba(214,177,94,.55) 50%, rgba(0,0,0,.0) 70%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
      border:1px solid rgba(214,177,94,.35);
      box-shadow: 0 10px 30px rgba(214,177,94,.16);
      position:relative;
      overflow:hidden;
    }
    .logo:after{
      content:"";
      position:absolute; inset: -40%;
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 55%);
      transform: rotate(25deg);
      opacity:.55;
    }
    .brand span{
      font-family:"Playfair Display", serif;
      letter-spacing:.2px;
      font-size:16px;
    }
    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border-radius:999px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(214,177,94,.20);
      color:var(--muted);
      font-size:13px;
      max-width: 72ch;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .pill b{color:var(--gold2); font-weight:600}
    .actions{display:flex; gap:10px; align-items:center}
    .btn{
      appearance:none; border:0;
      color:var(--text);
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      padding:10px 12px;
      border-radius:999px;
      cursor:pointer;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      font-weight:600;
      font-size:13px;
      text-decoration:none;
      display:inline-flex; align-items:center; gap:8px;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(214,177,94,.25)}
    .btn.primary{
      background: linear-gradient(180deg, rgba(214,177,94,.22), rgba(214,177,94,.08));
      border-color: rgba(214,177,94,.28);
      box-shadow: 0 18px 60px rgba(214,177,94,.10);
    }

    /* Hero */
    .hero{
      padding: 34px 0 14px;
    }
    .heroCard{
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
      border:1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .heroCard:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(700px 200px at 25% 0%, rgba(214,177,94,.20), transparent 60%),
        radial-gradient(700px 220px at 80% 0%, rgba(123,171,255,.18), transparent 62%);
      pointer-events:none;
      opacity:.9;
    }
    .heroInner{
      position:relative;
      padding: 26px 26px 22px;
      display:grid;
      grid-template-columns: 1.35fr .65fr;
      gap: 18px;
      align-items:center;
    }
    h1{
      margin:0;
      font-family:"Playfair Display", serif;
      font-size: clamp(28px, 3.2vw, 44px);
      line-height: 1.08;
      letter-spacing:.2px;
    }
    .lead{
      margin:10px 0 0;
      color:var(--muted);
      max-width: 70ch;
      font-size: 15px;
      line-height: 1.6;
    }
    .verseBox{
      border-radius: 16px;
      border:1px solid rgba(214,177,94,.25);
      background: rgba(0,0,0,.12);
      padding: 14px;
    }
    .verseBox .kicker{
      color: rgba(240,210,138,.92);
      font-weight:700;
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      margin-bottom: 8px;
    }
    .verseBox .quote{
      margin:0;
      color: rgba(255,255,255,.86);
      font-family:"Playfair Display", serif;
      font-size: 16px;
      line-height:1.45;
    }
    .verseBox .ref{
      margin-top:10px;
      color: rgba(255,255,255,.68);
      font-size:13px;
    }

    /* Iframe section */
    .section{
      margin-top: 18px;
      padding-bottom: 34px;
    }
    .frameWrap{
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
      border:1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow);
      position:relative;
    }
    .frameTop{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.10);
    }
    .frameTitle{
      display:flex; align-items:center; gap:10px;
      font-weight:700;
    }
    .dot{
      width:10px; height:10px; border-radius:999px;
      background: rgba(214,177,94,.75);
      box-shadow: 0 0 0 5px rgba(214,177,94,.12);
    }
    .frameNote{
      color: var(--muted);
      font-size: 13px;
    }

    .iframeBox{
      position:relative;
      width:100%;
      height: min(70vh, 760px);
      background: rgba(0,0,0,.18);
    }
    iframe{
      width:100%;
      height:100%;
      border:0;
      display:block;
      background: rgba(0,0,0,.08);
    }

    /* Loader */
    .loader{
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      gap: 14px;
      padding: 18px;
      background: linear-gradient(180deg, rgba(11,18,32,.70), rgba(11,18,32,.45));
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255,255,255,.06);
      color: rgba(255,255,255,.78);
      transition: opacity .25s ease, visibility .25s ease;
    }
    .loader.hidden{
      opacity:0;
      visibility:hidden;
    }
    .ring{
      width:22px; height:22px;
      border-radius:999px;
      border:2px solid rgba(214,177,94,.22);
      border-top-color: rgba(214,177,94,.75);
      animation: spin 1s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg)}}

    footer{
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 18px 0;
      color: rgba(255,255,255,.62);
      font-size: 13px;
    }

    /* Responsive */
    @media (max-width: 900px){
      .heroInner{grid-template-columns: 1fr; }
      .pill{display:none;}
      .iframeBox{height: min(74vh, 820px);}
    }




    /* ===== Botón En Vivo ===== */
    .btn-live{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    text-decoration:none;
    color:#fff;
    background: linear-gradient(
        180deg,
        rgba(200,40,40,.95),
        rgba(140,20,20,.95)
    );
    border:1px solid rgba(255,255,255,.15);
    box-shadow:
        0 0 0 0 rgba(200,40,40,.6),
        0 10px 30px rgba(0,0,0,.45);
    position:relative;
    transition: transform .15s ease, box-shadow .15s ease;
    }

    .btn-live:hover{
    cursor: pointer;
    transform: translateY(-1px);
    box-shadow:
        0 0 0 6px rgba(200,40,40,.25),
        0 14px 36px rgba(0,0,0,.55);
    }

    /* Punto animado */
    .live-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff3b3b;
    box-shadow:0 0 6px rgba(255,60,60,.9);
    animation: livePulse 1.4s infinite;
    }

    @keyframes livePulse{
    0%{transform:scale(1);opacity:1}
    50%{transform:scale(1.6);opacity:.4}
    100%{transform:scale(1);opacity:1}
    }

    /* Mobile ajuste */
    @media (max-width:900px){
    .btn-live{
        padding:9px 12px;
        font-size:12px;
    }
    }

    /* ===== Botón YouTube Bethania ===== */
    .btn-youtube{
    cursor: pointer;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    text-decoration:none;
    color:#fff;
    background: linear-gradient(
        180deg,
        #ff2c2c,
        #cc0000
    );
    border:1px solid rgba(255,255,255,.18);
    box-shadow:
        0 10px 26px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    }

    /* Hover */
    .btn-youtube:hover{
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 14px 34px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.16);
    }

    /* Ícono tipo YouTube */
    .yt-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:12px;
    height:12px;
    border-radius:6px;
    background:#fff;
    color:#cc0000;
    font-size:6px;
    font-weight:900;
    line-height:1;
    }

    /* Mobile */
    @media (max-width:900px){
    .btn-youtube{
        padding:9px 12px;
        font-size:12px;
    }
    }

    .menu-toggle{
    display:none;
    width:42px;height:42px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    cursor:pointer;
    align-items:center;
    justify-content:center;
    }
    .menu-bars{
    width:18px;height:2px;
    background: rgba(255,255,255,.85);
    border-radius:99px;
    position:relative;
    }
    .menu-bars:before,.menu-bars:after{
    content:"";
    position:absolute;left:0;
    width:18px;height:2px;
    background: rgba(255,255,255,.85);
    border-radius:99px;
    }
    .menu-bars:before{ top:-6px; }
    .menu-bars:after{ top:6px; }

    .mobile-menu{
    position:fixed; inset:0;
    z-index:9999;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    opacity:0; visibility:hidden;
    transition: opacity .18s ease, visibility .18s ease;
    }
    .mobile-menu.open{ opacity:1; visibility:visible; }

    .mobile-sheet{
    position:absolute;
    top:10px; left:10px; right:10px;
    border-radius:18px;
    padding:14px;
    background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.80));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 70px rgba(0,0,0,.55);
    }

    .mobile-top{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:10px;
    }
    .mobile-title{
    font-family:"Playfair Display", serif;
    font-weight:700;
    }
    .menu-close{
    width:40px;height:40px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    cursor:pointer;
    }
    .mobile-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    }

    /* ✅ En móvil: oculto acciones del header y muestro el toggle */
    @media (max-width: 900px){
    .actions{ display:none !important; }
    .pill{ display:none !important; }
    .menu-toggle{ display:inline-flex !important; }
    }





    /* ===== Botón Spotify (Música) ===== */
    .btn-spotify{
      cursor: pointer;
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      font-size:13px;
      font-weight:800;
      letter-spacing:.03em;
      text-decoration:none;
      color:#0b1220;

      /* estilo Spotify: verde + profundidad */
      background: linear-gradient(180deg, rgba(29,185,84,1), rgba(19,140,63,1));
      border:1px solid rgba(255,255,255,.16);
      box-shadow:
        0 10px 26px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.16);
      transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    }

    .btn-spotify:hover{
      transform: translateY(-1px);
      filter: brightness(1.05);
      box-shadow:
        0 14px 34px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.18);
    }

    /* Logo Spotify (sin imágenes, puro CSS) */
    .sp-icon{
      width:18px;
      height:18px;
      border-radius:999px;
      position:relative;
      background:#0b1220; /* círculo negro */
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    }

    /* 3 ondas tipo Spotify */
    .sp-icon::before,
    .sp-icon::after{
      content:"";
      position:absolute;
      left:4px;
      right:4px;
      height:2px;
      border-radius:99px;
      background: rgba(29,185,84,1);
      opacity:.95;
    }

    .sp-icon::before{
      top:6px;
      box-shadow:
        0 4px 0 rgba(29,185,84,1);
    }

    .sp-icon::after{
      top:10px;
      transform: scaleX(.88);
      opacity:.9;
    }

    /* Mobile ajuste */
    @media (max-width:900px){
      .btn-spotify{
        padding:9px 12px;
        font-size:12px;
      }
      .sp-icon{ width:16px; height:16px; }
    }




    header {
    position: sticky;
    top: 12px;
    margin: 0 12px;
    border-radius: 20px;

    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);

    background:
      radial-gradient(
        600px 120px at 15% 0%,
        rgba(214,177,94,.25),
        transparent 60%
      ),
      radial-gradient(
        500px 140px at 85% 0%,
        rgba(123,171,255,.22),
        transparent 65%
      ),
      linear-gradient(
        180deg,
        rgba(11,18,32,.92),
        rgba(11,18,32,.70)
      );

    border: 1px solid rgba(214,177,94,.22);

    box-shadow:
      0 28px 80px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.06);
    }

    header::before {
    content:"";
    position:absolute;
    top:0;
    left:12%;
    right:12%;
    height:1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(240,210,138,.65),
      transparent
    );
    opacity:.55;
    }


    header::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:
      radial-gradient(
        800px 200px at 50% -50%,
        rgba(255,255,255,.08),
        transparent 70%
      );
    pointer-events:none;
    }


    .nav {
    position: relative;
    z-index: 1;
    }






    .btn.primary {
    background:
      linear-gradient(
        180deg,
        rgba(214,177,94,.35),
        rgba(214,177,94,.15)
      );
    border-color: rgba(214,177,94,.45);
    box-shadow:
      0 20px 60px rgba(214,177,94,.22),
      inset 0 1px 0 rgba(255,255,255,.25);
    font-size: 14px;
    letter-spacing: .04em;
    }


    .group-actions {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    padding: 6px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    }

    .logo {
    box-shadow:
    0 0 0 1px rgba(214,177,94,.35),
    0 12px 30px rgba(214,177,94,.25);
    }



    .brand span {
    font-size: 17px;
    letter-spacing: .4px;
    }


    header::after {
    content:"";
    position:absolute;
    left:20%;
    right:20%;
    bottom:-1px;
    height:1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(214,177,94,.6),
      transparent
    );
    opacity:.6;
    }


    .mobile-sheet {
    border-radius: 22px;
    box-shadow:
      0 30px 90px rgba(0,0,0,.65),
      inset 0 1px 0 rgba(255,255,255,.06);
    }


    /* ===== BOTÓN BASE UNIFICADO ===== */
    .btn,
    .btn-live,
    .btn-youtube,
    .btn-spotify {
      height: 42px;                 /* ALTURA UNIFORME */
      padding: 0 16px;              /* MISMO PADDING */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: .04em;

      border-radius: 999px;
      white-space: nowrap;
    }


    .sp-icon,
    .yt-icon,
    .live-dot {
      flex-shrink: 0;
    }


    .btn.primary {
    height: 42px; /* reafirmamos */
    font-weight: 800;
    }

    .btn-live {
    height: 42px;
    }

    .btn-spotify,
    .btn-youtube {
      height: 42px;
    }


    @media (max-width:900px){
    .btn,
    .btn-live,
    .btn-youtube,
    .btn-spotify {
      height: 40px;
      font-size: 12px;
      padding: 0 14px;
      }
    }



    /* ===== PILL TICKER (tipo noticias) ===== */
    .pill.pill-ticker{
      position: relative;
      padding: 10px 14px;
      border-radius: 999px;
      background:
        radial-gradient(500px 120px at 20% 30%, rgba(214,177,94,.18), transparent 60%),
        radial-gradient(520px 140px at 85% 30%, rgba(123,171,255,.16), transparent 62%),
        rgba(255,255,255,.06);
      border: 1px solid rgba(214,177,94,.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
      color: rgba(255,255,255,.78);
    }

    .ticker-viewport{
      overflow: hidden;
      width: min(72ch, 720px);
    }

    .ticker-track{
      display: inline-flex;
      align-items: center;
      gap: 18px;
      will-change: transform;
      animation: tickerMove 32s linear infinite;
    }

    /* Pausa al pasar el mouse */
    .pill-ticker:hover .ticker-track{
      animation-play-state: paused;
    }

    /* Cada item */
    .ticker-item{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
      font-size: 13px;
    }

    /* “Separador” elegante */
    .ticker-sep{
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: rgba(214,177,94,.7);
      box-shadow: 0 0 0 5px rgba(214,177,94,.12);
      opacity: .9;
    }

    /* Texto resaltado (frase o palabra clave) */
    .ticker-item b{
      color: rgba(240,210,138,.95);
      font-weight: 700;
    }

    /* Fades laterales para efecto “noticias” */
    .ticker-fade{
      position: absolute;
      top: 0;
      bottom: 0;
      width: 44px;
      pointer-events: none;
      border-radius: 999px;
    }

    .ticker-fade.left{
      left: 0;
      background: linear-gradient(90deg, rgba(11,18,32,.95), rgba(11,18,32,0));
    }

    .ticker-fade.right{
      right: 0;
      background: linear-gradient(270deg, rgba(11,18,32,.95), rgba(11,18,32,0));
    }

    /* Animación tipo marquee */
    @keyframes tickerMove{
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* Responsive: ajusta ancho */
    @media (max-width: 1100px){
      .ticker-viewport{ width: min(60ch, 560px); }
    }
    @media (max-width: 900px){
      /* si quieres mostrarlo en móvil, elimina el display:none del .pill en tu CSS.
        Si prefieres ocultarlo en móvil, déjalo como ya lo tienes. */
      .ticker-viewport{ width: min(46ch, 360px); }
    }




    /* ===== Mostrar ticker debajo del menú en móvil ===== */
    @media (max-width: 900px){
      /* En móvil: el header se vuelve de 2 filas */
      .nav{
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding-bottom: 12px;
      }

      /* Logo/Marca arriba */
      .brand{ order: 1; }

      /* Botón hamburguesa arriba a la derecha */
      .menu-toggle{
        order: 2;
        margin-left: auto;
      }

      /* ✅ Mostrar la pill y mandarla debajo */
      .pill.pill-ticker{
        display: flex !important;
        order: 3;
        width: 100%;
        margin-top: 8px;
      }

      /* Que el viewport del ticker use todo el ancho */
      .pill.pill-ticker .ticker-viewport{
        width: 100%;
      }

      /* Fades un poquito más cortos en móvil */
      .pill.pill-ticker .ticker-fade{
        width: 34px;
      }
    }