/* Tema de la landing: mismo tema global lima/noche del resto del sitio
   (cookie home_theme, toggle del header) — noche es la base, la que mejor
   encaja con el dark SaaS del brief. Mismo patrón que events/show.css. */
:root, :root[data-theme="noche"] {
  --bg: #0B0B0D; --fg: #f2f2f0; --muted: #9a9a92; --line: #26261f;
  --accent: #B8F500; --accent-fg: #0B0B0D; --secondary: #7C3AED;
}
:root[data-theme="lima"] {
  --bg: #fafbf8; --fg: #111827; --muted: #6b7280; --line: #e5e7eb;
  --accent: #B8F500; --accent-fg: #0B0B0D; --secondary: #7C3AED;
  --accent-ink: color-mix(in srgb, var(--accent) 45%, #1f3d00);
}

html, body { background: var(--bg); }

.ld {
  --ld-surface: color-mix(in srgb, var(--fg) 5%, var(--bg));

  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, sans-serif;
  /* Sin overflow-x:hidden acá: mezclado con overflow-y:visible el navegador
     igual computa el eje "visible" como "auto" (regla de la spec), y eso
     vuelve a <main> su propio contenedor de scroll (el "doble scroll").
     El fondo full-bleed del hero (ver .ld-hero::before/::after) usa
     100vw + centrado, no bleed relativo — no necesita contención. */
}

.ld-eyebrow {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink, var(--accent));
  margin: 0 0 .75rem;
}

.ld-h2 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 .75rem;
}

.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.ld-btn--primary { background: var(--accent); color: var(--accent-fg); }
.ld-btn--primary:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 90%, white); }
.ld-btn--ghost { border-color: var(--line); color: var(--fg); }
.ld-btn--ghost:hover { border-color: var(--accent); color: var(--accent-ink, var(--accent)); }
.ld-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* ── Reveal al hacer scroll (data-controller="scroll-reveal") ── */
.ld-prod, .ld-steps, .ld-final {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .5s ease, transform .5s ease;
}
.ld-prod.is-revealed, .ld-steps.is-revealed, .ld-final.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ld-prod, .ld-steps, .ld-final { opacity: 1; transform: none; transition: none; }
  .ld-hero__copy { animation: none !important; }
}

/* ── Hero ── */
.ld-hero {
  position: relative;
  /* z-index propio para que sea su propio stacking context: si no, el
     z-index negativo de ::before/::after "se escapa" hacia arriba y
     pinta detrás del fondo opaco de .ld en vez de detrás del contenido
     del hero. Sin overflow:hidden — ::before/::after rompen a propósito
     el max-width acá abajo, para llegar a los bordes reales del viewport. */
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr;
  /* En celular el texto va arriba del hero y la foto se ve debajo: centrado, con el
     padding de arriba, quedaba a media pantalla o más abajo. */
  align-items: start;
  gap: 3rem;
  padding: 4.5rem 1.25rem 3rem;
  max-width: 78rem;
  margin: 0 auto;
}
/* El alto mínimo solo desde tablet: en celular el hero mide lo que su texto y dejaba
   un hueco enorme entre el botón y los pasos. */
@media (min-width: 48rem) { .ld-hero { min-height: 70vh; } }
@media (min-width: 64rem) {
  .ld-hero { grid-template-columns: .8fr 1fr; align-items: center; padding: 0 3rem 5rem; }
}

/* Foto de una multitud como fondo del hero, solo tema oscuro (en claro
   no se veía bien — ver chat: queda un color plano). Con un degradé de
   --bg encima para que el texto de la izquierda se siga leyendo — el
   degradé va aparte en ::after (no mezclado en el mismo `background`).
   `left: 50%; width: 100vw; transform: translateX(-50%)` en vez de
   `inset: 0`: así llegan al borde real del viewport aunque .ld-hero (su
   contenedor posicionado) tenga max-width: 78rem — el "romper el
   contenedor" clásico. */
