/* ===========================
   Pod😉CasTa — Header + Footer Shell (OptimeFlow(s) look)
   + Catálogo de podcast con selector de temporadas
   + Reproductor y descarga por episodio
   + Ajuste premium: hero más protagonista, chips más finos,
     cards de episodio con lenguaje más editorial
   =========================== */

:root{
  /* Base (SYSTEM): ahora claro + alegre */
  --bg: #f4f7ff;

  --panel: #0f1321;
  --ink: #eaf6ff;
  --muted: #a9c0d6;

  --primary: #22d3ee;
  --accent: #a78bfa;
  --danger: #ef4444;
  --ghost: #1f2942;
  --field: #121935;
  --border: #2c3b5f;

  --radius: 12px;
  --space: 14px;
  --success: #22c55e;

  --glass: blur(18px) saturate(1.35);

  /* Ambient / fondo (cambia por tema) */
  --bg-blob-1: #22d3ee;   /* cyan */
  --bg-blob-2: #a78bfa;   /* violet */
  --bg-blob-3: #f472b6;   /* pink */
  --bg-blob-4: #a3e635;   /* lime */

  --ambient-opacity: 0.95;
  --ambient-blur: 58px;
  --ambient-sat: 1.35;

  /* Stage (zona donde irá el contenido) */
  --stage-opacity: 0.98;
  --stage-radius: 26px;

  /* === NUEVO: stage oscuro tintado por tema === */
  --stage-tint-1: color-mix(in srgb, #020617 74%, var(--bg-blob-1));
  --stage-tint-2: color-mix(in srgb, #020617 74%, var(--bg-blob-2));
  --stage-tint-3: color-mix(in srgb, #020617 74%, var(--bg-blob-3));
  --stage-tint-4: color-mix(in srgb, #020617 74%, var(--bg-blob-4));

  /* Base oscura pero con “tono” del tema */
  --stage-base-1: color-mix(in srgb, rgba(2,6,23,0.92) 72%, var(--stage-tint-2) 28%);
  --stage-base-2: color-mix(in srgb, rgba(2,6,23,0.70) 82%, var(--stage-tint-1) 18%);

  --stage-border: color-mix(in srgb, var(--stage-tint-2) 38%, rgba(255,255,255,0.14));

  /* safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --border-subtle: color-mix(in srgb, var(--border) 55%, transparent);
  --text: var(--ink);
  --text-soft: var(--muted);
  --accent-blue: var(--primary);
  --accent-green: #22c55e;

  /* tarjetas (settings/overlays) */
  --surface-card: linear-gradient(145deg, rgba(15,23,42,0.88), rgba(15,23,42,0.68));

  /* runtime layout vars (set by app.js) */
  --header-h: 56px;
  --footer-h: 56px;

  /* layout */
  --content-max: 1180px;
}

/* ===== Temas (alegres 😄) ===== */

/* NEON: lavanda clara + blobs cyan/pink/violet/lime */
:root[data-theme="neon"]{
  --bg: #f7f0ff;

  --primary: #22d3ee;
  --accent: #ec4899;
  --border: #6d28d9;

  --bg-blob-1: #22d3ee;
  --bg-blob-2: #a78bfa;
  --bg-blob-3: #ec4899;
  --bg-blob-4: #a3e635;

  --ambient-opacity: 0.98;
  --stage-opacity: 0.98;
}

/* SUNRISE: crema/peach + rosa/ámbar/cielo/lima */
:root[data-theme="sunrise"]{
  --bg: #fff2e8;

  --primary: #fb7185;
  --accent: #f59e0b;
  --border: #fb923c;

  --bg-blob-1: #fb7185;
  --bg-blob-2: #f59e0b;
  --bg-blob-3: #38bdf8;
  --bg-blob-4: #a3e635;

  --ambient-opacity: 0.96;
  --stage-opacity: 0.98;
}

/* CANDY: rosa suave + fucsia/violeta/azul/cyan */
:root[data-theme="candy"]{
  --bg: #fff0fb;

  --primary: #f472b6;
  --accent: #a78bfa;
  --border: #a78bfa;

  --bg-blob-1: #f472b6;
  --bg-blob-2: #a78bfa;
  --bg-blob-3: #60a5fa;
  --bg-blob-4: #22d3ee;

  --ambient-opacity: 0.98;
  --stage-opacity: 0.98;
}

/* TROPICAL: menta clara + teal/lime/coral/sky */
:root[data-theme="tropical"]{
  --bg: #ecfffb;

  --primary: #2dd4bf;
  --accent: #a3e635;
  --border: #14b8a6;

  --bg-blob-1: #2dd4bf;
  --bg-blob-2: #a3e635;
  --bg-blob-3: #fb7185;
  --bg-blob-4: #38bdf8;

  --ambient-opacity: 0.95;
  --stage-opacity: 0.98;
}

/* SKY: azul muy claro + sky/green/violet/pink */
:root[data-theme="sky"]{
  --bg: #eef6ff;

  --primary: #38bdf8;
  --accent: #22c55e;
  --border: #60a5fa;

  --bg-blob-1: #38bdf8;
  --bg-blob-2: #22c55e;
  --bg-blob-3: #a78bfa;
  --bg-blob-4: #fb7185;

  --ambient-opacity: 0.94;
  --stage-opacity: 0.98;
}

/* PARTY: lavanda brillante + purple/cyan/pink/amber */
:root[data-theme="party"]{
  --bg: #f8efff;

  --primary: #a855f7;
  --accent: #22d3ee;
  --border: #a855f7;

  --bg-blob-1: #a855f7;
  --bg-blob-2: #22d3ee;
  --bg-blob-3: #f472b6;
  --bg-blob-4: #f59e0b;

  --ambient-opacity: 0.98;
  --stage-opacity: 0.98;
}

/* MINT: menta suave + green/cyan/lime/violet */
:root[data-theme="mint"]{
  --bg: #edfffa;

  --primary: #34d399;
  --accent: #22d3ee;
  --border: #10b981;

  --bg-blob-1: #34d399;
  --bg-blob-2: #22d3ee;
  --bg-blob-3: #a3e635;
  --bg-blob-4: #a78bfa;

  --ambient-opacity: 0.94;
  --stage-opacity: 0.98;
}

/* PEACH: melocotón claro + orange/pink/sky/lime */
:root[data-theme="peach"]{
  --bg: #fff1e7;

  --primary: #fb923c;
  --accent: #f472b6;
  --border: #fb923c;

  --bg-blob-1: #fb923c;
  --bg-blob-2: #f472b6;
  --bg-blob-3: #38bdf8;
  --bg-blob-4: #a3e635;

  --ambient-opacity: 0.95;
  --stage-opacity: 0.98;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  overflow-x:hidden;
  transition: background-color .25s ease;
}

/* ===== Fondo "brush/aura" GLOBAL por tema ===== */
body{
  position:relative;
  isolation:isolate;
}

/* Aura blobs */
body::before{
  content:"";
  position:fixed;
  inset:-22vmax;
  pointer-events:none;
  z-index:-3;

  background:
    radial-gradient(900px 700px at 14% 14%,
      color-mix(in srgb, var(--bg-blob-1) 74%, transparent) 0%,
      transparent 62%),
    radial-gradient(900px 700px at 90% 10%,
      color-mix(in srgb, var(--bg-blob-2) 72%, transparent) 0%,
      transparent 64%),
    radial-gradient(950px 720px at 78% 90%,
      color-mix(in srgb, var(--bg-blob-3) 70%, transparent) 0%,
      transparent 66%),
    radial-gradient(1100px 820px at 18% 92%,
      color-mix(in srgb, var(--bg-blob-4) 64%, transparent) 0%,
      transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.22));

  filter:
    blur(var(--ambient-blur))
    saturate(var(--ambient-sat))
    contrast(1.04);

  opacity: var(--ambient-opacity);
  transform: translate3d(0,0,0);
  will-change: transform;
  animation: ambientDrift 18s ease-in-out infinite alternate;
}

@keyframes ambientDrift{
  0%   { transform: translate3d(-1.5%, -1.2%, 0) scale(1.02) rotate(-1deg); }
  100% { transform: translate3d( 1.5%,  1.2%, 0) scale(1.05) rotate( 1deg); }
}

/* Stage: zona central donde irá contenido (OSCURA + TONO DEL TEMA) */
body::after{
  content:"";
  position:fixed;
  left: calc(10px + var(--safe-left));
  right: calc(10px + var(--safe-right));
  top: calc(var(--header-h) + 10px + var(--safe-top));
  bottom: calc(var(--footer-h) + 10px + var(--safe-bottom));
  pointer-events:none;
  z-index:-2;

  border-radius: var(--stage-radius);

  background:
    radial-gradient(1200px 320px at 50% 0%,
      rgba(255,255,255,0.10) 0%,
      transparent 70%),
    radial-gradient(140% 120% at 50% 50%,
      transparent 52%,
      rgba(0,0,0,0.46) 100%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.06) 0 2px,
      transparent 2px 14px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.22) 0 1px,
      transparent 1px 18px
    ),
    radial-gradient(880px 680px at 16% 18%,
      color-mix(in srgb, var(--stage-tint-1) 68%, transparent) 0%,
      transparent 66%),
    radial-gradient(820px 660px at 88% 18%,
      color-mix(in srgb, var(--stage-tint-2) 66%, transparent) 0%,
      transparent 67%),
    radial-gradient(900px 680px at 76% 92%,
      color-mix(in srgb, var(--stage-tint-3) 62%, transparent) 0%,
      transparent 68%),
    radial-gradient(980px 720px at 20% 94%,
      color-mix(in srgb, var(--stage-tint-4) 58%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg, var(--stage-base-1), var(--stage-base-2));

  border: 1px solid var(--stage-border);

  box-shadow:
    0 34px 95px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 62px color-mix(in srgb, var(--bg-blob-2) 18%, transparent),
    0 0 22px rgba(0,0,0,0.45) inset;

  backdrop-filter: blur(20px) saturate(1.35) contrast(1.05);
  opacity: var(--stage-opacity);
}

/* Grain leve */
.page-root{
  height:100dvh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  z-index:0;
}

.page-root::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.12;
  filter: blur(0.2px);
}

/* sr-only */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===========================
   Botones / selects
   =========================== */

a{ color:inherit; }
a.btn{ text-decoration:none; }

.btn{
  border-radius:999px;
  border:1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.92), rgba(15,23,42,0.78));
  color:var(--text);
  padding:8px 14px;
  font-size:0.9rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .18s ease,
    transform .08s ease,
    filter .16s ease;
}
.btn:hover{
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.26), transparent 55%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--bg-blob-2) 22%, rgba(15,23,42,0.92)),
      rgba(15,23,42,0.78)
    );
  border-color: color-mix(in srgb, var(--accent) 65%, white);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.62),
    0 0 22px color-mix(in srgb, var(--bg-blob-1) 28%, transparent);
  transform:translateY(-1px);
  filter:brightness(1.03);
}
.btn:active{ transform:translateY(0); filter:brightness(0.98); }
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
  filter:none;
}
.btn:disabled:hover{
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.92), rgba(15,23,42,0.78));
  border-color: var(--border-subtle);
}

