:root{
  --brand:#3b82f6;        /* acento */
  --brand-ink:#0b1220;    /* texto principal */
  --brand-soft:#eef4ff;   /* fondos suaves */
  --surface:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --ring: rgba(59,130,246,.35);
}

/* Reset y tipografía */
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:#fafbff;
}
.container-narrow{max-width:1120px}
.btn-brand{background:var(--brand);border:none}
.btn-brand:hover{filter:brightness(.95)}
.link-brand{color:var(--brand);text-decoration:none}
.link-brand:hover{text-decoration:underline}
.shadow-soft{box-shadow:0 8px 30px rgba(16,24,40,.08)}
.card-soft{background:var(--surface);border:1px solid #eef2ff;border-radius:1rem}
.badge-soft{background:var(--brand-soft);color:var(--brand);border-radius:999px}

/* HERO */
.hero{
  position:relative;
  padding: clamp(2rem, 4vw + 1rem, 4rem) 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(700px 400px at -10% 10%, rgba(99,102,241,.10), transparent 60%),
    linear-gradient(180deg,#ffffff, #f7f9ff 60%, #f6f8ff);
  overflow:hidden;
}
.hero .headline{font-weight:800;letter-spacing:-.02em}
.hero .sub{color:var(--muted)}

/* Search box */
.search-wrap{
  position:relative;            /* importante para el dropdown */
  background:#fff;
  border:1px solid #e9efff;
  border-radius:1rem;
  padding:.75rem;
  gap:.5rem;
}
.search-input{
  border:none; outline:none; width:100%; font-size:1.05rem; padding:.75rem 1rem;
}
.search-input:focus{outline:none}
.search-wrap:focus-within{box-shadow:0 0 0 4px var(--ring)}
.suggest-box{
  position:absolute; top:100%; left:0; right:0; z-index:2000; margin-top:.25rem;
  background:#fff; border:1px solid #e9efff; border-radius:.75rem; display:none; max-height:280px; overflow:auto;
}
.suggest-item{padding:.75rem 1rem; cursor:pointer}
.suggest-item:hover,.suggest-item.is-active{background:#f6f8ff}

/* Side illustration */
.device-blob{
  aspect-ratio: 1/1; border-radius:24px; background:
  radial-gradient(120% 90% at 70% 10%, #e8f0ff 0%, transparent 60%),
  linear-gradient(135deg, #ffffff, #f1f5ff 60%, #eef2ff);
  border:1px solid #e9efff;
}
.device-mock{
  width:min(320px, 90%); height:auto; border-radius:28px;
  border:10px solid #0f172a; background:#0b1220; margin:auto; position:relative;
  box-shadow:0 20px 60px rgba(2,6,23,.25);
}
.device-mock::after{
  content:""; position:absolute; inset:0; border-radius:20px;
  background:
    radial-gradient(60% 40% at 70% 20%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(50% 30% at 30% 80%, rgba(99,102,241,.25), transparent 60%);
  mix-blend:screen; opacity:.8;
}

/* Features */
.feature{display:flex; gap:.75rem}
.feature i{font-size:1.25rem; color:var(--brand)}

/* Cursos */
.banner-curso{
  background:linear-gradient(180deg, #0b1220, #111827);
  color:#e5e7eb; border-radius:1.25rem; overflow:hidden; position:relative;
}
.banner-curso .spark{
  position:absolute; inset:auto -10% -40% auto; width:420px; height:420px; filter:blur(40px);
  background: radial-gradient(closest-side, rgba(59,130,246,.35), transparent 70%),
              radial-gradient(closest-side, rgba(99,102,241,.28), transparent 70%);
  opacity:.8;
}

/* Footer */
.footer{color:#6b7280}


/* Ítems con miniatura y textos */
.suggest-item{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  cursor: pointer;
  min-height: 44px; /* tap target móvil */
  border-radius: .6rem;
}

.suggest-item:hover,
.suggest-item.is-active{
  background: #f6f8ff;
}

.suggest-thumb{
  width: 40px;
  height: 40px;
  border-radius: .5rem;
  object-fit: cover;
  background: #f2f6ff;
  border: 1px solid #e9efff;
  flex: 0 0 40px;
}

.suggest-body{
  display: grid;
  gap: .125rem;
}

.suggest-title{
  font-weight: 600;
  line-height: 1.15;
}

.suggest-hint{
  font-size: .8rem;
  color: var(--muted);
}

/* Si hace flip por teclado en móvil ya lo gestiona el JS;
   mantenemos la visual activa clara */
.suggest-item.is-active{
  outline: 2px solid rgba(59,130,246,.20);
  outline-offset: -2px;
}



/* Scroll táctil suave y pan vertical permitido en el dropdown */
.suggest-box{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* evita que scrollee el body al llegar al borde */
}

.suggest-item{
  touch-action: pan-y; /* permite arrastrar vertical sin bloquear el gesto */
}