/* ============ TOKENS ============ */
:root {
  --bg: #060f0a;
  --bg-soft: #0b1a12;
  --bg-card: #0e1f15;
  --fg: #eef1e8;
  --fg-dim: #9fb3a3;
  --fg-faint: #5f7568;
  --line: rgba(238, 241, 232, 0.1);
  --line-strong: rgba(238, 241, 232, 0.2);
  --lime: #c3ff5c;
  --lime-soft: rgba(195, 255, 92, 0.14);
  --teal: #43e8c4;
  --violet: #a58bff;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  overflow-x: hidden;
  cursor: none;
}

@media (max-width: 860px), (hover: none) {
  body { cursor: auto; }
  .cursor-ring, .cursor-dot { display: none; }
}

a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
svg { display: block; width: 100%; height: 100%; }

::selection { background: var(--lime); color: var(--bg); }

/* ============ TEXTURE / CURSOR ============ */
.grain {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-ring, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
  transition: width .2s var(--ease), height .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.cursor-ring { width: 28px; height: 28px; border: 1px solid var(--line-strong); }
.cursor-dot { width: 4px; height: 4px; background: var(--lime); }
.cursor-ring.is-active { width: 52px; height: 52px; border-color: var(--lime); background: var(--lime-soft); }

#fireflies { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .8; }

/* ============ TYPE HELPERS ============ */
.tag {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lime);
}
.tag--dim { color: var(--fg-faint); }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-dim); margin-bottom: 1.75rem;
}
.eyebrow::before { content: "◆ "; color: var(--lime); }

em { font-style: italic; font-family: var(--font-display); color: var(--lime); }

/* ============ REVEAL ANIM ============ */
.reveal, [data-reveal-block] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in, [data-reveal-block].is-in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="0"] { transition-delay: .05s; }
.reveal[data-delay="1"] { transition-delay: .2s; }
.reveal[data-delay="2"] { transition-delay: .35s; }
.reveal[data-delay="3"] { transition-delay: .5s; }
.reveal[data-delay="4"] { transition-delay: .65s; }
.reveal[data-delay="5"] { transition-delay: .9s; }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem clamp(1.5rem, 5vw, 4rem);
  backdrop-filter: blur(6px);
}
.nav__mark {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em;
}
.nav__mark--small { font-size: 1rem; }
.nav__mark-icon { display: inline-block; width: 20px; height: 20px; color: var(--lime); flex-shrink: 0; }
.nav__links { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.2rem); }
.nav__links a { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--fg-dim); transition: color .25s var(--ease); display: flex; gap: .4em; }
.nav__links a span { color: var(--fg-faint); }
.nav__links a:hover { color: var(--fg); }
.nav__cta {
  padding: 0.55rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--fg) !important;
}
.nav__cta:hover { border-color: var(--lime); color: var(--lime) !important; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; position: relative; z-index: 101; }
.nav__toggle span { width: 22px; height: 1.5px; background: var(--fg); }

@media (max-width: 780px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column; align-items: flex-start;
    background: var(--bg-soft); padding: 6rem 2rem 3rem; gap: 1.6rem;
    transform: translateY(-100%); transition: transform .4s var(--ease); border-bottom: 1px solid var(--line);
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__links a { font-size: 1rem; }
}

