/* ============================================================
   SPOTIFY — la sala de escucha del espejo hablado
   Hoja propia de la página spotify.html / spotify-es.html.
   Se carga DESPUÉS de prototipo.css y hereda el sistema común
   de la raíz (tokens, .wrap, .chapter, .eyebrow, foco).

   Doble ADN, por decisión escrita en la ESPECIFICACION §3.3:
   el marco es claro y de la casa (navy único acento); la sala
   de escucha es oscura y de Spotify (carbón + verde funcional,
   color de socio como --tm-blue, territorial: el verde nunca
   sale de la sala y el navy nunca entra).
   ============================================================ */

:root{
  /* ADN Spotify, medido de su sistema público de diseño */
  --sp-bg:      #121212;
  --sp-surface: #181818;
  --sp-mid:     #1f1f1f;
  --sp-card:    #252525;
  --sp-text:    #ffffff;
  --sp-sub:     #b3b3b3;
  --sp-green:   #1ed760;   /* solo play, estados activos y CTA de escucha */
  --sp-green-b: #1db954;
}

/* ---------- Héroe: imagen a todo lo ancho, lockup suspendido ---------- */
.sp-hero{ position: relative; overflow: hidden; background: var(--navy-deep); }
.sp-hero-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-hero-shade{ position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,22,54,.52) 0%, rgba(1,22,54,.36) 42%, rgba(1,22,54,.58) 100%); }
.sp-hero-in{ position: relative; padding-block: clamp(120px, 16vw, 220px) clamp(96px, 12vw, 150px); color: #fff; }
.sp-lockup{ display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 100%; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); margin-inline: auto; }
.sp-lockup .sp-bts{ width: clamp(120px, 16vw, 168px); height: auto; }
.sp-lockup .sp-slogan{ margin: 0; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
/* Corrección 2026-10-28 (v3): prototipo.css pinta .sp-slogan en navy (#022251)
   para héroes sin media; sobre la foto oscura el slogan va en blanco puro.
   Esta regla empata su especificidad (0,3,0) y vive en la hoja posterior. */
.sp-hero .sp-lockup .sp-slogan{ color: #fff; text-shadow: 0 1px 14px rgba(0,10,30,.5); }
/* Corrección v4 (2026-10-28): la causa raíz era doble. (1) La regla navy de
   prototipo.css se dispara con :not(:has(.sp-media)) y la foto del héroe no
   llevaba la clase .sp-media del sistema común: el HTML ya la lleva (clases
   «sp-hero-img sp-media»), así que la rama navy ni siquiera se aplica.
   (2) El titular del héroe no tenía color en ninguna hoja y heredaba el
   `h1{color:var(--navy)}` global de prototipo.css: navy sobre la foto, en
   todas las versiones. Aquí todo el texto del héroe queda en blanco puro
   con especificidad (0,4,0), por encima de cualquier regla del sistema
   común presente o futura: slogan, antetítulo y titular. */
.sp-hero .sp-hero-in .sp-lockup .sp-slogan{ color: #fff; }
.sp-hero .sp-hero-in .sp-eyebrow{ color: #fff; }
.sp-hero .sp-hero-in h1{ color: #fff; text-shadow: 0 2px 26px rgba(0,10,30,.45); }
.sp-lockup .sp-spotify{ width: clamp(104px, 13vw, 140px); height: auto; margin-top: 6px; }
.sp-eyebrow{ color: #fff; }
.sp-hero h1{ margin: 0 0 18px; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.01em; max-width: 14ch; }
.sp-hero-line{ margin: 0 0 34px; max-width: 52ch; font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); line-height: 1.55; color: rgba(255,255,255,.94); }
.sp-start{ display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .92rem; }
.sp-start .sp-circle{ display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border: 1.5px solid #fff; border-radius: 50%; font-size: 1.3rem; line-height: 1; transition: transform .35s cubic-bezier(.2,.6,.2,1), background .35s; }
.sp-start:hover .sp-circle{ transform: translateX(4px); background: rgba(255,255,255,.14); }

/* Señal de continuidad: doble chevrón que respira (BUILDER, 2,5 s) */
.sp-chevrons{ position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; pointer-events: none; }
.sp-chevrons svg{ display: block; animation: sp-breathe 2.5s ease infinite; }
.sp-chevrons svg + svg{ animation-delay: .2s; }
@keyframes sp-breathe{ 0%{ opacity: .2; } 20%{ opacity: 1; } 40%{ opacity: .2; } 100%{ opacity: .2; } }

/* ---------- Gestos texto + círculo en capítulos claros ---------- */
.sp-gestures{ display: flex; flex-wrap: wrap; gap: 18px 40px; margin-top: 36px; }
.sp-gesture{ display: inline-flex; align-items: center; gap: 12px; color: var(--accent); text-decoration: none;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; }
.sp-gesture .sp-circle{ display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1.5px solid var(--accent); border-radius: 50%; font-size: 1.15rem; line-height: 1;
  transition: transform .35s cubic-bezier(.2,.6,.2,1), background .35s; }
.sp-gesture:hover .sp-circle{ transform: translateX(4px); background: rgba(2,34,81,.06); }
.sp-lede{ max-width: 62ch; }       /* IN: Plus */
.sp-lede + .sp-lede{ margin-top: 18px; }
.chapter h2{ max-width: 22ch; }

/* ---------- LA SALA DE ESCUCHA (zona Spotify) ---------- */
.sp-room{ background: var(--sp-bg); color: var(--sp-text); }
.sp-room .eyebrow{ color: var(--sp-sub); }
.sp-room :focus-visible{ outline: 3px solid var(--sp-green); outline-offset: 3px; }
.sp-show{ display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(48px, 6vw, 80px); }
.sp-cover{ width: 220px; height: 220px; object-fit: cover; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.sp-show h2{ margin: 0 0 10px; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.15; color: var(--sp-text); max-width: none; }
.sp-show-line{ margin: 0 0 22px; color: var(--sp-sub); font-size: 1.05rem; }
.sp-follow{ display: inline-flex; align-items: center; gap: 12px; color: var(--sp-text); text-decoration: none;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .88rem; }
.sp-follow .sp-circle{ display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 1.5px solid var(--sp-text); border-radius: 50%; font-size: 1.15rem; line-height: 1; transition: border-color .3s, color .3s, transform .35s cubic-bezier(.2,.6,.2,1); }
.sp-follow:hover .sp-circle{ border-color: var(--sp-green); color: var(--sp-green); transform: translateX(4px); }

/* Presencia del socio en toda la página (corrección 2026-10-28): el logo
   de Spotify, original y sin modificar, acompaña la acción de seguir el
   show en la sala, la cabecera del episodio y la fila de gestos. */
.sp-follow-row{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sp-spotify-inline{ height: 27px; width: auto; display: block; }
.sp-ep-head{ display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.sp-ep-head .sp-ep-label{ margin: 0; }
.sp-spotify-ep{ height: 23px; width: auto; display: block; flex: none; }
.sp-spotify-gesture{ height: 25px; width: auto; display: block; align-self: center; }

.sp-ep{ background: var(--sp-surface); border-radius: 12px; padding: clamp(24px, 4vw, 48px); }
.sp-ep-label{ margin: 0 0 14px; color: var(--sp-sub); font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.sp-ep-grid{ display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.sp-ep-grid > *{ min-width: 0; }   /* las URL largas de la descripción no fuerzan la columna */
.sp-ep-img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
.sp-ep h3{ margin: 0 0 8px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; color: var(--sp-text); }
.sp-ep-meta{ margin: 0 0 18px; color: var(--sp-sub); font-size: .92rem; }
.sp-ep-desc{ color: #e8e8e8; max-width: 68ch; }
.sp-ep-desc p{ margin: 0 0 14px; }
.sp-ep-desc a{ color: var(--sp-text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sp-embed{ margin-top: 26px; }
.sp-embed iframe{ display: block; width: 100%; border: 0; border-radius: 12px; background: var(--sp-mid); }

/* Tarjeta táctil: nuestro elemento por pista (etiqueta, estado, vibración) */
.sp-track{ display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 22px;
  padding: 16px 20px; background: var(--sp-mid); color: var(--sp-text);
  border: 1px solid var(--sp-card); border-radius: 12px; cursor: pointer; text-align: left;
  font: inherit; }
.sp-track:hover{ background: var(--sp-card); }
.sp-track-dot{ flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sp-green); }
.sp-track[data-state="started"] .sp-track-dot{ background: var(--sp-green); box-shadow: 0 0 0 4px rgba(30,215,96,.25); }
.sp-track[data-state="played"] .sp-track-dot{ background: var(--sp-sub); box-shadow: none; }

/* Botón «marcar como escuchado» (tercer estado, lo declara el oyente) */
.sp-track-done{ margin-top: 12px; padding: 10px 18px; background: transparent; color: var(--sp-sub);
  border: 1px solid var(--sp-card); border-radius: 999px; font: inherit; font-size: .9rem; cursor: pointer; }
.sp-track-done:hover{ border-color: var(--sp-sub); color: var(--sp-text); }
.sp-track-text{ display: flex; flex-direction: column; gap: 2px; }
.sp-track-name{ font-weight: 700; }
.sp-track-state{ color: var(--sp-sub); font-size: .9rem; }

/* ---------- Capítulos del episodio: índice «In this episode» ---------- */
/* Cada evento de la cartelera narrado es un capítulo nombrado
   (día, hora, lugar) con su acceso a tickets: el botón TICKETS
   aprobado de la casa, cuya CSS vive en prototipo.css. */
.sp-chapters{ margin-top: 26px; border-top: 1px solid var(--sp-card); padding-top: 22px; }
.sp-chapters-title{ margin: 0 0 14px; font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sp-sub); }
.sp-chapter-list{ list-style: none; margin: 0; padding: 0; }
.sp-chapter{ background: var(--sp-mid); border: 1px solid var(--sp-card); border-radius: 12px; padding: 18px 20px; }
.sp-chapter + .sp-chapter{ margin-top: 12px; }
.sp-chapter-name{ margin: 0 0 6px; font-weight: 700; color: var(--sp-text); }
.sp-chapter-num{ display: block; margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-sub); }
.sp-chapter-meta{ margin: 0 0 16px; color: var(--sp-sub); font-size: .92rem; }
.sp-chapter .btn-tickets{ width: min(340px, 100%); min-height: 52px; }

.sp-archive{ margin-top: clamp(48px, 6vw, 72px); }
.sp-archive h3{ margin: 0 0 10px; font-size: 1.25rem; color: var(--sp-text); }
.sp-archive p{ margin: 0; color: var(--sp-sub); max-width: 62ch; }
.sp-touch-note{ margin-top: 28px; padding: 18px 22px; border: 1px solid var(--sp-card); border-radius: 12px; color: var(--sp-sub); max-width: 72ch; }
.sp-touch-note strong{ color: var(--sp-text); }

/* ---------- Vestuario: reel a todo lo ancho ---------- */
.sp-reel{ position: relative; background: var(--navy-deep); }
.sp-reel video{ display: block; width: 100%; max-height: 78vh; object-fit: cover; }
.sp-reel figcaption{ position: absolute; left: 0; right: 0; bottom: 0; padding: 20px var(--pad-x);
  color: #fff; background: linear-gradient(0deg, rgba(1,22,54,.62), rgba(1,22,54,0)); font-size: .95rem; }
.sp-reel figcaption .eyebrow{ color: rgba(255,255,255,.85); margin-bottom: 6px; }

/* ---------- Cierre: un solo CTA rectangular ---------- */
.sp-close{ text-align: center; }
.sp-close-lockup{ display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 34px; }
.sp-close-lockup .sp-bts{ width: clamp(110px, 14vw, 150px); height: auto; }
.sp-close-lockup .sp-slogan{ margin: 0; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.sp-close-lockup .sp-spotify{ width: clamp(96px, 12vw, 128px); height: auto; margin-top: 4px; }
.sp-close-line{ margin: 0 0 26px; color: var(--ink-soft); }
.sp-rect{ display: block; width: 100%; padding: 21px; border: 1.5px solid var(--navy); color: var(--navy);
  text-align: center; text-decoration: none; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .95rem;
  transition: background .3s, color .3s; }
.sp-rect:hover{ background: var(--navy); color: #fff; }

/* ---------- Responsive (verificado a 390/768/1280/1920/2560 al desplegar) ---------- */
@media (max-width: 900px){
  .sp-show{ grid-template-columns: 1fr; }
  .sp-cover{ width: 168px; height: 168px; }
  .sp-ep-grid{ grid-template-columns: 1fr; }
  .sp-ep-img{ max-width: 300px; }
}
@media (max-width: 760px){
  .sp-hero-in{ padding-block: 104px 92px; }
  .sp-track{ padding: 14px 16px; }
}

/* ---------- Movimiento reducido: la respiración se apaga ---------- */
@media (prefers-reduced-motion: reduce){
  .sp-chevrons svg{ animation: none; opacity: .85; }
  .sp-start .sp-circle, .sp-gesture .sp-circle, .sp-follow .sp-circle{ transition: none; }
}