:root {
  --noche: #0B0E0C;
  --tierra: #111612;
  --linea: #1E2621;
  --musgo: #6A756E;
  --niebla: #E7ECE5;
  --brote: #B8F36B;

  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --margen: clamp(20px, 5vw, 72px);
  --ancho: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--noche);
  color: var(--niebla);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brote);
  outline-offset: 3px;
}
b { color: var(--brote); font-weight: inherit; }
canvas { image-rendering: pixelated; display: block; }

/* ---------- Barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--margen);
  background: color-mix(in srgb, var(--noche) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 19px/1 var(--mono); letter-spacing: -0.04em; text-decoration: none;
}
.barra-links { display: flex; gap: 28px; font: 400 13px/1 var(--mono); color: var(--musgo); }
.barra-links a { text-decoration: none; transition: color .15s; }
.barra-links a:hover { color: var(--niebla); }
.barra-x { color: var(--niebla); }
@media (max-width: 720px) {
  .barra-links a:not(.barra-x), .barra-links a[href*="t.me"] { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  max-width: var(--ancho); margin: 0 auto;
  min-height: calc(100svh - 61px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center; gap: clamp(32px, 6vw, 96px);
  padding: clamp(48px, 8vh, 96px) var(--margen);
}
/* La grilla del jardín: la misma unidad que los pixeles de la planta */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 70% at 72% 50%, #000 20%, transparent 75%);
  opacity: .7;
}

.hero-texto { min-width: 0; }
.ceja { margin: 0 0 28px; font: 400 13px/1 var(--mono); color: var(--musgo); letter-spacing: 0.02em; }

.titular {
  margin: 0;
  font: 500 clamp(56px, 9.2vw, 132px)/0.92 var(--mono);
  letter-spacing: -0.075em;
}
.titular span { display: block; }

.bajada { margin: 32px 0 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: color-mix(in srgb, var(--niebla) 78%, var(--musgo)); }

