/* =========================================================
   EL CLOSET TV — Diseño principal
   Estilo poster/collage sobre papel kraft, acentos = bandera del orgullo
   ========================================================= */

:root{
  --paper: #F5F0E4;
  --paper-soft: #ECE4D2;
  --paper-line: rgba(20,18,20,0.14);
  --ink: #141214;
  --ink-dim: rgba(20,18,20,0.62);

  --rojo: #F23F3A;
  --rosa: #FF7684;
  --amarillo: #FFC549;
  --verde: #00B487;
  --azul: #6DD0F0;
  --violeta: #775AFF;

  --font-display: 'Archivo Black', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-nav: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;

  --radius: 18px;
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  background-image:
    radial-gradient(rgba(20,18,20,0.045) 1px, transparent 1px);
  background-size: 4px 4px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--azul); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.pride-rule{ height:4px; width:100%; background:var(--rojo); }

h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1; letter-spacing:-.01em; text-transform:uppercase; }

/* =========================================================
   PILLS / STICKERS — el vocabulario visual central
   ========================================================= */
.sticker-pill{
  --r: 0deg;
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 22px; border-radius:100px;
  font-family:var(--font-display); font-size:13px; letter-spacing:.02em;
  color:var(--ink); background:var(--amarillo);
  transform:rotate(var(--r));
  box-shadow:3px 4px 0 rgba(20,18,20,0.18);
}
.sticker-pill--rojo{ background:var(--rojo); color:#fff; }
.sticker-pill--rosa{ background:var(--rosa); color:var(--ink); }
.sticker-pill--amarillo{ background:var(--amarillo); color:var(--ink); }
.sticker-pill--verde{ background:var(--verde); color:#fff; }
.sticker-pill--azul{ background:var(--azul); color:var(--ink); }
.sticker-pill--violeta{ background:var(--violeta); color:#fff; }

.pill-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:100px;
  font-family:var(--font-display); font-size:14px; letter-spacing:.02em;
  border:none; color:#fff; background:var(--azul);
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:4px 5px 0 rgba(20,18,20,0.7);
}
.pill-btn:hover{ transform:translate(2px,3px); box-shadow:2px 2px 0 rgba(20,18,20,0.7); }
.pill-btn--azul{ background:var(--azul); color:var(--ink); }
.pill-btn--violeta{ background:var(--violeta); }
.pill-btn--rojo{ background:var(--rojo); }
.pill-btn--verde{ background:var(--verde); }
.pill-btn--lg{ padding:17px 36px; font-size:15px; }

/* Stickers decorativos sueltos (formas + pixel art simple) */
.sticker{ position:absolute; pointer-events:none; z-index:1; }
.sticker svg{ width:34px; height:34px; }
.sticker--star{ top:18%; right:10%; animation:spin-slow 12s linear infinite; }
.sticker--star2{ width:26px; }
.sticker--ring{ width:38px; height:38px; border:6px solid var(--verde); border-radius:50%; top:66%; left:6%; }
.sticker--triangle{ width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-bottom:30px solid var(--azul); top:10%; left:14%; transform:rotate(8deg); }
.sticker--bolt{ }
.sticker--pixel-heart{ width:20px; height:18px; background:
  linear-gradient(var(--rojo) 0 0) 4px 0/4px 4px,
  linear-gradient(var(--rojo) 0 0) 12px 0/4px 4px,
  linear-gradient(var(--rojo) 0 0) 0 4px/20px 8px,
  linear-gradient(var(--rojo) 0 0) 4px 12px/12px 4px,
  linear-gradient(var(--rojo) 0 0) 8px 16px/4px 4px;
  background-repeat:no-repeat; image-rendering:pixelated;
}
.sticker--pixel-ghost{ width:22px; height:20px;
  background:
    linear-gradient(var(--violeta) 0 0) 4px 0/14px 4px,
    linear-gradient(var(--violeta) 0 0) 0 4px/22px 12px,
    linear-gradient(var(--violeta) 0 0) 0 16px/4px 4px,
    linear-gradient(var(--violeta) 0 0) 8px 16px/4px 4px,
    linear-gradient(var(--violeta) 0 0) 16px 16px/4px 4px,
    linear-gradient(#fff 0 0) 4px 8px/4px 4px,
    linear-gradient(#fff 0 0) 14px 8px/4px 4px;
  background-repeat:no-repeat; image-rendering:pixelated; top:20%; right:16%;
}
@keyframes spin-slow{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].is-inview{ opacity:1; transform:translateY(0); }
[data-reveal-item]{ opacity:0; transform:translateY(18px) rotate(var(--r,0deg)); transition:opacity .5s ease, transform .5s ease; }
[data-reveal].is-inview [data-reveal-item]{ opacity:1; transform:translateY(0) rotate(var(--r,0deg)); }
[data-reveal-item]:nth-child(1){ transition-delay:.02s; }
[data-reveal-item]:nth-child(2){ transition-delay:.08s; }
[data-reveal-item]:nth-child(3){ transition-delay:.14s; }
[data-reveal-item]:nth-child(4){ transition-delay:.2s; }

/* Borde serrado (dientes de estampilla) entre secciones claras/oscuras */
.zigzag{ height:22px; width:100%; }
.zigzag--to-dark{
  background:var(--paper);
  -webkit-mask: radial-gradient(circle at 11px 0, transparent 11px, #000 11.5px) 0 -11px / 22px 22px repeat-x;
          mask: radial-gradient(circle at 11px 0, transparent 11px, #000 11.5px) 0 -11px / 22px 22px repeat-x;
}
.zigzag--to-dark::after{ content:''; display:block; height:22px; background:var(--ink);
  -webkit-mask: radial-gradient(circle at 11px 22px, transparent 11px, #000 11.5px) 0 0 / 22px 22px repeat-x;
          mask: radial-gradient(circle at 11px 22px, transparent 11px, #000 11.5px) 0 0 / 22px 22px repeat-x;
}
.zigzag--to-light{ background:var(--ink);
  -webkit-mask: radial-gradient(circle at 11px 22px, transparent 11px, #000 11.5px) 0 0 / 22px 22px repeat-x;
          mask: radial-gradient(circle at 11px 22px, transparent 11px, #000 11.5px) 0 0 / 22px 22px repeat-x;
}

/* Divisor con textura sutil (antes era cinta bicolor tipo precaución) */
.tape-divider{
  height:10px; margin:56px 0 0;
  background:var(--ink);
  border-radius:100px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  border-bottom:2px solid var(--ink);
  background:var(--paper);
  position:sticky; top:0; z-index:50;
}
.site-header__row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  padding:18px 24px; max-width:var(--container); margin:0 auto;
}

/* Logo centrado, mucho más grande, tipo sticker con contorno + insignia */
.site-logo{ justify-self:center; text-align:center; }
.site-logo__link{ display:inline-block; }
.site-logo img{ max-height:88px; width:auto; }
.site-logo__lockup{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.site-logo__line1{
  font-family:var(--font-display); font-size:clamp(30px,4vw,46px); color:var(--paper);
  -webkit-text-stroke:1.5px var(--ink);
  text-shadow:2px 2px 0 var(--stroke,var(--rojo));
}
.site-logo__line2{
  margin-top:8px; font-family:var(--font-display); font-size:clamp(15px,1.6vw,19px); color:#fff;
  background:var(--badge,var(--azul)); border:1.5px solid var(--ink); border-radius:100px;
  padding:3px 16px; transform:rotate(-2deg);
}

/* Nav izquierda, con soporte de submenú (Programas → 3 shows) */
.main-nav{ justify-self:start; }
.main-nav ul{ display:flex; align-items:center; }
.main-nav > ul > li{ padding:0 18px; border-left:1px solid var(--paper-line); position:relative; }
.main-nav > ul > li:first-child{ border-left:none; padding-left:0; }
.main-nav a{ font-family:var(--font-nav); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); display:flex; align-items:center; gap:4px; }
.main-nav a:hover{ color:var(--violeta); }

.main-nav .menu-item-has-children > a::after{ content:'▾'; font-size:9px; margin-left:2px; }
.main-nav .sub-menu{
  display:none; position:absolute; top:100%; left:0; margin-top:14px; z-index:10;
  flex-direction:column; align-items:flex-start; min-width:180px;
  background:var(--paper); border:2px solid var(--ink); border-radius:12px; padding:8px;
  box-shadow:4px 5px 0 rgba(20,18,20,.85);
}
.main-nav .menu-item-has-children:hover .sub-menu,
.main-nav .menu-item-has-children:focus-within .sub-menu{ display:flex; }
.main-nav .sub-menu li{ width:100%; }
.main-nav .sub-menu a{ padding:8px 10px; border-radius:8px; width:100%; }
.main-nav .sub-menu a:hover{ background:var(--paper-soft); }

/* Redes + CTA a la derecha */
.site-header__actions{ justify-self:end; display:flex; align-items:center; gap:14px; }
.site-header__social{ display:flex; gap:8px; }
.site-header__social a{ width:32px; height:32px; border-radius:50%; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background .15s ease, color .15s ease; }
.site-header__social a:hover{ background:var(--ink); color:var(--paper); }

.nav-toggle{ display:none; background:none; border:2px solid var(--ink); border-radius:10px; width:42px; height:42px; color:var(--ink); align-items:center; justify-content:center; }

@media (max-width: 980px){
  .site-header__row{ grid-template-columns:auto 1fr auto; }
  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:2px solid var(--ink); padding:18px 24px 26px; justify-self:auto; }
  .main-nav.is-open{ display:block; }
  .main-nav > ul{ flex-direction:column; align-items:flex-start; gap:14px; }
  .main-nav > ul > li{ border-left:none; padding:0; width:100%; }
  .main-nav .sub-menu{ position:static; box-shadow:none; margin-top:8px; border:none; border-left:2px solid var(--paper-line); border-radius:0; padding-left:12px; display:flex; }
  .main-nav .menu-item-has-children:hover .sub-menu{ display:flex; }
  .site-header__social{ display:none; }
  .pill-btn{ padding:11px 18px; font-size:12px; }
  .nav-toggle{ display:inline-flex; }
  .site-logo__line1{ font-size:24px; }
  .site-logo img{ max-height:56px; }
}

/* =========================================================
   CINTA DE ANUNCIO (marquee) — acento sólido, no arcoíris literal
   ========================================================= */
.marquee{
  overflow:hidden; white-space:nowrap;
  background:var(--ink);
  border-bottom:2px solid var(--ink);
}
.marquee__track{ display:inline-flex; animation:marquee-scroll 30s linear infinite; }
.marquee__group{ display:inline-flex; align-items:center; }
.marquee__group span{
  display:inline-block; padding:8px 22px;
  font-family:var(--font-display); font-size:11px; letter-spacing:.03em; color:var(--paper);
}
.marquee__group span:nth-child(6n+1) i{ color:var(--rojo); }
.marquee__group span:nth-child(6n+2) i{ color:var(--rosa); }
.marquee__group span:nth-child(6n+3) i{ color:var(--amarillo); }
.marquee__group span:nth-child(6n+4) i{ color:var(--verde); }
.marquee__group span:nth-child(6n+5) i{ color:var(--azul); }
.marquee__group span:nth-child(6n+6) i{ color:var(--violeta); }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   HERO — tarjeta redondeada "despegable"
   ========================================================= */
.hero{ padding:36px 0 20px; }

.hero-card{
  position:relative; overflow:hidden; border-radius:36px; border:2px solid var(--ink);
  min-height:560px; display:flex; align-items:flex-end;
  box-shadow:8px 10px 0 rgba(20,18,20,.9);
  transform:rotate(-0.6deg);
  transition:transform .25s ease;
}
.hero-card:hover{ transform:rotate(0deg); }

.hero-card__bg{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block; }
.hero-card__scrim{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; background:linear-gradient(180deg, rgba(20,18,20,.05) 0%, rgba(20,18,20,.12) 45%, rgba(20,18,20,.78) 100%); }

.hero-card__stripes{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 82% 18%, rgba(119,90,255,.35), transparent 55%),
    radial-gradient(circle at 12% 88%, rgba(242,63,58,.28), transparent 55%),
    var(--ink);
}

.hero-card__content{ position:relative; z-index:2; padding:44px 40px 48px; max-width:640px; }
.hero-card__content .sticker-pill{ margin-bottom:22px; }

.hero-card__title{ color:#fff; font-size:clamp(32px,5.4vw,54px); line-height:1.05; }
.hero-card__script{
  display:inline-block; font-family:'Caveat', cursive; text-transform:none;
  color:var(--amarillo); font-size:1.3em; font-weight:700; margin-left:8px;
}

.hero-card__sub{ color:rgba(255,255,255,.82); font-weight:600; font-size:15px; max-width:440px; margin:18px 0 28px; }

/* Insignia circular giratoria, esquina de la tarjeta */
.badge-circle{ position:absolute; top:26px; right:26px; z-index:3; width:104px; height:104px; }
.badge-circle__svg{ width:100%; height:100%; animation:spin-badge 16s linear infinite; }
.badge-circle__center{
  position:absolute; top:50%; left:50%; width:38px; height:38px; margin:-19px 0 0 -19px;
  border-radius:50%; border:2px solid var(--ink);
  background:var(--rojo);
}
@keyframes spin-badge{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .badge-circle__svg{ animation:none; } .marquee__track{ animation:none; } }

@media (max-width:640px){
  .hero-card{ border-radius:26px; min-height:480px; }
  .hero-card__content{ padding:30px 22px 34px; }
  .badge-circle{ width:78px; height:78px; top:16px; right:16px; }
}

/* =========================================================
   FRANJA REACCIÓN (oscura, con pills dispersas)
   ========================================================= */
.reaction-band{ position:relative; background:var(--ink); color:var(--paper); padding:64px 0 76px; overflow:hidden;
  background-image:
    linear-gradient(rgba(246,241,231,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,241,231,.06) 1px, transparent 1px);
  background-size:34px 34px;
}
.reaction-band__title{ color:var(--paper); font-size:clamp(28px,5vw,52px); max-width:760px; }
.reaction-band__pills{ display:flex; flex-wrap:wrap; gap:20px 22px; margin-top:38px; }
.reaction-band__pills .sticker-pill{ font-size:16px; padding:14px 30px; }

/* =========================================================
   FRANJA DE STATS
   ========================================================= */
.stats-band{ padding:76px 0 0; position:relative; }
.stats-band__wrap{ position:relative; }
.stats-band__title{ font-size:clamp(34px,7vw,84px); line-height:.98; max-width:900px; }
.stats-band__pill{ position:relative; z-index:2; margin-bottom:14px; font-size:14px; }
.stats-band__pill--1{ --r:-3deg; }
.stats-band__pill--2{ --r:2deg; margin:14px 0; }
.stats-band__pill--3{ --r:-2deg; margin-top:14px; }
.stats-band__sub{ max-width:520px; margin-top:28px; color:var(--ink-dim); font-weight:600; }

/* =========================================================
   FRANJA DE HORARIO
   ========================================================= */
.schedule-strip{ border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); overflow-x:auto; margin-top:56px; }
.schedule-strip__row{ display:flex; min-width:max-content; }
.schedule-strip__item{ flex:1 1 260px; min-width:260px; padding:20px 26px; display:flex; align-items:center; gap:16px; border-right:2px solid var(--ink); transition:background .2s ease; }
.schedule-strip__item:hover{ background:var(--paper-soft); }
.schedule-strip__dot{ width:14px; height:14px; border-radius:50%; flex:none; border:2px solid var(--ink); }
.schedule-strip__day{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--ink-dim); letter-spacing:.08em; }
.schedule-strip__show{ font-family:var(--font-display); font-size:15px; margin-top:2px; text-transform:uppercase; }
.schedule-strip__time{ margin-left:auto; font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); }

/* =========================================================
   SECCIONES / TÍTULOS
   ========================================================= */
.section{ padding:80px 0; }
.section--tight{ padding:52px 0; }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:44px; flex-wrap:wrap; }
.section-head__title{ font-size:clamp(34px,6vw,58px); }

/* =========================================================
   ÚLTIMO PROGRAMA EN YOUTUBE — sección grande y protagonista
   ========================================================= */
.live-section{ padding:20px 0 80px; }
.live-section__tag{
  --live-accent: var(--rojo);
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:12px; letter-spacing:.03em;
  color:var(--live-accent); margin-bottom:14px;
}
.pulse-dot{ width:10px; height:10px; border-radius:50%; background:var(--live-accent); animation:pulseDot 2s infinite; }
@keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(228,3,3,.5); } 70%{ box-shadow:0 0 0 12px rgba(228,3,3,0); } 100%{ box-shadow:0 0 0 0 rgba(228,3,3,0); } }

.live-section__player{
  border:2px solid var(--ink); border-radius:28px; overflow:hidden;
  box-shadow:8px 10px 0 rgba(20,18,20,.9);
}
.live-section__player .video-embed{ border:none; border-radius:0; aspect-ratio:16/9; }
.live-section__meta{ margin-top:18px; font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); }

/* =========================================================
   TARJETAS "CARPETA" — un programa, un conductor asomándose
   ========================================================= */
.folder-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding-top:34px; }
@media (max-width:900px){ .folder-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; } }

