/* contandoelexito.com: estilos. Paleta y tipografía del kit de marca de Contando el Éxito.
 * Móvil primero. Cada botón tiene su propio estilo en su bloque: no hay clase de botón compartida. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/inter-latin-900-normal.woff2") format("woff2");
}

/* El radio de la luz de la portada, animable (en vmax). */
@property --luz-r {
  syntax: "<number>";
  inherits: true;
  initial-value: 30;
}
/* Móvil: hasta dónde ha caído la luz del foco (de arriba abajo). */
@property --haz {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 130%;
}
/* Móvil: la luz que recorre el borde del bloque de patrocinios. */
@property --giro {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --negro: #000000;
  --carbon: #0b0b0b;
  --blanco: #ffffff;
  --dorado: #febd5b;
  --dorado-claro: #ffd08a;
  --gris: #b4b4b4;
  --gris-marca: #a7a7a7;
  --sombra: #242424;
  --filete: #2a2a2a;
  --ancho: 1200px;
  --margen: clamp(20px, 5vw, 64px);
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --alto-cabecera: calc(60px + env(safe-area-inset-top, 0px));
  color-scheme: dark;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--negro);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 4px;
}
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.saltar {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--dorado);
  color: var(--negro);
  font-weight: 700;
  text-decoration: none;
}
.saltar:focus {
  left: 12px;
}

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 0 var(--margen);
}
.titulo-seccion {
  font-weight: 900;
  font-size: clamp(2rem, 1.15rem + 3.6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.texto-seccion {
  margin-top: 16px;
  max-width: 54ch;
  color: var(--gris);
  font-size: 1.0625rem;
}

/* ---------- Encabezado ---------- */
.encabezado {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.35s,
    border-color 0.35s;
}
.encabezado[data-solido="si"] {
  background: rgba(0, 0, 0, 0.92);
  border-bottom-color: var(--sombra);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: 12px;
}
.encabezado__logo img {
  width: auto;
  height: 40px;
}
.encabezado__menu {
  display: none;
}
@media (min-width: 960px) {
  .encabezado__logo img {
    height: 46px;
  }
  .encabezado__menu {
    display: flex;
    gap: clamp(18px, 1.8vw, 30px);
    margin-left: auto;
  }
  .encabezado__menu a {
    position: relative;
    padding: 6px 0;
    color: #e6e6e6;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
  }
  .encabezado__menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--dorado);
    transition: right 0.3s var(--curva);
  }
  .encabezado__menu a:hover,
  .encabezado__menu a:focus-visible {
    color: var(--blanco);
  }
  .encabezado__menu a:hover::after,
  .encabezado__menu a:focus-visible::after {
    right: 0;
  }
}

/* Visor de cámara: las cuatro esquinas se cierran sobre la palabra. */
.suscribir-visor {
  position: relative;
  flex: none;
  padding: 10px 16px;
  color: var(--blanco);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}
.suscribir-visor__esquinas {
  position: absolute;
  inset: -4px;
  --c: rgba(255, 255, 255, 0.75);
  background:
    linear-gradient(var(--c), var(--c)) top left / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 12px no-repeat;
  transition: inset 0.3s var(--curva);
}
.suscribir-visor:hover,
.suscribir-visor:focus-visible {
  color: var(--dorado);
}
.suscribir-visor:hover .suscribir-visor__esquinas,
.suscribir-visor:focus-visible .suscribir-visor__esquinas {
  inset: 2px;
  --c: var(--dorado);
}

/* ---------- Portada (la luz del estudio) ---------- */
.portada {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 600px;
  height: 100svh;
  max-height: 1040px;
  overflow: hidden;
  --luz-x: 50%;
  --luz-y: 42%;
  --luz-r: 30;
  animation: encender 1.8s var(--curva) 0.3s backwards;
}
@keyframes encender {
  from {
    --luz-r: 0;
  }
  to {
    --luz-r: 30;
  }
}
.portada__capa {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.portada__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.portada__luz {
  z-index: -2;
  -webkit-mask-image: radial-gradient(
    circle calc(var(--luz-r) * 1vmax) at var(--luz-x) var(--luz-y),
    #000 0%,
    #000 32%,
    rgba(0, 0, 0, 0.55) 64%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle calc(var(--luz-r) * 1vmax) at var(--luz-x) var(--luz-y),
    #000 0%,
    #000 32%,
    rgba(0, 0, 0, 0.55) 64%,
    transparent 100%
  );
}
.portada__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.72) 30%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 20%);
}
/* El texto va centrado, entre los dos micrófonos: la foto es simétrica y el título ocupa el sitio de la conversación. */
.portada__texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(44px, 9vh, 100px);
  text-align: center;
}
.portada__aviso {
  margin-bottom: 14px;
  color: var(--dorado);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.portada__titulo {
  max-width: 11ch;
  font-weight: 900;
  font-size: clamp(2.5rem, 1rem + 7vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}
.portada__antetitulo {
  display: block;
  margin-bottom: 18px;
  color: var(--dorado);
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.76rem + 0.25vw, 0.9375rem);
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: none;
}
@media (max-width: 480px) {
  .portada__antetitulo {
    letter-spacing: 0.1em;
  }
}
.portada[data-origen] .portada__antetitulo {
  display: none;
}
.portada__bajada {
  margin-top: 20px;
  max-width: 40ch;
  color: #e6e6e6;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}
.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 30px;
  margin-top: 32px;
}
@media (min-width: 900px) {
  /* en pantalla ancha el bloque se centra en vertical, a la altura de los micrófonos */
  .portada {
    align-items: center;
  }
  .portada__texto {
    padding-top: 72px;
    padding-bottom: 40px;
  }
  .portada__titulo {
    font-size: min(5.3vw, 6rem);
  }
  .portada__velo {
    background:
      radial-gradient(ellipse 34% 30% at 50% 52%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 18%, rgba(0, 0, 0, 0) 40%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 20%);
  }
}

/* Botón principal: bloque dorado sólido, el de más contraste de la página. */
.suscribir-oro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 28px;
  background: var(--dorado);
  color: var(--negro);
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 10px 40px rgba(254, 189, 91, 0.25);
  transition:
    background-color 0.25s,
    transform 0.25s var(--curva),
    box-shadow 0.25s;
}
.suscribir-oro svg {
  width: 26px;
  height: 26px;
  flex: none;
}
.suscribir-oro:hover,
.suscribir-oro:focus-visible {
  background: var(--dorado-claro);
  transform: translateY(-2px);
  box-shadow: 0 16px 50px rgba(254, 189, 91, 0.38);
}
.suscribir-oro:active {
  transform: translateY(0) scale(0.98);
}
@media (max-width: 520px) {
  .suscribir-oro {
    width: 100%;
  }
}

.empieza-flecha {
  color: var(--blanco);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 6px;
}
.empieza-flecha span {
  display: inline-block;
  transition: transform 0.3s var(--curva);
}
.empieza-flecha:hover span,
.empieza-flecha:focus-visible span {
  transform: translateY(4px);
}

