/* ==========================================================================
   FOMO · EPISODIOS
   Se carga solo en /episodios/, después de fomo.css (mismos tokens y texturas).
   Cinco fiestas, cinco recursos propios:
     01 calendario de diciembre tachado + confeti
     02 muro de carteles + vinilo + "27" gigante
     03 photocall + alfombra roja + cinta de inauguración
     04 portada de revista + páginas interiores
     05 lunares + abanico + final protegido (sin spoilers)
   ========================================================================== */

/* 0. PIEZAS COMUNES ------------------------------------------------------- */
.eps { overflow-x: clip; }
.dd { display: block; overflow: visible; color: var(--yellow); }
.dd path { stroke-width: 4px; }

.ph { position: relative; margin: 0; }
.ph img { width: 100%; height: auto; display: block; }
.ph:not(.print):not(.polaroid):not(.poster) img { box-shadow: var(--shadow-print); }
.ph.print, .ph.polaroid { background: var(--paper); padding: 6px; box-shadow: var(--shadow-print); }
.ph.polaroid { padding-bottom: 38px; }
.ph .tape { top: -12px; left: 32%; }
.ph figcaption {
  position: absolute; z-index: 3;
  font-size: 26px; line-height: 1; white-space: nowrap;
  text-shadow: 0 2px 10px rgba(6, 52, 92, .8);
  pointer-events: none;
}
.ph.polaroid figcaption { left: 10px; bottom: 6px; color: var(--ink); text-shadow: none; }

.ep { position: relative; padding: 90px var(--gutter) 40px; max-width: 1240px; margin: 0 auto; }
.ep__title { margin: 0; position: relative; z-index: 4; font-size: clamp(44px, 13vw, 120px); line-height: .88; }
.ep__n {
  display: block;
  font-size: 2.1em; line-height: .78;
  color: transparent;
  -webkit-text-stroke: 2px var(--yellow);
  letter-spacing: -.02em;
}
.ep__dot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ep__t { display: block; margin-top: -.18em; }
.ep__syn {
  position: relative; z-index: 4;
  margin: 24px 0 0;
  max-width: 34em;
  font-size: clamp(18px, 4.8vw, 22px);
  line-height: 1.45;
  font-weight: 600;
}

/* 1. CABECERA E ÍNDICE ----------------------------------------------------- */
.eps-intro { padding: calc(var(--head-h) + 30px) var(--gutter) 10px; max-width: 1240px; margin: 0 auto; }
.eps-intro__kicker { margin: 0; font-size: 30px; rotate: -3deg; }
.eps-intro__title { margin: 6px 0 0; font-size: clamp(80px, 25vw, 240px); line-height: .84; }
.eps-intro__title span { display: block; white-space: nowrap; }
.eps-intro__sub { margin: 12px 0 0; font-size: clamp(22px, 6.4vw, 40px); color: var(--yellow); }
.eps-index ol { list-style: none; margin: 30px 0 0; padding: 0; display: flex; justify-content: space-between; gap: 6px; }
.eps-index a {
  position: relative; display: grid; place-items: center;
  width: clamp(56px, 16vw, 130px); aspect-ratio: 1.3;
  text-decoration: none;
}
.idx__n { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-size: clamp(30px, 9vw, 72px); line-height: 1; }
.idx__c { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .2s; }
.eps-index li:nth-child(odd) a { rotate: -4deg; }
.eps-index li:nth-child(even) a { rotate: 3deg; }
.eps-index a:hover .idx__c, .eps-index a:focus-visible .idx__c { opacity: 1; }
.eps-index a:active { transform: scale(.94); }

