/* Identidad visual de las páginas institucionales (quienes-somos, contacto):
   paleta neutra propia, no depende de ninguna categoría. */
:root{
  --bg: #0b0e13; --surface: #11151d; --surface-2: #171c26;
  --ink: #eef1f6; --ink-soft: #9aa4b5; --ink-dim: #5d6577; --line: #232a38;
  --accent: #5aa6ff; --accent-ink: #a9d0ff;
  --font-display: 'Lexend', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
}

.pagina-institucional{
  max-width: 760px; margin: 0 auto; padding: 3.5rem 2rem 5rem;
  font-family: var(--font-body); color: var(--ink);
}
.pagina-institucional h1{
  font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 1.8rem; text-wrap: balance;
}
.pagina-institucional p{
  color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; margin: 0 0 1.2rem;
}
.pagina-institucional a{ color: var(--accent-ink); }

.form-contacto{
  display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.6rem;
}
.form-contacto label{
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-dim); margin-top: 0.8rem;
}
.form-contacto input[type=text], .form-contacto input[type=email], .form-contacto textarea{
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-family: var(--font-body); font-size: 0.98rem;
  padding: 0.65rem 0.85rem; resize: vertical;
}
.form-contacto input:focus, .form-contacto textarea:focus{
  outline: none; border-color: var(--accent);
}
.form-contacto button{
  margin-top: 1.4rem; align-self: flex-start;
  background: var(--accent); color: var(--bg); border: none; border-radius: 999px;
  padding: 0.75rem 1.8rem; font-family: var(--font-body); font-weight: 600;
  font-size: 0.95rem; cursor: pointer; transition: opacity .15s;
}
.form-contacto button:hover{ opacity: 0.85; }
.campo-oculto{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-ok{
  color: var(--accent-ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 1rem 1.2rem;
}
.form-errores{
  color: #ff8a8a; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 1rem 1.2rem 1rem 2rem; margin: 0 0 1.2rem;
}