/* ============================================================
   MemoCloner — dark tech, atmósfera, memoria viva
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:#07080d;
  --bg-2:#0c0e17;
  --panel:#111420;
  --ink:#eef0f7;
  --muted:#8b90a6;
  --line:rgba(255,255,255,.09);
  --cyan:#39e6ff;
  --violet:#8b5cff;
  --amber:#ffb35c;
  --glow:0 0 60px rgba(57,230,255,.25);
  --display:'Fraunces', Georgia, serif;
  --sans:'Space Grotesk', system-ui, sans-serif;
  --mono:'JetBrains Mono', monospace;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink); background:var(--bg);
  font-family:var(--sans); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Atmósfera de fondo: aureolas de color + grano */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 78% -8%, rgba(139,92,255,.20), transparent 60%),
    radial-gradient(50vw 50vw at 8% 12%, rgba(57,230,255,.14), transparent 55%),
    radial-gradient(70vw 50vw at 50% 118%, rgba(255,179,92,.10), transparent 60%),
    var(--bg);
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color:inherit; text-decoration:none; }

/* Reveal on load */
@keyframes rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.hero > *, .section-label, .proof-heading, .steps ol, .privacy-grid, .price-row, .price ul, .waitlist { animation:rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero .kicker { animation-delay:.05s; } .hero h1 { animation-delay:.15s; }
.hero-copy { animation-delay:.3s; } .hero-actions { animation-delay:.45s; } .local-mark { animation-delay:.6s; }
@media (prefers-reduced-motion:reduce) { *{ animation:none!important; scroll-behavior:auto; } }

/* Header */
.site-header {
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 5vw; backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(7,8,13,.85), rgba(7,8,13,.35));
  border-bottom:1px solid var(--line);
}
.logo { font-family:var(--mono); font-weight:500; letter-spacing:-.02em; display:flex; align-items:center; gap:9px; }
.logo span {
  display:inline-grid; place-items:center; width:30px; height:30px; font-size:11px; font-weight:700;
  color:#04111a; border-radius:9px;
  background:linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow:0 0 18px rgba(57,230,255,.5);
}
.header-cta {
  font-family:var(--mono); font-size:12.5px; padding:9px 15px; border-radius:999px;
  border:1px solid var(--line); color:var(--cyan);
  transition:.25s; background:rgba(57,230,255,.05);
}
.header-cta:hover { border-color:var(--cyan); box-shadow:var(--glow); }

.section-label,.kicker { font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin:0 0 20px; }

