/* =====================================================================
   LAS BUENAS (js/ui/buenas.js): fósforos que se prenden en el tanteador + cartel de neón.
   ===================================================================== */
.tg-buenas-fuego { position: fixed; inset: 0; pointer-events: none; z-index: 9000; transition: opacity .5s ease; }
.tg-buenas-fuego.saliendo { opacity: 0; }

/* llama de cada fósforo: gota con degradé, nace en la cabeza del fósforo */
.tg-llama {
    position: absolute; display: block;
    transform: translate(-50%, -82%) scale(0);
    transform-origin: 50% 85%;
    border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
    background: radial-gradient(ellipse at 50% 72%, #fffbe0 0%, #ffe36a 22%, #ff9d1a 48%, #ff4d00 66%, rgba(255, 60, 0, 0) 78%);
    filter: drop-shadow(0 0 6px rgba(255, 150, 30, .9));
    mix-blend-mode: screen;
    animation: tgLlamaPrende .26s cubic-bezier(.3, 1.6, .5, 1) both, tgLlamaBaila .16s ease-in-out infinite alternate;
}
.tg-buenas-fuego.ellos .tg-llama { animation: tgLlamaPrende .26s cubic-bezier(.3, 1.6, .5, 1) both, tgLlamaApaga .5s ease-in forwards; }
@keyframes tgLlamaPrende { 0% { transform: translate(-50%, -82%) scale(0); } 60% { transform: translate(-50%, -82%) scale(1.35); } 100% { transform: translate(-50%, -82%) scale(1); } }
@keyframes tgLlamaBaila {
    0%   { transform: translate(-50%, -82%) scale(1, 1) skewX(-3deg); }
    100% { transform: translate(-50%, -84%) scale(.9, 1.12) skewX(4deg); }
}
@keyframes tgLlamaApaga {
    0%   { transform: translate(-50%, -82%) scale(1); opacity: 1; }
    40%  { transform: translate(-50%, -82%) scale(1.1, .8); opacity: 1; }
    100% { transform: translate(-50%, -60%) scale(0, .1); opacity: 0; }
}

/* humo cuando se apaga (ellos) */
.tg-humo-fosforo {
    position: absolute; display: block; opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 200, 200, .75) 0%, rgba(140, 140, 140, .35) 45%, rgba(120, 120, 120, 0) 70%);
    filter: blur(1.5px);
    animation: tgHumo 1.4s ease-out both;
}
@keyframes tgHumo {
    0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.4); }
    15%  { opacity: .9; }
    100% { opacity: 0;   transform: translate(-30%, -260%) scale(2.2) rotate(25deg); }
}

