/* Una sola app, the hero (2026-11-05): the left third signs people up for the waitlist (the same card and script as /lista), the right two thirds is
   the moving wall of markets, one canvas (todo.js). The wall melts into the page on its left, top and bottom. */
#todo.t-portada { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); min-height: calc(100vh - 76px); padding: 0; background: #161616; overflow: hidden; }
#todo .t-izq { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 28px clamp(20px, 2vw, 36px) 28px clamp(24px, 3.6vw, 64px); }
#todo h1 { margin: 0 0 14px; font-size: clamp(38px, 3.7vw, 62px); line-height: 1; letter-spacing: -.045em; }
#todo .t-sub { margin: 0 0 22px; color: #d9d9cf; font-size: 16px; line-height: 1.5; }
#todo .t-sub b { color: #f0f0e9; font-weight: 600; }
#todo .tarjeta .cuerpo { padding: 22px 24px 24px; }
#todo .tarjeta .t-ceja { padding-bottom: 14px; }
#todo .tarjeta h2 { margin: 16px 0 8px; font-size: clamp(26px, 2.3vw, 36px); }
#todo .tarjeta .espera { justify-content: stretch; max-width: none; margin-top: 14px; }
#todo .tarjeta .letra { margin-top: 12px; }

#todo .t-panel { position: relative; min-width: 0; min-height: 100%; }
#todo .t-panel canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#todo .t-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 14%; pointer-events: none; background: linear-gradient(to right, #161616, rgba(22, 22, 22, 0)); }
#todo .t-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, #161616 0, rgba(22, 22, 22, .7) 7%, rgba(22, 22, 22, 0) 20%, rgba(22, 22, 22, 0) 80%, rgba(22, 22, 22, .7) 93%, #161616 100%); }
/* the soft top and bottom are a real blur that grows towards the edge, on the screen and not per card, so a market is never low-res next to a sharp one */
#todo .t-velo { position: absolute; left: 0; right: 0; height: var(--h); pointer-events: none; -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b)); }
#todo .t-velo.arriba { top: 0; -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent); mask-image: linear-gradient(to bottom, #000 35%, transparent); }
#todo .t-velo.abajo { bottom: 0; -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent); }

/* a short laptop still sees the whole hero */
@media (min-width: 1001px) and (max-height: 840px) {
  #todo .t-izq { padding-top: 16px; padding-bottom: 16px; }
  #todo h1 { margin-bottom: 10px; font-size: clamp(34px, 3.1vw, 48px); }
  #todo .t-sub { margin-bottom: 14px; font-size: 15px; }
  #todo .tarjeta .cuerpo { padding: 16px 20px 18px; }
  #todo .tarjeta .t-ceja { padding-bottom: 10px; }
  #todo .tarjeta h2 { margin: 10px 0 6px; font-size: 26px; }
}

@media (max-width: 1000px) {
  /* on a phone the wall sits between the title and the sign-up, so it moves above the fold */
  #todo.t-portada { display: flex; flex-direction: column; min-height: 0; padding-bottom: 8px; }
  #todo .t-izq { display: contents; }
  #todo h1, #todo .t-sub, #todo .tarjeta { position: relative; z-index: 2; margin-left: 16px; margin-right: 16px; }
  #todo h1 { order: 1; margin-top: 26px; font-size: clamp(38px, 10.5vw, 60px); }
  #todo .t-sub { order: 2; margin-bottom: 6px; }
  #todo .t-panel { order: 3; height: min(82vw, 440px); min-height: 0; }
  #todo .tarjeta { order: 4; margin-top: -14px; }
  #todo .t-panel::before { display: none; }
}