/* Vivent en sus páginas públicas de boletas (/eventos/… en viventmusic.com, 8-oct-2026). Se carga DESPUÉS de boletas/eventos.css y solo en el
   dominio de Vivent (functions/eventos/[[ruta]].js): redefine sus variables con los colores de la página de Vivent (negro #060606, texto
   #F5F3EE, Poppins autoalojada) y estila el marco (sitio-vivent/boletas-marco.html). El color de cada evento (--acento) no se toca. */
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url(assets/fonts/poppins-400-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;src:url(assets/fonts/poppins-500-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url(assets/fonts/poppins-600-latin.woff2) format('woff2')}
:root{--fondo:#060606;--tarjeta:#101010;--tarjeta2:#171717;--linea:#2A2A2A;--texto:#F5F3EE;--suave:#A9A69F;--radio:18px;--lado:clamp(16px,4vw,44px)}
body{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:600;letter-spacing:-.025em}
h1{font-size:clamp(1.9rem,6.5vw,3rem)}
.cabeza small{font-size:12px;letter-spacing:.32em;color:var(--suave)}
.btn{font-weight:600}
body dialog.cmp[data-tema]{--cmp-f:#101010;--cmp-b:#171717;--cmp-l:#2A2A2A;--cmp-s:#A9A69F;font-family:'Poppins',system-ui,sans-serif}

/* cabecera: una fila, logo a la izquierda y tres enlaces a la derecha (también a 390 px: sin menú) */
.vc-cab{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1180px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) var(--lado) 14px;border-bottom:1px solid var(--linea)}
.vc-logo{position:relative;display:block;flex:none;border-radius:6px}
.vc-logo img{width:112px;height:auto;filter:brightness(.8)}
/* latido del logo (18-oct-2026): igual que .nav-logo en vivent.css (este archivo no lo carga): una luz plateada tenue recorre el dibujo, cruza en 0,9 s y descansa 3,4 s. Apagarlo: borrar este bloque. */
.vc-logo::before,.vc-logo::after{content:'';position:absolute;left:0;top:0;width:100%;aspect-ratio:396/164;pointer-events:none;
  -webkit-mask:url(/sitio-vivent/assets/vivent-blanco.png) center/contain no-repeat;mask:url(/sitio-vivent/assets/vivent-blanco.png) center/contain no-repeat;
  background:linear-gradient(100deg,transparent 30%,rgba(236,238,246,0) 36%,rgba(255,255,255,1) 50%,rgba(236,238,246,0) 64%,transparent 70%) 110% 0/250% 100% no-repeat;
  animation:vl-latido 4.3s cubic-bezier(.4,0,.2,1) 1s infinite}
.vc-logo::after{opacity:.55;animation-delay:1.25s}
.vc-logo:hover::before,.vc-logo:hover::after,.vc-logo:focus-visible::before,.vc-logo:focus-visible::after{animation:vl-latido-rapido 1.2s cubic-bezier(.4,0,.2,1) infinite}
.vc-logo:hover::after,.vc-logo:focus-visible::after{animation-delay:.2s}
@keyframes vl-latido{0%{background-position:110% 0}21%,100%{background-position:-10% 0}}
@keyframes vl-latido-rapido{0%{background-position:110% 0}75%,100%{background-position:-10% 0}}
/* chispa de la W (19-oct-2026): igual que en vivent.css (.nav-logo): la luz corre por la W del <svg class="logo-w"> de boletas-marco.html y enciende el punto. Apagarla: quitar ese <svg> o poner .logo-w{display:none}. */
.logo-w{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:396/164;overflow:visible;pointer-events:none}
.logo-w use{fill:none;stroke-linecap:round;stroke-linejoin:round}
.vw-halo{stroke:rgba(228,230,236,.8);stroke-width:26;stroke-dasharray:150 3000;filter:url(#vw-brillo)}
.vw-cola{stroke:rgba(255,255,255,.35);stroke-width:12;stroke-dasharray:300 3000}
.vw-luz{stroke:#fff;stroke-width:13;stroke-dasharray:110 3000}
.vw-pulso{stroke-dashoffset:-1010;animation:vw-chispa 4.3s cubic-bezier(.4,0,.2,1) .85s infinite}
.vw-eco{opacity:.45;animation-delay:1.1s}
.vw-eco .vw-luz{stroke-dasharray:70 3000}.vw-eco .vw-halo{stroke-dasharray:100 3000}
.vw-punto{fill:#fff;opacity:0;animation:vw-punto 4.3s linear .85s infinite}
.vw-punto-halo{fill:rgba(216,218,224,.8);filter:url(#vw-brillo)}
.vc-logo:hover .vw-pulso,.vc-logo:focus-visible .vw-pulso{animation:vw-chispa-rapida 1.2s cubic-bezier(.4,0,.2,1) infinite}
.vc-logo:hover .vw-eco,.vc-logo:focus-visible .vw-eco{animation-delay:.2s}
.vc-logo:hover .vw-punto,.vc-logo:focus-visible .vw-punto{animation:vw-punto-rapido 1.2s linear infinite}
@keyframes vw-chispa{0%{stroke-dashoffset:-1010}18.6%{stroke-dashoffset:0}27%,100%{stroke-dashoffset:320}}
@keyframes vw-chispa-rapida{0%{stroke-dashoffset:-1010}55%{stroke-dashoffset:0}75%,100%{stroke-dashoffset:320}}
@keyframes vw-punto{0%,16.5%{opacity:0}19%{opacity:1}23%{opacity:.25}25%{opacity:.6}31%,100%{opacity:0}}
@keyframes vw-punto-rapido{0%,50%{opacity:0}56%{opacity:1}64%{opacity:.25}72%{opacity:.6}85%,100%{opacity:0}}
.vc-nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);min-width:0}
.vc-nav a{position:relative;display:inline-grid;place-items:center;min-height:44px;font:500 13.5px/1 'Poppins',system-ui,sans-serif;color:var(--texto);text-decoration:none;opacity:.86;white-space:nowrap}
.vc-nav a:hover,.vc-nav a:focus-visible,.vc-nav a[aria-current=page]{opacity:1}
.vc-nav a:not(.vc-cta)::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.vc-nav a:not(.vc-cta):hover::after,.vc-nav a:not(.vc-cta):focus-visible::after,.vc-nav a[aria-current=page]::after{transform:scaleX(1)}
.vc-nav .vc-cta{opacity:1;min-height:40px;padding:0 16px;border:1px solid var(--texto);border-radius:999px;transition:background .2s,color .2s}
.vc-nav .vc-cta:hover,.vc-nav .vc-cta:focus-visible{background:var(--texto);color:#0a0a0a}
.vc-saltar{position:absolute;left:12px;top:-60px;z-index:60;padding:12px 18px;border-radius:999px;background:var(--texto);color:#0a0a0a;font:600 14px/1 'Poppins',sans-serif;text-decoration:none;transition:top .2s}
.vc-saltar:focus{top:12px}
:focus-visible{outline:2px solid var(--texto);outline-offset:3px}
@media (max-width:420px){.vc-logo img{width:92px}.vc-nav{gap:12px}.vc-nav a{font-size:13px}.vc-nav .vc-cta{padding:0 12px}}
@media (max-width:340px){.vc-logo img{width:78px}.vc-nav{gap:9px}.vc-nav a{font-size:12.5px}}

/* pie de Vivent (como el de su 404): logo, "Boletas por Vivent" y las marcas */
.vc-pie{display:grid;justify-items:center;gap:10px;margin-top:24px;padding:34px 18px calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);color:var(--suave);font-size:13.5px;text-align:center}
.vc-pie p{margin:0}
.vc-pie img{width:40px;height:40px;opacity:.9}
.vc-marcas a{color:var(--texto);text-decoration:none;border-bottom:1px solid #555;display:inline-block;padding:10px 2px 2px}
.vc-marcas a:hover,.vc-marcas a:focus-visible{border-color:var(--texto)}
@media (prefers-reduced-motion:reduce){.vc-logo::before,.vc-logo::after{animation:none!important;display:none}.logo-w{display:none}.vc-nav a::after,.vc-nav .vc-cta,.vc-saltar{transition:none!important}}

/* "¿Tu evento? Créalo aquí" al final de la lista de eventos (18-oct-2026, boletas/eventos.js → cajaRenta; el marco trae data-renta) */
.renta-caja{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;width:calc(100% - 32px);max-width:1048px;margin:8px auto 0;padding:22px clamp(16px,4vw,28px);border:1px solid var(--linea);border-radius:var(--radio);background:var(--tarjeta)}
.renta-caja h2{font-size:1.2rem;margin:0 0 4px}
.renta-caja p{margin:0;color:var(--suave);font-size:15px;max-width:52ch}
.renta-caja .btn{flex:0 0 auto;background:var(--texto);color:var(--fondo)}
@media (max-width:560px){.renta-caja .btn{flex:1 1 100%}}