/* ============================================================
   PURO VICIO — capa de WordPress
   Se carga después de pv.css. Aquí va todo lo que la maqueta
   estática no necesitaba: carteles reales, carátulas, el
   reproductor nativo, el texto que sale del editor y la
   paginación.
   ============================================================ */

/* barra de administración */
body.admin-bar .nav{ top:32px; }
@media (max-width:782px){ body.admin-bar .nav{ top:46px; } }

/* En WordPress las tarjetas y las filas son enlaces, no botones:
   hay que devolverles el comportamiento de bloque. */
.card{ padding:0; gap:0; text-decoration:none; color:inherit; }
.chip{ display:inline-block; text-decoration:none; }
.member p a{ color:var(--c,var(--cyan)); text-decoration:none; }
.member p a:hover{ text-decoration:underline; }
.ep{ text-decoration:none; color:inherit; grid-template-columns:auto auto 1fr auto; }

/* ---------- cartel de la película en la tarjeta ---------- */
.card__media{
  display:block; position:relative; aspect-ratio:2/3; overflow:hidden;
  background:var(--ink); border-bottom:1px solid var(--line);
}
.card.full .card__media, .card.wide .card__media{ aspect-ratio:16/9; }
.card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.35) contrast(1.08);
  transition:filter .5s, transform .7s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__media img{ filter:none; transform:scale(1.04); }
.card__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(6,10,14,.92));
}
.card__media .card__yr{
  position:absolute; left:1rem; bottom:.5rem; z-index:2;
  -webkit-text-stroke:1px var(--c,var(--cyan)); font-size:2.6rem;
}

/* sin cartel subido: cartelera generada, nunca un hueco gris */
.card__media.is-empty{
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(var(--cyan-g),.05) 14px 28px),
    radial-gradient(120% 100% at 30% 15%, rgba(var(--pink-g),.16), transparent 60%),
    var(--panel);
}
.card__media.is-empty b{
  font-family:var(--f-display); font-size:clamp(1.6rem,4vw,2.8rem); line-height:.92;
  text-align:center; padding:1rem; color:transparent;
  -webkit-text-stroke:1.5px var(--c,var(--cyan));
  filter:drop-shadow(0 0 14px var(--c,var(--cyan)));
}
.card__in{
  padding:clamp(1.1rem,2.2vw,1.7rem); display:flex; flex-direction:column;
  gap:.7rem; flex:1; text-align:left;
}

/* ---------- carátula del episodio ---------- */
.ep__art{
  width:64px; height:64px; flex:none; object-fit:cover; display:block;
  border:1px solid var(--line); filter:grayscale(.4); transition:filter .4s;
}
.ep:hover .ep__art{ filter:none; }
/* hueco de la carátula cuando el episodio no trae imagen: mantiene
   la rejilla de cuatro columnas alineada en toda la lista */
.ep__art--none{
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, rgba(var(--cyan-g),.07) 6px 12px),
    var(--panel);
}
@media (max-width:820px){ .ep__art{ width:48px; height:48px; } }

