/* ===========================================================
   ENTREVISTAS KAZOOM — estilos propios (cómic Superthings + TV retro)
   Scoped bajo .ek. Assets en assets/ek/.
   =========================================================== */

.ek {
  --ek-rojo: #e3000f;
  --ek-rojo-osc: #9c0009;
  --ek-azul: #1f9fe0;
  --ek-azul-osc: #0b3a66;
  --ek-amarillo: #ffd200;
  --ek-tinta: #0b2a55;
  font-family: "Nunito", system-ui, sans-serif;
  color: #0b2a55;
}

/* Títulos cómic */
.ek .ek-title {
  font-family: "Bangers", "Baloo 2", cursive;
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  letter-spacing: .04em; text-transform: uppercase; text-align: center;
  color: #fff; -webkit-text-stroke: 3px var(--ek-tinta); paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(0,0,0,.3), 0 0 20px rgba(31,159,224,.45);
}
.ek .ek-title .ray { color: var(--ek-amarillo); -webkit-text-stroke-color: var(--ek-rojo-osc); }

/* Secciones full-bleed */
.ek-section { padding-block: clamp(48px, 7vw, 92px); position: relative; overflow: hidden; }
.ek-inner { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 22px; position: relative; z-index: 2; }

.ek-bg-azul   { background: #1f9fe0 url("../ek/bg-azul.png") center / cover; }
.ek-bg-rojo   { background: #e3000f url("../ek/bg-rojo.png") center / cover; }
.ek-bg-amarillo { background: #ffd200 url("../ek/bg-amarillo.svg") center / cover; }
.ek-bg-dark   { background: radial-gradient(120% 100% at 50% 0%, #14385f, #071a2e); }

/* Scanlines / CRT */
.ek-scanlines::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.10) 2px 4px);
  mix-blend-mode: multiply;
}

/* ---------- HERO ---------- */
.ek-hero { text-align: center; padding-block: clamp(24px, 4vw, 46px) clamp(46px, 7vw, 80px); }
.ek-hero__logo {
  width: min(520px, 88%); margin: 0 auto;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.4));
  animation: ek-bob 4s ease-in-out infinite;
}
@keyframes ek-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
.ek-hero__sub {
  margin-top: 18px; font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.35rem);
  color: #fff; text-shadow: 0 2px 0 var(--ek-tinta), 0 0 14px rgba(0,0,0,.5);
  max-width: 60ch; margin-inline: auto;
}
.ek-hero__sub .hl { color: var(--ek-amarillo); }