.btn.primary{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.30) 0, transparent 55%),
    linear-gradient(145deg, #4ade80, #22c55e, #16a34a);
  border-color: rgba(34,197,94,0.95);
  color:#022c16;
  box-shadow:
    0 14px 42px rgba(22,163,74,0.52),
    0 0 0 1px rgba(21,128,61,0.72) inset,
    0 0 40px rgba(34,197,94,0.20);
}
.btn.ghost{
  background:
    radial-gradient(circle at 30% 0%, rgba(148,163,184,0.18), transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.90), rgba(15,23,42,0.74));
  border-color:var(--border-subtle);
}

.sel{
  border-radius:999px;
  border:1px solid var(--border-subtle);
  background:rgba(15,23,42,0.86);
  color:var(--text);
  padding:6px 10px;
  font-size:0.85rem;
  min-width:120px;
  max-width:100%;
}

/* ================= HEADER ================= */

.app-header{ padding:24px; }

.brand-header{
  position:sticky;
  top:0;
  z-index:40;
  padding:
    calc(6px + var(--safe-top))
    calc(14px + var(--safe-right))
    6px
    calc(14px + var(--safe-left));

  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-1) 22%, transparent), transparent 55%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--bg-blob-2) 18%, transparent), transparent 55%),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--bg-blob-3) 12%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,0.80), rgba(15,23,42,0.50));

  backdrop-filter:var(--glass);
  border-bottom:1px solid var(--border-subtle);
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  min-height:40px;
  font-weight:700;
  letter-spacing:.2px;
}