/* palabra que sale del fuego */
.tg-buenas-palabra {
    position: absolute; opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
    font-family: Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Arial Black', sans-serif;
    font-size: clamp(22px, 2.6cqw, 40px); letter-spacing: .06em; white-space: nowrap;
    color: #ffe36a;
    -webkit-text-stroke: 1.5px #5c1a00;
    text-shadow: 0 0 6px #ff9d1a, 0 0 14px #ff4d00, 0 0 26px #ff2a00, 0 -4px 10px rgba(255, 200, 0, .8);
    animation: tgPalabraFuego 1.1s cubic-bezier(.3, 1.4, .5, 1) both, tgPalabraTitila .12s steps(2) infinite;
}
@keyframes tgPalabraFuego {
    0%   { opacity: 0; transform: translate(-50%, 0%) scale(.4); }
    55%  { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
    100% { opacity: 1; transform: translate(-50%, -55%) scale(1); }
}
@keyframes tgPalabraTitila { 50% { text-shadow: 0 0 4px #ff9d1a, 0 0 12px #ff4d00, 0 0 30px #ff2a00, 0 -6px 12px rgba(255, 220, 0, .9); } }
.tg-buenas-fuego.ellos .tg-buenas-palabra {
    color: #9a9a9a; -webkit-text-stroke: 1px #2a2a2a;
    text-shadow: 0 0 8px rgba(160, 160, 160, .8), 0 0 18px rgba(90, 90, 90, .7);
    filter: blur(.3px);
    animation: tgPalabraHumo 1.3s ease-out both;
}
@keyframes tgPalabraHumo {
    0%   { opacity: 0; transform: translate(-50%, 0%) scale(.8); filter: blur(4px); }
    35%  { opacity: 1; transform: translate(-50%, -40%) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate(-50%, -140%) scale(1.25); filter: blur(5px); }
}

/* ---------- cartel de neón ---------- */
.tg-buenas-neon {
    position: fixed; inset: 0; z-index: 9001; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 50%, rgba(20, 8, 2, .55), rgba(4, 2, 0, .85));
    opacity: 0; transition: opacity .25s ease;
}
.tg-buenas-neon.visible { opacity: 1; }
.tg-neon-cartel {
    position: relative; text-align: center;
    padding: clamp(14px, 2.4cqh, 28px) clamp(26px, 4cqw, 60px) clamp(18px, 3cqh, 34px);
    border-radius: 26px;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #1c120a, #0d0804);
    border: 5px solid #3a2a12;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .8), 0 14px 40px rgba(0, 0, 0, .8);
    transform: scale(.9); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s ease, border-color .2s ease;
}
.tg-buenas-neon.visible .tg-neon-cartel { transform: scale(1); }
/* tubo del marco */
.tg-buenas-neon.nos   .tg-neon-cartel.marco-on { border-color: #ffd23f; box-shadow: inset 0 0 30px rgba(0, 0, 0, .8), inset 0 0 12px rgba(255, 190, 40, .5), 0 0 12px #ffb300, 0 0 32px rgba(255, 150, 0, .6), 0 14px 40px rgba(0, 0, 0, .8); }
.tg-buenas-neon.ellos .tg-neon-cartel.marco-on { border-color: #ff4b3a; box-shadow: inset 0 0 30px rgba(0, 0, 0, .8), inset 0 0 12px rgba(255, 60, 40, .5), 0 0 12px #ff2a1a, 0 0 32px rgba(255, 30, 0, .6), 0 14px 40px rgba(0, 0, 0, .8); animation: tgMarcoTitila 1.1s steps(1) infinite; }
@keyframes tgMarcoTitila { 0%, 100% { filter: none; } 47% { filter: brightness(.55); } 50% { filter: none; } 82% { filter: brightness(.7); } 84% { filter: none; } }

.tg-neon-texto, .tg-neon-sub { font-family: Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Arial Black', sans-serif; line-height: 1; }
.tg-neon-texto { font-size: clamp(54px, 9.5cqw, 150px); letter-spacing: .04em; white-space: nowrap; }
.tg-neon-sub { font-size: clamp(16px, 2.2cqw, 32px); letter-spacing: .3em; margin-bottom: .25em; color: #2b2017; transition: color .15s, text-shadow .15s; }
/* tubo apagado */
.tg-neon-letra { display: inline-block; color: #2b2017; text-shadow: 0 1px 0 rgba(255, 255, 255, .05); }
/* tubo prendido (dorado) */
.tg-buenas-neon.nos .tg-neon-letra.on {
    color: #fff6cc;
    text-shadow: 0 0 3px #fff, 0 0 9px #ffe066, 0 0 20px #ffb300, 0 0 42px #ff8c00, 0 0 80px #ff6a00;
    animation: tgNeonPrende .38s steps(1) both;
}
.tg-buenas-neon.nos .tg-neon-sub.on { color: #d8ffe4; text-shadow: 0 0 4px #fff, 0 0 10px #4dff8a, 0 0 24px #17c45a, 0 0 46px #0b8a3a; animation: tgNeonPrende .38s steps(1) both; }
/* tubo prendido (rojo, ellos) */
.tg-buenas-neon.ellos .tg-neon-letra.on {
    color: #ffe2dc;
    text-shadow: 0 0 3px #fff, 0 0 9px #ff6a5a, 0 0 20px #ff2a1a, 0 0 42px #d40f00, 0 0 80px #a00800;
    animation: tgNeonPrende .38s steps(1) both;
}
.tg-buenas-neon.ellos .tg-neon-sub.on { color: #ffe2dc; text-shadow: 0 0 4px #fff, 0 0 10px #ff6a5a, 0 0 24px #ff2a1a; animation: tgNeonPrende .38s steps(1) both; }
@keyframes tgNeonPrende { 0% { opacity: .2; } 15% { opacity: 1; } 30% { opacity: .3; } 45% { opacity: 1; } 60% { opacity: .55; } 75%, 100% { opacity: 1; } }
/* la N que se quema (ellos) */
.tg-buenas-neon.ellos .tg-neon-letra.quemandose { animation: tgNeonQuema .55s steps(1) infinite; }
@keyframes tgNeonQuema { 0% { opacity: 1; } 20% { opacity: .15; } 35% { opacity: 1; } 55% { opacity: .05; } 70% { opacity: .8; } 85% { opacity: .1; } }
.tg-neon-letra.quemada { color: #1e1712; text-shadow: none; position: relative; }
.tg-neon-letra.quemada::after {
    content: ''; position: absolute; left: 50%; top: 40%; width: .5em; height: .5em; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 220, 160, .9), rgba(255, 120, 40, 0) 70%);
    animation: tgChispaN .5s ease-out forwards;
}
/* [2026-11-04] la N quemada se suelta: queda colgando de un tornillo (arriba a la izquierda), se balancea y después se cae rota */
.tg-neon-letra.quemada.cuelga { transform-origin: 88% 6%; animation: tgNCuelga 1.25s cubic-bezier(.3,.6,.4,1) forwards; color: #4a3b36; -webkit-text-stroke: 1px rgba(255, 140, 120, .45); text-shadow: 0 0 6px rgba(255, 60, 40, .25); }
@keyframes tgNCuelga {
    0% { transform: rotate(0deg); } 18% { transform: rotate(5deg); } 32% { transform: rotate(-46deg); } 48% { transform: rotate(-26deg); }
    63% { transform: rotate(-39deg); } 78% { transform: rotate(-31deg); } 90% { transform: rotate(-35deg); } 100% { transform: rotate(-34deg); }
}
.tg-neon-letra.quemada.cae { transform-origin: 88% 6%; animation: tgNCae .75s cubic-bezier(.55,0,1,.6) forwards; color: #4a3b36; -webkit-text-stroke: 1px rgba(255, 140, 120, .45); }
@keyframes tgNCae { 0% { transform: rotate(-34deg); opacity: 1; } 100% { transform: translate(.3em, 70cqh) rotate(-140deg); opacity: .9; } }
/* chispas que saltan del tornillo cuando se suelta */
.tg-neon-chispa { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffd9a0; box-shadow: 0 0 6px #ff8a2a, 0 0 12px #ff4a00; pointer-events: none; animation: tgChispaCae .7s ease-in forwards; }
@keyframes tgChispaCae { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes tgChispaN { from { opacity: 1; transform: translate(-50%, -50%) scale(.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
/* festejo (nosotros): el cartel late */
.tg-buenas-neon.nos.festejo .tg-neon-cartel { animation: tgNeonLate .5s ease-in-out infinite alternate; }
@keyframes tgNeonLate { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.04); filter: brightness(1.25); } }

/* capa transparente para saltear con un clic */
.tg-buenas-saltar { position: fixed; inset: 0; z-index: 9002; cursor: pointer; background: transparent; }
/* la N colgando queda DETRÁS de las letras prendidas (si no, tapa la E) */
.tg-buenas-neon .tg-neon-letra { position: relative; z-index: 2; }
.tg-buenas-neon .tg-neon-letra.quemada.cuelga, .tg-buenas-neon .tg-neon-letra.quemada.cae { z-index: 1; }