/* ────────────────────────────────────────────────
 * MyTalentOS — Estilos para páginas internas
 * (legales · formulario · catálogo · gracias)
 * Hereda de site.css; aquí sólo lo específico.
 * ──────────────────────────────────────────────── */

/* ── Wrapper de contenido textual largo (legales) ── */
.doc{
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 24px 80px;
  position: relative;
}
.doc h1{
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 900;
  letter-spacing:-.02em;
  margin: 0 0 8px;
  line-height: 1.15;
}
.doc .doc-meta{
  color: var(--text-muted);
  font-size: .85rem;
  margin: 0 0 32px;
  font-family: var(--font-mono);
}
.doc h2{
  font-size: 1.3rem;
  margin: 38px 0 12px;
  letter-spacing: -.01em;
  color: var(--text);
  font-weight: 800;
}
.doc h3{
  font-size: 1.05rem;
  margin: 22px 0 8px;
  color: var(--text-2);
  font-weight: 700;
}
.doc p{
  color: #d6d3e9;
  margin: 0 0 14px;
  font-size: .98rem;
  line-height: 1.7;
}
.doc ul, .doc ol{
  color: #d6d3e9;
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: .98rem;
  line-height: 1.7;
}
.doc li{ padding: 3px 0 }
.doc li::marker{ color: var(--cyan) }
.doc a{ color: var(--cyan) }
.doc a:hover{ color: #67e8f9 }
.doc strong, .doc b{ color: #fff; font-weight: 700 }
.doc code{ font-size: .9em }

.doc-toc{
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 32px;
  font-size: .85rem;
}
.doc-toc a{
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.04);
  color: var(--text-2);
}
.doc-toc a:hover{ background: rgba(255,255,255,.08); color: var(--text) }

.doc-callout{
  padding: 16px 20px;
  border-radius: var(--radius);
  background: rgba(34,211,238,.08);
  border-left: 3px solid var(--cyan);
  margin: 18px 0;
}
.doc-callout p{ margin: 0; color: var(--text-2) }
.doc-callout strong{ color: var(--cyan) }

.doc-table{
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 22px;
  font-size: .92rem;
}
.doc-table th, .doc-table td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: #d6d3e9;
}
.doc-table th{
  color: var(--text);
  font-weight: 700;
  background: rgba(255,255,255,.03);
}

.doc-back{
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 18px;
  font-size: .88rem;
  color: var(--text-muted);
}
.doc-back:hover{ color: var(--cyan) }

/* ── Catálogo de tests (en home) ── */
.catalog{ padding: 40px 0 70px }
.catalog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width:920px){ .catalog-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width:540px){ .catalog-grid{ grid-template-columns: 1fr } }

.cat-item{
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; gap: 14px; align-items: flex-start;
  transition: transform .2s, border-color .2s, background .2s;
}
.cat-item:hover{ transform: translateY(-2px); border-color: var(--border-2); background: var(--surface-2) }
.cat-icon{
  font-size: 1.6rem;
  line-height: 1;
  flex: 0 0 auto;
}
.cat-body{ flex: 1; min-width: 0 }
.cat-name{
  font-weight: 700;
  font-size: .98rem;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.3;
}
.cat-meta{
  font-size: .78rem;
  color: var(--text-muted);
  margin: 0 0 6px;
  font-family: var(--font-mono);
  letter-spacing: .3px;
}
.cat-desc{
  font-size: .85rem;
  color: var(--text-2);
  margin: 0;
  line-height: 1.5;
}
.catalog-foot{
  text-align: center;
  margin-top: 28px;
  font-size: .9rem;
  color: var(--text-muted);
}
.catalog-foot a{ color: var(--cyan); font-weight: 600 }

/* ── Formulario "solicitar demo" ── */
.demo-wrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.demo-wrap > h1{
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.demo-wrap > .lead{
  color: var(--text-2);
  font-size: 1.05rem;
  margin: 0 0 30px;
  line-height: 1.65;
}

.form-card{
  padding: 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(34,211,238,.04));
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow);
}
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width:580px){ .form-row{ grid-template-columns: 1fr } }
.form-field{ margin-bottom: 16px }
.form-field label{
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: .2px;
}
.form-field label .req{
  color: var(--rose);
  margin-left: 3px;
}
.form-field input,
.form-field select,
.form-field textarea{
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font);
  font-size: .95rem;
  border-radius: var(--radius);
  background: rgba(0,0,0,.30);
  border: 1px solid var(--border-2);
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline: none;
  border-color: var(--cyan);
  background: rgba(0,0,0,.50);
}
.form-field textarea{ resize: vertical; min-height: 100px; line-height: 1.5 }
.form-field .hint{
  display: block; margin-top: 5px;
  font-size: .78rem; color: var(--text-muted);
}

.form-check{
  display: flex; gap: 10px; align-items: flex-start;
  margin: 18px 0 8px;
  font-size: .85rem;
  color: var(--text-2);
  line-height: 1.5;
}
.form-check input{ margin-top: 4px; flex: 0 0 auto }
.form-check a{ color: var(--cyan) }

.form-actions{
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-top: 18px;
}
.form-note{ font-size: .8rem; color: var(--text-muted); margin: 14px 0 0 }

/* ── Página de gracias ── */
.thanks-wrap{
  max-width: 620px; margin: 0 auto;
  padding: 80px 24px 120px;
  text-align: center;
}
.thanks-icon{
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #22d3ee);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  box-shadow: 0 12px 40px rgba(34,211,238,.4);
}
.thanks-wrap h1{
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}
.thanks-wrap p{
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 16px;
}
.thanks-wrap .btn{ margin-top: 18px }

/* ── Slim header para páginas internas ── */
.nav-internal .nav-links a[href="#features"],
.nav-internal .nav-links a[href="#roadmap"],
.nav-internal .nav-links a[href="#bot"]{
  display: none;
}