/* ============================================================
   Copiloto — sitio público
   Tema oscuro tomado de la app (azul-noche + turquesa) para que
   web y app se sientan la misma marca. El semáforo es la firma.
   ============================================================ */

:root {
  --bg:        #0A0E14;
  --surface:   #121821;
  --surface-2: #1A2230;
  --line:      #26303F;
  --turq:      #00E5D3;
  --turq-dim:  #0FB5A8;
  --verde:     #19D07B;
  --amarillo:  #F6C324;
  --rojo:      #E24B4A;
  --text:      #E8EDF2;
  --text-dim:  #8A97A6;

  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Space Grotesk', var(--sans);
  --mono: 'Space Mono', ui-monospace, monospace;

  --wrap: 1080px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- sutil textura de fondo: haz de luz turquesa arriba --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(0,229,211,0.10), transparent 60%),
    radial-gradient(700px 500px at 10% 8%, rgba(25,208,123,0.05), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; }

a { color: var(--turq); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- Header ---------------- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(10,14,20,0.72);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--text); }
.brand:hover { text-decoration: none; }
.dot-stack { display: flex; flex-direction: column; gap: 3px; }
.dot-stack span { width: 9px; height: 9px; border-radius: 50%; opacity: 0.35; }
.dot-stack .r { background: var(--rojo); }
.dot-stack .y { background: var(--amarillo); }
.dot-stack .g { background: var(--verde); opacity: 1; box-shadow: 0 0 9px var(--verde); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--text-dim); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--text); text-decoration: none; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--turq); color: #04211E;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  padding: 11px 20px; border-radius: 11px; border: 0; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 26px rgba(0,229,211,0.28); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--turq); box-shadow: none; }

/* ---------------- Hero ---------------- */
.hero { padding: 78px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--turq); border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px; margin-bottom: 22px;
}
.eyebrow b { color: var(--verde); }
h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(36px, 6vw, 58px); line-height: 1.03; color: var(--text);
}
h1 .hl { color: var(--turq); }
.hero p.lead { margin-top: 20px; font-size: 19px; color: var(--text-dim); max-width: 30em; }
.hero-cta { margin-top: 30px; display: flex; gap: 13px; flex-wrap: wrap; align-items: center; }
.hero-note { margin-top: 15px; font-size: 14px; color: var(--text-dim); font-family: var(--mono); }

/* ---------------- Tarjeta-semáforo (firma) ---------------- */
.veredicto {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: 20px; padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
}
.v-plataforma { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.v-precio { font-family: var(--mono); font-weight: 700; font-size: 46px; letter-spacing: -0.02em; color: var(--text); margin: 6px 0 2px; }
.v-meta { color: var(--text-dim); font-size: 15px; }
.v-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.chip { font-family: var(--mono); font-size: 12.5px; padding: 5px 10px; border-radius: 8px; background: rgba(0,229,211,0.08); color: var(--turq); border: 1px solid rgba(0,229,211,0.18); }

.semaforo { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; background: #060A0F; border: 1px solid var(--line); border-radius: 16px; }
.luz { width: 40px; height: 40px; border-radius: 50%; background: #1b222c; position: relative; }
.luz.on.r { background: var(--rojo); box-shadow: 0 0 22px 2px rgba(226,75,74,0.75); }
.luz.on.y { background: var(--amarillo); box-shadow: 0 0 22px 2px rgba(246,195,36,0.7); }
.luz.on.g { background: var(--verde); box-shadow: 0 0 26px 3px rgba(25,208,123,0.85); }
.veredicto-tag { margin-top: 16px; grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 15px; }
.veredicto-tag .badge { font-family: var(--display); font-weight: 700; font-size: 15px; padding: 7px 14px; border-radius: 9px; background: rgba(25,208,123,0.14); color: var(--verde); border: 1px solid rgba(25,208,123,0.3); }
.veredicto-tag span { color: var(--text-dim); font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .luz.on.g { animation: latido 2.4s ease-in-out infinite; }
  @keyframes latido { 0%,100% { box-shadow: 0 0 26px 3px rgba(25,208,123,0.85); } 50% { box-shadow: 0 0 34px 6px rgba(25,208,123,1); } }
}

/* ---------------- Secciones ---------------- */
section { padding: 68px 0; position: relative; z-index: 1; }
.sec-eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--turq-dim); margin-bottom: 12px; }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.02em; line-height: 1.1; }
h2 + p.sub { color: var(--text-dim); margin-top: 12px; max-width: 40em; font-size: 18px; }