:root:not([data-theme="lima"]) .ld-hero::before, :root:not([data-theme="lima"]) .ld-hero::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
}
:root:not([data-theme="lima"]) .ld-hero::before {
  z-index: -2;
  background: url("/assets/landing/hero-crowd-28ec506c.webp") center 70% / cover no-repeat;
}
:root:not([data-theme="lima"]) .ld-hero::after {
  z-index: -1;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 40%, color-mix(in srgb, var(--bg) 35%, transparent) 75%, color-mix(in srgb, var(--bg) 15%, transparent) 100%);
}
/* Fondo plano full-bleed (mismo truco de romper el max-width que la foto
   de arriba): si fuera background en .ld-hero directo, quedaría acotado
   a sus 78rem y se verían los bordes del --bg de .ld a los costados. */
:root[data-theme="lima"] .ld-hero::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1;
  background: #f9f7f2;
}

.ld-hero__copy { animation: ld-fade-up .7s ease both; }
@keyframes ld-fade-up { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

.ld-hero__title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 .75rem;
}
/* El lima (#B8F500) es casi amarillo: como acento de texto sobre fondo
   claro casi no se lee (mockup del tema claro), por eso el eyebrow del
   hero pasa a --fg ahí — el resto de la marca sigue con el acento normal. */
:root[data-theme="lima"] .ld-hero .ld-eyebrow { color: var(--fg); }
.ld-hero__subtitle {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 34rem;
  margin: 0 0 2rem;
  line-height: 1.5;
}
.ld-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Dashboard a la derecha, solo tema claro — oscuro se queda con el
   texto solo sobre la foto de fondo (ver chat). La imagen ya trae la
   card inclinada, la sombra y las anotaciones a mano dibujadas. */
.ld-hero__visual { display: none; }
:root[data-theme="lima"] .ld-hero__visual { display: block; position: relative; max-width: 38rem; margin: 0 auto; }
.ld-hero__photo { display: block; width: 100%; }

/* .ld-dash__label/__live/__dot: quedaron del mockup del hero (ver arriba),
   pero .ld-prod__panel-head (más abajo) todavía las usa para su propio
   "LIVE" — se quedan acá, sueltas. */
.ld-dash__label {
  font-family: ui-monospace, monospace; font-size: .68rem; letter-spacing: .1em;
  color: var(--muted);
}
.ld-dash__live {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: ui-monospace, monospace; font-size: .7rem; letter-spacing: .08em;
  color: var(--accent-ink, var(--accent));
}
.ld-dash__dot {
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 .5rem color-mix(in srgb, var(--accent) 70%, transparent);
  animation: ld-pulse 1.8s ease-in-out infinite;
}
@keyframes ld-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Producto: la sección más grande de la landing, el panel es el
   protagonista visual — poco texto, mucho producto. ── */
.ld-prod { max-width: 78rem; margin: 0 auto; padding: 5rem 1.25rem 6rem; }
@media (min-width: 64rem) { .ld-prod { padding: 7rem 3rem 8rem; } }

.ld-prod__head { text-align: center; margin-bottom: 2.5rem; }
.ld-prod__head .ld-eyebrow { display: block; }
.ld-prod__head .ld-h2 { margin: 0; }

.ld-prod__panel {
  background: var(--ld-surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.75rem;
}
@media (min-width: 40rem) { .ld-prod__panel { padding: 2.5rem; } }
@media (min-width: 64rem) { .ld-prod__panel { padding: 3.5rem; } }

.ld-prod__panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 2rem; }

.ld-prod__kpis {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem;
  padding-bottom: 2rem; border-bottom: 1px solid var(--line);
}
@media (min-width: 40rem) { .ld-prod__kpis { grid-template-columns: repeat(5, 1fr); } }
.ld-prod__kpi { display: flex; flex-direction: column; gap: .4rem; }
.ld-prod__kpi-value { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.01em; }
.ld-prod__kpi-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.ld-prod__chart {
  display: flex; align-items: flex-end; gap: .6rem; height: 9rem; margin-top: 2rem;
}
.ld-prod__chart span {
  position: relative;
  flex: 1; height: var(--h); border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent));
  cursor: default;
  transition: filter .15s ease, transform .15s ease;
  transform-origin: bottom;
}
.ld-prod__chart span:hover,
.ld-prod__chart span:focus-visible {
  filter: brightness(1.3);
  transform: scaleY(1.015);
  outline: none;
}
/* Tooltip con el valor del día — solo contenido, la altura/cifra las pone
   el JS (count_up_controller) vía data-tooltip, en sync con los KPIs de
   arriba. */