/* ---------- reproductor nativo (MP3 del feed) ---------- */
.pvp{
  border:2px solid var(--cyan); background:var(--panel); margin-top:2.5rem;
  box-shadow:0 0 40px rgba(var(--cyan-g),.14);
}
.pvp__top{ display:flex; gap:1.2rem; align-items:center; padding:1.2rem; flex-wrap:wrap; }
.pvp__art{ width:110px; height:110px; object-fit:cover; flex:none; border:1px solid var(--line); }
.pvp__meta{ flex:1; min-width:190px; }
.pvp__meta b{ display:block; font-size:1.05rem; line-height:1.3; margin-bottom:.35rem; }
.pvp__meta span{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
}
.pvp__btn{
  width:64px; height:64px; flex:none; border:2px solid var(--cyan); color:var(--cyan);
  display:grid; place-items:center; font-size:1.2rem; cursor:pointer; transition:.25s;
}
.pvp__btn:hover{ background:var(--cyan); color:var(--ink); box-shadow:0 0 22px rgba(var(--cyan-g),.5); }
.pvp.is-playing .pvp__btn{ background:var(--cyan); color:var(--ink); }
.pvp__bar{
  position:relative; height:46px; border-top:1px solid var(--line); cursor:pointer;
  display:flex; align-items:flex-end; gap:2px; padding:0 1rem .6rem; overflow:hidden;
}
.pvp__bar i{ flex:1; min-width:2px; background:var(--line-hot); transition:background .18s; }
.pvp__bar i.on{ background:var(--cyan); }
.pvp.is-playing .pvp__bar i.on:last-of-type{ box-shadow:0 0 10px rgba(var(--cyan-g),.8); }
.pvp__times{
  display:flex; justify-content:space-between; padding:.6rem 1rem;
  border-top:1px solid var(--line); font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.1em; color:var(--mute); font-variant-numeric:tabular-nums;
}
.pvp__times em{ font-style:normal; color:var(--cyan); }

/* ---------- reproductor incrustado de iVoox ---------- */
/* El suyo es mucho más bajo que el de Spotify. */
.live--ivoox{ border-color:var(--pink); box-shadow:0 0 40px rgba(var(--pink-g),.16); }
.live--ivoox .live__bar{ border-bottom-color:var(--pink); color:var(--pink); }
.live--ivoox .live__dot{ background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.live--ivoox .live__foot a{ color:var(--pink); }
.live__frame--ivoox{ min-height:210px; }
.live__frame--ivoox iframe{ height:210px; }

/* ---------- texto salido del editor ---------- */
.entry{ max-width:64ch; margin-top:2.5rem; }
.entry p{ margin:0 0 1.3rem; }
.entry > p:first-of-type::first-letter{
  font-family:var(--f-display); float:left; font-size:4.2rem; line-height:.8;
  margin:.08em .12em 0 0; color:var(--pink);
}
.entry h2, .entry h3{
  font-family:var(--f-display); font-weight:400; letter-spacing:.01em;
  line-height:1; margin:2.5rem 0 1rem; color:var(--chalk);
}
.entry h2{ font-size:clamp(1.6rem,3.4vw,2.4rem); }
.entry h3{ font-size:clamp(1.3rem,2.6vw,1.8rem); }
.entry a{ color:var(--cyan); text-underline-offset:3px; }
.entry img{ margin:2rem 0; border:1px solid var(--line); height:auto; }
.entry blockquote{
  margin:2.5rem 0; padding:1.4rem 0 1.4rem 1.6rem; border-left:3px solid var(--pink);
  font-family:var(--f-display); font-size:clamp(1.4rem,3vw,2rem); line-height:1.1;
}
.entry ul, .entry ol{ padding-left:1.4rem; margin:0 0 1.3rem; }
.entry li{ margin-bottom:.5rem; }

/* ---------- cartel grande en la ficha ---------- */
.sheet-art{
  float:right; width:min(300px,38%); margin:0 0 1.5rem 2rem;
  border:2px solid var(--line-hot); height:auto;
}
@media (max-width:700px){ .sheet-art{ float:none; width:100%; margin:1.5rem 0; } }

/* ---------- paginación ---------- */
.pager{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.5rem; flex-wrap:wrap; }
.pager a, .pager span{
  flex:1 1 60px; padding:1rem; text-align:center; background:var(--panel); text-decoration:none;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute); transition:background .2s, color .2s;
}
.pager a:hover{ background:var(--panel-2); color:var(--cyan); }
.pager .current{ background:var(--pink); color:#fff; }

/* ---------- sección todavía sin contenido ---------- */
.pv-empty{
  border:2px dashed var(--line-hot); padding:clamp(2rem,5vw,3.5rem); margin-top:2.5rem;
  text-align:center; color:var(--mute); font-family:var(--f-mono); font-size:var(--t-sm);
  line-height:1.8;
}
.pv-empty b{ color:var(--cyan); }