.brand-home-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  text-decoration:none;
  transition:transform .12s ease, filter .16s ease;
}
.brand-home-link:hover,
.brand-home-link:focus-visible{
  transform:translateY(-1px) scale(1.02);
  filter:brightness(1.04);
}
.brand-home-link:focus-visible{
  outline:2px solid color-mix(in srgb, var(--bg-blob-1) 72%, white);
  outline-offset:3px;
}

.brand-logo{
  height:clamp(32px, 5vw, 48px);
  width:clamp(32px, 5vw, 48px);
  border-radius:10px;
  object-fit:contain;
  background:transparent;
  border:none;
}

.brand-logo.heat{
  filter:
    url(#heat-waves)
    drop-shadow(0 0 6px rgba(255,255,255,.35))
    drop-shadow(0 0 18px color-mix(in srgb, var(--bg-blob-1) 35%, transparent));
}

.brand-word{
  font-weight:800;
  font-size:clamp(1.6rem, 2.8vw, 2.0rem);
  letter-spacing:.2px;
}

.brand-neon{
  color:#eaf6ff;
  text-shadow:
    0 0 8px rgba(255,255,255,.22),
    0 0 22px color-mix(in srgb, var(--bg-blob-1) 25%, transparent),
    0 0 34px color-mix(in srgb, var(--bg-blob-3) 18%, transparent);
  animation:hue 12s linear infinite, glow 3.2s ease-in-out infinite;
}
@supports (-webkit-background-clip:text){
  .brand-neon{
    background: conic-gradient(from 90deg, var(--bg-blob-1), var(--bg-blob-2), var(--bg-blob-3), var(--bg-blob-4), var(--bg-blob-1));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
@keyframes hue{ from{filter:hue-rotate(0);} to{filter:hue-rotate(360deg);} }
@keyframes glow{
  0%,100%{ text-shadow:0 0 6px rgba(255,255,255,.22), 0 0 14px color-mix(in srgb, var(--bg-blob-1) 28%, transparent); }
  50%{ text-shadow:0 0 10px rgba(255,255,255,.42), 0 0 24px color-mix(in srgb, var(--bg-blob-2) 34%, transparent); }
}

.tagline{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:0;
  white-space:nowrap;
  pointer-events:none;
  text-align:center;
}
.glyph{ display:inline-block; line-height:1; transform-origin:center bottom; }

.tagline-podcasta{ animation: podFloat 6.4s ease-in-out infinite; }
@keyframes podFloat{
  0%,100%{ transform:translate(-50%,-50%) translateY(0); }
  50%{ transform:translate(-50%,-50%) translateY(-2px); }
}
.pod-core{
  font-weight:900;
  font-size:1.65rem;
  color:#e9fbff;
  text-shadow:
    0 0 8px rgba(180,215,255,.55),
    0 0 18px color-mix(in srgb, var(--bg-blob-1) 28%, transparent),
    0 0 34px color-mix(in srgb, var(--bg-blob-2) 18%, transparent);
  animation: podHue 10s linear infinite;
}
.pod-soft{
  font-weight:800;
  font-size:1.55rem;
  color:#ffffff;
  opacity:.92;
  text-shadow:
    0 0 7px rgba(255,255,255,.20),
    0 0 16px color-mix(in srgb, var(--bg-blob-3) 20%, transparent),
    0 0 26px color-mix(in srgb, var(--bg-blob-1) 16%, transparent);
  animation: podPulse 4.8s ease-in-out infinite;
}
.pod-caps{
  font-weight:900;
  font-size:1.72rem;
  color:#ffd1f0;
  text-shadow:
    0 0 10px rgba(255,180,240,.45),
    0 0 22px color-mix(in srgb, var(--bg-blob-3) 28%, transparent),
    0 0 36px color-mix(in srgb, var(--bg-blob-2) 18%, transparent);
  animation: podCaps 7.0s ease-in-out infinite;
}
@supports (-webkit-background-clip:text){
  .pod-caps{
    background: conic-gradient(from 90deg, var(--bg-blob-1), var(--bg-blob-2), var(--bg-blob-3), var(--bg-blob-4), var(--bg-blob-1));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
.pod-emoji{
  font-size:1.55rem;
  margin:0 2px;
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--bg-blob-3) 25%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, var(--bg-blob-1) 20%, transparent));
}
@keyframes podHue{ from{ filter:hue-rotate(0deg); } to{ filter:hue-rotate(360deg); } }
@keyframes podPulse{ 0%,100%{ opacity:.78; transform:translateY(0);} 50%{ opacity:.98; transform:translateY(-2px);} }
@keyframes podCaps{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-2px) rotate(2deg);} }
.wobble{ animation: wobble 2.6s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes wobble{
  0%,100%{ transform: rotate(-4deg) translateY(0); }
  50%{ transform: rotate(4deg) translateY(-1px); }
}
.pulse{ animation: pulseUp 2.4s ease-in-out infinite; }
@keyframes pulseUp{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-2px) scale(1.04); }
}

