/* ============================================================
   The Lab Sessions — identidad del show dentro del sitio BLT
   Header y footer siguen siendo los del sitio (navy); el show
   vive solo dentro de <main class="ls">: papel off-white, negro
   pesado, marcador lima y doodles con trazo grueso.
   Regla: el lima va DETRÁS de texto negro, nunca como color de texto.
   ============================================================ */

/* ---------- 1. Tokens del show ---------- */
.ls{
  /* tokens del kit de la intro (Hyperframes: shared/lib/lab.css);
     en el mp4 el lima se mide ~#ABF01E por la compresión */
  --ls-lime:   #B4FC1C;
  --ls-paper:  #FFFFFF;   /* + grano multiply: se ve ~#F0F0F0, como en la intro */
  --ls-ink:    #111111;
  --ls-ink-2:  #3A3A3A;   /* texto secundario: 10.5:1 sobre el papel */
  --ls-card:   #FFFFFF;
  --ls-stroke: 3px;

  --ls-display: 'Poppins', system-ui, sans-serif;
  --ls-marker:  'Permanent Marker', 'Comic Sans MS', cursive;

  --ls-wrap: 1120px;
  --ls-sec:  clamp(4rem, 9vw, 7rem);

  position:relative;
  isolation:isolate;
  background-color:var(--ls-paper);
  color:var(--ls-ink);
  overflow:hidden;
}

/* textura: doodles tenues + grano de papel (SVG, sin requests extra) */
.ls::before,
.ls::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.ls::before{
  opacity:.035;
  background:url("/assets/lab-sessions/doodle-texture.webp") 0 0 / 1200px auto repeat;
}
.ls::after{
  opacity:.55;
  mix-blend-mode:multiply;
  background:url("/assets/lab-sessions/paper-grain.webp") 0 0 / 384px 384px repeat;
}

.ls ol{ list-style:none; }

/* el header translúcido del sitio se ve lila sobre papel claro: acá va sólido */
.ls-page #nav{ background:var(--navy); }

.ls ::selection{ background:var(--ls-lime); color:var(--ls-ink); }

/* foco visible sobre papel claro: el contorno lima del sitio no contrasta acá */
.ls :focus-visible{
  outline:3px solid var(--ls-ink);
  outline-offset:3px;
  border-radius:6px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.ls-wrap{
  max-width:var(--ls-wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
  position:relative;
}

/* ---------- 2. Tipografía ---------- */
.ls h1, .ls h2, .ls h3{ letter-spacing:-0.02em; }

.ls-title{
  font-family:var(--ls-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(3rem, 9.5vw, 6.4rem);
  line-height:.95;
  letter-spacing:-0.035em;
}

.ls-h2{
  font-family:var(--ls-display);
  font-weight:900;
  font-size:clamp(2rem, 5vw, 3.2rem);
  line-height:1.02;
  letter-spacing:-0.03em;
}

/* marcador lima: un trazo irregular detrás del texto negro */
.ls-swipe{
  position:relative;
  display:inline-block;
  z-index:0;
  padding-inline:.12em;
  margin-inline:-.12em;
}
.ls-swipe::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-.18em;
  right:-.2em;
  top:0;
  bottom:-.06em;
  background:url("/assets/lab-sessions/doodles/swipe.svg") center / 100% 100% no-repeat;
  transform:rotate(-1.2deg);
  transform-origin:left center;
}
.ls-swipe--sm::before{ top:.04em; bottom:-.08em; }

.ls-by{
  font-family:var(--ls-marker);
  font-size:clamp(1.15rem, 2.4vw, 1.6rem);
  line-height:1.2;
  transform:rotate(-2deg);
  transform-origin:left center;
  margin-top:.4rem;
}

.ls p{ max-width:62ch; }
.ls-lead{
  font-size:clamp(1.1rem, 1.9vw, 1.3rem);
  line-height:1.55;
  font-weight:600;
}
.ls-split-body p + p{ margin-top:1rem; }
.ls-split-body p{ color:var(--ls-ink-2); }
.ls-split-body .ls-lead{ color:var(--ls-ink); }
.ls strong{ font-weight:700; color:var(--ls-ink); }

/* ---------- 3. Botones y links ---------- */
.ls-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:48px;
  padding:.8rem 1.6rem;
  font-family:var(--ls-display);
  font-weight:700;
  font-size:1rem;
  line-height:1.1;
  text-decoration:none;
  color:var(--ls-ink);
  border:var(--ls-stroke) solid var(--ls-ink);
  border-radius:999px;
  box-shadow:4px 4px 0 var(--ls-ink);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ls-btn:hover{ transform:translate(-2px, -2px); box-shadow:6px 6px 0 var(--ls-ink); }
.ls-btn:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ls-ink); }
.ls-btn--lime{ background:var(--ls-lime); }
.ls-btn--outline{ background:var(--ls-card); }

.ls-link{
  font-weight:600;
  color:var(--ls-ink);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.2em;
}
.ls-link:hover{
  text-decoration-color:var(--ls-ink);
  background:linear-gradient(transparent 55%, var(--ls-lime) 55%);
}

