/* ────────────────────────────────────────────────
 * MyTalentos — Landing v1
 * Dark + IA + glassy. Sin frameworks.
 * ──────────────────────────────────────────────── */

:root {
  --bg: #0a0613;
  --bg-2: #110827;
  --surface: rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.14);

  --text: #f5f3ff;
  --text-2: #c4b5fd;
  --text-muted: #9ca3af;

  --primary: #a78bfa;
  --cyan: #22d3ee;
  --amber: #fbbf24;
  --rose: #fb7185;
  --green: #34d399;
  --indigo: #818cf8;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow: 0 20px 50px rgba(91, 33, 182, .25);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.5);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s,opacity .2s}
button{font-family:inherit}
code{font-family:var(--font-mono);background:rgba(255,255,255,.08);padding:2px 7px;border-radius:6px;font-size:.92em;color:var(--cyan)}

/* ── Background layers ── */
.bg-grid{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
}
.bg-glow{
  position:fixed; z-index:-2; pointer-events:none;
  width:600px; height:600px; border-radius:50%;
  filter: blur(120px);
  opacity:.45;
}
.bg-glow-1{ background:#7c3aed; top:-10%; left:-10%; animation: drift 20s ease-in-out infinite }
.bg-glow-2{ background:#06b6d4; top:30%; right:-10%; animation: drift 24s ease-in-out infinite reverse }
.bg-glow-3{ background:#f59e0b; bottom:-10%; left:30%; opacity:.25; animation: drift 30s ease-in-out infinite }
@keyframes drift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(80px,-60px)}
}

/* ── Layout ── */
.container{ max-width:1140px; margin:0 auto; padding:0 24px }

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-pill);
  font-weight:700; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; user-select:none;
  transition:transform .15s, box-shadow .25s, background .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-1px) }