.quick-controls{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
}

.icon-button{
  border-radius:999px;
  border:1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.90), rgba(15,23,42,0.72));
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.10);
  transition: background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease, filter .16s ease;
}
.icon-button:hover{
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.22), transparent 55%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--bg-blob-2) 18%, rgba(15,23,42,0.92)),
      rgba(15,23,42,0.72)
    );
  border-color: color-mix(in srgb, var(--accent) 65%, white);
  box-shadow:0 10px 26px rgba(0,0,0,0.48), 0 0 20px color-mix(in srgb, var(--bg-blob-1) 24%, transparent);
  transform:translateY(-1px);
  filter:brightness(1.03);
}
.icon-gear{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid color-mix(in srgb, var(--accent) 70%, white);
  box-shadow:0 0 0 1px rgba(15,23,42,0.55);
  position:relative;
}
.icon-gear::before,
.icon-gear::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  border:2px solid rgba(148,163,184,0.75);
}
.icon-gear::after{
  inset:7px;
  border-width:3px;
  border-color: color-mix(in srgb, var(--bg-blob-1) 65%, white);
}

/* settings sheet */
.settings-sheet{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-start;
  justify-content:flex-end;
  padding:
    calc(62px + var(--safe-top))
    calc(12px + var(--safe-right))
    calc(12px + var(--safe-bottom))
    calc(12px + var(--safe-left));
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg-blob-2) 14%, rgba(15,23,42,0.55)),
      transparent
    );
  pointer-events:none;
  z-index:45;
}
.settings-sheet.is-open{ display:flex; pointer-events:auto; }

.settings-card{
  width:min(320px, 100%);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-1) 16%, transparent), transparent 55%),
    radial-gradient(circle at 120% 0%, color-mix(in srgb, var(--bg-blob-3) 14%, transparent), transparent 55%),
    var(--surface-card);
  border-radius:20px;
  border:1px solid var(--border-subtle);
  box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.12) inset;
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  backdrop-filter:var(--glass);
}
.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:0.9rem;
  min-width:0;
}
.settings-row label{ color:var(--text-soft); }

/* ================= MAIN APP ================= */

.app-main{
  position:fixed;
  left: calc(10px + var(--safe-left));
  right: calc(10px + var(--safe-right));
  top: calc(var(--header-h) + 10px + var(--safe-top));
  bottom: calc(var(--footer-h) + 10px + var(--safe-bottom));
  z-index:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
  clip-path: inset(0 round var(--stage-radius));
  border-radius:var(--stage-radius);
  padding:
    16px
    calc(16px + var(--safe-right))
    calc(24px + var(--safe-bottom))
    calc(16px + var(--safe-left));
  scrollbar-width:thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 40%, transparent) transparent;
}

.app-main::-webkit-scrollbar{
  width:12px;
  height:12px;
}
.app-main::-webkit-scrollbar-track{
  background:transparent;
}
.app-main::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.10));
  border:3px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
}

.stage-shell{
  width:min(var(--content-max), 100%);
  min-height:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:2px;
}

.card-panel,
.hero-card{
  border:1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-1) 12%, transparent), transparent 52%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--bg-blob-3) 10%, transparent), transparent 50%),
    var(--surface-card);
  box-shadow:
    0 18px 46px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.08) inset;
  backdrop-filter: var(--glass);
}

/* ===== Hero premium ===== */
.hero-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:28px;
  padding:22px;
  display:grid;
  grid-template-columns:minmax(0, 1.16fr) minmax(280px, 360px);
  gap:20px;
  align-items:center;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-20% auto auto -10%;
  width:44%;
  height:62%;
  background:radial-gradient(circle, color-mix(in srgb, var(--bg-blob-2) 28%, transparent), transparent 72%);
  filter:blur(36px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.10), transparent 18%, transparent 78%, rgba(255,255,255,0.06)),
    radial-gradient(900px 280px at 85% 8%, color-mix(in srgb, var(--bg-blob-1) 18%, transparent), transparent 60%);
}

.hero-copy,
.hero-media{
  position:relative;
  z-index:1;
}

.hero-copy{
  display:flex;
  flex-direction:column;
  gap:13px;
  min-width:0;
  max-width:62ch;
}

.eyebrow{
  margin:0;
  font-size:0.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--bg-blob-1) 70%, white);
  font-weight:800;
}

.hero-badge{
  display:inline-flex;
  width:max-content;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--bg-blob-1) 35%, rgba(255,255,255,0.14));
  background:linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  box-shadow:
    0 8px 18px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.05) inset;
}

.hero-title{
  margin:0;
  font-size:clamp(2rem, 4.3vw, 3.45rem);
  line-height:.98;
  letter-spacing:-0.03em;
  text-wrap:balance;
}

.hero-subtitle{
  margin:0;
  max-width:48ch;
  font-size:1.06rem;
  color:#f6fbff;
  font-weight:760;
  line-height:1.45;
}

.hero-description,
.player-description{
  margin:0;
  color:var(--text-soft);
  line-height:1.7;
}

.hero-description{
  max-width:60ch;
  font-size:0.98rem;
}