/* ---------- 4. Tarjetas (contorno negro grueso) ---------- */
.ls-card{
  background:var(--ls-card);
  border:var(--ls-stroke) solid var(--ls-ink);
  border-radius:18px;
  box-shadow:5px 5px 0 var(--ls-ink);
}

/* ---------- 5. Hero ---------- */
.ls-hero{ padding-block:clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); }
.ls-hero-in{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(1.5rem, 4vw, 3rem);
  align-items:center;
}
.ls-underline{
  display:block;
  width:min(100%, 34rem);
  height:clamp(18px, 2.4vw, 28px);
  margin-top:.6rem;
}
.ls-tagline{
  font-size:clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight:600;
  line-height:1.4;
  margin-top:1.4rem;
}
.ls-pill{
  display:inline-block;
  margin-top:1.25rem;
  padding:.55rem 1.1rem;
  background:var(--ls-lime);
  border:var(--ls-stroke) solid var(--ls-ink);
  border-radius:999px;
  box-shadow:3px 3px 0 var(--ls-ink);
  font-weight:700;
  font-size:.95rem;
  line-height:1.35;
}
.ls-pill-note{ font-weight:600; }
.ls-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.75rem;
}
.ls-hero-art{ justify-self:center; width:min(100%, 440px); }
.ls-hero-art img{ width:100%; height:auto; }

@media (min-width: 900px){
  /* como en la intro: robot a la izquierda, título a la derecha */
  .ls-hero-in{ grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); }
  .ls-hero-art{ order:-1; width:100%; }
}

/* ---------- 6. Secciones ---------- */
.ls-sec{ padding-block:var(--ls-sec); position:relative; }
.ls-sec + .ls-sec{ padding-top:0; }
.ls-sec-head{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:clamp(1.75rem, 4vw, 2.5rem);
}
.ls-channel .ls-h2,
.ls-episodes .ls-h2{ margin-bottom:clamp(1.75rem, 4vw, 2.5rem); }

/* qué es / acerca: título a la izquierda, texto a la derecha */
.ls-split{
  display:grid;
  gap:1.25rem;
}
@media (min-width: 900px){
  .ls-split{ grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:3rem; }
}

/* temas */
.ls-topic-list{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  counter-reset:none;
}
.ls-topic{
  display:flex;
  gap:1rem;
  align-items:baseline;
  padding:1.25rem 1.4rem;
  font-weight:700;
  font-size:1.1rem;
  line-height:1.35;
}
.ls-topic:nth-child(even){ transform:rotate(.6deg); }
.ls-topic:nth-child(odd){ transform:rotate(-.5deg); }
.ls-num{
  flex:none;
  font-family:var(--ls-marker);
  font-weight:400;
  font-size:1.2rem;
  background:var(--ls-lime);
  border:2px solid var(--ls-ink);
  border-radius:8px;
  padding:0 .4rem;
  line-height:1.5;
}

/* canal */
.ls-channel-card{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:1.25rem 1.5rem;
  align-items:center;
  padding:clamp(1.25rem, 3vw, 2rem);
  max-width:820px;
}
.ls-channel-avatar{
  width:clamp(64px, 12vw, 96px);
  height:auto;
  background:var(--ls-paper);
  border:var(--ls-stroke) solid var(--ls-ink);
  border-radius:50%;
  padding:.35rem;
}
.ls-channel-name{
  font-family:var(--ls-display);
  font-weight:900;
  font-size:clamp(1.3rem, 3vw, 1.7rem);
  line-height:1.1;
}
.ls-channel-handle{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--ls-ink-2);
  margin-top:.25rem;
}
.ls-channel-note{ margin-top:.6rem; color:var(--ls-ink-2); }
.ls-channel-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.5rem;
}
@media (min-width: 768px){
  .ls-channel-card{ grid-template-columns:auto minmax(0, 1fr) auto; }
  .ls-channel-actions{ grid-column:auto; flex-direction:column; align-items:flex-end; }
}

/* episodios: empty state */
.ls-empty{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.1rem;
  padding:clamp(1.5rem, 4vw, 2.5rem);
  max-width:820px;
  border-style:dashed;
  box-shadow:none;
  background:rgba(255,255,255,.6);
}
.ls-empty[hidden]{ display:none; }
.ls-empty-txt{ font-size:1.15rem; font-weight:600; line-height:1.45; }

