/* Páginas estáticas de aipanel.cl (nosotros / contacto / privacidad / 404).
   Extraído de los estilos que ya usaban las páginas de /servicios/, para no
   repetir el mismo bloque en cada archivo. Depende de tokens.css: acá no se
   define ni un color, solo se componen los tokens de la casa. */

body {
  padding: 56px var(--gutter) 96px;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
}

.wrap { max-width: 880px; margin: 0 auto; }
.wrap--wide { max-width: 1100px; }

.back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--fg-muted); margin-bottom: 32px; text-decoration: none;
}
.back:hover { color: var(--orange-700); text-decoration: none; }

.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--orange-700); margin-bottom: 12px;
}

h1 {
  font-family: var(--font-display); font-size: clamp(36px, 5.4vw, 64px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 20px;
  color: var(--fg-strong);
}
h1 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--orange-700);
}

.lead {
  font-size: 18px; color: var(--fg-muted); max-width: 640px;
  line-height: 1.55; margin: 0 0 40px;
}

h2 {
  font-family: var(--font-display); font-size: 28px; margin: 48px 0 16px;
  color: var(--fg-strong); letter-spacing: -0.015em;
}
h3 {
  font-family: var(--font-display); font-size: 19px; margin: 32px 0 10px;
  color: var(--fg-strong);
}

p { line-height: 1.7; color: var(--fg); margin: 0 0 16px; }
a { color: var(--orange-700); }

ul { list-style: none; padding: 0; }
ul li {
  padding: 10px 0 10px 24px; position: relative; line-height: 1.5;
  border-bottom: 1px dashed var(--border);
}
ul li::before {
  content: '✓'; position: absolute; left: 0; top: 10px;
  color: var(--green-500); font-weight: 700;
}
ul.plain li { padding-left: 0; }
ul.plain li::before { content: none; }

ol { padding-left: 20px; }
ol li { padding: 6px 0; line-height: 1.6; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 24px; }
.pill {
  font-family: var(--font-mono); font-size: 11px; padding: 5px 11px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; color: var(--fg);
}

.box {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 28px; margin: 32px 0;
}
.box h2, .box h3 { margin-top: 0; }

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy-900); color: var(--fg-on-dark);
  padding: 14px 24px; border-radius: 999px; text-decoration: none;
  font-weight: 600; transition: all 220ms var(--ease-standard);
}
.cta:hover {
  background: var(--orange-600); color: var(--fg-on-dark);
  text-decoration: none; transform: translateY(-1px);
}

.meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
  margin-top: 48px;
}

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin: 24px 0;
}
.card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 24px;
}
.card h3 { margin: 0 0 8px; font-size: 17px; }
.card p { font-size: 14px; color: var(--fg-muted); margin: 0; }

dl { margin: 0; }
dt { font-weight: 700; color: var(--fg-strong); margin-top: 20px; }
dd { margin: 6px 0 0; line-height: 1.7; color: var(--fg); }