.contrato {
  margin-top: 40px; max-width: 520px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--linea); border-radius: 4px; background: var(--tierra);
}
.contrato-label { font: 400 12px/1 var(--mono); color: var(--musgo); text-transform: uppercase; letter-spacing: 0.12em; }
.contrato-valor { flex: 1; min-width: 0; font: 400 14px/1.3 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contrato-valor[data-vacio] { color: var(--musgo); }
.contrato-copiar {
  font: 500 12px/1 var(--mono); color: var(--noche); background: var(--brote);
  border: 0; border-radius: 3px; padding: 8px 10px; cursor: pointer;
}
.contrato-nota { margin: 12px 0 0; max-width: 520px; font-size: 14px; color: var(--musgo); }
.contrato-nota a { color: var(--niebla); }

.acciones { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 20px; border-radius: 4px;
  font: 500 14px/1 var(--mono); letter-spacing: -0.01em; text-decoration: none;
  color: var(--niebla); background: transparent; border: 1px solid var(--linea); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.boton:hover:not(:disabled) { border-color: var(--musgo); }
.boton:disabled { color: var(--musgo); cursor: not-allowed; }
.boton-lleno { background: var(--brote); color: var(--noche); border-color: var(--brote); }
.boton-lleno:hover { background: #c7f784; border-color: #c7f784; }

/* ---------- La planta que crece ---------- */
.jardin { margin: 0; justify-self: center; width: min(100%, 440px); }
.jardin canvas {
  width: 100%; height: auto; aspect-ratio: 1;
  background: var(--tierra); border: 1px solid var(--linea); border-radius: 4px;
}
.jardin-pie {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; font: 400 13px/1 var(--mono); color: var(--musgo);
}
.jardin-reloj span { color: var(--niebla); font-variant-numeric: tabular-nums; }
.jardin-etapa { color: var(--brote); }
.jardin-nota { margin: 10px 0 0; font-size: 13px; color: var(--musgo); }

@media (max-width: 880px) {
  /* minmax(0, 1fr) y no 1fr: con 1fr la columna crece hasta el ancho de la dirección
     del contrato (que no se corta) y la portada se sale de la pantalla en celular. */
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .hero::before { mask-image: radial-gradient(ellipse 90% 50% at 50% 78%, #000 20%, transparent 75%); }
  .jardin { width: min(100%, 360px); }
}

/* ---------- Secciones ---------- */
.seccion {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(72px, 12vh, 140px) var(--margen) 0;
}
.seccion-titulo {
  margin: 0; padding-bottom: 20px; border-bottom: 1px solid var(--linea);
  font: 500 clamp(28px, 3.6vw, 44px)/1.05 var(--mono); letter-spacing: -0.06em;
}
.seccion-bajada { margin: 20px 0 0; max-width: 60ch; color: var(--musgo); }

/* Regla de etapas: es una secuencia real (el tiempo), por eso va en orden y conectada */
.regla {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.regla-paso {
  position: relative;
  display: grid; justify-items: start; gap: 6px;
  padding: 0 12px 0 0;
}
.regla-paso::after {
  content: ''; position: absolute; left: 104px; right: 12px; top: 48px;
  height: 1px; background: var(--linea);
}
.regla-paso:last-child::after { display: none; }
.regla-paso canvas { width: 96px; height: 96px; margin-bottom: 14px; }
.regla-nombre { font: 500 20px/1.1 var(--mono); letter-spacing: -0.04em; }
.regla-tiempo { font: 400 13px/1 var(--mono); color: var(--musgo); }
@media (max-width: 1080px) { .regla-paso::after { display: none; } }
@media (max-width: 720px) {
  .regla { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .regla-paso::after { display: none; }
}

.hechos { margin: 12px 0 0; }
.hecho {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--linea);
}
.hecho dt { font: 400 13px/1.6 var(--mono); color: var(--musgo); }
.hecho dd { margin: 0; max-width: 62ch; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; }
@media (max-width: 720px) { .hecho { grid-template-columns: 1fr; gap: 6px; } }

.buscador { margin-top: 36px; max-width: 760px; }
.buscador-label { display: block; margin-bottom: 10px; font: 400 13px/1 var(--mono); color: var(--musgo); }
.buscador-fila { display: flex; gap: 10px; }
.buscador input {
  flex: 1; min-width: 0; padding: 14px 16px;
  font: 400 15px/1 var(--mono); color: var(--niebla);
  background: var(--tierra); border: 1px solid var(--linea); border-radius: 4px;
}
.buscador input::placeholder { color: var(--musgo); }
.buscador input:disabled { opacity: .6; }
.buscador-estado { margin: 14px 0 0; font-size: 14px; color: var(--musgo); }
@media (max-width: 560px) { .buscador-fila { flex-direction: column; } }
.buscador-estado[data-error] { color: #E7A08A; }

.resultado {
  margin-top: 28px; max-width: 760px;
  display: grid; grid-template-columns: 192px 1fr; gap: 32px; align-items: center;
  padding: 24px; border: 1px solid var(--linea); border-radius: 4px; background: var(--tierra);
}
.resultado-planta { width: 192px; height: 192px; }
.resultado-datos { margin: 0; display: grid; gap: 14px; }
.resultado-datos div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: baseline; }
.resultado-datos dt { font: 400 13px/1.4 var(--mono); color: var(--musgo); }
.resultado-datos dd { margin: 0; font: 500 17px/1.4 var(--mono); letter-spacing: -0.02em; }
#r-etapa { color: var(--brote); }
.resultado-compartir { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 641px) { .resultado-compartir { grid-column: 2; } }
@media (max-width: 640px) {
  .resultado { grid-template-columns: 1fr; justify-items: start; }
  .resultado-datos div { grid-template-columns: 1fr; gap: 2px; }
}

.reglas { list-style: none; margin: 12px 0 0; padding: 0; }
.reglas li {
  display: flex; gap: 20px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--linea);
  font-size: clamp(17px, 1.6vw, 21px);
}
.reglas-marca { font: 500 16px/1 var(--mono); color: var(--brote); flex: none; width: 16px; }

/* ---------- Pie ---------- */
.pie {
  max-width: var(--ancho); margin: clamp(96px, 16vh, 180px) auto 0;
  padding: 0 var(--margen) 48px;
}
.pie-aviso { margin: 0; max-width: 70ch; font-size: 14px; color: var(--musgo); }
.pie-fila {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linea);
  font: 400 13px/1 var(--mono); color: var(--musgo);
}
.pie-marca { font: 500 15px/1 var(--mono); color: var(--niebla); letter-spacing: -0.04em; }
.pie-fila a { text-decoration: none; }
.pie-links { display: flex; gap: 24px; }