/* ---------- Cifras del canal ---------- */
.cifras {
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
  background: var(--carbon);
}
.cifras__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cifras__lista li {
  padding: 28px 0 26px;
  border-bottom: 1px solid var(--filete);
}
.cifras__lista li:nth-child(odd) {
  padding-right: 16px;
  border-right: 1px solid var(--filete);
}
.cifras__lista li:nth-child(even) {
  padding-left: 20px;
}
.cifras__lista li:nth-last-child(-n + 2) {
  border-bottom: 0;
}
@media (min-width: 900px) {
  .cifras__lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cifras__lista li,
  .cifras__lista li:nth-child(odd),
  .cifras__lista li:nth-child(even) {
    padding: 40px 28px 36px;
    border-bottom: 0;
    border-right: 1px solid var(--filete);
  }
  .cifras__lista li:first-child {
    padding-left: 0;
  }
  .cifras__lista li:last-child {
    border-right: 0;
  }
}
.cifras__numero {
  display: block;
  font-weight: 900;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.cifras__numero b {
  color: var(--dorado);
  font-weight: 900;
}
.cifras__texto {
  display: block;
  margin-top: 8px;
  color: var(--gris);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* ---------- Empieza por aquí ---------- */
.empieza {
  padding-top: clamp(72px, 10vw, 136px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.empieza__cabeza {
  margin-bottom: clamp(36px, 5vw, 56px);
}
.empieza__rejilla {
  display: grid;
  gap: 40px;
}
.empieza__pila {
  display: grid;
  gap: 28px;
}
@media (min-width: 900px) {
  .empieza__rejilla {
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    align-items: start;
  }
  .empieza__pila {
    gap: 36px;
  }
}
.episodio {
  position: relative;
  display: grid;
  color: var(--blanco);
  text-decoration: none;
}
.episodio__imagen {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
}
.episodio__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transition:
    transform 0.6s var(--curva),
    filter 0.4s;
}
.episodio:hover .episodio__imagen img,
.episodio:focus-visible .episodio__imagen img {
  transform: scale(1.03);
  filter: brightness(1);
}
.episodio__play {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--dorado);
  transition: transform 0.3s var(--curva);
}
.episodio__play::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 23px;
  border-left: 22px solid var(--negro);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.episodio:hover .episodio__play {
  transform: scale(1.08);
}
@media (max-width: 599px) {
  .episodio__play {
    right: 10px;
    bottom: 10px;
    transform: scale(0.75);
    transform-origin: 100% 100%;
  }
  .episodio:hover .episodio__play {
    transform: scale(0.8);
  }
}
.episodio__numero {
  position: absolute;
  z-index: 1;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--blanco);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  transition:
    color 0.3s,
    transform 0.4s var(--curva);
}
.episodio:hover .episodio__numero,
.episodio:focus-visible .episodio__numero {
  color: var(--dorado);
  transform: translateY(-6px);
}
.episodio__texto {
  display: block;
  padding-top: 18px;
}
.episodio__marca {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 8px;
  background: var(--dorado);
  color: var(--negro);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.episodio__titulo {
  display: block;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.episodio__datos {
  display: block;
  margin-top: 8px;
  color: var(--gris);
  font-size: 0.9375rem;
}
.episodio__ver {
  display: inline-block;
  margin-top: 14px;
  color: var(--dorado);
  font-weight: 700;
  font-size: 0.9375rem;
}
.episodio--grande .episodio__numero {
  top: 10px;
  left: 14px;
  font-size: clamp(5.5rem, 13vw, 12rem);
}
.episodio--grande .episodio__titulo {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  line-height: 1.05;
}
.episodio--fila {
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.episodio--fila .episodio__numero {
  top: 6px;
  left: 8px;
  font-size: clamp(3rem, 7vw, 5.5rem);
}
.episodio--fila .episodio__texto {
  padding-top: 0;
}
.episodio--fila .episodio__titulo {
  font-size: clamp(1.0625rem, 0.9rem + 0.7vw, 1.375rem);
  line-height: 1.15;
}

/* Ver todos: un hilo dorado que se alarga. */
.todos-hilo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(40px, 5vw, 56px);
  font-weight: 700;
  text-decoration: none;
}
.todos-hilo::after {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--dorado);
  transition: width 0.4s var(--curva);
}
.todos-hilo:hover::after,
.todos-hilo:focus-visible::after {
  width: 88px;
}

/* ---------- La promesa ---------- */
.promesa {
  padding-top: clamp(56px, 8vw, 112px);
  padding-bottom: clamp(56px, 8vw, 112px);
  border-top: 1px solid #161616;
}
.promesa__frase {
  max-width: 22ch;
  font-weight: 900;
  font-size: clamp(1.875rem, 1rem + 3.6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.promesa__frase em {
  color: var(--dorado);
  font-style: normal;
}
.promesa__lista {
  display: grid;
  gap: 18px;
  margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 900px) {
  .promesa__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
}
.promesa__lista li {
  padding-top: 18px;
  border-top: 2px solid var(--dorado);
}
.promesa__lista strong {
  display: block;
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.2;
}
.promesa__lista span {
  display: block;
  margin-top: 8px;
  color: var(--gris);
}

/* ---------- Elige por tema ---------- */
.temas {
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid #161616;
}
.temas__carril {
  display: flex;
  gap: 16px;
  padding: 36px var(--margen) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--margen);
  scrollbar-width: thin;
  scrollbar-color: var(--sombra) transparent;
}
@media (min-width: 1330px) {
  .temas__carril {
    padding-left: calc((100vw - var(--ancho)) / 2);
    scroll-padding-left: calc((100vw - var(--ancho)) / 2);
  }
}
.temas__carril li {
  flex: 0 0 auto;
  width: min(78vw, 300px);
  scroll-snap-align: start;
}
.poster {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px;
  border: 1px solid #222;
  background: var(--carbon);
  color: var(--blanco);
  text-decoration: none;
  transition: border-color 0.4s;
}
.poster__imagen {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.poster__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.7);
  transition: filter 0.5s;
}
.poster:hover,
.poster:focus-visible {
  border-color: #3d3d3d;
}
.poster:hover .poster__imagen img,
.poster:focus-visible .poster__imagen img {
  filter: none;
}
@media (hover: none) {
  .poster__imagen img {
    filter: brightness(0.92);
  }
}
.poster__nombre {
  margin-top: auto;
  padding: 24px 18px 0;
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.poster__detalle {
  padding: 10px 18px 22px;
  color: var(--gris);
  font-size: 0.9375rem;
}

/* ---------- Míralo o escúchalo ---------- */
.plataformas {
  display: grid;
  gap: 40px;
  padding-top: clamp(56px, 7vw, 120px);
  padding-bottom: clamp(56px, 7vw, 120px);
}
.plataformas__foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
@media (min-width: 900px) {
  .plataformas {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
  }
  .plataformas__foto {
    position: sticky;
    top: 100px;
  }
  .plataformas__foto img {
    aspect-ratio: 4 / 5;
  }
}
.plataformas__lista ul {
  margin-top: 32px;
  border-top: 1px solid var(--filete);
}
.fila {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  grid-template-areas:
    "marca rotulo flecha"
    ". detalle flecha";
  column-gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--filete);
  color: var(--blanco);
  text-decoration: none;
}
.fila__marca {
  grid-area: marca;
  width: 24px;
  height: 24px;
}
.fila__rotulo {
  grid-area: rotulo;
  position: relative;
  display: block;
  height: 1.08em;
  overflow: hidden;
  font-weight: 900;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.fila__nombre,
.fila__abrir {
  display: block;
  white-space: nowrap;
  transition: transform 0.4s var(--curva);
}
.fila__abrir {
  color: var(--dorado);
}
.fila:hover .fila__nombre,
.fila:hover .fila__abrir,
.fila:focus-visible .fila__nombre,
.fila:focus-visible .fila__abrir {
  transform: translateY(-100%);
}
.fila__detalle {
  grid-area: detalle;
  margin-top: 4px;
  color: var(--gris);
  font-size: 0.9375rem;
}
.fila__flecha {
  grid-area: flecha;
  color: var(--gris);
  font-size: 1.5rem;
  transition:
    color 0.3s,
    transform 0.3s var(--curva);
}
.fila:hover .fila__flecha,
.fila:focus-visible .fila__flecha {
  color: var(--dorado);
  transform: translateX(4px);
}

/* ---------- Tu historia ---------- */
.historia {
  position: relative;
  display: grid;
  border-top: 1px solid #161616;
}
.historia__foto {
  position: relative;
}
.historia__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 75% center;
}
.historia__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 45%);
}
.historia__texto {
  position: relative;
  padding-top: 8px;
  padding-bottom: clamp(64px, 8vw, 96px);
}
@media (min-width: 900px) {
  .historia {
    min-height: clamp(560px, 72vh, 760px);
    align-items: center;
  }
  .historia__foto {
    position: absolute;
    inset: 0;
  }
  .historia__foto img {
    height: 100%;
    aspect-ratio: auto;
  }
  .historia__foto::after {
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.9) 32%, rgba(0, 0, 0, 0) 66%);
  }
  .historia__texto {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .historia__texto > * {
    max-width: 520px;
  }
}