.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ===== Chips refinados ===== */
.meta-pill,
.progress-chip,
.episode-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  font-size:0.71rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.045em;
  border:1px solid color-mix(in srgb, var(--border) 50%, rgba(255,255,255,0.1));
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 16px rgba(0,0,0,0.12);
  backdrop-filter: blur(10px) saturate(1.15);
}

.meta-pill{
  color:#e8f3ff;
}

.progress-chip{
  color:#dcfce7;
  border-color:rgba(34,197,94,0.32);
  background:linear-gradient(145deg, rgba(34,197,94,0.16), rgba(34,197,94,0.08));
}

.episode-badge{
  color:#dff8ff;
  border-color:rgba(34,211,238,0.30);
  background:linear-gradient(145deg, rgba(34,211,238,0.16), rgba(34,211,238,0.08));
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero-media{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.hero-media-pair{
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:14px;
}

.cover-wrap{
  position:relative;
  width:min(100%, 264px);
  aspect-ratio:1 / 1;
  border-radius:30px;
  padding:9px;
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.05)
    );
  box-shadow:
    0 26px 58px rgba(0,0,0,0.42),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 40px color-mix(in srgb, var(--bg-blob-2) 18%, transparent);
  transform:rotate(2.2deg) translateZ(0);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.cover-wrap-secondary{
  width:min(100%, 172px);
  transform:rotate(-2.8deg) translateY(8px);
}
.cover-wrap::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:40px;
  background:
    conic-gradient(from 180deg, color-mix(in srgb, var(--bg-blob-1) 34%, transparent), transparent, color-mix(in srgb, var(--bg-blob-3) 28%, transparent), transparent);
  filter:blur(20px);
  opacity:.75;
  z-index:-2;
}
.cover-wrap::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:25px;
  border:1px solid rgba(255,255,255,0.10);
  pointer-events:none;
}
.hero-card:hover .cover-wrap-primary{
  transform:rotate(.4deg) translateY(-2px);
  box-shadow:
    0 30px 72px rgba(0,0,0,0.48),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 50px color-mix(in srgb, var(--bg-blob-1) 22%, transparent);
}
.hero-card:hover .cover-wrap-secondary{
  transform:rotate(-.8deg) translateY(4px);
  box-shadow:
    0 24px 52px rgba(0,0,0,0.42),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 36px color-mix(in srgb, var(--bg-blob-3) 18%, transparent);
}

.cover-art{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:22px;
  background:rgba(255,255,255,0.04);
  box-shadow:
    0 16px 30px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.cover-glow{
  position:absolute;
  inset:12%;
  border-radius:34px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--bg-blob-1) 54%, transparent), transparent 70%);
  filter:blur(54px);
  z-index:-1;
  opacity:.85;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.section-head h2{
  margin:4px 0 0;
  font-size:1.2rem;
}

.section-hint,
.season-summary-soft{
  margin:0;
  color:var(--text-soft);
  font-size:0.9rem;
  line-height:1.55;
}

.season-strip-card{
  border-radius:20px;
  padding:16px;
}

.season-strip{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-top:10px;
  padding-bottom:4px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

.season-strip::-webkit-scrollbar{
  height:8px;
}
.season-strip::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.16);
  border-radius:999px;
}

.season-pill{
  flex:0 0 auto;
  min-width:148px;
  padding:12px 12px 11px;
  border-radius:18px;
  border:1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.92), rgba(15,23,42,0.72));
  color:var(--ink);
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  justify-content:center;
  cursor:pointer;
  scroll-snap-align:start;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform .12s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
.season-pill:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--accent) 65%, white);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.38),
    0 0 20px color-mix(in srgb, var(--bg-blob-2) 24%, transparent);
}
.season-pill.is-active{
  border-color:color-mix(in srgb, var(--bg-blob-1) 60%, white);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.22), transparent 55%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--bg-blob-1) 16%, rgba(15,23,42,0.92)),
      rgba(15,23,42,0.74)
    );
}
.season-pill.is-locked{
  opacity:.88;
}
.season-pill-top{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.season-pill-short{
  font-weight:900;
  font-size:1rem;
}
.season-pill-lock{
  font-size:1rem;
}
.season-pill-title{
  font-size:0.8rem;
  line-height:1.28;
  font-weight:780;
  text-align:left;
  text-wrap:balance;
}
.season-pill-bottom{
  font-size:0.74rem;
  color:var(--text-soft);
  text-align:left;
}

.catalog-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(300px, 380px);
  gap:14px;
  align-items:start;
}

.episodes-panel,
.player-panel{
  border-radius:22px;
  padding:16px;
}

.player-panel{
  position:sticky;
  top:10px;
}

.season-state-card{
  border-radius:18px;
  border:1px solid var(--border-subtle);
  padding:14px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-4) 12%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  margin-bottom:14px;
}
.season-state-locked{
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-2) 12%, transparent), transparent 50%),
    linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.season-state-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.season-state-head h2{
  margin:0;
  font-size:1.15rem;
}
.season-summary-text{
  margin:0;
  color:#f8fbff;
  line-height:1.55;
}

.episodes-list{
  display:grid;
  gap:14px;
}