/* episodios: con datos */
.ls-ep-root{ display:grid; gap:2rem; }
.ls-ep{
  background:var(--ls-card);
  border:var(--ls-stroke) solid var(--ls-ink);
  border-radius:18px;
  box-shadow:5px 5px 0 var(--ls-ink);
  overflow:hidden;
}
.ls-ep--featured{ display:grid; }
@media (min-width: 900px){
  .ls-ep--featured{ grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); }
  .ls-ep--featured .ls-ep-body{ border-top:0; border-left:var(--ls-stroke) solid var(--ls-ink); }
}
.ls-ep-body{ padding:1.25rem 1.4rem 1.5rem; border-top:var(--ls-stroke) solid var(--ls-ink); }
.ls-ep-date{ font-family:var(--mono); font-size:.8rem; color:var(--ls-ink-2); }
.ls-ep-title{ font-family:var(--ls-display); font-weight:800; font-size:1.25rem; line-height:1.2; margin-top:.3rem; }
.ls-ep--featured .ls-ep-title{ font-size:clamp(1.4rem, 2.6vw, 1.9rem); font-weight:900; }
.ls-ep-guest{ font-weight:600; margin-top:.5rem; }
.ls-ep-summary{ color:var(--ls-ink-2); margin-top:.6rem; }
.ls-ep-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* reproductor facade */
.ls-player{ position:relative; aspect-ratio:16 / 9; background:var(--ls-ink); }
.ls-player iframe,
.ls-facade{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.ls-facade{
  display:block;
  padding:0;
  background:none;
  cursor:pointer;
}
.ls-facade-img{ width:100%; height:100%; object-fit:cover; }
.ls-play{
  position:absolute;
  left:50%;
  top:50%;
  width:76px;
  height:76px;
  transform:translate(-50%, -50%);
  background:var(--ls-lime);
  border:var(--ls-stroke) solid var(--ls-ink);
  border-radius:50%;
  box-shadow:4px 4px 0 var(--ls-ink);
  transition:transform .15s ease;
}
.ls-play::after{
  content:"";
  position:absolute;
  left:54%;
  top:50%;
  transform:translate(-50%, -50%);
  border-style:solid;
  border-width:14px 0 14px 22px;
  border-color:transparent transparent transparent var(--ls-ink);
}
.ls-facade:hover .ls-play,
.ls-facade:focus-visible .ls-play{ transform:translate(-50%, -50%) scale(1.08); }
.ls-facade:focus-visible{ outline:4px solid var(--ls-lime); outline-offset:-8px; box-shadow:inset 0 0 0 8px var(--ls-ink); }

/* acerca */
.ls-about-links{ display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; margin-top:1.25rem; }
.ls-about{ padding-bottom:clamp(5rem, 10vw, 8rem); }

/* ---------- 7. Doodles (SVG del kit de la intro) ---------- */
.ls-doodle{ flex:none; display:block; height:auto; }
.ls-doodle--gear{ width:56px; transform:rotate(4deg); }
.ls-doodle--cassette{ width:110px; transform:rotate(7deg); }
.ls-doodle--bubble,
.ls-doodle--beaker{
  position:absolute;
  right:var(--pad);
  top:-4.5rem;
  width:84px;
  transform:rotate(-4deg);
}
.ls-doodle--beaker{ width:60px; top:auto; bottom:-1rem; transform:rotate(-6deg); }
.ls-wave{
  position:absolute;
  left:50%;
  bottom:1.75rem;
  width:min(50vw, 260px);
  height:auto;
  translate:-50% 0;
}
@media (max-width: 899px){
  .ls-doodle--bubble{ width:64px; top:-3rem; }
  .ls-doodle--beaker{ width:48px; bottom:auto; top:-1.25rem; }
}

/* ---------- 8. Movimiento (solo si el usuario no pidió menos) ---------- */
@media (prefers-reduced-motion: no-preference){
  .ls-hero-art{ animation:ls-rise .7s cubic-bezier(.2,.8,.2,1) both; }
  .ls-swipe::before{ animation:ls-swipe .55s .25s cubic-bezier(.6,0,.2,1) both; }
  .ls-hero-copy > *{ animation:ls-fade .5s ease both; }
  .ls-hero-copy > :nth-child(2){ animation-delay:.1s; }
  .ls-hero-copy > :nth-child(3){ animation-delay:.2s; }
  .ls-hero-copy > :nth-child(4){ animation-delay:.28s; }
  .ls-hero-copy > :nth-child(5){ animation-delay:.36s; }
  .ls-hero-copy > :nth-child(6){ animation-delay:.44s; }

  .ls-doodle,
  .ls-wave{ animation:ls-pop .6s .3s cubic-bezier(.3,1.6,.5,1) both; }
  .ls-doodle--gear{ animation:ls-pop .6s .3s cubic-bezier(.3,1.6,.5,1) both, ls-spin 14s 1s linear infinite; }

  /* los doodles de secciones lejanas entran al hacer scroll, sin JS */
  @supports (animation-timeline: view()){
    .ls-sec .ls-doodle,
    .ls-wave{
      animation:ls-pop linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 60%;
    }
    .ls-sec .ls-doodle--gear{
      animation:ls-pop linear both, ls-spin 14s linear infinite;
      animation-timeline:view(), auto;
      animation-range:entry 10% entry 60%, normal;
    }
  }
}
@keyframes ls-rise{ from{ opacity:0; transform:translateY(18px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes ls-fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes ls-swipe{ from{ transform:rotate(-1.2deg) scaleX(0); } to{ transform:rotate(-1.2deg) scaleX(1); } }
@keyframes ls-pop{ from{ opacity:0; scale:.6; } to{ opacity:1; scale:1; } }
@keyframes ls-spin{ to{ rotate:360deg; } }