@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
:root {
  --bg: #f3f0e9;
  --fg: #111111;
  --muted: rgba(17,17,17,.55);
  --line-color: rgba(17,17,17,.28);
  --line: 1px solid var(--line-color);
  --red: #ff2b2b;
  --sidebar: 260px;
  --font: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  letter-spacing: -.035em;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

.site {
  min-height: 100vh;
}

@media (min-width: 951px) {
  .site {
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
  }
}

.sidebar {
  background: var(--bg);
  color: var(--fg);
  border-right: var(--line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand {
  display: block;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: .95;
  letter-spacing: -.055em;
}

.nav {
  margin-top: 48px;
}

.nav a {
  display: block;
  color: inherit;
  text-decoration: none;
  border-top: var(--line);
  padding: 12px 0;
  font-size: .9rem;
}

.nav a:last-child {
  border-bottom: var(--line);
}

.nav a.active {
  color: var(--red);
  font-weight: 700;
}

.side-note {
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.35;
}

.page-main {
  min-width: 0;
}

.simple-main {
  min-height: 100vh;
  padding: 24px;
  display: grid;
  align-content: end;
}

.simple-main h1 {
  margin: 0;
  font-size: clamp(4rem, 14vw, 14rem);
  line-height: .78;
  letter-spacing: -.09em;
  font-weight: 700;
}

.simple-main p {
  max-width: 760px;
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.8vw, 1.55rem);
  line-height: 1.15;
}

.page-voces .page-main {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

.voices-list {
  height: 100vh;
  overflow-y: auto;
  border-right: var(--line);
  padding: 24px;
}

.voices-list h1 {
  margin: 0 0 28px;
  font-size: clamp(2.5rem, 5vw, 5.8rem);
  line-height: .82;
  letter-spacing: -.085em;
}

.episodes {
  display: grid;
}

.episode {
  appearance: none;
  background: transparent;
  color: inherit;
  border: 0;
  border-top: var(--line);
  text-align: left;
  padding: 14px 0;
  cursor: pointer;
}

.episode:last-child {
  border-bottom: var(--line);
}

.episode strong {
  display: block;
  font-size: .96rem;
  line-height: 1.05;
}

.episode span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
}

.episode.active strong {
  color: var(--red);
}

.player-panel {
  height: 100vh;
  overflow: hidden;
  padding: 24px;
  display: grid;
  grid-template-rows: auto auto minmax(170px, 30vh) minmax(0, 1fr);
  gap: 14px;
}

.now h2 {
  margin: 0;
  font-size: clamp(3rem, 7.2vw, 8.5rem);
  line-height: .78;
  letter-spacing: -.095em;
  word-break: break-word;
}

.role {
  margin-top: 12px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.3;
}

.custom-player {
  border: var(--line);
  padding: 14px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.play {
  width: 52px;
  height: 52px;
  border: var(--line);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.timeline {
  width: 100%;
  min-width: 0;
  accent-color: var(--red);
}

.time {
  color: var(--muted);
  font-size: .75rem;
  white-space: nowrap;
}

.caption-box {
  border: var(--line);
  padding: 22px 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.speaker {
  color: var(--red);
  font-size: .82rem;
  margin-bottom: 12px;
}

.caption-text {
  font-size: clamp(1.65rem, 3.8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.07em;
  overflow: hidden;
}

.transcript-window {
  min-height: 0;
  overflow: hidden;
  border-top: var(--line);
}

.cue {
  display: none;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  border: 0;
  border-bottom: var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 12px 0;
  cursor: pointer;
}

.cue.visible-cue,
.cue.active {
  display: grid;
}

.cue:not(.active).visible-cue {
  opacity: .45;
}

.cue.active .cue-text {
  color: var(--red);
}

.cue-time {
  color: var(--muted);
  font-size: .72rem;
}

.cue-text {
  font-size: .84rem;
  line-height: 1.32;
}

.page-dialogos {
  --bg: #090909;
  --fg: #f3f0e9;
  --muted: rgba(243,240,233,.58);
  --line-color: rgba(243,240,233,.28);
}

.page-dialogos .sidebar {
  background: var(--bg);
  color: var(--fg);
}

.dialogos-grid {
  min-height: 100vh;
  padding: 24px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
}

.dialogos-grid h1 {
  margin: 0;
  font-size: clamp(4rem, 12vw, 12rem);
  line-height: .78;
  letter-spacing: -.09em;
}

.video-placeholder {
  border: var(--line);
  min-height: 50vh;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}

@media (max-width: 950px) {
  .site {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-right: 0;
    border-bottom: var(--line);
    padding: 14px 16px;
    display: block;
  }

  .sidebar-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 16px;
  }

  .brand {
    font-size: 1rem;
  }

  .nav {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
  }

  .nav a {
    border: 0;
    padding: 0;
    font-size: .78rem;
  }

  .side-note {
    display: none;
  }

  .simple-main,
  .dialogos-grid {
    min-height: calc(100svh - 58px);
    padding: 16px;
  }

  .page-voces .page-main {
    display: block;
    height: auto;
    overflow: visible;
  }

  .voices-list {
    height: auto;
    max-height: 38svh;
    overflow-y: auto;
    border-right: 0;
    border-bottom: var(--line);
    padding: 16px;
  }

  .voices-list h1 {
    font-size: clamp(2rem, 10vw, 4.2rem);
    margin-bottom: 16px;
  }

  .episode {
    padding: 10px 0;
  }

  .player-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 16px;
    grid-template-rows: auto auto auto auto;
  }

  .now h2 {
    font-size: clamp(2.2rem, 13vw, 5rem);
  }

  .custom-player {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .time {
    grid-column: 1 / -1;
    text-align: right;
  }

  .caption-box {
    min-height: 34svh;
    padding: 18px;
  }

  .caption-text {
    font-size: clamp(1.65rem, 9vw, 4rem);
    max-height: 32svh;
  }

  .transcript-window {
    overflow: hidden;
  }

  .cue {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .sidebar {
    padding: 12px;
  }

  .sidebar-inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .nav {
    justify-content: flex-start;
  }

  .voices-list {
    max-height: 34svh;
    padding: 12px;
  }

  .player-panel {
    padding: 12px;
  }

  .custom-player {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 10px;
  }

  .play {
    width: 44px;
    height: 44px;
  }

  .caption-box {
    min-height: 36svh;
    padding: 14px;
  }

  .caption-text {
    font-size: clamp(1.55rem, 10vw, 3.8rem);
  }
}

/* =========================================================
   AJUSTE FINO VOCES
   Player minimal + 3 líneas + caption sin speaker
   ========================================================= */

.custom-player {
  border: 0;
  border-top: var(--line);
  border-bottom: var(--line);
  padding: 18px 0;
  background: transparent;
  grid-template-columns: 36px minmax(0, 1fr) auto;
}

.play {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
}

.play:hover {
  color: var(--red);
}

.timeline {
  height: 2px;
  cursor: pointer;
}

.timeline::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(17,17,17,.22);
}

.timeline::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border-radius: 999px;
  background: var(--red);
  border: 0;
}

.timeline::-moz-range-track {
  height: 2px;
  background: rgba(17,17,17,.22);
}

.timeline::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--red);
  border: 0;
}

.time {
  font-size: .72rem;
  color: var(--muted);
}

.speaker {
  display: none;
}

.caption-box {
  padding: 28px 34px;
  justify-content: center;
}

.caption-text {
  display: block;
  font-size: clamp(1.95rem, 3.8vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -.07em;
  max-height: none;
  overflow: visible;
  hyphens: none;
  word-break: normal;
}

.transcript-window {
  border-top: var(--line);
}

.cue {
  grid-template-columns: 90px minmax(0, 1fr);
  padding: 14px 0;
}

.cue.visible-cue:nth-of-type(n) {
  display: grid;
}

.cue-time {
  font-size: .72rem;
}

.cue-text {
  font-size: .9rem;
  line-height: 1.25;
}

@media (min-width: 951px) {
  .player-panel {
    grid-template-rows: auto auto minmax(260px, auto) auto;
  }

  .caption-box {
    min-height: 260px;
  }

  .transcript-window {
    max-height: 174px;
  }
}

@media (max-width: 950px) {
  .custom-player {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 14px 0;
  }

  .play {
    width: 36px;
    height: 36px;
  }

  .caption-box {
    min-height: 32svh;
    padding: 22px;
  }

  .caption-text {
    font-size: clamp(1.75rem, 8.5vw, 3.8rem);
    line-height: 1.08;
    max-height: none;
    overflow: visible;
  }

  .transcript-window {
    max-height: 160px;
  }

  .cue {
    grid-template-columns: 62px minmax(0, 1fr);
    padding: 12px 0;
  }
}

/* =========================================================
   AJUSTE CAPTION + 3 LÍNEAS FIJAS TRANSCRIPCIÓN
   ========================================================= */

/* Desktop / laptop */
@media (min-width: 951px) {
  .player-panel {
    grid-template-rows: auto auto auto 168px;
    gap: 18px;
    overflow: hidden;
  }

  .caption-box {
    min-height: 0;
    height: auto;
    max-height: none;
    padding: 20px 28px;
    justify-content: center;
    overflow: hidden;
  }

  .caption-text {
    font-size: clamp(1.65rem, 3.05vw, 3.35rem);
    line-height: 1.08;
    letter-spacing: -.065em;
    max-height: 7.6em;
    overflow: hidden;
  }

  .transcript-window {
    height: 168px;
    min-height: 168px;
    max-height: 168px;
    overflow: hidden;
    border-top: var(--line);
    border-bottom: var(--line);
  }

  .cue {
    min-height: 56px;
    height: 56px;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: start;
    padding: 10px 0;
    overflow: hidden;
  }

  .cue-time {
    font-size: .72rem;
    line-height: 1.25;
  }

  .cue-text {
    font-size: .88rem;
    line-height: 1.22;
    max-height: 2.44em;
    overflow: hidden;
  }
}

/* Tablet / móvil */
@media (max-width: 950px) {
  .player-panel {
    gap: 14px;
  }

  .caption-box {
    min-height: auto !important;
    height: auto !important;
    padding: 18px !important;
    justify-content: center;
    overflow: hidden !important;
  }

  .caption-text {
    font-size: clamp(1.45rem, 7.2vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -.06em;
    max-height: 7.6em;
    overflow: hidden;
  }

  .transcript-window {
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
    overflow: hidden !important;
    border-top: var(--line);
    border-bottom: var(--line);
  }

  .cue {
    min-height: 52px;
    height: 52px;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: start;
    padding: 9px 0;
    overflow: hidden;
  }

  .cue-text {
    font-size: .8rem;
    line-height: 1.22;
    max-height: 2.44em;
    overflow: hidden;
  }
}

/* Móvil pequeño */
@media (max-width: 560px) {
  .caption-box {
    padding: 14px !important;
  }

  .caption-text {
    font-size: clamp(1.3rem, 6.8vw, 2.6rem);
    max-height: 7.7em;
  }

  .transcript-window {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }

  .cue {
    min-height: 50px;
    height: 50px;
  }
}

/* =========================================================
   ALTURAS FIJAS + PLAY/PAUSE MINIMAL
   ========================================================= */

.play {
  position: relative;
  display: grid;
  place-items: center;
  color: transparent;
}

.play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--fg);
  transform: translateX(1px);
}

.play.is-playing::before {
  width: 14px;
  height: 18px;
  border: 0;
  background:
    linear-gradient(var(--fg), var(--fg)) left center / 4px 18px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right center / 4px 18px no-repeat;
  transform: none;
}

.play:hover::before {
  border-left-color: var(--red);
}

.play.is-playing:hover::before {
  background:
    linear-gradient(var(--red), var(--red)) left center / 4px 18px no-repeat,
    linear-gradient(var(--red), var(--red)) right center / 4px 18px no-repeat;
}

/* Desktop: todos los bloques con altura fija */
@media (min-width: 951px) {
  .player-panel {
    grid-template-rows: auto 64px 330px 168px;
    gap: 18px;
    height: 100vh;
    overflow: hidden;
  }

  .custom-player {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    padding: 0;
    align-items: center;
  }

  .caption-box {
    height: 330px;
    min-height: 330px;
    max-height: 330px;
    padding: 22px 30px;
    overflow: hidden;
    justify-content: center;
  }

  .caption-text {
    font-size: clamp(1.35rem, 2.75vw, 3rem);
    line-height: 1.1;
    max-height: 7.7em;
    overflow: hidden;
  }

  .transcript-window {
    height: 168px;
    min-height: 168px;
    max-height: 168px;
    overflow: hidden;
  }

  .cue {
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    padding: 9px 0;
  }
}

/* Tablet / móvil: alturas fijas proporcionadas */
@media (max-width: 950px) {
  .custom-player {
    height: 58px;
    min-height: 58px;
    max-height: 58px;
    padding: 0;
  }

  .caption-box {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  .caption-text {
    font-size: clamp(1.25rem, 6.6vw, 2.8rem);
    line-height: 1.1;
    max-height: 7.7em;
    overflow: hidden;
  }

  .transcript-window {
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
    overflow: hidden !important;
  }

  .cue {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    padding: 8px 0;
  }
}

@media (max-width: 560px) {
  .caption-box {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
  }

  .caption-text {
    font-size: clamp(1.15rem, 6.2vw, 2.35rem);
  }

  .transcript-window {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }

  .cue {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
  }
}

/* =========================================================
   PLAYER REVISADO + TRANSCRIPCIÓN 3 FILAS EXACTAS
   ========================================================= */

.custom-player {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  border: 0 !important;
  border-top: var(--line) !important;
  border-bottom: var(--line) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 104px !important;
  align-items: center !important;
  gap: 18px !important;
}

.play {
  width: 52px !important;
  height: 56px !important;
  min-width: 52px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
}

.play::before {
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 11px solid var(--fg) !important;
  transform: translateX(1px) !important;
}

.play.is-playing::before {
  width: 13px !important;
  height: 17px !important;
  border: 0 !important;
  background:
    linear-gradient(var(--fg), var(--fg)) left center / 4px 17px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right center / 4px 17px no-repeat !important;
  transform: none !important;
}

.play:hover::before {
  border-left-color: var(--red) !important;
}

.play.is-playing:hover::before {
  background:
    linear-gradient(var(--red), var(--red)) left center / 4px 17px no-repeat,
    linear-gradient(var(--red), var(--red)) right center / 4px 17px no-repeat !important;
}

.timeline {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 20px !important;
  margin: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  accent-color: var(--red) !important;
}

.timeline::-webkit-slider-runnable-track {
  height: 2px !important;
  background: rgba(17,17,17,.32) !important;
}

.timeline::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -7px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  border: 0 !important;
}

.timeline::-moz-range-track {
  height: 2px !important;
  background: rgba(17,17,17,.32) !important;
}

.timeline::-moz-range-progress {
  height: 2px !important;
  background: var(--red) !important;
}

.timeline::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  border: 0 !important;
}

.time {
  text-align: right !important;
  white-space: nowrap !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  color: var(--muted) !important;
}

/* Alturas fijas escritorio */
@media (min-width: 951px) {
  .player-panel {
    height: 100vh !important;
    overflow: hidden !important;
    grid-template-rows: auto 56px 300px 216px !important;
    gap: 18px !important;
  }

  .caption-box {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    padding: 22px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .caption-text {
    font-size: clamp(1.35rem, 2.65vw, 2.9rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.06em !important;
    max-height: 7.84em !important;
    overflow: hidden !important;
  }

  .transcript-window {
    height: 216px !important;
    min-height: 216px !important;
    max-height: 216px !important;
    overflow: hidden !important;
    border-top: var(--line) !important;
    border-bottom: var(--line) !important;
  }

  .cue {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    display: none !important;
    grid-template-columns: 90px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 18px !important;
    padding: 12px 0 !important;
    overflow: hidden !important;
    border-bottom: var(--line) !important;
  }

  .cue.visible-cue,
  .cue.active {
    display: grid !important;
  }

  .cue-time {
    font-size: .72rem !important;
    line-height: 1.2 !important;
  }

  .cue-text {
    font-size: .86rem !important;
    line-height: 1.22 !important;
    max-height: 3.66em !important;
    overflow: hidden !important;
  }
}

/* Alturas fijas tablet/móvil */
@media (max-width: 950px) {
  .custom-player {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .play {
    width: 46px !important;
    height: 54px !important;
  }

  .time {
    grid-column: 1 / -1 !important;
    text-align: right !important;
  }

  .caption-box {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  .caption-text {
    font-size: clamp(1.2rem, 6.2vw, 2.55rem) !important;
    line-height: 1.12 !important;
    max-height: 7.84em !important;
    overflow: hidden !important;
  }

  .transcript-window {
    height: 198px !important;
    min-height: 198px !important;
    max-height: 198px !important;
    overflow: hidden !important;
    border-top: var(--line) !important;
    border-bottom: var(--line) !important;
  }

  .cue {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    display: none !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
  }

  .cue.visible-cue,
  .cue.active {
    display: grid !important;
  }

  .cue-text {
    font-size: .78rem !important;
    line-height: 1.22 !important;
    max-height: 3.66em !important;
    overflow: hidden !important;
  }
}

@media (max-width: 560px) {
  .caption-box {
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
  }

  .transcript-window {
    height: 186px !important;
    min-height: 186px !important;
    max-height: 186px !important;
  }

  .cue {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
  }
}

/* =========================================================
   VOCES — LAYOUT FINAL FIJO
   Player limpio + caption controlado + 3 transcripciones visibles
   ========================================================= */

@media (min-width: 951px) {
  .player-panel {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    padding: 24px !important;
    display: grid !important;
    grid-template-rows: minmax(110px, 20vh) 52px 260px 156px !important;
    gap: 16px !important;
  }

  .now {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .now h2 {
    font-size: clamp(3rem, 6.2vw, 7.2rem) !important;
    line-height: .78 !important;
    max-height: 2.35em !important;
    overflow: hidden !important;
  }

  .role {
    margin-top: 10px !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .custom-player {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    border: 0 !important;
    border-top: var(--line) !important;
    border-bottom: var(--line) !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 110px !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .play {
    width: 48px !important;
    height: 52px !important;
    min-width: 48px !important;
  }

  .caption-box {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    padding: 20px 28px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .caption-text {
    font-size: clamp(1.35rem, 2.45vw, 2.75rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.06em !important;
    max-height: 7.84em !important;
    overflow: hidden !important;
  }

  .transcript-window {
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
    overflow: hidden !important;
    border-top: var(--line) !important;
    border-bottom: var(--line) !important;
  }

  .cue {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    display: none !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
    padding: 8px 0 !important;
    overflow: hidden !important;
    border-bottom: var(--line) !important;
  }

  .cue.visible-cue,
  .cue.active {
    display: grid !important;
  }

  .cue-time {
    font-size: .7rem !important;
    line-height: 1.2 !important;
  }

  .cue-text {
    font-size: .78rem !important;
    line-height: 1.18 !important;
    max-height: 2.36em !important;
    overflow: hidden !important;
  }
}

/* Pantallas de portátil con menos altura */
@media (min-width: 951px) and (max-height: 820px) {
  .player-panel {
    grid-template-rows: minmax(90px, 18vh) 48px 220px 144px !important;
    gap: 14px !important;
  }

  .custom-player {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  .play {
    height: 48px !important;
  }

  .caption-box {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }

  .caption-text {
    font-size: clamp(1.2rem, 2.25vw, 2.45rem) !important;
  }

  .transcript-window {
    height: 144px !important;
    min-height: 144px !important;
    max-height: 144px !important;
  }

  .cue {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  .cue-text {
    font-size: .74rem !important;
  }
}

/* Móvil / tablet */
@media (max-width: 950px) {
  .custom-player {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .play {
    width: 44px !important;
    height: 52px !important;
  }

  .caption-box {
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  .caption-text {
    font-size: clamp(1.15rem, 5.8vw, 2.3rem) !important;
    line-height: 1.12 !important;
    max-height: 7.84em !important;
    overflow: hidden !important;
  }

  .transcript-window {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    overflow: hidden !important;
  }

  .cue {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    display: none !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 7px 0 !important;
    overflow: hidden !important;
  }

  .cue.visible-cue,
  .cue.active {
    display: grid !important;
  }

  .cue-text {
    font-size: .72rem !important;
    line-height: 1.18 !important;
    max-height: 2.36em !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   PLAYER MINIMAL FINAL
   ========================================================= */

.custom-player {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border: 0 !important;
  border-top: var(--line) !important;
  border-bottom: var(--line) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 108px !important;
  gap: 14px !important;
  align-items: center !important;
}

.play {
  width: 34px !important;
  height: 44px !important;
  min-width: 34px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
  cursor: pointer !important;
}

.play::before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 9px solid var(--fg) !important;
  transform: translateX(1px) !important;
}

.play.is-playing::before {
  width: 11px !important;
  height: 14px !important;
  border: 0 !important;
  background:
    linear-gradient(var(--fg), var(--fg)) left center / 3px 14px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right center / 3px 14px no-repeat !important;
  transform: none !important;
}

.play:hover::before {
  border-left-color: var(--red) !important;
}

.play.is-playing:hover::before {
  background:
    linear-gradient(var(--red), var(--red)) left center / 3px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) right center / 3px 14px no-repeat !important;
}

.timeline {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  accent-color: var(--red) !important;
}

.timeline::-webkit-slider-runnable-track {
  height: 2px !important;
  background: rgba(17,17,17,.32) !important;
}

.timeline::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  margin-top: -5px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  border: 0 !important;
}

.timeline::-moz-range-track {
  height: 2px !important;
  background: rgba(17,17,17,.32) !important;
}

.timeline::-moz-range-progress {
  height: 2px !important;
  background: var(--red) !important;
}

.timeline::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  border: 0 !important;
}

.time {
  text-align: right !important;
  white-space: nowrap !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  color: var(--muted) !important;
}

/* Ajuste del layout para compensar el player más bajo */
@media (min-width: 951px) {
  .player-panel {
    grid-template-rows: minmax(110px, 20vh) 44px 260px 156px !important;
  }
}

@media (min-width: 951px) and (max-height: 820px) {
  .player-panel {
    grid-template-rows: minmax(90px, 18vh) 44px 220px 144px !important;
  }

  .custom-player {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .play {
    height: 44px !important;
  }
}

@media (max-width: 950px) {
  .custom-player {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .play {
    width: 34px !important;
    height: 44px !important;
  }

  .time {
    grid-column: 1 / -1 !important;
    text-align: right !important;
    margin-top: -4px !important;
  }
}

/* =========================================================
   PERSONA — 3 LÍNEAS BAJO EL NOMBRE
   ========================================================= */

.person-lorem {
  margin-top: 14px;
  max-width: 860px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.28;
  letter-spacing: -.035em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reajuste para que nombre + rol + lorem no empujen el player */
@media (min-width: 951px) {
  .player-panel {
    grid-template-rows: minmax(170px, 24vh) 44px 260px 156px !important;
  }

  .now h2 {
    max-height: 1.65em !important;
  }

  .role {
    margin-top: 10px !important;
  }

  .person-lorem {
    height: 3.84em;
    max-height: 3.84em;
  }
}

@media (min-width: 951px) and (max-height: 820px) {
  .player-panel {
    grid-template-rows: minmax(150px, 22vh) 44px 220px 144px !important;
  }

  .person-lorem {
    font-size: .76rem;
    line-height: 1.22;
    height: 3.66em;
    max-height: 3.66em;
  }
}

@media (max-width: 950px) {
  .person-lorem {
    margin-top: 12px;
    font-size: .76rem;
    line-height: 1.25;
  }
}

/* =========================================================
   BIO + CAPTION MÁS SOBRIA + PLAYER MÁS BONITO
   ========================================================= */

/* Cambiamos lorem por bio */
.person-lorem {
  display: none !important;
}

.person-bio {
  margin-top: 16px !important;
  max-width: 980px !important;
  color: var(--fg) !important;
  font-size: clamp(.95rem, 1.15vw, 1.2rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -.04em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Caption-box: letra más pequeña y más elegante */
.caption-box {
  padding: 22px 30px !important;
}

.caption-text {
  font-size: clamp(1.15rem, 2.08vw, 2.35rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.055em !important;
  max-height: 8.12em !important;
  overflow: hidden !important;
}

/* Player: más fino, más horizontal, menos pesado */
.custom-player {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border: 0 !important;
  border-top: var(--line) !important;
  border-bottom: var(--line) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 104px !important;
  gap: 18px !important;
  align-items: center !important;
}

.play {
  width: 28px !important;
  height: 42px !important;
  min-width: 28px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
  cursor: pointer !important;
}

.play::before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 8px solid var(--fg) !important;
  transform: translateX(1px) !important;
}

.play.is-playing::before {
  width: 10px !important;
  height: 13px !important;
  border: 0 !important;
  background:
    linear-gradient(var(--fg), var(--fg)) left center / 3px 13px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right center / 3px 13px no-repeat !important;
  transform: none !important;
}

.play:hover::before {
  border-left-color: var(--red) !important;
}

.play.is-playing:hover::before {
  background:
    linear-gradient(var(--red), var(--red)) left center / 3px 13px no-repeat,
    linear-gradient(var(--red), var(--red)) right center / 3px 13px no-repeat !important;
}

.timeline {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  accent-color: var(--red) !important;
}

.timeline::-webkit-slider-runnable-track {
  height: 1px !important;
  background: rgba(17,17,17,.34) !important;
}

.timeline::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 11px !important;
  height: 11px !important;
  margin-top: -5px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  border: 0 !important;
}

.timeline::-moz-range-track {
  height: 1px !important;
  background: rgba(17,17,17,.34) !important;
}

.timeline::-moz-range-progress {
  height: 1px !important;
  background: var(--red) !important;
}

.timeline::-moz-range-thumb {
  width: 11px !important;
  height: 11px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  border: 0 !important;
}

.time {
  font-size: .66rem !important;
  color: var(--muted) !important;
  text-align: right !important;
  white-space: nowrap !important;
  letter-spacing: -.035em !important;
}

/* Reparto vertical estable con bio */
@media (min-width: 951px) {
  .player-panel {
    grid-template-rows: minmax(170px, 24vh) 42px 240px 156px !important;
    gap: 16px !important;
  }

  .caption-box {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
  }

  .now h2 {
    max-height: 1.55em !important;
  }

  .person-bio {
    height: 3.75em !important;
    max-height: 3.75em !important;
  }
}

@media (min-width: 951px) and (max-height: 820px) {
  .player-panel {
    grid-template-rows: minmax(145px, 21vh) 42px 210px 144px !important;
    gap: 14px !important;
  }

  .caption-box {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }

  .caption-text {
    font-size: clamp(1.05rem, 1.9vw, 2.1rem) !important;
  }

  .person-bio {
    font-size: .92rem !important;
    line-height: 1.2 !important;
    height: 3.6em !important;
    max-height: 3.6em !important;
  }
}

@media (max-width: 950px) {
  .person-bio {
    margin-top: 12px !important;
    font-size: clamp(.9rem, 3.3vw, 1.15rem) !important;
    line-height: 1.25 !important;
  }

  .custom-player {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .play {
    width: 28px !important;
    height: 42px !important;
  }

  .caption-box {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }

  .caption-text {
    font-size: clamp(1.05rem, 5.2vw, 2rem) !important;
  }
}

/* =========================================================
   PLAYER LIMPIO — OVERRIDE FINAL
   ========================================================= */

.custom-player {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  border: 0 !important;
  border-top: var(--line) !important;
  border-bottom: var(--line) !important;
  padding: 0 2px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 110px !important;
  gap: 22px !important;
  align-items: center !important;
  background: transparent !important;
}

.play {
  width: 24px !important;
  height: 50px !important;
  min-width: 24px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
  cursor: pointer !important;
}

.play:focus,
.play:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.play::before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 9px solid var(--fg) !important;
  transform: translateX(1px) !important;
}

.play.is-playing::before {
  width: 10px !important;
  height: 14px !important;
  border: 0 !important;
  background:
    linear-gradient(var(--fg), var(--fg)) left center / 3px 14px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right center / 3px 14px no-repeat !important;
  transform: none !important;
}

.play:hover::before {
  border-left-color: var(--red) !important;
}

.play.is-playing:hover::before {
  background:
    linear-gradient(var(--red), var(--red)) left center / 3px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) right center / 3px 14px no-repeat !important;
}

/* Range limpio */
.timeline {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  accent-color: var(--red) !important;
}

.timeline:focus,
.timeline:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.timeline::-webkit-slider-runnable-track {
  height: 2px !important;
  background: linear-gradient(
    to right,
    var(--red) 0%,
    var(--red) var(--progress, 0%),
    rgba(17,17,17,.28) var(--progress, 0%),
    rgba(17,17,17,.28) 100%
  ) !important;
}

.timeline::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 13px !important;
  height: 13px !important;
  margin-top: -5.5px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  border: 0 !important;
}

.timeline::-moz-range-track {
  height: 2px !important;
  background: rgba(17,17,17,.28) !important;
}

.timeline::-moz-range-progress {
  height: 2px !important;
  background: var(--red) !important;
}

.timeline::-moz-range-thumb {
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  border: 0 !important;
}

.time {
  text-align: right !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

/* Reajuste de la retícula con player a 50px */
@media (min-width: 951px) {
  .player-panel {
    grid-template-rows: minmax(170px, 24vh) 50px 240px 156px !important;
  }
}

@media (min-width: 951px) and (max-height: 820px) {
  .player-panel {
    grid-template-rows: minmax(145px, 21vh) 50px 210px 144px !important;
  }
}

@media (max-width: 950px) {
  .custom-player {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .play {
    width: 24px !important;
    height: 50px !important;
  }

  .time {
    grid-column: 1 / -1 !important;
    text-align: right !important;
    margin-top: -6px !important;
  }
}

/* =========================================================
   CORRECCIÓN PLAYER — LÍNEA COMPLETA Y LIMPIA
   ========================================================= */

.custom-player {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  border: 0 !important;
  border-top: var(--line) !important;
  border-bottom: var(--line) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) 104px !important;
  gap: 20px !important;
  align-items: center !important;
  background: transparent !important;
}

.play {
  width: 26px !important;
  height: 46px !important;
  min-width: 26px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  color: transparent !important;
}

.play:focus,
.play:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.play::before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 8px solid var(--fg) !important;
  transform: translateX(1px) !important;
}

.play.is-playing::before {
  width: 10px !important;
  height: 13px !important;
  border: 0 !important;
  background:
    linear-gradient(var(--fg), var(--fg)) left center / 3px 13px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right center / 3px 13px no-repeat !important;
  transform: none !important;
}

.timeline {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  outline: 0 !important;
  background:
    linear-gradient(
      to right,
      var(--red) 0%,
      var(--red) var(--progress, 0%),
      rgba(17,17,17,.32) var(--progress, 0%),
      rgba(17,17,17,.32) 100%
    ) center / 100% 2px no-repeat !important;
}

.timeline:focus,
.timeline:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.timeline::-webkit-slider-runnable-track {
  height: 18px !important;
  background: transparent !important;
  border: 0 !important;
}

.timeline::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  margin-top: 3px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  border: 0 !important;
}

.timeline::-moz-range-track {
  height: 18px !important;
  background: transparent !important;
  border: 0 !important;
}

.timeline::-moz-range-progress {
  height: 18px !important;
  background: transparent !important;
}

.timeline::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  border: 0 !important;
}

.time {
  text-align: right !important;
  white-space: nowrap !important;
  font-size: .66rem !important;
  line-height: 1 !important;
  color: var(--muted) !important;
}

/* Mantener retícula estable */
@media (min-width: 951px) {
  .player-panel {
    grid-template-rows: minmax(170px, 24vh) 46px 240px 156px !important;
  }
}

@media (min-width: 951px) and (max-height: 820px) {
  .player-panel {
    grid-template-rows: minmax(145px, 21vh) 46px 210px 144px !important;
  }
}

@media (max-width: 950px) {
  .custom-player {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .play {
    width: 26px !important;
    height: 46px !important;
  }

  .time {
    grid-column: 1 / -1 !important;
    text-align: right !important;
    margin-top: -6px !important;
  }
}

/* =========================================================
   CORRECCIÓN NOMBRE + BIO + PLAYER MÁS ABAJO
   ========================================================= */

/* Oculta cualquier lorem viejo */
.person-lorem {
  display: none !important;
}

/* CABECERA DERECHA: más espacio y sin cortar el nombre */
.now {
  min-height: 0 !important;
  overflow: visible !important;
}

.now h2 {
  margin: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  font-size: clamp(2.4rem, 5.4vw, 6.2rem) !important;
  line-height: .86 !important;
  letter-spacing: -.08em !important;
}

/* Rol */
.role {
  margin-top: 12px !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  color: var(--muted) !important;
  font-size: .82rem !important;
  line-height: 1.25 !important;
}

/* BIO de 3 líneas */
.person-bio {
  margin-top: 14px !important;
  max-width: 860px !important;
  color: var(--muted) !important;
  font-size: clamp(.92rem, 1.05vw, 1.08rem) !important;
  line-height: 1.28 !important;
  letter-spacing: -.035em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* PLAYER: más equilibrado y visualmente más abajo */
.custom-player {
  margin-top: 4px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border: 0 !important;
  border-top: var(--line) !important;
  border-bottom: var(--line) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 108px !important;
  gap: 18px !important;
  align-items: center !important;
  background: transparent !important;
}

.play {
  width: 28px !important;
  height: 48px !important;
  min-width: 28px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
}

.play:focus,
.play:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.play::before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 8px solid var(--fg) !important;
  transform: translateX(1px) !important;
}

.play.is-playing::before {
  width: 10px !important;
  height: 13px !important;
  border: 0 !important;
  background:
    linear-gradient(var(--fg), var(--fg)) left center / 3px 13px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right center / 3px 13px no-repeat !important;
  transform: none !important;
}

.timeline {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  background:
    linear-gradient(
      to right,
      var(--red) 0%,
      var(--red) var(--progress, 0%),
      rgba(17,17,17,.28) var(--progress, 0%),
      rgba(17,17,17,.28) 100%
    ) center / 100% 2px no-repeat !important;
}

.timeline::-webkit-slider-runnable-track {
  height: 18px !important;
  background: transparent !important;
  border: 0 !important;
}

.timeline::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 13px !important;
  height: 13px !important;
  margin-top: 3px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  border: 0 !important;
}

.timeline::-moz-range-track {
  height: 18px !important;
  background: transparent !important;
  border: 0 !important;
}

.timeline::-moz-range-progress {
  height: 18px !important;
  background: transparent !important;
}

.timeline::-moz-range-thumb {
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  border: 0 !important;
}

.time {
  text-align: right !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
  font-size: .68rem !important;
  line-height: 1 !important;
}

/* Escritorio */
@media (min-width: 951px) {
  .player-panel {
    height: 100vh !important;
    overflow: hidden !important;
    padding: 24px !important;
    display: grid !important;
    grid-template-rows: minmax(220px, auto) 48px 240px 156px !important;
    gap: 18px !important;
  }

  .caption-box {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
  }
}

/* Portátil bajo */
@media (min-width: 951px) and (max-height: 820px) {
  .player-panel {
    grid-template-rows: minmax(190px, auto) 48px 210px 144px !important;
    gap: 16px !important;
  }

  .now h2 {
    font-size: clamp(2.1rem, 4.8vw, 5.2rem) !important;
  }

  .person-bio {
    font-size: .92rem !important;
  }

  .caption-box {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }
}

/* Tablet / móvil */
@media (max-width: 950px) {
  .now h2 {
    font-size: clamp(2rem, 11vw, 4.5rem) !important;
    line-height: .9 !important;
  }

  .role {
    font-size: .76rem !important;
  }

  .person-bio {
    font-size: .84rem !important;
    line-height: 1.25 !important;
  }

  .custom-player {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .play {
    width: 28px !important;
    height: 48px !important;
  }

  .time {
    grid-column: 1 / -1 !important;
    text-align: right !important;
    margin-top: -5px !important;
  }

  .player-panel {
    gap: 16px !important;
  }
}

/* =========================================================
   CAPTION-BOX SIN MARCO
   ========================================================= */

.caption-box {
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =========================================================
   FIX PLAYER: play / pause alineado con la línea de tiempo
   ========================================================= */

.player,
.audio-player,
.player-row,
.player-shell,
.player-bar {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 16px !important;
}

.player > *,
.audio-player > *,
.player-row > *,
.player-shell > *,
.player-bar > * {
  align-self: center !important;
}

.player button,
.audio-player button,
.player .play-btn,
.audio-player .play-btn,
.player .play-toggle,
.audio-player .play-toggle,
.player .play-button,
.audio-player .play-button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.player .progress-wrap,
.audio-player .progress-wrap,
.player .timeline-wrap,
.audio-player .timeline-wrap,
.player .seek-wrap,
.audio-player .seek-wrap,
.player .scrubber-wrap,
.audio-player .scrubber-wrap {
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
  margin: 0 !important;
}

.player input[type="range"],
.audio-player input[type="range"],
.player .progress,
.audio-player .progress,
.player .seekbar,
.audio-player .seekbar,
.player .timeline,
.audio-player .timeline {
  width: 100% !important;
  margin: 0 !important;
  align-self: center !important;
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.player .time,
.audio-player .time,
.player .time-display,
.audio-player .time-display {
  align-self: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Si el icono es texto (▶ o II), que quede bien centrado */
.player button span,
.audio-player button span,
.player .play-btn span,
.audio-player .play-btn span {
  display: block !important;
  line-height: 1 !important;
  transform: translateY(0) !important;
}

/* PLAYER — ALINEACIÓN DEFINITIVA ICONO / LÍNEA */

.custom-player {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border: 0 !important;
  border-top: var(--line) !important;
  border-bottom: var(--line) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 108px !important;
  column-gap: 18px !important;
  align-items: center !important;
  background: transparent !important;
}

.play {
  position: relative !important;
  width: 32px !important;
  height: 48px !important;
  min-width: 32px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: block !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
}

.play:focus,
.play:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.play::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 9px solid var(--fg) !important;
  transform: translate(-42%, -50%) !important;
}

.play.is-playing::before {
  width: 11px !important;
  height: 15px !important;
  border: 0 !important;
  background:
    linear-gradient(var(--fg), var(--fg)) left center / 3px 15px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right center / 3px 15px no-repeat !important;
  transform: translate(-50%, -50%) !important;
}

.timeline {
  appearance: none !important;
  -webkit-appearance: none !important;
  align-self: center !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  outline: 0 !important;
  cursor: pointer !important;
  background:
    linear-gradient(
      to right,
      var(--red) 0%,
      var(--red) var(--progress, 0%),
      rgba(17,17,17,.32) var(--progress, 0%),
      rgba(17,17,17,.32) 100%
    ) center / 100% 2px no-repeat !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
}

.timeline:focus,
.timeline:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.timeline::-webkit-slider-runnable-track {
  height: 48px !important;
  background: transparent !important;
  border: 0 !important;
}

.timeline::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 13px !important;
  height: 13px !important;
  margin-top: 17.5px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  border: 0 !important;
}

.timeline::-moz-range-track {
  height: 48px !important;
  background: transparent !important;
  border: 0 !important;
}

.timeline::-moz-range-progress {
  height: 48px !important;
  background: transparent !important;
  border: 0 !important;
}

.timeline::-moz-range-thumb {
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  border: 0 !important;
}

.time {
  align-self: center !important;
  text-align: right !important;
  white-space: nowrap !important;
  margin: 0 !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  color: var(--muted) !important;
}

/* Mantener el alto del player en la retícula */
@media (min-width: 951px) {
  .player-panel {
    grid-template-rows: minmax(220px, auto) 48px 240px 156px !important;
  }
}

@media (min-width: 951px) and (max-height: 820px) {
  .player-panel {
    grid-template-rows: minmax(190px, auto) 48px 210px 144px !important;
  }
}


/* =========================================================
   DIÁLOGOS / VÍDEOS — ESTILO COPIADO DE VOCES
   ========================================================= */

body.dialogos-page,
body.video-page,
body[data-page="dialogos"] {
  background: #111;
  color: #f2f0e8;
}

/* Sidebar igual, pero adaptado a oscuro */
body.dialogos-page .sidebar,
body.video-page .sidebar,
body[data-page="dialogos"] .sidebar {
  background: #111;
  color: #f2f0e8;
  border-color: rgba(242,240,232,.28);
}

body.dialogos-page .sidebar a,
body.video-page .sidebar a,
body[data-page="dialogos"] .sidebar a {
  color: #f2f0e8;
}

body.dialogos-page .sidebar a:hover,
body.video-page .sidebar a:hover,
body[data-page="dialogos"] .sidebar a:hover {
  color: var(--red);
}

/* Main de diálogos: misma lógica que voces */
body.dialogos-page main,
body.video-page main,
body[data-page="dialogos"] main {
  background: #111;
  color: #f2f0e8;
}

/* Retícula principal para vídeos */
.dialogos-layout,
.video-layout {
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(260px, 32vw) minmax(0, 1fr);
  overflow: hidden;
}

/* Columna izquierda: lista de vídeos */
.dialogos-list,
.video-list {
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(242,240,232,.28);
  padding: 24px;
  scrollbar-width: thin;
}

.dialogos-list::-webkit-scrollbar,
.video-list::-webkit-scrollbar {
  width: 6px;
}

.dialogos-list::-webkit-scrollbar-thumb,
.video-list::-webkit-scrollbar-thumb {
  background: rgba(242,240,232,.22);
}

/* Títulos / entradas de la lista */
.dialogo-item,
.video-item {
  width: 100%;
  display: block;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(242,240,232,.28);
  background: transparent;
  color: #f2f0e8;
  padding: 18px 0;
  cursor: pointer;
  font-family: inherit;
}

.dialogo-item strong,
.video-item strong {
  display: block;
  font-size: clamp(1.7rem, 3.2vw, 4rem);
  line-height: .86;
  letter-spacing: -.08em;
  font-weight: 700;
}

.dialogo-item span,
.video-item span {
  display: block;
  margin-top: 10px;
  color: rgba(242,240,232,.62);
  font-size: .78rem;
  line-height: 1.25;
}

.dialogo-item:hover strong,
.video-item:hover strong,
.dialogo-item.active strong,
.video-item.active strong {
  color: var(--red);
}

/* Panel derecho: vídeo seleccionado */
.dialogos-panel,
.video-panel {
  height: 100vh;
  overflow: hidden;
  padding: 24px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
}

/* Cabecera derecha */
.dialogos-now,
.video-now {
  min-height: 0;
  overflow: visible;
}

.dialogos-now h2,
.video-now h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5.4vw, 6.2rem);
  line-height: .86;
  letter-spacing: -.08em;
  font-weight: 700;
  color: #f2f0e8;
}

.dialogos-role,
.video-role {
  margin-top: 12px;
  color: rgba(242,240,232,.62);
  font-size: .82rem;
  line-height: 1.25;
}

/* Bio / texto corto */
.dialogos-bio,
.video-bio {
  margin-top: 14px;
  max-width: 860px;
  color: rgba(242,240,232,.68);
  font-size: clamp(.92rem, 1.05vw, 1.08rem);
  line-height: 1.28;
  letter-spacing: -.035em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Caja del vídeo */
.video-box,
.dialogos-video-box {
  width: 100%;
  min-height: 0;
  border-top: 1px solid rgba(242,240,232,.28);
  border-bottom: 1px solid rgba(242,240,232,.28);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Vídeo */
.video-box video,
.dialogos-video-box video,
.dialogos-panel video,
.video-panel video {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Texto inferior / caption de vídeo */
.dialogos-caption,
.video-caption {
  min-height: 126px;
  border-top: 1px solid rgba(242,240,232,.28);
  color: rgba(242,240,232,.82);
  font-size: clamp(1.1rem, 2vw, 2rem);
  line-height: 1.16;
  letter-spacing: -.055em;
  padding-top: 18px;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 950px) {
  .dialogos-layout,
  .video-layout {
    height: auto;
    min-height: 100svh;
    display: block;
    overflow: visible;
  }

  .dialogos-list,
  .video-list {
    height: auto;
    max-height: 42svh;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(242,240,232,.28);
    padding: 18px;
  }

  .dialogos-panel,
  .video-panel {
    height: auto;
    min-height: 58svh;
    overflow: visible;
    padding: 18px;
    display: grid;
    grid-template-rows: auto 54svh auto;
  }

  .dialogos-now h2,
  .video-now h2 {
    font-size: clamp(2rem, 11vw, 4.5rem);
    line-height: .9;
  }

  .dialogos-bio,
  .video-bio {
    font-size: .84rem;
    line-height: 1.25;
  }

  .dialogos-caption,
  .video-caption {
    min-height: 110px;
    font-size: clamp(1rem, 5vw, 1.8rem);
  }
}


/* =========================================================
   DIÁLOGOS — 3 COLUMNAS / VIDEO CORAL
   ========================================================= */

.page-dialogos {
  --bg: #101010;
  --fg: #f3f0e9;
  --muted: rgba(243,240,233,.58);
  --line-color: rgba(243,240,233,.28);
  background: var(--bg);
  color: var(--fg);
}

.page-dialogos .sidebar {
  background: var(--bg);
  color: var(--fg);
  border-right: var(--line);
}

.page-dialogos .nav a,
.page-dialogos .brand {
  color: var(--fg);
}

.page-dialogos .nav a.active {
  color: var(--red);
}

@media (min-width: 951px) {
  .dialogos-main {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
  }

  .dialogos-themes {
    height: 100vh;
    overflow-y: auto;
    border-right: var(--line);
    padding: 24px;
  }

  .dialogos-video-panel {
    height: 100vh;
    overflow: hidden;
    padding: 24px;
    display: grid;
    grid-template-rows: minmax(220px, auto) minmax(0, 1fr) 132px;
    gap: 18px;
  }
}

.dialogos-themes h1 {
  margin: 0 0 28px;
  font-size: clamp(2.5rem, 5vw, 5.8rem);
  line-height: .82;
  letter-spacing: -.085em;
}

.dialogos-items {
  display: grid;
}

.dialogos-item {
  appearance: none;
  background: transparent;
  color: inherit;
  border: 0;
  border-top: var(--line);
  text-align: left;
  padding: 16px 0;
  cursor: pointer;
}

.dialogos-item:last-child {
  border-bottom: var(--line);
}

.dialogos-item strong {
  display: block;
  font-size: .98rem;
  line-height: 1.05;
}

.dialogos-item span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
}

.dialogos-item.active strong,
.dialogos-item:hover strong {
  color: var(--red);
}

.dialogos-now {
  min-height: 0;
  overflow: visible;
}

.dialogos-now h2 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(2.4rem, 5.4vw, 6.2rem);
  line-height: .86;
  letter-spacing: -.08em;
  font-weight: 700;
  overflow-wrap: break-word;
}

.dialogos-role {
  margin-top: 12px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.25;
}

.dialogos-bio {
  margin-top: 14px;
  max-width: 860px;
  color: var(--muted);
  font-size: clamp(.92rem, 1.05vw, 1.08rem);
  line-height: 1.28;
  letter-spacing: -.035em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dialogos-video-shell {
  min-height: 0;
  width: 100%;
  border-top: var(--line);
  border-bottom: var(--line);
  background: #000;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.dialogos-video-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: none;
  background: #000;
}

.dialogos-video-shell iframe.is-visible {
  display: block;
}

.dialogos-video-placeholder {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(243,240,233,.7);
  padding: 24px;
}

.dialogos-video-placeholder.is-hidden {
  display: none;
}

.dialogos-video-placeholder span {
  display: block;
  font-size: clamp(2.4rem, 5vw, 5.8rem);
  line-height: .86;
  letter-spacing: -.08em;
}

.dialogos-video-placeholder small {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.dialogos-video-info {
  border-top: var(--line);
  overflow: hidden;
  padding-top: 16px;
}

.dialogos-video-info p {
  margin: 0;
  max-width: 900px;
  color: var(--fg);
  font-size: clamp(1.05rem, 1.9vw, 2rem);
  line-height: 1.16;
  letter-spacing: -.055em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 950px) {
  .dialogos-main {
    display: block;
    min-height: 100svh;
  }

  .dialogos-themes {
    height: auto;
    max-height: 38svh;
    overflow-y: auto;
    border-bottom: var(--line);
    padding: 16px;
  }

  .dialogos-themes h1 {
    font-size: clamp(2rem, 10vw, 4.2rem);
    margin-bottom: 16px;
  }

  .dialogos-item {
    padding: 10px 0;
  }

  .dialogos-video-panel {
    height: auto;
    min-height: 62svh;
    overflow: visible;
    padding: 16px;
    display: grid;
    grid-template-rows: auto 42svh auto;
    gap: 16px;
  }

  .dialogos-now h2 {
    font-size: clamp(2rem, 11vw, 4.5rem);
    line-height: .9;
  }

  .dialogos-role {
    font-size: .76rem;
  }

  .dialogos-bio {
    font-size: .84rem;
    line-height: 1.25;
  }

  .dialogos-video-placeholder {
    min-height: 260px;
  }

  .dialogos-video-info p {
    font-size: clamp(1rem, 5vw, 1.8rem);
  }
}


/* DIÁLOGOS — LÍNEAS ENTRE COLUMNAS */

@media (min-width: 951px) {
  .page-dialogos .site {
    grid-template-columns: var(--sidebar) minmax(0, 1fr) !important;
  }

  .page-dialogos .sidebar {
    border-right: var(--line) !important;
  }

  .page-dialogos .dialogos-main {
    display: grid !important;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  .page-dialogos .dialogos-themes {
    border-right: var(--line) !important;
    height: 100vh !important;
    overflow-y: auto !important;
  }

  .page-dialogos .dialogos-video-panel {
    border-left: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
}

@media (max-width: 950px) {
  .page-dialogos .sidebar {
    border-right: 0 !important;
    border-bottom: var(--line) !important;
  }

  .page-dialogos .dialogos-themes {
    border-right: 0 !important;
    border-bottom: var(--line) !important;
  }
}


/* DIÁLOGOS — LÍNEAS VERTICALES FORZADAS ENTRE COLUMNAS */

@media (min-width: 951px) {
  body.page-dialogos {
    --dialogos-line: rgba(243,240,233,.32);
  }

  body.page-dialogos .site {
    display: grid !important;
    grid-template-columns: var(--sidebar, 180px) minmax(0, 1fr) !important;
    gap: 0 !important;
    column-gap: 0 !important;
  }

  body.page-dialogos .sidebar {
    height: 100vh !important;
    border-right: 0 !important;
    box-shadow: inset -1px 0 0 var(--dialogos-line) !important;
  }

  body.page-dialogos .dialogos-main {
    display: grid !important;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
    height: 100vh !important;
    overflow: hidden !important;
    gap: 0 !important;
    column-gap: 0 !important;
  }

  body.page-dialogos .dialogos-themes {
    height: 100vh !important;
    overflow-y: auto !important;
    border-right: 0 !important;
    box-shadow: inset -1px 0 0 var(--dialogos-line) !important;
  }

  body.page-dialogos .dialogos-video-panel {
    height: 100vh !important;
    overflow: hidden !important;
    border-left: 0 !important;
  }
}

@media (max-width: 950px) {
  body.page-dialogos .sidebar,
  body.page-dialogos .dialogos-themes {
    box-shadow: inset 0 -1px 0 rgba(243,240,233,.32) !important;
    border-right: 0 !important;
  }
}


/* DIÁLOGOS — LÍNEAS HORIZONTALES EN SIDEBAR Y COLUMNAS */

body.page-dialogos {
  --dialogos-line: rgba(243,240,233,.32);
}

/* SIDEBAR: líneas horizontales */
body.page-dialogos .sidebar {
  box-shadow: inset -1px 0 0 var(--dialogos-line) !important;
}

body.page-dialogos .brand {
  display: block !important;
  padding-bottom: 22px !important;
  border-bottom: 1px solid var(--dialogos-line) !important;
}

body.page-dialogos .nav {
  margin-top: 28px !important;
  border-top: 1px solid var(--dialogos-line) !important;
}

body.page-dialogos .nav a {
  display: block !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid var(--dialogos-line) !important;
}

/* Nota inferior del sidebar */
body.page-dialogos .side-note {
  border-top: 1px solid var(--dialogos-line) !important;
  padding-top: 14px !important;
}

/* COLUMNA 2: temas */
body.page-dialogos .dialogos-themes {
  box-shadow: inset -1px 0 0 var(--dialogos-line) !important;
}

body.page-dialogos .dialogos-themes .eyebrow {
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--dialogos-line) !important;
  margin-bottom: 22px !important;
}

body.page-dialogos .dialogos-themes h1 {
  padding-bottom: 22px !important;
  border-bottom: 1px solid var(--dialogos-line) !important;
  margin-bottom: 0 !important;
}

body.page-dialogos .dialogos-items {
  border-top: 0 !important;
}

body.page-dialogos .dialogos-item {
  border-top: 0 !important;
  border-bottom: 1px solid var(--dialogos-line) !important;
}

/* COLUMNA 3: vídeo */
body.page-dialogos .dialogos-now {
  padding-bottom: 22px !important;
  border-bottom: 1px solid var(--dialogos-line) !important;
}

body.page-dialogos .dialogos-video-shell {
  border-top: 1px solid var(--dialogos-line) !important;
  border-bottom: 1px solid var(--dialogos-line) !important;
}

body.page-dialogos .dialogos-video-info {
  border-top: 1px solid var(--dialogos-line) !important;
  padding-top: 18px !important;
}

/* Responsive: horizontales en móvil */
@media (max-width: 950px) {
  body.page-dialogos .sidebar {
    box-shadow: inset 0 -1px 0 var(--dialogos-line) !important;
  }

  body.page-dialogos .dialogos-themes {
    box-shadow: inset 0 -1px 0 var(--dialogos-line) !important;
  }
}


/* DIÁLOGOS — LIMPIAR LÍNEAS HORIZONTALES EXTRA */

/* Quitar línea bajo el logo del sidebar */
body.page-dialogos .brand {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Quitar línea superior/inferior extra del menú */
body.page-dialogos .nav {
  border-top: 0 !important;
}

/* Quitar líneas entre enlaces del sidebar */
body.page-dialogos .nav a {
  border-bottom: 0 !important;
}

/* Quitar línea sobre la nota inferior del sidebar */
body.page-dialogos .side-note {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Quitar línea bajo VÍDEO CORAL / ENTREVISTAS */
body.page-dialogos .dialogos-themes .eyebrow {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Quitar línea bajo el título Diálogos */
body.page-dialogos .dialogos-themes h1 {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Mantener solo las líneas de separación entre items, como en Voces */
body.page-dialogos .dialogos-item {
  border-top: 0 !important;
  border-bottom: 1px solid var(--dialogos-line) !important;
}

/* Mantener líneas estructurales de la columna de vídeo */
body.page-dialogos .dialogos-now {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.page-dialogos .dialogos-video-shell {
  border-top: 1px solid var(--dialogos-line) !important;
  border-bottom: 1px solid var(--dialogos-line) !important;
}

body.page-dialogos .dialogos-video-info {
  border-top: 0 !important;
}


/* =========================================================
   DIÁLOGOS — SIDEBAR IGUAL QUE VOCES, SOLO EN OSCURO
   ========================================================= */

/* La página de vídeos es oscura */
body.page-dialogos {
  --bg: #101010 !important;
  --fg: #f3f0e9 !important;
  --muted: rgba(243,240,233,.58) !important;
  --line-color: rgba(243,240,233,.28) !important;
  --line: 1px solid var(--line-color) !important;
  background: var(--bg) !important;
  color: var(--fg) !important;
}

/* Sidebar: MISMA estructura que Voces */
body.page-dialogos .sidebar {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border-right: var(--line) !important;
  box-shadow: none !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Logo: sin líneas extra, igual que Voces */
body.page-dialogos .brand {
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Nav: igual que Voces */
body.page-dialogos .nav {
  margin-top: 48px !important;
  border: 0 !important;
}

body.page-dialogos .nav a {
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
  border-top: var(--line) !important;
  border-bottom: 0 !important;
  padding: 12px 0 !important;
  font-size: .9rem !important;
}

body.page-dialogos .nav a:last-child {
  border-bottom: var(--line) !important;
}

body.page-dialogos .nav a.active {
  color: var(--red) !important;
  font-weight: 700 !important;
}

/* Nota inferior: igual que Voces */
body.page-dialogos .side-note {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: .75rem !important;
  line-height: 1.35 !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Mantener solo la separación vertical entre sidebar y contenido */
@media (min-width: 951px) {
  body.page-dialogos .site {
    display: grid !important;
    grid-template-columns: var(--sidebar) minmax(0, 1fr) !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  body.page-dialogos .sidebar {
    height: 100vh !important;
    border-right: var(--line) !important;
  }

  body.page-dialogos .dialogos-themes {
    border-right: var(--line) !important;
    box-shadow: none !important;
  }
}

/* Responsive: mismo comportamiento que Voces */
@media (max-width: 950px) {
  body.page-dialogos .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    border-right: 0 !important;
    border-bottom: var(--line) !important;
    padding: 14px 16px !important;
    display: block !important;
    box-shadow: none !important;
  }

  body.page-dialogos .sidebar-inner {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: end !important;
    gap: 16px !important;
  }

  body.page-dialogos .brand {
    font-size: 1rem !important;
  }

  body.page-dialogos .nav {
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  body.page-dialogos .nav a {
    border: 0 !important;
    padding: 0 !important;
    font-size: .78rem !important;
  }

  body.page-dialogos .nav a:last-child {
    border-bottom: 0 !important;
  }

  body.page-dialogos .side-note {
    display: none !important;
  }
}


/* =========================================================
   MOBILE FINAL — HEADER COMÚN + LISTA PRIMERO + PLAYER EN LÍNEA
   ========================================================= */

@media (max-width: 950px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .site {
    display: block !important;
    width: 100% !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  /* Header móvil común: usar el modelo de Vídeos */
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 24px !important;
    border-right: 0 !important;
    border-bottom: var(--line) !important;
    display: block !important;
  }

  .sidebar-inner {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .brand {
    flex: 0 0 auto !important;
    font-size: 1.28rem !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .nav {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: baseline !important;
    gap: 18px !important;
    flex-wrap: nowrap !important;
  }

  .nav a {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: .95rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .nav a:last-child {
    border: 0 !important;
  }

  .side-note {
    display: none !important;
  }

  /* Evitar saltos raros en las páginas claras */
  .page-main,
  main {
    min-height: auto !important;
    overflow: visible !important;
  }

  /* VOCES: al entrar, solo lista */
  body:not(.voices-detail-open) .voices-main .player-panel,
  body:not(.voices-detail-open) [data-voices-app] .player-panel {
    display: none !important;
  }

  body:not(.voices-detail-open) .voices-main,
  body:not(.voices-detail-open) [data-voices-app] {
    display: block !important;
    min-height: auto !important;
  }

  body:not(.voices-detail-open) .episodes-panel,
  body:not(.voices-detail-open) .voices-list,
  body:not(.voices-detail-open) [data-episodes] {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Cuando se abre una voz, quitar scroll interno y dejar documento normal */
  body.voices-detail-open .voices-main,
  body.voices-detail-open [data-voices-app] {
    display: block !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body.voices-detail-open .episodes-panel,
  body.voices-detail-open .voices-list {
    display: none !important;
  }

  body.voices-detail-open .player-panel {
    display: grid !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 24px !important;
    gap: 18px !important;
  }

  /* DIÁLOGOS / VÍDEOS: al entrar, solo lista */
  body.page-dialogos:not(.dialogos-detail-open) .dialogos-video-panel {
    display: none !important;
  }

  body.page-dialogos:not(.dialogos-detail-open) .dialogos-main {
    display: block !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body.page-dialogos:not(.dialogos-detail-open) .dialogos-themes {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    border-bottom: 0 !important;
  }

  body.page-dialogos.dialogos-detail-open .dialogos-themes {
    display: none !important;
  }

  body.page-dialogos.dialogos-detail-open .dialogos-video-panel {
    display: grid !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 24px !important;
    grid-template-rows: auto 42svh auto !important;
    gap: 18px !important;
  }

  /* Player móvil en una sola línea */
  .custom-player {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    column-gap: 16px !important;
    align-items: center !important;
    padding: 0 !important;
    border-top: var(--line) !important;
    border-bottom: var(--line) !important;
  }

  .play {
    width: 32px !important;
    height: 52px !important;
    min-width: 32px !important;
    min-height: 52px !important;
    align-self: center !important;
  }

  .timeline {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    align-self: center !important;
  }

  .timeline::-webkit-slider-runnable-track {
    height: 52px !important;
    background: transparent !important;
  }

  .timeline::-webkit-slider-thumb {
    width: 13px !important;
    height: 13px !important;
    margin-top: 19.5px !important;
  }

  .time {
    grid-column: auto !important;
    align-self: center !important;
    margin: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: .72rem !important;
    line-height: 1 !important;
  }

  /* Cajón y transcripción más contenidos en móvil */
  .caption-box {
    height: auto !important;
    min-height: 210px !important;
    max-height: none !important;
    padding: 24px 0 !important;
    overflow: visible !important;
  }

  .caption-text {
    font-size: clamp(1.35rem, 7vw, 2.4rem) !important;
    line-height: 1.12 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .transcript-window {
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
    overflow: hidden !important;
  }

  .cue {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }
}

/* Móvil estrecho */
@media (max-width: 560px) {
  .sidebar {
    padding: 24px !important;
  }

  .sidebar-inner {
    gap: 14px !important;
  }

  .brand {
    font-size: 1.15rem !important;
  }

  .nav {
    gap: 14px !important;
  }

  .nav a {
    font-size: .9rem !important;
  }
}


/* =========================================================
   MOBILE HEADER ÚNICO — MISMO TAMAÑO EN TODAS LAS PÁGINAS
   ========================================================= */

@media (max-width: 950px) {
  .sidebar,
  body.page-dialogos .sidebar,
  body.dialogos-page .sidebar,
  body.video-page .sidebar,
  body[data-page="dialogos"] .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    padding: 24px !important;
    border-right: 0 !important;
    border-bottom: var(--line) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    background: var(--bg) !important;
    color: var(--fg) !important;
  }

  .sidebar-inner,
  body.page-dialogos .sidebar-inner,
  body.dialogos-page .sidebar-inner,
  body.video-page .sidebar-inner,
  body[data-page="dialogos"] .sidebar-inner {
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 22px !important;
  }

  .brand,
  body.page-dialogos .brand,
  body.dialogos-page .brand,
  body.video-page .brand,
  body[data-page="dialogos"] .brand {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
    font-size: 1.18rem !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;
    font-weight: 700 !important;
  }

  .nav,
  body.page-dialogos .nav,
  body.dialogos-page .nav,
  body.video-page .nav,
  body[data-page="dialogos"] .nav {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: baseline !important;
    gap: 18px !important;
    flex-wrap: nowrap !important;
  }

  .nav a,
  body.page-dialogos .nav a,
  body.dialogos-page .nav a,
  body.video-page .nav a,
  body[data-page="dialogos"] .nav a {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
    font-size: .92rem !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
  }

  .nav a.active,
  body.page-dialogos .nav a.active,
  body.dialogos-page .nav a.active,
  body.video-page .nav a.active,
  body[data-page="dialogos"] .nav a.active {
    color: var(--red) !important;
    font-weight: 700 !important;
  }

  .nav a:last-child,
  body.page-dialogos .nav a:last-child,
  body.dialogos-page .nav a:last-child,
  body.video-page .nav a:last-child,
  body[data-page="dialogos"] .nav a:last-child {
    border: 0 !important;
  }

  .side-note,
  body.page-dialogos .side-note,
  body.dialogos-page .side-note,
  body.video-page .side-note,
  body[data-page="dialogos"] .side-note {
    display: none !important;
  }

  main,
  .page-main,
  .voices-main,
  .dialogos-main {
    padding-top: 0 !important;
  }
}

/* Móvil estrecho: mismo header, solo reduce un poco gaps para que quepa */
@media (max-width: 390px) {
  .sidebar,
  body.page-dialogos .sidebar,
  body.dialogos-page .sidebar,
  body.video-page .sidebar,
  body[data-page="dialogos"] .sidebar {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    padding: 24px !important;
  }

  .sidebar-inner,
  body.page-dialogos .sidebar-inner,
  body.dialogos-page .sidebar-inner,
  body.video-page .sidebar-inner,
  body[data-page="dialogos"] .sidebar-inner {
    gap: 16px !important;
  }

  .brand,
  body.page-dialogos .brand,
  body.dialogos-page .brand,
  body.video-page .brand,
  body[data-page="dialogos"] .brand {
    font-size: 1.08rem !important;
  }

  .nav,
  body.page-dialogos .nav,
  body.dialogos-page .nav,
  body.video-page .nav,
  body[data-page="dialogos"] .nav {
    gap: 13px !important;
  }

  .nav a,
  body.page-dialogos .nav a,
  body.dialogos-page .nav a,
  body.video-page .nav a,
  body[data-page="dialogos"] .nav a {
    font-size: .88rem !important;
  }
}


/* =========================================================
   MOBILE — MISMA MAQUETA PARA VOCES Y DIÁLOGOS
   Vídeo = mismo CSS en oscuro, nada más
   ========================================================= */

@media (max-width: 950px) {
  :root {
    --mobile-pad: 24px;
    --mobile-header-h: 126px;
    --mobile-section-gap: 28px;
    --mobile-title-size: clamp(2.65rem, 13vw, 4.4rem);
    --mobile-list-title: clamp(1.15rem, 6vw, 1.8rem);
    --mobile-meta-size: .9rem;
  }

  /* Header idéntico en todas */
  .sidebar,
  body.page-dialogos .sidebar {
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
    max-height: var(--mobile-header-h) !important;
    padding: var(--mobile-pad) !important;
    border-right: 0 !important;
    border-bottom: var(--line) !important;
    display: flex !important;
    align-items: center !important;
  }

  .sidebar-inner,
  body.page-dialogos .sidebar-inner {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 22px !important;
  }

  .brand,
  body.page-dialogos .brand {
    font-size: 1.18rem !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav,
  body.page-dialogos .nav {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: baseline !important;
    gap: 18px !important;
  }

  .nav a,
  body.page-dialogos .nav a {
    border: 0 !important;
    padding: 0 !important;
    font-size: .92rem !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
  }

  .side-note,
  body.page-dialogos .side-note {
    display: none !important;
  }

  /* Contenedor principal: mismo padding y sin scroll interno raro */
  .voices-main,
  [data-voices-app],
  .dialogos-main,
  body.page-dialogos .dialogos-main {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Columna/lista de Voces y columna/lista de Diálogos idénticas */
  .episodes-panel,
  .voices-list,
  body.page-dialogos .dialogos-themes {
    padding: var(--mobile-pad) !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* Eyebrow igual */
  .episodes-panel .eyebrow,
  .voices-list .eyebrow,
  body.page-dialogos .dialogos-themes .eyebrow {
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--muted) !important;
    font-size: .82rem !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

  /* Título Voces / Diálogos igual */
  .episodes-panel h1,
  .voices-list h1,
  body.page-dialogos .dialogos-themes h1 {
    margin: 0 0 28px !important;
    padding: 0 0 22px !important;
    border-bottom: var(--line) !important;
    font-size: var(--mobile-title-size) !important;
    line-height: .86 !important;
    letter-spacing: -.085em !important;
    font-weight: 700 !important;
  }

  /* Listas: misma estructura */
  [data-episodes],
  .episodes,
  .dialogos-items {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .episode,
  body.page-dialogos .dialogos-item {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 18px 0 !important;
    border: 0 !important;
    border-bottom: var(--line) !important;
    background: transparent !important;
    color: inherit !important;
    text-align: left !important;
  }

  .episode:first-child,
  body.page-dialogos .dialogos-item:first-child {
    border-top: 0 !important;
  }

  .episode strong,
  body.page-dialogos .dialogos-item strong {
    display: block !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: var(--mobile-list-title) !important;
    line-height: 1 !important;
    letter-spacing: -.055em !important;
    font-weight: 700 !important;
  }

  .episode span,
  body.page-dialogos .dialogos-item span {
    display: block !important;
    margin-top: 10px !important;
    color: var(--muted) !important;
    font-size: var(--mobile-meta-size) !important;
    line-height: 1.25 !important;
    letter-spacing: -.035em !important;
  }

  .episode.active strong,
  .episode:hover strong,
  body.page-dialogos .dialogos-item.active strong,
  body.page-dialogos .dialogos-item:hover strong {
    color: var(--red) !important;
  }

  /* Al entrar: solo lista */
  body:not(.voices-detail-open) .player-panel {
    display: none !important;
  }

  body.page-dialogos:not(.dialogos-detail-open) .dialogos-video-panel {
    display: none !important;
  }

  /* Panel detalle: mismo padding que lista */
  body.voices-detail-open .player-panel,
  body.page-dialogos.dialogos-detail-open .dialogos-video-panel {
    padding: var(--mobile-pad) !important;
  }

  /* Player móvil: play / barra / tiempo en una línea */
  .custom-player {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 0 !important;
    border-top: var(--line) !important;
    border-bottom: var(--line) !important;
  }

  .play {
    width: 32px !important;
    height: 52px !important;
    min-width: 32px !important;
    min-height: 52px !important;
  }

  .timeline {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  .time {
    grid-column: auto !important;
    margin: 0 !important;
    align-self: center !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: .72rem !important;
    line-height: 1 !important;
  }
}

/* iPhone estrecho: baja solo el gap, no cambia la maqueta */
@media (max-width: 390px) {
  .nav,
  body.page-dialogos .nav {
    gap: 13px !important;
  }

  .nav a,
  body.page-dialogos .nav a {
    font-size: .88rem !important;
  }

  .brand,
  body.page-dialogos .brand {
    font-size: 1.08rem !important;
  }
}


/* =========================================================
   MOBILE — SIMPLE MAIN HOME / INFO
   Corrige padding-top y respiración vertical
   ========================================================= */

@media (max-width: 950px) {
  .simple-main {
    min-height: calc(100svh - var(--mobile-header-h, 126px)) !important;
    padding: 0 24px 24px !important;
    display: grid !important;
    align-content: center !important;
  }

  .simple-main section {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .simple-main h1 {
    margin: 0 0 28px !important;
    font-size: clamp(4.2rem, 20vw, 7.2rem) !important;
    line-height: .78 !important;
    letter-spacing: -.09em !important;
  }

  .simple-main p {
    margin: 0 !important;
    max-width: none !important;
    font-size: clamp(1.15rem, 5.2vw, 1.8rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -.045em !important;
  }
}

/* En pantallas bajas: un poco menos centrado para que no quede cortado */
@media (max-width: 950px) and (max-height: 740px) {
  .simple-main {
    align-content: start !important;
    padding-top: 72px !important;
  }
}



/* DIÁLOGOS — VIDEO LOCAL */
.dialogos-video-shell video,
.dialogos-video-shell video.is-visible {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: #000 !important;
  border: 0 !important;
}

.dialogos-video-shell video:not(.is-visible) {
  display: none !important;
}

/* =========================================================
   DIÁLOGOS — PLAYER NATIVO DE VIDEO VISIBLE
   ========================================================= */

.dialogos-video-shell {
  background: #000 !important;
  display: block !important;
  overflow: visible !important;
  position: relative !important;
}

/* El video no debe quedar como fondo: tiene que mostrar sus controles */
.dialogos-video-shell video,
.dialogos-video-shell video.is-visible {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: #000 !important;
  border: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Ocultar video solo cuando no está activo */
.dialogos-video-shell video:not(.is-visible) {
  display: none !important;
}

/* El iframe sigue funcionando para embeds externos */
.dialogos-video-shell iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #000 !important;
}

/* Evitar que el placeholder tape los controles */
.dialogos-video-placeholder {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

.dialogos-video-placeholder.is-hidden {
  display: none !important;
}

/* Desktop: caja suficientemente alta para video + player */
@media (min-width: 951px) {
  .dialogos-video-panel {
    grid-template-rows: minmax(190px, auto) minmax(360px, 1fr) 132px !important;
  }

  .dialogos-video-shell {
    min-height: 360px !important;
  }
}

/* Móvil: que el player nativo no quede cortado */
@media (max-width: 950px) {
  body.page-dialogos.dialogos-detail-open .dialogos-video-panel {
    grid-template-rows: auto 46svh auto !important;
  }

  .dialogos-video-shell {
    height: 46svh !important;
    min-height: 300px !important;
    overflow: visible !important;
  }

  .dialogos-video-shell video,
  .dialogos-video-shell video.is-visible {
    height: 100% !important;
  }
}


/* =========================================================
   BIOS ENTREVISTAS — añadido 2026-05-28
   ========================================================= */

.episode .episode-role {
  display: block !important;
  margin-top: 7px !important;
}

.episode .episode-bio {
  display: block !important;
  max-width: 44rem !important;
  margin-top: 10px !important;
  color: var(--muted) !important;
  font-size: clamp(.72rem, .86vw, .84rem) !important;
  line-height: 1.35 !important;
  letter-spacing: -.025em !important;
  font-weight: 400 !important;
  opacity: .78 !important;
}

.person-bio[data-bio] {
  margin-top: 14px !important;
  max-width: 860px !important;
  color: var(--muted) !important;
  font-size: clamp(.92rem, 1.05vw, 1.08rem) !important;
  line-height: 1.28 !important;
  letter-spacing: -.035em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

@media (max-width: 760px) {
  .episode .episode-bio {
    margin-top: 8px !important;
    font-size: clamp(.72rem, 3vw, .82rem) !important;
    line-height: 1.32 !important;
  }

  .person-bio[data-bio] {
    font-size: clamp(.82rem, 3.4vw, .96rem) !important;
    line-height: 1.32 !important;
  }
}

/* =========================================================
   ENLACES BIO — añadido 2026-05-28
   ========================================================= */

.person-link[data-link] {
  display: inline-block !important;
  margin-top: 14px !important;
  color: var(--red) !important;
  font-size: clamp(.78rem, .9vw, .9rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
  text-decoration: none !important;
  opacity: .95 !important;
}

.person-link[data-link]::after {
  content: " ↗";
}

.person-link[data-link]:hover {
  opacity: .45 !important;
}

.person-link[data-link][hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .person-link[data-link] {
    margin-top: 10px !important;
    font-size: clamp(.76rem, 3vw, .86rem) !important;
  }
}

/* Info page */
.page-info .site {
  min-height: 100vh;
}

.page-info .sidebar-inner {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 48px);
}

.sidebar-gif {
  margin: 56px 0 0;
  padding-top: 0;
}

.sidebar-gif img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

.info-main {
  min-height: 100vh;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

.info-simple {
  max-width: 1040px;
}

.info-simple h1 {
  margin: 0;
  font-size: clamp(4rem, 12vw, 12rem);
  line-height: .78;
  letter-spacing: -.09em;
  font-weight: 700;
}

.info-claim {
  margin: 24px 0 0;
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  line-height: 1.05;
  font-style: italic;
}

.info-text {
  max-width: 940px;
  margin: 42px 0 0;
  font-size: clamp(1rem, 1.6vw, 1.55rem);
  line-height: 1.32;
}

.info-meta {
  max-width: 940px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(.9rem, 1.25vw, 1.15rem);
  line-height: 1.35;
}

.info-main a {
  color: var(--red);
  text-decoration: none;
}

.info-main a:hover {
  color: transparent;
  -webkit-text-stroke: 1px var(--red);
}

.info-support {
  border-top: var(--line);
  padding-top: 24px;
}

.info-support img {
  display: block;
  width: min(100%, 980px);
  height: auto;
  mix-blend-mode: multiply;
}

.info-support-text {
  max-width: 980px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(.72rem, .95vw, .9rem);
  line-height: 1.35;
}

@media (max-width: 950px) {
  .page-info .sidebar-inner {
    min-height: auto;
  }

  .sidebar-gif {
    display: none;
  }

  .info-main {
    min-height: auto;
    padding: 18px;
    gap: 36px;
  }

  .info-text {
    margin-top: 32px;
  }
}

/* INFO — ajuste final sidebar, scroll y logos */
@media (min-width: 951px) {
  .page-info .site {
    height: 100vh !important;
    overflow: hidden !important;
  }

  .page-info .info-main {
    height: 100vh !important;
    overflow-y: auto !important;
  }
}

.page-info .side-note {
  display: none !important;
}

.page-info .sidebar-gif {
  margin-top: 24px !important;
}

.page-info .info-support {
  margin-top: 48px;
}

.page-info .info-support img {
  width: min(100%, 1100px) !important;
  max-height: none !important;
}

.page-info .info-support-text {
  margin-bottom: 32px;
}


/* ==========================================================
   LOADING / FADE IN
   añadido 2026-06-20
   ========================================================== */

body {
  -webkit-animation: fadein 3s;
     -moz-animation: fadein 3s;
      -ms-animation: fadein 3s;
       -o-animation: fadein 3s;
          animation: fadein 3s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ==========================================================
   SCROLL BAR
   ========================================================== */

::-webkit-scrollbar {
  width: 1px;
}

::-webkit-scrollbar-track {
  background: white;
}

::-webkit-scrollbar-thumb {
  background: red;
}

::-webkit-scrollbar-thumb:hover {
  background: black;
}


/* ==========================================================
   SELECTION
   ========================================================== */

::-moz-selection {
  color: white;
  background: black;
}

::selection {
  color: white;
  background: black;
}


/* Header móvil común para Home, Voces e Info */
@media (max-width: 950px) {
  .sidebar {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    padding: 20px 24px !important;
  }
}

@media (max-width: 390px) {
  .sidebar {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    padding: 18px 22px !important;
  }
}

/* Ajuste final header móvil común */
@media (max-width: 950px) {
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;

    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;

    padding: 16px 24px !important;
  }

  .sidebar-inner {
    align-items: center !important;
  }
}

@media (max-width: 390px) {
  .sidebar {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;

    padding: 15px 22px !important;
  }
}


/* HEADER MÓVIL FINAL COMÚN — Home, Voces, Info */
@media (max-width: 950px) {
  .sidebar,
  body.page-info .sidebar,
  body.page-voces .sidebar,
  body.page-home .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;

    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;

    padding: 14px 24px !important;
  }

  .sidebar-inner,
  body.page-info .sidebar-inner,
  body.page-voces .sidebar-inner,
  body.page-home .sidebar-inner {
    align-items: center !important;
  }
}

@media (max-width: 390px) {
  .sidebar,
  body.page-info .sidebar,
  body.page-voces .sidebar,
  body.page-home .sidebar {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;

    padding: 13px 22px !important;
  }
}

/* HEADER MÓVIL FIJO FINAL — Home, Voces, Info */
@media (max-width: 950px) {
  .sidebar,
  body.page-info .sidebar,
  body.page-voces .sidebar,
  body.page-home .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;

    width: 100% !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;

    padding: 14px 24px !important;
    border-right: 0 !important;
    border-bottom: var(--line) !important;
    background: var(--bg) !important;
    color: var(--fg) !important;
  }

  .site {
    padding-top: 96px !important;
  }

  .sidebar-inner,
  body.page-info .sidebar-inner,
  body.page-voces .sidebar-inner,
  body.page-home .sidebar-inner {
    height: 100% !important;
    align-items: center !important;
  }
}

@media (max-width: 390px) {
  .sidebar,
  body.page-info .sidebar,
  body.page-voces .sidebar,
  body.page-home .sidebar {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    padding: 13px 22px !important;
  }

  .site {
    padding-top: 92px !important;
  }
}

/* INFO móvil — más aire bajo el header */
@media (max-width: 950px) {
  body.page-info .info-main {
    padding-top: 38px !important;
  }
}

@media (max-width: 390px) {
  body.page-info .info-main {
    padding-top: 34px !important;
  }
}

/* INFO — imagen patologías sonoras */
.info-image {
  margin: 32px 0 0;
  max-width: 940px;
}

.info-image img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

@media (max-width: 950px) {
  .info-image {
    margin-top: 28px;
  }
}

/* VOCES desktop — player un poco más arriba + transcripción más respirada */
@media (min-width: 951px) {
  .player-panel {
    grid-template-rows: minmax(190px, auto) 48px 235px 178px !important;
    gap: 17px !important;
  }

  .custom-player {
    margin-top: 0 !important;
  }

  .caption-box {
    height: 235px !important;
    min-height: 235px !important;
    max-height: 235px !important;
  }

  .transcript-window {
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }

  .cue {
    height: 59px !important;
    min-height: 59px !important;
    max-height: 59px !important;
    padding: 10px 0 !important;
  }

  .cue-time {
    font-size: .73rem !important;
  }

  .cue-text {
    font-size: .82rem !important;
    line-height: 1.24 !important;
    max-height: 2.48em !important;
  }
}

/* Portátiles bajos: mismo criterio, un poco más compacto */
@media (min-width: 951px) and (max-height: 820px) {
  .player-panel {
    grid-template-rows: minmax(170px, auto) 48px 205px 162px !important;
    gap: 15px !important;
  }

  .caption-box {
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
  }

  .transcript-window {
    height: 162px !important;
    min-height: 162px !important;
    max-height: 162px !important;
  }

  .cue {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  .cue-text {
    font-size: .79rem !important;
    line-height: 1.22 !important;
  }
}

/* VOCES desktop — tags temáticos en sidebar */
@media (min-width: 951px) {
  body.page-voces .nav-tags {
    display: grid !important;
    gap: 6px !important;
    padding: 10px 0 14px !important;
    border-top: var(--line) !important;
  }

  body.page-voces .nav-tag {
    appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    text-align: left !important;
    padding: 2px 0 2px 14px !important;
    margin: 0 !important;
    font: inherit !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
    letter-spacing: -.035em !important;
    cursor: pointer !important;
  }

  body.page-voces .nav-tag:hover,
  body.page-voces .nav-tag.active {
    color: var(--red) !important;
  }
}

/* Oculto en móvil de momento */
@media (max-width: 950px) {
  body.page-voces .nav-tags {
    display: none !important;
  }
}


/* SIDEBAR ÚNICO — Home / Voces / Diálogos / Info / Publicaciones */
.nav-dialogos {
  margin: 1.15rem 0;
}

.nav-group-title {
  display: block;
  width: fit-content;
  color: var(--text);
  text-decoration: none;
  margin-bottom: .45rem;
}

.nav-group-title.active {
  color: var(--red);
}

.nav-topic {
  display: block;
  width: fit-content;
  margin: .22rem 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav-topic:hover,
.nav-topic.active {
  color: var(--red);
}

.nav-topic.disabled {
  opacity: .32;
  cursor: default;
  pointer-events: none;
}

/* VOCES — MODO DIÁLOGOS/TEMAS LIMPIO */
@media (min-width: 951px) {
  body.page-voces.topic-mode .player-panel {
    display: grid !important;
    grid-template-rows: auto 54px minmax(190px, 1fr) auto !important;
    gap: 24px !important;
    height: 100vh !important;
    overflow: hidden !important;
    padding: 34px 32px 28px !important;
  }

  body.page-voces.topic-mode .player-panel > .now {
    display: block !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    padding-bottom: 8px !important;
  }

  body.page-voces.topic-mode .now h2 {
    margin: 0 0 18px !important;
    font-size: clamp(3rem, 6.2vw, 7rem) !important;
    line-height: .82 !important;
    letter-spacing: -.085em !important;
  }

  body.page-voces.topic-mode .now .role {
    max-width: 980px !important;
    margin: 0 !important;
    padding-bottom: 12px !important;
    color: var(--muted) !important;
    font-size: .9rem !important;
    line-height: 1.35 !important;
  }

  body.page-voces.topic-mode .now .person-bio,
  body.page-voces.topic-mode .now .person-link {
    display: none !important;
  }

  body.page-voces.topic-mode .player-panel > .custom-player {
    display: grid !important;
    grid-row: 2 !important;
    margin-top: 4px !important;
  }

  body.page-voces.topic-mode .player-panel > .caption-box {
    display: flex !important;
    grid-row: 3 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    min-height: 190px !important;
    padding: 0 76px !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  body.page-voces.topic-mode .player-panel > .topic-panel {
    display: grid !important;
    grid-row: 4 !important;
  }

  body.page-voces.topic-mode .player-panel > .transcript-window,
  body.page-voces.topic-mode .player-panel > audio {
    display: none !important;
  }

  body.page-voces.topic-mode .speaker {
    display: none !important;
  }

  body.page-voces.topic-mode .caption-box::before,
  body.page-voces.topic-mode .caption-box::after {
    display: none !important;
  }

  body.page-voces.topic-mode .caption-text {
    position: static !important;
    display: block !important;
    width: min(900px, calc(100% - 120px)) !important;
    max-width: 900px !important;
    max-height: calc(1.38em * 2) !important;
    overflow: hidden !important;
    transform: none !important;
    opacity: 1;
    color: var(--text) !important;
    text-align: center !important;
    font-size: clamp(1.15rem, 1.55vw, 1.85rem) !important;
    line-height: 1.38 !important;
    letter-spacing: -.045em !important;
  }

  body.page-voces.topic-mode .topic-panel {
    display: grid !important;
    gap: 20px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.page-voces.topic-mode .topic-magic-nav,
  body.page-voces.topic-mode .topic-fragment-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    border-top: var(--line) !important;
  }

  body.page-voces.topic-mode .topic-magic-nav {
    padding-top: 14px !important;
    padding-bottom: 2px !important;
  }

  body.page-voces.topic-mode .topic-fragment-nav {
    padding-top: 16px !important;
  }

  body.page-voces.topic-mode .topic-magic-button,
  body.page-voces.topic-mode .topic-fragment-button {
    appearance: none !important;
    border: var(--line) !important;
    background: transparent !important;
    color: var(--muted) !important;
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font: inherit !important;
    font-size: .75rem !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
    cursor: pointer !important;
  }

  body.page-voces.topic-mode .topic-magic-button:hover,
  body.page-voces.topic-mode .topic-magic-button.active,
  body.page-voces.topic-mode .topic-fragment-button:hover,
  body.page-voces.topic-mode .topic-fragment-button.active {
    color: var(--red) !important;
    border-color: var(--red) !important;
  }

  body.page-voces.topic-mode .topic-magic-button:focus,
  body.page-voces.topic-mode .topic-fragment-button:focus {
    outline: none !important;
  }
}

@media (max-width: 950px) {
  body.page-voces .topic-panel {
    display: none !important;
  }
}


/* SIDEBAR FINAL SIMPLE — siempre igual */
.sidebar .brand {
  display: block;
}

.nav {
  display: block;
}

.nav a {
  display: block;
}

.nav-dialogos,
.nav-group-title,
.nav-topic,
.nav-topic.disabled {
  display: none !important;
}

.nav [data-main] {
  display: block !important;
}

.nav [data-main].active {
  color: var(--red) !important;
}



/* SIDEBAR — Publicaciones sin enlace */
.nav .nav-static {
  display: block;
  color: var(--text);
  cursor: default;
}

.nav .nav-static.active {
  color: var(--red);
}

/* DIÁLOGOS — subtítulos simples bajo player */
@media (min-width: 951px) {
  body.page-voces.topic-mode .caption-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 190px !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  body.page-voces.topic-mode .caption-box::before,
  body.page-voces.topic-mode .caption-box::after {
    display: none !important;
  }

  body.page-voces.topic-mode .caption-text {
    position: static !important;
    transform: none !important;
    width: min(900px, calc(100% - 120px)) !important;
    max-width: 900px !important;
    max-height: calc(1.38em * 2) !important;
    overflow: hidden !important;
    color: var(--text) !important;
    opacity: 1;
    text-align: center !important;
    font-size: clamp(1.15rem, 1.55vw, 1.85rem) !important;
    line-height: 1.38 !important;
    letter-spacing: -.045em !important;
  }
}

/* FIX SIDEBAR — span Publicaciones igual que enlaces */
.sidebar .nav a,
.sidebar .nav .nav-static {
  display: block !important;
  width: 100% !important;
  padding: 1.05rem 0 !important;
  border-top: var(--line) !important;
  color: var(--text);
  text-decoration: none;
  line-height: 1.1;
}

.sidebar .nav a:last-child,
.sidebar .nav .nav-static:last-child {
  border-bottom: var(--line) !important;
}

.sidebar .nav .nav-static {
  cursor: default !important;
}

.sidebar .nav a.active,
.sidebar .nav .nav-static.active {
  color: var(--red) !important;
}


/* FIX SIDEBAR FINAL — todos los items mismo tamaño/peso */
.sidebar .nav a,
.sidebar .nav .nav-static {
  display: block !important;
  width: 100% !important;

  padding: 1.05rem 0 !important;
  border-top: var(--line) !important;

  font: inherit !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -.045em !important;

  color: var(--text) !important;
  text-decoration: none !important;
}

.sidebar .nav a.active,
.sidebar .nav .nav-static.active {
  color: var(--red) !important;
  font: inherit !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -.045em !important;
}

.sidebar .nav a:last-child,
.sidebar .nav .nav-static:last-child {
  border-bottom: var(--line) !important;
}

.sidebar .nav .nav-static {
  cursor: default !important;
}



/* SIDEBAR — DEFINITIVO, MISMA ESTRUCTURA EN TODAS LAS PÁGINAS */
.sidebar .brand {
  display: block !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

.sidebar .nav {
  display: block !important;
}

.sidebar .nav a,
.sidebar .nav .nav-static {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;

  padding: 1.05rem 0 !important;
  margin: 0 !important;
  border-top: var(--line) !important;

  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -.045em !important;

  color: var(--text) !important;
  text-decoration: none !important;
  background: transparent !important;
}

.sidebar .nav a:last-child,
.sidebar .nav .nav-static:last-child {
  border-bottom: var(--line) !important;
}

.sidebar .nav a.active,
.sidebar .nav .nav-static.active {
  color: var(--red) !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -.045em !important;
}

.sidebar .nav .nav-static {
  cursor: default !important;
  pointer-events: none !important;
}

.sidebar .nav-dialogos,
.sidebar .nav-group-title,
.sidebar .nav-topic,
.sidebar .nav-topic.disabled {
  display: none !important;
}



/* SIDEBAR CANÓNICO — MISMO ASIDE EN TODAS LAS PÁGINAS */
.sidebar {
  display: flex !important;
  flex-direction: column !important;
}

.sidebar > *:not(.brand):not(.nav) {
  display: none !important;
}

.sidebar .brand {
  display: block !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

.sidebar .nav {
  display: block !important;
  margin-top: 5.2rem !important;
}

.sidebar .nav a,
.sidebar .nav .nav-static {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;

  padding: 1.05rem 0 !important;
  margin: 0 !important;
  border-top: var(--line) !important;

  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -.045em !important;

  color: var(--text) !important;
  text-decoration: none !important;
  background: transparent !important;
}

.sidebar .nav a:last-child,
.sidebar .nav .nav-static:last-child {
  border-bottom: var(--line) !important;
}

.sidebar .nav a.active,
.sidebar .nav .nav-static.active {
  color: var(--red) !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -.045em !important;
}

.sidebar .nav .nav-static {
  cursor: default !important;
  pointer-events: none !important;
}

.sidebar img,
.sidebar picture,
.sidebar figure,
.sidebar svg:not(.allowed-sidebar-svg) {
  display: none !important;
}


/* FIX URGENTE — mostrar sidebar-inner, que una regla anterior estaba ocultando */
.sidebar > .sidebar-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

@media (max-width: 950px) {
  .sidebar > .sidebar-inner {
    display: block !important;
    height: auto !important;
  }
}


/* FIX DEFINITIVO — recuperar sidebar-inner oculto por regla antigua */
.sidebar > .sidebar-inner:not(.brand):not(.nav) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sidebar > .sidebar-inner:not(.brand):not(.nav) .brand,
.sidebar > .sidebar-inner:not(.brand):not(.nav) .nav,
.sidebar > .sidebar-inner:not(.brand):not(.nav) .nav a,
.sidebar > .sidebar-inner:not(.brand):not(.nav) .nav .nav-static {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 950px) {
  .sidebar > .sidebar-inner:not(.brand):not(.nav) {
    display: block !important;
    height: auto !important;
  }
}


/* FIX FINAL — caja de subtítulos visible en Diálogos */
body.page-voces.topic-mode .caption-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 190px !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body.page-voces.topic-mode .caption-box::before,
body.page-voces.topic-mode .caption-box::after {
  display: none !important;
}

body.page-voces.topic-mode .caption-text {
  display: block !important;
  position: static !important;
  transform: none !important;
  width: min(900px, calc(100% - 120px)) !important;
  max-width: 900px !important;
  max-height: calc(1.38em * 2) !important;
  overflow: hidden !important;
  color: #111 !important;
  opacity: 1 !important;
  text-align: center !important;
  font-size: clamp(1.15rem, 1.55vw, 1.85rem) !important;
  line-height: 1.38 !important;
  letter-spacing: -.045em !important;
}


/* BURGER DIARIO GLOBAL EXACTO */
.corner,
.burger,
.menu {
  display: none;
}

@media (max-width: 950px) {
  .sidebar .nav {
    display: none !important;
  }

  .corner {
    position: fixed !important;
    z-index: 40 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    color: #fff !important;
    text-decoration: none !important;
    mix-blend-mode: difference !important;
  }

  .top-right {
    top: 20px !important;
    right: 20px !important;
  }

  .burger {
    display: block !important;
    width: 28px !important;
    height: 18px !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
  }

  .burger span {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: #fff !important;
    margin-bottom: 8px !important;
    transition: transform 0.4s ease, opacity 0.4s ease !important;
    mix-blend-mode: difference !important;
  }

  .burger span:last-child {
    margin-bottom: 0 !important;
  }

  .burger.open span:first-child {
    transform: translateY(4.5px) rotate(45deg) !important;
  }

  .burger.open span:last-child {
    transform: translateY(-4.5px) rotate(-45deg) !important;
  }

  .menu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;

    padding: 86px 28px 28px !important;

    background: rgba(0,0,0,0.92) !important;

    opacity: 0 !important;
    pointer-events: none !important;

    transition: opacity 0.8s ease !important;
  }

  .menu.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .menu-column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.25em !important;
  }

  .menu a,
  .menu .nav-static {
    color: #fff !important;
    text-decoration: none !important;
    font-size: clamp(2.6rem, 13vw, 6rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.06em !important;
    font-weight: 400 !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .menu a:hover {
    opacity: 0.55 !important;
  }

  .menu a.active,
  .menu .nav-static.active {
    color: #ff2b2b !important;
  }

  .menu .nav-static {
    cursor: default !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }

  body.menu-open .corner {
    color: #fff !important;
    mix-blend-mode: normal !important;
  }

  body.menu-open .burger span {
    background: #fff !important;
    mix-blend-mode: normal !important;
  }
}

@media (min-width: 951px) {
  .corner,
  .burger,
  .menu {
    display: none !important;
  }
}

/* FIX — burger diario: ocultar nav normal y activar overlay */
@media (max-width: 950px) {
  .sidebar nav.desktop-nav,
  .sidebar .desktop-nav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #menu.menu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 86px 28px 36px !important;
    box-sizing: border-box !important;

    background: rgba(0, 0, 0, 0.92) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition: opacity .4s ease, visibility .4s ease !important;
  }

  #menu.menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #menu .menu-column {
    width: 100% !important;
  }

  #menu a,
  #menu .nav-static {
    display: block !important;
    width: 100% !important;

    padding: 0 !important;
    margin: 0 0 .18em !important;
    border: 0 !important;

    color: #fff !important;
    text-decoration: none !important;

    font-family: inherit !important;
    font-size: clamp(2.6rem, 13vw, 6rem) !important;
    font-weight: 400 !important;
    line-height: .9 !important;
    letter-spacing: -.06em !important;
  }

  #menu a.active,
  #menu .nav-static.active {
    color: var(--red) !important;
  }

  #menuButton.burger {
    display: block !important;
    position: fixed !important;
    top: 28px !important;
    right: 28px !important;
    z-index: 10001 !important;

    width: 28px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  #menuButton.burger span {
    display: block !important;
    width: 28px !important;
    height: 1px !important;
    background: #fff !important;
    margin-bottom: 8px !important;
    transition: transform .4s ease, opacity .4s ease !important;
    mix-blend-mode: difference !important;
  }

  #menuButton.burger span:last-child {
    margin-bottom: 0 !important;
  }

  #menuButton.burger.open span:first-child {
    transform: translateY(4.5px) rotate(45deg) !important;
    mix-blend-mode: normal !important;
  }

  #menuButton.burger.open span:last-child {
    transform: translateY(-4.5px) rotate(-45deg) !important;
    mix-blend-mode: normal !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }
}

@media (min-width: 951px) {
  #menuButton.burger,
  #menu.menu {
    display: none !important;
  }
}

/* FIX FINO — burger diario: ocultar sidebar nav en móvil y poner la X siempre arriba */
@media (max-width: 950px) {
  /* Cerrado: NO mostrar el menú del sidebar */
  .sidebar .nav.desktop-nav,
  .sidebar nav.desktop-nav,
  .sidebar-inner > .nav:not(.menu) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Header móvil: solo marca */
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9000 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: var(--bg) !important;
    border-right: 0 !important;
    border-bottom: var(--line) !important;
  }

  .sidebar-inner {
    height: 86px !important;
    min-height: 86px !important;
    padding: 22px 28px !important;
    box-sizing: border-box !important;
  }

  .sidebar .brand {
    position: relative !important;
    z-index: 9002 !important;
  }

  /* Burger/X siempre por encima de todo */
  #menuButton.burger {
    position: fixed !important;
    top: 28px !important;
    right: 28px !important;
    z-index: 2147483647 !important;
    display: block !important;
    mix-blend-mode: difference !important;
  }

  #menuButton.burger span {
    background: #fff !important;
    mix-blend-mode: difference !important;
  }

  #menuButton.burger.open span {
    background: #fff !important;
    mix-blend-mode: difference !important;
  }

  /* Overlay del menú: por debajo del burger, por encima del contenido */
  #menu.menu {
    z-index: 2147483640 !important;
  }

  /* Cuando el menú está abierto, que el contenido no asome visualmente */
  body.menu-open main,
  body.menu-open .page-main,
  body.menu-open .simple-main,
  body.menu-open .info-main,
  body.menu-open .dialogos-main,
  body.menu-open .voices-main {
    pointer-events: none !important;
  }
}


/* FIX SOLO — ocultar nav sidebar móvil y ajustar marca */
@media (max-width: 950px) {
  /* Oculta SOLO el menú normal del sidebar en móvil */
  body .site aside.sidebar .sidebar-inner > nav.nav:not(#menu):not(.menu) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Header móvil limpio: marca izquierda + burger derecha */
  body .site aside.sidebar {
    height: 92px !important;
    min-height: 92px !important;
    border-right: 0 !important;
    border-bottom: var(--line) !important;
    background: var(--bg) !important;
    overflow: visible !important;
  }

  body .site aside.sidebar .sidebar-inner {
    height: 92px !important;
    min-height: 92px !important;
    padding: 26px 32px 20px !important;
    box-sizing: border-box !important;
  }

  body .site aside.sidebar .brand {
    display: block !important;
    position: relative !important;
    z-index: 9002 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--text) !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: .9 !important;
    letter-spacing: -.06em !important;
  }

  /* Burger / X por encima */
  body #menuButton.burger {
    position: fixed !important;
    top: 30px !important;
    right: 32px !important;
    z-index: 2147483647 !important;
  }
}

/* AJUSTE FINO MOBILE — marca, burger rojo y menú más contenido */
@media (max-width: 950px) {
  body .site aside.sidebar {
    height: 82px !important;
    min-height: 82px !important;
  }

  body .site aside.sidebar .sidebar-inner {
    height: 82px !important;
    min-height: 82px !important;
    padding: 18px 28px 16px !important;
  }

  body .site aside.sidebar .brand {
    margin: 0 !important;
    transform: translateY(-2px) !important;
    font-size: .96rem !important;
    line-height: .9 !important;
  }

  body #menuButton.burger {
    top: 26px !important;
    right: 28px !important;
  }

  body #menuButton.burger span,
  body #menuButton.burger.open span {
    background: var(--red) !important;
    mix-blend-mode: normal !important;
  }

  #menu.menu a,
  #menu.menu .nav-static {
    font-size: clamp(2.15rem, 10.8vw, 4.65rem) !important;
    line-height: .92 !important;
    letter-spacing: -.065em !important;
  }

  #menu.menu .menu-column {
    gap: .08em !important;
  }
}

/* AJUSTE FINAL HEADER MOBILE — margen igual al contenido + burger rojo */
@media (max-width: 950px) {
  body .site aside.sidebar .sidebar-inner {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  body .site aside.sidebar .brand {
    transform: translateY(-4px) !important;
  }

  body #menuButton.burger {
    right: 40px !important;
  }

  body #menuButton.burger span,
  body #menuButton.burger span:first-child,
  body #menuButton.burger span:last-child,
  body #menuButton.burger.open span,
  body #menuButton.burger.open span:first-child,
  body #menuButton.burger.open span:last-child {
    background-color: #ff2b2b !important;
    background: #ff2b2b !important;
    border-color: #ff2b2b !important;
    mix-blend-mode: normal !important;
  }
}


/* FIX FINAL SOLO HEADER — sin mover contenido + burger rojo real */
@media (max-width: 950px) {
  body .site aside.sidebar {
    height: 82px !important;
    min-height: 82px !important;
  }

  body .site aside.sidebar .sidebar-inner {
    height: 82px !important;
    min-height: 82px !important;
    padding-top: 18px !important;
    padding-bottom: 16px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
  }

  body .site aside.sidebar .brand {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-2px) !important;
  }

  body #menuButton.corner.top-right.burger,
  body #menuButton.burger {
    top: 26px !important;
    right: 28px !important;
    color: #ff2b2b !important;
    mix-blend-mode: normal !important;
  }

  body #menuButton.corner.top-right.burger span,
  body #menuButton.corner.top-right.burger span:first-child,
  body #menuButton.corner.top-right.burger span:last-child,
  body #menuButton.burger span,
  body #menuButton.burger span:first-child,
  body #menuButton.burger span:last-child,
  body #menuButton.burger.open span,
  body #menuButton.burger.open span:first-child,
  body #menuButton.burger.open span:last-child {
    background: #ff2b2b !important;
    background-color: #ff2b2b !important;
    border-color: #ff2b2b !important;
    color: #ff2b2b !important;
    mix-blend-mode: normal !important;
    filter: none !important;
  }
}


/* FIX FINAL BRAND MOBILE — posición aprobada */
@media (max-width: 950px) {
  body .site aside.sidebar .sidebar-inner .brand,
  body .site aside.sidebar .brand {
    position: relative !important;
    left: -1.4rem !important;
  }
}


/* FIX TOPIC MOBILE — palabras/personas visibles */
@media (max-width: 950px) {
  body.page-voces.topic-mode .topic-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    margin-top: 1.4rem !important;
    padding-top: 1rem !important;
    border-top: var(--line) !important;
  }

  body.page-voces.topic-mode .topic-magic-nav,
  body.page-voces.topic-mode .topic-fragment-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .42rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
  }

  body.page-voces.topic-mode .topic-magic-nav {
    margin-bottom: 1rem !important;
  }

  body.page-voces.topic-mode .topic-fragment-nav {
    padding-top: 1rem !important;
    border-top: var(--line) !important;
  }

  body.page-voces.topic-mode .topic-magic-button,
  body.page-voces.topic-mode .topic-fragment-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    padding: .32rem .62rem !important;
    border: 1px solid rgba(0,0,0,.28) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
  }

  body.page-voces.topic-mode .topic-magic-button.active,
  body.page-voces.topic-mode .topic-fragment-button.active {
    color: var(--red) !important;
    border-color: var(--red) !important;
  }
}


/* FIX MOBILE TOPIC ORDER — topic después de caption, sin transcript */
@media (max-width: 950px) {
  body.page-voces.topic-mode .player-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  body.page-voces.topic-mode .player-panel > .now {
    order: 1 !important;
  }

  body.page-voces.topic-mode .player-panel > .custom-player {
    order: 2 !important;
  }

  body.page-voces.topic-mode .player-panel > .caption-box {
    order: 3 !important;
  }

  body.page-voces.topic-mode .player-panel > .topic-panel {
    order: 4 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.page-voces.topic-mode .player-panel > .transcript-window,
  body.page-voces.topic-mode .player-panel > [data-transcript] {
    order: 99 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body.page-voces.topic-mode .player-panel > audio {
    display: none !important;
  }
}


/* INFO — ajuste crédito y líneas */
body.page-info .info-credit {
  color: var(--muted) !important;
  margin-top: 2.2rem !important;
  margin-bottom: 1.1rem !important;
}

body.page-info .info-credit a {
  color: var(--red) !important;
}

body.page-info hr {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* INFO — quitar gap crédito/logos e igualar líneas */
body.page-info .info-main {
  gap: 0 !important;
}

body.page-info .info-simple {
  max-width: none !important;
  width: 100% !important;
}

body.page-info .info-credit {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.page-info hr {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* PRUEBA INDEX OREJAS + GIF SIDEBAR */
.home-ears {
  display: block;
  width: min(52vw, 520px);
  height: auto;
  margin: 0 0 2.2rem 0;
}

body.page-home h1 {
  font-size: clamp(5rem, 12vw, 11rem);
}

.sidebar-gif {
  display: block;
  width: 72%;
  height: auto;
  margin-top: 4rem;
  opacity: .95;
}

@media (max-width: 950px) {
  .home-ears {
    width: 100%;
    margin-bottom: 1.8rem;
  }

  body.page-home h1 {
    font-size: clamp(4.2rem, 17vw, 7rem);
  }

  .sidebar-gif {
    display: none !important;
  }
}


/* AJUSTE — orejas index transparentes + GIF sidebar */
.home-ears {
  display: block !important;
  width: min(46vw, 560px) !important;
  height: auto !important;
  margin: -1.4rem auto 1.4rem auto !important;
  mix-blend-mode: multiply !important;
  background: transparent !important;
}

.sidebar-gif {
  display: block !important;
  width: 58% !important;
  height: auto !important;
  margin: 4rem auto 0 auto !important;
  opacity: .95 !important;
}

@media (max-width: 950px) {
  .home-ears {
    width: 88% !important;
    margin: -0.4rem auto 1.2rem auto !important;
    mix-blend-mode: multiply !important;
  }

  .sidebar-gif {
    display: none !important;
  }
}


/* IMÁGENES — sin fondo blanco ni transición */
.home-ears,
.info-main img:not(.sidebar-gif),
.info-simple img:not(.sidebar-gif) {
  background: transparent !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}


/* FIX FINAL IMÁGENES — sin transición, info más pequeña, index sin título */
img,
.home-ears,
.sidebar-gif,
.info-main img,
.info-simple img,
.logos img,
figure img,
picture img {
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
  background: transparent !important;
}

.home-ears,
.info-main img:not(.sidebar-gif),
.info-simple img:not(.sidebar-gif) {
  mix-blend-mode: multiply !important;
}

/* Info: las tres orejas más pequeñas, como la imagen de index */
body.page-info .info-main img[src*="Bertillon"],
body.page-info .info-simple img[src*="Bertillon"] {
  display: block !important;
  width: min(46vw, 560px) !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Index: asegurar que no quede ningún título central visible */
body.page-home main h1,
body.page-home .page-main h1,
body.page-home .home-title {
  display: none !important;
}


/* AJUSTE PEDIDO — GIF sidebar, index centrado, info imagen, sin transición */

/* Sin transiciones ni aparición con fondo blanco en imágenes */
img,
.home-ears,
.sidebar-gif,
.info-main img,
.info-simple img,
.logos img,
figure img,
picture img {
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
  background: transparent !important;
}

.home-ears,
.info-main img:not(.sidebar-gif),
.info-simple img:not(.sidebar-gif),
.logos img {
  mix-blend-mode: multiply !important;
}

/* GIF solo en desktop, colocado en el espacio bajo Info */
@media (min-width: 951px) {
  .sidebar {
    position: relative !important;
  }

  .sidebar-gif {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 68% !important;
    transform: translate(-50%, -50%) !important;
    width: 48% !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0 !important;
    opacity: .95 !important;
    mix-blend-mode: multiply !important;
    pointer-events: none !important;
  }

  /* Index: imagen centrada en anchura y altura */
  body.page-home .page-main,
  body.page-home main {
    position: relative !important;
    min-height: 100vh !important;
  }

  body.page-home .home-ears {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(34vw, 520px) !important;
    max-width: 520px !important;
    height: auto !important;
    margin: 0 !important;
  }
}

/* En móvil el GIF del sidebar no aparece */
@media (max-width: 950px) {
  .sidebar-gif {
    display: none !important;
  }
}

/* Info: subtítulo en gris, un poco más de aire antes/después de la imagen */
body.page-info .info-main .subtitle,
body.page-info .info-main .tagline,
body.page-info .info-main .lead,
body.page-info .info-main em {
  color: var(--muted) !important;
}

body.page-info .info-main img[src*="Bertillon"],
body.page-info .info-simple img[src*="Bertillon"] {
  width: min(34vw, 520px) !important;
  max-width: 520px !important;
  height: auto !important;
  margin-top: 2.4rem !important;
  margin-bottom: 2.6rem !important;
  mix-blend-mode: multiply !important;
}


/* FINAL — swap imágenes + gif sidebar desktop */

/* Sin transición ni aparición con fondo blanco */
img,
.home-ears,
.sidebar-gif,
.info-main img,
.info-simple img,
.logos img,
figure img,
picture img {
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
  background: transparent !important;
}

.home-ears,
.info-main img:not(.sidebar-gif),
.info-simple img:not(.sidebar-gif),
.logos img {
  mix-blend-mode: multiply !important;
}

/* Mismo ancho/tamaño para imagen principal en index e info */
.home-ears,
body.page-info .info-main img[src*="Bertillon"],
body.page-info .info-simple img[src*="Bertillon"] {
  display: block !important;
  width: min(34vw, 520px) !important;
  max-width: 520px !important;
  height: auto !important;
  mix-blend-mode: multiply !important;
}

/* Index: imagen centrada horizontal y vertical */
@media (min-width: 951px) {
  body.page-home .page-main,
  body.page-home main {
    position: relative !important;
    min-height: 100vh !important;
  }

  body.page-home .home-ears {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
}

/* Info: más espacio solo entre subtítulo e imagen */
body.page-info .info-main img[src*="Bertillon"],
body.page-info .info-simple img[src*="Bertillon"] {
  margin-top: 4.2rem !important;
  margin-bottom: 2.6rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* GIF en sidebar, solo desktop, abajo entre Info y el final */
@media (min-width: 951px) {
  .sidebar,
  .sidebar .sidebar-inner {
    position: relative !important;
    min-height: 100vh !important;
  }

  .sidebar .sidebar-gif {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 7.5rem !important;
    transform: translateX(-50%) !important;
    width: 46% !important;
    max-width: 145px !important;
    height: auto !important;
    margin: 0 !important;
    opacity: .95 !important;
    mix-blend-mode: multiply !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
}

@media (max-width: 950px) {
  .sidebar .sidebar-gif {
    display: none !important;
  }
}


/* AJUSTE PRUEBA — h1, fondo imagen, gif grande */

/* Tamaño H1 según prueba */
.info-simple h1,
body.page-home h1 {
  margin: 0 !important;
  font-size: clamp(4rem, 10vw, 10rem) !important;
  line-height: .78 !important;
  letter-spacing: -.09em !important;
  font-weight: 700 !important;
}

/* Fondo de figura igual al fondo de la web para evitar blanco visible */
figure.info-image {
  background-color: #f3f0e9 !important;
}

/* GIF sidebar más grande en todos los sidebars desktop */
@media (min-width: 951px) {
  .sidebar .sidebar-gif {
    width: 100% !important;
    max-width: 245px !important;
  }
}


/* INDEX — texto arriba y abajo de imagen central */
body.page-home .home-claim {
  font-style: italic !important;
  font-size: clamp(1.35rem, 2.1vw, 2.6rem) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
  color: var(--text) !important;
  margin: 0 !important;
}

@media (min-width: 951px) {
  body.page-home .home-claim {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(34vw, 520px) !important;
    max-width: 520px !important;
    text-align: left !important;
    z-index: 3 !important;
  }

  body.page-home .home-claim-top {
    top: calc(50% - 8.3rem) !important;
  }

  body.page-home .home-claim-bottom {
    top: calc(50% + 6.5rem) !important;
  }
}

@media (max-width: 950px) {
  body.page-home .home-claim {
    text-align: left !important;
    width: 100% !important;
  }

  body.page-home .home-claim-top {
    margin-bottom: 1rem !important;
  }

  body.page-home .home-claim-bottom {
    margin-top: 1rem !important;
  }
}


/* AJUSTE INDEX EXACTO — posiciones y móvil */
@media (min-width: 951px) {
  body.page-home .home-claim-top {
    top: calc(50% - 14rem) !important;
  }

  body.page-home .home-claim-bottom {
    top: calc(50% + 14rem) !important;
  }
}

@media (max-width: 950px) {
  .home-ears,
  body.page-info .info-main img[src*="Bertillon"],
  body.page-info .info-simple img[src*="Bertillon"] {
    display: block !important;
    width: min(90vw, 520px) !important;
    max-width: 100% !important;
    height: auto !important;
    mix-blend-mode: multiply !important;
  }

  body.page-home .home-claim {
    text-align: center !important;
    width: 100% !important;
  }
}


/* DESKTOP — home claim text-align center */
@media (min-width: 951px) {
  body.page-home .home-claim {
    text-align: center !important;
  }
}


/* INDEX — sin typewriting y móvil centrado */

/* Frases normales, sin efecto typewriting */
body.page-home .home-claim {
  clip-path: none !important;
  animation: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}

body.page-home .home-claim::after {
  content: none !important;
}

/* Móvil: frase / imagen / frase centrado y con distancia */
@media (max-width: 950px) {
  body.page-home .page-main,
  body.page-home main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100vh - 9rem) !important;
  }

  body.page-home .home-claim {
    position: static !important;
    display: block !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body.page-home .home-claim-top {
    margin: 0 0 2.9rem 0 !important;
  }

  body.page-home .home-ears {
    position: static !important;
    display: block !important;
    transform: none !important;
    width: min(78vw, 420px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 3.2rem auto !important;
  }

  body.page-home .home-claim-bottom {
    margin: 0 !important;
  }
}


/* PUBLICACIONES — usa estructura de Voces, solo ajustes de contenido */
body.page-publicaciones .publicaciones-list h1 {
  font-size: clamp(3.1rem, 1.4vw, 5.8rem) !important;
  line-height: .82 !important;
  letter-spacing: -.08em !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

body.page-publicaciones .publicaciones-panel {
  overflow-y: auto !important;
}

body.page-publicaciones .publicaciones-image {
  margin: 2rem 0 0 0 !important;
  background-color: #f3f0e9 !important;
}

body.page-publicaciones .publicaciones-image img {
  display: block !important;
  width: min(52vw, 760px) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
}

@media (max-width: 950px) {
  body.page-publicaciones .publicaciones-image img {
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* ALEGREYA — solo donde se pidió */
body.page-home .home-claim,
body.page-home .home-claim-top,
body.page-home .home-claim-bottom,
body.page-info .info-claim,
body.page-info .info-simple > p.info-text:nth-of-type(2),
body.page-info .info-simple > p.info-text:nth-of-type(3) {
  font-family: "Alegreya", serif !important;
}

/* Eyebrow oculto */
.eyebrow {
  display: none !important;
}


/* ALEGREYA — textos descriptivos info */
body.page-info .info-text {
  font-family: "Alegreya", serif !important;
}


/* DIALOGOS — temas sin subrayado y no clicables excepto suicidio */
body.page-dialogos-tema .dialogos-topic-list .episode,
body.page-dialogos-tema .dialogos-topic-list .episode *,
body.page-dialogos-tema .dialogos-topic-list a,
body.page-dialogos-tema .dialogos-topic-list a * {
  text-decoration: none !important;
}

body.page-dialogos-tema .dialogos-topic-list .episode:not(.active) {
  pointer-events: none !important;
  cursor: default !important;
}

body.page-dialogos-tema .dialogos-topic-list .episode:not(.active),
body.page-dialogos-tema .dialogos-topic-list .episode:not(.active) * {
  color: inherit !important;
}


/* PUBLICACIONES — mockups y PDF */
body.page-publicaciones .publicaciones-now {
  margin-bottom: .8rem !important;
}

body.page-publicaciones .publicaciones-view {
  margin-top: 0 !important;
}

body.page-publicaciones .publicaciones-image {
  margin: 0 0 2rem 0 !important;
  background-color: #f3f0e9 !important;
}

body.page-publicaciones .publicaciones-image img {
  display: block !important;
  width: min(52vw, 760px) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
}

body.page-publicaciones .publicaciones-download {
  display: inline-block !important;
  margin: 0 0 1.5rem 0 !important;
  color: var(--red) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

body.page-publicaciones .publicaciones-pdf {
  display: block !important;
  width: 100% !important;
  height: 78vh !important;
  border: 1px solid var(--line) !important;
  background: white !important;
}

@media (max-width: 950px) {
  body.page-publicaciones .publicaciones-image img {
    width: 100% !important;
    margin: 0 auto !important;
  }

  body.page-publicaciones .publicaciones-pdf {
    height: 72vh !important;
  }
}


/* PUBLICACIONES — ajustar espacio y quitar PDF embebido */
body.page-publicaciones .publicaciones-now {
  margin-bottom: .25rem !important;
}

body.page-publicaciones .publicaciones-view {
  margin-top: 0 !important;
}

body.page-publicaciones .publicaciones-image:first-child {
  margin-top: 0 !important;
}

body.page-publicaciones .publicaciones-download {
  margin-top: 0 !important;
}

body.page-publicaciones .publicaciones-pdf {
  display: none !important;
}


/* PUBLICACIONES — espacio título/mockup y bottom mockup 2 */
body.page-publicaciones .publicaciones-now {
  margin-bottom: .35rem !important;
}

body.page-publicaciones .publicaciones-view {
  margin-top: 0 !important;
}

body.page-publicaciones .publicaciones-image {
  margin-top: .65rem !important;
}

body.page-publicaciones .publicaciones-image:first-child {
  margin-top: .65rem !important;
  margin-bottom: 4rem !important;
}

body.page-publicaciones .publicaciones-image + .publicaciones-image {
  margin-top: 0 !important;
}


/* PUBLICACIONES — ajuste real espacio imagen */
body.page-publicaciones .publicaciones-panel {
  display: block !important;
  gap: 0 !important;
}

body.page-publicaciones .publicaciones-panel .now,
body.page-publicaciones .publicaciones-now {
  margin-bottom: 1.2rem !important;
  padding-bottom: 0 !important;
}

body.page-publicaciones .publicaciones-view,
body.page-publicaciones .publicaciones-view-impreso {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.page-publicaciones .publicaciones-view-impreso .publicaciones-image:first-child {
  margin-top: 0 !important;
  margin-bottom: 7rem !important;
}

body.page-publicaciones .publicaciones-view-impreso .publicaciones-image + .publicaciones-image {
  margin-top: 0 !important;
}