/* Fuentes dentro del sitio, así no se le pide nada a Google al abrir la página. */
@font-face { font-family: "Manrope"; src: url("fonts/Manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }

html, body { margin: 0; background: #fdfdfd; }
  .hero { position: relative; height: 100vh; overflow: hidden; background: #fdfdfd; }
  #ascii-hands { position: absolute; inset: 0; width: 100%; height: 100%; }
  .center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 2; pointer-events: none; }
  .brand { margin: 0; font: 600 clamp(44px, 6.5vw, 108px)/1 "Manrope", system-ui, sans-serif; letter-spacing: -.045em; color: #2a2f33; }
  /* intro: FeuSh y la frase solo aparecen, suave */
  .brand, .motto { opacity: 0; animation: aparece 1.4s ease forwards; }
  .brand { animation-delay: .3s; }
  .motto { animation-delay: .9s; }
  .action { animation: aparece 1.4s ease 1.5s forwards; opacity: 0; }
  .action { pointer-events: auto; justify-self: center; margin-top: 28px; display: inline-flex; align-items: center; padding: 5px;
    border-radius: 999px; text-decoration: none; color: #fdfdfd;
    background: linear-gradient(100deg, rgba(100,120,119,.92) 0%, rgba(167,159,153,.88) 55%, rgba(202,174,153,.9) 100%);
    box-shadow: 0 14px 40px rgba(60,70,75,.18); transition: transform .3s cubic-bezier(.2,.7,.1,1), box-shadow .3s; }
  .action span { padding: 0 16px 0 14px; font: 400 13px "Manrope", system-ui, sans-serif; }
  .action b { display: grid; place-items: center; height: 40px; padding: 0 20px; border-radius: 999px; background: #fdfdfd; color: #2a2f33;
    font: 600 14px "Manrope", system-ui, sans-serif; }
  .action:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(60,70,75,.24); }
  @keyframes aparece { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .brand, .motto, .action { animation: none; opacity: 1; } }
  .motto { margin: 14px 0 0; font: 400 clamp(15px, 1.25vw, 19px)/1.4 "Manrope", system-ui, sans-serif; letter-spacing: -.01em; color: #6b7377; }

  /* ---------- la portada queda fija; el contenido sube por encima ---------- */
  .hero { position: fixed; inset: 0; z-index: 0; }
  .center { will-change: opacity, transform; }

  :root { --ink: #2a2f33; --gray: #6b7377; --sage: #647877; --peach: #caae99; --terracotta: #bc9885; --sky: #7ca4b6;
          --glass: linear-gradient(100deg, rgba(100,120,119,.92) 0%, rgba(167,159,153,.88) 55%, rgba(202,174,153,.9) 100%); }
  .cover-gap { height: 100vh; }
  .what, .path { position: relative; }
  .content { position: relative; z-index: 5; margin-top: 0; background: transparent;
    font-family: "Manrope", system-ui, sans-serif; color: var(--ink); }
  .handle { width: 44px; height: 4px; border-radius: 4px; background: rgba(42,47,51,.12); margin: 0 auto; position: relative; top: 16px; }
  .caption { font: 500 14px "Manrope", system-ui, sans-serif; letter-spacing: -.005em; color: var(--sage); }
  .title { font-weight: 500; font-size: clamp(36px, 4.4vw, 68px); letter-spacing: -.045em; line-height: 1.02; margin: 14px 0 0; max-width: 14ch; }
  .title em { font-style: normal; color: var(--terracotta); }

  /* 1. Qué es: las palabras se encienden al bajar */
  .what { height: 190vh; }
  .what .stuck { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; padding: 0 8vw; }
  .manifesto { font-weight: 400; font-size: clamp(30px, 3.6vw, 58px); line-height: 1.18; letter-spacing: -.035em; max-width: 21ch; margin: 18px 0 0; }
  .manifesto span { color: rgba(42,47,51,.14); transition: color .25s; }
  .manifesto span.on { color: var(--ink); }
  .manifesto span.on.cmd { color: var(--terracotta); }
  .manifesto .cmd { font-style: normal; }

  /* 2. De nueve pasos a uno */
  .path { height: 240vh; padding: 0 8vw; }
  .path .stuck { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr; padding-top: 13vh; box-sizing: border-box; }
  .section-title { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
  .counter { text-align: right; }
  .counter .figure { font-weight: 300; font-size: clamp(70px, 8vw, 128px); line-height: 1; letter-spacing: -.06em; }
  .counter .lbl { font: 400 14px "Manrope", system-ui, sans-serif; color: var(--gray); }
  #path-canvas { position: relative; }
  #path-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
  .step { z-index: 1; position: absolute; transform: translate(-50%, -50%); font-size: 13px; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
    background: #f3f4f4; color: var(--gray); box-shadow: inset 0 0 0 1px rgba(42,47,51,.08); transition: opacity .35s; }
  .step s { text-decoration-thickness: 1px; }
  .end { position: absolute; transform: translate(-50%, -31px); text-align: center; z-index: 2; }
  .end small { white-space: nowrap; }
  .end .ball { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center;
    background: var(--glass), #fdfdfd; color: #fdfdfd; font-weight: 500; font-size: 15px; box-shadow: 0 14px 34px rgba(60,70,75,.18); }
  .end small { font: 500 13px "Manrope", system-ui, sans-serif; color: var(--gray); }
  .final-id { position: absolute; transform: translate(-50%, -50%); opacity: 0; transition: opacity .45s; }
  .pill { display: inline-flex; align-items: center; padding: 5px; border-radius: 999px; background: var(--glass); color: #fdfdfd;
    text-decoration: none; box-shadow: 0 14px 40px rgba(60,70,75,.18); }
  .pill span { padding: 0 16px 0 14px; font: 400 13px "Manrope", system-ui, sans-serif; }
  .pill b { display: grid; place-items: center; height: 40px; padding: 0 20px; border-radius: 999px; background: #fdfdfd; color: var(--ink); font: 600 14px "Manrope", sans-serif; }

  /* Secciones nuevas: una idea por pantalla */
  .block { min-height: 100vh; display: grid; align-content: center; padding: 12vh 8vw; box-sizing: border-box; }
  .block .sub { font: 400 clamp(16px, 1.25vw, 19px)/1.55 "Manrope", sans-serif; color: var(--gray); max-width: 34em; margin: 18px 0 0; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 7vh; }
  .side small { display: block; font: 500 14px "Manrope", system-ui, sans-serif; color: var(--sage); margin-bottom: 12px; }
  .term { border-radius: 20px; padding: 0 0 18px;  background: rgba(42,47,51,.94); color: #e3e8e6; font: 400 13.5px/1.75 "JetBrains Mono", monospace;
    box-shadow: 0 30px 70px rgba(42,47,51,.18); overflow: hidden; }
  .term .bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; margin-bottom: 14px; background: rgba(255,255,255,.04); }
  .term .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
  .term .line { padding: 0 20px; white-space: pre-wrap; }
  .term .p { color: var(--peach); } .term .t { color: #93a7ae; } .term .ok { color: #b8d1c4; }
  .cur { display: inline-block; width: 8px; height: 15px; background: #e3e8e6; vertical-align: -2px; animation: parp 1s steps(1) infinite; }
  @keyframes parp { 50% { opacity: 0; } }

  .secs { display: grid; grid-template-columns: 1fr .9fr; gap: 7vw; align-items: center; }
  .log { margin-top: 30px; border-top: 1px solid rgba(42,47,51,.1); max-width: 520px; }
  .log div { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(42,47,51,.08);
    font: 400 14px "Manrope", system-ui, sans-serif; color: var(--ink); }
  .log span:first-child, .log span:last-child { color: var(--gray); }
  .request { border-radius: 30px; padding: 24px 20px 18px; background: var(--glass); color: #fdfdfd; box-shadow: 0 30px 80px rgba(60,70,75,.22); }
  .request .q { font: 500 13px "Manrope", system-ui, sans-serif; opacity: .85; }
  .request h3 { margin: 6px 0 4px; font: 500 28px "Manrope", sans-serif; letter-spacing: -.03em; }
  .request p { margin: 0 0 18px; font-size: 14px; opacity: .9; }
  .request .who { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.14); margin-bottom: 16px; }
  .request .who i { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--peach) 55%, var(--terracotta)); }
  .request .who b { display: block; font: 500 15px "Manrope", sans-serif; }
  .request .who span { font: 400 13px "Manrope", system-ui, sans-serif; opacity: .85; }
  .pills { display: flex; align-items: center; }
  .pills > div { background: #fdfdfd; color: var(--ink); height: 54px; display: grid; place-items: center; text-align: center; }
  .pills .c { width: 54px; border-radius: 50%; flex: none; }
  .pills .w { flex: 1; border-radius: 27px; margin: 0 -5px; position: relative; z-index: 1; font: 600 14px "Manrope", sans-serif; background: var(--ink); color: #fdfdfd; }
  .pills small { display: block; font-size: 9px; color: #8f989b; }
  .pills .n { font: 400 17px "Manrope", sans-serif; line-height: 1; }

  .ai-chat { display: grid; gap: 12px; max-width: 620px; margin-top: 6vh; }
  .bubble { padding: 15px 18px; border-radius: 20px; font: 400 15px/1.5 "Manrope", sans-serif; }
  .bubble.me { justify-self: end; background: var(--ink); color: #fdfdfd; border-bottom-right-radius: 6px; max-width: 80%; }
  .bubble.ai { background: rgba(253,253,253,.94); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42,47,51,.08); border-bottom-left-radius: 6px; max-width: 88%; }
  .bubble pre { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(42,47,51,.94); color: #e3e8e6; font: 400 12.5px/1.6 "JetBrains Mono", monospace; white-space: pre-wrap; }
  .bubble pre .p { color: var(--peach); }
  .os { display: flex !important; align-items: center; gap: 14px; padding: 0 18px 0 16px !important; color: #fdfdfd; }
  .os svg { width: 16px; height: 16px; display: block; opacity: .95; }
  .systems { display: flex; gap: 26px; justify-content: center; margin-top: 30px; color: rgba(42,47,51,.32); }
  .systems svg { width: 20px; height: 20px; display: block; transition: color .3s; }
  .systems span:hover { color: var(--ink); }
  .data { margin-top: 26px; font: 400 14px "Manrope", system-ui, sans-serif; color: var(--gray); }

  @media (max-width: 860px) { .two, .secs { grid-template-columns: 1fr; } }

  /* 3. Cierre */
  .closing { min-height: 90vh; display: grid; place-content: center; text-align: center; padding: 0 6vw; }
  .closing .title { margin: 14px auto 0; max-width: 16ch; }
  .closing .pill { margin: 34px auto 0; }
  .enters { will-change: opacity, transform, filter; }
  footer { display: flex; justify-content: space-between; padding: 28px 8vw 36px; font: 400 14px "Manrope", system-ui, sans-serif; color: var(--gray);
    border-top: 1px solid rgba(42,47,51,.08); }

  @media (max-width: 760px) {
    .section-title { flex-direction: column; align-items: start; } .counter { text-align: left; }
    .step { font-size: 11px; padding: 6px 10px; }
    .end .ball { width: 50px; height: 50px; font-size: 13px; }
    .end { transform: translate(-50%, -25px); }
    .final-id .pill span { white-space: nowrap; font-size: 12px; padding: 0 12px 0 12px; }
    .final-id .pill b { height: 36px; padding: 0 16px; font-size: 13px; }
  }