.folder-card{ --r:-2deg; position:relative; display:block; padding-top:56px; transform:rotate(var(--r)); transition:transform .2s ease; }
.folder-card:nth-child(2n){ --r:2deg; }
.folder-card:nth-child(3n){ --r:-1.5deg; }
.folder-card:hover{ transform:rotate(0deg) translateY(-4px); }

/* Solapa de atrás: un segundo panel del mismo color, más chico y desfasado, como la parte trasera de una carpeta real */
.folder-card__tab{
  position:absolute; z-index:0; top:26px; left:12%; right:12%; height:64px;
  border:2px solid var(--ink); border-radius:16px;
  background:inherit;
}
.folder-card--violeta .folder-card__tab{ background:var(--violeta); }
.folder-card--verde .folder-card__tab{ background:var(--verde); }
.folder-card--rojo .folder-card__tab{ background:var(--rojo); }
.folder-card--amarillo .folder-card__tab{ background:var(--amarillo); }

/* Foto(s) del/los conductor(es) "asomándose" por arriba de la carpeta */
.folder-card__peek{
  position:relative; z-index:2; width:132px; height:132px; margin:0 auto;
  border-radius:50%; overflow:hidden;
  border:4px solid var(--paper); box-shadow:0 10px 0 rgba(20,18,20,.16), 0 4px 14px rgba(20,18,20,.3);
  background:#fff; display:flex; align-items:center; justify-content:center;
}
.folder-card__peek img{ width:100%; height:100%; object-fit:cover; }
.folder-card__peek-initial{ font-family:var(--font-display); font-size:52px; color:var(--ink); }

