/* Anuncio del ganador — una sola cosa en pantalla, a tamaño de proyector. */

/* El atributo hidden aplica display:none desde el navegador, pero cualquier
   display del autor lo pisa — y aquí varias secciones son flex. Sin esta
   línea, la pantalla de "aún no hay votos" se quedaba encima del podio. */
[hidden] { display: none !important; }

.anuncio {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(20px, 4vh, 56px) clamp(16px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.anuncio .acto { font-size: clamp(13px, 1.8vw, 22px); margin-top: 0; }

/* ── Suspenso ──────────────────────────────────────────────────────────── */

.anuncio__espera { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 34px); }

.anuncio__suspenso {
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: clamp(30px, 6.5vw, 82px);
  line-height: 1.05;
  letter-spacing: .01em;
  text-shadow: 0 5px 0 rgba(154, 25, 29, .55);
}

/* Tres puntos que laten: da sensación de que algo está por pasar sin
   prometer un tiempo concreto. */
.anuncio__latido { display: flex; gap: clamp(8px, 1vw, 14px); }

.anuncio__latido span {
  width: clamp(10px, 1.2vw, 18px);
  height: clamp(10px, 1.2vw, 18px);
  border-radius: 50%;
  background: var(--oro);
  opacity: .35;
  animation: latido 1.4s ease-in-out infinite;
}

.anuncio__latido span:nth-child(2) { animation-delay: .2s; }
.anuncio__latido span:nth-child(3) { animation-delay: .4s; }

@keyframes latido {
  0%, 100% { opacity: .3;  transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.anuncio__votos, .anuncio__total {
  font: 500 clamp(13px, 1.6vw, 20px)/1.4 Barlow, sans-serif;
  color: var(--muy-tenue);
}

.anuncio__votos strong, .anuncio__total strong {
  font-weight: 700;
  color: var(--oro-claro);
}

/* ── Revelación ────────────────────────────────────────────────────────── */

.anuncio__ganador {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 20px);
  animation: revelar .9s cubic-bezier(.2, 1.1, .35, 1) both;
}

@keyframes revelar {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}

.anuncio__corona {
  width: clamp(52px, 7vw, 104px);
  height: auto;
  filter: drop-shadow(0 0 22px rgba(242, 193, 78, .5));
}

.anuncio__kicker {
  font: 700 clamp(11px, 1.4vw, 18px)/1 Barlow, sans-serif;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #FFE1A0;
}

.anuncio__podio { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 3vw, 48px); }

.ganador {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vh, 16px);
}

.ganador__foto {
  width: clamp(140px, 22vw, 300px);
  height: clamp(140px, 22vw, 300px);
  border-radius: clamp(28px, 3.4vw, 52px);
  overflow: hidden;
  background-color: #EAE4F7;
  background-image: repeating-linear-gradient(135deg, rgba(58, 40, 105, .06) 0 6px, transparent 6px 12px);
  border: 2px solid rgba(242, 193, 78, .55);
  box-shadow: 0 0 clamp(30px, 5vw, 70px) rgba(242, 193, 78, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 clamp(38px, 6vw, 84px)/1 Barlow, sans-serif;
  color: rgba(45, 33, 78, .55);
  animation: aura 2.8s ease-in-out infinite;
}

@keyframes aura {
  0%, 100% { box-shadow: 0 0 clamp(24px, 4vw, 54px) rgba(242, 193, 78, .22); }
  50%      { box-shadow: 0 0 clamp(44px, 7vw, 96px) rgba(242, 193, 78, .45); }
}

.ganador__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ganador__nombre {
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: clamp(24px, 4.6vw, 62px);
  line-height: 1.08;
  background: linear-gradient(180deg, #FFF0BE 6%, var(--oro) 44%, #B87C10 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 0 rgba(154, 25, 29, .5);
  max-width: 14ch;
}

.ganador__talento {
  font: 600 clamp(10px, 1.3vw, 17px)/1 Barlow, sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(242, 193, 78, .8);
}

.ganador__cifra {
  font: 700 clamp(15px, 2.2vw, 30px)/1 Barlow, sans-serif;
  color: rgba(255, 255, 255, .9);
}

.ganador__cifra small {
  display: block;
  margin-top: 6px;
  font: 500 clamp(10px, 1.1vw, 14px)/1 Barlow, sans-serif;
  color: var(--muy-tenue);
}

.anuncio__marca {
  margin-top: clamp(6px, 1.4vh, 18px);
  font: 700 clamp(11px, 1.2vw, 16px)/1.05 Barlow, sans-serif;
  letter-spacing: .1em;
  color: rgba(242, 193, 78, .75);
}