/* Sección: Contenido */
.content {
  display: grid;
  max-width: 750px;
  gap: 20px;
  margin-inline: auto;
}

.content ol,
.content ul {
  gap: 5px;
  display: grid;
  padding-left: 25px;
}

.content li::marker {
  color: var(--primary);
}

.content ol li {
  list-style-type: upper-roman;
}

.content h2,
.content h3 {
  font-size: 20px;
}

/* Formulario de contacto */
.content form {
  gap: 10px;
  width: 100%;
  display: grid;
  max-width: 400px;
  margin-inline: auto;
}

.content form h3 {
  text-align: center;
  margin-bottom: 10px;
}

.content form input:not([type="checkbox"]),
.content form textarea,
.content form > span {
  --height: 50px;

  width: 100%;
  outline: none;
  border: 2px solid;
  font-size: inherit;
  padding-inline: 20px;
  font-family: inherit;
  min-height: var(--height);
  background: var(--gray-light);
  border-color: var(--gray-light);
  transition: 0.3s border-color ease;
  border-radius: calc(var(--height) / 2);
}

.content form input.valid,
.content form textarea.valid {
  border-color: var(--green);
}

.content form input.invalid,
.content form textarea.invalid {
  border-color: var(--red);
}

.content form input::placeholder,
.content form textarea::placeholder {
  font-size: 14px;
  color: var(--gray-dark);
}

.content form textarea {
  resize: none;
  height: 150px;
  overflow: auto;
  padding-block: 15px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.content form > span {
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  padding: 10px 15px;
  text-align: center;
  background: var(--primary);
}

/* Aviso de privacidad */
.content form .policy {
  display: flex;
  position: relative;
}

.content form .policy span {
  text-indent: 26px;
  display: inline-block;
}

.content form .policy input {
  top: 2px;
  padding: 2px;
  display: flex;
  cursor: pointer;
  appearance: none;
  position: absolute;
  border-radius: 4px;
  border: 2px solid var(--gray-dark);
}

.content form .policy input::before {
  scale: 0;
  content: "";
  padding: 4px;
  border-radius: 2px;
  background: var(--primary);
  transition: 0.1s scale ease;
}

.content form .policy input:checked:before {
  scale: 1;
}

/* Mensaje */
body > span {
  right: 0;
  bottom: 0;
  opacity: 0;
  margin: 20px;
  color: #fff;
  position: fixed;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 10px;
  transition: 0.2s opacity ease;
}

body > span.send {
  background: var(--green);
}

body > span.error {
  background: var(--red);
}