/* carril fijo */
.eps-rail {
  position: fixed; right: 6px; top: 50%; z-index: 40;
  transform: translate(140%, -50%);
  transition: transform .4s var(--ease-drop);
}
.eps-rail.is-visible { transform: translate(0, -50%); }
.eps-rail ol { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 4px; background: var(--ink); border-radius: 20px; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
.eps-rail a {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-size: 13px;
  color: var(--white); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.eps-rail a[aria-current="true"] { background: var(--yellow); color: var(--ink); }
.eps-rail a.is-done:not([aria-current]) { color: var(--yellow); }

/* 2. EP 01 · FIN DE AÑO EN SEPTIEMBRE ------------------------------------ */
.ep01__head { position: relative; }
.ep01__sep { position: relative; color: var(--yellow); white-space: nowrap; }
.ep01__sep .dd { position: absolute; left: 0; right: 0; bottom: -.1em; width: 100%; height: .16em; }
.calendar {
  position: absolute; right: -4px; top: auto; bottom: -150px; z-index: 6;
  width: clamp(118px, 34vw, 190px);
  padding: 22px 10px 12px;
  background: var(--paper); color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow-print);
  rotate: 7deg;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 80% 95%, 66% 100%, 50% 94%, 34% 100%, 20% 95%, 8% 100%, 0 94%);
}
.calendar__rings {
  position: absolute; left: 12%; right: 12%; top: 4px; height: 10px;
  background: radial-gradient(circle 4px at 50% 50%, var(--ink) 94%, transparent) 0 0 / 20% 100% repeat-x;
}
.calendar__month {
  display: block; background: #C8102E; color: var(--white);
  font-family: var(--f-display); font-weight: 900; font-stretch: 72%;
  font-size: clamp(14px, 4.2vw, 22px); letter-spacing: .06em; padding: 4px 0;
}
.calendar__month s { text-decoration-thickness: 3px; text-decoration-color: var(--yellow); }
.calendar__fix { display: block; margin-top: 4px; font-size: clamp(22px, 6.4vw, 34px); color: #0B5D9D; rotate: -6deg; }
.calendar__day { display: block; margin-top: 8px; font-size: clamp(20px, 5.6vw, 30px); color: var(--ink); }

.ep01__hero { position: relative; margin: 28px calc(var(--gutter) * -1) 0; }
.ep01__brindis img { box-shadow: none !important; }
.confetti {
  position: absolute; inset: -20px 0; pointer-events: none;
  background-image:
    radial-gradient(circle 3px, var(--yellow) 98%, transparent),
    radial-gradient(circle 2px, var(--white) 98%, transparent),
    radial-gradient(circle 3px, #FF8FC4 98%, transparent);
  background-size: 64px 58px, 47px 71px, 83px 66px;
  background-position: 0 0, 20px 30px, 40px 10px;
  mix-blend-mode: screen;
  opacity: .8;
  animation: confetti 9s linear infinite;
}
@keyframes confetti { to { background-position: 0 580px, 20px 740px, 40px 670px; } }
.ep01__count { position: absolute; left: var(--gutter); bottom: -18px; margin: 0; font-size: clamp(30px, 9vw, 60px); rotate: -4deg; text-shadow: 0 2px 12px rgba(6,52,92,.8); }
.ep01__syn { margin-top: 40px; }

.ep01__roll { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 34px; align-items: start; }
.ep01__azul { grid-column: 1 / span 4; grid-row: 1; rotate: -4deg; z-index: 1; }
.ep01__azul .tape { left: 60%; }
.ep01__calle { grid-column: 3 / span 4; grid-row: 2; margin-top: -22%; rotate: 3deg; z-index: 2; }
.ep01__almudena { grid-column: 1 / span 4; grid-row: 3; margin: -10% 0 0 -6px; rotate: -3deg; z-index: 3; }

/* 3. EP 02 · CLUB DE LOS 27 ------------------------------------------------ */
.ep02__stage { position: relative; padding-top: 30px; }
.ep02__27 {
  position: absolute; right: -6%; top: -30px; z-index: 0;
  font-family: var(--f-display); font-weight: 900; font-stretch: 62%;
  font-size: clamp(220px, 70vw, 560px); line-height: .8;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.2);
  pointer-events: none;
}
.vinyl {
  position: absolute; right: -14%; top: 40px; z-index: 1;
  width: clamp(170px, 50vw, 360px); aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #111 0 2px, #1c1c1c 2px 4px),
    #111;
  box-shadow: var(--shadow-print), inset 0 0 0 2px #2a2a2a;
  display: grid; place-items: center;
  animation: spin 8s linear infinite;
}
.vinyl::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 10%, rgba(255,255,255,.12) 14%, transparent 18% 60%, rgba(255,255,255,.08) 64%, transparent 68%);
}
.vinyl__label {
  width: 36%; aspect-ratio: 1; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  display: grid; place-content: center; text-align: center;
  font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-size: clamp(12px, 3.6vw, 24px); line-height: .9;
}
.vinyl__label small { font-family: var(--f-hand); font-weight: 400; font-size: .62em; }
.ep--02 .ep__title { max-width: 72%; }
.ep02__club {
  display: inline;
  background: var(--ink); color: var(--yellow);
  padding: 0 .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  line-height: 1.12;
}

