/* Agenxia · product landing.
 *
 * Loaded ON TOP of agent.css, which owns the tokens. This file adds layout
 * and nothing else — no colours of its own, no second type scale. A landing
 * that invents its own palette is how a product ends up looking like two
 * products, and the agent is the thing being sold, so they have to match.
 *
 * The landing is the ONLY indexable page in the Worker. Everything else is
 * somebody's private onboarding and ships noindex. */

.lp { max-width: 980px; margin: 0 auto; padding: 0 20px 64px; position: relative; z-index: 1; }

/* ── Ambiente ──
 * Cuatro manchas de luz que derivan detrás del hero.
 *
 * CSS PURO, Y ES UNA DECISIÓN, NO PEREZA. Un campo de partículas en canvas
 * cuesta un `requestAnimationFrame` permanente y batería en un teléfono, para
 * un adorno que nadie mira dos veces. Esto lo compone la GPU y no ejecuta una
 * sola línea de JavaScript. `will-change` queda fuera a propósito: en cuatro
 * capas borrosas y grandes crea cuatro texturas enormes y empeora justo en el
 * dispositivo que se quería proteger.
 *
 * El color sale de los mismos tokens que el resto. Nada aquí introduce un
 * color que la marca no tenga. */
.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* `color-mix` instead of --accent-soft: that token is a 7% tint meant to sit
   behind a chip, and behind 70px of blur it disappears entirely. Mixing from
   --accent keeps the colour tied to the theme while letting the amount be
   chosen for this job. */
.ambient b {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(80px); opacity: .85;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 68%);
  animation: drift 34s ease-in-out infinite alternate;
}
.ambient b:nth-child(1) { width: 46vw; height: 46vw; left: -8vw;  top: -10vh; animation-duration: 38s; }
.ambient b:nth-child(2) { width: 34vw; height: 34vw; right: -6vw; top: 6vh;   animation-duration: 46s; animation-direction: alternate-reverse; }
.ambient b:nth-child(3) { width: 40vw; height: 40vw; left: 22vw;  top: 46vh;  animation-duration: 52s; opacity: .6; }
.ambient b:nth-child(4) { width: 26vw; height: 26vw; right: 12vw; top: 74vh;  animation-duration: 42s; animation-direction: alternate-reverse; opacity: .55; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5vw, -7vh, 0) scale(1.18); }
}

/* Una línea de luz que recorre el borde inferior del hero: el único momento
   de la página que se mueve solo, y dura poco. */
.lp__hero { position: relative; }
.lp__hero::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .5; animation: sweep 7s ease-in-out infinite;
}
@keyframes sweep {
  0%, 100% { transform: scaleX(.25); transform-origin: left; opacity: .18; }
  50%      { transform: scaleX(1);   transform-origin: left; opacity: .5; }
}

/* El trazo de la marca se dibuja al cargar. 18px de longitud de camino es
   holgado para las dos líneas del SVG a 24 de viewBox. */
.lp__brand .mark path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: draw 1.1s cubic-bezier(.16,1,.3,1) .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── Bar ── */
.lp__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.lp__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lp__brand .wordmark { font-size: 1.25rem; }
.mark { display: block; width: 26px; height: 26px; flex: 0 0 auto; }
.lp__bar nav { display: flex; align-items: center; gap: 18px; font-size: .92rem; }
.lp__bar nav a { color: var(--muted); text-decoration: none; }
.lp__bar nav a:hover { color: var(--ink); }

/* ── Hero ── */
.lp__hero { padding: 40px 0 clamp(40px, 7vw, 76px); border-bottom: 1px solid var(--line); }
.lp__hero h1 { font-size: clamp(2rem, 6vw, 3.6rem); max-width: 18ch; margin: 14px 0 18px; }
.lp__hero .lead { font-size: clamp(1.02rem, 2.2vw, 1.2rem); max-width: 56ch; color: var(--ink-2); }
.lp__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lp__cta .btn { text-decoration: none; display: inline-block; }

/* ── Sections ── */
.lp section { padding: clamp(40px, 6vw, 68px) 0; border-bottom: 1px solid var(--line); }
.lp h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin: 10px 0 10px; }
.lp section > .lead { margin-bottom: 26px; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.card { border: 1px solid var(--line); background: var(--bg-1); border-radius: 14px; padding: 20px; }
.card h3 { font-size: 1rem; margin: 0 0 6px; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }

/* ── Steps ── */
.steps { counter-reset: step; display: grid; gap: 2px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font: 500 12px var(--mono); color: var(--accent); letter-spacing: .08em; padding-top: 3px;
}
.step h3 { margin: 0 0 4px; font-size: 1.02rem; }
.step p { margin: 0; color: var(--muted); max-width: 62ch; }

/* ── Rules ── */
.rules { display: grid; gap: 10px; }
.rule { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
        border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px; background: var(--accent-soft); }
.rule b { font-weight: 700; color: var(--ink); }
.rule span { color: var(--muted); font-size: .94rem; }
.rule::before { content: "—"; color: var(--accent); font: 600 14px var(--mono); padding-top: 2px; }

/* ── Close ── */
.lp__close { text-align: center; padding: clamp(46px, 7vw, 78px) 0 !important; border-bottom: 0 !important; }
.lp__close h2 { max-width: 20ch; margin-inline: auto; }
.lp__close .lead { margin-inline: auto; }

.lp__foot { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
            border-top: 1px solid var(--line); padding-top: 20px;
            font: 11.5px var(--mono); color: var(--muted-2); letter-spacing: .04em; }
.lp__foot a { color: var(--muted); text-decoration: none; }
.lp__foot a:hover { color: var(--ink); }

@media (max-width: 560px) {
  /* The two section links wrap into the wordmark at this width and the bar
     turns into a scramble. On a phone the page IS the navigation — you scroll
     it — so the anchors earn nothing and the one thing worth keeping is the
     way to make contact. */
  .lp__bar nav a:not(.kicker) { display: none; }
  .lp__bar { padding: 16px 0; }
  .step { grid-template-columns: 30px 1fr; gap: 10px; }
  .lp__foot { font-size: 11px; }
}

/* Motion is decoration. Anyone who asked the system to stop moving things
   gets a page that does not move — and the mark still has to be VISIBLE, so
   the draw-in resets to its finished state rather than freezing at
   dashoffset 34, which would leave the logo blank. A reduced-motion page
   that loses content is worse than one that animates. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .lp__brand .mark path { stroke-dashoffset: 0; }
  .ambient { display: none; }
  .lp__hero::after { transform: none; opacity: .3; }
}