/* Hero */
.hero { position:relative; min-height:88vh; padding:16vh 5vw 10vh; display:flex; flex-direction:column; justify-content:center; }
h1 { margin:0 0 26px; font-family:var(--display); font-weight:300; font-size:clamp(52px,9vw,140px); line-height:.9; letter-spacing:-.03em; }
h1 em { font-style:italic; background:linear-gradient(120deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-copy { max-width:560px; font-size:clamp(17px,1.7vw,22px); color:#c3c7d6; }
.hero-actions { display:flex; align-items:center; gap:26px; margin-top:34px; flex-wrap:wrap; }
.button { display:inline-block; padding:15px 26px; border-radius:12px; font-weight:700; font-family:var(--sans); transition:.28s; }
.button--dark { color:#04111a; background:linear-gradient(135deg,var(--cyan),#7fe9ff); box-shadow:0 8px 30px rgba(57,230,255,.3); }
.button--dark:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(57,230,255,.5); }
.button--light { color:#04111a; background:linear-gradient(135deg,var(--cyan),var(--violet)); box-shadow:0 8px 30px rgba(139,92,255,.35); }
.button--light:hover { transform:translateY(-2px); box-shadow:0 12px 44px rgba(139,92,255,.55); }
.text-link { font-family:var(--mono); font-size:13px; color:var(--muted); transition:.2s; }
.text-link:hover { color:var(--ink); } .text-link span { color:var(--cyan); margin-left:6px; }
.local-mark { margin-top:46px; font-family:var(--mono); font-size:12.5px; color:var(--muted); display:flex; align-items:center; }
.local-mark i { width:8px; height:8px; border-radius:50%; background:#2ee6a0; margin-right:9px; box-shadow:0 0 12px #2ee6a0; animation:pulse 2.2s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* Nodo memoria */
.memory-line { display:flex; align-items:center; gap:0; padding:40px 5vw; background:linear-gradient(90deg,rgba(139,92,255,.10),rgba(57,230,255,.10)); border-block:1px solid var(--line); }
.memory-node { flex:0 0 auto; font-family:var(--mono); font-size:12.5px; padding:11px 15px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.02); color:#c3c7d6; }
.memory-node--core { display:grid; place-items:center; width:52px; height:52px; padding:0; font-weight:700; color:#04111a; border:none; border-radius:14px; background:linear-gradient(135deg,var(--cyan),var(--violet)); box-shadow:0 0 30px rgba(57,230,255,.5); animation:pulse 2.6s infinite; }
.memory-wire { flex:1; min-width:30px; height:2px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); background-size:200% 100%; animation:flow 2.5s linear infinite; }
@keyframes flow { from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* Secciones */
.proof,.steps,.privacy,.price { padding:15vh 5vw; position:relative; }
.proof { background:var(--bg-2); border-block:1px solid var(--line); }
.proof-heading { display:grid; grid-template-columns:1.3fr .7fr; gap:6vw; max-width:1120px; }
h2 { font-family:var(--display); font-weight:300; font-size:clamp(38px,6vw,80px); line-height:.98; letter-spacing:-.02em; margin:0; }
.proof-heading p { align-self:end; color:var(--muted); }
.project-switch { display:flex; gap:10px; margin:64px 0 0; }
.project-tab { font-family:var(--mono); font-size:13px; border:1px solid var(--line); background:transparent; color:var(--muted); padding:12px 18px; border-radius:10px; cursor:pointer; transition:.25s; }
.project-tab:hover { color:var(--ink); border-color:var(--cyan); }
.project-tab.is-active { background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#04111a; border-color:transparent; }
.context-card { max-width:780px; margin-top:18px; padding:52px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01)); box-shadow:0 30px 80px rgba(0,0,0,.4); backdrop-filter:blur(8px); }
.card-label { font-family:var(--mono); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--cyan); }
.context-card h3 { font-family:var(--display); font-weight:300; font-size:clamp(28px,4vw,52px); letter-spacing:-.02em; margin:.3em 0 .35em; }
.context-card > p:not(.card-label):not(.context-result) { max-width:600px; color:#c3c7d6; }
.context-tags { display:flex; flex-wrap:wrap; gap:9px; margin:26px 0; }
.context-tags span { font-family:var(--mono); font-size:12px; padding:7px 11px; border-radius:8px; border:1px solid var(--line); color:var(--muted); }
.context-result { margin:0; padding-top:22px; border-top:1px solid var(--line); font-size:18px; font-family:var(--display); font-style:italic; color:var(--ink); }

/* Steps */
.steps { max-width:1120px; }
.steps ol { margin:60px 0 0; padding:0; list-style:none; }
.steps li { display:grid; grid-template-columns:90px 1fr; gap:24px; padding:30px 0; border-top:1px solid var(--line); transition:.3s; }
.steps li:hover { padding-left:12px; }
.steps li span { font-family:var(--mono); font-size:14px; color:var(--cyan); }
.steps h3 { font-family:var(--display); font-weight:400; font-size:26px; letter-spacing:-.01em; margin:0 0 8px; }
.steps p { color:var(--muted); margin:0; }

/* Privacy */
.privacy { background:var(--bg-2); border-block:1px solid var(--line); }
.privacy h2 { margin-bottom:64px; }
.privacy-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.privacy-grid p { margin:0; padding:26px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--muted); transition:.3s; }
.privacy-grid p:hover { border-color:var(--cyan); box-shadow:var(--glow); transform:translateY(-4px); }
.privacy-grid b { display:block; color:var(--ink); margin-bottom:9px; font-family:var(--mono); font-size:14px; }

/* Price + waitlist */
.price { text-align:left; }
.price::before { content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(50vw 40vw at 80% 20%,rgba(139,92,255,.18),transparent 60%); pointer-events:none; }
.price > * { position:relative; z-index:1; }
.price-row { display:flex; align-items:baseline; gap:22px; margin:26px 0; flex-wrap:wrap; }
.price-row strong { font-family:var(--display); font-weight:300; font-size:clamp(64px,9vw,120px); letter-spacing:-.03em; background:linear-gradient(120deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.price-row span { color:var(--muted); font-family:var(--mono); font-size:13px; }
.price ul { margin:0 0 44px; padding:0; list-style:none; max-width:580px; }
.price li { padding:14px 0; border-top:1px solid var(--line); color:#c3c7d6; padding-left:26px; position:relative; }
.price li::before { content:"→"; position:absolute; left:0; color:var(--cyan); }
.fine-print { font-family:var(--mono); font-size:12.5px; color:var(--muted); max-width:420px; margin:16px 0 0; line-height:1.5; }

/* Lista de espera */
.waitlist { max-width:560px; margin-top:8px; padding:30px; border-radius:18px; border:1px solid var(--line); background:linear-gradient(160deg,rgba(139,92,255,.10),rgba(57,230,255,.05)); box-shadow:0 30px 80px rgba(0,0,0,.4); }
.waitlist-title { font-family:var(--display); font-size:26px; font-weight:400; margin:0 0 .3em; }
.waitlist-sub { color:var(--muted); margin:0 0 1.1em; font-size:15px; }
.waitlist-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.waitlist-row input { flex:1 1 220px; min-width:0; padding:15px 16px; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.35); color:var(--ink); font-family:var(--mono); font-size:15px; transition:.25s; }
.waitlist-row input::placeholder { color:#5c6178; }
.waitlist-row input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(57,230,255,.15); }
.waitlist-row .button { flex:0 0 auto; }
@media (max-width:480px){ .waitlist-row .button{ flex:1 1 100%; } }

/* Footer */
footer { display:flex; justify-content:space-between; gap:20px; padding:30px 5vw; border-top:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:12px; }

a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }

@media (max-width:760px){
  .site-header{ padding:16px 6vw; } .header-cta{ display:none; }
  .hero{ min-height:80vh; padding:14vh 6vw 9vh; }
  .hero-actions{ gap:16px; }
  .proof-heading,.privacy-grid{ grid-template-columns:1fr; gap:20px; }
  .project-switch{ overflow:auto; margin-top:44px; } .context-card{ padding:30px; }
  .steps li{ grid-template-columns:52px 1fr; } .memory-node{ font-size:11px; } footer{ flex-direction:column; }
}