.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.paso { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; }
.paso .n { font-family: var(--mono); font-size: 13px; color: var(--turq); border: 1px solid var(--line); width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 16px; }
.paso h3 { font-family: var(--display); font-weight: 500; font-size: 19px; margin-bottom: 8px; }
.paso p { color: var(--text-dim); font-size: 15.5px; }

.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.feat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; }
.feat .ic { font-size: 22px; margin-bottom: 12px; }
.feat h3 { font-family: var(--display); font-weight: 500; font-size: 18px; margin-bottom: 7px; }
.feat p { color: var(--text-dim); font-size: 15px; }

/* ---------------- Precios ---------------- */
.precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; }
.plan.destacado { border-color: var(--turq); box-shadow: 0 0 0 1px var(--turq), 0 20px 60px rgba(0,229,211,0.12); }
.plan .etq { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.plan.destacado .etq { color: var(--turq); }
.plan .monto { font-family: var(--display); font-weight: 700; font-size: 40px; margin: 10px 0 2px; letter-spacing: -0.02em; }
.plan .monto small { font-size: 16px; color: var(--text-dim); font-weight: 500; }
.plan .desc { color: var(--text-dim); font-size: 15px; margin-bottom: 4px; }

/* ---------------- CTA final ---------------- */
.cta-final { text-align: center; background: linear-gradient(180deg, var(--surface), var(--bg)); border: 1px solid var(--line); border-radius: 22px; padding: 54px 24px; margin: 12px 0 0; }
.cta-final h2 { margin-bottom: 12px; }
.cta-final p { color: var(--text-dim); max-width: 34em; margin: 0 auto 26px; }

/* ---------------- Footer ---------------- */
footer { border-top: 1px solid var(--line); padding: 34px 0; margin-top: 68px; position: relative; z-index: 1; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
footer .brand { font-size: 16px; }
footer nav { display: flex; gap: 22px; }
footer nav a, footer small { color: var(--text-dim); font-size: 14px; }

/* ---------------- Páginas de texto (privacidad, gracias) ---------------- */
.pagina { padding: 66px 0; max-width: 760px; }
.pagina h1 { font-size: clamp(30px, 5vw, 44px); }
.pagina h2 { font-size: 22px; margin-top: 38px; margin-bottom: 8px; }
.pagina p, .pagina li { color: var(--text-dim); font-size: 16.5px; margin-top: 12px; }
.pagina ul { margin-top: 12px; padding-left: 22px; }
.pagina li { margin-top: 8px; }
.pagina .fecha { font-family: var(--mono); font-size: 13px; color: var(--text-dim); margin-top: 8px; }
.pagina strong { color: var(--text); font-weight: 600; }

/* ---------------- Estado (gracias / cancelado) ---------------- */
.estado { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 40px 22px; }
.estado .card { max-width: 500px; }
.estado .big-luz { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 26px; }
.estado .big-luz.g { background: var(--verde); box-shadow: 0 0 40px 6px rgba(25,208,123,0.6); }
.estado .big-luz.y { background: var(--amarillo); box-shadow: 0 0 40px 6px rgba(246,195,36,0.55); }
.estado h1 { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; }
.estado p { color: var(--text-dim); margin: 16px 0 28px; font-size: 17px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .pasos, .feats, .precios { grid-template-columns: 1fr; }
  .nav-links a:not(.btn) { display: none; }
}