.btn-sm{ padding:9px 16px; font-size:.85rem }
.btn-lg{ padding:16px 30px; font-size:1.05rem }
.btn-primary{
  background:linear-gradient(135deg,#a78bfa,#22d3ee);
  color:#0a0613;
  box-shadow:0 10px 30px rgba(124,58,237,.45), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.btn-primary:hover{ box-shadow:0 14px 38px rgba(124,58,237,.6), 0 0 0 1px rgba(255,255,255,.18) inset }
.btn-ghost{
  background:rgba(255,255,255,.04); color:var(--text); border-color:var(--border-2);
}
.btn-ghost:hover{ background:rgba(255,255,255,.08) }
.btn-tg{
  background:#229ED9; color:#fff;
  box-shadow:0 8px 24px rgba(34,158,217,.4);
}
.btn-tg:hover{ background:#1ca0e0 }

/* ── Brand / Logo ── */
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; color:var(--text) }
.brand-logo{ display:inline-flex }
.brand-name{ font-size:1.15rem; letter-spacing:-.01em; font-weight:900 }
/* "OS" siempre con gradiente naranja/rojo como en el logo del bot */
.brand-os{
  background:linear-gradient(180deg, #fde047 0%, #f97316 60%, #ef4444 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:900;
}
.brand-foot .brand-name{ color:var(--text) }

/* ── Nav ── */
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(22px) saturate(160%);
  background:rgba(10,6,19,.72);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-links{ display:flex; gap:28px; font-size:.92rem; color:var(--text-muted); font-weight:500 }
.nav-links a:hover{ color:var(--text) }
@media (max-width:720px){ .nav-links{ display:none } }

/* ── Hero ── */
.hero{ padding:88px 0 60px; position:relative }
.hero-inner{ max-width:920px; margin:0 auto; padding:0 24px; text-align:center }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--radius-pill);
  background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.25);
  color:var(--cyan); font-size:.8rem; font-weight:600;
  margin-bottom:24px;
}
.badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(52,211,153,.18); animation: pulse 2s infinite }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }
.hero-title{
  font-size:clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 22px;
}
.grad-text{
  background:linear-gradient(135deg,#a78bfa 0%,#22d3ee 60%,#fbbf24 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Tagline DESCUBRE · ENTIENDE · POTENCIA en colores del logo bot */
.hero-tagline{
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  margin: 4px 0 22px;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: 4px;
}
.tag-w-blue  { color:#22d3ee }
.tag-w-purple{ color:#a78bfa }
.tag-w-green { color:#34d399 }
.tag-dot{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.35);
}
@media (max-width:520px){
  .hero-tagline{ font-size:.72rem; letter-spacing:3px; gap:9px }
}
.hero-sub{
  font-size:1.15rem; color:var(--text-2); max-width:680px; margin:0 auto 32px;
  line-height:1.65;
}
.hero-sub b{ color:var(--text); font-weight:700 }
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:50px }
.hero-trust{
  display:inline-flex; align-items:center; gap:24px;
  padding:14px 28px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
}
.trust-item{ display:flex; flex-direction:column; align-items:center; line-height:1 }
.trust-num{ font-weight:900; font-size:1.2rem; color:var(--text); font-family:var(--font-mono) }
.trust-lbl{ font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; margin-top:6px }
.trust-sep{ width:1px; height:30px; background:var(--border) }

/* ── Bot Strip ── */
.bot-strip{ padding:60px 0 40px }
.bot-card{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  padding:46px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(34,211,238,.08));
  border:1px solid var(--border-2);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.bot-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 0%, rgba(167,139,250,.2), transparent 50%);
  pointer-events:none;
}
.bot-card-left{ position:relative }
.bot-pill{
  display:inline-block; padding:5px 12px; border-radius:var(--radius-pill);
  background:rgba(34,211,238,.15); color:var(--cyan); font-size:.74rem; font-weight:700;
  letter-spacing:.5px; margin-bottom:14px;
}
.bot-title{ font-size:clamp(1.6rem, 3vw, 2.3rem); margin:0 0 14px; font-weight:900; letter-spacing:-.02em }
.bot-sub{ color:var(--text-2); font-size:1rem; line-height:1.65; margin:0 0 24px }
.bot-sub b{ color:#fff }

.phone-mock{
  display:flex; flex-direction:column; gap:10px;
  padding:22px; border-radius:18px;
  background:#17212b;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  font-size:.92rem; line-height:1.4;
  position:relative; overflow:hidden;
}
.phone-msg{
  padding:10px 14px; border-radius:14px; max-width:88%;
  animation: slideIn .5s ease both;
}
.phone-msg-bot{ background:#212d3b; color:#fff; align-self:flex-start; border-bottom-left-radius:4px }
.phone-msg-user{ background:#3390ec; color:#fff; align-self:flex-end; border-bottom-right-radius:4px }
.phone-msg b{ color:var(--cyan); font-weight:700 }
.phone-typing{ display:flex; gap:5px; padding:10px 14px; background:#212d3b; border-radius:14px; align-self:flex-start; border-bottom-left-radius:4px }
.phone-typing span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); animation: bounce 1.4s infinite both }
.phone-typing span:nth-child(2){ animation-delay:.2s }
.phone-typing span:nth-child(3){ animation-delay:.4s }
@keyframes bounce{ 0%,80%,100%{transform:translateY(0); opacity:.4} 40%{transform:translateY(-6px); opacity:1} }
@keyframes slideIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

@media (max-width:820px){
  .bot-card{ grid-template-columns:1fr; padding:30px }
  .bot-card-right{ display:none }
}

/* ── Section heads ── */
.section-head{ text-align:center; max-width:720px; margin:0 auto 50px }
.eyebrow{ font-size:.74rem; font-weight:700; color:var(--cyan); letter-spacing:3px; text-transform:uppercase; display:block; margin-bottom:12px }
.section-title{ font-size:clamp(1.8rem, 3.6vw, 2.8rem); font-weight:900; letter-spacing:-.02em; margin:0 0 12px; line-height:1.15 }
.section-sub{ color:var(--text-muted); font-size:1.05rem; line-height:1.65; margin:0 }

/* ── Features grid ── */
.features{ padding:80px 0 70px }
.grid-features{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
@media (max-width:920px){ .grid-features{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .grid-features{ grid-template-columns:1fr } }
.card{
  padding:26px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--border);
  transition: transform .25s, border-color .25s, background .25s;
}
.card:hover{ transform:translateY(-4px); border-color:var(--border-2); background:var(--surface-2) }
.card-feat h3{ font-size:1.1rem; font-weight:700; margin:0 0 8px }
.card-feat p{ color:var(--text-muted); font-size:.92rem; margin:0; line-height:1.6 }
.card-feat p b{ color:var(--text-2); font-weight:600 }
.card-icon{
  width:44px; height:44px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.icon-purple{ background:rgba(167,139,250,.15); color:#c4b5fd }
.icon-cyan  { background:rgba(34,211,238,.15);  color:#67e8f9 }
.icon-amber { background:rgba(251,191,36,.15);  color:#fcd34d }
.icon-rose  { background:rgba(251,113,133,.15); color:#fda4af }
.icon-green { background:rgba(52,211,153,.15);  color:#6ee7b7 }
.icon-indigo{ background:rgba(129,140,248,.15); color:#a5b4fc }

/* ── Roadmap timeline ── */
.roadmap{ padding:70px 0 80px }
.timeline{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
@media (max-width:920px){ .timeline{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .timeline{ grid-template-columns:1fr } }
.phase{
  padding:24px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--border);
  position:relative;
}
.phase h3{ font-size:1.05rem; margin:8px 0 12px; font-weight:700 }
.phase ul{ margin:0 0 16px; padding-left:0; list-style:none }
.phase li{ font-size:.88rem; color:var(--text-muted); padding:5px 0 5px 18px; position:relative; line-height:1.5 }
.phase li::before{ content:'›'; position:absolute; left:0; color:var(--cyan); font-weight:700 }
.phase-tag{
  display:inline-block; padding:5px 11px; border-radius:8px;
  background:rgba(52,211,153,.15); color:var(--green);
  font-size:.66rem; font-weight:700; letter-spacing:1px;
}
.phase-tag-soon{ background:rgba(167,139,250,.15); color:var(--text-2) }
.phase-cta{ color:var(--cyan); font-weight:600; font-size:.88rem }
.phase-cta:hover{ color:#67e8f9 }
.phase-eta{ font-size:.78rem; color:var(--text-muted); font-family:var(--font-mono) }
.phase-active{ background:linear-gradient(135deg, rgba(52,211,153,.08), rgba(34,211,238,.04)); border-color:rgba(52,211,153,.3) }

/* ── Audience ── */
.audience{ padding:60px 0 }
.aud-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width:780px){ .aud-grid{ grid-template-columns:1fr } }
.aud-card{
  padding:30px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--border);
}
.aud-card h3{ font-size:1.15rem; margin:6px 0 10px; font-weight:700 }
.aud-card p{ margin:0; color:var(--text-muted); font-size:.95rem; line-height:1.6 }
.aud-tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:2px;
  color:var(--amber); margin-bottom:8px;
}

/* ── Final CTA ── */
.cta-final{ padding:60px 0 80px }
.cta-box{
  text-align:center;
  padding:54px 32px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(34,211,238,.1) 50%, rgba(251,191,36,.08));
  border:1px solid var(--border-2);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.cta-box::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(167,139,250,.25), transparent 60%);
  pointer-events:none;
}
.cta-box h2{ font-size:clamp(1.8rem, 4vw, 2.6rem); font-weight:900; letter-spacing:-.02em; margin:0 0 12px; position:relative }
.cta-box > p{ color:var(--text-2); margin:0 0 26px; font-size:1.05rem; position:relative }
.cta-box .btn{ position:relative }
.cta-fineprint{ font-size:.85rem; color:var(--text-muted); margin-top:22px !important; position:relative }
.cta-fineprint a{ color:var(--cyan) }
.cta-fineprint a:hover{ color:#67e8f9 }

/* ── Footer ── */
.footer{ padding:60px 0 30px; border-top:1px solid var(--border) }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:30px }
@media (max-width:680px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px } .foot-grid > div:first-child{ grid-column:1/-1 } }
.foot-grid strong{ display:block; font-size:.85rem; color:var(--text); margin-bottom:14px }
.foot-grid a{ display:block; color:var(--text-muted); font-size:.88rem; padding:5px 0 }
.foot-grid a:hover{ color:var(--text) }
.foot-tag{ color:var(--text-muted); font-size:.88rem; margin:10px 0 0; max-width:340px; line-height:1.55 }
.foot-bottom{
  padding-top:22px; border-top:1px solid var(--border);
  font-size:.82rem; color:var(--text-muted);
  text-align:center;
}

/* ── Selection ── */
::selection{ background:rgba(167,139,250,.4); color:#fff }
::-moz-selection{ background:rgba(167,139,250,.4); color:#fff }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}