/* ===== Cards de episodio con aire editorial ===== */
.episode-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:16px 16px 14px 18px;
  border:1px solid color-mix(in srgb, var(--border) 46%, rgba(255,255,255,0.08));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-1) 12%, transparent), transparent 54%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--bg-blob-3) 10%, transparent), transparent 46%),
    linear-gradient(150deg, rgba(15,23,42,0.88), rgba(15,23,42,0.68));
  box-shadow:
    0 18px 34px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transition:border-color .16s ease, transform .12s ease, box-shadow .16s ease, background .18s ease;
}
.episode-card::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg-blob-1) 90%, white), color-mix(in srgb, var(--bg-blob-3) 75%, transparent));
  opacity:.72;
}
.episode-card::after{
  content:"";
  position:absolute;
  inset:auto -14% 62% auto;
  width:180px;
  height:120px;
  background:radial-gradient(circle, color-mix(in srgb, var(--bg-blob-2) 18%, transparent), transparent 72%);
  filter:blur(18px);
  pointer-events:none;
  opacity:.68;
}
.episode-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--bg-blob-1) 42%, white);
  box-shadow:
    0 22px 42px rgba(0,0,0,0.30),
    0 0 24px color-mix(in srgb, var(--bg-blob-2) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.episode-card.is-active{
  border-color:color-mix(in srgb, var(--bg-blob-1) 64%, white);
  box-shadow:
    0 24px 46px rgba(0,0,0,0.34),
    0 0 30px color-mix(in srgb, var(--bg-blob-1) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.09);
}
.episode-card.is-active::before{
  width:4px;
  opacity:1;
}
.episode-card.is-pending{
  opacity:.96;
}
.episode-card.is-pending .episode-index{
  border-color:color-mix(in srgb, var(--border) 42%, rgba(255,255,255,0.08));
}

.episode-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.episode-main{
  flex:1 1 320px;
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.episode-index{
  flex:0 0 auto;
  width:68px;
  min-height:68px;
  border-radius:20px;
  border:1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,0.10));
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.22), transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 18px rgba(0,0,0,0.14);
}
.episode-index-label{
  font-size:0.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-soft);
  font-weight:800;
}
.episode-index strong{
  font-size:1.2rem;
  line-height:1;
  letter-spacing:-0.03em;
}

.episode-copy{
  flex:1 1 auto;
  min-width:0;
}

.episode-cover{
  flex:0 0 118px;
  width:118px;
  margin:0;
}
.episode-cover-frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:5px;
  border-radius:20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  box-shadow:
    0 14px 28px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.07) inset;
}
.episode-cover-frame::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  pointer-events:none;
}
.episode-cover-img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center center;
  border-radius:15px;
  background:rgba(255,255,255,0.04);
}
.episode-card.is-active .episode-cover-frame{
  box-shadow:
    0 16px 30px rgba(0,0,0,0.26),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 24px color-mix(in srgb, var(--bg-blob-1) 16%, transparent);
}

.episode-headline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.episode-title{
  margin:0;
  font-size:1.08rem;
  line-height:1.28;
  letter-spacing:-0.015em;
  text-wrap:balance;
}
.episode-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--text-soft);
  font-size:0.8rem;
  margin-top:8px;
}
.episode-meta .dot{
  opacity:.5;
}
.episode-summary{
  margin:10px 0 0;
  color:var(--text-soft);
  font-size:0.93rem;
  line-height:1.62;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.episode-actions,
.player-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.episode-actions{
  padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--border) 42%, transparent);
}