/* Entrada de cine: troquel en medio; el resguardo se separa al pasar el ratón. */
.entrada {
  display: inline-flex;
  margin-top: 30px;
  color: var(--negro);
  font-weight: 900;
  font-size: 1.125rem;
  text-decoration: none;
  filter: drop-shadow(0 10px 24px rgba(254, 189, 91, 0.15));
}
.entrada__cuerpo {
  padding: 16px 22px 16px 28px;
  background: radial-gradient(circle at 0 50%, transparent 8px, var(--dorado) 8.5px);
  border-right: 2px dashed rgba(0, 0, 0, 0.35);
}
.entrada__resguardo {
  display: grid;
  place-items: center;
  padding: 0 18px 0 14px;
  background: radial-gradient(circle at 100% 50%, transparent 8px, var(--dorado) 8.5px);
  transform-origin: 0 100%;
  transition: transform 0.35s var(--curva);
}
.entrada:hover .entrada__resguardo,
.entrada:focus-visible .entrada__resguardo {
  transform: translateX(6px) rotate(5deg);
}
.entrada:active {
  transform: translateY(1px);
}

/* ---------- Para marcas y negocios ---------- */
.marcas {
  padding-top: clamp(56px, 7vw, 96px);
}
.marcas__marco {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(254, 189, 91, 0.55);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(254, 189, 91, 0.1) 0%, rgba(254, 189, 91, 0) 60%),
    var(--carbon);
}
@media (min-width: 900px) {
  .marcas__marco {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
  }
}
.marcas__titulo {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
}
/* Burbuja de chat: lo único redondeado de la página, además del disco del logo y del botón de reproducir. */
.burbuja {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 26px;
  border: 2px solid var(--blanco);
  border-radius: 28px 28px 28px 6px;
  color: var(--blanco);
  font-weight: 900;
  font-size: 1.0625rem;
  text-decoration: none;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s,
    border-radius 0.35s var(--curva);
}
.burbuja svg {
  width: 24px;
  height: 24px;
  flex: none;
}
.burbuja:hover,
.burbuja:focus-visible {
  border-color: var(--dorado);
  border-radius: 28px 28px 6px 28px;
  background: var(--dorado);
  color: var(--negro);
}
.burbuja:active {
  transform: scale(0.98);
}

/* ---------- Qué es / preguntas ---------- */
.preguntas {
  display: grid;
  gap: 40px;
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: clamp(72px, 9vw, 128px);
  border-top: 1px solid #161616;
}
@media (min-width: 900px) {
  .preguntas {
    grid-template-columns: 5fr 7fr;
    gap: 72px;
  }
}
.preguntas__lead {
  margin-top: 20px;
  max-width: 34ch;
  color: #e6e6e6;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.5;
}
.pregunta {
  border-bottom: 1px solid var(--filete);
}
.pregunta:first-child {
  border-top: 1px solid var(--filete);
}
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}
.pregunta summary::-webkit-details-marker {
  display: none;
}
.pregunta h3 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
}
.pregunta__signo {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--curva);
}
.pregunta__signo::before,
.pregunta__signo::after {
  content: "";
  position: absolute;
  inset: 7px 0 auto 0;
  height: 2px;
  background: currentColor;
}
.pregunta__signo::after {
  transform: rotate(90deg);
}
.pregunta[open] .pregunta__signo {
  transform: rotate(45deg);
  color: var(--dorado);
}
.pregunta p {
  margin-bottom: 22px;
  max-width: 60ch;
  color: var(--gris);
}

/* ---------- Cierre: la última llamada a suscribirse ---------- */
.cierre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(88px, 12vw, 168px) 0;
  border-top: 1px solid #161616;
}
.cierre__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cierre__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% center;
}
.cierre::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55));
}
@media (min-width: 900px) {
  .cierre::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.7) 45%, rgba(0, 0, 0, 0.1) 100%);
  }
}
.cierre__titulo {
  max-width: 14ch;
}
.cierre .texto-seccion {
  margin-top: 18px;
  max-width: 44ch;
  color: #e0e0e0;
}
/* La barra larga del cierre: la flecha corre hasta el borde al pasar el ratón. */
.suscribir-barra {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  min-height: 64px;
  padding: 0 22px 0 30px;
  background: var(--dorado);
  color: var(--negro);
  font-weight: 900;
  font-size: 1.25rem;
  text-decoration: none;
  box-shadow: 0 14px 50px rgba(254, 189, 91, 0.3);
  transition: background-color 0.25s;
}
.suscribir-barra svg {
  width: 28px;
  height: 28px;
  flex: none;
}
.suscribir-barra__flecha {
  display: inline-block;
  margin-left: 18px;
  transition: transform 0.35s var(--curva);
}
.suscribir-barra:hover,
.suscribir-barra:focus-visible {
  background: var(--dorado-claro);
}
.suscribir-barra:hover .suscribir-barra__flecha,
.suscribir-barra:focus-visible .suscribir-barra__flecha {
  transform: translateX(8px);
}
.cierre__otra {
  display: block;
  margin-top: 22px;
  color: var(--gris);
  font-size: 0.9375rem;
}
.cierre__otra a {
  color: var(--blanco);
  text-underline-offset: 4px;
}

/* ---------- Pie ---------- */
.pie {
  padding-top: 56px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid #1c1c1c;
  overflow: hidden;
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pie__logo {
  width: auto;
  height: 44px;
}
.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.pie__enlaces a {
  color: #dcdcdc;
  font-size: 0.9375rem;
  text-decoration: none;
  background: linear-gradient(var(--dorado), var(--dorado)) 0 100% / 0 1px no-repeat;
  transition:
    background-size 0.35s var(--curva),
    color 0.3s;
}
.pie__enlaces a:hover,
.pie__enlaces a:focus-visible {
  color: var(--blanco);
  background-size: 100% 1px;
}
.pie__web {
  margin-top: 48px;
  font-weight: 900;
  /* el texto mide unas 10 veces su cuerpo: así llena el ancho sin salirse */
  font-size: min(calc((100vw - 2 * var(--margen)) / 10.5), calc(var(--ancho) / 10.3));
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  color: #262626;
  user-select: none;
}
.pie__legal {
  margin-top: 28px;
  color: #8f8f8f;
  font-size: 0.8125rem;
}

/* ---------- Barra fija de suscripción (solo móvil) ---------- */
.barra-movil {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 25;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.94);
  border-top: 1px solid var(--sombra);
  transform: translateY(110%);
  transition: transform 0.35s var(--curva);
}
.barra-movil[data-visible="si"] {
  transform: none;
}
.barra-movil a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  background: var(--dorado);
  color: var(--negro);
  font-weight: 900;
  font-size: 1.0625rem;
  text-decoration: none;
}
.barra-movil svg {
  width: 24px;
  height: 24px;
}
@media (min-width: 900px) {
  .barra-movil {
    display: none;
  }
}