/* Cuando hay varios hosts: racimo de fotos superpuestas en vez de un solo círculo */
.folder-card__peek--cluster{
  width:auto; height:auto; border:none; box-shadow:none; background:none; border-radius:0;
  display:flex; justify-content:center;
}
.folder-card__peek--cluster .folder-card__peek-photo{
  width:76px; height:76px; border-radius:50%; overflow:hidden; flex:none;
  border:4px solid var(--paper); box-shadow:0 6px 0 rgba(20,18,20,.16), 0 4px 10px rgba(20,18,20,.3);
  background:#fff; display:flex; align-items:center; justify-content:center;
  margin-left:-22px; transform:rotate(calc(var(--pi,0) * 7deg - 7deg));
}
.folder-card__peek--cluster .folder-card__peek-photo:first-child{ margin-left:0; }
.folder-card__peek--cluster .folder-card__peek-photo img{ width:100%; height:100%; object-fit:cover; }
.folder-card__peek--cluster .folder-card__peek-initial{ font-size:26px; }
.folder-card:hover .folder-card__peek-photo{ transform:rotate(0deg); }

.folder-card__body{
  position:relative; z-index:1; margin-top:-38px;
  border:2px solid var(--ink); border-radius:16px;
  padding:52px 20px 22px; min-height:150px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:5px 6px 0 rgba(20,18,20,.85);
}
.folder-card--violeta .folder-card__body{ background:var(--violeta); color:#fff; }
.folder-card--verde .folder-card__body{ background:var(--verde); color:#fff; }
.folder-card--rojo .folder-card__body{ background:var(--rojo); color:#fff; }
.folder-card--amarillo .folder-card__body{ background:var(--amarillo); color:var(--ink); }

.folder-card__meta{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; opacity:.85; }
.folder-card__title{ font-family:var(--font-display); font-size:22px; text-transform:uppercase; line-height:1.05; margin-top:2px; }
.folder-card__host{ font-family:var(--font-body); font-weight:700; font-size:13px; opacity:.9; margin-top:4px; }

/* =========================================================
   HOSTS — tarjetas "ventana de navegador"
   ========================================================= */
.hosts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
@media (max-width:760px){ .hosts-grid{ grid-template-columns:1fr; } }

.host-card{ --r:-3deg; display:block; padding:18px 18px 22px; border:2px solid var(--ink); border-radius:16px; transform:rotate(var(--r)); transition:transform .2s ease; box-shadow:5px 6px 0 rgba(20,18,20,.85); }
.host-card:nth-child(2n){ --r:2.5deg; }
.host-card:nth-child(3n){ --r:-1.5deg; }
.host-card:hover{ transform:rotate(0deg) translateY(-4px); }
.host-card--azul{ background:var(--azul); color:var(--ink); }
.host-card--amarillo{ background:var(--amarillo); color:var(--ink); }
.host-card--rojo{ background:var(--rojo); color:#fff; }
.host-card--verde{ background:var(--verde); color:#fff; }

.host-card__window{ background:#fff; border:2px solid var(--ink); border-radius:10px; overflow:hidden; }
.host-card__chrome{ display:flex; align-items:center; gap:5px; padding:6px 8px; border-bottom:2px solid var(--ink); background:var(--paper); position:relative; }
.host-card__dot{ width:7px; height:7px; border-radius:50%; background:var(--ink); opacity:.35; }
.host-card__x{ margin-left:auto; font-family:var(--font-display); font-size:13px; color:var(--ink); opacity:.5; }
.host-card__photo{ display:block; aspect-ratio:4/3.4; background:var(--paper-soft); }
.host-card__photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.host-card__initial{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:44px; color:var(--ink); }

.host-card__name{ display:block; font-family:var(--font-display); font-size:15px; text-transform:uppercase; margin-top:14px; background:var(--ink); color:var(--paper); padding:5px 10px; width:fit-content; border-radius:6px; }
.host-card__role{ display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; margin-top:8px; opacity:.85; }

/* =========================================================
   GRID DE EPISODIOS
   ========================================================= */
.episodes-list{ display:flex; flex-direction:column; }
.episode-row{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:20px; padding:20px 0; border-bottom:2px solid var(--ink); }
.episode-row__num{ font-family:var(--font-mono); color:var(--ink-dim); font-size:14px; }
.episode-row__title{ font-family:var(--font-display); font-size:16px; text-transform:uppercase; }
.episode-row__show{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--ink-dim); margin-top:4px; letter-spacing:.05em; }
.episode-row__show .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
@media (max-width:640px){ .episode-row{ grid-template-columns:1fr; gap:12px; } .episode-row__num{ display:none; } }

.ectv-player{ --player-accent: var(--rojo); display:flex; align-items:center; gap:14px; min-width:220px; }
.ectv-player__toggle{ width:42px; height:42px; border-radius:50%; flex:none; background:var(--player-accent); color:#fff; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; transition:transform .15s ease; }
.ectv-player__toggle:hover{ transform:scale(1.06); }
.ectv-player__body{ flex:1; min-width:120px; }
.ectv-player__bar{ height:6px; border-radius:4px; background:var(--paper-soft); border:1px solid var(--ink); overflow:hidden; cursor:pointer; }
.ectv-player__progress{ height:100%; width:0%; background:var(--player-accent); }
.ectv-player__meta{ display:flex; justify-content:space-between; margin-top:6px; font-family:var(--font-mono); font-size:11px; color:var(--ink-dim); }

/* Video de YouTube incrustado (página de episodio) */
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:2px solid var(--ink); background:var(--ink); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Botón compacto "Ver video" en las listas de episodios */
.video-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:100px; border:2px solid var(--ink);
  font-family:var(--font-display); font-size:11px; text-transform:uppercase;
  background:var(--rojo); color:#fff;
  transition:transform .15s ease;
}
.video-pill:hover{ transform:translateY(-2px); }

/* =========================================================
   NOTICIAS / BLOG
   ========================================================= */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:900px){ .news-grid{ grid-template-columns:1fr; } }
.news-card{ display:flex; flex-direction:column; gap:14px; }
.news-card__thumb{ border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:var(--paper-soft); border:2px solid var(--ink); }
.news-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.news-card:hover .news-card__thumb img{ transform:scale(1.06); }
.news-card__cat{ font-family:var(--font-display); font-size:11px; text-transform:uppercase; color:var(--rojo); letter-spacing:.04em; }
.news-card h3{ font-size:17px; text-transform:none; font-family:var(--font-body); font-weight:800; }
.news-card p{ color:var(--ink-dim); font-size:14px; margin:0; }

/* =========================================================
   SUSCRIPCIÓN
   ========================================================= */
.subscribe-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.subscribe-pill{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:100px; border:2px solid var(--ink); font-family:var(--font-display); font-size:12px; text-transform:uppercase; background:var(--paper-soft); transition:transform .18s ease; }
.subscribe-pill:hover{ transform:translateY(-2px); }
.subscribe-pill svg{ flex:none; }
.subscribe-pill--spotify{ background:var(--verde); color:#fff; }
.subscribe-pill--apple_podcasts{ background:var(--rosa); color:var(--ink); }
.subscribe-pill--google_podcasts{ background:var(--rojo); color:#fff; }
.subscribe-social{ display:flex; flex-wrap:wrap; gap:14px; }
.subscribe-social__item{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:12px; border:2px solid var(--ink); font-family:var(--font-display); font-size:12px; text-transform:uppercase; transition:background .18s ease, transform .18s ease; }
.subscribe-social__item:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }

/* =========================================================
   ÚLTIMAS PUBLICACIONES (Facebook/YouTube automáticos, IG/TikTok manuales)
   ========================================================= */
.feed-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; padding-top:10px; }
.feed-card{
  border:2px solid var(--ink); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; background:var(--paper-soft);
  box-shadow:4px 5px 0 rgba(20,18,20,.85); transition:transform .18s ease;
}
.feed-card:hover{ transform:translateY(-3px); }
.feed-card__platform{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  font-family:var(--font-display); font-size:12px; text-transform:uppercase;
  border-bottom:2px solid var(--ink); color:#fff;
}
.feed-card--rojo .feed-card__platform{ background:var(--rojo); }
.feed-card--azul .feed-card__platform{ background:var(--azul); color:var(--ink); }
.feed-card--violeta .feed-card__platform{ background:var(--violeta); }
.feed-card--amarillo .feed-card__platform{ background:var(--amarillo); color:var(--ink); }
.feed-card__platform svg{ flex:none; }

.feed-card__thumb{ position:relative; aspect-ratio:16/9; background:var(--ink); }
.feed-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.feed-card__play{ position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%; background:var(--rojo); color:#fff; display:flex; align-items:center; justify-content:center; border:2px solid var(--ink); }
.feed-card__title{ padding:14px; font-family:var(--font-display); font-size:14px; line-height:1.3; text-transform:none; }

.feed-card--embed{ background:var(--paper); max-width:400px; justify-self:center; }
.feed-card__embed-wrap{ display:flex; justify-content:center; width:100%; overflow-x:auto; }
.feed-card__embed-wrap iframe{ display:block; max-width:100%; }
.feed-card__embed-wrap blockquote{ margin:0; max-width:100%; }

/* =========================================================
   CONTACTO (banda oscura final, tipo "trabajemos juntos")
   ========================================================= */
.contact-band{ position:relative; background:var(--ink); color:var(--paper); padding:64px 0 70px; overflow:hidden;
  background-image:
    linear-gradient(rgba(246,241,231,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,241,231,.06) 1px, transparent 1px);
  background-size:34px 34px;
}
.contact-band__title{ color:var(--paper); font-size:clamp(34px,7vw,72px); margin-top:18px; }
.contact-band__cta-text{ max-width:640px; margin-top:20px; font-weight:700; color:rgba(246,241,231,.85); font-size:16px; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:44px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-form{ display:flex; flex-direction:column; gap:14px; }
.contact-form input, .contact-form textarea{ background:#2A2830; border:2px solid rgba(246,241,231,.2); border-radius:10px; padding:14px 16px; color:var(--paper); font-size:15px; }
.contact-form textarea{ min-height:110px; resize:vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:rgba(246,241,231,.45); }
.contact-form label.checkbox{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:rgba(246,241,231,.65); }
.contact-form label.checkbox a{ color:var(--paper); text-decoration:underline; }

.social-rail{ display:flex; flex-direction:column; gap:12px; }
.social-rail a{ display:flex; align-items:center; gap:12px; padding:15px 18px; border:2px solid rgba(246,241,231,.25); border-radius:12px; font-family:var(--font-display); font-size:13px; text-transform:uppercase; transition:background .18s ease, border-color .18s ease; }
.social-rail a:hover{ background:rgba(246,241,231,.08); border-color:var(--paper); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ padding:44px 0 28px; background:var(--ink); color:var(--paper); }
.site-footer__top{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:28px; padding:0 24px; max-width:var(--container); margin-left:auto; margin-right:auto; }
.site-footer__nav ul{ display:flex; gap:20px; flex-wrap:wrap; }
.site-footer__nav a{ font-family:var(--font-display); font-size:11px; text-transform:uppercase; color:rgba(246,241,231,.7); }
.site-footer__nav a:hover{ color:var(--paper); }
.site-footer__social{ display:flex; gap:10px; }
.site-footer__social a{ width:36px; height:36px; border-radius:50%; border:2px solid rgba(246,241,231,.3); display:flex; align-items:center; justify-content:center; color:var(--paper); }
.site-footer__social a:hover{ background:var(--paper); color:var(--ink); }
.site-footer__bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; color:rgba(246,241,231,.55); padding:20px 24px 0; border-top:1px solid rgba(246,241,231,.15); max-width:var(--container); margin:0 auto; }

/* =========================================================
   PÁGINAS DE ARCHIVO / SINGLE genéricas
   ========================================================= */
.page-header{ padding:56px 0 36px; border-bottom:2px solid var(--ink); }
.page-header h1{ font-size:clamp(30px,5vw,54px); }
.entry-content{ font-size:17px; }
.entry-content p{ margin:0 0 1.2em; }
.entry-content h2, .entry-content h3{ margin:1.6em 0 .6em; }
.entry-content img{ border-radius:var(--radius); margin:1.4em 0; border:2px solid var(--ink); }

.pagination{ display:flex; gap:10px; justify-content:center; margin-top:48px; }
.pagination a, .pagination span{ min-width:40px; height:40px; padding:0 12px; display:flex; align-items:center; justify-content:center; border:2px solid var(--ink); border-radius:10px; font-family:var(--font-mono); font-size:13px; }
.pagination .current{ background:var(--ink); color:var(--paper); }

/* =========================================================
   BLOG: layout de dos columnas (contenido + sidebar)
   ========================================================= */
.blog-layout{ display:grid; grid-template-columns:1fr 300px; gap:44px; align-items:start; }
@media (max-width:900px){ .blog-layout{ grid-template-columns:1fr; } }
.blog-layout__aside{ display:flex; flex-direction:column; gap:24px; position:sticky; top:90px; }
.blog-layout__aside .widget{ border:2px solid var(--ink); border-radius:14px; padding:18px; background:var(--paper-soft); }
.blog-layout__aside .widget-title{ font-family:var(--font-display); font-size:14px; text-transform:uppercase; margin-bottom:12px; }

/* =========================================================
   BANNER DE ANUNCIOS / COMERCIALES (carrusel opcional)
   ========================================================= */
.ad-banner{
  --ad-ratio: 16/9;
  border:2px dashed var(--paper-line); border-radius:16px; padding:14px;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.ad-banner__tag{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-dim); align-self:flex-start; }

.ad-banner__viewport{ width:100%; aspect-ratio:var(--ad-ratio); border-radius:10px; overflow:hidden; position:relative; background:var(--paper-soft); }
.ad-banner__track{ display:flex; width:100%; height:100%; transition:transform .5s ease; }
.ad-banner__slide{ position:relative; flex:0 0 100%; width:100%; height:100%; }
.ad-banner__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.ad-banner__slide a{ display:block; width:100%; height:100%; }
.ad-banner__label{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-family:var(--font-display); font-size:10px; text-transform:uppercase;
  background:var(--paper); border:1.5px solid var(--ink); border-radius:100px; padding:4px 12px;
}

.ad-banner__dots{ display:flex; gap:8px; }
.ad-banner__dot{ width:9px; height:9px; border-radius:50%; border:2px solid var(--ink); background:transparent; padding:0; transition:background .15s ease, transform .15s ease; }
.ad-banner__dot.is-active{ background:var(--ink); transform:scale(1.15); }

.ad-banner--single .ad-banner__viewport{ max-height:420px; }