.player-shell h2{
  margin:6px 0 0;
  font-size:1.35rem;
  line-height:1.22;
}
.player-empty h2{
  margin:4px 0 8px;
  font-size:1.2rem;
}
.player-shell{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.player-audio audio{
  width:100%;
  display:block;
  min-height:54px;
  border-radius:16px;
  background:rgba(0,0,0,0.20);
}
.player-fallback{
  border-radius:16px;
  border:1px dashed color-mix(in srgb, var(--accent) 36%, rgba(255,255,255,0.10));
  background:rgba(255,255,255,0.03);
  padding:14px;
}

.support-note{
  margin:0;
  font-size:0.84rem;
  color:var(--text-soft);
  line-height:1.55;
}

/* responsive header */
@media (max-width: 1024px) and (orientation: portrait){
  .brand{
    justify-content:space-between;
    flex-wrap:nowrap;
    min-height:46px;
  }
  .brand-word{ display:none; }
  .brand-home-link,
  .quick-controls{
    position:relative;
    z-index:1;
  }
  .brand-logo{
    width:40px;
    height:40px;
  }
  .tagline{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:max-content;
    max-width:calc(100% - 132px);
    justify-content:center;
    overflow:hidden;
    white-space:nowrap;
  }
  .pod-core{ font-size:1.46rem; }
  .pod-soft{ font-size:1.36rem; }
  .pod-caps{ font-size:1.52rem; }
  .pod-emoji{ font-size:1.38rem; margin:0 1px; }
  .quick-controls{ margin-left:auto; }
}

@media (max-width: 1024px){
  .hero-card{
    grid-template-columns:1fr;
    gap:18px;
  }
  .hero-media{
    order:-1;
    justify-content:center;
  }
  .hero-media-pair{
    justify-content:center;
  }
  .catalog-layout{
    grid-template-columns:1fr;
  }
  .player-panel{
    position:static;
  }
}

@media (max-width: 680px){
  .brand-header{
    padding-left:calc(10px + var(--safe-left));
    padding-right:calc(10px + var(--safe-right));
  }
  .brand-logo{
    width:42px;
    height:42px;
  }
  .tagline{
    max-width:calc(100% - 124px);
  }
  .pod-core{ font-size:1.38rem; }
  .pod-soft{ font-size:1.30rem; }
  .pod-caps{ font-size:1.46rem; }
  .pod-emoji{ font-size:1.28rem; }

  .app-main{
    padding:
      12px
      calc(12px + var(--safe-right))
      calc(20px + var(--safe-bottom))
      calc(12px + var(--safe-left));
  }
  .hero-card,
  .season-strip-card,
  .episodes-panel,
  .player-panel{
    padding:14px;
  }
  .hero-card{
    border-radius:24px;
    gap:16px;
  }
  .hero-copy{
    width:100%;
    max-width:none;
  }
  .hero-title{
    font-size:clamp(1.68rem, 7.4vw, 2.3rem);
    line-height:1.02;
    overflow-wrap:anywhere;
  }
  .hero-subtitle{
    max-width:none;
    font-size:0.98rem;
    line-height:1.48;
  }
  .hero-description{
    max-width:none;
    font-size:0.94rem;
    line-height:1.64;
    overflow-wrap:anywhere;
  }
  .hero-pills{
    gap:6px;
  }
  .hero-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions .btn{
    width:100%;
  }
  .hero-media{
    width:100%;
    justify-content:center;
  }
  .hero-media-pair{
    width:100%;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
  }
  .cover-wrap,
  .cover-wrap-secondary{
    width:clamp(114px, 35vw, 148px);
    min-width:114px;
    max-width:148px;
    border-radius:24px;
    padding:7px;
    transform:none;
  }
  .cover-wrap::after{
    border-radius:20px;
  }
  .cover-art{
    border-radius:18px;
    object-position:center center;
  }
  .meta-pill,
  .progress-chip,
  .episode-badge{
    min-height:26px;
    padding:4px 8px;
    font-size:0.68rem;
    letter-spacing:.02em;
  }
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .season-pill{
    min-width:132px;
    padding:11px;
  }
  .season-pill-title{
    font-size:0.76rem;
  }
  .episode-card{
    padding:14px 14px 13px 16px;
    border-radius:22px;
  }
  .episode-card-top{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 92px;
    align-items:start;
    gap:10px;
  }
  .episode-main{
    gap:10px;
    min-width:0;
  }
  .episode-index{
    width:56px;
    min-height:56px;
    border-radius:16px;
  }
  .episode-cover{
    width:92px;
    flex:0 0 92px;
    justify-self:end;
    align-self:start;
    margin:0;
  }
  .episode-cover-frame{
    margin:0;
    padding:4px;
  }
  .episode-index strong{
    font-size:1.05rem;
  }
  .episode-title{
    font-size:1rem;
  }
  .episode-summary{
    -webkit-line-clamp:4;
    font-size:0.91rem;
  }
  .episode-actions > *,
  .player-actions > *{
    width:100%;
  }
}

@media (max-width: 440px){
  .brand-header{
    padding-left:calc(8px + var(--safe-left));
    padding-right:calc(8px + var(--safe-right));
  }
  .brand-logo{
    width:44px;
    height:44px;
  }
  .tagline{
    max-width:calc(100% - 118px);
  }
  .pod-core{ font-size:1.26rem; }
  .pod-soft{ font-size:1.20rem; }
  .pod-caps{ font-size:1.34rem; }
  .pod-emoji{ font-size:1.18rem; }

  .meta-pill,
  .progress-chip,
  .episode-badge{
    font-size:0.66rem;
    padding:4px 8px;
  }
  .hero-card{
    gap:14px;
  }
  .hero-title{
    font-size:clamp(1.56rem, 8.2vw, 2.02rem);
  }
  .hero-subtitle{
    font-size:0.95rem;
  }
  .hero-description{
    font-size:0.91rem;
  }
  .hero-media-pair{
    gap:8px;
  }
  .cover-wrap,
  .cover-wrap-secondary{
    width:min(40vw, 136px);
    min-width:104px;
    max-width:136px;
  }
  .episode-card-top{
    grid-template-columns:minmax(0, 1fr) 78px;
    gap:8px;
    align-items:start;
  }
  .episode-main{
    width:auto;
    gap:10px;
  }
  .episode-index{
    width:54px;
    min-height:54px;
  }
  .episode-cover{
    width:78px;
    flex:0 0 78px;
    justify-self:end;
    align-self:start;
    margin:0;
  }
}

/* ================= FOOTER OptimeFlow(s) ================= */
.brand-footer{
  background:
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--bg-blob-1) 16%, transparent), transparent 55%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--bg-blob-2) 14%, transparent), transparent 55%),
    linear-gradient(0deg, rgba(15,23,42,0.80), rgba(15,23,42,0.50));
  border-top: 1px solid var(--border-subtle);
  padding:
    4px
    calc(12px + var(--safe-right))
    calc(4px + var(--safe-bottom))
    calc(12px + var(--safe-left));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  box-shadow:0 -14px 32px rgba(0,0,0,.35);
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  backdrop-filter:var(--glass);
}

.brand-footer strong{ color:var(--ink); }
.brand-footer .sep{ opacity:.6; }

.brand-footer .btn.ghost{
  background:rgba(15,23,42,0.70);
  border:1px solid var(--border-subtle);
  color:var(--ink);
  height:26px;
  border-radius:7px;
  padding:0 10px;
  font-weight:800;
}

.footer-left{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:0.78rem;
  min-width:0;
}

.f-left-row1,
.f-left-row2{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  min-width:0;
}

#footerAppName{
  display:inline-flex;
  min-width:0;
  max-width:100%;
  white-space:normal;
}

.footer-author-link{
  color:#c89a33;
  text-decoration:none;
  font-weight:700;
  transition:color .14s ease, text-shadow .14s ease;
}
.footer-author-link:hover,
.footer-author-link:focus-visible{
  color:#e3ba60;
  text-shadow:0 0 12px rgba(227,186,96,0.24);
  text-decoration:underline;
}
.footer-author-link:focus-visible{
  outline:none;
}
.footer-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.footer-right{
  display:flex;
  align-items:center;
  gap:clamp(8px, 2vw, 18px);
}

.footer-logo-btn{
  display:inline-grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  transition: box-shadow .14s ease, transform .08s ease, filter .14s ease, border-color .12s ease, background-color .12s ease;
  box-shadow:none;
}
.footer-logo-btn:hover,
.footer-logo-btn:focus-visible{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.88), rgba(15,23,42,0.70));
  border-color: color-mix(in srgb, var(--accent) 60%, white);
  box-shadow: 0 8px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.10);
}
.footer-logo-btn:active{ transform:scale(0.97); }