.ep02__wall { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-top: 36px; align-items: start; }
.poster {
  filter: drop-shadow(0 10px 14px rgba(3, 20, 40, .45));
}
.poster img {
  clip-path: polygon(0 1%, 7% 0, 18% 1.5%, 33% 0, 49% 1.2%, 64% 0, 80% 1.4%, 93% 0, 100% 1%, 99.3% 30%, 100% 62%, 99.2% 99%, 86% 100%, 70% 98.6%, 52% 100%, 36% 98.8%, 20% 100%, 5% 98.7%, 0 100%, .8% 64%, 0 30%);
}
.ep02__peluca { grid-column: 1 / -1; margin: 0 calc(var(--gutter) * -1); rotate: -1deg; }
.ep02__tarta { grid-column: 2; grid-row: 2; margin-top: -26%; rotate: 6deg; z-index: 3; }
.ep02__candles { position: absolute; width: 58px; right: -12px; top: -46px; }
.ep02__textcell { grid-column: 1 / -1; grid-row: 3; }
.ep02__syn { margin-top: 0; }
.sticker--dress {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 18px 0 0; padding: 8px 16px;
  background: var(--yellow); color: var(--ink);
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-size: 22px;
  rotate: -4deg; box-shadow: 0 6px 12px -4px rgba(3,20,40,.5);
}
.sticker--dress b { display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid #C8102E; color: #C8102E; font-size: 22px; line-height: 1; }
.ep02__amaia { grid-column: 1; grid-row: 4; rotate: -2deg; }
.ep02__espejo { grid-column: 2; grid-row: 4; rotate: 3deg; margin-top: 30%; }
.ep02__cama { grid-column: 1 / -1; grid-row: 5; rotate: -1.5deg; margin-top: -8%; }
.ep02__cama figcaption { right: 8%; top: -20px; font-size: 40px; rotate: -6deg; }
.ep02__calle { margin: 26px calc(var(--gutter) * -1) 0; }
.ep02__calle img { box-shadow: none !important; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }

/* 4. EP 03 · GOYA -------------------------------------------------------- */
.ep03__goya { color: var(--yellow); }
.ep03__photocall { position: relative; margin: 26px calc(var(--gutter) * -1) 0; padding: 26px var(--gutter) 60px; }
.photocall {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--blue-night);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='90'%3E%3Ctext x='8' y='34' font-family='Arial Black,Arial' font-weight='900' font-size='26' fill='%23D3E400' fill-opacity='.9'%3EFOMO%3C/text%3E%3Ctext x='78' y='80' font-family='Arial' font-size='20' fill='%23ffffff' fill-opacity='.55'%3E%E2%98%85%3C/text%3E%3C/svg%3E");
  background-size: 140px 90px;
  box-shadow: inset 0 -60px 60px -30px rgba(0,0,0,.45);
}
.carpet {
  position: absolute; z-index: 1; left: -10%; right: -10%; bottom: 0; height: 90px;
  background: linear-gradient(#a50b1e, #d4142f 40%, #a50b1e);
  clip-path: polygon(0 40%, 100% 0, 100% 60%, 0 100%);
  box-shadow: 0 -4px 10px rgba(0,0,0,.3);
}
.ep03__trio { position: relative; z-index: 2; }
.ep03__trofeo { position: absolute; z-index: 3; width: 38%; right: 2%; bottom: -12%; rotate: 7deg; }
.ep03__star { position: absolute; width: 54px; left: -22px; top: -26px; color: var(--yellow); }
.ep03__syn { margin-top: 56px; }
.ep03__row { position: relative; display: grid; gap: 16px; margin-top: 30px; }
.ep03__pelayo { rotate: 2deg; }
.ep03__pelayo figcaption { left: 6px; top: -22px; font-size: 32px; rotate: -5deg; }
.ribbon {
  position: relative; margin: -20px -30px 0; z-index: 3;
  text-align: center; rotate: -5deg;
}
.ribbon span {
  display: inline-block; padding: 8px 36px;
  background: #C8102E; color: var(--white);
  font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-size: clamp(22px, 6.4vw, 40px); letter-spacing: .12em;
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  box-shadow: 0 6px 12px rgba(0,0,0,.35);
}
.ep03__amaiacere { margin: 30px calc(var(--gutter) * -1) 0; }
.ep03__amaiacere img { box-shadow: none !important; }
.ep03__equis { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin-top: -16%; }
.ep03__bolsas { grid-column: 1 / span 7; rotate: -4deg; z-index: 2; }
.ep03__bolsas figcaption { right: -6px; bottom: -32px; font-size: 30px; rotate: -4deg; }
.ep03__drags { grid-column: 5 / span 6; margin-top: 30%; rotate: 5deg; z-index: 3; }

/* 5. EP 04 · LETIZIA ------------------------------------------------------ */
.ep04__letizia { position: relative; color: var(--yellow); white-space: nowrap; }
.ep04__tcrown { position: absolute; width: .9em; left: -.12em; top: -.5em; rotate: -14deg; }
.ep04__syn { margin-top: 20px; }

.mag {
  position: relative;
  margin: 30px 2px 0;
  background: #F6F0E4;
  color: var(--ink);
  padding: 10px 10px 14px;
  box-shadow: 0 2px 2px rgba(0,0,0,.2), 0 24px 40px -12px rgba(3, 20, 40, .7);
  rotate: -1.5deg;
}
.mag__head { position: relative; z-index: 2; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mag__logo {
  font-family: var(--f-display); font-weight: 900; font-stretch: 62%;
  font-size: clamp(64px, 22vw, 140px); line-height: .8; color: #C8102E;
  letter-spacing: -.02em;
}
.mag__issue { order: -1; font-weight: 900; font-size: 11px; letter-spacing: .12em; }
.mag__photo { position: relative; margin-top: -18px; }
.mag__photo img { width: 100%; height: auto; display: block; }
/* Titulares alrededor del personaje: la cara (centro-derecha de la foto)
   queda libre. Columna izquierda sobre la cortina + banda inferior sobre
   el encaje, que se sale un poco al papel de la portada. */
.mag { container-type: inline-size; padding-bottom: 12%; }
.mag__tag {
  position: absolute; z-index: 3; left: 4cqw; top: 25cqw;
  margin: 0; width: 19cqw; aspect-ratio: 1;
  background: var(--yellow); color: #C8102E;
  font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-size: 2.9cqw;
  border-radius: 50%; display: grid; place-items: center;
  rotate: -14deg; box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.mag__lines { margin: 0; padding: 0; list-style: none; }
.mag__lines li {
  position: absolute; z-index: 3;
  font-family: var(--f-display); font-weight: 900; font-stretch: 74%;
  font-size: 3.9cqw; line-height: 1.28;
  text-transform: uppercase; color: var(--white);
}
.mag__lines span {
  background: rgba(200, 16, 46, .94);
  padding: .5px 5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mag__l1 { left: 3cqw; top: 46cqw; width: 26cqw; text-align: left; rotate: -2deg; }
.mag__l2 { right: 3cqw; bottom: 25cqw; width: 34cqw; text-align: right; rotate: 1.5deg; }
.mag__l3 { left: 3cqw; bottom: 9cqw; width: 50cqw; text-align: left; rotate: -1deg; }
.mag__l3 span { background: var(--ink); color: var(--yellow); }
.mag__crown { position: absolute; z-index: 3; width: 14cqw; right: 8cqw; top: 26cqw; color: var(--yellow); rotate: 12deg; }
.mag__barcode {
  position: absolute; z-index: 3; right: 4cqw; bottom: 3cqw;
  width: 14cqw; height: 6cqw; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 3px, #111 3px 4px, #fff 4px 6px, #111 6px 9px, #fff 9px 10px);
  border: 3px solid #fff;
}

.ep04__spread { position: relative; margin-top: 50px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: start; }
.ep04__kicker { grid-column: 1 / -1; margin: 0 0 14px; font-size: 28px; rotate: -3deg; }
.ep04__risa { grid-column: 1 / span 6; rotate: -3deg; z-index: 1; }
.ep04__costura { grid-column: 7 / span 4; rotate: 5deg; margin-top: 20%; z-index: 2; }
.ep04__neon { grid-column: 1 / -1; margin: -6% calc(var(--gutter) * -1) 0; z-index: 1; }
.ep04__neon img { box-shadow: none !important; }
.ep04__valcorona { grid-column: 5 / span 6; margin-top: -22%; rotate: 4deg; z-index: 3; }

.ep04__luis { position: relative; margin-top: 50px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: start; }
.ep04__luisf { grid-column: 1 / span 8; rotate: -2deg; z-index: 1; }
.ep04__taller { grid-column: 3 / span 8; margin-top: -10%; rotate: 3deg; z-index: 2; }
.ep04__taller figcaption { left: 8px; top: -30px; font-size: 26px; rotate: -4deg; }
.ep04__panuelo { grid-column: 1 / span 7; margin-top: -4%; rotate: -3deg; z-index: 3; }
.ep04__heart { position: absolute; z-index: 4; width: 64px; right: 10%; bottom: 14%; color: #FF5FA8; }
.ep04__heart path { stroke-width: 5px; }

/* 6. EP 05 · FOLCLÓRICAS -------------------------------------------------- */
.ep--05 { padding-bottom: 60px; }
.ep05__lunares {
  position: absolute; z-index: 0; left: 0; right: 0; top: 60px; height: 520px;
  background-image: radial-gradient(circle 9px, rgba(211, 228, 0, .5) 96%, transparent);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  pointer-events: none;
}
.ep05__last { position: relative; z-index: 3; margin: 0 0 6px; font-size: clamp(26px, 7.4vw, 44px); rotate: -3deg; display: flex; align-items: center; gap: 8px; }
.ep05__sun { width: 48px; flex: 0 0 auto; animation: spin 20s linear infinite; }
.ep05__folk { color: var(--yellow); }

.ep05__stage { position: relative; margin: 26px calc(var(--gutter) * -1) 0; }
.ep05__gala img { box-shadow: none !important; }
.ep05__rubia { position: absolute; z-index: 3; width: 42%; right: 4%; bottom: -20%; rotate: 6deg; }
.abanico {
  position: absolute; z-index: 4; left: auto; right: 6%; top: -46px;
  width: clamp(110px, 32vw, 220px); aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  background:
    repeating-conic-gradient(from -90deg at 50% 100%, #C8102E 0 9deg, #a50b1e 9deg 18deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 16%, #000 17%);
          mask: radial-gradient(circle at 50% 100%, transparent 16%, #000 17%);
  rotate: 12deg;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.4));
}
.abanico::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle 5px at 30% 55%, var(--yellow) 90%, transparent), radial-gradient(circle 5px at 70% 55%, var(--yellow) 90%, transparent), radial-gradient(circle 5px at 50% 30%, var(--yellow) 90%, transparent);
}
.ep05__syn { margin-top: 70px; }

.ep05__grid { position: relative; margin-top: 34px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: start; }
.ep05__flamenca { grid-column: 1 / -1; margin: 0 calc(var(--gutter) * -1); }
.ep05__flamenca img { box-shadow: none !important; }
.ep05__luna { grid-column: 6 / span 5; margin-top: -30%; rotate: 5deg; z-index: 2; }
.ep05__proyector { grid-column: 1 / span 9; margin-top: -8%; rotate: -2deg; z-index: 1; }
.ep05__turbante { grid-column: 7 / span 4; margin-top: -24%; rotate: 6deg; z-index: 2; }

/* final protegido */
.ep05__end { position: relative; margin-top: 70px; text-align: center; }
.ep05__morado { margin: 0 calc(var(--gutter) * -1); overflow: hidden; }
.ep05__morado img { box-shadow: none !important; filter: saturate(.9); }
.curtain {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 10px, rgba(255,255,255,.05) 10px 22px),
    linear-gradient(#7b0a19, #a50b1e);
  transition: transform 1.4s var(--ease);
}
.curtain--l { left: 0; transform: translateX(-72%); }
.curtain--r { right: 0; transform: translateX(72%); }
.ep05__end.is-closing .curtain--l { transform: translateX(-2%); }
.ep05__end.is-closing .curtain--r { transform: translateX(2%); }
.spoiler { position: relative; z-index: 3; margin: -34px auto 0; width: fit-content; max-width: 100%; rotate: -3deg; }
.spoiler > span:first-child { display: block; padding: 10px 14px; background: #0b0b0b; color: #0b0b0b; font-size: 24px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.spoiler__tape {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(5deg);
  padding: 6px 16px; background: var(--yellow); color: var(--ink);
  font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-size: 22px; letter-spacing: .1em; white-space: nowrap;
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
}
.ep05__fin { margin: 40px 0 0; font-size: clamp(50px, 15vw, 140px); line-height: .9; }
.ep05__fin span { display: block; white-space: nowrap; }
.ep05__date { margin: 18px 0 0; font-size: clamp(18px, 5vw, 24px); font-weight: 600; }
.ep05__date b { color: var(--yellow); }
.ep-done { list-style: none; margin: 36px auto 0; padding: 0; display: flex; justify-content: center; gap: clamp(10px, 4vw, 26px); }
.ep-done li { position: relative; font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-size: clamp(26px, 7vw, 44px); opacity: .6; }
.ep-done .dd { position: absolute; width: 70%; left: 20%; top: -62%; }
.ep05__recorrido { margin: 18px 0 22px; font-size: clamp(30px, 8vw, 50px); rotate: -3deg; }

/* 7. APARICIONES ------------------------------------------------------------ */
.js .ep .ph { opacity: 0; transform: translateY(24px) scale(1.03); transition: opacity .6s var(--ease), transform .8s var(--ease-drop); }
.js .ep .ph.is-visible { opacity: 1; transform: none; }
.js .ep-done .dd { clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease); }
.js .ep-done.is-visible li:nth-child(1) .dd { transition-delay: .1s; }
.js .ep-done.is-visible li:nth-child(2) .dd { transition-delay: .3s; }
.js .ep-done.is-visible li:nth-child(3) .dd { transition-delay: .5s; }
.js .ep-done.is-visible li:nth-child(4) .dd { transition-delay: .7s; }
.js .ep-done.is-visible li:nth-child(5) .dd { transition-delay: .9s; }
.js .ep-done.is-visible .dd { clip-path: inset(-20% -20% -20% -20%); }
.js .ep-done.is-visible li { opacity: 1; transition: opacity .3s 1s; }

/* 8. ESCRITORIO --------------------------------------------------------------- */
@media (min-width: 901px) {
  .ep { padding-top: 140px; }
  .ep__title { font-size: clamp(70px, 7.4vw, 124px); }
  .ep__syn { font-size: 22px; }
  .eps-intro__title { font-size: clamp(140px, 17vw, 250px); }
  .eps-index ol { justify-content: flex-start; gap: 40px; }
  .eps-rail { right: 16px; }
  .eps-rail a { width: 40px; height: 40px; font-size: 15px; }

  /* 01 */
  .ep--01 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 50px; align-items: start; }
  .ep01__head { grid-column: 1 / -1; }
  .calendar { right: 4%; top: 10px; bottom: auto; width: 200px; }
  .ep01__hero { grid-column: 2; grid-row: 2 / span 2; margin: 30px 0 0; rotate: 1.5deg; }
  .ep01__syn { grid-column: 1; grid-row: 2; margin-top: 40px; }
  .ep01__roll { grid-column: 1; grid-row: 3; margin-top: 30px; }
  .ep01__count { left: -40px; }

  /* 02 */
  .ep02__stage { padding-top: 10px; }
  .ep02__27 { right: 4%; top: -80px; }
  .vinyl { right: 6%; top: 10px; width: 330px; }
  .ep--02 .ep__title { max-width: 60%; }
  .ep02__wall { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 80px; }
  .ep02__peluca { grid-column: 1 / span 7; grid-row: 1 / span 2; margin: 0; }
  .ep02__tarta { grid-column: 6 / span 3; grid-row: 2; margin-top: 30%; }
  .ep02__textcell { grid-column: 9 / span 4; grid-row: 1; }
  .ep02__amaia { grid-column: 9 / span 4; grid-row: 2; margin-top: 10px; }
  .ep02__espejo { grid-column: 1 / span 5; grid-row: 3; margin-top: -40px; }
  .ep02__cama { grid-column: 6 / span 7; grid-row: 3; margin-top: 30px; }
  .ep02__calle { margin: 40px calc(50% - 50vw) 0; }

  /* 03 */
  .ep03__photocall { margin: 40px 0 0; padding: 50px 8% 90px; }
  .ep03__trofeo { width: 22%; right: -2%; bottom: 4%; }
  .ep03__syn { max-width: 38em; margin-top: 50px; }
  .ep03__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
  .ep03__row .ep03__pelayo { order: 2; }
  .ep03__amaiacere { margin: 60px 0 0; width: 72%; }
  .ep03__equis { position: absolute; right: 0; bottom: 60px; width: 38%; margin: 0; }
  .ep--03 { padding-bottom: 80px; }

  /* 04 */
  .ep--04 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 60px; align-items: start; }
  .ep04__top { grid-column: 1; grid-row: 1; padding-top: 30px; }
  .mag { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .ep04__spread { grid-column: 1; grid-row: 2; margin-top: 40px; }
  .ep04__neon { margin-left: 0; margin-right: 0; }
  .ep04__luis { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 60px; }
  .ep04__luisf { grid-column: 1 / span 5; }
  .ep04__taller { grid-column: 5 / span 4; margin-top: 12%; }
  .ep04__panuelo { grid-column: 9 / span 4; margin-top: 0; }
  .ep04__heart { right: 32%; bottom: auto; top: 0; }

  /* 05 */
  .ep05__lunares { height: 700px; }
  .ep05__stage { margin: 30px 0 0; }
  .ep05__syn { position: absolute; right: 16px; top: 150px; width: 30%; margin: 0; }
  .ep05__stage { width: 64%; }
  .abanico { right: -24%; top: 30%; }
  .ep05__rubia { width: 22%; right: -2%; bottom: -10%; }
  .ep05__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  .ep05__flamenca { grid-column: 1 / span 7; grid-row: 1; margin: 0; }
  .ep05__luna { grid-column: 7 / span 2; grid-row: 1; margin-top: 55%; }
  .ep05__proyector { grid-column: 8 / span 5; grid-row: 1; margin-top: 18%; }
  .ep05__turbante { grid-column: 11 / span 2; grid-row: 1; margin-top: 40%; }
  .ep05__end { max-width: 900px; margin: 100px auto 0; }
  .ep05__morado { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti, .vinyl, .ep05__sun { animation: none !important; }
  .js .ep .ph { opacity: 1; transform: none; }
  .curtain { transition: none !important; }
}