.ld-prod__chart span::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + .6rem);
  left: 50%;
  transform: translateX(-50%) translateY(.25rem);
  background: var(--ld-surface);
  color: var(--fg);
  border: 1px solid var(--line);
  padding: .35rem .6rem;
  border-radius: 6px;
  font-size: .72rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 2;
}
.ld-prod__chart span:hover::after,
.ld-prod__chart span:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ld-prod__chart-label { margin: .85rem 0 0; font-size: .75rem; color: var(--muted); }

/* ── Cómo funciona: fila compacta pegada al hero, ícono redondo + texto
   al lado, separadores ">" — mockup: cada paso es una unidad chica, no
   una card grande (ver chat). ── */
/* Con aire arriba: sin padding-top los pasos tocaban el borde inferior de la foto del hero. */
.ld-steps { max-width: 78rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
@media (min-width: 64rem) { .ld-steps { padding: 3rem 3rem 5rem; } }
.ld-steps__list { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 56rem) { .ld-steps__list { flex-direction: row; align-items: flex-start; gap: 1rem; } }
.ld-steps__item { display: flex; align-items: flex-start; gap: .85rem; flex: 1; }
.ld-steps__icon {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-ink, var(--accent));
}
:root[data-theme="lima"] .ld-steps__icon { color: #318514; }
.ld-steps__icon svg { width: 1.35rem; height: 1.35rem; }
.ld-steps__body h3 { font-size: 1rem; margin: 0 0 .2rem; }
.ld-steps__body p { color: var(--muted); margin: 0; line-height: 1.4; font-size: .92rem; }
.ld-steps__chevron { flex: none; align-self: center; color: var(--faint); display: none; }
@media (min-width: 56rem) { .ld-steps__chevron { display: block; } }

/* ── Eventos reales (solo si hay al menos uno publicado) ── */
.ld-events { max-width: 78rem; margin: 0 auto; padding: 0 1.25rem 5rem; }
@media (min-width: 64rem) { .ld-events { padding: 0 3rem 6rem; } }
.ld-events__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem;
}
.ld-events__head .ld-h2 { margin: 0; }
.ld-events .home__grid { margin-top: 0; }

/* ── CTA final ── */
/* Foto de fondo por tema: recital de noche (noche) o de día (lima), cada
   una con su gente y su luz — no la misma fondo oscurecida a la fuerza. El
   overlay usa var(--bg)/var(--fg), así que el degradé y el color del texto
   se adaptan solos; arriba funde con la sección anterior y abajo con el
   footer. */
.ld-final {
  position: relative;
  max-width: none; margin: 0; padding: 6rem 1.25rem 7rem; text-align: center;
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 18%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 85%, transparent) 65%, var(--bg) 97%),
    url("/assets/landing/cta-crowd-0bbbcfb3.webp") center 35% / cover no-repeat;
}
:root[data-theme="lima"] .ld-final {
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 18%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 22%, transparent), color-mix(in srgb, var(--bg) 55%, transparent) 65%, var(--bg) 97%),
    url("/assets/landing/cta-crowd-day-2230e681.webp") center 35% / cover no-repeat;
}
.ld-final__title {
  font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; color: var(--fg);
  max-width: 40rem; margin: 0 auto .75rem;
  text-shadow: 0 2px 20px color-mix(in srgb, var(--bg) 60%, transparent);
}
.ld-final__lead { color: var(--fg); opacity: .85; max-width: 32rem; margin: 0 auto 2rem; }