/* ---------- TV SET (vídeo destacado) ---------- */
.tv-set {
  max-width: 860px; margin: 34px auto 0;
  background: linear-gradient(180deg, #2c2c2c, #141414);
  border-radius: 26px; padding: 22px 22px 30px;
  box-shadow: 0 22px 50px rgba(0,0,0,.5), inset 0 0 0 3px #000;
  position: relative;
}
.tv-set__screen {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #000; border: 5px solid #050505;
  box-shadow: inset 0 0 60px rgba(0,0,0,.9);
}
.tv-set__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.tv-set__screen::after { /* scanlines + viñeta sobre la pantalla */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px),
    radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.45));
}
.tv-set__knobs { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-right: 6px; }
.tv-set__knobs span { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #777, #222); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.tv-set__led { width: 12px; height: 12px; border-radius: 50%; background: #2bd14b; box-shadow: 0 0 10px #2bd14b; align-self: center; }

/* ---------- ENTREVISTAS (rejilla) ---------- */
.ek-eps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 30px); margin-top: 34px; }
.ek-ep {
  cursor: pointer; background: none; border: 0; padding: 0; text-align: center;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ek-ep:hover { transform: translateY(-6px) scale(1.02); }
.ek-ep__screen {
  position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  border: 5px solid #0b0b0b; box-shadow: 0 12px 0 rgba(0,0,0,.35);
  background: #000;
}
.ek-ep__screen img { width: 100%; height: 100%; object-fit: cover; }
.ek-ep__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.14) 2px 3px);
}
.ek-ep__play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 50px; z-index: 2;
  background: rgba(227,0,15,.92); border-radius: 14px; display: grid; place-items: center;
  transition: transform .25s, background .25s;
}
.ek-ep__play::after { content: ""; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.ek-ep:hover .ek-ep__play { transform: scale(1.15); background: var(--ek-rojo); }
.ek-ep__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: "Bangers", cursive; font-size: 1rem; letter-spacing: .04em; color: #fff;
  background: var(--ek-azul); padding: 4px 12px; border-radius: 8px; border: 2px solid var(--ek-tinta);
  transform: rotate(-3deg);
}
.ek-ep__guest {
  display: block; margin-top: 12px;
  font-family: "Bangers", cursive; font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: .03em;
  color: #fff; -webkit-text-stroke: 1.5px var(--ek-tinta); paint-order: stroke fill;
}
.ek-ep__role { display: block; font-weight: 800; color: #ffe; opacity: .92; font-size: .9rem; }

/* ---------- Tarjeta de enlace (CTA) ---------- */
.ek-link-card {
  display: flex; align-items: stretch; max-width: 560px; margin: 30px auto 0;
  background: #0b1f33; border-radius: 16px; overflow: hidden; border: 4px solid var(--ek-tinta);
  box-shadow: 0 14px 0 rgba(0,0,0,.3); text-align: left; color: #fff;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ek-link-card:hover { transform: translateY(-6px); }
.ek-link-card__img { width: 150px; flex: none; object-fit: contain; background: #fff; padding: 12px; }
.ek-link-card__body { padding: 18px 20px; }
.ek-link-card__body h3 { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.25rem; margin-bottom: 6px; }
.ek-link-card__body p { color: #cfe3f5; font-size: .96rem; }
.ek-link-card__tag { margin-top: 10px; display: inline-flex; gap: 6px; font-weight: 800; color: var(--ek-amarillo); }

/* ---------- Lightbox de vídeo ---------- */
.ek-vlb { position: fixed; inset: 0; z-index: 1001; background: rgba(2,8,16,.92); backdrop-filter: blur(5px); display: none; place-items: center; padding: 24px; }
.ek-vlb.abierto { display: grid; }
.ek-vlb__inner { width: min(900px, 94vw); }
.ek-vlb__embed { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; border: 6px solid #111; box-shadow: 0 0 50px rgba(31,159,224,.5); background: #000; }
.ek-vlb__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ek-vlb__close { position: absolute; top: 22px; right: 28px; font-size: 2.4rem; color: #fff; background: none; border: 0; cursor: pointer; }

/* ---------- Formulario de sugerencias ---------- */
.ek-form {
  max-width: 620px; margin: 32px auto 0;
  background: #fff; border: 4px solid var(--ek-tinta); border-radius: 20px;
  padding: clamp(22px, 4vw, 38px);
  box-shadow: 0 16px 0 rgba(0,0,0,.25);
  text-align: left;
}
.ek-field { margin-bottom: 18px; }
.ek-field label {
  display: block; margin-bottom: 6px;
  font-family: "Baloo 2", sans-serif; font-weight: 800; color: var(--ek-tinta);
}
.ek-field input, .ek-field textarea {
  width: 100%; font-family: "Nunito", sans-serif; font-size: 1rem; color: #0b2a55;
  padding: 12px 14px; border: 3px solid var(--ek-tinta); border-radius: 12px;
  background: #f4f9ff; transition: border-color .2s, box-shadow .2s;
}
.ek-field input:focus, .ek-field textarea:focus {
  outline: none; border-color: var(--ek-azul); box-shadow: 0 0 0 3px rgba(31,159,224,.25);
}
.ek-field textarea { resize: vertical; min-height: 110px; }
.ek-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ek-form__btn {
  width: 100%; cursor: pointer; margin-top: 6px;
  font-family: "Bangers", cursive; font-size: 1.3rem; letter-spacing: .04em;
  color: #fff; background: var(--ek-rojo); padding: 14px; border-radius: 12px;
  border: 3px solid var(--ek-tinta); box-shadow: 0 6px 0 var(--ek-tinta);
  text-transform: uppercase; transition: transform .15s, box-shadow .15s;
}
.ek-form__btn:hover { transform: translateY(-2px); box-shadow: 0 9px 0 var(--ek-tinta); }
.ek-form__btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ek-tinta); }
.ek-form__btn[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: 0 6px 0 var(--ek-tinta); }
.ek-form__msg { margin-top: 14px; font-weight: 800; text-align: center; }
.ek-form__msg.ok { color: #1c7a2e; }
.ek-form__msg.err { color: #c41626; }
.ek-hp { position: absolute; left: -9999px; opacity: 0; }  /* honeypot anti-spam */

/* ===========================================================
   Encendido CRT al cargar la página (continúa la transición TV)
   =========================================================== */
.ek-crt-boot { animation: ek-turn-on .75s cubic-bezier(.2,.8,.2,1) both; transform-origin: center; }
@keyframes ek-turn-on {
  0%   { transform: scaleY(.003) scaleX(1.25); filter: brightness(4) contrast(2); opacity: .2; }
  35%  { transform: scaleY(.01) scaleX(1); filter: brightness(3); opacity: .8; }
  55%  { transform: scaleY(1) scaleX(1); filter: brightness(2); }
  100% { transform: none; filter: none; opacity: 1; }
}

@media (max-width: 760px) {
  .ek-eps-grid { grid-template-columns: 1fr; }
  .ek-link-card { flex-direction: column; }
  .ek-link-card__img { width: 100%; height: 120px; }
}