.footer-logo{
  height: clamp(28px, 6vw, 36px);
  width: clamp(28px, 6vw, 36px);
  object-fit:contain;
  border-radius:10px;
}
.tag-logo{
  object-fit:contain;
  transform-origin:center center;
  animation:sway 5.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.28))
    drop-shadow(0 0 16px color-mix(in srgb, var(--bg-blob-1) 30%, transparent));
}
@keyframes sway{
  0%{transform:rotate(-3deg);}
  50%{transform:rotate(3deg);}
  100%{transform:rotate(-3deg);}
}

@media (max-width: 600px) and (orientation: portrait){
  .brand-footer{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    padding-left: calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
    column-gap:8px;
  }
  .footer-left{
    justify-self:flex-start;
    text-align:left;
    min-width:0;
  }
  .f-left-row1{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    align-items:start;
  }
  .f-left-row1 .sep{
    display:none;
  }
  #footerAppName{
    display:block;
    overflow-wrap:anywhere;
  }
  .footer-center{ position:static; transform:none; justify-self:center; }
  .footer-right{
    justify-self:flex-end;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
  }
  .footer-logo-btn{
    padding:2px;
  }
  .footer-logo{
    height: clamp(76px, 22vw, 108px);
    width: clamp(76px, 22vw, 108px);
  }
}

/* ================= AVISO DE CONTENIDO ================= */
.responsible-notice-overlay{
  z-index:80;
}

.responsible-notice-box{
  width:min(820px, calc(100% - 28px));
  max-width:min(820px, calc(100% - 28px));
  max-height:min(88vh, 760px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:20px;
}

.responsible-notice-kicker{
  margin-bottom:8px;
}

.responsible-notice-box h2{
  margin:0 0 12px;
  font-size:clamp(1.12rem, 2.3vw, 1.48rem);
  line-height:1.18;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.responsible-notice-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-1) 10%, transparent), transparent 56%),
    linear-gradient(145deg, rgba(15,23,42,0.74), rgba(15,23,42,0.54));
  color:var(--text-soft);
  line-height:1.65;
  scrollbar-width:thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 38%, transparent) transparent;
}

.responsible-notice-body::-webkit-scrollbar{
  width:10px;
}
.responsible-notice-body::-webkit-scrollbar-track{
  background:transparent;
}
.responsible-notice-body::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.10));
  border:3px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
}

.responsible-notice-body p{
  margin:0 0 .88rem;
}
.responsible-notice-body p:last-child{
  margin-bottom:0;
  color:#f8fbff;
  font-weight:780;
}
.responsible-notice-body b,
.responsible-notice-body strong{
  color:#f8fbff;
}
.responsible-notice-body a{
  color:color-mix(in srgb, var(--bg-blob-1) 75%, white);
  font-weight:800;
  text-decoration:none;
}
.responsible-notice-body a:hover,
.responsible-notice-body a:focus-visible{
  text-decoration:underline;
}

.responsible-notice-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border-subtle);
}

.responsible-notice-accept{
  min-height:42px;
  padding-inline:18px;
  letter-spacing:.02em;
  text-transform:uppercase;
}

@media (max-width: 600px){
  .responsible-notice-box{
    width:min(100% - 20px, 820px);
    max-width:min(100% - 20px, 820px);
    max-height:min(90vh, 760px);
    padding:14px;
  }
  .responsible-notice-body{
    padding:12px;
    font-size:.82rem;
    line-height:1.58;
  }
  .responsible-notice-actions{
    justify-content:stretch;
  }
  .responsible-notice-accept{
    width:100%;
  }
}

/* ================= OVERLAYS ================= */
.overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--bg-blob-2) 18%, transparent), transparent 55%),
    radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--bg-blob-1) 14%, transparent), transparent 60%),
    rgba(10,16,28,0.62);

  backdrop-filter: blur(22px) saturate(1.25);
  z-index:60;
}
.overlay[hidden]{ display:none; }
.overlay.is-visible{ display:flex !important; }

.overlay .box{
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-1) 18%, transparent), transparent 55%),
    radial-gradient(circle at 120% 0%, color-mix(in srgb, var(--bg-blob-3) 16%, transparent), transparent 55%),
    var(--surface-card);
  border-radius:18px;
  border:1px solid var(--border-subtle);
  max-width: min(640px, 100% - 32px);
  max-height: min(80vh, 640px);
  padding:16px 16px 14px;
  box-shadow: 0 26px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.12) inset;
  overflow:auto;
  font-size:0.86rem;
  backdrop-filter:var(--glass);
}
.overlay .box h2{ margin:0 0 8px; font-size:1.05rem; }
.overlay .box .small{ font-size:0.83rem; color:var(--text-soft); }
.overlay-actions{ margin-top:10px; text-align:right; }

.license-text{
  margin:0;
  white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:0.8rem;
  background:rgba(15,23,42,0.70);
  border-radius:10px;
  padding:10px;
  border:1px solid var(--border-subtle);
}

body.overlay-open{ overflow:hidden; }
body.overlay-open .app-main{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  body::before,
  .tag-logo,
  .tagline-podcasta,
  .brand-neon,
  .pod-core,
  .pod-soft,
  .pod-caps,
  .wobble,
  .pulse{
    animation:none;
  }
  .cover-wrap,
  .btn,
  .episode-card,
  .season-pill{
    transition:none;
  }
  .hero-card:hover .cover-wrap,
  .episode-card:hover,
  .season-pill:hover,
  .btn:hover{
    transform:none;
  }
}