/* ═══ Jurados y presentadores (traído del sitio comercial) ═══
   Mismo componente que comercial.yosoygoleador.com. */
.cast3 {
  --gold: #F5C451; --gold-bright: #FFD97A; --gold-dark: #C99A30;
  --navy: #0a1428; --navy-deep: #050b1c;
  --white: #fff; --white-dim: rgba(255,255,255,.74);
  --font-head: var(--font-impact, 'Sora', sans-serif);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}
.cast3 *, .cast3 *::before, .cast3 *::after { box-sizing: border-box; }
.cast3 h3, .cast3 p, .cast3 figure { margin: 0; }
.cast3 button { font: inherit; }
.cast3 .ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.cast3 .ic--flip { transform: scaleX(-1); }
.cast3 img { max-width: none; }

.cast3 {
  position: relative; width: 100%; height: clamp(560px, 92vh, 820px);
  overflow: hidden;
  background-color: #977323;
  transition: background-color 1s cubic-bezier(.22, 1, .36, 1);
  font-family: var(--font-body);
}
.cast3__ghost {
  position: absolute; inset-inline: 0; top: 10%;
  height: 40%;
  pointer-events: none; user-select: none;
  z-index: 1;
}
.cast3--jurados .cast3__ghost { top: calc(2% - 35px); }
#jurados .ghost-name { font-size: clamp(56px, 12.5vw, 190px); }
#alcance .cast3__ghost { top: calc(10% - 55px); }
#alcance .ghost-name { font-size: clamp(56px, 13.5vw, 210px); }
.ghost-name {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', var(--font-head); font-weight: 400;
  font-size: clamp(72px, 17vw, 250px);
  color: rgba(255,255,255,.92); line-height: 1;
  letter-spacing: -0.02em; white-space: nowrap;
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
}
.ghost-name.on { opacity: 1; transform: none; }
.cast3__pcanvas { position: absolute; inset: 0; pointer-events: none; }
.ghost-name.fade-out { opacity: 0 !important; transition: opacity .2s ease !important; }
.ghost-name.materialize { transform: none !important; transition: opacity .6s ease !important; }
.cast3__brand {
  position: absolute; top: 26px; left: clamp(18px, 4vw, 44px); z-index: 6;
  font-family: var(--font-head); font-size: .74rem; font-weight: 700;
  letter-spacing: 4px; color: rgba(255,255,255,.9);
}
.cast3__stage { position: absolute; inset: 0; z-index: 2; }
.c3-fig {
  position: absolute; bottom: 0; left: 50%;
  height: 97%;
  display: flex; align-items: flex-end; justify-content: center;
  transform-origin: bottom center;
  /* solo transform/filter/opacity — GPU, nada de layout */
  transition: transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1),
              opacity .9s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, filter, opacity;
}
.c3-fig picture { display: contents; }
.c3-fig img {
  height: 100%; width: auto; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
}
#alcance .c3-fig { height: 112%; bottom: -12%; }
#jurados .c3-fig { height: 100%; }
#jurados .c3-fig:has(img[alt*="Tenorio"]) { height: 108.4%; bottom: -8.4%; aspect-ratio: 1000 / 893; }
#jurados .c3-fig:has(img[alt*="Polo"]) { height: 120%; bottom: -20%; }
.c3-fig.is-c { transform: translateX(-50%) scale(1); filter: blur(0); opacity: 1; z-index: 20; }
.c3-fig.is-l { transform: translateX(calc(-50% - 36vw)) scale(.3); filter: blur(3px); opacity: .55; z-index: 10; }
.c3-fig.is-r { transform: translateX(calc(-50% + 36vw)) scale(.3); filter: blur(3px); opacity: .55; z-index: 10; }
.c3-fig.no-trans { transition: none !important; }
.cast3--jurados { height: clamp(600px, 96vh, 820px); }
.cast3--jurados { z-index: 0; }
.cast3__stadium {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.cast3__stadium::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(151,115,35,.88), rgba(151,115,35,.94) 60%, var(--navy-deep) 100%);
}
.cast3__stadium img {
  width: 100%; height: 100%; object-fit: cover; opacity: .38;
  animation: kenburns 34s var(--ease-io) infinite alternate;
}
.cast3--jurados::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.22) 0%, transparent 58%);
  animation: jurado-glow 6s ease-in-out infinite;
}
.cast3--jurados::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 47.5%, rgba(255,230,150,.9), transparent),
    radial-gradient(1.5px 1.5px at 28% 45%, rgba(255,230,150,.6), transparent),
    radial-gradient(2px 2px at 44% 49%, rgba(255,230,150,.8), transparent),
    radial-gradient(1.5px 1.5px at 60% 46%, rgba(255,230,150,.5), transparent),
    radial-gradient(2px 2px at 76% 48%, rgba(255,230,150,.85), transparent),
    radial-gradient(1.5px 1.5px at 90% 45%, rgba(255,230,150,.6), transparent),
    radial-gradient(2px 2px at 12% 97.5%, rgba(255,230,150,.9), transparent),
    radial-gradient(1.5px 1.5px at 28% 95%, rgba(255,230,150,.6), transparent),
    radial-gradient(2px 2px at 44% 99%, rgba(255,230,150,.8), transparent),
    radial-gradient(1.5px 1.5px at 60% 96%, rgba(255,230,150,.5), transparent),
    radial-gradient(2px 2px at 76% 98%, rgba(255,230,150,.85), transparent),
    radial-gradient(1.5px 1.5px at 90% 95%, rgba(255,230,150,.6), transparent);
  background-repeat: repeat; background-size: 100% 200%;
  animation: jurado-sparkles 9s linear infinite;
}
#alcance {
  background: linear-gradient(120deg, #977323 0%, #c98f3a 25%, #8c3030 50%, #6f2626 75%, #977323 100%);
  background-size: 300% 300%;
  animation: alcance-gradient-flow 16s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #alcance { animation: none; background-position: 0% 50%; }
}
#alcance::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.28) 0%, transparent 60%);
  animation: jurado-glow 6s ease-in-out infinite;
}
#alcance::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(5px 5px at 8% 46%,  rgba(255,255,255,1), transparent),
    radial-gradient(3.5px 3.5px at 18% 44%, rgba(255,214,150,.9), transparent),
    radial-gradient(4.5px 4.5px at 30% 49%,     rgba(255,230,150,1), transparent),
    radial-gradient(3.5px 3.5px at 40% 45%, rgba(255,255,255,.85), transparent),
    radial-gradient(5px 5px at 52% 48%, rgba(255,214,150,1), transparent),
    radial-gradient(3.5px 3.5px at 64% 46%, rgba(255,255,255,.8), transparent),
    radial-gradient(4.5px 4.5px at 74% 49%,     rgba(255,230,150,1), transparent),
    radial-gradient(3.5px 3.5px at 86% 45%, rgba(255,255,255,.85), transparent),
    radial-gradient(5px 5px at 95% 47%, rgba(255,214,150,1), transparent),
    radial-gradient(5px 5px at 8% 96%,  rgba(255,255,255,1), transparent),
    radial-gradient(3.5px 3.5px at 18% 94%, rgba(255,214,150,.9), transparent),
    radial-gradient(4.5px 4.5px at 30% 99%,     rgba(255,230,150,1), transparent),
    radial-gradient(3.5px 3.5px at 40% 95%, rgba(255,255,255,.85), transparent),
    radial-gradient(5px 5px at 52% 98%, rgba(255,214,150,1), transparent),
    radial-gradient(3.5px 3.5px at 64% 96%, rgba(255,255,255,.8), transparent),
    radial-gradient(4.5px 4.5px at 74% 99%,     rgba(255,230,150,1), transparent),
    radial-gradient(3.5px 3.5px at 86% 95%, rgba(255,255,255,.85), transparent),
    radial-gradient(5px 5px at 95% 97%, rgba(255,214,150,1), transparent);
  background-repeat: repeat; background-size: 100% 200%;
  animation: alcance-sparkles 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  #alcance::before, #alcance::after { animation: none; }
}
.cast3__panel {
  position: absolute; bottom: clamp(22px, 5vh, 56px); left: clamp(18px, 4vw, 60px);
  z-index: 30; max-width: 340px;
  padding: 22px 26px; border-radius: 20px;
  background: rgba(0, 0, 0, .28); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
}
.c3-meta {
  position: absolute; inset: auto 0 100% 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
}
.c3-meta.on { position: static; opacity: 1; transform: none; pointer-events: auto; }
.c3-meta h3 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing: .5px; color: #fff; }
#jurados .c3-meta h3 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.c3-meta > p { font-size: .8rem; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.85); margin: 4px 0 14px; }
.c3-nums { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.c3-nums span { font-size: .92rem; color: rgba(255,255,255,.85); }
.c3-nums b { font-family: var(--font-head); font-variant-numeric: tabular-nums; color: #fff; }
.c3-tot b { font-size: 1.15em; }
.cast3__navbtns { display: flex; gap: 12px; }
.c3-arrow {
  width: 56px; height: 56px; border-radius: 50%;
  background: transparent; border: 2px solid rgba(255,255,255,.9); color: #fff;
  cursor: pointer; display: grid; place-items: center;
  transition: transform .15s var(--ease-out), background-color .15s;
}
.c3-arrow .ic { width: 24px; height: 24px; }
.c3-arrow:active { transform: scale(.94); }
@media (hover: hover) {
  .c3-arrow:hover { transform: scale(1.08); background: rgba(255,255,255,.12); }
}
.cast3__cta {
  position: absolute; bottom: clamp(22px, 5vh, 56px); right: clamp(18px, 4vw, 44px); z-index: 6;
  font-family: 'Anton', var(--font-head); font-weight: 400;
  font-size: clamp(20px, 3.4vw, 46px); color: rgba(255,255,255,.95);
  letter-spacing: -0.01em; line-height: 1;
}
@media (max-width: 1080px) {
  .cast3 { height: clamp(480px, 78vh, 640px); }
  .c3-fig.is-l { transform: translateX(calc(-50% - 42vw)) scale(.26); }
  .c3-fig.is-r { transform: translateX(calc(-50% + 42vw)) scale(.26); }
}
@media (max-width: 620px) {
  .cast3 { height: 560px; }
  .c3-fig.is-l, .c3-fig.is-r { opacity: .4; }
  .cast3__cta { display: none; }
  .cast3__panel { right: 18px; }
}
@media (max-width: 620px) {
  .cast3 { height: min(660px, 168vw); min-height: 540px; }
  .cast3--jurados { height: min(700px, 176vw); min-height: 560px; }
  .ghost-name { font-size: clamp(52px, 13.5vw, 68px); }
  .cast3__brand { font-size: .64rem; letter-spacing: 2.5px; }
  .c3-fig { --k: 1; --fw: calc(min(118vw, 470px) * var(--k)); filter: none !important; }
  #jurados .c3-fig, #alcance .c3-fig,
    #jurados .c3-fig:has(img[alt*="Tenorio"]), #jurados .c3-fig:has(img[alt*="Polo"]) {
      width: var(--fw); height: auto; aspect-ratio: 4 / 5; bottom: 20px;
    }
  #jurados .c3-fig:has(img[alt*="Tenorio"]) { --k: .9; }
  #jurados .c3-fig:has(img[alt*="Polo"]) { --k: 1.1; }
  #alcance .c3-fig { bottom: calc(var(--cb, 0) * var(--fw) * -1.25); }
  #jurados .c3-fig:has(img[alt*="Polo"]) { bottom: -12px; }
  .c3-fig img { height: auto; width: 100%; filter: none !important; }
  #jurados .ghost-name { font-size: 11.5vw; }
  #alcance .cast3__ghost { top: calc(10% - 100px); }
  #alcance .ghost-name { font-size: 12.5vw; }
  .c3-fig.is-c { transform: translateX(-50%) scale(1); }
  .c3-fig.is-l, .c3-fig.is-r { opacity: 0; visibility: hidden; }
  .cast3__panel { left: 14px; right: 14px; max-width: none; bottom: 14px; padding: 16px 18px; }
  #alcance .cast3__panel { bottom: 55px; }
  .c3-meta h3 { font-size: 1.05rem; }
  #jurados .c3-meta h3 { font-size: 1.4rem; }
  .c3-meta > p { margin-bottom: 8px; font-size: .7rem; }
  .c3-nums { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 12px; }
  .c3-nums span { font-size: .8rem; }
  .c3-arrow { width: 46px; height: 46px; }
}
@media (max-width: 380px) {
  .ghost-name { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .cast3--jurados::before, .cast3--jurados::after { animation: none !important; opacity: 0 !important; }
  .cast3__stadium img { animation: none !important; }
}

@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translateY(-1.5%); } }

@keyframes jurado-glow {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.14); }
}

@keyframes jurado-sparkles {
  0% { background-position: 0 0%; opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .9; }
  100% { background-position: 0 100%; opacity: 0; }
}

@keyframes alcance-gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes alcance-sparkles {
  0% { background-position: 0 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { background-position: 0 100%; opacity: 0; }
}