/* ============ HERO ============ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 8rem clamp(1.5rem, 6vw, 5rem) 5rem; overflow: hidden;
}
.hero__roots { position: absolute; inset: 0; color: var(--line-strong); z-index: 0; opacity: .55; }
.hero__glow {
  position: absolute; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, var(--lime-soft) 0%, transparent 70%);
  border-radius: 50%; top: 10%; right: -10%; filter: blur(10px); z-index: 0;
  transition: transform .3s ease-out;
}
.hero__rings {
  position: absolute; top: 50%; right: clamp(-4rem, 2vw, 4rem); z-index: 1;
  width: min(38vw, 480px); aspect-ratio: 1; transform: translateY(-50%);
  color: var(--line-strong); pointer-events: none;
}
.hero__rings svg { animation: ringSpin 90s linear infinite; }
.hero__rings .ring { fill: none; stroke: currentColor; stroke-width: 1; }
.hero__rings .ring:nth-child(1) { stroke: var(--lime); opacity: .55; }
.hero__rings .ring:nth-child(3) { stroke: var(--teal); opacity: .35; }
.hero__rings .ring:nth-child(5) { opacity: .4; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.hero__rings-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint);
  text-align: center; line-height: 1.6;
}
@media (max-width: 980px) { .hero__rings { display: none; } }

.hero__inner { position: relative; z-index: 2; max-width: 900px; }
.hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1.02; letter-spacing: -0.02em;
}
.hero__title span { display: block; }
.reveal--italic { font-style: italic; font-weight: 400; color: var(--lime); }
.hero__lede {
  font-family: var(--font-mono); font-size: clamp(0.92rem, 1.4vw, 1.05rem); color: var(--fg-dim);
  max-width: 46ch; line-height: 1.7; margin: 2rem 0 2.75rem;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn {
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.03em;
  padding: 0.95rem 1.6rem; border-radius: 999px; transition: all .3s var(--ease);
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn--primary { background: var(--lime); color: #08150c; font-weight: 500; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(195,255,92,.5); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--lime); color: var(--lime); }

.hero__scroll {
  position: absolute; bottom: 2.5rem; left: clamp(1.5rem, 6vw, 5rem);
  display: flex; align-items: center; gap: .8rem; z-index: 2;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint);
}
.hero__scroll-line { width: 1px; height: 44px; background: var(--line-strong); position: relative; overflow: hidden; }
.hero__scroll-line i { position: absolute; top: -44px; left: 0; width: 100%; height: 44px; background: var(--lime); animation: scrollDrip 2.2s ease-in-out infinite; }
@keyframes scrollDrip { 0% { top: -44px; } 60% { top: 44px; } 100% { top: 44px; } }

/* ============ SECTION SHARED ============ */
section { position: relative; z-index: 2; padding: 7rem clamp(1.5rem, 6vw, 5rem); }
.section-head { max-width: 640px; margin-bottom: 3.5rem; }
.section-head--left { max-width: none; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem);
  margin: .9rem 0 .6rem; letter-spacing: -0.01em;
}
.section-head p { color: var(--fg-dim); font-size: .92rem; max-width: 46ch; }

/* ============ MANIFESTO ============ */
.manifiesto { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.manifiesto__label { display: flex; gap: 1rem; margin-bottom: 2.5rem; }
.manifiesto__top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
.manifiesto__quote p {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.35; max-width: 20ch; color: var(--fg);
}
.manifiesto__graphic {
  position: relative; border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-card); overflow: hidden; padding: 1.2rem;
}
.manifiesto__graphic canvas { display: block; width: 100%; height: 220px; }
.manifiesto__graphic-label {
  position: absolute; left: 1.2rem; bottom: 1rem; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-faint);
}
@media (max-width: 860px) { .manifiesto__top { grid-template-columns: 1fr; } }
.manifiesto__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem;
  margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--line);
}
.manifiesto__col { display: flex; gap: 1.2rem; }
.manifiesto__col .num { color: var(--lime); font-size: 1.2rem; }
.manifiesto__col p { color: var(--fg-dim); font-size: .9rem; line-height: 1.7; }
@media (max-width: 720px) { .manifiesto__grid { grid-template-columns: 1fr; } }

/* ============ CAPACIDADES ============ */
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cap-card {
  background: var(--bg); padding: 2.4rem 1.8rem; position: relative; overflow: hidden;
  transition: background .35s var(--ease);
}
.cap-card:hover { background: var(--bg-card); }
.cap-card::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--lime);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.cap-card:hover::before { transform: scaleX(1); }
.cap-card__num { font-size: .78rem; color: var(--fg-faint); }
.cap-card__icon { display: inline-block; width: 34px; height: 34px; color: var(--lime); margin: 1.4rem 0 1.6rem; }
.cap-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin-bottom: .7rem; letter-spacing: -0.01em; }
.cap-card p { color: var(--fg-dim); font-size: .85rem; line-height: 1.6; }
@media (max-width: 980px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }

/* ============ PROCESO ============ */
.proceso__timeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem;
  position: relative; padding-top: 2.5rem;
}
.proceso__timeline::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-strong);
}
.proceso__progress {
  position: absolute; top: 0; left: 0; right: 0; height: 1px; padding: 0; overflow: hidden;
}
.proceso__progress i {
  display: block; height: 100%; width: 0; background: var(--lime);
  box-shadow: 0 0 12px var(--lime); transition: width 1.8s var(--ease);
}
.proceso__timeline.is-charged .proceso__progress i { width: 100%; }
.proceso__timeline li:not(.proceso__progress) { position: relative; padding-top: 1.5rem; }
.proceso__timeline li:not(.proceso__progress)::before {
  content: ""; position: absolute; top: -5.5px; left: 0; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--lime); z-index: 1;
}
.proceso__mark {
  font-family: var(--font-display); font-style: italic; color: var(--lime); font-size: 1.1rem; display: block; margin-bottom: .6rem;
}
.proceso__timeline h3 { font-size: 1.02rem; margin-bottom: .6rem; font-weight: 500; }
.proceso__timeline p { color: var(--fg-dim); font-size: .84rem; line-height: 1.6; }
@media (max-width: 780px) {
  .proceso__timeline { grid-template-columns: 1fr; gap: 2.2rem; }
  .proceso__timeline::before { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .proceso__progress { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .proceso__progress i { width: 100%; height: 0; }
  .proceso__timeline.is-charged .proceso__progress i { height: 100%; width: 100%; }
  .proceso__timeline li:not(.proceso__progress) { padding: 0 0 0 1.8rem; }
  .proceso__timeline li:not(.proceso__progress)::before { top: 6px; left: -5.5px; }
}

/* ============ VIVERO ============ */
.vivero { background: var(--bg-soft); border-top: 1px solid var(--line); }
.vivero__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.vivero-card {
  border: 1px dashed var(--line-strong); border-radius: 14px; padding: 2.6rem 1.8rem;
  text-align: center; transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.vivero-card:hover { border-color: var(--lime); transform: translateY(-4px); }
.vivero-card__seed { display: inline-block; width: 40px; height: 40px; margin: 0 auto 1.4rem; color: var(--teal); }
.vivero-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin-bottom: .4rem; }
.vivero-card p { color: var(--fg-faint); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 780px) { .vivero__grid { grid-template-columns: 1fr; } }

/* ============ CONTACTO ============ */
.contacto {
  min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    radial-gradient(60% 50% at 50% 30%, var(--lime-soft) 0%, transparent 70%),
    var(--bg);
}
.contacto__inner { max-width: 780px; }
.contacto__title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.15; margin: 1.2rem 0 2.5rem;
}
.contacto__note { color: var(--fg-dim); font-size: .88rem; margin-bottom: 3rem; }
.contacto__note .tag { margin-right: .4rem; }

.contacto__form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.5rem;
  text-align: left; max-width: 640px; margin: 0 auto;
}
.field--wide { grid-column: 1 / -1; }
.field label {
  display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: .6rem;
}
.field input, .field textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line-strong);
  color: var(--fg); font-family: var(--font-mono); font-size: .92rem; padding: .5rem 0;
  resize: vertical; transition: border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--lime); box-shadow: 0 1px 0 0 var(--lime);
}
.contacto__form-foot { display: flex; align-items: center; gap: 1.4rem; margin-top: .5rem; }
.contacto__status { font-size: .8rem; color: var(--teal); }
@media (max-width: 620px) { .contacto__form { grid-template-columns: 1fr; } }

/* ============ FOOTER ============ */
.footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 2.5rem clamp(1.5rem, 6vw, 5rem) 3rem; border-top: 1px solid var(--line);
  color: var(--fg-faint); font-size: .78rem;
}