/* ---------- Migas (dónde estás) ---------- */
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--gris);
  font-size: 0.875rem;
}
.migas li + li::before {
  content: "›";
  margin-right: 6px;
  color: #666;
}
.migas a {
  text-decoration: none;
}
.migas a:hover,
.migas a:focus-visible {
  color: var(--blanco);
  text-decoration: underline;
}

/* ---------- Lista de todos los episodios ---------- */
.listado {
  padding-top: 120px;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.listado__titulo {
  margin-top: 24px;
  font-weight: 900;
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.listado__indice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.listado__indice a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--filete);
  color: #e6e6e6;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition:
    border-color 0.25s,
    color 0.25s;
}
.listado__indice a:hover,
.listado__indice a:focus-visible {
  border-color: var(--dorado);
  color: var(--dorado);
}
.serie {
  margin-top: clamp(56px, 7vw, 88px);
  scroll-margin-top: 96px;
}
.serie__cabeza {
  padding-bottom: 18px;
  border-bottom: 2px solid var(--dorado);
}
.serie__nombre {
  font-weight: 900;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.serie__detalle {
  margin-top: 8px;
  color: var(--gris);
}
.serie__playlist {
  margin-left: 6px;
  color: var(--dorado);
  font-weight: 700;
  text-underline-offset: 4px;
}
.rejilla-episodios {
  display: grid;
  gap: 28px 24px;
  margin-top: 28px;
}
@media (min-width: 600px) {
  .rejilla-episodios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .rejilla-episodios {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ficha-mini {
  display: block;
  color: var(--blanco);
  text-decoration: none;
}
.ficha-mini__imagen {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
}
.ficha-mini__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--curva);
}
.ficha-mini:hover .ficha-mini__imagen img,
.ficha-mini:focus-visible .ficha-mini__imagen img {
  transform: scale(1.04);
}
.ficha-mini__titulo {
  margin: 14px 0 0;
  font-weight: 900;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  transition: color 0.25s;
}
.ficha-mini:hover .ficha-mini__titulo,
.ficha-mini:focus-visible .ficha-mini__titulo {
  color: var(--dorado);
}
.ficha-mini__datos {
  display: block;
  margin-top: 6px;
  color: var(--gris);
  font-size: 0.9375rem;
}

/* ---------- Página de un episodio ---------- */
.ficha {
  padding-top: 112px;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.ficha__rejilla {
  display: grid;
  gap: 28px;
  margin-top: 24px;
}
@media (min-width: 900px) {
  .ficha__rejilla {
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    align-items: center;
  }
}
.ficha__video {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
}
.ficha__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--curva);
}
.ficha__video:hover img,
.ficha__video:focus-visible img {
  transform: scale(1.03);
}
.ficha__video .episodio__play {
  transition: transform 0.3s var(--curva);
}
.ficha__video:hover .episodio__play {
  transform: scale(1.08);
}
.ficha__serie {
  color: var(--dorado);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ficha__titulo {
  margin-top: 12px;
  font-weight: 900;
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ficha__datos {
  margin-top: 14px;
  color: var(--gris);
}
.ficha__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 26px;
}
.ficha__subtitulo {
  font-weight: 900;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.ficha__resumen {
  max-width: 70ch;
  margin-top: clamp(48px, 6vw, 80px);
}
.ficha__resumen p {
  margin-top: 16px;
  color: #e3e3e3;
  font-size: 1.125rem;
  line-height: 1.65;
}
.ficha__capitulos {
  margin-top: clamp(48px, 6vw, 72px);
}
.ficha__ayuda {
  margin-top: 8px;
  color: var(--gris);
  font-size: 0.9375rem;
}
.ficha__capitulos ol {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filete);
}
@media (min-width: 900px) {
  .ficha__capitulos ol {
    columns: 2;
    column-gap: 48px;
  }
}
.ficha__capitulos li {
  break-inside: avoid;
  border-bottom: 1px solid var(--filete);
}
.capitulo {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  color: #e6e6e6;
  text-decoration: none;
}
.capitulo__tiempo {
  color: var(--dorado);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.capitulo:hover .capitulo__texto,
.capitulo:focus-visible .capitulo__texto {
  color: var(--blanco);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.relacionados {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid #161616;
}

/* ---------- 404 ---------- */
.aviso-pagina {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 100svh;
  padding: 24px;
  text-align: center;
}
.aviso-pagina img {
  width: 160px;
  margin-bottom: 16px;
}
.aviso-pagina h1 {
  font-weight: 900;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  letter-spacing: -0.02em;
}
.aviso-pagina p {
  max-width: 40ch;
  color: var(--gris);
}
.aviso-pagina a {
  margin-top: 8px;
  color: var(--dorado);
  font-weight: 700;
  text-underline-offset: 6px;
}

/* =====================================================================================================
   MÓVIL Y TABLETA EN VERTICAL. Plan con las medidas: web/PLAN_MOVIL.md.
   La computadora (900 px o más) no lee nada de este bloque: se ve igual que antes.
   ===================================================================================================== */

@keyframes subir {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
}
@keyframes subir-palabra {
  from {
    opacity: 0;
    transform: translate3d(0, 0.5em, 0) rotate(3deg);
    filter: blur(6px);
  }
}
@keyframes aparecer {
  from {
    opacity: 0;
  }
}
@keyframes persiana {
  from {
    clip-path: inset(0 0 100% 0);
  }
}
@keyframes caer-luz {
  from {
    --haz: 0%;
  }
}
@keyframes parpadeo {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  16% {
    opacity: 0.15;
  }
  28% {
    opacity: 1;
  }
  34% {
    opacity: 0.4;
  }
  46%,
  100% {
    opacity: 1;
  }
}
@keyframes respirar {
  to {
    opacity: 0.18;
  }
}
@keyframes polvo {
  50% {
    transform: translate3d(8px, -25%, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
}
@keyframes brillo {
  0% {
    transform: translateX(-160%) skewX(-20deg);
  }
  22%,
  100% {
    transform: translateX(380%) skewX(-20deg);
  }
}
@keyframes flecha-baja {
  50% {
    transform: translateY(5px);
  }
}
@keyframes asomar {
  45% {
    transform: translateX(-48px);
  }
}
@keyframes girar {
  to {
    --giro: 360deg;
  }
}
@keyframes hablar {
  from {
    transform: scaleY(0.18);
  }
}
@keyframes latir {
  from {
    opacity: 0.8;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3.2);
  }
}
@keyframes cursor {
  50% {
    opacity: 0;
  }
}

/* Piezas que solo existen en el móvil. */
.menu-boton,
.menu,
.encabezado__progreso,
.episodio__puesto,
.temas__barra,
.portada__polvo,
.portada__escena,
.portada__citas,
.historia__marca {
  display: none;
}

/* ---------- Encabezado y menú (hasta 959 px, donde no cabe el menú de la computadora) ---------- */
@media (max-width: 959px) {
  .suscribir-visor {
    display: none;
  }
  .menu-boton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin-right: -10px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--blanco);
    font: 700 0.9375rem/1 "Inter", system-ui, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-boton__rayas {
    position: relative;
    width: 22px;
    height: 12px;
  }
  .menu-boton__rayas::before,
  .menu-boton__rayas::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    transition:
      transform 0.35s var(--curva),
      top 0.35s var(--curva);
  }
  .menu-boton__rayas::before {
    top: 0;
  }
  .menu-boton__rayas::after {
    top: 10px;
  }
  .menu-boton[aria-expanded="true"] .menu-boton__rayas::before {
    top: 5px;
    transform: rotate(45deg);
  }
  .menu-boton[aria-expanded="true"] .menu-boton__rayas::after {
    top: 5px;
    transform: rotate(-45deg);
  }
  .menu-boton[aria-expanded="true"] {
    color: var(--dorado);
  }

  .menu {
    position: fixed;
    inset: 0;
    z-index: 29;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(var(--alto-cabecera) + 16px) 0 calc(32px + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(ellipse 90% 45% at 50% 0%, rgba(254, 189, 91, 0.14) 0%, rgba(254, 189, 91, 0) 70%),
      var(--negro);
    animation: persiana 0.5s var(--curva);
  }
  .menu__lista li {
    border-bottom: 1px solid var(--filete);
    animation: subir 0.5s var(--curva) backwards;
  }
  .menu__lista li:nth-child(1) {
    animation-delay: 0.1s;
  }
  .menu__lista li:nth-child(2) {
    animation-delay: 0.16s;
  }
  .menu__lista li:nth-child(3) {
    animation-delay: 0.22s;
  }
  .menu__lista li:nth-child(4) {
    animation-delay: 0.28s;
  }
  .menu__lista li:nth-child(5) {
    animation-delay: 0.34s;
  }
  .menu__lista a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    font-weight: 900;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-decoration: none;
    transition: color 0.2s;
  }
  .menu__lista a span {
    min-width: 22px;
    color: var(--dorado);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
  }
  .menu__lista a:active {
    color: var(--dorado);
  }
  .menu__pie {
    display: grid;
    gap: 20px;
    margin-top: 32px;
    animation: subir 0.5s var(--curva) 0.42s backwards;
  }
  .menu__redes {
    display: flex;
    gap: 10px;
  }
  .menu__redes a {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--filete);
    color: var(--blanco);
    transition:
      border-color 0.2s,
      color 0.2s;
  }
  .menu__redes a:active {
    border-color: var(--dorado);
    color: var(--dorado);
  }
  .menu__redes svg {
    width: 22px;
    height: 22px;
  }
  html.menu-abierto {
    overflow: hidden;
  }
  html.menu-abierto .encabezado {
    background: var(--negro);
    border-bottom-color: var(--sombra);
  }
}

@media (max-width: 899px) {
  html {
    scroll-padding-top: 76px;
  }
  body {
    -webkit-tap-highlight-color: transparent;
  }

  /* ---------- Encabezado: 60 px y la línea de lo leído ---------- */
  .encabezado__fila {
    height: var(--alto-cabecera);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
  }
  .encabezado__logo {
    padding: 5px 0;
  }
  .encabezado__logo img {
    height: 34px;
  }
  .encabezado__progreso {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    display: block;
    height: 2px;
    background: var(--dorado);
    transform: scaleX(var(--leido, 0));
    transform-origin: 0 50%;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .encabezado[data-solido="si"] .encabezado__progreso {
    opacity: 1;
  }

  /* ---------- Portada: título arriba, micrófonos libres en el medio, botón abajo ---------- */
  .portada {
    align-items: stretch;
    min-height: 560px;
    animation: none;
  }
  .portada__capa {
    transform: translate3d(0, calc(var(--p, 0) * 28%), 0);
  }
  .portada__capa img {
    object-position: center 45%;
  }
  /* El foco parpadea, se enciende y la luz cae de arriba a la mesa. Luego respira. */
  .portada__luz {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--haz) - 30%), transparent var(--haz));
    mask-image: linear-gradient(to bottom, #000 calc(var(--haz) - 30%), transparent var(--haz));
    animation:
      caer-luz 1.7s cubic-bezier(0.45, 0, 0.2, 1) 0.3s backwards,
      parpadeo 0.7s linear 0.3s backwards;
  }
  /* La luz respira con una sombra encima (bajar la opacidad de la foto dejaría ver la oscura, que no calza exacta). */
  .portada__luz::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--negro);
    opacity: 0;
    animation: respirar 4.5s ease-in-out 2.4s infinite alternate;
  }
  /* Polvo flotando dentro del haz de luz. */
  .portada__polvo {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 30% 50% at 50% 38%, #000 25%, transparent 100%);
    mask-image: radial-gradient(ellipse 30% 50% at 50% 38%, #000 25%, transparent 100%);
    animation: aparecer 2s ease 1.4s backwards;
  }
  .portada__polvo::before,
  .portada__polvo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200%;
    background-repeat: repeat-y;
    background-size: 100% 50%;
    animation: polvo 26s linear infinite;
  }
  .portada__polvo::before {
    background-image:
      radial-gradient(1.4px 1.4px at 44% 8%, rgba(255, 228, 180, 0.9), transparent),
      radial-gradient(1px 1px at 53% 17%, rgba(255, 228, 180, 0.8), transparent),
      radial-gradient(1.6px 1.6px at 47% 29%, rgba(255, 228, 180, 0.7), transparent),
      radial-gradient(1px 1px at 57% 38%, rgba(255, 228, 180, 0.9), transparent),
      radial-gradient(1.3px 1.3px at 41% 47%, rgba(255, 228, 180, 0.8), transparent),
      radial-gradient(1px 1px at 51% 58%, rgba(255, 228, 180, 0.7), transparent),
      radial-gradient(1.5px 1.5px at 60% 66%, rgba(255, 228, 180, 0.8), transparent),
      radial-gradient(1px 1px at 45% 77%, rgba(255, 228, 180, 0.9), transparent),
      radial-gradient(1.2px 1.2px at 54% 88%, rgba(255, 228, 180, 0.7), transparent);
  }
  .portada__polvo::after {
    background-image:
      radial-gradient(2px 2px at 49% 12%, rgba(255, 220, 160, 0.45), transparent),
      radial-gradient(2.4px 2.4px at 58% 34%, rgba(255, 220, 160, 0.35), transparent),
      radial-gradient(2px 2px at 42% 55%, rgba(255, 220, 160, 0.4), transparent),
      radial-gradient(2.6px 2.6px at 55% 81%, rgba(255, 220, 160, 0.35), transparent);
    animation-duration: 40s;
    animation-direction: reverse;
  }
  .portada__velo {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 18%, rgba(0, 0, 0, 0) 36%),
      linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0) 44%);
  }
  .portada__texto {
    justify-content: flex-start;
    padding-top: calc(var(--alto-cabecera) + 28px);
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    opacity: calc(1 - var(--p, 0) * 1.5);
    transform: translate3d(0, calc(var(--p, 0) * -56px), 0);
  }
  .portada__aviso,
  .portada__antetitulo {
    animation: subir 0.7s var(--curva) 0.55s backwards;
  }
  .portada__aviso {
    font-size: 0.8125rem;
  }
  .portada__antetitulo {
    margin-bottom: 14px;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
  }
  .portada__titulo {
    font-size: clamp(2.5rem, 1rem + 7vw, 3.25rem);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
  }
  .portada__titulo .palabra {
    display: inline-block;
    animation: subir-palabra 0.8s var(--curva) backwards;
  }
  .portada__titulo .palabra:nth-child(2) {
    animation-delay: 0.7s;
  }
  .portada__titulo .palabra:nth-child(3) {
    animation-delay: 0.78s;
  }
  .portada__titulo .palabra:nth-child(4) {
    animation-delay: 0.86s;
  }
  .portada__titulo .palabra:nth-child(5) {
    animation-delay: 0.94s;
  }
  .portada__titulo .palabra:nth-child(6) {
    animation-delay: 1.02s;
  }
  .portada__bajada {
    margin-top: auto;
    padding-top: 24px;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.5;
    text-wrap: balance;
    animation: subir 0.7s var(--curva) 1.1s backwards;
  }
  .portada__acciones {
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 440px;
    margin-top: 22px;
    animation: subir 0.7s var(--curva) 1.3s backwards;
  }
  .empieza-flecha {
    padding: 10px 4px;
  }
  .empieza-flecha span {
    animation: flecha-baja 1.6s ease-in-out 2.6s infinite;
  }

  /* Frases de los invitados, dentro del haz de luz. web.js las escribe una detrás de otra;
     sin JavaScript se queda la primera, entera. */
  .portada__citas {
    display: block;
    width: 100%;
    max-width: 330px;
    min-height: 84px;
    margin-top: clamp(20px, 5.5svh, 56px);
    animation: subir 0.7s var(--curva) 1.25s backwards;
  }
  .portada__citas li + li,
  .portada__citas[data-girando] li {
    display: none;
  }
  .portada__citas[data-girando] li[data-activa="si"] {
    display: block;
    transition:
      opacity 0.35s,
      transform 0.35s var(--curva);
  }
  .portada__citas li[data-saliendo] {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  .cita {
    display: block;
    color: var(--blanco);
    text-decoration: none;
  }
  .cita__frase {
    display: block;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
  }
  .cita__frase::before,
  .cita__frase::after {
    color: var(--dorado);
    font-weight: 900;
  }
  .cita__frase::before {
    content: "«";
  }
  .cita__frase::after {
    content: "»";
  }
  /* Lo que falta por escribir ocupa su sitio, invisible: así las líneas no bailan mientras se escribe. */
  /* El cursor es una sombra interior: no ocupa sitio ni corta palabras. */
  .cita__resto {
    color: transparent;
    text-shadow: none;
    box-shadow: inset 2px 0 0 var(--dorado);
    animation: cursor 0.8s steps(1) infinite;
  }
  .portada__citas li[data-escribiendo] .cita__frase::after {
    color: transparent;
  }
  .cita__quien {
    display: block;
    margin-top: 10px;
    color: var(--dorado);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .cita__quien span {
    color: rgba(255, 255, 255, 0.78);
  }
  .cita:active .cita__frase {
    color: var(--dorado-claro);
  }
  @media (max-height: 640px) {
    .portada__citas {
      display: none;
    }
  }

  /* La voz entre los dos micrófonos: una onda dorada que «habla» mientras se escribe cada frase.
     La caja copia el encuadre de la foto (cubrir, centrada al 45 %) para que la onda caiga siempre entre los micros. */
  .portada__escena {
    z-index: -2;
    display: block;
    pointer-events: none;
  }
  .portada__caja {
    position: absolute;
    top: 45%;
    left: 50%;
    height: max(100%, 179.17vw);
    aspect-ratio: 1536 / 2752;
    transform: translate(-50%, -45%);
  }
  .portada__onda {
    position: absolute;
    top: 54.5%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 2px;
    width: 10%;
    height: 4.6%;
    transform: translate(-50%, -50%) scaleY(var(--voz, 0.35));
    transition: transform 0.5s var(--curva);
    animation: aparecer 1s ease 1.6s backwards;
  }
  .portada[data-voz="si"] .portada__onda {
    --voz: 1;
  }
  .portada__onda span {
    flex: 1;
    height: 100%;
    border-radius: 2px;
    background: var(--dorado);
    box-shadow: 0 0 10px rgba(254, 189, 91, 0.75);
    animation: hablar 0.62s ease-in-out infinite alternate;
  }
  .portada__onda span:nth-child(1),
  .portada__onda span:nth-child(9) {
    height: 35%;
    animation-duration: 0.7s;
  }
  .portada__onda span:nth-child(2),
  .portada__onda span:nth-child(8) {
    height: 60%;
    animation-duration: 0.48s;
    animation-delay: -0.2s;
  }
  .portada__onda span:nth-child(3),
  .portada__onda span:nth-child(7) {
    height: 85%;
    animation-duration: 0.56s;
    animation-delay: -0.35s;
  }
  .portada__onda span:nth-child(4),
  .portada__onda span:nth-child(6) {
    animation-duration: 0.44s;
    animation-delay: -0.1s;
  }
  .portada__onda span:nth-child(5) {
    animation-duration: 0.66s;
    animation-delay: -0.4s;
  }
  @media (orientation: landscape) {
    .portada__escena {
      display: none;
    }
  }

  /* El botón dorado: ancho completo y un brillo que lo cruza cada 6 s. */
  .suscribir-oro,
  .suscribir-barra,
  .barra-movil a {
    position: relative;
    overflow: hidden;
  }
  .suscribir-oro::after,
  .suscribir-barra::after,
  .barra-movil a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    transform: translateX(-160%) skewX(-20deg);
    animation: brillo 6s ease-in-out 2.2s infinite;
    pointer-events: none;
  }
  .suscribir-oro {
    width: 100%;
    min-height: 56px;
  }
  .suscribir-oro:active,
  .suscribir-barra:active,
  .barra-movil a:active {
    transform: scale(0.97);
  }

  /* ---------- Cifras ---------- */
  .cifras__lista li {
    padding-top: 24px;
    padding-bottom: 22px;
  }
  .cifras__numero {
    font-size: 2.5rem;
    font-variant-numeric: tabular-nums;
  }
  .cifras__texto {
    font-size: 0.875rem;
  }

  /* ---------- Títulos de sección ---------- */
  .titulo-seccion {
    font-size: 2.125rem;
    line-height: 1.05;
  }
  .texto-seccion {
    margin-top: 14px;
  }

  /* ---------- Empieza por aquí ---------- */
  .empieza {
    padding-top: 80px;
    padding-bottom: 72px;
  }
  .empieza__cabeza {
    margin-bottom: 32px;
  }
  .empieza__rejilla {
    gap: 28px;
  }
  .empieza__pila {
    gap: 0;
    border-top: 1px solid var(--filete);
  }
  .episodio {
    transition: transform 0.2s var(--curva);
  }
  .episodio:active {
    transform: scale(0.98);
  }
  .episodio__numero {
    display: none;
  }
  .episodio__puesto {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--dorado);
    color: var(--negro);
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1;
  }
  .episodio--grande .episodio__texto {
    padding-top: 16px;
  }
  .episodio--grande .episodio__titulo {
    font-size: 1.5rem;
    line-height: 1.12;
  }
  .episodio--fila {
    grid-template-columns: 136px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--filete);
  }
  .episodio--fila .episodio__puesto {
    width: 28px;
    height: 28px;
    font-size: 0.9375rem;
  }
  .episodio--fila .episodio__titulo {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.25;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .episodio--fila .episodio__datos {
    margin-top: 6px;
    font-size: 0.8125rem;
    line-height: 1.4;
  }
  .todos-hilo {
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin-top: 32px;
    border: 1px solid #3a3a3a;
    transition:
      border-color 0.2s,
      transform 0.2s var(--curva);
  }
  .todos-hilo::after {
    width: 24px;
  }
  .todos-hilo:active {
    border-color: var(--dorado);
    transform: scale(0.98);
  }

  /* ---------- La promesa: línea de tiempo 01, 02, 03 que se dibuja al bajar ---------- */
  .promesa {
    padding-top: 80px;
    padding-bottom: 64px;
  }
  .promesa__frase {
    font-size: 1.875rem;
    line-height: 1.12;
  }
  .promesa__lista {
    position: relative;
    gap: 32px;
    margin-top: 40px;
    counter-reset: paso;
  }
  .promesa__lista::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 19px;
    width: 2px;
    background: var(--dorado);
    transform: scaleY(var(--trazo, 1));
    transform-origin: 50% 0;
  }
  .promesa__lista li {
    position: relative;
    min-height: 40px;
    padding: 8px 0 0 60px;
    border-top: 0;
  }
  .promesa__lista li::before {
    counter-increment: paso;
    content: "0" counter(paso);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--dorado);
    background: var(--negro);
    color: var(--dorado);
    font-weight: 900;
    font-size: 0.875rem;
    transition:
      background-color 0.4s,
      color 0.4s;
  }
  .promesa__lista li[data-paso="si"]::before {
    background: var(--dorado);
    color: var(--negro);
  }

  /* ---------- Elige por tema: carrusel con barra de avance ---------- */
  .temas {
    padding: 72px 0 64px;
  }
  .temas__carril {
    gap: 12px;
    padding: 32px var(--margen) 20px;
    scrollbar-width: none;
  }
  .temas__carril::-webkit-scrollbar {
    display: none;
  }
  .temas__carril li {
    width: min(80vw, 320px);
  }
  .temas__carril[data-asoma] li {
    animation: asomar 1.2s var(--curva);
  }
  .poster {
    min-height: 0;
    transition:
      border-color 0.2s,
      transform 0.2s var(--curva);
  }
  .poster:active {
    border-color: var(--dorado);
    transform: scale(0.98);
  }
  .poster__nombre {
    margin-top: 0;
    padding: 18px 16px 0;
    font-size: 1.5rem;
  }
  .poster__detalle {
    padding: 6px 16px 18px;
    font-size: 0.875rem;
  }
  .poster__detalle::after {
    content: "Ver la serie →";
    display: block;
    margin-top: 14px;
    color: var(--dorado);
    font-weight: 700;
    font-size: 0.9375rem;
  }
  .temas__barra {
    display: block;
    height: 2px;
    margin: 0 var(--margen);
    background: var(--filete);
  }
  .temas__barra span {
    display: block;
    height: 100%;
    background: var(--dorado);
    transform: scaleX(var(--avance, 0.3));
    transform-origin: 0 50%;
    transition: transform 0.15s linear;
  }

  /* ---------- Míralo o escúchalo: YouTube grande y el resto en mosaico ---------- */
  .plataformas {
    gap: 0;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .plataformas__foto {
    display: none;
  }
  .plataformas__lista ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
    border-top: 0;
  }
  .plataformas__lista li:first-child,
  .plataformas__lista li:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
  .fila {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "marca flecha"
      "rotulo rotulo"
      "detalle detalle";
    align-items: start;
    height: 100%;
    min-height: 132px;
    padding: 16px;
    border: 1px solid var(--filete);
    background: var(--carbon);
    transition:
      border-color 0.2s,
      transform 0.2s var(--curva);
  }
  .fila:active {
    border-color: var(--dorado);
    transform: scale(0.97);
  }
  .fila__marca {
    width: 26px;
    height: 26px;
    color: var(--dorado);
  }
  .fila__rotulo {
    height: auto;
    margin-top: 18px;
    overflow: visible;
    font-size: 1.25rem;
    line-height: 1.15;
  }
  .fila__nombre {
    white-space: normal;
  }
  .fila__abrir {
    display: none;
  }
  .fila:hover .fila__nombre,
  .fila:focus-visible .fila__nombre {
    transform: none;
  }
  .fila__detalle {
    margin-top: 4px;
    font-size: 0.8125rem;
    line-height: 1.35;
  }
  .fila__flecha,
  .fila:hover .fila__flecha,
  .fila:focus-visible .fila__flecha {
    font-size: 1.125rem;
    line-height: 1;
    transform: rotate(-45deg);
  }
  .plataformas__lista li:first-child .fila {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "marca rotulo flecha"
      "marca detalle flecha";
    column-gap: 14px;
    align-items: center;
    min-height: 0;
    padding: 20px 18px;
    border-color: var(--dorado);
    background: var(--dorado);
    color: var(--negro);
  }
  .plataformas__lista li:first-child .fila__marca {
    width: 34px;
    height: 34px;
    color: var(--negro);
  }
  .plataformas__lista li:first-child .fila__rotulo {
    margin-top: 0;
    font-size: 1.625rem;
  }
  .plataformas__lista li:first-child .fila__detalle,
  .plataformas__lista li:first-child .fila__flecha {
    color: rgba(0, 0, 0, 0.72);
  }

  /* ---------- Tu historia: el título arriba, en la oscuridad, y la silla vacía señalada ---------- */
  .historia {
    border-top: 0;
  }
  .historia__foto {
    overflow: hidden;
  }
  .historia__foto img {
    aspect-ratio: 4 / 5;
    object-position: 66% center;
    transition: transform 2.6s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .historia__foto[data-aparece="no"] img {
    transform: scale(1.14);
  }
  .historia__foto::after {
    background:
      linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 16%),
      linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 16%, rgba(0, 0, 0, 0) 34%);
  }
  /* «Este es tu lugar» ——— ● sobre el respaldo de la silla. La línea se dibuja al aparecer y el punto late. */
  .historia__marca {
    position: absolute;
    z-index: 1;
    top: calc(57% - 20px);
    left: var(--margen);
    display: flex;
    align-items: center;
    width: calc(66% - var(--margen));
    height: 40px;
    clip-path: inset(-20px -40px -20px 0);
    transition: clip-path 1.1s var(--curva) 0.7s;
  }
  .historia__foto[data-aparece="no"] .historia__marca {
    clip-path: inset(-20px 100% -20px 0);
  }
  .historia__etiqueta {
    flex: none;
    padding: 6px 9px;
    background: var(--dorado);
    color: var(--negro);
    font-weight: 900;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .historia__linea {
    flex: 1;
    height: 0;
    border-top: 2px dashed var(--dorado);
  }
  .historia__punto {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    margin-right: -7px;
    border-radius: 50%;
    background: var(--dorado);
    box-shadow: 0 0 14px rgba(254, 189, 91, 0.9);
  }
  .historia__punto::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--dorado);
    animation: latir 1.8s ease-out 2s infinite;
  }
  .historia__texto {
    position: static;
    margin-top: -64px;
    padding-top: 0;
    padding-bottom: 80px;
  }
  .historia__texto > .titulo-seccion {
    position: absolute;
    z-index: 1;
    top: 36px;
    left: var(--margen);
    max-width: 68%;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
  }
  .historia__texto > .texto-seccion {
    margin-top: 0;
  }
  .historia__texto > .texto-seccion,
  .historia__texto > .entrada {
    position: relative;
    z-index: 1;
  }
  .entrada {
    display: flex;
    width: 100%;
    margin-top: 28px;
    font-size: 1.1875rem;
  }
  .entrada__cuerpo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 16px 0 24px;
  }
  .entrada__resguardo {
    padding: 0 22px 0 18px;
  }
  .entrada:active .entrada__resguardo {
    transform: translateX(6px) rotate(5deg);
  }

  /* ---------- Patrocinios: una luz recorre el borde ---------- */
  .marcas {
    padding-top: 0;
  }
  .marcas__marco {
    position: relative;
    gap: 24px;
    padding: 28px 22px;
    border-color: rgba(254, 189, 91, 0.22);
  }
  .marcas__marco::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    background: conic-gradient(
      from var(--giro),
      rgba(254, 189, 91, 0) 0%,
      rgba(254, 189, 91, 0) 62%,
      var(--dorado) 82%,
      rgba(254, 189, 91, 0) 100%
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: girar 6s linear infinite;
    pointer-events: none;
  }
  .marcas__titulo {
    font-size: 1.875rem;
  }
  .burbuja {
    gap: 10px;
    width: 100%;
    padding: 0 16px;
    font-size: 1rem;
    white-space: nowrap;
  }
  .burbuja:active {
    border-color: var(--dorado);
    background: var(--dorado);
    color: var(--negro);
  }

  /* ---------- Qué es y preguntas: se abren con suavidad ---------- */
  .preguntas {
    gap: 32px;
    padding-top: 80px;
    padding-bottom: 80px;
    interpolate-size: allow-keywords;
  }
  .preguntas__lead {
    margin-top: 16px;
    font-size: 1.0625rem;
    line-height: 1.6;
  }
  .pregunta summary {
    min-height: 56px;
    padding: 16px 0;
  }
  .pregunta h3 {
    font-size: 1.0625rem;
  }
  .pregunta::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 0.4s var(--curva),
      content-visibility 0.4s allow-discrete;
  }
  .pregunta[open]::details-content {
    block-size: auto;
  }
  .pregunta[open] p {
    animation: subir 0.45s var(--curva);
  }

  /* ---------- Cierre ---------- */
  .cierre {
    padding: 96px 0 104px;
  }
  .cierre__foto img {
    object-position: 78% center;
  }
  .suscribir-barra {
    justify-content: center;
    width: 100%;
    margin-top: 32px;
    padding: 0 20px;
    font-size: 1.125rem;
  }
  .suscribir-barra__flecha {
    margin-left: 6px;
  }
  .cierre__otra {
    text-align: center;
  }
  .cierre__otra a {
    display: inline-block;
    padding: 10px 0;
  }

  /* ---------- Pie: enlaces en dos columnas ---------- */
  .pie__fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .pie__fila nav {
    width: 100%;
  }
  .pie__enlaces {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }
  .pie__enlaces a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .pie__web {
    margin-top: 40px;
  }

  /* ---------- Barra fija de abajo: flotando y más fina ---------- */
  .barra-movil {
    inset: auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
    padding: 0;
    border-top: 0;
    background: none;
    transform: translateY(calc(100% + 40px));
    transition: transform 0.45s var(--curva);
  }
  .barra-movil a {
    min-height: 54px;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.75),
      0 0 0 1px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s var(--curva);
  }
  .barra-movil a::after {
    animation-duration: 7s;
  }
  html.menu-abierto .barra-movil {
    transform: translateY(calc(100% + 40px));
  }

  /* ---------- Lista de episodios: temas pegados arriba y filas compactas ---------- */
  .listado {
    padding-top: calc(var(--alto-cabecera) + 32px);
  }
  .listado__titulo {
    font-size: 2.5rem;
  }
  .listado__indice {
    position: sticky;
    top: var(--alto-cabecera);
    z-index: 20;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 24px calc(-1 * var(--margen)) 0;
    padding: 12px var(--margen);
    overflow-x: auto;
    border-bottom: 1px solid #161616;
    background: var(--negro);
    scrollbar-width: none;
  }
  .listado__indice::-webkit-scrollbar {
    display: none;
  }
  .listado__indice li {
    flex: none;
  }
  .listado__indice a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    white-space: nowrap;
    transition:
      background-color 0.25s,
      border-color 0.25s,
      color 0.25s;
  }
  .listado__indice a[aria-current="true"] {
    border-color: var(--dorado);
    background: var(--dorado);
    color: var(--negro);
  }
  .serie {
    margin-top: 56px;
    scroll-margin-top: calc(var(--alto-cabecera) + 76px);
  }
  .serie__nombre {
    font-size: 1.75rem;
  }
  .listado .rejilla-episodios {
    gap: 0;
    margin-top: 8px;
  }
  .listado .ficha-mini {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #161616;
    transition: transform 0.2s var(--curva);
  }
  .listado .ficha-mini:active {
    transform: scale(0.98);
  }
  .listado .ficha-mini__imagen {
    grid-row: span 2;
  }
  .listado .ficha-mini__titulo {
    display: -webkit-box;
    grid-column: 2;
    margin: 0;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.25;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .listado .ficha-mini__datos {
    grid-column: 2;
    margin-top: 6px;
    font-size: 0.8125rem;
  }

  /* ---------- Página de un episodio ---------- */
  .ficha {
    padding-top: calc(var(--alto-cabecera) + 20px);
  }
  .migas ol {
    font-size: 0.8125rem;
  }
  .ficha__rejilla {
    gap: 22px;
    margin-top: 16px;
  }
  .ficha__video {
    margin: 0 calc(-1 * var(--margen));
  }
  .ficha__titulo {
    font-size: 1.875rem;
  }
  .ficha__acciones {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: center;
  }
  .ficha__acciones .empieza-flecha {
    justify-content: center;
  }
  .ficha__resumen {
    margin-top: 48px;
  }
  .ficha__resumen p {
    font-size: 1.0625rem;
  }
  .capitulo {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    padding: 12px 0;
    transition: background-color 0.2s;
  }
  .capitulo:active {
    background: #111;
  }
  .capitulo__tiempo {
    justify-self: start;
    padding: 2px 7px;
    background: rgba(254, 189, 91, 0.12);
    font-size: 0.875rem;
  }
  .relacionados .rejilla-episodios {
    display: flex;
    gap: 14px;
    margin: 24px calc(-1 * var(--margen)) 0;
    padding: 0 var(--margen) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--margen);
    scrollbar-width: none;
  }
  .relacionados .rejilla-episodios::-webkit-scrollbar {
    display: none;
  }
  .relacionados .rejilla-episodios li {
    flex: none;
    width: min(78vw, 320px);
    scroll-snap-align: start;
  }

  /* ---------- Aparecer al bajar (lo pone web.js, solo a lo que aún no se ve) ---------- */
  [data-aparece] {
    transition:
      opacity 0.8s var(--curva),
      transform 0.8s var(--curva) !important;
  }
  [data-aparece="no"] {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }
}

/* ---------- Movimiento reducido: la luz fija y nada se mueve ---------- */
@media (prefers-reduced-motion: reduce) {
  .portada {
    animation: none;
  }
  .portada__luz {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .portada__polvo {
    display: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}